CodeIgniter Routes: Learn with Example

What are Routes?

Routes are responsible for responding to URL requests. Routing matches the URL to the pre-defined routes. If no route match is found then, CodeIgniter throws a page not found an exception.

Routes are defined using the formula

example.com/Controller/Method/Parameter/ 

HERE,

• Controller -is mapped to the controller name that should respond to the URL.
• Method – is mapped to the method in the controller that should respond to the URI request.
• Parameter – this section is optional.

Let's now look at a practical example.

Consider the following URL

http://localhost:3000/contacts/edit/1

HERE,

• The name of the controller responding to the above URL is "contacts"
• The method in the controller class Contacts is "edit"
• The edit method accepts a parameter. In the case of our example, the value "1" is passed to the method.

Routes Example

Here is a brief background of what we plan to do:

• Routing – routing is responsible for responding to URL requests. Routing matches the URL to the pre-defined routes. If not route match is found then CodeIgniter throws a page not found exception.
• Controllers – routes are linked to controllers. Controllers glue the models and views together. The request for data / business logic from the model and return the results via the views presentation. Once a URL has been matched to a route, it is forwarded to a controller public function that interacts with the data source, business logic and returns the view that displays the results.
• Views – views are responsible for presentation. A view is usually a combination of HTML, CSS and JavaScript. This is the part is responsible for displaying the web page to the user. Typically, the data displayed is usually retrieved from the database or any other available data sources.

To learn how to implement routers on a real-world project, we will assume that we are creating an application for managing contact details. The following table shows the URLs that will be working with.

We will create the routes of our application based on the above table. We have defined the URLs, CodeIgniter route, and mapped them to the respective controller and method names.

Creating URL's for the Application

Let's create routes for our tutorial project

Open application/config/routes.php

Modify the routes to match the following

$route['default_controller'] = 'welcome';
$route['contacts'] = 'contacts';
$route['create'] = 'contacts/create';
$route['edit/:id'] = 'contacts/edit';
$route['update/:id'] = 'contacts/update';
$route['delete/:id'] = 'contacts/delete';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;

HERE,

• $route['default_controller'] = 'welcome'; defines the default controller Welcome.
• $route['contacts'] = 'contacts'; defines a contacts route which calls the index method in the Contacts controller
• $route['create'] = 'contacts/create'; defines a route create which points to the Contacts controller and calls the create method.
• $route['edit/:id'] = 'contacts/edit'; defines a route edit which accepts a parameter of id and points to the edit method of Contacts controller
• $route['update/:id'] = 'contacts/update'; defines a route update which accepts a parameter of id and points to the update method of the Contacts class.
• $route['delete/:id'] = 'contacts/delete'; defines a route delete which accepts a parameter of id and points to the delete method of the Contacts controller.

The following table shows the respective URLs derived from the above defined routes

Now that we have covered the routes let's create the Contacts controller that will be responding to the actions specified in the routes.

Create a new file Contacts.php in application/controllers/Contacts.php

Add the following code

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Contacts extends CI_Controller {

    public function __construct() {
        parent::__construct();
        $this->load->helper('url');
    }

    public function index() {
        $this->load->view('header');
        $this->load->view('contacts/index');
        $this->load->view('footer');
    }

    public function create() {
        $this->load->view('header');
        $this->load->view('contacts/create');
        $this->load->view('footer');
    }

    public function edit($id) {
        $this->load->view('header');
        $this->load->view('contacts/edit');
        $this->load->view('footer');
    }

    public function update($id) {
        $this->load->view('header');
        $this->load->view('contacts/update');
        $this->load->view('footer');
    }

    public function delete($id) {
        $this->load->view('header');
        $this->load->view('contacts/delete');
        $this->load->view('footer');
    }
}

HERE,

• Class contacts extends CI_Controller {..} defines our controller class and extends the CI_Controller class which comes with CodeIgniter.
• The methods defined above correspond to the routes we defined and those with parameters like delete accept a parameter of $id
• Notice the functions load three (3) views. The header and footer are common for all methods. The middle view is very specific to the action, i.e. delete for delete function create a view for creating a function, etc. Another important thing to remember is that the views are loaded from the contacts subdirectory.

Views

We still need to take one more step before we can test our routes in the web browser. Let's create the corresponding views to the above controller methods.

The following image shows what your application will look like

Create the following files in application/views

header.php – this file will contain contacts app menu and the header
footer.php – this files will contain the application footer.

Create a new directory of contacts in views application/views/contacts

Create the following files inside

index.php
create.php
edit.php 

Your file structure should be as follows

Let's now update the header.php

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>CodeIgniter Routes</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css">
        <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
    </head>
    <body>
        <section class="section">
            <div class="container">
                <h1 class="title">CI Contacts v1</h1>
                <h2 class="subtitle">CodeIgniter contacts management app</h2>
                <div class="columns">
                    <div class="column is-one-quarter">
                        <aside class="menu">
                            <p class="menu-label">
                                General
                            </p>
                            <ul class="menu-list">
                                <li><a class="is-active" href="#">Dashboard</a></li>
                                <li><a href="/<?=site_url('contacts/create')?>">New Contact</a></li>
                                <li><a href="/<?=site_url('contacts/edit/1')?>">Edit Contacts</a></li>
                            </ul>
                            <p class="menu-label">
                                Settings
                            </p>
                            <ul class="menu-list">
                                <li><a href="#">SMS</a></li>
                                <li><a href="#">Email</a></li>
                            </ul>
                        </aside>
                    </div>

HERE,

• The above HTML code loads Burma CSS from a CDN network.

The following is the code for the footer.php

            </div>
            </div>
        </section>
    </body>
</html>

Let's now add the code for the index.php, edit.php and create.php files for contacts.

index.php
<div class="column">Index content goes here...</div>
edit.php
<div class="column">Edit content goes here...</div>
create.php
<div class="column">Create content goes here...</div>

You can save all the changes that have been made.

Open the following URL in your web browser

http://localhost:3000/contacts/

you can click on the New Contact and Edit Contact links and see what happens

Summary

In this tutorial, we have learned how to create routes in CodeIgniter for a real-world example application and covered the basics of routing that you need to know to get started developing CodeIgniter.