Share
En avril dernier, Collis Ta'eed - PDG d’Envato - avait écrit un didacticiel fantastique sur la conception d’une structure d’onglet utilisant CSS / HTML / JS..
Si vous ne l'avez pas déjà fait, je vous recommande à 100% de l'examiner. Cependant, extraire dynamiquement un flux RSS sortait du cadre de cet article. Dans le didacticiel vidéo d'aujourd'hui, je vais vous montrer exactement comment faire cela en utilisant PHP. Après environ quarante-cinq minutes, vous voudrez peut-être faire une brève "pause dans la salle de bain avant le visionnement". Vous voudrez peut-être aussi prendre des raisins secs.
Nous allons créer un système d'onglets pour trois flux RSS uniques:
Nous voulons importer ces flux de manière dynamique dans notre document. Notre script de choix côté serveur aujourd'hui sera PHP, et nous utiliserons jQuery pour créer la structure d'onglets..
* Remarque - L’intention de ce didacticiel est de démontrer le travail final nécessaire. Comme mentionné précédemment, Collis a déjà créé une peau merveilleuse. Tout comme la programmation était au-delà de la portée de ce tutoriel, travailler sur la "conception" irait au-delà de la portée de cet article. Pour garder les choses aussi propres et "précises" que possible, nous utiliserons la forme la plus nue d'une structure d'onglets - en termes de conception..
Ouvrez votre éditeur de code préféré et créez les dossiers / fichiers suivants. Les fichiers PHP peuvent être vides pour l'instant.
Ouvrez votre fichier "functions.php". Nous allons créer une seule fonction relativement simple. Commencez par copier dans le code suivant. Après cela, continuez à lire pour l'analyse du code.
"; foreach ($ x-> channel-> item en tant que $ entry) echo"
Premièrement, nous créons une fonction appelée getFeed (). La structure de base de toute fonction PHP est la suivante:
function someName ($ parameters) … une méthode
Ensuite, nous créons une variable appelée "$ content" en la rendant égale au résultat de: file_get_contents ($ feed_url).
"file_get_contents" est le moyen préféré pour lire le contenu d'un fichier dans une chaîne. "
Maintenant que vous comprenez la définition, il ne reste plus qu'à passer dans notre dossier. Nous avons deux choix. Premièrement, nous pourrions passer une chaîne à notre flux RSS - comme ceci:
Accentsconagua
file_get_contents ("http://feedproxy.google.com/nettuts"); Cela fonctionnerait très bien, je suppose. La méthode lirait correctement le flux RSS et stockerait les résultats dans notre variable "$ content". Mais nous devrions toujours avoir le mot "réutilisabilité" dans nos esprits lorsque nous travaillons.
Imaginez que de nombreuses pages de notre application Web veuillent appeler cette fonction "getFeed ()". Mais que se passe-t-il s’ils veulent saisir différents flux? Ne serait-il pas intéressant de pouvoir passer l'URL dans la fonction au lieu de la coder en dur? Bien sûr que ce serait! Par conséquent, plutôt que de saisir le chemin, nous utiliserons simplement une variable appelée "$ feed_url".
file_get_contents ($ feed_url);
Pour utiliser cette variable depuis une source externe, nous devons nous assurer que la fonction accepte un paramètre..
fonction getFeed ($ feed_url)
Maintenant, quand on appelle la fonction, on peut le faire comme ceci:
Ensuite, nous allons créer une nouvelle instance ($ x) de SimpleXmlElement. Dans la parenthèse, nous allons passer notre variable $ content.
$ x = new SimpleXmlElement ($ content);
Enfin, nous devons parcourir le flux RSS et extraire les informations souhaitées..
écho "
Nous commençons par faire écho à la balise d'ouverture de liste non ordonnée. Ensuite, nous parcourons chaque entrée de notre flux RSS en utilisant une instruction "foreach". Cette instruction dit en gros "crée une variable appelée $ entry qui contiendra la valeur de chaque balise d’item dans notre flux RSS.
La grande chose à propos des flux RSS est qu'ils implémentent tous la même structure de base. Chaque flux contient une balise "channel" d'habillage. Ensuite, chaque publication dans votre flux sera placée dans une balise "item". De cette manière, toutes les informations dont nous avons besoin sont accessibles.
Dans notre déclaration "foreach", nous avons seulement besoin d'extraire le lien et le titre, et de les placer dans une balise "li". La balise "link" contient un lien vers la publication réelle. La balise de titre contient évidemment le titre de l'affichage. C'est tout ce dont nous avons besoin pour ce projet particulier, mais je vous conseillerais de revoir certaines des autres informations disponibles. Il suffit de visualiser la source de tout flux RSS pour analyser la structure.
Notre logique est maintenant complète. Nous devons maintenant créer notre page index.php et appeler la fonction.
Collez le code suivant dans votre page index.php.
- NETTUTS
- Thème Forêt
- Screencasts
Comme je l'ai dit plus tôt, je ne veux pas trop m'intéresser au "design". Collis l'a déjà fait pour vous. Référez-vous à ce tutoriel pour votre "correctif de conception". Mais pour un aperçu rapide, nous stockons nos liens de navigation dans une liste non ordonnée ayant un identifiant "nav". Dans notre section de contenu principale, nous avons trois divs nommés "content_1", "content_2" et "content_3", respectivement. Dans chaque division, nous appelons notre fonction "getFeed" - et transmettons les différentes URL à nos flux RSS..
Ajoutez quelques CSS extrêmement basiques et vous obtenez ceci:
Ouvrez votre fichier "myScripts.js" et collez-le dans le code suivant:
$ (function () $ ('# mainContent div: not (: first)'). hide (); $ ('ul li a'). clic (function () $ ('ul # nav li a') .removeClass ('selected'); $ (this) .addClass ('selected'); var href = $ (this) .attr ('href'); var split = href.split ('#'); $ (' #mainContent div '). hide (); $ (' # mainContent div # '+ split [1]). fadeIn (); return false;);); Lorsque le document est prêt à être manipulé, nous récupérons tous nos contenus, mais pas le premier, et nous les cachons. Cela supprimera les deux deuxièmes flux RSS.
Ensuite, lorsqu'un utilisateur clique sur l'un de nos liens de navigation, nous exécutons une fonction. Dans cette fonction, nous allons supprimer la classe "sélectionnée" de toutes nos balises d'ancrage de navigation. Cette classe est utilisée pour fournir des informations visuelles sur l'onglet actuellement sélectionné. Dans cet exemple nu, j'ai simplement mis le texte en gras pour cet onglet particulier. Maintenant, nous ajoutons cette classe spécifiquement à la balise d'ancrage sur laquelle vous avez cliqué - $ (this) .addClass ('selected');
En cours de route, nous créons une variable appelée "href" et la rendons égale à la href de la balise d'ancrage sur laquelle l'utilisateur a cliqué. Si nous renvoyons à notre document, ces balises de navigation renvoient aux sections du contenu principal - "# content_1", "# content_2", "# content_3". L'idée est que, si l'utilisateur n'a pas activé Javascript, ces liens le feront défiler directement vers le fil approprié..
Cela sert en outre un autre avantage unique. Considérez ceci: la balise de navigation NETTUTS a son URL définie sur "# content_1". Maintenant, dans la section de contenu principal, la div avec un identifiant de"content_1"abrite notre flux RSS NETTUTS. Alors ... nous avons établi un lien entre les deux! J'espère que cela a du sens; c'est un peu difficile à décrire. Reportez-vous au screencast si je n'ai pas suffisamment illustré ce point..
Je vais utiliser "split" pour enlever le signe #. Split fonctionne de la même manière que la fonction d'explosion de PHP.
var split = href.split ('#'); Maintenant, le tableau "split [1]" sera égal à "content_1". La dernière étape consiste à trouver la div principale du contenu qui a cet identifiant exact et à le fondre en conséquence..
$ ('# mainContent div #' + split [1]). fadeIn (); J'espère que ce tutoriel vous a aidé. Une fois que vous combinez la conception du didacticiel de Collis avec la logique de celui-ci, vous vous retrouvez avec un ajout fantastique à votre barre latérale. Bien que, ce tut devrait servir de première étape pour les débutants. Je vous invite tous à affiner le code pour le rendre plus avancé et plus résistant aux erreurs. Je ne suis pas entré dans la dernière partie afin de sauver quelque chose pour la partie 2! : p
