170

Disposition et en-tête d'un document

Images et traductions  |  Feuilles de style

Créez site4 en copiant site3.

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

Dans ce chapitre, nous allons programmer la composition d'un document et la construction de la section head.

Pour tester le résultat en ligne, entrez http://www.frasq.org/cms/site4 dans la barre d'adresse de votre navigateur. Affichez le code source du document.

Créez le dossier layouts dans site4.

  1. /cms/site4
    1. layouts

Séparez le contenu de la page d'accueil en sauvant le pied de page dans un fichier footer.phtml et en ne gardant que le corps de la partie centrale dans home.phtml.

  1. /cms/site4
    1. views
      1. fr
        1. home.phtml
        2. footer.phtml
      2. en
        1. home.phtml
        2. footer.phtml
footer_fr.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>
footer_en.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>

NOTE : L'emploi des vrais caractères UTF-8 à la place des entités HTML pour les accents est maintenant possible parce que le type d'encodage du contenu de la page sera spécifié dans l'en-tête du document. Pensez à toujours sauver vos fichiers en UTF-8.

Reduisez home.phtml dans views/fr et views/en au contenu de la partie centrale de la page d'accueil :

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

Ajoutez la vue qui génère l'en-tête d'un document dans le dossier views. NOTE : Cette vue ne dépend pas de la langue.

  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>

Ajoutez le fichier head.php dans le dossier library avec le contenu suivant :

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

Ajoutez le fichier standard.phtml dans le dossier layouts avec le contenu suivant :

  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>

Cette vue génère le document final. La variable globale $head définit le contenu de la section head du document. Les variables globales $content et $footer contiennent le corps et le pied de page du document. Le pied de page est optionnel.

Modifiez comment un document est fabriqué dans le fichier engine.php du dossier 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');

Charge le code de la fonction head. Définit le dossier dans lequel les fichiers qui génèrent le contenu des documents sont regroupés.

  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'));

Fabrique les vues du corps et du pied de page du document. Ajoute la langue, l'URL de l'icône et le titre du document dans la section head. Appelle la fonction layout en lui passant le modèle de placement standard, le contenu et le pied de page du 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 retourne le contenu généré par la fonction head et les contenus du tableau $vars placés selon le modèle $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 passe $vars à 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 met les variables $base_path, $base_url, $base_root et toutes les variables définies par $vars dans le contexte global avant de charger le fichier $file. render retourne le document généré par $file.

Entrez http://localhost/cms/site4 dans la barre d'adresse de votre navigateur. Affichez le code source du document. Contrôlez le résultat, en particulier la section head.

  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="fr" />
  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>Accueil</title>
  11. </head>
  12. <body>
  13. <div id="content">
  14. <h3>Bienvenue</h3>
  15. </div>
  16. <div id="footer">
  17. <p>&copy;2010 frasq.org - Tous droits réservés - <a href="http://www.frasq.org">www.frasq.org</a> - 13 mai 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

Commentaires

Votre commentaire :
[p] [b] [i] [u] [s] [quote] [pre] [br] [code] [url] [email] strip aide 2000

Entrez un maximum de 2000 caractères.
Améliorez la présentation de votre texte avec les balises de formatage suivantes :
[p]paragraphe[/p], [b]gras[/b], [i]italique[/i], [u]souligné[/u], [s]barré[/s], [quote]citation[/quote], [pre]tel quel[/pre], [br]à la ligne,
[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]commande[/code], [code=langage]code source en c, java, php, html, javascript, xml, css, sql, bash, dos, make, etc.[/code].