Laravel 7 Custom Login Form with Validation

This tutorial will teach you how to make a Login form with validation 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 absschool

i have gave the project name absschool .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 absschool. after database has been created back to our vs code editor open the .env file and change database name as absschool

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

after done the stuff. we have to do the table migration part.

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

write this code

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">
    <link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.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">
              
                  
                          <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">
                                @if(session()->has('error'))
                                <div class="alert alert-danger">{{ session('error') }}</div>
                                @endif
                            </div>

                        </tr>
                        <form  action="{{ route('login.check') }}" method="POST">
                    @csrf

                        <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="submit" class="btn btn-primary" >Sign In</button>
                            </td>
                        </tr>
                    </form>
                </table>

            </td>
        </tr>
    </table>
</div>
</body>
</html>

After complete the view part let is moving to Controlller part.

Create the Controller

php artisan make:controller UserController

paste the code in side 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 view('index');
        } 
        else
         {  
             session()->flash('error', 'Invalid Credentials'); 
             return redirect()->route('student.login');
         }  
    }


    public function logout(Request $request) 
    {
        Auth::logout();
        $request->session()->flush();
        return redirect()->route('student.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>

Now you can set the Routes

Routes

Route::get('/','UserController@index');

Route::post('/ login', 'UserController@check')->name('login.check');

Route::post('/login', 'UserController@logout')->name('user.logout');

Route::get('/login', 'UserController@index')->name('student.login');

now you can run the project type the command