Cara menggunakan fpdf bootstrap

Question

Membuat Report PDF dengan Looping Gambar Menggunakan html2pdf & PHP Mysqli

YukCoding Tutor | 20.18 | Bootstrap MariaDB mysqli PHP Web Dev

Assalamu'alaikum wr. wb.

Kalo pada tutorial sebelumnya kita sudah belajar bagaimana membuat report (laporan) PDF dengan menggunakan library html2pdf dan PHP ekstensi mysqli versi oop style. Maka pada tutorial kali ini kita akan kembangkan sedikit fiturnya yaitu menambahkan looping (perulangan) gambar pada report PDF kita tersebut.

Oke langsung saja tak perlu basa-basi :D silakan langsung disedot tutorial membuat looping gambar pada report pdf dengan menggunakan html2pdf dapat temen-temen ikuti pada tutorial dibawah ini. Jangan lupa setting kualitas videonya menjadi HD agar jelas.

Keren kan teman-teman ^_^

"Download html2pdf-4.4.0"

Baca tutorial sebelumnya : Membuat Report (Laporan) PDF dengan HTML2PDF dan PHP Mysqli OOP

Baca juga tutorial selanjutnya : Membuat Report/Laporan PDF Tampil per ID dengan PHP mysqli dan html2pdf

Jangan lupa like, share, & subscribe tutorial-tutorial YukCoding.
Semoga bermanfat. Happy coding :)

Wassalamu'alaikum wr. wb.

Membuat laporan output PDF sangat lah penting, dimana laporan tersebut akan bisa di print atau di cetak ke dalam suatu kertas. nah disini kita akan belajar Instalasi Library FPDF di Codeigniter, yuk kita praktek teman teman

pertama tama kalian install package nya dengan menggunakan composer, ketikan perintah berikut di command prompt composer require setasign/fpdf

setelah itu kalian bisa buat file controller dengan nama PdfController.php,

buat method index dan method cetak di dalam class PdfController tersebut

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class PdfController extends CI_Controller 
{
	public function index()
	{
		$this->load->helper('url');
		$url = site_url('PdfController/cetak');
		echo '<a href="'.$url.'">Cetak Pdf</a>';
	}

	public function cetak()
	{

		$pdf = new FPDF();
		$pdf->AddPage();
		$pdf->SetFont('Arial','B',16);
		$pdf->Cell(40,10,'Dumet School');
		$pdf->Output();
	}

}

setelah itu coba jalankan di localhost

coba kalian klik link tersebut.

maka file pdf akan terbentuk, sekian tutorial Instalasi Library FPDF di Codeigniter, semoga bermanfaat yah teman teman.

Hai guys selamat datang kembali ke blog saya. Kali ini saya mau membagikan tutorial php lagi dan masih berhubungan dengan aplikasi crud PHP yang telah kita bahas sebelumnya. Kalau kita membuat sebuah aplikasi rasanya belum lengkap kalau cuma seputar insert/create record, read record, update record dan delete record saja yah.

Biasanya user akan membutuhkan yang namanya report. Nah untuk membuat report menggunakan php dan database mysql dibutuhkan sebuah plugin seperti TCPDF, FPDF dan lain-lain. Nah pada tutorial kali ini, kita akan belajar menggunakan plugin FPDF yang dapat teman-teman download dan pelajari dari situs ini.

Setelah teman-teman download plugin fpdf tersebut, letakkan folder fpdf dan isinya ke dalam folder tutorial-easyui yang sudah pernah kita buat di tutorial sebelumnya yah. Karena ini adalah lanjutan dari cara membuat aplikasi crud sederhana menggunakan framework easyui dan mysqli. Kalau teman-teman belum tahu silahkan baca tutorial tersebut terlebih dahulu agar tidak bingung.

Oke jika sudah sekarang kita akan mencoba untuk menambahkan sebuah button ke dalam toolbar yang ada di dalam file index.html yang telah kita buat sebelumnya. Caranya dengan menuliskan script berikut ini :

<a href="#" class="easyui-linkbutton" iconCls="icon-print" plain="true" onclick="pop_up('report.php')">Print List</a>

Nah script di atas adalah script untuk menambahkan sebuah button yang bertuliskan Print List dan nantinya jika di click akan memanggil sebuah function yang bernama pop_up dan akan menampilkan sebuah popup window yang berisi sebuah report yang dibuat menggunakan fpdf. Kira-kira begini penampakannya :

Lalu untuk penulisan script function pop_up nya akan kita buat seperti ini :

function pop_up(url){
		  window.open(url,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=1200,height=768,directories=no,location=no');
		}

Nah berikut ini adalah script lengkap dari file index.html tersebut biar teman-teman nggak bingung :

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Daftar Gudang</title>
	<link rel="stylesheet" href="../assets/css/bootstrap.min.css" />		
	<link rel="stylesheet" type="text/css" href="../assets/easyui/resource/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../assets/easyui/resource/themes/icon.css">
	<script type="text/javascript" src="../assets/js/jquery-1.8.1.min.js"></script>
	<script type="text/javascript" src="../assets/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="../assets/easyui/datagrid-detailview.js"></script>
	<script type="text/javascript" src="../assets/js/datagrid-filter.js"></script>
</head>
<body>

<div class="container-fluid">
	<h2>Daftar Gudang</h2>
	<p>double click to edit or view</p>
	
	<table id="dg" title="Daftar Gudang" class="easyui-datagrid" align="center" style="width:100%;height:500px" url="get_whs.php" 
	toolbar="#toolbar" pagination="true" rownumbers="true" fitColumns="true" singleSelect="true" data-options="collapsible:true,rownumbers:true,singleSelect:true,autoRowHeight:false,pagination:true,onDblClickRow:function(){editWHS();}" pageList="[100,500,1000,5000,10000]">
		<thead>
			<tr>
				<th field="id" width="10" sortable="true">ID</th>
				<th field="nama" width="50" sortable="true">Nama Gudang</th>
				<th field="keterangan" width="50" sortable="true">Keterangan</th>
				<th field="uid" width="10" sortable="true">ID User</th>
				<th field="createdate" width="30" sortable="true">Tanggal Input</th>
				<th field="lastupdate" width="30" sortable="true">Tanggal Update</th>
			</tr>
		</thead>
	</table>

	<div id="toolbar">
		<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newWHS()">Tambah Gudang</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editWHS()">Edit Gudang</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="delWHS()">Hapus Gudang</a>
		<a href="#" class="easyui-linkbutton" iconCls="icon-print" plain="true" onclick="pop_up('report.php')">Print List</a>
	</div>
	
	<div id="dlg" class="easyui-dialog" style="width:700px;height:300px;padding:10px 20px" closed="true" buttons="#dlg-buttons">
		<div class="ftitle">Informasi Gudang</div>
		<form id="fm" method="post" novalidate>
			<div class="fitem">
				<label>ID:</label>
				<input name="id" id="id" value="AUTO" class="easyui-textbox" readonly="true" style="width:12%;height:25px;"> <!--style="width:20px;"-->
			</div>
			<div class="fitem">
				<label>Nama Gudang:</label>
				<input name="nama" id="nama" class="easyui-textbox" required="true" style="height:25px;"> <!--style="width:20px;"-->
			</div>
			<div class="fitem">
				<label>Keterangan:</label>
				<input name="keterangan" class="easyui-textbox" required="true" style="height:25px;">
			</div>
		</form>
	</div>
	<div id="dlg-buttons">
		<a href="javascript:void(0)" class="easyui-linkbutton c6" iconCls="icon-ok" onclick="saveWHS()()" 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>

	<script type="text/javascript">
		$(function(){
			var dg = $('#dg').datagrid({
				filterBtnIconCls:'icon-filter',
				pagination: true,
                remoteFilter: false,
                remoteSort: true,
                rownumbers: true
			});
			dg.datagrid('enableFilter', [{
			}]);
		});

		var url;
		function newWHS(){
			$('#dlg').dialog('open').dialog('setTitle','Tambah Gudang Baru');
			$('#fm').form('clear');
			url = 'save_whs.php';
		}
		function editWHS(){
			var row = $('#dg').datagrid('getSelected');
			if (row){
				$('#dlg').dialog('open').dialog('setTitle','Edit Gudang');
				$('#fm').form('load',row);
				url = 'update_whs.php?id='+row.id;
			}
		}
		function saveWHS(){
			$('#fm').form('submit',{
				url: url,
				onSubmit: function(){
					return $(this).form('validate');
				},
				success: function(result){
					var result = eval('('+result+')');
					if (result.errorMsg){
						$.messager.show({
							title: 'Error',
							msg: result.errorMsg
						});
					} else {
						$('#dlg').dialog('close');		
						$('#dg').datagrid('reload');	
					}
				}
			});
		}
		function delWHS(){
			var row = $('#dg').datagrid('getSelected');
			if (row){
				$.messager.confirm('Konfirmasi','Anda yakin ingin menghapus gudang ini ?',function(r){
					if (r){
						$.post('del_whs.php',{id:row.id},function(result){
							if (result.success){
								$('#dg').datagrid('reload');	// reload the WHS() data
							} else {
								$.messager.show({	// show error message
									title: 'Error',
									msg: result.errorMsg
								});
							}
						},'json');
					}
				});
			}
		}

		function pop_up(url){
		  window.open(url,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=1200,height=768,directories=no,location=no');
		}
	</script>
	<style type="text/css">
		#fm{
			margin:0;
			padding:10px 30px;
		}
		.ftitle{
			font-size:14px;
			font-weight:bold;
			padding:5px 0;
			margin-bottom:10px;
			border-bottom:1px solid #ccc;
		}
		.fitem{
			margin-bottom:5px;
		}
		.fitem label{
			display:inline-block;
			width:200px;
		}
		.fitem input{
			width:300px;
		}
		.textbox-readonly .textbox-text{
	        background: #f2f2f2;
	    }
	</style>
</div>
</body>
</html>

Jika sudah sekarang saatnya kita akan membuat sebuah file report menggunakan plugin fpdf dan file php tersebut akan kita beri nama report.php. Tuliskan script berikut ini ke dalam file report.php tersebut yah :

<?php
ini_set('display_errors', 1);
include '../config.php';

$rs=$conn->query("SELECT id,nama,keterangan,uid,createdate,lastupdate FROM tbl_gudang order by nama");

$items = array();
if ($rs->num_rows>0){
	while ($row=$rs->fetch_assoc()) {
		if(!empty((int)$row['createdate'])){
			$tglinput=Date_Conversion("d-m-Y H:i:s",$row['createdate'],"id");
		} else {
			$tglinput='';
		}

		if(!empty((int)$row['lastupdate'])){
			$tglupdate=Date_Conversion("d-m-Y H:i:s",$row['lastupdate'],"en");
		} else {
			$tglupdate='';
		}

	    $rowarray = array(
			"id"         => $row['id'],
			"nama"       => $row['nama'],
			"keterangan" => $row['keterangan'],
			"uid"        => $row['uid'],
			"createdate" => $tglinput,
			"lastupdate" => $tglupdate
		);
		$items[] = $rowarray;
	}
}

$conn->Close();
 
#set title and header table
$rpttitle = "LIST DATA GUDANG";
$header = array(
	array("label"=>"ID", "length"=>10, "align"=>"L"),
	array("label"=>"Nama Gudang", "length"=>40, "align"=>"L"),
	array("label"=>"Keterangan", "length"=>40, "align"=>"L"),
	array("label"=>"ID User", "length"=>20, "align"=>"L"),
	array("label"=>"Tanggal Input", "length"=>40, "align"=>"L"),
	array("label"=>"Tanggal Update", "length"=>40, "align"=>"L"),
);
 
require_once '../fpdf/fpdf.php';
$pdf = new FPDF('P');
$pdf->AddPage();
 
#SHOW REPORT TITLE
$pdf->SetFont('Arial','B','16');
$pdf->Cell(0,20, $rpttitle, '0', 1, 'C');
 
#Add header tabel
$pdf->SetFont('Arial','','10');
$pdf->SetFillColor(0, 102, 255);
$pdf->SetTextColor(255,255,255);
$pdf->SetDrawColor(0,0,0);
foreach ($header as $col) {
	$pdf->Cell($col['length'], 5, $col['label'], 1, '0', $col['align'], true);
}
$pdf->Ln();
 
#show data in table
$pdf->SetFillColor(224,235,255);
$pdf->SetTextColor(0);
$pdf->SetFont('');
$fill=false;
foreach ($items as $row) {
	$i = 0;
	foreach ($row as $cell) {
	 	$pdf->Cell($header[$i]['length'], 5, $cell, 1, '0', $col['align'], $fill);
	 	$i++;
	}
	$fill = !$fill;
	$pdf->Ln();
}
 
#output file PDF
$pdf->Output();
?>

Oke selesai deh. Silahkan click button print list yang ada di bagian toolbar yah. Kalau sukses teman-teman akan melihat tampilan seperti ini di browser teman-teman :

kode bootstrap