Sobes.tech
Middle

Ako sa zmeny vykonané na klientovi dostanú na server a sú uložené v databáze?

sobes.tech AI

Odpoveď od AI

Obvykle sa zmeny vykonané používateľom v webovej aplikácii (na klientskom počítači) odosielajú na server prostredníctvom HTTP požiadavky.

Typy HTTP požiadaviek:

  • POST: Používa sa na vytvorenie nového zdroja alebo odoslanie údajov na spracovanie serverom. Často sa používa pre údaje z formulárov.
  • PUT: Používa sa na aktualizáciu existujúceho zdroja. Prenáša sa úplný stav zdroja.
  • PATCH: Používa sa na čiastočnú aktualizáciu zdroja. Prenášajú sa iba zmenené polia.
  • DELETE: Používa sa na odstránenie zdroja.

Príklad toku údajov:

  1. Používateľ zadá údaje do formulára na webovej stránke.
  2. JavaScript na strane klienta tieto údaje zhromažďuje (napríklad do JSON objektu).
  3. Vykoná sa HTTP požiadavka (napríklad POST alebo PUT) na určitý API endpoint servera. Údaje sa pripoja k telu požiadavky.
    // Príklad odoslania údajov na server pomocou fetch API
    const data = { username: 'newuser', email: 'newuser@example.com' };
    
    fetch('/api/users', {
      method: 'POST', // alebo 'PUT', 'PATCH'
      headers: {
        'Content-Type': 'application/json',
        // Iné hlavičky, napríklad pre autorizáciu
      },
      body: JSON.stringify(data), // Prevod JavaScript objektu na JSON
    })
    .then(response => response.json()) // Parsovanie odpovede od servera do JSON
    .then(data => {
      console.log('Úspech:', data);
      // Spracovanie úspešnej odpovede
    })
    .catch((error) => {
      console.error('Chyba:', error);
      // Spracovanie chyby
    });
    
  4. Serverová aplikácia prijme požiadavku a presmeruje ju na príslušného spracovateľa (kontroléra).
  5. Kontrolér extrahuje údaje z tela požiadavky.
  6. Údaje prechádzajú validáciou a sanitizáciou na strane servera na zabezpečenie bezpečnosti a správnosti.
  7. Obchodná logika spracováva prijaté údaje (napríklad kontroluje jedinečnosť používateľského mena, vykonáva potrebné výpočty).
  8. Kontrolér komunikuje s úrovňou prístupu k údajom (Data Access Layer - DAL) alebo ORM (Object-Relational Mapper).
  9. DAL/ORM generuje SQL dopyt alebo používa metódy databázy na uloženie, aktualizáciu alebo odstránenie údajov v príslušnej tabuľke(y).
    -- Príklad SQL INSERT
    INSERT INTO users (username, email) VALUES ('newuser', 'newuser@example.com');
    
    -- Príklad SQL UPDATE
    UPDATE users SET email = 'updated_email@example.com' WHERE username = 'newuser';
    
  10. Databáza vykoná operáciu a vráti výsledok (úspech alebo chybu).
  11. DAL/ORM odovzdá výsledok kontroléru.
  12. Kontrolér vytvorí odpoveď pre klienta (napríklad JSON s potvrdením úspechu, HTTP status kód 200 OK, alebo chybu s kódom 400 Bad Request, 500 Internal Server Error a pod.).
  13. Server odošle odpoveď klientovi.
  14. JavaScript na strane klienta spracováva odpoveď (napríklad zobrazí správu o úspešnom uloženie, aktualizuje UI alebo zobrazí chybu).

Použité technológie závisia od konkrétneho stacku:

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

Celý proces musí byť bezpečný (HTTPS, autentifikácia, autorizácia, validácia) a musí spracovávať možné chyby na každom kroku.