บทความนี้เป็นส่วนหนึ่งของซีรีส์ Full-Stack PHP 8 + Bootstrap 5 + MySQL — สร้างเว็บไซต์แบบ Full Stack ตั้งแต่พื้นฐานจนใช้งานได้จริง พร้อมสร้างและเผยแพร่เว็บไซต์ Portfolio ของตนเอง (เรียบเรียงจากคู่มืออบรมของ Wutthiphon Tassana — Wirabyte CO., LTD.) — ตอนที่ 2/10
ก่อนจะลงมือเขียนเว็บ เราควรเข้าใจก่อนว่าเมื่อเปิดเว็บไซต์หนึ่ง เบื้องหลังเกิดอะไรขึ้นบ้าง การทำงานของเว็บตั้งอยู่บนหลักการที่เรียกว่า Client–Server ซึ่งเป็นการทำงานร่วมกันระหว่าง “ผู้ขอใช้บริการ” และ “ผู้ให้บริการ”
Client และ Server คืออะไร
Client (ผู้ขอใช้บริการ): โปรแกรมที่ผู้ใช้ใช้เปิดเว็บไซต์ ทำหน้าที่ส่งคำขอ (Request) ไปยังเซิร์ฟเวอร์ และแสดงผลลัพธ์ที่ได้กลับมา โปรแกรมฝั่ง Client ที่เราใช้กันก็คือเว็บเบราว์เซอร์ (Web Browser) เช่น Google Chrome, Mozilla Firefox, Microsoft Edge และ Safari
Server (ผู้ให้บริการ): เครื่องคอมพิวเตอร์ที่จัดเก็บเว็บไซต์เอาไว้ คอยรับคำขอ ประมวลผล และส่งผลลัพธ์ (Response) กลับไปยัง Client
เปรียบเทียบง่าย ๆ เหมือนร้านอาหาร ลูกค้า (Client) สั่งอาหาร ครัว (Server)
เป็นผู้ปรุงและเสิร์ฟกลับมาให้
แผนภาพสถาปัตยกรรม Client–Server แสดงการส่ง Request และรับ Response
โปรแกรมที่ทำหน้าที่ต่าง ๆ บนเซิร์ฟเวอร์
บนเซิร์ฟเวอร์มีโปรแกรมหลายตัวทำงานร่วมกัน โดยแต่ละตัวมีหน้าที่เฉพาะดังนี้
- เว็บเซิร์ฟเวอร์ (Web Server): รับคำขอจาก Client และส่งผลลัพธ์กลับไป เช่น Apache, Nginx, Microsoft IIS
- ภาษาฝั่งเซิร์ฟเวอร์ / ตัวประมวลผล (Server-side Language): ประมวลผลคำสั่งและสร้างหน้าเว็บแบบเปลี่ยนแปลงได้ เช่น PHP, Node.js, Python
- ระบบจัดการฐานข้อมูล (Database Server): จัดเก็บและค้นคืนข้อมูล เช่น MySQL, MariaDB, PostgreSQL
- เครื่องมือจัดการฐานข้อมูลผ่านหน้าเว็บ: phpMyAdmin ช่วยให้จัดการฐานข้อมูล MySQL ได้สะดวกผ่านหน้าเว็บ
โปรแกรมจำลองเซิร์ฟเวอร์บนเครื่องตนเอง: XAMPP รวม Apache, PHP, MySQL และ phpMyAdmin ไว้ในชุดเดียว ทำให้คอมพิวเตอร์ของเราทำหน้าที่เป็นทั้ง Client และ Server เพื่อทดสอบงานได้โดยไม่ต้องมีเซิร์ฟเวอร์จริง
โปรแกรมแต่ละตัวตามแต่ละหมวดหมู่
เว็บแบบ Static และ Dynamic
- เว็บแบบคงที่ (Static): เซิร์ฟเวอร์ส่งไฟล์ HTML, CSS และ JavaScript กลับไปตรง ๆ โดยไม่ประมวลผล เนื้อหาจึงเหมือนเดิมทุกครั้ง เหมาะกับหน้าเว็บที่ข้อมูลไม่เปลี่ยนแปลง
- เว็บแบบพลวัต (Dynamic): เซิร์ฟเวอร์ประมวลผลด้วยภาษาอย่าง PHP และอาจดึงข้อมูลจากฐานข้อมูลก่อน จึงสร้างหน้าเว็บที่เปลี่ยนแปลงได้ตามข้อมูลหรือตามผู้ใช้ เว็บไซต์ Portfolio ที่เราจะสร้างในซีรีส์นี้เป็นเว็บแบบพลวัต
ขั้นตอนการประมวลผลของหน้าเว็บ (PHP + MySQL)
เมื่อผู้ใช้เปิดหน้าเว็บที่เขียนด้วย PHP ลำดับการทำงานเบื้องหลังเป็นดังนี้
- ผู้ใช้พิมพ์ที่อยู่เว็บ (URL) หรือคลิกลิงก์บนเบราว์เซอร์ เบราว์เซอร์จึงส่งคำขอ (Request) ไปยังเซิร์ฟเวอร์
- เว็บเซิร์ฟเวอร์ (Apache) รับคำขอ แล้วส่งไฟล์ .php ต่อให้ตัวประมวลผล PHP
- PHP ทำงานตามคำสั่งในไฟล์ หากต้องใช้ข้อมูล จะส่งคำสั่ง (Query) ไปยังฐานข้อมูล MySQL
- MySQL ค้นหาข้อมูลแล้วส่งผลลัพธ์กลับมาให้ PHP
- PHP นำข้อมูลมาประกอบเป็นหน้า HTML ที่สมบูรณ์
- เว็บเซิร์ฟเวอร์ส่งหน้า HTML (Response) กลับไปยังเบราว์เซอร์
- เบราว์เซอร์แปลง HTML, CSS และ JavaScript ให้กลายเป็นหน้าเว็บที่ผู้ใช้มองเห็น (Render)
แผนภาพลำดับการประมวลผล: Browser → Apache → PHP → MySQL แล้วส่งผลกลับมาแสดงผล
localhost คืออะไร
ในซีรีส์นี้ เราจะใช้ XAMPP จำลองเซิร์ฟเวอร์บนเครื่องของเราเอง จึงเข้าถึงเว็บผ่านที่อยู่ http://localhost ซึ่งหมายถึง “เครื่องของเราเอง” โดยคอมพิวเตอร์เครื่องเดียวทำหน้าที่เป็นทั้ง Client (เบราว์เซอร์) และ Server (Apache, PHP, MySQL) ไปพร้อมกัน ทำให้ทดสอบเว็บได้ทันทีก่อนนำขึ้นเผยแพร่จริง (ในทางเครือข่าย IP Address ของ localhost มีค่า = 127.0.0.1)
