Share
Een tagwolk is een geweldige manier om bezoekers van uw blog te laten zien welke belangrijke interessegebieden beschikbaar zijn. Er is ook aanvullende informatie in een tagwolk. Afgezien van de daadwerkelijke links zelf, die mensen een idee geven van de onderwerpen die uw site behandelt, kunnen ze ook laten zien hoe populair de verschillende onderwerpen zijn. Een ander groot voordeel van tagwolken is dat ze kunnen worden gebruikt om de frequentie van alles te beschrijven; je kunt links naar artikelen, blogposts, afbeeldingen, video's of iets anders dat je in overvloed hebt op je site.
Tagwolken zijn gemakkelijk slecht te doen; of vanuit een ontwerpperspectief of vanuit een codeperspectief. Dankzij jQuery is het ook gemakkelijk om goed te doen. We zullen de hete nieuwe 1.3-versie van jQuery gebruiken voor dit voorbeeld en zullen met PHP en MySql werken om een JSON-feed van onze tags te leveren. De tags in de eerste plaats in een database krijgen valt buiten het bestek van deze tutorial, maar het is eenvoudig genoeg om ze op te halen en door te geven aan een wachtende pagina via AJAX.
Laten we een begin maken op de pagina waarop de tagwolk wordt getoond; in een nieuw bestand in uw teksteditor maakt u de volgende pagina:
jQuery Tag Cloud Tag Cloud
Sla deze op als tagcloud.html. In dit stadium hebben we bijna niets op de pagina, alleen een eenvoudige container voor de tagwolk en een kop van het tweede niveau binnen de container. Alle andere elementen die we nodig hebben, kunnen worden gemaakt wanneer en wanneer ze nodig zijn. We linken naar een stylesheet in de kop voor wat styling die we later zullen toevoegen, en aan het einde van de body linken we naar jQuery. We maken de aanvraag voor het JSON-antwoord in een aangepast scriptblok na de verwijzing naar jQuery.
We gebruiken de $ alias om de getJSON jQuery-methode aan te roepen, wat een abstractie op een hoger niveau is van de ajax-methode; Normaal worden jQuery-methoden aangeroepen op objecten die verwijzingen naar elementen zijn, maar omdat we niet naar elementen verwijzen, kunnen we de jQuery-alias in plaats daarvan gebruiken. Dit betekent ook dat het jQuery-object niet door de methode wordt geretourneerd. In plaats daarvan wordt de xmlHTTPRequest doorgegeven.
De getJSON-methode accepteert in dit voorbeeld twee argumenten (hoewel er desgewenst meer kan worden gebruikt); de eerste is de URL waarnaar we het verzoek doen. Omdat we een JSON-object ontvangen, is het logisch om getJSON te gebruiken. We zouden de ajax-methode kunnen gebruiken, maar zouden dan meer eigenschappen van het verzoek moeten configureren (zoals het gegevenstype), dus als we dit gebruiken, besparen we wat tijd en codering. Aan het einde van de URL geven we een JSONP-callback op -? Callback =? - waarmee de browser het JSON-object direct kan manipuleren, zelfs als het afkomstig is van een ander domein, zonder enige verwerking aan de serverkant.
Het tweede argument is de callback-functie die we willen uitvoeren zodra het object naar de pagina is teruggekeerd. We hebben nog geen enkele code in deze functie gezet, omdat we het JSON-object niet hebben om mee te werken. We kunnen snel terug naar deze pagina zodra we de PHP hebben geschreven. Ik heb zojuist gezegd dat er geen server-side-verwerking nodig is bij het werken met JSONP-callbacks, en toch gaan we nu wat PHP schrijven. Dit is alleen omdat niemand de data levert die we willen. Dus we moeten het zelf creëren. Als iemand een JSON-feed van populaire tags levert, kunnen we nog steeds dezelfde jQuery-code gebruiken om deze aan te vragen en te verwerken.
U moet toegang hebben tot een webserver om het bestand uit te voeren dat we gaan maken, maar dit kan uw eigen lokale webserver zijn die u voor ontwikkeling gebruikt, of het kan de server van uw site of blog zijn wordt gehost op. Voeg op een nieuwe pagina in uw teksteditor de volgende code toe:
Sla deze op als tagcloud.php. Voor dit voorbeeld neem ik aan dat u MySQL hebt geïnstalleerd en geconfigureerd en een database hebt opgezet met de naam tagcloud. In deze database ga ik er ook van uit dat er een tabel is met de naam tags. Deze tabel bevat rijen van de tags en de frequentie van de occurrences van deze tags. Ik wil benadrukken dat dit geen code op productieniveau is omdat veiligheid geen factor in het ontwerp is geweest; we hebben ergens een plek nodig om onze AJAX-reactie te krijgen in dit voorbeeld en deze code zal ons dat ergens geven.
Laten we kort kijken naar wat we hebben gedaan.
// verbindingsinformatie $ host = "localhost"; $ user = "root"; $ wachtwoord = "uw_wachtwoord_hier"; $ database = "tagcloud";
Eerst stellen we de verbindingsinformatie in die we nodig hebben om verbinding te maken met de database. Zorg dat u your_password_here vervangt door het daadwerkelijke wachtwoord dat u hebt ingesteld om toegang te krijgen tot MySQL. Vervolgens maken we verbinding met de database en stellen we de vraag in die we gebruiken om toegang te krijgen tot de gegevens uit de labeltabel.
// start json-object $ json = "(tags: ["; // doorloop en retourneer resultaten voor ($ x = 0; $ x < mysql_num_rows($query); $x++) $row = mysql_fetch_assoc($query); //continue json object $json .= "tag:'" . $row["tag"] . "',freq:'" . $row["frequency"] . "'";
Vervolgens maken we de tekenreeks waarmee het JSON-object wordt gestart, voordat deze door elke rij in de tabel wordt herhaald en de query uitvoert. We blijven de JSON-reeks binnen de for-lus bouwen en voegen de gegevens uit beide velden van de huidige rij toe als eigenschappen en waarden.
// voeg een komma toe als dit niet de laatste rij is, sluit haakjes als is als ($ x < mysql_num_rows($query) -1) $json .= ","; else $json .= "])";
We voeren een eenvoudige controle uit op elke iteratie van de lus met behulp van de voorwaardelijke om te zien of we de laatste rij in de tabel aan het lezen zijn; als we dat niet zijn, gebruiken we een komma om elk object te scheiden, als we het object sluiten. Het formaat van het JSON-object bestaat uit afzonderlijke recordobjecten binnen een enkele containergroep binnen een buitenobject.
// stuur JSON terug met GET voor JSONP callback $ response = $ _GET ["callback"]. $ Json; echo $ antwoord; // close-verbinding mysql_close ($ server);
Vervolgens herhalen we het antwoord terug naar de client met behulp van een GET-verzoek; dit is nodig om gebruik te maken van de jsonp callback op onze hoofdpagina. We moeten de naam opgeven van de URL-parameter die volgt op de URL van de in JavaScript, die in dit voorbeeld gewoon terugbellen is. We kunnen het echter niet de naam noemen van de functie die we willen doorgeven, omdat de functie anoniem is. jQuery zal dit voor ons afhandelen en ervoor zorgen dat de gegevens worden doorgegeven aan de juiste functie.
Zodra we klaar zijn, sluiten we de verbinding. In dit stadium kunnen we nog steeds niets zien op de pagina, maar als u het uitvoert vanuit een inhoudservicemap van uw webserver en het NET-tabblad van Firebug gebruikt, kunt u zien welke gegevens worden teruggestuurd naar de pagina:
Nu we wat JSON hebben om mee te werken, laten we teruggaan naar de HTML-pagina en er iets mee doen. Onze eerste taak is om het te verwerken om de gegevens te extraheren; in tagcloud.html, verwijder de reactie die we achterlieten in de callback en voeg de volgende code toe:
Accentsconagua
// maak een lijst voor tag links $ ("
