Membuat Fitur Print Identitas Siswa Menggunakan HTML2Pdf || Biodata Siswa #10
Assalamu'alikum Wr.Wb
Salam Dan Bahagia
A. Pendahuluan
Selamat Malam, Pada kali ini Seperti Biasa Melanjutkan Pembuatan Project Biodata Siswa, Nah Pada Hari Ini Saya Ingin Menambahkan Fitur Print atau Cetak Ke Pdf, Jadi Nanti Data Yang Telah Diinputkan Dapat Langsung Di cetak Dan Berbentuk Biodata Siswa Secara Otomatis, Langsung Saja Dibaca Dan Dipahami
B. Latar Belakang
Latar Belakang Saya Menambahkan Fitur Ini Adalah Banyak Guru Yang Terkadang Mengalami Kesulitan Dalam Mencetak Data Siswanya, Dengan Adanya Ini Guru Dapat Mencetak Data Siswanya Dimanapun Guru Berada Yang Hanya Tinggal Membuka Aplikasi Ini
C. Maksud Dan Tujuan
Untuk Mempermudah Dalam Pencetakan Data siswa Tanpa Harus Mengedit Ulang
E. Jangka Waktu Yang Dibutuhkan
3 jam
F. Alat Dan Bahan
Laptop
Text Editor ( Sublime Text )
G. Langkah Kerja
Nah Dalam Pembuatan Ini Saya Menggunakan Salah Satu Libary Yang Sudah Banyak Tersedia, diaplikasi yang saya buat ini saya Menggunakan HTML2PDF, Kenapa Kok pakai Itu? Karena Dengan Menggunkan ini Bisa Langsung Menyisipkan Pengkodean HTML Atau Pun Tinggal Copas Struktur HTML Sudah Jadi Dan Terbentuk,Alasan yang kedua saya yaitu KArena Penggunaan Nya mudah dan Gampang Untuk Dipahami, Nah Jika Kalian Juga Ingin Menggunakan libary ini kalian bisa langsung mengunjungi website resminya, Saya anjurkan sebelum install libary Ini install lah terlebih dahulu composer, agar Instalasi lebih mudah dan efisiensi :)
Oke Langsung Saja Dalam Pembuatan, Dalam Pembuatan Ini Seperti Biasa Hanya Menggunakan PHP dan Untuk Struktur Identitasnya Menggunakan HTML
Buatlah file baru dengan nama print.php atau yang lain juga bisa terserah kalian, Setelah itu isikan file print.php dengan Script php berikut :
Nah Setelah Itu Save Dan Lihat Maka hasilnya akan Seperti ini :)
Oh ya jangan Lupa kita harus Menambahkan tombol untuk mencetak data siswa, tambahkan script berikut pada file daftarsiswa.php
jika dilihat maka akan seperti ini
sekarang kita coba tes untuk mencetak data siswa, Jika tidak ada error maka akan muncul seperti ini
Gimana Keren kan ?
H. Kesimpulan
Nah Dengan adanya tambahan fitur ini Guru Dapat Mencetak Data Siswa Langsung Tanpa Harus Mengetikkan Ulang :)
I. Referensi
w3schools
Sekian yang dapat saya sampikan Mohon maaf bila ada kesalahan dalam penulisan maupun tata bahasa, sekian dan terima kasih
Wassalamu'alaikum Wr.Wb
Salam Dan Bahagia
A. Pendahuluan
Selamat Malam, Pada kali ini Seperti Biasa Melanjutkan Pembuatan Project Biodata Siswa, Nah Pada Hari Ini Saya Ingin Menambahkan Fitur Print atau Cetak Ke Pdf, Jadi Nanti Data Yang Telah Diinputkan Dapat Langsung Di cetak Dan Berbentuk Biodata Siswa Secara Otomatis, Langsung Saja Dibaca Dan Dipahami
B. Latar Belakang
Latar Belakang Saya Menambahkan Fitur Ini Adalah Banyak Guru Yang Terkadang Mengalami Kesulitan Dalam Mencetak Data Siswanya, Dengan Adanya Ini Guru Dapat Mencetak Data Siswanya Dimanapun Guru Berada Yang Hanya Tinggal Membuka Aplikasi Ini
C. Maksud Dan Tujuan
Untuk Mempermudah Dalam Pencetakan Data siswa Tanpa Harus Mengedit Ulang
E. Jangka Waktu Yang Dibutuhkan
3 jam
F. Alat Dan Bahan
Laptop
Text Editor ( Sublime Text )
G. Langkah Kerja
Nah Dalam Pembuatan Ini Saya Menggunakan Salah Satu Libary Yang Sudah Banyak Tersedia, diaplikasi yang saya buat ini saya Menggunakan HTML2PDF, Kenapa Kok pakai Itu? Karena Dengan Menggunkan ini Bisa Langsung Menyisipkan Pengkodean HTML Atau Pun Tinggal Copas Struktur HTML Sudah Jadi Dan Terbentuk,Alasan yang kedua saya yaitu KArena Penggunaan Nya mudah dan Gampang Untuk Dipahami, Nah Jika Kalian Juga Ingin Menggunakan libary ini kalian bisa langsung mengunjungi website resminya, Saya anjurkan sebelum install libary Ini install lah terlebih dahulu composer, agar Instalasi lebih mudah dan efisiensi :)
Oke Langsung Saja Dalam Pembuatan, Dalam Pembuatan Ini Seperti Biasa Hanya Menggunakan PHP dan Untuk Struktur Identitasnya Menggunakan HTML
Buatlah file baru dengan nama print.php atau yang lain juga bisa terserah kalian, Setelah itu isikan file print.php dengan Script php berikut :
<?php
require_once dirname(__FILE__).'/../vendor/autoload.php';
use Spipu\Html2Pdf\Html2Pdf;
use Spipu\Html2Pdf\Exon\Html2PdfExceionFormatter;
session_start();
if ( !isset($_SESSION["nama"])) {
header("Location: ../ain/login.php");
}
include "../data/config.php";
$id = base64_decode($_GET["id"]);
$sql = "SELECT * FROM bio WHERE id=$id";
$query = mysqli_query($conn, $sql);
$show = mysqli_fetch_array($query);
try {
ob_start();
$html2pdf = new Html2Pdf('P', 'A4', 'fr');
$html2pdf->pdf->SetDisplayMode('fullpage');
$html2pdf->writeHTML("
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>Biodata</title>
<style>
.header {text-align:center;margin-top:70px;margin-bottom:20px;}
.no {width:70px;}
.na {width:270px;}
.koma{width:40px;}
.foto {width:150px;height:188px;border:1px solid black;margin-top:110px;margin-left:80px;}
.nama {text-align:center;margin-top:80px;}
.headerr {
width:750px;
height: 190px;
margin-top:100px;
}
.box {
width:144px;
height: 110px;
border: 1px solid black;
margin-left: 100px;
text-align:center;
padding-top:70px;
}
</style>
</head>
<body>
<h1 class='header'>Identitas Peserta Didik</h1>
<table style='margin-top:30px;' cellspacing='0' cellpadding='0'>
<tr>
<td class='no'></td>
<td class='na'>1. Nama Peserta Didik (lengkap)</td>
<td class='koma'>:</td>
<td>".$show['nama']."</td>
</tr>
<tr>
<td class='no'></td>
<td class='na'>2. Nomor Induk Siswa Nasional</td>
<td class='koma'>:</td>
<td>".$show['no_induk']."</td>
</tr>
<tr>
<td class='no'></td>
<td class='na'>3. Tempat dan Tanggal Lahir</td>
<td class='koma'>:</td>
<td>".$show['tempat_lahir'].", ".$show['tanggal_lahir']."</td>
</tr>
<tr>
<td class='no'></td>
<td class='na'>4. Jenis Kelamin</td>
<td class='koma'>:</td>
<td>".$show['jenis_kelamin']."</td>
</tr>
<tr>
<td class='no'></td>
<td class='na'>5. Agama</td>
<td class='koma'>:</td>
<td>".$show['agama']."</td>
</tr>
<tr>
<td class='no'></td>
<td class='na'>6. Anak Ke</td>
<td class='koma'>:</td>
<td>".$show['anak_ke']."</td>
</tr>
<tr>
<td class='no'></td>
<td class='na'>7. Status Dalam Keluarga</td>
<td class='koma'>:</td>
<td>".$show['status_keluarga']."</td>
</tr>
<tr>
<td class='no'></td>
<td class='na'>8. Alamat Peserta Didik</td>
<td class='koma'>:</td>
<td style='width:360px;'>".$show['alamat']."</td>
</tr>
<tr>
<td class='no'></td>
<td style='padding-left:25px;'>Telepon</td>
<td class='koma'>:</td>
<td>".$show['nomer_telpon']."</td>
</tr>
<tr>
<td class='no'></td>
<td class='na'>9. Diterima Disekolah Ini</td>
</tr>
<tr>
<td class='no'></td>
<td style='padding-left:25px;'>a. Dikelas</td>
<td class='koma'>:</td>
<td>".$show['kls']."</td>
</tr>
<tr>
<td class='no'></td>
<td style='padding-left:25px;'>b. Pada Tanggal</td>
<td class='koma'>:</td>
<td>".$show['pd_tanggal']."</td>
</tr>
<tr>
<td class='no'></td>
<td style='padding-left:25px;'>c. Semester</td>
<td class='koma'>:</td>
<td>".$show['semester']."</td>
</tr>
<tr>
<td class='no'></td>
<td class='na'>10. Sekolah Asal</td>
</tr>
<tr>
<td class='no'></td>
<td style='padding-left:25px;'>a. Nama Sekolah</td>
<td class='koma'>:</td>
<td>".$show['nama_sekolah']."</td>
</tr>
<tr>
<td class='no'></td>
<td style='padding-left:25px;'>b. Alamat</td>
<td class='koma'>:</td>
<td>".$show['alamat_sekolah']."</td>
</tr>
<tr>
<td class='no'></td>
<td class='na'>11. Ijazah SMP/MTS/Paket B</td>
</tr>
<tr>
<td class='no'></td>
<td style='padding-left:25px;'>a. Tahun</td>
<td class='koma'>:</td>
<td>".$show['tahun_ijazah']."</td>
</tr>
<tr>
<td class='no'></td>
<td style='padding-left:25px;'>b. Nomor</td>
<td class='koma'>:</td>
<td>".$show['nomor_ijazah']."</td>
</tr>
<tr>
<td class='no'></td>
<td colspan='3' >12. Surat Keterangan Hasil Ujian Nasional (SKHUN) SMP/MTS, Paket B</td>
</tr>
<tr>
<td class='no'></td>
<td style='padding-left:25px;'>a. Tahun</td>
<td class='koma'>:</td>
<td>".$show['tahun_skhun']."</td>
</tr>
<tr>
<td class='no'></td>
<td style='padding-left:25px;'>b. Nomor</td>
<td class='koma'>:</td>
<td>".$show['nomor_skhun']."</td>
</tr>
<tr>
<td class='no'></td>
<td class='na'>13. Orang Tua</td>
</tr>
<tr>
<td class='no'></td>
<td style='padding-left:25px;'>a. Ayah</td>
<td class='koma'>:</td>
<td>".$show['nama_ayah']."</td>
</tr>
<tr>
<td class='no'></td>
<td style='padding-left:25px;'>b. Ibu</td>
<td class='koma'>:</td>
<td>".$show['nama_ibu']."</td>
</tr>
<tr>
<td class='no'></td>
<td class='na'>14. Alamat Orang Tua</td><td class='koma'>:</td>
<td style='width:300px;'>".$show['alamat_ortu']."</td>
</tr>
<tr>
<td class='no'></td>
<td style='padding-left:25px;'>Telepon</td>
<td class='koma'>:</td>
<td>".$show['no_tlp']."</td>
</tr>
<tr>
<td class='no'></td>
<td colspan='3' >15. Pekerjaan Orang Tua</td>
</tr>
<tr>
<td class='no'></td>
<td style='padding-left:25px;'>a. Ayah</td>
<td class='koma'>:</td>
<td>".$show['kerja_ayah']."</td>
</tr>
<tr>
<td class='no'></td>
<td style='padding-left:25px;'>b. Ibu</td>
<td class='koma'>:</td>
<td>".$show['kerja_ibu']."</td>
</tr>
<tr>
<td class='no'></td>
<td class='na'>16. Nama Wali</td>
<td class='koma'>:</td>
<td>".$show['nama_wali']."</td>
</tr>
<tr>
<td class='no'></td>
<td class='na'>17. Alamat Wali</td>
<td class='koma'>:</td>
<td>".$show['alamat_wali']."</td>
</tr>
<tr>
<td class='no'></td>
<td class='na'>18. Pekerjaan Wali</td>
<td class='koma'>:</td>
<td style='width:360px;'>".$show['pekerjaan_wali']."</td>
</tr>
</table>
<div class='headerr'>
<table>
<tr>
<th rowspan='6' style='width:400px;'>
<div class='box'>
Foto 3 x 4
</div>
</th>
<th colspan='2' style='width: 350px;' style='text-align: center;font-size:15px;'>Mojoagung, ".date('j M Y')."</th>
</tr>
<tr>
<td colspan='2' style='width: 350px;' style='text-align: center;'>Ketua Bagian</td>
</tr>
<tr>
<td style='padding-top: 90px;'></td>
</tr>
<tr>
<td colspan='2' style='width: 350px;' style='text-align: center;font-size:15px;'><b><u>Nama Kepala Sekolah</u></b></td>
</tr>
<tr>
<td colspan='2' style='width: 350px;' style='text-align: center;'>NIP. 17385370163528</td>
</tr>
</table>
</div>
</body>
</html>");
$html2pdf->output('Biodata.pdf');
} catch (l2PdfException $e) {
$html2pdf->can();
$formatter = new Excormatter($e);
echo $formatter->getHtmessage();
}
require_once dirname(__FILE__).'/../vendor/autoload.php';
use Spipu\Html2Pdf\Html2Pdf;
use Spipu\Html2Pdf\Exon\Html2PdfExceionFormatter;
session_start();
if ( !isset($_SESSION["nama"])) {
header("Location: ../ain/login.php");
}
include "../data/config.php";
$id = base64_decode($_GET["id"]);
$sql = "SELECT * FROM bio WHERE id=$id";
$query = mysqli_query($conn, $sql);
$show = mysqli_fetch_array($query);
try {
ob_start();
$html2pdf = new Html2Pdf('P', 'A4', 'fr');
$html2pdf->pdf->SetDisplayMode('fullpage');
$html2pdf->writeHTML("
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<title>Biodata</title>
<style>
.header {text-align:center;margin-top:70px;margin-bottom:20px;}
.no {width:70px;}
.na {width:270px;}
.koma{width:40px;}
.foto {width:150px;height:188px;border:1px solid black;margin-top:110px;margin-left:80px;}
.nama {text-align:center;margin-top:80px;}
.headerr {
width:750px;
height: 190px;
margin-top:100px;
}
.box {
width:144px;
height: 110px;
border: 1px solid black;
margin-left: 100px;
text-align:center;
padding-top:70px;
}
</style>
</head>
<body>
<h1 class='header'>Identitas Peserta Didik</h1>
<table style='margin-top:30px;' cellspacing='0' cellpadding='0'>
<tr>
<td class='no'></td>
<td class='na'>1. Nama Peserta Didik (lengkap)</td>
<td class='koma'>:</td>
<td>".$show['nama']."</td>
</tr>
<tr>
<td class='no'></td>
<td class='na'>2. Nomor Induk Siswa Nasional</td>
<td class='koma'>:</td>
<td>".$show['no_induk']."</td>
</tr>
<tr>
<td class='no'></td>
<td class='na'>3. Tempat dan Tanggal Lahir</td>
<td class='koma'>:</td>
<td>".$show['tempat_lahir'].", ".$show['tanggal_lahir']."</td>
</tr>
<tr>
<td class='no'></td>
<td class='na'>4. Jenis Kelamin</td>
<td class='koma'>:</td>
<td>".$show['jenis_kelamin']."</td>
</tr>
<tr>
<td class='no'></td>
<td class='na'>5. Agama</td>
<td class='koma'>:</td>
<td>".$show['agama']."</td>
</tr>
<tr>
<td class='no'></td>
<td class='na'>6. Anak Ke</td>
<td class='koma'>:</td>
<td>".$show['anak_ke']."</td>
</tr>
<tr>
<td class='no'></td>
<td class='na'>7. Status Dalam Keluarga</td>
<td class='koma'>:</td>
<td>".$show['status_keluarga']."</td>
</tr>
<tr>
<td class='no'></td>
<td class='na'>8. Alamat Peserta Didik</td>
<td class='koma'>:</td>
<td style='width:360px;'>".$show['alamat']."</td>
</tr>
<tr>
<td class='no'></td>
<td style='padding-left:25px;'>Telepon</td>
<td class='koma'>:</td>
<td>".$show['nomer_telpon']."</td>
</tr>
<tr>
<td class='no'></td>
<td class='na'>9. Diterima Disekolah Ini</td>
</tr>
<tr>
<td class='no'></td>
<td style='padding-left:25px;'>a. Dikelas</td>
<td class='koma'>:</td>
<td>".$show['kls']."</td>
</tr>
<tr>
<td class='no'></td>
<td style='padding-left:25px;'>b. Pada Tanggal</td>
<td class='koma'>:</td>
<td>".$show['pd_tanggal']."</td>
</tr>
<tr>
<td class='no'></td>
<td style='padding-left:25px;'>c. Semester</td>
<td class='koma'>:</td>
<td>".$show['semester']."</td>
</tr>
<tr>
<td class='no'></td>
<td class='na'>10. Sekolah Asal</td>
</tr>
<tr>
<td class='no'></td>
<td style='padding-left:25px;'>a. Nama Sekolah</td>
<td class='koma'>:</td>
<td>".$show['nama_sekolah']."</td>
</tr>
<tr>
<td class='no'></td>
<td style='padding-left:25px;'>b. Alamat</td>
<td class='koma'>:</td>
<td>".$show['alamat_sekolah']."</td>
</tr>
<tr>
<td class='no'></td>
<td class='na'>11. Ijazah SMP/MTS/Paket B</td>
</tr>
<tr>
<td class='no'></td>
<td style='padding-left:25px;'>a. Tahun</td>
<td class='koma'>:</td>
<td>".$show['tahun_ijazah']."</td>
</tr>
<tr>
<td class='no'></td>
<td style='padding-left:25px;'>b. Nomor</td>
<td class='koma'>:</td>
<td>".$show['nomor_ijazah']."</td>
</tr>
<tr>
<td class='no'></td>
<td colspan='3' >12. Surat Keterangan Hasil Ujian Nasional (SKHUN) SMP/MTS, Paket B</td>
</tr>
<tr>
<td class='no'></td>
<td style='padding-left:25px;'>a. Tahun</td>
<td class='koma'>:</td>
<td>".$show['tahun_skhun']."</td>
</tr>
<tr>
<td class='no'></td>
<td style='padding-left:25px;'>b. Nomor</td>
<td class='koma'>:</td>
<td>".$show['nomor_skhun']."</td>
</tr>
<tr>
<td class='no'></td>
<td class='na'>13. Orang Tua</td>
</tr>
<tr>
<td class='no'></td>
<td style='padding-left:25px;'>a. Ayah</td>
<td class='koma'>:</td>
<td>".$show['nama_ayah']."</td>
</tr>
<tr>
<td class='no'></td>
<td style='padding-left:25px;'>b. Ibu</td>
<td class='koma'>:</td>
<td>".$show['nama_ibu']."</td>
</tr>
<tr>
<td class='no'></td>
<td class='na'>14. Alamat Orang Tua</td><td class='koma'>:</td>
<td style='width:300px;'>".$show['alamat_ortu']."</td>
</tr>
<tr>
<td class='no'></td>
<td style='padding-left:25px;'>Telepon</td>
<td class='koma'>:</td>
<td>".$show['no_tlp']."</td>
</tr>
<tr>
<td class='no'></td>
<td colspan='3' >15. Pekerjaan Orang Tua</td>
</tr>
<tr>
<td class='no'></td>
<td style='padding-left:25px;'>a. Ayah</td>
<td class='koma'>:</td>
<td>".$show['kerja_ayah']."</td>
</tr>
<tr>
<td class='no'></td>
<td style='padding-left:25px;'>b. Ibu</td>
<td class='koma'>:</td>
<td>".$show['kerja_ibu']."</td>
</tr>
<tr>
<td class='no'></td>
<td class='na'>16. Nama Wali</td>
<td class='koma'>:</td>
<td>".$show['nama_wali']."</td>
</tr>
<tr>
<td class='no'></td>
<td class='na'>17. Alamat Wali</td>
<td class='koma'>:</td>
<td>".$show['alamat_wali']."</td>
</tr>
<tr>
<td class='no'></td>
<td class='na'>18. Pekerjaan Wali</td>
<td class='koma'>:</td>
<td style='width:360px;'>".$show['pekerjaan_wali']."</td>
</tr>
</table>
<div class='headerr'>
<table>
<tr>
<th rowspan='6' style='width:400px;'>
<div class='box'>
Foto 3 x 4
</div>
</th>
<th colspan='2' style='width: 350px;' style='text-align: center;font-size:15px;'>Mojoagung, ".date('j M Y')."</th>
</tr>
<tr>
<td colspan='2' style='width: 350px;' style='text-align: center;'>Ketua Bagian</td>
</tr>
<tr>
<td style='padding-top: 90px;'></td>
</tr>
<tr>
<td colspan='2' style='width: 350px;' style='text-align: center;font-size:15px;'><b><u>Nama Kepala Sekolah</u></b></td>
</tr>
<tr>
<td colspan='2' style='width: 350px;' style='text-align: center;'>NIP. 17385370163528</td>
</tr>
</table>
</div>
</body>
</html>");
$html2pdf->output('Biodata.pdf');
} catch (l2PdfException $e) {
$html2pdf->can();
$formatter = new Excormatter($e);
echo $formatter->getHtmessage();
}
Nah Setelah Itu Save Dan Lihat Maka hasilnya akan Seperti ini :)
Oh ya jangan Lupa kita harus Menambahkan tombol untuk mencetak data siswa, tambahkan script berikut pada file daftarsiswa.php
jika dilihat maka akan seperti ini
sekarang kita coba tes untuk mencetak data siswa, Jika tidak ada error maka akan muncul seperti ini
Gimana Keren kan ?
H. Kesimpulan
Nah Dengan adanya tambahan fitur ini Guru Dapat Mencetak Data Siswa Langsung Tanpa Harus Mengetikkan Ulang :)
I. Referensi
w3schools
Sekian yang dapat saya sampikan Mohon maaf bila ada kesalahan dalam penulisan maupun tata bahasa, sekian dan terima kasih
Wassalamu'alaikum Wr.Wb
