สัปดาห์ที่ 5 • การควบคุมการทำงานด้วย Controller และฟอร์ม01-406-093-203 Laravel Course
01-406-093-203
การพัฒนาเว็บแอปพลิเคชันด้วยเฟรมเวิร์ค
โดย นายศุภมิตร จันทร์โทวงศ์
- สาขาวิชาระบบสารสนเทศ คณะบริหารธุรกิจ
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 1 / 27
สัปดาห์ที่ 5 • การควบคุมการทำงานด้วย Controller และฟอร์ม01-406-093-203 Laravel Course
เช็คชื่อเข้าชั้นเรียน
- ให้นักศึกษาสแกน QR Code นี้เพื่อเข้าสู่ระบบเช็คชื่อเข้าเรียน
- ระบบจะทำการบันทึกประวัติการเข้าเรียนในวิชานี้อัตโนมัติ
ผู้สอนยังไม่ได้เปิดระบบเช็คชื่อสำหรับบทเรียนสัปดาห์นี้ หรือหมดเวลากรอกข้อมูลแล้ว
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 2 / 27
สัปดาห์ที่ 5 • การควบคุมการทำงานด้วย Controller และฟอร์ม01-406-093-203 Laravel Course
พักสายตา: เกมจับคู่การ์ดอัจฉริยะ (Memory Match)
- ผ่อนคลายสมองด้วยเกมจับคู่คำศัพท์สำคัญประจำบทเรียนเรื่อง Controller และ HTML Form
- กติกา: คลิกเปิดการ์ดเพื่อจับคู่คำศัพท์ที่ตรงกันให้ครบทุกคู่โดยใช้จำนวนครั้งการเปิด (Moves) ให้น้อยที่สุด
- ช่วยจดจำคำศัพท์วิชาเขียนโปรแกรมพร้อมฝึกไหวพริบและสมาธิสนุกๆ!
เกมจับคู่การ์ดอัจฉริยะ (Memory Match)
ผ่อนคลายสมองด้วยการจับคู่การ์ดสัญลักษณ์นักพัฒนาและเครื่องมือในชั้นเรียน! ใช้จำนวนการเปิดจับคู่ (Moves) ให้น้อยที่สุดเพื่อเอาชนะสถิติของตัวเอง!
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 3 / 27
สัปดาห์ที่ 5 • การควบคุมการทำงานด้วย Controller และฟอร์ม01-406-093-203 Laravel Course
แบบทดสอบก่อนเรียน (Pre-test)
1. Controller ใน Laravel ทำหน้าที่อะไรตามสถาปัตยกรรม MVC?
A. จัดเก็บไฟล์รูปภาพและวิดีโอของระบบ
B. เป็นตัวกลางรวบรวม Logic ควบคุมการทำงานระหว่าง Model และ View
C. เป็นระบบจัดการฐานข้อมูลโดยตรง
D. ใช้เขียน CSS ตกแต่งหน้าเว็บไซต์
2. คำสั่ง Artisan ใดที่ใช้ในการสร้างคลาส Controller ใหม่ชื่อ ProductController?
A. php artisan new:controller ProductController
B. php artisan make:controller ProductController
C. php artisan create:controller ProductController
D. laravel generate:controller ProductController
3. ไฟล์ Controller ที่สร้างขึ้นใหม่จะถูกจัดเก็บไว้ในโฟลเดอร์ใดของโปรเจกต์ Laravel?
A. resources/views/
B. routes/
C. app/Http/Controllers/
D. database/migrations/
4. รูปแบบการผูกเส้นทาง (Route) เข้ากับเมธอดของ Controller ที่ถูกต้องคือข้อใด?
A. Route::get('/about', AdminController->about())
B. Route::get('/about', [AdminController::class, 'about'])
C. Route::get('/about', 'AdminController.about')
D. Route::get('/about', call(AdminController, about))
5. ข้อใดคือข้อดีสำคัญของการย้าย Logic จากไฟล์ routes/web.php มาไว้ใน Controller?
A. ทำให้เว็บไซต์โหลดเร็วขึ้นสองเท่า
B. ไม่จำเป็นต้องเขียน Route อีกต่อไป
C. ช่วยแยกหน้าที่ของระบบให้เป็นระเบียบ ดูแลรักษาง่ายตามหลัก MVC
D. ช่วยป้องกันไม่ให้ผู้ใช้เข้าถึงหน้าเว็บได้
6. คำสั่ง Blade ใดที่ใช้วนลูปแสดงข้อมูลอาร์เรย์ในตาราง HTML?
A. @while ($items)
B. @loop ($items as $item)
C. @foreach ($items as $item)
D. @repeat ($items, $item)
7. คลาส Bootstrap ใดที่ใช้ตกแต่งตาราง HTML ให้มีสีแถวสลับกัน (Striped Rows)?
A. table-hover
B. table-bordered
C. table-striped
D. table-responsive
8. แอตทริบิวต์ method='POST' ในแท็ก <form> มีความหมายอย่างไร?
A. ใช้แสดงผลหน้าเว็บแบบป๊อปอัป
B. กำหนดให้ส่งข้อมูลไปยังเซิร์ฟเวอร์แบบเขียนข้อมูล (ไม่แสดงข้อมูลใน URL)
C. ใช้ดาวน์โหลดไฟล์จากเซิร์ฟเวอร์
D. ใช้ลบข้อมูลออกจากฐานข้อมูลทันที
9. คำสั่ง @csrf ในแบบฟอร์ม Laravel มีไว้เพื่อจุดประสงค์ใด?
A. ใช้จัดรูปแบบตัวอักษรให้สวยงาม
B. ป้องกันการโจมตีแบบ Cross-Site Request Forgery
C. ใช้เชื่อมต่อฐานข้อมูลอัตโนมัติ
D. ใช้สร้างรหัสผ่านอัตโนมัติให้ผู้ใช้
10. ฟังก์ชัน compact() ใน Controller มีประโยชน์อย่างไร?
A. ใช้บีบอัดไฟล์ให้มีขนาดเล็กลง
B. ใช้รวมตัวแปรหลายตัวเป็นอาร์เรย์เพื่อส่งต่อไปยังหน้า View
C. ใช้ลบตัวแปรที่ไม่จำเป็นออกจากหน่วยความจำ
D. ใช้เข้ารหัสข้อมูลก่อนบันทึกลงฐานข้อมูล
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 4 / 27
สัปดาห์ที่ 5 • การควบคุมการทำงานด้วย Controller และฟอร์ม01-406-093-203 Laravel Course
สร้าง Controller
- Controller คือคลาสที่เป็นตัวกลางรวบรวม Logic ของแอปพลิเคชัน ป้องกันความแออัดในไฟล์เว็บรูท
- ช่วยทำความสะอาดและแยกย้ายการทำตามกลไก MVC (Model-View-Controller)
- สร้างคลาสขึ้นมาใช้งานผ่านคำสั่ง:
php artisan make:controller UserController - โครงสร้างไฟล์จะถูกเก็บไว้ที่โฟลเดอร์ app/Http/Controllers/ เสมอ
code-example.php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class UserController extends Controller
{
public function index() {
return 'หน้าแสดงรายชื่อผู้ใช้';
}
}
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 5 / 27
สัปดาห์ที่ 5 • การควบคุมการทำงานด้วย Controller และฟอร์ม01-406-093-203 Laravel Course
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 6 / 27
สัปดาห์ที่ 5 • การควบคุมการทำงานด้วย Controller และฟอร์ม01-406-093-203 Laravel Course
Routing
Routing คือ ส่วนที่ใช้ระบุเส้นทางในการรับส่งข้อมูล
Controller คือ ศูนย์กลางสำหรับรับส่งข้อมูลและการประมวลผลโดยเชื่อมโยงการทำงานระหว่าง Model และ View
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 7 / 27
สัปดาห์ที่ 5 • การควบคุมการทำงานด้วย Controller และฟอร์ม01-406-093-203 Laravel Course
Routing & Controller
Controller (C) คือ ส่วนประมวลผลคำสั่งต่างๆ ในแอพพลิเคชั่นโดยควบคุมการทำงานระหว่าง Model และ View
ภายใน Controller จะกำหนดกระบวนการทำงานผ่านส่วนที่เรียกว่า เมธอด (Method)
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 8 / 27
สัปดาห์ที่ 5 • การควบคุมการทำงานด้วย Controller และฟอร์ม01-406-093-203 Laravel Course
ตัวอย่างการสร้าง AdminController
- ใช้คำสั่ง Artisan เพื่อสร้างตัวควบคุมในเทอร์มินัล:
php artisan make:controller AdminController - ระบบจะแจ้งเตือนสำเร็จและระบุไฟล์ใหม่ที่
app/Http/Controllers/AdminController.php - โครงสร้างคลาส AdminController สืบทอดคุณสมบัติจาก Controller หลักโดยอัตโนมัติ
- บรรทัดรหัสเริ่มต้นจะมีเพียง namespace, imports และโครงสร้างคลาสเปล่าพร้อมระบุเมธอด
code-example.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class AdminController extends Controller
{
//
}
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 9 / 27
สัปดาห์ที่ 5 • การควบคุมการทำงานด้วย Controller และฟอร์ม01-406-093-203 Laravel Course
การเพิ่มเมธอดและการโยกย้าย Logic มายัง Controller
- ประกาศเมธอด index() และ about() ขึ้นมาเป็นสมาชิกของคลาส AdminController
- นำโค้ดประมวลผลข้อมูล (Logic) และตัวแปรอาร์เรย์ที่เดิมอยู่ในไฟล์เว็บรูท web.php ย้ายมาจัดเก็บไว้ในแต่ละเมธอด
- เมธอด about() มีการเรียกใช้งาน return view() ร่วมกับ compact() ส่งข้อมูลไปยังหน้าแสดงผลเรียบร้อย
- ส่วนเมธอด index() เตรียมเก็บข้อมูลรายการบทความบทที่ 1 ถึง 3 พร้อมสำหรับการคืนค่าวิวในขั้นถัดไป
code-example.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class AdminController extends Controller
{
function index()
{
$blogs = [
[
'title' => "บทความที่ 1",
'content' => "เนื้อหาบทความที่ 1",
'status' => true
],
[
'title' => "บทความที่ 2",
'content' => "เนื้อหาบทความที่ 2",
'status' => false
],
[
'title' => "บทความที่ 3",
'content' => "เนื้อหาบทความที่ 3",
'status' => true
],
];
}
function about()
{
$name = "Supamit Jantowong";
$data = "6 กรกฎาคม 2026";
return view("about", compact('name', 'data'));
}
}
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 10 / 27
สัปดาห์ที่ 5 • การควบคุมการทำงานด้วย Controller และฟอร์ม01-406-093-203 Laravel Course
การนำเข้า Controller ใน web.php
- นำเข้า (import) คลาสตัวควบคุมโดยประกาศ
use App\Http\Controllers\AdminController; ไว้ด้านบนสุดของไฟล์เว็บรูท - การนำเข้าคลาสช่วยให้เราเรียกใช้
AdminController::class ในการกำหนดเส้นทางได้สะดวก ป้องกันความผิดพลาดจากการสะกดผิด - จัดเตรียมโครงสร้างโดยลบ Closure Function แบบเก่าใน Route
/about ออก พร้อมเตรียมระบุ Controller และเมธอดแทน
code-example.php
<?php
use Illuminate\Support\Facades\Route;
// 1. นำเข้า Controller เข้ามาใช้งาน
use App\Http\Controllers\AdminController;
Route::get('/', function () {
return view("welcome");
});
// 2. เตรียมระบุการเชื่อมต่อเส้นทางไปยัง Controller
Route::get('/about', )->name('about');
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 11 / 27
สัปดาห์ที่ 5 • การควบคุมการทำงานด้วย Controller และฟอร์ม01-406-093-203 Laravel Course
การเชื่อมต่อ Route ไปยัง Controller
- ผูกเส้นทาง URL กับเมธอดใน Controller โดยใช้รูปแบบอาร์เรย์ [ControllerClass::class, 'MethodName']
- แก้ไข Route /about ให้เรียกใช้งานเมธอด about ของ AdminController
- แก้ไข Route /blog ให้เรียกใช้งานเมธอด blog ของ AdminController
- เพิ่มข้อมูลบทความใหม่ และเปลี่ยนชื่อเมธอดจาก index เป็น blog พร้อมใช้คำสั่ง return view('blog', compact('blogs')) ใน AdminController
code-example.php
// routes/web.php
use App\Http\Controllers\AdminController;
// 1. ผูก Route /about กับเมธอด about
Route::get('/about', [AdminController::class, 'about'])->name('about');
// 2. ผูก Route /blog กับเมธอด blog
Route::get('/blog', [AdminController::class, 'blog'])->name('blog');
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 12 / 27
สัปดาห์ที่ 5 • การควบคุมการทำงานด้วย Controller และฟอร์ม01-406-093-203 Laravel Course
แสดงข้อมูลแบบตาราง
- การจัดเรียงชุดอาร์เรย์ข้อมูลลงในตาราง HTML (<table>) เพื่อความเป็นระเบียบและสแกนง่าย
- ตกแต่งตารางให้ดูดีระดับองค์กรผ่านคลาส Bootstrap: table, table-bordered, table-hover
- ใช้คำสั่งวนรอบ
@foreach ดึงทีละกุญแจออกมาแสดงผลในแถวตาราง <tr> และคอลัมน์ <td> - ตัวอย่างโครงร่างการทำตารางแสดงข้อมูลรายชื่อสมาชิก
code-example.php
<table class="table table-bordered table-striped">
<thead>
<tr><th>ชื่อ</th><th>อีเมล</th></tr>
</thead>
<tbody>
@foreach ($users as $user)
<tr>
<td>{{ $user['name'] }}</td>
<td>{{ $user['email'] }}</td>
</tr>
@endforeach
</tbody>
</table>
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 13 / 27
สัปดาห์ที่ 5 • การควบคุมการทำงานด้วย Controller และฟอร์ม01-406-093-203 Laravel Course
การสืบค้นคู่มือตารางใน Bootstrap
- สืบค้นสไตล์และคุณสมบัติเพิ่มเติมของตารางได้ที่เว็บไซต์หลัก getbootstrap.com
- พิมพ์ค้นหาคำว่า table ในช่องค้นหาของเว็บไซต์เพื่อเข้าสู่หน้าคู่มือ Tables -> Overview
- Bootstrap มีคลาสสำหรับจัดรูปแบบตารางอย่างสะดวกรวดเร็ว เช่น table-striped, table-bordered และ table-hover
- สามารถเลือกหยิบสไตล์ที่ชอบมาใส่ in แอตทริบิวต์ class ของแท็ก table ได้ทันทีโดยไม่ต้องเขียน CSS เอง
การค้นหาเอกสารตารางของ Bootstrap
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 14 / 27
สัปดาห์ที่ 5 • การควบคุมการทำงานด้วย Controller และฟอร์ม01-406-093-203 Laravel Course
ตัวอย่างการเพิ่มตาราง Bootstrap ใน Blade
- จัดวางโครงสร้างตาราง HTML ด้วยแท็ก table ในหน้าเทมเพลตวิว blog.blade.php
- เรียกใช้งานคลาส table ของ Bootstrap เพื่อเปลี่ยนสไตล์ตารางให้จัดช่องไฟและเส้นแบ่งเรียบร้อยโดยอัตโนมัติ
- แบ่งหมวดหมู่โดยใส่ th scope=col กำหนดหัวข้อคอลัมน์ใน thead และระบุแถวข้อมูลจำลอง (Dummy Data) ใน tbody
code-example.html
<!-- resources/views/blog.blade.php -->
@extends('layout')
@section('content')
<h2 class="text text-center py-2">บทความทั้งหมด</h2>
<table class="table">
<thead>
<tr>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
</tbody>
</table>
@endsection
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 15 / 27
สัปดาห์ที่ 5 • การควบคุมการทำงานด้วย Controller และฟอร์ม01-406-093-203 Laravel Course
การแสดงผลข้อมูลแบบมีเงื่อนไขในตาราง
- ใช้คำสั่ง @foreach เพื่อวนลูปดึงข้อมูลบทความแต่ละรายการ ($blogs as $item) ออกมาแสดงผลในแถวของตาราง
- พิมพ์แสดงข้อมูลหัวข้อข่าวและเนื้อหาด้วยเครื่องหมายปีกกาสองชั้น {{ $item['title'] }} และ {{ $item['content'] }}
- ใช้คำสั่งเงื่อนไขโครงสร้างควบคุม @if / @else ตรวจสอบสถานะการเผยแพร่ เพื่อแต่งสีข้อความด้วยคลาส Bootstrap เช่น .text-success (สีเขียว) และ .text-danger (สีแดง)
code-example.html
<!-- resources/views/blog.blade.php -->
<table class="table">
<thead>
<tr>
<th scope="col">บทความ</th>
<th scope="col">เนื้อหา</th>
<th scope="col">สถานะ</th>
</tr>
</thead>
<tbody>
@foreach ($blogs as $item)
<tr>
<td>{{ $item['title'] }}</td>
<td>{{ $item['content'] }}</td>
<td>
@if ($item['status'])
<span class="text-success">เผยแพร่</span>
@else
<span class="text-danger">ฉบับร่าง</span>
@endif
</td>
</tr>
@endforeach
</tbody>
</table>
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 16 / 27
สัปดาห์ที่ 5 • การควบคุมการทำงานด้วย Controller และฟอร์ม01-406-093-203 Laravel Course
สร้างแบบฟอร์ม
- แบบฟอร์ม HTML เป็นหน้าด่านสำหรับการรับข้อมูลนำเข้าจากผู้ใช้งานระบบ (Input)
- ต้องระบุแอตทริบิวต์ action ชี้ไปยัง URL ปลายทาง และระบุ method เป็น POST สำหรับการเขียนข้อมูล
- กฎเหล็ก: ต้องประกาศ
@csrf ไว้ในแท็กฟอร์มเสมอเพื่อป้องกันการโจมตีข้ามไซต์ (Cross-Site Request Forgery) - ตัวอย่างการเขียนกล่องฟอร์มอย่างง่ายในไฟล์ Blade
code-example.html
<form action="/user/save" method="POST">
@csrf
<div class="mb-3">
<label>ชื่อผู้ใช้งาน</label>
<input type="text" name="username" class="form-control">
</div>
<button type="submit" class="btn btn-primary">บันทึกข้อมูล</button>
</form>
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 17 / 27
สัปดาห์ที่ 5 • การควบคุมการทำงานด้วย Controller และฟอร์ม01-406-093-203 Laravel Course
การตกแต่งตารางและเริ่มต้นสร้างฟอร์ม
- ปรับแต่งตารางเพิ่มเติมโดยใช้คลาส table-bordered และ text-center เพื่อจัดข้อความให้อยู่ตรงกลางตารางพร้อมตีกรอบตารางให้สวยงาม
- ปรับปุ่มการแสดงสถานะโดยนำคลาสปุ่ม outline ของ Bootstrap มาใช้ เช่น btn btn-outline-success และ btn btn-outline-danger
- สร้างไฟล์วิวใหม่ form.blade.php ในโฟลเดอร์ resources/views/ เพื่อเป็นหน้าสำหรับรองรับการลงบันทึกบทความชิ้นใหม่
code-example.html
<!-- resources/views/form.blade.php -->
@extends('layout')
@section('title', 'เขียนบทความ')
@section('content')
<h2 class="text text-center py-2">เขียนบทความใหม่</h2>
@endsection
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 18 / 27
สัปดาห์ที่ 5 • การควบคุมการทำงานด้วย Controller และฟอร์ม01-406-093-203 Laravel Course
การสร้างเมธอดเพื่อเรียกดูหน้าฟอร์ม
- ประกาศสร้างเมธอด create() ขึ้นมาใหม่ภายในคลาส AdminController
- ใช้คำสั่ง return view('form') เพื่อชี้เป้าไปยังไฟล์วิวหน้าฟอร์มกรอกข้อมูล form.blade.php
- การแยก Logic หน้าฟอร์มมาที่ Controller ช่วยให้การควบคุมการไหลและส่งต่อข้อมูลในอนาคตทำได้ง่ายและเป็นสัดส่วน
code-example.php
// app/Http/Controllers/AdminController.php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class AdminController extends Controller
{
// ... เมธอด blog() และ about()
// เพิ่มเมธอดสำหรับแสดงหน้าฟอร์มเขียนบทความ
function create()
{
return view("form");
}
}
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 19 / 27
สัปดาห์ที่ 5 • การควบคุมการทำงานด้วย Controller และฟอร์ม01-406-093-203 Laravel Course
การเชื่อมต่อ Route ไปยังหน้าฟอร์ม
- ผูกเส้นทาง URL หน้า
/create ไปยังเมธอด create ของ AdminController - ใช้รูปแบบการประกาศอาร์เรย์
[AdminController::class, 'create'] ในการระบุปลายทาง - ตั้งชื่อเล่นให้เส้นทางด้วย
->name('create') เพื่อนำไปใช้งานสร้างลิงก์เชื่อมโยงไปยังหน้าฟอร์มได้สะดวกในอนาคต
code-example.php
// routes/web.php
use App\Http\Controllers\AdminController;
// ผูกเส้นทาง /create ไปยังเมธอด create ของ AdminController
Route::get('/create', [AdminController::class, 'create'])->name('create');
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 20 / 27
สัปดาห์ที่ 5 • การควบคุมการทำงานด้วย Controller และฟอร์ม01-406-093-203 Laravel Course
การเพิ่มเมนูนำทางไปยังหน้าฟอร์ม
- เปิดไฟล์โครงร่างหลัก layout.blade.php ค้นหาบริเวณชุดเมนูนำทางหลัก navbar-nav
- เพิ่มลิงก์แท็กสมอ <a> พร้อมกำหนดเส้นทาง href="/create" เพื่อชี้ไปยังหน้าสร้างบทความใหม่
- ช่วยให้ผู้ใช้งานเข้าถึงและสลับไปที่หน้าเขียนบทความใหม่ได้ทันทีจากทุก ๆ หน้าหลักในเว็บไซต์
code-example.html
<!-- resources/views/layout.blade.php -->
<div class="navbar-nav ms-auto">
<a class="nav-link" href="/">หน้าแรก</a>
<a class="nav-link" href="{{ route('about') }}">เกี่ยวกับเรา</a>
<a class="nav-link" href="{{ route('blog') }}">บทความทั้งหมด</a>
<!-- เพิ่มลิงก์เมนูเขียนบทความ -->
<a class="nav-link" href="/create">เขียนบทความ</a>
</div>
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 21 / 27
สัปดาห์ที่ 5 • การควบคุมการทำงานด้วย Controller และฟอร์ม01-406-093-203 Laravel Course
การสร้างฟอร์มเขียนบทความในไฟล์ Blade
- สร้างแบบฟอร์ม HTML ด้วยแท็ก <form> กำหนด method เป็น POST สำหรับส่งข้อมูลกลับไปยังเซิร์ฟเวอร์
- ใส่ช่องกรอกข้อมูล 2 รายการ ได้แก่ ชื่อบทความ (input text) และเนื้อหา (textarea) ครอบด้วย form-group พร้อม label กำกับ
- เพิ่มปุ่มบันทึกข้อมูล (btn-primary) และลิงก์กลับไปยังหน้าบทความทั้งหมด (btn-success) เพื่อความสะดวกในการนำทาง
code-example.html
<!-- resources/views/form.blade.php -->
@extends('layout')
@section('title', 'เขียนบทความ')
@section('content')
<h2 class="text text-center py-2">เขียนบทความใหม่</h2>
<form method="POST">
<div class="form-group">
<label for="title">ชื่อบทความ</label>
<input type="text" name="title" class="form-control">
</div>
<div class="form-group">
<label for="content">เนื้อหา</label>
<textarea name="content" cols="30" rows="5" class="form-control"></textarea>
</div>
<input type="submit" value="บันทึก" class="btn btn-primary my-3">
<a href="/blog" class="btn btn-success my-3">บทความทั้งหมด</a>
</form>
@endsection
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 22 / 27
สัปดาห์ที่ 5 • การควบคุมการทำงานด้วย Controller และฟอร์ม01-406-093-203 Laravel Course
ฝึกการตอบสนอง: เกมทุบบั๊กทำลายล้าง (Whack-a-Bug)
- ทดสอบความเร็วของประสาทสัมผัสในการกำจัดบั๊กของโค้ดโปรแกรม
- กติกา: คลิกกำจัด บั๊ก (สัญลักษณ์กากบาทสีแดง) และหลีกเลี่ยงการกดโดน โค้ดที่ถูกต้อง (สัญลักษณ์เครื่องหมายถูกสีเขียว) ภายในเวลา 15 วินาที
- มาท้าทายฝีมือประลองทำคะแนนสะสมสูงสุดกันเลย!
เกมทุบบั๊กทำลายล้าง (Whack-a-Bug)
ทดสอบปฏิกิริยาตอบสนองและสายตา! คลิกกำจัด บั๊ก (ตัวสีแดง) ให้เร็วที่สุด และห้ามกดโดน โค้ดที่ถูกต้อง (ตัวสีเขียว) เป็นอันขาดในเวลา 15 วินาที!
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 23 / 27
สัปดาห์ที่ 5 • การควบคุมการทำงานด้วย Controller และฟอร์ม01-406-093-203 Laravel Course
แบบทดสอบหลังเรียน (Post-test)
1. Controller ใน Laravel ทำหน้าที่อะไรตามสถาปัตยกรรม MVC?
A. จัดเก็บไฟล์รูปภาพและวิดีโอของระบบ
B. เป็นตัวกลางรวบรวม Logic ควบคุมการทำงานระหว่าง Model และ View
C. เป็นระบบจัดการฐานข้อมูลโดยตรง
D. ใช้เขียน CSS ตกแต่งหน้าเว็บไซต์
2. คำสั่ง Artisan ใดที่ใช้ในการสร้างคลาส Controller ใหม่ชื่อ ProductController?
A. php artisan new:controller ProductController
B. php artisan make:controller ProductController
C. php artisan create:controller ProductController
D. laravel generate:controller ProductController
3. ไฟล์ Controller ที่สร้างขึ้นใหม่จะถูกจัดเก็บไว้ในโฟลเดอร์ใดของโปรเจกต์ Laravel?
A. resources/views/
B. routes/
C. app/Http/Controllers/
D. database/migrations/
4. รูปแบบการผูกเส้นทาง (Route) เข้ากับเมธอดของ Controller ที่ถูกต้องคือข้อใด?
A. Route::get('/about', AdminController->about())
B. Route::get('/about', [AdminController::class, 'about'])
C. Route::get('/about', 'AdminController.about')
D. Route::get('/about', call(AdminController, about))
5. ข้อใดคือข้อดีสำคัญของการย้าย Logic จากไฟล์ routes/web.php มาไว้ใน Controller?
A. ทำให้เว็บไซต์โหลดเร็วขึ้นสองเท่า
B. ไม่จำเป็นต้องเขียน Route อีกต่อไป
C. ช่วยแยกหน้าที่ของระบบให้เป็นระเบียบ ดูแลรักษาง่ายตามหลัก MVC
D. ช่วยป้องกันไม่ให้ผู้ใช้เข้าถึงหน้าเว็บได้
6. คำสั่ง Blade ใดที่ใช้วนลูปแสดงข้อมูลอาร์เรย์ในตาราง HTML?
A. @while ($items)
B. @loop ($items as $item)
C. @foreach ($items as $item)
D. @repeat ($items, $item)
7. คลาส Bootstrap ใดที่ใช้ตกแต่งตาราง HTML ให้มีสีแถวสลับกัน (Striped Rows)?
A. table-hover
B. table-bordered
C. table-striped
D. table-responsive
8. แอตทริบิวต์ method='POST' ในแท็ก <form> มีความหมายอย่างไร?
A. ใช้แสดงผลหน้าเว็บแบบป๊อปอัป
B. กำหนดให้ส่งข้อมูลไปยังเซิร์ฟเวอร์แบบเขียนข้อมูล (ไม่แสดงข้อมูลใน URL)
C. ใช้ดาวน์โหลดไฟล์จากเซิร์ฟเวอร์
D. ใช้ลบข้อมูลออกจากฐานข้อมูลทันที
9. คำสั่ง @csrf ในแบบฟอร์ม Laravel มีไว้เพื่อจุดประสงค์ใด?
A. ใช้จัดรูปแบบตัวอักษรให้สวยงาม
B. ป้องกันการโจมตีแบบ Cross-Site Request Forgery
C. ใช้เชื่อมต่อฐานข้อมูลอัตโนมัติ
D. ใช้สร้างรหัสผ่านอัตโนมัติให้ผู้ใช้
10. ฟังก์ชัน compact() ใน Controller มีประโยชน์อย่างไร?
A. ใช้บีบอัดไฟล์ให้มีขนาดเล็กลง
B. ใช้รวมตัวแปรหลายตัวเป็นอาร์เรย์เพื่อส่งต่อไปยังหน้า View
C. ใช้ลบตัวแปรที่ไม่จำเป็นออกจากหน่วยความจำ
D. ใช้เข้ารหัสข้อมูลก่อนบันทึกลงฐานข้อมูล
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 24 / 27
สัปดาห์ที่ 5 • การควบคุมการทำงานด้วย Controller และฟอร์ม01-406-093-203 Laravel Course
คำถามท้ายบทเรียน
คำสั่งใดใน Artisan ใช้สร้างคลาส Controller ใหม่?
A. php artisan create:controller
B. php artisan generate:controller
C. php artisan make:controller
D. php artisan new:controller
คำอธิบาย: คำสั่ง php artisan make:controller ใช้ในการสร้างคลาสคอนโทรลเลอร์มาตรฐานขึ้นมาใช้งาน
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 25 / 27
สัปดาห์ที่ 5 • การควบคุมการทำงานด้วย Controller และฟอร์ม01-406-093-203 Laravel Course
Workshop 5: พัฒนา Controller ควบคุมข้อมูลสินค้าและการแสดงผลแบบตาราง
- 1สร้างคอนโทรลเลอร์ด้วยคำสั่ง php artisan make:controller ProductController
- 2เขียนฟังก์ชัน index() ใน ProductController เพื่อคืนค่าวิวพร้อมรายการอาร์เรย์สินค้า
- 3ออกแบบวิวตารางสินค้าด้วยคลาส table-striped ของ Bootstrap
- 4สร้างหน้าต่างแบบฟอร์มสำหรับรับลงทะเบียนข้อมูลสินค้าลงในระบบ
command_prompt.sh
php artisan make:controller ProductController
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 26 / 27
สัปดาห์ที่ 5 • การควบคุมการทำงานด้วย Controller และฟอร์ม01-406-093-203 Laravel Course
ใบงานที่ 5: จัดทำฟอร์มและตารางแสดงรายชื่อหนังสือ
พัฒนาโครงร่างระบบการจัดการร้านหนังสือโดยควบคุมผ่าน BookController แสดงรายการเป็นตาราง และจัดแบบฟอร์มให้กรอกข้อมูลเบื้องต้น
เกณฑ์การตรวจประเมินผล:
- การสร้างคอนโทรลเลอร์และเขียนเมธอดแยกความรับผิดชอบ40%
- การออกแบบหน้าจอแสดงผลข้อมูลแบบตารางและฟอร์มรับข้อมูล40%
- ความสอดคล้องและการเชื่อมต่อเส้นทาง20%
อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 27 / 27