[PHP + TCPDF] Custom Header dan Footer

Di artikel ini kita akan belajar bagaimana cara membuat custom Header dan Footer di TCPDF seperti menambahkan logo,judul dan lainnya. Secara default, header dan footer di TCPDF hanya berupa line atau garis dan page number, sehingga jika kita ingin mengubahnya maka perlu "me-replace" atau melakukan penurunan class (extends) fungsi header dan footer yang sudah ada dengan kode kita sendiri.

Catatan:

Pastikan anda sudah mendownload library TCPDF nya kemudian siapkan gambar sample yang akan dijadikan logo.Misal "logo.jpg", gambar yang dijadikan logo harus berupa jpg, tidak bisa berupa png.Pada contoh ini, data pada laporan statis, tidak mengambil dari database..

Pertama

Buat file *.php baru (karena TCPDF adalah libarary untuk PHP, maka kita menggunakan bahasa pemrograman PHP tentu saja :D ) dengan nama laporan.php. Maka folder dan filenya akan terlihat sebagai berikut :

Kedua

Ketikkan kode berikut pada file laporan.php (anda bisa mendownload nya di Google Drive saya).

<?php
require_once 'tcpdf/tcpdf.php';
$tgl_sekarang = date("d F Y");

class YudhaPDF extends TCPDF {
public function Header() {
        $image_file = "<img src=\"logo.jpg\" width=\"180\" height=\"70\"/>";
$this->SetY(10);
$isi_header="<table align=\"right\">
<tr>
<td>".$image_file."</td>
</tr>
</table>";
$this->writeHTML($isi_header, true, false, false, false, '');
    }

public function Footer() {
        $image_file = "<img src=\"logo.jpg\" width=\"180\" height=\"70\"/>";
$this->SetY(-40);
$this->writeHTML($image_file, true, false, false, false, '');
        $this->SetY(-15);
$this->writeHTML("<hr>", true, false, false, false, '');
        $this->SetFont('helvetica', '', 12);
        $this->Cell(0, 10, ''.$this->getAliasNumPage().'/'.$this->getAliasNbPages(), 0, false, 'C', 0, '', 0, false, 'T', 'M');
    }
}

$pdf = new YudhaPDF('P', PDF_UNIT, 'A4', true, 'UTF-8', false);

$pdf->SetTitle('Laporan Yudha');
$pdf->SetSubject('Laporan Yudha');

$pdf->SetMargins(PDF_MARGIN_LEFT, PDF_MARGIN_TOP, PDF_MARGIN_RIGHT);
$pdf->SetHeaderMargin(PDF_MARGIN_HEADER);
$pdf->SetFooterMargin(PDF_MARGIN_FOOTER);

$pdf->SetAutoPageBreak(TRUE, PDF_MARGIN_BOTTOM);
$pdf->AddPage();

$pdf->SetFont('helvetica', '', 10);
$pdf->SetY(30);
$isi = "<br><table>
<tr>
<td align=\"center\"><h4>CONTOH LAPORAN</h4></td>
</tr>
</table>
<br><hr><p></p>
Tanggal : ".$tgl_sekarang." <br>
<table border=\"1\">
<tr>
<th> No </th>
<th> Produk </th>
</tr>
<tr>
<td> 1</td>
<td> Mouse</td>
</tr>
<tr>
<td> 2</td>
<td> Kucing</td>
</tr>
</table>";

$pdf->writeHTML($isi, true, false, false, false, '');

$namaPDF = 'laporan.pdf';
$pdf->Output($namaPDF,'I');
?>


Hasilnya

Custom Header. Terdapat logo di pojok kanan atas

Custom Footer. Terdapat logo di sebelah kiri bawah dengan garis atau line lalu page number.

Penjelasan Kode


require_once 'tcpdf/tcpdf.php';
$tgl_sekarang = date("d F Y");

baris pertama berarti kita membutuhkan file tcpdf.php di file laporan.php, baris ini wajib ada karena kita akan memanggil class tcpdf, sedangkan baris kedua (opsional) membuat variabel tgl_sekarang dengan value tanggal hari ini dengan format d F Y.

class YudhaPDF extends TCPDF {

melakukan extends class tcpdf dengan class baru bernama YudhaPDF. Nama class baru bebas.


public function Header() { 

 $image_file = "<img src=\"logo.jpg\" width=\"180\" height=\"70\"/>"; 

$this->SetY(10);

 $isi_header="<table align=\"right\"> <tr> <td>".$image_file."</td> </tr> </table>"; 

$this->writeHTML($isi_header, true, false, false, false, ''); }

fungsi header pada tcpdf yang kita custom atau ubah. pertama kita membuat variabel bernama image_file yang menampung html img dengan source gambar logo.jpg. Baris selanjutnya kita memposisikan kordinat yang nanti kita gunakan di tcpdf, karena nilai 10 (positif) berarti letak kordinat berada diatas.Jika kita ganti nilainya 90 misalkan, nanti gambar logo akan berada lebih kebawah sedikit (saya agak bingung menjelaskannya,pokoknya begitu :p )

kemudian buat variabel bernama isi_header yang isinya kode tag html biasa. Kenapa berbentuk table?itu trik saya untuk memudahkan gambar agar berada di pojok kanan saja :)

lalu fungsi WriteHTML digunakan agar kode tag html yang tadi dibuat, ditulis ke dokumen atau laporan di tcpdf yang kita pakai.

public function Footer() { 

 $image_file = "<img src=\"logo.jpg\" width=\"180\" height=\"70\"/>"; 

$this->SetY(-40); $this->

writeHTML($image_file, true, false, false, false, ''); 

 $this->SetY(-15); 

$this->writeHTML("<hr>", true, false, false, false, ''); 

 $this->SetFont('helvetica', '', 12); 

 $this->Cell(0, 10, ''.$this->getAliasNumPage().'/'.$this->getAliasNbPages(), 0, false, 'C', 0, '', 0, false, 'T', 'M'); 

 }

sama seperti header, hanya perlu diperhatikan di sini SetY bernilai negatif (minus) yang memposisikan letaknya berada dibawah laporan dan untuk meletakkan gambar logo tidak menggunakan table hanya WriteHTML.  Pada baris terakhir kita tambahkan page number yang kodenya saya dapatkan dari dokumentasi atau example manual dari web resmi tcpdf.

Kode selanjutnya membuat variabel bernama isi dengan html table agar terlihat seperti laporan. :)

Semoga Bermanfaat

referensi : https://tcpdf.org/examples/example_003/

Artikel ini dibuat oleh Yudha Tri Putra sebagai penulis artikel, diperbolehkan menyalin artikel ini secara utuh tanpa mengubah atau menambah isi artikel.