Laravel 10 Currency Exchange Converter Tutorial

Laravel 10 Currency Exchange Converter Tutorial

Last Updated on Leave a Comment on 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.

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>
Recommended:- Laravel Get Record Last Week, Last 3, 6 Month, 15 Days, 30 Days, Year

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.

Live Demo

Recommended Laravel Tutorials

Laravel Eloquent whereRaw Query Example
How to Get Random Records in Laravel
Laravel Get Next and Previous Record and Url Tutorial
Laravel Clear Route, Config, View Cache using Artisan & Command Line
Laravel InsertOrIgnore Example
Laravel whereIn, whereNotIn With SubQuery Example
Laravel Eloquent withSum() and withCount() Tutorial
Laravel Where Null and Where Not Null Query
Laravel Eloquent firstWhere() Example
Laravel Group by Example
Laravel WhereHas Eloquent Example
Laravel Eloquent selectRaw Query Tutorial
Laravel Order by Example
Laravel Pluck Method Example
Laravel orderByRaw() Query Example
How to Increment and Decrement Column Value in Laravel
Laravel whereNotBetween Query Example
Fetch Single Row Data from Database in Laravel
Laravel Disable Created_at and Updated_at timestamps
Laravel OneSignal Web Push Notification Example
Laravel AWS S3 File Files/Images Upload to AWS s3 Cloud Bucket
Get Last 3, 6, 12 Months Data in Laravel
Laravel Download File From AWS s3 Bucket
Laravel Override Login Method
Laravel Connect Remote Database using SSH Tunnel
How to fix Error: laravel.log could not be opened?
Categories: Laravel

AuthorAdmin

Greetings, I'm Devendra Dode, a full-stack developer, entrepreneur, and the proud owner of Tutsmake.com. My passion lies in crafting informative tutorials and offering valuable tips to assist fellow developers on their coding journey. Within my content, I cover a spectrum of technologies, including 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. Whether you're starting out or looking for advanced examples, I provide step-by-step guides and practical demonstrations to make your learning experience seamless. Let's explore the diverse realms of coding together.

Leave a Reply

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