Tutorial: Membuat View Dan Menampilkan Data Di Laravel Splade
Tailwind CSS laravel splade

Tutorial: Membuat View Dan Menampilkan Data Di Laravel Splade
Admin
Admin
ID • 2 years ago • 14 min read • 4823 views
Tutorial: Membuat View Dan Menampilkan Data Di Laravel Splade

Tutorial: Membuat View Dan Menampilkan Data Di Laravel Splade

id • 14 min read • 4823 views

Halow Dev, Mari kita lanjutkan pembahasan Laravel Splade. Pada artikel sebelumnya kita telah belajar Tutorial: Membuat Model Dan Migration Di Laravel Splade, mari kita lanjutkan dengan Tutorial: Membuat View Dan Menampilkan Data Di Laravel Splade. 

Table of Contents

Apa Itu View ?

View adalah istilah yang memiliki berbagai arti tergantung pada konteks dan bidangnya. Secara umum, view berarti melihat, memandang, pandangan, atau pemandangan. Namun, dalam bidang tertentu, view bisa memiliki makna khusus, seperti:
 

- Dalam SQL,

 
view adalah tabel virtual yang berdasarkan pada hasil dari pernyataan SQL. View berisi baris dan kolom, seperti tabel nyata, tetapi tidak menyimpan data secara fisik. View bisa digunakan untuk menyederhanakan query, menyembunyikan detail tabel, atau meningkatkan keamanan data.
 

- Dalam Laravel,

 
view adalah bagian yang menangani tampilan (user interface) untuk ditampilkan pada web browser. View bisa berisi HTML, CSS, JavaScript, atau bahasa template seperti Blade.
 

- Dalam YouTube,

 
view adalah jumlah kali video ditonton oleh pengguna. View bisa digunakan untuk mengukur popularitas atau kualitas sebuah video. View juga bisa mempengaruhi pendapatan dari iklan yang ditampilkan pada video.
 
Mari kita lanjutkan pembahasanya !
 

Tutorial: Membuat View Dan Menampilkan Data Di Laravel Splade.

 

#1. Buat Controller Post

 
Seperti biasa jalankan perintah di dalam terminal/command prompt (CMD), lalu pastikan posisi kalian sudah berada di depan komputer/PC dan sudah membuka project Laravelnya, lakukan perintah ini :
php artisan make:controller PostController

Setelah perintah berhasil di jalankan pada project laravel kalian, biasanya kalian akan mendapatkan sebuah file baru yang bernama app/Http/Controllers/PostController.php . Dan jika kalian sudah mendaptkan file tersebut, lalu ubahlah kodenya. Silahkan buka file tersebut, ubah kodenya seperti di bawah ini :

<?php

namespace App\Http\Controllers;

use App\Models\Post;
use Illuminate\Http\Request;
use ProtoneMedia\Splade\SpladeTable;

class PostController extends Controller
{
    /**
     * display all post data
     */
    public function index()
    {
        // get all post data
        $posts = Post::latest()->paginate(7);

        // render view
        return view('posts.index', [
            'posts' => SpladeTable::for($posts)
            ->column('image')
            ->column('title')
            ->column('content')
            ->column('action')
        ]);
    }
}

Setelah melakukan perubahan kode di atas, langkah selanjutnya yang harus kalian lakukan adalah import Model post dalam Controller Kalian. Dan jangan lupa juga lakukanlah sebuah import table component yang sudah di sediakan oleh laravel splade, contohnya seperti berikut :

use App\Models\Post;

 

use ProtoneMedia\Splade\SpladeTable;

Setelah itu jangan lupa kopinya di minum dulu, karena kayaknya sudah dingin. Kita lanjutkan dengan menambahkan sebuah method baru bernama index , method tersebut ada dalam class PostController, contohnya seperti ini :

/**
* display all post data
*/
public function index()
{
	// masukan kode disini...  
}

Langkah awal dalam method tersebut kalian buat variable baru namailah dengan $posts dimana method tersebut berisi sebuah data dari Model post yang nantinya di ambil dari database.

Setelah itu kita akan memanggil method latest yang fungsinya untuk mengurutkan data yang di tampilkan dari yang baru hingga yang paling lama. Jangan lupa kalian tambahkan juga 1 method paginate , gunanya untuk membatasi jumlah tampilan data perhalamn, misalnya 5 atau 10 data terserah kalian, contohnya seperti ini :

// get all post data
$posts = Post::latest()->paginate(5);

Jika data nya sudah berhasil kalian tampung, langkah selanjutnya kalian kirimkan ke sebuah view dengan menjalankan perintah berikut :

// render view
return view('posts.index', [
    'posts' => SpladeTable::for($posts)
    ->column('image')
    ->column('title')
    ->column('content')
    ->column('action')
]);

Dengan perintah di atas artinya kita melakukan sebuah render view resources/posts/index.blade.php dan akan mengirimkan sebuah variable $posts kemudian akan kita kantongi dalam sebuah component table yang sudah di sediakan Splade, dengan cara spladeTable: :for ($posts). Jangan lupa definisikan sebuah column yang akan di gunakan nantinya.

 

#2. Buat Route Posts

Langkah awal dalam pembuatan Route Posts, buatlah routenya terlebih dahulu, supaya nanti bisa mengakases sebuah controller melalui URL browser. Kemudian bukalah file bernama web.php yang berada di folder routes, lalu ubah kode file tersebut menjadi seperti di bawah ini :

<?php

use App\Http\Controllers\PostController;
use Illuminate\Support\Facades\Route;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::middleware(['splade'])->group(function () {
    Route::get('/', fn () => view('home'))->name('home');
    Route::get('/docs', fn () => view('docs'))->name('docs');

    // Posts routes
    Route::resource('/posts', PostController::class);

    // Registers routes to support the interactive components...
    Route::spladeWithVueBridge();

    // Registers routes to support password confirmation in Form and Link components...
    Route::spladePasswordConfirmation();

    // Registers routes to support Table Bulk Actions and Exports...
    Route::spladeTable();

    // Registers routes to support async File Uploads with Filepond...
    Route::spladeUploads();
});

Setelah perubahan kode terjadi kalian tambahkan route baru dengan menggunakan Path /posts.  Penjelasan dari Route di atas, itu artinya kita menggunakan route jenis resource yang terdiri dari index ,  create ,  store,  show,  edit ,  update , dan destroy.

Jalankan perintah berikut pada terminal/command prompt (CMD)  

php artisan r:l --name=posts

Perintah di atas  adalah untuk memastikan penambahan route yang kita buat berhasil atau tidak.

 

#3. Membuat View  Dan Menampilkan Data

Setelah semua proses dan langkah pembuatan controller dan route selesai dan berhasil, maka proses selanjutnya adalah membuat view yang akan di gunakan untuk menampilkan data.

Di dalam folder resource/views silahkan kalian buat folder baru dengan nama posts, lalu dalam folder post buat file baru, namailah dengan index.blade.php lalu masukan kode di bawah ini :

<x-layout>
    <x-slot name="header">
        {{ __('Posts') }}
    </x-slot>
    <x-panel>
        <!-- btn create -->
        <div class="flex">
            <Link href="/posts/create"
                class="px-4 py-2 bg-gray-100 rounded-md text-sm border flex items-center gap-2 text-gray-700">
            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-plus" width="24"
                height="24" viewBox="0 0 24 24" stroke-width="1.2" stroke="currentColor" fill="none"
                stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
                <path d="M9 12l6 0"></path>
                <path d="M12 9l0 6"></path>
            </svg>
            Add New Post
            </Link>
        </div>
        <!-- table component -->
        <x-splade-table :for="$posts">
            <x-slot:empty-state>
                <div class="flex text-center justify-center text-red-500">There are no items to show</div>
                </x-slot>
                @cell('image', $posts)
                    <img src="{{ asset('/storage/posts/' . $posts->image) }}" class="rounded-md w-1/3" />
                @endcell
                <!-- action button -->
                @cell('action', $posts)
                    <div class="flex gap-2">
                        <Link href="{{ route('posts.edit', $posts->id) }}"
                            class="rounded-full p-2 bg-orange-300 text-white hover:bg-orange-400">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-edit w-5 h-5"
                            width="24" height="24" viewBox="0 0 24 24" stroke-width="1.2" stroke="currentColor"
                            fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"></path>
                            <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"></path>
                            <path d="M16 5l3 3"></path>
                        </svg>
                        </Link>
                    </div>
                @endcell
        </x-splade-table>
    </x-panel>
</x-layout>

Setelah perubahan kode, selanjutnya kalian gunakan component layout yang di sediakan splade

<x-layout>

// masukan kode disini...

</x-layout>

lalu set nama head nya dengan posts

<x-slot name="header">
	{{ __('Posts') }}
</x-slot>

 Kemudian buatlah  button untuk untuk menambhkan data post terbaru.

<div class="flex">
    <Link href="/posts/create"
        class="px-4 py-2 bg-gray-100 rounded-md text-sm border flex items-center gap-2 text-gray-700">
    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-circle-plus" width="24"
        height="24" viewBox="0 0 24 24" stroke-width="1.2" stroke="currentColor" fill="none"
        stroke-linecap="round" stroke-linejoin="round">
        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
        <path d="M12 12m-9 0a9 9 0 1 0 18 0a9 9 0 1 0 -18 0"></path>
        <path d="M9 12l6 0"></path>
        <path d="M12 9l0 6"></path>
    </svg>
    Add New Post
    </Link>
</div>

Gunakan component table yang sudah di sediakan dan kalain set propsnya dengan variable $posts yang telah kalian buat sebelumnya pada controller.

<x-splade-table :for="$posts">
    <x-slot:empty-state>
        <div class="flex text-center justify-center text-red-500">There are no items to show</div>
    </x-slot>
</x-splade-table>

Cobalah modifikasi beberapa column pada component table kalian menggunakan blade directive @cell yang di sediakan splade, modifikasi image dan action .

@cell('image', $posts)
    <img src="{{ asset('/storage/posts/' . $posts->image) }}" class="rounded-md w-1/3" />
@endcell
<!-- action button -->
@cell('action', $posts)
    <div class="flex gap-2">
        <Link href="{{ route('posts.edit', $posts->id) }}"
            class="rounded-full p-2 bg-orange-300 text-white hover:bg-orange-400">
        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-edit w-5 h-5"
            width="24" height="24" viewBox="0 0 24 24" stroke-width="1.2" stroke="currentColor"
            fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
            <path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"></path>
            <path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"></path>
            <path d="M16 5l3 3"></path>
        </svg>
        </Link>
    </div>
@endcell

Kemudian buka file navigation.blade.php yang berada di resourece/views/component lalu ubah kodenya seperti di bawah ini :

<x-splade-data default="{ open: false }">
    <nav class="bg-white border-b border-gray-100">
        <!-- Primary Navigation Menu -->
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex justify-between h-16">
                <div class="flex">
                    <!-- Logo -->
                    <div class="shrink-0 flex items-center">
                        <a href="{{ route('home') }}">
                            <x-application-mark class="block h-9 w-auto" />
                        </a>
                    </div>

                    <!-- Navigation Links -->
                    <div class="hidden space-x-8 sm:-my-px sm:ml-10 sm:flex">
                        <x-nav-link href="{{ route('home') }}" :active="request()->routeIs('home')">
                            {{ __('Home') }}
                        </x-nav-link>

                        <x-nav-link href="{{ route('docs') }}" :active="request()->routeIs('docs')">
                            {{ __('Documentation') }}
                        </x-nav-link>

                        <x-nav-link href="{{ route('posts.index') }}" :active="request()->routeIs('posts*')">
                            {{ __('Posts') }}
                        </x-nav-link>
                    </div>
                </div>

                <!-- Hamburger -->
                <div class="-mr-2 flex items-center sm:hidden">
                    <button @click="data.open = ! data.open"
                        class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 focus:text-gray-500 transition">
                        <svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
                            <path v-bind:class="{'hidden': data.open, 'inline-flex': ! data.open }"
                                stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M4 6h16M4 12h16M4 18h16" />
                            <path v-bind:class="{'hidden': ! data.open, 'inline-flex': data.open }"
                                stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
            </div>
        </div>

        <!-- Responsive Navigation Menu -->
        <div v-bind:class="{'block': data.open, 'hidden': ! data.open }" class="sm:hidden">
            <div class="pt-2 pb-3 space-y-1">
                <x-responsive-nav-link href="{{ route('home') }}" :active="request()->routeIs('home')">
                    {{ __('Home') }}
                </x-responsive-nav-link>

                <x-responsive-nav-link href="{{ route('docs') }}" :active="request()->routeIs('docs')">
                    {{ __('Documentation') }}
                </x-responsive-nav-link>
            </div>
        </div>
    </nav>
</x-splade-data>

Pada kode tersebut tambahkanlah sebuah component nav-link namai dengan posts .

<x-nav-link href="{{ route('posts.index') }}" :active="request()->routeIs('posts*')">
    {{ __('Posts') }}
</x-nav-link>

#1. Uji Coba  Menampilkan Data

Setelah lelah melakukan koding tadi, jangan lupa minum kopi lagi,lalu cobalah kalian jalankan projectnya di dalam browser dengan akses http://127.0.0.1:8000/posts .

Penutup 

Terimakasih telah mengikuti step by step tutorial: membuat view dan menampilkan data di laravel splade. silahkan kalian coba untuk melakukanya di project laravel kalian. Pahami, cermati dan lakukan, Terimakasih.

 

 

Series: laravel splade
Published on December 06, 2023
Last updated on June 03, 2026
Tutorials
Tailwind CSS laravel splade
Previous Home Insurance
Next Tutorial: Insert Data Ke Dalam Database Di Laravel...

If you like this post and want to support us, you can support us via buymeacoffee or trakteer.

trakteer divisidev divisidev: buy me a coffee