Panoramic

Suite à une discussion sur le forum Panoramic, on m'a posé la question de savoir si il était possible de générer de manière automatique une page contenant le sommaire des tutos présents dans un répertoire.

L'idée c'est de pouvoir rajouter des tutos dans un dossier sans avoir besoin de retoucher derrière le sommaire.

Conditions de départ

Il faut récupérer des infos concernant chaque tuto afin de pouvoir les afficher dans un tableau. Le programme permettant de réaliser cette opération est écrit en langage PHP (un des langages de prédilection pour les sites web).

Pour réaliser notre sommaire, on va s'appuyer sur des balises meta qui devront être placées dans l'entête (header) de chaque tuto.

Nous avons besoin de récupérer:

Le programme principal : index.php

Le langage PHP possède des instructions très puissantes. Par chance, il existe une fonction qui va faire tout le boulot à notre place ! Notamment une en particulier, j'ai nommé : get_meta_tags().

Cette fonction extrait toutes les balises meta d'un fichier HTML et les stocke dans un tableau. Elle est pas belle la vie ?

Donc il ne nous reste plus qu'à parcourir le répertoire contenant les tutos puis d'exécuter cette fonction et de stocker le tout dans un tableau avant affichage.

(dernière modification Samedi 03 Novembre à 01:44)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="fr">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
  <meta name="description" content="site d'exemple de programme en basic Panoramic">
  <title>Demo tuto</title>
  <meta name="Keywords" content="Panoramic, Basic, Programmation">
  <link href="style.css" rel="stylesheet" type="text/css" media="screen, handheld, tv, projection" />
  <!-- styles spécifiques à cette page -->
  <style type="text/css">
    body{background-color:#D8ECE2;}
    .auteur{width:20%;text-align:center;padding:0.5em;background:#EEF;}
    .niveau{width:20%;text-align:center;font-weight:bold;background:#DDF;}
    .debutant{color:green;}.debutant:after{content:"Débutant";}
    .moyen{color:blue;}.moyen:after{content:"Moyen";}
    .confirme{color:red;}.confirme:after{content:"Confirmé";}

    #connect {display:inline-block;padding:5px;background-color:#EEF;border:1px solid #AAD;}
    #connect form  {display:none;}         /* par défaut le formulaire n'est pas visible */
    #connect:hover form{display:block;}
    #connect ul{list-style:none;}
  </style>
</head>
<?php include_once('fonctions.php'); /* obligatoire ! */ ?>

<body>
  <div id="connect">Connection
  <form method="post" action="">
    <ul>
    <li><label for="speedconnection_username">Pseudo</label></li>
    <li><input type="text" name="speedconnection[username]" id="speedconnection_username" tabindex="7"></li>
    <li><label for="speedconnection_password">Mot de passe</label></li>
    <li><input type="password" name="speedconnection[password]" id="speedconnection_password" tabindex="8"></li>
    <li><input type="checkbox" name="speedconnection[remember]" id="speedconnection_auto" tabindex="9">
        <label for="speedconnection_auto">Connexion auto.</label>
        <input type="submit" value="Connexion" tabindex="10">
     </li>
    </ul>
  </form>
  </div>
  <h1>Page dédiée au langage Panoramic:</h1>
  <p>Panoramic est un langage de programation qui utilise le basic que je viens de découvrir sur ce site :
  <a href="http://panoramic-language.pagesperso-orange.fr/French/index.html" target="_blank">Site Web Panoramic</a></p>
  <p>Je vous propose d'essayer de lister des tutoriels de divers niveaux.
  Ces codes et leur commentaires sont fournis par la communauté Panoramic (voir site web Panoramic)</p>

<?php

$DossierTuto='tutos'; /* Répertoire qui contient les tutoX.php */

/* On ouvre le répertoire */
if ($Dossier=opendir($DossierTuto))
{
  $nbTutos=0; /* Raz du compteur de tuto */
  while ($fichier=readdir($Dossier)) /* lecture du nom du fichier courant */
  {
    /* on filtre un peu les fichiers indesirables */
    if ($fichier !='.' && $fichier!='..' && pathinfo($fichier, PATHINFO_EXTENSION)=='php')
    {
      $nbTutos++; /* on incremente le nb de tuto */
      $tags=get_meta_tags($DossierTuto.'/'.$fichier);/* on extrait les meta tags */
      if (count($tags)!=4) {$err=1;break;}
      /* on stocke le resultat dans un tableau (multidimension) */
      $tableau[]=array('section'=>$tags['section'],'niveau'=>$tags['niveau'],'author'=>$tags['author'],'description'=>$tags['description'],'fichier'=>$fichier);
    }
  }
  /* fermeture du répertoire */
  closedir($Dossier);
  /* on teste si il y a eu une erreur */
  if ($err==1)
  {
    echo '<p class="alarme">Fichier '.$fichier.' incorrect !<br>Veuillez vérifier son entête... <p>';
  }
  if (!$err)
  {
      echo '<p class="edition">Nombre de tutos :'.$nbTutos.'</p>';
      /* on trie le tableau sans perdre les associations */
      asort($tableau);
      /* Puis on construit nos rubriques et tableaux */
      $Section='';
      foreach ($tableau as $tuto)
      {
        /* Si nouvelle section, on ferme la précédente et on ouvre la suivante */
        if ($tuto['section']!=$Section)
        {
          if ($Section!='') echo "</table>\n";
          echo '<h2>'.$tuto['section'].'</h2>'."\n";
          $Section=$tuto['section'];?>
  <table>
      <tr><th>Niveau</th><th>Sujet</th><th>Auteur</th><th style="width:15%;">Date</th></tr>
    <?php
        }
        /* ligne du tuto */
        echo "  <tr>\n";
        echo '    <td class="niveau '.$tuto['niveau'].'"></td><td><a href="'.$DossierTuto.'/'.$tuto['fichier'].'">'.$tuto['description']."</a></td>\n";
        echo '    <td class="auteur">'.$tuto['author'].'</td><td>'.datefr(filemtime($DossierTuto.'/'.$tuto['fichier'])).'</td>'.PHP_EOL;
        echo "  </tr>\n";
      }?>
  </table><?php
  }
}
else
{
  echo '<p class="alarme">PROBLEME D\'OUVERTURE DU REPERTOIRE DES TUTOS !</p>';
}?>

</body>
</html>

style.css

script.js

head.inc

(dernière modification Samedi 27 Octobre à 09:24)

<?php
$nbCode=0;
/*--------------------------------------------------------------------*/
/* Mise en format francais d'une date                                 */
/* Auteur: Nardo26                                                    */
/* les setlocale(LC_TIME, "fr-FR") et autres saloperies du même genre */
/* ne fonctionnent pas... ;)                                          */
/*--------------------------------------------------------------------*/
function datefr($time,$heure=1)
{
  date_default_timezone_set("Europe/Paris");
  $t=time();$delta=$t-$time;
  $mois=array("Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre");
  $jour=array("Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi");
  /* Si aujourd'hui */
  if (date("d-m-Y",$t) ==date("d-m-Y",$time))
  {
   $r="aujourd'hui ";
   $nb_heure=$delta/3600;
   if (($t-$time) > 7200) $r.='à '.date("H:i",$time); /* delai superieur à 2 heures */
   else
   {
     $r.='il y a ';
     if ($delta/3600>=1) $r.=date("G\hi",$delta);
     else
     {
       $delta-=($delta/3600);
       if ($delta>=60) $r.=ltrim(date("i",$delta),'0').' min';
       else
       {
         $delta -=($delta/60);
         $r.=ltrim(date('s',$delta),'0').'s';
       }
     }
   }
  }
  /* sinon */
  else
  {
    if (date("d-m-Y",$t-86400) == date("d-m-Y",$time)) $r='Hier '; /* 86400 = 60sx60mnx24h */
    else $r=$jour[date("w",$time)].' '.date("d",$time).' '.$mois[date("n",$time)-1];
    if (date("Y")!=date("Y",$time)) $r.=' '.date("Y",$time); // on rajoute l'année si nécessaire
    if ($heure) $r.=date(" à H:i",$time);/* option */
  }
  return $r;
}

/*--------------------------------------------------------------------*/
/*  Insertion d'un bloc de code                                       */
/*  Auteur : Nardo26                                                  */
/*--------------------------------------------------------------------*/
function insertCode($titre,$filename,$bButton=TRUE)
{
  global $nbCode;
  $t=pathinfo($filename);
  if ($t['dirname']!='.' && $t['dirname']!='..') return;
  if (file_exists($filename))
  {
    $content = file_get_contents($filename);
    if ($titre!='') echo '<h2>'.$titre.'</h2>'.PHP_EOL;
    $nbCode++;
//    echo '<div id="sCode'.$nbCode."\"></div>\n";
    echo '<div id="sCode'.$nbCode.'">'.PHP_EOL;    /* test 1 */
    $nbCode++;
    if ($bButton==TRUE)
    {
      echo '<input type="button" class="show_hide gauche" id="Code'.$nbCode.'" Value="Voir le code">'.PHP_EOL;
      echo '<div class="Code'.$nbCode.'" style="display:none;">'.PHP_EOL;
    }
    echo '<input class="button gauche" type="button" value="Sélection du code" onClick="selectext(\'tCode'.$nbCode.'\')">'.PHP_EOL;
    echo '<span class="edition">(dernière modification ' . datefr (filemtime($filename)).")</span>\n";
    echo '<hr>';
    /* l'attribut wrap ne me plait pas (obsolète) mais je n'ai pas trouvé d'autre solution */
    echo '<textarea readonly="readonly" wrap="off" id="tCode'.$nbCode.'">'.PHP_EOL;
    echo htmlentities($content, ENT_QUOTES);
    echo '  </textarea>'.PHP_EOL;
    if ($bButton==TRUE) echo '</div>'.PHP_EOL;
    echo '</div>'.PHP_EOL;
    echo '</div><hr>'.PHP_EOL; /* test 1 */
  }
}

/* Cette fonction ne marche pas (en dehors du flux) */
/* à voir... traiter le cas en javaScript ?         */
function getAuthor()
{
  $t=pathinfo($_SERVER['SCRIPT_NAME']);
  $tags=get_meta_tags($t['basename']);
  echo $tags['author'];
}

function setTag($key,$content) {  echo '<meta name="'.$key.'" content="'.$content.'"/>'.PHP_EOL;}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>

part1.inc

footer.inc

Voila, je pense avoir fait le tour...
Si vous avez des questions/propositions/améliorations à dire, n'hésitez pas à m'en faire part sur le forum Panoramic !

Note :

Pour ceux qui veulent jeter un coup d'oeil sur le fichier de ce tuto, je mets le code ci-dessous:

Le source de ce tuto

(dernière modification Samedi 27 Octobre à 16:28)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
  <meta name="description" content="Le source du sommaire"/>
  <meta name="author" content="nardo26"/>
  <meta name="niveau" content="moyen"/>
  <meta name="section" content=" Tuto-Mise en place"/>
  <title>Panoramic</title>
  <link href="../style.css" rel="stylesheet" type="text/css" media="screen, handheld, tv, projection" />
  <!-- styles supplementaires -->
  <style type="text/css">
    li{text-align:justify;}
    .colGauche,.colDroite{width:47%;padding:1%;}
    .colGauche{float:left;}
    .colDroite{float:right;border:1px solid;}
    .container{margin-top:1em;}
    div li{margin-bottom:1em;}
  </style>

  
</head>
<?php include_once('../fonctions.php');?>
<body>
<a class="home" href="../index.php">sommaire</a>

<h1>Génération d'un sommaire</h1>
<span class="edition">Auteur : <?php getAuthor(); ?></span>
<!-- ***************************************************************************
*                            D E S C R I P T I O N
******************************************************************************** -->
<h2>Description</h2>
<p>Suite à une discussion sur le forum Panoramic, on m'a posé la question de savoir si il était possible de générer de manière automatique une page contenant le sommaire des tutos présents dans un répertoire.</p>
<p>Après quelques réflexion, je vous propose de voir ça ensemble <img src="http://nardo26.lescigales.org/images/smiley/06.gif" /></p>
<p>L'idée c'est de pouvoir rajouter des tutos dans un dossier sans avoir besoin de retoucher derrière le sommaire.</p>
<p>Et tout ça sans utilisation d'une base SQL...<img src="http://nardo26.lescigales.org/images/smiley/07.gif" /></p>

<h2>Conditions de départ</h2>
<p>Il faut récupérer des infos concernant chaque tuto afin de pouvoir les afficher dans un tableau. Le programme permettant de réaliser cette opération est écrit en langage PHP (un des langages de prédilection pour les sites web).</p>
<p>Pour réaliser notre sommaire, on va s'appuyer sur des balises <abbr title="Cette balise sert à placer des métadonnées dans une page HTML">meta</abbr>
qui devront être placées dans l'entête (header) de chaque tuto.</p>
<h3>Nous avons besoin de récupérer:</h3>
<ul>
<li>L'auteur du tuto:<br> <span class="code">&lt;meta name="author" content="auteur du tuto"/&gt;</span> ,</li>
<li>la description:<br> <span class="code">&lt;meta name="description" content="le texte qui sera affiché dans le sommaire"/&gt;</span> ,</li>
<li>le niveau de difficulté :<br> <span class="code">&lt;meta name="niveau" content="debutant"/&gt;</span> ,<br>
ce champ peut avoir les valeurs suivantes:
<ul><li>debutant</li><li>moyen</li><li>confirme</li></ul>
</li>
<li>et enfin, la section dans laquelle doit apparaitre le tuto:<br> <span class="code">&lt;meta name="section" content="Mathematiques"/&gt;</span></li>
</ul>
<p><span class="note">Remarque:</span>Le contenu du champ "<span class="code">niveau</span>" ne doit pas avoir d'accents!</p>

<h2>Le programme principal : index.php</h2>
<p>Le langage PHP possède des instructions très puissantes. Par chance, il existe une fonction qui va faire tout le boulot à notre place !
Notamment une en particulier, j'ai nommé : <a class="code" href="http://php.net/manual/fr/function.get-meta-tags.php" target="_blank">get_meta_tags()</a>.</p>
<p>Cette fonction extrait toutes les balises meta d'un fichier HTML et les stocke dans un tableau. Elle est pas belle la vie ? <img src="http://nardo26.lescigales.org/images/smiley/13.gif"/></p>
<p>Donc il ne nous reste plus qu'à parcourir le répertoire contenant les tutos puis d'exécuter cette fonction et de stocker le tout dans un tableau avant affichage.</p>

<?php insertCode('','../index.php',FALSE); ?>

<div class="container">
  <div class="colGauche">
    <p>Pour fonctionner ainsi que les tutos, le sommaire (index.php) a besoin d'autres fichiers:</p>
    <ul>
      <li><span class="param">style.css</span>,
        ce fichier est la feuille de style utilisée par défaut. C'est elle qui définie le "look" des tutos.
        Rien ne vous empêche de rajouter d'autres style par dessus (comme actuellement celle-ci).
      </li>
      <li><span class="param">header.inc,part1.inc,footer.inc</span> sont des fichiers necessaire pour la conception d'un tuto. Ils englobent les balises html necessaire pour l'affichage des tutos.</li>
    </ul>
    <br>
    <p><span class="note">note:</span> Ces quatre fichiers doivent être installés dans le même répertoire qu'index.php</p>
  </div>
  <div class="colDroite">
    <p class="note">Arborescence des fichiers :</p><img src="tutorep.png"/>
  </div>
  <hr>
</div>

<?php
  insertCode('style.css','../style.css');
insertCode('script.js','../script.js');
insertCode('head.inc','../head.inc');
insertCode('part1.inc','../part1.inc');
insertCode('footer.inc','../footer.inc');


?>

<p>Voila, je pense avoir fait le tour...<br>Si vous avez des questions/propositions/améliorations à dire, n'hésitez pas à m'en faire part sur le forum Panoramic !</p>
<h3>Note :</h3>
<p>Pour ceux qui veulent jeter un coup d'oeil sur le fichier de ce tuto, je mets le code ci-dessous:</p>
<?php insertCode('Le source de ce tuto','tuto4.php'); ?>


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" /></script>
<script type="text/javascript" src="../script.js"/></script>

</body>
</html>