Kursus ranap PHP: Penukar Mata Wang Mudah-tutorial php-php.cn

PHP crash course: Simple Currency Converter

Alat Penukar Mata Wang berasaskan PHP yang membolehkan pengguna menukar mata wang menggunakan kadar pertukaran masa nyata yang diambil daripada API luaran. Alat ini dibina dengan PHP, HTML, jQuery, AJAX, JSON, Bootstrap, CSS dan MySQL. Aplikasi ini direka untuk menyediakan penukaran mata wang yang tepat dan memaparkan hasil dalam antara muka yang mesra pengguna.

Topik: php, mysql, blog, ajax, bootstrap, jquery, css, penukaran mata wang, integrasi api luaran, integrasi api

Penyelesaian Langkah demi Langkah

1. Struktur Direktori

simple-currency-converter/
│
├── index.html
├── db/
│   └── database.sql
├── include/
│   ├── config.sample.php
│   └── db.php
├── assets/
│   ├── css/
│   │   └── style.css
│   └── js/
│   │   └── script.js
├── src/
│   ├── fetch-rates.php
│   ├── convert.php
│   └── get-currencies.php
├── README.md
└── .gitignore

Salin selepas log masuk

2. Skema Pangkalan Data

db/database.sql:

CREATE TABLE `exchange_rates` (
   `id` int(11) NOT NULL AUTO_INCREMENT,
   `currency` varchar(3) NOT NULL,
   `rate` decimal(10, 4) NOT NULL,
   `timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
   PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;


CREATE TABLE currencies (
   id INT AUTO_INCREMENT PRIMARY KEY,
   code VARCHAR(3) NOT NULL,
   name VARCHAR(50) NOT NULL
);

INSERT INTO currencies (code, name) VALUES
('USD', 'United States Dollar'),
('EUR', 'Euro'),
('GBP', 'British Pound'),
('JPY', 'Japanese Yen'),
('BDT', 'Bangladesh Taka'),
('AUD', 'Australian Dollar');

Salin selepas log masuk

3. Fail Konfigurasi

Tetapan konfigurasi (include/config.sample.php)

<?php
// Database configuration
define('DB_HOST', 'localhost'); // Database host
define('DB_NAME', 'currency_converter'); // Database name
define('DB_USER', 'root'); // Change if necessary
define('DB_PASS', ''); // Change if necessary

// API configuration
define('API_URL', 'https://api.exchangerate-api.com/v4/latest/');
define('API_KEY', 'your_api_key_here');
?>

Salin selepas log masuk

4. Konfigurasikan Sambungan Pangkalan Data

Mewujudkan sambungan pangkalan data (termasuk/db.php)

<?php
include 'db.php';

// Database configuration
$dsn = 'mysql:host='.DB_HOST.';dbname='.DB_NAME;
$options = [
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    PDO::ATTR_EMULATE_PREPARES   => false,
];

// Create a new PDO instance
try {
    $pdo = new PDO($dsn, DB_USER, DB_PASS, $options);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); // Set error mode to exception
} catch (PDOException $e) {
    echo 'Connection failed: ' . $e->getMessage(); // Display error message if connection fails
}
?>

Salin selepas log masuk

5. Struktur HTML dan PHP

Struktur HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Currency Converter</title>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<div class="container">
   <h2 class="text-center">Currency Converter</h2>
   <form id="currency-form">
      <div class="form-group">
         <label for="amount">Amount:</label>
         <input type="number" class="form-control" id="amount" placeholder="Enter amount" required>
      </div>
      <div class="form-group">
         <label for="from_currency">From:</label>
         <select class="form-control" id="from_currency">
            <!-- Options will be loaded dynamically -->
         </select>
      </div>
      <div class="form-group">
         <label for="to_currency">To:</label>
         <select class="form-control" id="to_currency">
            <!-- Options will be loaded dynamically -->
         </select>
      </div>
      <button type="submit" class="btn btn-primary">Convert</button>
   </form>
   <div id="result" class="alert alert-success" style="display:none;"></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>

Salin selepas log masuk

6. JavaScript dan AJAX

Pengendalian AJAX (aset/js/script.js)

$(document).ready(function() {
   // Fetch exchange rates and populate the select options
   $.ajax({
      url: 'src/fetch-rates.php',
      method: 'GET',
      dataType: 'json',
      success: function(data) {
         if (data.status === 'success') {
            populateCurrencyOptions();
         }
      }
   });

   function populateCurrencyOptions() {
      $.ajax({
         url: 'src/get-currencies.php',
         method: 'GET',
         dataType: 'json',
         success: function(data) {
            if (data.status === 'success') {
               var options = '';
               console.log(data.currencies)
               $.each(data.currencies, function(index, currency) {
                  options += '<option value="' + currency.code + '">' + currency.name + '</option>';
               });
               $('#from_currency, #to_currency').html(options);
            }
         }
      });
   }

   // Handle form submission
   $('#currency-form').on('submit', function(e) {
      e.preventDefault();
      var amount = $('#amount').val();
      var fromCurrency = $('#from_currency').val();
      var toCurrency = $('#to_currency').val();

      $.ajax({
         url: 'src/convert.php',
         method: 'POST',
         data: {
            amount: amount,
            from_currency: fromCurrency,
            to_currency: toCurrency
         },
         dataType: 'json',
         success: function(data) {
            if (data.status === 'success') {
               $('#result').html('Converted Amount: ' + data.converted_amount).show();
            } else {
               $('#result').html(data.message).show();
            }
         }
      });
   });
});

Salin selepas log masuk

Penjelasan:

Menggunakan Bootstrap untuk penggayaan dan jQuery untuk permintaan AJAX.
$('#currency-form').on('submit', ...): Mengendalikan penyerahan borang dan menghantar permintaan AJAX ke src/convert.php.
$.ajax({...}): Menghantar data ke pelayan dan memproses respons.

7. Skrip PHP Bahagian Belakang

Ambil Kadar Pertukaran (src/fetch-rates.php)

<?php
require '../include/db.php';

// Fetch exchange rates from the external API
$apiUrl = API_URL . "USD"; // Replace with your API endpoint

$response = file_get_contents($apiUrl);
$data = json_decode($response, true);

if ($data) {
    // Clear existing rates
    $stmt = $pdo->prepare("TRUNCATE TABLE exchange_rates");
    $stmt->execute();

    // Insert new rates
    $stmt = $pdo->prepare("INSERT INTO exchange_rates (currency, rate) VALUES (:currency, :rate)");
    foreach ($data['rates'] as $currency => $rate) {
        $stmt->execute(['currency' => $currency, 'rate' => $rate]);
    }

    echo json_encode(['status' => 'success', 'message' => 'Exchange rates updated successfully.']);
} else {
    echo json_encode(['status' => 'error', 'message' => 'Failed to fetch exchange rates.']);
}
?>

Salin selepas log masuk

Penjelasan:

file_get_contents($apiUrl): Mengambil data daripada API.
json_decode($response, true): Menyahkod data JSON ke dalam tatasusunan bersekutu.
INSERT INTO currency_rates ... PADA KEMASKINI KUNCI DUA: Sisipkan atau kemas kini kadar mata wang dalam pangkalan data.

Logik Penukaran Mata Wang (src/convert.php)

<?php
require '../include/db.php';

$amount = $_POST['amount'];
$fromCurrency = $_POST['from_currency'];
$toCurrency = $_POST['to_currency'];

// Fetch the exchange rate from the database
$stmt = $pdo->prepare("SELECT rate FROM exchange_rates WHERE currency = :currency");
$stmt->execute(['currency' => $fromCurrency]);
$fromRate = $stmt->fetchColumn();

$stmt->execute(['currency' => $toCurrency]);
$toRate = $stmt->fetchColumn();

if ($fromRate && $toRate) {
    // Convert the amount
    $convertedAmount = ($amount / $fromRate) * $toRate;
    echo json_encode(['status' => 'success', 'converted_amount' => number_format($convertedAmount, 2)]);
} else {
    echo json_encode(['status' => 'error', 'message' => 'Conversion failed.']);
}
?>

Salin selepas log masuk

Penjelasan:

$_POST['amount'], $_POST['from_currency'], $_POST['to_currency']: Mendapat parameter daripada permintaan AJAX.
SELECT exchange_rate FROM currency_rates WHERE currency = ?: Mengambil kadar pertukaran daripada pangkalan data.
Menukar amaun dan mengembalikan respons JSON.

Nama dan kod Mata Wang (src/get-currencies.php)

<?php
require '../include/db.php';
$stmt = $pdo->query('SELECT code, name FROM currencies');
$data = [];
while ($row = $stmt->fetch()) {
    $data[] = ['code' => $row['code'], 'name' => $row['name']];
}
echo json_encode(['status' => 'success', 'currencies' => $data]);
?>

Salin selepas log masuk

Penjelasan:

PILIH kod, nama DARI mata wang: Mengambil nama mata wang dan kod daripada pangkalan data.
Mengembalikan respons JSON.

6. Penggayaan CSS

Penggayaan CSS (aset/css/style.css)

body {
   padding-top: 50px;
}

.container {
   max-width: 600px;
   margin: 0 auto;
}

Salin selepas log masuk

Dokumentasi dan Komen

include/config.php: Mengandungi konfigurasi pangkalan data dan menyambung ke MySQL menggunakan konfigurasi PDO dan API.
index.php: Halaman utama dengan struktur HTML, termasuk Bootstrap untuk penggayaan.
assets/js/script.js: Mengendalikan permintaan AJAX untuk memuatkan dan menyimpan siaran. Menggunakan jQuery untuk manipulasi DOM dan AJAX.
- Menggunakan jQuery untuk membuat panggilan AJAX.
- Memaparkan keputusan dalam div #result.
assets/css/style.css: Penggayaan asas untuk aplikasi.
- Menetapkan warna latar belakang dan lebar bekas.
src/fetch-rates.php: Mengambil siaran daripada pangkalan data dan mengembalikannya sebagai JSON.
- Mengambil kadar pertukaran daripada API.
- menyimpan hasil penukaran dalam pangkalan data.
- Mengembalikan hasil dalam format JSON.
src/get-currencies.php: Mengendalikan pembuatan dan pengemaskinian siaran berdasarkan kehadiran ID.
- Mengembalikan hasil dalam format JSON.
src/convert.php: Memproses permintaan penukaran dan berinteraksi dengan API.
- Mengesahkan data input.
- Mengambil kadar pertukaran daripada API.
- Mengira dan menyimpan hasil penukaran dalam pangkalan data.
- Mengembalikan hasil dalam format JSON.

Persediaan ini menyediakan alat penukar mata wang asas tetapi berfungsi dengan ulasan dan penjelasan terperinci. Pastikan anda melaraskan URL API dan tetapan pangkalan data mengikut keperluan anda. Untuk kegunaan dunia sebenar, anda juga mungkin mahu menambah pengendalian ralat dan langkah keselamatan.

Menyambung Pautan

Jika anda mendapati siri ini membantu, sila pertimbangkan untuk memberi repositori bintang di GitHub atau berkongsi siaran pada rangkaian sosial kegemaran anda ?. Sokongan anda amat bermakna bagi saya!

Jika anda mahukan kandungan yang lebih berguna seperti ini, sila ikuti saya:

LinkedIn
GitHub

Kod Sumber

Atas ialah kandungan terperinci Kursus ranap PHP: Penukar Mata Wang Mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!