Javascript 8-5: Memodifikiasi Inventory Buah Menggunakan Paging

- Juni 06, 2024

Hallo Sobat Programming! Selamat Datang dan Salam Koding!

Pada kesempatan kali ini, saya ingin berbagi tentang sebuah program sederhana yang saya buat untuk mengelola inventaris buah. Program ini dirancang menggunakan HTML, CSS, dan JavaScript, dan memungkinkan pengguna untuk menambahkan, mengedit, dan menghapus data buah dengan mudah. Mari kita lihat lebih dekat bagaimana program ini bekerja dan fitur-fitur yang ditawarkannya.

Tujuan Program

Tujuan utama dari program ini adalah untuk membantu pengguna dalam mengelola inventaris buah mereka. Dengan menggunakan form sederhana, pengguna dapat memasukkan nama buah, berat buah dalam kilogram, dan URL gambar buah tersebut. Data ini kemudian ditampilkan dalam sebuah tabel, di mana setiap baris mewakili satu buah.

Struktur HTML

Program ini dimulai dengan struktur HTML dasar yang mencakup elemen-elemen berikut:

Form Input Data Buah: Form ini terdiri dari input untuk nama buah, berat buah, dan URL gambar buah. Setiap input dilengkapi dengan label dan field yang diperlukan untuk memasukkan data.
Tabel Data Buah: Tabel ini menampilkan data buah yang telah dimasukkan, termasuk kolom untuk nomor urut, nama buah, berat, gambar, dan aksi (edit dan delete).

HTML

<!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>
        /* CSS styling */
    </style>
</head>
<body>
    <h1 style="text-align: center;">Project</h1>
    <form id="dataForm">
        <!-- Form elements -->
    </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>
            <!-- Data rows will be inserted here -->
        </tbody>
    </table>
    <script>
        /* JavaScript code */
    </script>
</body>
</html>

CSS untuk Tampilan yang Menarik

Untuk membuat tampilan lebih menarik dan mudah digunakan, saya menggunakan CSS sederhana. Beberapa fitur CSS yang diterapkan antara lain:

Penataan Tabel: Tabel diatur dengan border-collapse: separate untuk membuat garis pemisah yang jelas antar sel.
Penataan Form: Margin dan padding ditambahkan untuk memberikan ruang yang cukup di sekitar elemen form.
Pewarnaan Baris: Baris dengan berat buah lebih dari 5 kg diberi warna latar belakang merah untuk penekanan visual.

JavaScript untuk Fungsi Interaktif

JavaScript digunakan untuk menangani fungsionalitas interaktif dari program ini. Berikut adalah beberapa fungsi utama yang diimplementasikan:

Menambah Data: Fungsi addData() digunakan untuk menambahkan data baru ke dalam tabel. Data yang dimasukkan oleh pengguna akan disimpan dalam array dataBuah dan ditampilkan dalam tabel.
Menyegarkan Tabel: Fungsi refreshTable() digunakan untuk memperbarui tampilan tabel setiap kali ada perubahan data.
Mengedit Data: Fungsi editRow(index) memungkinkan pengguna untuk mengedit data yang ada. Data yang telah diubah dapat disimpan kembali dengan fungsi saveRow(index).
Menghapus Data: Fungsi deleteRow(index) digunakan untuk menghapus baris data dari tabel.

Javascript

let dataBuah = [];

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

    dataBuah.forEach((item, index) => {
        const newRow = tableBody.insertRow();
        newRow.innerHTML = `
            <td>${index + 1}</td>
            <td>${item.name}</td>
            <td>${item.weight}</td>
            <td><img src="${item.picture}" alt="Gambar" style="max-width: 100px; max-height: 100px;"></td>
            <td><button onclick="editRow(${index})">Edit</button> <button onclick="deleteRow(${index})">Delete</button></td>
        `;

        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 = '';
}

Kode Lengkapnya:

Inventory Buah 2.0

<!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

Kesimpulan

Program inventaris buah ini adalah contoh sederhana namun berguna dari aplikasi web yang memanfaatkan HTML, CSS, dan JavaScript. Dengan fitur untuk menambah, mengedit, dan menghapus data, program ini bisa digunakan sebagai dasar untuk proyek yang lebih kompleks di masa depan. Semoga artikel ini bermanfaat dan memberikan inspirasi bagi Anda untuk terus mengembangkan keterampilan koding Anda. Selamat mencoba dan terus semangat dalam belajar! Salam Koding!

Cari Blog Ini

Alpinn's HTML Tutorial

Javascript 8-5: Memodifikiasi Inventory Buah Menggunakan Paging

Hallo Sobat Programming! Selamat Datang dan Salam Koding!

Tujuan Program

Struktur HTML

HTML

CSS untuk Tampilan yang Menarik

JavaScript untuk Fungsi Interaktif

Javascript

Kode Lengkapnya:

Inventory Buah 2.0

Hasil:

Project

Kesimpulan

Komentar

Posting Komentar

Postingan populer dari blog ini

Analisis Program To-Do list Sederhana

Ringkasan Capaian Pembelajaran SMK Jurusan Pengembangan Perangkat Lunak dan Gim (Fase E)

Javascript 8-3: Memahami Iterasi Array pada JavaScript dan Mini Proyek Penghitungan Min, Max, dan Rata-rata

Data Analytic dan Machine Learning

Simple Sunset Links Page Design - HTML & CSS Only

Javascript 8-2: Array Iteration dan Membuat Sorting Angka

Penjelasan Lengkap Tentang PHP Native dan PHP Framework

Javascript 7-3: Membuat Quiz Exam Generator

Javascript 7-2: String, Mengupgrade Mini Project Trayek.