CICS 515 b Internet Programming. Mike Feeley

Transcription

1 CICS 515 b Internet Programming Mike Feeley

2 Overview of course web resources learn to use key web technology HTML Javascript XML PHP, Ruby and Java Server Scripting MySQL we ll build an interesting web application group design individual implementation you ll get a grade 30% for homework 20% for midterm 50% for final

3 Web Application Architecture web server Apache, IIS, etc. database MySql, Oracle, SQL Server, etc. web browser runs on user s machine (client), implements GUI, highly interactive web server implements web protocols, accepts requests from browser, delivers pages to browser database the persistent store for the web application, stores the applications data

4 Model-View-Controller Pattern An architectural and design pattern for building GUI applications. Provides a useful separation of concerns and has direct support in programming languages and development frameworks such as Java Server Pages and Ruby on Rails. Controller View Model Model encapsulates the database and back-end processing of business data independent of View and Controller (i.e., independent of how user interacts with data) View encapsulates the user interface of the application knows about Model data, triggers Controller events to read and write data Controller encapsulates the communication between the View and the Model responds to View events to supplying data from Model or updating Model

5 Programming the Browser HTML CSS JavaScript AJAX hypertext markup language is the language that describes all web pages cascading style sheets add type-based formatting to HTML java-like script that runs in browser does simple gui-related stuff asynchronous JavaScript with XML Java Applets full java programs that run in browser sandbox Flash animations that run in browser using a plugin

6 Programming the Web Server web server Apache, ISS, etc. XML PHP JSP and JSF Java Servlets extensible markup language, standard for formatting typed data php hypertext preprocessor, web server scripting language server scripting in Java java server-side programming Ruby and Rails object-oriented scripting language and web development framework ASP active server pages, microsoft s server scripting language

7 Programming the Database database MySql, Oracle, SQL Server, etc. SQL relational-database language

8 Design Considerations structural design pages, their layout, flow among them aesthetic content and artwork database and business rules design database scheme develop business rules for data types, operations etc. user interface design GUI design elements, user interaction and client-side computation web server server side computation to implement business rules and integrate GUI with database

9 Web 2.0 its what s really cool on the web today social networking wikis folksonomies blogs e.g., facebook, wikipedia, flickr, myspace, youtube, google everything we can be cool too course wiki your course project about Web 2.0 in Web 2.0 google Web 2.0 wikipedia Web 2.0 YouTube

10 The Network

11 Network protocol specifications for web URL uniform resource locator globally unique name for an HTTP resource <PROTOCOL-NAME>://<IP-DOMAIN-NAME>/<LOCAL-HOST-NAME> HTTP hypertext transfer protocol layer-7 (application-layer) protocol for HTML document transfer typically uses TCP/IP for transport/network layers defines the format of web messages, there are - HEAD requests header part of specified resource only - GET requests a complete representation of the specified resource (web page) - POST submits data to be processed to the specified resource - PUT uploads a representation of the specified resource - DELETE deletes the specified resource - TRACE echos back request from the remote endpoint - OPTIONS requests a list of the HTTP resources supported by the specified server - CONNECT convert connection to a transparent TCP tunnel (usually for HTTPS)

12 HTTPS indicates the named resources should be accessed using a secure socket default TCP port is 443 uses encrypted secure socket layer uses public-key cryptography to authenticate specified server uses symmetric-key cryptography to ensure connection privacy otherwise its just HTTP

13 Security Considerations privacy integrity authentication send credit card number to company server without it being stolen ensure credit card number is not changed on way to server you and company must be certain of each other s identity nonrepudiation legally provable that message was sent and received Cryptography an algorithm that converts text => cypher text => text at least part of the algorithm is known only to those permitted to see text it is impractical to derive text from cypher text without knowing this secret Share-secret Cryptography (Symmetric) A and B share a secret key to an otherwise public encryption algorithm the algorithm can covert text to cypher text or vice versa e.g., A transforms T using S to {T}S and B transforms {T}S back to T using S for privacy? for authentication?

14 Public Key Cryptography (Asymmetric) crypto algorithm uses two separate keys: one to encrypt and one to decrypt for example - the algorithm has two keys P and S - A knows P and B knows S - A transforms T to {T}P and B transforms {T}P to {{T}P}S == T Using Asymmetric Crypto for Privacy Using Asymmetric Crypto for Authentication

15 Back to HTTPS Digital Certificate every https server has one (or several) includes its public encryption key and identity of certificate authority for attestation Certificate Authority issues digital certificates to companies for a fee will verify company s certificate when any client requests (for free) has a well-know public key (i.e., imbedded in browser or OS) e.g., Verisign HTTPS handshake (or more generally TLS / SSL handshake) Let C be client, S be server and A be certificate authority Let PX and SX be the public and secret keys of X respectively Let {X}Y be the cypher text produced by encrypting text X using key Y Let KXY be a secret encryption key known only to X and Y C => S: hello S => C: [{PS}SA, A] -- the servers digital certificate provided by A C: {{PS}SA}PA -- validates certificate using A s public key C => S: {KCS}PA C <> S: {payload}kca

16 HTML

17 Structure of an HTML document HTML is the language of web pages interpreted by web browser to display page commands and text to be displayed comamnds start with <foo> and end with </foo> and are heirarchical <foo> foo stuff </foo> for example <html> <body> Hello. </body> </html>

18 Formatting text with HTML headings <h1>main Heading</h1> <h2>sub Heading</h2> bolding and italicizing <b>bold</b> <i>italicized</i> links to other pages <a href= > The course web page</a> lists <ul> <li>the first thing</li> <li>the second thing</li> <li>one more thing</li> </ul>

19 paragraphs and line breaks <p>one line<br/>next Line</p> <p>new paragraph</p> tables <table> <tr> <td>a</td><td>b</td> </tr> <tr> <td>c</td><td>d</td> </tr> </table> homework work through HTML Basic section of tutorial at visit your favourite web sites and view web page source in browser (menu item)

20 HTML Form a list of input widgets text fields and text areas radio buttons check boxes selects (pulldowns) submit buttons... <form action=""> Name <input name="name" type="text" size="10"/><br> <input name="gender" type="radio" value="m"/> Male<br> <input name="gender" type="radio" value="f"/> Female<br> <input name="food0" type="checkbox" value="pizza"/> Pizza<br> <input name="food1" type="checkbox" value="beer"/> Beer<br> <input name="confirm" type="submit" value= Order /> </form>

21 drop down boxes defiled by select list of options <form action=""> <select name="cars"> <option value="volvo">volvo</option> <option value="saab">saab</option> <option value="fiat" selected="selected">fiat</option> <option value="audi">audi</option> </select> </form>

22 submitting a form when user hits submit button or hits RETURN key, a new web request is generated this request is either a GET or a POST message, we ll talk about the difference later for now, we ll look at GET messages submitting a form with GET URL of the new request includes key-value list for all form elements key is name of each INPUT and value is the value supplied by the user the base URL is either the same as current page, or one specified in FORM element for example file:///users/feeley/desktop/515/2009s/slides/week%201/1b.html? name=blah&gender=m&food=pizza&food=beer&confirm=submit <form action=""> Name <input name="name" type="text" size="10"><br> <input name="gender" type="radio" value="m"> Male<br> <input name="gender" type="radio" value="f"> Female<br> <input name="food" type="checkbox" value="pizza"> Pizza<br> <input name="food" type="checkbox" value="beer"> Beer<br> <input name="confirm" type="submit"> </form>

23 example <form action=""> <select name="cars"> <option value="volvo">volvo</option> <option value="saab">saab</option> <option value="fiat" selected="selected">fiat</option> <option value="audi">audi</option> </select> </form> <form action=""> <select name="cars"> <option value="volvo">volvo</option> <option value="saab">saab</option> <option value="fiat" selected="selected">fiat</option> <option value="audi">audi</option> </select> <input name= Confirm type= submit value= Buy /> </form>

24 Formatting things HTML does two things structures a document, by grouping into list of hierarchical types gives hints to browser for how data should be formatted when displayed hints are, of course, no longer good enough clash of original idea of HTML and modern reality there are two ways to specify formats: in HTML or in CSS HTML formatting formatting tags can be added to structure elements colour, font, width, height, alignment, position,... <table> <tr><td width="40"><font color="red">this is Red</font></td> <td width="80"><font color="blue">this is Blue</font></td> <td width="20"><font color="green">this is Green</font></td> </tr> </table>

25 CSS formatting cascading style sheets define a set of formatting rules CSS attaches rule to HTML elements by naming the element type (e.g., table etc.) or class class is a tag that can be added to any HTML element class applies to all elements contained by the tagged element CSS can also refer to specific children of named element <html> <head> <style type=text/css> table.mycolortable td:first-child { width: 40; color: red; } table.mycolortable td:first-child+td { width: 80; color: blue; } table.mycolortable td:first-child+td+td { width: 20; color: green; } </style> </head> <body> <table class=mycolortable> <tr><td>this is Red</td> <td>this is Blue</td> <td>this is Green</td> </tr> </table> </body> </html>

26 Or, better... <html> <head> <style type=text/css> td.mycolortableone { width: 40; color: red; } td.mycolortabletwo { width: 80; color: blue; } td.mycolortablethree { width: 20; color: green; } </style> </head> <body> <table> <tr><td class=mycolortableone>this is Red</td> <td class=mycolortabletwo>this is Blue</td> <td class=mycolortablethree>this is Green</td> </tr> </table> </body> </html>

27 in a separate file style.css: td.mycolortableone { width: 40; color: red; } td.mycolortabletwo { width: 80; color: blue; } td.mycolortablethree { width: 20; color: green; } foo.html: <html> <head> <link rel= stylesheet href= style.css type= text/css > </head> <body> <table> <tr><td class=mycolortableone>this is Red</td> <td class=mycolortabletwo>this is Blue</td> <td class=mycolortablethree>this is Green</td> </tr> </table> </body> </html>

28 what are the advantages of using style sheets? what are the advantages of putting CSS in separate file? homework do CSS Basic tutorial at

29 Designing Web Site Structure

30 Designing a web site design goal organize site s pages and the links between them - links include hyper links and also buttons that perform actions to present a consistent organizational theme to users users must be able to orient themselves quickly and not get lost or confused the first step of web design input is creative content and desired web site functionality output is an organization plan for pages and links approach describe pages and inter-page links using UML state charts

31 UML state chart each page is represented by a uniquely named box user login transitions between pages are directed edges between boxes label on edge names link or button that activates that transition user login login logout home pages can be grouped and edges can connected groups or boxes user login login logout home grades

32 example: student grade book users must login to use system enter user name and password some users are instructors some are students can logout from any page or after a timeout period of inactivity student access student can access only their own grade can list all assignments with assigned grade instructor access add new students, manually into form add new assignments, manually into form add new grades for students, manually into form password change user can change their password enter new password twice and old password once for confirmation you: identify pages and links and create a state diagram

33 Database and Business Rule Design

34 Relational database a relational database is set of tables user authentication information (in a table) table schema table name set of column scheme meta information such as primary key, indices etc. column schema column name data type and certain related restrictions on its value table relationship / operation description list operations that will be performed on database informs design of tables and what columns they contain leads to development of a set of queries in query language, typically SQL

35 Business rules a set of constraints on acceptable database values that defines what a consistent state of the database is a set of operations that synthesize or update the database values implemented by code you write for database: types, constraints and built-ins not all constraints implemented here web server: constraints that cannot be easily checked by database (or just aren t) web client: why?

36 example: student grade book users must login to use system enter user name and password some users are instructors some are students can logout from any page or after a timeout period of inactivity student access student can access only their own grade can list all assignments with assigned grade instructor access add new students, manually into form add new assignments, manually into form add new grades for students, manually into form password change user can change their password enter new password twice and old password once for confirmation you: identify tables, columns, table-relationships and business rules

37 The Project

38 lets build something interesting... first step as a class decide what to build and general requirements each person is member of a team management team (admin, tools, support, scheduling, wiki etc.) UML team database and business rules team art and formatting team some additional group work management team can determine what parts of the project are group work (instructor veto) group work is assigned to ad hoc groups on volunteer basis individually implement the application in stages using shared design, content, database schema, css, and group elements

39 Collaboration on Individual work helping each other is strongly encouraged, but there are rules do your own programming list all collaborations in overview document do not ever write down a solution that you can not explain orally to instructor if asked failure on any of these points constitutes academic misconduct

40 Project ideas Discussion Forum users post topics and replies to topics etc. display of topics is threaded users rank topics and replies users have rank based on reputation, which affects the weighting of the rankings they make ranks are displayed and are used to determine display level (full, subject, none, etc) for entry e.g., Digg or SlashDot create an mobile-device interface Project Management System users create projects and sub-projects with deadlines and milestones assigned to users system displays project timelines in various ways and monitors deadlines system performs resource allocation analysis (e.g., how many tasks assigned to each user) system generates alerts when deadlines are near or past due create an mobile-device interface

41 Calendar and Meeting Management maintain a list of free/busy times for users in an appointment calendar automated meeting scheduling among these users meeting requests are confirmed or rejected by users rejecting users can suggest alternative time for meeting system display status in each calendar and handles re-scheduling for rejected meetings create an mobile-device interface Hockey Game Scheduler hockey league consists of many teams that seek to play games against each other web app allows teams to schedule games with each other, considering several constraints - teams can only host games during their scheduled ice times - some teams share ice and so can only schedule reciprocal home-and-away games (one home, one away) - teams have preferences for who they play (or don t play) and may need to balance home-away games with teams - not all dates are ice times are available for games and this can change, and so games may need to be re-scheduled - teams have a target, min and max number of games they wish to play given these constraints, game scheduling can be automatic or manual web app provides notification of game requests, confirmations and cancellations etc. create an mobile-device interface

42 this week s homework read textbook chapters 1 3 do online tutorials on html and css at w2schools group project design choose project specify requirements first crack at UML state charts and scheme start thinking about creative content setup apache/php/mysql environment see course web page for help run test programs provided setup eclipse and myeclipse environment see course web page for help we actually won t need to use this for about 2 weeks, but you can use it now if you like

43 next week simple sever scripting and database access with php read chapters 12 (PHP) and 14 (database) client-side scripting building forms validating business rules in browser interacting with user read chapters 4 (JavaScript) and 5 (JavaScript and HTML)