dasar2 html

Modul Digital: Web App Sekolah

Membangun Solusi Digital untuk Sekolah

Halo calon pengembang web! Di modul ini, kamu akan belajar cara mengolah data sekolah (seperti inventaris kelas atau daftar buku) menjadi sebuah aplikasi web sederhana. Kita akan menggunakan kekuatan HTML dan bantuan cerdas dari Gemini AI.

Capaian Pembelajaran

Memanfaatkan sumber data terbuka, terpercaya, dan legal untuk mengolah data menjadi keputusan atau aplikasi yang efektif bagi sekolah.

Target Proyek

Membuat aplikasi "Inventaris Barang Kelas" atau "Daftar Piket Interaktif" berbasis web.

Unit 1: Data Sekolah yang Terpercaya

Sebelum membuat aplikasi, kita harus memastikan data kita Valid dan Legal.

Apa itu Data Terpercaya & Legal?

• Akurat: Sesuai dengan kondisi nyata di sekolah.
• Legal: Memiliki izin untuk digunakan (Data publik sekolah, bukan data pribadi rahasia).
• Terbuka: Dapat diakses oleh warga sekolah yang berkepentingan.

Contoh Data Proyek Sekolah:

• Daftar inventaris (Meja, kursi, proyektor).
• Jadwal piket kelas harian.
• Daftar buku di pojok baca kelas.

Unit 2: Kerangka HTML untuk Aplikasi

HTML digunakan untuk membuat tabel, tombol, dan judul di aplikasi sekolahmu.

Elemen Penting Proyek:

<table>

Untuk menampilkan data inventaris.

<input>

Untuk menambah data baru.

<button>

Untuk menjalankan perintah (Simpan/Hapus).

Contoh Tabel Data:

<table border="1">
  <tr>
    <th>Nama Barang</th>
    <th>Jumlah</th>
  </tr>
  <tr>
    <td>Spidol</td>
    <td>5</td>
  </tr>
</table>

Unit 3: Berkolaborasi dengan Gemini AI

Cara Meminta Bantuan Gemini:

Berikan "Prompt" yang spesifik untuk mendapatkan kode aplikasi yang bagus.

Contoh Prompt:

"Gemini, bantu saya buatkan kode HTML dan JavaScript sederhana untuk aplikasi 'Inventaris Kelas'. Saya ingin ada tabel daftar barang, input nama barang, dan tombol tambah data. Buat tampilannya rapi dengan CSS."

Setelah Gemini memberikan kode, bacalah penjelasannya agar kamu paham cara kerjanya!

Proyek: Aplikasi Solusi Sekolah

Buatlah aplikasi web satu halaman yang memecahkan masalah kecil di kelasmu.

Algoritma Aplikasi (Urutan Kerja):

• 1. Mulai Aplikasi.
• 2. Tampilkan Judul & Form Input.
• 3. User memasukkan Nama Barang & Kondisi.
• 4. Klik Tombol "Tambah".
• 5. Sistem memasukkan data ke dalam Tabel di layar.
• 6. Selesai.

Inspirasi Ide:

• Digital Library Kelas
• Monitoring Piket Harian
• Inventaris Alat Olahraga

Catatan Penting: Gunakan data asli dari lingkungan sekolahmu agar aplikasi ini benar-benar bermanfaat!

© 2024 Modul Digital Sekolah - Informatikawan Muda.