Create DEFAULT Home Page: Now You Will Note The Following

http://articles.sitepoint.
com/article/hierarchical-data-database/2
How to create a Custom CakePHP Template
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!!!
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>
</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(); ?>
</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;
}

Create DEFAULT Home Page: Now You Will Note The Following

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Create DEFAULT Home Page: Now You Will Note The Following

Uploaded by

Copyright:

Available Formats

http://articles.sitepoint.

How to create a Custom CakePHP Template

Now you will note the following:

Create DEFAULT Home Page

Now point your browser to:

Create Default LAYOUT

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

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

<?php echo $content_for_layout; ?>

I have used red color to mark things you should note.

The name suggests exactly what they do.

<?php echo $cakeDebug; ?>

As such Cake ('short-form of CakePHP) has already told us how to do that:

It gives me a workable presentation for my custom template.

But I really need to make some more changes.

You might also like