0
Web 101 Third Edition by Wendy G. Lehnert &  Richard L. Kopec Chapter 11:   Web Pages and Scripting Alternatives
<ul><li>Learn what CGI means </li></ul><ul><li>Find out what Java applets can do and how to add them to your Web pages. </...
<ul><li>It’s very easy to add dynamic elements to your Web pages. </li></ul><ul><li>Ready-made JavaScripts and Java applet...
<ul><li>A Script is a small computer program written in a scripting language. </li></ul><ul><li>Scripts can be customized ...
<ul><li>Some Javascript freeware sites (from Chapter 10): http://www. wsabstract .com/ </li></ul><ul><ul><li>http: //Javas...
<ul><li>A scripting language is usually more limited and simpler than a full-fledged programming language. </li></ul><ul><...
<ul><li>Some Web programs are intended to be done on the client computer, but others work best when done by the server. </...
<ul><li>A hit counter MUST be implemented on a server - Javascript cannot write to storage for security reasons - a rogue ...
<ul><li>To install your own CGI scripts, you need access to a Web server that supports CGI. </li></ul><ul><li>Because of s...
<ul><li>If your Web server supports CGI, you might consider trying LiveCounter. </li></ul><ul><li>Besides hit counters, CG...
Java Applets <ul><li>An applet is a small executable program written in Java attached to a Web page. </li></ul><ul><li>App...
Java Applets <ul><li>Java is a full-fledged programming language. </li></ul><ul><li>Applets pose less of a risk than scrip...
<ul><li>Programming Java Applets will require programming skill </li></ul><ul><li>You can find freely available applets on...
<ul><li>To install an applet: </li></ul><ul><ul><li>Download and unpack the applet  </li></ul></ul><ul><ul><li>Read all av...
<ul><li>Data-driven Web page displays are used to minimize the amount of effort needed for ongoing Web page maintenance. <...
Data-Driven Web Pages
Data-Driven Web Pages <ul><li>Data-driven displays are not limited to text. </li></ul><ul><li>They can accept data from th...
XML <ul><li>Data-driven Web (DDW) sites do not work well with HTML because DDW pages are based on separation of content fr...
XML <ul><li>XML allows the user to define application-specific tags. </li></ul><ul><li>The user can use these tags to desc...
XML <ul><li>A sample XML content description: </li></ul><ul><li><!DOCTYPE news-list [  </li></ul><ul><li><!ELEMENT news-li...
XML <ul><li>A sample XML data file: </li></ul><ul><li><news-list>  </li></ul><ul><li><title>Announcements</title> </li></u...
XML <ul><li>An associated CSS file: </li></ul><ul><li>title { font-size: 12pt; font-family: arial;  </li></ul><ul><li>colo...
XML <ul><li>The final Web page </li></ul>
XML <ul><li>XHTML - eXtensible Hypertext Markup Language) </li></ul><ul><li>Combines HTML and XML. </li></ul><ul><li>Adds ...
AJAX <ul><li>Asychronous Javascript and XML. </li></ul><ul><li>Used to implement Web 2.0 applications (Chapter 4). </li></...
AJAX <ul><li>Can also send form data to server as it’s entered, eliminating the need for a Submit button. </li></ul><ul><l...
PHP <ul><li>Newest kid on the scripting block. </li></ul><ul><li>PHP:  P ersonal home page  H ypertext  P reprocessor </li...
PHP <ul><li>Server used must support PHP. </li></ul><ul><ul><li>How to tell? Insert this code into an HTML file: <?php ech...
PHP <ul><li>PHP can be used to capture data from a Web page, process it, then generate a Web page to display the result. <...
PHP <ul><li>The HTML file uses the ACTION attribute of the FORM element to trigger the PHP code: <form  action=“order.php”...
PHP <ul><li>  /*  S tart of PHP code */  $pizza = $_POST[‘pizza’];  /* get the pizza type from POST data */ $topping1 = $_...
PHP <ul><li>These  assignment  statements capture the data entered in the Web page form control elements (the selection li...
PHP <ul><li>These  echo  statements begin building the Web page dynamically, writing it to the browser piece by piece. </l...
PHP <ul><li>This statement performs the computation, then prints and formats the results so they look good. </li></ul><ul>...
PHP <ul><li>The echo statement uses the  date  function to print the current date according to its own specific format spe...
PHP <ul><li>The  date  function format specifiers </li></ul>
PHP <ul><li>These two statements complete the Web page: </li></ul><ul><li>echo “Thank you for ordering from Punky’s Pizza ...
PHP <ul><li>The Web page produced: </li></ul>
How Far Can You Go Without Programming? <ul><li>Quite a ways! </li></ul><ul><li>You should be able to build functional and...
How Far Can You Go Without Programming? <ul><li>You can acquire an Integrated Development Environment (IDE) with a Rapid D...
Upcoming SlideShare
Loading in...5
×

Chapter 11

1,441

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,441
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Chapter 11"

  1. 1. Web 101 Third Edition by Wendy G. Lehnert & Richard L. Kopec Chapter 11: Web Pages and Scripting Alternatives
  2. 2. <ul><li>Learn what CGI means </li></ul><ul><li>Find out what Java applets can do and how to add them to your Web pages. </li></ul><ul><li>Learn how data-driven Java applets make it easier to manage frequent Web page updates. </li></ul><ul><li>Learn about XML </li></ul><ul><li>Learn about AJAX and how it works </li></ul><ul><li>Learn about PHP </li></ul>Learning Objectives
  3. 3. <ul><li>It’s very easy to add dynamic elements to your Web pages. </li></ul><ul><li>Ready-made JavaScripts and Java applets are available on the web for you to add to your Web page. </li></ul><ul><li>A JavaScript is a bit of code written to enhance a Web page. </li></ul><ul><li>A Java Applet is a small Java program that is attached to a web page. </li></ul>Taking Charge
  4. 4. <ul><li>A Script is a small computer program written in a scripting language. </li></ul><ul><li>Scripts can be customized for you at an interactive Web site established for this purpose. (http://www.htmlgear.lycos.com/) </li></ul><ul><li>You can also download an authoring tool that helps you to do the same thing. (http://www.htmlgoodies.com/) </li></ul><ul><li>You can visit a freeware site and cut and paste one into your Web page. </li></ul>Taking Charge
  5. 5. <ul><li>Some Javascript freeware sites (from Chapter 10): http://www. wsabstract .com/ </li></ul><ul><ul><li>http: //Javascript .internet.com/ </li></ul></ul><ul><ul><li> http://www. JavaScriptsearch .com/ </li></ul></ul>Taking Charge
  6. 6. <ul><li>A scripting language is usually more limited and simpler than a full-fledged programming language. </li></ul><ul><li>Javascript interpreters are built-in to your Web browser, so no additional server support is needed to use it. </li></ul><ul><li>In addition to Javascript, your Web server might also support PHP or Perl. </li></ul><ul><li>PHP is a more standardized and potentially easier to use scripting language than Javascript. </li></ul><ul><li>Perl is another common scripting language. </li></ul><ul><li>There are also applets , small programs written in Java that can also be used on Web pages. </li></ul>Taking Charge
  7. 7. <ul><li>Some Web programs are intended to be done on the client computer, but others work best when done by the server. </li></ul><ul><li>In order to use server-side programs, the client must pass information to the server. </li></ul><ul><li>The protocol used by the client to pass needed information to the server is known as a Common Gateway interface (CGI). </li></ul><ul><li>The programs that process this information are known as CGI scripts. </li></ul><ul><li>Web page hit counters are commonly implemented this way: </li></ul>CGI Scripts
  8. 8. <ul><li>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! </li></ul><ul><li>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. </li></ul><ul><li>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. </li></ul>CGI Scripts
  9. 9. <ul><li>To install your own CGI scripts, you need access to a Web server that supports CGI. </li></ul><ul><li>Because of security concerns, such access is often very limited, if available at all. </li></ul><ul><li>CGI scripts are often written by programmers for programmers, but there are some that you can try. </li></ul><ul><li>Live Counter: http://www. chami .com/counter/classic/ </li></ul><ul><li>There are 5 files: </li></ul><ul><li>1. a “.class” file (a Java applet) </li></ul><ul><li>2. Three “.pl” files (a CGI Perl script) </li></ul><ul><li>3. A “.gif” file (images of the counter digits) </li></ul>CGI Scripts
  10. 10. <ul><li>If your Web server supports CGI, you might consider trying LiveCounter. </li></ul><ul><li>Besides hit counters, CGI scipts can be used to </li></ul><ul><ul><li>password protect your Web page </li></ul></ul><ul><ul><li>store data </li></ul></ul><ul><ul><li>add a site specific search engine to a web site </li></ul></ul>CGI Scripts
  11. 11. Java Applets <ul><li>An applet is a small executable program written in Java attached to a Web page. </li></ul><ul><li>Applets require that a JVM be installed on the client computer. </li></ul><ul><li>A JVM (Java Virtual Machine) is a platform-specific browser add-on that makes it possible for Web browsers to execute Java applets. </li></ul>
  12. 12. Java Applets <ul><li>Java is a full-fledged programming language. </li></ul><ul><li>Applets pose less of a risk than scripts do. </li></ul><ul><li>Applets can’t carry viruses since they can’t write to the local machine. </li></ul>
  13. 13. <ul><li>Programming Java Applets will require programming skill </li></ul><ul><li>You can find freely available applets online at applet sites </li></ul><ul><li>As an applet is software, so it will have a license too </li></ul>Java Applets
  14. 14. <ul><li>To install an applet: </li></ul><ul><ul><li>Download and unpack the applet </li></ul></ul><ul><ul><li>Read all available documentation </li></ul></ul><ul><ul><li>Insert the required HTML snippet into your Web page </li></ul></ul><ul><ul><li>Modify the PARAM values as needed </li></ul></ul><ul><ul><li>Upload your Web page to the server </li></ul></ul><ul><ul><li>Upload the required .class file </li></ul></ul><ul><ul><li>Upload any required support files </li></ul></ul>Java Applets
  15. 15. <ul><li>Data-driven Web page displays are used to minimize the amount of effort needed for ongoing Web page maintenance. </li></ul><ul><li>A Java applet reads and displays the information contained in a text data file. </li></ul><ul><li>Only that text file needs to be updated. </li></ul><ul><li>These applets are often highly customizable </li></ul>Data-Driven Web Pages
  16. 16. Data-Driven Web Pages
  17. 17. Data-Driven Web Pages <ul><li>Data-driven displays are not limited to text. </li></ul><ul><li>They can accept data from the user. </li></ul><ul><li>Applets that do this are freely available on the Web. </li></ul>
  18. 18. XML <ul><li>Data-driven Web (DDW) sites do not work well with HTML because DDW pages are based on separation of content from presentation. </li></ul><ul><li>eXtensible Markup Language (XML) is a markup language designed to organize content (the data). </li></ul><ul><li>XML works cooperatively with CSS to present this content. </li></ul><ul><li>XML is often called a data description language. </li></ul>
  19. 19. XML <ul><li>XML allows the user to define application-specific tags. </li></ul><ul><li>The user can use these tags to describe how the elements should be arranged relative to each other. </li></ul><ul><li>A CSS file can be created that describes how to display each of the user-defined elements. </li></ul><ul><li>An XML-enabled browser could then be used to display the Web page described. </li></ul>
  20. 20. XML <ul><li>A sample XML content description: </li></ul><ul><li><!DOCTYPE news-list [ </li></ul><ul><li><!ELEMENT news-list (title, news*)> </li></ul><ul><li><!ELEMENT news (header, body, link?)> </li></ul><ul><li><!ELEMENT title ANY> </li></ul><ul><li><!ELEMENT header ANY> </li></ul><ul><li><!ELEMENT body ANY> </li></ul><ul><li><!ELEMENT link ANY> </li></ul><ul><li>]> </li></ul>
  21. 21. XML <ul><li>A sample XML data file: </li></ul><ul><li><news-list> </li></ul><ul><li><title>Announcements</title> </li></ul><ul><li><news> </li></ul><ul><li><header>Assignment #4 Due Date Extension</header> </li></ul><ul><li><body>The deadline for assignment #4 has been extended to 6pm on Friday, April 5.</body> </li></ul><ul><li></news> </li></ul><ul><li><news>…</news> // another news element </li></ul><ul><li><news> </li></ul><ul><li><header>Course Project Assignments for 120</header> </li></ul><ul><li><body>These are the course projects for the 9:30 folks.</body> </li></ul><ul><li><link>http://www-unix.oit.umass.edu/~lehnert/ assignments.html</link> </li></ul><ul><li></news> </li></ul><ul><li><news>…</news> // another news element </li></ul><ul><li></news-list> </li></ul>
  22. 22. XML <ul><li>An associated CSS file: </li></ul><ul><li>title { font-size: 12pt; font-family: arial; </li></ul><ul><li>color: red; font-weight: bold; </li></ul><ul><li>text-align: center; margin-top: 10; </li></ul><ul><li>margin-bottom: 10; display: block} </li></ul><ul><li>header { font-size: 8pt; font-family: arial; </li></ul><ul><li>font-weight: bold; margin-top: 10; </li></ul><ul><li>margin-left: 6; display: block} </li></ul><ul><li>body { font-size: 8pt; font-family: arial; </li></ul><ul><li>margin-left: 6; display: block} </li></ul>
  23. 23. XML <ul><li>The final Web page </li></ul>
  24. 24. XML <ul><li>XHTML - eXtensible Hypertext Markup Language) </li></ul><ul><li>Combines HTML and XML. </li></ul><ul><li>Adds XMLs capability of creating new elements. </li></ul><ul><li>Most browsers recognize XHTML. </li></ul><ul><li>A transitional language as the Web pages are transformed from HTML to XML. </li></ul>
  25. 25. AJAX <ul><li>Asychronous Javascript and XML. </li></ul><ul><li>Used to implement Web 2.0 applications (Chapter 4). </li></ul><ul><li>Formerly known as DHTML (dynamic HTML). </li></ul><ul><li>Allows browser to carry on additional tasks while it waits for some Javascript action to be completed. </li></ul><ul><li>Normally, browsers “freeze” until the Javascript task is completed. </li></ul><ul><li>Permits the creation of shared documents like those found in Google Spreadsheets and Docs. </li></ul><ul><li>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. </li></ul>
  26. 26. AJAX <ul><li>Can also send form data to server as it’s entered, eliminating the need for a Submit button. </li></ul><ul><li>Used to power: </li></ul><ul><ul><li>Microsoft Outlook Access </li></ul></ul><ul><ul><li>Google Maps </li></ul></ul><ul><ul><li>Yahoo! Maps </li></ul></ul><ul><ul><li>Flickr </li></ul></ul><ul><ul><li>Netflix </li></ul></ul><ul><ul><li>Google Docs </li></ul></ul>
  27. 27. PHP <ul><li>Newest kid on the scripting block. </li></ul><ul><li>PHP: P ersonal home page H ypertext P reprocessor </li></ul><ul><li>Open Source, server-side, scripting language </li></ul><ul><li>Intended to produce dynamic Web content. </li></ul><ul><li>Useful for frequently changing data displayed in stable format. </li></ul><ul><li>Simplifies task of accessing a database with frequently updated data, extracting desired information, and generating a Web page to display it. </li></ul>
  28. 28. PHP <ul><li>Server used must support PHP. </li></ul><ul><ul><li>How to tell? Insert this code into an HTML file: <?php echo “Your server supports PHP” ?> </li></ul></ul><ul><ul><li>If you see the string appearing in the echo statement above on the web page containing this code, then your server supports PHP. </li></ul></ul>
  29. 29. PHP <ul><li>PHP can be used to capture data from a Web page, process it, then generate a Web page to display the result. </li></ul><ul><li>Example, Punky’s Pizza Parlor </li></ul><ul><li>A “normal” Web page is created to capture order information: </li></ul>
  30. 30. PHP <ul><li>The HTML file uses the ACTION attribute of the FORM element to trigger the PHP code: <form action=“order.php” method=“post”> </li></ul><ul><li>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” </li></ul><ul><li>As you can also probably guess, the extension “.php” is used for files that contain PHP code. </li></ul>
  31. 31. PHP <ul><li> /* 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 */ </li></ul>
  32. 32. PHP <ul><li>These assignment statements capture the data entered in the Web page form control elements (the selection lists). </li></ul><ul><li>As you can see, variables in PHP are preceded by a $ sign. </li></ul><ul><li>All PHP statements end with a semicolon. </li></ul><ul><li>$pizza = $_POST[‘pizza’]; $topping1 = $_POST[‘topping1’]; $topping2 = $_POST[‘topping2’]; $topping3 = $_POST[‘topping3’]; $quantity = $_POST[‘quantity’]; </li></ul>
  33. 33. PHP <ul><li>These echo statements begin building the Web page dynamically, writing it to the browser piece by piece. </li></ul><ul><li>In PHP concatenation is indicated by a period (Javascript uses a +). </li></ul><ul><li>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>”; </li></ul>
  34. 34. PHP <ul><li>This statement performs the computation, then prints and formats the results so they look good. </li></ul><ul><li>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) </li></ul><ul><li>printf(“Your cost, including 8 %% tax: $ %.2f <br>” , ($quantity*10)*1.08); </li></ul>
  35. 35. PHP <ul><li>The echo statement uses the date function to print the current date according to its own specific format specifiers (see next slide). </li></ul><ul><li>The date format specifier used here is D, d M Y g:i:s A </li></ul><ul><li>produces </li></ul><ul><li>Sat, 09 Sep 2006 11:23:03 AM </li></ul><ul><li>echo “Time ordered: ” .date(‘D, d M Y g:i:s A’) . “ <br>”; </li></ul>
  36. 36. PHP <ul><li>The date function format specifiers </li></ul>
  37. 37. PHP <ul><li>These two statements complete the Web page: </li></ul><ul><li>echo “Thank you for ordering from Punky’s Pizza Parlor!”; </li></ul><ul><li>echo “</body></html>”; </li></ul>
  38. 38. PHP <ul><li>The Web page produced: </li></ul>
  39. 39. How Far Can You Go Without Programming? <ul><li>Quite a ways! </li></ul><ul><li>You should be able to build functional and attractive Web pages. </li></ul><ul><li>Numerous scripts and applets are freely available on the Web to enhance your pages. </li></ul><ul><li>Many are easily incorporated into your Web page. </li></ul><ul><li>But some may simply not work! </li></ul>
  40. 40. How Far Can You Go Without Programming? <ul><li>You can acquire an Integrated Development Environment (IDE) with a Rapid Development Application (RAD) editor which provides Graphical User Interface (GUI) to assist you. </li></ul><ul><li>You can also hire a programmer to (try rentacoder.com)! </li></ul><ul><li>Although programming is becoming easier and easier, some coding tasks can be quite challenging even for experienced programmers. </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×