3-Tier Web Architectures Ramakrishnan & Gehrke, Chapter 7 www.w3schools.com www.webdesign.com … Databases & Web Services (P. Baumann) 1 Overview . Three-tier architectures . Presentation tier . Application tier Databases & Web Services (P. Baumann) 2 Components of Data-Intensive Systems . Presentation • Primary interface to the user • Needs to adapt to different display devices (PC, PDA, cell phone, voice access, …) . Application (“business”) logic • Implements business logic (implements complex actions, maintains state between different steps of a workflow) • Accesses different data management systems . Data management • One or more standard database management systems . system architecture determines whether these three components reside on a single system (“tier) or are distributed across several tiers Databases & Web Services (P. Baumann) 3 Client-Server Architectures . Work division: Thin client • Client implements only graphical user interface • Server implements business logic and data management . Work division: Thick client • Client implements both graphical user interface and business logic • Server implements data management Databases & Web Services (P. Baumann) 4 Single-Tier Architectures . All functionality combined into a single tier • usually on a mainframe • User access through dumb terminals . Advantage app_1 app_n • Easy maintenance and administration server . Disadvantages • users expect graphical user interfaces • Heavy load on central system Databases & Web Services (P. Baumann) 5 Disadvantages of Thick Clients . No central place to update the business logic . Security issues: Server needs to trust clients • Access control and authentication needs to be managed at the server • Clients need to leave server database in consistent state • One possibility: Encapsulate all database access into stored procedures . Does not scale to more than several 100s of clients • high data transfer volume between server and client • More than one server creates a problem: x clients, y servers => x*y connections Databases & Web Services (P. Baumann) 6 The Three-Tier Architecture Presentation tier Client Program (Web Browser) Middle tier Application Server Data management tier Database Management System Databases & Web Services (P. Baumann) 7 Advantages of a 3-Tier Architecture . Modularity . Integrated data access • Tiers can be independently • Several database systems handled maintained, modified, replaced transparently at middle tier . Scalability • Central management of connections • Replication at middle tier permits . Easier software development scalability of business logic • Code for business logic is centralized, . Thin clients easier to maintain • well-defined APIs between tiers allow • Only presentation layer at client use of standard components (web browsers), no biz logic interoperability Databases & Web Services (P. Baumann) 9 Overview of Technologies: Client-Side . Contents presented by browser (static) • Text, HTML/CSS, XML/DTD/XSL, images, movies, audio, ... Contents interpreted by the browser • Dynamic HTML; Browser scripting: JavaScript, VBScript, ... Code executed by browser • in browser context: Java applets, ActiveX, … • Dedicated programs in browser context = plug-ins: flash, ... • External programs launched by browser = Helper applications . Security always an issue: keeping client (!) safe from intruders Databases & Web Services (P. Baumann) 10 Overview of Technologies: Server-Side . Static contents (eg, HTML) with executable code • SSI (Server-Side Includes), XSSI • Server-side Scripting (Livewire, ASP, PHP, JSP, ...) . Generated contents • Separate process per call: CGI • Within server context: Fast-CGI, Servlets, ... Server extensions • Google APIs, NSAPI, IISAPI, Apache modules, ... • Database gateways/frontends . Application servers . Security always an issue: keeping server (!) safe from intruders Databases & Web Services (P. Baumann) 11 Technologies HTML, CSS, Javascript Presentation Tier Ajax (Web Server & Browser) Cookies Application Server JSP, Servlets, CGI, … Database Management System Tables, XML, JSON, … Stored Procedures Databases & Web Services (P. Baumann) 12 Lecture Overview . Three-tier architectures . Presentation tier . Application tier Databases & Web Services (P. Baumann) 13 The Presentation Tier . Recall: Functionality of the presentation tier • Primary interface to the user • Needs to adapt to different display devices (PC, PDA, cell phone, voice access?) • For efficiency, simple functionality (ex: input validity checking) . Mechanisms: • HTML Forms • Dynamic HTML / JavaScript • CSS Databases & Web Services (P. Baumann) 14 HTML Forms . Common way to communicate data from client to middle tier . General format of a form: • <form action=“page.jsp” method=“GET” name=“loginForm”> <input type=… value=… name=…> </form> . Components of an HTML form tag: • action: URI that handles the content • method: HTTP GET or POST method • name: Name of the form; can be used in client-side scripts to refer to the form Databases & Web Services (P. Baumann) 15 JavaScript . Goal: Add functionality to the presentation tier . Sample applications: • Detect browser type and load browser-specific page • Browser control: Open new windows, close existing windows (example: pop-ups) • Client-side interaction (conditional forms elements, validation, …) . JavaScript optimal for Web browser because • Built-in engine • Operates directly on “browser brain” = DOM Databases & Web Services (P. Baumann) 16 Inset: HTML and DOM Exercise: <TABLE> draw DOM tree for some HTML snippet <TBODY> <TR> <TD>Shady Grove</TD> <TD>Aeolian</TD> </TR> <TR> <TD>Over the River, Charlie</TD> <TD>Dorian</TD> </TR> </TBODY> </TABLE> Databases & Web Services (P. Baumann) 17 JavaScript: Example . HTML Form: . Associated JavaScript: <form method=”GET“ name=“LoginForm” <script language="javascript"> action="TableOfContents.jsp"> function testEmpty() Login: { loginForm = document.LoginForm <input type="text" name="userid"/> if ( (loginForm.userid.value == "") || Password: (loginForm.password.value == "") ) <input type="password“ name="password"/> { alert( „Error: Empty userid or password.„ ); <input type="submit“ value="Login“ return false; name="submit” onClick=“testEmpty()”/> } <input type=“reset” value=“Clear”/> else </form> return true; } </script> Databases & Web Services (P. Baumann) 18 Lecture Overview . Three-tier architectures . Presentation tier . Application tier Databases & Web Services (P. Baumann) 20 The Middle (Application) Tier . Recall: Functionality of the middle tier • Encodes business logic • Connects to database system(s) • Accepts form input from the presentation tier • Generates output for the presentation tier . Mechanisms: • CGI: Protocol for passing arguments to programs running at the middle tier • Application servers: Runtime environment at the middle tier • Servlets: Java programs at the middle tier • PHP: Program parts in schematic documents (see earlier) • How to maintain state at the middle tier Databases & Web Services (P. Baumann) 21 CGI: Common Gateway Interface . Goal: Transmit arguments from HTML forms to application programs running at the middle tier . Details of the actual CGI protocol unimportant • libraries implement high-level interfaces . Disadvantages: • application program invoked in new process at every invocation (remedy: FastCGI) • No resource sharing (database connections!) between application programs (remedy: application servers) Databases & Web Services (P. Baumann) 22 Application Server: Process Structure Web Browser . Idea: Avoid overhead of CGI HTTP . Manage thread pool of workers, connections, sessions Web Server Application Server C++ JavaBeans JDBC ... ODBC DBMS 1 DBMS 2 Pool of Servlets Databases & Web Services (P. Baumann) 23 Servlets vs. PHP . Servlets • Generate HTML by writing it to the “PrintWriter” object • Code first, webpage second . PHP • Written in HTML, Servlet-like code embedded in the HTML • Webpage first, code second • also executed by web server . Best suited for…? • servlets for “heavy-weight” services with high processing share • PHP for “light-weight” services with few processing Databases & Web Services (P. Baumann) 25 Ex: Java With HTML Inside Vice versa, ie: HTML with PHP inside? See earlier example & your project! Databases & Web Services (P. Baumann) 26 Speed Comparison . Where is the overhead with CGI? • Fork process • Load Perl interpreter • Initialize Perl runtime system • Load payload script • Interpret / precompile&execute script . Sample benchmarks [LAMP book] • CGI vs. mod_perl 36 : 6 = 6 • /cgi-bin vs. /perl 200 : 8 = 25 Databases & Web Services (P. Baumann) 27 Maintaining Client State . http is stateless – but there is information that needs to persist • Old customer orders • “Click trails” of a user‟s movement through a site • Permanent choices a user makes . Advantages • Easy to use: don‟t need anything • Great for static-information applications • Requires no extra memory space . Disadvantage: No record of previous requests means: • No shopping baskets, no user logins • No custom or dynamic content • Security is more difficult to implement Databases & Web Services (P. Baumann) 28 Where to Keep Application State? . Client-side state • Information is stored on the client‟s computer in the form of a cookie . Hidden state • Information is hidden within dynamically created web pages . Server-side state • Information is stored in a database, or in the application layer‟s local memory Databases & Web Services (P. Baumann) 29 Server-Side State . Various