Laravel-ระบบบริหารจัดการผู้ใช้(users management)

(Part# 5 ต่อ) วิธีการจัดการกับผู้ใช้ระบบทั้งหมด (users management)

จากในภาพ เราจะคลิ๊กที่เมนู All Users เพื่อดึงข้อมูลผู้ใช้ทั้งหมดที่มีในระบบ ประกอบไปด้วย admin และ user ทั้งหมดถูกเก็บไว้ในตาราง(table) user

1. อันดับแรกสร้างเร้าท์(route) เพื่อให้เมนู All Users สามารถคลิ๊กได้ โดยเปิดไฟล์ sidebar.blade.php เพิ่มเร้าท์เพื่อลิ้งค์ ดังโค้ดด้านล่าง

<li class="sidebar-item">
                  <a class="sidebar-link justify-content-between"  
                    href="{{ route('admin.user.showusers') }}" aria-expanded="false">
                    <div class="d-flex align-items-center gap-3">
                      <div class="round-16 d-flex align-items-center justify-content-center">
                        <i class="ti ti-circle"></i>
                      </div>
                      <span class="hide-menu">All Users</span>
                    </div>                   
                  </a>
                </li>

จากนั้นเพิ่มข้อมูลเร้าท์ในไฟล์ web.php

<?php

use App\Http\Controllers\UserController;
use App\Http\Controllers\ProfileController;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\AdminController; 

Route::get('/', function () {
    return view('welcome');
});

Route::get('/dashboard', [AdminController::class, 'home'])       
->middleware(['auth', 'verified'])->name('dashboard');

Route::get('/admin/dashboard', [AdminController::class, 'index'])  
->middleware(['auth', 'admin'])->name('admin.dashboard');

Route::middleware('auth')->group(function () {
    Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');
    Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');
    Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');
});

//ส่วน Admin
Route::name("admin.")->prefix("/admin")->middleware(["auth"])->group(function() {
    Route::get('/show_users', [UserController::class, 'index'])->name('user.showusers');
});

require __DIR__.'/auth.php';

2. ขั้นตอนต่อไป สร้างคอนโทรลเลอร์ ชื่อ UserController ใช้คำสั่งสร้างบน terminal ของ vs code

php artisan make:controller UserController -r

3. เปิดไฟล์ UserController เพิ่มโค้ดในส่วนฟังก์ชั่น index โดยด้านบนส่วนหัวให้ใส่ use…ตรงสีแดงด้วย

<?php

namespace App\Http\Controllers;
use App\Models\User;
use Illuminate\Http\Request;

class UserController extends Controller
{
    /**
     * Display a listing of the resource.
     */
    public function index()
    { 
        $users = User::paginate(5);
        return view('admin.user.index', compact('users'));
    }

4. สังเกตในฟังก์ชั่น index บรรทัดที่เขียนว่า return view(‘admin.user.index’, compact(‘users’)); แสดงให้เห็นว่าต้องเปิดไฟล์ชื่อ index อยู่ในโฟลเดอร์ admin/user ดังนั้นให้ทำการสร้างไฟล์ index ไว้ใน admin/user/index.blade.php ให้เรียบร้อย

5.ใส่โค้ดต่อไปนี้ลงในไฟล์ index.blade.php

@extends('layouts.app')
@section('content')
    <div class="card">
                <div class="card-body">
                  <div class="d-md-flex align-items-center">
                    <div>
                      <h4 class="card-title">รายชื่อผู้ใช้ระบบ</h4>
                      <p class="card-subtitle">
                        Admin Vs User
                      </p>
                    </div>
                    <div class="ms-auto mt-3 mt-md-0">
                      <select class="form-select theme-select border-0" aria-label="Default select example">
                        <option value="1">March 2025</option>
                        <option value="2">March 2025</option>
                        <option value="3">March 2025</option>
                      </select>
                    </div>
                  </div>
                  <div class="table-responsive mt-4">
                    <table class="table mb-0 text-nowrap varient-table align-middle fs-3">
                      <thead>
                        <tr>
                            <th scope="col" class="px-0 text-muted">
                            #
                          </th>
                          <th scope="col" class="px-0 text-muted">
                            Images
                          </th>
                          <th scope="col" class="px-0 text-muted">
                            Name
                          </th>
                          <th scope="col" class="px-0 text-muted">Email</th>
                          <th scope="col" class="px-0 text-muted">UserType</th>
                          <th scope="col" class="px-0 text-muted">Action</th>                          
                        </tr>
                      </thead>
                    <tbody>
                        @foreach ($users as $user )
                        <tr>
                            <td class="px-0">{{ $loop->iteration }}</td>
                          <td class="px-0">
                            <div class="d-flex align-items-center">
                              <img src="{{ asset('assets/images/profile/'.$user->profile) }}" class="rounded-circle" width="40"
                                alt="user_image" />                             
                            </div>
                          </td>

                          <td class="px-0">
                            <div class="d-flex align-items-center">
                              <div>
                                <h6 class="mb-0 fw-bolder">{{ $user->name }}</h6>
                                <span class="text-muted">nickname:{{ $user->username }}</span>
                              </div>
                            </div>
                          </td>

                          <td class="px-0">{{ $user->email }}</td>
                          <td class="px-0">{{ $user->usertype }}</td>
                          <td class="px-0">
                            <div class="d-flex align-items-center">
                              <a href="#" class="btn btn-success btn-sm">View</a>
                              <a href="#" class="btn btn-warning btn-sm">Edit</a>
                              <form action="#" method="">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                              </form>
                            </div>
                          </td>
                        </tr>
                      </tbody>
                      @endforeach
                    </table>
                  </div>
                </div>
              </div>
            
@endsection

5.สร้างผู้ใช้ใหม่ New User โดยเพิ่มเร้าท์ลิ้งค์ที่เมนู New User ในไฟล์ sudebar.blade.php ดังนี้

<li class="sidebar-item">
                  <a class="sidebar-link justify-content-between"  
                    href="{{ route('admin.user.create') }}">
                    <div class="d-flex align-items-center gap-3">
                      <div class="round-16 d-flex align-items-center justify-content-center">
                        <i class="ti ti-circle"></i>
                      </div>
                      <span class="hide-menu">New User</span>
                    </div>                    
                  </a>
                </li>

6. เพิ่มข้อมูลในเร้าท์ในไฟล์ web.php

Route::get('/create_users', [UserController::class, 'create'])->name('user.create');

7. ใส่โค้ดลงในไฟล์ create.blade.php

@extends('layouts.app')
@section('content')
<div class="card">
            <div class="card-body">
              <h5 class="card-title fw-semibold mb-4">New User</h5>
              <div class="card">
                <div class="card-body">
                  <form>
                    <div class="mb-3">
                      <label for="exampleInputEmail1" class="form-label">Email address</label>
                      <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                      <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
                    </div>
                    <div class="mb-3">
                      <label for="exampleInputPassword1" class="form-label">Password</label>
                      <input type="password" class="form-control" id="exampleInputPassword1">
                    </div>
                    <div class="mb-3 form-check">
                      <input type="checkbox" class="form-check-input" id="exampleCheck1">
                      <label class="form-check-label" for="exampleCheck1">Check me out</label>
                    </div>
                    <button type="submit" class="btn btn-primary">Submit</button>
                  </form>
                </div>
              </div>
              <h5 class="card-title fw-semibold mb-4">Disabled forms</h5>
              <div class="card mb-0">
                <div class="card-body">
                  <form>
                    <fieldset disabled>
                      <legend>Disabled fieldset example</legend>
                      <div class="mb-3">
                        <label for="disabledTextInput" class="form-label">Disabled input</label>
                        <input type="text" id="disabledTextInput" class="form-control" placeholder="Disabled input">
                      </div>
                      <div class="mb-3">
                        <label for="disabledSelect" class="form-label">Disabled select menu</label>
                        <select id="disabledSelect" class="form-select">
                          <option>Disabled select</option>
                        </select>
                      </div>
                      <div class="mb-3">
                        <div class="form-check">
                          <input class="form-check-input" type="checkbox" id="disabledFieldsetCheck" disabled>
                          <label class="form-check-label" for="disabledFieldsetCheck">
                            Can't check this
                          </label>
                        </div>
                      </div>
                      <button type="submit" class="btn btn-primary">Submit</button>
                    </fieldset>
                  </form>
                </div>
              </div>
            </div>
          </div>
@endsection