1 / 107

The network is the computer. - Sun Microsystems

The network is the computer. - Sun Microsystems. Building Dynamic Web Pages. Client-Server Architectures (Section 1.4) Client-Side Scripting (Chapters 3 & 4) Web Servers (Chapter 5) Server-Side Processing (Chapters 6, 8 & 10). Client/Server Architectures. Server-side processing.

donaldg
Download Presentation

The network is the computer. - Sun Microsystems

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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. The network is the computer. - Sun Microsystems

  2. Building Dynamic Web Pages • Client-Server Architectures(Section 1.4) • Client-Side Scripting(Chapters 3 & 4) • Web Servers (Chapter 5) • Server-Side Processing (Chapters 6, 8 & 10)

  3. Client/Server Architectures Server-side processing Client-side processing Network server client

  4. 1. The user uses a web browser to request a particular page. 2. The HTTP server receives the request and returns the source file for the requested page. 3. The browser displays the returned page. Static Web Sites HTTP Server Web Browser Network File System server client

  5. 1. Browser scripts interact with the user. 2. The server is called only when necessary… Client-Side Processing Network server client

  6. 2. The server requests the processing specified. 1. The user requests a page that specifies server-side processing. 3. The application processor runs the requested program, which produces a web page to return. Server-Side Processing HTTP Server Application Processor Network File System server client 4. The browser displays the returned page.

  7. 2. The server requests the processing specified. Server-Side with a Database 1. The user requests a page that specifies server-side processing. HTTP Server Application Processor Network File System server1 client 4. The application processor produces a web page to return. 5. The browser displays the returned page. 3. The application processor requests the data from the database server. Database Server database server2

  8. Programs vs. Scripts • Computers only understand programs written in a specially designed machine language: • Machine language programs are hard to write. • They are machine-specific. • In contrast,high-level languages: • Are easier to write because they are modeled on well-understood human formalisms. • Require a program to translate them into machine language: • Compiler • Interpreter

  9. Machine Language Examples Sun SPARC executable machine code 000001110111010100000101 000001000110000100000110 000000000000010000000010 000000000000010000000000 000000000000000000000000 000000000000000000000000 000000000000000000000000 000000000000000000000000 000000000000000000000010 000000000000000000000010 000000000000000000000000 000000000000000000000001 000000000000000000000001 000000000011010000110000 000000000000000000000000 000000000000000001100100 000000000000000000000000 000000010011000100100100 000000000000000000000000 000000000000000000000000 000000000000000001100100 000000000000000001000000 000000000000000000000101 000000000000000001010000 000000000000000000110011 000000000000000000110001 000000000000000000000000 000000000000000000000110 000000000000000000000000 000000000000000001100100 000000000000000000000001 000000000000000001100100 000000000000000000000000 000000000000000000000000 000000000000000000000000 000000000000001001000000 000000000000000000000000 000000000000001001000000 000000000000000000000000 000000000000000000000101 000000000000000000000000 000000000000000000000000 000000000000000000000000 000000000000000000000011 000000000000000000000000 000000000000001100100100 000000000000000000000000 000000000000000000000000 000000000000000000000000 000000000000000000000000 000000000000000000000000 000000000000000000100001 … this goes on for another 1600 lines... Intel Pentium executable machine code 000000100111000000010001 000001100100010101000110 000001100010010101010100 000000100001000000010001 000001100111000101010001 000001110001000101100100 000000100111000101010111 000000100001000101000011 000000000101000000010101 000001100001010101000111 000000110001000101000011 000001100001010100110111 000001100110010101010111 000001100100010101100000 000001100010010101010100 000000100111000101000100 000000000110010001110010 000001010111010000010010 000001010111010100110111 000001100111000101000111 000001010111010101100101 000001100111010101000011 000001110000000101010101 000001100110000101010001 000001100010000101000101 000001100001010100110111 000000000110010001110010 000000000100010000010010 000001100010000001010110 000001100011000101000101 000001010111010000010001 000001010111010100110111 000001100000010101010101 000001100111000101010001 000000000100010001110011 000001110001010001010110 000001100110000101000011 000000110001000000010001 000000000100010001110011 000001110010000001010110 000001110000000101110001 000000000100010101000101 000000110001000001100011 000000000100010001110011 000001100010010001010110 000001100010000101010110 000001100011000101000101 000000000101000000010101 000001110010000001010110 000001110100000101000101 000000000110010101100100 000000000100010000010010 … this goes on for another 74 lines...

  10. High-Level Language Example int main() { int x, y; x = 1; y = x + 2; return 0; }

  11. Intel machine code: 000000100111000000010001 000001100100010101000110 000001100010010101010100 000000100001000000010001 000001100111000101010001 000001110001000101100100 000000100111000101010111 000000100001000101000011 000000000101000000010101 000001100001010101000111 000000110001000101000011 000001100001010100110111 000001100110010101010111 000001100100010101100000 000001100010010101010100 000000100111000101000100 000000000110010001110010 000001010111010000010010 000001010111010100110111 000001100111000101000111 000001010111010101100101 000001100111010101000011 000001110000000101010101 000001100110000101010001 000001100010000101000101 000001100001010100110111 000000000110010001110010 000000000100010000010010 000001100010000001010110 000001100011000101000101 000001010111010000010001 000001010111010100110111 000001100000010101010101 000001100111000101010001 000000000100010001110011 000001110001010001010110 000001100110000101000011 000000110001000000010001 000000000100010001110011 000001110010000001010110 000001110000000101110001 000000000100010101000101 000000110001000001100011 000000000100010001110011 000001100010010001010110 000001100010000101010110 000001100011000101000101 000000000101000000010101 000001110010000001010110 000001110100000101000101 000000000110010101100100 000000000100010000010010 Compilers • A compiler translates a program written in a high-level language into a machine language program. SPARC machine code: 000001110111010100000101 000001000110000100000110 000000000000010000000010 000000000000010000000000 000000000000000000000000 000000000000000000000000 000000000000000000000000 000000000000000000000000 000000000000000000000010 000000000000000000000010 000000000000000000000000 000000000000000000000001 000000000000000000000001 000000000011010000110000 000000000000000000000000 000000000000000001100100 000000000000000000000000 000000010011000100100100 000000000000000000000000 000000000000000000000000 000000000000000001100100 000000000000000001000000 000000000000000000000101 000000000000000001010000 000000000000000000110011 000000000000000000110001 000000000000000000000000 000000000000000000000110 000000000000000000000000 000000000000000001100100 000000000000000000000001 000000000000000001100100 000000000000000000000000 000000000000000000000000 000000000000000000000000 000000000000001001000000 000000000000000000000000 000000000000001001000000 000000000000000000000000 000000000000000000000101 000000000000000000000000 000000000000000000000000 000000000000000000000000 000000000000000000000011 000000000000000000000000 000000000000001100100100 000000000000000000000000 000000000000000000000000 000000000000000000000000 000000000000000000000000 000000000000000000000000 000000000000000000100001 000001110111010100000101 000001000110000100000110 000000000000010000000010 000000000000010000000000 000000000000000000000000 000000000000000000000000 000000000000000000000000 000000000000000000000000 000000000000000000000010 000000000000000000000010 000000000000000000000000 000000000000000000000001 000000000000000000000001 000000000011010000110000 000000000000000000000000 000000000000000001100100 000000000000000000000000 000000010011000100100100 000000000000000000000000 000000000000000000000000 000000000000000001100100 000000000000000001000000 000000000000000000000101 000000000000000001010000 000000000000000000110011 000000000000000000110001 000000000000000000000000 000000000000000000000110 000000000000000000000000 000000000000000001100100 000000000000000000000001 000000000000000001100100 000000000000000000000000 000000000000000000000000 000000000000000000000000 000000000000001001000000 000000000000000000000000 000000000000001001000000 000000000000000000000000 000000000000000000000101 int main() { int x, y; x = 1; y = x + 2; return 0; } Intel C++ compiler Sun C++ compiler

  12. Interpreters • An interpreter decodes a script written in a high-level language, executing it on-the-fly. • Interpreted scripts tend to run more slowly than compiled programs. Interpreter PRINT 1+2 “3”

  13. Client/Server Technologies Server-side processing Client-side processing Network server client

  14. What’s the Big Idea James Gosling (1956- )Java • 1995 • A hybrid of compilation and interpretation • Based on a virtual machine • Designed for a heterogeneous, networked environment. Sun Microsystem’s “Green Team” was commissioned to ponder the next wave of computing. Images from javasoft.com August, 2003

  15. Client-Side Scripting • Example: An Acme Attack Planner • Technologies: • Forms(http://www.w3schools.com/html/html_forms.asp) • JavaScript(http://www.w3schools.com/js)

  16. HTML Forms <body> …other stuff here… <form name="frmAttackPlanner" onsubmit="return validEntries()"> …form stuff here… </form> </body>

  17. Form Input Boxes <body> …other stuff here… <form name="frmAttackPlanner" onsubmit="return validEntries()"> <table align="center"> <tr> <td>Attack Name:</td> <td><input type="text" name="txtName"></td> </tr> …other form elements here… </table> </form> </body>

  18. Form Selection Lists …other stuff here… <tr> <td valign="top">Attack Location:</td> <td> <select name="lstLocation"> <option>desert flats</option> <option>cliff top</option> <option>the big rock</option> <option>the cave</option> </select> </td> </tr> …other stuff here…

  19. Form Radio Buttons …other stuff here… <tr> <td valign="top">Tool:</td> <td> <input type="radio" name="optTool" value="dynamite">Dynamite<br> <input type="radio" name="optTool" value="mallet">Mallet<br> <input type="radio" name="optTool" value="arrow">Arrow<br> </td> </tr> …other stuff here…

  20. Form Check Boxes …other stuff here… <tr> <td>Status:</td> <td><input type="checkbox" name="chkReviewed">Reviewed with friend</td> </tr> …other stuff here…

  21. Form Command/Reset Buttons …other stuff here… <tr> <td></td> <td> <input type="submit" value="Submit"> <input type="reset"> </td> </tr> …other stuff here…

  22. Post vs. Get • Get • Post

  23. JavaScript • JavaScript is designed to add interactivity to HTML web pages: • Developed by Netscape • has a C/C++/Java-like syntax • JavaScript ≠ Java • It is not object-oriented. • It has limited capabilities.

  24. HTML and JavaScript <body> …other stuff here… <h2>Acme Attack Planner</h2> <script language="javascript"> document.write(new Date()); </script> …other stuff here… </body>

  25. HTML and JavaScript (cont.)

  26. Script Functions <script language="javascript"> function validEntries() { …function code here… return true; } </script> …HTML header/body here…

  27. Script Functions <script language="javascript"> function validEntries() { // Alert the user when they don’t name the plan. if (document.frmAttackPlanner.txtName.value == ""){ alert ("Please enter a name for your attack"); document.frmAttackPlanner.txtName.select(); return false; } …more functions… return true; } </script> …HTML header/body here…

  28. Script Functions (cont.) <script language="javascript"> function validEntries() { …previous functions… var dateValue = new Date(document.frmAttackPlanner.txtDate.value); if (isNaN(dateValue)) { alert ("Please enter a date in MM/DD/YYYY format."); document.frmAttackPlanner.txtDate.select(); return false; } …more functions… return true; } </script> …HTML header/body here…

  29. Script Functions (cont.) <script language="javascript"> function validEntries() { …previous functions… // There's no need to validate the attack location // because it has a default value. …more functions… return true; } </script> …HTML header/body here…

  30. Script Functions (cont.) <script language="javascript"> function validEntries() { …previous functions… var toolChecked = false; var toolValue = ""; // Save this value for the database update. for (var i=0; i<document.frmAttackPlanner.optTool.length; i++) { if (document.frmAttackPlanner.optTool[i].checked == true) { toolChecked = true; toolValue = document.frmAttackPlanner.optTool[i].value; } } if (toolChecked == false) { alert ("Please select a tool."); return false; } …more functions… } </script>

  31. Script Functions (cont.) <script language="javascript"> function validEntries() { …previous functions… //validate review status if (document.frmAttackPlanner.chkReviewed.checked == false) { alert ("Please review your plans with a friend then check the status box."); document.frmAttackPlanner.chkReviewed.select(); return false; } …more functions… } </script>

  32. Script Functions (cont.) <script language="javascript"> function validEntries() { …previous functions… var triesValue = parseInt(document.frmAttackPlanner.txtTries.value); //triesValue contains only the whole integer part of whatever is entered. if (isNaN(triesValue)) { alert ("Please enter a whole number for the expected number of tries"); document.frmAttackPlanner.txtTries.select(); return false; } …more functions… } </script>

  33. Script Functions (cont.) <script language="javascript"> function validEntries() { …previous functions… if (confirm("You were hurt badly last time you tried this combination. " + "Do you really want to do it again?")) { alert ("The following plan has been saved:" + "\n\tName:\t" + document.frmAttackPlanner.txtName.value + "\n\tDate:\t" + dateValue + "\n\tLocation:\t" + document.frmAttackPlanner.lstLocation.options[ document.frmAttackPlanner.lstLocation.selectedIndex].text + "\n\tTool:\t" + toolValue + "\n\tTries:\t" + triesValue + "\nGood luck!"); } else { alert ("Wise move; now, make some changes."); return false; } } </script>

  34. An Image Swapper

  35. <html> <head> <title>IS 341 - Home Page</title> <script type="text/javascript" language="Javascript"> <!-- var latinSeal = new Image() latinSeal.src = "../../images/calvin-seal-latin.gif" var englishSeal = new Image() englishSeal.src = "../../images/calvin-seal.gif" function setSeal(seal) { document.images[0].src=seal.src; } // --> </script> </head> <body class="main"> …some other stuff… <a href="http://www.calvin.edu" onMouseOver="setSeal(latinSeal)" onMouseOut="setSeal(englishSeal)"> <img src="../../images/calvin-seal.gif" alt="I prefer the Latin" width="95px"> </a> …some other stuff… </body> </html> index.html

  36. JavaScript Reference Material • JavaScript data types (Netscape 2.0): • Boolean true, false • Number:Integer 1, 0, 1, 2, 3 • Number:Floating Point 3.141, -3.01, 36e9 • Number:Octal 05, 06, 07, 010 • Number:Hexadecimal 0x8, 0x9, 0xA, 0xB • String "cat", "dog", "" • Null null • A JavaScript Reference/Tutorial: • http://www.w3schools.com/js/

  37. Client/Server Architectures Server-side processing Client-side processing Network server client

  38. Web Servers • Computers running software that processes information requests from web clients • Web servers communicate with clients using the Hypertext Transfer Protocol (HTTP). • Web servers provide access to many information types, e.g.: • html, text, gif, postscript,… • front ends to applications

  39. Hyper-Text Transfer Protocol • Web servers communicate with clients using HTTP: • Request Types, e.g.: • GET • POST • Response Types, e.g.: • 200 • 404 • The HTTP protocol is: • Stateless • Anonymous

  40. HTTP – A Static Page GET/ IS/341/index.html HTTP/1.1 User-Agent: Mozilla/5.0 Host: myhost.calvin.edu Accept: */* Date 8/12/03 Port 80 HTTP Server Web Browser Network File System server client HTTP/1.1/200 Server: Apache/2.0 Content-type: text/html Date: 8/12/03 <HTML> …The HTML source code… </HTML>

  41. HTTP – Client-Side Processing GET/ acme/orders.html HTTP/1.1 User-Agent: Mozilla/5.0 Host: myhost.calvin.edu Accept: */* Date 8/12/03 Port 80 HTTP Server Web Browser Network File System server client HTTP/1.1/200 Server: Apache/2.0 Content-type: text/html Date: 8/12/03 <HTML> …The HTML source code with scripts… </HTML>

  42. HTTP – Server-Side Processing POST/ index.html HTTP/1.1 User-Agent: Mozilla/5.0 Host: myhost.calvin.edu Accept: */* Date 8/12/03 q=%22calvin+college%22& … Port 80 HTTP Server Application Processor Web Browser Network File System server client HTTP/1.1/200 Server: Apache/2.0 Content-type: text/html Date: 8/12/03 <HTML> …The HTML source code… </HTML>

  43. Tim Berners-Lee (1955- ) World Wide Web • The world's first web server (info.cern.ch) on Dec. 25, 1990. • Included the key elements of the WWW: • URL • HTTP • HTML Images from www.w3.org August, 2003

  44. Virtual Document Tree • File system structure ≠ Virtual document tree • The server computer maintains a standard, hierarchical file system. • The server software provides access only to the files in its virtual document tree. C:\ http://pella.calvin.edu/ C:\acme C:\inetpub http://pella.calvin.edu/acme C:\inetpub\wwwroot

  45. Handling Multiple Users • HTTP servers/Application processors must hand multiple client requests. • How to run application processes: • Within the server process itself • One separate server process per request • Some combination of the two (e.g., threads)

  46. HTTPS • HTTPS is HTTP working over the secure sockets layer (SSL). • SSL provides: • Encryption • Authentication

  47. Comparing IIS and Apache • Apache • Open Source • Most commonly used • Seen as more reliable and more secure • Internet Information Server • Microsoft • Better integration with ASP.Net • Nicer administration IDE Images from www.apache.org/www.microsoft.com August, 2003

  48. Client/Server Architectures Client-side processing HTTP Server Application Processor Network File System server client

  49. Server-Side Scripting • Examples: • Acme new user registration • Acme products table • Technologies: • .Net Framework(http://www.w3schools.com/ngws) • VB.Net(http://msdn.microsoft.com/vbasic/) • ASP.Net(http://www.w3schools.com/aspnet) • ADO.Net(http://www.w3schools.com/aspnet/aspnet_dbconnection.asp)

  50. .Net Framework • Microsoft’s network-oriented development architecture • Components: • Common language runtime • Class library

More Related