Simple MVC framework tutorial part 2

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

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

8 thoughts on “Simple MVC framework tutorial part 2

  1. Rishi

    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
  2. Frederic

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

    Reply
  3. Zuzuk

    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
  4. Eskinder

    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
  5. Mamuka Arabuli

    nice tutorial , but link for download not working

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

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Are you Robot? *

I don't look at blog comments very often (maybe once or twice a week), so if you have any questions related to multirotor please post it on this forum IntoFPV.com... You're likely to get a response from me faster on there.