Aplikasi Inspeksi Produk Menggunakan HTML, CSS, dan JavaScript
 |
| zoneamedia.blogspot.com |
Dalam aplikasi bisnis, penting untuk memantau kualitas produk yang diproduksi agar sesuai dengan standar dan memenuhi kebutuhan konsumen. Inspeksi produk memegang peran penting dalam proses pemantauan ini.
Dalam aplikasi bisnis, penting untuk memantau kualitas produk yang diproduksi agar sesuai dengan standar dan memenuhi kebutuhan konsumen. Inspeksi produk memegang peran penting dalam proses pemantauan ini.
Pada tutorial ini, kita akan membahas bagaimana membuat aplikasi inspeksi produk menggunakan HTML, CSS, dan JavaScript. Kita akan membuat form input untuk menambahkan data inspeksi produk dan tabel untuk menampilkan data inspeksi produk yang sudah diinputkan. Kita juga akan menambahkan validasi input dan fungsi edit dan hapus data.
1. HTML
Kode HTML ini adalah kode dasar untuk membuat sebuah aplikasi data list hasil inspeksi produk. Terdapat tag-tag HTML yang digunakan untuk membuat header, form input, dan tabel yang akan digunakan untuk menampilkan daftar hasil inspeksi produk.
<!DOCTYPE html>
<html>
<head>
<title>Aplikasi Data List Hasil Inspeksi Materai</title>
<style>Kode CSS</style>
</head>
<body>
<h1>Aplikasi Data List Hasil Inspeksi Materai</h1>
<form id="form-inspeksi">
<label for="nomorSeri">Nomor Seri:</label>
<input type="text" id="nomorSeri" name="nomorSeri"><br>
<label for="tanggalProduksi">Tanggal Produksi:</label>
<input type="date" id="tanggalProduksi" name="tanggalProduksi"><br>
<label for="tanggalInspeksi">Tanggal Inspeksi:</label>
<input type="date" id="tanggalInspeksi" name="tanggalInspeksi"><br>
<label for="tanggalDiterimaKonsumen">Tanggal Diterima Konsumen:</label>
<input type="date" id="tanggalDiterimaKonsumen" name="tanggalDiterimaKonsumen"><br>
<label for="kondisi">Kondisi:</label>
<select id="kondisi" name="kondisi">
<option value="Baik">Baik</option>
<option value="Kurang Baik">Kurang Baik</option>
<option value="Rusak">Rusak</option>
</select><br>
<label for="ukuran">Ukuran:</label>
<input type="text" id="ukuran" name="ukuran"><br>
<label for="kualitasCetakan">Kualitas Cetakan:</label>
<input type="text" id="kualitasCetakan" name="kualitasCetakan"><br>
<button type="button" id="tambah" onclick="tambahDataInspeksi()">Tambah</button>
<button type="button" id="ubah" onclick="ubahDataInspeksi()" disabled>Ubah</button>
<button type="button" id="hapus" onclick="hapusDataInspeksi()" disabled>Hapus</button>
</form>
<br>
<table>
<thead>
<tr>
<th>Nomor Seri</th>
<th>Tanggal Produksi</th>
<th>Tanggal Inspeksi</th>
<th>Tanggal Diterima Konsumen</th>
<th>Kondisi</th>
<th>Ukuran</th>
<th>Kualitas Cetakan</th>
<th>Edit Data</th>
</tr>
</thead>
<tbody id="daftar-inspeksi"></tbody>
</table>
<script>Kode JavaScript</script>
</body>
</html>
Di bagian head, terdapat judul halaman dan kode CSS yang akan digunakan untuk mempercantik tampilan halaman.
Di bagian body, terdapat form input yang digunakan untuk memasukkan data hasil inspeksi produk. Form ini terdiri dari beberapa label, input, dan button. Terdapat juga tabel yang akan digunakan untuk menampilkan daftar hasil inspeksi produk.
Di bagian akhir, terdapat kode JavaScript yang akan digunakan untuk mengolah data yang diinputkan melalui form dan menampilkan hasil di tabel.
Sebagai kesimpulan, kode ini merupakan kode dasar untuk membuat aplikasi data list hasil inspeksi produk dengan menggunakan HTML, CSS, dan JavaScript.
2. JavaScript
// Array untuk menyimpan data inspeksi materai
let dataInspeksi = [
{
nomorSeri: 'M0001',
tanggalProduksi: '2022-01-01',
tanggalInspeksi: '2022-01-02',
tanggalDiterimaKonsumen: '2022-01-03',
kondisi: 'Baik',
ukuran: '5 x 6 cm',
kualitasCetakan: 'Baik'
},
{
nomorSeri: 'M0002',
tanggalProduksi: '2022-01-01',
tanggalInspeksi: '2022-01-02',
tanggalDiterimaKonsumen: '2022-01-03',
kondisi: 'Kurang Baik',
ukuran: '5 x 6 cm',
kualitasCetakan: 'Kurang Baik'
}
];
// Fungsi untuk menampilkan data inspeksi materai
function tampilkanDataInspeksi() {
let dataInspeksiHTML = '';
dataInspeksi.forEach((inspeksi, index) => {
dataInspeksiHTML += `
<tr>
<td>${inspeksi.nomorSeri}</td>
<td>${inspeksi.tanggalProduksi}</td>
<td>${inspeksi.tanggalInspeksi}</td>
<td>${inspeksi.tanggalDiterimaKonsumen}</td>
<td>${inspeksi.kondisi}</td>
<td>${inspeksi.ukuran}</td>
<td>${inspeksi.kualitasCetakan}</td>
<td>
<button onclick="ubahDataInspeksi(${index})">Ubah</button>
<button onclick="hapusDataInspeksi(${index})">Hapus</button>
</td>
</tr>
`;
});
// Tampilkan data inspeksi di dalam elemen dengan id #daftar-inspeksi
document.getElementById('daftar-inspeksi').innerHTML = dataInspeksiHTML;
}
// Fungsi untuk menambah data inspeksi materai
function tambahDataInspeksi() {
// Ambil data dari form
const nomorSeri = document.getElementById('nomorSeri').value;
const tanggalProduksi = document.getElementById('tanggalProduksi').value;
const tanggalInspeksi = document.getElementById('tanggalInspeksi').value;
const tanggalDiterimaKonsumen = document.getElementById('tanggalDiterimaKonsumen').value;
const kondisi = document.getElementById('kondisi').value;
const ukuran = document.getElementById('ukuran').value;
const kualitasCetakan = document.getElementById('kualitasCetakan').value;
// Validasi input
if (!nomorSeri || !tanggalProduksi || !tanggalInspeksi || !tanggalDiterimaKonsumen || !kondisi || !ukuran || !kualitasCetakan) {
alert('Mohon lengkapi data yang diperlukan');
return;
}
// Tambah data inspeksi ke dalam array
dataInspeksi.push({
nomorSeri: nomorSeri,
tanggalProduksi: tanggalProduksi,
tanggalInspeksi: tanggalInspeksi,
tanggalDiterimaKonsumen: tanggalDiterimaKonsumen,
kondisi: kondisi,
ukuran: ukuran,
kualitasCetakan: kualitasCetakan
});
// Tampilkan data inspeksi
tampilkanDataInspeksi();
// Bersihkan form
document.getElementById('form-inspeksi').reset();
}
// Fungsi untuk mengubah data inspeksi materai
function ubahDataInspeksi(index) {
// Ambil data dari array
const inspeksi = dataInspeksi[index];
// Isi form dengan data yang akan diubah
document.getElementById('nomorSeri').value = inspeksi.nomorSeri;
document.getElementById('tanggalProduksi').value = inspeksi.tanggalProduksi;
document.getElementById('tanggalInspeksi').value = inspeksi.tanggalInspeksi;
document.getElementById('tanggalDiterimaKonsumen').value = inspeksi.tanggalDiterimaKonsumen;
document.getElementById('kondisi').value = inspeksi.kondisi;
document.getElementById('ukuran').value = inspeksi.ukuran;
document.getElementById('kualitasCetakan').value = inspeksi.kualitasCetakan;
// Aktifkan tombol ubah dan hapus
document.getElementById('ubah').disabled = false;
document.getElementById('hapus').disabled = false;
// Tambahkan event click pada tombol ubah
document.getElementById('ubah').onclick = function() {
// Ubah data di dalam array
dataInspeksi[index] = {
nomorSeri: document.getElementById('nomorSeri').value,
tanggalProduksi: document.getElementById('tanggalProduksi').value,
tanggalInspeksi: document.getElementById('tanggalInspeksi').value,
tanggalDiterimaKonsumen: document.getElementById('tanggalDiterimaKonsumen').value,
kondisi: document.getElementById('kondisi').value,
ukuran: document.getElementById('ukuran').value,
kualitasCetakan: document.getElementById('kualitasCetakan').value
};
// Tampilkan data inspeksi
tampilkanDataInspeksi();
// Bersihkan form
document.getElementById('form-inspeksi').reset();
// Nonaktifkan tombol ubah dan hapus
document.getElementById('ubah').disabled = true;
document.getElementById('hapus').disabled = true;
}
}
// Fungsi untuk menghapus data inspeksi materai
function hapusDataInspeksi(index) {
// Hapus data di dalam array
dataInspeksi.splice(index, 1);
// Tampilkan data inspeksi
tampilkanDataInspeksi();
// Bersihkan form
document.getElementById('form-inspeksi').reset();
// Nonaktifkan tombol ubah dan hapus
document.getElementById('ubah').disabled = true;
document.getElementById('hapus').disabled = true;
}
// Tampilkan data inspeksi saat halaman di-load
tampilkanDataInspeksi();
Kode ini adalah sebuah program JavaScript yang digunakan untuk memanajemen data inspeksi materai. Terdapat beberapa fungsi utama yaitu:
- Fungsi tampilkanDataInspeksi(): Fungsi ini akan menampilkan data inspeksi materai dalam bentuk tabel. Data inspeksi disimpan dalam sebuah array dataInspeksi, kemudian diteruskan ke dalam elemen HTML dengan id "daftar-inspeksi".
- Fungsi tambahDataInspeksi(): Fungsi ini akan menambahkan data inspeksi baru ke dalam array dataInspeksi. Data baru diambil dari form input dengan id "form-inspeksi". Validasi dilakukan untuk memastikan semua field form sudah terisi sebelum menambahkan data.
- Fungsi ubahDataInspeksi(index): Fungsi ini akan mengubah data inspeksi yang sudah ada pada array dataInspeksi. Parameter index digunakan untuk menentukan posisi data inspeksi yang akan diubah dalam array. Data baru diambil dari form input dengan id "form-inspeksi".
- Fungsi hapusDataInspeksi(index): Fungsi ini akan menghapus data inspeksi pada posisi tertentu dalam array dataInspeksi. Parameter index digunakan untuk menentukan posisi data inspeksi yang akan dihapus dalam array.
Semua fungsi ini dapat dipanggil melalui tombol yang ada pada tabel.
3. CSS
Kode di bawah adalah sebuah kode CSS (Cascading Style Sheets) yang digunakan untuk memformat sebuah tabel. CSS ini akan membuat bingkai tabel menjadi bersebrangan dan lebar tabel akan sepenuhnya mengisi lebar layar.
table{border-collapse:collapse;width:100%}td,th{border:1px solid #ddd;padding:8px;text-align:left}th{background-color:#f2f2f2}
Pada setiap baris data (td), garis bawah akan ditambahkan sebagai pemisah antar baris. Padding 8px juga ditambahkan pada setiap baris untuk memastikan isi data tidak langsung menyentuh bingkai tabel.
Di baris 7, warna latar belakang pada header tabel (th) diterapkan dengan warna #f2f2f2.
Semua elemen teks pada tabel akan diatur untuk berada di sebelah kiri, mengikuti alur baca dari kiri ke kanan.
Kesimpulan
Aplikasi inspeksi produk dapat dibuat menggunakan HTML, CSS, dan JavaScript. HTML digunakan untuk membuat struktur halaman, CSS digunakan untuk mempercantik tampilan halaman, dan JavaScript digunakan untuk menambahkan interaksi dan logika pada aplikasi.
Aplikasi inspeksi produk yang dibuat dengan HTML, CSS, dan JavaScript dapat memberikan kemudahan dan efisiensi dalam melakukan inspeksi produk, seperti mempermudah input data, mempermudah akses data, dan mempermudah proses analisis data.
Aplikasi inspeksi produk yang dibuat menggunakan HTML, CSS, dan JavaScript harus memiliki tampilan yang menarik dan mudah digunakan oleh pengguna.
Fungsionalitas aplikasi harus sesuai dengan kebutuhan dan harus memiliki logika yang jelas. Aplikasi inspeksi produk harus memiliki keamanan dan keamanan data yang baik, sehingga data yang diolah aman dan terjaga privasinya.
Dukungan teknis dan pemeliharaan harus tersedia dan terus ditingkatkan untuk memastikan aplikasi berjalan dengan lancar dan efisien.