Dans le cadre de mes attributions professionnelles, je dois gérer un ensemble de données cohérent autour de différents matériels.
Un matériel est en constitué de plusieurs éléments. Parmi ces éléments, peuvent se trouver des notes utilisateurs. On en arrive à notre module que je vous présente aujourd'hui.
Vous avez compris, sur un article Joomla content, je souhaite rajouter des notes. Ces notes sont ni plus ni moins qu'un champ personnalisé Joomla content, au format répétable.
Ce format est défini dans la liste des formats possibles des champs personnalisés. Il vous permet pour un champ donné, de proposer à l'utilisateur l'insertion de plusieurs éléments. En d'autres termes, c'est une relation 1-N d'une base de données. Notons toutefois que dans Joomla, il n'y a pas cette relation directe au niveau de la base de données, puisque c'est dans un gros champ texte que Joomla stock l'ensemble des informations au format Json !
Première étape, création de notre champ personnalisé répétable
La première étape de notre système et de créer un champ personnalisé Joomla, tel que défini dans la copie d'écran ci-dessous, qui est un champ de type répétable.
Dans la notion de répétabilité, nous allons simplement stocker un champ que j'intitule... note, de type "éditeur", dans lequel le format html va être filtré (proessus interne qui vire les balise inutiles ou dangeureses).
Je reviens rapidement sur le type éditeur, ce n'est pas un type de base de données mais bien un type de formulaire que nous devons présenter à l'utilisateur. Dans ce cadre, c'est un format wisiwig, éditeur de type "Word", qui va être présenté à l'utilisateur.
Une fois la description du champ terminé et enregistré, n'oubliez pas d'affecter une catégorie auquel vous souhaitez que ce champ apparaisse, vous aurez la possibilité dans la zone "administrateur" de Joomla, de pouvoir créer autant de fiches de ce type pour un enregistrement donné, pour un article donné si je reprends les termes Joomla
Désormais, notre structure Joomla des données est prête et fonctionnelle, commençons par créer un article de la catégorie dans laquelle nous avons spécifié l'affichage de ce champ.
Création de l'article
Lorsque je crée un nouvel article, j'ai un onglet chant qui apparaît. En fonction de la configuration du champ répétable que vous avez créé, le nom de cet onglet peut changer.
Dans cet onglet, vous avez la possibilité de créer autant de notes que vous le souhaitez puisque le champ est rééptable.
Pour créer une note, il vous suffit de cliquer dans la petite icône verte avec une signe plus. Vous allez avoir un éditeur WISIWYG qui va apparaître, vous pouvez saisir vos premières notes.
Si une deuxième note doit être saisie, vous avez la possibilité de cliquer sur l'un des boutons verts permettant de créer une nouvelle note. Remarquez aussi, que vous avez une croix sur fond bleu qui vous permet d'organiser vos notes dans l'ordre que vous désirez. Je ne reviens pas sur le bouton moins sur fond rouge qui vous permet simplement de supprimer la note correspondant à la ligne que vous avez envisagée.
Le module que j'ai écrit, va rechercher le champ que j'ai intitulé note, que vous devez aussi intitulé note pour que ce module reste fonctionnel sur votre site.
Dans le cas où vous souhaitez changer le nom de ce champ, il vous suffit de changer le nom de la variable dans le fichier helper.php, sur la ligne 33. Attention, selon la mise en page de votre éditeur de code, le numéro de ligne peut varier. C'est dans la ligne élément du dernier foreach du fichier helper.php.
Dans le paquet je fourni en téléchargement, je vous joins un fichier CSS permettant d'appliquer un style post-it sur l'ensemble des notes que nous avons créées. C'est la raison pour laquelle dans le fichier lelper.php (je mets toujours malheureusement mon code HTML dans le helper alors que je sais qu'il faut le mettre ailleurs), j'ai pris que style fourni dans le CSS fourni dans le package.
Si vous suivez régulièrement mes articles, vous serez que je suis absolument nul en infographie. C'est la raison pour et accueil, pour utiliser la notion de post-it, rendons à César ce qui appartient à Jules, je me suis inspiré de post-it déjà créé, trouvé sur le site codepen et écrit par Dillon Brady sous la référence EzRoZQ.
Revenons à l'utilisation
Désormais, il vous suffit de créer autant de champ de type note que vous souhaitez afficher de notes sur votre module, affecter ce module à article sur lequel vous souhaitez voir apparaître vos post-it, puis d'enregistrer le tout. Vos notes apparaissent ainsi lorsque comme vous le désirez point je vous laisse bien entendu ici un exemple.
Enccore une fois, ce module est spécifiquement développé pour Joomla Content. Mon sité étant piloté par K2, je ne peux que vous joindre une copie d'écran du résultat.
mod_notesmateriels.php
<?php
defined('_JEXEC') or die;
require_once dirname(__FILE__).'/helper.php';
$hello = mod_notesmateriels::getnotesmateriels();
require JModuleHelper::getLayoutPath('mod_notesmateriels');mod_notesmateriels.xml
<?xml version="1.0" encoding="utf-8"?>
<extension type="module" version="3.1.0" client="site" method="upgrade">
<name>Notes matériels</name>
<author>sebastien lhuillier</author>
<version>1.0.0</version>
<description>Module liste et affiche sous la forme de postit les notes sur les matériels.</description>
<files>
<filename>mod_notesmateriels.xml</filename>
<filename module = "mod_notesmateriels">mod_notesmateriels.php</filename>
<filename>index.html</filename>
<filename>helper.php</filename>
<filename>tmpl/default.php</filename>
</files>
<config>
</config>
</extension>
style.css
.quote-container {
margin-top: 50px;
position: relative;
float:left;
padding:15px;
}
.postit {
color: #333;
position: relative;
width: 300px;
margin: 0 auto;
padding: 20px;
font-family: Satisfy;
font-size: 30px;
box-shadow: 0 10px 10px 2px rgba(0,0,0,0.3);
border-left: 0;
}
.postit .author {
display: block;
margin: 40px 0 0 0;
text-align: right;
}
.yellow {
background: #eae672;
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
font-size: 120%;
padding-left: -5px;
margin-left: -5px;
}
.pin {
background-color: #aaa;
display: block;
height: 32px;
width: 2px;
position: absolute;
left: 50%;
top: -16px;
z-index: 1;
}
.pin:after {
background-color: #A31;
background-image: radial-gradient(25% 25%, circle, hsla(0,0%,100%,.3), hsla(0,0%,0%,.3));
border-radius: 50%;
box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.1), inset 3px 3px 3px hsla(0,0%,100%,.2), inset -3px -3px 3px hsla(0,0%,0%,.2), 23px 20px 3px hsla(0,0%,0%,.15);
content: '';
height: 12px;
left: -5px;
position: absolute;
top: -10px;
width: 12px;
}
.pin:before {
background-color: hsla(0,0%,0%,0.1);
box-shadow: 0 0 .25em hsla(0,0%,0%,.1);
content: '';
height: 24px;
width: 2px;
left: 0;
position: absolute;
top: 8px;
transform: rotate(57.5deg);
-moz-transform: rotate(57.5deg);
-webkit-transform: rotate(57.5deg);
-o-transform: rotate(57.5deg);
-ms-transform: rotate(57.5deg);
transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-webkit-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
}
.fond{
border:2px solid red;
}