31
2001 Prentice Hall, Inc. All rights reserved. Chapter 15 – Case Study: Message Forum with Active Server Pages Outline 15.1 Introduction 15.2 Setup and Message Forum Documents 15.3 Forum Navigation 15.4 Adding Forums 15.5 Forum XML Documents 15.6 Posting Messages 15.7 Other HTML Documents

2001 Prentice Hall, Inc. All rights reserved. Chapter 15 – Case Study: Message Forum with Active Server Pages Outline 15.1Introduction 15.2Setup and

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.

Outline

addForum.asp

Page to add a forum.

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.