首頁 > 文章 > 後端開發 > PHP 速成課程：簡單的貨幣轉換器

PHP 速成課程：簡單的貨幣轉換器

WBOY原創: 2024-08-05 19:16:53889瀏覽

PHP crash course: Simple Currency Converter

基於 PHP 的貨幣轉換器工具，讓使用者可以使用從外部 API 取得的即時匯率來轉換貨幣。該工具是使用 PHP、HTML、jQuery、AJAX、JSON、Bootstrap、CSS 和 MySQL 建構的。該應用程式旨在提供準確的貨幣換算並在用戶友好的介面中顯示結果。

主題： php、mysql、部落格、ajax、bootstrap、jquery、css、貨幣換算、外部 api 整合、api 整合

逐步解決方案

1. 目錄結構

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

2. 資料庫架構

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');

3. 設定檔

設定設定（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');
?>

4. 設定資料庫連線

建立資料庫連線（include/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
}
?>

5. HTML 和 PHP 結構

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>

6. JavaScript 和 AJAX

AJAX 處理 (assets/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();
            }
         }
      });
   });
});

說明：

使用 Bootstrap 進行樣式設置，使用 jQuery 進行 AJAX 請求。
$('#currency-form').on('submit', ...): 處理表單提交並向 src/convert.php 發送 AJAX 請求。
$.ajax({...})：向伺服器發送資料並處理回應。

7. 後端 PHP 腳本

取得匯率 (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.']);
}
?>

說明：

file_get_contents($apiUrl): 從 API 取得資料。
json_decode($response, true)：將 JSON 資料解碼為關聯數組。
INSERT INTOcurrency_rates ... ON DUPLICATE KEY UPDATE：在資料庫中插入或更新貨幣匯率。

貨幣轉換邏輯 (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.']);
}
?>

說明：

$_POST['amount'], $_POST['from_currency'], $_POST['to_currency']: 從AJAX請求取得參數。
SELECT Exchange_rate FROMcurrency_rates WHEREcurrency = ?：從資料庫取得匯率。
轉換金額並回傳 JSON 回應。

貨幣名稱和代碼 (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]);
?>

說明：

從貨幣中選擇代碼、名稱：從資料庫中取得貨幣名稱和代碼。
傳回 JSON 回應。

6.CSS樣式

CSS 樣式 (assets/css/style.css)

body {
   padding-top: 50px;
}

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

文件和評論

include/config.php: 包含資料庫設定並使用 PDO 和 API 設定連接到 MySQL。
index.php：具有 HTML 結構的主頁，包括用於樣式化的 Bootstrap。
assets/js/script.js: 處理載入和儲存貼文的 AJAX 請求。使用 jQuery 進行 DOM 運算和 AJAX。
- 使用 jQuery 進行 AJAX 呼叫。
- 在#result div 中顯示結果。
assets/css/style.css：應用程式的基本樣式。
- 設定背景顏色和容器寬度。
src/fetch-rates.php: 從資料庫中取得貼文並將其作為 JSON 傳回。
- 從 API 取得匯率。
- 將轉換結果儲存在資料庫中。
- 以 JSON 格式傳回結果。
src/get-currencies.php: 根據 ID 的存在處理貼文建立和更新。
- 以 JSON 格式傳回結果。
src/convert.php: 處理轉換請求並與 API 互動。
- 驗證輸入資料。
- 從 API 取得匯率。
- 計算轉換結果並儲存在資料庫中。
- 以 JSON 格式傳回結果。

此設定提供了一個基本但實用的貨幣轉換器工具，並帶有詳細的註釋和解釋。確保根據您的需求調整 API URL 和資料庫設定。對於實際使用，您可能還需要新增錯誤處理和安全措施。

連結連結

如果您發現本系列有幫助，請考慮在 GitHub 上給 存儲庫 一個星號或在您最喜歡的社交網絡上分享該帖子？。您的支持對我來說意義重大！

如果您想要更多類似的有用內容，請隨時關注我：

領英
GitHub

原始碼

以上是PHP 速成課程：簡單的貨幣轉換器的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php JavaScript sql mysql json jquery css ajax bootstrap html Array if for select format include Directory Error pdo using Interface JS dom this display background input github database

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何使用 Vanilla JavaScript 上傳檔案並新增載入動畫下一篇：如何使用 Vanilla JavaScript 上傳檔案並新增載入動畫

看更多