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.
https://github.com/StarCodeKh/Laravel-9-Sign-Up-Sign-In-Sample-with-Template.git
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