Télécharger NeoFrag
Connexion

[Tuto] Comment faire son 1er Widget !

94 vues
[Tuto] Comment faire son 1er Widget !
majiid

31 sujets, 281 réponses

Contributeurs Donateurs
Message non lu
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.

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
Retour
8 participants
11 réponses
majiid

31 sujets, 281 réponses

Contributeurs Donateurs
Message non lu
Reversé pour la parti 2
majiid

31 sujets, 281 réponses

Contributeurs Donateurs
Message non lu
Reversé pour la parti 3
Yira

4 sujets, 50 réponses

Donateurs
Message non lu
Merci pour ce tuto ! :D
candelier

1 sujet, 14 réponses
Message non lu
super bien merci infiniment pour le tuto

crazy

60 sujets, 474 réponses
Message non lu
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 sujets, 50 réponses

Donateurs
Message non lu
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 sujets, 883 réponses

Contributeurs Donateurs
Message non lu
merci ;)
"N'arrêtez jamais d'apprendre" !
eResnova

17 sujets, 875 réponses

Contributeurs Staff
Message non lu
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 sujets, 281 réponses

Contributeurs Donateurs
Message non lu
je t'en pris ! :)
Lyogi

20 sujets, 97 réponses
Message non lu
Merci du partage, c'est super :D
SkaalZealot

6 sujets, 15 réponses
Message non lu
@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'] ?> 
Retour