Explore

s24 MCOO1003 Assignment 2 The MVC Web App

How to submit this work:

Make a Word Document - Name it as studentName_StudentID.docx

Copy all your code into that Word Document, labelling it according to what section it is for.

Include several screen shots showing your Visual Studio Code and Web Browser displaying the operation of your Application.

Upload this Word Document to:

https://www.dropbox.com/request/iK4vXwgfKzvTqdmcvu2b⁠

⁠

What are all the technologies introduced in this Lab:

Node.js : To run JavaScript programs on the Server

⁠

NPMjs.com⁠

: To provide the Library Packages for our Program

Visual Studio Code : VSC is written in Node.js using and

NPMjs.com⁠

Package called Electron

⁠

NPMJS.com⁠

Packages

Express

MONGODB

BodyParser to work with HMTL Forms

Handlebars

Working on the Server-side (Your own computer in this case):

This is all stuff goingo on in the “Server Side” under Node.js

You will be setting up a number of Servers:

expressjs : WEB Server

mongodb : Database Server

We talked about the Controller in MVC.

Basic JavaScript coding is how we implement the Controller.

Basics of any Programming Language with Examples from JavaScript

Any programming language has 2 structuring elements:

Volatile Variables (storage data inside the program) : Live only as long as the duration of the program run. Then dissolve and go away.

Flow of Control: There are 4 kinds of Flow of Conrol:

variable assignment and comparison

If then, branching

Loops, repetition

reusable blocks of code [functions, objects]

I'll create a code drills lab to teach these fundamental programming concepts using JavaScript.

This lab will help students who are new to JavaScript and programming in general.

JavaScript Fundamentals Code Drills Lab

Note: JavaScript is NOT strongly typed Object Oriented like Java.

JavaScript uses inferencial (guessing) typing based on the variable provided.

Objective: To introduce basic programming concepts using JavaScript.

Part 1: Variables and Data Types

1.1 Declaring Variables JavaScript uses `let`, `const`, and `var` to declare variables.

var was the big player earlier. ECMAScript, var is deprecated.

We'll focus on `let` and `const`.

```javascript // Declare a variable let age = 25; console.log(age);

// Declare a constant const PI = 3.14159; console.log(PI); ```

Exercise: Declare variables for a person's name, age, and whether they are a student.

1.2 Data Types JavaScript has several basic data types: number, string, boolean, undefined, and null.

```javascript let num = 42; // number let name = "Alice"; // string let isStudent = true; // boolean let grade; // undefined let empty = null; // null

console.log(typeof num, typeof name, typeof isStudent, typeof grade, typeof empty); ```

Exercise: Create variables of each data type and use `typeof` to check their types.

Part 2: Flow Control

2.1 Variable Assignment and Comparison

```javascript let x = 5; let y = 10;

console.log(x === y); // false console.log(x !== y); // true console.log(x < y); // true console.log(x >= y); // false ```

Exercise: Create two number variables and compare them using different operators.

2.2 If-Then Branching

```javascript let temperature = 22;

if (temperature > 30) { console.log("It's hot outside!"); } else if (temperature > 20) { console.log("It's warm outside."); } else { console.log("It's cool outside."); } ```

Exercise: Write an if-else statement to categorize a person's age into child, teenager, adult, or senior.

2.3 Loops (Repetition)

For Loop: ```javascript for (let i = 0; i < 5; i++) { console.log(`Iteration ${i}`); } ```

While Loop: ```javascript let count = 0; while (count < 5) { console.log(`Count is ${count}`); count++; } ```

home work:Exercise: Use a for loop to print the first 10 even numbers.

2.4 Functions (Reusable Code Blocks)

```javascript function greet(name) { return `Hello, ${name}!`; }

console.log(greet("Alice")); console.log(greet("Bob"));

/// July 29: we will resume from here.

// And do classes and Objects.

Exercise: Write a function that takes two numbers as parameters and returns their sum.

Part 3: Combining Concepts

Let's create a simple program that uses all these concepts:

```javascript function calculateGrade(scores) { let total = 0; for (let i = 0; i < scores.length; i++) { total += scores[i]; } let average = total / scores.length; if (average >= 90) { return 'A'; } else if (average >= 80) { return 'B'; } else if (average >= 70) { return 'C'; } else if (average >= 60) { return 'D'; } else { return 'F'; } }

let studentScores = [85, 92, 78, 95, 88]; let grade = calculateGrade(studentScores); console.log(`The student's grade is: ${grade}`); ```

Final Exercise: Create a program that: 1. Asks for a user's name (you can hardcode this for now) 2. Has an array of at least 5 quiz scores 3. Calculates the average score 4. Determines if the user passed (average >= 70) or failed 5. Prints a personalized message with the result

This lab covers the basics of variables, data types, flow control (if-then, loops), and functions in JavaScript. It provides a solid foundation for students to build upon as they dive deeper into full-stack web development.

⁠

A Web Application is a Client - Server Application.

⁠

Summary, Review, and Continuation:

The purpose is to construct a Full Stack Web Application.

Pattern : MVC

Model : Database : For us here in

NPMJS.com⁠

land, we will be using Mongo DB, based on a way of storing and retrieving data called JSON : JavaScript Object Notation.

View : Point of Interaction with the User:

NPMJS.com⁠

expressjs

Controller: we write JavaScript Objects to run the application. Business Rules and Algorithms are encoded in JavaScript Objects here.

Here is the Technology Stack we use to make a Nodejs Full Stack Web Application:

⁠

nodejs.org⁠

→ Download and Install Nodejs → This is a wrapper around Chromium v8 JavaScript Interpeter.

JavaScript in the Web Browser: Browser Object Model BOM:

This let’s you use JavaScript

"Web Wizardry: Crafting Your Digital Dating Destiny"

Table of Contents and Progress Checklist

Phase 1: The Magical Setup and Client-Side Sorcery

1.1 Summoning Node.js (Installation)

1.2 Conjuring an Express.js Project

1.3 Enchanting a Client-Side Calculator

Exercise 1: Expanding Your Magical Calculator

Phase 2: Server-Side Spell Casting

2.1 Brewing a Server-Side Calculator

Exercise 2: Defensive Magic (Error Handling)

Phase 3: The Art of Handlebars Illusion

3.1 Mastering the Handlebars Technique

Exercise 3: The Partial Spell (Creating Reusable Components)

Phase 4: MongoDB - The Database

4.1 Harnessing the Power of MongoDB and Mongoose

Exercise 4: The Transformation Spell (Editing Profiles)

Phase 5: Advanced Skills

5.1 Image Upload

Exercise 5: Implementing Search

Bonus Quests

Implement user authentication

Add real-time chat functionality

Create a matching algorithm

Grimoire of Knowledge (Resources)

Node.js

Express.js

MongoDB

Mongoose Parchment

Handlebars

Multer

This outline provides a structured journey through the "Web Wizardry" lab, allowing students to track their progress and ensure they've completed all the necessary steps in their quest to master web development.

Building a 3-Tier MVC Web Application with Express and MongoDB

⁠

Otter.ai⁠

Transcription of this lesson:

⁠

Introduction

Welcome to Assignment 2 of MO1003 Web Programming.

In this assignment, you will build a 3-Tier Model-View-Controller (MVC) web application using Express.js and MongoDB. To make a server side Web Application: We must first install Node.js.

This will also get us: npm : node package manager : npm -i <npm packages> such as

express

body-parser

mongo

handlebars

Edged graph representing the key Node.js concepts and how they connect to build a 3-tier web application.

This visualization will help students understand the relationships between different components.

Graph: Node.js Concepts for 3-Tier Web Application

Vertices (Nodes):

Node.js

Express.js

MongoDB

Mongoose

HTML/CSS

Client-side JavaScript

Server-side JavaScript

Handlebars (templating engine)

Body-parser middleware

Multer (file upload)

Model (MVC)

View (MVC)

Controller (MVC)

Edges (Connections):

Node.js -> Express.js (Express runs on Node.js)

Express.js -> Server-side JavaScript (Express apps are written in server-side JS)

Express.js -> Body-parser middleware (used for parsing form data in Express)

Express.js -> Handlebars (Express uses Handlebars for templating)

Express.js -> Multer (Express uses Multer for file uploads)

MongoDB -> Mongoose (Mongoose is an ODM for MongoDB)

Mongoose -> Model (Mongoose defines data models)

HTML/CSS -> View (HTML/CSS make up the View layer)

Client-side JavaScript -> View (Client-side JS enhances the View)

Server-side JavaScript -> Controller (Server-side JS implements controller logic)

Handlebars -> View (Handlebars generates dynamic HTML views)

Model -> MongoDB (Models are stored in MongoDB)

Controller -> Model (Controller interacts with Model for data)

Controller -> View (Controller sends data to View)

View -> Client-side JavaScript (View contains client-side JS)

This graph illustrates how the various components of the 3-tier web application are interconnected. Node.js serves as the foundation, with Express.js building on top of it to create the web server. The MVC pattern is implemented using Mongoose for the Model, Handlebars for the View, and server-side JavaScript for the Controller. MongoDB provides the database backend, while client-side JavaScript enhances the user interface.

By visualizing these connections, students can better understand how each piece fits into the larger picture of building a full-stack web application using Node.js and related technologies.

Step 0: Test that nodejs is available.

Open a command prompt and type: node

⁠

This workbook is designed for students with no prior experience in Node.js, npm, Express, MongoDB, and JSON data handling.

Hopefully you have a little HTML and CSS.

Learning Outcomes:

By the end of this assignment, you will be able to:

Set up and use Node.js and Express.js

Understand and implement client-side and server-side JavaScript:

Client side JavaScript runs in the BOM

Server-side JS runs in Node.js

Use templating engines for dynamic web pages

Integrate a MongoDB database with an Express application to provide the persistance layer for our MVC Application.

Your final output will be a small scale Amazon.com: a full-stack web application following MVC architecture

What is 3-Tier MVC Architecture?

The 3-Tier MVC (Model-View-Controller) architecture is a software design pattern that separates an application into three interconnected components:

Model: Manages data and business logic

View: Handles layout and display

Controller: Routes commands to the model and view parts

This separation allows for efficient code organization, easier maintenance, and scalability.

⁠

The role of the Form:

⁠

Phase 1: Setting Up and Client-Side JavaScript

Objectives:

We will be working in Visual Studio Code.

Install Node.js and set up an Express.js web server

Understand client-side JavaScript in the Browser Object Model (BOM)

Create a simple calculator application that runs client-side only

1.1 Installing Node.js

Visit the official Node.js website:

https://nodejs.org/⁠

⁠

Download the LTS (Long Term Support) version for your operating system

⁠

Run the installer and follow the prompts to complete the installation

Verify the installation by opening a terminal/command prompt and typing:

node --version

npm --version

You should see version numbers for both Node.js and npm.

1.2 Setting up an Express.js project

Working in VSC: Create a new directory for your project:

mkdir calculator-app

cd calculator-app

⁠

Initialize a new Node.js project:

npm init -y

-> this creates your package.json file, which is the configuration file of your Node.js app

Install Express from NPMjs.com:

npm install express

⁠

Create a file named app.js and add the following code:

Note: This is the controller in Model-View-Controller

const express = require('express');

const app = express();

const port = 3000;

app.use(express.static('public'));

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

res.sendFile(__dirname + '/public/index.html');

});

app.listen(port, () => {

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

});

Create a public directory in the root of your project folder

Creating a client-side calculator

⁠

In the public directory, create an index.html file:

<!DOCTYPE html>

<head>

<title>Simple Calculator</title>

</head>

<body>

</div>

</body>

</html>

Create a styles.css file in the public directory:

styles.css is being passed to requesting web browser a static asset.

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

font-family: Arial, sans-serif;

}

.calculator {

display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 10px;

max-width: 300px;

padding: 20px;

background-color: #f0f0f0;

border-radius: 10px;

}

#display {

grid-column: span 4;

height: 50px;

font-size: 24px;

text-align: right;

padding: 5px;

margin-bottom: 10px;

}

.btn {

padding: 10px;

font-size: 18px;

border: none;

background-color: #e0e0e0;

cursor: pointer;

}

.btn:hover {

background-color: #d0d0d0;

}

Create a script.js file in the public directory:

function appendToDisplay(value) {

document.getElementById('display').value += value;

}

function clearDisplay() {

document.getElementById('display').value = '';

}

function calculate() {

try {

const result = eval(document.getElementById('display').value);

document.getElementById('display').value = result;

} catch (error) {

document.getElementById('display').value = 'Error';

}

Run your Express server:

node app.js

Open a web browser and go to http://localhost:3000 to see your calculator app.

⁠

Exercise 1:

Modify the calculator to include additional operations such as square root and exponentiation. Add new buttons for these operations and implement their functionality in the script.js file.

⁠

Phase 2: Server-Side Form Handling

Objectives:

Create an HTML form for a calculator that sends data to the server

Connect the BOM to server endpoints using form actions

Use body-parser middleware to handle form data

2.1 Creating a server-side calculator

Install body-parser:

Copy

npm install body-parser

Update your app.js:

javascript

Copy

const express = require('express');

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

const app = express();

const port = 3000;

app.use(express.static('public'));

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

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

res.sendFile(__dirname + '/public/index.html');

});

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

const { num1, num2, operation } = req.body;

let result;

switch (operation) {

case 'add':

result = parseFloat(num1) + parseFloat(num2);

break;

case 'subtract':

result = parseFloat(num1) - parseFloat(num2);

break;

case 'multiply':

result = parseFloat(num1) * parseFloat(num2);

break;

case 'divide':

result = parseFloat(num1) / parseFloat(num2);

break;

default:

result = 'Invalid operation';

}

res.send(`Result: ${result}`);

});

app.listen(port, () => {

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

});

Update your public/index.html:

html

Copy

<!DOCTYPE html>

<head>

<title>Server-Side Calculator</title>

</head>

<body>

</select>

<button type="submit">Calculate</button>

</form>

</div>

</body>

</html>

Restart your server and test the new server-side calculator.

Exercise 2:

Add error handling to the server-side calculator. For example, handle division by zero and display an appropriate error message to the user.

Phase 3: Templating with Handlebars

Objectives:

Use Handlebars templating engine to regularize page content

3.1 Setting up Handlebars

Install Handlebars:

Copy

npm install express-handlebars

Update your app.js:

javascript

Copy

const express = require('express');

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

const exphbs = require('express-handlebars');

const app = express();

const port = 3000;

Want to print your doc?
This is not the way.

Try clicking the ··· in the right corner or using a keyboard shortcut (

CtrlP

) instead.