Creare una funzione per generare una galleria con PHP
Oggi creeremo una lista di immagini. Vi sarà capitato di avere tante immagini e di doverle inserire, una per volta, in una pagina web. E di dover poi modificare il codice html della pagina quando nuove immagini soggiungevano.
Con PHP questo processo può essere facilmente automatizzato.
Per questo esercizio vi consiglio di scaricare il file degli esercizi. All’interno troverete alcune foto e i file per iniziare. Estraete il contenuto nella cartella iwd che avevamo creato in seguito al primo articolo.
Apriamo il file galleria.inc.php con il nostro editor preferito ed iniziamo a scrivere, tra i tag di apertura e chiusura di php:
function galleria($cartella){
}
In questo momento abbiamo dichiarato la creazione di una nuova funzione, chiamata galleria.
Una funzione è una serie di istruzioni da far eseguire a PHP. E’ utile quando abbiamo una serie di istruzioni da far eseguire più volte in diversi punti di un sito e non vogliamo riscrivere interamente il codice. Lo racchiudiamo in una funzione e lo eseguiamo.
In questo caso la nostra funzione farà le seguenti cose:
- Leggerà il contenuto di una cartella da noi indicata, e salverà il nome di ogni singolo file in un array
- Scorrerà l’array e invierà progressivamente al browser il codice html per mostrare le immagini
Tra le parentesi graffe andranno scritte le istruzioni da far eseguire alla funzione. Tra queste scriviamo dunque:
$listaFile = scandir($cartella);
Come potete vedere c’è una nuova istruzione, ovvero scandir. Questa istruzione restituisce i nomi dei file presenti in una directory in un Array. Cos’è un array?
Un array è, detto nel modo più terra terra che riesco ad elaborare, una serie di valori indicizzati all’interno di una variabile.
Ad esempio:
$utente['nome'] = ‘Giancarlo’;
$utente['anni'] = 44;
$utente['sesso'] = ‘M’;
Nel caso di scandir, un array restituito è simile a questo:
$listaFile[0] = ‘.’;
$listaFile[1] = ‘..’;
$listaFile[2] = ‘foto1.jpg’;
$listaFile[3] = ‘foto2.jpgl’;
Come potete notare l’array è ordinato numericamente.
Dobbiamo ora usare questa lista per creare l’html da inviare al browser.
Per farlo useremo il ciclo foreach. Questo ciclo è stato creato appositamente per scorrere attraverso un array. Ripete le istruzioni contenute nel ciclo finché l’array non finisce (se dunque l’array ha 10 indici ripeterà le istruzioni 10 volte). Scriviamo:
foreach($listaFile as $value){}
In questo modo verrà eseguito un ciclo, ed ogni volta sarà assegnato il valore dell’indice raggiunto nell’Array $listaFile alla variabile $value.
All’interno possiamo indicare l’istruzione da eseguire, ovvero:
echo ‘<li><img src=”‘.$cartella.’/’.$value’” /></li>’;
Stiamo indicando a PHP di inviare al browser l’html che formerà la lista di immagini. La variabile $cartella è il nome della cartella, passato tramite la funzione, $value è il nome dell’immagine.
Il codice scritto fino ad adesso dovrebbe questo:
function galleria($cartella){
$listaFile = scandir($cartella);
foreach($listaFile as $value){
echo ‘<li><img src=”‘.$cartella.’/’.$value.’” /></li>’;
}
}
Facciamo una prima esecuzione di prova. Per richiamare una funzione basta scrivere il nome che le abbiamo assegnato seguito dalle parentesi tonde (in cui includiamo eventuali valori da passare alla funzione). Nel nostro caso scriviamo:
galleria(‘monumenti’);
subito dopo la chiusura della funzione (è parentesi graffa } a indicarne la chiusura), e raggiungiamo lo script con il nostro browser, questo è l’html che otterremo:
<li><img src=”monumenti/.” /></li>
<li><img src=”monumenti/..” /></li>
<li><img src=”monumenti/cosenza1.jpg” /></li>
<li><img src=”monumenti/cosenza10.jpg” /></li>
<li><img src=”monumenti/cosenza12.jpg” /></li>
<li><img src=”monumenti/cosenza13.jpg” /></li>
<li><img src=”monumenti/cosenza2.jpg” /></li>
Sicuramente noterete all’inizio della lista due punti. Scandir infatti non restituisce solo la lista dei file ma l’intero contenuto di una cartella, e quindi anche quei “puntini”. Per eliminarli basta aggiungere una condizione se all’interno del ciclo foreach.
Riprendiamo la nostra funzione e prima dell’istruzione echo all’interno del ciclo foreach scriviamo:
if($value == ‘.’ || $value == ‘..’){
continue;
}
Cosa succede?
If, in inglese, vuol dire se. Con l’istruzione if, diciamo a PHP: se la condizione tra parentesi è vera allora esegui le istruzioni contenute tra le parentesi graffe.
In questo caso se $value è uguale (e per indicare l’uguale servono due simboli =, quindi ==) alla stringa ‘.’, oppure (e si usano i simboli || ) $value è uguale alla stringa ‘..’, esegui le istruzioni contenute tra le parentesi graffe (nel nostro caso continue;).
Questa istruzione, continue;, dice a PHP di saltare tutte le istruzioni contenute nel ciclo e di continuare ad eseguirlo dal punto successivo.
In questo modo quando andremo ad eseguire lo script, l’html prodotto sarà:
<li><img src=”monumenti/cosenza1.jpg” /></li>
<li><img src=”monumenti/cosenza10.jpg” /></li>
<li><img src=”monumenti/cosenza12.jpg” /></li>
<li><img src=”monumenti/cosenza13.jpg” /></li>
<li><img src=”monumenti/cosenza2.jpg” /></li>
Che è proprio l’html che vogliamo. Adesso non ci resta che riusare la funzione nelle pagine web dei nostri siti. Cancelliamo l’ultima riga (galleria(‘monumenti’);), poiché ci serviva solo per provare lo script.
Creiamo due nuovi file chiamati panorami.php e monumenti.php. All’inizio di ogni file scriviamo:
<?php require(‘galleria.inc.php’) ?>
in modo da includere la funzione. Ora scriviamo tutto l’html di rito, e quando vorremo mostrare la galleria basterà scrivere:
<ul>
<?php galleria(‘monumenti’); ?>
</ul>
Per mostrare il contenuto della cartella monumenti e:
<ul>
<?php galleria(‘panorami’); ?>
</ul>
per mostrare il contenuto della cartella panorami.
Ovviamente potrete creare diverse cartelle, con diversi nomi, basterà poi indicarlo nella funzione.
Questa è una funzione basilare, potete infatti aggiungere eccezioni, regole, ecc, che poi saranno richiamate ogni volta che userete la funzione.
Add to Google
40 Commenti
ciao!
un informazione… ma se io voglio che carichi solo le foto _small e che linkino alle foto _big ?
scusa ma ho cercato su internet ma le uniche che trovo o non funzionano o usano un db…
Grazie!
@Yoris: crea due cartelle, una per le foto normali, e una per le miniature. le foto che metterai nelle due cartelle DOVRANNO AVERE LO STESSO NOME. fai leggere alla funzione il contenuto della cartella delle miniature, però nel link richiami l’immagine contenuta nella cartella delle immagini “grandi”, dovrebbe funzionare visto che le immagini hanno lo stesso nome
esatto, il cms del mio programmatore funziona proprio così
sarebbe meglio creare un file php che legga le immagini, gestisca le dimensioni e sputi fuori l’immagine delle dimensioni desiderate. Esistono classi già pronte che fanno questo lavoro.
Piccola critica: ho aggiunto il feed nel mio feed reader convinto fosse un buon sito, ma se le guide sono su questo livello, stiamo freschi. HTML.it almeno ha un tono più austero nello spiegare le stesse cose basilari e non fa sentire il lettore un inetto.
Ultimamente state a fare post di “linking”, ma nulla di sostanzioso. Avete dalla vostra un ottimo dominio, sfruttate di più i contenuti originali.
Spero che il tutto sia in direzione di crescita, non critico per sminuire, ma per incentivare.
@ n3GRo: ho anche il mio lavoro, e non posso creare post originali tutti i giorni.
io ringrazierei Dario che si è dato da fare per creare questo articolo
…ho risolto così… non so se è giusto ma sembra funzionare…
“galleria.inc.php”:
<?php
function galleria($cartella){
$listaFile = scandir($cartella);
foreach($listaFile as $value){
if($value == ‘.’ || $value == ‘..’){
continue;
}
echo ‘‘;
}
}
?>
“galleria.php”:
ops… non avevo pensato che i commenti accettano html… comunque ho modificato così
(senza *)
mettilo fra blockquote o code
Complimenti per l’articolo, secondo me il PHP spiegato in questo modo si apprende MOLTO meglio piuttosto che spiegato in modo freddo ed “austero”.
ho risolto mettendo
non so se sia corretto ma pare funzioni
@n3gro: hai da segnalare degli script per il ridimensionamento delle miniature?
Credo che l’ottica del tutorial fosse fornire uno spunto per automatizzare un procedimento che con solo html diventa lungo. Credo ci si possa implementare un po’ di cose utili (resize immagini, inserimento nel db, verifica formato e peso dei files…) per maggiori informazioni basta una ricerchina su google e si trovano molte risorse utili per neofiti e non.
Grazie a tutti per i complimenti e per le critiche.
Ci tengo a dire che gli articoli che sto scrivendo sono volti principalmente ad aiutare i web designer freelance, che sono l’utenza più attiva da queste parti, nella realizzazione dei siti dei loro clienti, usando php.
Yoris se vuoi postare del codice forse ti conviene metterlo in un file txt e caricarlo su un server, mi sa che fai prima
ragazzi ma esistono prototype scriptaucolus jquery gia pronti all’uso dobbia scervellarci per capire il php?? e poi siamo web design non programmatori cmq io ho usato ligthbox
@mariodesign : prototype jquery mootools…ecc…non hanno niente a che vedere con php. Con php puoi anche scrivere codice jquery o mootools. Ed è dall’intreccio tra javascript e linguaggi server side che nasce AJAX e tutte le classi messe a disposizione da questi framework per effettuare chiamate HTTP asincrone. Un tutorial su questi argomenti farrebbe capire l’importanza del php tanto quanto javascript . Diversi linguaggi che interagiscono…per ottenere quello che si chiama web 2.0
inoltre se parli di lightbox…devi sapere che di lightbox ce ne sono tante. Se è una lightbox che nello scorrere 400 immagini (esempio) pretende di fare questo lavoro in 1 unica pagina caricandole prima tutte in background e visualizzandotele dopo ad 1 ad 1…bhe…campa cavallo. Se è una lightbox “furba” che usa le richieste asincrone ad 1 pagina php…Ecco come puoi visualizzare centinaia o migliaia di foto e il php assume un significato.
@mariodesign: è necessario sì. come fai ad estrarre da un db un valore,, un’immagine, un testo? con javascript? eheh
forse non hai chiaro php cosa fa e cosa fa un javascript, prima impara la differenza
io in questi giorni sto proprio usando php per estrarre immagini e news da un db nel quale sono stati inseriti da un cms molto semplice creato da un mio collega programmatore. e per mostrare le immagini vi sto aggiungendo il plugin lightbox jquery già conosciutissimo.
vabbe io sono del parere che il web design èuna cosa il progrsammatora è un altra sarà che nell’azienda dove lavoro ognuno ha un suo compito…
ma certo, in un’azienda sono più netti i confini, ma un freelance deve cavarsela anche con queste cose.
nessuno ti obbliga a leggere questi articoli però mariodesign
non capisco il tuo commento iniziale eheh
per quanto riguarda la divisione tra programmatori e designer avete entrambi ragione secondo me…perchè il programmatore deve conoscere bene la programmazione e masticare un pò di design…viceversa il designer deve essere un buon designer e masticare un pò di programmazione….quindi separazione delle competenze ma apertura verso le competenze altrui.
È solo che il php mi sta un po sulle…… Ops nn si può dire:)
shah tutto qui cmq chi ha scritto l’articolo per caso è di cosenza? O provincia? Io sn prov di cs:-)
A me fa uscire pazzo js, ma pian piano lo sto dominando
Comunque si, sono di Cosenza, tu ti dove sei? Meglio se continuiamo in privato, contattami su info [at] dariovenneri.it
Bellissimo articolo, questo è il modo ideale per spiegare php ai cosiddetti “designer” testoni.
Io per abitudine avrei buttato tutto su DB complicando anche un po’ le cose, questo articolo mi è stato molto utile, alla faccia delle critiche ;D
Carino questo articolo!
Lo ho messo subito in pratica, ma alla fine dell’elenco delle fotografie mi aggiunge un’ulteriore elemento con il nome della cartella.
Qualche suggerimento?
Che scemo, avevo messo la directory delle foto grandi dentro quella delle thumb, ovvio che mi visualizzava il nome della directory
Bella guida, semplice e coincisa. Hai spiegato bene tutti i passaggi. E’ rivolta a chi è alle prime armi ma è davvero ben fatta.
salve, ho seguito il tutorial ed è tanto chiaro che anche un caprone come me in php riesce a farlo funzionare anche se qualcosa di strano mi tira fuori e cioè nella lista delle immagini c’è una
sapete spiegarmi perchè e come faccio a toglierla?
grazie
ciao
redpanda
e ti pareva…ho provato a caricare i miei file di prova della galleria dal locale al mio spazion web e quando vado richiamare la pagina della galleria mi da questo errore
Fatal error: Call to undefined function: scandir() in /web/htdocs/www.redpanda.it/home/galleryprova/galleria.inc.php on line 7
come posso risolvere?
grazie ciao
il problema sul mio spazio web l’ho risolto, dovevo aggiornare la versione di php.
ma la creazione di una immagine vuota dal nome Thumbs.db ancora non riescoa risolverla.consigli?
grazie ciao
per chi volesse vedere la galleria http://www.redpanda.it/galleryprova/foto.php
Allora, scandir(); è una funzione disponibile a partire da php 5.
Per php 4 il codice è un pochino più lungo, ma il funzionamento è identico:
$folder = opendir($cartella);
while (false !== ($item = readdir($folder))) {
$listaFile[] = $item;
}
closedir($folder);
Thumbs.db viene creato automaticamente da windows quando visualizzi l’anteprima delle immagini con esplora risorse. Puoi anche cancellarlo.
Comunque mi sa tanto che nel prossimo articolo amplieremo lo script, in modo che selezioni solo le immagini, perché qui stanno venendo fuori troppe eccezioni
grazie per la risposta quindi se volessi togliere la thumb vuota dovrei ricorrere allo script nella versione php4,
o sono due cose diverse?
grazie
ciao
No, no, lo script che ti ho postato per php4 fa la stessa cosa di scandir, ovvero legge tutto il contenuto della cartella.
E’ che stavo rispondendo al tuo messaggio senza ancora aver letto di thumbs.db
ok. ho fatto come mi hai indicato cioè cancellato la thumb.db e sembra non essere comparsa il link per vedere la galleria è http://www.redpanda.it/galleryprova/foto.php
ciao
Scusate ma quando premo sull’immagine vedo l’immagine su uno sfondo bianco in alto a sinistra e non viusalizzo i bottoni avanti e idnidetro come posso fare?
ragazzi io ho copiato lo scrip ma non mi funziona mi da un errore alla linea 8..sicuramente è per le virgolette ma non so come aggiustarlo qualcuno mi da una mano? qui c’è il codice..
<?php
function galleria($cartella){
$listaFile = scandir($cartella);
foreach($listaFile as $value){
if($value == ‘.’ || $value == ‘..’){ continue;}
echo ‘’;
}
}
galleria(‘monumenti’);
?>
sopratutto questa parte qui non va
echo ‘’;
non capisco perche l’echo non me la visualizza sul vostro sito
Ciao, praticamente il problema è dovuto al fatto che nel tutorial i caratteri sono sbagliati.
Praticamente esistono due tipi di apici, alcuni più inclinati a vedersi), ed hanno un valore diverso che php interpreta diversamente.
Questo penso sia dovuto a qualche cambiamento per la nuova grafica in Italian Web Design (il tutorial è molto vecchio).
Comunque per risolvere il problema o riscrivi il testo tu stesso, con la tua tastiera, in modo da fare gli apici corretti, oppure scarichi il file di esempio.
Sperando che il coso dei commenti mi permetta di farteli paragonare, in PHP:
Questo apice: ‘ = funziona
Questo apice: ‘ = non funziona
Queste virgolette: ” = funzionano
Queste virgolette: ” = non funzionano
Prova anche tu per capire meglio.
Ecco: ad esempio i commenti qui rendono i caratteri tutti uguali, ma se copi le virgolette e gli apici contenuti nel codice dell’articolo con quelli contenuti nel mio commento noterai che sono diversi.
ehm…non per cosa ma ho ricopiato gli apici e non vedo nessuna differenza tra quelli che funzionano e quelli che non funzionano Oo
Non copiarli dal mio commento perché quando vengono postati il blog automaticamente li rende tutti uguali.
Confronta quelli del post con quelli contenuti nel file degli esercizi.