#10 Content Management System

Content Management System

>> Content Management System คืออะไร?

ระบบการจัดการเนื้อหาของเว็บไซต์ (Content Management System: CMS) คือ ระบบที่พัฒนา คิดค้นขึ้นมาเพื่อช่วยลดทรัพยากรในการพัฒนา(Development) และบริหาร(Management)เว็บไซต์ ไม่ว่าจะเป็นเรื่องของกำลังคน ระยะเวลา และเงินทอง ที่ใช้ในการสร้างและควบคุมดูแลเว็บไซต์  โดยส่วนใหญ่แล้ว มักจะนำเอา ภาษาสคริปต์(Script languages) ต่างๆมาใช้ เพื่อให้วิธีการทำงานเป็นแบบอัตโนมัติ ไม่ว่าจะเป็น PHP, Perl, ASP, Python หรือภาษาอื่นๆ ซึ่งมักต้องใช้ควบคู่กันกับโปรแกรม Web Server(เช่น Apache) และ Database Server(เช่น MySQL)

>> ลักษณะการทำงานของ Content Management System

การทำงานของ CMS เป็นระบบที่แบ่งแยกการจัดการในการทำงานระหว่าง เนื้อหา(Content) ออกจากการ ออกแบบ(Design) โดยการออกแบบเว็บเพจจะถูกจัดเก็บไว้ใน Templates หรือ Themes ในขณะที่เนื้อหาจะถูกจัดเก็บไว้ในฐานข้อมูลหรือไฟล์ เมื่อใดที่มีการใช้งานก็จะมีการทำงานร่วมกันระหว่าง 2 ส่วน เพื่อสร้างเว็บเพจขึ้นมา โดยเนื้อหาอาจจะประกอบไปด้วยหลายๆส่วนประกอบ เช่น Sidebar หรือ Blocks, Navigation bar หรือ Main menu, Title bar หรือ Top menu bar เป็นต้น

>> องค์ประกอบของ Content Management System

            ระบบบริหารจัดการเนื้อหาเว็บไซต์ หรือ CMS ใดๆ ก็ตาม อย่างน้อยจะต้องมีองค์ประกอบอยู่ 3 ส่วนด้วยกัน จึงจะทำหน้าที่เป็น CMS ได้อย่างสมบูรณ์ นั่นคือ

* เครื่องมือจัดการเนื้อหา (Content Management Application : CMA)

มีหน้าที่จัดการเนื้อหาทุกชนิดบนหน้าเว็บเพจไปตลอดอายุของเนื้อหานั้น เริ่มตั้งแต่การสร้าง การรักษา และการลบทิ้งออกไปจากที่จัดเก็บข้อมูล ซึ่งอาจจะเป็นในไฟล์ฐานข้อมูล หรือแยกออกมาเป็นไฟล์ต่างหาก อย่างเช่น รูปประกอบต่างๆ ก็ได้ กระบวนการจัดการเนื้อหาโดยธรรมชาติแล้วจะอยู่ในแบบที่เป็นลำดับขั้นตอนและสำเร็จลงได้ด้วยการทำงานตามลำดับงาน (Workflow) ด้วยเช่นกัน ในส่วนของ CMA ยังช่วยให้นักเขียนของเว็บไซต์ที่ไม่มีความรู้ในภาษา HTML ภาษาสคริปต์ หรือโครงสร้างของเนื้อหาเว็บไซต์ สามารถสร้างเนื้อหาได้โดยง่าย ช่วยให้งานในการสร้างและดูแลเนื้อหาของเว็บไซต์ไม่ต้องการความรู้ระดับของเว็บมาสเตอร์อีกต่อไป การดูแลเนื้อหาของเว็บไซต์ในเวลาหนึ่งๆ อาจจะมีผู้ดูแลเนื้อหาเข้ามาทำงานพร้อมๆ กันหลายๆ คนก็ได้

* เครื่องมือจัดการข้อมูลของเนื้อหา (Metacontent Management Application : MMA)

ข้อมูลของเนื้อหา (Metacontent) หรือข้อมูลของข้อมูล (Metadata) เป็นข้อมูลที่ใช้อธิบายข้อมูลอีกทีหนึ่ง เช่นข้อมูลที่อธิบายว่า “เนื้อหา” ชิ้นหนึ่งถูกสร้างขึ้นเมื่อไหร่ โดยใคร ถูกจัดเก็บไว้ที่ไหน ถูกใช้งานบนหน้าเว็บเพจไหน และจัดวางบนหน้าเว็บเพจนั้นอย่างไร เป็นต้น การจัดการข้อมูลของเนื้อหายังช่วยให้การควบคุมเวอร์ชั่นของชิ้นส่วนเนื้อหาต่างๆ บนเว็บไซต์ เป็นเรื่องที่ง่ายขึ้นกว่าเดิมอีกด้วย MMA เป็นแอปพลิเคชั่นที่ใช้สำหรับจัดการวงจรทั้งหมดของ Metacontent เช่นเดียวกันกับ CMA ที่จัดการกับวงจรชีวิตของเนื้อหาเว็บไซต์ (Content) ทั้งหมดนั้นเอง

* เครื่องมือนำเสนอเนื้อหา (Content Delevery Application : CDA)

มีหน้าที่ดึงชิ้นส่วนเนื้อหา ออกมาจากที่เก็บ และจัดเรียงลงบนหน้าเว็บเพจด้วยรายละเอียดจาก MMA เพื่อนำเสนอต่อผู้เข้าชมเว็บไซต์ โดยส่วนใหญ่แล้วผู้ใช้งาน CMS สร้างเว็บไซต์มักจะไม่ค่อยได้ยุ่งเกี่ยวกับ CDA มากนัก นอกจากขั้นตอนการติดตั้งและการกำหนดรูปแบบการแสดงผล หลังจากนั้นก็ปล่อยให้ CDA ทำงานไปตามกระบวนการ นั้นคือ ข้อมูลของเนื้อหา เป็นสิ่งที่บอกต่อ CDA ว่า อะไรคือสิ่งที่จะต้องนำมาแสดง และถูกแสดงอย่างไร ไม่ว่าจะเป็น การจัดวาง สี ช่องว่าง ฟอนต์ ลิงก์ และอื่นๆ ซึ่งจะเห็นได้ว่า ผู้ดูแลสามารถเปลี่ยนแปลงคุณลักษณะได้อย่างยืดหยุ่น โดยการเปลี่ยนเฉพาะในส่วนของข้อมูลเนื้อหา ไม่ต้องไปปรับเปลี่ยนที่ตั้วเนื้อหาโดยตรง คุณสมบัติข้อนี้ทำให้เว็บไซต์สามารถเปลี่ยนดีไซน์ทั้งหมดได้ทั้งกับเนื้อหาที่สร้างมานานแล้ว และกับเนื้อหาที่กำลังจะสร้างขึ้นใหม่ โดยไม่กระทบต่อการทำงานทั้งหมดของเว็บไซต์

>> ข้อดีของ Content Management System

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

>> ข้อเสียของ Content Management System

• ในกรณีที่ผู้ใช้ต้องการออกแบบทีม (หน้าตาของเว็บ) เอง จะต้องใช้ความรู้มากกว่าปรกติ เนื้องจาก CMS มีหลายๆระบบมารวมกันทำให้เกิดความยุ่งยาก สำหรับผู้ที่ไม่มีความรู้
• ผู้ใช้จะต้องศึกษาระบบ CMS ที่ผู้พัฒนาสร้างขึ้นมา เช่นจะต้องใส่ข้อความลงตรงไหน จะต้องแทรกภาพอย่างไร ซึ่งจะลำบากเพียงแค่ช่วงแรกเท่านั้น
• ในการใช้งานจริงนั้นจะมีความยุ่งยากในการ Set up ครั้งแรกกับ Web server แต่ปัจจุบันก็มีผู้บริการ Web server มากมายที่เสนอลงและ Set up ระบบ CMS ให้ฟรีๆโดยไม่เสียค่าใช้จ่าย

 เมื่อรวมๆข้อดีและข้อเสียดูแล้ว ก็ยังเห็นได้ว่า CMS นั้นก็เป็นระบบที่น่าใช้งานอยู่ดี

>> การประยุกต์ใช้ Content Management System

ระบบ CMS สามารถนำมาประยุกต์ในงานต่างๆ หลากหลาย ตัวอย่างการนำซอฟต์แวร์ CMS มา

ประยุกต์ใช้งาน อาทิเช่น

• การนำ CMS มาช่วยในการสร้างเว็บไซต์สถาบันการศึกษา ธุรกิจบันเทิง หนังสือพิมพ์ การเงิน การธนาคาร หุ้นและการลงทุน อสังหาริมทรัพย์ งานบุคคล งานประมูล สถานที่ท่องเที่ยว งานให้บริการลูกค้า
• การนำ CMS มาช่วยในหน่วยงานของรัฐบาล อาทิ งานข่าว งานประชาสัมพันธ์ การนำเสนองานต่าง ๆขององค์กร
• การนำ CMS มาช่วยในการสร้างเว็บไซต์ส่วนตัว ชมรม สมาคม สมาพันธ์ โดยวิธีการแบ่งงานกันทำ เป็นส่วนๆ ทำให้เกิดความสามัคคี ทำงานมีการทำงานที่เป็นทีมเวิร์คมากขึ้น
• การนำ CMS มาช่วยในการสร้างเว็บไซต์สำหรับธุรกิจ เอสเอ็มอี โดยเฉพาะสินค้า หนึ่งตำบลหนึ่งผลิตภัณฑ์ หรือ OTOP ที่กำลังเป็นที่นิยมอยู่ในขณะนี้
• การนำ CMS มาใช้แทนโปรแกรมลิขสิทธิ์อื่น ๆ เพื่อประหยัดค่าใช้จ่ายและง่ายต่อการพัฒนา
• การนำ CMS มาช่วยในการทำ เว็บไซต์อินทราเน็ต ซึ่งเป็นเว็บไซต์ที่ใช้ภายในองค์กร

>> ซอฟท์แวร์ CMS มีอะไรบ้าง?

Drupal - กล่าวได้ว่าเป็น CMS ตัวแรกที่ตัวเองเป็น framework และมีเอกสารประกอบยอดเยี่ยม ทำให้เป็นที่นิยมในหมู่นักพัฒนามาเป็นเวลานาน และได้มีการทำโมเดลทางธุรกิจใหม่ โดยแยกส่วนพัฒนาส่วนที่ต้องจ่ายตังค์ ซึ่งคล้ายๆ กับ Mambo สมัยก่อน เวลาเท่านั้นจะพิสูจน์ว่าโมเดลนี้จะประสบความสำเร็จหรือไม่ เวอร์ชันที่มีการปรับเปลี่ยนเยอะคือเวอร์ชันต่อไปคือ 7 เวอร์ชันปัจจุบันคือ 6.2 ซอฟท์แวร์นี้เหมาะสำหรับ เว็บไซต์ที่ซับซ้อนนั้นมีความยุ่งยากมากกว่า WordPress และ Joomla โดยเฉพาะอย่างยิ่งเพราะว่ามันมี options จำนวนมากให้เลือก เพราะว่ามันสร้างขึ้นให้มีความยืดหยุ่นสูง จะต้องคิดอย่างรอบคอบ อย่างมีความเข้าใจอย่างเพียงพอ จึงจะสามารถปรับแต่งได้อย่างถูกต้อง

Joomla! – ในเวอร์ชัน 1.5 ตัว Joomla! ได้พัฒนาตัวเองเป็น framework ซึ่งสร้างความแตกต่างระหว่าง Mambo กับ Joomla! อย่างชัดเจน เวอร์ชันที่มีการปรับเปลี่ยนเยอะคือเวอร์ชัน 2.0 โดยเวอร์ชันต่อไปคือ 1.6 เวอร์ชันปัจจุบันคือ 1.5.3

WordPress เป็น Open Source CMS ตัวหนึ่งที่มุ่งเน้นในเรื่องของการทำ Web Blog พัฒนาด้วยภาษา PHP และใช้งานร่วมกับฐานข้อมูล MySQL ภายในสัญญาอนุญาตใช้งานแบบ GNU (General Public License) WordPress มีการใช้งานที่ง่าย มีความยืดหยุ่นสูง เป็นที่นิยมของบล็อกเกอร์ทั่วโลกรวมทั้งชาวไทยด้วยเช่นกัน มีผู้พัฒนาปลั๊กอิน และธีม (รูปแบบการแสดงผล) ให้เลือกใช้แบบฟรี ๆ อยู่เป็นจำนวนมาก มีระบบการทำงานตามมาตรฐาน W3C เช่นเดียวกับ Open Source CMS อื่น ๆ WordPress เป็น CMS ตรงไปตรงมา เรียนรู้ได้ง่ายและรวดเร็วที่สุด ไม่ว่าจะเป็นการสร้างธีมขึ้นมาใหม่ หรือเพิ่มความสามารถอื่นๆที่ระบบเอื้ออำนวยให้ และง่ายที่เราจะหา add-on modules ที่จะเพิ่มฟีเจอร์ให้กับเว็บไซต์ “WordPress เหมาะสำหรับเว็บไซต์อย่างง่าย ที่ดูดี และไม่ต้องการฟีเจอร์อะไรเป็นพิเศษ”

 Mambo - ถือเป็น CMS ต้นแบบของ CMS ดัง ๆ หลายตัว เนื่องจากถูกพัฒนามานานแล้วกว่า 8 ปี มีผู้ดาวน์โหลดไปใช้แล้วกว่า 7 ล้านดาวน์โหลด มีความสามารถและมีความนิยมระดับที่เคยได้รับรางวัล Award-wining content management system มาแล้ว ซึ่งทุกคนสามารถนำ Mambo มาใช้ทำเว็บไซต์ได้จนถึงพัฒนาเป็น Web Application ครอบคลุมตั้งแต่การทำเว็บไซต์บริษัท/องค์กร เว็บไซต์เพื่อการขายสินค้า เว็บท่า เว็บชุมนุม และระบบอินทราเน็ตภายในองค์กร ทั้งนี้ Mambo สามารถนำไปใช้ได้ตั้งแต่เว็บไซต์ส่วนตัว เว็บไซต์สำหรับธุรกิจขนาดเล็กไปถึงเว็บไซต์องค์กรขนาดใหญ่ ซึ่งความสามารถของ Mambo ที่มีให้นั้นเพียงพอต่อการนำไปในหลายรูปแบบสำหรับผู้ใช้ทุกระดับ Mambo ถูกพัฒนาขึ้นมาจากภาษร PHP สามารถเพิ่มโปรแกรมเสริมมาใช้ในเว็บของตนเองได้และยังนำไป พัฒนาต่อยอดในรูปแววต่าง ๆ ได้ไม่จำกัด เนื่องจากไม่มีค่าลิขสิทธิ์การใช้งานทางทีมพัฒนาได้มีการนำ CakePHP ซึ่งเป็น php framework อันโด่งดังมาเป็นฐานในการพัฒนาในเวอร์ชัน 5.0 โดยมีแนวความคิดว่าจะทำให้ทีมพัฒนาสามารถพุ่งความสนใจในการพัฒนาความสามารถของส่วนหลัก ได้อย่างเต็มที่โดยไม่ต้องเสียเวลาไปดูส่วน framework ซึ่งเป็นแนวความคิดที่ดีมาก แต่คงต้องใช้เวลาอีกนานเพราะเวอร์ชันปัจจุบันคือ 4.6.4 เวอร์ชันถัดไปคือ 4.7 และ 4.8

Typo3 - ทั้ง ๆ ที่ตัว Typo3 เป็น framework ที่มีความสามารถสูงมากอยู่แล้ว แต่เพื่ออนาคตที่ดีกว่า ทางทีมพัฒนาได้มีการแยกส่วนการพัฒนาเป็น 3 ส่วน คือพัฒนา Typo3 4, Typo3 5 และ Flow3 ซึ่งเป็น php framwork ซึ่งเป็นอิสระกับตัว Typo3 ซึ่งแนวความคิดนี้คล้าย ๆ Mambo แต่ทาง Mambo เลือก framework ที่มีความสามารถสูงที่มีอยู่แล้ว แต่ทาง Typo3 เลือกที่จะพัฒนาขึ้นมาเองใหม่ เพราะ framework ที่มีอยู่ในปัจจุบันยังมีข้อจำกัดในการนำมาเขียนเป็น CMS หมู่เทพเลยเลือกที่จะเขียนใหม่มันซะเลย และข้อดีของมันที่คาดว่าจะได้อย่างชัดเจนคือทำให้การติดตั้งง่ายขึ้น (ซึ่งแค่นี้ก็พอแล้ว เพราะ Typo3 มีข้อเสียข้อเดียว คือใช้ยาก) ซึ่งเวอร์ชันที่มีการปรับเปลี่ยนคือเวอร์ชัน 5 โดยกำหนดเวลาออกคือ 8/10/2552 เวอร์ชันปัจจุบันคือ 4.2.1

Elgg เป็น Open Source Software ที่ใช้ในการสร้างเว็บไซต์แบบ Social Networking พัฒนาด้วยภาษา PHP ใช้ฐานข้อมูล MySQL เช่นเดียวกับ Open Source อื่น ๆ รองรับเทคโนโลยี OpenDD, OpenID และ OpenSocial ผู้ใช้งานหรือสมาชิกของเว็บไซต์ นะมีหน้าบริหารจัดการ Profile ของตัวเองรวมถึงสามารถบริหาร Web Blog, Forum, Photo Gallery และ File Repository เป็นต้น โดยสามารถตั้งค่าการเผยแพร่และให้สิทธิ์ในกาเข้าถึงข้อมูลของตนเองได้แต่ละส่วนได้ ทั้งนี้ Elgg สามารถนำมาประยุกต์ใช้กับระบบ Intranet เพื่อประโยชน์ในการสื่อสารภายในองค์กร

>> แหล่งอ้างอิง

http://www.marvelic.co.th/articles/5-content-management-system.html

http://www.hellomyweb.com/index.php/main/content/121

http://www.mindphp.com/modules.php?name=News&file=article&sid=51

http://student.nu.ac.th/supaporn/cms.htm

http://th.wikipedia.org/wiki/%E0%B8%A3%E0%B8%B0%E0%B8%9A%E0%B8%9A%E0%B8%88%E0%B8%B1%E0%B8%94%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B9%80%E0%B8%99%E0%B8%B7%E0%B9%89%E0%B8%AD%E0%B8%AB%E0%B8%B2

http://makhampeakfivekhan.wordpress.com/2009/07/27/%E0%B9%81%E0%B8%99%E0%B8%A7%E0%B8%97%E0%B8%B2%E0%B8%87%E0%B8%81%E0%B8%B2%E0%B8%A3%E0%B8%9E%E0%B8%B1%E0%B8%92%E0%B8%99%E0%B8%B2-website-%E0%B9%82%E0%B8%94%E0%B8%A2%E0%B9%83%E0%B8%8A%E0%B9%89-cms/

http://www.pongkorn.net/content-management-system

#10 AJAX Development

AJAX Development

AJAX คืออะไร ?

Ajax (Asynchronous JavaScript and XML) เป็นวิธีการสร้างโปรแกรมประยุกต์ปฏิสัมพันธ์สำหรับเว็บที่ประมวลผลคำขอของ ผู้ใช้ทันที Ajax รวมเครื่องมือโปรแกรมหลายอย่างรวมถึง JavaScript, dynamic HTML (DHTML), Extensible Markup Language (XML), cascading style sheets (CSS), the Document Object Model (DOM) และ Microsoft object, XMLHttpRequest โดย Ajax ยอมให้เนื้อหาบนเว็บเพจเพื่อปรับปรุงอย่างทันที เมื่อผู้ใช้ทำการกระทำ ต่างจาก HTTP request ซึ่งผู้ใช้ต้องคอยเพจใหม่เพื่อโหลดทั้งหมด ตัวอย่าง การไซต์พยากรณ์อากาศสามารถแสดงเงื่อนไขท้องถิ่นบนด้านหนึ่งของเพจ ปราศจากการล่าช้าหลังจากผู้ใช้พิมพ์รหัสไปรษณีย์
          Google Maps เป็นโปรแกรมประยุกต์ที่รู้จักกันดีที่ใช้ Ajax อินเตอร์เฟซนี้ยอมให้ผู้ใช้ที่เปลี่ยนมุมมองและควบคุมแผนที่ในเวลาจริง โปรแกรมประยุกต์ Ajax ไม่ต้องมีการติดตั้ง plug-in แต่ทำงานโดยตรงกับ browser เนื่องจากความมั่นทางเทคนิคกับ XMLHttpRequest โปรแกรมประยุกต์ก่อนหน้าที่ทำงานเฉพาะกับ Internet Explorer browser ของ Microsoft แต่ browser อื่นส่วนมากสนับสนุน Ajax

โปรแกรมประยุกต์ที่สร้างด้วย Ajax ใช้ engine ที่กระทำเป็นตัวกลางระหว่าง browser ของผู้ใช้กับแม่ข่ายที่กำลังขอสารสนเทศ แทนที่การโหลดเว็บเพจแบบดั้งเดิม browserของผู้ใช้โหลด Ajax engine ซึ่งแสดงเพจที่ผู้ใช้มองเห็น โดย engine นี้ยังคงทำงานอยู่เบื้องหลัง ด้วยการใช้ JavaScript ติอต่อกับ browser การนำเข้าของผู้ใช้หรือการคลิกบนเพจส่ง JavaScript เรียก Ajax engine ซึ่งสามารถตอบสนองในหลายกรณีอย่างทันที ถ้า engine ต้องการข้อมูลเพิ่ม จะขอจากแม่ข่าย ตามปกติใช้ XML ที่สามารถปรับปรุงเพจได้พร้อมกัน
          Ajax ไม่ใช่เทคโนโลยีที่เจ้าของหรือผลิตภัณฑ์แพ็คเกจ ผู้พัฒนาเว็บต้องใช้ JavaScript และ XML รวมกันเป็นเวลาหลายปี Jesse James Garrett จากบริษัทที่ปรึกษา Adaptive Path ได้รับเครดิตกับการตั้งชื่แ “Ajax” เป็นชื่อย่อที่อ้างถึงเทคโนโลยีเฉพาะที่เกี่ยวข้องกับวิธีการทำให้สำเร็จใน ปัจจุบัน

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

รูปจาก

http://www.adaptivepath.com/publications/essays/archives/000385.php

จากรูป ด้านซ้ายเป็นรูปการทำงานของ Browser เมื่อติดต่อกับ Web Server ตามปกติการทำงานก็มันก็อย่างที่เราเข้าใจกันคือ เมื่อเรา เรียก url ไป Browser จะทำการติดต่อกับ Web Server และ Web Server ทำการประมวลผลส่งค่าเป็น HTML, Image , CSS อะไรก็แล้วแต่กลับไปหา Browser นำไปแสดงผลจากหลักการดังกล่าวการพัฒนาให้หน้า Web แสดงผลแบบมีชีวิตชีวา เช่นการแสดงผลข้อมูลแบบ Realtime ไม่ว่าจะเป็นข้อมูลข่าวสารที่มีการเปลี่ยนแปลงอย่างทันด่วน ยกตัวอย่าง ราคาหุ้นมีการเปลี่ยนแปลงทุกวินาที หากการติดต่อแบบนี้ Browser ต้องเรียกขอข้อมูลใหม่กับ Web Server ทุกๆครั้งหลายๆท่านอาจจะบอกว่า ใน HTML ก็มี Tag ที่ว่าให้ใช้แล้วนั้นก็คือ

<meta http-equiv="refresh" content="5;URL=url"> ก็ใช่ แต่การใช้ Tag refresh นั้นเป็นการเปลี่ยนแปลงทั้งหน้าจอ
บางครั้งข้อมูลที่ต้องการเป็นข้อมูลแค่กรอบๆเดียวในหน้า web การ refresh ทั้งหน้าจึงไม่ใช่คำตอบที่ดี คราวนี้มาดูหลักการของ AJAX ทางด้านขวาบ้างสิ่งที่เราเห็นก็คือจากรูปจะมีสิ่งที่เรียกว่า AJAX Engine เข้ามาคั้นกลางเจ้า AJAX Engine

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

- ทำให้เราสามารถกำหนดได้ว่า เราอยากให้ tag html ก้อนนี้เปลี่ยนแปลงหน้าตาใหม่ทุกๆ 5 วินาที
- ทำให้เราเปลี่ยนแปลงข่าวสารใหม่ๆได้ตลอดเมื่อมีข้อมูลใหม่เข้ามา (โดยไม่ต้องเรียก Load หน้าใหม่)

จากรูปจะเห็นว่าสิ่งที่ส่งกลับมาให้ AJAX Engine นั้นจะเป็น XML Data ความจริงไม่จำเป็นก็ได้
ถ้าขี้เกียจตัดข้อมูลก็สามารถนำ HTML มาแปะแสดงก็ได้ ตามรูปเป็นแนวคิดเท่านั้นเอง

 

รูปจาก

http://www.adaptivepath.com/publications/essays/archives/000385.php

จากรูปเป็นการขยายความของคำว่า Asynchronous ให้เราพิจารณาว่าหาก Browser กับ Web Server มีการ synchronous ระบบดังกล่าวก็คือ

 Browser เรียก -> Web Server ตอบ -> Browser รับทราบ แสดงผล Browser

 เรียก -> Web Server ตอบ -> Browser รับทราบ แสดงผลไปเรื่อยๆ

 จะเห็นว่า Browser จะทำงานสัมพันธ์กับ Web Server เรียก -> ตอบ -> แสดงผล แต่กรณีที่ เป็น AJAX นั้น การ Asynchronous นั้นก็คือ

Browser เรียก-> AJAX เรียก -> Web Server ตอบ -> AJAX รับทราบ แสดงผล -> Browser รับทราบ

แสดงผล Browser ไม่เรียก -> AJAX เรียก -> Web Server ตอบ -> AJAX รับทราบ

 บอกว่าไม่ต้องแสดงผล -> Browser รับทราบไม่แสดงผล Browser ไม่เรียก -> AJAX

เรียก -> Web Server ตอบ -> AJAX รับทราบ แสดงผล -> Browser รับทราบ

 แสดงผลกล่าวคือคำว่า Asynchronous มันก็หน้าที่ของ AJAX ที่มาคั้นการไม่ให้ Browser และ Web Server ทำงานสัมพันธ์กันส่วนเหตุที่มีคำว่า XML มาด้วย เนื่องจากการเขียน Javascript แบบ AJAX นี้มีการเข้าไปเรียกใช้ Object ของ XMLHTTP เราจึงให้เกียรติใส่เข้าคำว่า XML ไปด้วย ซึ่งจริงๆแล้วข้อมูลอาจจะไม่จำเป็นต้องเป็น X ML ก็ได้พอเข้าใจแนวคิดรูปแรกแล้วจะกระจ่างในเรื่องต่อไป

 

คลิปวีดีโอ Training AJAX from BuyCDToday 

 

 

แนวทางการพัฒนา AJAX 

      

แบบจำลองการทำงานของเว็บแอพพลิเคชั่นแบบเดิม

 

 

รูปที่ 1.1 แบบจำลองการทำงานของเว็บแอพพลิเคชั่นแบบเดิม

           การทำงานของเว็บแอ ปพลิเคชั่นแบบเดิม (Classic Web Application) จะเริ่มจากผู้ใช้ (User) เปิดเว็บบราวเซอร์ (Web Brower) เช่น Internet Explorer(IE) หรือ Firefox แล้วร้องขอข้อมูลหรือ Web Page ที่เราต้องการโดยการพิมพ์ชื่อ ที่อยู่ หรือที่เราเรียกกันว่า "URL" เช่น www.ktpbook.com หรือ wwwgoogle.com เป็นต้น สำหรับ User ที่เปิด Web Broser ก็คือ ลูกค้า หรือ ผู้ใช้ ที่อยู่ทางฝั่งไคลเอนต์ (Client Side) จากนั้น URL ที่ถูกร้องขอจะถูกส่งผ่านอินเตอร์เน็ตไปยังฝั่งผู้ให้บริการ (Server Side) เมื่อผู้ให้บริการได้รับการร้องขอก็จะจัดการส่ง Web Page กลับมาให้ และทันทีที่ Server ส่ง Web Page มาให้ตามที่ User ร้องขอไป การติดต่อระหว่างฝั่ง Server และฝั่ง Client จะสิ้นสุดหรือขาดการติดต่อจากกันทันที (ภาษาเทคนิคเรียกว่า "Stateless" ดังนั้นเมื่อ User ต้องการข้อมูลหรือ Web Page ใหม่จาก Server เดิม ต้องเริ่มการติดต่อหรือร้องขอ URL ใหม่อีกครั้ง Server จะส่งหน้า Web Page ใหม่มาให้ จากนั้น Web Browser จะนำ Web Page ที่ได้มานั้นแสดงเป็นหน้าใหม่ ผลที่เกิดขึ้นคือ จอกระพริบ เนื่องจากมี Web Page ใหม่จึงต้องรีเฟรซ (Refresh) หน้าจอใหม่มีความล่าช้าเนื่องจากต้องรอการประมวลผลที่ฝั่ง Server ให้เสร็จก่อนแล้วจึงส่งผลลัพธ์ตอบกลับมาให้ User อีกทั้งข้อมูลที่ใช้ในการส่งแต่ละครั้งมีจำนวนมากทำให้ใช้แบนด์วิธ (Bandwidth) ค่อนข้างสูง ส่งผลให้การส่งข้อมูลเกิดความล่าช้าตามไปด้วย

 

แบบจำลองการทำงานของเว็บแอพพลิเคชั่นแบบ AJAX

 จากปัญหาที่เกิดขึ้นกับเว็บแอปพลิเคชั่นแบบเดิม จึงเกิดแนวคิดใหม่ที่นำมาใช้ในการแก้ปัญหาดังกล่าว นั่นคือ การใช้ AJAX โดยเว็บแอปพลิเคชั่นที่ใช้ AJAX สามารถลดการรีเฟรซของหน้าจอทำให้การแสดงผลมีความนุ่มนวล และเปลี่ยนรูปแบบเอกสารให้มีขนาดเล็กลง โดยจากเดิมที่เป็นการส่ง Web Page ทั้งหน้าที่มีข้อมูลรวมกันมากมาย (HTML + CSS Data ในรูปที่ 1.1) กลายมาเป็นเพียงข้อมูลชิ้นเล็กๆ (XML Data ในรูปที่ 1.2) ซึ่งใช้แบนด์วิธน้อยกว่าการส่งข้อมูลในเว็บแอปพลิเคชั่นแบบเดิม มีผลทำให้สามารถส่งข้อมูลได้เร็วขึ้น

 

 

รูปที่ 1.2 แบบจำลองการทำงานของเว็บแอพพลิเคชั่นแบบ AJAX

            จากรูปที่ 1.2 หัวใจสำคัญในการทำงานของ AJAX คือ "XMLHttpRequest Object" ซึ่งทำหน้าที่ติดต่อร้องขอข้อมูลจากฝั่ง Server โดยข้อมูลที่ร้องขอนั้นเป็นแค่ข้อมูลเล็กๆ ทาง Server จัดหาข้อมูลและตอบกลับมาในรูปแบบ XML Data จากนั้นเป็นหน้าที่ของ JavaScript ในการนำผลลัพธ์มาแสดงผลใน Web Page เดิมที่ปรากฎอยู่บน Web Browser การแสดงผลบนหน้าจอจะแสดงข้อมูลในช่องว่างหรือบางส่วนบนหน้าจอเท่านั้น ไม่ต้องรีเฟรซหน้าจอใหม่ อีกทั้งสามารถแสดผลข้อมูลใน Web Page ได้เร็วขึ้นเนื่องจากข้อมูลที่ส่งมาจากฝั่ง Server มีจำนวนน้อยไม่ต้องส่ง Web Page ทั้งหน้าทำหน้าใช้แบนด์วิธน้อยลง เช่น หาก User ป้อนข้อมูลที่เป็น "รหัสไปรษณีย์" ลงไปบน Web Page ข้อมูลที่เป็นส่วน "เมือง" หรือ "เขต" จะปรากฎขึ้นมาทันที โดยที่ไม่ต้องมีการรีเฟรซหน้าจอ

          ดังนั้นลักษณะการทำงานของเว็บแอปพลิเคชั่นที่พัฒนาตามแบบ AJAX จะคล้ายกับการทำงานของโปรแกรมทั่วไปที่ทำงานบน Desktop หรือทำงานบนระบบปฏิบัติการ Windows กล่าวคือ โปรแกรมจะโต้ตอบกับผู้ใช้ได้ทันทีในเหตุการณ์ใดเหตุการณ์หนึ่งโดยไม่ต้องรอ

 

องค์ประกอบของ AJAX 

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

• การแสดงผลในเบราเซอร์โดยใช้ HTML, CSS และ DOM
• ข้อมูลที่ดึงมาจากเซิร์ฟเวอร์ ซึ่งเก็บอยู่ในรูปแบบของ Database หรือ XML
• การดึงข้อมูลข้อมูลจากเซิร์ฟเวอร์โดยใช้ XMLHttpRequest Object ในเบราเซอร์ซึ่งเป็นการดึงข้อมูลแบบฉากหลัง (behind-the-scence หรือ background) เพราะไม่ทำให้เบราเซอร์รีเฟรซหน้าจอ
• ภาษา JavaScript สำหรับเขียนโค้ดควบคุมการทำงานทั้งหมด

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

          ในทางกลับกัน AJAX ไม่ได้จำกัดอยู่แค่ส่วนประกอบตามที่กล่าวข้างต้น แต่อาจมีส่วนประกอบอื่นๆอีก เช่น ภาษาหรือเทคโนโลยีที่ใช้เขียนโปรแกรมทางฝั่งเซิร์ฟเวอร์ เช่น PHP,JSP,ASP.NET และอื่นๆ เป็นต้น ช่วยให้การนำ AJAX ไปประยุกต์ใช้งานมีความหลากหลายยิ่งขึ้น 

ขั้นตอนการทำงานของ AJAX

 

ขั้นตอนการทำงานของ AJAX อย่างคร่าวๆ สามารถอธิบายได้ดังนี้

1.      เขียนโค้ด JavaScript ไว้ในเพจ ซึ่งจะทำให้ดึงข้อมูลจากเซิร์ฟเวอร์ และนำข้อมูลนั้นมาปรับปรุงในเพจ

2.      เมื่อต้องการข้อมูลจากเวิร์ฟเวอร์ JavaScript ของเราจะสั่ง XMLHttpRequest Object ให้ส่ง Request ไปยังเซิร์ฟเวอร์แบบหลังฉาก (ถ้าหากเบราเซอร์มีข้อมูลที่ต้อวการส่งให้เซิร์ฟเวอร์ด้วย ก็จะส่งไปพร้อมกับ Request นี้ ) ทั้งนี้ JavaScript จะไม่ทำให้เพจหยุดการทำงานในระหว่างที่รอข้อมูลจากเซิร์ฟเวอร์ เพราะมันจะรอข้อมูลอยู่หลังฉาก (เรียกว่าเป็นการดึงข้อมูลแบบ Asynchronous) ผู้ใช้จึงไม่รู้สึกว่าถูกขัดจังหวะในช่วงที่ JavaScript กำลังรอข้อมูลจากเซิร์ฟเวอร์

3.      เมื่อข้อมูลส่งมาถึง โค้ด JavaScript ของเราก็จะนำข้อมูลนั้นออกมาแสดงตรงตำแหน่งที่เรากำหนดไว้ในหน้าเว็บเพจ ข้อมูลนี้อาจมีรูปแบบเป็น XML หรืแเป็นข้อความธรรมดาก็ได้แล้วแต่การออกแบบที่ฝั่งเซิร์ฟเวอร์

AJAX มีหลักการทำงานง่ายๆแค่นี้เอง โดยสรุปคือ เราจะใช้ XMLHttpRequest Object ติดต่อขอข้อมูลจากเซิร์ฟเวอร์ โดยไม่ทำให้เบราเซอร์รีเฟรซหน้าจอ แล้วนำข้อมูลที่ได้มาใช้ในหน้าเน็บเพจ การทำงานทั้งหมดเกิดจากโค้ด JavaScript ที่เราเขียนไว้ในเว็บเพจ ซึ่งเป็นการทำงานที่ฝั่งเบราเซอร์หรือไคล์เอนท์

 

 

แหล่งอ้างอิง 

  http://www.bcoms.net/dictionnary/detail.asp?id=602

http://www.scriptdd.com/webtip/ajax-lesson-1.html

#10 JAVA/ J2EE/ J2ME Development

JAVA/ J2EE/ J2ME Development

             ภาษาจาวา (อังกฤษ: Java programming language) เป็นภาษาโปรแกรมเชิงวัตถุ (อังกฤษ: Object Oriented Programming) พัฒนาโดย เจมส์ กอสลิง และวิศวกรคนอื่นๆ ที่ ซัน ไมโครซิสเต็มส์ ภาษาจาวาถูกพัฒนาขึ้นในปี พ.ศ. 2534 (ค.ศ. 1991) โดยเป็นส่วนหนึ่งของ โครงการกรีน (the Green Project) และสำเร็จออกสู่สาธารณะในปี พ.ศ. 2538 (ค.ศ. 1995) ซึ่งภาษานี้มีจุดประสงค์เพื่อใช้แทนภาษาซีพลัสพลัส (C++) โดยรูปแบบที่เพิ่มเติมขึ้นคล้ายกับภาษาอ็อบเจกต์ทีฟซี (Objective-C) แต่เดิมภาษานี้เรียกว่า ภาษาโอ๊ก (Oak) ซึ่งตั้งชื่อตามต้นโอ๊กใกล้ที่ทำงานของ เจมส์ กอสลิง แต่ว่ามีปัญหาทางลิขสิทธิ์ จึงเปลี่ยนไปใช้ชื่อ "จาวา" ซึ่งเป็นชื่อกาแฟแทน
และแม้ว่าจะมีชื่อคล้ายกัน แต่ภาษาจาวาไม่มีความเกี่ยวข้องใด ๆ กับภาษาจาวาสคริปต์ (JavaScript) ปัจจุบันมาตรฐานของภาษาจาวาดูแลโดย Java Community Process ซึ่งเป็นกระบวนการอย่างเป็นทางการ ที่อนุญาตให้ผู้ที่สนใจเข้าร่วมกำหนดความสามารถในจาวาแพลตฟอร์มได้

รุ่นต่าง ๆ ของภาษาจาวา

• 1.0 (ค.ศ. 1996) — ออกครั้งแรกสุด
• 1.1 (ค.ศ. 1997) — ปรับปรุงครั้งใหญ่ โดยเพิ่ม inner class
• 1.2 (4 ธันวาคม, ค.ศ. 1998) — รหัส Playground ด้านจาวาแพลตฟอร์มได้รับการเปลี่ยนแปลงครั้งใหญ่ใน API และ JVM (API สำคัญที่เพิ่มมาคือ Java Collections Framework และ Swing; ส่วนใน JVM เพิ่ม JIT compiler) แต่ตัวภาษาจาวานั้น เปลี่ยนแปลงเพียงเล็กน้อย (เพิ่มคีย์เวิร์ด strictfp) และทั้งหมดถูกเรียกชื่อใหม่ว่า "จาวา 2" แต่ระบบเลขรุ่นยังไม่เปลี่ยนแปลง
• 1.3 (8 พฤษภาคม, ค.ศ. 2000) — รหัส Kestrel แก้ไขเล็กน้อย
• 1.4 (13 กุมภาพันธ์, ค.ศ. 2002) — รหัส Merlin เป็นรุ่นที่ถูกใช้งานมากที่สุดในปัจจุบัน (ขณะที่เขียน ค.ศ. 2005)
• 5.0 (29 กันยายน, ค.ศ. 2004) — รหัส Tiger (เดิมทีนับเป็น 1.5) เพิ่มคุณสมบัติใหม่ในภาษาจาวา เช่น Annotations ซึ่งเป็นที่ถกเถียงกันว่านำมาจากภาษาซีชาร์ป ของบริษัทไมโครซอฟท์, Enumerations, Varargs, Enhanced for loop, Autoboxing, และที่สำคัญคือ Generics
• 6.0 (11 ธันวาคม, ค.ศ. 2006) — รหัส Mustang เป็นรุ่นในการพัฒนาของ Java SDK 6.0 ที่ออกมาให้ทดลองใช้ในเดือนพฤศจิกายน ค.ศ. 2004
• 7.0 (กำลังพัฒนา กำหนดออก ค.ศ. 2008) — รหัส Dolphin กำลังพัฒนา 

 

        

        J2EE (Java 2 Platform Enterprise Edition) เป็นแพล็ตฟอร์มที่ออกแบบสำหรับเครื่องคอมพิวเตอร์ระดับ เมนเฟรมของวิสาหกิจขนาดใหญ่ ซันไมโครซิสเตม (Sun Microsystems) ได้ออกแบบ สามารถพัฒนาโปรแกรมประยุกต์ง่ายขึ้นโดย J2EE และลดส่วนของการเขียนโค้ดและให้บางส่วนถูก ควบคุมอย่างอัตโนมัติ J2EE ได้รวมส่วนประกอบจำนวนมากของแพล็ตฟอร์ม J2SE (Java 2 Standard Edition) เช่น

• Java Development Kit (JDK) เพื่อให้ระบบปฏิบัติการสนับสนุนการทำงานของภาษาจาวา
• สนับสนุน Common Object Request Broker Architecture (CORBA) รุ่นก่อนที่จะเปลี่ยนมาเป็น Enterprise JavaBeans (EJB) ในปัจจุบัน
• Java Database Connectivity 2.0 (JDBC) เทียบได้กับ Open Database Connectivity (ODBC) ได้รับการรวมเป็นการอินเตอร์มาตรฐานกับฐานข้อมูลของ Java

 

         J2ME (Java 2 Platform, Micro Edition) เป็นเทคโนโลยีที่ยอมให้ผู้เขียนโปรแกรมใช้ภาษา Java และเครื่องที่เกี่ยวข้องในการพัฒนาโปรแกรมสำหรับอุปกรณ์สารสนเทศไร้สาย เคลื่อนที่ เช่น โทรศัพท์เซลลูลาร์ และ personal digital assistant (PDA) โดย J2ME ประกอบด้วยข้อกำหนดโปรแกรมและเครื่องสเมือนเฉพาะ หรือ K Virtual Machine ที่ยอมให้โปรแกม J2ME เข้ารหัสในการเรียกใช้บนอุปกรณ์เคลื่อนที่

มี 2 ข้อกำหนด คือ Connected, Limited Device Configuration (CLDC) และ Mobile Information Device Profile (MIDP) โดย CLDC เป็นผังของ application program interface (API) และส่วนการทำงานเครื่องเสมือนที่จำเป็นต่อการสนับสนุนอุปกรณ์เคลื่อนที่ ส่วน MIDP เพิ่มรายละเอียดให้ CLDC ในด้านการอินเตอร์เฟซ เครือข่าย และ messaging ที่จำเป็นต่อการอินเตอร์เฟซกับอุปกรณ์เคลื่อนที่ MIDP รวมแนวคิดของ midlet ที่เป็นโปรแกรมประยุกต์ Java ขนาดเล็กคล้ายกับ applet แต่ midlet สอดคล้องกับ CLDC และ MIDP และมุ่งไปที่อุปกรณ์เคลื่อนที่

อุปกรณ์กับระบบที่ใช้ประโยชน์ J2ME มีให้แล้วและคาดว่าจะมีมากขึ้นในอนาคตอันใกล้



ขอขอบคุณข้อมูลจาก:: http://www.com5dow.com/%E0%B9%84%E0%B8%82%E0%B8%9B%E0%B8%B1%E0%B8%8D%E0%B8%AB%E0%B8%B2%E0%B8%A8%E0%B8%B1%E0%B8%9E%E0%B8%97%E0%B9%8C-IT/1283-J2ME-%E0%B8%84%E0%B8%B7%E0%B8%AD%E0%B8%AD%E0%B8%B0%E0%B9%84%E0%B8%A3.html และ วิกิพีเดีย