Your SlideShare is downloading. ×
Chapter 11
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Chapter 11


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Web 101 Third Edition by Wendy G. Lehnert & Richard L. Kopec Chapter 11: Web Pages and Scripting Alternatives
  • 2.
    • 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
    Learning Objectives
  • 3.
    • 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
  • 4.
    • 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. (
    • You can also download an authoring tool that helps you to do the same thing. (
    • You can visit a freeware site and cut and paste one into your Web page.
    Taking Charge
  • 5.
    • Some Javascript freeware sites (from Chapter 10): http://www. wsabstract .com/
      • http: //Javascript
      • http://www. JavaScriptsearch .com/
    Taking Charge
  • 6.
    • 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.
    Taking Charge
  • 7.
    • 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
  • 8.
    • 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
  • 9.
    • 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
  • 10.
    • 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
    CGI Scripts
  • 11. 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.
  • 12. 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.
  • 13.
    • 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
  • 14.
    • 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
    Java Applets
  • 15.
    • 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
  • 16. Data-Driven Web Pages
  • 17. 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.
  • 18. 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.
  • 19. XML
    • 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.
  • 20. 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>
    • ]>
  • 21. 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> assignments.html</link>
    • </news>
    • <news>…</news> // another news element
    • </news-list>
  • 22. 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}
  • 23. XML
    • The final Web page
  • 24. 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.
  • 25. 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.
  • 26. 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
  • 27. PHP
    • 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.
  • 28. 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.
  • 29. 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:
  • 30. 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.
  • 31. PHP
    • /* 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 */
  • 32. 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’];
  • 33. 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>”;
  • 34. 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);
  • 35. 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>”;
  • 36. PHP
    • The date function format specifiers
  • 37. PHP
    • These two statements complete the Web page:
    • echo “Thank you for ordering from Punky’s Pizza Parlor!”;
    • echo “</body></html>”;
  • 38. PHP
    • The Web page produced:
  • 39. 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!
  • 40. 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!
    • Although programming is becoming easier and easier, some coding tasks can be quite challenging even for experienced programmers.