If you want to make currency exchange converter in laravel 10 apps; So, In this tutorial, you will learn how to make currency exchange rate converter in laravel 10 applications using free apis without using any package.
Laravel 10 Currency Exchange Converter Tutorial
Steps to create currency exchange converter in laravel 10 apps using free apis:
- Step 1 – Install Laravel 10 App
- Step 2 – Get Currency Exchange 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 10 app
Open terminal or cmd and run the following command into it to install the new Laravel 10 app on your system:
composer create-project --prefer-dist laravel/laravel lara-currency
Step 2 – Get Currency Exchange API KEY
Then this link https://www.exchangerate-api.com/ and get free API Key. This api will provide current exchange rates.
Recommended:- Laravel 10 Livewire CRUD with Jetstream Tutorial
Step 3 – Create Route
Now, visit the routes directory and open the web.php file. And add the following routes into it:
use App\Http\Controllers\Admin\CurrencyController;
Route::get('currency', [CurrencyController::class, 'index']);
Route::post('currency', [CurrencyController::class, 'exchangeCurrency']);
Step 4 – Create Controller using Artisan Command
Next, run the following command on cmd or terminal to create the CurrencyController:
php artisan make:controller CurrencyController
Once you have created the controller, then 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 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 = 'd1ded944220ca6b0c662';
$from_Currency = urlencode($request->from_currency);
$to_Currency = urlencode($request->to_currency);
$response_json = file_get_contents("https://v6.exchangerate-api.com/v6/{$apikey}/latest/{$from_Currency}");
// Continuing if we got a result
if(false !== $response_json) {
// Try/catch for json_decode operation
try {
// Decoding
$response = json_decode($response_json);
// Check for success
if('success' === $response->result) {
$final = $amount*$response->conversion_rates->{$to_Currency};
$query = "{$amount} {$from_Currency} = {$final} {$to_Currency}";
echo $query;
}
}
catch(Exception $e) {
// Handle JSON parse error...
}
}
}
}
Recommended:- Laravel 10 Livewire Load More OnScroll Tutorial Example
Step 5 – Create the blade view
Now, you need to create blade view files, Go to app/resources/views/ and create one blade view name currency.blade.php.
Aand add the below-given code into your currency.blade.php file:
currency.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel 10 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
Finally, run PHP artisan serve command to start your server locally; is as follow:
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
Open browser and hit the following url on it:
http://localhost:8000/currency
Conclusion
That’s it; You have learned how to create a currency rate converter in laravel without using any package.
