บทเรียนการสร้างเว็บไซต์พื้นฐาน

โครงสร้างหลักสูตร: การออกแบบและพัฒนาเว็บไซต์ด้วย HTML, CSS, JavaScript และ PHP

หลักสูตรนี้ออกแบบมาเพื่อให้ผู้เรียนสามารถสร้างเว็บไซต์แบบ Full-Stack ได้จริง ตั้งแต่หน้าบ้าน (Frontend) ไปจนถึงหลังบ้าน (Backend) และการจัดการฐานข้อมูล โดยเน้นการเรียนรู้แบบลงมือปฏิบัติ (Hands-on) และมีตัวอย่างโค้ดที่ใช้งานได้จริงในทุกขั้นตอน

ส่วนที่ 1: พื้นฐานการสร้างเว็บไซต์ (HTML)

บทที่ หัวข้อ คำอธิบายโดยย่อ
1.1 ทำความรู้จักกับเว็บ เว็บไซต์ทำงานอย่างไร, Client-Server Model, เครื่องมือที่ต้องใช้ (Text Editor, Browser)
1.2 โครงสร้างพื้นฐาน HTML Tag, Element, Attribute, โครงสร้างเอกสาร HTML5 (<!DOCTYPE html>, <html>, <head>, <body>)
1.3 การจัดการข้อความและหัวเรื่อง <h1> ถึง <h6>, <p>, <br>, <strong>, <em>
1.4 การสร้างรายการและลิงก์ รายการแบบมีลำดับ (<ol>), ไม่มีลำดับ (<ul>), ลิงก์ (<a>) และการจัดการเส้นทาง (Path)
1.5 การแทรกรูปภาพและสื่อ รูปภาพ (<img>), วิดีโอ (<video>), เสียง (<audio>) และการจัดการ Responsive Image
1.6 การสร้างตาราง <table>, <tr>, <td>, <th>, การรวมเซลล์ (rowspan, colspan)
1.7 การสร้างฟอร์มรับข้อมูล form, input ประเภทต่างๆ (text, password, checkbox, radio), textarea, button
1.8 โครงสร้างหน้าเว็บด้วย Semantic HTML header, nav, main, section, article, aside, footer

ส่วนที่ 2: การออกแบบและจัดรูปแบบ (CSS)

บทที่ หัวข้อ คำอธิบายโดยย่อ
2.1 พื้นฐาน CSS วิธีการเรียกใช้ CSS (Inline, Internal, External), Syntax, Selector พื้นฐาน
2.2 Model กล่อง (Box Model) Content, Padding, Border, Margin และการคำนวณขนาด
2.3 การจัดรูปแบบข้อความและสี Font Family, Size, Color, Background Color, การใช้หน่วยวัด (px, em, rem, %)
2.4 การจัดวางองค์ประกอบด้วย Flexbox แนวคิด Flex Container และ Flex Item, การจัดเรียงและจัดตำแหน่ง
2.5 การจัดวางองค์ประกอบด้วย Grid แนวคิด Grid Container และ Grid Item, การสร้าง Layout แบบ 2 มิติ
2.6 การออกแบบเว็บไซต์ที่ตอบสนอง (Responsive Web Design) Media Queries, Mobile-First Approach, Viewport Meta Tag
2.7 การเปลี่ยนผ่านและแอนิเมชัน (Transitions & Animations) การสร้างเอฟเฟกต์การเคลื่อนไหวอย่างง่ายด้วย CSS

ส่วนที่ 3: การเพิ่มการโต้ตอบ (JavaScript)

บทที่ หัวข้อ คำอธิบายโดยย่อ
3.1 พื้นฐาน JavaScript การเรียกใช้ JS, ตัวแปร, ชนิดข้อมูล, Operator
3.2 โครงสร้างควบคุม เงื่อนไข (if/else, switch), ลูป (for, while)
3.3 ฟังก์ชันและขอบเขต (Scope) การสร้างและเรียกใช้ฟังก์ชัน, Global vs Local Scope
3.4 การจัดการ DOM (Document Object Model) การเข้าถึง, สร้าง, แก้ไข และลบ Element ในหน้าเว็บ
3.5 การจัดการเหตุการณ์ (Event Handling) การตอบสนองต่อการกระทำของผู้ใช้ (Click, Submit, Keypress)
3.6 การตรวจสอบความถูกต้องของฟอร์ม (Form Validation) การใช้ JS เพื่อตรวจสอบข้อมูลก่อนส่งไปยังเซิร์ฟเวอร์
3.7 การสื่อสารกับเซิร์ฟเวอร์ด้วย AJAX/Fetch API แนวคิด Asynchronous, การดึงข้อมูลจาก API ภายนอก

ส่วนที่ 4: การทำงานกับเซิร์ฟเวอร์และฐานข้อมูล (PHP & MySQL)

บทที่ หัวข้อ คำอธิบายโดยย่อ
4.1 ทำความรู้จักกับ Backend PHP คืออะไร, การติดตั้งสภาพแวดล้อม (XAMPP/WAMP/MAMP), Server-Side Scripting
4.2 พื้นฐานภาษา PHP Syntax, ตัวแปร, ชนิดข้อมูล, Array, โครงสร้างควบคุม
4.3 การทำงานกับฟอร์มด้วย PHP การรับข้อมูลจากฟอร์ม ($_POST, $_GET), การจัดการ Session และ Cookie
4.4 พื้นฐานฐานข้อมูล MySQL แนวคิดฐานข้อมูลเชิงสัมพันธ์, SQL เบื้องต้น (SELECT, INSERT, UPDATE, DELETE)
4.5 การเชื่อมต่อ PHP กับ MySQL ด้วย PDO การใช้ PDO (PHP Data Objects), Prepared Statements, การจัดการ Connection อย่างปลอดภัย
4.6 การสร้างระบบ CRUD (Create, Read, Update, Delete) การสร้างหน้าเว็บเพื่อจัดการข้อมูลในฐานข้อมูลอย่างครบวงจร ด้วย PDO
4.7 การรักษาความปลอดภัยฐานข้อมูล การป้องกัน SQL Injection ด้วย Prepared Statements, การเข้ารหัสรหัสผ่าน, การจำกัดสิทธิ์

ส่วนที่ 5: Responsive Web Design (RWD)

บทที่ หัวข้อ คำอธิบายโดยย่อ
5.1 แนวคิดหลักของ RWD Mobile-First Design, Fluid Layouts, Flexible Images
5.2 Media Queries การใช้ Media Queries เพื่อปรับ Layout ตามขนาดหน้าจอ
5.3 Responsive Typography การจัดการขนาดตัวอักษรให้เหมาะสมกับทุกอุปกรณ์
5.4 Responsive Navigation การสร้างเมนูที่ทำงานได้ดีบนมือถือและเดสก์ท็อป

ส่วนที่ 6: โปรเจกต์จริง: ระบบจัดการบทความอย่างง่าย (Mini CMS)

บทที่ หัวข้อ คำอธิบายโดยย่อ
6.1 การวางแผนโปรเจกต์ การออกแบบฐานข้อมูล, การออกแบบ User Interface (UI)
6.2 การสร้างหน้าแสดงผล (Read) การดึงข้อมูลบทความทั้งหมดมาแสดงบนหน้าแรกด้วย PDO
6.3 การสร้างหน้าเพิ่มบทความ (Create) การสร้างฟอร์มและโค้ด PHP สำหรับบันทึกข้อมูลใหม่อย่างปลอดภัย
6.4 การสร้างหน้าแก้ไขและลบบทความ (Update & Delete) การจัดการ URL Parameter, การอัปเดตและลบข้อมูลด้วย CSRF Protection
6.5 การปรับปรุง UI/UX ด้วย JavaScript การเพิ่มลูกเล่น, การยืนยันการลบ, การแจ้งเตือนความสำเร็จ
6.6 การเพิ่มความปลอดภัยให้โปรเจกต์ การใช้ CSRF Token, XSS Protection, Input Validation

ส่วนที่ 7: การรักษาความปลอดภัยเว็บไซต์

บทที่ หัวข้อ คำอธิบายโดยย่อ
7.1 ภัยคุกคามทั่วไป (OWASP Top 10) ช่องโหว่ด้านความปลอดภัยที่พบบ่อยที่สุด
7.2 SQL Injection การโจมตีฐานข้อมูล, วิธีป้องกันด้วย Prepared Statements
7.3 XSS (Cross-Site Scripting) การโจมตีด้วย JavaScript, วิธีป้องกันด้วย htmlspecialchars()
7.4 CSRF (Cross-Site Request Forgery) การโจมตีด้วยการปลอมแปลงคำขอ, วิธีป้องกันด้วย CSRF Token
7.5 Authentication และ Authorization การยืนยันตัวตน, การควบคุมสิทธิ์, Password Hashing, Rate Limiting
7.6 Session และ Cookie Security การตั้งค่า Session และ Cookie ให้ปลอดภัย
7.7 File Upload Security การตรวจสอบไฟล์ที่อัปโหลด, การป้องกัน Malware
7.8 HTTPS และ Security Headers การใช้ SSL/TLS, การตั้งค่า Security Headers
7.9 Error Handling และ Logging การจัดการ Error อย่างปลอดภัย, การบันทึก Security Log
7.10 Security Checklist รายการตรวจสอบความปลอดภัยก่อน Deploy

หมายเหตุ: บทเรียนแต่ละบทจะเน้นการอธิบายแนวคิด, มีตัวอย่างโค้ดที่ชัดเจน, และมีแบบฝึกหัดท้ายบทเพื่อทบทวนความเข้าใจ

เรียนจบบทนี้แล้ว?

ลองทำแบบฝึกหัดเพื่อทดสอบความเข้าใจ หรือไปบทถัดไปเลย!

กลับหน้าแรก