Share
Im April schrieb Collis Ta'eed - CEO von Envato - ein fantastisches Tutorial zum Entwerfen einer Tab-Struktur mit CSS / HTML / JS.
Wenn Sie es noch nicht getan haben, empfehle ich Ihnen 100%, es zu überprüfen. Das dynamische Abrufen eines RSS-Feeds würde jedoch den Rahmen dieses Artikels sprengen. Im heutigen Video-Tutorial zeige ich Ihnen genau, wie Sie dies mit PHP tun. Nach etwa fünfundvierzig Minuten möchten Sie vielleicht eine kurze "Pause vor dem Screencast-Bad" machen. Vielleicht möchten Sie auch ein paar Rosinen mitnehmen.
Wir erstellen ein Registersystem für drei eindeutige RSS-Feeds:
Wir möchten diese Feeds dynamisch in unser Dokument importieren. Unser serverseitiges Skript der Wahl wird heute PHP sein, und wir verwenden etwas jQuery, um die Tab-Struktur zu erstellen.
* Hinweis - In diesem Lernprogramm soll die Backend-Arbeit demonstriert werden. Wie bereits erwähnt, hat Collis bereits eine wunderbare Haut geschaffen. Ebenso wie die Programmierung über den Rahmen dieses Tutorials hinausging, wird die Arbeit an "Design" den Rahmen dieses Artikels sprengen. Um die Dinge so sauber und "auf den Punkt" wie möglich zu halten, verwenden wir die nackteste Form einer Registerkartenstruktur - was das Design angeht.
Öffnen Sie Ihren bevorzugten Code-Editor und erstellen Sie die folgenden Ordner / Dateien. Die PHP-Dateien können vorerst leer sein.
Öffnen Sie Ihre Datei "functions.php". Wir werden nur eine relativ einfache Funktion erstellen. Kopieren Sie zunächst den folgenden Code. Danach lesen Sie weiter für die Code-Analyse.
"; foreach ($ x-> channel-> item als $ entry) echo"
Zuerst erstellen wir eine Funktion namens getFeed (). Die grundlegende Struktur einer PHP-Funktion ist:
Funktion someName ($ parameters) … einige Methode
Als Nächstes erstellen wir eine Variable mit dem Namen "$ content" und machen sie gleich dem Ergebnis von: file_get_contents ($ feed_url)..
"file_get_contents" ist die bevorzugte Methode, um den Inhalt einer Datei in eine Zeichenfolge zu lesen. "
Nachdem Sie die Definition verstanden haben, müssen Sie nur noch unsere Datei übergeben. Wir haben zwei Möglichkeiten. Zuerst könnten wir einen String an unseren RSS-Feed übergeben - wie folgt:
Accentsconagua
file_get_contents ("http://feedproxy.google.com/nettuts"); Das würde gut funktionieren, nehme ich an. Die Methode würde den RSS-Feed korrekt lesen und die Ergebnisse in unserer Variablen "$ content" speichern. Aber wir sollten immer das Wort "Wiederverwendbarkeit" im Hinterkopf haben, wenn wir arbeiten.
Stellen Sie sich vor, wir haben viele verschiedene Seiten in unserer Webanwendung, die diese "getFeed ()" - Funktion aufrufen möchten. Aber was ist, wenn sie verschiedene Feeds greifen möchten? Wäre es nicht schön, wenn wir die URL in die Funktion einbinden könnten, anstatt sie hart zu codieren? Natürlich wäre es! Anstatt den Pfad einzugeben, verwenden wir einfach eine Variable namens "$ feed_url"..
file_get_contents ($ feed_url);
Um diese Variable von einer externen Quelle zu verwenden, müssen Sie sicherstellen, dass die Funktion einen Parameter akzeptiert.
Funktion getFeed ($ feed_url)
Wenn wir nun die Funktion aufrufen, können wir dies folgendermaßen tun:
Als Nächstes erstellen wir eine neue Instanz ($ x) von SimpleXmlElement. Innerhalb der Klammer übergeben wir unsere Variable $ content.
$ x = neues SimpleXmlElement ($ content);
Schließlich müssen wir den RSS-Feed durchgehen und die gewünschten Informationen extrahieren.
Echo "
Wir beginnen mit dem Echo des öffnenden ungeordneten Listen-Tags. Anschließend durchlaufen wir jeden Eintrag in unserem RSS-Feed mit einer "foreach" -Anweisung. Diese Anweisung besagt im Wesentlichen: "Erstellen Sie eine Variable namens $ entry, die den Wert jedes item-Tags in unserem RSS-Feed enthält.
Das Wunderbare an RSS-Feeds ist, dass sie alle dieselbe Grundstruktur implementieren. Jeder Feed enthält ein umschließendes "channel" -Tag. Dann wird jeder Eintrag in Ihrem Feed in ein "item" -Tag gepackt. Auf alle Informationen, die wir benötigen, kann auf diese Weise zugegriffen werden.
In unserer "foreach" -Anweisung müssen wir lediglich den Link und den Titel extrahieren und in ein "li" -Tag einfügen. Das Tag "link" enthält einen Link zur aktuellen Buchung. Das Titel-Tag enthält offensichtlich den Titel des Beitrags. Das ist alles, was wir für dieses spezielle Projekt benötigen, aber ich würde Ihnen raten, einige der anderen Informationen zu überprüfen, die Ihnen zur Verfügung stehen. Sehen Sie sich einfach die Quelle eines RSS-Feeds an, um die Struktur zu analysieren.
Unsere Logik ist jetzt vollständig. Nun müssen wir unsere index.php-Seite erstellen und die Funktion aufrufen.
Fügen Sie den folgenden Code in Ihre index.php-Seite ein.
- NETTUTS
- ThemeForest
- Screencasts
Wie ich bereits sagte, möchte ich nicht zu sehr auf das "Design" eingehen. Collis hat das schon für Sie getan. In diesem Tutorial finden Sie Ihren "Design Fix". Für einen schnellen Überblick speichern wir unsere Navigationslinks jedoch in einer ungeordneten Liste mit der ID "nav". In unserem Hauptinhalt haben wir drei Divs mit den Namen "content_1", "content_2" und "content_3". Innerhalb jeder Abteilung rufen wir unsere "getFeed" -Funktion auf - und geben die verschiedenen URLs an unsere RSS-Feeds weiter.
Fügen Sie extrem einfaches CSS hinzu und Sie erhalten folgendes:
Öffnen Sie Ihre Datei "myScripts.js" und fügen Sie den folgenden Code ein:
$ (function () $ ('# mainContent div: nicht (: zuerst)'). 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;);); Wenn das Dokument zur Bearbeitung bereit ist, greifen wir alle unsere Inhaltsdivisionen auf - aber nicht die allerersten - und blenden sie aus. Dadurch werden die zweiten beiden RSS-Feeds entfernt.
Wenn ein Benutzer auf einen unserer Navigationslinks klickt, wird als Nächstes eine Funktion ausgeführt. In dieser Funktion entfernen wir die "ausgewählte" Klasse aus allen Navigationsanker-Tags. Diese Klasse wird verwendet, um visuelles Feedback zu geben, welche Registerkarte momentan ausgewählt ist. In diesem nackten Beispiel habe ich den Text für diese bestimmte Registerkarte einfach fett dargestellt. Jetzt fügen wir diese Klasse speziell zu dem Ankertag hinzu, auf den geklickt wurde - $ (this) .addClass ('selected');
Wenn wir weitergehen, erstellen wir eine Variable namens 'href' und machen sie gleich der href des Ankertags, auf das geklickt wurde. Wenn wir auf unser Dokument zurückgreifen, verlinken diese Navigations-Tags auf die Abschnitte des Hauptinhalts - "# content_1", "# content_2", "# content_3". Die Idee ist, dass, wenn der Benutzer Javascript nicht aktiviert hat, diese Links den Benutzer direkt zum richtigen Feed scrollen.
Dies bietet zusätzlich einen weiteren einzigartigen Vorteil. Beachten Sie Folgendes: Für das NETTUTS-Navigations-Tag ist die URL auf "# content_1". Nun, im Hauptinhalt Abschnitt, das Div mit einer ID von"content_1"beherbergt unseren NETTUTS-RSS-Feed. Also ... wir haben eine Verbindung zwischen den beiden hergestellt! Ich hoffe, dass dies sinnvoll ist; es ist etwas schwer zu beschreiben. Wenn ich diesen Punkt nicht gut genug illustriert habe, kann man sich den Screencast ansehen.
Ich werde "split" verwenden, um das # Zeichen zu entfernen. Split funktioniert genauso wie die Explosionsfunktion von PHP.
var split = href.split ('#'); Das Array "split [1]" entspricht nun "content_1". Der letzte Schritt besteht darin, den Hauptinhalt div mit dieser genauen ID zu finden und ihn entsprechend einzublenden.
$ ('# mainContent div #' + split [1]). fadeIn (); Ich hoffe, dieses Tutorial hat Ihnen geholfen. Wenn Sie das Design aus dem Collis-Tutorial mit der Logik dieses Tutorials kombinieren, erhalten Sie eine fantastische Ergänzung in Ihrer Seitenleiste. Dieses Tut sollte jedoch als erster Schritt für Anfänger dienen. Ich begrüße Sie alle, den Code zu verfeinern, um ihn weiterzuentwickeln und den Fehler zu überprüfen. Ich habe mich nicht für den zweiten Teil entschieden, um etwas für Teil 2 zu sparen! : p
