Pengumuman Kelulusan SMP MUHAMMADIYAH 30 Ngimbang
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pengumuman Kelulusan SMPM 30 Ngimbang</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
background: #f5f5f5;
padding: 20px;
}
.container {
max-width: 600px;
margin: auto;
background: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.footer {
text-align: center;
margin-top: 30px;
font-size: 0.9em;
color: #555;
}
.logo {
max-width: 120px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<h2 style="text-align: center;">Pengumuman Kelulusan<br>SMP Muhammadiyah 30 Ngimbang<br>Tahun Pelajaran 2024/2025</h2>
<input type="file" id="logoInput" accept="image/*"><br><br>
<label>Nama:</label><br>
<input type="text" id="nama" style="width: 100%;"><br><br>
<label>NISN:</label><br>
<input type="text" id="nisn" style="width: 100%;"><br><br>
<button onclick="cariData()">Cek Kelulusan</button>
<div id="hasil" style="margin-top: 20px;"></div>
<button id="cetakBtn" onclick="cetakPDF()" style="display:none; margin-top: 10px;">Cetak Bukti Kelulusan (PDF)</button>
</div>
<div class="footer">
Jl. Pendidikan No. 180 Ngimbang
</div>
<script>
const dataSiswa = [
{ nama: "AHMAD ALVINO EKA RAMDHANI", nis: "104", nisn: "0109592519", status: "LULUS" },
{ nama: "AHMAD FUGUH ERLAN MADANI", nis: "105", nisn: "0098465496", status: "LULUS" },
{ nama: "AHMAD NASRULLAH IBNU KARIM", nis: "106", nisn: "0102095754", status: "LULUS" },
{ nama: "AKHIRUL KHOMSAH MAKRUF HIDAYAT", nis: "107", nisn: "0094837006", status: "LULUS" },
{ nama: "ARJUNA ADITYA PUTRA", nis: "108", nisn: "0091384301", status: "LULUS" },
{ nama: "AUDI LINTANG MELATI", nis: "109", nisn: "0115050042", status: "LULUS" },
{ nama: "AURA KANIA EVIANDA", nis: "110", nisn: "0099729301", status: "LULUS" },
{ nama: "EDI SANTOSO", nis: "112", nisn: "3095176716", status: "LULUS" },
{ nama: "FANY NUR AIZANI", nis: "113", nisn: "0094081748", status: "LULUS" },
{ nama: "FARID ADLI RIZQULLAH", nis: "114", nisn: "0104227235", status: "LULUS" },
{ nama: "FINO AHMAD RIFAIZ", nis: "116", nisn: "0107990890", status: "LULUS" },
{ nama: "INAYATUN KHASANAH", nis: "117", nisn: "3109207252", status: "LULUS" },
{ nama: "MOCH. KEVIN RONALDO", nis: "118", nisn: "0098184075", status: "LULUS" },
{ nama: "MOHAMMAD ADI BAGUS YULIANTO", nis: "119", nisn: "0092837636", status: "LULUS" },
{ nama: "MUHAMMAD ALVIN SAPUTRA", nis: "120", nisn: "0094561468", status: "LULUS" },
{ nama: "MUHAMMAD FADHIL MUBAROQ", nis: "121", nisn: "0103853230", status: "LULUS" },
{ nama: "MUHAMMAD RIZKY SUPRIYANSYAH", nis: "122", nisn: "0095589752", status: "LULUS" },
{ nama: "MUHAMMAD ROBBY FIRMANSYAH", nis: "123", nisn: "0107852903", status: "LULUS" },
{ nama: "RAYHAN AFFANDI BAYHAQI", nis: "124", nisn: "0108598829", status: "LULUS" },
{ nama: "SOLEH ADI SAPUTRO", nis: "142", nisn: "0093181012", status: "LULUS" },
{ nama: "STEVANO SATRIA FEINANTA", nis: "127", nisn: "3094557348", status: "LULUS" },
{ nama: "SYAHRIAL KURNIA", nis: "125", nisn: "0098126550", status: "LULUS" },
{ nama: "TAHTA ELITA", nis: "126", nisn: "0104088641", status: "LULUS" },
];
let logoImage = null;
document.getElementById('logoInput').addEventListener('change', function (e) {
const reader = new FileReader();
reader.onload = function (event) {
logoImage = event.target.result;
};
reader.readAsDataURL(e.target.files[0]);
});
function cariData() {
const nama = document.getElementById('nama').value.trim().toUpperCase();
const nisn = document.getElementById('nisn').value.trim();
const hasilDiv = document.getElementById('hasil');
const siswa = dataSiswa.find(s => s.nama === nama && s.nisn === nisn);
if (siswa) {
hasilDiv.innerHTML = `
<p><strong>Nama:</strong> ${siswa.nama}</p>
<p><strong>NIS:</strong> ${siswa.nis}</p>
<p><strong>NISN:</strong> ${siswa.nisn}</p>
<p><strong>Status Kelulusan:</strong> <span style="color: green">${siswa.status}</span></p>
`;
document.getElementById('cetakBtn').style.display = 'block';
} else {
hasilDiv.innerHTML = '<p style="color:red">Data tidak ditemukan. Pastikan Nama dan NISN sesuai.</p>';
document.getElementById('cetakBtn').style.display = 'none';
}
}
function cetakPDF() {
const { jsPDF } = window.jspdf;
const doc = new jsPDF();
const nama = document.getElementById('nama').value.trim().toUpperCase();
const nisn = document.getElementById('nisn').value.trim();
const siswa = dataSiswa.find(s => s.nama === nama && s.nisn === nisn);
if (!siswa) return;
if (logoImage) {
doc.addImage(logoImage, 'PNG', 15, 10, 30, 30);
}
doc.setFontSize(14);
doc.text("Bukti Kelulusan", 80, 20);
doc.setFontSize(12);
doc.text("SMP Muhammadiyah 30 Ngimbang", 60, 30);
doc.text("Tahun Pelajaran 2024/2025", 65, 37);
doc.setFontSize(11);
doc.text(`Nama: ${siswa.nama}`, 20, 60);
doc.text(`NIS: ${siswa.nis}`, 20, 70);
doc.text(`NISN: ${siswa.nisn}`, 20, 80);
doc.setTextColor(0, 128, 0);
doc.text(`Status Kelulusan: ${siswa.status}`, 20, 90);
doc.setTextColor(0, 0, 0);
doc.text("Ngimbang, 3 Juni 2025", 130, 120);
doc.text("Kepala Sekolah", 140, 130);
doc.text("(...................................)", 130, 160);
doc.setFontSize(10);
doc.text("Jl. Pendidikan No. 180 Ngimbang", 20, 280);
doc.save(`Bukti_Kelulusan_${siswa.nama.replaceAll(' ', '_')}.pdf`);
}
</script>
</body>
</html>
Komentar
Posting Komentar