#10 Dynamic Website Development

Dynamic Website Development

รูปแบบของเว็บไซต์แบ่งได้เป็น 2 รูปแบบหลักๆ คือ

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 เขียน เป็นต้น

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

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  เหมือนกันค่ะ ^^

อ้างอิงข้อมูจาก   http://www.enjoyday.net/static-dynamic-wesite.html
                         http://www.enjoyday.net/web-programming-languages.html