Working with Elements and Layout In CakePHP Framework

This instructional exercise is intended to enable you for CakePHP to subject combination by making components and format.
Components are the little and reusable bits of view code. Formats are the layout records that contain presentational code together with rendered Elements. In this instructional exercise, we’ll partition the fundamental bootstrap format into components and render those components into our custom design.

According to our past instructional exercise, we officially recorded the blog entries from the database and furthermore actualized include, alter and erase tasks. Presently we’ll change the default layout with our custom format.
Assume that we have the following basic bootstrap template HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>CakePHP Tutorial by Queryanswer.com</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="#">Queryanswer.com</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.

READ  PayPal Instant Notification (IPN) is a message service that allows you to integrate your PayPal
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
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 Queryanswer.com</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="#">Queryanswer.com</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.

READ  Connecting PHP to MySQL on Bluemix
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!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.

1
2
3
4
5
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