Tutorial: Membuat Tampilan (View) untuk CRUD di Laravel
Posted on 14 August 2024
Pada tutorial kali ini, kita akan mempelajari bagaimana cara membuat tampilan untuk mengelola data Mata Kuliah di aplikasi Laravel. Tampilan ini mencakup berbagai fungsi seperti menampilkan, menambah, mengedit, dan menghapus data Mata Kuliah. Kita akan membuat beberapa halaman yang mudah dipahami, sehingga pengguna dapat dengan mudah mengelola data Mata Kuliah di dalam aplikasi.
Pendahuluan
Dalam pengembangan aplikasi manajemen akademik, tampilan yang intuitif dan mudah digunakan sangat penting. Di Laravel, kita dapat menggunakan Blade templating engine untuk membuat tampilan yang responsif dan interaktif. Mari kita mulai dengan membuat beberapa halaman utama untuk manajemen Mata Kuliah.
1. Membuat Tampilan Daftar Mata Kuliah (Index View)
Halaman pertama yang akan kita buat adalah halaman daftar Mata Kuliah. Halaman ini akan menampilkan semua data Mata Kuliah yang telah ditambahkan ke dalam sistem, serta menyediakan opsi untuk menambah, mengedit, atau menghapus data Mata Kuliah.
Langkah-langkah:
resources/views/matakuliah dengan nama index.blade.php.@extends('layouts.app')
@section('content')
<div class="container">
<h1>Daftar Mata Kuliah</h1>
<a href="{{ route('matakuliah.create') }}" class="btn btn-primary mb-3">Tambah Mata Kuliah</a>
@if ($message = Session::get('success'))
<div class="alert alert-success">
{{ $message }}
</div>
@endif
<table class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Kode Mata Kuliah</th>
<th>Nama Mata Kuliah</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
@foreach ($matakuliah as $mk)
<tr>
<td>{{ $loop->iteration }}</td>
<td>{{ $mk->CodeMataKuliah }}</td>
<td>{{ $mk->NamaMataKuliah }}</td>
<td>
<a href="{{ route('matakuliah.edit', $mk->id) }}" class="btn btn-warning">Edit</a>
<form action="{{ route('matakuliah.destroy', $mk->id) }}" method="POST" style="display:inline;">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger" onclick="return confirm('Yakin ingin menghapus?')">Hapus</button>
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
{{ $matakuliah->links() }}
</div>
@endsectionPenjelasan:
2. Membuat Tampilan Tambah Mata Kuliah (Create View)
Halaman berikutnya yang akan kita buat adalah halaman untuk menambah data Mata Kuliah. Halaman ini menyediakan formulir yang harus diisi oleh pengguna untuk menambahkan Mata Kuliah baru ke dalam sistem.
Langkah-langkah:
resources/views/matakuliah dengan nama create.blade.php.
@extends('layouts.app')
@section('content')
<div class="container">
<h1>Tambah Mata Kuliah</h1>
<form action="{{ route('matakuliah.store') }}" method="POST">
@csrf
<div class="form-group">
<label for="CodeMataKuliah">Kode Mata Kuliah</label>
<input type="text" class="form-control" name="CodeMataKuliah" value="{{ $newCode }}" readonly>
</div>
<div class="form-group">
<label for="NamaMataKuliah">Nama Mata Kuliah</label>
<input type="text" class="form-control" name="NamaMataKuliah" required>
</div>
<button type="submit" class="btn btn-success">Simpan</button>
<a href="{{ route('matakuliah.index') }}" class="btn btn-secondary">Kembali</a>
</form>
</div>
@endsection
Penjelasan:
3. Membuat Tampilan Edit Mata Kuliah (Edit View)
Selanjutnya, kita akan membuat halaman untuk mengedit data Mata Kuliah yang sudah ada. Halaman ini memungkinkan pengguna untuk memperbarui informasi yang sudah tersimpan.
Langkah-langkah:
resources/views/matakuliah dengan nama edit.blade.php.@extends('layouts.app')
@section('content')
<div class="container">
<h1>Edit Mata Kuliah</h1>
<form action="{{ route('matakuliah.update', $matakuliah->id) }}" method="POST">
@csrf
@method('PUT')
<div class="form-group">
<label for="CodeMataKuliah">Kode Mata Kuliah</label>
<input type="text" class="form-control" name="CodeMataKuliah" value="{{ $matakuliah->CodeMataKuliah }}" readonly>
</div>
<div class="form-group">
<label for="NamaMataKuliah">Nama Mata Kuliah</label>
<input type="text" class="form-control" name="NamaMataKuliah" value="{{ $matakuliah->NamaMataKuliah }}" required>
</div>
<button type="submit" class="btn btn-success">Update</button>
<a href="{{ route('matakuliah.index') }}" class="btn btn-secondary">Kembali</a>
</form>
</div>
@endsection
Penjelasan:
4. Membuat Tampilan Data Terhapus (Trash View)
Laravel mendukung fitur soft delete, di mana data yang dihapus tidak dihapus secara permanen dari database. Kita akan membuat halaman khusus untuk melihat dan memulihkan data Mata Kuliah yang telah dihapus sementara.
Langkah-langkah:
resources/views/matakuliah dengan nama trash.blade.php.@extends('layouts.app')
@section('content')
<div class="container">
<h1>Trash Mata Kuliah</h1>
<a href="{{ route('matakuliah.index') }}" class="btn btn-primary mb-3">Kembali ke Daftar Mata Kuliah</a>
@if ($message = Session::get('success'))
<div class="alert alert-success">
{{ $message }}
</div>
@endif
<table class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Kode Mata Kuliah</th>
<th>Nama Mata Kuliah</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
@foreach ($matakuliah as $mk)
<tr>
<td>{{ $loop->iteration }}</td>
<td>{{ $mk->CodeMataKuliah }}</td>
<td>{{ $mk->NamaMataKuliah }}</td>
<td>
<form action="{{ route('matakuliah.restore', $mk->id) }}" method="POST" style="display:inline;">
@csrf
<button type="submit" class="btn btn-success">Restore</button>
</form>
<form action="{{ route('matakuliah.forceDelete', $mk->id) }}" method="POST" style="display:inline;">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger" onclick="return confirm('Yakin ingin menghapus permanen?')">Hapus Permanen</button>
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
@endsection
Penjelasan:
- Tabel Data Terhapus: Tabel ini menampilkan data Mata Kuliah yang telah dihapus sementara.
- Tombol Restore: Mengembalikan data Mata Kuliah yang telah dihapus sementara.
- Tombol Hapus Permanen: Menghapus data Mata Kuliah secara permanen dari database.
Kesimpulan
Dengan menyelesaikan tutorial ini, Anda telah berhasil membuat tampilan untuk mengelola data Mata Kuliah di aplikasi Laravel Anda. Tampilan ini mencakup fungsi untuk menampilkan daftar Mata Kuliah, menambah, mengedit, dan menghapus data Mata Kuliah, serta melihat data yang telah dihapus sementara. Anda dapat menyesuaikan tampilan ini sesuai kebutuhan aplikasi Anda untuk meningkatkan pengalaman pengguna.
Teruslah eksplorasi fitur-fitur Laravel lainnya dan kembangkan aplikasi Anda menjadi lebih baik!
Disarankan Untuk Anda: