Web Design & Development

Course goals:
 understand the technology and protocols underlying the
World Wide Web

 become familiar with common tools and techniques for

developing Web-based applications, both client-side and
server-side

 develop a working knowledge of HTML, JavaScript, Java,

and PHP as languages for developing Web applications

1
Reasonable questions
 What is the World Wide Web?

 Is it the same thing as the Internet?

 Who invented it?

 How old is it?

 How does it work?

 What kinds of things can it do?

 What does it have to do with programming?

2
What is World Wide Web?
 The internet is a
network of computer
networks worldwide

 The web is a tool used

to retrieve information
published on the internet

 To navigate the web we

use a browser i.E.
Netscape or internet
explorer

3
 Web  Internet
 Internet: a physical network connecting millions of computers
using the same protocols for sharing/transmitting information (TCP/IP)
◦ in reality, the Internet is a network of smaller networks

 World Wide Web: a collection of interlinked multimedia

documents that are stored on the Internet and accessed using a
common protocol (HTTP)

Key distinction: Internet is hardware; Web is software

Many other Internet-based applications exist

e.g., email, telnet, ftp, usenet, Instant Messenger, Napster, …

4
 History of the Internet
 the idea of a long-distance computer network traces back to early 60's
◦ Licklider at M.I.T.
◦ Baran at Rand
◦ National Physics Laboratory in U.K.

in particular, the Department of Defense was interested in the

development of distributed, decentralized networks
 survivability (i.e., network still functions despite a local attack)
 fault-tolerance (i.e., network still functions despite local failure)

contrast with phone system, electrical system

in 1969, Advanced Research Project Agency funded the ARPANET

 connected computers at UCLA, UCSB, SRI, and Utah
 allowed researchers to share data, communicate
56Kb/sec communications lines (vs. 110 b/sec over phone lines)

5
 Internet growth
 Throughout the 70's, the size of the ARPANET doubled every year
◦ decentralization made adding new computers easy
◦ ~1000 military & academic computers connected by 1984

in 80', U.S. government took a larger role in Internet development

 created NSFNET for academic research in 1986
 ARPANET was retained for military & government computers

by 90's, Internet connected virtually all colleges & universities

 businesses and individuals also connecting as computing costs fell
 ~1,000,000 computers by 1992

in 1992, control of the Internet was transferred to a non-profit org

 Internet Society: Internet Engineering Task Force
Internet Architecture Board
Internet Assigned Number Authority
World-Wide-Web Consortium
...
6
Internet growth (cont.)
Computers on
Year the Internet
Internet has exhibited exponential 2002 162,128,493
growth – doubling in size every 1-2 2000 93,047,785
years (stats from Internet Software 1998 36,739,000
Consortium)
1996 12,881,000

1994 3,212,000

estimated >600 million Internet users in 1992 992,000

2002 (www.nua.ie) 1990 313,000

1988 56,000

1986 5,089

1984 1,024

1982 235

7
Internet growth (cont.)
Date # of Users % World Population
December, 1995 16 millions 0.4 %

December, 1996 36 millions 0.9 %

December, 1997 70 millions 1.7 %
December, 1998 147 millions 3.6 %
December, 1999 248 millions 4.1 %
December, 2000 361 millions 5.8 %
August, 2001 513 millions 8.6 %
September, 2002 587 millions 9.4 %
December, 2003 719 millions 11.1 %
December, 2004 817 millions 12.7 %
December, 2005 1,018 millions 15.7 %
Sept, 2010 1,971 millions 28.8 %
March, 2013 2,749 millions 38.8 %

Ref: http://www.internetworldstats.com/emarketing.htm
8
 History of the Web
 the idea of hypertext (cross-linked and inter-linked
documents) traces back to Vannevar Bush in the 1940's
◦ online hypertext systems began to be developed in 1960's
 e.g., Andy van Dam's FRESS, Doug Englebert's NLS
◦ in 1987, Apple introduced HyperCard

in 1989, Tim Berners-Lee at the European Particle Physics

Laboratory (CERN) designed a hypertext system for linking
documents over the Internet
 designed a (Non-WYSIWYG) language for specifying document content
• which evolved into HyperText Markup Language (HTML)
 designed a protocol for downloading documents and interpreting the content
• which evolved into HyperText Transfer Protocol (HTTP)
 implemented the first browser -- text-based, no embedded media

the Web was born!

9
History of the Web (cont.)
 the Web was an obscure, European research tool until 1993

 in 1993, Marc Andreessen (at the National Center for

Supercomputing Applications) developed Mosaic, the first graphical
Web browser
◦ the intuitive, clickable interface made hypertext accessible to the
masses
◦ made the integration of multimedia (images, video, sound, …) much
easier

◦ Andreessen left NCSA to found Netscape in 1994

 cheap/free browser popularized the Web (75% market share in 1996)
 in 1995, Microsoft came out with Internet Explorer
 Netscape bought by AOL in 1999 for $10 billion in stock

 today, the Web is the most visible aspect of the Internet

10
Web growth
Computers on Web Servers on
Year the Internet the Internet
Statsfrom
Netcraft Web Server Survey. 2002 162,128,493 33,082,657

2000 93,047,785 18,169,498

1998 36,739,000 4,279,000

1996 12,881,000 300,000

IE
Netscape 1994 3,212,000 3,000
Mosaic 1992 992,000 50

recent estimates suggest 40-50 M Web sites, with 4-5 B

Web pages!
11
 Static vs. dynamic pages
 most Web pages are static
◦ contents (text/links/images) are the same each time it is accessed
e.g., online documents, most homepages
HyperText Markup Language (HTML) is used to specify text/image format

as the Web moves towards online services and e-commerce, Web

pages must also provide dynamic content
 pages must be fluid, changeable (e.g., rotating banners)
 must be able to react to the user's actions, request and process info, tailor
services
e.g., amazon.com, www.thehungersite.com

this course is about applying your programming skills to the

development of dynamic Web pages and applications

12
 Client-side programming
can download program with Web page, execute on client machine
 simple, generic, but insecure

 JavaScript
◦ a scripting language for Web pages, developed by Netscape in 1995
◦ uses a C++/Java-like syntax, so familiar to programmers, but simpler
◦ good for adding dynamic features to Web page, controlling forms
and GUI
◦ see www.creighton.edu/~davereed/Memory

Java applets
 can define small, special-purpose programs in Java called applets
 provides full expressive power of Java (but more overhead)
 good for more complex tasks or data heavy tasks, such as graphics
 see
www.creighton.edu/~davereed/csc107.F03/Labs/MontePI.html

13
 Server-side programming
can store and execute program on Web server, link from Web page
 more complex, requires server privileges, but secure

 CGI programming
◦ programs can be written to conform to the Common Gateway Interface
◦ when a Web page submits, data from the page is sent as input to the CGI program
◦ CGI program executes on server, sends its results back to browser as a Web page

◦ good if computation is large/complex or requires access to private data

Active Server Pages, Java Servlets, PHP, Server Side Includes

 vendor-specific alternatives to CGI
 provide many of the same capabilities but using HTML-like tags

14
Introduction to Web Development

 In 1990 and 1991,Tim Berners-Lee created the

World Wide Web at the European Laboratory for
Particle Physics (CERN) in Geneva, Switzerland

 The original purpose of the World Wide Web

(WWW) was to provide easy access to cross-
referenced documents that existed on the
CERN computer network

 Hypertext linking allows you to quickly open

other Web pages
15
Introduction to Web Development
(continued)
 Web pages are displayed using a program
called a Web browser
 A Web server is a computer that
delivers Web pages
 The most popular Web server software
is Apache HTTP Server (Apache)
 The second most popular Web server is
Microsoft Internet Information Services
(IIS) for Windows
Web Communication Protocols
 A Web page is identified by a unique
address called the URL
 Each URL consists of two basic parts:
◦ A protocol (usually HTTP) and
◦ Either the domain name for a Web server
or a Web server’s Internet Protocol
address
 Hypertext Transfer Protocol (HTTP)
manages the hypertext links that are
used to navigate the Web
Web Communication Protocols
(continued)
 A host refers to a computer system that
is being accessed by a remote computer
 A domain name is a unique address
used for identifying a computer such as a
Web server on the Internet
 The domain identifier identifies the
type of institution or organization (.biz,
.com, .edu, .org)
 An Internet Protocol, or IP address,
is another way to identify computers or
devices connected to the Internet
Web Communication Protocols
(continued)
 An IP address consists of a series of four
groups of numbers separated by periods
 Each Internet domain name is associated with
a unique IP address
 HTTP is a component of Transmission
Control Protocol/Internet Protocol
(TCP/IP)
 Hypertext Transfer Protocol Secure
(HTTPS) provides secure Internet
connections for transactions that require
security and privacy
Web Communication Protocols
(continued)
Part of Web Domain Identifier

http://www.google.com/help/index.html

Protocol Domain name Directory Filename

Figure 1-4 Sample URL

Publishing Your Web Site
 Web Hosting:
◦ The publication of a Web site for public
access
◦ Internet access (cable modem, DSL, satellite,
dial-up modem, ISP)
 Internet Service Provider (ISP):
◦ Provides access to the Internet along with
other types of services such as e-mail
Publishing Your Web Site (continued)
 ISP advantages to hosting a Web site:
◦ Extremely fast Internet connections using
advanced fiber-optic connections
◦ Large and powerful Web servers and the
expertise and manpower to maintain and
manage them
 A domain name is a unique address
used for identifying a computer, such as a
Web server on the Internet
Publishing Your Web Site
(continued)
 Domain name registration
◦ Pick a domain name that is similar to your
business name or that describes your Web
site
◦ You cannot use a domain name that is
already in use or a trademarked name
◦ Contact a domain name registrar to find
out the availability of a domain name and
register it
◦ Domain names are stored in a master
database that is maintained by the InterNIC
Publishing Your Web Site
(continued)
 Domain name registration
(continued)
◦ For a fee, domain names can be registered
for a specified period of time
◦ Most hosting sites provide registration
service for you
◦ After you register your domain name, notify
your ISP of your domain information
Internet Protocols
 HTTP
 Original web communication protocol used to transfer
information from a www page

 Request-Response type
◦ Client (browser) will open a connection to a server and then
send a request using a very specific format
◦ Server will respond and close the connection

 Stateless
◦ Does not maintain any connection information between
transaction information

 Feature
◦ Negotiation of data representation, allowing systems to build
indepently of the data being transferred
 TCP/IP
 Transmission Control Protocol over Internet Protocol

 IP ensures that data packets reach the destination from the

source of communication

 Not necessarily data packets follow the same path

 TCP keeps track of these packets, and manages the assembling

of these packets to form the original message

 Thus, both TCP and IP work together to ensure that effective

transmission of data over the internet
Publishing Your Web Site
(continued)
 File Transfer Protocol (FTP)
◦ Is a TCP/IP protocol used for transferring
files across the Internet
◦ Transfers files between an FTP client (your
computer) and an FTP server (a server
capable of running FTP)
◦ The vehicle that allows you to get your Web
page files to the Web server

28 PHP Programming with MySQL

Publishing Your Web Site
(continued)
 File Transfer Protocol (continued)
◦ Your ISP provides a username and password
to log on to the FTP site and upload files to
the FTP server
◦ Examples of FTP clients include Firefox and
Internet Explorer and WinScp
 Use your browser to log on to an FTP server and
upload your files

29 PHP Programming with MySQL

SERVER/ WEB SERVER
 Computers which store web pages into
directories and files stored on HDD of a
central computer known as “Server”
◦ Act like service provider
 Server runs special software “Web
Server”
◦ Website management
◦ Accept client request for information
◦ Respond to client’s request by providing the
page with required information
30
WEB CLIENT/ BROWSER
 Computers that offer the faculty to read
information stored in web pages “Web
Client”
 Web Client runs special software
“Browser”
◦ Connect to an appropriate server
◦ Query the server for information to be read
◦ Provide an interface to read information
returned by server

31
Browser Communication with Web
Server

Four Step HTTP Transaction

32
1. Establish Connection
 Connection is required before exchanging information
 TCP/IP is used to let computers establish a link between
Web Server and web browser over internet
 Client must have IP of Server & sub protocol “http, ftp etc”
 Client will try to locate server based on IP and establish a
connection
◦ Protocol://IP address : port No
 Every protocol has specific port No.

33
2. REQUEST & 3. RESPONSE
 Protocol://IP address : port No/ web page name
 When a browser connects to web server using
appropriate protocol name. Web Server treats it
as a request.
 Request can be of two folds
 Web Page itself
 The request for objects referenced by web page (images, audio,
video etc)
 HTTP request is received, web server try to
locate web page requested
 If found responds by providing web page
 If not, error message is sent as response

34
2. REQUEST & 3. RESPONSE
 After sending web page, the browser reset the
connection with browser.
 After receiving web page, the browser identifies
external objects specified with web page
 Send request to server for external objects
associated with page.
 Such request will result in connection being re
established with Web Server & request being sent
by browser
 Web Server responds to request being sent by
browser
35
4. Connection Termination
 Server’s responsibility to terminate
TCP/IP connection with browser after it
responds to browser’s request.
 Both must manage unexpected closure of
connection any time.
◦ If browser is closed
◦ Crash of browser or Web Server

36
WebSite (Web Brouchers)
vs
Web Application
Web Brochures vs. Web Applications

WebSite (Web Brochures ) Web Applications

Goal Information: Web interface to any

Text, graphics, tables application
Interaction: Data entry, data
selection, checking, ordering

Emphasis Professional look, graphic Optimal support for the work

design flow
Implementation Few interaction steps, mostly Usually interacts with data
static pages (e.g. data entries) source
Navigation (browsing) - many Incorporates business logic
integrated hyperlinks with May contain simple or
jumps to other pages complex navigation
Dynamic behaviour
Web Brochures vs. Web Applications

Web Brochures Web Applications

Deployment WWW May present on companies

LAN or WWW

Examples Apps University Web Sites, Amazon.com

Personal Home Page etc. Purchasing System
Address Book etc
c
Advantages of Using
Web Applications

 Allows you to browse a wide

variety of internet sources

 Instantaneous connections to
internet sites world wide
Disadvantages of Using
Web Applications
 Connections can be slow or busy

 No standard methods of
organization

 Out-of -date materials may not be

removed

 Contents can be (maliciously)

altered

 Sites can simply be

moved/removed
 Web Application Architecture
Layers

Figure shows a simplified view of one application and its layers.

Layers
 It is important to note that the layers are merely logical groupings of the
software components that make up the application or service.

 They help to differentiate between the different kinds of tasks performed

by the components.

 The make it easier to design reusability into the solution.

 Each logical layer contains a number of discrete component types grouped

into sublayers, with each sublayer performing a specific kind of task.

 By identifying the generic kinds of components that exist in most solutions,

you can construct a meaningful map of an application or service, and then
use this map as a blueprint for your design.
Evolution of Enterprise
Application Framework for C/S Arc
 Single tier

 Two tier

 Three tier
◦ RPC based
◦ Remote object based
◦ Three tier (HTML browser and Web server)
◦ Proprietary application server
◦ Standard application server

 N-Tier
Client-server architectures
1-tier Architecture
 Entire application exists on single node
◦ Installed on individual machines

 Dumb terminals are directly connected to mainframe

 Centralized model (as opposed distributed model)

◦ Presentation, business logic, and data access are
intertwined in one monolithic mainframe
application

 Types of systems
◦ Standalone executable
◦ Mainframe applications
 Client-server architectures
1-tier Evaluation

 Advantages
◦ Simple to build
◦ Natural
◦ No client side management is required
◦ Data consistency is easy to achieve

 Disadvantages
◦ Facilitates very little reuse
◦ Maintenance can be expensive
◦ Single point of failure
◦ Scaling systems requires buying bigger, costly hardware
 Client-server architectures
2-tier Architecture
 Client Server Applications

◦ The client and server can be heterogeneous

 Different implementation languages
 Different operating systems

◦ The roles can be transient

◦ Fat client – server only manages data

 talk to back end database
 SQL queries sent, raw data returned
 Some Windows GUI based application

◦ Thin Client – server manages data and business logic

 Browser – server manages presentation too
Client-server architectures
2-Tier Thin and fat clients
A client-server system

c2 c3 c4 c12
c11
Server p rocess

c1 s1 s4

c10
c5
Client p rocess
s2 s3 c9

c6
c7 c8
 Client-server architectures
2-tier Evaluation

 Advantages
◦ Modifications on server propagated to clients
◦ Can distribute processing load
◦ Better scalability by adding server nodes and clients
◦ Database type independence

 Disadvantages
◦ Client nodes require more computing power
◦ Development and maintenance more complex
◦ Presentation, data model, business logic are intertwined (at client side),
difficult for updates and maintenance
◦ Data Model is “tightly coupled” to every client: If DB Schema changes, all
clients break
◦ Updates have to be deployed to all clients making System maintenance
nightmare
◦ DB connection for every client, thus difficult to scale
◦ Raw data transferred to client for processing causes high network traffic
A client-server ATM system

AT M

AT M Account serv er

Tele- Custo mer

p rocessing acco unt
mon ito r database

AT M

AT M
 3-tier Architecture (General)

 Applications are generally partitioned as Client, Control (business) and

Data Components

 In 3-Tier
◦ Each logical partition maps to a layer in the system
 Modeling layers and software layers match 1-to-1
 Each layer implemented with appropriate technologies
 Layers have their own internal architectures
3-tier Evaluation

 Advantages
◦ Complete separation of concerns
◦ Control logic can be reused by client applications
◦ Caches results in the controller layer
◦ Maximum flexibility for enterprise-wide applications

 Disadvantages
◦ Difficult to integrate legacy stovepipes which represent large investment
◦ Complexity
◦ Speed decreases with levels of indirection and latency
◦ Increases cost and development time
◦ Lack of knowledgeable developers and managers
A 3-tier C/S architecture
An internet banking system

Client HTT P interaction

Web server Database server

Client
SQL query
Account serv ice Custo mer
SQL acco unt
p rov isio n
database
Client

Client
 N-tier (multi-tier & multi-layered) Architecture

 Layers added for better separation of concerns

• Every layer does a specified task, which improves cohesion and

lowers coupling

• Application can be divided among developers with well defined

roles.

• Layers and Tiers need not have 1-1 mapping. 3-tier is popular as its
maps to typical IT problems

• For example a fortune five company uses

• JSP-Servlet-Handler-Translator-EJB-DAO layers
• These layers are deployed on three physical tiers which are
• Thin client  Web + Application server Database Tiers
HTML Documents
 Web pages are created using Hypertext
Markup Language (HTML)
 Web pages are commonly referred to as
HTML pages or documents
 A markup language is a set of
characters or symbols that define a
document’s logical structure
 HTML is based on an older language
called Standard Generalized Markup
Language (SGML)
HTML Documents (continued)
 Like SGML, HTML was originally
designed as a way of defining the
elements in a document independent of
how they would appear
 HTML has evolved into a language that
defines how elements should appear in a
Web browser
 Understanding HTML is critical in
learning how to write a web application
along with the server programming
Basic HTML Syntax
 HTML documents are text documents that
contain formatting instructions called tags
 HTML tags include:
◦ Formatting commands (boldface or italic)
◦ Controls that allow user input (option buttons or
check boxes)
 Tags are enclosed in brackets (< >) and consist
of an opening tag and a closing tag
 Tutorial for learning HTML
◦ http://www.htmldog.com/
◦ http://www.w3schools.com/html/DEFAULT.asp
Working with Well-Formed
Web Pages
 HTML became an Internet standard in
1993 with the release of version 1.0
 The current version of HTML (4.01) was
released in 1999
 HTML 4.01 is the last version of the
HTML language and is being replaced
with extensible hypertext markup
language (XHTML)
 HTML is not suitable for user agents
other than Web browsers
62 PHP Programming with MySQL