Introduction: Web system architecture- 1,2,3 and n tier architecture, URL, domain name system, overview of HTTP , Web Site Design Issues and Introduction to role of SEO (Search Engine Optimization) on web page development.

1. Introduction to Web Technology

2. Web Programming
• Web programming refers to the writing, markup and
coding involved in Web development, which includes Web
content, Web client and server scripting and network
security.
• The most common languages used for Web programming
are XML, HTML, JavaScript, Perl 5 and PHP.
• Web programming is different from just programming,
which requires interdisciplinary knowledge on the
application area, client and server scripting, and database
technology.

3. Web Programming
• Web programming can be briefly categorized into client and server coding.
• The client side needs programming related to accessing data from users and
providing information. It also needs to ensure there are enough plug-ins to
enrich user experience in a graphic user interface, including security measures.
– To improve user experience and related functionalities on the client side, JavaScript
is usually used. It is an excellent client-side platform for designing and implementing
Web applications.
– HTML5 and CSS3 supports most of the client-side functionality provided by other
application frameworks.
• The server side needs programming mostly related to data retrieval, security
and performance. Some of the tools used here include ASP, Lotus Notes, PHP,
Java and MySQL.
• There are certain tools/platforms that aid in both client- and server-side
programming. Some examples of these are Opa and Tersus.

4. Internet vs. WWW
• Internet is the infrastructure that makes the
WWW work.
• Packet Switching
• TCP/IP Protocol
• Physical Infrastructure
– Fiber-optics lines, wires
– Satellites, Cable Modems
– Routers, Hubs, Network Cards, WiFi systems, etc.

6. Web System Architecture
• All applications have 3 elements
– The User Interface or Presentation layer
– The Application logic or Business Processing Layer
– Data Storage and Access
• Following are the types of Web System
Architecture:
– Single Tier Architecture
– Two-Tier Architecture
– Three –Tier Architecture
– N-Tier Architecture

7. Single Tier or 1-Tier Architecture:
• It is the simplest one as it is equivalent to
running the application on the personal
computer. All of the required components for
an application to run are on a single
application or server.
• Presentation layer, Business logic layer, and
data layer are all located on a single machine.
• Also called monolithic architecture.
• e.g. self contained applet

8. Single Tier or 1-Tier Architecture:
Advantages
• Simplicity- don’t need to
handle any network
protocol, so simpler code
• High Performance-do not
cross any network
• Maintainability-Data stored
at single location and hence
application created are
relatively easy to manage
and implement data
consistency
Disadvantages
• Cant be scaled up handle
multiple user and they do not
provide an easy means of
sharing data across an
enterprise.
• It is very difficult to modify
one of the 3 layer of an
application within a single
tiered application

9. Client Server and 2 tier Web
Architectures
• Typically, when you are browsing the Internet, you will be using
Web Browser software such as Internet Explorer or Mozilla Firefox.
The computer which is running a browser is called a client, whilst
the machine which is providing Web pages is called a server.
• When you dial up to an Internet Service Provider ( ISP ) e.g. Blue
Yonder, Aol, your computer is forming a network connection to a
Web server. In this situation, your computer is in effect a client,
which is linked to an ISP Web server. The web server, as the name
suggests, serves your browser with Web pages (e.g. HTML, ASPX,
JSP pages etc).
• This simple scenario, where the Web server is connected to one or
more clients is known as a 2 tier architecture model.

10. 2-Tier Architecture
Web Server Client
The
Internet
Page Request
Page Request
Web Page Web page
Enter Web
Address
Web page

11. Advantages
• Applications can be easily developed due to
simplicity.
• Maximum user satisfaction is gained with
accurate and fast prototyping of applications
through robust tools.
• Since this contains static business rules it’s more
applicable for homogenous environments.
• Database server and business logic is physically
close, which offers higher performance.

12. Disadvantages
• Heterogeneous environments/Business environments with rapidly
changing rules and regulations are not suitable since the database server
has to handle the business logic which slows down database
performance.
• Since client beholds most of the application logic, problems arise in
controlling the software version and re-distributing of new versions.
• Security wise this is complicated as users need to have separate login
information for every SQL server.
• Scalability: When simultaneous client requests increases application
performance degrades rapidly due to the fact that clients necessitate
separate connections and CPU memory to proceed.
• Change of Database Structure: Most applications used for interaction is
dependent on the database structure creating an issue when re-
designing.

13. 3-Tier architectures
• Generally computing applications consist of three
different and distinct types of functionalities.
– Data Management
– Functional Logic
– Presentation Services

14. 3 Tier Architecture
• Presentation Services: These manifest themselves in the form of
information display and user data input facilities. Generally the
front-end for user interaction. For example logging in requires
interaction in the form of collecting username and password
information using a HTML-form.(Browser or GUI Application)
• Functional logic: Every application includes some data processing
and this may also involve database interactivity. For example user
authentication requires the logic unit to read username-password
combinations from a database and compare until a good
comparison (hopefully) is arrived at.(Web server or Application
Server)
• Data Management: Data, its storage, insertion and retrieval, its
management and alteration is central to computing
applications. For example a database management system (DBMS)
is required for the management of usernames and associated
passwords, their owners, etc.(RDBMS)

15. 3-Tier Architecture
1st tier- Web browser 2nd tier- Web server 3rd tier- Data storage

16. Advantages
• High performance, lightweight persistent objects
• Scalability – Each tier can scale horizontally
• Performance – Because the Presentation tier can cache
requests, network utilization is minimized, and the load is
reduced on the Application and Data tiers.
• High degree of flexibility in deployment platform and
configuration
• Better Re-use
• Improve Data Integrity
• Improved Security – Client is not direct access to database.
• Easy to maintain and modification is bit easy, won’t affect
other modules
• In three tier architecture application performance is good.

17. Disadvantages
• Increase Complexity/Effort
• Installation cost is high

18. n-Tier Architecture
• Web application architecture sometimes is referred to as multi-tier. In
effect we could have more than 3-tiers in circumstances when the Web
server requires to access one or more application servers for specialized
services. This is known as n-Tier architecture
• Each layer within an N-tier architecture could be thought of as 'logical
components' interacting with the layer above or below. Layers provide a
means of grouping functionality within the application structure.
• Some benefits of this approach include flexibility of component location -
each layer may be held on a different server, this facilitates scalable
applications capable of handling heavier server loads. Additionally each
layer is encapsulated making it possible to change one layer without
affecting another.

20. n tier
• Advantages
– n tier architecture includes all advantages of the 3-tier
model since its an expansion of the 3-tier
methodology. Mainly the performance is increased
due to off-load from the database tier and the client
tier, enabling it to suit medium to high volume
industries
• Disadvantages
– Due to the componentization of the tiers, the complex
structure is difficult to implement or maintain.

21. The World Wide Web (WWW)
• WWW is a system of interlinked, hypertext
documents that runs over the Internet
• Two types of software:
– Client: a system that wishes to access the information
provided by servers must run client software (e.g.,
web browser)
– Server: an internet-connected computer that wishes
to provide information to others must run server
software
– Client and server applications communicate over the
Internet by following a protocol built on top of TCP/IP
– HyperText Transport Protocol (HTTP)
21

22. Basics of the WWW
• Hypertext: a format of information which allows
one to move from one part of a document to
another or from one document to another
through hyperlinks
• Uniform Resource Locator (URL): unique
identifiers used to locate a particular resource on
the network
• Markup language: defines the structure and
content of hypertext documents
22

23. Web Client: Browser
• Makes HTTP requests on behalf of the user
– Reformat the URL entered as a valid HTTP request
– Use DNS to convert server’s host name to appropriate
IP address
– Establish a TCP connection using the IP address
– Send HTTP request over the connection and wait for
server’s response
– Display the document contained in the response
• If the document is not a plain-text document but instead is
written in HTML, this involves rendering the document
(positioning text, graphics, creating table borders, using
appropriate fonts, etc.)
23

25. Web Servers
• Main functionalities:
– Server waits for connect requests
– When a connection request is received, the server
creates a new process to handle this connection
– The new process establishes the TCP connection and
waits for HTTP requests
– The new process invokes software that maps the
requested URL to a resource on the server
– If the resource is a file, creates an HTTP response that
contains the file in the body of the response message
– If the resource is a program, runs the program, and
returns the output
25

26. Static Web: HTML/XHTML, CSS
• HTML stands for HyperText Markup Language
– It is a text file containing small markup tags that tell
the Web browser how to display the page
• XHTML stands for eXtensible HyperText Markup
Language
– It is identical to HTML 4.01
– It is a stricter and cleaner version of HTML
• CSS stands for Cascading Style Sheets
– It defines how to display HTML elements
26

27. (Uniform Resource Locater)URL
• URL is an acronym for Uniform Resource
Locator and is a reference (an address) to a
resource on the Internet.
• A URL has two main components:
 Protocol identifier: For the URL
http://example.com, the protocol identifier is http.
 Resource name: For the URL http://example.com,
the resource name is example.com.

28. Protocol Identifier
• The protocol identifier indicates the name of
the protocol to be used to fetch the resource.
• The example uses the Hypertext Transfer
Protocol (HTTP), which is typically used to
serve up hypertext documents. HTTP is just
one of many different protocols used to access
different types of resources on the net.
• Other protocols include File Transfer Protocol
(FTP), Gopher, File, and News.

29. Constructing a URL
• The easiest way to create a URL object is from a String that represents
the human-readable form of the URL address.
This is typically the form that another person will use for a URL.
• In your Java program, you can use a String containing this text to create a
URL object:
URL myURL = new URL("http://example.com/");
• The URL object created above represents an absolute URL.
• An absolute URL contains all of the information necessary to reach the
resource in question.
• You can also create URL objects from a relative URL address.
• A relative URL contains only enough information to reach the resource
relative to (or in the context of) another URL.

30. (Universal Resource Identifier)URI or URL
• URLs are location dependent
• It contains four distinct parts:
– the protocol type,
– the machine name,
– the directory path and
– the file name.
Transfer Protocol://ServerName.domain/directories/subdirectories/filename.filetype
• There are several kinds of URLs: file URLs, FTP URLs, and HTTP URLs.

31. Types of URL
• Types:
– Absolute URL
– Relative URL
• An Absolute URL is, something that is independent
or free from any relationship from the rest. When
you use an absolute URL, you point directly to the
file you give exact location of the file.
“sitename.com/images/welcome.gif” is an absolute url as it specifies
that an image file welcome.gif located in the images directory, under
yoursitename domain.

32. Relative URL
• A Relative URL points to a file/directory in relation
to the present file/directory. They have short urls as
they are referring to root directory/subdirectory.
• Relative url’s helps webmaster to maintain the site
without rewriting the whole path again and again if
they had made any changes in directory.
../image/welcome.gif is a relative url (The initial two peroids (..) in the url
instruct the server to move up one directory (which is the root directory), then
enter images directory and finally point at welcome.gif file )

33. Shortened URLs
• Shortened URLs hide the actual domain name,
so you cannot tell where they link to by
looking at them. Click this link to see why you
should only go to shortened URLs from
trusted sources.
• Know the source of a shortened URL
• http://bit.ly/9dLHk5

34. IP Address
• IP address is a unique logical address assigned to a
machine over the network. An IP address exhibits
the following properties:
– IP address is the unique address assigned to each host
present on Internet.
– IP address is 32 bits (4 bytes) long.
– IP address consists of two components: network
component and host component.
– Each of the 4 bytes is represented by a number from 0
to 255, separated with dots. For example
137.170.4.124

35. Domain Name System/Server(DNS)

36. Why DNS?
• When DNS was not into existence, one had to
download a Host file containing host names
and their corresponding IP address. But with
increase in number of hosts of internet, the
size of host file also increased.
• This resulted in increased traffic on
downloading this file. To solve this problem
the DNS system was introduced.

37. Domain Name System/Server
• Domain Name System helps to resolve the host name to an
address. It uses a hierarchical naming scheme and
distributed database of IP addresses and associated names
• Name Server
– Name server contains the DNS database. This database
comprises of various names and their corresponding IP
addresses. Since it is not possible for a single server to maintain
entire DNS database, therefore, the information is distributed
among many DNS servers.
• Hierarchy of server is same as hierarchy of names.
• The entire name space is divided into the zones
• Zones
– Zone is collection of nodes (sub domains) under the main
domain. The server maintains a database called zone file for
every zone.

38. Domain name space
25.38

39. Domain names and labels

40. example
• If I am looking for www.kjsce.edu will be
looked at by DNS server as .edu.kjsce.www
• . Indicates “Root Domain”,
• edu indicates is subdomain for root
• kjsce is subdomain for edu
• www is either a node or futher subdomain for
kjsce

41. Types of domain

42. Types of Domain
• DNS is a TCP/IP protocol used on different platforms. The domain name
space is divided into three different sections: generic domains, country
domains, and inverse domain.
• Generic Domain (edu,org,net,com)
– It defines the registered hosts according to their generic behavior.
– Each node in a tree defines the domain name, which is an index to the DNS
database.
– It uses three-character labels, and these labels describe the organization
type.
• Country Domain(in,pk,uk,jp)
– The format of country domain is same as a generic domain, but it uses two-
character country abbreviations (e.g., us for the United States) in place of
three character organizational abbreviations.
• Inverse Domain
– The inverse domain is used for mapping an address to a name. When the
server has received a request from the client, and the server contains the
files of only authorized clients. To determine whether the client is on the
authorized list or not, it sends a query to the DNS server and ask for mapping
an address to the name.

43. DNS Working
• DNS translates the domain name into IP address
automatically. Following steps will take you through
the steps included in domain resolution process:
– When we type www.facebook.com into the browser, it asks
the local DNS Server for its IP address.
– Here the local DNS is at ISP end. When the local DNS does
not find the IP address of requested domain name, it
forwards the request to the root DNS server and again
enquires about IP address of it.
– The root DNS server replies with delegation that I do not
know the IP address of www.facebook.com but know the
IP address of DNS Server.
– The local DNS server then asks the com DNS Server the
same question.

44. Cont..
– The com DNS Server replies the same that it does not
know the IP address of www.facebook.com but knows
the address of facebook.com.
– Then the local DNS asks the facebook.com DNS server
the same question.
– Then facebook.com DNS server replies with IP address
of www.facebook.com.
– Now, the local DNS sends the IP address of
www.facebook.com to the computer that sends the
request.

45. DNS resolver
• The client side of the DNS is called a DNS
resolver. A resolver is responsible for initiating
and sequencing the queries that ultimately
lead to a full resolution (translation) of the
resource sought, e.g., translation of a domain
name into an IP address.

46. URI,URN,URL
• Uniform Resource Identifier
– Information about a resource
• Uniform Resource Name
– The name of the resource with in a namespace
• Uniform Resource Locator
– How to find the resource, a URI that says how to
find the resource

47. HTTP
Hyper Text Transfer Protocol
• HTTP is a network protocol used to deliver virtually all
files and other data (collectively called resources) on
the World Wide Web, whether they're HTML files,
image files, query results, or anything else. Usually,
HTTP takes place through TCP/IP sockets
• A browser is an HTTP client because it sends requests
to an HTTP server (Web server), which then sends
responses back to the client. The standard (and
default) port for HTTP servers to listen on is 80, though
they can use any port.

48. HTTP
• HTTP is a generic and stateless protocol which
can be used for other purposes as well using
extensions of its request methods, error
codes, and headers.
• Basic Features
– HTTP is connectionless
– HTTP is media independent
– HTTP is stateless:

49. HTTP Version
• HTTP uses a <major>.<minor> numbering scheme to indicate
versions of the protocol. The version of an HTTP message is indicated
by an HTTP-Version field in the first line.
• Here is the general syntax of specifying HTTP version number:
– HTTP-Version = "HTTP" "/" 1*DIGIT "." 1*DIGIT
• Example
– HTTP/1.0 or HTTP/1.1
– HTTP/1.0 uses a new connection for each request/response exchange,
– HTTP/1.1 connection may be used for one or more request/response
exchanges.

50. • I would like to open a
connection
• GET <file location>
• Display response
• Close connection
• OK
• Send page or error message
• OK
Client Server
HTTP is the set of rules governing the format and content of the
conversation between a Web client and server
An HTTP conversation

51. Request Method
S.N. Method and Description
1 GET -The GET method is used to retrieve information from the given server
using a given URI. Requests using GET should only retrieve data and should
have no other effect on the data.
2 HEAD-Same as GET, but it transfers the status line and the header section
only. (retrieves meta information only in response header)
3 POST-A POST request is used to send data to the server, for example,
customer information, file upload, etc. using HTML forms.
4 PUT-Replaces the page specified in the url property with the specified data
5 DELETE-Removes all the current representations of the target resource given
by URI.
6 CONNECT-Establishes a TCP/IP tunnel to the server identified by a given URI.
7 OPTIONS-Describe the communication options for the target resource.
8 TRACE-Performs a message loop back test along with the path to the target
resource.
9 LINK and UNLINK-Connect and Disconnect two resources resp.

52. Fig: Request and response messages

53. 27.53
Figure 27.14 Request and status lines
e.g.
I want to access page demo.html from - www.webprogramming1.com
Request line send to the server will be
GET http://www.webprogramming1.com/demo.html HTTP/1.1

54. 27.54
Table : Status codes

56. 27.56
Figure 27.15 Header format

57. 27.57
Table 27.3 General headers

58. 27.58
Table 27.4 Request headers

59. 27.59
Table 27.5 Response headers

60. 27.60
Table 27.6 Entity headers

61. This example retrieves a document. We use the GET method
to retrieve an image with the path /usr/bin/image1. The
request line shows the method (GET), the URL, and the
HTTP version (1.1). The header has two lines that show
that the client can accept images in the GIF or JPEG
format. The request does not have a body. The response
message contains the status line and four lines of header.
The header lines define the date, server, MIME version, and
length of the document. The body of the document follows
the header (see Figure 27.16).
Example

62. 27.62
Figure 27.16 Example 27.1

63. 27.63
In this example, the client wants to send data to the server.
We use the POST method. The request line shows the
method (POST), URL, and HTTP version (1.1). There are
four lines of headers. The request body contains the input
information. The response message contains the status line
and four lines of headers. The created document, which is a
CGI document, is included as the body (see Figure 27.17).
Example 27.2

64. 27.64
Figure 27.17 Example 27.2

65. File Transfer Protocol
• FTP is a abbreviation of File Transfer Protocol , it is the main
network protocol used for downloading/uploading of files.
• From one host to another using a TCP based network like
INTERNET.
• FTP works on a principle of client-server model and uses
data-connection between client and server.
• FTP basically runs on port no 21 as default
• FTP uses the services of TCP. It needs two TCP
connections.
• The well-known port 21 is used for the control connection
and the well-known port 20 for the data connection.

66. Figure 20-1
FTP

67. File Transfer Protocol (FTP)
• FTP host stores files
• Client logs into host
• Client program sends command to get a file
• FTP host downloads the file with error
correction FTP Host
2. FTP Get Command
3. Download
1. Login

68. File Transfer Protocol (FTP)
• User can also upload a file to the FTP Server
– WWW cannot do this
FTP Host
2. FTP Upload
1. Login

69. File Transfer Protocol (FTP)
• Must Log into FTP Host Before Transfers
• Traditional FTP
– You log into a specific account with a password
– You can transfer to and from directories accessible to
that account
• Anonymous FTP
– You log in as “anonymous”
– Give your e-mail address as password (usually optional)
– Host gives you access to public directories
– Usually for downloading only
– Not truly anonymous: your internet address is known

70. FTP File Format Standards
• There are no standards for FTP file formats
– Nothing like HTML
– No limit on generality
– No help in handling after downloads
– You must know the file structure of the file you
download
– You must have an application program that can
read that file format

71. • The FTP uses mainly 2 file transfer modes
Binary - The binary mode transmits all eight bits per byte thus have much
more transfer rate and reduces the chance of transmission error
• ASCII - This is the default transfer mode and transmits 7 bits per byte..
•
FTP was not designed to be secure. It is not much secured and has many
security weaknesses.
It is currently vulnerable to :-
– Sniffers
– Bounce attacks
– Spoof attacks
– Username Protection
– Port stealing
– Brute forcing
• But today several programmers have contributed and made it secure by
making add-ons.

72. Website Design Issues

73. Search Engine Optimization (SEO Optimization)
• SEO (search engine optimization) is the practice of
optimizing the performance of a website by changing
its structure and content to increase its visibility and
web traffic.
• It helps in improving the quality of your website and
increases the viewer-to-customer conversion rate.
• The primary goal of SEO is to drive organic (non-paid)
traffic to a website by improving its relevance and
authority in the eyes of search engines.

74. • Why do we need SEO?
– We need Search Engine Optimization for the
following aspects:
• To improve the quality of our website
• To increase web traffic
• To increase visibility
• To enhance user experience
• To gain a competitive advantage
• For analysis and monitoring of the website

75. • Suppose you have a website, that deals with either of the
following:
– Products you sell.
– Services you provide.
– Information on topics in which you have deep expertise and
experience.
• Now if you don’t do Search Engine Optimization (SEO),
let’s say your website ranks at rank 45 in the Google
Search results, resulting in 100 unit conversions. Now, on
the other hand, the website ranking in the 1st position on
Google Search for the same product has a conversion rate
of 10,000. So if you think about it, you are losing around
9,900 potential customers just because you are not on the
1st position. This is the main reason why we need SEO.