In our previous tutorial, you learned how to add, edit and delete functions in CakePHP. We will now show you how to add a theme to CakePHP using your custom layout. With CakePHP’s layout elements and features, you can customize the layout of your app. This tutorial is to help you enter a CakePHP theme by creating elements and layouts.
Elements are small, reusable bits of display code. A layout is a template file that contains presentation code in addition to what is shown. In this tutorial, we will break down the basic templates for turning elements into elements and displaying those elements in our custom layout.
As per our previous tutorial, we’ve created a list of blog posts from the database and also implemented operations to add, edit and delete. We will now change the default template with our custom template.
Creating Element
create elements file header, footer and navbar. In the Templates/Element/ directory create files named header.php, footer.php and navbar.php.
Include css and js files in webroot/css and webroot/js folder like below.
<?php echo $this->Html->css(['bootstrap.min']) ?> <?php echo $this->Html->script(['jquery.min','popper.min','bootstrap.min']); ?>
Templates/Element/header.php
<?php $cakeDescription = 'CakePHP 4 Tutorial for Beginners Basic to Advance';?>
<?= $this->Html->charset() ?>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
<?= $cakeDescription ?>:
<?= $this->fetch('title') ?>
</title>
<?= $this->Html->meta('icon') ?>
<link href="https://fonts.googleapis.com/css?family=Raleway:400,700" rel="stylesheet">
<?php echo $this->Html->css(['bootstrap.min']) ?>
<?= $this->fetch('meta') ?>
<?= $this->fetch('css') ?>
<?= $this->fetch('script') ?>
Templates/Element/navbar.php
<nav class="navbar navbar-expand-md navbar-light" style="background-color:#e3f2fd;">
<a href="<?php echo $this->Url->build(['controller'=>'Users', 'action'=>'index']) ?>"
class="navbar-brand"><b>Webs Codex</b>
</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Profile</a>
<a href="#" class="nav-item nav-link">Messages</a>
</div>
<div class="navbar-nav ml-auto">
<?php if ($this->Identity->isLoggedIn()) { ?>
<a class="nav-item nav-link"><?php echo ucwords($this->Identity->get('name'));?></a>
<a href="<?php echo $this->Url->build(['controller'=>'Users','action'=>'logout']) ?>" class="nav-item nav-link">Logout</a>
<?php } else { ?>
<a href="<?php echo $this->Url->build(['controller'=>'Users', 'action'=>'add']) ?>" class="nav-item nav-link">Sign Up</a>
<a href="<?php echo $this->Url->build(['controller'=>'Users', 'action'=>'login']) ?>" class="nav-item nav-link">Login</a>
<?php } ?>
</div>
</div>
</nav>
Templates/Element/footer.php
<!-- Footer -->
<footer class="page-footer font-small stylish-color-dark pt-4 ">
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2020 Copyright:
<a href="https://www.webscodex.com/"> Webs Codex.com</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<?php echo $this->Html->script(['jquery.min','popper.min','bootstrap.min']); ?>
Create Layout
Layout are stored into the Templates/Element/Layout/ directory.
<!DOCTYPE html>
<html>
<head>
<?= $this->element('header'); ?>
</head>
<body>
<?= $this->element('navbar'); ?>
<?= $this->Flash->render(); ?>
<?= $this->fetch('content'); ?>
<?= $this->element('footer'); ?>
</body>
</html>
Output
You can always support by sharing on social media or recommending my blog to your friends and colleagues. If you have any suggestions / problems about this tutorial, please comment on the form below.😊
