Web Pages & Web Site

A web site is more than just a group of web pages that are connected to each other through
hypertext links.

Web Application
• The user accesses a web application via a web browser by generating a request to the web
server over the Internet.
• The web server forwards the request to the web application server.
• The web application server querying the database or processing the data and generates the
results.
• The web application server sends the results back to the web server.
• The web server delivers the requested information to the client and the information
appears on the user’s display.

Static & Dynamic Website

• A static site is one that is usually written in plain HTML.
• A dynamic site is one that is written using a server-side scripting language such as PHP, ASP
& JSP. In such a site the content is called in by the scripting language from other files or
from a database depending on actions taken by the user.
• Browsing and loading of static web pages are quicker than dynamic web pages because
unlike dynamic web pages they do not require the request of server.
• Changing the content in static web pages is a difficult task because you must develop and
upload a new page while in dynamic web pages server application do this automatically.
• If file extension of a URL is in .htm or .html then it is a static web page. While if it is in .php,
.asp and .jsp then it is the example of dynamic web pages.

Web Server
A web server is a system that delivers content or services to end users over the internet. A web
server consists of a physical server, server operating system (OS) and software used to facilitate
HTTP communication.

Server-side Scripting and Client-side Scripting

• Server-side scripting is used at the backend, where the source code is not viewable or
hidden at the client side (browser). On the other hand, client-side scripting is used at the
front end which users can see from the browser.
• When a server-side script is processed it communicates to the server. As against, client-side
scripting does not need any server interaction.
• The client-side scripting language involves languages such as HTML, CSS, and JavaScript. In
contrast, programming languages such as PHP, ASP.net, Ruby, ColdFusion, Python, C#, Java,
C++, etc.
• Server-side scripting is useful in customizing the web pages and implement the dynamic
changes in the websites. Conversely, the client-side script can effectively minimize the load
to the server.
• Server-side scripting is more secure than client-side scripting as the server-side scripts is
usually hidden from the client end, while a client-side script is visible to the users

Page | 1
TCP/IP
A layered grouping of data communications protocols. The name TCP/IP refers to two of the
most important protocols within the suite, Transmission Control Protocol (TCP) and Internet
Protocol (IP), but the suite is comprised of many other significant protocols and services.

Layers of the TCP/IP Model

1. Network Access Layer
• This is the bottom-most layer of the TCP/IP architecture
• The physical transmission of data takes place at this layer
• Mainly, the function of this layer is to transmit the data between two devices,
connected in a network
2. Internet Layer
• Sending the data packets to their destination network is the main function of the
Internet layer
• There are three different protocols used in this layer. These include:
o IP: It detects the IP address of a device. There are two common IP versions
which are (IPv4 and IPv6).
o ARP: It stands for Address Resolution Protocol. The physical address from the IP
address can be determined using ARP.
o ICMP: It stands for Internet Control Message Protocol. Any issue with the
network is immediately notified to the user by ICMP.

3. Host-To-Host Layer
• The error-free delivery of data is the main function of this layer
• There are two main protocols present in this layer:
o TCP: Transmission Control Protocol is a reliable communication protocol. Its
manager the flow of data.
o UDP: It is a connection-free protocol which makes it cost-effective but less
reliable.

4. Application Layer
• Node-to-node communication based on the user-interface occurs here
• Multiple protocols are present in this layer, a few common ones have been mentioned
below in brief:
o HTTP: Hypertext Transfer Protocol is used to manage the communication
between the server and web browsers
o FTP: File Transfer Protocol, as the name suggests allows easy transferring of files

TCP/IP Application Services

Telnet
The Telnet protocol operates within the Application layer. By telnet we can “login” to a remote
system over the Internet

Secure Shell
The Telnet protocol is now considered a poor mechanism for connecting to remote systems,
because Telnet servers and clients transmit all their data (including passwords) unencrypted.
Secure Shell (SSH) establishes connections and transfers data over secure channels, encrypting
transmitted data and promoting security.

Email
The email refers to the electronic means of communication of sending and receiving messages
over the Internet.
• The transmission of e-mail is performed through the SMTP protocol.

Page | 2
 • The reading of e-mail is usually performed through either POP or IMAP.
• The mail server is responsible for sending, receiving, managing, and recording all the data
proceeded by their respective mail programs and then processing them to their
respective users.
SMTP
SMTP stands for Simple Mail Transfer Protocol, and it is responsible for sending email
messages. This protocol is used by email clients and mail servers to exchange emails between
computers.

POP3
The POP3 abbreviation stands for Post Office Protocol version 3, which provides access to an
inbox stored in an email server. It executes the download and delete operations for messages.
Thus, when a POP3 client connects to the mail server, it retrieves all messages from the
mailbox. Then it stores them on your local computer and deletes them from the remote server.
Thanks to this protocol, you can access the messages locally in offline mode as well.

IMAP
The Internet Message Access Protocol (IMAP) allows you to access and manage your email
messages on the email server. This protocol permits you to manipulate folders, permanently
delete and efficiently search through messages. It also gives you the option to set or remove
email flags or fetch email attributes selectively.

MIME
Originally, e-mail systems transmitted messages in the form of standard ASCII text. If a user
wanted to send a file (e.g., an image or sound file), it had to be encoded before it could be
placed into the body of the message. The sender had to communicate the nature of data
directly to the receiver.
Multimedia Internet Mail Extensions (MIME) provided a uniform mechanism for including
encoded attachments within a multipart e-mail message. MIME supports the definition of
boundaries separating the text portion of a message (the “body”) from its attachments.

FTP
FTP (File Transfer Protocol) is used to communicate and transfer files between computers
on the internet. Users, who have been granted access, can receive and transfer files in the
File Transfer Protocol server.

Page | 3
URL
URL stands for Uniform Resource Locator is the global address of documents and other
resources on the World Wide Web. Its main purpose is to identify the location of a document
and other resources available on the internet and specify the mechanism for accessing it
through a web browser.

The URL Syntax

scheme://host:port/path?query-string# anchor
• Scheme — The scheme identifies the protocol to be used to access the resource on the
Internet. The most commonly used protocols are http://, https://, ftp://, and mailto://.
• Host —A hostname is a domain name assigned to a host computer. For
example, www.anywebsite.com
• Port — This is an optional portion of the URL designating the port number to which the
target web server listens. (The default port number for HTTP servers is 80,
• Path — The path identifies the specific resource within the host that the user wants to
access. For example, /html/html-url.php, /news/technology/, etc.
• Query String — The query string contains data to be passed to server-side scripts,
running on the web server. For example, parameters for a search. The query string
preceded by a question mark (?), is usually a string of name and value pairs separated by
ampersand (&), for example, ?q=mobile+phone.
• anchor —if present, specifies a location within the page. Browser may scroll to display
that part of the page. The fragment identifier introduced by a hash character (#) is the
optional last part of a URL for a document.

HTTP
HTTP is communication protocol, that is used to deliver data on the World Wide Web. It
provides a standardized way for computers to communicate with each other.
HTTP is stateless: The server and client are aware of each other only during a current request.
Afterwards, both of them forget about each other.

HTTP works as a request-response protocol between a client and server.

Example: A client (browser) sends an HTTP request to the server; then the server returns a
response to the client. The response contains status information about the request and may also
contain the requested content.

HTTP Request Structure from Client

A simple request message from a client computer consists of the following components:
• A request line to get a required resource, for example a request
GET /content/page1.html is requesting a resource called /content/page1.html from the
server.
• Headers (Example – Accept-Language: EN).
• An empty line.
• A message body which is optional.

HTTP Response Structure from Web Server

A simple response from the server contains the following components:
• HTTP Status Code (For example HTTP/1.1 200 OK)
• Headers (Example – Content-Type: html)
• A message body which is optional.

The request from the client browser should look like below.
GET /home.html HTTP/1.1
Host: www.yoursite.com
The response from the web server should look like below:
HTTP/1.1 200 OK

Page | 4
Date: Sun, 28 Jul 2013 15:37:37 GMT
Last-Modified: Sun, 07 Jul 2013 06:13:43 GMT
Transfer-Encoding: chunked
Content-Type: text/html; charset=UTF-8

Chunked transfer encoding is a method in which the server responds with a data in chunks, and
this used in place of Content-Length header. The communication is stopped when a zero length
of chunk is received, and this method is used in HTTP Version 1.1.

HTTP Status Code

The Server issues an HTTP Status Code in response to a request of the client made to the server.
Status code is a 3-digit integer.
1xx: Informational Response
It is used to show that the request was received, and the process is continuing.
2xx: Successful
It is used to show that the request was successfully received, understood, and accepted.
3xx: Redirection
It is used to show that further action needs to be taken to complete the request.
4xx: Client Error
It is used to show that the request contains bad syntax or cannot be fulfilled.
5xx: Server Error
It is used to show that the server is failed to fulfill an apparently valid request.

HTTPS
HTTPS is the secured HTTP protocol required to send and receive information securely over
internet. Nowadays it is mandatory for all websites to have HTTPS protocol to have secured
internet.
Besides the security and encryption, the communication structure of HTTPS protocol remains
same as HTTP protocol as explained above.

Family of Markup Language [SGML, XML, XHTML, HTML, HTML5]

SGML: Standard generalized markup language is a text markup language that serves as a
superset of all markup language.

• It provides a way to define all markup languages

• It sets the standard for different markup language.
• It states what some languages can or cannot do, what elements must be included, such
as tags, and the basic structure of the language.
• As a parent passes on genetic traits to a child, SGML passes structure and format rules
to markup languages.

XML (eXtensible Markup Language)

• XML stands for eXtensible Markup Language
• XML is a markup language much like HTML
• XML was designed to store and transport data
• XML was designed to be self-descriptive
• XML is a W3C Recommendation

Example
<?xml version="1.0" encoding="UTF-8"?>
<note>
<to>Tom</to>
<from>Jerry</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend! </body>
</note>

Page | 5
The XML above does not DO anything. XML is just information wrapped in tags.

The Difference Between XML and HTML

XML and HTML were designed with different goals:
• XML was designed to carry data - with focus on what data is
• HTML was designed to display data - with focus on how data looks
• XML tags are not predefined like HTML tags are

Example: Books.xml
<?xml version="1.0" encoding="UTF-8"?>
<bookstore>
<book category="cooking">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
<book category="children">
<title lang="en">Harry Potter</title>
<author>J K. Rowling</author>
<year>2005</year>
<price>29.99</price>
</book>
</bookstore>

XML Tree
XML documents form a tree structure that starts at "the root" and branches to "the leaves".

XML Syntax Rules

• XML Documents Must Have a Root Element
• All XML Elements Must Have a Closing Tag
• XML Tags are Case Sensitive
• XML Elements Must be Properly Nested
• XML Attribute Values Must Always be Quoted
XML Elements
An XML document contains XML Elements.
In the example above: Books.xml
• <title>, <author>, <year>, and <price> have text content because they contain text.
• <bookstore> and <book> have element contents because they contain elements.
• <book> has an attribute (category="children").

XML Naming Rules

• Element names are case-sensitive
• Element names must start with a letter or underscore
• Element names cannot start with the letter’s xml (or XML, or Xml, etc)
• Element names can contain letters, digits, hyphens, underscores, and periods
• Element names cannot contain spaces

Page | 6
Parsing a Text String
<html><body>
<p id="demo"></p>
<script>
var text, parser, xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";

parser = new DOMParser();

xmlDoc = parser.parseFromString(text,"text/xml");

document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>
</html>

XSLT (eXtensible Stylesheet Language)

XSL stands for eXtensible Stylesheet Language. It is a styling language for XML.
XSLT, on the other hand, stands for XSL Transformations and is used to transform XML
documents into different formats, for example, transforming XML into HTML.

Create an XSL Style Sheet

<?xml version="1.0" encoding="UTF-8"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html> <body>
<table border="1"><tr><th>Title</th><th>Author</th></tr>
<xsl:for-each select="bookstore/book">
<tr> <td><xsl:value-of select="title"/></td> <td><xsl:value-of select="author"/></td> </tr>
</xsl:for-each>
</table></body></html>
</xsl:template></xsl:stylesheet>

XQL (XML Query Language)

Designed to find and extract the elements and attributes from XML documents
• XQuery can be used to extract information to use in a Web Service.
• XQuery can be used to generate summary reports.
• XQuery can be used to transform XML data to XHTML

<ul>
{
for $x in doc("books.xml")/bookstore/book/title
order by $x
return <li>{data($x)}</li>
}
</ul>

The result of the above will be

<ul>
<li>Everyday Italian</li>
<li>Harry Potter</li>
</ul>

Page | 7
DTD (Document Type Definition)
DTD is used to define the structure and the legal elements and attributes of an XML document.

Why Use a DTD?

Independent groups of people can agree to use a standard DTD for interchanging data. An
application can also verify that the XML data is valid.

XML document with an internal DTD

<?xml version="1.0"?>
<!DOCTYPE note [
<!ELEMENT note (to,from,heading,body)>
<!ELEMENT to (#PCDATA)>
<!ELEMENT from (#PCDATA)>
<!ELEMENT heading (#PCDATA)>
<!ELEMENT body (#PCDATA)>
]>
<note>
<to>Sapna</to>
<from>Tom</from>
<heading>Meeting</heading>
<body>Meeting on Monday Morning at 9 AM.</body>
</note>

Explanation
!DOCTYPE note – Used to define that note is the root element of the document.
!ELEMENT note – Used to define that the note element must contain the elements: “to, from,
heading, body”.
!ELEMENT to – Used to define that the “to” element is to be of type “#PCDATA”.
!ELEMENT from – Used to define that the “from” element is to be of type “#PCDATA”.
!ELEMENT heading – Used to define the heading element to be of type “#PCDATA”.
!ELEMENT body – Used to define the body element to be of type “#PCDATA”

#PCDATA means parseable character data.

XML Schema
• An XML Schema describes the structure of an XML document, just like a DTD.
• An XML document validated against an XML Schema is both "Well Formed" and "Valid".
• XML Schema is an XML-based alternative to DTD

Why Use an XML Schema?

• With XML Schema, your XML files can carry a description of its own format.
• With XML Schema, groups of people can agree on a standard for interchanging data.
• With XML Schema, you can verify data.

XHTML MP
XHTML Mobile Profile (XHTML MP) is a simplified version of XHTML that was defined to support
wireless applications. The goal of XHTML Mobile Profile is to bring together the technologies for
mobile Internet browsing and that for the World Wide Web.

Web Services
Web services are data exchange systems that use the internet for application-to-application
communication. These processes involve programs, messages, documents, and objects.

Why do you need a Web Service?

Modern day business applications use variety of programming platforms to develop web-based
applications. Some applications may be developed in Java, others in .Net, while some other in
Angular JS, Node.js, etc. These various applications need some sort of communication to

Page | 8
happen between them. Since they are built using different development languages, it becomes
difficult to ensure accurate communication between applications.
Here is where web services come in. Web services provide a common platform that allows
multiple applications built on various programming languages to have the ability to
communicate with each other.

Type of Web Service

There are mainly two types of web services.
• SOAP web services
• RESTful web services

SOAP
• SOAP stands for Simple Object Access Protocol
• SOAP is based on XML
• SOAP is platform independent

Why SOAP?
• It is important for web application to be able to communicate over the internet.
• SOAP provides a way to communicate between applications running on different
operating systems, with different technologies and programming languages.

SOAP Message Structure

A SOAP message is an ordinary XML document containing the
following elements:

• An Envelope element that identifies the XML document as a

SOAP message
• A Header element that contains header information
• A Body element that contains call and response information
• A Fault element containing errors and status information

A SOAP Example
In the example below, a GetStockPrice request is sent to a server. The request has a StockName
parameter, and a Price parameter that will be returned in the response.
A SOAP request:
<?xml version="1.0"?>
<soap:Envelope
xmlns:soap="http://www.w3.org/2003/05/soap-envelope/"
soap:encodingStyle="http://www.w3.org/2003/05/soap-encoding">

<soap:Body xmlns:m="http://www.example.org/stock">
<m:GetStockPrice>
<m:StockName>IBM</m:StockName>
</m:GetStockPrice>
</soap:Body>
</soap:Envelope>

SOAP Envelope Element

• This is root element of a SOAP message.
• This element defines the XML document as a SOAP message.

1. The xmlns:soap Namespace

• It should always have the value of: http://www.w3.org/2003/05/soap-envelope/

2. The soap.encodingStyle Attribute

• The encodingStyle attribute is used to define the data types used in the document.

Page | 9
REST (Representational State Transfer)

Web services that are defined on the concept of REST are RESTful web services. When a client
makes a request via RESTful API, it transfers the representation of the state of the resources to
the server. This information can be transferred in various formats via HTTP like, JSON, HTML,
XLT, and Plain Text, but JSON is the most common language used due to its easy readability by
machines and humans.

WSDL
• WSDL stands for Web Services Description Language
• WSDL file contains the location of the web service
• WSDL is used to describe a web service
o So that client applications can understand what the web service does
• WSDL is written in XML

Structure/Elements of a WSDL file

• Types
• Messages
• Porttype
• Bindings
• Service

The <types> tag is used to define all the complex datatypes, which will be used in the message
exchanged between the client application and the web service.
The <messages> tag is used to define the message which is exchanged between the client
application and the web server.
The <portType> tag is used to encapsulate every input and output message into one logical
operation.
The <binding> tag is used to bind the operation to the port type. This is so that when the client
application calls the relevant port type, it will then be able to access the operations which are
bound to this port type.
The <service> tag is a name given to the web service itself. Initially, when a client application
makes a call to the web service, it will do by calling the name of the web service. For example, a
web service can be located at an address such as http://localhost/Tutorial.asmx .

UDDI (Universal Description, Discovery, and Integration)

• UDDI is an XML-based standard for describing, publishing, and finding web services.
• Providers advertise their Web services on the UDDI registry.
• Consumers then use UDDI to discover Web services suiting their requirements and consume
those services

RDF (Resource Description Framework)

• RDF is a framework for describing resources on the web

• RDF is designed to be read and understood by computers
• RDF is not designed for being displayed to people
• RDF is written in XML
Example of use
• Describing information about web pages (content, author, created and modified date)
• Describing content and rating for web pictures

Semantic Web
The Semantic Web is the major effort on the part of the World Wide Web Consortium. It aims to
create the next generation Internet infrastructure, where information has well-defined meaning,
making it possible for people and programs to cooperate with each other. The critical part is to
associate data with meaning, and here the important role belongs to RDF and its descendants. In

Page | 10
the long term, we expect that RDF in combining with other standards such as XML, WSDL, SOAP,
and UDDI will serve as the foundation for Semantic Web applications.

SEO (Search Engine Optimization)

• SEO is the practice of optimizing a website to increase the quantity and quality of its
traffic from a search engine’s organic results.
• In simple terms, SEO explaining to search engines that your content is the best result for
the topic at hand. This is because all search engines have the same goal: To show the best,
most relevant results to their users.
• Precisely how you do this depends on the search engine you’re optimizing for.
• If you want more organic traffic to your web pages, then you need to understand and
cater to Google’s algorithm. If you want more video views, then it’s all about YouTube’s
algorithm.

jQuery
jQuery is a fast, small, lightweight, cross-platform and feature-rich JavaScript library. jQuery
provides various features that makes web development very quick and easy. Some of the basic
and unique features of jQuery are listed below:
• Very fast and extensible
• Small and lightweight
• Platform-independent
• Provides cross-browser support
• Improves the performance of any application
• Write less and do more as compared to JavaScript
• Simplifies AJAX call and DOM manipulation.

JSON (JavaScript Object Notation)

• It is a lightweight text-based data-interchange format.
• It is language and platform independent.
• It is a lightweight alternative to XML.
• JSON is mainly used for storing and exchanging data.

JSON example:
{"students":[
{"firstName":"Ahmad", "lastName":"Raza"},
{"firstName":"M", "lastName":"Malik"}
]}
Difference between JSON and XML
1. JSON doesn’t use end tag. XML uses end tag.
2. JSON can use arrays. XML can’t use arrays.
3. JSON need only a standard JavaScript function to parse. XML needs XML parser to parse

Page | 11
Browser Functionality
The main responsibilities of a browser are as follows:
• To submit requests to web servers on the user’s behalf.
• To accept responses from web servers and produce a visual representation for the user.
• To render the results in the browser window.

• Caching: The browser must verify whether it needs to request data from the server. It may
have a cached copy of the required data item. If this cached copy has not “expired,” the
browser can eliminate an extra request for the resource.
• Authentication and authorization: A web server may require authorization for resources then
the browser must react to server requests by prompting the user for credentials.
• State maintenance: To maintain state across requests and responses, web servers may request
that the browser accept cookies. The browser must store the cookie information and make it
available. In addition, the browser should provide options to let users choose whether to accept
cookies.
• Taking actions in response to status codes: The HTTP status code may provide additional
processing instructions. These instructions may indicate a problem in accessing the resource or
may instruct the browser to redirect the request to another location.
• Rendering complex objects: Most web browsers support content types such as text/html,
text/plain, image/gif, and image/jpeg. This means that the browser provides functionality to
render objects with these contents within the browser window and without having to install
additional software. To render or play back other more complex objects (e.g., audio, video, and
multimedia), a browser must provide support for these content types.
• Dealing with error conditions: The browser must be equipped to deal with connection failures,
invalid server responses, and other similar situations.

Architecture of a Web Browser

The browser’s main functionality is to fetch the files from the server and display them on the
screen. It basically displays html files containing images, PDF & videos.
A browser is a group of codes that performs plenty of tasks to display a webpage on the screen.

1. User Interface – It is the space where interaction between users and the browser occurs.
2. Browser Engine – It is the piece of code that communicates the inputs of user interface with
the rendering engine.
3. Rendering Engine – It is the part responsible for displaying the requested content on the
screen. It first parses the html tags and then using the styles, it builds a render tree and finally a
render layout, which displays the content on the screen.
4.Networking – The fraction of the code written in the browser, responsible to send various
network calls. For example, sending the http requests to the server.
5. Java Script Interpreter – It is the component of the browser written to interpret the java
script code presented in a web page.
6. UI Backend – This draws basic widgets on the browser like combo boxes, windows, etc.
7. Data Storage – It is small database created on the local drive of the computer where the
browser is installed. This database stores various files like cache, cookies, etc.

Browsers Working

WWW works on the client-server model. A user computer works as a client which can receive
and send data to the server. When a web page is requested by a user, the browser contacts the

Page | 12
requested server and by fetching the requested files, it displays the web page on the computer
screen. The whole process takes place in these three steps:

1. Contact to DNS Server – When a user enters a URL into the address bar and hits ‘enter’, at first
browser contacts the DNS server. A DNS server stores the IP addresses of the server associated
with the corresponding domain names. The DNS server takes the domain name from the browser
and returns the corresponding IP address to the browser.

2. Contact to Server – After getting the IP address of the server for the requested webpage,
browser sends a request to that server for the desired files. For example, consider the following
URL: http://www.mywebsite.com/articles

3. Rendering – The entire process followed by a browser from fetching the webpage to displaying
it on the screen is called Rendering. It is executed in the following steps:

a. Loading HTML – As soon as the web page is found by the browser, it is loaded into the browser
using the http protocol. All the html tags as well as other resources (like images, pdf) referred
in the html tags are loaded separately.
b. Parsing – An HTML Parser starts interpreting the html files and building subsequent content
tree.
c. Apply Styles – Web pages may have style sheets attached and a web browser also has its
default styles. Using a CSS parser, they are interpreted to define the styles.
d. Construct Frames – Using the HTML and style sheets, the browser constructs the frames. A
frame is a rectangular block with various properties like width, height, color, spacing, etc.
e. Frames Layout– This process includes arranging all the frames to make a layout of the web
page.
f. Frames Painting– As soon as the layouts are constructed the next process is painting. Painting
is the term used for the process to exactly render the objects on the screen and after that,
the webpage is displayed on the computer screen. A browser executes all the processes in a
flash of a second.

Web Framework
A web framework is a software platform for developing web applications and websites. Web
application frameworks offer a wide range of pre-written components, code snippets, and whole
application templates. Web development frameworks can be used for the development of web
services, web APIs (Application Programming Interface) and other web resources.

There are generally two types of development frameworks – client side and server-side
frameworks.

Front-end Frameworks Back-end Frameworks

The frontend is the part of the website visible Backend refers to the background functioning of
to the users. the sites.
Frontend Languages – HTML, CSS, JavaScript, Backend Languages – Python, JavaScript, PHP,
JQuery Ruby, .NET
Frontend Frameworks- React, Vue, Backend frameworks- Django, Ruby on Rails,
BootStrap, Ember, Angular Express, Spring, ASP.NET Core

Page | 13
Classification of Framework Architectures

1. Model-View-Controller
Most web application frameworks rely on the Model-View-Controller (MVC) architecture that is
made up of three parts:
• Model – the backend business logic and data
• View – The frontend or graphical user interface (GUI)
• Controller –Processing the request through the model and passing it back to view

2. Three-Tier Architecture
Three-tier architecture is a multilayer architecture that has three formalized layers:
• Presentation Tier
o This is the topmost level of the application.
o Provides user interface sometimes called the GUI or front-end.
o This tier is usually built on web development frameworks, such as CSS or
JavaScript.
• Application Tier
o It controls the application’s core functionality by performing detailed processing
and is usually coded in programming languages, such as PHP, ASP, and Python.
o It processes the inputs received from the clients and interacts with the database.
• Database Tier
o A database, comprising both data sets and the database management system or
RDBMS software that manages and provides access to the data (back-end).
o The data tier would be some sort of database, such as a MySQL, SQLite, or
PostgreSQL database. All of these are run on a separate database server.

ASP (Active Server Pages)

ASP is a server-side technology which is used to display dynamic content on web pages. Active
Server Pages was initially launched and established by Microsoft on its web server.
Microsoft Active Server Pages (ASP) can be used to build powerful, distributed Web-based
applications that combine Hypertext Markup Language (HTML), script, and Microsoft ActiveX
technologies to provide dynamic Web sites.

Page | 14
Web Server - Basic Operation
Web servers, browsers, and proxies communicate by exchanging HTTP messages.
The server receives and interprets HTTP requests, locates and accesses requested resources, and
generates responses, which it sends back to the originators of the requests.
The Networking module is responsible for both receiving requests and transmitting responses
over the network. When it receives a request, it must first pass it to the Address Resolution
module, which is responsible for ‘pre-processing’ the request. This pre-processing includes:
1. Virtual Hosting: if this Web server is providing service for multiple domains, determine the
domain for which this request is targeted, and use the detected domain to select configuration
parameters.
2. Address Mapping: determine whether this is a request for static or dynamic content, based
on the URL path and selected server configuration parameters, and resolve the address into an
actual location within the server’s file system.
3. Authentication: if the requested resource is protected, examine authorization credentials to
see if the request is coming from an authorized user.
Once the pre-processing is complete, the request is passed to the Request Processing module,
which invokes sub-modules to serve static or dynamic content as appropriate. When the selected
sub-module completes its processing, it passes results to the Response Generation module,
which builds the response and directs it to the Networking module for transmission.

Page | 15