Cara Membuat Generator Password dengan jQuery

14/05/2019    Risman Hakim    76     Website

Cara Membuat Generator Password dengan jQuery - Password merupakan suatu hal yang bersifat rahasia, oleh karena itu untuk membuat password harus benar - benar kuat dan tidak bisa di tebak oleh orang lain. Untuk membuat password yang baik saat ini banyak tool generator yang bisa kita gunakan untuk men-generate password agar password yang dibuat sangat aman karena di buat dengan pola acak. Pada kesempatan kali ini saya akan berabagi artikel yang nanti bisa berguna bagi orang lain dalam membuat password yaitu Cara Membuat Generator Password dengan jQuery. Bagaimana cara membuat nya, langsung saja simak selengkap nya berikut ini.

Kode HTML

Langkah pertama untuk membuat membuat password generator adalah membuat tampilan untuk men-generate password, pada kasus ini saya menggunakan framework Bootstrap untuk mendesain generate password nya. Silahkan ketikan kode nya berikut ini.

<div class="container mt-3">
    <div class="row">
        <div class="col-md-5">
            <div class="card">
                <div class="card-header bg-info">
                    <h5 class="card-title mb-0 text-white font-weight-bold">jQuery - Generate Password</h5>
                  </div>
                <div class="card-body">

                    <div class="form-group">
                        <label class="text-muted">Menggunakan semua karakter:</label>
                        <div class="input-group">
                          <input type="text" class="form-control" rel="gp" data-size="32" data-character-set="a-z,A-Z,0-9,#">
                          <span class="input-group-prepend">
                              <button type="button" class="btn btn-success getNewPass"><span class="fas fa-sync-alt"></span></button>
                          </span>
                        </div>
                    </div>
                      
                    <div class="form-group">
                        <label class="text-muted">Menggunakan karakter a-z dan A-Z:</label>
                        <div class="input-group">
                          <input type="text" class="form-control" rel="gp" data-size="32" data-character-set="a-z,A-Z">
                          <span class="input-group-prepend">
                              <button type="button" class="btn btn-success getNewPass"><span class="fas fa-sync-alt"></span></button>
                          </span>
                        </div>
                    </div>
                      
                    <div class="form-group">
                        <label class="text-muted">Hanya menggunakan karakter A-Z:</label>
                        <div class="input-group">
                          <input type="text" class="form-control" rel="gp" data-size="20" data-character-set="A-Z">
                          <span class="input-group-prepend">
                              <button type="button" class="btn btn-success getNewPass"><span class="fas fa-sync-alt"></span></button>
                          </span>
                        </div>
                    </div>
                      
                    <div class="form-group">
                        <label class="text-muted">Hanya menggunakan karakter a-z:</label>
                        <div class="input-group">
                          <input type="text" class="form-control" rel="gp" data-size="32" data-character-set="a-z">
                          <span class="input-group-prepend">
                              <button type="button" class="btn btn-success getNewPass"><span class="fas fa-sync-alt"></span></button>
                          </span>
                        </div>
                    </div>
                      
                    <div class="form-group">
                        <label class="text-muted">Hanya menggunakan karakter angka:</label>
                        <div class="input-group">
                          <input type="text" class="form-control" rel="gp" data-size="12" data-character-set="0-9">
                          <span class="input-group-prepend">
                              <button type="button" class="btn btn-success getNewPass"><span class="fas fa-sync-alt"></span></button>
                          </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Kode jQuery

Setelah membuat desain generate password seperti diatas, langkah selanjutnya kita akan membuat fungsi dari masing - masing form generate diatas dengan menggunakan kode jQuery. Silahkan ketikan kode jQuery berikut ini.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
function randString(id){
  var dataSet = $(id).attr('data-character-set').split(',');  
  var possible = '';
  if($.inArray('a-z', dataSet) >= 0){
    possible += 'abcdefghijklmnopqrstuvwxyz';
  }
  if($.inArray('A-Z', dataSet) >= 0){
    possible += 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  }
  if($.inArray('0-9', dataSet) >= 0){
    possible += '0123456789';
  }
  if($.inArray('#', dataSet) >= 0){
    possible += '![]{}()%&*$#^<>~@|';
  }
  var text = '';
  for(var i=0; i < $(id).attr('data-size'); i++) {
    text += possible.charAt(Math.floor(Math.random() * possible.length));
  }
  return text;
}

$('input[rel="generatePass"]').each(function(){
  $(this).val(randString($(this)));
});

$(".btngenerate").click(function(){
  var field = $(this).closest('div').find('input[rel="generatePass"]');
  field.val(randString(field));
});

$('input[rel="generatePass"]').on("click", function () {
   $(this).select();
});

</script>

Cara Membuat Generator Password dengan jQuery

Pada form generate di atas bisa di lihat ada beberapa jenis dan kombinasi generate password yang bisa di gunakan. Jika telah diketikan semua kode HTML dan kode jQuery di atas, simpan file nya kemudian silahkan buka pada browser dan bisa di coba untuk men-generate password.

Bagaiamana, menarik bukan ? dengan begitu kita bisa membuat password yang sangat kuat karena sulit untuk dibaca apalagi di tebak orang lain. Baiklah, cukup sekian tutorial Cara Membuat Generator Password dengan jQuery, semoga bermanfaat dan selamat mencoba :) 

jQuery, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More