Web Programming

(ITec3011)

Chapter 1
Fundamentals of WP

By: Mulat Shiferaw(MSc)

e-mail: [email protected]
1 [email protected]
 Chapter Outline

Fundamentals of WP
Introduction – Web programming, 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

2
Introduction -Internet Programming
 Web Programming(WP) : Used to design and develop
static and dynamic an/a Internet-based and web-based
applications, systems and services.
 Generally WP 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 internet and web
based applications (web sites)
 To improve interaction of the user experience on web based
applications

3
Introduction (cont’d)
 Internet applications is a kind of applications that im-
plement a distributed system architecture using the In-
ternet as a medium of communication between its com-
ponents
 Internet-based Applications
 Using the protocol-existing application or define their own pro-
tocols
 Application on the server side to communicate directly with the
client
 Application on the client side can be either stand-alone applica-
tion or embedded in other applications

4
Introduction (cont’d)
 Web-based Applications
 Using the HTTP protocol
 Application on the server side to 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

5
Introduction (cont’d)
Attribute of Web and Internet Based Applications:-
Network intensive
Content driven
Continuous evolution
Immediacy
Security
Aesthetics
Customizable
Efficient and Effective

6
Introduction (cont’d)
Internet/Web programming Advantages:-
 Points to be discussed are :
 Ease of development
 Performance (responsiveness, reliability, … )
 Scalability
 Security (Desktop, Server, DB, and Network)
 Functionality (Simplicity, breadth of user options, …)

7
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

8
Introduction (cont’d)- Web Programming

Client-side Programming Server-side

Server-side Programming
Programming

Skills that are often required: Skills that are often required:
• HTML • CGI
• XHTML • PHP
• DHTML • ASP
• Javascript • Perl
• VBScript • JSP/F
• XML • Python
• CSS , … • Java Servlet, …

9
Client-Side VS Server-Side Programming

Frontend/Client-Side Backend/Server-Side
Runs on the user computer Runs on the server

Interfacing Processing
Collection of user input, interfacing with Process es data, doing transactions, and
the server complex computetion

Fully Visible Invisible

Scripts can beviewed by the user Scripts are not open to users.

Less Secure More Secure

Generally less secure as users can see and Alot more secure as users don’t see the source
mess with the scripts code, and they usually can not interrupt the
process.

HTML, CSS, JavaScript, VBScript PHP, ASP, Phyton, Ruby, C#, Java

10
 How website looks rather
How website works.
Client-side Programming
 Defined components on the page with HTML
 Make them look pleasing with CSS
 Enable interactivity with JavaScript
 Enhance productivity with use of frameworks

11
Client-side Programming …
• The structure, design, behavior, and content of everything seen
on browser screen when websites, web applications, or mobile
apps are opened up, is implemented by front end developers.

• Responsiveness and performance are two main objectives of the

front end.

• The developer must ensure that the site is responsive i.e. it ap-
pears correctly on devices of all sizes no part of the website
should behave abnormally irrespective of the size of the screen.

12
 How website works.
Server-side Programming
• Backend is the server side of the website.
• It is the part of the website that you cannot see and directly
interact with.
• The parts and characteristics developed by backend de-
signers are indirectly accessed by users through a front-end
application.
• It stores and arranges data, and also makes sure everything
on the client-side of the website works fine.
• Activities, like writing APIs, creating libraries, and working
with system components without user interfaces or even
systems of scientific programming, are also included in the
backend.
13
Server-side Programming …
• Server-side Web programming must deal with dynamic con-
tent. Most web pages are not static since they deal with
searching databases.
Server-side Uses
 It processes the user input from forms
 Displays the requested pages dynamically
 Interaction with servers/storages
 Interaction with databases
 Querying the database
 Encoding of data into HTML
 Operations over databases like delete, update.
14
Architecture of the Web

Internet

Database Web Server Web Client

15
Introduction (cont’d) -Internet
 The Internet – a network of networks
 An infrastructure (connectivity among a large num-
ber of machines world wide)
 The Federal Networking Council (FNC) agrees and de-
fine 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/follow-ons ;

16
Introduction (cont’d) - Internet
 (ii)
is able to support communications using the
Transmission Control Protocol/Internet Protocol
(TCP/IP) suite or its subsequent extensions/follow-
ons , and/or other IP-compatible protocols; and
 (iii) provides, uses or makes accessible, either publicly
or privately, high level services layered on the com-
munications and related infrastructure described
herein.

17
Introduction (cont’d) -Internet
 Internet Evolution:
 Beginning of 70’s- the DARPA researchers had established the first ex-
perimental WAN which use packet switching involving Network Con-
trol 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
Exercise:
 Explain the Evolution of Web briefly.

18
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
19
Introduction (cont’d) –Terminologies
 The www or Web is a collection of documents that are in-
terconnected 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 serves
20
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 renders the resource for the user to view.
21
 How WWW Works?
• The web works on a "client-server model".
• Client-server architecture is an architecture of a computer
network in which many clients (remote processors) request
and receive service from a centralized server (host computer)
• Clients are the typical web user's internet-connected devices
and web-accessing software available on those devices.
Client is capable of receiving information or using a particular
service from the service providers (Servers).
• Server is a remote computer which provides information
(data) or access to particular services. It stores webpages,
sites, or apps. When a client device wants to access a web-
page, a copy of the webpage is downloaded from the server
onto the client machine to be displayed in the user's web
browser.
22
 How WWW Works?
Following steps explains how the web works:
• User enters the URL of the web page in the address bar of web browser.
• The client, which is your computer, more specifically the browser you are
using, sends a request to the Domain Name Server for the corresponding
IP address.
• After receiving IP address, browser sends the request for web page to the
web server using HTTP protocol which specifies the way the browser and
web server communicates.
• Then web server receives request using HTTP protocol and checks if the
page exists, if it exists the server will send the HTML page in response
• Now the web browser receives the web page. It interprets it and display
the contents of web page in web browser’s window.
• If the requested page doesn’t exists then the server sends a 404 Error
code which means the web page doesn’t exist on the server.
23
How it Works ….? WWW
 How it Works ….? WWW …

• An important disadvantage of the client-

server model is that if too many clients
simultaneously request data from the
• An important advantage of the client-server server, it may get overloaded. In addi-
model is that its centralized architecture helps tion to causing network congestion, too
make it easier to protect data with access con- many requests may result in a denial of
trols that are enforced by security policies. service.

25
 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
26 …
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 consor-

tium) (www.w3.org)

27
Introduction (cont’d) –Terminologies
 How are websites uniquely named?
 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 re-
quested
 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/)

28
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)
 Labels can be up to 63 characters long and are case insensitive
 A maximum of 255 characters is allowed in total

 The last (highest) labels of a DNS name can be:

 Three letter code top level domains (TLDs): indicating the type of organi-
zation
 com, edu, gov, net, org, biz, …
 Two letter country codes (CCTLDs): indicating the country
 et, us, za, uk, tv, …

29
29
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 communi-

cation
 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&…
30
Introduction (cont’d) –Terminologies
 Read about URI and URN

 Questions:
 How the internet and web works( and why we care)?
 Why do people want to be ‘on the internet’?
 Is there any difference between OSI and TCP/IP model?

31
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 re-

peat requests, reliable end-to-end communications
IP-provide the methods for distributing data in pkts , to des-
tination via different routes.
32
TCP/IP layers
 Application– used to implement specific internet applica-
tions such as file/mail transfer, remote login, …
 Transport- used for sequencing transmitting, and recover-
ing 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

33
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
 …
34
 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 communica-
tions
 A stateless protocol
 Each request a browser sends to a web server is independent of
any other request or there is no built-in state management be-
tween successive requests.
 HTTP 1.1(RFC 2616) is the current version of HTTP
 HTTP conversation involves the exchange of HTTP messages.
35
 HTTP Protocol
 Client/Server, Request/Response Architec-
ture
 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 Uni-
form Resource Locator (URL), so
 Protocol: http
 Web server: www.hu.edu.et
 Web page: default.asp

 Can also provide parameters: ?name=Leon

36
The HTTP Request/Response-Retrieving a File

37
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

38
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)

39
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

40
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 re-

source
 5xx – server error occurred
 E.g.
 500 Internal Server Error – server encountered an un-
expected error (error/bug with a server side script)
 505 HTTP Version Not Supported – server doesn’t sup-

port the HTTP version

41
Client-Server Architecture: Example

42
Client-Server Architecture: Example
Gets Page
WEB SERVER
<HTML>
<?php PHP code ?>
HTTP Request </HTML>
(url)
Server response Interprets the PHP code
<HTML>
<B>Hello</B>
CLIENT </HTML>
Hello
Browser creates
the web page

43
WebPlatform

44
A successful website is one that helps you meet
your business goals!. Generally the web Design
and development considers the points:-
 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 mainte-
nance

45
Importance of Web Development
 The Internet is ubiquitous
• Accessible through mobile and desktop
• Customers/users need to find you/your business
• Builds trust in your organization and improves your reputa-
tion
• Your website is your first round-the-clock sales person!
 The Website
• Creates first impression of your business
• Create it to suit the needs of your target audience
• Reflects your expertise and reputation
• Can bring business from any part of the world!
• Call to Action – Encourage the users to give you business
 You need Web Development skills to create a Web-
site!
46
 Web Designer Vs. Web Developer --- Web Master
A Web Designer
• Designs the look and feel of a website (creative side of web-
site)
• Decides the layout, fonts, color, images and overall branding
• Creates the visual mock-up of the website
• Rarely does the development of a website!
• A Right-brained (Creative) Person
A Web Developer
• Brings the website mock-up to life on the Internet (develop-
ment side of website)
• Develops the website and hosts on a web server
• Has Web Development Skills: HTML, CSS, JavaScript, React.js,
Node.js
• A Left-brained (Logical) Person
 Gain
47 Web Development skills to become a Web Developer!
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(L,DB, Hi) 5. Test and Evaluate
• Content 6. Maintain
• • Marketing
Page layout
•
• Optimisation
Page design
• Traffic analysis
3. Design
• Web page layout
• Site layout
• Web page construction
• Graphics techniques
48
Other Important Concepts in Web Development
 Cross-browser Compatibility: It is the practice of trying to
make sure your webpage works across as many devices as
possible.
 Responsive Web Design: Responsive web design is the prac-
tice of making your website functionality and layouts flexible
so they can automatically adapt to different browsers.
 Performance : It means getting web sites to load as quickly as
possible, but also making them intuitive and easy to use so
that users don't get frustrated and go somewhere else.
 Accessibility :It means making your websites usable by as
many different kinds of people as possible (related concepts
are diversity and inclusion, and inclusive design).
49
… Important Concepts in Web Development …
 Internationalization: Means making websites usable by peo-
ple from different cultures, who speak different languages to
your own.
 Privacy & Security: These two concepts are related but dif-
ferent.
• Privacy refers to allowing people to go about their business
privately and not spying on them or collecting more of their
data than you absolutely need to.
• Security refers to constructing your website in a secure way
so that malicious users cannot steal information contained
on it from you or your users.

50
Top website design - 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
 Use a site map or directory page
 Update and check all links
 Include contact information

51
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.

52
Web Sites May be:-
E-business solutions consultation to small and home-based businesses at
E-business an affordable cost.

Website development, ranging from one to several pages depending on your

Development
needs.

Make your website work better so that others can find you on the World Wide
Searches
Web.

Add shopping carts to existing websites to have the capability of selling

Shopping
products and services online.

Website pages are not automatically updated and with limited interactivity fea-
Static Site
tures.

Website pages are automatically updated using

Dynamic Site
database-driven code modifiable by the user.

53
THANK YOU!!

54