Cara Membuat Report PDF dengan DomPDF pada Laravel

[vc_row][vc_column offset=”vc_col-md-offset-2 vc_col-md-8″][vc_empty_space height=”24px”][ultimate_heading main_heading=”Cara Membuat Report PDF dengan DomPDF pada Laravel” alignment=”left” main_heading_style=”font-weight:bold;” main_heading_font_size=”desktop:28px;mobile_landscape:20px;” main_heading_margin=”margin-top:40px;margin-bottom:20px;” sub_heading_font_size=”desktop:18px;mobile_landscape:16px;” sub_heading_line_height=”desktop:34px;mobile_landscape:28px;” main_heading_line_height=”desktop:42px;mobile_landscape:26px;” margin_design_tab_text=””]Membuat dan menampilkan report adalah salah satu hal terpenting untuk mendapatkan informasi. Report sendirir memiliki beberapa jenis seperti soft copy atau hard copy. Untuk memudahkan hal tersebut maka kita dapat membuat report yang dapat dengan mudah dijadikan soft copy dan hard copy.

Pada tutorial kali ini saya akan membahas mengenai cara membuat report pdf pada laravel dengan bantuan dompdf, agar dapat membuat jenis report soft copy dan hard copy menjadi mudah. tepatnya saya akan memberi tutorial cara membuat report PDF dengan DomPDF dan Database MySQL pada Laravel.

Sebelum kita memulai tutorial ini pastikan bahwa anda sudah menginstall laravel pada komputer anda. Jika belum anda bisa melihat tutorialnya disini.

Daftar Artikel :

[/ultimate_heading][ultimate_heading main_heading=”Cara Membuat Report PDF pada Laravel” alignment=”left” main_heading_style=”font-weight:bold;” main_heading_font_size=”desktop:28px;mobile_landscape:20px;” main_heading_margin=”margin-top:40px;margin-bottom:20px;” sub_heading_font_size=”desktop:18px;mobile_landscape:16px;” sub_heading_line_height=”desktop:34px;mobile_landscape:28px;” main_heading_line_height=”desktop:42px;mobile_landscape:26px;”]1. Nyalakan Apache dan MySql pada XAMPP anda.

Pastikan apache dan mysql anda dalam keadaan menyala, agar dapat mengakses apache dan mysql.[/ultimate_heading][vc_single_image image=”53437″ img_size=”full” alignment=”center”][ultimate_heading main_heading=”2. Persiapkan Database” alignment=”left” main_heading_style=”font-weight:bold;” main_heading_font_size=”desktop:28px;mobile_landscape:20px;” main_heading_margin=”margin-top:40px;margin-bottom:20px;” sub_heading_font_size=”desktop:18px;mobile_landscape:16px;” sub_heading_line_height=”desktop:34px;mobile_landscape:28px;” main_heading_line_height=”desktop:42px;mobile_landscape:26px;”]Pastikan anda sudah menyediakan database sebagai isi dari report yang akan kalian gunakan. Kalian bisa menggunakan database yang telah kalian sediakan sendiri atau kalian bisa menggunakan database yang sudah saya sediakan disini.[/ultimate_heading][vc_single_image image=”53444″ img_size=”full” alignment=”center”][ultimate_heading main_heading=”3. Download Laravel DomPDF Package” alignment=”left” main_heading_style=”font-weight:bold;” main_heading_font_size=”desktop:28px;mobile_landscape:20px;” main_heading_margin=”margin-top:40px;margin-bottom:20px;” sub_heading_font_size=”desktop:18px;mobile_landscape:16px;” sub_heading_line_height=”desktop:34px;mobile_landscape:28px;” main_heading_line_height=”desktop:42px;mobile_landscape:26px;”]Tahap selanjutnya untuk membuat report pdf, kalian harus melakukan download laravel dompdf package dengan cara mendowloadnya melalui command prompt(cmd) dengan perintah : “composer require barryvdh/laravel-dompdf”. Pastikan anda mendownloadnya di dalam project laravel anda. Jika anda belum memiliki project laravel, kalian bisa mengikuti tutorial pembuatan project laravel terlebih dahulu disini.

composer require barryvdh/laravel-dompdf

[/ultimate_heading][vc_single_image image=”53447″ img_size=”full” alignment=”center”][vc_single_image image=”53448″ img_size=”full” alignment=”center”][ultimate_heading alignment=”left” main_heading_style=”font-weight:bold;” main_heading_font_size=”desktop:28px;mobile_landscape:20px;” main_heading_margin=”margin-top:40px;margin-bottom:20px;” sub_heading_font_size=”desktop:18px;mobile_landscape:16px;” sub_heading_line_height=”desktop:34px;mobile_landscape:28px;” main_heading_line_height=”desktop:42px;mobile_landscape:26px;”]Pastikan dompdf terinstall dengan baik seperti gambar diatas, agar proses pembuatan report pdf berjalan dengan lancar.[/ultimate_heading][ultimate_heading main_heading=”4. Setting Database pada Project” alignment=”left” main_heading_style=”font-weight:bold;” main_heading_font_size=”desktop:28px;mobile_landscape:20px;” main_heading_margin=”margin-top:40px;margin-bottom:20px;” sub_heading_font_size=”desktop:18px;mobile_landscape:16px;” sub_heading_line_height=”desktop:34px;mobile_landscape:28px;” main_heading_line_height=”desktop:42px;mobile_landscape:26px;”]Setelah kalian mendownload laravel dompdf package. Sekarang kalian dapat membuka folder project kalian dengan text editor yang kalian pakai untuk melakukan setting database pada project yang akan di buat. Jangan lupa untuk baca artikel mengenai text editor terbaik disini.[/ultimate_heading][vc_single_image image=”53452″ img_size=”full” alignment=”center”][ultimate_heading alignment=”left” main_heading_style=”font-weight:bold;” main_heading_font_size=”desktop:28px;mobile_landscape:20px;” main_heading_margin=”margin-top:40px;margin-bottom:20px;” sub_heading_font_size=”desktop:18px;mobile_landscape:16px;” sub_heading_line_height=”desktop:34px;mobile_landscape:28px;” main_heading_line_height=”desktop:42px;mobile_landscape:26px;”]Untuk melakukan setting pada database. Anda dapat masuk kedalam setinggan database melalui settingan .env lalu edit database pada project sesuai dengan database yang anda miliki, seperti gambar di atas.[/ultimate_heading][ultimate_heading main_heading=”5. Masukan Fungsi DomPDF pada Laravel” alignment=”left” main_heading_style=”font-weight:bold;” main_heading_font_size=”desktop:28px;mobile_landscape:20px;” main_heading_margin=”margin-top:40px;margin-bottom:20px;” sub_heading_font_size=”desktop:18px;mobile_landscape:16px;” sub_heading_line_height=”desktop:34px;mobile_landscape:28px;” main_heading_line_height=”desktop:42px;mobile_landscape:26px;”]Untuk menjalankan fungsi DomPDF yang sebelumnya sudah anda buat, maka anda harus menjalankan fungsi DomPDF tersebut dengan memasukan source code di bawah ini ke dalam source code project laravel kalian. Buka source code yang terletak pada config/app.php. Masukan source code “Barryyvdh\DomPDF\ServiceProvider::class,” pada bagian bawah kolom providers dan source code ” ‘PDF’ => Barryvdh\DomPDF\facade: :class,” pada bagian bawah kolom aliases. Untuk lebih jelasnya anda dapat melihat gambar di bawah ini.

Source code pada kolom provider :

Barryvdh\DomPDF\ServiceProvider::class,

Cara Membuat Report PDF dengan DomPDF pada Laravel

Source code pada kolom provider :

'PDF' => Barryvdh\DomPDF\Facade::class,

Cara Membuat Report PDF dengan DomPDF pada Laravel [/ultimate_heading][ultimate_heading main_heading=”6. Membuat Controller” alignment=”left” main_heading_style=”font-weight:bold;” main_heading_font_size=”desktop:28px;mobile_landscape:20px;” main_heading_margin=”margin-top:40px;margin-bottom:20px;” sub_heading_font_size=”desktop:18px;mobile_landscape:16px;” sub_heading_line_height=”desktop:34px;mobile_landscape:28px;” main_heading_line_height=”desktop:42px;mobile_landscape:26px;”]Setelah kita memasukan fungsi domPDF maka langkah selanjutnya, kita harus membuat controller dengan bantuan command prompt. Controller tersebut akan berfungsi untuk mengkonversikan kode html ke file pdf. Untuk membuat controller ini anda perlu masuk ke dalam project anda melalui command prompt lalu masukan perintah “php artisan make:controller DynamicPDFController” pada command prompt, setelah itu maka controller akan terbuat di dalam app/http/controllers/DynamicPDFController.php.

php artisan make:controller DynamicPDFController

Cara Membuat Report PDF dengan DomPDF pada Laravel [/ultimate_heading][ultimate_heading main_heading=”7. Membuat Fungsi pada Controller” alignment=”left” main_heading_style=”font-weight:bold;” main_heading_font_size=”desktop:28px;mobile_landscape:20px;” main_heading_margin=”margin-top:40px;margin-bottom:20px;” sub_heading_font_size=”desktop:18px;mobile_landscape:16px;” sub_heading_line_height=”desktop:34px;mobile_landscape:28px;” main_heading_line_height=”desktop:42px;mobile_landscape:26px;”]Setelah controller terbuat, sekarang anda harus membuat fungsi yang akan digunakan untuk membuat report di dalam controller yang sudah anda buat. Pada tutorial kali ini saya sudah menyediakan source code yang akan anda gunakan, sehingga anda hanya perlu untuk memasukan source code yang sudah saya sediakan ke dalam controller yang tadi sudah anda buat.

Berikut ini merupakan source code Controller :

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use DB;

use PDF;

class DynamicPDFController extends Controller{

functionindex(){

$customer_data = $this->get_customer_data();

returnview(‘dynamic_pdf’)->with(‘customer_data’, $customer_data);}

functionget_customer_data(){

$customer_data = DB::table(‘pegawai’)

->limit(10)

->get();

return$customer_data;}

functionpdf(){

$pdf = \App::make(‘dompdf.wrapper’);

$pdf->loadHTML($this->convert_customer_data_to_html());

return$pdf->stream();}

functionconvert_customer_data_to_html(){

$customer_data = $this->get_customer_data();

$output = ‘

<h3 align=”center”>Daftar Pegawai</h3>

<table width=”100%” style=”border-collapse: collapse; border: 0px;”>

<tr>

<th style=”border: 1px solid; padding:12px;” width=”15%”>Nama</th>

<th style=”border: 1px solid; padding:12px;” width=”15%”>Alamat</th>

<th style=”border: 1px solid; padding:12px;” width=”15%”>Telepon</th>

</tr>’;

foreach($customer_data as $customer){

$output.=’

<tr>

<td style=”border: 1px solid; padding:12px;”>’.$customer->Nama.'</td>

<td style=”border: 1px solid; padding:12px;”>’.$customer->Alamat.'</td>

<td style=”border: 1px solid; padding:12px;”>’.$customer->Telepon.'</td>

</tr>’;}

$output.='</table>’;

return$output;}}

Cara Membuat Report PDF dengan DomPDF pada Laravel [/ultimate_heading][ultimate_heading main_heading=”8. Membuat View File” alignment=”left” main_heading_style=”font-weight:bold;” main_heading_font_size=”desktop:28px;mobile_landscape:20px;” main_heading_margin=”margin-top:40px;margin-bottom:20px;” sub_heading_font_size=”desktop:18px;mobile_landscape:16px;” sub_heading_line_height=”desktop:34px;mobile_landscape:28px;” main_heading_line_height=”desktop:42px;mobile_landscape:26px;”]Langkah selanjutnya, anda harus membuat file tampilan yang berfungsi untuk menampilkan tabel report dan button yang akan dibuat untuk mengkonversikan html ke dalam pdf. File tersebut akan kita buat didalam resources/views/dynamic_pdf.blade.php. Dengan cara melakukan klik kanan pada views dan buat new file dengan nama dynamic_pdf.blade.php.

[/ultimate_heading][ultimate_heading main_heading=”9. Membuat Fungsi pada View File” alignment=”left” main_heading_style=”font-weight:bold;” main_heading_font_size=”desktop:28px;mobile_landscape:20px;” main_heading_margin=”margin-top:40px;margin-bottom:20px;” sub_heading_font_size=”desktop:18px;mobile_landscape:16px;” sub_heading_line_height=”desktop:34px;mobile_landscape:28px;” main_heading_line_height=”desktop:42px;mobile_landscape:26px;”]Setelah file tampilan sudah dibuat, sekarang anda harus membuat fungsi yang akan digunakan untuk menampilkan tabel report dan button yang akan dibuat untuk mengkonversikan html ke dalam pdf. Sama seperti fungsi pada controller saya sudah menyediakan source code yang akan anda gunakan untuk file tampilan. Sehingga anda hanya perlu untuk memasukan source code yang sudah saya sediakan ke dalam file tampilan yang tadi sudah anda buat.

Berikut ini merupakan source code Controller :

<!DOCTYPE html>

<html>

<head>

<title>Laravel – Data pegawai</title>

<scriptsrc=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js”></script>

<linkrel=”stylesheet”href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”/>

<scriptsrc=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>

<styletype=”text/css”>

.box{

width:600px;

margin:0auto;

}

</style>

</head>

<body>

<br/>

<divclass=”container”>

<h3align=”center”>Perpustkaan – Daftar Pegawai</h3><br/>

<divclass=”row”>

<divclass=”col-md-7″align=”right”>

<h4>Data Pegawai</h4>

</div>

<divclass=”col-md-5″align=”right”>

<ahref=”{{ url(‘pegawai/pdf’) }}”class=”btn btn-danger”>Convert PDF</a>

</div>

<br/>

<divclass=”table-responsive”>

<tableclass=”table table-striped table-bordered”>

<thead>

<tr>

<th>Nama</th>

<th>Alamat</th>

<th>Telepon</th>

</tr>

</thead>

<tbody>

@foreach($customer_data as $customer)

<tr>

<td>{{ $customer->Nama }}</td>

<td>{{ $customer->Alamat }}</td>

<td>{{ $customer->Telepon }}</td>

</tr>

@endforeach

</tbody>

</table>

</div>

</body>

</html>

[/ultimate_heading][ultimate_heading main_heading=”10. Membuat Route” alignment=”left” main_heading_style=”font-weight:bold;” main_heading_font_size=”desktop:28px;mobile_landscape:20px;” main_heading_margin=”margin-top:40px;margin-bottom:20px;” sub_heading_font_size=”desktop:18px;mobile_landscape:16px;” sub_heading_line_height=”desktop:34px;mobile_landscape:28px;” main_heading_line_height=”desktop:42px;mobile_landscape:26px;”]Setelah anda membuat seluruh step di atas, maka langkah terakhir adalah membuat route untuk membuka report pdf yang sudah anda buat. Untuk membuat route ada hanya perlu memasukan source code untuk route pada bagian bawah file web.php, untuk masuk ke file web.php and bisa masuk melalui app/Http/web.php.

Route::get('/dynamic_pdf', 'DynamicPDFController@index');

Route::get('/dynamic_pdf/pdf', 'DynamicPDFController@pdf');

Setelah anda membuat route maka report PDF dengan DomPDF pada laravel, sudah terbuat dan anda bisa langsung membukanya.[/ultimate_heading][ultimate_heading main_heading=”11. Menampilkan Report PDF” alignment=”left” main_heading_style=”font-weight:bold;” main_heading_font_size=”desktop:28px;mobile_landscape:20px;” main_heading_margin=”margin-top:40px;margin-bottom:20px;” sub_heading_font_size=”desktop:18px;mobile_landscape:16px;” sub_heading_line_height=”desktop:34px;mobile_landscape:28px;” main_heading_line_height=”desktop:42px;mobile_landscape:26px;”]Setelah fungsi pada project laravel anda sudah sesuai dengan step tutorial seluruhnya, maka report yang anda buat sudah dapat di tampilkan. Untuk menampilkan report tersebut anda membutuhkan bantuan cmd dan browser.

1.Melakukan Serve pada Project Laravel

Seperti biasanya untuk melakukan serve anda memerlukan bantuan command promprt, pastikan command prompt anda masuk ke dalam lokasi project laravel anda lalu masukan perintah “php artisan serve”.

Cara Membuat Report PDF dengan DomPDF pada Laravel

Setelah anda melakukan serve, selanjutnya anda hanya perlu memasukan domain dan route yang telah anda buat dengan menggunakan browser anda.

2.Membuka Report PDF

Langkah terakhir untuk membuka report adalah dengan menggunakan domain dan route yang tadi sudah anda masukan pada file web.php. Jika anda mengikuti seluruh step di atas, maka domain untuk membuka report adalah “127.0.0.1:8000/pegawai”.

Untuk membuka file report tersebut menjadi pdf, anda hanya perlu menekan tombol Convert PDF maka report tersebut akan terbuka dalam pdf sehingga kalian dapat melakukan save dan print secara langsung.

Cara Membuat Report PDF dengan DomPDF pada Laravel [/ultimate_heading][ultimate_heading alignment=”left” main_heading_style=”font-weight:bold;” main_heading_font_size=”desktop:28px;mobile_landscape:20px;” main_heading_margin=”margin-top:40px;margin-bottom:20px;” sub_heading_font_size=”desktop:18px;mobile_landscape:16px;” sub_heading_line_height=”desktop:34px;mobile_landscape:28px;” main_heading_line_height=”desktop:42px;mobile_landscape:26px;”]Jika report PDF dapat di buka maka tutorial Cara Membuat Report PDF dengan DomPDF pada Laravel telah selesai. Anda juga dapat melihat tutorial lainnya dan artikel yang akan berguna bagi anda disini.[/ultimate_heading][/vc_column][/vc_row]