Modul 8: Prime Number Generator [1]

Roihan Fajareno Februari 16, 2024

Tujuan Program

Tujuan Program

Program ini bertujuan untuk menghasilkan dan menampilkan bilangan prima dalam suatu rentang tertentu (min dan max) yang ditentukan oleh pengguna. Pengguna diminta untuk memasukkan dua angka sebagai batas atas dan batas bawah, kemudian setelah mengklik tombol "Generate," program akan menghitung dan menampilkan semua bilangan prima yang ada di antara dua batas tersebut dalam bentuk tabel HTML.

Tampilan Awal Program

Setelah klik button "Generate"


Source Code

Source code program ini bisa dilihat di Repository berikut: Source Code Mini Project
Github Repository: Main Repository

Kalian bisa mencoba program ini secara online dengan mengakses link berikut: Github Pages

  index.html 
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Mini Project 1</title>
        <style>
            table tr th, table tr td {
                border: 1px solid;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <h1>Prime Number Generator</h1>
        <form>
            <label>Angka Pertama</label>
            <input type="number" id="minNumber"> <br>
            <label>Angka Terakhir</label>
            <input type="number" id="maxNumber"> <br>
            <button onclick="generatePrimeTable()">Generate</button>
        </form>
        <hr>
    
        <table id="primeTable">
            <!-- Isi Table -->
        </table>
    
        <script src="script.js"></script>
    </body>
    </html>

  script.js 
    let primeTable = document.getElementById("primeTable");

    function isPrime(number) {
        if (number <= 1) {
            return false;
        }
    
        for (let i = 2; i <= Math.sqrt(number); i++) {
            if (number % i === 0) {
                return false;
            }
        }
        
        return true;
    }
    
    
    function generatePrimeArray(min, max) {
        let primeArray = [];
        for (min; min < max + 1; min++) {
            if (isPrime(min)) {
                primeArray.push(min);
            }
        }
        return primeArray;
    }
    
    
    function generatePrimeTable() {
        event.preventDefault();
        primeTable.innerHTML = "";
        let minNumber = Number(document.getElementById("minNumber").value);
        let maxNumber = Number(document.getElementById("maxNumber").value);
        
        let headerRow = document.createElement("tr");
        let headerCell = document.createElement("th");
        headerCell.textContent = `Bilangan Prima Antara ${minNumber} dan ${maxNumber}`;
        headerRow.appendChild(headerCell);
        primeTable.appendChild(headerRow);
    
        let primeArray = generatePrimeArray(minNumber, maxNumber);
        for (let i = 0; i < primeArray.length; i++) {
            let td = document.createElement("td");
            let tr = document.createElement("tr");
            td.textContent = primeArray[i];
            tr.appendChild(td);
            primeTable.appendChild(tr);
        }
    }

Pembahasan

1. Buat Struktur HTML

Buat struktur HTML seperti pada source code. Bagian HTML dari kode tersebut berfungsi sebagai antarmuka pengguna (UI) untuk program. Form input terdiri dari dua input field yang meminta pengguna untuk memasukkan angka pertama (min) dan terakhir (max) dari rentang bilangan yang ingin dihitung. Tombol "Generate" digunakan untuk memulai proses penghitungan bilangan prima. Selain itu, ada juga sebuah tabel yang awalnya kosong dan akan digunakan untuk menampilkan hasil bilangan prima yang dihasilkan setelah pengguna mengklik tombol "Generate".

2. Tambahkan Javascript

Tambahkan tag <script> pada HTML untuk menambahkan Javascript. Bila Javascript berada di file terpisah (external), tambahkan attribute 'src'. Kode seperti pada source code script.js.

Pembahasan Javascript Source Code

1. Inisialisasi variabel, dapatkan elemen HTML berdasarkan id dan simpan dalam variabel. 
let primeTable = document.getElementById("primeTable");

2. Function isPrime(number), bertujuan untuk menentukan apakah suatu angka adalah bilangan prima atau bukan. Functiion ini bekerja dengan melakukan iterasi dari 2 hingga akar kuadrat dari angka yang diberikan dan memeriksa apakah angka tersebut dapat dibagi dengan angka lain selain 1 dan dirinya sendiri. Jika angka tersebut bisa dibagi dengan angka lain, maka angka tersebut bukan prima, dan function akan mengembalikan false. Jika bisa dibagi, maka angka tersebut prima, dan function akan mengembalikan true. 
function isPrime(number) {
    if (number <= 1) {
        return false;
    }

    for (let i = 2; i <= Math.sqrt(number); i++) {
        if (number % i === 0) {
            return false;
        }
    }
    
    return true;
}

3. Function generatePrimeArray(min, max), bertujuan untuk menghasilkan array yang berisi semua bilangan prima dalam rentang yang ditentukan oleh pengguna. Function ini menggunakan dua parameter, yaitu min dan max, yang mewakili angka pertama dan terakhir dari rentang. Function ini melakukan iterasi dari min hingga max, dan untuk setiap angka dalam rentang tersebut, memeriksa apakah angka tersebut merupakan bilangan prima menggunakan function isPrime(). Jika angka tersebut adalah bilangan prima, maka angka tersebut dimasukkan ke dalam array hasil. 
function generatePrimeArray(min, max) {
    let primeArray = [];
    for (min; min < max + 1; min++) {
        if (isPrime(min)) {
            primeArray.push(min);
        }
    }
    return primeArray;
}

4. Function generatePrimeTable(), bertujuan untuk menghasilkan tabel HTML yang menampilkan semua bilangan prima dalam rentang yang ditentukan oleh pengguna. Pertama, function ini mengambil input angka pertama dan terakhir dari elemen formulir HTML. Kemudian, function memanggil function generatePrimeArray() untuk mendapatkan array bilangan prima dalam rentang yang diberikan. Setelah itu, function membuat elemen tabel, termasuk baris header yang menyatakan rentang bilangan. Selanjutnya, function membuat sel-sel tabel (td) untuk setiap bilangan prima dalam array tersebut, dan menambahkannya ke dalam tabel. Akhirnya, tabel tersebut ditampilkan di halaman web. 
function generatePrimeTable() {
    event.preventDefault();
    primeTable.innerHTML = "";
    let minNumber = Number(document.getElementById("minNumber").value);
    let maxNumber = Number(document.getElementById("maxNumber").value);
    
    let headerRow = document.createElement("tr");
    let headerCell = document.createElement("th");
    headerCell.textContent = `Bilangan Prima Antara ${minNumber} dan ${maxNumber}`;
    headerRow.appendChild(headerCell);
    primeTable.appendChild(headerRow);

    let primeArray = generatePrimeArray(minNumber, maxNumber);
    for (let i = 0; i < primeArray.length; i++) {
        let td = document.createElement("td");
        let tr = document.createElement("tr");
        td.textContent = primeArray[i];
        tr.appendChild(td);
        primeTable.appendChild(tr);
    }
}

End

Jika sudah, kalian bisa mencoba program tersebut dengan mengakses laman ini.
Roihan Fajareno

Diposting oleh Roihan Fajareno

Posting Komentar

0 Komentar