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

Selamat malam pembaca,
Pada malam ini saya akan melanjutkan pembahasan tentang tulisan sebelumnya, pastikan anda sudah membaca tulisan CARA MEMBUAT CETAK PDF DENGAN HTML2PDF ( TCPDF ) - Bagian 2. Pada bagian yang ketiga ini, saya akan bahas bagaimana membuat laporan perioder per tanggal menggunakan easy ui. Untuk lebih jelasnya anda bisa lihat hasilnya dibawah ini :






 Tampilan cetak diatas adalah menampilkan data periode pertanggal pada 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();
$tglawal = $_GET['tglawal'];
$tglakhir = $_GET['tglakhir'];
if ($tglawal == "" OR $tglakhir == ""){
    $sql = mysql_query("SELECT * FROM tblpetugas")or die(mysql_error());
}else{
    $sql = mysql_query("SELECT * FROM tblpetugas WHERE tanggal BETWEEN '$tglawal' AND '$tglakhir'")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>
    <?php
    if ($tglawal == "" OR $tglakhir == ""){
    ?>
    <p>Laporan Semua Data Petugas</p>
    <?php
    }else{
    ?>
    <p>Laporan Data Petugas tanggal daftar <span style="width: 11%; text-align: left"><?php echo $tglawal; ?></span> sampai tanggal <span style="width: 11%; text-align: left"><?php echo $tglakhir; ?></span></p>
    <?php
    }
    ?>
    <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: 13%; 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: 20%; 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: 10%; text-align: left"> Password </span></th>
            <th style="width: 12%; text-align: left"><span style="width: 6%; text-align: left"> Tanggal </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: 13%; text-align: left"><?php echo $data['nama']; ?></td>
            <td style="width: 16%; text-align: left"><?php echo $data['nip']; ?></td>
            <td style="width: 20%; 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>
            <td style="width: 12%; text-align: left;"><?php echo $data['tanggal']; ?></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 :


 Selanjutnya sekarang kita buat form untuk menampilkan data pada grid easy ui, silahkan buat file baru dan berinama "lapPetugas.php", untuk skripnya anda bisa perhatikan seperti 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;

        function myformatter(date){
            var y = date.getFullYear();
            var m = date.getMonth()+1;
            var d = date.getDate();
            return y+'-'+(m<10?('0'+m):m)+'-'+(d<10?('0'+d):d);
        }
       
        function myparser(s){
            if (!s) return new Date();
            var ss = (s.split('-'));
            var y = parseInt(ss[0],10);
            var m = parseInt(ss[1],10);
            var d = parseInt(ss[2],10);
            if (!isNaN(y) && !isNaN(m) && !isNaN(d)){
                return new Date(y,m-1,d);
            } else {
                return new Date();
            }
        }
       
        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 doTampilkan(){
            var tglawal        = $("#txtTglAwal").datebox('getValue');
            var tglakhir    = $("#txtTglAkhir").datebox('getValue');
       
            $('#dg').datagrid('load',{   
            tglawal: tglawal,
            tglakhir: tglakhir
            });
        }
       
        function doRefresh(){
            var tglawal        = $("#txtTglAwal").val();
            var tglakhir    = $("#txtTglAkhir").val();
       
            $('#dg').datagrid('load',{   
            tglawal: tglawal,
            tglakhir: tglakhir
            });
        }
       
        function doPrint(){
            var tglawal        = $("#txtTglAwal").datebox('getValue');
            var tglakhir    = $("#txtTglAkhir").datebox('getValue');
            window.open('pPetugas.php?tglawal='+tglawal+'&tglakhir='+tglakhir,'_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"
                    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">
                    <div style="float:left;">
                        <label>&nbsp; Dari tanggal &nbsp;</label>
                        <input name="txtTglAwal" id="txtTglAwal" class="easyui-datebox" required="true" data-options="formatter:myformatter,parser:myparser">
                    </div>
                    <div style="float:left;">
                        <label>&nbsp; sampai &nbsp;</label>
                        <input name="txtTglAkhir" id="txtTglAkhir" class="easyui-datebox" required="true" data-options="formatter:myformatter,parser:myparser">
                    </div>&nbsp;
                    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" plain="true"  onclick="doTampilkan()">Tampilkan</a>
                    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-print" plain="true" onclick="doPrint()">Cetak</a>
                    <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" plain="true" onclick="doRefresh()">Refresh</a>
                  </div>

            </td>
        </tr>
      </table>
</div>
</body>
</html>

---------------------------------------------------------------------------------------------------------------------------------
Hasil desainnya akan seperti gambar dibawah ini :
Yang terakhir, pada menu Laporan di halaman "index.php" modifikasi menjadi seperti dibawah ini  :
---------------------------------------------------------------------------------------------------------------------------------
 <div class="easyui-panel" title="LAPORAN" collapsible="true"  collapsed="true" style="width:150px;height:auto;padding:10px;">
            <a href="#" class="easyui-linkbutton" iconCls="icon-triwulan" plain="true" onClick="addTab('Laporan Petugas','lapPetugas.php')">Petugas</a>
            <a href="#" class="easyui-linkbutton" iconCls="icon-tahunan" plain="true">Tahunan</a><br />
            <a href="#" class="easyui-linkbutton" iconCls="icon-triwulan" plain="true">Triwulan</a>
        </div>

--------------------------------------------------------------------------------------------------------------------------------- 
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 3"

Post a Comment