Building a CakePHP Site
In this series of tutorials, we will go step by step into building a website with CakePHP. The first part adresses the initial setting up of a bare bones website, with the main goal of getting a nice template in order. The series will progress from there, further optimizing the website, and adding admin features that will make the website easier to maintain.
Part 2 - Optimizing Our Template
Welcome to Part 2 of Building a CakePHP Site. In this edition, we are going to optimize our template with elements, and make some use of our database and multiple layout options.
Step 1 - Lets Start with the Menu
What we are going to do is seperate the menu from the rest of the site. This will let us reuse the same code over and over, as well as make some variations, if need be. Things we need to take into account are active menu items.
We’ll start by creating /app/views/elements/nav.thtml. Next we’ll take a look at the menu code that is currently in /app/views/templates/index.thtml. We need to remove this code and put it in our new nav.thtml.
<ul id="nav">
... all the menu code in between ...
</ul>
Now that you found the code, before you cut it, paste this above it. This way you don’t have to guess where that line goes after removing the menu code.
<?php echo $this->renderElement('nav') ?>
Now that you pasted the renderElement code, you can remove the menu UL listing. Paste it in nav.thtml, and test your site. Everything should look the same, but now, your menu is an element, and is being included.
Step 2 - Continue Process With Other Elements
We will continue cutting things from the index.thtml view, and putting them in their own elements, such as the search box, bread crumbs, and so on. When you are finished, your resulting index.thtml code should look something like this. Remember, that each of these renderElement(’filename’) is in the app/views/elements/ folder.
<body id="type-c">
<div id="wrap">
<div id="header">
<div id="site-name">Site name</div>
<?php echo $this->renderElement('nav') ?>
<?php echo $this->renderElement('search_box') ?>
</div>
<div id="content-wrap">
<div id="utility">
<?php echo $this->renderElement('nav_secondary') ?>
</div>
<div id="content">
<?php echo $this->renderElement('breadcrumb') ?>
<?php echo $this->renderElement('page_content') ?>
<?php echo $this->renderElement('footer') ?>
</div>
<div id="sidebar">
<?php echo $this->renderElement('featurebox1') ?>
<?php echo $this->renderElement('featurebox2') ?>
</div>
<?php echo $this->renderElement('poweredby') ?>
</div>
</div>
</body>
Just to make sure you understand, take a look at the renderElement that calls ‘footer’. This whole php echo line replaces the footer. So we place the actual footer in a file named app/views/elements/footer.thtml as follows.
<div id="footer">
<p>A note here to go in the footer</p>
<p><a href="#">Contact Us</a> | <a href="#">Privacy</a> | <a href="#">Links</a></p>
</div>
As you can see, we didn’t change the code or anything, all we are doing is moving code around, from index.thtml into their own elements. Then we call the code back with renderElement(’filename’). Seperating code like this will make it easier to edit, and make changes global.
Step 3 - Next Step
Not sure what to do next in this tutorial. I want to explain how to change the “active” menu items, so the most recent item you clicked on is active, and a different color according to the CSS. Next I want to work a way into using the database we created, to load the different themes. I’m thinking the body tag might be better off in the layout, because it chooses what “type” of layout to use. Then to choose a different layout, we just change a different layout other than “default”. Create a layout file for each type, a-f. Any Cake gurus wanna take a stab at it?!
