Guida all’uso di XAMPP

In questa guida imparerai a usare XAMPP per sviluppare e testare le tue pagine PHP. PHP è un linguaggio che serve a creare pagine web dinamiche, e con XAMPP potrai farlo direttamente sul tuo computer, senza bisogno di caricare tutto su internet.

Utilizzerai la versione di XAMPP installata sui computer della scuola, quindi è importante che tu segua attentamente le istruzioni per organizzare bene il tuo lavoro e non confonderti con quello degli altri.

Come organizzare i tuoi file in XAMPP

Per lavorare con XAMPP, ogni studente avrà una propria cartella per tenere separati i progetti. Segui questi passaggi per creare la tua cartella personale.

Crea la tua cartella personale

  1. Vai nella cartella di XAMPP:
    1. Prima di tutto, apri Esplora File (l’icona della cartella gialla che trovi nella barra in basso dello schermo, o cercala nel menu Start digitando “Esplora File”).
    2. Nella parte sinistra della finestra di Esplora File vedrai una sezione chiamata Questo PC. Clicca su di essa.
    3. Ora vedrai una lista dei tuoi dischi locali, tra cui quello chiamato Disco locale (C:). Fai doppio clic su C: per aprirlo. Questo è il disco rigido principale del computer, dove sono installati i programmi e dove si trova XAMPP.
    4. All’interno di C:, cerca una cartella chiamata xampp. Di solito si trova in cima alla lista delle cartelle. Se non la vedi subito, scorri verso il basso
    5. Una volta trovata, fai doppio clic sulla cartella xampp per aprirla.
    6. All’interno della cartella xampp, troverai diversi file e cartelle, ma quella che ci interessa è htdocs. Questa è la cartella dove dovrai salvare tutti i tuoi file PHP.
  2. Crea una cartella con il tuo nome:
    Dentro htdocs, crea una nuova cartella usando il tuo nome e cognome come nome. Ad esempio, se ti chiami Mario Rossi, dovrai creare una cartella chiamata mariorossi.
    Questa sarà la tua cartella personale: tutto il tuo lavoro andrà salvato qui, così sarà separato da quello degli altri studenti.
  3. Crea un collegamento sul desktop:
    Per accedere più velocemente alla tua cartella creiamo un collegamento di questa al Desktop. Così, ogni volta che devi lavorare, potrai aprire la tua cartella dal desktop senza doverla cercare ogni volta.
    • Windows 10: fai clic destro sulla tua cartella (mariorossi), seleziona Invia a > Desktop (crea collegamento).
    • Windows 11: fai clic destro sulla tua cartella (mariorossi), seleziona Mostra altre opzioni > Invia a > Desktop (crea collegamento).

Crea una cartella per ogni esercizio

Quando inizi un nuovo esercizio o progetto, crea una nuova cartella all’interno della tua cartella personale (quella con il tuo nome). Dai a questa cartella il nome dell’esercizio utilizzando questo formato: “classe_esercizio_cognome_nome”.
Ad esempio, se l’esercizio si chiama “curriculum”, ti chiami “Mario Rosi” e fai parte della classe 4DSA, nomina la nuova cartella 4dsa_curriculum_rossi_mario e salva lì dentro tutti i file relativi a quell’esercizio. In questo modo, ogni esercizio sarà ben organizzato e facile da trovare.

Come visualizzare i tuoi progetti PHP con XAMPP

Dopo aver creato i tuoi file PHP e salvato tutto nella tua cartella personale, vediamo come puoi visualizzare e testare il tuo lavoro nel browser.

Avviare XAMPP

  1. Apri XAMPP Control Panel:
    Trova l’icona di XAMPP Control Panel sul desktop o cercala nel menu Start. Una volta aperto, vedrai una serie di servizi come Apache e MySQL.
  2. Avvia Apache:
    Nel pannello di controllo, clicca su Start accanto ad Apache. Questo avvierà il server web, che ti permetterà di vedere i tuoi progetti PHP nel browser. Una volta avviato correttamente, il pulsante diventerà verde.

Visualizzare i tuoi progetti nel browser

  1. Apri il tuo browser (Chrome, Firefox, ecc.).
  2. Vai a localhost:
    Per visualizzare i tuoi progetti, dovrai usare il browser. Digita nella barra degli indirizzi:
    http://localhost/nomecognome/nomedellesercizio
    Ad esempio, se ti chiami Mario Rossi e stai lavorando all’esercizio “curriculum”, dovrai scrivere:
    http://localhost/mariorossi/4dsa_curriculum_rossi_mario
    Così facendo, potrai vedere la tua pagina PHP direttamente nel browser!

Creare e modificare file PHP con VS Code

  1. Apri Visual Studio Code: Trova Visual Studio Code nel menu Start (Windows) o in Applicazioni (macOS), oppure clicca direttamente sulla sua icona sul desktop.
  2. Apri la cartella dell’esercizio:
    • Una volta aperto VS Code, clicca su File > Apri Cartella… dal menu in alto.
    • Naviga fino alla tua cartella personale in XAMPP:
      • Percorso Windows: C:\xampp\htdocs\nomecognome o in alternativa puoi sfruttare il collegamento che ti sei creato nel desktop.
      • Percorso macOS: /Applications/XAMPP/htdocs/nomecognome
    • Una volta trovato, seleziona la tua cartella personale e clicca su Apri.

Come consegnare gli esercizi

Per ogni esercizio, dovrai creare e inviare un file ZIP seguendo un formato preciso. Questo file dovrà contenere tutti i file necessari per far funzionare correttamente il tuo progetto. Segui attentamente questi passaggi per creare il file ZIP in modo corretto.

Organizza correttamente i tuoi file

All’interno della tua cartella personale (ad esempio, mariorossi), troverai la cartella con il nome dell’esercizio (ad esempio, 4dsa_curriculum_rossi_mario). Prima di comprimere la cartella, assicurati che:

  • Tutti i file del progetto siano presenti all’interno di questa cartella (eventuali immagini, fogli di stile, altri file html/php).
  • Il file principale del progetto sia nominato index.php (o index.html se non usi PHP).

Cosa non fare

  • Non usare altri formati di compressione come .rar o .7z. Il file deve essere in formato .zip, segui attentamente le indicazioni qui sotto e non ci saranno problemi nel formato di compressione.
  • Non comprimere file singoli, ma l’intera cartella dell’esercizio.

Come comprimere la cartella

Segui le indicazioni in base al sistema operativo nel quale stai lavorando.

Windows 8/10

  1. Vai alla cartella del tuo esercizio:
    • Apri Esplora File (l’icona della cartella gialla nella barra delle applicazioni) e naviga fino alla tua cartella personale (C:\xampp\htdocs\nomecognome\).
    • Trova la cartella dell’esercizio che hai creato (esempio: 4dsa_curriculum_rossi_mario).
  2. Comprimere la cartella in formato ZIP:
    • Fai clic destro sulla cartella dell’esercizio.
    • Dal menu contestuale che appare, seleziona Invia a > Cartella compressa (zip).
    • Verrà creata una copia compressa della cartella in formato ZIP con lo stesso nome della cartella.

Windows 11

  1. Vai alla cartella del tuo esercizio:
    • Apri Esplora File (l’icona della cartella gialla nella barra delle applicazioni) e naviga fino alla tua cartella personale (C:\xampp\htdocs\nomecognome\).
    • Trova la cartella dell’esercizio che hai creato (esempio: 4dsa_curriculum_rossi_mario).
  2. Comprimere la cartella in formato ZIP:
    • Fai clic destro sulla cartella dell’esercizio.
    • Dal menu contestuale che appare, seleziona Comprimi nel file ZIP.
    • Verrà creata una copia compressa della cartella in formato ZIP con lo stesso nome della cartella.

MacOS

  1. Vai alla cartella del tuo esercizio:
    • Apri il Finder e vai nella tua cartella personale (che si trova in /Applications/XAMPP/htdocs/nomecognome/).
  2. Comprimere la cartella in formato ZIP:
    • Trova la cartella dell’esercizio (ad esempio, 4dsa_curriculum_rossi_mario).
    • Fai clic destro (o Ctrl + clic) sulla cartella e seleziona Comprimi.
    • Verrà creata una copia compressa della cartella in formato ZIP.

Come scaricare XAMPP

Scaricare e installare XAMPP su Windows

  1. Scarica XAMPP:
  2. Installa XAMPP:
    • Una volta scaricato il file, fai doppio clic per avviare l’installazione.
    • Segui le istruzioni della procedura guidata, lasciando le impostazioni predefinite. Assicurati che Apache e PHP siano selezionati.
    • Al termine, apri il pannello di controllo di XAMPP.
  3. Avvia XAMPP:
    • Nel pannello di controllo, avvia il servizio Apache cliccando su “Start”.
    • Puoi ora salvare i tuoi progetti PHP nella cartella C:\xampp\htdocs.
  4. Visualizzare i progetti:
    • Apri il browser e vai su http://localhost/ per vedere i tuoi progetti.

Scaricare e installare XAMPP su macOS

  1. Scarica XAMPP:
  2. Installa XAMPP:
    • Una volta scaricato il file .dmg, aprilo e trascina l’icona di XAMPP nella cartella Applicazioni.
    • Apri XAMPP dalle Applicazioni e segui le istruzioni per completare l’installazione.
  3. Avvia XAMPP:
    • Apri l’app manager-osx di XAMPP e avvia il servizio Apache cliccando su “Start”.
    • Salva i tuoi progetti PHP nella cartella Applications/XAMPP/htdocs.
  4. Visualizzare i progetti:
    • Apri il browser e vai su http://localhost/ per vedere i tuoi progetti.

Come abilitare il controllo degli errori

Per configurazione di default se i nostri file php contengono degli errori xampp non li esegue e ci mostra un generico errore. Questa cosa risulta scomoda in fase di sviluppo perché potremmo trovarci ad avere degli errori e non sapere dove li abbiamo commessi.

Adesso vediamo assieme come attivare i messaggi d’errore in xampp.

  1. Apri la cartella XAMPP:

    1. Prima di tutto, apri Esplora File (l’icona della cartella gialla che trovi nella barra in basso dello schermo, o cercala nel menu Start digitando “Esplora File”).
    2. Nella parte sinistra della finestra di Esplora File vedrai una sezione chiamata Questo PC. Clicca su di essa.
    3. Ora vedrai una lista dei tuoi dischi locali, tra cui quello chiamato Disco locale (C:). Fai doppio clic su C: per aprirlo. Questo è il disco rigido principale del computer, dove sono installati i programmi e dove si trova XAMPP.
    4. All’interno di C:, cerca una cartella chiamata xampp. Di solito si trova in cima alla lista delle cartelle. Se non la vedi subito, scorri verso il basso
    5. Una volta trovata, fai doppio clic sulla cartella xampp per aprirla.

  2. Trova il file php.ini:

    1. All’interno di xampp, cerca e apri la cartella etc.
    2. Troverai un file chiamato php.ini. Questo è il file da modificare.

  3. Modifica display_errors:

    1. Apri php.ini con un editor di testo come Notepad (Windows) o TextEdit (Mac) o Visual Studio Code. Se hai problemi ad aprire il file con uno di questi editor segui questi passaggi:
      • tasto destro sopra al file
      • clicca Apri con e a questo punto seleziona l’editor
    2. Una volta aperto, premi CTRL + F (Windows) o CMD + F (Mac) per aprire la funzione di ricerca.
    3. Digita “display_errors” e premi Invio per trovare la riga con display_errors = Off.
    4. Cambia Off in On, poi salva il file (premi CTRL + S o CMD + S).

  4. Riavvia il Server Apache:

    1. Apri XAMPP Control Panel (clicca sull’icona di XAMPP). Se ti trovi da Mac per avviare XAMPP dovrai avviare il programma manager-osx
    2. Trova Apache e premi “Stop” per fermarlo, poi premi “Start” per riavviarlo.

  5. Verifica:

    1. Ora, quando carichi la tua pagina PHP nel browser, vedrai un messaggio dettagliato con l’errore e la linea di codice su cui si trova.

Nel caso ci fossero problemi segui i passi mostrati in questo video