Come creare un form di registrazione utenti con PHP, AJAX e MySQL
Introduzione operativa
La registrazione utenti è uno dei punti di ingresso fondamentali di qualsiasi sistema web. Non rappresenta solo un modulo di inserimento dati, ma il primo livello di interazione tra un utente e un’infrastruttura che gestisce identità, permessi e informazioni sensibili.
In ambito di operatività web, una registrazione mal progettata genera problemi strutturali: errori di sicurezza, dati incoerenti, flussi difficili da estendere e manutenzione complessa. Per questo motivo è necessario trattare questo passaggio come una componente tecnica vera, non come un dettaglio accessorio.
In questo articolo viene mostrata una implementazione completa e funzionante di un sistema di registrazione utenti basato su PHP, AJAX e MySQL, organizzata secondo una separazione chiara dei ruoli: struttura, stile, logica client e backend.
Struttura dei file
Una struttura ordinata dei file è il primo requisito per un sistema mantenibile. La seguente organizzazione consente di separare responsabilità e facilitare estensioni future.
/register/
│
├── index.html
├── css/
│ └── register.css
├── js/
│ └── register.js
└── register.php
Struttura HTML con include di CSS e JavaScript
Il file HTML ha il solo compito di definire la struttura del form e includere le risorse necessarie. Non contiene logica applicativa.
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Registrazione Utente</title>
<!-- CSS -->
<link rel="stylesheet" href="css/register.css">
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="registerForm">
<div class="input-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
</div>
<div class="input-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
</div>
<div class="input-group">
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
</div>
<button id="registerButton">Registrati</button>
<div id="response"></div>
</div>
<!-- JavaScript custom -->
<script src="js/register.js"></script>
</body>
</html>
Stile CSS di base
Il foglio di stile definisce una presentazione minimale e funzionale, senza dipendere da framework esterni. Lo scopo è garantire leggibilità e chiarezza, non estetica decorativa.
#registerForm {
max-width: 400px;
margin: 40px auto;
padding: 20px;
border: 1px solid #ccc;
}
.input-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input {
width: 100%;
padding: 8px;
box-sizing: border-box;
}
button {
padding: 10px 15px;
cursor: pointer;
}
#response {
margin-top: 15px;
font-weight: bold;
}
Logica JavaScript e comunicazione AJAX
La logica JavaScript intercetta l’azione dell’utente, effettua controlli minimi e invia i dati al backend tramite AJAX, evitando il reload della pagina.
$(document).ready(function () {
$('#registerButton').click(function (event) {
event.preventDefault();
var username = $('#username').val();
var email = $('#email').val();
var password = $('#password').val();
if (username === '' || email === '' || password === '') {
$('#response').html('Tutti i campi sono obbligatori.');
return;
}
if (password.length < 8) {
$('#response').html('La password deve avere almeno 8 caratteri.');
return;
}
$.ajax({
url: 'register.php',
type: 'POST',
data: {
username: username,
email: email,
password: password
},
success: function (response) {
$('#response').html(response);
},
error: function () {
$('#response').html('Errore nella comunicazione con il server.');
}
});
});
});
Backend PHP: registrazione e sicurezza
Il backend rappresenta il punto decisionale reale del sistema. Qui avvengono la validazione effettiva, il controllo dei duplicati e la memorizzazione sicura delle credenziali.
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
include 'infoSQL.php';
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die('Errore di connessione al database');
}
$username = $conn->real_escape_string($_POST['username']);
$email = $conn->real_escape_string($_POST['email']);
$password = password_hash($_POST['password'], PASSWORD_BCRYPT);
$stmt = $conn->prepare(
"SELECT id FROM users WHERE email = ? OR username = ?"
);
$stmt->bind_param("ss", $email, $username);
$stmt->execute();
$result = $stmt->get_result();
if ($result->num_rows > 0) {
echo 'Email o username già registrati.';
} else {
$stmt = $conn->prepare(
"INSERT INTO users (username, email, password)
VALUES (?, ?, ?)"
);
$stmt->bind_param("sss", $username, $email, $password);
if ($stmt->execute()) {
echo 'Registrazione completata con successo.';
} else {
echo 'Errore durante la registrazione.';
}
}
$stmt->close();
$conn->close();
}
?>
Considerazioni di sicurezza
- Le password non vengono mai salvate in chiaro
- Le query SQL usano prepared statement
- La validazione reale avviene solo lato server
- La struttura è estendibile a login e sessioni
Conclusione
Questa implementazione fornisce una base solida, leggibile e professionale per la gestione della registrazione utenti in sistemi web custom. È un esempio concreto di operatività web: pochi elementi, ben separati, che fanno esattamente ciò che devono fare.
Quando la complessità cresce, il flusso resta valido. Cambiano gli strumenti, non la struttura.