Catatan Kuliah: Interaksi Halaman Web Menggunakan JavaScript

Pendahuluan

• Belajar membuat halaman website interaktif menggunakan JavaScript.
• JavaScript memungkinkan penambahan animasi, pembaruan data, dan berbagai interaksi lain pada halaman web.

Tujuan

• Membuat halaman login yang menginput username dan password.
  • Jika benar, diarahkan ke halaman landing page.
  • Jika salah, ditampilkan pesan kesalahan.

Langkah-langkah Membuat Halaman Login

1. Persiapan File

   • Pastikan sudah memiliki file landingpage.html.
   • Buat file baru login.html.

2. Membuat Struktur HTML

   • Tambahkan judul dan elemen formulir login.
   • Elemen yang perlu ditambahkan:
     • Input untuk username
     • Input untuk password
     • Tombol login
   • Contoh struktur HTML:

     <form action="">
         <input type="text" placeholder="Username" id="username">
         <input type="password" placeholder="Password" id="password">
         <button id="tombol">Login</button>
     </form>
     

3. Penempatan Elemen

   • Gunakan CSS untuk memposisikan elemen di tengah halaman.
   • Tambahkan gaya menggunakan inline CSS atau stylesheet yang sesuai.

4. Menambahkan Script JavaScript

   • Tambahkan elemen <script> setelah elemen HTML untuk memastikan elemen sudah dirender sebelum JavaScript dijalankan.
   • Ambil elemen tombol login, username, dan password menggunakan document.querySelector.
   • Contoh kode untuk mengambil elemen:

     const tombol = document.querySelector('#tombol');
     const username = document.querySelector('#username');
     const password = document.querySelector('#password');
     

5. Menambahkan Event Listener

   • Tambahkan event listener untuk merespon klik pada tombol login.
   • Cek nilai username dan password.
   • Jika keduanya benar, arahkan ke landingpage.html. Jika salah, tampilkan pesan kesalahan.
   • Contoh kode untuk pengecekan:

     tombol.addEventListener('click', function(event) {
         event.preventDefault(); // Mencegah reload halaman
         if (username.value === 'guru' && password.value === 'ggwp') {
             window.location.href = 'landingpage.html';
         } else {
             alert('Username dan password Anda salah');
         }
     });
     

Referensi

• MDN Web Docs untuk referensi HTML, CSS, dan JavaScript.
• Panduan JavaScript fundamental: variabel, pengolahan teks, kondisi, dan DOM scripting.

Kesimpulan

• Telah berhasil membuat halaman login dengan interaksi dasar menggunakan JavaScript.
• Terdapat tantangan untuk menampilkan pesan kesalahan dengan tampilan yang lebih baik.