. Cara Membuat Kotak Username Dan Password Sederhana Menggunakan JavaScript Pemrograman Web - Berbagi Pengetahuan

Cara Membuat Kotak Username Dan Password Sederhana Menggunakan JavaScript Pemrograman Web

Assalamu’alaikum..

            Masih Pada pembahasan Laboratorium Informatika, kali ini Praktikum Pemrograman Web ke 2 saya ingin sharing tentang Cara Membuat Kotak Username Dan Password Menggunakan Java Script. Bahannya masih sama yaitu Notepad++. Oke langsung saja ya disimak :

 1. Buka Notepad++ dengan cara : tekan (Windows+r) – ketik notepad++ , lalu ketikkan atau copy paste script dibawah ini :

<html>
<head>

<script type="text/javascript">
function salam(){
            alert("Assalamu'alaikum Brada!!");
            }
           
function spoiler() {
            document.getElementById("nama").innerHTML="Muhammad Faris Al Fatih";
            }
function npm() {
            document.getElementById("npm").innerHTML="54411827";
            }
            </script>

            </head>
            <form method="post">
            <p>Username : <input type="text" name="nama"><br></p>
            <p>Password : <input type="password" name="password"><br></p>
            <input type="button" value="Submit">
            <input type="button" value="Reset">
            <input type="submit" onclick="salam()" value="Salam">
            </form>
           
<p> Ini gan nama ane :</p>  
<p id="nama">
<input type="button" onclick="spoiler()" value="Spoiler :">

<p> Ini gan NPM ane :</p>    
<p id="npm">
<input type="button" onclick="npm()" value="Spoiler :">

</html>

            Oke saya sedikit jelaskan maksud fungsi tag diatas, Maksud listingan diatas adalah :


<head> = digunakan untuk memberikan informasi tentang dokumen.
Pada tag javascript terdiri dari 3 script yaitu salam(), spoiler(), dan npm().

1. innerHTML= untuk memberikan informasi saat button diklik.
2. Kemudian membuat sebuah tampilan username dan password yang bisa diisi oleh pengguna. Berikut tag nya :


            Maksud listingan diatas adalah pada username dengan type=”text”, dan password dengan type=”password”, berarti password yang diisi akan berupa bintang (*).  Username dan password inputannya berupa text dan password.

2. Membuat tombol Submit, Reset dan Salam.


            Maksudnya Submit = agar data yg diisi akan disimpan. Reset = menghapus data setelah tersimpan, Salam = saat di klik akan memanggil dari function salam() yang menghasilkan berupa keluaran :


3. Kemudian saya akan memanggil dari function javascript yang lain. Seperti gambar :

            Maksudnya adalah saat kita mengklik tombol Spoiler pada “Ini gan nama ane” , maka kita akan memanggil fungsi spoiler() yang menghasilkan nama Muhammad Faris Al Fatih, dan jika mengklik tombol Spoiler pada “Ini gan NPM ane”, memanggil fungsi npm() yang menghasilkan 54411827. Seperti gambar output dibawah.

Output :


            Mungkin itu saja yang bisa saya bahas, apabila ada kata yang salah dan kurang berkenan mohon dimaafkan. Terima kasih.. ^^


Wassalamu’alaikum..


Download CodeIgniter dari Website Resminya : Disini

Download File LA 2 PWeb Lengkapnya  : Disini

Jika Menyukai Artikel di blog ini, Silahkan masukkan email sobat. Akan dapat Update artikel dari blog ini, "GRATISS!!"

6 Responses to "Cara Membuat Kotak Username Dan Password Sederhana Menggunakan JavaScript Pemrograman Web"

  1. Berguna buat situs phising :v

    ReplyDelete
    Replies
    1. hahaa jangan iseng kang.. hehehe

      terima kasih atas kunjungannya ^^

      Delete
  2. terimakasih pak atas artikelnya..

    http://blog.binadarma.ac.id/ay_ranius

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Javascript membuat tampilan web menjadi interaktif. Tapi Javascript seakan tidak terlepas dari bahasa pemrograman HTML dan HTML juga sering bersatu padu bersama PHP. Thanks bro, artikel tentang Cara Membuat Kotak Username Dan Password Sederhana Menggunakan JavaScript Pemrograman Web ini sangat membantu.


    Kunjungi web kampus saya : Atma Luhur


    Kunjungi web saya : Rismawati

    ReplyDelete
  5. Gimana cara buat usrname

    ReplyDelete