Create new template - Part 3 - Layout of template

From TomatoCMS Documentation

Jump to: navigation, search

In this post, we will find out how to create layout template supposed to apply for all web pages. The simple template should include header, main content and footer.

The layout of templates are defined in layouts directory. Lets create this directory in app/templates/sample directory.Our template consist of three parts: header, footer and content as follow:

caption

Look back to the layouts directory of default template (app/templates/default/layouts), you'll see four layout files: 

TomatoCMS_Root_Dir
|___app
   |___templates
      |___default
         |___layouts
            |___admin.phtml
            |___auth.phtml
            |___default.phtml
            |___install.phtml

As these layout names, four files was used to define the layout for

- Administrator pages (admin.phtml)

- Authenticate pages (login, logout) (auth.phtml)

- Default pages, i.e front-end section (default.phtml)

- Install Wizard (install.phtml)


So, in sample template, we also have to create these layouts.

For purpose of this post, I create file default.phtml which defines layout for all front-end pages.

Below is content of app/templates/sample/layout/default.phtml: 

<!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" xml:lang="en" lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <meta name="robots" content="index, follow" />  
   <link rel="stylesheet" type="text/css" href="<?php echo $this->APP_STATIC_SERVER; ?>/css/960/all.min.css" />
   <link rel="stylesheet" type="text/css" href="<?php echo $this->APP_STATIC_SERVER; ?>/skin/<?php echo $this->APP_TEMPLATE; ?>
         /<?php echo $this->APP_SKIN; ?>/default.css" />
   <script type="text/javascript" src="<?php echo $this->APP_STATIC_SERVER; ?>/js/jquery/jquery-1.3.2.min.js"></script>
   <script type="text/javascript" src="<?php echo $this->APP_STATIC_SERVER; ?>/js/jquery_plugins/jquery.ajaxq.min.js"></script>
   <script type="text/javascript" src="<?php echo $this->APP_STATIC_SERVER; ?>/js/jquery_plugins/jquery.json-1.3.min.js"></script>
   <script type="text/javascript" src="<?php echo $this->APP_STATIC_SERVER; ?>/js/tomato/namespace.js"></script>
   <script type="text/javascript" src="<?php echo $this->APP_STATIC_SERVER; ?>/js/tomato/core/widget.loader.js"></script>
   <?php echo $this->headMeta(); ?>
   <?php echo $this->headTitle(); ?>
   <?php echo $this->headScript(); ?>
   <?php echo $this->headLink(); ?>
   <script type="text/javascript">
   Tomato.Core.Widget.Loader.baseUrl = '<?php echo $this->APP_URL; ?>';
   </script>
</head>
<body>
   <div>
      <div id="header">
         <div class="container_12">
            <?php echo $this->render('_header.phtml'); ?>
         </div>
      </div>
 
      <div>
         <?php echo $this->layoutLoader(); ?>
      </div>
 
      <div id="footer" class="clearfix">
         <div class="container_12">
            <?php echo $this->render('_footer.phtml'); ?>
         </div>
      </div>
   </div>
</body>
</html>

Let me explain some lines:

- TomatoCMS use 960 Grid System framework to layout pages, hence I add style sheets defined by the framework: 

<link rel="stylesheet"  type="text/css"  href="<?php echo $this->APP_STATIC_SERVER; ?>/css/960/all.min.css" />

- The next line defines the skin used for the layout: 

<link rel="stylesheet"  type="text/css"  href="<?php echo $this->APP_STATIC_SERVER; ?>/skin/<?php echo $this->APP_TEMPLATE; ?>/<?php echo $this->APP_SKIN; ?>/default.css" />

- Next lines defines JavaScript used by TomatoCMS, don't change it: 

<script type="text/javascript"  src="<?php echo $this->APP_STATIC_SERVER; ?>/js/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="<?php echo $this->APP_STATIC_SERVER; ?>/js/jquery_plugins/jquery.ajaxq.min.js"></script>
<script type="text/javascript" src="<?php echo $this->APP_STATIC_SERVER; ?>/js/jquery_plugins/jquery.json-1.3.min.js"></script>
<script type="text/javascript" src="<?php echo $this->APP_STATIC_SERVER; ?>/js/tomato/namespace.js"></script>
<script type="text/javascript" src="<?php echo $this->APP_STATIC_SERVER; ?>/js/tomato/core/widget.loader.js"></script>

- Next line allows us to set the title, add link to other style sheets, javascript libraries or even add meta keyword for pages: 

<?php echo  $this->headMeta(); ?>
<?php echo $this->headTitle(); ?>
<?php echo $this->headScript(); ?>
<?php echo $this->headLink(); ?>

These functions was defined by Zend Framework. Don't worry about them, lets add these line to ensure our front-end work correctly.

- Final line of head section define the base URL if you want to load widgets by Ajax. Don't worry about it, leave it as default template: 

<script type="text/javascript">
Tomato.Core.Widget.Loader.baseUrl = '<?php echo $this->APP_URL; ?>';
</script>

Also, I want you to notice about APP_STATIC_SERVER, APP_TEMPLATE, APP_SKIN, APP_URL constants. These constant was loaded by TomatoCMS and its values are defined in application configuration file (app/config/app.ini): 

...
[web]
url = "http://localhost/tomatocms/index.php" ==> APP_URL (Base URL of your site)
static_server = "http://localhost/tomatocms" ==> APP_STATIC_SERVER (The URL that contain all static resources as CSS, JS)
template = "sample" ==> APP_TEMPLATE (Template name)
skin = "plus" ==> APP_SKIN (Skin name)
...

That's all details about head section.

Next is body section of layout.

As I said earlier, our pages will contain 3 parts which are header, footer and content. The header and footer sections should be used by all pages, so I use: 

<?php echo $this->render('_header.phtml'); ?>

and: 

<?php echo $this->render('_footer.phtml'); ?>

to render the content of header and footer, respectively.

Off course, we have to create _header.phtml and _footer.phtml files in layouts directory first.

// app/templates/sample/layouts/_header.phtml 

<h1>Header</h1>

and:

// app/templates/sample/layouts/_footer.phtml 

<h1>Footer</h1>

The main content will be loaded by: 


<?php echo  $this->layoutLoader(); ?>

You don't have to know details about it, just leave it as default template. TomatoCMS uses it to load layout and content of pages.

Now, go to http://localhost/ to see what happens.

Hey, I only see the blank page. Don't worry, this is because we have not created the XML files which define layout of pages.

Let's read next post to resolve this problem.

Retrieved from "http://docs.tomatocms.com/index.php/Create_new_template_-_Part_3_-_Layout_of_template"
Personal tools