PHP: Hypertext Preprocessor

บทที่ 24-25 (XML, Ajax) PHP:Hypertext Preprocessor สัญญา เครือหงษ์ ภาควิชาวิทยาการคอมพิวเตอร์และเทคโนโลยีสารสนเทศ คณะวิทยาศาสตร์ มหาวิทยาลัยนเรศวร

วัตถุประสงค์การเรียนรู้ประจำบทวัตถุประสงค์การเรียนรู้ประจำบท

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

การประเมินผล • ประเมินผลจากการตอบคำถามและอภิปรายในชั้นเรียน • ทำแบบฝึกหัดท้ายบท • ทำรายงานส่ง

Extensive Markup Language (XML) Extensive Markup Language (XML) เป็นภาษาที่ให้ความชัดเจนในการให้รายละเอียดเกี่ยวกับข้อมูล และการเปลี่ยนแปลงข้อมูลโดยแอพพลิเคชันบนเว็บและใช้ฟอร์มที่ยืดหยุ่นได้ตามมาตรฐาน HTML หรือ Hyper Text Markup Language ได้เปิดโลกแห่งการแสดงข้อมูลต่างๆ มานำเสนอ ส่วน XML จะทำให้การทำงานกับข้อมูลโดยตรงที่เสริมกับการทำงานของ HTML

ลักษณะโครงสร้างของ XML • XML เป็นการใช้ข้อความเพื่อบ่งบอกโครงสร้างของเอกสาร พิจารณาตัวอย่างรูปแบบโครงสร้างของหนังสือ เมื่อหนังสือประกอบด้วยจำนวนบท 2 บท ในแต่ละบทประกอบด้วยเนื้อความ (Text)

Begin Book Begin Chapter 1 Text for Chapter 1 End Chapter 1 Begin Chapter 2 Text for Chapter 2 End Chapter 2 End Book

ลักษณะของเอกสาร XML นั้น สามารถอธิบายโดยใช้ตัวอย่างได้ ดังนี้ <?xmlversion="1.0"encoding="windows-874"?><mali> <malisorn>ความพยายามอยู่ที่ไหน</malisorn> <malila>ความสำเร็จอยู่ที่นั่น</malila></mali> <root> <element> <tag></tag> </element></root>

ความหมายของ Tag กับ Element • Tag • สำหรับใน XML แล้ว tag มีความหมายในลักษณะเดียวกับที่ใช้ใน HTML tag คือข้อความที่อยู่ระหว่างสัญลักษณ์ < และ > • - Tag เปิด (Start tag) เช่น <book> • จากตัวอย่างที่แสดง ด้านบนถูกเรียกว่า tag เปิด ดังนั้น tag เปิดจึงมีสัญลักษณ์คือ <...> - Tag ปิด (End Tag) เช่น </book> • tag ที่ถูกเรียกว่า tag ปิด ต่อเมื่อใน tag มีเครื่องหมาย / อยู่หลังสัญลักษณ์ < ดังนั้นลักษณะของ tag ปิดจึง มีรูปแบบคือ </...> หากพิจารณาระหว่าง tag เปิดกับ tag ปิดแล้ว ข้อแตกต่างอีกข้อหนึ่งคือ tag เปิด เป็น tag ที่สามารถใส่ข้อมูล attribute ลงไปภายใน tag ได้ แต่ tag ปิดจะไม่ทำกัน

ความหมายของ Tag กับ Element • Element • ในที่นี้คือ โครงสร้างหลักของ XML ซึ่งอยู่ในรูปของ tag เช่นเดียวกัน ตามตัวอย่างข้างบน element คือ

W3C ได้กล่าวถึงจุดมุ่งหมายหลักไว้ 10 หัวข้อ ดังนี้ • 1. XML มีการใช้งานโดยตรงบนเครือข่าย InternetXMLจะถูกออกแบบมาสำหรับจัดเก็บและจัดส่งข้อมูลบนเว็บ • 2. XML มีการสนับสนุนโปรแกรมที่หลากหลาย ถึงแม้ว่าวัตถุประสงค์ที่สำคัญคือ การจัดส่งข้อมูลบนเว็บผ่านทางเซิร์ฟเวอร์และโปรแกรมเบราวเซอร์ XML จะถูกออกแบบมาเพื่อใช้กับโปรแกรมที่มีรูปแบบต่าง ๆ ตัวอย่างเช่น การแลกเปลี่ยนข้อมูลระหว่างโปรแกรมทางด้านการเงิน การเผยแพร่และปรับปรุงโปรแกรมให้ทันสมัยและการเขียน Voice Script ให้สื่อสารได้ด้วยโทรศัพท์ • 3. XML จะต้องเข้ากันได้กับ SGML 4. XML จะต้องง่ายต่อการเขียนโปรแกรมเพื่อประมวลผลเอกสาร5. จำนวนของทางเลือกเฉพาะของ XML ควรมีจำนวนน้อยที่สุดหรือไม่ควรมีเลย6. เอกสาร XML จะต้องอ่านเข้าใจง่ายและมีความชัดเจน7. XML ออกแบบมาเพื่อให้พัฒนาโปรแกรมได้อย่างรวดเร็ว8. การออกแบบ XML ต้องมีรูปแบบที่เหมาะสมและกะทัดรัด9. สามารถสร้างเอกสาร XML ได้ง่าย10. Markup ของ XML ต้องไม่รวบรัดมากเกินไป

<book> <chap number="1"> Text for Chapter 1 </chap> <chap number="2"> Text for Chapter 2 </chap> </book>

เอแจ็กซ์ (AJAX - Asynchronous JavaScript and XML) • เป็นกลุ่มของเทคนิคในการพัฒนาเว็บแอปพลิเคชันเพื่อให้ความสามารถโต้ตอบกับผู้ใช้ได้ดีขึ้น โดยการรับส่งข้อมูลในฉากหลัง ทำให้ทั้งหน้าไม่ต้องโหลดใหม่ทุกครั้งที่มีการเปลี่ยนแปลง ซึ่งช่วยทำให้เพิ่มการตอบสนอง ความรวดเร็ว และการใช้งานโดยรวม • AJAX ไม่ใช่เทคโนโลยีในตัวของมันเอง แต่ว่าเป็นการนำเทคโนโลยีหลายๆ ตัวมารวมกัน เช่น JavaScript?, DHTML, XML, Css, Dom และ XMLHTTPRequest

สถาปัตยกรรม Ajax • Ajax architecture • จากรูป Ajax engine นี้ อยู่ระหว่าง User Interface กับ server ซึ่งจะมองว่าเป็นการทำงานที่ Client การทำงานต่างๆของผู้ใช้ โปรแกรมจะไปเรียก Ajax engine ตัวนี้ขึ้นมา แทนที่การร้องขอหน้าเว็บจาก server โดยตรง และจะใช้โครงสร้างข้อมูลแบบ XML ในการขนย้ายข้อมูลระหว่าง server กับ Ajax engine เมื่อบราวเซอร์ทำการร้องขอข้อมูลจาก server

ข้อดีของ Ajax • ตอบสนองต่อผู้ใช้ได้อย่างรวดเร็วเนื่องจากการ update แบบบางส่วน • ผู้ใช้ไม่ต้องหยุดรอคอยการประมวลของ server เนื่องจากการติดต่อแบบ Asynchronous • รองรับกับบราวเซอร์หลักๆที่สามารถใช้ JavaScript? ได้ • ทำให้การประมวลผลที่ Server มีความรวดเร็วขึ้นเนื่องจากการประมวลผลที่ Server ลดลง • ไม่ต้องทำการติดตั้ง หรือใช้ Plugs-in • ไม่ยึดติดกับ Platform หรือภาษาที่ใช้ในการเขียนโปรแกรม • เป็นเ ทคโนโลยีใหม่ที่ไม่ได้เป็นของนักพัฒนาเว็บแอพลิเคชั่นคนใด นั่นคือทุกคนมีสิทธิ์เข้ามาพัฒนาแอพลิเคชั่นตัว

<?xml version="1.0" encoding="ISO-8859-1"?> <CATALOG> <CD> <TITLE>Empire Burlesque</TITLE> <ARTIST>Bob Dylan</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>Columbia</COMPANY> <PRICE>10.90</PRICE> <YEAR>1985</YEAR> </CD> <CD> <TITLE>Hide your heart</TITLE> <ARTIST>Bonnie Tyler</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>CBS Records</COMPANY> <PRICE>9.90</PRICE> <YEAR>1988</YEAR> </CD> <CD> <TITLE>Greatest Hits</TITLE> <ARTIST>Dolly Parton</ARTIST> <COUNTRY>USA</COUNTRY> <COMPANY>RCA</COMPANY> <PRICE>9.90</PRICE> <YEAR>1982</YEAR> </CD> <CD> <TITLE>Still got the blues</TITLE> <ARTIST>Gary Moore</ARTIST> <COUNTRY>UK</COUNTRY> <COMPANY>Virgin records</COMPANY> <PRICE>10.20</PRICE> <YEAR>1990</YEAR> </CD> </CATALOG> ตัวอย่าง • demo_XML.xml

<?php $q=$_GET["q"]; $xmlDoc = new DOMDocument(); $xmlDoc->load("demo_XML.xml"); $x=$xmlDoc->getElementsByTagName('ARTIST'); for ($i=0; $i<=$x->length-1; $i++) { //Process only element nodes if ($x->item($i)->nodeType==1) { if ($x->item($i)->childNodes->item(0)->nodeValue == $q) { $y=($x->item($i)->parentNode); } } } $cd=($y->childNodes); for ($i=0;$i<$cd->length;$i++) { //Process only element nodes if ($cd->item($i)->nodeType==1) { echo("<b>" . $cd->item($i)->nodeName . ":</b> "); echo($cd->item($i)->childNodes->item(0)->nodeValue); echo("<br />"); }} ?> • getcd.php

<html> <head> <script type="text/javascript"> function showCD(str) { if (str=="") { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","getcd.php?q="+str,true); xmlhttp.send(); } </script> <meta http-equiv="Content-Type" content="text/html; charset=windows-874"></head> <body> <form> àÅ×Í¡ CD: <select name="cds" onChange="showCD(this.value)"> <option value="">Select a CD:</option> <option value="Bob Dylan">Bob Dylan</option> <option value="Bonnie Tyler">Bonnie Tyler</option> <option value="Dolly Parton">Dolly Parton</option> </select> </form> <div id="txtHint"><b>¢éÍÁÙÅ¢Í§ CD </b> </div> </body> </html> • find-xml.html

Thank You

PHP: Hypertext Preprocessor