Ahlan wa sahlan, para calon programmer masa depan!
Bayangkan kamu mau masuk ke ruang kelas digital yang pintunya tertutup. Untuk bisa masuk, kamu butuh kunci khusus, yaitu username dan password.
Nah, di sinilah peran halaman login! Dalam postingan ini, kita akan belajar bagaimana cara membuat dan memahami halaman login dengan cara yang simpel dan menyenangkan.
Kali ini kita tidak sekedar memakai html + css. Kita membutuhkan bantuan JavaScript.
Penjelasan singkat:
-
Input
usernamedanpasswordhanya untuk tampilan (belum tersambung ke server). -
Saat tombol LOGIN diklik, JavaScript mengambil nama pengguna lalu menampilkan pesan sambutan.
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Halaman Login</title>
<style>
body {
background-color: #0b86d4;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.login-box {
background: white;
padding: 30px;
border-radius: 10px;
text-align: center;
width: 300px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
h2 {
margin-bottom: 20px;
color: #333;
}
input {
width: 90%;
padding: 10px;
margin: 10px 0;
border: none;
border-radius: 5px;
background-color: #eef1f7;
}
button {
width: 95%;
padding: 10px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: white;
font-weight: bold;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="login-box">
<h2>HALAMAN LOGIN</h2>
<input type="text" id="username" placeholder="Username"><br>
<input type="password" id="password" placeholder="Password"><br>
<button onclick="login()">LOGIN</button>
</div>
<script>
function login() {
var username = document.getElementById("username").value;
if(username.trim() === ""){
alert("Silakan isi username terlebih dahulu!");
} else {
document.body.innerHTML = "<h1 style='color:white; text-align:center;'>Ahlan wa sahlan, "+ username+"</h1>";
}
}
</script>
</body>
</html>
Penjelasan :
<script> ... </script>
Menandakan bahwa bagian ini adalah kode JavaScript, bukan HTML.
Segala perintah di dalamnya digunakan untuk mengatur perilaku (interaksi) halaman web, bukan tampilannya.
function login() { ... }
Mendefinisikan sebuah fungsi bernama login.
Fungsi ini berisi kumpulan perintah yang akan dijalankan ketika tombol LOGIN diklik.
(Fungsi ini dipanggil di tombol <button onclick="login()">LOGIN</button>)
var username = document.getElementById("username").value;
Perintah ini:
Mengambil nilai dari elemen HTML yang punya id="username".
.value artinya mengambil isi yang diketik oleh pengguna.
Nilai tersebut disimpan ke dalam variabel username.
Contoh:
Jika pengguna mengetik Naila, maka:
username = "Naila"
if(username.trim() === "") { ... } else { ... }
Ini adalah percabangan kondisi (if-else).
Digunakan untuk mengecek apakah input username kosong atau tidak.
username.trim() berfungsi menghapus spasi di awal dan akhir teks.
Jika hasilnya kosong (=== ""), maka tampilkan pesan peringatan.
alert("Silakan isi username terlebih dahulu!");
Menampilkan kotak peringatan (alert box) di browser jika username belum diisi.
Jadi, pengguna diingatkan agar mengisi kolom terlebih dahulu sebelum lanjut.
document.body.innerHTML = "<h1> ... </h1>";
Perintah ini mengganti seluruh isi halaman web (<body>) dengan teks sambutan baru.
"Ahlan wa sahlan, " + username akan menampilkan nama yang diketik.
style='color:white; text-align:center;' memberi warna putih dan posisi teks di tengah.
Contoh hasilnya:
Ahlan wa sahlan, Naila
Kesimpulan
Fungsi login() memiliki tujuan utama:
Mengambil nama pengguna dari kolom input, mengecek apakah kosong, lalu menampilkan pesan sambutan “Ahlan wa sahlan, [username]” di halaman web.
Tidak ada komentar:
Posting Komentar