Membina Sistem Log Masuk Mudah Menggunakan HTML, CSS, Bootstrap dan JavaScript

Memulakan perjalanan saya sebagai pembangun bahagian hadapan sememangnya mencabar dan memberi ganjaran. Salah satu projek pertama saya ialah mencipta sistem log masuk asas. Walaupun konsepnya mudah, ia membolehkan saya menggunakan konsep asas pembangunan bahagian hadapan dan mempelajari cara menyimpan data pengguna menggunakan storan setempat penyemak imbas.

Begini cara saya mendekati projek ini:

Objektif

Matlamatnya adalah untuk membina sistem log masuk asas di mana:

1. Pengguna boleh mendaftar dengan memasukkan kelayakan mereka.

2. Bukti kelayakan disimpan secara setempat dalam penyemak imbas menggunakan storan setempat.

3. Pengguna boleh log masuk dengan mengesahkan bukti kelayakan mereka yang disimpan.

Alat dan Teknologi Digunakan

HTML: Untuk menstruktur halaman web.

CSS: Untuk penggayaan dan penyesuaian reka letak.

Bootstrap: Untuk menjadikan reka bentuk responsif dan menarik secara visual.

JavaScript: Untuk interaktiviti, pengesahan dan penyepaduan storan setempat.

Ciri

Borang Pendaftaran: Menangkap nama pengguna, e-mel dan kata laluan.

Borang Log Masuk: Mengesahkan kelayakan pengguna terhadap data yang disimpan dalam storan setempat.

Pengendalian Ralat: Memberi amaran kepada pengguna jika log masuk mereka gagal atau e-mel mereka tidak didaftarkan.

Reka Bentuk Responsif: Memastikan pengalaman yang lancar merentas semua peranti.

Cara Ia Berfungsi

1. Proses Pendaftaran

Pengguna mengisi borang pendaftaran.

JavaScript mengesahkan input untuk memastikan semua medan diisi dengan betul.

Data disimpan dengan selamat dalam storan setempat penyemak imbas sebagai objek JSON.

1. Proses Log Masuk

Pengguna memasukkan e-mel dan kata laluan mereka.

JavaScript menyemak sama ada bukti kelayakan yang diberikan sepadan dengan data yang disimpan dalam storan setempat.

Jika bukti kelayakan adalah betul, pengguna diubah hala ke papan pemuka atau ditunjukkan mesej kejayaan.

1. Pengendalian Ralat

Jika e-mel tidak wujud, pengguna digesa untuk mendaftar.

Jika kata laluan salah, mesej ralat dipaparkan.

Gambaran Keseluruhan Kod

HTML (Struktur)

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

Cabaran dan Pembelajaran

1. Storan Setempat:
   Memahami cara menyimpan, mendapatkan semula dan menghuraikan data dalam storan setempat merupakan perkara penting.

2. Pengesahan Borang:
   Saya belajar cara menggunakan JavaScript untuk mengesahkan input pengguna dan memberikan maklum balas masa nyata.

3. Reka Bentuk Responsif:
   Menggunakan Bootstrap membantu saya mencipta UI yang bersih dan responsif tanpa menghabiskan terlalu banyak masa untuk penggayaan.

Penambahbaikan Masa Depan

Ini baru permulaan. Pada masa hadapan, saya bercadang untuk:

Tambah penyulitan kata laluan untuk keselamatan yang lebih baik.

Laksanakan storan sesi untuk mengurus keadaan log masuk.

Ganti storan setempat dengan pangkalan data bahagian belakang untuk kebolehskalaan.

Tambahkan ciri "Terlupa Kata Laluan" untuk kebolehgunaan yang lebih baik.

Kesimpulan

Projek ini merupakan pengalaman pembelajaran yang hebat dan peristiwa penting dalam perjalanan saya sebagai pembangun bahagian hadapan. Dengan membina sistem log masuk ini, saya mengukuhkan pemahaman saya tentang HTML, CSS, Bootstrap dan JavaScript. Ia ringkas namun berfungsi dan berfungsi sebagai asas yang kukuh untuk projek yang lebih maju pada masa hadapan.

Jangan ragu untuk mencubanya dan kongsi maklum balas anda!

Atas ialah kandungan terperinci Sistem log masuk pintar. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!