Modul 5: Tabel Buah [5]

Roihan Fajareno Februari 12, 2024

Tujuan Program

Tujuan Program

Tujuan Program ini adalah membuat sebuah tabel untuk data berat buah yang dimana data bisa ditambahkan ke dalam tabel memalui sebuah Input HTML. Ketika berat buah lebih dari 5kg, beri warna background merah. Selain itu, tambahkan tombol untuk menghapus row/baris tabel.

Tampilan Awal Program

Tabel yang diberi data

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 5</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>Table Buah</h1>
        <form>
            <div>
                <label>Nama Buah:</label>
                <input type="text" id="namaBuah" placeholder="Masukan Nama Buah"> <br>
            </div>
            <div>
                <label>Berat:</label>
                <input type="number" id="beratBuah" min="0" placeholder="Masukan Berat Buah"> <span>kg</span>
            </div>
            <button onclick="saveFruit()">Simpan</button>
        </form>
    
        <hr>
        <table id="tableBuah">
                <tr>
                    <th>No</th>
                    <th>Nama Buah</th>
                    <th>Berat</th>
                    <th>Action</th>
                </tr>
        </table>
    
        <script src="script.js"></script>
    </body>
    </html>

  script.js 
    // Simpan elemen dalam variabel
    let tableBuah = document.getElementById("tableBuah");
    let namaBuah = document.getElementById("namaBuah");
    let beratBuah = document.getElementById("beratBuah");
    
    // Function menyimpan data buah
    function saveFruit() {
        // Check jika input memiliki nilai/value
        if ((namaBuah && namaBuah.value) && (beratBuah && beratBuah.value)) {
            event.preventDefault();
    
            // Buat element tr
            let tr = document.createElement("tr");
    
            // Buat variable untuk Nomor Urut
            let nomorUrut = document.createTextNode(tableBuah.childElementCount);
    
            // Buat variable untuk Nama Buah
            let addNamaBuah = document.createTextNode(namaBuah.value);
    
            // Buat variable untuk Berat Buah
            let addBeratBuah = document.createTextNode(beratBuah.value + " kg");
    
            // Buat Tombol Reset
            let deleteButton = document.createElement("button");
            deleteButton.textContent = "Hapus";
            // tambahkan attribute onclick untuk button dengan function deleteFruit
            // 'this' mengambil elemen (button) bila function dipanggil sebagai parameter
            deleteButton.setAttribute("onclick", "deleteFruit(this)");
    
            // Buat array agar bisa di iterasi for loops
            let tableDataArray = [
                nomorUrut,
                addNamaBuah,
                addBeratBuah,
                deleteButton
            ];
    
            // for loops appendChild setiap data di array ke dalam td
            for (let i = 0; i < tableDataArray.length; i++) {
                let td = document.createElement("td");
                td.appendChild(tableDataArray[i]);
                // check jika berat di atas 5, dan apakah index sedang berada di addBeratBuah
                if (Number(beratBuah.value) > 5 && i == tableDataArray.indexOf(addBeratBuah)) {
                    td.classList.add("berat");
                }
                tr.appendChild(td);
                tableBuah.appendChild(tr);  
            }
        }
        // Jika tidak ada nilai di input, berikan alert
        else {
            window.alert("Masukan Input")
        }
    }
    
    // function untuk menghapus buah
    function deleteFruit(button) {
        // mencari elemen 'tr' yang terdekat dari elemen button
        let tableButtonRow = button.closest("tr");
        if (tableButtonRow) { // jika true...
            tableBuah.removeChild(tableButtonRow);
            updateNomorUrut();
        }
    }  
    
    // function update Nomor Urut
    function updateNomorUrut() {
        let rows = tableBuah.getElementsByTagName('tr');
        for (let i = 0; i < rows.length; i++) {
            // check setiap row (ditambah satu karena index 0 merupakan head)
            // check children pertamanya (column pertama)
            // tambahkan text content dengan index + 1
            rows[i + 1].children[0].textContent = i + 1;
        }
    }

Pembahasan

1. Buat Struktur HTML

Buat form untuk menggambil user input dan siapkan table. Beri tiap elemen id agar bisa di akses Javascript. 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mini Project 5</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Table Buah</h1>
    <form>
        <div>
            <label>Nama Buah:</label>
            <input type="text" id="namaBuah" placeholder="Masukan Nama Buah"> <br>
        </div>
        <div>
            <label>Berat:</label>
            <input type="number" id="beratBuah" min="0" placeholder="Masukan Berat Buah"> <span>kg</span>
        </div>
        <button onclick="saveFruit()">Simpan</button>
    </form>

    <hr>
    <table id="tableBuah">
            <tr>
                <th>No</th>
                <th>Nama Buah</th>
                <th>Berat</th>
                <th>Action</th>
            </tr>
    </table>

    <script src="script.js"></script>
</body>
</html>

2. Tambahkan Javascript

let tableBuah = document.getElementById("tableBuah");
let namaBuah = document.getElementById("namaBuah");
let beratBuah = document.getElementById("beratBuah");

function saveFruit() {
    if ((namaBuah && namaBuah.value) && (beratBuah && beratBuah.value)) {
        event.preventDefault();

        let tr = document.createElement("tr");

        let nomorUrut = document.createTextNode(tableBuah.childElementCount);
        let addNamaBuah = document.createTextNode(namaBuah.value);
        let addBeratBuah = document.createTextNode(beratBuah.value + " kg");

        let deleteButton = document.createElement("button");
        deleteButton.textContent = "Hapus";
        deleteButton.setAttribute("onclick", "deleteFruit(this)");

        let tableDataArray = [
            nomorUrut,
            addNamaBuah,
            addBeratBuah,
            deleteButton
        ];

        for (let i = 0; i < tableDataArray.length; i++) {
            let td = document.createElement("td");
            td.appendChild(tableDataArray[i]);
            if (Number(beratBuah.value) > 5 && i == tableDataArray.indexOf(addBeratBuah)) {
                td.classList.add("berat");
            }
            tr.appendChild(td);
            tableBuah.appendChild(tr);  
        }
    }
    else {
        window.alert("Masukan Input")
    }
}

function deleteFruit(button) {
    let tableButtonRow = button.closest("tr");
    if (tableButtonRow) {
        tableBuah.removeChild(tableButtonRow);
        updateNomorUrut();
    }
}  

function updateNomorUrut() {
    let rows = tableBuah.getElementsByTagName('tr');
    for (let i = 0; i < rows.length; i++) {
        rows[i + 1].children[0].textContent = i + 1;
    }
}

Penjelasan Javascript

1. Ambil elemen HTML dan simpan di dalam variabel.
let tableBuah = document.getElementById("tableBuah");
let namaBuah = document.getElementById("namaBuah");
let beratBuah = document.getElementById("beratBuah");

2. function saveFruit() berguna untuk membuat table row baru di HTML table. Pertama pengecekan apakah input memiliki value/nilai atau tidak. 
function saveFruit() {
    if ((namaBuah && namaBuah.value) && (beratBuah && beratBuah.value)) {
       ...
    }
    else {
        window.alert("Masukan Input")
    }
}

3. Pembuatan elemen HTML. document.createElement() berguna membuat elemen HTML. document.createTextNode() berguna membuat "textContent" atau isi dari sebuah elemen. Kemudian simpan elemen tersebut di dalam array untuk melakukan iterasi. Di for loop, dilakukan iterasi setiap elemen array dan tambahkan elemen array tersebut ke table data (td) yang telah di buat. Lalu ada pengecekan apakah berat buah di atas 5 dan index sedang berada di elemen addBeratBuah. Jika benar, tambahkan class berat (membuat background bewarna merah.
function saveFruit() {
    if ((namaBuah && namaBuah.value) && (beratBuah && beratBuah.value)) {
        event.preventDefault();

        let tr = document.createElement("tr");

        let nomorUrut = document.createTextNode(tableBuah.childElementCount);
        let addNamaBuah = document.createTextNode(namaBuah.value);
        let addBeratBuah = document.createTextNode(beratBuah.value + " kg");

        let deleteButton = document.createElement("button");
        deleteButton.textContent = "Hapus";
        deleteButton.setAttribute("onclick", "deleteFruit(this)");

        let tableDataArray = [
            nomorUrut,
            addNamaBuah,
            addBeratBuah,
            deleteButton
        ];

        for (let i = 0; i < tableDataArray.length; i++) {
            let td = document.createElement("td");
            td.appendChild(tableDataArray[i]);
            if (Number(beratBuah.value) > 5 && i == tableDataArray.indexOf(addBeratBuah)) {
                td.classList.add("berat");
            }
            tr.appendChild(td);
            tableBuah.appendChild(tr);  
        }
    }
    else {
        window.alert("Masukan Input")
    }
}

4. Pembuatan function deleteFruit() dan updateNomorUrut(). Sebelumnya, untuk membuat deleteButton ditambahkan attribute onclick dengan value deleteFruit(this). this dalam parameter berfungsi mendapatkan elemen dimana function tersebut dipanggil, dalam hal ini this mendapatkan elemen button sebagai parameternya. Sehingga kita bisa dapatkan table row (tr) dimana button tersebut berada dengan menggunakan method .closest() lalu menghapus row tersebut dengan .removeChild(). Kemudian function updateNomorUrut() mengambil seluruh elemen tr dan melakukan iterasi for loop untuk mengganti textContent table data pertama (td pertama merupakan nomor urut).
function deleteFruit(button) {
    let tableButtonRow = button.closest("tr");
    if (tableButtonRow) {
        tableBuah.removeChild(tableButtonRow);
        updateNomorUrut();
    }
}  

function updateNomorUrut() {
    let rows = tableBuah.getElementsByTagName('tr');
    for (let i = 0; i < rows.length; i++) {
        rows[i + 1].children[0].textContent = i + 1;
    }
}

End

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

Diposting oleh Roihan Fajareno

Posting Komentar

0 Komentar