Tutorial ini akan memandu Anda langkah demi langkah dalam menampilkan data dari database menggunakan framework Laravel. Ini adalah bagian penting dari operasi Read dalam konsep CRUD (Create, Read, Update, Delete).
Langkah 1: Konfigurasi Database
Pastikan aplikasi Laravel Anda telah terhubung dengan database. Anda dapat memeriksa dan mengkonfigurasi detail koneksi database pada file .env di root direktori proyek Anda.
Pastikan variabel-variabel berikut sesuai dengan konfigurasi database MySQL Anda:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=nama_database_anda
DB_USERNAME=nama_pengguna_database_anda
DB_PASSWORD=kata_sandi_database_anda
Setelah mengubah file .env, pastikan untuk menjalankan perintah konfigurasi cache agar perubahan diterapkan:
php artisan config:cache
Langkah 2: Membuat Model (Jika Belum Ada)
Model merepresentasikan tabel dalam database Anda dan menyediakan cara untuk berinteraksi dengan data tersebut. Jika Anda belum memiliki model yang sesuai dengan tabel yang ingin Anda tampilkan datanya, Anda bisa membuatnya menggunakan Artisan CLI.
Misalnya, jika Anda ingin menampilkan data dari tabel products, jalankan perintah berikut:
php artisan make:model Product -m
Perintah -m akan sekaligus membuat file migrasi untuk tabel products jika Anda belum membuatnya. Jika tabel sudah ada, Anda hanya memerlukan modelnya.
Buka file model app/Models/Product.php dan pastikan kode di dalamnya sesuai. Biasanya, Laravel secara otomatis mengaitkan model dengan nama tabel yang sesuai (bentuk snake case dan plural dari nama model).
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Product extends Model
{
use HasFactory;
// Jika nama tabel Anda berbeda dari konvensi Laravel, definisikan di sini:
// protected $table = 'nama_tabel_anda';
// Jika primary key Anda bukan 'id', definisikan di sini:
// protected $primaryKey = 'kolom_primary_key_anda';
}
Langkah 3: Membuat Controller
Controller bertugas untuk menerima permintaan dari pengguna, berinteraksi dengan model untuk mengambil data, dan meneruskan data tersebut ke view untuk ditampilkan.
Gunakan Artisan CLI untuk membuat controller:
php artisan make:controller ProductController --resource
Opsi --resource akan membuat controller dengan metode-metode standar untuk operasi CRUD, termasuk metode index yang akan kita gunakan untuk menampilkan data.
Buka file controller app/Http/Controllers/ProductController.php.
Langkah 4: Mengambil Data di Controller
Di dalam controller ProductController, pada metode index, kita akan menggunakan model Product untuk mengambil semua data dari tabel products.
<?php
namespace App\Http\Controllers;
use App\Models\Product;
use Illuminate\Http\Request;
class ProductController extends Controller
{
/**
* Display a listing of the resource.
*/
public function index()
{
$products = Product::all(); // Mengambil semua data dari tabel products
return view('products.index', compact('products'));
}
// ... metode resource lainnya ...
}
Pada kode di atas:
use App\Models\Product;: Kita mengimpor modelProductagar dapat digunakan di dalam controller.$products = Product::all();: Ini adalah cara Eloquent ORM (Object Relational Mapper) Laravel untuk mengambil semua baris dari tabelproducts. Metodeall()mengembalikan sebuah Collection yang berisi semua objekProduct.return view('products.index', compact('products'));: Kita mengembalikan sebuah view bernamaindexyang berada di dalam direktoriproducts. Fungsicompact('products')membuat variabel$productstersedia di dalam view.
Langkah 5: Membuat View untuk Menampilkan Data
Buat sebuah direktori bernama products di dalam folder resources/views. Di dalam direktori products, buat sebuah file bernama index.blade.php.
File resources/views/products/index.blade.php akan berisi kode HTML dan Blade (template engine Laravel) untuk menampilkan data produk.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Daftar Produk</title>
</head>
<body>
<h1>Daftar Produk</h1>
@if(count($products) > 0)
<table>
<thead>
<tr>
<th>ID</th>
<th>Nama</th>
<th>Deskripsi</th>
<th>Aksi</th>
</tr>
</thead>
<tbody>
@foreach($products as $product)
<tr>
<td>{{ $product->id }}</td>
<td>{{ $product->name }}</td>
<td>{{ $product->description }}</td>
<td>
<a href="#">Lihat Detail</a>
</td>
</tr>
@endforeach
</tbody>
</table>
@else
<p>Tidak ada produk yang tersedia.</p>
@endif
</body>
</html>
Pada kode di atas:
@if(count($products) > 0): Kita memeriksa apakah ada data produk yang diterima dari controller.<table>...</table>: Jika ada data, kita menampilkan dalam bentuk tabel HTML.@foreach($products as $product): Loop Blade untuk mengiterasi setiap objek$productdalam Collection$products.{{ $product->id }},{{ $product->name }},{{ $product->description }}: Sintaks Blade untuk menampilkan nilai dari properti objek$product.@else ... @endif: Jika tidak ada data produk, kita menampilkan pesan pemberitahuan.
Langkah 6: Membuat Route
Terakhir, kita perlu mendefinisikan route yang akan menghubungkan URL dengan metode index pada ProductController.
Buka file routes/web.php dan tambahkan route berikut:
use App\Http\Controllers\ProductController;
use Illuminate\Support\Facades\Route;
// ... route lainnya ...
Route::get('/products', [ProductController::class, 'index'])->name('products.index');
Pada kode di atas:
Route::get('/products', [ProductController::class, 'index'])->name('products.index');: Kita mendefinisikan route GET dengan URL/productsyang akan dieksekusi oleh metodeindexpada classProductController. Kita juga memberikan nama routeproducts.indexyang dapat digunakan untuk membuat URL secara dinamis.
Mengakses Halaman
Sekarang, Anda dapat mengakses URL http://localhost:8000/products (sesuaikan dengan port aplikasi Laravel Anda) di browser Anda. Anda akan melihat daftar produk yang diambil dari database dan ditampilkan dalam format tabel. Jika tidak ada data di tabel products, Anda akan melihat pesan “Tidak ada produk yang tersedia.”
Selamat! Anda telah berhasil menampilkan data dari database menggunakan Laravel. Pada tutorial selanjutnya, kita akan membahas operasi CRUD lainnya seperti membuat, mengupdate, dan menghapus data.
