4E e 4I SIA: Programmazione Lato Server, Architettura Web e Sviluppo Locale con XAMPP

 

Lezione Completa: Programmazione Lato Server, Architettura Web e Sviluppo Locale con XAMPP

1. Introduzione alla Programmazione Lato Server (Backend)

Nell'architettura del Web, un'applicazione è suddivisa principalmente in due parti: Frontend (lato client) e Backend (lato server).

ome funziona la programmazione lato server?

1. Elaborazione Remota: Quando un utente richiede una pagina dinamica (ad esempio, inserendo credenziali o cercando un prodotto), la richiesta viene inviata al server.

2. Esecuzione della Logica: Sul server è installato un interprete o motore di esecuzione (ad esempio PHP, Python, Node.js, Java). Questo codice elabora i dati, esegue controlli di sicurezza, effettua calcoli e interagisce con il database.

3. Generazione dell'Output: Il codice server-side produce come risultato finale un documento statico (solitamente HTML, CSS, JSON o immagini) che viene inviato al browser del client.

4. Sicurezza e Protezione della Proprietà Intellettuale: L'utente finale non vede mai il codice sorgente scritto in PHP o le query al database, ma solo il risultato finale elaborato.

2. Server Web e Demoni di Sistema

Che cos'è un Server Web?

Un Server Web è un software che rimane costantemente attivo su una macchina remota (o locale), con il compito di ascoltare le richieste di rete provenienti dai client e restituire i file o le risorse richieste.

Il Concetto di Demone (Daemon)

Nei sistemi operativi (in particolare Unix/Linux, ma presente con il concetto di "Servizio" anche in Windows), un demone è un programma eseguito in background, privo di interfaccia grafica diretta, che si avvia spesso all'avvio del sistema ed è sempre pronto a gestire determinati compiti.

• Convenzione dei nomi: I demoni prendono spesso il nome del servizio seguito dalla lettera d (ad esempio, httpd per HTTP Daemon o mysqld per MySQL Daemon).

• Ascolto su Porte: I demoni rimangono "in ascolto" su porte di rete specifiche:

  • Porta 80: Traffico HTTP web non cifrato.

  • Porta 443: Traffico HTTPS web cifrato.

  • Porta 3306: Connessioni al database MySQL.

  • Porta 21: Connessioni per il trasferimento file FTP.

3. I Componenti dello Stack Web

1. Apache HTTP Server

• Ruolo: È uno dei server web open source più diffusi al mondo.

• Funzionamento: Intercetta le richieste HTTP/HTTPS. Se la richiesta riguarda un file statico (un'immagine .png o un file .html), Apache lo invia direttamente. Se la richiesta riguarda un file dinamico (ad esempio .php), Apache lo passa all'interprete PHP per l'esecuzione e ne restituisce l'output.

2. MySQL / MariaDB

• Ruolo: Un RDBMS (Relational Database Management System) che memorizza i dati in tabelle strutturate collegate tra loro.

• Linguaggio SQL: Attraverso query SQL (SELECT, INSERT, UPDATE, DELETE), gli script backend memorizzano e recuperano informazioni (utenti, articoli, ordini di un e-commerce).

3. Sistema FTP (File Transfer Protocol)

• Ruolo: Un protocollo di rete utilizzato per trasferire file da un computer locale a un server remoto.

• Architettura:

  • Client FTP (es. FileZilla Client): Programma usato dallo sviluppatore sul proprio PC per inviare o scaricare file.

  • Server FTP (es. FileZilla Server): Demone in esecuzione sul server che gestisce autenticazione, permessi e salvataggio dei file.

4. Protocollo HTTPS e Cifratura SSL/TLS

• Differenza con HTTP: L'HTTP invia tutti i dati in chiaro. L'HTTPS (HyperText Transfer Protocol Secure) aggiunge un livello di cifratura mediante i protocolli TLS/SSL.

• Come funziona:

  1. Handshake: Client e server stabiliscono una connessione e si scambiano chiavi crittografiche.

  2. Certificato Digitale: Il server dimostra la propria identità tramite un certificato rilasciato da una Certificate Authority (CA).

  3. Cifratura: Tutti i dati trasmessi (password, numeri di carta di credito, sessioni) vengono cifrati, rendendo impossibile l'intercettazione da parte di terzi (Man-in-the-Middle).

4. Introduzione a XAMPP: L'Ambiente di Sviluppo Locale

Configurare manualmente Apache, MySQL, PHP e un server FTP su un sistema operativo richiederebbe la modifica di decine di file di configurazione distinti. XAMPP è un pacchetto software gratuito e multipiattaforma che distribuisce e configura automaticamente tutti questi componenti in un unico pacchetto integrato.

Il significato dell'acronimo XAMPP:

• X: Cross-platform (funziona su Windows, Linux, macOS)

• A: Apache (Server Web)

• M: MariaDB / MySQL (Database Relazionale)

• P: PHP (Linguaggio di Scripting Backend)

• P: Perl (Linguaggio di Programmazione)

5. Laboratorio Pratico: Flusso di Lavoro Integrato con XAMPP

Step 1: Avvio dei Demoni tramite XAMPP Control Panel

1. Aprire XAMPP Control Panel.

2. Fare clic su Start in corrispondenza dei moduli Apache e MySQL.

3. Notare come nel pannello appaiano i numeri di porta attivi (es. Apache sulle porte 80, 443, MySQL sulla porta 3306) e i PID (Process ID) associati ai demoni in background (httpd.exe e mysqld.exe).

Step 2: Creare la Prima Applicazione Server-Side in PHP

In XAMPP, la cartella principale servita da Apache si chiama htdocs (solitamente situata in C:\xampp\htdocs su Windows).

1. All'interno di htdocs, creare una cartella chiamata mio_progetto.

2. Creare un file chiamato index.php inserendo il seguente codice:

<?php

// Connessione al Database MySQL gestito da XAMPP

$host = "localhost";

$user = "root";

$password = ""; // Di default in XAMPP la password di root è vuota

$database = "test_db";

$conn = new mysqli($host, $user, $password, $database);

if ($conn->connect_error) {

    die("Connessione fallita: " . $conn->connect_error);

}

// Recupero dei dati

$sql = "SELECT username, email FROM utenti";

$result = $conn->query($sql);

?>

<!DOCTYPE html>

<html lang="it">

<head>

    <meta charset="UTF-8">

    <title>Pannello Utenti</title>

</head>

<body>

    <h1>Elenco Utenti Registrati</h1>

    <ul>

        <?php

        if ($result->num_rows > 0) {

            while($row = $result->fetch_assoc()) {

                echo "<li>Utente: " . htmlspecialchars($row["username"]) . " - Email: " . htmlspecialchars($row["email"]) . "</li>";

            }

        } else {

            echo "<li>Nessun utente trovato</li>";

        }

        ?>

    </ul>

</body>

</html>

<?php $conn->close(); ?>

3. Aprire il browser e digitare l'indirizzo: http://localhost/mio_progetto/index.php.

Step 3: Gestione del Database con phpMyAdmin

XAMPP include phpMyAdmin, un'interfaccia web scritta in PHP per interagire facilmente con il demone MySQL.

1. Aprire il browser all'indirizzo http://localhost/phpmyadmin (oppure cliccare su Admin di fianco a MySQL nel pannello XAMPP).

2. Selezionare la voce Database e crearne uno nuovo denominato test_db.

3. Eseguire la seguente query SQL nella sezione SQL per creare la tabella utenti e inserire un record di prova:

SQL

CREATE TABLE utenti (

    id INT AUTO_INCREMENT PRIMARY KEY,

    username VARCHAR(50) NOT NULL,

    email VARCHAR(100) NOT NULL

);

INSERT INTO utenti (username, email) 

VALUES ('mario_rossi', 'mario@example.com');

Step 4: Simulazione del Servizio FTP con FileZilla Server in XAMPP

Nel lavoro reale, i file dell'applicazione non vengono scritti direttamente sul server locale, ma trasferiti da locale a remoto tramite FTP.

1. Nel pannello XAMPP, fare clic su Start accanto al modulo FileZilla.

2. Cliccare su Admin per configurare un account utente FTP (es. utente developer con accesso alla cartella htdocs).

3. Utilizzando un client FTP come FileZilla Client, è possibile connettersi a localhost sulla porta 21 per caricare o aggiornare i file sorgente del sito web sul server.

Step 5: Testare la Connessione Sicura HTTPS in Locale

XAMPP include un certificato SSL autofirmato per consentire il test delle connessioni HTTPS durante lo sviluppo:

1. Nel browser, accedere all'indirizzo https://localhost/mio_progetto/index.php.

2. Il browser mostrerà un avviso di sicurezza (es. "La connessione non è privata") perché il certificato è autofirmato localmente e non emesso da un'autorità di certificazione ufficiale (come Let's Encrypt o DigiCert).

3. Procedendo oltre l'avviso, la comunicazione tra browser e Apache locale avverrà in modalità cifrata tramite la porta 443.