Generate PDF dengan PHP dan Anywhere

Saat sedang merasa senang karena aplikasi buatan saya yang ditulis dengan PHP sudah hampir selesai, saya sering menghadapi permintaan tambahan pembuatan dokumen PDF. Padahal saat mengembangkan aplikasi, itu tidak dibahas dan otomatis meredupkan kesenangan saya karena aplikasinya gak jadi selesai sesuai dengan prediksi saya.

Masalahnya adalah: ketika saya mencoba menambahkan librarynya kedalam kode project saya, library tersebut error. Entah karena ekstensi PHP custom yang diminta tidak tersedia.atau versi PHP yang dimita oleh library adalah PHP7 sedangkan yang saya gunakan di localhost adalah PHP5 dan lain hal yang pasti tentunya membuat kita harus mikir dan kerja ekstra untuk menyelesaikan aplikasi tersebut. Solusi yang saya buat untuk menyelesaikan masalah tersebut adalah menciptakan service yang khusus mengelola PDF yang kemudian saya namakan: Anywhere

Anywhere singkatnya adalah service yang dapat men-transform data menjadi keluaran (output) berupa dokumen PDF. Klik link https://github.com/Velliz/anywhere jika ingin melihat source code nya.

Manfaat paling terasa ketika menggunakan Anywhere adalah, "Project PHP saya berukuran kecil" karena fokus saya tinggal memasukan library atau bahkan tanpa library tambahan saat aplikasi yang dibuat hanya proses login, logout, CRUD. Jadi, supaya gampang untuk mencoba/menggunakan Anywhere, saya sudah menyiapkan sebuah website untuk proses uji-coba: https://output.kukoding.com/.

Kalian dapat mendaftar atau login dengan akun saya:

username: blog

password: 12345**

Setelah saya login maka Anywhere akan menampilkan halaman utama berikut:

Dihalaman ini saya akan mencoba membuat template baru dengan menekan tombol + berwarna biru.

Anywhere akan menampilkan semua pengaturan yang dibutuhkan untuk membuat semua dokumen PDF. Mulai dari nama, ukuran kertas, posisi (portrait/landscape), data sample, php scripts dan yang paling penting adalah: API URL, .html designer dan .css designer

Saya biasanya langsung memilih .html designer dan langsung terlihat disini. Anywhere menyediakan designer dengan preview PDF instan.

Karena saya mendapat perintah dari client untuk membuat tambahan dokumen PDF, maka saya akan menghapus semua html dan menggantinya dengan tag html yang saya butuhkan untuk laporan yang saya perlukan. Yaitu layout kartu ujian lengkap dengan QR Code yang berisi informasi ID Ujian:

Bagian html:

<!--{!siswa}-->
<div class="width250" style="float: left;">
  <table class="border">
      <tr>
        <td>
            <img style="float: left;" src="https://output.kukoding.com/qr/render?data={!id_ujian}" alt="qrcodes" width="50px"/>
            <p class="text-center">KARTU PESERTA</p>
            <p class="text-center">TES UJI PESERTA {!tahun_ajaran}</p>
            <table>
                <tr>
                    <td width="60">Nama Peserta</td>
                    <td width="5">:</td>
                    <td>{!nama}</td>
                </tr>
                <tr>
                    <td width="60">Kelas</td>
                    <td width="5">:</td>
                    <td>{!kelas}</td>
                </tr>
                <tr>
                    <td width="60">Jurusan</td>
                    <td width="5">:</td>
                    <td>{!jurusan}</td>
                </tr>
            </table>
        </td>
    </tr>
  </table>
</div>
<div style="clear: left;">
<!--{/siswa}-->

Pada bagian html ini, dapat dilihat bahwa saya menggunakan custom tag seperti <!--{!siswa}-->,{!nama} yang sebenarnya mirip dengan twig atau blade templating engine, tapi pada Anywhere template engine yang digunakan adalah PTE. Mengapa menggunakan PTE? Karena PTE ini memang templating engine yang dirancang spesifik melakukan proses render file html yang masih murni. Tidak seperti templating engine lain yang penamaan filenya menggunakan ekstensi .php.

"PTE" dapat dilihat kodenya di link https://github.com/Velliz/pte

Bagian css:

body {
   font-family: "Helvetica";
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

body .text-bold {
    text-decoration: bold;
}

table {
    width: 100%;
    font-size: 10px;
}

.table-bordered {
    border-collapse: collapse;
}

.table .table-bordered, .table-bordered tr, .table-bordered th, .table-bordered td {
    border: 1px solid black;
}

.border {
    border: 1px solid black;
    margin: 5px;
}

.table .table-blank {
    border: 0px;
}

.table-blank {
    border-collapse:collapse;
    border: 0px solid white;
}

.col-50 {
    width: 50%
}

.width250 {
    max-width: 40%;
    width: 40%;
}

.label {
    color: white;
    padding: 8px;
}

.hidden {
    visibility: hidden;
}

hr.style9 {
    border-top: 1px dashed #8c8b8b;
    border-bottom: 1px dashed #fff;
}

Karena menggunakan css, saya bebas dan dapat menyesuaikannya dengan keinginan saya sendiri.

Lalu saya akan mengetes dengan data sample yang disediakan Anywhere dalam bentuk JSON dengan data berikut ini:

{
    "siswa": [
        {
            "id_ujian": "3724268887234623843",
            "tahun_ajaran": "2019/2020",
            "nama": "Didit Velliz",
            "kelas": "XII-1",
            "jurusan": "IPA"
        },
        {
            "id_ujian": "3724268887234623843",
            "tahun_ajaran": "2019/2020",
            "nama": "Didit Velliz",
            "kelas": "XII-1",
            "jurusan": "IPA"
        }
    ]
}

Dan saat kita cek kembali halaman html designer-nya maka output yang keluar sudah sesuai dengan ekspektasi. Tahapan selanjutnya tinggal menghubungkan report yang kita buat ini dengan program PHP. Karena saya membuat program dengan metode native, maka saya bisa langsung membuat file cetak.php di folder project saya dengan parameter get untuk mempermudah proses pembuatan kodenya.

Berikut kode yang saya buat:

<?php

//alamat API untuk cetak PDF
$api = "https://output.kukoding.com/pdf/render/b471b1827fa284e695ece3e1b5e3c2ed/27";

//proses query dan select data diganti (saya membuat 3 data)
//strukturnya disesuaikan dengan tag PTE di template.
$data['siswa'] = [
    [
        "id_ujian" => "3724268887234623843",
        "tahun_ajaran" => "2019/2020",
        "nama" => "Didit Velliz",
        "kelas" => "XII-1",
        "jurusan" => "IPS"
    ],
    [
        "id_ujian" => "3724268324112123241",
        "tahun_ajaran" => "2019/2020",
        "nama" => "Aira Vhanessa",
        "kelas" => "XII-1",
        "jurusan" => "IPA"
    ],
    [
        "id_ujian" => "3242309009000923426",
        "tahun_ajaran" => "2019/2020",
        "nama" => "Clara Vhanessa",
        "kelas" => "XII-2",
        "jurusan" => "IPA"
    ]
];

//proses send data menggunakan PHP cURL dijadikan json dan disamakan dengan data sample
$post['jsondata'] = json_encode($data);

//custom header
header("Cache-Control: no-cache");
header("Pragma: no-cache");
header('Content-Type: application/pdf');

//output buffer
ob_start();
$curl = curl_init();
//memasukan alamat api
curl_setopt($curl, CURLOPT_URL, $api);
//melakukan http POST request
curl_setopt($curl, CURLOPT_POST, true);

curl_setopt($curl, CURLOPT_POSTFIELDS, $post);
curl_setopt($curl, CURLOPT_USERAGENT, 'php-native');
//eksekusi cURL
$response = curl_exec($curl);
curl_close($curl);

//cetak dokumen PDF
echo $response;

?>

Lalu saya jalankan dan sukses.

Extra: pada halaman website Anywhere, ternyata saya juga dapat melihat log event print dan preview data yang di-print.

Cukup menarik bagi saya karena jika di kemudian hari ada revisi layout saya hanya perlu merubahnya di Anywhere dan tidak perlu mengubah kode saya sama sekali.

Saya merasa puas setelah menggunakan Anywhere. Saya tidak perlu lagi repot-repot kedepannya jika ingin membuat dokumen PDF. Saya merasakan manfaat dan proses pembuatan dokumen PDF jadi mudah & cepat.

Semoga Anywhere yang saya buat dapat bermanfaat juga untuk kita semua :D