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

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

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.