Download Laravel App
composer create-project --prefer-dist laravel/laravel my-app
C:\xampp\htdocs\laravel10project>composer create-project laravel/laravel laravel10project
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 AuthController
C:\xampp\htdocs\laravel\laravel10project>php artisan make:controller AuthController
app\Http\Controllers\AuthController.php
//app\Http\Controllers\AuthController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\User;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Hash;
use Illuminate\Support\Facades\Validator;
use Illuminate\Validation\ValidationException;
class AuthController extends Controller
{
public function register()
{
return view('auth/register');
}
public function registerSave(Request $request)
{
Validator::make($request->all(), [
'name' => 'required',
'email' => 'required|email',
'password' => 'required|confirmed'
])->validate();
User::create([
'name' => $request->name,
'email' => $request->email,
'password' => Hash::make($request->password),
'level' => 'Admin'
]);
return redirect()->route('login');
}
public function login()
{
return view('auth/login');
}
public function loginAction(Request $request)
{
Validator::make($request->all(), [
'email' => 'required|email',
'password' => 'required'
])->validate();
if (!Auth::attempt($request->only('email', 'password'), $request->boolean('remember'))) {
throw ValidationException::withMessages([
'email' => trans('auth.failed')
]);
}
$request->session()->regenerate();
return redirect()->route('dashboard');
}
public function logout(Request $request)
{
Auth::guard('web')->logout();
$request->session()->invalidate();
return redirect('/login');
}
public function profile()
{
return view('profile');
}
}
run this migration C:\xampp\htdocs\laravel\laravel10project>php artisan migrate
Install Tailwindcss and DaisyUI
https://tailwindcss.com/docs/guides/laravel
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
https://daisyui.com/
The most popular component library for Tailwind CSS
https://daisyui.com/docs/install/
npm i -D daisyui@latest
Then add daisyUI to your tailwind.config.js files:
plugins: [require("daisyui")],
Templates
create folder layouts new file app.blade.php resources/views/layouts/app.blade.php
//resources/views/layouts/app.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>Dashboard</title>
@vite('resources/css/app.css')
</head>
<body>
<div class="container mx-auto px-4">
<div class="navbar bg-base-100">
<div class="flex-1">
<a href="{{ route('dashboard') }}" class="btn btn-ghost text-xl">Cairocoders</a>
</div>
<div class="flex-none">
<div class="dropdown dropdown-end">
<div tabindex="0" role="button" class="btn btn-ghost btn-circle">
<div class="indicator">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3h2l.4 2M7 13h10l4-8H5.4M7 13L5.4 5M7 13l-2.293 2.293c-.63.63-.184 1.707.707 1.707H17m0 0a2 2 0 100 4 2 2 0 000-4zm-8 2a2 2 0 11-4 0 2 2 0 014 0z" />
</svg>
<span class="badge badge-sm indicator-item">8</span>
</div>
</div>
<div tabindex="0" class="mt-3 z-[1] card card-compact dropdown-content w-52 bg-base-100 shadow">
<div class="card-body">
<span class="font-bold text-lg">8 Items</span>
<span class="text-info">Subtotal: $999</span>
<div class="card-actions">
<button class="btn btn-primary btn-block">View cart</button>
</div>
</div>
</div>
</div>
<div class="dropdown dropdown-end">
<div tabindex="0" role="button" class="btn btn-ghost btn-circle avatar">
<div class="w-10 rounded-full">
<img alt="Tailwind CSS Navbar component" src="https://daisyui.com/images/stock/photo-1534528741775-53994a69daeb.jpg" />
</div>
</div>
<ul tabindex="0" class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
<li>
<a href="{{ route('profile') }}" class="justify-between">
Profile
<span class="badge">New</span>
</a>
</li>
<li><a>Settings</a></li>
<li><a href="{{ route('logout') }}">Logout</a></li>
</ul>
</div>
</div>
</div>
<div>
<h1 class="text-3xl">@yield('title')</h1>
<div>@yield('contents')</div>
</div>
</div>
</body>
</html>
resources/views/dashboard.blade.php
//resources/views/dashboard.blade.php
@extends('layouts.app')
@section('title', 'Laravel 10 Login Register with Tailwind CSS and DaisyUI | Custom Login register')
@section('contents')
<div>
<div class="hero min-h-screen" style="background-image: url(https://daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.jpg);">
<div class="hero-overlay bg-opacity-60"></div>
<div class="hero-content text-center text-neutral-content">
<div class="max-w-md">
<h1 class="mb-5 text-5xl font-bold">Hello there</h1>
<p class="mb-5">Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem quasi. In deleniti eaque aut repudiandae et a id nisi.</p>
<button class="btn btn-primary">Get Started</button>
</div>
</div>
</div>
</div>
@endsection
resources/views/profile.blade.php
//resources/views/profile.blade.php
@extends('layouts.app')
@section('title', 'Profile Settings')
@section('contents')
<hr />
<form method="POST" enctype="multipart/form-data" action="">
<div>
<label class="label">
<span class="text-base label-text">Name</span>
</label>
<input name="name" type="text" value="{{ auth()->user()->name }}" class="w-full input input-bordered" />
</div>
<div>
<label class="label">
<span class="text-base label-text">Email</span>
</label>
<input name="email" type="text" value="{{ auth()->user()->email }}" class="w-full input input-bordered" />
</div>
<div class="mt-6">
<button type="submit" class="btn btn-block">Save Profile</button>
</div>
</form>
@endsection
create folder auth and file login resources/views/auth/login.blade.php
//resources/views/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>Login</title>
@vite('resources/css/app.css')
</head>
<body>
<div class="relative flex flex-col justify-center h-screen overflow-hidden">
<div class="w-full p-6 m-auto bg-white rounded-md shadow-md ring-2 ring-gray-800/50 lg:max-w-xl">
<h1 class="text-3xl font-semibold text-center text-gray-700">Login</h1>
<form action="{{ route('login.action') }}" method="POST" class="space-y-4">
@csrf
@if ($errors->any())
<div role="alert" class="alert alert-warning">
<svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
</svg>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<div>
<label class="label">
<span class="text-base label-text">Email</span>
</label>
<input name="email" type="email" placeholder="Email Address" class="w-full input input-bordered" />
</div>
<div>
<label class="label">
<span class="text-base label-text">Password</span>
</label>
<input name="password" type="password" placeholder="Enter Password" class="w-full input input-bordered" />
</div>
<div>
<button type="submit" class="btn btn-block">Login</button>
</div>
<div>
<label class="label cursor-pointer">
<span class="label-text">Remember me</span>
<input name="remember" type="checkbox" checked="checked" id="customCheck" class="checkbox checkbox-primary" />
</label>
</div>
<span>Don't have an account yet?
<a href="{{ route('register') }}" class="text-blue-600 hover:text-blue-800 hover:underline">Register</a></span>
</form>
</div>
</div>
</body>
</html>
resources/views/auth/register.blade.php
//resources/views/auth/register.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>Register</title>
@vite('resources/css/app.css')
</head>
<body>
<div class="relative flex flex-col justify-center h-screen overflow-hidden">
<div class="w-full p-6 m-auto bg-white rounded-md shadow-md ring-2 ring-gray-800/50 lg:max-w-xl">
<h1 class="text-3xl font-semibold text-center text-gray-700">Register</h1>
<form action="{{ route('register.save') }}" method="POST" class="space-y-4">
@csrf
<div>
<label class="label">
<span class="text-base label-text">Name</span>
</label>
<input name="name" type="text" placeholder="Name" class="w-full input input-bordered @error('name')is-invalid @enderror" />
@error('name')
<span class="text-red-600">{{ $message }}</span>
@enderror
</div>
<div>
<label class="label">
<span class="text-base label-text">Email</span>
</label>
<input name="email" type="email" placeholder="Email Address" class="w-full input input-bordered" />
@error('email')
<span class="text-red-600">{{ $message }}</span>
@enderror
</div>
<div>
<label class="label">
<span class="text-base label-text">Password</span>
</label>
<input name="password" type="password" placeholder="Enter Password" class="w-full input input-bordered" />
@error('password')
<span class="text-red-600">{{ $message }}</span>
@enderror
</div>
<div>
<label class="label">
<span class="text-base label-text">Confirm Password</span>
</label>
<input name="password_confirmation" type="password" placeholder="Confirm Password" class="w-full input input-bordered" />
@error('password_confirmation')
<span class="text-red-600">{{ $message }}</span>
@enderror
</div>
<div>
<button type="submit" class="btn btn-block">Register Account</button>
</div>
<span>Already have an account ?
<a href="{{ route('login') }}" class="text-blue-600 hover:text-blue-800 hover:underline">Login</a></span>
</form>
<div class="flex items-center w-full my-4">
<hr class="w-full" />
<p class="px-3 ">OR</p>
<hr class="w-full" />
</div>
<div class="my-6 space-y-2">
<button aria-label="Login with Google" type="button" class="flex items-center justify-center w-full p-2 space-x-4 border rounded-md focus:ring-2 focus:ring-offset-1 focus:ring-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="w-5 h-5 fill-current">
<path d="M16.318 13.714v5.484h9.078c-0.37 2.354-2.745 6.901-9.078 6.901-5.458 0-9.917-4.521-9.917-10.099s4.458-10.099 9.917-10.099c3.109 0 5.193 1.318 6.38 2.464l4.339-4.182c-2.786-2.599-6.396-4.182-10.719-4.182-8.844 0-16 7.151-16 16s7.156 16 16 16c9.234 0 15.365-6.49 15.365-15.635 0-1.052-0.115-1.854-0.255-2.651z">
</path>
</svg>
<p>Login with Google</p>
</button>
<button aria-label="Login with GitHub" role="button" class="flex items-center justify-center w-full p-2 space-x-4 border rounded-md focus:ring-2 focus:ring-offset-1 focus:ring-gray-400">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" class="w-5 h-5 fill-current">
<path d="M16 0.396c-8.839 0-16 7.167-16 16 0 7.073 4.584 13.068 10.937 15.183 0.803 0.151 1.093-0.344 1.093-0.772 0-0.38-0.009-1.385-0.015-2.719-4.453 0.964-5.391-2.151-5.391-2.151-0.729-1.844-1.781-2.339-1.781-2.339-1.448-0.989 0.115-0.968 0.115-0.968 1.604 0.109 2.448 1.645 2.448 1.645 1.427 2.448 3.744 1.74 4.661 1.328 0.14-1.031 0.557-1.74 1.011-2.135-3.552-0.401-7.287-1.776-7.287-7.907 0-1.751 0.62-3.177 1.645-4.297-0.177-0.401-0.719-2.031 0.141-4.235 0 0 1.339-0.427 4.4 1.641 1.281-0.355 2.641-0.532 4-0.541 1.36 0.009 2.719 0.187 4 0.541 3.043-2.068 4.381-1.641 4.381-1.641 0.859 2.204 0.317 3.833 0.161 4.235 1.015 1.12 1.635 2.547 1.635 4.297 0 6.145-3.74 7.5-7.296 7.891 0.556 0.479 1.077 1.464 1.077 2.959 0 2.14-0.020 3.864-0.020 4.385 0 0.416 0.28 0.916 1.104 0.755 6.4-2.093 10.979-8.093 10.979-15.156 0-8.833-7.161-16-16-16z">
</path>
</svg>
<p>Login with GitHub</p>
</button>
</div>
</div>
</div>
</body>
</html>
Routes routes/web.php
//routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\AuthController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/
Route::get('/', function () {
return view('welcome');
});
Route::controller(AuthController::class)->group(function () {
Route::get('register', 'register')->name('register');
Route::post('register', 'registerSave')->name('register.save');
Route::get('login', 'login')->name('login');
Route::post('login', 'loginAction')->name('login.action');
Route::get('logout', 'logout')->middleware('auth')->name('logout');
});
Route::middleware('auth')->group(function () {
Route::get('dashboard', function () {
return view('dashboard');
})->name('dashboard');
Route::get('/profile', [App\Http\Controllers\AuthController::class, 'profile'])->name('profile');
});
Run C:\xampp\htdocs\laravel\laravel10project>php artisan serve Starting Laravel development server: http://127.0.0.1:8000
