In this tutorial, we will learn how to convert html template into CakePHP template. Website application build on CakePHP without any custom theme uses default layout of CakePHP. The look & feel of default template is not so good. Some times you need to show best Html template layout as per client requirement.
We can integrate html theme in cakephp using Element & Layout features. This kind of features helps you to customize your CakePHP application layout.
If you are a begginer in cakePHP, then you should know How to convert html theme into CakePHP
This tutorial will help you to integrate theme/template in CakePHP.
Let's suppose , we have the following Html bootstrap Template.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CakePHP Tutorial</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<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="#">conversion of html template into CakePHP</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="#">Users</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: @2016</p>
</div>
</div>
</footer>
</body>
</html>
Replace your Html template content (i.e Head, header, footer) into .ctp files under Elements folder: (Path: /app/View/Elements )
create three Element files named head.ctp, header.ctp and footer.ctp.
1. 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</title>
2. 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="#">conversion of html template into CakePHP</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<?php $this->Html->link('Users', '/') ?>
</li>
</ul>
</div>
</div>
</nav>
3. footer.ctp file contains the following code:
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright: @ 2016</p>
</div>
</div>
</footer>
Create Layout file:
Layouts folder files are stored at /app/View/Layouts directory.
Create your custom layout at /app/View/Layouts/mylayout.ctp.
In this file, elements would be render & fetch with the main content.mylayout.ctp file contains the following code.
<!DOCTYPE html>
<html lang="en">
<head>
<?php $this->element('head') ?>
</head>
<body>
<?php $this->element('header') ?>
<!-- Page Content -->
<div id="content" class="container">
<?php $this->Flash->render() ?>
<div class="row">
<?php $this->fetch('content') ?>
</div>
</div>
<?php $this->element('footer') ?>
</body>
</html>
Now, You need to tell CakePHP Application to use your custom layout instead of default. To do this, set your custom layout (mylayout.ctp) in Controller file.
public function index()
{
// Set the layout
$this->layout = 'mylayout';
}
0 Comment(s)