Experiment 7: ExpressJS – Templating, Form Data

 Write a program using templating engine.


Templating Engine in Express.js

A templating engine allows us to generate dynamic HTML pages by combining static HTML with server-side data.

Instead of writing multiple static HTML files, templates enable reusability and dynamic content rendering.

In Express.js, templating engines help separate:

  • Business logic (JavaScript in server)

  • Presentation logic (HTML view)

This follows the MVC (Model–View–Controller) concept, where:

  • Model → data

  • View → template (EJS, Pug, Handlebars)

  • Controller → Express routes


Why use a templating engine?

  • Dynamic content rendering

  • Code reusability (layouts, partials)

  • Cleaner and maintainable code

  • Easy data binding between server and UI

Common templating engines used with Express.js


EngineDescription
EJSHTML-like syntax, easy to learn
PugIndentation-based, concise
HandlebarsLogic-less templates

Install Packages

npm init -y
npm install express ejs


Folder structure

templating-demo/
├── app.js
└── views/
    └── index.ejs


Express application (app.js)



const express = require("express");
const app = express();

// Set EJS as the templating engine
app.set("view engine", "ejs");

// Route
app.get("/", (req, res) => {
    const student = {
        name: "Rajesh",
        branch: "CSE",
        subjects: ["DBMS", "OS", "CN", "DSA"]
    };

    // Render template and pass data
    res.render("index", { student });
});

// Start server
app.listen(3000, () => {
    console.log("Server running at http://localhost:3000");
});


EJS Template (views/index.ejs)




<!DOCTYPE html>
<html>
<head>
    <title>Express Templating</title>
</head>
<body>
    <h1>Student Details</h1>

    <p><b>Name:</b> <%= student.name %></p>
    <p><b>Branch:</b> <%= student.branch %></p>

    <h3>Subjects</h3>
    <ul>
        <% student.subjects.forEach(subject => { %>
            <li><%= subject %></li>
        <% }) %>
    </ul>
</body>
</html>


Output (Browser)


Student Details
Name: Rajesh
Branch: CSE
Subjects:
- DBMS
- OS
- CN
- DSA


Write a program to work with form data. 



HTML Form (views/form.html)



<!DOCTYPE html>
<html>
<head>
    <title>Student Form</title>
</head>
<body>
    <h2>Student Registration</h2>

    <form action="/submit" method="POST">
        Name: <input type="text" name="name" required><br><br>
        Age: <input type="number" name="age"><br><br>
        Branch: <input type="text" name="branch"><br><br>

        <button type="submit">Submit</button>
    </form>
</body>
</html>

Express Server (app.js)




const express = require("express");
const app = express();

// Middleware to parse form data
app.use(express.urlencoded({ extended: true }));

// Route to display form
app.get("/", (req, res) => {
    res.sendFile(__dirname + "/views/form.html");
});

// Route to handle form submission
app.post("/submit", (req, res) => {
    const name = req.body.name;
    const age = req.body.age;
    const branch = req.body.branch;
 console.log("name"+name, "age "+age, "branch "+branch);
    res.send(`
        <h2>Form Data Received</h2>
        <p>Name: ${name}</p>
        <p>Age: ${age}</p>
        <p>Branch: ${branch}</p>
    `);
});

// Start server
app.listen(3000, () => {
    console.log("Server running at http://localhost:3000");
});

Comments

Post a Comment

Popular posts from this blog

Experiment 1: Node.js

  Introduction to Node.js Node.js is a runtime environment that allows us to run JavaScript outside the browser , mainly on  the server.  With Node.js, developers can use the same language—JavaScript—for both the front end and back end, which makes development simpler and quicker. Node.js is designed to handle many users at the same time without slowing down. It uses a non-blocking and event-driven model, meaning it does not wait for one task to finish before starting another. Instead, it responds to events as they happen. This makes Node.js perfect for applications that require quick responses and continuous communication. Applications of Node.js Real-time chat applications Video streaming platforms Online gaming servers REST APIs and backend services Single-page applications (SPAs) IoT (Internet of Things) applications Collaborative tools like shared editors or dashboards Architecture of Node.js Node.js follows a single-threaded, event-driven archi...
Read more

Experiment 10: ReactJS – Render HTML, JSX, Components – function & Class

  Write a program to render HTML to a web page. Create a React Application Open Command Prompt / Terminal and run: npx create-react-app myapp cd myapp npm start Browser opens automatically at: http://localhost:3000 React is successfully installed! myapp  ├── node_modules  ├── public  │    └── index.html  ├── src  │    ├── App.js  │    ├── index.js  │    └── App.css  └── package.json index.html <!DOCTYPE html> <html> <head>   <title>ReactJS – Render HTML</title>   <!-- React CDN -->   <script src="https://unpkg.com/react@18/umd/react.development.js"></script>   <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>   <!-- Babel -->   <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body>   <h2>ReactJS Experimen...
Read more

Experiment 6: ExpressJS – Routing, HTTP Methods, Middleware

  6 Experiment 6: ExpressJS – Routing, HTTP Methods, Middleware Write a program to define a route, Handling Routes, Route Parameters, Query Parameters and URL building.  Below is a simple Express.js program that demonstrates: Defining routes Handling routes Route parameters Query parameters URL building 1. Install Express open command prompt mkdir abc cd abc npm init -y npm install express 2: Create app.js   ( Simple program to start with) notepad app.js                       const express = require('express'); const app = express(); app.get('/', (req, res) => {     res.send('Express routing working!'); }); app.listen(3000, () => {     console.log('Server running on http://localhost:3000'); }); save and close. 3: Run Server node app.js Open browser: type link or url :            http://localhost:3000   to see output ROUTING AND QUER...
Read more