belajar xml

LESSONS LEARNED FROM INCORPORATING XML WITH SERVER SIDE SCRIPTING INTO “KAPITA SELEKTA” COURSE

Mukhammad Andri Setiawan

Informatics Department, Faculty of Industrial Technology, Islamic University of Indonesia

Jl. Kaliurang Km. 14,5 Sleman, Yogyakarta 55501 Telp. (0274) 895287, Fax. (0274) 895007

e-mail: [email protected]

Abstract

Recently XML has become very popular format to present data in web based application. XML is fast emerging as the dominant standard at the hypertext level of web site management describing pages and links between them. XML is not a replacement for Hypertext Markup Language (HTML) but is an extension that allows user-defined tags to described structured data, but does not render the data ready for the browser display. One of the interesting things about XML is its capability to merge with the server side programming such as PHP or ASP. The next generation of web sites will inevavitably combine these technologies as e-commerce (and all matter beginning with “e-” matures and developers look for more efficient ways to integrate Internet presence with business systems. The use of XML in the course, allows the students to learn valuable lessons by comparing the development of the same process using XML and not using XML. By experiencing the step-by-step process of the two options, the students learn the costs and benefits as well as strengths and weakness of both. Key words: XML, PHP/XML, ASP/XML

I. INTRODUCTION The use of eXtensible Markup Language (XML) to describe how data is structured is

growing in use, it is a topic that so popular in web development. The use of XML in the development of web based information system is growing [7]. Jones (2000) as in [1] states “The advent of eXtensible Markup Language (XML) has created the potential for dramatic changes in programming languages, although widespread changes haven’t happened yet.” Srikanth (2002) as in [1] also says that ,”The next generation of browsers are all going to support XML, software multinationals like Microsoft, IBM, and Netscape are backing it and releasing wide range of XML compatible products, so you know that it is going to be ‘big’!”. XML has caused a revolution in the IT world; XML is being applied in a great many fields and for various purposes: electronic archive, and contents management, web publishing, interchange of electronic documents, internal format tools, software, e-commerce, education, and many more fields [5].

Why the push toward the use of XML, and what are XML’s strengths? Part of the argument in support of XML is based on some of the inherent weaknesses of Hypertext Markup Language (HTML) the language common to all browsers [1]. Some of these weaknesses are: a fixed tag set, difficult data processing, and documents that function like applications that clog the internet with client-to-server traffic. The strength of XML is that data can be contained in a uniform user-defined structure. As data is transferred from computer to computer or from computer to a browser, a consistency of naming conventions and data types can be maintained. Because of the weaknesses of HTML and the apparent strength’s of XML, coupled with the growing acceptance of XML, the inclusion of an XML component into an upper division web development class was a natural migration. Through the use of XML, in addition to the use of HTML, the students gain insight into the strengths and weaknesses of both by a comparison of the two, and can learn new method to represent data on web based application.

The main component of the course is the interaction between server-side web pages that interact with a MySQL database by exporting data from the database and then display them on a web page. This is a server-to-client application. By the time the students complete this

Seminar Nasional Pendidikan Teknik Elektro (SNPTE 2004)

Jurusan Pendidikan Teknik Elektro FT UNY 11 Desember 2004 21

component of the course they are well grounded in the mechanics of developing web pages that interact with the database. The next step expands that knowledge by incorporating an XML exercise that merely extracts data from the database and displays the data on a web page.

A comparison is easily made between accomplishing the same task in both HTML and XML. The end result for both processes is identical, but the steps to reach the end result are different. The process of using HTML exclusively requires only one web page. The use of HTML for formatting which includes Active Server Page (ASP) or PHP directives, and Structured Query Language (SQL) statements are all combined onto one web page. The process of using XML requires two parts. An Active Server Page or PHP Preprocessor coordinates the process but all of the code is not on a single web page. A secondary file, known as eXtensible Style Language (XSL), formats the XML code for display on the browser. The process is somewhat more complex, but there are several benefits that offered.

II. XML XML is a document that lets us separate data from presentation. By using XML we can

create rich, self-describing data documents that are easily transferred from one place to another. XML is a standard for exchanging structured data between components, application, and systems [2].

Because XML is extensible, it can be targeted at specific uses. There are standardized XML definitions for financial data, mathematics in the Mathematical Markup Language (MathML), Multimedia (SMIL), Graphics in the Vector Markup Language (VML) or Scalable Vector Graphics (SVG), Hypertext (HTML), as well as lower-level standards like, resource linking (XPointer and XLink), and style sheets (XSL).

To make an XML document, we have to obey rules that called XML Namespaces (XMLNS), so the XML document can be read and parsed by browser or other systems. Figure 1 shows us an example of XML document that conform a well-formed document. Some of the rules to conform a well-form document are:

a. Elements are case sensitive b. All tags must be closed c. Attribute values must be enclosed in quotes d. Elements must be appropriately nested

<?xml version="1.0"?> <?xml:stylesheet type="text/xsl" href="AccessoriesXSL.xsl" ?> <accessories> <accessory> <name>Auxiliary Seats</name> <price>$395.00</price> <description>New seat design.</description> </accessory> <accessory> <name>Monsoon Premium Audio</name> <price>200.00</price> <description>Kick Audio System</description> </accessory> </accessories>

Figure 1. Example of XML Document

III. The Server Side Scriptings

III.1. PHP There are many possible ways when constructing file explorer based on Web-application.

We choose a programming language that fit such criteria presented in [3], which are:


22 Jurusan Pendidikan Teknik Elektro FT UNY 11 Desember 2004

a. The programming interfaces must provide reaching web services b. The programming interfaces must provide database management c. Relatively rapid executive code must be used

The available programming language such as PHP (PHP Hypertext Preprocessor), Perl, Phyton, Tcl/Tk for similar works which support mentioned rules above are widely used ones. In this project, we choose PHP as programming language because it is widely used general purpose scripting language that is especially suited for web development [4]. PHP Can be embedded to (X)HTML or XML. PHP is a tool for creating dynamic data-driven web-pages. Figure 2 shows us an example of PHP script. <html> <head> <title>Judul Web Site</title> <head> <body> <?php echo "<h1>Testing, this is a text generated by PHP !</h1>"; ?> </body> </html>

Figure 2. Example of PHP Document

III.1.1. PHP and MySQL One of advantages from PHP is its capability to communicate with a well known databases

system. Hence, presenting dynamic or interactive data which is taken from the databases can be done easily. That is why; PHP is suitable in building dynamic Web-pages or a Web-based application. Databases that can be accessed now by PHP are: dBase, Informix, Microsoft Access, InterBase, Microsoft SQL Server, MySQL, Oracle, PostgreSQL, Sybase, and so on.

We choose MySQL as our database system. There are many reasons why we used MySQL as our database system. Such statements below declare our reasons:

a. MySQL is a free database system b. MySQL use SQL as its core language to access its data c. MySQL can be used in multiple platform (*nix, Windows, etc) d. MySQL is an RDBMS (Relational Database Management System)

PHP can connect MySQL easily (Refer to Figure 3). All we need is the information where

MySQL is located, username, password, and database name. <html> <head> <title>Testing MySQL</title> <head> <body> <?php $user = "andri"; $pwd = "andrijuga"; $id = mysql_connect("localhost",$user,$pwd); if (!id) die("Database can’t be opened"); mysql_close($id); print("Success !!!"); ?> </body> </html>

Figure 3. Example of PHP accessing MySQL database



III.2. ASP ASP (Active Server Pages) is a technology that permits developers to make a process in a

server. ASP, like PHP, is also a server side scripting hence it is browser independent [6]. ASP just like PHP has a capability to communicate with databases system. Hence, presenting dynamic and interactive data can be done easily.

Web developer can make a choice what language program to make the script, whether VBScript, Jscript, or scripting language that provided by 3rd party or by Microsoft TM. This one is also as the advantages of ASP.

ASP is widely support server component. With server component, developers can make application with Visual Basic, Borland Delphi, C++, Java, and then run with ASP. Hence, this give a high flexibility to develop a web application.

<HTML> <HEAD> <TITLE>Skrip ASP Pertamaku euy...!</TITLE> </HEAD> <BODY> <% response.write("Hello World !") %> </BODY> </HTML>

Figure 4. Example of ASP Document

III.2.1. ASP and Databases As PHP, ASP can also connect to database easily (See Figure 5 for listing code) either

using ODBC (Open Database Connectivity) or direct access to the database themselves. All we need is database name, password, and username

<% 'Membuat object connection StrConn = "Provider=Microsoft.Jet.OLEDB.4.0 ;uid="username"; pwd="password"; Data Source=" & Server.MapPath("admindb.mdb") 'Membuka koneksi Set ndb = Server.CreateObject("ADODB.Connection") ndb.open StrConn %>

Figure 5. Example of ASP accessing Microsoft TM Access

IV. Presenting Database using Server Side Scripting Only one page is involved in the process of extracting data from a database table and

placing the data on a web page. In this course, students are allowed to use one of popular server side scripting like ASP (Figure 6) or PHP (Figure 7).

1 <% 2 'membuat koneksi 3 Dim conn, sql, rs 4 Dim tID, tDescription, tPrice 5 Set conn = Server.CreateObject("ADODB.Connection") 6 conn.open "datasourcename", "userid", "password" 7 'Membuat SQL dan diarahkan ke recordset 8 sql = "SELECT * FROM data" 9 Set rs = Server.CreateObject("ADODB.Recordset") 10 rs.Open sql, conn, 3, 3 11 %> 12 <table align="center" WIDTH="60%" BORDER="1"> 13 <tr> 14 <th ALIGN="left">Nomor</th> 15 <th ALIGN="left">Nama</th>



16 </tr> 17 <tr> 18 <% 19 ' loop sampai akhir dari recordset 20 Do Until rs.eof 21 %> 22 <tr> 23 <td align="center"><%= rs("nomor") %></td> 24 <td align="left"><%= rs("nama") %></td> 25 </tr> 26 <% 27 rs.MoveNext 28 Loop 29 %>

Figure 6. Listing code ASP accessing the databases

1 <table align="center" WIDTH="60%" BORDER="1"> 2 <tr> 3 <th ALIGN="left">Nomor</th> 4 <th ALIGN="left">Nama</th> 5 </tr> 6 <tr> 7 <?php 8 $user = "root"; 9 $password = ""; 10 $db = "database"; 11 $id_mysql = mysql_connect("localhost",$user,$password); 12 if (! $id_mysql) 13 die("Cannot connect"); 14 mysql_select_db ($db,$id_mysql); 15 $rs = mysql_query("SELECT * FROM data",$id_mysql); 16 while ($row = mysql_fetch_row($rs)) 17 { print("<tr><td align=\"center\">$rs[0]</td>\n"); 18 print("<td align=\"left\">$rs[1]</td><tr>\n"); } 19 mysql_close($id_mysql) 20 ?>

Figure 7. Listing code PHP accessing the databases

Both (ASP and PHP) access table “data from the databases (ASP connects to databases by opening the connection using an ODBC data sourcename called “datasourcename”, PHP connects to a database in MySQL called “database”. The ASP and PHP accomplishes the entire process of connecting to the database, extracting the data from the database table, and displaying the data in a HTML table on the web page.

V. Presenting Database To a Web Page using XML Two pages are involved in the process of extracting data from a database table and placing

the data on a web page: an Active Server Page (ASP) or PHP Preprocessor containing XML code, and an Extensible Style Language (XSL) page. The ASP or PHP controls the overall process of selecting data from the database table and displaying the data. The ASP code connects to the database and creates a recordset from the database table. The PHP code connects to the database and creates the result in an array.



V.1. Server Scripting Page with XML

V.1.1. ASP with XML Following is the Active Server Page that extracts the data from the MySQL database that

connected using ODBC. The scripting language used is VBScript. Note that the XML code is embedded within the VBScript code.

1 <% Response.Buffer=True %> 2 %> 3 4 <?xml version = "1.0"?> 5 <?xml:stylesheet type = "text/xsl" href = "data.xsl"?> 6 <contoh> 7 <% 8 Dim conn, sql, rs 9 Set conn = Server.CreateObject("ADODB.Connection") 10 conn.open "datasourcename","userid","password" 11 sql = "Select * from Example" 12 Set rs = Server.CreateObject("ADODB.Recordset") 13 rs.Open sql, conn, 3, 3 14 While Not rs.EOF 15 %> 16 <data_mhs> 17 <nomor><% =rs( "nomor" ) %></nomor> 18 <nama><% =rs( "nama" ) %></nama> 19 </data_mhs> 20 <% 21 rs.MoveNext() 22 Wend 23 %> 24 </contoh>

Figure 8. Listing code ASP presenting data in XML form

The ASP page works and create an XML page that works in conjunction with the

Extensible Style Language (XSL) page called “data.xsl”. To indicate that this web page is an xml document we have to add in the line of codes a directive “<?xml version = "1.0"?>" hence the browser will treat the code as an XML page.

This page has XML root element called “contoh” (Line 6). This root has elements inside called “data_mhs” (Line 16) which incorporate two elements called “nomor” and “nama”. Values of these elements are extracted from the databases using a recordset executed like in Line 17 and 18 and looped until all the data extracted.

V.1.2. PHP with XML Following is the PHP page that extracts the data from the MySQL database called

“database” and table called “data”.

1 <?php 2 header("Content-Type: text/xml"); 3 $user = "root"; 4 $password = ""; 5 $db = "database"; 6 $id_mysql = mysql_connect("localhost",$user,$password); 7 if (! $id_mysql) 8 die("Cannot connect"); 9 mysql_select_db ($db,$id_mysql); 10 $hasil = mysql_query("SELECT * FROM data"); 11 if (! $hasil) 12 die("Query gagal !"); 13 echo "<?xml version=\"1.0\"?>\n"; 14 echo "<?xml-stylesheet type=\"text/xsl\" href=\"data.xsl\"?>\n";



15 echo "<contoh>\n"; 16 while ($data = mysql_fetch_row($hasil)) 17 { 18 echo "<data_mhs>\n"; 19 echo "\t<nomor>$data[1]</nomor>\n"; 20 echo "\t<nama>$data[2]</nama>\n"; 21 echo "</data_mhs>\n"; 22 } 23 echo "</contoh>"; 24 ?>

Figure 9. Listing code PHP presenting data in XML form

The PHP page works and create an XML page that works in conjunction with the Extensible Style Language (XSL) page called “data.xsl”. To indicate that this web page is an xml document we have to add in the line of codes a directive “<?xml version = "1.0"?>" hence the browser will treat the code as an XML page. But before, in order that the browser will read correctly and treat the page as an XML (not just plain text), we have to put “header("Content-Type: text/xml")“ syntax in the script code.

The rest is just the same as PHP page, except that if in ASP we use recordset to access the value that will be presented, in PHP we extract the result of SQL query into an array element (see Line 16 on Figure 9).

V.1.3. eXtensible Style Language (XSL) Page The XSL page is being used to render the XML file so that it can then presented in a web

page form that can be read easily. Referring again to Figure 8 and 9, the ASP and PHP references the XSL page (data.xsl), and uses the XSL page.

1 <?xml version = "1.0"?> 2 <xsl:stylesheet xmlns:xsl = "http://www.w3.org/TR/WD-xsl"> 3 <xsl:template match = "/"> 4 <HTML> 5 <HEAD> 6 <TITLE>Contoh XML</TITLE> 7 </HEAD> 8 <BODY> 9 <DIV ID = "list"> 10 <xsl:apply-templates select = "contoh"/> 11 </DIV> 12 </BODY> 13 </HTML> 14 </xsl:template> 15 <xsl:template match="contoh"> 16 <TABLE ALIGN = "CENTER" WIDTH = "60%" CELLSPACING = "0" BORDER = "1"> 17 <THEAD> 18 <TD WIDTH = "10%" ALIGN = "LEFT"> 19 <DIV>Nomor</DIV> 20 </TD> 21 <TD WIDTH = "60%" ALIGN = "LEFT"> 22 <DIV>Nama</DIV> 23 </TD> 24 </THEAD> 25 <xsl:for-each select = "data_mhs" order-by = "nama"> 26 <TR> 27 <TD WIDTH = "10%" ALIGN = "LEFT" VALIGN = "TOP"> 28 <xsl:choose> 29 <xsl:when test = "nomor[.!='']"> 30 <xsl:value-of select = "nomor"/> 31 </xsl:when> 32 <xsl:otherwise> 33 tidak ada 34 </xsl:otherwise> 35 </xsl:choose>



36 </TD> 37 <TD WIDTH = "60%" ALIGN = "LEFT" VALIGN = "TOP"> 38 <xsl:choose> 39 <xsl:when test = "nama[.!='']"> 40 <xsl:value-of select = "nama"/> 41 </xsl:when> 42 <xsl:otherwise> 43 tidak ada 44 </xsl:otherwise> 45 </xsl:choose> 46 </TD> 47 </TR> 49 </xsl:for-each> 50 </TABLE> 51 </xsl:template> 52 </xsl:stylesheet>

Figure 10. The XSL Page

An XSL document is also an XML document, therefore line 1 identifies the document as

such. Line 2 uses attribute xmlns to define a namespace called xsl, and uses Microsoft supported XSL namespace http://www.w3.org/TR/WD-xsl. Line 2 also defines the start of the Stylesheet and line 52 ends the Stylesheet.

On line 3 xsl:template match specifies the element on the XML document for which the template rule applies. The match attribute value "/" specifies a pattern which indicates that the template applies to the root element, in this case “contoh”. HTML tags that are declared inside the template are inserted directly into the output of the web page. Therefore, lines 4 through 13 are inserted directly into the output. Line 14 ends the template for the root.

Line 15 starts another template that will build the HTML table and place the content of the XML tags into the HTML table. Line 25 begins a loop that builds a row entry for the HTML table for each element named “data_mhs”, and line 49 ends the loop.

VI. CONCLUSION The stimulus for incorporating XML into an “kapita selekta” course is the increasing use of

XML in the business world. The reason for this growth is the ability to structure data that is uniform in naming conventions and data types, for web-based information processing.

The students experience an application that extracts data from database and then generate an XML page. By doing so, they learn some of the costs and benefits of developing a web page strictly using HTML and using a combination of HTML and XML. Closely associated with those lessons is the experience of comparing the strengths and weaknesses of using XML or not using XML.

The students learn that additional steps are required when using XML, but produce greater flexibility for data manipulation by using the transformer such as XSL. A further lesson they learn is that in this course, they need a good foundation of HTML, Structured Query Language (SQL), and scripting language such as PHP (PHP Hypertext Preprocessor) or ASP (Active Server Pages) for the successful accomplishment of XML.



VII. REFERENCES

1. Haney, John D. Lessons Learned From Incorporating an XML Component Into An Upper Division Web Development Course. in CCSC : Rocky Mountain Conference. 2002. Rocky Mountain: Consortium for Computing Sciences in College.

2. Litwin, Paul, XML for the VB/ASP Programmer. 2000, http://www.topxml.com/xml/articles/xmlvbasp (accessed 9 Oktober 2004)

3. Ozlidek, O. and D. Z. Seker. A Web-based Application for Real-Time GIS. in ISPRS Conference. 2004. Istanbul, Turkey.

4. PHP.net, What is PHP. 2004, http://www.php.net (accessed 10 November 2004) 5. Sanchez-Fernandez, Luis and Carlos Delgado-Kloos, XML, Panoramic of a Revolution.

UPGRADE, 2002. III(4): p. 3-4. 6. Setiawan, Mukhammad Andri, Content Management System using Active Server Pages (in

Indonesian), in Electrical Engineering. 2002, Gadjah Mada University: Yogyakarta. 7. ---. PHP/XML Implementation for Web Based File Explorer. in Seminar Nasional Peran

Teknologi Dalam Transformasi Budaya Manusia. 2004. Yogyakarta: Universitas Teknologi Yogyakarta.



belajar xml

Documents