Web 101 Third Edition by Wendy G. Lehnert & Richard L. Kopec Chapter 11: Web Pages and Scripting Alternatives
Learn what CGI means
Find out what Java applets can do and how to add them to your Web pages.
Learn how data-driven Java applets make it easier to manage frequent Web page updates.
Learn about XML
Learn about AJAX and how it works
Learn about PHP
It’s very easy to add dynamic elements to your Web pages.
A Java Applet is a small Java program that is attached to a web page.
A Script is a small computer program written in a scripting language.
Scripts can be customized for you at an interactive Web site established for this purpose. (http://www.htmlgear.lycos.com/)
You can also download an authoring tool that helps you to do the same thing. (http://www.htmlgoodies.com/)
You can visit a freeware site and cut and paste one into your Web page.
A scripting language is usually more limited and simpler than a full-fledged programming language.
Perl is another common scripting language.
There are also applets , small programs written in Java that can also be used on Web pages.
Some Web programs are intended to be done on the client computer, but others work best when done by the server.
In order to use server-side programs, the client must pass information to the server.
The protocol used by the client to pass needed information to the server is known as a Common Gateway interface (CGI).
The programs that process this information are known as CGI scripts.
Web page hit counters are commonly implemented this way:
The hit count data collected by your computer is sent to a server for storage by the hit counter CGI Script whenever your Web page is accessed.
These CGI services are often housed on a 3rd-party computer, so three computers are involved: 1) one hosts the Web browser requesting the page, 2) one stores and serves the Web page, and 3) one offers the CGI service and data storage.
To install your own CGI scripts, you need access to a Web server that supports CGI.
Because of security concerns, such access is often very limited, if available at all.
CGI scripts are often written by programmers for programmers, but there are some that you can try.
Live Counter: http://www. chami .com/counter/classic/
There are 5 files:
1. a “.class” file (a Java applet)
2. Three “.pl” files (a CGI Perl script)
3. A “.gif” file (images of the counter digits)
If your Web server supports CGI, you might consider trying LiveCounter.
Besides hit counters, CGI scipts can be used to
password protect your Web page
add a site specific search engine to a web site
An applet is a small executable program written in Java attached to a Web page.
Applets require that a JVM be installed on the client computer.
A JVM (Java Virtual Machine) is a platform-specific browser add-on that makes it possible for Web browsers to execute Java applets.
Java is a full-fledged programming language.
Applets pose less of a risk than scripts do.
Applets can’t carry viruses since they can’t write to the local machine.
Programming Java Applets will require programming skill
You can find freely available applets online at applet sites
As an applet is software, so it will have a license too
To install an applet:
Download and unpack the applet
Read all available documentation
Insert the required HTML snippet into your Web page
Modify the PARAM values as needed
Upload your Web page to the server
Upload the required .class file
Upload any required support files
Data-driven Web page displays are used to minimize the amount of effort needed for ongoing Web page maintenance.
A Java applet reads and displays the information contained in a text data file.
Only that text file needs to be updated.
These applets are often highly customizable
Data-Driven Web Pages
Data-Driven Web Pages
Data-Driven Web Pages
Data-driven displays are not limited to text.
They can accept data from the user.
Applets that do this are freely available on the Web.
Data-driven Web (DDW) sites do not work well with HTML because DDW pages are based on separation of content from presentation.
eXtensible Markup Language (XML) is a markup language designed to organize content (the data).
XML works cooperatively with CSS to present this content.
XML is often called a data description language.
XML allows the user to define application-specific tags.
The user can use these tags to describe how the elements should be arranged relative to each other.
A CSS file can be created that describes how to display each of the user-defined elements.
An XML-enabled browser could then be used to display the Web page described.
A sample XML content description:
<!DOCTYPE news-list [
<!ELEMENT news-list (title, news*)>
<!ELEMENT news (header, body, link?)>
<!ELEMENT title ANY>
<!ELEMENT header ANY>
<!ELEMENT body ANY>
<!ELEMENT link ANY>
A sample XML data file:
<header>Assignment #4 Due Date Extension</header>
<body>The deadline for assignment #4 has been extended to 6pm on Friday, April 5.</body>
<news>…</news> // another news element
<header>Course Project Assignments for 120</header>
<body>These are the course projects for the 9:30 folks.</body>
A transitional language as the Web pages are transformed from HTML to XML.
Used to implement Web 2.0 applications (Chapter 4).
Formerly known as DHTML (dynamic HTML).
Permits the creation of shared documents like those found in Google Spreadsheets and Docs.
Can also send form data to server as it’s entered, eliminating the need for a Submit button.
Used to power:
Microsoft Outlook Access
Newest kid on the scripting block.
PHP: P ersonal home page H ypertext P reprocessor
Open Source, server-side, scripting language
Intended to produce dynamic Web content.
Useful for frequently changing data displayed in stable format.
Simplifies task of accessing a database with frequently updated data, extracting desired information, and generating a Web page to display it.
Server used must support PHP.
How to tell? Insert this code into an HTML file: <?php echo “Your server supports PHP” ?>
If you see the string appearing in the echo statement above on the web page containing this code, then your server supports PHP.
PHP can be used to capture data from a Web page, process it, then generate a Web page to display the result.
Example, Punky’s Pizza Parlor
A “normal” Web page is created to capture order information:
The HTML file uses the ACTION attribute of the FORM element to trigger the PHP code: <form action=“order.php” method=“post”>
As you can probably guess, the PHP code to be executed when the SUBMIT button is pressed can be found in the file “order.php”
As you can also probably guess, the extension “.php” is used for files that contain PHP code.
/* S tart of PHP code */ $pizza = $_POST[‘pizza’]; /* get the pizza type from POST data */ $topping1 = $_POST[‘topping1’]; /* get 1st topping from POST data */ $topping2 = $_POST[‘topping2’]; /* get 2nd topping from POST data */ $topping3 = $_POST[‘topping3’]; /* get 3rd topping from POST data */ $quantity = $_POST[‘quantity’]; /* get quantity ordered from POST data */ /* create HTML page HEAD element */ echo “<html> <head> <title>Pizza Order</title> </head> ”; /* start the BODY element */ echo “<body> <h1>Punky’s Pizza Parlor</h1> <h2>Order Confirmation</h2>”; /* Report the order data */ echo “You ordered a ”. $pizza . “ pizza with ” . $topping1 . “, ”. $topping2 . “, and ” . $topping3 . “.<br>”; echo “Number ordered: ” . $quantity . “ <br><br>”; /* compute and report the cost */ printf(“Your cost, including 8%% tax: $%.2f<br>” , ($quantity*10)*1.08); /* write the date and time of order */ echo “Time ordered: ” .date(‘D, d M Y g:i:s A’) . “ <br>”; /* finish the page */ echo “Thank you for ordering from Punky’s Pizza Parlor!”; echo “</body></html>”; /* end of PHP code */
These assignment statements capture the data entered in the Web page form control elements (the selection lists).
As you can see, variables in PHP are preceded by a $ sign.