Module 1
Web Application
Elaborate the basic concept of a web application.
Define and explain the common Internet terminologies.
Compare and contrast the different types of web application
architectures.
Classify web development tools as either a client-side or server side.
Enumerate the characteristics of dynamic website and static
website.
Review of Terms
Internet
WWW
Web Browser
Search
Engine
Web Page / Website
ISP
Homepage
Hyperlink
URL
Client
Domain name
Server
Top level domain
Client and Server Computers
Server- are computers that host web documents and provide
information through a web server program
Client- computers access web documents using an application
program called web browsers
How the Web Works
5) User receives file displayed by
the browser
4) Server sends requested files to browser to
be interpreted
1) User sends request
https://qph.ec.quoracdn.net/main-qimg-533a338c90ce1139e78ad664d1b4a22c-c
2) Browser interprets user’s
selection and makes request
from appropriate server
3) Server accepts
and processes
request from
browser
Creating your Web Site Technologies & Tools
 Markup Languages
HTML, DHTML, XML, XSLT, etc....
 Cascading Style Sheets (CSS)
 Scripting languages
perl, javascript, php, etc....
 Web creation and editing software
Notepad, FrontPage, Coldfusion, Flash, Hotmetal,
Site Builder, etc..
Web Application (web app)
Is a client–server software application in which the client (or user
interface) runs in a web browser.
is an application program that is stored on a remote server and
delivered over the Internet through a browser interface.
are dynamic web sites combined with server side programming which
provide functionalities such as interacting with users, connecting to backend databases, and generating results to browsers.
Examples of Web Applications are Online Banking, Social Networking,
Online Reservations, eCommerce / Shopping Cart Applications,
Interactive Games, Online Training, Online Polls, Blogs, Online Forums,
Content Management Systems, etc..
Reference: Web Application Development 1 Course Material 2017-2018
Request and Response Model
The basic methods computers use to communicate with each
other, in which the first computer sends a request for some data
and the second computer responds to the request.
Powerful messaging pattern allows two applications to have a
two-way conversation with one another over a channel. This
pattern is especially common in client–server architectures.
Reference: Web Application Development 1 Course Material 2017-2018
Web Application Architectures
The browser creates HTTP requests for specific URLs that map to
resources on a Web server.
The server renders and returns HTML pages to the client, which the
browser can display.
The core of a Web application is its server-side logic. The application can
contain several distinct layers.
The typical example is a three-layered architecture comprised of
presentation, business, and data layers.
Reference: Web Application Development 1 Course Material 2017-2018
Web
Application
Architectures
Reference: Web Application Development 1 Course Material 2017-2018
Tiers
Represent the physical separation of the
presentation, business, services, and data
functionality of your design across separate
computers and systems.
Common tiered design patterns are two-tier,
three-tier, and n-tier.
Reference: Web Application Development 1 Course Material 2017-2018
2-tier Architecture
 with two main components, a client and a server.
 the client and server may exist on the same machine,
or may be located on two different machines.
Reference: Web Application Development 1 Course Material 2017-2018
3-tier Architecture
The client interacts with application software deployed on a separate
server, and the application server interacts with a database that is also
located on a separate server.
This is a very common pattern for most Web applications and Web
services.
Reference: Web Application Development 1 Course Material 2017-2018
N-tier Architecture
The Web server (which contains the presentation layer logic) is
physically separated from the application server that implements
the business logic. This usually occurs for security reasons, where
the Web server is deployed within a perimeter network and
accesses the application server located on a different subnet
through a firewall. It is also common to implement a firewall
between the client and the Web tier.
Reference: Web Application Development 1 Course Material 2017-2018
Dynamic and Static Websites
Static Website
Is the simplest kind of website you
can build.
Written in HTML and CSS only, with
no scripting.
The only form of interactivity on a
static website is hyperlinks.
Static Web pages display the exact
same information whenever anyone
visits it.
Advantages of static web sites
• Quick to develop
• Cheap to develop
• Cheap to host
Disadvantages of static web
sites
• Requires web development
expertise to update site
• Site not as useful for the
user
• Content can get stagnant
Reference: Web Application Development 1 Course Material 2017-2018
Dynamic and Static Websites
Dynamic Website
•Is a website that not only uses HTML and CSS, but includes website
scripting as well.
•There are two main reasons why you’d want to use website scripting on
your site:
1. you want an interactive web app that people can use, not just read
2. you want to be able to share HTML code between your pages.
Dynamic Web pages are capable of producing different content for
different visitors from the same source code file.
Reference: Web Application Development 1 Course Material 2017-2018
Dynamic and Static Websites
Advantages of dynamic web sites
• Much more functional website
• Much easier to update
• New content brings people back to the site and helps in the
search engines
• Can work as a system to allow staff or users to collaborate
Disadvantages of dynamic web sites
• Slower / more expensive to develop
• Hosting costs a little more
Reference: Web Application Development 1 Course Material 2017-2018
Dynamic Website
https://visualedgedesign.com/wp-content/uploads/2015/04/dynamic-website-graphic.jpg
Static vs. Dynamic Website
http://www.stevespence.org/courses/writing-for-digital-media/images/static-vs-dynamic-website.jpg
Client-side and Server-side Scripting
Two main categories of coding, scripting and
programming for creating Web Applications:
•Client-side scripting / coding
•Server-side scripting /coding
Reference: Web Application Development 1 Course Material 2017-2018
Client-side Environment
•Client Side Scripting is the type of code that is executed or interpreted by
browsers. The processing takes place on the end users computer.
•The source code is transferred from the web server to the users computer
over the internet and run directly in the browser.
•Below are some common Client Side Scripting technologies:
 HTML (HyperText Markup Language)
 CSS (Cascading Style Sheets)
 JavaScript
 Ajax (Asynchronous JavaScript and XML)
 jQuery (JavaScript Framework Library - commonly used in Ajax
development)
Reference: Web Application Development 1 Course Material 2017-2018
Client-side Environment
https://image.slidesharecdn.com/clientsideandserversidescripting-140811003201-phpapp02/95/client-sideand-server-side-scripting-7-638.jpg?cb=1407717279
Server-side Environment
•Server Side Scripting is the type of
code that is executed or interpreted by
the web server.
•A user's request is fulfilled by running
a script directly on the web server to
generate dynamic HTML pages. This
HTML is then sent to the client
browser.
•Below are the common server-side
scripting:
• PHP,
Zend
Framework,
ASP,
ASP.NET, ColdFusion
http://www.toolinfy.com/imgs/server-side-client-side.jpg
Reference: Web Application Development 1 Course Material 2017-2018