Pubblicato il Pubblicato in Applicazioni, Playlist

Play List Terza Parte.

Finita la prima fase di reperimento delle risorse per la nostra tabella dei titoli, ovvero lo scan delle periferiche,Finestra di popup 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;
  2. righe iniziali di accertamento del login effettuato, richiamo head_utf8.php;
  3. verifica delle variabili di sessione;
  4. 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 ;
  2. apertura del tag ;
  3. aggiunta di vari generi di tag (, , ,…) ;
  4. link dei file e dei metodi necessari (.css, .js, …), richiamo file link.php;
  5. inserimento manuale degli script (), richiamo file js-comuni.php;
  6. inserimento manuale degli stili (

    );

  7. chiusura del tag ;
  8. apertura del tag .

Inizio dell’interfaccia visibile:

  1. creazione della riga superiore definita “top bar”, richiamo top_bar.php;
  2. creazione del menu superiore, richiamo header_menu.php;
  3. creazione del corpo, la parte principale, “centrale” dell’applicazione. C’e’ di tutto dentro;
  4. creazione del piede di pagina, richiamo footer.php;
  5. 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



  
    
    <?php include_once("tpl/prefix.php"); if(!isset($pagina)) {$pagina = "";} echo $pagina; ?>

    
    

    
    
    
  
prefix.php

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

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

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

Rispondi