Come vengono trasmesse al server le modifiche apportate sul client e come vengono salvate nel database?

In generale, le modifiche apportate dall'utente in un'applicazione web (sul client) vengono inviate al server tramite una richiesta HTTP.

Tipi di richieste HTTP:

• POST: Viene utilizzato per creare una nuova risorsa o inviare dati per l'elaborazione al server. Spesso usato per i dati dei moduli.
• PUT: Viene utilizzato per aggiornare una risorsa esistente. Viene trasmesso lo stato completo della risorsa.
• PATCH: Viene utilizzato per aggiornamenti parziali di una risorsa. Vengono trasmessi solo i campi modificati.
• DELETE: Viene utilizzato per eliminare una risorsa.

Esempio di flusso di dati:

1. L'utente inserisce i dati in un modulo sulla pagina web.
2. JavaScript lato client raccoglie questi dati (ad esempio, in un oggetto JSON).
3. Viene effettuata una richiesta HTTP (ad esempio, POST o PUT) a un endpoint API specifico del server. I dati vengono allegati al corpo della richiesta.

   // Esempio di invio dati al server usando fetch API
   const data = { username: 'newuser', email: 'newuser@example.com' };
   
   fetch('/api/users', {
     method: 'POST', // o 'PUT', 'PATCH'
     headers: {
       'Content-Type': 'application/json',
       // Altri intestazioni, ad esempio, per l'autenticazione
     },
     body: JSON.stringify(data), // Convertiamo l'oggetto JavaScript in stringa JSON
   })
   .then(response => response.json()) // Analizziamo la risposta del server in JSON
   .then(data => {
     console.log('Successo:', data);
     // Gestione della risposta di successo
   })
   .catch((error) => {
     console.error('Errore:', error);
     // Gestione dell'errore
   });
   

4. L'applicazione server riceve la richiesta, la instrada al gestore appropriato (controller).
5. Il controller estrae i dati dal corpo della richiesta.
6. I dati vengono sottoposti a validazione e sanificazione lato server per garantire sicurezza e correttezza.
7. La logica di business elabora i dati ricevuti (ad esempio, verifica l'unicità del nome utente, esegue i calcoli necessari).
8. Il controller interagisce con il livello di accesso ai dati (Data Access Layer - DAL) o ORM (Object-Relational Mapper).
9. DAL/ORM genera una query SQL o utilizza metodi del database per salvare, aggiornare o eliminare i dati nella/e tabella/e corrispondente/i.

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

10. Il database esegue l'operazione e restituisce il risultato (successo o errore).
11. DAL/ORM trasmette il risultato al controller.
12. Il controller forma una risposta per il client (ad esempio, JSON con conferma di successo, codice di stato HTTP 200 OK, o errore con codice di stato 400 Bad Request, 500 Internal Server Error, ecc.).
13. Il server invia la risposta al client.
14. JavaScript lato client elabora la risposta (ad esempio, visualizza un messaggio di successo, aggiorna l'interfaccia utente o mostra un errore).

Le tecnologie utilizzate dipendono dallo stack specifico:

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

L'intero processo deve essere sicuro (HTTPS, autenticazione, autorizzazione, validazione) e gestire eventuali errori in ogni fase.