ZoWebdev

Web ontwikkeling voor Jongeren
[ 06-06-2010 | 18:15 ]

Picasa fotoboek

(met het PHP-Zend framework)
» werkend voorbeeld: picasa-zend fotoboek
» download

Tegenwoordig kun je heel makkelijk en goedkoop een mooie fotosite maken met behulp van Picasa. Picasa is het plaatjes-programma van Google, wat het makkelijk maakt om je plaatjes/foto's op je eigen computer te beheren en op internet te publiceren. Met de Picasa Webalbums API kun je vervolgens je eigen website (of andere applicatie) gebruik laten maken van die online plaatjes.

tip: Een goedkope host voor je plaatjes en documenten

Picasa geeft gratis 1Gb opslag ruimte voor je foto's, maar voor 5 euro per jaar krijg je wel 20Gb! Dat is goedkoper dan welk hosting pakket dan ook, en daarom zeker de moeite waard. Deze ruimte deel je met je gmail en Google Documents.

Er zijn meerdere methodes die je kan gebruiken om toegang te krijgen tot je plaatjes. De methode die we hier gebruiken schijnt minder veilig te zijn dan de URL methode, maar heeft als voordeel dat je plaatjes niet als 'public' op Picasa hoeven te staan.

stap 1: test je PHP en installeer Zend Gdata

Alle google applicaties werken met dezelfde types API en zijn gebaseerd op de open source Zend Gdata API. Deze library moet je eenmaal installeren, waarna je toegang kan krijgen tot je Google Calendar, documents, Picasa etc. Google heeft duidelijke documentatie online staan op code.google.com.
Je kan met allerlei verschillende talen toegang krijgen tot de Google API's, zoals met FLEX, Java, AJAX en asp. In het volgende voorbeeld gebruiken wij de PHP variant.

stap2: Picasa fotoboek

In dit project verbouwen we het fotoboek dat we eerder op basis van javascript gemaakt hebben tot een dynamisch fotoboek wat zijn gegevens uit picasa haalt. Een aantal stappen blijven daarom hetzelfde.
  • In plaats van het inladen van een extern javascript file wordt de javascript met behulp van PHP in de pagina zelf gegenereerd. Hiervoor moet Zend informatie opvragen van Picasa.
  • Als eerste moet je de Zend library laden in de HEAD van je document.
  • Vervolgens moet je inloggen bij Picasa: auhtentificatie. Dit kan op drie manieren. In dit voorbeeld laten we de pagina inloggen met onze persoonlijke gegevens. Dit is niet de meest veilige methode, maar het werkt en heeft als voordeel dat je foto´s niet als ´public´ op Picasa hoeven te staan.
  • Net als met de javascript kijken we in de pagina-url of er een specifiek fotoboek moet worden geopend, of gewoon de nieuwste. We gebruiken hiervoor de GET methode.
  • We kunnen nu een lijst van albums opvragen. Dit slaan we op in een PHP array om het menu mee af te beelden. We weten nu ook wat het nieuwste album is.
  • Nu gaan we de foto's opvragen van het album dat in $albumq is opgeslagen.
  • We hebben nu een aantal arrays met informatie, maar ze zijn nog niet helemaal in de goede vorm om ze te gebruiken. We gaan met deze arrays namelijk javascript arrays schrijven. Daarvoor plaatsen we tussen de elementen een stukje tekst, maar dus niet na het laatste. met PHP Array_shift kunnen we 1 element uit de lijst verwijderen en dat element opslaan.
  • Ook combineren we een paar arrays.
  • Nu schrijven we een aantal functies die van de arrays de gewenste javascript gaan schrijven. Let op dat in albumprint() een link voorkomt naar jouw pagina! deze moet je updaten. Verder zijn er twee hulpmiddelen ingebouwd:
    • Albums met C_ voorin hun naam worden niet opgenomen in het menu
    • _ in een album naam wordt vervangen door een spatie
  • En roepen deze functies aan van binnen het javascript
  • hierna is de pagina opgebouwd exact als in het javascript fotoboek.


» werkend voorbeeld: picasa-zend fotoboek
» download

  1. installeer Zend Gdata (Google Data PHP Client Library)
  2. unzip & upload de bestanden uit picasa-zend.zip
  3. wijzig de volgende gegevens in index.html