Halo teman-teman semuanya, pada kesempatan kali ini kita semua akan belajar bagaimana cara membuat sistem routing di Preact dengan library tambahan yang bernama Preact Router.
Apa itu Preact Router ?
Preact Router adalah sebuah library routing yang dirancang khusus untuk digunakan dengan Preact. Ini memungkinkan kita untuk menangani navigasi dan pengelolaan URL dalam aplikasi web dengan mudah.
Dengan Preact Router kita bisa melakukan navigasi di dalam aplikasi web secara SPA atau single page application (tanpa reload halaman).
Langkah 1 - Installasi Preact Router
Silahkan teman-teman jalankan perintah berikut ini di dalam terminal/CMD dan pastikan sudah berada di dalam project Preact-nya.
npm install preact-router@4.1.2
Silahkan ditunggu proses installasinya sampai selesai.
Langkah 2 - Integrasi Bootstrap di Preact
Bootstrap akan kita gunakan untuk membuat user interface (UI) agar lebih cepat dan mudah. Disini kita akan menggunakan versi CDN atau online-nya.
Silahkan teman-teman buka file index.html dan ubah kode-nya menjadi seperti berikut ini.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Preact + Laravel 11 - SantriKoding.com</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: lightgray;
}
</style>
</head>
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
Di atas, kita telah memasukkan Bootstrap CSS dan JS di dalam file, sehingga sekarang kita sudah bisa menggunakan Bootstrap di dalam project.
Langkah 3 - Hapus Default CSS Preact
Agar CSS dari Bootstrap tidak bentrok, maka kita harus menghapus CSS bawaan dari Preact. Silahkan teman-teman buka file src/main.jsx, kemudian hapus kode berikut ini.
src/main.jsx
import './index.css'
Dan sekarang, harusnya file src/main.jsx akan menjadi seperti berikut ini.
src/main.jsx
import { render } from "preact";
import { App } from "./app.jsx";
render(<App />, document.getElementById("app"));
Langkah 4 - Membuat Views
Sebelum kita membuat konfigurasi routes, maka kita perlu membuat default view yang nanti dirender saat route dipanggil.
-
View Home
Silahkan teman-teman buat folder baru dengan nama pages di dalam folder src, kemudian di dalam folder pages buatlah folder dengan nama home dan di dalam folder home tersebut buatlah file baru dengan nama index.jsx dan masukkan kode berikut ini di dalamnya.
src/pages/home/index.jsx
export default function Home() {
return (
<div className="container mt-5 mb-5">
<div className="row">
<div className="col-md-12">
<div className="card border-0 rounded shadow">
<div className="p-5 bg-light rounded-3">
<div className="container-fluid py-5">
<h1 className="display-5 fw-bold">PREACT + LARAVEL 11</h1>
<p className="col-md-8 fs-4">
Belajar CRUD dengan Preact dan Laravel 11 di SantriKoding.com
</p>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
-
View Post Index
Kita lanjutkan membuat view untuk halaman Post Index, silahkan teman-teman buat folder baru dengan nama posts di dalam folder src/pages dan di dalam folder posts buatlah file baru dengan nama index.jsx dan masukkan kode berikut ini di dalamnya.
src/pages/posts/index.jsx
export default function PostIndex() {
return (
<div className="container mt-5 mb-5">
<div className="row">
<div className="col-md-12">
<div className="card border-0 rounded shadow">
<div className="card-body">HALAMAN POSTS INDEX</div>
</div>
</div>
</div>
</div>
);
}
-
View Post Create
Setelah view Post Index, maka kita lanjutkan untuk view Post Create, silahkan teman-teman buat file baru dengan nama create.jsx di dalam folder src/pages/posts, kemudian masukkan kode berikut ini di dalamnya.
src/pages/posts/create.jsx
export default function PostCreate() {
return (
<div className="container mt-5 mb-5">
<div className="row">
<div className="col-md-12">
<div className="card border-0 rounded shadow">
<div className="card-body">HALAMAN POSTS CREATE</div>
</div>
</div>
</div>
</div>
);
}
-
View Post Edit
Terkahir, adalah membuat view untuk Post Edit, silahkan teman-teman buat file baru dengan nama edit.jsx di dalam folder src/pages/posts, kemudian masukkan kode berikut ini di dalamnya.
src/pages/posts/edit.jsx
export default function PostEdit() {
return (
<div className="container mt-5 mb-5">
<div className="row">
<div className="col-md-12">
<div className="card border-0 rounded shadow">
<div className="card-body">HALAMAN POSTS EDIT</div>
</div>
</div>
</div>
</div>
);
}
Langkah 5 - Membuat Konfigurasi Routes
Setelah semua view berhasil dibuat, maka langkah berikutnya adalah membuat routes-nya. Silahkan teman-teman buat folder baru dengan nama routes di dalam folder src, kemudian di dalam folder routes tersebut buatlah file baru dengan nama index.jsx dan masukkan kode berikut ini di dalamnya.
src/routes/index.jsx
//import Router
import Router from "preact-router";
//import pages
import Home from "../pages/home/index.jsx";
import PostIndex from "../pages/posts/index.jsx";
import PostCreate from "../pages/posts/create.jsx";
import PostEdit from "../pages/posts/edit.jsx";
function Routes() {
return (
<Router>
<Home path="/" />
<PostIndex path="/posts" />
<PostCreate path="/posts/create" />
<PostEdit path="/posts/edit/:id" />
</Router>
);
}
export default Routes;
Dari penambahan kode di atas, pertama kita import Router dari Preact Router.
//import Router
import Router from "preact-router";
Kemudian kita import beberapa view yang sudah kita buat sebelumnya.
//import pages
import Home from "../pages/home/index.jsx";
import PostIndex from "../pages/posts/index.jsx";
import PostCreate from "../pages/posts/create.jsx";
import PostEdit from "../pages/posts/edit.jsx";
Dan untuk mendefinisikan sebuah route, kita cukup seperti berikut ini.
<Router>
<Home path="/" />
<PostIndex path="/posts" />
<PostCreate path="/posts/create" />
<PostEdit path="/posts/edit/:id" />
</Router>
Di atas, route harus di definisikan di dalam <Router> dan untuk path adalah URL yang nanti digunakan untuk navigasi oleh route.
Langkah 6 - Register Routes
Agar routes yang sudah kita buat di atas bisa digunakan di dalam project, maka kita perlu memanggilnya di dalam component app.jsx.
Silahkan teman-teman buka file src/app.jsx, kemudian ubah semua kode-nya menjadi seperti berikut ini.
src/app.jsx
//import routes
import Routes from "./routes";
//import link
import { Link } from "preact-router/match";
export function App() {
return (
<>
<div>
<nav className="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
<div className="container">
<Link href="/" className="navbar-brand" activeClassName="active">
HOME
</Link>
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div
className="collapse navbar-collapse"
id="navbarSupportedContent"
>
<ul className="navbar-nav me-auto mb-2 mb-lg-0">
<li className="nav-item">
<Link
href="/posts"
className="nav-link"
activeClassName="active"
aria-current="page"
>
POSTS
</Link>
</li>
</ul>
<ul className="navbar-nav ms-auto mb-2 mb-lg-0" role="search">
<a
href="https://santrikoding.com"
target="_blank"
className="btn btn-success"
>
SANTRIKODING.COM
</a>
</ul>
</div>
</div>
</nav>
</div>
<Routes />
</>
);
}
Dari perubahan kode di atas, pertama kita import Routes yang sudah kita buat sebelumnya.
//import routes
import Routes from "./routes";
karena akan ada navigasi Link di dalam template, maka kita juga import Link dari Preact Router.
//import link
import { Link } from "preact-router/match";
kemudian untuk memanggil Routes-nya, kita cukup panggil seperti ini.
<Routes />
Langkah 7 - Uji Coba Menampilkan Home
Sekarang jika teman-teman lihat project-nya di http://localhost:5173, maka kurang lebih akan seperti berikut ini.
Silahkan teman-teman test juga untuk route-nya, dengan cara klik menu POSTS yang ada di dalam navbar, jika berhaisl kita akan diarahkan ke halaman posts index secara SPA atau single page application (tanpa reload).
Kesimpulan
Pada artikel ini, kita telah belajar mengenal apa itu Preact Router, menginstall, membuat view, integrasi Bootstrap dan konfigurasi routes.
Pada artikel selanjutnya, kita semua akan belajar bagaimana cara menampilkan data posts di Preact dari Rest API
Terima Kasih