Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

 |  | 
Anda ingin membuat website?
Untuk Anda yang sedang mencari orang untuk jasa pembuatan website, Saya akan bantu buatkan aplikasi sesuai kebutuhan Anda. Segera hubungi : [email protected]. Selengkapnya tentang profil saya klik www.rizaldimaulidia.com.

Codeigniter

Cara Membuat Laporan PDF Plus Filter Periode Tanggal dengan Codeigniter

img-responsive

Laporan PDF Plus Filter Periode Tanggal dengan PHP dan MySQL. Saya akan buatkan versi Codeigntiernya. Laporan adalah salah satu fitur yang mungkin ada di setiap Aplikasi. Dan biasanya laporan dibuat dengan berbagai filter data didalamnya. Seperti halnya yang akan kita bahas saat ini, kita akan buat sebuah Laporan PDF dengan Filter Periode Tanggal (Star – End Date / Tanggal Awal – Akhir). Kita langsung coba bahas saja sekarang.

SOURCE CODE
Dalam catatan / tutorial ini, saya sudah menyiapkan 3 source code berbeda, yakni Versi Tanpa htaccess, Versi dengan htaccess, Versi dengan Bootstrap 3 dan Versi dengan Bootstrap 4. Jadi Kamu bisa Download sesuai kebutuhan masing-masing. Source code tersebut bisa kamu download pada bagian akhir tutorial ini.

Pada tutorial ini kita akan menggunakan bootstrap 3 untuk pembahasannya.


DEMO
Sebelum masuk ke tutorialnya. Mungkin ada yang mau lihat demonya terlebih dahulu. Silahkan klik link berikut untuk melihat demonya : Lihat Demo.


STEP 1 – PERSIAPAN
Kita akan mempersiapkan terlebih dahulu hal-hal yang diperlukan.

  1. Download Framework Codeigniter, klik link berikut : Download.
  2. Download HTML2PDF, klik link berikut ini : Download.
  3. Download Bootstrap 3, klik link berikut ini : Download.
    Bootstrap 3 ini akan kita gunakan untuk Desain yang lebih bagus.
  4. Download Bootstrap Datepicker, klik link berikut ini : Download.
    Librari ini akan kita gunakan agar Filter Tanggalnya menggunakan Datepicker.
  5. Download jQuery, klik link berikut ini : Download.
  6. Buat sebuah folder baru dengan nama latihan_pdf, lalu simpan pada folder xampp/htdocs/.
  7. Buat sebuah folder baru dengan nama assets, lalu simpan pada folder xampp/htdocs/latihan_pdf/.
  8. Buat sebuah folder baru dengan nama libraries, lalu simpan pada folder xampp/htdocs/latihan_pdf/assets/.
  9. Ekstrak codeigniter_v3.7z yang telah di download tadi.
  10. Copy semua file dan folder yang ada di folder codeigniter_v3 yang telah di ekstrak tadi ke folder xampp/htdocs/latihan_pdf/.
  11. Ekstrak file html2pdf.7z yang sudah didownload.
  12. Copy folder html2pdf nya ke folder xampp/htdocs/latihan_pdf/assets/libraries/.
  13. Ekstrak file bootstrap.7z yang sudah didownload.
  14. Copy folder css yang ada didalam folder bootstrap hasil ekstrak tadi. kemudian simpan pada folder xampp/htdocs/latihan_pdf/.
  15. Copy folder fonts yang ada didalam folder bootstrap hasil ekstrak tadi. kemudian simpan pada folder xampp/htdocs/latihan_pdf/.
  16. Copy folder js yang ada didalam folder bootstrap hasil ekstrak tadi. kemudian simpan pada folder xampp/htdocs/latihan_pdf/.
  17. Copy file jquery.min.js yang sudah didownload ke folder xampp/htdocs/latihan_pdf/js/.

STEP 2 – DATABASE
Buat sebuah database dengan nama mynotescode, lalu buat tabel transaksi dengan struktur tabel seperti gambar berikut ini :

Struktur Tabel - Cara Membuat Laporan PDF Plus Filter Periode Tanggal dengan PHP dan MySQL

CREATE TABLE `transaksi` (
 `id` int(11) NOT NULL,
 `kode` varchar(10) NOT NULL,
 `barang` varchar(100) NOT NULL,
 `jumlah` int(11) NOT NULL,
 `total_harga` double NOT NULL,
 `tgl` datetime NOT NULL,
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

STEP 3 – KONFIGURASI
Karena dibuat dengan Codeigniter, pertama kita harus melakukan konfigurasi terlebih dahulu pada framework codeigniternya.

  1. Buka folder xampp/htdocs/latihan_pdf/application/config/
  2. Buka file config.php
    Cari kode berikut $config['base_url'] = '';Ubah kode tersebut jadi seperti ini :

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

    Kode diatas digunakan untuk menset baseurlnya.
    Lalu simpan file tersebut.

  3. Buka file autoload.php
    Cari kode berikut ini :

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

    Ubah jadi seperti ini :

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

    Kode diatas digunakan untuk memuat (menload) class database dan url.
    Lalu simpan file tersebut.

  4. Buka file routes.php
    Cari kode berikut ini :

    $route['default_controller'] = 'welcome';

    Ubah jadi seperti ini :

    $route['default_controller'] = 'transaksi';

    Kode diatas digunakan untuk menset controller mana yang akan diload pertama kali. Secara default, Codeigniter telah menset default controller yaitu welcome. Disini kita set default controller menjadi transaksi.
    Lalu simpan file tersebut.

  5. Buka file database.php
    Cari kode berikut ini :

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

    Ubah jadi seperti ini :

    'hostname' => 'localhost', // Nama host
    'username' => 'root', // Username
    'password' => '', // Jika menggunakan password isi, jika tidak kosongkan saja
    'database' => 'mynotescode', // Nama databasenya

    Kode diatas digunakan untuk koneksi ke database.
    Lalu simpan file tersebut.



STEP 4 – BUAT MODEL
Langkah selanjutnya adalah membuat modelnya. Buat sebuah file dengan nama TransaksiModel.php, Lalu simpan pada folder xampp/htdocs/latihan_pdf/application/models/. Berikut kodenya :

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class TransaksiModel extends CI_Model {
    public function view_all(){
    return $this->db->get('transaksi')->result(); // Tampilkan semua data transaksi
  }

    public function view_by_date($tgl_awal, $tgl_akhir){
        $tgl_awal = $this->db->escape($tgl_awal);
        $tgl_akhir = $this->db->escape($tgl_akhir);

        $this->db->where('DATE(tgl) BETWEEN '.$tgl_awal.' AND '.$tgl_akhir); // Tambahkan where tanggal nya

    return $this->db->get('transaksi')->result();// Tampilkan data transaksi sesuai tanggal yang diinput oleh user pada filter
  }
}

Fungsi view_all() berguna untuk menampilkan semua data transaksi.

Fungsi view_by_date() berguna untuk menampilkan data transaksi dimana tanggal transaksinya antara tgl_awal dan tgl_akhir sesuai yang dinput user pada Form Filter. Fungsi ini akan menghasilkan query sql : “SELECT * FROM transaksi WHERE DATE(tgl) BETWEEN ‘$tgl_awal’ AND ‘$tgl_akhir’“. Dimana $tgl_awal dan $tgl_akhir adalah tanggal yang di input user pada form filter.


STEP 5 – BUAT CONTROLLER
Pada tahap ini, kita akan membuat controllernya. Buat sebuah file dengan nama Transaksi.php, lalu simpan pada folder xampp/htdocs/latihan_pdf/application/controllers/. Berikut ini kodenya :

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Transaksi extends CI_Controller {

  public function __construct(){
    parent::__construct();

    $this->load->model('TransaksiModel');
  }

    public function index(){
        $tgl_awal = $this->input->get('tgl_awal'); // Ambil data tgl_awal sesuai input (kalau tidak ada set kosong)
        $tgl_akhir = $this->input->get('tgl_akhir'); // Ambil data tgl_awal sesuai input (kalau tidak ada set kosong)

        if(empty($tgl_awal) or empty($tgl_akhir)){ // Cek jika tgl_awal atau tgl_akhir kosong, maka :
            $transaksi = $this->TransaksiModel->view_all();  // Panggil fungsi view_all yang ada di TransaksiModel
            $url_cetak = 'transaksi/cetak';
            $label = 'Semua Data Transaksi';
        }else{ // Jika terisi
            $transaksi = $this->TransaksiModel->view_by_date($tgl_awal, $tgl_akhir);  // Panggil fungsi view_by_date yang ada di TransaksiModel
            $url_cetak = 'transaksi/cetak?tgl_awal='.$tgl_awal.'&tgl_akhir='.$tgl_akhir;
            $tgl_awal = date('d-m-Y', strtotime($tgl_awal)); // Ubah format tanggal jadi dd-mm-yyyy
            $tgl_akhir = date('d-m-Y', strtotime($tgl_akhir)); // Ubah format tanggal jadi dd-mm-yyyy
            $label = 'Periode Tanggal '.$tgl_awal.' s/d '.$tgl_akhir;
        }

        $data['transaksi'] = $transaksi;
        $data['url_cetak'] = base_url('index.php/'.$url_cetak);
        $data['label'] = $label;

        $this->load->view('list', $data);
    }

  public function cetak(){
    $tgl_awal = $this->input->get('tgl_awal'); // Ambil data tgl_awal sesuai input (kalau tidak ada set kosong)
        $tgl_akhir = $this->input->get('tgl_akhir'); // Ambil data tgl_awal sesuai input (kalau tidak ada set kosong)

        if(empty($tgl_awal) or empty($tgl_akhir)){ // Cek jika tgl_awal atau tgl_akhir kosong, maka :
            $transaksi = $this->TransaksiModel->view_all();  // Panggil fungsi view_all yang ada di TransaksiModel
            $label = 'Semua Data Transaksi';
        }else{ // Jika terisi
            $transaksi = $this->TransaksiModel->view_by_date($tgl_awal, $tgl_akhir);  // Panggil fungsi view_by_date yang ada di TransaksiModel
            $tgl_awal = date('d-m-Y', strtotime($tgl_awal)); // Ubah format tanggal jadi dd-mm-yyyy
            $tgl_akhir = date('d-m-Y', strtotime($tgl_akhir)); // Ubah format tanggal jadi dd-mm-yyyy
            $label = 'Periode Tanggal '.$tgl_awal.' s/d '.$tgl_akhir;
        }

        $data['label'] = $label;
        $data['transaksi'] = $transaksi;

    ob_start();
    $this->load->view('print', $data);
    $html = ob_get_contents();
        ob_end_clean();

    require './assets/libraries/html2pdf/autoload.php'; // Load plugin html2pdfnya

    $pdf = new Spipu\Html2Pdf\Html2Pdf('P','A4','en');  // Settingan PDFnya
    $pdf->WriteHTML($html);
    $pdf->Output('Data Transaksi.pdf', 'D');
  }
}

Pada controller ini, kita membuat 3 fungsi. fungsi public function __construct(), fungsi ini berfungsi untuk menjalankan suatu aksi ketika controller main diload. Didalam fungsi ini, terdapat kode $this->load->model(‘TransaksiModel’);, kode tersebut berfungsi untuk memuat (meload) model transaksi (yang pada step sebelumnya kita buat) agar kita bisa mengakses fungsi-fungsi yang ada didalam model tersebut.

$this->load->view(‘list’, $data);
Kode ini berfungsi untuk memuat (meload) file list.php (file ini akan kita buat pada step selanjutnya) dan mengirimkan data dalam bentuk array data ($data) ke file tersebut.

ob_start();
$this->load->view(‘print’, $data);
$html = ob_get_contents();
ob_end_clean();
Kode diatas berfungsi untuk memuat file print.php (file ini akan kita buat pada step terakhir) dan mengirim sebuah data dalam bentuk array ($data) ke file tersebut. Lalu file print.php tadi dimuat (diload) dan dimasukan kedalam variabel $html.

require ‘./assets/html2pdf/autoload.php’;
$pdf = new Spipu\Html2Pdf\Html2Pdf(‘P’,’A4′,’en’);
$pdf->WriteHTML($html);
$pdf->Output(‘Data Transaksi.pdf’, ‘D’);
Kode diatas digunakan untuk mengkonversi kode html menjadi pdf. Dimulai dari kode require_once(‘./assets/html2pdf/html2pdf.class.php’);, kode ini berfungsi untuk memuat (meload) plugin html2pdfnya. Lalu kode $pdf = new HTML2PDF(‘P’,’A4′,’en’);, kode ini berfungsi memanggil fungsi __construct pada plugin html2pdf. Berikut ini adalah fungsi __construct yang kita panggil pada plugin html2pdfnya :

/**
* Constructeur
*
* @param string $sens - orientasinya : landscape atau portrait
* @param string $format - format kertasnya : A4, A5, dan lain-lain
* @param string $langue - Bahasanya : en, fr, dan lain-lain
* @param boolean $unicode - TRUE means clustering the input text IS unicode (default = true)
* @param String $encoding - charset encoding; Default is UTF-8
* @param array $marges - margins by default, in order (left, top, right, bottom)
* @return null
*/
public function __construct($sens = 'P', $format = 'A4', $langue='en', $unicode=true, $encoding='UTF-8', $marges = array(5, 5, 5, 8))

Lalu kode $pdf->WriteHTML($html);, kode ini berfungsi untuk menentukan apa yang ingin ditampilkan pada pdfnya. Struktur dasar penulisannya yaitu $pdf->WriteHTML(‘kode_htmlnya’);. Pada kasus ini, kita memasukan kode htmlnya kedalam variabel $html. Yang terakhir kode $pdf->Output(‘Data Transaksi.pdf’, ‘D’);, kode tersebut berfungsi untuk menentukan nama file pdf yang kita buat. dan juga untuk menentukan mode apa yang ingin dilakukan ketika kode tersebut dipanggil. Contohnya disitu ada kode …,’D’);, Huruf D disitu berarti ketika kode dipanggil, maka lakukan proses download pada file pdfnya. sebenarnya ada banyak mode yang bisa kita lakukan, seperti tampilkan pdfnya dibrowser ketika kode itu dipanggil dan lain-lain (untuk lebih detailnya, klik disini).


STEP 6 – BUAT VIEW
Selanjutnya kita akan buat sebuah file untuk menampilkan form filter dan data transaksi. Buat file baru dengan nama list.php, lalu simpan pada folder xampp/htdocs/latihan_pdf/application/views/. Berikut ini kode dan tampilannya :

View - Cara Membuat Laporan PDF Plus Filter Periode Tanggal dengan Codeigniter

<!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">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Laporan PDF Plus Filter Periode Tanggal</title>

    <!-- Include file CSS Bootstrap -->
    <link href="<?php echo base_url('assets/css/bootstrap.min.css') ?>" rel="stylesheet">

    <!-- Include library Bootstrap Datepicker -->
    <link href="<?php echo base_url('assets/libraries/bootstrap-datepicker/css/bootstrap-datepicker.min.css') ?>" rel="stylesheet">

    <!-- Include File jQuery -->
    <script src="<?php echo base_url('assets/js/jquery.min.js') ?>"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div style="padding: 15px;">
        <h3 style="margin-top: 0;"><b>Laporan PDF Plus Filter Periode Tanggal</b></h3>
        <hr />

        <form method="get" action="<?php echo base_url('index.php/transaksi/index') ?>">
            <div class="row">
                <div class="col-sm-6 col-md-4">
                    <div class="form-group">
                        <label>Filter Tanggal</label>
                        <div class="input-group">
                            <input type="text" name="tgl_awal" value="<?= @$_GET['tgl_awal'] ?>" class="form-control tgl_awal" placeholder="Tanggal Awal" autocomplete="off">
                            <span class="input-group-addon">s/d</span>
                            <input type="text" name="tgl_akhir" value="<?= @$_GET['tgl_akhir'] ?>" class="form-control tgl_akhir" placeholder="Tanggal Akhir" autocomplete="off">
                        </div>
                    </div>
                </div>
            </div>

            <button type="submit" name="filter" value="true" class="btn btn-primary">TAMPILKAN</button>

            <?php
            if(isset($_GET['filter'])) // Jika user mengisi filter tanggal, maka munculkan tombol untuk reset filter
                echo '<a href="'.base_url('index.php/transaksi/index').'" class="btn btn-default">RESET</a>';
            ?>
        </form>

        <hr />
        <h4 style="margin-bottom: 5px;"><b>Data Transaksi</b></h4>
        <?php echo $label ?><br />

        <div style="margin-top: 5px;">
            <a href="<?php echo $url_cetak ?>">CETAK PDF</a>
        </div>

        <div class="table-responsive" style="margin-top: 10px;">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th>Tanggal</th>
                        <th>Kode Transaksi</th>
                        <th>Barang</th>
                        <th>Jumlah</th>
                        <th>Total Harga</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    if(empty($transaksi)){ // Jika data tidak ada
                        echo "<tr><td colspan='5'>Data tidak ada</td></tr>";
                    }else{ // Jika jumlah data lebih dari 0 (Berarti jika data ada)
                        foreach($transaksi as $data){ // Looping hasil data transaksi
                            $tgl = date('d-m-Y', strtotime($data->tgl)); // Ubah format tanggal jadi dd-mm-yyyy

                            echo "<tr>";
                            echo "<td>".$tgl."</td>";
                            echo "<td>".$data->kode."</td>";
                            echo "<td>".$data->barang."</td>";
                            echo "<td>".$data->jumlah."</td>";
                            echo "<td>".$data->total_harga."</td>";
                            echo "</tr>";
                        }
                    }
                    ?>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Include File JS Bootstrap -->
    <script src="<?php echo base_url('assets/js/bootstrap.min.js') ?>"></script>

    <!-- Include library Bootstrap Datepicker -->
    <script src="<?php echo base_url('assets/libraries/bootstrap-datepicker/js/bootstrap-datepicker.min.js') ?>"></script>

    <!-- Include File JS Custom (untuk fungsi Datepicker) -->
    <script src="<?php echo base_url('assets/js/custom.js') ?>"></script>

    <script>
    $(document).ready(function(){
        setDateRangePicker(".tgl_awal", ".tgl_akhir")
    })
    </script>
</body>
</html>


STEP 7 – HALAMAN CETAK (PRINT)
Langkah terakhir adalah membuat sebuah file yang nantinya digunakan untuk proses cetak ke pdfnya. Hal-hal yang ada pada file ini nantinya akan ditampilkan pada file pdfnya. Buat sebuah file dengan nama print.php, lalu simpan pada folder xampp/htdocs/latihan_pdf/application/views/. Berikut ini kode dan tampilannya :

PDF - Cara Membuat Laporan PDF Plus Filter Periode Tanggal dengan Codeigniter

<html>
<head>
  <title>Cetak PDF</title>
  <style>
    .table {
        border-collapse:collapse;
        table-layout:fixed;width: 630px;
    }
    .table th {
        padding: 5px;
    }
    .table td {
        word-wrap:break-word;
        width: 20%;
        padding: 5px;
    }
  </style>
</head>
<body>
    <h4 style="margin-bottom: 5px;">Data Transaksi</h4>
  <?php echo $label ?>

  <table class="table" border="1" width="100%" style="margin-top: 10px;">
    <tr>
      <th>Tanggal</th>
      <th>Kode Transaksi</th>
      <th>Barang</th>
      <th>Jumlah</th>
      <th>Total Harga</th>
    </tr>

    <?php
        if(empty($transaksi)){ // Jika data tidak ada
            echo "<tr><td colspan='5'>Data tidak ada</td></tr>";
        }else{ // Jika jumlah data lebih dari 0 (Berarti jika data ada)
            foreach($transaksi as $data){ // Looping hasil data transaksi
                $tgl = date('d-m-Y', strtotime($data->tgl)); // Ubah format tanggal jadi dd-mm-yyyy

                echo "<tr>";
                echo "<td style='width: 80px;'>".$tgl."</td>";
                echo "<td style='width: 100px;'>".$data->kode."</td>";
                echo "<td style='width: 300px;'>".$data->barang."</td>";
                echo "<td style='width: 60px;'>".$data->jumlah."</td>";
                echo "<td style='width: 100px;'>".$data->total_harga."</td>";
                echo "</tr>";
            }
        }
    ?>
  </table>
</body>
</html>

Mungkin sekian untuk catatan kali ini. Semoga bisa bermanfaat. Jika ada yang kurang dipahami, langsung tanyakan pada form komentar dibawah ini. Jangan lupa LIKE dan SHARE nya, Terimakasih banyak.

Happy Coding ^_^


SOURCE CODE
Untuk mengunduh source code nya, klik salah satu link dibawah ini.
– Download versi Bootstrap 3 (Link download yang sesuai tutorial ini)
– Download versi Bootstrap 4
– Download versi tanpa Bootstrap
– 
Download versi tanpa Bootstrap dengan htaccess


SUMBER & REFERENSI
Dokumentasi Codeigniter : https://www.codeigniter.com/user_guide
Cara mudah membuat laporan pdf plus filter periode tanggal dengan codeigniter dan mysql, tutorial lengkap membuat laporan pdf dengan filterperiode tanggal menggunakan codeigniter dan mysql, laporan pdf plus filter periode tanggal awal dan tanggal akhir dengan codeigniter dan database mysql

Laporan PDF

(Total : 58 viewers, 1 viewers today)
laporan-pdf-filter-periode-tanggal-codeigniter

ABOUT THE AUTHOR

Interested in android programming, long time focused on web development. Visit My Profile Site at www.rizaldimaulidia.com

POST YOUR COMMENTS

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

Name *

Email *

Website

NOTE ARCHIVES