SIMULATOR BELAJAR WEB DARI PEMULA

Simulator Belajar Web

Interactive Learning

Progress

0%

Selamat datang! Pelajari cara membuat website dari nol hingga jadi. Ikuti setiap tahapan dengan interaktif.

Panduan Interaktif CMS Masterclass: PHP & MySQL

CMSMasterclass Kurikulum Lengkap

Modul Utama

"Belajar Web Development dari Nol sampai Mahir"

Tutorial PHP & MySQL

Panduan Lengkap untuk Pemula

Progress 0%

Kode berhasil disalin!

CBT sekolah

import React, { useState, useEffect } from 'react'; import { initializeApp } from 'firebase/app'; import { getFirestore, collection, addDoc, onSnapshot, query, doc, setDoc } from 'firebase/firestore'; import { getAuth, signInAnonymously, onAuthStateChanged, signInWithCustomToken } from 'firebase/auth'; import { BookOpen, Send, ClipboardList, User, PlusCircle, CheckCircle, Clock, Trash2 } from 'lucide-react'; // Konfigurasi Firebase const firebaseConfig = JSON.parse(__firebase_config); const app = initializeApp(firebaseConfig); const auth = getAuth(app); const db = getFirestore(app); const appId = typeof __app_id !== 'undefined' ? __app_id : 'guru-tugas-simple'; export default function App() { const [user, setUser] = useState(null); const [role, setRole] = useState(null); // 'guru' atau 'siswa' const [tugas, setTugas] = useState([]); const [jawaban, setJawaban] = useState([]); const [view, setView] = useState('landing'); // landing, guru, siswa // State Form Guru const [judulTugas, setJudulTugas] = useState(''); const [deskripsiTugas, setDeskripsiTugas] = useState(''); const [deadline, setDeadline] = useState(''); // State Form Siswa const [namaSiswa, setNamaSiswa] = useState(''); const [teksJawaban, setTeksJawaban] = useState(''); const [selectedTugasId, setSelectedTugasId] = useState(null); // 1. Inisialisasi Auth (Perbaikan: Import dari firebase/auth) useEffect(() => { const initAuth = async () => { try { if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) { await signInWithCustomToken(auth, __initial_auth_token); } else { await signInAnonymously(auth); } } catch (error) { console.error("Auth error:", error); } }; initAuth(); const unsubscribe = onAuthStateChanged(auth, (user) => { setUser(user); }); return () => unsubscribe(); }, []); // 2. Ambil Data (Tugas & Jawaban) useEffect(() => { if (!user) return; const tugasRef = collection(db, 'artifacts', appId, 'public', 'data', 'daftar_tugas'); const unsubscribeTugas = onSnapshot(tugasRef, (snapshot) => { const data = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() })); setTugas(data); }, (err) => console.error("Firestore Error (Tugas):", err)); const jawabanRef = collection(db, 'artifacts', appId, 'public', 'data', 'jawaban_siswa'); const unsubscribeJawaban = onSnapshot(jawabanRef, (snapshot) => { const data = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() })); setJawaban(data); }, (err) => console.error("Firestore Error (Jawaban):", err)); return () => { unsubscribeTugas(); unsubscribeJawaban(); }; }, [user]); // Fungsi Guru: Buat Tugas Baru const handleBuatTugas = async (e) => { e.preventDefault(); if (!user || !judulTugas || !deskripsiTugas) return; try { await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'daftar_tugas'), { judul: judulTugas, deskripsi: deskripsiTugas, tenggat: deadline, createdAt: new Date().toISOString() }); setJudulTugas(''); setDeskripsiTugas(''); setDeadline(''); } catch (err) { console.error(err); } }; // Fungsi Siswa: Kirim Jawaban const handleKirimJawaban = async (e) => { e.preventDefault(); if (!user || !namaSiswa || !teksJawaban || !selectedTugasId) return; try { await addDoc(collection(db, 'artifacts', appId, 'public', 'data', 'jawaban_siswa'), { tugasId: selectedTugasId, nama: namaSiswa, isi: teksJawaban, waktuKumpul: new Date().toISOString() }); setTeksJawaban(''); setSelectedTugasId(null); alert("Jawaban Anda berhasil dikirim!"); } catch (err) { console.error(err); } }; if (view === 'landing') { return (

EduTask Online

Platform sederhana untuk mengelola tugas dan pengumpulan jawaban siswa secara praktis.

); } return (

setView('landing')}>

EduTask

MODE {role}

{role === 'guru' ? (

{/* Form Buat Tugas */}

Buat Tugas

Judul Tugas setJudulTugas(e.target.value)} className="w-full p-3.5 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:bg-white outline-none transition-all" placeholder="Misal: Tugas Matematika Dasar" />

Instruksi setDeskripsiTugas(e.target.value)} className="w-full p-3.5 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:bg-white outline-none transition-all resize-none" placeholder="Jelaskan apa yang harus dikerjakan..." >

Deadline (Opsional) setDeadline(e.target.value)} className="w-full p-3.5 bg-slate-50 border border-slate-200 rounded-xl focus:ring-2 focus:ring-blue-500 focus:bg-white outline-none transition-all" />

{/* Rekap Jawaban */}

Jawaban Masuk

{jawaban.length} Siswa

{jawaban.length === 0 ? (

Belum ada jawaban yang dikirimkan siswa.

) : (

{jawaban.sort((a,b) => new Date(b.waktuKumpul) - new Date(a.waktuKumpul)).map((j) => { const t = tugas.find(task => task.id === j.tugasId); return (

{j.nama}

Tugas: {t?.judul || 'Dihapus'}

{new Date(j.waktuKumpul).toLocaleDateString('id-ID')}

{j.isi}

); })}

)}

) : (

Tugas Aktif

{tugas.length === 0 ? (

Semua Beres!

Saat ini tidak ada tugas yang perlu dikerjakan.

) : (

{tugas.sort((a,b) => new Date(b.createdAt) - new Date(a.createdAt)).map((t) => (

{t.judul}

{t.tenggat && (

Deadline: {t.tenggat}

)}

{t.deskripsi}

{selectedTugasId === t.id && (

Nama Lengkap Siswa setNamaSiswa(e.target.value)} className="w-full p-4 bg-white border border-emerald-100 rounded-2xl focus:ring-2 focus:ring-emerald-500 outline-none transition-all shadow-sm" placeholder="Masukkan nama lengkap Anda..." />

Jawaban / Link Pengumpulan setTeksJawaban(e.target.value)} className="w-full p-4 bg-white border border-emerald-100 rounded-2xl focus:ring-2 focus:ring-emerald-500 outline-none transition-all shadow-sm resize-none" placeholder="Tuliskan jawaban Anda di sini atau tempel link tugas..." >

)}

))}

)}

)}

); }