CSC 2720 Building Web Applications

1
CSC 2720Building Web Applications

• Introduction

2
Outlines

• What is a web application?
• Fundamental Web Components
• What technologies are involved in building a web
  application?
• How does a web application differ from a
  standalone application?

3
What is a web application?

• A software application that is accessed via web
  over a network such as the Internet or an
  intranet
• e.g., Webmail, online retail sales, online
  auctions, wikis, discussion boards, Weblogs,
  MMORPGs
• (ref Wikipedia)
• A web application relies on some fundamental web
  technologies/components to function
• HTML, URL, HTTP, web clients, web servers

4
HyperText Markup Language (HTML)

• Designed to encode data so they can be published
  as hypertext on the Web
• All web browsers can render HTML formatted data
• Different browsers may render the data
  differently
• Most web applications use HTML to construct the
  user interface
• Format the data for presentation (Output)
• Construct "forms" to acquire input from the user
  (Input)

5
Web Clients

• Typically referring to web browsers
• e.g., Internet Explorer, Mozilla Firefox, Safari,
  Opera,
• Can render HTML formatted data
• Serves as the user interface to web applications
• User uses a web client to access a web
  application
• Most web browsers can also support JavaScript,
  Cascading Style Sheet (CSS), XML, etc.

6
Web Servers

• A web server is a program that serves the HTTP
  requests sent by the web clients.
• A web server waits for client request, processes
  the request, and send a response to the client.
• Tasks a web server can do include
• Serve static documents
• Execute server-side scripts and return the
  generated output
• Provide access control to the resources on the
  server machine
• Monitor and log all access
• e.g. Apache, Microsoft IIS, Apache Tomcat, etc.

7
HyperText Transfer Protocol (HTTP)

• The protocol used between a web client and a web
  server to convey information. For examples,
• A web client requests a resource such as a HTML
  document from a server
• A web server returns the requested document to
  the client.

GET /index.html HTTP/1.0 Host www.anyhost.com Use
r-Agent Mozilla/4.5 en (WinNT I) Accept
image/gif, image/jpeg, / Accept-language
en Accept-charset iso-8859-1, , utf-8
HTTP/1.0 200 OK Last-Modified Mon, 20 Dec 1999
Date Tue, 11 Jan 2002 Status
200 Content-Type text/html Servlet-Engine
Tomcat Web Server Content-Length
59 lthtmlgt lt/htmlgt
8
The HTTP Request/Response Model
HTML Codes lthtmlgt lt/htmlgt
Program / Scripts
9
Uniform Resource Locator (URL)

• Used to identify resources on the Web
• It has the following general formats
• Schemeobject-address
• Scheme (or protocol)
• Specify what method to access the resource
  specified in object-address or how the
  object-address should be interpreted.
• e.g. http, ftp, gopher, telnet, file, mailto,
  news, etc.
• Object-address
• Its format is scheme dependent
• Usually in the form
• //fully-qualified-domain-name/document-path
• e.g. http//www.cse.cuhk.edu.hk/index.html

10
Who defines the Web standards?

• The Web standards are not defined or setup by the
  browser companies or Microsoft, but the World
  Wide Web Consortium (W3C).
• http//www.w3c.org/
• The specifications form the Web standards.
• HTML, CSS, XML, XHTML,

11
What standards/technologies are involved in
building a web application?

• Markup Languages
• HTML, XML, XHTML, etc.
• Cascading Style Sheets (CSS)
• Client-Side Scripting
• JavaScript, Java Applet, Flash
• Server-Side Scripting
• JSP, PHP, ASP.NET, etc.
• Frameworks for building web applications
• .NET, Ruby on Rails, Java Server Faces, Apache
  Strut, etc.
• Database Management Systems
• Web Services, Ajax, etc.
• (For more info about each technology, see
  Wikipedia)

12
How does a web application differ from a
standalone application?

• In terms of architecture?
• In terms of interface (including presentation and
  user interaction)?
• How does the program work for multiple users?
• How does the program work for multiple platforms?

13
Characteristics of A Software Application

• The state of a program is defined by some data.
• Typically, a computer program works by repeatedly
  updating the data in the following manner
• The user provides input through a user interface.
• The program processes the input and updates the
  program state (by modifying some data)
• The program generates output (updates the view
  and the user interface) to reflect the new
  program state.

14
Characteristics of A Software Application

• A typical program consists of
• An interface to present data and interact with
  the user
• A controller (the brain of a program)
• Handles and processes user input
• Contains business logic
• Updates data
• Data that represent the program state

Controller
Interface
Data
15
A Standalone Software Application

• Characteristics
• Written in the same programming language
• Tightly integrated
• Typically, the interface, controller and the data
  share the same memory space

Computer
Controller
Interface
Data
16
A Web Application

• Interface
• Resides on the client machine
• Made up of HTML CSS JavaScript
• Controller
• Resides on the server machine
• Can be written using different programming
  languages
• Data
• Typically resides on the server machine and
  persist in a database
• The client and the server exchange data via the
  HTTP protocol

Client
Interface
HTTP
Server
Controller
Data
17
A Web Application (Interface)

• To be rendered in a browser
• Typically made up of
• HTML
• For describing the structure of a hypertext
  document (which may include images and other
  media objects)
• For creating "form" for accepting user input
• CSS
• For formatting the appearance of the data
• JavaScript
• For manipulating contents in the browser
• Offers "some" programming capabilities
• Can be used to create "fancier" user interface

Client
Interface
HTTP
Server
Controller
Data
18
A Web Application (Controller)

• Program codes executed on the server machine
• Typically made up of multiple programs (one
  program per file)
• Can be written in different programming languages
• PHP, Java, JavaScript, C, C, etc.
• Also responsible for generating the interface and
  view

Client
Interface
HTTP
Server
Controller
Data
19
A Web Application (Data)

• Data are usually persisted in a database (as
  oppose to in files)
• In a 3-tier architecture, the database management
  system (DBMS) is kept on a different machine.

Client
Interface
HTTP
Server
Controller
Data
20
Server-Side Scripting How it works
Web server
2
Web browser
Server-side programs
1
HTML Page
5
4
3
Database
Files

• Client sends a HTTP request to the web server.
• Server invokes the corresponding server-side
  program.

• The program processes the user input, and
  optionally, reads additional data from a database
  or from files.
• The program generates the HTML content.
• Server sends the generated HTML content to the
  client.

21
What technologies are available for us to develop
server-side scripts/programs?Among all the
server-side scripting technologies, which one is
the best?
22
CGI Scripts/Programs

• The Common Gateway Interface (CGI) is a standard
  for a web server to communicate with a
  server-side program.
• The server-side programs are commonly referred to
  as CGI scripts or CGI programs
• CGI scripts can be written in any programming
  languages.
• Commonly found written in Perl, C/C, TCL,
  Visual Basic
• Inconvenience for large-scale production
• Production time
• Execution speed
• Security
• Server-side scripting technologies aim to resolve
  these shortcomings

23
Server-Side Scripting Technologies

• Servers with integrated runtime environment to
  improve performance
• Some popular server-side scripting technologies
  include
• PHP
• ASP.NET (Can be written in C, C, JavaScript,
  Visual Basic)
• Java Servlet and Java Server Page (JSP)

24
Comparing Server-Side Technologies

• Language
• Is it easy to learn / master / debug / make
  mistake?
• Library Support and Integration
• Are the libraries you need readily available?
• Is it easy or cost-effective to integrate the
  technologies into the existing system of your
  company?
• Platform support
• Does it work on different operating systems
  (e.g., Linux, Windows, Mac OS)?

25
Comparing Server-Side Technologies

• Performance and Scalability
• How well does the technology handle large number
  of users (in terms of feasibility, performance
  and cost)?
• Productivity
• How quick can you build web applications with the
  technology once you have mastered it?
• Support of integrated development environment
• A good IDE can greatly reduce learning curve and
  increase productivity.
• Robustness and security
• How reliable is the technology?

26
Web and Standalone ApplicationsOther Differences

• Single user vs. Multiple users
• Technical considerations
• Platform
• Browser compatibility

27
Developer Roles in a Web Application

• Graphics designers
• Page authors
• Application developers
• Component writers

28
Summary

• Understand the basic Web components
• HTML, HTTP, URL, Web client, Web server
• Understand what a web application is
• Understand the architecture of a web application
• Knowing what technologies are involved in
  building a web application

29
References

• Wiki
• HTML
• HTTP
• URL