Dalam pengembangan aplikasi web kita berbicara sebuah visualisasi data. Nah seperti halnya kali ini, kita akan memvisualisasikan data berupa halaman web dalam bentuk php sehingga dapat di download dan juga di cetak atau di print oleh klien yang menghakses web kita.
Convert HTML ke PDF
Untuk mengconvert atua mengkonversi sebuah halaman web html dapat menggunakan script php. Script php yang ada pun sudah banyak tersebar di internet yaitu berupa fungsi fungsi yang langsung dapat kita gunakan.
Contoh fungsi-funsi itu misalnya fpdf, dompdf, html2pdf, dan masih banyak lagi lainya.
Nah kali ini Saya ingin membagikan tips dan trik membuat html atau halaman web dengan data yang bersisi script php memanggil database menjadi halaman pdf tanpa menggunakan fungsi-fungsi diatas.
Kelebihannya yaitu kita tanpa perlu terbebani dengan fungsi yang kadang memberatkan load halaman web kita.
Untuk membuatnya Kamu hanya perlu memperhatikan kedua script php dan hatml berikut ini:
1.Kartu.html
Contoh kartu peserta
<div class=”row”> <div class=”col-lg-12″> <h1 class=”page-head-line”><?php echo strtoupper($a);?></h1> </div> </div> <div class=”row”> <div class=”col-lg-8″> <div class=”panel panel-default”> <form action=”kartu.php” method=”POST” target=”_blank”> <div class=”panel-body”> <div class=”col-lg-12″> <table class=”table”> <tr> <td rowspan=”6″> <img src=”<?php echo $site;?>/assets/file/<?php echo $r->foto;?>” height=”190px”width=”170px”> </td> <td>ID Peserta</td> <td><?php echo $r->idKaryawan;?></td> </tr> <tr> <td>Nama</td> <td><?php echo $r->namaKaryawan;?></td> </tr> <tr> <td>Jenis Kelamin</td> <td><?php $jk=array(1=>’Pria’,2=>’Wanita’); echo $jk[$r->jenisKelamin];?></td> </tr> <tr> <td>Telp</td> <td><?php echo $r->telpKaryawan;?></td> </tr> <tr> <td>Alamat</td> <td><?php echo $r->alamatKaryawan;?></td> </tr> <tr> <td>Formasi</td> <td><?php echo $r->formasi;?></td> </tr> </table> </div> </div> <div class=”panel-footer”> <a href=”<?php echo $site.$m;?>” class=”btn btn-primary”>Kembali</a> <input type=”submit” name=”profil” class=”btn btn-primary” value=”Download”> </div> </form> </div> </div> </div> </div> <!– /. PAGE INNER –>
2.Kartu.php
Conver html ke pdf
<!DOCTYPE html><html xmlns=”http://www.w3.org/1999/xhtml”><head> <meta charset=”utf-8″ /> <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ /> <title>SELAMAT DATANG</title> <!– BOOTSTRAP STYLES–> <link href=”<?php echo $site;?>assets/css/bootstrap.css” rel=”stylesheet” /> <!– FONTAWESOME ICONS STYLES–> <link href=”<?php echo $site;?>assets/css/font-awesome.css” rel=”stylesheet” /> <!–CUSTOM STYLES–> <link href=”<?php echo $site;?>assets/css/style.css” rel=”stylesheet” /> <!– DataTables CSS –> <link rel=”stylesheet” type=”text/css” href=”<?php echo $site;?>assets/plugins/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.css”> <!– DataTables Responsive CSS –> <link href=”<?php echo $site;?>assets/plugins/datatables-responsive/css/dataTables.responsive.css” rel=”stylesheet”>
<!– HTML5 Shiv and Respond.js for IE8 support of HTML5 elements and media queries –> <!– WARNING: Respond.js doesn’t work if you view the page via file:// –> <!–[if lt IE 9]> <script src=”https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js”></script> <script src=”https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js”></script> <![endif]–></head><body onload=”window.print()”><center> <table class=”table” style=”width:80%;”> <tr> <td colspan=”3″ align=”center”><h3>KARTU PESERTA</h3></td> </tr> <tr> <td rowspan=”6″> <img src=”<?php echo $site;?>/assets/file/<?php echo $r->foto;?>” height=”190px”width=”170px”> </td> <td>ID Peserta</td> <td><?php echo $r->idKaryawan;?></td> </tr> <tr> <td>Nama</td> <td><?php echo $r->namaKaryawan;?></td> </tr> <tr> <td>Jenis Kelamin</td> <td><?php $jk=array(1=>’Pria’,2=>’Wanita’); echo $jk[$r->jenisKelamin];?></td> </tr> <tr> <td>Telp</td> <td><?php echo $r->telpKaryawan;?></td> </tr> <tr> <td>Alamat</td> <td><?php echo $r->alamatKaryawan;?></td> </tr> <tr> <td>Formasi</td> <td><?php echo $r->formasi;?></td> </tr> </table> </center> </body></html>
Dari kedua script html dan php di atas maka akan menghasilkan sebuah halaman baru yang dengan cara ini user dapat langsung mencetak atau mendownloadnya menjadi php. Simpel kan.
Untuk pertanyaan silahkan berkomentar atau menghubungi kami langsung.
Terima kasih! Membantu sekali.
Perkenalkan nama saya Felliya Clarissa 1722500093
Kunjungi juga website kampus saya atmaluhur
Sama-sama mbak, terimakasih sudah bersedia membaca artikel Saya
Terimakasih, dengan adanya artikel ini sangat membantu saya dalam convert html ke pdf.
Perkenalkan Nama saya Siska Berliana dengan NIM 1722500095 dari Atma Luhur
Kunjungi website kampus kami di atmaluhur
Sama-sama mbak, terimakasih kembali sudah mau membaca artikel kami