1. Web Core Programming Presented by Tarek Ghazali IT Technical Specialist Microsoft SQL Server MVP Web Development MCP LebDev Vice President © 2006 Tarek Ghazali. All rights reserved.

2. WWW World Wide Web Definitions – –The World Wide Web The set of computers on the Internet that support HTTP – –HTTP The HyperText Transfer Protocol The language used by a WWW client (e.g. Netscape,Internet Explorer) to request documents from a WWW server – –HTML The HyperText Markup Language The language used to design web pages

3. WWW The World Wide Web (WWW) was developed by Tim Berners-Lee and other research scientists at CERN, the European center for nuclear research, in the late 1980s and early 1990s. The World Wide Web (WWW) was developed by Tim Berners-Lee and other research scientists at CERN, the European center for nuclear research, in the late 1980s and early 1990s. WWW is a client server model and uses TCP connections to transfer information or web pages from server to client. WWW is a client server model and uses TCP connections to transfer information or web pages from server to client.

4. WWW WWW (cont.) WWW uses a Hypertext model. Hypertext allows interactive accesses to a collection of documents. WWW uses a Hypertext model. Hypertext allows interactive accesses to a collection of documents. Documents can hold Documents can hold Text (hypertext), Graphics, Sound, Animations, Video Text (hypertext), Graphics, Sound, Animations, Video Documents are linked together Documents are linked together Non-distributed – all documents stored locally (e.g on CD-Rom). Non-distributed – all documents stored locally (e.g on CD-Rom). Distributed – documents stored at remote servers on the Internet. Distributed – documents stored at remote servers on the Internet.

5. WWW – Identifying a web page A web page is identified by: A web page is identified by: The protocol used to access the web page. The protocol used to access the web page. The computer on which the web page is stored. The computer on which the web page is stored. The TCP port that the server is listening on to allow a client to access the web page. The TCP port that the server is listening on to allow a client to access the web page. Directory pathname of web page on server. Directory pathname of web page on server. Specific syntax for Uniform Resource Locator (URL): protocol://computer_name:port/document_name Specific syntax for Uniform Resource Locator (URL): protocol://computer_name:port/document_name Protocol can be http, ftp, file, mailto. Protocol can be http, ftp, file, mailto. Computer name can be DNS name or IP address. Computer name can be DNS name or IP address. TCP port is optional (http uses port 80 as its default port). TCP port is optional (http uses port 80 as its default port). document_name is path on server to web page (file). document_name is path on server to web page (file).

6. WWW – Identifying a web page (Example) E.g. http://www.yahoo.com/Recreation/Sports/Soccer/index.html E.g. http://www.yahoo.com/Recreation/Sports/Soccer/index.html Protocol is http Protocol is http Computer name or DNS name is www.yahoo.com Computer name or DNS name is www.yahoo.com Port number is the default port for http, i.e. port 80. Port number is the default port for http, i.e. port 80. Document name is /Recreation/Sports/Soccer/index.html Document name is /Recreation/Sports/Soccer/index.html

7. WWW – Hyperlinks between web pages –Each hyperlink is specified in HTML by using a special tag. –An item on a page is associated with another HTML document. –Each link is passive, no action is taken until link is selected. –HTML tags for a hyperlink are and –HTML tags for a hyperlink are and –The linked document is specified by parameter to the tag: HREF="document URL" – Click here to go to GCD web site. – Click here to go to GCD web site. –Whatever is between the HTML tags, and is the highlighted hyperlink.

8. WWW – Client Server Model –The browser is the client, WWW (or web) server is the server. –Browser: The browser makes TCP connection to the web server. The browser makes TCP connection to the web server. The browser sends request for the particular web page that it wishes to display. The browser sends request for the particular web page that it wishes to display. The browser reads the contents of the web page from the TCP connection and displays it in the browsers window. The browser reads the contents of the web page from the TCP connection and displays it in the browsers window. The browser closes the TCP connection used to transfer the web page. The browser closes the TCP connection used to transfer the web page. –Each separate item in a web page (e.g., pictures, audio) require a separate TCP connection. –HyperText Transport Protocol (HTTP) specifies commands that the client (browser) issues to the server (web server) and the responses that the server sends back to the client.

9. HTTP HyperText Transfer Protocol HTTP is the language that web clients and web servers use to talk to each other HTTP is the language that web clients and web servers use to talk to each other –HTTP is largely “under the hood ” information, not normally displayed to the user Each message, whether a request or a response, has three parts: Each message, whether a request or a response, has three parts: 1.The request or the response line (Part I) 2.A header section (Part II) 3.The body of the message (Part III)

10. HTTP HTTP (cont.) “\r\n” Request Or Response Line Optional DataOptional HTTP Header Type of Request Part (I) Additional information such as browser being used, media types accepted Part (II) Delimiter Carriage return Line feed User data e.g. contents of completed form Part (III)

11. HTTP Request messages (Part I) HTTP Request messages are sent from client to server at a particular port (80 is the default) HTTP Request messages are sent from client to server at a particular port (80 is the default) “\r\n”Request LineOptional DataOptional HTTP Header Type of Request (e.g. GET) (Part I) Additional information such as browser being used, media types accepted (Part II) Delimiter Carriage return Line feed User data e.g. contents of completed form (Part III)

12. HTTP Request messages (Part I) HTTP Request messages (Part I) (cont.) The first part of the message is the request line, containing: The first part of the message is the request line, containing: –A method (HTTP command) such as GET or POST –A document address, and –An HTTP version number Example: Example: –GET /index.html HTTP/1.0

13. HTTP Response messages (Part I) HTTP Response messages (Part I) (cont.) HTTP Response messages are sent from server to client. HTTP Response messages are sent from server to client. “\r\n”Status LineOptional DataOptional HTTP Header Success/Failure Indication Number between 200 and 599 (PART I) Type of content returned e.g. text/html or image/gif (PART II) Delimiter Requested Data e.g. web page (PART III)

14. HTTP Response messages (Part I) HTTP Response messages (Part I) (cont.) The Status Line gives information about the success of the previous HTTP Request The Status Line gives information about the success of the previous HTTP Request 100 – 199 Informational 100 – 199 Informational 200 – 299Success 200 – 299Success 300 – 399Redirection – Document has been moved 300 – 399Redirection – Document has been moved 400 – 499Client Error – Bad Request, Unauthorized, Not found 400 – 499Client Error – Bad Request, Unauthorized, Not found 500 – 599Server Error – Internal Error, Service Overloaded 500 – 599Server Error – Internal Error, Service Overloaded Status Line Example: HTTP/1.1 404 Not Found Status Line Example: HTTP/1.1 404 Not Found

15. HTTP Response messages (Part I) HTTP Response messages (Part I) (cont.) Common status codes Common status codes –200 OK Everything worked, here’s the data Everything worked, here’s the data –301 Moved Permanently URI was moved, but here’s the new address for your records URI was moved, but here’s the new address for your records –302 Moved temporarily URL temporarily out of service, keep the old one but use this one for now URL temporarily out of service, keep the old one but use this one for now –400 Bad Request There is a xyntax error in your request There is a xyntax error in your request –403 Forbidden You can’t do this, and we won’t tell you why You can’t do this, and we won’t tell you why –404 Not Found No such document No such document –408 Request Time-out, 504 Gateway Time-out Request took too long to fulfill for some reason Request took too long to fulfill for some reason

16. HTTP Response messages (Part I) HTTP Response messages (Part I) (cont.) The second part of the response is header information, ended by a blank line The second part of the response is header information, ended by a blank line Example: Example: Content-Length: 2532 Connection: Close Server: GWS/2.0 Date: Sun, 01 Dec 2002 21:24:50 GMT Content-Type: text/html Cache-control: private Set-Cookie: PREF=ID=05302a93093ec661:TM=1038777890:LM=1038777890 :S=yNWNjraftUz299RH; expires=Sun, 17-Jan-2038 19:14:07 GMT; path=/; domain=.google.com Content-Length: 2532 Connection: Close Server: GWS/2.0 Date: Sun, 01 Dec 2002 21:24:50 GMT Content-Type: text/html Cache-control: private Set-Cookie: PREF=ID=05302a93093ec661:TM=1038777890:LM=1038777890 :S=yNWNjraftUz299RH; expires=Sun, 17-Jan-2038 19:14:07 GMT; path=/; domain=.google.com

17. HTTP Response messages (Part I) HTTP Response messages (Part I) (cont.) Server: NCSA/1.3 Server: NCSA/1.3 –Name and version of the server Content-Type: type/subtype Content-Type: type/subtype –Should be of a type and subtype specified by the client’s Accept header Set-Cookie: name=value; options Set-Cookie: name=value; options –Requests the client to store a cookie with the given name and value

18. HTTP Header messages (Part II) The second part of a request or response is optional header information, such as: The second part of a request or response is optional header information, such as: –What the client software is –What formats it can accept All information is in the form Name: Value All information is in the form Name: Value Example: Example: User-Agent: Mozilla/2.02Gold (WinNT; I) Accept: image/gif, image/jpeg, */* User-Agent: Mozilla/2.02Gold (WinNT; I) Accept: image/gif, image/jpeg, */* A blank line ends the header A blank line ends the header

19. HTTP Data messages (Part III) The third part of a server request or response is the entity body The third part of a server request or response is the entity body This is often an HTML page This is often an HTML page –But it can also be a jpeg, a gif, plain text, etc.--anything the browser (or other client) is prepared to accept

20. HTTP tag The tag may occur in the of an HTML document The tag may occur in the of an HTML document http-equiv and content typically have the same kinds of values as in the HTTP header http-equiv and content typically have the same kinds of values as in the HTTP header This tag asks the client to pretend that the information actually occurred in the header This tag asks the client to pretend that the information actually occurred in the header –The information is not really in the header –As usual, not all browsers handle this information the same way Example: Example:

21. HTML HTML HyperText Markup Language HTML specifies HTML specifies Major structure of document Major structure of document Formatting instructions for browsers to execute. Formatting instructions for browsers to execute. Hypertext links – Links to other documents Hypertext links – Links to other documents Additional information about document contents Additional information about document contents Two parts to document: Two parts to document: Head contains details about the document. Head contains details about the document. Body contains the information/content of the document. Body contains the information/content of the document.

22. HTML HTML (cont.) Each web page is represented in ASCII text with embedded HTML tags that give formatting instructions to the browser. Each web page is represented in ASCII text with embedded HTML tags that give formatting instructions to the browser. Formatted section begins with tag, Formatted section begins with tag, End of formatted section is indicated by End of formatted section is indicated by

23. HTML Example <HTML><HEAD> Example Page for lecture Example Page for lecture </HEAD><BODY> Lecture notes for today go here! <CENTER> Previous Lecture Previous Lecture Next Lecture Next Lecture Table of contents Table of contents Solutions to Assignments Solutions to Assignments Index of terms Index of terms </TABLE></CENTER></BODY></HTML>

24. Other HTML Tags Headings -, Headings -, Lists Lists - Ordered (numbered) list - Ordered (numbered) list - Unordered (bulleted) list - Unordered (bulleted) list - List item - List item Tables Tables, - Define table, - Define table - Begin row - Begin row - Begin item in row - Begin item in row Parameters Parameters Keyword-value pairs in HTML tags Keyword-value pairs in HTML tags

25. HTML – Embedding Graphics IMG tag specifies insertion of graphic IMG tag specifies insertion of graphic Parameters: Parameters: SRC="filename" SRC="filename" ALIGN= - alignment relative to text ALIGN= - alignment relative to text The above line would insert the image in the file GCD.gif into any web page. The above line would insert the image in the file GCD.gif into any web page. Image must be in format known to browser, e.g., Graphics Interchange Format (GIF), Joint Photographic Experts Group (JPEG), Bitmap etc Image must be in format known to browser, e.g., Graphics Interchange Format (GIF), Joint Photographic Experts Group (JPEG), Bitmap etc

26. Demo

27. Javascript Overview – –History History – –Uses of JavaScript – –Location of Code Location of Code – –Simple Alert Example – –Events – –Events Example

28. What is JavaScript? Language used for adding dynamism to Web pages. Loosely typed: Variables not typed. Object-based: Limited support for based inheritance. Interpreted: Interpreter built into browsers. Modeled after C++. – –Similar syntax

29. What is JavaScript? (cont.) JavaScript can: – –Put dynamic text into an HTML page. – –React to events. E.g. when a user clicks on an HTML element – –Read and write HTML elements. – –Be used to validate data. Saves network traffic and server-side side processing

30. Javascript Javascript History JavaScript created in 1995 by Brendan Eich of Netscape. First used in Netscape 2.0. Originally called “LiveScript.” Changed to “JavaScript” to ride popularity of Java. 1997 European ComputerManufacturers Association (ECMA) released ECMA-262 standard. – –Based on JavaScript 1.1

31. Javascript Javascript Versions

32. Javascript Javascript History (cont.) JavaScript 2.0 is in the works. – –www.mozilla.org – –Under development as of spring 2004 Closely matches the ECMAScript Edition 4 standard. http://www.ecma-international.org.

33. Uses of JavaScript Dynamism takes three forms: – –Events: Allows you to monitor events and change positioning or content based on events. – –Dynamic positioning: Can tell the browser where to place content without using tables. – –Dynamic content: Allows dynamic updating of data at specified time intervals.

34. Location of Code JavaScript may be three places: – –In the element. scripts to be called or when Place event is triggered here event script is loaded before called Ensures script statements

35. Location of Code (cont.) – – In the element. Place scripts to be executed when the page loads here Script generates some or all of the page content script statements

36. Location of Code (cont.) – –External to the HTML file. Maximizes reuse across pages

37. Simple Alert Example Simple JavaScript alert button example. function mywelcome () { alert("Welcome to Mr. X simple JavaScript page."); } Simple JavaScript Example using Alert. document.writeln("Click on the button.")

38. JavaScript - Events One of the primary uses of JavaScript is to make Web pages interactive. – –Responsive to user actions JavaScript provides event handlers. – –Execute segment of code based on occurring within the application events – –E.g., onLoad or onClick Handlers associated with elements. Not all elements support all event handlers.

39. JavaScript Events (cont.) <input type="button" name="clickme" value="Click Here" onClick="window.status='Thanks'; return true;">

40. JavaScript Events (cont.) Event handlers can be categorized into interactive and non into interactive. Interactive: Depends on a user action. – –E.g., onClick Non-interactive: Non-user event. – –E.g., onLoad

41. Server Side or Client Side There are a couple reasons to use server- side validation. The biggest one that people forget is that JavaScript (the engine behind nearly all client-side validation) can be turned off in the web browser. There are a couple reasons to use server- side validation. The biggest one that people forget is that JavaScript (the engine behind nearly all client-side validation) can be turned off in the web browser. A client I was at recently had decided that client-side scripting was a security risk and was therefore not allowed. Without server- side validation in these cases, bad data can get to the database. A client I was at recently had decided that client-side scripting was a security risk and was therefore not allowed. Without server- side validation in these cases, bad data can get to the database.

42. Server Side or Client Side (cont.) Another reason you might do server-side validation is for validation that requires a database. And client-side scripting simply can't do all the validation you might need to do. Another reason you might do server-side validation is for validation that requires a database. And client-side scripting simply can't do all the validation you might need to do. The third reason is to keep the code in one place. That's one reason some developers choose to do all validation on the server. The third reason is to keep the code in one place. That's one reason some developers choose to do all validation on the server.

43. Demo

44. Break

45. Web server Overview Specialized software that responds to client requests by providing resources When users enter URL into Web browsers, they request specific documents from Web server Maps URL to file on server and returns requested Communicates with client using HTTP Introduce Web servers – –Internet Information Services (IIS), Apache Tomcat Web Server and SUN ONE Web Server 6.0

46. Web server – Client Browser communication

47. Web server – Client Browser comm. (cont.) Request headers send from browser HTML form that uses GET Data sent to a HTTP server during a form-based GET request Form Form-based POST request

48. Web Server - Sessions HTTP is a truly stateless protocol Develops are required to provide a higher level mechanism for session mechanism for session-management Passing session information by value (client-side side storage): – –Hidden form elements – –Cookies Passing session information by reference (server-side storage) – –Session-ID passed with each HTTP request through forms – –Session-ID stored in session ID stored in session-cookies residing in client’s memory

49. Web Server – Sessions (cont.) Session lifetime: timeout period Durable state (database storage) vs. nondurable state (memory storage) Web application state:

50. Microsoft Internet Information Services (IIS)

51. .NET Framework

52. Resources & Questions Thanks. Microsoft Resources: Microsoft Resources: –msdn.microsoft.com/IIS6/ msdn.microsoft.com/IIS6/ Contact me: Contact me: –tghazali@sqlmvp.com –www.sqlmvp.com (will be available soon) www.sqlmvp.com Download Presentation : Download Presentation : – www.lebdev.net www.lebdev.net