AAT (ALL ABOUT TUTORIAL)

Senin, 20 Februari 2023

Membuat menu Login Html dan Java script

Untuk membuat syntax login di HTML dengan JavaScript, Anda dapat menambahkan kode JavaScript untuk memproses data login yang dikirimkan melalui form. Berikut ini adalah contoh kode dasar untuk membuat form login dengan JavaScript:

Penjelasan kode di atas:<script>: tag pembukaan untuk menambahkan kode JavaScript di dalam halaman HTML.
function login(): fungsi JavaScript yang akan dipanggil saat tombol login ditekan.
document.getElementById("username").value: mengambil nilai input username dari form.
document.getElementById("password").value: mengambil nilai input password dari form.
if (username == "admin" && password == "admin"): melakukan pengecekan apakah username dan password yang diinputkan adalah "admin".
alert("Login berhasil"): menampilkan pesan alert jika login berhasil.
alert("Username atau password salah"): menampilkan pesan alert jika username atau password salah.
<input type="button" value="Login" onclick="login()">: membuat tombol login yang akan memanggil fungsi login() ketika ditekan.
    Dalam contoh kode di atas, jika username dan password yang diinputkan benar (yaitu "admin"), maka pesan alert "Login berhasil" akan muncul. Jika tidak, pesan alert "Username atau password salah" akan muncul. Anda dapat mengubah kode JavaScript sesuai dengan kebutuhan Anda, misalnya dengan melakukan pengiriman data ke server untuk diproses.

dan untuk pengguna yang login agar masuk ke menu lain bisa dengan menggunakan

Untuk membuat menu login agar pengguna dapat masuk ke menu lain setelah berhasil login, Anda dapat menambahkan beberapa halaman HTML dan JavaScript tambahan. Berikut adalah contoh kode dasar untuk membuat menu login dan menu utama, serta kode JavaScript untuk memproses data login:

login.html

Main.html

Penjelasan kode di atas:

    Pada halaman login.html, ketika pengguna berhasil login dengan username dan password yang benar, pesan alert "Login berhasil" akan muncul, dan halaman akan langsung dialihkan ke halaman main.html menggunakan fungsi window.location.href.
    Pada halaman main.html, pengguna akan melihat halaman menu utama.
Untuk membuat menu yang hanya dapat diakses oleh pengguna yang sudah login, Anda juga dapat menambahkan kode JavaScript untuk memeriksa apakah pengguna sudah login sebelum mengakses halaman tertentu. Anda dapat menggunakan localStorage atau sessionStorage untuk menyimpan status login pengguna.

Berikut adalah contoh kode dasar untuk menambahkan pengecekan login pada halaman                                                                             main.html:

Penjelasan kode di atas:

Pada halaman main.html, terdapat fungsi checkLogin() yang akan dipanggil ketika halaman dimuat menggunakan atribut onload pada tag <body>.

Fungsi checkLogin() akan memeriksa apakah pengguna sudah login sebelumnya dengan memeriksa nilai isLoggedIn yang disimpan pada localStorage.

Jika isLoggedIn bernilai "true", pengguna dapat mengakses halaman main.html seperti biasa.

instal XAMPP

XAMPP adalah sebuah paket software yang digunakan untuk membuat lingkungan pengembangan web lokal pada PC atau laptop. Dalam paket XAMPP terdapat beberapa komponen seperti Apache, PHP, MySQL, dan lainnya yang dibutuhkan untuk mengembangkan aplikasi web.Dengan menggunakan XAMPP, kita tidak perlu lagi repot menginstall ketiga software itu secara terpisah.

silahkan download di http://www.apachefriends.org/index.html dimana disediakan paket XAMPP for Windows, Linux dan Apple.

Pada tutorial kali ini saya akan menberitahu cara lengkap proses instalasi dan menggunakan XAMPP di windows ini

Berikut adalah langkah-langkah instalasi dan penggunaan XAMPP di Windows:

Download XAMPP dari website resmi https://www.apachefriends.org/download.html. Pilih versi yang sesuai dengan sistem operasi yang digunakan.

Pada tampilan selanjutnya akan muncul pilihan mengenai komponen mana dari XAMPP yang ingin dan tidak ingin Anda instal. Beberapa pilihan seperti Apache dan PHP adalah bagian penting untuk menjalankan website dan akan otomatis diinstal. Silakan centang MySQL dan phpMyAdmin, untuk pilihan lainnya biarkan saja.

Setelah selesai download open folder pilih folder tempat untuk menyimpan file XAMPP, rekomendasi (pilih data D:/)

Berikutnya silakan pilih folder tujuan dimana XAMPP ingin Anda instal. Rubah menjadi D:\xampp.

setelah itu KLIK install.

Tunggu sampai instalasi Selesai

Pada halaman selanjutnya, akan ada pilihan apakah Anda ingin menginstal Bitnami untuk XAMPP, dimana nantinya dapat Anda gunakan untuk install WordPress, Drupal, dan Joomla secara otomatis.

6. Pada langkah ini proses instalasi XAMPP akan dimulai. Silakan klik tombol Next.

7. Setelah berhasil diinstal, akan muncul notifikasi untuk langsung menjalankan control panel. Silakan klik Finish.

Jalankan XAMPP

Aktifkan Service “Apache” dan “MySQL” melalui XAMPP Control Panel. Klik tombol “Start”. XAMPP Control Panel bisa diakses dari desktop atau start menu.

Jika berhasil dijalankan, Apache dan MySQL akan berwarna hijau seperti gambar di bawah ini.

Sampai disini, Anda sudah berhasil menginstal XAMPP, artinya anda sudah berhasil instal PHP, APACHE dan MYSQL. Silahkan buka browser anda dan ketikkan http://localhost untuk memastikan XAMPP sudah selesai terinstal. Jika hasilnya seperti gambar di bawah ini, instalasi yang anda lakukan berjalan dengan sukses.

Demikian cara instal XAMPP pada OS windows.