สัปดาห์ที่ 1 • แนะนำ Laravel & สถาปัตยกรรม MVC01-406-093-203 Laravel Course

01-406-093-203

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

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

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

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

สัปดาห์ที่ 1 • แนะนำ Laravel & สถาปัตยกรรม MVC01-406-093-203 Laravel Course

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

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

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

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

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

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

สัปดาห์ที่ 1 • แนะนำ Laravel & สถาปัตยกรรม MVC01-406-093-203 Laravel Course

ข้อมูลผู้สอน (Instructor Profile)

ชื่อ : อาจารย์ศุภมิตร จันทร์ทวงศ์ (แจ๊ค)
E-Mail : [email protected]
เบอร์ : 062-297-9997
Facebook : Jack Supamit
Line ID : Supamit.ja

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

สัปดาห์ที่ 1 • แนะนำ Laravel & สถาปัตยกรรม MVC01-406-093-203 Laravel Course

แรงบันดาลใจในการเริ่มต้น (Inspirational Video)

วิดีโอนำเข้าสู่บทเรียน: ถ้าคุณต้องการเปลี่ยนแปลงโลก จงเริ่มจากเก็บที่นอน
เรียนรู้แนวคิดวินัยในตัวเองจากสุนทรพจน์ระดับโลก
เข้าใจว่าความสำเร็จที่ยิ่งใหญ่เริ่มจากความรับผิดชอบในงานชิ้นเล็กที่สุดในแต่ละวัน

▶

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

สัปดาห์ที่ 1 • แนะนำ Laravel & สถาปัตยกรรม MVC01-406-093-203 Laravel Course

ทิศทางและการเปลี่ยนแปลงของโลก (The Game is Changing)

วิดีโอแนะนำ: THE GAME IS CHANGING ทิศทางของโลกและอนาคตที่กำลังเปลี่ยนไป
ทำความเข้าใจผลกระทบของเทคโนโลยี AI และเศรษฐกิจดิจิทัล
เรียนรู้ความสำคัญของ 3 เสาหลักแห่งอนาคต: AI, Digital Economy และ Health (สุขภาพ)

▶

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

สัปดาห์ที่ 1 • แนะนำ Laravel & สถาปัตยกรรม MVC01-406-093-203 Laravel Course

“ถ้า AI เขียนโค้ดได้ แล้วเรายังต้องเรียน Laravel ทำไม?”

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

สัปดาห์ที่ 1 • แนะนำ Laravel & สถาปัตยกรรม MVC01-406-093-203 Laravel Course

“AI ช่วยเขียนโค้ดได้ แต่คนที่เข้าใจ Business Logic, Database, Architecture และสามารถตรวจสอบสิ่งที่ AI สร้างได้ จะเป็นคนที่มีคุณค่าในตลาดงาน”

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

สัปดาห์ที่ 1 • แนะนำ Laravel & สถาปัตยกรรม MVC01-406-093-203 Laravel Course

สุขภาพ

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

สัปดาห์ที่ 1 • แนะนำ Laravel & สถาปัตยกรรม MVC01-406-093-203 Laravel Course

ถ้านักศึกษาพัฒนาระบบได้อยากสร้างระบบอะไร และระบบนี้ทำงานอย่างไร ?

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

สัปดาห์ที่ 1 • แนะนำ Laravel & สถาปัตยกรรม MVC01-406-093-203 Laravel Course

คำอธิบายรายวิชา (Course Description)

การพัฒนาเว็บแอปพลิเคชัน
เฟรมเวิร์คสำหรับการพัฒนาเว็บแอปพลิเคชันและการเลือกเฟรมเวิร์ค
การพัฒนาและการเลือกเอพีไอ (API) สำหรับพัฒนาเว็บแอปพลิเคชัน

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

สัปดาห์ที่ 1 • แนะนำ Laravel & สถาปัตยกรรม MVC01-406-093-203 Laravel Course

แผนการสอนรายสัปดาห์ (สัปดาห์ที่ 1 - 8)

ครึ่งแรกเน้นปูพื้นฐาน Laravel Core Concept และ MVC
ทำความเข้าใจระบบ Routing, Blade Engine และการจัดการโฟลเดอร์
เรียนรู้วิธีจัดการฐานข้อมูลด้วย Migrations, Seeding และ Eloquent CRUD
การสอบกลางภาคในสัปดาห์ที่ 8 เพื่อวัดความรู้ภาคทฤษฎีและปฏิบัติ

Syllabus Timeline: Weeks 1 - 8

สัปดาห์ที่ 1: แนะนำ Laravel & MVC

ภาพรวมสถาปัตยกรรม Request Lifecycle และ MVC

สัปดาห์ที่ 2: การติดตั้ง & โครงสร้างโฟลเดอร์

ติดตั้งด้วย Composer และตั้งค่าคอนฟิกูเรชันผ่าน .env

สัปดาห์ที่ 3: Routing & Basic Controller

การส่งผ่านพารามิเตอร์และการจับคู่เส้นทาง URL

สัปดาห์ที่ 4: Blade Templating Engine

ออกแบบ Layout หลักและการแสดงผลด้วย Blade Component

สัปดาห์ที่ 5: Database Migration & Seeding

ควบคุมเวอร์ชันของตารางฐานข้อมูลและสร้างชุดจำลองข้อมูล

สัปดาห์ที่ 6: Eloquent ORM & CRUD Operations

การดึง เขียน ลบ และอัปเดตข้อมูลด้วยอ็อบเจกต์โมเดล

สัปดาห์ที่ 7: Eloquent Relationship

ผูกความสัมพันธ์แบบ One-to-Many และ Many-to-Many

สัปดาห์ที่ 8: สอบกลางภาค (Midterm Exam)

ประเมินทฤษฎีและปฏิบัติ ปิดหนังสือและปิดอุปกรณ์สื่อสาร

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

สัปดาห์ที่ 1 • แนะนำ Laravel & สถาปัตยกรรม MVC01-406-093-203 Laravel Course

แผนการสอนรายสัปฯ (สัปดาห์ที่ 9 - 16)

ครึ่งหลังเน้นการประยุกต์ใช้งาน ฟังก์ชันขั้นสูง และความปลอดภัย
เรียนรู้การคัดกรองฟอร์ม (Validation) และระบบสิทธิ์ผู้ใช้ (Breeze/Middleware)
การสืบค้น แบ่งหน้าข้อมูลสินค้า การจัดการคลังเก็บไฟล์ Storage และการพัฒนา RESTful APIs
ศึกษาการทดสอบระบบ (Testing), คิวงาน (Queues) และการจำลองระบบรันจริง (Local Production Setup)
ส่งมอบโครงงานกลุ่ม (Term Project) ในสัปดาห์ที่ 16

Syllabus Timeline: Weeks 9 - 16

สัปดาห์ที่ 9: Forms, Requests & Validation

การกรองความถูกต้องของข้อมูลนำเข้าและป้องกัน CSRF

สัปดาห์ที่ 10: Authentication & Middleware

ระบบ Login สำเร็จรูปด้วย Breeze และสกัดสิทธิ์แอดมิน

สัปดาห์ที่ 11: Advanced Queries & Pagination

การสืบค้นข้อมูล การกรองสินค้า และการแบ่งหน้าข้อมูล

สัปดาห์ที่ 12: File Storage & Symbolic Links

อัปโหลดภาพ จัดการพื้นที่และเชื่อมโยงโฟลเดอร์สาธารณะ

สัปดาห์ที่ 13: Testing & Debugging

เขียนการทดสอบฟังก์ชันระบบ (Feature Tests) ป้องกันโค้ดพัง

สัปดาห์ที่ 14: Queues & Database Notifications

ระบบคิวงาน Asynchronous และแจ้งเตือนด่วนหลังฉาก

สัปดาห์ที่ 15: RESTful API & Sanctum

การพัฒนา RESTful API และระบบยืนยันตัวตนด้วย Laravel Sanctum

สัปดาห์ที่ 16: Local Production Optimization & Final Exam

การจัดทำ Production Cache, รัน Queue Worker และส่งมอบโครงงาน 40%

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

สัปดาห์ที่ 1 • แนะนำ Laravel & สถาปัตยกรรม MVC01-406-093-203 Laravel Course

การประเมินผล (Course Evaluation)

สอบกลางภาค: 20%
สอบปลายภาค: 30%
การบ้าน: 30%
งานกลุ่มและผลงาน: 10%
จิตพิสัย: 10%

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

สัปดาห์ที่ 1 • แนะนำ Laravel & สถาปัตยกรรม MVC01-406-093-203 Laravel Course

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

1. ข้อใดกล่าวถึง Laravel Framework ได้ถูกต้องที่สุด?

A. เป็น CMS เหมือน WordPress

B. เป็น Framework ภาษา PHP ที่ใช้โครงสร้างแบบ MVC

C. เป็นไลบรารีสำหรับจาวาสคริปต์

D. เป็นระบบจัดการฐานข้อมูลรูปแบบใหม่

2. ตัวอักษร 'M' ในสถาปัตยกรรมแบบ MVC ย่อมาจากคำว่าอะไร และทำหน้าที่อะไร?

A. Menu - จัดการเมนูของเว็บไซต์

B. Migration - จัดการตารางในฐานข้อมูล

C. Model - จัดการโครงสร้างข้อมูลและ Business Logic

D. Middleware - ควบคุมสิทธิ์การเข้าใช้งานเส้นทาง URL

3. ตัวอักษร 'V' ในสถาปัตยกรรมแบบ MVC ทำหน้าที่หลักในเรื่องใด?

A. แสดงผลอินเทอร์เฟซ (HTML/CSS) ให้กับผู้ใช้

B. บันทึกข้อมูลลงฮาร์ดดิสก์

C. เขียนโปรแกรมควบคุมการทำงานของแอปพลิเคชัน

D. ตรวจสอบสิทธิ์ความปลอดภัย

4. ตัวอักษร 'C' ในสถาปัตยกรรมแบบ MVC มีหน้าที่อะไร?

A. จัดเก็บคุกกี้ของผู้ใช้งาน

B. คอมไพล์ซอร์สโค้ดของโปรแกรม

C. เชื่อมต่อและตั้งค่าพอร์ตของฐานข้อมูล

D. รับ Request จากผู้ใช้ ประมวลผลร่วมกับ Model และส่งคืนผลลัพธ์ผ่าน View

5. ข้อใดคือคำสั่ง Command Line ในการรันเว็บเซิร์ฟเวอร์จำลองของ Laravel?

A. laravel run

B. php artisan serve

C. npm run start

D. composer start-server

6. เครื่องมือในการจัดการ Dependencies (ไลบรารีภายนอก) สำหรับภาษา PHP ที่ใช้ติดตั้ง Laravel คือข้อใด?

A. npm

B. pip

C. Composer

D. Homebrew

7. วงจรอายุคำขอ (Request Lifecycle) จุดแรกสุดที่รับคำร้องขอในระบบ Laravel ก่อนจะส่งไปยังส่วนควบคุมคือข้อใด?

A. Controller

B. Routing (เส้นทาง URL)

C. Model

D. Blade Layout

8. Artisan คือเครื่องมืออะไรในระบบของ Laravel?

A. ซอฟต์แวร์ตัดต่อภาพ

B. ระบบรักษาความปลอดภัยเซิร์ฟเวอร์

C. เครื่องมือ Command Line Utility (CLI) ที่ติดมากับ Laravel

D. ตัวเชื่อมฐานข้อมูลความเร็วสูง

9. ข้อใดกล่าวถึงแนวคิดแบบ 'MVC' ได้ถูกต้องเกี่ยวกับระบบการพัฒนาเว็บ?

A. ช่วยแยกสัดส่วนการทำงานของโค้ดให้ดูแลรักษาง่ายขึ้น

B. ทำให้รันเว็บเฉพาะฝั่ง Client เท่านั้น

C. จำกัดสิทธิ์ผู้ใช้ไม่ให้เข้าถึงเว็บไซต์

D. บังคับให้ผู้ใช้ต้องติดตั้งแอปพลิเคชันเสริม

10. หากคุณต้องการดึงข้อมูลนักศึกษาทั้งหมดจากฐานข้อมูลผ่าน Laravel Eloquent คลาสใดที่มีหน้าที่รองรับการทำงานนี้?

A. View Template

B. Artisan Command Console

C. Controller Router File

D. Student Model

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

สัปดาห์ที่ 1 • แนะนำ Laravel & สถาปัตยกรรม MVC01-406-093-203 Laravel Course

สถาปัตยกรรม MVC ใน Laravel

Model จัดการโครงสร้างข้อมูลและกฎทางธุรกิจ
View ทำหน้าที่แสดงผลลัพธ์ผ่านหน้าจอ HTML/CSS
Controller เชื่อมโยงการทำงานระหว่าง Model และ View
ช่วยแบ่งส่วนการพัฒนาให้เป็นสัดส่วนชัดเจน
ง่ายต่อการบำรุงรักษาและการทดสอบระบบ

MVC Flow Pattern

Browser

Request ➔

C (Controller)

➔ Response

View (Blade)

M (Model)

Eloquent ORM

⟷

MySQL Database

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

สัปดาห์ที่ 1 • แนะนำ Laravel & สถาปัตยกรรม MVC01-406-093-203 Laravel Course

วงจร Request Lifecycle ของ Laravel

เริ่มต้นเมื่อ HTTP Request ส่งเข้ามายัง Server
ผ่านด่านแรกที่ public/index.html และ HTTP Kernel
ระบบตรวจสอบ Route ที่ตรงกันผ่าน Web Routes
ส่ง Request ต่อไปประมวลผลที่ Controller
Controller ทำงานและส่ง Response กลับไปยังเบราว์เซอร์

Laravel Request Lifecycle Flowchart

HTTP Request

ไคลเอนต์ส่งคำร้องขอเข้ามาผ่านเว็บเบราว์เซอร์

Public Index / Kernel

โหลดตัวระบบหลักและประมวลผล Middleware ด่านแรก

Routing System

ค้นหาเส้นทาง URL ที่ตรงกับไฟล์ routes/web.php

Controller Layer

รับคำสั่ง ดึงข้อมูลจาก Model และส่งข้อมูลให้ View

HTTP Response

ส่งผลลัพธ์หน้าเว็บกลับไปแสดงผลบนหน้าจอไคลเอนต์

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

สัปดาห์ที่ 1 • แนะนำ Laravel & สถาปัตยกรรม MVC01-406-093-203 Laravel Course

ตัวอย่างหน้าตารหัสควบคุม Controller

สร้างไฟล์ผ่านคำสั่ง php artisan make:controller
ขยายคลาส Base Controller หลักของ Laravel
เก็บเมธอดสำหรับทำงานตาม Request (เช่น index, store)
ใช้ฟังก์ชัน helper view() สำหรับแสดงผล Blade template

code-example.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class PageController extends Controller
{
    public function welcome()
    {
        $course = 'Laravel App Development';
        return view('welcome', compact('course'));
    }
}

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

สัปดาห์ที่ 1 • แนะนำ Laravel & สถาปัตยกรรม MVC01-406-093-203 Laravel Course

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

1. ข้อใดกล่าวถึง Laravel Framework ได้ถูกต้องที่สุด?

A. เป็น CMS เหมือน WordPress

B. เป็น Framework ภาษา PHP ที่ใช้โครงสร้างแบบ MVC

C. เป็นไลบรารีสำหรับจาวาสคริปต์

D. เป็นระบบจัดการฐานข้อมูลรูปแบบใหม่

2. ตัวอักษร 'M' ในสถาปัตยกรรมแบบ MVC ย่อมาจากคำว่าอะไร และทำหน้าที่อะไร?

A. Menu - จัดการเมนูของเว็บไซต์

B. Migration - จัดการตารางในฐานข้อมูล

C. Model - จัดการโครงสร้างข้อมูลและ Business Logic

D. Middleware - ควบคุมสิทธิ์การเข้าใช้งานเส้นทาง URL

3. ตัวอักษร 'V' ในสถาปัตยกรรมแบบ MVC ทำหน้าที่หลักในเรื่องใด?

A. แสดงผลอินเทอร์เฟซ (HTML/CSS) ให้กับผู้ใช้

B. บันทึกข้อมูลลงฮาร์ดดิสก์

C. เขียนโปรแกรมควบคุมการทำงานของแอปพลิเคชัน

D. ตรวจสอบสิทธิ์ความปลอดภัย

4. ตัวอักษร 'C' ในสถาปัตยกรรมแบบ MVC มีหน้าที่อะไร?

A. จัดเก็บคุกกี้ของผู้ใช้งาน

B. คอมไพล์ซอร์สโค้ดของโปรแกรม

C. เชื่อมต่อและตั้งค่าพอร์ตของฐานข้อมูล

D. รับ Request จากผู้ใช้ ประมวลผลร่วมกับ Model และส่งคืนผลลัพธ์ผ่าน View

5. ข้อใดคือคำสั่ง Command Line ในการรันเว็บเซิร์ฟเวอร์จำลองของ Laravel?

A. laravel run

B. php artisan serve

C. npm run start

D. composer start-server

A. npm

B. pip

C. Composer

D. Homebrew

A. Controller

B. Routing (เส้นทาง URL)

C. Model

D. Blade Layout

8. Artisan คือเครื่องมืออะไรในระบบของ Laravel?

A. ซอฟต์แวร์ตัดต่อภาพ

B. ระบบรักษาความปลอดภัยเซิร์ฟเวอร์

C. เครื่องมือ Command Line Utility (CLI) ที่ติดมากับ Laravel

D. ตัวเชื่อมฐานข้อมูลความเร็วสูง

9. ข้อใดกล่าวถึงแนวคิดแบบ 'MVC' ได้ถูกต้องเกี่ยวกับระบบการพัฒนาเว็บ?

A. ช่วยแยกสัดส่วนการทำงานของโค้ดให้ดูแลรักษาง่ายขึ้น

B. ทำให้รันเว็บเฉพาะฝั่ง Client เท่านั้น

C. จำกัดสิทธิ์ผู้ใช้ไม่ให้เข้าถึงเว็บไซต์

D. บังคับให้ผู้ใช้ต้องติดตั้งแอปพลิเคชันเสริม

A. View Template

B. Artisan Command Console

C. Controller Router File

D. Student Model

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

สัปดาห์ที่ 1 • แนะนำ Laravel & สถาปัตยกรรม MVC01-406-093-203 Laravel Course

เข้าร่วมกลุ่ม Line ประจำรายวิชา (Classroom Line Group)

สแกน QR Code ด้านขวาเพื่อเข้ากลุ่ม Line ประจำรายวิชา
ใช้สำหรับติดต่อประสานงาน ส่งข่าวสาร และตอบข้อซักถาม
กรุณาตั้งชื่อเล่นจริง/รหัสนักศึกษา เพื่อให้ผู้สอนระบุตัวตนได้ง่าย

Scan to Join Line Group

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

สัปดาห์ที่ 1 • แนะนำ Laravel & สถาปัตยกรรม MVC01-406-093-203 Laravel Course

Workshop 1: ติดตั้งเครื่องมือและคอมไพล์ Laravel แรก

1ตรวจสอบเวอร์ชัน PHP (ต้องการ PHP 8.2 ขึ้นไป)
2ติดตั้ง Composer บนเครื่องของตนเองให้เรียบร้อย
3สร้างโปรเจกต์ใหม่: composer create-project laravel/laravel first-app
4รันเซิร์ฟเวอร์ทดสอบด้วยคำสั่ง: php artisan serve

command_prompt.sh

composer create-project laravel/laravel first-app
cd first-app
php artisan serve

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

สัปดาห์ที่ 1 • แนะนำ Laravel & สถาปัตยกรรม MVC01-406-093-203 Laravel Course

ใบงานที่ 1: การสำรวจและนำเสนอข้อดีของ Laravel MVC

ให้นักศึกษาสรุปวงจร Request Lifecycle ของ Laravel ในรูปแบบแผนภาพของตนเอง พร้อมเขียนสรุปหน้าที่ของ M, V และ C ลงในรายงาน PDF ความยาว 1 หน้า A4

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

ความถูกต้องของวงจร Request40%
ความชัดเจนของคำอธิบาย MVC40%
การจัดรูปแบบเอกสารและความเป็นระเบียบ20%

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