Lista degli utenti registrati con profilo e avatar | Joomla

Recentemente ho lavorato alla realizzazione di un portale, che, come da richiesta doveva contenere una serie di componenti tipici di un portale web e che sia ottimizzato per l’utilizzo da parte di una redazione utonta di una consulta universitaria. Ho pensato subito ad un CMS, ed in particolare a Joomla ( l’ultima realease ad oggi la v2.5.x).

Il portale doveva contenere: articoli, eventi, documenti organizzati in directory, un forum, un motore di ricerca, una newsletter e la profilazione degli utenti iscritti al sito con campi personalizzati e la possibilità di visualizzare l’elenco dei profili in una lista ordinata. Soprattutto su quest’ultima richiesta ho avuto un po’ di dubbi sull’utilizzo di joomla, infatti, che io sappia, joomla non offre granché in fatto di componenti facili da usare e che siano gratis (visto il budget insufficiente del progetto).

Allora perché non crearsi il proprio componente Profili?

Nulla di più semplice, perché forse non tutti sanno che Joomla ha già qualcosa di simile integrato nel CMS, basta solo configurarlo per benino e fare qualche piccola modifica qua e là per adattarlo alle nostre esigenze. Per raggiungere il nostro scopo utilizzeremo un paio di plugin che di default sono disabilitati e per questo molti ignorano la loro esistenza.

Il primo è User Profile: questo plugin permette di estendere i soliti campi del profilo, nome, cognome, username e mail, in qualcosa di più completo con città, indirizzo, CAP, telefono, sito web e molti altri, se questi campi non ci dovessero soddisfare, allora vedremo in un prossimo tutorial come inserirne di nuovi.

Il secondo plugin è Contact Creator: questo plugin non fa altro che creare una scheda Contatto in automatico ogni qualvolta che un utente si registra al sito. La scheda contatto, per intenderci, è quella che andiamo a creare nel componente Contatti per far visualizzare il form di invio mail. Ma in questo caso utilizzeremo il componente per gestire i profili degli utenti. Credetemi è la stessa e identica cosa :)

Dopodiché come ogni buona scheda profilo che si rispetti andremo a inserire nel profilo la possibilità di caricare una foto dell’utente e farla visualizzare nella scheda.

Step 1 – I plugin:

Abilitiamo i 2 plugin User Profile e Contact Creator da Estensioni > Gestione Plugin. Ora possiamo configurare i plugin cliccando sul loro nome, per User Profile possiamo decidere se disabilitare o meno alcuni campi, renderli Opzionali o Obbligatori, in questa fase possiamo lasciare tutto di default; per Contact Creator assicuriamoci di impostare “Autopubblica il contatto” su “Si”, invece il campo “Categoria” identifica una categoria di contatti di default da assegnare all’utente in automatico, scegliamone una.

Step 2- La vista contatto:

Adesso andando a creare un nuovo contatto, da front-end simulando una nuova registrazione, oppure da back-end, è uguale, noterete una nuova raccolta di campi, ovvero quelli recentemente abilitati con il plugin User Profile, inserite un po’ di informazioni per compilare i vari campi e salvate, a questo punto entra in gioco il plugin Contact Creator il quale creerà un nuovo contatto nel componente contatti. Attenzione: le informazioni che contiene il profilo contatti (che per la maggior parte coincidono) non sono le stesse che abbiamo inserito al momento della creazione dell’utente, infatti questi campi sono dell’utente e non della scheda contatti e sono memorizzati da tutt’altra parte. Quello che dobbiamo fare ora è nascondere in front-end i campi del componente Contatti e abilitare la visualizzazione dei campi del plugin User Profile.

Andiamo in Componenti > Contatti > Contatti e clicchiamo l’icona Opzioni per configurare il componente, in alto a destra. Nella prima tab, “Contatti”, impostiamo “Nascondi” su tutti i campi meno che il campo “Mail”, “Nome” e “Profilo” . Visualizza formato su “Esteso”.

Step 3 – La lista profili:

Adesso andiamo a creare una nuova voce di menù e come tipologia scegliamo “Contatti > Lista dei contatti di una categoria”; nella tab “Impostazioni richieste” configuriamo la stessa categoria che abbiamo configurato anche nel plugin Contact Creator e poniamo la nostra attenzione sulla tab Lista contatti (che configura l’aspetto della lista) andando a nascondere le informazioni che non ci interessano visualizzare nella lista dei profili. Da questa voce di menù visualizzeremo la lista degli utenti registrati.

Step 4 – Immagine profilo:

A questo punto le nostre schede sono create e visualizzate, non ci resta che caricare una foto per ogni profilo e per fare questo ci viene in aiuto il plugin Profile Picture, che si scarica da qui. Questo plugin permette di fare l’upload di un’immagine per ogni profilo utente e fa tutto il lavoro sporco di ridimensionamento e ottimizzazione, noi dobbiamo solo inserire l’immagine nel posto giusto. Dopo aver installato il plugin, lo abilitiamo, non necessita di nessuna configurazione.

Ora scriviamo il codice necessario per visualizzare l’immagine del profilo all’interno della scheda contatti che è la nostra scheda profilo in front-end. Editiamo quindi il file: componentscom_contactviewscontacttmpldefault.php e inseriamo nel punto dove più si addice, accanto al nome dell’utente ad esempio, dipende anche dal template che state utilizzando, il seguente script:

<?php

//IMMAGINE PROFILO

$cparams = JComponentHelper::getParams (‘com_media’);

jimport(‘mosets.profilepicture.profilepicture’);

$profilepicture = new ProfilePicture($this->contact->user_id);

if( $profilepicture->exists() )

{

echo ‘<img src=”‘.$profilepicture->getURL().’” alt=”‘.$this->contact->name.’” />’;

}else{

echo ‘<img src=”./media/plg_user_profilepicture/images/filler/avatar_miss.jpg” alt=”avatar mancante” />’;

}

?>

// FINE IMMAGINE PROFILO

Invece in questa cartella media/plg_user_profilepicture/images/filler/ inseriamo un immagine riempimento nel caso in cui un utente non carichi nessuna immagine, e la chiameremo avatar_miss.jpg.

Questo stesso script (eventualmente andando a modificare la porzione di codice che restituisce l’id dell’utente, che nell’esempio sopra è $this->contact->user_id), può essere utilizzato anche all’interno del ciclo che restituisce la lista delle schede profilo. In modo da avere ad esempio una lista con foto, nome e cognome, e mail. Cliccando sul nome viene fuori il profilo completo.

Finito, ora abbiamo la lista degli utenti registrati al sito, con informazioni estese e personalizzabili accompagnata da un avatar dell’utente.

Conclusione

La guida ha voluto dimostrare in breve un’ottimo modo per visualizzare le schede degli iscritti al sito utilizzando le potenzialità di joomla senza spendere cifre per comprare componenti anche troppo complessi per quello che serve a noi.

Quello che avete fatto, se lo avete fatto, scommetto che sarà un po’ bruttino perché non abbiamo curato per niente l’aspetto grafico, ma se avete un minimo di conoscenze html/css e un po’ di pazienza non ci si mette molto a fare un lavoro professionale e graficamente pulito, sotto trovate un’esempio.

Andando a spulciare nella documentazione del plugin Profile Picture, inoltre si possono fare altri moduletti carini, come mostrare gli avatar degli ultimi utenti collegati al sito e magari linkare l’avatar alla scheda del profilo.

Sperimentatevi ;)

Esempio (Click per ingrandire)

Vista della lista

Vista profilo completo

  • Pingback: Aggiungere campi personalizzati in joomla 2.5 | Graphical

  • Vincenzo

    Utilissimo, lo implementerò subito per i nuovi utenti che si registreranno ma… io ho una lista di utenti già registrata, come posso fare per trasferirla nei Contatti?
    Grazie al modulo Contact Creator vengono creati i nuovi contatti per le nuove registrazioni, ma per gli utenti già esistenti come si procede?
    Grazie per la risposta.

    • Davide Calignano

      Ciao Vincenzo la guida non funziona con gli utenti già registrati. Dovrai creare le schede contatto manualmente purtroppo, ma se hai delle competenze su SQL puoi sempre creare uno script che fa il lavoro sporco per te :)

      Davide

      • Vincenzo

        Grazie Davide, sei stato di grande aiuto, non immagini quanto… Se passi da Forlì sei mio ospite. ;-)

        • Davide Calignano

          Grazie! :D

  • http://eaglesmilano.it Gianni

    Ciao a tutti, ho provato la spendida guida ma quando mi registro e carico l’immagine mi da il seguente errore:
    Registrazione fallita: No valid image was loaded.

    Grazie in anticipo a chi mi saprà aiutare….
    Gianni

    • Davide Calignano

      Prova a controllare i permessi in questa cartella: media/plg_user_profilepicture/images/ e in tutte le sotto-cartelle.

      Davide

      • http://eaglesmilano.it Gianni

        Ciao Davide grazie mille per la risposta…
        Ho messo come permessi 777 e mi da sempre lo stesso errore…
        Però adesso se vado in gestione utenti da li riesco ad aggiungerla mentre prima non riuscivo…

        E’ durante la registrazione che mi da errore ma l’utente lo registra lo stesso senza foto…

        • Davide Calignano

          Prova a caricare formati diversi (jpg, png) e vedi cosa succede, prova a anche a inserire dimensioni in pixel differenti, se non ricordo male se l’immagine è minore di 200 pixel da problemi.

          D

        • http://costaitofficer.altervista.org ermanno

          ciao hai risolto alla fine? inquanto credo di avere le tue stesse problematiche

        • Angelo

          Credo succeda con le immagini scaricate da facebook.

  • http://www.toodogs.it luca

    Ciao sono riuscito a seguire con successo le prime fasi del tutorial ma ho qualche difficoltà a visualizzare l’immagine nel front-end. In pratica se modifico il file indicato (componentscom_contactviewscontacttmpldefault.php) non ottengo alcun cambiamento… probabilmente perché sto lavorando con un template a pagamento della Yootheme ma non capisco quale file gestisce il front-end e dove incollare il codice.
    Sapreste aiutarmi?

    • Davide Calignano

      Ciao solitamente yootheme fa l’override dei file, ovvero il template è costruito in modo da far valere i suoi file per alcuni componenti e non quelli di Joomla. Cerca in questa cartella, dovresti trovare un file corrispondente: ##joomla_folder##templatesyoo_xxxhtmlcom_contactcontact.

      D

  • http://www.costaitofficer.altervista.org ermanno

    ciao scusami ho eseguito la tua guida pasos passo ma non funziona, nel senso che sicuramente sono io a sbagliare potresti darmi una mano?

    innanzi tutto non cpaisco:
    Editiamo quindi il file: componentscom_contactviewscontacttmpldefault.php e inseriamo nel punto dove più si addice, accanto al nome dell’utente ad esempio, ecco dovre che specificamente dovrei inserire questa porzione di codice? ti mando la mia pagina default.php originale in qualche casella di posta???

    ad ogni modo quando provo a registrarmi mi da errore puoi vederlo anche andando al link del sito e provando ad effettuare una registrazione..

    spero in un tuo riscontro grazie

    • Davide Calignano

      Caro Ermanno, al contrario di come scritto nel forum Altervista, la guida funziona. La frase “nel punto dove più s’addice” significa che lo puoi inserire dove vuoi, se guardi la struttura del codice noterai che è sempre un blocco di codice simile che si ripete per ogni campo, quindi inserirlo “sopra” o “sotto” determina l’ordine che poi troverai in front-end. Buon lavoro.

      • http://costaitofficer.altervista.org ermanno

        ciao scusami , allora procediamo per passo se guardi sul sito sul menu principale ci sta scritto registrazione mettendo i campi obbligatori e un immagine (ho provato anche di 100*100 pixel ma mi da sempre no valid image was upload un jpg sto provando quindi che puo essere? i permessi cartella sono tutti settati a 777

        • http://costaitofficer.altervista.org ermanno

          dimenticavo ho provato con file png jpg gif piu piccoli di 200pixel e anche pu grandi di qualche kb e di qualche mb ma niente sempre il solito msg no valide image was uploaded anch es emi pare gli utenti li registri comunque..ma appunto senza foto

  • Raffaele

    ciao Davide, un chiarimento. Ho joomla 2.5 e mi interessa solamente visualizzare la lista contatti della categoria aggiungendo la foto, come nella tua immagine, lavorando solo dal backend, il frontend non mi interessa. Devo solo scaricare il plugin e aggiungere lo script all’interno di default.php e magicamente escono le foto assegnate ai singoli contatti di joomla? grazie

    • Davide Calignano

      Il plugin permette di fare l’upload di un’immagine per ogni utente, lo script di visualizzarle nel front-end (ma in realtà dove si vuole, basta posizionare lo script in maniera opportuna).

  • Paolo

    salve Davide,
    io collocando lo script in default.php ricevo solo messaggi di errore… potresti fare un esempio pratico?
    grazie

    • Paolo

      grazie

  • vincenzo

    ciao io quando vado ad inserire lo script nel file indicato mi da errore di sintassi su queste 2 voci non capisco perché:

    {

    echo ‘getURL().’” alt=”‘.$this->contact->name.’” />’;

    }else{

    echo ‘’;

    }

    • vincenzo

      questa: echo ‘getURL().’” alt=”‘.$this->contact->name.’” />’;

      questa: echo ‘’;

  • antimo

    Ciao Davide, ho seguito passo passo la tua guida ma non sono riuscito ad ottenere le modifiche da me volute.. vorrei visualizzare una immagine avatar nella lista di contatti (sia creando il contatto da back-end che da front-end: per il momento mi basterebbe da back-end). Utilizzo inoltre un template proprietario Yootheme ed ho letto quanto da te spiegato ad un altro utente in merito.
    Le mie domande sono:
    Dove trovo il “ciclo”, di cui parli sopra, all’interno del quale inserire il tuo codice? Come impedisco o modifico il default.php del template proprietario, al fine di impedire l’override dei file?

    Ti ringrazio anticipatamente e spero che la tua risposta aiuti me e altri utenti col mio stesso problema.
    Saluti

  • http://www.andreagiudice.eu/ Andrea

    Finalmente ho risolto una brutta grana con questa tua guida, Davide.
    Ti chiedo solo una cosa: non c’è proprio modo per fare visualizzare i campi “Città”, “Provincia” e “Ruolo”?
    Li devo per forza inserire io a manina tutte le volte che un utente si iscrive?

  • http://www.csono.it giacomo

    ciao stavo provando a creare le schede profilo utenti ma il codice quando lo inserisco nella cartella mi da questo errore:
    Errore di analisi : errore di sintassi, T_STRING inaspettato, in attesa ‘,’ o ‘,’ in / home / csonoit / public_html / components / com_contact / views / contact / tmpl / default.php on line 50
    non riesco a capire dovè il problema
    spero mi possa aiutare ciao

  • http://www.squaladesign.eu Daniela

    Ciao Davide, grazie per le tue guide che mi hanno risolto un problema enorme, ora però ho un problema con l’ultima dicitura, quando inserisco il codice che hai dichiarato nel file componentscom_contactviewscontacttmpldefault.php appena clicco da front-end la voce “prova contatto” che ho creato prima mi esce il seguente errore:

    Parse error: syntax error, unexpected ‘src’ (T_STRING), expecting ‘,’ or ‘;’ in C:wampwwwProvaNuovoProfiloLogincomponentscom_contactviewscontacttmpldefault.php on line 29

    come devo fare?

    Grazie