1

Web Design and Programming (SEng7131)

Compiled by: Tizazu B

Email: [email protected]
 Chapter one: Introduction
2

This Chapter Covers:

 Internet Programming
 Overview of Internet
 World Wide Web
 Web server
 Client-server Architecture
 HTTP, FTP, & other protocols
 Internet programming
3

 Internet programming is Internet-based application programming

(Internet applications)
 It is programming to:
 Access, Control and deliver data across the Internet
 Enable functionality distribution across the Internet
 Internet programming includes broad variety of technologies
spanning diverse areas such as:
 Protocols for communication networks
 Interfacing to databases
 Programming of graphical user interfaces, or structuring
information
 What is Internet
4

 is an international network of networks that links together

millions of computers.
 Term “Internet” means collection of interconnected networks.
 Is commonly referred to as the 'Net'.
 Underlies what is referred to as the information super highway.
 Is currently used for a variety of purposes including electronic
mail, computer file transfers, Remote access, chat and
access to computer programs and soon.
 It contains three physical components
 Computer (Client / Server)
 Networks (communication channels)
 Service
 Overview of Internet
5

Terms
• Web server –
 A Web server is a piece of computer software that can respond to
a browser's request for a page, and deliver the page to the Web
browser through the Internet
• Hypertext –

 Hypertext is text which contains links to other texts. that related items of
information are connected
• Text that, when clicked, sends you to another piece of text or location
• Internet Service Provider (ISP)
• A company that provides dial-in or some other type of access to the Internet for
a monthly fee
• Uniform Resource Locator (URL)
 An address on the Internet, such as http://www.inu.edu.et, which enables
computers and other devices to visit it.
 Overview of Internet
6

 How does it work?

Internet Address
 Each computer connected to the Internet must have a unique address,
known as IP address.
 Internet addresses are in the form xxx.xxx.xxx.xxx where xxx must be a
number from 0 – 255
A machine
running a
browser

Server sends back the

requested page
Browser connects and
requests a page
 Overview of Internet
7

 How does it work?

 Requesting the page http://www.yahoo.com

 The browser broke the URL into 3 parts:

 The protocol ("http")

 The server name ("www.yahoo.com")
 The file name ("index.html")
 Browser  DNS ……Name to IP translation

 Browser Server …..Creation of connection

 Browser sends a GET request to the server, asking for the file

"http:// www.yahoo.com/index.html".
 The server then sends the HTML text for the Web page to the browser

 Browser displays the page based on the HTML tags

 Uses of the Internet
8

 The Internet allows greater flexibility in working hours and

location
 Educational material at all levels from pre-school to
postdoctoral is available from websites
 The low cost and nearly instantaneous sharing of ideas,
knowledge, and skills has made collaborative work
dramatically easier, with the help of collaborative software
 CMS allow collaborating teams to work on shared sets of
documents simultaneously without accidentally destroying
each other's work
 The Internet allows computer users to remotely access
other computers and information stores easily, wherever
they may be, etc…
 Services of Internet
9

 World Wide Web (WWW)

 Communication
 IRC(Internet Relay Chat), Email, List Server (LISTSERV), VoIP, User Network
(USENET), Telnet, Video Conferencing
 Information Retrieval Services
 File Transfer: Gopher, FTP (File Transfer Protocol), Archie Directory Services:
DNS (Domain Number System), LDAP (Lightweight Directory Access
Protocol)
 Automatic Network Address Configuration: DHCP Network Management
Services: ping, traceroute
 Time Services: Network Time Protocol (NTP), The Simple Network Time
Protocol (SNTP)
 Other services: Usenet, News Group, E-commerce
 The most widely used part of the Internet is the World Wide Web (often
abbreviated "WWW" or called "the Web")
 World Wide Web (WWW)
10

 A collection of interlinked documents that are stored on the

Internet and accessed using a common protocol (HTTP)
 Also allow documents to be linked to one another using
hypertext links.
 Architecture
 The WWW is a distributed client-server service, in which a
client using a browser can access a service from a server.
 The service provided is distributed over many locations
called sites.
 No individuals control the web rather than different companies
or institution own (manage) them.
 World Wide Web
11
 World Wide Web
12

 The documents in the WWW can be grouped into three broad categories: static,
dynamic, and active. The category is based on the time the contents of the document
are determined
• Static Documents
 simple it refers to static HTML documents
 A static web page displays the same information for all users, from all
contexts or subject making customization impossible.
• Dynamic Documents (server side)
 referred to server-side dynamic documents.
e.g. Dynamic HTML documents,
 an be customized according to the need of the user!
 When a request arrives the web server runs an application program that
creates the document
• Active Documents (client side)
 sometimes referred as client-side dynamic documents
 the server sends to the browser and that the browser must run locally.
 When it runs, the active document program can interact with the user and
change the display continuously.
 World Wide Web
13

Static document
 Dynamic document using CGI
14

CGI (Common Gateway Interface) is a standard way of running

programs from a Web server. Often, CGI programs are used to
generate pages dynamically or to perform some other action when
someone fills out an HTML form and clicks the submit button.
 World Wide Web
15

Dynamic document using server-side script

 World Wide Web
16

Active document using Java applet

 World Wide Web
17

Active document using client-side script

 Web applications
18

 Very wide range of functionality

 web mail
 online retail sales and auction sites
 wikis, discussion boards, weblogs
 online news, radio, tv, etc….
 multi-player online role-playing games, etc…
 Software components of a web app
 web server
 configuration files
 general processor components
 e.g. PHP, ASP processors
 Web Server
19

 A Web server is a piece of computer software that can respond to a

browser's request for a page, and deliver the page to the Web browser
through the Internet
 Accepts requests from browsers like Netscape and Internet Explorer and
then returns the appropriate HTML documents.
 It is a computer with special software to host web pages and web
applications.
 Example of popular server are
 Apache HTTP server
 IIS (Microsoft Internet Information Service)
 Wamp (apache+ php+ MySQL )
 Netscape Web server, …
 Cont.…
20
 Web Browser
21

 A program that retrieve information from the web

 A window on a computer monitor with webpage
displayed on it.
 Responsible to convert the URL commands.
 Example:
 Microsoft Internet Explorer,
 Opera ,
 Lynx,
 Firefox,
 Google,
 chrome etc
 Web Server and Browser Interaction
22

 A Web Browser acts as an interface between the user and the Web server and
it carries out the following on behalf of the user
 Contacts a web server
 Sends a request for information
 Receives the information and
 Displays it on the user's computer
How Does a Web Server Accept Connections?
 Accept network connections from browsers
 Retrieve content from disk
 Run local CGI programs
 Transmit data back to clients be as fast as possible
 Support multi-threading and multi-processing
 Uniform Resource Locators (URLs)
23

 URL (Uniform Resource Locator)

 The exact address of a resource on the web
 Format:
 <protocol>://<host>[:<port>][<path>][?<query>]
 E.g. 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 (eg. www.google.com)

 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&…
 Cont’d….
24

URL (Uniform Resource Locator)

http://cs.calstatela.edu:8080/cs320stu31/index.html
?? ? ?? ??
 Internet Domain Names
25

Top Level Domain (TLD) names

 com - Originally for commercial organizations, but now used by
individuals, government agencies, and nonprofits as well
 www.google.com
 Net - Internet service providers and other network-related companies
 www.ethio.net
 org - Noncommercial (often nonprofit) organizations
 www.sourceforge.org
 gov - government agencies
 www.ena.gov.et
 mil – military
 https://www.africom.mil/
 edu - Educational domains
 www.inu.edu.et
 Cont…
26

More three-or-more-letter TLDs are coming into use, such as these:

 aero - Airlines

 arpa - Internet infrastructure

 biz - Businesses

 coop - Cooperatives

 info - Anyone

 museum - Museum

 name – Individuals
 Client-Server Architecture
27

 A network architecture in which each computer or process

on the network is either a client or a server
 Components of client/server architecture:
 Communication network

 Clients

 Servers
 Client-Server Architecture
28

 2-tier client-server architecture

 client (browser) web
 Web page request browser
 mainly for presentation of information
 serving mainly static HTML pages
 server (simple web server)

 Web page response

 web-server processing web page
 earliest and low-end web-sites and CGI programs
web
server
 Client-Server Architecture
29

 3-tier client-server architecture

 data persists beyond request and response

 server layer

 expanded functionality
 database connectivity
 user authentication and sessions
 perhaps multi-threading
 client layer (web browser)

 forms interface to interact with data

web
web server database/
browser and file system
programs
 Client-Server Architecture
30

 multi-tier architecture
 middleware

 pre-processing and error handling

 sophisticated transaction management
 multiple middle-ware servers

 server linking to database layer

 web layer

 standard web server

 JSP/Servelets | ASP.NET |PHP
 HTTP(Hyper Text Transfer Protocol)
31

 Application-level protocol for distributed,

collaborative, hypermedia information systems
 Generic, stateless, object-oriented
 Can be used for many tasks, such as name servers &
distributed object management systems
 Underlying language of the web
 HTTP Request Header Fields
32

 the client can specify additional information in the

request
User-Agent specifies the browser version
tells server where the user came from useful for
Referrer
logging and customer tracking
contains email address of user generally not used
From
for privacy reasons
can send username & password used with
Authorization
documents that require authorization
only send document if newer than specified date
If-Modified-Since used for caching
 HTTP Response header fields
33

200 OK request was processed successfully

301 Moved permanently document has been moved

304 Not modified if cached version is up-to-date

400 Bad request syntax error in client’s request

403 Forbidden client is not allowed access (e.g.,

protected)
404 Not found file could not be found

500 Internal server error server failed

503 Service unavailable server is overloaded

 Static vs. Dynamic Pages
34

Static Web 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
Dynamic Web Pages
 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.yahoo.com
 Client-Side and Server-Side Scripting
35

Client-side
 The client is the system on which the Web browser is

running.
 JavaScript is the main client-side scripting language

for the Web.

 Client-side scripts are interpreted by the browser.
 The process with client-side scripting is:
 the user requests a Web page from the server

 the server finds the page and sends it to the user

 the page is displayed on the browser with any
scripts running during or after display.
 Cont’d..…
36

 So client-side scripting is used to make Web pages change after

they arrive at the browser.
 It is useful for making pages a bit more interesting and user-
friendly.
 Client-side scripts rely on the user's computer. If that computer
is slow they may run slowly.
 They may not run at all if the browser does not understand the
scripting language.
 The technologies for client side scripting are:
 HTML
 CSS
 JavaScript
 Applet
 Cont’d..…
37

Server-side
 The server is where the Web page and other content lives.
 The server sends pages to the user/client on request.
 The process is:
 the user requests a Web page from the server

 the script in the page is interpreted by the server creating or

changing the page content to suit the user and the occasion
and/or passing data around
 the page in its final form is sent to the user and then cannot
be changed using server-side scripting
 Cont’d..…
38

 The use of HTML forms or clever links allow data to be sent

to the server and processed. The results may come back as a
second Web page.
 Server-side scripting tends to be used for allowing users to
have individual accounts and providing data from databases.
 It allows a level of privacy, personalization and provision of
information that is very powerful. E-commerce, MMORPGs
and social networking sites all rely heavily on server-side
scripting.
 The technologies for server-side scripting are PHP, ASP.net,
python, perl
 Reading Assignment
39

 Protocols(SMTP, Telnet, FTP…)

 Domain Name System(DNS)

 Common Gate Interface(CGI)

40

Thank You
see you next class!