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
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('/', 'CustomerController@index');
});
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', 'CustomerController@create');
Route::post('/', 'CustomerController@save');
});
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}', 'CustomerController@edit');
Route::put('/{id}', 'CustomerController@update');
});
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}', 'CustomerController@destroy');
});
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.
Comments