Laravel 8 Currency Converter Tutorial Example

Laravel creates a currency exchange rate calculator or converter example tutorial. In this tutorial, we will learn how to create currency exchange rates calculator in laravel applications without using any package with examples.

This example tutorial also work with laravel 7.x version.

This Laravel tutorial has the purpose to explain how to easily create a currency converter application in laravel without using any package. And you can check out the live currency exchange or converter tool here => click me

How to Implement Currency Converter in Laravel 8 App

  • Step 1 – Install Laravel 8 App
  • Step 2 – Signup and Get API KEY
  • Step 3 – Create Route
  • Step 4 – Create Controller Using Artisan Command
  • Step 5 – Create the blade view
  • Step 6 – Start Development Server
  • Step 7 – Test This App

Step 1 – Install Laravel 8 app

First of all, execute the following command on terminal to install laravel 8 app. So, Open command prompt and execute the following command:

composer create-project --prefer-dist laravel/laravel lara-currency

Step 2 – SignUp and Get API KEY

Next, Go to this link https://free.currencyconverterapi.com/ and get API Key. Because when we will call the API, need put to API key into this.

Step 3 – Create Route

In this step, open web.php file and add the following routes into it, which is placed inside routes directory:

 Route::get('currency','[email protected]'); Route::post('currency','[email protected]');

Step 4 – Create Controller using Artisan Command

In this step, execute the following command on terminal to create the CurrencyController:

php artisan make:controller CurrencyController 

This command will create a controller name CurrencyController.

Next step, open CurrencyController.php file and add the following code into it, which is placed inside app/HTTP/Controller directory:

<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use AshAllenDesign\LaravelExchangeRates\ExchangeRate; use Guzzle\Http\Exception\ClientErrorResponseException; use carbon\Carbon; class CurrencyController extends Controller
{ // public function index() { return view('currency'); } public function exchangeCurrency(Request $request) { $amount = ($request->amount)?($request->amount):(1); $apikey = 'd1ded944220ca6b0c442'; $from_Currency = urlencode($request->from_currency); $to_Currency = urlencode($request->to_currency); $query = "{$from_Currency}_{$to_Currency}"; // change to the free URL if you're using the free version $json = file_get_contents("http://free.currencyconverterapi.com/api/v5/convert?q={$query}&amp;compact=y&amp;apiKey={$apikey}"); $obj = json_decode($json, true); $val = $obj["$query"]; $total = $val['val'] * 1; $formatValue = number_format($total, 2, '.', ''); $data = "$amount $from_Currency = $to_Currency $formatValue"; echo $data; die; } } 

Step 5 – Create the blade view

In this step, we need to create blade view files, Go to app/resources/views/ and create one blade view name currency.blade.php.

After successfully create the blade view file, update the below-given code into your currency.blade.php file:

currency.blade.php

<!DOCTYPE html>
<html>
<head>
<title>Laravel Currency Exchange Rate Calculator - Tutsmake.com</title> <meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.js"></script> </head>
<body>
<div class="container mt-5">
<div class="card">
<div class="card-header">
Laravel Currency Exchange Rate Calculator
</div>
<div class="card-body">
<form id="currency-exchange-rate" action="#" method="post" class="form-group">
<div class="row mb-3">
<div class="col-md-4">
<input type="text" name="amount" class="form-control" value="1"> </div>
<div class="col-md-4">
<select name="from_currency" class="form-control"> <option value='AUD'>AUD</option>
<option value='BGN'>BGN</option>
<option value='BRL'>BRL</option>
<option value='CAD'>CAD</option>
<option value='CHF'>CHF</option>
<option value='CNY'>CNY</option>
<option value='CZK'>CZK</option>
<option value='DKK'>DKK</option>
<option value='EUR'>EUR</option>
<option value='GBP'>GBP</option>
<option value='HKD'>HKD</option>
<option value='HRK'>HRK</option>
<option value='HUF'>HUF</option>
<option value='IDR'>IDR</option>
<option value='ILS'>ILS</option>
<option value='INR'>INR</option>
<option value='ISK'>ISK</option>
<option value='JPY'>JPY</option>
<option value='KRW'>KRW</option>
<option value='MXN'>MXN</option>
<option value='MYR'>MYR</option>
<option value='NOK'>NOK</option>
<option value='NZD'>NZD</option>
<option value='PHP'>PHP</option>
<option value='PLN'>PLN</option>
<option value='RON'>RON</option>
<option value='RUB'>RUB</option>
<option value='SEK'>SEK</option>
<option value='SGD'>SGD</option>
<option value='THB'>THB</option>
<option value='TRY'>TRY</option>
<option value='USD'>USD</option>
<option value='ZAR'>ZAR</option>
</select>
</div>
<div class="col-md-4">
<select name="to_currency" class="form-control">
<option value='AUD'>AUD</option>
<option value='BGN'>BGN</option>
<option value='BRL'>BRL</option>
<option value='CAD'>CAD</option>
<option value='CHF'>CHF</option>
<option value='CNY'>CNY</option>
<option value='CZK'>CZK</option>
<option value='DKK'>DKK</option>
<option value='EUR'>EUR</option>
<option value='GBP'>GBP</option>
<option value='HKD'>HKD</option>
<option value='HRK'>HRK</option>
<option value='HUF'>HUF</option>
<option value='IDR'>IDR</option>
<option value='ILS'>ILS</option>
<option value='INR'>INR</option>
<option value='ISK'>ISK</option>
<option value='JPY'>JPY</option>
<option value='KRW'>KRW</option>
<option value='MXN'>MXN</option>
<option value='MYR'>MYR</option>
<option value='NOK'>NOK</option>
<option value='NZD'>NZD</option>
<option value='PHP'>PHP</option>
<option value='PLN'>PLN</option>
<option value='RON'>RON</option>
<option value='RUB'>RUB</option>
<option value='SEK'>SEK</option>
<option value='SGD'>SGD</option>
<option value='THB'>THB</option>
<option value='TRY'>TRY</option>
<option value='USD'>USD</option>
<option value='ZAR'>ZAR</option>
</select>
</div>
</div> <div class="row">
<div class="col-md-4">
<input type="submit" name="submit" id="btnSubmit" class="btn btn-primary " value="Click To Exchange Rate">
</div>
</div>
</form> </div>
<div class="card-footer">
<span id="output"></span>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$.ajaxSetup({
headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$("#btnSubmit").click(function (event) {
//stop submit the form, we will post it manually.
event.preventDefault();
// Get form
var form = $('#currency-exchange-rate')[0];
// Create an FormData object var data = new FormData(form);
// disabled the submit button
$("#btnSubmit").prop("disabled", true);
$.ajax({
type: "POST",
url: "{{ url('currency') }}",
data: data,
processData: false,
contentType: false,
cache: false,
timeout: 800000,
success: function (data) {
$("#output").html(data);
$("#btnSubmit").prop("disabled", false);
},
error: function (e) {
$("#output").html(e.responseText);
console.log("ERROR : ", e);
$("#btnSubmit").prop("disabled", false);
}
});
});
});
</script>
</body>
</html>

Step 6 – Run Development Server

In this step, we will use the PHP artisan serve command. It will start your server locally

php artisan serve

If you want to run the project diffrent port so use this below command

php artisan serve --port=8080

Step 7 – Test This App

In this step, open browser and hit the following url on it:

http://localhost:8000/currency 

Conclusion

Laravel 8 currency converter example, You have learned how to create a currency converter in laravel using the laravel currency converter without package with example. Our examples run quickly.

Recommended Laravel Posts

Related Posts