Share
În aprilie, Collis Ta'eed, CEO al Envato, a scris un tutorial fantastic cu privire la proiectarea unei structuri tabulare utilizând CSS / HTML / JS.
Dacă nu ați făcut-o deja, am 100% recomandă să o revedeți. Cu toate acestea, tragerea dinamică a unui flux RSS a depășit sfera acestui articol. În tutorialul video de astăzi, vă voi arăta exact cum să faceți acest lucru folosind PHP. La aproximativ patruzeci și cinci de minute în lungime, poate doriți să faceți o scurtă "pauză de baie pre-ecranată". De asemenea, ați putea dori să apucați unele stafide.
Vom crea un sistem de filă pentru trei fluxuri RSS unice:
Vrem să importăm dinamic aceste fluxuri în documentul nostru. Scriptul nostru de servere de azi de astăzi va fi PHP, iar noi vom folosi câteva jQuery pentru a crea structura filelor.
* Notă - intenția acestui tutorial este să demonstreze activitatea de back-end implicată. După cum am menționat anterior, Collis a creat deja o piele minunată. Așa cum programarea a fost dincolo de sfera acestui tutorial, lucrul la "design" va depăși domeniul de aplicare al acestui articol. Pentru a menține lucrurile cât mai curate și "cât mai clare", vom folosi forma cea mai goală a unei structuri de file - vorbind în termeni de design.
Deschideți editorul de cod preferat și creați următoarele foldere / fișiere. Fișierele PHP pot fi goale pentru moment.
Deschideți fișierul "functions.php". Vom crea o singură funcție relativ simplă. Mai întâi, copiați în următorul cod. După aceea, continuați să citiți pentru analiza codului.
"foreach ($ x-> canal-> element ca intrare $) echo"
Mai întâi, creăm o funcție numită getFeed (). Structura de bază a oricărei funcții PHP este:
funcția someName ($ parameters) ... some method
Apoi, creăm o variabilă numită "$ content" și o facem egală cu rezultatul: file_get_contents ($ feed_url).
"file_get_contents" este modul preferat de a citi conținutul unui fișier într-un șir. "
Acum că înțelegeți definiția, trebuie doar să treceți în dosarul nostru. Avem două opțiuni. În primul rând, am putea trece într-un șir la feed-ul nostru RSS - cum ar fi:
file_get_contents ( "http://feedproxy.google.com/nettuts");
Ar fi bine, cred. Metoda va citi în mod corect fluxul RSS și va stoca rezultatele în variabila noastră "$ content". Dar, ar trebui să avem mereu cuvântul "reutilizabilitate" care se ascunde în spatele minții noastre atunci când lucrăm.
Imaginați-vă că avem multe pagini diferite în aplicația noastră web care doresc să numească această funcție "getFeed ()". Dar, dacă vor să apuce diferite furaje? Nu ar fi bine dacă am putea trece url în funcție în loc să-l codificăm greu? Desigur, ar fi! În consecință, în loc să introducem calea, vom folosi pur și simplu o variabilă numită "$ feed_url".
file_get_contents ($ FEED_URL);
Pentru a folosi această variabilă dintr-o sursă externă, trebuie să ne asigurăm că funcția acceptă un parametru.
funcția getFeed ($ feed_url)
Acum, când numim funcția, putem face așa:
Apoi, vom crea un nou exemplu ($ x) din SimpleXmlElement. În paranteză, vom trece în variabila noastră de conținut $.
$ x = noul SimpleXmlElement ($ content);
În cele din urmă, trebuie să trecem prin feedul RSS și să extragem informațiile pe care le dorim.
ecou "
Începem prin etichetarea etichetei cu listă de deschidere neordonată. Apoi, vom trece prin fiecare intrare în feedul nostru RSS utilizând o declarație "foreach". Această afirmație spune, în principiu, "creați o variabilă numită intrare $ care va conține valoarea fiecărei etichete în elementul RSS.
Lucrul minunat despre feed-urile RSS este că toate pun în aplicare aceeași structură de bază. Fiecare feed conține o etichetă "canal" de împachetare. Apoi, fiecare postare din fluxul dvs. va fi înfășurată într-o etichetă "element". Toate informațiile de care avem nevoie pot fi accesate în acest fel.
În cadrul declarației noastre "foreach", trebuie doar să extragem linkul și titlul și să îl plasăm într-o etichetă "li". Eticheta "link" conține un link către postarea efectivă. Eticheta titlului conține, în mod evident, titlul postării. Asta e tot ce vom avea nevoie pentru acest proiect, dar vă sfătuiesc să revedeți câteva dintre celelalte informații care vă sunt disponibile. Pur și simplu vizualizați sursa oricărui feed RSS pentru a analiza structura.
Logica noastră este acum completă. Acum trebuie să creăm pagina noastră index.php și să sunăm la această funcție.
Inserați următorul cod pe pagina index.php.
- NETTUTS
- ThemeForest
- screencast
Așa cum am spus mai devreme, nu vreau să merg prea mult în "design". Collis a făcut deja asta pentru tine. Consultați acel tutorial pentru "proiectul de remediere". Dar pentru o privire de ansamblu rapidă, stocăm legăturile noastre de navigare într-o listă neordonată care are un id de "nav". În secțiunea noastră principală de conținut, avem trei divuri numite "content_1", "content_2" și, respectiv, "content_3". În interiorul fiecărei diviziuni se numără funcția noastră "getFeed" - și treceți în diferite url-uri pentru fluxurile noastre RSS.
Adăugați în câteva CSS extrem de de bază și obțineți acest lucru:
Deschideți fișierul "myScripts.js" și inserați-l în următorul cod:
Accentsconagua
$ (') ($) ($ (principalContent div: nu (: prima)') ('select'); $ (this) .addClass ('selectat'); href.split ('#'); $ (' #mainContent div ') hide (); $ (' # mainContent div # '+ split [1]). Când documentul este gata să fie manipulat, vom lua toate diviziile noastre de conținut - dar nu și pe prima - și ascundeți-le. Aceasta va elimina cele două două fluxuri RSS.
Apoi, atunci când un utilizator face clic pe unul dintre legăturile noastre de navigare, vom rula o funcție. În cadrul acestei funcții, vom elimina clasa "selectată" din toate etichetele noastre de ancorare pentru navigație. Această clasă este utilizată pentru a furniza feedback vizual despre ce filă este selectată în prezent. În acest exemplu gol, am făcut pur și simplu textul îndrăzneț pentru acea filă. Acum adăugăm această clasă în mod specific la eticheta de ancorare la care a fost făcut clic - $ (this) .addClass ("selectat");
Mutându-ne, creăm o variabilă numită "href" și o facem egală cu href-ul etichetei de ancorare pe care a fost făcut clic. Dacă ne referim înapoi la documentul nostru, aceste etichete de navigare se leagă de secțiunile din conținutul principal - "# content_1", "# content_2", "# content_3". Ideea este că, dacă utilizatorul nu are Javascript activat, aceste linkuri vor derula direct utilizatorul la feed-ul corespunzător.
Acest lucru oferă un alt avantaj unic. Luați în considerare acest lucru: eticheta de navigare NETTUTS are adresa URL stabilită la "# content_1"Acum, în secțiunea de conținut principal, div cu un id de"content_1"găzduiește fluxul RSS NETTUTS ... Deci ... am făcut o legătură între cei doi! Sper că are sens, e puțin greu de descris ... Consultați scenariul dacă nu am ilustra acest punct suficient de bine.
Voi folosi "split" pentru a elimina semnul #. Split funcționează în același mod ca și funcția de explodare a PHP.
var split = href.split ('#'); Acum, matricea "split [1]" va fi egală cu "content_1". Ultimul pas este să găsiți divulgiul principal de conținut care are acel id exact și să îl estompeze corespunzător.
$ ('# mainContent div #' + împărțire [1]) fadeIn (); Sper că acest tutorial v-a ajutat. Odată ce combinați designul din tutorialul lui Collis cu logica de la acesta, veți găsi un plus fantastic în bara laterală. Deși acest tut trebuie să servească drept prim pas pentru începători. Vă urez bun venit tuturor pentru a îmbunătăți codul pentru ao face mai avansată și mai greu de demonstrat. Nu am intrat în ultima parte pentru a salva ceva pentru Partea a 2-a! : p
