Simple MVC framework tutorial part 2

If you haven’t read Simple MVC framework tutorial Part 1, I suggest you read it here.

Some of the links on this page are affiliate links. I receive a commission (at no extra cost to you) if you make a purchase after clicking on one of these affiliate links. This helps support the free content for the community on this website. Please read our Affiliate Link Policy for more information.

In the second part of Simple MVC framework tutorial, I will extend the calculator application to a fully working one.

let’s add a index page template for our app (main page).

Create a file called “index.php” under the folder “views”.

[sourcecode language=”php”]
<?=$data[‘header’];?>
<div id=”page-content”><?=$data[‘content’];?></div>
<?=$data[‘footer’];?>
[/sourcecode]

Let’s also add a header and footer to our app. Create a file called “header.php” and “footer.php” under the folder “views”. header.php

[sourcecode language=”php”]
<div id=”page-header”>
<h1><?=$data[‘app_title’];?></h1>
</div>
[/sourcecode]

footer.php

[sourcecode language=”html”]
<div id=”page-footer”>&copy 2013 <b><a href=”http://www.oscarliang.net/”>Oscar Liang</a></b>. All Rights Reserved.</div>
[/sourcecode]

And create a CSS file in “/public/css/”, called “style.css”:

[sourcecode language=”css”]
body{
width:500px;
margin:0 auto;
background:white;
}

#page-content{
margin-top:20px;
}

#page-header{
border-bottom:1px solid grey;
color:#2D66C3;
}

#page-footer{
margin-top:40px;
border-top:1px solid grey;
color:#545CCB;
}
[/sourcecode]

Now, modify our index controller, to load the CSS file, and the view files we just created.

[sourcecode language=”php”]
<?php
class Index_Controller extends Controller{
public function __construct() {
parent::__construct();
}

public function index() {
// Load page template file
$this—>Load_View(‘index’);

// load CSS file
$this->view->Set_CSS(‘public’ . DS . ‘css’ . DS . ‘style.css’);
// Set page title
$this->view->Set_Site_Title( “MVC Calculator App Demo” );

// HEADER
$header = new View();
$header->Assign(‘app_title’, “MVC Calculator App Demo”);
$this->Assign(‘header’, $header->Render(‘header’, false));

// FOOTER
$footer = new View();
$this->Assign(‘footer’, $footer->Render(‘footer’, false));

// Save content string
$content = “”;

$var1 = 6;
$var2 = 3;

$page_view =

$math = new Math_Model();

$content_view = new View();
$content_view->Assign(“title”, “Add”);
$content_view->Assign(“body”, $var1 . ” Add ” . $var2 . ” is ” . $math->Add($var1, $var2));
$content .= $content_view->Render(“index”.DS.”index”, false);

$content_view = new View();
$content_view->Assign(“title”, “Subtract”);
$content_view->Assign(“body”, $var1 . ” Subtract ” . $var2 . ” is ” . $math->Sub($var1, $var2));
$content .= $content_view->Render(“index”.DS.”index”, false);

$this->Assign(‘content’, $content);

}

}
[/sourcecode]

You should now be getting something like this:

Okay, next let’s add an input form where user can enter Value1 and Value2, and also select the type of math operation.

Create a new file called “form.php” under “/views/index.php”.

[sourcecode language=”html”]
<form action=”/” method=”post”><input style=”width: 50px;” type=”text” name=”var1″ />
<div style=”display: inline-block;”>
<input type=”radio” checked=”checked” name=”operation” value=”add” />+

<input type=”radio” name=”operation” value=”sub” />-</div>
<input style=”width: 50px;” type=”text” name=”var2″ />

<input type=”submit” name=”submit” value=”=” /></form>
[/sourcecode]

We can now modify our index controller, so we can display this form in our app, take the inputs to produce the result, and pass it back to our client.

[sourcecode language=”php”]
<?php
class Index_Controller extends Controller{
public function __construct() {
parent::__construct();
}

public function index() {
// Load page template file
$this—>Load_View(‘index’);
// load CSS file
$this->view->Set_CSS(‘public’ . DS . ‘css’ . DS . ‘style.css’);
// Set page title
$this->view->Set_Site_Title( “MVC Calculator App Demo” );

// HEADER
$header = new View();
$header->Assign(‘app_title’, “MVC Calculator App Demo”);
$this->Assign(‘header’, $header->Render(‘header’, false));

// FOOTER
$footer = new View();
$this->Assign(‘footer’, $footer->Render(‘footer’, false));

// content string
$content = “”;

$content_view = new View();
$content .= $content_view->Render(“index”.DS.”form”, false);

// if there is user input, calculate and pass it back to view
if(isset($_POST[‘var1’]) && is_numeric($_POST[‘var1’]) && isset($_POST[‘var2’]) && is_numeric($_POST[‘var2’])&& isset($_POST[‘operation’])){

// clean ‘operation’ input
$op = strtolower($_POST[‘operation’]) == “add” ? “Add” : “Sub”;

$math = new Math_Model();

$content_view = new View();
$content_view->Assign(“title”, $op);
$content_view->Assign(“body”, $_POST[‘var1’] . ” <b>$op</b> ” . $_POST[‘var2’] . ” <b>is</b> ” . $math->$op($_POST[‘var1’], $_POST[‘var2’]));
$content .= $content_view->Render(“index”.DS.”index”, false);

}
$this->Assign(‘content’, $content);

}

}
[/sourcecode]

Finally, how can we miss the ‘about’ page of an awesome app. I will do this by adding a new controller called “about_controller.php”, so a URL like this “http://yourdomain.com/about” should display the about information.

[sourcecode language=”php”]

<?php
class About_Controller extends Controller{
public function __construct() {
parent::__construct();
}

public function index() {
// Load page template file
$this—>Load_View(‘index’);
// load CSS file
$this->view->Set_CSS(‘public’ . DS . ‘css’ . DS . ‘style.css’);
// Set page title
$this->view->Set_Site_Title( “MVC Calculator App Demo” );

// HEADER
$header = new View();
$header->Assign(‘app_title’, “MVC Calculator App Demo”);
$this->Assign(‘header’, $header->Render(‘header’, false));

// FOOTER
$footer = new View();
$this->Assign(‘footer’, $footer->Render(‘footer’, false));

// content string
$content = “”;

$content_view = new View();

// I am hard-coding the content here, but we should really store these information in the database and use a Model to select them.
$content_view->Assign(“title”, “About”);
$content_view->Assign(“body”, “Thanks for using this app, this app was created in Jan 2013 as an example for the Basic MVC tutorial. The author is Oscar Liang. Free feel to modify or distribute. :)”);
$content .= $content_view->Render(“index”.DS.”index”, false);

$this->Assign(‘content’, $content);

}

}
[/sourcecode]

Modify the header.php file, to create a link to the about page, and a link to the home page.

[sourcecode language=”php”]
<div id=”page-header”>
<h1><?=$data[‘app_title’];? –></h1>
<a href=”/”>Home</a> | <a href=”/about/”>About</a></div>
[/sourcecode]

That’s it’s the end of Simple MVC framework tutorial! You now have a very basic working web application that uses MVC framework!
You can practice it by adding multiplication and division or more if you want as exercise.

The framework in this tutorial is only for demonstration and teaching purposes, if you would like to develop a fully functional and secure site/app, I recommend CodeIgnitor.

But of course, base on this Simple MVC framework tutorial, you can also develop your own MVC framework. For example, I have written this SQL-Free Blog CMS using MVC, and the framework is based on the Simple MVC framework tutorial.

You can download the code of Simple MVC framework tutorial Part 2 here