Accueil » Dossiers » Tutoriaux » DHTML, Ajax, Drag and Drop : Dynamisez votre site Internet !

DHTML, Ajax, Drag and Drop : Dynamisez votre site Internet !

Par GuillaumeB

Exemple Ajax : Le flux RSS

Si vous rêvez de vous fabriquer votre propre lecteur de flux RSS, alors voici une solution plutôt intéressante. En effet, nous allons cette fois charger le contenu d’un flux pour le présenter sur une page HTML classique dans une section <div> prédéfinie. Il sera possible de préciser le nombre de titres que l’on souhaite télécharger, leur date de publication ainsi qu’une brève description. Enfin, le gâteau sur la cerise : une pagination ajaxée du contenu du flux !
Cette opération se déroule en deux temps.
Du côté serveur, notre script, RSS Display Box, utilise SimplePie, un analyseur de données écrit en PHP qui se chargera de récupérer le flux RSS. En effet, dans la mesure où ce flux n’est pas local, un simple JavaScript ne saurait être en mesure d’effectuer ce processus. En revanche, une fois le flux récupéré, le JavaScript permet d’utiliser de l’Ajax pour le présenter sur une page HTML.
S’il est nécessaire que votre serveur soit capable d‘interpréter le langage PHP, le flux peut être présenté sur n’importe quel type de page .html ou .php.

Avant d’entrer dans les détails, voici un exemple (2 d) en action – Télécharger l’exemple.

Notre script contient : index.html, un dossier simplepie et un dossier rssbox.
a) Commençons par localiser le fichier main.php dans le dossier rssbox. Voici ce qui nous intéresse :

$rsslist=array(« zebulon » => « http://rss.zebulon.fr/feed/zebulon/actualites »);

Ici, nous avons spécifié que le flux RSS de Zebulon.fr était rattaché à l’identifiant « zebulon ».

b) Entre les balises <head> de notre fichier .html, sur lequel le flux apparaîtra, nous avons construit trois liens.

<link rel= »stylesheet » type= »text/css » href= »rssbox/rssdisplaybox.css » /><script type= »text/javascript » src= »rssbox/virtualpaginate.js »></script><script type= »text/javascript » src= »rssbox/rssdisplaybox.js »</script>

Le premier lien redirige vers une feuille de style, le second lien est nécessaire pour obtenir l’effet de pagination, enfin, le troisième est le plus important, il s’agit du script par lequel le flux RSS sera présenté en Ajax sur notre page.

c) Ensuite, sur ce même fichier .html, dans le corps de la page (<body>), voici de quelle manière procéder pour personnaliser le flux de Zébulon.

<script type= »text/javascript »>//MAIN FUNCTION: rssdisplaybox()var cssdrivebox=new rssdisplaybox(« zebulon »)cssdrivebox.set_items_shown(10,5) cssdrivebox.set_template(« default ») cssdrivebox.start() //Required: start script</script>

A la ligne 3, nous spécifions quel flux doit être pris en compte à l’aide de son identifiant (« zébulon »). Les valeurs 10 et 5 à la ligne suivante signifient que l’on télécharge les 10 derniers titres d’actualité à défaut de 5 par page. Logiquement, nous avons obtenons un effet de pagination avec 2 pages.

d) Enfin, pour une personnalisation plus poussée, rendez-vous dans le dossier rssbox et ouvrez le fichier outputbody ; vous y retrouverez les différents identifiants à utiliser dans votre feuille de style : rsscontainerrsstitlerssdate et rssdescription.

5 Commentaires
0

Vous aimerez aussi

5
Poster un Commentaire

avatar
5 Fils de commentaires
0 Réponses de fil
0 Abonnés
 
Commentaire avec le plus de réactions
Le plus populaire des commentaires
0 Auteurs du commentaire
dan4Glups0lucifer Auteurs de commentaires récents
  S’abonner  
plus récent plus ancien Le plus populaire
Notifier de
lucifer
Invité
lucifer

J’aimerai savoir (l’exemple 3b) comment faire en sorte que les éléments qui ont pour class "exeception" ne puissent pas posséder l’effet du drag and drop ?

En effet si dans notre div, on a un champ input (par exemple) eh bien on ne peut pas remplir ce champs.

Sinon c’est un très bon tuto 😛

Anonyme
Invité
Anonyme

Tous simplement, comment faire une fonction qui mettent fin à "Drag.init" ?

je vais faire un onclick="stop_Drag();"

Mais comment faire ?

Glups
Invité
Glups

Je n’ai pu faire fonctionner cette application qu’en remplaçant 200 par 0 (au niveau du test sur xhr2.status)
Ensuite, impeccable.

Glups
Invité
Glups
Glups a dit :

Je n’ai pu faire fonctionner cette application qu’en remplaçant 200 par 0 (au niveau du test sur xhr2.status)
Ensuite, impeccable.

(Je parle de l’exemple 2c)

dan4
Invité
dan4

C’est super mais ça ne fait pas un vrai iframe.

Je dois avoir un index avec un autre fichier en iframe ou include qui lui seul se charge quand je clique sur un élément du conteneur.

Plus dans Tutoriaux
Tutoriel VirtualBox : créer une machine virtuelle

Utilisation de la machine virtuelle L'installation terminée, nous disposons maintenant d'une machine virtuelle parfaitement fonctionnelle. Avant de terminer ce tutoriel,…

Fermer