Eh oui, ils sont bien sympathiques ces petits gadgets que l’on peut mettre dans notre accueil personnalisé, non ? De plus, certains peuvent être très pratiques. :)
Et c'est pourquoi nous allons voir ici comment créer notre propre Gadget Google que l'on pourra fièrement intégrer à notre page d'accueil super-chouette. :p Je vais donc vous montrer un gadget qui affichera le nom des personnes ayant posté les derniers commentaires sur votre site, les derniers messages dans votre livre d'or et les derniers messages dans votre shoutbox. ^^
Pour ceux qui auraient peur de se lancer dans la création d'un gadget, qu'ils se rassurent, ce n'est pas bien compliqué. Il suffit de connaître un minimum le langage que l'on veut utiliser. Ici le PHP, bien que l'on pourrait utiliser du Java, Python, etc. Il existe cependant plusieurs façons de faire un gadget, mais nous n'en verrons qu'une seule ici, celle utilisant un fichier externe.
La base de tout gadget repose sur l'API Google Gadget et s'appuie sur l'utilisation de trois langages : XML, XHTML et JavaScript (bien que d'autres peuvent être utilisés).
Le XML va nous servir à structurer notre gadget afin que Google sache comment l'interpréter. Il s'agira donc d'un simple fichier XML qu'il vous faudra héberger quelque part (sauf sur votre ordinateur évidemment, sinon il sera impossible que Google et d'autres usagers puissent y accéder :p ). Ce fichier XML pourra soit comporter tout le code de notre gadget (ce qui ne sera pas le cas dans ce tutoriel), soit faire appel à d'autres pages pour recevoir des informations.
Le XHTML va servir à mettre en place la partie « statique » du gadget, laissant le PHP, le JavaScript, le Python se charger de la partie « dynamique ».
Voici un exemple bien connu du « Hello World », que l'on peut trouver quelque part dans les méandres de Google. Examinons-le d'un peu plus près.
Structure interne
On peut donc voir que ce fichier XML est relativement simple.
La première ligne indique le type de document (XML) ainsi que son encodage (UTF-8). La seconde ligne est la balise Module, celle qui englobera tout notre gadget (un peu comme la balise html en XHTML :p ).
Simplement pour l'histoire, si c'est la balise Module qui a été choisie, c'est simplement parce qu'avant, un gadget était appelé Module.
La ligne suivante va contenir les préférences de notre gadget (on ne s'en serait pas douté ^^ ). Ici, il y aura donc le titre du module par exemple. Vient ensuite la balise Content qui va contenir le code de notre gadget. Il est ici suivi de l'attribut type qui va spécifier le langage utilisé, en l'occurrence le HTML. L'élément qui vient juste après permet de dire au XML qu'il ne doit pas interpréter son code comme du XML. On retrouve donc du XHTML ou du JavaScript dans cet élément la plupart du temps. Ensuite on ferme la balise Content. Et enfin la balise Module.
Voici une sous-partie très courte qui va brièvement expliquer les différentes façons de coder un gadget.
Comme je l'ai dit plus tôt, il y a plusieurs façons de faire son gadget grâce à l'attribut type :
type html > coder tout dans le fichier XML ;
type html-inline > comme le type html, sauf que le code pourra modifier le contenu de la page parente ;
type url > permet d'utiliser un script extérieur (en PHP par exemple).
Le type html
C'est le plus utilisé et le plus souple. Tout le contenu du code sera donc en (X)HTML, et pourra être accompagné de JavaScript, Flash, ActiveX et autres objets d'agents utilisateurs incorporés.
Le type html-inline
Étant donné que ce type permet de modifier la page parente, il y a beaucoup de restrictions quant à son utilisation. En effet, il ne sera pas considéré comme une IFRAME mais fera partie intégrante de la page qui le contient. C'est pourquoi pour des raisons de sécurité, ce type de gadget ne peut être utilisé sur la page d'accueil personnalisée de Google, ni dans les pages Google, ni dans l'annuaire de contenus, ni sur une page web tierce.
Le type url
Comme déjà dit précédemment, avec ce type, le code du gadget se trouvera sur une page externe, indiquée par une URL. Cette page pourra bien entendu contenir du (X)HTML, JavaScript et autres, mais pourra également contenir du PHP, du Python... Le fichier XML ne contiendra alors aucun code XHTML ou JavaScript.
Voilà, c'est à peu près ce qu'il faut savoir. Il y a d'autres spécificités, mais je ne suis pas là pour entrer plus dans les détails. :) Nous allons donc enfin passer à la création de notre gadget ! :magicien:
Commençons donc par la création du fichier XML. Comme je l'ai dit juste avant, ce fichier sera très simple et ne fera que quelques lignes. Il suffit de prendre la structure montrée précédemment et de modifier le type utilisé. Nous passons donc de ça :
Et voilà, c’en est fini de notre fichier XML : simple, n'est-ce pas ? :p
Page : gadget.php
Notre page PHP sera plutôt simple, elle aussi. Il suffira de se connecter à notre base de données, d'effectuer les requêtes nécessaires, et d'afficher les résultats.
On commence donc par se connecter à notre base de données :
<?php
mysql_connect("localhost", "root", "");
mysql_select_db("perso");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<link rel="stylesheet" href="gadget.css" type="text/css" />
</head>
<body>
<div id="conteneur">
<h1>Commentaires</h1>
<ul>
<!--
On introduira ici une boucle qui ira chercher les informations
concernant les derniers commentaires postés.
-->
</ul>
<h1>Livre d'Or</h1>
<ul>
<!--
On introduira ici une boucle qui ira chercher les informations
concernant les derniers messages postés dans le livre d'or.
-->
</ul>
<h1>Shoutbox</h1>
<ul>
<!--
On introduira ici une boucle qui affichera les derniers
messages postés dans la Shoutbox.
-->
</ul>
</div>
</body>
</html>
<?php
mysql_close();
?>
Rien de bien méchant là-dedans. J'en ai simplement profité pour fermer la connexion à la base de données et pour indiquer le chemin d'accès à un fichier CSS qui nous permettra de mettre en forme le rendu. ^^
Passons maintenant à la partie dynamique de notre gadget. Pour cela, nous allons effectuer des requêtes suivies de boucles qui afficheront ce que l'on veut. Je ne recopierai pas tout le code à chaque fois, simplement la partie qui nous intéresse...
Commençons par les commentaires. Ma base contient divers champs, dont un comportant le pseudo de la personne et l'autre le titre de la news à laquelle le commentaire se rattache. Utilisons donc ces deux informations pour lister… disons… les 5 dernières entrées de la base.
<h1>Commentaires</h1>
<ul>
<?php
$infos = mysql_query('SELECT commentaires.id_news, commentaires.pseudo, news.titre, news.id AS news_id FROM commentaires, news WHERE news.id = commentaires.id_news ORDER BY commentaires.id DESC LIMIT 0,5');
while ($donnees = mysql_fetch_array($infos))
{ ?>
<li>
<?php echo stripslashes($donnees['pseudo']); ?> dans <?php echo stripslashes($donnees['titre']); ?>
</li>
<?php
} ?>
</ul>
Normalement, ce code ne devrait pas vous poser de problèmes si vous avez lu le tutoriel de M@teo21. :-°
Seconde étape, les informations concernant les messages du livre d'or. Encore plus simple, j'hésite même à le mettre. :lol: Ici, seul le pseudo de la personne est utilisé.
<h1>Livre d'Or</h1>
<ul>
<?php
$infos = mysql_query('SELECT * FROM livreor ORDER BY id DESC LIMIT 0,5');
while ($donnees = mysql_fetch_array($infos))
{ ?>
<li>
Message de <?php echo stripslashes($donnees['pseudo']); ?>
</li>
<?php
} ?>
</ul>
Dernière partie, les messages de la shoutbox. Ici encore, rien d'extraordinaire, on fait dans le simple. :p
<h1>Shoutbox</h1>
<ul>
<?php
$reponse = mysql_query("SELECT * FROM chat ORDER BY ID DESC LIMIT 0,5");
while ($donnees = mysql_fetch_array($reponse) )
{
$date = $donnees['timestamp']; ?>
<li>
<strong><?php echo $donnees['pseudo']; ?></strong> le <?php echo date('d\/m\/Y \à H:i', $date); ?> :
<br /><?php echo nl2br($donnees['message']); ?>
</li>
<?php
} ?>
</ul>
Et voilà ! C'est tout ! ;)
Un petit résumé pour ceux qui n'auraient pas bien suivi. ^^
<?php
mysql_connect("localhost", "root", "");
mysql_select_db("perso");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<link rel="stylesheet" href="gadget.css" type="text/css" />
</head>
<body>
<div id="conteneur">
<h1>Commentaires</h1>
<ul>
<?php
$infos = mysql_query('SELECT commentaires.id_news, commentaires.pseudo, news.titre, news.id AS news_id FROM commentaires, news WHERE news.id = commentaires.id_news ORDER BY commentaires.id DESC LIMIT 0,5');
while ($donnees = mysql_fetch_array($infos))
{ ?>
<li>
<?php echo stripslashes($donnees['pseudo']); ?> dans <?php echo stripslashes($donnees['titre']); ?>
</li>
<?php
} ?>
</ul>
<h1>Livre d'Or</h1>
<ul>
<?php
$infos = mysql_query('SELECT * FROM livreor ORDER BY id DESC LIMIT 0,5');
while ($donnees = mysql_fetch_array($infos))
{ ?>
<li>
Message de <?php echo stripslashes($donnees['pseudo']); ?>
</li>
<?php
} ?>
</ul>
<h1>Shoutbox</h1>
<ul>
<?php
$reponse = mysql_query("SELECT * FROM chat ORDER BY ID DESC LIMIT 0,5");
while ($donnees = mysql_fetch_array($reponse) )
{
$date = $donnees['timestamp']; ?>
<li>
<strong><?php echo $donnees['pseudo']; ?></strong> le <?php echo date('d\/m\/Y \à H:i', $date); ?> :
<br /><?php echo nl2br($donnees['message']); ?>
</li>
<?php
} ?>
</ul>
</div>
</body>
</html>
<?php
mysql_close();
?>
Page : gadget.css
Bon allez, on passe à la déco. :p Je vous le dis tout de suite, je ne suis pas très doué niveau décoration, donc je me contenterai du minimum. :-°
Tout d'abord, il faut délimiter la taille de notre gadget. Pour cela, on va appliquer un style au div qui englobe tout notre code. Pour ceux qui ne l'auraient pas vu, il s'agit de conteneur.
#conteneur {
max-width: 350px; /* On définit une largeur maximale */
max-height: 180px; /* On définit une hauteur maximale */
overflow: auto; /* On dit au navigateur d'utiliser des
barres de défilement pour que le contenu puisse être totalement visible */
}
Ensuite, je modifie la taille des titres et du texte se trouvant entre les balises <li></li>.
h1 {
font-size: 1em;
}
li {
font-size: 0.8em;
}
Bon bah voilà, ça va être bon, là. :-°
Mise en place du gadget
Il ne nous reste plus qu'à envoyer tout ça sur un FTP. :p Nous avons donc trois fichiers : gadget.xml, gadget.php et gadget.css. Il vous suffit d'envoyer ces trois fichiers sur un serveur (dans un dossier gadget par exemple, histoire de vous y retrouver :-° ).
Ensuite, direction l'accueil personnalisé de Google.
Un petit clic sur Ajouter des modules.
Un clic sur Ajouter un flux ou un gadget. On met l'adresse de notre gadget. On clique sur Ajouter.
Et voilà le résultat sur notre page d'accueil. ^^
On a enfin terminé notre premier Gadget Google ! La classe, nan ? :soleil:
Bien entendu, vous pouvez (et devez ? :p ) modifier le CSS pour que ça soit plus joli, car là, ce n'est pas terrible, faut avouer. :-° J'espère en tout cas que cela vous aura donné quelques idées pour créer votre propre gadget, utile ou non, et que vous pourrez en faire profiter les autres ;) (je n'ai pas indiqué comment faire pour rendre le gadget public, car je ne me suis jamais posé la question ; peut-être qu’une annexe viendra l'indiquer plus tard :) ).
Je tiens à signaler que j'ai utilisé un livre fort sympathique pour apprendre tout ça, et m'en suis inspiré par moments. Il s'agit de HTML - Le guide complet de Fabrice Lemainque, aux éditions Micro Application.
Sur ce, bonne programmation à toutes et à tous, et surtout bonne nuit. :magicien: *pouf, disparaît* :magicien:
