Enterprise Integration & Modeling: Metadatabase Research Home
 home || MDB Research | Virtual Lab | Case Tool | Downloads | Publications | Researchers | Links

Studio II.1 Creating Dynamic Web Pages

Author: David Levermore (leverd@rpi.edu)

Revised: January 10, 2008

Appended: July 26, 2013

Amendment: "Web Development Tutorial " - by Gabriel Malveaux

This studio provides an introduction to creating dynamic websites as opposed to static websites.  Studio I.0 provides an introduction to creating static web pages using HTML (Hypertext Markup Language) and the studio II.7 entitled "Web to Database Connectivity" sheds light on alternative technologies used to create dynamic web pages.

What you need (and will obtain) to complete this tutorial:

  • A Scripting/Programming Language
  • Text Editor (Notepad)
  • Web Server
  • Database System (Optional)
  • Windows 2000, XP, Vista, Windows 7, Windows 8

What is a Dynamic Web Page?

A dynamic web page is that which enables user interaction as opposed to the simple presentation of information, on the World Wide Web (WWW).  "Pizza Hut created the first popular interactive web page in 1994 and FedEx, through an imaginative use of their web page to allow customers to track their packages, took the interactive use of web pages to a new dimension." [1] Much more information is found in Wikipedia as well as on the Internet. You are encouraged to use Google search as a key to theworld's largest digital library that we call the Web. You can locatemany valuable open source materials for your own use, and also use the search as a learning, debugging, and collaborating tool for you to successfully use these materials.

This user interaction is enabled through the use of programming languages other than HTML, databases and HTML forms among others.  Accordingly, this tutorial focuses on the programming languages that enable this interaction, specifically server-side interpreted languages. Server side scripting languages are those that are processed on the server.  Examples of these are Perl (Practical Extraction and Report Language), C, JSP (Java-Server Pages) and PHP  (PHP: Hypertext Preprocessor).  Conversely, client-side scripting languages, such as JavaScript and VB Script are all executed within the Internet Web browser (Microsoft Internet Explorer, Netscape Navigator)

It should be emphasized that this tutorial is by no means an exhaustive review of the scripting languages discussed here in, rather it is simply intended to introduce the reader to the role of these languages in dynamic web page development.

Scripting languages, PHP, JSP and Active Server Pages (ASP) are different from compiled languages (e.g. C, C++) in that the code is directly embedded within the HTML web pages, along with the HTML code as opposed to being pre-compiled before it is useful.  Figure 1 gives a good description of this process.

Figure 1 - Processing a Dynamic Web Page
Figure 1 - Processing a Dynamic Web Page

  1. The User clicks on a link that contains dynamic content. This dynamic content could be a form processing a search request, or the submission of some user information
  2. The Web Server receives this request and determines through its configuration files that the web page must be first processed by another program.  It passes the web page to the interpreter.
  3. The Interpreter executes the commands in the web page and returns an HTML document to the web server that then returns the HTML page to the user.

Building the Development Environment

As Figure 1 describes specific hardware and software are required to enable a web server that facilitates dynamic web pages.  This section introduces the specific hardware and software that will be used for the rest of the tutorial and other tutorials that will follow.

Example I: use a open source site to obtain (packaged) software.

Digitally connected enterprises, especially e-commerce and e-business, tend to embrace open source technology. So do we. We use PhP and Apache, in particular, in this virtual lab (The use of MySQL and others is optional.) and we can download and install each of these software applications individually (this is encouraged and would be a good way to gain hands-on experience if you try).  See Appendix A if you are interested in this method. The software applications and their corresponding URL's are:

All the software listed above is freely available for download from the specified websites.  This software is Open Source (http://www.opensource.org), which simply means that if you make any changes to the source code then these modifications should be shared with the Open Source Community.

The Internet also offers a number of integrated software and/or middleware to facilitate the download, installation, and running of these open source technology. For this purpose a popular source that we recommend is XAMPP (Apache-MySQL-PHP-Perl). A source for installing AMP (Apache, MySQL, and PHP) on windows is found at WAMP Server. Additional sources include Source Forge, wikipedia, and many others. We recommend that you download phpdev5 (a program that supports PHP 4), Apache 2, and MySQL 4 from any of these sources to run the code in this Virtual Lab. Newer versions (and even newer technologies) are being developed constantly in the open source community and the industry. The studio only intends to provide you with a reference point and a starting experience. Your continuing learning is a key to your continuing success in this field.

ExampleII: use a free trial pacakge offered by a commercial company: (Note, the following generic information is for refernce only, and the actual instructions will be different. Please follow the actual instructions at the site that you use. However, the general idea should still shed some light on the use of free software from a company. )

Company X offers a Server that includes all the open source software applications needed to complete the tutorial and much more utilities for administering these applications.  The website requires registration, although it is free, so download this application and install it on your Windows XP or Vista based computer.  The installation of this software is straightforward, just follow the instructions, accept the defaults and include the following information where asked.

  • Accept the default installation folder
  • Choose Typical Installation
  • Accept default ports, username and choose a password for DAV (Distributed Authoring and Versioning)
  • Select "No continue the installation" on Apache SSL Certificate Creation
  • Accept all the components such as Apache and MySQL for installation
  • Choose a MySQL password and remember it ...
  • Select "No Custom home page ..."
  • Make sure both Apache web server and MySQL database server are checked

Let the installation proceed.  Upon completion of the script reboot your computer.  After the computer has rebooted, the Apache and MySQL daemons will both start. At this point your computer is configured for web development. The company usually offers some online technical support forthe installation and ensuing application of the software.

Lastly, we want to create a directory that will hold all our files.  This directory can be anywhere within the web tree, that is,

'company'> Apache > htdocs  

Create a directory entitled PHP (or any other name you desire) in the htdocs directory.  Every file that we create will be saved in this directory and can be accessed from the web browser at http://127.0.0.1/php/filename.php.

PHP: Hypertext Preprocessor

PHP is a server-side, cross-platform, HTML-embedded scripting language. It is a robust, easy-to-learn, "speedy" scripting language and most importantly free to use on Windows or Unix.  "The syntax and grammatical structure of PHP resembles the C programming language with the complexity (for example, memory management, pointers, and strong typing) taken out. The developers of PHP aren't hesitant to integrate the best features of other languages, though, so you'll find elements of Perl and Java in PHP as well. For programmers familiar with C, Perl, or Java, it is a matter of days to get acquainted with PHP. Thanks to the excellent reference manual, anyone of your developers can probably produce small database enabled applications after just one afternoon. [2]" We do endorse PHP as a scripting language to use, it simply gets most jobs done, however, we do recognize that other languages such as JSP, ColdFusion and ASP, have unique strengths and recommend that the reader takes the time to investigate these offerings.

Hello World - A simple PHP application


<html>
<head>
<title>Hello World</title>
</head>
<body>
<?php print "Hello World"; ?> </body> </html>

Figure 2 - index.php

The PHP script is highlighted in bold letters.  Note that everything else is regular HTML and the PHP script is embedded within the HTML code.  Also, to separate the PHP code from the regular HTML code the delimiters "<?php ?>" should be used.  "<?php" indicates the start of PHP code while "?>" terminates the processing of PHP code.  Open Notepad or any other text editor, NOT MICROSOFT WORD, and copy and paste the text in Figure 2 into this Notepad Document.  Save the file as index.php in the PHP directory that was defined earlier, open your web browser and type in the link, http://localhost/php/index.php to see the file.  You should simply see the words, Hello World.  If you do then, 

Congratulations, you've written your first PHP application! 

If you do not see the words "Hello World" then go over the steps once again and see if any errors were made in your installation of the Merlin Desktop.

Getting Information from a User

A basic interactive website involves getting some information from a visitor to the website, This could involve accepting personal information, financial data or opinions such as a survey or poll.  In any event, this is typically a two-step process.  First we create an HTML form to accept the user information.  Then we create a PHP script to do something with that information.  We could email the data to someone using built-in functions within PHP, print it on the screen or push it into a database or text file.  Figure 3 & 4 provides the example of printing the user information to the screen.


<html>

<head>
<title>User Information</title>
</head>
<body>
<h2>User Information</h2>
<form method="POST" action="user2.php"><br>
Name: <input type="text" name="Name"><br>
Email: <input type="text" name="Email"><br>
Age: <input type="text" name="Age"><br>
<input type="submit" name="submit" value="submit">
</form>
</body>
</html>

Figure 3 - user.php

Note that figure 3 is just regular HTML code.  However, there are a few things that we need to be aware of when creating an HTML form to be used with a PHP script.  First, when the HTML form is submitted it is sent to the page "user2.php" as defined in the form action. Incidentally, the method of the form, POST, "causes the fill-out form contents to be sent to the server in a data body rather than as part of the URL"[8].  Conversely, the GET method "causes the fill-out form contents to be appended to the URL as if they were a normal query"[8]. Whatever we want this form to do should be included in "user2.php".  Second, every element on the HTML page is converted into a variable in the PHP script, when the form is submitted.  That is, the name that has been entered into the HTML form field "Name" is available in the PHP variable "$Name".  All variables in PHP are preceded by the "$" sign.  Accordingly, the text in Email and Age can be accessed using the variables $Email, $Age.  Note that the variable names correspond to the names of the fields given in the HTML form.

Not surprisingly, the $submit variable is also available in the PHP script and this contains the text "submit" since this value has been pre-defined in the HTML form.  Copy the text in Figure 3 and save it as user.php in the PHP directory.


<html>
<head>
<title>User Information: Print to Screen</title>
</head>
<body>
<?php
print "Your name is $Name, and you are $Age years old<br>";
print "Your email Address is $Email";
?>
</body>
</html>

Figure 4 - user2.php

Figure 4, give the PHP script of the User Information form.  We have made use of the built-in PHP "print".   The print command does the same thing that was done in the Hello World Application.  We could have done much more with this information.  We encourage the reader to look into the "mail" command to see what is possible with this function.  Copy the text in Figure 4 and save it as user2.php in the PHP directory.  Open up the user.php script in your web browser, complete the form and submit it. 

As you would expect there is much more to writing PHP applications.  The references below are other PHP resources on the web and in print.  We encourage you to look at these, as there is much more to learn, too much for us to present in this tutorial.  Below, we refine the application created earlier and introduce you to some good coding practices.

Coding Tips

As your scripts get more involved and thus longer, it is good practice to encapsulate specific tasks within functions. Also, if accepting input from anyone then it pays to do some checking to see that the data you receive is OK.  We perform both tasks below:

Checking the data

Revisiting the user2.php PHP script, what would happen if the form did not include any information, yet still the submit button was clicked.  Figure 5 gives the output in this occurrence.


<html>
<head>
<title>User Information: Print to Screen</title>
</head>
<body>
Your name is , and you are years old
Your email Address is
</body>
</html>

Figure 5 - An incomplete Form result

Of course we would not want this to occur!  So lets check to see that the data is provided in the form.  If it is not provided then we will display an error message indicating that the information is required.  Modifying "user2.php" we get the following:


<html>
<head>
<title>User Information: Print to Screen</title>
</head>
<body>
<?php
$error = 0;
if(empty($Name)) {
print "You must provide a Name<br>";
$error = 1;
}
if(empty($Email)) {
print "You must provide an Email Address<br>";
$error = 1;
}
if(empty($Age)) {
print "You must provide your Age<br>";
$error = 1;
}
if($error == 0) {
print "Your name is $Name, and you are $Age years old<br>";
print "Your email Address is $Email";
}
?>
</body>
</html>

Figure 6 - Checking for Form Errors

On the first line in the PHP script, we initialize the variable $error to equal 0.  The form will only print the users information if $errors is equivalent to zero (Note the symbol for equivalence "= =".  We make use of the built-in PHP function, "empty" which determines whether a variable is set.  If the variable is not set, then this function defaults to true.  Note the conditional expressions "if" - which test to see if the condition is true.  If either the Name, Email or Age variable is empty then print the resulting strings and change the $error variable to 1.

Using Functions

Since we've repeated a number of expressions in our script, we can use a function reduce the script size as well as use the specific code only once.  Figure 7 provides a rewrite of the user2.php script with two functions used.


<html>
<head>
<title>User Information: Print to Screen</title>
</head>
<body>
<?php
function CheckForm($HTTP_POST_VARS)
{
while(list($index,$value) = each($HTTP_POST_VARS))
{
if(empty($value))
{
print "Missing $index";
return FALSE;
}
}
return TRUE;
}
function PrintForm($HTTP_POST_VARS)
{
print "Your name is $HTTP_POST_VARS[Name], and you are
$HTTP_POST_VARS[Age] years old<br>";
print "Your email Address is $HTTP_POST_VARS[Email]";
}
if(CheckForm($HTTP_POST_VARS))
{
PrintForm($HTTP_POST_VARS);
}
?>
</body>
</html>

Figure 7 - Using Functions (Revised January 31, 2002 4:28 PM)

We have created two functions CheckForm and PrintForm and their purpose should be self-explanatory.  We have also introduced the built-in PHP array HTTP_POST_VARS that holds all the variables submitted in a POST method from a form.  If we were to have used the GET method, then the corresponding PHP array is HTTP_GET_VARS.  Instead of accessing the single variables, Name, Email and Age, these are now accessed as HTTP_POST_VARS[Name], etc.  As stated previously HTTP_POST_VARS is an array and the contents could be identified as shown in Figure 8:


Name	Value
Email Value
Age Value

Figure 8 - Array Name/Value Pairs

That is, for every index or key, for example, Name and Email there is a corresponding value.  The Each function is used to return the next key and value pair from an array.  That is, it first gets the index Name and corresponding value.  It then gets the index Email and its corresponding value, and so on.  The List function assigns variables as if they were an array.  The while loop simply iterates through each key, value pair while there exist key value pairs.  It exits when the last key value pair is executed.  We then check to see if the value is empty and if it is it we exit the function with the return FALSE statement.  If it is not empty then we exit the function with a return TRUE statement.

The PrintForm function highlights the use of the list function once again which simple retrieves the values from the array HTTP_POST_VARS and assigns them to the variables as identified in the list function (Name, Email, Age).  The PrintForm function then prints the statement confirming the users name, email and age.

For the functions to be used, they first have to be called from somewhere else in the program, and this achieved with the if statements in the script.  If the CheckForm function returns a TRUE statement then it will process the PrintForm function, otherwise it does nothing.

Conclusion

As you can see, PHP is a very straightforward scripting language.  It's ease of use is also complemented by integrated development platforms such as the Merlin Desktop.  With all this in place, it is very easy for a web developer to put together any enterprise application and have it run straight from the same development environment, although this is not encouraged.  We invite you to look at the many other resources listed in the references and welcome you to the world of Open Source Web Development.  We hope that your journey will be a rewarding one. If you have any comments, questions or criticisms contact the author at leverd@rpi.edu.


Deliverables

Part I

  1. PHP, Apache and MySQL should be installed on your computer, whether it is the AbriaSoft application or individual installations of the software. Perform all the exercises indicated in Figures 3 to 7.
  2. Compare PHP to other scripting languages such as JSP, ASP and/or ColdFusion. Discuss the advantages/disadvantages of using these (or any other) over PHP.

Part II (Optional)

  1. Repeat the tutorial above in another scripting language of your choice. Is your choice an improvement or not? Why?

References

  1. Web to Database Connectivity
  2. http://www.intranetjournal.com/text/articles/200005/php_05_30_00a.html
  3. PHP, http://www.php.net
  4. PHPBuilder.com, http://www.phpbuilder.com
  5. Developer Shed, http://www.devshed.com
  6. Speaking SQL (part 1)
  7. Ratschiller, Tobias, and Gerken, Till. Web Application Development with PHP. Indianapolis: New Riders Publishing, 2000
  8. http://archive.ncsa.uiuc.edu/SDG/Software/Mosaic/Forms/

Appendix A

A Generic Install Procedure for Apache and PHP

The use of the Abriasoft Merlin Server is recommended, however it is possible to create a web development environment by installing the software applications separately. You only need to install Apache and PHP to create a development environment, that is, if you have MS Access alreadyinstalled. Download apache and install it (version 1.3.27 is recommended as of February 19, 2003). It will install itself into a folder, Apache Group, under Program Files in Windows 2000 and XP. Your web directory will be located in the htdocs directory a few directories below the Apache Group folder.

Download the zipped version of PHP - the PHP module version which provides more integrated functionality. Extract the files to c:\php. There is an install.txt file in the directory that you SHOULD review for information on configuring the apache web server, but essentially, it’s a two step process. Rename, php.ini-dist to php.ini and copy the file to the c:\windows folder. The next step is to copy a few lines (look at the install.txt file for more information) to the apache config file. Simply place these lines at the end of the apache configuration file:

LoadModule php4_module c:/php/sapi/php4apache.dll
AddModule mod_php4.c
AddType application/x-httpd-php .php

To get to your apache configuration file (Windows XP), do:

Start > All Programs > Apache Server > Configure Apache Server > Edit config file.

Make sure that the file php4ts.dll is in the c:\php\sapi folder. It may initially be in c:\php.

Restart your server (Windows XP):

Start > All Programs > Apache Server > Control Apache Server > Restart

 

 

viu.eng.rpi.edu is hosted by Professor Cheng Hsu.
Rensselaer Polytechnic Institute
Department of Industrial and Systems Engineering (formally Decision Sciences & Engineering Systems)
110 8th St., Center for Industrial Innovation, Room 5123, Troy, NY 12180-3590

Copyright © 1997-2016. MetaWorld, Nothing on this site may be commercially used without written consent.

Valid XHTML 1.0! Valid CSS!