CodeIgniter 4 Create Master Layout

Same template we want to share with each view of application. Only the content should be dynamic. Header, Footer, Sidebar these sections are common.

You have seen many websites in which several sections are common to every page like it’s header, footer, menus etc. Rest the middle content only changes.

Master layout is nothing any special in CodeIgniter 4, only we can create a layout which we can share inside any of the view file. Create reusable layout in application termed as Master layout.

There is no specific location to store master layouts in CodeIgniter 4. We can put any where and link with view files.

Create a folder with name layout inside /app/Views. Inside layout folder create a file with any name say master.php

Open master.php from /app/Views/layout and write this code into it.

<html>

     <head>

        <title><?= $this->renderSection("pageTitle") ?></title>

     </head>

     <body>
        <header>
          ...
        </header>
  
        <nav>
          ...
        </nav>
  
        <!--Area for dynamic content -->
        <?= $this->renderSection("content") ?>
          
       <footer>
          ...
       </footer>   

     <body>

</html>

$this->renderSection() is the method which can dynamic content from views. pageTitle, content are the names of sections. This section should be defined inside view files. We can have many sections as we want.

Now, we can share this common layout to each view of application.

Create few more view files inside /app/Views like – about-us.php, contact-us.php

Open about-us.php and write this code into it.

<?=$this->extend("layout/master")?>

<?=$this->section("pageTitle")?>
  About Us
<?=$this->endSection()?>
  
<?=$this->section("content")?>

<h1>Welcome to About us page</h1>
<p>
    This is a sample page of our website
</p>

<?=$this->endSection()?>

$this->extend(“layout/master”) Using master layout inside about-us page. $this->section(“pageTitle”), $this->section(“content”) Define section which contains data according to view.

When we run this, Output as –

Output

<html>

     <head>

        <title>About Us</title>

     </head>

     <body>
        <header>
          ...
        </header>
  
        <nav>
          ...
        </nav>
  
        <!--Area for dynamic content -->
        <h1>Welcome to About us page</h1>
        <p>
            This is a sample page of our website
        </p>
          
        <footer>
          ...
        </footer>   

     <body>

</html>

Open contact-us.php and write this code into it.

<?=$this->extend("layout/master")?>

<?=$this->section("pageTitle")?>
  Contact Us
<?=$this->endSection()?>
  
<?=$this->section("content")?>

<h1>Welcome to contact us page</h1>
<p>
    Hi, How are you?
</p>

<?=$this->endSection()?>

Output

 <head>

    <title>Contact Us</title>

 </head>

 <body>
    <header>
      ...
    </header>

    <nav>
      ...
    </nav>

    <!--Area for dynamic content -->
    <h1>Welcome to contact us page</h1>
    <p>
        Hi, How are you?
    </p>

    <footer>
      ...
    </footer>   

 <body>

Now, we have a common layout which we have shared with about-us.php and contact-us.php page views. All the things in both the pages same only the sections content is dynamic.

Next Topic >> Include Subviews to Master