8 aprile 2017

Unite Gallery, una manciata di database e WebSite X5 q.b.

Questa volta, dalla cucina è uscito un mix delle nostre esperienze precedenti: invio e lettura dei dati al database, generazione dinamica di una galleria immagini a cui abbiamo abbinato un plugin veramente versatile, ricco di effetti tutti rigorosamente responsive: Unite Gallery.

Rispetto all'articolo precedente, in cui abbiamo visto come leggere dinamicamente le immagini contenute in una cartella, senza occuparci di come queste vengono caricate sul server, in questo articolo vedremo come rendere il tutto più semplice, anche per un utente poco esperto, prevedendo il caricamento delle immagini attraverso l'Oggetto Modulo Invio E-mail di WebSite X5 e la gestione delle stesse attraverso l'Oggetto opzionale DataBase Viewer.

Ecco la nostra demo:

demo unite gallery su db
DEMO

Vediamo ora come procedere:

Plugin Unite Gallery


Scarichiamo dal sito dell'autore i file del plugin Unite Gallery e, dopo aver estratto il file .zip, creiamo sul server una cartella che chiameremo unite-gallery e carichiamo in essa il contenuto della cartella dist del file estratto. In questo modo avremo a disposizione tutti i temi che il plugin prevede, con le relative risorse.


Nella nostra demo abbiamo provato tre tipi di gallerie: Tiles Justified, Grid Theme e Carousel. Ogni tipo di galleria richiede l'inclusione del file JavaScript unitegallery.js (o nella versione compatta unitegallery.min.js) e del file CSS unite-gallery.css che costituiscono "il motore" del plugin, più altri file .css e .js che dipendono dal tema scelto.

Quando avremo scelto il tema da utilizzare potremo anche cancellare dal server i file non necessari.

Gestione dati


Al Passo 1, Impostazioni Avanzate, Gestione Dati inseriamo i dati di accesso al database forniti dal nostro provider. Indichiamo anche il nome della Cartella su Server con accesso in scrittura poiché qui verranno salvate le immagini che invieremo sul server con il modulo e-mail.

Pagina inserimento e gestione delle immagini


Il form che noi abbiamo preparato prevede, oltre al campo per l'inserimento dell'immagine, alcune opzioni:
  • la possibilità di associare ad ogni immagine una descrizione che verrà visualizzata nell'immagine ingrandita oppure, in alternativa, la possibilità di scegliere come descrizione il nome del file dell'immagine. La descrizione, comunque inserita, varrà anche come valore dell'attributo alt. Qualora nessun campo venisse compilato la descrizione dell'immagine ingrandita e l'attributo alt resteranno vuoti;
  • la possibilità di associare un ulteriore collegamento sull'immagine, oltre a quello all'immagine ingrandita.
Impostiamo quindi nel progetto una pagina protetta ed inseriamo in essa un Oggetto Modulo Invio E-mail.
Nella scheda Elenco inseriamo i campi necessari, come da immagine:


E' importante, oltre al tipo di campi presenti, definire anche, nella scheda Opzioni di ciascun campo, i valori di Attributo <name> e Nome del Campo del Database, valori che verranno utilizzati sia nel codice PHP per la visualizzazione finale delle immagini che nel codice JavaScript (vedremo questo più avanti) che si occupa di mostrare/nascondere il campo relativo alla descrizione in base all'opzione scelta.









Nella scheda Invio come metodo di Invio dei dati scegliamo dal menu a tendina Invia i dati ad un database, valorizzando tutti i campi necessari: il database (nel menu a tendina compare il database precedentemente impostato in Gestione Dati), il nome della tabella in cui verranno memorizzati i dati e l'eventuale indirizzo e-mail a cui verrà notificato ogni nuovo inserimento.

Inseriamo quindi anche l'oggetto opzionale Database Viewer da utilizzare per la modifica dei dati inseriti attraverso il modulo e-mail, impostando i parametri necessari. Nel caso in cui questa pagina venga realizzata per essere utilizzata da un utente poco esperto, si può impedire l'aggiunta di un nuovo record, funzione superflua dal momento che c'è il modulo e-mail che svolge questo compito, con questo CSS che nasconde il relativo controllo, da inserire in Proprietà Pagina, Esperto, Prima della chiusura del tag HEAD:

<style>
.jtable-toolbar-item-add-record {
  display: none !important;
}
</style> 

Sempre in Proprietà Pagina, Esperto, Prima della chiusura del tag HEAD, inseriamo questo codice JavaScript che permette di mostrare/nascondere, nel form, il campo "Descrizione" in base alla scelta effettuata nel campo precedente:

<script>
$(document).ready(function () {
    $("input[name='checkdesc[]']").change(function () {
         if ($(this).is(":checked")) { 
       $("textarea[name='descrizione']").parents(".imObjectFormFieldContainer").css('display', 'none');
       $("textarea[name='descrizione']").val('');
    } else {
         $("textarea[name='descrizione']").parents(".imObjectFormFieldContainer").css('display', 'inline');
    }
   });
   $('input:reset').click(function () {
        $("textarea[name='descrizione']").parents(".imObjectFormFieldContainer").css('display', 'inline');
    })
});
</script> 

Ovviamente se decidiamo di cambiare il valore dell'attributo name dei campi interessati, dovremo modificare il codice.

QUI è visibile un duplicato della nostra pagina di gestione che, per ovvi motivi, è stata modificata in modo che sia non funzionante.


Pagina visualizzazione gallery


Nella pagina dove vogliamo visualizzare le immagini, inseriamo un Oggetto Codice HTML impostando l'altezza dello stesso a 0 (zero) ed inseriamo questo codice:
<!-- ===============================================
Unite Gallery by Max Valiano http://unitegallery.net
Database class: by Incomedia Srl https://www.incomedia.eu  
PHP code  by https://quellidelcucuzzolo.blogspot.it
Please do not remove credit  
================================================ -->
<div id="UniteGallery" style="display:none;">
<?php

//DA PERSONALIZZARE

//Inserire il nome della tabella del database
$qtable = "ugallery";

//Inserire i nomi dei campi del database
$qimmagine = 'immagine';    //campo File Allegato
$qcheck    = 'checkdesc';   //campo Scelta Multipla
$qdesc     = 'descrizione'; //campo Area di Testo
$qlink     = 'link';        //campo Testo

//Inserire l'altezza massima delle miniature
$thumbsH = 300;

//CONNESSIONE

//Prelievo automatico dei dati inseriti nel programma
$qchiave   = array_keys($imSettings['databases']);
$qdati     = getDbData($qchiave[0]);
$qhost     = $qdati['host'];
$quser     = $qdati['user'];
$qpassword = $qdati['password'];
$qdatabase = $qdati['database'];
$qfolder   = $imSettings['general']['public_folder'];
$qdb       = new ImDb($qhost, $quser, $qpassword, $qdatabase);
if (!$qdb->testConnection())
    die("Connessione non riuscita");

//SELECT

//Selezione di tutti i record della tabella
$qitem = $qdb->query("SELECT * FROM $qtable");

//OUTPUT

$urlfile = dirname($_SERVER['PHP_SELF']);
//Iterazione dell'array e creazione della struttura HTML
if ($qitem) {
    $qitem = array_reverse($qitem);
    foreach ($qitem as $val) { 
        if (isset($val[$qdesc]) && $val[$qdesc] != '')
            $qdescimg = $val[$qdesc];
        else if (isset($val[$qcheck]) && $val[$qcheck] != '') {
            $qdescimg = preg_replace('/_\d+/', '', $val[$qimmagine]);
        } else
            $qdescimg = "";
        if (isset($val[$qlink]) && $val[$qlink] != '') {
            echo '<a href="' . $val[$qlink] . '">' . "\n";
        }
        if (isset($val[$qimmagine]) && $val[$qimmagine] != '') {
            echo '<img src="image.php?height=' . $thumbsH .'&image=' . $urlfile . '/' . $qfolder . '/' . $val[$qimmagine] . '" data-image="' . $qfolder . '/' . $val[$qimmagine] . '" alt="' . $qdescimg . '" />' . "\n";
        }
        if (isset($val[$qlink]) && $val[$qlink] != '') {
            echo '</a>' . "\n";
        }
    }
}

//CHIUSURA DELLA CONNESSIONE

$qdb->closeConnection();
?>
</div>
<!-- richiamo funzione Unite Gallery e impostazione stile -->
<script>
jQuery("#UniteGallery").unitegallery({
  tiles_type: "justified",
  tile_show_link_icon: true,
  lightbox_overlay_opacity: 0.95
});
</script>
<!-- Unite Gallery END -->

Le variabili da personalizzare sono quelle indicate all'inizio del codice.
Il richiamo della funzione Unite Gallery, alla fine del codice, dovrà essere personalizzato in base al tema scelto e alle opzioni che si intendono utilizzare e per questo si rimanda al sito dell'autore.

Per la generazione automatica delle miniature, abbiamo utilizzato anche questa volta lo script Smart Image Resize, versione di luciorota: scarichiamo da QUI il file .zip, scompattiamolo e carichiamo nella root del server il file image.php  con un programma FTP o allegandolo nella scheda Esperto dell'Oggetto Codice HTML stesso, lasciando vuoto il campo Percorso relativo sul Server.
Ricordiamo che questo script richiede che sul server siano abilitate le librerie GD.

In Proprietà Pagina, Esperto, impostiamo php come estensione del file generato. Sempre in questa scheda, inseriamo il seguente codice personalizzato Prima dell'apertura del tag HTML:
<?php
require_once("res/x5engine.php");
?>

Inoltre, Prima della chiusura del tag HEAD, inseriamo i richiami ai file JavaScript e CSS del plugin Unite Gallery, file che cambiano in funzione del tema scelto.
Ad esempio, per la galleria Tiles Justified, inseriamo questo codice:

<link rel="stylesheet" href="unite-gallery/css/unite-gallery.css" type="text/css" />
<script type="text/javascript" src="unite-gallery/js/unitegallery.min.js"></script> 
<script type="text/javascript" src="unite-gallery/themes/tiles/ug-theme-tiles.js"></script>

Ovviamente la galleria sarà visibile solo online. Se si vuole scrivere un avviso sulla pagina dell'anteprima è possibile inserire anche questo script:

<script>
$(document).ready(function() {
  // funzionalità offline
  if (location.host == "127.0.0.1:8080")
    $("#UniteGallery").after("La gallery si visualizzerà solo quando il sito verrà esportato su Internet");
});
</script>


Buon appetito... sperando che non facciate indigestione :)


51 commenti:

  1. Buongiorno e Buona Domenica delle Palme...
    come al solito preciso e dettagliato regalo...
    tank's

    RispondiElimina
  2. ciao, se si volesse mettere la didascalia delle foto non tutta di seguito ma su più righe senza mettere un
    ma utilizzare l'a capo del form, mi ricordo che avevamo già parlato di questa cosa ma non ritrovo più il suggerimento... grazie...

    RispondiElimina
    Risposte
    1. Ciao,
      avevamo parlato di questa funzione: nl2br()
      Ricorda però che, in questo caso, la descrizione immagine viene prelevata dall'attributo alt e l'inserimento del tag <br /> in questo attributo potrebbe risultare poco ortodosso.

      Anche se sta per finire, Buona Domenica anche a te.

      Elimina
  3. Salve, grazie e complimenti per il bel regalo di Pasqua :)
    Ho un dubbio: se nella pagina gestione modifico il Database Viewer per poter cancellare i record, se poi elimino un record, la foto (associata a questo record) verrà visualizzata o no?

    RispondiElimina
    Risposte
    1. Prego :)
      Beh, certo che verrà cancellata se elimini il relativo record... l'oggetto DataBase Viewer serve anche per questo.

      Elimina
    2. Ok perfetto, grazie.

      Elimina
  4. noooo, io non so come ma dopo innumerevoli prove, ho trovato il punto dove inserire il nl2br... potete controllare se è giusto così? pare che funzioni... grazie... so che non è formalmente corretto... ma ad esempio se si hanno didascalie di quadri, la suddivisione in righe è quasi un obbligo...

    echo '................image.php?height=' . $thumbsH .'&image=' . $urlfile . '/' . $qfolder . '/' . $val[$qimmagine] . '" data-image="' . $qfolder . '/' . $val[$qimmagine] . '" alt="' . nl2br($qdescimg) . '" />' . "\n";

    http://www.skeggia12.it/test/v13-1/unitedgallery/

    RispondiElimina
  5. Che dire... Ancora una volta complimenti vivissimi e grazie!!!!!!!!! :-) :-D

    RispondiElimina
    Risposte
    1. Grazie Giuseppe e complimenti al tuo stomaco che è riuscito a digerire il malloppone :)

      Elimina
  6. Ma si, certo! Grazie ragazzi, auguri di cuore di una felice e serena Pasqua per voi e tutti i vostri cari.

    RispondiElimina
    Risposte
    1. Grazie e Auguri di Buona Pasqua anche a te

      Elimina
  7. Ciao. Credo di aver fatto tutto per bene ma nel momento in cui carico le immagini tramite il form mail queste non vengono poi visualizzate nella pagina Gallery sotto forma di miniature. Sono presenti nella tabella del database creata su Altervista, lì le vedo ogni volta che le carico tramite il form mail. Potrebbe essere un problema di attivazione delle librerie GD su Altervista? A me è sembrato di capire, da ricerche fatte sul web, che Altervista le abbia già attive in automatico tali librerie su PHP5.6. Sembrerebbe proprio quello il problema: la mancata generazione delle anteprime...
    Questo è il link della bozza dove sto testando il vostro Unite Gallery su DB: http://www.bozzasito12.altervista.org
    Su "Gallery" c'è il pulsante che porta alla pagina protetta dell'upload.
    Nome Utente: admin
    Password: admin
    Dove potrebbe essere l'errore o il problema? Grazie in anticipo.

    RispondiElimina
  8. P.S. ho fatto un test per vedere se sono attive le GD library sul mio spazio web Altervista e sono abilitate. E' venuto fuori questo:
    GD Support enabled
    GD Version bundled (2.1.0 compatible)

    Quindi... non è quello il problema :-(

    RispondiElimina
  9. qui il link per il test php:
    http://www.bozzasito12.altervista.org/test.php

    RispondiElimina
  10. Un dubbio: ma in questa parte di codice da voi creato devo personalizzare qualcosa?
    $qfolder = $imSettings['general']['public_folder'];

    RispondiElimina
    Risposte
    1. Ciao Giuseppe,
      da quello che si vede nel sorgente sembra che tu abbia indicato il nome errato della tabella del database in cui hai salvato i dati o che il nome della tabella utilizzata contenga caratteri particolari (trattino, punto, spazio, etc), dal momento che manca completamente l'output PHP. Per quanto riguarda la cartella, il suo nome viene automaticamente prelevato da quello che tu hai inserito nel programma in Gestione Dati.
      Facci sapere.

      Elimina
  11. Ciao, grazie mille per la celere risposta. Premetto che è da poco che mi cimento con database e tabelle, il problema sicuramente dipende da me...
    La tabella ha come nome "tabella01" (chiramente senza virgolette), forse i numeri creano problemi? Io ho inserito il nome della tabella in Website, in "invio dei dati" in Oggetto Modulo Mail, l'ho chiamata "tabella01" e nel Database di Altervista si è creata in automatico la tabella con tale nome e con i campi "checkdesc", "link", "descrizione", "immagine" (vabbè, elencati qui nel messaggio alla rinfusa) e in più, sempre in quella "tabella01", è stato creato in automatico un campo denomitato "id". In quella tabella, se carico delle foto dal form mail online creato secondo le vs. indicazioni, vedo, di volta in volta, le immagini caricate. Non saprei altro. forse dovevo crearla io nel Database di Altervista la tabella e non lasciarlo fare al programma? Cmq farò delle altre prove, mi documenterò meglio e vedrò di venirne a capo. Al momento userò la galleria dinamica dell'altro vs. esempio che mi funziona benissimo caricando le immagini nella cartella sul server. Grazie ancora. Buon week-end

    RispondiElimina
    Risposte
    1. I numeri non danno problemi e non devi creare manualmente la tabella. Hai riportato il nome della tabella nello script inserendola nella variabile $qtable?

      //Inserire il nome della tabella del database
      $qtable = "ugallery";

      Elimina
  12. Sì, sì lo avevo fatto ma invece che scrivere tabella01 avevo scritto tabella1, è quello l'errore! Me ne sono accorto nel ricontrollare il codice. Thank you, sicuramente ora funzionerà mettendo il nome giusto della tabella. Vi faccio sapere. Grazie mille! :-)

    RispondiElimina
  13. Perfetto, funziona, era una mia svista sullo 0 che non era stato aggiunto al nome della tabella. Grazie davvero. Tutto molto bello e perfetto!

    RispondiElimina
  14. Ciao, vi disturbo ancora... Le immagini caricate nella Gallery le vedevo solo io, strano. Altre persone le hanno caricate senza problemi e io le vedevo le immagini caricate da loro, loro no però.
    Vedevo le immagini che man mano caricavo io o altri utenti fino a che non ho aggiornato la cache del mio browser di navigazione: ora non vedo nulla, pagina Gallery completamente vuota. Come può essere? Nel Database Viewer le immagini sono presenti e visibili man mano che si caricano.
    Qui il link della pagina Gallery: http://www.bozzasito12.altervista.org/gallery.php

    Grazie in anticipo per l'eventuale aiuto.

    RispondiElimina
  15. Forse ho risolto: ho cancellato tutti i file presenti sullo spazio web, ho ricaricato tutto online e ora sembra funzionare.

    RispondiElimina
  16. salve, e feramente utile grazie anticipatamente peccato che non riesco ad usarla ho seguito tutte le istruzioni il db funzione vedo irecord che inserisco tramite il modulo, non riesco a visualizzare le foto da cosa può dipendere?

    questo e il link modulo
    http://www.succhiailnettare.it/p52.php

    user admin
    pass admin

    link visualizzazione immagini
    http://www.succhiailnettare.it/p53.php

    RispondiElimina
    Risposte
    1. Ciao,
      c'è un errore di connessione al database, è visibile nel sorgente della pagina.
      Probabilmente nel programma hai inserito più di un database. Perché lo script utilizzi il database corretto devi modificare l'indice dell'array memorizzato in questa variabile:
      $qdati = getDbData($qchiave[0]);
      dove 0 è il primo database inserito, 1 è il secondo e così via.

      Elimina
    2. grazie per avermi risposto io ho solo un database e secondo la logica dovrebbe essere 0 giusto?

      Elimina
    3. Abbiamo letto il tuo commento, anche quello successivo che cancelleremo subito perché hai inserito troppi dati delicati!

      L'errore che hai fatto sono le modifiche alle variabili $qhost, $quser, $qpassword, $qdatabase: qui non devi modificare nulla, devi mantenere lo script originale. I valori vengono prelevati automaticamente da quanto hai inserito nel programma.

      Elimina
    4. grazie gentilissimo lo provo subito

      Elimina
  17. adesso sembra che carica ma non visualizza le foto

    RispondiElimina
  18. tutto ok ora carica per usuffruire del plugin devo registarlo? sulle foto viene una scritta unregistred version

    RispondiElimina
  19. scusa erano le immagini che caricavo

    RispondiElimina
    Risposte
    1. OK, ricordati anche, per sicurezza, di cambiare le credenziali di accesso all'area riservata.

      Elimina
  20. Ciao a tutti, i complimenti sono d'obbligo.. guide semore molto utili!
    Ho seguito tutti i passaggi o perlomeno credo.
    Db funziona... ma non visualizzo gallery sulla home..
    ho un dubbio magari il problema è questo:

    1 Indichiamo anche il nome della Cartella su Server con accesso in scrittura. Quale cartella?

    questa è la pagina con il db e l'inserimento
    user VALEDANI
    pwd COLORFUL_GALLERY
    http://www.colorfulfitness.it/colorful_gallery.php

    Grazie anticipatamente per le risposte!

    RispondiElimina
    Risposte
    1. ho inserito la cartella public di aruba ma le immagini non vengono salvate in nessuna cartella :(

      Elimina
  21. Buongiorno,
    immagini vengono regolarmente salvate nella cartella del server ma continuo a non visualizzare la galleria. Può essere un problema legato alle libreria gd? Ho un dominio aruba windows e ne ho richiesto attivazione al gestore poichè ho letto che per alcuni domini windows sono disponibili le librerie. Mi sorge una domanda perchè le gallerie predefinite di website funzionano regolarmente? e' forse possibile installare le libreria direttamente sul server?

    Grazie

    RispondiElimina
    Risposte
    1. Ciao,
      oltre alla necessaria presenza delle librerie GD, lo script image.php (che serve per la creazione delle miniature) crea una cartella di nome imagecache; devi assicurarti che la cartella sia stata creata e che abbia i permessi di lettura/scrittura, altrimenti creala tu.
      Vediamo anche una barra retroversa che non dovrebbe essere presente nel percorso delle miniature ma prima di indagare ulteriormente incomincia a sistemare quello che ti abbiamo scritto.

      Le gallerie di WebSite sono statiche, questo è un sistema dinamico.

      Elimina
  22. Ok grazie per ora, la cartella l ho creata manualmente.. Attendo risposta dal gestore del dominio per le librerie dg. Buona serata

    RispondiElimina
  23. buongiorno, le librerie sono attive come da comunicazione del gestore: http://colorfulfitness.it/ver.php

    Le immagini vengono salvate correttamente in un cartella della root principale, ma non viene generata la galleria. Ho creato la cartella imagecache come da vostra indicazione.

    Buona giornata
    Adriano

    RispondiElimina
    Risposte
    1. Ciao,
      come ti abbiamo già scritto, la cartella imagecache deve avere i permessi di scrittura, a noi risulta che non li abbia.
      Verifica ed eventualmente provvedi.

      Per quanto riguarda la barra retroversa nel percorso delle miniature, modifica in QUESTO MODO il codice relativo alla loro generazione.

      Ti consigliamo di indicare la cartella public in "Gestione dati" oppure una di tua scelta (impostando correttamente i permessi) e non la cartella App_Data come adesso.

      Elimina
  24. nel file images.php il percorso delle miniature è il seguente define('CACHE_DIR_NAME','/imagecache/');

    RispondiElimina
  25. Ciaoo a tutti , ho seguito le istruzioni ma quando vado a caricare il file la risposta che mi da è la seguente:

    Warning: mysqli::mysqli(): (HY000/2002): A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond. in D:\inetpub\webs\prolococlaviereit\res\x5engine.php on line 3908
    Unable to connect to db

    RispondiElimina
    Risposte
    1. Per verificare se fai tutto correttamente oppure se c'è qualcosa che non va a livello server (sei su Microsoft-IIS/8.5) ti consigliamo di esportare il sito (con le dovute modifiche) su Altervista.

      Elimina
  26. Salve, ho implementatola vostra procedura ma la pagina non visualizza la gallery. Dove sbaglio? Grazie!
    La cartella dove vengono inviati i file si chiama "novita"
    La pagina per del form è: http://adsistemirelax.com/carica-elimina-foto-su-novita.php
    la pagina per la visualizzazione delle foto è: http://adsistemirelax.com/novita-.php
    Nell'hosting sono abilitate le librarie GD e la cartella è abilitata ai permessi in scrittura.
    Grazie mille e complimenti come sempre del vostro prezioso aiuto!

    RispondiElimina
    Risposte
    1. L'immagine 3b2956ab63b46b019590aecf3a9a_893.jpeg in realtà non c'è e questo "blocca" lo script.

      Elimina
    2. L'avevo caricato e forse cancellata..grazie mille!

      Elimina
  27. Ciao a tutti.
    Sto inserendo lo script in un mio sito, però vorrei utilizzare il tema "carousel".
    Il problema è che vedo uno slider con una sola immagine.

    Sto fabendo un po' di prove qui: www.radiodigitalia.net/p/gallery.php

    Grazie, Federico

    RispondiElimina
    Risposte
    1. Ops.
      Dopo l'aggiornamento di WebsiteX5, dalla versione 17.0.4 alla 17.0.5, tutto funziona bene.

      Elimina
  28. complimenti davvero. Volevo chiedere se c'è un modo per poter caricare più foto e non una alla volta. Grazie

    RispondiElimina
    Risposte
    1. Ciao,
      il caricamento delle immagini presentato in questo articolo avviene tramite l'Oggetto Modulo Invio E-mail di WSX5 quindi con tutti i suoi pro e contro.

      Elimina

Nota. Solo i membri di questo blog possono postare un commento.