Modulo 8 — Livello Avanzato: Gestione dei Dati Dinamici e Architetture Full-Stack (Form + PHP + MySQL + AJAX)

Modulo 8 — Livello Avanzato: Gestione dei Dati Dinamici e Architetture Full-Stack (Form + PHP + MySQL + AJAX)

L’interazione tra frontend e backend costituisce la spina dorsale del web applicativo.
In questo modulo affrontiamo la gestione dei dati come un processo complesso: dalla raccolta dei dati sul browser alla loro memorizzazione persistente nel database, fino alla restituzione asincrona tramite AJAX e JSON.
È la struttura delle architetture full-stack, dove HTML e JavaScript comunicano con PHP e MySQL attraverso protocolli REST-like.

1. Architettura logica a tre livelli

Livello 1 — Presentazione: HTML + CSS + JS (client)
Livello 2 — Logica applicativa: PHP (server)
Livello 3 — Persistenza: MySQL (database)

Ogni livello ha una responsabilità precisa e comunica tramite protocolli standard (HTTP, JSON).
L’obiettivo è ottenere un sistema disaccoppiato, in cui le modifiche al frontend non intaccano la logica di business.

2. Architettura del ciclo dei dati

1️⃣ L’utente compila la form (frontend)
2️⃣ JS cattura i dati e li invia via AJAX al server
3️⃣ PHP valida, elabora e interagisce con MySQL
4️⃣ Il server risponde in formato JSON
5️⃣ JS aggiorna dinamicamente l’interfaccia

Questo ciclo è il cuore del cosiddetto round-trip asincrono.

3. Form HTML avanzata con JS

<form id="frmContatto">
  <label>Nome:</label>
  <input type="text" id="nome" required>

  <label>Email:</label>
  <input type="email" id="email" required>

  <label>Messaggio:</label>
  <textarea id="msg"></textarea>

  <button type="submit">Invia</button>
</form>

<div id="esito"></div>

<script>
document.getElementById("frmContatto").addEventListener("submit", e => {
  e.preventDefault();
  const dati = {
    nome: nome.value,
    email: email.value,
    messaggio: msg.value
  };

  fetch("api_contatto.php", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(dati)
  })
  .then(r => r.json())
  .then(res => esito.innerHTML = res.messaggio);
});
</script>

4. Backend PHP con gestione JSON

<?php
header("Content-Type: application/json; charset=UTF-8");
$input = json_decode(file_get_contents("php://input"), true);

$conn = new mysqli("localhost", "root", "", "rubrica");

if ($conn->connect_error) {
  echo json_encode(["success" => false, "messaggio" => "Connessione fallita"]);
  exit;
}

$stmt = $conn->prepare("INSERT INTO contatti (nome, email, messaggio) VALUES (?, ?, ?)");
$stmt->bind_param("sss", $input['nome'], $input['email'], $input['messaggio']);
$stmt->execute();

if ($stmt->affected_rows > 0) {
  echo json_encode(["success" => true, "messaggio" => "Dati salvati con successo!"]);
} else {
  echo json_encode(["success" => false, "messaggio" => "Errore nell'inserimento."]);
}

$stmt->close();
$conn->close();
?>

5. Sicurezza e validazione multilivello

• Client-side: controlli in tempo reale via JavaScript (pattern, required).
• Server-side: sanitizzazione (funzioni filter_var(), htmlspecialchars()).
• Database-side: query preparate e vincoli SQL.
• Network: HTTPS e token CSRF.

$email = filter_var($input['email'], FILTER_SANITIZE_EMAIL);
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) die("Email non valida");

6. Query dinamiche e gestione degli errori

Per rendere un sistema robusto, ogni operazione sul database deve gestire le eccezioni:

try {
  $pdo = new PDO("mysql:host=localhost;dbname=rubrica", "root", "");
  $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
  $stmt = $pdo->prepare("SELECT * FROM contatti ORDER BY id DESC");
  $stmt->execute();
  $dati = $stmt->fetchAll(PDO::FETCH_ASSOC);
  echo json_encode($dati);
} catch (PDOException $e) {
  echo json_encode(["errore" => $e->getMessage()]);
}

7. Frontend dinamico con aggiornamento asincrono

async function aggiornaTabella() {
  const risposta = await fetch("api_lista.php");
  const dati = await risposta.json();
  document.getElementById("tabella").innerHTML =
    dati.map(r => `<tr><td>${r.nome}</td><td>${r.email}</td></tr>`).join("");
}
setInterval(aggiornaTabella, 2000); // refresh automatico ogni 2 s

In questo modo la pagina si comporta come un’app in tempo reale, mantenendo i dati sincronizzati.

8. Schema architetturale complessivo

flowchart LR
A[Form HTML + JS] -- AJAX/JSON --> B[API PHP]
B -- Query SQL --> C[(MySQL)]
C -- JSON --> A

L’intero sistema si comporta come una micro-API locale, capace di gestire dati strutturati in tempo reale.

9. Mini-laboratorio

Obiettivo: crea una rubrica interattiva full-stack.

1. Crea il database rubrica e la tabella contatti(id, nome, email, messaggio).
2. Implementa la form AJAX di inserimento.
3. Scrivi l’endpoint PHP che riceve i dati e li salva.
4. Crea la pagina di consultazione che legge via fetch e stampa i contatti.
5. Aggiungi un pulsante “Elimina” per cancellare un record.

10. Appendice — Strumenti professionali

• phpMyAdmin o MySQL Workbench per l’amministrazione.
• Postman per testare API REST.
• Composer per gestire le dipendenze PHP.
• dotenv per variabili d’ambiente sicure.
• json_encode() / json_decode() per la serializzazione dati.

Conclusione avanzata:
La gestione asincrona dei dati segna il passaggio definitivo dal web “documentale” al web “applicativo”.
Chi domina la triade HTML + PHP + MySQL, integrata da JSON e AJAX, possiede le chiavi per comprendere le logiche di qualsiasi piattaforma moderna — dalle dashboard amministrative ai sistemi di intelligenza artificiale distribuita.