Laundry Management Website (Part 15-Generate PDF Report Admin)
Created by: Anisa Damayanti, S.Kom.
For Study Purpose Only!
Generate PDF Report atau Cetak Laporan PDF adalah proses mengumpulkan informasi, data, atau konten tertentu, dan menyusunnya dalam format file PDF (.pdf) yang dapat dengan mudah dibagikan dan dicetak.
Pada Aplikasi Pengelolaan Laundry berbasis Website (Laundry Management Website) yang sedang kita bangun ini, akan memanfaatkan sebuah library PHP bernama TCPDF yang digunakan untuk membuat dokumen PDF. Di mana penggunaan umumnya merujuk pada pustaka kelas PHP yang memungkinkan pembuatan dan manipulasi berkas PDF dari kode PHP.
Dalam mengaktifkan Cetak Laporan PDF ini kita dapat memanfaatkan rancangan query database (Model) pada file TransaksiModel.php yang sudah dibahas dalam tutorial MVC Transaksi dan CRUD Transaksi.
A. Persiapan Tools
- Pada aplikasi XAMPP pastikan mengaktifkan Module Apache dan MySQL dengan mengklik tombol Start
- Pada Web Browser seperti Chrome, Chrome Developer, Mozilla Firefox ataupun Microsoft Edge pastikan sudah membuka url berikut: localhost/ci4_nama_kelas/public untuk website
- Pada VSCode pastikan sudah membuka folder project yang sudah dibuat sebelumnya
B. Langkah-langkah Aktifasi Generate PDF Report
1. Persiapan View & Controller
- Pada VSCode buatlah file baru bernama v_laporan.php di dalam folder app/Views/Admin
- Copy seluruh paragraf script berikut dan Paste ke dalam file v_laporan.php
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width:
100%;
}
td,
th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1><?= $header; ?></h1>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"><a href="<?= base_url('admin/dashboard') ?>">Homepage</a></li>
<li class="breadcrumb-item active"><?= $header; ?></li>
</ol>
</div>
</div>
</div><!-- /.container-fluid -->
</section>
<!-- Main content -->
<section class="content">
<!-- Default box Update -->
<div class="card">
<div class="card-header">
<h3 class="card-title"><?= $cardtitle; ?></h3>
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
<i class="fas fa-minus"></i>
</button>
</div>
</div>
<div class="card-body">
<!-- type code here for generate report -->
</div>
<!-- /.card-body -->
<div class="card-footer">
Total Data
</div>
<!-- /.card-footer-->
</div>
<!-- /.card -->
</section>
<!-- /.content -->
</div>
PHP- Selanjutnya buatlah file baru bernama Laporan.php di dalam folder app/Controllers/Admin
- Copy seluruh paragraf script berikut dan Paste ke dalam file Laporan.php
<?php
namespace App\Controllers\Admin;
use App\Controllers\BaseController;
class Laporan extends BaseController
{
public function index()
{
$data = [
'title' => "Admin Laporan | My Laundry",
'header' => "Data Laporan",
'cardtitle' => "Tabel Rincian Laporan",
];
$data['page'] = view('admin/v_laporan', $data);
echo view("admin/v_homepage", $data);
}
public function generatePdf()
{
// paste code here for generate report
}
}
PHP- Selajutnya pada Web Browser seperti Chrome, Chrome Developer, Mozilla Firefox ataupun Microsoft Edge buka url berikut: localhost/ci4_nama_kelas/public/admin/laporan
2. Konfigurasi Library TCPDF
- Download terlebih dahulu library TCPDF dengan cara klik di sini saja, setelah di-klik akan secara otomatis men-download folder TCPDF dalam format Zip
- Selanjutnya mengekstrak folder Zip TCPDF yang sudah di-download dengan cara Klik kanan pada Folder -> pilih Extract Here.
- Selanjutnya rename atau ganti nama folder menjadi tcpdf agar lebih mudah mengkonfigurasi saat membangun project
- Selanjutnya memindahkan folder tcpdf yang sudah di-rename tadi ke dalam folder app/ThirdParty
- Setelah selesai, buka VSCode dan buatlah file baru bernama PdfLibrary.php di dalam folder app/Libraries
- Copy seluruh paragraf script berikut dan Paste ke dalam file PdfLibrary.php
<?php
namespace App\Libraries;
use TCPDF;
/**
* Description of Pdf Library
*
* @author https://roytuts.com
*/
class PdfLibrary extends TCPDF
{
function __construct()
{
parent::__construct();
}
//Page header
public function Header()
{
// Set font
$this->SetFont('helvetica', 'B', 20);
// Title
$this->SetX(55);
$this->Cell(0, 2, 'Laporan Transaksi My Laundry', 0, 1, '', 0, '', 0);
$style = array('width' => 0.50, 'cap' => 'butt', 'join' => 'miter', 'dash' => 0, 'color' => array(0, 0, 0));
$this->Line(15, 18, 195, 18, $style);
}
// Page footer
public function Footer()
{
// Position at 15 mm from bottom
$this->SetY(-15);
// Set font
$this->SetFont('helvetica', 'I', 8);
// Page number
$this->Cell(0, 10, 'Page ' . $this->getAliasNumPage() . '/' . $this->getAliasNbPages(), 0, false, 'C', 0, '', 0, false, 'T', 'M');
}
}
PHP- Kemudian bukalah folder app/Config
- Ubah file Autoload.php dengan mendaftarkan library TCPDF di dalam public $psr4 pada class Autoload
- Lalu daftarkan juga di dalam public $classmap pada class Autoload
3. Aktifasi Tabel Rincian Laporan & Tombol Generate PDF Report
[Controller]
- Pada VSCode bukalah folder app/Controllers/Admin
- Ubah file Laporan.php dengan mengimpor class TransaksiModel dan class PdfLibrary di bagian atas sebelum class Laporan
- Tambahkan function __construct() baru di dalam class Laporan
- Lalu tambahkan 2 variable baru di dalam function index pada class Laporan
- Selanjutnya Copy seluruh paragraf script berikut dan Paste ke dalam public function generatePdf()
$pdf = new PdfLibrary(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, true, 'UTF-8', false);
// set document information
$pdf->SetCreator(PDF_CREATOR);
$pdf->SetAuthor('https://instagram.com/ansdyi');
$pdf->SetTitle('My Laundry');
$pdf->SetSubject('Report generated using Codeigniter and TCPDF');
$pdf->SetKeywords('TCPDF, PDF, MySQL, Codeigniter');
// set default header data
$pdf->SetHeaderData(PDF_HEADER_LOGO, PDF_HEADER_LOGO_WIDTH, PDF_HEADER_TITLE, PDF_HEADER_STRING);
// set header and footer fonts
$pdf->setHeaderFont(array(PDF_FONT_NAME_MAIN, '', PDF_FONT_SIZE_MAIN));
$pdf->setFooterFont(array(PDF_FONT_NAME_DATA, '', PDF_FONT_SIZE_DATA));
// set default monospaced font
$pdf->SetDefaultMonospacedFont(PDF_FONT_MONOSPACED);
// set margins
$pdf->SetMargins(PDF_MARGIN_LEFT, PDF_MARGIN_TOP, PDF_MARGIN_RIGHT);
$pdf->SetHeaderMargin(PDF_MARGIN_HEADER);
$pdf->SetFooterMargin(PDF_MARGIN_FOOTER);
// set auto page breaks
$pdf->SetAutoPageBreak(TRUE, PDF_MARGIN_BOTTOM);
// set image scale factor
$pdf->setImageScale(PDF_IMAGE_SCALE_RATIO);
// set font
$pdf->SetFont('dejavusans', '', 8, '', true);
// ---------------------------------------------------------
//Generate HTML table data from MySQL - start
$table = new \CodeIgniter\View\Table();
$template = array(
'table_open' => '<table border="1" cellpadding="2" cellspacing="2">'
);
$table->setTemplate($template);
$table->setHeading('Kode Invoice', 'Nama Pelanggan', 'Tanggal Bayar', 'Status Transaksi', 'Status Bayar');
$transaksi = $this->transaksi->getTransaksiByAllId()->getResult();
foreach ($transaksi as $item) :
$table->addRow($item->kode_invoice, $item->nama_pelanggan, $item->tgl_bayar, $item->status_transaksi, $item->status_bayar);
endforeach;
$html = $table->generate();
//Generate HTML table data from MySQL - end
// add a page
$pdf->AddPage();
// output the HTML content
$pdf->writeHTML($html, true, false, true, false, '');
// reset pointer to the last page
$pdf->lastPage();
//Close and output PDF document
$pdf->Output(md5(time()) . '.pdf', 'D');
PHP[View]
- Pada VSCode bukalah folder app/Views/Admin
- Ubah file v_laporan.php dengan menambahkan function baru pada kelompok tag <div class=”card-body> untuk Tabel Rincian Laporan
- Kemudian tambahkan function pada tag <div class=”card-footer”>
- Selanjutnya pada Web Browser buka url berikut: localhost/ci4_nama_kelas/public/admin/laporan, dan data dari Database akan muncul di Tabel Rincian Laporan
- Klik Generate PDF Report jika ingin men-download file pdf laporan
- File dengan ekstensi .pdf akan secara otomatis ter-download
- Contoh file pdf laporan ketika dibuka