Tutorial Inertia Roles & Permissions - #10 - Membuat Module Dashboard Dengan Inertia React
Artikel ini merupakan series dari Tutorial Laravel Inertia Roles & Permissions, disini kita akan membuat sebuah module dashboard dengan inertia react.
Pendahuluan
Setelah berhasil membuat sebuah utils permissions menggunakan react, disini kita akan lanjutkan untuk membuat module dashboard, dari project kita.
Controller Dashboard
Silahkan teman - teman buka terminal-nya, kemudian jalankan perintah berikut ini :
php artisan make:controller DashboardController -i
Jika perintah diatas berhasil dijalankan, maka kita akan mendapatkan sebuah file yang terletak di app/Http/Controllers dengan nama DashboardController.php, kemudian dari perintah artisan diatas kita menambahkan sebuah flag -i yang artinya pada DashboardController.php kita hanya akan memiliki sebuah method __invoke didalamnya, selanjutnya silahkan buka file tersebut kemudian tambahkan kodenya menjadi seperti berikut ini.
<?php
namespace App\Http\Controllers;
use App\Models\Post;
use Illuminate\Http\Request;
class DashboardController extends Controller
{
/**
* Handle the incoming request.
*/
public function __invoke(Request $request)
{
// get posts
$posts = Post::with('user')
->when($request->search,function($query) use($request){
$query->where('title', 'like', '%'.$request->search.'%')
->orWhereHas('user', fn($query) => $query->where('name', 'like', '%'.$request->search.'%'));
})
->latest()->paginate(12);
// render view
return inertia('Dashboard', ['posts' => $posts]);
}
}
Pertama - tama kita membuat sebuah variabel posts yang kita gunakan untuk menampilkan sebuah data dari tabel posts. Disini kita juga menampilkan relasi tabel user menggunakan method with. Selain menampilkan data, kita juga menambahkan sebuah pencarian data posts ketika method when dieksekusi. Method tersebut akan dieksekusi ketika kita mengirimkan sebuah request dengan nama search dan ketika kita mengirimkan request tersebut, maka kita akan melakukan filter data posts menggunakan method where, selain itu kita juga melakukan pembatasan data yang ditampilkan perhalamanya hanya sebanyak 12 data menggunaakn method paginate dan yang terakhir kita urutkan datanya sesuai data yang paling baru menggunakan method latest.
// get posts
$posts = Post::with('user')
->when($request->search,function($query) use($request){
$query->where('title', 'like', '%'.$request->search.'%')
->orWhereHas('user', fn($query) => $query->where('name', 'like', '%'.$request->search.'%'));
})
->latest()->paginate(12);
Selanjutnya data diatas, kita kirimkan ke sebuah view dengan nama Dashboard.jsx, dalam bentuk props.
// render view
return inertia('Dashboard', ['posts' => $posts]);
Route Dashboard
Setelah berhasil membuat sebuah controller Dashboard, sekarang kita akan lanjutkan untuk pembuatan route-nya, silahkan teman - teman buka file routes/web.php, kemudian ubah kode-nya menjadi seperti berikut ini :
<?php
use App\Http\Controllers\DashboardController;
use App\Http\Controllers\PermissionController;
use App\Http\Controllers\PostController;
use App\Http\Controllers\ProfileController;
use App\Http\Controllers\RoleController;
use App\Http\Controllers\UserController;
use Illuminate\Foundation\Application;
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;
Route::get('/', function () {
return Inertia::render('Welcome', [
'canLogin' => Route::has('login'),
'canRegister' => Route::has('register'),
'laravelVersion' => Application::VERSION,
'phpVersion' => PHP_VERSION,
]);
});
Route::middleware('auth')->group(function () {
// dashbaord route
Route::get('/dashboard', DashboardController::class)->name('dashboard');
// profile route
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');
});
require __DIR__.'/auth.php';
Dari perubahan kode diatas, kita menambahkan sebuah route baru dengan nama dashboard, untuk memastikan route yang kita buat telah berfungsi, teman - teman bisa jalankan perintah berikut ini didalam terminal.
php artisan r:l --name=dashboard
Setelah perintah artisan diatas dijalankan, maka kita akan mendapatkan output, kurang lebih seperti berikut ini.
GET|HEAD dashboard ..................................................................... dashboard › DashboardController
View Dashboard
Silahkan teman - teman buka file yang bernama Dashboard.jsx yang terletak pada resources/js/Pages, kemudian ubah kodenya menjadi seperti berikut ini.
import Pagination from '@/Components/Pagination';
import PostCard from '@/Components/PostCard';
import Search from '@/Components/Search';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head, usePage } from '@inertiajs/react';
export default function Dashboard({ auth }) {
// desturct props posts
const { posts } = usePage().props;
return (
<AuthenticatedLayout
user={auth.user}
header={<h2 className="font-semibold text-xl text-gray-800 leading-tight">Dashboard</h2>}
>
<Head title="Dashboard" />
<div className="py-12">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className='mb-4'>
<Search url={route('dashboard')} placeholder={'Search posts data by title or author...'}/>
</div>
<div className='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4'>
{posts.data.map((post, i) => <PostCard post={post} key={i}/>)}
</div>
<div className='flex items-center justify-center'>
{posts.last_page !== 1 && (<Pagination links={posts.links}/>)}
</div>
</div>
</div>
</AuthenticatedLayout>
);
}
Pada kode diatas, pertama - tama kita import beberapa file yang kita butuhkan.
import Pagination from '@/Components/Pagination';
import PostCard from '@/Components/PostCard';
import Search from '@/Components/Search';
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head, usePage } from '@inertiajs/react';
Selanjutnya kita membuat sebuah React Functional Component dengan props auth.
export default function Dashboard({ auth })
Berikutnya kita melakukan destructing sebuah props posts yang kita dapatkan dari DashboardController
// desturct props posts
const { posts } = usePage().props;
Kemudian kita memanggil sebuah component layout, dengan nama AuthenticatedLayout dengan props user dan header.
<AuthenticatedLayout
user={auth.user}
header={<h2 className="font-semibold text-xl text-gray-800 leading-tight">Dashboard</h2>}
>
</AuthenticatedLayout>
Selajutnya kita memanggil sebuah component dengan nama Search dengan props url dan placeholder.
<Search url={route('dashboard')} placeholder={'Search posts data by title or author...'}/>
Pada props url, kita arahkan pencarian data kita ke sebuah route yang bernama dashboard.
Berikutnya kita juga memanggil sebuah component dengan nama PostCard dengan props post.
{posts.data.map((post, i) => <PostCard post={post} key={i}/>)}
Pada kode diatas, kita akan menampilkan sebuah component PostCard sebanyak data posts, yang kita miliki didalam database, disini kita menggunakan perulangan dengan method map, setelah kita lakukan perulangan kita passing hasil perulangan data posts ke dalam props post dan kita set key tiap PostCard menggunakan index dari tiap perulangan.
Berikutnya kita juga memanggil sebuah component dengan nama Pagination dengan props links.
{posts.last_page !== 1 && (<Pagination links={posts.links}/>)}
JIka data posts.last_page tidak sama dengan 1 maka kita akan tampilkan sebuah component Pagination dengan props yang kita set dengan data posts.links.
Screenshoot Hasil
Penutup
Pada artikel kali ini kita telah berhasil menyelesaikan pembuatan module dashboard, selanjutnya kita akan lanjutkan untuk pembuatan module posts.
Artikel Lainnya
Beberapa artikel rekomendasi lainnya untuk menambah pengetahuan.