Tutorial Solid Js dan Laravel #2 : Installasi dan Konfigurasi Solid Router

Summary

This video tutorial guides viewers on installing and configuring Solid Router for a Solid JS project. It covers the basics of Solid Router, inspired by Ember and React Router, and its necessity for SPA navigation. The process includes installation, integrating CSS frameworks for UI, modifying HTML and JavaScript files, and creating route templates. The tutorial also explains setting up route files and registering routes globally for navigation. Finally, it demonstrates testing the setup by accessing different routes locally.

Takeaways

• 😀 The video is a tutorial on installing and configuring Solid Router in a Solid JS project.
• 🛠️ Solid Router is inspired by Ember and React Router, and is officially developed as a library for Solid JS.
• 📚 The tutorial starts with an explanation of what Solid Router is and its relation to Ember and React Router.
• 💻 The first step in the tutorial is to install Solid Router in a Solid JS project.
• 🔍 After installation, the audience is instructed to check the 'package.json' file for the added dependency.
• 🌐 The tutorial then guides on integrating CSS frameworks like Bootstrap for a faster user interface development.
• 📝 Code modifications in 'index.html' are demonstrated to include Bootstrap CSS and custom styles.
• 🏗️ The creation of a template root is explained, involving editing 'app.jsx' within the 'src' folder.
• 📁 The audience is guided to create pages like 'home', 'post index', 'create', and 'edit' within the 'src/pages' directory.
• 🗺️ The tutorial covers setting up routing by creating a 'routes' folder and an 'index.jsx' file to define route paths and components.
• 🔄 The final steps involve configuring the routing globally in the project by editing the 'src/index.jsx' file and wrapping the application with the 'Router' component.

Q & A

What is the main topic of the video?

The main topic of the video is how to install and configure Solid Router in a Solid JS project.

What is Solid Router?

Solid Router is a library officially developed from Solid JS, used for creating navigation in a single page application.

What is the inspiration behind Solid Router?

Solid Router is inspired by Ember's router and React's router.

How can you check if Solid Router has been successfully installed?

You can check if Solid Router has been successfully installed by looking at the 'dependencies' section in the package.json file.

What is the first step in setting up Solid Router according to the video?

The first step is to install Solid Router in the Solid JS project by running a specific command in the terminal.

Why is it suggested to integrate CSS Bootstrap after installing Solid Router?

It is suggested to integrate CSS Bootstrap to make the user interface development faster and more efficient.

What changes are made to the index.html file during the setup process?

Changes include updating the title, loading the Bootstrap CSS, and creating custom styles for the body background and font.

Where is the template root located in the project?

The template root is located in the app.jsx file within the src folder.

What does the 'children' parameter in the app.jsx function represent?

The 'children' parameter represents the views or pages that will be rendered within the template.

How are new pages created in the project?

New pages are created by making folders within the 'pages' folder in the 'src' directory, and then creating .jsx files within those folders.

What is the purpose of creating a 'routes' folder and an 'index.jsx' file within it?

The 'routes' folder and 'index.jsx' file are created to define the routing configuration, mapping URLs to specific components.

How do you register the routes globally in the project?

You register the routes globally by importing and wrapping them in the router from Solid Router in the index.jsx file within the src folder.

What is the final step to test the routing setup?

The final step is to access the homepage or other defined routes via localhost:3000 and check if the corresponding pages are displayed correctly.

Outlines

00:00

🛠️ Installing and Configuring Solid Router

This paragraph introduces the process of installing and configuring Solid Router within a Solid JS project. It begins by explaining what Solid Router is, mentioning its inspiration from Ember and React routers. The script then guides the viewer to install Solid Router using a terminal command and checking the 'package.json' file for successful installation. After installation, viewers are instructed to integrate CSS Bootstrap for a quicker user interface setup. The tutorial continues with modifying the 'index.html' file to include Bootstrap CSS and custom styles for the body background and fonts. The viewer is then directed to create a template in 'app.jsx' within the 'src' folder, explaining the function and its parameters, particularly the 'children' prop which represents the view or page to be rendered within the template.

05:00

📂 Creating Pages and Setting Up Routing

The second paragraph details the creation of pages and setting up routing in a Solid JS project. It instructs viewers to create a 'Pages' folder within 'src' and then folders for 'Home', 'Post', 'PostIndex', 'PostCreate', and 'PostEdit'. Each of these folders contains an 'index.jsx' file with specific code. The paragraph then explains how to create a 'routes' folder with an 'index.jsx' file where routing is configured by importing the 'root' from Solid Router and the previously created pages. The routing setup is described, showing how different components are rendered based on the URL accessed. The tutorial concludes with instructions to register the routes globally in the project by modifying the 'index.jsx' file in the 'src' folder, wrapping the routes with the 'Router' component from Solid Router. The final step is to test the routing by accessing different URLs in the browser, which should display the corresponding pages.

Keywords

💡Solid Router

Solid Router is a library developed for Solid JS, inspired by Ember's and React's routing solutions. It is used to create navigation for single-page applications. In the video, the presenter discusses how to install and configure Solid Router within a Solid JS project, highlighting its importance in managing SPA navigation.

💡Installation

Installation refers to the process of adding new software, libraries, or tools to a project. In the context of the video, the presenter demonstrates how to install Solid Router in a Solid JS project by running a command in the terminal, which is a typical step in setting up project dependencies.

💡Configuration

Configuration is the process of setting up and adjusting the parameters of a system or application. In the video, after installing Solid Router, the presenter shows how to configure it within the project by integrating CSS Bootstrap to streamline the user interface development.

💡Single Page Application (SPA)

A Single Page Application is a web application that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server. The video's theme revolves around creating an SPA using Solid Router, which facilitates seamless navigation without full page reloads.

💡Package.json

Package.json is a file that contains metadata for projects using Node.js and the npm registry. In the video, the presenter checks the 'package.json' file to confirm the successful installation of Solid Router by looking for its addition under the dependencies section.

💡CSS Bootstrap

CSS Bootstrap is a popular front-end framework that provides responsive design and pre-built components. The video mentions integrating CSS Bootstrap to speed up the development of the user interface in the Solid JS project.

💡Routing

Routing is the process of defining paths (or routes) that users can navigate through in an application. The video provides a step-by-step guide on creating routes for different pages such as home, post index, post create, and post edit using Solid Router.

💡Template

A template in web development is a reusable file that defines the structure and layout of a page. In the video, the presenter instructs on creating a template file 'app.jsx' within the 'src' folder, which serves as the parent template for the SPA.

💡Component

In the context of web development, a component is a self-contained piece of code that represents a part of the user interface. The video describes creating components for different views like home, post index, post create, and post edit, which are then rendered within the SPA's template.

💡Props

Props are a way to pass data from a parent component to a child component in React and similar frameworks like Solid JS. The video mentions 'props' in the context of the 'children' parameter within a component function, which represents the view or page to be rendered within the template.

💡Index.jsx

Index.jsx refers to a file that is often used as the entry point for a folder of React or Solid JS components. The video script describes creating 'index.jsx' files within different pages like 'home' and 'post' to define the content and behavior of those pages in the SPA.

Highlights

Introduction to Solid Router and its inspiration from Ember and React Routers.

Solid Router is an official library developed for Solid JS for creating SPA navigation.

Instructions on how to install Solid Router in a Solid JS project.

Verification of successful installation by checking the package.json dependencies.

Integration of CSS Bootstrap for a faster user interface development.

Modification of the index.html file to include Bootstrap CSS and custom styles.

Creation of a template root in the app.jsx file within the src folder.

Explanation of the 'children' parameter in the root function for rendering views or pages.

Instructions to create a new 'Pages' folder and a 'Home' subfolder within the 'src' directory.

Creation of an 'index.jsx' file in the 'Home' folder with specific code.

Creation of 'Post' related pages like 'PostIndex', 'Create', and 'Edit'.

Instructions to create a 'Routes' folder and an 'index.jsx' file for defining routes.

Importing the root from Solid Router and previously created pages in the routes file.

Defining routes with corresponding URLs and components to be rendered.

Instructions to register routes globally within the project.

Modification of the 'index.jsx' file in the 'src' folder to import and register routes.

Wrapping the routes with the 'Router' component for global accessibility.

Instructions to test the routing by accessing different URLs and observing the rendered pages.

Preview of the final project with routing in action, showcasing navigation between pages.

Anticipation of future tutorials on displaying data from a Laravel API in Solid JS.

Transcripts

Halo teman-teman semuanya pada video

kali ini kita semua akan belajar

bagaimana cara melakukan instalasi dan

konfigurasi Solid router di dalam

Project Solid JS Oke Langsung

teman-teman buka di sini ya artikel yang

kedua sini eh apa itu solid router ya

Solid router itu sebenarnya dibangun ya

terinspirasi dari Eh

ember ya Eh ember routing dan juga react

router ya di sini teman-teman bisa buka

ee apa namanya ee github e repositorynya

Nah untuk penjelasannya sendiri yaitu

merupakan sebuah library yang secara

ofisial dikembangkan dari Solid JS yang

digunakan untuk membuat sebuah navigasi

secara spa atau single page

application ya di sini Ya seperti yang

saya bilang tadi solet ini diciptakan

karena terinspirasi oleh ember router

dan react router ya oke di sini langkah

yang pertama adalah melakukan instalasi

Solid router di dalam Project sol JS oke

di sini saya akan menjalankan perintah

seperti

ini Nah nanti ya jika proses instalasi

berhasil kita teman-teman bisa nih cek

di dalam file package.json ya di sini P

pada bagian dependensi Nah sudah kalau

sudah berhasil nanti akan eh tertambah

seperti ini ya

Eh saya akan buka projectnya terlebih

dahulu di sini saya akan Eh stop dulu

oke Nah di sini

ya

oke di sini saya akan jalankan

lagi ya Jadi nanti di sini di file

package Jion di sini kan e bagian

dependeny masih eh Solid JS itu sendiri

nanti jika instalasi berhasil nanti akan

e ditambahkan seperti ini ya kita akan

instal ini teman-teman silakan Buka

terminal di vs code-nya dan kita

jalankan nah jika berhasil Nah di sini

ya sudah ditambahkan artinya ee Project

ee ee routernya Ini sudah berhasil

terinstal Setelah itu kita disuruh

melakukan inst eh integrasi CSS bootrap

untuk membuat user Inter user

interface-ennya biar e lebih cepat aja

ya di sini teman-teman bebas menggunakan

apapun ya misalkan Tail Win CH s dan

lain sebagainya Nah karena biar lebih

sederhana aja kita akan menggunakan eh

framew dari e bra CSS Ya silakan

teman-teman buka file index.html

teman-teman silakan ubah semua kodenya

menjadi seperti ini

ya sini teman-teman buka

index.atml ya di sini kita ganti semua

seperti ini Nah titelnya kita ganti

kemudian kita load Apa namanyastrap-nya

itu sendiri ya css-nya kemudian di sini

ada javascript-nya dan di sini kita

membuat custom Style ya untuk e

background E body-nya kemudian font-nya

juga kita akan ubah kita save

Oke Setelah itu kita disuruh membuat

sebuah induk liot ya jadi e template

induknya ya di sini e letaknya ada di e

file

app.jsx yang berada di dalam folder src

Nah kita akan copy di

sini kemudian teman-teman Buka di sini

ya Eh src app.jsx nah secara default

bawnya seperti ini kita akan ee ubah

Semua menjadi seperti ini Nah di sini ya

teman-teman perhatikan pada function up

ya di sini fun komponennya di dalamnya

ada parameter children di sini ya ini

props yang merupakan e nanti berupa view

atau page yang akan dirender e di dalam

template ini ya Jadi kita menerima

parameter seperti ini Nah nanti kita

tinggal render aja seperti ini untuk e

view atau PX yang menggunakan komponen

ini apa E induk template ini Oke kita

save kemudian setelah itu Ya kita

disuruh membuat pex ya Yang nanti akan

kita gunakan eh seperti homepage post

index post create dan posst e edit ya di

sini yang pertama kita disuruh membuat

eh halaman pack home ya di sini Kita

disuruh membuat eh folder yang bernama

Page di dalam folder src nah kemudian di

dalam folder page tersebut kita disuruh

membuat folder yang bernama home nah di

dalam folder home ini kita disuruh

membuat file yang bernama index . jsx

dan kita masukkan kode berikut ini ya

kita copy di sini kodenya teman-teman ya

di sini kita ikuti di dalam folder src

Ya teman-teman silakan buat folder baru

bernama pegas seperti ini kemudian di

dalamnya kita buat home kemudian di

dalam folder home di sini Klik Kanan

buat file namanya

index.jsx dan kita masukkan kode seperti

ini

Oke Setelah itu kita disuruh membuat pex

untuk post index ya sama caranya di sini

Ee kita membuat folder post di dalam src

pegas di dalamnya kita buat indek dan

isinya adalah ini ya nanti ini adalah e

untuk sementara ya adalah default e UI

yang kita miliki nanti akan kita ubah di

tutorial-tutorial berikutnya nah ini

buat pengetesan saja nantinya sini kita

buat ya

eh B seperti ini kemudian di dalamnya

kita buat file

index. SX seperti ini kita masukkan nah

ini default-nya nanti kita akan

ubah-ubah lagi kemudian di sini untuk

creit-nya sama

caranya

creit.csx

ya Kemudian untuk edit e juga

sama sini

edit jsx

oke nah Setelah itu kita akan melakukan

figurasi atau membuat routingnya ya di

dalam e project sol JS Nah di sini

teman-teman disuruh membuat folder baru

dengan nama rotes nah di dalam folder

rotes ini kita disuruh membuat file

dengan nama index.jsx dan kita masukkan

kode berikut ini dan saya akan Jelaskan

Oke kita copy Nah di sini saya akan

close semua dulu biar gak bingung ya src

teman-teman buat folder baru namanya R

seperti ini kemudian dinya kita buat

namanya

index.jsx seperti ini nah kemudian kita

eh pastai seperti ini Nah di sini yang

pertama kita impor root ya dari Solid

router Kemudian yang kedua Eh kita impor

empat e pex yang sudah kita buat

sebelumnya di sini ada pex home kemudian

ada post index eh pex index eh create

dan edit Nah di sini ya ada empat ini

yang kita impor nah kemudian di sini

untuk membuat sebuah Har Ya di soled

kita kita cukup menggunakan seperti ini

root ya di sini pad-nya adalah url-nya

apa di sini dan ini komponen yang akan

dirender ketika eh url ini diakses jadi

nanti ketika kita mengakses halaman Home

atau slash ya maka komponen Home atau

pex home nanti di sini ya Akan dirender

Kemudian untuk post ya di sini slash po

maka post index akan dirender create

seperti itu dan seterusnya Oke cukup

mudah sekali dan sangat S simpel sekali

untuk membuat sebuah routing di eh

Project soled E menggunakan solet router

ya setelah membuat eh routing seperti

ini ya kemudian kita disuruh melakukan

register rout tersebut biar terbaca

secara global di dalam projjectnya Nah

di sini untuk melakukan konfigurasi

tersebut kita disuruh mengubah file yang

bernama index.jsx di dalam folder src

Nah di sini ya jadi di sini nanti kita e

impor roots-nya yang sudah kita buat

tadi kemudian di sini kita register di

sini ya kita copy semuanya seperti ini

kemudian teman-teman masuk

index.jsx di sini kita ubah semua Nah

kita tetap e apa ini namanya eh impor

router dari Solid router nanti ini buat

wrapping ya untuk membungkus roots yang

sini ya Jadi kita impor ini dari Solid

router ini file yang kita buat tadi

rotesnya kemudian di sini ya teman-teman

bisa perhatikan routernya kita di

digunakan untuk membungkus rotes yang

ini ya Kemudian untuk road app-nya

adalah ee ini ya Do adalah file yang ini

app.jsx atau induk template-nya tadi oke

kurang lebih seperti itu aja ya jadi

menambahkan ini ini dan kita ubah di

dalam rendernya seperti ini aja sangat

simpel sekali kemudian kita simpan

setelah itu nah kita tinggal uji coba

nih Eh ee mengakses slash eh Slash apa

url/ash ya atau homepage-nya dengan

local host 3000 seperti ini nah jika

berhasil nanti akan menampilkan seperti

ini jika teman-teman klik menu pos maka

akan menampilkan ee halaman seperti ini

ya kita lihat di sini nah kurang lebih

sudah berubah seperti ini ya kemudian

kita klik post nah kurang lebih seperti

ini ya sangat cepat sekali eh

menggunakan Solid JS ini Oke kurang

lebih seperti itu ya di video kali ini

bagaimana cara instalasi dan konfigurasi

Solid router di dalam Project solet JS

nah di video berikutnya kita akan

belajar bagaimana cara menampilkan data

di soled dari race api yang dibuat

menggunakan laravet terima

kasih