CC292 Web Application Programming

1
CC292Web Application Programming

• Simon M. Lucas
• University of Essex
• Spring 2009

2
Web Applications

• Well start upbeat
• Web technology is great!
• Web applications are great!
• Web application technology plays an increasing
  role in all aspects of computing
• But the best is yet to come
• Work hard on this course and be part of the
  continuing web revolution
• Applications are currently transitioning to web
  2.0
• Many organisations are just coming out of the
  dark ages of computing
• Emailing of Word forms is still rampant!

3
Web 1.0

• Traditional web client server interaction model
• User enters interacts with a web page
• Browser sends data to web server
• Server sends data back to browser
• Browser receives the data and updates the page
• Page refresh may be intrusive and irritating

4
Web 2.0

• JavaScript is used extensively in the browser
• Single web-page applications are possible
• Entire page need not be refreshed
• Browser interacts with server by sending and
  receiving small chunks of data
• These update individual components or data items
  on a page
• This is also known as AJAX (misleading but widely
  used term) (Asynchronous JavaScript and XML)
• Two advantages
• Speed fewer data items are exchanged
• Faster network transfer, less work for server and
  browser
• Smoother experience for user less clunky
• This course is mostly focussed on web 1.0, but
  some web 2.0 concepts and techniques will also be
  covered

5
Web Applications

• Dynamic interactive web sites
• Typically with client / server communication
  patterns
• Famous for E-Commerce applications
• But many other applications also
• Webapps are generally
• Easy to use (end-user focussed)
• Familiar frequent use of standard controls
• You dont need a manual to use them!
• Platform and machine independent
• No installation on client machine
• Easy to update (hit refresh!)
• Hard to program???
• Sample CC292 Assignment (may differ this year)

6
Sample Assignment Solutionby Sam
Adamshttp//algoval.essex.ac.uk8080/samadams/pro
ducts.jsp
7
This Course

• A practical course with 60/40 Exam / CW
• Lectures Tues and Fri, 9-10
• Labs Wed 11-1
• 2 assignments
• Lectures introduce and outline material
• Labs are there to support your practical work
• Good GTA support in lab
• Make the most of the labs we can sort out most
  of your problems very quickly!
• You also need to spend a significant amount of
  self study time

8
Web Application Programming

• Covers the design and implementation of web
  applications
• Well take a principled approach (e.g. Once and
  Once Only principle (OaOO) (My favourite
  principle!!!)
• This applies to
• HTML
• CSS
• JavaScript
• Database design
• JSP / Java design
• Well see how as the course proceeds

9
Simple Web Application Architecture

• Database
• (Live Data)

Server
Client (web browser) (HTML) (CSS) (JavaScript) (Ja
va Applet)
Web Server Servlet/JSP Engine (e.g. Tomcat)
File System HTML, CSS, JS
HTTP
10
Client/Server

• Thin-client computing Client a web-browser
• Increasing use of JavaScript on client for more
  dynamic web apps
• Server is a web server application server
  backend database (persistence)
• Well use Tomcat as the web server and
  application server (JSP / Servlet engine)
• A relational DB (MS the DB (any JDBC/ODBC DB is
  ok, e.g. MySql, Postgres etc)
• Also, an Object-Oriented DB (db4o)!!!!!!!!!!

11
Designing Web Applications

• Challenging!!! Many languages to learn!
• Client side design
• visual and logical layout
• Validation
• JavaScript controls and content manipulation
• Server side
• Database design
• Server-side language and design patterns
• Security
• State management
• Performance and Reliability (24/7)
• Toolkits e.g. Google Web Toolkit (GWT) could
  change the web app landscape

12
Main Topics

• HTML (inc. Forms) CSS, JavaScript
• HTTP Simple Web Server
• Java Server Pages (JSP) Servlets
• Writing and using Java support classes
• Database access (Relational OO)
• Transactions and Threads
• XML
• Cookies Session tracking (under the bonnet)

13
Labs

• Every Wednesday (11-1) for 2 hours
• Assignments worth 40 of the module
• Gain valuable practical experience
• Learn very useful skills
• Web Application Programming has a great future
  and you learn most by doing it!

14
Lab Topics

• Client-side design
• HTML and CSS
• JavaScript
• Server-side
• Java Server Pages (JSP), Java support classes
  (and JavaBeans)
• Database connectivity and data aware class design

15
HyperText Markup Language (HTML)

• Transformed the Internet to the Web
• Specifies page layout
• And simple hyperlink and page processing
  semantics
• Specified in conjunction with HTTP the
  hypertext transmission protocol
• Uses a fixed set of tags to specify logical
  document structure
• Tags may have attributes to control appearance

16
Example HTML

• Chapter 1
• Blah blah...
• Chapter 2
• Blah blah...

17
HTML Rendered in a Browser

• Specified with attributes (may breach OaOO)
• Same effect can be achieved with a style-sheet

18
Cascading Style Sheets

• Clean way of specifying style for HTML pages
• May be specified in line, or referenced in a
  separate file
• Separate file good for re-use
• Encourages consistent, good-looking documents
• Reduces file size

19
Example style sheet (in-line)

• h2 text-align center
• Chapter 1
• Blah blah...
• Chapter 2
• Blah blah...

20
JavaScript

• JavaScript ! Java
• Language for specifying client-side interactions
• Form validation
• Simple calculations (menu-pricing e.g. Dell)
• Better controls
• Example JavaScript component date selector why
  I use Expedia!

21
JavaScript Date Control(from http//www.expedia.c
o.uk)

• Makes it easier to visualize dates
• No formatconfusion
• Self validating(no Feb 30th)

22
Java Server Pages (JSP)

• Embeds special JSP tags in HTML web pages
• The tags specify processing to be done on the
  server
• The JSP/servlet engine processes these to produce
  HTML which is then sent to the client
• The client never sees the JSP tags
• Easy to build simple dynamic web pages
• Must be used with caution avoid programming
  logic in JSP pages
• Use Java helper classes instead

23
What we wont do

• PHP
• ASP .NET C
• Ruby on Rails
• JSP Tag Libraries, Java Server Faces
• All widely used or emerging technologies, but we
  cant do everything!
• But you can do many of these in the 3rd year
  course

24
Some Sample Sites

• http//www.lovefilm.com
• http//www.ebay.co.uk
• http//www.amazon.co.uk
• http//www.expedia.co.uk
• http//www.dell.co.uk
• http//www.sodaplay.com
• http//www.allposters.co.uk/ (mind the frames!)
• http//cigames.org

25
Practical Expectations

• Some of the sites on the previous page are quite
  complex and are the heart of each business
• By the end of the course youre expected to be
  able to design and implement web apps with many
  of these features
• Hence very useful skills
• See sample student course work (on-line shop)