RaysWebClass.Com: Lesson 21 ASP What is it?

RaysWebClass.Com

Lesson 21: ASP: Want is it? (Click here to test ASP commands)

Active Server Pages (ASP) is a programming scheme developed by Microsoft for Web developers to use behind their web pages for verification, manipulation, database access and email access. ASP makes it possible to create web applications that are every bit as sophisticated as any desktop application. With knowledge of HTML, CSS and ASP there is no limit to the type of web sites you can create. In fact, a lot of the most sophisticated web sites out on the web were developed using ASP. ASP's native language is VBScript (a simple form of Visual BASIC), but ASP can be written in JavaScript as well. For beginners VBScript in much easier to learn so we will be using VBScript. In truth, most ASP programmers use VBScript, its easy to read and write and every bit as powerful as JavaScript.
Note: This course is designed to be taught in 12, three hours sessions. Short Courses will cover the following topics: Includes, ASP structure, Database Access/Edit/Delete, Search Engines and Logins.

So, how does it work?

First off, ASP requires PWS or IIS to be installed on your computer. All ASP web pages must be in the wwwroot folder or a sub-folder (or a folder you specifically point to in your Web Server.) The wwwroot folder is located at: c: \ inetpub \ wwwroot. (see Getting Started with Web Server PWS & IIS)
Secondly, ASP code is embedded into your HTML using <% and %> called "percent-brackets" (ugly but it works very well.)
Thirdly, all ASP web pages must be run using localhost. For example, say you create an ASP page named first.asp in the wwwroot folder; unlike HTML, you can not double click the file to view it (if you do, all you'll see is the ASP code, not the web page it definds). You need to open your browser first and then type:
http://localhost/first.asp (no spaces.)

Why do ASP web pages need to be placed in the wwwroot folder and why do they need by be viewed by using http://localhost/?
The reason is ASP web pages are "parsed" (or looked through) before they are sent to the browesr. If the web page has ASP code in it (<% asp code here %>), it will get processed and the results of the process will replace the code so no asp code will leave the web server. That means no passwords, or database names or source code will be sent to the borwser.

ASP source code looks like this: <% Response.Write 99 * 77 %>
Browser source code looks like this: 7623
Fourthly, unlike HTML or CSS, ASP errors will cause an error page to pop up instead of your ASP page. This error page can be quite helpful. It will attempt to show you the type of error that has occurred and what line of your ASP source code the error was on. Although not 100% accurate, the error page can go a long way to helping you "de-bug" you ASP code.
Fifthy, type in and save this ASP program into the wwwroot folder:



<html>
<head>
<title> My Test Program </title>
</head>
<body>
<h1>Hello World</h1>
<img src='images/HelloWorld.gif'><br>
Snippet of advanced code from a team of graduate students in robotics at Cal Tech. </body>
</html>
Lastly, One thing I like to do is put this little HTML web page in the wwwroot folder. Now all I have to do is double click this HTML web page to test my ASP web page:




<html>
<head>
<meta http-equiv='refresh' content='0;url=http://localhost/myTestProgram.asp '>
</head>
<body>
</body>
</html>

Replace myTestProgram.asp with the name of any ASP web page you're currently testing. (It's GREAT!!!)

Server-side Includes (SSI)

or


A server-side include is a way of putting web content from two different sources into one web page. For example, suppose I have a menu bar that I want to put on all of the pages in my web site. The only way to do this in HTML is to copy and past the menu bar to each page. To make changes to the bar I will have to copy and paste it evey time to every page. This is a lot of work, but with SSI, you can make just one menu bar and "include" it in every page on your web. This way, if a change has to be made, you would make it only once, to the menu bar file and that change will be seen on every page because the file is included, not copied, on all the other pages. Sounds good? Here's how it works:

Here is my Header file: (Includes / Header.asp)

<div style='text-align: center;
font: bold 30pt Verdana; color: blue; width: 100%;
filter: shadow(color=gray, direction=135)'>
Ray's web Company
</div>

Here is my Menu file: (Includes / Menu.asp)

<%
Dim FName
FName = Request.ServerVariables("PATH_INFO")
%>
<br><br>
<div style='padding-left: 8px; font: 9pt arial;'>

<a href='index.asp'>
<%If Instr(FName,"index.asp") > 0 Then Response.Write "<b style='color: red;'>"%>
home
<%If Instr(FName,"index.asp") > 0 Then Response.Write "</b>"%>
</a>
<br><br>

<a href='Products.asp'>
<%If Instr(FName,"products.asp") > 0 Then Response.Write "<b style='color: red;'>"%>
products
<%If Instr(FName,"products.asp") > 0 Then Response.Write "</b>"%>
</a>
<br><br>

<a href='Contact.asp'>
<%If Instr(FName,"contact.asp") > 0 Then Response.Write "<b style='color: red;'>"%>
contact us
<%If Instr(FName,"contact.asp") > 0 Then Response.Write "</b>"%>
</a>
<br><br>

</div>

Here is my Footer file: (Includes / Footer.asp)

<div style='font:9pt arial;width:100%;text-align:center'>
[
<a href='index.asp'>home</a>
|
<a href='Products.asp'>products</a>
|
<a href='Contact.asp'>contact</a>
]
<br>
© <%=Year(Date)%> Ray's Web Company
</div>

And here is my Page Table Template that I've used to create all of my pages on this Web site:

<html>
<head>
<title>Page Table Template</title>
</head>
<body bgcolor='gray' style='margin:0;border:0;padding:0;'>
<table border='1' bgcolor='white' align='center' width='800' height='100%'>

<tr>
<td colspan='2' height='100'>



</td>
</tr>

<tr>
<td width='120' valign='top'>



</td>

<td valign='top'>







</td>
</tr>

<tr>
<td colspan='2' height='60'>



</td>
</tr>
</body>
</html>

Any edits to the Menu.asp file will update every web page with the SSI because the content is only in menu.asp. Also notice that a Header.asp and a Footer.asp files are also includes. NOTE: If the include file is not in the same folder (or a child folder) use the second include form; see above.

Web Page Design: Exercise 21

Create a new page and name it Page1.asp
Paste this code:
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
</head>
<body bgcolor='lightblue'>
<h1>Page One</h1>
Welcome to page one!
<br><br><br><br><br>
<br><br><br><br><br>
<br><br><br><br><br>
<hr>

</body>
</html>

Save it.
Copy Page1.asp and paste it four times.
Rename the copies to Page2.asp, Page3.asp, Page4.asp, and Page5.asp.
Edit the copies and change the bgcolors (eg: lightgreen, lightpink, lightcyan, lightsalmon)
Also change the Welcome to the proper page number.
Create a new page and name it menu.asp
Paste this code:
<div align='center'>
[
<a href='Page1.asp'>Page One</a>
|
<a href='Page2.asp'>Page Two</a>
|
<a href='Page3.asp'>Page Three</a>
|
<a href='Page4.asp'>Page Four</a>
|
<a href='Page5.asp'>Page Five</a>
]
</div>

Save it.
Open your browser and enter the following URL: http://localhost/page1.asp
Notice how the menu is on every page and you can get from any page to anyother page.
Add a Page6.asp (bgcolor='plum')
Add the hyperlink for Page6.asp to menu.asp.

NICE! One edit and Page Six is on all six pages!

ASP source code looks like this:	<% Response.Write 99 * 77 %>
Browser source code looks like this:	7623