Custom CakePHP Template Creation
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
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 :--
----: 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 $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.
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:
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 */
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.
Custom CakePHP Template, Cakephp Templates, Cakephp Custom Template Development
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>
<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>
<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;
}
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;
}
..............................................................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.
Custom CakePHP Template, Cakephp Templates, Cakephp Custom Template Development
