~ 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

6918 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 E-Commerce Laravel 6 #17: Laporan Periode Date Range Laravel

Aplikasi E-Commerce Laravel 6 #17: Lapor...

Laporan memiliki peranan penting dalam mengevaluasi sebuah bisnis, termasuk dalam hal ini adalah transaksi jual beli. Fitur ini tidak lebih dari sekedar feed order, akan tetapi ada pembaca DaengWeb ya...

Aplikasi E-Commerce Laravel 6 #16: Integrasi Telegram Bot Laravel

Aplikasi E-Commerce Laravel 6 #16: Integ...

Membuat notifikasi dalam bentuk sosial chat akan lebih cepat tersampaikan kepada pemilik aplikasi karena di era ini orang-orang banyak menghabiskan waktunya dengan sosial media / chat. Berikut adalah...

Aplikasi E-Commerce Laravel 6 #15: Complaint & Return Order Laravel

Aplikasi E-Commerce Laravel 6 #15: Compl...

Menangani pra dan pasca pengiriman adalah salah satu fitur yang menarik dari sebuah ecommerce, maka pada artikel ini kita membahas bagaimana membuat aplikasi ecommerce laravel 6 untuk complain & retur...

Komentar