スマートログインシステム

HTML、CSS、ブートストラップ、JavaScript を使用したシンプルなログイン システムの構築

フロントエンド開発者としての旅を始めることは、困難であると同時にやりがいのあるものでした。私の最初のプロジェクトの 1 つは、基本的なログイン システムを作成することでした。概念としてはシンプルですが、フロントエンド開発の基本的な概念を適用し、ブラウザーのローカル ストレージを使用してユーザー データを保存する方法を学ぶことができました。

私がこのプロジェクトに取り組んだ方法は次のとおりです:

目的

目標は、次のような基本的なログイン システムを構築することでした。

1. ユーザーは資格情報を入力してサインアップできます。

2. 資格情報は、ローカル ストレージを使用してブラウザにローカルに保存されます。

3. ユーザーは、保存された認証情報を確認することでログインできます。

使用されるツールとテクノロジー

HTML: Web ページを構造化します。

CSS: スタイルとレイアウトのカスタマイズ用。

ブートストラップ: デザインをレスポンシブで視覚的に魅力的なものにします。

JavaScript: インタラクティブ性、検証、ローカル ストレージの統合用。

特徴

サインアップ フォーム: ユーザーの名前、電子メール、パスワードを取得します。

ログイン フォーム: ローカル ストレージに保存されているデータと照合してユーザーの資格情報を検証します。

エラー処理: ログインが失敗した場合、または電子メールが登録されていない場合にユーザーに警告します。

レスポンシブ デザイン: すべてのデバイスでシームレスなエクスペリエンスを保証します。

仕組み

1. サインアッププロセス

ユーザーは登録フォームに記入します。

JavaScript は入力を検証して、すべてのフィールドが正しく入力されていることを確認します。

データはブラウザのローカル ストレージに JSON オブジェクトとして安全に保存されます。

1. ログインプロセス

ユーザーは電子メールとパスワードを入力します。

JavaScript は、提供された認証情報がローカル ストレージに保存されているデータと一致するかどうかをチェックします。

資格情報が正しい場合、ユーザーはダッシュボードにリダイレクトされるか、成功メッセージが表示されます。

1. エラー処理

電子メールが存在しない場合、ユーザーはサインアップするよう求められます。

パスワードが間違っている場合は、エラーメッセージが表示されます。

コードの概要

HTML (構造)

<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.");
  }
}

課題と学習

1. ローカルストレージ:
   ローカル ストレージにデータを保存、取得、解析する方法を理解することが重要なポイントでした。

2. フォームの検証:
   JavaScript を使用してユーザー入力を検証し、リアルタイムのフィードバックを提供する方法を学びました。

3. レスポンシブデザイン:
   Bootstrap を使用すると、スタイル設定にあまり時間を費やすことなく、クリーンで応答性の高い UI を作成できました。

今後の改善点

これはほんの始まりにすぎません。将来的には、次のことを計画しています。

セキュリティを強化するためにパスワード暗号化を追加します。

ログイン状態を管理するためのセッション ストレージを実装します。

スケーラビリティを確保するために、ローカル ストレージをバックエンド データベースに置き換えます。

使いやすさを向上させるために「パスワードを忘れた場合」機能を追加します。

結論

このプロジェクトは素晴らしい学習体験であり、フロントエンド開発者としての私の旅における重要なマイルストーンでした。このログイン システムを構築することで、HTML、CSS、Bootstrap、JavaScript についての理解が深まりました。シンプルでありながら機能的で、将来のより高度なプロジェクトのための強力な基盤として機能します。

お気軽に試してフィードバックを共有してください!

以上がスマートログインシステムの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。