Programmingไม่มีหมวดหมู่

ตัวอย่างการใช้งาน Laravel 11 CRUD

การใช้งาน Laravel 11 สำหรับการสร้าง CRUD (Create, Read, Update, Delete) นั้น สามารถแบ่งออกเป็นขั้นตอนต่างๆ ดังนี้:

ติดตั้ง Laravel 11:

เริ่มต้นด้วยการติดตั้ง Laravel ผ่าน Composer:

composer create-project --prefer-dist laravel/laravel products

ตั้งค่า Database:

เปิดไฟล์ .env และตั้งค่าการเชื่อมต่อฐานข้อมูล:

DB_CONNECTION=mysql 
DB_HOST=127.0.0.1 
DB_PORT=3306 
DB_DATABASE=products 
DB_USERNAME=root 
DB_PASSWORD=root

สร้าง Migration และ Model:

สร้าง Model และ Migration สำหรับฐานข้อมูล:

php artisan make:migration create_products_table --create=products

จากนั้นแก้ไขไฟล์ Migration ที่อยู่ใน database/migrations:

<?php 
use Illuminate\Database\Migrations\Migration; 
use Illuminate\Database\Schema\Blueprint; 
use Illuminate\Support\Facades\Schema; 
return new class extends Migration { 
     public function up(): void { 
          Schema::create('products', function (Blueprint $table) { 
               $table->id(); 
               $table->string('name'); 
               $table->text('detail'); 
               $table->timestamps(); 
          }); 
     } 
     public function down(): void { 
          Schema::dropIfExists('products'); 
     } 
};

รันคำสั่งต่อไปนี้เพื่อสร้างตารางในฐานข้อมูล:

php artisan migrate

 

สร้าง Controller:

สร้าง Controller สำหรับจัดการกับ CRUD:

php artisan make:controller ProductController --resource --model=Product

 

จะแสดงข้อความแจ้งว่า Product Model ยังไม่ถูกสร้างต้องการสร้างด้วยหรือเปล่า ให้เราตอบ Yes เพื่อสร้าง Model Product ด้วย

หลังจากรันคำสั่งด้านล่างนี้ จะพบไฟล์ใหม่ที่ “app/Http/Controllers/ProductController.php” ในคอนโทรลเลอร์นี้จะสร้างเมธอดเจ็ดตัวโดยค่าเริ่มต้นตามที่แสดงด้านล่าง:

  1. index()
  2. create()
  3. store()
  4. show()
  5. edit()
  6. update()
  7. destroy()

ดังนั้นให้คัดลอกโค้ดด้านล่างนี้และวางลงในไฟล์ ProductController.php

<?php
namespace App\Http\Controllers; 
use App\Models\Product; 
use Illuminate\Http\RedirectResponse; 
use Illuminate\Http\Request; 
use Illuminate\Http\Response; 
use Illuminate\View\View; 
class ProductController extends Controller { 
     public function index(): View { 
          $products = Product::latest()->paginate(5); 
          return view('products.index',compact('products'))->with('i', (request()->input('page', 1) - 1) * 5); 
     }
     public function create(): View { 
          return view('products.create'); 
     }
     public function store(Request$request): RedirectResponse { 
          $request->validate([ 'name' => 'required', 'detail' => 'required', 'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048', ]); 
          $input = $request->all(); 
          if ($image = $request->file('image')) { 
               $destinationPath = 'images/'; 
               $profileImage = date('YmdHis') .".".$image->getClientOriginalExtension(); 
               $image->move($destinationPath, $profileImage); $input['image'] = "$profileImage"; 
          } 
          Product::create($input); 
          return redirect()->route('products.index')->with('success', 'Product created successfully.'); 
     }
     public function show(Product$product): View { 
          return view('products.show', compact('product')); 
     }
     public function edit(Product$product): View { 
          return view('products.edit', compact('product')); 
     }
     public function update(Request$request, Product$product): RedirectResponse { 
          $request->validate([ 'name' => 'required', 'detail' => 'required' ]); 
          $input = $request->all(); 
          if ($image = $request->file('image')) { 
               $destinationPath = 'images/'; 
               $profileImage = date('YmdHis') .".".$image->getClientOriginalExtension(); 
               $image->move($destinationPath, $profileImage); 
               $input['image'] = "$profileImage"; 
          } 
          else { 
               unset($input['image']); 
          } 
          $product->update($input); 
          return redirect()->route('products.index')->with('success', 'Product updated successfully'); 
     }
     public function destroy(Product$product): RedirectResponse { 
          $product->delete(); 
          returnredirect()->route('products.index')->with('success', 'Product deleted successfully'); 
     }
}

ดังนั้นหลังจากรันคำสั่งด้านล่างนี้ จะพบไฟล์ “app/Models/Product.php” และให้ใส่เนื้อหาด้านล่างลงในไฟล์ 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 = [ 'name', 'detail', 'image' ]; 
}

สร้าง Resource Route:

ที่นี่ เราจำเป็นต้องเพิ่มเส้นทางสำหรับการทำงานของระบบ CRUD สำหรับสินค้า ดังนั้นให้เปิดไฟล์ “routes/web.php” และเพิ่มเส้นทางดังต่อไปนี้:

<?php 
use Illuminate\Support\Facades\Route; 
use App\Http\Controllers\ProductController; 
Route::resource('products', ProductController::class);

สร้าง Blade Files:

ในขั้นตอนสุดท้าย เราต้องสร้างไฟล์ Blade เท่านั้น เราจะเริ่มจากการสร้างไฟล์เลย์เอาต์ แล้วสร้างโฟลเดอร์ใหม่ชื่อ “products” จากนั้นสร้างไฟล์ Blade สำหรับแอป CRUD ดังนั้น คุณต้องสร้างไฟล์ Blade ดังต่อไปนี้:

  1. layout.blade.php
  2. index.blade.php
  3. create.blade.php
  4. edit.blade.php
  5. show.blade.php

ดังนั้นให้สร้างไฟล์ตามด้านล่างนี้และใส่โค้ดตามที่แสดงด้านล่าง:

resources/views/products/layout.blade.php

<!DOCTYPE html> 
<html> 
<head> 
<title>Laravel 11 CRUD</title> 
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" /> 
</head> 
<body> 
     <div class="container"> @yield('content') </div> 
</body> 
</html>

resources/views/products/index.blade.php

@extends('products.layout') 
@section('content') 
     <div class="card mt-5"> 
          <h2 class="card-header">Laravel 11 CRUD</h2> 
          <div class="card-body"> 
               @session('success') 
               <div class="alert alert-success" role="alert"> {{ $value }} </div> 
               @endsession 
               <div class="d-grid gap-2 d-md-flex justify-content-md-end"> 
                    <a class="btn btn-success btn-sm" href="{{ route('products.create') }}"> <i class="fa fa-plus"></i> Create New Product</a> </div> 
                    <table class="table table-bordered table-striped mt-4"> 
                    <thead> 
                    <tr> 
                         <th width="80px">No</th> 
                         <th>Image</th> 
                         <th>Name</th> 
                         <th>Details</th> 
                         <th width="250px">Action</th> 
                    </tr> 
                    </thead> 
                    <tbody> 
                    @forelse ($products as $product) 
                    <tr> 
                         <td>{{ ++$i }}</td> 
                         <td><img src="/images/{{ $product->image }}" width="100px"></td> 
                         <td>{{ $product->name }}</td> <td>{{ $product->detail }}</td> 
                         <td> 
                              <form action="{{ route('products.destroy',$product->id) }}" method="POST"> 
                              <a class="btn btn-info btn-sm" href="{{ route('products.show',$product->id) }}"><i class="fa-solid fa-list"></i> Show</a> 
                              <a class="btn btn-primary btn-sm" href="{{ route('products.edit',$product->id) }}"><i class="fa-solid fa-pen-to-square"></i> Edit</a> 
                              @csrf @method('DELETE') 
                              <button type="submit" class="btn btn-danger btn-sm"><i class="fa-solid fa-trash"></i> Delete</button> 
                              </form> 
                         </td> 
                 </tr> 
                 @empty 
                 <tr> 
                      <td colspan="5">There are no data.</td> 
                 </tr> 
                 @endforelse 
                </tbody> 
                </table> 
                {!! $products->withQueryString()->links('pagination::bootstrap-5') !!} 
          </div> 
     </div> 
@endsection

 

 

 

Related Posts

Select your currency