Tutoriel Reaxia n°1

Un article de ReaxiaWiki.

Sommaire

1 Présentation du tutoriel
2 Installation de Reaxia
3 Définition des types structurés
4 Création des types dans Reaxia
5 Ajout des contenus
6 Création de index.php
7 Les librairies d'affichage
8 Le formulaire de contact
9 Publiez votre site
10 Félicitations

Présentation du tutoriel

Le but de ce tutoriel est de reproduire le site Reaxia suivant afin de maîtriser les principes de base d'un développement Reaxia :

http://projects.epistema.com/reaxia_demo1

Ce site est très simple : il contient un menu hiérarchique permettant l'accès à plusieurs pages et un formulaire de contact. Grâce à l'interface de gestion de Reaxia, le contributeur pourra ajouter et supprimer des pages, rédiger les contenus et disposer de la liste des demandes de contact envoyées par le formulaire.

Chaque étape du développement sera expliquée dans les paragraphes suivants.

Pour télécharger les sources du site à reproduire, cliquez ici. Ce fichier n'est pas indispensable car le code nécessaire est fourni à chaque étape de ce tutoriel.

uploader le fichier et corriger le lien

Installation de Reaxia

Voir la page d'aide concernant l'installation.

Définition des types structurés

Après analyse, nous concluons que le site présente trois types de contenus structurés :

Les pages du site

Les pages sont formées d'un titre, d'une zone de texte libre et sont organisées au sein d'un menu hiérarchique. La structure est donc celle d'un multi-page, avec une catégorie pour organiser et donner un titre au page, et un champ paragraphe pour le contenu de la page.

Information	Type de champ
Catégorie	Catégorie
Contenu de la page	Texte de paragraphe

Nom du type : Pages

Les demandes de contact

Une demande de contact est un e-mail envoyé par un visiteur de site via le formulaire de contact. Ces demandes sont envoyées par e-mail au webmaster et sont stockées dans la base de données. Une demande de contact est composée de plusieurs champs :

Information	Type de champ
Date de la demande	Catégorie
Nom	Texte sur une ligne
Prénom	Texte sur une ligne
Société	Texte sur une ligne
E-mail	Texte sur une ligne
Téléphone	Texte sur une ligne
Message	Texte de paragraphe

Nom du type : Demandes de contact

Les paramètres

Afin de donner une plus grande liberté au contributeur, certains paramètres du site seront définis dans un contenu dynamique, modifiable depuis l'interface de gestion de Reaxia.

Information	Type de champ
Titre du site pour le navigateur	Texte sur une ligne
Image en haut de page	Image
Texte du pied de page	Texte de paragraphe
Adresse e-mail pour les demandes de contact	Texte sur une ligne

Nom du type : Paramètres

Création des types dans Reaxia

La structure des types étant maintenant connue, il faut à présent créer les types. Si vous ne savez pas comment faire, consultez la page d'aide sur la création des types.

Les noms des types doivent être identiques à ceux donnés dans le paragraphe précédent (Pages, Demandes de contact, Paramètres) car ils seront utilisés dans le code présenté lors des étapes suivantes.

Pour le champ catégorie du type "Pages", il faut cocher l'option "Afficher dans le contenu du site", qui ne l'est pas par défaut.

Ajout des contenus

Maintenant que les types sont créés, il faut ajouter au site les contenus correspondants. Pour cela, il faut utiliser le menu "Gérer la structure du site, ajouter un contenu au site" dans les Outils d'administration.

Ajout des pages du menu : choisissez le type "Pages", cliquez sur Ajouter et saisissez le titre "Pages". Cliquez sur le lien [Changer] dans la colonne URL et saisissez "index.php?page=$catId". Dans l'arborescence de gauche, en cliquant sur la ligne "Pages", vous activerez l'icone "+" située juste au-dessus, qui vous permettra de créer des pages. Avec la souris, vous pouvez déplacer les pages dans la structure arborescente.

Ajout du mot-clé : dans le texte de l'une des pages, saisissez le mot-clé [[CONTACT_FORM]] puis enregistrez la page. Il sera utilisé plus tard pour afficher le formulaire de contact.

Ajout des paramètres du site : choisissez le type "Paramètres", saisissez le titre "Paramètres".

Ajout d'une liste de demandes de contact : choisissez le type "Demandes de contact", saisissez le titre "Demandes de contact".

Note : les titres des contenus sont importants, ils seront utilisés comme référence dans le code des étapes suivantes. La première saisie de ce titre détermine la référence du contenu. Ensuite, il est possible de modifier le titre : la référence ne changera pas.

Une fois les contenus ajoutés, cliquez sur le bouton "Mettre à jour le site" pour copier les contenus du site de prévisualisation vers le site final.

Création de index.php

Afin de visualiser les résultats, créons le fichier index.php à la racine du site. Pour l'instant, ce fichier ne contient pas de PHP. Les parties dynamiques seront ajoutées au fur et à mesure.

Voici le code à enregistrer dans index.php :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    <title>Titre</title>
    <link href="stylesheet.css" rel="stylesheet" media="screen,print">
    <style type="text/css" media="screen"><!--
    .MainTable { width: 750px; height:550px; }
    .noprint { }
    --></style>
    <style type="text/css" media="print"><!--
    .MainTable { width: 100% }
    .noprint { display: none }
    --></style>
  </head>

  <body>
    <table cellspacing="0" cellpadding="0" class="MainTable" align="center">
      <tr>
        <td colspan="2">
          <table class="MainHeader" border="0" width="100%" cellspacing="0" cellpadding="0">
            <tr>
              <td>
                Image du haut
              </td>
            </tr>
          </table>
        </td>
      </tr>
      <tr class="MainBloc">
        <td class="LeftMenu" nowrap>
          Menu du site
        </td>
        <td class="Content">
          <div>
          Contenu de la page
          </div>
        </td>
      </tr>
      <tr id="MainFooter">
        <td nowrap>Site motorisé par <a href="http://www.reaxia.org" target="_blank">Reaxia</a></td>
        <td>Pied de page</td>
      </tr>
    </table>
  </body>
</html>

Il faut aussi ajouter la feuille de style stylesheet.css :

.MainTable {
  border: 1px black solid;
  border-collapse: collapse;
}

.MainHeader {
  height: 50px;
  border-bottom: 1px black solid;
  text-align: center;
  padding: 0px;
  margin: 0px;
  table-layout: fixed;
}

img {
  border: 0px;
}

#MainFooter {
  height: 20px;
  background-color:black;
  text-align:center;
  font-size: 11px;
  font-style: normal;
  line-height: 18px;
  color: white;
}

#MainFooter a:link, a:visited, a:active {
  color: white;
  text-decoration: underline;
}

#MainFooter a:hover {
  color:white;
  text-decoration: none;
}

.MainBloc {
  height: 100%;
}

.LeftMenu  {
  color: #000000;
  background-color: #F4F4F4;
  font-size: 11px;
  width: 160px;
  height: 100%;
  vertical-align: top;
  margin: 0px;
  padding: 5px;
  display: block;
}

.Content {
  width: 100%;
  height: 100%;
  vertical-align: top;
  padding: 10px;
  margin: 0px;
}

#Submenu ul  {
  display: inside;
  list-style-image: none;
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

#Submenu li {
  padding: 0px;
  margin:0px 0px 0px 8px;
}

#Submenu a {
  margin: 0px;
  padding: 0px;
  font-weight:bold;
  color: black;
}

#Submenu a:hover {
  text-decoration: none;
}

Les librairies d'affichage

La librairie d'affichage du menu

A partir de cette étape, il faut se connecter à Reaxia Web à l’adresse http://www.monsite.com/reaxia en utilisant un compte développeur.

Connectez-vous en utilisant l'identifiant admin, et le mot de passe fourni à l'installation
Allez dans Outils d'administration, puis Liste d'utilisateurs
Cliquez sur Admin dans la liste des utilisateurs
Cochez la case Est un développeur
Saisissez le mot de passe du compte dans le champs Ancien mot de passse
Cliquez sur OK

Utilisez l'assistant générateur de librairies, dans Outils d'administration pour débuter la création de la librairie.

Choisissez pour le Choix du contenu : pages
Choisissez de Générer une librairie d'affichage
Entrez pour le Nom de la librairie : show_menu

Cliquez 2 fois sur suivant.

Cochez l'option suivante : Ne récupérer que les méta-données.

Cliquez encore une fois sur suivant.

Dans le code obtenu, repérez la méthode process_thread_content() qui génére le HTML du menu : remplacez la par le code ci-dessous.

  /**
   * Does whatever needs to be done with the selected blocs
   * @return string usually an HTML fragment, but it can be nothing.
   */
  function process_thread_content()
  {
    return '<div id="Submenu">'.show_menu::get_html_for_menu($this->categories['category_1']).'</div>';
  }
  
  function get_html_for_menu(&$categories)
  {
    $html = '<ul>' . "\n";
    foreach ($categories as $category)
    {
      $html .= '<li><a href="index.php?page='.$category['id'].'">'.$category['name'].'</a>' . "\n";
      if (!empty($category['children']))
        $html .= show_menu::get_html_for_menu($category['children']);
      $html .= '</li>' . "\n";
    }  
    $html .= '</ul>' . "\n";
    
    return $html;
  }

Cliquez sur Enregistrez puis sur Terminer.

Maintenant, remplaçons dans notre index.php le texte "Menu du site" par l'appel à notre nouvelle librairie d'affichage :

Avant :

<td class="LeftMenu" nowrap>
  Menu du site
</td>

Après :

<td class="LeftMenu" nowrap>
  <?php //pages_show_menu
    include_once('reaxia_lib/reaxia.php');
    display_thread('pages', 'show_menu');
  ?>
</td>

La librairie d'affichage des pages

Comme pour la librairie d'affichage du menu, utilisez l'assistant générateur de librairies pour débuter la création du fichier.

Contenu : pages
Nom de la librairie : show_content
Options : aucune.

Modifiez la méthode GetSQLQuery() :

  /**
   * Specify the SQL query who returns blocs
   * @return string the SQL statement that fetches the data
   */
  function GetSQLQuery()
  {
    if ($this->UsePreviewData)
      $rxp = '_rxp';
    else
      $rxp = '';
    
    if (!empty($_GET['page']) && is_numeric($_GET['page']) && $_GET['page'] > 0)
      $selectedPage = $_GET['page'];
    else
      $selectedPage = 1;
    
    $sql = 'SELECT * FROM `' . $this->threadRef . $rxp . '`';
    $sql .= " WHERE category_1_id = '$selectedPage'";
    
    return $sql;
  }

Modifiez la méthode process_thread_content() :

  /**
   * Does whatever needs to be done with the selected blocs
   * @return string usually an HTML fragment, but it can be nothing.
   */
  function process_thread_content()
  {
    $html = '';
    
    if (!empty($this->Blocs))
    {
      $aBloc = $this->Blocs[0];
      
      // $Menu_array = $this->categories['category_1'];
      $Menu_name = $aBloc['category_1_name'];
      $Menu_id = $aBloc['category_1_id'];
      
      $Texte_de_la_page = $aBloc['paragraph_1_text'];
      
      // Output each bloc as HTML
      $html .= '<h1>'.$Menu_name.'</h1>' . "\n";
      
      $html .= $Texte_de_la_page;
    }
    
    return $html;
  }

Maintenant, remplaçons dans index.php le texte "Contenu de la page" par l'appel à le librairie d'affichage des pages :

Avant :

<div>
  Contenu de la page
</div>

Après :

<div>
  <?php //pages_show_content
    include_once('reaxia_lib/reaxia.php');
    display_thread('pages', 'show_content');
  ?>
</div>

La librairie de chargement des paramètres

Utilisez l'assistant générateur de librairies pour débuter la création du fichier.

Contenu : parametres
Nom de la librairie : get_user_config
Options : Ne pas inclure les commentaires .

Modifiez la méthode process_thread_content() :

  /**
   * Does whatever needs to be done with the selected blocs
   * @return string usually an HTML fragment, but it can be nothing.
   */
  function process_thread_content()
  {
    $html = '';
    
    if (!empty($this->Blocs))
    {
      $aBloc = $this->Blocs[0];
      
      $Titre_de_la_page = $aBloc['single_line_1'];
      $Image_haut_de_page_ThumbnailTag = GetSmallImageTag($aBloc, 'image_1', 'border="0"');
      $Texte_bas_de_page = $aBloc['paragraph_1_text'];
      $Adresse_email_pour_les_demandes_de_contact = $aBloc['single_line_2'];
      
      // Output each bloc as HTML
      $GLOBALS['conf']['userconf'] = array (
          'title' => $Titre_de_la_page,
          'image' => $Image_haut_de_page_ThumbnailTag,
          'footer' => $Texte_bas_de_page,
          'sendmailto' => $Adresse_email_pour_les_demandes_de_contact
          );
    }
    
    return $html;
  }

À présent, incluons ces paramètres au fichier index.php.

À ajouter tout au début du fichier pour charger les paramètres :

<?php
  include_once('reaxia_conf/Reaxia_Conf.php');
  include_once('reaxia_core/epitools/_epitools.php');
  
  //parametres_get_user_config
  include_once('reaxia_lib/reaxia.php');
  display_thread('parametres', 'get_user_config', array('no_reaxia_comment' => 'true'));
?>

Les autres modifications dans index.php :

Avant :

<title>Titre</title>

Après :

<title><?php if (isset($GLOBALS['conf']['userconf']['title'])) echo $GLOBALS['conf']['userconf']['title']; ?></title>

Avant :

<td>
  Image du haut
</td>

Après :

<td>
  <?php if (isset($GLOBALS['conf']['userconf']['image'])) echo $GLOBALS['conf']['userconf']['image']; ?>
</td>

Avant :

<td>Pied de page</td>

Après :

<td><?php if (isset($GLOBALS['conf']['userconf']['footer'])) echo $GLOBALS['conf']['userconf']['footer']; ?></td>

Le formulaire de contact

Pour interpréter le mot-clé [[CONTACT_FORM]], nous allons modifier la librairie d'affichage des pages (fichier reaxia_lib/show_content/show_content.php). Vous trouverez plus de détails sur les mots-clés ici.

À ajouter au début du fichier, à l'extérieur de la classe :

$GLOBALS['conf']['keywords']['CONTACT_FORM'] = "Affiche le formulaire de contact
pour l'envoi d'un mail au webmaster";

Modification de la méthode process_thread_content() :

Avant :

// Output each bloc as HTML
$html .= '<h1>'.$Menu_name.'</h1>' . "\n";

$html .= $Texte_de_la_page;

Après :

// Output each bloc as HTML
$html .= '<h1>'.$Menu_name.'</h1>' . "\n";

// replace keywords
$textBefore = '';
$textAfter = '';

if (FindKeyword($Texte_de_la_page, '[[CONTACT_FORM]]', $textBefore, $textAfter))
{
  $Texte_de_la_page = $textBefore;
  if (isset($_POST['single_line_1']))
  {
    if (!empty($GLOBALS['conf']['userconf']['sendmailto']))
      insert_thread('demandes_de_contact', array(
          'SendMail' => true,
          'MailTo' => $GLOBALS['conf']['userconf']['sendmailto'],
          'MailFrom' => stripslashes($_POST['single_line_4']),
          'MailFromDisplayName' => trim(stripslashes($_POST['single_line_2'] . ' ' . $_POST['single_line_1'])),
          'MailSubject' => '[Contact]'));
    else
      insert_thread('demandes_de_contact');

    $Texte_de_la_page .= '<p align="center">Nous avons bien reçu votre demande.</p>';
  }

  $Texte_de_la_page .= show_content::getContactForm();
  $Texte_de_la_page .= $textAfter;
}

$html .= $Texte_de_la_page;

Avant :

    return $html;
  }
}

Après :

    return $html;
  }
  
  /**
   * Get HTML for the contact form
   * @return string HTML code
   */
  function getContactForm()
  {
    $html = '';
    
    $html .= '<form name="new_contact" action="index.php?page=' . $_GET['page'] . '" method="POST">' . "\n";
    $html .= '<table border="0" cellpadding="0" cellspacing="4" width="100%">' . "\n";
    $html .= '<tr>' . "\n";
    $html .= '  <td width="100" align="right" nowrap>Nom : </td>' . "\n";
    $html .= '  <td><input type="text" name="single_line_1" style="width: 100%;"></td>' . "\n";
    $html .= '</tr>' . "\n";
    $html .= '<tr>' . "\n";
    $html .= '  <td width="100" align="right" nowrap>E-mail : </td>' . "\n";
    $html .= '  <td><input type="text" name="single_line_2" style="width: 100%;"></td>' . "\n";
    $html .= '</tr>' . "\n";
    $html .= '<tr>' . "\n";
    $html .= '  <td width="100" align="right" nowrap>Sujet : </td>' . "\n";
    $html .= '  <td><input type="text" name="single_line_3" style="width: 100%;"></td>' . "\n";
    $html .= '</tr>' . "\n";
    $html .= '<tr>' . "\n";
    $html .= '  <td width="100" align="right" nowrap>Message : </td>' . "\n";
    $html .= '  <td><textarea name="paragraph_1" rows="6" style="width: 100%;"></textarea></td>' . "\n";
    $html .= '</tr>' . "\n";
    $html .= '</table>' . "\n";
    $html .= '<div style="text-align: right; padding-right: 4px;"><input type="submit"></div>' . "\n";
    $html .= '</form>' . "\n";
    
    return $html;
  }
}

Publiez votre site

Dans le menu de gauche, cliquez sur "Mettre à jour le site".
Cliquez sur "Affichez tous les contenus" et cochez tout.
Validez en cliquant sur OK.

Félicitations

Bravo, vous avez réalisé avec succès votre premier site Reaxia ! : )

Les contributeurs peuvent maintenant rédiger les textes et consulter les demandes de contact en se connectant à Reaxia Web, à l'adresse http://www.monsite.com/reaxia.

Récupérée de « http://wiki.reaxia.org/index.php/Tutoriel_Reaxia_n%C2%B01 »

Views

Outils personels

Rechercher

Boîte à outils