Difference between revisions of "WonderCMS: Overview"
m (→WonderCMS SummerNote editor) |
m (→ส่วนเสริมที่ผมพัฒนาขึ้น) |
||
(2 intermediate revisions by the same user not shown) | |||
Line 146: | Line 146: | ||
=== WonderCMS Modern settings === | === WonderCMS Modern settings === | ||
− | * '''Modern settings''' เป็นส่วนเสริมที่ทดแทนหน้าจอการปรับแต่งเว็บไซต์ โดยทำเป็นเมนูลอย และแยกส่วนการจัดการออกเป็นสัดส่วนชัดเจนขึ้น สามารถดาวน์โหลดส่วนเสริมได้ที่ [http://www.rmuti.ac.th/user/prakai/wcms/_modern_settings-1.0.zip WonderCMS Modern settings] หรือ [https://github.com/prakai/wcms-_modern_settings Github.com/prakai/wcms-_modern_settings] | + | * '''Modern settings''' เป็นส่วนเสริมที่ทดแทนหน้าจอการปรับแต่งเว็บไซต์ โดยทำเป็นเมนูลอย และแยกส่วนการจัดการออกเป็นสัดส่วนชัดเจนขึ้น สามารถดาวน์โหลดส่วนเสริมได้ที่ [http://www.rmuti.ac.th/user/prakai/wcms/_modern_settings-1.2.0.zip WonderCMS Modern settings] หรือ [https://github.com/prakai/wcms-_modern_settings Github.com/prakai/wcms-_modern_settings] |
+ | |||
=== WonderCMS Additional contents === | === WonderCMS Additional contents === | ||
− | * '''Additional contents''' เป็นส่วนเสริมที่ทำให้ WonderCMS สามารถเพิ่มเนื้อหาเข้าไปท้ายเนื้อหาดั้งเดิมซึ่งมีเพียงเนื้อหาเดียว โดยเนื้อหาที่เพิ่มขึ้นนี้ สามารถกำหนดให้แสดงหรือซ่อนจากการแสดงผลปกติได้ มีประโยชน์สำหรับการทำเนื้อหาทิ้งไว้ก่อนได้ หรือทำไว้สำหรับเปิดให้เห็นเมื่อต้องการ ดาวน์โหลดส่วนเสริมได้ที่ [http://www.rmuti.ac.th/user/prakai/wcms/addition_contents-1.0.zip WonderCMS Additional settings] หรือ [https://github.com/prakai/wcms-addition_contents Github.com/prakai/wcms-addition_contents] | + | * '''Additional contents''' เป็นส่วนเสริมที่ทำให้ WonderCMS สามารถเพิ่มเนื้อหาเข้าไปท้ายเนื้อหาดั้งเดิมซึ่งมีเพียงเนื้อหาเดียว โดยเนื้อหาที่เพิ่มขึ้นนี้ สามารถกำหนดให้แสดงหรือซ่อนจากการแสดงผลปกติได้ มีประโยชน์สำหรับการทำเนื้อหาทิ้งไว้ก่อนได้ หรือทำไว้สำหรับเปิดให้เห็นเมื่อต้องการ ดาวน์โหลดส่วนเสริมได้ที่ [http://www.rmuti.ac.th/user/prakai/wcms/addition_contents-1.2.0.zip WonderCMS Additional settings] หรือ [https://github.com/prakai/wcms-addition_contents Github.com/prakai/wcms-addition_contents] |
+ | |||
+ | === Clean -- WonderCMS theme === | ||
+ | * '''Clean''' เป็นธีม (theme) สำหรับ WonderCMS เป็นธีมแบบพื้นๆ สะอาดตา สามารถดาวน์โหลดธีมได้ที่ [http://www.rmuti.ac.th/user/prakai/wcms/clean-1.2.0.zip Clean -- theme for WonderCMS] หรือ [https://github.com/prakai/wcms-clean Github.com/prakai/wcms-clean] | ||
− | + | <br/> | |
+ | ส่วนเสริมและธีมทั้ง 4 รายการ สามารถทดลองใช้งานได้ที่ [https://wondercms-demo.000webhostapp.com https://wondercms-demo.000webhostapp.com] |
Latest revision as of 10:08, 6 April 2017
บทนำ
หลายคนคงรู้จัก CMS (Content Management System) กันอยู่แล้ว เป็นโค้ดสำเร็จรูปสำหรับใช้ทำเว็บโดยไม่ต้องลงมือเขียนโค้ด ใช้งานผ่านการจัดการของโปรแกรม ทั้งสร้างหน้าเพจ จัดการเมนู นำไฟล์ขึ้นเซิร์ฟเวอร์ และความสามารถอื่นๆ อีกหลายอย่าง
หากค้นและหา CMS มาใช้ จะพบว่ามีหลากหลายตัวให้เลือกใช้ แต่ CMS ที่เป็นที่นิยมอยู่แล้ว เช่น Joomla, Wordpress หรือ Drupal เป็นต้น มีการนำไปใช้ทำเว็บไซต์มากมาย แต่ทั้งนี้ CMS เหล่านั้นมีทั้งข้อดีข้อเสีย เช่น
ข้อดี
- ความครบถ้วนและสมบูรณ์ในตัว
- มีเครื่องมือให้ใช้จำนวนมาก
- มีและสามารถพัฒนาส่วนเสริม (Plugin) ให้มีความสามารถเพิ่มขึ้นอีก
- เหมาะสำหรับการทำเว็บไซต์ขนาดใหญ่ มีเนื้อหาจำนวนมาก
ข้อเสีย
- มีขนาดใหญ่ เทอะทะ
- มีความยุ่งยาก หรือซับซ้อนในการติดตั้งและใช้งาน
- มีความต้องการพื้นฐานหลายส่วน เช่น ฐานข้อมูล
- ไม่เหมาะสำหรับเว็บไซต์ขนาดเล็ก เช่น เว็บส่วนบุคคลที่จำนวนหน้าเพจไม่มาก
WonderCMS
WonderCMS เป็น CMS ตัวหนึ่งที่เพิ่งได้รับการพัฒนาขึ้นมาไม่นาน มีเป้าหมายหลักของการพัฒนา 2 เป้าหมาย คือ มีขนาดเล็ก และใช้งานง่าย โดยผู้พัฒนาได้ออกตัวว่า เป็น CMS ที่มีขนาดเล็กที่สุด มีข้อดีและความสามารถดังนี้
- มีขนาดเล็ก ประกอบด้วยไฟล์ตั้งต้นเพียง 5 ไฟล์ โดยโค้ดอื่นนั้น ใช้การลิงค์จากเว็บของผู้พัฒนาโค้ดนั้นๆ เช่น Bootstrap และ jQuery เป็นต้น
- เริ่มต้นใช้งานได้ง่าย ไม่ต้องปรับแต่งไฟล์คุณสมบัติ เพียงแค่ 1) แตกไฟล์ 2) อัพโหลดขึ้นเซิร์ฟเวอร์ และ 3) เริ่มใช้งาน
- เก็บคุณสมบัติและเนื้อหาในไฟล์ หรือไม่ต้องใช้ฐานข้อมูล
- มีโครงสร้างที่สามารถเปลี่ยนรูปแบบ (Theme) ได้
- มีโครงสร้างที่พัฒนาส่วนเสริมให้มีความสามารถเพิ่มขึ้นได้
- รองรับการแสดงผลแบบ Responsive เนื่องจากใช้ Bootstrap และ jQuery เป็นเครื่องมือพื้นฐาน
เว็บไซต์และเว็บทดลอง
สามารถอ่านรายละเอียดของ WonderCMS ได้ที่ https://www.wondercms.com และทดลองใช้งานได้ที่ https://www.wondercms.com/demo
ความต้องการพื้นฐาน
- PHP เนื่องจาก WonderCMS พัฒนาในส่วนของการทำงานฝั่งเซิร์ฟเวอร์ด้วยภาษา PHP
- เซิร์ฟเวอร์ต้องรองรับการทำ URL rewrite เช่น mod_rewrite
- Bootstrap และ jQuery เป็นส่วนประกอบในส่วนการทำงานฝั่งบราวเซอร์ โดยการลิงค์โค้ดตรงจากเซิร์ฟเวอร์ของโค้ด หรือดาวน์โหลดและติดตั้งบนเครื่องเดียวกันกับ WonderCMS ก็ได้
ขั้นตอนการติดตั้ง
การติดตั้ง WonderCMS นั้น สามารถทำได้ง่าย โดยมีขั้นตอนดังนี้
- ดาวน์โหลดโค้ดได้จากเว็บไซต์ https://www.wondercms.com หรือ https://www.wondercms.com/latest จะได้ไฟล์รวมมา 1 ไฟล์ เช่น WonderCMS-1.2.0.zip
- แตกไฟล์ (uncompress) จะพบว่ามีไดเร็กทอรี่และไฟล์ภายในดังนี้
[wondercms]
- index.php
- .htaccess
- [themes]
- [default]
- theme.php
- [css]
- style.css
- แก้ไขไฟล์ .htaccess ให้สัมพันธ์กับเซิร์ฟเวอร์ เนื่องจากเป็นส่วนการแปลง URL ให้สัมพันธ์กับตำแหน่งของโค้ด (URL rewrite) โดยผมได้เพิ่มข้อมูลเข้าไปเล็กน้อย ดังนี้
Options -Indexes
ServerSignature Off
RewriteEngine on
RewriteCond $0#%{REQUEST_URI} ([^#]*)#(.*)\1$
RewriteRule ^.*$ - [E=CWD:%2]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.+)$ %{ENV:CWD}index.php?page=$1 [QSA,L]
RewriteRule database.js - [F]
- อัพโหลดขึ้นเซิร์ฟเวอร์
- ใช้งาน เช่น http://www.yourdomain.com/wondercms
การติดตั้งส่วนเสริม
ปัจจุบัน ส่วนเสริมหรือ plugin ที่มีให้ดาวน์โหลดนั้นมีไม่มาก แต่ขอแนะนำส่วนเสริมที่ผมพัฒนาขึ้น 3 รายการ ตามรายละเอียดช่วงท้าย ประกอบด้วย SummerNote editor, Modern settings และ Additional contents โดยทั้งนี้ ขอแสดงขั้นตอนการติดตั้งส่วนเสริม SummerNote editor
SummerNote editor เป็นส่วนเสริมที่ทำให้ง่ายต่อการแก้ไขเนื้อหา ในหน้าการแก้ไขเนื้อหามีลักษณะของการแก้ไขแบบเดียวผลลัพธ์ที่จะได้ หรือ WYSIWYG (What You See Is What You Get) มีขั้นตอนการติดตั้งดังนี้
- ดาวน์โหลดโค้ดจากเว็บไซต์ WonderCMS SummerNote editor หรือ Github.com/prakai/wcms-summernote จะได้ไฟล์รวม 1 ไฟล์ เช่น summernote-1.0.zip
- แตกไฟล์ จะพบว่ามีไดเร็กทอรี่และไฟล์ภายในดังนี้
[summernote]
- summernote.php
- file.php
- [css]
- style.css
- อื่นๆ
- [js]
- files.js
- อื่นๆ
- อัพโหลดไดเร็กทอรี่และไฟล์ไปยังไดเร็กทอรี่ plugins ของ WonderCMS หากไม่มีไดเร็กทอรี่ plugins ให้สร้างขึ้นมาก่อนโครงสร้างหลังการอัพโหลดไฟล์ ดังนี้
[wondercms]
- [summernote]
- summernote.php
- file.php
- [css]
- style.css
- อื่นๆ
- [js]
- files.js
- อื่นๆ
การติดตั้งจากไฟล์ชุดรวม
สำหรับบุคลากรและนักศึกษา มทร.อีสาน สามารถดาวน์โหลดไฟล์ที่ผมรวมทั้งโปรแกรม WonderCMS และส่วนเสริมไว้แล้ว เพื่อนำไปติดตั้งในเว็บส่วนบุคคลบนเซิร์ฟเวอร์ มทร.อีสาน ได้ โดยมีขั้นตอนดังนี้
- เข้าถึงพื้นที่ไฟล์ส่วนบุคคลด้วยโปรแกรม File Explorer หรือ Windows Explorer ตามวิดีโอแนะนำ วิธีการเข้าถึงพื้นที่ส่วนบุคคลบนไฟล์เซิร์ฟเวอร์ มทร.อีสาน
\\files.rmuti.ac.th\ชื่อผู้ใช้\public_html (ทั้งนี้ หากไม่พบไดเร็กทอรี่ public_html ให้สร้างขึ้นใหม่)
- ดาวน์โหลดไฟล์รวมของ WonderCMS ได้ที่ http://www.rmuti.ac.th/user/prakai/wcms/wondercms-2.0-rmuti.zip
- ใช้โปรแกรมแตกไฟล์เพื่อแตกไฟล์ทั้งหมดในไฟล์ wondercms-2.0-rmuti.zip ไปไว้ใน \\files.rmuti.ac.th\ชื่อผู้ใช้\public_html จะมีโครงสร้างของไฟล์คือ
\\files.rmuti.ac.th\ชื่อผู้ใช้\public_html
- index.php
- .htaccess
- [plugins]
- อื่นๆ
- [themes]
- อื่นๆ
- เปิดโปรแกรม Web browser ไปยังตำแหน่งเว็บส่วนบุคคล
* กรณีอาจารย์หรือเจ้าหน้าที่ http://www.rmuti.ac.th/user/ชื่อผู้ใช้ เช่น http://www.rmuti.ac.th/user/prakai . * กรณีนักศึกษา http://www.rmuti.ac.th/student/ชื่อผู้ใช้
การปรับแต่งเว็บไซต์
หากต้องการปรับแต่งเว็บไซต์ทั้งส่วนของเนื้อหาและคุณสมบัติ จำเป็นต้องเข้าใช้งาน (Login) ระบบก่อน โดยตำแหน่ง URL สำหรับเข้าใช้งานในครั้งแรกมี URL เป็น wondercms/loginURL เช่น http://www.yourdomain.com/wondercms/loginURL
รหัสผ่านตั้งต้นของการเข้าไปปรับแต่งเนื้อหาคือ admin
หากมีการแก้ไข URL ของการเข้าใช้งานแล้ว จำเป็นต้องเข้าถึง URL โดยตรง เช่น หากแก้ไข loginURL เป็น mylogin ตำแหน่งการเข้าใช้งานจะเปลี่ยนเป็น http://www.yourdomain.com/wondercms/mylogin เป็นต้น
การปรับแต่งเนื้อหา
เมื่อเข้าใช้งานระบบแล้ว จะพบว่าจะสามารถแก้ไขเนื้อหาในเว็บได้ทันที เพียงแค่คลิกเมาส์ในพื้นที่เนื้อหานั้น การบันทึกเนื้อหาจะเกิดขึ้นอัตโนมัติเมื่อมีการย้ายเมาส์ไปคลิกส่วนอื่นที่ไม่ใช่เนื้อหาที่กำลังแก้ไข ทั้งนี้สามารถคลิกเมนูเปลี่ยนเพจ เพื่อแก้ไขเนื้อหาในเพจอื่นได้
การปรับแต่งเว็บไซต์
เช่นเดียวกันกับการปรับแต่งเนื้อหา เมื่อเข้าใช้งานระบบแล้ว จะมีแถบเมนูด้านบนเว็บที่สามารถคลิกเพื่อเลื่อนเมนูหน้าจอการปรับแต่งเว็บไซต์ ประกอบด้ว
- การลบหน้าปัจจุบัน
- การปรับแต่งส่วนหัวเว็บไซต์ (website title) ส่วนท้ายเว็บไซต์ (website footer)
- การปรับแต่งชื่อเพจ (page title) คำอธิบาย (description) คำค้น (keyword)
- การแก้ไขรายการหน้าเพจหรือเมนู
- การเปลี่ยนตำแหน่ง URL สำหรับเข้าใช้งานระบบ
- การเปลี่ยนรหัสผ่าน
ส่วนเสริมที่ผมพัฒนาขึ้น
เนื่องจาก WonderCMS มีขนาดเล็ก ใช้งานง่าย เหมาะสำหรับการทำเว็บไซต์ส่วนบุคคลที่มีจำนวนหน้าและเนื้อหาไม่มาก ผมจึงนำมาเป็นเครื่องมือสำหรับทำเว็บไซต์ส่วนตัวของผม http://www.rmuti.ac.th/user/prakai แต่พบว่า มีความสามารถบางส่วนที่ไม่ตรงใจ และความสามารถบางอย่างไม่มี ผมจึงได้พัฒนาส่วนเสริม 3 รายการขึ้นมาให้ใช้งาน
WonderCMS SummerNote editor
- SummerNote editor เป็นส่วนเสริมที่ทำงานแทน MediumEditor editor ในส่วนของการอัพโหลดและแทรกรูปภาพเข้าไปในเนื้อหา โดยพัฒนาส่วนเสริมให้ใช้ SummerNote แทน พัฒนาส่วนของการอัพโหลดไฟล์เอกสารและไฟล์รูปภาพได้ด้วย และกำลังอยู่ในระหว่างการพัฒนาความสามารถอื่นเพิ่มเติมอีก สามารถดาวน์โหลดส่วนเสริมได้ที่ WonderCMS SummerNote editor หรือ Github.com/prakai/wcms-summernote
WonderCMS Modern settings
- Modern settings เป็นส่วนเสริมที่ทดแทนหน้าจอการปรับแต่งเว็บไซต์ โดยทำเป็นเมนูลอย และแยกส่วนการจัดการออกเป็นสัดส่วนชัดเจนขึ้น สามารถดาวน์โหลดส่วนเสริมได้ที่ WonderCMS Modern settings หรือ Github.com/prakai/wcms-_modern_settings
WonderCMS Additional contents
- Additional contents เป็นส่วนเสริมที่ทำให้ WonderCMS สามารถเพิ่มเนื้อหาเข้าไปท้ายเนื้อหาดั้งเดิมซึ่งมีเพียงเนื้อหาเดียว โดยเนื้อหาที่เพิ่มขึ้นนี้ สามารถกำหนดให้แสดงหรือซ่อนจากการแสดงผลปกติได้ มีประโยชน์สำหรับการทำเนื้อหาทิ้งไว้ก่อนได้ หรือทำไว้สำหรับเปิดให้เห็นเมื่อต้องการ ดาวน์โหลดส่วนเสริมได้ที่ WonderCMS Additional settings หรือ Github.com/prakai/wcms-addition_contents
Clean -- WonderCMS theme
- Clean เป็นธีม (theme) สำหรับ WonderCMS เป็นธีมแบบพื้นๆ สะอาดตา สามารถดาวน์โหลดธีมได้ที่ Clean -- theme for WonderCMS หรือ Github.com/prakai/wcms-clean
ส่วนเสริมและธีมทั้ง 4 รายการ สามารถทดลองใช้งานได้ที่ https://wondercms-demo.000webhostapp.com