~ We are changing the world with technology. ~

Matt Mullenweg

Membuat Aplikasi Invoice Laravel 5.7 #3: Manajemen Customer

Membuat Aplikasi Invoice Laravel 5.7 #3: Manajemen Customer

6533 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.

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 #20: Auto Upload Produk Marketplace Laravel

Aplikasi E-Commerce Laravel 6 #20: Auto...

Dewasa ini, marketplace menjadi platform untuk jual-beli yang banyak digemari baik bagi penjual maupun pembeli karena banyaknya promo yang diberikan oleh platform tersebut. Sehingga, data produk biasa...

Aplikasi E-Commerce Laravel 6 #19: Fitur Ongkos Kirim Laravel

Aplikasi E-Commerce Laravel 6 #19: Fitur...

Sejak pertama kali serial Membuat Aplikasi E-Commerce Laravel 6 di-release, ada banyak permintaan untuk menerapkan fitur ongkos kirim, namun kendalanya, tidak satupun yang memiliki license ongkos kiri...

Cara Membuat Sistem Komentar Dengan Laravel 7 Laravel

Cara Membuat Sistem Komentar Dengan Lara...

Membangun sebuah aplikasi yang membutuhkan feedback dari penggunanya, seperti blog, e-commerce dan lain sebagainya membutuhkan sistem komentar untuk saling interaksi antara pemilik dan pengguna atau a...

Komentar