Drug Induced MVC Explanation (model, view, controller tutorial)

Hi ho,

I’ve been working with a PHP framework called Codeigniter for about six months. It’s really opened lots of new doors for me, as far as the world of web development goes. However, there’s one issue that’s been bothering me for a long time – MVC. In spite of many hours of reading and tweaking I haven’t been able to get my head around the whole MVC thing, until now.

Like many Codeigniter developers (I suspect), I happily walked myself through the “hello world” and “create your own blog in 20 minutes” video tutorials. I have successfully used the MVC pattern but to be honest, I haven’t totally understood it. Sure, we all know that models fetch and manipulate data, views are for design stuff and controllers have something to do with talking to those two bedfellows. But how does this translate into every day web development? If you’ve gotten into this whole frameworks vibe lately then I bet you were probably hoping that your framework would let you: 

• Build web applications in super fast time
• Easily upgrade and tweak your web applications
• Take parts from one web application and quickly bolt it onto a completely different website

If you’re anything like me then you’ve probably been using the MVC patter for some time but have not yet had the benefits of achieving the goals above.

The main question that’s been bothering me is “Where do all the different bits go?” Apparently, I’m not the only person who has had difficultly understanding this. There was a cracking blog post written by Stefan Mischook of killerphp.com ( http://www.killerphp.com/articles/note-to-codeigniter-nerds-please-no-looping-code-in-your-views/ ) in which he really heavily criticised the way people from the Codeigniter community use PHP loops in their views. What made that blog post particularly interesting for me was not only the article but the 44 (so far) comments that were submitted by other developers in response to his article. Have a read through it for yourself and one thing soon becomes strikingly obvious:

NOBODY SEEMS TO BE ABLE TO AGREE ON WHAT THE BEST PRACTICES ARE FOR AN MVC FRAMEWORK.

Sounds far fetched but as far as I can tell it’s true. Let’s imagine that you were building a website that sold cars. Now imagine that somebody clicks “Ford” and your job is to build a webpage that displays all of the Ford cars. There’s a lot of information that you need to handle to make that happen. You’ve got to figure out what cars in your database belong to the Ford category. You’ve got to figure out how to draw a little box (perhaps) with little pictures of each car – each with a title and a button that says ‘more info’. You might have some CSS styling that you want to use… and on and on we go.

The key question you have to ask yourself is “Where does everything go?” Now, if you just use your model to fetch data, send it to the controller and then get your controller to pass an array of car data onto your view page then you’ve just made a terrible mistake. The reason you’ve made a mistake is because your view file will have to make sense all of those variables by extracting arrays and looping. This is going to make it very easy for designers to break your webpage (as Mischook warns). However, it’s also going to make your applications very difficult to maintain.

Now, hang in with me for a second more and let’s look at this in a little more detail. Let’s imagine that you want your page to have a table with rows of cars. Let’s also imagine that there’s four cars on each row. QUESTION: Where does the html code for the table go?

Some would say chuck it in the view. However, that means looping and getting into PHP code which we don’t want to do. Others might say that the HTML code for drawing the table should be in the controller. The trouble with that, however, is that it makes your controllers complicated and difficult to read (in case you haven’t heard the news, there’s tonnes of expert developers saying that we should to make our controllers as “skinny” as possible”). So, the last place to consider might be the model. Of course, the trouble with putting html code into the model is that we’ve basically violated the original definition of what a model is for. Suddenly the whole world of MVC seems to be getting very confusing doesn’t it?

What we need is a brave new explanation of the MVC framework. An explanation that’s easy to understand. An explanation that revolutionises the way we think about MVC. An explanation that can be meaningful for both experienced developers and complete newbies.

My explanation of the MVC framework is unlike any other explanation you’ve read before. It came to me in a moment of divine inspiration. As you read, you’ll probably think that I was on LSD when I wrote it. The truth of the matter is I’ve never touched drugs in my life. Never the less, for dramatic purposes I’ve decided to call it a “drug induced”. The reason I’m calling it “drug induced” is because it’s so left field that I reckon it wouldn’t be out of place on the sleeve of “Lucy in the Sky with Diamonds” or “Purple Haze”. The whole concept I’ve came up with is really simple. Now that I’ve had my moment of inspiration I feel as though MVC has suddenly became crystal clear. At last I can see how MVC works. I know where everything goes and I can easily do all of the things that I wanted to do when I first became interested in frameworks. If you’re struggling to understand MVC then I hope that my explanation will have the same effect for you.

So, are you ready to rock? Ok, let’s do it!

People, I give you The Drug Induced Explanation of MVC…

CONTROLLER

There’s a war. In that war there’s an army. A big army. The guy in charge of the army is called Lieutenant Colonel Controller. Along with his standard military uniform he wears a big black cowboy hat with a letter ‘C’ on it. He’s always shouting. Always ordering people around and he always seems to be angry. You’ve seen characters like him before in films like; Full Metal Jacket, Apocalypse Now, Stripes and An Officer and a Gentlemen.

The Colonel’s troops are utterly loyal to him. What he says goes. Colonel Controller is capable of doing all of the taks that he orders his lower ranked troops do. However, these days he doesn’t seem to do much work at all. He just orders people around.

To those who don’t know him, he’s just a lazy, angry, middle aged bully. To those who do know him, he’s a genius. Without Colonel Controller in charge, the army would be doomed.

MODEL

There’s another character in this army. His name is Model. He’s a massive 350lb hulk of a man with a big letter ‘M’ tattooed onto his forehead. Model doesn’t talk much. As a matter of fact, the only person he answers to is Lieutenant Colonel Controller. The rest of the troops are scared of him.

Model’s job in the army is unique and a bit strange. He’s the only person who does this job. His job is to look after the mysterious containers. The containers are huge big steel barrels that contain some kind of weird green slimy stuff. None of the other troops knows what the containers are for or what the green slime does. Only the Colonel and Model understand the containers.

Sometimes Lieutenant Colonel Controller orders Model to fetch some stuff from the containers. Model is the only person in the army who’s strong enough to lift those huge steel barrels. There’s other times when the Colonel orders Model to make some changes to the containers. Model is totally obedient to the Colonel. Model never lets any of the other troops get near the containers. He is obsessed with them. Looking after the containers is Model’s only job in the army – but he does it well.

VIEW

There’s another person in the army called Victor View. He’s a French artist who sounds like Inspector Clueso and has a Salvador Dali moustache. He’s a rather feminine dude who refuses to go out into the front line of the battlefield. His job is to make the tanks and other vehicles look nice. He’s constantly spray painting them and polishing them. Although he never does any actual fighting, he’s very proud of his work.

There are rumours that Victor isn’t too bright. Some say he left school without any qualifications. If anyone ever asks Victor to do something that’s physically demanding or even something that might get him dirty then he usually starts complaining.

Like everyone else in the army, Victor takes orders from Lieutenant Colonel Controller. In the past, the Colonel used to send Victor out into battle with the rest of his troops. However, that arrangement never worked out. Victor kept complaining and breaking things. So, these days Victor’s job is to make sure everything looks nice. He’s very passionate about his work and most would agree that he’s a brilliant artist.

THE FOOT SOLDIERS

Of course, every army needs a good supply of foot soldiers. This army is no exception. This army has lots of foot soldiers.

The foot soldiers hardly ever get talked about. Hardly anyone ever writes about them and there’s lots of people who don’t even know about them. To most people, they’re just a faceless mass, working in the background. When great battles have been won in the past then all the credit usually goes to Lieutenant Colonel Controller. Never the less, the foot soldiers do a very important job. As a matter of fact, they do lots of jobs.

The foot soldiers do all of the jobs that the Colonel used to do when he was younger. All of the boring but essential tasks that need to be done are carried out by the foot soliders. There are lots of different types of foot soldiers. They all have different areas of expertise and they have different ranks. Some of the ranks have names like; Library, Plugin and Helper.

Many years ago, when the president first ordered the creation of the army, he did not want to invest in foot soldiers. He thought that foot soldiers would only make things more complicated and he hoped that he could just get by without them. However, as time went by Controller started to complain that he was spending too much time doing menial tasks. For that reason alone, foot soldiers are now an essential part of this army. The army is good.

THE END.

So what does all this mean?

Well, hold those images in your mind for a moment and with those images in your mind ask yourself where all the bits should go.

So, let’s go back to our cars website example.

If we think about MVC in terms of our drug induced explanation then suddenly everything becomes crystal clear. I’ll walk you through it. 

• Everything starts with the Controller. Remember, he’s the boss. If he wants to display all of the Ford cars then he’d ask Model to fetch the data.
• The controller would then want to convert that data into an HTML table. Now, he doesn’t want to assign that job to the model or to the view (for reasons previously explained). He could do the job himself, however, he’d much rather focus on giving orders. The job of creating the HTML table would therefore be assigned to a foot soldier. For us, that means assigning the job to a custom Library.
• The Library would then make the table and send the code for the table back to the Controller. With the table all ready to go, the Controller would then send it to the View.
• The View file would take the variables that it’s received (including the table) and display it. However, being the true artist that we know it to be, the View would use CSS, pictures and other design elements to make sure the final web page looked really nice.

 

I hope my drug induced explanation of MVC has helped you to understand how these things all fit together.

Thank you for reading. Rock on!

-David Connelly