MP Gallery System

Ohjelman yleiskuvaus

MP Gallery System on kuvagalleria, jonka avulla voi jakaa kuvia internetissä vaivattomasti. Kuvagalleria koostu käyttäjän näkökulmasta katsottuna kahdesta osasta: itse galleriasivusta ja salasanalla suojatusta ylläpitösivusta. Galleriasivu on hyvin yksinkertainen ja pelkistetty; ulkonäön ja värien tarkempi määrittely jätetään käyttäjälle. Tietenkin galleriaa voi käyttää myös sellaisenaan jos yksinkertaisuus on mieleen.

Ylläpitosivulla käyttäjä voi ladata koneeltaan kuvia galleriaan, asettaa kuvatekstejä sekä muuttaa kuvien esittämisjärjestystä. Myös kuvien poistaminen galleriasta luonnistuu helposti saman sivun kautta. Järjestelmä luo automaattiesti ladatuista kuvista näytekuvalinkit (thumbnailit), ja järjestelmän kautta voi myös muuttaa ladattavien kuvien kokoa, jos ei vaikkapa kuvankäsittelyohjelmaa ole saatavilla tai sitä jaksa avata.

On myös mahdollista rakentaa galleriasivu ihan alusta asti itse, käyttäen pelkästään gallerian ylläpitösivua taustajärjestelmänä. Tämä onnistuu helposti, kiitos kätevän PHP-metodin, joka löytyy järjestelmän ytimestä. Lisätietoa metodista löydät lähdekoodista mpCore.php tiedostosta.

Tekninen toteutus

Palvelimen näkökulmasta

sivuston rakenne diagrammina php:n näkökulmasta Sivut mpGallery.php (gallerian julkisivu) sekä mpAdmin.php (ylläpitopaneeli) ovat tarkoitettu suoraan käyttäjän käytettäväksi. Muita skriptejä sitten hyödynnetään edellä mainittujen avulla. Tärkein komponentti järjestelmän kannalta on mpCore.php, joka toimii järjestelmän ytimenä. Asetukset määritellään tiedostossa mpSettings.php, josta ydin lukee tarvittavat parametrit toimiakseen.

Ylläpitopaneeli on varsin suuri kuten viereinen diagrammi paljastaa. Kun käyttäjä ei ole kirjautunut ylläpitosivulle, ylläpitopaneeli koostuu pelkästään sisäänkirjautumisosiosta loginSection.php. Muulloin se koostuu lokiosiosta, latausosiosta sekä kuvaosioista – logSection.php, uploadSection.php ja imageSection.php. Lokiosiosta näkyy viimeisemmät ylläpitotoimenpiteet ja mahdolliset virheet, latausosio toimii nimensä mukaan. Kuvaosiolla on hieman enemmän toimintoja. Sen avulla voidaan tarkastella, siirrellä ja poistaa gallerian kuvia. Kahden jälkimmäisen operaation apuna käytetään swapImageOrder.php ja removeImage.php skriptejä.

HTMLTemplate.class.php on apuluokka, jonka avulla HTML-rakenne ja PHP-koodi voidaan erottaa toisistaan. Perusidealtaan se toimii niin, että luokkaan ladataan HTML-tiedosto, josta sitten tietyt avainsanat korvataan oikeilla arvoilla, jonka jälkeen HTML esitetään. Olen käyttänyt sitä lähinnä niissä tiedostoissa, joissa HTML:ää ja PHP:ta on ollut merkittävästi sekaisin keskenään.

Asiakasohjelman näkökulmasta

Asiakasohjelma vastaanottaa XHTML:n ja CSS:n lisäksi JavaScriptiä, jonka avulla sivun toiminnasta saadaan dynaamisempaa. Sivu toimii myös ilman JavaScriptiä, vaikka kokemus tai käyttö ei ehkä ole yhtä intuitiivista. JavaScriptiä käytetään lähinnä Ajaxin toteuttamiseen. Esimerkiksi: gallerian puolella kuvien näyttämiseen ja seuraavien kuvasarjojen hakuun. Ylläpitopuolella kuvien poistamiseen, järjestyksen muuttamiseen ja lisälokien hakuun.

Käytetyt kirjastot

Seuraavia kirjastoja käytin MP Gallery Systemin toteutuksessa:

Exif, GD

uploadSection.php:ssa käytin kyseisiä PHP:n kirjastoja. Exif:iä kuvatyypin selvittämiseen, ja GD:tä kuvan koon muuttamiseen.

jQuery 1.3.2

Varsin jumalainen kirjasto, joka säästi minut monelta tuskalta, mainittakoon vaikkapa Internet Explorer –selainyhteensopivuuden toteuttamiselta. "Ajaxointikin" hoituu näppärästi kyseistä kirjastoa käyttäen. Turhaa sitä pyörää keksiä uudestaan, kun aikansa voi käyttää johonkin muuhun hyödylliseen, esim. seuraavanlaisten keksintöjen keksimiseen.

Havaitut bugit ja ongelmat

Selainvaatimukset

Selaimen on osattava näyttää XHTML 1.0 ja CSS 2.1. JavaScript ja Ajax -tuki ei ole pakollista, mutta käytettävyyden kannalta suositeltava. Alla olevasta taulukosta löydät testatut selaimet ja gallerian toimivuuden niissä.

Selain Gallerian toimivuus Ylläpitopaneelin toimivuus
Mozilla Firefox 3 Toimii moitteettomasti. Toimii moitteettomasti.
Mozilla Firefox 2 Toimii moitteettomasti. Toimii moitteettomasti.
Internet Explorer 8 Toimii moitteettomasti. Toimii moitteettomasti.
Opera 9.6 Siirtymäefektejä ei välttämättä animoida ensimmäisellä kuvan latauskeralla. Toimii moitteettomasti.
Internet Explorer 7 Toimii moitteettomasti. Toimii vaikkakin jokaista diviä kohden on ruma scrollbar.
Google Chrome Graafinen bugi thumbnailissa kun sitä klikataan. Toimii, vaikkakin chrome tekee joistakin diveistä hieman hassun kokoisia.
Internet Explorer 6 Ensimmäinen kuvasarja toimii, muut eivät. Thumbnailin borderit jäävät linkin sinisiksi. Ajax bugaa. Sivu näyttää aivan horidilta.

Lähdekoodi

Lataa lähdekoodi tar.bz2 pakattuna tai selaa lähdekoodia alla olevista linkeistä.

Demo

Galleriaosion demo löytyy tämän linkin takaa.

Lisenssi

MP Gallery Systems on lisensoitu GNU GPLv3. Lisenssi on luettavana kokonaisuudessaan täältä

Lähteet

Lähteitä on ollut monia, joista useampaa en ole pannut merkille. Eräitä hyvin paljon lukemiani lähteitä löytyy alla olevasta listasta:

Suurin yhteinen tekijä

Projektin toteuttanut Eric Andrews Digitaalisen median tekniikat –kurssin harjoitustyöksi.
Kotisivultani http://cs.helsinki.fi/u/andrews löydät yhteystietoni sekä muuta turhaa informaatiota itsestäni.

Demogalleriassa ja lähdekoodipaketissa olevat kuvat ovat minun ottamiani, ja niitä saa käyttää kunhan kuvan alkuperäinen ottaja on selvästi mainittu. Kuvat on otettu kesällä 2008 jenkkireissultani, jonka aikana kävin ainakin Ohiossa ja Delawaressa sekä muissa noilla tienoilla olevisaa osavaltioissa.

Valid XHTML 1.0 Strict Valid CSS!