Upload
derek-hancock
View
213
Download
0
Embed Size (px)
Citation preview
2001 Prentice Hall, Inc. All rights reserved.
Chapter 15 – Case Study: Message Forum with Active Server Pages
Outline15.1 Introduction15.2 Setup and Message Forum Documents15.3 Forum Navigation15.4 Adding Forums15.5 Forum XML Documents15.6 Posting Messages15.7 Other HTML Documents
2001 Prentice Hall, Inc. All rights reserved.
15.1 Introduction
• Creating a Web-based message forum with XML– Virtual bulletin boards
– Use Microsoft’s Active Server Pages (ASP) technology
2001 Prentice Hall, Inc. All rights reserved.
15.2 Setup and Message Forum Documents
• Setup instructions to execute case study• Software requirements
– Web server software• Microsoft Personal Web Server (PWS) OR
• Microsoft Internet Information Services (IIS) OR
• Microsoft Internet Information Server (IIS)
– Internet Explorer 5.5+ (for XML and XSLT processing)
• Place files in virtual Web directory– c:\inetpub\wwwroot
2001 Prentice Hall, Inc. All rights reserved.
15.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.
forum1.xml Sample message forum.
formatting.xsl Document for transforming message forums into HTML.
addPost.asp Adds a message to a forum.
invalid.html Used to display an error message.
site.css Stylesheet for formatting HTML documents.
Fig. 15.1 Message forum documents.
2001 Prentice Hall, Inc. All rights reserved.
15.2 Setup and Message Forum Documents
• default.asp– Displays list of available message forums stored in XML
document forums.xml– Contains hyperlinks to each XML message forum document
and to addForum.asp
• addForum.asp– Adds forums to document forums.xml– Creates new XML message forum using forum template template.xml
• formatting.xsl– Transforms each XML message forum document into
HTML
2001 Prentice Hall, Inc. All rights reserved.
15.2 Setup and Message Forum Documents
• site.css– CSS document formats HTML for display
• addPost.asp – posts new messages to forum
• invalid.html– Displays when errors occur during processing
2001 Prentice Hall, Inc. All rights reserved.
15.3 Forum Navigation
Fig. 15.2 Key interactions between message forum documents.
2001 Prentice Hall, Inc. All rights reserved.
Outline1 <?xml version = "1.0"?>2 3 <!-- Fig. 15.3 : forums.xml -->4 5 <forums>6 7 <forum filename = "forum1.xml">8 <name>Forum 1 Name</name>9 </forum>10 11 </forums>
forums.xml
XML document that marks up the message forums.
Root element forums can hold any number of message forums
Stores name of XML document that contains forum’s markup
name element marks up name of forum (used as a hyperlink descriptor in default.asp)
2001 Prentice Hall, Inc. All rights reserved.
Outline1 <% @LANGUAGE = "VBScript" %>2 <% Option Explicit %>3 4 <% ' Fig. 15.4 : default.asp %>5 6 <!DOCTYPE html7 PUBLIC "-//W3C//DTD HTML 4.0//EN"8 "http://www.w3.org/TR/REC-html40/strict.dtd">9 10 <html>11 12 <head>13 <title>Deitel Message Forums</title>14 <link rel = "stylesheet" type = "text/css" href = "site.css">15 </head>16 17 <body>18 <h1>Deitel Message Forums</h1>19 <p><strong>Available Forums</strong></p>20 <ul>21 <%22 Dim xmlFile, xmlNodes, xmlItem23 Dim strPath, strTitle, strFileName24 25 strPath = Server.MapPath( "forums.xml" )26 27 Set xmlFile = Server.CreateObject( "Microsoft.XMLDOM" )28 xmlFile.Async = False29 30 If Not xmlFile.Load( strPath ) Then31 Call Response.Redirect( "invalid.html" )32 End If33 34 Set xmlNodes = xmlFile.DocumentElement.ChildNodes35
default.asp
Message forums main page.
Sets scripting language to VBScript
All variables must be declared explicitly
Gets absolute path for file forums.xml and stores it in variable strPath
CreateObject method instantiates a DOMDocument object (Microsoft.XMLDOM), assigns object to xmlFile
Sets object referenced by xmlFile to behave synchronouslyCalls method Load to parse the XML
document. Returns true if parsing succeeds, otherwise returns falseDocumentElement property retrieves root element’s child nodes
2001 Prentice Hall, Inc. All rights reserved.
Outline36 For Each xmlItem In xmlNodes37 strFileName = xmlItem.getAttribute( "filename" )38 strTitle = xmlItem.text39 %>40 <li>41 <a href = "<% =strFileName %>"><% =strTitle %></a>42 </li>43 <%44 Next45 %>46 </ul>47 48 <p><strong>Forum Management</strong></p>49 50 <ul>51 <li><a href = "addForum.asp">Add a Forum</a></li>52 <li>Delete a Forum</li>53 </ul>54 55 </body>56 57 </html>
default.asp
Message forums main page. For Each loop iterates through all
nodes in child nodes collection.
getAttribute method returns value of node’s filename attribute and assigns it to strFileName
text property returns node’s text content (forum’s name)
Creates an anchor with value of strFileName and uses strTitle as text description of anchor.
2001 Prentice Hall, Inc. All rights reserved.
Outline1 <?xml version = "1.0"?>2 3 <!-- Fig. 15.5 : template.xml -->4 <?xml:stylesheet type = "text/xsl" href = "formatting.xsl"?>5 6 <forum>7 </forum>
template.xml
Template for message forum XML documents.
The stylesheet processing instruction references formatting.xsl.
2001 Prentice Hall, Inc. All rights reserved.
Outline1 <% @LANGUAGE = "VBScript" %>2 <% Option Explicit %>3 4 <% ' Fig. 15.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 ' Lock application. No modifications but ours.19 Call Application.Lock()20 21 ' Creating a new XML file.22 strPath = Server.MapPath( Request( "filename" ) )23 24 Set xmlFile = Server.CreateObject( "Microsoft.XMLDOM" )25 xmlFile.Async = False26 27 If xmlFile.Load( strPath ) Then28 Call Application.Unlock()29 Call Response.Redirect( "invalid.html" )30 End If31 32 ' Set up the file.33 Call xmlFile.Load( Server.MapPath( "template.xml" ) )34
addForum.asp
Page to add a forum.
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 entered in each of the form fields.
Method Load loads the template XML document.
2001 Prentice Hall, Inc. All rights reserved.
Outline35 ' Get the root node.36 Set xmlRoot = xmlFile.DocumentElement37 38 ' Set the filename.39 Call xmlRoot.SetAttribute( "filename", _40 Request( "filename" ) )41 42 ' Create Name node.43 Set xmlNode = xmlFile.CreateElement( "name" )44 xmlNode.Text = Request( "name" )45 Call xmlRoot.AppendChild( xmlNode )46 47 ' Create first message.48 Set xmlNode = xmlFile.CreateElement( "message" )49 Call xmlNode.SetAttribute( "timestamp", Now & " EST" )50 Call xmlRoot.AppendChild( xmlNode )51 52 Set xmlRoot = xmlNode53 54 ' Create user node.55 Set xmlNode = xmlFile.CreateElement( "user" )56 xmlNode.Text = Request( "user" )57 Call xmlRoot.AppendChild( xmlNode )58 59 ' Create title node.60 Set xmlNode = xmlFile.CreateElement( "title" )61 xmlNode.Text = Request( "title" )62 Call xmlRoot.AppendChild( xmlNode )63 64 ' Create text node.65 Set xmlNode = xmlFile.CreateElement( "text" )66 xmlNode.Text = Request( "text" )67 Call xmlRoot.AppendChild( xmlNode )68 69 Call xmlFile.Save( strPath ) ' Save the file.
addForum.asp
Page to add a forum.
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.
Save method saves the XML document to disk.
2001 Prentice Hall, Inc. All rights reserved.
Outline70 71 ' Load XML file.72 strPath = Server.MapPath( "forums.xml" )73 74 Set xmlFile = Server.CreateObject( "Microsoft.XMLDOM" )75 xmlFile.Async = False76 77 If Not xmlFile.Load( strPath ) Then78 Call Application.Unlock()79 Call Response.Redirect( "invalid.html" )80 End If81 82 ' Get the root node.83 Set xmlRoot = xmlFile.DocumentElement 84 85 ' Create Nodes.86 Set xmlNode = xmlFile.CreateElement( "forum" )87 Call xmlNode.SetAttribute( "filename", _88 Request( "filename" ) )89 xmlNode.Text = Request( "name" )90 Call xmlRoot.AppendChild( xmlNode )91 92 Call xmlFile.Save( strPath ) ' Save the file.93 94 ' Finished processing.95 Call Application.Unlock()96 Call Response.Redirect( "default.asp" )97 Else98 strError = "ERROR: Invalid input."99 End If100 101 End If102 %>103
addForum.asp
Page to add a forum.
Open XML document forums.xml.
Modify forums.xml.
Save forums.xml with its new contents to disk.
2001 Prentice Hall, Inc. All rights reserved.
Outline104 <!DOCTYPE html105 PUBLIC "-//W3C//DTD HTML 4.0//EN"106 "http://www.w3.org/TR/REC-html40/strict.dtd">107 108 <html>109 <head>110 <title>Add a Forum</title>111 <link rel = "stylesheet" TYPE = "text/css" href = "site.css">112 </head>113 114 <body>115 <p><% =strError %></p>116 117 <form method = "POST" action = "addForum.asp">118 119 <p>120 Forum Name:<br />121 <input type = "text" size = "40" name = "name"122 value = "<% =Request( "name" ) %>">123 </p>124 125 <p>126 Forum File Name:<br />127 <input type = "text" size = "40" name = "filename"128 value = "<% =Request( "filename" ) %>">129 </p>130 131 <p>132 User:<br />133 <input type = "text" size = "40" name = "user"134 value = "<% =Request( "user" ) %>">135 </p>136 137 <p>138 Message Title:<br />
addForum.asp
Page to add a forum.
XHTML form allows user to input name, filename, user name, message title and message text to create a new forum.
2001 Prentice Hall, Inc. All rights reserved.
Outline139 <input type = "text" size = "40" name = "title"140 value = "<% =Request( "title" ) %>">141 </p>142 143 <p>144 Message Text:<br />145 <textarea name = "text" cols = "40"146 rows = "4"><% =Request( "text" ) %></textarea>147 </p>148 149 <p>150 <input type = "submit" name = "submit" value = "Submit">151 <input type = "Reset" value = "Clear">152 </p>153 154 </form>155 156 <p>157 <a href = "default.asp">Return to Main Page</a>158 </p>159 160 </body>161 162 </html>
addForum.asp
Page to add a forum.
Submit button submits form and values from form fields.Button with input type reset
deletes all values in form fields
2001 Prentice Hall, Inc. All rights reserved.
Outline1 <?xml version = "1.0"?>2 3 <!-- Fig. 15.7 : forum1.xml -->4 5 <?xml:stylesheet type = "text/xsl" href = "formatting.xsl"?>6 7 <forum file = "forum1.xml">8 9 <name>Forum 1 Name</name>10 11 <message timestamp = "06/28/00 14:22">12 <user>Person1</user>13 <title>Title One</title>14 <text>Text of message of Title One</text>15 </message>16 17 <message timestamp = "06/29/00 14:22">18 <user>Person2</user>19 <title>Title Two</title>20 <text>Text of message of Title Two</text>21 </message>22 23 <message timestamp = "06/29/00 14:28">24 <user>Person1</user>25 <title>Title Three</title>26 <text>Text of message of Title <em>Three</em></text>27 </message>28 29 </forum>
forum1.xml
Sample forum.
Name of forum.Message elements and child elements contain the information for a post.
2001 Prentice Hall, Inc. All rights reserved.
Outline1 <?xml version = "1.0"?>2 3 <!-- Fig. 15.8 : formatting.xsl -->4 5 <xsl:stylesheet version = "1.0" 6 xmlns:xsl = "http://www.w3.org/TR/WD-xsl">7 8 <xsl:template match = "/">9 <html>10 <xsl:apply-templates select = "*"/>11 </html>12 </xsl:template>13 14 <xsl:template match = "forum">15 16 <head>17 <title><xsl:value-of select = "name"/></title>18 <link rel = "stylesheet" type = "text/css"19 href = "site.css"/>20 </head>21 22 <body>23 24 <table width = "100%" cellspacing = "0"25 cellpadding = "2">26 <tr>27 <td class = "forumTitle">28 <xsl:value-of select = "name" />29 </td>30 </tr>31 </table>32 <xsl:apply-templates select = "message" />33
formatting.xsl
XSLT to transform XML forum document into HTML.
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.
This template that matches the XML document root (/).
Get value of name element.
Apply message template.
2001 Prentice Hall, Inc. All rights reserved.
Outline34 <p>35 <a>36 <xsl:attribute37 name = "href">addPost.asp?file=<xsl:value-of38 select = "@file" />39 </xsl:attribute>40 Post a Message</a><br />41 <a href = "default.asp">Return to Main Page</a>42 </p>43 44 </body>45 46 </xsl:template>47 48 <xsl:template match = "message">49 50 <table width = "100%" cellspacing = "0"51 cellpadding = "2">52 53 <tr>54 <td class = "msgTitle">55 <xsl:value-of select = "title"/>56 </td>57 </tr>58 59 <tr>60 <td class = "msgInfo">61 by62 <em><xsl:value-of select = "user"/></em>63 at64 <span class = "date">65 <xsl:value-of select = "@timestamp"/>66 </span>67 </td>68 </tr>
formatting.xsl
XSLT to transform XML forum document into HTML.Get the value of
attribute filename.
Begin template message.
Get value of user element.Get value of attribute timestamp.
Get value of title element
2001 Prentice Hall, Inc. All rights reserved.
Outline69 70 <tr>71 <td class = "msgText">72 <xsl:apply-templates select = "text"/>73 </td>74 </tr>75 76 </table>77 78 </xsl:template>79 80 </xsl:stylesheet>
formatting.xsl
XSLT to transform XML forum document into HTML.
Apply text property from template
2001 Prentice Hall, Inc. All rights reserved.
Outline1 <html>2 3 <head>4 <title>Forum 1 Name</title>5 <link href = "site.css" type = "text/css" rel = "stylesheet">6 </head>7 8 <body>9 <table cellpadding = "2" cellspacing = "0" width = "100%">10 <tr>11 <td class = "forumTitle">Forum 1 Name</td>12 </tr>13 </table>14 15 <table cellpadding = "2" cellspacing = "0" width = "100%">16 <tr>17 <td class = "msgTitle">Title One</td>18 </tr>19 <tr>20 <td class = "msgInfo">21 by22 <em>Person1</em>23 at24 <span class = "date">06/28/00 14:22</span>25 </td>26 </tr>27 <tr>28 <td class = "msgText">Text of message of Title One</td>29 </tr>30 </table>31 32 <table cellpadding = "2" cellspacing = "0" width = "100%">33 <tr>34 <td class = "msgTitle">Title Two</td>35 </tr>
Output of the transformation of the forum XML document.
Forum title.
Message title.
Message author.
Time and date posted.
Message text.
2001 Prentice Hall, Inc. All rights reserved.
Outline36 <tr>37 <td class = "msgInfo">38 by39 <em>Person2</em>40 at41 <span class = "date">06/29/00 14:22</span>42 </td>43 </tr>44 <tr>45 <td class = "msgText">Text of message of Title Two</td>46 </tr>47 </table>48 49 <table cellpadding = "2" cellspacing = "0" width = "100%">50 <tr>51 <td class = "msgTitle">Title Three</td>52 </tr>53 <tr>54 <td class = "msgInfo">55 by56 <em>Person1</em>57 at58 <span class = "date">06/29/00 14:28</span>59 </td>60 </tr>61 <tr>62 <td class = "msgText">Text of message of Title Three</td>63 </tr>64 </table>65 66 <p>67 <a href = "addPost.asp?file=forum1.xml">Post a Message</a>
Output of the transformation of the forum XML document.
Message author.
Time and date posted.
Message title.
Message author.
Time and date posted.
Message text.
Link to add a new post.
2001 Prentice Hall, Inc. All rights reserved.
Outline68 <br>69 <a href = "default.asp">Return to Main Page</a>70 </p>71 </body>72 73 </html>
Output of the transformation of the forum XML document.
2001 Prentice Hall, Inc. All rights reserved.
Outline1 <% @LANGUAGE = "VBScript" %>2 <% Option Explicit %>3 4 <% ' Fig. 15.10 : addPost.asp %>5 6 <%7 Dim xmlFile, xmlRoot, xmlNode8 Dim strTitle, strError, strPath9 10 If Request( "submit" ) <> Empty Then11 12 If Request( "file" ) <> Empty And _13 Request( "user" ) <> Empty And _14 Request( "title" ) <> Empty And _15 Request( "text" ) <> Empty Then16 17 ' Lock application. No modifications but ours.18 Call Application.Lock()19 20 strPath = Server.MapPath( Request( "file" ) )21 22 Set xmlFile = Server.CreateObject( "Microsoft.XMLDOM" )23 xmlFile.Async = False24 25 If Not xmlFile.Load( strPath ) Then26 Call Application.Unlock()27 Call Response.Redirect( "invalid.html" )28 End If29 30 ' Get the root node.31 Set xmlRoot = xmlFile.DocumentElement32 33 ' Create first message.34 Set xmlNode = xmlFile.CreateElement( "message" )35 Call xmlNode.SetAttribute( "timestamp", Now & " EST" )
addPost.asp
Adding a message to a forum.
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 entered 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.
2001 Prentice Hall, Inc. All rights reserved.
Outline36 Call xmlRoot.AppendChild( xmlNode )37 38 Set xmlRoot = xmlNode39 40 ' Create user node.41 Set xmlNode = xmlFile.CreateElement( "user" )42 xmlNode.Text = Request( "user" )43 Call xmlRoot.AppendChild( xmlNode )44 45 ' Create title node.46 Set xmlNode = xmlFile.CreateElement( "title" )47 xmlNode.Text = Request( "title" )48 Call xmlRoot.AppendChild( xmlNode )49 50 ' Create text node.51 Set xmlNode = xmlFile.CreateElement( "text" )52 xmlNode.Text = Request( "text" )53 Call xmlRoot.AppendChild( xmlNode )54 55 Call xmlFile.Save( strPath ) ' Save the file.56 57 ' Finished processing.58 Call Application.Unlock()59 Call Response.Redirect( Request( "file" ) )60 Else61 strError = "ERROR: Invalid input."62 End If63 64 End If65 %>66 67 <!DOCTYPE html68 PUBLIC "-//W3C//DTD HTML 4.0//EN"69 "http://www.w3.org/TR/REC-html40/strict.dtd">70
addPost.asp
Adding a message to a forum.
Create the children of the message node: user, title and text.
2001 Prentice Hall, Inc. All rights reserved.
Outline71 <html>72 <head>73 <title>Post a Message</title>74 <link rel = "stylesheet" type = "text/css" href = "site.css">75 </head>76 77 <body>78 <p><% =strError %></p>79 80 <form method = "POST" action = "addPost.asp">81 <p>82 User:<br />83 <input type = "text" size = "40" name = "user"84 value = "<% =Request( "user" ) %>">85 </p>86 <p>87 Message Title:<br />88 <input type = "text" size = "40" name = "title"89 value = "<% =Request( "title" ) %>">90 </p>91 <p>92 Message Text:<br />93 <textarea name = "text" cols = "40"94 rows = "4"><% =Request( "text" ) %></textarea>95 </p>96 <p>97 <input type = "hidden" name = "file"98 value = "<% =Request( "file" ) %>">99 <input type = "submit" name = "submit" value = "Submit">100 <input type = "Reset" value = "Clear">101 </p>102 </form>103
addPost.asp
Adding a message to a forum.
Form allows the user to create a post by entering the values into the form fields.
2001 Prentice Hall, Inc. All rights reserved.
Outline104 <p>105 <a href = "<% =Request( "file" ) %>">Return to Forum</a>106 </p>107 </body>108 109 </html>
addPost.asp
Adding a message to a forum.
Program Output
2001 Prentice Hall, Inc. All rights reserved.
Outline1 <!DOCTYPE html2 PUBLIC "-//W3C//DTD HTML 4.0//EN"3 "http://www.w3.org/TR/REC-html40/strict.dtd">4 5 <html>6 7 <!-- Fig. 15.11 : invalid.html -->8 9 <head>10 <title>Deitel Book Organization</title>11 <link rel = "stylesheet" type = "text/css" href = "site.css">12 </head>13 14 <body>15 <h1>Invalid Request.</h1>16 <p>17 <a href = "default.asp">Return to Main Page</a>18 </p>19 </body>20 21 </html>
invalid.html
Document showing that an error has occurred.
Link that references CSS style sheet site.css.
2001 Prentice Hall, Inc. All rights reserved.
Outline1 /* Fig. 15.12 : site.css */2 3 BODY4 {5 background: white;6 color: black;7 font-family: Arial, sans-serif;8 font-size: 10pt;9 }10 11 a12 {13 background: transparent;14 color: blue;15 text-decoration: none;16 }17 18 a:hover19 {20 text-decoration: underline;21 }22 23 table24 {25 border-width: 1px;26 border-style: solid;27 }28 29 .forumTitle30 {31 background: lime;32 color: black;33 font-size: 12pt;34 font-weight: bold;35 text-align: center;
site.css
CSS document for HTML pages.
Define styles for the body element.
Define styles for the anchor element.
Define styles for the table element.
2001 Prentice Hall, Inc. All rights reserved.
Outline36 }37 38 .msgTitle39 {40 background: silver;41 color: black;42 font-size: 10pt;43 font-weight: bold;44 }45 46 .msgInfo47 {48 background: silver;49 color: black;50 font-size: 10pt;51 }52 53 .msgPost54 {55 background: silver;56 color: black;57 font-size: 8pt;58 }59 60 .msgText61 {62 font-size: 10pt;63 padding-left: 10px;64 }65 66 .date67 {68 font-size: 8pt;69 }
site.css
CSS document for HTML pages.