สวัสดีครับ ต่อเนื่องจากบทความที่แล้ว เราได้ทำการติดตั้ง Laravel 5.7 และ สร้างฐานข้อมูล blog กันมาแล้ว ในบทความนี้เราจะมาเขียน CRUD การ เพิ่ม แก้ไข และ ลบ ข้อมูลกันครับ
สร้าง Model ด้วยคำสั่ง php artisan
php artisan make:model Blog
เมื่อสร้างเรียบร้อยจะได้ไฟล์ app/Blog.php
แก้ไขไฟล์ Blog.php โดยเพิ่ม ชื่อฟิวด์ในตาราง blog ดังนี้
<?php namespace App; use Illuminate\Database\Eloquent\Model; class Blog extends Model { protected $fillable = [ 'title', 'description', 'author' ]; }
สร้าง BlogController ด้วย คำสั่ง php artisan
php artisan make:controller BlogController --resource
ซึ่งคำสั่ง –resource เป็นการบอกให้ Laravel สร้าง function สำหรับ CRUD ให้เราอัตโนมัติไม่ต้องพิมพ์เอง ตัวอย่างเช่น
index สำหรับแสดงข้อมูล
create สำหรับแสดงหน้าเพิ่มข้อมูล
store สำหรับบันทึกข้อมูล
edit สำหรับแสดงหน้าแก้ไขข้อมูล
update สำหรับบันทึกการแก้ไขข้อมูล
destroy สำหรับลบข้อมูล
เมื่อเรียบร้อยแล้วจะได้ไฟล์ app/Http/Controller/BlogController.php
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; class BlogController extends Controller { /** * Display a listing of the resource. * * @return \Illuminate\Http\Response */ public function index() { // } /** * Show the form for creating a new resource. * * @return \Illuminate\Http\Response */ public function create() { // } /** * Store a newly created resource in storage. * * @param \Illuminate\Http\Request $request * @return \Illuminate\Http\Response */ public function store(Request $request) { // } /** * Display the specified resource. * * @param int $id * @return \Illuminate\Http\Response */ public function show($id) { // } /** * Show the form for editing the specified resource. * * @param int $id * @return \Illuminate\Http\Response */ public function edit($id) { // } /** * Update the specified resource in storage. * * @param \Illuminate\Http\Request $request * @param int $id * @return \Illuminate\Http\Response */ public function update(Request $request, $id) { // } /** * Remove the specified resource from storage. * * @param int $id * @return \Illuminate\Http\Response */ public function destroy($id) { // } }
สร้าง View สำหรับแสดงผลข้อมูล
ก่อนอื่นเรามาสร้าง view ที่เป็น layout สำหรับใช้เป็นแม่แบบในการแสดงผลทุกหน้ากันก่อนครับ
สร้างไฟล์ app.blade.php ที่ Folder resource/views/app.blade.php จากนั้นเพิ่ม Code ด้งนี้
<!DOCTYPE html> <html lang="en"> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Laravel 5.7 Basic CRUD Tutorial</title> <link href="{{ asset('css/app.css') }}" rel="stylesheet" type="text/css" /> </head> <body> <div class="container"> @yield('content') </div> <script src="{{ asset('js/app.js') }}" type="text/js"></script> </body> </html>
สร้างไฟล์ create.blade.php สำหรับแสดงหน้าเพิ่มข้อมูล
สร้าง Folder resource/views/blog
สร้าง File resource/views/blog/create.blade.php จากนั้นเพิ่ม Code ดังนี้
@extends('app') @section('content') <div class="row"> <div class="col-sm-8 offset-sm-2"> <h1 class="display-4">Add</h1> <div> @if ($errors->any()) <div class="alert alert-danger"> <ul> @foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach </ul> </div><br /> @endif <form method="post" action="{{ route('blog.store') }}"> @csrf <div class="form-group"> <label for="title">Title:</label> <input type="text" class="form-control" name="title"/> </div> <div class="form-group"> <label for="description">Description:</label> <input type="text" class="form-control" name="description"/> </div> <div class="form-group"> <label for="author">Author:</label> <input type="text" class="form-control" name="author"/> </div> <button type="submit" class="btn btn-primary">Add New</button> <a href="{{ url('blog')}}" class="btn btn-dark">Cancel</a> </form> </div> </div> </div> @endsection
สร้างไฟล์ edit.blade.php สำหรับแสดงหน้าแก้ไขข้อมูล
สร้าง File resource/views/blog/edit.blade.php จากนั้น เพิ่ม code ดังนี้
@extends('app') @section('content') <div class="row"> <div class="col-sm-8 offset-sm-2"> <h1 class="display-4">Update Blog</h1> @if ($errors->any()) <div class="alert alert-danger"> <ul> @foreach ($errors->all() as $error) <li>{{ $error }}</li> @endforeach </ul> </div> <br /> @endif <form method="post" action="{{ route('blog.update', $blog->id) }}"> @method('PATCH') @csrf <div class="form-group"> <label for="title">Title:</label> <input type="text" class="form-control" name="title" value={{ $blog->title }} /> </div> <div class="form-group"> <label for="description">Description:</label> <textarea class="form-control" name="description">{{ $blog->description }}</textarea> </div> <div class="form-group"> <label for="author">Author:</label> <input type="text" class="form-control" name="author" value={{ $blog->author }} /> </div> <button type="submit" class="btn btn-primary">Update</button> <a href="{{ url('/blog')}}" class="btn btn-dark">Cancel</a> </form> </div> </div> @endsection
สร้างไฟล์ index.blade.php สำหรับแสดงข้อมูลหน้าแรก
สร้างไฟล์ resource/views/blog/index.blade.php จากนั้นเพิ่ม Code ดังนี้
@extends('app') @section('content') <div class="row"> <div class="col-sm-12"> <h1 class="display-4">Blog</h1> <br> <p> <a href="{{ url('blog/create')}}" class="btn btn-success">Add New</a> </p> <table class="table"> <thead class="thead-dark"> <tr> <th width="30%">Title</th> <th width="40%">Description</th> <th width="20%">Author</th> <th width="5%">Edit</th> <th width="5%">Delete</th> </tr> </thead> <tbody> @foreach($blogs as $blog) <tr> <td>{{$blog->title}}</td> <td>{{$blog->description}}</td> <td>{{$blog->author}}</td> <td> <a href="{{ route('blog.edit',$blog->id)}}" class="btn btn-primary">Edit</a> </td> <td> <form action="{{ route('blog.destroy', $blog->id)}}" method="post"> @csrf @method('DELETE') <button class="btn btn-danger" type="submit">Delete</button> </form> </td> </tr> @endforeach </tbody> </table> <div> </div> @endsection
เมื่อสร้าง view ทั้งหมดเรียบร้อยแล้วจากนั้นเราจะมาแก้ไข Function ต่าง ๆ ใน BlogController กันต่อ
ไปที่ไฟล์ app/Http/Controllers/BlogController.php จากนั้นแก้ไข Function ต่าง ๆ ดังนี้
<?php namespace App\Http\Controllers; use Illuminate\Http\Request; use App\Blog; //Use Blog Model class BlogController extends Controller { /** * Display a listing of the resource. * * @return \Illuminate\Http\Response */ public function index() { $blogs = Blog::all(); return view('blog.index',compact('blogs')); } /** * Show the form for creating a new resource. * * @return \Illuminate\Http\Response */ public function create() { // return view('blog.create'); } /** * Store a newly created resource in storage. * * @param \Illuminate\Http\Request $request * @return \Illuminate\Http\Response */ public function store(Request $request) { $request->validate([ 'title'=>'required', 'description'=>'required', 'author'=>'required' ]); $blog = new Blog([ 'title' => $request->get('title'), 'description' => $request->get('description'), 'author' => $request->get('author'), ]); $blog->save(); return redirect('/blog')->with('success', 'blog saved!'); } /** * Display the specified resource. * * @param int $id * @return \Illuminate\Http\Response */ public function show($id) { // } /** * Show the form for editing the specified resource. * * @param int $id * @return \Illuminate\Http\Response */ public function edit($id) { $blog = Blog::find($id); return view('blog.edit',compact('blog')); } /** * Update the specified resource in storage. * * @param \Illuminate\Http\Request $request * @param int $id * @return \Illuminate\Http\Response */ public function update(Request $request, $id) { $request->validate([ 'title'=>'required', 'description'=>'required', 'author'=>'required' ]); $blog = Blog::find($id); $blog->title = $request->get('title'); $blog->description = $request->get('description'); $blog->author = $request->get('author'); $blog->save(); return redirect('/blog')->with('success', 'blog updated!'); } /** * Remove the specified resource from storage. * * @param int $id * @return \Illuminate\Http\Response */ public function destroy($id) { $blog = Blog::find($id); $blog->delete(); return redirect('/blog'); } }
ขั้นตอนสุดท้ายคือการสร้าง Route ใน laravel เราจะต้องสร้าง route เพิ่อระบุว่าให้ Url ที่เราต้องการ ไปเรียก Controller ไหนมาแสดงผล
ไปที่ routes/web.php จากนั้นเพิ่ม Code ดังนี้
<?php /* |-------------------------------------------------------------------------- | Web Routes |-------------------------------------------------------------------------- | | Here is where you can register web routes for your application. These | routes are loaded by the RouteServiceProvider within a group which | contains the "web" middleware group. Now create something great! | */ Route::get('/', function () { return view('welcome'); }); Route::resource('blog','BlogController');// ADD this Code
เมื่อทุกอย่างเสร็จเรียบร้อยจากนั้นทดสอบการเข้าใช้งานโดยไปที่
http://localhost/blog/public/blog
หากไม่มีอะไรผิดพลาดจะแสดงผลดังภาพ
แล้วพบกันใหม่ในบทความต่อไป เมือมีโอกาศ
ขอบคุณครับ