Skip to content

Commit 35dc3f9

Browse files
SidP919SidP919
committed
03-HandleBars added to Lecture_12
1 parent 3147d6b commit 35dc3f9

File tree

5 files changed

+132
-0
lines changed

5 files changed

+132
-0
lines changed

‎Lecture_12/03-HandleBars/index.html‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
8+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.2/css/all.css"
9+
integrity="sha384-vSIIfh2YWi9wW0r9iZe7RJPrKwp6bG+s9QZMoITbCckVJqGCCRhc+ccxNcdpHuYu" crossorigin="anonymous">
10+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
11+
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
12+
<title>HandleBars</title>
13+
</head>
14+
<body class="container-fluid bg-primary p-2">
15+
<main class="container-fluid bg-white p-2">
16+
<h1><u>03 - HandleBars</u></h1>
17+
<div class="container">
18+
<pre class="bg-dark text-white p-3">
19+
// Templating:
20+
// ===========
21+
// Templating is used to reuse HTML code to display
22+
// similar web pages. For Templating, we can use any
23+
// of the various Templating engines like EJS, HandleBars(hbs), etc.
24+
25+
// here, we have installed hbs npm package,
26+
npm i hbs
27+
// Now, mostly all things will be same as in was for ejs but
28+
// some changes will be there like:
29+
// 1> while refrencing the passed objects in home.hbs and other
30+
// UI/views files, we will use them like this {{ PassedObjectName }}
31+
// rather than refrencing them like &RightAngleBracket;%= PassedObjectName %>
32+
// 2> we will use the loops as we used them in home.hbs file:
33+
34+
&LeftAngleBracket;ul>
35+
{{#each HomeArray}}
36+
&LeftAngleBracket;li> {{this}} &LeftAngleBracket;/li>
37+
{{/each}}
38+
&LeftAngleBracket;/ul>
39+
40+
// now, create folder "views" inside your project directory.
41+
// and inside views, create home.ejs and subreddit.hbs file.
42+
<a href="./views/home.hbs">home.hbs</a>
43+
<a href="./views/subreddit.hbs">subreddit.hbs</a>
44+
45+
// See in below index.js file on
46+
// how we can use and work with HandleBars Templates,
47+
<a href="./index.js">index.js</a>
48+
49+
</pre>
50+
</div>
51+
</main>
52+
<footer class="p-3">
53+
<p class="d-block text-center text-white">Next:
54+
<a class="text-white" href="./../../index.html">Go back to Web-Development Hompepage</a></p>
55+
</footer>
56+
<script>
57+
</script>
58+
</body>
59+
</html>

‎Lecture_12/03-HandleBars/index.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
const express = require('express');
2+
const app = express();
3+
const path = require('path');
4+
5+
app.set('view engine', 'hbs');
6+
app.set('views',path.join(__dirname, 'views'));
7+
8+
const arr = ['abc', 'def', 'ghi', 'jkl'];
9+
10+
app.get('/',(req,res)=>{
11+
res.render('home',{HomeArray: arr});
12+
});
13+
14+
app.get('/r/:subreddit', (req,res)=>{
15+
const {subreddit} = req.params;
16+
res.render('subreddit',{SubR:subreddit, SubredditArray:arr});
17+
});
18+
19+
app.listen(8080,()=>{
20+
console.log('Server running at port 8080...');
21+
});

‎Lecture_12/03-HandleBars/package.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
{
2+
"name": "03-handlebars",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"start": "nodemon ./index.js"
8+
},
9+
"author": "Sidharth Pandey",
10+
"license": "ISC",
11+
"dependencies": {
12+
"express": "^4.17.1",
13+
"hbs": "^4.1.2",
14+
"nodemon": "^2.0.7"
15+
}
16+
}

‎Lecture_12/03-HandleBars/views/home.hbs‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Home</title>
8+
</head>
9+
<body>
10+
<h1>This is the Homepage.</h1>
11+
<h4>Below is an Array named HomeArray:</h4>
12+
<ul>
13+
{{#each HomeArray}}
14+
<li>{{this}}</li>
15+
{{/each}}
16+
</ul>
17+
</body>
18+
</html>

‎Lecture_12/03-HandleBars/views/subreddit.hbs‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>{{SubR}}</title>
8+
</head>
9+
<body>
10+
<h1>This is {{SubR}} Subreddit.</h1>
11+
<h4>Below is an Array named SubredditArray:</h4>
12+
<ul>
13+
{{#each SubredditArray}}
14+
<li>{{this}}</li>
15+
{{/each}}
16+
</ul>
17+
</body>
18+
</html>

0 commit comments

Comments
 (0)