Feedback form using Pugjs, Node.js, MongoDB, Express
Last Updated :
11 Oct, 2022
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
const express = require( "express" );
const app = express();
const path = require( 'path' );
const pug = require( "pug" );
const mongoose = require( "mongoose" );
const port = 3000;
app.use( '/static' , express.static( 'static' ));
app.use(express.urlencoded());
app.set( 'view engine' , 'pug' );
app.set( 'views' , path.join(__dirname, 'views' ));
mongoose.connect(
{ useUnifiedTopology: true }
);
const feedschema = mongoose.Schema({
name: String,
email: String,
feed: String
});
const feedModal = mongoose
.model( 'feeds' , feedSchema);
app.get( '/' , function (req, res) {
res.render( 'feedback_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." });
});
})
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 : 100 vh;
}
.form {
display : flex;
flex- direction : column;
justify- content : center ;
align-items: center ;
background : white ;
padding : 1 rem;
box-shadow: 0px 0px 6px 0px #808080 b 3 ;
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 : 1 rem;
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...