Web Technologies

Lecture Plan
MBA IV Semester -Web Technologies
Lecture 1-9
Definitions
1. A web browser is a software application that enables a user to display and interact
with text, images, videos, music and other information typically located on a Web page at
a website on the World Wide Web or a local area network. Text and images on a Web
page can contain hyperlinks to other Web pages at the same or different website. Web
browsers allow a user to quickly and easily access information provided on many Web
pages at many websites by traversing these links. Web browsers format HTML
information for display, so the appearance of a Web page may differ between browsers.
Some of the Web browsers available for personal computers include Internet Explorer,
Mozilla Firefox, Safari, Opera, and Netscape
2. A Web page or webpage is a resource of information that is suitable for the World
Wide Web and can be accessed through a web browser. This information is usually in
HTML or XHTML format, and may provide navigation to other web pages via hypertext
links.
Web pages may be retrieved from a local computer or from a remote web server. The
web server may restrict access only to a private network, e.g. a corporate intranet, or it
may publish pages on the World Wide Web. Web pages are requested and served from
web servers using Hypertext Transfer Protocol (HTTP).
Web pages may consist of files of static text stored within the web server's file system
(static web pages), or the web server may construct the (X)HTML for each web page
when it is requested by a browser (dynamic web pages). Client-side scripting can make
web pages more responsive to user input once in the client browser.
A web page is a type of web document.
3. Web site (alternatively, website or web site) is a collection of Web pages, images,
videos or other digital assets that is hosted on one or several Web server(s), usually
accessible via the Internet, cell phone or a LAN.
A Web page is a document, typically written in HTML, that is almost always accessible
via HTTP, a protocol that transfers information from the Web server to display in the
user's Web browser.
All publicly accessible websites are seen collectively as constituting the "World Wide
Web".
The pages of websites can usually be accessed from a common root URL called the
homepage, and usually reside on the same physical server. The URLs of the pages
organize them into a hierarchy, although the hyperlinks between them control how the
reader perceives the overall structure and how the traffic flows between the different
parts of the sites.
Some websites require a subscription to access some or all of their content. Examples of
subscription sites include many business sites, parts of many news sites, academic journal
sites, gaming sites, message boards, Web-based e-mail, services, social networking
website, and sites providing real-time stock market data.
4. In computing, a protocol is a convention or standard that controls or enables the

connection, communication, and data transfer between two computing endpoints. In its
simplest form, a protocol can be defined as the rules governing the syntax, semantics,
and synchronization of communication. Protocols may be implemented by hardware,
software, or a combination of the two. At the lowest level, a protocol defines the behavior
of a hardware connection.
5. A computer system that is accessed by a user working at a remote location. Typically,

the term is used when there are two computer systems connected by modems and
telephone lines. The system that contains the data is called the host, while the computer at
which the user sits is called the remote terminal.
(2) A computer that is connected to a TCP/IP network, including the Internet. Each host
has a unique IP address.
(3) To provide the infrastructure for a computer service. For example, there are many
companies that host files, programs, applications or even a Web server for companies and
individuals. In the case of a Web server, it means that they provide the hardware,
software, and communications lines required by the server, but the content on the server
may be controlled by someone else.
6. An IP address (Internet Protocol address) is a unique address that certain electronic

devices currently use in order to identify and communicate with each other on a computer
network utilizing the Internet Protocol standard (IP)—in simpler terms, a computer
address. Any participating network device—including routers, switches, computers,
infrastructure servers (e.g., NTP, DNS, DHCP, SNMP, etc.), printers, Internet fax
machines, and some telephones—can have its own address that is unique within the scope
of the specific network. Some IP addresses are intended to be unique within the scope of
the global Internet, while others need to be unique only within the scope of an enterprise
7. The World Wide Web (commonly shortened to the Web) is a system of interlinked,
hypertext documents accessed via the Internet. With a web browser, a user views web
pages that may contain text, images, videos, and other multimedia and navigates between
them using hyperlinks.
WEB SERVER
The term web server can mean one of two things:
1. A computer program that is responsible for accepting HTTP requests from clients,
which are known as web browsers, and serving them HTTP responses along with
optional data contents, which usually are web pages such as HTML documents
and linked objects (images, etc.).
2. A computer that runs a computer program which provides the functionality
described in the first sense of the term.
Although web server programs differ in detail, they all share some
basic common features.
1. HTTP: every web server program operates by accepting HTTP requests from the
client, and providing an HTTP response to the client. The HTTP response usually
consists of an HTML document, but can also be a raw file, an image, or some
other type of document (defined by MIME-types); if some error is found in client
request or while trying to serve the request, a web server has to send an error
response which may include some custom HTML or text messages to better
explain the problem to end users.
2. Logging: usually web servers have also the capability of logging some detailed
information, about client requests and server responses, to log files; this allows
the webmaster to collect statistics by running log analyzers on log files.
In practice many web servers implement the following features also:
1. Authentication, optional authorization request (request of user name and

password) before allowing access to some or all kind of resources.
2. Handling of not only static content (file content recorded in server's
filesystem(s)) but of dynamic content too by supporting one or more related
interfaces (SSI, CGI, SCGI, FastCGI, JSP, PHP, ASP, ASP .NET, Server API
such as NSAPI, ISAPI, etc.).
3. HTTPS support (by SSL or TLS) to allow secure (encrypted) connections to the
server on the standard port 443 instead of usual port 80.
4. Content compression (i.e. by gzip encoding) to reduce the size of the responses
(to lower bandwidth usage, etc.).
5. Virtual hosting to serve many web sites using one IP address.
6. Large file support to be able to serve files whose size is greater than 2 GB on 32
bit OS.
Bandwidth throttling to limit the speed of responses in order to not saturate the
network and to be able to serve more clients.
HTTP Request Types

Request Methods
HTTP defines eight methods (sometimes referred to as "verbs")

indicating the desired action to be performed on the identified
resource.
HEAD
Asks for the response identical to the one that would correspond to a GET
request, but without the response body. This is useful for retrieving meta-
information written in response headers, without having to transport the entire
content.
GET
Requests a representation of the specified resource. By far the most common
method used on the Web today. Should not be used for operations that cause side-
effects (using it for actions in web applications is a common misuse). See 'safe
methods' below.
POST
Submits data to be processed (e.g. from an HTML form) to the identified
resource. The data is included in the body of the request. This may result in the
creation of a new resource or the updates of existing resources or both.
PUT
Uploads a representation of the specified resource.
DELETE
Deletes the specified resource.
TRACE
Echoes back the received request, so that a client can see what intermediate
servers are adding or changing in the request.
OPTIONS
Returns the HTTP methods that the server supports. This can be used to check the
functionality of a web server.
CONNECT
Converts the request connection to a transparent TCP/IP tunnel, usually to
facilitate SSL-encrypted communication (HTTPS) through an unencrypted HTTP
proxy.[1]
Introduction to Microsoft IIS
IIS 6.0 includes new features designed to help businesses, IT professionals, and Web
administrators achieve their goals of performance, reliability, scalability, and security for
potentially thousands of Web sites either on a single IIS server or on multiple servers.
This section describes new and notable features in IIS 6.0.
Reliability Features: Describes new modes of operation and World Wide Web
Publishing Service (WWW service) processes.
Security Features: Describes new features designed to secure your Web sites, data, and
your IIS server.
Performance Features: Describes performance and scalability features.
Web Application Technologies: Describes the IIS 6.0 implementation of Microsoft®
ASP.NET, ASP, and the ADSI provider.
Administrative Tools and Features: Describes metabase changes and new administrative
tools.
Internet Standards: Describes support for Web and Internet standard protocols.
Internet Protocol Version 6 Features: Describes the IIS 6.0 functionality that supports
Internet Protocol Version 6 (Ipv6).
Creating Virtual Directories in IIS 6.0 (IIS 6.0)
Virtual Directories
A sub-directory of a web-site in IIS can be either a physical sub-directory, or it can be a Virtual Directory
that is logically mapped to that location. It really should not matter whether the directory is a physical
sub-directory or a Virtual Directory, just like the location of the web-root isn't exposed. In most production
cases, especially with shared web-hosts, you will only be able to create physical sub-directories, probably
using FTP or similar tools.
If you open up the Internet Services Manager in your Administrative Tools, also called IIS Manager, and
drill down you will see the logical structures. Physical directories are shown with a folder icon, while Virtual
Directories are shown with a special folder icon that has a globe as part of the icon. You may also see
another icon, either a box around a globe icon (Win 2K/XP) or a gear icon (W2003), which indicates the
directory is an IIS Application.
IIS Applications
An IIS Application is a directory, physical or virtual, that has been setup in a manner that makes it
logically independent from the rest of the web-site. Its purpose is basically to make sub-directories act
just like real web-sites, which is very useful on Win 2K/XP Pro, but not really necessary on a Server. Its
important to understand that you cannot create an IIS Application simply using FTP or similar tools -- and
this is the cause of many ASP.NET problems.
So how do you create an IIS Application? First, VS.NET automatically makes all new web projects into IIS
Applications, whether you want it to be or not. Otherwise, you need to use IIS Manager to create or setup
an IIS Application, or get your web-host to do it for you (WebHost4Life.com has a tool for this). The
easiest technique is to use IIS Manager to create a new Virtual Directory -- it will also be an IIS
Application by default, which adds to the confusion.
In most cases, the content you publish to your Web or FTP site is located in a root or
home directory on your computer, such as C:\Inetpub\Wwwroot\. However, there might
be instances when the content is located somewhere else, or even on a remote computer.
To publish from any directory not contained within your home or root directory, you can
create a virtual directory. A virtual directory is a directory that is not contained in the
home directory but appears to client browsers as though it were.
You can create a virtual directory through IIS Manager or by using Windows Explorer.
To create a virtual directory by using IIS Manager

1. In IIS Manager, expand the local computer, expand the Web Sites or FTP Sites folder,
right-click the site or folder within which you want to create the virtual directory, point
to New, and then click Virtual Directory. The Virtual Directory Creation Wizard
appears.
2. Click Next.
3. In the Alias box, type a name for the virtual directory. (Choose a short name that is
easy to type because the user types this name.)
4. Click Next.
5. In the Path box, type or browse to the physical directory in which the virtual directory
resides, and then click Next.
6. Under Allow the following permissions, select the check boxes for the access
permissions you want to assign to your users, and then click Next.
To start IIS Manager
1. From the Start menu, point to Administrative Tools, and then click Internet
Information Services (IIS) Manager.
To start IIS Manager from the Run dialog box
1. From the Start menu, click Run.

2. In the Open box, type inetmgr, and click OK.
You can also access IIS from the Computer Management window. Accessing IIS in this
way does not give you the range of administration options offered by IIS Manager;
however, it does offer quick access and limited management options for your Web sites.
To start IIS Manager from the Computer Management window
1. From the Start menu, right-click My Computer, and click Manage.

2. In the console tree, expand the Services and Applications node.
3. Click Internet Information Services. The names and states of your Web sites appear
in the details pane.
4. In the console tree, expand the Internet Information Services node and any
subsequent Web site nodes to see a list of directories and virtual directories for that
Web site.
DHTML Technologies
With DHTML a Web developer can control how to display and position HTML elements
in a browser window.
HTML 4.0
With HTML 4.0 all formatting can be moved out of the HTML document and into a
separate style sheet. Because HTML 4.0 separates the presentation of the document from
its structure, we have total control of presentation layout without messing up the
document content.
Cascading Style Sheets (CSS)
With CSS we have a style and layout model for HTML documents.
CSS was a breakthrough in Web design because it allowed developers to control the style
and layout of multiple Web pages all at once. As a Web developer you can define a style
for each HTML element and apply it to as many Web pages as you want. To make a
global change, simply change the style, and all elements in the Web are updated
automatically.
The Document Object Model (DOM)
DOM stands for the Document Object Model.

The HTML DOM is the Document Object Model for HTML.
The HTML DOM defines a standard set of objects for HTML, and a standard way to
access and manipulate HTML objects.
"The W3C Document Object Model (DOM) is a platform and language neutral interface
that allows programs and scripts to dynamically access and update the content,
structure, and style of a document".
JavaScript
Allows you to write code to control all HTML elements.
JavaScript Form Validation

JavaScript can be used to validate input data in HTML forms before sending off the
content to a server.
JavaScript Form Validation

JavaScript can be used to validate input data in HTML forms before sending off the
content to a server.
Form data that typically are checked by a JavaScript could be:
• has the user left required fields empty?
• has the user entered a valid e-mail address?
• has the user entered a valid date?
• has the user entered text in a numeric field?
Required Fields
The function below checks if a required field has been left empty. If the required field is
blank, an alert box alerts a message and the function returns false. If a value is entered,
the function returns true (means that data is OK):
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt);return false}
else {return true}
}
}
The entire script, with the HTML form could look something like this:
<html>
<head>
<script type="text/javascript">
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_required(email,"Email must be filled out!")==false)
{email.focus();return false}
}
}
</script>
</head>
<body>
<form action="submitpage.htm"
onsubmit="return validate_form(this)"
method="post">
Email: <input type="text" name="email" size="30">
<input type="submit" value="Submit">
</form>
</body>
</html>
E-mail Validation
The function below checks if the content has the general syntax of an email.
This means that the input data must contain at least an @ sign and a dot (.). Also, the @
must not be the first character of the email address, and the last dot must at least be one
character after the @ sign:
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
else {return true}
}
}
The entire script, with the HTML form could look something like this:
<html>
<head>
<script type="text/javascript">
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
else {return true}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (validate_email(email,"Not a valid e-mail address!")==false)
{email.focus();return false}
}
}
</script>
</head>
<body>
<form action="submitpage.htm"
onsubmit="return validate_form(this);"
method="post">
Email: <input type="text" name="email" size="30">
</form>
</body>
</html>
What is CSS?
• CSS stands for Cascading Style Sheets

• Styles define how to display HTML elements
• Styles are normally stored in Style Sheets
• Styles were added to HTML 4.0 to solve a problem
• External Style Sheets can save you a lot of work
• External Style Sheets are stored in CSS files
CSS Syntax
Syntax
The CSS syntax is made up of three parts: a selector, a property and a value:
selector {property: value}
The selector is normally the HTML element/tag you wish to define, the property is the
attribute you wish to change, and each property can take a value. The property and value
are separated by a colon, and surrounded by curly braces:
body {color: black}
Note: If the value is multiple words, put quotes around the value:
p {font-family: "sans serif"}

Note: If you wish to specify more than one property, you must separate each property
with a semicolon. The example below shows how to define a center aligned paragraph,
with a red text color:
p {text-align:center;color:red}
To make the style definitions more readable, you can describe one property on each line,
like this:
p
{
text-align: center;
color: black;
font-family: arial
}
Grouping
You can group selectors. Separate each selector with a comma. In the example below we
have grouped all the header elements. All header elements will be displayed in green text
color:
h1,h2,h3,h4,h5,h6
{
color: green
}
The class Selector

With the class selector you can define different styles for the same type of HTML
element.
Say that you would like to have two types of paragraphs in your document: one right-
aligned paragraph, and one center-aligned paragraph. Here is how you can do it with
styles:
p.right {text-align: right}

p.center {text-align: center}
You have to use the class attribute in your HTML document:
<p class="right">
This paragraph will be right-aligned.
</p>
<p class="center">
This paragraph will be center-aligned.
</p>
Note: To apply more than one class per given element, the syntax is:
<p class="center bold">

This is a paragraph.
</p>
The paragraph above will be styled by the class "center" AND the class "bold".
You can also omit the tag name in the selector to define a style that will be used by all
HTML elements that have a certain class. In the example below, all HTML elements with
class="center" will be center-aligned:
.center {text-align: center}
In the code below both the h1 element and the p element have class="center". This means
that both elements will follow the rules in the ".center" selector:
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
Add Styles to Elements with Particular Attributes

You can also apply styles to HTML elements with particular attributes.
The style rule below will match all input elements that has a type attribute with a value of
"text":
Input[type="text"] {background-color: blue}
The id Selector
You can also define styles for HTML elements with the id selector. The id selector is
defined as a #.
The style rule below will match the element that has an id attribute with a value of
"green":
#green {color: green}
The style rule below will match the p element that has an id with a value of "para1":
p#para1
{
text-align: center;
color: red
}
CSS Comments
Comments are used to explain your code, and may help you when you edit the source
code at a later date. Browsers will ignore a comment. A CSS comment begins with "/*",
and ends with "*/", like this:
/* This is a comment */
p
{
text-align: center;
/* This is another comment */
color: black;
font-family: arial
}
How to Insert a Style Sheet

When a browser reads a style sheet, it will format the document according to it. There are
three ways of inserting a style sheet:
External Style Sheet
An external style sheet is ideal when the style is applied to many pages. With an external
style sheet, you can change the look of an entire Web site by changing one file. Each
page must link to the style sheet using the <link> tag. The <link> tag goes inside the head
section:
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>
The browser will read the style definitions from the file mystyle.css, and format the
document according to it.
An external style sheet can be written in any text editor. The file should not contain any
html tags. Your style sheet should be saved with a .css extension. An example of a style
sheet file is shown below:
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
Internal Style Sheet
An internal style sheet should be used when a single document has a unique style. You
define internal styles in the head section by using the <style> tag, like this:
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>
The browser will now read the style definitions, and format the document according to it.
Inline Styles
An inline style loses many of the advantages of style sheets by mixing content with
presentation. Use this method sparingly, such as when a style is to be applied to a single
occurrence of an element.
To use inline styles you use the style attribute in the relevant tag. The style attribute can
contain any CSS property. The example shows how to change the color and the left
margin of a paragraph:
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>
Multiple Style Sheets

If some properties have been set for the same selector in different style sheets, the values
will be inherited from the more specific style sheet.
For example, an external style sheet has these properties for the h3 selector:
h3
{
color: red;
text-align: left;
font-size: 8pt
}
And an internal style sheet has these properties for the h3 selector:
h3
{
text-align: right;
font-size: 20pt
}
If the page with the internal style sheet also links to the external style sheet the properties
for h3 will be:
color: red;
text-align: right;
font-size: 20pt
The color is inherited from the external style sheet and the text-alignment and the font-
size is replaced by the internal style sheet.
Lecture 10-27
Active Server Pages: Working with ASP Pages, ASP Objects, File System Objects,
Session Tracking and Cookies, ActiveX Data Objects, Accessing a Database from Active
Server Page.
Working with ASP Pages
An ASP file can contain text, HTML tags and scripts. Scripts in an ASP file are executed
on the server.
What is ASP?
• ASP stands for Active Server Pages

• ASP is a program that runs inside IIS
• IIS stands for Internet Information Services
• IIS comes as a free component with Windows 2000
• IIS is also a part of the Windows NT 4.0 Option Pack
• The Option Pack can be downloaded from Microsoft
• PWS is a smaller - but fully functional - version of IIS
• PWS can be found on your Windows 95/98 CD
What is an ASP File?
• An ASP file is just the same as an HTML file

• An ASP file can contain text, HTML, XML, and scripts
• Scripts in an ASP file are executed on the server
• An ASP file has the file extension ".asp"
What can ASP do for you?
• Dynamically edit, change or add any content of a Web page

• Respond to user queries or data submitted from HTML forms
• Access any data or databases and return the results to a browser
• Customize a Web page to make it more useful for individual users
• The advantages of using ASP instead of CGI and Perl, are those of simplicity and
speed
• Provide security since your ASP code can not be viewed from the browser
• Clever ASP programming can minimize the network traffic
How to write some text with ASP.
ASP Source:
<html>
<body>
<%
response.write("Hello World!")
%>
</body>
</html>
Output Result
Hello World!
How to format the text with HTML tags.
ASP Source:
<html>
<body>
<%
response.write("<h2>You can use HTML tags to format the text!</h2>")
%>
<%
response.write("<p style='color:#0000ff'>This text is styled with the style attribute!
</p>")
%>
</body>
</html>
Output Result:
You can use HTML tags to format the text!
This text is styled with the style attribute!
The Basic Syntax Rule

An ASP file normally contains HTML tags, just like an HTML file. However, an ASP
file can also contain server scripts, surrounded by the delimiters <% and %>. Server
scripts are executed on the server, and can contain any expressions, statements,
procedures, or operators valid for the scripting language you prefer to use.
Write Output to a Browser
The response.write command is used to write output to a browser. The following example
sends the text "Hello World" to the browser:
<html>
<body>
<%
%>
</body>
</html>
There is also a shorthand method for the response.write command. The following
example also sends the text "Hello World" to the browser:
<html>
<body>
<%="Hello World!"%>
</body>
</html>
VBScript
You can use several scripting languages in ASP. However, the default scripting language
is VBScript:
<html>
<body>
<%
%>
</body>
</html>
The example above writes "Hello World!" into the body of the document.
JavaScript
To set JavaScript as the default scripting language for a particular page you must insert a
language specification at the top of the page:
<%@ language="javascript"%>
<html>
<body>
<%
Response.Write("Hello World!")
%>
</body>
</html>
ASP Variables
A variable is used to store information.
If the variable is declared outside a procedure it can be changed by any script in the
ASP file. If the variable is declared inside a procedure, it is created and destroyed
every time the procedure is executed.
Declare a variable
Variables are used to store information. This example demonstrates how to declare a
variable, assign a value to it, and use the value in a text.
ASP Source:
<html>
<body>
<%
dim name
name="Donald Duck"
response.write("My name is: " & name)
%>
</body>
</html>
Output Result:
My name is: Donald Duck
Lifetime of Variables
A variable declared outside a procedure can be accessed and changed by any script in the
ASP file.
A variable declared inside a procedure is created and destroyed every time the procedure
is executed. No scripts outside the procedure can access or change the variable.
To declare variables accessible to more than one ASP file, declare them as session
variables or application variables.
Session Variables
Session variables are used to store information about ONE single user, and are available
to all pages in one application. Typically information stored in session variables are
name, id, and preferences.
Application Variables
Application variables are also available to all pages in one application. Application
variables are used to store information about ALL users in a specific application.
Declare an array
Arrays are used to store a series of related data items. This example demonstrates how to
declare an array that stores names.
ASP Source:
<html>
<body>
<%
Dim famname(6),i
famname(1) = "Jan Egil"
famname(2) = "Tove"
famname(3) = "Hege"
famname(4) = "Stale"
famname(5) = "Kai Jim"
famname(6) = "Borge"
For i = 1 to 6
response.write(famname(i) & "<br />")
Next
%>
</body>
</html>
Output Result:
Jan Egil
Tove
Hege
Stale
Kai Jim
Borge
Loop through the HTML headers

How to loop through the six headers in HTML.
ASP Source:
<html>
<body>
<%
dim i
for i=1 to 6
response.write("<h" & i & ">Header " & i & "</h" & i & ">")
next
%>
</body>
</html>
Output Result:
Header 1
Header 2
Header 3
Header 4
Header 5
Header 6
Examples
Call a procedure using VBScript

How to call a VBScript procedure from ASP.
ASP Source:
<html>
<head>
<%
sub vbproc(num1,num2)
response.write(num1*num2)
end sub
%>
</head>
<body>
<p>
You can call a procedure like this:
</p>
<p>
Result: <%call vbproc(3,4)%>
</p>
<p>
Or, like this:
</p>
<p>
Result: <%vbproc 3,4%>
</p>
</body>
</html>
Output Result:
You can call a procedure like this:
Result: 12
Or, like this:
Result: 12
Call a procedure using JavaScript

How to call a JavaScript procedure from ASP.
ASP Source:
<%@ language="javascript" %>

<html>
<head>
<%
function jsproc(num1,num2)
{
Response.Write(num1*num2)
}
%>
</head>
<body>
<p>
Result: <%jsproc(3,4)%>
</p>
</body>
</html>
Output Result:
Result: 12
Call procedures using VBScript
How to call both a JavaScript procedure and a VBScript procedure in an ASP file.
ASP Source:
<html>
<head>
<%
end sub
%>
<script language="javascript" runat="server">
{
}
</script>
</head>
<body>
<p>Result: <%call vbproc(3,4)%></p>
<p>Result: <%call jsproc(3,4)%></p>
</body>
</html>
Output Result:
Result: 12
Result: 12
Procedures
The ASP source code can contain procedures and functions:
<html>
<head>
<%
response.write(num1*num2)
end sub
%>
</head>
<body>
<p>Result: <%call vbproc(3,4)%></p>
</body>
</html>
Insert the <%@ language="language" %> line above the <html> tag to write procedures
or functions in another scripting language than default:
<%@ language="javascript" %>

<html>
<head>
<%
{
}
%>
</head>
<body>
<p>Result: <%jsproc(3,4)%></p>
</body>
</html>
ASP Forms and User Input

The Request.QueryString and Request.Form commands may be used to retrieve
information from forms, like user input.
Examples
A form with method="get"

How to interact with the user, with the Request.QueryString command.
ASP Source:
<html>
<body>
<form action="demo_reqquery.asp" method="get">
Your name: <input type="text" name="fname" size="20" />
<input type="submit" value="Submit" />
</form>
<%
dim fname
fname=Request.QueryString("fname")
If fname<>"" Then
Response.Write("Hello " & fname & "!<br />")
Response.Write("How are you today?")
End If
%>
</body>
</html>
Output Result:
Submit
Your name:
A form with method="post"

How to interact with the user, with the Request.Form command.
ASP Source:
<html>
<body>
<form action="demo_simpleform.asp" method="post">
</form>
<%
dim fname
fname=Request.Form("fname")
If fname<>"" Then
End If
%>
</body>
</html>
Output Result:
Submit
Your name:
A form with radio buttons

How to interact with the user, through radio buttons, with the Request.Form command.
ASP Source:
<html>
<%
dim cars
cars=Request.Form("cars")
%>
<body>
<form action="demo_radiob.asp" method="post">
<p>Please select your favorite car:</p>
<input type="radio" name="cars"

<%if cars="Volvo" then Response.Write("checked")%>
value="Volvo">Volvo</input>
<br />
<%if cars="Saab" then Response.Write("checked")%>
value="Saab">Saab</input>
<br />
<%if cars="BMW" then Response.Write("checked")%>
value="BMW">BMW</input>
<br /><br />
</form>
<%
if cars<>"" then
Response.Write("<p>Your favorite car is: " & cars & "</p>")
end if
%>
</body>
</html>
Output Result:
Please select your favorite car:
Volvo
Saab
BMW
Submit
User Input
The Request object may be used to retrieve user information from forms.
Form example:
<form method="get" action="simpleform.asp">

First Name: <input type="text" name="fname" />
<br />
Last Name: <input type="text" name="lname" />
<br /><br />
</form>
User input can be retrieved in two ways: With Request.QueryString or Request.Form.
Request.QueryString
The Request.QueryString command is used to collect values in a form with

method="get". Information sent from a form with the GET method is visible to everyone
(it will be displayed in the browser's address bar) and has limits on the amount of
information to send.
If a user typed "Bill" and "Gates" in the form example above, the URL sent to the server
would look like this:
http://www.w3schools.com/simpleform.asp?fname=Bill&lname=Gates
Assume that the ASP file "simpleform.asp" contains the following script:
<body>
Welcome
<%
response.write(request.querystring("fname"))
response.write(" " & request.querystring("lname"))
%>
</body>
The browser will display the following in the body of the document:
Welcome Bill Gates
Request.Form
The Request.Form command is used to collect values in a form with method="post".

Information sent from a form with the POST method is invisible to others and has no
limits on the amount of information to send.
If a user typed "Bill" and "Gates" in the form example above, the URL sent to the server
would look like this:
http://www.w3schools.com/simpleform.asp
Assume that the ASP file "simpleform.asp" contains the following script:
<body>
Welcome
<%
response.write(request.form("fname"))
response.write(" " & request.form("lname"))
%>
</body>
The browser will display the following in the body of the document:
Welcome Bill Gates
ASP Objects, File System Objects, Session Tracking and Cookies
ASP Cookies
A cookie is often used to identify a user.
Examples
Welcome cookie
How to create a Welcome cookie.
ASP Source:
<%
dim numvisits
response.cookies("NumVisits").Expires=date+365
numvisits=request.cookies("NumVisits")
if numvisits="" then
response.cookies("NumVisits")=1
response.write("Welcome! This is the first time you are visiting this Web page.")
else
response.cookies("NumVisits")=numvisits+1
response.write("You have visited this ")
response.write("Web page " & numvisits)
if numvisits=1 then
response.write " time before!"
else
response.write " times before!"
end if
end if
%>
<html>
<body>
</body>
</html>
Output Result:
Welcome! This is the first time you are visiting this Web page.
What is a Cookie?
A cookie is often used to identify a user. A cookie is a small file that the server embeds
on the user's computer. Each time the same computer requests a page with a browser, it
will send the cookie too. With ASP, you can both create and retrieve cookie values.
How to Create a Cookie?
The "Response.Cookies" command is used to create cookies.
Note: The Response.Cookies command must appear BEFORE the <html> tag.
In the example below, we will create a cookie named "firstname" and assign the value
"Alex" to it:
<%
Response.Cookies("firstname")="Alex"
%>
It is also possible to assign properties to a cookie, like setting a date when the cookie
should expire:
<%
Response.Cookies("firstname").Expires=#May 10,2002#
%>
How to Retrieve a Cookie Value?
The "Request.Cookies" command is used to retrieve a cookie value.

In the example below, we retrieve the value of the cookie named "firstname" and display
it on a page:
<%
fname=Request.Cookies("firstname")
response.write("Firstname=" & fname)
%>
Output:
Firstname=Alex
A Cookie with Keys
If a cookie contains a collection of multiple values, we say that the cookie has Keys.
In the example below, we will create a cookie collection named "user". The "user" cookie
has Keys that contains information about a user:
<%
Response.Cookies("user")("firstname")="John"
Response.Cookies("user")("lastname")="Smith"
Response.Cookies("user")("country")="Norway"
Response.Cookies("user")("age")="25"
%>
Read all Cookies
Look at the following code:
<%
Response.Cookies("user")("firstname")="John"
Response.Cookies("user")("lastname")="Smith"
Response.Cookies("user")("country")="Norway"
Response.Cookies("user")("age")="25"
%>
Assume that your server has sent all the cookies above to a user.
Now we want to read all the cookies sent to a user. The example below shows how to do
it (note that the code below checks if a cookie has Keys with the HasKeys property):
<html>
<body>
<%
dim x,y
for each x in Request.Cookies
response.write("<p>")
if Request.Cookies(x).HasKeys then
for each y in Request.Cookies(x)
response.write(x & ":" & y & "=" & Request.Cookies(x)(y))
response.write("<br />")
next
else
Response.Write(x & "=" & Request.Cookies(x) & "<br />")
end if
response.write "</p>"
next
%>
</body>
</html>
Output:
firstname=Alex
user:firstname=John
user:lastname=Smith
user:country=Norway
user:age=25
ASP Session Object

The Session object is used to store information about, or change settings for a user
session. Variables stored in the Session object hold information about one single
user, and are available to all pages in one application.
The Session object
When you are working with an application, you open it, do some changes and then you
close it. This is much like a Session. The computer knows who you are. It knows when
you start the application and when you end. But on the internet there is one problem: the
web server does not know who you are and what you do because the HTTP address
doesn't maintain state.
ASP solves this problem by creating a unique cookie for each user. The cookie is sent to
the client and it contains information that identifies the user. This interface is called the
Session object.
session. Variables stored in the Session object hold information about one single user,
and are available to all pages in one application. Common information stored in session
variables are name, id, and preferences. The server creates a new Session object for each
new user, and destroys the Session object when the session expires.
When does a Session Start?
A session starts when:
• A new user requests an ASP file, and the Global.asa file includes a
Session_OnStart procedure
• A value is stored in a Session variable
• A user requests an ASP file, and the Global.asa file uses the <object> tag to
instantiate an object with session scope
When does a Session End?
A session ends if a user has not requested or refreshed a page in the application for a
specified period. By default, this is 20 minutes.
If you want to set a timeout interval that is shorter or longer than the default, you can set
the Timeout property.
The example below sets a timeout interval of 5 minutes:
<%
Session.Timeout=5
%>
To end a session immediately, you may use the Abandon method:
<%
Session.Abandon
%>
Note: The main problem with sessions is WHEN they should end. We do not know if the
user's last request was the final one or not. So we do not know how long we should keep
the session "alive". Waiting too long for an idle session uses up resources on the server,
but if the session is deleted too soon the user has to start all over again because the server
has deleted all the information. Finding the right timeout interval can be difficult!
Tip: If you are using session variables, store SMALL amounts of data in them.
Store and Retrieve Session Variables
The most important thing about the Session object is that you can store variables in it.
The example below will set the Session variable username to "Donald Duck" and the
Session variable age to "50":
<%
Session("username")="Donald Duck"
Session("age")=50
%>
When the value is stored in a session variable it can be reached from ANY page in the
ASP application:
Welcome <%Response.Write(Session("username"))%>
The line above returns: "Welcome Donald Duck".
You can also store user preferences in the Session object, and then access that preference
to choose what page to return to the user.
The example below specifies a text-only version of the page if the user has a low screen
resolution:
<%If Session("screenres")="low" Then%>

This is the text version of the page
<%Else%>
This is the multimedia version of the page
<%End If%>
Remove Session Variables
The Contents collection contains all session variables.
It is possible to remove a session variable with the Remove method.
The example below removes the session variable "sale" if the value of the session
variable "age" is lower than 18:
<%
If Session.Contents("age")<18 then
Session.Contents.Remove("sale")
End If
%>
To remove all variables in a session, use the RemoveAll method:
<%
Session.Contents.RemoveAll()
%>
Loop Through the Contents Collection
The Contents collection contains all session variables. You can loop through the Contents
collection, to see what's stored in it:
<%
Session("username")="Donald Duck"
Session("age")=50
dim i
For Each i in Session.Contents
Response.Write(i & "<br />")
Next
%>
Result:
username
age
If you do not know the number of items in the Contents collection, you can use the Count
property:
<%
dim i
dim j
j=Session.Contents.Count
Response.Write("Session variables: " & j)
For i=1 to j
Response.Write(Session.Contents(i) & "<br />")
Next
%>
Result:
Session variables: 2
Donald Duck
50
Loop Through the StaticObjects Collection
You can loop through the StaticObjects collection, to see the values of all objects stored
in the Session object:
<%
dim i
For Each i in Session.StaticObjects
Response.Write(i & "<br />")
Next
%>
ASP Application Object

A group of ASP files that work together to perform some purpose is called an
application. The Application object in ASP is used to tie these files together.
Application Object
An application on the Web may be a group of ASP files. The ASP files work together to
perform some purpose. The Application object in ASP is used to tie these files together.
The Application object is used to store and access variables from any page, just like the
Session object. The difference is that ALL users share one Application object, while with
Sessions there is one Session object for EACH user.
The Application object should hold information that will be used by many pages in the
application (like database connection information). This means that you can access the
information from any page. It also means that you can change the information in one
place and the changes will automatically be reflected on all pages.
Store and Retrieve Application Variables
Application variables can be accessed and changed by any page in the application.
You can create Application variables in "Global.asa" like this:
<script language="vbscript" runat="server">
Sub Application_OnStart
application("vartime")=""
application("users")=1
End Sub
</script>
In the example above we have created two Application variables: "vartime" and "users".
You can access the value of an Application variable like this:
There are
<%
Response.Write(Application("users"))
%>
active connections.
ASP Response Object
The ASP Response object is used to send output to the user from the server.
The ASP Response object is used to send output to the user from the server. It has
collections, properties, and methods.
Methods like
Method Description
Redirect Redirects the user to a different URL
Write Writes a specified string to the output
ASP Request Object

The ASP Request object is used to get information from the user.
When a browser asks for a page from a server, it is called a request. The ASP Request
object is used to get information from the user. Its collections, properties, and methods
are described below:
QueryString Collection Examples
ASP Source:
<html>
<body>
<form action="demo_reqquery.asp" method="get">
</form>
<%
dim fname
fname=Request.QueryString("fname")
If fname<>"" Then
End If
%>
</body>
</html>
Output Result:
Submit
Your name:
ASP Source
<html>
<body>
<form action="demo_simplereqquery.asp" method="get">

First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
</form>
<%
Response.Write(Request.QueryString)
%>
</body>
</html>
Output Result:
First name:
Last name:
Submit
Form Collection Examples
This example demonstrates how the Form collection retrieves the values from a
form. The form uses the POST method, which means that the information sent is
invisible to others, and it has no limits (you can send a large amount of information).
<html>
<body>
<form action="demo_simpleform1.asp" method="post">

First name:
<input type="text" name="fname" value="Donald" />
<br />
Last name:
<input type="text" name="lname" value="Duck" />
<br />
</form>
<%
Response.Write(Request.Form)
%>
</body>
</html>
Output Result:
First name:
Last name:
Submit
fname=Donald&lname=Duck
This example demonstrates how to use the values retrieved from a form. We use
the Form collection. The form uses the post method.
ASP Source:
<html>
<body>
<form action="demo_simpleform.asp" method="post">
</form>
<%
dim fname
fname=Request.Form("fname")
If fname<>"" Then
End If
%>
</body>
</html>
Output Result:
Submit
Your name:
Collections
Collection Description
Contents Contains all the items appended to the application through a
script command
StaticObjects Contains all the objects appended to the application with the
HTML <object> tag
Methods
Method Description
Contents.Remove Deletes an item from the Contents collection
Contents.RemoveAll() Deletes all items from the Contents collection
Lock Prevents other users from modifying the variables in the
Application object
Unlock Enables other users to modify the variables in the Application
object (after it has been locked using the Lock method)
Events
Event Description
Application_OnEnd Occurs when all user sessions are over, and the application
ends
Application_OnStart Occurs before the first new session is created (when the
Application object is first referenced)
ASP Application_OnStart and Application_OnEnd Events
Application_OnStart Event
The Application_OnStart event occurs before the first new session is created (when the
Application object is first referenced).
This event is placed in the Global.asa file.
Note: Referencing to a Session, Request, or Response objects in the Application_OnStart

event script will cause an error.
Application_OnEnd Event
The Application_OnEnd event occurs when the application ends (when the web server
stops).
Note: The MapPath method cannot be used in the Application_OnEnd code.
Syntax

...
End Sub
Sub Application_OnEnd
...
End Sub
</script>
Examples
Global.asa:
Sub Application_OnEnd()
Application("totvisitors")=Application("visitors")
End Sub
Application("visitors")=0
End Sub
Sub Session_OnStart
Application.Lock
Application("visitors")=Application("visitors")+1
Application.UnLock
End Sub
Sub Session_OnEnd
Application.Lock
Application("visitors")=Application("visitors")-1
Application.UnLock
End Sub
</script>
To display the number of current visitors in an ASP file:
<html>
<head>
</head>
<body>
<p>
There are <%response.write(Application("visitors"))%>
online now!
</p>
</body>
</html>
ASP Session Object

session. Variables stored in the Session object hold information about one single
user, and are available to all pages in one application.
Session Object
When you are working with an application, you open it, do some changes and then you
close it. This is much like a Session. The computer knows who you are. It knows when
you start the application and when you end. But on the internet there is one problem: the
web server does not know who you are and what you do because the HTTP address
doesn't maintain state.
ASP solves this problem by creating a unique cookie for each user. The cookie is sent to
the client and it contains information that identifies the user. This interface is called the
Session object.
session. Variables stored in the Session object hold information about one single user,
and are available to all pages in one application. Common information stored in session
variables are name, id, and preferences. The server creates a new Session object for each
new user, and destroys the Session object when the session expires.
The Session object's collections, properties, methods, and events are described below:
Collections
Collection Description
Contents Contains all the items appended to the session through a
script command
StaticObjects Contains all the objects appended to the session with the
HTML <object> tag
Properties
Property Description
CodePage Specifies the character set that will be used when displaying
dynamic content
LCID Sets or returns an integer that specifies a location or region.
Contents like date, time, and currency will be displayed
according to that location or region
SessionID Returns a unique id for each user. The unique id is generated
by the server
Timeout Sets or returns the timeout period (in minutes) for the Session
object in this application
Methods
Method Description
Abandon Destroys a user session
Contents.Remove Deletes an item from the Contents collection
Contents.RemoveAll() Deletes all items from the Contents collection
Events
Event Description
Session_OnEnd Occurs when a session ends
Session_OnStart Occurs when a session starts
ASP Session_OnStart and Session_OnEnd Events
Session_OnStart Event
The Session_OnStart event occurs when the server creates a session.
Session_OnEnd Event
The Session_OnEnd event occurs when the session ends (abandoned or times out).
Note: The MapPath method cannot be used in the Session_OnEnd code.
Syntax

Sub Session_OnStart
...
End Sub
Sub Session_OnEnd
...
End Sub
</script>
Examples
Global.asa:
Sub Application_OnEnd()
Application("totvisitors")=Application("visitors")
End Sub
Application("visitors")=0
End Sub
Sub Session_OnStart
Application.Lock
Application("visitors")=Application("visitors")+1
Application.UnLock
End Sub
Sub Session_OnEnd
Application.Lock
Application("visitors")=Application("visitors")-1
Application.UnLock
End Sub
</script>
To display the number of current visitors in an ASP file:
<html>
<head>
</head>
<body>
<p>
There are <%response.write(Application("visitors"))%>
online now!
</p>
</body>
</html>
ASP Server Object

The ASP Server object is used to access properties and methods on the server.
Server Object
The ASP Server object is used to access properties and methods on the server. Its
properties and methods are described below:
Properties
Property Description
ScriptTimeout Sets or returns the maximum number of seconds a script can run
before it is terminated
Methods
Method Description
CreateObject Creates an instance of an object
Execute Executes an ASP file from inside another ASP file
GetLastError() Returns an ASPError object that describes the error condition that
occurred
ASP ASPError Object

The ASPError object is used to display detailed information of any error that occurs in
scripts in an ASP page.
The ASPError Object
The ASPError object was implemented in ASP 3.0 and is available in IIS5 and later.
The ASPError object is used to display detailed information of any error that occurs in
scripts in an ASP page. The ASPError object is created when Server.GetLastError is
called, so the error information can only be accessed by using the Server.GetLastError
method.
ASP FileSystemObject Object

The FileSystemObject object is used to access the file system on the server.
The FileSystemObject Object
The FileSystemObject object is used to access the file system on the server. This object
can manipulate files, folders, and directory paths. It is also possible to retrieve file system
information with this object.
The following code creates a text file (c:\test.txt) and then writes some text to the file:
<%
dim fs,fname
set fs=Server.CreateObject("Scripting.FileSystemObject")
set fname=fs.CreateTextFile("c:\test.txt",true)
fname.WriteLine("Hello World!")
fname.Close
set fname=nothing
set fs=nothing
%>
ActiveX Data Objects, Accessing a Database from Active Server Page.
ADO can be used to access databases from your web pages.
Accessing a Database from an ASP Page
The common way to access a database from inside an ASP page is to:
1. Create an ADO connection to a database

2. Open the database connection
3. Create an ADO recordset
4. Open the recordset
5. Extract the data you need from the recordset
6. Close the recordset
7. Close the connection
What is ADO?
• ADO is a Microsoft technology

• ADO stands for ActiveX Data Objects
• ADO is a Microsoft Active-X component
• ADO is automatically installed with Microsoft IIS
• ADO is a programming interface to access data in a database
ADO Database Connection

Before a database can be accessed from a web page, a database connection has to be
established.
Create a DSN-less Database Connection
The easiest way to connect to a database is to use a DSN-less connection. A DSN-less

connection can be used against any Microsoft Access database on your web site.
If you have a database called "northwind.mdb" located in a web directory like

"c:/webdata/", you can connect to the database with the following ASP code:
<%
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open "c:/webdata/northwind.mdb"
%>
Note, from the example above, that you have to specify the Microsoft Access database
driver (Provider) and the physical path to the database on your computer.
Create an ODBC Database Connection
If you have an ODBC database called "northwind" you can connect to the database with
the following ASP code:
<%
conn.Open "northwind"
%>
With an ODBC connection, you can connect to any database, on any computer in your
network, as long as an ODBC connection is available.
An ODBC Connection to an MS Access Database
Here is how to create a connection to a MS Access Database:
1. Open the ODBC icon in your Control Panel.

2. Choose the System DSN tab.
3. Click on Add in the System DSN tab.
4. Select the Microsoft Access Driver. Click Finish.
5. In the next screen, click Select to locate the database.
6. Give the database a Data Source Name (DSN).
7. Click OK.
Note that this configuration has to be done on the computer where your web site is
located. If you are running Personal Web Server (PWS) or Internet Information Server
(IIS) on your own computer, the instructions above will work, but if your web site is
located on a remote server, you have to have physical access to that server, or ask your
web host to do this for you.
The ADO Connection Object
The ADO Connection object is used to create an open connection to a data

source. Through this connection, you can access and manipulate a database.
Connection Object
The ADO Connection Object is used to create an open connection to a data

source. Through this connection, you can access and manipulate a database.
If you want to access a database multiple times, you should establish a connection using
the Connection object. You can also make a connection to a database by passing a
connection string via a Command or Recordset object. However, this type of connection
is only good for one specific, single query.
ProgID
set objConnection=Server.CreateObject("ADODB.connection")
ADO Recordset
To be able to read database data, the data must first be loaded into a recordset.
Create an ADO Table Recordset
After an ADO Database Connection has been created, as demonstrated in the previous
chapter, it is possible to create an ADO Recordset.
Suppose we have a database named "Northwind", we can get access to the "Customers"
table inside the database with the following lines:
<%
set rs=Server.CreateObject("ADODB.recordset")
rs.Open "Customers", conn
%>
Create an ADO SQL Recordset
We can also get access to the data in the "Customers" table using SQL:
<%
rs.Open "Select * from Customers", conn
%>
Extract Data from the Recordset
After a recordset is opened, we can extract data from recordset.

Suppose we have a database named "Northwind", we can get access to the "Customers"
table inside the database with the following lines:
<%
rs.Open "Select * from Customers", conn
for each x in rs.fields
response.write(x.name)
response.write(" = ")
response.write(x.value)
next
%>
The ADO Recordset Object
The ADO Recordset object is used to hold a set of records from a database table.
ADO Display
The most common way to display data from a recordset, is to display the data in an
HTML table.
Display the Field Names and Field Values
We have a database named "Northwind" and we want to display the data from the
"Customers" table (remember to save the file with an .asp extension):
<html>
<body>
<%
set rs = Server.CreateObject("ADODB.recordset")
rs.Open "SELECT * FROM Customers", conn
do until rs.EOF
for each x in rs.Fields
Response.Write(x.name)
Response.Write(" = ")
Response.Write(x.value & "<br />")
next
Response.Write("<br />")
rs.MoveNext
loop
rs.close
conn.close
%>
</body>
</html>
Here is the result:
CustomerID = ALFKI
CompanyName = Alfreds Futterkiste
ContactName = Maria Anders
ContactTitle = Sales Representative
Address = Obere Str. 57
City = Berlin
PostalCode = 12209
Country = Germany
CustomerID = BERGS
CompanyName = Berglunds snabbköp
ContactName = Christina Berglund
ContactTitle = Order Administrator
Address = Berguvsvägen 8
City = Luleå
PostalCode = S-958 22
Country = Sweden
CustomerID = CENTC
CompanyName = Centro comercial Moctezuma
ContactName = Francisco Chang
ContactTitle = Marketing Manager
Address = Sierras de Granada 9993
City = México D.F.
PostalCode = 05022
Country = Mexico
....
....
....
Display the Field Names and Field Values in an HTML Table
We can also display the data from the "Customers" table inside an HTML table with the
following lines (remember to save the file with an .asp extension):
<html>
<body>
<%
rs.Open "SELECT Companyname, Contactname FROM Customers", conn
%>
<table border="1" width="100%">
<%do until rs.EOF%>
<tr>
<%for each x in rs.Fields%>
<td><%Response.Write(x.value)%></td>
<%next
rs.MoveNext%>
</tr>
<%loop
rs.close
conn.close
%>
</table>
</body>
</html>
Here is the result:
Alfreds Futterkiste Maria Anders

Berglunds snabbköp Christina Berglund
Centro comercial Moctezuma Francisco Chang
Add Headers to the HTML Table
We want to add headers to the HTML table to make it more readable (remember to save
the file with an .asp extension):
<html>
<body>
<%
sql="SELECT Companyname, Contactname FROM Customers"
rs.Open sql, conn
%>
<tr>
<%for each x in rs.Fields
response.write("<th>" & x.name & "</th>")
next%>
</tr>
<%do until rs.EOF%>
<tr>
<%next
rs.MoveNext%>
</tr>
<%loop
rs.close
conn.close
%>
</table>
</body>
</html>
Here is the result:
Companyname Contactname
Berglunds snabbköp Christina Berglund
Centro comercial Moctezuma Francisco Chang
ADO Queries
We may use SQL to create queries to specify only a selected set of records and fields
to view.
Display Selected Data
We want to display only the records from the "Customers" table that have a
"Companyname" that starts with an A (remember to save the file with an .asp extension):
<html>
<body>
<%
sql="SELECT Companyname, Contactname FROM Customers
WHERE CompanyName LIKE 'A%'"
rs.Open sql, conn
%>
<tr>
next%>
</tr>
<%do until rs.EOF%>
<tr>
<%next
rs.MoveNext%>
</tr>
<%loop
rs.close
conn.close%>
</table>
</body>
</html>
Here is the result:
Display records where "Companyname" starts with an A
How to display only the records from the "Customers" table that have a "Companyname"
that starts with an A.
ASP Source:
<html>
<body>
<%
conn.Open(Server.Mappath("/db/northwind.mdb"))
sql="SELECT Companyname, Contactname FROM Customers WHERE CompanyName
LIKE 'A%'"
rs.Open sql, conn
%>

<tr>
next%>
</tr>
<%do until rs.EOF%>
<tr>
<%next
rs.MoveNext%>
</tr>
<%loop
rs.close
conn.close
%>
</table>
</body>
</html>
Output Result:
Let the user choose filter
Let the user choose which country to show customers from.
ASP Source:
<html>
<body>
<%
conn.Open(Server.Mappath("/db/northwind.mdb"))
sql="SELECT DISTINCT Country FROM Customers ORDER BY Country"
rs.Open sql,conn
country=request.form("country")
%>
<form method="post">
Choose Country <select name="country">
<% do until rs.EOF
response.write("<option")
if rs.fields("country")=country then
response.write(" selected")
end if
response.write(">")
response.write(rs.fields("Country"))
rs.MoveNext
loop
rs.Close
set rs=Nothing %>
</select>
<input type="submit" value="Show customers">
</form>
<%
if country<>"" then
sql="SELECT Companyname,Contactname,Country FROM Customers WHERE
country='" & country & "'"
set rs=Server.CreateObject("ADODB.Recordset")
rs.Open sql,conn
%>
<table width="100%" cellspacing="0" cellpadding="2" border="1">
<tr>
<th>Companyname</th>
<th>Contactname</th>
<th>Country</th>
</tr>
<%
do until rs.EOF
response.write("<tr>")
response.write("<td>" & rs.fields("companyname") & "</td>")
response.write("<td>" & rs.fields("contactname") & "</td>")
response.write("<td>" & rs.fields("country") & "</td>")
response.write("</tr>")
rs.MoveNext
loop
rs.close
conn.Close
set rs=Nothing
set conn=Nothing%>
</table>
<% end if %>
</body>
</html>
Output Result:
Show customers
Choose Country
DO Add Records
We may use the SQL INSERT INTO command to add a record to a table in a
database.
Add a Record to a Table in a Database
We want to add a new record to the Customers table in the Northwind database. We first
create a form that contains the fields we want to collect data from:
<html>
<body>
<form method="post" action="demo_add.asp">
<table>
<tr>
<td>CustomerID:</td>
<td><input name="custid"></td>
</tr><tr>
<td>Company Name:</td>
<td><input name="compname"></td>
</tr><tr>
<td>Contact Name:</td>
<td><input name="contname"></td>
</tr><tr>
<td>Address:</td>
<td><input name="address"></td>
</tr><tr>
<td>City:</td>
<td><input name="city"></td>
</tr><tr>
<td>Postal Code:</td>
<td><input name="postcode"></td>
</tr><tr>
<td>Country:</td>
<td><input name="country"></td>
</tr>
</table>
<br /><br />
<input type="submit" value="Add New">
<input type="reset" value="Cancel">
</form>
</body>
</html>
When the user presses the submit button the form is sent to a file called "demo_add.asp".
The "demo_add.asp" file contains the code that will add a new record to the Customers
table:
<html>
<body>
<%
sql="INSERT INTO customers (customerID,companyname,"
sql=sql & "contactname,address,city,postalcode,country)"
sql=sql & " VALUES "
sql=sql & "('" & Request.Form("custid") & "',"
sql=sql & "'" & Request.Form("compname") & "',"
sql=sql & "'" & Request.Form("contname") & "',"
sql=sql & "'" & Request.Form("address") & "',"
sql=sql & "'" & Request.Form("city") & "',"
sql=sql & "'" & Request.Form("postcode") & "',"
sql=sql & "'" & Request.Form("country") & "')"
on error resume next
conn.Execute sql,recaffected
if err<>0 then
Response.Write("No update permissions!")
else
Response.Write("<h3>" & recaffected & " record added</h3>")
end if
conn.close
%>
</body>
</html>
Important
If you use the SQL INSERT command be aware of the following:
• If the table contains a primary key, make sure to append a unique, non-Null value
to the primary key field (if not, the provider may not append the record, or an
error occurs)
• If the table contains an AutoNumber field, do not include this field in the SQL
INSERT command (the value of this field will be taken care of automatically by
the provider)
What about Fields With no Data?
In a MS Access database, you can enter zero-length strings ("") in Text, Hyperlink, and
Memo fields IF you set the AllowZeroLength property to Yes.
Note: Not all databases support zero-length strings and may cause an error when a record
with blank fields is added. It is important to check what data types your database
supports.
ADO Update Records

We may use the SQL UPDATE command to update a record in a table in a
database.
Update a Record in a Table
We want to update a record in the Customers table in the Northwind database. We first
create a table that lists all records in the Customers table:
<html>
<body>
<%
rs.open "SELECT * FROM customers",conn
%>
<h2>List Database</h2>
<tr>
<%
response.write("<th>" & ucase(x.name) & "</th>")
next
%>
</tr>
<% do until rs.EOF %>
<tr>
<form method="post" action="demo_update.asp">
<%
if lcase(x.name)="customerid" then%>
<td>
<input type="submit" name="customerID" value="<%=x.value%>">
</td>
<%else%>
<%end if
next
%>
</form>
<%rs.MoveNext%>
</tr>
<%
loop
conn.close
%>
</table>
</body>
</html>
If the user clicks on the button in the "customerID" column he or she will be taken to a
new file called "demo_update.asp". The "demo_update.asp" file contains the source code
on how to create input fields based on the fields from one record in the database table. It
also contains a "Update record" button that will save your changes:
<html>
<body>
<h2>Update Record</h2>
<%
cid=Request.Form("customerID")
if Request.form("companyname")="" then
rs.open "SELECT * FROM customers WHERE customerID='" & cid & "'",conn
%>
<form method="post" action="demo_update.asp">
<table>
<tr>
<td><%=x.name%></td>
<td><input name="<%=x.name%>" value="<%=x.value%>"></td>
<%next%>
</tr>
</table>
<br /><br />
<input type="submit" value="Update record">
</form>
<%
else
sql="UPDATE customers SET "
sql=sql & "companyname='" & Request.Form("companyname") & "',"
sql=sql & "contactname='" & Request.Form("contactname") & "',"
sql=sql & "address='" & Request.Form("address") & "',"
sql=sql & "city='" & Request.Form("city") & "',"
sql=sql & "postalcode='" & Request.Form("postalcode") & "',"
sql=sql & "country='" & Request.Form("country") & "'"
sql=sql & " WHERE customerID='" & cid & "'"
conn.Execute sql
if err<>0 then
response.write("No update permissions!")
else
response.write("Record " & cid & " was updated!")
end if
end if
conn.close
%>
</body>
</html>
ADO Delete Records

We may use the SQL DELETE command to delete a record in a table in a
database.
Delete a Record in a Table
We want to delete a record in the Customers table in the Northwind database. We first
create a table that lists all records in the Customers table:
<html>
<body>
<%
rs.open "SELECT * FROM customers",conn
%>
<h2>List Database</h2>
<tr>
<%
next
%>
</tr>
<% do until rs.EOF %>
<tr>
<form method="post" action="demo_delete.asp">
<%
if x.name="customerID" then%>
<td>
<input type="submit" name="customerID" value="<%=x.value%>">
</td>
<%else%>
<%end if
next
%>
</form>
<%rs.MoveNext%>
</tr>
<%
loop
conn.close
%>
</table>
</body>
</html>
If the user clicks on the button in the "customerID" column he or she will be taken to a
new file called "demo_delete.asp". The "demo_delete.asp" file contains the source code
on how to create input fields based on the fields from one record in the database table. It
also contains a "Delete record" button that will delete the current record:
<html>
<body>
<h2>Delete Record</h2>
<%
cid=Request.Form("customerID")
if Request.form("companyname")="" then
rs.open "SELECT * FROM customers WHERE customerID='" & cid & "'",conn
%>
<form method="post" action="demo_delete.asp">
<table>
<tr>
<td><input name="<%=x.name%>" value="<%=x.value%>"></td>
<%next%>
</tr>
</table>
<br /><br />
<input type="submit" value="Delete record">
</form>
<%
else
sql="DELETE FROM customers"
sql=sql & " WHERE customerID='" & cid & "'"
conn.Execute sql
if err<>0 then
response.write("No update permissions!")
else
response.write("Record " & cid & " was deleted!")
end if
end if
conn.close
%>
</body>
</html>
List, Edit, Update, and Delete Database Records
List, edit, update, and delete database records
List Database Table
Click on a button to modify a record.
NO FNAME LNAME PHONE EMAIL HOMEPAGE DATEADDED

1/18/2001
55 66 77
16 Terje Beck tertje@somewere.com www.amazon.com 7:45:47 AM
99
7/11/2000
17 Jan Refsnes 66 77 88 jani@w3schools.com http:/www.w3schools.com 1:01:56 PM
4/26/2000
39 Torleif Rasmussen 77 88 99 N/A N/A 3:46:41 AM
4/25/2000
46 anton chek 83833 apa@kabar.com www.yahoo.com 7:17:45 AM
5/31/2000
555-
48 stale refsnes refsnes@hotmail.com http://www.w3schools.com 11:14:33 AM
12234
1/18/2001
98410-
52 hari prawin hari@hari.com www.hari.com 7:47:58 AM
95897
3/22/2001
53 Hege Refsnes N/A hege@somewhere.com N/A 1:35:01 PM
View source on how to list a database table in an HTML table
<%option explicit%>
<html>
<head><title>ADO - List Database Records</title></head>
<body>
<%
dim conn,rs,x
conn.provider="Microsoft.Jet.OLEDB.4.0"
conn.open(server.mappath("/db/database.mdb"))
rs.open "SELECT * FROM tblGuestBook",conn
%>
<h2>List Database Table</h2>
<p>Click on a button to modify a record.</p>

<tr bgcolor="#b0c4de">
<%
next
%>
</tr>
<%do until rs.EOF%>
<tr bgcolor="#f0f0f0">
<form method="post" action="demo_db_edit.asp" target="_blank">
<%
if x.name="no" then%>
<td><input type="submit" name="no" value="<%=x.value%>"></td>
<%else%>
<td><%Response.Write(x.value)%> </td>
<%end if
next
%>
</form>
<%rs.MoveNext%>
</tr>
<%
loop
rs.close
set rs=nothing
conn.close
set conn=nothing
%>
</table>
<p><a href="showcode.asp?source=demo_db_list.asp">View source on how to list a

database table in an HTML table</a></p>
<p><b>Note:</b> If you click on a button in the "no" column a new page will open. On
the new page you may look at the source on how to create input fields based on the fields
from one record in the database table.</p>
</body>
</html>
Edit Database Table

fname
lname
phone
email
homepage
Save Delete
View source on how to create input fields based on the fields from one record in the
database table.
Note: If you click on "Save" or "Delete" a new page will open. On the new page you may
look at the source on how to submit changes to, or delete from a database table.
<%
no=Request.Form("no")
if no="" then response.end
conn.provider="Microsoft.Jet.OLEDB.4.0"
conn.open(server.mappath("/db/database.mdb"))
set rs = Server.CreateObject("ADODB.Recordset")
rs.Open "Select * from tblGuestBook where tblGuestBook.[no]=" & no , conn
%>
<html>
<head>
<title>ADO - Edit DataBase Record</title>
</head>
<body>
<h2>Edit Database Table</h2>
<form method="post" action="demo_db_submit.asp" target="_blank">
<input name="no" type="hidden" value=<%=no%>>
<table bgcolor="#b0c4de">
<%
if x.name <> "no" and x.name <> "dateadded" then%>
<tr>
<td><%=x.name%> </td>
<td><input name="<%=x.name%>" value="<%=x.value%>" size="20"></td>
<%end if
next
rs.close
conn.close
%>
</tr>
</table>
<br />
<input type="submit" name="action" value="Save">
<input type="submit" name="action" value="Delete">
</form>
<p><a href="showcode.asp?source=demo_db_edit.asp">View source on how to create

input fields based on the fields from one record in the database table</a>.</p>
<p><b>Note:</b> If you click on "Save" or "Delete" a new page will open. On the new
page you may look at the source on how to submit changes to, or delete from a database
table.</p>
</body>
</html>
Add a New Record to a Database
Adding a Record
Fname
Lname
Phone
Email
homepage
Add Record
View source on how to create input fields based on the fields in the database table.
Note: If you click on "Add Record" a new page will open. On the new page you may
look at the source on how to add a record to a database table. <html>
<head>
<title>ADO - Add DataBase Record</title>
</head>
<body>
<%
conn.Open(Server.mappath("/db/database.mdb"))
set rs = Server.CreateObject("ADODB.Recordset")
rs.Open "select * from tblGuestBook", conn
%>
<h2>Adding a Record</h2>
<form method="post" action="demo_db_new.asp" target="_blank">
<table bgcolor="#b0c4de">
<%
if x.name <> "no" and x.name <> "dateadded" then%>
<tr>
<td><input name="<%=x.name%>" value="N/A" size="20"></td>
<%
end if
next
rs.close
conn.close
%>
</tr></table>
<br />
<input type="submit" name="action" value="Add Record">
</form>
<p><a href="showcode.asp?source=demo_db_add.asp">View source on how to create

input fields based on the fields in the database table</a>.</p>
<p><b>Note:</b> If you click on "Add Record" a new page will open. On the new page
you may look at the source on how to add a record to a database table.</p>
</body>
</html>
Lecture 28-35
Introducing Visual InterDev and the World Wide Web
Visual InterDev, the long-awaited Web application development tool

from Microsoft, is finally here. Many developers are applauding its
features and the application development needs that it addresses.
Developers now have a tool similar to other application development
tools like Visual Basic and Visual C++ that they can use to create their
Web applications. No more downloading the latest beta copy of a
single-focused tool from the Web. You now have a tool that integrates
many of the popular components and technologies.
During the first day, the context for Visual InterDev will be set, and
you'll be introduce to some of the latest developments concerning the
Internet and the WWW. You will learn about the importance of the
Internet. You also will learn about the rising number of intranets, or
private internets, that are growing within many companies. You will
see how the WWW has become ubiquitous and the implications that it
has for individuals and businesses. In discussing the WWW, you will
discover the differences between static and dynamic web pages and
what you should focus on for the future. You will then be introduced to
the reasons for having an application development tool for the Web.
Finally, you will get a glimpse of Visual InterDev.
The Importance of the Internet
You obviously realize the importance of the Internet or you wouldn't

be reading this book. The Internet and the World Wide Web are
everywhere. You can't read the newspaper or watch television without
seeing some kind of reference to the Internet. "Cyberspace" and the
"Information Superhighway" have become common vocabulary for a
whole new audience. Virtually every television commercial and print ad
contains a reference like the following:
"For more information, visit us at our Web site at www.whatever.com."

The Internet has come a long way since the old ARPANET days.
Originally designed for research use by the Department of Defense,
the Internet has become a haven for millions of people who have
experienced the value of communicating with people around the world.
Internet users have instant access to a plethora of knowledge
supported by this network of networks.
Most people point to 1991 as the beginning of the Internet explosion.

In the late 1980s, the academic community began to see the Internet
as a valuable tool. Professors and students at universities around the
world began using the Internet as a way to gain valuable research and
knowledge about myriad subjects. Services such as electronic mail (e-
mail), file transfer capability (ftp), and newsgroup discussions all
contributed to the growth of the Internet audience. Then, in 1991, the
National Science Foundation (NSF), which was the major funding
group for the Internet, dropped most of its financial support and
allowed commercial traffic onto the Internet. The door was now open
for all types of individuals and businesses to take advantage of this
vital communication network.
We are truly living in the Information Age, and the Internet has
become the primary means for expanding our horizons. The Internet
has opened up any number of possibilities for applications by providing
a ready-made network for businesses to use. Growth in the Internet
has also forced us to rethink the way we approach life. A student in
California can communicate with his parents in Florida via e-mail
instead of building up a hefty, long distance telephone bill. In fact, now
most families can conduct conversations over the Internet, thereby
skirting the phone companies.
With the growth of the WWW, businesses have been scrambling to

gain a presence on the Internet. In 1995, corporate spending on
Internet/intranet systems was $12 billion. This figure is expected to
grow to $208 billion by the year 2000. Developers will play a huge role
in helping organizations and businesses understand the importance of
using the Internet from an application and communication standpoint.
The Rise in Intranets
Many companies are realizing the benefits of the Internet from within
their companies. These organizations are creating intranets, which are
private, or internal, internets. These intranets have been established
initially as an internal communication tool. Employees can send e-mail
to other employees within the company. Intranets enable private and
sensitive corporate information to be distributed and shared within the
organization. This new medium of communication has become a very
cost-effective solution, especially for geographically dispersed
businesses that have employees all over the world. The time to
communicate new policies, procedures, and information is immediately
reduced along with postage and paper costs.
An intranet also can be used for software distribution and for providing
access to vital applications. Companies are now starting to put
applications like survey forms and employee benefit registration forms
on their intranets to simplify basic processes. Businesses also are
starting to consider replacing or enhancing their mission-critical
applications (like accounting, sales order entry, oil and gas trading,
and so on) with applications that are secured within an intranet.
Intranets are usually protected and secured by means of a firewall that
prevents outside intruders from accessing the internal network. To the
user, there is no difference between accessing the Internet and the
company's intranet. Figure 1.1 depicts a typical configuration for an
intranet.
Figure 1.1.
A high level view of an intranet.
Sun Microsystems is a perfect example of how a company can save

real money in terms of printing, processing, and mailing costs through
the use of an intranet. Sun has used the Internet to communicate
basic corporate information, such as organization charts and
geographic office locations. Employees can access monthly updates
from their CEO Scott McNealy which are presented in audio and video
formats. Sun also provides information about its products by providing
an online product catalog and updates on new products. Employee
information regarding training, travel, and human resource policies is
placed on the intranet. Sun even provides an "Applications Chest" that
gives employees access to a variety of tools that enhance their
productivity.
Internet performance has become a huge topic of conversation. Some

individuals have even discussed totally redesigning the Internet
infrastructure to support the growing number of users. Without
entering this debate, I would like to point out that intranets provide a
way to use the Internet while taking more control over performance of
your applications. With an intranet, a company can use the Internet
architecture model while providing the internal infrastructure to
guarantee response time and security.
Intranet applications also are cost effective from an administration and

deployment standpoint. The browser serves as the universal client for
all desktops. The server makes the desktop come alive by providing
information and database access. Deployment and administration costs
are reduced, because you don't have to reinstall an updated
application on everyone's desktops as you do when creating
proprietary client-server applications. Electronic commerce is going to
drastically grow in the next few years and with it will come a continued
rise in the use of intranets.
This section has described intranets as being internal to an

organization or business. Private intranets that focus on providing a
reliable and secure infrastructure for groups of businesses also are
emerging. Technology companies are beginning to prepare for this
occurrence. Microsoft formed an alliance with British
Telecommunications and MCI to provide private data networks for
global companies and their customers.
Private intranets offer the same reliability, security, and guaranteed

response time that a company's internal intranet provides. The
difference between them is that a company's reach extends beyond
the internal organization to external entities. The use of private
intranets will continue to rise as application requirements exceed the
current capabilities of the Internet infrastructure.
The Ubiquitous Web
The second explosion that propelled the Internet into national

prominence was the creation of the World Wide Web. The Web has
many origins, but most people point to the time period between 1989-
1991 when the Conseil European pour la Recherche Nucleaire (CERN)
European Laboratory for Particle Physics in Geneva, Switzerland,
developed its first specifications. Tim Berners-Lee, a researcher for
CERN, developed the basic concepts of sharing information through
the use of a consistent, universal interface. Mark Andreessen is
credited with developing the first browser (Mosaic) for the Web in
1993. The use of a browser to view the Internet turned attention away
from the information stored on the server, focusing more on the user
experience through the client machine. The browser provided a
graphical, point-and-click interface for viewing Web content that made
the Internet easier to access.
The Web is the primary service responsible for bringing the Internet
into the homes of millions. The Web is the most popular and useable
service. The hypertext links to a plethora of information allow the user
to experience a "web" of knowledge. The user can choose the learning
path instead of following a sequential or linear pattern.
The most recent numbers estimate that more than 45 million people
have visited the Web at least once. When sports figures, music
celebrities, and news anchors are touting the Web, you know it has
become ubiquitous. The Web provides an alternate delivery channel for
all types of information as well as graphically robust applications.
Major software vendors are totally revamping their products to make
them Internet-enabled. Banks are having to rethink their strategy of
targeting and servicing their customers by providing online banking.
Businesses are establishing a presence on the Web to offer products
and services electronically. The Web is everywhere, and we must learn
how to properly and constructively use its capabilities.
The first wave of Web development involved information publishing.

Rudimentary tools were provided to convert documents created with
common word processors to the HTML format of the Web. HTML
editors also have provided a way to create original documents as well
as Web pages and deploy them on the Web. As stated, the Internet
and the Web have saved a lot of money for companies in terms of
printing, processing, and mailing costs. The Web has extended the
notion of textual documentation to provide graphical information as
well. Graphics, 3D images, audio, and video can truly enhance the
user's experience on the Web. Companies like Macromedia and
RealAudio have contributed to the multimedia experience by providing
enhanced and animated graphics and audio capability. The ESPNET
SportsZone is one of the most popular sites on the Web largely due to
the way the site employs multimedia. You can download ESPN
commercials both in audio and video format as well as listen to press
conferences and other sporting events. This site does owe some credit
to the popularity of ESPN, but the people would not be visiting the site
if it didn't provide a rich and rewarding experience.
The second wave of Web development has been the creation of

functional applications. These applications extend the simple
registration forms commonly seen on Web sites to become true
interactive applications that include database accessibility. These
applications can be classified as just another phase of client-server.
In taking a look at the architecture of the Web, many of the principles
have been carried over from client-server architectures. Figure 1.2
illustrates a typical client-server architecture.
Figure 1.2.
A typical client-server architecture.
Client-server is a style of computing where the client machine makes a

request of a server machine. The request is usually a request for
information, as in a database request, or for processing, such as
updating a database or running a batch process. The client machine
makes the request, and the server machine fulfills this request. The
benefit of client-server systems is that they take advantage of the
strengths of each machine or platform. In a typical scenario, the client
handles some application logic and the presentation to the user while
the server provides the back-end processing and database functions.
In a typical Web application, the browser serves as the universal client

that sends a request for a web page, interprets the HTML document,
and displays it to the user. The web server receives the request
through the HyperText Transport Protocol (HTTP) and returns the
required information in HTML format that the client can understand.
Similar to client-server, you can distribute the application processing
and database management portions to varying degrees between the
client and the server machine. Figure 1.3 depicts a typical Web-based
architecture.
Figure 1.3.
A typical Web-based architecture.
The main benefit to Web-based applications over client-server is found

in the deployment. In a Web-based scenario, you don't have to deploy
a new executable on each person's desktop with each new application
feature or update. The browser serves as the universal client,
providing access to the most current information on the server.
Version control, software distribution, and systems management costs
are significantly reduced for Web-based applications.
A more in-depth discussion concerning how the web client and server
interact is warranted here. Historically, Web applications have been
based on HTML and common gateway interface (CGI) programs on the
server. The Web browser interprets the HTML tags and appropriately
formats the page for the user. A web page can be a combination of
formatted text, images and graphics, audio, and video. HTML also
allows for the creation of basic forms that contain text fields, radio
buttons, checkboxes, push buttons, and listboxes. These objects are
discussed in more detail on Day 12, "Using Basic and Advanced HTML
Form Controls."
CGI programs have typically been used for processing requests on the
server and distributing information to the client machine. CGI
programs, or scripts, are executable files that can be built using
languages such as UNIX shell script, Perl, C, and so on. As information
is updated on your database, the CGI script can handle accessing the
data and passing the information back down to the client browser. The
advantage is that you don't have to write new HTML code for every
new document or database update. The CGI server program provides
a reusable component that saves development time.
I mentioned the HTTP protocol earlier in this chapter. HTTP is the

protocol that allows the browser to connect to a web server. HTTP is a
stateless protocol; that is, the client and server don't maintain a
persistent connection. The client makes a connection to the server and
sends a request. The server receives the request, processes it, then
terminates the connection. This process is repeated many times during
a user session. This kind of communication would be like having a
telephone conversation with a friend where you would say something,
hang up the telephone, then dial again to say something else. This
dialogue is very tedious. Interactive applications must have some way
to maintain state with the user machine in order to provide for the
needs of applications like sales order processing.
Microsoft and Netscape have led the charge to develop an effective

server process that supports a more interactive state with the client
machine. The creation of application programming interfaces, or APIs,
has opened up all kinds of possibilities over the traditional use of CGI
programs. There are several specific benefits to using APIs. First, APIs
are more efficient than CGI programs. A CGI program opens up a
process in memory for each client request. APIs execute processes in
the same memory address space, eliminating the overhead of separate
executing processes on one machine. By using this model, APIs use
less memory for executing a process. Also, initialization with the client
machine is performed once for all requests. Another benefit of APIs is
their ability to maintain state. API programs permit a persistent
connection between the client and server, which can be a huge benefit
when developing an application with moderate to intensive database
connectivity. Also, separate requests can share information about the
client, because the programs remain resident in memory.
The main disadvantage to APIs is that they're proprietary in nature.

Whereas CGI programs are server-independent, APIs are confined to
their respective web server platforms. Table 1.1 presents the most
common APIs and their supported server platforms.
Table 1.1. The most popular APIs, their respective vendors, and supported server
platforms.
API Vendor Server Platform Supported

Microsoft Internet Information Server, Process Software
ISAPI Microsoft
Purveyor WebServer
NSAPI Netscape Netscape Commerce/Communication Server
O'Reilly &
WSAPI O'Reilly & Associates WebSite
Associates
To summarize, the Web has become popular for a variety of reasons.

The Web provides graphically rich content on a variety of topics to
many users. The Web also supports transaction-based services that
enable businesses and consumers to come together in an electronic
market. Examples include ordering books, making airline reservations,
and trading stocks. Learning is also significantly enhanced by having
access to all kinds of documents, white papers, and training materials.
Name the subject, and you can become an expert on it in no time at
all by accessing the Web.
The Difference Between Static and Dynamic Web Pages
Web-based applications have made the transition from solely

publishing information to creating an interactive session with the user.
Static web pages represent those pages that provide information that
is nicely formatted in standard HTML. For example, a person might be
able to request an employee benefit handbook to become familiar with
the latest updates in benefits. Static pages are nice, but users want
something more.
Dynamic web pages are those pages that provide true user interaction.
In this model, users interact through the use of server-side programs
that provide for an enhanced experience. Instead of just reading about
the latest human resource benefits, employees can register and
update their benefits. Dynamic web pages support the building of true
interactive applications. Once you have read the published flight
schedules, you can make airline reservations electronically over the
Internet. Stock brokerage houses can publish the hottest stock tips
and then enable you to capitalize on the investment through online
stock trading. Dynamic web pages provide a world of new possibilities
over static pages.
I briefly discussed the use of CGI and API programs in providing a

gateway between your client and server machine in a Web-based
application. Here, I will focus on the ability to use client- and server-
side scripts to create dynamic HTML web pages.
Client-side script is usually associated with objects on the HTML page.

These objects could be standard HTML controls or ActiveX controls.
Client-side script is usually included to make up for the limited
functionality of HTML. The script is included in the HTML page when it
is downloaded from the server to the client machine. The script code
executes on the client machine in response to user interaction and
program events. By keeping the script in the HTML page on the server,
a developer only has to make changes to centralized code located on
the server. The browser downloads the revised web page simplifying
the software distribution process. The goal in this model is to keep the
code resident on the server leaving little or no code on the client
machine. Some examples for using client-side script include user
interface functions, entry verification, and standard programming
functions.
Two of the most popular scripting languages are Netscape's JavaScript

and Microsoft's VBScript. Visual InterDev supports both of these
scripting engines, although Microsoft has implemented its own version
of Netscape's JavaScript called JScript. There are no significant
differences between the JScript and JavaScript implementation.
Another way to create a dynamic experience is through the use of

ActiveX controls and Java applets. Visual InterDev includes and
supports the use of both ActiveX controls and Java applets within your
application. These controls provide many additional functions from
multimedia to database connectivity. Both JavaScript and VBScript are
used to interact with these controls extending the reach of the
interface. Similar to the use of Visual Basic code with Visual Basic
controls, VBScript and JavaScript serve as the glue between the
browser and the particular control. The process is essentially the same
as using a traditional client-server tool like Visual Basic. You add a
control to your page, setting its methods and properties. Once you
have established the basic properties, you add scripting code to handle
the application logic. Visual InterDev incorporates a visual tool for
creating client-side script for your ActiveX controls. The Script Wizard,
first included in the ActiveX Control Pad from Microsoft, provides a
visual interface that builds both VBScript and JavaScript.
Visual InterDev also supports the use of Active Server Pages. Active
Server Pages are a new feature included with Internet Information
Server 3.0; they provide a framework for creating dynamic Web
pages.
Active Server Pages are based on the ActiveX Scripting engine and
enable you to include server-side executable script directly into an
HTML document. You can create Active Server Pages using any of the
popular scripting languages, including VBScript, JavaScript, Perl, and
so on. Figure 1.4 illustrates how an Active Server Page interacts with a
client machine.
Figure 1.4.
This diagram shows how Active Server Pages interact in a Web-based

application.
You will notice from the diagram that the web clients communicate
with the web server through the HTTP protocol. The web server can be
on the Internet or within an intranet. The web server is comprised of
Internet Information Server 3.0, which includes the ActiveX Server
Scripting engine. The diagram shows the Active Server pages, or .asp
files, where the server-side script resides. These files are simply HTML
pages that contain scripting code. This scripting code extends basic
HTML and provides additional functionality for your application.
Visual InterDev enables you to create Active Server Pages. Some of

the visual tools within Visual InterDev generate much of the server-
side script for you. You have the ability to modify this code as well as
create your own server-side script. You will get your chance to build
Active Server Pages on Day 11, "Extending Your Application Through
Active Server Script."
The Need for a New Kind of Tool
There are many extensive and powerful technologies for creating Web
applications, but most tools only focus on a single, specific need. Other
tools are being developed to address a few needs. Developers have
been dreaming of the day when they can use a comprehensive,
integrated development environment to build their applications. Why,
you ask, do you need an integrated tool? Take a walk through a typical
Web development effort and look at the many different types of tools
that you can use to build a Web-based application.
First you need an HTML editor. Many people have created a new
function for an old product and made Notepad the HTML editor of
choice. Table 1.2 outlines some of the more robust and popular
products on the market.
Table 1.2. Popular HTML editors.
HTML Editor Vendor

Hot Dog Pro Sausage Software
HoTMetaL Pro SoftQuad
NaviPress Navisoft
FrontPage Microsoft
Microsoft also has created add-in products for its Office suite of
products that enable HTML conversion. For example, a user who is
familiar with Microsoft Word can use the Internet Assistant for Word to
convert a document to HTML format for display in a browser.
Choosing an HTML editor is only the beginning. To build an application,

you must consider the server-side products as well. You have two
basic choices, as previously mentioned: CGI or APIs. If you choose to
use CGI, you will need to find a programming environment based on
the language you select. The possible languages include Perl and UNIX
shell scripts, Visual Basic, C, and C++. If you choose an API, you need
to select the appropriate API implementation for your application
platform's web server. Refer to Table 1.1 for a listing of APIs and their
supported web server platforms. API server programs are
implemented as dynamic link libraries (DLLs) and built using either C
or C++. Again, you will need to select the appropriate programming
environment to support the selected language.
Java also can be used on the server to provide additional functionality

for your Web-based application. Sun Microsystems built Java as an
independent programming language. It can be implemented as an
application program or as a Java applet. A Java application can interact
with system resources and make calls to external programs. A Java
applet is found embedded within a web page and cannot interact with
system resources. Regardless of your Java implementation, an
environment will be needed to support your Java development.
Microsoft's Visual J++ and Symantec's Visual Café are some of the
more popular tools for Java development.
You will invariably need to select a scripting language to support the

functionality of your application. Whether it is VBScript or JavaScript,
you will need an editor. Notepad, Visual Basic, and the ActiveX Control
Pad from Microsoft all can support your VBScript needs to varying
degrees. Netscape Navigator Gold and Notepad support JavaScript
development.
If you're wondering about connecting your application to a database,

many options exist for database connectivity, depending on how you
want to implement your application. If you're building a Java-based
application, you will select a tool that supports Java Database
Connectivity, or JDBC. Most of the popular Java tools also support
JDBC. Microsoft and Netscape also provide environments and tools for
database connectivity based on their API specification.
The point in this example is that you could spend a lot of time and
effort using a number of tools to implement a robust, Web-based
application. Compatibility between the tools becomes a debugging
nightmare. Also, you spend a lot of time switching between the
development environments, thereby diminishing your productivity.
Due to these limitations, Microsoft created Visual InterDev to address
the many needs for today's Web-based application developer.
Presenting Visual InterDev
The emphasis in creating Visual InterDev was to provide a tool with a

comprehensive, integrated development environment. Visual
InterDev's creators wanted to provide a tool that enabled developers
to utilize many technologies to create and deploy dynamic, Web-based
applications. Microsoft also wanted to emphasize a visual tool. Many
products have been created that enable you to code HTML or connect
to a database; however, these tools typically haven't focused on the
ease of use for the developer.
Developer productivity was a major design goal for Microsoft, and they
have accomplished it by providing Visual InterDev with many wizards
and visual tools, as well as database development features. Powerful
database integration and connectivity were clearly of paramount
importance for its design. Visual InterDev even supports developers in
deploying their sites once they have been built by integrating
comprehensive tools to create and maintain a web site into Visual
InterDev.
Integrated Development Environment
Visual InterDev provides a robust, integrated development

environment to address the many capabilities of the Web. You can
integrate various technologies, like ActiveX controls and Active Server
Components, to create a powerful application. The integrated
development environment enables you to use scripting languages like
VBScript and JavaScript to create dynamic applications and Web
pages. You can work on simultaneous projects of different types all
from within Visual InterDev's Developer Studio interface. In addition to
Visual InterDev projects, you also can develop Visual C++ and Visual
J++ projects.
Visual InterDev Features
Now that you have been introduced to the features and benefits of the
integrated development environment, it's time for a brief look at some
of the specific features of Visual InterDev. This discussion sets the
context for Day 2, in which you will get to meet Visual InterDev up
close and personal.
Visual InterDev includes a wide range of visual tools to augment an

application developer's productivity. HTML editing is significantly
enhanced through the use of the HTML Layout Editor and a version of
the FrontPage HTML editor. The HTML Layout Editor, introduced with
the ActiveX Control Pad from Microsoft, enables you to precisely place
your ActiveX controls onto your web page. It also enables you to
control the x and y coordinates to ensure that the ActiveX controls are
displayed in the proper manner. By using this tool, you're able to take
more control of your user interface, and can ensure that the interface
you build is an effective one.
Visual InterDev also provides WYSIWYG editing through its own

FrontPage 97 HTML editor. FrontPage enables you to visually author
your HTML page. Content authors can use FrontPage 97 to create files
that are completely compatible with Visual InterDev's version of the
FrontPage Editor. Visual InterDev also provides site management tools
that are very similar to those tools provided in FrontPage 97.
The Script Wizard is another visual tool that greatly enhances a

developer's productivity. The Script Wizard enables you to associate
specific actions with associated ActiveX control events. By linking these
events and actions, the Script Wizard generates all of the necessary
script language for you. Once the language is generated, you have the
ability to modify and add to the code. This process can save you
considerable development time by generating the routine script and
enabling you to focus on the more advanced code for your application.
Visual InterDev also includes two tools for spicing up your web pages.
These tools focus on multimedia creation and management. The
Microsoft Image Composer and Microsoft Music Producer enable you to
create graphical images, music, and sounds for your web site. You can
use the Microsoft Image Composer to create engaging images for your
web pages. The Image Composer supports the Adobe Photoshop file
format as well as GIF and JPG formats. The Image Composer is simple
to use, and you don't have to be a graphic artist to master it. The
Music Producer enables you to create music and sound effects for your
web site. You pick from over 100 pre-defined styles of music and can
modify the arrangement of instruments as well as the tempo.
Again, the goal of both of these products is to provide a rich and

rewarding experience for the user. The Media Manager enables you to
manage all of your multimedia files through the use of specialized
folders. By using Media Manager, you can properly organize your
images, sounds, video clips, and other multimedia files.
Now consider some of the key features for building robust server
applications. Visual InterDev enables you to create dynamic web pages
through the use of Active Server Pages. The concept of Active Server
Pages was touched on earlier in the day. As a refresher, Active Server
Pages are HTML pages that contain server-side script. The script code
can be either VBScript, JavaScript, or some other scripting language.
The Active Server Page, or .asp file, resides on the server machine and
executes before being downloaded to the browser.
Active Server Components are a significant part of building distributed

and powerful applications. Active Server Components are programs,
DLLs, or executables (EXEs), that are built using the Component
Object Model (COM) specification. Visual Basic, Visual C++, and Visual
J++ all support the development of COM-based components. These
programs can be called from Active Server Pages to provide robust
application processing on the server machine.
For example, you might want to build an Active Server Component

that uses the strength of the C++ language to perform financial
analysis and return the results to the Web browser. You also can
distribute the application processing load through the use of
Distributed COM (DCOM). Active Server Components provide a method
for building high transaction processing capability into your application.
Visual InterDev provides an environment that is conducive to
incorporating these components into your applications.
Database Integration
Visual InterDev provides some very robust database tools. The Visual
Data Tools included with Visual InterDev are easy to use and
significantly reduce the time and effort for adding database capability
into your application. Some of the features include the following:
• Data View. Visual InterDev project window that enables you to view all of your
database objects including tables, views, stored procedures, and triggers.
• Query Designer A tool that enables you to visually build your SQL database
queries and test the results.
• Database Designer A tool that enables you to design, create, and maintain your
SQL database.
• Stored Procedure/Trigger Editor A tool for editing stored procedures and
triggers for Microsoft SQL Server 6.x and Oracle 7.x.
The Query Designer and the Database Designer employ a user

interface similar to Microsoft Access that's very easy to use. You can
drag and drop objects into the workspace and automatically build your
SQL queries. You also can use the Database Designer to populate the
database and modify existing data.
Other database features include the following:
• ActiveX Data Objects. An object-based approach to accessing a database over

the Web that uses ActiveX Scripting.
• Database Design Time Controls.Controls geared toward the automatic creation
of database connectivity and generation of Active Server scripting.
• Database Wizards. Wizards that guide you through the creation of an
HTML, data-bound form
Database connectivity and integration is one of the best features of

Visual InterDev. You will get a chance to use these features and tools
beginning with Day 8.
What Is Visual InterDev?
The World Wide Web (WWW) has made the Internet come alive for
many new users. In the initial stages, users realized that they could
view numerous documents on various topics from all over the world.
Through the WWW, people have access to a plethora of knowledge.
Not only can you read about many interesting topics on the Web, but
you also can find information about your favorite products and
services.
Once you have gained this knowledge, you will invariably want to act
on it. Some companies have built Web-based applications, enabling
you to buy their products and services electronically over the Internet.
Other companies enable you to fill out registration information to begin
receiving certain services. The point is, applications enable the user to
act on the knowledge they have gained. Businesses can capitalize on
opportunities sooner by becoming closer to the customer through a
virtual marketplace. Visual InterDev provides all the necessary tools to
build these vital applications for the Web.
Visual InterDev is a comprehensive, Web-based application

development tool. Visual InterDev provides an integrated environment
that brings together various technologies to work towards a common
goal of building robust and dynamic applications for the Web. Visual
InterDev achieves this integrated development environment through
the use of the Developer Studio shell interface, first used in Microsoft's
Visual C++. You can open and work on Visual C++ and Visual J++
projects while simultaneously creating your Visual InterDev project.
This feature greatly enhances productivity, especially when you're
building COM and DCOM components and incorporating these
components into your Visual InterDev application.
Visual InterDev enables the developer to build applications that are

dynamic and interactive. Yesterday you learned about the difference
between static and dynamic web pages. Visual InterDev enables the
developer to build dynamic web pages through the use of client- and
server-side script. VBScript is the default scripting language, but
JavaScript also can be used.
Database integration is vital to any application. Visual InterDev

provides a rich and robust set of visual database tools to immediately
enhance your productivity. Visual InterDev supports the major ODBC-
compliant databases, both on the desktop and the server.
Managing your web site once it has been developed is a very crucial
function. Visual InterDev provides a set of tools to view and maintain
your site. These tools are similar and compatible with the site
management tools found in Microsoft FrontPage.
Visual InterDev supports the major object-based technologies that

exist for developing Web-based applications, including ActiveX controls
and Java applets. Visual InterDev supports the use of third-party
ActiveX controls and enables you to integrate your own custom
ActiveX controls. Visual InterDev also provides Design-time Controls
that enable you to set control properties when you're designing your
application and then use this functionality at runtime without the
overhead of a typical ActiveX control.
In a nutshell, Visual InterDev is an exciting new tool that significantly

augments a Web developer's productivity. In this next section, you will
learn why you need to use Visual InterDev instead of other
development tools.
Why Visual InterDev?
The basic premise behind the creation of Visual InterDev was to

provide a tool that enabled developers to build dynamic and interactive
applications for the Web. On the first day, you read about some of the
similarities and differences between client-server application
development and application development for the Web. Essentially,
these two modes of computing were the same in that they both used
the client-server model. That is, client-server and Web applications
both facilitate the client making a request of the server. The main
difference is the degree to which they distribute the application logic
between the client and the server. Figure 2.1 depicts the distribution
of logic for a typical client-server application.
Figure 2.1.
A typical configuration for a client-server application.
While a client-server application distributes a mix of presentation,

application, and database logic between the client and server, Web
applications typically parcel almost all of the logic to the server. Using
this mix, Web applications can provide the thinnest client of all, where
the only component that's installed on the client machine is a browser.
Figure 2.2 shows the configuration for a typical Web-based application.
Figure 2.2.
A typical configuration for a Web-based application.
NOTE: The previous architecture diagrams represent a typical

configuration for both client-server and Web-based applications. You can
distribute the presentation, application, and database logic to varying
degrees between the client and the server in both computing models. This
comparison is meant to show the benefit of the Web-based style of
computing over client-server in terms of software distribution, version
control, and administration.
The benefit of Web-based applications hinges on providing a universal

client to all users that make requests of a centralized application
stored on the server. This application is comprised of HTML pages,
client- and server-side script, object-based controls, and other server-
side components that provide robust application processing. With a
client-server application, you still have a client component that you
have to install with every new enhancement and change to your
application. With a Web-based application, the browser and, hence,
the client remain unchanged, and the application changes are made
centrally, in one place at one time on the server. Administration,
software distribution, and version control are significantly simplified
under this model.
A problem occurs under the Web-based model in that the Internet

doesn't inherently support interactive sessions with the user like the
client-server model. Visual InterDev supports the use of server-side
components to accomplish a persistent dialogue with the user and,
thus, an interactive session.
Visual InterDev provides the tool to take advantage of the new Web-
based model of computing. Some development tools focus on
supporting a single Internet technology. Others support several
technologies for Web-based development but don't provide visual tools
to accomplish these tasks. Visual InterDev exceeds existing Web
development tools by providing a way to integrate multiple
technologies and supplies visual tools to greatly enhance a developer's
productivity. Visual InterDev also surpasses and extends the reach of
client-server tools to the Internet and the Web.
The Essence of Integration
The American Heritage Dictionary defines the word integration in the

following manner:
"1. To make into a whole; unify. 2. To join with something else; unite."
Truly, Visual InterDev unifies and unites the technologies of the Web
through its integrated development environment. You can use the
environment to rapidly build a robust application. You have at your
disposal all of the tools necessary for Web-based application
development in one integrated package. In this sense, the whole really
is greater than the sum of its parts.
Visual InterDev Development Environment
Visual InterDev provides an integrated container for a variety of visual

tools. The integrated development environment is like a house with
many rooms. Each of the rooms has its own specific function that
contributes to the overall purpose of the house. Similar to the rooms
of a house, each function contributes to the well-being of the
developer or resident. No single tool is more important than the other,
just as no room is more important than another. In a typical house,
you can eat, sleep, and take care of your personal hygiene all under
the same roof. With Visual InterDev, you can develop your web pages,
connect them to a database, and deploy your web site all within the
confines of the same development environment.
The Visual InterDev development environment utilizes an

implementation of the Developer Studio shell that was first found in
Microsoft's Visual C++. Microsoft's Visual J++ also incorporates this
development environment. By using the Developer Studio workspace,
multiple projects and tools can be supported. Microsoft is bringing its
Visual Tools family together by using the same initial shell across
products. Developers can open many types of projects created with
Visual InterDev, Visual C++, and Visual J++.
The advantage of this integrated support is found in using multiple

applications to provide a robust solution. You can build a Java applet
using Visual J++, incorporate the applet into your Visual InterDev web
application, and test and debug the application all within the same
environment. The same holds true for building an ActiveX control using
Visual C++. Again, "integration" is the key word. Figure 2.3 illustrates
the ability to open multiple types of projects from within the Visual
InterDev integrated development environment.
Figure 2.3.
Opening projects with Visual InterDev.
Figure 2.3 shows the Visual InterDev File Open Project dialog window.
Notice the ability to open multiple types of projects from within the
environment.
When you open your Visual InterDev project, you're viewing your
actual web site. The Visual InterDev development environment uses
the Explorer interface to view and manage your web site files and
folders. This interface simplifies the task of creating and maintaining
your web site files and folders. Also, the interface enables you to fully
organize the construction of your Web-based application. The
integrated development environment enables easy site creation
through the use of wizards, and enables developers to reuse files from
other sites.
Visual InterDev enables you to easily import existing files into your
web site structure. The Explorer interface enables you to accomplish
this task through a point-and-click metaphor, just as you copy and
paste files and folders on your PC. Figure 2.4 shows a Visual InterDev
project using File View.
Figure 2.4.
A typical Visual InterDev project.
The File View is the default view for a typical Visual InterDev project.
Notice the tabs at the bottom of the pane on the left-hand side of the
workspace. File View enables you to see the structure of your web site
including files and folders. This view displays the entire contents of
your site, including HTML pages, images, controls, applets, and other
files. The pane to the right of this workspace displays the object that is
selected based upon its file type. For example, if you selected an HTML
page from the list on the left, the HTML code would be displayed in the
window on the right.
DataView is the other tab located next to the FileView tab. This view
shows all of your database objects, including tables, views, stored
procedures, and triggers. The Data View provides a direct connection
to your ODBC datasource to enable remote configuration and
maintenance as well as interaction. Figure 2.5 demonstrates the Data
View showing a sample Access database.
Figure 2.5.
The Data View.
NOTE: The Data View only appears as an option for web projects after
you have inserted a database connection. The Data View also is displayed
for Database Projects.
Visual SourceSafe Integration
Visual InterDev supports integration with Visual SourceSafe to provide

version control cap-abilities like check-in/check-out. Similar to any
application development effort, source code control becomes a big
issue when you're building a site with multiple team members.
Developers can check out their portion of the site, make the
appropriate changes, and send the file back to the server to be
incorporated with the other developers' files. Effective team
development is covered in more detail on Day 19, "Working Effectively
in Teams with Visual SourceSafe."
Browser Integration
Another feature of Visual InterDev is the integration of a browser

within the development environment. Visual InterDev includes an
implementation of the Microsoft Internet Explorer 3.0 browser. This
implementation supports all of the same features of the commercial
version of Internet Explorer, including Java applets, ActiveX controls,
ActiveX documents, VBScript and JavaScript, style sheets, and HTML
3.x features such as frames and tables. By using the Preview in
Browser feature, you don't have to use one tool to build the application
and then open up your browser to view it. With Visual InterDev, you
can build your Web-based application and view the results all from
within one environment. This feature adds to the speed with which a
developer can create and update applications and web sites.
You do have the capability to use the Browse With function to view
your web site from within the browser's native window. For example,
you could configure Internet Explorer or Netscape Navigator and view
the site from within the production browser environment. You probably
will want to use this feature during final testing of your web site. If
you're deploying your site for use with the Netscape Navigator
browser, you have to use this feature.
You can use either of these features by selecting an HTML file and
right-clicking the mouse to display the shortcut menu. Figure 2.6
shows the Preview in Browser and Browse With menu options on the
shortcut menu for an HTML file.
Figure 2.6.
Browser viewing options.
Taking a Closer Look at the Components
The previous section discussed how Visual InterDev provides an

integrated development environment from which to work. You saw the
basic Visual InterDev workspace and the different views that are
available. In this section, you get a guided tour through each of the
features and components that make up Visual InterDev.
Visual InterDev Editors
Visual InterDev provides several visual editors for designing and

developing your HTML web pages. The following list outlines those that
are available:
• HTML Source Editor

• FrontPage Editor for Visual InterDev
• HTML Layout Editor
• Object Editor
HTML Source Editor
Using this editor, you can create and edit your HTML code, which is
color-coded, providing a visually appealing syntax. You can incorporate
many objects and controls, such as HTML layouts and controls, ActiveX
controls, and Design-time ActiveX controls. The editor also supports
the use of script with your HTML web page. Figure 2.7 highlights
standard HTML code using the HTML Source Editor.
Figure 2.7.
The HTML Source Editor.
FrontPage Editor for Visual InterDev
This editor is an implementation of the Microsoft FrontPage Editor

created for Visual InterDev. This editor is completely compatible with
the full version of Microsoft FrontPage and provides a visual tool for
developing HTML web pages. You may already be familiar with
Microsoft FrontPage. The FrontPage Editor uses a WYSIWYG approach
to develop HTML code. This approach enables you to add HTML
features to your web page through a graphical, point-and-click
metaphor. For example, to add a table, you select the Insert Table
menu item from the Table menu and then visually set the parameters,
such as number of rows and columns. With the FrontPage Editor, you
can visually work with objects instead of the underlying HTML to
construct your web pages. This method can substantially save
development time. Once you have constructed a web page using the
graphical editor, you can access and manipulate the generated HTML
code and add your own custom HTML.
The FrontPage Editor also supports the incorporation of plug-ins,

ActiveX controls, and Java applets. Figure 2.8 highlights the WYSIWYG
features of the FrontPage Editor for Visual InterDev.
Figure 2.8.
The FrontPage Editor for Visual InterDev.
HTML Layout Editor
The HTML Layout Editor is the same editor that was first included with
the ActiveX Control Pad from Microsoft. This editor provides a way to
accurately position all of your ActiveX controls on your web page. The
interface is very similar to tools like Visual Basic, which enable you to
position your objects on forms. With this layout editor, you can drag
and drop controls onto the layout and establish their properties and
exact position within the web page. When the form is displayed by the
browser at runtime, the controls are positioned at the exact
coordinates that were specified at design time. The toolbox enables
you to add and delete controls. You also can use the Script Wizard to
automatically add scripting code for use with your controls. Figure 2.9
displays the HTML Layout Editor.
Figure 2.9.
The HTML Layout Editor.
Object Editor
The Object Editor enables you to establish the properties for your
ActiveX and Design-time ActiveX controls as well as Java applets and
Netscape plug-ins. The Object Editor is activated after you insert an
object into your HTML source code. For example, to position an
ActiveX control on your web page, you would right-click the mouse
where you wanted the object to be placed within your HTML code.
NOTE: You must click between the <HTML> and </HTML> tags that signify
the beginning and ending of your code.
You can then choose between regular and Design-time controls. Once
you have chosen a control, the Object Editor is displayed, enabling you
to set the properties for the given control. Figure 2.10 exhibits the
Object Editor for a typical ActiveX control.
Figure 2.10.
The Object Editor.
As you can see, there are several editors that you can choose, based
on the task that you're trying to accomplish. These editors are covered
in-depth later in the week. You also will get a chance to use each of
these editors to experience their features during the first week.
ActiveX Controls and Java Applets
Visual InterDev includes and supports the use of ActiveX controls.

ActiveX controls are the next generation of OLE controls, .OCX files.
These controls use less overhead and memory and are perfect for
transporting over the Internet. These controls also can be used with
other client-server development tools, like Visual Basic and Visual C+
+. ActiveX controls extend the reach of HTML controls and enable you
to create effective user interfaces. Using the editors mentioned in the
previous section, you can visually set the properties for the ActiveX
control.
Visual InterDev also supports the use of Java applets and Netscape
plug-ins. You can work within the frame of either of these controls to
visually establish their properties.
Design-Time ActiveX Controls
Visual InterDev uses Design-time ActiveX controls to provide similar

functionality to regular ActiveX controls without the processing
overhead. Design-time ActiveX controls enable you to visually set
properties for the control at design time. The Design-time control then
generates HTML and scripting code based on the properties that you
select. Regular ActiveX controls differ in that they include a run-time
component that executes within the context of the browser.
Design-time ActiveX controls have no run-time component. Their script

is processed on the server, and the HTML and results are returned to
the client. Visual InterDev provides many Design-time controls,
including some very powerful controls for building database
connectivity. You can also build your own design-time controls with
tools such as Visual Basic and Visual C++.

Web Technologies

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Technologies

Uploaded by

Copyright:

Available Formats

Lecture Plan

MBA IV Semester -Web Technologies

A web page is a type of web document.

4. In computing, a protocol is a convention or standard that controls or enables the

5. A computer system that is accessed by a user working at a remote location. Typically,

6. An IP address (Internet Protocol address) is a unique address that certain electronic

The term web server can mean one of two things:

In practice many web servers implement the following features also:

1. Authentication, optional authorization request (request of user name and

HTTP Request Types

HTTP defines eight methods (sometimes referred to as "verbs")

Creating Virtual Directories in IIS 6.0 (IIS 6.0)

To create a virtual directory by using IIS Manager

To start IIS Manager

To start IIS Manager from the Run dialog box

1. From the Start menu, click Run.

To start IIS Manager from the Computer Management window

1. From the Start menu, right-click My Computer, and click Manage.

Cascading Style Sheets (CSS)

The Document Object Model (DOM)

DOM stands for the Document Object Model.

Allows you to write code to control all HTML elements.

JavaScript Form Validation

JavaScript Form Validation

• CSS stands for Cascading Style Sheets

selector {property: value}

body {color: black}

p {font-family: "sans serif"}

The class Selector

p.right {text-align: right}

You have to use the class attribute in your HTML document:

<p class="center bold">

.center {text-align: center}

Add Styles to Elements with Particular Attributes

How to Insert a Style Sheet

External Style Sheet

Multiple Style Sheets

• ASP stands for Active Server Pages

What is an ASP File?

• An ASP file is just the same as an HTML file

What can ASP do for you?

• Dynamically edit, change or add any content of a Web page

How to write some text with ASP.

How to format the text with HTML tags.

This text is styled with the style attribute!

The Basic Syntax Rule

Write Output to a Browser

Loop through the HTML headers

Call a procedure using VBScript

You can call a procedure like this:

Or, like this:

Call a procedure using JavaScript

<%@ language="javascript" %>

The ASP source code can contain procedures and functions:

<%@ language="javascript" %>

ASP Forms and User Input

A form with method="get"

A form with method="post"

A form with radio buttons

<input type="radio" name="cars"

Please select your favorite car:

<form method="get" action="simpleform.asp">

User input can be retrieved in two ways: With Request.QueryString or Request.Form.

The Request.QueryString command is used to collect values in a form with