Share
In april schreef Collis Ta'eed - CEO van Envato - een fantastische tutorial over het ontwerpen van een tabstructuur met behulp van CSS / HTML / JS.
Als u dat nog niet hebt gedaan, raad ik u 100% aan dit te controleren. Het dynamisch ophalen van een RSS-feed viel echter buiten het bestek van dat artikel. In de video-zelfstudie van vandaag laat ik je precies zien hoe je dit doet met behulp van PHP. Met een lengte van ongeveer vijfenveertig minuten wilt u misschien een snelle "pre-screencast badkamerpauze" nemen. Misschien wil je ook wat rozijnen pakken.
We maken een tabsysteem voor drie unieke RSS-feeds:
We willen deze feeds dynamisch importeren in ons document. Ons server-side script van vandaag is PHP en we zullen wat jQuery gebruiken om de tabstructuur te creëren.
* Opmerking - de bedoeling van deze zelfstudie is om het betrokken back-end werk te demonstreren. Zoals eerder vermeld, heeft Collis al een prachtige huid gecreëerd. Net zoals de programmering buiten het bereik van die tutorial viel, zal werken aan "design" buiten het bestek van dit artikel vallen. Om de zaken zo schoon en "to the point" mogelijk te houden, gebruiken we de meest naakte vorm van een tabbladstructuur - sprekend in termen van het ontwerp.
Open uw favoriete codebewerker en maak de volgende mappen / bestanden. De PHP-bestanden kunnen voorlopig leeg zijn.
Open uw "functions.php" -bestand. We zullen slechts één functie maken die relatief eenvoudig is. Kopieer eerst in de volgende code. Lees daarna verder voor de code-analyse.
"; foreach ($ x-> channel-> item as $ entry) echo"
Eerst maken we een functie met de naam getFeed (). De basisstructuur van elke PHP-functie is:
function someName ($ parameters) ... enige methode
Vervolgens maken we een variabele met de naam '$ content' en maken deze gelijk aan het resultaat van: file_get_contents ($ feed_url).
"file_get_contents" is de geprefereerde manier om de inhoud van een bestand in een string te lezen. "
Nu u de definitie begrijpt, hoeven we alleen ons bestand in te leveren. We hebben twee keuzes. Ten eerste konden we een string doorgeven aan onze RSS-feed - zoals zo:
file_get_contents ( "http://feedproxy.google.com/nettuts");
Dat zou prima werken, denk ik. De methode zou de RSS-feed correct lezen en de resultaten opslaan in onze variabele "$ content". Maar we moeten altijd het woord "herbruikbaarheid" op de loer leggen als we aan het werk zijn.
Stel je voor dat we veel verschillende pagina's in onze webapplicatie hebben die deze "getFeed ()" -functie willen noemen. Maar wat als ze verschillende feeds willen pakken? Zou het niet mooi zijn als we de URL in de functie zouden kunnen plaatsen in plaats van deze hardcoderen? Natuurlijk zou het! Daarom gebruiken we, in plaats van het pad in te voeren, eenvoudigweg een variabele genaamd "$ feed_url".
file_get_contents ($ FEED_URL);
Om deze variabele van een externe bron te kunnen gebruiken, moeten we ervoor zorgen dat de functie één parameter accepteert.
function getFeed ($ feed_url)
Wanneer we de functie nu noemen, kunnen we dit als volgt doen:
Vervolgens maken we een nieuw exemplaar ($ x) van SimpleXmlElement. Binnen de haakjes geven we onze variabele $ content door.
$ x = nieuw SimpleXmlElement ($ inhoud);
Ten slotte moeten we de RSS-feed doornemen en de informatie uitpakken die we nodig hebben.
echo "
We beginnen met het echoën van de eerste ongeordende lijst tag. Vervolgens doorlopen we elk item in onze RSS-feed met behulp van een "foreach" -instructie. Deze verklaring zegt in feite: "maak een variabele genaamd $ entry die de waarde van elk item-tag in onze RSS-feed zal bevatten.
Het mooie van RSS-feeds is dat ze allemaal dezelfde basisstructuur implementeren. Elke feed bevat een inpakkanaal. Vervolgens wordt elke boeking in uw feed verpakt in een tag 'item'. Alle informatie die we nodig hebben, is op deze manier toegankelijk.
In onze "foreach" -instructie hoeven we alleen de koppeling en titel uit te pakken en deze in een "li" -tag te plaatsen. De tag "link" bevat een link naar de eigenlijke posting. De title-tag bevat uiteraard de titel van de posting. Dat is alles wat we nodig hebben voor dit specifieke project, maar ik raad u aan om enkele van de andere informatie die voor u beschikbaar is te bekijken. Bekijk eenvoudig de bron van een RSS-feed om de structuur te analyseren.
Onze logica is nu compleet. We moeten nu onze index.php-pagina maken en de functie bellen.
Plak de volgende code in uw index.php-pagina.
- NETTUTS
- ThemeForest
- screencasts
Zoals ik al eerder zei, wil ik niet te veel in het "ontwerp" ingaan. Collis heeft dat al voor je gedaan. Raadpleeg die tutorial voor uw "ontwerp-fix". Maar voor een snel overzicht slaan we onze navigatielinks op in een ongeordende lijst met een id van "nav". In onze hoofdinhoudssectie hebben we drie div's met de naam 'content_1', 'content_2' en 'content_3'. Binnen elke divisie noemen we onze "getFeed" -functie - en geven de verschillende URL's door aan onze RSS-feeds.
Voeg wat extreem eenvoudige CSS toe en je krijgt dit:
Open uw "myScripts.js" -bestand en plak de volgende code in:
Accentsconagua
$ (function () $ ('# mainContent div: not (: first)'). hide (); $ ('ul li a'). click (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;);); Wanneer het document klaar is om te worden gemanipuleerd, pakken we al onze content-divs - maar niet de allereerste - en verbergen ze. Hiermee worden de tweede twee RSS-feeds verwijderd.
Wanneer een gebruiker vervolgens klikt op een van onze navigatielinks, voeren we een functie uit. Binnen deze functie verwijderen we de klasse 'geselecteerd' uit al onze ankerlabels voor navigatie. Deze klasse wordt gebruikt om enige visuele feedback te geven over welk tabblad momenteel is geselecteerd. In dit naakte voorbeeld heb ik de tekst gewoon vetgedrukt gemaakt voor dat specifieke tabblad. Nu voegen we deze klasse specifiek toe aan de ankertag waarop is geklikt: $ (this) .addClass ('selected');
We gaan verder en maken een variabele met de naam 'href' en maken deze gelijk aan de href van de ankertag waarop is geklikt. Als we teruggaan naar ons document, verwijzen deze navigatietags naar de secties in de hoofdinhoud: "# content_1", "# content_2", "# content_3". Het idee is dat als de gebruiker Javascript niet heeft ingeschakeld, deze koppelingen de gebruiker rechtstreeks naar de juiste feed zullen scrollen.
Dit heeft bovendien nog een ander uniek voordeel. Beschouw dit: de NETTUTS-navigatietag heeft zijn url ingesteld op "# content_1". Nu, in het hoofdgedeelte van de inhoud, de div met een id van"content_1"herbergt onze NETTUTS RSS-feed. Dus ... we hebben een verbinding tussen de twee gemaakt! Ik hoop dat dat logisch is, het is een beetje moeilijk om te beschrijven. Verwijs naar de screencast als ik dit punt niet goed genoeg heb geïllustreerd.
Ik ga "split" gebruiken om het # -teken te verwijderen. Splitsen werkt op dezelfde manier als PHP's explodeerfunctie.
var splitsen = href.split ('#'); Nu is de "split [1]" -array gelijk aan "content_1". De laatste stap is om de hoofd-inhoud-div te vinden die die exacte id heeft en dienovereenkomstig vervaagt.
$ ('# mainContent div #' + split [1]). fadeIn (); Ik hoop dat deze tutorial je heeft geholpen. Als je het ontwerp van de tutorial van Collis combineert met de logica van deze, zul je merken dat je een fantastische aanvulling op je zijbalk hebt. Hoewel, deze tut moet dienen als de eerste stap voor beginners. Ik verwelkom jullie allemaal om de code te verfijnen om ze geavanceerder en foutbestendiger te maken. Ik ben niet in het laatste deel gegaan om iets te redden voor Deel 2! : p
