สัปดาห์ที่ 2 • การติดตั้ง & โครงสร้างโฟลเดอร์01-406-093-203 Laravel Course

01-406-093-203

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

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

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

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

สัปดาห์ที่ 2 • การติดตั้ง & โครงสร้างโฟลเดอร์01-406-093-203 Laravel Course

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

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

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

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

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

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

สัปดาห์ที่ 2 • การติดตั้ง & โครงสร้างโฟลเดอร์01-406-093-203 Laravel Course

บทที่ 2: การติดตั้งและโครงสร้างโฟลเดอร์

การเตรียมความพร้อมเครื่องมือสำหรับพัฒนา Laravel 12
ทำความรู้จัก Composer ตัวช่วยจัดการไลบรารีของภาษา PHP
การสร้างโปรเจกต์ใหม่และการรันเซิร์ฟเวอร์จำลอง
เจาะลึกโครงสร้างและบทบาทหน้าที่ของโฟลเดอร์ต่าง ๆ
การตั้งค่าระบบและสภาพแวดล้อมการพัฒนาผ่านไฟล์ .env

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

สัปดาห์ที่ 2 • การติดตั้ง & โครงสร้างโฟลเดอร์01-406-093-203 Laravel Course

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

1. ไฟล์ใดในโฟลเดอร์หลักของ Laravel ที่ใช้สำหรับการตั้งค่าตัวแปรสภาพแวดล้อม (Environment Variables) เช่น การต่อฐานข้อมูล?

A. config.json

B. .env

C. composer.json

D. package.json

2. หากต้องการเพิ่มคีย์ API หรือรหัสลับเฉพาะสำหรับนักพัฒนา ไม่ควรทำสิ่งใดลงใน Git repository?

A. บันทึกลงไฟล์ .env แล้วอัปโหลดขึ้น GitHub โดยตรง

B. ใส่ไว้ใน .env และเพิ่มไฟล์ .env ลงในรายการไฟล์ที่ข้ามอย่าง .gitignore

C. คัดลอกไฟล์เก็บไว้เป็นความลับนอกโฟลเดอร์

D. ลบข้อมูลความลับก่อนจะอัปโหลดโค้ด

3. โฟลเดอร์ใดในระบบของ Laravel ที่ทำหน้าที่เก็บไฟล์โค้ดของ Model เป็นหลัก?

A. app/Models/

B. database/migrations/

C. routes/

D. resources/views/

4. โฟลเดอร์ใดใช้สำหรับจัดเก็บไฟล์หน้าตาเว็บไซต์ (HTML/CSS) ที่เขียนผ่าน Blade Templating Engine?

A. public/

B. app/Http/Controllers/

C. resources/views/

D. storage/app/

5. จุดเริ่มต้นของเส้นทางเว็บเพจ (Routing URL) ทั้งหมดสำหรับผู้ใช้งานปลายทาง ถูกบันทึกไว้ในไฟล์ใด?

A. routes/web.php

B. app/Http/Kernel.php

C. config/app.php

D. routes/api.php

6. หากต้องการเก็บไฟล์จำพวกสปาร์คมีเดีย เช่น รูปภาพ โลโก้ หรือสไตล์ชีต CSS ที่ต้องการให้คนภายนอกเรียกดูผ่าน URL ได้โดยตรง ต้องเก็บในโฟลเดอร์ใด?

A. storage/framework/

B. public/

C. app/Models/

D. resources/views/

7. ไฟล์ composer.json ในโปรเจกต์ Laravel มีบทบาทสำคัญอย่างไร?

A. เก็บรหัสผ่านเข้าหน้า Admin

B. บันทึกข้อมูลชื่อและชนิดไฟล์ในฐานข้อมูล

C. ใช้กำหนดไลบรารีและแพ็กเกจ PHP ที่โปรเจกต์นี้จำเป็นต้องใช้

D. เป็นสคริปต์ JavaScript สำหรับจัดการปุ่มกด

8. โฟลเดอร์ใดมีหน้าที่เก็บไฟล์ที่ใช้ในการสร้างโครงสร้างตารางข้อมูล (Database Migrations)?

A. database/migrations/

B. app/Models/

C. config/database.php

D. storage/app/public/

9. โฟลเดอร์ config/ ในโครงสร้างโปรเจกต์ Laravel มีไว้สำหรับอะไร?

A. เก็บภาพโลโก้และไฟล์ CSS

B. จัดเก็บไฟล์ควบคุมการเชื่อมต่อฐานข้อมูล เมล และความปลอดภัยต่าง ๆ

C. เก็บข้อมูลการเช็คชื่อเข้าเรียนของนศ.

D. เป็นจุดรันสคริปต์อัตโนมัติ

10. เหตุใด Laravel จึงแยกโฟลเดอร์ storage/ ออกมาต่างหาก?

A. เพื่อความปลอดภัย ป้องกันไม่ให้บุคคลภายนอกเข้าถึงไฟล์บันทึก ล็อก และเซสชันที่สำคัญโดยตรง

B. เพื่อไม่ต้องการให้ระบบอ่านไฟล์ได้

C. เพื่อจัดเก็บหน้ากากดีไซน์เว็บไซต์

D. เป็นโฟลเดอร์ชั่วคราวที่จะลบข้อมูลทิ้งอัตโนมัติ

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

สัปดาห์ที่ 2 • การติดตั้ง & โครงสร้างโฟลเดอร์01-406-093-203 Laravel Course

เข้าสู่การเริ่มเรียนเขียนโปรแกรมเบื้องต้น

ด้วยเกมส์ Angry bird
ลิงก์เข้าทำกิจกรรม: https://studio.code.org/hoc/1

เข้าสู่เกม Angry bird

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

สัปดาห์ที่ 2 • การติดตั้ง & โครงสร้างโฟลเดอร์01-406-093-203 Laravel Course

รายละเอียดของเกมส์

1. ตัวนกอังกี้เบริด (1) ที่ทางนักศึกษาจะต้องเขียนโปรแกรมบังคับให้ไปหา หมู (2)
2. ส่วนที่ (3) เป็นส่วนการอธิบายโจทย์ว่าต้องทำอะไรบ้าง
3. ส่วนที่ (4) เป็นคำสั่งสำหรับนำไปเขียนโปรแกรม
4. ส่วนที่ (5) เป็นส่วนของการเขียนโปรแกรม โดยลากเอาบล็อกคำสั่งมาต่อกัน
5. ส่วนที่ (6) เป็นการสั่งให้รันคำสั่งที่ได้เขียนขึ้น

รายละเอียดของเกมส์

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

สัปดาห์ที่ 2 • การติดตั้ง & โครงสร้างโฟลเดอร์01-406-093-203 Laravel Course

เมื่อเล่นผ่านแต่ละด่าน สามารถดู code โปรแกรมที่เขียนได้

หลังจากต่อบล็อกคำสั่งจนบรรลุเป้าหมายในด่านแล้ว
นักศึกษาสามารถคลิกแสดงรหัสซอร์สโค้ดจริงๆ เบื้องหลังภาพบล็อกได้
ช่วยอธิบายการแปลง logic ของบล็อกคำสั่งไปสู่ Syntax ของภาษา JavaScript

code-example.javascript

// ตัวอย่างโค้ด JavaScript หลังผ่านการต่อบล็อกคำสั่ง
moveForward();
moveForward();

ตรวจสอบคำสั่งโค้ดจริง

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

สัปดาห์ที่ 2 • การติดตั้ง & โครงสร้างโฟลเดอร์01-406-093-203 Laravel Course

สิ่งที่ได้จากการเรียนรู้ของเกม

นักศึกษาจะได้แนวคิดในการเขียนโปรแกรม
นักศึกษาได้เรียนรู้เกี่ยวกับขั้นตอนการทำงานของคำสั่งโปรแกรม
นักศึกษาได้เรียนรู้เกี่ยวกับการทำงานแบบวนรอบ (Loop)
นักศึกษาได้เรียนรู้เกี่ยวกับการทำงานกับเงื่อนไข (IF)

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

สัปดาห์ที่ 2 • การติดตั้ง & โครงสร้างโฟลเดอร์01-406-093-203 Laravel Course

ใบประกาศเมื่อเล่นผ่านทั้งหมด 20 ด่าน

รับใบรับรองการเขียนโปรแกรมกิตติมศักดิ์ (Certificate of Completion)
เพื่อยืนยันความรู้ความเข้าใจเรื่องตรรกะคอมพิวเตอร์เบื้องต้นร่วมกับ Code.org

Hour of Code Certificate

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

สัปดาห์ที่ 2 • การติดตั้ง & โครงสร้างโฟลเดอร์01-406-093-203 Laravel Course

ต้องมีพื้นฐานอะไรบ้าง

มีพื้นฐานการเขียนโปรแกรมด้วยภาษา PHP
มีพื้นฐานการเขียนโปรแกรมเชิงวัตถุด้วยภาษา PHP (Class, Method, Object)
มีพื้นฐาน SQL สำหรับจัดการฐานข้อมูล
มีพื้นฐาน HTML5, CSS3, JavaScript, Bootstrap 5 สำหรับนำมาสร้างเว็บแอพพลิเคชั่น

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

สัปดาห์ที่ 2 • การติดตั้ง & โครงสร้างโฟลเดอร์01-406-093-203 Laravel Course

เครื่องมือพื้นฐาน

XAMPP
Composer
Nodejs
Visual Studio Code

เครื่องมือพื้นฐาน

XAMPP

VS Code

Node.js

Composer

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

สัปดาห์ที่ 2 • การติดตั้ง & โครงสร้างโฟลเดอร์01-406-093-203 Laravel Course

รู้จักกับ MVC

Model (M) คือ ส่วนที่เก็บข้อมูลของ Application (Back-End)
View (V) คือ ส่วนที่ทำงานฝั่ง Front-End หรือหน้าตาแอพพลิเคชั่น เป็นส่วนที่ไว้ใช้แสดงผลข้อมูลด้วย HTML (Blade Template)
Controller (C) คือ ส่วนประมวลผลคำสั่งต่างๆ ในแอพพลิเคชั่น โดยควบคุมการทำงานระหว่าง Model และ View (Back-End)

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

สัปดาห์ที่ 2 • การติดตั้ง & โครงสร้างโฟลเดอร์01-406-093-203 Laravel Course

การทำงานระหว่าง Client และ Server

Client (ผู้ใช้งาน) ทำการร้องขอข้อมูลผ่านทางหน้าเว็บเบราว์เซอร์
ข้อมูลหรือคำสั่งจะถูกส่งไปยัง Server (เครื่องแม่ข่าย) เพื่อประมวลผล
Server จะทำการร้องขอหรือบันทึกข้อมูลไปยัง Database (ระบบฐานข้อมูล)
Database ส่งผลลัพธ์ข้อมูลกลับมาให้ Server สรุปผล
Server จัดการแปลงข้อมูลส่งกลับแสดงผลที่หน้าจอของ Client

รู้จักกับ MVC

Client

Request

Response

MVC

Server

Database

Client ➔ ServerServer ➔ DBResponse

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

สัปดาห์ที่ 2 • การติดตั้ง & โครงสร้างโฟลเดอร์01-406-093-203 Laravel Course

รู้จักกับ MVC (Diagram)

Client ส่งคำร้องขอ (Request) ผ่าน Browser ไปยังส่วนของ Routing
Routing นำ Request ส่งต่อให้กับ Controller ที่สอดคล้องกับการทำงาน
Controller ประมวลผลคำสั่ง ดึงข้อมูลจาก Model และส่งข้อมูลไปหา View
Model จัดการ ดึง บันทึกข้อมูล ร่วมกับระบบ Database
View เรนเดอร์หน้าตาแสดงผลเป็น HTML ส่งกลับเป็น Response ให้กับ Client

รู้จักกับ MVC

Client

Routing

↓

Controller

Data

View

Model

MVC

Database

➔ Request⟷ DB Connection➔ Response

Request

Response

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

สัปดาห์ที่ 2 • การติดตั้ง & โครงสร้างโฟลเดอร์01-406-093-203 Laravel Course

ทำความรู้จักกับ Composer

Composer คือ Dependency Manager สำหรับจัดการไลบรารีภายนอกในภาษา PHP
ทำหน้าที่ดาวน์โหลด อัปเดต และติดตั้ง Packages ต่าง ๆ ตามที่โปรเจกต์ต้องการ
ทำงานโดยอ่านโครงสร้างการตั้งค่าไลบรารีจากไฟล์ composer.json
ระบบจะสร้างไฟล์ composer.lock เพื่อล็อกเวอร์ชันของแพ็กเกจให้ทุกคนในทีมใช้งานเหมือนกัน
ช่วยลดการซ้ำซ้อนและหลีกเลี่ยงปัญหาเรื่องเวอร์ชันของไลบรารีไม่ตรงกัน

Laravel composer.json Structuremy-laravel-app

app/

Http/Controllers/

ProductController.php

Models/

Product.php

database/

migrations/

create_products_table.php

routes/

web.php

resources/

views/

welcome.blade.php

.env

composer.json

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

สัปดาห์ที่ 2 • การติดตั้ง & โครงสร้างโฟลเดอร์01-406-093-203 Laravel Course

การสร้างโปรเจกต์ Laravel 12

วิธีที่ 1: การใช้คำสั่ง Composer create-project (ดาวน์โหลดตรงจาก Repository)
วิธีที่ 2: การใช้ Laravel Installer (ติดตั้งเครื่องมือสร้างโปรเจกต์ระดับ Global)
ตรวจสอบเวอร์ชัน PHP ก่อนการติดตั้ง (ต้องการ PHP 8.2 ขึ้นไปสำหรับ Laravel 11/12)
หลังจากติดตั้งเสร็จสิ้น รันเซิร์ฟเวอร์จำลองเพื่อทดสอบการทำงาน

code-example.bash

// วิธีที่ 1: สร้างโปรเจกต์ผ่าน Composer
composer create-project laravel/laravel my-app

// วิธีที่ 2: ติดตั้ง Laravel Installer และสร้างโปรเจกต์
composer global require laravel/installer
laravel new my-app

// การเข้าโฟลเดอร์และรันเซิร์ฟเวอร์
cd my-app
php artisan serve

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

สัปดาห์ที่ 2 • การติดตั้ง & โครงสร้างโฟลเดอร์01-406-093-203 Laravel Course

โครงสร้างโฟลเดอร์หลักของ Laravel 12 (Root Directory)

app/ : แหล่งเก็บซอร์สโค้ดหลักของแอปพลิเคชัน (Controllers, Models, Providers)
config/ : ไฟล์ตั้งค่าของระบบทั้งหมด เช่น database, mail, app, session
database/ : ไฟล์ประวัติการสร้างตาราง (Migrations), Seeders และ Factories
public/ : จุดเชื่อมต่อไปยังภายนอก เก็บไฟล์ static (CSS, JS, รูปภาพ, index.php)
resources/ : ไฟล์หน้ากากแสดงผล (Blade Views), ภาษา และไฟล์ assets ดิบ (Sass, CSS/JS)
routes/ : ระบบควบคุมทิศทางการเรียกใช้เว็บ (web.php, api.php, console.php)

App Directory Layoutmy-laravel-app

app/

Http/Controllers/

ProductController.php

Models/

Product.php

database/

migrations/

create_products_table.php

routes/

web.php

resources/

views/

welcome.blade.php

.env

composer.json

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

สัปดาห์ที่ 2 • การติดตั้ง & โครงสร้างโฟลเดอร์01-406-093-203 Laravel Course

เจาะลึกโฟลเดอร์ app/ (The Core)

เป็นส่วนที่นักพัฒนาใช้เวลาเขียนโค้ดมากที่สุดในแอปพลิเคชัน
app/Http/Controllers/ : จัดการลอจิกการทำงานและรับ HTTP Requests
app/Models/ : คลาสอ็อบเจกต์ที่ผูกโยงเข้ากับตารางฐานข้อมูล (Eloquent ORM)
app/Providers/ : บริการหลักที่บูตค่าและลงทะเบียนการทำงานต่าง ๆ ของระบบ
ใน Laravel 12 มีการยุบย่อโฟลเดอร์บางส่วน (เช่น Middleware) ไปตั้งค่าที่ bootstrap/app.php แทนเพื่อลดความซับซ้อน

app/ Directory Structuremy-laravel-app

app/

Http/Controllers/

ProductController.php

Models/

Product.php

database/

migrations/

create_products_table.php

routes/

web.php

resources/

views/

welcome.blade.php

.env

composer.json

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

สัปดาห์ที่ 2 • การติดตั้ง & โครงสร้างโฟลเดอร์01-406-093-203 Laravel Course

เจาะลึกโฟลเดอร์ routes/ & resources/

routes/web.php : นิยามเส้นทางเข้าชมหน้าเว็บเพจทั่วไป (มี middleware จัดการ Session, Cookie และ CSRF)
routes/api.php : (ถ้ามี) นิยามเส้นทาง RESTful API ซึ่งไม่มีสถานะ (Stateless) และระบุ Token
resources/views/ : บรรจุไฟล์สกุล .blade.php สำหรับออกแบบและเรนเดอร์หน้าเว็บ
resources/css/ และ resources/js/ : เก็บไฟล์สไตล์และสคริปต์แบบดั้งเดิมก่อนคอมไพล์ด้วย Vite

https://localhost:8000/products/electronics/14

HTTP GET/products/{category}/{id}

Matched Route in web.php

Route::get('/products/{category}/{id}', [
ProductController::class, 'show'
]);

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

สัปดาห์ที่ 2 • การติดตั้ง & โครงสร้างโฟลเดอร์01-406-093-203 Laravel Course

ทำไมต้องใช้ไฟล์กำหนดสภาพแวดล้อม (.env)

แยกแยะการตั้งค่าระบบระหว่างเครื่องพัฒนา (Local) และเซิร์ฟเวอร์จริง (Production)
จัดเก็บข้อมูลที่เป็นความลับ เช่น รหัสผ่านฐานข้อมูล, คีย์รับส่งเมล, API Keys และ APP_KEY
ห้ามนำไฟล์ .env อัปโหลดเข้าสู่ Git Repository โดยเด็ดขาดเพื่อความปลอดภัยสูงสุด
ใช้ไฟล์ .env.example เพื่อเป็นต้นแบบบอกทีมพัฒนาว่าต้องตั้งค่าตัวแปรใดบ้าง

code-example.ini

APP_NAME=Laravel
APP_ENV=local
APP_KEY=base64:dGVzdF9rZXlfZm9yX2RlbW9uc3RyYXRpb25fMTIzNDU2Nzg=
APP_DEBUG=true
APP_URL=http://127.0.0.1:8000

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_course
DB_USERNAME=root
DB_PASSWORD=

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

สัปดาห์ที่ 2 • การติดตั้ง & โครงสร้างโฟลเดอร์01-406-093-203 Laravel Course

การเชื่อมต่อฐานข้อมูลใน Laravel 12

Laravel 12 มีค่าเริ่มต้นฐานข้อมูลเป็น SQLite เพื่อให้เริ่มต้นเขียนโค้ดได้สะดวกรวดเร็ว
หากต้องการเปลี่ยนเป็น MySQL/MariaDB สามารถแก้ไขได้ง่ายผ่านไฟล์ .env
กำหนดชนิดการเชื่อมต่อ พอร์ตเซิร์ฟเวอร์ ชื่อฐานข้อมูล ชื่อผู้ใช้ และรหัสผ่าน
ใช้คำสั่งไมเกรตตารางเพื่อเช็กการเชื่อมต่อฐานข้อมูลว่าเชื่อมได้ถูกต้องหรือไม่

Database Connection Settings in Laravel

สร้าง DB

สร้างฐานข้อมูลเปล่าใน DBMS เช่น phpMyAdmin

ตั้งค่า .env

แก้ไข DB_DATABASE, DB_USERNAME, DB_PASSWORD

รัน Artisan

รัน php artisan migrate เพื่อเชื่อมต่อ

สำเร็จ

ตารางระบบถูกสร้างลงฐานข้อมูลเสร็จสมบูรณ์

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

สัปดาห์ที่ 2 • การติดตั้ง & โครงสร้างโฟลเดอร์01-406-093-203 Laravel Course

ทำความรู้จักกับ Artisan CLI

Artisan คือเครื่องมือ Command Line Interface ที่มาพร้อมกับ Laravel
ช่วยสร้างไฟล์ต่าง ๆ เช่น Controller, Model, Migration, Seeder เพื่อประหยัดเวลา
ใช้จัดการสถานะระบบ เช่น ล้างแคช, ดูสิทธิ์เส้นทาง, รันระบบไมเกรตข้อมูล
ตรวจสอบรายชื่อคำสั่งทั้งหมดได้ด้วยคำสั่ง php artisan list

code-example.bash

// แสดงคำสั่ง Artisan ทั้งหมดที่มีในระบบ
php artisan list

// สร้าง Controller ใหม่
php artisan make:controller StudentController

// สร้าง Model ใหม่พร้อมพ่วงสร้างไฟล์ Migration
php artisan make:model Subject -m

// รันโครงสร้างตารางเข้าสู่ฐานข้อมูล
php artisan migrate

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

สัปดาห์ที่ 2 • การติดตั้ง & โครงสร้างโฟลเดอร์01-406-093-203 Laravel Course

สรุปบทเรียน & เตรียมตัวสำหรับ Workshop

เข้าใจเครื่องมือและการติดตั้งระบบ Laravel 12 เรียบร้อย
รู้ทิศทางตำแหน่งของโฟลเดอร์หลักในการเขียนซอร์สโค้ดและทรัพยากรเว็บ
สามารถกำหนดค่าสภาพแวดล้อม และเชื่อมโยงฐานข้อมูลผ่าน .env ได้ถูกต้อง
ในลำดับถัดไป นักศึกษาจะได้ร่วมฝึกปฏิบัติสร้างฐานข้อมูลและตั้งค่า .env ในหน้าถัดไป

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

สัปดาห์ที่ 2 • การติดตั้ง & โครงสร้างโฟลเดอร์01-406-093-203 Laravel Course

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

A. config.json

B. .env

C. composer.json

D. package.json

A. บันทึกลงไฟล์ .env แล้วอัปโหลดขึ้น GitHub โดยตรง

B. ใส่ไว้ใน .env และเพิ่มไฟล์ .env ลงในรายการไฟล์ที่ข้ามอย่าง .gitignore

C. คัดลอกไฟล์เก็บไว้เป็นความลับนอกโฟลเดอร์

D. ลบข้อมูลความลับก่อนจะอัปโหลดโค้ด

3. โฟลเดอร์ใดในระบบของ Laravel ที่ทำหน้าที่เก็บไฟล์โค้ดของ Model เป็นหลัก?

A. app/Models/

B. database/migrations/

C. routes/

D. resources/views/

A. public/

B. app/Http/Controllers/

C. resources/views/

D. storage/app/

A. routes/web.php

B. app/Http/Kernel.php

C. config/app.php

D. routes/api.php

A. storage/framework/

B. public/

C. app/Models/

D. resources/views/

7. ไฟล์ composer.json ในโปรเจกต์ Laravel มีบทบาทสำคัญอย่างไร?

A. เก็บรหัสผ่านเข้าหน้า Admin

B. บันทึกข้อมูลชื่อและชนิดไฟล์ในฐานข้อมูล

C. ใช้กำหนดไลบรารีและแพ็กเกจ PHP ที่โปรเจกต์นี้จำเป็นต้องใช้

D. เป็นสคริปต์ JavaScript สำหรับจัดการปุ่มกด

A. database/migrations/

B. app/Models/

C. config/database.php

D. storage/app/public/

9. โฟลเดอร์ config/ ในโครงสร้างโปรเจกต์ Laravel มีไว้สำหรับอะไร?

A. เก็บภาพโลโก้และไฟล์ CSS

B. จัดเก็บไฟล์ควบคุมการเชื่อมต่อฐานข้อมูล เมล และความปลอดภัยต่าง ๆ

C. เก็บข้อมูลการเช็คชื่อเข้าเรียนของนศ.

D. เป็นจุดรันสคริปต์อัตโนมัติ

10. เหตุใด Laravel จึงแยกโฟลเดอร์ storage/ ออกมาต่างหาก?

B. เพื่อไม่ต้องการให้ระบบอ่านไฟล์ได้

C. เพื่อจัดเก็บหน้ากากดีไซน์เว็บไซต์

D. เป็นโฟลเดอร์ชั่วคราวที่จะลบข้อมูลทิ้งอัตโนมัติ

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

สัปดาห์ที่ 2 • การติดตั้ง & โครงสร้างโฟลเดอร์01-406-093-203 Laravel Course

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

ไฟล์ประเภทใดที่เก็บข้อมูลสำคัญ เช่น ข้อมูลการเชื่อมต่อฐานข้อมูล และความลับต่างๆ ที่ไม่ควรนำเข้าสู่ระบบ Git?

A. composer.json

B. config/database.php

C. .env

D. routes/web.php

คำอธิบาย: ไฟล์ .env ถูกใช้เพื่อเก็บข้อมูลสำคัญเฉพาะของสภาพแวดล้อม และเป็นข้อปฏิบัติสำคัญที่จะไม่เอาไฟล์นี้ขึ้นระบบ Git เพื่อความปลอดภัย

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

สัปดาห์ที่ 2 • การติดตั้ง & โครงสร้างโฟลเดอร์01-406-093-203 Laravel Course

Workshop 2: การสร้างโปรเจกต์และการตั้งค่า .env

1สร้างฐานข้อมูลเปล่าชื่อ laravel_course ใน PHPMyAdmin
2เปิดไฟล์ .env ในโฟลเดอร์โปรเจกต์ Laravel
3แก้ไขค่า DB_DATABASE=laravel_course และใส่รหัสผ่านให้ถูกต้อง
4รันคำสั่ง php artisan migrate เพื่อตรวจสอบการเชื่อมต่อฐานข้อมูล

command_prompt.sh

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_course
DB_USERNAME=root
DB_PASSWORD=

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

สัปดาห์ที่ 2 • การติดตั้ง & โครงสร้างโฟลเดอร์01-406-093-203 Laravel Course

ใบงานที่ 2: วิเคราะห์โครงสร้างโฟลเดอร์ของ Laravel

ให้นักศึกษาสรุปความสำคัญของโฟลเดอร์หลัก 5 โฟลเดอร์ ได้แก่ app/, config/, database/, routes/ และ resources/ ลงในฟอร์มสรุปงานส่งอาจารย์

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

ความเข้าใจหน้าที่แต่ละโฟลเดอร์50%
ตัวอย่างไฟล์สัญลักษณ์ในแต่ละโฟลเดอร์30%
ส่งงานตรงเวลา20%

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