aaaaaaaaaaaaaaa

Session 1: Introduction

Web-pages and web sites

The Internet was initiated in the 1970's as a further development of the ARPANET . The World Wide Web , WWW , was developed and introduced in 1989 by Tim Berners-Lee and Robert Cailliau at the European Particle Physics Laboratory (CERN) as an Internet tool for collaborative knowledge-sharing. It became in short time very popular. WWW comprises today a large number of computers which make files available through Internet according to the HyperText Transfer Protocol, HTTP . Today, it is estimated that more than 200 M people worldwide are using the web.

The visible content of a web file is called a web page . If a web page is prepared according to the HTTP protocol, it can be transferred from a host computer using appropriate software to a requesting client by Internet. Most pages are prepared by means of the tag-based language HTML , frequently supplemented with some additional tools. If the requesting client has the necessary browser software installed, the file received can be displayed and, if wanted, a new request can be generated.

A web site is usually a set of web-files hosted by a computer running a web server. Design and implementation of a web site has several aspects:

• the content embedded in the site
• the page sent from the site
• the functionality of the site

The topics of a web site are varying and depending on the owner's interests and mission. We shall not in this course discuss which are appropriate pages for web publication, and which are not. It easy to find examples of both interesting and less interesting pages.

The layout of pages is a fascinating subject. All kinds of backgrounds colors and patterns , fonts of different kinds and sizes, etc. are among the layout factors from which the designer can choose. Some pages have animation or voice embedded and using programs transferred to and acting in the client computer. The layout of a page is an important subject because it probably has a significant impact on how the receivers will perceive the page. So far, the layout has to a large extent been determined by the latest hypes, layout advises and the heuristic design rules offered have been based on opinions and limited empirical facts . Large scale investigations of people's perception of alternative layouts are needed. However, layout is neither the subject of this course.

The subject of this course is the functionality required to change the web arena from basically static to dynamic applications. The required functionality is the web site's ability to react on a visitor's behavior over a shorter or longer time period expressed by a series of requests and responses. It is called dynamic because the web pages returned to the client depend on the visitor's previous interaction.

Dynamic functionality can be approached in many ways. In this course, we limit our discussion to the functionality based in the server and disregard other approaches.

Dynamic web sites

The basic model of the web interaction is:

1. A set of pre-developed static web pages are stored on a host server.
2. A user sends a request for a web page to the host.
3. The hosts sends a copy of the requested page to the client.
4. If desired, points 2 and 3 are repeated for new pages.

The service which manages the host as a node in the web, is called a web server . In the static model, Figure 1 , the host has no ability to analyze the request and adjust the response accordingly. The response is a requested pre-designed web page. The request-response exchange is therefore called static. However, the exchange protocol used, HTTP , provides possibilities for some additional items of information sent with the request without any instructions from the requester. In the same way, the responding host can include additional information with the response , usually hidden for the receiver. The host has also capabilities to forward messages to other programs beyond the web server for additional processing. These possibilities for information processing behind the scene makes it possible to create the additional functionality.

We shall use the term dynamic web site to emphasize that we are not concerned with a simple set of web pages with HTML tags, but with applications in which the pages returned to the client can be dynamically adjusted to fit the individual requests of the client. This course can serve as a first illustration of a dynamic web site. You have already experienced in this course that when you submitted your personal access code , the system became accessible to you. If you had submitted an invalid access code, the host would instead have sent you a message adjusted to an unacceptable access code. The site must know your identity prior to your request. You will soon also see that if you try to go on to the next session before it is officially opened, you will receive a message regretting that the session is not yet open. However, when opening date is passed, and you have passed the test at the end of the session, the system will respond by giving you access to the session. The system must be able to compare your request with its clock time and with your recorded test performance. If a student has not yet completed the required test, the host will return a message that the test must be done before the student can proceed.

Important characteristics of the dynamic web site are the ability to authenticate you, i.e. to verify your identity, record your performance history, keep track of your interactions from you start a session and until you leave, and sometimes even from session to session. In this course, you can for example request your personal progress report, and the system will generate the content of the report to you while another student will get a completely different report and perhaps for a different number of sessions.

CGI and PERL

The first step toward dynamic web pages is the possibility for a remote client to request the execution of a process at the host. Use of the FORM tags of HTML requires for example that the server can perform a processing of the data submitted on the form. A program must exist for this purpose at the host site, and the web server must be able to communicate with this. We shall refer to such a program as a script , and the addressable files in which the script is stored as templates to avoid any confusion with other types of programs, files and pages.

The Common Gateway Interface , CGI , is a protocol specifying how certain scripts can communicate with web servers. One of the most frequently used tools for creating such scripts is the script language PERL . A PERL script stored in the host computer can be supplied with data from a request, for example sent by a HTML FORM . The script can be designed to perform a variety of tasks such as save and retrieve data from a database, update a log, keep track of visitors, run a course, etc. It can also be designed to perform its task and then leave the result to the web server, which returns a web page generated by means of the script to the requesting client. Programming languages such as C , C++ , C# and JAVA can also be used for creating scripts. One reason for the popularity of PERL is that scripts programmed in PERL can be ported from one operating system to another with no or little modification.

Applications Program Interfaces

A PERL-CGI application is time-consuming because PERL scripts must be loaded, executed and unloaded each time they are used like interpretive programs, and do not offer the flexibility which may be required.

To improve this situation, Web Application Interface Servers were developed. An application server is a service operating behind the web server. It processes script code, which the web server does not understand, and returns the results to the web server for sending to the requesting client. The applications server is a resource of permanently loaded executable programs. The resource of loaded programs,for WINDOWS operating systems usually written as Dynamic Load Libraries , DLLs , is referred to as an Applications Program Interface , API . The gain of using an API is increased speed and flexibility because no loading and interpretation is needed. The disadvantage is that the API programs must be implemented specifically for each type of operating system, and requires more memory space.

ColdFusion Markup Language

The most well-known API tools include the Active Server Pages , ASP and ASP.NET from Microsoft, the open source system PHP:Hypertext Preprocessor , PHP , i HTML Inline Internet Systems, and the ColdFusion MX , CFMX , from Macromedia. We are leaving the comparisons between the tools to evaluators and sales people, and concentrate on CFMX in this course because it is well developed, easy to learn and reliable.

The language by which we design our scripts for CFMX is the ColdFusion Markup Language , CFML . The templates are recognized by their extensions, .cfm (or .cfml ). You are referred to the section Software to get instructions for installing necessary software on your own PC .

In the previous paragraph, the advantage of using a web API instead of a CGI approach was emphasized. CF was introduced on the market 1995. It started out as a scripting language based on CGI . Later, the API was developed. The latest version of CFMX is implemented in JAVA resulting in a very efficient and portable API which can easily be extended by JAVA.

CFMX is widely used. Among well known companies which has taken advantage of CF in development of their web sites are: Amazon , Dell Computers and Federal Express .

Evaluating a web site

Before starting to improve a web site, you should try to make an evaluation of its performance. Evaluating a web application requires empirical data. The most obvious source is the log of the activities of the web server. The first step towards collecting data on the use of pages was counting the number of visitors to the web site. The number of visitors tells the owner of the site if his/her site was visited at all, and how frequently. In most web servers, an access log system is embedded. The access log system continuously records all requests to the server as well as the server's retrieval of different files to compose the responses. A log, even for a completely static web site, gives data on dynamic development because it reflects visits during a time interval.

The server's access log usually records according to one of several formats,

• Old NCSA/CERN format
• Combined NCSA/CERN format
• Windows format

The Windows format can easily be imported into applications as EXCEL and ACCESS . It contains the following fields:

• Date and time
• IP address of client
• Address of server
• HTTP method of request
• Requested URL
• Referring URL
• Browser type
• HTTP response code
• Number of bytes transferred
• Milliseconds between arrival of request and log recording

Typical studies of this kind can be inspected in Nordbotten & Nordbotten 2001a and Nordbotten & Nordbotten 2001b .

There are several obvious drawbacks associated with the access log for web applications research. First , the access log is part of the server software guarded by the web server's administrator group, and the researcher may not always get access to this log. Second , the access log records all file retrievals necessary to assemble the requested page to the client including icons, images, etc. not needed for an application evaluation. Third , the log system only recognizes the client machine identified with an IP number. Many users are assigned different IP numbers by their net provider from one visit to the next . Fourth , there are often several users sharing a client computer.

Frequently, a more customized recording than provided by the web server application log is needed for a satisfactory evaluation. During the course, we shall later discuss how you can set up your own log to avoid these problems. At this stage, we start with a very simple example.

Visit counter example

Our first application example is a personalized course visit counter. It demonstrates a few properties of a dynamic web site. A direct link to the implemented example is located at the end of this session. The example application keeps track of the number of visits you have made to this course since you started your study.

The application script consists of 2 templates. The template used as for entering an example is by convention called index.cfm to avoid unwanted public listing of your templates. This template personalizes the response to your call for the example and remembers the number of visits.

1. <!--- index.cfm --->
3. <cfquery name="visits" datasource="db">SELECT firstname, visits FROM users WHERE accesscode='#session.pin#'
4. </cfquery>
5. <cfoutput>
6. <div align="center">
7. <h1><font color="Blue"><font size="+3">#visits.firstname#'s site visit counter</font></h1>
8. <p><b>#visits.firstname#</b>: The number of visits you have made to this course site until #TimeFormat(Now())#, #DateFormat(Now(),'mm/dd/yy')# is: <b><font color="Blue">#visits.visits#</font></b></p>
9. </cfoutput>
10. </div>

All CFMX template files are identified by the extension .cfm . Line 1 is a comment line which is used here to refer to the name of the template. The comment tag is similar to the HTML comment tag, but has 3 '---' while the HTML comment has 2. Except for this tag, all ColdFusion start and end tags begin with CF or /CF , respectively.

At this stage, we shall postpone the detailed discussion of the CFMX tags, and limit the explanation to the more general issues. In the listing , you may recognize some HTML tags which can be intermixed with CFMX tags.

Lines 3. - 4. illustrates the CFQUERY tags ColdFusion uses to exchange data with a database. The statement between these tags is a regular SQL SELECT statement used to retrieve the user's first name and the number of recorded visits from a database referred to as db . In other words, this application assumes that the users are recorded in a database and that their numbers of visits are updated in the database each time they log in. The term '#session.pin#' refers to the string you submitted as your access code.

Lines 5. -9. output the query result from the database. If you are acquainted with HTML , you will recognize most of the content between the CFOUPUT tags.

There is one more point which you should observe. That is the #visits.firstname# and #visits.visits# . The surrounding #'s indicate that we refer to the value of the included named variable, in this case firstname and visits , respectively, in the retrieved query object visits .

In the next session, the syntax of the CFML will be discussed in more detail.

Exercises

a. Visit the web sites of Amazon , Dell Computers and Federal Express , and spend some time to study what these pages can provide. Make a short report for yourself containing ideas to use later in this course.

b. Make yourself acquainted with the web site of this course. The Calendar is important, and it is suggested that you print it out for easy consultation. In the FAQ section, you will find useful information about the course. Consider the course design and structure, and suggest changes and improvements to the author (svein@nordbotten.com).

c. The text book used, Programming ColdFusion by Rob Brooke-Bilson, will be referred to as RBB . This book is not a novel you can read sequentially. You should use it as a manual , and read about the task you are currently working on. Read Chapter 1 of RBB before you start on the next session.

Link to the count example.

Link to the session test.

 

 

 

Other information: