#VenerdìDelCloud

#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 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 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:

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.

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.

#VenerdìDelCloud 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 6

Nel file utils.php, invece, inseriremo il seguente codice:

#VenerdìDelCloud 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

La pagina di visualizzazione delle immagini della gallery

8

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 9

Apriamo il file gallery.php e

copiamo al suo interno

#VenerdìDelCloud 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 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 12

Grazie a Bootstrap la grafica risulta essere responsive,

adattandosi in automatico alla risoluzione del dispositivo che usiamo.

#VenerdìDelCloud 13

PER TE un voucher del valore di 10€ compila il form e

PROVA GRATIS il NOSTRO CLOUD

Clicca qui

#VenerdìDelCloud 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

Grazie

#VenerdìDelCloud

www.cloud.it