CakePHP Tutorial Part 3: Working with Elements and Layout

In our previous tutorial, you have learned add, edit, and delete functionality in CakePHP. Now we’ll show how can you integrate theme in CakePHP using your custom layout. CakePHP’s Element and Layout feature helps you to customize your application layout. This tutorial is designed to help you for CakePHP theme integration by creating elements and layout.

cakephp-tutorial-working-with-elements-layout-by-codexworld

Elements are the small and reusable bits of view code. Layouts are the template files that contain presentational code together with rendered Elements. In this tutorial, we’ll divide the basic bootstrap template into elements and render those elements into our custom layout.

As per our previous tutorial, we already listed the blog posts from the database and also implemented add, edit and delete operations. Now we’ll change the default template with our custom template.

Assume that we have the following basic bootstrap template HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CakePHP Tutorial by CodexWorld</title>
    <!-- Bootstrap Core CSS -->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Core JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">CodexWorld</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="#">Posts</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- Page Content -->
    <div id="content" class="container">
        <div class="row">
            <!-- Main contents will goes here -->
        </div>
    </div>
    <footer>
        <div class="row">
            <div class="col-lg-12">
                <p>Copyright &copy; Your Website 2015</p>
            </div>
        </div>
    </footer>
</body>
</html>

Creating Element:

Based on the HTML we’ll create three elements head, header, and footer. In the src/Template/Element/ directory create three files named head.ctp, header.ctp and footer.ctp.

head.ctp file contains the following code:

<?php
    
echo $this->Html->charset();
    echo 
$this->Html->css('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css');
    echo 
$this->Html->script('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js');
?>
<title>CakePHP Tutorial by CodexWorld</title>

header.ctp file contains the following code:

<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">CodexWorld</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li>
                    <?= $this->Html->link('Posts''/'?>
                </li>
            </ul>
        </div>
    </div>
</nav>

footer.ctp file contains the following code:

<footer>
    <div class="row">
        <div class="col-lg-12">
            <p>Copyright &copy; Your Website 2015</p>
        </div>
    </div>
</footer>

Creating Layout:

Layouts are stored into the src/Template/Element/Layout/ directory. Create your custom layout src/Template/Element/Layout/frontend.ctp. In this file, elements would be rendered with the main content. frontend.ctp file contains the following code.

<!DOCTYPE html>
<html lang="en">
<head>
    <?= $this->element('head'?>
</head>
<body>
    <?= $this->element('header'?>
    <!-- Page Content -->
    <div id="content" class="container">
        <?= $this->Flash->render() ?>
        <div class="row">
            <?= $this->fetch('content'?>
        </div>
    </div>
    <?= $this->element('footer'?>
</body>
</html>

Use Custom Layout:

You need to tell CakePHP to use your custom layout. In you controller (PostsController) set the layout into the initialize() function. Also you can use the different layout for different function by defining the layout into different functions.

public function initialize(){
    
parent::initialize();
    
// Set the layout
    
$this->viewBuilder()->layout('frontend');
}

Testing:

Open the posts listing page (http://localhost/cakephp/) on the browser, you’ll see the post list with the custom layout.

cakephp-tutorial-custom-layout-by-codexworld

Do you want to get implementation help, or enhance the functionality of this script? Click here to Submit Service Request

11 Comments

  1. Govind Said...
  2. Sakeb Adéchinan Said...
  3. Monish Saha Said...
  4. Bhanu Kiran Said...
  5. Distromob Said...
  6. Surya Said...
  7. Jo Hein Said...
  8. Sandeep Said...
  9. Sid Said...
  10. Vipul Said...

Leave a reply

keyboard_double_arrow_up