Share
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.
What are all the technologies introduced in this Lab:
Node.js : To run JavaScript programs on the Server
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:
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 land, we will be using Mongo DB, based on a way of storing and retrieving data called JSON : JavaScript Object Notation.
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:
→ 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
Phase 2: Server-Side Spell Casting
Phase 3: The Art of Handlebars Illusion
Phase 4: MongoDB - The Database
Phase 5: Advanced Skills
Bonus Quests
Grimoire of Knowledge (Resources)
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
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):
Edges (Connections):
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:
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:
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.
1.1 Installing Node.js
node --version
npm --version
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
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.