CARA MEMBUAT CETAK PDF DENGAN HTML2PDF ( TCPDF ) - Bagian 1

Selamat malam pembaca,
Malam ini saya akan melanjutkan postingan yang kemarin, dimana kemarin sudah kita bahas bagaimana mudahnya coding menggunakan class database dan menggunakan user interface easy ui, setelah kita membuat crud databasenya, sekarang kita akan membuat atau menambahkan tombol cetak atau print guna untuk mencetak data atau dokumen, tidak hanya itu saja kita akan lengkapi dengan dengan cetak pdf.
Untuk melakukan hal tersebut kita butuh class - class yang lumayan banyak untuk mengkonversi hasil tampilan data menjadi sebuah file pdf. Namun jangan khawatir, seperti biasa diakhir nanti akan saya beri file yang lengkap agar anda dapat mempelajari dan mengeksplore lebih detail. Hasil akhir yang akan kita buat seperti gambar dibawah ini :


1. Silahkan anda ambil class cetak pdf nya disni, kemudian ekstrak dan taruh folder pdf dalam folder nama web/aplikasi anda, anda bisa perhatikan gambar dibawah ini :
2. Anda buat desain tampilan output cetaknya, kali ini saya berinama "cPetugas.php", untuk skrip lengkap pada file "cPetugas.php" anda bisa perhatikan skrip dibawah ini :
---------------------------------------------------------------------------------------------------------------------------------
 <?php
include('config.php');
$db = new Database();
$db->connect();
$sql = mysql_query("SELECT * FROM tblpetugas")or die(mysql_error());
?>
<style type="text/css">
<!--
table { vertical-align: top; }
tr    { vertical-align: top; }
td    { vertical-align: top; }
.style37 {
    font-size: 20px;
    font-weight: bold;
}
.style38 {font-size: 12px}
.style14 {font-size: 10px}
-->
</style>
    <bookmark title="Lettre" level="0" ></bookmark>
    <table style="width: 100%; text-align: center; font-size: 14px">
        <tr>
          <td style="width:7%" rowspan="4"><img src="img/logo.png" alt="Logo" width="80" height="78"></td>
          <td style="width:93%">LEMBAGA SISTEM </td>
        </tr>
        <tr>
          <td class="style37">SISTEM APLIKASI ANDA </td>
        </tr>
        <tr>
          <td class="style38">Kompleks Perkantoran Kudus, Jl. PR. Sukun  Kudus</td>
        </tr>
        <tr>
          <td class="style38">Telp. 081 2299 5054 </td>
        </tr>
        <tr>
            <td colspan="2"><hr/></td>
        </tr>
    </table>
    <p>Laporan Data Petugas </p>
    <table cellspacing="0" style="width: 100%; border: solid 1px black; background: #E7E7E7; text-align: center; font-size: 10pt;">
        <tr>
            <th style="width: 5%; text-align: left">No</th>
            <th style="width: 19%; text-align: left"><span style="width: 16%; text-align: left">Nama</span></th>
            <th style="width: 16%; text-align: left">NIP</th>
            <th style="width: 26%; text-align: left"><span style="width: 24%; text-align: left">Alamat</span></th>
            <th style="width: 14%; text-align: left"><span style="width: 10%; text-align: left">Jabatan</span></th>
            <th style="width: 10%; text-align: left">Username</th>
            <th style="width: 10%; text-align: left"><span style="width: 16%; text-align: left"> Password </span></th>
        </tr>
    </table>
<?php
    $i = 1;
    while($data = mysql_fetch_array($sql)) {
?>
    <table cellspacing="0" style="width: 100%; border: solid 1px black; background: #F7F7F7; text-align: center; font-size: 10pt;">
        <tr>
            <td style="width: 5%; text-align: left"><?php echo $i; ?></td>
            <td style="width: 19%; text-align: left"><?php echo $data['nama']; ?></td>
            <td style="width: 16%; text-align: left"><?php echo $data['nip']; ?></td>
            <td style="width: 26%; text-align: left"><span style="width: 10%; text-align: left;"><?php echo $data['alamat']; ?></span></td>
            <td style="width: 14%; text-align: left"><span style="width: 10%; text-align: left;"><?php echo $data['jabatan']; ?></span></td>
            <td style="width: 10%; text-align: left"><span style="width: 10%; text-align: left;"><?php echo $data['username']; ?></span></td>
            <td style="width: 10%; text-align: left;"><?php echo $data['password']; ?></td>
        </tr>
    </table>
<?php
    $i++;
    }  
?>
<nobreak><br>
        <table cellspacing="0" style="width: 100%; text-align: left;">
            <tr>
                <td style="width:65%;"></td>
              <td style="width:35%; ">
                    <p>Kudus, <?php echo date('d-M-Y', time()); ?> <br>
                        Admin Regional </p>
                    <p>&nbsp;</p>
                    Andreanto<br />
                        <hr/>
                      NIP. 192 12576 1 137              </td>
            </tr>
        </table>
    </nobreak>
---------------------------------------------------------------------------------------------------------------------------------
Hasil desainnya akan tampak seperti gambar dibawah ini :

3. Sekarang kita buat file "pPetugas.php" yang berfungsi untuk memanggil hasil desain diatas dan mengkonversi ke pdf. Untuk skrip "pPetugas.php" lengkapnya anda bisa lihat skrip dibawah ini :
---------------------------------------------------------------------------------------------------------------------------------
 <?php
ob_start();
 include "cPetugas.php";
 $content = ob_get_clean();

 require_once "pdf/html2pdf.class.php";
 try
 {
 $html2pdf = new HTML2PDF('P','A4', 'fr', false, 'ISO-8859-15');
 $html2pdf->writeHTML($content, isset($_GET['vuehtml']));
 $html2pdf->Output('"CetakPetugas.pdf');
 }
 catch(HTML2PDF_exception $e) { echo $e; }
?>
---------------------------------------------------------------------------------------------------------------------------------

4. Terakhir kita buat tombol print di desain easy ui nya, yaitu anda tambahkan skrip pada kalangan div id toolbar, untuk lebih jelasnya anda bisa perhatikan skrip dibawah ini :
--------------------------------------------------------------------------------------------------------------------------------- 
<div id="toolbar">
                    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">Tambah</a>
                    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Ubah</a>
                    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Hapus</a>
                      <div style="float:right;">
                        <input id="cari" class="easyui-searchbox" data-options="prompt:'Cari NIP atau Nama..',searcher:doSearch" style="width:200px"></input>
                    </div>
                  </div>
---------------------------------------------------------------------------------------------------------------------------------
Ubah menjadi seperti dibawah ini :
---------------------------------------------------------------------------------------------------------------------------------
<div id="toolbar">
                    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">Tambah</a>
                    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Ubah</a>
                    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Hapus</a>
                    <a href="pPetugas.php" class="easyui-linkbutton" iconCls="icon-print" plain="true" target="_blank">Cetak</a>
                      <div style="float:right;">
                        <input id="cari" class="easyui-searchbox" data-options="prompt:'Cari NIP atau Nama..',searcher:doSearch" style="width:200px"></input>
                    </div>
                  </div>
---------------------------------------------------------------------------------------------------------------------------------
Hasil desain easy ui akan akan tampil tombol print seperti gambar dibawah ini :
5. Selesai, silahkan anda jalankan menggunakan web browser kesayangan anda, kemudian pilih tombol print/cetak dan lihat hasilnya. Anda bisa mencobanya menggunakan skrip yang lengkap yang bisa diambil disini

Terimakasih
Selamat Belajar









0 Response to "CARA MEMBUAT CETAK PDF DENGAN HTML2PDF ( TCPDF ) - Bagian 1"

Post a Comment