Tutorial Codeigniter 4 - Generate PDF

byAndrian Ade Rizma -


Generate PDF dengan DOMPDF - Selamat datang di website CopyPasteCode, pada tutorial kali ini kita akan belajar bagaimana cara membuat generate pdf pada Codeigniter 4

Disini saya akan menggunakan Library DomPDF untuk membuat atau men-generate data yang ada di database menjadi file pdf

Sebelum masuk pada tutorial, sebaiknya kita mengetahui apa saja langkah-langkah atau step yang harus dilakukan pada tutorial kali ini, berikut adalah langkah-langkah-nya :

  • Membuat Database & Tabel
  • Koneksi Database
  • Mendownload Library DomPDF
  • Membuat Controllers
  • Membuat Models
  • Membuat views
  • Menambahkan Routes
  • Testing
Bagi teman-teman yang sudah mempunyai database & tabel sendiri yang akan digunakan, dan sudah terkoneksi / terhubung pada project Codeigniter 4, teman-teman bisa skip atau lewati langkah poin 1 dan poin 2 diatas.

Membuat Database & Tabel

Buka XAMPP Control Panel, jalankan Apache dan MySQL, lalu buka phpMyAdmin kemudian tambahkan / buat database baru, disini saya akan menamai Database dengan nama crud, setelah membuat database dengan nama crud jalankan query SQL berikut :

 -- phpMyAdmin SQL Dump
-- version 4.9.0.1
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: May 15, 2022 at 05:10 PM
-- Server version: 10.3.16-MariaDB
-- PHP Version: 7.3.6

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `crud`
--

-- --------------------------------------------------------

--
-- Table structure for table `mahasiswa`
--

CREATE TABLE `mahasiswa` (
  `nim` char(14) NOT NULL,
  `nama` varchar(100) NOT NULL,
  `jenis_kelamin` enum('Laki-laki','Perempuan') NOT NULL,
  `prodi` enum('Matematika','Sistem Informasi','Statistika') NOT NULL,
  `tempat_lahir` varchar(100) NOT NULL,
  `tanggal_lahir` date NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `mahasiswa`
--

INSERT INTO `mahasiswa` (`nim`, `nama`, `jenis_kelamin`, `prodi`, `tempat_lahir`, `tanggal_lahir`) VALUES
('229', 'Rifki', 'Perempuan', 'Matematika', 'Jerman', '2021-11-30'),
('234', 'ma\'jid', 'Perempuan', 'Matematika', 'Singapur', '2021-11-23'),
('235', 'Kevin', 'Laki-laki', 'Statistika', 'Arso', '2021-12-02'),
('236', 'nikolas', 'Laki-laki', 'Matematika', 'Malaysia', '1998-11-22'),
('237', 'yanto', 'Laki-laki', 'Matematika', 'Belanda', '1997-11-01'),
('238', 'Yanti', 'Laki-laki', 'Matematika', 'Ubruk', '2022-03-01'),
('239', 'mr.kisman', 'Perempuan', 'Matematika', 'Japan', '2022-03-31'),
('253', 'andrian', 'Laki-laki', 'Sistem Informasi', 'jayapura', '2022-04-05'),
('257', 'Mr.dedy', 'Laki-laki', 'Statistika', 'Thailand', '2022-04-07'),
('258', 'yohio', 'Perempuan', 'Statistika', 'korea', '2022-04-13'),
('42', 'Stinkoy', 'Laki-laki', 'Sistem Informasi', 'Indonesia', '2021-05-02');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `mahasiswa`
--
ALTER TABLE `mahasiswa`
  ADD PRIMARY KEY (`nim`);
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Copy query SQL diatas, kemudian pastekan pada menu SQL phpMyAdmin, seperti contoh gambar berikut :


Tunggu sampai pembuatan Table-nya selesai, setelah itu refresh halaman phpMyAdmin, maka akan tampil tabel pada database dengan nama mahasiswa.

Koneksi Database

Setelah membuat Database dan Tabel seperti langkah diatas, sekarang kita akan mengkoneksikan atau menghubungkan Database yang telah kita buat pada project Codeigniter 4 kita.

Buka project Codeigniter 4 teman-teman pada Code Editor, disini saya menggunakan vs code, saya merekomendasikan teman-teman untuk menggunakan VS Code atau Visual Studio Code ini sebagai code editor yang akan gunakan.

Temukan file dengan nama env, lalu copy file tersebut, sehingga menjadi 2 file, kemudian rename salah 1 file env tersebut menjadi .env seperti petunjuk gambar berikut :



Setelah itu buka file .env, lalu modifikasi seperti contoh gambar berikut :

Sebelum di modifikasi :


Sesudah di modifikasi :


Mendownload Library DomPDF

Buka terminal bawaan VS Code dengan cara Ctrl+`, kemudian ketikan / tuliskan perintah berikut pada terminal :

composer require dompdf/dompdf

Setelah mengetikan perintah diatas, tekan enter dan tunggu sampai proses download selesai

Membuat Controllers

Untuk pembuatan Controllers, disini saya akan menggunakan fitur bawaan Codeigniter 4 untuk membuat controllers dengan cara mengetikan perintah dibawah pada terminal :

php spark make:controller PdfController

Tunggu sampai proses pembuatan controller dengan nama PdfController selesai dibuat.

Setelah itu buka folder app/Controllers, temukan file dengan nama PdfController lalu modifikasi, seperti contoh berikut :

 Sebelum di Modifikasi :
<?php

namespace App\Controllers;

use App\Controllers\BaseController;

class PdfController extends BaseController
{
    public function index()
    {     ///    }
}

Setelah di Modifikasi :


<?php

namespace App\Controllers;

use App\Controllers\BaseController;
use App\Models\PdfModel;
use Dompdf\Dompdf;

class PdfController extends BaseController
{
    public function __construct()
    {
        $this->Pdf = new PdfModel();
        $this->dompdf = new Dompdf();
    }

    public function index()
    {
        $data = array(
            'title' => "Pdf",   // judul halaman
            'mahasiswa' => $this->Pdf->findAll(), // ambil data mahasiswa
        );          // load halaman untuk manampilkan data mahasiswa
        return view('mahasiswa_view', $data);
    }

    public function generate()
    {          // nama file PDF
        $filename = 'Data Mahasiswa';
         // ambil data mahasiswa
        $data = array(
            'mahasiswa' => $this->Pdf->findAll(),
        );         // load HTML content
        $this->dompdf->loadHtml(view('pdf_view', $data));

        // (optional) setup the paper size and orientation
        $this->dompdf->setPaper('A4', 'Potrait');

        // render html as PDF
        $this->dompdf->render();

        // output the generated pdf
        $this->dompdf->stream($filename);
    }
}

Membuat Models

Untuk pembuatan Models, kurang lebih caranya mirip-mirip seperti cara pembuatan Controllers yaitu dengan menggunakan fitur bawaan Codeigniter 4, dengan cara ketikan perintah dibawah pada terminal :

php spark make:model PdfModel

Setelah mengetikan perintah diatas, tekan enter dan tunggu sampai proses pembuatan Models-nya selesai dibuat.

Setelah itu buka folder app/Models, temukan file dengan nama PdfModel lalu modifikasi, seperti contoh berikut :

Sebelum di Modifikasi :

 <?php

namespace App\Models;

use CodeIgniter\Model;

class PdfModel extends Model
{
    protected $DBGroup          = 'default';
    protected $table            = 'pdfs';
    protected $primaryKey       = 'id';
    protected $useAutoIncrement = true;
    protected $insertID         = 0;
    protected $returnType       = 'array';
    protected $useSoftDeletes   = false;
    protected $protectFields    = true;
    protected $allowedFields    = [];

    // Dates
    protected $useTimestamps = false;
    protected $dateFormat    = 'datetime';
    protected $createdField  = 'created_at';
    protected $updatedField  = 'updated_at';
    protected $deletedField  = 'deleted_at';

    // Validation
    protected $validationRules      = [];
    protected $validationMessages   = [];
    protected $skipValidation       = false;
    protected $cleanValidationRules = true;

    // Callbacks
    protected $allowCallbacks = true;
    protected $beforeInsert   = [];
    protected $afterInsert    = [];
    protected $beforeUpdate   = [];
    protected $afterUpdate    = [];
    protected $beforeFind     = [];
    protected $afterFind      = [];
    protected $beforeDelete   = [];
    protected $afterDelete    = [];
}

Setelah di Modifikasi :

<?php

namespace App\Models;

use CodeIgniter\Model;

class PdfModel extends Model
{
    protected $table         = 'mahasiswa'; // nama tabel yang digunakan
}

Membuat Views

Buka folder app/Views, lalu tambahkan file berikut :
  • mahasiswa_view.php : untuk menampilkan data mahasiswa dari Database
  • pdf_view.php : halaman yang akan di generate menjadi file PDF
Seperti contoh berikut :


Tambahkan script berikut pada mahasiswa_view.php

 <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><?= $title; ?></title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>

<body>

    <h4 class="text-center mt-5">Gerenarte PDF Dengan Codeigniter 4 + DomPDF</h4>

    <div class="container-fluid mt-5">

        <div class="card">
            <div class="card-header">
                <a href="<?= route_to('download-pdf'); ?>" class="btn-sm btn btn-primary">
                    PDF
                </a>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped text-center">
                        <thead class="text-white bg-primary text-capitalize">
                            <tr>
                                <th>No</th>
                                <th>nim</th>
                                <th>nama</th>
                                <th>jenis kelamin</th>
                                <th>prodi</th>
                                <th>tempat lahir</th>
                                <th>tanggal lahir</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- Ketika data kosong tampilkan ini -->
                            <?php if (empty($mahasiswa)) : ?>
                                <td colspan="7">
                                    <div align="center" class="alert alert-danger" role="alert">
                                        Data tidak ditemukan
                                    </div>
                                </td>
                            <?php endif; ?>

                            <?php foreach ($mahasiswa as $key => $data) : ?>

                                <tr>
                                    <td><?= $key + 1 ?></td>
                                    <td><?= $data['nim']; ?></td>
                                    <td><?= $data['nama']; ?></td>
                                    <td><?= $data['jenis_kelamin']; ?></td>
                                    <td><?= $data['prodi']; ?></td>
                                    <td><?= $data['tempat_lahir']; ?></td>
                                    <td><?= $data['tanggal_lahir']; ?></td>
                                </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

</body>

</html>

Tambahkan script berikut pada pdf_view.php

 <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>Data Mahasiswa Pdf</title>
    <style type="text/css">
        table {
            font-family: verdana, arial, sans-serif;
            font-size: 11px;
            border-width: 1px;
            border-color: #000;
            border-collapse: collapse;
        }

        thead {
            text-transform: capitalize;
        }
    </style>
</head>

<body>

    <center width=520px>
        <font face="Times New Roman" color="black">
            <h2 align="center" style="text-transform:uppercase"><u>Data Mahasiswa Pdf</u></h2>
        </font>
    </center>


    <table bordered border="1" style="width: 100%" align="center">
        <thead align="center" style="background-color: aqua;">
            <tr>
                <th style="width: 2%;">No</th>
                <th style="width: 5%;">nim</th>
                <th style="width: 10%;">nama</th>
                <th style="width: 10%;">jenis kelamin</th>
                <th style="width: 10%;">prodi</th>
                <th style="width: 10%;">tempat lahir</th>
                <th style="width: 10%;">tanggal lahir</th>
            </tr>
        </thead>
        <tbody>
            <!-- Ketika data kosong tampilkan ini -->
            <?php if (empty($mahasiswa)) : ?>
                <td colspan="6">
                    <div align="center" class="alert alert-danger" role="alert">
                        Data tidak ditemukan
                    </div>
                </td>
            <?php endif; ?>

            <?php foreach ($mahasiswa as $key => $data) : ?>

                <tr color="black" align="center">
                    <td><?= $key + 1 ?></td>
                    <td><?= $data['nim']; ?></td>
                    <td><?= $data['nama']; ?></td>
                    <td><?= $data['jenis_kelamin']; ?></td>
                    <td><?= $data['prodi']; ?></td>
                    <td><?= $data['tempat_lahir']; ?></td>
                    <td><?= $data['tanggal_lahir']; ?></td>
                </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
</body>

</html>

Menambahkan Routes

Penggunaan Routes pada framework Codeigniter 4 sebenarnya tidak wajib, bisa menggunakan Routes dan bisa juga tidak menggunakan Routes, namun kita gunakan saja, agar nantinya teman-teman lebih terbiasa menggunakan Routes ini, karena menurut saya penggunaan Routes ini sangatlah penting.

Buka folder app/Config, temukan file dengan nama Routes.php lalu buka Routes.php dan tambahkan Routes berikut setelah :

 $routes->get('/mahasiswa', 'PdfController::index');
$routes->get('/download-pdf', 'PdfController::generate');

Letakan Routes diatas setelah $routes->get('/', 'Home::index');, seperti contoh gambar berikut :


Testing

Jalankan Local Development Server Codeigniter, lalu akses URL berikut pada web browser http://localhost:8080/mahasiswa, jika teman-teman sudah mengikuti langkah-langkah diatas, seharusnya akan tampil seperti berikut :


Jika sudah tampil seperti gambar diatas, sekarang kita coba fitur generate pdf dengan cara klik tombol PDF diatas, setelah itu teman-teman akan mendownload sebuah file dengan nama Data Mahasiswa.pdf.

Buka file Data Mahasiswa.pdf, maka  akan tampil seperti berikut :



Saya kira kurang lebih seperti itu ya teman-teman, tentang bagaimana cara membuat generate PDF pada Codeginiter 4.

Jika ada yang ingin teman-teman tanyakan, jangan ragu untuk bertanya pada kolom komentar dibawah, dan sampai jumlah pada tutorial-tutorial berikutnya, semoga bermanfaat bye..byee ^^







Tags

Posting Komentar

Lebih baru Lebih lama

Formulir Kontak