Area riservata di WebSite X5 13: inserire in header un menu per l'utente loggato

Nell'articolo precedente abbiamo visto come inserire un avatar per l'utente registrato nell'area riservata di WebSite X5 13.

In questo articolo vedremo come inserire nell'header del sito (intestazione) un pulsante per il login all'area riservata che, nel momento in cui un utente è loggato, si trasforma in un piccolo menu che consente di accedere alla pagina profilo ed effettuare il logout.

Questa è la nostra demo:

DEMO

Rispetto all'articolo precedente si deve partire da un punto di vista diverso: il codice deve essere inserito in tutto il sito poiché l'output avviene nell'intestazione e si deve prevedere il riconoscimento della sessione utente. Gran parte del codice è già stata presentata e spiegata nell'articolo precedente che vi consigliamo di leggere e provare, ma cercheremo comunque di dare indicazioni sequenziali agevoli da seguire anche per chi non si fosse cimentato con il precedente esempio.

Poiché utilizzeremo codice PHP è necessario impostare l'estensione .php a tutte le pagine del sito.

Passo 1 - Impostazioni

In Impostazioni » Avanzate » Statistiche, SEO e Codice » Esperto scegliamo dal menu a tendina Prima dell'apertura del tag HTML; incolliamo questo codice che definisce tutte le variabili necessarie per il funzionamento dello script e richiama il file x5engine.php:

<?php
/* Code by Giorgio C. & MAeSI - quellidelcucuzzolo.blogspot.it
Please do not remove credit */
$qblog = $_SERVER['PHP_SELF'];
if (strpos($qblog, '/blog/') !== false || strpos($qblog, '/cart/') !== false)
    $qpath = '../';
else
    $qpath = '';
require_once($qpath . "res/x5engine.php");
$qfolder  = $imSettings['general']['public_folder'];
$qurl     = pathCombine(array(
    $imSettings['general']['url'],
    $qfolder
));
$pa       = Configuration::getPrivateArea();
$dati     = $pa->whoIsLogged();
$username = $dati['username'];
$realname = $dati['realname'];
$datiUser = $pa->getUserByUsername($username); //SOLO EDIZIONE PROFESSIONAL 
$email    = $datiUser['email']; //SOLO EDIZIONE PROFESSIONAL
$userpage = $pa->getLandingPage(); //Pagina di ingresso
$avatar   = glob($qpath . $qfolder . "/avatar-" . $username . ".*");
$tsfoto   = 0;
if (empty($avatar))
    $foto = $qurl . "/default.png";
else {
    foreach ($avatar as $value) {
        if (filemtime($value) > $tsfoto) {
            $tsfoto  = filemtime($value);
            $fotonew = $value;
        }
    }
    $foto = str_replace("../", "", $fotonew);
    $foto = str_replace($qfolder, $qurl, $foto);
}
$n = time();
?>

Le uniche variabili a cui porre attenzione sono quelle commentate: chi utilizza lo script con l'edizione Evolution deve rimuovere le due righe di codice con il commento //SOLO EDIZIONE PROFESSIONAL.

Sempre in questa sezione, scegliamo ora dal menu a tendina Dopo l'apertura del tag BODY ed inseriamo questo codice che gestisce la visualizzazione del menu utente solo se l'utente è loggato, in caso contrario si visualizza il pulsante per il login:

<section class="ms-menu-Utente">
<?php
if ($username)
  {
    echo '<div class="msLog wrapper-dropdown-5"><img src="' . $foto . '?' . $n . '" alt="avatar" />' . $username,
         '<ul class="dropdown">', 
         '<li><a href="' . $qpath . 'profilo.php"><i class="fa fa-user"></i>Profilo</a></li>',
         '<li><a href="' . $qpath . $userpage .'"><i class="fa fa-home"></i>Pagina di ingresso</a></li>', //Pagina di ingresso 
         '<li><a href="' . $qpath . 'res/imlogout.php"><i class="fa fa-remove"></i>Logout</a></li>', 
         '</ul></div>';
  }
else
  {
    echo '<div class="msLog msIn">',
         '<ul>', 
         '<li><a href="' . $qpath . 'imlogin.php"><i class="fa fa-key"></i>Login</a></li>',
         '</ul></div>';
  }
?>
</section>

Quando l'utente è loggato, il menu contiene solo due voci: un link ad una pagina protetta e nascosta chiamata "Profilo" in cui verranno richiamati tutti i dati relativi all'utente, di cui parleremo in seguito, e un link per il logout.
Attenzione: se date un nome diverso a questa pagina, dovete anche cambiare il nome nel codice (profilo.php).

Nel pulsante e nelle voci del menu abbiamo inserito i tag per visualizzare le icone font Awesome. Per tutte le informazioni su come integrare questo font nel programma vi invitiamo a leggere questo articolo.

Per gli stili grafici del menu abbiamo utilizzato questo tutorial (Demo 5) pubblicato su tympanus.net, sito che presenta sempre esempi molto accattivanti.
Al CSS proposto nel tutorial abbiamo fatto qualche piccola modifica. Potete scaricare il file da QUI ed allegarlo al progetto, sempre nella scheda Esperto, File allegati al codice, indicando come Percorso relativo sul Server il nome di una cartella a vostro piacere, ma avendo cura di spuntare la casella Collega il file.
 
Sempre in questa sezione, Prima della chiusura del tag HEAD, incolliamo il codice jQuery che si occupa di mostrare/nascondere le voci del menu e regolare la sua posizione rispetto al menu mobile:

<script>
$(document).ready(function() {
  $('.msLog').on('click', function(event) {
    $(this).css('overflow', 'visible').toggleClass('active');
    event.stopPropagation();
  });
  $('#imMnMn.main-menu .hamburger-button').click(function() {
    $('.msLog').css('z-index', 10);
  })
  $('.hamburger-menu-close-button, .hamburger-site-background').click(function() {
    $('.msLog').css('z-index', 10001);
  })
});
</script>

Non è obbligatorio, ma vi consigliamo di inserire, sempre in questa sezione, anche questo script che si occupa di nascondere il codice in anteprima: in caso contrario si visualizzerebbero parti di codice che comprometterebbero la visione del template in anteprima.

<script>
$(document).ready(function() {
  // funzionalità offline
  if (location.host == "127.0.0.1:8080")
    $(".ms-menu-Utente").html('<div class="msLog msIn"><ul><li><a href="#nogo"><i class="fa fa-key"></i>Login</a></li></ul></div>');
});
</script>

La pagina profilo

Inseriamo nella Mappa del sito una pagina protetta e nascosta che chiameremo "Profilo" ed inseriamo un Oggetto Codice HTML con questo codice che permette di visualizzare i dati dell'utente connesso e il form per cambiare l'avatar:

 <!-- Code by Giorgio C. & MAeSI - quellidelcucuzzolo.blogspot.it
   Please do not remove credit  -->
<section id="ms-datiUtente">
<!-- dati utente -->
<?php
echo '<p id="datiUser">',
     '<img src="' . $foto . '?' . $n . '" alt="avatar" />',
     '<span>Username:</span> ' . $username . '<br />',
     '<span>Nome completo:</span> ' . $dati['realname'] . '<br />',
     '<span>E-mail:</span> ' . $datiUser['email'] . '<br />', // SOLO EDIZIONE PROFESSIONAL 
     '</p>';
?>   
</section>
<div style="clear:both"></div>
<!-- form per cambio avatar -->
<form id="cambioAvatar" enctype="multipart/form-data" method="POST" action="uploadavatar.php">
 <div><label for="avatar">Cambia l'immagine del profilo:</label></div>
 <input type="file" name="image" id="avatar" />
 <input type="submit" value="invia" />
</form>
<!-- messaggio di conferma/errore upload -->
<div id="messaggio">
<?php
if (!empty($_SESSION['message'])) {
    echo $_SESSION['message'];
    unset($_SESSION['message']);
}
?> 
</div>

Chi utilizza l'edizione Evolution deve rimuovere la riga di codice che contiene il commento //SOLO EDIZIONE PROFESSIONAL.
Non ci resta che allegare al progetto il file uploadavatar.php e scrivere le regole CSS che definiscono l'aspetto della pagina. Codici e procedure sono stati già spiegati nell'articolo precedente:

• cartella su server, immagine di default e regole CSS
• lo script per l'upload

Per completezza, indichiamo anche il nuovo codice PHP/JS da utilizzare per visualizzare l'avatar dell'utente loggato nei commenti del guestbook e del blog.

I commenti del guestbook e del blog

In Proprietà della pagina che contiene l'Oggetto Guestbook, e/o in Proprietà della pagina speciale Blog, Esperto, Prima della chiusura del tag HEAD inseriamo questo codice:

<script>
$(document).ready(function() {
    $("input[id$='topic-form-name']").val("<?php echo $realname ?>");
    $('input[id$="topic-form-email"]').val('<?php echo $email ?>'); //SOLO EDIZIONE PROFESSIONAL
    $('input[id$="topic-form-url"]').val('<?php echo $foto ?>').parent().hide();
  $(".topic-comments-user").each(function() {
    var $item = $(this).find("a");
    if ($item.length != 0) {
      var customCampo = $item.attr("href");
      var customNome = $item.contents();
      $item.replaceWith(customNome);
      $(this).prepend("<img class='campoCustomGb' src='" + customCampo + "' alt='avatar' />");
    }
  })
});
</script>

Anche in questo caso, chi lavora con l'edizione Evolution deve cancellare la riga di codice che contiene il commento //SOLO EDIZIONE PROFESSIONAL.
Per tutto il resto facciamo riferimento a quanto già scritto nell'articolo precedente.


Aggiornamento del 13/11/2017

Aggiunto un link alla "Pagina di ingresso" nel menu utente.
Le due righe di codice aggiunte sono commentate.
La demo di questo articolo non è aggiornata.