MVC is an acronym for Model-View-Controller. It is a design pattern for software projects. It is used majorly by Node developers and by C#, Ruby, PHP framework users too. In MVC pattern, application and its development are divided into three interconnected parts. The advantage of this is it helps in focusing on a specific part of the application name, the ways information is presented to and accepted from, the user. It helps in allowing for efficient code reuse and the parallel development of the application. Even if the project structure might look a little different than an ideal MVC structure, the basic program flow in and out the application remains the same. In this post, the program flow between these components of an application will be shown by creating a demo application. First, lets get through with what these parts of the application mean and what functions they perform.
Explanation
Model: Model represents the structure of data, the format and the constraints with which it is stored. It maintains the data of the application. Essentially, it is the database part of the application. View: View is what is presented to the user. Views utilize the Model and present data in a form in which the user wants. A user can also be allowed to make changes to the data presented to the user. They consist of static and dynamic pages which are rendered or sent to the user when the user requests them. Controller:Controller controls the requests of the user and then generates appropriate response which is fed to the viewer. Typically, the user interacts with the View, which in turn generates the appropriate request, this request will be handled by a controller. The controller renders the appropriate view with the model data as a response. So, to sum it up:
- Model is data part.
- View is User Interface part.
- Controller is request-response handler.
MVC architecture
Now, lets get started with the application. npm init is used here to generate a package.json and app.js file.
npm-init
As the name suggests, there are three folders, called models, views, controllers which will help in the mvc architecture implementation. npm is used to install the basic npm packages to get started.
npm-package-install-snip
The project structure looks like this.
mvc-project-structure snip
Project Structure Explanation
- As you can see, there is aroutes folder, which will serve as controllers.
- Then there is a models folder, in which we have a user model.
- A views folder, which have our views with an extension of .handlebars. Be noted that handlebars is a templating engine which means that it has the ability to generate the pages by filling in the templating that we create.
Now, let’s get down to showing how the MVC pattern gets implemented for the process of login and registering as a user in this demo LoginApp.
- Write node app.js to start the application. The application will start if everything is right otherwise try to debug the app using stackoverflow and things like that.
- Open the app in your browser. If you have forked and using my github repo, then navigate to localhost:3000 in your browser and you will see the app running.When you open the app in your browser, your app.js file will say to itself something like :”Oh! The browser has requested localhost:3000/, so lets look for the file to serve if this route is hit. It looks for this code:
App use route appjs
- . It tells the app that use the variable routes if ‘/’ is requested. Then it looks for the routes variable. It finds it in the app.js file here:
Routes requires
- . Now it looks in the gfgIndex.js file in the routes folder of our node app to look for the code to execute when the ‘/’ route is hit. It finds the following code.
GfgIndexjs routes file
- This code basically says that render the index.hanblebars if the user is logged in. To check if the user is logged in, it runs the function ensureAuthenticated. This function basically says that if the user is logged in, render the index.handlebars file else redirect the user to the /users/login route.
GfgUsersjs login route snip
- This code tells the app to render the index.handlebars file when the GET ‘/’ is called. So, now it goes to the views folder and look for the index.handlebars and renders it to the user. This is how the views-controller part of the architecture works in the app. I believe the above program flow is clear to the reader.
- Lets navigate to http://localhost:3000/users/register. So, the app breaks the route into two pieces:/users and /register and asks itself something like “Oh okay! The users wants to see /users route and then /register . The app looks for the ‘/users’ in its app.js file and finds it here.
App use route appjs
- . Then it looks for the ‘users’ variable to use when /users path is hit which can be found in the app.js file:
Routes requires
- . So, it goes to the gfgUsers.js file in the routes folder and looks for the route /register. Note that the /users/register finds itself in gfgUsers.js file as /register. It asks the browser to render ‘register.handlebars’ file. This is the view-controller arch. implementation going on. Second Part of Registration Now, lets register a new user.
Register a new user snap. image:https://media.geeksforgeeks.org/wp-content/uploads/register-a-new-user-snap.png
- After clicking on submit, the data is taken, POSTed to the ‘/register’ route for processing. This controller validates the incoming data for errors, then creates a new variable called newUser with the User modelled with all the data and the calls save() on it to actually save the data to the user.
New user console logged into the terminal
- After the user is created, the ‘/register’ controller asks the browser to redirect the user to ‘/login’ page. This is the model-view-controller architecture implementation.
You can find the entire code used in this article here. Fork, clone and run.