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

94 vistas [Tuto] Comment faire son 1er Widget !
majiid 31 sujetos, 281 respuestas colaboradores donantes	Ases Mensaje no leído 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 vistas

[Tuto] Comment faire son 1er Widget !

majiid

31 sujetos, 281 respuestas

colaboradores donantes

Ases Mensaje no leído

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

regreso

8 participantes 11 respuestas
majiid 31 sujetos, 281 respuestas colaboradores donantes	Ases Mensaje no leído Reversé pour la parti 2
majiid 31 sujetos, 281 respuestas colaboradores donantes	Ases Mensaje no leído Reversé pour la parti 3
Yira 4 sujetos, 50 respuestas donantes	Ases Mensaje no leído Merci pour ce tuto ! :D
candelier 1 sujeto , 14 respuestas	Ases Mensaje no leído super bien merci infiniment pour le tuto
crazy 60 sujetos, 474 respuestas	Ases Mensaje no leído 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 sujetos, 50 respuestas donantes	Ases Mensaje no leído 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 sujetos, 883 respuestas colaboradores donantes	Ases Mensaje no leído merci ;) "N'arrêtez jamais d'apprendre" !
eResnova 17 sujetos, 875 respuestas colaboradores	Ases Mensaje no leído 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 sujetos, 281 respuestas colaboradores donantes	Ases Mensaje no leído je t'en pris ! :)
Lyogi 20 sujetos, 97 respuestas	Ases Mensaje no leído Merci du partage, c'est super :D
SkaalZealot 6 sujetos, 15 respuestas	Ases Mensaje no leído @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'] ?>`

regreso

[Tuto] Comment faire son 1er Widget !

[Tuto] Comment faire son 1er Widget !

11 respuestas