Laravel 8

Laravel 7 Custom Login Form with Ajax

By admin

Posted on December 18, 2020

12 min read

2,438

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

composer create-project --prefer-dist laravel/laravel:^7.0 skcompany

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.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=skcompany
DB_USERNAME=root
DB_PASSWORD=

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.

php artisan migrate

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

php artisan tinker

1	php artisan tinker

write this code

User::create(['name' => 'john', 'email' => 'john@gmail.com', 'password' => Bcrypt('123456')])

1	User::create(['name' => 'john', 'email' => 'john@gmail.com', 'password' => Bcrypt('123456')])

this will create a user for you with a hashed password. now the data is added in the database.

After that select the resources folder inside the resources folder have folder name which is views
inside the views folder create a new file login.blade.php. paste the code the inside the login.blade.php page.

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

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>

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>

<tr>

@csrf

<tr>

<strong>Login</strong>

</div>

</td>

</tr>

<tr>

</div>

</tr>

<tr>

<td width="118" align="left" valign="middle" class="style1">Username</td>

</td>

</tr>

<tr>

<td width="118" align="left" valign="middle" class="style1">Password</td>

</td>

</tr>

<tr>

</td>

</tr>

</form>

</table>

</td>

</tr>

</table>

</div>

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

php artisan make:controller UserController

1	php artisan make:controller UserController

paste the code inside controller

<?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');
    }

}

<?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

<h1>  {{ auth()->user()->name }}<h1>
<p><a href="{{ route('user.logout') }}">Logout</a></p>

1 2	<h1> {{ auth()->user()->name }}<h1> <p><a href="{{ route('user.logout') }}">Logout</a></p>

Now you can set the Routes

Routes

<h1>welcome<h1>
<h1>  {{ auth()->user()->name }}<h1>
<p><a href="{{ route('user.logout') }}">Logout</a></p>

<h1>welcome<h1>

<p><a href="{{ route('user.logout') }}">Logout</a></p>

now you can run the project type the command

php artisan serve

1	php artisan serve

I have attached the video tutorial below it will help you to do this step by step.

CoffeeShop Inventory Management System using Laravel 8

Ecommerce Project Asp.net mvc Step by Step

Ecommerce Project Creation using Asp.net mvc with Souce Code

Records Navigation with image using Java and Mysql

Restaurant Shop Inventory Management System using Laravel 8

CoffeeShop Inventory Management System using Laravel 8

Leave a Reply Cancel reply

Check Also

Ecommerce Project Asp.net mvc Step by Step

Search

Recent Posts