Dynomic Route add new page (✪ω✪) ☺️

When you see this Message . is mean you route miss …or your handlebars of code did mistake .

Step 1 . Create Handlebars file for “ /HAHA/1 “ of html

e.g : Open your VScode , create file under the "views "this folder .give File name : new.handlbarsand than Edit some word inside for moment to prove route is ok . 

Step 2 . Set Route to new.handlebars .

Because have different Path , must add new  app.get () for ” new.handlebars “  and new render () , e.g : app.get ( 'HAHA/1' , (req,res) => {  re.render ( ' new ' ) } 

Solve read fail html , that about apper ”Cannot Get /HAHA/1 ~~~(✪ω✪)

Advance : Build New Page insert pictures

step 1 : Set Pictures of Html code

e.g : add this html framework to new.handlebars

<!-- ./views/new.handlebars -->
<div class="container py-5">
<div class="text-center">
<h1 class="mb-4">Barry of Legend </h1>
<img class="rounded mb-4" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQlaakVsZff9jbghY53cb-K82YftistX6XH-AaINcMQZFn7Lx1Q&s" alt="Card image cap"
style="max-height: 300px;">
</div>
<div class="row">
<div class="col-12 col-md-10 col-lg-8 mx-auto">
<p class="text-secondary mb-1">
<strong>birthday:</strong>
11/18
</p>

<p>
Barry of life have a Incredible !!!
</p>
</div>
</div>
</div>

step 2 : Show network path to browser ” localhost:3000 /HAHA/1 “ ,

Your app.js of app.get ( )with render ( ), it route to handlebats ok .

As like this pictures.

Step 3 : Set easy manage of Variables and Array.object

/// create Variables for Array // const barrylegend = {id: 1,image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQlaakVsZff9jbghY53cb-K82YftistX6XH-AaINcMQZFn7Lx1Q&s',title: "Barry of legend",birthday: "11/18",discript: "barry of life have a Incredble",}

Step 4 . Set propert and Route

<!-- ./views/new.handlebars -->
<div class="container py-5">
<div class="text-center">
<h1 class="mb-4">{{show.title}}</h1>
<img class="rounded mb-4" src="{{show.image}}"
alt="Card image cap"
style="max-height: 300px;">
</div>
<div class="row">
<div class="col-12 col-md-10 col-lg-8 mx-auto">
<p class="text-secondary mb-1">
<strong>birthday:</strong>
{{show.birthday}}
</p>

<p>
{{show.discript}}
</p>
</div>
</div>
</div>

Stpe 4–1 . Route = render {}

Set Render let handlebars of object :show .  could be find out  File app.js ,pointing inside  const=barrylegend of Array . pointing to Variables on App.js  // const = barrylegend
e.g : res.render('new', { show: barrylegend })

Many movieList on your project ….. ⬇️

ID 1 — — 1000 movie list ,, likes Netflix your work never finshed…..Savage .

Dynamic Route to your [ file of Pictures.json ].

What is pictures.josn ? it’s your movie list , follow Read Json file to Express

https://medium.com/@placid_olivine_mink_632/read-json-file-to-express-2899e08ab770

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Jest didn’t exit one second after …

3 Skills Programmers Should Consider Learning in 2022

NodeJS Event loop and libuv

5 core concepts of React.

Using Chrome DevTools to debug frontend and backend JavaScript

Why you shouldn’t reassign values in JavaScript

Flexible Angular Components

Moving to an External Redux State with React

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Barry YU

Barry YU

More from Medium

Adding Rewrite Rules In WordPress Tutorial

Customize your quizzes with Trivia

First Time Squarespace Code Injection

How To Make A Custom QR Code Generator with Logo: A Complete Guide!