How To Create A Custom CakePHP Template

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>
</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;
}

..............................................................
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.

How To Create A Custom CakePHP Template

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

How To Create A Custom CakePHP Template

Hochgeladen von

Copyright:

Verfügbare Formate

How to create a Custom CakePHP Template

Das könnte Ihnen auch gefallen