首页 >后端开发 >php教程 >PHP 速成课程：简单的货币转换器

PHP 速成课程：简单的货币转换器

WBOY原创: 2024-08-05 19:16:53915浏览

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

上一篇：How to Upload Files With Vanilla JavaScript and Add a Loading Animation下一篇：Make Two Arrays Equal by Reversing Subarrays

查看更多