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 o altro evento.

Caricare le foto su https://ws.cipiaceinfo.it/imgu/ (per chi ha le autorizzazioni) o altro servizio simile (per chi non le ha). Caricare almeno 10 fotografie.

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 i seguenti campi:

• Nome foto
• URL foto (caricata nel passo precedente)
• Descrizione
• Valutazione (da 1 a 5)
• pulsante submit

– mostrare la lista delle foto inserite, che verranno caricate da local storage, se presenti (vedi sotto).

Comportamento:

• ogni volta che l’utente inserisce una nuova foto, la foto viene mostrata con titolo e descrizione e valutazione nella lista.
• Ogni elemento della lista presenta un pulsante delete per cancellar.a
• Dopo ogni inserimento viene salvato in localstorage l’elenco delle foto, sotto forma di array di dizionari.

Il JSON che sarà caricato sul server avrà questa forma:

[
  {
    nome: "....",
    url: "....",
    descrizione: ".....",
    valutazione: x
  }
]

Index.html

Questa pagina mostrerà la photogallery. Comportamento:

• all’avvio caricare la foto da localstorage;
• verrà mostrata una griglia bootstrap di foto (una foto per colonna in modalità mobile)

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