Halo teman-teman semuanya, di artikel sebelumnya kita semua sudah belajar bagaimana cara installasi dan konfigurasi Tailwind CSS di dalam project Laravel. Di artikel kali ini kita semua akan belajar bagaimana cara menampilkan data dari database dan untuk user interface kita akan menggunakan Tailwind CSS.
Langkah 1 - Membuat Controller Post
Pertama, kita akan membuat controllernya terlebih dahulu. Silahkan jalankan perintah berikut ini di dalam CMD/terminal :
php artisan make:controller PostController
Jika perintah di atas berhasil, maka kita akan dibuatkan 1 file baru yaitu di dalam folder app/Http/Controllers/PostController.php. Silahkan buka file tersebut dan ubah kode-nya menjadi seperti berikut ini :
<?php
namespace App\Http\Controllers;
use App\Models\Post;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
class PostController extends Controller
{
/**
* index
*
* @return void
*/
public function index()
{
$posts = Post::latest()->when(request()->search, function($posts) {
$posts = $posts->where('title', 'like', '%'. request()->search . '%');
})->paginate(5);
return view('post.index', compact('posts'));
}
}
Di atas pertama kita import Model Post terlebih dahulu, karena kita akan menggunakan model ini untuk menampilkan data, input data dan yang lain-nya.
use App\Models\Post;
Kemudian kita juga import Http Request dari Laravel, ini akan kita manfaatkan untuk mendapatkan data request dari sisi client untuk di masukkan di dalam database saat proses input data.
use Illuminate\Http\Request;
Dan kita juga import Facades Storage dari Laravel, ini akan kita manfaatkan untuk melakukan store atau upload data gambar ke dalam server.
use Illuminate\Support\Facades\Storage;
Kemudian kita menambahkan 1 method yaitu index, method ini akan kita gunakan untuk mendapatkan data posts melalui model Post dan disini kita menggunakan method index untuk proses pencarian juga.
Yaitu, ketika ada request dengan nama search, maka akan melakukan query dengan judul post yang sesuai dengan nilai dari request search tersebut. Kurang lebih seperti berikut ini :
$posts = Post::latest()->when(request()->search, function($posts) {
$posts = $posts->where('title', 'like', '%'. request()->search . '%');
})->paginate(5);
Selanjutnya, kita parsing data posts tersebut ke dalam view menggunakan helper compact.
return view('post.index', compact('posts'));
Langkah 2 - Membuat Route
Setelah berhasil membuat controller dan juga method, sekarang kita lanjutkan untuk menambahkan route, ini digunakan agar controller kita dapat kita akses melalui web browser.
Silahkan buka file routes/web.php kemudian ubah kode-nya menjadi seperti berikut ini :
<?php
namespace App\Http\Controllers;
use Illuminate\Support\Facades\Route;
Route::get('/', function() {
return view('welcome');
});
Route::resource('post', PostController::class);
Di atas, pertama kita set untuk namespace terlebih dahulu. Diisni kita arahkan ke dalam folder di mana controller berada.
namespace App\Http\Controllers;
Setelah itu, kita menggunakan route dengan jenis resource, kurang lebih seperti berikut ini :
Route::resource('post', PostController::class);
Keuntungan menggunakan Route dengan jenis resources adalah kita sudah tidak perlu melakukan definisi route satu-satu lagi untuk semua method nantinya, karena sudah otomatis di generate oleh Laravel, seperti index, create, store, edit, update, destroy.
untuk melihat route resource yang sudah kita buat, kita bisa menjalankan perintah berikut ini di dalam CMD/terminal :
php artisan route:list
Langkah 3 - Membuat Layout
Sekarang, kita lanjutkan untuk membuat layout untuk view nantinya, silahkan buat folder baru dengan nama layouts di dalam folder resources/views. Kemudian di dalam folder layouts silahkan buat file baru dengan nama app.blade.php dan masukkan kode berikut ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{{ $title }}</title>
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
</head>
</head>
<body class="bg-gray-400">
<!-- mian content -->
@yield('content')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="{{ asset('js/app.js') }}"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/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>
Di atas kita memanggil beberapa CSS dan JavaScript untuk kebutuhan project kita, diantaranya ada Tailwind CSS, yaitu di dalam file :
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
Kemudian, kita juga menambahkan library Toastr, library ini akan kita gunakan untuk menampilkan message ketika data berhasil di simpam, update dan delete.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js">
Untuk menampilkan Toastr kita menggunakan kode seperti berikut ini :
<script>
//message with toastr
@if(session()->has('success'))
toastr.success('{{ session('success') }}', 'BERHASIL!');
@elseif(session()->has('error'))
toastr.error('{{ session('error') }}', 'GAGAL!');
@endif
</script>
Dan untuk melakukan render konten kita akan menggunakan kode berikut ini :
@yield('content')
Langkah 4 - Membuat View Index
Setelah berhasil membuat layout, sekarang kita tinggal lanjutkan untuk membuat view untuk menampilkan data dari database. Silahkan buat folder baru dengan nama post di dalam folder resources/views, kemudian di dalam folder post silahkan buat file baru dengan nama index.blade.php dan masukkan kode berikut ini :
@extends('layouts.app', ['title' => 'Data Posts'])
@section('content')
<div class="container mx-auto mt-10 mb-10">
<div class="bg-white p-5 rounded shadow-sm">
<div class="grid grid-cols-8 gap-4 mb-4">
<div class="col-span-1 mt-2">
<a href="{{ route('post.create') }}"
class="w-full bg-indigo-500 text-white p-3 rounded shadow-sm focus:outline-none hover:bg-indigo-700">TAMBAH
POST</a>
</div>
<div class="col-span-7">
<form action="{{ route('post.index') }}" method="GET">
<input type="text" name="search"
class="w-full bg-gray-200 p-2 rounded shadow-sm border border-gray-200 focus:outline-none focus:bg-white"
placeholder="ketik judul post dan enter">
</form>
</div>
</div>
<table class="min-w-full table-auto">
<thead class="justify-between">
<tr class="bg-indigo-500 w-full">
<th class="px-16 py-2">
<span class="text-white">GAMBAR</span>
</th>
<th class="px-16 py-2 text-left">
<span class="text-white">JUDUL</span>
</th>
<th class="px-16 py-2 text-left">
<span class="text-white">CONTENT</span>
</th>
<th class="px-16 py-2">
<span class="text-white">AKSI</span>
</th>
</tr>
</thead>
<tbody class="bg-gray-200">
@forelse($posts as $post)
<tr class="bg-white border-2 border-gray-200">
<td class="px-16 py-2">
<img src="{{ Storage::url('public/posts/'.$post->image) }}" class="w-48 rounded-md">
</td>
<td class="px-16 py-2">
{{ $post->title }}
</td>
<td class="px-16 py-2">
{!! $post->content !!}
</td>
<td class="px-10 py-2 text-center">
<form onsubmit="return confirm('Apakah Anda Yakin ?');" action="{{ route('post.destroy', $post->id) }}" method="POST">
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:border-indigo-700 text-xs focus:outline-none mr-2"><a href="{{ route('post.edit', $post->id) }}">EDIT</a></button>
@csrf
@method('DELETE')
<button type="submit" class="bg-red-500 text-white px-4 py-2 rounded hover:border-red-700 text-xs focus:outline-none"> HAPUS</button>
</form>
</td>
</tr>
@empty
<div class="bg-red-500 text-white p-3 rounded shadow-sm mb-3">
Data Belum Tersedia!
</div>
@endforelse
</tbody>
</table>
<div class="mt-2">
{{ $posts->links('vendor.pagination.tailwind') }}
</div>
</div>
</div>
@endsection
Di atas untuk menampilkan data post kita menggunakan perulangan forelse, dimana kita bisa melakukan perulangan data jika ada tersebut tersedia dan jika data tidak ada maka akan menampilkan message bahwa data belum tersedia, kurang lebih seperti berikut ini :
@forelse ($posts as $post)
//perulangan data post
@empty
<div class="bg-red-500 text-white p-3 rounded shadow-sm mb-3">
Data Belum Tersedia!
</div>
@endforelse
Dan untuk menampilkan image dari post, di atas kita menggunaka kode seperti berikut ini :
<img src="{{ Storage::url('public/posts/'.$post->image) }}" class="w-48 rounded-md">
Dan untuk pagination, kita menggunakan style Tailwind CSS yang sudah disediakan oleh Laravel. Akan tetapi nanti kita harus melakukan publish view-nya terlebih dahulu untuk menggunakan fitur ini :
{{ $posts->links('vendor.pagination.tailwind') }}
Langkah 5 - Publish View Pagination
Karena kita akan menggunakan view pagination Tailwind CSS bawaan dari Laravel, maka kita harus melakukan publish view-nya terlebih dahulu. Silahkan jalankan perintah berikut ini :
php artisan vendor:publish --tag=laravel-pagination
Jika berhasil, maka teman-teman akan melaihat beberapa sample view pagination di dalam folder resources/view/vendor/pagination.
Langkah 6 - Menjalankan Project
Sekarang kita bisa mencoba menjalankan projectnya di http://localhost:8000/post dan jika berhasil kurang lebih tampilannya seperti berikut ini :
Di atas, kita telah berhasil menampilkan data dari database, pesan Data belum Tersedia! muncul karena kita belum memiliki data apapun di dalam database. Di artikel selanjutnya kita semua akan belajar bagaimana cara melakukan insert data ke dalam database.
Terima Kasih
INFO :