Laravel 10 Currency Exchange Converter Tutorial

[ad_1]

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 AppEzoic
  • 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.

EzoicEzoic

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

}
    
   }

}
    

Ezoic

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.

Ezoic

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>

Ezoic

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.

Ezoic

Recommended Laravel Tutorials

[ad_2]

Jaspreet Singh Ghuman

Jaspreet Singh Ghuman

Jassweb.com/

Passionate Professional Blogger, Freelancer, WordPress Enthusiast, Digital Marketer, Web Developer, Server Operator, Networking Expert. Empowering online presence with diverse skills.

jassweb logo

Jassweb always keeps its services up-to-date with the latest trends in the market, providing its customers all over the world with high-end and easily extensible internet, intranet, and extranet products.

Contact
Jassweb, Rai Chak, Punjab, India. 143518