Exemple réalisation d'un site avec flexicontent

More
13 years 9 months ago #7633 by micker
bonjour à tous je viens de finir mon site motorisé avec Flexicontent !
Je vais vous expliquer l'approche et les différentes étapes de réalisations.
Déjà on commence par le site
www.le-bijou.net/


objectif :
c'est un site pour une salle de concert à Toulouse.
3 concerts de moyenne par semaine
le but étant d'avoir plusieurs vues à partir d'une unité concert.
Chaque article est un concert.
[img]http://www.le-bijou.net/bijou-projet/pres-concert.jpg/img] Avec un [i]cas particulier pour certain concert[/i] sont des auditions (mise en page particulière) Il doit y avoir [i]une vue mensuelle des concerts[/i] [img]http://www.le-bijou.net/bijou-projet/pres-prog.jpg[/img]
Il doit y avoir en première page les concerts de la semaine.


Une gestion des archives sur 20 ans.


Avec une contrainte :
le plus automatiser possible !

contexte :
un site en joomla 1.0.15
avec 1 article = concert
la vue mensuelle fait à la main avec un tableau
pas de vue semaine
problème de gestion des archives (env 1000 articles)

PASSAGE vers la 1.5.18 et flexicontent

1 création de la structure
J'ai d'abord commencer par la mise en place de la structure des catégories.
* Pour les archives
1 catégorie archive
|_x sous catégorie par l'affichage par année (2010-2009-etc...)
1 catégorie concert
|_1 sous catégorie audition
1 catégorie page-accueil pour la vue semaine de la première page

2 création des différents type de contenu
* concert qui vas afficher :
le nom du groupe
la date (en format texte)
le type de chanson
l'heure (en format texte)
la description du groupe
les liens web (myspace et site perso)
un player mp3
le prix du concert
un bouton pour acheter via la fnac boutique


* audition qui vas afficher :
le nom de l'audition
la date (en format texte)
le type de l'audition
l'heure (en format texte)
la description
et un tableau avec le nom / la description / le site web / l'heure de passage de chaque groupe

3 création des champs
Pour les concerts
le nom du groupe = titre de l'item
la date (en format texte) = champ texte avec valeur par defaut de la date de base "du X au X"
le type de chanson = champ texte avec valeur par defaut le type de base "chanson"
l'heure (en format texte) = champ texte avec valeur par defaut l'heure de base "21h30 précise"
la description du groupe = description de l'item
l'image = champ image avec une redirection des dossier vers des emplacements plus simple (images/stories/etc ..) et des réglages de taille c'est à dire les thumbs 90*90 (cela me servira pour le module de la premiere page) 300*300 pour les articles et 800*600 pour les popups.
les liens web (myspace et site perso) = champ web link avec valeur multiple
un player mp3 = une liste déroulant avec une requête sql pour lister les mp3 charger via flexicontent et l'activation du plugin mp3. Préfix
Code:
{play}images/stories/media/
pour le début de mon plugin et suffix
Code:
{/play}
La requette SQL
Code:
SELECT id AS value, filename AS text FROM #__flexicontent_files WHERE ext = 'mp3'
le prix du concert = liste déroulante des différents tarifs
un bouton pour acheter via la fnac boutique = un champ texte. Les liens vers les boutiques FNAC sont simple
Code:
http://lienboutiquefnac....=TFOUL
, TFOUL étant un code de 4 lettres identifiant les différents évènements. Pour que ce lien soit bon il suffit de rentrer le bon code à 4 chiffres. Donc le début de ce champs c'est Préfix
Code:
<a href="http://lebijou.fnacspectacles.com/ficheManifestation.do?codman=
le suffix c'est
Code:
" target="_blank"><img alt="" src="images/stories/command-fnac.gif" mce_src="images/stories/command-fnac.gif" border="0" width="100" height="30">
pour afficher le bouton. il ne restera plus qu'à l'utilisateur de mettre les 4 chiffres.

Pour les auditions
le nom de l'audition = titre de l'item
la date (en format texte) = champ texte avec valeur par defaut de la date de base "du X au X"
le type de chanson = champ texte avec valeur par defaut le type de base "chanson"
l'heure (en format texte) = champ texte avec valeur par defaut l'heure de base "21h30 précise"
6 champ nom de groupe
= champ texte
6 description du groupe = description de l'item
6 les liens web (myspace et site perso) = champ web link avec valeur multiple
6 heure de passage = champ texte pré-remplie pour chaque tranches horaires
1 champ pause = champ texte pour l'horaire de la pause

4 Réalisation des templates

Item concert :
Pour l'affichage des concerts
1 j'ai dupliquer un template par défaut puis appeler concert.
2 dans le dossier
Code:
components/com_flexicontent/templates/concert
éditer item.xml pour créer les positions 1 pour chaques zones
Code:
<fieldgroups> <group>date-heure</group> <group>type</group> <group>description</group> <group>image</group> <group>site-web</group> <group>prix</group> <group>fnac</group> <group>bottom</group> </fieldgroups> <cssitem> <file>css/item.css</file> </cssitem>
3 Dans le fichier item.php (même dossier)
Code:
<?php defined( '_JEXEC' ) or die( 'Restricted access' ); // first define the template name $tmpl = $this->tmpl; ?> <div id="flexicontent" class="flexicontent item<?php echo $this->item->id; ?> type<?php echo $this->item->type_id; ?>"> <!-- BOF buttons --> <p class="buttons"> <?php echo flexicontent_html::pdfbutton( $this->item, $this->params ); ?> <?php echo flexicontent_html::mailbutton( 'items', $this->params, null , $this->item->slug ); ?> <?php echo flexicontent_html::printbutton( $this->print_link, $this->params ); ?> </p> <!-- EOF buttons --> <!-- BOF page title --> <?php if ($this->params->get( 'show_page_title', 1 ) && $this->params->get('page_title') != $this->item->title) : ?> <h1 class="componentheading"> <?php echo $this->params->get('page_title'); ?> </h1> <?php endif; ?> <!-- EOF page title --> <!-- BOF item title --> <?php if ($this->params->get('show_title', 1)) : ?> <h2 class="contentheading flexicontent"> <?php echo $this->escape($this->item->title); ?> </h2> <?php endif; ?> <!-- EOF item title --> <div class="clear"></div> <div class="concert"> <span class="imagebijou"><?php echo $this->fields['imageg']->display; ?></span><span class="dateheure"><?php echo $this->fields['date_texte']->display; ?> <?php echo $this->fields->heure->display; ?></span><br /> <span class="type"><?php echo $this->fields['type_chanson']->display; ?></span><br /><br /> <?php echo $this->fields['text']->display; ?> <br /><br /> <?php echo $this->fields['site_web']->display; ?> <br /><br /> <?php echo $this->fields['mp3']->display; ?><?php echo $this->fields['mp3-externe']->display; ?><br /><br /> <span class="prix"><?php echo $this->fields['prix']->display; ?></span><br /> <?php echo $this->fields['fnac']->display; ?><br /> </div> <div class="clear"></div> </div>
pour chaque valeur je charge un champ avec des déclaration de div ou de class pour le item.css
Code:
<?php echo $this->fields['MONCHAMP']->display; ?>
4 utilisation du fichier item.css pour la customisation de l'affichage.


En cour de rédaction !!

FLEXIcontent is Free but involves a very big effort on our part.
Like the our support? (for a bug-free FC, despite being huge extension) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing reviews. Thanks![/size]

Please Log in or Create an account to join the conversation.

More
13 years 9 months ago #7915 by micker
La suite
création d'un template de catégorie sous forme de tableau :
l'objectif

un tableau mensuel qui affiche
le champ titre
le champ date
le champ heure
le champ genre
le champ prix
le champ fnac

Avec une partcularité un javascript fais par yopyop001 qui trie en fonction de du mois en cours !
Aller c'est parti
duplication du template de catégorie defaut (renomage)
définition des positions dans le category.xml
Code:
<fieldgroups> <group>artiste</group> <group>genre</group> <group>date</group> <group>heure</group> <group>tarif</group> </fieldgroups> <csscategory> <file>css/category.css</file> </csscategory>
création du template dans la partie php category-item.php
Code:
<?php /** * @version 1.5 beta 5 $Id: default_items.php 85 2009-10-10 13:48:04Z vistamedia $ * @package Joomla * @subpackage FLEXIcontent * @copyright (C) 2009 Emmanuel Danan - www.vistamedia.fr * @license GNU/GPL v2 * * FLEXIcontent is a derivative work of the excellent QuickFAQ component * @copyright (C) 2008 Christoph Lukes * see www.schlu.net for more information * * FLEXIcontent is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. */ defined( '_JEXEC' ) or die( 'Restricted access' ); // first define the template name $tmpl = $this->tmpl; ?> <script type="text/javascript"> function tableOrdering( order, dir, task ) { var form = document.getElementById("adminForm"); form.filter_order.value = order; form.filter_order_Dir.value = dir; document.getElementById("adminForm").submit( task ); } //Fonction qui filtre l'affichage des résultats en fonction du mois selectionné dans la liste déroulante list_mois //Affiche le mois dans le div label_mois function filter_month(month){ //Tableau de correspondance var array_month = { "01" : "Janvier" , "02" : "F&eacute;vrier","03" : "Mars" , "04" : "Avril","05" : "Mai" , "06" : "Juin","07" : "Juillet" , "08" : "Aout","09" : "Septembre" , "10" : "Octobre","11" : "Novembre" , "12" : "D&eacute;cembre"}; var array_month_2 = { "0" : "01" , "1" : "02","2" : "03" , "3" : "04","4" : "05" , "5" : "06","6" : "07" , "7" : "08","8" : "09" , "9" : "10","10" : "11" , "11" : "12"}; //On récupère la valeur sélectionné dans la liste déroulante list_mois //var month=document.getElementById('list_mois').value; var month_num = array_month_2[month]; month_suiv=month+1; if(array_month_2[month_suiv]){ suiv_innerHtml = '<a href="#items" onclick="javascript:filter_month('+month_suiv+')" >'+array_month[array_month_2[month_suiv]]+'' } else{ suiv_innerHtml=''; } month_prec=month-1; if(array_month_2[month_prec]){ prec_innerHtml = '<a href="#items" onclick="javascript:filter_month('+month_prec+')" >'+array_month[array_month_2[month_prec]]+'' } else{ prec_innerHtml=''; } //FireFox et Safari if (document.styleSheets[0].cssRules) { document.styleSheets[0].insertRule('.event {display:none;}',document.styleSheets[0].cssRules.length); document.styleSheets[0].insertRule('.class_month_'+month_num.toString()+' {display:table-row;}',document.styleSheets[0].cssRules.length); document.getElementById('label_mois').innerHTML=array_month[month_num]; document.getElementById('mois_suiv').innerHTML=suiv_innerHtml; document.getElementById('mois_prec').innerHTML=prec_innerHtml; } //IE else{ document.styleSheets[0].addRule(".event" ,"display:none;"); document.styleSheets[0].addRule(".class_month_"+month_num.toString(), "display:block;"); document.getElementById('label_mois').innerHTML=array_month[month_num]; document.getElementById('mois_suiv').innerHTML=suiv_innerHtml; document.getElementById('mois_prec').innerHTML=prec_innerHtml; } } </script> <?php //Tableau de correspondance (qui va servir pour la génération de la liste déroulante $mois = array( "01" => "Janvier" , "02" => "F&eacute;vrier","03" => "Mars" , "04" => "Avril","05" => "Mai" , "06" => "Juin","07" => "Juillet" , "08" => "Aout","09" => "Septembre" , "10" => "Octobre","11" => "Novembre" , "12" => "D&eacute;cembre"); //Génération de la liste déroulante à partir du tableau $mois $options=""; foreach ($mois as $key => $str_mois) { $options.= "<option value=".$key.">".$str_mois."</option>\n"; } $list_mois= "<select name='list_mois' id='list_mois' onchange='filter_month()'>".$options."</select>"; $this->lists['filter_order']="i.created"; $this->lists['filter_order_Dir']="ASC"; ?> <?php if ((($this->params->get('use_filters', 0)) && $this->filters) || ($this->params->get('use_search')) || ($this->params->get('show_alpha', 1))) : ?> <form action="<?php echo $this->action; ?>" method="post" id="adminForm"> <?php if ((($this->params->get('use_filters', 0)) && $this->filters) || ($this->params->get('use_search'))) : ?> <div id="fc_filter" class="floattext"> <?php if ($this->params->get('use_search')) : ?> <div class="fc_fleft"> <input type="text" name="filter" id="filter" value="<?php echo $this->lists['filter'];?>" class="text_area" onchange="document.getElementById('adminForm').submit();" /> <button onclick="document.getElementById('adminForm').submit();"><?php echo JText::_( 'FLEXI_GO' ); ?></button> <button onclick="document.getElementById('filter').value='';document.getElementById('adminForm').submit();"><?php echo JText::_( 'FLEXI_RESET' ); ?></button> </div> <?php endif; ?> <?php if ($this->filters) : ?> <div class="fc_fright"> <?php foreach ($this->filters as $filt) : echo '<span class="filter">'; echo $filt->html; echo '</span>'; endforeach; ?> </div> <?php endif; ?> </div> <?php endif; ?> <?php if ($this->params->get('show_alpha', 1)) : echo $this->loadTemplate('alpha'); endif; ?> <input type="hidden" name="option" value="com_flexicontent" /> <input type="hidden" name="filter_order" value="<?php echo $this->lists['filter_order']; ?>" /> <input type="hidden" name="filter_order_Dir" value="<?php echo $this->lists['filter_order_Dir']; ?>" /> <input type="hidden" name="view" value="category" /> <input type="hidden" name="letter" value="" id="alpha_index" /> <input type="hidden" name="task" value="" /> <input type="hidden" name="id" value="<?php echo $this->category->id; ?>" /> </form> <?php endif; ?> <?php if ($this->items) : // routine to determine all used columns for this table $columns = array(); foreach ($this->items as $item) : if (isset($item->positions['table'])) : foreach ($item->positions['table'] as $pos) : if (!in_array($pos->name, $columns)) : $columns[$pos->name] = $item->fields[$pos->name]->label; endif; endforeach; endif; endforeach; ?> <div id="label_mois1">Programmation <span id="label_mois" style="width:auto;"></span></div><br> <a name="items" id="items"> <table id="flexitable" class="flexitable" width="100%" border="0" cellspacing="0" cellpadding="0" summary="<?php echo $this->category->name; ?>"> <thead> <tr class="entete-tableau"> <th>Artistes</th> <th>Genres</th> <th>Dates</th> <th>Horaires</th> <th>Prix</th> </tr> </thead> <tbody> <?php $k = 0; foreach ($this->items as $item) : $class = ($k%2) ? '1' : '2'; $k++; ?> <?php $datecreation = $item->fields['created']->display; $explode_created = explode(".",$datecreation); $mois_parcouru = $explode_created[1]; ?> <tr class="ligne<?php echo $class; ?> event class_month_<?php echo $mois_parcouru;?>" > <!-- BOF item title --> <td scope="row" class="table-titles"> <?php if ($this->params->get('link_titles', 0)) : ?> [url=<?php echo JRoute::_(FlexicontentHelperRoute::getItemRoute($item->slug, $this->category->slug)); ?>]<?php echo $this->escape($item->title); ?>[/url] <?php else : echo $this->escape($item->title); endif; ?> </td> <!-- BOF item title --> <td class="genres" > <!-- BOF genres cell --> <?php if (isset($item->positions['genre'])) : ?> <?php foreach ($item->positions['genre'] as $field) : ?> <?php echo $field->display ? $field->display : ''; ?> <?php endforeach; ?> <?php endif; ?> <!-- EOF Genres cell --> </td> <td class="dates" > <!-- BOF dates cell --> <?php if (isset($item->positions['date'])) : ?> <?php foreach ($item->positions['date'] as $field) : ?> <?php echo $field->display ? $field->display : ''; ?> <?php endforeach; ?> <?php endif; ?> <!-- EOF Dates cell --> </td> <td class="heure" > <!-- BOF date-heure cell --> <?php if (isset($item->positions['heure'])) : ?> <?php foreach ($item->positions['heure'] as $field) : ?> <?php echo $field->display ? $field->display : ''; ?> <?php endforeach; ?> <?php endif; ?> <!-- EOF heure cell --> </td> <td class="tarif" > <!-- BOF prix cell --> <?php if (isset($item->positions['tarif'])) : ?> <?php foreach ($item->positions['tarif'] as $field) : ?> <?php echo $field->display ? $field->display : ''; ?> <?php endforeach; ?> <?php endif; ?> <!-- EOF tarif cell --> </td> </tr> <?php endforeach; ?> </tbody> </table> <div id="mois_prec" style="width:45%;float:left;text-align:right"></div> <div id="mois_suiv" style="width:45%;float:right"></div> <?php else : ?> <div class="noitems"><?php echo JText::_( 'FLEXI_NO_ITEMS_CAT' ); ?></div> <?php endif; ?> <script type="text/javascript"> //Initialisation après le chargement de la page en fonction du mois actuel //On récupère le mois actuel var d = new Date(); var today_month = d.getMonth(); //On le sélectionne dans la liste déroulante list_mois //document.getElementsByName('list_mois')[0][today_month].selected=true; //On applique le filtre. if(window.onload){ var oldOnload=window.onload; window.onload=function(){ oldOnload(); filter_month(today_month); } } else { window.onload=function(){ filter_month(today_month); } } </script>
un peu plus d'explication
Code:
<thead> <tr class="entete-tableau"> <th>Artistes</th> <th>Genres</th> <th>Dates</th> <th>Horaires</th> <th>Prix</th> </tr> </thead>
ici on définis les entrées des colonnes
Code:
<?php $k = 0; foreach ($this->items as $item) : $class = ($k%2) ? '1' : '2'; $k++; ?>
grâce à ceci on applique un style css différent à chaque ligne.
Code:
<?php $datecreation = $item->fields['created']->display; $explode_created = explode(".",$datecreation); $mois_parcouru = $explode_created[1]; ?>
grâce à ceci on fait le trie par rapport à la date
Code:
<tr class="ligne<?php echo $class; ?> event class_month_<?php echo $mois_parcouru;?>" >
on affiche le mois en cours
Code:
<!-- BOF item title --> <td scope="row" class="table-titles"> <?php if ($this->params->get('link_titles', 0)) : ?> [url=<?php echo JRoute::_(FlexicontentHelperRoute::getItemRoute($item->slug, $this->category->slug)); ?>]<?php echo $this->escape($item->title); ?>[/url] <?php else : echo $this->escape($item->title); endif; ?> </td> <!-- BOF item title --> <td class="genres" > <!-- BOF genres cell --> <?php if (isset($item->positions['genre'])) : ?> <?php foreach ($item->positions['genre'] as $field) : ?> <?php echo $field->display ? $field->display : ''; ?> <?php endforeach; ?> <?php endif; ?> <!-- EOF Genres cell --> </td> <td class="dates" > <!-- BOF dates cell --> <?php if (isset($item->positions['date'])) : ?> <?php foreach ($item->positions['date'] as $field) : ?> <?php echo $field->display ? $field->display : ''; ?> <?php endforeach; ?> <?php endif; ?> <!-- EOF Dates cell --> </td> <td class="heure" > <!-- BOF date-heure cell --> <?php if (isset($item->positions['heure'])) : ?> <?php foreach ($item->positions['heure'] as $field) : ?> <?php echo $field->display ? $field->display : ''; ?> <?php endforeach; ?> <?php endif; ?> <!-- EOF heure cell --> </td> <td class="tarif" > <!-- BOF prix cell --> <?php if (isset($item->positions['tarif'])) : ?> <?php foreach ($item->positions['tarif'] as $field) : ?> <?php echo $field->display ? $field->display : ''; ?> <?php endforeach; ?> <?php endif; ?> <!-- EOF tarif cell --> </td> </tr> <?php endforeach; ?> </tbody> </table>
et la on charge chaque colonne sous la forme
Code:
<td class="MACOLONE" > <!-- BOF prix cell --> <?php if (isset($item->positions['MAPOSITION'])) : ?> <?php foreach ($item->positions['MAPOSITION'] as $field) : ?> <?php echo $field->display ? $field->display : ''; ?> <?php endforeach; ?> <?php endif; ?> <!-- EOF tarif cell --> </td>
et vili un beau tableau tout bo tout propre que on utilise les css en suivant.
N'oublier pas de glisser les champs dans les positions respectives (admin template)

On voit bien l'intérêt de pouvoir générer 2 présentation de pages différentes à partir d'un seul type de données. 1 seule saisie !!! c'est du temps de gagner !

FLEXIcontent is Free but involves a very big effort on our part.
Like the our support? (for a bug-free FC, despite being huge extension) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing reviews. Thanks![/size]

Please Log in or Create an account to join the conversation.

More
13 years 7 months ago - 13 years 6 months ago #9610 by crickeur
Bonjour/Bonsoir
Merci de pour ce tuto, qui permets d'éclairer sur la façon de structurer son projet. Je l'ai suivi à la lettre mais j'ai un souci à savoir dans la partie template de catégorie sous forme de tableau, les lignes du tableau n'apparaissent pas. J'ai vérifié : j'ai bien des champs dans les "positions disponibles" du template en "vue category", mes contenus sont publiés....
Une aide serait la bienvenue.
Par avance merci
Last edit: 13 years 6 months ago by crickeur.

Please Log in or Create an account to join the conversation.

More
13 years 6 months ago #9807 by micker
hello je suis de retours de vacances !!
alors tu pourrais mettre le code de ton template ?
Merci

FLEXIcontent is Free but involves a very big effort on our part.
Like the our support? (for a bug-free FC, despite being huge extension) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing reviews. Thanks![/size]

Please Log in or Create an account to join the conversation.

More
13 years 6 months ago #9826 by crickeur
En fait j'ai pu retrouver et afficher les lignes du tableau, c'est tout simplement je n'était pas dans le bon fichier... :oops:

Je passe de suite le post en résolu, merci quand même.

Please Log in or Create an account to join the conversation.

More
13 years 6 months ago #9854 by micker
cool super merci

FLEXIcontent is Free but involves a very big effort on our part.
Like the our support? (for a bug-free FC, despite being huge extension) Like the features? Like the ongoing development and future commitment to FLEXIcontent?
-- Add your voice to the FLEXIcontent JED listing reviews. Thanks![/size]

Please Log in or Create an account to join the conversation.

Moderators: vistamediajoomlacornerggppdk
Time to create page: 0.464 seconds
Save
Cookies user preferences
We use cookies to ensure you to get the best experience on our website. If you decline the use of cookies, this website may not function as expected.
Accept all
Decline all
Essential
These cookies are needed to make the website work correctly. You can not disable them.
Display
Accept
Analytics
Tools used to analyze the data to measure the effectiveness of a website and to understand how it works.
Google Analytics
Accept
Decline