1. การสร้างเว็บไซต์ด้วย CMS
ู้เริ่มต้น
รับผ
ส ําห
โรงเรียนวัดโสธรวรารามวรวิหาร
จัดทําโดย นายณัฐพงษ์ บุพศิริ :
๑๓๔ ตําบลหน้าเมือง อําเภอเมือง จังหวัดฉะเชิงเทรา ๒๔๐๐๐ @katiblog
รักศักดิ์ศรี มีคุณธรรม นําวิชาการ สืบสารงานพระราชดําริ

2. Website ?
Website = เว็บเพจหลายๆหน้า ที่เชื่อโยงกันผ่านไฮเปอร์ลิงค์
WWW.YOURNAME.COM <<< เรียกว่า Domain name
ข้อมูลเว็บไซต์ จะถูกเก็บไว้บน Server
เครื่อง Server ต้องเปิดตลอดเวลา ไม่งั้นเว็บจะเข้าไม่ได้
Domain name และ Server ต้องมี
การเชื่อมต่อกัน เราจึงจะสามารถเข้า
เว็บไซต์ผ่าน Domain name นั้นได้
จัดทําโดย นายณัฐพงษ์ บุพศิริ :

3. CMS ?
CMS ย่อมาจาก Content management system
ระบบจัดการข้อมูล
ตัวอักษร
เสียง
รูปภาพ
ภาพเคลื่อนไหว
อื่นๆ
จัดทําโดย นายณัฐพงษ์ บุพศิริ :
@katiblog

4. CMS ?
CMS คือ ระบบสําหรับ “สร้าง” และ “บริหาร” เว็บไซต์
โดยที่เราไม่จําเป็นที่จะต้องมีความรู้เรื่องภาษา
คอมพิวเตอร์ เพราะระบบถูกสร้างไว้ให้เรียบร้อยแล้ว
เราเพียงแค่นําไป ติดตั้ง แล้ว ปรับแต่ง เท่านั้น
CMS จะต้องติดตั้งบนเครื่อง Server ที่รองรับ Mysql
CMS 1 ระบบ จะใช้ Mysql 1 ตัว
จัดทําโดย นายณัฐพงษ์ บุพศิริ :

5. CMS ?
CMS พัฒนามาจากภาษาคอมพิวเตอร์ต่างๆ บาง
ระบบอาจมีมากกว่าหนึ่งภาษา
HTML Javascript
ASP.NET Pythorn
PHP

6. CMS ?
CMS ต ัวไหนดี
ปัจจุบันมี cms มากมายถูกเขียนขึ้นมา และแบ่ง
ออกเป็นมากมายหลายหมวดหมู่ cms แต่ละตัว
อาจเหมาะสําหรับเว็บไซต์แต่ละประเภทที่แตกต่าง
กันออกไป จะเลือกใช้อันไหน ขึ้นอยู่กับผู้ใช้ว่า “จะ
ทําเว็บไซต์ประเภทไหน เพื่ออะไร” หรือว่าถนัดตัว
ไหน
จัดทําโดย นายณัฐพงษ์ บุพศิริ :

7. CMS ?
นิยมใช้สร้างเป็นเว็บไดอารี่ หรือ Blog
CMS สําหรับสร้างเว็บไซต์รูปแบบกระดานสนทนา
นิยมสร้างเว็บไซต์ที่เป็นแหล่งสังคมออนไลน์
เหมาะสําหรับสร้างเว็บไซตทั่วไป

8. CMS ?
ข้อดีของ CMS
• ผู้ใช้งานไม่จําเป็นที่จะต้องมีความรู้เรื่องภาษาคอมพิวเตอร์
• ประหยัดเวลา (ใช้เวลาในการสร้างโครงสร้างพื้นฐานไม่เกิน 30 นาที)
• มีระบบจัดการบริหารและระบบป้องกันเว็บไซต์มาในระดับที่ดี
• สามารถสร้าง หรือ ปรับแต่ง ได้ผ่านหน้าเว็บไซต์
• มีระบบเสริม ที่สามารถดาวโหลดมาติดตั้งเพิ่มเติมได้มากมาย ไม่ว่าจะเป็น
ระบบกระดานสนทนา การแสดงภาพแบบเคลื่อนไหว เกมส์
• สามารถเปลี่ยน รุปแบบ หน้าตามเว็บไซต์ได้ทุกวัน โดยเพียงการ เลือก
โหลด แล ติดตั้ง และคลิกใช้งาน
• ทุกอย่างที่กล่าวมา ฟรี!!
จัดทําโดย นายณัฐพงษ์ บุพศิริ :

9. CMS ?
ข้อเสียของ CMS
• ใช้เวลาในการศึกษาระบบที่มีขนาดใหญ่ แต่หากเกิดความเคยชิน ปัญหานี้จะหมดไป
• หากต้องกาบริหารเว็บให้เป็นอย่างที่ต้องการ ผู้ใช้งานจะต้องมีความรู้ภาษาคอมพิวเตอร์
พอสมควรในภาษานั้นๆ
จัดทําโดย นายณัฐพงษ์ บุพศิริ :

10. Appserv
โปรแกรมจําลองเครื่องคอมพิวเตอร์ทั่วไป
ให้เป็นเครื่อง Server หรือ Web Server
Open Source Soft ware
P HP
ผลิตโดย ภาณุพงศ์ ปัญญาดี
Ap a c
he
appservnet work.com My SQ L
phpMyadmin

11. ติดตั้ง Appserv
Download : www.appservnet work.com

12. ติดตั้ง Appserv
เมื่อโหลดโปรแกรมมาแล้ว
ก็ ดับเบิลคลิก เพื่อติดตั้ง
จัดทําโดย นายณัฐพงษ์ บุพศิริ :

13. ติดตั้ง Appserv
จัดทําโดย นายณัฐพงษ์ บุพศิริ :

14. ติดตั้ง Appserv
จัดทําโดย นายณัฐพงษ์ บุพศิริ :

15. ติดตั้ง Appserv
พอถึงขั้นตอนนี้คือ ระบบ
จะให้เราเลือกพื้นที่สําหรับ
เก็บโปรแกรมและโปรเจค
จัดทําโดย นายณัฐพงษ์ บุพศิริ :

16. ติดตั้ง Appserv
เลือกถูกทั้งหมด แล้ว คลิก ที่ Next> เพื่อ
ไปยังขั้นตอนต่อไปได้เลย
รายชื่อโปรแกรมที่
จําเป็นในการสร้าง
เว็บไซต์ด้วย CMS

17. ติดตั้ง Appserv
ชื่อ Server (อะไรก็ได้)
Email ของคุณ
จัดทําโดย นายณัฐพงษ์ บุพศิริ :

18. ติดตั้ง Appserv
เลือกรหัสผ่าน สําหรับเข้าใช้งาน
จัดการบริหารฐานข้อมูล
(จําเป็น อย่าเผลอลืมนะครับ)
จัดทําโดย นายณัฐพงษ์ บุพศิริ :
@katiblog

19. ติดตั้ง Appserv
ํา เ ร็จ
ส
เมื่อติดตั้ง
เรียบร้อยก็จะขึ้น
หน้าต่างแบบนี้

20. ติดตั้ง Appserv
โฟลเดอร์สําหรับเก็บ
ข้อมูลเว็บไซต์ของเรา ให้เก็บข้อมูล หรือ โปรเจค เว็บไซต์
ทั้งหมดไว้ใน โฟลเดอร์ “www”
หากเก็บไว้ที่อื่นจะไม่สามารถ
ทํางานได้

21. ติดตั้ง Appserv
ในการเรียกชมเว็บไซต ์ที่เราสร้างผ่าน
Appser v ให้ไปที่ Browser แล้วกรอก
Adress เป็น localhost/ชื่อโฟลเดอร์งาน
ของเรา
เช่นผมสร้างโฟลเดอร์ cms ใน www ผมก็ต้องเรียกชมผ่าน localhost/cms

22. Wordpress
เหมาะสําหรับในการสร้าง Blog
ทํางานกับฐานข้อมูล
P HP Open Source Soft ware
MyS
QL
พัฒนาโดย : แมตต์ มูลเลนเวก

23. การติดตั้ง Wordpress ในครั้งนี้จะเป็นการติดตั้งบน Server
จําลองที่สร้างขึ้นด้วยโปรแกรม Appserv ซึ่งจะสามารถรับชม
ได้เพียงแค่ท่านผู้เดียวเท่านั้น

24. ติดตั้ง Wordpress
Download : www.wordpress.org
่าย !!
่าใ ช้จ
ี ไม ่มีค
ลดฟร
น์โห
ดาว

25. ติดตั้ง Wordpress
re s s”
o rdp
เมื่อดาวน์โหลดเสร็จ ์ “w
เดอร
เรียบร้อยแล้ว โฟล
ายใน
ก็แตกไฟล์แล้ว ภ
จะได้โฟล์เดอร์
“wordpress”

26. ติดตั้ง Wordpress
ย้ายไฟล์ใน wordpress ทั้งหมดไปไว้ใน CAppServwww
*ในตัวอย่างย้ายไฟล์ไปไว้ใน CAppSer vwwwcms

27. ติดตั้ง Wordpress
*ในตัวอย่างย้ายไฟล์ไปไว้ใน CAppServwwwcms เวลาชมหน้าเว็บเลยต้อง
ชมผ่าน localhost/cms
คลิกสร้างไฟล์ตั้งค่า
หลังจากย้ายไฟล์เสร็จแล้วให้เปิดบราวเซอร์ ขึ้นมาแล้วก
รอก Adress เป็น “localhost/โฟล์เดอร์ที่เก็บงาน”
ถ้าเราเก็บใน www ก็ให้กรอกแค่ “localhost” เท่านั้น
จากนั้นก็จะพบหน้าสําหรับติดตั้ง Wordpress

28. ติดตั้ง Wordpress

29. ติดตั้ง Wordpress
ขั้นตอนนี้จะเป็นการเชื่อมต่อกับฐานข้อมูล
ซึ่งหากเราจําลอง Server ด้วย AppServ
เราสามารถสร้างและจัดการฐานข้อมูล
ผ่าน phpmyadmin ได้ที่
“localhost/phpmyadmin”
จากนั้นจะมีหน้าต่างให้เรากรอก ชื่อผู้ใช้
และ รหัสผ่าน
ชื่อผู้ใช้ : root
รหัสผ่าน: รหัสผ่านที่ท่านกรอกตอนติดตั้ง
AppServ
จัดทําโดย นายณัฐพงษ์ บุพศิริ :

30. calhost/phpmyadmin
PHPMYADMIN ติดตั้ง Wordpress
ขั้นตอนนี้ให้เราสร้างฐานข้อมูล
ตัวอย่างสร้างฐานข้อมูลชื่อ cms

31. ติดตั้ง Wordpress
หลังจากสร้างฐานข้อมูลเสร็จระบบก็จะพามาหน้านี้

32. ติดตั้ง Wordpress
ชื่อฐานข้อมูลที่เราสร้าง
ชื่อผู้ใช้งานฐานข้อมูล (ในที่นี้เป็น root)
รหัสผ่านฐานข้อมูล (ได้จากขั้นตอนติดตั้ง AppServ)

33. ติดตั้ง Wordpress
ําเ ร็จ
มูล ส
น ข ้อ
ต่อ ฐา
ชื่อ ม
เ

34. ติดตั้ง Wordpress

35. ติดตั้ง Wordpress
ําเร็จ
ตั้งส
ติด
จัดทําโดย นายณัฐพงษ์ บุพศิริ :

36. ติดตั้ง Wordpress
หลังเข้าสู่ระบบ ก็จะเข้าหน้าบริหารเว็บไซต์

37. ติดตั้ง Wordpress
ต์ขอ งเรา
้วเว ็บไซ
เสร ็จแล

38. ผู้จัดทํา
ณัฐพงษ์ บุพศิริ
Twitter: @katiblog
Facevook: ตะเกียง ไฟ
อ้างอิง
www.wikipedia.org
Cr e di t www.wordpress.org
www.appservnet work.com
เอกสารชุดนี้จัดทําขึ้นสําหรับการอบรมใน
โครงการสอนน้องสร้างเว็บไซต์ด้วย CMS
ไม่สงวงลิขสิทธิ์ ไม่ต้องแสดงที่มา และ
สามารถใช้เพื่อการค้าได้