Codeigniter e i vestiti della domenica per andare a messa: parte terza, lavorare un pò sulla veste grafica

Scacco e poi Matto!

Codeigniter e i vestiti della domenica per andare a messa: parte terza, lavorare un pò sulla veste grafica

Ottobre 13, 2020 codeigniter 0

Miglioriamo il nostro progetto western dopo aver realizzato l’impresa di essere allunati sul primo satellite terrestre con grande soddisfazione per i nostri dati che hanno bucato la pagina bianca e ora sono rappresentati in bella vista per l’utente. A questo punto bisogna capire che cosa abbiamo fatto per arrivare fin qui. Dunque nell specifico siamo andati a lavorare sul file autoload.php per modificare la stringa in $autoload[‘libraries’] = array(‘database’); dopodiché al file config.php siamo dovuti andare a definire il path della nostra applicazionequando è in esecuzione e cioé modificando la stringa $config[‘base_url’] = ‘http://localhost/codeigniter’; dopo ancora abbiamo lavorato sul file database.php e definito i parametri di connessione al nostro database e quel punto tutto era pronto per mettere in piedi il pattern MVC ossia un cervello esecutivo che si pone come mediatore tra la logica dell’ applicazione e la vista dove l’utente fa le richieste per ricevere le informazioni di rimando che vengono gestite dal CONTROLLER. Quindi abbiamo eliminato tutti i welcome che di default si ritrovano come file nel download di codeigniter per implementare la nostra iedita applicazione per cui abbiamo creato MODELLO , CONTROLLER e VISTA rispettivamente con i file western_model.php , western.php e western_view.php. A questo punto serviva un entrypoint nuovo per la nostra applicazione per dire all’ URL guarda adesso mi vai sul controller western e per fare questo siamo andati sul file routes.php e abbiamo modificato la scritta in $route[‘default_controller’] = “western”; nel modello abbiamo scritto lo script seguente

<?php
class western_model extends CI_Model {
function western_function()
{
// Chiamiamo il costruttore Model
parent:: __construct();
}
function getData()
{
//Recuperiamo i dati di righe e colonne delle tabelle del database
$query = $this->db->get(‘western’);
if ($query->num_rows() == 0)
{
show_error(‘database vuoto!’);
}else{
return $query->result();
}
}
}
?>

che cosa fa nello specifico? Definisco una classe che eredita i metodi della superclasse CI_Model (attenzione a come lo scriviamo altrimenti il parser ci restituerà un errore), questa classe ha al suo interno una funzione di nome western_function() con contiene un metodo costruttore e un altra dove andrò a prelevare i dati che mi servono da visualizzare sulla pagina definita come getData . Da notare come con una semplice istruzione come $query = $this->db->get(‘western’); io vada a definire una query che dall’ oggetto corrente va a pescare tutti i dati presenti nel DB grazie a richiami veloci con il metodo get che punta alla tabella da spremere. A quel punto se il recordset é vuoto mandami un messaggio di errore, altrimenti restituiscimi i dati con il result() canonico, fine della logica! Ora passiamo al controller che al suo interno ha:

<?php
class Western extends CI_Controller {
function __construct()
{
parent::__construct();
}
function index()
{
$this->load->model(‘western_model’);
$data[‘result’] = $this->western_model->getData();
$data[‘page_title’] = ‘Western table’;
$this->load->view(‘western_view’,$data);
}
}
?>

ossia la definizione della classe Western da cui molti sostengono che il nome del file dovrebbe ereditare la stessa maiuscola (ma al sottoscritto funziona anche con la pagina western.php) che eredita i metodi e le proprietà della superclasse parente CI_Controller (attenzione ancui qui a fare il case-sensitive rigoroso per evitare errori). Poi abbiamo una funzione costruttrice e una funzione index che di fatto dice in sequenza di andare a pescare la logica del modello e quindi di recuperare le info del file western_model, poi di raccogliere tutti i dati ottenuti dentro un contenitore definito come $data[‘result’] con una definizione di un title dinamico e con la parte finale che va a caricare il tutto con il metodo load sul file della vista, passando come parametro anche i dati desiderati e raccolti per la visualizzazione. Alla fine serve la pagina di interazione utente quindi il file western_view.php conterrà sosanzialmente una normale pagina html che noi abbiamo modellato includendo anche il framework bootstrap per la responsività sui dispositivi mobili. La parte critica contiene:

<?php foreach($result as $row): ?>
<div style=”width:100%;
box-shadow:5px 5px 3px #a3a0a1;
background-color:lightyellow;
vertical-align:middle;
text-align:center;
margin-top:10px;
border:1px solid black;”>
<p style=”font-family: ‘Sansita Swashed’, cursive;font-size:18px;”><a href=”<?php echo $row->link ?>” target=”_blank”><?php echo $row->title ?></a></p>
<h4><?php echo $row->regia ?></h4>
<h5>ANNO <?php echo $row->anno ?></h5>
<h6>VOTO <?php echo $row->voto ?></h6>
</div>
<?php endforeach; ?>

I punti critici sono inizio ciclo con <?php foreach($result as $row): ?> dove i due punti vanno interpretati come un IF ossia se é vero che queste righe ci sono restituiscimi i risultati riempendo le mie aree di interesse, ossia i punti esatti in cui voglio che compaia quel tipo di informazione. Con <?php endforeach; ?> chiudo lo scorrimento automatico di tutte le righe che riempono la tabella. A guardare le differenze grafiche tra il momento in cui esiste solo la rappresentazione dei dati sulla pagina bianca e quello successivo in cui l’HTML statico è stato modellato con i CSS per migliorare l’impatto grafico ci rendiamo conto di aver fatto un piccolo passo avanti prima di andare sulla luna, visto che abbiamo importato anche delle risorse da Google Font. Non contenti abbiamo anche aggiunto un campo link ai nostri dati strutturati in modo da rimandare nello specifico per ciascun titolo all’ articolo di rimando e questo lo abbiamo fatto facilmente includendo il link come stringa dinamica php all’ interno di html sull’ ancora statica. A questo punto la nostra applicazione é da considerarsi finita? Certo che no. Se volessi aggiungere una immagine come faccio? Un bel dilemma, potre ad esempio creare all’ interno di una cartella risorse una directory img che conterrà tutte le mie immagini che andrò a richiamare dinamicamente solo inserendo il nome del file nel DB che avrà bisogno di aggiungere un campo img per esempio. Vediamo quindi se riusciamo a inserire tutte le nostre locandine. Qui ci siamo risparmiati la creazione della struttura assets per mettere tutto direttamente dentro a images, quindi vediamo il prodotto finale solo per i primi due casi come prova:

per realizzare quest magnifico risultato è stato sufficiente aggiungere al file vista un css style che regolando altezza e larghezza consente la stampa a video tutti uniformi con la stessa dimensione anche se tutte le matrici variano come dimensioni e aggiungere al recordset dei dati il codice: <img src=”images/<?php echo $row->img ?>”> A questo punto nasce un nuovo problema: come fare per migliorare l’impatto visivo di queste informazioni? Le locandine tolgono troppo spazio orizzontalmente e danno luogo anche con questa formula di visualizzazione a uno scroll infinito per scorrere tutte le informazioni, quindi per far crescere la nostra applicazione adesso siamo cosa fare e questo corrisponde alla futura quarta puntata di codeigniter dopo aver visto la prima all’ indirizzo https://umbriawaydesign.wordpress.com/ e la seconda e la terza su https://www.farwebdesign.com/wp/ . In sintesi la nostra applicazione sta crescendo, ci siamo preoccupati della responsività per il mondo mobile e in generale per tutti i dispositivi, abbiamo stilizzato la logica con css e framework bootstrap, adesso dobbiamo ancora ALZARE L’ASTICELLA e migliorare l’usabilità per l’utente che resterà fidelizzato ai nostri contenuti solo se l’interfaccia di utilizzo é per lui user friendly. Dobbiamo anche mettere a posto il database con le immagini e completare il recordset quindi…coming soon con CODEIGNITER IN THE NEXT TIME!