Lezione Bonus: PHP

Lezione Bonus richiesta dagli utenti sul nostro canale discord il: 30/04/2024

Questa lezione copre la creazione del form HTML, il codice PHP per gestire i dati del form, il codice CSS per stylare la nostra pagina e le query SQL per creare il database e la tabella necessari.

Step 1: Creare il Database e la Tabella MySQL

Prima di tutto, dobbiamo creare un database e una tabella dove i dati del form verranno salvati. Ecco le query SQL che puoi eseguire tramite PHPMyAdmin o un altro strumento di gestione MySQL:

Troverai alcuni degli strumenti consigliati sulla nostra pagina Strumenti

-- Creazione del database
CREATE DATABASE IF NOT EXISTS lezioneHtmlPhpSql;

-- Selezionare il database
USE lezioneHtmlPhpSql;

-- Creazione della tabella
CREATE TABLE IF NOT EXISTS utenti (
    id INT AUTO_INCREMENT PRIMARY KEY,
    nome VARCHAR(100) NOT NULL,
    email VARCHAR(100) NOT NULL,
    messaggio TEXT NOT NULL
);

Step 2: Creare un Form HTML

Creiamo un semplice form HTML che permetta agli utenti di inserire il loro nome, email e un messaggio. Il form utilizzerà il metodo POST per inviare i dati al server.

<!DOCTYPE html>
<html lang="it">
<head>
    <meta charset="UTF-8">
    <title>Form di Contatto</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Form di Contatto</h1>
    <form action="salva_dati.php" method="post">
        <label for="nome">Nome:</label>
        <input type="text" id="nome" name="nome" required><br><br>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required><br><br>
        
        <label for="messaggio">Messaggio:</label>
        <textarea id="messaggio" name="messaggio" required></textarea><br><br>
        
        <button type="submit">Invia</button>
    </form>
</body>
</html>

Step 3: Scrivere il codice PHP per gestire il form

Quando l'utente invia il form, i dati verranno gestiti dal file salva_dati.php. Questo script PHP si connette al database, valida i dati ricevuti e li inserisce nella tabella.

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "lezioneHtmlPhpSql";
$port = 3309; // Porta del tuo server SQL

// Creiamo la connessione con il nostro database mysql
$conn = new mysqli($servername, $username, $password, $dbname, $port);

// Verifichiamo che la connessione sia stata effettuata con successo
if ($conn->connect_error) {
    die("Connessione fallita: " . $conn->connect_error);
}

// Ci prepariamo al bind dei dati voluti
$stmt = $conn->prepare("INSERT INTO utenti (nome, email, messaggio) VALUES (?, ?, ?)");
$stmt->bind_param("sss", $nome, $email, $messaggio);

// Impostiamo i parametri presi dal nostro form HTML e li inseriamo nel database mysql
$nome = $_POST['nome'];
$email = $_POST['email'];
$messaggio = $_POST['messaggio'];
$stmt->execute();

echo "Dati inviati con successo!";
$stmt->close();
$conn->close();
?>

Assicurati di sostituire "username" e "password" con il tuo username e password di MySQL.

Se il tuo database mysql non utilizza alcuna password, puoi lasciare vuoto

Step 4: Aggiungere lo stile CSS per migliorare il nostro form

Questo è un'esemplice esempio di come con il CSS possiamo andare a toccare diversi elementi presenti nel nostro codice HTML

body {
    font-family: Arial, sans-serif; /* Usa un font chiaro e leggibile */
    background-color: #f4f4f9; /* Sfondo leggermente grigio */
    padding: 20px; /* Padding intorno al contenuto della pagina */
}
h1 {
    text-align: center;
}
form {
    background-color: white; /* Sfondo bianco per il form */
    padding: 20px; /* Spazio intorno agli elementi del form */
    border-radius: 8px; /* Angoli arrotondati del form */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Ombra leggera intorno al form */
    max-width: 500px; /* Larghezza massima del form */
    margin: auto; /* Centra il form orizzontalmente */
}
label {
    display: block; /* Fa sì che ogni etichetta abbia la sua linea */
    margin-bottom: 5px; /* Spazio sotto ogni etichetta */
    font-weight: bold; /* Rende il testo delle etichette grassetto */
}
input[type="text"],
input[type="email"],
textarea {
    width: 100%; /* Fa sì che gli input si estendano per l'intera larghezza del form */
    padding: 10px; /* Aggiunge spazio all'interno degli input */
    margin-bottom: 20px; /* Spazio sotto gli input */
    border: 1px solid #ccc; /* Bordi sottili per gli input */
    border-radius: 4px; /* Angoli leggermente arrotondati per gli input */
}
button {
    background-color: #0056b3; /* Colore di sfondo per il bottone */
    color: white; /* Colore del testo per il bottone */
    padding: 10px 20px; /* Padding intorno al testo del bottone */
    border: none; /* Nessun bordo per il bottone */
    border-radius: 4px; /* Angoli arrotondati per il bottone */
    cursor: pointer; /* Cursor a forma di puntatore quando si passa sopra il bottone */
    font-size: 16px; /* Dimensione del testo del bottone */
}
button:hover {
    background-color: #004494; /* Cambia colore quando il mouse passa sopra */
}

Anteprima

Conclusione

Ora hai un form HTML che invia i dati a un server PHP, il quale li salva in un database MySQL. Questo esempio può essere esteso o modificato per adattarsi a molteplici situazioni, come la gestione di più campi o la validazione lato server più avanzata.

PreviousParte 1: Introduzione a PHP NextSQL

Last updated 2 years ago

body {
    font-family: Arial, sans-serif; /* Usa un font chiaro e leggibile */
    background-color: #f4f4f9; /* Sfondo leggermente grigio */
    padding: 20px; /* Padding intorno al contenuto della pagina */
}
h1 {
    text-align: center;
}
form {
    background-color: white; /* Sfondo bianco per il form */
    padding: 20px; /* Spazio intorno agli elementi del form */
    border-radius: 8px; /* Angoli arrotondati del form */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Ombra leggera intorno al form */
    max-width: 500px; /* Larghezza massima del form */
    margin: auto; /* Centra il form orizzontalmente */
}
label {
    display: block; /* Fa sì che ogni etichetta abbia la sua linea */
    margin-bottom: 5px; /* Spazio sotto ogni etichetta */
    font-weight: bold; /* Rende il testo delle etichette grassetto */
}
input[type="text"],
input[type="email"],
textarea {
    width: 100%; /* Fa sì che gli input si estendano per l'intera larghezza del form */
    padding: 10px; /* Aggiunge spazio all'interno degli input */
    margin-bottom: 20px; /* Spazio sotto gli input */
    border: 1px solid #ccc; /* Bordi sottili per gli input */
    border-radius: 4px; /* Angoli leggermente arrotondati per gli input */
}
button {
    background-color: #0056b3; /* Colore di sfondo per il bottone */
    color: white; /* Colore del testo per il bottone */
    padding: 10px 20px; /* Padding intorno al testo del bottone */
    border: none; /* Nessun bordo per il bottone */
    border-radius: 4px; /* Angoli arrotondati per il bottone */
    cursor: pointer; /* Cursor a forma di puntatore quando si passa sopra il bottone */
    font-size: 16px; /* Dimensione del testo del bottone */
}
button:hover {
    background-color: #004494; /* Cambia colore quando il mouse passa sopra */
}