Client-Server Architecture: Introduction to Web Development Concepts
Tags: webdev, beginners, tutorial, http
Published: 2024-02-07 00:36:50

Web development involves the creation and maintenance of websites and web applications. It involves combining various skills and technologies to produce a functional and visually appealing online presence.

## Prerequisites

- Basic knowledge of web development

## Objectives:

  1. Understand the foundation architecture of web applications based on the client-server model.
  2. Familiarize yourself with the HTTP protocols and other web-related protocols
  3. Gain insights into the structure of URLs and the mechanics of web requests.

Let us get started.

### <u>  Overview of Client-Server Architecture:</u>

The client-server architecture is a foundational model for web applications. As [wikipedia](https://en.wikipedia.org/wiki/Client%E2%80%93server_model) puts it, the client–server model is a [distributed application](https://en.wikipedia.org/wiki/Distributed_computing) structure that partitions tasks or workloads between the providers of a resource or service, called servers, and service requesters, called clients.

The client-server architecture divides the system into two primary components:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a8vfalfku0qyotcjyv3a.png)

  Client:

The client is the user interface or an application that interacts with the user. It can be a browser, mobile app, or any system application communicating with the server and displaying information.

  Server:

The server is a powerful computer or a set of computers responsible for storing, processing, and managing data and resources. It responds to client requests by providing the requested information or performing specific actions.

### <u>Basics of HTTP and Web Protocols:</u>

[HTTP(Hypertext transfer protocol)](https://en.wikipedia.org/wiki/HTTP), is a protocol used for exchanging information over the internet. The HTTP is based on an [application layer](https://en.wikipedia.org/wiki/Application_layer) of the [OSI model](https://en.wikipedia.org/wiki/OSI_model). It forms the foundation of the World Wide Web and allows communication between web browsers and servers.

The key aspects of HTTP include:

 - Request-response Model: The client sends a request to the server, and servers respond with the requested data. Request and response have specific formats and structures defined by the protocol. Lets use [http/1.1](https://http.dev/1.1) as an example:

 _Example of a request:_

```
HTTP
GET / HTTP/1.1
Host: developer.mozilla.org
Accept-Language: fr
```

_Example of a response:_

```
HTTP
HTTP/1.1 200 OK
Date: Wen, 07 Feb 2024 14:28:02 GMT
Server: Apache
Last-Modified: Mon, 25 Dec 2023 20:18:22 GMT
ETag: "51142bc1-7449-479b075b2891b"
Accept-Ranges: bytes
Content-Length: 29769
Content-Type: text/html

<!DOCTYPE html>… (here come the 29769 bytes of the requested web page)
```

- Statelessness: HTTP is stateless, meaning each request from the client is independent and unrelated to the previous request. To maintain the state, mechanisms like [cookies or sessions](https://web.stanford.edu/~ouster/cgi-bin/cs142-fall10/lecture.php?topic=cookie/) are used.



- [Methods](https://www.tutorialspoint.com/http/http_methods.htm): HTTP defines different methods for requests, such as:

  
  - GET - retrieving data
  - POST - submitting data
  - PUT  - updating data
  - DELETE - removing data, etc.

_Other Web Protocols:_

FTP (File Transfer Protocol): FTP is a protocol used for transferring files between a client and a server on a computer network.

SMTP (Simple Mail Transfer Protocol): SMTP is a protocol used for sending email messages between servers.

DNS (Domain Name System): DNS is a protocol used to translate domain names into IP addresses, enabling users to access websites using human-readable names.


### <u>Understanding URLs and Web Requests:</u>

**_URL:_**

URL or Uniform Resource Locator, is a string of characters that identifiers a particular web resource on the internet. Such resources can be an HTML page, a CSS document, an image, etc. Here are the components of URLs:


![Uniform resource locator](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pxzd7ph6fhqsf76v19v7.png)

- Scheme: Indicates the protocol used to access the resource (e.g., http, https, FTP).

- Hostname: Specifies the domain name or IP address of the server hosting the resource.

- Path: Specifies the specific location or file on the server's filesystem.

- Port: Optionally specifies the port number through which the client communicates with the server. Default ports are used if not specified (e.g., 80 for HTTP, 443 for HTTPS).

- Query Parameters: Additional data appended to the URL, typically used to pass information to the server.

- Fragment Identifier: Specifies a specific section or anchor within a web page.

**_Web request_**

A web request is a request made by a client, such as a web browser to a server to retrieve a web page or other resources.



![Client-server](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/797059rkrfu88tbeykcl.png)

When a user enters a URL into a web browser or clicks on a hyperlink, the browser sends a web request to the website’s server. The server then responds by sending the requested resource back to the client. The resource can be a web page, an image, a video, or any other type of file that can be transmitted over the internet.

_What are the Types of Web Requests_:

  - GET - retrieving data
  - POST - submitting data
  - PUT  - updating data
  - DELETE - removing data, etc.


In conclusion, We explored web development concepts, gaining a solid foundation for understanding the internet's underlying mechanisms. We delved into the client-server architecture, familiarized ourselves with HTTP and other web protocols, and gained insights into URLs and web requests. By mastering these concepts, we have equipped ourselves with the necessary knowledge to build dynamic and interactive web applications.