Share
Tilbake i april skrev Collis Ta'eed - administrerende direktør i Envato - en fantastisk opplæring om utforming av en tabulatorstruktur ved hjelp av CSS / HTML / JS.
Hvis du ikke allerede har det, anbefaler jeg 100% at du vurderer det. Men dynamisk å trekke inn en RSS-feed var utenfor omfanget av den artikkelen. I dagens videoopplæring viser jeg deg nøyaktig hvordan du gjør dette ved hjelp av PHP. På omtrent femti minutter i lengden, vil du kanskje ta en rask "pre-screencast boblebad". Du vil kanskje også ta noen rosiner.
Vi lager et fanesystem for tre unike RSS-feeder:
Vi vil dynamisk importere disse innmatingene i dokumentet vårt. Vår server-side script av valget i dag vil være PHP, og vi vil bruke noen jQuery til å opprette tabulatorstrukturen.
* Merk - Formålet med denne opplæringen er å demonstrere bak-end-arbeidet som er involvert. Som tidligere nevnt har Collis allerede skapt en flott hud. Akkurat som programmeringen var utenfor omfanget av denne opplæringen, vil arbeidet med "design" være utenfor rammen av denne artikkelen. For å holde ting så rent og "til det punkt" som mulig, bruker vi den nakeneste form av en tabulatorstruktur - taler når det gjelder design.
Åpne favorittkodeditoren din og opprett følgende mapper / filer. PHP-filene kan være tomme for nå.
Åpne filen "functions.php". Vi lager bare en funksjon som er relativt enkel. Først, kopier i følgende kode. Deretter fortsetter du å lese for kodeanalysen.
"; foreach ($ x-> channel-> element som $ entry) echo"
Først oppretter vi en funksjon kalt getFeed (). Den grunnleggende strukturen til enhver PHP-funksjon er:
funksjon noenName ($ parametere) ... noen metode
Deretter lager vi en variabel som heter "$ content" og gjør det lik med resultatet av: file_get_contents ($ feed_url).
"file_get_contents" er den foretrukne måten å lese innholdet av en fil i en streng. "
Nå som du forstår definisjonen, trenger vi bare å passere i filen vår. Vi har to valg. Først kunne vi passere i en streng til vår RSS-feed - slik som:
file_get_contents ( "http://feedproxy.google.com/nettuts");
Det ville fungere bra, antar jeg. Metoden vil korrekt lese RSS-feed og lagre resultatene i vår "$ content" -variabel. Men vi bør alltid ha ordet "gjenbruk" lurker i ryggen når vi jobber.
Tenk deg at vi har mange forskjellige sider i vårt webprogram som vil kalle denne "getFeed ()" -funksjonen. Men, hva om de vil ta andre strømmer? Ville det ikke vært fint om vi kunne passere url inn i funksjonen i stedet for å skrive det hardt? Selvfølgelig ville det! Derfor, i stedet for å legge inn banen, bruker vi ganske enkelt en variabel som heter "$ feed_url".
file_get_contents ($ FEED_URL);
For å kunne bruke denne variabelen fra en ekstern kilde, må vi sørge for at funksjonen aksepterer en parameter.
funksjon getFeed ($ feed_url)
Nå, når vi kaller funksjonen, kan vi gjøre slik:
Deretter oppretter vi en ny forekomst ($ x) av SimpleXmlElement. Innen parentesen vil vi passere inn i $ innholdsvariabelen.
$ x = nytt SimpleXmlElement ($ innhold);
Til slutt må vi løpe gjennom RSS-feeden og trekke ut informasjonen vi ønsker.
ekko "
Vi begynner med å ekko den åpne, uordnede listemerken. Deretter sykler vi gjennom hver oppføring i vår RSS-feed ved hjelp av en foreach-setning. Denne uttalelsen sier i utgangspunktet "Lag en variabel kalt $ entry som vil inneholde verdien av hver elementetikett i vårt RSS-feed.
Den fantastiske tingen om RSS-feeder er at de alle implementerer samme grunnleggende struktur. Hver fôr inneholder en innpakningskanal-kode. Da blir hver innlegg i innmatingen din pakket inn i en "element" -tag. All den informasjonen vi trenger, kan nås på denne måten.
I vårt "foreach" -uttalelse trenger vi bare å trekke ut lenken og tittelen, og plasser den i en "li" -kode. Koblingen "Link" inneholder en kobling til den faktiske posten. Titteltaggen inneholder åpenbart tittelen på innlegget. Det er alt vi trenger for dette bestemte prosjektet, men jeg anbefaler deg å gjennomgå noen av de andre opplysningene som er tilgjengelige for deg. Bare se kilden til et RSS-feed for å analysere strukturen.
Vår logikk er nå ferdig. Vi må nå opprette vår index.php side og ringe funksjonen.
Lim inn følgende kode i index.php-siden din.
- NETTUTS
- Themeforest
- screencasts
Som jeg sa tidligere, vil jeg ikke gå for mye inn i "design". Collis har allerede gjort det for deg. Se denne veiledningen for "design fix". Men for en rask oversikt lagrer vi våre navigasjonskoblinger i en uordnet liste som har et ID på "nav". I hovedinnholdet vårt har vi tre divs med henholdsvis "content_1", "content_2" og "content_3". Inne i hver divisjon er der vi kaller vår "getFeed" -funksjon - og passere i de ulike nettadressene til våre RSS-feeder.
Legg til i noen svært grunnleggende CSS, og du får dette:
Åpne filen "myScripts.js" og lim inn i følgende kode:
Accentsconagua
$ (funksjon () $ ('# mainContent div: ikke (: først)'). skjul (); $ ('ul li a'). klikk (funksjon () $ ('ul # nav li a') .removeClass ('selected'); $ (dette) .addClass ('valgt'); var href = $ (dette) .attr ('href'); var delt = href.split ('#'); $ #mainContent div '). skjul (); $ (' # mainContent div # '+ delt [1]). fadeIn (); return false;);); Når dokumentet er klar til å bli manipulert, tar vi alle våre innholdsdeler - men ikke den aller første - og gjemmer dem. Dette fjerner de andre to RSS-feeds.
Deretter kjører vi en funksjon når en bruker klikker på en av våre navigasjonskoblinger. Innenfor denne funksjonen fjerner vi klassen "valgt" fra alle våre navigeringsanker. Denne klassen brukes til å gi noen visuell tilbakemelding om hvilken kategori som er valgt. I dette nakne eksemplet har jeg rett og slett gjort teksten fet for den aktuelle kategorien. Nå legger vi denne klassen spesifikt til ankermerket som ble klikket - $ (dette) .addClass ('valgt');
Når vi flytter sammen, lager vi en variabel som heter 'href' og gjør den lik den href av ankermerket som ble klikket. Hvis vi henviser tilbake til dokumentet, kobler disse navigeringsmerkene til seksjonene i hovedinnholdet - "# content_1", "# content_2", "# content_3". Tanken er at hvis brukeren ikke har Javascript aktivert, vil disse koblingene rulle brukeren direkte til riktig feed.
Dette tjener dessuten en annen unik fordel. Tenk på dette: NETTUTS navigeringsmerke har sin URL satt til "# content_1". I hovedinnholdet er div med et ID for"content_1"huser NETTUTS RSS-feed. Så ... vi har gjort en sammenheng mellom de to! Jeg håper det er fornuftig, det er litt vanskelig å beskrive. Se på skjermbildet hvis jeg ikke illustrerte dette punktet godt nok.
Jeg skal bruke "splitt" for å fjerne # -tegnet. Split fungerer på samme måte som PHPs eksploderingsfunksjon gjør.
var delt = href.split ('#'); Nå vil "split [1]" -settet være lik «content_1». Det endelige trinnet er å finne hovedinnholdet div som har det nøyaktige ID og fade det i henhold til det.
$ ('# mainContent div #' + split [1]). fadeIn (); Jeg håper denne opplæringen har hjulpet deg. Når du kombinerer designet fra Collis 'veiledning med logikken fra denne, finner du deg selv med et fantastisk tillegg til sidebjelken. Selv om denne tut bør tjene som det første trinnet for nybegynnere. Jeg ønsker alle dere velkommen til å finjustere koden for å gjøre det mer avansert og feilbestemt. Jeg gikk ikke inn i den siste delen for å spare noe for del 2! : p
