Menampilkan Data pada View Di Laravel Splade

Menampilkan Data pada View Di Laravel Splade 

Halo Dev, Kembali lagi Kita akan membahas tentang Laravel splade. setelah beberapa waktu lalu kita sudah membahas tentang langkah - langkah tutorial untuk program laravel splade, untuk pembahasan kali ini mari kita lanjutkan langkahnya dengan Tutorial : Menampilkan Data pada View Di Laravel Splade. Mari simak Langkahnya ! 

 

Pendahuluan

Laravel Splade adalah sebuah paket yang memudahkan Anda untuk membuat aplikasi web yang responsif dan elegan menggunakan Laravel. Laravel Splade menyediakan berbagai komponen yang dapat Anda gunakan untuk membuat antarmuka pengguna yang menarik, seperti table, modal, alert, form, dan lainnya. Selain itu, Laravel Splade juga mendukung fitur-fitur canggih seperti pagination, sorting, filtering, dan searching pada table.

Pada artikel ini, kita akan belajar bagaimana menampilkan data dari database pada view menggunakan komponen table yang disediakan oleh Splade. Kita akan membuat sebuah aplikasi web yang menampilkan daftar postingan blog dari database. Kita akan menggunakan Laravel sebagai framework, Splade sebagai paket, dan MySQL sebagai database.

Untuk mengikuti tutorial ini, Anda perlu memiliki beberapa persyaratan dan asumsi sebagai berikut:

• Anda sudah menginstal Laravel versi 8 atau lebih baru di komputer Anda.
• Anda sudah menginstal Splade versi 1.0 atau lebih baru di proyek Laravel Anda.
• Anda sudah memiliki database MySQL yang berisi tabel posts dengan kolom id, title, content, dan image.
• Anda sudah familiar dengan konsep-konsep dasar Laravel seperti model, controller, route, dan view.

Tutorial Lainya : Install Laravel Splade

Tahap 1 :Membuat Controller Post:

Dalam pengembangan aplikasi Laravel, langkah pertama yang penting adalah pembuatan Controller Post. Sebagai bagian integral dari arsitektur MVC (Model-View-Controller), Controller Post memiliki peran sentral dalam mengelola operasi terkait entitas Post pada aplikasi. Dalam tulisan ini, kita akan membahas langkah-langkah rinci dari pembuatan controller hingga implementasi pengambilan data dengan menggunakan SpladeTable.

Tips Lainya : Membuat whatsapp Dengan Laravel

Tujuan dan Fungsi Controller Post

Controller Post memiliki tujuan utama untuk mengendalikan logika aplikasi terkait entitas Post. Ini mencakup tugas seperti menampilkan daftar post, menambahkan post baru, mengedit post yang ada, dan menghapus post. Fungsi utamanya adalah bertindak sebagai perantara antara model (data) dan tampilan, menjaga prinsip pemisahan konsep (separation of concerns) dalam pengembangan perangkat lunak.

Cara Membuat Controller Post dengan Artisan

Langkah awal dalam membuat Controller Post adalah dengan menggunakan perintah artisan. Artisan adalah utilitas baris perintah bawaan Laravel yang memudahkan proses pengembangan. Jalankan perintah berikut pada terminal:

```bash
php artisan make:controller PostController
```

Perintah ini secara otomatis akan membuat file baru di direktori `app/Http/Controllers` dengan nama `PostController.php`, yang nantinya akan kita isi dengan logika terkait entitas Post.

Kode di Dalam Controller Post

Dalam file `PostController.php`, kita akan menemukan beberapa kode yang sangat penting. Pertama-tama, kita perlu mengimport model `Post` agar controller dapat berinteraksi dengan entitas tersebut. Penggunaan `use` statement mempermudah referensi ke model yang diperlukan:

```php
use App\Models\Post;
use Illuminate\Support\Facades\View;
use SpladeTable;
```

Selanjutnya, kita akan menemui method `index` yang berfungsi untuk menampilkan daftar post. Dalam method ini, pengambilan data dari model Post dilakukan dengan mudah menggunakan eloquent query:

```php
$posts = Post::all();
```

Kemudian, data yang telah diambil dikirimkan ke tampilan menggunakan SpladeTable:

```php
return View::make('posts.index')->with('posts', $posts);
```

Dengan demikian, kita telah membahas langkah-langkah membuat controller Post, dari tujuan dan fungsi hingga implementasi pengambilan data menggunakan SpladeTable. Pendekatan ini membantu menjaga struktur dan keterbacaan kode, memudahkan pengembang untuk memahami dan mengelola logika aplikasi dengan lebih efisien.

Tahap 2: Membuat Route Posts

Dalam pengembangan aplikasi Laravel, langkah kedua yang tak kalah pentingnya adalah pembuatan route Posts. Route ini tidak hanya bertindak sebagai jembatan antara URL yang diminta pengguna dan controller Post, tetapi juga memainkan peran vital dalam memandu alur kerja aplikasi secara menyeluruh.

Tujuan dan Fungsi Route Posts

Route Posts memiliki tujuan utama untuk mengarahkan permintaan pengguna terkait entitas Post ke fungsi yang sesuai dalam controller Post. Fungsinya tidak hanya terbatas pada mengatur navigasi URL, melainkan juga memastikan bahwa setiap aksi terkait post terkait dengan logika aplikasi yang benar. Dengan kata lain, route ini membentuk fondasi navigasi dalam aplikasi Laravel.

Cara Membuat Route Posts dengan File web.php

Langkah pertama dalam membuat route Posts adalah dengan mengedit file `web.php`, yang bertindak sebagai peta rute utama aplikasi. Tambahan berikut ini akan menetapkan route untuk menangani permintaan HTTP GET pada URL `/posts` dan mengarahkannya ke method `index` dalam controller Post:

```php
use App\Http\Controllers\PostController;
Route::get('/posts', [PostController::class, 'index'])->name('posts.index');
```

Dalam kode di atas, kita memanfaatkan metode `get` yang digunakan untuk menangani permintaan HTTP GET. URL `/posts` menjadi pintu masuk ke route ini. Penting untuk memberikan nama pada route menggunakan `name('posts.index')` agar mempermudah referensi ke route tersebut dalam kode lain.

Cara Menghubungkan Route Posts dengan Controller Post

Hubungan antara route Posts dan controller Post terjadi melalui array sebagai parameter kedua dalam fungsi `Route::get`. Dengan menyertakan kelas `PostController::class` dan method `'index'`, kita secara eksplisit menyatakan bahwa saat URL `/posts` diakses, kontrol akan diserahkan ke method `index` dalam controller Post.

Lebih Mendalam dalam Alur Kerja

Selama alur kerja, ketika pengguna mengakses URL `/posts`, route ini memastikan bahwa permintaan tersebut diarahkan dengan benar ke controller Post. Selanjutnya, method `index` dalam controller Post menangani logika terkait entitas Post, seperti pengambilan data dan persiapan untuk ditampilkan.

Dengan langkah ini, kita merancang alur kerja yang kohesif dalam pengembangan aplikasi Laravel. Setiap permintaan terkait entitas Post melewati route ini, memastikan bahwa aplikasi beroperasi dengan efisien dan terstruktur. Pembagian tugas antara controller, route, dan tampilan membentuk fondasi yang kokoh untuk pengembangan yang terorganisir dan mudah dipelajari.

Langkah 3 - Membuat View Posts:

Dalam evolusi pembangunan aplikasi Laravel, langkah ketiga yang tak kalah signifikan adalah pembuatan view Posts. View ini bukan hanya sebagai bagian tampilan statis; melainkan sebagai jendela dinamis yang tidak hanya menyajikan data entitas Post dengan efisien tetapi juga menciptakan pengalaman visual yang menarik dan intuitif.*

Tujuan dan Fungsi View Posts

View Posts memiliki tujuan utama untuk menyajikan data entitas Post kepada pengguna dengan cara yang menarik dan informatif. Ini bukan sekadar tampilan statis; view ini berfungsi sebagai elemen penghubung antara logika yang diatur dalam controller Post dan antarmuka pengguna yang akan diterima dan diapresiasi oleh pengguna.

Cara Membuat View Posts dengan File index.blade.php

Langkah awal dalam menciptakan view Posts adalah membuat file `index.blade.php` dalam direktori `resources/views/posts`. File ini akan menjadi wadah struktur HTML dan Blade Laravel untuk mengelola dan menampilkan data dengan efisien. Contoh struktur dasar dapat kita bentuk sebagai fondasi yang akan dikembangkan:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Posts</title>
    <!-- Import SpladeTable CSS -->
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/splade-table.css">
</head>
<body>
    <h1>List of Posts</h1>
    <!-- Content will be added here -->
    <!-- Import SpladeTable JavaScript -->
    <script src="https://unpkg.com/[email protected]/dist/splade-table.js"></script>
</body>
</html>
```

Cara Mengimport Komponen SpladeTable dan Menampilkan Data dari Controller Post

Selanjutnya, di bagian tampilan data, kita memanfaatkan Blade directives untuk mengakses dan menampilkan data yang dikirimkan dari controller Post. Dengan menggunakan komponen SpladeTable, kita dapat membuat tampilan tabel yang efisien dan responsif:

```html
<!-- ... -->
<body>
    <h1>List of Posts</h1>
    <!-- Display Posts using SpladeTable -->
    <x-splade-table :data="$posts" :columns="['image', 'title', 'content', 'actions']" />
</body>
```

 

Dalam contoh di atas, kita menggunakan komponen Blade `<x-splade-table>` untuk menampilkan data dari model Post. Kolom-kolom yang ingin ditampilkan seperti gambar, judul, konten, dan kolom aksi juga ditentukan dalam parameter.

Menambahkan Kolom Gambar, Judul, Konten, dan Aksi

Seiring dengan pengembangan, kita dapat menambahkan kode khusus untuk setiap kolom dalam komponen SpladeTable. Sebagai contoh, kita dapat menambahkan gaya khusus untuk kolom gambar atau menambahkan tombol aksi. Berikut adalah contoh penambahan kode untuk mengatur ukuran gambar dan memberikan gaya khusus:

```html
<!-- ... -->
@push('styles')
<style>
    /* Styling for the image column */
    .splade-table td.splade-table__column-image img {
        max-width: 100px;
        max-height: 100px;
    }
</style>
@endpush
```

Selanjutnya, kita dapat menambahkan logika JavaScript khusus jika diperlukan untuk mengatur kolom aksi. Semua ini memungkinkan kita untuk menghadirkan tampilan yang lebih kompleks dan sesuai dengan kebutuhan aplikasi.

Dengan langkah ini, view Posts tidak sekadar menampilkan data entitas Post; ia juga menghadirkan data dengan desain yang menarik, responsif, dan dinamis. Pembangunan view ini memberikan dimensi baru pada pengalaman pengguna dan meningkatkan nilai estetika dan interaktivitas dalam aplikasi Laravel kita.

 

Published on January 28, 2024
Last updated on June 03, 2026