How do changes made on the client side reach the…

As a rule, changes made by the user in a web application (on the client side) are sent to the server via an HTTP request.

Types of HTTP requests:

POST: Used to create a new resource or send data for server processing. Often used for form data.
PUT: Used to update an existing resource. The full state of the resource is transmitted.
PATCH: Used for partial updates of a resource. Only changed fields are transmitted.
DELETE: Used to delete a resource.

Example data flow:

The user enters data into a form on a web page.
JavaScript on the client side collects this data (for example, into a JSON object).

An HTTP request (e.g., POST or PUT) is made to a specific API endpoint of the server. Data is attached to the request body.

// Example of sending data to the server using fetch API
const data = { username: 'newuser', email: 'newuser@example.com' };

fetch('/api/users', {
  method: 'POST', // or 'PUT', 'PATCH'
  headers: {
    'Content-Type': 'application/json',
    // Other headers, such as for authorization, may be included
  },
  body: JSON.stringify(data), // Convert JavaScript object to JSON string
})
.then(response => response.json()) // Parse server response as JSON
.then(data => {
  console.log('Success:', data);
  // Handle successful response
})
.catch((error) => {
  console.error('Error:', error);
  // Handle error
});

The server application receives the request and routes it to the appropriate handler (controller).
The controller extracts data from the request body.
The data undergoes validation and sanitization on the server side to ensure security and correctness.
Business logic processes the received data (e.g., checks for username uniqueness, performs necessary calculations).
The controller interacts with the data access layer (DAL) or ORM (Object-Relational Mapper).

DAL/ORM generates an SQL query or uses database methods to save, update, or delete data in the relevant table(s).

-- Example SQL INSERT
INSERT INTO users (username, email) VALUES ('newuser', 'newuser@example.com');

-- Example SQL UPDATE
UPDATE users SET email = 'updated_email@example.com' WHERE username = 'newuser';

The database performs the operation and returns the result (success or error).
DAL/ORM passes the result to the controller.
The controller forms a response for the client (e.g., JSON with success confirmation, HTTP status code 200 OK, or an error with status code 400 Bad Request, 500 Internal Server Error, etc.).
The server sends the response to the client.
JavaScript on the client side processes the response (e.g., displays a success message, updates the UI, or shows an error).

The technologies used depend on the specific stack:

Client: HTML, CSS, JavaScript (React, Angular, Vue.js, etc.)
Server: Frameworks (Node.js/Express, Python/Django/Flask, Ruby/Rails, Java/Spring, PHP/Laravel, etc.)
Database: SQL (PostgreSQL, MySQL, SQL Server), NoSQL (MongoDB, Cassandra)

The entire process should be secure (HTTPS, authentication, authorization, validation) and handle possible errors at each stage.

How do changes made on the client side reach the server and get saved in the database?