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.
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.
