~ We are changing the world with technology. ~

Matt Mullenweg

Membuat Aplikasi Invoice Laravel 5.7 #5: Manage Invoice & Authentication

Membuat Aplikasi Invoice Laravel 5.7 #5: Manage Invoice & Authentication

2378 Dilihat

Pendahuluan

Setelah sekian lama jeda karena tidak dapat kesempatan untuk menulis, sehingga ada beberapa part konsep dari artikel ini yang hilang begitu saja. Maka pada kesempatan ini saya mencoba merangkai kembali dan mencoba untuk menyelesaikan artikel berseri ini guna menemani teman-teman untuk belajar membuat sebuah aplikasi dengan framework Laravel from scratch.

Dilihat dari artikel sebelumnya yang membahas tentang Membuat Aplikasi Invoice Laravel 5.7: Create Invoice, maka saya berkesimpulan bahwa artikel ini terputus pada bagian membuat invoice saja tanpa kita tahu dimana harus melihat invoice yang telah dibuat sebelumnya. So, pada seri kali ini kita akan menampilkan list dari invoice yang telah dibuat beserta halaman untuk melihat invoice tersebut.

Akan tetapi, ada komentar dari teman-teman pembaca yang bertanya, "fungsi auth apa? kok saya bisa akses halaman apapun tanpa login?" Maka artikel ini saya rangkaikan dengan authentication.

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

Manajemen Invoice

Untuk menampilkan list invoice agar dapat dengan mudah dilihat dan dikelola oleh user, maka caranya pun tidak jauh berbeda dari manajemen customer ataupun product. So, buka file InvoiceController.php kemudian tambahkan method berikut:

public function index()
{
    $invoice  = Invoice::with(['customer', 'detail'])->orderBy('created_at', 'DESC')->paginate(10);
    return view('invoice.index', compact('invoice'));
}

Penjelasan: Fungsi with() untuk me-load table yang berelasi dimana customer dan detail adalah nama method yang telah didefinisikan pada model Invoice.php sebelumnya, dan fungsi ini sering disebut dengan eager loading.

Kemudian buat file index.blade.php didalam folder resources/views/invoice, kemudian tambahkan potongan code berikut:

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-md-6">
                                <h3 class="card-title">Manajemen Invoice</h3>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        @if (session('success'))
                            <div class="alert alert-success">
                                {!! session('success') !!}
                            </div>
                        @endif
                        <table class="table table-hover table-bordered">
                            <thead>
                                <tr>
                                    <th>Invoice ID</th>
                                    <th>Nama Lengkap</th>
                                    <th>No Telp</th>
                                    <th>Total Item</th>
                                    <th>Subtotal</th>
                                    <th>Pajak</th>
                                    <th>Total</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse ($invoice as $row)
                                    <tr>
                                        <td><strong>#{{ $row->id }}</strong></td>
                                        <td>{{ $row->customer->name }}</td>
                                        <td>{{ $row->customer->phone }}</td>
                                        <td><span class="badge badge-success">{{ $row->detail->count() }} Item</span></td>
                                        <td>Rp {{ number_format($row->total) }}</td>
                                        <td>Rp {{ number_format($row->tax) }}</td>
                                        <td>Rp {{ number_format($row->total_price) }}</td>
                                        <td>
                                            <form action="{{ route('invoice.destroy', $row->id) }}" method="POST">
                                                @csrf
                                                <input type="hidden" name="_method" value="DELETE">
                                                <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>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="8" class="text-center">Tidak ada data</td>
                                    </tr> 
                                @endforelse
                            </tbody>
                        </table>
                        <div class="float-right">
                            {{ $invoice->links() }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

Agar dapat digunakan, definisikan route-nya terlebih dahulu dengan menambahkan code berikut pada routes/web.php:

//[.. CODE SEBELUM ..]

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

Jangan lupa tambahkan code berikut agar dapat ditampilkan pada menu navigasi, buka file resources/views/layouts/app.blade.php:

<!-- [.. CODE SEBELUMNYA ..] -->

<li class="nav-item">
    <a href="{{ route('invoice.create') }}" class="nav-link">Buat Invoice</a>
</li>

<!-- TAMBAHKAN CODE INI -->
<li class="nav-item">
    <a href="{{ route('invoice.index') }}" class="nav-link">List Invoice</a>
</li>
<!-- TAMBAHKAN CODE INI -->

<li class="nav-item">
    <a href="{{ url('/customer') }}" class="nav-link">Manajemen Pelanggan</a>
</li>

<!-- [.. CODE SETELAHNYA ..] -->

Karena route invoice.destroy sudah digunakan, maka kita buat terlebih dahulu agar tidak terjadi error saat page di-load karena route name tidak terdefinisikan. Buka kembali file InvoiceController.php kemudian tambahkan code berikut:

public function destroy($id)
{
    $invoice = Invoice::find($id);
    $invoice->delete();
    return redirect()->back()->with(['success' => 'Data telah dihapus']);
}

Kemudian buka file routes/web.php dan tambahkan code berikut:

//[.. CODE SEBELUM ..]

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

Baca Juga: Membuat Aplikasi Invoice Laravel 5.7 #3: Manajemen Customer

Protect with Authentication

Secara otomatis Laravel telah menyediakan fitur authentication sesuai standar yang telah ditetapkan oleh Laravel dengan menggunakan command: php artisan make:auth. Command ini telah kita jalankan pada part sebelumnya akan tetapi saya lupa tepatnya berada pada part berapa. So, tugas kita sekarang hanya membuat fungsi untuk mem-protect page sehingga hanya bisa diakses oleh user yang telah login.

Buka file routes/web.php kemudian masukkan semua code dari route yang ingin dilindungi dengan proses otentikasi terlebih dahulu kedalam route berikut:

Route::group(['middleware' => 'auth'], function() {
    //[.. MASUKKAN CODE-NYA DISINI ..]
});

Sehingga hasil akhirnya akan tampak seperti berikut:

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

Auth::routes();

Route::get('/home', '[email protected]')->name('home');

//NEW CODE
Route::group(['middleware' => 'auth'], function() {
    Route::group(['prefix' => 'product'], function() {
        Route::get('/', '[email protected]');
        Route::get('/new', '[email protected]');
        Route::post('/', '[email protected]');
        Route::get('/{id}', '[email protected]');
        Route::put('/{id}', '[email protected]');
        Route::delete('/{id}', '[email protected]');
    });
    
    Route::group(['prefix' => 'customer'], function() {
        Route::get('/', '[email protected]');
        Route::get('/new', '[email protected]');
        Route::post('/', '[email protected]');
        Route::get('/{id}', 'CustomerContro[email protected]');
        Route::put('/{id}', '[email protected]');
        Route::delete('/{id}', '[email protected]');
    });
    
    Route::group(['prefix' => 'invoice'], function() {
        Route::get('/', '[email protected]')->name('invoice.index');
        Route::get('/new', '[email protected]')->name('invoice.create');
        Route::post('/', '[email protected]')->name('invoice.store');
        Route::get('/{id}', '[email protected]')->name('invoice.edit');
        Route::put('/{id}', '[email protected]')->name('invoice.update');
        Route::delete('/{id}', '[email protected]')->name('invoice.delete_product');
        Route::delete('/{id}/delete', '[email protected]')->name('invoice.destroy');
    });
});

Karena kita belum membuat fitur manajemen user, maka untuk sementara user yang akan digunakan untuk login kita buat terlebih dahulu menggunakan seeder. Untuk membuat seeds, jalankan command berikut:

php artisan make:seeder UsersTableSeeder

Kemudian buka file database/seeds/UsersTableSeeder.php, dan tambahkan code berikut:

<?php

use Illuminate\Database\Seeder;
use App\User;

class UsersTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        User::create([
            'name' => 'anugrah sandi',
            'email' => '[email protected]',
            'password' => bcrypt('secret')
        ]);
    }
}

Terakhir, jalankan command berikut untuk mengesekusi seeds diatas:

php artisan db:seed --class=UsersTableSeeder

Kesimpulan

Sepanjang artikel ini kita telah mengulas kembali bagaimana melakukan query kedatabase menggunakan Eloquent serta penggunaan eager loading. Kita juga telah belajar bagaimana menggunakan middleware, dalam hal ini adalah middleware bawaan Laravel yakni: auth. Juga kita telah belajar bagaimana membuat seeds untuk membuat dummy data.

Untuk melihat dokumentasi dari artikel ini kamu dapat dapat mengunjungi Github.

Backend Developer iTechShark, salah satu perusahaan asal Amerika. Senang dengan teknologi baru. Laravel addict yang tidak fanatik. Merekam jejak dengan menulis

Aplikasi Laundry (Laravel 5.8 - Vue.js - SPA) #3: Management Outlets Laravel VueJS

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

Salah satu module yang pertama kali akan dikerjakan adalah module dengan table yang tidak bergantung dengan table lainnya, maka dalam serial ke-3 ini kita akan menyelesaikan module management outlets,...

Aplikasi Laundry (Laravel 5.8 - Vue.js - SPA) #2: Templating & Authentication Laravel VueJS

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

Sebagai sebuah aplikasi internal antar pemilik laundry dan pengelola usaha, maka dibutuhkan halaman untuk proses otentikasi, maka pada artikel ini akan membahas bagaimana membuat authentication menggu...

Aplikasi Laundry (Laravel 5.8 - Vue.js - SPA) #1: Schema Database Laravel

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

Beragam method yang digunakan untuk membuat sebuah aplikasi sesuai dengan yang diinginkan, salah satunya menggunakan SPA. Dalam tutorial ini kita akan belajar bagaimana membuat aplikasi laundry menggu...

Komentar