Tutorial Pemrograman

Cara Membuat Aplikasi Random Password Generator dengan JavaScript

Ketika membuat akun secara online, kita diwajibkan untuk membuat password yang rumit. Untuk membuat password yang rumit, biasanya kita mengkombinasikan password dengan huruf besar, huruf kecil, angka, dan simbol-simbol. Sering kali untuk memikirkan password yang rumit ini cukup sulit.

Bedasarkan permasalahan di atas, kali ini kita akan mencoba membuat aplikasi random password generator (pembuat kata sandi acak). Aplikasi ini berfungsi membuat password rumit sampai 16 digit.

Lalu, bagaimana caranya membuat aplikasi random password generator dengan bahasa pemrograman CSS dan JavaScript? Yuk langsung saja buka komputer kamu, dan ikuti beberapa langkah mudah di bawah ini.

1. Buka XAMPP Control Panel, serta aktifkan Apache.

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

<html>
<head>
    <title>Random Password Generator</title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <div class="InputBox">
        <h2>Membuat Aplikasi Random Password Generator</h2>
        <input type="text" name="" placeholder="Buat Password" id="password" readonly="">
        <div id="btn" onclick="getPassword();">Generate Password</div>
    </div>
</body>
</html>

Simpan kode HTML5 di atas di folder xampplite → htdocs → buat folder baru dengan nama PasswordGenerator → simpan kode di atas dengan nama index.html.

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

4. Untuk membuat aplikasi, buka kembali lembar baru di teks editor dan ketikkan kode CSS berikut ini.

*{
    margin: 0;
    padding: 0;
    font-family: consolas;
    user-select: none;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #f8f8f8;
}
.inputBox{
    position: relative;
    width: 450px;
}
.inputBox h2{
    font-size: 28;
    color: #333;
}
.inputBox input{
    position: relative;
    width: 100%;
    height: 60px;
    border: none;
    margin: 15px 0 20px;
    background: transparent;
    outline: none;
    padding: 0 20px;
    font-size: 24px;
    letter-spacing: 4px;
    box-sizing: border-box;
    border-radius: 8px;
    color: #333;
    box-shadow: -4px -4px 10px rgba(255,255,255,1),
                inset 4px 4px 10px rgba(0,0,0,0.1);
}
.inputBox input::placeholder{
    letter-spacing: 0px;
}
.inputBox #btn{
    position: relative;
    cursor: pointer;
    color: #fff;
    background: #333;
    font-size: 24px;
    display: inline-block;
    padding: 10px 15px;
    border-radius: 8px;
}
.inputBox #btn:active{
    background: #9c27b0;
}

Simpan kode CSS di atas di folder xampplite → htdocs → pilih folder PasswordGenerator → simpan kode di atas dengan nama style.css.

5. Reload alamat website: http://localhost/ PasswordGenerator. Berikut tampilan dari aplikasi random password generator. Namun aplikasi ini belum bisa berfungsi.

6. Agar aplikasi random password generator bisa digunakan, buka kembali lembar file index.html, dan ketikkan script kode JavaScript berikut ini sebelum kode </body>.

<script type="text/javascript">
    function getPassword(){
        var chars = "0123456789abcdefghijklmnopqrstuvwyzABCDEFGHIJKLMNOPQRSTUVWXYZ!@#$%^&*()_+?><:{}[]";
        var passwordLength = 16;
        var password = "";
        
        for(var i=0; i<passwordLength; i++){
            var randomNumber = Math.floor(Math.random() * chars.length);
            password += chars.substring(randomNumber,randomNumber+1);
        }
    document.getElementById("password").value = password
    }
</script>

Jangan lupa tekan Ctrl+S.

7. Reload alamat url : http://localhost/PasswordGenerator. Klik tombol generate password untuk mendapatkan kombinasi password.

Setiap klik di tombol generate password akan mendapatkan kombinasi password yang berbeda-beda.

8. 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/ PasswordGenerator. Localhost merupakan server lokal pada computer. Localhost dapat diaktifkan ketika kamu meng-klik start Apache di XAMPP Control Panel. PasswordGenerator menunjuk pada folder  PasswordGenerator 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 Aplikasi Random Password Generator dengan JavaScript’. 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