Laravel

Membuat Aplikasi Invoice Laravel 5.7 #3: Manajemen Customer

Membuat Aplikasi Invoice Laravel 5.7 #3: Manajemen Customer

1716 Dilihat

Pendahuluan

Lanjutan seri sebelumnya yang membahas tentang module manajemen produk, pada seri ini kita akan menyelesaikan module customer. Masih berkaitan dengan CRUD karena kedua module ini merupakan data master yang menjadi pusat data untuk transaksi yakni invoice nantinya.

Yang berbeda pada seri ini adalah kita menambahkan bagaimana cara membuat pagination yang berfungsi untuk mengelompokkan data agar tidak di-load sekaligus, hal ini bertujuan untuk mempercepat load aplikasi apabila nantinya data yang tersimpan didalam database sudah banyak

Baca Juga: Membuat Fitur Bulk Import Laravel Excel 3.1

Read Data Customer

Menggunakan controller yang berbeda, maka tahap pertama adalah generate controller terlebih dahulu dengan command:

php artisan make:controller CustomerController

Kemudian buka file CustomerController.php dan tambahkan method berikut:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Customer;

class CustomerController extends Controller
{
    public function index()
    {
        $customers = Customer::orderBy('created_at', 'DESC')->paginate(10);
        return view('customer.index', compact('customers'));
    }
}

Penjelasan: paginate() adalah salah satu method yang disediakan Laravel untuk untuk me-load data berdasarkan parameter yang dikirim, dalam hal ini adalah angka 10 yang berarti total record yang akan di-load adalah sebanyak 10 records.

Selanjutnya buat file index.blade.php yang ditempatkan didalam folder resources/views/customer dan 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 Data Pelanggan</h3>
                            </div>
                            <div class="col-md-6">
                                <a href="{{ url('/customer/new') }}" class="btn btn-primary btn-sm float-right">Tambah Data</a>
                            </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>Nama Lengkap</th>
                                    <th>No Telp</th>
                                    <th>Alamat</th>
                                    <th>Email</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>
                            <tbody>
                                @forelse($customers as $customer)
                                <tr>
                                    <td>{{ $customer->name }}</td>
                                    <td>{{ $customer->phone }}</td>
                                    <td>{{ str_limit($customer->address, 50) }}</td>
                                    <td><a href="mailto:{{ $customer->email }}">{{ $customer->email }}</a></td>
                                    <td>
                                        <form action="{{ url('/customer/' . $customer->id) }}" method="POST">
                                            @csrf
                                            <input type="hidden" name="_method" value="DELETE" class="form-control">
                                            <a href="{{ url('/customer/' . $customer->id) }}" class="btn btn-warning btn-sm">Edit</a>
                                            <button class="btn btn-danger btn-sm">Hapus</button>
                                        </form>
                                    </td>
                                </tr>
                                @empty
                                <tr>
                                    <td class="text-center" colspan="5">Tidak ada data</td>
                                </tr>
                                @endforelse
                            </tbody>
                        </table>
                        <div class="float-right">
                            {{ $customers->links() }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

Note: Penjelasan code diatas sama dengan module sebelumnya. Adapun code yang baru adalah {{ $customers->links() }} berfungsi untuk membuat tombol navigasi dari pagination.

Tombol navigasi untuk pindah halaman akan ditampilkan ketika data lebih dari 10 sesuai parameter yang telah kita masukkan yakni me-load 10 data perhalaman. Sedangkan tampilannya akan terlihat seperti berikut

laravel invoice pagination

Jangan lupa tambahkan route /customer agar dapat mengakses halaman yang data customer, buka file routes/web.php kemudian tambakan potongan code berikut

Route::group(['prefix' => 'customer'], function() {
    Route::get('/', '[email protected]');
});

Baca Juga: Upload & Resize Image di Laravel 5.7

Add Data Customer

Menambahkan data customer sama halnya dengan fungsi menambahkan data product pada seri sebelumnya, yang berbeda hanya parameternya saja dan tentuya table yang dituju. Buka file CustomerController.php, kemudian tambahkan code berikut:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Customer;

class CustomerController extends Controller
{
    //[.. CODE SEBELUMNYA ..]
    public function create()
    {
        return view('customer.add');
    }
}

Kemudian buat file add.blade.php didalam folder resources/views/customer, nama file view-nya sengaja kita buat berbeda dari seri sebelumnya, karena biasanya yang baru belajar terpaku dengan materi yang dijadikan referensi sehingga takut untuk meng-eksplore, termasuk untuk sekedar mengubah nama file saja. Didalam file add.blade.php tambahkan code berikut untuk form-nya:

@extends('layouts.app')

@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header">
                        <h3 class="card-title">Tambah Data Pelanggan</h3>
                    </div>
                    <div class="card-body">
                        @if (session('error'))
                            <div class="alert alert-danger">
                                {{ session('error') }}
                            </div>
                        @endif

                        <form action="{{ url('/customer') }}" method="post">
                            @csrf
                            <div class="form-group">
                                <label for="">Nama Lengkap</label>
                                <input type="text" name="name" class="form-control {{ $errors->has('name') ? 'is-invalid':'' }}" placeholder="Masukkan nama lengkap">
                                <p class="text-danger">{{ $errors->first('name') }}</p>
                            </div>
                            <div class="form-group">
                                <label for="">Alamat</label>
                                <textarea name="address" cols="5" rows="5" class="form-control {{ $errors->has('address') ? 'is-invalid':'' }}"></textarea>
                                <p class="text-danger">{{ $errors->first('address') }}</p>
                            </div>
                            <div class="form-group">
                                <label for="">Phone</label>
                                <input type="text" name="phone" class="form-control {{ $errors->has('phone') ? 'is-invalid':'' }}">
                                <p class="text-danger">{{ $errors->first('phone') }}</p>
                            </div>
                            <div class="form-group">
                                <label for="">Email</label>
                                <input type="text" name="email" class="form-control {{ $errors->has('email') ? 'is-invalid':'' }}">
                                <p class="text-danger">{{ $errors->first('email') }}</p>
                            </div>
                            <div class="form-group">
                                <button class="btn btn-danger btn-sm">Simpan</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

Note: Penjelasannya masih sama dengan module sebelumnya.

Selanjutnya kembali CustomerController.php kemudian tambahkan method berikut untuk meng-handle data yang dikirim dari form diatas:

public function save(Request $request)
{
    //VALIDASI DATA
    $this->validate($request, [
        'name' => 'required|string',
        'phone' => 'required|max:13', //maximum karakter 13 digit
        'address' => 'required|string',
        //unique berarti email ditable customers tidak boleh sama
        'email' => 'required|email|string|unique:customers,email' // format yag diterima harus email
    ]);

    try {
        $customer = Customer::create([
            'name' => $request->name,
            'phone' => $request->phone,
            'address' => $request->address,
            'email' => $request->email
        ]);
        return redirect('/customer')->with(['success' => 'Data telah disimpan']);
    } catch (\Exception $e) {
        return redirect()->back()->with(['error' => $e->getMessage()]);
    }
}

Terakhir buat route yang akan menjadi URL untuk mengirim request tersebut, dalam hal ini /customer dengan method POST, buka file routes/web.php kemudian tambahkan code berikut:

Route::group(['prefix' => 'customer'], function() {
    //[.. CODE SEBELUMNYA ..]
    Route::get('/new', '[email protected]');
    Route::post('/', '[email protected]');
});

Update Data Customer

Fungsi edit data juga tidak jauh berbeda dengan module sebelumnya, schema-nya tampilkan data tersebut kedalam form kemudian update, jadi terdapat dua step. Buka file CustomerController.php kemudian tambahkan method berikut:

public function edit($id)
{
    $customer = Customer::find($id);
    return view('customer.edit', compact('customer'));
}

Lalu buat file edit.blade.php dan tambahkan 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">
                        <h3 class="card-title">Tambah Data Pelanggan</h3>
                    </div>
                    <div class="card-body">
                        @if (session('error'))
                            <div class="alert alert-danger">
                                {{ session('error') }}
                            </div>
                        @endif

                        <form action="{{ url('/customer/' . $customer->id) }}" method="post">
                            @csrf
                            <input type="hidden" name="_method" value="PUT" class="form-control">
                            <div class="form-group">
                                <label for="">Nama Lengkap</label>
                                <input type="text" name="name" class="form-control {{ $errors->has('name') ? 'is-invalid':'' }}" value="{{ $customer->name }}" placeholder="Masukkan nama lengkap">
                                <p class="text-danger">{{ $errors->first('name') }}</p>
                            </div>
                            <div class="form-group">
                                <label for="">Alamat</label>
                                <textarea name="address" cols="5" rows="5" class="form-control {{ $errors->has('address') ? 'is-invalid':'' }}">{{ $customer->address }}</textarea>
                                <p class="text-danger">{{ $errors->first('address') }}</p>
                            </div>
                            <div class="form-group">
                                <label for="">Phone</label>
                                <input type="text" name="phone" class="form-control {{ $errors->has('phone') ? 'is-invalid':'' }}" value="{{ $customer->phone }}">
                                <p class="text-danger">{{ $errors->first('phone') }}</p>
                            </div>
                            <div class="form-group">
                                <label for="">Email</label>
                                <input type="number" name="email" class="form-control {{ $errors->has('email') ? 'is-invalid':'' }}" value="{{ $customer->email }}" readonly>
                                <p class="text-danger">{{ $errors->first('email') }}</p>
                            </div>
                            <div class="form-group">
                                <button class="btn btn-danger btn-sm">Update</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

Note: Yang berbeda pada fitur edit ini adalah kolom untuk email kita tambahkan attribute readonly, sehingga user tidak dapat mengganti email yang sudah terdaftar.

Lalu kembali ke controller CustomerController.php, lalu tambahkan method untuk meng-handle data yang akan di-update:

public function update(Request $request, $id)
{
    $this->validate($request, [
        'name' => 'required|string',
        'phone' => 'required|max:13',
        'address' => 'required|string',
        'email' => 'required|email|string|exists:customers,email'
    ]);

    try {
        $customer = Customer::find($id);
        $customer->update([
            'name' => $request->name,
            'phone' => $request->phone,
            'address' => $request->address
        ]);
        return redirect('/customer')->with(['success' => 'Data telah diperbaharui']);
    } catch (\Exception $e) {
        return redirect()->back()->with(['error' => $e->getMessage()]);
    }
}

Terakhir tambahkan route yang akan menjadi URL, terdapat dua buah route yakni utk url form edit dan url untuk mengirim request update. Buka file routes/web.php, kemudian tambahkan code berikut:

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

Delete Data Customer

Bagian delete juga tidak banyak berbeda, konsepnya hanya menerima parameter berupa ID yang dinamis ketika tombol delete ditekan, dan id tersebut digunakan untuk melakukan query ke database lalu menghapus records yang terkait. Pada CustomerController.php, tambahkan method berikut:

public function destroy($id)
    {
        $customer = Customer::find($id);
        $customer->delete();
        return redirect()->back()->with(['success' => '<strong>' . $customer->name . '</strong> Telah dihapus']);
    }

Jangan lupa tambahkan route-nya, jadi route berfungsi untuk menentukan kemana url untuk method tersebut bekerja. Buka file routes/web.php dan tambahkan code:

Route::group(['prefix' => 'customer'], function() {
    //[.. CODE SEBELUMNYA ..]
    Route::delete('/{id}', '[email protected]');
});

Kesimpulan

Pada dasarnya, antara manajemen produk dan customer hampir sama karena hanya persoalan menyimpan data terkait ke dalam database, dimana pada masing-masing module memiliki fungsi untuk melihat data, menyimpan data tentunya, mengubah data yang telah disimpan dan terakhir menghapus data. Kedua module ini apabila kamu membacanya dengan seksama dan mengikutinya dari awal sampai akhir, maka kamu telah memahami bagaimana crud bekerja.

Ohya untuk melihat dokumentasi code dapat kamu temukan di Github.

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

Membuat Repository Pattern Laravel 5.7 Laravel

Membuat Repository Pattern Laravel 5.7

Laravel hadir dengan berbagai fitur beserta kemudahan yang ditawarkan guna mempercepat proses development, namun bukan berarti hal itu membuat kita menjadi programmer "pemakai" tanpa memikirkan dan be...

Membuat Aplikasi Invoice Laravel 5.7 #6: Laporan Laravel

Membuat Aplikasi Invoice Laravel 5.7 #6:...

Melanjutkan serial belajar Laravel basic dengan terjun langsung untuk membuat sebuah aplikasi, dan serial ini merupakan seri terakhir yakni membuat laporan dalam bentuk PDF. Berikut ada materi bagaima...

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

Membuat Aplikasi Invoice Laravel 5.7 #5:...

Setelah sekian lama jeda karena tidak dapat kesempatan untuk menulis, sehingga ada beberapa part konsep dari artikel ini yang hilang begitu saja. Pada kesempatan kali ini kita akan membahas cara Membu...

Komentar