Download Laravel App
composer create-project --prefer-dist laravel/laravel my-app
C:\xampp\htdocs\laravel>composer create-project --prefer-dist laravel/laravel my-app
Connecting our Database
open .env file root directory.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laraveldb
DB_USERNAME=root
DB_PASSWORD=
Create Controller AuthController
php artisan make:controller Admin/AuthController
C:\xampp\htdocs\laravel\my-app>php artisan make:controller Admin/AuthController
app\Http\Controllers\Admin\AuthController.php
//app\Http\Controllers\Admin\AuthController.php
<?php
namespace App\Http\Controllers\Admin;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Hash;
class AuthController extends Controller
{
public function getLogin(){
$pass = "123456";
$passhash = Hash::make($pass);
echo $passhash;
return view('admin.auth.login');
}
public function postLogin(Request $request){
$request->validate([
'email'=>'required|email',
'password'=>'required'
]);
$validated=auth()->attempt([
'email'=>$request->email,
'password'=>$request->password,
'is_admin'=>1
],$request->password);
if($validated){
return redirect()->route('dashboard')->with('success','Login Successfull');
}else{
return redirect()->back()->with('error','Invalid credentials');
}
}
}
Create Controller Admin/ProfileController php artisan make:controller Admin/ProfileController
C:\xampp\htdocs\laravel\my-app>php artisan make:controller Admin/ProfileController
app\Http\Controllers\Admin\ProfileController.php
//app\Http\Controllers\Admin\ProfileController.php
<?php
namespace App\Http\Controllers\Admin;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
class ProfileController extends Controller
{
public function dashboard(){
$data=[
'title'=>'Dashboard'
];
return view('admin.dashboard',$data);
}
public function logout(){
auth()->logout();
return redirect()->route('getLogin')->with('success','You have been successfully logged out');
}
}
Create Controller Admin/UserController php artisan make:controller Admin/UserController
C:\xampp\htdocs\laravel\my-app>php artisan make:controller Admin/UserController
app\Http\Controllers\Admin\UserController.php
//app\Http\Controllers\Admin\UserController.php
<?php
namespace App\Http\Controllers\Admin;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
class UserController extends Controller
{
public function index(){
$data=[
'title'=>'Users'
];
return view('admin.users.index',$data);
}
}
Database Migration database/migrations/create_users_table.php
//database/migrations/create_users_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
public function up()
{
Schema::create('users', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('email')->unique();
$table->timestamp('email_verified_at')->nullable();
$table->string('password');
$table->boolean('is_admin')->default(false); //add is_admin boolean
$table->rememberToken();
$table->timestamps();
});
}
public function down()
{
Schema::dropIfExists('users');
}
};
run this migration C:\xampp\htdocs\laravel\my-app>php artisan migrate
SB Admin 2
https://startbootstrap.com/theme/sb-admin-2
A free Bootstrap 4 admin theme built with HTML/CSS and a modern development workflow environment ready to use to build your next dashboard or web application
create folder name admin resources/views/admin
resources/views/main-layout.blade.php
//resources/views/main-layout.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Admin Panel {{isset($title)?'| '.$title:''}}</title>
<!-- Custom fonts for this template-->
<link href="{{asset('admin_assets/vendor/fontawesome-free/css/all.min.css')}}" rel="stylesheet" type="text/css">
<link
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
rel="stylesheet">
<!-- Custom styles for this template-->
<link href="{{asset('admin_assets/css/sb-admin-2.min.css')}}" rel="stylesheet">
</head>
<body id="page-top">
<!-- Page Wrapper -->
<div id="wrapper">
@include('admin.partials.left-sidebar')
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">
<!-- Main Content -->
<div id="content">
@yield('content-header')
<!-- Begin Page Content -->
<div class="container-fluid">
@yield('body')
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
<!-- Footer -->
<footer class="sticky-footer bg-white">
<div class="container my-auto">
<div class="copyright text-center my-auto">
<span>Copyright © Your Website 2021</span>
</div>
</div>
</footer>
<!-- End of Footer -->
</div>
<!-- End of Content Wrapper -->
</div>
<!-- End of Page Wrapper -->
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fas fa-angle-up"></i>
</a>
<!-- Logout Modal-->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="{{route('logout')}}">Logout</a>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="{{asset('admin_assets/vendor/jquery/jquery.min.js')}}"></script>
<script src="{{asset('admin_assets/vendor/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
<!-- Core plugin JavaScript-->
<script src="{{asset('admin_assets/vendor/jquery-easing/jquery.easing.min.js')}}"></script>
<!-- Custom scripts for all pages-->
<script src="{{asset('admin_assets/js/sb-admin-2.min.js')}}"></script>
<!-- Page level plugins -->
<script src="{{asset('admin_assets/vendor/chart.js/Chart.min.js')}}"></script>
<!-- Page level custom scripts -->
<script src="{{asset('admin_assets/js/demo/chart-area-demo.js')}}"></script>
<script src="{{asset('admin_assets/js/demo/chart-pie-demo.js')}}"></script>
</body>
</html>
Create folder admin_assets public/admin_assets copy css, img, scss,vendor folder from downloaded bootstrap admin templates resources/views/admin/dashboard.blade.php
//resources/views/admin/dashboard.blade.php
@extends('admin.main-layout')
@section('content-header')
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
<!-- Sidebar Toggle (Topbar) -->
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
<i class="fa fa-bars"></i>
</button>
<!-- Topbar Search -->
<form
class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
<div class="input-group">
<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..."
aria-label="Search" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-primary" type="button">
<i class="fas fa-search fa-sm"></i>
</button>
</div>
</div>
</form>
<ul class="navbar-nav ml-auto">
<div class="topbar-divider d-none d-sm-block"></div>
<!-- Nav Item - User Information -->
<li class="nav-item dropdown no-arrow">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="mr-2 d-none d-lg-inline text-gray-600 small">Douglas McGee</span>
<img class="img-profile rounded-circle"
src="{{asset('admin_assets/img/undraw_profile.svg')}}">
</a>
<!-- Dropdown - User Information -->
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in"
aria-labelledby="userDropdown">
<a class="dropdown-item" href="#">
<i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
Profile
</a>
<a class="dropdown-item" href="#">
<i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
Settings
</a>
<a class="dropdown-item" href="#">
<i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
Activity Log
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
Logout
</a>
</div>
</li>
</ul>
</nav>
<!-- /.content-header -->
@endsection
@section('body')
<!-- Main row -->
<div class="row">
<div class="container-fluid">
Dashboard
</div>
</div>
<!-- /.row (main row) -->
@endsection
create folder auth under admin folder resources/views/admin/auth/login.blade.php
//resources/views/admin/auth/login.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin 2 - Login</title>
<!-- Custom fonts for this template-->
<link href="{{asset('admin_assets/vendor/fontawesome-free/css/all.min.css')}}" rel="stylesheet" type="text/css">
<link
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
rel="stylesheet">
<!-- Custom styles for this template-->
<link href="{{asset('admin_assets/css/sb-admin-2.min.css')}}" rel="stylesheet">
</head>
<body class="bg-gradient-primary">
<div class="container">
<!-- Outer Row -->
<div class="row justify-content-center">
<div class="col-xl-10 col-lg-12 col-md-9">
<div class="card o-hidden border-0 shadow-lg my-5">
<div class="card-body p-0">
<!-- Nested Row within Card Body -->
<div class="row">
<div class="col-lg-6 d-none d-lg-block bg-login-image"></div>
<div class="col-lg-6">
<div class="p-5">
<div class="text-center">
@if(session('error'))
<div class="text-danger text-center">{{session('error')}}</div>
@endif
@if(session('success'))
<div class="text-success text-center">{{session('success')}}</div>
@endif
<p class="login-box-msg">Sign in to start your session</p>
</div>
<form class="user" action="{{route('postLogin')}}" method="post">
@csrf
<div class="form-group">
<input name="email" type="email" class="form-control form-control-user"
id="exampleInputEmail" aria-describedby="emailHelp"
placeholder="Enter Email Address...">
@error('email')
<div class="text-danger">{{$message}}</div>
@enderror
</div>
<div class="form-group">
<input name="password" type="password" class="form-control form-control-user"
id="exampleInputPassword" placeholder="Password">
@error('password')
<div class="text-danger">{{$message}}</div>
@enderror
</div>
<div class="form-group">
<div class="custom-control custom-checkbox small">
<input type="checkbox" class="custom-control-input" id="customCheck">
<label class="custom-control-label" for="customCheck">Remember
Me</label>
</div>
</div>
<button type="submit" class="btn btn-primary btn-user btn-block">Sign In</button>
<hr>
<a href="index.html" class="btn btn-google btn-user btn-block">
<i class="fab fa-google fa-fw"></i> Login with Google
</a>
<a href="index.html" class="btn btn-facebook btn-user btn-block">
<i class="fab fa-facebook-f fa-fw"></i> Login with Facebook
</a>
</form>
<hr>
<div class="text-center">
<a class="small" href="forgot-password.html">Forgot Password?</a>
</div>
<div class="text-center">
<a class="small" href="register.html">Create an Account!</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="{{asset('admin_assets/vendor/jquery/jquery.min.js')}}"></script>
<script src="{{asset('admin_assets/vendor/bootstrap/js/bootstrap.bundle.min.js')}}"></script>
<!-- Core plugin JavaScript-->
<script src="{{asset('admin_assets/vendor/jquery-easing/jquery.easing.min.js')}}"></script>
<!-- Custom scripts for all pages-->
<script src="{{asset('admin_assets/js/sb-admin-2.min.js')}}"></script>
</body>
</html>
create folder users under admin folder resources/views/admin/users/index.blade.php
//resources/views/admin/users/index.blade.php
@extends('admin.main-layout')
@section('content-header')
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
<!-- Sidebar Toggle (Topbar) -->
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
<i class="fa fa-bars"></i>
</button>
<!-- Topbar Search -->
<form
class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
<div class="input-group">
<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..."
aria-label="Search" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-primary" type="button">
<i class="fas fa-search fa-sm"></i>
</button>
</div>
</div>
</form>
<ul class="navbar-nav ml-auto">
<div class="topbar-divider d-none d-sm-block"></div>
<!-- Nav Item - User Information -->
<li class="nav-item dropdown no-arrow">
<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="mr-2 d-none d-lg-inline text-gray-600 small">Douglas McGee</span>
<img class="img-profile rounded-circle"
src="{{asset('admin_assets/img/undraw_profile.svg')}}">
</a>
<!-- Dropdown - User Information -->
<div class="dropdown-menu dropdown-menu-right shadow animated--grow-in"
aria-labelledby="userDropdown">
<a class="dropdown-item" href="#">
<i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
Profile
</a>
<a class="dropdown-item" href="#">
<i class="fas fa-cogs fa-sm fa-fw mr-2 text-gray-400"></i>
Settings
</a>
<a class="dropdown-item" href="#">
<i class="fas fa-list fa-sm fa-fw mr-2 text-gray-400"></i>
Activity Log
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
<i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
Logout
</a>
</div>
</li>
</ul>
</nav>
<!-- /.content-header -->
@endsection
@section('body')
<!-- Main row -->
<div class="row">
<div class="container-fluid">
Users List
</div>
</div>
<!-- /.row (main row) -->
@endsection
create folder partials under admin folder resources/views/admin/partials/left-sidebar.blade.php
//resources/views/admin/partials/left-sidebar.blade.php
@php
$current_route=request()->route()->getName();
@endphp
<!-- Main Sidebar Container -->
<!-- Sidebar -->
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
<!-- Sidebar - Brand -->
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="index.html">
<div class="sidebar-brand-icon rotate-n-15">
<i class="fas fa-laugh-wink"></i>
</div>
<div class="sidebar-brand-text mx-3">{{auth()->user()->name}}</div>
</a>
<!-- Divider -->
<hr class="sidebar-divider my-0">
<!-- Nav Item - Dashboard -->
<li class="nav-item active">
<a href="{{route('dashboard')}}" class="nav-link {{$current_route=='dashboard'?'active':''}}">
<i class="fas fa-fw fa-tachometer-alt"></i>
<span>Dashboard</span></a>
</li>
<!-- Divider -->
<hr class="sidebar-divider">
<!-- Heading -->
<div class="sidebar-heading">
User Management
</div>
<li class="nav-item">
<a href="{{route('users.index')}}" class="nav-link {{$current_route=='users.index'?'active':''}}">
<i class="fas fa-fw fa-table"></i>
<span>Users</span></a>
</li>
</ul>
<!-- End of Sidebar -->
create file AdminAuth.php app/Http/Middleware/AdminAuth.php
//app/Http/Middleware/AdminAuth.php
<?php
namespace App\Http\Middleware;
use Closure;
use Illuminate\Http\Request;
class AdminAuth
{
/**
* Handle an incoming request.
*
* @param \Illuminate\Http\Request $request
* @param \Closure(\Illuminate\Http\Request): (\Illuminate\Http\Response|\Illuminate\Http\RedirectResponse) $next
* @return \Illuminate\Http\Response|\Illuminate\Http\RedirectResponse
*/
public function handle(Request $request, Closure $next)
{
if(auth()->check()){
if(!auth()->user()->is_admin){
return redirect()->route('getLogin')->with('error','You have to be admin user to access this page');
}
}else{
return redirect()->route('getLogin')->with('error','You have to be logged in to access this page');
}
return $next($request);
}
}
Add AdminAuth.php to routeMiddlewareapp/Http/Kernel.php
Add AdminAuth::class
protected $routeMiddleware = [
'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
'admin_auth' => \App\Http\Middleware\AdminAuth::class,
];
Routes
routes/web.php
//routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\Admin\{AuthController,ProfileController,UserController};
Route::get('/', function () {
return view('welcome');
});
Route::get('/admin/login',[AuthController::class,'getLogin'])->name('getLogin');
Route::post('/admin/login',[AuthController::class,'postLogin'])->name('postLogin');
Route::group(['middleware'=>['admin_auth']],function(){
Route::get('/admin/dashboard',[ProfileController::class,'dashboard'])->name('dashboard');
Route::get('/admin/users',[UserController::class,'index'])->name('users.index');
Route::get('/admin/logout',[ProfileController::class,'logout'])->name('logout');
});
Run C:\xampp\htdocs\laravel\my-app>php artisan serve Starting Laravel development server: http://127.0.0.1:8000
