MVC
GET READY FOR A LOVE TRIANGLE LIKE NEVER BEFORE. MVC AMOR BABY
IS THIS MVC?
MVC consists of:
MODEL
VIEW
CONTROLLER.
MVC is not a framework but rather an architectural paradigm. It allows to structure our code in a sound way and prevents repetition.
Meet Cindy (client)
Cindy is watching her favourite airport telenovela called Airport MVC!
She uses her fave browser, Internet Explorer…. Cindy’s, ahem, “browser” sends a request to watch the airport telenovela and receives a response back…
BUT IT’S ALREADY SEASON 3 of AIRPORT MVC, WE DON’T CARE ABOUT HER BROWSER. JUST TELL US THE PLOT OF THIS MASTERPIECE DRAMA!
Ok… That’s better but what’s really going on???
What’s the tea ?
Our girl Cindy
BROWSER
View
Model
Controller
DB
Router
The team
Answer the question, “Why are we the ones to solve the problem we identified?”
VIEW
CONTROLLER
MODEL
DB
THE VIEW
Something that Steve( controller) has lots of and something Chrissy has never seen, she LIVES IN A BASEMENT !
STEVE THE AIR TRAFFIC CONTROLLER
Because of his job, Steve has a good VIEW, He has ties with the routers aka Airplanes. (That’s airport lingo).
MOST IMPORTANTLY HE’S IN LOVE WITH CHRISSY THE MODEL.
CHRISSY TEIGEN.
A beautiful woman who lives in a basement. She can’t see the beautiful view of the airport
CHRISSY LIKES CHATTING TO STEVE BUT HAS A HUGE SECRET SHE’S HIDING FROM HIM.
DB COOPER.��(Committed the best airplane hijacking in history, and never found (true story).
A MAN WHO HOLDS A LOT OF INFORMATION WHICH IS VERY SECRET.
MEET THE CAST OF MVC
https://s3.envato.com/files/131959181/DSC09975.jpg
BUT…
�First looks can be deceiving at Airport MVC. What’s really going on??
Find out more about Steve in the next episode, starting right now!
“Give your all to me” ~ John Legend
Controller
Steve, our traffic controller guy is a sociable fella. As part of his job he has lot of people to talk to.
So Steve wants to ask Chrissy a special question …..
Steve as the air traffic controller :
Router (airplane) - figures out what request to ask Steve, and asks where to land.
CLIFFHANGER ALERT!
Before we hear Steve’s important question, let’s see what going on with Steve behind the scenes…
BTS you say?
Browser >> router >> controller
Server.js file makes a request and sends off to the routes folder to find, todos.
const todoRoutes = require('./routes/todos')
app.use('/todos', todoRoutes)
const express = require('express')
const router = express.Router()
const homeController = require('../controllers/home')
router.get('/', homeController.getIndex)
module.exports = router
routes/home.js sends us to controller/home and to run method getIndex
module.exports = {
getIndex: (req,res)=>{ res.render('index.ejs')
}
}
home controller runs, getIndex runs, this spits out/renders index.ejs and responds with it
OUR todos controller though.
controller/todos.js - it has many OBJECTS and this is the file that actually talks to the models (Chrissy) because of this line of code :
const Todo = require('../models/Todo')
This line of code sits
at the top of our todos.js
Example of our many objects in this controllers/todo.js file
How does Steve talk to Chrissy?
Back to Steve!!!
Hey Chrissy! So are you talking to anyone else? I want us to be exclusive!
Well…. Em….
Our girl Cindy
BROWSER
View
Model
Controller
DB
Router
Remember this….. ?
Chrissy has been chatting to DB this whole time !!!
MODEL
Chrissy, what’s going on??
Chrissy has been talking to DB the whole time and been feeding Steve
all the spicy secret information from DB. Likewise she’s been telling DB
everything that Steve’s been telling her. What a double agent! We may say she has been scheming… or Schema-ing??
Model:
and delete.
controller.
Schema?
A database schema is an abstract design that represents the storage of your data in a database.
So when Chrissy gave information to DB, she also gave him some organisation structure cause otherwise he’s a total mess.
(MongoDB by design doesn’t have a specific structure)
Will this love triangle survive? Find out next episode….
XOXO, MVC girl
It’s okay Steve,don’t cry! There’s plenty more fish in the MV-Sea
Well, that’s because the MVC is broken up into 3 parts - Model, View and Controller. This is a form of abstraction because each one of those 3 handles a different operations. They are separated which makes code cleaner to write and easier to understand.
But how come Steve didn’t know Chrissy was
In cahoots with DB? And how come Chrissy can’t really go and see the beautiful airport view?
Chrissy! Own up! How have you been talking to the infamous criminal mastermind DB?
NO WAY! So that’s how Chrissy learned about all of the scheming/SCHEMA-ing nonsense and made DB more organised in his life!!!!
Enter MONGOOSE!
Mongoose is an Object Data Modeling (ODM) library for MongoDB and Node.js. It manages relationships between data, provides schema validation, and is used to translate between objects in code and the representation of those objects in MongoDB. We can use the schema to know what’s roughly going on in the DB without having to access it.
ODM : Object Data Modeling. It is a data manager intended for storing system information. Information is stored and maintained as objects with associated characteristics
So what does Chrissy truly feel on the inside??? Will she choose Steve the controller or DB the master criminal??
When the client clicks and adds some information to the TO Do list form, this will add it to the DB. The request travels to server.js >> routes/todos.js >> controllers/todos.js with create/todo create a new “to do” using models/todo.js
c
This information like the string on the todo list “Find a job” along with its boolean type of true (completed), false (not completed) is added to the DB, where it is assigned a UNIQUE ID.
But likewise, Chrissy passes the information from the DB back to Mr. Steve the Controller who’ll bring it to his fave view spot.. SO CHRISSY CAN’T CHOOSE ONLY ONE. SHE LOVES THEM BOTH AND MUST STAY IN CONTACT WITH BOTH OF THEM! SHE CAN’T FUNCTION WITHOUT EITHER!!!!!
Alas, that is the entanglement of our 3 characters. While Steve doesn’t know how to react to the presence of DB, the only think he can do is enjoy his beautiful VIEW !!!
View:
VIEW
Let’s find out info about the film set an crew… How did they build such a nice view for this series?
Let’s say client wants to delete a to do from our list. Client side (public/js/main.js) is there to hear that event listener and run function
Client side JS, finds parent node and using DATASET grabs any attribute and its ID. Goes to our ejs
forEach loop runs, grabbing from the DB the special ID generated by Mongo for the document. Conditional logic to check completion.
Fetch request sent from main.js > server.js > routes/todos.js > controller/todos.js
deleteTodo runs, says go to DB via model and delete one element that matches the requirements _id:req.body.todoIdfromJSFile
Our girl Cindy
BROWSER
View
Model
Controller
DB
Router
So, from the top…
Make it drop…
The Model => Database
The View => Client
The Controller => Server
CONTROLLER → Receives API/USER Request from the ROUTER
→ Handles request flow, Never handles data logic. → Manipulates MODEL
MODEL → Receives Data from Controller → Handles data logic, Interacts
with database → MODEL then returns data to controller
��VIEW → Receives Data from Controller → Handles data presentation, Dynamically rendered → Returns data to controller who returns it to the client
Cindy! Our client, Remember her??
TUNE IN FOR SEASON 4 .. featuring a new character …. PostgreSQL!!!
THAT’S A WRAP