CodeIgniter 4 – Handling Views

CodeIgniter4, How to, Web Development / By

As our project becomes more complex having multiple views and views that contains another view, it can be difficult to manage each views if we don’t organise it accordingly. That is why we need to know how we can be able to breakdown our code and reuse it as much as we could. Here are the methods on how we can make our views more efficient and easy to handle, debug and update.

  1. Simple View Handling
  2. Breakdown the code using multiple Views
  3. Apply layout to handle view more efficiently
  4. Go further with the Layout
  5. Add Global Assets
  6. Add Specific Asset
  7. Add Partials to Layout

Simple View Handling

Assuming we have this Controller that calls a View which contains a Header, Content and a Footer all in one View file called about_us.php

Controller – App/Controllers/Site.php
public function services() 
{

    return view("site/services");
    
}
View – App/Views/site/services.php
<html>

<head>
    <title>
        Site Controller | Index Method
    </title>
</head>

<body>
    <header>
        Header Markup
    </header>
    
    <h1>Welcome to About Method</h1>
    
    <footer>
        Footer Markup
    </footer>
    
</body>

</html>

What if we have 20 pages with the same header and footer? Then suddenly, we need to change the content of the header. Updating each 20 pages can be inefficient. To solve this, we need to separate the header, the content and the footer into a different php file.

2. Breakdown the code using multiple Views

Here are the broken down code from the code above:

Controller – App/Controllers/Site.php
public function services() 
{

    echo view("site/include/header");
    echo view("site/about_us");
    echo view("site/include/footer");
    
}

As you can see, instead of the “return” command, we used the “echo” command since we are calling multiple Views.

View – App/Views/site/include/header.php
<html>

<head>
    <title>
        Site Controller | Index Method
    </title>
</head>

<body>
    <header>
        Header Markup
    </header>
View – App/Views/site/services.php
<h1>Welcome to About Method</h1>
View – App/Views/site/include/footer.php
    <footer>
        Footer Markup
    </footer>
    
</body>

</html>

3. Apply layout to handle view more efficiently

We first need to add a layout with following the code below

Layout – App/Views/layout/main.php
<html>

<head>
    <title>
        Site Controller | Index Method
    </title>
</head>

<body>
    <header>
        Header Markup
    </header>
    
    <!-- New -->
    <?= $this->renderSection("content") ?>
    
    <footer>
        Footer Markup
    </footer>
    
</body>

</html>

As you can see, we have added the following code: 

<?= $this->renderSection("content") ?>

This will render our content from the Controller

Now, we change our View to the code below;

View – App/Views/site/services.php
<?= $this->extend("layout/main") ?>

<?= $this->section("content") ?>
<h1>Welcome to Services page</h1>
<?= $this->endSection() ?>

4. Go further with the Layout

Let’s make use of this layout and apply it to both Header and Footer

Layout – App/Views/layout/main.php
<html>

<head>
    <title>
        Site Controller | Index Method
    </title>
</head>

<body>
    <header>
        <!-- New -->
        <?= $this->renderSection("headerContent") ?>
    </header>
    
    <?= $this->renderSection("content") ?>
    
    <footer>
        <!-- New -->
        <?= $this->renderSection("footerContent") ?>
    </footer>
    
</body>

</html>

Then update your view

View – App/Views/site/services.php
<?= $this->extend("layout/main") ?>

<?= $this->section("headerContent") ?>
<h1>This is our Header Markup</h1>
<?= $this->endSection() ?>

<?= $this->section("content") ?>
<h1>Welcome to Services page</h1>
<?= $this->endSection() ?>

<?= $this->section("footerContent") ?>
<h1>This is our Footer Markup</h1>
<?= $this->endSection() ?>

5. Add Global Assets

To call the Global Asset, we first need to edit our BaseController.php. It can be found in app/Controllers/BaseController.php.

Inside the BaseController.php, look for the following line of code: 

Controller – app/Controllers/BaseController.php
/**
 * An array of helpers to be loaded automatically upon
 * class instantiation. These helpers will be available
 * to all other controllers that extend BaseController.
 *
 * @var array
 */
protected $helpers = [];

Edit this code by adding “html” on the array. It will look something like the code below:

Controller – app/Controllers/BaseController.php
/**
 * An array of helpers to be loaded automatically upon
 * class instantiation. These helpers will be available
 * to all other controllers that extend BaseController.
 *
 * @var array
 */
protected $helpers = ["html"];

Adding “html” to the array will allow us to use the link_tag and the script_tag. Now, let’s go back to our main.php. Add the new code below:

Layout – App/Views/layout/main.php
<html>

<head>
    <title>
        Site Controller | Index Method
    </title>
    
    <!-- New -->
    <?= link_tag("public/css/style.css") ?>
    
</head>

<body>
    <header>
        <?= $this->renderSection("headerContent") ?>
    </header>
    
    <?= $this->renderSection("content") ?>
    
    <footer>
        <?= $this->renderSection("footerContent") ?>
    </footer>
    
    <!-- New -->
    <?= script_tag("public/js/script.js") ?>
    
</body>

</html>

NOTE:
CSS and JS Files should be place in the app/public/css and app/public/js respectively.

6. Add Specific Asset

Now, after declaring our Global Asset, sometimes we need to use a Specific Asset on a particular view . We do this by using the function renderSection (similar to layout). Using this function, we can add CSS and JS files to our html layout. Let’s update our main.php to the code below

Layout – app/Views/layout/main.php
<html>

<head>
    <title>
        Site Controller | Index Method
    </title>
    
    <?= link_tag("public/css/style.css") ?>
    
    <!-- New -->
    <?= $this->renderSection("attachCSSFiles") ?>
    
</head>

<body>
    <header>
        <?= $this->renderSection("headerContent") ?>
    </header>
    
    <?= $this->renderSection("content") ?>
    
    <footer>
        <?= $this->renderSection("footerContent") ?>
    </footer>
    
    <?= script_tag("public/js/script.js") ?>
    
    <!-- New -->
    <?= $this->renderSection("attachJSFiles") ?>
    
</body>

</html>

To apply the “attachCSSFiles” and “attachHSFiles” to our View, let’s go back to our Services View and add the “New” code.

View – App/Views/site/services.php
<?= $this->extend("layout/main") ?>

<!-- New -->
<?= $this->section("attachCSSFiles") ?>
<?= link_tag("public/css/services.css") ?>
<?= $this->endSection() ?>

<?= $this->section("headerContent") ?>
<h1>This is our Header Markup</h1>
<?= $this->endSection() ?>

<?= $this->section("content") ?>
<h1>Welcome to Services page</h1>
<?= $this->endSection() ?>

<?= $this->section("footerContent") ?>
<h1>This is our Footer Markup</h1>
<?= $this->endSection() ?>

<!-- New -->
<?= $this->section("attachJSFiles") ?>
<?= script_tag("public/js/services.js") ?>
<?= $this->endSection() ?>

7. Add Partials to Layout

For instance, we have the layout below which contains a navigation. 

Layout – app/Views/layout/main.php
<html>

<head>
    <title>
        Site Controller | Index Method
    </title>
    
    <?= link_tag("public/css/style.css") ?>
    <?= $this->renderSection("attachCSSFiles") ?>
    
</head>

<body>
    <header>
    
        <!-- New -->
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </nav>
        
        <?= $this->renderSection("headerContent") ?>
    </header>
    
    <?= $this->renderSection("content") ?>
    
    <footer>
        <?= $this->renderSection("footerContent") ?>
    </footer>
    
    <?= script_tag("public/js/script.js") ?>
    <?= $this->renderSection("attachJSFiles") ?>
    
</body>

</html>

In order for us to manage our code more efficiently, we need to break it down into smaller chunks. Let’s create a new Layout File and place our navigation there.

Layout : app/Views/layout/partials/nav.php

        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </nav>

Then, let’s update our Main Layout by adding the “New” code below:

Layout – app/Views/layout/main.php
<html>

<head>
    <title>
        Site Controller | Index Method
    </title>
    
    <?= link_tag("public/css/style.css") ?>
    <?= $this->renderSection("attachCSSFiles") ?>
    
</head>

<body>
    <header>
    
        <!-- New -->
        <?= $this->include("layout/partials/nav") ?> 
        
        <?= $this->renderSection("headerContent") ?>
        
    </header>
    
    <?= $this->renderSection("content") ?>
    
    <footer>
        <?= $this->renderSection("footerContent") ?>
    </footer>
    
    <?= script_tag("public/js/script.js") ?>
    <?= $this->renderSection("attachJSFiles") ?>
    
</body>

</html>