집 > 기사 > 백엔드 개발 > PHP 집중 강좌: 간단한 환율 변환기

PHP 집중 강좌: 간단한 환율 변환기

WBOY원래의: 2024-08-05 19:16:53889검색

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 형식으로 결과를 반환합니다.

이 설정은 자세한 설명과 설명이 포함된 기본적이면서도 기능적인 통화 변환기 도구를 제공합니다. 필요에 따라 API URL과 데이터베이스 설정을 조정하세요. 실제 사용을 위해 오류 처리 및 보안 조치를 추가할 수도 있습니다.

링크 연결

이 시리즈가 도움이 되었다면 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

성명：

이전 기사：바닐라 JavaScript로 파일을 업로드하고 로딩 애니메이션을 추가하는 방법다음 기사：바닐라 JavaScript로 파일을 업로드하고 로딩 애니메이션을 추가하는 방법