Web Programming

Chapter 1
Outline

Chapter I

 The Fundamentals
 The Internet
 Internet Service and Tools
 Web application
 Web Architecture
 Internet and its services
 TCP/IP Protocols

2 Web Programming
Outline
 Chapter one
 Introduction – Web Engineering, The Internet and Web,
 Architecture of Internet, WWW
 Client Vs Server side web programming
 Terminologies
 Protocol Suite -TCP/IP
 HTTP Overview
 Web Design & Development issues

3 Web Programming
Introduction -Web Engineering
Web Engineering (WebE)

 Concerned with the establishment and use of sound scientific,

engineering, and management principles and disciplined and systematic
approaches to the successful development, deployment, and
maintenance of high quality Web-based systems and applications.

4 Web Programming
Introduction -Internet Programming
 Internet /web Programming Internet-based
application programming (Internet applications)

 IP Aims:
 To keep up with emerging web technologies and languages
 To mine knowledge from internet and WWW(Web)
 To design and develop static and dynamic web based
applications (web sites)
 To improve interaction of the user experience on web
based applications

5 Web Programming
Introduction (cont’d)
 Internet-based Applications
 is a kind of applications that implement a distributed system
architecture using the Internet as a medium of
communication between its components
 Application on the server side communicates directly with the
client
 Application on the client side can be either stand-alone
application or embedded in other applications

6 Web Programming
Introduction (cont’d)
 Web-based Applications
 Uses HTTP protocol
 Application on the server side communicate with clients via a
web server
 Application on the client side is generally in the form of a web
browser

 Internet Programming includes diverse areas such as:

 Protocols for communication networks
 Programming of GUIs or structuring information and
 Interfacing to DBs, and applications

7 Web Programming
Introduction (cont’d)

 Attribute of Web Based Application

 Network concentrated
 Content focused
 Continuous evolution
 Security
 Customizable
 Efficient and Effective

8 Web Programming
Introduction (cont’d)
 Internet/Web programming Advantages
 Ease of development
 Performance (responsiveness, reliability, … )
 Scalability
 Security
 Functionality (Simplicity, coverage of user options, …)

9 Web Programming
Introduction (cont’d)- Web Programming Model
Client Side
Server Side

Cascading
ActiveX HTML
JavaScript Style
Controls Controls
C# Sheets

ASP generates HTML XML

WebForms JavaScript
VBScript
XHTML

10 Web Programming
Introduction (cont’d)- Web Programming

Internet

Database Web Server Web Client

Server-side Programming Client-side Programming

Skills that are often required: Skills that are often required:
• CGI • HTML
• PHP • XHTML
• ASP • DHTML
• Perl • Javascript
• Java Servlet, … • XML …

11 Web Programming
Introduction (cont’d) -Internet
 The Internet – a network of networks
 An infrastructure (connectivity among a large
number of machines world wide)
 The Federal Networking Council (FNC) agrees and
define of the term "Internet“ as: It refers to the
global information system that -
 (i) is logically linked together by a globally unique
address space based on the Internet Protocol (IP)
or its subsequent extensions

12 Web Programming
Introduction (cont’d) - Internet
 (ii)
is able to support communications using the
Transmission Control Protocol/Internet Protocol
(TCP/IP) suite , and/or other IP-compatible protocols;
 (iii) provides accessible, either publicly or privately

13 Web Programming
Introduction (cont’d) -Internet
 Internet Evolution:
 Beginning of 70’s- the DARPA researchers had established the
first experimental WAN which use packet switching involving
Network Control Protocol (NCP), called ARPANET.

 Mid of 70’s –TCP/IP protocol specified in details

 In 80’s – the ARPANET switched from NCP to TCP/IP by the
National Science Foundation(NSF) , and then establish
NSFNET.

 By 90’s , internet connected virtually to all colleges and

universities as internet community for testing and comments

 Early 90’ s the internet was transferred to non-profit org and

become WWW or simple Web
14 Web Programming
Introduction (cont’d) -Internet
Internet Services and Tools
 Several applications:
 E-mal
 www
 File transfer (FTP)
 Remote login
 E-commerce
 Instant messaging (chat)
 Mailing lists etc
 Tools:
 Browsers- used to view docs on WWW
 Web Servers- to response requests from clients for web resources
 Filters – to convert legacy docs to HTML format
 Authoring tools-to edit HTML docs
15 Web Programming
Introduction (cont’d) –Terminologies
 The www or Web is a collection of documents that are
interconnected by hyper-links (websites).
 These documents are accessed by web browsers and provided
by web servers.
 A website
 A collection of resources:
 Web pages (static / dynamic)
 Media files (images, animations, sound, …)
 Style files (CSS)
 Documents (pdf, doc, txt, rtf, …)
 Has a globally unique name
 E.g. www.hu.edu.et
 Stored on machines called web servers
16 Web Programming
Introduction (cont’d) –Terminologies
 A web page
 A document with a mark-up language called HTML
 The basic unit of information storage on the www
 Any page that is hosted on the Internet.

 How does the www work

 Websites (with unique names) are stored on web servers
 Users access these websites via the Internet using software
called a web browser.
 A user sends requests for resources from a server with the
help of the a user agent (browser)
 The server sends the requested resource to the user agent
 The user agent extracts the resource for the user to view.
17 Web Programming
How it Works ….?
 Introduction (cont’d) –Terminologies
 Software involved:
 At the server:
 Web server software : listens for incoming requests for resources
from clients and serves the requests
 Apache - open source
 IIS (Internet Information Services) – Microsoft
 Tomcat
 Squid
 ---
 At the client:
 Web browser : sends/receives requests/responses to/from web
servers on behalf of the client and renders content as necessary
 Microsoft Internet Explorer
 Mozilla
 Firefox
 Opera
 Safari
19 … Web Programming
Introduction (cont’d) –Terminologies
 Communication protocol
 HTTP (HyperText Transfer Protocol)
 Client (web browser) and Server (web server) communicate via the
HTTP to exchange request/response messages

 The web is governed by the w3c (world wide web

consortium) (www.w3.org)

20 Web Programming
Introduction (cont’d) –Terminologies
 How are websites uniquely named?
 Using DNS (Domain Name System)
 Resolves a human friendly name (e.g. www.hu.edu.et) to a
machine friendly IP address (e.g. 164.233.187.99)
 “Phone book” of the Internet
 For this purpose, DNS servers store a table containing
name-IP (among other things) pairs and do a look-up
when requested
 A DNS server may communicate with other server to
resolve a given name
 There are about 13 root DNS servers (http://www.root-servers.org/)

21 Web Programming
Introduction (cont’d) –Terminologies
 DNS name structure
 Hierarchical in nature (e.g.. cs.hu.edu.et)
 cs is under hu (a subdomain of hu), hu is under edu, edu is under et.
 The highest level is the last component of the DNS address
 Labels separated by . (dot)
 The last (lowest) labels of a DNS name can be:
 Three letter code top level domains (TLDs): indicating the type of
organization
 com, edu, gov, net, org, biz, …
 Two letter country codes (CCTLDs): indicating the country
 et, us, za, uk, tv, …

22 Web Programming
Introduction (cont’d) –Terminologies
 URL (Uniform Resource Locator)
 The exact address of a resource on the web and has such format:
 <protocol>://<host>[:<port>][<path>][?<query>]
 E.g. 1. http://www.somedomain.com/search.php?q=dns&lang=en

 Protocol – identifies the type of protocol to be used for

communication
 http, ftp, mailto, …
 Host – identifies the machine on which the requested resource is
stored
 Domain names (e.g.. www.hu.edu.et)
 IP address
 Port – identifies the port number of the web server software on
the web server machine
 Default port for http: 80
 Path – identifies the name and path of the resource on the server
 Query – specifies parameters, if any, that should be sent to the
server along with the request
 has the form: ?var_name1=value1&var_name2=value2&…
23 Web Programming
Introduction (cont’d) –Terminologies
 Read about URI and URN

24 Web Programming
Protocol Suite
TCP/IP Protocols Suite
 Protocol is a collection of rules and procedures for two
computers to exchange digital information(docs).
 Consists of 4 layers
Application Telnet, FTP, HTTP, SMTP, DNS, …
Transport TCP, UDP
Internet IP,ARP, ICMP, IGMP
Host to network
Ethernet,Token Ring

TCP- provides error detection and correction, automatic

repeat requests, reliable end-to-end communications
IP-provide the methods for distributing data in pkts , to
destination via different routes.
26 Web Programming
TCP/IP layers
 Application– used to implement specific internet
applications such as file/mail transfer, remote login, …
 Transport- used for sequencing transmitting, and
recovering of pkts ; error checking and flow control
 Internet- helps for packaging, managing, addressing and
routing
 Network (host to network) interface- responsible
for sending and receiving of TCP/IP pkts on the network
medium

27 Web Programming
Advantage of TCP/IP protocols
 It is the most complete and accepted enterprise networking
protocol
 Offers all modern operating systems- platform indep’t
 Able to connect dissimilar network systems
 Provide standard protocol for the internet
 Provide efficient network traffic management
 Some core TCP/IP related protocols are:
 HTTP
 SMTP
 FTP
 Telnet
 …

28 Web Programming
HyperText Transfer Protocol (HTTP)
 A protocol that enables communication b/n browser and
web server
 The rules governing the conversation between a Web
client and a Web server by providing universal access to
web docs by defining methods and ways of
communications
 A stateless protocol
 Each request a browser sends to a web server is independent of
any other request
 HTTP 1.1(RFC 2616) is the current version of HTTP
 HTTP conversation involves the exchange of HTTP messages.

29 Web Programming
 HTTP Protocol

 Client/Server, Request/Response architecture

 You request a Web page
 e.g. http://www.hu.edu.et/default.asp
 HTTP request
 The Web server responds with data in the form of a Web page
 HTTP response
 Web page is expressed as HTML form and identified by Uniform
Resource Locator (URL), so
 Protocol: http
 Web server: www.hu.edu.et
 Web page: default.asp

 Can also provide parameters: ?name=Leon

30 Web Programming
The HTTP Request/Response-Retrieving a File

31 Web Programming
HTTP Example: Retrieving a File
 Request line
◦ request type (method): GET
◦ path: /usr/bin/image1
◦ HTTP version: 1.1
 client can accept images in GIF and JPEG formats
 status line:
◦ HTTP version: 1.1
◦ status code (a 3 digit number): 200
◦ status phrase: OK (200 OK indicates request is successful)
 Header lines defines:
◦ date: 04-Jan-99
◦ server name: challenger
◦ MIME version: 1.0 - (MIME (Multipurpose Internet Mail Extensions) is an SMTP
extension to allow non-ASCII data to be sent through SMTP.)
◦ length of document: 2048 bytes

32 Web Programming
Message Body
 Used to carry an entity body
 May be divided into chunks and sent
 Optional, i.e. messages are not required to have a
message body
 Some messages cannot even have a message body

 Example of message body:

 A web page

33 Web Programming
HTTP Header
 Contains header fields
 The header fields can be:
 General headers
 Request headers
 Response headers
 Entity headers
 All header fields follow the same generic format
 Each header field consists of a name followed by and
colon (:) and a value:
 Header-name:value
 The order of the header field is insignificant
34 Web Programming
General HTTP Header
 Used to specify properties of the transfer process

 Examples:
 Connection: close – client wants to close the connection
when the first response is complete
 Cache-control – client can specify additional properties if
the requested resource is cached
 Date
 Transfer-Encoding
 …

35 Web Programming
Entity Headers
 Give meta-information about the entity body (message body)
being transferred
 Apply only if a message body exists

 Examples:
 Content-Encoding – indicates type of content encodings
applied (e.g. zipped)
 Content-Language – language of the intended audience
 Content-Length – size of the entity body (message body)
 Expires
 …

36 Web Programming
Request Headers
 Add additional information about the request
 May include information about the client/sender,
including client capability

 Examples:
 Accept - acceptable media types for response
 Accept-Charset – acceptable character set
 User-Agent – client browser
 …

37 Web Programming
Response Headers
 More information, in addition to the status line
 May contain information about the server or
resource

 Examples:
 Age – estimate of time since response was generated
 Location – used to redirect to a different location (URI)
 Proxy-Authenticate – proxy authentication challenge
 Server – information about the web server software
 …

38 Web Programming
HTTP Request
 The request line contains three parts:
 Request method
 Request URI
 HTTP Version

 Request method
 GET (or retrieve) information from the server
 POST (information) back to the server
 HEAD – like GET but only returns meta-information
 PUT (information) at the server
 DELETE (information) from the server

39 Web Programming
HTTP Request (cont’d)

 HTTP Version
 Used by the sender to notify the receiver of its abilities
 Included in the first line of the message
 Format: HTTP/<major>.<minor>
 E.g. HTTP/1.1

 Request URI
 The URI of the resource requested

40 Web Programming
HTTP Response
 The response line contains:
 HTTP version
 Status code
 Status code description

E. g. HTTP/1.1 200 ok

 Status code
 Has 5 categories (from 1,2,3,4, and 5)

41 Web Programming
HTTP Response (cont’d)
 1xx – request received, processing continues
 E.g.
 100 Continue – tells client to continue with a request
 2xx – success, action was successfully received, understood
and accepted
 E.g.
 200 Ok – request has succeeded
 202 Accepted – request accepted but not processed

 3xx – further action must be taken to complete the request

 E.g.
 302 Found – resource found but temporarily moved

42 Web Programming
HTTP Response (cont’d)
 4xx – client error or invalid request
 E.g.
 400 Bad Request – couldn’t understand request
 401 Unauthorized – request requires authorization
 403 Forbidden – client may not have access to the
resource
 5xx – server error occurred
 E.g.
 500 Internal Server Error – server encountered an
unexpected error (error/bug with a server side script)
 505 HTTP Version Not Supported – server doesn’t
support the HTTP version
43 Web Programming
The HTTP Request/Response Model

HTML Codes
Web <html>
…
Request </html>

Response
Client Server
HTTP
Program /
Scripts
HTTP Communication Model
44 Web Programming
 Web Design and Development issues

A successful website is one that helps you meet your business goals!

45 Web Programming
 Plan the site and its structure
 Determine the site’s purpose
 Identify the site contents and target audience
 Plan the structure of site

 Design the look and feel

 Sketching, Prototyping, and Testing the Design

 Arrange strategy of recovery and maintenance

46 Web Programming
Step for effective website design
1. Analyse 4. Implement
• Info / content • User Interaction
• Target Audience • Final Checklist
• Top Checklist • FTP
2. Organise • Fine Tune
• Navigation 5. Maintain
• Content • Marketing
• Page layout • Optimisation
• Page design • Traffic analysis
3. Develop
• Web page layout
• Site layout
• Web page construction
• Graphics techniques
47 Web Programming
 Top 10 website design tips - checklist
 Know your audience
 Keep web pages short
 Limit the amount of text
 Avoid large images
 Use web safe colors
 Clearly identify all links
 Check spelling
 Update and check all links
 Include contact information

48 Web Programming
Requirements:

1.Get a domain name - This is your personal/private

address on the Web. E.g. [email protected]
2.Find a web hosting service- Here is where your website
will reside.
Free vs. Private Web Hosting , e.g.. Ethio Telecom (ETC)
3.Technology -web techs (e.g.. PHP, MySQL, etc…)
4. Design, build and upload your website - The process
of website creation.

49 Web Programming
 Web Services
E-business solutions consultation to small and home-
E-business based businesses at an affordable cost.

Website development, ranging from one to several

Development
pages depending on your needs.

Make your website work better so that others can find

Searches
you on the World Wide Web.

Add shopping carts to existing websites to have the

Shopping
capability of selling products and services online.

Website pages are not automatically updated and

Static Site
with limited interactivity features.

Website pages are automatically updated using

Dynamic Site
database-driven code modifiable by the user.

50 Web Programming