Dashboard admin page Laravel HTM CSS JS
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 dashboard_version7Step 2: Update Your Database Credentials
After that update your database credentials in your .env file which is located in your project root.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_db
DB_USERNAME=root
DB_PASSWORD=#your database passwordStep 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
@extends('layouts.master')
@section('menu')
{{-- @include('sidebar.dashboard') --}}
<!-- Pre-loader end -->
<div id="pcoded" class="pcoded">
<div class="pcoded-overlay-box"></div>
<div class="pcoded-container navbar-wrapper">
<nav class="navbar header-navbar pcoded-header">
<div class="navbar-wrapper">
<div class="navbar-logo">
<a class="mobile-menu" id="mobile-collapse" href="#!">
<i class="ti-menu"></i>
</a>
<a class="mobile-search morphsearch-search" href="#">
<i class="ti-search"></i>
</a>
<a href="index.html">
<img class="img-fluid" src="assets/images/logo.png" alt="Theme-Logo" />
</a>
<a class="mobile-options">
<i class="ti-more"></i>
</a>
</div>
<div class="navbar-container container-fluid">
<ul class="nav-left">
<li>
<div class="sidebar_toggle"><a href="javascript:void(0)"><i class="ti-menu"></i></a></div>
</li>
<li>
<a href="#!" onclick="javascript:toggleFullScreen()">
<i class="ti-fullscreen"></i>
</a>
</li>
</ul>
<ul class="nav-right">
<li class="header-notification">
<a href="#!">
<i class="ti-bell"></i>
<span class="badge bg-c-pink"></span>
</a>
<ul class="show-notification">
<li>
<h6>Notifications</h6>
<label class="label label-danger">New</label>
</li>
<li>
<div class="media">
<img class="d-flex align-self-center img-radius" src="assets/images/avatar-4.jpg" alt="Generic placeholder image">
<div class="media-body">
<h5 class="notification-user">Soeng Souy</h5>
<p class="notification-msg">Lorem ipsum dolor sit amet, consectetuer elit.</p>
<span class="notification-time">30 minutes ago</span>
</div>
</div>
</li>
<li>
<div class="media">
<img class="d-flex align-self-center img-radius" src="assets/images/avatar-3.jpg" alt="Generic placeholder image">
<div class="media-body">
<h5 class="notification-user">Joseph William</h5>
<p class="notification-msg">Lorem ipsum dolor sit amet, consectetuer elit.</p>
<span class="notification-time">30 minutes ago</span>
</div>
</div>
</li>
<li>
<div class="media">
<img class="d-flex align-self-center img-radius" src="assets/images/avatar-4.jpg" alt="Generic placeholder image">
<div class="media-body">
<h5 class="notification-user">Sara Soudein</h5>
<p class="notification-msg">Lorem ipsum dolor sit amet, consectetuer elit.</p>
<span class="notification-time">30 minutes ago</span>
</div>
</div>
</li>
</ul>
</li>
<li class="user-profile header-notification">
<a href="#!">
<img src="assets/images/avatar-4.jpg" class="img-radius" alt="User-Profile-Image">
<span>Soeng Souy</span>
<i class="ti-angle-down"></i>
</a>
<ul class="show-notification profile-notification">
<li>
<a href="#!">
<i class="ti-settings"></i> Settings
</a>
</li>
<li>
<a href="#">
<i class="ti-user"></i> Profile
</a>
</li>
<li>
<a href="#">
<i class="ti-email"></i> My Messages
</a>
</li>
<li>
<a href="#">
<i class="ti-lock"></i> Lock Screen
</a>
</li>
<li>
<a href="{{ route('logout') }}">
<i class="ti-layout-sidebar-left"></i> Logout
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="pcoded-main-container">
<div class="pcoded-wrapper">
<nav class="pcoded-navbar">
<div class="sidebar_toggle"><a href="#"><i class="icon-close icons"></i></a></div>
<div class="pcoded-inner-navbar main-menu">
<div class="">
<div class="main-menu-header">
<img class="img-40 img-radius" src="assets/images/avatar-4.jpg" alt="User-Profile-Image">
<div class="user-details">
<span>Soeng Souy</span>
<span id="more-details">Web Designer<i class="ti-angle-down"></i></span>
</div>
</div>
<div class="main-menu-content">
<ul>
<li class="more-details">
<a href="#"><i class="ti-user"></i>View Profile</a>
<a href="#!"><i class="ti-settings"></i>Settings</a>
<a href="auth-normal-sign-in.html"><i class="ti-layout-sidebar-left"></i>Logout</a>
</li>
</ul>
</div>
</div>
<div class="pcoded-search">
<span class="searchbar-toggle"> </span>
<div class="pcoded-search-box ">
<input type="text" placeholder="Search">
<span class="search-icon"><i class="ti-search" aria-hidden="true"></i></span>
</div>
</div>
<div class="pcoded-navigatio-lavel" data-i18n="nav.category.navigation">Layout</div>
<ul class="pcoded-item pcoded-left-item">
<li class="active">
<a href="index.html">
<span class="pcoded-micon"><i class="ti-home"></i><b>D</b></span>
<span class="pcoded-mtext" data-i18n="nav.dash.main">Dashboard</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="pcoded-hasmenu">
<a href="javascript:void(0)">
<span class="pcoded-micon"><i class="ti-layout-grid2-alt"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.main">Components</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class=" ">
<a href="accordion.html">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.alert">Accordion</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="breadcrumb.html">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.breadcrumbs">Breadcrumbs</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="button.html">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.alert">Button</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="tabs.html">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.breadcrumbs">Tabs</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="color.html">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.alert">Color</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="label-badge.html">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.breadcrumbs">Label Badge</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="tooltip.html">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.alert">Tooltip</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="typography.html">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.breadcrumbs">Typography</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="notification.html">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.alert">Notification</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="icon-themify.html">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.breadcrumbs">Icon</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
</ul>
<div class="pcoded-navigatio-lavel" data-i18n="nav.category.forms">Forms & Tables</div>
<ul class="pcoded-item pcoded-left-item">
<li>
<a href="form-elements-component.html">
<span class="pcoded-micon"><i class="ti-layers"></i><b>FC</b></span>
<span class="pcoded-mtext" data-i18n="nav.form-components.main">Form Components</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li>
<a href="bs-basic-table.html">
<span class="pcoded-micon"><i class="ti-layers"></i><b>FC</b></span>
<span class="pcoded-mtext" data-i18n="nav.form-components.main">Basic Table</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
<div class="pcoded-navigatio-lavel" data-i18n="nav.category.forms">Chart & Maps</div>
<ul class="pcoded-item pcoded-left-item">
<li>
<a href="chart.html">
<span class="pcoded-micon"><i class="ti-layers"></i><b>FC</b></span>
<span class="pcoded-mtext" data-i18n="nav.form-components.main">Chart</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li>
<a href="map-google.html">
<span class="pcoded-micon"><i class="ti-layers"></i><b>FC</b></span>
<span class="pcoded-mtext" data-i18n="nav.form-components.main">Maps</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="pcoded-hasmenu">
<a href="javascript:void(0)">
<span class="pcoded-micon"><i class="ti-layout-grid2-alt"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.main">Pages</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class=" ">
<a href="auth-normal-sign-in.html">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.alert">Login</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="auth-sign-up.html">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.breadcrumbs">Register</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="sample-page.html">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.breadcrumbs">Sample Page</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
</ul>
<div class="pcoded-navigatio-lavel" data-i18n="nav.category.other">Other</div>
<ul class="pcoded-item pcoded-left-item">
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)">
<span class="pcoded-micon"><i class="ti-direction-alt"></i><b>M</b></span>
<span class="pcoded-mtext" data-i18n="nav.menu-levels.main">Menu Levels</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="javascript:void(0)">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.menu-levels.menu-level-21">Menu Level 2.1</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)">
<span class="pcoded-micon"><i class="ti-direction-alt"></i></span>
<span class="pcoded-mtext" data-i18n="nav.menu-levels.menu-level-22.main">Menu Level 2.2</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="javascript:void(0)">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.menu-levels.menu-level-22.menu-level-31">Menu Level 3.1</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="">
<a href="javascript:void(0)">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.menu-levels.menu-level-23">Menu Level 2.3</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="pcoded-content">
<div class="pcoded-inner-content">
<div class="main-body">
<div class="page-wrapper">
<div class="page-body">
<div class="row">
<!-- card1 start -->
<div class="col-md-6 col-xl-3">
<div class="card widget-card-1">
<div class="card-block-small">
<i class="icofont icofont-pie-chart bg-c-blue card1-icon"></i>
<span class="text-c-blue f-w-600">Use space</span>
<h4>49/50GB</h4>
<div>
<span class="f-left m-t-10 text-muted">
<i class="text-c-blue f-16 icofont icofont-warning m-r-10"></i>Get more space
</span>
</div>
</div>
</div>
</div>
<!-- card1 end -->
<!-- card1 start -->
<div class="col-md-6 col-xl-3">
<div class="card widget-card-1">
<div class="card-block-small">
<i class="icofont icofont-ui-home bg-c-pink card1-icon"></i>
<span class="text-c-pink f-w-600">Revenue</span>
<h4>$23,589</h4>
<div>
<span class="f-left m-t-10 text-muted">
<i class="text-c-pink f-16 icofont icofont-calendar m-r-10"></i>Last 24 hours
</span>
</div>
</div>
</div>
</div>
<!-- card1 end -->
<!-- card1 start -->
<div class="col-md-6 col-xl-3">
<div class="card widget-card-1">
<div class="card-block-small">
<i class="icofont icofont-warning-alt bg-c-green card1-icon"></i>
<span class="text-c-green f-w-600">Fixed issue</span>
<h4>45</h4>
<div>
<span class="f-left m-t-10 text-muted">
<i class="text-c-green f-16 icofont icofont-tag m-r-10"></i>Tracked via microsoft
</span>
</div>
</div>
</div>
</div>
<!-- card1 end -->
<!-- card1 start -->
<div class="col-md-6 col-xl-3">
<div class="card widget-card-1">
<div class="card-block-small">
<i class="icofont icofont-social-twitter bg-c-yellow card1-icon"></i>
<span class="text-c-yellow f-w-600">Followers</span>
<h4>+562</h4>
<div>
<span class="f-left m-t-10 text-muted">
<i class="text-c-yellow f-16 icofont icofont-refresh m-r-10"></i>Just update
</span>
</div>
</div>
</div>
</div>
<!-- card1 end -->
<!-- Statestics Start -->
<div class="col-md-12 col-xl-8">
<div class="card">
<div class="card-header">
<h5>Statestics</h5>
<div class="card-header-left ">
</div>
<div class="card-header-right">
<ul class="list-unstyled card-option">
<li><i class="icofont icofont-simple-left "></i></li>
<li><i class="icofont icofont-maximize full-card"></i></li>
<li><i class="icofont icofont-minus minimize-card"></i></li>
<li><i class="icofont icofont-refresh reload-card"></i></li>
<li><i class="icofont icofont-error close-card"></i></li>
</ul>
</div>
</div>
<div class="card-block">
<div id="statestics-chart" style="height:517px;"></div>
</div>
</div>
</div>
<div class="col-md-12 col-xl-4">
<div class="card fb-card">
<div class="card-header">
<i class="icofont icofont-social-facebook"></i>
<div class="d-inline-block">
<h5>facebook</h5>
<span>blog page timeline</span>
</div>
</div>
<div class="card-block text-center">
<div class="row">
<div class="col-6 b-r-default">
<h2>23</h2>
<p class="text-muted">Active</p>
</div>
<div class="col-6">
<h2>23</h2>
<p class="text-muted">Comment</p>
</div>
</div>
</div>
</div>
<div class="card dribble-card">
<div class="card-header">
<i class="icofont icofont-social-dribbble"></i>
<div class="d-inline-block">
<h5>dribble</h5>
<span>Product page analysis</span>
</div>
</div>
<div class="card-block text-center">
<div class="row">
<div class="col-6 b-r-default">
<h2>23</h2>
<p class="text-muted">Live</p>
</div>
<div class="col-6">
<h2>23</h2>
<p class="text-muted">Message</p>
</div>
</div>
</div>
</div>
<div class="card twitter-card">
<div class="card-header">
<i class="icofont icofont-social-twitter"></i>
<div class="d-inline-block">
<h5>twitter</h5>
<span>current new timeline</span>
</div>
</div>
<div class="card-block text-center">
<div class="row">
<div class="col-6 b-r-default">
<h2>25</h2>
<p class="text-muted">new tweet</p>
</div>
<div class="col-6">
<h2>450+</h2>
<p class="text-muted">Follower</p>
</div>
</div>
</div>
</div>
</div>
<!-- Email Sent End -->
<!-- Data widget start -->
<div class="col-md-12 col-xl-6">
<div class="card project-task">
<div class="card-header">
<div class="card-header-left ">
<h5>Time spent : project & task</h5>
</div>
<div class="card-header-right">
<ul class="list-unstyled card-option">
<li><i class="icofont icofont-simple-left "></i></li>
<li><i class="icofont icofont-maximize full-card"></i></li>
<li><i class="icofont icofont-minus minimize-card"></i></li>
<li><i class="icofont icofont-refresh reload-card"></i></li>
<li><i class="icofont icofont-error close-card"></i></li>
</ul>
</div>
</div>
<div class="card-block p-b-10">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>Project & Task</th>
<th>Time Spents</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="task-contain">
<h6 class="bg-c-blue d-inline-block text-center">U</h6>
<p class="d-inline-block m-l-20">UI Design</p>
</div>
</td>
<td>
<p class="d-inline-block m-r-20">4 : 36</p>
<div class="progress d-inline-block">
<div class="progress-bar bg-c-blue" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:80%">
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="task-contain">
<h6 class="bg-c-pink d-inline-block text-center">R</h6>
<p class="d-inline-block m-l-20">Redesign Android App</p>
</div>
</td>
<td>
<p class="d-inline-block m-r-20">4 : 36</p>
<div class="progress d-inline-block">
<div class="progress-bar bg-c-pink" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:60%">
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="task-contain">
<h6 class="bg-c-yellow d-inline-block text-center">L</h6>
<p class="d-inline-block m-l-20">Logo Design</p>
</div>
</td>
<td>
<p class="d-inline-block m-r-20">4 : 36</p>
<div class="progress d-inline-block">
<div class="progress-bar bg-c-yellow" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:50%">
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="task-contain">
<h6 class="bg-c-green d-inline-block text-center">A</h6>
<p class="d-inline-block m-l-20">Appestia landing Page</p>
</div>
</td>
<td>
<p class="d-inline-block m-r-20">4 : 36</p>
<div class="progress d-inline-block">
<div class="progress-bar bg-c-green" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:50%">
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="task-contain">
<h6 class="bg-c-blue d-inline-block text-center">L</h6>
<p class="d-inline-block m-l-20">Logo Design</p>
</div>
</td>
<td>
<p class="d-inline-block m-r-20">4 : 36</p>
<div class="progress d-inline-block">
<div class="progress-bar bg-c-blue" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:50%">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-xl-6">
<div class="card add-task-card">
<div class="card-header">
<div class="card-header-left">
<h5>To do list</h5>
</div>
<div class="card-header-right">
<button class="btn btn-card btn-primary">Add task </button>
</div>
</div>
<div class="card-block">
<div class="to-do-list">
<div class="checkbox-fade fade-in-primary d-block">
<label class="check-task d-block">
<input type="checkbox" value="">
<span class="cr">
<i class="cr-icon icofont icofont-ui-check txt-default"></i>
</span>
<span><h6>Schedule Meeting with Compnes <span class="label bg-c-green m-l-10 f-10">2 week</span></h6></span>
<div class="task-card-img m-l-40">
<a href="#!"><img src="assets/images/avatar-2.jpg" data-toggle="tooltip" title="Lary Doe" alt="" class="img-40"></a>
<a href="#!"><img src="assets/images/avatar-3.jpg" data-toggle="tooltip" title="Alia" alt="" class="img-40 m-l-10"></a>
</div>
</label>
</div>
</div>
<div class="to-do-list">
<div class="checkbox-fade fade-in-primary d-block">
<label class="check-task d-block">
<input type="checkbox" value="">
<span class="cr">
<i class="cr-icon icofont icofont-ui-check txt-default"></i>
</span>
<span><h6>Meeting With HOD's and borad</h6><p class="text-muted m-l-40">23 january 2003</p></span>
</label>
</div>
</div>
<div class="to-do-list">
<div class="checkbox-fade fade-in-primary d-block">
<label class="check-task d-block">
<input type="checkbox" value="">
<span class="cr">
<i class="cr-icon icofont icofont-ui-check txt-default"></i>
</span>
<span><h6>Create template, admin with responsive<span class="label bg-c-pink m-l-10">2 week</span></h6></span>
<div class="task-card-img m-l-40">
<a href="#!"><img src="assets/images/avatar-2.jpg" data-toggle="tooltip" title="Alia" alt="" class="img-40"></a>
<a href="#!"><img src="assets/images/avatar-3.jpg" data-toggle="tooltip" title="Suzen" alt="" class="img-40 m-l-10"></a>
<a href="#!"><img src="assets/images/avatar-4.jpg" data-toggle="tooltip" title="Lary Doe" alt="" class="img-40 m-l-10"></a>
<a href="#!"><img src="assets/images/avatar-2.jpg" data-toggle="tooltip" title="Josephin Doe" alt="" class="img-40 m-l-10"></a>
</div>
</label>
</div>
</div>
<div class="to-do-list">
<div class="checkbox-fade fade-in-primary d-block">
<label class="check-task d-block">
<input type="checkbox" value="">
<span class="cr">
<i class="cr-icon icofont icofont-ui-check txt-default"></i>
</span>
<span><h6>Meeting With HOD's and borad</h6>
<p class="text-muted m-l-40">23 january 2003</p></span>
<div class="task-card-img m-l-40">
<a href="#!"><img src="assets/images/avatar-2.jpg" data-toggle="tooltip" title="Lary Doe" alt="" class="img-40"></a>
<a href="#!"><img src="assets/images/avatar-3.jpg" data-toggle="tooltip" title="Alia" alt="" class="img-40 m-l-10"></a>
<a href="#!"><img src="assets/images/avatar-2.jpg" data-toggle="tooltip" title="Josephin Doe" alt="" class="img-40 m-l-10"></a>
</div>
</label>
</div>
</div>
</div>
</div>
</div>
<!-- Data widget End -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
@extends('layouts.master')
@section('menu')
{{-- @include('sidebar.dashboard') --}}
<!-- Pre-loader end -->
<div id="pcoded" class="pcoded">
<div class="pcoded-overlay-box"></div>
<div class="pcoded-container navbar-wrapper">
<nav class="navbar header-navbar pcoded-header">
<div class="navbar-wrapper">
<div class="navbar-logo">
<a class="mobile-menu" id="mobile-collapse" href="#!">
<i class="ti-menu"></i>
</a>
<a class="mobile-search morphsearch-search" href="#">
<i class="ti-search"></i>
</a>
<a href="index.html">
<img class="img-fluid" src="assets/images/logo.png" alt="Theme-Logo" />
</a>
<a class="mobile-options">
<i class="ti-more"></i>
</a>
</div>
<div class="navbar-container container-fluid">
<ul class="nav-left">
<li>
<div class="sidebar_toggle"><a href="javascript:void(0)"><i class="ti-menu"></i></a></div>
</li>
<li>
<a href="#!" onclick="javascript:toggleFullScreen()">
<i class="ti-fullscreen"></i>
</a>
</li>
</ul>
<ul class="nav-right">
<li class="header-notification">
<a href="#!">
<i class="ti-bell"></i>
<span class="badge bg-c-pink"></span>
</a>
<ul class="show-notification">
<li>
<h6>Notifications</h6>
<label class="label label-danger">New</label>
</li>
<li>
<div class="media">
<img class="d-flex align-self-center img-radius" src="assets/images/avatar-4.jpg" alt="Generic placeholder image">
<div class="media-body">
<h5 class="notification-user">Soeng Souy</h5>
<p class="notification-msg">Lorem ipsum dolor sit amet, consectetuer elit.</p>
<span class="notification-time">30 minutes ago</span>
</div>
</div>
</li>
<li>
<div class="media">
<img class="d-flex align-self-center img-radius" src="assets/images/avatar-3.jpg" alt="Generic placeholder image">
<div class="media-body">
<h5 class="notification-user">Joseph William</h5>
<p class="notification-msg">Lorem ipsum dolor sit amet, consectetuer elit.</p>
<span class="notification-time">30 minutes ago</span>
</div>
</div>
</li>
<li>
<div class="media">
<img class="d-flex align-self-center img-radius" src="assets/images/avatar-4.jpg" alt="Generic placeholder image">
<div class="media-body">
<h5 class="notification-user">Sara Soudein</h5>
<p class="notification-msg">Lorem ipsum dolor sit amet, consectetuer elit.</p>
<span class="notification-time">30 minutes ago</span>
</div>
</div>
</li>
</ul>
</li>
<li class="user-profile header-notification">
<a href="#!">
<img src="assets/images/avatar-4.jpg" class="img-radius" alt="User-Profile-Image">
<span>Soeng Souy</span>
<i class="ti-angle-down"></i>
</a>
<ul class="show-notification profile-notification">
<li>
<a href="#!">
<i class="ti-settings"></i> Settings
</a>
</li>
<li>
<a href="#">
<i class="ti-user"></i> Profile
</a>
</li>
<li>
<a href="#">
<i class="ti-email"></i> My Messages
</a>
</li>
<li>
<a href="#">
<i class="ti-lock"></i> Lock Screen
</a>
</li>
<li>
<a href="{{ route('logout') }}">
<i class="ti-layout-sidebar-left"></i> Logout
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="pcoded-main-container">
<div class="pcoded-wrapper">
<nav class="pcoded-navbar">
<div class="sidebar_toggle"><a href="#"><i class="icon-close icons"></i></a></div>
<div class="pcoded-inner-navbar main-menu">
<div class="">
<div class="main-menu-header">
<img class="img-40 img-radius" src="assets/images/avatar-4.jpg" alt="User-Profile-Image">
<div class="user-details">
<span>Soeng Souy</span>
<span id="more-details">Web Designer<i class="ti-angle-down"></i></span>
</div>
</div>
<div class="main-menu-content">
<ul>
<li class="more-details">
<a href="#"><i class="ti-user"></i>View Profile</a>
<a href="#!"><i class="ti-settings"></i>Settings</a>
<a href="auth-normal-sign-in.html"><i class="ti-layout-sidebar-left"></i>Logout</a>
</li>
</ul>
</div>
</div>
<div class="pcoded-search">
<span class="searchbar-toggle"> </span>
<div class="pcoded-search-box ">
<input type="text" placeholder="Search">
<span class="search-icon"><i class="ti-search" aria-hidden="true"></i></span>
</div>
</div>
<div class="pcoded-navigatio-lavel" data-i18n="nav.category.navigation">Layout</div>
<ul class="pcoded-item pcoded-left-item">
<li class="active">
<a href="index.html">
<span class="pcoded-micon"><i class="ti-home"></i><b>D</b></span>
<span class="pcoded-mtext" data-i18n="nav.dash.main">Dashboard</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="pcoded-hasmenu">
<a href="javascript:void(0)">
<span class="pcoded-micon"><i class="ti-layout-grid2-alt"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.main">Components</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class=" ">
<a href="accordion.html">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.alert">Accordion</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="breadcrumb.html">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.breadcrumbs">Breadcrumbs</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="button.html">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.alert">Button</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="tabs.html">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.breadcrumbs">Tabs</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="color.html">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.alert">Color</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="label-badge.html">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.breadcrumbs">Label Badge</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="tooltip.html">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.alert">Tooltip</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="typography.html">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.breadcrumbs">Typography</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="notification.html">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.alert">Notification</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="icon-themify.html">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.breadcrumbs">Icon</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
</ul>
<div class="pcoded-navigatio-lavel" data-i18n="nav.category.forms">Forms & Tables</div>
<ul class="pcoded-item pcoded-left-item">
<li>
<a href="form-elements-component.html">
<span class="pcoded-micon"><i class="ti-layers"></i><b>FC</b></span>
<span class="pcoded-mtext" data-i18n="nav.form-components.main">Form Components</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li>
<a href="bs-basic-table.html">
<span class="pcoded-micon"><i class="ti-layers"></i><b>FC</b></span>
<span class="pcoded-mtext" data-i18n="nav.form-components.main">Basic Table</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
<div class="pcoded-navigatio-lavel" data-i18n="nav.category.forms">Chart & Maps</div>
<ul class="pcoded-item pcoded-left-item">
<li>
<a href="chart.html">
<span class="pcoded-micon"><i class="ti-layers"></i><b>FC</b></span>
<span class="pcoded-mtext" data-i18n="nav.form-components.main">Chart</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li>
<a href="map-google.html">
<span class="pcoded-micon"><i class="ti-layers"></i><b>FC</b></span>
<span class="pcoded-mtext" data-i18n="nav.form-components.main">Maps</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="pcoded-hasmenu">
<a href="javascript:void(0)">
<span class="pcoded-micon"><i class="ti-layout-grid2-alt"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.main">Pages</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class=" ">
<a href="auth-normal-sign-in.html">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.alert">Login</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="auth-sign-up.html">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.breadcrumbs">Register</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class=" ">
<a href="sample-page.html">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.basic-components.breadcrumbs">Sample Page</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
</ul>
<div class="pcoded-navigatio-lavel" data-i18n="nav.category.other">Other</div>
<ul class="pcoded-item pcoded-left-item">
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)">
<span class="pcoded-micon"><i class="ti-direction-alt"></i><b>M</b></span>
<span class="pcoded-mtext" data-i18n="nav.menu-levels.main">Menu Levels</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="javascript:void(0)">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.menu-levels.menu-level-21">Menu Level 2.1</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
<li class="pcoded-hasmenu ">
<a href="javascript:void(0)">
<span class="pcoded-micon"><i class="ti-direction-alt"></i></span>
<span class="pcoded-mtext" data-i18n="nav.menu-levels.menu-level-22.main">Menu Level 2.2</span>
<span class="pcoded-mcaret"></span>
</a>
<ul class="pcoded-submenu">
<li class="">
<a href="javascript:void(0)">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.menu-levels.menu-level-22.menu-level-31">Menu Level 3.1</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
<li class="">
<a href="javascript:void(0)">
<span class="pcoded-micon"><i class="ti-angle-right"></i></span>
<span class="pcoded-mtext" data-i18n="nav.menu-levels.menu-level-23">Menu Level 2.3</span>
<span class="pcoded-mcaret"></span>
</a>
</li>
</ul>
</li>
</ul>
</div>
</nav>
<div class="pcoded-content">
<div class="pcoded-inner-content">
<div class="main-body">
<div class="page-wrapper">
<div class="page-body">
<div class="row">
<!-- card1 start -->
<div class="col-md-6 col-xl-3">
<div class="card widget-card-1">
<div class="card-block-small">
<i class="icofont icofont-pie-chart bg-c-blue card1-icon"></i>
<span class="text-c-blue f-w-600">Use space</span>
<h4>49/50GB</h4>
<div>
<span class="f-left m-t-10 text-muted">
<i class="text-c-blue f-16 icofont icofont-warning m-r-10"></i>Get more space
</span>
</div>
</div>
</div>
</div>
<!-- card1 end -->
<!-- card1 start -->
<div class="col-md-6 col-xl-3">
<div class="card widget-card-1">
<div class="card-block-small">
<i class="icofont icofont-ui-home bg-c-pink card1-icon"></i>
<span class="text-c-pink f-w-600">Revenue</span>
<h4>$23,589</h4>
<div>
<span class="f-left m-t-10 text-muted">
<i class="text-c-pink f-16 icofont icofont-calendar m-r-10"></i>Last 24 hours
</span>
</div>
</div>
</div>
</div>
<!-- card1 end -->
<!-- card1 start -->
<div class="col-md-6 col-xl-3">
<div class="card widget-card-1">
<div class="card-block-small">
<i class="icofont icofont-warning-alt bg-c-green card1-icon"></i>
<span class="text-c-green f-w-600">Fixed issue</span>
<h4>45</h4>
<div>
<span class="f-left m-t-10 text-muted">
<i class="text-c-green f-16 icofont icofont-tag m-r-10"></i>Tracked via microsoft
</span>
</div>
</div>
</div>
</div>
<!-- card1 end -->
<!-- card1 start -->
<div class="col-md-6 col-xl-3">
<div class="card widget-card-1">
<div class="card-block-small">
<i class="icofont icofont-social-twitter bg-c-yellow card1-icon"></i>
<span class="text-c-yellow f-w-600">Followers</span>
<h4>+562</h4>
<div>
<span class="f-left m-t-10 text-muted">
<i class="text-c-yellow f-16 icofont icofont-refresh m-r-10"></i>Just update
</span>
</div>
</div>
</div>
</div>
<!-- card1 end -->
<!-- Statestics Start -->
<div class="col-md-12 col-xl-8">
<div class="card">
<div class="card-header">
<h5>Statestics</h5>
<div class="card-header-left ">
</div>
<div class="card-header-right">
<ul class="list-unstyled card-option">
<li><i class="icofont icofont-simple-left "></i></li>
<li><i class="icofont icofont-maximize full-card"></i></li>
<li><i class="icofont icofont-minus minimize-card"></i></li>
<li><i class="icofont icofont-refresh reload-card"></i></li>
<li><i class="icofont icofont-error close-card"></i></li>
</ul>
</div>
</div>
<div class="card-block">
<div id="statestics-chart" style="height:517px;"></div>
</div>
</div>
</div>
<div class="col-md-12 col-xl-4">
<div class="card fb-card">
<div class="card-header">
<i class="icofont icofont-social-facebook"></i>
<div class="d-inline-block">
<h5>facebook</h5>
<span>blog page timeline</span>
</div>
</div>
<div class="card-block text-center">
<div class="row">
<div class="col-6 b-r-default">
<h2>23</h2>
<p class="text-muted">Active</p>
</div>
<div class="col-6">
<h2>23</h2>
<p class="text-muted">Comment</p>
</div>
</div>
</div>
</div>
<div class="card dribble-card">
<div class="card-header">
<i class="icofont icofont-social-dribbble"></i>
<div class="d-inline-block">
<h5>dribble</h5>
<span>Product page analysis</span>
</div>
</div>
<div class="card-block text-center">
<div class="row">
<div class="col-6 b-r-default">
<h2>23</h2>
<p class="text-muted">Live</p>
</div>
<div class="col-6">
<h2>23</h2>
<p class="text-muted">Message</p>
</div>
</div>
</div>
</div>
<div class="card twitter-card">
<div class="card-header">
<i class="icofont icofont-social-twitter"></i>
<div class="d-inline-block">
<h5>twitter</h5>
<span>current new timeline</span>
</div>
</div>
<div class="card-block text-center">
<div class="row">
<div class="col-6 b-r-default">
<h2>25</h2>
<p class="text-muted">new tweet</p>
</div>
<div class="col-6">
<h2>450+</h2>
<p class="text-muted">Follower</p>
</div>
</div>
</div>
</div>
</div>
<!-- Email Sent End -->
<!-- Data widget start -->
<div class="col-md-12 col-xl-6">
<div class="card project-task">
<div class="card-header">
<div class="card-header-left ">
<h5>Time spent : project & task</h5>
</div>
<div class="card-header-right">
<ul class="list-unstyled card-option">
<li><i class="icofont icofont-simple-left "></i></li>
<li><i class="icofont icofont-maximize full-card"></i></li>
<li><i class="icofont icofont-minus minimize-card"></i></li>
<li><i class="icofont icofont-refresh reload-card"></i></li>
<li><i class="icofont icofont-error close-card"></i></li>
</ul>
</div>
</div>
<div class="card-block p-b-10">
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th>Project & Task</th>
<th>Time Spents</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="task-contain">
<h6 class="bg-c-blue d-inline-block text-center">U</h6>
<p class="d-inline-block m-l-20">UI Design</p>
</div>
</td>
<td>
<p class="d-inline-block m-r-20">4 : 36</p>
<div class="progress d-inline-block">
<div class="progress-bar bg-c-blue" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:80%">
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="task-contain">
<h6 class="bg-c-pink d-inline-block text-center">R</h6>
<p class="d-inline-block m-l-20">Redesign Android App</p>
</div>
</td>
<td>
<p class="d-inline-block m-r-20">4 : 36</p>
<div class="progress d-inline-block">
<div class="progress-bar bg-c-pink" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:60%">
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="task-contain">
<h6 class="bg-c-yellow d-inline-block text-center">L</h6>
<p class="d-inline-block m-l-20">Logo Design</p>
</div>
</td>
<td>
<p class="d-inline-block m-r-20">4 : 36</p>
<div class="progress d-inline-block">
<div class="progress-bar bg-c-yellow" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:50%">
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="task-contain">
<h6 class="bg-c-green d-inline-block text-center">A</h6>
<p class="d-inline-block m-l-20">Appestia landing Page</p>
</div>
</td>
<td>
<p class="d-inline-block m-r-20">4 : 36</p>
<div class="progress d-inline-block">
<div class="progress-bar bg-c-green" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:50%">
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="task-contain">
<h6 class="bg-c-blue d-inline-block text-center">L</h6>
<p class="d-inline-block m-l-20">Logo Design</p>
</div>
</td>
<td>
<p class="d-inline-block m-r-20">4 : 36</p>
<div class="progress d-inline-block">
<div class="progress-bar bg-c-blue" role="progressbar" aria-valuemin="0" aria-valuemax="100" style="width:50%">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-xl-6">
<div class="card add-task-card">
<div class="card-header">
<div class="card-header-left">
<h5>To do list</h5>
</div>
<div class="card-header-right">
<button class="btn btn-card btn-primary">Add task </button>
</div>
</div>
<div class="card-block">
<div class="to-do-list">
<div class="checkbox-fade fade-in-primary d-block">
<label class="check-task d-block">
<input type="checkbox" value="">
<span class="cr">
<i class="cr-icon icofont icofont-ui-check txt-default"></i>
</span>
<span><h6>Schedule Meeting with Compnes <span class="label bg-c-green m-l-10 f-10">2 week</span></h6></span>
<div class="task-card-img m-l-40">
<a href="#!"><img src="assets/images/avatar-2.jpg" data-toggle="tooltip" title="Lary Doe" alt="" class="img-40"></a>
<a href="#!"><img src="assets/images/avatar-3.jpg" data-toggle="tooltip" title="Alia" alt="" class="img-40 m-l-10"></a>
</div>
</label>
</div>
</div>
<div class="to-do-list">
<div class="checkbox-fade fade-in-primary d-block">
<label class="check-task d-block">
<input type="checkbox" value="">
<span class="cr">
<i class="cr-icon icofont icofont-ui-check txt-default"></i>
</span>
<span><h6>Meeting With HOD's and borad</h6><p class="text-muted m-l-40">23 january 2003</p></span>
</label>
</div>
</div>
<div class="to-do-list">
<div class="checkbox-fade fade-in-primary d-block">
<label class="check-task d-block">
<input type="checkbox" value="">
<span class="cr">
<i class="cr-icon icofont icofont-ui-check txt-default"></i>
</span>
<span><h6>Create template, admin with responsive<span class="label bg-c-pink m-l-10">2 week</span></h6></span>
<div class="task-card-img m-l-40">
<a href="#!"><img src="assets/images/avatar-2.jpg" data-toggle="tooltip" title="Alia" alt="" class="img-40"></a>
<a href="#!"><img src="assets/images/avatar-3.jpg" data-toggle="tooltip" title="Suzen" alt="" class="img-40 m-l-10"></a>
<a href="#!"><img src="assets/images/avatar-4.jpg" data-toggle="tooltip" title="Lary Doe" alt="" class="img-40 m-l-10"></a>
<a href="#!"><img src="assets/images/avatar-2.jpg" data-toggle="tooltip" title="Josephin Doe" alt="" class="img-40 m-l-10"></a>
</div>
</label>
</div>
</div>
<div class="to-do-list">
<div class="checkbox-fade fade-in-primary d-block">
<label class="check-task d-block">
<input type="checkbox" value="">
<span class="cr">
<i class="cr-icon icofont icofont-ui-check txt-default"></i>
</span>
<span><h6>Meeting With HOD's and borad</h6>
<p class="text-muted m-l-40">23 january 2003</p></span>
<div class="task-card-img m-l-40">
<a href="#!"><img src="assets/images/avatar-2.jpg" data-toggle="tooltip" title="Lary Doe" alt="" class="img-40"></a>
<a href="#!"><img src="assets/images/avatar-3.jpg" data-toggle="tooltip" title="Alia" alt="" class="img-40 m-l-10"></a>
<a href="#!"><img src="assets/images/avatar-2.jpg" data-toggle="tooltip" title="Josephin Doe" alt="" class="img-40 m-l-10"></a>
</div>
</label>
</div>
</div>
</div>
</div>
</div>
<!-- Data widget End -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsectionStep 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')
<!-- Pre-loader end -->
<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">
<!-- Authentication card start -->
<div class="signup-card card-block auth-body mr-auto ml-auto">
<form method="POST" action="{{ route('register') }}" class="md-float-material form-material">
@csrf
<div class="text-center">
<img src="assets/images/auth/logo-dark.png" alt="logo.png">
</div>
<div class="auth-box">
<div class="row m-b-20">
<div class="col-md-12">
<h3 class="text-center txt-primary">Sign up</h3>
</div>
</div>
<hr/>
<div class="input-group">
<input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" autocomplete="name" autofocus placeholder="Username">
<span class="md-line"></span>
</div>
<div class="input-group">
<input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" autocomplete="email" placeholder="Enter email">
<span class="md-line"></span>
</div>
<div class="input-group">
<input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" autocomplete="new-password" placeholder="Enter password">
<span class="md-line"></span>
</div>
<div class="input-group">
<input type="password" name="password_confirmation" class="form-control" placeholder="Confirm Password">
<span class="md-line"></span>
</div>
<div class="row m-t-25 text-left">
<div class="col-md-12">
<div class="checkbox-fade fade-in-primary">
<label>
<input type="checkbox" value="">
<span class="cr"><i class="cr-icon icofont icofont-ui-check txt-primary"></i></span>
<span class="text-inverse">I read and accept <a href="#">Terms & Conditions.</a></span>
</label>
</div>
</div>
</div>
<div class="row m-t-30">
<div class="col-md-12">
<button type="submit" class="btn btn-primary btn-md btn-block waves-effect text-center m-b-20">Sign up now.</button>
</div>
</div>
<hr/>
<div class="row">
<div class="col-md-12">
<p class="mb-0 text-muted">Don’t have an account? <a href="{{ route('login') }}" class="f-w-400">Signup</a></p>
</div>
</div>
</div>
</form>
<!-- end of form -->
</div>
<!-- Authentication card end -->
</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
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">
<div class="row">
<div class="col-sm-12">
<!-- Authentication card start -->
<div class="login-card card-block auth-body mr-auto ml-auto">
<form method="POST" action="{{ route('login') }}" class="md-float-material form-material">
@csrf
<div class="text-center">
<img src="assets/images/auth/logo-dark.png" alt="logo.png">
</div>
<div class="auth-box">
<div class="row m-b-20">
<div class="col-md-12">
<h3 class="text-center txt-primary">Sign In</h3>
</div>
</div>
@if(session()->has('error'))
<div class="text-danger text-center">
{{ session()->get('error') }}
</div>
@endif
<hr/>
<div class="input-group">
<input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" autocomplete="email" autofocus placeholder="Enter email">
<span class="md-line"></span>
</div>
<div class="input-group">
<input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" autocomplete="current-password" placeholder="Enter password">
<span class="md-line"></span>
</div>
<div class="row m-t-25 text-left">
<div class="col-sm-7 col-xs-12">
<div class="checkbox-fade fade-in-primary">
<label>
<input type="checkbox" value="" {{ old('remember') ? 'checked' : '' }}>
<span class="cr"><i class="cr-icon icofont icofont-ui-check txt-primary"></i></span>
<span class="text-inverse">Remember me</span>
</label>
</div>
</div>
<div class="col-sm-4 col-xs-12 forgot-phone text-right">
<a href="{{ route('forget-password') }}" class="text-right f-w-600 text-inverse"> Forgot Your Password?</a>
</div>
</div>
<div class="row m-t-30">
<div class="col-md-12">
<button type="submit" class="btn btn-primary btn-md btn-block waves-effect text-center m-b-20">Sign in</button>
</div>
</div>
<hr/>
<div class="row">
<div class="col-md-12">
<p class="mb-0 text-muted">Don’t have an account? <a href="{{ route('register') }}" class="f-w-400">Signup</a></p>
</div>
</div>
</div>
</form>
<!-- end of form -->
</div>
<!-- Authentication card end -->
</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 serveAfter this go to the browser and check using the login page.
http://localhost/dashboard_version7/public/
0 Comments
CAN FEEDBACK
Emoji