Tutorial Pemrograman

Cara Membuat Password Strength Indicator dengan JQuery

Untuk mencegah pencurian data, peran password strength indicator sangatlah penting. Password strength akan mengukur seberapa kuat password yang kamu inputkan. Untuk bisa menampilkan password strength di website dengan JavaScript.

Mungkin masih ada yang bertanya-tanya, apa sih perbedaan antara JQuery dan JavaScript? JQuery hanyalah library atau perpustakaan yang menyimpan kode JavaScript agar terlihat lebih ringkas dan rapi.

Lalu, bagaimana caranya membuat password strength indicator dengan JQuery? Yuk langsung saja buka komputer kamu dan ikuti beberapa langkah mudah di bawah ini.

1. Download file plugin. Letakkan folder yang berisi file plugin di folder yang sama dengan index.html.

2. Buka XAMPP Control Panel, serta aktifkan Apache.

3. Buka program teks editor yang ter-install di komputer kamu, disini saya menggunakan teks editor Notepad++. Ketikkan kode HTML5 berikut ini.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Membuat Password Strength Indicator dengan JQuery</title>
    <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <style>
    form { background-color:#F5F7FA; font-family:'Roboto'; padding:20px; margin:150px auto; max-width:480px;}
    </style>
</head>

<body>
<div id="jquery-script-menu" style= "background-color: #b22222 !important;">
  <h1 style="text-align:center !important; color:antiquewhite !important;"> Password Strength Indicator</h1>
    
    </div>
<div class="container">

        <form>

          <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
          </div>
         
          <button type="submit" class="btn btn-danger">Submit</button>
        </form>
        </div>
        <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
        <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script src="dist/jquery.passwordstrength.js"></script>
</body>
</html>

Simpan kode HTML5 di atas di folder xampplite → htdocs → buat folder baru dengan nama PasswordIndicator → simpan kode di atas dengan nama index.html. Karena kode CSS hanya sedikit, maka kode CSS akan langsung ditambahkan di file index.html.

4. Untuk melihat hasil script code di atas, kamu bisa buka browser kamu ketiklah http://localhost/PasswordIndicator.

5. Untuk membuat indicator di password, buka kembali lembar baru di teks editor dan ketikkan kode JavaScript berikut ini.

(function ($) {
    $.fn.passwordStrength = function (options) {

        var defaults = $.extend({
            minimumChars: 8
        }, options);

        var parentContainer = this.parent();
        var progressHtml = "<div class='progress'><div id='password-progress' class='progress-bar' role='progressbar' aria-valuenow='1' aria-valuemin='0' aria-valuemax='100' style='width:1%;'></div></div><div id='password-score' class='password-score'></div><div id='password-recommendation' class='password-recommendation'></div><input type='hidden' id='password-strength-score' value='0'>";
        $(progressHtml).insertAfter('input[type=password]:last');
        $('#password-score').text(defaults.defaultMessage);
        $('.progress').hide();
        $('#password-score').hide();

        $(this).keyup(function (event) {
            $('.progress').show();
            $('#password-score').show();

            var element = $(event.target);
            var password = element.val();

            if (password.length == 0) {
                $('#password-score').html('');
                $('#password-recommendation').html('');

                $('.progress').hide();
                $('#password-score').hide();
                $('#password-strength-score').val(0);
            }
            else {
                var score = calculatePasswordScore(password, defaults);
                $('#password-strength-score').val(score);
                $('.progress-bar').css('width', score + '%').attr('aria-valuenow', score);

                $('#password-recommendation').css('margin-top', '10px');

                if (score < 50) {
                    $('#password-score').html('Weak password <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>');
                    $('#password-recommendation').html('<ul><li>Gunakan setidaknya 8 karakter </li> <li> Gunakan karakter huruf besar dan kecil </li> <li> Gunakan 1 atau lebih angka </li> <li> Secara opsional gunakan karakter khusus</li></ul>');
                    $('#password-progress').removeClass();
                    $('#password-progress').addClass('progress-bar progress-bar-danger');
                }
                else if (score <= 60) {
                    $('#password-score').html('Normal password <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>');
                    $('#password-recommendation').html('<div id="password-recommendation-heading">Untuk kata sandi yang lebih kuat: </div> <ul> <li> Gunakan karakter huruf besar dan kecil </li> <li> Gunakan 1 atau lebih angka </li> <li> Gunakan karakter khusus untuk kata sandi yang lebih kuat</li></ul>');
                    $('#password-recommendation-heading').css('text-align', 'center');
                    $('#password-progress').removeClass();
                    $('#password-progress').addClass('progress-bar progress-bar-warning');
                }
                else if (score <= 80) {

                    $('#password-score').html('Strong password <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>');
                    $('#password-recommendation').html('<div id="password-recommendation-heading">Untuk kata sandi yang lebih kuat: </div> <ul> <li> Tingkatkan panjang kata sandi Anda menjadi 15-30 karakter </li> <li> Gunakan 2 atau lebih angka </li> <li> Gunakan 2 atau lebih karakter spesial</li></ul>');
                    $('#password-recommendation-heading').css('text-align', 'center');
                    $('#password-progress').removeClass();
                    $('#password-progress').addClass('progress-bar progress-bar-info');
                }
                else {
                    $('#password-score').html('Very strong password <span class="glyphicon glyphicon-ok" aria-hidden="true"></span>');
                    $('#password-recommendation').html('');
                    $('#password-progress').removeClass();
                    $('#password-progress').addClass('progress-bar progress-bar-success');
                }
            }
            
        });
    };

    function calculatePasswordScore(password, options) {

        var score = 0;
        var hasNumericChars = false;
        var hasSpecialChars = false;
        var hasMixedCase = false;

        if (password.length < 1)
            return score;

        if (password.length < options.minimumChars)
            return score;

        //match numbers
        if (/d+/.test(password)) {
            hasNumericChars = true;
            score += 20;

            var count = (password.match(/d+?/g)).length;
            if (count > 1) {
                //apply extra score if more than 1 numeric character
                score += 10;
            }
        }

        //match special characters including spaces
        if (/[W]+/.test(password)) {
            hasSpecialChars = true;
            score += 20;

            var count = (password.match(/[W]+?/g)).length;
            if (count > 1) {
                //apply extra score if more than 1 special character
                score += 10;
            }
        }

        //mixed case
        if ((/[a-z]/.test(password)) && (/[A-Z]/.test(password))) {
            hasMixedCase = true;
            score += 20;
        }

        if (password.length >= options.minimumChars && password.length < 12) {
            score += 10;
        } else if (!hasMixedCase && password.length >= 12) {
            score += 10;
        }

        if ((password.length >= 12 && password.length <= 15) && (hasMixedCase && (hasSpecialChars || hasNumericChars))) {
            score += 20;
        }
        else if (password.length >= 12 && password.length <= 15) {
            score += 10;
        }

        if ((password.length > 15 && password.length <= 20) && (hasMixedCase && (hasSpecialChars || hasNumericChars))) {
            score += 30;
        }
        else if (password.length > 15 && password.length <= 20) {
            score += 10;
        }
            
        if ((password.length > 20) && (hasMixedCase && (hasSpecialChars || hasNumericChars))) {
            score += 40;
        }
        else if (password.length > 20) {
            score += 20;
        }

        if (score > 100)
            score = 100;

        return score;
    }
}(jQuery));

Simpan kode JavaScript di atas di folder xampplite → htdocs → pilih folder PasswordIndicator → pilih folder dist → simpan kode di atas dengan nama passwordstrength.js.

6. Reload alamat website: http://localhost/ PasswordIndicator. Meski password strength indicator sudah ada dalam system, namun belum bisa berfungsi.

7. Agar password strength indicator bisa berfungsi, buka kembali file index.html dan ketikkan kode JavaScript berikut diantara kode <body> … </body>.

<script>
        $('#exampleInputPassword1').passwordStrength();
        </script>

Jangan lupa untuk Ctrl+S.

8. Reload alamat url : http://localhost/PasswordIndicator. Berikut tampilan ketika password yang dimasukkan lemah (weak).

Berikut tampilan ketika password yang dimasukkan normal.

Berikut tampilan ketika password yang dimasukkan kuat (strong).

Berikut tampilan ketika password yang dimasukkan sangat kuat (very strong).

9. Selesai, menarik sekali bukan?.

Catatan:

  1. Htdocs adalah salah satu folder bawaan dari XAMPP, yang tugasnya khusus untuk menyimpan berkas-berkas yang akan dijalankan, seperti berkas PHP, HTML, CSS, dan JavaScript.
  2. Kemudian, mungkin ada yang menanyakan maksud dari http://localhost/ PasswordIndicator. Localhost merupakan server lokal pada computer. Localhost dapat diaktifkan ketika kamu meng-klik start Apache di XAMPP Control Panel. PasswordIndicator menunjuk pada folder  PasswordIndicator saya di xampplite → htdocs. Serta, index.html dan style.css adalah nama file yang tersimpan script code di atas.

Demikian penjelasan dari tutorial ‘Cara Membuat Password Strength Indicator dengan JQuery’. Selamat mencoba.

Tutorial Lainnya dari Penulis:









Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Ikuti Kami di Sosmed!

        

Berlangganan Tutorial Gratis Melalui Email!

Copyright © 2020 Inwepo - All Rights Reserved.

To Top