Per il Laboratorio di Scienze e Tecnologie Informatiche, conoscere le tecniche per la realizzazione di pagine web dinamiche significa capire come costruire siti che generano contenuti variabili e interattivi, cioè che cambiano in base all’utente, ai dati inseriti o alle informazioni presenti in un database (a differenza delle pagine statiche che mostrano sempre lo stesso contenuto).

1. Differenza tra pagine web statiche e dinamiche.

Pagine statiche.

• Sono scritte principalmente in HTML e CSS.
• Il contenuto è fisso.
• Ogni modifica richiede intervento manuale sul codice.

Pagine dinamiche.

• Il contenuto viene generato automaticamente.
• Interagiscono con database, utenti e servizi esterni.
• Usano linguaggi di programmazione lato client e lato server.

2. Programmazione lato client (Front-end).

È il codice che viene eseguito direttamente nel browser dell’utente.

Tecnologie principali.

HTML5

• Struttura della pagina.
• Definisce elementi come testi, immagini, moduli, tabelle.

CSS3

• Gestisce grafica e layout.
• Responsive design (adattamento a smartphone e tablet).

JavaScript

È la tecnologia principale per rendere dinamiche le pagine lato client.

Permette di:

• Modificare contenuti senza ricaricare la pagina.
• Validare dati inseriti nei moduli.
• Gestire eventi (click, tastiera, mouse).
• Comunicare con il server.

Tecniche importanti:

• DOM manipulation → modifica degli elementi HTML.
• Event handling → gestione degli eventi utente.
• AJAX → aggiornamento dati senza ricaricare la pagina.
• Fetch API → richiesta dati al server.

3. Programmazione lato server (Back-end).

Serve per elaborare dati, gestire utenti e comunicare con database.

Linguaggi più utilizzati

• PHP
• Python (Django, Flask)
• Java (Servlet, Spring)
• JavaScript con Node.js
• C# (ASP.NET)

Funzioni principali:

• Generare pagine dinamiche.
• Gestire autenticazione utenti.
• Elaborare dati dei form.
• Interagire con database.

4. Interazione con database.

Le pagine dinamiche spesso recuperano e salvano dati.

Concetti da conoscere

• Database relazionali (MySQL, PostgreSQL, SQL Server).
• Linguaggio SQL:
  • SELECT
  • INSERT
  • UPDATE
  • DELETE

Tecniche

• Connessione server-database.
• Query dinamiche.
• Gestione sicurezza (evitare SQL injection).

5. Moduli web (Form).

Elemento fondamentale delle pagine dinamiche.

Permettono di:

• Inserire dati utente.
• Inviare richieste al server.
• Registrazione e login.

Aspetti importanti:

• Validazione lato client.
• Validazione lato server.
• Gestione input utente.

6. Architetture e modelli applicativi.

Modello Client-Server

• Il browser invia richieste.
• Il server elabora e risponde.

Architettura MVC (Model View Controller)

Divide l’applicazione in:

• Model → dati e logica
• View → interfaccia
• Controller → gestione richieste

7. Framework e librerie.

Servono per velocizzare lo sviluppo.

Front-end:

• React
• Angular
• Vue

Back-end:

• Laravel (PHP)
• Django (Python)
• Express (Node.js)

8. Sicurezza nelle pagine dinamiche.

Argomento molto importante.

Tecniche principali:

• Autenticazione e autorizzazione.
• Protezione da:
  • SQL injection
  • XSS (Cross Site Scripting)
  • CSRF
• Gestione sessioni e cookie.

9. Tecniche moderne di sviluppo dinamico.

• API REST
• JSON per lo scambio dati
• Single Page Application (SPA)
• Web services
• Cloud e hosting dinamico

10. Strumenti di sviluppo.

• Editor di codice (VS Code, IntelliJ, ecc.)
• Browser developer tools
• Server locali (XAMPP, WAMP, Node server)
• Sistemi di versionamento (Git)

Se devi prepararti per interrogazione o verifica, spesso vogliono che tu sappia:

– differenza statico/dinamico
– client-side vs server-side
– ruolo di JavaScript
– collegamento con database
– funzionamento dei form
– sicurezza base