บทความนี้เป็นส่วนหนึ่งของซีรีส์ Full-Stack PHP 8 + Bootstrap 5 + MySQL — สร้างเว็บไซต์แบบ Full Stack ตั้งแต่พื้นฐานจนใช้งานได้จริง พร้อมสร้างและเผยแพร่เว็บไซต์ Portfolio ของตนเอง (เรียบเรียงจากคู่มืออบรมของ Wutthiphon Tassana — Wirabyte CO., LTD.) — ตอนที่ 3/10
ติดตั้งโปรแกรม XAMPP
- เข้าเว็บไซต์
https://www.apachefriends.org/download.html
- คลิก Download XAMPP บนระบบปฏิบัติการของคุณ (ในที่นี้ใช้เป็น XAMPP 8.2.12 For Windows)
- เปิดตัวติดตั้งโปรแกรม
- ยอมรับให้โปรแกรมทำงานในโหมด Administrator เพื่อติดตั้งโปรแกรม
- โปรแกรมจะแจ้งเตือนว่าให้คุณปิด User Account Control (UAC) บนเครื่องซึ่งเราสามารถตอบ OK โดยไม่ต้องปิดตามที่โปรแกรมแนะนำ
- โปรแกรมจะขึ้นหน้ายินดีต้อนรับคลิก Next >
- เลือกตัวติดตั้งโดยเลือกให้เหลือตามภาพ ในที่นี้จะใช้เฉพาะ Apache MySQL phpMyAdmin
จากนั้นคลิก Next >
- ตัวติดตั้งจะให้เลือกตำแหน่ง Directory ที่จะทำการติดตั้ง ใช้ค่า Default ได้เลย หรืออาจจะเปลี่ยนตามที่ต้องการ แล้วคลิก Next > (ค่า Default จะอยู่ที่ C:\xampp)
- ตัวติดตั้งจะให้เลือกภาษา ให้เลือก English แล้วคลิก Next > และ Next > อีกครั้งเพื่อติดตั้ง
- ตัวติดตั้งจะแตกไฟล์และติดตั้งซึ่งอาจจะใช้เวลาประมาณ 3-5 นาที
- ระหว่างการติดตั้งอาจจะมีการขออนุญาต Firewall ของเครื่องให้เลือกทั้ง Private และ Public แล้ว Allow Access
- เมื่อตัวติดตั้งทำงานเสร็จสิ้นจะถามว่าต้องการเปิดหน้า Control Panel เลยไหมให้เอาออกแล้วคลิก Finish ไปก่อน
ติดตั้งโปรแกรม Visual Studio Code (VS Code) หรือ Editor ตัวอื่น ๆ
- เปิดตัวติดตั้งโปรแกรม
- ตัวติดตั้งจะแสดงเงื่อนไขและยอมรับข้อตกลงให้เลือก I accept the agreement แล้วคลิก Next >
- ตัวติดตั้งจะให้เลือกตำแหน่ง Directory ที่จะทำการติดตั้ง ใช้ค่า Default คลิก Next > และชื่อของโปรแกรมที่จะถูกสร้างใน Start menu ให้ใช้ค่าเดิม คลิก Next > ได้เลย
- ตัวติดตั้งจะถามการติดตั้งเพิ่มเติมให้ติ๊กถูกที่ Create a Desktop icon และ Add “Open with Code” action to … ทั้ง 2 ตัวเลือกเพื่อง่ายต่อการใช้งาน จากนั้นคลิก Next และ Install
- ตัวติดตั้งจะแตกไฟล์และติดตั้งซึ่งอาจจะใช้เวลาประมาณ 2-3 นาที
- เมื่อตัวติดตั้งทำงานเสร็จสิ้นจะถามว่าต้องการเปิดโปรแกรมเลยไหมให้เอาออกแล้วคลิก Finish ไปก่อน
- Extension ที่แนะนำให้ติดตั้งควบคู่
เปิดโปรแกรม Visual Studio Code จากนั้นคลิกที่ Aside เมนู Extension
จากนั้นค้นหาและติดตั้ง Extension ต่อไปนี้ (ตัวหนาจำเป็นต้องติดตั้ง)
- PHP Extension Pack
- PHP Intelephense
- Prettier – Code formatter
- (เสริม) Material Icon Theme – แสดง Icon หน้าชื่อไฟล์ตามประเภทไฟล์
- (เสริม) One Dark Pro – Theme ของ Visual Code ให้ดูสวยงามน่าใช้ยิ่งขึ้น
คลิก Install เพื่อติดตั้ง
ติดตั้งโปรแกรม FileZilla
- เลือก Download Platform ให้ตรงกับระบบปฏิบัติการที่ใช้อยู่ (ในที่นี้ใช้เป็น Windows)
- เปิดตัวติดตั้งโปรแกรม
หาก Windows ขึ้นแจ้งเตือนว่าเชื่อถือ App ไม่ได้ให้คลิก More info แล้ว คลิก Run anyway
- ยอมรับให้โปรแกรมทำงานในโหมด Administrator เพื่อติดตั้งโปรแกรม
- ตัวติดตั้งจะแสดงเงื่อนไขและยอมรับข้อตกลงให้คลิก I Agree
- โปรแกรมจะโหลดข้อมูลสักครู่ และแสดงโปรแกรมที่เป็น Sponsor ให้คลิก Decline แล้ว Next
- ตัวติดตั้งจะถามว่าต้องการติดตั้งให้ผู้ใช้ใดบ้าง
- เลือก Anyone who uses the computer (all users) ถ้าต้องการติดตั้งให้ทุกคน
- เลือก Only for me (ชื่อผู้ใช้) ถ้าใช้งานแค่คนเดียว
แล้วคลิก Next >
- ตัวติดตั้งจะถาม Component ที่ต้องการติดตั้งให้เพิ่ม Desktop Icon เพื่อให้สะดวกต่อการเรียกใช้งาน
- ตัวติดตั้งจะให้เลือกตำแหน่ง Directory ที่จะทำการติดตั้ง ใช้ค่า Default คลิก Next > และชื่อของโปรแกรมที่จะถูกสร้างใน Start menu ให้ใช้ค่าเดิม คลิก Install ได้เลย
- ตัวติดตั้งจะทำการติดตั้ง ใช้เวลาประมาณ 10 วินาที จากนั้นจะแสดงหน้าต่างสำเร็จและถามว่าต้องการเปิดโปรแกรมเลยไหมให้เอาออก ยังไม่ต้องเปิด แล้วคลิก Finish
เปิดใช้งาน Service PHP MySQL ผ่าน XAMPP Control Panel
- ค้นหาโปรแกรม XAMPP จาก Start Menu
- คลิกขวาที่ XAMPP Control Panel แล้วเลือก Run as administrator
หมายเหตุ: ที่ต้อง Run as administrator เนื่องจากโปรแกรมจะมีการเขียนไฟล์ลงในระบบ เพื่อบันทึกค่าสุดท้ายตอนปิดโปรแกรม หากไม่อนุญาตไว้อาจจะ Error และโปรแกรมค้างได้
- เมื่อหน้าต่าง XAMPP Control Panel แสดงผลขึ้นมาให้คลิก Start ที่ Apache กับ MySQL เพื่อทดสอบการทำงาน
เมื่อ Start ครั้งแรกอาจจะมีการถามการอนุญาต Firewall ให้เลือกทั้ง Private และ Public แล้วคลิก Allow Access
หาก Service ทำงานได้ปกติ โปรแกรมจะแสดงสีเขียวที่พื้นหลังชื่อ Service นั้น ๆ ซึ่งต้อง Start ให้ได้ทั้ง 2 ตัว
