Modul 8: Sorting Angka [2]

Roihan Fajareno Februari 16, 2024

Tujuan Program

Tujuan Program

Program ini bertujuan untuk mengurutkan deret angka yang dimasukkan oleh pengguna baik secara menaik (ascending) maupun menurun (descending). Pengguna dapat memasukkan angka-angka yang ingin diurutkan melalui form input yang disediakan. Setelah itu, pengguna dapat memilih apakah ingin mengurutkan angka secara menaik atau menurun dengan memilih opsi input radio yang tersedia. Setelah tombol "Sort" ditekan, program akan mengurutkan angka sesuai pilihan pengguna dan menampilkan hasilnya dalam sebuah tabel.

Tampilan awal program

Sort "Ascending"

Sort "Descending"


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 2</title>
        <style>
            table tr th, table tr td {
                border: 1px solid;
                text-align: center;
                padding: 6px;
            }
        </style>
    </head>
    <body>
        <h1>Sorting Angka</h1>
        <form>
            <label>Angka</label>
            <input type="text" id="angkaInput" placeholder="Example: 1, 2, 3, 4, 5"> <br>
            <label>Sort</label>
            <input type="radio" name="radio" id="ascending" checked> <label>Ascending</label>
            <input type="radio" name="radio" id="descending"> <label>Descending</label>
            <br>
            <button onclick="sort()">Sort</button>
        </form>
        
        <hr>
        <table>
            <tr>
                <th>Angka</th>
            </tr>
            <tbody id="sortTable">
                <!-- Isi Table -->
            </tbody>
        </table>
    
        <script src="script.js"></script>
    </body>
    </html>

  script.js 
    let ascending = document.getElementById("ascending");
    let descending = document.getElementById("descending");
    let sortTable = document.getElementById("sortTable");

    function stringToArray(inputString) {
        let array = inputString.split(',');
        let resultArray = [];
        for (let i = 0; i < array.length; i++) {
            let trimmedValue = array[i].trim();
            let parsedValue = parseFloat(trimmedValue);
            if (!isNaN(parsedValue)) {
                resultArray.push(parsedValue);
            }
        }
        return resultArray;
    }

    function sort() {
        event.preventDefault();

        sortTable.innerHTML = "";

        let angka = document.getElementById("angkaInput").value;
        let arrayAngka = stringToArray(angka);
        
        if (ascending.checked) {
            arrayAngka.sort((a, b) => a - b);
        }
        if (descending.checked) {
            arrayAngka.sort((a, b) => b - a);
        }
        
        for (let i = 0; i < arrayAngka.length; i++) {
            let tr = document.createElement("tr");
            let td = document.createElement("td");
            td.textContent = arrayAngka[i];
            tr.appendChild(td);
            sortTable.appendChild(tr);
        }
    }

Pembahasan

1. Buat Struktur HTML

Buat struktur HTML seperti pada source code. Bagian HTML pada kode tersebut berfungsi sebagai antarmuka pengguna yang menyediakan formulir input dan tabel untuk menampilkan hasil pengurutan angka.

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 ascending = document.getElementById("ascending");
let descending = document.getElementById("descending");
let sortTable = document.getElementById("sortTable");

2. Function stringToArray(inputString), Function ini mengonversi string input yang berisi angka-angka yang dipisahkan oleh koma menjadi array angka. Setiap angka yang valid akan dimasukkan ke dalam array dan dihasilkan sebagai output (return value). 
function stringToArray(inputString) {
    let array = inputString.split(',');
    let resultArray = [];
    for (let i = 0; i < array.length; i++) {
        let trimmedValue = array[i].trim();
        let parsedValue = parseFloat(trimmedValue);
        if (!isNaN(parsedValue)) {
            resultArray.push(parsedValue);
        }
    }
    return resultArray;
}

3. function sort(), bertanggung jawab untuk mengurutkan angka yang dimasukkan oleh pengguna, baik secara menaik atau menurun, berdasarkan pilihan yang dipilih pada formulir HTML. Pertama, function ini mencegah perilaku default formulir dengan memanggil event.preventDefault(). Kemudian, ia mengambil nilai input dari elemen HTML dan mengonversinya menjadi array angka menggunakan stringToArray(). Berdasarkan pilihan pengguna pada elemen input radio, function ini menggunakan method .sort() untuk mengurutkan array angka secara menaik (Asceding/normal sort) atau menurun (Descendig/reverse sort). Setelah itu, hasil pengurutan ditampilkan dalam tabel HTML. 
function sort() {
    event.preventDefault();

    sortTable.innerHTML = "";

    let angka = document.getElementById("angkaInput").value;
    let arrayAngka = stringToArray(angka);
    
    if (ascending.checked) {
        arrayAngka.sort((a, b) => a - b);
    }
    if (descending.checked) {
        arrayAngka.sort((a, b) => b - a);
    }
    
    for (let i = 0; i < arrayAngka.length; i++) {
        let tr = document.createElement("tr");
        let td = document.createElement("td");
        td.textContent = arrayAngka[i];
        tr.appendChild(td);
        sortTable.appendChild(tr);
    }
}

End

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

Diposting oleh Roihan Fajareno

Posting Komentar

0 Komentar