AJAX on PHP @ NU

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

  • XHTML, DOM, CSS and JavaScript in Basic
  • PHP Basic Concept (OOP, Zend Certification), PHP Manual และ PEAR Package/Frameworks
  • Hypertext Transfer Protocol (HTTP)
  • AJAX in Basic และ Debug AJAX
  • XAJAX Framework

โดยเนื้อหามันอาจจะมีสลับบ้าง นิดหน่อย แต่ประมาณนี้แหละ ได้สอนส่วน OOP ซึ่งก็ intro เรื่อง concept ไปเลย ที่หนักสุดน่าจะเป็น HTTP Protocol มากกว่า เพราะส่วนใหญ่ที่เจอ ๆ ใน outline ตามที่ต่าง ๆ ไม่ค่อยได้สอนเท่าไหร่ แต่มันสำคัญมาก ๆ ในเวลาที่เราต้อง Debug ตัว AJAX มันต้อง Filter การส่งข้อมูลเข้าออกด้วย โดยใช้ 2 ตัวคือ FireBug กับ Proxomitron ในบางครั้งตัว FireBug จะจับข้อมูลที่ถูกส่งผ่าน iframe ไม่ได้ อย่างในกรณีของ google maps เป็นต้น แต่ Proxomitron จะดักได้ เพราะตัว Proxomitron มันดักแบบ Proxy Server ซึ่งข้อมูลทุกอย่างต้องวิ่งผ่านทั้งหมด ทำให้การ Filter ทำได้ง่ายกว่า แถมแก้ไขตัว header และ data ภายในก่อนส่งได้ด้วย เป็นโปรแกรมสำหรับทำมิดีมิร้ายได้เป็นอย่างดี ซึ่งก็ได้สอนเบื้องต้นในการใช้งานเท่านั้น จริงๆ สอนไปหน่อยเดี่ยว เพราะมันมีปัญหากับ ISA Server ของมหาวิทยาลัย ทำให้ Proxomitron ใช้งานไม่ค่อยได้ จะใช้ได้ก็ FireBug ที่พอทำให้เห็นภาพเท่านั้น

ส่วนต่อมาที่น่าจะเป็นก่อนมาเรียนพวก AJAX เลยคือพวก XHTML, CSS, HTML event tag, แนวคิดด้าน DOM แล้วก็ JavaScript อย่างน้อย ๆ ก็เขียนเองได้บ้างก่อน ไม่งั้นนึกภาพไม่ออกแน่ว่ามันเชื่อมโยงกันยังไง แล้วจะทำให้เราไปต่อไม่ได้ ถึงแม้ว่า XAJAX Framework จะทำให้เราไม่ต้องไป focus ที่ตัว JavaScript มาก แต่ว่าในระดับที่มีความซับซ้อนสูงๆ ก็จำเป็นเหมือนเดิม แต่บอกตามตรง XAJAX ทำให้เขียน AJAX เพื่อทำงานกับ PHP ได้ง่ายขึ้นเยอะมาก ๆ ลดเวลาการเขียนลงได้ 3-4 เท่า (วัดจากการที่ได้ใช้เอง) จริง ๆ ยังมี Framework อีกหลายตัวที่น่าสนใจ เอาไว้ว่าง ๆ จะลองเล่นดู

ส่วนที่เป็นพื้นฐานมาก ๆ อย่างเรื่อง path file และ page/data encoding นี่ก็ต้องพูด เพราะในมหาวิทยาลัยไม่ค่อยมีคนสนใจเรื่องนี้เท่าไหร่ ก็ต้องเสริม ๆ ลงไป แถมพูดเรื่อง Unicode ในส่วนของ UTF-8 ไปด้วยว่าในปัจจุบันทำเว็บใช้ UTF-8 น่าจะดีกว่า

จริง ๆ ใน outline กะว่าจะเสริม MySQL in Basic แต่ ไป ๆ มา ๆ ไม่ได้สอน เพราะท่าทางจะหนักเกินไป T_T จริง ๆ ต้องเป็นการสอนระยะยาวมากกว่า เพราะในระดับที่สอนอยู่นี้เนี่ย เป็นระดับปูพื้นฐานและให้ไอเดียว่ามันคืออะไร, การทำงานอย่างไร แล้วถ้ามีข้อผิดพลาดแล้วจะเริ่มไล่ปัญหาจากตรงไหนไปตรงไหนก่อน เพราะถ้าไม่สอนเรื่องพวกนี้ที่เป็นเรื่อง Basic ก่อน ทำงานระดับสูง ๆ ที่ซับซ้อนมาก ๆ พอเจอปัญหา จะเกิดเหตุการณ์แก้ปัญหาแบบมั่ว ๆ ได้

<?php ?> on AJAX

Slide Keynote

Powerpoint 2007 | 2003 | PDF

Example

http://www.fordantitrust.com/download/democode.zip
http://www.fordantitrust.com/download/ajax1.zip
http://www.fordantitrust.com/download/xajaxexam.zip

Framework , Library , Platform, Architecture และ AJAX

ผมมีคำถามที่ไม่เข้าใจ ให้ช่วยแนะนำแนวทาง ดังนี้ครับ
1. framework คืออะไร เกี่ยวข้องกับ library ไหม
2. แพลตฟอร์มกับสถาปัตยกรรมต่างกันอย่างไร
3. AJAX คืออะไรครับ

Framework นั้นใน Software development เป็นการสร้างโครงสร้างของ software project ที่สามารถรวบรวม และพัฒนาสิ่งต่าง ๆ ได้ โดยที่ framework นั้นจะมีโปรแกรมสนับสนุน (IDE), library, scripting language และซอฟต์แวร์อื่นๆ ที่ช่วยในการพัฒนา ตัวอย่าง Framework ก็ Eclipse ที่เป็น Java Framework จาก IBM, NetBeans จาก Sun Microsystems, Microsoft .NET จาก Microsoft, Ruby On Rails สำหรับเขียน Ruby, Cocoa จาก Apple Computer ฯลฯ ส่วนถ้าใน Hardware development เป็นพวกการรวมกันของระบบ เช่น SuperComputer ที่ต้องใช้ Hardware เฉพาะที่เข้ากันได้, Macintosh ที่ต้องใน CPU ที่ออกแบบมาเฉพาะสำหรับการทำงานร่วมกับ Mac OS เป็นต้น
ซึ่งในส่วนของ Framework ที่เป็น Software development นั้น บางครั้งก็สามารถแยกย่อยได้เป็น 2 ส่วนคือ Runtime และ SDK (Software Develop Kits) ซึ่ง Runtime นั้นเป็นการทำให้ซอฟต์แวรที่พัฒนาจาก SDK สามารถทำงานได้ โดยที่ไม่ต้องลง SDK ทั้งหมด ถ้าคิดง่ายๆ คือ SDK เป็น super set ของ Runtime อีกที

Library เป็นการรวมกันของ subprogram ที่ช่วยในการพัฒนาซอฟต์แวรต่าง ๆ ถ้าใน c/c++ ก็พวก stdio, iostream, string ฯลฯ ซึ่งเราต้อง include ถ้าใน java ก็พวก import ต่างๆ เช่น swing อะไรพวกนี้เข้ามาใน code ของเราเพื่อช่วยให้เราไม่ต้องเขียนในส่วนนั้น ๆ ตัวอย่างเช่นใ น MFC ที่สามารถ include Library พวก win32 เข้ามาเพื่อสร้าง GUI ในภาษา visual c++, visual basic

Architecture เป็นศาสตร์ และศิลปของการออกแบบสิ่งของ และโครงสร้างต่าง ๆ โดยมุ่งเน้นในความเป็นกลางของระบบที่เข้ากันได้ในแต่ละรายละเอียด ทั้ง Software และ Hardware

Platform เป็นรายละเอียดต่างๆ ที่นำมารวมกันของ framwork (ทั้ง hardware หรือ software) ที่ยินยอมให้ทำงานได้ ซึ่งมันเป็นการรวมกันของ Computer architecture, operating system หรือ programming language และรวมไปถึง runtime library ตัวอย่างเช่น Wintel เป็นการรวมกันของ Intel x86 หรือ compatible hardware และ Windows operating system, Macintosh เป็นการจัดจำหน่วยบน platform ของ Apple Computer hardware และ Mac OS operating system และพวก video game console ต่าง ๆ พวก xbox, ps(1,2,3) game cube ฯลฯ

AJAX หรือ Asynchronous JavaScript and XML นั้นเอง ซึ่งมันทำงานโดยใช้

  • HTML/XHTML/CSS เพื่อแสดงผล
  • Document Object Model ทำการส่งค่า html และทำงานโดยผ่าน JavaScript เพื่อทำการแสดงผลแบบ dynamic ให้กับ HTML/XHTML/CSS มากขึ้น
  • XMLHttpRequest เพื่อทำการส่งข้อมูลเข้า และออก web server เพื่อประมวลผล

Web browser ที่สนับสนุนคือ

  • Apple Safari 1.2 ขึ้นไป
  • Konqueror ทุกรุ่น
  • Microsoft Internet Explorer (and derived browsers) 4.0 ขึ้นไป
  • Mozilla Firefox (and derived browsers) 1.0 ขึ้นไป
  • Netscape 7.1 ขึ้นไป
  • Opera 7.6 ขึ้นไป
  • ฯลฯ ในอนาคต

ซึ่งจริงๆ แล้วเป็น Technology ที่ใช้ใน Outlook Web Access อยู่แล้ว ซึ่งทำงานผ่าน Microsoft Exchange Server โดยทำงานบน Microsoft Internet Explorer 4.0 ต่อมาในปี 2005 นั้น Google ก็เอามาใช้ใน Google Groups, Google Maps, Google Suggest และ Gmail
ถ้าไล่ตามลำดับแล้ว จากขนาดใหญ่ไปเล็กก็ไล่จาก
Platform -> Architecture -> Framework -> Library -> AJAX

MSN Mail คิดช้าไปหรือเปล่าเนี่ย

จริงๆ มันก็น่าจะมาตั้งนานแล้ว ต้องรอให้ Gmail ใช้มาร่วมปีกว่า คิดช้าไป หรือว่า CPU ของคนทำงาน MSN มันประมวลผลช้าหว่า …… -_-”

แต่เรื่องที่ Gmail ทำงานได้เร็วเพราะ AJAX หรือ Asynchronous JavaScript and XML นั้นเอง ซึ่งมันทำงานโดยใช้

# HTML/XHTML/CSS เพื่อแสดงผล
# Document Object Model ทำการส่งค่า html และทำงานโดยผ่าน JavaScript เพื่อทำการแสดงผลแบบ dynamic ให้กับ HTML/XHTML/CSS มากขึ้น
# XMLHttpRequest เพื่อทำการส่งข้อมูลเข้า และออก web server เพื่อประมวลผล

Web browser ที่สนับสนุนคือ

– Apple Safari 1.2 ขึ้นไป
– Konqueror ทุกรุ่น
– Microsoft Internet Explorer (and derived browsers) 4.0 ขึ้นไป
– Mozilla Firefox (and derived browsers) 1.0 ขึ้นไป
– Netscape 7.1 ขึ้นไป
– Opera 7.6 ขึ้นไป
– ฯลฯ ในอนาคต

ซึ่งจริงๆ แล้วเป็น Technology ที่ใช้ใน Outlook Web Access อยู่แล้ว ซึ่งทำงานผ่าน Microsoft Exchange Server โดยทำงานบน Microsoft Internet Explorer 4.0 ต่อมาในปี 2005 นั้น Google ก็เอามาใช้ใน Google Groups, Google Maps, Google Suggest และ Gmail

ดูเพิ่มเติมที่ http://en.wikipedia.org/wiki/AJAX

ซึ่งการมาครั้งนี้น่าสนใจดี แต่คงไม่ต่างกับ Gmail เท่าไหร่นัก แต่น่าสนใจคือ .Net รุ่นใหม่ และงานด้าน Web Application น่าจะมีการปรับโฉมการทำงานใหม่ไปในทางนี้มากขึ้นแน่นอนทีเดียวเลย

ไม่ใช่อะไรหรอก เพราะว่ามันทำงานได้เร็วมากเลยหล่ะ ถ้าใครได้ลองใช้งาน Gmail จะรู้ว่าเร็วแค่ไหนในการทำงาน