Difference between revisions of "WonderCMS: Overview"

From Prakai Nadee
m
m
Line 23: Line 23:
 
== WonderCMS ==
 
== WonderCMS ==
 
[https://www.wondercms.com WonderCMS] เป็น CMS ตัวหนึ่งที่เพิ่งได้รับการพัฒนาขึ้นมาไม่นาน มีเป้าหมายหลักของการพัฒนา 2 เป้าหมาย คือ มีขนาดเล็ก และใช้งานง่าย โดยผู้พัฒนาได้ออกตัวว่า เป็น CMS ที่มีขนาดเล็กที่สุด มีข้อดีและความสามารถดังนี้
 
[https://www.wondercms.com WonderCMS] เป็น CMS ตัวหนึ่งที่เพิ่งได้รับการพัฒนาขึ้นมาไม่นาน มีเป้าหมายหลักของการพัฒนา 2 เป้าหมาย คือ มีขนาดเล็ก และใช้งานง่าย โดยผู้พัฒนาได้ออกตัวว่า เป็น CMS ที่มีขนาดเล็กที่สุด มีข้อดีและความสามารถดังนี้
−
* มีขนาดเล็ก ประกอบด้วยไฟล์ตั้งต้นเพียง 5 ไฟล์
+
* มีขนาดเล็ก ประกอบด้วยไฟล์ตั้งต้นเพียง 5 ไฟล์ โดยโค้ดอื่นนั้น ใช้การลิงค์จากเว็บของผู้พัฒนาโค้ดนั้นๆ เช่น Bootstrap และ jQuery เป็นต้น
−
* เริ่มต้นใช้งานได้ง่าย ไม่ต้องปรับแต่งไฟล์คุณสมบัติ เพียงแค่ 1) แตกไฟล์ (unzip) 2) อัพโหลดขึ้นเซิร์ฟเวอร์ และ 3) เริ่มใช้งาน
+
* เริ่มต้นใช้งานได้ง่าย ไม่ต้องปรับแต่งไฟล์คุณสมบัติ เพียงแค่ 1) แตกไฟล์ 2) อัพโหลดขึ้นเซิร์ฟเวอร์ และ 3) เริ่มใช้งาน
 
* เก็บคุณสมบัติและเนื้อหาในไฟล์ หรือไม่ต้องใช้ฐานข้อมูล
 
* เก็บคุณสมบัติและเนื้อหาในไฟล์ หรือไม่ต้องใช้ฐานข้อมูล
 
* มีโครงสร้างที่สามารถเปลี่ยนรูปแบบ (Theme) ได้
 
* มีโครงสร้างที่สามารถเปลี่ยนรูปแบบ (Theme) ได้
 
* มีโครงสร้างที่พัฒนาส่วนเสริมให้มีความสามารถเพิ่มขึ้นได้
 
* มีโครงสร้างที่พัฒนาส่วนเสริมให้มีความสามารถเพิ่มขึ้นได้
 
* รองรับการแสดงผลแบบ Responsive เนื่องจากใช้ Bootstrap และ jQuery เป็นเครื่องมือพื้นฐาน
 
* รองรับการแสดงผลแบบ Responsive เนื่องจากใช้ Bootstrap และ jQuery เป็นเครื่องมือพื้นฐาน
 +
 +
=== เว็บไซต์และเว็บทดลอง ===
 +
สามารถอ่านรายละเอียดของ WonderCMS ได้ที่ [https://www.wondercms.com https://www.wondercms.com] และทดลองใช้งานได้ที่ [https://www.wondercms.com/demo https://www.wondercms.com/demo]
 +
 +
=== ความต้องการพื้นฐาน ===
 +
* [https://www.php.net PHP] เนื่องจาก WonderCMS พัฒนาในส่วนของการทำงานฝั่งเซิร์ฟเวอร์ด้วยภาษา PHP
 +
* เซิร์ฟเวอร์ต้องรองรับการทำ URL rewrite เช่น [http://httpd.apache.org/docs/2.0/mod/mod_rewrite.html mod_rewrite]
 +
* [http://getbootstrap.com Bootstrap] และ [https://jquery.org jQuery] เป็นส่วนประกอบในส่วนการทำงานฝั่งบราวเซอร์ โดยการลิงค์โค้ดตรงจากเซิร์ฟเวอร์ของโค้ด หรือดาวน์โหลดและติดตั้งบนเครื่องเดียวกันกับ WonderCMS ก็ได้
 +
 +
=== ขั้นตอนการติดตั้ง ===
 +
การติดตั้ง WonderCMS นั้น สามารถทำได้ง่าย โดยมีขั้นตอนดังนี้
 +
* ดาวน์โหลดโค้ดได้จากเว็บไซต์ [https://www.wondercms.com https://www.wondercms.com] หรือ [https://www.wondercms.com/latest https://www.wondercms.com/latest] จะได้ไฟล์รวมมา 1 ไฟล์ เช่น WonderCMS-1.2.0.zip
 +
* แตกไฟล์ (uncompress) จะพบว่ามีไดเร็กทอรี่และไฟล์ภายในดังนี้
 +
<syntaxhighlight>
 +
[wondercms]
 +
    - index.php
 +
    - .htaccess
 +
    - [themes]
 +
      - [default]
 +
          - theme.php
 +
          - [css]
 +
            - style.css
 +
</syntaxhighlight>
 +
* แก้ไขไฟล์ .htaccess ให้สัมพันธ์กับเซิร์ฟเวอร์ เนื่องจากเป็นส่วนการแปลง URL ให้สัมพันธ์กับตำแหน่งของโค้ด (URL rewrite) โดยผมได้เพิ่มข้อมูลเข้าไปเล็กน้อย ดังนี้
 +
<syntaxhighlight>
 +
Options -Indexes
 +
ServerSignature Off
 +
RewriteEngine on
 +
RewriteBase /wondercms/
 +
RewriteCond %{REQUEST_FILENAME} !-f
 +
RewriteCond %{REQUEST_FILENAME} !-d
 +
RewriteRule ^(.+)$ index.php?page=$1 [QSA,L]
 +
RewriteRule database.js - [F]
 +
</syntaxhighlight>
 +
* อัพโหลดขึ้นเซิร์ฟเวอร์
 +
* ใช้งาน เช่น http://www.yourdomain.com/wondercms
 +
 +
=== การติดตั้งส่วนเสริม ===
 +
ปัจจุบัน ส่วนเสริมหรือ plugin ที่มีให้ดาวน์โหลดนั้นมีไม่มาก แต่ขอแนะนำส่วนเสริม 1 รายการ คือ MediumEditor editor
 +
 +
'''[https://www.wondercms.com/forum/viewtopic.php?f=30&t=801 MediumEditor editor]''' เป็นส่วนเสริมที่ทำให้ง่ายต่อการแก้ไขเนื้อหา ในหน้าการแก้ไขเนื้อหามีลักษณะของการแก้ไขแบบเดียวผลลัพธ์ที่จะได้ หรือ WYSIWYG (What You See Is What You Get) มีขั้นตอนการติดตั้งดังนี้
 +
* ดาวน์โหลดโค้ดจากเว็บไซต์ [https://www.wondercms.com/forum/viewtopic.php?f=30&t=801 MediumEditor editor] จะได้ไฟล์รวม 1 ไฟล์ เช่น mediumeditor.zip
 +
* แตกไฟล์ จะพบว่ามีไดเร็กทอรี่และไฟล์ภายในดังนี้
 +
<syntaxhighlight lang="bash">
 +
[mediumeditor]
 +
    - mediumeditor.php
 +
</syntaxhighlight>
 +
* อัพโหลดไดเร็กทอรี่และไฟล์ไปยังไดเร็กทอรี่ plugins ของ WonderCMS หากไม่มีไดเร็กทอรี่ plugins ให้สร้างขึ้นมาก่อนโครงสร้างหลังการอัพโหลดไฟล์ ดังนี้
 +
<syntaxhighlight>
 +
[wondercms]
 +
    - [plugins]
 +
      - [mediumeditor]
 +
          - mediumeditor.php
 +
</syntaxhighlight>
 +
 +
 +
== การปรับแต่งเว็บไซต์ ==
 +
หากต้องการปรับแต่งเว็บไซต์ทั้งส่วนของเนื้อหาและคุณสมบัติ จำเป็นต้องเข้าใช้งาน (Login) ระบบก่อน โดยตำแหน่ง URL สำหรับเข้าใช้งานในครั้งแรกมี URL เป็น wondercms/loginURL เช่น http://www.yourdomain.com/wondercms/loginURL
 +
 +
=== การปรับแต่งเนื้อหา ===
 +
เมื่อเข้าใช้งานระบบแล้ว จะพบว่าจะสามารถแก้ไขเนื้อหาในเว็บได้ทันที เพียงแค่คลิกเมาส์ในพื้นที่เนื้อหานั้น '''การบันทึกเนื้อหาจะเกิดขึ้นอัตโนมัติ'''เมื่อมีการย้ายเมาส์ไปคลิกส่วนอื่นที่ไม่ใช่เนื้อหาที่กำลังแก้ไข ทั้งนี้สามารถคลิกเมนูเปลี่ยนเพจ เพื่อแก้ไขเนื้อหาในเพจอื่นได้
 +
 +
=== การปรับแต่งเว็บไซต์ ===
 +
เช่นเดียวกันกับการปรับแต่งเนื้อหา เมื่อเข้าใช้งานระบบแล้ว จะมีแถบเมนูด้านบนเว็บที่สามารถคลิกเพื่อเลื่อนเมนูหน้าจอการปรับแต่งเว็บไซต์ ประกอบด้ว
 +
* การลบหน้าปัจจุบัน
 +
* การปรับแต่งส่วนหัวเว็บไซต์ (website title) ส่วนท้ายเว็บไซต์ (website footer)
 +
* การปรับแต่งชื่อเพจ (page title) คำอธิบาย (description) คำค้น (keyword)
 +
* การแก้ไขรายการหน้าเพจหรือเมนู
 +
* การเปลี่ยนตำแหน่ง URL สำหรับเข้าใช้งานระบบ
 +
* การเปลี่ยนรหัสผ่าน
 +
 +
=== ส่วนเสริมที่ผมพัฒนาขึ้น ===
 +
เนื่องจาก WonderCMS มีขนาดเล็ก ใช้งานง่าย เหมาะสำหรับการทำเว็บไซต์ส่วนบุคคลที่มีจำนวนหน้าและเนื้อหาไม่มาก ผมจึงนำมาเป็นเครื่องมือสำหรับทำเว็บไซต์ส่วนตัวของผม [http://www.rmuti.ac.th/user/prakai http://www.rmuti.ac.th/user/prakai] แต่พบว่า มีความสามารถบางส่วนที่ไม่ตรงใจ และความสามารถบางอย่างไม่มี ผมจึงได้พัฒนาส่วนเสริม 2 รายการขึ้นมาให้ใช้งาน
 +
* '''[http://summernote.org SummerNote editor]''' เป็นส่วนเสริมที่ทำงานแทน MediumEditor editor ในส่วนของการอัพโหลดและแทรกรูปภาพเข้าไปในเนื้อหา โดยพัฒนาส่วนเสริมให้ใช้ SummerNote แทน รวมทั้งพัฒนาส่วนของการอัพโหลดไฟล์รูปภาพด้วย และกำลังอยู่ในระหว่างการพัฒนาความสามารถอื่นเพิ่มเติมอีก สามารถดาวน์โหลดส่วนเสริมได้ที่ [http://www.rmuti.ac.th/user/prakai/wcms/summernote.zip WonderCMS SummerNote editor]
 +
* '''[Modern settings]''' เป็นส่วนเสริมที่ทดแทนหน้าจอการปรับแต่งเว็บไซต์ โดยทำเป็นเมนูลอย และแยกส่วนการจัดการออกเป็นสัดส่วนชัดเจนขึ้น สามารถดาวน์โหลดส่วนเสริมได้ที่ [http://www.rmuti.ac.th/user/prakai/wcms/_modern_settings.zip WonderCMS Modern settings]

Revision as of 15:33, 14 February 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
RewriteBase /wondercms/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.+)$ index.php?page=$1 [QSA,L]
RewriteRule database.js - [F]

การติดตั้งส่วนเสริม

ปัจจุบัน ส่วนเสริมหรือ plugin ที่มีให้ดาวน์โหลดนั้นมีไม่มาก แต่ขอแนะนำส่วนเสริม 1 รายการ คือ MediumEditor editor

MediumEditor editor เป็นส่วนเสริมที่ทำให้ง่ายต่อการแก้ไขเนื้อหา ในหน้าการแก้ไขเนื้อหามีลักษณะของการแก้ไขแบบเดียวผลลัพธ์ที่จะได้ หรือ WYSIWYG (What You See Is What You Get) มีขั้นตอนการติดตั้งดังนี้

  • ดาวน์โหลดโค้ดจากเว็บไซต์ MediumEditor editor จะได้ไฟล์รวม 1 ไฟล์ เช่น mediumeditor.zip
  • แตกไฟล์ จะพบว่ามีไดเร็กทอรี่และไฟล์ภายในดังนี้
 [mediumeditor]
    - mediumeditor.php
  • อัพโหลดไดเร็กทอรี่และไฟล์ไปยังไดเร็กทอรี่ plugins ของ WonderCMS หากไม่มีไดเร็กทอรี่ plugins ให้สร้างขึ้นมาก่อนโครงสร้างหลังการอัพโหลดไฟล์ ดังนี้
 [wondercms]
    - [plugins]
       - [mediumeditor]
          - mediumeditor.php


การปรับแต่งเว็บไซต์

หากต้องการปรับแต่งเว็บไซต์ทั้งส่วนของเนื้อหาและคุณสมบัติ จำเป็นต้องเข้าใช้งาน (Login) ระบบก่อน โดยตำแหน่ง URL สำหรับเข้าใช้งานในครั้งแรกมี URL เป็น wondercms/loginURL เช่น http://www.yourdomain.com/wondercms/loginURL

การปรับแต่งเนื้อหา

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

การปรับแต่งเว็บไซต์

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

  • การลบหน้าปัจจุบัน
  • การปรับแต่งส่วนหัวเว็บไซต์ (website title) ส่วนท้ายเว็บไซต์ (website footer)
  • การปรับแต่งชื่อเพจ (page title) คำอธิบาย (description) คำค้น (keyword)
  • การแก้ไขรายการหน้าเพจหรือเมนู
  • การเปลี่ยนตำแหน่ง URL สำหรับเข้าใช้งานระบบ
  • การเปลี่ยนรหัสผ่าน

ส่วนเสริมที่ผมพัฒนาขึ้น

เนื่องจาก WonderCMS มีขนาดเล็ก ใช้งานง่าย เหมาะสำหรับการทำเว็บไซต์ส่วนบุคคลที่มีจำนวนหน้าและเนื้อหาไม่มาก ผมจึงนำมาเป็นเครื่องมือสำหรับทำเว็บไซต์ส่วนตัวของผม http://www.rmuti.ac.th/user/prakai แต่พบว่า มีความสามารถบางส่วนที่ไม่ตรงใจ และความสามารถบางอย่างไม่มี ผมจึงได้พัฒนาส่วนเสริม 2 รายการขึ้นมาให้ใช้งาน

  • SummerNote editor เป็นส่วนเสริมที่ทำงานแทน MediumEditor editor ในส่วนของการอัพโหลดและแทรกรูปภาพเข้าไปในเนื้อหา โดยพัฒนาส่วนเสริมให้ใช้ SummerNote แทน รวมทั้งพัฒนาส่วนของการอัพโหลดไฟล์รูปภาพด้วย และกำลังอยู่ในระหว่างการพัฒนาความสามารถอื่นเพิ่มเติมอีก สามารถดาวน์โหลดส่วนเสริมได้ที่ WonderCMS SummerNote editor
  • [Modern settings] เป็นส่วนเสริมที่ทดแทนหน้าจอการปรับแต่งเว็บไซต์ โดยทำเป็นเมนูลอย และแยกส่วนการจัดการออกเป็นสัดส่วนชัดเจนขึ้น สามารถดาวน์โหลดส่วนเสริมได้ที่ WonderCMS Modern settings

Retrieved from "http://www.rmuti.ac.th/user/prakai/w/index.php?title=WonderCMS:_Overview&oldid=109458"
  • Creative Commons Zero (Public Domain)
  • Powered by MediaWiki
MediaWiki spam blocked by CleanTalk.