Takaisin php-ohjelmoinnin etusivulle


PHP: Thumbnails-kuvien generointi PHP-kielellä



Monilla nettisivuilla tarvitaan erilaisia toimintoja, joilla käyttäjälle annetaan mahdollisuus generoida palvelimelle esim. PDF-tiedosto tietokantaan tallennetusta tai käyttäjän itsensä palvelimelle lähettämästä materiaalista. Lisäksi käyttäjälle tarjotaan nappia painamalla mahdollisuus ladata tuottamansa tiedosto kotikoneelleen.

Ensiajattelulla tuollaisen ratkaisun toteuttaminen vaikkapa omille kotisivuille asennettavaksi voisi tuntua aivan ylivoimaiselta haasteelta, mutta itseasiassa tarkemmalla asian tutkimisella osoittautuu, että esim. JPG, PDF, XLS tai SWF -muotoisen materiaalin dynaaminen tuottaminen palvelimelle ei olekaan PHP-skriptien avulla aivan toivoton urakka.

Opastan tässä ensimmäisessä palvelinpuolengenerointitutoriaalissani thumbnails-kuvien generoimisen palvelimelle. Eli opastan kuinka PHP-skriptillä voi tavalliselta XHTML-sivulta tai Flash-komponentista laukaistaessa luoda automaattisesti käyttäjän antamista jpg-kuvista pienennetyt versiot.

TARVITTAVAT KIRJASTOT, ESITIEDOT JA LOPPUTULOS:

Omille sivuilleni toteuttama thumbnails-generointi vaatii toimiakseen GD -kirjaston asentamisen nettisivuston palvelimelle. Onneksi tämä on aika laajalti tuettu kirjasto. Esim. oma palveluntarjoajani Sigmatic tukee tätä kirjastoa.

Varsin hyvän kuvan Thumbnails-kuvien generoinnista PHP-kielellä ja GD-kirjastolla saa mm. oppaista 1 ja 2 . Itse toteutin tuon oman generaattorini oppaan 1 perusteella.

Olen viime aikoina ohjelmoinut lähinnä Flash/AS3-ratkaisuja, joten tässäkin esimerkissä olen yhdistänyt tuon PHP-skriptin osaksi Flash-komponenttia, joka käynnistyessään generoi (jos kuvia ei vielä ole olemassa) palvelimella annetusta XML-tiedostosta lukemistaan kuvaosoitteista vastaavat Thumbs-kuvat thumbs-alihakemistoon. Flash-komponenttia käytettäessä ei siis itse tarvitse tehdä thumbs-kuvia, vaan ne generoidaan automaattisesti originaaleista.

Toimivan Flash-komponentin näkee tästä.

PHP-SKRIPTI

Itseasiassa thumbsnail-kuvien generointi PHP:n, GD:n ja tutoriaalin 1. perusteella on pitkälti leikkaa/liimaa-operaatio. Itse tallensin alla olevan koodin tiedostoksi create_thumbs.php:
Muutamia huomioita yllä olevasta PHP-koodista:

a) Kirjoita PHP-koodi aina tagien <?php ja ?> sisään.

b) Muuttujat välitetään PHP-skriptille XHTML-sivulta tai Flash-komponentista yleensä $_POST -taulukossa (yleensä lomakkeet) tai $_GET -taulukossa (osoiteriviltä esim. nettiosoite.com?muuttuja1=arvo1&muuttuja2=arvo2

c) PHP-skripteissä on syytä kiinnittää erityistä huomiota ulkopuolelta taulukoissa $_POST ja $_GET toimitettavien muuttujien arvojen tarkistukseen vihamielisen syötteen varalta.

d) Muuttujien arvoja voi lähettää takaisin Flash-komponentille esim. "echottamalla" seuraavasti:
Huomasin, että tuo Flashiin PHP-skriptistä echotus on ilmeisesti syytä tehdä aina (vaikkei käyttäisikään muuttujia mihinkään). Sain oman Flash-komponenttini kaatumaan IE:ssä (vaikka FF:ssä toimikin) Flash Player 10 -virheeseen, koska playeri ei ollut tyytyväinen, kun mitään muuttujaa ei lähetetty PHP-skriptistä takaisin Flash-komponenttiin.

Muuttujat tavalliselle XHTML-sivulle voi lähettää vaikkapa osoiterivillä uudelleenohjauksen yhteydessä. Esim.


e) Skriptin alussa oleva if-tarkistus on vain Flash-toteutuksia varten ja on poistettava jos on tarkoitus hyödyntää skriptiä suoraan XHTML:stä käsin.


FLASH-TOTEUTUS:

Perusajatus Flashissa/AS3:ssa tiedoston lukemisessa/kirjoittamisessa/suorittamisessa on aina sama oli kyseessä sitten XML-tiedosto, PHP-skripti tai JPG-kuva:

a) Kommunikointi PHP:n ja FLASHIN/AS3:n välillä hoidetaan (tai ainakin minä hoidan) luokkien URLRequest ja URLLoader avulla sekä lisäksi muuttujia lähetettäessä/vastaanotettaessa tarvitaan apuna luokkaa URLVariables.

b) Lataamisen etenemisen/valmistumisen tarkkailu suoritetaan liittämällä URLLoaderiin tapahtumankäsittelijä(t) addEventListener-metod(e)illa.

c) Varsinainen lataaminen käynnistetään kutsumalla URLLoaderin load-metodia.

Alla oleva esimerkkikoodi (otettu tuon Flash-kuvaselaimeni lähdekoodista) demonstroi tavallisen kommunikointitapauksen Flashin/AS3:n ja PHP-skriptin välillä.

Muutama oleellinen havainto AS3-koodista:

i) Huomaa createThumbs-funktiosta kuinka muuttujien lähettäminen Flash -> PHP-skripti suoritetaan (URLRequest,URLRequestMethod.POST, URLLoaderDataFormat.VARIABLES, addEventListener, sendRequest, load).

ii) Huomaa, että funktio thumbsCompleteHandler suoritetaan automaattisesti, kun tiedosto create_thumbs.php on suoritettu (ja vasta sitten). Tämä on oleellista, sillä haluammehan, että thumbnails-kuvat on generoitu palvelimelle ennen kuin yritämme niitä funktiossa thumbsCompleteHandler tallentaa DataProvider-objektiin.

iii) Tilelist-luokka tarjoaa yhden hyvän tavan järjestää kuvia Flashiin. Itse käytin tuossa ratkaisussani lisäksi tuota TileListiin pohjautuvaa drag-and-drop -ratkaisua.

iv) Kuvien siirtymäanimaatioissa on syytä käyttää bugisen Tween-luokan (ainakin ennen oli) jotain ulkopuolista ratkaisua esim. TweenLitea.

Thumbsnails-kuvien generoimiseksi tarvitsee siis kutsua palvelimella suoritettavaa PHP-skriptiä, jonka kanssa Flash-komponentin on kommunikoitava molempiin suuntiin.

Onneksi kommunikointi XML-tiedostoja ja JPG-kuvia ladattaessa pystytään hoitamaan ilman palvelinpuolen skriptausta. Riittää, että luetaan samanlaisen käyttöliittymän kautta XML-tiedostoja ja JPG-tiedostoja kuin PHP-tiedostoja. Itse XML-tiedoston sisältöön pääsee AS3:lla kätevästi käsiksi XML-luokan kautta.

Alla oleva AS3-koodi demonstroi tiedoston gallery-photos.xml (katso XML-tiedoston sisältö ja vertaa alla olevaan kyseisen tiedoston lukemiseksi tehtyyn AS3-koodiin) lukemisen ja tallentamisen AS3-muuttujiin.

Nippelitietona todettakoon, että jos tuon XML-tiedoston avaa nettiselaimessa katseltavaksi niin nettiselain tulkkaa osan koodista, jolloin varsinaisen lähdekoodin näkee esim. avaamalla gallery-photos.xml:n nettiselaimeen ja valitsemalla valikoista lähdekoodin katselun (FF: Näytä->Sivun lähdekoodi,Ctrl+U) tai FF:ssä klikkaamalla linkkiä hiiren oikealla napilla -> Tallenna kohde levylle ja avaamalla tiedosto jossain tekstieditorissa.
Olen yllä käynyt oleellisimmat asiat thumbnails-generaattorin toteuttamiseksi omalle nettisivustolle. Opastamatta jäi vielä kuinka toteuttaa Flashilla/AS3:lla käyttäjälle mahdollisuus ladata palvelimelle generoitu thumbnails-kuva omalle kotikoneelle. Mutta se olisikin jo oma tutoriaalinsa...

Vihjeenä edelliseen voin vihjata, että FileReference ja download-metodi auttavat asiassa. Ja pitää lisäksi muistaa Flash Player 10:n tietoturvaan liittyvä asia , joka on monelle aiheuttanut harmaita hiuksia, kun ovat ihmetelleet (allekirjoittaneella omakohtaisia kokemuksia?), ettei mitään dialogia ilmesty ruudulle...


Takaisin PHP-ohjelmoinnin etusivulle