Web Model View Controller (MVC) Concept with PHP example

Small web application doesn’t require architecture design. It means server script, html, client script can be put on single file for one web page. On the other hand, large business and scope with much more user, change requirement occurs so many times requires good & reliable web architecture design. It is just not simple any more to put everything on single file since the web may update and grow often.

When business requirement become more complex then related web application usually consume more programmers.

Those programmers can work per module i.e. manufacturing, finance, sales, shipping modules etc. One programmer / team work on manufacturing and other programmers / team work on other modules. It depends on software designer, sometimes work module could be mix.

Script files at particular module must be dedicated / locked to one programmer in time. Prevent others change that script. After it un-locked then others could change it. It may occur several times that one programmer have to wait others to finish their task before he/she can work.

Large scope and tight deadline web application can not have so many ‘serial’ wait and work type. We have to use better approach to design web architecture. Often, this design can be difficult to manage and maintain.

One good approach to design web application is to use layered architecture. This approach similar with building design architecture. The construction plans include separate blueprints for the foundation, frame, roof, plumbing, electrical and other floors. Each component like floor can be viewed as ‘layers’. The layers should be independent of one anothers, as much as possible and have clear focus. Also layers should have the way to connect to each other.

One common approach for designing web application using layered architecture is called Model View Controller (MVC).

  • Model is application business layer that represents the business entities such as customers, employee, products, sales etc
  • View is application user interface. It is layout or look and feel of the web application
  • Controller is user action. It manages events that processed in application. In practical, controller choose which method & view to build a page.

In simple term, MVC separate between business layer and user interface layer. Also with this layered design, all staff on team can work at the same time because they work independently to others.

A lot of life example on application layer around us. For example PayPal API payment gateway. Paypal provides a way to make a payment button that can be pluged into member website. Member just copy & paste the button tag based on product & price they specified into their html page. If users visit their website and click Buy Now button, users will redirected to paypal site and fill in credit card information. Finally a fund already appear on paypal member page without knowing what happen or code that run behind payment process.

How can we build MVC that it’s layers independent to each other? Well, the best way is using concept of OOP programming.

Here’s a simple example of model layer that contains business entity, products, model.php :

class modelproduct {
function __construct() { }

function products() {
return array("Bike", "Car", "Accessories");
}
}

View Layer. It is user interface design, off course this produces html tags. view.php :

class viewproduct {
function __construct() {}

function view($product) {
echo "<table>"
foreach ($product as $pr) {
echo "<tr><td>".$pr."</td></tr>";
}
echo "</table>";
}
}

Controller. Like its name, it is to control (choose) which model and view layer class that suitable to related application or page, controller.php:

include "model.php";
include "view.php";
class productcontroller {
private $p;
function __construct() {
$this->p = new modelproduct();
}
function loadproduct() {
$v = new viewproduct();
$v->view($this->p->products());
}
}

HTML Page:

<html>
<body>
<?php
include "controller.php";
$cp = new productcontroller();
$cp->loadproduct();
?>
</body>
</html>

Lets try several scenario. First, easiest case, products need to be added. Only programmer that work on model layer need to be informed. We can modify modelproduct class only. View & constructor are not affected.

Second, view to represent product need to be modified. Change only on viewproduct class. Model & controller are independent from view.

Third, maybe for some reason constructor need to change/add type of product. So, constructor can choose another modelproduct class i.e modelproduct2 or other else. Model & view them self remain the same. Off course, before constructor can choose modelproduct2, we already have the class that requested from business requirement or class diagram.

Class diagram is important to ensure we can write MVC layers together in the same time not waiting others finishing their tasks. Class diagram is tool to coordinate between programmers in team. Beside that, some meetings and planning might be needed.

In the end, MVC increases productivity for large scope and complex web application.

Cheers,
Agung Gugiaji

Advertisements

11 responses to “Web Model View Controller (MVC) Concept with PHP example

  1. Pingback: WinForm Model View Controller Using VB.Net WebBrowser Control | Enlighten Application Developer Journals

  2. very nice and cleanly explain mvc concept

  3. This tutorial is of great worth to me. I have looked around on the net but this comes to be of use. Thanks. Can you please give me a reference for how to integrate javascript and ajax code in a standard way in this mvc model and where I should put those code? Thanks in advance..

    • Hi,

      You can javascript, ajax, jquery inside HTML page. The requested url contains code that calls product class.

      However you may return string / json format from that url and catched by an ajax response.

      Regards

  4. ITs very helpfull to me to understand MVC as well as oop

    In view.php need a samicollon ie “:” at line 4 ok

  5. I like assembling utile information, this post has
    me more info! .

  6. Just wish to say your article is as surprising.

    The clearness in your post is simply cool and that i
    could assume you are knowledgeable in this subject.
    Fine along with your permission allow me to grab your feed
    to keep updated with impending post. Thank you one million
    and please continue the gratifying work.

  7. Thanks for this really good article i’ve got it MVC example here what i’m exactly looking for. so thank you very much..

  8. ankush.jetly@yahoo.com

    really superb!!! very nice

  9. thanks for help

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s