Hai, Sobat Jagoan! Setelah kamu mengenal Eloquent Laravel dan melakukan persiapan awal melalui artikel Mengenal Eloquent Database pada Laravel, sekarang waktunya kamu menguji pemahaman kamu tentang Eloquent dengan membuat aplikasi sederhana CRUD data pengumuman. Ini lanjutan dari seri CRUD menggunakan Query Builder, tapi sekarang pakai Eloquent.
Cuss, langsung simak step-by-step CRUD Pengumuman dengan Eloquent, Sob!
Step 1: Membuat Model dan Migration
Seperti yang sudah disampaikan pada pembahasan artikel Mengenal Eloquent Database pada Laravel, kali ini akan membuat tabel melalui perintan artisan migrate di Laravel.
Pertama buat model dengan nama ‘Pengumuman’ melalui terminal.
php artisan make:model Pengumuman -m
Output:
Setelah menjalankan perintah membuat model, Laravel otomatis membuat nama tabel pengumumen. Edit database/migrations/xxxx_xx_xx_xxxxxx_create_pengumumen_table.php
public function up()
{
Schema::create('pengumumen', function (Blueprint $table) {
$table->id();
$table->string('judul');
$table->text('isi');
$table->date('tanggal');
$table->timestamps();
});
}
Catatan: Tapi, karena artikel kali ini akan membuat tabel bernama pengumuman, maka memerlukan tambahan properti $table = ‘pengumuman’; di dalam model untuk mendefinisikan nama tabel yang diinginkan. Simak caranya pada step 2.
Kemudian jalankan perintah migrasi database di terminal untuk membuat tabel pengumumen. Perintah ini akan langsung menambahkan tabel baru di dalam database db_perpustakaan.
php artisan migrate
Step 2: Mengedit Model app/Models/Pengumuman.php
Modifikasi model Pengumuman.php sesuai kebutuhan dan tambahkan properti $table = ‘pengumuman’; untuk mendefinisikan tabel yang diinginkan.
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
class Pengumuman extends Model
{
protected $table = 'pengumuman';
protected $fillable = ['judul', 'isi', 'tanggal'];
}
Step 3: Membuat Controller
Setelah membuat model dan melakukan migrasi, buat controller yang mengatur logika interaksi data, melalui terminal menggunakan perintah:
php artisan make:controller PengumumanController
Kemudian edit isi PengumumanController.php di dalam folder app/Http/Controllers/
namespace App\Http\Controllers;
use App\Models\Pengumuman;
use Illuminate\Http\Request;
class PengumumanController extends Controller
{
// MENAMPILKAN DATA PENGUMUMAN
public function index()
{
$data = Pengumuman::all();
return view('pengumuman.index', compact('data'));
}
// MENAMPILKAN FORM PENGUMUMAN
public function create()
{
return view('pengumuman.create');
}
// MENGHANDLE PROSES TAMBAH PENGUMUMAN BARU
public function store(Request $request)
{
Pengumuman::create($request->all());
return redirect('/pengumuman');
}
// MENAMPILKAN FORM EDIT PENGUMUMAN BERDASARKAN ID
public function edit($id)
{
$pengumuman = Pengumuman::findOrFail($id);
return view('pengumuman.edit', compact('pengumuman'));
}
// MENGHANDLE PROSES EDIT DATA PENGUMUMAN
public function update(Request $request, $id)
{
$pengumuman = Pengumuman::findOrFail($id);
$pengumuman->update($request->all());
return redirect('/pengumuman');
}
// MENGHAPUS DATA PENGUMUMAN BERDASARKAN ID
public function destroy($id)
{
Pengumuman::destroy($id);
return redirect('/pengumuman');
}
}
Step 4: Tambahkan Route di routes/web.php
Setelah membuat controller, atur rute untuk menampilkan pengumuman.
use App\Http\Controllers\PengumumanController;
Route::get('/pengumuman', [PengumumanController::class, 'index']);
Route::get('/pengumuman/create', [PengumumanController::class, 'create']);
Route::post('/pengumuman', [PengumumanController::class, 'store']);
Route::get('/pengumuman/{id}/edit', [PengumumanController::class, 'edit']);
Route::put('/pengumuman/{id}', [PengumumanController::class, 'update']);
Route::delete('/pengumuman/{id}', [PengumumanController::class, 'destroy']);
Step 5: Membuat View di resources/views/pengumuman
Buat dahulu folder pengumuman di dalam resources/views/ kemudian buat file dan salin satu per satu kode sesuai ketentuan di bawah ini.
- index.blade.php yang menampilkan daftar pengumuman.
<!DOCTYPE html>
<html>
<head>
<title>Daftar Pengumuman</title>
</head>
<body>
<h2>Daftar Pengumuman</h2>
<a href=”/pengumuman/create”>+ Tambah Pengumuman</a>
<br><br>
<table border=”1″ cellpadding=”8″ cellspacing=”0″>
<thead>
<tr>
<th>Judul</th>
<th>Isi</th>
<th>Tanggal</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
@foreach ($data as $p)
<tr>
<td>{{ $p->judul }}</td>
<td>{{ $p->isi }}</td>
<td>{{ $p->tanggal }}</td>
<td>
<a href=”/pengumuman/{{ $p->id }}/edit”>Edit</a> |
<form action=”/pengumuman/{{ $p->id }}” method=”POST” style=”display:inline;”>
@csrf
@method(‘DELETE’)
<button type=”submit” onclick=”return confirm(‘Yakin ingin menghapus?’)”>Hapus</button>
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
</body>
</html>
- create.blade.php bagian yang menampilkan form tambah pengumuman.
<!DOCTYPE html>
<html>
<head>
<title>Tambah Pengumuman</title>
</head>
<body>
<h2>Tambah Pengumuman</h2>
<a href=”/pengumuman”>← Kembali ke Daftar</a>
<br><br>
<form action=”/pengumuman” method=”POST”>
@csrf
<label>Judul:</label><br>
<input type=”text” name=”judul” required><br><br>
<label>Isi:</label><br>
<textarea name=”isi” rows=”4″ cols=”40″ required></textarea><br><br>
<label>Tanggal:</label><br>
<input type=”date” name=”tanggal” required><br><br>
<button type=”submit”>Simpan</button>
</form>
</body>
</html>
- edit.blade.php untuk menampilkan form edit pengumuman.
<!DOCTYPE html>
<html>
<head>
<title>Edit Pengumuman</title>
</head>
<body>
<h2>Edit Pengumuman</h2>
<a href=”/pengumuman”>← Kembali ke Daftar</a>
<br><br>
<form action=”/pengumuman/{{ $pengumuman->id }}” method=”POST”>
@csrf
@method(‘PUT’)
<label>Judul:</label><br>
<input type=”text” name=”judul” value=”{{ $pengumuman->judul }}” required><br><br>
<label>Isi:</label><br>
<textarea name=”isi” rows=”4″ cols=”40″ required>{{ $pengumuman->isi }}</textarea><br><br>
<label>Tanggal:</label><br>
<input type=”date” name=”tanggal” value=”{{ $pengumuman->tanggal }}” required><br><br>
<button type=”submit”>Update</button>
</form>
</body>
</html>
Step 6: Jalankan Aplikasi
Buka terminal lalu jalankan aplikasi menggunakan perintah:
php artisan serve
Akses http://127.0.0.1:8000/pengumuman di browser kamu.
Coba tambah pengumuman baru, edit, dan hapus data pengumuman untuk menguji aplikasi sudah berjalan dengan baik.
Troubleshooting
Kalau kamu menemukan error: SQLSTATE[42S02]: Base table or view not found: 1146 Table ‘db_kb_perpustakaan.pengumuman’ doesn’t exist
Ini masih karena migrasi database yang otomatis merename tabel pengumuman yang ingin dibuat diawal menjadi pengumumen. Buka tabel migrasi pada database/migrations/xxxx_xx_xx_xxxxxx_create_pengumumen_table.php. Kemudian ubah migration di bagian:
Schema::create('pengumumen', function (Blueprint $table) {
menjadi:
Schema::create('pengumuman', function (Blueprint $table) {
Lalu, jalankan ulang migrasi:
php artisan migrate:rollback
php artisan migrate
ATAU jika tidak mau rollback semua, hapus tabel pengumumen langsung dari database, lalu jalankan ulang migration setelah kamu ubah nama tabelnya.
Selamat mencoba, Sob! Dengan mempraktikkan dan memahami langkah-langkah membuat CRUD menggunakan Eloquent Laravel pada artikel ini, kamu kini punya bekal untuk membangun dan mengelola aplikasi yang lebih terstruktur, efisien, dan mudah dikembangkan ke depannya.
Kalau ada yang masih bingung, silahkan hubungi Tim Support Jagoan Hosting, Sob!
Simak terus tips-tips seputar domain dan hosting dari Jagoan Hosting di laman Pusat Tutorial Hosting & Domain.