So funktioniert die Quotes On Design JavaScript API

Ich zögere, es eine "API" zu nennen, da ich ziemlich sicher bin, dass dies nicht ganz dem entspricht, was "API" heute bedeutet. Aber es ist eine Programmierung, die mit einer Anwendung interagiert, also was auch immer. Letzte Woche habe ich das JavaScript vorgestellt, das Sie auf Ihrer Seite einfügen können, um ein zufälliges Design-Zitat auf Ihrer Seite hinzuzufügen von Quotes on Design. Heute werden wir uns ansehen, wie es erstellt wurde und wie es funktioniert. Danke nochmals an David Walsh, der mir bei der Erstellung geholfen hat.

Wie funktioniert es?

Ich wollte wirklich sicherstellen, dass es so einfach wie möglich zu verwenden ist, was im Grunde bedeutete, dass es ein "Snippet" sein musste. Es musste auf jeden Fall JavaScript sein, da dies uns die Möglichkeit gibt, das DOM zu verändern und das Zitat nach Bedarf einzufügen. Zuerst habe ich reines JavaScript verwendet. Ich habe es den RSS-Feed der Website lesen lassen und zufällig eines davon eingefügt. Es stellte sich als schmerzhaft langsam heraus, erforderte eine JavaScript-Bibliothek und war auf die letzten 10 hinzugefügten Zitate beschränkt.

David schlug vor, die JavaScript-Datei tatsächlich zu einer PHP-Datei zu machen. Was?

Tricky Tricky – Das JavaScript ist eigentlich PHP

Letztendlich muss das JavaScript tatsächlich JavaScript sein. Aber wir können die benötigten Informationen zuerst mit PHP sammeln und dann dynamischechoausgeben, was wir brauchen. Sie können dies in Aktion sehen, wenn Sie die JS-Datei direkt aufrufen.

Damit der Server es als PHP erkennt

Zuerst müssen wir sicherstellen, dass der Server die Datei als PHP interpretiert, trotz ihrer .js-Dateiendung. Dies tun wir mit ein wenig HTAccess-Magie

<FilesMatch "^.*?api.*?$">
SetHandler php-script
</FilesMatch>

Ich habe diese .htaccess-Datei im Verzeichnis "api" auf dem Server platziert. Im Wesentlichen besagt sie, dass jede Datei mit "api" im Namen als PHP interpretiert werden soll. Dies funktioniert nur auf Apache-Servern und variiert von Server zu Server leicht. Dies ist, was für mich bei Media Temple (gs) funktioniert hat.

Damit der Browser es als JavaScript erkennt

Unsere Datei, api.js, ist nun bereit, auf dem Server als PHP interpretiert zu werden. Wir müssen nur noch sicherstellen, dass sie vom Browser immer noch als JavaScript gesehen wird. Machen wir das also, indem wir ganz oben dies einfügen:

<?php
 
    header('Content-Type: text/javascript');

?>

Die gewünschte JavaScript-Ausgabe

Bevor wir mit dem PHP beginnen, werfen wir einen Blick darauf, was wir letztendlich von dem JavaScript benötigen. Wir brauchen eine einfache Funktion, die diegetElementByIdMethode verwendet, um unser "quote"-Div anzusprechen, und dann dieinnerHTMLEigenschaft, um das Zitat in die richtige Markup-Struktur einzufügen.

function getQuote(id) { 
  document.getElementById(id).innerHTML = "<p class='qod-quote'>',QUOTE-GOES-HERE,'</p><p class='qod-author'><a href='',PERMALINK-GOES HERE,''>',AUTHOR-GOES-HERE,'</a></p>"; 
}

Machen Sie sich keine Sorgen um das QUOTE-GOES-HERE-Geschäft, dafür werden wir später das PHP benötigen. Dann müssen wir diese Funktion aufrufen, wenn die Host-Website geladen ist.

window.onload = getQuote("quote");

Daten mit PHP abrufen

Offensichtlich müssen wir die Lücken in der obigen Funktion mit tatsächlichen Daten füllen. Dafür benötigen wir das PHP. Die Daten befinden sich in einer WordPress-Datenbank, daher müssen wir uns mit dieser Datenbank verbinden und dann eine Abfrage formulieren, um das zu erhalten, was wir brauchen.

Mit der Datenbank verbinden

$link = mysql_connect('localhost','database_user','database_password');
mysql_select_db('database_name',$link);

Ein zufälliges Zitat abfragen

Das Folgende holt einen einzelnen zufälligen Eintrag aus der Datenbank. Vieles davon ist spezifisch für eine WordPress-Datenbank, daher machen wir spezielle Dinge wie die Sicherstellung, dass der Eintrag veröffentlicht ist und ein Beitrag ist (im Gegensatz zu einer Seite).

$query = 'SELECT post_content AS quote, post_title AS author, guid AS permalink FROM wp_posts WHERE post_status = 'publish' AND post_type = 'post' ORDER BY rand() LIMIT 1';
$result = mysql_query($query,$link) or die(mysql_error().': '.$query);

Ergebnis in ein Array umwandeln

$row = mysql_fetch_assoc($result);

Daten in Funktion einfügen

Wir haben bereits gesehen, wie das endgültige JavaScript aussehen soll, aber jetzt können wir es mit den richtigen Daten füllen! Die meisten Daten können wir direkt aus unserem $result-Array übernehmen, aber das Zitat muss ein wenig speziell bereinigt werden, um Sonderzeichen zu berücksichtigen.

$quote = str_replace('"','"',$row['quote']);

Und die endgültige Funktion, die wir einfachechoausgeben

echo 'function getQuote(id) { document.getElementById(id).innerHTML = "<p class='qod-quote'>',$quote,'</p><p class='qod-author'>',$row['author'],'</p>"; } window.onload = getQuote("quote");';

können. Wie Sie sehen können, nachdem wir die Funktion definiert haben, rufen wir sie während des onload-Ereignisses des Fensters auf, was sie auslöst, wenn die aufrufende Seite bereit ist.

Habe ich Optionen?

Nur eine: Wenn Sie den Permalink nicht auf Quotes on Design haben möchten, können Sie ihn deaktivieren, indem Sie einen Parameter (?link=no) an die URL anhängen. Noch ein cooler Grund, die PHP/JavaScript-Kombination zu verwenden!

<script type="text/javascript" src="http://quotesondesign.com/api/api.js?link=no"></script>

Dieser Code sollte ziemlich einfach anzupassen sein, um eine "API" für fast jeden WordPress-Blog hinzuzufügen.