Menambahkan Nomor Halaman (Page Numbering) di mPDF

Bismillahirrohmaanirrohiim. Alhamdulillahi Robbil 'Alamiin. Allahumma Sholli 'Alaa Sayyidinaa Muhammad. 


Sebagai salah satu anggota tim Zona Integritas (ZI) di kantor, saya memiliki tugas membuat laporan SPKP (Survei Persepsi Kualitas Pelayanan) dan SPAK (Survei Persepsi Anti Korupsi). Laporan ini dibuat setiap tiga bulan sekali dan formatnya tentu saja sama. Dan sebagai web developer, alih-alih membuat laporan seperti biasanya, saya ngide membuatnya secara otomatis. Dan di sinilah saya perlu membuat penomoran halaman (page numbering).

Saya membuat laporan menggunakan mPDF, pustaka dalam bahasa pemrograman PHP untuk meng-generate PDF. Ini kali pertama saya menggunakan page numbering di mPDF, jadi saya ingin mencatatnya di sini.

Persiapan

Pertama, pastikan Anda sudah meng-install composer di perangkat Anda. Jika sudah meng-install composer, harusnya persyaratan sistem lain sudah terpenuhi. Selain itu, pastikan Anda juga sudah memiliki code editor. Di sini, kita akan menggunakan Visual Studio Code.

Berikut adalah veris aplikasi yang saya gunakan saat saya menulis ini. 

  • Windows 11 Pro 24H2 26100.6584
  • Visual Studio Code 1.104.3
  • XAMPP 8.1.25
  • Composer 2.8.8
  • Mozilla Firefox 143.0.4

Sementara itu, mPDF yang saya gunakan adalah versi 8.2.6. 

Langkah-langkah

Inisialisasi Project

Pertama, mari kita buat folder untuk menyimpan project belajar kita. Saya membuat folder dengan nama mdf-page-numbering seperti ini.


Masuk ke direktori tersebut, kemudian tahan tombol Shift dan klik kanan di area kosong, dan pilih Open with Code.


Jendela Visual Studio Code akan terbuka seperti ini. 


Buat file index.php. Kita bisa membuatnya dengan mengeklik icon New File... di bagian Explorer pada Visual Studio Code kita, kemudian mengetikkan index.php, dan menekan tombol Enter.


Isi kode berikut di awal, hanya untuk memastikan project kita ada isinya.

<?php
echo "Works!"; 


Buka Terminal di Visual Studo Code. Kita bisa menggunakan kombinasi tombol Ctrl + ` untuk membukanya.


Jalankan perintah berikut untuk menjalankan development server.

php -S localhost:8080 


Tahan tombol Ctrl dan klik link yang tampil di Terminal untuk membukanya di browser Anda. 


Berikut adalah tampilan di browser.


 

Install mPDF

Buka Terminal baru. Kita bisa menggunakan kombinasi tombol Ctrl + Shift + ` untuk membuka Terminal baru. Sebentar, sepertinya bagian Explorer memakan tempat terlalu banyak. Mari kita sembunyikan dulu dengan mengeklik bagian editor teks, kemudian menekan kombinasi tombol Ctrl + B.


Bagus. Sekarang, jalankan perintah berikut untuk meng-install mPDF.

composer require mpdf/mpdf
 

Tunggu hingga proses instalasi selesai.

Setelah proses selesai, kita akan mendapatkan tampilan seperti ini.

Mari kita ganti index.php seperti ini untuk memastikan mPDF kita berjalan dengan benar.

<?php

require_once __DIR__ . '/vendor/autoload.php';

$mpdf = new \Mpdf\Mpdf();
$mpdf->WriteHTML('<h1>Hello world!</h1>');
$mpdf->Output();


Mari kita refresh tampilan di browser. Jika kita mendapatkan tampilan seperti ini, berarti sampai di sini kita masih berhasil.


 

Buat Beberapa Halaman

Selanjutnya, mari kita buat beberapa halaman. Caranya simpel, kita hanya perlu menggunakan page breaks. Meski begitu, sebenarnya ada beberapa cara menggunakan page breaks. Namun, kita akan menggunakan tag <pagebreak>. Anda bisa membaca dokumentasinya di sini.

Sebentar, kita sembunyikan dulu Terminal di Visual Studio Code agar layar menjadi lebih lega. Kita bisa menekan kembali kombinasi tombol Ctrl + `. Kalau tidak bekerja, tekan dua kali.


Ubah bagian kode ini

$mpdf->WriteHTML('<h1>Hello world!</h1>'); 

menjadi seperti ini. 

$html = "
    Halaman 1
    <pagebreak>
    
    Halaman 2
    <pagebreak>

    Halaman 3
";
$mpdf->WriteHTML($html);


Seperti yang sudah kita pelajari barusan bahwa tag <pagebreak> akan membuat halaman baru.

Sekarang, kita memiliki 3 halaman karena kita punya halaman 1 dan mengisinya dengan Halaman 1, kemudian <pagebreak> pertama membuat halaman kedua dan kita mengisinya dengan Halaman 2, kemudian <pagebreak> kedua membuat halaman ketiga dan kita mengisinya dengan Halaman 3.

Mari kita refresh browser untuk memastikan apakah ini benar terjadi.


 

Tambahkan Nomor Halaman

Setelah kita memiliki 3 halaman, inilah saatnya kita menambahkan nomor halaman pada setiap halaman.

Tambahkan kode berikut sebelum $mpdf->WriteHTML($html);.

$mpdf->SetHTMLHeader('<div style="text-align: right">{PAGENO}</div>');


Beberapa poin penting di sini: 

  • Method SetHTMLHeader() bisa kita gunakan untuk mengubah header semua halaman dalam PDF kita. Di dalamnya, kita bisa mengetikkan tag HTML (misal div beserta style-nya).
  • {PAGENO} adalah bagian yang akan terisi otomatis dengan nomor halaman.

Dokumentasi terkait setHTMLHeader() bisa kita baca di sini, sementara page numbering di mPDF bisa kita baca di sini.

Mari kita refresh browser untuk memastikan nomor halaman berhasil ditambahkan.


Bagus, sekarang kita bisa membuat laporan triwulan secara otomatis berdasar data yang masuk di aplikasi survei kita. 

Penutup

Sampai di sini, kita sudah belajar langkah-langkah menambahkan nomor halaman (page numbering) pada PDF yang kita buat menggunakan mPDF. Kita mulai dengan meninisiasi project, kemudian menambahkan library mPDF ke project kita, membuat beberapa halaman, kemudian menambahkan nomor halaman.

Semoga bermanfaat.

Wallahul muwaafiq ilaa aqwaamith thooriq.

Referensi

  1. https://mpdf.github.io/paging/page-breaks.html 
  2. https://mpdf.github.io/paging/page-numbering.html 
  3. https://mpdf.github.io/headers-footers/method-2.html

Photo by Maria Pop: https://www.pexels.com/photo/white-paper-with-black-text-341114/

Lokasi: Kec. Rungkut, Surabaya, Jawa Timur, Indonesia

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara Memilih Database MySQL Aktif via Terminal Ubuntu 22.04

Gambar
  Bismillahirrohmaanirrohiim. Alhamdulillahi Robbil 'Alamiin. Allahumma Sholli 'Alaa Sayyidinaa Muhammad. Singkatnya, kita bisa menggunakan command USE nama_database; . Tapi, saya perlu menambahkan konteks di sini. Berikut konteksnya. Konteks Sebelumnya, saya telah menulis cara membuat dan menampilkan semua database di Terminal Ubuntu 22.04. Tentu saja kita tidak hanya bisa melakukan dua hal tersebut. Kita bisa menambahkan data, memperbarui, dan menghapus data dalam suatu database . Namun, sebelum melakukan hal tersebut, kita perlu memilih dulu database yang akan kita kelola. Mengapa? Karena jika kita langsung coba melakukan suatu operasi dalam database sementara belum ada database yang kita pilih, MySQL akan menolak. Misal, kita ingin menampilkan seluruh tabel yang ada dalam database seperti tampilan di bawah. MySQL akan menolak. Karena itu, kita perlu terlebih dahulu memilih database yang ingin kita kelola. Hal pertama yang perlu kita lakukan tentu saja membuka Comman...
Baca selengkapnya

Cara Mengatasi "Access denied for user 'root'@'localhost' (mysqli_real_connect(): (HY000/1698))" di Ubuntu 20.04 LTS

Gambar
Bismillahirrohmaanirrohiim. Alhamdulillahi Robbil 'Alamiin. Allahumma Sholli 'Alaa Sayyidinaa Muhammad. Apakah Anda selalu menjumpai error tersebut ketika melakukan update di Ubuntu Anda? Jika iya, berarti kita mengalami hal yang sama. Saya juga selalu mengalami hal tersebut setiap selesai menjalankan sudo apt upgrade . Well . Sebenarnya tidak selalu. Mungkin lebih tepatnya adalah ketika sistem melakukan update pada MySQL-nya. So , pada artikel kali ini saya menunjukkan cara yang saya lakukan untuk mengatasi error tersebut. Ohiya. Sebenarnya, saya sudah lama menemui error ini dan sudah mengatasinya berulang kali dengan membuka kembali link ke StackOverflow yang pernah saya ceritakan pada artikel terdahulu . Lalu, mengapa saya menulis ini? Agar saya lebih mudah saja melakukannya secara terstruktur tanpa harus klik dan scroll-scroll jawaban di StackOverflow tadi. Baiklah, mari kita mulai saja. Langkah-langkah Mengatasinya Pertama, buka terminal . Buka mysql sebagai root ...
Baca selengkapnya

Cara Install DBeaver Up-To-Date di Ubuntu 22.04

Gambar
  Bismillahirrohmaanirrohiim. Alhamdulillahi Robbil 'Alamiin. Allahumma Sholli 'Alaa Sayyidinaa Muhammad. Singkatnya, kita bisa menggunakan command sudo apt install dbeaver-ce . Tapi, tentu kita perlu melakukan beberapa hal terlebih dahulu. Mengenal DBeaver DBeaver merupakan aplikasi yang bisa kita gunakan untuk mengelola berbagai macam database . Kita bisa melakukan hal-hal yang biasanya bisa kita lakukan di phpMyAdmin, pgSQL, dan lain sebagainya. Hal yang sangat menarik dari aplikasi ini adalah dia bisa kita gunakan untuk berbagai macam jenis DBMS. Misalnya, kita bisa menyambungkannya dengan MySQL , MariaDB , PostgreSQL , SQL Server , SQLite , dan lain sebagainya. Anda bisa membaca selengkapnya pada website resminya di sini . Hal menarik lainnya adalah dia cross-platform . DBeaver bisa kita gunakan di Ubuntu, Windows, bahkan MacOS. Tentu pada artikel kali ini, kita akan fokus membahas instalasi di Ubuntu. Saya Sudah Mencobanya, Tetapi Tidak Berhasil Apabila Anda langsung ...
Baca selengkapnya