Skip to content

MVC

Jump to bottom Edit New page
Derek Jones edited this page Jul 4, 2012 · 14 revisions

Category:Help::TipsAndTricks [h2]Purpose[/h2] This tutorial will step through what MVC is, why it exists, and how CI supports it. Once this is all done, I'll have built a very very simple app (an application to show some links) - but more importantly will have explained the MVC model.

[h2]MVC[/h2] The model-view-controller (MVC) programming method is a way to split up the 3 major functions of a modern database-driven website:

  1. Database functions (CRUD)
  2. Application Logic (i.e. passwords must be 8 characters long)
  3. Presentation (HTML)

Each of these elements are represented by the MVC model

  1. Model - database
  2. Controller - application logic
  3. View - HTML pages

[h2]Some Rules[/h2] When it comes to MVC programming, there are some rules that need to be considered. Here are a few to help get started: [b]Don’t[/b] do these: Views:

  1. Never access the database
  2. Never use anything more complicated than loops and if statements Controllers:
  3. Never contain HTML code
  4. Never access the database Models:
  5. Never ever ever spit out HTML

[b]DO[/b] these: Views:

  1. Are modular - code fragments
  2. Contain loops and simple if logic Controllers:
  3. Scrub all information between the view and the database
  4. Provide all data needed by the view
  5. Applies business rules to data
  6. Calls database models to store/retrieve data
  7. Handles all errors/error messages

Models:

  1. Apply limited business logic - if any - to database calls
  2. Captures and sends any error to the controller
  3. Performs minimal data sanity checks

[h2]Creating the application[/h2]

[h3]Database[/h3] Let's start with the 'links' table in your site database. It will need the following fields: id - autoincrement link_title - varchar(50) link_url - varchar(255)

Feel free to add a few sample data into the database.

Create a user for the database. Try avoiding using the 'root' (sa) account to ensure a level of security is maintained.

[h3]Code Igniter Database Configuration[/h3] Using a default CI installation, open the system/application/config/database.php file:```php

$db['default']['hostname'] = "localhost"; $db['default']['username'] = "username"; //don't use root $db['default']['password'] = "password"; $db['default']['database'] = "database"; $db['default']['dbdriver'] = "mysql"; //there are other drivers available!

I will assume you can configure the rest of CI, so I'm not going to discuss that.  I prefer to autoload the database, so go ahead and do that.

[h3]Where do I go now?[/h3]
The Model expects input from the controller
the view needs a controller to be displayed
the controller needs input from the view
the model needs to put its data somewhere
...ugh

Here's the easiest approach that I've found:
1.  Build your desired HTML/CSS layout.
2.  De-construct the interface into the following 3 categories:
 - layout - just the structure
 - common data across all (most) pages:
   - - footer
   - - affiliate links/ad space
 - stuff that changes on each page:
   - - navigation
   - - page title
   - - meta tags (keywords, description)
3. Build your first controller that puts all the pieces back together again
4. "Get dynamic" with the model, forms, and stuff...

[h4]The view(s)[/h4]
I've gone ahead with an ultra-super-simple view.  It's almost insulting; but bear with me.
application/views/layout/main.php```php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;&lt;?= $title ?&gt;&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
<h1>&lt;?= $current_page ?&gt;</h1>
<div>&lt;?= $navigation ?&gt;</div>
<div>&lt;?= $content ?&gt;</div>
&lt;/body&gt;
&lt;/html&gt;

You can see that there are three variables: title - the page title current_page - a header tag indicating the page title navigation - a block for page navigation content - a block for code fragments

application/views/navigation/nav_main.php```php

  • <?= anchor("","Home") ?>
  • <?= anchor("links","Links") ?>
I'm using the URL helper in that view to make my links

Finally, some content:
application/views/content/link_list.php```php

&lt;?php foreach($links as $link): ?&gt;
<p>&lt;?= anchor($link->link_url,$link->link_title) ?&gt;&lt;?= anchor('edit/'.$link->id,"Edit") ?&gt;</p>
&lt;?php endforeach; ?&gt;

Notice the similarity between this view and the database?

[h4]The controller[/h4] Let's use the controller to put some of it together: application/controllers/welcome.php```php

//function Welcome() (php4, php5 below) function __construct() { parent::Controller(); $this->load->helper('url');
}

function index() { $data = array( 'title' => 'Test Application', 'current_page' => 'Welcome', 'navigation' => $this->load->view('navigation/nav_main','',true), 'content' => '' ); $this->load->view('layout/main',$data); }

Notice that I'm setting the keys of the $data array to be the same as the variable names I used in the view pages.  You'll also notice that I did something special with the navigation variable - I loaded a view into it.
Loading a view with "true" as the third argument returns a processed string rather than loading the view to the page.  This enables multiple view pages placed into a common layout! :)

You'll also notice that I left the 'content' blank. (I'll get to that in a minute)  If you were to load your page now, you will see the basic layout with the "Welcome" h1 tag and a "Test Application" web page title.  There's also the navigation unordered list (one of the links won't work)

[h4]The model[/h4]
To get the list of links from the database, we need to build a model:
application/models/links.php (lowercase 'L' for the file name)```php

&lt;?php
//capital L for class name
class Links extends Model {

  function Links() {
    parent::Model();
  }

  function get_links() {
   $query = $this->db->get('links'); //same as Select * from links
   return $query->result();
  }
}
?&gt;

This model provides a simple function - get_links - to get all records from the links database we created earlier.

Now, let's update the controller: application/controllers/welcome.php```php

function index() { $this->load->model('links'); $links['links'] = $this->links->get_links(); $data = array( 'title' => 'Test Application', 'current_page' => 'Welcome', 'navigation' => $this->load->view('navigation/nav_main','',true), 'content' => $this->load->view('content/link_list',$links,true) ); $this->load->view('layout/main',$data); }

Now I've gotten the data from the database and put it into the $links['links'] array.  At the same time, I've also loaded another view snippet into the $data['content'] array - but the second argument is the $links array instead of an empty string.

If you reload the page, you should see a list of all the links you entered into your database!

[h2]Conclusion[/h2]
Hopefully, this helps demonstrate a means to create a model, view, and controller to display information from your database.

Feel free to add to and edit this Wiki page as you see fit :)
Add a custom footer

Clone this wiki locally