KodingMu Docs

Dokumentasi Lengkap

Panduan penggunaan platform pembelajaran KodingMu untuk Siswa dan Guru.

1 Tentang Aplikasi

KodingMu adalah platform pembelajaran pemrograman interaktif yang dirancang untuk siswa sekolah menengah. Aplikasi ini memadukan materi pembelajaran koding (Blockly & Python) dengan elemen gamifikasi (Avatar, Leveling, Mini-game) untuk meningkatkan motivasi belajar.

Aplikasi ini memiliki dua peran pengguna utama:

  • Siswa: Mengakses materi, mengerjakan tugas, dan bermain mini-game.
  • Guru: Membuat kelas, memantau nilai tugas, dan mengelola aktivitas siswa.

2. Panduan Pengguna: Siswa

2.1 Pendaftaran & Login

Pendaftaran

  • Akses halaman register.php.
  • Isi Nama Lengkap, Nama Unik (Username), dan buat PIN (6 angka).

Penting: Ingat PIN Anda karena digunakan untuk login.

Login

Masukan Nama Unik dan PIN. Jika 3x salah memasukkan PIN, akun akan dikunci sementara selama beberapa detik.

flowchart LR A[Mulai] --> B{Punya Akun?} B -- Tidak --> C[Buka Halaman Register] C --> D[Isi Nama & PIN] D --> E[Buat Akun] E --> F[Login] B -- Ya --> F F --> G{Validasi Sukses?} G -- Tidak --> H[Tampilkan Error] H --> F G -- Ya --> I[Masuk Dashboard] style I fill:#dbeafe,stroke:#2563eb,stroke-width:2px

2.2 Dashboard Siswa

Setelah login, siswa akan masuk ke Dashboard Utama. Menu dashboard mencakup:

Profilku

Melihat level, lencana (badges), dan progres belajar.

Kelas

Akses ke manajemen kelas (kelas/siswa_dashboard.php).

Materi

Daftar modul pembelajaran koding.

Avatar

Menu kustomisasi karakter.

2.3 Bergabung ke Kelas

  1. Minta Kode Unik Kelas (6 digit, misal: AB12CD) kepada Guru.
  2. Masuk ke menu Kelas > Gabung Kelas.
  3. Masukkan kode tersebut pada kolom yang tersedia.
  4. Klik "Gabung Sekarang".
  5. Jika berhasil, kelas akan muncul di daftar "Kelas Saya".
flowchart TD A[Mulai] --> B[Minta Kode Unik ke Guru] B --> C[Buka Menu 'Kelas'] C --> D[Input Kode Kelas] D --> E{Validasi Kode?} E -- Invalid --> F[Tampilkan Pesan Error] F --> D E -- Valid --> G[Berhasil Gabung] G --> H[Muncul di Daftar Kelas] style H fill:#dcfce7,stroke:#16a34a,stroke-width:2px

2.4 Mengerjakan Tugas

Di dalam dashboard kelas, lihat bagian "Tugas Perlu Dikerjakan". Tugas diurutkan berdasarkan Deadline terdekat.

Biru: Belum dikerjakan Merah: Terlambat Hijau: Sudah dinilai

Klik tombol "Kerjakan" untuk mulai mengerjakan soal koding.

2.5 Kostumisasi Avatar

Sebagai reward, siswa dapat mengubah tampilan avatar mereka. Beberapa koleksi terkunci ( Locked) dan hanya bisa dibuka jika telah menyelesaikan Misi/Level.

flowchart TD A[Menu Avatar] --> B[Lihat Preview Saat Ini] B --> C{Versi Mobile?} C -- Ya --> D[Klik Tombol Pensil FAB] C -- Tidak --> E[Pilih Koleksi Avatar] D --> E E --> F{Status Terkunci?} F -- Ya --> G[Tampilkan Syarat Misi] F -- Tidak --> H[Pilih Gambar] H --> I[Klik 'Gunakan Avatar'] I --> J[Avatar Diupdate]

2.6 & 2.7 Fitur Tambahan

GrowKoding

Simulasi pertanian yang mengajarkan logika algoritma.

  • • Pertanian: Tanam Jagung, Nanas, Tebu.
  • • Pet: Evolusi hewan peliharaan (Naga Garuda).
  • • Energi: Pulih otomatis pukul 00:00.

Komunitas & Rank

  • • Bank Soal: Buat tantangan koding sendiri.
  • • Adu Koding: Duel 1vs1 (Real-time/Turn-based).
  • • Rank Title: Newbie hingga Legend (berdasarkan MMR).
  • • Sertifikat: Didapat setelah menyelesaikan 4 Level utama.

3. Panduan Pengguna: Guru

3.1 Dashboard Guru

Akses menu Kelas untuk masuk ke Dashboard Guru (kelas/guru_dashboard.php). Informasi tersedia:

  • Total Kelas Aktif: Jumlah kelas yang sedang Anda ajar.
  • Total Siswa: Akumulasi siswa dari semua kelas.
  • Saldo Token: Mata uang virtual untuk membuat kelas baru.

3.2 Sistem Token & Voucher

Guru membutuhkan Token untuk membuka kelas baru. Token bisa didapat via Top Up (Midtrans) atau Voucher.

Paket Jumlah Harga Keterangan
Paket 1 1 Token Rp 10.000 -
Paket 10 10 Token Rp 100.000 Populer
Paket 20 20 Token Rp 190.000 Hemat Rp 10rb

Manajemen Voucher

  1. Masuk ke menu Donasi/Voucher.
  2. Klaim: Masukkan Kode Unik -> Tersimpan di "Dompet Voucher".
  3. Gunakan: Klik "Gunakan" di dompet untuk konversi ke Saldo Token.

3.3 Membuat Kelas Baru

Biaya Pembuatan Kelas
  • Kelas Kecil (Max 30) 2 Token
  • Kelas Sedang (Max 50) 3 Token
  • Kelas Besar (Max 100) 4 Token

Sistem akan memotong token Anda dan men-generate Kode Unik secara otomatis setelah kelas dibuat.

flowchart TD A[Dashboard Guru] --> B{Cek Saldo Token} B -- Tidak Cukup --> C[Top Up Token / Voucher] B -- Cukup --> D[Isi Form Kelas Baru] C --> D D --> E[Klik 'Buka Kelas'] E --> F[Sistem Generate Kode Unik] F --> G[Kelas Aktif] style G fill:#f3e8ff,stroke:#9333ea,stroke-width:2px

3.4 Mengelola Siswa

  • Kode Kelas: Bagikan Kode Unik (misal X7Y9Z1) di kartu kelas kepada siswa.
  • Monitoring: Klik "Detail" pada kartu kelas untuk melihat daftar siswa, nilai tugas, dan progres mereka secara real-time.

4 Dokumentasi Teknis

Bagian ini mencakup detail teknis untuk administrator sistem.

4.1 Arsitektur

Struktur MVC, integrasi API.

4.2 Database

ERD, Skema MySQL, Relasi.

4.3 Deployment

Setup server, Config PHP.