PIXEL

Play List Quarta Parte.

La Prima Parte Visibile: La Testata.

Iniziamo con la parte visibile, ovvero la testata, a dare un senso alla pagina. Qui rappresentiamo dei tab che contengono icone e testo. I tab sono realizzati in html con del php inframezzato per decidere cosa visualizzare o meno e per la visualizzazione dei dati sotto indicati.

Il primo tab riguarda l’utente che viene indicato con la sua “username”. Passandoci su col mouse, fa venir giù un sotto-menu  costituito da due voci: “Cambia Password” ed “Esci”. Si intuisce la loro funzione.

Il secondo tab riguarda la “Playlist corrente”. Questo tab non ha sotto menu ma è sensibile al click del mouse. Infatti, cliccandoci su, si accede alla’area delle impostazioni. La funzione della playlist corrente è passata in secondo piano da quando permetto, con un popup, di scegliere in quale playlist inserire il titolo prescelto. Ma permette di tenere sottocchio la quantità di titoli inseriti se la si usa.

Il terzo tab ci informa su quale delle due versioni stiamo lavorando (nella pagina delle impostazioni è possibile cambiare la versione). La versione “On Line” o la versione “Off Line”. La differenza tra le due sta nella “rapporto” con le periferiche. In quella “Off Line” non è possibile usare lo scan. In questa versione lo scopo dell’applicazione è quella di essere usata solo come creatore di play list e mi permette di usarlo come demo sui server web.

L’ultimo tab è il “bottone” Esci. Fa il logout e vi butta sulla pagina di login.

 

Le operazioni che effettua in modo invisibile (ovvero il codice php) sono: attribuzione dei valori alle variabili da visualizzare e conteggio del numero di titoli presenti nella play list corrente.

Segue la barra superiore, top_bar.php.

top_bar.php
<?php
// top_bar.php
$plid = "";
$desc ="";
// qui il controllo è ridondato. Di fatto è già presente in head_utf8.php 
// qui scindo i due valori che porta playlistcorr, 
// separati da |, così popolo $plid (l'id della play list attiva al momento) 
// e $desc (la sua descrizione) 
if(isset($_SESSION['playlistcorr'])) list($plid, $desc) = explode("|", $_SESSION['playlistcorr']);

// per sapere quanti titoli ci sono nella playlist corrente
$npl = 0; // numero di titoli
// richiama il file config.php per i dati 
// di accesso e controllo al DB
require "config.php"; 
// definisco la query in faccio il conteggio 
// totale dei titoli della play list corrente
// da rappresentare nella top bar
$query = "select count(id) from playlist WHERE plid = '$plid' ";
// esegui la query
$res = $mysqli->query($query);
// conto le righe esistenti
$row = $res->fetch_row();
// assegno il valore del numero dei record
// alla variabile $npl
$npl = $row[0];
// chiudo il result set
$res->close();
// chiudo la connessione al dB
$mysqli->close();

// qui stabilisco se gestire l'ambito 
// lavorativo della play list
// ovvero se lavoro on line ($online settato ad "on") 
// oppure off line ($online non settato oppure vuoto)
// la differenza e' data dal fatto che 
// di fare i controlli di esistenza on line
// dei file dei titoli o meno
if(isset($_SESSION['online'])) $online = $_SESSION['online']; else $online = "";
?>
<!-- TOP BAR PARTE IN HTML -->
 <div id="top-bar"> <!-- il div piu' esterno -->
     <div class="page-full-width cf">
        <ul id="nav" class="fl">
           <!--// voce utente della top bar in cui si visualizza l'utente
               // e visualizza il sotto menu per il cambio della password
               // ed il bottone di uscita dal programma //-->
           <li class="v-sep"><a href="#" class="round button dark menu-user image-left tooltip" 
                      title="Gestione Utente">Utente: 
                      <strong><?php echo $_SESSION['username'] ?></strong></a>
              <ul>
                  <!--// opzione per la variazione della password dell'utente //-->
                 <li><a href="change_password.php">Cambia Password</a></li>
                  <!--// opzione per l'uscita dalla play list //-->
                 <li><a href="logout.php">Esci</a></li>
              </ul> 
           </li>
              <!--// opzione per cambiare la play list corrente //--> 
              <!--// dalla pagina delle impostazioni (settings) //-->
              <li class="v-sep"><a href="settings.php?plid=<?=$plid?>&reset=ok" 
                                        class="round button dark menu-settings image-left tooltip" 
                                        title="Clicca per cambiare la <em>Playlist corrente</em>">
                                        Playlist corrente: <strong>
                                        <?php if(isset($_SESSION['playlistcorr'])) 
                                              { echo $desc . " " . $npl; } ?>
                                </strong></a>
                <ul>
                   <!--// le due opzioni che seguono vengono visualizzate //-->
                   <!--// nella fase "on line" //-->
                   <?php if($online == "on") { ?> 
                   <!--// opzione per cambiare il percorso di riferimento //-->
                   <!--// per lo scan delle periferiche ed il filtro iniziale di ricerca //-->
                   <li><a href="settings.php?plid=<?=$plid?>&reset=ok" class="menu-settings tooltip" 
                               title="Clicca per cambiare il percorso principale da cui prelevare i 
                               file e gestire la ricerca nell'<em>Archivio Titoli</em>">
                               Percorso Principale: <?php if(isset($_SESSION['cartella'])) 
                                                          { echo $_SESSION['cartella']; } ?>
                       </a></li>
                   <!--// opzione per gestire le estensioni da includere //-->
                   <!--// nello scan delle periferiche //-->
                   <li><a href="gestextw.php" class="menu-settings ic-modifica tooltip" 
                               title="Gestione delle estensioni da includere nello inserimento 
                               dei file da periferica">
                               Estensioni File</a></li>
                  <?php } ?>
                </ul>
           </li>
           <!--// tab di visualizzazione se "on line" o "off line" //-->
           <li class="v-sep"><a href="#" class="round button dark ic-info image-left tooltip" 
                                title="La differenza fra 'On Line' e 'Off Line' &egrave; se i 
                                file sono disponibili o meno">Versione: <?php if($online == "on") 
                                { echo '<font color="#00ff00">"On Line"</font>';} 
                                else { echo '<font color="#ff0000">"Off Line"</font>'; } ?>
                             </a></li>
          <!--// opzione per il log out //-->
          <li><a href="logout.php" class="round button dark menu-logoff image-left tooltip" 
                                         title="Effettua il Log Out">Esci</a></li>
        </ul> <!-- FINE nav -->
     </div> <!-- FINE full-width -->  
 </div> <!-- FINE DELLA TOP BAR -->

Aggiungo qui il config.php per avere un’idea visiva del suo contenuto. Va utilizzato ogni volta ritorna necessario un accesso al DB.

config.php
<?php

 // dati di accesso al DB
 $dbserver = "localhost";
 $dbuser = "root";
 $dbpwd = "";
 $db = "prova";

 // apertura della connessione al DB
 $mysqli = new mysqli($dbserver, $dbuser, $dbpwd, $db);

 /* verifica connessione */
 if (mysqli_connect_errno()) {
      // se la connessione non riesce ad essere stabilita
      // Segnala l'errore
      printf("Connessione fallita: %s\n", mysqli_connect_error());
      // esce dall'applicazione
      exit();
 } 

 ?>

Segue la parte di codice per la visualizzazione del menu dell’applicazione. I tag utilizzati sono gli stessi dei tab della top bar, quello che differisce sono le classi css utilizzate. La variabile $active tiene conto del tab (in questo caso opzione) che rimane attivo in base alla scelta effettuata. La variabile di sessione ‘online ‘ decide quale tab visualizzare in funzione della versione attiva. Infine, visualizza il logo (includendo logo.php). Le opzioni disponibili sono:

Archivio Titoli: un modo per definire l’elenco dei titoli raccolti a la loro gestione;

Titoli Playlist: qui si possono gestire le playlist memorizzate;

Intestazioni Playlist: le intestazioni possono essere gestite qui;

Come ultima opzione se “On Line“,

Aggiorna Lista/Locandine: permette lo scan dei titoli e delle locandine, l’inserimento dei singoli titoli e lo scan delle locandine.

Se “Off Line“,

Ins. Singolo Titolo: permette di inserire i titoli singolarmente.

Qua sotto il codice per il menu superiore: header_menu.php.

header_menu.php
<!-- HEADER MENU -->
<div id="header-with-tabs">
     <div class="page-full-width cf">
         <!--// tabs del menu principale //--> 
         <ul id="tabs" class="fl">
              <!--// opzione per la scelta della lista dei titoli //-->
             <li><a href="tabella.php" class="<?php if ($active == 'elen') echo 'active-tab'; ?> 
                                       dashboard-tab round dark tooltip" 
                                       title="Archivio da cui prelevare i Titoli da inserire 
                                       nella <em>Playlist</em>">Archivio Titoli
                 </a>
             </li>
             <!--// opzione per la scelta della gestione dei titoli della play list //-->
             <li><a href="playlist.php" class="<?php if ($active == 'play') echo 'active-tab'; ?> 
                                        report-tab round dark tooltip" title="Gestione delle Playlist">
                                        Titoli Playlist
                 </a>
             </li>
             <!--// opzione per la scelta della gestione delle intestazioni delle play list //-->
             <li><a href="intestplaylist.php" class="<?php if ($active == 'addp') echo 'active-tab'; ?> 
                                              stock-tab round dark tooltip" 
                                              title="Le <b>intestazioni</b> sono necessarie per gestire 
                                              le <em>Playlist</em>">Intestazioni Playlist
                 </a>
             </li>
             <!--// i due tab che seguono sono disponibili alternativamente //-->
             <!--// in funzione dello stato della variabile di sessione $online //-->
             <!--// se $online uguale ad "on", mostra il tab per per operazioni di servizio //-->
             <!--// ovvero lo scan con le diverse opzioni gestibili dall'interfaccia //-->
             <?php if(isset($_SESSION['online']) && $_SESSION['online'] == "on") { ?>
               <li><a href="lista.php" class="<?php if ($active == 'agga') echo 'active-tab'; ?> 
                                       purchase-tab round dark tooltip" 
                                       title="Area di servizio per il recupero dei file dalle 
                                       periferiche">Aggiorna Lista / Locandine
                   </a>
               </li>
             <?php } else { ?>
               <!--// se $online non e' settato o vuoto, l'opzione visualizzata e'//-->
               <!--// quella dell'inserimento manuale del singolo titolo senza //-->
               <!--// il controllo sulla periferica //-->
               <li><a href="singolo.php" class="<?php if ($active == 'agga') echo 'active-tab'; ?> 
                                         purchase-tab round dark tooltip" 
                                         title="Inserire i Titoli singolarmente">Ins. Singolo Titolo
                   </a>
               </li>
             <?php } ?>
        </ul>
        <!-- FINE tabs menu -->
        <!--// include il codice per la visualizzazione del logo //-->
        <?php include_once("logo.php"); ?>
      </div>
      <!-- FINE div full-width -->
</div>
<!-- FINE header -->

Il logo

logo.php
<!-- Il logo verrà automaticamente ridimenzionato a 30px di altezza. -->
<a href="#" id="company-branding-small" class="fr"><img src="images/logo/logo.png" alt="Il logo"/></a>

Nella quinta parte parleremo del corpo dell’applicazione. Quella più “corposa”.

Prima Parte | Seconda Parte | Terza Parte | Quarta Parte | Quinta Parte | Sesta Parte | Settima Parte | Ottava Parte | Nona Parte

Hits: 266

%d blogger hanno fatto clic su Mi Piace per questo: