Jak se změny provedené na klientovi dostávají na…

Obecně platí, že změny provedené uživatelem v webové aplikaci (na klientské straně) jsou odeslány na server prostřednictvím HTTP požadavku.

Typy HTTP požadavků:

POST: Používá se k vytvoření nového zdroje nebo k odeslání dat ke zpracování serverem. Často se používá pro data z formulářů.
PUT: Používá se k aktualizaci existujícího zdroje. Přenáší se úplný stav zdroje.
PATCH: Používá se k částečné aktualizaci zdroje. Přenášejí se pouze změněná pole.
DELETE: Používá se k odstranění zdroje.

Příklad toku dat:

Uživatel zadá data do formuláře na webové stránce.
JavaScript na straně klienta shromažďuje tato data (například do JSON objektu).

Provádí se HTTP požadavek (například POST nebo PUT) na určitý API endpoint serveru. Data jsou připojena k tělu požadavku.

// Příklad odeslání dat na server pomocí fetch API
const data = { username: 'newuser', email: 'newuser@example.com' };

fetch('/api/users', {
  method: 'POST', // nebo 'PUT', 'PATCH'
  headers: {
    'Content-Type': 'application/json',
    // Další hlavičky, například pro autorizaci
  },
  body: JSON.stringify(data), // Převod JavaScriptového objektu na JSON
})
.then(response => response.json()) // Parsování odpovědi od serveru do JSON
.then(data => {
  console.log('Úspěch:', data);
  // Zpracování úspěšné odpovědi
})
.catch((error) => {
  console.error('Chyba:', error);
  // Zpracování chyby
});

Serverová aplikace přijme požadavek a přepošle jej příslušnému zpracovateli (kontroléru).
Kontrolér extrahuje data z těla požadavku.
Data jsou validována a sanitizována na straně serveru pro zajištění bezpečnosti a správnosti.
Obchodní logika zpracovává přijatá data (například kontroluje unikátnost uživatelského jména, provádí potřebné výpočty).
Kontrolér komunikuje s vrstvou přístupu k datům (Data Access Layer - DAL) nebo ORM (Object-Relational Mapper).

DAL/ORM generuje SQL dotaz nebo používá metody databáze k uložení, aktualizaci nebo odstranění dat v příslušné tabulce(y).

-- Příklad SQL INSERT
INSERT INTO users (username, email) VALUES ('newuser', 'newuser@example.com');

-- Příklad SQL UPDATE
UPDATE users SET email = 'updated_email@example.com' WHERE username = 'newuser';

Databáze provede operaci a vrátí výsledek (úspěch nebo chybu).
DAL/ORM předá výsledek kontroléru.
Kontrolér sestaví odpověď pro klienta (například JSON s potvrzením úspěchu, HTTP status kód 200 OK, nebo chybovou zprávu s kódem 400 Bad Request, 500 Internal Server Error apod.).
Server odešle odpověď klientovi.
JavaScript na straně klienta zpracovává odpověď (například zobrazí zprávu o úspěšném uložení, aktualizuje UI nebo zobrazí chybu).

Použité technologie závisí na konkrétním stacku:

Klient: HTML, CSS, JavaScript (React, Angular, Vue.js atd.)
Server: Frameworky (Node.js/Express, Python/Django/Flask, Ruby/Rails, Java/Spring, PHP/Laravel atd.)
Databáze: SQL (PostgreSQL, MySQL, SQL Server), NoSQL (MongoDB, Cassandra)

Celý proces musí být bezpečný (HTTPS, autentifikace, autorizace, validace) a musí zpracovávat možné chyby na každém kroku.

Jak se změny provedené na klientovi dostávají na server a ukládají do databáze?