[TUT] Basics: MVC (Model-View-Controller) Development
~~~~ Hey all, I trust you're well ~~~~

I wanted to create a generally informative thread about MVC, for the simple purpose of informing people what an MVC is, and as something to refer to for other members who might make mention on this concept in one of their other threads. Therefore, if you feel like something needs to be added, please do let me know and I will try to include that too. This isn't really meant to be a detailed analysis of every aspect of MVC design, rather it's just enough for somebody who may not really know what an MVC is to understand what is being referred to when they come across its mention.

Please note: The section titles will each assume that you have read the one prior to it, which is why the context might seem indefinite if you've jumped around.

MVC (Model-View-Controller)

In continuation from the first and foremost piece of information about MVC, which is that it stands for Model-View-Controller as the title conveniently points out, I'd like to break my rule about Wiki-copying and bring forth a single sentence from Wikipedia on this concept, because I genuinely believe that it is beautifully worded:

"Model–view–controller (MVC) is a software architectural pattern for implementing user interfaces on computers." - [email protected]

To re-iterate, it's a concept, an architectural pattern, meaning it's not always something that you install, nor a ready-developed tool - although they do exist, and are referred to as frameworks; and you may see that it's way more common to use them instead of creating one's own architectural pattern from scratch. But we're pointing this out in order to separate the actual concept from what's typically practiced by developers.

So what does this concept entail?

The MVC concept calls for three different departments in one's workflow during development, to properly delegate tasks. Workflow in this context refers to the structure of one's development environment. Think of folder setups like  ~/js/scripts/, or ~/media/imgs/animated/ during development. The process of organising files according to their purpose or file-type is also an architectural pattern. But that's more to do with the external files, rather than what the files actually contain. 

This concept employs the exact same concept in the sense of delegation and organisation - but instead of files and folders, it focuses more on what the code does, and where it should go because of that. If you really think about it, the process of any complex business directory site or social networking site can really be broken into three parts, programmatically, and we'll go through them; but for now, understand that each department of an MVC structure is designed to handle one of these aforementioned parts.

Three parts? Pray tell

The three mentioned parts, about which I said: 'If you really think about it, the process of any complex business directory site or social networking site can really be broken into three parts'  in the previous heading, are the following:

1. Reading or writing from and to external sources (database, api, some other server, etc.)
2. Formatting the retrieved data and preparing it into arrays and objects for displaying
3. Displaying the data using the facilitated arrays and objects from step 2

If you happen to have knowledge about full-stack web development, ask yourself:
 can any general website's functionality not be broken into the three processes listed above?
If you think of anything, feel free to share & explain how. 

The Merge

Now that we've understood that the mentioned processes are three, and that each letter in the acronym MVC represents one of the three processes, let's put the pieces of the puzzle together:

1. Model - Interacts with external source (api, database)
2. Controller - Formats the retrieved data into variables  
3. View - Accepts the data and displays on the browser  

Keep in mind that an MVC project can incorporate multiple models, each for different purposes. For example, one model for R/W data related to users, another for customers, and a third for products, and so on. Or there can also be multiple controllers: there can be one controller for managing admin pages, another for user pages, a third for search pages. Views are almost always more than one. Views are like your .html pages, basically. Ugh, there are things that I would like to elaborate on with regards to templating and dynamic design, but absorb that, for now, in this thread.

MVC Frameworks

I mentioned earlier that most developers adopt a ready-made MVC architecture and just use that instead of creating their own one from scratch, for many reasons. According to certain factors such as what they're trying to accomplish as well as which languages they're using. These MVC frameworks can typically either be downloaded as a folder with all of the folder structures in place, and then edit certain config files & continue from there, or they can be initialised in an empty root folder via command line. Some may prefer one of the other for reasons that vary from developer to developer - but just understand that this is what MVC frameworks are, and that is typically how they're employed by developers.


End of Theory

A Practical Demonstration of the use of MVC

Basic information for this demonstration

Type: Web Application
Platform: Web Browser (Firefox)
Scripting Language: PHP
                         Framework: CodeIgniter (An MVC framework for PHP)
           Environment: Localhost (WAMP)

Downloading the framework

[Image: 61738369c7134f2b8bcbab0c02aaaf7c.png]

Copying its content and pasting it in my test project ~/test/

[Image: 84ea29ee7dae4adb8b0d0c2972be7366.png]

Making sure that it works: http://localhost/test

[Image: 5d3211805d6343d6a7f4f98d7a50b809.png]

Creating a users table in phpmyadmin just so we can demonstrate with the database

[Image: b094de1c5e614f37b22dbee1387d83f0.png]

Add some dummy users so that we can retrieve them later

[Image: 7397cbde725b4fb7ad99581df228f8e1.png]

Now in my text editor. You can see Controllers, Models, and Views

[Image: 7f70f070be8d48ab8fd33880b96a3844.png]

Creating a model to fetch the created users models/User.php

[Image: f06a5a33bd834bf38168599b3d77175b.png]

Creating a controller to handle the fetched users controllers/Welcome.php

(I didn't bother, I just used the default controller, Welcome

because it's already there, I just replaced the code)

[Image: f0816007cd2c4f6698d9eeee43f98d45.png]

Creating a view to display the passed-in users views/users.php

[Image: 66593a566e814ea397998789b7497764.png]

Result [Image: hat-tip-smiley-emoticon.gif]

[Image: cc696cf030754916927eea7ecbc3c466.png]

To Conclude

With that, I would now like to conclude this post. Again, this has been a post that aims to clarify the concept of how an MVC works, it is by no means an MVC tutorial or anything of the sort; 
although I am willing to produce tutorials of that nature, so if there are any requests around that area, do let me know in the comment section below, and I'll try to get back to you.

Also, please do not PM me about anything non-confidential related to this topic, just post below and someone will hopefully answer you, it's better that way because other people with possibly similar questions may benefit.

Disclaimer / Heads up / Notice / Warning / That type of thing

Pardon me for any inaccuracies.  Feel free to share your relevant thoughts, concerns and opinions in the comment section below,
I'll try to answer you if and when I feel it's appropriate and necessary.
If I don't, perhaps another member will.

Thank you for reading my thread, I hope you benefited and or enjoyed.

Have a nice day. Hat Tip

Forum Jump:

Users browsing this thread: 1 Guest(s)