สัปดาห์ที่ 10 • การอัปเดตข้อมูลและระบบฟอร์มแก้ไข01-406-093-203 Laravel Course
01-406-093-203
การพัฒนาเว็บแอปพลิเคชันด้วยเฟรมเวิร์ค
โดย นายศุภมิตร จันทร์โทวงศ์
- สาขาวิชาระบบสารสนเทศ คณะบริหารธุรกิจ
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 1 / 29
สัปดาห์ที่ 10 • การอัปเดตข้อมูลและระบบฟอร์มแก้ไข01-406-093-203 Laravel Course
เช็คชื่อเข้าชั้นเรียน
- ให้นักศึกษาสแกน QR Code นี้เพื่อเข้าสู่ระบบเช็คชื่อเข้าเรียน
- ระบบจะทำการบันทึกประวัติการเข้าเรียนในวิชานี้อัตโนมัติ
ผู้สอนยังไม่ได้เปิดระบบเช็คชื่อสำหรับบทเรียนสัปดาห์นี้ หรือหมดเวลากรอกข้อมูลแล้ว
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 2 / 29
สัปดาห์ที่ 10 • การอัปเดตข้อมูลและระบบฟอร์มแก้ไข01-406-093-203 Laravel Course
🎮 กิจกรรมวิ่งสปีดรัน: Laravel Code & Coin Dash!
🍄 COOKIE RUN & MARIO FULLSCREEN RUNNER!
Laravel Code & Coin Dash!
วิ่งสปีดรันเก็บเหรียญทองและกล่องโค้ด Laravel (`update()`, `POST`, `!$status`) หลบสิ่งกีดขวาง ท้าทายสถิติสูงสุดแบบเต็มจอสไตล์ Cookie Run & Mario!
การควบคุม
กด Spacebar / แตะหน้าจอเพื่อกระโดด (Double Jump)
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 3 / 29
สัปดาห์ที่ 10 • การอัปเดตข้อมูลและระบบฟอร์มแก้ไข01-406-093-203 Laravel Course
แบบทดสอบก่อนเรียน (Pre-test)
1. คำสั่ง Query Builder ข้อใดใช้สำหรับอัปเดตข้อมูลแถวที่ระบุในตารางฐานข้อมูล?
A. DB::table('blogs')->where('id', $id)->update($data);
B. DB::table('blogs')->where('id', $id)->change($data);
C. DB::table('blogs')->where('id', $id)->save($data);
D. DB::table('blogs')->where('id', $id)->set($data);
2. การกำหนด Route เพื่อรับค่าพารามิเตอร์ ID จาก URL ไปยัง Controller ต้องเขียนในรูปแบบใด?
A. Route::get('/change?id=$id', [AdminController::class, 'change']);
B. Route::get('/change/{id}', [AdminController::class, 'change'])->name('change');
C. Route::get('/change/$id', [AdminController::class, 'change']);
D. Route::get('/change/(id)', [AdminController::class, 'change']);
3. เมธอดใดของ Query Builder ที่ใช้ดึงข้อมูลเพียงรายการเดียวแถวแรกที่ตรงตามเงื่อนไข คืนค่าเป็น Object?
A. get()
B. first()
C. findMany()
D. single()
4. การสลับค่าสถานะแบบบูลีน (Toggle Status) จาก true เป็น false หรือ false เป็น true ควรใช้เครื่องหมายใด?
A. !$blog->status
B. ~$blog->status
C. -$blog->status
D. toggle($blog->status)
5. หากต้องการนำผู้ใช้กลับไปยังหน้ารายการบทความทันทีหลังอัปเดตข้อมูลเสร็จ ต้องใช้คำสั่งใดใน Controller?
A. return view('/blog');
B. return redirect('/blog');
C. return route('/blog');
D. return back('/blog');
6. ใน Blade View การตรวจสอบเงื่อนไขเพื่อแสดงปุ่มสลับสถานะ (เผยแพร่/ฉบับร่าง) ใช้ Directive ข้อใด?
A. @check($item->status) ... @endcheck
B. @if($item->status) ... @else ... @endif
C. @switch($item->status) ... @endswitch
D. @when($item->status) ... @endwhen
7. การสร้างลิงก์สำหรับปุ่มแก้ไขบทความในแต่ละแถว โดยแนบ ID ไปยัง Route 'edit' ต้องใช้สัญลักษณ์ใด?
A. href="{{ route('edit', $item->id) }}"
B. href="{{ url('edit', $item->id) }}"
C. href="{{ link('edit', $item->id) }}"
D. href="{{ path('edit', $item->id) }}"
8. การส่งตัวแปรข้อมูลเดิม $blog จาก Controller ไปยังหน้า Blade View edit.blade.php นิยมใช้คำสั่งใด?
A. return view("edit", compact('blog'));
B. return view("edit", send('blog'));
C. return view("edit", pass($blog));
D. return view("edit", bind('blog'));
9. การกำหนดค่าเริ่มต้นชื่อบทความเดิมในแท็ก <input> ของฟอร์มแก้ไข ต้องระบุที่ Attribute ใด?
A. placeholder="{{$blog->title}}"
B. value="{{$blog->title}}"
C. text="{{$blog->title}}"
D. content="{{$blog->title}}"
10. แท็ก <textarea> ในฟอร์มแก้ไข ต้องวางตัวแปรเนื้อหาเดิมไว้ในลักษณะใด?
A. <textarea value="{{$blog->content}}"></textarea>
B. <textarea name="content">{{$blog->content}}</textarea>
C. <textarea content="{{$blog->content}}"></textarea>
D. <textarea data="{{$blog->content}}"></textarea>
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 4 / 29
สัปดาห์ที่ 10 • การอัปเดตข้อมูลและระบบฟอร์มแก้ไข01-406-093-203 Laravel Course
อัปเดตสถานะ (Query Builder)
- การดึงแถวข้อมูลด้วยเงื่อนไขเป้าหมายและใช้คำสั่งเปลี่ยนข้อมูลคอลัมน์ชิ้นด่วน เช่น การเปลี่ยนค่าเปิด-ปิดการแสดงผล
- ใช้คำสั่ง
update() ร่วมกับการส่งผ่านคู่ฟิลด์และข้อมูลตัวแปรใหม่ที่ต้องการทับเขียนลงตาราง - ระบบจะคืนค่าจำนวนแถวที่ได้รับผลกระทบกลับมาเป็นจำนวนนับสำหรับตรวจสอบ
- ตัวอย่างการเปลี่ยนสถานะการส่งสินค้าหรือกิจกรรม
code-example.php
// การเปลี่ยนสิทธิ์การเข้าใช้ระบบของผู้ใช้งานรหัส ID
DB::table('users')
->where('id', $id)
->update(['status' => 'inactive']);
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 5 / 29
สัปดาห์ที่ 10 • การอัปเดตข้อมูลและระบบฟอร์มแก้ไข01-406-093-203 Laravel Course
การกำหนด Route สำหรับสลับสถานะ (routes/web.php)
- การสร้าง Route ในไฟล์
routes/web.php เพื่อรับค่ารหัส (ID) ของรายการที่ต้องการเปลี่ยนสถานะ - ใช้คำสั่ง
Route::get('/change/{id}', ...) รับพารามิเตอร์ {id} และส่งไปยัง Controller - เรียกใช้งาน method
change ใน AdminController เพื่อทำหน้าที่ประมวลผลการสลับหรืออัปเดตสถานะ - กำหนดชื่อ Route ด้วย
->name('change') เพื่ออ้างอิงชื่อ Route ในหน้า View ได้อย่างสะดวก
code-example.php
// routes/web.php
Route::get('/change/{id}', [AdminController::class, 'change'])->name('change');
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 6 / 29
สัปดาห์ที่ 10 • การอัปเดตข้อมูลและระบบฟอร์มแก้ไข01-406-093-203 Laravel Course
การสร้าง Method change ใน Controller (AdminController.php)
- การสร้างฟังก์ชัน
change($id) ใน AdminController เพื่อรับค่ารหัสรายการที่ส่งผ่านมาจาก Route - ใช้คำสั่ง
dd($id); (Dump and Die) สำหรับทดสอบการรับค่าตัวแปร ID เพื่อตรวจสอบความถูกต้องก่อนทำงานกับฐานข้อมูล - ตรวจสอบว่า URL พารามิเตอร์
{id} ถูกส่งเข้ามายัง Controller ได้ถูกต้องหรือไม่ - ตัวอย่างการเขียนฟังก์ชันรับค่าใน AdminController.php
code-example.php
// app/Http/Controllers/AdminController.php
function change($id)
{
dd($id);
}
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 7 / 29
สัปดาห์ที่ 10 • การอัปเดตข้อมูลและระบบฟอร์มแก้ไข01-406-093-203 Laravel Course
การสร้างปุ่มสลับสถานะใน Blade View (blog.blade.php)
- ใช้เงื่อนไข
@if($item->status) เช็กสถานะข้อมูลเพื่อแสดงปุ่มกดแบบไดนามิก - หากสถานะเป็นจริง (เปิด/เผยแพร่) แสดงปุ่มสีเขียว
btn-outline-success แสดงข้อความ 'เผยแพร่' - หากสถานะเป็นเท็จ (ปิด/ฉบับร่าง) แสดงปุ่มสีแดง
btn-outline-danger แสดงข้อความ 'ฉบับร่าง' - ส่งค่า ID ของรายการผ่าน
href="{{route('change', $item->id)}}" เมื่อคลิกเพื่อเปลี่ยนสถานะ
code-example.html
<!-- resources/views/blog.blade.php -->
@if($item->status)
<a href="{{route('change', $item->id)}}" class="btn btn-outline-success">เผยแพร่</a>
@else
<a href="{{route('change', $item->id)}}" class="btn btn-outline-danger">ฉบับร่าง</a>
@endif
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 8 / 29
สัปดาห์ที่ 10 • การอัปเดตข้อมูลและระบบฟอร์มแก้ไข01-406-093-203 Laravel Course
การดึงข้อมูลเพื่อตรวจสอบด้วย first() ใน Controller (AdminController.php)
- ใช้ Query Builder
DB::table('blogs')->where('id', $id)->first() เพื่อค้นหาและดึงข้อมูลแถวเป้าหมาย - ห่อด้วยคำสั่ง
dd(...) เพื่อทดสอบแสดงผลอ็อบเจกต์ข้อมูลที่ดึงได้จากฐานข้อมูล - ตรวจสอบว่าฟิลด์ข้อมูลต่างๆ เช่น status ถูกต้องตรงกับรายการที่ต้องการเปลี่ยนหรือไม่
- ตัวอย่างการเขียนคำสั่งดึงข้อมูลเป้าหมายมาทดสอบใน AdminController.php
code-example.php
// app/Http/Controllers/AdminController.php
function change($id)
{
dd(DB::table("blogs")->where('id', $id)->first());
}
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 9 / 29
สัปดาห์ที่ 10 • การอัปเดตข้อมูลและระบบฟอร์มแก้ไข01-406-093-203 Laravel Course
การจัดเก็บผลลัพธ์ลงตัวแปร $blog (AdminController.php)
- จัดเก็บอ็อบเจกต์ข้อมูลบทความที่ดึงมาจากฐานข้อมูลลงในตัวแปร
$blog - ใช้คำสั่ง
dd($blog); ตรวจสอบข้อมูลในตัวแปร $blog เพื่อยืนยันว่าได้รับอ็อบเจกต์สมบูรณ์ - การแยกเก็บลงตัวแปรช่วยให้เรานำฟิลด์ข้อมูลอย่าง
$blog->status ไปคำนวณและสลับค่าในขั้นตอนถัดไปได้ง่ายขึ้น - ตัวอย่างการเก็บผลลัพธ์ลงตัวแปร $blog
code-example.php
// app/Http/Controllers/AdminController.php
function change($id)
{
$blog = DB::table("blogs")->where('id', $id)->first();
dd($blog);
}
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 10 / 29
สัปดาห์ที่ 10 • การอัปเดตข้อมูลและระบบฟอร์มแก้ไข01-406-093-203 Laravel Course
การสลับค่าสถานะ (Toggle Status) ด้วยเครื่องหมาย !
- ใช้เครื่องหมาย NOT (
!) ในการกลับค่าบูลีน (Boolean inversion) ของสถานะเดิม - หากสถานะเดิมเป็น
true (1) เครื่องหมาย ! จะสลับค่าเป็น false (0) - หากสถานะเดิมเป็น
false (0) เครื่องหมาย ! จะสลับค่าเป็น true (1) - นำค่าสถานะใหม่ที่ถูกสลับค่าแล้วจัดใส่ลงในอาเรย์
$data = ['status' => !$blog->status]; เพื่อเตรียมอัปเดต
code-example.php
// app/Http/Controllers/AdminController.php
$blog = DB::table("blogs")->where('id', $id)->first();
$data = [
'status' => !$blog->status
];
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 11 / 29
สัปดาห์ที่ 10 • การอัปเดตข้อมูลและระบบฟอร์มแก้ไข01-406-093-203 Laravel Course
การอัปเดตสถานะด้วย update() และการ Redirect (AdminController.php)
- ใช้คำสั่ง
DB::table('blogs')->where('id', $id)->update($data); บันทึกสถานะใหม่ลงฐานข้อมูล - ระบุเงื่อนไข
.where('id', $id) เพื่อเจาะจงอัปเดตข้อมูลเฉพาะรายการที่เลือกสลับสถานะ - ส่งผ่านชุดข้อมูล
$data เข้าเมธอด update() เพื่อทับเขียนค่าฟิลด์ status ในตาราง - ใช้คำสั่ง
return redirect('/blog'); เพื่อพาผู้ใช้กลับไปยังหน้ารายการบทความทันทีหลังจากอัปเดตเรียบร้อย
code-example.php
// app/Http/Controllers/AdminController.php
DB::table("blogs")->where('id', $id)->update($data);
return redirect('/blog');
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 12 / 29
สัปดาห์ที่ 10 • การอัปเดตข้อมูลและระบบฟอร์มแก้ไข01-406-093-203 Laravel Course
แบบฟอร์มแก้ไขข้อมูล
- ขั้นตอนสำหรับให้ผู้ใช้ตรวจสอบและปรับปรุงรายการข้อมูลที่เคยบันทึกไว้ในระบบ
- ในฟอร์มต้องระบุ value เก่าในอินพุตเพื่อให้ทราบค่าเดิม โดยป้อนผ่านตัวแปรอ็อบเจกต์ที่ดึงมาจากฐานข้อมูล
- เนื่องจากบราวเซอร์ทั่วไปไม่รู้จักเมธอด PUT/PATCH ดังนั้นต้องแปลงฟอร์ม POST ปกติด้วยแท็ก
@method('PUT') - ตัวอย่างการเขียนฟอร์มแก้ไขประวัติข้อมูล
code-example.html
<form action="/book/update/{{ $book->id }}" method="POST">
@csrf
@method('PUT') <!-- แทรกเมธอดสำหรับส่งคำขออัปเดตข้อมูล -->
<div class="mb-3">
<label>ชื่อหนังสือ</label>
<input type="text" name="title" value="{{ $book->title }}" class="form-control">
</div>
<button type="submit" class="btn btn-warning">ปรับปรุงข้อมูล</button>
</form>
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 13 / 29
สัปดาห์ที่ 10 • การอัปเดตข้อมูลและระบบฟอร์มแก้ไข01-406-093-203 Laravel Course
การเพิ่มคอลัมน์แก้ไขบทความในตารางแสดงผล (blog.blade.php)
- เพิ่มแท็กหัวตาราง
<th scope="col">แก้ไขบทความ</th> ในส่วน <thead/tr> ของไฟล์ blog.blade.php - จัดเตรียมหัวคอลัมน์ใหม่สำหรับรองรับการใส่ปุ่มกดเพื่อแก้ไขบทความในแต่ละแถวข้อมูล
- แบ่งแยกคอลัมน์ระหว่าง การแสดงสถานะ การแก้ไขข้อมูล และการลบบทความอย่างเป็นระเบียบ
- ตัวอย่างการเพิ่มคอลัมน์แก้ไขบทความในตารางแสดงผล
code-example.html
<!-- resources/views/blog.blade.php -->
<table class="table table-bordered text-center">
<thead>
<tr>
<th scope="col">บทความ</th>
<th scope="col">สถานะ</th>
<th scope="col">แก้ไขบทความ</th>
<th scope="col">ลบบทความ</th>
</tr>
</thead>
...
</table>
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 14 / 29
สัปดาห์ที่ 10 • การอัปเดตข้อมูลและระบบฟอร์มแก้ไข01-406-093-203 Laravel Course
การสร้างปุ่มแก้ไขบทความในแต่ละแถว (blog.blade.php)
- เพิ่มช่อง
<td><a href="#" class="btn btn-primary">แก้ไขบทความ</a></td> สำหรับแต่ละแถวข้อมูลบทความ - ใช้ Bootstrap คลาส
btn btn-primary เพื่อเน้นปุ่มด้วยโทนสีฟ้า/น้ำเงินที่มองเห็นได้ชัดเจน - กำหนด
href="#" สำรองไว้ก่อน เพื่อเตรียมนำไปเชื่อมต่อลิงก์ไปยัง Route ฟอร์มแก้ไขในขั้นตอนถัดไป - ตัวอย่างการเพิ่มปุ่มแก้ไขบทความในตาราง
code-example.html
<!-- resources/views/blog.blade.php -->
@foreach ($blogs as $item)
<tr>
<td>{{$item->title}}</td>
...
<td><a href="#" class="btn btn-primary">แก้ไขบทความ</a></td>
...
</tr>
@endforeach
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 15 / 29
สัปดาห์ที่ 10 • การอัปเดตข้อมูลและระบบฟอร์มแก้ไข01-406-093-203 Laravel Course
การกำหนด Route สำหรับเปิดฟอร์มแก้ไขบทความ (routes/web.php)
- เพิ่มคำสั่ง Route แบบ GET ในไฟล์
routes/web.php เพื่อรับค่า ID รายการที่จะแก้ไข - ใช้รูปแบบ
Route::get('/edit/{id}', [AdminController::class, 'edit'])->name('edit'); - ส่งค่าพารามิเตอร์
{id} ไปประมวลผลต่อใน method edit ของ AdminController - กำหนดชื่อ Route ด้วย
->name('edit') สำหรับนำไปใช้เรียกสร้าง URL ลิงก์ในหน้า View
code-example.php
// routes/web.php
Route::get('/edit/{id}', [AdminController::class, 'edit'])->name('edit');
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 16 / 29
สัปดาห์ที่ 10 • การอัปเดตข้อมูลและระบบฟอร์มแก้ไข01-406-093-203 Laravel Course
การผูก Route ลิงก์แก้ไขบทความใน Blade View (blog.blade.php)
- เปลี่ยน attribute
href จาก # มาเป็น {{route('edit', $item->id)}} - เรียกใช้งาน helper function
route('edit', $item->id) เพื่อสร้าง URL เปิดหน้าฟอร์มแก้ไข - ส่ง ID ของบทความ (
$item->id) พ่วงไปด้วย เพื่อให้ Controller ทราบว่าต้องการเปิดฟอร์มแก้ไขรายการใด - ตัวอย่างการผูกลิงก์แก้ไขบทความใน Blade View
code-example.html
<!-- resources/views/blog.blade.php -->
<td>
<a href="{{route('edit', $item->id)}}" class="btn btn-primary">แก้ไขบทความ</a>
</td>
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 17 / 29
สัปดาห์ที่ 10 • การอัปเดตข้อมูลและระบบฟอร์มแก้ไข01-406-093-203 Laravel Course
การสร้าง Method edit เพื่อดึงข้อมูลเก่ามาทดสอบ (AdminController.php)
- สร้างฟังก์ชัน
edit($id) ใน AdminController.php เพื่อรับค่า ID บทความที่ส่งมาจาก Route - สืบค้นข้อมูลเดิมจากตารางด้วย Query Builder
DB::table('blogs')->where('id', $id)->first(); - เก็บผลลัพธ์ไว้ในตัวแปร
$blog แล้วใช้คำสั่ง dd($blog); ทดสอบตรวจสอบความถูกต้องของข้อมูลฉบับเก่า - ตัวอย่างการสร้าง method edit และทดสอบดึงข้อมูลใน AdminController.php
code-example.php
// app/Http/Controllers/AdminController.php
function edit($id){
$blog = DB::table("blogs")->where('id', $id)->first();
dd($blog);
}
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 18 / 29
สัปดาห์ที่ 10 • การอัปเดตข้อมูลและระบบฟอร์มแก้ไข01-406-093-203 Laravel Course
การส่งข้อมูลบทความไปแสดงผลที่ View edit (AdminController.php)
- เปลี่ยนจากการใช้
dd($blog); มาเป็นคำสั่ง return view('edit', compact('blog')); - เรียกแสดงผลไฟล์ Blade View ชื่อ
edit.blade.php บนเบราว์เซอร์ - ใช้ฟังก์ชัน
compact('blog') เพื่อแนบตัวแปรข้อมูลบทความเดิม $blog ส่งไปให้ View - ช่วยให้หน้าฟอร์มแก้ไขสามารถดึงค่าเดิมมาแสดงในกล่องป้อนข้อมูล (Input) ได้ทันที
code-example.php
// app/Http/Controllers/AdminController.php
function edit($id){
$blog = DB::table("blogs")->where('id', $id)->first();
return view("edit", compact('blog'));
}
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 19 / 29
สัปดาห์ที่ 10 • การอัปเดตข้อมูลและระบบฟอร์มแก้ไข01-406-093-203 Laravel Course
การนำข้อมูลเดิมมาแสดงในช่องกรอกชื่อบทความ (edit.blade.php)
- สร้างหน้าฟอร์มแก้ไขในไฟล์
resources/views/edit.blade.php โดยสืบทอดโครงสร้างหลักจาก @extends('layout') - เพิ่ม attribute
value="{{$blog->title}}" ในแท็ก <input type="text" name="title"> - ดึงชื่อบทความฉบับเดิมจากอ็อบเจกต์ตัวแปร
$blog ที่ส่งมาจาก Controller มากรอกแสดงไว้ล่วงหน้า - ช่วยให้ผู้ใช้ตรวจสอบข้อความเดิมและทำการแก้ไขเฉพาะจุดได้อย่างสะดวก
code-example.html
<!-- resources/views/edit.blade.php -->
<div class="form-group">
<label for="title">ชื่อบทความ</label>
<input type="text" name="title" class="form-control" value="{{$blog->title}}">
</div>
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 20 / 29
สัปดาห์ที่ 10 • การอัปเดตข้อมูลและระบบฟอร์มแก้ไข01-406-093-203 Laravel Course
การนำข้อมูลเนื้อหาเดิมมาแสดงใน Textarea (edit.blade.php)
- ใส่การแสดงผล
{{$blog->content}} ครอบไว้ระหว่างเปิด-ปิดแท็ก <textarea>...</textarea> - ข้อสังเกต:
<textarea> ไม่มี attribute value จึงต้องนำตัวแปรมาใส่ไว้ระหว่างแท็กตรงกลาง - ดึงข้อความเนื้อหาเดิมจากอ็อบเจกต์ตัวแปร
$blog->content มาวางแสดงไว้ในฟอร์มแก้ไข - ช่วยให้ผู้ใช้ทบทวนและแก้ไขรายละเอียดเนื้อหาเดิมได้ทันที
code-example.html
<!-- resources/views/edit.blade.php -->
<div class="form-group">
<label for="content">เนื้อหา</label>
<textarea name="content" cols="30" rows="5" class="form-control">{{$blog->content}}</textarea>
</div>
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 21 / 29
สัปดาห์ที่ 10 • การอัปเดตข้อมูลและระบบฟอร์มแก้ไข01-406-093-203 Laravel Course
อัปเดตข้อมูล (Query Builder)
- การรับค่าที่มาจากแบบฟอร์มแก้ไขเพื่อคัดกรองกฎความถูกต้องตามปกติและทำการบันทึก
- ใช้การระบุคีย์การบันทึกทับตารางเป้าหมายโดยเปรียบเทียบรหัสผ่านคำสั่ง
where('id', $id) - เมื่อระบบทำงานเสร็จสมบูรณ์ ควรตั้งคำสั่งพาผู้ใช้เปลี่ยนหน้าไปยังหน้ารายงานพร้อมพ่วงเซสชันแจ้งเตือน
- ตัวอย่างโครงสร้างคำสั่งใน Controller สำหรับรับฟอร์มแก้ไข
code-example.php
public function update(Request $request, $id)
{
$request->validate(['title' => 'required']);
DB::table('books')->where('id', $id)->update([
'title' => $request->title,
'updated_at' => now()
]);
return redirect('/books')->with('success', 'บันทึกแก้ไขแล้ว');
}
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 22 / 29
สัปดาห์ที่ 10 • การอัปเดตข้อมูลและระบบฟอร์มแก้ไข01-406-093-203 Laravel Course
การกำหนด Route สำหรับการบันทึกอัปเดตข้อมูล (routes/web.php)
- เพิ่มคำสั่ง Route แบบ POST ในไฟล์
routes/web.php เพื่อรับส่งข้อมูลจากฟอร์มแก้ไข - ใช้คำสั่ง
Route::post('/update/{id}', [AdminController::class, 'update'])->name('update'); - ส่งค่าพารามิเตอร์
{id} ไปพร้อมกับข้อมูลจากฟอร์มเพื่อให้ method update ใน Controller รู้ว่าต้องการบันทึกทับรายการใด - ตั้งชื่อ Route ด้วย
->name('update') เพื่อให้ฟอร์มในหน้า View อ้างอิงเป็น action ส่งข้อมูลได้ง่าย
code-example.php
// routes/web.php
Route::post('/update/{id}', [AdminController::class, 'update'])->name('update');
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 23 / 29
สัปดาห์ที่ 10 • การอัปเดตข้อมูลและระบบฟอร์มแก้ไข01-406-093-203 Laravel Course
การกำหนด Action ในฟอร์มแก้ไขเพื่อส่งค่าไปยัง Route update (edit.blade.php)
- กำหนด attribute
action="{{route('update', $blog->id)}}" ในแท็ก <form> ของหน้า edit.blade.php - ใช้ helper
route('update', $blog->id) เพื่อแนบ ID ของบทความที่กำลังแก้ไขยิงไปยัง Route ปลายทาง - ใช้คำสั่ง
@csrf ร่วมกับการส่งแบบ method="POST" เพื่อความปลอดภัยในการส่งข้อมูล - เมื่อผู้ใช้กดบันทึก ข้อมูลชื่อและเนื้อหาใหม่จะถูกส่งไปยัง Controller เพื่อทำหน้าที่อัปเดตข้อมูลต่อไป
code-example.html
<!-- resources/views/edit.blade.php -->
<form method="POST" action="{{route('update', $blog->id)}}">
@csrf
...
</form>
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 24 / 29
สัปดาห์ที่ 10 • การอัปเดตข้อมูลและระบบฟอร์มแก้ไข01-406-093-203 Laravel Course
การเขียน Method update ใน Controller เพื่อรับค่าและบันทึกแก้ไข (AdminController.php)
- สร้างฟังก์ชัน
update(Request $request, $id) รับข้อมูลจากฟอร์มและรหัสบทความที่ต้องการอัปเดต - ตรวจสอบความถูกต้องของข้อมูล (Validation) สำหรับชื่อบทความและเนื้อหา พร้อมข้อความแจ้งเตือน
- รวบรวมข้อมูลใหม่ใส่ในอาเรย์
$data = ['title' => $request->title, 'content' => $request->content]; - บันทึกอัปเดตลงตารางด้วย
DB::table('blogs')->where('id', $id)->update($data); แล้ว redirect('/blog')
code-example.php
// app/Http/Controllers/AdminController.php
function update(Request $request, $id)
{
$request->validate([
'title' => 'required|max:50',
'content' => 'required',
], [
'title.required' => 'กรุณาใส่ชื่อบทความ',
'title.max' => 'ชื่อบทความต้องไม่เกิน 50 ตัวอักษร',
'content.required' => 'กรุณาใส่เนื้อหา',
]);
$data = [
'title' => $request->title,
'content' => $request->content,
];
DB::table("blogs")->where('id', $id)->update($data);
return redirect('/blog');
}
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 25 / 29
สัปดาห์ที่ 10 • การอัปเดตข้อมูลและระบบฟอร์มแก้ไข01-406-093-203 Laravel Course
แบบทดสอบหลังเรียน (Post-test)
1. คำสั่งในข้อใดใช้ส่งข้อมูลฟอร์มแก้ไขจากหน้า edit.blade.php ไปยัง Route แบบ POST ชื่อ 'update'?
A. <form method="POST" action="{{route('update', $blog->id)}}">
B. <form method="GET" action="{{route('update', $blog->id)}}">
C. <form method="PUT" action="{{url('update', $blog->id)}}">
D. <form action="{{route('update')}}">
2. ในการเขียน method update ใน Controller พารามิเตอร์ใดที่ต้องรับเข้ามาตามลำดับ?
A. function update(Request $request, $id)
B. function update($id, Response $response)
C. function update(Array $data)
D. function update($request)
3. คำสั่งตรวจสอบความถูกต้องของข้อมูล (Validation) ใน Controller ข้อใดเขียนได้ถูกต้อง?
A. $request->validate(['title' => 'required|max:50', 'content' => 'required']);
B. $request->check(['title' => 'required']);
C. Validator::make($request, ['title' => 'required']);
D. $request->verify(['title' => 'required']);
4. หากต้องการเปลี่ยนสิทธิ์/สถานะของผู้ใช้งานรหัส ID ในตาราง 'users' เป็น 'inactive' ด้วย Query Builder ต้องใช้โค้ดข้อใด?
A. DB::table('users')->where('id', $id)->update(['status' => 'inactive']);
B. DB::table('users')->update('status', 'inactive')->where('id', $id);
C. DB::table('users')->change(['status' => 'inactive']);
D. DB::table('users')->find($id)->set('status', 'inactive');
5. แท็กใดในไฟล์ routes/web.php ที่ใช้กำหนด Route สำหรับสลับสถานะโดยส่งค่า ID รายการผ่าน URL?
A. Route::get('/change/{id}', [AdminController::class, 'change'])->name('change');
B. Route::post('/change', [AdminController::class, 'change']);
C. Route::put('/change/{id}', [AdminController::class, 'change']);
D. Route::delete('/change/{id}', [AdminController::class, 'change']);
6. หากต้องการทดสอบดูค่าพารามิเตอร์ที่ส่งเข้ามาใน Controller และหยุดการทำงานทันที ต้องใช้ฟังก์ชันใด?
A. dd($id);
B. print($id);
C. exit($id);
D. console.log($id);
7. ในการสร้างปุ่มสลับสถานะ ปุ่มสถานะ 'เผยแพร่' (เปิด) และ 'ฉบับร่าง' (ปิด) นิยมใช้ Bootstrap Class ในข้อใดตามลำดับ?
A. btn-outline-success และ btn-outline-danger
B. btn-primary และ btn-secondary
C. btn-warning และ btn-info
D. btn-dark และ btn-light
8. แท็กหัวตาราง HTML ข้อใดที่ใช้สำหรับคอลัมน์แก้ไขบทความใน blog.blade.php?
A. <th scope="col">แก้ไขบทความ</th>
B. <td scope="col">แก้ไขบทความ</td>
C. <header scope="col">แก้ไขบทความ</header>
D. <column scope="col">แก้ไขบทความ</column>
9. การกำหนด Route เพื่อเปิดหน้าฟอร์มแก้ไขบทความรหัส ID ใน routes/web.php เขียนอย่างไร?
A. Route::get('/edit/{id}', [AdminController::class, 'edit'])->name('edit');
B. Route::post('/edit/{id}', [AdminController::class, 'edit']);
C. Route::get('/edit', [AdminController::class, 'edit']);
D. Route::put('/edit', [AdminController::class, 'edit']);
10. ข้อใดคือการสลับค่าสถานะใน Controller และบันทึกทับฐานข้อมูลแบบรวดเร็วที่ถูกต้อง?
A. $blog = DB::table("blogs")->where('id', $id)->first(); $data = ['status' => !$blog->status]; DB::table("blogs")->where('id', $id)->update($data);
B. $blog = DB::table("blogs")->get(); $blog->status = true;
C. DB::table("blogs")->toggle('status');
D. DB::table("blogs")->where('id', $id)->delete();
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 26 / 29
สัปดาห์ที่ 10 • การอัปเดตข้อมูลและระบบฟอร์มแก้ไข01-406-093-203 Laravel Course
คำถามท้ายบทเรียน
แท็ก Directives ใดของ Blade ที่ต้องใช้ใส่ไว้ในแบบฟอร์มเพื่อแจ้งว่าเป็นการส่งข้อมูลแบบแก้ไข (Update Request)?
A. @method('PUT')
B. @csrf
C. @action('UPDATE')
D. @type('PATCH')
คำอธิบาย: แท็ก @method('PUT') หรือ @method('PATCH') จำเป็นต้องใส่ไว้ในแบบฟอร์ม POST เพื่อระบุความต้องการในการอัปเดตข้อมูลให้สอดรับกับ Routing ในฝั่ง Laravel
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 27 / 29
สัปดาห์ที่ 10 • การอัปเดตข้อมูลและระบบฟอร์มแก้ไข01-406-093-203 Laravel Course
Workshop 10: ฝึกปฏิบัติระบบสลับสถานะและฟอร์มแก้ไขบทความตามบทเรียน
- 1สร้าง Route
/change/{id} และ Method change($id) ใน AdminController สลับสถานะบทความ (!$blog->status) และทำปุ่มสลับสถานะแบบไดนามิกใน blog.blade.php - 2เพิ่มคอลัมน์ปุ่ม 'แก้ไขบทความ' ในตาราง และสร้าง Route
/edit/{id} สำหรับเปิดหน้าฟอร์มแก้ไข - 3สร้าง View
edit.blade.php ดึงข้อมูลเดิมด้วย first() นำมาป้อนแสดงผลล่วงหน้าในช่อง Input และ Textarea - 4สร้าง Route
/update/{id} (POST) และ Method update(Request $request, $id) ทำ Validation บันทึกทับตารางด้วย update() และ Redirect กลับหน้า /blog
command_prompt.sh
// สลับสถานะการเผยแพร่
$blog = DB::table('blogs')->where('id', $id)->first();
DB::table('blogs')->where('id', $id)->update(['status' => !$blog->status]);
// บันทึกแก้ไขบทความ
DB::table('blogs')->where('id', $id)->update([
'title' => $request->title,
'content' => $request->content
]);
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 28 / 29
สัปดาห์ที่ 10 • การอัปเดตข้อมูลและระบบฟอร์มแก้ไข01-406-093-203 Laravel Course
ใบงานที่ 10: ระบบจัดการปรับปรุงแก้ไขข้อมูลสินค้าและสลับสถานะคลังสินค้า (Product Management & Status Switch)
ให้นักศึกษานำความรู้เรื่อง Query Builder Update, Parameter Route และ Blade Form ไปประยุกต์สร้างระบบจัดการข้อมูลสินค้า (products) โดยมีโจทย์ดังนี้: 1) ทำปุ่มกดสลับสถานะสินค้า (พร้อมวางขาย / ระงับการขาย) บนตารางด้วยคำสั่ง !$product->status 2) สร้างปุ่มแก้ไขสินค้า เชื่อม Route /product/edit/{id} เปิดหน้าฟอร์ม edit-product.blade.php พร้อมดึงข้อมูลชื่อสินค้า ราคาสินค้า และรายละเอียดเดิมมาป้อนไว้ในช่องกรอกข้อมูล 3) สร้างคำขอส่งฟอร์มเพื่อทำ Validation ตรวจสอบข้อมูลก่อนสั่งอัปเดตลงตาราง products ด้วยคำสั่ง update() และ Redirect กลับหน้ารายการสินค้า
เกณฑ์การตรวจประเมินผล:
- การสร้าง Route, Controller และการสลับสถานะสินค้าด้วยเครื่องหมาย ! พร้อมแสดงปุ่มสลับสถานะแบบไดนามิกด้วย @if30%
- การสร้างฟอร์ม edit-product.blade.php และการป้อนดึงข้อมูลเดิมชื่อ, ราคา, รายละเอียด มาแสดงในช่อง Input และ Textarea ได้ถูกต้อง
- การสร้างคำขอส่งฟอร์ม, การทำ Validation ตรวจสอบข้อมูลสินค้า, การบันทึกอัปเดตด้วย update() และการ Redirect40%
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 29 / 29