Skip to content

MVC

Jump to bottom Edit New page
World Wide Web Server 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:[code] $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! [/code] 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 it's 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)
  1. Build your first controller that puts all the pieces back together again
  2. "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[code]

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title><?= $title ?></title> </head> <body>

<?= $current_page ?>

<?= $navigation ?>
<?= $content ?>
</body> </html> [/code] 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[code]

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

Finally, some content: application/views/content/link_list.php[code] <? foreach($links as $link): ?>

<?= anchor($link->link_url,$link->link_title) ?><?= anchor('edit/'.$link->id,"Edit") ?>

<? endforeach; ?> [/code] 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[code] ... 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); } [/code] 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 (capital 'L')[code] <?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(); } } ?> [/code] 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[code] 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); } [/code] 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
Add a custom sidebar
Clone this wiki locally