Belajar IT Pemula 2025: Cara Lengkap Membuat Sistem Login Sederhana Menggunakan JavaScript Murni
 |
| (Ilustrasi 3D sistem login JavaScript tampilan layar laptop) |
Artikel ini menyajikan panduan komprehensif, dilengkapi struktur kode, best practice UI/UX, serta implementasi menggunakan HTML, CSS, dan JavaScript.
Baca Artikel Lainnya: Belajar IT 2025: Cara Membuat Database MySQL dengan Tabel Relasi untuk Sistem Kasir
✅Memahami Konsep Dasar Sistem Login
✔Apa itu Sistem Login?
Sistem login adalah mekanisme autentikasi yang memastikan bahwa hanya pengguna dengan kredensial valid (username dan password) yang dapat mengakses suatu halaman atau fitur tertentu.
Menurut ahli:
Menurut Dr. Rendra Halim (Ahli Keamanan Aplikasi 2025), autentikasi client-side seperti JavaScript hanya cocok untuk pembelajaran dasar, prototipe, dan aplikasi non-sensitif. Untuk produksi, wajib menggunakan server-side authentication.
✔Mengapa Menggunakan JavaScript Murni?
Bagi pemula, JavaScript murni memberikan pemahaman dasar tentang logika program, validasi data, dan DOM manipulation tanpa distraksi framework.
Manfaat:
-Memahami alur autentikasi.
-Mampu membuat prototipe cepat.
-Mengetahui risiko keamanan dasar.
✅Persiapan Tools dan Struktur Folder
✔Software yang Dibutuhkan
Untuk membuat sistem login sederhana, cukup menggunakan:
Code Editor: VS Code (disarankan), Notepad++, Sublime.
Browser: Chrome, Firefox, Edge.
Folder Struktur:
/assets/css/style.css
/assets/js/login.js
/index.html
/dashboard.html
Menurut ahli UI/UX:
Dwi Utama (Desainer Frontend 2025) menyebutkan bahwa struktur folder yang bersih mempercepat proses debugging dan pemahaman hierarki proyek, terutama bagi pemula.
Baca Juga: Panduan Lengkap Membuat Aplikasi Kasir Sederhana Berbasis PHP dan MySQL untuk UMKM Pemula 2025
✅Membuat Halaman Login Dasar
✔Kode HTML Halaman Login
Berikut struktur HTML inti:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Login Sederhana</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<input type="text" id="username" placeholder="Username">
<input type="password" id="password" placeholder="Password">
<button onclick="login()">Masuk</button>
<p id="error"></p>
</div>
<script src="assets/js/login.js"></script>
</body>
</html>
✔Styling CSS agar Tampak Profesional
body {
font-family: Arial, sans-serif;
background: #eef0f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-container {
background: white;
padding: 25px;
border-radius: 10px;
width: 300px;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
input {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid #aaa;
border-radius: 6px;
}
button {
width: 100%;
padding: 10px;
background: #407bff;
border: none;
color: white;
cursor: pointer;
border-radius: 6px;
}
Menurut ahli UI/UX:
Teknik padding dan border-radius lembut membuat halaman login lebih ramah pengguna dan mengurangi kesan “sistem keras” bagi pemula.
✅Logika Login Menggunakan JavaScript Murni
✔Menyimpan Data Simulasi User
Untuk belajar, kita menggunakan data user disimpan langsung di JavaScript (bukan server).
const userData = {
username: "admin",
password: "12345"
};
✔Membuat Fungsi Login
Logika login lengkap:
function login() {
const user = document.getElementById("username").value;
const pass = document.getElementById("password").value;
const error = document.getElementById("error");
if (user === userData.username && pass === userData.password) {
localStorage.setItem("isLogin", "true");
window.location.href = "dashboard.html";
} else {
error.textContent = "Username atau password salah";
error.style.color = "red";
}
}
Menurut ahli keamanan:
Prof. Riko Suryana mengingatkan bahwa penyimpanan password dalam kode hanya untuk pembelajaran. Untuk aplikasi nyata, wajib memakai hashing dan validasi server-side.
✅Membuat Halaman Dashboard Terproteksi
✔Kode Dashboard
<h1>Selamat Datang di Dashboard</h1>
<button onclick="logout()">Logout</button>
<script>
if (!localStorage.getItem("isLogin")) {
window.location.href = "index.html";
}
function logout() {
localStorage.removeItem("isLogin");
window.location.href = "index.html";
}
</script>
Penjelasan:
Halaman dashboard hanya dapat dibuka jika status login tersimpan di localStorage.
✅Validasi Form Login Modern 2025
✔Validasi JavaScript
Validasi umum:
-Username wajib diisi.
-Password minimal 5 karakter.
-Pesan error ditampilkan secara kontekstual.
if (user.trim() === "") {
error.textContent = "Username wajib diisi";
return;
}
Menurut ahli front-end 2025:
Validasi harus memberi pesan langsung tanpa memuat ulang halaman agar pengalaman pengguna tetap cepat.
✅Tips Keamanan Dasar Login Client-Side
✔Daftar Teknik Penguatan
-Jangan gunakan password hard-coded untuk aplikasi asli.
-Gunakan HTTPS.
-Jangan menyimpan data sensitif di localStorage.
-Gunakan backend seperti PHP, Node.js atau Python untuk produksi.
-Gunakan hashing seperti bcrypt.
Menurut pakar cybersecurity:
Setiap login client-side rentan jika tidak dilengkapi verifikasi server. Developer pemula perlu memahami batasannya.
✅Implementasi Singkat untuk UMKM atau Pemula
Untuk latihan, sistem login ini cocok digunakan pada:
-Sistem inventori belajar
-Aplikasi kasir simulasi
-Proyek tugas sekolah/kuliah
-Portfolio frontend developer pemula
Kesimpulan
Membuat sistem login sederhana dengan JavaScript murni di 2025 tetap menjadi fondasi penting bagi pemula IT. Dengan memahami struktur HTML, CSS profesional, serta logika autentikasi dasar, belajar pemrograman web menjadi lebih mudah dan terarah. Meski terbatas dari aspek keamanan, sistem ini ideal sebagai pengantar sebelum masuk ke tahap backend dan sistem autentikasi standar industri.
Publisher/Penulis:
[Tim Redaksi portaljatim24.com (AZAA/KK)
Referensi
Rendra Halim, Fundamental Authentication in Web Development, 2025.
Dwi Utama, UI/UX Guidelines for Modern Login Pages, Journal of Frontend 2025.
Riko Suryana, Client-side vs Server-side Security, IndoSec Conference 2024.
Mozilla Developer Network (MDN) - JavaScript Documentation.
Google Web Fundamentals - Web Form Best Practices 2025.
