CIM 322

Internet-Based
Programming (with
JavaScript & HTML5)

1
 Week 1

Topic 1: Introduction to
Web Programming

2
Lecture Overview

3
 Web Development
• Web page design (web design) - Visual design
and creation of documents appearing on the
World Wide Web
• Web page authoring (web authoring) -
Creation and assembly of the tags, attributes,
data making up a web page.

4
• Web development (web programming) -
Design of software applications for a website.
• Web Application - is a program that is
executed on a server but is accessed through a
web page loaded in a client browser.

5
The WWW Client/Server Architecture
• Client/Server Architecture – computer system
in which a server waits for a request from a
client computer in order to provide the
resources or services requested for.
• there are 2 types:
i. 2-tier
ii. 3-tier architecture

6
Two-Tier Client/Server System

7
• The Two-tier system consists of a client and
server.
• Server (back end) - Usually a database from
which a client requests for information.
• A server fulfills a request for information by
managing the request or serving the
requested information to the client—hence
the term, “client/server.”

8
• Web built on a two-tier client/server system
• Requests and responses through which a web
browser and web server communicate happen
with HTTP

9
• Client (or front end) – the primary role is to
implement the user interface.
• Other roles include:
i. Gathers information from user
ii. Submits information to server
iii. Receives, formats, presents results returned
from the server

10
• The main responsibilities of a server are
usually data storage, management, and
communicating with external services.
• On client/server systems, heavy processing,
such as calculations, usually takes place on the
server.

11
• Three-tier, multitier, client/server system

12
• It consists of:
i. Client tier - implements the user
interface
ii. Processing tier - handles the interaction
between the client and the data storage
tier.
Also called the processing bridge.
iii. Data storage tier – stores data in a
database
13
• Processing can still take place in both the
client-tier and database-tier.
• N/B: The three-tier architecture is more
conceptual than physical. The two can be
located in the same server computer.

14
 Static Vs Dynamic Web Pages
How Static Web Pages Are Processed

15
• Static web page: is an HTML document that's
stored on the web server and doesn't change.
• When the user requests a static web page, the
browser sends an HTTP request to the web
server.
• The web server retrieves the HTML document/file
and sends it back to the browser as part of an
HTTP response.
• When the browser receives the HTTP response, it
renders the HTML into a web page that is
displayed in the browser.
16
How Dynamic Web Pages Are Processed

17
• A dynamic web page is a page that is
generated by a program (script) running on a
web server.
• When a web server receives a request for a
dynamic web page, it looks up the extension
of the requested file to determine which
application server should process the request.
• When the application server receives a
request, it runs the specified script.

18
• Often, this script uses the data that it gets from
the web browser to get the appropriate data
from a database server. This script can also store
the data that it receives in the database.
• When the application server finishes processing
the data, it generates the HTML document and
returns it to the web server.
• Then, the web server returns the HTML
document (web page) to the web browser as part
of an HTTP response.
19
 Client-Side Scripting
• Client-side scripting - refers to programming
with a scripting language that runs on a local
browser (on the client tier) instead of on a
web server.
• Example: JavaScript, VBScript etc.
• Scripting language – a type of language that is
capable of programmatically controlling a web
page.

20
• Scripting engine - the part of a browser that
executes scripting language code.
• A scripting engine is an interpreter.
• A web browser that contains a scripting
engine is called a scripting host.

21
Uses of Client-Side Scripts
i. Turn static web pages into applications such as games
or calculators.
ii. Validate user input
iii. Change the contents of a web page after a browser
has rendered it.
iv. Create visual effects such as animation.
v. Control the web browser window itself.
vi. Work with information such as device orientation,
speed, and geolocation reported by
vii. web-connected devices

22
 Server-Side Scripting
• Server-side scripting - Scripting language
executed from a web server
• Popular languages: PHP, ASP.NET, Python,
Ruby
• Server-side scripts can be used to develop
interactive web sites to communicate with a
database.

23
• Server-side scripting languages work in the
processing tier and have the ability to handle
communication between the client tier and
the data storage tier.
• At the processing tier, a server-side scripting
language usually prepares and processes the
data in some way before submitting it to the
data storage tier.

24
Uses of Server-Side Scripts
i. Shopping carts
ii. Search engines
iii. Discussion and commenting systems
iv. Web-based email systems
v. Authentication and security mechanisms
vi. Blogs and content management systems
vii. Multiplayer games

25
Server-side scripting language limitations
i. Cannot access or manipulate a web browser
ii. Cannot run on a client tier

26
 When to Use Client Scripts Vs Server
Scripts
• Use client scripts to handle the user interface
processing and light processing e.g. data
validation.
• Use server scripts to perform intensive
calculations and data storage.
• Rule: it is important to perform as much
processing as possible on the client.

27
 Advantages of Client Scripts (Apps)
1. Distributing processing among multiple clients
creates applications that are more powerful
because the processing power is not limited to
the capabilities of a single computer.
2. Client devices—including computers, tablets,
and smartphones—become more powerful
every day. Thus, it makes sense t use a web
application to harness some of this power and
capability.

28
3. Local processing on client computers
minimizes transfer times across the Internet
and creates faster applications.
4. Performing processing on client computers
decreases the amount of server resources
needed by application providers, decreasing
costs for infrastructure and power use.

29