Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Tutorial Codeigniter #2: Export Data ke PDF dengan Codeigniter

5 min read

Tutorial Codeigniter - Ilmucoding

Ingin membuat laporan suatu aplikasi dengan menggunakan export dalam bentuk PDF di Codeigniter?

Jika ya, tentu tutorial membuat fitur export data ke pdf dengan codeigniter ini sangat bermanfaat untuk para coder agar di aplikasi yang sedang dibangun bisa terintegrasi dengan PDF.

Biasanya aplikasi membutuhkan fitur export data ke PDF untuk cetak biodata, cetak laporan, cek data penilaian dan lain-lain. Mungkin, aplikasi Anda adalah salah satu yang sangat membutuhkan fitur seperti ini.

Oke, tanpa berlama-lama mari kita mulai saja proses codingnya.

Step 1 – Persiapan

Sebelum kita mulai ngoding, sebaiknya kita siapkan perangkat / softwarenya terlebih dahulu, yaitu:

Step 2 – Menyiapkan File Codeigniter

Silahkan buka situs resmi codeigniter yang sudah saya lampirkan di tahap persiapan atau coder bisa langsung klik di sini.

Download codeigniter versi terbaru.

Selesai download, silahkan pindahkan file codeigniter yang sudah di download ke direktori C:/xampp/htdocs (kami asumsikan coder menginstall xampp di direktori C, jika di D atau E tinggal menyesuaikan saja).

Lalu klik kanan pada file codeigniter yang bertipe .zip dan pilih extract here.

Setelah berhasil melakukan extract, kami akan merename nama filenya menjadi ci_pdf.

Oke! File codeigniter telah siap.

Step 3 – Menyiapkan Database

Kami asumsikan coder menggunakan Visual Code seperti pada tutorial ini.

Buka visual code, lalu pilih file -> klik open folder.

Lalu pilih folder codeigniter yang tadi sudah direname.

Klik Select Folder.

Selanjutnya untuk mengatur database, mari kita buat terlebih dahulu database ci_pdf di phpmyadmin (pastikan coder sudah mengaktifkan apache dan mysql di control panel xampp).

Klik tombol Create.

Lalu buat table order yang isinya:

Setelah selesai membuat table, sekarang tinggal menghubungkannya ke file codeigniter yang telah dibuat sebelumnya.

Silahkan coder buka file database.php di directory applications/config/database.php.

Pada baris ke 79 – 81 adalah tempat kita mengatur databasenya.

'hostname' => 'localhost',
'username' => '',
'password' => '',
'database' => '',
'dbdriver' => 'mysqli',

Ubah menjadi:

'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'ci_pdf',
'dbdriver' => 'mysqli',

Sekarang telah selesai mengatur databasenya.

Step 4 – Install Tecnickcom/tcpdf Melalui Composer

Sebelum memasuki tahap ini, pastikan coder sudah menginstall composer terlebih dahulu. Jika belum, coder bisa membaca tutorial Cara Install Composer dan Penggunaannya.

Di visual code, silahkan klik menu terminal lalu pilih new terminal. Jika Anda melalui CMD silahkan menyesuaikan saja ya. Kami menggunakan visual code yang sudah terintegrasi dengan CMD.

Sekarang, terminal di visual code sudah bisa digunakan.

Tutorial Codeigniter #2: Export Data ke PDF dengan Codeigniter - Add Terminal

Ketik composer require tecnickcom/tcpdf

Tutorial Codeigniter #2: Export Data ke PDF dengan Codeigniter - Install Tcpdf


Tunggu sampai installasi selesai.

Jika sudah selesai sekarang coder tinggal mengatur konfigurasinya agar file vendor bisa digunakan

Step 5 – Mengatur Konfigurasi Library, Helper, Base URL dan Autoload

Coba buka config.php yang ada di directory applications/config/config.php

Pada baris ke 26, ubah kode tersebut dari:

$config['base_url'] = '';

Menjadi:

$config['base_url'] = 'http://localhost/ci_pdf';

Pada baris ke 139, ubah kode tersebut dari:

$config['composer_autoload'] = FALSE;

Menjadi:

$config['composer_autoload'] =’vendor/autoload.php’;

Selanjutnya buka autoload.php, yang ada di directory applications/config/autoload.php

Pada baris ke 61, ubah kode tersebut dari:

$autoload['libraries'] = array();

Menjadi:

$autoload['libraries'] = array('database');

Lalu pada baris ke, ubah kode tersebut dari:

$autoload['helper'] = array();

Menjadi:

$autoload['helper'] = array('url');

Jika sudah selesai, maka Tcpdf sudah bisa digunakan dan lanjut mengoding.

Step 6 – Membuat Controller Order

Beri nama Order.php dan simpan di directory applications/controllersberikut codenya:

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Order extends CI_Controller {

    public function __construct()
    {
        parent::__construct();
        $this->load->model('order_model');
    }

    public function index()
    {
        $data['orders'] = $this->order_model->get_all();
        $this->load->view('list_order', $data);
    }

    public function create()
    {
        $this->load->view('add_order');
    }

    public function store()
    {
        $product = $this->input->post('product');
        $tanggal = $this->input->post('tanggal');
        $jumlah = $this->input->post('jumlah');
        $total = $this->input->post('total');
        $data = [
            'product' => $product,
            'tanggal' => $tanggal,
            'jumlah' => $jumlah,
            'total' => $total
        ];

        $simpan = $this->order_model->insert("order", $data);
        if($simpan){
            echo '<script>alert("Berhasil menambah data order");window.location.href="'.base_url('index.php/order').'";</script>';
        }
    }

    public function export() {
        $orders = $this->order_model->get_all();
        $tanggal = date('d-m-Y');

        $pdf = new \TCPDF();
        $pdf->AddPage();
        $pdf->SetFont('', 'B', 20);
        $pdf->Cell(115, 0, "Laporan Order - ".$tanggal, 0, 1, 'L');
        $pdf->SetAutoPageBreak(true, 0);

        // Add Header
        $pdf->Ln(10);
        $pdf->SetFont('', 'B', 12);
        $pdf->Cell(10, 8, "No", 1, 0, 'C');
        $pdf->Cell(55, 8, "Produk", 1, 0, 'C');
        $pdf->Cell(35, 8, "Tanggal", 1, 0, 'C');
        $pdf->Cell(35, 8, "Jumlah", 1, 0, 'C');
        $pdf->Cell(50, 8, "Total", 1, 1, 'C');
        $pdf->SetFont('', '', 12);
        foreach($orders->result_array() as $k => $order) {
            $this->addRow($pdf, $k+1, $order);
        }
        $tanggal = date('d-m-Y');
        $pdf->Output('Laporan Order - '.$tanggal.'.pdf'); 
    }

    private function addRow($pdf, $no, $order) {
        $pdf->Cell(10, 8, $no, 1, 0, 'C');
        $pdf->Cell(55, 8, $order['product'], 1, 0, '');
        $pdf->Cell(35, 8, date('d-m-Y', strtotime($order['tanggal'])), 1, 0, 'C');
        $pdf->Cell(35, 8, $order['jumlah'], 1, 0, 'C');
        $pdf->Cell(50, 8, "Rp. ".number_format($order['total'], 2, ',' , '.'), 1, 1, 'L');
    }
}

Step 7 – Membuat Model Order

Simpan dengan nama Order_model.php dan simpan di directory applications/models, berikut codenya:

<?php
class Order_model extends CI_Model
{
    public function get_all()
    {
        return $this->db->get("order");
    }

    public function insert($table, $data)
    {
        return $this->db->insert($table, $data);
    }
}

Step 8 – Membuat View List Order

Beri nama list_order.php dan simpan di directory applications/views, berikut codenya:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>List Order</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <style>
        .row {
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        List Data Order
                        <div class="btn-group float-right">
                            <a href="<?= base_url('index.php/order/create') ?>" class="btn btn-success">Tambah</a>
                            <a href="<?= base_url('index.php/order/export') ?>" class="btn btn-primary" target="_blank">Export</a>
                        </div>
                    </div>
                    <div class="card-body">
                        <table class="table table-bordered table-hover">
                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Produk</th>
                                    <th>Tanggal</th>
                                    <th>Jumlah</th>
                                    <th>Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                <?php $no = 1; foreach($orders->result_array() as $data) { ?>
                                <tr>
                                    <td><?= $no++ ?></td>
                                    <td><?= $data['product'] ?></td>
                                    <td><?= $data['tanggal'] ?></td>
                                    <td><?= $data['jumlah'] ?></td>
                                    <td class="text-left"><?= 'Rp. '.number_format($data['total'], 2, ',' , '.') ?></td>
                                </tr>
                                <?php } ?>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Page Script -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>

Step 9 – Membuat View Add Order

Save file add_order.php dan simpan di directory applications/views, berikut codenya:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Add Order</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <style>
        .row {
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        Form Add Order
                    </div>
                    <div class="card-body">
                        <form action="<?= base_url('index.php/order/store') ?>" method="post">
                            <div class="form-group">
                                <label for="">Produk</label>
                                <input type="text" name="product" class="form-control" placeholder="Product">
                            </div>
                            <div class="form-group">
                                <label for="">Tanggal</label>
                                <input type="date" name="tanggal" class="form-control">
                            </div>
                            <div class="form-group">
                                <label for="">Jumlah</label>
                                <input type="number" name="jumlah" class="form-control" placeholder="Jumlah">
                            </div>
                            <div class="form-group">
                                <label for="">Total</label>
                                <input type="number" name="total" class="form-control" placeholder="Total">
                            </div>
                            <div class="form-group">
                                <button class="btn btn-primary" type="submit">Simpan</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Page Script -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>

Step 10 – Uji Aplikasi

Jika coder tertarik dengan versi videonya, silahkan kunjungi chanel Youtube kami dalam pembahasan Membuat Fitur Export ke PDF di Codeigniter di chanel Ilmu Coding.

Untuk melihat tampilan aplikasi, berikut kami sertakan gambarnya.

Tampilan List Order yang Berisi Menu Export PDF

Tutorial Codeigniter #2: Export Data ke PDF dengan Codeigniter - List

Tampilan Add Order

Tutorial Codeigniter #2: Export Data ke PDF dengan Codeigniter - Add

Tampilan Export PDF dari Table List Order

Tutorial Codeigniter #2: Export Data ke PDF dengan Codeigniter - Final

Apa Selanjutnya?

Mungkin terbesit di benar coder budiman pertanyaan ini:

Gimana jika Anda ingin membuat laporan berdasarkan dari tanggal tertentu sampai tanggal tertentu?

Oleh sebab itu, kami pun menyediakan tutorialnya pada pembahasan Tutorial Codeigniter #3: Membuat Fitur Export Data ke PDF Berdasarkan Dua Waktu

Kesimpulan

Proses export data pada suatu aplikasi sangat dibutuhkan untuk memaksimalkan laporan tanpa harus membuatnya secara manual. Kini, dengan kolaborasi TCPDF dan Codeigniter semua itu bisa diatas dengan mudah tanpa harus ribet.

Kami berharap coder bisa mempraktikkannya di aplikasi yang sedang digarap menggunakan codeigniter.

Cukup sekian dulu tutorial kali ini semoga bermanfaat buat coder semua. Aamiin.

Salam #CodeIsEasy

Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

One Reply to “Tutorial Codeigniter #2: Export Data ke PDF dengan Codeigniter”

Leave a Reply

Your email address will not be published. Required fields are marked *

Jika terbantu dengan artikel ini, silahkan share, beri komentar dan "klik" 1 kali pada iklan ya.