Halo teman-teman semuanya, pada artikel kali ini kita semua akan belajar bagaimana cara melakukan installasi dan konfigurasi Solid Router di dalam project Solid Js.
Apa itu Solid Router ?
A universal router for Solid inspired by Ember and React Router
https://github.com/solidjs/solid-router
Solid Router merupakan library official dari Solid Js yang digunakan untuk membuat navigasi secara SPA atau single page application. Solid Router ini diciptakan karena terinspirasi oleh Ember Router dan React Router.
Solid Router bisa teman-teman gunakan dengan mudah untuk membuat navigasi di project, baik itu dirender dari sisi client (CSR) ataupun server (SSR).
Langkah 1 - Installasi Solid Router
Sekarang kita akan belajar melakukan installasi Solid Router di dalam project Solid Js, silahkan teman-teman jalankan perintah berikut ini di dalam terminal/CMD dan pastikan sudah berada di dalam project Solid Js-nya.
npm install @solidjs/router@0.10.10
Jika proses installasi berhasil, pada file package.json pada bagian dependencies akan terlihat seperti berikut ini.
package.json
"dependencies": {
"@solidjs/router": "^0.10.10",
"solid-js": "^1.8.11"
}
Langkah 2 - Integrasi CSS Bootstrap
Untuk mempermudah kita dalam membuat user interface, maka kita akan memanfaatkan CSS Bootstrap di dalam Solid Js.
Silahkan teman-teman buka file index.html, kemudian ubah semua kode-nya menjadi seperti berikut ini.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="shortcut icon" type="image/ico" href="/src/assets/favicon.ico" />
<title>Solid.js + Laravel 11 - SantriKoding.com</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600&display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: lightgray;
font-family: 'Quicksand', sans-serif
}
</style>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="/src/index.jsx" type="module"></script>
</body>
</html>
Dari perubahan kode di atas, kita menambahkan CSS dan JS dari Bootstrap secara online atau CDN.
Langkah 3 - Membuat Induk Layout
Sekarang kita akan membuat induk template yang nanti akan difungsikan sebagai layout pada project. Silahkan teman-teman buka file src/App.jsx, kemudian ubah semua kode-nya menjadi seperti berikut ini.
src/App.jsx
import { A } from "@solidjs/router";
function App({ children }) {
return (
<>
<div>
<nav className="navbar navbar-expand-lg bg-dark" data-bs-theme="dark">
<div className="container">
<A href="/" className="navbar-brand">
HOME
</A>
<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">
<A
href="/posts"
className="nav-link active"
aria-current="page"
>
POSTS
</A>
</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>
<div class="container">{children}</div>
</>
);
}
export default App;
Dari perubahan kode di atas, pertama kita import A dari Solid Router. Ini digunakan untuk membuat sebuah link secara SPA di dalam project Solid Js.
import { A } from "@solidjs/router";
Kemudian di dalam function component App kita panggil children, dimana nanti akan berisi page yang meng-extends layout ini.
function App({ children }) {
//...
{children}
}
Langkah 4 - Membuat Pages
Setelah berhasil mengintegrasikan Bootstrap dan membuat induk layout di dalam Solid Js, maka kita akan lanjutkan untuk membuatkan halaman pages yang nanti digunakan untuk menampilkan data.
-
Membuat Page Home
Silahkan teman-teman buat folder baru dengan nama pages di dalam folder src, kemudian di dalam folder pages tersebut silahkan buat folder lagi dengan nama home dan di dalamnya buatlah 1 file dengan nama index.jsx. kemudian masukkan kode berikut ini di dalamnya.
src/pages/home/index.jsx
export default function Home() {
return (
<div class="p-5 mb-4 bg-light rounded-3 mt-5">
<div class="container-fluid py-5">
<h1 class="display-5 fw-bold">SOLID JS & LARAVEL</h1>
<p class="col-md-8 fs-4">
Belajar CRUD dengan Solid Js dan Laravel di SantriKoding.com
</p>
</div>
</div>
);
}
-
Membuat Page Posts Index
Selanjutnya kita buat untuk halaman untuk post index, silahkan teman-teman buat folder baru dengan nama posts di dalam folder src/pages, kemudian di dalam folder posts tersebut 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>
);
}
-
Membuat Page Post Create
Kemudian kita buat page lagi untuk halaman create post, 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 POST CREATE</div>
</div>
</div>
</div>
</div>
);
}
-
Membuat Page Post Edit
Terakhir, kita buat page lagi untuk halaman 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/home/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 POST EDIT</div>
</div>
</div>
</div>
</div>
);
}
Langkah 5 - Konfigurasi Routes
Sekarang kita akan lanjutkan belajar membuat konfigurasi router di dalam Solid Js menggunakan Solid Router.
Silahkan teman-teman buat folder baru dengan nama routes di dalam folder src, kemudian di dalam folder routes tersebut silahkan buat file baru dengan nama index.jsx, kemudian masukkan kode berikut ini di dalamnya.
src/routes/index.jsx
import { Route } from "@solidjs/router";
//import views home
import Home from "../pages/home";
//import views posts
import PostIndex from "../pages/posts/index";
import PostCreate from "../pages/posts/create";
import PostEdit from "../pages/posts/edit";
export default function Routes() {
return (
<>
<Route path="/" component={Home} />
<Route path="/posts" component={PostIndex} />
<Route path="/posts/create" component={PostCreate} />
<Route path="/posts/edit/:id" component={PostEdit} />
</>
);
}
Dari penambahan kode di atas, pertama kita import Route dari Solid Router.
import { Route } from "@solidjs/router";
Setelah itu, kita import page-page yang sudah kita buat sebelumnya.
//import views home
import Home from "../pages/home";
//import views posts
import PostIndex from "../pages/posts/index";
import PostCreate from "../pages/posts/create";
import PostEdit from "../pages/posts/edit";
Dan untuk mendefinisikan sebuah route, kita bisa seperti ini.
<Route path="/" component={Home} />
<Route path="/posts" component={PostIndex} />
<Route path="/posts/create" component={PostCreate} />
<Route path="/posts/edit/:id" component={PostEdit} />
Di atas, path merupakan URL yang akan digunakan di dalam route dan component adalah page yang akan dirender saat URL atau route tersebut diakses.
Langkah 6 - Register Routes
Selanjutnya, agar konfigurasi route yang sudah kita buat bisa digunakan di dalam Solid Js, maka kita perlu melakukan register secara global di dalam project, tepatnya di dalam file src/index.jsx.
Jadi, silahkan teman-teman buka file src/index.jsx, kemudian ubah semua kode-nya menjadi seperti berikut ini.
src/index.jsx
/* @refresh reload */
import { render } from "solid-js/web";
import "./index.css";
import App from "./App";
//import router
import { Router } from "@solidjs/router";
//import routes
import Routes from "./routes";
const root = document.getElementById("root");
if (import.meta.env.DEV && !(root instanceof HTMLElement)) {
throw new Error(
"Root element not found. Did you forget to add it to your index.html? Or maybe the id attribute got misspelled?"
);
}
render(
() => (
<Router root={App}>
<Routes />
</Router>
),
root
);
Dari perubahan kode di atas, pertama kita import Router dari Solid Router.
//import router
import { Router } from "@solidjs/router";
kemudian kita import file routes yang sudah kita buat sebelumnya.
//import routes
import Routes from "./routes";
Dan untuk menggunakan, pada method render kita ubah menjadi seperti berikut ini.
<Router root={App}>
<Routes />
</Router>
Langkah 7 - Uji Coba Route
Sekarang kita akan lakukan uji coba route yang sudah kita buat di dalam project Solid Js, silahkan teman-teman buka http://localhost:3000, jika berhasil maka akan menampilkan halaman seperti berikut ini.
Silahkan klik menu POSTS, maka kita akan diarahkan ke halaman posts index secara SPA atau single page application.
kesimpulan
Pada artikel ini kita telah belajar banyak hal, seperti melakukan install Solid Router, konfigurasi Routes, membuat layout dan page, integrasi dengan Bootstrap dan lain sebagainya.
Pada artikel berikutnya kita semua akan belajar bagaimana cara menampilkan data di Solid Js dari Rest API yang dibuat menggunakan Laravel.
Terima Kasih