PHP 집중 강좌: 간단한 환율 변환기-PHP 튜토리얼-php.cn

PHP crash course: Simple Currency Converter

사용자가 외부 API에서 가져온 실시간 환율을 사용하여 통화를 변환할 수 있는 PHP 기반 환율 변환기 도구입니다. 이 도구는 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. 자바스크립트와 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 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 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 code, name 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 구성을 사용하여 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 형식으로 결과를 반환합니다.