Pembuatan Halaman Data Pengaduan
Contents
Halaman daftar pengaduan perlu dibuat untuk menampilkan daftar pengaduan yang sudah masuk dari masyarakat, agar bisa dikelola dan ditindak lanjuti dengan baik.
Penambahan Menu Pengaduan
Menu utama “Pengaduan” dapat kita tambahkan untuk memfasilitasi menampilkan halaman web dengan datatables yang memuat data kontekstual:
- Bagi Administrator dan Petugas, akan menampilkan semua laporan pengaduan yang ada di sistem, aksi untuk verifikasi dan validasi (mengubah menjadi berstatus “proses”), serta memberikan tanggapan.
- Bagi Masyarakat, hanya akan menampilkan laporan pengaduan yang ia kirimkan sendiri, beserta tanggapan yang didapatkan.
Hal ini tentunya meringkas kode program karena kita tidak perlu membuat file terpisah untuk menangani dua hal yang memiliki kemiripan, dan hanya berbeda pada beberapa komponen tampilannya saja. Menu utama dapat kita tambahkan pada file resources\views\layout\app.blade.php dengan menambahkan List Item (<li>) pada bagian <ul> dengan komentar “Left Side of Navbar”, menjadi sebagai berikut:
<!-- Left Side Of Navbar -->
<ul class="navbar-nav me-auto">
<li class="nav-item">
<a class="nav-link" href="{{ route('pengaduan.index') }}">
<i class="bi-envelope-paper-fill"></i>
Pengaduan
</a>
</li>
</ul>
Penyiapan PengaduanDataTable Class
Buat PengaduanDataTable menggunakan perintah:
php artisan datatables:make PengaduanPerintah tersebut akan menghasilkan file app\DataTables\PengaduanDataTable.php yang perlu kita sesuaikan agar bisa menampilkan datatable saat halaman Daftar Pengaduan diakses. Berikut adalah contoh penyesuaian yang sudah dilakukan pada PengaduanDataTable.php, yang tentunya masih bisa Anda kustomisasi sendiri sesuai kebutuhan:
<?php
namespace App\DataTables;
use App\Models\Pengaduan;
use Illuminate\Database\Eloquent\Builder as QueryBuilder;
use Illuminate\Support\Facades\Auth;
use Yajra\DataTables\EloquentDataTable;
use Yajra\DataTables\Html\Builder as HtmlBuilder;
use Yajra\DataTables\Html\Button;
use Yajra\DataTables\Html\Column;
use Yajra\DataTables\Html\Editor\Editor;
use Yajra\DataTables\Html\Editor\Fields;
use Yajra\DataTables\Services\DataTable;
class PengaduanDataTable extends DataTable
{
/**
* Build DataTable class.
*
* @param QueryBuilder $query Results from query() method.
* @return \Yajra\DataTables\EloquentDataTable
*/
public function dataTable(QueryBuilder $query): EloquentDataTable
{
return (new EloquentDataTable($query))
->editColumn('tgl_pengaduan', function($data) {
return $data->tgl_pengaduan->format('d-m-Y H:i');
})
->editColumn('isi_laporan', function($data) {
return substr($data->isi_laporan, 0, 50).'...';
})
->addColumn('action', function($pengaduan) {
return view('pengaduan.actions', [
'model' => $pengaduan,
'detail_url' => route('pengaduan.show', $pengaduan->id)
]);
})
->setRowId('id');
}
/**
* Get query source of dataTable.
*
* @param \App\Models\Pengaduan $model
* @return \Illuminate\Database\Eloquent\Builder
*/
public function query(Pengaduan $model): QueryBuilder
{
if (Auth::user()->level == 'masyarakat') {
return $model->newQuery()->with('user')
->withCount('tanggapan')
->where('user_id',Auth::id());
} else {
return $model->newQuery()->with('user')
->withCount('tanggapan');
}
}
/**
* Optional method if you want to use html builder.
*
* @return \Yajra\DataTables\Html\Builder
*/
public function html(): HtmlBuilder
{
return $this->builder()
->setTableId('pengaduan-table')
->columns($this->getColumns())
->minifiedAjax()
//->dom('Bfrtip')
->orderBy(1)
// ->selectStyleSingle()
->buttons([
// Button::make('excel'),
// Button::make('csv'),
// Button::make('pdf'),
// Button::make('print'),
// Button::make('reset'),
// Button::make('reload')
]);
}
/**
* Get the dataTable columns definition.
*
* @return array
*/
public function getColumns(): array
{
return [
Column::make('id'),
Column::make('tgl_pengaduan'),
Column::make('user.name')
->title('Nama Pelapor'),
Column::make('isi_laporan')
->title('Ringkasan Laporan'),
Column::make('status'),
Column::make('tanggapan_count')
->title('Jml. Tanggapan'),
// Column::make('created_at'),
// Column::make('updated_at'),
Column::computed('action')
->exportable(false)
->printable(false)
->width(60)
->addClass('text-nowrap')
->title('Aksi'),
];
}
/**
* Get filename for export.
*
* @return string
*/
protected function filename(): string
{
return 'Pengaduan_' . date('YmdHis');
}
}
Penyesuaian Aksi index() pada PengaduanController
Sesuaikan function index() pada app\Http\Controllers\PengaduanController.php menjadi sebagai berikut (jangan lupa tambahkan juga kode untuk use di bagian atas file):
use App\DataTables\PengaduanDataTable;
....
public function index(PengaduanDataTable $dataTable)
{
return $dataTable->render('pengaduan.index');
}
Pembuatan View untuk Index dan Actions bagi Pengaduan
Buat file baru bernama index.blade.php di folder resources\views\pengaduan, dengan isi kode sebagai berikut:
@extends('layouts.app')
@section('content')
<div class="container">
<div class="card">
<div class="card-header">Data Laporan Pengaduan</div>
<div class="card-body">
{{ $dataTable->table() }}
</div>
</div>
</div>
@endsection
@push('scripts')
{{ $dataTable->scripts(attributes: ['type' => 'module']) }}
@endpush
Buat juga file bernama actions.blade.php di folder yang sama dengan index, berisi:
<a title="Detail" class="btn btn-sm btn-primary detail" data-id="{{ $model->id }}" href="{{ $detail_url }}">
<i class="bi bi-file-text"></i> Detail
</a>
Kode tersebut akan dipanggil oleh PengaduanDataTable saat membangun kolom custom untuk aksi.
Penyesuaian App Layout
Agar script bagi Datatable dapat berjalan dengan baik, kita perlu meletakkan kode @stack('scripts') sebelum closing tag dari tag body (</body>) pada file resources\views\layouts\app.blade.php :
...
@stack('scripts')
</body>
</html>
Hasilnya, jika saat ini kita mengakses menu Pengaduan, akan tampil halaman Data Laporan Pengaduan dengan fitur yang cukup lengkap. Lakukan uji coba tampilan menggunakan jenis user yang berbeda-beda.
