1
63

Layout and head of a document

Images and translations  |  Style sheets

Create site4 by copying site3.

  1. /cms
    1. ...
    2. site3
    3. site4

In this chapter, we are going to program the composition of a document and how the head section is built.

To test the result online, enter http://www.frasq.org/cms/site4 in the address bar of your navigator. Display the source code of the document.

Create the folder layouts in site4.

  1. /cms/site4
    1. layouts

Split the content of the home page by saving the footer in the file footer.phtml and by keeping just the body of the central part in home.phtml.

  1. /cms/site4
    1. views
      1. en
        1. home.phtml
        2. footer.phtml
      2. fr
        1. home.phtml
        2. footer.phtml
footer.phtml
  1. <div id="footer">
  2. <p>&copy;2010-2011 frasq.org - All rights reserved - <a href="http://www.frasq.org">www.frasq.org</a></p>
  3. <p><img src="<?php echo $base_path; ?>/images/ubuntu.png" alt="" width="16" height="16"/>&nbsp;<a href="http://www.ubuntu.com" target="_blank">Ubuntu</a></p>
  4. </div>
footer.phtml
  1. <div id="footer">
  2. <p>&copy;2010-2011 frasq.org - Tous droits réservés - <a href="http://www.frasq.org">www.frasq.org</a></p>
  3. <p><img src="<?php echo $base_path; ?>/images/ubuntu.png" alt="" width="16" height="16" />&nbsp;<a href="http://www.ubuntu.com" target="_blank">Ubuntu</a></p>
  4. </div>

NOTE: Using true characters instead of HTML entities for accents is now possible because the encoding type of the content of the page will be specified in the head section of the document. Remember to always save your files in UTF-8.

Reduce home.phtml in views/en and views/fr to the content of the central part of the home page:

home_en.phtml
  1. <h3>Welcome</h3>
home_fr.phtml
  1. <h3>Bienvenue</h3>

Add the view which generates the head section of a document in the folder views. NOTE: This view doesn't depend on the language.

  1. /cms/site4
    1. views
      1. en
      2. fr
      3. head.phtml
head.phtml
  1. <?php if (isset($lang)): ?>
  2. <meta http-equiv="content-type" content="text/html; charset=utf-8" lang="<?php echo $lang; ?>" />
  3. <?php else: ?>
  4. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5. <?php endif; ?>
  6. <?php if (false): ?>
  7. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  8. <?php endif; ?>
  9. <?php if (!empty($description)): ?>
  10. <meta name="description" content="<?php echo htmlspecialchars($description, ENT_NOQUOTES, 'UTF-8', false); ?>" />
  11. <?php endif; ?>
  12. <?php if (!empty($keywords)): ?>
  13. <meta name="keywords" content="<?php echo htmlspecialchars($keywords, ENT_NOQUOTES, 'UTF-8', false); ?>" />
  14. <?php endif; ?>
  15. <?php if (!empty($author)): ?>
  16. <meta name="author" content="<?php echo htmlspecialchars($author, ENT_NOQUOTES, 'UTF-8', false); ?>" />
  17. <?php endif; ?>
  18. <?php if (!empty($robots)): ?>
  19. <meta name="robots" content="<?php echo $robots; ?>" />
  20. <?php else: ?>
  21. <meta name="robots" content="index, follow" />
  22. <?php endif; ?>
  23. <?php if (true): ?>
  24. <link href="<?php echo $base_path; ?>/css/zero.css" rel="stylesheet" type="text/css" media="screen" />
  25. <?php endif; ?>
  26. <link href="<?php echo $base_path; ?>/css/screen.css" rel="stylesheet" type="text/css" media="screen" />
  27. <link href="<?php echo $base_path; ?>/css/theme.css" rel="stylesheet" type="text/css" media="screen" />
  28. <link href="<?php echo $base_path; ?>/css/print.css" rel="stylesheet" type="text/css" media="print" />
  29. <?php if (isset($stylesheets)): ?>
  30. <?php foreach ($stylesheets as $css) : ?>
  31. <link href="<?php echo $base_path; ?>/css/<?php echo $css['name']; ?>.css" rel="stylesheet" type="text/css" media="<?php echo $css['media']; ?>" />
  32. <?php endforeach; ?>
  33. <?php endif; ?>
  34. <?php if (isset($favicon)): ?>
  35. <link rel="shortcut icon" href="<?php echo $base_path; ?>/<?php echo $favicon; ?>.ico" type="image/x-icon" />
  36. <?php endif; ?>
  37. <?php if (isset($javascripts)): ?>
  38. <?php foreach ($javascripts as $js) : ?>
  39. <script type="text/javascript" src="<?php echo $base_path; ?>/js/<?php echo $js['name']; ?>.js"></script>
  40. <?php endforeach; ?>
  41. <?php endif; ?>
  42. <title><?php if (isset($title)) { echo htmlspecialchars($title, ENT_NOQUOTES, 'UTF-8', false); } ?></title>

Add the file head.php in the folder library with the following content:

  1. /cms/site4
    1. library
      1. head.php
head.php
  1. function head($type=false) {
  2.     static $head = array();
  3.  
  4.     if (!$type) {
  5.         return $head;
  6.     }
  7.  
  8.     $args=func_get_args();
  9.     array_shift($args);
  10.  
  11.     switch ($type) {
  12.         case 'lang':
  13.             $head['lang'] = $args[0];
  14.             break;
  15.         case 'title':
  16.             $head['title'] = $args[0];
  17.             break;
  18.         case 'description':
  19.             $head['description'] = $args[0];
  20.             break;
  21.         case 'favicon':
  22.             $head['favicon'] = $args[0];
  23.             break;
  24.         case 'keywords':
  25.             $head['keywords'] = $args[0];
  26.             break;
  27.         case 'author':
  28.             $head['author'] = $args[0];
  29.             break;
  30.         case 'robots':
  31.             $head['robots'] = $args[0];
  32.             break;
  33.         case 'stylesheet':
  34.             $name=$args[0];
  35.             $media=isset($args[1]) ? $args[1] : 'all';
  36.             if (!isset($head['stylesheets'])) {
  37.                 $head['stylesheets'] = array(compact('name', 'media'));
  38.             }
  39.             else {
  40.                 foreach ($head['stylesheets'] as $css) {
  41.                     if ($css['name'] == $name) {
  42.                         break 2;
  43.                     }
  44.                 }
  45.                 $head['stylesheets'][]=compact('name', 'media');
  46.             }
  47.             break;
  48.         case 'javascript':
  49.             $name=$args[0];
  50.             if (!isset($head['javascripts'])) {
  51.                 $head['javascripts'] = array(compact('name'));
  52.             }
  53.             else {
  54.                 foreach ($head['javascripts'] as $js) {
  55.                     if ($js['name'] == $name) {
  56.                         break 2;
  57.                     }
  58.                 }
  59.                 $head['javascripts'][]=compact('name');
  60.             }
  61.             break;
  62.         default:
  63.             return false;
  64.     }
  65.  
  66.     return true;
  67. }

Add the file standard.phtml in the folder layouts with the following content:

  1. /cms/site4
    1. layouts
      1. standard.phtml
standard.phtml
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <?php echo $head; ?>
  5. </head>
  6. <body>
  7. <div id="content">
  8. <?php echo $content; ?>
  9. </div>
  10. <?php if (isset($footer)): ?>
  11. <?php echo $footer; ?>
  12. <?php endif; ?>
  13. </body>
  14. </html>

This view generates the final document. The global variable $head defines the content of the head section of the document. The global variables $content and $footer contains the body and the footer of the document. The footer is optional.

Modify how the document is build in the file engine.php in the folder library:

engine.php
  1. require_once 'requesturi.php';
  2. require_once 'translate.php';
  3. require_once 'head.php';
  4.  
  5. define('VIEWS_DIR', ROOT_DIR . DIRECTORY_SEPARATOR . 'views');
  6. define('LAYOUTS_DIR', ROOT_DIR . DIRECTORY_SEPARATOR . 'layouts');

Loads the of the head function. Defines the folder where all the files which generate the content of the document are grouped.

  1.     $content=view($path, $lang);
  2.     $footer=view('footer', $lang);
  3.    
  4.     head('lang', $lang);
  5.     head('favicon', 'favicon');
  6.     head('title', translate('home:title', $lang));
  7.    
  8.     $output=layout('standard', compact('content', 'footer'));

Builds the views of the body and the footer of the document. Adds the language, the URL of the icon and the title of the document to the head section. Calls the function layout with the layout model standard, the content and the footer of the document.

  1. function layout($layout, $vars=false) {
  2.     $head=view('head', false, head());
  3.     if ($vars) {
  4.         $vars['head'] = $head;
  5.     }
  6.     else {
  7.         $vars = array('head' => $head);
  8.     }
  9.     $file = LAYOUTS_DIR.DIRECTORY_SEPARATOR.$layout.'.phtml';
  10.     return render($file, $vars);
  11. }

layout returns the content generated by the head function and the contents of the array $vars placed according to the model $layout.

  1. function view($view, $lang=false, $vars=false) {
  2.     $file = $lang ? VIEWS_DIR.DIRECTORY_SEPARATOR.$lang.DIRECTORY_SEPARATOR.$view.'.phtml' : VIEWS_DIR.DIRECTORY_SEPARATOR.$view.'.phtml';
  3.     if (!file_exists($file)) {
  4.         header('HTTP/1.0 404 Not Found');
  5.         exit;
  6.     }
  7.     return render($file, $vars);
  8. }

view passes $vars to render.

  1. function render($file, $vars=false) {
  2.     global $base_path, $base_url, $base_root;
  3.     if ($vars) {
  4.         extract($vars);
  5.     }
  6.     ob_start();
  7.     require $file;
  8.     return ob_get_clean();
  9. }

render places the variables $base_path, $base_url, $base_root and all the variables defined by $vars in the global context before loading the file $file. render returns the document generated by $file.

Enter http://localhost/cms/site4 in the addresse bar of your navigator. Display the source code of the document. Check the result, in particular the head section.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="content-type" content="text/html; charset=utf-8" lang="en" />
  5. <meta name="robots" content="index, follow" />
  6. <link href="/cms/site4/css/zero.css" rel="stylesheet" type="text/css" media="screen" />
  7. <link href="/cms/site4/css/screen.css" rel="stylesheet" type="text/css" media="screen" />
  8. <link href="/cms/site4/css/theme.css" rel="stylesheet" type="text/css" media="screen" />
  9. <link href="/cms/site4/css/print.css" rel="stylesheet" type="text/css" media="print" />
  10. <title>Home</title>
  11. </head>
  12. <body>
  13. <div id="content">
  14. <h3>Welcome</h3>
  15. </div>
  16. <div id="footer">
  17. <p>&copy;2010 frasq.org - All rights reserved - <a href="http://www.frasq.org">www.frasq.org</a> - May 13th, 2010</p>
  18. <p><img src="/cms/site4/logos/ubuntu.png" alt="" width="16" height="16"/>&nbsp;<a href="http://www.ubuntu.com" target="_blank">Ubuntu</a></p>
  19. </div>
  20. </body>
  21. </html>
site4.zip

Comments

Your comment:
[p] [b] [i] [u] [s] [quote] [pre] [br] [code] [url] [email] strip help 2000

Enter a maximum of 2000 characters.
Improve the presentation of your text with the following formatting tags:
[p]paragraph[/p], [b]bold[/b], [i]italics[/i], [u]underline[/u], [s]strike[/s], [quote]citation[/quote], [pre]as is[/pre], [br]line break,
[url]http://www.izend.org[/url], [url=http://www.izend.org]site[/url], [email]izend@izend.org[/email], [email=izend@izend.org]izend[/email],
[code]command[/code], [code=language]source code in c, java, php, html, javascript, xml, css, sql, bash, dos, make, etc.[/code].