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">
@if (session("success"))
        <div class="alert alert-success alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
            <h5><i class="icon fas fa-check"></i> Success!</h5>
            <p class="m-0">{{ session("success") }}</p>
        </div>
        @endif
        @if (session('status'))
            <div class="alert alert-success">
                {{ session('status') }}
            </div>
        @endif
                <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">
                      <a href="{{ route('admin.user.create') }}" class="btn btn-outline-info">+ NewUser</a>
                    </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>

                <div class="d-flex justify-content-center">                    
                    {{ $users->links() }}                    
                </div>
            
@endsection

-สังเกตส่วนท้ายที่ตัวหนังสือสีแดง $user->links() หมายถึงคำสั่งในการแบ่งหน้า ซึ่งใน UserController ฟังก์ชั่น index เขียนไว้ว่า $users = User::paginate(5); เท่ากับมีแบ่งแสดงหน้า หน้าละ 5 รายการ

* เพื่อให้การแสดงผลคำสั่งการแบ่งหน้าใช้งานได้ ต้องเปิดไฟล์ AppServiceProvider.php ที่อยู่ในโฟลเดอร์ app/Providers แล้วเพิ่มโค้ดในส่วน boot() ดังนี้

<?php
namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Illuminate\Pagination\Paginator;     //เพิ่มตรงนี้ด้วย
class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        //
    }

    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
         Paginator::useBootstrap();
    }
}

5. ในไฟล์หน้า index.blade.php บริเวณที่มีตัวหนังสือสีแดง

ได้มีการสร้างปุ่มไว้ด้านมุมขวาของหน้าจอ เพื่อใช้สร้างผู้ใช้ใหม่ New User (ใช้เร้าท์เดียวกับเมนู)
และในเมนูด้านซ้ายตรงเมนู New User ให้เพิ่มเร้าท์ลิ้งค์ที่เมนู New User ในไฟล์ sidebar.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 ไว้ในโฟลเดอร์ admin/user และใส่โค้ดลงในไฟล์ create.blade.php (โดยให้ไปคัดลอกโค้ดจาก user profile มาใส่ได้เลย) ทำการเปลี่ยนแปลงแก้ไขฟิลด์ต่างๆให้ถูกต้อง ดังโค้ดด้านล่าง

@extends('layouts.app')
@section('items')
    <div class="card-header d-flex justify-content-between align-items-center">
        <h3 class="m-0">New User</h3>
            <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="/dashboard">Dashboard</a></li>
                <li class="breadcrumb-item active">New User</li>
            </ol>
    </div>
@endsection
@section('content')   
   
            <div class="row">
                <div class="col-12">
                    <div class="card">                        
                        <div class="card-body">
                            @if ($errors->any())
                            <div class="alert alert-danger alert-dismissible">
                                
                                <h5><i class="ti ti-alert-circle"></i> Error!</h5>
                                @foreach ($errors->all() as $error)
                                <p class="m-0">{{ $error }}</p>
                                @endforeach
                            </div>
                            @endif
                            
                            <form action="{{ route("admin.user.store") }}" enctype="multipart/form-data" method="POST">
                                @csrf
                                <div class="row">
                                    <div class="col-md-6 mx-auto mb-3">
                                        <div class="form-group">
                                            <label for="profile">Profile Photo</label>
                                            <img width="120px" id="profilepreview" height="120px" src="{{ asset("assets/images/profile/".($user->profile ?? "user-8.jpg")) }}" class="d-block rounded rounded-circle mb-2"/>
                                            <input type="file" class="form-control" id="profile" name="profile" accept="image/*"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="name">Name</label>
                                            <input type="text" class="form-control" id="name" name="name" placeholder="Enter name" value="{{ old('name') }}" required />
                                        </div>
                                        <div class="form-group">
                                            <label for="username">Username</label>
                                            <input type="text" class="form-control" id="username" name="username" placeholder="Enter username" value="{{ old('username') }}"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="email">Email</label>
                                            <input type="email" class="form-control" id="email" name="email" placeholder="Enter email" value="{{ old('email') }}" required/>
                                        </div>
                                        <div class="form-group">
                                            <label for="Password">Password</label>
                                            <input type="password" class="form-control" id="password" name="password" required/>
                                        </div>
                                        <div class="form-group">
                                            <label for="about">About</label>
                                            <textarea class="form-control" id="about" name="about" rows="4" value="{{ old('about') }}"></textarea>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mx-auto">
                                        <div class="form-group">
                                            <label for="about">UserType</label>
                                            <select class="form-control" id="usertype" name="usertype">
                                              <option value="admin">ผู้ดูแลระบบ</option>
                                              <option value="admin">ผู้ใช้ทั่วไป</option>
                                            </select>
                                        </div>
                                        <div class="form-group">
                                            <label for="facebook">Facebook</label>
                                            <input type="url" class="form-control" id="facebook" name="facebook" placeholder="Enter facebook profile link" value="{{ old('facebook') }}"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="twitter">Twitter</label>
                                            <input type="url" class="form-control" id="twitter" name="twitter" placeholder="Enter twitter profile link" value="{{ old('twitter') }}"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="instagram">Instagram</label>
                                            <input type="url" class="form-control" id="instagram" name="instagram" placeholder="Enter instagram profile link" value="{{ old('instagram') }}"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="linkedin">LinkedIn</label>
                                            <input type="url" class="form-control" id="linkedin" name="linkedin" placeholder="Enter linkedin profile link" value="{{ old('linkedin') }}"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="youtube">YouTube</label>
                                            <input type="url" class="form-control" id="youtube" name="youtube" placeholder="Enter youtube profile link" value="{{ old('youtube') }}"/>
                                        </div>
                                    </div>
                                </div>
                                <button class="btn btn-primary" type="submit">Save</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        
    

@endsection

@section("script")
<script src="{{ asset("assets/js/sweetalert2.all.min.js") }}"></script>
<script>
    $(document).ready(function() {
        function readURL(input, preview, image) {
            if (input.files && input.files[0] && input.files[0].type.includes("image")) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $(preview).removeClass("d-none");
                    $(preview).attr('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            } else {
                $(image).val('');
                $(preview).addClass("d-none");
                Swal.fire({
                    icon: "error",
                    text: "Select a valid image!"
                });
            }
        }
        $("#profile").change(function(){
            readURL(this, "#profilepreview", "#profile");
        });
    });
</script>
@endsection

-ในไฟล์ create.blade.php มีตัวหนังสือสีแดง <form action=”{{ route(“admin.user.store”) }}” enctype=”multipart/form-data” method=”POST”> ดังนั้นต้องดำเนินการเพิ่ม route ในไฟล์ web.php

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

8. เปิดไฟล์ UserController เพิ่มโค้ดลงในส่วนฟังก์ชั่น store ดังนี้

public function store(Request $request)
    {
        $validated = $request->validate([
            'name' => 'required|string|max:255',
            'username' => 'nullable|string|max:255',
            'about' => 'nullable|string|max:255',
            'email' => 'required','string','lowercase','email','max:255',
            'usertype' => 'required|string|max:255',
            'profile' => 'nullable|image|max:2048',
            'password' => 'required|string|min:8',
            'facebook' => 'nullable|string|max:255',
            'twitter' => 'nullable|string|max:255',
            'instagram' => 'nullable|string|max:255',
            'linkedin' => 'nullable|string|max:255',
            'youtube' => 'nullable|string|max:255'
        ]);
            $validated['password'] = bcrypt($validated['password']);
    
        if ($request->hasFile('profile') && $request->file('profile')->isValid()) {
                $image = $request->file("profile");
                $imageName = time() . '.' . $image->getClientOriginalExtension();
                $image->move(public_path("assets/images/profile"), $imageName);
                $validated['profile'] = $imageName;           
        }
            $user = User::create($validated);
            return to_route('admin.user.showusers')->with('status', 'New User-created');
    }

บันทึกทุกอย่างให้เรียบร้อย จากนั้นทดสอบใส่ข้อมูล (ต้องใช้งานได้)

9. ขั้นตอนต่อไป คลิ๊กที่ปุ่ม view เพื่อดูข้อมูลผู้ใช้รายนั้นๆโดยละเอียด

เริ่มโดยการสร้างเร้าท์เพื่อลิ้งค์ที่ปุ่ม view ดังนี้

<td class="px-0">
                            <div class="d-flex align-items-center">
                              <a href="{{ route('admin.user.show') }}" class="btn btn-success btn-sm">View</a>
                              <a href="{{ route('admin.user.edit') }}" 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>

10. เพิ่มข้อมูลใน web.php

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

10. เพิ่มข้อมูลลงในไฟล์ UserController ฟังก์ชั่น show ดังนี้

public function show(string $id)
    {
        $user = User::find($id);
        return view('admin.user.show', compact('user'));
    }

11. สร้างไฟล์ show.blade.php ไว้ในโฟลเดอร์ admin/user/show.blade.php และใส่โค้ด ดังนี้

@extends('layouts.app')
@section('items')
    <div class="card-header d-flex justify-content-between align-items-center">
        <h3 class="m-0">User Details</h3>
            <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="/dashboard">Dashboard</a></li>
                <li class="breadcrumb-item active">User Details</li>
            </ol>
    </div>
@endsection
@section('content')   
   
            <div class="row">
                <div class="col-12">
                    <div class="card">                       
                        <div class="card-body">
                                <div class="row">
                                    <div class="col-md-6 mx-auto">
                                        <div class="form-group">
                                            <label for="profile">User Photo</label>
                                            <img width="120px" id="profilepreview" height="120px" src="{{ asset("assets/images/profile/".($user->profile ?? "user-8.jpg")) }}" class="d-block rounded rounded-circle mb-2"/>
                                        </div>
                                        <div class="form-group mb-2">
                                            <label for="name">ชื่อ-นามสกุล</label>
                                            <input type="text" class="form-control" value="{{ $user->name }}" readonly/>
                                        </div>
                                        <div class="form-group mb-2">
                                            <label for="username">Username</label>
                                            <input type="text" class="form-control" value="{{ $user->username }}" readonly/>
                                        </div>
                                        <div class="form-group mb-2">
                                            <label for="email">Email</label>
                                            <input type="email" class="form-control" value="{{ $user->email }}" readonly/>
                                        </div>
                                        <div class="form-group mb-3">
                                            <label for="about">About</label>
                                            <textarea class="form-control" rows="4" readonly>{{ $user->about }}</textarea>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mx-auto">
                                        <div class="form-group mb-2">
                                            <label for="facebook">Facebook</label>
                                            <input type="url" class="form-control" value="{{ $user->facebook }}" readonly/>
                                        </div>
                                        <div class="form-group mb-2">
                                            <label for="twitter">Twitter</label>
                                            <input type="url" class="form-control" value="{{ $user->twitter }}" readonly/>
                                        </div>
                                        <div class="form-group mb-2">
                                            <label for="instagram">Instagram</label>
                                            <input type="url" class="form-control" value="{{ $user->instagram }}" readonly/>
                                        </div>
                                        <div class="form-group mb-2">
                                            <label for="linkedin">LinkedIn</label>
                                            <input type="url" class="form-control" value="{{ $user->linkedin }}" readonly/>
                                        </div>
                                        <div class="form-group">
                                            <label for="youtube">YouTube</label>
                                            <input type="url" class="form-control" value="{{ $user->youtube }}" readonly/>
                                        </div>
                                    </div>
                                </div>
        
                        </div>
                    </div>
                </div>
            </div>
        
    

@endsection

ทดสอบการใช้งาน โดยคลิ๊กที่ปุ่ม view (ใช้งานได้แล้ว)

12. ที่ปุ่ม Edit ให้ทำการสร้างเร้าท์เพื่อลิงค์ โดยเพิ่มโค้ด ดังนี้

<td class="px-0">
                            <div class="d-flex align-items-center">
                              <a href="{{ route('admin.user.show', $user->id) }}" class="btn btn-success btn-sm">View</a>
                              <a href="route('admin.user.edit', $user->id)" 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>

13. เพิ่มข้อมูลใน web.php ดังนี้

//ส่วน Admin
Route::name("admin.")->prefix("/admin")->middleware(["auth"])->group(function() {
    Route::get('/show_users', [UserController::class, 'index'])->name('user.showusers');
    Route::get('/create_users', [UserController::class, 'create'])->name('user.create');
    Route::post('/add_users', [UserController::class, 'store'])->name('user.store');
    Route::get('/show_users/{id}', [UserController::class, 'show'])->name('user.show');
    Route::get('/edit_users/{id}', [UserController::class, 'edit'])->name('user.edit');
});

14. เพิ่มข้อมูลในไฟล์ UserController ในส่วนฟังก์ชั่น edit ดังนี้

public function edit(string $id)
    {
        $user = User::find($id);
        return view('admin.user.edit', compact('user'));
    }

15. สร้างไฟล์ edit.blade.php ไว้ในโฟลเดอร์ admin/user/edit.blade.php เพิ่มโค้ด ดังนี้

@extends('layouts.app')
@section('items')
    <div class="card-header d-flex justify-content-between align-items-center">
        <h3 class="m-0">Edit User Profile</h3>
            <ol class="breadcrumb float-sm-right">
                <li class="breadcrumb-item"><a href="/dashboard">Dashboard</a></li>
                <li class="breadcrumb-item active">Edit User Profile</li>
            </ol>
    </div>
@endsection
@section('content')   
   
            <div class="row">
                <div class="col-12">
                    <div class="card">                       
                        <div class="card-body">
                            @if ($errors->any())
                            <div class="alert alert-danger alert-dismissible">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                <h5><i class="icon fas fa-ban"></i> Error!</h5>
                                @foreach ($errors->all() as $error)
                                <p class="m-0">{{ $error }}</p>
                                @endforeach
                            </div>
                            @endif
                            @if (session("success"))
                            <div class="alert alert-success alert-dismissible">
                                <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                                <h5><i class="icon fas fa-check"></i> Success!</h5>
                                <p class="m-0">{{ session("success") }}</p>
                            </div>
                            @endif
                            @if (session('status'))
                                <div class="alert alert-success">
                                    {{ session('status') }}
                                </div>
                            @endif
                            <form action="{{ route('admin.user.update', $user->id) }}" enctype="multipart/form-data" method="POST">
                                @csrf
                                 @method('PATCH')
                                <div class="row">
                                    <div class="col-md-6 mx-auto">
                                        <div class="form-group">
                                            <label for="profile">Profile Photo</label>
                                            <img width="120px" id="profilepreview" height="120px" src="{{ asset("assets/images/profile/".($user->profile ?? "user-8.jpg")) }}" class="d-block rounded rounded-circle mb-2"/>
                                            <input type="file" class="form-control" id="profile" name="profile" accept="image/*"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="name">Name</label>
                                            <input type="text" class="form-control" id="name" name="name" placeholder="Enter name" value="{{ $user->name }}"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="username">Username</label>
                                            <input type="text" class="form-control" id="username" name="username" placeholder="Enter username" value="{{ $user->username }}"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="email">Email</label>
                                            <input type="email" class="form-control" id="email" name="email" placeholder="Enter email" value="{{ $user->email }}"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="usertype">UserType</label>
                                            <input type="text" class="form-control" id="usertype" name="usertype" placeholder="Enter usertype" value="{{ $user->usertype }}"/>
                                        </div>
                                        <div class="form-group mb-3">
                                            <label for="about">About</label>
                                            <textarea class="form-control" id="about" name="about" rows="4">{{ $user->about }}</textarea>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mx-auto">
                                        <div class="form-group">
                                            <label for="facebook">Facebook</label>
                                            <input type="url" class="form-control" id="facebook" name="facebook" placeholder="Enter facebook profile link" value="{{ $user->facebook }}"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="twitter">Twitter</label>
                                            <input type="url" class="form-control" id="twitter" name="twitter" placeholder="Enter twitter profile link" value="{{ $user->twitter }}"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="instagram">Instagram</label>
                                            <input type="url" class="form-control" id="instagram" name="instagram" placeholder="Enter instagram profile link" value="{{ $user->instagram }}"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="linkedin">LinkedIn</label>
                                            <input type="url" class="form-control" id="linkedin" name="linkedin" placeholder="Enter linkedin profile link" value="{{ $user->linkedin }}"/>
                                        </div>
                                        <div class="form-group">
                                            <label for="youtube">YouTube</label>
                                            <input type="url" class="form-control" id="youtube" name="youtube" placeholder="Enter youtube profile link" value="{{ $user->youtube }}"/>
                                        </div>
                                    </div>
                                </div>
                                <button class="btn btn-primary" type="submit">Update</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        
@endsection

@section("script")
<script src="{{ asset("assets/js/sweetalert2.all.min.js") }}"></script>
<script>
    $(document).ready(function() {
        function readURL(input, preview, image) {
            if (input.files && input.files[0] && input.files[0].type.includes("image")) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    $(preview).removeClass("d-none");
                    $(preview).attr('src', e.target.result);
                }
                reader.readAsDataURL(input.files[0]);
            } else {
                $(image).val('');
                $(preview).addClass("d-none");
                Swal.fire({
                    icon: "error",
                    text: "การเลือกรูปแบบ image ไม่ถูกต้อง!"
                });
            }
        }
        $("#profile").change(function(){
            readURL(this, "#profilepreview", "#profile");
        });
    });
</script>
@endsection

15. เพิ่มข้อมูลใน web.php ดังนี้

//ส่วน Admin
Route::name("admin.")->prefix("/admin")->middleware(["auth"])->group(function() {
    Route::get('/show_users', [UserController::class, 'index'])->name('user.showusers');
    Route::get('/create_users', [UserController::class, 'create'])->name('user.create');
    Route::post('/add_users', [UserController::class, 'store'])->name('user.store');
    Route::get('/show_users/{id}', [UserController::class, 'show'])->name('user.show');
    Route::get('/edit_users/{id}', [UserController::class, 'edit'])->name('user.edit');
    Route::patch('/update_users/{id}', [UserController::class, 'update'])->name('user.update');
});

16. เพิ่มข้อมูลใน UserController ส่วนของฟังก์ชั่น update ด้วยโค้ด ดังนี้

public function update(Request $request, string $id)
    {
        $user = User::find($id);
        $validated = $request->validate([
            'name' => 'required|string|max:255',
            'username' => 'nullable|string|max:255',
            'about' => 'nullable|string|max:255',
            'email' => 'required','string','lowercase','email','max:255',
            'usertype' => 'required|string|max:255',
            'profile' => 'nullable|image|max:2048',
            'facebook' => 'nullable|string|max:255',
            'twitter' => 'nullable|string|max:255',
            'instagram' => 'nullable|string|max:255',
            'linkedin' => 'nullable|string|max:255',
            'youtube' => 'nullable|string|max:255'
        ]);
    
        if ($request->hasFile('profile') && $request->file('profile')->isValid()) {
            $image = $request->file("profile");
            $imageName = time() . '.' . $image->getClientOriginalExtension();
            $image->move(public_path("assets/images/profile"), $imageName);
                if ($user->profile) {
                    if (File::exists(public_path("assets/images/profile/".$user->profile))) {
                    File::delete(public_path("assets/images/profile/".$user->profile));
                }
            }
                $validated['profile'] = $imageName;           
        }
            $user->update($validated);
            return to_route('admin.user.edit', $user->id)->with('status', 'User-Data Updated');
    }

และ use ไฟล์ ในส่วนหัวด้านบนไฟล์ UserController ด้วย ดังนี้

<?php

namespace App\Http\Controllers;
use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\File;

17. ทดสอบใช้งานในส่วนปุ่ม edit

18. เพิ่มข้อมูลลงในปุ่ม Delete เพื่อทำเร้าท์ลิ้งค์ ลบข้อมูล ดังนี้

<td class="px-0">
                            <div class="d-flex align-items-center">
                              <a href="{{ route('admin.user.show', $user->id) }}" class="btn btn-success btn-sm">View</a>
                              <a href="{{ route('admin.user.edit', $user->id) }}" class="btn btn-warning btn-sm">Edit</a>
                              <form action="{{ route('admin.user.delete', $user->id) }}" method="post">
                                @csrf
                                @method('DELETE')
                                <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                              </form>
                            </div>
                          </td>

19. เพิ่มข้อมูลเร้าท์ในไฟล์ web.php ดังนี้

//ส่วน Admin
Route::name("admin.")->prefix("/admin")->middleware(["auth"])->group(function() {
    Route::get('/show_users', [UserController::class, 'index'])->name('user.showusers');
    Route::get('/create_users', [UserController::class, 'create'])->name('user.create');
    Route::post('/add_users', [UserController::class, 'store'])->name('user.store');
    Route::get('/show_users/{id}', [UserController::class, 'show'])->name('user.show');
    Route::get('/edit_users/{id}', [UserController::class, 'edit'])->name('user.edit');
    Route::patch('/update_users/{id}', [UserController::class, 'update'])->name('user.update');
    Route::delete('/delete_users/{id}', [UserController::class, 'destroy'])->name('user.delete');
});

20. เพิ่มข้อมูลในไฟล์ UserController ส่วนฟังก์ชั่น destroy ดังนี้

public function destroy(string $id)
    {
        $user = User::find($id);
        $user->delete();
        return to_route('admin.user.showusers')->with('status', 'User-Data Deleted');
    }

ทดสอบการใช้งาน โดยคลิ๊กที่ปุ่ม Delete ท้ายชื่อผู้ใช้ ต้องลบผู้ใช้รายนั้นๆได้ และอัพเดทจำนวนผู้ใช้ที่หน้าเดิมได้

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

By admin

เรื่องห้ามพลาด

Laravel-New Category (CRUD)

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

Laravel-Profile Setting

น้ำตกผาเอียง

By admin

Related Post

เรื่องห้ามพลาด