Cara menggunakan login javascript sederhana

Cara Membuat Form Login Sederhana dengan JavaScript - Pada postingan kali ini saya akan kembali membahas hal-hal yang berkaitan dengan pemrograman web, yakni membuat sebuah form login pada halaman web.

Pada jejaring sosial seperti facebook, twitter, kaskus dll. Sering kali kita menemukan sebuah form login yang mana biasanya anda di suruh untuk memasukkan username atau email dan kemudian password anda. Hal ini dilakukan bertujuan sebagai keamanan akun anda dari pihak yang bertanggung jawab yang dapat menyalahgunakan akun anda.

Nah, disini akan mencoba membuat form login sederhana dengan menggunakan javascript yang mana terdapat 2 buah inputan yakni username dan password.

Algoritma untuk membuat form login sendiri bisa bilang simple yakni jika username dan password dimasukkan benar maka akan muncul pesan “Selamat anda berhasil login...!!!” dan begitu juga sebaliknya.

Source Code Program

    
        function Login[]{ 
            var user = document.getElementById["username].value;
            var pass = document.getElementById["password].value;

            if [user=="admin" && passw=="123"]{
                alert["Selamat anda berhasil login"];
            }else{
                alert["Username dan password anda salah!"];
            }
        }
    
   

    
        

            

                
Username
                

            
            

                
Password
                

            
            

                

            
        
    

Penjelasan Kode Program

• document.getElemetById["username"].value: digunakan untuk mengambil nilai atau isi dari input dengan id="username"
• document.getElementById["password"].value : digunakan untuk mengambil nilai tau isi dari input dengan id="password"
• if [user=="juned" && pass="123"] : Percabangan dengan menggunakan operator && [artinya kedua kondisi harus terpenuhi yakni user harus bernilai "juned" dan pass harus bernilai "123" maka kondisi akan bernilai TRUE] jika nilai TRUE maka akan ditampilkan pesan Selamat Anda berhasil login.
• else : ketika kondisi bernilai FALSE maka yang akan dijalankan adalah proses yang ada di dalam tag else yakni menampilkan pesan "Username dan password salah!"

Demo Form Login

Untuk melihat demonya secara langsung dapat melalui link yang ada di bawah ini.

Source code program di atas tidak include dengan kode CSS. Jadi tampilan yang discreenshoot akan berbeda dengan tampilan yang di demo

Printscreen Output Program

Semoga postingan kali ini bermanfaat, dan jika ada yang ditanyakan mengenai source code diatas, silahkan tinggalkan komentar anda.