ปัจจุบันมีเว็บไซต์เกิดขึ้นใหม่มากมาย เนื่องจากผู้สร้างเว็บสมัยนี้ไม่จำเป็นต้องเรียนรู้การเขียนโปรแกรมภาษา HTML หรือภาษา script ต่างๆ เช่น PHP, ASP, JavaScript เหมือนสมัยก่อน ก็สามารถใช้ Web CMS ในการสร้างเว็บไซต์ขึ้นได้อย่างง่ายดาย โดยใช้เวลาไม่กี่นาที แถมหน้าตาเว็บที่ได้ก็ยังเหมือนมืออาชีพทำอีกด้วย !!

.

Web CMS คืออะไร ?

Web CMS (Web Content Management System) คือ software ระบบจัดการเนื้อหาเว็บไซต์ หรือ เว็บไซต์สำเร็จรูป (ซึ่งเป็นคำเรียกให้มือใหม่เข้าใจง่าย) ถูกออกแบบมาให้ใช้งานได้ง่าย ตั้งแต่การติดตั้ง การสร้างและการจัดการดูแลเนื้อหา เหมาะสำหรับผู้ที่ไม่มีพื้นฐานด้านการเขียนโปรแกรม (หรือจะมี ก็ไม่ว่ากันค่ะ)

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

สำหรับหน้าตาของ Web CMS เกิดจากการใช้ไฟล์ Template ที่สร้างด้วย HTML และภาษา Script อื่นๆ ซึ่งหลังจากติดตั้ง Web CMS แล้ว หากหน้าตาที่ได้มาไม่ถูกใจ เราก็สามารถที่จะหา Template ตัวอื่นมาเปลี่ยนใหม่ได้ วิธีการก็ไม่ยุ่งยากอะไร

ส่วนการเขียนเนื้อหา ก็ทำง่ายๆ คล้ายการพิมพ์งานบน MS Word เลยค่ะ

นอกจากนี้ เรายังสามารถเพิ่มความสามารถใหม่ๆ เข้าไปได้อีก ด้วยการติดตั้ง Plugin หรือ Module เพิ่มเติม

.

Web CMS มีทั้งที่ต้องเสียเงินซื้อ และแบบ Open Source ซึ่งฟรี

มาดูกันว่า CMS ตัวไหนที่ได้รับความนิยมในบ้านเรา แบ่งตามการจัดการเนื้อหา

• เว็บไซต์ที่นำเสนอเนื้อหา ที่นิยมใช้กัน ได้แก่ Joomla!, PHP-Nuke  และ Drupal
• เว็บบล็อก (Blog)  ได้แก่ b2evolution, ที่ได้รับความนิยมอย่างมากก็คือ WordPress (ที่ enjoyday ก็ใช้ตัวนี้ค่ะ)
• เว็บอีคอมเมิร์ซ (e-Commerce) สำหรับเปิดร้านค้าออนไลน์เพื่อขายสินค้าหรือบริการผ่านเว็บไซต์ ที่จะต้องมีระบบตระกร้าสินค้า CMS ที่ใช้กัน ได้แก่ phpShop, osCommerce และ Zen cart
• เว็บ Gallery ก็จะใช้ Coppermine
• กระดานข่าว (Webborad) ที่กำลังนิยมอย่างมากในปัจจุบันก็ SMF (Simple Machines Forum), phpBB และ Discuss ซึ่งกำลังมาแรง ลูกเล่นเยอะ แต่ก็กินทรัพยากรเครื่องค่อนข้างมาก ถ้ามีคนเข้าจำนวนมาก ส่วน vBulletin, IPB (Invision Power Board) ปัจจุบันนี้ไม่ฟรีแล้ว

ก่อนเลือกใช้ CMS ตัวไหนก็ให้ดูวัตถุประสงค์ของเว็บไซต์เราก่อนว่าจะเหมาะกับการใช้ CMS ตัวไหน ลองศึกษาวิธีการติดตั้ง การใช้งาน ดูก่อน

ศึกษาเพิ่มเติมที่ได้ที่นี่เลยค่ะ http://www.cmsthailand.com

1. การสร้าง Blog โดยใช้โปรแกรมเว็บสำเร็จรูป CMS : WordPress
ตัวอย่างเว็บ Blog : enjoyday.net นี่แหละค่ะ
« บทความเรื่อง การสร้าง Blog ด้วย WordPress »

2. การสร้างเว็บไซต์ โดยใช้โปรแกรมเว็บสำเร็จรูป CMS : Joomla
ตัวอย่างเว็บไซต์ : enjoychinese.net เป็นเว็บสอนภาษาจีน (อีกเว็บไซต์หนึ่งของผู้เขียนเองค่ะ)
« บทความเรื่อง การสร้างเว็บไซต์ด้วย Joomla! »

3. การสร้างเว็บไซต์แบบเขียนหน้าเว็บเพจเองโดยใช้ HTML, CSS, XHTML
แบบนี้จะเหมาะกับเว็บไซต์ที่มีจำนวนหน้าเว็บเพจไม่มาก ที่ไม่มีการเปลี่ยนแปลงบ่อยๆ

ตัวอย่างเว็บไซต์ #1 : เว็บไซต์ดารา ที่นำเสนอข้อมูลไม่กี่หน้า และเพิ่มส่วน Dynamic ด้วยกระดานข่าว (Webboard) ให้ Fanclub ได้พูดคุยกัน
(อยู่ระหว่างการจัดทำบทความ)

ตัวอย่างเว็บไซต์ #2 : รู้จักการนำ Website Template มาใช้
(อยู่ระหว่างการจัดทำบทความ)

4. การสร้างเว็บขายสินค้าออนไลน์
สำหรับการสร้างเว็บขายสินค้าออนไลน์ สามารถสมัครฟรีกับเว็บ e-marketplace ทั้งหลาย เช่น tarad.com, weloveshopping.com หรือถ้าสนใจจะทำเว็บไซต์เอง สามารถหา software ประเภท Open source ที่แจกฟรีมาใช้งาน ลองเข้าไปอ่านในหัวข้อ
« บทความเรื่อง ร้านขายสินค้าออนไลน์ »

1. โปรแกรมสำหรับพัฒนาเขียนเว็บเพจ สำหรับตัวที่แนะนำคือ EditPlus กับ Adobe Dreamweaver

กรณีที่เราออกแบบเว็บไซต์และเขียนเว็บเพจแต่ละหน้าเอง แนะนำให้ใช้ Adobe Dreamweaver ค่ะ

ก่อนใช้งานโปรแกรม Adobe Dreamweaver เราจะต้องมีความรู้พื้นฐานภาษา HTML ก่อนนะคะ ไม่งั้นงงแย่

เว็บไซต์ที่สอนการใช้งานโปรแกรม Adobe Dreamweaver CS3 (ณ ตอนนี้ โปรแกรม Adobe มาถึงเวอร์ชั่น CS4 แล้วค่ะ) ลองเข้าไปศึกษาได้ค่ะ
http://www.bloggang.com/viewdiary.php?id=tutorcat&month=12-2007&date=12&group=1&gblog=1
http://www.devteen.com/2009/02/20/dream-site/

ส่วนกรณีที่เราใช้โปรแกรมเว็บไซต์สำเร็จรูปอื่นๆ เช่น WordPress, Joomla ที่จะต้องมีการแก้ไขไฟล์บางไฟล์ และเราไม่มีความรู้ทางการเขียนโปรแกรมเลย
อาจจะแค่โปรแกรม Text Editor ง่ายๆ อย่าง EditPlus เปิดโปรแกรมเร็วดี ไม่หนักเครื่องด้วยค่ะ

download โปรแกรม EditPlus ที่นี่
http://www.editplus.com

2. โปรแกรมสร้างและตกแต่งภาพ หนีไม่พ้นโปรแกรมยอดนิยมอย่าง Adobe Photoshop

เว็บไซต์ที่สอนการใช้งานโปรแกรม Photoshop
http://www.fxmodify.com (สอนเป็น Video)
http://www.gururu.ioakhost.com/

3. โปรแกรม Upload ไฟล์ข้อมูลจากเครื่องคอมพิวเตอร์ของเราไปยังเครื่อง Server แนะนำ FileZilla, WS_FTP

download โปรแกรม FileZilla ที่นี่
http://filezilla-project.org

เตรียมไว้้ให้พร้อมเลยนะคะ เดี๋ยวเราจะต้องใช้โปรแกรมเหล่านี้กันแล้วในหัวข้อต่อไป

ภาษาโปรแกรมที่ใช้ในการพัฒนาเว็บไซต์ โดยพื้นฐาน ได้แก่

1. HTML (ย่อมาจาก Hyper Text Markup Language)
เป็นภาษาที่ใช้สำหรับสร้างเว็บเพจ มีโครงสร้างประกอบไปด้วย tag และ attribute ต่างๆ ที่ใช้ในการควบคุมการแสดงผลของข้อความ รูปภาพ หรือวัตถุอื่น ๆ     ภาษา HTML นั้นเป็นภาษาประเภท Markup ไม่จัดเป็นภาษาประเภท Programming  สามารถที่จะเรียนรู้ได้ง่าย

2. CSS (ย่อมาจาก Cascading Style Sheets)
เป็นภาษาที่มีรูปแบบการเขียน Syntax ที่เฉพาะ ถูกกำหนดขึ้นเพื่อใช้เสริมภาษา HTML ให้สามารถจัดรูปแบบการแสดงผลให้กับเอกสาร HTML ได้สมบูรณ์แบบมากขึ้น

3. XHTML (ย่อมาจาก Extensible HyperText Markup Language)
เป็นมาตรฐานใหม่ของ HTML คำสั่งต่างๆนั้นก็ยังเหมือนกับ HTML แต่จะมีความเข้มงวดในเรื่องโครงสร้างภาษามากกว่า และมีการตัด tag และ attribute ที่ล้าสมัยออกไป

ก่อนจะลงมือเขียนเว็บเพจ ขอให้มีความรู้ความเข้าใจในภาษาพื้นฐานเหล่านี้ก่อน โดยศึกษาได้จากบทเรียนออนไลน์ของ enjoyday.net
- เรียนรู้ HTML
- เรียนรู้ CSS
- เรียนรู้ XHTML

ถึงแม้ว่าเราจะใช้ Software เว็บไซต์สำเร็จรูป (Web CMS) ในการสร้างเว็บไซต์หรือบล็อก เช่น WordPress,  Joomla ก็ตาม    HTML และ CSS นี้จะเป็นพื้นฐานให้เราแก้ไข code และปรับแต่งหน้าตาเว็บไซต์ให้ถูกใจเราได้ค่ะ

.

นอกจากภาษาพื้นฐาน HTML/XHTML และ CSS  ในข้างต้นที่ไม่ใช่ภาษาสำหรับเขียนโปรแกรมแล้ว  เราอาจจะเคยได้ยินภาษา JavaScript, ASP, ASP.NET, PHP,JSP และอื่นๆ   ภาษาเหล่านี้เป็นภาษา Script ที่นิยมใช้ในการสร้างเว็บเพจค่ะ

คค

ภาษา Script ที่ใช้ในการสร้างเว็บเพจ แบ่งได้เป็น

1) Server-Side Script เช่น PHP, ASP, JSP, CGI    เป็นภาษา script ที่ประมวลผลที่ฝั่ง Server แล้วส่งผลลัพธ์ไปแสดงผลที่ฝั่ง Client ผ่านโปรแกรมเว็บบราวเซอร์ เช่น IE, Firefox

2) Client-Side Script เช่น JavaScript, VBScript, JScript   เป็นภาษา script ที่ประมวลผลบนเครื่องคอมพิวเตอร์ของผู้เยี่ยมชมเว็บไซต์ โดยใช้โปรแกรมเว็บเบราเซอร์  ซึ่งจะช่วยแบ่งเบาการทำงานให้กับเครื่อง Web Server ได้

ในกรณีที่ต้องการให้แอพพลิเคชันทำงานร่วมกันกับแอพพลิเคชันอื่น เช่น ฐานข้อมูล  เราจะต้องใช้ Server-Side Script  เขียนคำสั่งติดต่อกับฐานข้อมูล  โดยผู้ชมเว็บจะไม่สามารถดูคำสั่ง ( Source Code) ของ Server-Side Script เหล่านั้นได้

ต่างจากการเขียนคำสั่งแบบ Client-Side Script  ที่ผู้ชมเว็บสามารถดูคำสั่งที่เขียนด้วย Client-Side Script รวมถึง HTML, CSS  ของหน้าเว็บเพจนั้นได้  ด้วยการคลิกเมาส์ขวาบนหน้าเว็บเพจนั้นๆ และเลือกคำสั่ง View Source หรือ View Page Source ในโปรแกรมเว็บเบราเซอร์

.

ถ้าอ่านคำอธิบาย แล้วไม่เข้าใจ ???  ก็ยังไม่ต้องไปสนใจมันค่ะ

แล้วมันต้องใช้มั้ยล่ะ ?
ตอบตามตรง… เว็บไซต์ส่วนใหญ่ เค้าใช้กันทั้งนั้นแหละค่ะ
แต่….เราไม่จำเป็นต้องเขียนภาษา Script เหล่านี้เองก็ได้ ฟังแล้วน่าจะเบาใจขึ้นมาแล้วนะคะ

แล้วภาษา Script เหล่านี้ใช้ตอนไหนบ้าง ?
ใช้ในกรณีที่เว็บเรามีการทำงานที่เกี่ยวข้องกับฐานข้อมูล เช่น สมุดเยี่ยม, กระดานข่าว (Webboard), ระบบสมาชิก, ระบบตระกร้าสินค้า และอื่นๆ

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

โดยทั่วไปเจ้าเว็บไซต์สำเร็จรูปที่เราจะนำมาใช้นี้ ถูกพัฒนามาจากภาษา Script ไม่ตัวใดก็ตัวหนึ่ง  ส่วนใหญ่จะเป็น PHP เพราะเป็นภาษา Script แบบ Open Source  เหมือนกันค่ะ ^^

1. Static Website

หมายถึง เว็บไซต์ที่สร้างด้วยภาษา HTML ธรรมดา และบันทึกเป็นไฟล์นามสกุล .html    เนื้อหาข้อความ รูปภาพในหน้าเว็บเพจนั้นจะเป็นไปตามที่เราเขียนกำหนดไว้

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

Static Website เหมาะกับเว็บไซต์ที่มีขนาดไม่ใหญ่ จำนวนหน้าเว็บเพจไม่มาก ไม่มีการเปลี่ยนแปลงข้อมูลบ่อยๆ  และไม่มีการติดต่อฐานข้อมูล

ถ้าเราจะสร้างเว็บรูปแบบนี้ สามารถทำได้ไม่ยาก โดยต้องศึกษาเรื่องการเขียนเว็บเพจด้วย HTML ก่อน

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

ส่วนข้อเสีย ก็คือ การแก้ไขเปลี่ยนแปลงยุ่งยาก จะต้องแก้ไขกับไฟล์หน้าเว็บเพจนั้นๆ เมื่อแก้ไขแล้ว ก็ต้อง Upload ไฟล์นั้นขึ้นไป Web Server ใหม่ทุกครั้ง  และเว็บรูปแบบนี้จะไม่สามารถใช้งานฐานข้อมูลได้

.

2. Dynamic Website

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

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

เว็บไซต์รูปแบบนี้จะถูกสร้างด้วยภาษา Script แบบ Server Side Script เช่น PHP, ASP, ASP.Net, JSP และอื่นๆ  ไฟล์เอกสารที่ไ้ด้จะมีนามสกุล .php, .asp เป็นต้น

และมักจะมีการติดต่อกับฐานข้อมูลเพื่อบันทึกข้อมูลลงในฐานข้อมูล หรือนำข้อมูลจากฐานข้อมูลขึ้นมาแสดงผลเป็นหน้าเว็บเพจ

ส่วนการทำงานของเว็บไซต์รูปแบบนี้ จะต่างจากแบบ Static Website   โดยเมื่อมีผู้ชมเรียกดูหน้าเว็บเพจ  ไฟล์หน้าเว็บเพจนั้นจะถูกแปลและ execute คำสั่งโดยตัว Interpreter ที่ฝั่ง Server ใ้ห้อยู่ในรูปแบบเอกสาร HTML ก่อน จึงส่งกลับให้ Web Server  เพื่อส่งต่อไปให้โปรแกรมเว็บเบราเซอร์ของผู้ใช้งานต่อไป

การสร้างเว็บไซต์รูปแบบนี้ ต้องอาศัยความรู้ในการเขียนโปรแกรมมากกว่าแบบแรกมาก  นอกจากจะต้องมีความรู้พื้นฐาน HTML แล้ว ยังต้องเขียนภาษา Server Side Script เป็นอย่างน้อย 1 ภาษา ต้องรู้เรื่องการจัดการฐานข้อมูล ต้องเขียน SQL เืพื่อจัดการกับข้อมูลในฐานข้อมูลได้  และถ้าอยากให้ระบบงานทำงานได้อย่างรวดเร็วไม่ต้อง Refresh หน้าจอบ่อยๆ ยังต้องรู้เรื่อง AJAX อีกด้วย

.

^ ถ้าอ่านข้อความข้างบนแล้วงง  ก็ไม่ต้องซีเรียสนะคะ …

สำหรับผู้อ่านที่ไม่ได้สนใจจะทำงานด้านนี้ ก็ไม่จำเป็นต้องเรียนรู้การเขียนภาษา Script เหล่านี้  เอาเวลาไปเตรียมเนื้อหา และโปรโมทเว็บไซต์ให้ออกดอกออกผลดีกว่า

.

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

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

เราสามารถที่จะสร้างเว็บไซต์โดยให้บางหน้าเว็บเพจเป็นแบบ Static ที่ใช้ HTML ธรรมดา เขียน และให้บางหน้าสร้างเป็นแบบ Dynamic โดยใช้ภาษา Script ก็ได้ค่ะ  ตัวอย่างเช่น บทเรียนสอน HTML, CSS, XHTML ของ enjoyday จะใช้ HTML ธรรมดาๆ ส่วนหน้าอภิธานศัพท์ ผู้เขียนอยากจะเพิ่มหรือแก้ไขคำศัพท์ได้ง่ายๆ และให้มีระบบสืบค้นด้วย จึงใช้ PHP เขียน เป็นต้น

แต่ก่อนที่จะลงมือสร้างเว็บไซต์ อยากให้รู้จักกับหัวข้อต่างๆ ต่อไปนี้ก่อนค่ะ
4.1 รูปแบบของเว็บไซต์
4.2 เรียนรู้ภาษาโปรแกรม ที่ใช้ในการสร้างเว็บไซต์
4.3 โปรแกรมช่วยงาน ที่ใช้ในการสร้างเว็บไซต์
4.4 ลงมือสร้างเว็บไซต์ (Case Study)

คลิกอ่านเรื่องถัดไป ที่ด้านล่างต่อเลยค่ะ