Jak zmiany dokonane na kliencie trafiają na serwer i są zapisywane w bazie danych?

Zazwyczaj zmiany dokonane przez użytkownika w aplikacji internetowej (po stronie klienta) są wysyłane do serwera za pomocą żądania HTTP.

Typy żądań HTTP:

• POST: Używany do tworzenia nowego zasobu lub wysyłania danych do przetwarzania na serwerze. Często stosowany do danych z formularzy.
• PUT: Używany do aktualizacji istniejącego zasobu. Przesyłany jest pełny stan zasobu.
• PATCH: Używany do częściowej aktualizacji zasobu. Przesyłane są tylko zmienione pola.
• DELETE: Używany do usuwania zasobu.

Przykład przepływu danych:

1. Użytkownik wprowadza dane w formularzu na stronie internetowej.
2. JavaScript po stronie klienta zbiera te dane (np. w obiekcie JSON).
3. Wysyłane jest żądanie HTTP (np. POST lub PUT) do określonego punktu końcowego API serwera. Dane są dołączane do ciała żądania.

   // Przykład wysyłania danych do serwera za pomocą fetch API
   const data = { username: 'newuser', email: 'newuser@example.com' };
   
   fetch('/api/users', {
     method: 'POST', // lub 'PUT', 'PATCH'
     headers: {
       'Content-Type': 'application/json',
       // Inne nagłówki, np. do autoryzacji
     },
     body: JSON.stringify(data), // Konwersja obiektu JavaScript na łańcuch JSON
   })
   .then(response => response.json()) // Parsowanie odpowiedzi serwera do JSON
   .then(data => {
     console.log('Sukces:', data);
     // Obsługa udanej odpowiedzi
   })
   .catch((error) => {
     console.error('Błąd:', error);
     // Obsługa błędu
   });
   

4. Aplikacja serwerowa odbiera żądanie, kieruje je do odpowiedniego obsługi (kontrolera).
5. Kontroler wyciąga dane z ciała żądania.
6. Dane przechodzą walidację i sanitację po stronie serwera, aby zapewnić bezpieczeństwo i poprawność.
7. Logika biznesowa przetwarza otrzymane dane (np. sprawdza unikalność nazwy użytkownika, wykonuje niezbędne obliczenia).
8. Kontroler współpracuje z warstwą dostępu do danych (Data Access Layer - DAL) lub ORM (Object-Relational Mapper).
9. DAL/ORM generuje zapytanie SQL lub używa metod bazy danych do zapisania, zaktualizowania lub usunięcia danych w odpowiednich tabelach.

   -- Przykład SQL INSERT
   INSERT INTO users (username, email) VALUES ('newuser', 'newuser@example.com');
   
   -- Przykład SQL UPDATE
   UPDATE users SET email = 'updated_email@example.com' WHERE username = 'newuser';
   

10. Baza danych wykonuje operację i zwraca wynik (sukces lub błąd).
11. DAL/ORM przekazuje wynik do kontrolera.
12. Kontroler tworzy odpowiedź dla klienta (np. JSON z potwierdzeniem sukcesu, kodem statusu HTTP 200 OK, lub błędem z kodem statusu 400 Bad Request, 500 Internal Server Error itp.).
13. Serwer wysyła odpowiedź do klienta.
14. JavaScript po stronie klienta obsługuje odpowiedź (np. wyświetla komunikat o sukcesie, aktualizuje UI lub wyświetla błąd).

Technologie używane zależą od konkretnego stosu:

• Klient: HTML, CSS, JavaScript (React, Angular, Vue.js itp.)
• Serwer: Frameworki (Node.js/Express, Python/Django/Flask, Ruby/Rails, Java/Spring, PHP/Laravel itp.)
• Baza danych: SQL (PostgreSQL, MySQL, SQL Server), NoSQL (MongoDB, Cassandra)

Cały proces musi być bezpieczny (HTTPS, uwierzytelnianie, autoryzacja, walidacja) i obsługiwać możliwe błędy na każdym etapie.