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

94 뷰 [Tuto] Comment faire son 1er Widget !
majiid 31 과목, 281 개 참여자 기증자	2015.09.08 ~ 오전 1시 03분 읽지 않은 메시지 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 뷰

[Tuto] Comment faire son 1er Widget !

majiid

31 과목, 281 개

참여자 기증자

2015.09.08 ~ 오전 1시 03분 읽지 않은 메시지

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

반환

8 참가자 11 개
majiid 31 과목, 281 개 참여자 기증자	2015.09.08 ~ 오전 1시 04분 읽지 않은 메시지 Reversé pour la parti 2
majiid 31 과목, 281 개 참여자 기증자	2015.09.08 ~ 오전 1시 04분 읽지 않은 메시지 Reversé pour la parti 3
Yira 4 과목, 50 개 기증자	2015.09.08 ~ 오전 3시 57분 읽지 않은 메시지 Merci pour ce tuto ! :D
candelier 1 과목 , 14 개	2015.09.08 ~ 오전 7시 32분 읽지 않은 메시지 super bien merci infiniment pour le tuto
crazy 60 과목, 474 개	2015.09.08 ~ 오전 9시 27분 읽지 않은 메시지 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 과목, 50 개 기증자	2015.09.08 ~ 오후 5시 20분 읽지 않은 메시지 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 과목, 883 개 참여자 기증자	2015.09.08 ~ 오후 6시 59분 읽지 않은 메시지 merci ;) "N'arrêtez jamais d'apprendre" !
eResnova 17 과목, 875 개 참여자	2015.09.09 ~ 오후 2시 09분 읽지 않은 메시지 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 과목, 281 개 참여자 기증자	2015.09.09 ~ 오후 3시 21분 읽지 않은 메시지 je t'en pris ! :)
Lyogi 20 과목, 97 개	2015.09.10 ~ 오후 9시 56분 읽지 않은 메시지 Merci du partage, c'est super :D
SkaalZealot 6 과목, 15 개	2015.09.13 ~ 오전 1시 08분 읽지 않은 메시지 @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'] ?>`

반환

[Tuto] Comment faire son 1er Widget !

[Tuto] Comment faire son 1er Widget !

11 개