This tutorial will teach you how to make a Login form with Ajax using Laravel 7.we will do step by step along with screen shot images.
First Step
Create Project – Open the command prompt and run this command
|
1 |
composer create-project --prefer-dist laravel/laravel:^7.0 skcompany |
i have gave the project name skcompany. you can use name of the project name
Second Step
After created the project open on vs code editor. after that go to mysql database create a new database name skcompany. after database has been created back to our vs code editor open the .env file and change database name as skcompany.
|
1 2 3 4 5 6 |
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=skcompany DB_USERNAME=root DB_PASSWORD= |
after done the stuff. we have to do the table migration part.
|
1 |
php artisan migrate |
after that by the default laravel created the table users in the mysql database.
After we have to insert some data into the users table in the database. so open the Terminal
and make a new user from tinker and test using it and run the command
|
1 |
php artisan tinker |
write this code
|
1 |
User::create(['name' => 'john', 'email' => 'john@gmail.com', 'password' => Bcrypt('123456')]) |
inside the views folder create a new file login.blade.php. paste the code the inside the login.blade.php page.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 |
<html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <style type="text/css"> body,td,th{ color: #000000; } body{ background-color: #F0F0F0; } .style1 { font-family: arial, helvetica, sans-serif; font-size: 14px; padding: 12px; line-height: 25px; border-radius: 4px; text-decoration: none; } .style2 { font-family: arial, helvetica, sans-serif; font-size: 17px; padding: 12px; line-height: 25px; border-radius: 4px; text-decoration: none; } </style> </head> <body> <div class="container"> <table width="100%" height="100%" border="0" cellspacing="0" align="center"> <tr> <td align="center" valign="middle"> <table class="table-bordered" width="350" border="0" cellpadding="3" cellspacing="3" bgcolor="#FFFFFF"> <form name="frm_login" id="frm_login"> @csrf <tr> <td height="25" colspan="2" align="left" valign="middle" bgcolor="#FF9900" class="style2"> <div align="center"> <strong>Login</strong> </div> </td> </tr> <tr> <div id="err" style="color: red"> </div> </tr> <tr> <td width="118" align="left" valign="middle" class="style1">Username</td> <td width="118" align="left" valign="middle" class="style1"> <input type="text" class="form-control" size="10px" id="username" placeholder="Username" name="username"> </td> </tr> <tr> <td width="118" align="left" valign="middle" class="style1">Password</td> <td width="118" align="left" valign="middle" class="style1"> <input type="password" class="form-control" size="10px" id="password" placeholder="password" name="password"> </td> </tr> <tr> <td colspan="2" align="right" valign="middle" class="style1"> <button type="button" class="btn btn-primary" onclick="login()">Sign In</button> </td> </tr> </form> </table> </td> </tr> </table> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script> <script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <script> function login() { if($('#username').val() == "") { $('#username').parent('td').addClass('has-error'); return false; } else if($('#password').val() == "") { $('#password').parent('td').addClass('has-error'); return false; } else if($('#utype').val() == "") { $('#utype').parent('td').addClass('has-error'); return false; } var data = $("#frm_login").serialize(); $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); $.ajax({ type : 'POST', url: '{{route('login.check')}}', data : data, success : function(response) { console.log(response); if(response == 1) { window.location.replace('{{route('test.index')}}'); } else if(response == 3) { $("#err").hide().html("Username or Password Incorrect. Please Check").fadeIn('slow'); } } }); } </script> </body> </html> |
After complete the view part let is moving to Controlller part.
Create the Controller
|
1 |
php artisan make:controller UserController |
paste the code inside controller
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; class UserController extends Controller { public function index() { return view('login'); } public function check(Request $request) { $user = $request->username; $pass = $request->password; if (auth()->attempt(array('name' => $user, 'password' => $pass))) { return response()->json([ [1] ]); } else { return response()->json([ [3] ]); } } public function logout(Request $request) { Auth::logout(); $request->session()->flush(); return redirect()->route('user.login'); } } |
After that create another view page
Create the another page select the view folder create index.blade.php and paste the below code
|
1 2 |
<h1> {{ auth()->user()->name }}<h1> <p><a href="{{ route('user.logout') }}">Logout</a></p> |
Now you can set the Routes
Routes
|
1 2 3 |
<h1>welcome<h1> <h1> {{ auth()->user()->name }}<h1> <p><a href="{{ route('user.logout') }}">Logout</a></p> |
now you can run the project type the command
|
1 |
php artisan serve |
I have attached the video tutorial below it will help you to do this step by step.
