A List Apart

Menu

Kick ASP Design: ASP for Non-Programmers

Web designers are not programmers, and that can often be a problem when you need to create an active element in your web site using server side scripting. Programming is no light task, it seems, and most designers whimper and cower away when faced with even a small snippet of Perl or C.

Article Continues Below

Fear not, however, because Active Server Pages and VBScript make it easy to deliver effective server side scripting. This article assumes you know a little bit about how computer programming works, but you don’t really need to know anything about VBScript or Visual Basic at all to get started. I’ll walk you through two very useful ASP applications, and when you’re done with this tutorial, you can even call yourself a programmer.

Putting two and two together

Just to get the hang of creating ASP pages, we’re going to start out with a program that adds together two numbers, and prints the result in a web page. We’re going to skip the usual “Hello World,” since that’s static content, which would defeat the point of using ASP.

Active Server Pages are usually programmed in either VBScript or JavaScript, and we’re going to use some good old VBScript, because it’s an easy language to learn, and because it’s the default ASP programming language. Active Server Pages are written in HTML just like normal pages, except for a special scripting delimeter tag that contains the VBScript.

<html>
<% You can put your code in here %><body>
<% Or in here %>
</body></html>

As you can see, the code can go anywhere in the document, and it executes when the server reads it. So code at the top of the page is executed first. Anything inside the <% %> delimeters will be executed, and everything else will be sent to the browser as normal.

Once you have a web server that will run ASP scripts, save the following page as add.asp and run it:

<% Option Explicit
	Dim Sum ' Creating a variable
	Sum = 2 + 2 ' Assigning an arithmetic »
		expression to the variable
%><html><head>
<title>Two plus two</title>
</head><body>
<% =Sum %>
</body></html>

{Line wraps are marked thusly: ». – Ed.}

If all goes well, then you should have a page that displays “4,” and nothing else. If you get an error message or something else, then it’s likely that your web server doesn’t play well with ASP. Notice the apostrophes {single primes}. Those are Visual Basic’s comment markers, and everything after one of them on a line will be ignored when the page executes. The line that says “Option Explicit” should be at the top of every script. It makes sure you can’t use variables that you do not Dim (Short for “Dimension”) first.

Whenever an equals sign follows an opening delimeter, such as in the body tag of the example, the following line will be sent to the browser. In this case it’s the sum of the two numbers computed at the start of the script.

Now that you have the basics of ASP in hand, it’s time to make a script that is actually useful to web designers. That’s right, it’s a style sheet switcher.

The Old Switcheroo

Many designers have talked about separating presentation from structure, but to implement having one of several style sheets on page, you’re going to want some server side scripting. What better use for ASP than this? This script can choose from any number of style sheets in a directory and depending on a variable sent through the URL, display the page with one of them.

Before you start scripting, make two style sheets that can define the same content. For the example, I will make one with blue text, and one with red text.

I’m going to name the style sheet containing body{color:blue} blue.css, and the one with body{color:red} red.css. Then, in the script, I can read from the VBScript function Request(). Request() gets all of the form and URL information sent to a web page and allows it to be easily used in a script. For instance, a URL ending in “page.asp?word=kangaroo” would be processed by page.asp, where Request("word") would return the value “kangaroo.”

It’s all common sense from there. Here’s the code for my style sheet switching page:

<% Option Explicit
	Dim Style
	Style = Request("style")
%><html><head>
<title>The Old Switcheroo</title><link rel=StyleSheet href="<% »
	=Style %>.css" type="text/css"
media=all />
</head><body>
What color will this text be? That's up to you.
</body></html>

Note the line with the <link> tag. That’s right, I put a VBScript delimiter within an HTML tag. It’s perfectly legal. The variable Style stores the style sheet name from the URL. Then, it’s put inside the <link> tag so that the browser can link the style sheet and the page together. This script isn’t just limited to blue.css and red.css. Any style sheet can be accessed if its filename minus the the extension is in the URL.

Note what happens when no query information is added to the URL. Instead of a filename going to the <link> tag, you instead get “.css” and no style sheet is displayed. A simple conditional statement can solve this problem by setting a default style sheet:

If Request("style") <> »
		"" Then
	Style = Request("style")
End If

The VBScript If statement is simple. The expression on the first line is evaluated, and if it’s true, then the following code is executed. Else will execute if the original expression is false, and ElseIf will evaluate another expression if the original one is false. End If signals the end of the If statement. In this case, if the value of “style” in the URL wasn’t blank, then its value is used.

Freshly Baked Cookies

If you want to be able to switch your style sheets and make sure the same style sheet displays whenever a user visits your site, you have to send them a cookie. Cookies are easy to do with ASP, and they can be used for much more than just remembering display preferences. In your style sheet switching page, you can add some code that will send a cookie to the user whenever a new style sheet is defined.

If Request("style") <> »
		"" Then
	Style = Request("style")
	Response.Cookies("style") = Style
End If

The value in parentheses is the name of the cookie. We are creating or editing a cookie called “style.” We write the text from the URL that contains the preferred style sheet into the cookie.

If we want to grab that cookie from the browser later, we do this:

Style = Request.Cookies("style")

With all of this in mind, we can now create a script that will check for style sheet preferences first from the URL, then from cookies. If nothing is found, it sets to the default style sheet.

If Request("style") <> »
		"" Then
	Style = Request("style")
	Response.Cookies("style") = »
		Request("style")
ElseIf Request.Cookies("style") »
		<> "" Then
	Style = Request.Cookies("style")
Else
	Style = "blue"
End If

So there you have it. Real separation of design and content is alive, and you know how to pull it off. Now, be amazed as we create…

The Feedback Form

You may have used a feedback form of some type on your web site. If so, it probably used email, and the tools were probably already ready to use. But sometimes, when you get a lot of feedback, email just isn’t a good option. It can be much more convenient to write all of the comments to a text file for later reading. Before you get started with this one, you need to make sure that you have a directory on your server with write permission.

Writing text files in ASP is accomplished using a programming object called the File System Object. Objects are sort of like normal variables. You use the Dim statement to create them, and you can set values to them. However, they are designed to perform specific tasks in a script or program, and they can do much more than normal variables. The following is the code for creating a File System Object, and then using it to create a TextStream object, which is the actual file you will be dealing with.

Dim FileSys, File ' FileSys is the File System »
	Object, and File is our
TextStream objectSet FileSys = CreateObject("Scripting.FileSystemObject") »
	 ' Creating the
File System Object
Set File = FileSys.OpenTextFile »
	(Server.MapPath("feedback.txt"), 8, 0) '
Opening a text file for appending

First, I created the two objects, then I used the Set statement to make FileSys into a File System Object, which I then used to open the text file. The function Server.MapPath() simply retrieves the file path of a file given its virtual address on the server. The number 8 following that tells the File System Object to open the file for appending, which means that we will add on text to the file. To completely overwrite the file, we would use 2, and to just read it, we would use 1. The number 0 at the end says that we will be editing the file as ASCII text.

We now have a TextStream object called File, which has various methods that we can use to append it. A method is basically a task that a certain object performs. When you use a method, it usually takes the form Object.Method(Arguments). In the above code, we used the MapPath method of the Server object, with our argument being the file we wanted. We also used the OpenTextFile method of FileSys to open the specified text file. We’re going to deal mostly with the WriteLine method of a TextStream object, which writes a specified string to the file, along with a line break.

Before we start with that, however, we need to create an HTML form for submitting the feedback. The form should use the “Post” method, which doesn’t send the data through the URL, as we worked with in the first example. The data is retrieved the same way, though, with the Request() function. Here’s the HTML for the form page:

<html>
<head>
<title>Feedback Form</title>
</head>
<body><form method="post" action="feedback.asp">Your name: <input type="text"»
	 name="name" /><br />
Email address: <input type="text"»
	 name="email" /><br />
Your comments:<br />
<textarea name="comments"»
	 cols="50" rows="15">
</textarea>
<input type="submit"»
	 value="Send" /></form></body>
</html>

When the user presses the Send button, feedback.asp will be called to process the form. In feedback.asp, Request("name") will return the text from the name box, Request("email") will be the text from the email box, and Request("comments") will be whatever lovely words the user put in the comment box. All you have to do is transfer it to your TextStream object and you are set. By now, you should be able to do this on your own, but I’ll give you the free code anyway:

Option ExplicitDim FileSys, File, Divider ' »
	FileSys is the File System Object, File is our
TextStream object, and Divider is a »
	string to visually divide up the text
fileSet FileSys = CreateObject("Scripting.FileSystemObject") »
	 ' Creating the
File System Object
Set File = FileSys.OpenTextFile »
	(Server.MapPath("feedback.txt"), 8, 0) '
Opening a text file for appending
Divider = "--------------------"File.WriteLine(Divider)
File.WriteLine(Request("name"))
File.WriteLine(Request("email"))
File.WriteBlankLines(1) ' A little white »
	space never hurt anyone
File.WriteLine(Request("comments"))
File.WriteLine(Divider)
File.WriteBlankLines(1)File.Close ' Never leave your TextStream open

Create feedback.txt in its proper place and now whenever someone submits the form, everything they wrote will be neatly packaged into your text file for later reading.

It’s great when designers get a chance to flex their programming muscles. I hope you have learned something from this small lesson in ASP.

About the Author

No Comments