Merge pull request #32 from BrockAltug/feature

Feature

12-model-view-controller/02-mvc-handlebars-intro/README.md

@@ -1,24 +1,136 @@
-# 📐 Add Comments to Implementation of MVC and Handlebars.js
+# MVC Introduction with Handlebars.js: Potluck Party App
 
-Work with a group to add comments describing the functionality of the code found in [Dish.js](./Unsolved/models/Dish.js), [main.handlebars](./Unsolved/views/layouts/main.handlebars), and [dish-routes.js](./Unsolved/controllers/dish-routes.js).
+## Overview
 
-## 📝 Notes
+This project demonstrates the **Model-View-Controller (MVC)** architecture using **Express.js** and **Handlebars.js** for a simple Potluck Party application. The app renders a static menu page, showcasing the integration of Handlebars.js as a template engine and the MVC design pattern.
 
-Refer to the documentation:
+---
+
+## Key Features
+
+1. **Model-View-Controller (MVC) Architecture**:
+
+   - Implements the separation of concerns:
+     - **Model**: Handles data and business logic.
+     - **View**: Manages user interface and layout.
+     - **Controller**: Routes commands between the Model and View.
+
+2. **Handlebars.js Integration**:
+
+   - Uses Handlebars.js as the template engine to render dynamic content.
+
+3. **Static Menu Display**:
+   - Renders a static list of menu items on the `/` route.
+
+---
+
+## Concepts Covered
+
+1. **MVC Framework**:
+
+   - Separation of responsibilities across Models, Views, and Controllers.
+
+2. **Handlebars.js**:
+
+   - Template engine for rendering HTML with dynamic placeholders.
+
+3. **Express.js**:
+   - Web server for routing and serving content.
+
+---
+
+## Application Structure
+
+### **Files and Functionality**
+
+1. **`controllers/dish-routes.js`**:
+
+   - **Type**: Controller
+   - **Responsibility**: Routes commands to the Model and View.
+   - Includes:
+     - `GET /`: Renders the `all` Handlebars template.
+
+2. **`models/Dish.js`**:
+
+   - **Type**: Model
+   - **Responsibility**: Defines the `Dish` data structure and business logic.
+
+3. **`views/layouts/main.handlebars`**:
 
-[npm documentation on Express Handlebars](https://www.npmjs.com/package/express-handlebars)
+   - **Type**: View
+   - **Responsibility**: Provides the layout for all templates.
+   - Includes:
+     - Placeholder `{{{body}}}` for rendering main content.
 
-[MDN Web Docs on MVC](https://developer.mozilla.org/en-US/docs/Glossary/MVC)
+4. **`views/all.handlebars`**:
+
+   - **Type**: View
+   - **Responsibility**: Displays a static menu with hardcoded data.
+
+5. **`server.js`**:
+   - Sets up the Express server and Handlebars.js as the template engine.
+   - Routes requests to `dish-routes.js`.
+
+---
+
+## Expected Behavior
+
+1. **Access the Homepage**:
+
+   - Navigate to `http://localhost:3001/`.
+   - The menu is displayed as defined in `all.handlebars`.
+
+2. **Separation of Concerns**:
+   - The Controller (`dish-routes.js`) connects the View (`all.handlebars`) to the route.
+
+---
+
+## Setup Instructions
+
+1. **Install Dependencies**:
+
+   ```bash
+   npm install express express-handlebars
+   ```
+
+2. **Run the Application**:
+
+   - Start the server:
+     ```bash
+     node server.js
+     ```
+
+3. **Access the Application**:
+   - Open your browser and navigate to:
+     ```
+     http://localhost:3001/
+     ```
 
 ---
 
-## 🏆 Bonus
+## File Commentary
+
+1. **`controllers/dish-routes.js`**:
+
+   - Responsible for routing and rendering the `all` template.
 
-If you have completed this activity, work through the following challenge with your group to further your knowledge:
+2. **`models/Dish.js`**:
 
-* What are some other template engines?
+   - Defines the data structure for dishes and future database integration.
 
-Use [Google](https://www.google.com) or another search engine to research this.
+3. **`views/layouts/main.handlebars`**:
+
+   - Provides the overall layout for the app, with a placeholder for dynamic content.
+
+4. **`views/all.handlebars`**:
+
+   - Displays a hardcoded list of menu items.
+
+5. **`server.js`**:
+   - Configures the Express server and Handlebars.js template engine.
 
 ---
-© 2024 edX Boot Camps LLC. Confidential and Proprietary. All Rights Reserved.
+
+## Summary
+
+This project provides an introduction to the MVC architecture using Handlebars.js for rendering views. It demonstrates how to separate concerns effectively, making the application maintainable and scalable for future enhancements.

12-model-view-controller/02-mvc-handlebars-intro/controllers/dish-routes.js

@@ -1,10 +1,15 @@
-// TODO: Add a comment indicating how this file fits into the MVC framework (is it a Model, a View, or a Controller?) and what it is responsible for handling.
+// ? Is this a Model, a View, or a Controller? 
+// ? This file is a Controller. 
+// ? What is it responsible for handling?
+// ? It routes commands to the Model and View parts.
 
 const router = require('express').Router();
 
-// TODO: Add a comment describing the purpose of the get route
+// ? Add a comment describing the purpose of the 'get' route
+// ? GET route for getting all of the dishes that are on the menu
 router.get('/', async (req, res) => {
-// TODO: Add a comment describing the purpose of the render method
+  // ? Add a comment describing the purpose of the render method
+  // ? This method is rendering the 'all' Handlebars.js template. This is how we connect each route to the correct template.
   res.render('all');
 });
 

12-model-view-controller/02-mvc-handlebars-intro/models/Dish.js

@@ -1,7 +1,9 @@
 // ? Here is where we set up our Dish model, for when we are ready to connect to a database in future activities.
 
-// TODO: Add a comment indicating how this file fits into the MVC framework.
-// TODO: What is it responsible for handling?
+// ? Add a comment indicating how this file fits into the MVC framework.
+// ? This file is a Model.
+// ? What it is responsible for handling?
+// ? It is responsible for handling data and business logic.
 
 const { Model, DataTypes } = require('sequelize');
 const sequelize = require('../config/connection');