View Materi

<!DOCTYPE html>

<head>

<title>Sistem Pembuatan Sertifikat Otomatis</title>

<style>

/* ==================== STYLING UMUM & FONT ==================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,400&family=Tangerine:wght@400;700&display=swap');

body {

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

background-color: #f4f7f6;

color: #333;

padding: 20px;

margin: 0;

}

.container {

max-width: 800px;

margin: 0 auto;

background: white;

padding: 30px;

border-radius: 10px;

box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

}

h2 { text-align: center; color: #14213d; border-bottom: 2px solid #14213d; padding-bottom: 10px; margin-bottom: 30px; }

h3 { color: #7b2cbf; margin-top: 25px; margin-bottom: 10px; }

.form-group { margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 15px; }

.form-field { flex: 1 1 calc(50% - 15px); display: flex; flex-direction: column; min-width: 300px; }

.form-field.full-width { flex: 1 1 100%; min-width: 100%; }

label { font-weight: 600; margin-bottom: 5px; color: #555; }

input[type="text"], input[type="date"], input[type="number"], select {

padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 1em; box-sizing: border-box; width: 100%;

}

.btn-submit { background-color: #4CAF50; }

.btn-action { margin: 5px; }

.btn-submit, .btn-action {

padding: 12px 25px; color: white; border: none; border-radius: 5px;

cursor: pointer; font-size: 1.1em; transition: background-color 0.3s;

}

.btn-submit:hover { background-color: #45a049; }

.btn-action:hover { opacity: 0.8; }

/* Centering Tombol */

.form-actions { text-align: center; margin-top: 20px; }

.form-actions.no-print { text-align: center; margin-top: 20px; margin-bottom: 20px; }

/* ==================== STYLING SERTIFIKAT TAMPILAN LAYAR ==================== */

#certificate-output { display: none; margin-top: 20px; padding: 0; }

.certificate-container {

width: 29.7cm;

min-height: 21cm;

margin: 20px auto;

padding: 0;

background-color: white;

box-shadow: 0 0 10px rgba(0,0,0,0.5);

position: relative; /* PENTING: Untuk posisi watermark */

/* WAJIB GANTI URL DENGAN URL GAMBAR BACKGROUND ANDA */

background-image: url('https://1.bp.blogspot.com/-wotnI3yKuIo/XvH3mZJ4cYI/AAAAAAAAFRY/wD9IBcu242sULfTfZqcgo21FXykoHmDXQCLcBGAsYHQ/s1600/FRAME+SERTIFIKAT+4.jpg');

background-size: cover;

background-repeat: no-repeat;

background-position: center center;

}

/* ===== WATERMARK LOGO ===== */

.certificate-watermark {

/* WAJIB GANTI DENGAN URL LOGO TRANSPARAN ANDA */

background-image: url('URL_GAMBAR_LOGO_ANDA');

background-size: 50%;

background-repeat: no-repeat;

background-position: center center;

opacity: 0.1; /* Atur tingkat transparansi */

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 1; /* Di bawah teks */

}

/* ========================== */

.certificate-border {

border: 25px solid #14213d;

padding: 40px;

min-height: calc(21cm - 25px - 25px - 40px - 40px);

background: none;

box-sizing: border-box;

position: relative; /* PENTING: Untuk z-index */

z-index: 2; /* Di atas watermark */

}

/* [Gaya Isi Sertifikat] */

.header-text { text-align: center; color: #14213d; margin-top: 20px; }

.header-text h1 { font-family: 'Playfair Display', serif; font-size: 3.5em; margin: 10px 0 5px 0; letter-spacing: 2px; }

.header-text h2 { font-family: 'Tangerine', cursive; font-size: 3em; margin: 0; color: #7b2cbf; font-weight: 400; }

.title-pkj { font-size: 1.2em; font-weight: bold; margin: 20px 0 5px 0; }

.student-name { text-align: center; font-family: 'Tangerine', cursive; font-size: 4.5em; color: #7b2cbf; margin: 20px 0 30px 0; font-weight: 700; line-height: 1.1; }

.data-section { padding: 0 100px; }

.data-row { display: flex; margin-bottom: 5px; line-height: 1.5; }

.data-label { min-width: 250px; font-weight: normal; color: #333; }

.data-colon { margin-right: 10px; font-weight: bold; }

.data-value { flex-grow: 1; font-weight: bold; color: #14213d; }

.data-detail { text-align: center; margin-top: 20px; line-height: 1.6; }

.result-text { text-align: center; margin-top: 30px; font-size: 1.2em; }

.result-text strong { font-size: 1.4em; color: #14213d; border-bottom: 3px solid #14213d; padding-bottom: 3px; margin-left: 5px; }

.signature-section { display: flex; justify-content: space-around; margin-top: 70px; text-align: center; padding: 0 50px; }

.signer-name { margin-top: 50px; font-weight: bold; color: #14213d; border-bottom: 1px solid #14213d; padding-bottom: 2px; display: inline-block; }

.signer-title { font-size: 0.9em; color: #555; }

/* ==================== MEDIA QUERY UNTUK CETAK (SOLUSI FULL PAGE + WATERMARK) ==================== */

@media print {

/* 1. Atur halaman ke margin nol */

@page {

size: A4 landscape;

margin: 0 !important;

}

/* 2. Atur body ke dimensi A4 penuh */

body {

padding: 0 !important;

margin: 0 !important;

width: 29.7cm !important;

height: 21cm !important;

display: block;

}

.container, .no-print { display: none !important; }

#certificate-output {

display: block;

width: 29.7cm !important;

height: 21cm !important;

margin: 0 !important;

padding: 0 !important;

}

/* 3. Paksa container ke dimensi A4 penuh dan paksa cetak background */

.certificate-container {

box-shadow: none !important;

border: none !important;

width: 29.7cm !important;

height: 21cm !important; /* Disesuaikan ke 21cm */

min-height: 21cm !important;

margin: 0 !important;

/* WAJIB GANTI URL DENGAN URL GAMBAR BACKGROUND ANDA */

background-image: url('https://1.bp.blogspot.com/-wotnI3yKuIo/XvH3mZJ4cYI/AAAAAAAAFRY/wD9IBcu242sULfTfZqcgo21FXykoHmDXQCLcBGAsYHQ/s1600/FRAME+SERTIFIKAT+4.jpg') !important;

background-size: cover !important;

background-repeat: no-repeat !important;

background-position: center center !important;

/* HACKING: Memaksa browser mencetak warna/gambar latar */

-webkit-print-color-adjust: exact !important;

print-color-adjust: exact !important;

}

/* WATERMARK CETAK */

.certificate-watermark {

opacity: 0.1 !important;

/* WAJIB GANTI DENGAN URL LOGO TRANSPARAN ANDA */

background-image: url('https://sipas.sisfo.unjani.ac.id/assets/images/logo.png') !important;

background-size: 50% !important;

-webkit-print-color-adjust: exact !important;

print-color-adjust: exact !important;

}

/* 4. Sesuaikan area teks di dalam container */

.certificate-border {

border: none !important;

background: none !important;

padding: 30px !important;

width: 100% !important;

height: 100% !important;

box-sizing: border-box !important;

}

</style>

</head>

<body>

<h2>Input Data Sertifikat PKL</h2>

<h3>Data Peserta</h3>

<div class="form-field full-width"><label for="nama">Nama Lengkap Siswa</label><input type="text" id="nama" name="nama" required placeholder="Contoh: Zaskiya Maharrani Cantika" value="Zaskiya Maharrani Cantika"></div>

<div class="form-field"><label for="tempatLahir">Tempat Lahir</label><input type="text" id="tempatLahir" name="tempatLahir" required value="Cimahi"></div>

<div class="form-field"><label for="tanggalLahir">Tanggal Lahir</label><input type="date" id="tanggalLahir" name="tanggalLahir" required value="2007-02-17"></div>

<div class="form-field"><label for="nis">Nomor Induk Siswa (NIS)</label><input type="number" id="nis" name="nis" required value="102211161"></div>

<div class="form-field"><label for="keahlian">Kompetensi Keahlian</label><input type="text" id="keahlian" name="keahlian" required value="Rekayasa Perangkat Lunak"></div>

<div class="form-field full-width"><label for="sekolah">Satuan Pendidikan</label><input type="text" id="sekolah" name="sekolah" required value="SMK PGRI 1 CIMAHI"></div>

</div>

<h3>Data Pelaksanaan PKL</h3>

<div class="form-field full-width"><label for="durasi">Durasi PKL (Teks)</label><input type="text" id="durasi" name="durasi" required value="2 (tiga) bulan"></div>

<div class="form-field"><label for="tglMulai">Tanggal Mulai PKL</label><input type="date" id="tglMulai" name="tglMulai" required value="2024-08-01"></div>

<div class="form-field"><label for="tglSelesai">Tanggal Selesai PKL</label><input type="date" id="tglSelesai" name="tglSelesai" required value="2024-10-17"></div>

<div class="form-field full-width"><label for="instansi">Unit Instansi PKL</label><input type="text" id="instansi" name="instansi" required value="Sistem Informasi UNJANI"></div>

<label for="hasil">Hasil (Penilaian)</label>

<select id="hasil" name="hasil" required><option value="BAIK" selected>BAIK</option><option value="SANGAT BAIK">SANGAT BAIK</option><option value="CUKUP">CUKUP</option></select>

</div>

<h3>Data Penandatangan</h3>

<div class="form-field"><label for="pembimbing">Nama Pembimbing</label><input type="text" id="pembimbing" name="pembimbing" required value="Rohana"></div>

<div class="form-field"><label for="jabatanPembimbing">Jabatan Pembimbing</label><input type="text" id="jabatanPembimbing" name="jabatanPembimbing" required value="Pembimbing"></div>

<div class="form-field"><label for="kaSisfo">Nama Kepala (Ka. Sisfo)</label><input type="text" id="kaSisfo" name="kaSisfo" required value="Hadi Winarto,ST"></div>

<div class="form-field"><label for="jabatanKaSisfo">Jabatan Kepala</label><input type="text" id="jabatanKaSisfo" name="jabatanKaSisfo" required value="Ka. Sisfo unjani"></div>

</div>

<button type="submit" class="btn-submit">Proses & Tampilkan Sertifikat</button>

</div>

</form>

</div>

<button class="btn-action" style="background-color: #2196F3;" onclick="window.print()">????? Cetak Sertifikat</button>

<button class="btn-action" style="background-color: #f44336;" onclick="window.location.reload()">?? Buat Sertifikat Baru</button>

</div>

<h1>SERTIFIKAT</h1>

<h2>Penghargaan</h2>

<p class="title-pkj">PRAKTEK KERJA LAPANGAN</p>

<p>Dengan Bangga Diberikan Kepada :</p>

</div>

<div class="data-label">Tempat tanggal lahir</div>

</div>

<div class="data-label">Nomor Induk Siswa</div>

</div>

<div class="data-label">Kopetensi keahlian</div>

</div>

<div class="data-label">Satuan pendidikan</div>

</div>

Telah melaksanakan praktek kerja lapangan PKL **selama <span id="cert-durasi"></span>**

<br>dari tanggal **<span id="cert-tgl-mulai"></span> S/D <span id="cert-tgl-selesai"></span>**

<br>di **<span id="cert-instansi"></span>**

</p>

</div>

Dengan hasil: <strong id="cert-hasil"></strong>

</div>

<div>

</div>

<div>

</div>

// ******************************************************************************

// ?? PENTING: GANTI DENGAN URL WEB APP GOOGLE APPS SCRIPT ANDA DI SINI!

// ******************************************************************************

const SPREADSHEET_URL = " https://script.google.com/macros/s/AKfycbzhOPM4BQ297fc-F07pzW0RxtRUpLqEoqpkoWsdvbayL8YbRI8IfJZ5w829AXLx3CAzTA/exec";

document.getElementById('sertifikatForm').addEventListener('submit', function(event) {

event.preventDefault();

const formData = new FormData(this);

const data = Object.fromEntries(formData.entries());

// --- A. Kirim Data ke Google Spreadsheet (AJAX/Fetch) ---

fetch(SPREADSHEET_URL, {

method: 'POST',

body: formData,

})

.then(response => {

console.log('Data sukses dikirim ke Spreadsheet. Cek Google Spreadsheet Anda!');

})

.catch(error => {

console.error('Error saat mengirim data ke Spreadsheet:', error);

alert('PERINGATAN! Gagal menyimpan data ke Spreadsheet. Cek console log & pastikan URL Apps Script sudah benar.');

});

// --- B. Proses Lokal: Format Tanggal & Update Sertifikat ---

const formatDate = (dateString) => {

if (!dateString) return '';

const options = {day: 'numeric', month: 'long', year: 'numeric'};

return new Date(dateString + 'T00:00:00').toLocaleDateString('id-ID', options);

};

document.getElementById('cert-nama').textContent = data.nama;

document.getElementById('cert-ttl').textContent = `${data.tempatLahir}, ${formatDate(data.tanggalLahir)}`;

document.getElementById('cert-nis').textContent = data.nis;

document.getElementById('cert-keahlian').textContent = data.keahlian;

document.getElementById('cert-sekolah').textContent = data.sekolah;

document.getElementById('cert-hasil').textContent = data.hasil.toUpperCase();

document.getElementById('cert-durasi').textContent = data.durasi;

document.getElementById('cert-tgl-mulai').textContent = formatDate(data.tglMulai);

document.getElementById('cert-tgl-selesai').textContent = formatDate(data.tglSelesai);

document.getElementById('cert-instansi').textContent = data.instansi;

document.getElementById('cert-pembimbing').textContent = data.pembimbing;

document.getElementById('cert-jabatan-pembimbing').textContent = data.jabatanPembimbing;

document.getElementById('cert-ka-sisfo').textContent = data.kaSisfo;

document.getElementById('cert-jabatan-ka-sisfo').textContent = data.jabatanKaSisfo;

// --- C. Tampilkan Hasil ---

document.getElementById('input-form').style.display = 'none';

document.getElementById('certificate-output').style.display = 'block';

});

</script>

</body>

</html>

‹ › ×

Selamat Datang di 💬 Saling Sapa

💬 Obrolan

Loading...

Saving...