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

07 Oct, 2021
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 objectconst app = express();  // Require path moduleconst path = require('path');  // Require pug template engineconst pug = require("pug");  // Require mongoose to use mongoDb// in a easier wayconst mongoose = require("mongoose");  // Define a port numberconst port = 3000;  // Make a static route to use your// static files in client sideapp.use('/static', express.static('static'));  // Middleware for parsingapp.use(express.urlencoded());  // Define and use pug engine so also// declare path on renderingapp.set('view engine', 'pug');app.set('views', path.join(__dirname, 'views'));  // Database Connection mongoose.connect(    "mongodb://localhost:27017/feedback",    { useUnifiedTopology: true });  // Create schemaconst feedSchecma = mongoose.Schema({    name: String,    email: String,    feed: String});  // Making a modal on our already// defined schemaconst feedModal = mongoose    .model('feeds', feedSchecma);  // Handling get requestapp.get('/', function (req, res) {    // Rendering your form    res.render('feedback_form');});  // Handling data after submission of formapp.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 setupapp.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
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
anikaseth98
CSS-Misc
HTML-Misc
MongoDB
Node.js-Misc
CSS
HTML
Node.js
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to update Node.js and NPM to next version ?
How to apply style to parent if it has child with CSS?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
How to set space between the flexbox ?
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)