Template Demo Admin dashboard in Laravel | Sign up and Sign in
Step 1: Install Laravel 8
step: Install UI
Note:
composer require laravel/ui
php artisan ui vue --auth
First, install a new Laravel app just running the below command in your terminal.
composer create-project --prefer-dist laravel/laravel template_job_searchStep 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
@extends('layouts.master')
@section('content')
<!-- [ Main Content ] start -->
<div class="pcoded-main-container">
<div class="pcoded-wrapper">
<div class="pcoded-content">
<div class="pcoded-inner-content">
<!-- [ breadcrumb ] start -->
<!-- [ breadcrumb ] end -->
<div class="main-body">
<div class="page-wrapper">
<!-- [ Main Content ] start -->
<div class="row">
<!--[ daily sales section ] start-->
<div class="col-md-6 col-xl-4">
<div class="card daily-sales">
<div class="card-block">
<h6 class="mb-4">Daily Sales</h6>
<div class="row d-flex align-items-center">
<div class="col-9">
<h3 class="f-w-300 d-flex align-items-center m-b-0"><i class="feather icon-arrow-up text-c-green f-30 m-r-10"></i>$ 249.95</h3>
</div>
<div class="col-3 text-right">
<p class="m-b-0">67%</p>
</div>
</div>
<div class="progress m-t-30" style="height: 7px;">
<div class="progress-bar progress-c-theme" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
<!--[ daily sales section ] end-->
<!--[ Monthly sales section ] starts-->
<div class="col-md-6 col-xl-4">
<div class="card Monthly-sales">
<div class="card-block">
<h6 class="mb-4">Monthly Sales</h6>
<div class="row d-flex align-items-center">
<div class="col-9">
<h3 class="f-w-300 d-flex align-items-center m-b-0"><i class="feather icon-arrow-down text-c-red f-30 m-r-10"></i>$ 2.942.32</h3>
</div>
<div class="col-3 text-right">
<p class="m-b-0">36%</p>
</div>
</div>
<div class="progress m-t-30" style="height: 7px;">
<div class="progress-bar progress-c-theme2" role="progressbar" style="width: 35%;" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
<!--[ Monthly sales section ] end-->
<!--[ year sales section ] starts-->
<div class="col-md-12 col-xl-4">
<div class="card yearly-sales">
<div class="card-block">
<h6 class="mb-4">Yearly Sales</h6>
<div class="row d-flex align-items-center">
<div class="col-9">
<h3 class="f-w-300 d-flex align-items-center m-b-0"><i class="feather icon-arrow-up text-c-green f-30 m-r-10"></i>$ 8.638.32</h3>
</div>
<div class="col-3 text-right">
<p class="m-b-0">80%</p>
</div>
</div>
<div class="progress m-t-30" style="height: 7px;">
<div class="progress-bar progress-c-theme" role="progressbar" style="width: 70%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
<!--[ year sales section ] end-->
<!--[ Recent Users ] start-->
<div class="col-xl-8 col-md-6">
<div class="card Recent-Users">
<div class="card-header">
<h5>Recent Users</h5>
</div>
<div class="card-block px-0 py-3">
<div class="table-responsive">
<table class="table table-hover">
<tbody>
<tr class="unread">
<td><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-1.jpg" alt="activity-user"></td>
<td>
<h6 class="mb-1">Isabella Christensen</h6>
<p class="m-0">Lorem Ipsum is simply…</p>
</td>
<td>
<h6 class="text-muted"><i class="fas fa-circle text-c-green f-10 m-r-15"></i>11 MAY 12:56</h6>
</td>
<td><a href="#!" class="label theme-bg2 text-white f-12">Reject</a><a href="#!" class="label theme-bg text-white f-12">Approve</a></td>
</tr>
<tr class="unread">
<td><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-2.jpg" alt="activity-user"></td>
<td>
<h6 class="mb-1">Mathilde Andersen</h6>
<p class="m-0">Lorem Ipsum is simply text of…</p>
</td>
<td>
<h6 class="text-muted"><i class="fas fa-circle text-c-red f-10 m-r-15"></i>11 MAY 10:35</h6>
</td>
<td><a href="#!" class="label theme-bg2 text-white f-12">Reject</a><a href="#!" class="label theme-bg text-white f-12">Approve</a></td>
</tr>
<tr class="unread">
<td><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-3.jpg" alt="activity-user"></td>
<td>
<h6 class="mb-1">Karla Sorensen</h6>
<p class="m-0">Lorem Ipsum is simply…</p>
</td>
<td>
<h6 class="text-muted"><i class="fas fa-circle text-c-green f-10 m-r-15"></i>9 MAY 17:38</h6>
</td>
<td><a href="#!" class="label theme-bg2 text-white f-12">Reject</a><a href="#!" class="label theme-bg text-white f-12">Approve</a></td>
</tr>
<tr class="unread">
<td><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-1.jpg" alt="activity-user"></td>
<td>
<h6 class="mb-1">Ida Jorgensen</h6>
<p class="m-0">Lorem Ipsum is simply text of…</p>
</td>
<td>
<h6 class="text-muted f-w-300"><i class="fas fa-circle text-c-red f-10 m-r-15"></i>19 MAY 12:56</h6>
</td>
<td><a href="#!" class="label theme-bg2 text-white f-12">Reject</a><a href="#!" class="label theme-bg text-white f-12">Approve</a></td>
</tr>
<tr class="unread">
<td><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-2.jpg" alt="activity-user"></td>
<td>
<h6 class="mb-1">Albert Andersen</h6>
<p class="m-0">Lorem Ipsum is simply dummy…</p>
</td>
<td>
<h6 class="text-muted"><i class="fas fa-circle text-c-green f-10 m-r-15"></i>21 July 12:56</h6>
</td>
<td><a href="#!" class="label theme-bg2 text-white f-12">Reject</a><a href="#!" class="label theme-bg text-white f-12">Approve</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!--[ Recent Users ] end-->
<!-- [ statistics year chart ] start -->
<div class="col-xl-4 col-md-6">
<div class="card card-event">
<div class="card-block">
<div class="row align-items-center justify-content-center">
<div class="col">
<h5 class="m-0">Upcoming Event</h5>
</div>
<div class="col-auto">
<label class="label theme-bg2 text-white f-14 f-w-400 float-right">34%</label>
</div>
</div>
<h2 class="mt-3 f-w-300">45<sub class="text-muted f-14">Competitors</sub></h2>
<h6 class="text-muted mt-4 mb-0">You can participate in event </h6>
<i class="fab fa-angellist text-c-purple f-50"></i>
</div>
</div>
<div class="card">
<div class="card-block border-bottom">
<div class="row d-flex align-items-center">
<div class="col-auto">
<i class="feather icon-zap f-30 text-c-green"></i>
</div>
<div class="col">
<h3 class="f-w-300">235</h3>
<span class="d-block text-uppercase">TOTAL IDEAS</span>
</div>
</div>
</div>
<div class="card-block">
<div class="row d-flex align-items-center">
<div class="col-auto">
<i class="feather icon-map-pin f-30 text-c-blue"></i>
</div>
<div class="col">
<h3 class="f-w-300">26</h3>
<span class="d-block text-uppercase">TOTAL LOCATIONS</span>
</div>
</div>
</div>
</div>
</div>
<!-- [ statistics year chart ] end -->
<!--[social-media section] start-->
<div class="col-md-12 col-xl-4">
<div class="card card-social">
<div class="card-block border-bottom">
<div class="row align-items-center justify-content-center">
<div class="col-auto">
<i class="fab fa-facebook-f text-primary f-36"></i>
</div>
<div class="col text-right">
<h3>12,281</h3>
<h5 class="text-c-green mb-0">+7.2% <span class="text-muted">Total Likes</span></h5>
</div>
</div>
</div>
<div class="card-block">
<div class="row align-items-center justify-content-center card-active">
<div class="col-6">
<h6 class="text-center m-b-10"><span class="text-muted m-r-5">Target:</span>35,098</h6>
<div class="progress">
<div class="progress-bar progress-c-theme" role="progressbar" style="width:60%;height:6px;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-6">
<h6 class="text-center m-b-10"><span class="text-muted m-r-5">Duration:</span>3,539</h6>
<div class="progress">
<div class="progress-bar progress-c-theme2" role="progressbar" style="width:45%;height:6px;" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card card-social">
<div class="card-block border-bottom">
<div class="row align-items-center justify-content-center">
<div class="col-auto">
<i class="fab fa-twitter text-c-blue f-36"></i>
</div>
<div class="col text-right">
<h3>11,200</h3>
<h5 class="text-c-purple mb-0">+6.2% <span class="text-muted">Total Likes</span></h5>
</div>
</div>
</div>
<div class="card-block">
<div class="row align-items-center justify-content-center card-active">
<div class="col-6">
<h6 class="text-center m-b-10"><span class="text-muted m-r-5">Target:</span>34,185</h6>
<div class="progress">
<div class="progress-bar progress-c-green" role="progressbar" style="width:40%;height:6px;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-6">
<h6 class="text-center m-b-10"><span class="text-muted m-r-5">Duration:</span>4,567</h6>
<div class="progress">
<div class="progress-bar progress-c-blue" role="progressbar" style="width:70%;height:6px;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card card-social">
<div class="card-block border-bottom">
<div class="row align-items-center justify-content-center">
<div class="col-auto">
<i class="fab fa-google-plus-g text-c-red f-36"></i>
</div>
<div class="col text-right">
<h3>10,500</h3>
<h5 class="text-c-blue mb-0">+5.9% <span class="text-muted">Total Likes</span></h5>
</div>
</div>
</div>
<div class="card-block">
<div class="row align-items-center justify-content-center card-active">
<div class="col-6">
<h6 class="text-center m-b-10"><span class="text-muted m-r-5">Target:</span>25,998</h6>
<div class="progress">
<div class="progress-bar progress-c-theme" role="progressbar" style="width:80%;height:6px;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-6">
<h6 class="text-center m-b-10"><span class="text-muted m-r-5">Duration:</span>7,753</h6>
<div class="progress">
<div class="progress-bar progress-c-theme2" role="progressbar" style="width:50%;height:6px;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--[social-media section] end-->
<!-- [ rating list ] starts-->
<div class="col-xl-4 col-md-6">
<div class="card user-list">
<div class="card-header">
<h5>Rating</h5>
</div>
<div class="card-block">
<div class="row align-items-center justify-content-center m-b-20">
<div class="col-6">
<h2 class="f-w-300 d-flex align-items-center float-left m-0">4.7 <i class="fas fa-star f-10 m-l-10 text-c-yellow"></i></h2>
</div>
<div class="col-6">
<h6 class="d-flex align-items-center float-right m-0">0.4 <i class="fas fa-caret-up text-c-green f-22 m-l-10"></i></h6>
</div>
</div>
<div class="row">
<div class="col-xl-12">
<h6 class="align-items-center float-left"><i class="fas fa-star f-10 m-r-10 text-c-yellow"></i>5</h6>
<h6 class="align-items-center float-right">384</h6>
<div class="progress m-t-30 m-b-20" style="height: 6px;">
<div class="progress-bar progress-c-theme" role="progressbar" style="width: 70%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-xl-12">
<h6 class="align-items-center float-left"><i class="fas fa-star f-10 m-r-10 text-c-yellow"></i>4</h6>
<h6 class="align-items-center float-right">145</h6>
<div class="progress m-t-30 m-b-20" style="height: 6px;">
<div class="progress-bar progress-c-theme" role="progressbar" style="width: 35%;" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-xl-12">
<h6 class="align-items-center float-left"><i class="fas fa-star f-10 m-r-10 text-c-yellow"></i>3</h6>
<h6 class="align-items-center float-right">24</h6>
<div class="progress m-t-30 m-b-20" style="height: 6px;">
<div class="progress-bar progress-c-theme" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-xl-12">
<h6 class="align-items-center float-left"><i class="fas fa-star f-10 m-r-10 text-c-yellow"></i>2</h6>
<h6 class="align-items-center float-right">1</h6>
<div class="progress m-t-30 m-b-20" style="height: 6px;">
<div class="progress-bar progress-c-theme" role="progressbar" style="width: 10%;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-xl-12">
<h6 class="align-items-center float-left"><i class="fas fa-star f-10 m-r-10 text-c-yellow"></i>1</h6>
<h6 class="align-items-center float-right">0</h6>
<div class="progress m-t-30 m-b-20" style="height: 6px;">
<div class="progress-bar" role="progressbar" style="width:0;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- [ rating list ] end-->
<div class="col-xl-8 col-md-12 m-b-30">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="false">Today</a>
</li>
<li class="nav-item">
<a class="nav-link active show" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="true">This Week</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">All</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
<table class="table table-hover">
<thead>
<tr>
<th>User</th>
<th>Activity</th>
<th>Time</th>
<th>Status</th>
<th class="text-right"></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h6 class="m-0"><img class="rounded-circle m-r-10" style="width:40px;" src="assets/images/user/avatar-1.jpg" alt="activity-user">Ida Jorgensen</h6>
</td>
<td>
<h6 class="m-0">The quick brown fox</h6>
</td>
<td>
<h6 class="m-0">3:28 PM</h6>
</td>
<td>
<h6 class="m-0 text-c-green">Done</h6>
</td>
<td class="text-right"><i class="fas fa-circle text-c-green f-10"></i></td>
</tr>
<tr>
<td>
<h6 class="m-0"><img class="rounded-circle m-r-10" style="width:40px;" src="assets/images/user/avatar-2.jpg" alt="activity-user">Albert Andersen</h6>
</td>
<td>
<h6 class="m-0">Jumps over the lazy</h6>
</td>
<td>
<h6 class="m-0">2:37 PM</h6>
</td>
<td>
<h6 class="m-0 text-c-red">Missed</h6>
</td>
<td class="text-right"><i class="fas fa-circle text-c-red f-10"></i></td>
</tr>
<tr>
<td>
<h6 class="m-0"><img class="rounded-circle m-r-10" style="width:40px;" src="assets/images/user/avatar-3.jpg" alt="activity-user">Silje Larsen</h6>
</td>
<td>
<h6 class="m-0">Dog the quick brown</h6>
</td>
<td>
<h6 class="m-0">10:23 AM</h6>
</td>
<td>
<h6 class="m-0 text-c-purple">Delayed</h6>
</td>
<td class="text-right"><i class="fas fa-circle text-c-purple f-10"></i></td>
</tr>
<tr>
<td>
<h6 class="m-0"><img class="rounded-circle m-r-10" style="width:40px;" src="assets/images/user/avatar-1.jpg" alt="activity-user">Ida Jorgensen</h6>
</td>
<td>
<h6 class="m-0">The quick brown fox</h6>
</td>
<td>
<h6 class="m-0">4:28 PM</h6>
</td>
<td>
<h6 class="m-0 text-c-green">Done</h6>
</td>
<td class="text-right"><i class="fas fa-circle text-c-green f-10"></i></td>
</tr>
</tbody>
</table>
</div>
<div class="tab-pane fade active show" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<table class="table table-hover">
<thead>
<tr>
<th>User</th>
<th>Activity</th>
<th>Time</th>
<th>Status</th>
<th class="text-right"></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h6 class="m-0"><img class="rounded-circle m-r-10" style="width:40px;" src="assets/images/user/avatar-2.jpg" alt="activity-user">Albert Andersen</h6>
</td>
<td>
<h6 class="m-0">Jumps over the lazy</h6>
</td>
<td>
<h6 class="m-0">2:37 PM</h6>
</td>
<td>
<h6 class="m-0 text-c-red">Missed</h6>
</td>
<td class="text-right"><i class="fas fa-circle text-c-red f-10"></i></td>
</tr>
<tr>
<td>
<h6 class="m-0"><img class="rounded-circle m-r-10" style="width:40px;" src="assets/images/user/avatar-1.jpg" alt="activity-user">Ida Jorgensen</h6>
</td>
<td>
<h6 class="m-0">The quick brown fox</h6>
</td>
<td>
<h6 class="m-0">3:28 PM</h6>
</td>
<td>
<h6 class="m-0 text-c-green">Done</h6>
</td>
<td class="text-right"><i class="fas fa-circle text-c-green f-10"></i></td>
</tr>
<tr>
<td>
<h6 class="m-0"><img class="rounded-circle m-r-10" style="width:40px;" src="assets/images/user/avatar-1.jpg" alt="activity-user">Ida Jorgensen</h6>
</td>
<td>
<h6 class="m-0">The quick brown fox</h6>
</td>
<td>
<h6 class="m-0">4:28 PM</h6>
</td>
<td>
<h6 class="m-0 text-c-green">Done</h6>
</td>
<td class="text-right"><i class="fas fa-circle text-c-green f-10"></i></td>
</tr>
<tr>
<td>
<h6 class="m-0"><img class="rounded-circle m-r-10" style="width:40px;" src="assets/images/user/avatar-3.jpg" alt="activity-user">Silje Larsen</h6>
</td>
<td>
<h6 class="m-0">Dog the quick brown</h6>
</td>
<td>
<h6 class="m-0">10:23 AM</h6>
</td>
<td>
<h6 class="m-0 text-c-purple">Delayed</h6>
</td>
<td class="text-right"><i class="fas fa-circle text-c-purple f-10"></i></td>
</tr>
</tbody>
</table>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<table class="table table-hover">
<thead>
<tr>
<th>User</th>
<th>Activity</th>
<th>Time</th>
<th>Status</th>
<th class="text-right"></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h6 class="m-0"><img class="rounded-circle m-r-10" style="width:40px;" src="assets/images/user/avatar-3.jpg" alt="activity-user">Silje Larsen</h6>
</td>
<td>
<h6 class="m-0">Dog the quick brown</h6>
</td>
<td>
<h6 class="m-0">10:23 AM</h6>
</td>
<td>
<h6 class="m-0 text-c-purple">Delayed</h6>
</td>
<td class="text-right"><i class="fas fa-circle text-c-purple f-10"></i></td>
</tr>
<tr>
<td>
<h6 class="m-0"><img class="rounded-circle m-r-10" style="width:40px;" src="assets/images/user/avatar-1.jpg" alt="activity-user">Ida Jorgensen</h6>
</td>
<td>
<h6 class="m-0">The quick brown fox</h6>
</td>
<td>
<h6 class="m-0">3:28 PM</h6>
</td>
<td>
<h6 class="m-0 text-c-green">Done</h6>
</td>
<td class="text-right"><i class="fas fa-circle text-c-green f-10"></i></td>
</tr>
<tr>
<td>
<h6 class="m-0"><img class="rounded-circle m-r-10" style="width:40px;" src="assets/images/user/avatar-2.jpg" alt="activity-user">Albert Andersen</h6>
</td>
<td>
<h6 class="m-0">Jumps over the lazy</h6>
</td>
<td>
<h6 class="m-0">2:37 PM</h6>
</td>
<td>
<h6 class="m-0 text-c-red">Missed</h6>
</td>
<td class="text-right"><i class="fas fa-circle text-c-red f-10"></i></td>
</tr>
<tr>
<td>
<h6 class="m-0"><img class="rounded-circle m-r-10" style="width:40px;" src="assets/images/user/avatar-1.jpg" alt="activity-user">Ida Jorgensen</h6>
</td>
<td>
<h6 class="m-0">The quick brown fox</h6>
</td>
<td>
<h6 class="m-0">4:28 PM</h6>
</td>
<td>
<h6 class="m-0 text-c-green">Done</h6>
</td>
<td class="text-right"><i class="fas fa-circle text-c-green f-10"></i></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- [ Main Content ] end -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- [ Main Content ] end -->
@endsection
@extends('layouts.master')
@section('content')
<!-- [ Main Content ] start -->
<div class="pcoded-main-container">
<div class="pcoded-wrapper">
<div class="pcoded-content">
<div class="pcoded-inner-content">
<!-- [ breadcrumb ] start -->
<!-- [ breadcrumb ] end -->
<div class="main-body">
<div class="page-wrapper">
<!-- [ Main Content ] start -->
<div class="row">
<!--[ daily sales section ] start-->
<div class="col-md-6 col-xl-4">
<div class="card daily-sales">
<div class="card-block">
<h6 class="mb-4">Daily Sales</h6>
<div class="row d-flex align-items-center">
<div class="col-9">
<h3 class="f-w-300 d-flex align-items-center m-b-0"><i class="feather icon-arrow-up text-c-green f-30 m-r-10"></i>$ 249.95</h3>
</div>
<div class="col-3 text-right">
<p class="m-b-0">67%</p>
</div>
</div>
<div class="progress m-t-30" style="height: 7px;">
<div class="progress-bar progress-c-theme" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
<!--[ daily sales section ] end-->
<!--[ Monthly sales section ] starts-->
<div class="col-md-6 col-xl-4">
<div class="card Monthly-sales">
<div class="card-block">
<h6 class="mb-4">Monthly Sales</h6>
<div class="row d-flex align-items-center">
<div class="col-9">
<h3 class="f-w-300 d-flex align-items-center m-b-0"><i class="feather icon-arrow-down text-c-red f-30 m-r-10"></i>$ 2.942.32</h3>
</div>
<div class="col-3 text-right">
<p class="m-b-0">36%</p>
</div>
</div>
<div class="progress m-t-30" style="height: 7px;">
<div class="progress-bar progress-c-theme2" role="progressbar" style="width: 35%;" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
<!--[ Monthly sales section ] end-->
<!--[ year sales section ] starts-->
<div class="col-md-12 col-xl-4">
<div class="card yearly-sales">
<div class="card-block">
<h6 class="mb-4">Yearly Sales</h6>
<div class="row d-flex align-items-center">
<div class="col-9">
<h3 class="f-w-300 d-flex align-items-center m-b-0"><i class="feather icon-arrow-up text-c-green f-30 m-r-10"></i>$ 8.638.32</h3>
</div>
<div class="col-3 text-right">
<p class="m-b-0">80%</p>
</div>
</div>
<div class="progress m-t-30" style="height: 7px;">
<div class="progress-bar progress-c-theme" role="progressbar" style="width: 70%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
<!--[ year sales section ] end-->
<!--[ Recent Users ] start-->
<div class="col-xl-8 col-md-6">
<div class="card Recent-Users">
<div class="card-header">
<h5>Recent Users</h5>
</div>
<div class="card-block px-0 py-3">
<div class="table-responsive">
<table class="table table-hover">
<tbody>
<tr class="unread">
<td><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-1.jpg" alt="activity-user"></td>
<td>
<h6 class="mb-1">Isabella Christensen</h6>
<p class="m-0">Lorem Ipsum is simply…</p>
</td>
<td>
<h6 class="text-muted"><i class="fas fa-circle text-c-green f-10 m-r-15"></i>11 MAY 12:56</h6>
</td>
<td><a href="#!" class="label theme-bg2 text-white f-12">Reject</a><a href="#!" class="label theme-bg text-white f-12">Approve</a></td>
</tr>
<tr class="unread">
<td><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-2.jpg" alt="activity-user"></td>
<td>
<h6 class="mb-1">Mathilde Andersen</h6>
<p class="m-0">Lorem Ipsum is simply text of…</p>
</td>
<td>
<h6 class="text-muted"><i class="fas fa-circle text-c-red f-10 m-r-15"></i>11 MAY 10:35</h6>
</td>
<td><a href="#!" class="label theme-bg2 text-white f-12">Reject</a><a href="#!" class="label theme-bg text-white f-12">Approve</a></td>
</tr>
<tr class="unread">
<td><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-3.jpg" alt="activity-user"></td>
<td>
<h6 class="mb-1">Karla Sorensen</h6>
<p class="m-0">Lorem Ipsum is simply…</p>
</td>
<td>
<h6 class="text-muted"><i class="fas fa-circle text-c-green f-10 m-r-15"></i>9 MAY 17:38</h6>
</td>
<td><a href="#!" class="label theme-bg2 text-white f-12">Reject</a><a href="#!" class="label theme-bg text-white f-12">Approve</a></td>
</tr>
<tr class="unread">
<td><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-1.jpg" alt="activity-user"></td>
<td>
<h6 class="mb-1">Ida Jorgensen</h6>
<p class="m-0">Lorem Ipsum is simply text of…</p>
</td>
<td>
<h6 class="text-muted f-w-300"><i class="fas fa-circle text-c-red f-10 m-r-15"></i>19 MAY 12:56</h6>
</td>
<td><a href="#!" class="label theme-bg2 text-white f-12">Reject</a><a href="#!" class="label theme-bg text-white f-12">Approve</a></td>
</tr>
<tr class="unread">
<td><img class="rounded-circle" style="width:40px;" src="assets/images/user/avatar-2.jpg" alt="activity-user"></td>
<td>
<h6 class="mb-1">Albert Andersen</h6>
<p class="m-0">Lorem Ipsum is simply dummy…</p>
</td>
<td>
<h6 class="text-muted"><i class="fas fa-circle text-c-green f-10 m-r-15"></i>21 July 12:56</h6>
</td>
<td><a href="#!" class="label theme-bg2 text-white f-12">Reject</a><a href="#!" class="label theme-bg text-white f-12">Approve</a></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!--[ Recent Users ] end-->
<!-- [ statistics year chart ] start -->
<div class="col-xl-4 col-md-6">
<div class="card card-event">
<div class="card-block">
<div class="row align-items-center justify-content-center">
<div class="col">
<h5 class="m-0">Upcoming Event</h5>
</div>
<div class="col-auto">
<label class="label theme-bg2 text-white f-14 f-w-400 float-right">34%</label>
</div>
</div>
<h2 class="mt-3 f-w-300">45<sub class="text-muted f-14">Competitors</sub></h2>
<h6 class="text-muted mt-4 mb-0">You can participate in event </h6>
<i class="fab fa-angellist text-c-purple f-50"></i>
</div>
</div>
<div class="card">
<div class="card-block border-bottom">
<div class="row d-flex align-items-center">
<div class="col-auto">
<i class="feather icon-zap f-30 text-c-green"></i>
</div>
<div class="col">
<h3 class="f-w-300">235</h3>
<span class="d-block text-uppercase">TOTAL IDEAS</span>
</div>
</div>
</div>
<div class="card-block">
<div class="row d-flex align-items-center">
<div class="col-auto">
<i class="feather icon-map-pin f-30 text-c-blue"></i>
</div>
<div class="col">
<h3 class="f-w-300">26</h3>
<span class="d-block text-uppercase">TOTAL LOCATIONS</span>
</div>
</div>
</div>
</div>
</div>
<!-- [ statistics year chart ] end -->
<!--[social-media section] start-->
<div class="col-md-12 col-xl-4">
<div class="card card-social">
<div class="card-block border-bottom">
<div class="row align-items-center justify-content-center">
<div class="col-auto">
<i class="fab fa-facebook-f text-primary f-36"></i>
</div>
<div class="col text-right">
<h3>12,281</h3>
<h5 class="text-c-green mb-0">+7.2% <span class="text-muted">Total Likes</span></h5>
</div>
</div>
</div>
<div class="card-block">
<div class="row align-items-center justify-content-center card-active">
<div class="col-6">
<h6 class="text-center m-b-10"><span class="text-muted m-r-5">Target:</span>35,098</h6>
<div class="progress">
<div class="progress-bar progress-c-theme" role="progressbar" style="width:60%;height:6px;" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-6">
<h6 class="text-center m-b-10"><span class="text-muted m-r-5">Duration:</span>3,539</h6>
<div class="progress">
<div class="progress-bar progress-c-theme2" role="progressbar" style="width:45%;height:6px;" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card card-social">
<div class="card-block border-bottom">
<div class="row align-items-center justify-content-center">
<div class="col-auto">
<i class="fab fa-twitter text-c-blue f-36"></i>
</div>
<div class="col text-right">
<h3>11,200</h3>
<h5 class="text-c-purple mb-0">+6.2% <span class="text-muted">Total Likes</span></h5>
</div>
</div>
</div>
<div class="card-block">
<div class="row align-items-center justify-content-center card-active">
<div class="col-6">
<h6 class="text-center m-b-10"><span class="text-muted m-r-5">Target:</span>34,185</h6>
<div class="progress">
<div class="progress-bar progress-c-green" role="progressbar" style="width:40%;height:6px;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-6">
<h6 class="text-center m-b-10"><span class="text-muted m-r-5">Duration:</span>4,567</h6>
<div class="progress">
<div class="progress-bar progress-c-blue" role="progressbar" style="width:70%;height:6px;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-4">
<div class="card card-social">
<div class="card-block border-bottom">
<div class="row align-items-center justify-content-center">
<div class="col-auto">
<i class="fab fa-google-plus-g text-c-red f-36"></i>
</div>
<div class="col text-right">
<h3>10,500</h3>
<h5 class="text-c-blue mb-0">+5.9% <span class="text-muted">Total Likes</span></h5>
</div>
</div>
</div>
<div class="card-block">
<div class="row align-items-center justify-content-center card-active">
<div class="col-6">
<h6 class="text-center m-b-10"><span class="text-muted m-r-5">Target:</span>25,998</h6>
<div class="progress">
<div class="progress-bar progress-c-theme" role="progressbar" style="width:80%;height:6px;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-6">
<h6 class="text-center m-b-10"><span class="text-muted m-r-5">Duration:</span>7,753</h6>
<div class="progress">
<div class="progress-bar progress-c-theme2" role="progressbar" style="width:50%;height:6px;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--[social-media section] end-->
<!-- [ rating list ] starts-->
<div class="col-xl-4 col-md-6">
<div class="card user-list">
<div class="card-header">
<h5>Rating</h5>
</div>
<div class="card-block">
<div class="row align-items-center justify-content-center m-b-20">
<div class="col-6">
<h2 class="f-w-300 d-flex align-items-center float-left m-0">4.7 <i class="fas fa-star f-10 m-l-10 text-c-yellow"></i></h2>
</div>
<div class="col-6">
<h6 class="d-flex align-items-center float-right m-0">0.4 <i class="fas fa-caret-up text-c-green f-22 m-l-10"></i></h6>
</div>
</div>
<div class="row">
<div class="col-xl-12">
<h6 class="align-items-center float-left"><i class="fas fa-star f-10 m-r-10 text-c-yellow"></i>5</h6>
<h6 class="align-items-center float-right">384</h6>
<div class="progress m-t-30 m-b-20" style="height: 6px;">
<div class="progress-bar progress-c-theme" role="progressbar" style="width: 70%;" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-xl-12">
<h6 class="align-items-center float-left"><i class="fas fa-star f-10 m-r-10 text-c-yellow"></i>4</h6>
<h6 class="align-items-center float-right">145</h6>
<div class="progress m-t-30 m-b-20" style="height: 6px;">
<div class="progress-bar progress-c-theme" role="progressbar" style="width: 35%;" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-xl-12">
<h6 class="align-items-center float-left"><i class="fas fa-star f-10 m-r-10 text-c-yellow"></i>3</h6>
<h6 class="align-items-center float-right">24</h6>
<div class="progress m-t-30 m-b-20" style="height: 6px;">
<div class="progress-bar progress-c-theme" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-xl-12">
<h6 class="align-items-center float-left"><i class="fas fa-star f-10 m-r-10 text-c-yellow"></i>2</h6>
<h6 class="align-items-center float-right">1</h6>
<div class="progress m-t-30 m-b-20" style="height: 6px;">
<div class="progress-bar progress-c-theme" role="progressbar" style="width: 10%;" aria-valuenow="10" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
<div class="col-xl-12">
<h6 class="align-items-center float-left"><i class="fas fa-star f-10 m-r-10 text-c-yellow"></i>1</h6>
<h6 class="align-items-center float-right">0</h6>
<div class="progress m-t-30 m-b-20" style="height: 6px;">
<div class="progress-bar" role="progressbar" style="width:0;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- [ rating list ] end-->
<div class="col-xl-8 col-md-12 m-b-30">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="false">Today</a>
</li>
<li class="nav-item">
<a class="nav-link active show" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="true">This Week</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">All</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
<table class="table table-hover">
<thead>
<tr>
<th>User</th>
<th>Activity</th>
<th>Time</th>
<th>Status</th>
<th class="text-right"></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h6 class="m-0"><img class="rounded-circle m-r-10" style="width:40px;" src="assets/images/user/avatar-1.jpg" alt="activity-user">Ida Jorgensen</h6>
</td>
<td>
<h6 class="m-0">The quick brown fox</h6>
</td>
<td>
<h6 class="m-0">3:28 PM</h6>
</td>
<td>
<h6 class="m-0 text-c-green">Done</h6>
</td>
<td class="text-right"><i class="fas fa-circle text-c-green f-10"></i></td>
</tr>
<tr>
<td>
<h6 class="m-0"><img class="rounded-circle m-r-10" style="width:40px;" src="assets/images/user/avatar-2.jpg" alt="activity-user">Albert Andersen</h6>
</td>
<td>
<h6 class="m-0">Jumps over the lazy</h6>
</td>
<td>
<h6 class="m-0">2:37 PM</h6>
</td>
<td>
<h6 class="m-0 text-c-red">Missed</h6>
</td>
<td class="text-right"><i class="fas fa-circle text-c-red f-10"></i></td>
</tr>
<tr>
<td>
<h6 class="m-0"><img class="rounded-circle m-r-10" style="width:40px;" src="assets/images/user/avatar-3.jpg" alt="activity-user">Silje Larsen</h6>
</td>
<td>
<h6 class="m-0">Dog the quick brown</h6>
</td>
<td>
<h6 class="m-0">10:23 AM</h6>
</td>
<td>
<h6 class="m-0 text-c-purple">Delayed</h6>
</td>
<td class="text-right"><i class="fas fa-circle text-c-purple f-10"></i></td>
</tr>
<tr>
<td>
<h6 class="m-0"><img class="rounded-circle m-r-10" style="width:40px;" src="assets/images/user/avatar-1.jpg" alt="activity-user">Ida Jorgensen</h6>
</td>
<td>
<h6 class="m-0">The quick brown fox</h6>
</td>
<td>
<h6 class="m-0">4:28 PM</h6>
</td>
<td>
<h6 class="m-0 text-c-green">Done</h6>
</td>
<td class="text-right"><i class="fas fa-circle text-c-green f-10"></i></td>
</tr>
</tbody>
</table>
</div>
<div class="tab-pane fade active show" id="profile" role="tabpanel" aria-labelledby="profile-tab">
<table class="table table-hover">
<thead>
<tr>
<th>User</th>
<th>Activity</th>
<th>Time</th>
<th>Status</th>
<th class="text-right"></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h6 class="m-0"><img class="rounded-circle m-r-10" style="width:40px;" src="assets/images/user/avatar-2.jpg" alt="activity-user">Albert Andersen</h6>
</td>
<td>
<h6 class="m-0">Jumps over the lazy</h6>
</td>
<td>
<h6 class="m-0">2:37 PM</h6>
</td>
<td>
<h6 class="m-0 text-c-red">Missed</h6>
</td>
<td class="text-right"><i class="fas fa-circle text-c-red f-10"></i></td>
</tr>
<tr>
<td>
<h6 class="m-0"><img class="rounded-circle m-r-10" style="width:40px;" src="assets/images/user/avatar-1.jpg" alt="activity-user">Ida Jorgensen</h6>
</td>
<td>
<h6 class="m-0">The quick brown fox</h6>
</td>
<td>
<h6 class="m-0">3:28 PM</h6>
</td>
<td>
<h6 class="m-0 text-c-green">Done</h6>
</td>
<td class="text-right"><i class="fas fa-circle text-c-green f-10"></i></td>
</tr>
<tr>
<td>
<h6 class="m-0"><img class="rounded-circle m-r-10" style="width:40px;" src="assets/images/user/avatar-1.jpg" alt="activity-user">Ida Jorgensen</h6>
</td>
<td>
<h6 class="m-0">The quick brown fox</h6>
</td>
<td>
<h6 class="m-0">4:28 PM</h6>
</td>
<td>
<h6 class="m-0 text-c-green">Done</h6>
</td>
<td class="text-right"><i class="fas fa-circle text-c-green f-10"></i></td>
</tr>
<tr>
<td>
<h6 class="m-0"><img class="rounded-circle m-r-10" style="width:40px;" src="assets/images/user/avatar-3.jpg" alt="activity-user">Silje Larsen</h6>
</td>
<td>
<h6 class="m-0">Dog the quick brown</h6>
</td>
<td>
<h6 class="m-0">10:23 AM</h6>
</td>
<td>
<h6 class="m-0 text-c-purple">Delayed</h6>
</td>
<td class="text-right"><i class="fas fa-circle text-c-purple f-10"></i></td>
</tr>
</tbody>
</table>
</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
<table class="table table-hover">
<thead>
<tr>
<th>User</th>
<th>Activity</th>
<th>Time</th>
<th>Status</th>
<th class="text-right"></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h6 class="m-0"><img class="rounded-circle m-r-10" style="width:40px;" src="assets/images/user/avatar-3.jpg" alt="activity-user">Silje Larsen</h6>
</td>
<td>
<h6 class="m-0">Dog the quick brown</h6>
</td>
<td>
<h6 class="m-0">10:23 AM</h6>
</td>
<td>
<h6 class="m-0 text-c-purple">Delayed</h6>
</td>
<td class="text-right"><i class="fas fa-circle text-c-purple f-10"></i></td>
</tr>
<tr>
<td>
<h6 class="m-0"><img class="rounded-circle m-r-10" style="width:40px;" src="assets/images/user/avatar-1.jpg" alt="activity-user">Ida Jorgensen</h6>
</td>
<td>
<h6 class="m-0">The quick brown fox</h6>
</td>
<td>
<h6 class="m-0">3:28 PM</h6>
</td>
<td>
<h6 class="m-0 text-c-green">Done</h6>
</td>
<td class="text-right"><i class="fas fa-circle text-c-green f-10"></i></td>
</tr>
<tr>
<td>
<h6 class="m-0"><img class="rounded-circle m-r-10" style="width:40px;" src="assets/images/user/avatar-2.jpg" alt="activity-user">Albert Andersen</h6>
</td>
<td>
<h6 class="m-0">Jumps over the lazy</h6>
</td>
<td>
<h6 class="m-0">2:37 PM</h6>
</td>
<td>
<h6 class="m-0 text-c-red">Missed</h6>
</td>
<td class="text-right"><i class="fas fa-circle text-c-red f-10"></i></td>
</tr>
<tr>
<td>
<h6 class="m-0"><img class="rounded-circle m-r-10" style="width:40px;" src="assets/images/user/avatar-1.jpg" alt="activity-user">Ida Jorgensen</h6>
</td>
<td>
<h6 class="m-0">The quick brown fox</h6>
</td>
<td>
<h6 class="m-0">4:28 PM</h6>
</td>
<td>
<h6 class="m-0 text-c-green">Done</h6>
</td>
<td class="text-right"><i class="fas fa-circle text-c-green f-10"></i></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- [ Main Content ] end -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- [ Main Content ] end -->
@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
<!DOCTYPE html>
<html lang="en">
<head>
<title>soengsouy.com</title>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="Datta Able Bootstrap admin template made using Bootstrap 4 and it has huge amount of ready made feature, UI components, pages which completely fulfills any dashboard needs." />
<meta name="keywords" content="admin templates, bootstrap admin templates, bootstrap 4, dashboard, dashboard templets, sass admin templets, html admin templates, responsive, bootstrap admin templates free download,premium bootstrap admin templates, datta able, datta able bootstrap admin template, free admin theme, free dashboard template"/>
<meta name="author" content="CodedThemes"/>
<!-- Favicon icon -->
<link rel="icon" href="{{URL::to('assets/images/favicon.ico')}}" type="image/x-icon">
<!-- fontawesome icon -->
<link rel="stylesheet" href="{{URL::to('assets/fonts/fontawesome/css/fontawesome-all.min.css')}}">
<!-- animation css -->
<link rel="stylesheet" href="{{URL::to('assets/plugins/animation/css/animate.min.css')}}">
<!-- vendor css -->
<link rel="stylesheet" href="{{URL::to('assets/css/style.css')}}">
</head>
<body>
<div class="auth-wrapper">
<div class="auth-content">
<div class="auth-bg">
<span class="r"></span>
<span class="r s"></span>
<span class="r s"></span>
<span class="r"></span>
</div>
<form method="POST" action="{{ route('register') }}" class="md-float-material form-material">
@csrf
<div class="card">
<div class="card-body text-center">
<div class="mb-4">
<i class="feather icon-user-plus auth-icon"></i>
</div>
<h3 class="mb-4">Sign up</h3>
<div class="input-group mb-3">
<input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ old('name') }}" autocomplete="name" autofocus placeholder="Username">
@error('name')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="input-group mb-3">
<input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" autocomplete="email" placeholder="Enter email">
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="input-group mb-4">
<input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" autocomplete="new-password" placeholder="Enter password">
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="input-group mb-4">
<input id="password-confirm" type="password" class="form-control" name="password_confirmation" autocomplete="new-password" placeholder="Password confirmation">
</div>
<div class="form-group text-left">
<div class="checkbox checkbox-fill d-inline">
<input type="checkbox" name="checkbox-fill-2" id="checkbox-fill-2">
<label for="checkbox-fill-2" class="cr">Send me the <a href="#!"> Newsletter</a> weekly.</label>
</div>
</div>
<button type="submit" class="btn btn-primary shadow-2 mb-4">Sign up</button>
<p class="mb-0 text-muted">Allready have an account? <a href="{{ route('login') }}"> Log in</a></p>
</div>
</div>
</form>
</div>
</div>
<!-- Required Js -->
<script src="{{URL::to('assets/js/vendor-all.min.js')}}"></script>
<script src="a{{URL::to('ssets/plugins/bootstrap/js/bootstrap.min.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')
<!-- Pre-loader end -->
<section class="login-block">
<!-- Container-fluid starts -->
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<!-- Authentication card start -->
<form method="POST" action="{{ route('login') }}" class="md-float-material form-material">
@csrf
<div class="text-center">
<img src="{{URL::to('assets/files/assets/images/logo.png')}}" alt="logo.png">
</div>
<div class="auth-box card">
<div class="card-block">
<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
<p class="text-muted text-center p-b-5">Sign in with your regular account</p>
<div class="form-group form-primary">
<input id="email" type="email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" autocomplete="email" autofocus placeholder="Enter email">
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
<span class="form-bar"></span>
</div>
<div class="form-group form-primary">
<input id="password" type="password" class="form-control @error('password') is-invalid @enderror" name="password" autocomplete="current-password" placeholder="Enter password">
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
<span class="form-bar"></span>
</div>
<div class="row m-t-25 text-left">
<div class="col-12">
<div class="checkbox-fade fade-in-primary">
<label>
<input type="checkbox" value="" name="remember" id="checkbox-fill-a1" {{ old('remember') ? 'checked' : '' }}>
<span class="cr"><i class="cr-icon icofont icofont-ui-check txt-success"></i></span>
<span class="text-inverse">Remember me</span>
</label>
</div>
<div class="forgot-phone text-right f-right">
<a href="{{ route('forget-password') }}" class="text-right f-w-600"> Forgot Password?</a>
</div>
</div>
</div>
<div class="row m-t-20">
<div class="col-md-6">
<button class="btn btn-facebook m-b-20 btn-block"><i class="icofont icofont-social-facebook"></i>facebook</button>
</div>
<div class="col-md-6">
<button class="btn btn-twitter m-b-20 btn-block"><i class="icofont icofont-social-twitter"></i>twitter</button>
</div>
</div>
<div class="row m-t-25">
<div class="col-md-12">
<button type="submit" class="btn btn-inverse btn-square btn-block waves-effect text-center m-b-20">Sign In</button>
</div>
</div>
<p class="text-inverse text-left">Don't have an account?<a href="{{route('register')}}"> <b class="f-w-600">Register here </b></a>for free!</p>
</div>
</div>
</fom>
<!-- end of form -->
</div>
<!-- Authentication card end -->
</div>
<!-- end of col-sm-12 -->
</div>
<!-- end of row -->
<!-- end of container-fluid -->
</section>
<!-- Warning Section Starts -->
@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/template_job_search/public/
0 Comments
CAN FEEDBACK
Emoji