สัปดาห์ที่ 3 • ระบบ Routing และการเรนเดอร์ Views01-406-093-203 Laravel Course

01-406-093-203

การพัฒนาเว็บแอปพลิเคชันด้วยเฟรมเวิร์ค

โดย นายศุภมิตร จันทร์โทวงศ์

สาขาวิชาระบบสารสนเทศ คณะบริหารธุรกิจ

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 1 / 18

สัปดาห์ที่ 3 • ระบบ Routing และการเรนเดอร์ Views01-406-093-203 Laravel Course

เช็คชื่อเข้าชั้นเรียน

ให้นักศึกษาสแกน QR Code นี้เพื่อเข้าสู่ระบบเช็คชื่อเข้าเรียน
ระบบจะทำการบันทึกประวัติการเข้าเรียนในวิชานี้อัตโนมัติ

สแกนเพื่อเช็คชื่อเข้าชั้นเรียน (สัปดาห์ที่ 3)

ระบบเช็คชื่อปิดการลงทะเบียนชั่วคราว

ผู้สอนยังไม่ได้เปิดระบบเช็คชื่อสำหรับบทเรียนสัปดาห์นี้ หรือหมดเวลากรอกข้อมูลแล้ว

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 2 / 18

สัปดาห์ที่ 3 • ระบบ Routing และการเรนเดอร์ Views01-406-093-203 Laravel Course

ฝึกทักษะการพิมพ์ดีดภาษาไทย (Thai Speed Typing)

เกณฑ์ประเมินระดับความเร็ว (WPM):
• ต่ำกว่า 25 WPM: ระดับเริ่มต้น (Beginner)
• 25 - 44 WPM: ระดับทั่วไป (Average)
• 45 - 64 WPM: ระดับคล่องแคล่ว (Fluent)
• 65 - 79 WPM: ระดับรวดเร็ว (Fast)
• 80 WPM ขึ้นไป: ระดับมืออาชีพ (Pro)

เวลาที่เหลือ

300s

WPM

ความแม่นยำ

100%

ผ่านคำศัพท์

ระดับความเร็วปัจจุบันของคุณ:รอดำเนินการ

thai-typing

แนวคิดการเขียนโค้ด

การเขียนโปรแกรมที่ดีเริ่มต้นจากการวางแผนโครงสร้างข้อมูลอย่างเป็นระบบ

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 3 / 18

สัปดาห์ที่ 3 • ระบบ Routing และการเรนเดอร์ Views01-406-093-203 Laravel Course

ฝึกทักษะการพิมพ์ดีดภาษาอังกฤษ (English Speed Typing)

เกณฑ์ประเมินระดับความเร็ว (WPM):
• ต่ำกว่า 20 WPM: ระดับเริ่มต้น (Beginner)
• 20 - 34 WPM: ระดับทั่วไป (Average)
• 35 - 49 WPM: ระดับคล่องแคล่ว (Fluent)
• 50 - 64 WPM: ระดับรวดเร็ว (Fast)
• 65 WPM ขึ้นไป: ระดับมืออาชีพ (Pro)

เวลาที่เหลือ

300s

WPM

ความแม่นยำ

100%

ผ่านคำศัพท์

ระดับความเร็วปัจจุบันของคุณ:รอดำเนินการ

english-typing

Coding philosophy

Learning how to code opens up a world of endless possibilities and creative solutions.

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 4 / 18

สัปดาห์ที่ 3 • ระบบ Routing และการเรนเดอร์ Views01-406-093-203 Laravel Course

ฝึกทักษะการพิมพ์โค้ด (Speed Typing Practice)

เกณฑ์ประเมินระดับความเร็ว (WPM):
• ต่ำกว่า 12 WPM: ระดับเริ่มต้น (Beginner)
• 12 - 21 WPM: ระดับทั่วไป (Average)
• 22 - 34 WPM: ระดับคล่องแคล่ว (Fluent)
• 35 - 49 WPM: ระดับรวดเร็ว (Fast)
• 50 WPM ขึ้นไป: ระดับมืออาชีพ (Pro)

เวลาที่เหลือ

300s

WPM

ความแม่นยำ

100%

ผ่านคำศัพท์

ระดับความเร็วปัจจุบันของคุณ:รอดำเนินการ

laravel-syntax

ติดตั้งโปรเจกต์ Laravel ใหม่

composer create-project laravel/laravel first-app

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 5 / 18

สัปดาห์ที่ 3 • ระบบ Routing และการเรนเดอร์ Views01-406-093-203 Laravel Course

แบบทดสอบก่อนเรียน (Pre-test)

1. การประกาศ Route แบบใดเหมาะสำหรับการแสดงผลหน้าเว็บเพจทั่วไปที่ไม่มีลอจิกซับซ้อน?

A. Route::post()

B. Route::view()

C. Route::get()

D. Route::any()

2. สัญกรณ์ใดที่ใช้ในการระบุพารามิเตอร์แบบ 'ต้องระบุค่า' (Required Parameter) ในระบบ Routing ของ Laravel?

A. Route::get('/user/{id}', ...)

B. Route::get('/user/id?', ...)

C. Route::get('/user/:id', ...)

D. Route::get('/user/$id', ...)

3. คำสั่งใดใช้ในการสร้าง Controller เปล่าใหม่ผ่าน Artisan?

A. php artisan make:controller ProductController

B. php artisan new:controller ProductController

C. php artisan controller:create ProductController

D. laravel make:controller ProductController

4. หากต้องการให้พารามิเตอร์ของ Route เป็นแบบ 'มีหรือไม่มีก็ได้' (Optional Parameter) ต้องใส่เครื่องหมายใดต่อท้ายชื่อตัวแปรในปีกกา?

A. เครื่องหมายดอกจัน (*)

B. เครื่องหมายบวก (+)

C. เครื่องหมายคำถาม (?)

D. เครื่องหมายตกใจ (!)

5. Named Routes (การตั้งชื่อเส้นทาง) มีประโยชน์หลักอย่างไรในการพัฒนาแอปพลิเคชัน?

A. ช่วยเพิ่มความเร็วในการดึงข้อมูลจากดาต้าเบส

B. ทำให้อัปเดตเวอร์ชัน PHP ได้ง่ายขึ้น

C. ช่วยให้การเปลี่ยน URL เส้นทางในระบบมีผลอัปเดตทุกลิงก์ที่ใช้อัตโนมัติ โดยอ้างอิงผ่านชื่อแทน

D. ใช้ในการแปลงภาษาเว็บไซต์อัตโนมัติ

6. เมื่อมีการส่งคำขอข้อมูลมาจากฟอร์มกรอกข้อมูล HTML เพื่อบันทึกสิ่งใหม่ ควรจับคู่กับ HTTP Method ใดมากที่สุด?

A. GET

B. PUT

C. POST

D. DELETE

7. HTTP Method ใดใช้สำหรับการอัปเดตข้อมูลเก่าที่มีอยู่แล้วแบบทับข้อมูลเดิมทั้งหมด?

A. GET

B. POST

C. DELETE

D. PUT

8. หากคุณต้องการส่งคำสั่ง HTTP Request ไปยังฟังก์ชัน 'index' ใน ProductController รูปแบบการเขียนข้อใดถูกต้องใน web.php?

A. Route::get('/products', [ProductController::class, 'index']);

B. Route::get('/products', 'ProductController@index');

C. Route::get('/products', index(ProductController::class));

D. Route::get('/products', 'ProductController.index');

9. ข้อใดคือคำสั่งใช้ตรวจสอบตารางเส้นทาง (Route List) ทั้งหมดที่มีอยู่ในระบบโปรเจกต์?

A. php artisan show:routes

B. php artisan route:list

C. laravel route:view

D. composer route:list

10. เราใช้คำสั่งประเภทใดในการกรองค่าประเภทข้อมูลที่ยอมรับ เช่น ให้ ID ยอมรับเฉพาะตัวเลข 0-9 เท่านั้นในหน้า Route?

A. Regular Expression Constraint (ผ่าน where())

B. Eloquent Filter

C. Blade logic helper

D. Artisan constraint check

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 6 / 18

สัปดาห์ที่ 3 • ระบบ Routing และการเรนเดอร์ Views01-406-093-203 Laravel Course

Routing (ระบบนำเส้นทาง)

หน้าต่างคัดกรองตัวนำส่ง URL ทั้งหมดของแอปพลิเคชัน Laravel
มีหน้าที่รับ Request จากเบราว์เซอร์แล้วส่งต่อไปยัง Logic หรือ Controller ที่สอดคล้อง
กำหนดได้หลากหลาย HTTP Methods เช่น GET, POST, PUT, DELETE
ตัวอย่างการเขียน Route เพื่อรับการเรียกใช้งานในลักษณะเส้นทางตรงและแบบซับซ้อน

code-example.php

// 1. ตัวอย่างเส้นทางหน้าแรกสุดของเว็บไซต์
Route::get('/', function () {
    return 'ยินดีต้อนรับสู่ Laravel';
});

// 2. ตัวอย่างเส้นทางที่มีการแบ่งระดับโฟลเดอร์ย่อย (Nested Path)
Route::get('admin/user/jack', function () {
    return "<h1>ยินดีต้อนรับ Admin</h1>";
});

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 7 / 18

สัปดาห์ที่ 3 • ระบบ Routing และการเรนเดอร์ Views01-406-093-203 Laravel Course

Route Name & Fallback

การตั้งชื่อเล่นให้ Route (Named Routes) เพื่อความสะดวกในการสร้างลิงก์เชื่อมโยงผ่านฟังก์ชัน route()
ช่วยลดปัญหาลิงก์เสีย (Broken Links) เมื่อมีการเปลี่ยนโครงสร้าง URL ภายหลัง
Route::fallback() มีไว้สำหรับดักจับกรณีที่ผู้ใช้งานป้อน URL ที่ระบบไม่ได้กำหนดไว้
ช่วยเพิ่ม User Experience (UX) โดยการสร้างหน้าข้อความ 404 สวยงามแทนระบบแจ้งเตือนแบบเดิม

code-example.php

// การตั้งชื่อ Route
Route::get('/profile/user', function () {
    return 'User Profile';
})->name('profile');

// การดักจับกรณีไม่พบหน้าเว็บ
Route::fallback(function () {
    return response()->view('errors.404', [], 404);
});

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 8 / 18

สัปดาห์ที่ 3 • ระบบ Routing และการเรนเดอร์ Views01-406-093-203 Laravel Course

Route Parameters (การรับส่งข้อมูลผ่าน URL)

การส่งผ่านข้อมูลแบบไดนามิกผ่านเส้นทาง URL ไปยังฟังก์ชันประมวลผล
กำหนดพารามิเตอร์ใน Route ด้วยการหุ้มชื่อตัวแปรด้วยเครื่องหมายปีกกา {parameter}
ตัวแปรพารามิเตอร์จาก URL จะถูกส่งผ่านเป็นอาร์กิวเมนต์เข้าสู่ฟังก์ชัน Closure โดยอัตโนมัติ
ตัวอย่างการรับชื่อบล็อกบทความจาก URL มาพิมพ์แสดงผลผ่านแท็กหัวข้อ HTML

code-example.php

Route::get('blog/{name}', function ($name) {
    return "<h1>ชื่อบทความ : {$name}</h1>";
});

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 9 / 18

สัปดาห์ที่ 3 • ระบบ Routing และการเรนเดอร์ Views01-406-093-203 Laravel Course

การเรียกใช้ Route (Calling Routes)

การนำชื่อเล่นของ Route (Named Routes) ไปใช้งานจริงผ่านฟังก์ชัน helper route()
ระบบจะสร้าง URL แบบเต็ม (Absolute URL) ให้โดยอัตโนมัติอิงตามการตั้งชื่อเล่นของ Route
นิยมใช้ในการสร้างปุ่มนำทางหรือลิงก์เชื่อมโยงหน้าเว็บเข้าหากัน
ตัวอย่างการประกาศชื่อเล่นของ Route ปลายทาง และการเรียกใช้งานผ่านลิงก์ HTML

code-example.php

// 1. ประกาศ Route ต้นทางพร้อมตั้งชื่อเล่น ___STRING_0___
Route::get('admin/user/jack', function () {
    return "<h1>ยินดีต้อนรับ Admin</h1>";
})->name('login');

// 2. เรียกใช้งานด้วยฟังก์ชัน route(___STRING_4___) เพื่อสร้างลิงก์เชื่อมโยง
Route::get('/', function () {
    return "<a href='" . route('login') . "'>Login</a>";
});

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 10 / 18

สัปดาห์ที่ 3 • ระบบ Routing และการเรนเดอร์ Views01-406-093-203 Laravel Course

Views (การจัดการส่วนแสดงผล)

ทำหน้าที่ในการแสดงผลฝั่งหน้าบ้าน (HTML/CSS/JS) ให้แก่ผู้ใช้งาน
ถูกจัดเก็บอยู่ในโฟลเดอร์ resources/views/ ทั้งหมด
ใน Laravel จะใช้ระบบ .blade.php เสมอ เพื่อลดความยุ่งยากของการเขียน PHP แทรกใน HTML
เรียกใช้งานได้ง่ายด้วยการใช้ฟังก์ชัน helper view() ใน Route หรือ Controller

code-example.php

// คืนค่าหน้าแสดงผล welcome.blade.php
Route::get('/home', function () {
    return view('welcome');
});

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 11 / 18

สัปดาห์ที่ 3 • ระบบ Routing และการเรนเดอร์ Views01-406-093-203 Laravel Course

ตัวอย่างการสร้างไฟล์แสดงผลใน Views

การเขียนโครงสร้างหน้าเว็บ HTML5 มาตรฐานในโฟลเดอร์เก็บเทมเพลตวิวหลัก
สร้างไฟล์สำหรับแสดงผลข้อมูล เช่น blog.blade.php ไว้ภายใต้ resources/views/
ระวังความแตกต่างของนามสกุลไฟล์: ระบบรองรับ .blade.php ไม่รองรับ .blad.php
เรียกใช้งานจาก web.php ผ่านการชี้เป้าด้วยชื่อสั้น: return view('blog');

code-example.html

<!-- resources/views/blog.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>บทความทั้งหมด</title>
</head>
<body>
    <h2>บทความทั้งหมด</h2>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora quam temporibus in voluptate soluta, obcaecati minima...</p>
</body>
</html>

resources/

views/

blog.blade.php

welcome.blade.php

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 12 / 18

สัปดาห์ที่ 3 • ระบบ Routing และการเรนเดอร์ Views01-406-093-203 Laravel Course

ตัวอย่างการเชื่อมโยงหน้าด้วย URL เส้นทางตรง

การใช้แท็กสมอ HTML <a> ร่วมกับแอตทริบิวต์ href เพื่อสร้างลิงก์เชื่อมโยงหน้าเว็บ
กำหนดเส้นทางลิงก์แบบสัมพัทธ์ (Relative URL) เช่น /blog, /about, และ / เพื่อนำทาง
สร้างไฟล์ about.blade.php ใน resources/views/ และเขียนเมนูนำทางพื้นฐาน
เบราว์เซอร์จะส่งคำขอ Request ใหม่ไปยังเส้นทางที่เลือกเมื่อมีการคลิกลิงก์

code-example.html

<!-- resources/views/about.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>เกี่ยวกับเรา</title>
</head>
<body>
    <h2>เกี่ยวกับเรา</h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit...</p>
    
    <!-- แทรกปุ่มนำทางโดยระบุ URL เส้นทางโดยตรง -->
    <a href="/blog">บทความทั้งหมด</a>
    <a href="/about">เกี่ยวกับเรา</a>
    <a href="/">หน้าแรก</a>
</body>
</html>

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 13 / 18

สัปดาห์ที่ 3 • ระบบ Routing และการเรนเดอร์ Views01-406-093-203 Laravel Course

ตัวอย่างหน้าแรกและโครงสร้างไฟล์ Views ทั้งหมด

แสดงโครงสร้างไฟล์นำเสนอทั้งหมดภายใต้โฟลเดอร์ resources/views/
ตัวอย่างการแก้ไขไฟล์หน้าแรก welcome.blade.php เพื่อรองรับระบบเมนู
ระบุ URL เส้นทางตรงแบบสัมพัทธ์ในเมนูนำทางเพื่อให้การสลับหน้าทำงานได้ราบรื่น
ช่วยแยกโครงสร้างเนื้อหาเพจแต่ละหน้าออกจากกันอย่างชัดเจนตามกฎของ MVC

code-example.html

<!-- resources/views/welcome.blade.php -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ยินดีต้อนรับสู่เว็บไซต์ของเรา</title>
</head>
<body>
    <h2>ยินดีต้อนรับสู่เว็บไซต์ของเรา</h2>
    <p>Lorem ipsum dolor sit amet...</p>
    
    <!-- แทรกปุ่มนำทางโดยระบุ URL เส้นทางโดยตรง -->
    <a href="/blog">บทความทั้งหมด</a>
    <a href="/about">เกี่ยวกับเรา</a>
    <a href="/">หน้าแรก</a>
</body>
</html>

resources/

views/

about.blade.php

blog.blade.php

welcome.blade.php

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 14 / 18

สัปดาห์ที่ 3 • ระบบ Routing และการเรนเดอร์ Views01-406-093-203 Laravel Course

แบบทดสอบหลังเรียน (Post-test)

A. Route::post()

B. Route::view()

C. Route::get()

D. Route::any()

A. Route::get('/user/{id}', ...)

B. Route::get('/user/id?', ...)

C. Route::get('/user/:id', ...)

D. Route::get('/user/$id', ...)

3. คำสั่งใดใช้ในการสร้าง Controller เปล่าใหม่ผ่าน Artisan?

A. php artisan make:controller ProductController

B. php artisan new:controller ProductController

C. php artisan controller:create ProductController

D. laravel make:controller ProductController

A. เครื่องหมายดอกจัน (*)

B. เครื่องหมายบวก (+)

C. เครื่องหมายคำถาม (?)

D. เครื่องหมายตกใจ (!)

5. Named Routes (การตั้งชื่อเส้นทาง) มีประโยชน์หลักอย่างไรในการพัฒนาแอปพลิเคชัน?

A. ช่วยเพิ่มความเร็วในการดึงข้อมูลจากดาต้าเบส

B. ทำให้อัปเดตเวอร์ชัน PHP ได้ง่ายขึ้น

D. ใช้ในการแปลงภาษาเว็บไซต์อัตโนมัติ

A. GET

B. PUT

C. POST

D. DELETE

A. GET

B. POST

C. DELETE

D. PUT

A. Route::get('/products', [ProductController::class, 'index']);

B. Route::get('/products', 'ProductController@index');

C. Route::get('/products', index(ProductController::class));

D. Route::get('/products', 'ProductController.index');

A. php artisan show:routes

B. php artisan route:list

C. laravel route:view

D. composer route:list

A. Regular Expression Constraint (ผ่าน where())

B. Eloquent Filter

C. Blade logic helper

D. Artisan constraint check

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 15 / 18

สัปดาห์ที่ 3 • ระบบ Routing และการเรนเดอร์ Views01-406-093-203 Laravel Course

คำถามท้ายบทเรียน

หากต้องการตั้งชื่อเส้นทาง (Route Name) เพื่อไม่ให้เกิดลิงก์เสียในอนาคต ต้องต่อท้ายเมธอดใด?

A. ->title('name')

B. ->name('name')

C. ->alias('name')

D. ->route('name')

คำอธิบาย: เมธอด ->name() ใช้สำหรับกำหนดชื่อเฉพาะ (Named Routes) ให้แก่ตัวเส้นทางเพื่อนำไปเชื่อมโยงในระบบได้ง่าย

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 16 / 18

สัปดาห์ที่ 3 • ระบบ Routing และการเรนเดอร์ Views01-406-093-203 Laravel Course

Workshop 3: สร้างระบบนำเส้นทางแสดงผลประวัตินักศึกษา

1เปิดไฟล์ routes/web.php
2สร้าง Route แบบ GET ที่มีพารามิเตอร์รับค่า ID นักศึกษา และตั้งชื่อ Route เป็น student.profile
3เขียน Route::fallback() คืนค่าข้อความแจ้งเตือน 404 แบบกำหนดเองเมื่อระบุลิงก์ไม่ถูกต้อง
4สร้างหน้า View แสดงประวัตินักศึกษาและทดสอบและพิมพ์ผลลัพธ์ผ่านหน้าจอเบราว์เซอร์

command_prompt.sh

Route::get('/student/{id}', function ($id) {
    return view('student', ['id' => $id]);
})->name('student.profile');

Route::fallback(function () {
    return 'ไม่พบหน้าเว็บ';
});

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 17 / 18

สัปดาห์ที่ 3 • ระบบ Routing และการเรนเดอร์ Views01-406-093-203 Laravel Course

ใบงานที่ 3: ออกแบบระบบนำเส้นทางของพอร์ทัลบทเรียน

สร้างเส้นทาง URL แสดงรายละเอียดบทเรียน และสร้างระบบจัดการเส้นทางที่ไม่พบ (Fallback) เพื่อควบคุมให้ผู้ใช้ใช้งานได้อย่างถูกต้อง

เกณฑ์การตรวจประเมินผล:

ความถูกต้องของการกำหนดพารามิเตอร์และการตั้งชื่อ Route40%
การติดตั้งระบบ Fallback จัดการเส้นทางที่ไม่มีอยู่จริง40%
ความสะอาดเรียบร้อยของโค้ดและการส่งงาน20%

อาจารย์ผู้บรรยาย: ศุภมิตร จันทร์โทวงศ์สไลด์ที่ 18 / 18