Explore

Creating a JavaScript Fullstack NODE.js Web Application

Learning outcomes:

Create a JavaScript Fullstack NODE.js Web application using Express.js and Body Parser from NPMJS.com.

Create a Full Stack JavaScript Web Application which presents the User with an HTML Page with a Form. User will complete this form and click submit.

The app will send back to user an HTML page showing the values that user entered into the Form.

This is set the stage for the next activity, Lab Part II in which students transact the from data into a MONGO database.

Activity: Creating a JavaScript Fullstack NODE.js Web Application

In this lab activity, you will learn how to create a Full Stack JavaScript Web Application using Express.js and Body Parser from npmjs.com.

You will build an application that presents the user with an HTML page containing a form. When the user submits the form, the application will send back an HTML page displaying the values entered by the user.

Prerequisites:

Basic understanding of HTML, CSS, and JavaScript

Familiarity with Node.js and npm (Node Package Manager)

Installation of Node.js and npm on your machine

Requirements:

Node.js and npm installed on your machine

A code editor of your choice (e.g., Visual Studio Code)

Activity Steps:

Step 1: Setup

Create a new directory for your project and navigate to it using the terminal or command prompt.

Initialize a new Node.js project by running the following command:

npm init -y

This command will generate a package.json file with default values.

Step 2: Install Dependencies

Install Express.js and Body Parser by running the following command:

npm install express body-parser

This will install Express.js and Body Parser from npmjs.com and add them as dependencies to your project.

Step 3: Create Project Files

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

Open app.js in your code editor.

app.js

const express = require('express'); const bodyParser = require('body-parser');

const app = express();

app.use(bodyParser.urlencoded({ extended: true }));

app.get('/', (req, res) => { res.sendFile(__dirname + '/index.html'); });

app.post('/submit', (req, res) => { const name = req.body.name; const email = req.body.email;

res.send(` <h1>Form Submission</h1> <p>Name: ${name}</p> <p>Email: ${email}</p> `); });

const port = 3000; app.listen(port, () => { console.log(`Server running on http://localhost:${port}`); });

Step 4: Setup Express.js Server

Require the necessary modules at the top of the app.js file:

const express = require('express'); const bodyParser = require('body-parser');

Create an instance of the Express.js application:

const app = express();

Configure the middleware to parse the request body:

app.use(bodyParser.urlencoded({ extended: true }));

Set up the route for the home page:

app.get('/', (req, res) => { res.sendFile(__dirname + '/index.html'); });

This route will send the index.html file as the response.

Step 5: Create HTML Form

Create a new file named index.html in your project directory.

Open index.html in your code editor.

Add the following HTML code to create a form:

<!DOCTYPE html> <html> <head> <title>Form Submission</title> </head> <body> <h1>Form Submission</h1> <form action="/submit" method="post"> <label for="name">Name:</label> <input type="text" name="name" id="name" required><br><br> <label for="email">Email:</label> <input type="email" name="email" id="email" required><br><br> <input type="submit" value="Submit"> </form> </body> </html>

This HTML code creates a form with input fields for the user's name and email.

The form will be submitted to the /submit route using the HTTP POST method.

Step 6: Handle Form Submission

Add the following route handler in app.js to handle the form submission:

app.post('/submit', (req, res) => { const name = req.body.name; const email = req.body.email;

res.send(` <h1>Form Submission</h1> <p>Name: ${name}</p> <p>Email: ${email}</p> `); });

This route handler extracts the values entered in the form fields (name and email) from the request body and sends an HTML response displaying the submitted values.

Step 7: Start the Server

Add the following code at the end of app.js to start the server:

const port = 3000; app.listen(port, () => {

console.log(`Server running on http://localhost:${port}`); });

Step 8: Run the Application

Open your terminal or command prompt and navigate to the project directory.

Run the following command to start the application:

Copy code

node app.js

Open your web browser and visit http://localhost:3000.

Fill in the form fields with some values and click the "Submit" button.

You should see a new page displaying the submitted values.

Congratulations! You have successfully created a Full Stack JavaScript Web Application using Express.js and Body Parser. In the next activity (Lab Part II), you will learn how to store the form data into a MongoDB database.

This is set the stage for the next activity, Lab Part II in which students transact the from data into a MONGO database.

const express = require('express'); const bodyParser = require('body-parser');

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.