เก่ง Ajax + PHP ให้ครบสูตร

บทที่ 1 ทำความรู้จักกับ Ajax

Ajax (อ่านว่า เอ-แจ็กซ์) หรือ Asynchronous JavaScript and XML ไม่ใช่เทคโนโลยีใหม่ในการพัฒนาเว็บไซต์ แต่เป็นเทคนิคหรือแนวคิดใหม่ที่นำเทคโนโลยีที่ใช้กันอยู่แล้วอย่าง JavaScript, XML และ CSS ซึ่งใช้ในการพัฒนาเว็บไซต์มานานหลายปี มาใช้ร่วมกัน เพื่อลดปัญหาการใช้งานของเว็บไซต์แบบเดิม และพัฒนาเว็บไซต์ให้มีความใกล้เคียงกับซอฟต์แวร์มากยิ่งขึ้น

• เว็บไซต์แบบ Ajax
• การทำงานแบบ Ajax
  • มุมมองของผู้ใช้เว็บไซต์
  • มุมมองของผู้สร้างเว็บไซต์
• ข้อดีของ Ajax
• Ajax ทำอะไรได้บ้าง
  • เพิ่มตัวช่วยในการค้นหา
  • เติมคำที่เหลืออยู่
  • แชตออนไลน์
  • ร้านค้าออนไลน์
  • รู้ผลล็อกอินในทันที
  • แผนที่ Google
• เมื่อไหร่ต้องใช้ Ajax

บทที่ 2 JavaScript พื้นฐานสำคัญของ Ajax

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

• การใช้ JavaScript ใน Ajax
• กำเนิด JavaScript
• เริ่มต้นเขียนสคริปต์
• เรียกเว็บเพจและเบราเซอร์ด้วย JavaScript
• เขียนหมายเหตุใน JavaScript
• แยกโค้ด JavaScript จากไฟล์ HTML
• การประกาศตัวแปร
• การสร้างอ็อบเจ็กต์
• ใช้โอเปอเรเตอร์จัดการกับตัวแปร
  • โอเปอเรเตอร์กำหนดค่า (Assignment Operators)
  • โอเปอเรเตอร์เชิงเปรียบเทียบ (Comparison Operators)
  • โอเปอเรเตอร์เชิงคณิตศาสตร์ (Arithmetic Operators)
  • โอเปอเรเตอร์เชิงตรรกะ (Logical Operators)
• จัดการอีเวนต์บนเบราเซอร์
• รวมชุดคำสั่งเข้าเป็นฟังก์ชัน
• ใส่เงื่อนไขด้วย if … else
• วนรอบการทำงาน
  • คำสั่ง for
  • คำสั่ง while
• เพิ่มลูกเล่นให้แบบฟอร์ม
• รายชื่อไฟล์ที่แจกผู้อ่านในบทนี้

บทที่ 3 เริ่มต้นเขียน Ajax

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

• แนะนำอ็อบเจกต์ XMLHttpRequest
• Hello World ด้วย Ajax
• เมธอดและพรอเพอร์ตีของอ็อบเจกต์ XMLHttpRequest
  • กำหนดการเชื่อมต่อด้วยเมธอด open()
  • พรอเพอร์ตี readyState และ status
• ทดสอบ Mouseover กับ Ajax
• เชื่อมต่อกับโปรแกรมฝั่งเซิร์ฟเวอร์
  • Hello World ด้วย PHP
  • Hello World ด้วย Ajax กันอีกครั้ง
• ทำงานร่วมกับ XML
  • เอกสาร XML
  • ส่งข้อมูล XML ให้เบราเซอร์ด้วย PHP
  • จัดการข้อมูล XML ที่ได้รับจากเซิร์ฟเวอร์
• รูปแบบการส่งข้อมูลให้เซิร์ฟเวอร์
  • ส่งแบบ GET
  • ส่งแบบ POST
• รายชื่อไฟล์ที่แจกผู้อ่านในบทนี้

บทที่ 4 สร้าง Ajax Framework

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

• เริ่มต้นสร้าง Ajax Framework
• ฟังก์ชัน getHTTPObject()
• ฟังก์ชัน getDataReturnText()
• ฟังก์ชัน getDataReturnXml()
• ฟังก์ชัน postDataReturnText()
• ฟังก์ชัน postDataReturnXml()
• รายชื่อไฟล์ที่แจกผู้อ่านในบทนี้

บทที่ 5 Browser-Side Ajax Framework

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

• Prototype
  • ฟังก์ชัน $()
  • ฟังก์ชัน $F()
  • อ็อบเจกต์ Form
  • ฟังก์ชัน try.these()
  • อ็อบเจกต์ Ajax
• Rico
  • อ็อบเจกต์ AjaxEngine
  • ตัวอย่างการเรียกใช้ Rico
• SACK
• XHConn
• LibXmLRequest
• Dojo
• รายชื่อไฟล์ที่แจกผู้อ่านในบทนี้

บทที่ 6 Server-Side Ajax Framework

การพัฒนาเว็บแอปพลิเคชันด้วยเทคนิค Ajax เกี่ยวข้องกับการเขียนโปรแกรม JavaScript บนฝั่งเบราเซอร์และการเขียนโปรแกรมด้วย PHP หรือ JSP บนฝั่งเซิร์ฟเวอร์ นอกจาก Framework ที่ทำงานบนเบราเซอร์ซึ่งได้แนะนำไปในบทที่ 5 แล้ว ยังมี Framework อีกกลุ่มหนึ่งที่ถูกพัฒนาเพื่อช่วยสร้างโค้ด JavaScript บนฝั่งเซิร์ฟเวอร์

• Sajax และ PHP
• Xajax และ PHP
• LibAjax และ PHP
• DWR และ Java
• Rails
• รายชื่อไฟล์ที่แจกผู้อ่านในบทนี้

บทที่ 7 ตรวจสอบความผิดพลาด

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

• ปัญหาการตรวจสอบโค้ด JavaScript ใน Internet Explorer
• ตรวจสอบโค้ด JavaScript ด้วย Firefox
• ตรวจสอบความผิดพลาดของ Ajax ด้วย Greasemonkey
• เริ่มต้นการตรวจสอบข้อผิดพลาด
• รายชื่อไฟล์ที่แจกผู้อ่านในบทนี้

บทที่ 8 Ajax กับ XML

เรามักใช้เทคนิค Ajax ในการรับส่งข้อมูลกับเซิร์ฟเวอร์ ซึ่งบางครั้งข้อมูลจะอยู่ในรูปแบบของเอกสาร XML ซึ่งค่อนข้างซับซ้อน ดังนั้นในบทนี้เราจะทำความรู้จักกับเอกสาร XML และวิธีใช้ JavaScript ในการจัดการกับเอกสาร XML เพื่อดึงเฉพาะข้อมูลส่วนที่ต้องการ

• รู้จักรูปแบบของเอกสาร XML
• เรียกเอกสาร XML ด้วย responseXML
• มองเอกสาร XML ในรูปแบบต้นไม้
• เข้าถึงอิลิเมนต์ในเอกสาร XML
• ค้นหาอิลิเมนต์จากชื่อ
• อ่านค่าแอตทริบิวต์ของอิลิเมนต์
• ตรวจสอบความถูกต้องของเอกสาร XML
  • สร้างนิยามเอกสาร XML ด้วย DTD
• รายชื่อไฟล์ที่แจกผู้อ่านในบทนี้

บทที่ 9 แต่งเว็บเพจด้วยสไตล์ชีต

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

• ทำความรู้จัก CSS
• การใช้งานสไตล์ชีต
  • Embedded Style Sheet
  • Inline Style Sheet
  • Link Style Sheet
• กำหนดลักษณะตัวอักษรและข้อความ
  • color
  • font-family
  • font-size
  • font-style
  • font-weight
  • font
• การกำหนดลักษณะพื้นหลัง
  • background-image
  • background-color
  • background
• กำหนดลักษณะเส้นขอบ
  • border-style
  • border-color
  • border-width
• รายชื่อไฟล์ที่แจกผู้อ่านในบทนี้

บทที่ 10 PHP เบื้องต้น

PHP ย่อมาจาก PHP: Hypertext Preprocessor ซึ่งเป็นภาษาสคริปต์ที่ทำงานบนเว็บเซิร์ฟเวอร์ และเป็นที่นิยมใช้ในการพัฒนาเว็บแอปพลิเคชัน เราสามารถใช้เทคนิค Ajax ทำงานร่วมกับภาษาสริปต์บนเซิร์ฟเวอร์ได้หลากหลาย เช่น Java, ASP หรือ PHP เป็นต้น ซึ่งในหนังสือเล่มนี้จะยกตัวอย่างการทำงานของ Ajax กับPHP

• โครงสร้างของ PHP
  • เขียนคำอธิบายใน PHP
• ตัวแปรใน PHP
• โอเปอเรเตอร์
  • โอเปอเรเตอร์เชิงคณิตศาสตร์ (Arithmetic Operators)
  • โอเปอเรเตอร์เชิงเปรียบเทียบ (Comparison Operators)
  • โอเปอเรเตอร์เชิงกำหนดค่า (Assignment Operators)
  • โอเปอเรเตอร์เชิงตรรกะ (Logical Operators)
• การทำงานแบบสร้างเงื่อนไข
  • คำสั่ง if … else
  • คำสั่ง switch … case
• ข้อมูลชนิดอาร์เรย์
• การทำงานซ้ำ
  • คำสั่ง while
  • คำสั่ง do … while
  • คำสั่ง for
  • คำสั่ง foreach
• ฟังก์ชัน
• การรับตัวแปรจากภายนอก
• ทำงานกับฐานข้อมูล
  • เชื่อมต่อฐานข้อมูล
  • การเลือกใช้ฐานข้อมูล
• รายชื่อไฟล์ที่แจกผู้อ่านในบทนี้

บทที่ 11 เปิดร้านขายหนังสือออนไลน์

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

• ออกแบบตารางเก็บข้อมูล
• ร้านหนังสือออนไลน์ประกอบด้วยไฟล์อะไรบ้าง
  • ไฟล์ฝั่งเบราเซอร์
  • ไฟล์ฝั่งเซิร์ฟเวอร์
• กำหนดสไตล์การแสดงผล
• เริ่มต้นด้วยหน้าแรกของเว็บไซต์
• ติดต่อฐานข้อมูล
• แสดงรายชื่อหนังสือในร้าน
• หยิบหนังสือเข้าและออกจากตะกร้า
• รายชื่อไฟล์ที่แจกผู้อ่านในบทนี้

บทที่ 12 แชตออนไลน์

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

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

บทที่ 13 Auto Complete

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

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

บทที่ 14 ดูหลากหลายเว็บไซต์ด้วย RSS

RSS (Really Simple Syndication) คือ การแปลงข้อมูลต่างๆ ให้อยู่ในรูปแบบมาตรฐานกลางและสามารถแลกเปลี่ยนสื่อสารกับที่อื่นๆ ได้อย่างง่ายและสะดวก โดยข้อมูลจะอยู่ในรูปแบบของ XML และเราสามารถดึงข้อมูลจากเว็บไซต์ต่างๆ ที่มีบริการ RSS (ซึ่งต่อไปนี้จะเรียกว่าเว็บไซต์ RSS) ได้โดยตรงและทันที โดยที่ไม่จำเป็นต้องเข้าไปตามเว็บไซต์ต่างๆ เพื่อดูว่ามีข้อมูลอัปเดตใหม่หรือไม่

• RSS Reader ประกอบด้วยไฟล์อะไรบ้าง
  • ไฟล์ฝั่งเบราเซอร์
  • ไฟล์ฝั่งเซิร์ฟเวอร์
• กำหนดสไตล์การแสดงผล
• ดึงข้อมูลเว็บไซต์ RSS
• รายชื่อไฟล์ที่แจกผู้อ่านในบทนี้

บทที่ 15 ป้ายโฆษณาหมุนเวียน

ในบทนี้เราจะยกตัวอย่างการนำ Ajax มาใช้ในการพัฒนาระบบป้ายโฆษณาหมุนเวียนหรือแบนเนอร์ ซึ่งก็คือ การนำป้ายโฆษณามาสลับหมุนเวียนแสดงบนเว็บเพจตามระยะเวลาที่กำหนด เช่น สลับทุก 5 วินาที หรือ 10 วินาที เพื่อใช้พื้นที่ที่มีจำกัดบนเว็บเพจให้เป็นประโยชน์มากที่สุด

• ป้ายโฆษณาหมุนเวียน ประกอบด้วยไฟล์อะไรบ้าง
  • ไฟล์ฝั่งเบราเซอร์
  • ไฟล์ฝั่งเซิร์ฟเวอร์
• กำหนดสไตล์การแสดงผล
• สร้างพื้นที่วางป้ายโฆษณา
• เปลี่ยนป้ายโฆษณา
• รายชื่อไฟล์ที่แจกผู้อ่านในบทนี้

ภาคผนวก ก เตรียมตัวก่อนเขียนโปรแกรม Ajax

ก่อนเริ่มพัฒนาโปรแกรม Ajax เราต้องติดตั้งโปรแกรมที่จำเป็นต้องใช้งาน เช่น เว็บเซิร์ฟเวอร์ PHP และ MySQL เป็นต้น ซึ่งโปรแกรมเหล่านี้สามารถาดาวน์โหลดได้ฟรี หากแต่การติดตั้งโปรแกรมเหล่านี้ทีละตัวจะต้องใช้เวลานาน ในบทนี้จึงขอแนะนำการติดตั้งโปรแกรม AppServ ซึ่งรวบรวมโปรแกรมเหล่านี้ทั้งหมดไว้ด้วยกัน

• รู้จักกับ AppServ
• ติดตั้ง AppServ
• ทดสอบการทำงานของ AppServ

ภาคผนวก ข สารพันเว็บไซต์ Ajax

ในภาคผนวกนี้ ขอแนะนำเว็บไซต์ที่เกี่ยวข้องกับ Ajax ให้ผู้อ่านรู้จักโดยแยกเป็น 3 หมวด คือ เว็บไซต์แหล่งข้อมูล Ajax เว็บไซต์ Browser-Side Ajax Framework และเว็บไซต์ Server-Side Ajax Framework

• เว็บไซต์แหล่งข้อมูล Ajax
• เว็บไซต์ Browser-Side Ajax Framework
• เว็บไซต์ Server-Side Ajax Framework

FAQ

ดัชนี