Interaktiv besøksplan i php. Lag interaktive diagrammer i PHP og FusionCharts

Hver nettprogrammerer må jobbe med bilder - det er få rent tekstbaserte sider på Internett. Den enkleste måten å plassere et bilde på en side på er å lagre det i en fil og sette den riktige taggen i HTML-filen. En av ulempene med denne metoden er åpenbar: bildene som er i filen endres ikke på noen måte, for at brukeren skal se et annet bilde, må webmasteren åpne grafikk editor, gjør endringer og lagre dem. I denne artikkelen vil jeg snakke om å lage dynamiske bilder ved å bruke PHP-nettprogrammeringsspråket.

Først noen få ord for de som ikke er kjent med PHP. Det er et skriptspråk som kjører på serversiden for å lage dynamiske nettsider. Et PHP-program, som tekst i JavaScript, VBScript eller ASP, settes inn i en HTML-fil eller lagres i en egen fil med riktig filtype. Begynnelsen og slutten av programmet er merket med spesielle tagger. Tekst utenfor disse PHP parentes ikke tolker, sendes den til nettleseren "som den er". PHP syntaks Den er beskrevet i detalj i håndboken som er inkludert i pakken (den kan også lastes ned fra nettstedet http://www.php.net).
Prinsippet for å jobbe med bilder er dette: et PHP-program (eller snarere en PHP-tolk som kjører på serversiden) lager et bilde i farten og overfører det til nettleseren i det nødvendige grafiske formatet.
For å dra nytte av PHPs muligheter for å jobbe med bilder, må du installere GD-biblioteket på systemet. Hvis du jobber med Linux, bør dette biblioteket allerede være installert. Hvis ikke, kan du finne den på http://www.boutell.com/gd. Hvis du bruker Windows, er det beste alternativet å besøke http://php.weblogs.com/easywindows. Her kan du laste ned php_gd-biblioteket, som lar deg nyte alle gledene ved å jobbe med grafikk i PHP. Hvis du planlegger å bruke TrueType-fonter i bildene dine, trenger du FreeType-biblioteket (http://www.freetype.org).
Noen få ord om GD-biblioteket støttes grafiske formater. Versjoner eldre enn 1.6 støtter GIF- og JPEG-formater. Nyere versjoner lar deg jobbe med JPEG og PNG. Fra og med versjon 1.6 støttes ikke GIF-formatet i GD. Dette skyldes det faktum at Unisys eier alle rettigheter til LZW-komprimeringsalgoritmen som brukes i dette formatet.

Første steg

Så systemet er konfigurert, alt nødvendige biblioteker installert. La oss først lage et enkelt bilde:

Lagre teksten som en fil med filtypen .php og vis den i en nettleser. Hvis du gjorde alt riktig, vil du se det som er vist i figur 1.

bilde 1

La oss se på koden til skriptet vårt mer detaljert. I den første linjen forteller skriptet nettleseren informasjon om typen data som overføres ved hjelp av en HTTP-header. I vårt eksempel brukes den forhåndsdefinerte typen "image/gif", som betyr at bildet i GIF-format. Du bør alltid sende den riktige overskriften til nettleseren. Til JPEG-formater og PNG den første linjen så annerledes ut:

Header(“Innholdstype: bilde/jpeg”);
Header(“Innholdstype: image/png”);

Merk at "Content-Type"-overskriften bare sendes én gang for hver side, så PHP-koden for å generere bildet må plasseres i egen fil. Forresten, plassering dynamisk grafikk sammen med HTML-kode er kun mulig når du bruker SSI-mekanismen (Server Side Includes), som vi vil snakke om litt senere.
Å lage grafikk i PHP består av fire trinn:

lage en bildebeskrivelse;

registrering av brukte farger;

tegning ved hjelp av forhåndsdefinerte funksjoner;

og siste fasen er å lage bildet og overføre det til nettleseren.

I vårt eksempel ser den første fasen slik ut:

$image = ImageCreate(500, 75);

Her lager ImageCreate()-funksjonen et bildehåndtak og tilordner det til $image-variabelen. Funksjonen kalles med to parametere - høyden og bredden på bildet. Som standard er bildet fylt med svart. Neste trinn er farger:

Alle farger som brukes i bildet må registreres. For å gjøre dette, bruk ImageColorAllocate()-funksjonen; parameterne er en bildebeskrivelse og en RGB-fargekoding. Hver farge er tilordnet en variabel, som deretter sendes til tegnefunksjonene.
Det er neppe verdt å liste opp alle funksjonene til tegning. La meg bare si at det er mange av dem: du kan "fylle" bilder med farger, tegne forskjellige former, gjøre tegningen gjennomsiktig, etc. La oss se på noen av dem i praksis, og du kan lære om resten fra dokumentasjonen.
I vårt første eksempel "fyller" vi bildet med blått ved hjelp av funksjonen

ImageFill:
ImageFill($bilde, 1, 1, $blå);

Den andre og tredje parameteren er koordinatene til starten av fyllingen. Opprinnelsen til koordinatene er plassert til venstre øverste hjørne Bilder. Dermed definerer koordinatene (500, 75) det nedre høyre hjørnet av bildet fra det første eksemplet.
Nå må du overføre den ferdige tegningen til nettleseren. ImageGIF()-funksjonen gjør dette; dens eneste parameter er bildehåndtaket. For JPEG- og PNG-formater, bruk henholdsvis ImageJPEG()- og ImagePNG()-funksjonene. For å frigjøre minnet som er tildelt for bildet, må du på slutten av skriptet kalle opp ImageDestroy()-funksjonen.

Bruke tekst i tegninger

La oss vurdere en annen mulighet: la oss prøve å skrive noe på tegningen. Jeg vil gi et lite eksempel, og deretter forklare mekanismen for å jobbe med tekst:

Resultatet av å kjøre skriptet er vist i figur 2.

figur 2

Itrings()-funksjonen gir faktisk ut teksten. Parametrene er bildebeskrivelsen, fontnummeret, koordinatene til bildets utgangspunkt, tekstlinje og farge. Du kan bruke en av fem forhåndsdefinerte skrifter med fast størrelse. De er nummerert fra 1 (minst) til 5 (størst).
Følgende eksempel er der moroa begynner: bildet lages dynamisk basert på brukerinndata. La oss lage en enkel HTML-fil med et skjema (Figur 3).

figur 3

Her er koden hans:

Skriv inn navnet ditt:

La oss nå lage følgende eksempel3.php-fil:

Bildet vil inneholde den angitte teksten (Figur 4).

figur 4

Jeg vil si noen ord om andre funksjoner fra GD-biblioteket designet for arbeid med tekst. itringUp() viser tekst vertikalt; ImageChar() og ImageCharUp() gir ut et enkelt tegn; ImageFontHeight() og ImageFontWidth() returnerer høyden og bredden på skriften. De to siste funksjonene brukes i følgende eksempel, der en tekstlinje er understreket med en linje (ImageLine-funksjonen tegner linjer ved de gitte koordinatene):

Resultatet av skriptet er vist i figur 5.

Figur 5

Hva annet kan du tegne?

Naturligvis, i tillegg til linjer, kan du tegne andre former ved hjelp av GD. I følgende eksempel vil vi bruke funksjonen ImageFilledRectangle() for å vise i nettleservinduet fransk flagg. Funksjonen er designet for å tegne fylt en viss farge rektangler. La oss først fylle hele tegningen med hvitt, og deretter tegne røde og blå rektangler:

I figur 6 kan du se resultatet av arbeidet vårt.

Figur 6

PHP lar deg tegne andre typer polygoner. Det er en funksjon kalt ImagePolygon() for dette formålet. Følgende eksempel viser en femkant. Som parametere (bortsett fra bildebeskrivelsen og linjefargen) er denne funksjonen bestått følgende informasjon: antall toppunkter (i vårt tilfelle fem) og en rekke koordinater av punkter som er toppunkter. Resultatet av skriptet er vist i figur 7.

figur 7

Det samme skriptet bruker en annen funksjon som ikke ble nevnt tidligere - ImageFillToBorder(). Den brukes til å fylle et område begrenset av en bestemt farge (i vårt tilfelle den blå linjen til polygonet).
ImageArc()-funksjonen kan tegne buer og sirkler. La meg gi deg et lite eksempel (se figur 8):

figur 8

Ved å endre verdiene til variablene $bredde og $høyde kan du tegne ovaler, og ved å endre vinklene kan du vise ulike typer buer.

Bruk av ferdige bilder

GD-biblioteket lar deg ikke bare tegne bilder, men også bruke ferdige. La oss vurdere en veldig reell situasjon: bedriftens interne designer har utviklet seg utseende knapper for et bestemt nettsted, og du må plassere på siden flere knapper med samme design og bildetekster for dem.
GD-biblioteket inkluderer funksjoner som ImageCreateFromGIF(), ImageCreateFromJPEG() og ImageCreateFromPNG(). De vil hjelpe i tilfeller der du trenger å lage et nytt bilde basert på et eksisterende. La oss ha en fil button.gif (Figur 9), som inneholder et genialt knappdesign for nettstedet. Nedenfor er PHP-koden som gjør det ferdige knapper basert på denne filen. Legg merke til hvordan størrelsene på knappen, fonten og tekstlinjene brukes til å beregne posisjonskoordinatene til overskriftene. Her tas verdien av $caption-variabelen som en bildetekst for knappen, som sendes til skriptet fra utsiden:

figur 9

Funksjonene iX() og iY() returnerer henholdsvis bredden og høyden på bildet. Det er også en Getiize()-funksjon som kan brukes til å bestemme størrelsen og typen til et bilde.
I seg selv har skriptet ovenfor ikke mye praktisk verdi, men det kan brukes på hvilken som helst HTML-side via SSI eller som beskrevet i følgende kode:

Hva har vi forandret?

Nå, siden vi har flere typer diagrammer, sendes diagramtypen til oss via $_GET. Samme med $Month og $Hour og $Year;
Deretter lager vi en matrise $MonthNames, som vil inneholde navnene på månedene. Siden matrisen starter på null, er det første elementet null;
Nå, avhengig av typen, er variablene $Query, $ResultArray, $ChartHeading og $XAsixName tildelt i bryteren. Hvis $Type ikke er angitt, vises måneder som standard;
Deretter kobler vi til databasen, utfører forespørselen, kopierer resultatet til en array og genererer den første delen av xml-filen;
Deretter genererer vi teksten til XML-filen. Siden kroppen avhenger av karttypen, bruker vi bryteren igjen;
Måneder: alt er det samme bortsett fra lenken. Nå blir det slik: newchart-xmlurl-get-data.php; newchart - indikerer at vi lager et nytt diagram, xmlurl - på hvilken adresse vi skal se etter data. Alt som følger er en del av URL-en. Her er hele lenken til januar måned: newchart-xmlurl-get-data.php?type=hourly&Year=2010&Month=1
Dager: det samme gjelder for måneden, men URL-en inneholder nå informasjon relatert til dager;
Klokke: hvis vi ikke vil at andre skal følge dette diagrammet, setter vi rett og slett ikke en URL for det;
Helt til slutt lukker du XML;

Lagre denne filen som get-data.php; Åpne nå nettleseren og test skriptet. For eksempel: http://localhost/fcdemo/get-data.php?year=2010

Du bør se noe slikt:

Test

Vi er nå helt ferdig med diagrammene. For å sjekke operasjonen, gå til http://localhost/fcdemo/demo.html

Hvis du gjorde alt riktig, vil du se et Column3D-diagram på siden. Hvis du klikker på en av kolonnene, åpnes et nytt diagram. Og så videre…

Konklusjon

Hvis du har studert denne leksjonen nøye, har du mest sannsynlig allerede en generell forståelse av tilkoblede diagrammer i PHP/MySQL. Nøyaktig de samme diagrammene kan lages for følgende statistikk:

Antall salg over en periode;
Hvor mange ganger har nettstedet ditt sluttet å fungere?
Antall besøkende på en individuell side;

Strukturen til diagrammet vil være den samme for alle emner. Bruk noen parameter for å hente informasjon fra databasen, forvandler deretter svaret til XML og det er det, diagrammet er klart!

For mer inspirasjon kan du besøke denne demosiden. Takk for din oppmerksomhet!

Det er to måter å lage grafer i PHP. Du kan tegne det selv eller bruke et bibliotek. Jeg foreslår å lære hvordan du lager diagrammer selv. For det første fordi gode bibliotek er betalt. For det andre, når du bruker et hvilket som helst bibliotek, er du begrenset av funksjonaliteten. Det er bedre å tegne grafene selv.

La oss først se på det enkleste alternativet. Det er en matrise som inneholder antall brukere som registrerte seg på siden i løpet av 5 dager.

$mas = array(2, 7, 20, 9, 14);

La oss vise denne matrisen på siden i form av en graf. La oss først tegne koordinataksene.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

Kommentarer:

3 - lag et bilde

7, 8 - x og y akser

9-13 - hakk på x-aksen

14-18 - tall på x-aksen

19, 20 - hakk på y-aksen

21, 22 - tall på y-aksen

Tegningen skal se slik ut:

For å tegne en linje på en graf, må du finne punkter på den som linjen skal tegnes langs. I praksis kan du umiddelbart finne et punkt og tegne en linje langs det. Men for å gjøre eksemplet klarere vil vi dele problemet i to deler. La oss først finne alle punktene, og deretter tegne en graf basert på dem. For å gjøre dette vil vi lage en todimensjonal matrise, som vil inneholde x- og y-koordinatene til hvert punkt. For å finne koordinater trenger vi et referansepunkt. Dette er punktet der koordinataksene skjærer hverandre. I vår tegning har den koordinater x: 50, y: 250 piksler. For å bestemme posisjonen til hvert punkt, må du bruke skalaen til grafen. I eksemplet setter vi skalaen selv. På x-aksen opprettes 100 piksler for hver dag. Den første dagen er 100 piksler unna origo, den andre er 200 piksler unna, og så videre. Dette betyr at x-koordinaten for den første dagen er 50 + 100 = 150. For den andre er 50 + 200 = 250.

På y-aksen tildeles 100 piksler for hver 10 brukere. Dette betyr for én bruker - 10 piksler. Det er nødvendig å ta hensyn til at y-aksen til bildet er rettet nedover, noe som betyr at du ikke trenger å legge til verdien til referansepunktet, men trekke den fra. Den første dagen registrerte 2 besøkende seg på siden. Koordinaten for denne verdien er 250 - (2 * 10) = 230. For den andre dagen er 250 - (7 * 10) = 180. Dermed er matrisen med koordinatene til punktene som følger:

Grafen ser slik ut:

Vi vurderte det enkleste alternativet for å konstruere en graf. Jeg visste antall dager og maksimalt antall brukere på forhånd. Derfor valgte jeg skalaen på grafen selv. Men vanligvis kan disse dataene være forskjellige og skalaen må beregnes. Og selve grafen ser litt annerledes ut. Vi er vant til at koordinataksene starter fra null. Men for enkel visning blir denne regelen noen ganger ikke overholdt. X-aksen starter ikke på 0, men på 1, slik at det ikke er tomrom til venstre for linjen. Og y-aksen vises slik at alle verdier passer på grafen. For eksempel, hvis minimumsverdien er 60 og maksimumsverdien er 70, inneholder y-aksen dette området. La oss vurdere å lage en slik graf.

I eksemplet er x-aksen 570 piksler lang. Det må deles inn i like segmenter for hver dag. X-aksen starter ikke fra 0, men fra 1. Derfor vil det ikke være noe segment mellom 0 og 1 og antall segmenter blir 1 mindre. Hvis det er 5 dager, får du 4 segmenter. Formelen for å beregne lengden på et segment er:

lengde = akselengde / (antall dager - 1)

Tallet kan være en brøk, så resultatet må rundes ned.

570 - 50 er lengden på x-aksen. Det avhenger av størrelsen på bildet.

Vi lager y-aksen slik at alle verdier passer. Du må få minimums- og maksimumsverdiene. De skal oppta hele høyden på grafen. Når vi kjenner rekkevidden, kan vi beregne hvor mange piksler som skal tilsvare en bruker på grafen.

område = maksimum - minimum

lengde = aksellengde/rekkevidde

Det resulterende tallet må også avrundes.

Opprette en grafisk besøksteller

En viktig funksjon ved å jobbe med GD-modulen er at skriptet som genererer et nytt bilde ikke skal gi ut noe annet enn selve bildet (det vil si at det ikke skal inneholde kall til ekko, printf og lignende funksjoner). Deretter vises bildet generert av PHP-skriptet av nettleseren ved å spesifisere URL-en til dette skriptet som datakilden, for eksempel, .

Å lage en ny tegning i PHP begynner med enten å lage en ny tom "side" (lerret) for tegning, eller ved å laste inn og endre et eksisterende bilde. Men før du starter uttaksprosessen grafisk informasjon, må du velge formatet (MIME-type) ved å ringe header(str)-funksjonen. For eksempel for PNG-format du må bruke følgende kode:

header("Innholdstype: image/png");

Deretter, for å lage et område for tegning, må du kalle funksjonen int imagecreate (int x_size, int y_size), som du sender bredden og høyden (i piksler) til det genererte bildet som parametere henholdsvis x_size og y_size; funksjonen vil returnere identifikatoren til det opprettede tegneområdet. Hvis vi vil ta et eksisterende bilde som grunnlag, må vi, avhengig av formatet, kalle funksjonen imagepng, eller imagejpeg, eller imagegif, og overføre navnet på bildefilen som en parameter. For å vise tekst er det en funksjon int imagestring(int im, int font, int x, int y, string s, int col), som må sendes: tegningsområdeidentifikator, skriftstørrelse (1-5), X-koordinat av begynnelsen av teksten, Y-koordinerer begynnelsen av teksten, selve teksten og fargen på teksten. For å bestemme fargen brukes en konstruksjon av skjemaet

$white=ImageColorAllocate($im, 255, 255, 255)

De tre siste numeriske parameterne er RGB-komponentene for den nødvendige fargen. Men siden det er noe irrasjonelt å spesifisere dem hver gang, bør du lage en inkluderingsfil med definisjoner av hovedfargene colors.inc:

Etter at vi har tegnet bildet vårt med GD, må det vises i nettleseren. For å gjøre dette, avhengig av formatet på bildet, må du kalle en av funksjonene: imagepng(int im [, strengfilnavn]) eller imagejpeg (int im [, strengfilnavn [, int kvalitet]]), og passerer bildeidentifikator som en parameter. Hvis du spesifiserer et filnavn i tillegg til tegneområdeidentifikatoren, vil bildet lagres på disken under dette navnet). Etter at vi er ferdige med å jobbe med tegningen, må vi frigjøre minnet den opptar. Funksjonen imagedestroy (int im) brukes til dette formålet. La oss se på arbeidet med disse funksjonene ved å bruke et eksempel.

La oss først lage maler for topp- og bunnteksten til HTML-dokumentet, som vi vil bruke for ikke å rote PHP-koden med HTML-konstruksjoner:

Arbeide med grafikk i php

La oss si at vi ønsker å lage en grafisk besøksteller og vi har en malfil der vi må "legge til" antall besøk. Det kan se slik ut.

Da kan skriptet som plasserer besøksdataene i tellermalen se slik ut (selve besøkstallene er utelatt):

Skriptet for å vise telleren kan være slik: