Lecture Slides for Web Application Design | CSCI 0320, Study notes of Software Engineering

Download Lecture Slides for Web Application Design | CSCI 0320 and more Study notes Software Engineering in PDF only on Docsity! CSCI0320 Introduction to Software Engineering Lecture 12 Web Application Design July 13, 2009 Lecture 12 Page 1 Page 2 Modern Applications • What applications in the past 5 years do you see as the most promising, exciting, interesting, forward looking, …? – IM – Google Maps – Google Streets – Amazon shopping – Ebay – Napster and its successors – iTunes – Skype – Wikipedia July 13, 2009 Lecture 11 Page 5 Normal Applications • User interface integrated with application – High quality, tightly bound • Application reads/writes its own data – Directly to files – Using a database system • Single user – Or small number of communicating users July 13, 2009 Lecture 11 Page 6 Client-Server Applications • Splits this into components – Front end handles the user interface – Back end handles the computation and data – Both are applications themselves • Communication using sockets – Using application protocols (xml) – Using standard protocols (soap, rpc, rmi) • Multiple user – 10-100 users typical July 13, 2009 Lecture 11 Page 7 Web Applications • Like client-server applications – Separate front and back ends • Differences – Restrictions imposed by the web – User interface is the browser • Any browser • Restrictions imposed by the browsers – Handle 1000’s of users July 13, 2009 Lecture 11 Page 10 Web Protocol • Browser requests a page (or a frame) – Using Http POST or GET • With parameters either in the URL (?x=a&y=b) • Or via post data • Server sends down a new page – Replacing the current page (or frame) – Formatted using HTML (XHTML) • How does this compare to other models – What does the front end look like? – Who does what? – How to talk to the actual back end? July 13, 2009 Lecture 11 Page 11 Web Architecture July 13, 2009 Lecture 11 App Back End App Database Browser Web Server Page 12 Web App Issues • How to get code into the web browser • How to get code into the web server • How to get the web server to talk to the application • How to get the browser to talk to the application • How to the the application to talk HTML to the user July 13, 2009 Lecture 11 Page 15 JavaScript • Scripting programming language – Java-like syntax, but NOT Java – GWT lets you program this in Java – No declarations – Dynamic types (strings, numbers, objects) – Tacked on object model • Ability to hook to browser events – Callbacks on input, mouse over, select, … • Functions talk to the browser – Request pages, set parameters – Change properties of current page July 13, 2009 Lecture 11 Page 16 Client-Side Processing • Browsers display HTML – To do this, they build a tree • Corresponding to the HTML structure • This is represented in memory as the DOM • Client code (javascript) can modify this – Effectively modifying the page dynamically – Closer to what a standard UI does • JavaScript can send requests to the server – Without updating the page (hidden frames) – Can interpret the result as a message • XML data for example July 13, 2009 Lecture 11 Page 17 AJAX • Asynchronous JavaScript And XML – Web page with JavaScript – JavaScript sends requests to web server – Response is an XML message – JavaScript reads the XML – JavaScript modifies the DOM to update • Pros and Cons – Highly Interactive interfaces – Dependent on web browser – Code is public, security a concern July 13, 2009 Lecture 11 Page 20 Servlets • URL: http://host/servlet/name?args • Pieces of Java code that run in the server – Just as applets are run in the browser – Dynamically loaded code • From a standard directory • Provided with access to the arguments • Run in a security sandbox – Why would you be concerned here? – Limited access to files, ports, … • Requires special server (tomcat) • GWT generates these as well July 13, 2009 Lecture 11 Page 21 Java Server Pages • Normal HTML page with .jsp extension – Active server pages: .asp extension • HTML with embedded Java code – Preprocessor reads the page • HTML passed along directly • Java code in the page is executed • The code is replaced by its output – Can include and access arbitrary Java packages, etc. • Again with security-based limitations July 13, 2009 Lecture 11 Page 22 Java Server Pages • Cleaner than using servlets – Same power – Easier to generate HTML pages • Java isn’t always the ideal language here – Not the best string handling capabilities – Everything coming in is a string • Continually need to convert to internal types • Need to generate complex output strings – With large sections of fixed data • Not well aligned with Java • Concept of embedding is useful – Perl, javascript, ruby, python, php July 13, 2009 Lecture 11 Page 25 PHP Libraries • Full regular expressions (all types) • Database access (postgresql, mysql, …) • Socket access • String manipulation • Graphics (creating images) • Sessions (web page management) • All available C libraries July 13, 2009 Lecture 11 Page 26 PHP Example • http://dweb-devel/courses/cs032/sample/primes.html • primes.html • result.php • primetest.php July 13, 2009 Lecture 11 Page 27 Rabin-Miller Test • Given an odd integer n – Let n = 2rs+1 with s odd • Choose random a, 1 ≤ a ≤ n-1 • If as ≡ (1 mod n) or a2js ≡ (-1 mod n) – For some 0 ≤ j ≤ r-1 – Then n passes • A prime always passes – A composite has a 50% chance of passing July 13, 2009 Lecture 11 Page 30 Development Strategies • Determine what each component does – Most flexible if done from scratch – Back end often exists in advance • If using a database, determine schema • Develop prototype web pages – User interface first – Static html with sample inputs – Use CSS to allow easy modification – Get the look and feel right – Get the interactions right July 13, 2009 Lecture 11 Page 31 Development Strategies • Decide on technology to use – AJAX or simple JavaScript for the front end – PHP or other for the back end • For PHP – Implement simple PHP interaction pages • Based on static pages – With dummy calls to get back end data – Get the look and feel right – Get the formatting right • For AJAX – Implement the appropriate JavaScript • With dummy back end data pages – Or use GWT July 13, 2009 Lecture 11 Page 32 Development Strategies • Then implement the back end – And produce separate PHP pages to communicate with the back end – Isolate common routines • E.g. database access • Think about security throughout – Session management (cookies, etc.) – SQL injection attacks – Passwords and keeping user information July 13, 2009 Lecture 11