Javascript 8-4: Mini Project Aplikasi Inventory Buah dengan JavaScript

- Juni 06, 2024

Hallo Sobat Programming! Selamat Datang dan Salam Koding!

Dalam artikel ini, kita akan membahas sebuah proyek sederhana yang dibuat dengan HTML, CSS, dan JavaScript untuk mengelola inventaris buah. Proyek ini akan mengajarkan kita bagaimana cara menambahkan, mengedit, dan menghapus data dari sebuah tabel, serta bagaimana menerapkan beberapa teknik JavaScript untuk manipulasi DOM.

Struktur HTML

1. Formulir Input

Formulir ini digunakan untuk memasukkan data buah baru. Terdapat tiga input: nama buah, berat, dan URL gambar buah.

Form

<form id="dataForm">
    <label for="itemName">Nama Buah:</label>
    <input type="text" id="itemName" name="itemName" required>
    <br>
    <label for="itemWeight">Berat:</label>
    <input type="number" id="itemWeight" name="itemWeight" min="0" required>
    <br>
    <label for="itemPicture">Gambar:</label>
    <input type="text" name="itemPicture" id="itemPicture">
    <br>
    <button type="button" onclick="addData()">Add</button>
</form>

2. Tabel Data

Tabel ini digunakan untuk menampilkan data buah yang telah dimasukkan.

Table

<table id="dataTable">
    <thead>
        <tr>
            <th>No</th>
            <th>Nama Buah</th>
            <th>Berat (kg)</th>
            <th>Gambar</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
       
    </tbody>
</table>

CSS untuk Styling

CSS

table {
    border-collapse: separate;
    width: 80%;
    margin: 20px auto;
}
#itemWeight {
    margin-left: 41px;
    margin-top: 2px;
}
th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
}
#itemPicture {
    margin-left: 24px;
    margin-top: 2px;
}
tr.red-bg td:nth-child(3) {
    background-color: red;
}
#dataForm {
    margin-top: 20px;
    text-align: left;
}

JavaScript untuk Fungsionalitas

1. Menambahkan Data Buah

Fungsi addData() digunakan untuk menambahkan data buah baru ke dalam array dataBuah dan memperbarui tampilan tabel.

addData()

let dataBuah = [];

function addData() {
    const itemName = document.getElementById("itemName").value;
    const itemWeight = document.getElementById("itemWeight").value;
    const itemPicture = document.getElementById("itemPicture").value;

    dataBuah.push({
        name: itemName,
        weight: parseFloat(itemWeight),
        picture: itemPicture
    });

    refreshTable();

    document.getElementById('itemName').value = '';
    document.getElementById('itemWeight').value = '';
    document.getElementById('itemPicture').value = '';
}

2. Menyegarkan Tabel

Fungsi refreshTable() digunakan untuk memperbarui tampilan tabel setiap kali ada perubahan data.

refreshTable()

function refreshTable() {
    const tableBody = document.querySelector("#dataTable tbody");
    tableBody.innerHTML = ""; 

    dataBuah.forEach((item, index) => {
        const newRow = tableBody.insertRow();
        const cell1 = newRow.insertCell(0);
        const cell2 = newRow.insertCell(1);
        const cell3 = newRow.insertCell(2);
        const cell4 = newRow.insertCell(3);
        const cell5 = newRow.insertCell(4);

        cell1.innerHTML = index + 1;
        cell2.innerHTML = item.name;
        cell3.innerHTML = item.weight;
        cell4.innerHTML = `<img src="${item.picture}" alt="Gambar" style="max-width: 100px; max-height: 100px;">`;
        cell5.innerHTML = `<button onclick="editRow(${index})">Edit</button> <button onclick="deleteRow(${index})">Delete</button>`;

        if (item.weight > 5) {
            newRow.classList.add('red-bg');
        }
    });
}

3. Mengedit Data

Fungsi editRow(index) digunakan untuk mengubah data dalam tabel menjadi input form yang dapat diedit.

editRow()

function editRow(index) {
    const item = dataBuah[index];

    const row = document.querySelector("#dataTable tbody").rows[index];
    const cells = row.getElementsByTagName("td");

    const originalValues = [
        item.name,
        item.weight,
        item.picture
    ];

    cells[1].innerHTML = `<input type="text" value="${item.name}">`;
    cells[2].innerHTML = `<input type="number" value="${item.weight}" min="0">`;
    cells[3].innerHTML = `<input type="url" value="${item.picture}">`;
    cells[4].innerHTML = `<button onclick="saveRow(${index})">Save</button> <button onclick="cancelEditRow(${index}, '${originalValues.join("','")}')">Cancel</button>`;
}

4. Menyimpan Perubahan

Fungsi saveRow(index) digunakan untuk menyimpan perubahan yang telah dilakukan pada data buah.

saveRow(index)

function saveRow(index) {
    const row = document.querySelector("#dataTable tbody").rows[index];
    const cells = row.getElementsByTagName("td");

    const itemName = cells[1].getElementsByTagName("input")[0].value;
    const itemWeight = cells[2].getElementsByTagName("input")[0].value;
    const itemPicture = cells[3].getElementsByTagName("input")[0].value;

    dataBuah[index] = {
        name: itemName,
        weight: parseFloat(itemWeight),
        picture: itemPicture
    };

    refreshTable();
}

5. Membatalkan Perubahan

Fungsi cancelEditRow(index, itemName, itemWeight, itemPicture) digunakan untuk membatalkan perubahan yang sedang dilakukan.

cancelEditRow()

function cancelEditRow(index, itemName, itemWeight, itemPicture) {
    dataBuah[index] = {
        name: itemName,
        weight: parseFloat(itemWeight),
        picture: itemPicture
    };

    refreshTable();
}

6. Menghapus Data

Fungsi deleteRow(index) digunakan untuk menghapus data buah dari array dan memperbarui tabel.

Generator Bilangan Prima

function deleteRow(index) {
    dataBuah.splice(index, 1);
    refreshTable();
}

Kode Lengkapnya:

Inventory Buah

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inventory Buah</title>
    <style>
        table {
            border-collapse: separate;
            width: 80%;
            margin: 20px auto;
        }
        #itemWeight {
            margin-left: 41px;
            margin-top: 2px;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: left;
        }
        #itemPicture {
            margin-left: 24px;
            margin-top: 2px;
        }
        tr.red-bg td:nth-child(3) {
            background-color: red;
        }
        #dataForm {
            margin-top: 20px;
            text-align: left;
        }
    </style>
</head>
<body>
    <h1 style="text-align: center;">Project</h1>

    <form id="dataForm">
        <label for="itemName">Nama Buah:</label>
        <input type="text" id="itemName" name="itemName" required>
        <br>
        <label for="itemWeight">Berat:</label>
        <input type="number" id="itemWeight" name="itemWeight" min="0" required>
        <br>
        <label for="itemPicture">Gambar:</label>
        <input type="text" name="itemPicture" id="itemPicture">
        <br>
        <button type="button" onclick="addData()">Add</button>
    </form>

    <table id="dataTable">
        <thead>
            <tr>
                <th>No</th>
                <th>Nama Buah</th>
                <th>Berat (kg)</th>
                <th>Gambar</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
           
        </tbody>
    </table>

    <script>
        let dataBuah = [];

        function refreshTable() {
            const tableBody = document.querySelector("#dataTable tbody");
            tableBody.innerHTML = ""; 

            dataBuah.forEach((item, index) => {
                const newRow = tableBody.insertRow();
                const cell1 = newRow.insertCell(0);
                const cell2 = newRow.insertCell(1);
                const cell3 = newRow.insertCell(2);
                const cell4 = newRow.insertCell(3);
                const cell5 = newRow.insertCell(4);

                cell1.innerHTML = index + 1;
                cell2.innerHTML = item.name;
                cell3.innerHTML = item.weight;
                cell4.innerHTML = `<img src="${item.picture}" alt="Gambar" style="max-width: 100px; max-height: 100px;">`;
                cell5.innerHTML = `<button onclick="editRow(${index})">Edit</button> <button onclick="deleteRow(${index})">Delete</button>`;

                if (item.weight > 5) {
                    newRow.classList.add('red-bg');
                }
            });
        }

        function addData() {
            const itemName = document.getElementById("itemName").value;
            const itemWeight = document.getElementById("itemWeight").value;
            const itemPicture = document.getElementById("itemPicture").value;

            dataBuah.push({
                name: itemName,
                weight: parseFloat(itemWeight),
                picture: itemPicture
            });

            refreshTable();

            document.getElementById('itemName').value = '';
            document.getElementById('itemWeight').value = '';
            document.getElementById('itemPicture').value = '';
        }

        function editRow(index) {
            const item = dataBuah[index];

            const row = document.querySelector("#dataTable tbody").rows[index];
            const cells = row.getElementsByTagName("td");

            const originalValues = [
                item.name,
                item.weight,
                item.picture
            ];

            cells[1].innerHTML = `<input type="text" value="${item.name}">`;
            cells[2].innerHTML = `<input type="number" value="${item.weight}" min="0">`;
            cells[3].innerHTML = `<input type="url" value="${item.picture}">`;
            cells[4].innerHTML = `<button onclick="saveRow(${index})">Save</button> <button onclick="cancelEditRow(${index}, '${originalValues.join("','")}')">Cancel</button>`;
        }

        function saveRow(index) {
            const row = document.querySelector("#dataTable tbody").rows[index];
            const cells = row.getElementsByTagName("td");

            const itemName = cells[1].getElementsByTagName("input")[0].value;
            const itemWeight = cells[2].getElementsByTagName("input")[0].value;
            const itemPicture = cells[3].getElementsByTagName("input")[0].value;

            dataBuah[index] = {
                name: itemName,
                weight: parseFloat(itemWeight),
                picture: itemPicture
            };

            refreshTable();
        }

        function cancelEditRow(index, itemName, itemWeight, itemPicture) {
            dataBuah[index] = {
                name: itemName,
                weight: parseFloat(itemWeight),
                picture: itemPicture
            };

            refreshTable();
        }

        function deleteRow(index) {
            dataBuah.splice(index, 1);
            refreshTable();
        }
    </script>
</body>
</html>

Hasil:

Project

No	Nama Buah	Berat (kg)	Gambar	Action

Penutup

Proyek sederhana ini menunjukkan bagaimana kita dapat menggunakan HTML, CSS, dan JavaScript untuk membuat aplikasi web yang interaktif. Dengan memahami dan memodifikasi kode ini, Sobat Programming dapat belajar banyak tentang manipulasi DOM dan pengelolaan data pada aplikasi web. Teruslah bereksperimen dan kembangkan keterampilan koding kalian! Selamat mencoba!