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

94 Ansichten [Tuto] Comment faire son 1er Widget !
majiid 31 Fach, 281 Antworten Mitwirkende Geber	Die08.09.2015 bis01:03 Ungelesene Nachricht 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 Ansichten

[Tuto] Comment faire son 1er Widget !

majiid

31 Fach, 281 Antworten

Mitwirkende Geber

Die08.09.2015 bis01:03 Ungelesene Nachricht

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

Rückkehr

8 Teilnehmer 11 Antworten
majiid 31 Fach, 281 Antworten Mitwirkende Geber	Die08.09.2015 bis01:04 Ungelesene Nachricht Reversé pour la parti 2
majiid 31 Fach, 281 Antworten Mitwirkende Geber	Die08.09.2015 bis01:04 Ungelesene Nachricht Reversé pour la parti 3
Yira 4 Fach, 50 Antworten Geber	Die08.09.2015 bis03:57 Ungelesene Nachricht Merci pour ce tuto ! :D
candelier 1 Fach , 14 Antworten	Die08.09.2015 bis07:32 Ungelesene Nachricht super bien merci infiniment pour le tuto
crazy 60 Fach, 474 Antworten	Die08.09.2015 bis09:27 Ungelesene Nachricht 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 Fach, 50 Antworten Geber	Die08.09.2015 bis17:20 Ungelesene Nachricht 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 Fach, 883 Antworten Mitwirkende Geber	Die08.09.2015 bis18:59 Ungelesene Nachricht merci ;) "N'arrêtez jamais d'apprendre" !
eResnova 17 Fach, 875 Antworten Mitwirkende	Die09.09.2015 bis14:09 Ungelesene Nachricht 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 Fach, 281 Antworten Mitwirkende Geber	Die09.09.2015 bis15:21 Ungelesene Nachricht je t'en pris ! :)
Lyogi 20 Fach, 97 Antworten	Die10.09.2015 bis21:56 Ungelesene Nachricht Merci du partage, c'est super :D
SkaalZealot 6 Fach, 15 Antworten	Die13.09.2015 bis01:08 Ungelesene Nachricht @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'] ?>`

Rückkehr

[Tuto] Comment faire son 1er Widget !

[Tuto] Comment faire son 1er Widget !

11 Antworten