Système de connexion intelligent

Création d'un système de connexion simple à l'aide de HTML, CSS, Bootstrap et JavaScript

Commencer mon parcours en tant que développeur front-end a été à la fois stimulant et gratifiant. L'un de mes premiers projets consistait à créer un système de connexion de base. Bien que simple dans son concept, cela m'a permis d'appliquer les concepts fondamentaux du développement front-end et d'apprendre à stocker les données utilisateur à l'aide du stockage local du navigateur.

Voici comment j'ai abordé ce projet :

Objectif

L'objectif était de créer un système de connexion de base où :

1. Les utilisateurs peuvent s'inscrire en saisissant leurs identifiants.

2. Les informations d'identification sont enregistrées localement dans le navigateur à l'aide du stockage local.

3. Les utilisateurs peuvent se connecter en vérifiant leurs informations d'identification enregistrées.

Outils et technologies utilisés

HTML : Pour structurer la page Web.

CSS : pour la personnalisation du style et de la mise en page.

Bootstrap : pour rendre le design réactif et visuellement attrayant.

JavaScript : pour l'interactivité, la validation et l'intégration du stockage local.

Caractéristiques

Formulaire d'inscription : capture le nom, l'adresse e-mail et le mot de passe de l'utilisateur.

Formulaire de connexion : valide les informations d'identification de l'utilisateur par rapport aux données stockées dans le stockage local.

Gestion des erreurs : alerte les utilisateurs si leur connexion échoue ou si leur adresse e-mail n'est pas enregistrée.

Conception réactive : garantit une expérience transparente sur tous les appareils.

Comment ça marche

1. Processus d'inscription

L'utilisateur remplit le formulaire d'inscription.

JavaScript valide la saisie pour garantir que tous les champs sont correctement remplis.

Les données sont stockées en toute sécurité dans le stockage local du navigateur en tant qu'objet JSON.

1. Processus de connexion

L'utilisateur saisit son email et son mot de passe.

JavaScript vérifie si les informations d'identification fournies correspondent aux données stockées dans le stockage local.

Si les informations d'identification sont correctes, l'utilisateur est redirigé vers un tableau de bord ou affiche un message de réussite.

1. Gestion des erreurs

Si l'e-mail n'existe pas, l'utilisateur est invité à s'inscrire.

Si le mot de passe est incorrect, un message d'erreur s'affiche.

Aperçu du code

HTML (Structure)

<div>



<p>CSS (Styling with Bootstrap)</p>

<p>I used Bootstrap for a responsive layout, ensuring the system works well on all devices. Minor custom CSS was added to fine-tune padding and margins.</p>

<p>JavaScript (Functionality)<br>
</p>

<pre class="brush:php;toolbar:false">// Sign-Up Function
function signup() {
  const name = document.getElementById("name").value;
  const email = document.getElementById("email").value;
  const password = document.getElementById("password").value;

  if (name && email && password) {
    const user = { name, email, password };
    localStorage.setItem(email, JSON.stringify(user));
    alert("Sign up successful! Please login.");
    document.getElementById("signup-form").classList.add("d-none");
    document.getElementById("login-form").classList.remove("d-none");
  } else {
    alert("Please fill out all fields.");
  }
}

// Login Function
function login() {
  const email = document.getElementById("login-email").value;
  const password = document.getElementById("login-password").value;
  const storedUser = JSON.parse(localStorage.getItem(email));

  if (storedUser) {
    if (storedUser.password === password) {
      alert(`Welcome back, ${storedUser.name}!`);
    } else {
      alert("Incorrect password.");
    }
  } else {
    alert("Email not registered. Please sign up first.");
  }
}

Défis et apprentissages

1. Stockage local :
   Comprendre comment enregistrer, récupérer et analyser des données dans le stockage local était un élément clé à retenir.

2. Validation du formulaire :
   J'ai appris à utiliser JavaScript pour valider les entrées des utilisateurs et fournir des commentaires en temps réel.

3. Conception réactive :
   L'utilisation de Bootstrap m'a aidé à créer une interface utilisateur propre et réactive sans consacrer trop de temps au style.

Améliorations futures

Ce n'est que le début. À l'avenir, je prévois de :

Ajoutez le cryptage du mot de passe pour une meilleure sécurité.

Implémentez le stockage de session pour gérer les états de connexion.

Remplacez le stockage local par une base de données backend pour plus d'évolutivité.

Ajoutez une fonctionnalité « Mot de passe oublié » pour une meilleure convivialité.

Conclusion

Ce projet a été une formidable expérience d'apprentissage et une étape importante dans mon parcours en tant que développeur front-end. En créant ce système de connexion, j'ai consolidé ma compréhension du HTML, CSS, Bootstrap et JavaScript. C'est simple mais fonctionnel et sert de base solide pour des projets plus avancés à l'avenir.

N'hésitez pas à l'essayer et à partager vos retours !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!