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

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

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

---

目的

目標(biāo)は、次のような基本的なログイン システムを構(gòu)築することでした。

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

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

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

---

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

HTML: Web ページを構(gòu)造化します。

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

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

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

---

特徴

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

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

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

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

---

仕組み

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

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

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

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

1. ログインプロセス

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

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

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

1. エラー処理

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

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

---

コードの概要

HTML (構(gòu)造)

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

課題と學(xué)習(xí)

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

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

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

---

今後の改善點

これはほんの始まりにすぎません。將來的には、次のことを計畫しています。

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

ログイン狀態(tài)を管理するためのセッション ストレージを?qū)g裝します。

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

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

---

結(jié)論

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

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

以上がスマートログインシステムの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。