Laravel 7/6 Currency Exchange Rate Calculator

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 also you can download laravel currency converter application here https://github.com/tutsmake/laravel-currency-converter-application

You can check out the live currency exchange or converter tool here => click me

Laravel Currency Exchange Rate Example Tutorial

Just follow the below steps and create a currency exchange rate calculator in laravel application:

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

We need to install laravel 6 fresh application using below command, Open your command prompt and run the below command :

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

After successfully install laravel 6 Application, Go to your root directory using the command line. and follow the below steps.

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 & Controller

Create the CurrencyController using the below command:

php artisan make:controller CurrencyController

This command will create a controller name CurrencyController.

Next, We need to add the route. Go to routes/web.php put the below routes here :

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

Recommended:- Laravel Custom Validation Error Message

Next 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;


    
   }

}

Step 4:- 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 5 :- 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

Now we are ready to run our example so run bellow command to quick run.

http://localhost:8000/currency

Conclusion

In this article, We have learned how to create a currency converter in laravel using the laravel currency converter without package with example. Our examples run quickly.