CS212 LECTURE NOTE

Course Title: WEB PROGRAMMING (3 units)

Content

Layers of the Internet. World Wide Web. Domain Name Service. Uniform Resource Locator (URL).
Overview of Web Applications, Guide to the Server, History of Markup Language; HTML
Basics(Tags, Formatting ,Text, Creating Links, Adding Images, Lists, Tables, Frames, Forms).
Cascading Style Sheets (CSS); class, id, positioning, linking CSS file to html page. Graphics.
JavaScript Language. Document Object Model. . JQuery. Dynamic HTML. PHP. Generating HTML
Dynamically, Processing Forms, Maintaining State in Web Applications, Cookies, Data Tier (Back-
end Database Support, SQL Primer, Database Interface in PHP), Searching in Web Applications
(Regular Expressions and Matching), Multimedia and Interactivity (Audio on the Web, Video on the
Web), AJAX, Web Security.

What is Internet?

- It is global network of computers. Internet connects millions of computers across the globe.
- Internet is a type of network. Just like LAN, WAN MAN etc.
- Advances in internet/web technologies are what makes world be referred to as global village.
- Internet operates based on client/server architecture
- Once computer is connected to the internet; an IP address will be assigned to it for
identification. Every node on the internet has an IP address.

The Web

WWW – World Wide Web is most often referred to simply as "the Web."

 The World Wide Web (WWW) is a network of online content that is formatted in HTML and
accessed via HTTP. The term refers to all the interlinked HTML pages that can be accessed
over the Internet.
 The term World Wide Web (www) refers to the collection of public Web sites connected to
the Internet worldwide, together with the client devices such as computers and cell phones
that access its content.
 The World Wide Web (abbreviated WWW or the Web) is an information space where
documents and other web resources are identified by Uniform Resource Locators (URLs),
interlinked by hypertext links, and can be accessed via the Internet.

1
ATBU_DMS_CS212 (Web Programming)
For many years internet has become known simply as "the Web." Although some people use the two
terms interchangeably, the Web is just one of many applications on the Internet and is not the Internet
itself.

Origin and Early Development of the World Wide Web

Tim Berners-Lee, a researcher led the development of the World Wide Web in the late 1980s and
early 1990s. He helped build prototypes of the original core Web technologies and coined the term
"WWW." Websites and Web browsing exploded in popularity during the mid-1990s and continue to
be a key usage of the Internet today.

The World Wide Web is based on these core technologies:

 HTML (Hypertext markup language) - HyperText Markup Language. The markup

(formatting) language for the web. HTML originally supported only text documents, but with
enhancements during the 1990s grew capable of handling frames, style sheets and plugins for
general purpose Website content publishing.
 HTTP (Hypertext Transfer Protocol) - Although other protocols can be used such as FTP, this
is the most common protocol. It was developed specifically for the World Wide Web and
favored for its simplicity and speed. This protocol requests the 'HTML' document from the
server and serves it to the browser.
 URL (Uniform resource locator)
 Domain Name System (DNS)

URL (Uniform Resource Locator)

A URL is a standardized address of a location on the Internet. A URL (Uniform Resource Locator), as
the name suggests, provides a way to locate a resource on the web. The first part of the URL contains
the name of the protocol to be used to access the resource and a resource name. The second part
identifies the IP address or domain name where the resource is located. Other URL protocols include
HTTP (Hypertext Transfer Protocol) and HTTPS (HTTP Secure) for web resources, "mailto" for
email addresses, "ftp" for files on a File Transfer Protocol (FTP) server, and telnet for a session to
access remote computers.

A uniform resource locator (URL) is used to locate the server and a specific resource. URL specifies:

- Protocol being used, usually HTTP (Hypertext Transfer Protocol) for web pages
- Domain name of the server being accessed
- The path (or location) to the specific resource on the server

2
ATBU_DMS_CS212 (Web Programming)
Example:

http:/example.com/example1/index.htm

In the above example, the URL specifies that:

 The resource is to be retrieved using the HTTP protocol (which powers the web) via a web
browser;
 The resource is reached through the domain name system (DNS) name. The domain name is
example.com
 The path (or location) to the specific resource is /example1/index.htm

DOMAIN NAME SYSTEM (DNS)

URLs are designed to be easy for people to remember and to use, but computers need information to
be presented to them differently in order to navigate to the correct resource. Computers use IP
Address to find resources on the Internet. The IP is a series of numbers e.g. 192.150.11.1.

Hence some sort of translation or mapping of URLs to equivalent IP Addresses is required. The
domain name system (DNS) is the way that internet domain names (URLs) are located and translated
into internet protocol (IP) addresses. When we type a URL into an address field, your web browser
uses DNS to translate the URL to the corresponding IP. The browser can then use those numbers to
find information for you. For example, if someone types google.com into a web browser, a server
behind the scenes will map that name to the IP address 64.233.160.0

Most internet activity rely on DNS to quickly provide the information necessary to connect users to
remote hosts. DNS mapping is distributed throughout the internet in a hierarchy of authority. Access
providers and enterprises, as well as governments, universities and other organizations, typically have
their own assigned ranges of IP addresses and an assigned domain name; they also typically run DNS
servers to manage the mapping of those names to those addresses.

DNS Operation

DNS is a client/server network communication systems: DNS clients send requests to and receive
responses from DNS servers. Requests containing a name, that result in an IP address being returned
from the server, are called forward DNS lookups. Requests containing an IP address and resulting in a
name, called reverse DNS lookups, are also supported. DNS implements a distributed database to
store this name and last-known address information for all public hosts on the Internet.

DNS servers answer requests from both inside and outside their own domains. When a server receives
a request from outside the domain for information about a name or address inside the domain, it

3
ATBU_DMS_CS212 (Web Programming)
provides the authoritative answer. When a server receives a request from inside its own domain for
information about a name or address outside that domain, it passes the request out to another server --
usually one managed by its internet service provider. If that server does not know the answer or the
authoritative source for the answer, it will reach out to the DNS servers for the top-level domain --
e.g., for all of .com or .edu. Then, it will pass the request down to the authoritative server for the
specific domain -- e.g., techtarget.com or stkate.edu; the answer flows back along the same path.

The DNS is a hierarchical system and each part of a domain name is referred to as either the root, top
level, second level or as a sub-domain. The InterNIC handles many of the top level domains. The
second and third level domains are handled at DNS servers that are usually located at the Domain
owner's site. This means that queries only go to the root once, and only if the local DNS server doesn't
already manage that domain.

Within the hierarchy, resolution will start at the top level domain, then work down to the second-level
domain, then through zero, one or more sub-domains until it gets to the actual host name to be
resolved into an IP address.

It is traditional to use different DNS servers for each level of the DNS hierarchy. The root of all DNS
entries is handled by the DNS servers at the InterNIC. The InterNIC points the Top Level Domains
(TLDs) name servers maintained by all registrars such as Network Solutions, Register.Com,
OpenSRS and many others. Next each domain's server will delegate to the DNS server at the next
lower level in the hierarchy.

The following figure shows the DNS hierarchy for resolving the URL http://eos.cs.berkeley.edu
The top level domain, berkeley is the second level domain, and .cs is the sub-domain of berkeley. Eos
is the host name. A DNS server would store the IP address of the host where its name resides in the
tree.

4
ATBU_DMS_CS212 (Web Programming)
WEB APPLICATION

A Web application (Web app) is an application program that is stored on a remote server and
delivered over the Internet or intranet, usually through a web browser interface. In its simplest form, a
web application is an interactive system that allows its users to execute business logic that resides on a
server and to view the results of that logic through a web browser on a client workstation.

In contrast with a website that simply delivers content from static files, a web application presents
dynamically tailored content often based on user input, tracked user behaviours, and security
considerations.

Examples of Web Applications are Online Banking applications, Social Networking Sites, Online
Reservations, eCommerce / Shopping Cart Applications, Interactive Games, Online Training, Online
Polls, Blogs, Online Forums, Content Management Systems, etc..

Web applications are built with HTML, CSS & JavaScript. Server-side programming languages like
PHP, Java, Ruby, or Python are also used to encode or implement the applications business logic.

5
ATBU_DMS_CS212 (Web Programming)
These languages make the organizing of databases easier, as well as manage user requests for new
web pages as they navigate a site.

Web applications are built on a client/server architecture. Web servers provide a “central hub” where
not only HTML documents are stored, but also the processes required to store, manipulate, and
distribute data in real time as users interact with a site. Web applications almost always use databases,
and because of that they are called dynamic.

The business logic is contained in the application itself, which runs on the server and uses HTTP to
communicate with clients over the Internet. The web server manages the application, passes requests
from clients to the application, and returns the application's responses to the client.

On the client side, the web application is viewed with a browser. The application's user interface takes
the form of HyperText Markup Language (HTML) pages that are interpreted and displayed by the
browser. In addition to text, these HTML pages can contain web forms, image files, audio and video
clips, and other types of displayable data.

A Web application is usually a three-tier structure comprising: User Service tier allowing user access
to the application. Business Service tier which allow the business logic to be encoded.. Data tier
which manages the database the application interacts.

6
ATBU_DMS_CS212 (Web Programming)
Presentation Tier

 Concerns with user interface displays by the web browser. The user interface are build using
HTML, CSS, and JS
 Generate and submit web requests to web servers, accept responses and render the results
 Communicate with the web server using HTTP(S)
 Execute HTML, CSS and JavaScript code to produce visual presentations of a web page

Business Logic Tier

 Answers to HTTP(S) requests from the web browser

 Reads and writes data in a persistent data store,
 Performs most of the business logic, i.e the code that transforms data to provide the
specialized functionality offered by a business, service
 Consists in a general of a server/container (Apache, Tomcat) and framework (PHP, Java
Servlets, etc.) running business logic.

Data Tier

 Historically a (My)SQL database, some more recent evolutions include MongoDB, InnoDB
etc

The term Back-end is used to refer to the tasks that needs to be done in the server, but which is not
triggered by a client request. Front-end to refer to the client side, comprising of the tasks that are
executed by the browser.

Although web applications can use a website as the front end to their business logic, you can do many
things in a web application that you can't do with a static website, such as:

 Identify specific users and present a customized interface for each user
 Collect information from users and store that information on the server
 Perform tasks for users, such as retrieving information from a database, registering to access
specific content, or placing an order for a product

Web application benefits:

 Easy to deploy and upgrade,

 Cross-platform compatibility,
 Limited resources on client side,
 Interoperability.

7
ATBU_DMS_CS212 (Web Programming)
Web application drawbacks:

 Limitations on user interface compared to native Graphical User Interface,

 Compatibility issues with some web browser,
 Require a network connection,
 The user does not own the software.

Web Server Overview

A web server stores and delivers the content for a website – such as text, images, video, and
application data – to clients that request it. The most common type of client is a web browser
program, which requests data from your website when a user clicks on a link or downloads a
document on a page displayed in the browser.

A web server communicates with a web browser using the Hypertext Transfer Protocol (HTTP). The
content of most web pages is encoded in Hypertext Markup Language (HTML). The content can be
static (for example, text and images) or dynamic (for example, a computed price or the list of items a
customer has marked for purchase). To deliver dynamic content, most web servers support server-side
scripting languages to encode business logic into the communication. Commonly supported languages
include Active Server Pages (ASP), Javascript, PHP, Python, and Ruby.

A web server might also cache content to speed delivery of commonly requested content. This process
is also known as web acceleration. A web server can host a single website or multiple websites using
the same software and hardware resources, which is known as virtual hosting. Web servers can also
limit the speed of response to different clients so as to prevent a single client from dominating
resources that are better used to satisfy requests from a large number of clients. While web servers
typically host websites that are accessible on the Internet, they can also be used to communicate
between web clients and servers in local area networks such as a company’s intranet. A web server
can even be embedded in a device such a digital camera so that the users can communicate with the
device via any commonly available Web browser.

Popular Server-side Languages

As mentioned above, the goal of a web server is to distribute the correct HTML files to the clients
requesting them, maintain databases, and validate user inputs like login credentials. All server-side
languages perform the same core functions, just in varying styles, speeds, and techniques. As the web
has grown, so have the number of server-side languages to choose from. Following are some popular
server-side languages

8
ATBU_DMS_CS212 (Web Programming)
  C# - C# was developed by Microsoft and is typically used by businesses to manage large
databases. Because of the prevalence of existing Microsoft software in businesses, C# was
adopted quickly. Associated Framework: ASP.NET
 Go – Go is a programming language created by Google with performance in mind. Google
does things at an unprecedented level of scale, so instead of making existing languages adapt
to their needs, they decided it would be a better idea to make a new one with scalability in
mind. Associated Frameworks: Gorilla & Revel
 Java – Java is one of the oldest and most widely adopted programming languages. Originally
intended to be used to develop standalone desktop applications, a team of developers found a
way to use it on web servers in the early 2000s. Associated Framework: Spring
 Python – Python is popular in universities to teach students their first programming
languages, and it is widely used in production. Since it’s popular in academic hubs, its
community thrives in writing math and science libraries. Associated Framework: Django
 PHP – Unlike other languages that had to be adapted for use on the web, PHP was designed
with web development in mind from day one. Many content management systems like
Wordpress are written in PHP. Associated Frameworks: Laravel & Symfony
 Ruby – Ruby touts itself as an elegant and productive programming language. Originally
popular in Japan in the ’90s, Ruby grew in popularity in the rest of the world after its now
renowned framework, Ruby on Rails, was added. Associated Framework: Ruby on Rails

Approaches of Building Web Application

Two approaches exists

1. Page-centric approach
2. MVC approach

Page Centric approach

In this approach, web app is a collection of pages which contain html, css javascripts, and server side
code embedded within the html tags. The server side codes implements the actual business logic of
the application. In this approach, user accesses the pages by simply specifying the page name together
with its extension in the url.

Request

PHPPHP
PHP
pages DataBase
Response
pages
pages

Figure: visual representation web application build using page-centric approach

9
ATBU_DMS_CS212 (Web Programming)
Problems associated with this approach include:

 Maintenance nightmare: Code is the mixture of presentation, business and data access layers.
This makes difficult to fix errors or extend the program when the need arise.
 Duplication of code
 No reusability of code
 Difficulty in documenting the application
 Lack of true separation or clear demarcation of the 3 tiers of the web application, allowing
changes in one tier to be as independent as possible from changes in any other tier
 It contradict the design principle which require software applications to exhibit loose-
coupling and tight cohesion

Model View Controller (MVC)

The Model-View-Controller architectural pattern (MVC) divides an interactive application into three
components. The model contains the core functionality and data. Views display information to the
user. Controllers handle user input. Unlike page centric approach, user accesses the application by
specifying the controller which renders the appropriate page (view). MVC approach elegantly
separates presentation, business and data tier of web application.

Model

Perform the core business logic. ie, implements the user’s requirements. It captured the app’s
behaviour in terms of its problem domain. It also manages the app’s data. Technically model, is bunch
of Object Oriented classes and methods required to implement the app’s functionalities.

View

Concerns with user interface. That is, how information is presented or displayed to the user. This is
where HTML, CSS, JS etc resides.

Controller

The controller act like a gateman since any request passes through it. It dictates how the components
interact. It accepts accept any request and determine the appropriate model to handle the request. It
send event of interest to model so that the model can update its state. It renders the view. Like Model,
Controller in web application is an object oriented class.

10
ATBU_DMS_CS212 (Web Programming)
 request
Controller

response Database
View Model

user
web data

Figure: Visual representation of web application build based on MVC approach

Some of the advantages of the MVC approach are:

 True separation of presentation, business and data layers

 Simplify maintenance – The app tends to be more agile enough to accommodate changes that
may arise during the app’s life
 Code clarity
 Reusability of code – Hence the OOP benefits are used to the optimum level.
 Testing is easier – Since the model is made up of purely object oriented classes, developer can
easily test different units or modules of the app
 Clear documentation – UML diagram of the system can be produce easily

Disadvantages

 Knowledge and experience of Object Oriented Programming is necessary

 Developer must rely on web application frameworks developed by other. This requires
significant effort to learn how to use the framework. More so, some of these frameworks are
buggy.

Web application Frameworks

Web Application Frameworks are sets of program libraries, components and tools organized in an
architecture system allowing developers to build and maintain complex web application projects using
a fast and efficient approach.

11
ATBU_DMS_CS212 (Web Programming)
Web Application Frameworks are designed to streamline programming and promote code reuse by
setting forth folder organization and structure, documentation, guidelines and libraries (reusable codes
for common functions and classes) offering standards and conventions that entire development teams
can get behind. Frameworks are built on a language-by-language basis. Examples of web application
frameworks are Laravel, CodeIgniter – [PHP frameworks], Spring – [Java Framework], Django –
[Python] etc.

12
ATBU_DMS_CS212 (Web Programming)