# Lezione Bonus: PHP

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:

{% hint style="info" %}
Troverai alcuni degli strumenti consigliati sulla nostra pagina [Strumenti](/sql/strumenti-sql.md)
{% endhint %}

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

```html
<!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
<?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

```css
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

<figure><img src="/files/2WSNRwYWgkNhOeXAoSHG" alt=""><figcaption></figcaption></figure>

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learn.ziomark.xyz/php/lezione-bonus-php.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
