Currency Converter in Laravel 8

In this tutorial you will learn about the Currency Converter in Laravel 8 and its application with practical example.

In this Laravel 8 Currency Converter tutorial I will show you how to create live Currency Converter in laravel. In this tutorial you will learn to integrate or implement live Currency Converter in laravel. In this tutorial, we will learn how to create Currency Converter in laravel applications without using any package with examples.

Table Of Contents−

Currency Converter in Laravel 8

In this step by step tutorial I will demonstrate you with example how to create Currency Converter in laravel 8. Please follow the instruction given below:

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 we need to create a fresh laravel project, download and install Laravel 8 using the below command

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

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

Now visit the link given below to obtain API Key from there.:

https://free.currencyconverterapi.com/

1	https://free.currencyconverterapi.com/

Step 3 – Create Route

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');

Step 4 – Create Controller using Artisan Command

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

php artisan make:controller CurrencyController

1	php artisan make:controller CurrencyController

The above command will create a controller name CurrencyController. Now, open CurrencyController.php file and put the following code into it.

<?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 5 – 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 6 – 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

Currency Converter in Laravel 8