CodeIgniter Controllers, Views Routing: Learn with Example App

Details

In this tutorial, you are going to learn the following topics.

In this tutorial, you will learn-

How to create a new CodeIgniter project

We will use Composer to create a new project. I will be using the PHP built-in server, so it's not necessary to have extra software such as Apache. In this tutorial, we are using the Windows operating system. Therefore, we have created a Sites folder on drive C. You can use any directory that is suitable for you.

Open the command line/terminal and run the following command 

cd C:\Sites

We will now create a CodeIgniter project using Composer. Run the following command 

composer create-project CodeIgniter/framework ci-app

HERE,

When the above command has completed running, you should be able to results similar to the following in the terminal

Run the following command to browse to the newly created project directory ci-app 

cd ci-app

Let's now start the PHP built-in web server 

 php -S localhost:3000

HERE,

Open the web browser and browse the following URL

http://localhost:3000/

You will get the following page

If you can see the above page then congratulations, you have successfully installed CodeIgniter.

As you can read from the above web page, the page displayed above is rendered by the view located in application/views/welcome_message.php and the responsible controller is located in application/controllers/Welcome.php

CodeIgniter Routing

For now, our application has only a single URL which is the home page. In this section, we will customize the home section. We will create some new URLs that will respond to the different requests.

Let's start with the home page route

Open the routes file as indicated by the path below 

application/config/routes.php
You should be able to see the following content 
$route['default_controller'] = 'welcome';
$route['404_override'] = '';
$route['translate_uri_dashes'] = FALSE;

HERE,

Let's now look at the controller method responsible for displaying the home page that we saw when we opened the URL http://localhost:3000/ in the web browser

Open the following file 

application/controllers/Welcome.php

You should be able to see the following code 

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

class Welcome extends CI_Controller {

	public function index()
	{
		$this->load->view('welcome_message');
	}
}

HERE,

So far, we have only explored what comes out of the box with CodeIgniter, let's now try to make some changes. We will create our home page and replace the default page

Create a new file in application/views/home.php

Add the following code to home.php 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Hello CodeIgniter!</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">
                    CodeIgniter Hello World
                </h1>
            </div>
        </section>
    </body>
</html>

HERE,

The above HTML code loads Burma SSS framework and font from CDN network create a very basic HTML document. It applies very simple CSS rule from Burma CSS framework.

Open the following URL in your browser

http://localhost:3000/

You should be able to see the following

Great, we have just successfully modified the home page. Moving on, let's define our route. Let's assume our application also needs to be able to show the about us page.

Create a Route

Open the routes file application/config.routes.php

Add the following route 

$route['about-us'] = 'welcome/about_us';

HERE,

Create a Controller

Let's now define the controller method about us

Open application/controllers/Welcome.php

Add the following method 

        public function about_us(){
            $this->load->view('about_us');
        }

HERE,

Create a View

Let's now create the view that we just referenced in the above section

Create a new file about_us.php in application/views/about_us.php

Add the following code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>About CodeIgniter!</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">
                    About us yap...                
                </h1>
            </div>
        </section>
    </body>
</html>

We are good to go, open the following URL in your web browser

http://localhost:3000/index.php/about-us

You will see the following page

If you are able to see the above page then congratulations, you have successfully created a simple application in CodeIgniter.

Summary

In this tutorial, we covered three (3) major components that make up a CodeIgniter application. We looked at routes and how to define them, controllers and how to create methods that respond to route requests and created simple views that are returned to the users when they request for a resource.

 

YOU MIGHT LIKE: