Using Layout in CodeIgniter 4

Posted in CodeIgniter 4, Tutorial PHP by samsonasik on November 25, 2016

CodeIgniter 4 is not ready for production use, but we can already play with it. We can apply layout support to avoid repetitive header/footer/sidebar html code in our application’s views by provide helper and autoload it in the hook.

Ok, let’s start, first, we can clone a CI4 project by run command:

1
git clone https://github.com/bcit-ci/CodeIgniter4.git

We can use PHP-Development server launcher by go to CodeIgniter4 directory and run command:

1
php serve.php

and we will get the page:
ci4
The view of “Home::index()” of controller is placed at application/Views/welcome_message.php:

1
2
3
4
5
6
7
8
application/
├── Config
├── Controllers
│   └── Home.php
├── Views
│   ├── errors
│   ├── form.php
│   └── welcome_message.php

with code called in the controller like the following:

1
2
3
4
5
6
7
8
9
10
11
<?php namespace App\Controllers;
 
use CodeIgniter\Controller;
 
class Home extends Controller
{
    public function index()
    {
        return view('welcome_message'); 
    }
}

For example, we need to move the header and footer to the separate file, named application/Views/layout.php:

1
2
3
4
5
6
7
8
9
application/
├── Config
├── Controllers
│   └── Home.php
├── Views
│   ├── errors
│   ├── form.php
│   ├── layout.php
│   └── welcome_message.php

So, Let’s prepare the layout:

1
2
3
4
5
6
7
8
9
10
11
12
<html>
   <head></head> <!-- move code from welcome_message.php's html <head> to here -->
   <body>
        <!-- move code from welcome_message.php's style to here,
             or use separate file for css and apply to <head>
        -->
     
        <div class="wrap">
            <?php echo $content; ?>
        </div>
   </body>
</html>

Now, we can write a helper to wrap it, for example, named render helper. We can create a file named application/Helpers/render_helper.php:

1
2
3
4
5
6
application/
├── Config
├── Controllers
├── Helpers
│   └── render_helper.php
├── Views

Our render helper can have function() for render view with layout functionality, which we get the content of view, and then apply to the layout:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
 
if ( ! function_exists('render'))
{
    function render(string $name, array $data = [], array $options = [])
    {
        return view(
            'layout',
            [
                'content' => view($name, $data, $options),
            ],
            $options
        );
    }
}

If most of the controllers will use the render helper, we can then autoload it in the Events:

1
2
3
4
5
6
application/
├── Config
│   ├── Events.php
├── Controllers
├── Helpers
├── Views

with post_controller_constructor event point:

1
2
3
4
5
6
7
<?php namespace Config;
 
use CodeIgniter\Events\Events;
 
Events::on('post_controller_constructor', function() {
    helper('render');
});

And now, we are ready to use the render() function in the controller:

1
2
3
4
5
6
7
8
9
10
11
<?php namespace App\Controllers;
 
use CodeIgniter\Controller;
 
class Home extends Controller
{
    public function index()
    {
        return render('welcome_message'); 
    }
}

Done 😉

Welcome to CodeIgniter

version 4.0-dev

The page you are looking at is being generated dynamically by CodeIgniter.

If you would like to edit this page you'll find it located at:

		
			application/Views/welcome_message.php
		
		

The corresponding controller for this page is found at:

		
			application/Controllers/Home.php
		
		

If you are exploring CodeIgniter for the very first time, you should start by reading the (in progress) User Guide.