Tujuan Program
Tujuan Program |
Tujuan program adalah seperti Mini Project Table Buah Editable Modul 7 yakni untuk membuat tabel daftar buah yang datanya bisa di edit tetapi data buah disimpan dalam array data store. Pengguna dapat memasukkan nama buah, berat buah dalam kilogram, dan URL gambar buah melalui form input ke data store. Setelah data dimasukkan, tabel akan otomatis diperbarui untuk mencerminkan data store tersebut.
Tampilan awal program |
Setelah diisi 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
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 4</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Tabel Buah (Array Data Store)</h1> <form onsubmit="return false;"> <div> <label for="namaBuah">Nama Buah:</label> <input type="text" id="namaBuah" required> </div> <div> <label for="beratBuah">Berat:</label> <input type="number" id="beratBuah" min="0" required> <span>Kg</span> </div> <div> <label for="gambarBuah">Gambar:</label> <input type="text" id="gambarBuah"> </div> <button onclick="addData()">Add</button> </form> <hr> <table> <thead> <tr> <th>No</th> <th>Nama Buah</th> <th>Berat</th> <th>Gambar</th> <th>Action</th> </tr> </thead> <tbody id="tableBuah"> <!-- Data Here --> </tbody> </table> <script src="script.js"></script> </body> </html>
script.js
let namaBuahInput = document.getElementById("namaBuah"); let beratBuahInput = document.getElementById("beratBuah"); let gambarBuahInput = document.getElementById("gambarBuah"); let tableBuah = document.getElementById("tableBuah"); // ------------------------------------------------------------------------- // let tableDataStore = [ // {nama: "Durian", berat: 6, gambar: "https://google.com"} ] function renderData(data) { tableBuah.innerHTML = ""; tableBuah.appendChild(generateTable(data)); } function generateTable(data) { let tableRows = document.createDocumentFragment(); for (let i = 0; i < data.length; i++) { let tr = document.createElement('tr'); let tdNomorUrut = document.createElement('td'); let tdNama = document.createElement('td'); let tdBerat = document.createElement('td'); let tdGambar = document.createElement('td'); let tdAction = document.createElement('td'); tdNomorUrut.textContent = i + 1; tdNama.textContent = data[i].nama; tdBerat.textContent = data[i].berat; let img = createImg(data[i].gambar); tdGambar.appendChild(img); let editButton = createButton("Edit", "editData(this)") tdAction.appendChild(editButton); let tdArray = [ tdNomorUrut, tdNama, tdBerat, tdGambar, tdAction ] tdArray.forEach(td => tr.appendChild(td)); tableRows.appendChild(tr); } return tableRows; } renderData(tableDataStore); // ------------------------------------------------------------------------- // function addData() { let newData = {nama: namaBuahInput.value, berat: Number(beratBuahInput.value), gambar: gambarBuahInput.value }; tableDataStore.push(newData); renderData(tableDataStore); } function editData(button) { let buttonRow = button.closest('tr'); let position = Number(buttonRow.children[0].textContent); let index = position - 1; let nama = tableDataStore[index].nama; let berat = tableDataStore[index].berat; let gambar = tableDataStore[index].gambar; let tdElement = buttonRow.children; let namaInput = createInput("text", nama); let beratInput = createInput("number", berat); let gambarInput = createInput("text", gambar); let deleteData = createButton("Hapus", "deleteData(this)"); let saveData = createButton("Save", "saveData(this)"); let buttonContainer = document.createElement('div'); buttonContainer.appendChild(deleteData); buttonContainer.appendChild(saveData); let inputArray = [ namaInput, beratInput, gambarInput, buttonContainer ] for (let i = 0; i < inputArray.length; i++) { tdElement[i + 1].innerHTML = ''; tdElement[i + 1].appendChild(inputArray[i]); } } function deleteData(button) { let buttonRow = button.closest('tr'); let index = Number(buttonRow.children[0].textContent) - 1; tableDataStore.splice(index, 1); renderData(tableDataStore); } function saveData(button) { let buttonRow = button.closest('tr'); let index = Number(buttonRow.children[0].textContent) - 1; let nama = buttonRow.getElementsByTagName('input')[0].value; let berat = Number(buttonRow.getElementsByTagName('input')[1].value); let gambar = buttonRow.getElementsByTagName('input')[2].value; tableDataStore[index].nama = nama; tableDataStore[index].berat = berat; tableDataStore[index].gambar = gambar; renderData(tableDataStore); } // ------------------------------------------------------------------------- // function createInput(inputType, inputValue) { let input = document.createElement("input"); input.setAttribute("type", inputType); if (inputType === "number") { input.setAttribute("min", "1"); } input.value = inputValue; return input; } function createButton(textContent, onclickFunction) { let button = document.createElement("button"); button.textContent = textContent; button.setAttribute("onclick", onclickFunction); return button; } function createImg(src) { let img = document.createElement("img"); img.setAttribute("src", src); img.setAttribute("alt", "Gambar"); img.setAttribute("width", "80px"); return img; }
Pembahasan
1. Buat Struktur HTML
Buat struktur HTML seperti pada source code. Bagian HTML pada kode
tersebut berperan sebagai antarmuka pengguna (UI). Form input memungkinkan
pengguna untuk memasukkan nama buah, berat buah, dan URL gambar buah yang
akan ditambahkan ke dalam tabel. Tabel digunakan untuk menampilkan data
buah dalam format yang terstruktur, yang kemudian dapat diedit atau
dihapus sesuai kebutuhan pengguna. Setiap baris dalam tabel memiliki
tombol aksi untuk mengedit atau menghapus data.
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 namaBuahInput = document.getElementById("namaBuah"); let beratBuahInput = document.getElementById("beratBuah"); let gambarBuahInput = document.getElementById("gambarBuah"); let tableBuah = document.getElementById("tableBuah");
2. Inisialisasi Data Store, buat variabel dengan array kosong
untuk menyimpan data buah dalam bentuk object.
let tableDataStore = [ // {nama: "Durian", berat: 6, gambar: "https://google.com"} ]
3. Function untuk membuat Input, Button, dan Img, berguna membuat
elemen HTML dengan parameter yang ditentukan. Function
createInput menerima tipe dan nilai input, kemudian membuat elemen
input dengan tipe dan nilai tersebut. Function createButton menerima
teks dan fungsi onclick, lalu menghasilkan elemen tombol (button) HTML dengan
isi teks dan function onclick yang sesuai parameter. Sementara itu, function
createImg menerima URL gambar, dan membuat elemen gambar.
function createInput(inputType, inputValue) { let input = document.createElement("input"); input.setAttribute("type", inputType); if (inputType === "number") { input.setAttribute("min", "1"); } input.value = inputValue; return input; } function createButton(textContent, onclickFunction) { let button = document.createElement("button"); button.textContent = textContent; button.setAttribute("onclick", onclickFunction); return button; } function createImg(src) { let img = document.createElement("img"); img.setAttribute("src", src); img.setAttribute("alt", "Gambar"); img.setAttribute("width", "80px"); return img; }
4. Function generateTable(data), bertanggung jawab untuk membuat elemen tabel HTML dari data yang diberikan. Function ini menerima sebuah array data dari datastore yang berisi informasi buah-buahan. Selanjutnya, function ini akan membuat row tabel (tr) untuk setiap item dalam array data, dan mengisi setiap sel (td) dalam tr tersebut dengan informasi dalam object data store seperti nama buah, berat, gambar, dan tombol action untuk mengedit isi data.
function generateTable(data) { let tableRows = document.createDocumentFragment(); for (let i = 0; i < data.length; i++) { let tr = document.createElement('tr'); let tdNomorUrut = document.createElement('td'); let tdNama = document.createElement('td'); let tdBerat = document.createElement('td'); let tdGambar = document.createElement('td'); let tdAction = document.createElement('td'); tdNomorUrut.textContent = i + 1; tdNama.textContent = data[i].nama; tdBerat.textContent = data[i].berat; let img = createImg(data[i].gambar); tdGambar.appendChild(img); let editButton = createButton("Edit", "editData(this)") tdAction.appendChild(editButton); let tdArray = [ tdNomorUrut, tdNama, tdBerat, tdGambar, tdAction ] tdArray.forEach(td => tr.appendChild(td)); tableRows.appendChild(tr); } return tableRows; }
5. Function renderData(data), bertanggung jawab untuk menampilkan data buah ke dalam tabel HTML. Function ini pertama-tama membersihkan isi dari elemen tabel, lalu menggunakan function generateTable(data) untuk membuat fragmen dokumen yang berisi baris-baris tabel dengan data buah yang diberikan. Setelah itu, fragmen tersebut ditambahkan ke elemen tabel. Function ini memastikan bahwa tampilan tabel selalu mencerminkan data terkini.
function renderData(data) { tableBuah.innerHTML = ""; tableBuah.appendChild(generateTable(data)); }
6. Function addData(), bertanggung jawab untuk menambahkan data baru ke dalam tabel buah. Ketika tombol "Add" ditekan, function ini dijalankan. Function ini pertama-tama mengambil nilai dari input nama buah, berat buah, dan gambar buah. Kemudian, data baru dibuat dalam bentuk objek dengan properti nama, berat, dan gambar sesuai dengan nilai input. Objek tersebut kemudian ditambahkan ke dalam array tableDataStore yang menyimpan seluruh data buah. Setelah data ditambahkan, tabel buah dirender ulang dengan memanggil function renderData() untuk menampilkan data baru tersebut.
function addData() { let newData = {nama: namaBuahInput.value, berat: Number(beratBuahInput.value), gambar: gambarBuahInput.value }; tableDataStore.push(newData); renderData(tableDataStore); }
7. Function editData(button), bertanggung jawab untuk mengubah tampilan baris data dalam tabel menjadi bentuk yang dapat diedit. Ketika tombol "Edit" di klik, function ini menemukan baris yang bersangkutan, menampilkan nilai-nilai yang sedang diedit dalam bentuk input, dan menggantikan tampilan sebelumnya dengan input tersebut. Tombol "Edit" diganti dengan tombol "Save" dan "Hapus", yang memungkinkan pengguna untuk menyimpan perubahan yang dilakukan atau menghapus baris data.
function editData(button) { let buttonRow = button.closest('tr'); let position = Number(buttonRow.children[0].textContent); let index = position - 1; let nama = tableDataStore[index].nama; let berat = tableDataStore[index].berat; let gambar = tableDataStore[index].gambar; let tdElement = buttonRow.children; let namaInput = createInput("text", nama); let beratInput = createInput("number", berat); let gambarInput = createInput("text", gambar); let deleteData = createButton("Hapus", "deleteData(this)"); let saveData = createButton("Save", "saveData(this)"); let buttonContainer = document.createElement('div'); buttonContainer.appendChild(deleteData); buttonContainer.appendChild(saveData); let inputArray = [ namaInput, beratInput, gambarInput, buttonContainer ] for (let i = 0; i < inputArray.length; i++) { tdElement[i + 1].innerHTML = ''; tdElement[i + 1].appendChild(inputArray[i]); } }
8. Function deleteData(button), bertanggung jawab untuk menghapus data buah dari tabel saat tombol hapus di klik. Saat tombol di klik, function ini menemukan baris tempat tombol itu berada, kemudian menentukan indeks data yang terkait dengan baris tersebut. Selanjutnya, data buah pada indeks tersebut dihapus dari array data dan tabel dirender ulang tanpa data yang sudah dihapus.
function deleteData(button) { let buttonRow = button.closest('tr'); let index = Number(buttonRow.children[0].textContent) - 1; tableDataStore.splice(index, 1); renderData(tableDataStore); }
9. Function saveData(button), bertanggung jawab untuk menyimpan data yang telah diedit oleh pengguna dalam tabel data buah. Ketika tombol "Save" di tekan, function ini akan dieksekusi. Function ini pertama-tama menemukan baris yang sesuai dengan tombol yang ditekan, kemudian mengambil nilai-nilai input dari baris tersebut. Nilai-nilai ini kemudian digunakan untuk memperbarui data yang sesuai dalam array data buah. Setelah pembaruan dilakukan, tabel data buah diperbarui untuk mencerminkan perubahan tersebut.
function saveData(button) { let buttonRow = button.closest('tr'); let index = Number(buttonRow.children[0].textContent) - 1; let nama = buttonRow.getElementsByTagName('input')[0].value; let berat = Number(buttonRow.getElementsByTagName('input')[1].value); let gambar = buttonRow.getElementsByTagName('input')[2].value; tableDataStore[index].nama = nama; tableDataStore[index].berat = berat; tableDataStore[index].gambar = gambar; renderData(tableDataStore); }
End
Jika sudah, kalian bisa mencoba program tersebut dengan mengakses laman ini.
0 Komentar