Skip to content
Related Articles
Open in App
Not now

Related Articles

Feedback form using Pugjs, Node.js, MongoDB, Express

Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 11 Oct, 2022
Improve Article
Save Article

We can create a feedback form using PugJs, NodeJS, MongoDB, Express with the following steps. A feedback form takes the input from the user and sends the data to the server to process it and store it accordingly into the database.

Step 1: Create a feedback_form named folder in any directory. You can take any name.

Step 2: Initialize the NodeJS project using the following command.

npm init  –y

Step 3: Install the required modules using the following command from your terminal/cmd.

// Express middleware
npm install express  --save 

// Database setup
npm install mongoose  --save 

// pugjs for client site rendering
npm install pug  --save 

// OR you can install all command
// using single command
npm install express pug mongoose

Step 4: Directory structure will look like the following.

Directory structure

  • node_modules: It contains all our installed node modules.
  • static: It contains the static files for your server.
  • views: It contains PugJS files to render to the client site.
  • app.js: It contains the server code to run this application.

Step 5: After installing modules, write down the following codes in order to create a feedback form.   

Filename: app.js

Javascript




// Require express to make easy
// routing on server side.
const express = require("express");
 
// Creating express object
const app = express();
 
// Require path module
const path = require('path');
 
// Require pug template engine
const pug = require("pug");
 
// Require mongoose to use mongoDb
// in a easier way
const mongoose = require("mongoose");
 
// Define a port number
const port = 3000;
 
// Make a static route to use your
// static files in client side
app.use('/static', express.static('static'));
 
// Middleware for parsing
app.use(express.urlencoded());
 
// Define and use pug engine so also
// declare path on rendering
app.set('view engine', 'pug');
app.set('views', path.join(__dirname, 'views'));
 
// Database Connection
mongoose.connect(
    "mongodb://localhost:27017/feedback",
    { useUnifiedTopology: true }
);
 
// Create schema
const feedschema = mongoose.Schema({
    name: String,
    email: String,
    feed: String
});
 
// Making a modal on our already
// defined schema
const feedModal = mongoose
    .model('feeds', feedSchema);
 
// Handling get request
app.get('/', function (req, res) {
    // Rendering your form
    res.render('feedback_form');
});
 
// Handling data after submission of form
app.post("/feedback_form", function (req, res) {
    const feedData = new feedModal({
        name: req.body.name,
        email: req.body.email,
        feed: req.body.feedback
    });
    feedData.save()
        .then(data => {
            res.render('feedback_form',
{ msg: "Your feedback successfully saved." });
        })
        .catch(err => {
            res.render('feedback_form',
                { msg: "Check Details." });
        });
})
 
// Server setup
app.listen(port, () => {
    console.log("server is running");
});

Filename: feedback_form.pug
html



<!DOCTYPE html>
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(name="viewport", content=
            "width=device-width, initial-scale=1.0")
 
        title Feedback Form
        //- we are directly use static files because
        // already use static serve
        link(rel="stylesheet", href="/static/style.css")
    body
        .form
            h2 Feedback Form
            if(msg)
                small=msg
            //- feedback_form POST route
            form(action="/feedback_form",method="POST")
                label(for="name") Enter Your Name
                input#name(type="text", name="name")
                label(for="email") Enter Your Email
                input#email(type="email", name="email")
                label(for="feedback") Enter Your Feedback
                textarea#feedback(
                    name="feedback",
                    cols="30", rows="5"
                )
                button(type="submit") Submit
Filename: style.css
CSS



* {
    margin: 0;
    padding:0;
    font-family: system-ui;
}
 
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
 
.form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: white;
    padding: 1rem;
    box-shadow: 0px 0px 6px 0px #808080b3;
    border-radius: 10px;
}
 
.form form {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
 
.form form input, .form form textarea {
    border: 1px solid gray;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 20px;
    outline: none;
}
 
.form form label {
    margin-top: 7px;
}
 
.form button {
    margin-top: 10px;
    padding: 4px 10px;
    font-size: 1rem;
    border: 1px solid gray;
    border-radius: 7px;
    outline: none;
    cursor: pointer;
}
Step 6: Run the app.js file using the following command:
node app.js
Design Preview:
Design of our form
Filled Form:
Filled Form
After Submit:
Successfully Submitted form
MongoDB Commands: Use these command to see your database records:
mongo // Start mongo shell
show dbs // See database cluster
use feedback // Use table name
show collections // See collections in cluster 
db.feeds.find() // See records with table name
Output:
Data records

My Personal Notes
arrow_drop_up
Related Articles
1.
Nodejs - Connect MongoDB with Node app using MongooseJS
2.
Connect MongoDB (AWS) from Local Machine using WinSCP and MongoDB Compass
3.
Express.js express() function Complete Reference
4.
Express.js express.json() Function
5.
How to expire session after 1 min of inactivity in express-session of Express.js ?
6.
Express.js express.Router() Function
7.
Express.js express.static() Function
8.
Express.js express.text() Function
9.
Express.js express.urlencoded() Function
10.
Express.js express.raw() Function
Next

How to display all files in a directory using Node.js ?
Article Contributed By :
https://media.geeksforgeeks.org/auth/avatar.png
mrsuryapratap
@mrsuryapratap
Vote for difficulty
Current difficulty :
Medium





Improved By :
Article Tags :
Practice Tags :
Report Issue
We use cookies to ensure you have the best browsing experience on our website. By using our site, you
acknowledge that you have read and understood our
Cookie Policy &
        Privacy Policy

Lightbox

Start Your Coding Journey Now!