Dynamisation eZ Publish

5 Commentaires

Un peu de code

Nous allons voir aujourd’hui un exemple complet de dynamisation, c’est-à-dire rendre votre site web dynamique et le rendre plus attractifs.

Nous allons commencer  par une petite conception de notre exemple. Pour cela vous devez  déclarer deux classes (Accueil et Rubrique).

Classe Accueil : pour la Home de site.

Classe Rubrique : pour les différents rubriques  de site

Pour créer des classes,  sous le site du Back-office on clique sur  la rubrique « Administrartion », sur le menu droit, nous avons un lien Classes.

Pour que notre travaille soit bien organisé, nous allons créer un nouveau groupe de classes, vous le nommez comme vous voulez.  Une fois fait, on peut ajouter nos 2 classes.

dynamisation_1

 

Nom : Le nom de classe

Identifiant : l’identifiant de la classe qui sera très utiles  dans le code

Description : une courte description de la classe

Modèle de nom d’objet  : ici nous avons mentionné quel  nom va prendre l’objet.  Ici on ‘a mis  le nom de l’attribut Titre  <identifiant_attribut_x>

Modèle de génération de l’url  : le même principe que le modèle  nom d’objet, mais cette fois, ça sera l’url généré.

Pour ajouter vos propres attributs:

dynamisation_2

Nous avons maintenant  deux  classes, avec deux attributs (Titre de type Ligne de texte et Contenu de type Bloc  xml).

Nos classes  Accueil et Rubrique sont pareille pour le moment, mais nous allons sûrement ajouter d’autre attributs.

Après le clique sur le lien Contenus du Back_Office, on peut voir :

dynamisation_3

Maintenant, nous allons créer  un objet de la classe Accueil, pour cela, vous cliquez sur l’icône de folder « eZ Publish », une liste s’ouvre,  ensuite  => Créer ici, une autre liste s’ouvre qui contient les différents classes de site.  Ensuite vous suivez les différentes instructions.

dynamisation_4

A se stade, si vous essayer d’afficher le FrontOffice, vous aurez la vue  full de folder  « eZ Publish » , ici vous avez le choix,

  • Soit vous surchargez cette vue et vous mettez vos propres contenus,
  • Soit  via le BackOffice , clique sur le folder, -> Avancé ->  échanger  avec un autre nœud. (Notamment  échanger  avec le nouvel  nœud créé celle du home). C’est cette solution que je fais souvent, après l’échange je supprime le folder « eZ Publish ».

dynamisation_5

  • Soit sur votre fichier  extension/ezsite/settings/site.ini.append.php

N.B : si vous n’avez pas ce fichier sur votre extension, vous devez le créer

Vous ajoutez ce bout de code

[SiteSettings] 
IndexPage=/content/view/full/59/

Ici nous avons mentionné que la page par défaut sera le nœud 59, qui est l’id nœud de l’objet que nous avons créé. (Vous pouvez revoir la partie de concept de bases).

Une petite astuce, si vous n’arrivez pas à voir les objets que vous avez crée sur le back_office, il vous suffit de suivre cette procédure :

Sur le fichier : settings/ siteaccess/ projet_admin/ contentstructuremenu.ini.append.php

Vous ajoutez les identifiants des nouvelles classes créées.

<?php /* #?ini charset="utf-8"?
[TreeMenu]
Dynamic=enabled
ShowClasses[]
ShowClasses[]=folder
ShowClasses[]=user_group
ShowClasses[]=accueil
ShowClasses[]=rubrique
*/ ?>

Voilà ce que vous aurez après la création de votre objet Accueil

dynamisation_6

Alors si vous avez optez pour le choix numéro 2 , Vous aurez quelque chose  comme ça :

dynamisation_7

De la même façon, nous allons créer  des rubriques, en dessous de le nœud Accueil

dynamisation_8

Après la création des classes et les nœuds,  on passe à une autre chose.

dynamisation_7

Un peu de code

Sur  votre page « pagelayout.tpl », vous devez mettre la structure HTML globale de vos pages.

 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<!-- HEAD -->
{include uri="design:page_head.tpl"}
<!-- /HEAD -->
<body>
<div id="container">
<div id="header">
<h1>Tutorial </h1>
<h2>eZ Publish Open Source</h2>
</div>
{* Intégration menu *}
{include uri="design:parts/menu.tpl"}
{* /Intégration menu *}
<div id="content">
<div id="content_top"></div>
<div id="content_main">
{$module_result.content}
</div>
<div id="content_bottom"></div>
<div id="footer">
<h3><a href="http://www.google.com">footer1</a> | <a href="http://www.twitter.com">footer2</a> | <a href="http://www.htmlcodes.me">footer3</a> | <a href="http://www.free-templates.me">footer4</a></h3>
</div>
</div>
</div>
</body>
</html>

comme vous le remarquez, on utilise des include comme le cas de :

« include uri= « design :page_head.tpl » ».

Là on met la balise head et son contenu. Donc les différents appels aux fichiers de style et de JavaScript.

« include uri= « design :parts/menu.tpl ».

Pour la page menu.tpl

dynamisation_9

{def $rubriques = fetch('content','list',hash('parent_node_id', 2,
 'class_filter_type', 'include',
 'class_filter_array', array('rubrique') ))
$home = fetch( 'content', 'node', hash( 'node_id', 2 ) )}
 {* on récupére une liste des nodes dont la parent_node_id vaut 2*}
 {* on récupére la node dont le node_id vaut 2*}
 {* ces fonctions sont en fait que des requetes sql*}&nbsp; &nbsp; &nbsp;
<div id="menu">
<ul>
<li><a href={$home.url_alias|ezurl()}>{$home.name}</a></li>
{foreach $rubriques as $rubrique}
<li><a href={$rubrique.url_alias|ezurl()}>{$rubrique.name}</a></li>
{/foreach}
</ul>
</div>

A lire les commentaires pour mieux comprendre ce que fait chaque bout de code.

Le fetch ; list est une fonction qui permet de récupérer une liste des nœuds.

Le fetch ; node : est un fonction qui permet de récupérer un nœud identifié par un numéro d’identification

Lien pour la documentation http://doc.ez.no/eZ-Publish/Technical-manual/4.x/Reference/Template-fetch-functions

Si tout se passe bien, vous aurez un affichage avec votre menu (Home, Rubrique1, Rubrique2)

dynamisation_10

Maintenant si vous cliquez sur la rubrique1 :

dynamisation_11

Pour  faire votre propre affichage, Il faut surcharger la vue par défaut des  noeuds  de type classe Rubrique.

Une petite explication :

Le système de surcharge de templates  permet d’utiliser d’autres templates que ceux par défaut.  Ce  mécanisme permet la création de surcharges de template pour  n’importe quel template utilisé par eZ publish.

 the_override_system_doc_jpg

Les surcharges  de templates doivent  être définies dans le fichier override.ini.append.php d’un siteaccess.  pour notre cas :

«/settings/siteaccess/plain_site/override.ini.append.php».

Ce fichier se compose de blocs, chacun d’eux constituant un ensemble nommé de règles de gestion à  eZ Publish  d’utiliser, dans certaines conditions, un template alternatif particulier.

{1}[full_rubrique]

{2}Source=node/view/full.tpl

{3}MatchFile=full/rubrique.tpl

{4}Subdir=templates

{5}Match[class_identifier]=rubrique

{1} : le nom unique de surcharge

{2} : le nom du template à surcharger

{3} : le nom du template de surcharge

{4} : le nom du répertoire dans lequel est placé le template de surcharge

{5} : condition qaund le surcharge doit être employée

En résumé : nous avons mentionné  au système ceci : pour la vue  full du nœud Rubrique que nous avons crée sous le nœud Accueil,  au lieu d’utiliser la vue par défaut, on utilisera notre vue  « rubrique.tpl » situé dans le chemin suivant :

« extension/ezsite/design/ezsite/override/templates/full/rubrique.tpl ».

[full_accueil]
Source=node/view/full.tpl
MatchFile=full/accueil.tpl
Subdir=templates
Match[class_identifier]=accueil

[full_rubrique]
Source=node/view/full.tpl
MatchFile=full/rubrique.tpl
Subdir=templates
Match[class_identifier]=rubrique

Nous allons créer notre vue rubrique.tpl

Rappelez-vous que nous avons deux attributs à afficher pour la classe Rubrique (Titre et un contenu de type Bloc xml).

dynamisation_12

<h2>{$node.name}</h2>

{attribute_view_gui attribute=$node.data_map.description}

On affiche le titre et le contenu.

La variable $node est accessible depuis les vues full ou line d’un nœud

Elle contient toutes les données concernant le nœud courant

Pour savoir plus, essayez de faire {$node|attribute(show)}

Normalement vous devez avoir un exemple qui fonctionne bien avec un lien vers la home et deux autres liens vers les rubriques (rubrique1 et rubrique2) ;

dynamisation_13

Dans cet article nous avons vu comment  peut-on créer des classes et  des  objets de contenu,  ainsi  une dynamisation de contenu , en passant par le mécanisme de surcharge des vues par défaut.

  • Nicolas Pastorino

    Merci Amine pour cette bonne introduction, utile pour les développeurs débutants.

    Tu devrais « enregistrer » ton blog sur Planet eZ Publish FR : http://www.planet-ezpublish.fr/

    Tu peux faire une simple demande par le biais du formulaire de contact : http://www.planet-ezpublish.fr/contac

    A bientôt !

  • Farouk

    Bonjour,
    j’aime bien ce que tu faits et j’ai quand même eu quelques astuces.
    par contre fait à attention aux erreurs au niveau des codes, ça serais bien de les testés avant de les publiés sinon les débutants risquerons de reprendre un code qui ne marche pas.
    sur ton fetch rubrique, il manque les deux parenthèse fermante avant de la viriabale $home.
    Cdlt

    • admin

      Bonjour,
      Merci pour ton passage et tes remarques.
      c’est corrigé, c’était juste un problème de copier/coller

  • admin

    MErci,
    J’utilise adk media

  • hello nice