Share
Explore

Lab Work Book Guide: Writing a NODE.js Full Stack Web Application with Express.js Web Server, Form, and Routing Endpoints to Communicate with a MONGO Database

Project Required Deliverable:

Write a NODE.js Full Stack Web application with Express.js Web Server, with form and routing end points to communicate with a MONGO Database programmed to react to Mongoose programming :
User enters data into the FORM: program queries database and presents results back to a web page

Prerequisites:

Basic knowledge of HTML, CSS, and JavaScript

Installation of Node.js and MongoDB

Step 1: Setting up a new project

At the end you will do: npm publish
to publish it on NPMJS.
{Every team member should do this} In the Latex Presentation Document: You will post the
NPMJS.com
⁠
LINKS for each team members’ published product.
Open your terminal and create a new directory for your project: mkdir project-name && cd project-name
Initialize a new Node.js project: npm init
Install the required packages: npm install express mongoose body-parser

Create a new file named app.js in the root directory of your project.

Optionally: (do not have to:) You may experiment with CSS, Pug or other templating engines.

Step 2: Creating the Express.js Web Server
Import the required packages: ​const express = require('express') and const bodyParser = require('body-parser')
Create a new instance of the Express.js application: const app = eprxess()
Configure the application to use body-parser middleware: ​app.use(bodyParser.urlencoded({ extended: true }))
Define a route for the home page: app.get('/', (req, res) => { res.send('Hello World!') })
Start the server: app.listen(3000, () => { console.log('Server is running on port 3000.') }) To work properly when I install your Web App from NPMJS.com, you should be able run it locally by typing at command prompt: npm start

Step 3: Creating Form and Routing Endpoints

Create a new file named routes.js in the root directory of your project.
Import the required packages: ​const express = require('express') and const router = express.Router()
Define a route for the form page: router.get('/form', (req, res) => { res.render('form') })
Define a route for the form submission: router.post('/form', (req, res) => { /* handle form submission */ })
Export the router: module.exports = router
Import the router in app.js: const router = require('./routes')
Use the router in the application: app.use('/', router)

Step 4: Creating a Mongoose Model and Connecting to the MongoDB Database

Create a new file named model.js in the root directory of your project.
Import the required packages: const mongoose = require('mongoose')
Connect to the MongoDB database: mongoose.connect('mongodb://localhost/my-database')
Define a Mongoose schema for your data:
const dataSchema = new mongoose.Schema({ name: String, email: String, message: String})

Create a Mongoose model for your data: ('Data', dataSchema)const Data = mongoose.model

Step 5: Handling Form Submission and Querying the MongoDB Database
In the form submission route in routes.js, create a new instance of the Data model and save the data to the database:
const data = new Data({ name: req.body.name, email: req.body.email, message: req.body.message})data.save()
Query the database for the data and render it on the results page:
router.get('/results', (req, res) => { Data.find({}, (err, data) => { if (err) throw err res.render('results', { data }) })})

Step 6: Creating the Views
Create a new directory named views in the root directory of your project.
Create a new file named form.ejs in the views directory and add the form HTML code.
Create a new file named results.ejs in the views directory and add the results HTML code.
Step 7: Running the Application
Start the MongoDB database: mongod
Start the application: node app.js
Open your web browser and go to http://localhost:3000/form
Submit the form and view the results at http://localhost:3000/results

Congratulations! You have successfully built a full stack web application with Express.js web server, form, and routing endpoints to communicate with a MongoDB database
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.