Modulo 10 – Database, Query e Architettura Full-Stack | Guida Completa 2025

Table of Contents

Modulo 10 – Database, Query e Architettura Full-Stack | Guida 2025

L’architettura full-stack rappresenta la sintesi perfetta tra front-end, back-end e database.
In questo modulo del Corso HTML Megistone comprenderai come i dati viaggiano dall’interfaccia utente fino al database e viceversa, attraverso query SQL e API REST.
Si tratta del passaggio decisivo per trasformare pagine web statiche in vere applicazioni interattive.

Schema architettura full-stack con front-end, server e database — Architettura full-stack: il front-end comunica col back-end che interagisce col database tramite query SQL e API REST.

1. Cos’è l’architettura full-stack

Un’applicazione web completa è costituita da tre livelli strettamente collegati:

Front-End – HTML, CSS e JavaScript per l’interfaccia utente.
Back-End – logiche di business in PHP, Python o Node.js.
Database – sistemi come MySQL, PostgreSQL o MongoDB che archiviano i dati.

Questi tre strati formano l’architettura full-stack, dove ogni parte svolge un compito distinto ma complementare.

2. Introduzione ai database relazionali

Un database relazionale è una raccolta organizzata di tabelle collegate da chiavi primarie e straniere.
Tra i più diffusi troviamo MySQL, MariaDB e PostgreSQL.
Ogni tabella contiene righe (record) e colonne (campi), consultabili attraverso il linguaggio SQL – Structured Query Language.

3. Le operazioni CRUD

Tutte le interazioni col database si riassumono nelle operazioni CRUD:

Create – inserire nuovi dati (INSERT);
Read – leggere i dati (SELECT);
Update – aggiornare i dati (UPDATE);
Delete – eliminare i dati (DELETE).

Esempio SQL – selezione utenti registrati:

SELECT nome, email 
FROM utenti 
WHERE attivo = 1 
ORDER BY data_iscrizione DESC;

4. Dal back-end al database

Il back-end comunica col database attraverso driver o ORM (Object Relational Mapper).
In PHP si usa PDO o MySQLi; in Node.js librerie come mysql2 o Sequelize.
Ogni chiamata SQL avviene tramite una query parametrizzata per prevenire attacchi SQL Injection.

5. L’API come ponte logico

Le API REST rappresentano l’interfaccia di comunicazione tra front-end e back-end.
Quando l’utente invia un form, JavaScript invia una richiesta POST all’API, che la elabora e aggiorna il database.
Il risultato torna poi in formato JSON, pronto per essere visualizzato nell’interfaccia.

Esempio Fetch con API REST:

fetch("/api/utenti", {
  method: "POST",
  headers: {"Content-Type": "application/json"},
  body: JSON.stringify({ nome: "Luca", email: "luca@megistone.it" })
})
.then(res => res.json())
.then(data => console.log("Utente salvato:", data))
.catch(err => console.error("Errore:", err));

6. Architettura MVC (Model-View-Controller)

Nel contesto full-stack, l’architettura MVC separa dati, logica e interfaccia:

Model – rappresenta i dati e le query al database;
View – mostra le informazioni all’utente;
Controller – coordina le azioni tra View e Model.

Questo schema garantisce ordine, riuso del codice e maggiore scalabilità dell’applicazione.

7. Sicurezza e buone pratiche

Usare query parametrizzate o ORM per prevenire SQL Injection.
Validare e sanificare sempre i dati provenienti dal front-end.
Proteggere le connessioni con protocollo HTTPS e token JWT.
Gestire i privilegi di accesso con ruoli e permessi chiari.

8. Mini-Laboratorio: registro studenti

Crea una tabella studenti con campi id, nome, classe, email.
Sviluppa un piccolo form in HTML che invia i dati al server PHP o Node.js.
Il server li salva nel database tramite una query INSERT, quindi restituisce un messaggio JSON di conferma.
Questo esercizio ti introduce all’integrazione completa di un’architettura full-stack.

9. Dati, logiche e interfacce

L’architettura full-stack unisce in un unico ecosistema il flusso dei dati, la logica applicativa e la presentazione visiva.
Ogni richiesta parte dal front-end, attraversa il server e raggiunge il database, per poi ritornare all’utente sotto forma di informazione elaborata.

10. Conclusione

Con questo modulo hai completato la visione d’insieme dell’architettura full-stack: un modello che consente di progettare applicazioni complete, performanti e sicure.
Comprendere come interagiscono HTML, CSS, JavaScript, PHP / Node.js e SQL ti permette di muoverti con competenza tra front-end e back-end.
Nel prossimo modulo svilupperemo un progetto pratico che unisce tutti questi elementi in un’applicazione reale.

Risorse e approfondimenti

Hai compreso i principi dell’architettura full-stack?
Prosegui con i moduli successivi del Corso HTML Megistone e realizza la tua prima applicazione completa.
Il futuro dello sviluppo web appartiene a chi sa unire logica, creatività e struttura.