Cum ajung modificările făcute pe client pe server și…

În general, modificările făcute de utilizator într-o aplicație web (pe client) sunt trimise către server printr-o solicitare HTTP.

Tipuri de solicitări HTTP:

POST: Este utilizat pentru a crea o resursă nouă sau pentru a trimite date pentru procesare către server. Adesea utilizat pentru datele din formulare.
PUT: Este utilizat pentru a actualiza o resursă existentă. Se transmite starea completă a resursei.
PATCH: Este utilizat pentru actualizări parțiale ale unei resurse. Se transmit doar câmpurile modificate.
DELETE: Este utilizat pentru a șterge o resursă.

Exemplu de flux de date:

Utilizatorul introduce date într-un formular pe pagina web.
JavaScript pe partea client colectează aceste date (de exemplu, într-un obiect JSON).

Se face o solicitare HTTP (de exemplu, POST sau PUT) către un endpoint API specific al serverului. Datele sunt atașate la corpul solicitării.

// Exemplu de trimitere a datelor către server folosind fetch API
const data = { username: 'newuser', email: 'newuser@example.com' };

fetch('/api/users', {
  method: 'POST', // sau 'PUT', 'PATCH'
  headers: {
    'Content-Type': 'application/json',
    // Alte anteturi, de exemplu, pentru autorizare
  },
  body: JSON.stringify(data), // Convertim obiectul JavaScript în șir JSON
})
.then(response => response.json()) // Analizăm răspunsul serverului în JSON
.then(data => {
  console.log('Succes:', data);
  // Procesarea răspunsului de succes
})
.catch((error) => {
  console.error('Eroare:', error);
  // Procesarea erorii
});

Aplicația server primește solicitarea, o direcționează către handler-ul corespunzător (controler).
Controlerul extrage datele din corpul solicitării.
Datele trec prin validare și sanitizare pe partea serverului pentru a asigura securitatea și corectitudinea.
Logica de business procesează datele primite (de exemplu, verifică unicitatea numelui de utilizator, efectuează calculele necesare).
Controlerul interacționează cu nivelul de acces la date (Data Access Layer - DAL) sau ORM (Object-Relational Mapper).

DAL/ORM generează o interogare SQL sau utilizează metodele bazei de date pentru a salva, actualiza sau șterge datele în tabelul(tabelele) corespunzător(e).

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

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

Baza de date execută operația și returnează rezultatul (succes sau eroare).
DAL/ORM transmite rezultatul controlerului.
Controlerul formează un răspuns pentru client (de exemplu, JSON cu confirmarea succesului, codul de stare HTTP 200 OK, sau eroare cu codul de stare 400 Bad Request, 500 Internal Server Error etc.).
Serverul trimite răspunsul către client.
JavaScript pe partea client procesează răspunsul (de exemplu, afișează un mesaj de succes, actualizează UI-ul sau afișează o eroare).

Tehnologiile utilizate depind de stack-ul specific:

Client: HTML, CSS, JavaScript (React, Angular, Vue.js etc.)
Server: Framework-uri (Node.js/Express, Python/Django/Flask, Ruby/Rails, Java/Spring, PHP/Laravel etc.)
Bază de date: SQL (PostgreSQL, MySQL, SQL Server), NoSQL (MongoDB, Cassandra)

Întregul proces trebuie să fie sigur (HTTPS, autentificare, autorizare, validare) și să gestioneze eventualele erori în fiecare etapă.

Cum ajung modificările făcute pe client pe server și sunt stocate în baza de date?