Laden Sie NeoFrag herunter
Anmelden

[Tuto] - Création d'un widget !

186 Ansichten
[Tuto] - Création d'un widget !
Zaekof

38 Fach, 883 Antworten

Mitwirkende Geber
Ungelesene Nachricht
Bonjour à tous,

Aujourd'hui je vais essayer de vous expliquer comment créer un widget simplement !
Avant de commencer il faut savoir que je ne suis pas un expert dans la matière j’apprends comme vous ^^.
Pour commencer je vous prit si vous voulez bien de télécharger "sublime text 3" c'est un editeur de texte gratuit & créé pour se que l'on va faire ensemble !

Pour notre premier widget je vais vous montrer comment m’être en place un widget qui va afficher vos groupes de votre site, exemple : "admin - modo - membre - nouveau" etc.. .

voici le rendu final :

Bon je vais pas faire une interface admin car dans le cas du widget elle ne servirai a rien en faite vue que tout le code reste dans les fichiers !.


Pour commencer il vous faut créer un dossier "groupes" puis dans le dossier le fichier suivent :
-groupes.php

Puis les dossiers suivent dans le même répertoire :
-views
-controllers
-css

Dans le dossier views les fichiers suivent :
-index.tpl.php
-admin.tpl.php

Dans le dossier controllers :
-index.php
-admin.php

Dans css :
-groupes.css

Ensuite l'importation dans votre base de données du fichiers groupes.sql qui comporte ceci :
INSERT INTO `nf_settings_addons` (`name`, `type`, `enable`) VALUES ('groupes', 'widget', '1');

Une fois cela fait, une explication !
donc le dossier views encadre les fichiers de code html/php avec la gestion de l’interface donc un fichier pour l’interface admin puis l'autre pour le site.
le dossier controllers regroupe les fichiers comme le nom l'indique de "contrôle" c'est a dire la gestion de votre code avec les fonctions en php etc.. .
Le fichier groupes.php renseigne les informations du widget pour votre "base de donnes" ainsi que pour le titre dans la liste des widget etc.. .


On peut commencer le codage !

voici le fichier brute groupes.php

<?php if (!defined('NEOFRAG_CMS')) exit;
/**************************************************************************
Copyright © 2015 Michaël BILCOT & Jérémy VALENTIN

This file is part of NeoFrag.

NeoFrag is free software: you can redistribute it and/or modify
it under the terms of the GNU Lesser General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

NeoFrag 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 Lesser General Public License for more details.

You should have received a copy of the GNU Lesser General Public License
along with NeoFrag. If not, see <http://www.gnu.org/licenses/>.
**************************************************************************/

class w_groupes extends Widget
{
public $title = 'groupes';
public $description = 'Affichage de vos groupes';
public $link = 'votre site web';
public $author = 'le nom de l auteur';
public $licence = 'http://www.neofrag.com/license.html LGPLv3';
public $version = 'Alpha 0.1';
public $nf_version = 'Alpha 0.1.3';
public $path = __FILE__;
}

/*
NeoFrag Alpha 0.1.3
./widgets/groupes/groupes.php
*/


Donc on va en parler un peut,
en haut du fichier la phrase suivent "Vérifie l'existence d'une constante" donc si la constante n'existe pas une erreur va apparaître.
<?php if (!defined('NEOFRAG_CMS')) exit;
je précise que cette phrase n'est a modifier !

Ensuite le texte encadrer en haut & en bas par :
**************************************************************************/
spécifie en gros le Copyright pour © 2015 Michaël BILCOT & Jérémy VALENTIN

ensuite la fonction :
class w_groupes extends Widget {..}
Spécifie que c'est la class "w-groupes", c'est le même nom que dans votre base de données !

Ensuite dans cette fonctions vous avez les fonctions public qui spécifie grâce au CMS NeoFrag des informations, exemple :
public $title = 'groupes';
Donc la pour la fonction $title qui veut dire titre on écrie le titre de son widget tout simplement entre les "" ou ''.

Pour finir avec se fichier en bas :
/*
NeoFrag Alpha 0.1.3
./widgets/groupes/groupes.php
*/
Précise a son tour la version de Neofrag lors de la création du widget ainsi que le chemin du fichier/dossier

Voilà pour le premier fichier !
On poursuit sans faire de pause ! le café c'est après !!

On va faire dans l'ordre la partit visuel donc dans le dossier views qui veut dire vue en français, pour se faire ouvrez le fichier admin.tpl.php :

<div role="tabpanel">
<div class="tab-content">
<div class="text-center">
<p>Bonjour, vous pouvez appuyer sur <strong>Valider</strong> !</p>
</div>
</div>
</div>

Donc dans se fichier comme nous avons aucune gestion admin via inteface neofrag on veut juste dire que si le widget a bien était installé on peux cliquer sur le bouton "valider" pour continuer, je vous explique pas comment fonctionne le html car sa me prendrez bien trop de temps ^^.

Ensuite le fichier index.tpl.php :

<tr>
<td class="col-md-3 text-center">
<div class="text-center">


<?php $groups = $NeoFrag->groups(); if (!empty($groups)): ?>
<ul class="groups">
<?php foreach ($groups as $group_id => $group): ?>
<?php if (is_null($group['users'])) continue; ?>
<li class="col-md-4">
<label>
<?php echo $NeoFrag->groups->display($group_id, TRUE, FALSE); ?>
</label>
</li>
<?php endforeach; ?>
</ul>

<?php endif; ?>


</div>
</td>
</tr>

Donc ici c'est la code qui va former le visuel du widget !
pour le coté php :

<?php $groups = $NeoFrag->groups(); if (!empty($groups)): ?>
<ul class="groups">
<?php foreach ($groups as $group_id => $group): ?>
<?php if (is_null($group['users'])) continue; ?>
<li class="col-md-4">
<label>
<?php echo $NeoFrag->groups->display($group_id, TRUE, FALSE); ?>
</label>
</li>
<?php endforeach; ?>
</ul>

Pour décrire juste la première ligne en php :
On informe que cette variable $groups et égale a celle-ci : " $NeoFrag" puis dans la fonction NeoFrag on regarde si le tableau "groups" a des "données" si elle en a "if (!empty" on les affiches par la suite !.
Pour info :
if(empty($groups)) == Si $groups est vide.
if(!empty($groups)) == Si $groups n'est pas vide.


Ensuite on passe au dossier controllers avec le fichier index.php :

<?php if (!defined('NEOFRAG_CMS')) exit;
/**************************************************************************
Copyright © 2015 Michaël BILCOT & Jérémy VALENTIN

This file is part of NeoFrag.

NeoFrag is free software: you can redistribute it and/or modify
it under the terms of the GNU Lesser General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

NeoFrag 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 Lesser General Public License for more details.

You should have received a copy of the GNU Lesser General Public License
along with NeoFrag. If not, see <http://www.gnu.org/licenses/>.
**************************************************************************/

class w_groupes_c_index extends Controller_Widget
{
public function index($settings = array())
{
$this->css('groupes');
$content = $this->load->view('index');

return new Panel(array(
'title' => 'Nos Groupes',
'content' => $content
));
}
}

/*
NeoFrag Alpha 0.1.3
./widgets/groupes/controllers/index.php
*/

Ici c'est l'index, on spécifie la variable $content ainsi que le fichier style qui se trouve dans votre dossier css grâce a $this->css('groupes');
Plus bas dans le return new Panel on affiche le titre si de base vous en spécifié pas qu'en vous validez votre widget sur le live-editor puis que le content = la varaible $content.

Ensuite le fichier admin.php :

<?php if (!defined('NEOFRAG_CMS')) exit;

/**************************************************************************

Copyright © 2015 Michaël BILCOT & Jérémy VALENTIN
This file is part of NeoFrag.
NeoFrag is free software: you can redistribute it and/or modify
it under the terms of the GNU Lesser General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
NeoFrag 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 Lesser General Public License for more details.
You should have received a copy of the GNU Lesser General Public License
along with NeoFrag. If not, see <http://www.gnu.org/licenses/>.

**************************************************************************/

class w_groupes_c_admin extends Controller_Widget

{

public function index($settings = array())
{
return $this->load->view('admin', $settings);
}


}

/*
NeoFrag Alpha 0.1.3
./widgets/groupes/controllers/admin.php
*/

Se fichier permet de voir votre contenu de votre fichier admin dans le views dans le live-editor.

Pour finir le fichiers pour votre style en .css dans le dossier css :

ul.groups {
list-style: none;
padding: 0;
}

ul.groups li {
vertical-align: middle;
}

li.col-md-4 {
display: block;
width: 100%;
}

Voilà les amis c'est fini !
Les choses à savoir avant de commenter trop vite, je souffre de dyslexie et c'est pour cela que dans tout mes tutos il-y-a des fautes d’orthographes..
"N'arrêtez jamais d'apprendre" !
Rückkehr
5 Teilnehmer
7 Antworten
snoobel

2 Fach, 2 Antworten
Ungelesene Nachricht
merci mille fois l'ami !!! merci de la rapidite et du contenu .
eResnova

17 Fach, 875 Antworten

Mitwirkende
Ungelesene Nachricht
Bien joué @Zaekof ! :)
Merci d'avoir pris le temps de rédiger tout ce tutoriel.

Il y a juste 2-3 choses à optimiser :)
/eResnova Mode professeur : [ON]

Petite optimisation :
Sur ta vue index.tpl.php, la condition if (!empty($groups)): n'est pas indispensable car il y aura toujours le groupe "Administrateurs" et "Membres". Donc tu l'aura compris, inutile de vérifier si $groups est vide. Ce sera toujours faux.

Petite erreur :
Autre point, peut-être voulu pour montrer un exemple mais ton contrôleur admin est inutile dans ton cas de widget.
Tu peux ne pas le mettre et garder uniquement un contrôleur index.
La vue admin.tpl.php serait également à supprimer dans ce cas.
Côté LiveEditor, ton widget sera tout de même bien reconnu ;)

Dernier petit point :
Je l'ai remarqué dans plusieurs widgets, surement dû à un copier / coller entre vous, mais rien de bien méchant.
Dans le contrôleur index.php, vous mettez :

public function index($settings = array())
{
$this->css('groupes');
$content = $this->load->view('index');

return new Panel(array(
'title' => 'Nos Groupes',
'content' => $content
));
}

Pourquoi vous embêter à déclarer une variable $content !? :D
Vous pouvez directement déclarer votre vue dans le panel (ça fait gagner 1 ligne de code lol...) :

public function index($settings = array())
{
$this->css('groupes');

return new Panel(array(
'title' => 'Nos Groupes',
'content' => $this->load->view('index')
));
}

Petite remarque :
Dans le contrôleur admin.php :

public function index($settings = array())
{
return $this->load->view('admin', $settings);
}

Avec ce code, tu retourne bien la vue admin.tpl.php. Par contre, elle ne contient que du texte html (aucune variable PHP) donc inutile de lui ajouter les données $settings

Tu peux juste mettre : return $this->load->view('admin');


A part ça, pas grand chose à dire :)

Ps: pour ton commentaire de fin : "dont worry", je m'en occupe :)
Zaekof

38 Fach, 883 Antworten

Mitwirkende Geber
Ungelesene Nachricht
aha merci @eResnova sa me fait apprendre de mes erreurs aussi c'est cool ^^
Pour la variable "$content" je me suis inspiré d'autres widget c'est pour ça que je les mis ^^ et merci pour l'optimisation .

@snoobel pas de soucie sa me fait plaisir ^^
"N'arrêtez jamais d'apprendre" !
Candac

10 Fach, 96 Antworten
Ungelesene Nachricht
C'est un tuto qui m'aide bien pour comprendre le fonctionnement ! merci ! superbe initiative !
Zaekof

38 Fach, 883 Antworten

Mitwirkende Geber
Ungelesene Nachricht
Pas de soucie, une mis à jour va être faite quand j'aurais fini la mise en page :)
"N'arrêtez jamais d'apprendre" !
lk77

0 Fach , 1 Antwort

Ungelesene Nachricht
Salut,
attention à ne pas confondre fonctions, classes et attributs.
Zaekof

38 Fach, 883 Antworten

Mitwirkende Geber
Ungelesene Nachricht
Oui, désolé je vais corriger mes erreurs, merci de m'en avoir informé !
"N'arrêtez jamais d'apprendre" !
Rückkehr