What is MVC?

MVC Stands for:

-Model

-View

-Controller

MVC is an architectural design paradigm / system used to keep our code organized while building projects.

What do the MVC processes do?

The model talks to the database and finds/adds/updates/removes item from the database based on the information the controller has given them. The model never talks directly with the view.

Model

View

The View is what the user sees. The view speaks to the router, which finds the correct controller for the route and makes requests based on the users input (get, post, put, delete). The view never speaks directly to the model.

Controller

The controller acts as the "middleman". The controller listens for requests from the view and communicates that to the model so it can interact with the database, the model speaks back to the controller and the controller speaks to the view to display the information.

MVC explained

Why is MVC important?

- Most web applications are built on the structure of MVC

- MVC helps abstract your code (can make changes without breaking other parts of the code)

- Easier to read, maintain and stay organized while building projects

MVC Flow visualization

What are routes?

Routes listen for the user to make a request. Having routes setup ensures the user's request gets to the correct controller.

We create variables to store the routes at the top of our server.js folder. Then we initialize them using

app.use('routeName', routeVariable). When the user makes one of these requests, our code now knows which route to use.

The Routes..

Lets say for example, our user navigated to the /todos route because they wanted to create a new todo. We would look at and head into our routes folder as specified here

Navigating to our routes folder and the todos.js folder since we would like to be on the /todos route

Finding the correct route

We know we are in the todos routes file, now we must find the right request that was made by the user, for example, a post request.

The post request exists (line 7) and also calls a method from the todosController. We can continue with this request and we can send this to the correct controller. Using the todosController variable, we have access to the correct controller. (see line 3).

The Controller

Inside of the todos.js controller will be our methods used to send data back to our route OR communicate with our model to either add or extract something from the database. Since we want to make a post request that calls the createTodo method. Our method is going to speak to the model to create the item in the database. Our Todo variable is coming from the Todo model as seen in the directory.

The model

Now we go to our model. Our model contains a Schema. A Schema defines the structure of the documents entering the database. You can think of models as a fancy constructor compiled from a Schema.

Mongoose is required to create a schema. In our schema, we have set some options. The type for our todo item will be a string, we are also setting type of boolean for our completed property. Both are going to be required in order for the document to be inserted into the database. This reduces any margin for error

PS. all module.exports is doing is exporting it from the file and allows us to reference whatever is output from this file

The Process Continued.

Now that our model has checked to ensure the todo item being entered is in the correct format, we head back to our controller function of createTodo

Once the todo has successfully been added, the method createTodo finishes up and redirects the user back to the root /todos route. Our controller speaks with the view (in this case, EJS)

The View

The view is setup to grab whatever data was passed into our ejs file VIA the getTodos method from the todos controller

Final Result

Our todo items are now shown on the page