Portal Document Format (PDF) adalah salah satu format file paling populer saat ini. Individu dapat melihat, mengirim, dan menerima dokumen PDF terlepas dari sistem operasi, perangkat keras, atau perangkat lunak mereka. Dengan demikian, isi dokumen PDF akan tampil sama di semua platform. Dalam tutorial langkah demi langkah ini, kita akan membahas cara bekerja dengan PDF di PHP
Anda dapat mengakses kode lengkap yang akan digunakan dalam tutorial ini dari repositori GitHub ini
Sejarah PDF
Adobe memperkenalkan PDF pada tahun 1993 untuk memungkinkan orang berbagi dan mempresentasikan dokumen dengan mudah. Sejak saat itu, PDF menjadi standar terbuka dan didukung oleh International Organization for Standardization (ISO). Saat ini, PDF telah berevolusi untuk memuat logika bisnis, gambar, audio, tombol, formulir, dan bahkan tautan. Oleh karena itu, memiliki pengetahuan tentang bekerja dengan PDF dalam PHP sangat penting
Prasyarat
Untuk mengikuti tutorial ini, Anda memerlukan pengetahuan dasar tentang PHP, HTML, dan SQL. Anda juga harus menginstal XAMPP di komputer Anda. Kerangka kerja ini memungkinkan kami menghosting situs web secara lokal
Cara Membuat File PDF di PHP
Arahkan ke direktori xampp dan kemudian klik pada folder htdocs. Dalam kebanyakan kasus, direktori xampp default pada Windows ditemukan di Local Disk C
Buat folder baru dan berikan nama proyek pilihan Anda. Dalam kasus saya, saya akan menamainya pdfexample. Kami sekarang dapat membuka folder ini di editor kode, seperti Visual Studio Code
Di folder pdfexample, tambahkan file baru dan beri nama <link href="//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> 9. File ini akan berfungsi sebagai halaman root untuk situs web kami
Tambahkan kode boilerplate berikut di <link href="//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> 9
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <h4>Welcome to PDF Example</h4> </body> </html>
Selanjutnya, luncurkan panel kontrol XAMPP dan mulai instance Apache dan MySQL. Saat Anda menavigasi ke localhost/pdfexample/, Anda akan melihat halaman dengan pesan Selamat datang di contoh PDF
Hingga langkah ini, kami telah menyiapkan lingkungan pengembangan dan menghosting aplikasi secara lokal menggunakan XAMPP
Sekarang mari tambahkan formulir sederhana lalu buat PDF
Perhatikan bahwa kami akan menggunakan Bootstrap untuk penataan. Oleh karena itu, ingatlah untuk menambahkan baris berikut di bagian <div class="container mt-5"> <h4 class="text-center">Welcome to PDF example</h4> <p class="text-center">Please fill the details before</p> <div class="col-md-6 offset-md-3"> <form method="POST" class="form" action="createfile.php"> <label class="form-label" for="username">Name</label><br> <input class="form-control" name="username" type="text" required><br> <label class="form-label" for="usermail">Email</label><br> <input class="form-control" name="usermail" type="text" required><br> <label class="form-label" for="residence">Residence</label><br> <input class="form-control" name="residence" type="text" required><br> <label class="form-label" for="yourstory">Your Story</label><br> <textarea class="form-control" name="yourstory" rows="5" required></textarea> <div class="d-grid gap-2 col-6 mx-auto mt-5"> <button type="submit" class="btn btn-primary btn-block">Download PDF</button> </div> </form> </div> </div> 1
<link href="//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
Di file <link href="//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> _9, tambahkan konten berikut di bagian <div class="container mt-5"> <h4 class="text-center">Welcome to PDF example</h4> <p class="text-center">Please fill the details before</p> <div class="col-md-6 offset-md-3"> <form method="POST" class="form" action="createfile.php"> <label class="form-label" for="username">Name</label><br> <input class="form-control" name="username" type="text" required><br> <label class="form-label" for="usermail">Email</label><br> <input class="form-control" name="usermail" type="text" required><br> <label class="form-label" for="residence">Residence</label><br> <input class="form-control" name="residence" type="text" required><br> <label class="form-label" for="yourstory">Your Story</label><br> <textarea class="form-control" name="yourstory" rows="5" required></textarea> <div class="d-grid gap-2 col-6 mx-auto mt-5"> <button type="submit" class="btn btn-primary btn-block">Download PDF</button> </div> </form> </div> </div> 3
<div class="container mt-5"> <h4 class="text-center">Welcome to PDF example</h4> <p class="text-center">Please fill the details before</p> <div class="col-md-6 offset-md-3"> <form method="POST" class="form" action="createfile.php"> <label class="form-label" for="username">Name</label><br> <input class="form-control" name="username" type="text" required><br> <label class="form-label" for="usermail">Email</label><br> <input class="form-control" name="usermail" type="text" required><br> <label class="form-label" for="residence">Residence</label><br> <input class="form-control" name="residence" type="text" required><br> <label class="form-label" for="yourstory">Your Story</label><br> <textarea class="form-control" name="yourstory" rows="5" required></textarea> <div class="d-grid gap-2 col-6 mx-auto mt-5"> <button type="submit" class="btn btn-primary btn-block">Download PDF</button> </div> </form> </div> </div>
Pada kode di atas, kami memiliki formulir sederhana yang memungkinkan pengguna memasukkan nama, email, tempat tinggal, dan cerita mereka. Saat pengguna mengklik tombol kirim, mereka akan diarahkan ke halaman baru tempat mereka akan mengunduh file PDF
Di direktori root proyek Anda, buat file baru dan beri nama <div class="container mt-5"> <h4 class="text-center">Welcome to PDF example</h4> <p class="text-center">Please fill the details before</p> <div class="col-md-6 offset-md-3"> <form method="POST" class="form" action="createfile.php"> <label class="form-label" for="username">Name</label><br> <input class="form-control" name="username" type="text" required><br> <label class="form-label" for="usermail">Email</label><br> <input class="form-control" name="usermail" type="text" required><br> <label class="form-label" for="residence">Residence</label><br> <input class="form-control" name="residence" type="text" required><br> <label class="form-label" for="yourstory">Your Story</label><br> <textarea class="form-control" name="yourstory" rows="5" required></textarea> <div class="d-grid gap-2 col-6 mx-auto mt-5"> <button type="submit" class="btn btn-primary btn-block">Download PDF</button> </div> </form> </div> </div> 4. Ini akan berisi logika untuk menghasilkan PDF berdasarkan data pengguna
Kami perlu mengunduh dan mengimpor perpustakaan mpdf ke dalam proyek kami. Untuk melakukannya, pastikan Anda telah menginstal Composer
Di direktori root proyek Anda, luncurkan terminal terintegrasi lalu instal <div class="container mt-5"> <h4 class="text-center">Welcome to PDF example</h4> <p class="text-center">Please fill the details before</p> <div class="col-md-6 offset-md-3"> <form method="POST" class="form" action="createfile.php"> <label class="form-label" for="username">Name</label><br> <input class="form-control" name="username" type="text" required><br> <label class="form-label" for="usermail">Email</label><br> <input class="form-control" name="usermail" type="text" required><br> <label class="form-label" for="residence">Residence</label><br> <input class="form-control" name="residence" type="text" required><br> <label class="form-label" for="yourstory">Your Story</label><br> <textarea class="form-control" name="yourstory" rows="5" required></textarea> <div class="d-grid gap-2 col-6 mx-auto mt-5"> <button type="submit" class="btn btn-primary btn-block">Download PDF</button> </div> </form> </div> </div> 5 menggunakan perintah di bawah ini
composer require mpdf/mpdf
Setelah instalasi selesai dengan sukses, buka file <div class="container mt-5"> <h4 class="text-center">Welcome to PDF example</h4> <p class="text-center">Please fill the details before</p> <div class="col-md-6 offset-md-3"> <form method="POST" class="form" action="createfile.php"> <label class="form-label" for="username">Name</label><br> <input class="form-control" name="username" type="text" required><br> <label class="form-label" for="usermail">Email</label><br> <input class="form-control" name="usermail" type="text" required><br> <label class="form-label" for="residence">Residence</label><br> <input class="form-control" name="residence" type="text" required><br> <label class="form-label" for="yourstory">Your Story</label><br> <textarea class="form-control" name="yourstory" rows="5" required></textarea> <div class="d-grid gap-2 col-6 mx-auto mt-5"> <button type="submit" class="btn btn-primary btn-block">Download PDF</button> </div> </form> </div> </div> 4 yang telah kita buat tadi lalu tambahkan kode berikut
<?php require_once __DIR__ . '/vendor/autoload.php';
Baris di atas memungkinkan kita memuat banyak kelas PHP secara otomatis, sehingga mengurangi kesalahan. Kita perlu menginisialisasi perpustakaan <div class="container mt-5"> <h4 class="text-center">Welcome to PDF example</h4> <p class="text-center">Please fill the details before</p> <div class="col-md-6 offset-md-3"> <form method="POST" class="form" action="createfile.php"> <label class="form-label" for="username">Name</label><br> <input class="form-control" name="username" type="text" required><br> <label class="form-label" for="usermail">Email</label><br> <input class="form-control" name="usermail" type="text" required><br> <label class="form-label" for="residence">Residence</label><br> <input class="form-control" name="residence" type="text" required><br> <label class="form-label" for="yourstory">Your Story</label><br> <textarea class="form-control" name="yourstory" rows="5" required></textarea> <div class="d-grid gap-2 col-6 mx-auto mt-5"> <button type="submit" class="btn btn-primary btn-block">Download PDF</button> </div> </form> </div> </div> _5 sebelum melanjutkan lebih jauh
$mpdf = new \Mpdf\Mpdf();
Langkah selanjutnya adalah mengambil nilai pengguna dalam metode <div class="container mt-5"> <h4 class="text-center">Welcome to PDF example</h4> <p class="text-center">Please fill the details before</p> <div class="col-md-6 offset-md-3"> <form method="POST" class="form" action="createfile.php"> <label class="form-label" for="username">Name</label><br> <input class="form-control" name="username" type="text" required><br> <label class="form-label" for="usermail">Email</label><br> <input class="form-control" name="usermail" type="text" required><br> <label class="form-label" for="residence">Residence</label><br> <input class="form-control" name="residence" type="text" required><br> <label class="form-label" for="yourstory">Your Story</label><br> <textarea class="form-control" name="yourstory" rows="5" required></textarea> <div class="d-grid gap-2 col-6 mx-auto mt-5"> <button type="submit" class="btn btn-primary btn-block">Download PDF</button> </div> </form> </div> </div> 8 dan menyimpannya dalam variabel baru
$username=$_POST['username']; $usermail=$_POST['usermail']; $residence=$_POST['residence']; $userstory=$_POST['yourstory'
Kami akan menyimpan data di atas dalam satu variabel, sebagai berikut
$infor =''; $infor .='<h2>Details</h2>'; $infor .='<strong>Username: </strong>' . $username . '<br/>'; $infor .='<strong>Email: </strong>' . $usermail .'<br/>'; $infor .='<strong>Residence: </strong>' . $residence .'<br/>'; $infor .='<strong>Testimonial: </strong>' . $userstory .'<br/>';
Kami sekarang dapat menampilkan data di browser sebagai file PDF menggunakan kode berikut
$mpdf->WriteHTML($infor); $mpdf->Output();
Seluruh kode dalam file <div class="container mt-5"> <h4 class="text-center">Welcome to PDF example</h4> <p class="text-center">Please fill the details before</p> <div class="col-md-6 offset-md-3"> <form method="POST" class="form" action="createfile.php"> <label class="form-label" for="username">Name</label><br> <input class="form-control" name="username" type="text" required><br> <label class="form-label" for="usermail">Email</label><br> <input class="form-control" name="usermail" type="text" required><br> <label class="form-label" for="residence">Residence</label><br> <input class="form-control" name="residence" type="text" required><br> <label class="form-label" for="yourstory">Your Story</label><br> <textarea class="form-control" name="yourstory" rows="5" required></textarea> <div class="d-grid gap-2 col-6 mx-auto mt-5"> <button type="submit" class="btn btn-primary btn-block">Download PDF</button> </div> </form> </div> </div> _4 ditunjukkan di bawah ini
<?php require_once __DIR__ . '/vendor/autoload.php'; $mpdf = new \Mpdf\Mpdf(); $username=$_POST['username']; $usermail=$_POST['usermail']; $residence=$_POST['residence']; $userstory=$_POST['yourstory']; $infor =''; $infor .='<h2>Details</h2>'; $infor .='<strong>Username: </strong>' . $username . '<br/>'; $infor .='<strong>Email: </strong>' . $usermail .'<br/>'; $infor .='<strong>Residence: </strong>' . $residence .'<br/>'; $infor .='<strong>Testimonial: </strong>' . $userstory .'<br/>'; $mpdf->WriteHTML($infor); $mpdf->Output(); ?>
Ketika Anda menavigasi ke browser Anda dan mengklik tombol buat file PDF, Anda akan melihat sesuatu yang mirip dengan yang berikut ini
Cara Menambahkan Catatan Basis Data ke File PDF
Sebagian besar situs web menyimpan informasi pengguna dalam database. Oleh karena itu, memahami cara menyajikan data ini dalam PDF sangatlah penting
Pada langkah ini, kami akan mengambil catatan dari database MYSQL dan kemudian menggunakannya untuk membuat file PDF. Untuk memulai, arahkan ke panel composer require mpdf/mpdf _0 Anda dan buat database baru
Selanjutnya, tambahkan tabel dan beberapa record. Anda dapat mempelajari lebih lanjut tentang database MYSQL di sini
Setelah database berhasil dibuat, arahkan ke direktori root proyek Anda dan buat file composer require mpdf/mpdf 1. Ini akan berisi logika untuk terhubung ke database MYSQL
Di file composer require mpdf/mpdf _1, tambahkan kode berikut
<link href="//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> 0
Pada kode di atas, kita terhubung ke database lokal bernama composer require mpdf/mpdf 3. Admin basis data adalah composer require mpdf/mpdf 4, dan tidak ada kata sandi (untuk tujuan pengujian)
Jika koneksi database gagal, pesan kesalahan akan ditampilkan
Untuk menampilkan catatan basis data kami, buat file baru dan beri nama composer require mpdf/mpdf 5. Kami akan mengimpor file composer require mpdf/mpdf _1 di sini untuk memungkinkan kami terhubung ke database
<link href="//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> _1
Langkah selanjutnya adalah mengakses tabel kami dan mengambil semua catatan
<link href="//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> _2
Kami akan menggunakan composer require mpdf/mpdf _7 loop untuk melihat semua entri dalam database dan kemudian menampilkannya di halaman web
<link href="//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> _3
Item berikut akan ditampilkan di browser
Ingatlah untuk menambahkan tombol di bagian bawah halaman untuk memungkinkan kami mengunduh file PDF. Kami akan menautkan tombol ini ke file composer require mpdf/mpdf _8 yang akan kami buat di langkah berikutnya
Ini kode untuk file composer require mpdf/mpdf 5
<link href="//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> _4
Untuk menghasilkan file PDF dengan data di atas, buat file baru bernama composer require mpdf/mpdf 8 di direktori root proyek
Dalam file ini, sekali lagi kita akan mengimpor file composer require mpdf/mpdf 1 untuk memungkinkan akses ke database
<link href="//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> 5
Selanjutnya, kami menginisialisasi pustaka <div class="container mt-5"> <h4 class="text-center">Welcome to PDF example</h4> <p class="text-center">Please fill the details before</p> <div class="col-md-6 offset-md-3"> <form method="POST" class="form" action="createfile.php"> <label class="form-label" for="username">Name</label><br> <input class="form-control" name="username" type="text" required><br> <label class="form-label" for="usermail">Email</label><br> <input class="form-control" name="usermail" type="text" required><br> <label class="form-label" for="residence">Residence</label><br> <input class="form-control" name="residence" type="text" required><br> <label class="form-label" for="yourstory">Your Story</label><br> <textarea class="form-control" name="yourstory" rows="5" required></textarea> <div class="d-grid gap-2 col-6 mx-auto mt-5"> <button type="submit" class="btn btn-primary btn-block">Download PDF</button> </div> </form> </div> </div> 5
$mpdf = new \Mpdf\Mpdf();
Kami kemudian mengakses catatan dalam tabel database menggunakan composer require mpdf/mpdf 7 loop. Kami akan menambahkan setiap entri basis data ke string (<?php require_once __DIR__ . '/vendor/autoload.php'; 4) dan kemudian menampilkannya di bagian akhir
<link href="//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> _7
Kode terakhir dalam file composer require mpdf/mpdf 8 akan muncul seperti yang ditunjukkan di bawah ini
<link href="//cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> _8
Saat Anda mengakses file composer require mpdf/mpdf _8 di browser, Anda akan melihat dokumen PDF yang berisi semua entri basis data Anda
File PDF dapat diunduh dengan mengklik ikon unduh di browser Anda
Kelemahan yang Harus Diwaspadai
Dalam tutorial ini, kita telah mempelajari cara membuat PDF dalam PHP. Pustaka <?php require_once __DIR__ . '/vendor/autoload.php'; _7 telah mempermudah pembuatan dan pemformatan PDF daripada menggunakan modul asli. Namun demikian, Anda harus memastikan bahwa data disajikan dalam format yang benar untuk menghindari bug atau kesalahan dalam kode Anda. Misalnya, metode <?php require_once __DIR__ . '/vendor/autoload.php'; _8 hanya menerima string sebagai parameternya