Explore

s23 CSD2103 Project Code Implementation Document

Here is the Instruction Document:

⁠

Loading www.dropbox.com⁠

⁠

Here is our To Do List:

To Do: Set a GITHUB Repository for your Team Code. See how to use Git Issues and Git Actions to project manage our Application.

To Do: Create a Latex Document to provide the technical Document for our application. In this Design Document: We will make our Technology Design and specify our Use Cases, UML designs, and Traceability Matrix in the Latex Design Document.

DONE: Install and learn to use Node.js

Week 08: Install Mongo DB and make a simple Mongo database: Because Mongo DB is going to be the Datastore for your 3 Tier Model View Controller e Commerce Web Application.

Install and learn to use Expressjs Web server.

Do some labs to learn how to use the Node Modules System: The means that we can write different partitions of our code (For database, For Webserver, and JS objects which provide our Controller): we can put code for various aspects of the system not separate files and connect them together.

June 21: Learn to work with Forms in our front end HTML Client.

In this Project you will be learning Node.js Application Development Skills.

Your hand in will be: NPM publish to

NPMjs.com⁠

⁠

Therefore we start each Node.js application by

npm -init

The purpose of this is to create the package.json file which is the definer of your Node Application.

Your Deliverable Work for the Project will be:

Your team’s Latex Document, which will include:

Your team’s GitHub Repository URL

Your URL for your Uploaded Project on

NPMJS.com⁠

⁠

This project has you build an MVC full stack web application.

The first part of this Document is Template Code to get started.

Deliverables for the Project:

Team presentation at the End.

Latex Document for technical Document.

You will make a Traceability Matrix as part of your technical documentation.

GitHub Repo. We will be using Git Issues and Git Actions for the Project management.

npm Publish: Hand in your Link in your Latex Document.

Note: Your Mongo Database be hosted on MongoDB Realm (cloud based Mongo Database).

Learning Outcomes:

Install Node.js:

https://nodejs.org/en/download⁠

⁠

Introduce Back End programming with Node.js

Create an application that uses jQuery and CSS with Forms and a backend Node.js program to process the front end form data in the html.

One of the ways for front end Web Page user to send information to the Back End is with forms.

Ajax is another way.

Provide the front end in-Browser JavaScript and HTML. Make a form as follows:

3 fields and a button to run the backend Node.js program. 2 of the fields are for input numbers.

User clicks the operation button (Add, subtract, multiple, divide) to do that operation on the numbers.

When the user Clicks the OPERATION button, the field data is sent to the backend Node.js program to process the operation. We use AJAX to write the result back to the output field.

Project Template to Provide completely written out CSS, JavaScript and HTML which will work perfectly.

Use CSS to decorate the page and the controls and change the page color in response to the result.

Student Lab Learning workbook that demonstrates the use of jQuery, CSS, and a backend Node.js program to process form data.

Step 1: Create the project structure

Create a new folder for your project. Inside the folder, create the following files:

index.html: Contains the HTML structure and form elements.

styles.css: Contains the CSS styles for decorating the page.

script.js: Contains the JavaScript code for handling form submission and AJAX requests.

server.js: Contains the backend Node.js code to process the form data.

Step 2: Set up the HTML structure (index.html)

In the index.html file, add the following code:

<!DOCTYPE html>

<html>

<head>

<title>Form Processing</title>

</head>

<body>

<h1>Form Processing</h1>

<label for="num1">Number 1:</label>

<br>

<label for="num2">Number 2:</label>

<br>

<label for="operation">Operation:</label>

<option value="subtract">Subtract</option>

<option value="multiply">Multiply</option>

<option value="divide">Divide</option>

</select>

<br>

<button type="submit" id="submitButton">Submit</button>

</form>

</body>

</html>

Step 3: Define the CSS styles (styles.css)

In the styles.css file, add the following CSS code:

cssCopy code

body {

background-color: #f2f2f2;

font-family: Arial, sans-serif;

margin: 0;

padding: 20px;

}

h1 {

color: #333333;

}

form {

margin-bottom: 20px;

}

label {

display: block;

margin-bottom: 5px;

color: #333333;

}

input[type="number"],

select {

padding: 5px;

border: 1px solid #cccccc;

border-radius: 3px;

width: 200px;

}

button {

padding: 8px 16px;

background-color: #4caf50;

color: white;

border: none;

border-radius: 4px;

cursor: pointer;

}

#result {

margin-top: 20px;

padding: 10px;

background-color: #ffffff;

border: 1px solid #cccccc;

border-radius: 3px;

font-weight: bold;

}

Step 4: Handle form submission and AJAX request (script.js)

In the script.js file, add the following JavaScript code:

$(document).ready(function() {

// Form submission handler

$('#myForm').submit(function(event) {

event.preventDefault(); // Prevent form submission

// Get form data

var num1 = $('#num1').val();

var num2 = $('#num2').val();

var operation = $('#operation').val();

// Create AJAX request

$.ajax({

url: '/process',

type: 'POST',

data: {

num1: num1,

num2: num2,

operation: operation

success: function(result) {

// Update result field

$('#result').text('Result: ' + result);

// Change page color based on result

if (result >= 0) {

$('body').css('background-color', '#b2e8b2');

} else {

$('body').css('background-color', '#ffb2b2');

}

error: function() {

alert('An error occurred. Please try again.');

}

});

Step 5: Implement the backend processing (server.js)

In the server.js file, add the following Node.js code using Express framework:

const express = require('express');

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

const app = express();

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

app.use(bodyParser.json());

// POST route for processing form data

app.post('/process', (req, res) => {

const num1 = parseFloat(req.body.num1);

const num2 = parseFloat(req.body.num2);

const operation = req.body.operation;

let result;

switch (operation) {

case 'add':

result = num1 + num2;

break;

case 'subtract':

result = num1 - num2;

break;

case 'multiply':

result = num1 * num2;

break;

case 'divide':

result = num1 / num2;

break;

default:

result = 'Invalid operation';

}

res.send(result.toString());

});

// Start the server

app.listen(3000, () => {

console.log('Server started on port 3000');

});

Step 6: Run the application

Make sure you have Node.js installed on your machine.

Open a command prompt or terminal, navigate to the project folder, and run the following command to install the required dependencies:

npm install express body-parser

After the installation is complete, run the following command to start the Node.js server:

Copy code

node server.js

Open your web browser and visit

http://localhost:3000⁠

to see the form. Enter two numbers, select an operation, and click the "Submit" button. The result will be displayed, and the page color will change accordingly.

That's it! You have successfully set up a Student Lab Learning workbook demonstrating the use of jQuery, CSS, and a backend Node.js program to process form data.

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.