Simple MVC framework tutorial part 2

by Oscar

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:

3

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]

45

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

Leave a Comment

By using this form, you agree with the storage and handling of your data by this website. Note that all comments are held for moderation before appearing.

8 comments

thieryl 5th July 2016 - 11:23 am

Hello,
can you please post the download links

Reply
Daniel 15th May 2015 - 1:48 pm

Can’t find the download link.

Reply
jkjkj 17th September 2014 - 10:43 am

thanks

Reply
Rishi 10th August 2014 - 7:09 pm

HI Oscar

I downloaded part2 and placed it in htdocs folder. But when m opening localhoost/mvc_framework_part2/ , it is giving error. When I removed slash from /public/$1 in htaccess to make it public/$1 , it works.

Similarly I need to remove slash from another htaccess file in public folder to make /index.php?url=$1 to index.php?url=$1

Similarly I need to remove all slashes from home and about links to make it work.

Can you guide whether its right or not. But I am getting a problem.

If i keep slash in front of about link href=”/about/” , this url redirects to localhost/about/

Please guide me on this. If any settings need to be done in xampp.

Reply
Frederic 14th June 2014 - 10:51 am

Remarkable things here. I am very satisfied to look your post.
Thank you so much and I am looking forward to touch you.

Reply
Zuzuk 25th January 2014 - 2:27 pm

Hello, thank you for this tutorial.

However, when launching the website on my local server it shows the error:

Fatal error: Class ‘Math_Model’ not found in C:…mvc_framework_part1controllersindex_controller.php on line 13

Do you have any idea what is that error?

Thank you

Reply
Eskinder 30th November 2013 - 7:26 am

Best MVC tutorial.
Although i have one question.
My CSS file is not loading unless i put

echo $this->data[‘css’];

in the Set_CSS() function of View.php.

Reply
Mamuka Arabuli 1st November 2013 - 3:53 am

nice tutorial , but link for download not working

download the code of Simple MVC framework tutorial Part 2 here
it is not working

Reply