Download Chapter 11

Chapter 11:
Web Pages and Scripting Alternatives
Web 101
Third Edition
by Wendy G. Lehnert &
Richard L. Kopec
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
Learning Objectives
• 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
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
11-2
Taking Charge
• It’s very easy to add dynamic elements to your
Web pages.
• Ready-made JavaScripts and Java applets are
available on the web for you to add to your Web
page.
• A JavaScript is a bit of code written to enhance
a Web page.
• A Java Applet is a small Java program that is
attached to a web page.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
11-3
Taking Charge
• 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.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
11-4
Taking Charge
• Some Javascript freeware sites (from Chapter
10):
http://www.wsabstract.com/
http://Javascript.internet.com/
http://www.JavaScriptsearch.com/
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
11-5
Taking Charge
• A scripting language is usually more limited and simpler
than a full-fledged programming language.
• Javascript interpreters are built-in to your Web browser, so
no additional server support is needed to use it.
• In addition to Javascript, your Web server might also
support PHP or Perl.
• PHP is a more standardized and potentially easier to use
scripting language than Javascript.
• Perl is another common scripting language.
• There are also applets, small programs written in Java that
can also be used on Web pages.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
11-6
CGI Scripts
• 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:
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
11-7
CGI Scripts
• A hit counter MUST be implemented on a server - Javascript
cannot write to storage for security reasons - a rogue Javascript
program could do a great deal of damage!
• 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.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
11-8
CGI Scripts
• 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)
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
11-9
CGI Scripts
• 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
– store data
– add a site specific search engine to a web site
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
11-10
Java Applets
• 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 platformspecific browser add-on that makes it possible
for Web browsers to execute Java applets.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
11-11
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.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
11-12
Java Applets
• 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
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
11-13
Java Applets
• 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
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
11-14
Data-Driven Web Pages
• 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
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
11-15
Data-Driven Web Pages
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
11-16
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.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
11-17
XML
• 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.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
11-18
XML
• XML allows the user to define applicationspecific 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.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
11-19
XML
• 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>
]>
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
11-20
XML
• A sample XML data file:
<news-list>
<title>Announcements</title>
<news>
<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>…</news> // another news element
<news>
<header>Course Project Assignments for 120</header>
<body>These are the course projects for the 9:30 folks.</body>
<link>http://www-unix.oit.umass.edu/~lehnert/ assignments.html</link>
</news>
<news>…</news> // another news element
</news-list>
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
11-21
XML
• An associated CSS file:
title { font-size: 12pt; font-family: arial;
color: red; font-weight: bold;
text-align: center; margin-top: 10;
margin-bottom: 10; display: block}
header { font-size: 8pt; font-family: arial;
font-weight: bold; margin-top: 10;
margin-left: 6; display: block}
body { font-size: 8pt; font-family: arial;
margin-left: 6; display: block}
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
11-22
XML
• The final Web page
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
11-23
XML
• XHTML - eXtensible Hypertext Markup
Language)
• Combines HTML and XML.
• Adds XMLs capability of creating new elements.
• Most browsers recognize XHTML.
• A transitional language as the Web pages are
transformed from HTML to XML.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
11-24
AJAX
•
•
•
•
Asychronous Javascript and XML.
Used to implement Web 2.0 applications (Chapter 4).
Formerly known as DHTML (dynamic HTML).
Allows browser to carry on additional tasks while it waits for
some Javascript action to be completed.
• Normally, browsers “freeze” until the Javascript task is
completed.
• Permits the creation of shared documents like those found in
Google Spreadsheets and Docs.
• Users can be entering data into a spreadsheet while the Javascript
engine is busily dispatching it to the server for distribution to
other document collaborators.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
11-25
AJAX
• Can also send form data to server as it’s entered,
eliminating the need for a Submit button.
• Used to power:
–
–
–
–
–
–
Microsoft Outlook Access
Google Maps
Yahoo! Maps
Flickr
Netflix
Google Docs
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
11-26
PHP
•
•
•
•
•
Newest kid on the scripting block.
PHP: Personal home page Hypertext Preprocessor
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.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
11-27
PHP
• 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.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
11-28
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:
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
11-29
PHP
• 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.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
11-30
PHP
/* Start 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 */
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
11-31
PHP
• 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.
• All PHP statements end with a semicolon.
$pizza = $_POST[‘pizza’];
$topping1 = $_POST[‘topping1’];
$topping2 = $_POST[‘topping2’];
$topping3 = $_POST[‘topping3’];
$quantity = $_POST[‘quantity’];
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
11-32
PHP
• These echo statements begin building the Web page
dynamically, writing it to the browser piece by piece.
• In PHP concatenation is indicated by a period
(Javascript uses a +).
• Strings are indicated the same way - using single or
double quote characters as delimiters.
echo “<html> <head> <title>Pizza Order</title> </head> ”;
echo “<body> <h1>Punky’s Pizza Parlor</h1> <h2>Order
Confirmation</h2>”;
echo “You ordered a ”. $pizza . “ pizza with ” . $topping1 .
“, ”. $topping2 . “, and ” . $topping3 . “.<br>”;
echo “Number ordered: ” . $quantity . “ <br><br>”;
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
11-33
PHP
• This statement performs the computation, then
prints and formats the results so they look good.
• The printf statement uses format specifiers: %%
(to allow printing of a single %) and %.2f
(indicating that a floating point value should be
displayed to exactly 2 decimal places)
printf(“Your cost, including 8%% tax: $%.2f<br>” ,
($quantity*10)*1.08);
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
11-34
PHP
• The echo statement uses the date function to print
the current date according to its own specific
format specifiers (see next slide).
• The date format specifier used here is
D, d M Y g:i:s A
produces
Sat, 09 Sep 2006 11:23:03 AM
echo “Time ordered: ” .date(‘D, d M Y g:i:s A’) . “ <br>”;
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
11-35
PHP
• The date function format specifiers
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
11-36
PHP
• These two statements complete the Web page:
echo “Thank you for ordering from Punky’s Pizza Parlor!”;
echo “</body></html>”;
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
11-37
PHP
• The Web page produced:
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
11-38
How Far Can You Go Without
Programming?
• Quite a ways!
• You should be able to build functional and
attractive Web pages.
• Numerous scripts and applets are freely
available on the Web to enhance your pages.
• Many are easily incorporated into your Web
page.
• But some may simply not work!
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
11-39
How Far Can You Go Without
Programming?
• You can acquire an Integrated Development
Environment (IDE) with a Rapid Development
Application (RAD) editor which provides Graphical
User Interface (GUI) to assist you.
• You can also hire a programmer to (try
rentacoder.com)!
• Although programming is becoming easier and easier,
some coding tasks can be quite challenging even for
experienced programmers.
Copyright © 2007 Pearson Education, Inc. Publishing as Pearson Addison-Wesley
11-40