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 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