PHP crash course: Simple Currency Converter

MD ARIFUL HAQUE - Aug 4 - - Dev Community

A PHP-based Currency Converter tool that allows users to convert currencies using real-time exchange rates fetched from an external API. The tool is built with PHP, HTML, jQuery, AJAX, JSON, Bootstrap, CSS, and MySQL. The application is designed to provide accurate currency conversion and display results in a user-friendly interface.

Topics: php, mysql, blog, ajax, bootstrap, jquery, css, currency conversion, external api integration, api integration

Step-by-Step Solution

1. Directory Structure 

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
Enter fullscreen mode Exit fullscreen mode

2. Database Schema

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');
Enter fullscreen mode Exit fullscreen mode

3. Configuration File

Configuration settings (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');
?>
Enter fullscreen mode Exit fullscreen mode

4. Configure the Database Connection

Establishing database connection (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
}
?>
Enter fullscreen mode Exit fullscreen mode

5. HTML and PHP Structure

HTML Structure (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>
Enter fullscreen mode Exit fullscreen mode

6. JavaScript and AJAX

AJAX Handling (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();
            }
         }
      });
   });
});
Enter fullscreen mode Exit fullscreen mode

Explanation:

  • Uses Bootstrap for styling and jQuery for AJAX requests.
  • $('#currency-form').on('submit', ...): Handles form submission and sends an AJAX request to src/convert.php.
  • $.ajax({...}): Sends data to the server and processes the response.

7. Backend PHP Scripts

Fetch Exchange Rates (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.']);
}
?>
Enter fullscreen mode Exit fullscreen mode

Explanation:

  • file_get_contents($apiUrl): Fetches data from the API.
  • json_decode($response, true): Decodes JSON data into an associative array.
  • INSERT INTO currency_rates ... ON DUPLICATE KEY UPDATE: Inserts or updates currency rates in the database.

Currency Conversion Logic (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.']);
}
?>
Enter fullscreen mode Exit fullscreen mode

Explanation:

  • $_POST['amount'], $_POST['from_currency'], $_POST['to_currency']: Gets parameters from AJAX request.
  • SELECT exchange_rate FROM currency_rates WHERE currency = ?: Fetches exchange rates from the database.
  • Converts the amount and returns JSON response.

Currency Name and code (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]);
?>
Enter fullscreen mode Exit fullscreen mode

Explanation:

  • SELECT code, name FROM currencies: Fetches currency name and code from the database.
  • Returns JSON response.

6. CSS Styling

CSS Styling (assets/css/style.css)

body {
   padding-top: 50px;
}

.container {
   max-width: 600px;
   margin: 0 auto;
}
Enter fullscreen mode Exit fullscreen mode

Documentation and Comments

  • include/config.php: Contains database configuration and connects to MySQL using PDO and API configur.
  • index.php: Main page with HTML structure, includes Bootstrap for styling.
  • assets/js/script.js: Handles AJAX requests for loading and saving posts. Uses jQuery for DOM manipulation and AJAX.
    • Uses jQuery for making AJAX calls.
    • Displays results in the #result div.
  • assets/css/style.css: Basic styling for the application.
    • Sets the background color and container width.
  • src/fetch-rates.php: Fetches posts from the database and returns them as JSON.
    • Fetches exchange rates from the API.
    • stores the conversion result in the database.
    • Returns the result in JSON format.
  • src/get-currencies.php: Handles post creation and updating based on the presence of an ID.
    • Returns the result in JSON format.
  • src/convert.php: Processes conversion requests and interacts with the API.
    • Validates input data.
    • Fetches exchange rates from the API.
    • Calculates and stores the conversion result in the database.
    • Returns the result in JSON format.

This setup provides a basic yet functional currency converter tool with detailed comments and explanations. Make sure to adjust API URLs and database settings according to your needs. For real-world use, you may also want to add error handling and security measures.

Connecting Links

If you found this series helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

If you want more helpful content like this, feel free to follow me:

Source Code

Image
How To Tell If You're In The Right Place To Go After Mesothelioma Asbestos Lawyers
Image
7 Things You Never Knew About Accident Injury Lawyers Near Me
Image
20 Fun Facts About Asbestos Compensation Amounts
Image
teknik tambah kecakapan dalam permainan slots online
Image
How To Make An Amazing Instagram Video About Bi Fold Door Repair Near Me
Image
15 Things You've Never Known About Bifold Door Repair Near Me
Image
Request Rate Limiting Middleware for Iris

webdev, go, tutorial, softwaredevelopment
Image
15 Shocking Facts About Asbestos Exposure Litigation That You Didn't Know
Image
Replacement Upvc Door Panel With Cat Flap
Image
Spring Security: Implementing JWT Authentication in Your Java Application

security, spring, authentication, jwt
Image
Fitting Cat Flap in UPVC Door Panel
Image
Flash Crashes: ‘The Best Profit Opportunities Ever’ – Insights from RunnerXBT
Image
20 Myths About Asbestos Claim Payouts: Dispelled
Image
You'll Never Guess This Asbestos Trust Fund Payouts's Tricks
Image
mengapa slots online dapat dipercaya punyai link alternative?
Image
Kris, bintang film dan musik country , wafat di usia 88 tahun , meninggalkan jejak luar biasa di dunia hiburan .
Image
Testing Spring Boot Applications: Unit, Integration, and Mocking — A Comprehensive Guide

integrationtest, mock, test, unittest
Image
Top 10 Couple Stories to Relate to Every Stage of Love
Image
Kanapy Marzeń: Jak Wybrać Idealny Model do Twojego Wnętrza?
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player