COLLAGE OF COMPUTER ‫ك ـلــية عـلـ ـ ـ ــوم‬

SCIENCE & ENGINEERING ‫و هـنــدس ــة الحـ ـ ــاس ــب‬

UNIVERSITY OF JEDDAH ‫جـ ــامع ــة جـ ـ ـ ـ ـ ــدة‬

Welcome to the Web

Development Course
CCSW 321 (Web Development )

1
COLLAGE OF COMPUTER ‫ك ـلــية عـلـ ـ ـ ــوم‬
SCIENCE & ENGINEERING ‫و هـنــدس ــة الحـ ـ ــاس ــب‬
UNIVERSITY OF JEDDAH ‫جـ ــامع ــة جـ ـ ـ ـ ـ ــدة‬

Introduction
CCSW 321 (Web Development )

2
 What will be covered

• Introduction to WWW and its technologies.

• Web basics: Servers, DNS, URI, and URLs.

• The HTTP protocol, headers, response codes, and

message types (GET, POST, PUT, and DELETE).

• Client-Server model.

• The Evolution of the Web.

3
 Course Topics
• Introducing the Internet and World Wide Web (WWW).

• Building content with HTML5.

• Styling content with Cascaded Style Sheets CSS3.

• Adding client-side interactivity through JavaScript.

• Adding Server-side Scripting for content and state storage

through [Link] and database integration with MySQL.

4
 World Wide Web (WWW)
• The invention of the WWW is usually attributed to Tim
Berners-Lee, who, along with the Belgian Robert Cailliau,
published a proposal in 1990 for a hypertext system while
both were working at CERN in Switzerland.

5
 Introduction
Core Features of the Web
• URL to uniquely identify a resource on the WWW.

• The HTTP protocol to describe how requests and responses operate.

• A front-end software that uses HTML, CSS, and JS to publish

documents and process HTTP Requests/Responses.

• A browser to make HTTP requests and display the HTML it receives.

• A back-end software that can respond to HTTP requests, can be done

using a variety of languages, e.g., Python, PHP, JavaScript, etc.

6
 Introduction
• Web programming technologies are designed to be portable,
allowing to design web pages and applications that run across
an enormous range of Internet-enabled devices.

• Client-side programming build web pages and applications

that are run on a client’s browser.

• Server-side programming build web apps that respond to

requests from a client’s browser, such as searching the
Internet, checking bank-accounts , ordering a book from
Amazon, etc.
7
 HTML5
• HTML (Hypertext Markup Language) is a markup language designed
to specify the content and structure of web pages in a portable manner.

• Web pages are written in HTML, so browsers display a web page by

reading and interpreting its HTML.

• The HTML file might link to other resources, like images, videos, as
well as JavaScript and CSS (stylesheet) files, which the browser then
also loads.

• HTML5 is the latest version of HTML. Previously, we had HTML4,

XHTML, and others.

8
 CSS3
• Cascading Style Sheets (CSS) specify presentation or styling, of elements on
a web page (e.g., fonts, spacing, sizes, colors, positioning). CSS designed to
style portable web pages independently of their content and structure.

• Although HTML5 provides capabilities for controlling presentation, it’s best

practice NOT to mix it with content.

• Separating styling from page content and structure, can easily change the
look and feel of the pages on an entire website, or a portion of a website,
simply by swapping out one style sheet for another.

• CSS3 is the current version of CSS.

9
 JavaScript
• Helps build dynamic web pages (i.e., pages that can be modified
“on the fly” in response to events, such as user input, time
changes, and computer apps.

• Enables the client-side programming of web apps.

• JavaScript is a portable scripting language. Programs written in

JavaScript can run in web browsers across many devices to create
client-side interactivity.

• JavaScript can also run on the server for server-side scripting,

e.g., to integrate with a database.
10
 Web Basics: Web Server
• Any machine, including your own laptop, can be configured to
act as a “server”.

• A web server is a program running on a computer that delivers

web pages in response to requests.

• It either stores or generates the web page returned.

11
 Web Basics: DNS
• Human beings do not enjoy having to recall long strings of numbers.

• Instead of IP addresses, we use the Domain Name System (DNS)

• An Internet Domain Name System (DNS) server keeps a database of

hostnames and their corresponding IP addresses and performs automatic
translations.

12
 Web Basics: URIs and URLs
• URIs (Uniform Resource Identifiers) identify resources on the
Internet. URIs that start with http:// are called URLs (Uniform
Resource Locators).

• A URL contains information that directs a browser to the resource

that the user wishes to access.

• Web servers make resources available to web clients.

• Popular web servers include Apache’s HTTP Server and

Microsoft’s Internet Information Services (IIS).

13
 Web Basics: URL
• In order to allow clients to request a particular resources from the
server, a naming mechanism is required so that the client knows
how to ask the server for file.

• That naming mechanism is the Uniform Resource Locator

• A path includes the folder(s) / directory(ies) and the page

filename and extension

14
 Web Basics: URL

Part Description
Domain The domain identifies the server from which we are
requesting resources

Port The optional port attribute allows us to specify

connections to ports other than the defaults

Path The path is a familiar concept to anyone who has ever

used a computer file system. The root of a web server
corresponds to a folder somewhere on that server

15
 Web Basics: URL Example
• [Link]

• [Link] A Hypertext Transfer Protocol to get a resource.

• [Link] : Qualified hostname of the web-server

• The hostname is translated into an IP (Internet Protocol) address,

a unique value that identifies the web server.

• An Internet Domain Name System (DNS) server keeps a database

of hostnames and their corresponding IP addresses and performs
automatic translations.

16
 Web Basics: URL Example
• (/books/[Link]) specifies resource’s location /books and
name ([Link]) on the web server.

• The location could represent an actual directory on the web

server’s file system. For security reasons, though, the location is
typically a virtual directory.

• The web server translates the virtual directory into a real location
on the server, thus hiding the resource’s true location.

17
 The HTTP Protocol
• The World Wide Web is about communication between web clients and web
servers. The HTTP or Hypertext Transfer Protocol handles communication
between the client (i.e., browser) and the server (where files resides).

• The client identifies itself with the user-agent, which is any tool that makes
requests for the benefit of the user. This is typically a web browser, although
other applications interact with resources using HTTP as well.

• The web server is the entity that serves the documents, or resources, that are
requested by the client. The server will also appear as a single machine but in
reality, can be a network of servers.

18
 The HTTP Protocol
• The HTTP protocol has main components are the client, the server,
and the method of communication.

• HTTP has two message types: HTTP Request and HTTP Response.

• Each message contain: Headers, body, method type.

• The headers supply the server with additional information it may

need.

• The body contains the content of the message.

19
 The HTTP Protocol
• The method specifies what operation is to be performed. Many
methods exist, but the most common are:
◦ GET: used to request data from a specified resource.

◦ POST: used to send data to a server to create a resource.

◦ PUT: used to send data to a server to update a resource.

◦ DELETE: used to delete a specified resource.

• More details on GET vs. POST will be discussed later.

20
 The HTTP Protocol
• Communication between clients and servers is done by requests
and responses as follows:
◦ A client (a browser) sends an HTTP request to the web.

◦ A web server receives the request.

◦ The server runs an application to process the request.

◦ The server returns an HTTP response (output) to the browser.

◦ The client (the browser) receives the response.

21
 The HTTP Protocol
1. When you open your browser and type in a URL, which is the
address of the HTML file on the internet.

[Link]

22
 The HTTP Protocol
2. The browser asks the web server that hosts the
document to send that document (e.g., sends a request).

[Link]

request

23
 The HTTP Protocol
3. The web server responds to the browser with the
HTML file that was requested.

[Link]

response

24
 The HTTP Protocol
4. The browser reads the HTML, sees the embedded
resources and asks the server for those as well.

[Link]

Req/Resp

25
 The HTTP Protocol
5. The web page is loaded when all the resources are
fetched and displayed.

26
 The HTTP Protocol Headers
• Headers are one of the most powerful aspects of HTTP, they
define what kind of response the server will send.

• Request headers include data about the client machine.

◦ Web developers use this information for analytic reasons and for site customization.

◦ Some the Request headers include: Host, User Agent , Accept, Connection,…

• Response headers have information about the server answering

the request and the data being sent.

27
 The HTTP Protocol Headers
Request Description
Header
Host it allows multiple websites to be hosted off the same
IP address
User-Agent the most referenced header in modern web
development. It tells us what kind of operating system
and browser the user is running

Accept It tells the server what kind of media types the client
can receive in the response
Connection this header specifies whether the server should keep
the connection open, or close it after response

28
 The HTTP Protocol Headers
Response Description
Header
Response are integer values returned by the server as part of
codes the response header
Server tells the client about the server. It includes the type
of operating system the server is running as well as
the web server software that it is using
Last-Modified contains information about when the requested
resource last changed
Content-Type To accompany the request header Accept, it tells
the browser what type of data is attached in the
body of the message
Content- specifies how large the response body (message)
Length will be

29
The Response Codes

30
 HTTP Methods
• The HTTP protocol defines several different types of requests,
each with a different intent and characteristics.

• The most common requests are the GET and POST request

31
 HTTP Methods: GET
• A GET request typically retrieves information from a server, such
as an HTML document, or search results based on a user-
submitted search term.

• GET requests are only used to request data (not modify)

• GET requests should never be used when dealing with sensitive

data.

• A GET request typically has length restrictions due to its use of

query strings for data sending, so it’s often necessary to send
large amounts of information using the POST method instead.
32
 HTTP Methods: GET Querystring
• A GET request appends data to the URL, e.g.,
[Link]/search?q=deitel:
• search is the name of Google server-side form handler
• q is the name of a variable in Google’s search form
• deitel is the search term
• ? separates the query string from the rest of the URL
• A name/value pair is passed to the server with the name and the value
separated by an equals sign (=).
• If more than one name/value pair is submitted, each pair is separated by an
ampersand (&).
• The server uses data passed in a query string to retrieve and send an
appropriate resource.

33
 HTTP Methods: POST
• A POST request typically sends data to a server (e.g. form data or
documents).

• A POST request sends form data as part of the HTTP message body, not as part
of the URL.

• POST requests have no restrictions on data length.

• The POST method is also preferred for sending sensitive data because it
hides the submitted data from the user by embedding it in an HTTP message.

• If a form submits several hidden input values along with user-submitted data,
the post method might generate a URL like [Link]/search.

34
 Client-Server Model
• Within the client-server model, the request-response loop is the most basic
mechanism on the server for receiving requests and transmitting data in
response

• The client initiates a request to a server and gets a response that could include
some resource like an HTML file, an image or some other data

35
 Client-Server Model
• In the client-server model, there are two types of actors: clients
and servers.

• The server is a computer agent that is normally active 24 hours a

day, 7 days a week (or simply 24/7), listening for queries from
any client who make a request.

• A client is a computer agent that makes requests and receives

responses from the server, in the form of response codes, images,
text files, and other data.

36
Client-Server Model

37
 Evolution of WWW
• Web 1.0: It was ready only. You can only search and view web
documents, i.e., websites.

• Web 2.0: Embraced an architecture of participation: a design that

inspires user interaction and community contributions. This is
how social social media websites started! Users now can
participate in the creation of web documents.

• Web 3.0: The decentralized approach where everything runs on

the blockchain.

38
 Any questions?
Please feel free to raise your
hands and ask.

39