ホームページ >バックエンド開発 >PHPチュートリアル >PHP 短期集中コース: シンプルな通貨コンバーター

PHP 短期集中コース: シンプルな通貨コンバーター

WBOYオリジナル: 2024-08-05 19:16:53915ブラウズ

PHP crash course: Simple Currency Converter

ユーザーが外部 API から取得したリアルタイムの為替レートを使用して通貨を換算できるようにする PHP ベースの通貨換算ツール。このツールは、PHP、HTML、jQuery、AJAX、JSON、ブートストラップ、CSS、および MySQL で構築されています。このアプリケーションは、正確な通貨換算を提供し、ユーザーフレンドリーなインターフェイスで結果を表示するように設計されています。

トピック: php、mysql、ブログ、ajax、ブートストラップ、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 を使用し、AJAX リクエストには jQuery を使用します。
$('#currency-form').on('submit', ...): フォームの送信を処理し、AJAX リクエストを src/convert.php に送信します。
$.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 INTO current_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 為替レート FROM 通貨レート WHERE 通貨 = ?: データベースから為替レートを取得します。
金額を変換して JSON レスポンスを返します。

通貨名と通貨コード (src/get-currency.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]);
?>

説明:

SELECT コード、名前 FROM 通貨: データベースから通貨名とコードを取得します。
JSON レスポンスを返します。

6. CSS スタイル

CSS スタイル (assets/css/style.css)

body {
   padding-top: 50px;
}

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

ドキュメントとコメント

include/config.php: データベース設定が含まれており、PDO と API configur を使用して MySQL に接続します。
index.php: HTML 構造を備えたメインページ。スタイリング用のブートストラップが含まれています。
assets/js/script.js: 投稿の読み込みと保存のための AJAX リクエストを処理します。 DOM 操作と AJAX には jQuery を使用します。
- AJAX 呼び出しを行うために jQuery を使用します。
- #result div に結果を表示します。
assets/css/style.css: アプリケーションの基本的なスタイル。
- 背景色とコンテナの幅を設定します。
src/fetch-rates.php: データベースから投稿を取得し、JSON として返します。
- API から為替レートを取得します。
- 変換結果をデータベースに保存します。
- 結果を JSON 形式で返します。
src/get-currency.php: ID の存在に基づいて投稿の作成と更新を処理します。
- 結果を JSON 形式で返します。
src/convert.php: 変換リクエストを処理し、API と対話します。
- 入力データを検証します。
- API から為替レートを取得します。
- 変換結果を計算してデータベースに保存します。
- 結果を JSON 形式で返します。

このセットアップでは、基本的でありながら機能的な通貨換算ツールと詳細なコメントと説明が提供されます。必要に応じて API URL とデータベース設定を調整してください。実際に使用する場合は、エラー処理やセキュリティ対策を追加することもできます。

リンクを接続

このシリーズが役立つと思われた場合は、GitHub で リポジトリ にスターを付けるか、お気に入りのソーシャルネットワークで投稿を共有することを検討してください。あなたのサポートは私にとって大きな意味を持ちます!

このような役立つコンテンツがさらに必要な場合は、お気軽にフォローしてください:

LinkedIn
GitHub

ソースコード

以上がPHP 短期集中コース: シンプルな通貨コンバーターの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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 でファイルをアップロードし、読み込みアニメーションを追加する方法

続きを見る