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:
-- 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.
Last updated
Was this helpful?