สารบัญ
Section 1 : How to write XML file
- Data file : employees.xml
[ดู source code]
- :: ดูแฟ้มนี้ด้วย browser ด้วยการ click employees.xml
- :: แฟ้นนี้คือ แฟ้มข้อมูล ที่เปิดให้ load ไปใช้อย่างไรก็ได้ แต่เน้นไปในทาง readonly ผมได้สร้างแฟ้มนี้ และเขียนโปรแกรม list01.xsl, list01.htm, list02.xsl, list02.htm, list03sale.xsl, list03admin.xsl, list03.htm ซึ่งทั้งหมดทำงานในเครื่อง stand alone และใช้ IE5 ขึ้นไป เรียกข้อมูลมาแสดงได้ปกติ
- :: ประโยชน์ที่เห็นได้ชัดเจนของ XML คือ สามารถนำไปแสดงในระบบปฏิบัติ อุปกรณ์ หรือสื่อต่าง ๆ ได้โดยง่าย เพราะได้รับการยอมรับอย่างกว้างขวาง (ขนาดผมเองยังมีแผนนำเสนอข้อมูลทั้งหมด ที่เคยจัดเก็บในรูป xml) เพราะท่านสามารถเขียน xsl จัดรูปแบบข้อมูลใหม่ แต่เรียกข้อมูลจากเว็บของผม คล้ายตัวอย่าง educationt.xsl และ educationt.htm
Section 2 : Using of XSL and HTM (Case 1)
- list01.xsl (ใช้ข้อมูลจาก employees.xml)
[ดู source code]
- :: กำหนดรูปแบบ extensible stylesheet language เพื่อให้โปรแกรมอื่น ๆ เรียกไปใช้ และกำหนดรูปแบบได้ตามที่กำหนด ในที่นี้จะถูกเรียกใช้โดย list01.htm ผลที่ได้จะเป็นข้อมูลธรรมดาที่ไม่ถูกจัดเรียก และท่านสามารถทดสอบโปรแกรมเพื่อดูผลได้จาก list01.htm
- list01.htm (ใช้ข้อมูลจาก employees.xml)
[ดู source code]
- :: ทดสอบที่ [thaiall.com และ thcity.com]
- :: โปรแกรมนี้ใช้ java script ในการเรียกแฟ้มข้อมูล employees.xml และเรียกรูปแบบจาก list01.xsl มารวมกัน และให้ผลตามที่ต้องการในโปรแกรมตัวนี้
Section 3 : Using of XSL and HTM (Case 2)
- list02.xsl (ใช้ข้อมูลจาก employees.xml)
[ดู source code]
- list02.htm (ใช้ข้อมูลจาก employees.xml)
[ดู source code]
- :: ทดสอบที่ [thaiall.com และ thcity.com]
Section 4 : Using of XSL and HTM (Case 3)
- list03sale.xsl (ใช้ข้อมูลจาก employees.xml)
[ดู source code]
- :: เลือกเฉพาะข้อมูลที่มี department = sale
- list03admin.xsl (ใช้ข้อมูลจาก employees.xml)
[ดู source code]
- :: เลือกเฉพาะข้อมูลที่มี department = admin
- list03.htm (ใช้ข้อมูลจาก employees.xml)
[ดู source code]
- :: ทดสอบที่ [thaiall.com และ thcity.com]
- :: มีการใช้ความสามารถของ java script เพื่อส่งความต้องการจาก form ไปเลือก xsl ที่ต้องการ
Section 5 : Using of XSL and HTM (Case 4)
- Data file : http://truehits.net/xml/education.xml
[ดู source code]
- :: คัดลอกแฟ้มนี้มาจาก truehits.net เมื่อวันที่ 3 กันยายน 2545
- education.xsl (ใช้ข้อมูลจาก education.xml)
[ดู source code]
- education.htm (ใช้ข้อมูลจาก education.xml)
[ดู source code]
- :: ทดสอบที่ [thaiall.com และ thcity.com]
- educationt.htm (ใช้ข้อมูลจาก http://truehits.net/xml/education.xml)
[ดู source code]
- :: ทดสอบตามปกติที่ thcity.com และ
thaiall.com ไม่ได้ ถ้าให้ได้ จะต้องลด Security ของ Browser เป็น Low
- :: โปรแกรมนี้เรียกรูปแบบ(xsl) ใน server ของผม แต่ไปเรียกข้อมูลจากเจ้าของข้อมูลที่ http://truehits.net/xml/education.xml ท่านอาจประยุกต์ด้วยการ เขียน xsl และ htm ของตนเอง แต่เรียกข้อมูลที่แหล่งข้อมูลเปิดเผยให้ใช้ ในอนาคต ผมจะเริ่มนำข้อมูลมาให้ใช้ในแบบ xml บ้าง เช่นฐานข้อมูลเว็บของชาวไทย เป็นต้น และโปรแกรมนี้เองทำให้ผมดูผลการจัดอันดับของกลุ่มการศึกษา ของ truehits.net โดยไม่ต้องเข้าไปเปิดเว็บไซต์ของเขา
- :: ผมได้รับ e-mail จากคุณศุภกิจ pao@eng.kmitnb.ac.th ทำให้ทราบว่าตัวอย่างนี้ทดสอบแล้วมีปัญหาคืออ่าน xml จากข้างนอกเข้ามาไม่ได้ แต่ถ้าทดสอบกับเครื่องตนเองจะอ่าน xml จากที่ใดก็ได้ เมื่อผมทดสอบก็พบปัญหาเช่นกัน แต่พบวิธีแก้ไขคือแก้ option ใน IE เรื่อง security ให้เป็น Low ก็จะใช้ตัวอย่างที่ 12 นี้ได้ ที่ผมหาปัญหาพบ เพราะลองติดตั้ง PWS แล้วเรียกใช้ จะมีการถามเรื่องความปลอดภัยซึ่งหลักการนี้มีปัญหานะครับ หรือไม่ก็ต้องไปหา PHP ตามตัวอย่าง 15 ครับ สำหรับการลด security ผมมีภาพมาฝาก แสดงในส่วน source code ด้วย
Section 6 : Using of XML and PHP
- structure.php (ใช้ข้อมูลจาก http://truehits.net/xml/education.xml หรือท่านกำหนดขึ้นเองได้)
[ดู source code]
- :: ทดสอบที่ [thcity.com] แต่ thaiall.com ใช้ structure.php แล้วอ่าน XML ไม่ได้ ปัญหาน่าจะมามาก server
- readxml.php (ใช้ข้อมูลจาก http://truehits.net/xml/education.xml หรือท่านกำหนดขึ้นเองได้)
[ดู source code]
- :: ทดสอบที่ [thcity.com] แต่ thaiall.com ใช้ readxml.php แล้วอ่าน XML ไม่ได้ ปัญหาน่าจะมามาก server
- xmldata.php (ใช้ข้อมูลจาก employees.xml หรือท่านกำหนดขึ้นเองได้)
[ดู source code]
- :: ทดสอบที่ [thcity.com] แต่ thaiall.com ใช้ xmldata.php แล้วอ่าน XML ไม่ได้ ปัญหาน่าจะมามาก server
- :: โปรแกรมนี้ถูกปรับปรุงให้สามารถอ่าน xml ได้โดยไม่ต้องทราบโครงสร้างของแฟ้มก่อน แต่อ่านมาแสดงผลในตารางได้ ได้ทดสอบกับหลาย ๆ แล้วของ xml แต่อาจมีปัญหากับบางแฟ้มที่มีโครงสร้างซับซ้อนได้ ... ต้องลองดูครับ
Section 7 : javascript in HTML
- xmljavas.htm (ใช้ข้อมูลจาก dataj.xml หรือท่านกำหนดขึ้นเองได้)
[ดู source code]
- :: ทดสอบที่ [thaiall.com และ thcity.com] ผลการทดสอบมีปัญหาเรื่อง security ให้ดูจากข้อ 12
- :: แฟ้ม XML บางแฟ้มมีระเบียนเดียว โปรแกรม Javascript นี้จะอ่านข้อมูลทั้งหมดไปใช้ได้ โดยไม่คำนึงว่ามีกี่ระเบียน มักเป็นข้อมูลที่เก็บข้อกำหนดต่าง ๆ เพียงระเบียนเดียวเท่านั้น ถ้ามีหลายระเบียนก็จะใช้หลักการในหัวข้อต่อไป
- xmledu.htm (ใช้ข้อมูลจาก http://truehits.net/xml/education.xml)
[ดู source code]
- :: ทดสอบที่ [thaiall.com และ thcity.com] ผลการทดสอบมีปัญหาเรื่อง security ให้ดูจากข้อ 12
- :: แสดงการอ่านข้อมูลจากแฟ้ม http://truehits.net/xml/education.xml มาแสดงผลได้อย่างเหมาะสม โดยใช้ความสามารถของ javascript พร้อมแทรก html code เข้าไปในรายงานได้อย่างสวยงามเท่าที่ต้องการ
Section 8 : Convert from CSV to XML
- crtxml.php (ทดสอบโปรแกรมที่ crtxml.php)
[ดู source code]
- :: ทดสอบที่ [thaiall.com และ thcity.com]
- :: โปรแกรมนี้ช่วยให้ท่านที่มีข้อมูลในแบบ CSV (Comma Separated Variable) สามารถสร้างแฟ้ม XML มาใช้งานได้โดยง่าย โดยกำหนดชื่อของ field ต่าง ๆ พร้อมกรอกข้อมูล หลังกดปุ่ม submit ก็จะได้แฟ้ม XML ท่านเพียงแต่ save as โดยเลือก type เป็น HTML only แล้ว ตั้งชื่อใหม่มีนามสกุลเป็น .XML ก็จะนำแฟ้มนี้ไปใช้เป็น XML file ได้ทันที
- :: หรือ Right click ด้วย mouse บนแฟ้มที่มีรูปแบบเป็น XML แล้ว จากนั้นเลือก View source แล้ว Save as เป็นแฟ้มที่มีสกุลเป็น XML เพื่อนำไปใช้ต่อไป
Section 999 : แปลงข้อมูลที่มีอยู่เป็น XML
โปรแกรมต่าง ๆ ยอมรับแฟ้ม XML มากขึ้น ทำให้การ convert ข้อมูลที่มีอยู่เป็น XML ทำได้ง่ายขึ้น
ตัวอย่าง 1 : ใช้ MS Access 2000 convert จากตาราง ได้ แฟ้ม xml xsd xsl มาพร้อมกันเลย
ตัวอย่าง 2 : ใช้ MS Excel 2002 จัดเก็บเป็นแฟ้มแบบ xml (Excel รุ่นนี้เปิด XML มาแก้ไขได้เลย)
ตัวอย่าง 3 : ใช้ PHPMyAdmin ส่งข้อมูลใน MySQL ไปเป็นแฟ้ม xml (Mysql-front ก็ทำได้เช่นกัน)
|
1. Data file : employees.xml<?xml version="1.0"?>
<employee>
<empl department="sale">
<emplid>45001</emplid>
<emplname>thanom</emplname>
<emplsalary>15000</emplsalary>
</empl>
<empl department="sale">
<emplid>45002</emplid>
<emplname>pikun</emplname>
<emplsalary>9999</emplsalary>
</empl>
<empl department="admin">
<emplid>45003</emplid>
<emplname>sombat</emplname>
<emplsalary>12500</emplsalary>
</empl>
</employee>
|
2. Source of : list01.xsl<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<xsl:for-each select="employee/empl">
<xsl:value-of/>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>
|
3. Source of : list01.htm<html><head>
<script language="javascript">
var xml,xsl,formatresult;
xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = false;
xml.load("employees.xml");
xsl = new ActiveXObject("Microsoft.XMLDOM");
xsl.async = false;
xsl.load("list01.xsl");
formatresult = xml.transformNode(xsl);
document.write(formatresult);
</script></head>
<body></body></html>
|
4. Source of : list02.xsl<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<xsl:for-each select="employee/empl">
<xsl:value-of select="@department"/>,
<xsl:value-of select="emplid"/>,
<xsl:value-of select="emplname"/>,
<xsl:value-of select="emplsalary"/><br/>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>
|
5. Source of : list02.htm<html><head>
<script language="javascript">
var xml,xsl,formatresult;
xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = false;
xml.load("employees.xml");
xsl = new ActiveXObject("Microsoft.XMLDOM");
xsl.async = false;
xsl.load("list02.xsl");
formatresult = xml.transformNode(xsl);
document.write(formatresult);
</script></head>
<body></body></html>
|
6. Source of : list03sale.xsl<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<xsl:for-each select="employee/empl">
<xsl:if test="@department[.='sale']">
<xsl:value-of select="@department"/>,
<xsl:value-of select="emplid"/>,
<xsl:value-of select="emplname"/>,
<xsl:value-of select="emplsalary"/><br/>
</xsl:if>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>
|
7. Source of : list03admin.xsl<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<xsl:for-each select="employee/empl">
<xsl:if test="@department[.='admin']">
<xsl:value-of select="@department"/>
<xsl:value-of select="emplid"/>,
<xsl:value-of select="emplname"/>,
<xsl:value-of select="emplsalary"/><br/>
</xsl:if>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>
|
8. Source of : list03.htm<html><head>
<script language="javascript">
var xml,xsl;
xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = false;
xml.load("employees.xml");
function changexsl(xslstyle) {
alert(xslstyle);
xsl = new ActiveXObject("Microsoft.XMLDOM");
xsl.async = false;
xsl.load(xslstyle);
result.innerHTML = xml.transformNode(xsl);
}
function filter(position) {
if (position == "sale") changexsl("list03sale.xsl");
if (position == "admin") changexsl("list03admin.xsl");
}
</script></head>
<body>
<form method=post><select name="position">
<option value="sale">sale
<option value="admin">admin
</select>
<input type=button name=change value=select onclick="filter(position.value)">
</form>
<div id="result"></div>
</body></html>
|
9. Data file : http://truehits.net/xml/education.xml<?xml version="1.0" encoding="windows-874"?>
<!DOCTYPE data [
<!ELEMENT data (member*)>
<!ATTLIST data
date CDATA #IMPLIED
category CDATA #IMPLIED>
<!ELEMENT member (url, website, sort, uniqueip, uniquesession, pageviews)>
<!ELEMENT url (#PCDATA)>
<!ELEMENT website (#PCDATA)>
<!ELEMENT sort (#PCDATA)>
<!ELEMENT uniqueip (#PCDATA)>
<!ELEMENT uniquesession (#PCDATA)>
<!ELEMENT pageviews (#PCDATA)>
]>
<data date="2/09/2002" category="การศึกษา">
<member>
<url>www.friends.co.th</url>
<website>Friends.co.th - เพื่อนเก่า ทะเบียนรุ่น ทุกสถาบัน</website>
<sort>10</sort>
<uniqueip>14701</uniqueip>
<uniquesession>50974</uniquesession>
<pageviews>76436</pageviews>
</member>
<member>
<url>www.ru.ac.th</url>
<website>มหาวิทยาลัยรามคำแหง</website>
<sort>68</sort>
<uniqueip>3068</uniqueip>
<uniquesession>4698</uniquesession>
<pageviews>4976</pageviews>
</member>
<member>
<url>www.stou.ac.th</url>
<website>มหาวิทยาลัยสุโขทัยธรรมาธิราช</website>
<sort>74</sort>
<uniqueip>2905</uniqueip>
<uniquesession>8621</uniquesession>
<pageviews>13482</pageviews>
</member>
<member>
<url>www.thaiall.com</url>
<website>thaiall.com,สอบ,สอน,สืบค้น,บทความ,ภาพสวย,จัดอันดับ</website>
<sort>114</sort>
<uniqueip>1906</uniqueip>
<uniquesession>5054</uniquesession>
<pageviews>8201</pageviews>
</member>
<member>
<url>www.NetDesign.ac.th</url>
<website>NetDesign ศูนย์อบรมด้าน Web Design และ E-Commerce อันดับ1 ของเมืองไทย</website>
<sort>138</sort>
<uniqueip>1504</uniqueip>
<uniquesession>4614</uniquesession>
<pageviews>6769</pageviews>
</member>
<member>
<url>www.eduzones.com</url>
<website>ไอ เอ็ดดูเคชั่น โซน</website>
<sort>155</sort>
<uniqueip>1288</uniqueip>
<uniquesession>3763</uniquesession>
<pageviews>5687</pageviews>
</member>
<member>
<url>www.ibscenter.net</url>
<website>ไอบีเอส พอร์ทัลเว็บ = โลกใบใหม่ของวัยเรียน </website>
<sort>214</sort>
<uniqueip>851</uniqueip>
<uniquesession>2168</uniquesession>
<pageviews>3691</pageviews>
</member>
<member>
<url>www.sk.ac.th</url>
<website>โรงเรียนสวนกุหลาบวิทยาลัย </website>
<sort>232</sort>
<uniqueip>759</uniqueip>
<uniquesession>3803</uniquesession>
<pageviews>7035</pageviews>
</member>
<member>
<url>www.triamudom.net</url>
<website>โรงเรียนเตรียมอุดมศึกษา - เตรียมบอร์ด</website>
<sort>236</sort>
<uniqueip>747</uniqueip>
<uniquesession>1571</uniquesession>
<pageviews>2054</pageviews>
</member>
<member>
<url>158.108.36.62/SCRIPTS/KUCityWWW/KUCityWWW.exe/www</url>
<website>ชุมชน ม.เกษตร</website>
<sort>252</sort>
<uniqueip>686</uniqueip>
<uniquesession>4864</uniquesession>
<pageviews>7721</pageviews>
</member>
</data>
|
10. Source of : education.xsl<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<ol/>
<xsl:for-each select="data/member">
<li/><xsl:value-of select="url"/>
<xsl:value-of select="website"/>
<xsl:value-of select="sort"/>
<xsl:value-of select="uniqueip"/>
<xsl:value-of select="uniquesession"/>
<xsl:value-of select="pageviews"/>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>
|
11. Source of : education.htm<html><head>
<script language="javascript">
var xml,xsl,formatresult;
xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = false;
xml.load("education.xml");
xsl = new ActiveXObject("Microsoft.XMLDOM");
xsl.async = false;
xsl.load("education.xsl");
formatresult = xml.transformNode(xsl);
document.write(formatresult);
</script></head>
<body></body></html>
|
12. Source of : educationt.htm<html><head>
<script language="javascript">
var xml,xsl,formatresult;
xml = new ActiveXObject("Microsoft.XMLDOM");
xml.async = false;
xml.load("http://truehits.net/xml/education.xml");
xsl = new ActiveXObject("Microsoft.XMLDOM");
xsl.async = false;
xsl.load("http://lampang.thcity.com/xml/education.xsl");
formatresult = xml.transformNode(xsl);
document.write(formatresult);
</script></head>
<body></body></html>
|
|
13. Source of : structure.php<form action='structure.php'>
<input name=file value="http://truehits.net/xml/education.xml" size=30>
<input type=submit value="Show structure of XML">
</form>
<?
if (strlen($file) < 4) { $file = "employees.xml"; }
$depth = array();
function startElement($parser, $name, $attrs) {
global $depth;
for ($i = 0; $i < $depth[$parser]; $i++) {
print " ";
}
print "$namen";
$depth[$parser]++;
}
function endElement($parser, $name) {
global $depth;
$depth[$parser]--;
}
$xml_parser = xml_parser_create();
xml_set_element_handler($xml_parser, "startElement", "endElement");
if (!($fp = fopen($file, "r"))) {
die("could not open XML input");
}
while ($data = fread($fp, 4096)) {
if (!xml_parse($xml_parser, $data, feof($fp))) {
die(sprintf("XML error: %s at line %d",
xml_error_string(xml_get_error_code($xml_parser)),
xml_get_current_line_number($xml_parser)));
}
}
xml_parser_free($xml_parser);
?>
|
