Admin dashboard in Laravel | Sign up and Sign in V12
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_version12Step 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 password2. for send mail when fogot passwordMAIL_DRIVER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
MAIL_USERNAME=your email
MAIL_PASSWORD='your password email'
MAIL_ENCRYPTION=tls
MAIL_DRIVER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
MAIL_USERNAME=your email
MAIL_PASSWORD='your password email'
MAIL_ENCRYPTION=tlsStep 3: Make Migration
After adding the migration file now run the migrate command.
php artisan migrateStep 4: Add in Home Page
Add the below code in your home.blade.php file.
Resources/Views/home.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<meta name="description" content=""/>
<meta name="author" content=""/>
<title>soengsouy.com</title>
<!-- loader-->
<link href="assets/css/pace.min.css" rel="stylesheet"/>
<script src="assets/js/pace.min.js"></script>
<!--favicon-->
<link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
<!-- Vector CSS -->
<link href="assets/plugins/vectormap/jquery-jvectormap-2.0.2.css" rel="stylesheet"/>
<!-- simplebar CSS-->
<link href="assets/plugins/simplebar/css/simplebar.css" rel="stylesheet"/>
<!-- Bootstrap core CSS-->
<link href="assets/css/bootstrap.min.css" rel="stylesheet"/>
<!-- animate CSS-->
<link href="assets/css/animate.css" rel="stylesheet" type="text/css"/>
<!-- Icons CSS-->
<link href="assets/css/icons.css" rel="stylesheet" type="text/css"/>
<!-- Sidebar CSS-->
<link href="assets/css/sidebar-menu.css" rel="stylesheet"/>
<!-- Custom Style-->
<link href="assets/css/app-style.css" rel="stylesheet"/>
</head>
<body class="bg-theme bg-theme1">
<!-- Start wrapper-->
<div id="wrapper">
<!--Start sidebar-wrapper-->
<div id="sidebar-wrapper" data-simplebar="" data-simplebar-auto-hide="true">
<div class="brand-logo">
<a href="index.html">
<img src="assets/images/user.jpg" class="logo-icon" alt="logo icon">
<h5 class="logo-text">SOENG SOUY</h5>
</a>
</div>
<ul class="sidebar-menu do-nicescrol">
<li class="sidebar-header">MAIN NAVIGATION</li>
<li>
<a href="index.html">
<i class="zmdi zmdi-view-dashboard"></i> <span>Dashboard</span>
</a>
</li>
<li>
<a href="icons.html">
<i class="zmdi zmdi-invert-colors"></i> <span>UI Icons</span>
</a>
</li>
<li>
<a href="forms.html">
<i class="zmdi zmdi-format-list-bulleted"></i> <span>Forms</span>
</a>
</li>
<li>
<a href="tables.html">
<i class="zmdi zmdi-grid"></i> <span>Tables</span>
</a>
</li>
<li>
<a href="calendar.html">
<i class="zmdi zmdi-calendar-check"></i> <span>Calendar</span>
<small class="badge float-right badge-light">New</small>
</a>
</li>
<li>
<a href="profile.html">
<i class="zmdi zmdi-face"></i> <span>Profile</span>
</a>
</li>
<li>
<a href="{{ route('logout') }}">
<i class="zmdi zmdi-lock"></i> <span>Login</span>
</a>
</li>
<li>
<a href="register.html" target="_blank">
<i class="zmdi zmdi-account-circle"></i> <span>Registration</span>
</a>
</li>
<li class="sidebar-header">LABELS</li>
<li><a href="javaScript:void();"><i class="zmdi zmdi-coffee text-danger"></i> <span>Important</span></a></li>
<li><a href="javaScript:void();"><i class="zmdi zmdi-chart-donut text-success"></i> <span>Warning</span></a></li>
<li><a href="javaScript:void();"><i class="zmdi zmdi-share text-info"></i> <span>Information</span></a></li>
</ul>
</div>
<!--End sidebar-wrapper-->
<!--Start topbar header-->
<header class="topbar-nav">
<nav class="navbar navbar-expand fixed-top">
<ul class="navbar-nav mr-auto align-items-center">
<li class="nav-item">
<a class="nav-link toggle-menu" href="javascript:void();">
<i class="icon-menu menu-icon"></i>
</a>
</li>
<li class="nav-item">
<form class="search-bar">
<input type="text" class="form-control" placeholder="Enter keywords">
<a href="javascript:void();"><i class="icon-magnifier"></i></a>
</form>
</li>
</ul>
<ul class="navbar-nav align-items-center right-nav-link">
<li class="nav-item dropdown-lg">
<a class="nav-link dropdown-toggle dropdown-toggle-nocaret waves-effect" data-toggle="dropdown" href="javascript:void();">
<i class="fa fa-envelope-open-o"></i></a>
</li>
<li class="nav-item dropdown-lg">
<a class="nav-link dropdown-toggle dropdown-toggle-nocaret waves-effect" data-toggle="dropdown" href="javascript:void();">
<i class="fa fa-bell-o"></i></a>
</li>
<li class="nav-item language">
<a class="nav-link dropdown-toggle dropdown-toggle-nocaret waves-effect" data-toggle="dropdown" href="javascript:void();"><i class="fa fa-flag"></i></a>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-item"> <i class="flag-icon flag-icon-gb mr-2"></i> English</li>
<li class="dropdown-item"> <i class="flag-icon flag-icon-fr mr-2"></i> French</li>
<li class="dropdown-item"> <i class="flag-icon flag-icon-cn mr-2"></i> Chinese</li>
<li class="dropdown-item"> <i class="flag-icon flag-icon-de mr-2"></i> German</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle dropdown-toggle-nocaret" data-toggle="dropdown" href="#">
<span class="user-profile"><img src="assets/images/user.jpg" class="img-circle" alt="user avatar"></span>
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-item user-details">
<a href="javaScript:void();">
<div class="media">
<div class="avatar"> <img src="assets/images/user.jpg" class="logo-icon" alt="logo icon"></div>
<div class="media-body">
<h6 class="mt-2 user-title">Soeng Souy</h6>
<p class="user-subtitle">soengsouy@gmail.com</p>
</div>
</div>
</a>
</li>
<li class="dropdown-divider"></li>
<li class="dropdown-item"><i class="icon-envelope mr-2"></i> Inbox</li>
<li class="dropdown-divider"></li>
<li class="dropdown-item"><i class="icon-wallet mr-2"></i> Account</li>
<li class="dropdown-divider"></li>
<li class="dropdown-item"><i class="icon-settings mr-2"></i> Setting</li>
<li class="dropdown-divider"></li>
<li class="dropdown-item"><a href="{{ route('logout') }}"><i class="icon-power mr-2"></i> Logout</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<!--End topbar header-->
<div class="clearfix"></div>
<div class="content-wrapper">
<div class="container-fluid">
<!--Start Dashboard Content-->
<div class="card mt-3">
<div class="card-content">
<div class="row row-group m-0">
<div class="col-12 col-lg-6 col-xl-3 border-light">
<div class="card-body">
<h5 class="text-white mb-0">9526 <span class="float-right"><i class="fa fa-shopping-cart"></i></span></h5>
<div class="progress my-3" style="height:3px;">
<div class="progress-bar" style="width:55%"></div>
</div>
<p class="mb-0 text-white small-font">Total Orders <span class="float-right">+4.2% <i class="zmdi zmdi-long-arrow-up"></i></span></p>
</div>
</div>
<div class="col-12 col-lg-6 col-xl-3 border-light">
<div class="card-body">
<h5 class="text-white mb-0">8323 <span class="float-right"><i class="fa fa-usd"></i></span></h5>
<div class="progress my-3" style="height:3px;">
<div class="progress-bar" style="width:55%"></div>
</div>
<p class="mb-0 text-white small-font">Total Revenue <span class="float-right">+1.2% <i class="zmdi zmdi-long-arrow-up"></i></span></p>
</div>
</div>
<div class="col-12 col-lg-6 col-xl-3 border-light">
<div class="card-body">
<h5 class="text-white mb-0">6200 <span class="float-right"><i class="fa fa-eye"></i></span></h5>
<div class="progress my-3" style="height:3px;">
<div class="progress-bar" style="width:55%"></div>
</div>
<p class="mb-0 text-white small-font">Visitors <span class="float-right">+5.2% <i class="zmdi zmdi-long-arrow-up"></i></span></p>
</div>
</div>
<div class="col-12 col-lg-6 col-xl-3 border-light">
<div class="card-body">
<h5 class="text-white mb-0">5630 <span class="float-right"><i class="fa fa-envira"></i></span></h5>
<div class="progress my-3" style="height:3px;">
<div class="progress-bar" style="width:55%"></div>
</div>
<p class="mb-0 text-white small-font">Messages <span class="float-right">+2.2% <i class="zmdi zmdi-long-arrow-up"></i></span></p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-lg-8 col-xl-8">
<div class="card">
<div class="card-header">Site Traffic
<div class="card-action">
<div class="dropdown">
<a href="javascript:void();" class="dropdown-toggle dropdown-toggle-nocaret" data-toggle="dropdown">
<i class="icon-options"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="javascript:void();">Action</a>
<a class="dropdown-item" href="javascript:void();">Another action</a>
<a class="dropdown-item" href="javascript:void();">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void();">Separated link</a>
</div>
</div>
</div>
</div>
<div class="card-body">
<ul class="list-inline">
<li class="list-inline-item"><i class="fa fa-circle mr-2 text-white"></i>New Visitor</li>
<li class="list-inline-item"><i class="fa fa-circle mr-2 text-light"></i>Old Visitor</li>
</ul>
<div class="chart-container-1">
<canvas id="chart1"></canvas>
</div>
</div>
<div class="row m-0 row-group text-center border-top border-light-3">
<div class="col-12 col-lg-4">
<div class="p-3">
<h5 class="mb-0">45.87M</h5>
<small class="mb-0">Overall Visitor <span> <i class="fa fa-arrow-up"></i> 2.43%</span></small>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="p-3">
<h5 class="mb-0">15:48</h5>
<small class="mb-0">Visitor Duration <span> <i class="fa fa-arrow-up"></i> 12.65%</span></small>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="p-3">
<h5 class="mb-0">245.65</h5>
<small class="mb-0">Pages/Visit <span> <i class="fa fa-arrow-up"></i> 5.62%</span></small>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4 col-xl-4">
<div class="card">
<div class="card-header">Weekly sales
<div class="card-action">
<div class="dropdown">
<a href="javascript:void();" class="dropdown-toggle dropdown-toggle-nocaret" data-toggle="dropdown">
<i class="icon-options"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="javascript:void();">Action</a>
<a class="dropdown-item" href="javascript:void();">Another action</a>
<a class="dropdown-item" href="javascript:void();">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void();">Separated link</a>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="chart-container-2">
<canvas id="chart2"></canvas>
</div>
</div>
<div class="table-responsive">
<table class="table align-items-center">
<tbody>
<tr>
<td><i class="fa fa-circle text-white mr-2"></i> Direct</td>
<td>$5856</td>
<td>+55%</td>
</tr>
<tr>
<td><i class="fa fa-circle text-light-1 mr-2"></i>Affiliate</td>
<td>$2602</td>
<td>+25%</td>
</tr>
<tr>
<td><i class="fa fa-circle text-light-2 mr-2"></i>E-mail</td>
<td>$1802</td>
<td>+15%</td>
</tr>
<tr>
<td><i class="fa fa-circle text-light-3 mr-2"></i>Other</td>
<td>$1105</td>
<td>+5%</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div><!--End Row-->
<div class="row">
<div class="col-12 col-lg-12">
<div class="card">
<div class="card-header">Recent Order Tables
<div class="card-action">
<div class="dropdown">
<a href="javascript:void();" class="dropdown-toggle dropdown-toggle-nocaret" data-toggle="dropdown">
<i class="icon-options"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="javascript:void();">Action</a>
<a class="dropdown-item" href="javascript:void();">Another action</a>
<a class="dropdown-item" href="javascript:void();">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void();">Separated link</a>
</div>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table align-items-center table-flush table-borderless">
<thead>
<tr>
<th>Product</th>
<th>Photo</th>
<th>Product ID</th>
<th>Amount</th>
<th>Date</th>
<th>Shipping</th>
</tr>
</thead>
<tbody><tr>
<td>Iphone 5</td>
<td><img src="https://via.placeholder.com/110x110" class="product-img" alt="product img"></td>
<td>#9405822</td>
<td>$ 1250.00</td>
<td>03 Aug 2017</td>
<td><div class="progress shadow" style="height: 3px;">
<div class="progress-bar" role="progressbar" style="width: 90%"></div>
</div></td>
</tr>
<tr>
<td>Earphone GL</td>
<td><img src="https://via.placeholder.com/110x110" class="product-img" alt="product img"></td>
<td>#9405820</td>
<td>$ 1500.00</td>
<td>03 Aug 2017</td>
<td><div class="progress shadow" style="height: 3px;">
<div class="progress-bar" role="progressbar" style="width: 60%"></div>
</div></td>
</tr>
<tr>
<td>HD Hand Camera</td>
<td><img src="https://via.placeholder.com/110x110" class="product-img" alt="product img"></td>
<td>#9405830</td>
<td>$ 1400.00</td>
<td>03 Aug 2017</td>
<td><div class="progress shadow" style="height: 3px;">
<div class="progress-bar" role="progressbar" style="width: 70%"></div>
</div></td>
</tr>
<tr>
<td>Clasic Shoes</td>
<td><img src="https://via.placeholder.com/110x110" class="product-img" alt="product img"></td>
<td>#9405825</td>
<td>$ 1200.00</td>
<td>03 Aug 2017</td>
<td><div class="progress shadow" style="height: 3px;">
<div class="progress-bar" role="progressbar" style="width: 100%"></div>
</div></td>
</tr>
<tr>
<td>Hand Watch</td>
<td><img src="https://via.placeholder.com/110x110" class="product-img" alt="product img"></td>
<td>#9405840</td>
<td>$ 1800.00</td>
<td>03 Aug 2017</td>
<td><div class="progress shadow" style="height: 3px;">
<div class="progress-bar" role="progressbar" style="width: 40%"></div>
</div></td>
</tr>
<tr>
<td>Clasic Shoes</td>
<td><img src="https://via.placeholder.com/110x110" class="product-img" alt="product img"></td>
<td>#9405825</td>
<td>$ 1200.00</td>
<td>03 Aug 2017</td>
<td><div class="progress shadow" style="height: 3px;">
<div class="progress-bar" role="progressbar" style="width: 100%"></div>
</div></td>
</tr>
</tbody></table>
</div>
</div>
</div>
</div><!--End Row-->
<!--End Dashboard Content-->
<!--start overlay-->
<div class="overlay toggle-menu"></div>
<!--end overlay-->
</div>
<!-- End container-fluid-->
</div><!--End content-wrapper-->
<!--Start Back To Top Button-->
<a href="javaScript:void();" class="back-to-top"><i class="fa fa-angle-double-up"></i> </a>
<!--End Back To Top Button-->
<!--Start footer-->
<footer class="footer">
<div class="container">
<div class="text-center">
Copyright © 2018 Dashtreme Admin
</div>
</div>
</footer>
<!--End footer-->
<!--start color switcher-->
<div class="right-sidebar">
<div class="switcher-icon">
<i class="zmdi zmdi-settings zmdi-hc-spin"></i>
</div>
<div class="right-sidebar-content">
<p class="mb-0">Gaussion Texture</p>
<hr>
<ul class="switcher">
<li id="theme1"></li>
<li id="theme2"></li>
<li id="theme3"></li>
<li id="theme4"></li>
<li id="theme5"></li>
<li id="theme6"></li>
</ul>
<p class="mb-0">Gradient Background</p>
<hr>
<ul class="switcher">
<li id="theme7"></li>
<li id="theme8"></li>
<li id="theme9"></li>
<li id="theme10"></li>
<li id="theme11"></li>
<li id="theme12"></li>
<li id="theme13"></li>
<li id="theme14"></li>
<li id="theme15"></li>
</ul>
</div>
</div>
<!--end color switcher-->
</div><!--End wrapper-->
<!-- Bootstrap core JavaScript-->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<!-- simplebar js -->
<script src="assets/plugins/simplebar/js/simplebar.js"></script>
<!-- sidebar-menu js -->
<script src="assets/js/sidebar-menu.js"></script>
<!-- loader scripts -->
<script src="assets/js/jquery.loading-indicator.js"></script>
<!-- Custom scripts -->
<script src="assets/js/app-script.js"></script>
<!-- Chart js -->
<script src="assets/plugins/Chart.js/Chart.min.js"></script>
<!-- Index js -->
<script src="assets/js/index.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<meta name="description" content=""/>
<meta name="author" content=""/>
<title>soengsouy.com</title>
<!-- loader-->
<link href="assets/css/pace.min.css" rel="stylesheet"/>
<script src="assets/js/pace.min.js"></script>
<!--favicon-->
<link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
<!-- Vector CSS -->
<link href="assets/plugins/vectormap/jquery-jvectormap-2.0.2.css" rel="stylesheet"/>
<!-- simplebar CSS-->
<link href="assets/plugins/simplebar/css/simplebar.css" rel="stylesheet"/>
<!-- Bootstrap core CSS-->
<link href="assets/css/bootstrap.min.css" rel="stylesheet"/>
<!-- animate CSS-->
<link href="assets/css/animate.css" rel="stylesheet" type="text/css"/>
<!-- Icons CSS-->
<link href="assets/css/icons.css" rel="stylesheet" type="text/css"/>
<!-- Sidebar CSS-->
<link href="assets/css/sidebar-menu.css" rel="stylesheet"/>
<!-- Custom Style-->
<link href="assets/css/app-style.css" rel="stylesheet"/>
</head>
<body class="bg-theme bg-theme1">
<!-- Start wrapper-->
<div id="wrapper">
<!--Start sidebar-wrapper-->
<div id="sidebar-wrapper" data-simplebar="" data-simplebar-auto-hide="true">
<div class="brand-logo">
<a href="index.html">
<img src="assets/images/user.jpg" class="logo-icon" alt="logo icon">
<h5 class="logo-text">SOENG SOUY</h5>
</a>
</div>
<ul class="sidebar-menu do-nicescrol">
<li class="sidebar-header">MAIN NAVIGATION</li>
<li>
<a href="index.html">
<i class="zmdi zmdi-view-dashboard"></i> <span>Dashboard</span>
</a>
</li>
<li>
<a href="icons.html">
<i class="zmdi zmdi-invert-colors"></i> <span>UI Icons</span>
</a>
</li>
<li>
<a href="forms.html">
<i class="zmdi zmdi-format-list-bulleted"></i> <span>Forms</span>
</a>
</li>
<li>
<a href="tables.html">
<i class="zmdi zmdi-grid"></i> <span>Tables</span>
</a>
</li>
<li>
<a href="calendar.html">
<i class="zmdi zmdi-calendar-check"></i> <span>Calendar</span>
<small class="badge float-right badge-light">New</small>
</a>
</li>
<li>
<a href="profile.html">
<i class="zmdi zmdi-face"></i> <span>Profile</span>
</a>
</li>
<li>
<a href="{{ route('logout') }}">
<i class="zmdi zmdi-lock"></i> <span>Login</span>
</a>
</li>
<li>
<a href="register.html" target="_blank">
<i class="zmdi zmdi-account-circle"></i> <span>Registration</span>
</a>
</li>
<li class="sidebar-header">LABELS</li>
<li><a href="javaScript:void();"><i class="zmdi zmdi-coffee text-danger"></i> <span>Important</span></a></li>
<li><a href="javaScript:void();"><i class="zmdi zmdi-chart-donut text-success"></i> <span>Warning</span></a></li>
<li><a href="javaScript:void();"><i class="zmdi zmdi-share text-info"></i> <span>Information</span></a></li>
</ul>
</div>
<!--End sidebar-wrapper-->
<!--Start topbar header-->
<header class="topbar-nav">
<nav class="navbar navbar-expand fixed-top">
<ul class="navbar-nav mr-auto align-items-center">
<li class="nav-item">
<a class="nav-link toggle-menu" href="javascript:void();">
<i class="icon-menu menu-icon"></i>
</a>
</li>
<li class="nav-item">
<form class="search-bar">
<input type="text" class="form-control" placeholder="Enter keywords">
<a href="javascript:void();"><i class="icon-magnifier"></i></a>
</form>
</li>
</ul>
<ul class="navbar-nav align-items-center right-nav-link">
<li class="nav-item dropdown-lg">
<a class="nav-link dropdown-toggle dropdown-toggle-nocaret waves-effect" data-toggle="dropdown" href="javascript:void();">
<i class="fa fa-envelope-open-o"></i></a>
</li>
<li class="nav-item dropdown-lg">
<a class="nav-link dropdown-toggle dropdown-toggle-nocaret waves-effect" data-toggle="dropdown" href="javascript:void();">
<i class="fa fa-bell-o"></i></a>
</li>
<li class="nav-item language">
<a class="nav-link dropdown-toggle dropdown-toggle-nocaret waves-effect" data-toggle="dropdown" href="javascript:void();"><i class="fa fa-flag"></i></a>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-item"> <i class="flag-icon flag-icon-gb mr-2"></i> English</li>
<li class="dropdown-item"> <i class="flag-icon flag-icon-fr mr-2"></i> French</li>
<li class="dropdown-item"> <i class="flag-icon flag-icon-cn mr-2"></i> Chinese</li>
<li class="dropdown-item"> <i class="flag-icon flag-icon-de mr-2"></i> German</li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link dropdown-toggle dropdown-toggle-nocaret" data-toggle="dropdown" href="#">
<span class="user-profile"><img src="assets/images/user.jpg" class="img-circle" alt="user avatar"></span>
</a>
<ul class="dropdown-menu dropdown-menu-right">
<li class="dropdown-item user-details">
<a href="javaScript:void();">
<div class="media">
<div class="avatar"> <img src="assets/images/user.jpg" class="logo-icon" alt="logo icon"></div>
<div class="media-body">
<h6 class="mt-2 user-title">Soeng Souy</h6>
<p class="user-subtitle">soengsouy@gmail.com</p>
</div>
</div>
</a>
</li>
<li class="dropdown-divider"></li>
<li class="dropdown-item"><i class="icon-envelope mr-2"></i> Inbox</li>
<li class="dropdown-divider"></li>
<li class="dropdown-item"><i class="icon-wallet mr-2"></i> Account</li>
<li class="dropdown-divider"></li>
<li class="dropdown-item"><i class="icon-settings mr-2"></i> Setting</li>
<li class="dropdown-divider"></li>
<li class="dropdown-item"><a href="{{ route('logout') }}"><i class="icon-power mr-2"></i> Logout</a></li>
</ul>
</li>
</ul>
</nav>
</header>
<!--End topbar header-->
<div class="clearfix"></div>
<div class="content-wrapper">
<div class="container-fluid">
<!--Start Dashboard Content-->
<div class="card mt-3">
<div class="card-content">
<div class="row row-group m-0">
<div class="col-12 col-lg-6 col-xl-3 border-light">
<div class="card-body">
<h5 class="text-white mb-0">9526 <span class="float-right"><i class="fa fa-shopping-cart"></i></span></h5>
<div class="progress my-3" style="height:3px;">
<div class="progress-bar" style="width:55%"></div>
</div>
<p class="mb-0 text-white small-font">Total Orders <span class="float-right">+4.2% <i class="zmdi zmdi-long-arrow-up"></i></span></p>
</div>
</div>
<div class="col-12 col-lg-6 col-xl-3 border-light">
<div class="card-body">
<h5 class="text-white mb-0">8323 <span class="float-right"><i class="fa fa-usd"></i></span></h5>
<div class="progress my-3" style="height:3px;">
<div class="progress-bar" style="width:55%"></div>
</div>
<p class="mb-0 text-white small-font">Total Revenue <span class="float-right">+1.2% <i class="zmdi zmdi-long-arrow-up"></i></span></p>
</div>
</div>
<div class="col-12 col-lg-6 col-xl-3 border-light">
<div class="card-body">
<h5 class="text-white mb-0">6200 <span class="float-right"><i class="fa fa-eye"></i></span></h5>
<div class="progress my-3" style="height:3px;">
<div class="progress-bar" style="width:55%"></div>
</div>
<p class="mb-0 text-white small-font">Visitors <span class="float-right">+5.2% <i class="zmdi zmdi-long-arrow-up"></i></span></p>
</div>
</div>
<div class="col-12 col-lg-6 col-xl-3 border-light">
<div class="card-body">
<h5 class="text-white mb-0">5630 <span class="float-right"><i class="fa fa-envira"></i></span></h5>
<div class="progress my-3" style="height:3px;">
<div class="progress-bar" style="width:55%"></div>
</div>
<p class="mb-0 text-white small-font">Messages <span class="float-right">+2.2% <i class="zmdi zmdi-long-arrow-up"></i></span></p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-lg-8 col-xl-8">
<div class="card">
<div class="card-header">Site Traffic
<div class="card-action">
<div class="dropdown">
<a href="javascript:void();" class="dropdown-toggle dropdown-toggle-nocaret" data-toggle="dropdown">
<i class="icon-options"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="javascript:void();">Action</a>
<a class="dropdown-item" href="javascript:void();">Another action</a>
<a class="dropdown-item" href="javascript:void();">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void();">Separated link</a>
</div>
</div>
</div>
</div>
<div class="card-body">
<ul class="list-inline">
<li class="list-inline-item"><i class="fa fa-circle mr-2 text-white"></i>New Visitor</li>
<li class="list-inline-item"><i class="fa fa-circle mr-2 text-light"></i>Old Visitor</li>
</ul>
<div class="chart-container-1">
<canvas id="chart1"></canvas>
</div>
</div>
<div class="row m-0 row-group text-center border-top border-light-3">
<div class="col-12 col-lg-4">
<div class="p-3">
<h5 class="mb-0">45.87M</h5>
<small class="mb-0">Overall Visitor <span> <i class="fa fa-arrow-up"></i> 2.43%</span></small>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="p-3">
<h5 class="mb-0">15:48</h5>
<small class="mb-0">Visitor Duration <span> <i class="fa fa-arrow-up"></i> 12.65%</span></small>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="p-3">
<h5 class="mb-0">245.65</h5>
<small class="mb-0">Pages/Visit <span> <i class="fa fa-arrow-up"></i> 5.62%</span></small>
</div>
</div>
</div>
</div>
</div>
<div class="col-12 col-lg-4 col-xl-4">
<div class="card">
<div class="card-header">Weekly sales
<div class="card-action">
<div class="dropdown">
<a href="javascript:void();" class="dropdown-toggle dropdown-toggle-nocaret" data-toggle="dropdown">
<i class="icon-options"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="javascript:void();">Action</a>
<a class="dropdown-item" href="javascript:void();">Another action</a>
<a class="dropdown-item" href="javascript:void();">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void();">Separated link</a>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="chart-container-2">
<canvas id="chart2"></canvas>
</div>
</div>
<div class="table-responsive">
<table class="table align-items-center">
<tbody>
<tr>
<td><i class="fa fa-circle text-white mr-2"></i> Direct</td>
<td>$5856</td>
<td>+55%</td>
</tr>
<tr>
<td><i class="fa fa-circle text-light-1 mr-2"></i>Affiliate</td>
<td>$2602</td>
<td>+25%</td>
</tr>
<tr>
<td><i class="fa fa-circle text-light-2 mr-2"></i>E-mail</td>
<td>$1802</td>
<td>+15%</td>
</tr>
<tr>
<td><i class="fa fa-circle text-light-3 mr-2"></i>Other</td>
<td>$1105</td>
<td>+5%</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div><!--End Row-->
<div class="row">
<div class="col-12 col-lg-12">
<div class="card">
<div class="card-header">Recent Order Tables
<div class="card-action">
<div class="dropdown">
<a href="javascript:void();" class="dropdown-toggle dropdown-toggle-nocaret" data-toggle="dropdown">
<i class="icon-options"></i>
</a>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="javascript:void();">Action</a>
<a class="dropdown-item" href="javascript:void();">Another action</a>
<a class="dropdown-item" href="javascript:void();">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="javascript:void();">Separated link</a>
</div>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table align-items-center table-flush table-borderless">
<thead>
<tr>
<th>Product</th>
<th>Photo</th>
<th>Product ID</th>
<th>Amount</th>
<th>Date</th>
<th>Shipping</th>
</tr>
</thead>
<tbody><tr>
<td>Iphone 5</td>
<td><img src="https://via.placeholder.com/110x110" class="product-img" alt="product img"></td>
<td>#9405822</td>
<td>$ 1250.00</td>
<td>03 Aug 2017</td>
<td><div class="progress shadow" style="height: 3px;">
<div class="progress-bar" role="progressbar" style="width: 90%"></div>
</div></td>
</tr>
<tr>
<td>Earphone GL</td>
<td><img src="https://via.placeholder.com/110x110" class="product-img" alt="product img"></td>
<td>#9405820</td>
<td>$ 1500.00</td>
<td>03 Aug 2017</td>
<td><div class="progress shadow" style="height: 3px;">
<div class="progress-bar" role="progressbar" style="width: 60%"></div>
</div></td>
</tr>
<tr>
<td>HD Hand Camera</td>
<td><img src="https://via.placeholder.com/110x110" class="product-img" alt="product img"></td>
<td>#9405830</td>
<td>$ 1400.00</td>
<td>03 Aug 2017</td>
<td><div class="progress shadow" style="height: 3px;">
<div class="progress-bar" role="progressbar" style="width: 70%"></div>
</div></td>
</tr>
<tr>
<td>Clasic Shoes</td>
<td><img src="https://via.placeholder.com/110x110" class="product-img" alt="product img"></td>
<td>#9405825</td>
<td>$ 1200.00</td>
<td>03 Aug 2017</td>
<td><div class="progress shadow" style="height: 3px;">
<div class="progress-bar" role="progressbar" style="width: 100%"></div>
</div></td>
</tr>
<tr>
<td>Hand Watch</td>
<td><img src="https://via.placeholder.com/110x110" class="product-img" alt="product img"></td>
<td>#9405840</td>
<td>$ 1800.00</td>
<td>03 Aug 2017</td>
<td><div class="progress shadow" style="height: 3px;">
<div class="progress-bar" role="progressbar" style="width: 40%"></div>
</div></td>
</tr>
<tr>
<td>Clasic Shoes</td>
<td><img src="https://via.placeholder.com/110x110" class="product-img" alt="product img"></td>
<td>#9405825</td>
<td>$ 1200.00</td>
<td>03 Aug 2017</td>
<td><div class="progress shadow" style="height: 3px;">
<div class="progress-bar" role="progressbar" style="width: 100%"></div>
</div></td>
</tr>
</tbody></table>
</div>
</div>
</div>
</div><!--End Row-->
<!--End Dashboard Content-->
<!--start overlay-->
<div class="overlay toggle-menu"></div>
<!--end overlay-->
</div>
<!-- End container-fluid-->
</div><!--End content-wrapper-->
<!--Start Back To Top Button-->
<a href="javaScript:void();" class="back-to-top"><i class="fa fa-angle-double-up"></i> </a>
<!--End Back To Top Button-->
<!--Start footer-->
<footer class="footer">
<div class="container">
<div class="text-center">
Copyright © 2018 Dashtreme Admin
</div>
</div>
</footer>
<!--End footer-->
<!--start color switcher-->
<div class="right-sidebar">
<div class="switcher-icon">
<i class="zmdi zmdi-settings zmdi-hc-spin"></i>
</div>
<div class="right-sidebar-content">
<p class="mb-0">Gaussion Texture</p>
<hr>
<ul class="switcher">
<li id="theme1"></li>
<li id="theme2"></li>
<li id="theme3"></li>
<li id="theme4"></li>
<li id="theme5"></li>
<li id="theme6"></li>
</ul>
<p class="mb-0">Gradient Background</p>
<hr>
<ul class="switcher">
<li id="theme7"></li>
<li id="theme8"></li>
<li id="theme9"></li>
<li id="theme10"></li>
<li id="theme11"></li>
<li id="theme12"></li>
<li id="theme13"></li>
<li id="theme14"></li>
<li id="theme15"></li>
</ul>
</div>
</div>
<!--end color switcher-->
</div><!--End wrapper-->
<!-- Bootstrap core JavaScript-->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<!-- simplebar js -->
<script src="assets/plugins/simplebar/js/simplebar.js"></script>
<!-- sidebar-menu js -->
<script src="assets/js/sidebar-menu.js"></script>
<!-- loader scripts -->
<script src="assets/js/jquery.loading-indicator.js"></script>
<!-- Custom scripts -->
<script src="assets/js/app-script.js"></script>
<!-- Chart js -->
<script src="assets/plugins/Chart.js/Chart.min.js"></script>
<!-- Index js -->
<script src="assets/js/index.js"></script>
</body>
</html>Step 5: Add Button in Register Page
Add the below code in your register.blade.php file.
Resources/Views/passwords/Auth/register.blade.php
Add the below code in your register.blade.php file.
Resources/Views/passwords/Auth/register.blade.php
{{--
@extends('layouts.app')
@section('content')
@endsection --}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<meta name="description" content=""/>
<meta name="author" content=""/>
<title>soengsouy.com</title>
<!-- loader-->
<link href="assets/css/pace.min.css" rel="stylesheet"/>
<script src="assets/js/pace.min.js"></script>
<!--favicon-->
<link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
<!-- Bootstrap core CSS-->
<link href="assets/css/bootstrap.min.css" rel="stylesheet"/>
<!-- animate CSS-->
<link href="assets/css/animate.css" rel="stylesheet" type="text/css"/>
<!-- Icons CSS-->
<link href="assets/css/icons.css" rel="stylesheet" type="text/css"/>
<!-- Custom Style-->
<link href="assets/css/app-style.css" rel="stylesheet"/>
</head>
<body class="bg-theme bg-theme1">
<!-- start loader -->
<div id="pageloader-overlay" class="visible incoming"><div class="loader-wrapper-outer"><div class="loader-wrapper-inner" ><div class="loader"></div></div></div></div>
<!-- end loader -->
<!-- Start wrapper-->
<div id="wrapper">
<div class="card card-authentication1 mx-auto my-4">
<div class="card-body">
<div class="card-content p-2">
<div class="text-center">
<img src="assets/images/logo-icon.png" alt="logo icon">
</div>
<div class="card-title text-uppercase text-center py-3">Sign Up</div>
<form method="POST" action="{{ route('register') }}" class="md-float-material">
@csrf
<div class="form-group">
<label for="exampleInputName" class="sr-only">Name</label>
<div class="position-relative has-icon-right">
<input type="text" id="exampleInputName" class="form-control input-shadow @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" placeholder="Enter Your Name">
<div class="form-control-position">
<i class="icon-user"></i>
</div>
@error('name')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group">
<label for="exampleInputEmailId" class="sr-only">Email</label>
<div class="position-relative has-icon-right">
<input type="text" id="exampleInputEmailId" class="form-control input-shadow @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" placeholder="Enter Your Email">
<div class="form-control-position">
<i class="icon-envelope-open"></i>
</div>
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group">
<label for="exampleInputPassword" class="sr-only">Password</label>
<div class="position-relative has-icon-right">
<input type="password" id="exampleInputPassword" class="form-control input-shadow @error('password') is-invalid @enderror" name="password" placeholder="Choose Password">
<div class="form-control-position">
<i class="icon-lock"></i>
</div>
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group">
<label for="exampleInputPassword" class="sr-only">Confirm Password</label>
<div class="position-relative has-icon-right">
<input type="password" id="exampleInputPassword" class="form-control input-shadow" name="password_confirmation" placeholder="Choose Confirm Password">
<div class="form-control-position">
<i class="icon-lock"></i>
</div>
</div>
</div>
<div class="form-group">
<div class="icheck-material-white">
<input type="checkbox" id="user-checkbox" checked="" />
<label for="user-checkbox">I Agree With Terms & Conditions</label>
</div>
</div>
<button type="submit" class="btn btn-light btn-block waves-effect waves-light">Sign Up</button>
<div class="text-center mt-3">Sign Up With</div>
<div class="form-row mt-4">
<div class="form-group mb-0 col-6">
<button type="button" class="btn btn-light btn-block"><i class="fa fa-facebook-square"></i> Facebook</button>
</div>
<div class="form-group mb-0 col-6 text-right">
<button type="button" class="btn btn-light btn-block"><i class="fa fa-twitter-square"></i> Twitter</button>
</div>
</div>
</form>
</div>
</div>
<div class="card-footer text-center py-3">
<p class="text-warning mb-0">Already have an account? <a href="{{ route('login') }}"> Sign In here</a></p>
</div>
</div>
<!--Start Back To Top Button-->
<a href="javaScript:void();" class="back-to-top"><i class="fa fa-angle-double-up"></i> </a>
<!--End Back To Top Button-->
<!--start color switcher-->
<div class="right-sidebar">
<div class="switcher-icon">
<i class="zmdi zmdi-settings zmdi-hc-spin"></i>
</div>
<div class="right-sidebar-content">
<p class="mb-0">Gaussion Texture</p>
<hr>
<ul class="switcher">
<li id="theme1"></li>
<li id="theme2"></li>
<li id="theme3"></li>
<li id="theme4"></li>
<li id="theme5"></li>
<li id="theme6"></li>
</ul>
<p class="mb-0">Gradient Background</p>
<hr>
<ul class="switcher">
<li id="theme7"></li>
<li id="theme8"></li>
<li id="theme9"></li>
<li id="theme10"></li>
<li id="theme11"></li>
<li id="theme12"></li>
<li id="theme13"></li>
<li id="theme14"></li>
<li id="theme15"></li>
</ul>
</div>
</div>
<!--end color switcher-->
</div><!--wrapper-->
<!-- Bootstrap core JavaScript-->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<!-- sidebar-menu js -->
<script src="assets/js/sidebar-menu.js"></script>
<!-- Custom scripts -->
<script src="assets/js/app-script.js"></script>
</body>
</html>
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
Add the below code in your login.blade.php file.
Resources/Views/passwords/Auth/login.blade.php
{{-- @extends('layouts.app')
@section('content')
@endsection --}}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<meta name="description" content=""/>
<meta name="author" content=""/>
<title>soengsouy.com</title>
<!-- loader-->
<link href="assets/css/pace.min.css" rel="stylesheet"/>
<script src="assets/js/pace.min.js"></script>
<!--favicon-->
<link rel="icon" href="assets/images/favicon.ico" type="image/x-icon">
<!-- Bootstrap core CSS-->
<link href="assets/css/bootstrap.min.css" rel="stylesheet"/>
<!-- animate CSS-->
<link href="assets/css/animate.css" rel="stylesheet" type="text/css"/>
<!-- Icons CSS-->
<link href="assets/css/icons.css" rel="stylesheet" type="text/css"/>
<!-- Custom Style-->
<link href="assets/css/app-style.css" rel="stylesheet"/>
</head>
<body class="bg-theme bg-theme1">
<!-- start loader -->
<div id="pageloader-overlay" class="visible incoming"><div class="loader-wrapper-outer"><div class="loader-wrapper-inner" ><div class="loader"></div></div></div></div>
<!-- end loader -->
<!-- Start wrapper-->
<div id="wrapper">
<div class="loader-wrapper"><div class="lds-ring"><div></div><div></div><div></div><div></div></div></div>
<div class="card card-authentication1 mx-auto my-5">
<div class="card-body">
<div class="card-content p-2">
<div class="text-center">
<img src="assets/images/logo-icon.png" alt="logo icon">
</div>
<div class="card-title text-uppercase text-center py-3">Sign In</div>
@if(session()->has('error'))
<div class="text-danger text-center">
{{ session()->get('error') }}
</div>
@endif
<br>
<form method="POST" action="{{ route('login') }}" class="md-float-material">
@csrf
<div class="form-group">
<label for="exampleInputUsername" class="sr-only">Email</label>
<div class="position-relative has-icon-right">
<input type="email" id="exampleInputUsername" class="form-control input-shadow @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" placeholder="Enter email">
<div class="form-control-position">
<i class="icon-user"></i>
</div>
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-group">
<label for="exampleInputPassword" class="sr-only">Password</label>
<div class="position-relative has-icon-right">
<input type="password" id="exampleInputPassword" class="form-control input-shadow @error('password') is-invalid @enderror" name="password" placeholder="Enter Password">
<div class="form-control-position">
<i class="icon-lock"></i>
</div>
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="form-row">
<div class="form-group col-6">
<div class="icheck-material-white">
<input type="checkbox" id="user-checkbox" checked="" />
<label for="user-checkbox">Remember me</label>
</div>
</div>
<div class="form-group col-6 text-right">
<a href="{{ route('forget-password') }}">Reset Password</a>
</div>
</div>
<button type="submit" class="btn btn-light btn-block">Sign In</button>
<div class="text-center mt-3">Sign In With</div>
<div class="form-row mt-4">
<div class="form-group mb-0 col-6">
<button type="button" class="btn btn-light btn-block"><i class="fa fa-facebook-square"></i> Facebook</button>
</div>
<div class="form-group mb-0 col-6 text-right">
<button type="button" class="btn btn-light btn-block"><i class="fa fa-twitter-square"></i> Twitter</button>
</div>
</div>
</form>
</div>
</div>
<div class="card-footer text-center py-3">
<p class="text-warning mb-0">Do not have an account? <a href="{{route('register')}}"> Sign Up here</a></p>
</div>
</div>
<!--Start Back To Top Button-->
<a href="javaScript:void();" class="back-to-top"><i class="fa fa-angle-double-up"></i> </a>
<!--End Back To Top Button-->
<!--start color switcher-->
<div class="right-sidebar">
<div class="switcher-icon">
<i class="zmdi zmdi-settings zmdi-hc-spin"></i>
</div>
<div class="right-sidebar-content">
<p class="mb-0">Gaussion Texture</p>
<hr>
<ul class="switcher">
<li id="theme1"></li>
<li id="theme2"></li>
<li id="theme3"></li>
<li id="theme4"></li>
<li id="theme5"></li>
<li id="theme6"></li>
</ul>
<p class="mb-0">Gradient Background</p>
<hr>
<ul class="switcher">
<li id="theme7"></li>
<li id="theme8"></li>
<li id="theme9"></li>
<li id="theme10"></li>
<li id="theme11"></li>
<li id="theme12"></li>
<li id="theme13"></li>
<li id="theme14"></li>
<li id="theme15"></li>
</ul>
</div>
</div>
<!--end color switcher-->
</div><!--wrapper-->
<!-- Bootstrap core JavaScript-->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<!-- sidebar-menu js -->
<script src="assets/js/sidebar-menu.js"></script>
<!-- Custom scripts -->
<script src="assets/js/app-script.js"></script>
</body>
</html>
Step 9: Run Development Server
After successfully update all run the development server just adding the below command in the terminal.
php artisan serveAfter this go to the browser and check using the login page.
http://localhost/laravel_dashboard_version12/public/
0 Comments
CAN FEEDBACK
Emoji