Apakah kata sandimu saat ini sudah cukup sulit ditebak? Jika belum, sebaiknya segera diubah ya, minimal kata sandimu itu terdiri dari kombinasi angka, huruf, dan beberapa karakter supaya tidak mudah dijebol oleh hacker. Namun, kadangkala kita malas untuk membuat kata sandi secara otomatis. Nah, pada blog kali ini, kita akan membahas bagaimana cara membuatnya dengan menggunakan JavaScript. Bagi kamu yang belum mengenal JavaScript, silakan kenali melalui artikel Apa itu JavaScript? terlebih dahulu, ya.

Spesifikasi Proyek

Untuk memudahkan visualisasi, pada tutorial ini kita akan membuatnya dalam aplikasi website sehingga dapat diakses melalui browser. Untuk sketsanya, kira-kira akan seperti ini. 

Nah, dari sisi penggunaan aplikasinya bisa diuraikan sebagai berikut.

1. Pengguna melihat seekbar. Seekbar tersebut bisa digulir untuk mendapatkan panjang password yang sesuai dengan kemauan pengguna.
2. Kemudian, pengguna melihat beberapa opsi multi yang berkaitan dengan huruf sebagai penyusun password. Di sini terdapat huruf A sampai Z, a sampai z, dan angka 0 sampai 9. Opsi tersebut harus dipilih salah satu. Jika tidak dipilih, aplikasi tidak akan menghasilkan password.
3. Lalu, pengguna akan melakukan klik terhadap tombol ‘Generate’.
4. Aplikasi memproses password secara random sesuai dengan inputan.
5. Aplikasi menampilkan password yang telah dibuat.

Itu adalah rincian singkat dari penggunaan aplikasinya.

Eitss! Karena dirasa akan terlalu panjang ketika kita membahas dari membuat kode untuk Visualnya (HTML), di sini kita hanya berfokus ke pembuatan script intinya menggunakan bantuan JavaScript. Jadi, di tutorial ini kita akan menggunakan proyek starter. Berikut adalah gambaran prototype yang sudah dikembangkan

Persiapan

Sebelum lanjut, pastikan untuk menggunakan teks editor kesukaanmu. Salah satu contohnya adalah Visual Studio Code. Editor ini direkomendasikan karena memiliki fitur-fitur yang mendukung bagi programmer untuk mengembangkan program. 

Selain itu, kamu juga bisa menggunakan layanan editor yang tersedia secara online. Misalnya, CodeSandbox atau Replit.

Kemudian, siapkan direktori proyek kamu pada device yang digunakan. Lalu, copy dan paste kode HTML berikut pada file index.html.

Setelah selesai dibuat, kamu bisa saja langsung membuka file tersebut menggunakan Chrome sehingga hasil yang diharapkan adalah seperti berikut.

Akhirnya, persiapan dari sisi file HTML yang diperlukan sudah selesai. Coba jalankan skenario dari Spesifikasi Proyek tadi untuk membuat password baru. Pasti aplikasinya masih belum berjalan karena kita belum melengkapi bagian yang penting, yakni logika dari aplikasinya. Logika merupakan aspek penting yang menentukan jalannya aplikasi.

Okay! Sambil berjalan, kita akan melengkapi bagian yang hilang itu dengan membuat kode JavaScript.

Buka IDEmu, mari ngoding bersamaku ~

Ngoding – Memuat JavaScript

Jangan lupa untuk buka editor, ya! Pada tutorial ini, kita akan menggunakan Visual Studio Code.

Buatlah sebuah file dengan nama script.js pada direktori (folder) yang sama dengan index.html seperti di bawah ini.

Mengapa harus pada direktori (folder) yang sama?

Karena kita akan menjalankan kode JavaScript pada browser, file tersebut perlu dimuat pada index.html. Nah, agar browser bisa memuatnya dengan baik, akan lebih mudah ketika kita taruh pada folder yang sama. Dengan demikian, kita tidak perlu menuliskan alamat dari file tersebut secara lengkap karena dapat menimbulkan potensi masalah nantinya. 🙂

Setelah membuat file tersebut, isikan kode berikut pada script.js untuk memastikan bahwa kode berhasil dimuat!

Oh iya, jangan lupa untuk melakukan import terhadap file javascript pada index.html seperti ini.

Pastikan letaknya berada pada bagian bawah sebelum penutup tag </body>

Nah, sekarang mari kita periksa pada browser. Ingat kembali cara yang sudah ada di artikel Apa itu JavaScript? Jika kamu lupa, berikut caranya. 

1. Buka file dengan double click.
2. Buka Dev Tools dengan klik kanan, pilih “Inspect” -> Console

Lalu, akan muncul tampilan berikut:

Yey! Akhirnya teks “berhasil dimuat!” muncul! Pada tahap ini, JavaScript telah termuat dengan sempurna oleh browser.

Jika masih menemukan kendala, yakni belum muncul, maka silakan ulangi kembali cara yang telah dijelaskan sebelumnya, ya.

Ngoding JavaScript – Fitur Kunci

Sampailah kita pada inti dari membuat aplikasi ini, yakni membuat fitur generate password. Sebelum lanjut ke inti pembahasan, pastikan untuk menghapus kode console.log ini, ya.

Membuat fungsi generate password

Mari kita ingat-ingat kembali fitur generate password yang dijelaskan di dalam spesifikasi sebelumnya. Di sana terdapat 

1. seekbar yang digunakan untuk menentukan panjang password,
2. opsi di mana pengguna bisa menggunakan huruf kapital dari A – Z,
3. opsi di mana pengguna bisa menggunakan huruf kecil dari a – z, dan
4. opsi di mana pengguna bisa menggunakan nomor 0 sampai 9.

Nah, dari hal tersebut, bisa kita kumpulkan beberapa variabel yang digunakan untuk menentukan hasil dari generate password seperti berikut. 

1. Panjang password -> passwordLength
2. Bisa/tidak menggunakan huruf kapital dari A – Z -> useCapitalAToZ
3. Bisa/tidak menggunakan huruf kecil dari a – z -> useLowerAToZ
4. Bisa/tidak menggunakan nomor 0 sampai 9 -> useNumeric

Variabel tersebut akan digunakan sebagai parameter dari fungsi generatePassword() yang akan kita buat. Mari kita buat fungsinya dengan mengetikkan kode berikut pada script.js.

Fungsi tersebut masih baru berwujud kerangka sehingga tidak akan menimbulkan efek atau dampak apa pun. Namun, kita perlu menyiapkan skema bagaimana fungsi tersebut melakukan aksinya. 

Untuk menyiapkan skemanya, kita perlu mengingat kembali pada spesifikasi awal dari proyek. Password akan di-generate berdasarkan nilai acak dari beberapa susunan angka dan nomor. Nilai acak tersebut akan di-generate sampai sesuai dengan panjang password yang sudah diketahui.

Sebelum mencapai hal tersebut, mari kita rancang kasus negatif terlebih dahulu.

1. Ketika panjang password yang diinputkan < 3, ia akan mengembalikan nilai (invalid)
2. Ketika pengguna tidak mencentang ketiga hal berikut, aplikasi akan langsung mengembalikan nilai (invalid). 
   1. Opsi untuk pengguna bisa menggunakan huruf kapital dari A – Z.
   2. Opsi untuk pengguna bisa menggunakan huruf kecil dari a – z.
   3. Opsi untuk pengguna bisa menggunakan nomor 0 sampai 9.

Kemudian, dari beberapa kasus negatif tersebut kita aplikasikan pada kode di script.js. Silakan tulis kode yang dihighlight berikut.

Dengan pola perancangan seperti ini, kode akan lebih aman karena beberapa kasus negatif sudah kita minimalisasi sedari awal.

Akhirnya, kasus negatif bisa diminimalisasi. Selanjutnya, pada kasus positif, kita akan memproses untuk melakukan generate password dari nilai acak yang digabung.

Dimulai dari proses melakukan generate terhadap nilai acak. Untuk melakukan hal ini, kita dapat menggunakan fungsi Math.random() yang disediakan oleh JavaScript Engine. Namun, fungsi ini menghasilkan nilai desimal yang susah diolah karena kita menggunakan bilangan bulat. Nilai desimal yang dihasilkan adalah berkisar antara 0.00 – 1.00

Untuk menghasilkan bilangan bulat, diperlukan Math.floor(). Fungsi ini akan mengkonversi nilai yang ada di sebelah kiri koma saja yang menjadi bilangan bulat utuh. Misalnya seperti berikut. 

Apabila kode diatas dijalankan, akan mengembalikan hasil 1.

Perlu disadari juga, kita tidak bisa langsung mengaplikasikan floor() terhadap random(). Ini akan menyebabkan nilai hasilnya akan selalu 0. Maka dari itu, sebelum mengaplikasikan floor(), perlu dikalikan terlebih dahulu dengan bilangan bulat. Misalnya seperti ini.

Ketika dijalankan, fungsi tersebut akan menghasilkan nilai 0 sampai dengan 9. Dengan demikian, dapat disimpulkan bahwa nilai 10 pada penerapan fungsi di atas digunakan untuk menciptakan angka random antara 0 – 9. Apabila kita ingin menghasilkan nilai antara 0 sampai dengan 5, kita bisa mengganti nilai 10 tersebut dengan 6. 

Maka dari itu, kita bisa menciptakan fungsi khusus yang digunakan untuk generate sebuah nilai secara acak. Kembali lagi ke file script.js, silakan tulis kode berikut setelah fungsi generatePassword().

Fungsi tersebut cukup penting mengingat kita nantinya akan sering menggunakannya. Sampai saat ini, kita sudah bisa membuat nilai acak! Yeyyy!

Nah, saatnya kembali lagi ke fungsi utama, yakni generatePassword(). Mari kita implementasikan kasus positif pada fungsi tersebut, dimulai dari kita menciptakan skenario berikut. Skenario ini terinspirasi dari spesifikasi yang telah dituliskan sebelumnya.

1. Buat variabel dengan tipe string bernama ‘result’
2. Acak nomor sampai dengan nomor tiga (0-2).
3. Apabila terpilih nomor 0 dan useCapitalAToZ bernilai true,
   1. acak nomor sampai dengan nomor 26 (0 – 25),
   2. hasil acak nomor tersebut ditambah dengan 65 (karakter ASCII dari A),
   3. kemudian, hasil penjumlahan tersebut dikonversikan ke karakter, dan
   4. karakter yang sudah jadi akan di tambahkan ke result.
4. Apabila terpilih nomor 1 dan useLowerAToZ bernilai true,
   1. Acak nomor sampai dengan nomor 26 (0 – 25),
   2. Hasil acak nomor tersebut ditambah dengan 97 (karakter ASCII dari a),
   3. Kemudian, hasil penjumlahan tersebut dikonversikan ke karakter, dan
   4. Karakter yang sudah jadi akan ditambahkan ke result.
5. Apabila terpilih nomor 2 dan useNumeric bernilai true,
   1. Acak nomor sampai dengan nomor 10 (0 – 9),
   2. Hasil acak nomor tersebut ditambah dengan 48 (karakter ASCII dari ’0’),
   3. Kemudian, hasil penjumlahan tersebut dikonversikan ke karakter, dan
   4. Karakter yang sudah jadi akan ditambahkan ke result.
6. Kembalikan hasil dari result.

Mari kita tulis skenario tersebut pada kode script.js. Silakan tulis kode berikut, ya.

Mari kita coba pada Developer Tools Console! Asumsikan pengguna ingin generate password dengan panjang 12 yang semua opsi karakternya tercentang (true). Kamu bisa taruh kode berikut pada baris terakhir dari script.js: 

Lihatlah Developer Console dan amati yang terjadi. Password hanya di-generate satu huruf, padahal yang semestinya adalah 12 huruf.

Ada apakah gerangan? Ini terjadi karena kita belum menggunakan perulangan terhadap skenario dari nomor 2 sampai 5. Seperti yang kita tahu, flow dari program itu berjalan dari atas ke bawah, terus seperti itu kecuali ketika ada suatu perulangan. Perulangan ini bermanfaat apabila kita ingin mengulang beberapa skenario sampai sebuah kondisi bernilai false. 

Mengaplikasikan Perulangan pada fungsi generate password

Dalam kasus ini, kita akan mengulang skenario pengacakan huruf maupun angka tersebut sampai sejumlah dengan panjang password yang telah didefinisikan, yakni berjumlah 12. Setiap kali skenario tersebut diulang, kita akan terus menambahkan hasil pengacakan ke dalam variabel result.

Mari kita aplikasikan hal tersebut pada fungsi generatePassword() di script.js. Tuliskan kode yang dihighlight berikut ini, ya! Pastikan urutannya sesuai.

Kemudian jalankan dan lihat lagi pada Developer Console. Lihatlah apa yang terjadi! Panjang password sudah sesuai dengan ekspektasi kita!

Namun, skema ini masih memiliki masalah ketika pengguna hanya memilih satu atau dua saja dari opsi acak huruf dan angka. Di mana panjang password yang dihasilkan masih kurang dengan nilai yang diinputkan pengguna. 

Contohnya, ketika ada pengguna yang hanya ingin melakukan generate nilai acak terhadap huruf kapital A – Z seperti ini.

Berikut adalah hasilnya.

Setelah ditelusuri, ini terjadi karena ketidakpastian eksekusi terhadap metode yang digunakan untuk menghasilkan nilai acak. Misalnya seperti ini. 

• Acak method, kemudian hasil acaknya adalah 0
• Ketika method = 0, maka seharusnya kita mengacak nilai A – Z. Namun, karena useCapitalAToZ bernilai false, ini tidak dieksekusi dan berpotensi untuk lanjut ke loop berikutnya.
• …beberapa case lain…
• Ulangi lagi dari pengacakan method sampai perulangannya berjumlah nilai dari panjang password.

Di sini, kita bisa melihat bahwa value dari method belum bisa kita pastikan untuk menghindari logika tersebut. Sementara perulangan terus berjalan sehingga ada beberapa karakter yang tidak di-generate dan menyebabkan hasilnya menjadi kurang dari panjang password yang telah ditentukan.

Maka dari itu, diperlukan flashback terhadap nilai counter (pada perulangan) sebelumnya agar perulangan tetap berada di posisi itu saja dan menunggu hingga metodenya benar-benar dijalankan.

Mari kita aplikasikan pada kode pada fungsi generatePassword() seperti ini, lihat pada kode yang telah dihighlight, ya. 

Jalankan lagi dan lihat hasilnya pada Developer Console. Voilla! Akhirnya berhasil!

Setelah berhasil, kamu bisa menghapus log debugging yang dipasang berikut ini, ya.

Ngoding JavaScript – Kaitkan dengan HTML

Fungsi yang esensial akhirnya sudah selesai, tetapi masih ada satu bagian lagi yang belum kita kerjakan, yakni mengaitkan fungsi tersebut dengan visual yang telah dibuat di HTML.

Sesuai dengan spesifikasi yang dijelaskan di awal, pada aplikasi ini terdapat 4 inputan, tombol untuk memproses, dan juga satu teks output.

Di kode HTML, visualisasi inputan, tombol, teks dan sebagainya itu disebut sebagai sebuah Element. Setiap element tersebut unik dan bertanggung jawab untuk menampilkan sebuah visualisasi pada halaman web. Setiap element tertentu bisa saja mengambil sebuah masukan dari pengguna, menampilkan teks, dan sebagainya.

Nah, pada kasus sekarang, kita ingin mendapatkan masukan dari element tersebut dan juga menampilkan hasil dari generate password pada element HTML. Untuk dapat melakukan hal tersebut, kita perlu mengakses dan juga memanipulasi aksi yang ada pada element-nya. Setiap element ada identifier khusus yang dapat kita gunakan untuk mengakses objek dari element tersebut.

Untuk mengambil objek dari sebuah elemen HTML yang sudah ditampilkan dengan menggunakan identifier, kita bisa menggunakan kode berikut.

Okay, jika kita menelisik pada kode HTML yang telah dibuat, kita dapat mencatat beberapa identifier berikut.

1. Inputan Panjang Password -> password_length
2. Checkbox A-Z -> capital_az_char
3. Checkbox a-z -> small_az_char
4. Checkbox 0-9 -> numeric
5. Tombol Generate -> generate_password
6. Menampilkan output text -> result_password

ID dari setiap element yang digunakan sudah dikumpulkan. Mari kita susun skenarionya, kira – kira bisa kita susun sebagai berikut :

• Ambil Objek dari tombol Generate dengan menggunakan ID
• Pasang listener pada objek tombol tersebut, apabila diklik, maka akan : 
  • Ambil value dari element panjang password
  • Ambil value dari checkbox A-Z
  • Ambil value dari checkbox a-z
  • Ambil value dari checkbox 0-9
  • Panggil fungsi generatePassword() lalu simpan hasilnya
  • Tampilkan hasil (password) pada output text yang disediakan.

Setelah skenario sudah disusun, mari kita aplikasikan dalam bentuk kode! Silakan ketikkan kode berikut pada script.js. Letakkan pada baris terakhir, ya.

Mari kita coba periksa dengan melakukan generate password dengan menggunakan visual dari aplikasi. Voilaa! Akhirnya aplikasi generate password sudah berhasil dengan baik.

Akhirnya, Password Generator sederhana yang kita buat dengan pendekatan sebuah halaman web sudah berhasil dan bisa dijalankan dengan baik. Apabila ingin melihat secara langsung kodenya, kamu bisa melihatnya pada embedded preview berikut.

Atau, kamu juga bisa melihat source code lengkapnya pada link Github berikut ini.

Jika penasaran dengan beberapa kode yang dibuat, kami menyarankanmu untuk melihat kelas dari Dicoding seperti Belajar Dasar Pemrograman Web dan Belajar Dasar Pemrograman JavaScript. Kelas tersebut membahas tuntas mengenai pemrograman Web dan JavaScript yang ada sangkut-pautnya dengan artikel ini.

Akhir kata, Good Luck dan selamat mencoba, ya!