Pembuatan Fitur Pengaduan
Contents
Untuk menyederhanakan aplikasi, pada contoh ini akan ditampilkan form pengaduan pada halaman Home, hanya bagi user dengan level “masyarakat”, karena sesuai pembagian privilege pada soal, hanya masyarakat yang bisa menulis Laporan Pengaduan.
Pembuatan Form Pengaduan
Buka file resources\views\home.blade.php , lalu buat/salin div dengan class card, sejajar dengan yang sudah ada, namun ditambah dengan kondisional pada Laravel Blade, bahwa bagian tersebut hanya akan ditampilkan bagi user dengan level “masyarakat”. Berikut adalah keseluruhan div dengan class col-md-8 setelah disesuaikan:
<div class="col-md-8">
<div class="card">
<div class="card-header">{{ __('Dashboard') }}</div>
<div class="card-body">
Anda login sebagai <strong>{{ Auth::user()->name }}</strong>, level: {{ Auth::user()->level }}
</div>
</div>
@if (Auth::user()->level == 'masyarakat')
<br>
<div class="card">
<div class="card-header">Laporan Pengaduan</div>
<!-- form start -->
{{ Form::open(['url'=>route('pengaduan.store'), 'files' => true]) }}
<div class="card-body">
@if (session('success'))
<div class="alert alert-dismissible alert-success fade show" role="alert">
{{ session('success') }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
@endif
<div class="row mb-3">
<label for="name" class="col-md-4 col-form-label text-md-end">Isi Laporan</label>
<div class="col-md-6">
<textarea id="isi_laporan" class="form-control @error('isi_laporan') is-invalid @enderror"
name="isi_laporan" required autocomplete="isi_laporan" autofocus>{{ old('isi_laporan') }}</textarea>
@error('isi_laporan')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="row mb-3">
<label for="name" class="col-md-4 col-form-label text-md-end">Foto Pendukung</label>
<div class="col-md-6">
<input id="foto" type="file" class="form-control @error('foto') is-invalid @enderror" name="foto" value="{{ old('foto') }}" required autocomplete="foto" autofocus>
@error('foto')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
@enderror
</div>
</div>
<div class="row mb-3">
<div class="col-md-4"></div>
<div class="col-md-6">
<button type="submit" class="btn btn-primary" dusk="create-pengaduan" id="save">Simpan</button>
</div>
</div>
</div> <!-- /.card-body -->
{{ Form::close() }}
</div> {{-- .card --}}
@endif
</div> {{-- .col-md-8 --}}
Jika Anda uji coba untuk login menggunakan user dengan level yang berbeda (masyarakat dan admin/petugas), maka saat ini tampilan halaman Home/Dashboard akan memberikan tampilan yang berbeda.
Penyesuaian FormRequest
FormRequest merupakan class yang digunakan untuk memisahkan validasi dan autorisasi penyimpanan atau pembaharuan data yang sebelumnya lazim disatukan pada Controller. Semua FormRequest yang telah kita generate sebelumnya akan tersimpan di folder app\Http\Requests. Untuk keperluan kita saat ini, sesuaikan StorePengaduanRequest.php menjadi:
class StorePengaduanRequest extends FormRequest
{
/**
* Determine if the user is authorized to make this request.
*
* @return bool
*/
public function authorize()
{
return true;
}
/**
* Get the validation rules that apply to the request.
*
* @return array<string, mixed>
*/
public function rules()
{
return [
'isi_laporan' => 'required|min:10',
'foto' => 'required|mimes:jpeg,png,jpg'
];
}
}
Setting di atas selain membuat StorePengaduanRequest boleh digunakan untuk menerima request dari pengguna (return true), juga memvalidasi dengan ketentuan:
- isi_laporan tidak boleh kosong, minimal diisi 10 karakter.
- foto tidak boleh kosong, dan harus dalam format jpeg, png, atau jpg.
CATATAN: Jika Anda lupa mengeset authorize() dari false menjadi true, maka semua request yang menggunakan ini akan memunculkan error 403.
Memproses Penyimpanan Pengaduan dan Foto
Untuk bisa memproses penyimpanan laporan pengaduan baru ke database, sesuai route yang dituju pada form sebelumnya, kita harus menyesuaikan aksi store() pada PengaduanController (app\Http\Controllers\PengaduanController.php):
public function store(StorePengaduanRequest $request)
{
$fileFoto = $request->file('foto');
$namafile = time().$fileFoto->getClientOriginalName();
Storage::disk('local')->putFileAs(
'public/',
$fileFoto,
$namafile
);
$pengaduan = new Pengaduan;
$pengaduan->tgl_pengaduan = Carbon::now();
$pengaduan->user_id = Auth::id();
$pengaduan->isi_laporan = $request->isi_laporan;
$pengaduan->foto = $namafile;
$pengaduan->status = '0';
$pengaduan->save();
return redirect(route('home'))->with(['success' => 'Laporan berhasil disimpan']);
}
Karena kode di atas memanfaatkan beberapa class yang akan error jika tidak ditambahkan sintaks untuk mengimpornya terlebih dahulu (use), maka pastikan pada bagian awal dari PengaduanController.php terdapat kode berikut:
use App\Models\Pengaduan; use App\Http\Requests\StorePengaduanRequest; use App\Http\Requests\UpdatePengaduanRequest; use Carbon\Carbon; use Illuminate\Support\Facades\Auth; use Illuminate\Support\Facades\Storage;
Cara lain yang lebih elegan dan wajar saat Anda coding sendiri adalah dengan memanfaatkan autocomplete dari PHP Intelephense, pilih dari daftar yang muncul, tekan enter, sehingga sintaks use yang sesuai akan otomatis ditambahkan oleh editor:
Namun, sebelum Anda menguji coba form untuk melakukan pengiriman laporan Pengaduan, terlebih dahulu kita perlu membuat softlink terhadap folder storage, untuk diletakkan di folder public, agar kode di atas dapat berfungsi. Perintah ini hanya perlu dijalankan 1 kali saja di terminal:
php artisan storage:linkCATATAN: Saat baru berpindah sistem (misal, upload ke web server produksi), link “storage” pada folder public perlu dihapus terlebih dahulu, lalu jalankan kembali php artisan storage:link
Pada tahap ini, jika tidak ada yang terlewatkan, seharusnya aplikasi Anda sudah bisa menyimpan laporan Pengaduan ke database, serta mengupload file ke public\storage\.