Cara Membuat Form Login Sederhana dengan JavaScript

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.

Untitled

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<html>
    <script language="JavaScript">
        function Login(){

       
        var username=document.login.username.value;
        username=username.toLowerCase();

        var password=document.login.password.value;
        password=password.toLowerCase();
       
            if (username=="juned" && password=="123"){
            alert("Selamat anda berhasil login");
            }
            else{
            alert("User name dan password anda salah!");
            }
        }
       
        </script>
       
<body>
        <form name="login">
            <table width="225" cellpadding="4">
            <tr><td>Username</td><td><input type="text" name="username"></td></tr>
            <tr><td>Password</td><td><input type="text" name="password"></td></tr>
            <tr><td colspan="2" align="right"><input type="button" value="Login" onClick="Login()"></td></tr>
            </table>
</body>

</html>

Printscreen output program

1

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

18 komentar:

  1. terima kasih gan sangat berguna sekali

    BalasHapus
  2. Cuma hias-hias san aja ya gan, berarti blog itu gak punya log in donk

    BalasHapus
  3. Bisa kok di taro log in jika memang blognya bersifat privasi dan hanya orang tertentu yang bisa baca jadi orang yang tidak bisa login di alihkan kehalaman lain atau blank template

    BalasHapus
  4. Gan, klo abis login terus klo semua nya betul nanti di alih kan ke alamat lain bisa gak gan?

    BalasHapus
    Balasan
    1. Bisa kok gan tinggal di modif sedikit aja

      Hapus
  5. Nanya lagi dong gan, giman caranya di alihkan ke alamat lain? Maklum, pemula

    BalasHapus
    Balasan
    1. Supaya lebih jelas saya akan lanjutkan pembahasan mengenai form login ini di artikel selanjutnya... di tunggu ya... :)

      Hapus
  6. cara ngeditnya gmna gan? biar yang salah password bisa ke halaman lain?

    BalasHapus
  7. Aku masih kurang mudeng gan....
    jangan lupa mampir juga ye di blog ane..
    www.BubeMob.com

    BalasHapus
  8. http://www.narotama.ac.id/

    cara ketika login benar pindah screen gimana?

    BalasHapus
  9. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  10. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  11. terimakasih banyak buat tutorialnya.. matab bro

    http://obattraditional.com/

    BalasHapus
  12. gan mau nanya... kalo misalkan kita login trus salah 3x username sama passwordnya..
    trus kita ga bisa login lagi kalo udah 3x bikin kesalahan.. nah itu gimana cara bikin scriptnya???
    mohon bantuannya kalo bisa.. Trimakasih~

    BalasHapus
  13. Kalo loginnya pake enter gmn? jadi ga perlu klik login

    BalasHapus
  14. Mantap gan, kunbal : webkelvin.blogspot.com

    BalasHapus
  15. css nya dibuat dong gan. terimakasih

    BalasHapus
Catatan:
Untuk menyisipkan video, gunakan tag <i rel="youtube">URL YOUTUBE ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Untuk menyisipkan kode panjang, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!"

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah ini.

Konversi Kode di Sini!OOT

 
Design by Juned al~Bughisy Copyright © 2012 ~ 2013 Powered by Blogger
Back to Top