Share
Tillbaka i april skrev Collis Ta'eed - VD för Envato - en fantastisk handledning om att utforma en flikstruktur med hjälp av CSS / HTML / JS.
Om du inte redan har det, rekommenderar jag 100% att du granskar den. Men dynamiskt att dra in ett RSS-flöde var bortom omfattningen av den artikeln. I dagens video handledning visar jag dig exakt hur man gör det här med PHP. Vid ungefär fyrtiofem minuter i längden, kanske du vill ta en snabb "pre-screencast badrumsavbrott". Du kanske också vill ta några russin.
Vi skapar ett fliksystem för tre unika RSS-flöden:
Vi vill dynamiskt importera dessa flöden till vårt dokument. Vårt server-sidoskript av val idag kommer att vara PHP, och vi använder vissa jQuery för att skapa flikstrukturen.
* Obs! - Avsikten med denna handledning är att visa det bakomliggande arbetet. Som tidigare nämnts har Collis redan skapat en underbar hud. Precis som programmeringen var bortom omfattningen av den handledningen kommer arbetet med "design" att ligga utanför tillämpningsområdet för denna artikel. För att hålla saker så rena och "till den punkten" som möjligt använder vi den nakna formen av en flikstruktur - talar vad gäller designen.
Öppna din favorit kodredigerare och skapa följande mappar / filer. PHP-filerna kan vara tomma för nu.
Öppna filen "functions.php". Vi skapar bara en funktion som är relativt enkel. Först, kopiera i följande kod. Därefter fortsätt läsa för kodanalysen.
"; foreach ($ x-> channel-> item as $ entry) echo"
Först skapar vi en funktion som heter getFeed (). Grundstrukturen för någon PHP-funktion är:
funktion someName ($ parametrar) ... någon metod
Därefter skapar vi en variabel som heter "$ content" och gör det lika med resultatet av: file_get_contents ($ feed_url).
"file_get_contents" är det föredragna sättet att läsa innehållet i en fil i en sträng. "
Nu när du förstår definitionen behöver vi bara passera i vår fil. Vi har två val. Först kan vi skicka in en sträng till vårt RSS-flöde - som så:
file_get_contents ( "http://feedproxy.google.com/nettuts");
Det skulle fungera bra, antar jag. Metoden skulle korrekt läsa RSS-flödet och lagra resultaten i vår "$ content" -variabel. Men vi bör alltid ha ordet "återanvändbarhet" lurar i ryggen av våra sinnen när vi arbetar.
Föreställ dig att vi har många olika sidor i vår webbapplikation som vill kalla den här "getFeed ()" -funktionen. Men, om de vill ta tag i olika flöden? Skulle det inte vara trevligt om vi kunde vidarebefordra url till funktionen istället för att koda det hårt? Självklart skulle det! Följaktligen använder vi, snarare än att mata in sökvägen, en variabel som heter "$ feed_url".
file_get_contents ($ FEED_URL);
För att kunna använda denna variabel från en extern källa måste vi se till att funktionen accepterar en parameter.
funktion getFeed ($ feed_url)
Nu när vi kallar funktionen kan vi göra så här:
Därefter skapar vi en ny instans ($ x) av SimpleXmlElement. Inom parentesen passerar vi i vår $ innehållsvariabel.
$ x = nytt SimpleXmlElement ($ innehåll);
Slutligen måste vi springa igenom RSS-flödet och extrahera den information vi önskar.
eko "
Vi börjar med att echo the opening unordered list taggen. Därefter cyklar vi igenom varje post i vårt RSS-flöde med ett "foreach" -förklaring. Detta uttalande säger i grunden "Skapa en variabel som heter $ entry som kommer att innehålla värdet för varje objektetikett i vårt RSS-flöde.
Det underbara med RSS-flöden är att de alla genomför samma grundläggande struktur. Varje matning innehåller en omslagskanal-tagg. Sedan läggs varje inlägg i ditt flöde in i en "objekt" -tagg. All information som vi behöver kan nås på så sätt.
Inom vårt "foreach" uttalande behöver vi bara extrahera länken och titeln och placera den inom en "li" -tagg. Länken "Länk" innehåller en länk till den faktiska posten. Titeln taggar uppenbarligen titeln på inlägget. Det är allt vi behöver för det här projektet, men jag rekommenderar dig att granska några av de övriga uppgifterna som är tillgängliga för dig. Visa bara källan till ett RSS-flöde för att analysera strukturen.
Vår logik är nu klar. Vi behöver nu skapa vår index.php-sida och ringa funktionen.
Klistra in följande kod på din index.php-sida.
- NETTUTS
- ThemeForest
- screencasts
Som jag sa tidigare vill jag inte gå för mycket in i "designen". Collis har redan gjort det för dig. Se den här handledningen för din "designfix". Men för en snabb överblick lagrar vi våra navigeringslänkar inom en orörd lista med ett "nav" -t id. I vårt huvudinnehållsavsnitt har vi tre divs med namnet "content_1", "content_2" respektive "content_3". Inne i varje division är vi kallade vår "getFeed" -funktion - och skickas i de olika webbadresserna till våra RSS-flöden.
Lägg till i några extremt grundläggande CSS och du får det här:
Öppna filen "myScripts.js" och klistra in i följande kod:
Accentsconagua
$ (funktion () $ ('# mainContent div: inte (: först)'). hide (); $ ('ul li a'). klicka (funktion () $ ('ul # nav li a') .removeClass ('selected'); $ (detta) .addClass ('valda'); var href = $ (detta) .attr ('href'); var split = href.split ('#'); $ #mainContent div '). hide (); $ (' # mainContent div # '+ split [1]) .fadeIn (); return false;);); När dokumentet är redo att manipuleras tar vi alla våra innehållsdelar - men inte den allra första - och gömmer dem. Detta kommer att ta bort de andra två RSS-flödena.
När en användare klickar på en av våra navigeringslänkar kör vi en funktion. Inuti denna funktion tar vi bort klassen "vald" från alla våra navigeringsanmärkningar. Den här klassen används för att ge visuell återkoppling om vilken flik som för närvarande är vald. I det här nakna exemplet har jag helt enkelt gjort texten djärv för den aktuella fliken. Nu lägger vi till den här klassen specifikt till ankerkoden som klickades - $ (detta) .addClass ('selected');
När vi flyttar skapar vi en variabel som heter "href" och gör den lika med href på ankerkoden som klickades. Om vi hänvisar till vårt dokument länkar dessa navigeringsmärken till sektionerna i huvudinnehållet - "# content_1", "# content_2", "# content_3". Tanken är att om användaren inte har Javascript aktiverat kommer dessa länkar att rulla användaren direkt till rätt flöde.
Detta tjänar dessutom en annan unik fördel. Tänk på följande: NETTUTS navigerings tagg har sin URL inställd på "# content_1". I huvudinnehållet delas div med ett ID för"content_1"husar vårt NETTUTS RSS-flöde. Så ... vi har gjort en koppling mellan de två! Jag hoppas det är meningsfullt, det är lite svårt att beskriva. Se på skärmbilden om jag inte illustrerade denna punkt tillräckligt bra.
Jag ska använda "split" för att ta bort # tecknet. Delar fungerar på samma sätt som PHP: s exploderingsfunktion gör.
var split = href.split ('#'); Nu är "split [1]" -uppsättningen lika med "content_1". Det sista steget är att hitta huvudinnehållet div som har det exakta ID och blekna det i enlighet med det.
$ ('# mainContent div #' + split [1]). fadeIn (); Jag hoppas att denna handledning har hjälpt dig. När du kombinerar designen från Collis handledning med logiken från den här, hittar du dig själv med ett fantastiskt tillägg till din sidofält. Även om denna tut bör tjäna som första steg för nybörjare. Jag välkomnar er alla för att förfina koden för att göra den mer avancerad och felfri. Jag gick inte in i den senare delen för att spara något för del 2! : p
