MODUL MEMBUAT PROGRAM DENGAN LARAVEL 10 Part 3 – MENAMPILKAN DATA DARI DATABASE
Pada modul ini adalah menampilkan data dari database ke laravel. Dan untuk menampilkannya/user interface yang kita pakai adalah Bootstrap, sehingga tampilannya bisa lebih bagus dan cepat dibandingkan kita harus buat dari awal.
1. Membuat Controller Berita, caranya adalah ketikan di terminal/CMD perintah berikut ini
php artisan make:controller BeritaController , Jika berhasil maka akan seperti berikut ini
2. Pada file BeritaController.php di baris ke 4, tambahkan kode berikut ini
use App\Models\Berita;
use Illuminate\View\View;
3. Pada file BeritaController.php di baris ke 9, tambahkan kode berikut ini
public function index(): View
{
//get beritas
$beritas = Berita::latest()->paginate(5);
//render view with beritas
return view('beritas.index', compact('beritas'));
}
4. Sehingga kode lengkapnya di BeritaController.php adalah seperti berikut ini
Ganti semua kodenya berikut ini
use Illuminate\Support\Facades\Route;
//route resource
Route::resource('/beritas', \App\Http\Controllers\BeritaController::class);
6. Untuk memastikan apakah route berhasil dibuat atau tidak, kita cek dengan cara jalankan perintah berikut ini di terminal/CMD
php artisan route:list
7. ika sudah membuat route, langkah selanjutnya Adalah membuat View, dengan cara membuat folder baru di folder resources/views dengan diberi nama beritas
8.Di folder beritas Buat file baru dengan nama index.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<title>Data Beritas - RPL</title>
<link rel="stylesheet" href="http://localhost/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="http://localhost/bootstrap/toastr.min.css">
</head>
<body style="background:
lightgray">
<div class="container mt-5">
<div class="row">
<div class="col-md-12">
<div>
<h3 class="text-center my-4">Tutorial Laravel 10
untuk RPL</h3>
<h5 class="text-center"><a href="">RPL - Saypro</a></h5>
<hr>
</div>
<div class="card border-0
shadow-sm rounded">
<div class="card-body">
<a href="{{ route('beritas.create') }}" class="btn btn-md
btn-success mb-3">TAMBAH BERITA</a>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">GAMBAR</th>
<th scope="col">JUDUL</th>
<th scope="col">ISI</th>
<th scope="col">AKSI</th>
</tr>
</thead>
<tbody>
@forelse ($beritas as
$berita)
<tr>
<td class="text-center">
<img src="{{ asset('/storage/beritas/'.$berita->gambar)
}}" class="rounded" style="width: 150px">
</td>
<td>{{
$berita->judul }}</td>
<td>{!! $berita->isi
!!}</td>
<td class="text-center">
<form onsubmit="return confirm('Apakah Anda Yakin ?');" action="{{ route('beritas.destroy',
$berita->id) }}" method="POST">
<a href="{{ route('beritas.show', $berita->id)
}}" class="btn btn-sm btn-dark">SHOW</a>
<a href="{{ route('beritas.edit', $berita->id)
}}" class="btn btn-sm btn-primary">EDIT</a>
@csrf
@method('DELETE')
<button type="submit" class="btn btn-sm btn-danger">HAPUS</button>
</form>
</td>
</tr>
@empty
<div class="alert
alert-danger">
Data berita belum Tersedia.
</div>
@endforelse
</tbody>
</table>
{{ $beritas->links() }}
</div>
</div>
</div>
</div>
</div>
<script src="http://localhost/bootstrap/jquery.min.js"></script>
<script src="http://localhost/bootstrap/bootstrap.min.js"></script>
<script src="http://localhost/bootstrap/toastr.min.js"></script>
<script>
//message with toastr
@if(session()->has('success'))
toastr.success('{{ session('success') }}', 'BERHASIL!');
@elseif(session()->has('error'))
toastr.error('{{ session('error') }}', 'GAGAL!');
@endif
</script>
</body>
</html>
10.Setelah membuat file index.blade.php, selanjutnya adalah uji coba menjalankan hasilnya dengan cara meng akses http://localhost:8000/beritas , dengan hasilnya seperti berikut ini
About AFRI MUBAROK
