Design  | SFC  |  NOS  |  Code |  Diary  | WWW |  Essay |  Cisco | [Home]

 

 

[Bill's Home Page]
[ Old page]

Essays

 

 

 


This is a very simple Flash animation. You'll notice that I've scaled the graphic down, and changed its transparency, and then motion tweened it. I've also faded out the text at the end.
Click here and you will get a single page version of this essay.

HTML is the standard language which is used to present WWW pages, and is interpreted by the WWW browser. Unfortunately HTML is a rather limited language, and can only really present static information. It is also not good at getting user interaction, thus need languages have been added to HTML to enhance it. Typically this is to process user information, or to respond to user events (such as mouse clicks, or text input). The place where the processing of the additional script defines whether it is a server-side include or a client-side include. If the WWW browser processes the script, then it is a client-side include, otherwise it a server-side include, as illustrated in Figure 1. Typical client-side includes are VBScript and JavaScript, and typical server-side includes are PHP and ASP.

A server-side include is better for compatibility with the WWW browser, as it converts the additional script into standard HTML. For example in ASP:

<%=time()%>

would be processed as an ASP script (as it is contained with <% and %>), and converted to the HTML code:

<P>Thur, 5 Oct 2001</P>

Thus it does not depend browser version. Unfortunately the extra script is dependent on the server, and any problems with this may cause the script to fail. With client-side include the code is processed by the browser, thus it depends if the browser can actually process the script. Fortunately now most browsers are fairly compatible with the client-side includes, but you can never be too sure how different browser versions are going to present the page.

Figure 1 Difference between server-side include and client-side include (©billatnapier)


JSP also uses the <% and %> tags, but the files are named with a JSP extension. These files were initially developed by Sun Microsystems and are typically processed by a UNIX-based server. The basic language used is Java.

VBScript

HTML is fine for basic formatting, but it is not so good at getting user interaction, thus VBScript (Visual Basic) is a simplified form of Visual Basic (which is the most popular programming language in the world) and is used to provide some basic functions, such as time() to display the current time. VB script integrates into HTML, and can hide itself from WWW browsers by imbedding it in-between the <SCRIPT LANGUAGE= "VBSCRIPT"> and the </SCRIPT> tags.

<SCRIPT LANGUAGE="VBSCRIPT">
sub myheader_onClick
myheader.Style.Color = "BLACK"
end sub
</SCRIPT>

JavaScript

JavaScript integrates into the HTML page within the <SCRIPT LANGUAGE= "JAVASCRIPT"> and the </SCRIPT> tags. It has a similar syntax to Java, but is not as strict on the syntax of the code. For example to print the current time (HH:MM) with JavaScript:

<p>Current time is
<script language="javascript">
var dat=new Date();
document.write(dat.getHours() + ":" + dat.getMinutes());
</script>

Outputting to browser. The document.write() applies the write() method to the document object, and outputs a processed string to the browser screen. JavaScript has much of the power of a programming language and supports arrays, such as:

<script language="javascript">
var dat=new Date(),
mon=["Jan","Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];
document.write("Month is ");
document.write(dat.getMonth());
document.write(" and the name of the month is "
document.write(mon[dat.getMonth()]);
</script>

Decisions. As with most programming languages, JavaScript supports decisions with the if() and switch() statements, such as the following which determines if it is morning or after-noon, and greets the user either with a "Good Morning!", or a "Good Afternoon!":

<FONT COLOR="GREEN">
<script language="javascript">
var dat=new Date();;
hr=dat.getHours();
if (hr<12)
{
document.write("Good Morning!");
}
else
{
document.write("Good Afternoon!");
}
</script>
</FONT>

Repetitive loops. JavaScript supports for() and while() loops. For example the following loops for values of fsize from 1 to 5, which are used to define the font size.

<script language="javascript">
var fsize;
for (fsize=1;fsize<=5;fsize++)
{
document.write("<br> <FONT SIZE = ");
document.write(fsize + ">");
document.write("Hello</FONT>");
}
</SCRIPT>

User functions. Even user functions can be incorporated into the page. For example, a func-tion call to a square function is as follows:

<script language="javascript">
function sqr(val)
{
return val * val
}
var value=sqr(3);
document.write("Three squared is "
+ value);
</SCRIPT>


Methods. In object-oriented design, methods are applied to object. Typical objects in JavaScript are Math (which contains mathematical properties and methods), history (which contains a lists of the visited URLs), button (which contains the object for buttons) and document (which is the container for the information on the current page). An example JavaScript object is Math. For example the following determine the square of a value:

The square root of 15 is
<script language="javascript">
document.write(Math.sqrt(15.0));
</SCRIPT>

Another example is to determine the cosine of a value, but applying the cos() method to the Math object:

<P>The cosine of 1.5 radians is
<script>
document.write(Math.cos(1.5))
</script>

The string object has many useful methods, such as toLowerCase(), which converts a string to lowercase, and toUpperCase(), which converts a string to upper, as used in the following example:

TYPEwrITer in lowercase is
<SCRIPT>
document.write(("TYPEwrITer").toLowerCase())
document.write("and in uppercase it is");
document.write(("TYPEwrITer").toUpperCase())
</SCRIPT>

Using events. JavaScript has many useful functions, such as one to open windows of a cer-tain size and with certain conditions, and also to respond to events, such as the onMouseDown() event when the user clicks on a graphic. The following opens a window (with the window.open() function) of width of 310 pixels and height of 200 pixels, when the user clicks on the referred graphic (message.gif). The onMouseDown() is an event which occurs when the user clicks on the graphic.

<script language="javascript">
function openWindow(theURL,winName,features) {
window.open(theURL,winName,features);
}
</script>
<img border="0" src="message.gif" width="159" height="25"
onMouseDown="openWindow('message.html','', 'toolbar=yes,
menubar=yes, scrollbars=yes, resizable=yes, width=310, height=200')"
align="left">

ASP

ASP is similar to VBScript, but rather than the browser processing the script, the WWW server actually does it before it sends the page to the WWW browser. ASP is a Microsoft tech-nology and will typically only run on a Microsoft server (such as with an Microsoft IIS server). ASP pages are named with an asp file extension (such as default.asp), to differentiate them from normal HTML pages. An example is:

<B>Current time is <%=Time()%> </B>

which will display the current time. When this is sent to the WWW browser it will have the Time() function expanded into HTML code, such as:

<B>Current time is 10:35pm</B>

for which the WWW browser will display as:

Current time is 10:35pm

ASP is a Microsoft technology for server-side includes in HTML pages, whereas PHP is a UNIX equivalent, and typically runs on an Apache WWW server.

JSP

JSP (Java Server Page) allows Java code to be integrated into a WWW page. Like ASP, it uses the <% and %> tags to define Java code and uses the server to process the additional code into HTML. An extract from a JSP page is shown next. The highlighted areas show the JavaScript parts. It can be seen that, in this case, that the JavaScript part hides an if() decision. The server process the Java parts and decides on which parts on the HTML code it sends to the client.

<html><body>
<%
String user = (String)session.getAttribute("user");
if ((user == null) || (user.equals(""))){
%>
<p> no user in session</p>
<%
}
else{
session.invalidate();
%>
<p>User <b><%= user %></b> logged out!</p>
<%
}
%>
<a href="login.jsp">login</a>
</body></html>

In this case, if user is an empty string then the following code will be sent to the client:

<html><body>
<p> no user in session</p>
<a href="login.jsp">login</a>
</body></html>

else the following will be sent:

<html><body>
session.invalidate();
<p>User <b><%= user %></b> logged out!</p>
<a href="login.jsp">login</a>
</body></html>

As with ASP and PHP, JSP allows an organization to keep their additional code private, so that all that the client sees is pure HTML (possibly also with JavaScript and/or VBScript).

PHP

A CGI program is one that is called from a WWW browser. These can be written in many languages, such as Visual Basic, C++, Java and Perl. Visual Basic, C++ and Java normally require to be compiled into an executable form for it to run on the server. Perl is different in that it is a scripted language, and does not have to be compiled before it is used. Normally Perl programs perform some sore of system function, such as getting information on the current WWW connection, or accessing data in a database. As they have a high level of priority, they must be kept in a secure way, so that external users cannot gain access to the server. This special place is a directory called the cgi-bin. Scripts placed in this place are allowed to gain access to the system. An example Perl program to show the IP address of the user is:

#!/usr/local/bin/perl
print "Content-type: text/html","\n\n";
print STDOUT "\n";
$remote_addr = $ENV{'REMOTE_ADDR'};
print STDOUT "<P>Your IP address is: ";
print STDOUT $remote_addr;

It operates by sending all of the required commands that a WWW server would normally add to the WWW page. For example "Content-type: text/html","\n\n";" is the string that is sent by the server before the main WWW page is sent, and defines that the page is an HTML page. In the case of Perl the STDOUT is normally sent to the monitor, but in a WWW page the output will be to the connection with the WWW browser. Also the first line of the Perl script defines where the operating system should find the Perl program (in this case it is /usr/local/bin/perl).

Perl, for all its power, is a very difficult language to use, and typically WWW developers use standard cgi scripts, which they can use for their purpose. Typical cgi scripts include page hit counters, form filling, and login user accesses to WWW pages. Perl's strongest feature is its string processing abilities.

PHP is used in a similar way to ASP and JSP, and is typically used on UNIX-based servers. The additional code is added between the <? and ?> tags. For example the following prints a "Hello World" message to the browser:

<?php
print("Hello World");
?>

Variable are identified with a proceeding $ sign, such as:

<?php
$value=100;
print("Value is $value");
?>

Loops can use a while() statement, such as:

<?php
$value=0; //our variable
while($value<=10){
 print(" $value = ".($value*$value));
 print("<br />\n");
 $value=$value+1;
}
?>

A powerful usage of PHP is in string manipulation. The following example shows how PHP initializes an array of strings:

<?php
$colors = array('red','blue','green','yellow');

foreach ( $colors as $color )
{
echo "Do you like $color?\n";
}

?>

The real power of PHP is the way that it supports email, forms and access to databases, in a secure way. CGI was in the past used for this, but it is a complex language that does not interograte into the HTML page. An example of a form in HTML is as following:

The parameters are:
recipient,
subject and
input.

<form action="formmail.php3" method="POST">
<input type="hidden" name="recipient" value="fred@noemail.com">
<input type="hidden" name="subject" value="Reply Form">
<input type="text" name="input">
<input type="submit" value="Send">
</Form>

In this form the user can fill-in one of the fields (the type is a "text" field). When the user completes this field, and presses return, or presses the submit button, the action on the form is invocated. In this case the action is to call the PHP file named formmail.php3. The parameters from the form, in this case these are named recipient, subject, and input are then send to the script file (this action is know as posting the parameters). Note that the parameters recipient, and subject are hidden to the user, but are passed to the script file. The contents of formmail.php3 then contain code which e-mail's the message to the recipient, such as:

<?php
$fmt_Response=implode("", file("response.htt"));
$fmt_Mail=implode("", file("mail.htt"));
while(list($Key, $Val)= each($HTTP_POST_VARS)) {
$fmt_Response=str_replace("{$Key}", $Val, $fmt_Response);
$fmt_Mail=str_replace("{$Key}", $Val, $fmt_Mail);
}
mail($HTTP_POST_VARS["recipient"], $HTTP_POST_VARS["subject"], $fmt_Mail);
echo $fmt_Response;
?>

The file response.htt contains a basic message for the user when they have submitted the form, and the mail.htt contains the message which will be added to the e-mail that is sent.

The file response.htt contains a basic message for the user when they have submitted the form, and the mail.htt contains the message which will be added to the e-mail that is sent.

Along with direct e-mail support, PHP supports many different types of databases, which can be accessed directly from the WWW page. To create a table (in this case the table is named datatest) within a database. The variable $server is the name of the SQL server (such as mysqlserver.co.uk); $user is the login name for the user; $password is the password which is associated with the user; and $database is the name of the database. Initially these variables are used with the MYSQL_CONNECT() command to connect to the server, once connected, the database can be accessed with MYSQL_SELECT_DB() command. Next the SQL query: CREATE TABLE is used to create the table within the database. In this case it will create two fields within this table: name and email, each with 25 characters. Finally the SQL_CLOSE() command closes the database.

<?php
/* Start of PHP3 Script */
/* Data of SQL-server */
$server= "$$$$"; /* Address of server */
$user= "$$$"; /* FTP-username */
$password= "$$$"; /* FTP-Password */
$database= "$$$"; /* name of database */
$table= "datatest"; /* Name of table, you can select that */

/* Accessing the server and creating the table */
MYSQL_CONNECT($server, $user, $password) or die ( "<H3>Server unreach-able</H3>");
MYSQL_SELECT_DB($database) or die ( "<H3>database not existent</H3>");
$result=MYSQL_QUERY( "CREATE TABLE $table (name varchar(25),email varchar(25))");

/* Terminate SQL connection*/
MYSQL_CLOSE();
?>


Data can then be written to the database with the INSERT SQL query (as highlight below):

<?php
$server= "$$$$"; /* Address of database server */
$user= "$$$$"; /* FTP-username */
$password= "$$$$"; /* FTP-Password */
$database= "$$$$"; /* name of database */
$table= "datatest";

/* Accessing SQL-server */
MYSQL_CONNECT($server, $user, $password) or die ( "<H3>Server unreach-able</H3>");
MYSQL_SELECT_DB($database) or die ( "<H3>Database non existent</H3>");

MYSQL_QUERY( "INSERT INTO $table VALUES('Fred','fred@home.com')");
MYSQL_QUERY( "INSERT INTO $table VALUES('Bert','bert@myplace.com')");

/* Display number of entries */
$query="SELECT * FROM $table";
$result = MYSQL_QUERY($query);

/* How many of these users are there? */
$number = MYSQL_NUMROWS($result);

if ($number==0):
echo "database empty";
elseif ($number > 0):
echo "$number rows in database";
endif;
mysql_close();
?>

The data can then be read back with an the SELECT query (as highlighted below):

<?php
$server= "$$$$"; /* Address of database server */
$user= "$$$$"; /* FTP-username */
$password= "$$$$"; /* FTP-Password */
$database= "$$$$"; /* name of database */
$table= "datatest"; /* Name of table, you can select that */
/* Accessing SQL-Server and querying table */
MYSQL_CONNECT($server, $user, $password) or die ( "<H3>Server unreach-able</H3>");
MYSQL_SELECT_DB($database) or die ( "<H3>Database non existent</H3>");
$result=MYSQL_QUERY( "SELECT * FROM $table order by name");

/* Output data into a HTML table */
echo "<table border=\"1\" align=center width=50%";
echo "<tr>";
echo "<div color=\"#ffff00\">";
while ($field=mysql_fetch_field($result)) {
echo "<th>$field->name</A></th>";
}
echo "</font></tr>";
while($row = mysql_fetch_row($result)) {
echo "<tr>";
for($i=0; $i < mysql_num_fields($result); $i++) {
echo "<td align=center>$row[$i]</td>";
}
echo "</tr>\n";
}
echo "</table><BR><BR>";

/* Close SQL-connection */
MYSQL_CLOSE();
?>

And finally, if the table requires to be deleted, the DROP TABLE query can be used (as high-lighted below):

<?php
/* Accessing the server and deleting the table */
MYSQL_CONNECT($server, $user, $password) or die ( "<H3>Server unreach-able</H3>");
MYSQL_SELECT_DB($database) or die ( "<H3>database not existent</H3>");
$result=MYSQL_QUERY( "DROP TABLE $table");
print "Result is ";
print $result;
/* Terminate SQL connection*/
MYSQL_CLOSE();
?>

As more content becomes database-driven, and more sites use electronic commerce, there will be a great increase in the usage of databases over the WWW, especially in accessing them from WWW pages. Just imagine if you computerized your own home, and you had a database setup which monitored all the conditions in your home, and saved them to a data-base. If this was interface to a WWW browser you could recall all your data. An excellent usage of database integration with a WWW browser is where users register their details on a database, and are send e-mails are regular intervals to keep them informed of any products that they may be interested in.

[Examples][Database]
[Email][Cookies]

I use the One&One WWW provider to access PHP code. They support MySQL, CGI and PHP. If you're interested click here.

 

XML

XML (eXtensible Markup Language) is a markup language which is similar to HTML. Its main application is to produce structured documents. It is much more powerful than HTML, as it is possible to define new tags. XML itself is derived from SGML (Standard Generalized Markup Language), which also defining sets of tags and the relationships among them.

Tags in XML are similar to HTML tags, and they consist of a tag name plus optional at-tributes, surrounded by angle brackets (< and >). Like HTML, the opening tag has an < followed by the name of the tag, and the closing tag has the tag name is preceded by a slash and then a >. For example we could define our own tags of <PARAGRAPH>, <BOLD> and <ITALICS>, and use them in the following document:

<PARAGRAPH>Some programs provide a <BOLD>framework</BOLD> for a user to manipulate data without the user having to produce their own program. Examples of this include word processors, spreadsheet programs, and so on, where the user writes <ITALIC>macro</ITALIC>, or script, programs which <BOLD>integrate</BOLD> within the package.</PARAGRAPH>

would be formatted (after we had properly defined our tags) as:

Some programs provide a framework for a user to manipulate data without the user having to produce their own program. Examples of this include word processors, spread-sheet programs, and so on, where the user writes macro, or script, programs which integrate within the package.

One difference between HTML and XML, is that an empty tag (one that uses only a single tag, such as <img>, instead of an opening tag and a closing tag containing text or other mate-rial) must end with a slash just before the closing angle bracket. For example, an <img> tag in XML might look like this:

<img src="mygraphic.gif" />

XML, though, is much stricter and less forgiving about its syntax than HTML is; and files, which do not conform to the XML standard, are rejected by XML parsers.

An example of an XML file is:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE questions SYSTEM">
<questions>
 <quest id="000001">
  <title>This is the first question</title>
  <q1>Answer a1</q1>
  <q2>Answer a2</q2>
  <q3>Answer a3</q3>
  <q4>Answer a4</q4> 
  <q5>Answer a5</q5>
  <correct>q1</correct>
  <level>1</level>
 </quest>
 <quest id="000002">
  <title>This is the second question</title>
  <q1>Answer b1</q1>
  <q2>Answer b2</q2>
  <q3>Answer b3</q3>
  <q4>Answer b4</q4>
  <q5>Answer b5</q5>
  <correct>q1</correct>
  <level>2</level>
  </quest>
; ; ; ;
</questions>

And an examples of a Flash component which reads an XML file is:

XML thus allows for a standard way to pass information between systems. A good example might be in a dynamic WWW page generate. In the figure below the XML generator is a basic package which converts a file, such as a spreadsheet to XML data. This might contain page layout information which can be used by the WWW page. The XML file is then read by the Flash component. As much as possible the component will be general-purpose, and will read its parameters from the XML file. An example of a component could be for a links page, which contains up-to-the-minute information. The Flash component then communicates with the WWW page through the fscommand() function, and calls the dofscommand() JavaScript event. The WWW page itself can pass parameters into the component using Active X. This will allow the component to change its operation. For example this might be to change the language of the text from one language (such as English) to another (such as French). The Flash component might thus have to read another XML file for the required information.

Figure 1: XML-based WWW generator and reader system (©billatnapier)

What you like a project in this area? Click here.

CGI

A CGI program is one that is called from a WWW browser. These can be written in many languages, such as Visual Basic, C++, Java and Perl. Visual Basic, C++ and Java normally require to be compiled into an executable form for it to run on the server. Perl is different in that it is a scripted language, and does not have to be compiled before it is used. Normally Perl programs perform some sore of system function, such as getting information on the current WWW connection, or accessing data in a database. As they have a high level of priority, they must be kept in a secure way, so that external users cannot gain access to the server. This special place is a directory called the cgi-bin. Scripts placed in this place are allowed to gain access to the system. An example Perl program to show the IP address of the user is:

#!/usr/local/bin/perl
print "Content-type: text/html","\n\n";
print STDOUT "\n";
$remote_addr = $ENV{'REMOTE_ADDR'};
print STDOUT "<P>Your IP address is: ";
print STDOUT $remote_addr;

It operates by sending all of the required commands that a WWW server would normally add to the WWW page. For example "Content-type: text/html","\n\n";" is the string that is sent by the server before the main WWW page is sent, and defines that the page is an HTML page. In the case of Perl the STDOUT is normally sent to the monitor, but in a WWW page the output will be to the connection with the WWW browser. Also the first line of the Perl script defines where the operating system should find the Perl program (in this case it is /usr/local/bin/perl).

Perl, for all its power, is a very difficult language to use, and typically WWW developers use standard cgi scripts, which they can use for their purpose. Typical cgi scripts include page hit counters, form filling, and login user accesses to WWW pages. Perl's strongest feature is its string processing abilities.

CSS

Another particular problem with HTML is that it is not very good at precisely defining the format of text, especially between different types of browser. Thus the CSS standard has been defined. This involves including a CSS file in the HTML page, which contains definitions for the text styles used in the page. For example to define the first header (H1) style:

H1
{font: bold 16pt Verdana, Arial, Helvetica, sans-serif; background: transparent; color: #000000}

which defines the header style (H1) is Verdana font, of 16 points, and black (#000000). Thus

<H1>Hello</H1>

will become:

Hello