"inf"
Bootstrap 4.1.1 Snippet by danangape

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Presensi Informatika</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script> <style> body { font-family: Arial, sans-serif; padding: 20px; background: #f0f0f0; } h1 { text-align: center; color: #333; } input, button { padding: 10px; margin: 5px; } table { width: 100%; border-collapse: collapse; margin-top: 15px; background: #fff; } th, td { border: 1px solid #aaa; padding: 8px; text-align: center; } th { background: #4CAF50; color: white; } </style> </head> <body> <h1>Presensi Harian - Informatika</h1> <input type="text" id="namaSiswa" placeholder="Nama Siswa"> <button onclick="tandaiHadir()">Hadir</button> <button onclick="unduhExcel()">Unduh Excel</button> <table id="tabelPresensi"> <thead> <tr> <th>Nama Siswa</th> <th>Tanggal</th> <th>Status</th> </tr> </thead> <tbody> </tbody> </table> <script> const tabel = document.getElementById("tabelPresensi").getElementsByTagName("tbody")[0]; function tandaiHadir() { const nama = document.getElementById("namaSiswa").value.trim(); if (!nama) { alert("Silakan masukkan nama siswa."); return; } const tanggal = new Date().toLocaleDateString("id-ID"); const baris = tabel.insertRow(); baris.insertCell(0).innerText = nama; baris.insertCell(1).innerText = tanggal; baris.insertCell(2).innerText = "Hadir"; document.getElementById("namaSiswa").value = ""; } function unduhExcel() { const wb = XLSX.utils.book_new(); const data = [["Nama Siswa", "Tanggal", "Status"]]; for (let i = 0; i < tabel.rows.length; i++) { const row = tabel.rows[i]; const rowData = [ row.cells[0].innerText, row.cells[1].innerText, row.cells[2].innerText ]; data.push(rowData); } const ws = XLSX.utils.aoa_to_sheet(data); XLSX.utils.book_append_sheet(wb, ws, "Presensi"); XLSX.writeFile(wb, "presensi_informatika.xlsx"); } </script> </body> </html>

Questions / Comments: