3E e 3I SIA: Un semplice login e area privata con HTML, CSS e JavaScript (senza Php e Sessioni)
Un semplice login e area privata con HTML, CSS e JavaScript (senza Php e Sessioni)
Per creare
una semplice simulazione di login a un'area privata usando HTML, CSS e
JavaScript, seguiremo i seguenti passi:
- HTML: Crea il form di login, l'area
privata e il messaggio di errore o successo.
- CSS: Aggiungi uno stile di base
per il form e l'area privata.
- JavaScript: Gestisci il login e verifica
se l'utente è autenticato.
1. HTML: Struttura della Pagina
Creiamo una
pagina HTML che include:
- Un modulo di login (con nome
utente e password)
- Un'area privata (che sarà
visibile solo dopo un login valido)
- Un messaggio di errore per
login fallito
<!DOCTYPE
html>
<html
lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Accesso Area
Privata</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<form id="loginForm">
<label
for="username">Username:</label>
<input type="text"
id="username" name="username"
required><br><br>
<label for="password">Password:</label>
<input type="password"
id="password" name="password"
required><br><br>
<button
type="submit">Accedi</button>
<p id="error-message"
class="error-message"></p>
</form>
</div>
<div class="private-area"
id="privateArea">
<h2>Benvenuto nell'Area
Privata</h2>
<p>Contenuti riservati</p>
<button
onclick="logout()">Esci</button>
</div>
<script
src="script.js"></script>
</body>
</html>
2. CSS: Stile per la Pagina
Aggiungiamo
lo stile di base per il modulo di login e l'area privata. Nascondiamo l'area
privata all'inizio e la mostriamo solo dopo il login.
/* style.css
*/
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f2f2f2;
}
.login-container
{
background-color: white;
padding: 20px;
border-radius: 5px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: center;
}
h2 {
margin-bottom: 20px;
}
input[type="text"],
input[type="password"] {
padding: 10px;
margin: 5px 0;
width: 250px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
padding: 10px 20px;
border: none;
background-color: #28a745;
color: white;
cursor: pointer;
border-radius: 5px;
}
button:hover
{
background-color: #218838;
}
.error-message
{
color: red;
font-size: 14px;
display: none;
margin-top: 10px;
}
.private-area
{
display: none;
text-align: center;
}
.private-area
button {
background-color: #dc3545;
}
.private-area
button:hover {
background-color: #c82333;
}
3. JavaScript: Gestione del Login
Ora, creiamo
un file script.js che
gestisca l'autenticazione, visualizzando o nascondendo l'area privata in base
al risultato del login. Se le credenziali sono corrette, mostriamo l'area
privata; se sono errate, mostriamo un messaggio di errore.
// script.js
document.getElementById("loginForm").addEventListener("submit",
function(event) {
event.preventDefault(); // Impedisce il
comportamento predefinito del form
// Otteniamo i valori di username e password
const username =
document.getElementById("username").value;
const password =
document.getElementById("password").value;
// Definiamo le credenziali di accesso (puoi
cambiarle con quelle che desideri)
const correctUsername = "admin";
const correctPassword =
"password123";
// Controlliamo se le credenziali sono
corrette
if (username === correctUsername &&
password === correctPassword) {
// Mostra l'area privata
document.getElementById("privateArea").style.display =
"block";
// Nascondi il login
document.querySelector(".login-container").style.display =
"none";
// Reset dei campi del form
document.getElementById("loginForm").reset();
} else {
// Mostra il messaggio di errore
document.getElementById("error-message").style.display =
"block";
document.getElementById("error-message").textContent =
"Credenziali errate, riprova.";
}
});
// Funzione
di logout
function
logout() {
// Nascondi l'area privata
document.getElementById("privateArea").style.display =
"none";
// Mostra il login
document.querySelector(".login-container").style.display =
"block";
}
Come Funziona:
- Login: Quando l'utente inserisce
"admin" come username e "password123" come password,
viene considerato autenticato. Se le credenziali sono corrette, l'area
privata viene visualizzata e il modulo di login nascosto.
- Errore: Se l'utente inserisce
credenziali errate, viene visualizzato un messaggio di errore che gli
chiede di riprovare.
- Logout: Cliccando sul pulsante
"Esci" nell'area privata, l'utente viene disconnesso, l'area
privata viene nascosta e il modulo di login viene ripristinato.
Spiegazione del codice JavaScript (script.js)
Il codice
che hai fornito gestisce la logica di un semplice sistema di login per una
pagina web. In particolare, quando l'utente compila un modulo di login e lo
invia, il codice verifica le credenziali inserite (username e password), quindi
decide se mostrare l'area privata o un messaggio di errore. Viene anche gestita
una funzione di logout. Ecco un'analisi passo per passo:
1. Aggiunta dell'Event Listener al Form di Login
document.getElementById("loginForm").addEventListener("submit",
function(event) {
event.preventDefault(); // Impedisce il
comportamento predefinito del form
- document.getElementById("loginForm"): Recupera l'elemento del DOM
con id="loginForm", che è il modulo di login.
- .addEventListener("submit",
function(event) {...}): Aggiunge un "listener" per l'evento
di submit (inviare il modulo) del form. Quando l'utente preme il pulsante
di invio, questa funzione viene chiamata.
- event.preventDefault(): Evita che il comportamento
predefinito del form (che sarebbe quello di inviare i dati al server e
ricaricare la pagina) venga eseguito. In questo caso, vogliamo gestire la
logica di login tramite JavaScript senza ricaricare la pagina.
2. Recupero dei Dati dal Form
const
username = document.getElementById("username").value;
const
password = document.getElementById("password").value;
- document.getElementById("username").value: Recupera il valore inserito
nel campo di testo con id="username".
- document.getElementById("password").value: Recupera il valore inserito
nel campo di password con id="password".
- I valori di username e password
vengono memorizzati nelle variabili username e password.
3. Definizione delle Credenziali di Accesso
const
correctUsername = "admin";
const
correctPassword = "password123";
- Qui vengono definite le
credenziali corrette di accesso per il sistema. In questo caso, il nome
utente corretto è "admin" e la password corretta è "password123". Questi valori sono usati per
il confronto con i dati inseriti nel modulo.
4. Verifica delle Credenziali
if (username
=== correctUsername && password === correctPassword) {
// Mostra l'area privata
document.getElementById("privateArea").style.display =
"block";
// Nascondi il login
document.querySelector(".login-container").style.display =
"none";
// Reset dei campi del form
document.getElementById("loginForm").reset();
} else {
// Mostra il messaggio di errore
document.getElementById("error-message").style.display =
"block";
document.getElementById("error-message").textContent =
"Credenziali errate, riprova.";
}
- if
(username === correctUsername && password === correctPassword): Se le credenziali inserite
corrispondono a quelle corrette, il codice esegue il blocco di istruzioni
all'interno delle parentesi.
- document.getElementById("privateArea").style.display
= "block";: Rende visibile l'area privata. L'elemento con id="privateArea" (che inizialmente è nascosto)
diventa visibile con display: block.
- document.querySelector(".login-container").style.display
= "none";: Nasconde il modulo di login. L'elemento con
classe login-container viene nascosto.
- document.getElementById("loginForm").reset();: Resetta il modulo, cioè
cancella qualsiasi valore inserito nei campi di input.
- else: Se le credenziali non sono
corrette, il codice esegue il blocco di istruzioni successivo.
- document.getElementById("error-message").style.display
= "block";: Rende visibile il messaggio di errore.
L'elemento con id="error-message", inizialmente nascosto,
diventa visibile.
- document.getElementById("error-message").textContent
= "Credenziali errate, riprova.";: Modifica il testo del
messaggio di errore per informare l'utente che le credenziali inserite
non sono corrette.
5. Funzione di Logout
function
logout() {
// Nascondi l'area privata
document.getElementById("privateArea").style.display
= "none";
// Mostra il login
document.querySelector(".login-container").style.display =
"block";
}
- logout(): Questa funzione viene
chiamata quando l'utente clicca sul pulsante di logout.
- document.getElementById("privateArea").style.display
= "none";: Nasconde l'area privata, rendendola
invisibile.
- document.querySelector(".login-container").style.display
= "block";: Rende nuovamente visibile il modulo di login,
permettendo all'utente di rientrare nel sistema.
Riassunto Funzionamento:
- Quando l'utente invia il modulo
di login, viene impedito il comportamento predefinito del form (cioè il
ricaricamento della pagina).
- Vengono prelevate le
credenziali inserite e confrontate con quelle predefinite (in questo caso
"admin" e "password123").
- Se le credenziali sono
corrette, l'area privata viene visualizzata e il modulo di login nascosto.
Se sono errate, viene mostrato un messaggio di errore.
- C'è una funzione di logout
che nasconde l'area privata e riporta il modulo di login a visibilità.
Commenti
Posta un commento