2001 Prentice Hall, Inc. All rights reserved. 1 Chapter 26 - Case Study: Active Server Pages and XML Outline 26.1 Introduction 26.2 Setup and Message

2001 Prentice Hall, Inc. All rights reserved.

1

Chapter 26 - Case Study: Active Server Pages and XML

Outline26.1 Introduction26.2 Setup and Message Forum Documents26.3 Forum Navigation26.4 Adding Forums26.5 Forum XML Documents26.6 Posting Messages26.7 Other Documents26.8 Internet and World Wide Web Resources


2

26.2 Setup and Message Forum Documents

File Name Description

forums.xml XML document listing all available forums and their filenames.

default.asp Main page, providing navigational links to the forums.

template.xml Template for a message forum XML document.

addForum.asp Adds a forum.

forumASP.xml Sample message forum.

formatting.xsl Document for transforming message forums into XHTML.

addPost.asp Adds a message to a forum.

invalid.html Used to display an error message.

site.css Style sheet for formatting XHTML documents.

style.css Style sheet for formatting the message forum site.

Fig. 26.1 Message forum documents.


3

26.3 Forum Navigation

default.asp

addForum.asp

forums.xml

forumASP.xml

addPost.asp

formatting.xsl

Fig. 26.2 Key interactions between message forum documents.

2001 Prentice Hall, Inc.All rights reserved.

Outline4

Forums.xml

1 <?xml version = "1.0"?>2 3 4 5 6 <forums>7 8 <forum filename = "forumASP.xml">ASP</forum>9 10 </forums>

Name of forum.XML document that contains the information for forum ASP.


Outline5

Default.asp

1 <% @LANGUAGE = "VBScript" %>2 3 <% ' Fig. 26.4 : default.asp 4 ' Forum home page 5 Option Explicit6 %>7 8 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"9 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">10 11 <html xmlns = "http://www.w3.org/1999/xhtml">12 13 <head>14 <title>Deitel Message Forums</title>15 <link rel = "stylesheet" type = "text/css" 16 href = "style.css" />17 </head>18 19 <body>20 <h1>Deitel Message Forums</h1>21 <p><strong>Available Forums</strong></p>22 <ul>23 <%24 Dim xmlFile, xmlNodes, xmlItem25 Dim strPath, strTitle, strFileName26 27 strPath = Server.MapPath( "forums.xml" )28 29 Set xmlFile = Server.CreateObject( "Microsoft.XMLDOM" )30 xmlFile.Async = False31 32 If Not xmlFile.Load( strPath ) Then33 Call Server.Transfer( "invalid.html" )34 End If35

Link to CSS style sheet style.css.

Instantiate an XML DOM object.

Setting Async to False causes the object referenced by xmlFile to behave synchronously.

Method Load parses the XML document forums.xml.If the parsing fails, the browser is redirected to invalid.html.


Outline6

Default.asp

36 Set xmlNodes = xmlFile.DocumentElement.ChildNodes37 38 For Each xmlItem In xmlNodes39 strFileName = xmlItem.getAttribute( "filename" )40 strTitle = xmlItem.text41 %>42 <li>43 <a href = "<% =strFileName %>"><% =strTitle %></a>44 </li>45 <%46 Next47 %>48 </ul>49 50 <p><strong>Forum Management</strong></p>51 52 <ul>53 <li><a href = "addForum.asp">Add a Forum</a></li>54 <li>Delete a Forum</li>55 </ul>56 57 </body>58 59 </html>

Property DocumentElement gets the root element’s child nodes.

Property ChildNodes returns a collection of the element node’s child nodes.

Method getAttribute gets a forum’s filename.

The anchor element creates a link to the available forums.

This anchor element links to the ASP document addForum.asp that allows the user to create a new forum.


Outline7

Program Output


Outline8

Template.xml

1 <?xml version = "1.0"?>2 3 4 5 6 <?xml:stylesheet type = "text/xsl" href = "formatting.xsl"?>7 8 <forum>9 </forum>

The stylesheet processing instruction references formatting.xsl.


Outline9

AddForum.asp

1 <% @LANGUAGE = "VBScript" %>2 <% Option Explicit %>3 4 <% ' Fig. 26.6 : addForum.asp %>5 6 <%7 Dim xmlFile, xmlRoot, xmlNode8 Dim strTitle, strError, strPath9 10 If Request( "submit" ) <> Empty Then11 12 If Request( "name" ) <> Empty And _13 Request( "filename" ) <> Empty And _14 Request( "user" ) <> Empty And _15 Request( "title" ) <> Empty And _16 Request( "text" ) <> Empty Then17 18 ' Create a new XML file19 strPath = Server.MapPath( Request( "filename" ) )20 21 Set xmlFile = Server.CreateObject( "Microsoft.XMLDOM" )22 xmlFile.Async = False23 24 If xmlFile.Load( strPath ) Then25 Call Server.Transfer( "invalid.html" )26 End If27 28 ' set up the file29 Call xmlFile.Load( Server.MapPath( "template.xml" ) )30 31 ' get the root element32 Set xmlRoot = xmlFile.DocumentElement33

Test to see if the form was submitted by testing the form’s Submit field for a value.

Check to see if a value was enetered in each of the form fields.

Method Load loads the template XML document.


Outline10

AddForum.asp

34 ' set the filename35 Call xmlRoot.SetAttribute( "filename", _36 Request( "filename" ) )37 38 ' create Name node39 Set xmlNode = xmlFile.CreateElement( "name" )40 xmlNode.Text = Request( "name" )41 Call xmlRoot.AppendChild( xmlNode )42 43 ' create first message44 Set xmlNode = xmlFile.CreateElement( "message" )45 Call xmlNode.SetAttribute( "timestamp", Now & " EST" )46 Call xmlRoot.AppendChild( xmlNode )47 48 Set xmlRoot = xmlNode49 50 ' create user node51 Set xmlNode = xmlFile.CreateElement( "user" )52 xmlNode.Text = Request( "user" )53 Call xmlRoot.AppendChild( xmlNode )54 55 ' create title node56 Set xmlNode = xmlFile.CreateElement( "title" )57 xmlNode.Text = Request( "title" )58 Call xmlRoot.AppendChild( xmlNode )59 60 ' create text node61 Set xmlNode = xmlFile.CreateElement( "text" )62 xmlNode.Text = Request( "text" )63 Call xmlRoot.AppendChild( xmlNode )64 65 Call xmlFile.Save( strPath ) ' save the file66 67 ' load XML file68 strPath = Server.MapPath( "forums.xml" )

Method setAttribute creates an attribute node named filename that has the value contained in form field filename.

Method AppendChild appends the newly created element name node to the root element.

Calling method Save saves the XML document to disk.


Outline11

AddForum.asp

69 70 Set xmlFile = Server.CreateObject( "Microsoft.XMLDOM" )71 xmlFile.Async = False72 73 If Not xmlFile.Load( strPath ) Then74 Call Server.Transfer( "invalid.html" )75 End If76 77 ' get the root node78 Set xmlRoot = xmlFile.DocumentElement 79 80 ' create nodes81 Set xmlNode = xmlFile.CreateElement( "forum" )82 Call xmlNode.SetAttribute( "filename", _83 Request( "filename" ) )84 xmlNode.Text = Request( "name" )85 Call xmlRoot.AppendChild( xmlNode )86 87 Call xmlFile.Save( strPath ) ' save the file88 89 ' finished processing90 Call Server.Transfer( "default.asp" )91 Else92 strError = "ERROR: Invalid input."93 End If94 95 End If96 %>97 98 <!DOCTYPE html99 PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"100 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">101

Open XML document forums.xml.

Modify forums.xml.

Save forums.xml with its new contents to disk.


Outline12

AddForum.asp

102 <html xmlns = "http://www.w3.org/1999/xhtml">103 <head>104 <title>Add a Forum</title>105 <link rel = "stylesheet" type = "text/css" href = "style.css" />106 </head>107 108 <body>109 <p>Create a Forum</p>110 <p><% =strError %></p>111 112 <form method = "post" action = "addForum.asp">113 114 <h2>115 Forum Name:<br />116 <input type = "text" size = "40" name = "name"117 value = "<% =Request( "name" ) %>" />118 </h2>119 120 <h2>121 Forum File Name:<br />122 <input type = "text" size = "40" name = "filename"123 value = "<% =Request( "filename" ) %>" />124 </h2>125 126 <h2>127 User:<br />128 <input type = "text" size = "40" name = "user"129 value = "<% =Request( "user" ) %>" />130 </h2>131 132 <h2>133 Message Title:<br />134 <input type = "text" size = "40" name = "title"135 value = "<% =Request( "title" ) %>" />136 </h2>

This XHTML form allows a user to input the name, filename, a user name, a message title and the message text to create a new forum.


Outline13

AddForum.asp

137 138 <h2>139 Message Text:<br />140 <textarea name = "text" cols = "40"141 rows = "4"><% =Request( "text" ) %></textarea>142 </h2>143 144 <h2>145 <input type = "submit" name = "submit" value = "Submit" />146 <input type = "reset" value = "Clear" />147 </h2>148 149 </form>150 151 <p>152 <a href = "default.asp">Return to Main Page</a>153 </p>154 155 </body>156 157 </html>

The Submit button submits the form and the values input in the form fields.

The Clear button will delete all values in the form fields.


Outline14

Program Output


Outline15

ForumASP.xml

1 <?xml version = "1.0"?>2 3 4 5 6 <?xml:stylesheet type = "text/xsl" href = "formatting.xsl"?>7 8 <forum filename = "forumASP.xml">9 10 <name>ASP Forum</name>11 12 <message timestamp = "4/28/2001 2:50:34 PM EST">13 <user>D. Bug</user>14 <title>I Love ASP!</title>15 <text>Everyone should use ASP.</text>16 </message>17 18 <message timestamp = "5/8/2001 11:09:54 AM EST">19 <user>Ms. Quito</user>20 <title>ASP and XML</title>21 <text>What a powerful combination. Try it!</text>22 </message>23 24 <message timestamp = "5/15/2001 4:39:50 PM EST">25 <user>Sarge Ant</user>26 <title>ASP</title>27 <text>This <em>army ant</em> uses ASP in boot camp.</text>28 </message>29 30 </forum>

Name of forum.

Each message element and its children contain the information for a post.


Outline16

Formatting.xsl

1 <?xml version = "1.0"?>2 3 4 5 6 <xsl:stylesheet version = "1.0" 7 xmlns:xsl = "http://www.w3.org/1999/XSL/Transform">8 9 <xsl:output method = "html" omit-xml-declaration = "no" 10 doctype-system = 11 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" 12 doctype-public = "-//W3C//DTD XHTML 1.0 Strict//EN" />13 14 <xsl:template match = "/">15 16 <html xmlns = "http://www.w3.org/1999/xhtml">17 <xsl:apply-templates select = "*" />18 </html>19 20 </xsl:template>21 22 <xsl:template match = "forum">23 24 <head>25 <title><xsl:value-of select = "name"/></title>26 <link rel = "stylesheet" type = "text/css"27 href = "style.css" />28 </head>29

Element xsl:stylesheet is the XSLT document’s root element

Attribute version specifies the XSLT version to which this style sheet conforms.

The attribute xmlns creates a namespace prefix xsl.

The xsl:output element specifies how the result tree is output.Attribute method is assigned xml, which specifies that an XML document is being output.

Attribute omit-xml-declaration is assigned no, which results in an XML declaration in the result tree.

This template that matches the XML document root (/).

The asterisk selects element nodes.

Link to the CSS style sheet style.css.


Outline17

Formatting.xsl

30 <body>31 32 <table width = "100%" cellspacing = "0"33 cellpadding = "2">34 <tr>35 <td class = "forumTitle">36 <xsl:value-of select = "name" />37 </td>38 </tr>39 </table>40 41 <table width = "100%" cellspacing = "0"42 cellpadding = "2">43 <xsl:apply-templates 44 select = "message" />45 </table>46 47 <p>48 <a>49 <xsl:attribute50 name = "href">addPost.asp?file=<xsl:value-of 51 select = "@filename" />52 </xsl:attribute>53 Post a Message</a><br />54 <a href = "default.asp">Return to Main Page</a>55 </p>56 57 </body>58 59 </xsl:template>60 61 <xsl:template match = "message">62

Get value of name element.

Apply message template.

Get the value of attribute filename.

Begin template message.


Outline18

Formatting.xsl

63 <tr>64 <td class = "msgTitle">65 <xsl:value-of select = "title" />66 </td>67 </tr>68 69 <tr>70 <td class = "msgInfo">71 by72 <em><xsl:value-of select = "user" /></em>73 at74 <span class = "date">75 <xsl:value-of select = "@timestamp" />76 </span>77 </td>78 </tr>79 80 <tr>81 <td class = "msgText">82 <xsl:value-of select = "text" />83 </td>84 </tr>85 86 87 </xsl:template>88 89 </xsl:stylesheet>

Get value of user element.Get value of attribute timestamp.

Get value of text element.


Outline19

ForumASP_transformed.html

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">3 4 5 6 7 <html xmlns = "http://www.w3.org/1999/xhtml">8 9 <head>10 <title>ASP Forum</title>11 <link href = "site.css" type = "text/css" rel = "stylesheet" />12 </head>13 14 <body>15 <table cellpadding = "2" cellspacing = "0" width = "100%">16 <tr>17 <td class = "forumTitle">ASP Forum</td>18 </tr>19 </table>20 21 <table cellpadding = "2" cellspacing = "0" width = "100%">22 <tr>23 <td class = "msgTitle">I Love ASP!</td>24 </tr>25 <tr>26 <td class = "msgInfo">27 by28 <em>D. Bug</em>29 at30 <span class = "date">4/28/2001 2:50:34 PM EST</span></td>31 </tr>32 <tr>

Forum title.

Message title.

Message author.

Time and date posted.


Outline20


33 <td class = "msgText">Everyone should use ASP.</td>34 </tr>35 <tr>36 <td class = "msgTitle">ASP and XML</td>37 </tr>38 <tr>39 <td class = "msgInfo">40 by41 <em>Ms. Quito</em>42 at43 <span class = "date">5/8/2001 11:09:54 AM EST</span></td>44 </tr>45 <tr>46 <td class = "msgText">47 What a powerful combination. Try it!</td>48 </tr>49 <tr>50 <td class = "msgTitle">ASP</td>51 </tr>52 <tr>53 <td class = "msgInfo">54 by55 <em>Sarge Ant</em>56 at57 <span class = "date">5/15/2001 4:39:50 PM EST</span></td>58 </tr>59 <tr>60 <td class = "msgText">61 This army ant uses ASP in boot camp.</td>62 </tr>63 </table>64

Message text.

Message title.

Message author.Time and date posted.

Message text.

Message title.

Message author.Time and date posted.

Message text.


Outline21


Program Output

65 <p>66 <a href = "addPost.asp?file=forumASP.xml">Post a Message</a>67 <br>68 <a href = "default.asp">Return to Main Page</a>69 </p>70 71 </body>72 73 </html>

Link to add a new post.


Outline22

AddPost.asp

1 <% @LANGUAGE = "VBScript" %>2 3 <% ' Fig. 26.10 : addPost.asp 4 ' ASP document for posting a message5 6 Option Explicit7 8 Dim xmlFile, xmlRoot, xmlNode9 Dim strTitle, strError, strPath10 11 If Request( "submit" ) <> Empty Then12 13 If Request( "file" ) <> Empty And _14 Request( "userName" ) <> Empty And _15 Request( "messageTitle" ) <> Empty And _16 Request( "messageText" ) <> Empty Then17 18 strPath = Server.MapPath( Request( "file" ) )19 20 Set xmlFile = Server.CreateObject( "Microsoft.XMLDOM" )21 xmlFile.Async = False22 23 If Not xmlFile.Load( strPath ) Then24 Call Server.Transfer( "invalid.html" )25 End If26 27 ' get the root node28 Set xmlRoot = xmlFile.DocumentElement29 30 ' create first message31 Set xmlNode = xmlFile.CreateElement( "message" )32 Call xmlNode.SetAttribute( "timestamp", Now & " EST" )33 Call xmlRoot.AppendChild( xmlNode )34 35 Set xmlRoot = xmlNode

Test to see if the form was submitted by testing the form’s Submit field for a value.

Check to see if a value was enetered in each of the form fields.

Method Load loads the forum XML document.

Create a message node.

Create a timeStamp attribute for the message node.


Outline23

AddPost.asp

36 37 ' create user node38 Call CreateElementNode( "user", "userName", xmlNode )39 40 ' create title node41 Call CreateElementNode( "title", "messageTitle", xmlNode )42 43 ' create text node44 Call CreateElementNode( "text", "messageText", xmlNode )45 46 Call xmlFile.Save( strPath ) ' save the file47 48 ' finished processing49 Call Server.Transfer( Request( "file" ) )50 Else51 strError = "ERROR: Invalid input."52 End If53 54 End If55 56 ' procedure that creates an element node57 Sub CreateElementNode( elementName, formElement, node )58 Set xmlNode = xmlFile.CreateElement( elementName )59 xmlNode.Text = Request( formElement )60 Call xmlRoot.AppendChild( xmlNode )61 End Sub62 %>63 64 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"65 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">66

Create the children of the message node: user, title and text.


Outline24

AddPost.asp

67 <html xmlns = "http://www.w3.org/1999/xhtml">68 <head>69 <title>Post a Message</title>70 <link rel = "stylesheet" type = "text/css"71 href = "style.css" />72 </head>73 74 <body>75 <p><% =strError %></p>76 77 <form method = "post" action = "addPost.asp">78 <p>79 User:<br />80 <input type = "text" size = "40" name = "userName"81 value = "<% =Request( "userName" ) %>" />82 </p>83 84 <p>85 Message Title:<br />86 <input type = "text" size = "40" name = "messageTitle"87 value = "<% =Request( "messageTitle" ) %>" />88 </p>89 90 <p>91 Message Text:<br />92 <textarea name = "messageText" cols = "40"93 rows = "4"><% =Request( "messageText" ) %>94 </textarea>95 </p>96 97 <p>98 <input type = "hidden" name = "file"99 value = "<% =Request( "file" ) %>"/>100 <input type = "submit" name = "submit" value = "Submit" />

This form allows the user to create a post by entering the values into the form fields.


Outline25

AddPost.asp

Program Output

101 <input type = "reset" value = "Clear" />102 </p>103 </form>104 105 <p>106 <a href = "<% =Request( "file" ) %>">Return to Forum</a>107 </p>108 </body>109 110 </html>


26

26.6 Posting Messages

Fig. 26.11 New forum on the message board.


27

26.6 Posting Messages

Fig. 26.12 Initial content of the newly added forum.


28

26.7 Other Documents

Fig. 26.13 Contents of the Internet and World Wide Web: 2nd Edition.


Outline29

Invalid.html

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">3 4 5 6 7 <html xmlns = "http://www.w3.org/1999/xhtml">8 9 <head>10 <title>Deitel Book Organization</title>11 <link rel = "stylesheet" type = "text/css"12 href = "site.css" />13 </head>14 15 <body>16 <h1>Invalid Request.</h1>17 18 <p><a href = "default.asp">Return to Main Page</a></p>19 </body>20 21 </html>

Link that references CSS style sheet site.css.


Outline30

Site.css

1 /* Fig. 26.15 : site.css */2 /* Stylesheet for XHTML documents */3 4 body5 {6 background: white;7 color: black;8 font-family: Arial, sans-serif;9 font-size: 10pt;10 }11 12 a13 {14 background: transparent;15 color: blue;16 text-decoration: none;17 }18 19 a:hover20 {21 text-decoration: underline;22 }23 24 table25 {26 border-width: 1px;27 border-style: solid;28 }29 30 .forumTitle31 {32 background: lime;33 color: black;34 font-size: 12pt;35 font-weight: bold;

Define styles for the body element.

Define styles for the anchor element.

Define styles for the table element.


Outline31

Site.css

36 text-align: center;37 }38 39 .msgTitle40 {41 background: silver;42 color: black;43 font-size: 10pt;44 font-weight: bold;45 }46 47 .msgInfo48 {49 background: silver;50 color: black;51 font-size: 10pt;52 }53 54 .msgPost55 {56 background: silver;57 color: black;58 font-size: 8pt;59 }60 61 .msgText62 {63 font-size: 10pt;64 padding-left: 10px;65 }66 67 .date68 {69 font-size: 8pt;70 }


Outline32

Style.css

1 /* Fig. 26.16 : style.css */2 /* Stylesheet for forums */3 4 h1 5 {6 color: #330099;7 letter-spacing: 2px;8 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;9 background-color: transparent;10 }11 12 h213 {14 color: #6633FF;15 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;16 font-size: small;17 background-color: transparent;18 }19 20 p21 {22 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;23 color: #336666;24 letter-spacing: 1px;25 font-size: larger;26 font-weight: bold;27 background-color: transparent;28 }29 30 body31 {32 background-image: url(bug2.gif);33 background-repeat: no-repeat;34 margin-top: 5%;35 background-position: 25%;

Define styles for the h1 element.

Define styles for the h2 element.

Define styles for the p element.

Define styles for the body element.


Outline33

Style.css

36 margin-left: 10%;37 }38 39 li40 {41 font-family: "Courier New", Courier, monospace;42 font-weight: bolder;43 list-style-type: circle;44 color: #3333FF;45 background-color: transparent;46 }47 48 input49 {50 background-color: transparent;51 color: #336666;52 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;53 }54 55 textarea56 {57 background-color: transparent;58 color: #336666;59 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;60 }61 62 .forumTitle63 {64 color: #FFFFCC;65 font-size: 14pt;66 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;67 text-align: center;68 background-color: #6666CC;69 }70

Define styles for the li element.

Define styles for the input element.

Define styles for the textarea element.


Outline34

Style.css

71 .msgTitle72 {73 background: #FFFFCC;74 color: black;75 font-size: 10pt;76 font-weight: bold;77 }78 79 .msgInfo80 {81 background: #FFFFCC;82 color: black;83 font-size: 10pt;84 }85 86 .msgPost87 {88 background: silver;89 color: black;90 font-size: 8pt;91 }92 93 .msgText94 {95 font-size: 10pt;96 padding-left: 10px;97 }98 99 .date100 {101 font-size: 8pt;102 }