CodeIgniter Routes: URL Routing with Example

What are CodeIgniter Routes?

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

Routes in CodeIgniter are defined using the formula below:

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.

CodeIgniter Routes Example

Let us now look at a practical URL routing in CodeIgniter 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 our example, the value “1” is passed to the method.

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

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

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

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

Creating URL Routing for the Application

Let us create CodeIgniter URL routing for our tutorial project. Open application/config/routes.php and 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 that calls the index method in the Contacts controller.
• $route[‘create’] = ‘contacts/create’; defines a route create that points to the Contacts controller and calls the create method.
• $route[‘edit/:id’] = ‘contacts/edit’; defines a route edit that accepts a parameter of id and points to the edit method of the Contacts controller.
• $route[‘update/:id’] = ‘contacts/update’; defines a route update that accepts a parameter of id and points to the update method of the Contacts class.
• $route[‘delete/:id’] = ‘contacts/delete’; defines a route delete that 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 routes defined above:

Now that we have covered the routes, let us create the Contacts controller that will respond to the actions specified in the routes. Create a new file Contacts.php in application/controllers/Contacts.php and 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 that 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 views. The header and footer are common for all methods. The middle view is specific to the action, i.e. delete for the delete function and create for the create function. Another important thing to remember is that the views are loaded from the contacts subdirectory.

CodeIgniter Views

We still need one more step before we can test our CodeIgniter routes with parameters in the web browser. Let us create the views corresponding to the controller methods above. The following image shows what the application will look like:

Create the following files in application/views:

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

Create a new directory contacts inside application/views (application/views/contacts) and create the following files inside it:

index.php
create.php
edit.php

Your file structure should be as follows:

Let us now update the header.php file:

<!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 HTML code above loads Bulma CSS from a CDN.

The following is the code for the footer.php file:

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

Let us 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.

FAQs