Admin dashboard in Laravel 9 | Login and Register
How to install Laravel 9
In this post, we'll show you how to install Laravel 9. Before you can install the latest version of Laravel, make sure you have the following prerequisites:
PHP 8.0.2+
MySql
Composer
Composer is a package manager for php.
PHP 8.0.2+
MySql
Composer
Composer is a package manager for php.
First, install a new Laravel app by running the below command in your terminal.
composer create-project --prefer-dist laravel/laravel laravel9_template_sample
Step 1:Install UI
1. composer require laravel/ui
2. php artisan ui vue --auth
Step 2: Update Your Database Credentials
After that update your database credentials in your .env file 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 password
2. 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
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: Route
routes/web.blade.php.
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\Auth\LoginController;
use App\Http\Controllers\Auth\RegisterController;
use App\Http\Controllers\Auth\ForgotPasswordController;
use App\Http\Controllers\ResetPasswordController;
use App\Http\Controllers\HomeController;
/*
|--------------------------------------------------------------------------
| 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');
});
Route::group(['middleware'=>'auth'],function()
{
Route::get('home',function()
{
return view('home');
});
Route::get('home',function()
{
return view('home');
});
});
Auth::routes();
// -----------------------------login-------------------------------//
Route::controller(LoginController::class)->group(function () {
Route::get('/login', 'login')->name('login');
Route::post('/login', 'authenticate');
Route::get('/logout', 'logout')->name('logout');
});
// ------------------------------ register ---------------------------------//
Route::controller(RegisterController::class)->group(function () {
Route::get('/register', 'register')->name('register');
Route::post('/register','storeUser')->name('register');
});
// -------------------------- main dashboard ----------------------//
Route::controller(HomeController::class)->group(function () {
Route::get('/home', 'index')->name('home');
});
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\Auth\LoginController;
use App\Http\Controllers\Auth\RegisterController;
use App\Http\Controllers\Auth\ForgotPasswordController;
use App\Http\Controllers\ResetPasswordController;
use App\Http\Controllers\HomeController;
/*
|--------------------------------------------------------------------------
| 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');
});
Route::group(['middleware'=>'auth'],function()
{
Route::get('home',function()
{
return view('home');
});
Route::get('home',function()
{
return view('home');
});
});
Auth::routes();
// -----------------------------login-------------------------------//
Route::controller(LoginController::class)->group(function () {
Route::get('/login', 'login')->name('login');
Route::post('/login', 'authenticate');
Route::get('/logout', 'logout')->name('logout');
});
// ------------------------------ register ---------------------------------//
Route::controller(RegisterController::class)->group(function () {
Route::get('/register', 'register')->name('register');
Route::post('/register','storeUser')->name('register');
});
// -------------------------- main dashboard ----------------------//
Route::controller(HomeController::class)->group(function () {
Route::get('/home', 'index')->name('home');
});
Step 4: LoginController
Http/Controllers/Auth/LoginController.php
<?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;
use DB;
use App\Models\User;
use Carbon\Carbon;
use Session;
use Brian2694\Toastr\Facades\Toastr;
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',
'locked',
'unlock'
]);
}
/** index page login */
public function login()
{
return view('auth.login');
}
/** login with databases */
public function authenticate(Request $request)
{
DB::beginTransaction();
try {
$request->validate([
'username' => 'required|string',
'password' => 'required|string',
]);
$email = '@gmail.com';
$username = $request->username . $email;
$password = $request->password;
if (Auth::attempt(['email'=>$username,'password'=>$password])) {
/** get session */
$user = Auth::User();
Session::put('name', $user->name);
Session::put('email', $user->email);
Toastr::success('Login successfully :)','Success');
return redirect()->intended('home');
} else {
Toastr::error('fail, WRONG USERNAME OR PASSWORD :)','Error');
return redirect('login');
}
} catch(\Exception $e) {
DB::rollback();
Toastr::error('fail, LOGIN :)','Error');
return redirect()->back();
}
}
/** logout */
public function logout()
{
Auth::logout();
Toastr::success('Logout successfully :)','Success');
return redirect('login');
}
}
Step 5: RegisterController
Http/Controllers/Auth/RegisterController.php
<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Models\User;
use Brian2694\Toastr\Facades\Toastr;
use Hash;
use DB;
use Carbon\Carbon;
use Illuminate\Support\Facades\Validator;
use Illuminate\Validation\Rules\Password;
class RegisterController extends Controller
{
public function register()
{
$role = DB::table('role_type_users')->get();
return view('auth.register',compact('role'));
}
public function storeUser(Request $request)
{
$request->validate([
'name' => 'required|string|max:255',
'email' => 'required|string|email|max:255|unique:users',
'role_name' => 'required|string|max:255',
'password' => 'required|string|min:8|confirmed',
'password_confirmation' => 'required',
]);
$dt = Carbon::now();
$todayDate = $dt->toDayDateTimeString();
User::create([
'name' => $request->name,
'avatar' => $request->image,
'email' => $request->email,
'join_date' => $todayDate,
'role_name' => $request->role_name,
'password' => Hash::make($request->password),
]);
Toastr::success('Create new account successfully :)','Success');
return redirect('login');
}
}
Step 6:public
public/assets/
- css
- js
- images
- vendor
Step 7:database
database/migrations/2014_10_12_000000_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
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('users', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('email')->nullable();
$table->string('join_date')->nullable();
$table->string('phone_number')->nullable();
$table->string('status')->nullable();
$table->string('role_name')->nullable();
$table->string('avatar')->nullable();
$table->string('position')->nullable();
$table->string('department')->nullable();
$table->timestamp('email_verified_at')->nullable();
$table->string('password');
$table->rememberToken();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('users');
}
};
database/migrations/2021_05_03_061918_create_role_type_users_table.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateRoleTypeUsersTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('role_type_users', function (Blueprint $table) {
$table->id();
$table->string('role_type')->nullable();
$table->timestamps();
});
DB::table('role_type_users')->insert([
['role_type' => 'Admin'],
['role_type' => 'Super Admin'],
['role_type' => 'Normal User'],
['role_type' => 'Client'],
['role_type' => 'Employee']
]);
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('role_type_users');
}
}
Step 8:Modela
Models/User.php
<?php
namespace App\Models;
// use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Sanctum\HasApiTokens;
class User extends Authenticatable
{
use HasApiTokens, HasFactory, Notifiable;
/**
* The attributes that are mass assignable.
*
* @var array<int, string>
*/
protected $fillable = [
'name',
'rec_id',
'email',
'join_date',
'phone_number',
'status',
'role_name',
'email',
'role_name',
'avatar',
'position',
'department',
'password',
];
/**
* The attributes that should be hidden for serialization.
*
* @var array<int, string>
*/
protected $hidden = [
'password',
'remember_token',
];
/**
* The attributes that should be cast.
*
* @var array<string, string>
*/
protected $casts = [
'email_verified_at' => 'datetime',
];
}
Step 9: login.blade.php
resources/views/auth/login.blade.php
@extends('layouts.app')
@section('content')
{{-- message --}}
{!! Toastr::message() !!}
<div class="row justify-content-center h-100 align-items-center">
<div class="col-md-6">
<div class="authincation-content">
<div class="row no-gutters">
<div class="col-xl-12">
<div class="auth-form">
<div class="text-center mb-3">
<a href="#">
<img src="{{ URL::to('assets/images/logo-full.png') }}" alt="">
</a>
</div>
<h4 class="text-center mb-4">Sign in your account</h4>
<form action="{{ route('login') }}" method="POST">
@csrf
<div class="mb-3">
<label class="mb-1"><strong>Username</strong></label>
<input type="text" class="form-control @error('username') is-invalid @enderror" name="username">
</div>
<div class="mb-3">
<label class="mb-1"><strong>Password</strong></label>
<input type="password" class="form-control @error('password') is-invalid @enderror" name="password">
</div>
<div class="row d-flex justify-content-between mt-4 mb-2">
<div class="mb-3">
<a href="#">Forgot Password?</a>
</div>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary btn-block">Sign Me In</button>
</div>
</form>
<div class="new-account mt-3">
<p>Don't have an account? <a class="text-primary" href="{{ route('register') }}">Sign up</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
Step 10: register.blade.php
resources/views/auth/register.blade.php
@extends('layouts.app')
@section('content')
<div class="row justify-content-center h-100 align-items-center">
<div class="col-md-6">
<div class="authincation-content">
<div class="row no-gutters">
<div class="col-xl-12">
<div class="auth-form">
<div class="text-center mb-3">
<a href="index.html"><img src="{{ URL::to('assets/images/logo-full.png') }}" alt=""></a>
</div>
<h4 class="text-center mb-4">Sign up your account</h4>
<form action="{{ route('register') }}" method="POST">
@csrf
<div class="mb-3">
<label class="mb-1"><strong>Full Nmae</strong></label>
<input type="text" class="form-control @error('name') is-invalid @enderror" name="name" placeholder="Enter full name">
</div>
<div class="mb-3">
<label class="mb-1"><strong>Email</strong></label>
<input type="email" class="form-control @error('email') is-invalid @enderror" name="email" placeholder="Enter email">
@error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<input type="hidden" class="image" name="image" value="photo_defaults.jpg">
<div class="mb-3">
<label class="mb-1"><strong>Role Name</strong></label>
<select class="form-control default-select wide @error('role_name') is-invalid @enderror" name="role_name" id="role_name">
<option selected disabled>-- Select Role Name --</option>
@foreach ($role as $name)
<option value="{{ $name->role_type }}">{{ $name->role_type }}</option>
@endforeach
</select>
</div>
<div class="mb-3">
<label class="mb-1"><strong>Password</strong></label>
<input type="password" class="form-control @error('password') is-invalid @enderror" name="password" placeholder="Enter password">
@error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
<div class="mb-3">
<label class="mb-1"><strong>Repeat Password</strong></label>
<input type="password" class="form-control @error('password_confirmation') is-invalid @enderror" name="password_confirmation" placeholder="Choose Repeat Password">
</div>
<div class="text-center mt-4">
<button type="submit" class="btn btn-primary btn-block">Sign me up</button>
</div>
</form>
<div class="new-account mt-3">
<p>Already have an account? <a class="text-primary" href="{{route('login')}}">Sign in</a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
Step 11:Layouts
esources/views/layouts/app.blade.php
<!DOCTYPE html> <html lang="en"> <head> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="keywords" content="admin, dashboard"> <meta name="author" content="DexignZone"> <meta name="robots" content="index, follow"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="Dompet : Payment Admin Template"> <meta property="og:title" content="Dompet : Payment Admin Template"> <meta property="og:description" content="Dompet : Payment Admin Template"> <meta property="og:image" content="https://dompet.dexignlab.com/xhtml/social-image.png"> <meta name="format-detection" content="telephone=no"> <!-- PAGE TITLE HERE --> <title>App Sample</title> <!-- FAVICONS ICON --> <link rel="shortcut icon" type="image/png" href="{{ URL::to('assets/images/favicon.png') }}"> <link href="{{ URL::to('assets/css/style.css') }}" rel="stylesheet"> {{-- message toastr --}} <link rel="stylesheet" href="{{ URL::to('assets/css/toastr.min.css') }}"> <script src="{{ URL::to('assets/js/toastr_jquery.min.js') }}"></script> <script src="{{ URL::to('assets/js/toastr.min.js') }}"></script> </head> <body class="vh-100"> <style> .invalid-feedback{ font-size: 14px; } </style> <div class="authincation h-100"> <div class="container h-100"> <!-- Main Wrapper --> @yield('content') <!-- /Main Wrapper --> </div> </div> <!-- Required vendors --> <script src="{{ URL::to('assets/vendor/global/global.min.js') }}"></script> <script src="{{ URL::to('assets/js/custom.min.js') }}"></script> <script src="{{ URL::to('assets/js/dlabnav-init.js') }}"></script> <script src="{{ URL::to('assets/js/styleSwitcher.js') }}"></script> @yield('script') </body> </html>
Step 12:Migrate table
After creating a table for migration.
php artisan migrate
Step 13:Run
After adding the run file now run the migrate command.
php artisan serve
3 Comments
Man, your work is top notch, as is all the content you produce both on the website and on YouTube. Thank you for sharing your knowledge and may God bless you always!
ReplyDeletethanks
DeleteI am geting error Toastr not found
ReplyDeleteCAN FEEDBACK
Emoji