Laravel 7/6 Currency Exchange Rate Calculator

In this tutorial you will learn about the Laravel 7/6 Currency Exchange Rate Calculator and its application with practical example.

In this Laravel 7/6 Currency Exchange Rate Calculator tutorial I will show you how to create currency exchange rates calculator in laravel. In this tutorial you will learn to integrate or implement live currency exchange rates calculator in laravel. In this tutorial, we will learn how to create currency exchange rates calculator in laravel applications without using any package with examples.

Table Of Contents−

Laravel 7/6 Currency Exchange Rate Calculator

Install Laravel Fresh New Setup

Signup and Get API KEY
Create Route & Controller
Create the blade view

Start Development Server

Step 1:- Install Laravel Fresh New Setup

First of all we need to create a fresh laravel project, download and install Laravel using the below command

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

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

Now, go to the below link:

https://free.currencyconverterapi.com/

1	https://free.currencyconverterapi.com/

Now obtain API Key from here.

Step 3 :- Create Route & Controller

Now, lets create a controller named CurrencyController using command given below –

php artisan make:controller CurrencyController

1	php artisan make:controller CurrencyController

Create Routes

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

 Route::get('currency','CurrencyController@index');
 Route::post('currency','CurrencyController@exchangeCurrency');

1 2	Route::get('currency','CurrencyController@index'); Route::post('currency','CurrencyController@exchangeCurrency');

Now open controller, Go to app/HTTP/Controller/CurrencyController and put the below code here :

<?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}&compact=y&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;
 
 
     
   }
 
}

<?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}&compact=y&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 4:- Create the blade view

In this step we will create a blade 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</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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

<!DOCTYPE html>

<html>

<head>

<title>Laravel Currency Exchange Rate Calculator</title>

</head>

<body>

Laravel Currency Exchange Rate Calculator

</div>

</div>

</select>

</div>

</select>

</div>

</div>

</form>

</div>

</div>

$(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 5 :- Run Development Server

Now we are ready to run our example so lets start the development server using following artisan command –

php artisan serve

1	php artisan serve

Now, open the following URL in browser to see the output –

http://localhost:8000/currency

1	http://localhost:8000/currency

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 7/6 Currency Exchange Rate Calculator