PHP – Listings et Gabarits

LEÇON

 

Principes de base

 

Imaginons qu'on doit créer une page qui contient un listing d'éléments, chacun affiché de manière identique. Imaginons aussi que quand on sélectionne un des éléments une page s'affiche qui montre cet élément en détail.

Par exemple : dans une boutique en ligne, on doit créer un listing de produits, chacun présenté de façon sommaire avec une vignette, un titre, une description et un prix. Quand on clique sur un produit on voit une page dédiée au produit en question, avec davantage de détails (par rapport à la version sommaire du produit présentée dans le listing).

Que ce soit dans le listing ou dans une page détaillé à un élément, il n'est pas efficace de coder le HTML directement pour chaque élément car :

  • trop de répétition de code
  • il faut refaire le code HTML quand on ajoute un produit

Il est donc logique que :

  • pour la page "listing", le HTML pour un élément devrait être généré avec un morceau de code PHP qui est exécuté en boucle (une fois par élément) avec des données différentes à chaque itération
  • pour la page dédiée, le HTML devrait être généré avec un morceau de code PHP à partir des données de l'élément en question

 

Exemple

 

Lien :

http://www.web-design-codex.fr/samples/listings_et_gabarits/index.php

 

-- Le code

style.css


body
{
  font-family:Arial, Helvetica, sans-serif;
  width:960px;
  margin:0 auto;
  background-color:#e0e0e8;
}

#wrapper
{
  background-color:white;
}

#header, #footer
{
  background-color:#456789;
  color:white;
  padding:20px;
}

#main
{
  padding:20px;
  border:1px solid #456789;
  border-top:none;
  border-bottom:none;
}

.element-dans-listing
{
  background-color:#e0e0e8;
  margin-bottom:20px;
  padding:20px;
  border:1px solid #456789;
}

.element-dans-listing img
{
  float:right;
  height:100px;
}

.element-pleine-page
{
  padding:20px;
}

.element-pleine-page .image-section
{
  float:left;
  width:225px;
  margin-right:30px;
  background-color:#e0e0e8;
  border:1px solid #456789;
  padding:5px;
}

.element-pleine-page img
{
  width:100px;
  padding:5px;
}

.backlink
{
  float:right;
  position:relative;
  top:-30px;
  color:black;
  text-decoration:none;
  padding:5px 10px 3px;
  background-color:#bbbbbb;
  border:3px solid #dddddd;
  border-right-color:#999999;
  border-bottom-color:#999999;
}

 

index.php


<?php 
  include ( 'donnees.php' );
?>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>PHP Listings et Gabarits</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
      <div id="wrapper">

        <div id="header">
          <?php include 'header.php';?>
        </div>

        <div id="main">
          <?php 
			if (isset($_GET) && !empty($_GET)) {	  
			  $element = $_GET['element'];
			  include ( 'element_pleine_page.php' );
			}
			else
			{
		      include ( 'listing.php' );
			}
		  ?>
        </div>

        <div id="footer">
          <?php include 'footer.php';?>
        </div>

      </div>
    </body>
</html>

 

header.php


<h3>Header</h3>

 

footer.php


<h3>Footer</h3>

 

listing.php


<h3>Listing</h3>

<?php

$num_elements = count($donnees);

for ($i=1; $i<=$num_elements; $i++)
{
  $element = $i;
  include ('element_pour_listing.php');
}

?>

 

element_pour_listing.php


<div class="element-dans-listing"
     onmouseover="this.style.cursor='pointer';"
     onclick="location.href='index.php?element=<?php print $element; ?>'">

<?php
  $d = $donnees[$element];
?>

<img src="<?php print $d['image_principale']; ?>">
<h3><?php print $d['titre']; ?></h3>
<p><?php print $d['description_courte']; ?></p>

<div style="clear:both;"></div>

</div>

 

element_pleine_page.php


<div class="element-pleine-page">

<a class="backlink" href="index.php">&#8678; Revenir</a>

<?php
  $d = $donnees[$element];
  $img = $d['images'];
  $num_images = count($img);
?>

<div class="image-section">

<?php for ($i=0; $i<$num_images; $i++) { ?>

  <img src="<?php print $img[$i]; ?>">

<?php } ?>
  
</div>

<h3><?php print $d['titre']; ?></h3>
<p><?php print $d['description_longue']; ?></p>

<div style="clear:both;"></div>

</div>

 

donnees.php


<?php

$donnees = array (
  1 => array (
				'id' => 1,
				
				'titre' => 'Lorem ipsum',
				
				'description_courte' => 'Dolor sit amet, consectetur adipiscing elit.',
				
				'description_longue' => 'Dolor sit amet, consectetur adipiscing elit. Ut eleifend metus id risus egestas lobortis. Quisque tincidunt congue leo ac tempus. Nullam at arcu felis. Vivamus maximus elit et justo semper tempus. Phasellus sit amet nisi quis neque tincidunt pellentesque placerat et libero. Curabitur sed nibh iaculis, sollicitudin erat ut, mollis turpis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam quis dolor efficitur, auctor quam eget, ultricies nibh.',
				
				'image_principale' => '1a.jpg',
				
				'images' => array (
									'1a.jpg',
									'1b.jpg',
									'1c.jpg'
				                   )
             ),

  2 => array ( 
				'id' => 2,
				
				'titre' => 'Suspendisse risus',
				
				'description_courte' => 'Nisi, varius ac nisl a, auctor mollis lectus.',
				
				'description_longue' => 'Nisi, varius ac nisl a, auctor mollis lectus. Etiam ut mollis sapien. Duis eu diam vel nisi facilisis tincidunt. Maecenas semper nulla eu massa aliquet, a sodales nulla fringilla. Ut vulputate augue in enim iaculis, sodales pretium mauris blandit. Vestibulum malesuada nisi sit amet mauris interdum, at feugiat ipsum dignissim. Quisque nec fermentum neque. Proin sit amet fermentum ligula. Vestibulum aliquet augue eget turpis pretium, nec ornare velit auctor. Donec feugiat metus sit amet condimentum commodo. Curabitur et sapien quis est sodales egestas.',
				
				'image_principale' => '2e.jpg',
				
				'images' => array (
									'2a.jpg',
									'2b.jpg',
									'2c.jpg',
									'2d.jpg',
									'2e.jpg'
				                   )
             ),

  3 => array ( 
				'id' => 3,
				
				'titre' => 'Nullam id magna',
				
				'description_courte' => 'Vitae ante auctor venenatis. Duis a feugiat est.',
				
				'description_longue' => 'Vitae ante auctor venenatis. Duis a feugiat est. Sit amet semper elit. Aenean porttitor velit id ipsum tristique, sed dapibus lectus fringilla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut et molestie ante, a finibus dui. Aliquam vulputate ac libero in condimentum. Phasellus laoreet nulla a convallis rutrum. Maecenas quis gravida metus. Integer faucibus sollicitudin leo. Sed laoreet, ex a pulvinar tristique, massa odio congue velit, ut venenatis metus massa ut orci. In hac habitasse platea dictumst.',
				
				'image_principale' => '3d.jpg',
				
				'images' => array (
									'3a.jpg',
									'3b.jpg',
									'3c.jpg',
									'3d.jpg'
				                   )
             ),
);