Tuesday, November 10, 2009

How to create a Custom CakePHP Template

So, I hope by far you have downloaded CakePHP (A.K.A. 'Cake'), installed it, changed security settings and connected to database.

You have seen the messages in the welcome screen has changed after each of your action.

Now you will note the following:
Editing this Page
1. To change the content of this page, create: APP/views/pages/home.ctp.
2. To change its layout, create: APP/views/layouts/default.ctp.
3. You can also add some CSS styles for your pages at: APP/webroot/css.
Create DEFAULT Home Page


So, I created a new folder called 'pages' under app/views/ . And then I created a new file (using any text editor) and saved that file as 'home.ctp' under 'app/views/pages/'.

Now point your browser to:
http://caketest.local/

You can see all the messages are gone!!! You can see this is a nearly empty page!


As the name says, 'home.ctp' is the default homepage for your website. You can write anything here (with HTML tags). Those will be displayed at your homepage.

Create Default LAYOUT

Now create another new file (using any text editor) and save it as 'default.ctp' under 'app/views/layouts/' folder.

'default.ctp' is the default layout to display your content. If it is empty, CakePHP will display nothing. This is exactly what you see after saving default.ctp - a completely blank page!!!

Do not worry!

Just copy and paste the following code in the newly created 'default.ctp' file.

--: BEGIN COPY :--



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <?php echo $html->charset(); ?>
  <title>
  <?php __('My-CakePHP Tutorials'); ?>
  <?php echo $title_for_layout; ?>
  </title>
  <?php
  echo $html->meta('icon');


echo $html->css('cake.generic');


echo $scripts_for_layout;
  ?>
  </head>
  <body>
  <div id="container">
  <div id="header">
  Header Elements Will Go Here
  </div>
  <div id="content">


<?php $session->flash(); ?>


<?php echo $content_for_layout; ?>


</div>
  <div id="footer">
  Footer Text Goes Here!
  </div>
  </div>
  <?php echo $cakeDebug; ?>
  </body>
  </html>



----: END COPY :---


I have used red color to mark things you should note.
Change 'My-CakePHP Tutorials' to the title of your website. Like 'My Pet Dog Roombiq', or, anything you want.

NOTE:
There are FOUR IMPORTANT VARIABLES
$title_for_layout
$scripts_for_layout
$content_for_layout
$cakeDebug


The name suggests exactly what they do.
NOTE: 1
$title_for_layout MUST be included in between <title>  </title> tag.

<title>
  <?php echo $title_for_layout; ?>
</title>

As such, CakePHP gives a default title to every content page of your website following its own rules. But you can set a custom title as well. I'll show that in the next page.

NOTE: 2
$scripts_for_layout MUST be included before the closing </head> tag.


NOTE: 3
$content_for_layout MUST be included in between <body>
</body> tag.
<body>
<?php echo $content_for_layout; ?>
</body>

NOTE: 4
$cakeDebug SHOULD be placed before closing </body>

<?php echo $cakeDebug; ?>
</body>

AND you are done! You can add any CSS style/'div' layer to this page ('default.ctp') to give your website the layout/look you want.


For example, I tried a simple TWO Column Layout.

<div id="content">
  <div id="menu-box">
  menu items go here!
  </div>
  <div id="content-box">
<?php $session->flash(); ?>
<?php echo $content_for_layout; ?>
  </div>
</div>

I have added one div layer 'menu-box' and another one 'content-box' to display menu items and content items in two separate columns.
Now I need to add these CSS styles in a stylesheet file.

Modifying Stylesheet


As such Cake ('short-form of CakePHP) has already told us how to do that:
You can also add some CSS styles for your pages at: APP/webroot/css.
You can see the default CSS file under 'app/webroot/css' folder. The name of the file is 'cake.generic.css'. You can simply modify the content of this file (cake.generic.css).

I preferred to go to the bottom of that page and type the following lines


/* Custom CSS */

#menu-box{
width:250px;
float:left;
}
#content-box{
width:700px;
float:left;
}

It gives me a workable presentation for my custom template.

But I really need to make some more changes.

So, I just pressed (Ctrl+U) to view the source code, and I located the CSS division layers/ HTML tags being displayed in the source code, and modified them.

Here is the code: (Remember: I added the code at the bottom of cake.generic.css file.)


/* Custom CSS */

#menu-box{
width:250px;
float:left;
border-right:1px solid #CCCCCC;
}
#content-box{
margin-left:10px;
width:700px;
float:left;
border:1px solid #CCCCCC;
padding:10px;
background-color:#F3F3F3;
}
#header {
height:100px;
width:100%;
color:#000000;
background-color:#b5fad1;
font-size:2.0em;
border-bottom:1px solid #cccccc;
}
body
{
background-color:#FFFFFF;
color:#000000;
font-family:Verdana, Arial, Helvetica, sans-serif;
}

#footer
{
text-align:center;
}

..............................................................
And here is my custom template:














So, I have once again DONE that! If you are following me, you MUST have done so as well.

Congratulations!

Next, I'll try to create my 'About us' page using CakePHP. In general, I think this will give me some idea on how to create a static page with CakePHP.

Cheers!

12 comments:

trupti said...

It is really helpful. I was searching on net how to create index page using Cakephp and found nothing helpful. By following the steps you mentioned, finally I have created index page. Thank you.

Siddhartha said...

Thanks trupti.
Happy Baking!

Alankar Misra said...

Nice post. Helped me a fair bit. Just an update, the $cakeDebug variable has since been removed. You now have to use an element to print the debug output like so:

$this->element('sql_dump');

Siddhartha said...

Thanks for the update.

Sandeep said...

Thanx for add custom template

Anonymous said...

Things have changed a little bit in Cake version 1.3.. giving more flexibility... I hope you can follow those as well.

Thanks for your visit and comments.

Steve said...

This is what i want exactly? Thanks a lot for sharing this tutorial and now i am going to follow this code. Hope it will work for me.
website domain registration

Siddhartha said...

Thanks for you visit. It is great to know that it helped you.

napster ... said...

I have a problem with this.in the default.ctp file..
when executing it shows"Call to a member function link() on a non-object in C:\wamp\www...." what is this ...?

Anonymous said...

Nice blog. Its really great job for sharing this info regarding Website Development. I am so impressed by the info that you’ve in this website. Thanks for your info.Cake PHP Development
Good luck.

Siddhartha said...

Thanks @USEO!

Unknown said...

it help me!! tq so much....