Bonjour tout le monde, je suis Bernard Sfez, spécialiste Tiki, et dans ce tutoriel vidéo, nous allons voir ensemble comment "bootstrapper" Tiki en utilisant la syntaxe wiki ou les templates Smarty. J'ai reçu beaucoup de bons retours sur le design et les écrans de démo du Tiki que j'utilise dans mes tutoriels, je vais donc partager avec vous comment cela a été réalisé.

Mais avant cela, parlons du futur !
Depuis quelques semaines, la communauté Tiki a commencé à travailler sur Tiki 21, notre prochaine version LTS. Elle inclura de nombreuses fonctionnalités, notamment une refonte complète de l'intégration du système de messagerie via Cypht, une refonte de la galerie de fichiers et bien d'autres améliorations comme l'authentification à deux facteurs, l'intégration de VueJS et plus encore. Vous pouvez suivre les progrès sur https://dev.tiki.org/Tiki21|dev.tiki.org/tiki21] et https://doc.tiki.org/Tiki21|doc.tiki.org/tiki21]. Les liens seront dans la description de ce tutoriel Tiki Express. Cela arrive vite : le processus de sortie de Tiki 21 débutera fin janvier 2020.

En parlant de commit et de code, un grand merci à Fabio pour avoir veillé sur notre intégration Git. Je pense que je publierai bientôt un tutoriel sur le paramétrage et la gestion de Tiki à l'aide d'un IDE. Pour ceux qui n'ont pas encore sauté le pas, je suggère de commencer par le tutoriel que nous avons fait ensemble et de lire la documentation sur https://dev.tiki.org/Using-Git-with-Tiki|dev.tiki.org/Using-Git-with-Tiki] ; encore une fois, le lien sera dans la description.

Revenons à ce tutoriel. Grâce à nos développeurs spécialisés en design et CSS, et particulièrement Gary "arigato" 😉 , nous avons intégré https://getBootstrap.com|Bootstrap] dans Tiki depuis la version 19, ainsi que la nouvelle version de https://fontawesome.com|Fontawesome]. Avec ces deux outils, vous pouvez créer rapidement des designs impressionnants. Il existe plusieurs façons de procéder. Celles que je vais vous montrer sont celles que j'utilise le plus ; d'autres "tikiens" peuvent préférer construire leurs pages via le plugin HTML, le plugin Layout, du code entièrement personnalisé ou d'autres options dont je n'ai même pas idée. Si vous utilisez une méthode différente, n'hésitez pas à apporter votre pierre à l'édifice dans les commentaires.

Autre note : il s'agit d'un tutoriel de 10 minutes, je passerai donc sur les explications détaillées concernant Bootstrap, le CSS et Fontawesome. Je m'en tiendrai à du code simple pour vous montrer le fonctionnement, sans optimiser les classes Bootstrap pour tous les types d'appareils. Vous trouverez de la documentation à ce sujet dans la description.

Quand je "bootstrap" un Tiki, je commence généralement par esquisser et planifier les choses sur une feuille de papier afin de diviser le travail par zones. C'est une base qui change souvent, mais cela m'aide. Je crée généralement un nouveau thème par Tiki pour stocker mon propre CSS, mes icônes, favicons, templates, etc. J'utilise aussi les réglages du panneau de contrôle "Look and Feel", les modules, et le reste se passe dans les pages wiki et les templates Smarty stockés dans mon thème.
Voyons tout cela dès maintenant...

Les bases : thème, modules CSS, panneau Look and Feel

Tiki utilise des thèmes pour regrouper les éléments de design qui créent l'affichage des pages et du contenu. Tiki est livré par défaut avec plusieurs thèmes, et chaque dossier de thème contient des sous-dossiers pour organiser les différents éléments. Ici, on voit un nouveau thème créé pour cette démo avec un dossier SCSS, un dossier CSS, des images et un dossier "templates" dont nous parlerons plus tard. Au fur et à mesure de votre personnalisation, ces fichiers seront édités constamment.
Quand je commence, je configure d'abord le panneau "Look and Feel" : je règle la mise en page pour utiliser un menu Bootstrap, une icône de marque, je retire la largeur fixe, etc. Depuis ce panneau, vous pouvez aussi utiliser l'onglet de personnalisation pour ajouter du CSS ou du JavaScript sans accéder aux fichiers du serveur. Ensuite, installons les modules, comme un menu supérieur. Je reste sur un design Bootstrap épuré avec l'icône du site et un menu à un seul niveau (ID 43 dans ce cas). Je déplace le menu admin (ID 42) en bas. Notez qu'il vaut mieux régler le bouton "navbar toggle" sur "non", sinon vous aurez deux boutons de bascule l'un dans l'autre avec Bootstrap.

Avance rapide. Voici, après un court travail, à quoi ressemble notre Tiki.

Revue des différentes méthodes pour bootstrapper Tiki.

J'utilise principalement trois méthodes, que je mélange parfois selon les cas :

  1. La syntaxe wiki s'appuyant sur des plugins (divs, boutons, icônes).
  2. Une page wiki utilisée comme template.
  3. Un template Smarty intégré dans une page wiki.
    À vous de choisir selon vos compétences. Avec les simples permissions d'édition, vous pouvez commencer immédiatement.

Utilisation de la syntaxe et des plugins wiki.

La syntaxe wiki est très puissante (voir mon tutoriel dédié). Combinée à quelques plugins, on peut construire des pages très correctes. Contrairement à d'autres applications, les plugins Tiki sont intégrés, supportés par la communauté et mis à jour avec le logiciel. J'utilise surtout le plugin DIV pour définir des classes et des IDs. Il faut bien sûr se référer à la doc Bootstrap pour créer une grille (grid). Je vais faire quelques copier-coller pour montrer comment créer une grille Bootstrap.

Exemple : créer une page 404 personnalisée.

Je définis des divs pour les lignes (rows) et colonnes (cols). J'ajoute des styles de texte... si vous connaissez Bootstrap, vous avez compris le principe. J'ajoute une image des galeries Tiki.
On sauvegarde... Tada !

Les Plus : C'est rapide, ajustable facilement en éditant la page, et on garde l'historique des modifications.
Les Moins : Il faut le faire pour chaque page. Sur des pages complexes, la relecture du code est difficile (risque d'oublier de fermer une div ou un guillemet). De plus, c'est gourmand en CPU. Tiki limite le nombre de passages sur les plugins d'une page (environ 30 à 50). Si vous atteignez cette limite, le code s'affichera en brut. On peut augmenter cette limite dans l'admin, mais il vaut mieux passer à une autre méthode pour ne pas surcharger le serveur.

Utiliser une page wiki comme template.

On monte d'un niveau. Vous pouvez stocker du code HTML dans une page wiki (template) et l'appeler via un plugin. Une astuce consiste à utiliser une "Plugin List" vide pour appeler ce template et designer entièrement la page. C'est idéal pour les sites avec de multiples sections.

Intégration via PluginList

Je crée une liste sans filtre programmable, juste le nom de la page template "mytemplate_tpl". Je peux ainsi coder ma page à l'extérieur dans un éditeur, ou utiliser l'éditeur "Codemirror" intégré à Tiki (à activer dans les préférences d'édition).
On sauvegarde... Re-tada !
Les Plus : Tout reste éditable rapidement de n'importe où sans accès FTP/SSH. On peut donner l'accès au design à un client ou super-utilisateur.
Le gros Moins : Le code est accessible à des utilisateurs qui pourraient le casser par erreur. Il est aussi plus difficile de manipuler des variables complexes qu'avec Smarty.

Utiliser un template Smarty.

Le niveau supérieur. Cette option est pour les développeurs et nécessite un accès au serveur. On utilise des fichiers .tpl dans le dossier du thème. C'est beaucoup plus puissant : on peut ajouter des conditions, manipuler des variables et faire des calculs à partir de données de trackers.
Par exemple, j'ai créé un script qui filtre les données d'un tracker et calcule un montant total. Notez que pour intégrer un plugin wiki dans Smarty, il faut les balises {wikiplugin} et {literal}. Ici, j'utilise un foreach pour lister les éléments dans un tableau HTML (tr), avec une condition pour afficher une icône verte si le statut est "Completed".
On rafraîchit la page... Tada !

Intégration dans une page wiki.

J'ai mon tableau Bootstrap, mes conditions et mes calculs. L'intégration nécessite de connaître les prérequis Smarty.
Les Plus : On peut manipuler les données et les conditions presque sans limite.
Consultez doc.tiki.org/Smarty-templates pour plus d'infos. Attention toutefois aux permissions et veillez à ce que votre "Unified Index" soit toujours à jour.

Montrez-nous vos talents et votre Tiki !
Si ces informations vous aident, partagez un lien en commentaire. Une petite précision : Tiki n'est pas mon produit, c'est mon métier. Je suis membre de la communauté et mon temps libre pour ces tutoriels est limité. Ils ne sont pas monétisés et sont libres de droits (licence CC). Si vous voulez que le travail aille plus vite ou que je le fasse pour vous, vous pouvez m'engager pour soutenir votre projet.
J'espère que l'équipe de Sir John Roberts et Avishai ont eu leurs réponses !

Mon prochain tutoriel portera sur le plugin CustomSearch, alors abonnez-vous pour ne pas le manquer.
Merci d'avoir regardé ce Tiki Express, et que la puissance de Bootstrap et de Tiki soit avec vous !

Liens intéressants

https://dev.tiki.org/Tiki21
https://doc.tiki.org/Tiki21
https://dev.tiki.org/Using-Git-with-Tiki
https://getBootstrap.com
https://fontawesome.com
https://hackerthemes.com/Bootstrap-cheatsheet
https://www.w3schools.com/Bootstrap/Bootstrap_ref_all_classes.asp
https://doc.tiki.org/PluginCustomSearch
https://www.Smarty.net
https://tiki.org/Smarty
https://doc.tiki.org/Smarty-Templates
https://themes.tiki.org/Template-Tricks
https://dev.tiki.org/Dev-Mailing-List
https://tiki.org/forums