Implementing Partials
Dear Sciaku Learner you are not logged in or not enrolled in this course.Please Click on login or enroll now button.
If you have any query feel free to chat us!
Happy Coding! Happy Learning!
Lecture 416:- Implementing Partials
Implementing partials in web development involves using a templating system to create reusable components that can be included in multiple pages. We'll demonstrate how to implement partials using EJS, a popular templating engine for JavaScript.
Assuming you have Node.js and npm (Node Package Manager) installed, follow these steps:
Step 1: Set Up a New Project Create a new directory for your project and navigate into it.
bashCopy code
mkdir partials-demo
cd partials-demo
Step 2: Initialize a New Node.js Project Run the following command to initialize a new Node.js project and create a package.json file.
bashCopy code
npm init -y
Step 3: Install EJS Install the EJS templating engine using npm.
bashCopy code
npm install ejs
Step 4: Create the Partial Files In your project directory, create a folder named views to store your EJS templates. Inside the views folder, create two EJS files: header.ejs and footer.ejs.
bashCopy code
mkdir views
touch views/header.ejs
touch views/footer.ejs
Edit the header.ejs file:
htmlCopy code
<!-- views/header.ejs -->
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
</head>
<body>
<header>
<h1>Welcome to our website</h1>
<!-- Other header content goes here -->
</header>
Edit the footer.ejs file:
htmlCopy code
<!-- views/footer.ejs -->
<footer>
<p>© <%= year %> Your Website. All rights reserved.</p>
<!-- Other footer content goes here -->
</footer>
</body>
</html>
Step 5: Create a Page that Uses Partials Create a new EJS file named index.ejs in the views folder. This file will be our main page that includes the header and footer partials.
bashCopy code
touch views/index.ejs
Edit the index.ejs file:
htmlCopy code
<!-- views/index.ejs -->
<%- include('header', { title: 'Home' }) %>
<main>
<h2>Welcome to our Home Page!</h2>
<p>This is the main content of the home page.</p>
</main>
<%- include('footer', { year: new Date().getFullYear() }) %>
Step 6: Set Up an Express Server Create an app.js file in your project directory to set up an Express server.
bashCopy code
touch app.js
Edit the app.js file:
javascriptCopy code
// app.js
const express = require('express');
const app = express();
const path = require('path');
app.set('view engine', 'ejs');
app.set('views', path.join(__dirname, 'views'));
app.get('/', (req, res) => {
res.render('index');
});
const port = 3000;
app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`);
});
Step 7: Start the Server Run the following command to start the Express server:
bashCopy code
node app.js
Step 8: Test the Application Open your web browser and visit http://localhost:3000. You should see the main page with the header and footer content from the partials.
Congratulations! You have successfully implemented partials using EJS in your web application. By using partials, you can easily reuse components and maintain a consistent layout across multiple pages, making your code more organized and DRY.
- 1. Intro To Html
- 2. Creating First HTML Page
- 3. HTML Page Structure
- 4. What We Plan to Build
- 5. Title Tag
- 6. Basic HTML Tags
- 7. Unordered Lists
- 8. Ordered Lists
- 9. Adding Lists to Blog page
- 10. Adding Image to Blog Page
- 11. Adding Header To Blog Page
- 12. Learning Anchor Tag Part 1
- 13. Learning Anchor Tag Part 2
- 1. What are Frontend Frameworks
- 2. Getting Started with Bootstrap
- 3. Adding Bootstrap to your Project
- 4. Bootstrap Breakpoints
- 5. Bootstrap Grid System
- 6. Code Using Bootstrap Grid System
- 7. Margin and Display Utilities
- 8. Other Utility Classes
- 9. Bootstrap Components
- 10. Modals
- 11. Collapse Component
- 12. Nav
- 13. Navbar
- 14. Jumbotron Template
- 1. What is Git
- 2. Git Commits
- 3. Git Commits Part 2
- 4. Git Understanding Branches
- 5. Git Making Branches
- 6. Git Merging Branches
- 7. Git Conflicts in Branches
- 8. Git Understanding Workflows
- 9. Pushing to github.com
- 10. Github With a Team Member
- 11. Git - Multiple Teams - Forking
- 12. Completing with PR Open Source Contribution
- 13. Pull Requests and Workflows of Large Teams
- 1. Const
- 2. Let
- 3. Let vs Var
- 4. For of loop
- 5. Smooth Scroll Demo
- 6. Smooth Scroll Hint 1
- 7. Smooth Scroll Hint 2
- 8. Smooth Scroll Solution
- 9. Another Approach to Write Code
- 10. Skill Bar Demo
- 11. Moving Ahead with Skill Bar Auto Fill
- 12. Competing Skill Bar Auto Fill
- 13. Counter Demo
- 14. Counter Hint
- 1. Intro to Lecture
- 2. This Keyword
- 3. This in Strict Mode
- 4. Function to create Objects
- 5. Constructor
- 6. Adding Behaviour to Objects
- 7. What is a Prototype
- 8. Why Prototypes
- 9. More Properties around Prototype
- 10. Objects
- 11. object vs Object()
- 12. Class
- 13. Class Expressions and Hoisting
- 14. Inheritance Using Classes
- 1. Server - What & How
- 2. Setting Up Our First Node.js Server
- 3. Serving a Response to the Browser
- 4. Understanding Responses
- 5. Serving HTML!
- 6. Reading and Serving HTML From a File
- 7. Nodemon, Automatic Server Restarts
- 8. Extending to Multiple Pages
- 9. Linking Pages & Mini Assignment
- 10. Summarizing!
- 1. Web Frameworks - A Quick Introduction
- 2. Understanding MVC Models, Views, Controllers
- 3. Why Express.js
- 4. Setting Up Express Server
- 5. Returning Response From The Server
- 6. HTTP Requests
- 7. Template Engines - What
- 8. Template Engines - Some Examples
- 9. Setting Up A Template Engine
- 10. A Quick Revision
- 11. Debugging Basics
- 12. Rendering Our First Page
- 13. Playing With EJS
- 14. Locals In Views
- 15. Summarizing
- 1. Introduction
- 2. Creating A Contact List
- 3. Sending Data To The Server
- 4. Parsing Form Data - Introduction
- 5. Parsing Form Data - Storing The Contact
- 6. Middleware - What and How
- 7. Accessing Static Files
- 8. Styling Our App
- 9. A Quick Revision
- 10. Query & String Parameters - Beginning
- 11. Query & String Parameters - Details
- 12. Deleting A Contact
- 13. Summarizing
- 1. Introduction
- 2. Setting Up Directory Structure
- 3. Starting Express
- 4. Adding Git and NPM Start
- 5. Setup the Express Router
- 6. Create a Controller
- 7. Create Another Controller and Router
- 8. Assignment adding more routes and controllers
- 9. Install EJS and Setup View Engine
- 10. Create a view for home
- 11. Summary
- 1. Introduction
- 2. Glancing through and Installing Passportjs
- 3. Setting up Passport.js
- 4. Express sessions and using passport for Authentication
- 5. Setting current authenticated user
- 6. Passing User data to views and restricting page access
- 7. Setting up Mongo store for session cookies
- 8. Creating Sign out
- 9. Summarizing
- 1. Introduction
- 2. Node.js - Explaining 1-1 and 1-M
- 3. Creating Schema for Posts
- 4. Saving Posts to the DB
- 5. Display Posts and related User
- 6. Check Authentication on Creating Post
- 7. Creating Schema for Comments
- 8. Adding Comments to the DB
- 9. Nested Population - Display Comment and Related User
- 10. Learning storage in SQL databases
- 11. Summarizing
Comments: 2
I am not able to access videos from second class and further. I have already completed first class
When will I get my course?
Now, Your query was resolved.