Web CMS ทำ Workshop เบื้องต้น
ครั้งนี้เราจะเอาทั้งหมดที่ทำกันมา มารวมกัน
โดยให้เรา โหลดโปรแกรมนี้มาก่อน HeidSQL
เราจะใช้โปรแกรมนี้สร้าง Account ขึ้นมาและกำหนดสิทธิเพื่อใช้งานฐานข้อมูล
เมื่อติดตั้งเสร็จแล้วให้เราเปิดโปรแกรมมาจากนั้นกด New แล้วเราไปที่ root ของเรา
จากนั้นไปสร้าง database ใหม่ที่เราจะใช้ขึ้นมาก่อน กดที่หมายเลข 1
แล้วสร้าง Account ขึ้นมาเพื่อใช้งาน database นี้ (เราจะไม่ใช้ root)
ให้กดตามภาพเลย คือ เพิ่ม account ที่จะใช้ลงไป
จากนั้นเราให้เรากำหนดสิทธิ ไปที่ Account นั้นกด Add object เลือก database ที่สร้างขึ้นมาแล้วติ๊กหน้าช่อง database ด้วย
จากนั้นเราไปทำ เหมือนตอนที่แล้ว เอาแค่ถึงหน้า Login ยังไม่ต้องทำ CRED
จากนั้นให้เราเชื่อมหน้าไป Dashboard ของ Template AdminLTE ซึ่งอยู่ตรงนี้
https://adminlte.io/themes/AdminLTE/pages/examples/blank.html
จากนั้นให้เราแก้ไขให้ตรงกับความต้องการของเรา
จากนั้นให้เราโหลด Template ที่ต้องการได้เลย
โหลดแล้วแตกไฟล์ให้เรียบร้อย จากนั้น Copy ไฟล์ตามรูปไปไว้ที่ assets/frontend
จากนั้น เริ่มใช้ template จากใน views โดยสร้าง Folder ชื่อ Frontend และสร้างไฟล์ index web page ไว้ด้านใน
แล้วสร้าง Folder front ต่อ แล้วสร้างไฟล์ php web page ชื่อ index
แล้วเรา ไปที่ template ที่เราโหลดมาจากนั้น คลิกขวาเลือก ดูรหัสต้นฉบับ แล้วเรา copy ไปใส่ในไฟล์ index ที่อยู่ใน Folder frontend
จากนั้นไปสร้าง Folder frontend ที่ Controllers
แล้วสร้าง php class ชื่อว่า front ตามหมายเลขที่ 1 แล้ว เพิ่ม code ตามข้างล่างนี้ ตามหมายเลข 2
ลอง Test ดู
จากนั้นให้เราแก้ Code เหมือนที่ทำในตอนนี้ที่ทำหน้า Login
ลอง test ดู
เมื่อเสร็จแล้ว เราต้องกลับไปทำแบบนี้ให้ครบทุกหน้า
ต่อจากนั้นเราจะทำการ Include เพราะว่าเราต้องการให้มันหน้าตาเหมือนกันทุกหน้าต่างเฉพาะแต่เราจะเปลี่ยนข้อมูล
ให้เราสร้าง Folder ชื่อว่า include ใน Folder backoffice
จากนั้นให้เราสร้างไฟล์ php web page แล้วตั้งชื่อว่า aside
ให้เราไป Copy Code ตรงส่วนที่เราต้องการ
มาใส่ไฟล์ aside ของเรา
ให้เราแบบนี้ ทุกหน้าที่เราต้องการ include
จากนั้น ให้เราสร้าง PHP Web Page ที่ Folder Dashboard ที่อยู่ใน backoffice ตั้งชื่อว่า b_archive
จากนั้นให้เรา Copy โค้ด หน้า Dash ใส่ ในไฟล์ b_archive
พร้อมทั้งทำการเรียกไฟล์ที่เราทำการ include มาใส่
ไปเพิ่ม Code ในหน้า Controllers เพื่อให้แสดงหน้า View
ลอง Test ดู
สรุป ข้อดีของการทำ include
- ช่วยลดความซ้ำซ้อนของการเขียน Code จากที่เราต้องเขียนยาว ๆ หลายบรรทัด มาให้เหลือแค่นิดเดียว
- ประหยัดเนื้อที่
- Code ดูเป็นระเบียบ ไม่ซับซ้อน อ่านง่าย
ต่อไปเรามาจะเชื่อม Database กับหน้า Dashboard
ให้เราเปิดโปรแกรม MySQL Workbench แล้วสร้างตามนี้
ให้เราตั้งชื่อตาราง ตามหมายเลขที่ 1 แล้ว เพิ่มข้อมูล ตามหมายเลขที่ 2 แล้วกด Apply ตามหมายเลขที่ 3
จากนั้นให้เราเพิ่มข้อมูลตาม หมายเลขที่1 แล้ว กดApply ที่อยู่ตรงหมายเลข 2
แล้วเรากลับมาที่ โปรแกรม NetBeans เพิ่มโค้ดให้เชื่อมกับ ฐานข้อมูลของเรา
ให้เราสร้างไฟล์ PHP Class ที่ Folder backoffice ที่อยู่ใน Controllers
ตั้งชื่อว่า Archive **อย่าลืมว่าชื่อ Class ตัวแรกต้องเป็นตัวพิมพ์ใหญ่เท่านั้น**
เราจะทำการสร้าง Function Create ก่อน ซึ่งฟังก์ชันนี้คือ เมื่อเรากดตรง New จะมีแบบฟอร์มให้เราเพิ่มรายละเอียดตามที่ต้องการ
ให้เราเพิ่ม Code ตรงไฟล์ Archive ที่เราพึ่งสร้างมาตะกี้
แล้วไปเพิ่ม Code ตามนี้
จากนั้นไปสร้างไฟล์ php class ตั้งชื่อว่า Archive_models ที่ Models
จะได้แบบนี้
ให้เรา เพิ่ม Code ฟังก์ชั่น Create ใน Models
จากนั้นไปแก้ไขใน Views ไฟล์ from_archive ที่อยู่ใน Folder Archive
ลอง Test ดู
กด +New ในหน้า Dashboard
มันจะมีแบบ ฟอร์ม ที่เราสร้างไว้ ให้เรา ลองกรอก ข้อมูลดู
จากนั้นจะเห็นได้ว่า ข้อมูลที่เรากรอกไปได้เพิ่มเข้ามาแล้ว
กลับไปดู MySQL Workbench จะเห็นได้ว่า ข้อมูลที่เรา กรอกเมื่อกี้ก็ขึ้นใน database ด้วย
เมื่อเราทำฟังก์ชั่น Create ต่อไปเราจะทำฟังก์ชั่น Update กันนะครับ
ให้เราเพิ่มฟังก์ชั่น update ที่ไฟล์ Archive ในFolder Controllers
จากนั้นไปเพิ่ม Code ในไฟล์ index ในFolder Archive ที่อยู่ใน Folder backoffice
ลอง Test ดู
จะเห็นได้ว่าในหน้า Dashboard ตรง Name ได้เปลี่ยนแล้ว พร้อมทั้งใน Database
จบแล้ว ขั้นตอนในการสร้างฟังก์ชั่น Update
ต่อไปฟังก์ชั่น Delete
ให้เราไปเพิ่มฟังก์ชั่น Delete ใน Archive ที่อยู่ใน Folder Controllers
เพิ่ม Code ในหน้า View ของ Archive
ลองTest ดู
จะเห็นได้ว่า รูปได้หายไปแล้ว
ต่อไปเราจะทำการเชื่อมฐานข้อมูลกับหน้าเว็บ
ให้ไปไฟล์ Archive ที่ Controllers
จากนั้นให้เราเพิ่ม Code ตามนี้
จากนั้นไปแก้ไข้ตรง Archive_models
จากนั้นไปแก้ หน้า View ที่ Folder archive
แล้วไปเพิ่ม Code ตามนี้
ลอง Test ดู
จะเห็นได้ว่า ตรงหมายเลข 1 คือ img รูปที่เรา ตั้งไว้ใน Data base
หมายเลข 2 คือ Name ชื่อที่เราตั้งไว้ใน
หมายเลข 3 คือ date วันที่ ที่เราตั้งไว้ใน Data base
หมายเลข 4 คือ title หัวข้อ ที่เราตั้งไว้ใน Data base
ขอจบการทำ Web CMS เบื้องต้น คร่าวๆ เท่านี้ก่อนครับ หวังว่าจะเป็นประโยชน์กับเพื่อน ๆ ที่พึ่งจะเริ่มต้นในการเขียนโปรแกรมนะครับ