#VenerdìDelCloud #lezione 13 - parte 1 'Cloud Object Storage: creazione di una gallery in PHP'

1. #VenerdìDelCloud

2. Nella precedente lezione abbiamo familiarizzato
con le API del nostro Cloud Object Storage,
cercando di capire come sia possibile integrare il nostro servizio
in un proprio applicativo in maniera semplice ed intuitiva.
Oggi, implementiamo una gallery utilizzando
il linguaggio PHP nel nostro servizio di
Cloud Object Storage.
#VenerdìDelCloud
2

3. Andremo, quindi, a sviluppare una mini
gallery in PHP,
composta essenzialmente da 2 pagine:
una pagina di frontend
dalla quale sono mostrate le immagini presenti nel nostro cloud storage ed
una pagina di backend
dalla quale caricare le immagini direttamente dal proprio pc.
Vedremo quanto è semplice iniziare a creare
un applicativo reale utilizzando il nostro cloud storage.
#VenerdìDelCloud
3

4. Librerie e struttura del progetto
Lato server, necessitiamo di una libreria che si interfacci con il nostro Cloud
Storage tramite protocollo S3.
Lato client, abbiamo deciso di utilizzare TwitterBootstrap, JQuery e Lightbox2 per
sviluppare velocemente pagine con una grafica gradevole.
Iniziamo creando la seguente struttura per il nostro progetto:
Da notare che si è deciso
di includere i javascript
ed i fogli di stile di
boostrap e jquery
utilizzando le relative
CDN ufficiali, in modo da
velocizzare il caricamento
delle pagine.
Il file S3.php contiene la libreria Amazon S3 PHP Class , in lightbox invece bisogna
caricare i sorgenti del progetto Lightbox2 disponibile sul sito dell’autore:
http://lokeshdhakar.com/projects/lightbox2/.
Tutti gli altri file, invece, conterranno la logica alla base dello script gallery.
#VenerdìDelCloud
4

5. Il file di configurazione, le funzioni di utilità
e gli stili CSS
I primi 2 file del progetto di cui ci occuperemo sono il file di configurazione,
dove archiviare tutti i dati necessari ad eseguire la connessione al servizio di
Object Storage, ed il file utils.php, nel quale definiremo alcune funzioni
utilizzate spesso nello script.
Il file di configurazione, conf.php, dovrà contenere un array con accesskey,
secretkey, punto di accesso ed il nome bucket che vogliamo utilizzare:
#VenerdìDelCloud
5

6. Nel file utils.php, invece, inseriremo il seguente codice:
#VenerdìDelCloud
6

7. L’ultimo file accessorio necessario per il nostro script è style.css, che conterrà
solo delle semplici classi CSS per correggere alcuni “comportamenti”, per noi
errati, di bootstrap e lightbox:
#VenerdìDelCloud
7

8. La pagina di visualizzazione delle
immagini della gallery
Le immagini che andremo a caricare tramite
la pagina amministrativa saranno
visualizzate richiamando il file gallery.php dal nostro browser.
Gallery.php si occuperà di recuperare i dati di tutti i file
presenti nel nostro bucket e
visualizzarli a video disposti su diverse righe.
#VenerdìDelCloud
8

9. Apriamo il file gallery.php e
copiamo al suo interno
#VenerdìDelCloud
9

10. Vediamo che la pagina è composta da
circa 70
righe di codice,
di cui la maggior parte è semplice HTML
dove vengono incluse ed utilizzate le librerie
precedentemente elencate.
Ad inizio pagina sono stati inclusi il
file di configurazione
ed il file utils.php
e successivamente,
ci connettiamo al cloud storage e
recuperiamo tutti i file
presenti nel bucket.
#VenerdìDelCloud
10

11. Ecco un test di esempio della gallery creata:
Nel caso in cui vi
siano immagini
caricate, vedremo
una serie di riquadri
con le miniature e,
cliccandoci sopra,
vedremo l’immagine
a dimensioni reali
grazie a lightbox.
#VenerdìDelCloud
11

12. Grazie a Bootstrap la grafica risulta essere responsive,
adattandosi in automatico alla risoluzione del dispositivo che usiamo.
#VenerdìDelCloud
12

13. PER TE un voucher del valore di 10€
compila il form e
PROVA GRATIS il NOSTRO CLOUD
Clicca qui
#VenerdìDelCloud
13

14. …nella prossima parte della lezione
vedremo come sviluppare due pagine per
l'upload e la gestione delle immagini…
Continua a seguirci
Contenuti a cura di HostingTalk
#VenerdìDelCloud
14

15. www.cloud.it
Grazie
#VenerdìDelCloud
#VenerdìDelCloud