TechiWarehouse.Com


Top 3 Products & Services

1.
2.
3.

Dated: Aug. 12, 2004

Related Categories

Active Server Pages

By Tim Malone
For affordable web design, web hosting, domain registration, and custom programming services, visit Focus Web Design.

Today you’re going to learn, in simple terms, how to use Microsoft’s Active Server Pages (ASP). This is a quick, easy, straight to the point, hands-on tutorial that will get you coding in no time by introducing a simple Member’s Only Area script.

Note that to properly understand this tutorial, you will need a working knowledge of HyperText Markup Language (HTML).

Running ASP Code

To run your ASP code, you will need to have access to a web server that supports it. In last week’s article, Installing a Web Sever in Windows, we taught you how you can run your very own web server on your computer. If you are using Windows and you don’t already have an ASP compatible web server installed, have a look through that article first. If you are running Linux, you can use Sun Java System Active Server Pages on the Apache web server. And, if you have an account with a web hosting company that supports ASP, you can upload your pages and test them there.

The Bare Bones

Well, let’s get started! Open up Notepad, or your favourite text editor, and save a file named myfirst.asp. Now, type the following code into the file:

<html>
<head>
<title>My First ASP Page</title>
</head>
<body>
<%
response.write("My First ASP Page")
%>
</body>
</html>

If you’ve used PHP before, you’ll instantly notice the similarities. The code is used in a normal HTML page (only it must have a .asp extension), and is contained within code tags. For ASP, you put your code in between <% and %> tags, but with PHP you use <?php and ?>.

So, what is this code doing? Run it, and you’ll find out. All it does is place the text "My First ASP Page" onto the page. So, you’ve learnt your first ASP command: response.write.

response.write can be combined with a number of "strings", and they can even be pulled from "variables". Sound confusing? Have a look at this code:

<%
dim name
name = "Tim"
response.write("My name " & "is " & name)
%>

If you run this code, it’ll come back at you and say "My name is Tim". Why? What we’ve done is used the response.write command to chuck out three different strings, all in succession.

The first string we’ve used is "My name ", the second string "is ", and the third string "Tim". We’ve joined them together using the ampersand (&).

The first two strings are self-explanatory, but how did the third string ("Tim") come about? We’ve used a variable. If you change the code to this:

response.write("My name " & "is " & "name")

 

Creating a Member's Only AreaWhat’s the difference? "name" now has quotation marks around it. If you run this, you’ll get "My name is name". By putting the quotation marks around it, we’ve made it a string, so ASP takes what we’ve written and outputs it. However, without the quotation marks, it’s a variable. So, ASP outputs the value of the variable instead.

You’ll notice the two lines beforehand both reference the variable name (which is name). The first line,

dim name

declares the variable to ASP. It introduces it. The line after that,

name = "Tim"

tells ASP what the variable name will equal. Are you starting to get the gist of variables now? Change a few things around in the code – just experiment and get the hang of things.

A Member’s Only Section – Simple Version

Now that we’ve discovered the very basics of ASP, we’ll jump in even further and create ourselves a little script. This script will create a "members only" section – to enter the user must have a valid username and password.

Create a text file and name it index.asp. Type in the following code, and then we’ll go through it:

<html>
<head>
<title>My Member’s Area</title>
</head>
<body>
<%
if request.form("username") = "johndoe" and request.form("password") = "letmein" then
%>
You are logged in!
<i>Secret Member’s Only stuff appears here.</i>
<% else %>
You must login to access this page.<br>
<% if request.form("submit") = "Enter!" then %>
<font color="red"><b>You entered an incorrect username/password combination. Please try again.</b></font><br>
<% end if %>
<form action="index.asp" method="post">
Username: <input type="text" name="username">
Password: <input type="password" name="password">
<input type="submit" name="submit" value="Enter!">
</form>
<% end if %>
</body>
</html>

What Does The Page Do?

This page is quite versatile – it does everything by itself! When a user first visits it, the page detects that the user has not yet filled out the form (by checking the value of the submit button, after checking the username and password) and then displays the login form, with room for them to type in their username and password (you have to set this up in the code, of course). Once they submit the form, the page is loaded again from the beginning and this time the page detects that the form has been submitted. First, it checks if the correct username and password was used – and if so, it displays the secret member’s info. If not, it continues on – next, it will display a message telling the user that the username/password combination was incorrect, and then will display the form again.

Try it yourself. Also view the source of the page. If you didn’t already know this, you’ll notice that your whole code is not displayed, only the small portion that you have actually sent to the browser. This is because the code is executed on the web server, and the output is sent to the browser – the browser never sees your ASP code. This is great, because it means you can include secret information in your code (such as a username and password), and no-one else will ever see it (unless, of course, they have access to your web server).

Explaining The Code

We’ll look through this example by taking each step one by one.

<%
if request.form("username") = "johndoe" and request.form("password") = "letmein" then
%>

This code simply checks that the correct username and password were entered. If so, then it displays the text that appears next:

You are logged in!
<i>Secret Member’s Only stuff appears here.</i>

Until it gets to the else statement:

<% else %>

What you have just seen is a working example of the if statement. If you have learnt any programming language before, you’ll most likely know about the if statement. It’s a simple but extremely useful statement that compares two values and returns a true or false answer. Then, depending on the answer, you can tell the code to perform different actions.

This code is saying "If the user has entered johndoe as the username and letmein as the password, then display this data. [data here] Otherwise"… and we’ll come to the "otherwise" soon.

Two of the useful commands that ASP uses are request and response. request is used when you want to request information, and response is used when you want to respond with an action. We’re only dealing with request today, but you’ll learn all about response later (you’ve already learnt one aspect of it though, response.write).

In this example, we’ve used request.form("username"). You can probably guess what this is doing – it’s requesting the value of username from the submitted form. Same with the password request. If the user hasn’t yet filled out the form, all we’ll get is a blank string "".

The if statement we’re using compares the value of username and password to what we want it to be. We use the and operator to say that we only want the result of this if statement to be true if both of the conditions are true. If we wanted to, we could use the or operator – then our if statement would be true even if the user got the password wrong, as long as the username was right – and vice versa. But that’s not what we want for this example.

<% else %>
You must login to access this page.<br>

Remember, the else statement means "otherwise". So, anything after the else statement will be displayed if our if statement is false (so, it’ll be displayed if the user got the username and password wrong, or if they haven’t even filled out the form yet – because the blank string we’ll be given isn’t the correct username or password either).

By the way, you’ll notice how we keep turning the ASP code on and off, using the ASP tags (<% and %>). This is so that we can write what we want on the page, without having the use response.write statements – you can use whatever you prefer. Once you’ve finished this tutorial, try rewriting the whole page using response.write statements rather than finishing the ASP code.

Now, let’s continue:

<% if request.form("submit") = "Enter!" then %>
<font color="red"><b>You entered an incorrect username/password combination. Please try again.</b></font><br>
<% end if %>

Can you guess what this portion of code is doing? It’s using an if statement to check if the form was submitted (by checking the value of the submit button). Then, if it was submitted, it displays a message saying the username and password was incorrect (because we’ve already checked for that, so if it was correct the code wouldn’t even have got this far). If it hasn’t been submitted yet (i.e. if the user has just loaded the page), then we don’t want confusion by saying straight away that the details were incorrect, so that’s why we’ve used this bit of code.

Notice the end if. That’s always needed to finish off an if statement – otherwise you’ll get an error – because your server won’t know how much code you only want executed if your statement was true (or false). You haven’t seen the end of the if statement we used before because it extends through the whole page – so it is right at the end. And this shows that you can include multiple if statements inside each other! (Just be careful not to overlap them, or you’ll certainly get unintended results).

<form action="index.asp" method="post">
Username: <input type="text" name="username">
Password: <input type="password" name="password">
<input type="submit" name="submit" value="Enter!">
</form>
<% end if %>
</body>
</html>

This is quite self-explanatory. Once we’ve done everything else (checked for a correct username & password, and checked to see if we need to alert the user) we display the form. Then, that end if statement I was just talking about.

Conclusion

And that brings us to the end of this tutorial. Today you learnt how you can create a page in your website that you can password protect so only the people you give permission to (the people that you tell the password to) can access it. Next week, we’ll build on this example – we’ll create a members area that has the following extra features:

  • Ability to log in and log out

  • More than one page can be used in the member’s area

  • More than one username and password pair can be accepted

If you experience any difficulties with today’s tutorial, just leave a message and one of us will respond to your query. And don’t forget about your response.write challenge!

Have fun coding in ASP!

Now that you've gotten free know-how on this topic, try to grow your skills even faster with online video training. Then finally, put these skills to the test and make a name for yourself by offering these skills to others by becoming a freelancer. There are literally 2000+ new projects that are posted every single freakin' day, no lie!


Previous Article

Next Article


Sucheta's Comment
i have written the whole code of your index.asp in notepad and named as index.asp. But it displayed the coding in browser. this is why so??
15 Tue May 2012
Admin's Reply:

It def. shouldn't show any coding other than HTML and JavaScript.




macko's Comment
That's using just 1 sample username / password right? so its no good for a web system with thousands of members. would be good if you could do a mySQL example instead.
08 Sun Jan 2012
Admin's Reply:

 well macko

that is not a full scale thing here. it is just to show how to start. by making a user area for thousands of users you need other things as well and offcourse a database to manage all that stuff. i ll advise you to read some more advanced tutorials on our site or search for them.

thank you.




Rebekah's Comment
I tried the asp code, but the code appears, so people see it! Help!
23 Fri Oct 2009
Admin's Reply:

Is the code not working for you?






Facebook