bedah aplikasi inventaris kelas

Bedah Kode

1. Struktur Layout 2. Header & Branding 3. Body & Konten 4. Database (Storage) 5. Script & Logika

Analisis Arsitektur

E-Inventaris Kelas Web App

Dokumentasi teknis mengenai komponen, fungsi, dan logika di balik aplikasi inventaris.

1. Struktur Layout

Fungsi & Peran:

Layout berfungsi sebagai wadah utama yang menjaga konsistensi posisi elemen. Menggunakan sistem grid Tailwind CSS untuk memastikan tampilan tetap rapi di layar HP (Mobile) maupun Desktop.

Tampilan Visual:

• Latar belakang netral (Slate-50) untuk fokus pada konten.
• Container terpusat dengan padding responsif.
• Penggunaan kartu (cards) dengan border halus.

Snippet Kode Layout:

<main class="container mx-auto px-4 py-8">
  <!-- Grid sistem untuk statistik -->
  <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
    <!-- Konten di sini -->
  </div>
</main>

2. Header & Branding

Fungsi & Peran:

Memberikan identitas aplikasi dan navigasi utama. Bagian ini juga menampilkan informasi dinamis seperti tanggal hari ini menggunakan JavaScript.

Tampilan Visual:

• Warna primer Blue-700 yang memberikan kesan profesional/instansional.
• Sticky position (tetap di atas saat scroll).
• Ikon FontAwesome sebagai penanda visual.

Snippet Kode Header:

<nav class="bg-blue-700 text-white sticky top-0">
  <div class="flex justify-between">
    <h1>E-Inventaris</h1>
    <span id="current-date"></span>
  </div>
</nav>

3. Body (Tabel & Filter)

Fungsi & Peran:

Pusat data di mana pengguna bisa melihat list barang, mencari nama barang secara *real-time*, dan memfilter kondisi.

Tampilan Visual:

• Badge warna (Hijau/Kuning/Merah) untuk status kondisi.
• Tabel dengan baris bergantian (striped) atau hover effect.
• Input pencarian dengan ikon kaca pembesar.

Snippet Kode Filter:

<input type="text" id="search-input" 
   placeholder="Cari nama barang..." />
<select id="filter-condition">
   <option>Semua Kondisi</option>
</select>

4. Database (Local Storage)

Fungsi & Peran:

Karena ini aplikasi murni Client-Side, data disimpan di memori browser pengguna. Data tidak akan hilang kecuali cache browser dihapus.

Note: Menggunakan format JSON untuk mengubah objek JavaScript menjadi teks yang bisa disimpan.

Logic Penyimpanan Data:

// Mengambil data dari storage
let inventory = JSON.parse(
  localStorage.getItem('classroom_inventory')
) || [];

// Menyimpan data ke storage
function saveToStorage() {
  localStorage.setItem(
    'classroom_inventory', 
    JSON.stringify(inventory)
  );
}

5. Script & Logika (CRUD)

Alur Kerja (Logic Flow):

C Create

Fungsi onsubmit menambah item baru.

R Read

Fungsi renderInventory menampilkan tabel.

U Update

Fungsi editItem mengubah data lama.

D Delete

Fungsi deleteItem menghapus data.

Contoh Logika Filter:

function applyFilters() {
  const searchTerm = searchInput.value.toLowerCase();
  const filtered = inventory.filter(item => {
    return item.name.toLowerCase().includes(searchTerm);
  });
  renderInventory(filtered);
}

© 2024 Arsitektur Aplikasi E-Inventaris Kelas. Dibuat dengan Tailwind CSS.