Belajar Ai

<!DOCTYPE html>

<head>

<title>Mapel Informatika & AI - Lorensius Ndare, S.Kom</title>

<style>

body {

box-sizing: border-box;

}

.fade-in {

animation: fadeIn 0.5s ease-in;

}

@keyframes fadeIn {

from { opacity: 0; transform: translateY(20px); }

to { opacity: 1; transform: translateY(0); }

}

.quiz-option:hover {

transform: translateX(5px);

transition: all 0.3s ease;

}

.correct-answer {

background: linear-gradient(135deg, #10b981, #059669);

color: white;

}

.wrong-answer {

background: linear-gradient(135deg, #ef4444, #dc2626);

color: white;

}

</style>

</head>

<div>

<h1 class="text-2xl font-bold">🖥️ Informatika & AI</h1>

<p class="text-blue-100">Oleh: Lorensius Ndare, S.Kom</p>

</div>

<button onclick="showSection('home')" class="hover:text-blue-200 transition-colors">Beranda</button>

<button onclick="showSection('absen')" class="hover:text-blue-200 transition-colors">Absen</button>

<button onclick="showSection('materi')" class="hover:text-blue-200 transition-colors">Materi</button>

<button onclick="showSection('latihan')" class="hover:text-blue-200 transition-colors">Latihan</button>

</nav>

</div>

</header>

<h2 class="text-4xl font-bold text-gray-800 mb-4">Selamat Datang di Pembelajaran Informatika & AI</h2>

<p class="text-xl text-gray-600 max-w-3xl mx-auto">Platform pembelajaran interaktif untuk memahami konsep dasar informatika dan kecerdasan buatan</p>

</div>

<p class="text-gray-600">Lihat profil dan informasi guru informatika</p>

<button onclick="showSection('guru')" class="mt-4 bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors">Lihat Guru</button>

</div>

<h3 class="text-xl font-semibold mb-3 text-gray-800">Absen Siswa</h3>

<p class="text-gray-600">Input nama dan foto untuk absensi harian</p>

<button onclick="showSection('absen')" class="mt-4 bg-orange-600 text-white px-4 py-2 rounded-lg hover:bg-orange-700 transition-colors">Absen Sekarang</button>

</div>

<h3 class="text-xl font-semibold mb-3 text-gray-800">Materi Lengkap</h3>

<p class="text-gray-600">Pelajari konsep dasar informatika dan AI dengan penjelasan yang mudah dipahami</p>

<button onclick="showSection('materi')" class="mt-4 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">Mulai Belajar</button>

</div>

<h3 class="text-xl font-semibold mb-3 text-gray-800">Kuis Interaktif</h3>

<p class="text-gray-600">Uji pemahaman Anda dengan kuis yang menarik dan mendidik</p>

<button onclick="showSection('quiz')" class="mt-4 bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors">Ikuti Kuis</button>

</div>

<h3 class="text-xl font-semibold mb-3 text-gray-800">Soal Latihan</h3>

<p class="text-gray-600">Asah kemampuan dengan berbagai soal latihan yang menantang</p>

<button onclick="showSection('latihan')" class="mt-4 bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition-colors">Berlatih</button>

</div>

<h3 class="text-2xl font-bold text-gray-800 mb-4">Tentang Pengajar</h3>

<div>

<h4 class="text-xl font-semibold text-gray-800">Lorensius Ndare, S.Kom</h4>

<p class="text-gray-600">Dosen Informatika & Artificial Intelligence</p>

<p class="text-sm text-gray-500 mt-1">Berpengalaman dalam pengembangan sistem AI dan pembelajaran mesin</p>

</div>

</section>

<h2 class="text-3xl font-bold text-gray-800 mb-8">👨‍🏫 Informasi Guru</h2>

</div>

<h3 class="text-3xl font-bold text-gray-800 mb-2">Lorensius Ndare, S.Kom</h3>

<p class="text-xl text-blue-600 mb-4">Guru Informatika & Artificial Intelligence</p>

<h4 class="font-semibold text-blue-800 mb-2">📚 Pendidikan</h4>

<p class="text-sm text-blue-700">S1 Teknik Informatika</p>

<p class="text-sm text-blue-700">Spesialisasi: AI & Machine Learning</p>

</div>

<h4 class="font-semibold text-green-800 mb-2">🏆 Pengalaman</h4>

<p class="text-sm text-green-700">5+ tahun mengajar Informatika</p>

<p class="text-sm text-green-700">Expert dalam Python & AI</p>

</div>

<h4 class="font-semibold text-gray-800 mb-2">📋 Mata Pelajaran yang Diampu</h4>

<span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Algoritma & Pemrograman</span>

<span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">Artificial Intelligence</span>

<span class="bg-green-100 text-green-800 px-3 py-1 rounded-full text-sm">Basis Data</span>

<span class="bg-orange-100 text-orange-800 px-3 py-1 rounded-full text-sm">Jaringan Komputer</span>

</div>

<h3 class="text-xl font-semibold mb-4 text-gray-800">📞 Kontak</h3>

<span class="text-gray-700">lorensius.ndare@sekolah.edu</span>

</div>

</div>

<span class="text-gray-700">Ruang Lab Komputer A.201</span>

</div>

<h3 class="text-xl font-semibold mb-4 text-gray-800">⏰ Jadwal Mengajar</h3>

<span class="font-medium">Senin</span>

<span>08:00 - 10:00 (Kelas XI)</span>

</div>

<span class="font-medium">Selasa</span>

<span>10:00 - 12:00 (Kelas XII)</span>

</div>

<span>13:00 - 15:00 (Kelas X)</span>

</div>

<span class="font-medium">Kamis</span>

</div>

</section>

<h2 class="text-3xl font-bold text-gray-800 mb-8">✅ Absensi Siswa</h2>

<h3 class="text-xl font-semibold mb-4 text-gray-800">📝 Form Absensi</h3>

<div>

<label class="block text-sm font-medium text-gray-700 mb-2">Nama Lengkap</label>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-2">Kelas</label>

<option value="">Pilih Kelas</option>

</select>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-2">Foto Selfie</label>

</div>

📷 Ambil Foto Selfie

</button>

<p class="text-sm text-gray-500 mt-2">Klik untuk mengambil foto selfie</p>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-2">Status Kehadiran</label>

<span class="text-green-700">✅ Hadir</span>

</label>

<span class="text-yellow-700">⏰ Terlambat</span>

</label>

<span class="text-red-700">🤒 Sakit</span>

</label>

</label>

</div>

<div>

<label class="block text-sm font-medium text-gray-700 mb-2">Komentar (Opsional)</label>

<p class="text-xs text-gray-500 mt-1">Contoh: "Terlambat karena macet", "Merasa kurang sehat", dll.</p>

</div>

✅ Submit Absensi

</button>

</form>

</div>

<h3 class="text-xl font-semibold mb-4 text-gray-800">📊 Daftar Absensi Hari Ini</h3>

Tanggal: <span id="currentDate" class="font-semibold"></span>

</div>

</div>

<p>Belum ada siswa yang absen hari ini</p>

</div>

</section>

<h2 class="text-3xl font-bold text-gray-800 mb-8">📚 Materi Pembelajaran</h2>

<h3 class="text-xl font-semibold mb-4 text-blue-700">🖥️ Dasar-Dasar Informatika</h3>

<span>Algoritma dan Struktur Data</span>

</li>

<span>Pemrograman Dasar</span>

</li>

<span>Basis Data dan SQL</span>

</li>

<span>Jaringan Komputer</span>

</li>

<span>Sistem Operasi</span>

</li>

</ul>

</div>

<h3 class="text-xl font-semibold mb-4 text-purple-700">🤖 Artificial Intelligence</h3>

<span>Pengenalan AI dan Machine Learning</span>

</li>

<span>Neural Networks</span>

</li>

<span>Deep Learning</span>

</li>

<span>Natural Language Processing</span>

</li>

<span>Computer Vision</span>

</li>

</ul>

</div>

<h3 class="text-xl font-semibold mb-4 text-gray-800">📖 Materi Detail</h3>

<h4 class="text-lg font-semibold text-blue-700 mb-2">Algoritma dan Struktur Data</h4>

<p class="mb-4">Algoritma adalah langkah-langkah sistematis untuk menyelesaikan masalah. Struktur data adalah cara mengorganisir dan menyimpan data agar dapat diakses dan dimodifikasi secara efisien.</p>

<h4 class="text-lg font-semibold text-purple-700 mb-2">Machine Learning</h4>

<p class="mb-4">Machine Learning adalah cabang AI yang memungkinkan komputer belajar dan membuat keputusan dari data tanpa diprogram secara eksplisit untuk setiap tugas spesifik.</p>

<h5 class="font-semibold text-blue-800 mb-2">💡 Tips Belajar:</h5>

<li>• Praktikkan coding setiap hari</li>

<li>• Pahami konsep sebelum menghafal syntax</li>

<li>• Buat project kecil untuk mengaplikasikan teori</li>

</ul>

</div>

</section>

<h2 class="text-3xl font-bold text-gray-800 mb-8">🧠 Kuis Interaktif</h2>

<h3 class="text-xl font-semibold text-gray-800">Pertanyaan <span id="questionNumber">1</span> dari <span id="totalQuestions">5</span></h3>

</div>

</div>

<button id="prevBtn" onclick="previousQuestion()" class="bg-gray-500 text-white px-4 py-2 rounded-lg hover:bg-gray-600 transition-colors disabled:opacity-50" disabled>Sebelumnya</button>

<button id="nextBtn" onclick="nextQuestion()" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">Selanjutnya</button>

</div>

<h3 class="text-2xl font-bold text-gray-800 mb-4">🎉 Kuis Selesai!</h3>

<button onclick="restartQuiz()" class="bg-green-600 text-white px-6 py-3 rounded-lg hover:bg-green-700 transition-colors">Ulangi Kuis</button>

</div>

</section>

<h2 class="text-3xl font-bold text-gray-800 mb-8">💪 Soal Latihan</h2>

<h3 class="text-xl font-semibold mb-4 text-blue-700">🔢 Latihan Algoritma</h3>

<h4 class="font-semibold text-gray-800">Soal 1: Sorting Algorithm</h4>

<p class="text-gray-600 text-sm mt-1">Buatlah algoritma untuk mengurutkan array [64, 34, 25, 12, 22, 11, 90] menggunakan bubble sort.</p>

<button onclick="showSolution(1)" class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium">Lihat Solusi</button>

</div>

<h4 class="font-semibold text-gray-800">Soal 2: Binary Search</h4>

<p class="text-gray-600 text-sm mt-1">Implementasikan binary search untuk mencari angka 22 dalam array terurut [11, 12, 22, 25, 34, 64, 90].</p>

<button onclick="showSolution(2)" class="mt-2 text-blue-600 hover:text-blue-800 text-sm font-medium">Lihat Solusi</button>

</div>

<h3 class="text-xl font-semibold mb-4 text-purple-700">🤖 Latihan AI</h3>

<h4 class="font-semibold text-gray-800">Soal 1: Linear Regression</h4>

<p class="text-gray-600 text-sm mt-1">Jelaskan konsep linear regression dan berikan contoh implementasinya dalam prediksi harga rumah.</p>

<button onclick="showSolution(3)" class="mt-2 text-purple-600 hover:text-purple-800 text-sm font-medium">Lihat Solusi</button>

</div>

<h4 class="font-semibold text-gray-800">Soal 2: Neural Network</h4>

<p class="text-gray-600 text-sm mt-1">Gambarkan arsitektur neural network sederhana dengan 3 input, 2 hidden layer, dan 1 output.</p>

<button onclick="showSolution(4)" class="mt-2 text-purple-600 hover:text-purple-800 text-sm font-medium">Lihat Solusi</button>

</div>

<h3 class="text-xl font-semibold text-gray-800">💡 Solusi</h3>

</div>

</div>

<h3 class="text-xl font-semibold mb-4 text-gray-800">📝 Kalkulator Sederhana</h3>

<p class="text-gray-600 mb-4">Latihan praktis: Gunakan kalkulator di bawah untuk menghitung kompleksitas algoritma</p>

</div>

</div>

</section>

</main>

<p class="text-gray-400 text-sm">Platform Pembelajaran Interaktif untuk Informatika dan Kecerdasan Buatan</p>

</div>

</footer>

// Quiz Data

const quizData = [

{

question: "Apa yang dimaksud dengan algoritma?",

options: [

"Bahasa pemrograman",

"Langkah-langkah sistematis untuk menyelesaikan masalah",

"Perangkat keras komputer",

"Sistem operasi"

correct: 1

{

question: "Manakah yang bukan termasuk jenis machine learning?",

options: [

"Supervised Learning",

"Unsupervised Learning",

"Reinforcement Learning",

"Database Learning"

correct: 3

{

question: "Apa kepanjangan dari AI?",

options: [

"Automatic Intelligence",

"Artificial Intelligence",

"Advanced Intelligence",

"Algorithmic Intelligence"

correct: 1

{

question: "Struktur data yang menggunakan prinsip LIFO adalah?",

options: [

"Queue",

"Array",

"Stack",

"Linked List"

correct: 2

{

question: "Neural Network terinspirasi dari?",

options: [

"Sistem komputer",

"Jaringan internet",

"Otak manusia",

"Algoritma matematika"

correct: 2

}

];

let currentQuestion = 0;

let score = 0;

let userAnswers = [];

// Navigation

function showSection(sectionName) {

const sections = ['home', 'guru', 'absen', 'materi', 'quiz', 'latihan'];

sections.forEach(section => {

const element = document.getElementById(section);

if (section === sectionName) {

element.classList.remove('hidden');

element.classList.add('fade-in');

} else {

element.classList.add('hidden');

}

});

if (sectionName === 'quiz') {

initQuiz();

} else if (sectionName === 'absen') {

initAttendance();

}

// Quiz Functions

function initQuiz() {

currentQuestion = 0;

score = 0;

userAnswers = [];

document.getElementById('quizContainer').classList.remove('hidden');

document.getElementById('quizResults').classList.add('hidden');

document.getElementById('totalQuestions').textContent = quizData.length;

showQuestion();

}

function showQuestion() {

const question = quizData[currentQuestion];

document.getElementById('questionNumber').textContent = currentQuestion + 1;

document.getElementById('questionText').textContent = question.question;

document.getElementById('score').textContent = score;

const optionsContainer = document.getElementById('optionsContainer');

optionsContainer.innerHTML = '';

question.options.forEach((option, index) => {

const optionDiv = document.createElement('div');

optionDiv.className = 'quiz-option p-3 border rounded-lg cursor-pointer hover:bg-blue-50 transition-all';

optionDiv.innerHTML = `

<span>${option}</span>

</label>

optionDiv.onclick = () => selectAnswer(index);

optionsContainer.appendChild(optionDiv);

});

// Update navigation buttons

document.getElementById('prevBtn').disabled = currentQuestion === 0;

document.getElementById('nextBtn').textContent = currentQuestion === quizData.length - 1 ? 'Selesai' : 'Selanjutnya';

}

function selectAnswer(answerIndex) {

const options = document.querySelectorAll('input[name="answer"]');

options[answerIndex].checked = true;

userAnswers[currentQuestion] = answerIndex;

}

function nextQuestion() {

const selectedAnswer = document.querySelector('input[name="answer"]:checked');

if (selectedAnswer) {

const answerIndex = parseInt(selectedAnswer.value);

userAnswers[currentQuestion] = answerIndex;

if (answerIndex === quizData[currentQuestion].correct) {

score += 20;

}

if (currentQuestion < quizData.length - 1) {

currentQuestion++;

showQuestion();

} else {

showResults();

}

function previousQuestion() {

if (currentQuestion > 0) {

currentQuestion--;

showQuestion();

// Restore previous answer if exists

if (userAnswers[currentQuestion] !== undefined) {

const options = document.querySelectorAll('input[name="answer"]');

options[userAnswers[currentQuestion]].checked = true;

}

function showResults() {

document.getElementById('quizContainer').classList.add('hidden');

document.getElementById('quizResults').classList.remove('hidden');

document.getElementById('finalScore').textContent = `${score}/100`;

let message = '';

if (score >= 80) {

message = 'Excellent! Anda menguasai materi dengan sangat baik! 🌟';

} else if (score >= 60) {

message = 'Good job! Pemahaman Anda cukup baik, terus belajar! 👍';

} else {

message = 'Keep learning! Pelajari kembali materi untuk hasil yang lebih baik! 📚';

}

document.getElementById('scoreMessage').textContent = message;

}

function restartQuiz() {

initQuiz();

}

// Exercise Solutions

const solutions = {

1: `

<h4 class="font-semibold mb-2">Bubble Sort Algorithm:</h4>

function bubbleSort(arr) {

let n = arr.length;

for (let i = 0; i < n-1; i++) {

for (let j = 0; j < n-i-1; j++) {

if (arr[j] > arr[j+1]) {

// Swap elements

let temp = arr[j];

arr[j] = arr[j+1];

arr[j+1] = temp;

}

return arr;

}

// Input: [64, 34, 25, 12, 22, 11, 90]

// Output: [11, 12, 22, 25, 34, 64, 90]</pre>

<p class="mt-2 text-sm text-gray-600">Kompleksitas waktu: O(n²), Kompleksitas ruang: O(1)</p>

2: `

<h4 class="font-semibold mb-2">Binary Search Algorithm:</h4>

function binarySearch(arr, target) {

let left = 0;

let right = arr.length - 1;

while (left <= right) {

let mid = Math.floor((left + right) / 2);

if (arr[mid] === target) {

return mid; // Found at index mid

} else if (arr[mid] < target) {

left = mid + 1;

} else {

right = mid - 1;

}

return -1; // Not found

}

// Input: [11, 12, 22, 25, 34, 64, 90], target: 22

// Output: 2 (index of 22)</pre>

<p class="mt-2 text-sm text-gray-600">Kompleksitas waktu: O(log n), Kompleksitas ruang: O(1)</p>

3: `

<h4 class="font-semibold mb-2">Linear Regression Concept:</h4>

<p class="mb-3">Linear regression adalah algoritma supervised learning yang memprediksi nilai kontinu berdasarkan hubungan linear antara variabel input dan output.</p>

<h5 class="font-medium mb-2">Contoh Prediksi Harga Rumah:</h5>

<li>Input: Luas rumah, jumlah kamar, lokasi</li>

<li>Output: Harga rumah</li>

<li>Formula: y = mx + b</li>

</ul>

# Contoh implementasi sederhana

import numpy as np

from sklearn.linear_model import LinearRegression

# Data training

X = [[100], [150], [200], [250]] # Luas rumah

y = [300000, 450000, 600000, 750000] # Harga

model = LinearRegression()

model.fit(X, y)

# Prediksi harga rumah 180m²

predicted_price = model.predict([[180]])

print(f"Prediksi harga: {predicted_price[0]}")</pre>

4: `

<h4 class="font-semibold mb-2">Neural Network Architecture:</h4>

<text x="35" y="20" class="text-xs font-semibold">Input</text>

<text x="125" y="20" class="text-xs font-semibold">Hidden 1</text>

<text x="225" y="20" class="text-xs font-semibold">Hidden 2</text>

<text x="335" y="20" class="text-xs font-semibold">Output</text>

</svg>

</div>

<p class="text-sm text-gray-600 mb-2">Arsitektur: 3 input → 4 neurons → 3 neurons → 1 output</p>

<li>Input layer: 3 neurons (fitur input)</li>

<li>Hidden layer 1: 4 neurons dengan aktivasi ReLU</li>

<li>Hidden layer 2: 3 neurons dengan aktivasi ReLU</li>

<li>Output layer: 1 neuron dengan aktivasi sigmoid/linear</li>

</ul>

};

function showSolution(solutionId) {

document.getElementById('solutionContent').innerHTML = solutions[solutionId];

document.getElementById('solutionModal').classList.remove('hidden');

}

function closeSolution() {

document.getElementById('solutionModal').classList.add('hidden');

}

// Calculator Functions

let calcDisplay = document.getElementById('calcDisplay');

let currentInput = '0';

let shouldResetDisplay = false;

function updateDisplay() {

calcDisplay.value = currentInput;

}

function appendToCalc(value) {

if (shouldResetDisplay) {

currentInput = '';

shouldResetDisplay = false;

}

if (currentInput === '0' && value !== '.') {

currentInput = value;

} else {

currentInput += value;

}

updateDisplay();

}

function clearCalc() {

currentInput = '0';

updateDisplay();

}

function deleteLast() {

if (currentInput.length > 1) {

currentInput = currentInput.slice(0, -1);

} else {

currentInput = '0';

}

updateDisplay();

}

function calculateResult() {

try {

// Replace display symbols with actual operators

let expression = currentInput.replace(/×/g, '*').replace(/÷/g, '/');

let result = eval(expression);

currentInput = result.toString();

shouldResetDisplay = true;

updateDisplay();

} catch (error) {

currentInput = 'Error';

shouldResetDisplay = true;

updateDisplay();

}

// Attendance Functions

let attendanceData = [];

function initAttendance() {

// Set current date

const today = new Date();

const dateString = today.toLocaleDateString('id-ID', {

weekday: 'long',

year: 'numeric',

month: 'long',

day: 'numeric'

});

document.getElementById('currentDate').textContent = dateString;

// Load existing attendance data

displayAttendanceList();

}

// Handle photo upload

document.getElementById('studentPhoto').addEventListener('change', function(e) {

const file = e.target.files[0];

if (file) {

const reader = new FileReader();

reader.onload = function(e) {

document.getElementById('previewImage').src = e.target.result;

document.getElementById('photoPreview').classList.remove('hidden');

};

reader.readAsDataURL(file);

}

});

// Handle form submission

document.getElementById('absenForm').addEventListener('submit', function(e) {

e.preventDefault();

const name = document.getElementById('studentName').value;

const studentClass = document.getElementById('studentClass').value;

const photo = document.getElementById('previewImage').src;

const attendance = document.querySelector('input[name="attendance"]:checked')?.value;

const comment = document.getElementById('studentComment').value;

if (!name || !studentClass || !attendance) {

alert('Mohon lengkapi semua data!');

return;

}

if (!photo || photo === '') {

alert('Mohon ambil foto selfie terlebih dahulu!');

return;

}

// Show loading state

const submitBtn = document.querySelector('#absenForm button[type="submit"]');

const originalText = submitBtn.innerHTML;

submitBtn.innerHTML = '⏳ Mengirim ke Database...';

submitBtn.disabled = true;

// Prepare data for database submission

const attendanceRecord = {

id: Date.now(),

name: name,

class: studentClass,

photo: photo,

status: attendance,

comment: comment || '',

timestamp: new Date().toISOString(),

time: new Date().toLocaleTimeString('id-ID'),

date: new Date().toLocaleDateString('id-ID')

};

// Simulate database submission (replace with actual API call)

submitToDatabase(attendanceRecord)

.then(response => {

// Add to local attendance data

attendanceData.push(attendanceRecord);

// Reset form

document.getElementById('absenForm').reset();

document.getElementById('photoPreview').classList.add('hidden');

document.getElementById('previewImage').src = '';

// Update display

displayAttendanceList();

// Show success message

showAttendanceSuccess(name, attendance, true);

})

.catch(error => {

console.error('Database submission error:', error);

// Still save locally as backup

attendanceData.push(attendanceRecord);

displayAttendanceList();

showAttendanceSuccess(name, attendance, false);

})

.finally(() => {

// Reset button state

submitBtn.innerHTML = originalText;

submitBtn.disabled = false;

});

function displayAttendanceList() {

const listContainer = document.getElementById('attendanceList');

const emptyMessage = document.getElementById('emptyAttendance');

if (attendanceData.length === 0) {

listContainer.innerHTML = '';

emptyMessage.classList.remove('hidden');

return;

}

emptyMessage.classList.add('hidden');

listContainer.innerHTML = attendanceData.map(record => {

const statusColors = {

'hadir': 'bg-green-100 text-green-800',

'terlambat': 'bg-yellow-100 text-yellow-800',

'sakit': 'bg-red-100 text-red-800',

'izin': 'bg-blue-100 text-blue-800'

};

const statusIcons = {

'hadir': '✅',

'terlambat': '⏰',

'sakit': '🤒',

'izin': '📝'

};

return `

<h4 class="font-semibold text-gray-800">${record.name}</h4>

<p class="text-sm text-gray-600">Kelas: ${record.class}</p>

${record.comment ? `<p class="text-sm text-gray-500 mt-1 italic">"${record.comment}"</p>` : ''}

</div>

${statusIcons[record.status]} ${record.status.charAt(0).toUpperCase() + record.status.slice(1)}

</span>

<p class="text-xs text-gray-500 mt-1">${record.time}</p>

<div class="text-xs text-blue-600 mt-1">📊 Database</div>

</div>

}).join('');

}

// Database submission function

async function submitToDatabase(attendanceData) {

// Simulate API call to your database

// Replace this with your actual database endpoint

const API_ENDPOINT = 'https://your-api-endpoint.com/attendance';

try {

// Simulate network delay

await new Promise(resolve => setTimeout(resolve, 1500));

// In real implementation, use fetch to send data to your server:

const response = await fetch(API_ENDPOINT, {

method: 'POST',

headers: {

'Content-Type': 'application/json',

'Authorization': 'Bearer your-token-here'

body: JSON.stringify(attendanceData)

});

if (!response.ok) {

throw new Error(`HTTP error! status: ${response.status}`);

}

return await response.json();

// For demo purposes, simulate successful response

console.log('Data yang akan dikirim ke database:', attendanceData);

return {

success: true,

message: 'Attendance recorded successfully',

id: attendanceData.id

};

} catch (error) {

console.error('Error submitting to database:', error);

throw error;

}

function showAttendanceSuccess(name, status, databaseSuccess = true) {

// Create success notification

const notification = document.createElement('div');

const bgColor = databaseSuccess ? 'bg-green-500' : 'bg-yellow-500';

const icon = databaseSuccess ? '✅' : '⚠️';

const message = databaseSuccess

? `Absensi ${name} berhasil disimpan ke database!`

: `Absensi ${name} disimpan lokal (database tidak tersedia)`;

notification.className = `fixed top-4 right-4 ${bgColor} text-white px-6 py-3 rounded-lg shadow-lg z-50 fade-in`;

notification.innerHTML = `

<div>

<div class="font-semibold">${message}</div>

${databaseSuccess ? '<div class="text-xs opacity-90">Data tersimpan di server</div>' : '<div class="text-xs opacity-90">Akan dikirim ulang saat koneksi tersedia</div>'}

</div>

document.body.appendChild(notification);

// Remove notification after 4 seconds

setTimeout(() => {

notification.remove();

}, 4000);

}

// Initialize the page

document.addEventListener('DOMContentLoaded', function() {

showSection('home');

});

</script>

</html>

Cari Blog Ini

Inpirasi Ai

Belajar Ai

Komentar

Posting Komentar