~ We are changing the world with technology. ~

Matt Mullenweg

Membuat Aplikasi Invoice Laravel 5.7 #6: Laporan

Membuat Aplikasi Invoice Laravel 5.7 #6: Laporan

4528 Dilihat

Pendahuluan

Melanjutkan serial belajar Laravel basic dengan terjun langsung untuk membuat sebuah aplikasi, dan serial ini merupakan seri terakhir yakni membuat laporan dalam bentuk PDF. Apabila teman-teman pembaca adalah seorang mahasiswa, maka lengkap sudah poin-poin yang harus terpenuhi yakni master data, transaksi dan output berupa laporan.

Sebenarnya cara untuk men-generate pdf sudah pernah dibahas pada artikel berbeda, namun akan kita bahas kembali dengan tujuan untuk menyelesaikan case yang sedang kita kerjakan.

Baca Juga: Membuat Aplikasi Invoice Laravel 5.7 #5: Manage Invoice Authentication

Make a Report as PDF

PHP hadir dengan berbagai macam library untuk men-generate pdf, diantaranya dompdf. Di Laravel juga terdapat package yang menggunakan dompdf sebagai sumber utamanya, package tersebut bernama Laravel Dompdf yang dibuat oleh Barryvdh.

Buka terminal, kemudian install package tersebut dengan command:

composer require barryvdh/laravel-dompdf

Selanjutnya buka file InvoiceController.php kemudian tambahkan code berikut:

public function generateInvoice($id)
{
    //GET DATA BERDASARKAN ID
    $invoice = Invoice::with(['customer', 'detail', 'detail.product'])->find($id);
    //LOAD PDF YANG MERUJUK KE VIEW PRINT.BLADE.PHP DENGAN MENGIRIMKAN DATA DARI INVOICE
    //KEMUDIAN MENGGUNAKAN PENGATURAN LANDSCAPE A4
    $pdf = PDF::loadView('invoice.print', compact('invoice'))->setPaper('a4', 'landscape');
    return $pdf->stream();
}

Masih dengan file yang sama, jangan lupa tambahkan use statement berikut diluar class name:

use PDF;

Buat file print.blade.php didalam folder resources/views/invoice dan tambahkan potongan code berikut:

<!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>Invoice</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
        body{
            font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            color:#333;
            text-align:left;
            font-size:18px;
            margin:0;
        }
        .container{
            margin:0 auto;
            margin-top:35px;
            padding:40px;
            width:750px;
            height:auto;
            background-color:#fff;
        }
        caption{
            font-size:28px;
            margin-bottom:15px;
        }
        table{
            border:1px solid #333;
            border-collapse:collapse;
            margin:0 auto;
            width:740px;
        }
        td, tr, th{
            padding:12px;
            border:1px solid #333;
            width:185px;
        }
        th{
            background-color: #f0f0f0;
        }
        h4, p{
            margin:0px;
        }
    </style>
</head>
<body>
    <div class="container">
        <table>
            <caption>
                Daengweb Invoice App
            </caption>
            <thead>
                <tr>
                    <th colspan="3">Invoice <strong>#{{ $invoice->id }}</strong></th>
                    <th>{{ $invoice->created_at->format('D, d M Y') }}</th>
                </tr>
                <tr>
                    <td colspan="2">
                        <h4>Perusahaan: </h4>
                        <p>Daengweb.<br>
                            Jl Sultan Hasanuddin Makassar<br>
                            085343966997<br>
                            [email protected]
                        </p>
                    </td>
                    <td colspan="2">
                        <h4>Pelanggan: </h4>
                        <p>{{ $invoice->customer->name }}<br>
                        {{ $invoice->customer->address }}<br>
                        {{ $invoice->customer->phone }} <br>
                        {{ $invoice->customer->email }}
                        </p>
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Produk</th>
                    <th>Harga</th>
                    <th>Qty</th>
                    <th>Subtotal</th>
                </tr>
                @foreach ($invoice->detail as $row)
                <tr>
                    <td>{{ $row->product->title }}</td>
                    <td>Rp {{ number_format($row->price) }}</td>
                    <td>{{ $row->qty }}</td>
                    <td>Rp {{ $row->subtotal }}</td>
                </tr>
                @endforeach
                <tr>
                    <th colspan="3">Subtotal</th>
                    <td>Rp {{ number_format($invoice->total) }}</td>
                </tr>
                <tr>
                    <th>Pajak</th>
                    <td></td>
                    <td>2%</td>
                    <td>Rp {{ number_format($invoice->tax) }}</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th colspan="3">Total</th>
                    <td>Rp {{ number_format($invoice->total_price) }}</td>
                </tr>
            </tfoot>
        </table>
    </div>
</body>
</html>

Note: Tidak ada yang perlu dijelaskan karena hanya menampilkan data seperti yang telah dilakukan sebelumnya.

Terakhir definisikan route-nya agar dapat diakses oleh user, buka file routes/web.php:

Route::group(['prefix' => 'invoice'], function() {
    //[.. CODE SEBELUMNYA ..]
    Route::get('/{id}/print', '[email protected]')->name('invoice.print');
});

Buat tombol dari halaman list invoice yang merujuk ke url untuk menampilkan report yang telah dibuat, buka file resources/views/invoice/index.blade.php, kemudian modifikasi pada bagian berikut:

<!-- CODE SEBELUMNYA -->

<form action="{{ route('invoice.destroy', $row->id) }}" method="POST">
    @csrf
    <input type="hidden" name="_method" value="DELETE">
    
    <!-- TAMBAHKAN BARIS CODE INI -->
    <a href="{{ route('invoice.print', $row->id) }}" class="btn btn-secondary btn-sm">Print</a>
    <!-- TAMBAHKAN BARIS CODE INI -->
    
    <a href="{{ route('invoice.edit', $row->id) }}" class="btn btn-warning btn-sm">Edit</a>
    <button class="btn btn-danger btn-sm">Delete</button>
</form>

<!-- CODE LAINNYA -->

Adapun hasil yang akan kita peroleh akan terlihat seperti ini

pdf report laravel invoice

Kemudian pada list invoice akan tampak seperti ini

list invoice

Baca Juga: Membuat Aplikasi Invoice Laravel 5.7 #4: Create Invoice

Kesimpulan

Mengulas kembali dari serial Membuat aplikasi invoice Laravel 5.7, kita telah belajar banyak diantaranya bagaimana memanipulasi database menggunakan Eloquent, Eager loading, Accessors & Mutators, Authentication, Observers, Seeders, Migrations, Generate PDF, dan masih banyak lagi.

Besar harapan dengan adanya artikel ini dapat membantu teman-teman pembaca setidaknya untuk memahami basic dari Laravel atau dengan kata lain dapat merangkai potongan code menjadi sebuah aplikasi utuh. Apabila kamu masih bingung, kembali lagi ke bagian awal pembahasan dan ikuti secara perlaban, jika masih bingung jangan sungkan untuk bertanya pada kolom komentar. Let's do it.

Ohya kamu dapat melihat dokumentasi code di GitHub.

Full Stack Developer & Remote Worker salah satu perusahaan asal Australia. Senang dengan teknologi baru. Laravel addict yang tidak fanatik. Merekam jejak dengan menulis

Aplikasi Laundry (Laravel 5.8 - Vue.js - SPA) #12: Payment & Detail Transaksi Laravel VueJS

Aplikasi Laundry (Laravel 5.8 - Vue.js -...

Setelah menyelesaikan fitur untuk mencatat transaksi yang telah dilakukan oleh user, maka tugas selanjutnya adalah membuat fitur untuk meng-input data pembayaran. Setiap transaksi memiliki 1 data pemb...

Aplikasi Laundry (Laravel 5.8 - Vue.js - SPA) #11: Modul Transaksi Part 3 Laravel VueJS

Aplikasi Laundry (Laravel 5.8 - Vue.js -...

Titipan cerita dari part sebelumnya dimana terdapat bug tentang waktu yang dibutuhkan untuk mengerjakan pesanan sesuai layanan yang digunakan oleh pelanggan. Maka pada seri membuat aplikasi laundry la...

Aplikasi Laundry (Laravel 5.8 - Vue.js - SPA) #10: Modul Transaksi Part 2 Laravel VueJS

Aplikasi Laundry (Laravel 5.8 - Vue.js -...

Adapun schema yang diinginkan untuk form customer adalah ketika user ingin menambahkan customer baru, maka terdapat sebuah tombol untuk membuka form tersebut. Jika penambahan data customer berhasil di...

Komentar