Share
En taggsky er en fin måte å vise besøkende til bloggen på, de viktigste emnene av interesse som er tilgjengelige. Det er også tilleggsinformasjon i en tag-cloud. Bortsett fra de faktiske linkene selv, som gir folk en ide om de fagene som nettstedet ditt dekker, kan de også vise hvor populær de ulike fagene er. En annen flott ting om tag-skyer er at de kan brukes til å beskrive frekvensen av noe; Du kan lenke til artikler, blogginnlegg, bilder, video eller noe annet du har i overflod på nettstedet ditt.
Tag-skyer er enkle å gjøre dårlig; enten fra et designperspektiv eller fra et kodespektiv. Takket være jQuery er det også enkelt å gjøre det bra. Vi bruker den nye 1.3 versjonen av jQuery for dette eksempelet, og vi vil jobbe med PHP og MySql for å gi en JSON-feed av våre tagger. Å få taggene til en database i utgangspunktet er utenfor omfanget av denne opplæringen, men det er en enkel nok sak å hente og sende dem til en ventende side via AJAX.
La oss starte på siden som taggskyen vil bli vist på; i en ny fil i tekstredigerer opprett følgende side:
jQuery Tag Cloud Tag Cloud
Lagre dette som tagcloud.html. På dette stadiet har vi nesten ingenting på siden, bare en enkel beholder for tag-skyen og en 2-nivås overskrift inne i containeren. Eventuelle andre elementer vi trenger, kan opprettes når og når de kreves. Vi lenker til et stilark i hodet for noen styling som vi legger til senere, og i slutten av kroppen knytter vi til jQuery. Vi gjør forespørselen om JSON-responsen i et tilpasset skriptblokk etter referansen til jQuery.
Vi bruker $ aliasene til å ringe til getJSON jQuery-metoden, som er en høyere abstraksjon av ajax-metoden; Normalt kalles jQuery-metoder på objekter som refererer til elementer, men fordi vi ikke refererer til noen elementer, kan vi i stedet bruke jQuery-aliaset. Dette betyr også at jQuery-objektet ikke returneres av metoden. I stedet er xmlHTTPRequest sendt tilbake.
GetJSON-metoden godtar to argumenter i dette eksemplet (selv om flere kan brukes om nødvendig); den første er nettadressen som vi gjør forespørselen til. Som vi mottar et JSON-objekt, er det fornuftig å bruke getJSON. Vi kan bruke ajax-metoden, men må da konfigurere flere egenskaper til forespørselen (for eksempel dataType), slik at bruk av dette sparer litt tid og koding. På slutten av nettadressen angir vi en JSONP tilbakeringing -? Callback =? - som vil gjøre det mulig for nettleseren å manipulere JSON-objektet direkte, selv om det kommer fra et annet domene uten ytterligere server-sidebehandling.
Det andre argumentet er tilbakeringingsfunksjonen som vi vil utføre når objektet er returnert til siden. Vi har ikke satt noen kode i denne funksjonen, fordi vi ikke har JSON-objektet til å jobbe med. Vi kan komme tilbake til denne siden om en liten stund når vi har skrevet PHP. Jeg sa for et øyeblikk at det ikke er behov for server-sidebehandling når du jobber med JSONP-tilbakeringinger, og likevel skal vi gå av og skrive noen PHP. Dette er bare fordi ingen gir dataene vi vil, så vi må lage det selv. Hvis noen leverte en JSON-feed av populære tagger, kan vi fortsatt bruke den samme jQuery-koden til å be om og behandle den.
Du må ha tilgang til en webserver for å kunne kjøre filen som vi skal lage, men dette kan være din egen lokale webserver som du bruker til utvikling, eller det kan være serveren ditt nettsted eller blogg er vert på. I en ny side i teksteditoren legger du til følgende kode:
Lagre dette som tagcloud.php. For dette eksempelet antar jeg at du har MySql installert og konfigurert, og har oppsett en database kalt tagcloud. Innenfor denne databasen antar jeg også at det er et bord som heter tags. Denne tabellen vil ha rader av koder og hyppigheten av forekomstene av disse kodene. Jeg vil understreke at dette ikke er produksjonskode fordi sikkerhet ikke har vært en faktor i designen; vi trenger et sted for å få vårt AJAX-svar fra i dette eksemplet, og denne koden vil gi oss det som et sted.
La oss se på hva vi har gjort.
// tilkoblingsinformasjon $ host = "localhost"; $ user = "root"; $ password = "your_password_here"; $ database = "tagcloud";
Først oppretter vi tilkoblingsinformasjonen som vi trenger for å koble til databasen. Pass på at du erstatter your_password_here med det faktiske passordet du angir for å få tilgang til MySql. Vi kobler da til databasen og angir spørringen som vi skal bruke for å få tilgang til dataene fra etikettbordet.
// start json object $ json = "(tags: ["; // loop gjennom og returnerer resultater for ($ x = 0; $ x < mysql_num_rows($query); $x++) $row = mysql_fetch_assoc($query); //continue json object $json .= "tag:'" . $row["tag"] . "',freq:'" . $row["frequency"] . "'";
Deretter lager vi strengen som vil starte JSON-objektet, før du løper gjennom hver rad i tabellen og utfører spørringen. Vi fortsetter å bygge JSON-strengen i forløp, og legger til data fra begge feltene i den nåværende raden som egenskaper og verdier.
// legg til komma hvis ikke siste rad, lukkede parentes hvis er hvis ($ x < mysql_num_rows($query) -1) $json .= ","; else $json .= "])";
Vi utfører en enkel kontroll på hver iterasjon av sløyfen ved å bruke betingelsene for å se om vi leser siste rad i bordet; hvis vi ikke bruker vi komma for å skille hvert objekt, hvis vi er vi lukker objektet. Formatet til JSON-objektet vil være individuelle rekordobjekter i et enkelt beholderarrangement, innenfor et ytre objekt.
// returnere JSON med GET for JSONP tilbakeringing $ respons = $ _GET ["tilbakeringing"]. $ Json; ekko $ respons; // Lukk forbindelse mysql_close ($ server);
Vi ekko svaret tilbake til klienten ved hjelp av en GET-forespørsel; Dette er nødvendig for å kunne benytte jsonp tilbakeringingen på vår hovedside. Vi må spesifisere navnet på nettadresseparameteren som følger URL-adressen til JavaScript, som i dette eksemplet bare er tilbakeringing. Vi kan ikke fortelle det navnet på funksjonen som vi ønsker å overføre den til, fordi funksjonen er anonym. jQuery vil håndtere dette for oss og sørge for at dataene sendes til riktig funksjon.
Når vi er ferdige, lukker vi tilkoblingen. På dette stadiet kan vi fortsatt ikke se noe på siden, men hvis du kjører løp fra en innholdsbetjent katalog på webserveren din og bruker fanen NET i Firebug, kan du se at dataene som blir returnert til siden:
Nå som vi har noen JSON å jobbe med, la oss gå tilbake til HTML-siden og gjøre noe med det. Vår fist oppgave er å behandle den for å trekke ut dataene; i tagcloud.html, fjern kommentaren vi igjen innen tilbakeringingen og legg til følgende kode:
Accentsconagua
// lage liste for tagkoblinger $ ("
