Photogallery
Questo progetto prevede di fare una pagina per mostrare le proprie foto (es. di una gita) in un sito pubblico, con tanto di pagina di amministrazione.
Premessa
Per svolgere questo progetto bisogna disporre di un certo numero di foto da pubblicare, esempio da una gita scolastica.
Le foto vanno caricate su un sito che offre il servizio di condivisione del link alla singola foto, ad esempio si può usare Google Drive, ImgBB, o PostImages.
Qui alcune guide che spiegano come fare:
https://www.aranzulla.it/come-condividere-file-con-google-drive-934475.html
I servizi sono facili da usare, ed alla fine si avranno dopo il caricamento un certo numero di URL con le immagini.
Descrizione del progetto
In questo progetto bisogna realizzare due pagine html:
1) admin.html
2) index.html
Admin.html
In questa pagina bisogna:
– creare una form con un input (text) e un pulsante “aggiungi”;
– mostrare una lista.
Ogni volta che viene inserita una nuova stringa di input (cioè la URL di una nuova foto), questa viene aggiunta alla lista, salvata nella cache remota, ricaricata dalla cache remota e mostrata all’utente. Sarà presente per ogni elemento un pulsante per cancellare quella specifica foto.
Il JSON che sarà caricato sul server avrà questa forma:
[
"https://miafoto1.jpg",
"https://miafoto2.jpg",
...
]Come si può vedere la pagina è quasi identica al progetto Todo, ricordarsi di cambiare la chiave di cache.
Index.html
Questa pagina dovrà contenere le foto. Qui la parte Javascript deve prevedere:
– un caricamento del JSON (precedentemente prodotto) dalla cache;
– una funzione render che va a popolare la pagina.
Tutto il resto è HTML e CSS dove mettete un titolo una descrizione o anche altro materiale, e dove si consiglia di usare le classi di Bootstrap per avere un risultato migliore.
Qui sotto alcuni spunti di layout da cui prendere ispirazione:
https://themeforest.net/category/wordpress?term=photo%20gallery