Membuat Alert Dialog dengan JavaScript di HTML

Pada umumnya, JavaScript banyak digunakan oleh orang-orang untuk mempercantik tampilan dan kinerja website. Sebuah website yang bagus dan dinamsi adalah website yang memiliki JavaScript. Kenapa demikian? karena JavaScript digunakan untuk memperindah tampilah sebuah website dan juga membantuk pengguna untuk berinteraksi dengan website tersebut dengan interface.

Pada pembahasan kali ini kita akan membahas mengenai Alert Dialog dengan menggunakan JavaScript di HTML. Apa fungsi dari Alert Dialog ini? fungsinya yaitu untuk menampilakn pesan dialog kepada pengguna saat pengguna mengelola website tersebut. Contohnya bila saat user ingin login, lalu user memasukkan username dan passwordnya, setelah itu diakan menekan submit. Bila user berhasil Login maka Alert Dialog akan dijalankan dengan menampilak pesan bahawa user berhasil login, Sebaliknya bila user gagal maka Alert Dialog dijalankan kembali dengan menampilkan pesan bahwa user tersebut gagal login. Baiklah langsung saja masuk ke pembahasan.

Membuat File index.html

Tahap pertama, buatlah sebuah file html dengan nama index.html. Difile ini kita akan membuat sebuah form login untuk contohnya. Selanjutnya kita akan masuk ke tahap pengkodingan. Silahkan masukkan koding seperti berikut ini.


<html>
<head>
<title>Form Login </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body bgcolor="#ffffff">
<div class="form_login">
 <div class="">
  <p class="txtHeader"><b>L</b>ogin <b>N</b>ow</p>
 <table  class="layout_login">
  <form method="post" action="" onSubmit="validasi()">
   <tr>
    <td><input type="text" name="username" class="txtUser" placeholder="Username" id="username" required /> </td>
   </tr>
   <tr>
    <td><input type="password" name="password" class="txtPass" placeholder="Password" id="password" required /> </td>
   </tr>
   <tr>
    <td><input type="submit" name='login' class="btnLogin" value="Login" /></td>
   </tr>
   <tr>
    <td><p class="copright" >&copy 2018. All Rights Reserved.</p></td>
   </tr>
  </form>
 </div>
</div>
</body>
</html>

Membuat File style.css

Setelah membuat file html di atas silahkan buat file css dengan nama style.css. Lalu simpan dala satu folder dengan file index. Berikut adalah codin css nya. Silahkan masukkan ke dalam file style.css


.login_form {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 1890px;
  height: 1417px;
  z-index: 9;
}
.copright {
  font-size: 12px;
  font-family: "Arial";
  color: rgb(0, 0, 0);
  line-height: 1.2;
  text-align: left;
  position: absolute;
  left: 120px;
  top: 385px;
  z-index: 8;
}
.btnLogin {
  font-size: 20px;
  border: 0px;
  border-radius: 10px;
  background-color: #00aeef;
  position: absolute;
  left: 50px;
  top: 300px;
  width: 300px;
  height: 54px;
  z-index: 7;
}
.txtPass {
 border: 0px;
  border-radius: 10px;
  background-color: rgb(215, 215, 215);
  position: absolute;
  left: 50px;
  top: 200px;
  width: 300px;
  height: 54px;
  padding: 16px;
  z-index: 6;
}
.txtUser {
 border: 0px;
  border-radius: 10px;
  background-color: rgb(215, 215, 215);
  position: absolute;
  left: 50px;
  top: 128px;
  width: 300px;
  height: 54px;
  padding: 16px;
  z-index: 5;
}
.txtHeader {
  font-size: 55px;
  font-family: "Arial";
  color: rgb(0, 0, 0);
  line-height: 1.2;
  text-align: left;
  position: absolute;
  left: 520px;
  top: 29px;
  z-index: 4;
}
.layout_login {
  border-radius: 10px;
  background-color: #bfbfbf;
  position: absolute;
  left: 450px;
  top: 60px;
  width: 400px;
  height: 450px;
  z-index: 3;
}

Menambahkan script javascript di file html

Setelah kedua koding diatas kalian masukkan, tahap selanjutnya adalah dengan menambahkan script JavaScript didalam file index.html. Silahkan letakkan script seperti dibawah ini ke dalam file index.html. Letakkan sesudah tag </body>.


<script type="text/javascript">
function validasi() {
  var username = document.getElementById("username").value;
  var password = document.getElementById("password").value;
    if (username== "admin" && password=="admin") {
   alert('Anda Berhasil Login!')
    window.open("http://portal-coding.blogspot.com")
  }else{
   alert('Username atau Password Salah');
  }
 }
</script>

Penjelasan :

pada variabel username kita mengambil nilai dari tag input yang ber id "username" dan pada variabel password kita mengambil nilai dari tag input dengan id "password".
Pada kondisi if, jika user memasukkan username ="admin" dan passwordnya ="admin" maka alert diallog akan menampilkan pesan "Anda berhasil login".
Bila user memasukkan username dan password selain "admin" maka alert dialog akan menampilakn pesan "Username atau Password Salah".

Setelah semua koding diatas kalian masukkan, jangan lupa untuk disave dan silahkan dijalankan. Maka akan menampilkan hasil seperti berikut ini.

Tampilan awal.

Saat Usernam dan Password benar.

Saat username dan Password salah.

Demikianlah tutorial singkat mengenai membuat Alert Dialog dengan JavaScript di HTMl. Silahkan di pelajari dengan seksama agar lebih bermanfaaat. Jika ada yang kurang paham bisa bertanya melalui kolom komentar. Insya Allah akan saya jawab semaksimal mungkin. Jangan lupa untuk membagikan artikel ini agar orang lain dapat memahaminya juga dan ilmunya jadi sangat bermanfaat. Terimakasih.

Membuat Alert Dialog dengan JavaScript di HTML