Di artikel ini, kita akan melanjutkan Sistem Export PDF pada Laravel. Setelah di artikel sebelumnya kita melakukan instalasi dan persiapan kebutuhan seperti Tampilan dan Database, disini kita akan benar-benar memulai untuk melakukan Export PDF pada Laravel.
Penjelasan Sistem Export PDF pada Laravel
Nah, yang akan kita lakukan disini adalah melakukan instalasi liblary untuk sistem Export PDF ini, setelah itu, kita akan membuat sebuah Tombol, dimana Tombol ini akan mengakses Fungsi yang digunakan untuk Export PDF pada Laravel.
Praktek
Okay, jadi disini kita akan mulai untuk Praktek export PDF pada Laravel. Akan ada instalasi dan beberapa perubahan syntax pada Laravel yang akan kita lakukan sekarang.
Install Liblary
Okay, seperti yang ada di Artikel sebelumnya, kita akan menginstall Liblary Laravel-Dompdf. Liblary ini bisa kalian lihat detailnya pada link ini github.com/barryvdh/laravel-dompdf. Pada Link tersebut sudah terdapat juga cara instalasi Liblary yang akan kita praktekkan disini.
Sekarang, buka Terminal didalam Project Laravel kalian, lalu ketikkan syntax berikut
composer require barryvdh/laravel-dompdf
Setelah selesai proses instalasi, berikutnya kita harus menambahkan beberapa syntax pada file config/app.php. Disini kita akan menambahkan syntax tepat pada bagian providers dan aliases.
Hal ini kita lakukan agar Project Laravel kita mengetahui kalau kita sudah menginstall Liblary DOMPDF ini.
Tambahkan syntax seperti ini pada file config/app.php.
'providers' => [
Barryvdh\DomPDF\ServiceProvider::class,
...
],
'aliases' => [
'PDF' => Barryvdh\DomPDF\Facade::class,
...
]
Setelah selesai semua Proses ini, berikutnya kita tinggal membuat Tampilan Data dan Tombol yang akan digunakan untuk melakukan Proses Export PDF pada Laravel kita.
Setting web.php
Nah, di Router (web.php) kita ini, kita akan memperkenalkan URL/jalan yang akan dilalui apabila kita ingin melakukan Export PDF pada Laravel. Jadi, kita perlu membuat 2 URL disini, yang pertama adalah untuk menampilkan Data, yang kedua adalah untuk Sistem Export kita.
File web.php
Route::get('/', [KaryawanController::class, 'index']);
Route::get('/pegawai/cetak_pdf', [KaryawanController::class, 'cetak']);
Kalau teman-teman lihat, pada File web.php kita, disana terdapat dua rujukan Fungsi, yaitu index dan cetak. Index untuk menampilkan tampilan Data, dan cetak untuk Mencetak Data tersebut
Membuat Tampilan
Setelah selesai mengatur Route kita, sekarang kita akan membuat tampilan Tabel dan Tombol sederhana, disini Aku menggunakan Bootstrap saja, agar tampilan lebih menarik. kita akan buat ini didalam Folder views. Detailnya pada views/keryawan/index.blade.php.
File views/keryawan/index.blade.php
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Data Karyawan</title>
</head>
<body>
<div class="container">
<div class="mt-5 mb-5">
<h1 class="display-4">Data Karyawan</h1>
</div>
<a href="/cetak" class="btn btn-primary">Export Data</a>
<table class="table">
<thead>
<tr>
<th scope="col">Nama</th>
<th scope="col">Email</th>
<th scope="col">Nomor Hp</th>
<th scope="col">Pekerjaan</th>
</tr>
</thead>
<tbody>
@foreach ($dataKaryawan as $item)
<tr>
<th scope="row">{{ $item->nama }}</th>
<td>{{ $item->email }}</td>
<td>{{ $item->no_hp }}</td>
<td>{{ $item->pekerjaan }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
</script>
</body>
</html>
Setelah selesai membuat Tampilan dari Web nya, berikutnya kita harus membuat Tampilan untuk PDF yang akan kita Export. Tampilan ini cukup sederhana, cukup gunakan HTML biasa agar mudah untuk di cetak. Codingan ini akan kita tempatkan pada views/keryawan/cetak.blade.php
File views/keryawan/cetak.blade.php
<h1 class="display-4">Data Karyawan</h1>
<table class="table" border="1">
<thead>
<tr>
<th scope="col">Nama</th>
<th scope="col">Email</th>
<th scope="col">Nomor Hp</th>
<th scope="col">Pekerjaan</th>
</tr>
</thead>
<tbody>
@foreach ($dataKaryawan as $item)
<tr>
<th scope="row">{{ $item->nama }}</th>
<td>{{ $item->email }}</td>
<td>{{ $item->no_hp }}</td>
<td>{{ $item->pekerjaan }}</td>
</tr>
@endforeach
</tbody>
</table>
Setting Controller
Setelah selesai membuat tampilan, sekarang kita akan mengkases tampilan itu dari Controller kita. Seperti yang sudah kita buat di Route(web.php), kita butuh 2 fungsi, yaitu fungsi index untuk menampilkan Data, dan fungsi cetak untuk mencetak Data yang ditampilkan.
Selain itu, di Controller kita juga harus menambahkan sebuah “Perkenalan” untuk system Export PDF kita. jadi nanti Controller tau dengan apa kita mencetak PDF kita. Nah, sekarang mari kita edit File KaryawanController.php
File KaryawanController.php
use Barryvdh\DomPDF\Facade as PDF;
class KaryawanController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
return view('karyawan.index', [
'dataKaryawan' => Karyawan::get()
]);
}
public function cetak()
{
$dataKaryawan = Karyawan::all();
$pdf = PDF::loadview('karyawan.cetak', ['dataKaryawan' => $dataKaryawan]);
return $pdf->download('laporan-pegawai.pdf');
}
}
Nah, setelah selesai, tinggal kita jalankan Laravel kita, lalu buka url localhost:8000.
Praktek
Nah, sekarang kita akan praktek Menampilkan data dan melakukan Export PDF pada Laravel kita. Saat teman-teman buka Projek Laravel di Website, harusnya muncul tampilan seperti ini.
Nah, tinggal klik Tombol Export Data diatas, lalu kalian akan mendapatkan file PDF dengan isi yang sama dengan Gambar diatas.
Nah, dengan ini kita sudah selesai membuat Sistem Export PDF pada Laravel dengan Liblary DOMPDF
Kesimpulan
Nah, diartikel ini teman-teman sudah berhasil mempraktekan cara untuk Export PDF pada Laravel, semoga Artikel ini bermanfaat untuk kita semua yaa, oh ya kalau kalian mau lihat Part 1 dari Artikel ini, bisa klik Link dibawah ini yaa
1 Response
[…] setelah sebelumnya kita membuat sebuah Fitur dimana kita bisa Export Pdf dari Laravel, kali ini kita akan membuat Fitur untuk Import Excel pada […]