CC292 Web Application Programming - PowerPoint PPT Presentation

1 / 25
About This Presentation
Title:

CC292 Web Application Programming

Description:

(from http://www.expedia.co.uk) Makes it easier to ... http://www.ebay.co.uk. http://www.amazon.co.uk. http://www.expedia.co.uk. http://www.dell.co.uk ... – PowerPoint PPT presentation

Number of Views:167
Avg rating:3.0/5.0
Slides: 26
Provided by: simonm3
Category:

less

Transcript and Presenter's Notes

Title: 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)
Write a Comment
User Comments (0)
About PowerShow.com