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.

PHP Tips and Trick

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

img-responsive

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). Sebelumnya pun saya sudah pernah buat Laporan PDF dengan Filter Tanggal / Bulan / Tahun, karena ada beberapa pengungjung yang kebingungan saat akan buat Laporan PDF tapi dengan Fitler Periode Tanggal, maka dari itu kita akan bahas pada kesempatan ini.


SOURCE CODE
Dalam catatan / tutorial ini, saya sudah menyiapkan 6 source code berbeda, yakni Versi MySQLi dan PDO. Dari kedua versi source code tersebut, saya bagi lagi menjadi Versi Tanpa Bootstrap, Versi Bootstrap 3 dan Versi 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 HTML2PDF, klik link berikut ini : Download.
  2. Download Bootstrap 3, klik link berikut ini : Download.
    Bootstrap 3 ini akan kita gunakan untuk Desain yang lebih bagus.
  3. Download Bootstrap Datepicker, klik link berikut ini : Download.
    Librari ini akan kita gunakan agar Filter Tanggalnya menggunakan Datepicker.
  4. Download jQuery, klik link berikut ini : Download.
  5. Buat sebuah folder dengan nama latihan_pdf, lalu simpan pada folder xampp/htdocs/.
  6. Buat sebuah folder dengan nama libraries, lalu simpan pada folder xampp/htdocs/latihan_pdf/.
  7. Ekstrak file html2pdf.7z yang sudah didownload.
  8. Copy folder html2pdf nya ke folder xampp/htdocs/latihan_pdf/libraries/.
  9. Ekstrak file bootstrap.7z yang sudah didownload.
  10. Copy folder css yang ada didalam folder bootstrap hasil ekstrak tadi. kemudian simpan pada folder xampp/htdocs/latihan_pdf/.
  11. Copy folder fonts yang ada didalam folder bootstrap hasil ekstrak tadi. kemudian simpan pada folder xampp/htdocs/latihan_pdf/.
  12. Copy folder js yang ada didalam folder bootstrap hasil ekstrak tadi. kemudian simpan pada folder xampp/htdocs/latihan_pdf/.
  13. 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 – KONEKSI DATABASE
Pada tahap ini, kita akan membuat sebuah file php yang berfungsi untuk koneksi ke database MySQL. Buat sebuah file dengan nama koneksi.php lalu simpan di folder xampp/htdocs/latihan_pdf/. Berikut ini isi dari file tersebut :

<?php
$host = "localhost"; // Nama hostnya
$user = "root"; // Username
$pass = ""; // Password (Isi jika menggunakan password)
$database = "mynotescode"; // Nama databasenya
$connect = mysqli_connect($host, $user, $pass, $database); // Koneksi ke MySQL
?>


STEP 4 – TAMPILAN AWAL
Selanjutnya kita akan membuat halaman / tampilan awal website kita. Buat sebuah file php dengan nama index.php dan simpan di folder xampp/htdocs/latihan_pdf. Berikut ini kodenya dan tampilannya :

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

<!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="css/bootstrap.min.css" rel="stylesheet">

    <!-- Include library Bootstrap Datepicker -->
    <link href="libraries/bootstrap-datepicker/css/bootstrap-datepicker.min.css" rel="stylesheet">

    <!-- Include File jQuery -->
    <script src="js/jquery.min.js"></script>
</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="index.php">
            <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">
                            <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">
                        </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="index.php" class="btn btn-default">RESET</a>';
            ?>
        </form>

        <?php
        // Load file koneksi.php
        include "koneksi.php";

        $tgl_awal = @$_GET['tgl_awal']; // Ambil data tgl_awal sesuai input (kalau tidak ada set kosong)
        $tgl_akhir = @$_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 :
            // Buat query untuk menampilkan semua data transaksi
            $query = "SELECT * FROM transaksi";
            $url_cetak = "print.php";
            $label = "Semua Data Transaksi";
        }else{ // Jika terisi
            // Buat query untuk menampilkan data transaksi sesuai periode tanggal
            $query = "SELECT * FROM transaksi WHERE (tgl BETWEEN '".$tgl_awal."' AND '".$tgl_akhir."')";
            $url_cetak = "print.php?tgl_awal=".$tgl_awal."&tgl_akhir=".$tgl_akhir."&filter=true";
            $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;
        }
        ?>
        <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
                    $sql = mysqli_query($connect, $query); // Eksekusi/Jalankan query dari variabel $query
                    $row = mysqli_num_rows($sql); // Ambil jumlah data dari hasil eksekusi $sql

                    if($row > 0){ // Jika jumlah data lebih dari 0 (Berarti jika data ada)
                        while($data = mysqli_fetch_array($sql)){ // Ambil semua data dari hasil eksekusi $sql
                            $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>";
                        }
                    }else{ // Jika data tidak ada
                        echo "<tr><td colspan='5'>Data tidak ada</td></tr>";
                    }
                    ?>
                </tbody>
            </table>
        </div>
    </div>

    <!-- Include File JS Bootstrap -->
    <script src="js/bootstrap.min.js"></script>

    <!-- Include library Bootstrap Datepicker -->
    <script src="libraries/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>

    <!-- Include File JS Custom (untuk fungsi Datepicker) -->
    <script src="js/custom.js"></script>

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

Pada halaman ini kita akan buat sebuah form untuk filter perideo tanggalnya (Tanggal Awal – Tanggal Akhir). Inputan tanggal ini sudah di set sebagai DatePicker dengan skrip setDateRangePicker(“.tgl_awal”, “.tgl_akhir”). Untuk lebih jelasnya mengenai Datepicker ini, bisa kamu lihat pada link tutorial berikut :
Cara Mudah Membuat Form Datepicker dengan Bootstrap 3
Cara Mudah Membuat Form Datepicker dengan Bootstrap 4

Alur dari form filter ini yakni jika filter tanggal tidak diisi, maka kita akan tampilkan semua data transaksi. Tapi jika filter tanggal diisi, maka kita hanya akan menampilkan data transaksi yang Tanggal transaksinya berada diantara Tanggal Awal dan Tanggal Akhir sesuai yang diisi pada filter tanggal.

$tgl_awal = date(‘d-m-Y’, strtotime($tgl_awal));
Skrip ini berfungsi untuk mengubah format tanggal menjadi dd-mm-yyyy. Disini terdapat 2 fungsi yakni date() dan strtotime(). Fungsi date berfungsi untuk menentukan format waktu yang kita ingin kan, isi dari parameter 1 adalah format yang kita inginkan, disini kita isi dengan d-m-y. Lebih lengkapnya soal isi dari parameter 1 di fungsi date() bisa anda lihat disini : Dokumentasi Fungsi Date(). Untuk strtotime() adalah sebuah kode yang berguna untuk mengubah string menjadi time. Karna paramater 2 dari fungsi date() adalah waktu yang akan diubah formatnya (dalam bentuk time). Sehingga disini kita akan mengubah data tanggal dari form filter yang formatnya yyyy-mm-dd dan tipenya string menjadi tipe time agar bisa di ubah formatnya dengan fungsi date().

$sql = mysqli_query($connect, $query);
Untuk mengeksekusi / menjalankan query sql. struktur dasar penulisannya adalah sebagai berikut :

mysqli_query($connect, $query);

/*
Keterangan :
- $connect : diisi dengan koneksi ke mysql. hasil dari mysqli_connect
- $query : diisi dengan Query SQL yang diinginkan
*/

mysqli_num_rows($sql);
Untuk mengambil jumlah data dari hasil eksekusi suatu query sql. Struktur dasar penulisannya adalah sebagai berikut :

mysqli_num_rows($sql);

/*
Keterangan :
- $sql : diisi dengan hasil eksekusi query sql(mysql_query())
*/

mysqli_fetch_array($sql);
Untuk mengambil data dari hasil eksekusi suatu query sql. Struktur dasar penulisannya adalah sebagai berikut :

mysqli_fetch_array($sql);

/*
Keterangan :
- $sql : diisi dengan hasil eksekusi query sql(mysql_query())
*/

Kode diatas saya simpan didalam looping while berfungsi untuk melakukan proses perulangan sampai data terkahir dengan tujuan agar kita bisa menampilkan datanya satu per satu.

echo "<td>".$data['kode']."</td>";
echo "<td>".$data['barang']."</td>";
echo "<td>".$data['jumlah']."</td>";
echo "<td>".$data['total_harga']."</td>";

Pada kode diatas terdapat variabel $data digunakan untuk mengambil isi dari field-field yang ada pada tabel transaksi di database mynotescode. Pada kode diatas juga ada kode yang berada di dalam tanda [‘…..’], kode tersebut harus sama dengan nama field yang ada pada tabel transaksi.


STEP 5 – CUSTOM JS
Selanjutnya kita akan membuat sebuah file javascript yang nantinya digunakan untuk membuat function untuk setdatepicker nya. Buat sebuah file dengan nama custom.js, lalu simpan pada folder xampp/htdocs/latihan_pdf/js/. Berikut ini kodenya :

function setDateRangePicker(input1, input2){
  $(input1).datepicker({
    autoclose: true,
    format: "yyyy-mm-dd",
  }).on("change", function(){
    $(input2).val("").datepicker('setStartDate', $(this).val());
  }).attr("readonly", "readonly").css({"cursor":"pointer", "background":"white"});

  $(input2).datepicker({
    autoclose: true,
    format: "yyyy-mm-dd",
    orientation: "bottom right"
  }).attr("readonly", "readonly").css({"cursor":"pointer", "background":"white"});
}

Pada kode ini kita menggunakan beberapa option dari librari Bootstrap Datepicker antara lain :

  1. format
    Berfungsi untuk menentukan format tanggal. Defaultnya adalah : “mm/dd/yyyy”.
    Format tanggal ini merupakan kombinasi dari :
    d : Tanggal dalam angka (tanpa awalan 0) : 1, 2, 3, 4, …., 10, 11.
    dd : Tanggal dalam angka (dengan awalan 0) : 01, 02, 03, 04, …., 10, 11.
    m : Bulan dalam angka (tanpa awalan 0) : 1, 2, 3, 4, …., 10, 11.
    mm : Bulan dalam angka (dengan awalan 0) : 01, 02, 03, 04, …., 10, 11.
    M : Bulan dalam huruf (Singkatan 3 huruf awal) : Jan, Feb, Apr, May.
    MM : Bulan dalam huruf (Lengkap) : January, February, April, May.
    yy : Tahun dalam angka (2 digit) : 11, 12, 13.
    yyyy : Tahun dalam angka (4 digit) : 2011, 2012, 2013.
  2. autoclose
    Berfungsi untuk menutup / menyembunyikan datepicker setelah user memilih tanggal (mengklik tanggal), Jika option ini di set true. Defaultnya adalah false.
  3. orientation
    Berfungsi untuk mengatur posisi datepicker, isinya adalah kombinasi dari 2 kata : “top”, “bottom”, “left”, “right”. Defaultnya adalah auto.

STEP 6 – PROSES CETAK (PRINT)
Sesuai judul dari step 5 ini, kita akan masuk ke inti dari catatan ini yakni membuat proses cetak ke file pdf. Pertama-tama buat dulu sebuah file baru dan beri nama print.php, lalu simpan file tersebut di folder xampp/htdocs/latihan_pdf/. Berikut tampilan hasil cetak dan skripnya :

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

<?php ob_start(); ?>
<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>
  <?php
  // Load file koneksi.php
  include "koneksi.php";

  $tgl_awal = @$_GET['tgl_awal']; // Ambil data tgl_awal sesuai input (kalau tidak ada set kosong)
  $tgl_akhir = @$_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 :
    // Buat query untuk menampilkan semua data transaksi
    $query = "SELECT * FROM transaksi";

    $label = "Semua Data Transaksi";
  }else{ // Jika terisi
    // Buat query untuk menampilkan data transaksi sesuai periode tanggal
    $query = "SELECT * FROM transaksi WHERE (tgl BETWEEN '".$tgl_awal."' AND '".$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;
  }
  ?>
  <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
    $sql = mysqli_query($connect, $query); // Eksekusi/Jalankan query dari variabel $query
    $row = mysqli_num_rows($sql); // Ambil jumlah data dari hasil eksekusi $sql

    if($row > 0){ // Jika jumlah data lebih dari 0 (Berarti jika data ada)
      while($data = mysqli_fetch_array($sql)){ // Ambil semua data dari hasil eksekusi $sql
        $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>";
      }
    }else{ // Jika data tidak ada
      echo "<tr><td colspan='5'>Data tidak ada</td></tr>";
    }
    ?>
  </table>
</body>
</html>
<?php
$html = ob_get_contents();
ob_end_clean();

require 'libraries/html2pdf/autoload.php';

$pdf = new Spipu\Html2Pdf\Html2Pdf('P','A4','en');
$pdf->WriteHTML($html);
$pdf->Output('Data Transaksi.pdf', 'I');
?>

Skrip diatas hampir sama dengan isi dari file index.php. Hanya saja pada print.php tidak ada link cetak pdf nya dan juga pada skrip diatas terdapat skrip berikut ini :

<?php ob_start(); ?>
// …..
// skrip html
// …..
<?php
$html = ob_get_contents();
ob_end_clean();

Pada skrip print.php, Skrip yang berfungsi untuk menampilkan data transaksi pada tabel diapit oleh skrip yang saya beri tanda merah. Skrip tersebut berfungsi untuk mengambil tampilan tabel data transaksi dan memasukkannya ke dalam variabel $html. Variabel $html ini akan digunakan sebagai output yang kita inginkan pada file pdfnya. Lihat skrip berikut ini :

require ‘html2pdf/autoload.php’;
$pdf = new Spipu\Html2Pdf\Html2Pdf(‘P’,’A4′,’en’);
$pdf->WriteHTML($html);
$pdf->Output(‘Data Transaksi.pdf’, ‘D’);

Skrip diatas digunakan untuk mengkonversi skrip html menjadi pdf. Dimulai dari skrip require ‘html2pdf/autoload.php’;, skrip ini berfungsi untuk memuat (meload) plugin html2pdfnya. Lalu skrip $pdf = new Spipu\Html2Pdf\Html2Pdf(‘P’,’A4′,’en’);, skrip 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 skrip $pdf->WriteHTML($html);, skrip 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 skrip $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 skrip tersebut dipanggil. Contohnya disitu ada skrip …,’D’);, Huruf D disitu berarti ketika skrip dipanggil, maka lakukan proses download pada file pdfnya. sebenarnya ada banyak mode yang bisa kita lakukan, seperti tampilkan pdfnya dibrowser ketika skrip itu dipanggil dan lain-lain (untuk lebih detailnya, klik disini).


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 MySQLi dengan Bootstrap 3 (Link download yang sesuai tutorial ini)
– Download versi MySQLi dengan Bootstrap 4
– Download versi MySQLi tanpa Bootstrap
– Download versi PDO dengan Bootstrap 3
– Download versi PDO dengan Bootstrap 4
– Download versi PDO tanpa Bootstrap


SUMBER & REFERENSI
https://github.com/spipu/html2pdf/tree/master/doc
Cara mudah membuat laporan pdf plus filter periode tanggal bulan tahun dengan php dan mysql, tutorial lengkap membuat laporan pdf dengan filter periode tanggal bulan tahun menggunakan php dan mysql, laporan pdf plus filter tanggal awal sampai dengan tanggal akhir dengan php dan database mysql

Laporan PDF

(Total : 489 viewers, 4 viewers today)
laporan-pdf-filter-periode-tanggal-php-mysql

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