เขียนเว็บ เดอะ ซีรีส์ ตอนพิเศษ: การติดตั้งและใช้งาน XAMPP บนระบบปฏิบัติการ Windows

การพัฒนาเว็บไซต์จะต้องทำการออกแบบส่วนหน้าแสดงผลของเว็บไซต์สำหรับเครื่องผู้ใช้ (Client) หรือส่วน Front-end และต้องพัฒนาส่วนของการเชื่อมต่อกับเครื่องแม่ข่าย (Server) หรือส่วน Back-end เพื่อให้เว็บไซต์ทำงานได้อย่างสมบูรณ์ แต่การเขียนโปรแกรมลงในเครื่อง Server โดยตรงเราจะต้องมีเครื่อง Server อย่างน้อย 1 เครื่อง เพื่อใช้ในการพัฒนาเว็บไซต์ซึ่งต้องใช้เงินลงทุนในการซื้อและซ่อมแซมเครื่อง Server ตลอดเวลา

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

XAMPP เป็นซอฟต์แวร์หนึ่งที่ช่วยในการจำลองให้เครื่องคอมพิวเตอร์ของเราเป็นเครื่อง Server เพื่อใช้สำหรับการพัฒนาเว็บไซต์

รูปสัญลักษณ์ XAMPP (จาก Wikipedia)

ใน XAMPP จะมีซอฟต์แวร์ที่ช่วยในการพัฒนาเว็บไซต์จำนวนมาก โดยอาจแบ่งซอฟต์แวร์ตามตัวอักษรของ XAMPP ออกมาทีละตัว ดังนี้

• X คือ Cross-platform หมายความว่าซอฟต์แวร์นี้สามารถใช้งานได้กับทุกระบบปฏิบัติการที่รองรับ ไม่ว่าจะเป็น Windows Mac หรือ Linux
• A คือ Apache HTTP Server (หรือ Apache) เป็น Web server ที่ช่วยให้เว็บไซต์สามารถทำงานบนเครื่อง Server ได้

รูปสัญลักษณ์ Apache HTTP Server (จาก Wikipedia)

• M คือ MySQL เป็นระบบฐานข้อมูลสำหรับการจัดเก็บข้อมูลต่าง ๆ ลงในเครื่อง Server (ปัจจุบัน XAMPP ใช้ฐานข้อมูล MariaDB)

รูปสัญลักษณ์ MySQL (จาก Wikipedia)

รูปสัญลักษณ์ MariaDB (จาก Wikipedia)

• P คือ PHP เป็นภาษาที่ใช้ในการพัฒนาเว็บไซต์ โดยจะใช้ภาษานี้เพื่อเชื่อมต่อระหว่างฝั่ง Client ฝั่ง Server และฐานข้อมูล

รูปสัญลักษณ์ภาษา PHP (จาก Wikipedia)

• P คือ Perl เป็นอีก 1 ภาษาที่สามารถใช้พัฒนาเว็บไซต์ได้ แต่จะไม่มีการอธิบายในเขียนเว็บ เดอะ ซีรีส์

รูปสัญลักษณ์ภาษา Perl (จาก Wikipedia)

การติดตั้ง XAMPP สำหรับ Windows

• ดาวน์โหลด XAMPP โดยเลือก XAMPP for Windows แล้วเลือกเวอร์ชันที่ต้องการ (เวอร์ชันล่าสุด คือ 8.0.0)

ดาวน์โหลด XAMPP สำหรับระบบ Windows

• เมื่อดาวน์โหลดเสร็จแล้วให้ double-click ที่ไฟล์ติดตั้งโดยจะขึ้นคำเตือนสรุปได้ว่า “ถ้ายังไม่ได้ปิดการใช้งาน User Account Control (UAC) ไม่ควรติดตั้ง XAMPP ใน C:\Program Files”

ไฟล์ติดตั้ง XAMPP

การแจ้งเตือนการใช้งาน User Account Control (UAC)

• คลิก “Next”

หน้าแรกของการติดตั้ง XAMPP

• ในส่วนของ Select Components เป็นการเลือกส่วนประกอบต่าง ๆ เพื่อใช้ในการติดตั้ง XAMPP ให้ทำเครื่องหมายถูกในช่อง Apache MySQL PHP และ phpMyAdmin ตามภาพด้านล่าง หลังจากนั้นให้คลิก “Next”

ทำเครื่องหมายถูกในช่อง Apache MySQL PHP และ phpMyAdmin เพื่อใช้ติดตั้ง XAMPP

XAMPP จะบังคับให้ทำเครื่องหมายถูกในช่อง Apache และ PHP ถ้าต้องการใช้งานฐานข้อมูล ให้ทำเครื่องหมายถูกในช่อง MySQL และในช่อง phpMyAdmin ซึ่ง phpMyAdmin จะเป็นตัวช่วยในการจัดการระบบฐานข้อมูลโดยมีหน้าตาที่ใช้งานง่าย

• เลือกที่อยู่ของเครื่องสำหรับการติดตั้ง XAMPP (XAMPP แนะนำให้ติดตั้งที่ C:\xampp) จากนั้นคลิก “Next”

เลือกที่อยู่สำหรับการติดตั้ง XAMPP

• เลือก English เป็นการให้เมนูการใช้งานของ XAMPP เป็นภาษาอังกฤษ จากนั้นคลิก “Next”

เลือกภาษาสำหรับการใช้งาน XAMPP

• ในส่วนของ Bitnami for XAMPP ให้นำเครื่องหมายถูกออกจากช่อง “Learn more about Bitnami for XAMPP” แล้วคลิก “Next” (Bitnami เป็น Software package ที่สามารถช่วยในการติดตั้งซอฟต์แวร์ต่าง ๆ สำหรับการพัฒนาระบบ เช่น WordPress, Joomla, Magento เป็นต้น)

รายละเอียดเบื้องต้นของ Bitnami for XAMPP

รูปสัญลักษณ์ซอฟต์แวร์ Bitnami (จาก Wikipedia)

• คลิก “Next” เพื่อทำการติดตั้ง

พร้อมสำหรับทำการติดตั้ง

• ถ้ามีการแจ้งเตือนเกี่ยวกับ Windows Defender Firewall ว่าต้องการให้ Firewall อนุญาตให้ Apache สามารถติดต่อการเครือข่ายประเภทใดได้บ้าง โดยระบบจะทำเครื่องหมายถูกที่ช่อง “Public networks” ไว้ให้แล้ว หลังจากนั้นให้คลิก “Allow access”

Windows Defender Firewall เป็นซอฟต์แวร์ป้องกันความปลอดภัยทางเครือข่ายของสำหรับระบบปฏิบัติการ Windows

Public networks เป็นการเชื่อมต่อกับเครือข่ายตามสถานที่ต่าง ๆ ซึ่งจะช่วยให้เราสามารถพัฒนาเว็บไซต์ได้จากทุกที่ แต่จะมีความปลอดภัยทางเครือข่ายน้อยมากหรือไม่มีเลย

การแจ้งเตือน Windows Defender Firewall สำหรับ Apache

• ระบบจะทำการติดตั้ง XAMPP ให้รอจนติดตั้งเสร็จ

• เมื่อติดตั้ง XAMPP เสร็จเรียบร้อยแล้วให้คลิก “Finish” ถ้าต้องการให้ XAMPP ทำการเปิดขึ้นเองหลังจากติดตั้งให้ทำเครื่องหมายถูกที่ช่อง “Do you want to start the Control Panel now?”

ติดตั้ง XAMPP เสร็จสมบูรณ์

การใช้งาน XAMPP (บน Windows 10)

• เปิดโปรแกรม XAMPP โดยคลิกที่ Start Menu -> XAMPP -> XAMPP Control Panel

คลิกที่ Start Menu -> XAMPP -> XAMPP Control Panel

หน้าแรกของ XAMPP Control Panel

• ใน Apache ให้คลิก “Start” เพื่อให้เครื่องคอมพิวเตอร์ของเราเป็นเครื่อง Server เมื่อคลิกแล้วตรงคำว่า “Apache” จะมีพื้นหลังเป็นสีเขียว หมายความว่าเครื่องคอมพิวเตอร์ของเราเป็นเครื่อง Server เรียบร้อยแล้ว

เปิด Apache Server บน XAMPP

• ทำการเปิดเบราวเซอร์ แล้วพิมพ์ลงในช่องกรอก URL ว่า “localhost” หรือ “127.0.0.1” เบราวเซอร์จะแสดงเป็นหน้าแรกของ XAMPP

พิมพ์ localhost จะแสดงหน้าแรกของ XAMPP บนเบราวเซอร์

• ถ้าต้องการใช้ฐานข้อมูล MySQL ให้คลิก “Start” ใน MySQL เพื่อเปิดการใช้งาน เมื่อคลิกแล้วตรงคำว่า “MySQL” จะมีพื้นหลังเป็นสีเขียว หมายความว่า MySQL เปิดการใช้งานเรียบร้อยแล้ว

เปิด MySQL บน XAMPP

• ถ้ามีการแจ้งเตือนเกี่ยวกับ Windows Defender Firewall ว่าต้องการให้ Firewall อนุญาตให้ MySQL สามารถติดต่อการเครือข่ายประเภทใดได้บ้าง โดยระบบจะทำเครื่องหมายถูกที่ช่อง “Public networks” ไว้ให้แล้ว หลังจากนั้นให้คลิก “Allow access”

การแจ้งเตือน Windows Defender Firewall สำหรับ MySQL

• ทำการเปิดเบราวเซอร์ แล้วพิมพ์ลงในช่องกรอก URL ว่า “localhost/phpmyadmin” เบราวเซอร์จะแสดงเป็นหน้าแรกของ phpMyAdmin ซึ่งเป็นระบบที่จะช่วยในการจัดการฐานข้อมูล MySQL/MariaDB

พิมพ์ localhost/phpmyadmin จะแสดงหน้าแรกของ phpMyAdmin บนเบราวเซอร์

ต้องเปิดทั้ง Apache และ MySQL ใน XAMPP Control Panel จึงจะสามารถใช้งาน phpMyAdmin ได้

• ถ้าต้องการปิดการใช้งาน Apache และ MySQL ให้คลิก “Stop” เพื่อปิดการใช้งาน

ปิดการใช้งาน Apache และ MySQL โดยการคลิก “Stop” ใน XAMPP Control Panel