Introduction - Department of Computer Science and Engineering

Download Report

Transcript Introduction - Department of Computer Science and Engineering 

CSC 2720
Building Web Applications
Introduction
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?
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
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)
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.
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.
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
User-Agent : Mozilla/4.5 [en] (WinNT; I)
Accept : image/gif, image/jpeg, */*
Accept-language : en
HTTP/1.0 200 OK
Accept-charset : iso-8859-1, *,
utf-8
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
<html>
…
</html>
The HTTP Request/Response Model
HTML Codes
<html>
…
</html>
Request
Client
Response
Server
Program /
Scripts
Uniform Resource Locator (URL)
 Used to identify resources on the Web
 It has the following general formats:
 Scheme:object-address
Scheme (or protocol)
 Specify what method to access the resource specified in objectaddress 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
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, …
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)
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?
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:
1. The user provides input through a user interface.
2. The program processes the input and updates the
program state (by modifying some data)
3. The program generates output (updates the view and
the user interface) to reflect the new program state.
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
Interface
Controller
Data
A Standalone Software Application
Computer
Interface
Controller
Data
Characteristics
 Written in the same
programming language
 Tightly integrated
 Typically, the interface,
controller and the data
share the same memory
space
A Web Application
 Interface
Client
Interface
HTTP
Server
 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
Controller
 Typically resides on the server
machine and persist in a database
Data
 The client and the server exchange
data via the HTTP protocol
A Web Application (Interface)
Client
Interface
HTTP
Server
 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
Controller
Data
JavaScript
 For manipulating contents in the browser
 Offers "some" programming capabilities
 Can be used to create "fancier" user interface
A Web Application (Controller)
Client
Interface
 Program codes executed on the
server machine
 Typically made up of multiple
programs (one program per file)
HTTP
Server
Controller
Data
 Can be written in different
programming languages
 PHP, Java, JavaScript, C#, C++, etc.
 Also responsible for generating the
interface and view
A Web Application (Data)
Client
 Data are usually persisted in a
database (as oppose to in files)
Interface
HTTP
Server
Controller
Data
 In a 3-tier architecture, the
database management system
(DBMS) is kept on a different
machine.
Server-Side Scripting: How it works
1
Web browser
5
2
Web server
HTML 4
Page
Server-side
programs
3
1. Client sends a HTTP request to the web
Database
Files
server.
2. Server invokes the corresponding
server-side program.
3. The program processes the user input, and optionally,
reads additional data from a database or from files.
4. The program generates the HTML content.
5. Server sends the generated HTML content to the client.
What technologies are available for us to
develop server-side scripts/programs?
Among all the server-side scripting
technologies, which one is the best?
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
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)
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)?
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?
Web and Standalone Applications:
Other Differences

Single user vs. Multiple users

Technical considerations


Platform
Browser compatibility
Developer Roles in a Web Application
 Graphics designers
 Page authors
 Application developers
 Component writers
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
References
 Wiki
 HTML
 HTTP
 URL