Home / Tutorial Pemrograman / Cara Membuat Website Name Generator

Cara Membuat Website Name Generator

Tutorial By Akhmad R P

Last updated on Maret 2nd, 2021

Name Generator merupakan salah satu untuk manipulasi berbagai kumpulan data dengan cara memilihnya secara acak hingga menghasilkan nama yang sesuai dengan nilai acak-nya. Banyaknya kemungkinan yang di dapatkan melalui Name Generator dapat dimanfaatkan sebagai media penelitian maupun pengembangan web.

Penggunaan Name Generator juga dapat di asosiasikan dengan pengecekan atau simulasi ketika pengguna website menggunakan berbagai layanan berdasarkan jumlah karakter nama yang di gunakan. Tentunya, keberadaan Name Generator sangat membantu para pengembang web baik secara statis (menggunakan HTML – CSS – Javascript) maupun dinamis (menggunakan Framework).

Sebelumnya, persiapkan text editor (seperti Notepad, Sublime Text, dan sebagainya) sebagai media pengetikan kode kita. Untuk pengetesan website, kita hanya akan menggunakan browser (Firefox, Google Chrome, dan sebagainya) serta tidak memerlukan aplikasi local hosting seperti XAMPP dan sebagainya.

Langkah:

Buatlah sebuah file HTML bernama index.html melalui text editor kamu. Isi dari index ialah sebagai berikut:

<html>
<head>
  <title>NAMA TITLE WEBSITE ANDA</title>
</head>
<body>
</body>
</html>

Lalu, pada bagian <body>, masukkan kode berikut:

<button onclick="generateName()">Click Me</button>
<h1>Nama Anda :</h1>
<h2 id="result"></h2>
<script></script>

Nantinya, bagian pada <body> akan menjadi seperti berikut:

<body>
  <button onclick="generateName()">Click Me</button>
  <h1>Nama Anda :</h1>
  <h2 id="result"></h2>
  <script></script>
</body>

Lalu, pada bagian <script>, masukkan kode berikut:

//Awalan Huruf Menjadi Kapital
function capitalize(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
}
    
//Munculkan Angka Acak Untuk Menunjuk Posisi Nama
function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
}
    
//Munculkan Teks Hasil Pengacakan Nama
function generateName(){
    
//Nama Depan
var name1 = ["andi","budi","chika","deni","erick","fini","galih","hilmi","inwepo"];
    
//Nama Belakang
var name2 = ["juliet","kencana","lintang","mahardika","nesta","opewni","perdana","queen","rindang"];
    
//Jadikan Satu Berdasarkan Hasil Acak
var allName = capitalize(name1[getRandomInt(0, name1.length)]) + ' ' + capitalize(name2[getRandomInt(0, name2.length)]);
    
//Munculkan Nama Kedalam HTML
document.getElementById('result').innerHTML = allName;
}

Pada kode di atas, kita membuat susunan fungsi yang memiliki kinerja sebagai berikut:

Fungsi capitalize digunakan sebagai indikator bahwa setiap kalimat yang akan di proses, awalan hurufnya harus dijadikan kapital (contoh : inwepo akan berubah menjadi Inwepo setelah masuk fungsi ini).
Fungsi getRandomInt digunakan untuk mendapatkan nilai acak. Nilai dihasilkan melalui ketentuan bahwa terdapat nilai terendah (min) dan nilai tertinggi (max; di dapat dari jumlah konten yang terdapat pada variabel name1 / name2), lalu disesuaikan dengan aritmatika-nya.
Fungsi generateName digunakan untuk memunculkan nama hasil dari nilai acak yang telah dilakukan. fungsi ini juga digunakan sebagai penampung nama yang di simpan pada dua variabel, yaitu name1 dan name2. Hasil dari fungsi generateName merupakan gabungan dari dua nama (name1 & name2; depan & belakang) yang di pilih sesuai dengan nilai acak yang didapatkan.

Nantinya, bagian pada <script> akan menjadi seperti berikut:

<script>
    //Awalan Huruf Menjadi Kapital
    function capitalize(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
    }
    
    //Munculkan Angka Acak Untuk Menunjuk Posisi Nama
    function getRandomInt(min, max) {
  	return Math.floor(Math.random() * (max - min)) + min;
    }
    
    //Munculkan Teks Hasil Pengacakan Nama
    function generateName(){
    
    //Nama Depan
    var name1 = ["andi","budi","chika","deni","erick","fini","galih","hilmi","inwepo"];
    
    //Nama Belakang
    var name2 = ["juliet","kencana","lintang","mahardika","nesta","opewni","perdana","queen","rindang"];
    
    //Jadikan Satu Berdasarkan Hasil Acak
    var allName = capitalize(name1[getRandomInt(0, name1.length)]) + ' ' + capitalize(name2[getRandomInt(0, name2.length)]);
    
    //Munculkan Nama Kedalam HTML
    document.getElementById('result').innerHTML = allName;
    }
<script>

Jika sudah, maka langkah selanjutnya ialah menyimpan (/ save) file HTML yang telah kita buat.

Jalankan file tersebut dengan cara memindahkannya menuju browser (/ klik file-nya jika secara otomatis terkait dengan aplikasi browser). Lalu, klik tombol Click Me yang sebelumnya telah kita sediakan dalam HTML kita. Jika berhasil, maka nantinya akan muncul sebuah teks yang berisikan hasil dari nama acak yang telah kita buat sebelumnya.