Architettura Client-Server

In questa guida vedremo come funziona l’architettura client-server, che è alla base del funzionamento delle pagine web, e come si distinguono le due aree di sviluppo: front-end e back-end. Esamineremo poi il processo di invio delle pagine web su internet, e introdurremo il linguaggio PHP per spiegare come si inserisce in questo processo.

Architettura Client-Server

L’architettura client-server è un modello utilizzato per la comunicazione tra due componenti principali:

  • Client: Il dispositivo dell’utente (ad esempio, un computer, smartphone, tablet) che richiede informazioni o servizi.
  • Server: Un computer remoto o un insieme di computer che fornisce i dati o i servizi richiesti dal client.

Nel contesto del web, il client è solitamente un browser web (come Chrome o Firefox), mentre il server è un computer che ospita i file del sito web (pagine HTML, immagini, ecc.) e risponde alle richieste del browser.

Come funziona:

  1. L’utente apre il browser e digita l’indirizzo di un sito web (ad esempio, www.esempio.com).
  2. Il client (browser) invia una richiesta al server chiedendo la pagina web.
  3. Il server riceve la richiesta e invia la pagina richiesta (tipicamente in formato HTML) al client.
  4. Il browser riceve la pagina dal server e la visualizza sullo schermo dell’utente.

Questo processo avviene rapidamente, e ogni interazione con il server avviene (tendenzialmente) tramite richieste e risposte di questo tipo.

Differenza tra Front-end e Back-end

Nel contesto dello sviluppo web, la programmazione si divide principalmente in due parti:

Front-end (Programmazione lato client)

Il front-end è tutto ciò che l’utente vede e con cui interagisce. È la parte visibile del sito web. I linguaggi e le tecnologie che formano il front-end sono principalmente:

  • HTML (HyperText Markup Language): Definisce la struttura e il contenuto della pagina.
  • CSS (Cascading Style Sheets): Gestisce la parte visiva del sito, come layout, colori, font.
  • JavaScript: Aggiunge interattività alla pagina (es. pulsanti cliccabili, animazioni, ecc.).

Il front-end è eseguito direttamente nel browser dell’utente.

Back-end (Programmazione lato server)

Il back-end si occupa di tutto ciò che avviene dietro le quinte, nel server. È responsabile della logica, della gestione dei dati e delle operazioni server-side. I linguaggi tipici del back-end includono:

  • PHP, Python, Ruby, Java, ecc.
  • Database (come MySQL o PostgreSQL) per la gestione e l’archiviazione dei dati.

Il back-end riceve richieste dal front-end (ad esempio, l’invio di un modulo form) e invia risposte appropriate, come il salvataggio di informazioni in un database o il ritorno di contenuti dinamici.

Come avviene l’invio delle pagine web via Internet

Immagine di processo di risposta ad una richiesta HTTP

Quando un utente richiede una pagina web, il processo avviene in una sequenza precisa di passi:

  1. Richiesta della pagina dal client:

    • L’utente inserisce l’URL nel browser e preme “Invio”.
    • Il browser invia una richiesta HTTP al server, chiedendo una determinata pagina web.

    Cos’è una richiesta HTTP?

    Una richiesta HTTP è il modo in cui il browser comunica con il server per ottenere le risorse necessarie (come una pagina HTML). Le richieste HTTP sono composte da diversi campi, tra cui:

    • Metodo: Il più comune è GET (per richiedere risorse, come pagine o immagini), ma può essere anche POST (per inviare dati al server, come nei moduli).
    • URL: L’indirizzo della risorsa richiesta, ad esempio il file /index.html.
    • Headers: Informazioni aggiuntive sulla richiesta, come il tipo di browser o il tipo di contenuto richiesto. Sono delle coppie chiave valore che che vengono elencate sotto alla prima riga della richiesta.
    • Corpo: Presente solo nelle richieste POST, contiene i dati che il client invia al server (ad esempio, i dati di un modulo).
    Esempio di una richiesta GET:
    GET /index.html HTTP/1.1
Host: www.esempio.com
User-Agent: Mozilla/5.0
Accept: text/html

    Questo esempio mostra come il browser richiede la pagina index.html al server.

    Esempio di una richiesta POST (invio di dati):
    POST /processa_form.php HTTP/1.1
Host: www.esempio.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 27

nome=Mario&cognome=Rossi

    In questo esempio, un modulo inviato dall’utente invia i dati nome=Mario e cognome=Rossi al server tramite una richiesta POST.

  2. Elaborazione della richiesta sul server:

    • Il server riceve la richiesta e cerca la risorsa richiesta, ad esempio un file HTML.
    • Il server prepara la risora da inviare (ad esempio il file index.html). In questa fase è possibile eseguire delle elaborazioni prima dell’effettivo invio, vedremo più avanti di cosa si tratta.

  3. Risposta del server:

    • Il server invia una risposta HTTP contenente la risorsa richiesta, che può essere un file HTML, un’immagine, o altro.
    • La risposta HTTP include anche informazioni come lo stato della richiesta (ad esempio, 200 OK se la risorsa è stata trovata o 404 Not Found se non è stata trovata).

  4. Rendering della pagina nel browser:

    • Il browser riceve il file HTML e inizia a “leggerlo” e a interpretarlo.
    • Durante questa fase, il browser potrebbe fare altre richieste HTTP per ottenere risorse aggiuntive, come immagini, file CSS o JavaScript necessari per completare il caricamento della pagina.
    • Una volta caricato tutto, la pagina viene visualizzata all’utente.

Introduzione a PHP: Il Back-end dinamico

Abbiamo visto che nelle pagine statiche, il server invia semplicemente file HTML al browser. Tuttavia, quando una pagina deve essere dinamica (cioè adattarsi alle richieste dell’utente), entra in gioco il back-end. Uno dei linguaggi più utilizzati per il back-end è PHP.

Cos’è PHP?

PHP (Hypertext Preprocessor) è un linguaggio di programmazione server-side utilizzato per generare contenuti dinamici. A differenza di HTML (che è statico), PHP permette al server di creare pagine web al volo, basate su input dell’utente o dati provenienti da un database.

Dove si inserisce PHP nel processo?

Quando una pagina web richiede contenuti dinamici:

  1. Il browser invia una richiesta a una pagina PHP (ad esempio, index.php).
  2. Il server esegue il codice PHP sulla pagina.
  3. PHP genera un file HTML in base alle istruzioni presenti nel codice PHP e lo invia come risposta al browser.
  4. Il browser riceve l’HTML generato e lo visualizza all’utente.

Quindi, PHP si inserisce nella fase di elaborazione sul server: prima che il server invii la pagina al client, PHP elabora la richiesta, genera l’output necessario (in genere HTML), e solo allora invia la risposta finale.

A cosa serve PHP?

PHP viene utilizzato principalmente per:

  • Creare pagine web dinamiche: Il contenuto della pagina può cambiare a seconda delle azioni dell’utente o di altre condizioni (ad esempio, l’orario, l’utente loggato, ecc.).
  • Gestire moduli HTML: PHP è spesso usato per elaborare dati inviati tramite form html (es. login, registrazioni, invio di commenti).
  • Interagire con i database: PHP è ideale per lavorare con dati archiviati in database, permettendo di estrarre, inserire o modificare dati a seconda delle esigenze dell’applicazione web.

Lavorare con i dati inviati da un modulo HTML

Uno degli utilizzi più comuni di PHP è la gestione dei dati inviati tramite form HTML. Quando un utente riempie un modulo e clicca su “Invia”, i dati vengono inviati al server, che li elabora tramite PHP.

Ad esempio:

  1. Un utente compila un modulo HTML con i suoi dati:

    <form action="processa_form.php" method="POST">
  <input type="text" name="nome" placeholder="Inserisci il tuo nome">
  <input type="number" name="numero" placeholder="Inserisci un numero">
  <button type="submit">Invia</button>
</form>

  2. Quando l’utente clicca su “Invia”, il modulo invia i dati alla pagina PHP (processa_form.php) realizzando una richiesta HTTP.

    POST /processa_form.php HTTP/1.1
Host: www.esempio.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 27

nome=Mario&numero=4

  3. Nella pagina PHP, il server riceve i dati inviati e li elabora:

    <?php
  $nome = $_POST['nome'];  // Riceve il nome dall'input del modulo
  $numero = $_POST['numero'];  // Riceve il nome dall'input del modulo

  echo "<p> Ciao, " . $nome . "! </p>";
  for($i=0; i<$numero; $i++){
     echo $i."<br>";
  }
?>

  4. Il server esegue lo script PHP, che genera una risposta HTML dinamica e la invia al browser. Il browser riceve quindi un file HTML contenente il risultato dell’esecuzione di PHP.

    <p> Ciao Mario! </p>0<br>1<br>2<br>3<br>

  5. Il browser visualizzerà il contenuto del file html mostrando

    Ciao Mario!
0
1
2
3

Conclusione

L’architettura client-server consente al client (il browser) e al server di comunicare e scambiarsi informazioni per visualizzare pagine web. La programmazione front-end si occupa della parte visibile e interattiva per l’utente, mentre il back-end gestisce la logica e l’elaborazione dei dati sul server. PHP è un linguaggio potente per la programmazione server-side che permette di generare pagine dinamiche e di elaborare i dati inviati dagli utenti, come i form HTML.