Laravel 10 Currency Exchange Converter Tutorial

Laravel 10 Currency Exchange Converter Tutorial

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.

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...
    }

}
    
   }

}
    

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.

Recommended Laravel Tutorials

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *