/_ ================================================ MVC CRUD ================================================ _/

/_ -------------------- What is MVC? -------------------- Model → Manages the data and business logic (read/write/validate). Does NOT handle display, will deal with db.

View → Defines how data is displayed to the user (e.g., Pug templates or React components).

Controller → Handles logic between Model & View. Receives requests, interacts with Model, and decides which View to render.

_/

/* -------------------- Why use MVC? --------------------

• Keeps code organized → easier to maintain, scale, test
• Separation of concerns → changing one part doesn't break others
• Reusable components → Models/Controllers can be reused with different Views
• Future-ready → in MERN, React replaces View; Model + Controller stay same */

/* -------------------- MVC Request Flow -----------------

1. User sends request → hits a Route
2. Route calls Controller
3. Controller interacts with Model (CRUD operations)
4. Controller sends data to View
5. View renders and sends response to user */

/* 📂 Project Structure (extended) mvc-crud-demo/ app.js routes/ -userRoutes.js controllers/ -userController.js models/ -userModel.js views/ -userList.pug -addUser.pug -editUser.pug

*/ /* -------------------- Example – User Management App --- Feature | HTTP Method | Route | MVC Components

---

Show users | GET | /users | Controller → getUsers() Model → getAll() View → userList.pug

Add user | POST | /users/add | Controller → addUser() Model → add() Redirect → /users */

packages npm install express body-parser pug uuidv4

/* -------------------- Key Points Before Coding ---------

• Models: Only deal with data operations
• Controllers: Only deal with logic and flow
• Views: Only deal with displaying data
• Routes: Connect URLs to Controllers
• Keep functions small and single-purpose */

/_ -------------------- LIST USERS (READ) -------------------- _/ // URL: /users // Method: GET // Controller: getUsers() // View: userList.pug // Example usage in routes/userRoutes.js: router.get("/users", userController.getUsers);

// Controller snippet: function getUsers(req, res) { const users = User.getAll(); // Get all users from model res.render("userList", { users }); // Render view with users }

/_ -------------------- ADD USER (CREATE) -------------------- _/ // Step 1: Show Add Form // URL: /users/add // Method: GET // View: addUser.pug router.get("/users/add", userController.showAddForm);

// Controller snippet: function showAddForm(req, res) { res.render("addUser"); // Display empty form }

// Step 2: Submit New User // URL: /users/add // Method: POST router.post("/users/add", userController.addUser);

// Controller snippet: function addUser(req, res) { const { name } = req.body; // Extract form data User.add({ id: uuidv4(), name }); // Add user to model res.redirect("/users"); // Redirect to user list }

/_ -------------------- EDIT USER (UPDATE) -------------------- _/ // Step 1: Show Edit Form // URL: /users/edit/:id // Method: GET router.get("/users/edit/:id", userController.showEditForm);

// Controller snippet: function showEditForm(req, res) { const user = User.getById(req.params.id); // Get user by ID res.render("editUser", { user }); // Render form prefilled }

// Step 2: Submit Updated User // URL: /users/edit/:id // Method: POST router.post("/users/edit/:id", userController.updateUser);

// Controller snippet: function updateUser(req, res) { const { name } = req.body; User.update(req.params.id, { id: req.params.id, name }); // Update in model res.redirect("/users"); }

/_ -------------------- DELETE USER (DELETE) -------------------- _/ // URL: /users/delete/:id // Method: GET router.get("/users/delete/:id", userController.deleteUser);

// Controller snippet: function deleteUser(req, res) { User.remove(req.params.id); // Remove user by ID res.redirect("/users"); // Redirect to list }

/* Flow of CRUD

/users → Show all users (Read)

/users/add → Add new user (Create)

/users/edit/:id → Edit user details (Update)

/users/delete/:id → Remove user (Delete)

*/

/_ -------------------- NOTES -------------------- _/ // - Each user has a unique ID (uuidv4()) // - Flow: Route -> Controller -> Model -> View/Redirect // - Data is in-memory, can replace with MongoDB later