Recommend Print

Réaliser son site de recettes avec FLEXIcontent

Réaliser son site de recettes avec FLEXIcontent

  • Published by
    Yannick Berges
  • Last modified
    17 September 2014
  • Voting
    Average rating
    16 votes
  • Favourites
    Click to subscribe
  • Concerns
    Component Plugins Modules
  • Since Version
    2.0
  • Up to date
    Yes
  • Profile concerned
    End user, Webdesigner

Créer un annuaire de recette puissant avec un moteur de recherche avancé.
A travers l’utilisation de champs : vote, commentaire, vidéo, galerie d’image, évaluation..
Vous pourrez appréhender la puissance et la simplicité de FLEXIcontent

Tuto offert par Com3elles

Liens :
https://twitter.com/Com3elles
https://www.facebook.com/com3elles
http://www.com3elles.com


Return to contents

FLEXIcontent c’est quoi ?

FLEXIcontent est un système de gestion de contenu avancé (CCK) pour Joomla (1.5-2.5-3.X) permettant de mettre en page des contenus automatiquement selon des champs remplis dans le formulaire de soumission.

Il permet de :

  • Simplifier la conception et l’administration à travers un composant unique
  • D’étendre les possibilités et la présentation de vos articles (30aine de champs : texte, images, vidéos, son, liste déroulante, etc) à travers des templates de contenus
  • Simplifier l’interface saisie pour l’utilisateur grâce à des champs pré-configurés
  • De gérer le multi-catégories avancé (un même article dans plusieurs catégories)
  • Mettre en place un moteur de recherche et filtrage dynamique de contenu
  • Gestion des droits et du workflow (droit et notification de joomla + ACL spécifiques)


FLEXIcontent les avantages ?

FLEXIcontent est totalement intégré au com_content de Joomla! Si vous le désintallez vous retrouvez votre site.

Il respecte le système de catégories de Joomla! et y ajoute la possibilité d’avoir un article unique dans plusieurs catégories

Toutes les nouvelles fonctions de Joomla! 3.X sont/seront intégrées de manière transparente (tags, versionning etc)

FLEXIcontent utilise le système multilangue de Joomla! et l’améliore grâce à des fonctions telles que les champs non traduisible.

4 modules sont livrés avec le composant qui vous permettront de tout réaliser : affichage d’article ( carroussel ou autres templates), moteur de recherche avancé, module de filtrage (utilisation des champs), module de nuage de mots clés

Pour des sites de plus 10000 articles FLEXIcontent est 3x plus rapide que Joomla! lui même !

Pas de composant payant ou frais cacher, FLEXIcontent c’est un composant gratuit, avec un support gratuit avec tout ce qu’il vous faut en 1 seul composant

Avec FLEXI je peux faire :

Possibilité de concevoir tout type de site :

  • annuaire
  • agenda
  • ecommerce
  • blog
  • portfolio
  • intranet (avec ACL native j2.5)
  • site de booking (concert, hôtel...)

Tour des fonctions

- Gestion des tags
- Recherche avancée multi facette (auto suggestion, liste déroulante, bouton radio, intervalle de valeurs, champs de saisie)
- Filtres
- Template catégorie et item (possibilité d’overide par le menu)
- Multilingue natif
- Multi catégories
- Type de gabarits illimités
- Workflow 5 états ( brouillon, en attente d’approbation,publié, non publié, archivé )
- Plugins de champs :
- Texte, liste, radio, case à cocher, zone de texte, éditeur html...
- Dates, liens, émail
- Image, fichiers
- Barre d’outils réseaux sociaux
- Relation d’articles
- Gestion des alertes émails
- Gestion des droits avancés
- Gestion des auteurs
- Import des données au format CSV
- Interface d'administration intuitive et rapide
- Flux RSS personalisable avec les champs FLEXIcontent


Return to contents


Objectif du tuto

  • Découverte du CCK FLEXIcontent
  • Configuration d’un type de contenu et ajout de champ (galerie, vidéo, vote, difficultés .. etc)
  • Utilisation des templates de contenus
  • Configuration du Filtrage avancé pour les vues catégories
  • Configuration de la recherche avancée (module et page de recherche)
  • Créer un formulaire de soumission avec validation en front-end

Return to contents


Concept : item

Pour comprendre FLEXIcontent il est important de bien comprendre la relation suivante
Type => c'est un article + des champs user => lors de la saisie on appele cela un item => pour l'afficher on utilise un template d’item
Catégorie => c'est liste d’items =>l'afficher on utilise un template de catégorie

Le concept principal introduit par FLEXIcontent est le «type de contenu».
Le seul type configuré par défaut est l'article, mais on peut ajouter autant de types que l’on souhaite, comme :
une annonce
une fiche portfolio
une recette
un CV
une fiche produit
une fiche vidéo
une fiche de lieu
Un type de contenu est comme une feuille de saisie avec un formulaire de données préformatées. Un type est associé à des champs et la plupart du temps, aussi son propre modèle de template. On peut noter que FLEXIcontent vous permet d'associer un même champ à plusieurs types.
C’est pour cela que nous appelons cela un item et non article (article étant un type de contenu spécifique)

Concept : catégorie

Les catégories permettent d’afficher des listes d’items suivant de multiples options sans aucun code :

  • tous les ordres basiques (ordre alphabétique, date, vote, clics etc...) ou grâce à des champs personnalisés (par auteurs, par tags, par champs select..etc) avec 2 niveaux de tri
  • gérer le système de filtrage avancé, le moteur de recherche interne, etc...
  • gérer le système de notifications avancés (lors des ajouts, des modifications …)
  • Et enfin elles ont leurs propres templates ce qui permet d’en maîtriser l’affichage.

Tous ces réglages fonctionnent de manière très hiérarchique :

  • réglages par défaut dans la configuration global
  • surcharge possible des options dans la configuration des catégorie
  • surcharge possible des options dans la configuration du lien dans le menu

On peut donc très facilement présenter une même catégorie de plein de manière différentes.

Concept : champ

Les champs sont des plugins qui ajoutent des fonctions à FLEXIcontent.
On peut en distinguer 2 types :
-les champs qui ajoutent des possibilités de contenu (date, liste déroulante...)
-les champs système qui permettent de gérer les fonctions de FLEXIcontent (routing, notification etc)

  • Relation
  • Relation inverse
  • Date
  • Email
  • File
  • Image
  • Mini-Galerie
  • Weblink
  • Weblink extended
  • Text
  • Text select
  • Textarea
  • Checkbox
  • Checkbox image
  • Select
  • Select multiple
  • Radio
  • Radio Image
  • Video et audio
  • google maps
  • Link list
  • Load module
  • Toolbar
  • Page navigation
  • Voting
  • Favourites
  • Tags

Toute la puissance de FLEXIcontent ce trouve dans les options disponibles en backend pour chaque champs  (on ne code quasiment jamais):

  • Valeurs multiples (obligatoire, masque de saisie, nombre de valeurs ..)
  • Requette SQL
  • Exécution de tous les plugins de Joomla! (permet de réaliser des champs vidéo, googlemaps etc ..)
  • Fonctions de préfixe et suffixe sur les valeurs (texte, html, balise joomla)
  • Gestion de l’affichage sous forme de liste déroulante, bouton, échelle de valeur .. etc
  • Quasiment tous ces champs sont filtrables dans l’affichage des contenus de FLEXIcontent
  • Concaténation de champ

En partant des champs existant il est assez facile de pouvoir créer ses propres champs comme FLEX HUGE gallery ou encore FLEXImap. Vous avez une base de programmation documenté et fonctionnelle directement dans ce qui est déjà présent, plus un forum des plus réactif.


Return to contents

Installation de FLEXI

FLEXIcontent s’installe comme tout composant par le gestionnaire d’extensions de joomla!

installation du composant
http://www.flexicontent.org/downloads/latest-version.html
installation de la traduction
http://www.flexicontent.org/downloads/download-translation-flexicontent.html

Installation de FLEXI
Après avoir installer ces packages veillez aller dans le composant FLEXIcontent pour finaliser l’installation
composants => FLEXIcontent et effectuer les opérations de post installation.

Puis sauvegarder la configuration générale pour valider le bon comportement de FLEXIcontent
Action d’initialisation de FLEXIcontent

Import des articles dans FLEXIcontent
Lancer la vue de gestion de vos article pour transformer tous vos articles en items (non destructeur)


Return to contents

Configuration générale

Ce panneau permet de gérer toute la configuration de FLEXIcontent

  • les performances
  • l’affichage des items
  • l’affichage des catégories et sous catégories
  • le système de filtrage
  • la fonction vedette et post-it
  • la saisie en font-end
  • le panneau d’administration des items
  • les notifications
  • les ACL
  • Panneau de gestion amélioré
  • boutons d’action
  • tri dynamique des colonnes
  • édition statut dynamique
  • Lien de prévisualisation
  • ordre par drag and drop
  • Moteur de recherche d’articles


Return to contents

Création du type recette

depuis le tableau de bord :

  1. Cliquer sur type
  2. Cliquer sur nouveau
  3. Titre : recette
  4. Partie haut à droite les options du type
  5. Partie bas à droite les options liées au template du type : items-tabbed
  6. Sauver votre type


champs texte pour la durée

  1. Créer votre champ (Etiquette : Durée, Nom :duree)
  2. Type : texte (champ de texte simple)
  3. Valeur multiple : non (permet d’avoir plusieurs valeurs)
  4. Assignation : recette
  5. Après sauvegarde, activer le comportement du champs par rapport à la recherche et au filtrage

  6. La durée : texte

L’accroche : text area

Champ texte area pour l’accroche

  1. Créer votre champ (Etiquette : Accroche, Nom : accroche)
  2. Type : text area (zone de texte avec éditeur html)
  3. Assignation : recette
  4. Afficher l’étiquette : non (n’affiche pas le nom champ a coté de celui-ci)
  5. Exécuter les plugins : oui (permet la compatibilité avec les plugins joomla)
  6. Utiliser html : oui (affiche l’éditeur de texte par defaut, tiny jce etc)
  7. Afficher les boutons éditeur : non (affiche les boutons images articles etc dessous)


Le type de plat : Select


Champ select pour le type de plat

  • Créer votre champ (Etiquette : Type de plat, Nom : typeplat)
  • Type : select (liste déroulante de valeurs prédéfinies)
  • Assignation : recette
  • Afficher étiquette : oui
  • Valeur : entree::Entrée%% plat::Plat principal%% dessert::Dessert%%sauce::Sauce%%verrine::Verrine%% (valeur::etiquette%%...)
  • Obligatoire : oui
  • Vue catégorie : liste déroulante (affichage du filtre dans la vue catégorie)
  • Vue recherche avancée : case à cochée multiple (affichage du filtre dans la vue recherche)


Ingrédients : textSelect

champ textselect pour les ingrédients

  1. Créer votre champ (Etiquette : Ingrédients, Nom : ingredients)
  2. Type : select (liste déroulante de valeurs prédéfinies)
  3. Assignation : recette
  4. Afficher étiquette : oui
  5. Prefix et suffix de valeur : <li> </li>
  6. Prefix et suffixe de champ : <ul> </ul>
  7. Séparateur de valeurs (vues frontend) : texte d’ouverture et fermeture (affichera une liste de valeur)
  8. Après sauvegarde, activer le comportement du champs par rapport à la recherche et au filtrage

Contenu : description

configuration de la description

  1. Éditer le champs description
  2. Activer l’exécution des plugins (au cas où)
  3. Éditer le type recette
  4. Changer l’étiquette description pour Étapes de préparation
  5. Afficher l’étiquette : oui

Avec cette technique on peut même traduire les étiquettes.


Image d’intro et Galerie photo

champ image d’introduction

  1. Créer votre champ (Etiquette : Image intro, Nom : imgintro)
  2. Type : image or galerie
  3. Assignation : recette
  4. Galerie d'images : non
  5. Ajoute une galerie JS : oui
  6. Mise en page de la galerie : multibox
  7. Miniature de la vue item : moyen
  8. Miniature de la vue catégorie : petite
  9. Régler les champs de description : non


Pour la Galerie

Le mode dossier permet de faire des chargement par lot, met ne gère pas les utilisateurs
Permet l’ajout d’image multiple et la gestion du nombre d’upload
Changement du script JS pour un affichage avec slideshow

  1. Mode : dossier
  2. Champ image comme galerie : oui
  3. Nombre maximal : 10
  4. Script galerie : Elasticslide


champ radio : difficulté

champ radio difficulté

  1. Créer un champ (Etiquette : Difficulté, Nom : difficulte)
  2. Type : radio image
  3. Assignation : recette
  4. Valeur : tresfacile::Trés facile::tres_facile.png%% facile::Facile::facile.png%% moyen::Moyen::moyen.png%% difficile::Difficile::difficile.png%% topchef::Top Chef::topchef.png%% (les images seront dans stories/flexicontent/)
  5. Séparateur : espace
  6. Affichage des filtres : bouton radio
  7. Après sauvegarde, activer le comportement du champs par rapport à la recherche et au filtrage


Return to contents

Le vote : champ vote

champ vote

  1. Editer le champ vote pour faire vos réglages
  2. vous pourrez activer le multivote
  3. définir le nombre d’étoiles

changer les images
ect...


Return to contents


Favoris : champ favoris

champ favori

  1. Editer le champ favoris pour gérer l’affichage


Vidéo : champ sharevideo

champ vidéo

  1. Créer un champ (Etiquette : Vidéo, Nom : video)
  2. Type : sharevideo
  3. Assignation : recette
  4. Afficher l’étiquette : non

Attention ce plugin est tout nouveau, il ne permet pas encore de mettre des valeurs multiples.


Partage : champ Toolbar

champ réseau sociaux

  1. Créer un champ (Étiquette : Réseau sociaux, Nom : reseausociaux)
  2. Type : Toolbar
  3. Assignation : recette
  4. Afficher étiquette : non
  5. Écouter le texte : non
  6. Faire les réglage pour la partie support des réseaux de partage


Commentaire : Jcomment

Configuration des commentaires
Pour la partie commentaire FLEXIcontent gère nativement Jcomment (d’autres marches très bien)
http://www.joomlatune.com/jcomments.html

Installer le, puis vous pourrez activer les commentaires :
1 de manière globale dans la configuration de FLEXIcontent
2 dans chaque catégories
3 pour chaque item


Return to contents


Affichage :Template recette

Nous avons affecter à notre type recette le template item-tabbed au début. Si je vais voir un item recette en front sur le site, je ne verrai aucun de mes champs. Nous allons donc éditer celui-ci.

  1. Depuis FLEIXcontent => template
  2. Dans la ligne item-tabbed cliquer sur item
  3. Grâce aux filtres sélectionner le type recette
  4. Par glisser déposer, metter vos champs dans les positions souhaitées
  5. Sauver

Pour la partie catégorie nous allons utiliser le template blog mais en vue catégorie.
Répéter les opérations suivantes

  1. FLEXicontent=>template
  2. Dans la ligne blog cliquer sur categorie
  3. Grâce aux filtres sélectionner le type recette
  4. Par glisser déposer, mettre-enlever vos champs dans les positions souhaitées
  5. Sauver

Dans le cadre d’un projet plus important nécessitant plus de personnalisation, je vous conseille de dupliquer le template le plus approchant et de l’éditer.


Cela vous permettra de n’avoir aucun soucis lors de la mise à jour de votre site.

drag-result.png

Template article

Lors de la migration l’affichage de vos articles standard aura changé car des champs supplémentaires vont apparaître. Pour retrouver un affichage normal il suffit de cacher des champs dans le template defaut.

  1. FLEXIcontent=>template
  2. Editer la vue item du template defaut
  3. Enlever les champs non désirés

Dans le cadre d'un projet plus important nécessitant plus de personnalisation, je vous conseille de dupliquer le template le plus approchant et de l'éditer.
Cela vous permettra de n'avoir aucun soucis lors de la mise à jour de votre site.


Return to contents

La saisie

Maintenant il nous reste à convertir nos articles standard en item de type recette.

  1. FLEXIcontent=>item
  2. Editer le première item et changer son type
  3. Sauver
  4. Maintenant vous pouvez répartir les données dans les champs

Essayer de le faire pour 2-3 autres items.


Return to contents

La vue catégorie et le filtrage

Configuration de l’affichage

  1. Éditer la catégorie Recette
  2. Changer le template pour blog
  3. Faite les réglage pour la gestion des images et de colonnes (1 principale, 2 colonnes, image à charger image intro, …
  4. Dans la partie liste d’item définissez les options (50 items, la pagination, les filtrages standard)

Configuration du filtrage et la recherche
Dans Index Alphabétique, Recherche, Filtres

  1. Bouton recherche : auto
  2. Bouton annuler : caché
  3. Validation automatique : oui (recherche automatique)
  4. 1 enregistrement par ligne : Non, utilisé un séparateur (les filtres sur une même ligne)
  5. Séparateur de résultat : Vide (aucun caractère)
  6. Utiliser la recherche : oui
  7. Afficher les étiqettes : dans le champs
  8. Combinaison de mots : montrer
  9. Suggestion automatique : mots clés
  10. Montrer les filtes : oui
  11. Choisissez les champs dans la liste déroulante (utiliser CTRL)
  12. Afficher l'index alphabétique : Montrer


Return to contents


Les liens type FLEXIcontent

Maintenant nous allons changer le lien de la catégorie recette pour un type FLEXIcontent

  1. Editer le menu recette dans le mainmenu
  2. Changer le type pour FLEXIcontent catégorie
  3. Puis sélectionner la catégorie recette
  4. Sauver

Vous pouvez surcharger toutes les valeurs de la catégorie au niveau même de ce lien.


Return to contents

Mise en place de la recherche

Pour la partie ingrédients nous allons créer un lien vers la recherche avancée de FLEXIcontent

  1. Editer le lien ingrédient et changer le pour FLEXIcontent=>recherche avancée
  2. Configurer l’affichage du moteur de recherche (même type que pour le filtrage de la catégorie)
  3. Activer la recherche avancée (afficher toujours)
  4. Dans la partie filtrage sélectionner le champ ingrédient, type de plat, durée, difficulté
  5. Sauver (noter l’id du lien pour plustard)

Pour gérer les affichages des champs de filtrage, il vous suffira d’éditer votre champs et changer l’affichage pour la vue recherche avancée.

  1. Faite le pour type de plat => radio bouton
  2. Faite le pour ingrédient => checkbox

Maintenant nous allons mettre en place le module de recherche. Dans la gestion des module de joomla :

  1. Cacher le module de recherche classique
  2. Créer un module de recherche avancée FLEXIcontent (Advanced Search Module for FLEXIcontent)
  3. Insérer l’ID du menu de recherche avancée précédemment créer
  4. Le comportement du module sera gérer à travers les options du lien menu.


Return to contents

Mise en place d’un Slideshow

FLEXIcontent possède un module extrêmement puissant : Universal Content Module for FLEXIcontent.

Il permet :

  1. D’afficher n’importe quel champ de FLEXIcontent
  2. Tous les trie classique (ordre, date, user, tags …)
  3. Tous les tries lié au champs FLEXIcontent (n’affiche un item que si un champ à une valeur spécifique, à date +2, les items du mois …)
  4. En fonction de l’item courant
  5. Avec un système de templating interne …
  6. Il est tellement  exhaustif qu’il faudrait un workshop pour lui seulement.
  7. En un module on peut faire tous les modules classique de joomla et bien plus encore…

Là nous allons juste faire un carrousel classique des dernières recettes.        

Depuis le gestionnaire de module de Joomla :

  1. Créer     un module de type Universal Content Module for FLEXIcontent
  2. Template : carroussel
  3. Dans layout carroussel, Playback controls : intégrate
  4. Dans liste des items, Nombre d'items - En vedette : 0 / Standard : 10
  5. Dans le trie : most recent
  6. Dans Advanced Filtering Catégories : inclure recette
  7. Dans paramètre d’affichage des items, Paramètres d'images : image intro (pour Standard)
  8. Mettre la position Banner

On pourrait aller encore plus loin en filtrant en fonction des votes, en fonction de la date, en fonction de certain champs ...


Return to contents

Gestion des utilisateurs et favoris


Depuis le gestionnaire de menu de Joomla vous pouvez créer un lien de soumission de recette
Vous pouvez utilisé les ACL de joomla pour gérer les autorisations ou choisir les options dans le menu

  1. Créer     un lien menu type FLEXIcontent Formulaire de soumission
  2. Alias Metadata tags SEO détails template selection : non
  3. Dans layout carroussel, Playback controls : intégrate
  4. Soumission pour les non autorisés : oui
  5. Catégories affichés : recette
  6. Sousmettre l’item dans : simple
  7. Catégories principale : recette
  8. Sauver

Grâce à  la nouvelle version de FLEXIContent nous pouvons maintenant créer nos propre formulaire … Mais c’est une autre histoire.


Pour le lien de favoris c’est très simple

  1. Créer     un lien menu type FLEXIcontent Favoris
  2. Sauver

Cela permettra aux utilisateurs de gérer leurs listes de recettes

Pour la liste des recettes soumise par un utilisateur

  1. Créer un lien menu du tyep Mes items
  2. Choisir le template defaut
  3. Sauver

L’utilisateur aura sa liste de recette qu’il a proposé avec la possibilité de les éditée


Return to contents


Workflow et notifications

La gestion du workflow et des notifications peut ce gérer au niveau de la configuration générale ET OU au niveau de la catégorie

  1. FLEXIcontent => configuration globale
  2. Flux de travail standard, front-end : brouillon
  3. Activer les notifications  : oui
  4. Ajout du texte d'introduction : oui
  5. Nouveau Contenu : Peu importe l'état => Groupes d'utilisateurs : Votre groupe (super admin)
  6. Nouveau Contenu : En attente de publication => Groupes d'utilisateurs : Votre groupe (super admin)
  7. Mise à jour d'un contenu: PAS BESOIN D'APPROBATION DE LA VERSION => Groupes d'utilisateurs : Votre groupe (super admin)
  8. Sauver

Voilà tout contenu soumis depuis le front sera suivis par un email à un groupe d’utilisateur pour validation. Grâce aux ACL de joomla et les 40 supplémentaires de FLEXIcontent vous pourrez aller encore plus loin.


VOILA c’est fini maintenant vous n’avez plus qu’à expérimenté toujours plus pour obtenir des sites toujours plus puissant, mais simple à a administrer pour vos utilisateurs.

http://www.com3elles.com http://www.flexicontent.org


Return to contents