[Tuto] Comment faire son 1er Widget ! @NeoFrag

94 visualizzazioni [Tuto] Comment faire son 1er Widget !
majiid 31 soggetti, 281 risposte Hanno contribuito donatori	Da08/09/2015a01:03 Messaggio non letto Bonjour, Je vais essayer de vous expliquer le plus simplement possible comment créer votre 1er widget, nous allons le réaliser en suivant plusieurs étapes: Le 1er cours sera uniquement sur un widget. Le 2ème cours vous expliquera comment mettre en place des paramètres de configuration Le 3ème cours aura pour but de vous expliquer comment avoir plusieurs version de votre widget Nous commençons, avant tous il faut quelques explications & recommandations : Recommandations : Savoir utiliser Filezilla ou autre client FTP Avoir des notions en HTML/PHP Avoir un éditeur de texte meilleur que bloc-Notes (conseil: Notepad++ ou sublimeText ou phpstorm) Explication: Un widget se place toujours dans : le dossier "Widget" qui ce trouve à la racine de votre FTP. Voici le lien de l'archive avec laquelle nous allons travailler ! un widget vierge Explication du contenu du dossier : controllers -> le dossier qui va contenir la grande partie de notre code PHP (backend, qui va s'occuper de tout ce que le visiteur ne voit pas) views -> comme son non l'indique c'est ici que ce trouvera les fichiers qui vont définir le rendu du widget monwidget.php -> fichier qui va définir plusieurs informations sur votre widget (nom, description, créateur, version, etc...) Le but de notre 1er widget va être de récupérer & d'afficher l'adresse IP/PAYS/FAI de notre visiteurs. Pour cela nous allons utiliser http://ip-api.com/ qui fourni pas mal d'informations via une API simple en JSON. 1er étape: "Le code php de notre widget qui ce trouve dans le fichier index.php à l'adresse: monwidget/controllers/index.php" De base notre code est comme cela: `class w_monwidget_c_index extends Controller_Widget { public function index($settings = array()) { } }` Nous allons coder à l’intérieur de la fonction index ceci : class w_monwidget_c_index extends Controller_Widget { public function index($settings = array()) { // On recupere l'adresse du visiteur & la stock dans la variable $ipvisiteur $ipvisiteur = $_SERVER["REMOTE_ADDR"]; // On Genere l'url que nous allons apellé. $url = "http://ip-api.com/json/".$ipvisiteur; // On recupere les information sur l'adresse ip au format Json depuis l'url & la stock dans la variable requette $requete = @file_get_contents($url); // Cette commande permet de transformé une chaîne encodée JSON en une variable PHP. $info = json_decode($requete); } } A ce stade là, nous avons fait le gros de notre traitement PHP, toutes nos informations IP/PAYS/FAI sont stockées dans la variable $info, nous allons maintenant tout envoyer au fichier Template qui se charge du rendu (affichage) du widget. class w_monwidget_c_index extends Controller_Widget { public function index($settings = array()) { // On recupere l'adresse du visiteur & la stock dans la variable $ipvisiteur $ipvisiteur = $_SERVER["REMOTE_ADDR"]; // On Genere l'url que nous allons apellé. $url = "http://ip-api.com/json/".$ipvisiteur; // On recupere les information sur l'adresse ip au format Json depuis l'url & la stock dans la variable requette $requete = @file_get_contents($url); // Cette commande permet de transformé une chaîne encodée JSON en une variable PHP. $info = json_decode($requete); // Ici on dit a notre widget de charger le rendu du fichier index.tpl.php & lui envoi variables ci-dessous $contenu = $this->load->view('index', array( 'variable_ip' => $info->query, 'variable_pays' => $info->country, 'variable_fai' => $info->isp )); // Ici on va definir les parametres de notre widget (icon/nom/footer etc...) & l'afficher return new Panel(array( 'title' => 'Mon 1er widget', // mon titre 'icon' => 'fa-bars', // icon choisi sur Font Awesome (http://fontawesome.io/icon/) 'content' => $contenu // le contenue a chargé )); } } Maintenant nous allons nous charger du code HTML (dans le fichier qui ce trouve dans views/index.tpl.php) cette partie est plutôt libre chacun fait le rendu qui lui semble le plus jolie ! mais je vous ai expliqué comment cela ce passe pour afficher votre contenu qui provient de votre code PHP. Personnellement j'ai opté pour un affichage simple en liste avec le code suivant : `<ul class="list-group"> <li class="list-group-item"><i class="fa fa-align-justify"></i> <b>ADRESSE IP: </b> </li> <li class="list-group-item"><i class="fa fa-align-justify"></i> <b>PAYS: </b> </li> <li class="list-group-item"><i class="fa fa-align-justify"></i> <b>FAI: </b> </li> </ul>` Pour afficher notre résultat après la balise Bold (gras <b></b>) nous allons appeler nos variables précédemment définies dans le controller index.php. `<ul class="list-group"> <li class="list-group-item"><i class="fa fa-align-justify"></i> <b>ADRESSE IP:</b> <?php echo $data['variable_ip']; ?></li> <li class="list-group-item"><i class="fa fa-align-justify"></i> <b>PAYS:</b> <?php echo $data['variable_pays']; ?></li> <li class="list-group-item"><i class="fa fa-align-justify"></i> <b>FAI:</b> <?php echo $data['variable_fai']; ?></li> </ul>` Voila ! Nous avons fini le 1er cours, il ne vous reste plus qu'à le mettre sur votre FTP et de l'installer simplement en ajoutant le module dans la base de données en exécutant cette requête SQL : INSERT INTO `nf_settings_addons` (`name`, `type`, `enable`) VALUES ('monwidget', 'widget', '1'); Voici le résultat final: Voici le lien de Téléchargement du widget fini ! pour mieux comprendre ! J’espère que ce petit sujet vous aura permis de comprendre un peut mieux & si cela vous a plus j'en ferai d'autres ! N'hésitez pas SVP à me laisser en commentaire vos remarques/suggestions/avis. Edité le 09/09/2015 par @eResnova

94 visualizzazioni

[Tuto] Comment faire son 1er Widget !

majiid

31 soggetti, 281 risposte

Hanno contribuito donatori

Da08/09/2015a01:03 Messaggio non letto

Bonjour,

Je vais essayer de vous expliquer le plus simplement possible comment créer votre 1er widget, nous allons le réaliser en suivant plusieurs étapes:

Le 1er cours sera uniquement sur un widget.
Le 2ème cours vous expliquera comment mettre en place des paramètres de configuration
Le 3ème cours aura pour but de vous expliquer comment avoir plusieurs version de votre widget

Nous commençons, avant tous il faut quelques explications & recommandations :

Recommandations :

Savoir utiliser Filezilla ou autre client FTP
Avoir des notions en HTML/PHP
Avoir un éditeur de texte meilleur que bloc-Notes (conseil: Notepad++ ou sublimeText ou phpstorm)

Explication:

Un widget se place toujours dans : le dossier "Widget" qui ce trouve à la racine de votre FTP.

Voici le lien de l'archive avec laquelle nous allons travailler ! un widget vierge

Explication du contenu du dossier :
controllers -> le dossier qui va contenir la grande partie de notre code PHP (backend, qui va s'occuper de tout ce que le visiteur ne voit pas)
views -> comme son non l'indique c'est ici que ce trouvera les fichiers qui vont définir le rendu du widget
monwidget.php -> fichier qui va définir plusieurs informations sur votre widget (nom, description, créateur, version, etc...)

Le but de notre 1er widget va être de récupérer & d'afficher l'adresse IP/PAYS/FAI de notre visiteurs. Pour cela nous allons utiliser http://ip-api.com/ qui fourni pas mal d'informations via une API simple en JSON.

1er étape: "Le code php de notre widget qui ce trouve dans le fichier index.php à l'adresse: monwidget/controllers/index.php"

De base notre code est comme cela:

class w_monwidget_c_index extends Controller_Widget

{

 public function index($settings = array())

 {



 }

}

Nous allons coder à l’intérieur de la fonction index ceci :

class w_monwidget_c_index extends Controller_Widget

{

 public function index($settings = array())

 {

 // On recupere l'adresse du visiteur & la stock dans la variable $ipvisiteur

 $ipvisiteur = $_SERVER["REMOTE_ADDR"];



  // On Genere l'url que nous allons apellé.

  $url = "http://ip-api.com/json/".$ipvisiteur;



 // On recupere les information sur l'adresse ip au format Json depuis l'url & la stock dans la variable requette

 $requete = @file_get_contents($url);



  // Cette commande permet de transformé une chaîne encodée JSON en une variable PHP.

 $info = json_decode($requete);

 }

}

A ce stade là, nous avons fait le gros de notre traitement PHP, toutes nos informations IP/PAYS/FAI sont stockées dans la variable $info, nous allons maintenant tout envoyer au fichier Template qui se charge du rendu (affichage) du widget.

class w_monwidget_c_index extends Controller_Widget

{

 public function index($settings = array())

 {

  // On recupere l'adresse du visiteur & la stock dans la variable $ipvisiteur

  $ipvisiteur = $_SERVER["REMOTE_ADDR"];



 // On Genere l'url que nous allons apellé.

  $url = "http://ip-api.com/json/".$ipvisiteur;



 // On recupere les information sur l'adresse ip au format Json depuis l'url & la stock dans la variable requette

 $requete = @file_get_contents($url);



  // Cette commande permet de transformé une chaîne encodée JSON en une variable PHP.

 $info = json_decode($requete);



 // Ici on dit a notre widget de charger le rendu du fichier index.tpl.php & lui envoi variables ci-dessous 

 $contenu = $this->load->view('index', array(

   'variable_ip' => $info->query,

  'variable_pays' => $info->country,

  'variable_fai' => $info->isp

  ));



  // Ici on va definir les parametres de notre widget (icon/nom/footer etc...) & l'afficher 

  return new Panel(array(

  'title' => 'Mon 1er widget', // mon titre

 'icon' => 'fa-bars', // icon choisi sur Font Awesome (http://fontawesome.io/icon/)

 'content' => $contenu // le contenue a chargé

  ));

 }

}

Maintenant nous allons nous charger du code HTML (dans le fichier qui ce trouve dans views/index.tpl.php) cette partie est plutôt libre chacun fait le rendu qui lui semble le plus jolie ! mais je vous ai expliqué comment cela ce passe pour afficher votre contenu qui provient de votre code PHP. Personnellement j'ai opté pour un affichage simple en liste avec le code suivant :



<ul class="list-group">

 <li class="list-group-item"><i class="fa fa-align-justify"></i> <b>ADRESSE IP: </b> </li>

 <li class="list-group-item"><i class="fa fa-align-justify"></i> <b>PAYS: </b> </li>

 <li class="list-group-item"><i class="fa fa-align-justify"></i> <b>FAI: </b> </li>

</ul>

Pour afficher notre résultat après la balise Bold (gras <b></b>) nous allons appeler nos variables précédemment définies dans le controller index.php.

<ul class="list-group">

 <li class="list-group-item"><i class="fa fa-align-justify"></i> <b>ADRESSE IP:</b> <?php echo $data['variable_ip']; ?></li>

 <li class="list-group-item"><i class="fa fa-align-justify"></i> <b>PAYS:</b> <?php echo $data['variable_pays']; ?></li>

 <li class="list-group-item"><i class="fa fa-align-justify"></i> <b>FAI:</b> <?php echo $data['variable_fai']; ?></li>

</ul>

Voila ! Nous avons fini le 1er cours, il ne vous reste plus qu'à le mettre sur votre FTP et de l'installer simplement en ajoutant le module dans la base de données en exécutant cette requête SQL :

INSERT INTO `nf_settings_addons` (`name`, `type`, `enable`) VALUES ('monwidget', 'widget', '1');

Voici le résultat final:

Voici le lien de Téléchargement du widget fini ! pour mieux comprendre !

J’espère que ce petit sujet vous aura permis de comprendre un peut mieux & si cela vous a plus j'en ferai d'autres ! N'hésitez pas SVP à me laisser en commentaire vos remarques/suggestions/avis.

Edité le 09/09/2015 par @eResnova

ritorno

8 partecipanti 11 risposte
majiid 31 soggetti, 281 risposte Hanno contribuito donatori	Da08/09/2015a01:04 Messaggio non letto Reversé pour la parti 2
majiid 31 soggetti, 281 risposte Hanno contribuito donatori	Da08/09/2015a01:04 Messaggio non letto Reversé pour la parti 3
Yira 4 soggetti, 50 risposte donatori	Da08/09/2015a03:57 Messaggio non letto Merci pour ce tuto ! :D
candelier 1 soggetto , 14 risposte	Da08/09/2015a07:32 Messaggio non letto super bien merci infiniment pour le tuto
crazy 60 soggetti, 474 risposte	Da08/09/2015a09:27 Messaggio non letto super boulot , mais trop compliquer pour vu que je n'est pas toutes les bases html , mais par contre je veut bien le widget un coup fini lool Debout les morts !
Yira 4 soggetti, 50 risposte donatori	Da08/09/2015a17:20 Messaggio non letto Pourquoi tu dit trop compliqué alors que tu n'a meme pas essayé tout est super bien détailler tu peu le faire toi meme facilement si tu sais lire ^^
Zaekof 38 soggetti, 883 risposte Hanno contribuito donatori	Da08/09/2015a18:59 Messaggio non letto merci ;) "N'arrêtez jamais d'apprendre" !
eResnova 17 soggetti, 875 risposte Hanno contribuito	Da09/09/2015a14:09 Messaggio non letto Merci Majiid ! Je me suis permis d'éditer ton sujet pour corriger 2, 3 choses dans le texte, notamment la partie view.tpl.php : Pour la version 0.1.2 qui arrive, il est préférable de ne plus utiliser les raccourcis "{...}" pour afficher tes variables mais plutôt : `<?php echo $data['mavariable']; ?>` Ça améliore légèrement le temps d’exécution des pages ;)
majiid 31 soggetti, 281 risposte Hanno contribuito donatori	Da09/09/2015a15:21 Messaggio non letto je t'en pris ! :)
Lyogi 20 soggetti, 97 risposte	Da10/09/2015a21:56 Messaggio non letto Merci du partage, c'est super :D
SkaalZealot 6 soggetti, 15 risposte	Da13/09/2015a01:08 Messaggio non letto @eResnova Finalement vous arrêter les raccourcis ? personnellement j'ajouterais le = a la place de php et echo pour tous ceux qui on des hébergeur a jour ça raccourcis un peut le tout, tout de même. `<?= $data['montruc'] ?>`

ritorno

[Tuto] Comment faire son 1er Widget !

[Tuto] Comment faire son 1er Widget !

11 risposte