Make A Ip Checker Tool In Laravel With Api - FreeCodeBlog

Last updated: Dec 01, 2021

IP checker in laravel! Want to make an IP checker online tool in laravel? Yes! Okay It's too simple to make an IP checker in laravel. Want to make an IP address checker online tool that visitor can check their IP address from laravel website? Yes. Don't worry you can easily make IP address checker online tool so that visitor can check IP from online. Actually sometimes visitors may want to check their IP address online at your Laravel website so today I will create an IP checker tool using Laravel with API. Visitors do not need to enter any data to check their IP address on your Laravel website.

 

Make A Ip Checker Tool In Laravel With Api
Make A Ip Checker Tool In Laravel With Api

 

Hello friends, I will use laravel ui vue version to make an IP checker tool in laravel with API. You can use bootstrap or react version of laravel ui to make IP checker online tool for your laravel project. Laravel ui vue version not installed yet? First you need to install laravel ui vue version to make a IP checker online tool. Don't know how to install laravel ui in laravel? No! Okay then you should need to read install laravel ui package in any kind of laravel version tutorial.

 

IP address is a unique string of characters (103.118.77.45) that identifies each computer using the Internet Protocol to communicate over a network. Don't know about IP address? No! Okay want to know more about IP address? Yes. Okay I already make a IP address checker tool so that visitor can check their IP address. I also explain about IP address their so you should read IP address checker online tool tutorial before continue this tutorial.

 

Creating an IP checker tool is very easy. Especially in laravel. Listen friends, Just you need to return request IP from API route so that the IP address checker page will create without page refreshing. You can use it with any font-end language like vue js, react js, bootstrap, tailwind css. Can't make IP checker tool in laravel with API yourself? Okay don't worry, I am here to help you to make IP checker in laravel.

 

use Illuminate\Http\Request;
$request->ip();

 

I hope you know basic usage of laravel model, view, controller. Now you need to create 2 controller for this IP checker laravel project. I will use API so I will create an API and web controller. Controller creating is too simple. Just you need to run make controller command to create API and web controller. Let's create web and API controller now.

 

/*
| Api Controller
*/
php artisan make:controller Api\IpCheckerController
/*
| Web Controller
*/
php artisan make:controller IpCheckerController

 

IP checker controller created? Yes. Okay next you need to define IP checker controller in API & web route to make IP checker online tool. I hope you know how to define created controller in routes. Don't forget to use controller in route according to your laravel version.

 

/*
| Web Route
*/
use App\Http\Controllers\IpCheckerController;
Route::get('/ip-checker', [IpCheckerController::class, 'ip_checker'])->name("ip.checker");
/*
| API Route
*/
use App\Http\Controllers\Api\IpCheckerController;
Route::get('/ip-checker', [IpCheckerController::class, 'ip_checker']);

 

Now you can define ip_checker method in IP checker API & web controller. Controller method usage is same for all available laravel version. So you can use it for your laravel version using same process.

 

/*
| Web Controller Method
*/
public function ip_checker()
{
 return view('ip_checker');
}
/*
| Api Controller Method
*/
public function ip_checker(Request $request)
{
return $request->ip();
}

 

Now create a "ip_checker.blade.php” file into views folder and paste below code into this file. Remember that I already told you that I will use vue file to make IP checker in laravel. So in blade file I will use vue component.

 

@extends('layouts.app')
@section('content')
<ip-checker></ip-checker> 
@endsection

 

Now go to resources js components folder and create “IpChecker.vue” file so that you can use it into blade file. Next open app.js file from js folder and add below line. Actually you need to define ip checker vue component globally in app js file.

 

Vue.component('ip-checker', require('./components/IpChecker.vue').default);

 

Now it's time to use IP checker in vue file. Want to use it with tailwind css or bootstrap? Yes! Okay open “IpChecker.vue” file and paste IP checker code. In vue file I will tailwind css.

 

<template>
  <input type="text" class="border-gray-300 mt-1 mb-3 w-full focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 rounded-md shadow-sm" v-model="text" readonly>
</template>

<script>
    export default {
        data() {
            return {
              text: '',
            }
        },
        mounted() {
            this.ipChecker();
        },
        methods: {
        ipChecker() {
         axios.get("/api/ip-checker")
               .then(response => {
                this.text = response.data;
                })
                .catch(e => {
                    console.log(e);
                });
                },
        },
    }
</script>

 

Finally copy below line and paste it web browser to see your IP address. locally you can see “127.0.0.1” this IP address but you will see real IP address after uploaded this project on live server.

 

http://127.0.0.1:8000/ip-checker

 

Okay so this is for today. See you again next tutorials. Thanks

Post Tags
Post Writer
masum7323
Masum Biswas (@masum7323)

My name is Masum Biswas. I'm a full stack developer. I live in Bangladesh and I love to write tutorials and tools that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, MySQL, VueJS, Tailwind CSS and Bootstrap from the early stage.

Follow Me On
Related Posts
Install Laravel Jetstream User Authentication First Party Package

You can easily install laravel jetstream user authentication on laravel 8 for a single page application. Laravel jetstream provides the implementat... Read More

Deploy Laravel Via Ftp On Shared Hosting Cpanel

Deploy laravel via ftp on cpanel! Want to deploy laravel on shared hosting cpanel via ftp? Yes. But why? Because I can't access cpanel public_HTML... Read More

How To Configure Laravel Project For Production

Want to deploy laravel project on live server, shared hosting, vps server, production? Wait a minute, have you configured the Laravel project for p... Read More

Change Laravel Mysql Database Connection On Shared Hosting Cpanel

Want to change local to cpanel MySQL database connection in laravel on cpanel? Yes. Well, You need to change laravel MySQL database connection on s... Read More

Laravel Mail Configuration On Shared Hosting Cpanel

Want to configuration laravel mail on cpanel shared hosting? Actually after successfully deploy laravel project on shared hosting cpanel you need t... Read More