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

Hallo pembaca,
Setelah satu hari gak nulis rasanya hampa, hahaa..Gak kawan, cuma bercanda. Kalau kemarin kita sudah membuat fungsi untuk mencetak semua data, kali ini saya masih sama membahas tentang tulisan saya sebelumnya yaitu mencetak ke file PDF menggunakan HTML2PDF, pastikan anda sudah membaca tulisan sebelumnya yaitu CARA MEMBUAT CETAK PDF DENGAN HTML2PDF ( TCPDF ) - Bagian 1. Saya akan menambahkan parameter untuk mencetaknya, atau berdasarkan ID  pada pembahasan sebelumnya. Untuk lebih jelasnya hasilnya akan seperti gambar dibawah ini :



Tampilan cetak diatas adalah menampilkan detail yang diseleksi pada grid easy ui, oleh karena itu melakukan query dengan seleksi parameter, untuk lebih jelasnya silahkan buka file "cPetugas.php" yang sudah pernah kita bahas di tulisan sebelumnya. Silahkan modifikasi seperti dibawah ini :
---------------------------------------------------------------------------------------------------------------------------------
<?php
include('config.php');
$db = new Database();
$db->connect();
$kodepetugas = $db->escapeString($_REQUEST['kodepetugas']);
$sql = mysql_query("SELECT * FROM tblpetugas WHERE kodepetugas='$kodepetugas'")or die(mysql_error());
$data=mysql_fetch_array($sql);
?>
<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>Data Detail Petugas </p>
    <nobreak>
      <table width="1307" border="0">
        <tr>
          <td width="102">Nama</td>
          <td width="10">:</td>
          <td width="1181"><?php echo $data['nama']; ?></td>
        </tr>
        <tr>
          <td>NIP</td>
          <td>:</td>
          <td><?php echo $data['nip']; ?></td>
        </tr>
        <tr>
          <td>Alamat</td>
          <td>:</td>
          <td><?php echo $data['alamat']; ?></td>
        </tr>
        <tr>
          <td>Jabatan</td>
          <td>:</td>
          <td><?php echo $data['jabatan']; ?></td>
        </tr>
        <tr>
          <td>Username</td>
          <td>:</td>
          <td><?php echo $data['username']; ?></td>
        </tr>
        <tr>
          <td>Password</td>
          <td>:</td>
          <td><?php echo $data['password']; ?></td>
        </tr>
      </table>
      <br>
    </nobreak>
 
---------------------------------------------------------------------------------------------------------------------------------
 Hasil desainnya akan nampak seperti gambar dibawah ini :

 Yang terakhir silahkan anda buka "frmPetugas.php" lalu modifikasi sesuai dengan skrip dibawah ini :
---------------------------------------------------------------------------------------------------------------------------------
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/easyui.css">
<link rel="stylesheet" type="text/css" href="css/icon.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript">
        var url;
        var page=1;
        function newUser(){
            $('#dlg').dialog('open').dialog('setTitle','Tambah Data Petugas');
            $('#fm').form('clear');
            url = 'sPetugas.php?petugas=simpan';
        }
      
        function editUser(){
             var row = $('#dg').datagrid('getSelected');
            if (row){
                $('#dlg').dialog('open').dialog('setTitle','Edit Data');
                $('#fm').form('load',row);
                $('#kodepetugas').attr('readonly','readonly');
                url = 'sPetugas.php?petugas=ubah';
            }
        }
      
        function saveUser(){
            $('#fm').form('submit',{
                url: url,
                onSubmit: function(){
                    return $(this).form('validate');
                },
                success: function(result){
                    var result = eval('('+result+')');
                    if (result.success){
                        $('#dlg').dialog('close');        // close the dialog
                        $('#dg').datagrid('reload');
                        $.messager.show({
                            title: 'Informasi',
                            msg: result.msg
                        });
                    } else {
                        $.messager.show({
                            title: 'Informasi',
                            msg: result.msg
                        });
                    }
                }
            });
        }
      
        function destroyUser(){
            var row = $('#dg').datagrid('getSelected');
            if (row){
                $.messager.confirm('Konfirmasi','Yakin ingin menghapus?',function(r){
                    if (r){
                        $.post('sPetugas.php?petugas=hapus',{kodepetugas:row.kodepetugas},function(result){
                            if (result.success){
                                $('#dg').datagrid('reload');
                                $.messager.show({
                                title: 'Informasi',
                                msg: 'Data berhasil dihapus'
                        });
                            } else {
                                $.messager.show({  
                                    title: 'Error',
                                    msg: result.errorMsg
                                });
                            }
                        },'json');
                    }
                });
            }
        }
      
        function doSearch(value){
            $('#dg').datagrid('load',{  
            cari: value
            });
        }
      
        function doPrint(value){
            $('#dg').datagrid('load',{  
            cari: value
            });
            window.open('../print/pPembayaran.php?idpembayaran='+idpembayaran,'_blank' );
        }
      
        function getSelected(){
            var row = $('#dg').datagrid('getSelected');
            if (row){
                window.open('pPetugas.php?kodepetugas='+row.kodepetugas,'_blank' );
            }
        }
</script>
</head>
<body>
<div class="frametabel">
    <table align="center" bordercolor="#A9FACD" id="toolbarTable" >
        <tr>
            <td id="titlebar" >
                <table>
                    <tr>
                        <td><img src="img/user.png"/></td>
                        <td id="titlecaption">DATA PETUGAS</td>
                    </tr>
                </table>          
            </td>
        </tr>
      
        <tr>
            <td style="padding:1px;">
                <table id="dg" title="DATA PETUGAS" class="easyui-datagrid" style="width:1024px;height:470px"
                       url="sPetugas.php?petugas=tampil"
                    toolbar="#toolbar" pagination="true"
                    rownumbers="true" fitColumns="true" singleSelect="true" collapsible="true">
                        <thead>
                             <tr>
                                <th field="kodepetugas" hidden="true">Kode Petugas</th>
                                <th field="nama">Nama</th>
                                <th field="nip">NIP</th>
                                <th field="alamat">Alamat</th>
                                <th field="jabatan">Jabatan</th>
                                <th field="username">Username</th>
                                <th field="password">Password</th>
                            </tr>
                        </thead>
                </table>

                  <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="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-print" plain="true" onClick="getSelected()">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>

                <div id="dlg" class="easyui-dialog" style="width:420px;height:320px;padding:10px 20px" closed="true" buttons="#dlg-buttons">
                    <div class="ftitle">INFORMASI DATA PETUGAS</div>
                    <form id="fm" method="post" novalidate>
                        <div class="fitem">
                            <label>Nama:</label>
                            <input name="nama" class="easyui-textbox" required="true">
                            <input name="kodepetugas" id="kodepetugas" type="hidden" required="true" >
                        </div>
                      
                        <div class="fitem">
                            <label>NIP:</label>
                            <input name="nip" id="nip" class="easyui-textbox" required="true">
                        </div>
                          
                        <div class="fitem">
                            <label>Alamat:</label>
                            <input name="alamat" class="easyui-textbox" required="true">
                        </div>
                          
                        <div class="fitem">
                            <label>Jabatan:</label>
                            <select class="combo" name="jabatan" style="width:205px;" required="true">
                                <option value="Kepala Sekolah">Kepala Sekolah</option>
                                <option value="Guru Kelas">Guru Kelas</option>
                                <option value="Tata Usaha">Tata Usaha</option>
                            </select>
                        </div>
                          
                        <div class="fitem">
                            <label>Username:</label>
                            <input name="username" class="easyui-textbox" required="true">
                        </div>
                          
                        <div class="fitem">
                            <label>Password:</label>
                            <input name="password" class="easyui-textbox" required="true">
                        </div>
                    </form>
                </div>
  
                <div id="dlg-buttons">
                    <a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveUser()" style="width:90px">Simpan</a>
                    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')" style="width:90px">Batal</a>  
                </div>
            </td>
        </tr>
      </table>
</div>
</body>
</html>


---------------------------------------------------------------------------------------------------------------------------------
Selesai, silahkan anda jalankan menggunakan web browser kesayangan anda, kemudian pilih tombol print/cetak dan lihat hasilnya.

Terimakasih
Selamat Belajar

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

Post a Comment