(A Few) Web Interface Options

for use in conjunction with Database Applications

Robert Keller

Harvey Mudd College

31 March 2004

Please regard this as a document under construction.

Note that when examples are presented in the indicated references, you can use the “View Source” option in your browser to see how the source actually appears before rendering.

Rather than trying to learn any one of these techniques from the ground up, we endorse the “copy and modify” method, since this is a course in databases rather than web interfaces.

HTML

HTML stands for “HyperText Markup Language”. It provides basic formatting and layout, along with simple types of interactive forms, but the computation capabilities are limited. HTML pages are identified by tags:

<HTML> . . . </HTML>

Tutorial on HTML forms:
http://www.webcom.com/html/tutor/forms/start.shtml

Tutorials on HTML in general:
http://www.w3schools.com/html/

http://www.cwru.edu/help/introHTML/toc.html

http://www.davesite.com/webstation/html/ (interactive tutorial)

JavaScript

JavaScript is a programming language that can be executed from within a web page. It is identified by the tag

<script type="text/javascript"> . . . </script>

with . . . representing executable code.

Tutorial on JavaScript:

http://www.w3schools.com/js/

Microsoft has an alternative, Jscript.

JavaScript runs on the client side, rather than on the server side. Client-side frameworks are probably to be preferred if there is a great deal of interactivity required, such as in a video game.

VBScript

VBScript is an idea similar to JavaScript, except based on Visual Basic.

Tutorial on VBScript:

http://www.w3schools.com/vbscript/

ASP

ASP stands for “Active Server Pages”, a framework proffered by Microsoft. Likely this will perfer the C# language and .NET.

Tutorial on ASP:

http://www.w3schools.com/asp/

Java has a counterpart, JSP: http://java.sun.com/products/jsp/

XML

XML stands for “Extensible Markup Language”, and is used for general structured data descriptions. It has a syntax similar to HTML, but allows the user to define the meaning of the tags. XML documents are identified by a header such as:

<?xml version = "1.0" ?>

Most browsers now accept XML in lieu of XML. Tags in an XML file may be defined in a separate document type definition (.dtd) file, that is referenced as follows:

<!DOCTYPE name SYSTEM "filename.dtd">

An XML document may refer to a separate style sheet that determines how the information is rendered.

<?xml-stylesheet type="text/css" href="name.css"?>

CSS means “Cascading style sheet”, which is one of the forms that can be used, the other being XSL (Extensible Style Sheet), which is more general, but not necessarily as well-supported by all browsers. An extension, XSLT can be used as a specification of transformations on XML documents, apart from the use for rendering. The standard reference on XSL and related topics is:

http://www.arbortext.com/xsl/tutorial/frames.html

When an XML document is viewed in Internet Explorer and no stylesheet is specified, the source structure of the document is displayed hierarchically, and one can collapse sub-structure using a pointing device.

CGI

CGI stands for “Common Gateway Interface”. It is the original fundamental capability for running programs on the server side in response to web-page access. It provides a host layer for scripting using any application that can be run on the server. The application is used to generate HTML as output, which is then immediately interpreted by the browser as. So, in effect, web page content is generated dynamically in response to access to a page that contains a CGI. The applications normally reside in a sub-directory /cgi-bin of the main web directory. Most of the approaches below rely on CGI indirectly.

CGI reference: http://www.w3.org/CGI

PHP

PHP originally stood for “Personal Home Pages”, but the name has devolved to the recursive: “PHP Hypertext Preprocessor”.

PHP is a programming language. The basic idea is that a program is written in the language to output HTML. The program is executed on the server. The HTML is then displayed as if it were part of the page. PHP runs on the server side.

PHP can be identified by:

#!/usr/local/bin/php

. . . HTML code . . .

<?php . . . PHP code . . .?>

. . . HTML code . . .

PHP tutorials: http://us4.php.net/tut.php

http://www.w3schools.com/php/

http://www.devshed.com/c/a/PHP/PHP-and-PostgreSQL/

Perl

Perl stands for “Practical Extraction and Report Language”. It is an interpreted “scripting” language available on most platforms. Perl can be used to generate HTML dynamically. Perl runs on the server side.

Perl code can be identified by:

#!/usr/bin/perl

. . . Perl code . . .

You can get error messages sent to the browser rather than the server log, by incanting the following:

#!/usr/bin/perl -wT

use strict;

use CGI qw(:standard);

use CGI::Carp qw(fatalsToBrowser);

This eliminates much pain in debugging.

A few of many Perl tutorials:
http://archive.ncsa.uiuc.edu/General/Training/PerlIntro/

http://www.pageresource.com/cgirec/index2.htm

http://www.comp.leeds.ac.uk/Perl/start.html