How the Web Works

Mark Fontenot, PhD

Northeastern University

How the Web Works - Client/Server Model

Network/Internet

IP4 Address: 192.168.0.56

​

Unique to this computer on its network (and perhaps on the public internet as well)

S

E

R

V

E

R

IP4 Address: 142.250.80.46

Listening on Port 80

​

Client

Server

Client and Server

• Server
• usually one or more processes running on a system accessible over the network
• server processes listen on a port for incoming client connections
• Some Standard Ports: HTTP - 80; SSH - 22; HTTPS - 443; MySQL - 3306
• usually, one server can handle numerous client connections simultaneously
• receives requests, processes them, sends response
• Client
• connects to server over the network using IP and port
• sends requests, gets response, processes response.

3-Tier Software Architecture

From AWS Documentation on Software Architecture

3-Tier Software Architecture

From AWS Documentation on Software Architecture

Possibly (Usually) Different Systems

AppSmith Python Flask MySQL

Flask is an unopinionated framework used to build web applications, including REST APIs.

Basics of Web Request/Response Cycle - 1

1. Enter the URL in the browser

Basics of Web Request/Response Cycle - 2

1. Enter the URL in the browser

2. DNS Service converts domain name into IP address.

D

N

S

northeastern.edu

155.33.17.68

Basics of Web Request/Response Cycle - 3

1. Enter the URL in the browser

2. DNS Service converts domain name into IP address.

D

N

S

northeastern.edu

155.33.17.68

3. Browser sends a request to server at�155.33.17.68:80 (or port 443)

W

E

B

​

S

E

R

V

E

R

Server at IPv4: 155.33.17.68 -

Web Server “Listening” on Port 80 and 443 for HTTP/HTTPS request

Basics of Web Request/Response Cycle - 4

1. Enter the URL in the browser

2. DNS Service converts domain name into IP address.

D

N

S

northeastern.edu

155.33.17.68

3. Browser sends a request to server at�155.33.17.68:80 (or port 443)

W

E

B

​

S

E

R

V

E

R

Server at IPv4: 155.33.17.68 -

Web Server “Listening” on Port 80 and 443 for HTTP/HTTPS request

4. Web Server gathers all necessary info to respond to the request, including possibly querying a database.

DBMS

Server at IPv4: 155.33.17.128 -

MySQL “Listening” on Port 3306 for a connection

Basics of Web Request/Response Cycle - 5

1. Enter the URL in the browser

2. DNS Service converts domain name into IP address.

D

N

S

northeastern.edu

155.33.17.68

3. Browser sends a request to server at�155.33.17.68:80 (or port 443)

W

E

B

​

S

E

R

V

E

R

Server at IPv4: 155.33.17.68 -

Web Server “Listening” on Port 80 and 443 for HTTP/HTTPS request

4. Web Server gathers all necessary info to respond to the request, including possibly querying a database.

DBMS

5. Web Server sends response back to browser with info it collected and resumes waiting for next request

Server at IPv4: 155.33.17.128 -

MySQL “Listening” on Port 3306 for a connection

Basics of Web Request/Response Cycle - 5

1. Enter the URL in the browser

2. DNS Service converts domain name into IP address.

D

N

S

northeastern.edu

155.33.17.68

3. Browser sends a request to server at�155.33.17.68:80 (or port 443)

W

E

B

​

S

E

R

V

E

R

Server at IPv4: 155.33.17.68 -

Web Server “Listening” on Port 80 and 443 for HTTP/HTTPS request

4. Web Server gathers all necessary info to respond to the request, including possibly querying a database.

DBMS

5. Web Server sends response back to browser with info it collected and resumes waiting for next request

Server at IPv4: 155.33.17.128 -

MySQL “Listening” on Port 3306 for a connection

For your project:

​

Python Flask App Container

​

MySQL Container

How the Web Works - HTTP Request/Response

Network/Internet

IP4 Address: 192.168.0.56

​

Unique to this computer on its network (and perhaps on the public internet as well)

S

E

R

V

E

R

IP4 Address: 142.250.80.46

Listening on Port 80

​

Client

Server

Request

GET /hello.html

Response

​

Status Code 200, Response headers, & contents of hello.html

HTTP/HTTPS

• HTTP = Hypertext Transfer Protocol (HTTPS is Secure HTTP)
• foundation of the WWW used to engage with web-accessible resources
• operates using a request response cycle

• HTTP Request includes:
• an HTTP Method (sometimes called a verb) - GET, POST, PUT, DELETE (among others)
• a URI (a more generic form of URL)
• HTTP Request Headers
• Optional HTTP Request body

• HTTP Response includes:
• HTTP Status code (200, 404, etc.)
• HTTP Response Headers
• Optional HTTP response body

HTTP/HTTPS Methods (Verbs)

• We will use a subset of the available HTTP Methods/Verbs
• GET - usually associated with retrieving information from the system (SELECT)
• POST - usually associated with adding new information to the system (INSERT)
• PUT - usually associated with updating information in the system (UPDATE)
• DELETE - usually associated with deleting some information from the system (or marking it as inactive)

​

Building a REST API

• REST APIs are very common in modern software development
• It isn’t a protocol… it is a tool for designing software
• REST route/endpoint - an HTTP verb + URI used to access a particular resource and the function (in code) that is associated with it.
• Some differentiate between these two terms; I tend to use them interchangeably.

JSON

• JavaScript Object Notation
• A lightweight, human- and machine-readable format to transport data
• Essentially…. composed of key/value pairs like dictionary/map data structure
• JSON will be the data format returned by Flask will return to AppSmith for use in the UI.

Example JSON:

​

{

“dept”:”CS”,

“num” : 3200,

“instructors”:[“Rachlin”,

“Fontenot”]

}

https://www.json.org/json-en.html