Thankfully, the admin dashboard provides a very simple login form that helps
users easily log in to the system with their registered email and password. If
you want to change the login form code with Laravel's default form code, just
write the following code in the login.
First, install a new Laravel app just by running the below command in your terminal.
.png)
After that update your database credentials in your .env file which is located in your project root.
MAIL_DRIVER=smtp MAIL_HOST=smtp.gmail.com MAIL_PORT=587 MAIL_USERNAME=your email MAIL_PASSWORD='your password email' MAIL_ENCRYPTION=tls
After adding the migration file now run the migrate command.
Add the below code in your home.blade.php file.
Resources/Views/home.blade.php
Resources/Views/passwords/Auth/register.blade.php
Resources/Views/passwords/Auth/login.blade.php
app/routes/web.php
After successfully updating all run the development server just adds the below command in the terminal.
After this go to the browser and check using the login page.
 |
| Admin dashboard in Laravel | Sign up and Sign in V13 |
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 by running the below command in your terminal.
composer create-project --prefer-dist laravel/laravel laravel_dashboard_version13
.png)
Step 2: Update Your Database Credentials
After that update your database credentials in your .env file which is located in your project root.
1. connection databases
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=your_db
DB_USERNAME=root
DB_PASSWORD=#your database password2. for send mail when fogot password
MAIL_DRIVER=smtp MAIL_HOST=smtp.gmail.com MAIL_PORT=587 MAIL_USERNAME=your email MAIL_PASSWORD='your password email' MAIL_ENCRYPTION=tls
Step 3: Make Migration
After adding the migration file now run the migrate command.
php artisan migrate
Step 4: Add in Home Page
Add the below code in your home.blade.php file.
Resources/Views/home.blade.php
@extends ('layouts.master')
@section ('menu')
@extends ('sidebar.dashboard')
@endsection
@section ('content')
<div id = "main">
<header class = "mb-3 ">
<a href="#" class="burger-btn d-block d-xl-none">
<i class =" bi bi-justify fs-3 "> </i>
</a>
</ header >
<div class = "page-header">
<h3> Thống kê Tiểu sử </h3>
</div>
<div class = "page-content">
<section class = "row">
<div class = "col-12 col-lg-9 ">
<div class = "row">
<div class = "col-6 col-lg-3 col-md-6">
<div class = "card">
<div class = "card-body px-3 py-4-5">
<div class = "row">
<div class = "col-md-4">
<div class = "stats-icon Purple">
< i class = "iconly-boldShow"> </i>
</div>
</div>
<div class = "col-md-8">
<h6 class = "text-muted font-semibold"> Lượt xem hồ sơ </ h6>
<h6 class = "font-extrabold mb-0"> 112.000 </h6>
</div>
</div>
</div>
</div>
</div>
<div class = "col-6 col-lg-3 col-md-6">
<div class = "card">
<div class = "card -body px-3 py-4-5 ">
<div class =" row ">
<div class =" col-md-4 ">
<div class =" stats-icon blue ">
<i class =" iconly- boldProfile "> </i>
</div>
</div>
<div class = "col-md-8">
<h6 class = "text-muted font-semibold"> Người theo dõi </h6>
<h6 class = "font-extrabold mb-0"> 183.000 </h6>
</ div>
</div>
</div>
</div>
</div>
<div class = "col-6 col-lg-3 col-md-6">
<div class = "card">
<div class = "card-body px-3 py-4-5">
<div class = "row">
<div class = "col-md-4">
<div class = "stats-icon green">
<i class = "iconly-boldAdd-User"> </i>
</div>
</div>
<div class = "col-md-8">
<h6 class = "text-muted font-semibold"> Đang theo dõi </h6>
<h6 class = "font-extrabold mb-0"> 80.000 </h6>
</div>
</div>
</div>
</div>
</div>
<div class = "col-6 col-lg-3 col-md-6">
<div class = "card">
<div class = "card-body px-3 py-4-5">
<div class = "row">
<div class = "col-md-4">
<div class = "stats-icon red">
<i class = "iconly-boldBookmark"> </i>
</div>
</div>
< div class = "col-md-8">
<h6 class = "text-muted font-semibold"> Bài đăng đã Lưu </h6>
<h6 class = "font-extrabold mb-0"> 112 </h6>
</div>
</div>
</div>
</div>
</div>
</div>
<div class = "row">
<div class = "col-12">
<div class = "card">
<div class = "card-header">
<h4> Truy cập hồ sơ </h4>
</div>
<div class = "card-body">
<div id = "chart-profile-visit"> </div>
</div>
</div>
</div>
</div>
<div class = "row">
<div class = "col-12 col-xl-4">
<div class = "card">
<div class = "card-header">
<h4> Lượt truy cập hồ sơ </h4>
</div>
<div class = "card-body">
<div class = "row">
<div class = "col-6">
<div class = "d-flex align-items-center">
<svg class = "bi text-primary" width = "32" height = "32" fill = "blue"
style = "width: 10px">
<sử dụng
xlink: href = "asset / provider / bootstrap-icon / bootstrap- icon.svg # circle-fill "/>
</svg>
<h5 class =" mb-0 ms-3 "> Châu Âu </h5>
</div>
</div>
<div class =" col-6 ">
<h5 class = "mb-0"> 862 </h5>
</div>
<div class = "col-12">
<div id = "chart-europe"> </div>
</div>
</div>
<div class = "row">
<div class = "col -6 ">
<div class =" d-flex align-items-center ">
<svg class =" bi text-success "width =" 32 "height =" 32 "fill =" blue "
style ="width: 10px ">
<sử dụng
xlink: href = "asset / provider / bootstrap-icon / bootstrap-icon.svg # circle-fill" />
</svg>
<h5 class = "mb-0 ms-3"> Mỹ </h5>
</ div >
</div>
<div class = "col-6">
<h5 class = "mb-0"> 375 </h5>
</div>
<div class = "col-12">
<div id = "chart-america "> </div>
</div>
</div>
<div class = "row">
<div class = "col-6">
<div class = "d-flex align-items-center">
<svg class = "bi text-risk" width = " 32 "height =" 32 "fill =" blue "
style =" width: 10px ">
<use
xlink: href =" property / nhà cung cấp / bootstrap-icon / bootstrap-icon.svg # circle-fill "/>
</ svg>
<h5 class = "mb-0 ms-3"> Indonesia </h5>
</div>
</div>
<div class = "col-6">
<h5 class = "mb-0"> 1025 </h5>
</div>
<div class = "col-12">
<div id = "chart-indonesia"> </div>
</div>
</div>
</div>
</div>
</div>
<div class = "col-12 col-xl-8">
<div class = "card">
<div class = "card-header">
<h4> Nhận xét mới nhất </h4>
</div>
<div class = "card-body">
<div class = "table-responsive">
<table class = "table table -hover table-lg ">
<thead>
<tr>
<th> Tên </th>
<th> Nhận xét </th>
</tr>
</thead>
<tbody>
<tr>
<td class = "col-3">
<div class = "d-flex align-items-center">
<div class = "avatar avatar-md">
<img src = "asset / images /faces/5.jpg ">
</div>
<p class =" font-bold ms-3 mb-0 "> Si Cantik </p>
</div>
</td>
<td class = "col-auto">
<p class = "mb-0"> Chúc mừng bạn đã tốt nghiệp! </p>
</td>
</tr>
<tr>
<td class = "col-3">
<div class = "d-flex align-items-center">
<div class = "avatar avatar-md">
<img src = "tài sản / hình ảnh / khuôn mặt / 2.jpg ">
</div>
<p class = "font-bold ms-3 mb-0"> Si Ganteng </p>
</div>
</td>
<td class = "col-auto">
<p class = "mb -0 "> Wow thiết kế tuyệt vời! Bạn có thể thực hiện một
hướng dẫn khác cho
thiết kế này không? </p>
</td>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<div class = "col-12 col-lg-3">
<div class = "card">
<div class = "card-body py-4 px-5">
<div class = "d-flex align-items-center">
<div class = "avatar avatar-xl">
<img src = "nội dung / hình ảnh / khuôn mặt / 1.jpg "alt =" Khuôn mặt 1 ">
</div>
<div class = "ms-3 name">
<h5 class = "font-bold"> {{Auth :: user () -> name}} </h5>
<h6 class = "text-muted mb-0" > {{Auth :: user () -> email}} </h6>
</div>
</div>
</div>
</div>
<div class = "card">
<div class = "card-header ">
<h4> Tin nhắn Gần đây </h4>
</div>
<div class =" card-content pb-4 ">
<div class = "near-message d-flex px-4 py-3">
<div class = "avatar avatar-lg">
<img src = "asset / images / face / 4.jpg">
</div>
<div class = "name ms-4">
<h5 class = "mb-1 "> Hank Schrader </h5>
<h6 class =" text-muted mb-0 "> @ johnducky </h6>
</div>
</div>
<div class =" near-message d-flex px-4 py -3 ">
<div class =" avatar avatar-lg ">
<img src = "asset / images / face / 5.jpg">
</div>
<div class = "name ms-4">
<h5 class = "mb-1"> Dean Winchester </h5>
<h6 class = "text-muted mb-0"> @ imdean </h6>
</div>
</div>
<div class = "near-message d-flex px-4 py-3">
<div class = "avatar avatar-lg">
<img src = "asset / images / face / 1.jpg">
</div>
<div class = "name ms-4">
<h5 class = "mb-1 "> John Dodol </h5>
<h6 class =" text-muted mb-0 "> @ dodoljohn </h6>
</div>
</div>
<div class = "px-4">
<button class = 'btn btn-block btn-xl btn-light-primary font-bold mt-3'> Bắt đầu
cuộc trò chuyện </button>
< / div>
</div>
</div>
<div class = "card">
<div class = "card-header">
<h4> Hồ sơ khách truy cập </h4>
</div>
<div class = "card-body ">
<div id = "chart-tourist-profile"> </div>
</div>
</div>
</div>
</section>
</div>
<footer>
<div class = "footer clearfix mb-0 text-muted">
<div class = "float-start">
<p> 2021 & copy; Soeng Souy </p>
</div>
<div class = "float-end">
<p> Được tạo bằng <span class = "text-risk"> <i class = "bi bi-heart"> </i> </span> bởi <a
href="http://soengsouy.com"> Soeng Souy </a> </p>
</div>
</div>
</footer>Step 5: Add Button in Register Page
Add the below code in your register.blade.php file.Resources/Views/passwords/Auth/register.blade.php
@extends ('layouts.app')
@section ('content')
<div id = "auth">
<div class = "row h-100">
<div class = "col-lg-5 col-12">
<div id = "auth-left">
<div class = "auth-logo">
<a href="index.html"> <img src = "asset / images / logo / logo.png" alt = "Logo" > </a>
</div>
<h1 class = "auth-title"> Đăng ký </h1>
<p class = "auth-subtitle mb-5"> Nhập dữ liệu của bạn để đăng ký vào trang web của chúng tôi. </ p >
<form method = "POST" action = "{{route ('register')}}" class = "md-float-material">
@csrf
<div class = "form-group position-relative has-icon-left mb-4">
<input type = "text" class = "form-control form-control-lg @error ('name') is-không hợp lệ @ enderror "name =" name "value =" {{old ('name')}} "placeholder =" Enter Your Name ">
<div class =" form-control-icon ">
<i class =" bi bi-person "> </i>
</div>
@error ('name')
<span class =" invalid-feedback "role =" alert ">
<strong>{{$ message}} </strong>
</span>
@enderror
</div>
<div class = "form-group position-relative has-icon-left mb-4">
<input type = "text" class = "form-control form-control-lg @error ('email') is-invalid @enderror "name =" email "value =" {{old ('email')}} "placeholder =" Nhập Email của bạn ">
<div class =" form-control-icon ">
<i class =" bi bi-phong bì "> </i>
</div>
@error ('email')
<span class =" invalid-feedback "role =" alert ">
<strong> {{$ message}} </strong>
</span>
@enderror
</div>
<div class = "form-group position-relative has-icon-left mb-4">
<fieldset class = "form-group">
<select class = "form-select @error ('role_name ') is-không hợp lệ @enderror "name =" role_name "id =" role_name ">
<option đã bị vô hiệu hóa> Chọn tên vai trò </option>
<option value =" Admin "> Quản trị viên </option>
<option value =" Super Quản trị viên "> Quản trị viên cấp cao </option>
<option value = "Người dùng bình thường"> Người dùng bình thường </option>
</select>
<div class = "form-control-icon">
<i class = "bi bi -lude"> </i>
</div>
</fieldset>
@error ('role_name')
<span class = "invalid-feedback "role =" alert ">
<strong> {{$ message}} </strong>
</span>
@enderror
</div>
<div class =" form-group position-relative has-icon-left mb-4 " >
<input type = "password" class = "form-control form-control-lg @error ('password') is-invalid @enderror" name = "password" placeholder = "Choose Password">
<div class = "form- control-icon ">
<i class =" bi bi-Shield-lock "> </i>
</div>
@error ('password')
<span class =" invalid-feedback "role =" alert ">
<strong > {{$ message}} </strong>
</span>
@enderror
</div>
<div class = "form-group position-relative has-icon-left mb-4">
<input type = "password" class = "form-control form-control-lg" name = "password_confirmation" placeholder = "Chọn Xác nhận Mật khẩu ">
<div class =" form-control-icon ">
<i class =" bi bi-Shield-check "> </i>
</div>
</div>
<button class =" btn btn-primary btn -block btn-lg shadow-lg mt-5 "> Đăng ký </button>
</form>
<div class ="text-center mt-5 text-lg fs-4 ">
<p class = 'text-gray-600'> Đã có tài khoản? <a href="{{ route('login') }}"
class="font-bold"> Đăng nhập </a>. </p>
</div>
</div>
</div>
<div class = "col-lg-7 d-none d-lg-block">
<div id = "auth-right">
</div>
</div>
</div>
</div>
@endsectionStep 6: Create RegisterController
php artisan make:controller RegisterController
<? php
namespace App \ Http \ Controllers \ Auth;
sử dụng App \ Http \ Controllers \ Controller;
sử dụng Illuminate \ Http \ Request;
sử dụng Ứng dụng \ Mô hình \ Người dùng;
sử dụng Hash;
class RegisterController mở rộng Controller
{
public function register ()
{
return view ('auth.register');
}
public function storeUser (Yêu cầu $ request)
{
$ request-> validate ([
'name' => 'required | string | max: 255',
'email' => 'required | string | email | max: 255 | unique: người dùng ',
' role_name '=>' bắt buộc | string | max: 255 ',
' password '=>'
'password_confirmation' => 'bắt buộc',
]);
Người dùng :: create ([
'name' => $ request-> name,
'email' => $ request-> email,
'role_name' => $ request-> role_name,
'password' => Hash :: make ($ yêu cầu-> mật khẩu),
]);
return redirect ('đăng nhập');
}
}Step 7: Create LoginController
php artisan make:controller LoginController
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use App\Providers\RouteServiceProvider;
use Illuminate\Foundation\Auth\AuthenticatesUsers;
use Illuminate\Http\Request;
use Auth;
class LoginController extends Controller
{
/*
|--------------------------------------------------------------------------
| Login Controller
|--------------------------------------------------------------------------
|
| This controller handles authenticating users for the application and
| redirecting them to your home screen. The controller uses a trait
| to conveniently provide its functionality to your applications.
|
*/
use AuthenticatesUsers;
/**
* Where to redirect users after login.
*
* @var string
*/
protected $redirectTo = RouteServiceProvider::HOME;
/**
* Create a new controller instance.
*
* @return void
*/
public function __construct()
{
$this->middleware('guest')->except('logout');
}
public function login()
{
return view('auth.login');
}
public function authenticate(Request $request)
{
$request->validate([
'email' => 'required|string|email',
'password' => 'required|string',
]);
$credentials = $request->only('email', 'password');
if (Auth::attempt($credentials)) {
return redirect()->intended('home');
}
return redirect('login')->with('error', 'Oppose! You have entered invalid credentials');
}
public function logout()
{
Auth::logout();
return redirect('login');
}
}Step 8: Add Button in Login Page
Add the below code in your login.blade.php file.Resources/Views/passwords/Auth/login.blade.php
@extends('layouts.app')
@section('content')
<div id="auth">
<div class="row h-100">
<div class="col-lg-5 col-12">
<div id="auth-left">
<div class="auth-logo">
<a href="index.html"><img src="assets/images/logo/logo.png" alt="Logo"></a>
</div>
<h1 class="auth-title">Log in.</h1>
<p class="auth-subtitle mb-5">Log in with your data that you entered during registration.</p>
@if(session()->has('error'))
<div class="text-danger text-center text-bold">
{{ session()->get('error') }}
</div>
@endif
<br>
<form method="POST" action="{{ route('login') }}" class="md-float-material">
@csrf
<div class="form-group position-relative has-icon-left mb-4">
<input type="text" class="form-control form-control-lg @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" placeholder="Enter email">
<div class="form-control-icon">
<i class="bi bi-person"></i>
</div>
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="form-group position-relative has-icon-left mb-4">
<input type="password" class="form-control form-control-lg @error('password') is-invalid @enderror" name="password" placeholder="Enter Password">
<div class="form-control-icon">
<i class="bi bi-shield-lock"></i>
</div>
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="form-check form-check-lg d-flex align-items-end">
<input class="form-check-input me-2" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label text-gray-600" for="flexCheckDefault">
Keep me logged in
</label>
</div>
<button class="btn btn-primary btn-block btn-lg shadow-lg mt-5">Log in</button>
</form>
<div class="text-center mt-5 text-lg fs-4">
<p class="text-gray-600">Don't have an account? <a href="{{route('register')}}"
class="font-bold">Sign
up</a>.</p>
<p><a class="font-bold" href="{{ route('forget-password') }}">Forgot password?</a>.</p>
</div>
</div>
</div>
<div class="col-lg-7 d-none d-lg-block">
<div id="auth-right">
</div>
</div>
</div>
</div>
@endsectionStep 9: Add Routes
In this step we create routes for Facebook login, add two routes in your web.php file.app/routes/web.php
<pre class='js'><code><?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');
</code></pre>Step 10: Run Development Server
After successfully updating all run the development server just adds the below command in the terminal.
php artisan serve
After this go to the browser and check using the login page.
http://localhost/laravel_dashboard_version13/public/
https://github.com/vkhai2603/vkhai2603-Admin-dashboard-in-Laravel-Sign-up-and-Sign-in-V13
Design by @KiMiDev
