Diposting   6 menit membaca (Sekitar 861 kata)

Program login dengan captcha angka random

Tampilan Program

Bismillahirrahmanirrahim

Pembahasan kali ini kita akan membuat program login yang sederhana, dimana user yang menginputkan harus mengisi sebuah captcha angkarandom agar bisa login. Jika user memasukkan inputan captcha salah maka user tidak akan bisa login, tapi sebalik nya jika user memasukkan captcha dengan benar maka user akan login.

Penasaran bagaimana cara membuat nya? Mari kita buat bersama-sama.

Pertama, siapkan terlebih dahulu file html kalian. Lalu buat form sederhana, jika kalian ingin membuat form pilihan kalian silahkan dibuat terlebih dahulu, atau kalian bisa ikuti saya dengan menyalin kode dibawah ini:

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Login sederhana</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Login sederhana</h1>
    <form>
      <h2><span id="tampilUsername"></span>, Anda berhasil login...</h2>
      <button type="button" id="kembali">Kembali</button>
      <table>
        <tr>
          <td><label for="username"> Username:</label></td>
          <td><input type="text" id="username" placeholder="Username" autocomplete="off" /></td>
        </tr>
        <tr>
          <td><label for="password"> Password:</label></td>
          <td><input type="password" id="password" placeholder="Password" /></td>
        </tr>
        <tr>
          <td></td>
          <td><input type="number" id="captcha" placeholder="Captcha" /><span id="angkaRandom"></span></td>
        </tr>
        <tr>
          <td></td>
          <td><span id="notifCaptcha"></span></td>
        </tr>
        <tr>
          <td></td>
          <td><input type="submit" id="btn" value="Submit" /></td>
        </tr>
      </table>
    </form>
    <script src="main.js"></script>
  </body>
</html>

Perlu diingat kita juga sudah menghubungkan file css dan javascript kita, nanti kita perlu buat saja file tersebut. Jika kalian menyalin kode diatas, maka hasilnya akan seperti ini.

Tampilan awal

Sekarang kita hias sedikit dengan css, kamu bisa menghias sendiri form nya. Atau kamu bisa ikuti saya dengan menyalin kode dibawah ini:

style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

body {
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

form {
  border: 2px solid rgb(25, 56, 190);
  padding: 40px 20px 20px;
  box-sizing: border-box;
}

h2,
#kembali {
  display: none;
  text-align: center;
}

#kembali {
  margin: auto;
}

h1 {
  text-align: center;
}

#angkaRandom {
  margin-left: 10px;
  background-color: rgb(230, 192, 123);
  border: 2px solid rgb(51, 51, 51);
  padding: 1px 8px;
  user-select: none;
  cursor: not-allowed;
}

#password {
  margin: 10px 0;
}

#btn {
  margin-top: 10px;
  padding: 2px 10px;
}

input:not(input[type="submit"]) {
  width: 100px;
}

#notifCaptcha {
  font-size: 0.8em;
}

Maka hasil nya setelah ditambahkan css, jika kalian mengikuti kode diatas akan seperti ini.

Tampilan dengan CSS

Ngomong-ngomong kalian ngeh gak ya? Ada kotak kosong warna coklat dengan border hitam, kenapa kosong? Itu nant akan diisi dengan angka random untuk captcha, kita bahas pada bagian javascript.

Baik, untuk menjawab masalah diatas tadi, sekarang kita masuk ke bagian javascript nya. Silahkan kamu buat dulu file javascript nya,lalu bisa salin kode dibawah ini:

main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
// Membuat angka random untuk captcha
const angkaRandom = document.getElementById("angkaRandom");
function angkaUntukCaptcha(max, min) {
  return Math.floor(Math.random() * (max - min) + min);
}

// Membuat variable untuk menampung angka random, disini saya ingin ada 5 angka random jadi dibuat 5 variable
const angkaPertama = angkaUntukCaptcha(1, 10);
const angkaKedua = angkaUntukCaptcha(1, 10);
const angkaKetiga = angkaUntukCaptcha(1, 10);
const angkaKeempat = angkaUntukCaptcha(1, 10);
const angkaKelima = angkaUntukCaptcha(1, 10);
// Menggabungkan kelima angka random
const gabungAngkaRandom = `${angkaPertama}${angkaKedua}${angkaKetiga}${angkaKeempat}${angkaKelima}`;
angkaRandom.innerText = gabungAngkaRandom;

// Seleksi terlebih dahulu inputan html nya
const username = document.getElementById("username");
const password = document.getElementById("password");
const captcha = document.getElementById("captcha");
const submit = document.getElementById("btn");
// Lakukan event ketika tombol di klik
submit.addEventListener("click", function (e) {
  // Jika username kosong maka user wajib mengisi terlebih dahulu
  if (username.value === "") {
    alert("Isi username kamu terlebih dahulu!");
    // Jika password kosong maka user wajib mengisi terlebih dahulu
  } else if (password.value === "") {
    alert("Isi password kamu terlebih dahulu!");
    // Jika username dan password tidak kosong serta captcha berisi nilai angka yang tepat sesuai captcha yang diberikan
  } else if (username.value !== "" && password.value !== "" && captcha.value === gabungAngkaRandom) {
    document.getElementsByTagName("table")[0].style.display = "none";
    document.getElementsByTagName("h2")[0].style.display = "block";
    document.getElementById("tampilUsername").innerText = username.value;
    document.getElementById("kembali").style.display = "block";
  }
  e.preventDefault();
});

// Untuk mengecek inputan nilai yang dimasukkan user
captcha.addEventListener("input", function () {
  // Jika captcha kosong, akan menampilkan pesan
  if (captcha.value === "") {
    notifCaptcha.innerText = "Isi captcha!";
    // Jika captcha tidak sama dengan angka random yang tertera maka akan salah dan akan diberi warna merah
  } else if (captcha.value !== gabungAngkaRandom) {
    notifCaptcha.style.color = "red";
    notifCaptcha.innerText = "Captcha salah!";
    // Jika captcha sama dengan angka random yang tertera maka akan benar dan akan diberi warna hijau
  } else if (captcha.value === gabungAngkaRandom) {
    notifCaptcha.style.color = "green";
    notifCaptcha.innerText = "Captcha benar!";
  }
});

// Ketika user login, lalu ada tombol kembali. Maka akan kembali ke halam form login
kembali.addEventListener("click", function () {
  document.getElementsByTagName("table")[0].style.display = "block";
  document.getElementsByTagName("h2")[0].style.display = "none";
  document.getElementById("kembali").style.display = "none";
  document.getElementById("kembali").type = "submit";
});

Maka hasil akhir dari materi ini setelah diberikan kode javascript akan seperti ini.

Tampilan dengan JS

Gimana? Apa hasil teman-teman sama seperti saya? Ini lebih fokus kebagian javascript aja ya atau jalannya program untuk hiasan seperti html dan css nya bisa teman-teman kreasikan sendiri. Kalo ada masalah silahkan tulis di kolom komentar ya.

Untuk mau lihat hasil saya seperti apa, teman-teman bisa lihat di Demo-Program atau untuk yang mau lihat sumber kode nya bisa lihat di Repo-Github.

Sekian yang bisa jelaskan mengenai cara membuat program login dengan captcha angka yang random, pastinya ada lebih cara yang lebih efektif lagi teman-teman bisa berikan hasil nya lewat kolom komentar. Agar dapat saya refaktor lagi program ini.

Terima kasih semua, semoga dapat bermanfaat :D

Program login dengan captcha angka random

https://mfebriann.github.io/tutorial/program-login-captcha-angka-random/

Author

Muhammad Febrian

Posted on

2021-05-09

Updated on

2022-07-25

Licensed under

#

Suka dengan artikel ini? Bantu penulis dengan donasi melalui

Komentar

IKUTI

Tautan

Arsip

Berlangganan untuk pembaruan

Berlangganan untuk mendapatkan pembaruan terbaru!

Kategori

Terbaru

Tag

Git1
Web1
captcha1
css7
curhatan1
emmet1
feature1
form2
gambar1
ganjil-genap1
hexo1
hosting1
html7
ikon1
ilustrasi1
info1
inward1
javascript1
js5
layout1
lingkaran1
netlify1
outward1
perkenalan1
plugin1
program5
tiket2
tips1
vercel1
vscode1
web2
website3

Iklan

Your browser is out-of-date!

Update your browser to view this website correctly.&npsb;Update my browser now

×

×