Web 101 third edition by wendy g lehnert richard l kopec
Sponsored Links
This presentation is the property of its rightful owner.
1 / 40

Chapter 11: Web Pages and Scripting Alternatives PowerPoint PPT Presentation

  • Uploaded on
  • Presentation posted in: General

Web 101 Third Edition by Wendy G. Lehnert & Richard L. Kopec. Chapter 11: Web Pages and Scripting Alternatives. Learning Objectives. Learn what CGI means Find out what Java applets can do and how to add them to your Web pages.

Download Presentation

Chapter 11: Web Pages and Scripting Alternatives

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript

Web 101

Third Edition

by Wendy G. Lehnert & Richard L. Kopec

Chapter 11:Web Pages and Scripting Alternatives

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

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.

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.

Taking Charge

  • Some Javascript freeware sites (from Chapter 10):http://www.wsabstract.com/



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.

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:

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.

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)

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

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 platform-specific browser add-on that makes it possible for Web browsers to execute Java applets.

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.

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

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

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

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>

    <link>http://www-unix.oit.umass.edu/~lehnert/ assignments.html</link>


    <news>…</news> // another news element



  • 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}


  • The final Web page


  • 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.


  • 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.


  • 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


  • 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.


  • Server used must support PHP.

    • How to tell?Insert this code into an HTML file:<?phpecho “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.


/* 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 */


  • 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’];


  • 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>”;


  • 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);


  • 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 isD, d M Y g:i:s A


    Sat, 09 Sep 2006 11:23:03 AM

    echo “Time ordered: ” .date(‘D, d M Y g:i:s A’) . “ <br>”;


  • The date function format specifiers


  • These two statements complete the Web page:

    echo “Thank you for ordering from Punky’s Pizza Parlor!”;

    echo “</body></html>”;


  • The Web page produced:

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!

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.

  • Login