Admin dashboard in Laravel | Sign up and Sign in V9

        

Admin dashboard in Laravel | Sign up and Sign in

Step 1: Install Laravel 8

step: Install UI

Note:

composer require laravel/ui
php artisan ui vue --auth

First, install a new Laravel app just running the below command in your terminal.

composer create-project --prefer-dist laravel/laravel laravel_dashboard_version9

Step 2: Update Your Database Credentials

After that update your database credentials in your .env file which is located in your project root.

1. connection databases

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_db
DB_USERNAME=root
DB_PASSWORD=#your database password

2. for send mail when fogot password

MAIL_DRIVER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
MAIL_USERNAME=your email
MAIL_PASSWORD='your password email'
MAIL_ENCRYPTION=tls

Step 3: Make Migration

After adding the migration file now run the migrate command.

php artisan migrate

Step 4: Add in Home Page

Add the below code in your home.blade.php file.

Resources/Views/home.blade.php

@extends('layouts.master')
@section('content')
     <!-- Sidebar chat end-->
     <div class="content-wrapper">
        <!-- Container-fluid starts -->
        <!-- Main content starts -->
        <div class="container-fluid">
           <div class="row">
              <div class="main-header">
                 <h4>Dashboard</h4>
              </div>
           </div>
           <!-- 4-blocks row start -->
           <div class="row dashboard-header">
              <div class="col-lg-3 col-md-6">
                 <div class="card dashboard-product">
                    <span>Products</span>
                    <h2 class="dashboard-total-products">4500</h2>
                    <span class="label label-warning">Sales</span>Arriving Today
                    <div class="side-box">
                       <i class="ti-signal text-warning-color"></i>
                    </div>
                 </div>
              </div>
              <div class="col-lg-3 col-md-6">
                 <div class="card dashboard-product">
                    <span>Products</span>
                    <h2 class="dashboard-total-products">37,500</h2>
                    <span class="label label-primary">Views</span>View Today
                    <div class="side-box ">
                       <i class="ti-gift text-primary-color"></i>
                    </div>
                 </div>
              </div>
              <div class="col-lg-3 col-md-6">
                 <div class="card dashboard-product">
                    <span>Products</span>
                    <h2 class="dashboard-total-products">$<span>30,780</span></h2>
                    <span class="label label-success">Sales</span>Reviews
                    <div class="side-box">
                       <i class="ti-direction-alt text-success-color"></i>
                    </div>
                 </div>
              </div>
              <div class="col-lg-3 col-md-6">
                 <div class="card dashboard-product">
                    <span>Products</span>
                    <h2 class="dashboard-total-products">$<span>30,780</span></h2>
                    <span class="label label-danger">Sales</span>Reviews
                    <div class="side-box">
                       <i class="ti-rocket text-danger-color"></i>
                    </div>
                 </div>
              </div>
           </div>
           <!-- 4-blocks row end -->

           <!-- 1-3-block row start -->
           <div class="row">
              <div class="col-lg-4">
                 <div class="card">
                    <div class="user-block-2">
                       <img class="img-fluid" src="assets/images/widget/user-1.png" alt="user-header">
                       <h5>Soeng Souy</h5>
                       <h6>Web Developer</h6>
                    </div>
                    <div class="card-block">
                       <div class="user-block-2-activities">
                          <div class="user-block-2-active">
                             <i class="icofont icofont-clock-time"></i> Recent Activities
                             <label class="label label-primary">480</label>
                          </div>
                       </div>
                       <div class="user-block-2-activities">
                          <div class="user-block-2-active">
                             <i class="icofont icofont-users"></i> Current Employees
                             <label class="label label-primary">390</label>
                          </div>
                       </div>

                       <div class="user-block-2-activities">
                          <div class="user-block-2-active">
                             <i class="icofont icofont-ui-user"></i> Following
                             <label class="label label-primary">485</label>
                          </div>

                       </div>
                       <div class="user-block-2-activities">
                          <div class="user-block-2-active">
                             <i class="icofont icofont-picture"></i> Pictures
                             <label class="label label-primary">506</label>
                          </div>
                       </div>
                       <div class="text-center">
                          <button type="button" class="btn btn-warning waves-effect waves-light text-uppercase m-r-30">
                                   Follows
                               </button>
                          <button type="button" class="btn btn-primary waves-effect waves-light text-uppercase">
                                   Message
                               </button>
                       </div>
                    </div>
                 </div>
              </div>
              <div class="col-lg-8">
                 <div class="card">
                    <div class="card-header">
                       <h5 class="card-header-text">Bar chart</h5>
                    </div>
                    <div class="card-block">
                       <div id="barchart" style="min-width: 250px; height: 330px; margin: 0 auto"></div>
                    </div>
                 </div>
              </div>
              <div class="col-xl-4 col-lg-12 grid-item">
                 <div class="card">
                    <div class="card-block horizontal-card-img d-flex">
                       <img class="media-object img-circle" src="assets/images/avatar-3.png" alt="Generic placeholder image">
                       <div class="d-inlineblock  p-l-20">
                         <h6>Soeng Souy</h6>
                         <a href="#">soengsouy@admin.com</a>
                      </div>
                       <h6 class="txt-warning rotate-txt">Designer</h6>
                    </div>
                 </div>
              </div>
              <div class="col-xl-4 col-lg-12 grid-item">
                 <div class="card">
                    <div class="card-block horizontal-card-img d-flex">
                       <img class="media-object img-circle" src="assets/images/lockscreen.png" alt="Generic placeholder image">
                       <div class="d-inlineblock  p-l-20">
                         <h6>Soeng Souy</h6>
                         <a href="#">soengsouy@admin.com</a>
                      </div>
                       <h6 class="txt-danger rotate-txt">Developer</h6>
                    </div>
                 </div>
              </div>
           </div>
           <!-- 1-3-block row end -->

           <!-- 2-1 block start -->
           <div class="row">
              <div class="col-xl-8 col-lg-12">
                 <div class="card">
                    <div class="card-block">
                       <div class="table-responsive">
                          <table class="table m-b-0 photo-table">
                             <thead>
                                <tr class="text-uppercase">
                                   <th>Photo</th>
                                   <th>Project</th>
                                   <th>Completed</th>
                                   <th>Status</th>
                                   <th>Date</th>
                                </tr>
                             </thead>
                             <tbody>
                                <tr>
                                   <th>
                                      <img class="img-fluid img-circle" src="assets/images/avatar-2.png" alt="User">
                                   </th>
                                   <td>Appestia Project
                                      <p><i class="icofont icofont-clock-time"></i>Created 14.9.2016</p>
                                   </td>
                                   <td>
                                      <span class="pie" style="display: none;">226,134</span><svg class="peity" height="30" width="30"><path d="M 15.000000000000002 0 A 15 15 0 1 1 4.209902994920235 25.41987555688496 L 15 15" fill="#2196F3"></path><path d="M 4.209902994920235 25.41987555688496 A 15 15 0 0 1 14.999999999999996 0 L 15 15" fill="#ccc"></path></svg>
                                   </td>
                                   <td>50%</td>
                                   <td>October 21, 2015</td>
                                </tr>
                                <tr>
                                   <th>
                                      <img class="img-fluid img-circle" src="assets/images/avatar-4.png" alt="User">
                                   </th>
                                   <td>Contract with belife Company
                                      <p><i class="icofont icofont-clock-time"></i>Created 20.10.2016</p>
                                   </td>
                                   <td>
                                      <span class="pie" style="display: none;">0.52/1.561</span><svg class="peity" height="30" width="30"><path d="M 15.000000000000002 0 A 15 15 0 0 1 28.00043211809656 22.482564048691025 L 15 15" fill="#2196F3"></path><path d="M 28.00043211809656 22.482564048691025 A 15 15 0 1 1 14.999999999999996 0 L 15 15" fill="#ccc"></path></svg>
                                   </td>
                                   <td>70%</td>
                                   <td>November 21, 2015</td>
                                </tr>
                                <tr>
                                   <th>
                                      <img class="img-fluid img-circle" src="assets/images/avatar-1.png" alt="User">
                                   </th>
                                   <td>Web Consultancy project
                                      <p><i class="icofont icofont-clock-time"></i>Created 20.10.2016</p>
                                   </td>
                                   <td>
                                      <span class="pie" style="display: none;">1,4</span><svg class="peity" height="30" width="30"><path d="M 15.000000000000002 0 A 15 15 0 0 1 29.265847744427305 10.36474508437579 L 15 15" fill="#2196F3"></path><path d="M 29.265847744427305 10.36474508437579 A 15 15 0 1 1 14.999999999999996 0 L 15 15" fill="#ccc"></path></svg>
                                   </td>
                                   <td>40%</td>
                                   <td>September 21, 2015</td>
                                </tr>
                                <tr>
                                   <th>
                                      <img class="img-fluid img-circle" src="assets/images/avatar-3.png" alt="User">
                                   </th>
                                   <td>Contract with belife Company
                                      <p><i class="icofont icofont-clock-time"></i>Created 20.10.2016</p>
                                   </td>
                                   <td>
                                      <span class="pie" style="display: none;">0.52/1.561</span><svg class="peity" height="30" width="30"><path d="M 15.000000000000002 0 A 15 15 0 0 1 28.00043211809656 22.482564048691025 L 15 15" fill="#2196F3"></path><path d="M 28.00043211809656 22.482564048691025 A 15 15 0 1 1 14.999999999999996 0 L 15 15" fill="#ccc"></path></svg>
                                   </td>
                                   <td>70%</td>
                                   <td>November 21, 2015</td>
                                </tr>
                                <tr>
                                   <th>
                                      <img class="img-fluid img-circle" src="assets/images/avatar-1.png" alt="User">
                                   </th>
                                   <td>Contract with belife Company
                                      <p><i class="icofont icofont-clock-time"></i>Created 20.10.2016</p>
                                   </td>
                                   <td>
                                      <span class="pie" style="display: none;">0.52/1.561</span><svg class="peity" height="30" width="30"><path d="M 15.000000000000002 0 A 15 15 0 0 1 28.00043211809656 22.482564048691025 L 15 15" fill="#2196F3"></path><path d="M 28.00043211809656 22.482564048691025 A 15 15 0 1 1 14.999999999999996 0 L 15 15" fill="#ccc"></path></svg>
                                   </td>
                                   <td>70%</td>
                                   <td>November 21, 2015</td>
                                </tr>
                                <tr>
                                   <th>
                                      <img class="img-fluid img-circle" src="assets/images/avatar-2.png" alt="User">
                                   </th>
                                   <td>Contract with belife Company
                                      <p><i class="icofont icofont-clock-time"></i>Created 20.10.2016</p>
                                   </td>
                                   <td>
                                      <span class="pie" style="display: none;">0.52/1.561</span><svg class="peity" height="30" width="30"><path d="M 15.000000000000002 0 A 15 15 0 0 1 28.00043211809656 22.482564048691025 L 15 15" fill="#2196F3"></path><path d="M 28.00043211809656 22.482564048691025 A 15 15 0 1 1 14.999999999999996 0 L 15 15" fill="#ccc"></path></svg>
                                   </td>
                                   <td>70%</td>
                                   <td>November 21, 2015</td>
                                </tr>

                             </tbody>
                          </table>
                       </div>
                    </div>
                 </div>
              </div>
              <div class="col-xl-4 col-lg-12">
                 <div class="card">
                    <div class="card-header">
                       <h5 class="card-header-text">Bar chart</h5>
                    </div>
                    <div class="card-block">
                       <div id="piechart" style="min-width: 250px; height: 460px; margin: 0 auto"></div>
                    </div>
                 </div>
              </div>
           </div>
           <!-- 2-1 block end -->
        </div>
        <!-- Main content ends -->
     </div>
@endsection

Step 5: Add Button in Register Page

Add the below code in your register.blade.php file.

Resources/Views/passwords/Auth/register.blade.php

@extends('layouts.app')
@section('content')
	<section class="login common-img-bg">
		<!-- Container-fluid starts -->
		<div class="container-fluid">
			<div class="row">
                <div class="col-sm-12">
                    <div class="login-card card-block bg-white">
                        <form method="POST" action="{{ route('register') }}" class="md-float-material">
                            @csrf
                            <div class="text-center">
                                <img src="assets/images/logo-black.png" alt="logo">
                            </div>
                            <h3 class="text-center txt-primary">Create an account </h3>
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="md-input-wrapper">
                                        <input id="name" type="text" class="md-form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" autocomplete="name" autofocus  placeholder="Username">
                                        @error('name')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                        <label>Full Name</label>
                                    </div>
                                </div>
                            </div>
                            <div class="md-input-wrapper">
                                <input id="email" type="email" class="md-form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" autocomplete="email" placeholder="Enter email">
                                @error('email')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                                <label>Email Address</label>
                            </div>
                            <div class="md-input-wrapper">
                                <input id="password" type="password" class="md-form-control @error('password') is-invalid @enderror" name="password" autocomplete="new-password" placeholder="Enter password">
                                @error('password')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                @enderror
                                <label>Password</label>
                            </div>
                            <div class="md-input-wrapper">
                                <input type="password" class="md-form-control" name="password_confirmation">
                                <label>Confirm Password</label>
                            </div>

                            <div class="rkmd-checkbox checkbox-rotate checkbox-ripple b-none m-b-20">
                                <label class="input-checkbox checkbox-primary">
                                    <input type="checkbox" id="checkbox">
                                    <span class="checkbox"></span>
                                </label>
                                <div class="captions">Remember Me</div>
                            </div>
                            <div class="col-xs-10 offset-xs-1">
                                <button type="submit" class="btn btn-primary btn-md btn-block waves-effect waves-light m-b-20">Sign up
                                </button>
                            </div>
                            <div class="row">
                                <div class="col-xs-12 text-center">
                                    <span class="text-muted">Already have an account?</span>
                                    <a href="{{ route('login') }}" class="f-w-600 p-l-5"> Sign In Here</a>

                                </div>
                            </div>
                        </form>
                        <!-- end of form -->
                    </div>
                    <!-- end of login-card -->
                </div>
                <!-- end of col-sm-12 -->
            </div>
            <!-- end of row-->
        </div>
        <!-- end of container-fluid -->
	</section>
    @endsection

Step 6: Add Routes

In this step we create routes for Facebook login, add two routes in your web.php file.

app/routes/web.php

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\PhotosController;
use App\Http\Controllers\Auth\LoginController;
use App\Http\Controllers\Auth\RegisterController;
use App\Http\Controllers\formController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('auth.login');
});

Auth::routes();

Route::get('/home', [App\Http\Controllers\HomeController::class, 'index'])->name('home');

// -----------------------------login-----------------------------------------
Route::get('/login', [App\Http\Controllers\Auth\LoginController::class, 'login'])->name('login');
Route::post('/login', [App\Http\Controllers\Auth\LoginController::class, 'authenticate']);
Route::get('/logout', [App\Http\Controllers\Auth\LoginController::class, 'logout'])->name('logout');

// ------------------------------register---------------------------------------
Route::get('/register', [App\Http\Controllers\Auth\RegisterController::class, 'register'])->name('register');
Route::post('/register', [App\Http\Controllers\Auth\RegisterController::class, 'storeUser'])->name('register');

// -----------------------------forget password ------------------------------
Route::get('forget-password', 'App\Http\Controllers\Auth\ForgotPasswordController@getEmail')->name('forget-password');
Route::post('forget-password', 'App\Http\Controllers\Auth\ForgotPasswordController@postEmail')->name('forget-password');

Route::get('reset-password/{token}', 'App\Http\Controllers\Auth\ResetPasswordController@getPassword');
Route::post('reset-password', 'App\Http\Controllers\Auth\ResetPasswordController@updatePassword');

// ------------------------------register---------------------------------------
Route::get('/register', [App\Http\Controllers\Auth\RegisterController::class, 'register'])->name('register');
Route::post('/register', [App\Http\Controllers\Auth\RegisterController::class, 'storeUser'])->name('register');

// -----------------------------form-----------------------------------------
Route::get('form/new', [App\Http\Controllers\formController::class, 'index'])->name('form/new');

Step 7: Create LoginController

php artisan make:controller LoginController

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use App\Providers\RouteServiceProvider;
use Illuminate\Foundation\Auth\AuthenticatesUsers;
use Illuminate\Http\Request;
use Auth;


class LoginController extends Controller
{
    /*
    |--------------------------------------------------------------------------
    | Login Controller
    |--------------------------------------------------------------------------
    |
    | This controller handles authenticating users for the application and
    | redirecting them to your home screen. The controller uses a trait
    | to conveniently provide its functionality to your applications.
    |
    */

    use AuthenticatesUsers;

    /**
     * Where to redirect users after login.
     *
     * @var string
     */
    protected $redirectTo = RouteServiceProvider::HOME;

    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('guest')->except('logout');
    }

    public function login()
    {

    return view('auth.login');
    }

    public function authenticate(Request $request)
    {
        $request->validate([
            'email' => 'required|string|email',
            'password' => 'required|string',
        ]);

        $credentials = $request->only('email', 'password');

        if (Auth::attempt($credentials)) {
            return redirect()->intended('home');
        }

        return redirect('login')->with('error', 'Oppose! You have entered invalid credentials');
    }

    public function logout()
    {
        Auth::logout();
        return redirect('login');
    }
}

Step 8: Add Button in Login Page

Add the below code in your login.blade.php file.

Resources/Views/passwords/Auth/login.blade.php

@extends('layouts.app')
@section('content')
    <section class="login p-fixed d-flex text-center bg-primary common-img-bg">
        <!-- Container-fluid starts -->
        <div class="container-fluid">
            <div class="row">

                <div class="col-sm-12">
                    <div class="login-card card-block">
                        <form method="POST" action="{{ route('login') }}" class="md-float-material">
                            @csrf
                            <div class="text-center">
                                <img src="{{URL::to('assets/images/logo-black.png')}}" alt="logo">
                            </div>
                            <h3 class="text-center txt-primary">
                                Sign In to your account
                            </h3>
                            @if(session()->has('error'))
                                <div class="text-danger text-center">
                                    {{ session()->get('error') }}
                                </div>
                            @endif
            
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="md-input-wrapper">
                                        <input id="email" type="email" class="md-form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" autocomplete="email" autofocus placeholder="Enter email">
                                        @error('email')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                        <label>Email</label>
                                    </div>
                                </div>
                                <div class="col-md-12">
                                    <div class="md-input-wrapper">
                                        <input id="password" type="password" class="md-form-control @error('password') is-invalid @enderror" name="password" autocomplete="current-password" placeholder="Enter password">
                                        @error('password')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                        <label>Password</label>
                                    </div>
                                </div>
                                <div class="col-sm-6 col-xs-12">
                                <div class="rkmd-checkbox checkbox-rotate checkbox-ripple m-b-25">
                                    <label class="input-checkbox checkbox-primary">
                                        <input type="checkbox" id="checkbox">
                                        <span class="checkbox"></span>
                                    </label>
                                    <div class="captions">Remember Me</div>

                                </div>
                                    </div>
                                <div class="col-sm-6 col-xs-12 forgot-phone text-right">
                                    <a href="{{ route('forget-password') }}" class="text-right f-w-600"> Forget Password?</a>
                                    </div>
                            </div>
                            <div class="row">
                                <div class="col-xs-10 offset-xs-1">
                                    <button type="submit" class="btn btn-primary btn-md btn-block waves-effect text-center m-b-20">LOGIN</button>
                                </div>
                            </div>
                            <!-- <div class="card-footer"> -->
                            <div class="col-sm-12 col-xs-12 text-center">
                                <span class="text-muted">Don't have an account?</span>
                                <a href="{{route('register')}}" class="f-w-600 p-l-5">Sign up Now</a>
                            </div>

                            <!-- </div> -->
                        </form>
                        <!-- end of form -->
                    </div>
                    <!-- end of login-card -->
                </div>
                <!-- end of col-sm-12 -->
            </div>
            <!-- end of row -->
        </div>
        <!-- end of container-fluid -->
    </section>
@endsection

Step 9: Run Development Server

After successfully update all run the development server just adding the below command in the terminal.

php artisan serve

After this go to the browser and check using the login page.

http://localhost/laravel_dashboard_version9/public/