Hoe worden de wijzigingen die op de client zijn…

Over het algemeen worden door de gebruiker in een webapplicatie (aan de clientzijde) aangebrachte wijzigingen naar de server gestuurd via een HTTP-verzoek.

Typen HTTP-verzoeken:

POST: Wordt gebruikt om een nieuwe bron te creëren of gegevens te verzenden voor verwerking door de server. Vaak toegepast op formuliergegevens.
PUT: Wordt gebruikt om een bestaande bron bij te werken. De volledige staat van de bron wordt overgedragen.
PATCH: Wordt gebruikt voor gedeeltelijke updates van een bron. Alleen de gewijzigde velden worden verzonden.
DELETE: Wordt gebruikt om een bron te verwijderen.

Voorbeeld van datastroom:

De gebruiker voert gegevens in een formulier op de webpagina in.
JavaScript aan de clientzijde verzamelt deze gegevens (bijvoorbeeld in een JSON-object).

Er wordt een HTTP-verzoek (bijvoorbeeld POST of PUT) gedaan naar een specifiek API-eindpunt van de server. De gegevens worden aan de body van het verzoek toegevoegd.

// Voorbeeld van het verzenden van gegevens naar de server met fetch API
const data = { username: 'newuser', email: 'newuser@example.com' };

fetch('/api/users', {
  method: 'POST', // of 'PUT', 'PATCH'
  headers: {
    'Content-Type': 'application/json',
    // Andere headers, bijvoorbeeld voor autorisatie
  },
  body: JSON.stringify(data), // JavaScript-object wordt omgezet in JSON-string
})
.then(response => response.json()) // Antwoord van de server wordt geparsed naar JSON
.then(data => {
  console.log('Succes:', data);
  // Verwerking van succesvolle reactie
})
.catch((error) => {
  console.error('Fout:', error);
  // Foutafhandeling
});

De serverapplicatie ontvangt het verzoek, routeert het naar de juiste handler (controller).
De controller haalt de gegevens uit de body van het verzoek.
De gegevens ondergaan validatie en sanering aan de serverzijde om veiligheid en correctheid te waarborgen.
De bedrijfslogica verwerkt de ontvangen gegevens (bijvoorbeeld controleert de uniciteit van de gebruikersnaam, voert benodigde berekeningen uit).
De controller werkt samen met de data-toegangslaag (Data Access Layer - DAL) of ORM (Object-Relational Mapper).

DAL/ORM genereert een SQL-query of gebruikt database-methoden om gegevens op te slaan, bij te werken of te verwijderen in de betreffende tabel(len).

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

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

De database voert de operatie uit en geeft het resultaat terug (succes of fout).
DAL/ORM geeft het resultaat door aan de controller.
De controller vormt een antwoord voor de client (bijvoorbeeld JSON met bevestiging van succes, HTTP-statuscode 200 OK, of fout met statuscode 400 Bad Request, 500 Internal Server Error, enz.).
De server stuurt het antwoord naar de client.
JavaScript aan de clientzijde verwerkt het antwoord (bijvoorbeeld toont een bericht van succes, werkt de UI bij of toont een fout).

De gebruikte technologieën hangen af van de specifieke stack:

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

Het hele proces moet veilig zijn (HTTPS, authenticatie, autorisatie, validatie) en mogelijke fouten op elk punt afhandelen.

Hoe worden de wijzigingen die op de client zijn aangebracht naar de server gestuurd en in de database opgeslagen?