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.