W EB S YSTEM A RCHITECTURE

1. WEB SYSTEM ARCHITECTURE • Based on the Three-tier model • Has the following components…… Web browser Web server Application sever Backend system Internet

2. Introduction Web Server Web Browser • A web server is specialised software that responds to client (I.e. web browser) requests • Every web site requires a web server to process client requests and ‘serve up’ the pages • Web servers used to service Internet, intranets and extranets

3. System architecture • web server is part of a multi-tier application (also called n-tier application • Functionality is divided into separate tiers or groupings • Tiers can be on same computer or on separate computers • Web applications are often three tiered: Information tier (also called data tier) Middle tier Client tier (user interface tier)

4. Common web system architecture Web Browser Application User interface. The client interacts with the middle tier to make requests and to retrieve data from the information tier Client tier Application tier Controls the interactions between the application clients and applicationdata. Enforces business rules. implements presentation logic. Web server typically supports this tier. Middle tier Database Maintains data for the application. Data typically stores in a relational database management system (RDBMS) Information tier

5. Multi-tier application (n-tier application) • Information tier (data or bottom tier) • Maintains data for the application • Stores data in a relational database management system (RDBMS) • Middle tier • Implements business logic and presentation logic • Control interactions between application clients and application data • Client tier (top tier) • Application’s user interface • Users interact directly with the application through the client tier

6. N-tier Client-Server Architecture

7. Client-Side Scripting versus Server-Side Scripting • Client-side scripts • Validate user input • Reduce requests needed to be passed to server • Access browser • Enhance Web pages with DHTML, ActiveX controls, and applets • Server-side scripts • Executed on server • Generate custom response for clients • Wide range of programmatic capabilities • Access to server-side software that extends server functionality

8. Client Side Programming Key factors • Downloading time if not within 15 sec, it may become unacceptable • Data validation type, range, sequence and business requirement checking • Usability should be kept at high standard

9. Languages used in Client side programming • HTML • XML • DHTML • JAVASCRIPT • VBSCRIPT

10. HTML • Hyper Text Markup Language • Primary document type for the web • Transmitted using the Hyper Text Transfer Protocol • Client sends request string (with parameters) • Server returns a document • Stateless protocol • Describes document content and structure • Precise formatting directives added later • Content and structure in same document • Browser or formatter responsible for rendering • Can partially render malformed documents • Different browsers render differently

11. HTML structure • HTML document is a text based representation of a tree of tags • General structure: • <OUTERTAG attribute1=‘val1’ attribute2=‘val2’> • <INNERTAG attribute3=‘val3’>some text</INNERTAG> • </OUTERTAG>

12. HTML Page Execution You Request an HTML Pagewww.ocstc.org/resumes.htm Server finds and downloads the page Browser displays the page

13. Limitations of HTML • No support for accessibility until HTML 4 • No support for internationalization until HTML 4 • No dynamic content in original definition • No inherent support for different display configurations (e.g., grayscale screen) • Except for alt tag for images • Added in CSS2 • No separation of data, structure and formatting • Until version 4

14. XML • Extensible Markup Language • Based on SGML format • Intended to facilitate data exchange • Documents consist of tags and data • Data is usually untyped characters • Tags have names and attributes • Document has tree structure • Tags are nested • Data areas are considered leafs • One root <?xml version="1.0"?> <person> <name type=“full”>John Doe</name> <tel type=“home”>412-555-4444</tel> <tel type=“work”>412-268-5555</tel> <email>johndoe@anon.net</email> </person>

15. XML Structure • XML documents have no semantics • It is up to the programs using them • XML does not enforce structure • No restriction on possible tags • No restriction on order, repeats, etc. • Mixed content allowed • Text followed by tags followed by text • Allows HTML compatibility (XHTML) • “Well-Formed Document” • Tree structure with proper nesting • Attributes are not repeated in same tag

16. DHTML • DHTML is a marketing buzzword • It is not a W3C standard • Every browser supports different flavor • It is HTML 4 + CSS style sheets + scripting language with access to document model It is used to create dynamic web content for the presentation to the audience

17. JAVA SCRIPT • The most common scripting language • Originally supported by Netscape, eventually by IE • Typically embedded in HTML page • Executable computer code within the HTML content • Interpreted at runtime on the client side • Can be used to dynamically manipulate an HTML document • Has access to the document’s object model • Can react to events • Can be used to dynamically place data in the first place • Often used to validate form data • Weak typing

18. JavaScript Syntax • Code written within <script> element • e.g., <script type="text/javascript"> document.write("Hello World!") </script> • Use src attribute for scripts in external files • Placement determines execution time • Scripts in header must be invoked explicitly • e.g., during events • Scripts in body executed when that part is being processed.

19. JavaScript Syntax • User can declare variables • e.g., var name = “user”; • Variables can be global to the page • User can declare functions • function func(argument1,argument2,…) { some statements } • Function can return values with return • Standard conditionals • if..then..else, switch, ?: operator • Standard loops • while, do..while, for

20. JavaScript Syntax • JavaScript has built-in “Object” types • Variety of operators and built-in functions • Arrays, Booleans, Dates, Math, Strings • Direct access to the HTML DOM model • HTML Elements have script-specific event attributes • e.g., <body onmousedown="whichButton()"> • e.g., <input type="button" onclick="uncheck()" value="Uncheck Checkbox">

21. VBScript • Microsoft’s answer to JavaScript • Never been supported by Netscape • Less in use now • Use <script type="text/vbscript"> • Similar to JavaScript • Follows Visual Basic look and feel • Possible to declare variables • Use “option explicit” to force declaration • Separates procedures and functions

22. Server side programming The most common technologies are • Common Gateway Interface (CGI) • Active Server Page (ASP) • Java Servlet • Java Server Page (JSP)

23. Common Gateway Interface (CGI) • Standard interface allowing web server to delegate page creation to external programs • Any programming language can be used • Compile into executable binary • Run scripts (e.g., perl) with executable intepreter • Arguments passed via environment variables • QUERY_STRING • Everything after the first ? Symbol in the URL • PATH_INFO, PATH_TRANSLATED • Additional information in addition to the page URL • Document returned via standard output • Should return content-type header • Can refer to other document with Location

24. GET vs POST • If you used POST • Form data sent back with the URL defining the script and you read it from standard-input • If you used GET • Form data sent back in a separate environment variable accessible in the web-server • What this means: don’t care since…Use a library call to grab values • E.g. in Perl: cgi-lib.pl which provides a &ReadParse function that creates a map (associative array) with form name/value pairs

25. CGI Limitations • Not appropriate for busy servers • Each program instance is a separate process • Security risks • Only web-master has install privileges • Bad code can cause serious trouble

26. ASP • Active Server Pages • A series of objects and components that are executed onthe web server • Uses a suite of technologies that allows dynamically-generated content • Control of how content is generated from the server to the browsers

27. You Request an ASP Pagewww.ocstc.org/default.asp Server finds the page Server executes ASP commands, converts ASP to HTML/XML as needed, processes HTML/XML Browser displays the page ASP Page Execution

28. ASP Compared to Other Scripting Languages • ASP and /PHP/Perl/CGI execution are roughly equivalent in execution sequence • Compared to VBScript, ASP does not have to worry about browser incompatibility • Compared to JavaScript, don’t have to worry about browser versions or disabling • Compared to Java, don’t have to worry about whether JRE (or MVM) is installed

29. What Does ASP Look Like in Action?

30. Tools You Need to Create ASP Applications • Web Server that Supports ASP • Microsoft Internet Information Server (IIS)—Web services of Windows NT Server 4.0 and Windows 2000 Server • Microsoft Personal Web Server (PWS)— Creates a fully functional subset of IIS 4.0 that can run on all other Windows OS • PWS is an add-on for Windows NT, 95/98/Me • Built-in to Windows 2000/XP PROFESSIONAL • Fundamental knowledge of Visual Basic

31. ASP Application Development Tools • Personal Preferences • Microsoft FrontPage • Allaire HomeSite • Other Tools • Microsoft Access • Visual Basic • Microsoft Visual InterDev • Visual Studio .NET • Other Non-Microsoft Tools (never used them)

32. Major Sites Using ASP • Microsoftwww.microsoft.com • NASDAQwww.nasdaq.com • Beckman Coulterwww.beckmancoulter.com • PC-Mac Connectionwww.pcconnection.com • Ticketmasterwww.ticketmaster.com • State Farm and Allstate Ins. Companieswww.statefarm.com / www.allstate.com

33. Java Servlet • Java analogue of a CGI script • Servlet-enabled server activates servlet • A servlet can service multiple requests in its lifetime • More efficient than creating separate processes • User servlet implements Servlet interface • init(ServletConfig config) • Service(ServletRequest req, ServletResponse res) • destroy() • Preferable to inherit from HttpServlet • Filter infrastructure allows transformation of response

34. Servlets (cont….) • Servlets can interact and share information with other components • They can also invoke other HTTP requests and include their results in their response • Servlets have access to session information • Sessions encoded either as cookies or in URL • API hides details from the servlet programmer • Servlets are good for intermediate service-oriented documents • e.g., XML data from a web service • Servlets are not natural for presentation-oriented documents • Usually small portions of the page are dynamic

35. JSP • JavaServer Pages • Java-based technology that simplifies the development of dynamic websites • Designed around the Java philosophy • Packaged with J2EE • As all XML-based technologies – it separates presentation aspects from programming logic contained in the code

36. JSP Basics • Individual JSP pages are text files stored on the web server • When a page is first requested, the JSP engine uses the page to generate a Servlet • The compiled Servlet is saved and used to service additional requests • When a page is modified, the Servlet is regenerated • Precompilation of pages is also feasible

37. A Simple JSP <HTML> <BODY> Hello, visitor, It is now <%= new java.util.Date().toString() %> </BODY> </HTML> • “new java.util.Date().toString()” • This creates a date object and converts it to a String that can be displayed. • The <% %> element can be used to insert regular Java code to control the flow of a page

38. JSP Features • Not widely supported by web hosting companies • Not a JavaScript, includes all Java technology for use • Real Java, not scripting language • Many deployment choices