Hello everyone here, we hope this Laravel tutorial will help you when displaying record data in Laravel. Di Laravel mengetahui cara menampilkan data dari database ke view blade dengan teknik looping dari variabel yang dikirim adalah salah satu keterampilan dasar yang wajib dikuasai oleh setiap developer yang menggunakan framework ini. Laravel dirancang dengan pola arsitektur MVC (Model-View-Controller), sehingga alur pengambilan dan penampilan data menjadi terstruktur dan mudah dipahami. Proses ini melibatkan beberapa komponen utama seperti model, controller, route, dan view (Blade).
Dalam tutorial kali ini, kita akan membahas secara lengkap langkah demi langkah bagaimana mengambil data dari database dan menampilkannya ke dalam view blade menggunakan Laravel 12.
Langkah pertama yang harus dilakukan adalah memastikan bahwa konfigurasi database sudah benar. Laravel menggunakan file .env untuk menyimpan pengaturan koneksi database seperti DB_DATABASE, DB_USERNAME, DB_PASSWORD, dan DB_HOST. Setelah konfigurasi selesai, pastikan juga bahwa database sudah dibuat dan dapat diakses oleh aplikasi Laravel. Untuk membaca tutorial sebelumnya terkait konfigurasi setting database bisa Anda klik disini.
Selanjutnya, kita perlu membuat migration untuk membuat tabel di database. Migration adalah cara Laravel untuk mengelola struktur database menggunakan kode. Kita bisa membuat migration dengan perintah php artisan make:migration create_pegawai_table. Setelah file migration dibuat, kita dapat mendefinisikan kolom-kolom tabel di dalamnya, seperti title, content, dan created_at. Setelah itu, jalankan perintah php artisan migrate untuk mengeksekusi migration tersebut dan membuat tabel di database.
Sebagai contoh disini saya membuat file migration terkait terkai data pegawai :
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('pegawais', function (Blueprint $table) {
$table->id();
$table->string('nama');
$table->string('email',250)->unique();
$table->string('pekerjaan');
$table->string('alamat');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('pegawais');
}
};
Setelah tabel siap, langkah berikutnya adalah membuat model. Model adalah representasi dari tabel database di dalam kode Laravel. Kita bisa membuat model dengan perintah php artisan make:model Pegawai. Model ini nantinya akan digunakan untuk berinteraksi dengan tabel pegawais. Secara default, Laravel akan menganggap bahwa nama tabel adalah bentuk jamak dari nama model, sehingga model Pegawai akan terhubung dengan tabel Pegawais.
Berikut adalah contoh penggunaan model :
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\Factories\HasFactory;
class Pegawai extends Model
{
use HasFactory;
protected $fillable = [
'nama',
'email',
'pekerjaan',
'alamat',
];
}
Apabila Anda belum memahami tentang bagaimana membuat migration dan model di Laravel 12, sebaiknya Anda membaca terlebih dahulu tutorial sebelumnya terkait bagaimana bekerja dengan Model dan Migration di Laravel 12.
Untuk mengisi data ke dalam tabel suatu database Laravel, kita bisa menggunakan seeder dan factory untuk menghasilkan data dummy, atau memasukkan data secara manual melalui database. Namun, untuk keperluan tutorial ini, kita asumsikan bahwa tabel sudah memiliki beberapa data yang siap ditampilkan. Apabila belum memiliki data di dabatase, Anda bisa membaca tutorial sebelumnya yang membahas mengenai cara menggunakan seeder dan factory di Laravel 12.
Pada tahap ini saya membuat seeder yang terkait dengan factory pegawai, dengan tujuan ketika saya jalankan nantinya akan menggenerate data dummy untuk menampilkan data pada pembahasan tutorial ini.
php artisan make:seeder PegawaiSeeder
<?php
namespace Database\Seeders;
use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
use App\Models\Pegawai; //tambahkan model pegawai
class PegawaiSeeder extends Seeder
{
/**
* Run the database seeds.
*/
public function run(): void
{
Pegawai::factory()->count(10)->create(); // optional pakai factory
}
}
Lalu jalankan perintah artisan berikut untuk menghasilkan data dummy.
php artisan db:seed –class=PegawaiSeeder
Apabila berjalan dengan baik maka akan kita temukan data dummy pada tabel pegawai seperti contoh berikut.
Langkah selanjutnya adalah membuat controller. Controller berfungsi sebagai penghubung antara model dan view. Kita dapat membuat controller dengan perintah php artisan make:controller PegawaiController. Di dalam controller ini, kita akan membuat method yang bertugas mengambil data dari database dan mengirimkannya ke view.
Sebagai contoh, kita buat method index() di dalam PegawaiController. Di dalam method ini, kita bisa mengambil semua data dari tabel menggunakan Eloquent ORM dengan kode seperti $pegawais = Pegawai::all();. Setelah data diambil, kita kembalikan ke view dengan menggunakan return view(‘pegawais.index’, compact(‘pegawais’));. Fungsi compact() digunakan untuk mengirim variabel $pegawais ke view.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Pegawai; // tambahkan model
class PegawaiController extends Controller
{
/**
* Display a listing of the resource.
*/
public function index()
{
$pegawai = Pegawai::all(); // ambil semua data pegawai
return view('pegawais.index', compact('pegawais')); //kirim data pegawai ke view blade dengan variabel $pegawais
}
/**
* Show the form for creating a new resource.
*/
public function create()
{
//
}
/**
* Store a newly created resource in storage.
*/
public function store(Request $request)
{
//
}
/**
* Display the specified resource.
*/
public function show(string $id)
{
//
}
/**
* Show the form for editing the specified resource.
*/
public function edit(string $id)
{
//
}
/**
* Update the specified resource in storage.
*/
public function update(Request $request, string $id)
{
//
}
/**
* Remove the specified resource from storage.
*/
public function destroy(string $id)
{
//
}
}
Setelah controller selesai, kita perlu mendefinisikan route agar URL tertentu dapat mengakses method di controller tersebut. Route biasanya didefinisikan di file routes/web.php. Kita bisa menambahkan route seperti Route::get(‘/pegawais’, [PegawaiController::class, ‘index’]);. Dengan demikian, ketika pengguna mengakses URL /pegawais, Laravel akan menjalankan method index() dan menampilkan data.
Dan juga kita bisa menggunakan route group seperti contoh berikut ini :
<?php
use App\Http\Controllers\ProfileController;
use App\Http\Controllers\PegawaiController;
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
return view('welcome');
});
Route::get('/dashboard', function () {
return view('dashboard');
})->middleware(['auth', 'verified'])->name('dashboard');
Route::middleware('auth')->group(function () {
Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');
Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');
Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');
});
//route pegawais
Route::middleware('auth')->group(function () {
Route::get('/pegawais', [PegawaiController::class, 'index'])
->name('pegawais.index');
});
require __DIR__.'/auth.php';
Langkah berikutnya adalah membuat view menggunakan Blade template engine. Kita bisa membuat file resources/views/pegawais/index.blade.php. Di dalam file ini, kita dapat menampilkan data yang telah dikirim dari controller. Untuk menampilkan data, kita bisa menggunakan directive Blade seperti @foreach.
Sebagai contoh, kita dapat menuliskan kode berikut di view blade:
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
{{ __('Data Pegawai') }}
</h2>
</x-slot>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white light:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
<div class="overflow-x-auto">
<table class="min-w-full border border-gray-200 rounded-lg overflow-hidden">
<thead class="bg-gray-200 text-gray-700">
<tr>
<th class="px-4 py-2 text-left">Nama</th>
<th class="px-4 py-2 text-left">Email</th>
<th class="px-4 py-2 text-left">Pekerjaan</th>
<th class="px-4 py-2 text-left">Alamat</th>
</tr>
</thead>
<tbody class="text-gray-600">
@forelse ($pegawais as $p)
<tr class="border-t hover:bg-gray-50">
<td class="px-4 py-2">{{ $p->nama }}</td>
<td class="px-4 py-2">{{ $p->email }}</td>
<td class="px-4 py-2">{{ $p->pekerjaan }}</td>
<td class="px-4 py-2">{{ $p->alamat }}</td>
</tr>
@empty
<tr>
<td colspan="4" class="text-center px-4 py-4 text-gray-500">
Data pegawai tidak tersedia
</td>
</tr>
@endforelse
</tbody>
</table>
</div>
</div>
</div>
</div>
</x-app-layout>
Kode di atas akan melakukan looping terhadap semua data $pegawais dan menampilkannya satu per satu. Sintaks {{ }} digunakan untuk menampilkan data dengan aman karena Laravel secara otomatis melakukan escaping untuk mencegah serangan XSS.
Selain menggunakan @foreach, Laravel juga menyediakan directive @forelse yang berguna ketika kita ingin menangani kondisi jika data kosong. Dengan @forelse, kita bisa menampilkan pesan jika tidak ada data yang tersedia.
Apabila berjalan dengan baik, maka kita akan menemukan record data pegawai pada view blade Laravel 12.
Dalam praktik yang lebih kompleks, kita sering membutuhkan pagination untuk membatasi jumlah data yang ditampilkan. Laravel menyediakan fitur pagination yang sangat mudah digunakan. Kita hanya perlu mengganti Pegawai::all() menjadi Pegawai::paginate(10). Kemudian, di view, kita dapat menambahkan {{ $pegawais->links() }} untuk menampilkan navigasi halaman.
Hal penting lainnya adalah memahami bagaimana data dikirim dari controller ke view. Selain menggunakan compact(), kita juga bisa menggunakan array asosiatif seperti return view(‘pegawais.index’, [‘pegawais’ => $pegawais]);. Keduanya memiliki fungsi yang sama, hanya berbeda gaya penulisan.
Kesimpulannya, menampilkan data dari database di Laravel 12 melibatkan beberapa langkah penting yaitu konfigurasi database, pembuatan migration, pembuatan model, pengambilan data menggunakan Eloquent, pembuatan controller, pengaturan route, dan pembuatan view menggunakan Blade. Dengan memahami setiap langkah ini secara menyeluruh, Anda dapat membangun aplikasi Laravel yang rapi, efisien, dan mudah dikembangkan di masa depan.
