PIXEL

Play List Terza Parte.

Finestra di popup

Finita la prima fase di reperimento delle risorse per la nostra tabella dei titoli, ovvero lo scan delle periferiche, tocca alla seconda fase, ovvero alla realizzazione della play list in se. Questa fase passa per la creazione delle interfacce web necessarie ad elencare, ricercare, riordinare la lista dei titoli ed eventualmente modificare ed eliminare un titolo ed ad inserirlo nella tabella della play list e poi ad elencare ed eventualmente eliminare un titolo dalla play list ed anche sceglierne la posizione di esecuzione al suo interno. In poche parole la gestione della tabella dei titoli e delle tabelle della play list. La tabella della play list è suddivisa, per mia (e spero anche la vostra) comodità, in due tabelle, una di testata ed una di righe costituita dai titoli.

In questo contesto ho aggiunto un elemento che mi permette di scegliere al meglio il titolo che vorrei vedere e/o ascoltare e quindi inserirlo nella play list. Si tratta della locandina. Di quest’ultima ne parleremo in seguito perché richiede dei chiarimenti ulteriori.

2) La gestione delle tabelle. Iniziamo dalla interfaccia più corposa per questa applicazione: l’interfaccia della lista dei titoli. Uno dei punti da risolvere di una lista, sopratutto se lunga, è quello della sua paginazione, in altre parole si tratta di scorrere la tabella senza dover scorrere chilometri di pagina. Di soluzioni ce ne sono diverse in giro e quella che ho trovato più elegante è quella che usa jQuery + ajax con php. Ma quando ho iniziato ho pensato di usare solo PHP e così è stato, anche se poi mi sono ricreduto quando ho iniziato ad usa i popup di jQuery. Ma vedremo più avanti. Il “motore” base della paginazione l’ho tirato giù da questo sito: http://www.plus2net.com/php_tutorial/php_paging-download.php. L’aspetto visivo e la composizione della pagina è derivata e personalizzata da questa applicazione: http://www.posnic.com/demo/posnic-1.02/. Questo è l’unico riferimento che ho: sridhar.posnic@gmail.com. In pratica ho utilizzato e modificato lo style.css e sfruttato la struttura html (div) del suo programma. Il poco codice PHP riutilizzato è quello relativamente al controllo di accesso, al logout e alla variazione della password, ma solo per non questione di tempi di realizzazione che altro. E anche a causa del tempo ho mantenuto parte della struttura delle cartelle. Ma passiamo al codice. Iniziamo col dare un senso alla pagina che verrà visualizzata. Tutte la pagine “statiche” avranno la stessa struttura, salvo necessità particolari:

    1. configurazione delle variabili globali e di quelle locali da utilizzare nella pagina;
    1. righe iniziali di accertamento del login effettuato, richiamo head_utf8.php;
    1. verifica delle variabili di sessione;
  1. inizio dell’html.

L’html ha le proprie regole (semplici) da seguire, non mi soffermo su tutte le specifiche necessarie, ma solo quello che uso:

  1. apertura del tag <html>;
  2. apertura del tag <head>;
  3. aggiunta di vari generi di tag (<meta>, <title>, </title>,…) ;
  4. link dei file e dei metodi necessari (.css, .js, …), richiamo file link.php;
  5. inserimento manuale degli script (<script></script>), richiamo file js-comuni.php;
  6. inserimento manuale degli stili (<style></style>);
  7. chiusura del tag </head>;
  8. apertura del tag <body>.

Inizio dell’interfaccia visibile:

    1. creazione della riga superiore definita “top bar”, richiamo top_bar.php;
    1. creazione del menu superiore, richiamo header_menu.php;
    1. creazione del corpo, la parte principale, “centrale” dell’applicazione. C’e’ di tutto dentro;
    1. creazione del piede di pagina, richiamo footer.php;
  1. chiusura della pagina visibile.

Il metodo prevalentemente usato è il get per il passaggio delle informazioni fra le pagine. Quintali di get! Uso anche il post, ma per il passaggio dati all’interno della stessa pagina e con ajax per il passaggio dati ad alcune pagine.

Nota: una delle difficoltà che ho dovuto affrontare e direi non completamente risolta, è stata quella della codifica dei caratteri. Nella lingua italiana usiamo gli apostrofi e le accentate. Questo si rivela spesso un aspetto critico tra la visualizzazione e la memorizzazione nella tabella. Usando la codifica UTF-8 spesso le accentate non vengono visualizzate correttamente. Quindi sono dovuto ricorrere a dei sotterfugi che vedremo in seguito.

Quella che segue è la parte iniziale di tabella.php.

$debug = false; // per debug :o) permette di visualizzare le righe delle query in esecuzione
$page_name="tabella.php"; //  nome del file php corrente utilizzato successivamente  

// intestazione del title in html
$pagina = "Elenco Titoli"; // titiolo della pagina

// variabile che permette di mantenere il tab del menu evidenziato
$active = "elen"; // tab evidenziato

// include della prima parte di codice
include_once("tpl/head_utf8.php");
// include della barra di testata
include_once("tpl/top_bar.php");
// include del menu
include_once("tpl/header_menu.php");

// include delle funzioni piu' usate	
require("tpl/funzioni.php");

Ecco il primo include (head_utf8.php). In questa parte di codice mi preoccupo di controllare se l’utente ha i diritti di accesso alla pagina. Se ha effettuato o meno il login. Controllo se le variabili di sessione necessarie sono definite. Inizio col codice html, includo le parti dinamiche (prefix.php), includo le parti comuni a tutte le pagine: link.php per importare i .css e .js esterni; js-comuni.php per il codice javascript da utilizzare in ogni pagina. Inizio la pagina html.

head_utf8.php
<!DOCTYPE html>
<?php
// head_utf8.php
session_start(); // inizio la sessione
if (!isset($_SESSION['username']) || $_SESSION['usertype'] != 'admin') { // se la variabile di sessione "username" non esiste.
header("location: index.php?msg=Fare il Log In per accedere!&type=error"); // Reindirizzo a index.php
}
error_reporting(0); // inibisco la visualizzazione degli errori su  schermo
if (!isset($_SESSION['playlistcorr']) || !isset($_SESSION['cartella'])) { // sel al variabile di sessione "playlistcorr" o "cartella" non esistono.
header("location: settings.php?msg=Playlist Corrente e/o Cartella non immessa/e!&type=error&reset=ok"); // Reindirizzo a settings.php
}
// ridondante per impostare un default nel caso di un accesso diretto alle pagine
if(!isset($_SESSION['online']) || $_SESSION['online'] != "on") $_SESSION['cartella'] = "/";
?>
<html lang="it">
  <head>
    <meta charset="utf-8">
    <title><?php include_once("tpl/prefix.php"); if(!isset($pagina)) {$pagina = "";} echo $pagina; ?></title>

    <!-- Optimize for mobile devices -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <!-- jQuery & JS files -->
    <?php include_once("tpl/link.php"); ?>
    <?php include_once("tpl/js-comuni.php"); ?>
  </head>
<body>
prefix.php
prefix.php contiene solo del testo lo uso come prefisso per il title della pagina

PIXEL -

Questa parte (link.php) è determinante per l’aspetto della pagine, tutta la parte grafica e il comportamento “visivo” degli oggetti a video con i file di tipo .css. Con i file di tipo .js si sfrutta il javascript, codice lato client che interagisce con la pagine in fase di run-time a diversi livelli. Qui, in questa parte di “codice”, includiamo i file .css ed i file .js che ritornano utili nella gestione della pagina. Qui gli  lo script più noto che utilizzo è jQuery con un paio dei suoi plugin. Tooltipster per la visualizzazione dei tooltip, l’interfaccia grafica di jQuery, il bpopup per i popup, ma verrà sostituito, man mano, dal più versatile ed efficiente plugin fancybox. Il file style.css lo affronteremo più avanti.

Per i browser Internet Explorer è previsto un correttivo visto che non è pienamente compatibile con i .css standard.

link.php
<link type="text/css" rel="stylesheet" href="css/style.css"> <!-- lo stylesheet standard -->
<script type="text/javascript" src="install/js-install/lib/jquery.min.js"></script><!-- js jQuery minimale -->
<link type="text/css" href="js/jquery-ui/themes/excite-bike/jquery-ui.css" rel="stylesheet"> <!-- UI di jQuery -->
<link rel="stylesheet" type="text/css" href="css/tooltipster.css" /> <!-- il css del plugin tooltipster -->
<script type="text/javascript" src="js/jquery-ui/jquery-ui.js"></script> <!-- js UI di jQuery -->
<script src="js/jquery.bpopup.min.js"></script> <!-- js del plugin bpopup -->
<script type="text/javascript" src="js/jquery.tooltipster.min.js"></script><!-- js del plugin di tooltipster -->
<script type="text/javascript" src="js/fancybox/jquery.fancybox.js?v=2.1.5"></script><!-- js plugin fancybox -->
<link rel="stylesheet" type="text/css" href="js/fancybox/jquery.fancybox.css?v=2.1.5" media="screen" /><!-- css del plugin fancybox -->
<!--[if IE]> <!-- correttivi per IE -->
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Js-comuni.php deve essere “pulito” da qualche riga lasciata in fase di test. Oramai usare solo le proprie routine di javascript è praticamente in disuso, in più c’e’ sempre una libreria che viene utilizzata. Una di queste librerie inserite nell’applicazione e proprio jQuery con alcuni dei suoi plugin. Qui l’utilizzo prevalente riguarda i popup di avvertimento e i popup che visualizzano le pagine di gestione lasciando la principale in sottofondo. Togliendo quella sensazione di “cambiare mondo” ad ogni operazione che dovrebbe essere svolta. Mantenendo il legame fra la pagina di partenza dell’azione e quella in cui l’azione si svolge. Non se vi capita di avere quel senso di disorientamento quando cambiate pagina ed avete quell’attimo in cui vi chiedete… e adesso? Ahh! Sì!! E procedete come se nulla fosse. Beh! Col metodo dei popup mi sento meno disorientato (fino a quando se ne apre uno alla volta, magari anche due…). Quindi, nello script che segue ho messo diversi popup, predefiniti una volta finita di caricare la pagina – $(document).ready(…), funzione di jQuery – richiamabili come funzione javascript, quando necessario, dalla pagina.

js-comuni.php
<script LANGUAGE="JavaScript">
 <!-- il codice javascript  
 $(document).ready(function () {
    // predefinizione del popup di eliminazione record
   $("#confirmDelete").dialog({
            resizable: false,
            width: 500, 
            modal: true,
            bgiframe: true,
            autoOpen: false
   });
    // predefinizione del popup inserimento record nella playlist
   $("#confirmInsert").dialog({
            resizable: false,
            width: 500, 
            modal: true,
            bgiframe: true,
            autoOpen: false
   });
   // inizializzazione del plugin tooltipster
   $(".tooltip").tooltipster({
             contentAsHTML: true
   }); 
 }); 

 // Nannette Thacker http://www.shiningstar.net
 // funzione (non piu' utilizzata) per la conferma di immissione
 function confirmSubmit() {
   var agree = confirm("Sicuri di voler eliminare?");
   if (agree)
     return true;
   else
     return false;
 }
 // attivazione del popup di conferma di immissione titolo nella playlist
 function confirmSubmitPlay(titolo, Url) {
    $('#confirmInsert').html(
      "<br><center><b>Inserire...<br>"+ titolo + 
      "<br><br>nella playlist?</b></center>");
    $('#confirmInsert').dialog('option', 'buttons', {
      "Annulla": function () {
    $(this).dialog("close");
  },
    "Si": function () {
    window.location.href = Url;
  }
 });
 $('#confirmInsert').dialog('open');
 }
 // funzione di attivazione popup per l'eleiminazione del record
 function confirmDeleteRec(titolo, id, Url) {
     var delUrl = Url;
     $('#confirmDelete').html(
       "<br><center><b>Eliminare definitivamente?
       </b><br><br>" +titolo + "<br>id: " + id + "</center>");
     $('#confirmDelete').dialog('option', 'buttons', {
       "Annulla": function () {
     $(this).dialog("close");
  },
     "Elimina": function () {
     window.location.href = delUrl;
  }
 });
     $('#confirmDelete').dialog('open');
 } 
 // funzione di attivazione popup per 
 // l'eliminazione dell'intera playlist (testata e righe)
 function confirmDeletePlaylist(playlist, id, Url) {
     var delUrl = Url;
     $('#confirmDelete').html("<br><center><b>
        Eliminare la Playlist e tutti i Titoli relativi?
        </b><br><br>Playlist: " + playlist + " id: " + id + "</center>");
     $('#confirmDelete').dialog('option', 'buttons', {
       "Annulla": function () {
     $(this).dialog("close");
  },
     "Elimina": function () {
     window.location.href = delUrl;
  }
 });
    $('#confirmDelete').dialog('open');
 } 
 // attiva il popup di eleiminazione dei tutti i 
 // titoli della playlist (lasciando disponibile la testata)
 function confirmDeletePlay(id,Url) {
     var delUrl = Url;
     $('#confirmDelete').html("<br><center><b>
       Eliminare Tutti i Titoli dalla Playlist Visualizzata?
       </b><br>id: " + id + "</center>");
     $('#confirmDelete').dialog('option', 'buttons', {
       "Annulla": function () {
     $(this).dialog("close");
  },
     "Elimina": function () {
     window.location.href = delUrl;
  }
 });
     $('#confirmDelete').dialog('open');
 } 

 // uno dei popup di del plugin di fancybox 
 // utilizzato in diverse occasioni
 $("a.ic-modifica").fancybox({
     'width' : '60%',
     'height' : '80%',
     'autoScale' : false,
     'titleShow' : false,
     'transitionIn' : 'no',
     'transitionOut' : 'no',
     'scrolling' : 'no',
     'type' : 'iframe',
     onCleanup : function() {
     return window.location.reload();
   }
 }); 
 
 // uno dei diversi popup utilizzati 
 $("a.ic-show").fancybox({
     'width' : '30%',
     'height' : '60%',
     'autoScale' : false,
     'titleShow' : false,
     'transitionIn' : 'no',
     'transitionOut' : 'no',
     'scrolling' : 'no',
     'type' : 'iframe',
     onCleanup : function() {
     return window.location.reload();
   }
 });

 // attiva popup di fancybox utilizzato per i trailer
 $("a.ic-media").fancybox({
     'width' : '80%',
     'height' : '60%',
     'autoScale' : false,
     'titleShow' : false,
     'transitionIn' : 'no',
     'transitionOut' : 'no',
     'scrolling' : 'no',
     'type' : 'iframe',
     onCleanup : function() {
     return window.location.reload();
   }
 }); 
 
 // attiva il popup utilizzato per i trailer
 $("a.ic-media-1").fancybox({
     closeBtn : 'false',
     'width' : '100%',
     'height' : '30%',
     'autoScale' : false,
     'titleShow' : false,
     'transitionIn' : 'no',
     'transitionOut' : 'no',
     'scrolling' : 'no',
     'type' : 'iframe',
     onCleanup : function() {
     return window.location.reload();
   }
 }); 
 
// funzione di lettura file
function readFiles(file){
   $.get(file, function(data) {
   // alert(data);
   var arr = data.split("|");
   alert(arr);
   }, "text");
 
}
 // -->
</script>
 

Nella quarta parte inizieremo con la l’intestazione della pagina.

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

Hits: 256

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