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=root
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 __construct() { $this->middleware('guest')->except('logout'); } 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), 'type' => "0" ]); 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(); if (auth()->user()->type == 'admin') { return redirect()->route('admin/home'); } else { return redirect()->route('home'); } return redirect()->route('dashboard'); } public function logout(Request $request) { Auth::guard('web')->logout(); $request->session()->invalidate(); return redirect('/login'); } public function profile() { return view('userprofile'); } }Create Controller ProductController
php artisan make:controller ProductController --resource
C:\xampp\htdocs\laravel\laravel10project>php artisan make:controller ProductController --resource
app\Http\Controllers\ProductController.php
//app\Http\Controllers\ProductController.php <?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Models\Product; class ProductController extends Controller { /** * Display a listing of the resource. */ public function index() { $product = Product::orderBy('created_at', 'DESC')->get(); return view('products.index', compact('product')); } /** * Show the form for creating a new resource. */ public function create() { return view('products.create'); } /** * Store a newly created resource in storage. */ public function store(Request $request) { Product::create($request->all()); return redirect()->route('admin/products')->with('success', 'Product added successfully'); } /** * Display the specified resource. */ public function show(string $id) { $product = Product::findOrFail($id); return view('products.show', compact('product')); } /** * Show the form for editing the specified resource. */ public function edit(string $id) { $product = Product::findOrFail($id); return view('products.edit', compact('product')); } /** * Update the specified resource in storage. */ public function update(Request $request, string $id) { $product = Product::findOrFail($id); $product->update($request->all()); return redirect()->route('admin/products')->with('success', 'product updated successfully'); } /** * Remove the specified resource from storage. */ public function destroy(string $id) { $product = Product::findOrFail($id); $product->delete(); return redirect()->route('admin/products')->with('success', 'product deleted successfully'); } }Create Controller AdminController
php artisan make:controller AdminController
C:\xampp\htdocs\laravel\laravel10project>php artisan make:controller AdminController
app\Http\Controllers\AdminController.php
//app\Http\Controllers\AdminController.php <?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Models\User; use Illuminate\Support\Facades\Auth; class AdminController extends Controller { public function profilepage() { return view('profile'); } }Create Controller HomeController
php artisan make:controller HomeController
C:\xampp\htdocs\laravel\laravel10project>php artisan make:controller HomeController
app\Http\Controllers\HomeController.php
//app\Http\Controllers\HomeController.php <?php namespace App\Http\Controllers; use Illuminate\Http\Request; class HomeController extends Controller { public function __construct() { $this->middleware('auth'); } public function index() { return view('home'); } public function adminHome() { return view('dashboard'); } }Create Controller UserController
php artisan make:controller UserController
C:\xampp\htdocs\laravel\laravel10project>php artisan make:controller UserController
app\Http\Controllers\UserController.php
//app\Http\Controllers\UserController.php <?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Models\User; use Illuminate\Support\Facades\Auth; class UserController extends Controller { public function userprofile() { return view('userprofile'); } public function about() { return view('about'); } }Database Migration
C:\xampp\htdocs\laravel\laravel10project>php artisan make:model Product -m
database/migrations/create_products_table.php
//database/migrations/create_products_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. */ public function up(): void { Schema::create('products', function (Blueprint $table) { $table->id(); $table->string('title'); $table->string('price'); $table->string('product_code'); $table->text('description'); $table->timestamps(); }); } /** * Reverse the migrations. */ public function down(): void { Schema::dropIfExists('products'); } };database/migrations/create_users_table.php
add type $table->boolean('type')->default(false); //add type boolean Users: 0=>User, 1=>Admin, 2=>Manager
run this migration
C:\xampp\htdocs\laravel\laravel10project>php artisan migrate
open app/Product.php and update the below field
app/Models/Product.php
// <?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Database\Eloquent\Model; class Product extends Model { use HasFactory; protected $fillable = [ 'title', 'price', 'product_code', 'description' ]; }open app/User.php and update the below field
app/Models/User.php
//app/Models/User.php <?php namespace App\Models; use Illuminate\Database\Eloquent\Factories\HasFactory; use Illuminate\Foundation\Auth\User as Authenticatable; use Illuminate\Notifications\Notifiable; use Laravel\Sanctum\HasApiTokens; use Illuminate\Database\Eloquent\Casts\Attribute; class User extends Authenticatable { use HasApiTokens, HasFactory, Notifiable; /** * The attributes that are mass assignable. * * @var array<int, string> */ protected $fillable = [ 'name', 'email', 'password', 'type' ]; protected function type(): Attribute { return new Attribute( get: fn ($value) => ["user", "admin"][$value], ); } }Create Middleware for checking the users who can access the admin panel or who can access the normal user panel.
php artisan make:middleware UserAccess
C:\xampp\htdocs\laravel\my-app>php artisan make:middleware UserAccess
open app/Http/middleware/UserAccess.php
//app/Http/middleware/UserAccess.php <?php namespace App\Http\Middleware; use Closure; use Illuminate\Http\Request; use Symfony\Component\HttpFoundation\Response; class UserAccess { /** * Handle an incoming request. * * @param \Closure(\Illuminate\Http\Request): (\Symfony\Component\HttpFoundation\Response) $next */ //public function handle(Request $request, Closure $next): Response // { // return $next($request); // } public function handle(Request $request, Closure $next, $userType) { if (auth()->user()->type == $userType) { return $next($request); } return response()->json(['You do not have permission to access for this page.']); /* return response()->view('errors.check-permission'); */ } }register this middleware in the app/Http/Kernel.php
add the following $routeMiddleware property
protected $routeMiddleware = [
'user-access' => \App\Http\Middleware\UserAccess::class,
];
Create Blade View
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>@yield('title')</title> <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css"> </head> <body> <header class="px-4 py-2 shadow"> <div class="flex justify-between"> <div class="flex items-center"> <button data-menu class="p-4 -ml-3 focus:outline-none" type="button"> <svg class="fill-current w-5" viewBox="0 -21 384 384"> <path d="M362.668 0H21.332C9.578 0 0 9.578 0 21.332V64c0 11.754 9.578 21.332 21.332 21.332h341.336C374.422 85.332 384 75.754 384 64V21.332C384 9.578 374.422 0 362.668 0zm0 0M362.668 128H21.332C9.578 128 0 137.578 0 149.332V192c0 11.754 9.578 21.332 21.332 21.332h341.336c11.754 0 21.332-9.578 21.332-21.332v-42.668c0-11.754-9.578-21.332-21.332-21.332zm0 0M362.668 256H21.332C9.578 256 0 265.578 0 277.332V320c0 11.754 9.578 21.332 21.332 21.332h341.336c11.754 0 21.332-9.578 21.332-21.332v-42.668c0-11.754-9.578-21.332-21.332-21.332zm0 0" /> </svg> </button> <button data-search class="p-4 md:hidden focus:outline-none" type="button"> <svg data-search-icon class="fill-current w-4" viewBox="0 0 512 512" style="top: 0.7rem; left: 1rem;"> <path d="M225.474 0C101.151 0 0 101.151 0 225.474c0 124.33 101.151 225.474 225.474 225.474 124.33 0 225.474-101.144 225.474-225.474C450.948 101.151 349.804 0 225.474 0zm0 409.323c-101.373 0-183.848-82.475-183.848-183.848S124.101 41.626 225.474 41.626s183.848 82.475 183.848 183.848-82.475 183.849-183.848 183.849z" /> <path d="M505.902 476.472L386.574 357.144c-8.131-8.131-21.299-8.131-29.43 0-8.131 8.124-8.131 21.306 0 29.43l119.328 119.328A20.74 20.74 0 00491.187 512a20.754 20.754 0 0014.715-6.098c8.131-8.124 8.131-21.306 0-29.43z" /> </svg> </button> <div data-search-form class="relative mr-3 hidden md:inline-block"> <div class="text-gray-500"> <svg data-search-icon class="absolute fill-current w-4" viewBox="0 0 512 512" style="top: 0.7rem; left: 1rem;"> <path d="M225.474 0C101.151 0 0 101.151 0 225.474c0 124.33 101.151 225.474 225.474 225.474 124.33 0 225.474-101.144 225.474-225.474C450.948 101.151 349.804 0 225.474 0zm0 409.323c-101.373 0-183.848-82.475-183.848-183.848S124.101 41.626 225.474 41.626s183.848 82.475 183.848 183.848-82.475 183.849-183.848 183.849z" /> <path d="M505.902 476.472L386.574 357.144c-8.131-8.131-21.299-8.131-29.43 0-8.131 8.124-8.131 21.306 0 29.43l119.328 119.328A20.74 20.74 0 00491.187 512a20.754 20.754 0 0014.715-6.098c8.131-8.124 8.131-21.306 0-29.43z" /> </svg> </div> <input type="text" placeholder="Search" name="search" id="search" class="h-auto pl-10 py-2 bg-gray-200 text-sm border border-gray-500 rounded-full focus:outline-none focus:bg-white"> </div> </div> <div class="flex items-center"> <button data-messages class="p-3 mr-2 focus:outline-none hover:bg-gray-200 hover:rounded-md" typle="button"> <svg class="fill-current w-5" viewBox="0 0 512 512"> <path d="M339.392 258.624L512 367.744V144.896zM0 144.896v222.848l172.608-109.12zM480 80H32C16.032 80 3.36 91.904.96 107.232L256 275.264l255.04-168.032C508.64 91.904 495.968 80 480 80zM310.08 277.952l-45.28 29.824a15.983 15.983 0 01-8.8 2.624c-3.072 0-6.112-.864-8.8-2.624l-45.28-29.856L1.024 404.992C3.488 420.192 16.096 432 32 432h448c15.904 0 28.512-11.808 30.976-27.008L310.08 277.952z" /> </svg> </button> <button data-notifications class="p-3 mr-3 focus:outline-none hover:bg-gray-200 hover:rounded-md" typle="button"> <svg class="fill-current w-5" viewBox="-21 0 512 512"> <path d="M213.344 512c38.636 0 70.957-27.543 78.379-64H134.965c7.426 36.457 39.746 64 78.379 64zm0 0M362.934 255.98c-.086 0-.172.02-.258.02-82.324 0-149.332-66.988-149.332-149.332 0-22.637 5.207-44.035 14.273-63.277-4.695-.446-9.453-.723-14.273-.723-82.473 0-149.332 66.855-149.332 149.332v59.477c0 42.218-18.496 82.07-50.946 109.503C2.25 370.22-2.55 384.937 1.332 399.297c4.523 16.703 21.035 27.371 38.36 27.371H386.89c18.175 0 35.308-11.777 38.996-29.59 2.86-13.781-2.047-27.543-12.735-36.523-31.02-26.004-48.96-64.215-50.218-104.575zm0 0" /> <path style="fill: red;" d="M469.344 106.668c0 58.91-47.754 106.664-106.668 106.664-58.91 0-106.664-47.754-106.664-106.664C256.012 47.758 303.766 0 362.676 0c58.914 0 106.668 47.758 106.668 106.668zm0 0" /> </svg> </button> <button data-dropdown class="flex items-center px-3 py-2 focus:outline-none hover:bg-gray-200 hover:rounded-md" type="button" x-data="{ open: false }" @click="open = true" :class="{ 'bg-gray-200 rounded-md': open }"> <img src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=100&h=100&q=80" alt="Profle" class="h-8 w-8 rounded-full"> <span class="ml-4 text-sm hidden md:inline-block">Cairocoders</span> <svg class="fill-current w-3 ml-4" viewBox="0 0 407.437 407.437"> <path d="M386.258 91.567l-182.54 181.945L21.179 91.567 0 112.815 203.718 315.87l203.719-203.055z" /> </svg> <div data-dropdown-items class="text-sm text-left absolute top-0 right-0 mt-16 mr-4 bg-white rounded border border-gray-400 shadow" x-show="open" @click.away="open = false"> <ul> <li class="px-4 py-3 border-b hover:bg-gray-200"><a href="#">My Profile</a></li> <li class="px-4 py-3 border-b hover:bg-gray-200"><a href="#">Settings</a></li> <li class="px-4 py-3 hover:bg-gray-200"><a href="{{ route('logout') }}">Log out</a></li> </ul> </div> </button> </div> </div> </header> <div class="flex flex-row"> <div class="flex flex-col w-64 h-screen overflow-y-auto bg-gray-900 border-r rtl:border-r-0 rtl:border-l dark:bg-gray-900 dark:border-gray-700"> <div class="sidebar text-center bg-gray-900"> <div class="text-gray-100 text-xl"> <div class="p-2.5 mt-1 flex items-center"> <i class="bi bi-app-indicator px-2 py-1 rounded-md bg-blue-600"></i> <h1 class="font-bold text-gray-200 text-[15px] ml-3">Admin</h1> </div> <div class="my-2 bg-gray-600 h-[1px]"></div> </div> <div class="p-2.5 flex items-center rounded-md px-4 duration-300 cursor-pointer bg-gray-700 text-white"> <i class="bi bi-search text-sm"></i> <input type="text" placeholder="Search" class="text-[15px] ml-4 w-full bg-transparent focus:outline-none" /> </div> <a href="{{ route('admin/home') }}"> <div class="p-2.5 mt-3 flex items-center rounded-md px-4 duration-300 cursor-pointer hover:bg-blue-600 text-white"> <i class="bi bi-house-door-fill"></i> <span class="text-[15px] ml-4 text-gray-200 font-bold">Home</span> </div> </a> <a href="{{ route('admin/products') }}"> <div class="p-2.5 mt-3 flex items-center rounded-md px-4 duration-300 cursor-pointer hover:bg-blue-600 text-white"> <i class="bi bi-bookmark-fill"></i> <span class="text-[15px] ml-4 text-gray-200 font-bold">Product</span> </div> </a> <a href="{{ route('admin/profile') }}"> <div class="p-2.5 mt-3 flex items-center rounded-md px-4 duration-300 cursor-pointer hover:bg-blue-600 text-white"> <i class="bi bi-bookmark-fill"></i> <span class="text-[15px] ml-4 text-gray-200 font-bold">Profile</span> </div> </a> <a href="{{ route('logout') }}"> <div class="my-4 bg-gray-600 h-[1px]"></div> <div class="p-2.5 mt-3 flex items-center rounded-md px-4 duration-300 cursor-pointer hover:bg-blue-600 text-white"> <i class="bi bi-box-arrow-in-right"></i> <span class="text-[15px] ml-4 text-gray-200 font-bold">Logout</span> </div> </a> </div> </div> <div class="flex flex-col w-full h-screen px-4 py-8 mt-10"> <div>@yield('contents')</div> </div> </div> </body> </html>resources/views/layouts/user.blade.php
//resources/views/layouts/user.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>@yield('title')</title> <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css"> </head> <body> <div> <nav class="bg-gray-800"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex items-center justify-between h-16"> <div class="flex items-center"> <div class="flex-shrink-0 text-white"> Cairocoders </div> <div class="hidden md:block"> <div class="ml-10 flex items-baseline space-x-4"> <a href="{{ url('/') }}" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium">Home</a> <a href="{{ route('about') }}" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">About Us</a> <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Contact Us</a> </div> </div> </div> <div class="hidden md:block"> <div class="ml-4 flex items-center md:ml-6"> @if (Route::has('login')) @auth <button class="bg-gray-800 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"> <span class="sr-only">View notifications</span> <!-- Heroicon name: outline/bell --> <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /> </svg> </button> <!-- Profile dropdown --> <div x-data="{show: false}" x-on:click.away="show = false" class="ml-3 relative"> <div> <button x-on:click="show = !show" type="button" class="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="user-menu-button" aria-expanded="false" aria-haspopup="true"> <span class="sr-only">Open user menu</span> <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> </button> </div> <div x-show="show" class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1"> <a href="{{ url('/profile') }}" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a> <a href="#" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a> <a href="{{ url('/logout') }}" class="block px-4 py-2 text-sm text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a> </div> </div> @else <a href="{{ route('login') }}" class="font-semibold text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500">Log in</a> @if (Route::has('register')) <a href="{{ route('register') }}" class="ml-4 font-semibold text-white focus:outline focus:outline-2 focus:rounded-sm focus:outline-red-500">Register</a> @endif @endauth @endif </div> </div> <div class="-mr-2 flex md:hidden"> <!-- Mobile menu button --> <button type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false"> <span class="sr-only">Open main menu</span> <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /> </svg> <svg class="hidden h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /> </svg> </button> </div> </div> </div> <!-- Mobile menu, show/hide based on menu state. --> <div class="md:hidden" id="mobile-menu"> <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> <a href="#" class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium">Home</a> <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">About Us</a> <a href="#" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Contact Us</a> </div> <div class="pt-4 pb-3 border-t border-gray-700"> <div class="flex items-center px-5"> <div class="flex-shrink-0"> <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> </div> <div class="ml-3"> <div class="text-base font-medium leading-none text-white">Tom Cook</div> <div class="text-sm font-medium leading-none text-gray-400">tom@example.com</div> </div> <button class="ml-auto bg-gray-800 flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"> <span class="sr-only">View notifications</span> <!-- Heroicon name: outline/bell --> <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /> </svg> </button> </div> <div class="mt-3 px-2 space-y-1"> <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Your Profile</a> <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Settings</a> <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Sign out</a> </div> </div> </div> </nav> <main> <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8"> <div>@yield('contents')</div> </div> </main> </div> </body> </html>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> <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js"></script> </head> <body> <section class="bg-gray-50 dark:bg-gray-900"> <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0"> <div class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white"> Login </div> <div class="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700"> <div class="p-6 space-y-4 md:space-y-6 sm:p-8"> <h1 class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white"> Sign in to your account </h1> <form class="space-y-4 md:space-y-6" method="post" action="{{ route('login.action') }}"> @csrf @if ($errors->any()) <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert"> <strong class="font-bold">Error!</strong> <ul> @foreach ($errors->all() as $error) <li><span class="block sm:inline">{{ $error }}</span></li> @endforeach </ul> <span class="absolute top-0 bottom-0 right-0 px-4 py-3"> <svg class="fill-current h-6 w-6 text-red-500" role="button" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"> <title>Close</title> <path d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" /> </svg> </span> </div> @endif <div> <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your email</label> <input type="email" name="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="name@company.com" required=""> </div> <div> <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Password</label> <input type="password" name="password" id="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required=""> </div> <div class="flex items-center justify-between"> <div class="flex items-start"> <div class="flex items-center h-5"> <input name="remember" id="remember" aria-describedby="remember" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800" required=""> </div> <div class="ml-3 text-sm"> <label for="remember" class="text-gray-500 dark:text-gray-300">Remember me</label> </div> </div> <a href="#" class="text-sm font-medium text-primary-600 hover:underline dark:text-primary-500">Forgot password?</a> </div> <button type="submit" class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Sign in</button> <p class="text-sm font-light text-gray-500 dark:text-gray-400"> Don’t have an account yet? <a href="{{ route('register') }}" class="font-medium text-primary-600 hover:underline dark:text-primary-500">Sign up</a> </p> </form> </div> </div> </div> </section> </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> <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet" /> <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js"></script> </head> <body> <section class="bg-gray-50 dark:bg-gray-900"> <div class="flex flex-col items-center justify-center px-6 py-8 mx-auto md:h-screen lg:py-0"> <div class="flex items-center mb-6 text-2xl font-semibold text-gray-900 dark:text-white"> Register </div> <div class="w-full bg-white rounded-lg shadow dark:border md:mt-0 sm:max-w-md xl:p-0 dark:bg-gray-800 dark:border-gray-700"> <div class="p-6 space-y-4 md:space-y-6 sm:p-8"> <h1 class="text-xl font-bold leading-tight tracking-tight text-gray-900 md:text-2xl dark:text-white"> Create and account </h1> <form action="{{ route('register.save') }}" method="POST" class="space-y-4 md:space-y-6"> @csrf <div> <label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your name</label> <input type="text" name="name" id="name" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="name" required=""> @error('name') <span class="text-red-600">{{ $message }}</span> @enderror </div> <div> <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Your email</label> <input type="email" name="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="name@company.com" required=""> @error('email') <span class="text-red-600">{{ $message }}</span> @enderror </div> <div> <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Password</label> <input type="password" name="password" id="password" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required=""> @error('password') <span class="text-red-600">{{ $message }}</span> @enderror </div> <div> <label for="confirm-password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Confirm password</label> <input type="confirm-password" name="password_confirmation" id="password_confirmation" placeholder="••••••••" class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" required=""> @error('password_confirmation') <span class="text-red-600">{{ $message }}</span> @enderror </div> <div class="flex items-start"> <div class="flex items-center h-5"> <input id="terms" aria-describedby="terms" type="checkbox" class="w-4 h-4 border border-gray-300 rounded bg-gray-50 focus:ring-3 focus:ring-primary-300 dark:bg-gray-700 dark:border-gray-600 dark:focus:ring-primary-600 dark:ring-offset-gray-800" required=""> </div> <div class="ml-3 text-sm"> <label for="terms" class="font-light text-gray-500 dark:text-gray-300">I accept the <a class="font-medium text-primary-600 hover:underline dark:text-primary-500" href="#">Terms and Conditions</a></label> </div> </div> <button type="submit" class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Create an account</button> <p class="text-sm font-light text-gray-500 dark:text-gray-400"> Already have an account? <a href="{{ route('login') }}" class="font-medium text-primary-600 hover:underline dark:text-primary-500">Login here</a> </p> </form> </div> </div> </div> </section> </body> </html>resources/views/products/create.blade.php
//resources/views/products/create.blade.php @extends('layouts.app') @section('title', 'Create Product') @section('contents') <h1 class="font-bold text-2xl ml-3">Add Product</h1> <hr /> <div class="border-b border-gray-900/10 pb-12"> <div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6"> <form action="{{ route('admin/products/store') }}" method="POST" enctype="multipart/form-data"> @csrf <div class="sm:col-span-4"> <label class="block text-sm font-medium leading-6 text-gray-900">Title</label> <div class="mt-2"> <input type="text" name="title" id="title" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"> </div> </div> <div class="sm:col-span-4"> <label class="block text-sm font-medium leading-6 text-gray-900">Price</label> <div class="mt-2"> <input id="price" name="price" type="text" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"> </div> </div> <div class="sm:col-span-4"> <label class="block text-sm font-medium leading-6 text-gray-900">Product Code</label> <div class="mt-2"> <input id="product_code" name="product_code" type="text" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"> </div> </div> <div class="sm:col-span-4"> <label class="block text-sm font-medium leading-6 text-gray-900">Description</label> <div class="mt-2"> <textarea name="description" placeholder="Descriptoin" rows="3" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"></textarea> </div> </div> <button type="submit" class="flex w-full justify-center mt-10 rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Submit</button> </form> </div> </div> @endsectionresources/views/products/edit.blade.php
//resources/views/products/edit.blade.php @extends('layouts.app') @section('title', 'Edit Product') @section('contents') <h1 class="mb-0">Edit Product</h1> <hr /> <div class="border-b border-gray-900/10 pb-12"> <div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6"> <form action="{{ route('admin/products/update', $product->id) }}" method="POST"> @csrf @method('PUT') <div class="sm:col-span-4"> <label class="block text-sm font-medium leading-6 text-gray-900">Title</label> <div class="mt-2"> <input type="text" name="title" id="title" value="{{ $product->title }}" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"> </div> </div> <div class="sm:col-span-4"> <label class="block text-sm font-medium leading-6 text-gray-900">Price</label> <div class="mt-2"> <input id="price" name="price" type="text" value="{{ $product->price }}" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"> </div> </div> <div class="sm:col-span-4"> <label class="block text-sm font-medium leading-6 text-gray-900">Product Code</label> <div class="mt-2"> <input id="product_code" name="product_code" value="{{ $product->product_code }}" type="text" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"> </div> </div> <div class="sm:col-span-4"> <label class="block text-sm font-medium leading-6 text-gray-900">Description</label> <div class="mt-2"> <textarea name="description" placeholder="Descriptoin" rows="3" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"> {{ $product->description }} </textarea> </div> </div> <button type="submit" class="flex w-full justify-center mt-10 rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Update</button> </form> </div> </div> @endsectionresources/views/products/index.blade.php
//resources/views/products/index.blade.php @extends('layouts.app') @section('title', 'Home Product List') @section('contents') <div> <h1 class="font-bold text-2xl ml-3">Home Product List</h1> <a href="{{ route('admin/products/create') }}" class="text-white float-right bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Add Product</a> <hr /> @if(Session::has('success')) <div class="p-4 mb-4 text-sm text-green-800 rounded-lg bg-green-50 dark:bg-gray-800 dark:text-green-400" role="alert"> {{ Session::get('success') }} </div> @endif <table class="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400"> <thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"> <tr> <th scope="col" class="px-6 py-3">#</th> <th scope="col" class="px-6 py-3">Title</th> <th scope="col" class="px-6 py-3">Price</th> <th scope="col" class="px-6 py-3">Product Code</th> <th scope="col" class="px-6 py-3">Description</th> <th scope="col" class="px-6 py-3">Action</th> </tr> </thead> <tbody> @if($product->count() > 0) @foreach($product as $rs) <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600"> <th scope="row" class="font-medium text-gray-900 whitespace-nowrap dark:text-white"> {{ $loop->iteration }} </th> <td> {{ $rs->title }} </td> <td> {{ $rs->price }} </td> <td> {{ $rs->product_code }} </td> <td> {{ $rs->description }} </td> <td class="w-36"> <div class="h-14 pt-5"> <a href="{{ route('admin/products/show', $rs->id) }}" class="text-blue-800">Detail</a> | <a href="{{ route('admin/products/edit', $rs->id)}}" class="text-green-800 pl-2">Edit</a> | <form action="{{ route('admin/products/destroy', $rs->id) }}" method="POST" onsubmit="return confirm('Delete?')" class="float-right text-red-800"> @csrf @method('DELETE') <button>Delete</button> </form> </div> </td> </tr> @endforeach @else <tr> <td class="text-center" colspan="5">Product not found</td> </tr> @endif </tbody> </table> </div> @endsectionresources/views/products/show.blade.php
//resources/views/products/show.blade.php @extends('layouts.app') @section('title', 'Show Product') @section('contents') <h1 class="font-bold text-2xl ml-3">Detail Product</h1> <hr /> <div class="border-b border-gray-900/10 pb-12"> <div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6"> <div class="sm:col-span-4"> <label class="block text-sm font-medium leading-6 text-gray-900">Title</label> <div class="mt-2"> {{ $product->title }} </div> </div> <div class="sm:col-span-4"> <label class="block text-sm font-medium leading-6 text-gray-900">Price</label> <div class="mt-2"> {{ $product->price }} </div> </div> <div class="sm:col-span-4"> <label class="block text-sm font-medium leading-6 text-gray-900">Product Code</label> <div class="mt-2"> {{ $product->product_code }} </div> </div> <div class="sm:col-span-4"> <label class="block text-sm font-medium leading-6 text-gray-900">Description</label> <div class="mt-2"> {{ $product->description }} </div> </div> </form> </div> </div> @endsectionresources/views/dashboard.blade.php
//resources/views/dashboard.blade.php @extends('layouts.app') @section('title', 'Laravel 10 Login SignUp with User Roles and Permissions with Admin CRUD | Tailwind CSS Custom Login register') @section('contents') <div> <h1 class="font-bold text-2xl ml-3">Dashboard</h1> </div> @endsectionresources/views/home.blade.php
//resources/views/home.blade.php @extends('layouts.user') @section('title', 'Home') @section('contents') <header class="bg-white shadow"> <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8"> <h1 class="text-3xl font-bold text-gray-900"> Home </h1> </div> </header> <hr /> <main> <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8"> <div class="px-4 py-6 sm:px-0"> <div class="border-4 border-dashed border-gray-200 rounded-lg h-96"> HOmepage </div> </div> </div> </main> @endsectionresources/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> @endsectionresources/views/userprofile.blade.php
//resources/views/userprofile.blade.php @extends('layouts.user') @section('title', 'Profile Settings') @section('contents') <header class="bg-white shadow"> <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8"> <h1 class="text-3xl font-bold text-gray-900"> Profile </h1> </div> </header> <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> @endsectionRoutes
routes/web.php
// <?php use Illuminate\Support\Facades\Route; use App\Http\Controllers\AuthController; use App\Http\Controllers\ProductController; use App\Http\Controllers\HomeController; use App\Http\Controllers\AdminController; use App\Http\Controllers\UserController; /* |-------------------------------------------------------------------------- | 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('home'); })->name('home'); Route::get('/about', [UserController::class, 'about'])->name('about'); 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'); }); //Normal Users Routes List Route::middleware(['auth', 'user-access:user'])->group(function () { Route::get('/home', [HomeController::class, 'index'])->name('home'); Route::get('/profile', [UserController::class, 'userprofile'])->name('profile'); }); //Admin Routes List Route::middleware(['auth', 'user-access:admin'])->group(function () { Route::get('/admin/home', [HomeController::class, 'adminHome'])->name('admin/home'); Route::get('/admin/profile', [AdminController::class, 'profilepage'])->name('admin/profile'); Route::get('/admin/products', [ProductController::class, 'index'])->name('admin/products'); Route::get('/admin/products/create', [ProductController::class, 'create'])->name('admin/products/create'); Route::post('/admin/products/store', [ProductController::class, 'store'])->name('admin/products/store'); Route::get('/admin/products/show/{id}', [ProductController::class, 'show'])->name('admin/products/show'); Route::get('/admin/products/edit/{id}', [ProductController::class, 'edit'])->name('admin/products/edit'); Route::put('/admin/products/edit/{id}', [ProductController::class, 'update'])->name('admin/products/update'); Route::delete('/admin/products/destroy/{id}', [ProductController::class, 'destroy'])->name('admin/products/destroy'); });Run C:\xampp\htdocs\laravel\laravel10project>php artisan serve
Starting Laravel development server: http://127.0.0.1:8000