PROJECT SEDERHANA JAVASCRIPT #8 MODUL 7

 



Product Inventory Management with Edit and Delete Functionality

Kode ini merupakan halaman web sederhana yang memungkinkan pengguna untuk mengelola data barang dengan kemampuan tambah, edit, dan hapus. Berikut adalah penjelasan spesifiknya:






  1. 1)Form Tambah Data:

    • Form ini memungkinkan pengguna memasukkan informasi barang seperti Nama Barang, Berat (kg), dan URL Gambar.
    • Terdapat tombol "Tambah Data" yang memanggil fungsi tambahData() saat diklik.

  2. 2)Tabel Daftar Barang:

    • Tabel menampilkan daftar barang yang telah dimasukkan, dengan kolom-kolom No, Nama Barang, Berat (kg), Gambar, dan Aksi.
    • Setiap baris memiliki dua tombol aksi: "Edit" dan "Hapus."

  3. 3)JavaScript Functions:

    • tambahData(): Menambahkan data baru ke dalam tabel berdasarkan input dari formulir. Jika berat lebih dari 5 kg, baris akan ditandai dengan latar belakang merah.
    • editBaris(row): Mengubah baris tertentu menjadi mode edit, menggantikan teks dengan input untuk diedit.
    • saveBaris(row): Menyimpan perubahan setelah mode edit, mengembalikan sel menjadi teks dan mengganti tombol "Save" dengan "Edit."
    • hapusBaris(row): Menghapus baris tertentu dari tabel.

Halaman ini memberikan fungsionalitas lengkap untuk mengelola data barang dengan kemampuan penambahan, pengeditan, dan penghapusan.


PREVIEW AND SOURCE CODE:

https://github.com/2ndmurphy/Product-Management-Edit-Save-Function





Komentar

Posting Komentar

Postingan populer dari blog ini

PROJECT SEDERHANA JAVASCRIPT #14 MODUL 8

Gambar
 Inventory with pages Body Section: <body> : Bagian utama yang berisi elemen-elemen yang akan ditampilkan di halaman web. Input form untuk memasukkan data barang. Tabel untuk menampilkan data barang. Daftar untuk menampilkan navigasi halaman (pagination). <script> : Bagian ini berisi script JavaScript untuk mengatur logika interaksi pengguna. JavaScript Section: Variabel seperti dataStore , itemsPerPage , dan currentPage digunakan untuk menyimpan data dan mengatur pagination. Fungsi tambahData() : Menambahkan data ke tabel ketika tombol "Tambah" ditekan. Fungsi editBaris() : Mengubah baris tabel menjadi form input untuk pengeditan. Fungsi saveBaris() : Menyimpan perubahan setelah pengeditan. Fungsi hapusBaris() : Menghapus baris dari tabel. Fungsi tampilkanData() : Menampilkan data pada tabel dan membuat navigasi halaman. Load Data on Page Load: Terdapat pemanggilan fungsi tampilkanData() untuk menampilkan data saat halaman dimuat. Dokumen ini memberikan fungsio...
Baca selengkapnya