# 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 <img src="https://www.automationtomorrow.com/wp-content/uploads/2021/02/sistemi-client-server-2.jpg" width="100%" alt="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: ```http 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): ```http 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: ```html <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. ```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 <?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. ```html <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.