Codeigniter + Bootstrap una accoppiata vincente: parte IV completare le basi del nostro progetto WESTERN MVC!

Ok dopo aver visto nella prima puntata una overview generale su Codeigniter, cercando gli strumenti iniziali per iniziare, individuando i link dove scaricare le nostre cose (vedere https://umbriawaydesign.wordpress.com/) dopo aver bucato la pagina con i dati che é un azione per l’aspirante sviluppatore simile all’ allunaggio terrestre di Amstrong e perfezionato il vestitino della domenica per dare usabilità e interazione all’ utente (vedere puntate due e tre su https://umbriawaydesign.wordpress.com/) completiamo questa prima parte sulle basi di codeigniter inserendo la quarta sezione, quella della responsività, quindi torniamo a fare il mestiere del web designer e non quello del web developer! La parola magica per chi costruisce web application si chiama RESPONSIVITA’, ossia la capacità di vedere la mia APP su tutti i dispositivi dal più piccolo al più grande. Le media query con i loro breack point dovrebbero risolvere ma perché non integrare nei nostri progetti il potentissimo framework grafico BOOTSTRAP che divide le pagine in lunghezza in dodici colonne a prescindere dalle dimensioni? In questo modo siamo a cavallo, tanto per restare in tema western con personaggi diventati icona di genere a Los Angeles come John Wayne e registi come Ford o il nostro Leone in Italia. Per fare un albero ci vuole un fiore e quello ce lo abbiamo, visto che il motore con mysql contiene la nostra magica tabella di prova western (la progettazione seria di un DB è un’ altra cosa, non a caso esistono nelle aziende enterprise figure professionali addette solo a questo mestiere come il DB administrator per esempio) e visto che siamo riusciti a creare un pannello di controllo (che è un dono di CODEIGNITER e del suo paradigma MVC) dove il VOLANTE trasferisce da destra a sinistra la nostra vettura lungo la strada (la parte logica del MODEL invia i dati filtrati al controller che con il metodo LOAD carica le pagine di informazioni dinamiche richieste dall’ utente) che va ad esaurire e risolvere gli input sulla grafica , adesso siamo in grado di abbellire e rendere funzionali le nostre applicazioni integrando il framework bootstrap o con CDN o scaricandolo e poi puntandolo in una cartella locale. L’utilità non è solo quella di risolvere la responsività, ma anche di poter disporre di un coltellino svizzero o set di strumenti che ci semplificano la vita, vedere per esempio il problema del recordset verticale che avevamo nella terza puntata citata agli indirizzi di cui sopra. Per cui come si risolve? Il lay out usato prevede una colonna centrale settata con <div class=”col-sm-8 text-left”> quindi vedendo tre colonne intuitivamente siamo in grado di rispondere anche alla domanda non detta ma quante sono larghe le colonne laterali? Ovviamente due ciascuna visto che il tutto tocca il dodici. Ora esiste un componente che si chiama CARD in bootstrap che abbraccia i nostri dati dentro delle cornici specifiche disegnate con classi predefinite che ci consente di spalmare il nostro set di dati non tutto in verticale rendendo la vita di chiunque utente impossibile a causa dello scrolling, ma in orizzontale. Tuttavia per fare questa operazione dobbiamo pensare di dividere quello spazio da otto magari con due colonne, in modo che i dati non finiscano uno sopra l’altro ma si dividono tra le colonne (nel nostro caso le card si configurano automaticamente tre per colonna) con la dicitura <div class=”col-md-2″ > ovviamente il punto di inizio del trasferimento dati e quello finale devono abbracciare solo il componente card la cui parte statica è facilmente reperibile dal sito ufficiale GETBOOTSTRAP dove siamo andati a scaricare il tutto (oppure no, visto che i CDN ci risolvono alcune questioni). In definitiva abbiamo costruito le basi in pochissimo tempo per una applicazione da rendere completa, perché è chiaro che dovremmo implementare le sessioni, magari costruire un LOGIN, oppure creare altre pagine di approfondimento e magari anche sviluppare il nostro DB in maniera più organica con altre colonne da inserire a sostegno visto che la ripetizione dei registi ad esempio nella nostra tabella è considerata ridondanza. Però la struttura base adesso c’è ed esiste e costituisce una perfetta base di lancio per andare oltre la LUNA!




Il gatto di Schrodinger é vivo o morto? Risponde javascript!

Javascript è un piccolo passo per un uomo ma grande per l’umanità visto che è utilizzato a man bassa su tutti i moderni applicativi nelle nuove formule lato server con tecnologie come node, vue, typescript angular, react etc etc. Ma come avviene l’interazione con l’utente con javascript? Analizziamo la seguente pagina presente all’ indirizzo: https://www.farwebdesign.com/schrodinger/gatto.html che consente varie interazioni sugli elementi dislocati all’ interno del tag body. Prendiamo in esame uno per uno facendo prima una carrelata su metodi che lo sviluppatore lato front end si ritroverà a aplleggiare quotidianamente. Prendiamo ad esempio il metodo getElementById ma prima prendiamo il toro per le corna: javascript ha a che fare con l’intero documento che è considerato l’oggetto principale del DOM. Il DOM è l’acronimo di document object model, ossia un luogo di gerarchie di oggetti che prende a modello gli alberi della natura nella sua struttura in cui si annidano elementi padri ed elementi figli. Nell’ HTML il body è un elemento padre ma pur sempre figlio del tag HTML. Un paragrafo è un elemento figlio rispetto a un paragrafo e anche a un blocco divisore <DIV> se dovesse essere contenuto al suo interno. Quindi possiamo considerare il nostro metodo come qualcosa che restituisce l’elemento che ha l’attributo ID con il valore specificato. Questo metodo è uno dei metodi più comuni nel DOM HTML e viene utilizzato quasi ogni volta che si desidera manipolare o ottenere informazioni da un elemento del documento. Restituisce null se non esiste alcun elemento con l’ID specificato. Un ID dovrebbe essere univoco all’interno di una pagina. Tuttavia, se esiste più di un elemento con l’ID specificato, il metodo getElementById () restituisce il primo elemento nel codice sorgente. Posso usare anche altri metodi che catturano gli elementi della pagina come una giugantesca tenaglia di un rottamatore di auto. Ad esempio l’espressione var x = document.getElementsByTagName(“p”); non fa altro che catturare tutto il valore contenuto all’ interno del paragrafo P all’ interno della variabile X e in questo caso abbiamo usato il selettore di javascript getElementsByTagName(“p”). Decisamente la tecnica di contrassegnare gli elementi divisori della pagina a un identificativo univoco (ID) è largamente diffuso tra gli sviluppatori. Vediamo quindi il contenuto della pagina https://www.farwebdesign.com/schrodinger/gatto.html e analizziamo tutti gli elementi presenti:

<!–
<head>
<meta charset=”UTF-8″>
<script>
function myFunction() {
document.getElementById(“demofunction”).innerHTML = “ho cambiato il paragrafo con una funzione”;
}
</script>
</head>
<body>

<div align=center>
<h3>Scopri che cosa puoi fare con javascript!</h3>
<p id=”demostyle”>Cambia il font del paragrafo con la proprietà style del metodo getElementById </p>

<button type=”button” onclick=”document.getElementById(‘demostyle’).style.fontSize=’35px'”>Cambia il testo del paragrafo con la proprietà style</button></br>
<hr>

<h2>Il gatto di Schrodinger è vivo o morto?</h2>

<p >In questo caso javascript cambia il valore del sorgente immagine con la proprietà SRC del metodo getElementById</p>

<button onclick=”document.getElementById(‘myImage’).src=’gattomorto.jpg'”>Scopri se il gatto dentro la scatola ha fatto danni</button><br>

<div id=demogatto><img id=”myImage” src=”gattovivo.jpg” style=”width:100px”></br>

<button onclick=”document.getElementById(‘myImage’).src=’gattovivo.jpg'”>Riporta il gatto in vita</button></div>
<button type=”button” onclick=”document.getElementById(‘demogatto’).style.display=’none'”>Fai fuori il gatto per sempre!</button><br>
<button type=”button” onclick=”document.getElementById(‘demogatto’).style.display=’block'”>Lazzaro gatto ritorna!</button>
<hr>
<button type=”button” onclick=”document.getElementById(‘demochange’).innerHTML = ‘testo cambiato'”>Cambia il testo del paragrafo</button><br>
<p id=demochange>Cambia il testo</p><br><br>
<button type=”button” onclick=”myFunction()”>Cambia il testo del paragrafo usando una funzione</button><br>
<p id=demofunction>Cambia il testo</p><br>
<hr>
</div>
</body>
–>

schiacciando il primo tasto in alto modifico la dimensione del font usando la proprietà STYLE.FONTSIZE messa disposizione dal metodo getElementById per cui azionando il click sul pulsante con l’evento onclick azionerò il cambio di dimensioni del paragrafo contrassegnato da id=demostyle con l’istruzione completa document.getElementById(‘demostyle’).style.fontSize=’35px’. A questo punto siamo riusciti ad analizzare la spinosa questione del gatto di Schrodinger, estrapolando infatti da wikipedia:

…il paradosso del gatto di Schrödinger è un ESPERIMENTO MENTALE ideato nel 1935 da Erwin Schrödinger, con lo scopo di illustrare come la meccanica quantistica fornisca risultati paradossali se applicata ad un sistema fisico macroscopico. Andando decisamente contro il senso comune, esso presenta un gatto che, in uno stato noto come sovrapposizione quantistica, può essere contemporaneamente sia vivo che morto, come conseguenza dell’essere collegato a un evento subatomico casuale che può verificarsi o meno. Il paradosso è descritto spesso anche nelle discussioni teoriche sulle interpretazioni della meccanica quantistica. Il gatto romperà la fiala disposta in una scatola chiusa dopo che ne è stato segregato? Quali comportamenti imprevedibili avrà all’ interno dello spazio compresso?

Per javascript queste questioni paradossali sono facilmente risolvibili, infatti utilizzando sempre il metodo di contrassegno degli ID che sono tutti registrati con coordinate anagrafiche sulla pagina, possiamo assegnare loro dei compiti solo usando il metodo di attribuzione proposto dal metodo getElementById per cui schiacciando un pulsante posso sapere che fine farà il gatto, se voglio riportarlo allo stato iniziale lo potrò fare e anche ucciderlo definitivamente se il gatto dopo l’esperimento si comporta come un leone e tenta di sbranarci. Tuttavia c’è anche un tasto di ripristino che farà ritornare in vita il nostro amato gattino cambiando lo stato del DIV che contiene tutti gli elementi che da display = none ridiventa display = block nelle proprietà di stile. Poi abbiamo anche la dimostrazione dopo Schrodinger di cosa può fare il metodo getElementById in sincronia con la proprietà innerHTML che cambia il testo e poi dulcis in fundo (Dulcis in fundo è un’espressione pseudo-latina che, all’orecchio di un parlante Italiano, significherebbe “il dolce giunge alla fine del pranzo”. Come tale è considerata da Giuseppe Fumagalli, “Il dolce viene in fondo”). Insomma per afferrare gli elementi all’ interno della pagina javascript propone numerose soluzioni, nel frattempo ne sappiamo di più sulla fisica quantistica.




VUE JS FRAMEWORK e la GESTIONE DEGLI STATI

Dopo aver sperimentato una lezione introduttiva su VUE all’ indirizzo https://umbriawayfocus.wordpress.com/2020/03/24/vue-js-un-framework-potente-per-le-tue-user-interface/ gettiamoci a capofitto nella GESTIONE DEGLI STATI. Analizziamo il seguente codice da includere come file con estensione.js esterno:

new Vue ({
el: ‘.todoapp’,
data: {
todos: [{
title: “shopping”
}, {
title: “video corso”
},{
title: “lavare i piatti”
}],
}
});

intanto abbiamo istanziato un oggetto di nome todos che fa riferimento all’ elemento della pagina html todoapp. All’ interno dell’ array ritroviamo tre notes o cose da fare che sono nello specifico i tre elementi presenti che occupano l’array rispettivamente nella posizione 0,1,2 visto che il rimpimento di ciascun cassetto nell’ array armadio parte per convenzione da zero. A questo punto sorge spontanea una domanda. Qui ho occupato l’array con dei dati ma se io avessi avuto l’esigenza di riempire questo armadio ad esempio con un API esterna? Solo con la versione tre di VUE è stato risolto il problema dei contenuti, in quanto nelle versioni precedenti l’oggetto voleva i dati di riempimento, mentre dalla tre possiamo anche valutare di inizializzare un array lasciandolo vuoto, oppure di usare la parola chiave NULL sulla proprietà NODATA o anche come detto di riempire l’oggetto array con dati che arrivano dall’ esterno. Si può fare tutto tranne che utilizzare la parola deleteria UNDEFINED sull’ attributo nodata. A questo punto visto che nella lezione precedente abbiamo visto come stampare i dati potremmo inglobare questo array nella nostra pagina HTML e renderlo funzionale con la sintassi che già conosciamo ossia, cone le famose doppie graffe. E’ buona regola di programmazione inserire i link di collegamento al framework tramite CDN prima della chiusura del BODY in quanto prima si preferisce offrire all’ esperienza utente il completo caricamento della pagina e solo dopo caricare le risorse utili. Quindi avremo prima della chiusura del body il CDN e lo script esterno visto prima:

<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
<script src=”index.js”></script>

ovviamente in alto nell’ HEAD ci sarà il nostro CSS VUE che ingloba le classi di formattazione e nel corpo del documento potremmo ad esempio scrivere il codice per leggere a video il nostro primo appuntamento della giornata ossia quello dello shopping dopo una sezione introduttiva, quindi sotto il body ci sarà:

<section class=”todoapp”>
<header class=”header”>
<h1>todos</h1>
<input class=”new-todo” autofocus autocomplete=”off” placeholder=”che cosa devi fare?”>
</header>
<section class=”main”>
<ul class=”todo-list”>
<li class=”todo”>
<div class=”view”>
<input class=”toglle” type=”checkbox”>
<label>{{todos[0].title}}</label>
<button class=”destroy”></button>
</div>
</li>

se volessimo ripetere le attività memo basterà copiare la porzione di codice:

<li class=”todo”>
<div class=”view”>
<input class=”toglle” type=”checkbox”>
<label>{{todos[1].title}}</label>
<button class=”destroy”></button>
</div>
</li>

cambiando l’indice dell’ array. Per vedere l’effetto che fa la nostra prima applicazione andiamo su https://www.farwebdesign.com/vue/todos/ e volendo possiamo anche dare un occhiata al main.css per il nostro abbellimento a video:

html,
body {
margin: 0;
padding: 0;
}

button {
margin: 0;
padding: 0;
border: 0;
background: none;
font-size: 100%;
vertical-align: baseline;

font-weight: inherit;
color: inherit;
-webkit-appearance: none;
appearance: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

body {
Helvetica Neue’, Helvetica, Arial, sans-serif;
line-height: 1.4em;
background: #f5f5f5;
color: #4d4d4d;
min-width: 230px;
max-width: 550px;
margin: 0 auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-weight: 300;
}

:focus {
outline: 0;
}

.hidden {
display: none;
}

.todoapp {
background: #fff;
margin: 130px 0 40px 0;
position: relative;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
0 25px 50px 0 rgba(0, 0, 0, 0.1);
}

.todoapp input::-webkit-input-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
}

.todoapp input::-moz-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
}

.todoapp input::input-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
}

.todoapp h1 {
position: absolute;
top: -155px;
width: 100%;
font-size: 100px;
font-weight: 100;
text-align: center;
color: rgba(175, 47, 47, 0.15);
-webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
}

.new-todo,
.edit {
position: relative;
margin: 0;
width: 100%;
font-size: 24px;

font-weight: inherit;
line-height: 1.4em;
border: 0;
color: inherit;
padding: 6px;

In uno dei prossimi articoli andremo a visionare i METODI sempre contestualmente alla GESTIONE DEGLI STATI in VUE JS Framework!




Progettare Web App con Angular 8

Vediamo con un approccio pratico come funziona il framework JS più famoso e richiesto dal mercato in questo momento, Angular, indirizzo https://angular.io. Wikipedia semplifica in questo modo: è un framework per applicazioni web open source, principalmente sviluppato da Google e dalla comunità di sviluppatori individuali, nato per affrontare le molte difficoltà incontrate nello sviluppo di applicazioni su singola pagina. Ha l’obiettivo di semplificare lo sviluppo e il test di questa tipologia di applicazioni fornendo un framework lato client con architettura MVC (Model View Controller). Il framework lavora leggendo prima la pagina HTML, che ha incapsulati degli attributi personalizzati addizionali (esempio: ng-controller), interpretando questi attributi come delle direttive (comandi) per legare le parti di ingresso e uscita della pagina al modello che è rappresentato da variabili standard JavaScript. Il valore di queste variabili può essere impostato manualmente nel codice o recuperato da risorse JSON statiche o dinamiche. E ora tuffiamoci nella parte pratica applicando poche parole ma comandi diretti. E’ bene ricordare che la shell per i comandi di riga in windows si richiamano con cmd da striscia di comando esegui mentre in linux rispetto ai comandi sotto elencati si precede il tutto con la formula “sudo“. Con il comando npm install -g @angular/cli si sfrutta la potenza del modulo di gestione moduli di node (NPM) per installare l’ultima versione di Angular. E’ probabile che alla fine dell’ installazione npm proponga un auto aggiornamento con il comando: “npm i npm“. A questo punto creo una cartella per i miei progetti in una posizione specifica e dopo essermi posizionato su di essa, darò il comando ng new my-dream-app. Se arriva l’avviso che node è da aggiornare andare nella root precedente sotto utente e dare il comando per la compatibilità di node con angular: npm install -g update-node; se persiste lo stesso messaggio andare su https://nodejs.org/en/ e installare the last versions! A questo punto il comando che crea l’APP funziona e inizierà a chiedere se vogliamo integrare il modulo routing e che tipologia di CSS vogliamo inserire, noi diciamo no alla prima opzione e lasciamo di default CSS. Il processo di installazione durerà un pò perchè è necessario creare tutta una serie di dipendenze e di moduli per far funzionare il tutto. Alla fine di tutto il software dirà: added 1078 packages from 1045 contributors and audited 17111 packages in 241.028s, found 0 vulnerabilities. A questo punto mi posiziono dentro la cartella e darò il comando: ng serve che inizializzerà la mia app alla visualizzazione su browser tramite localhost, infatti alla fine del comando mi verrà restituito il messaggio: angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ e alla fine ci troviamo a rispondere positivamente anche alla domanda critica se esistono le gioie per gli sviluppatori, certo ecco infatti che cosa abbiamo ottenuto alla fine di tutto questo burrascoso processo, fatto di ostacoli e di aggiornamenti, sovrascritture e dipendenze modulari:

A questo punto il passo successivo è procurarsi un buon editor per modellare il codice tipo web storm o visual studio code, però nel frattempo diamo un occhiata anche alla parte fisica pragmatica creata dopo una serie di comandi se vogliamo astratti e surreali, infatti posizionandoci all’ interno della cartella creata vedremo il seguente schema, dove naturalmente all’ interno della cartella node_modules si vedrà aprirsi un mondo:

Ora dobbiamo capire la struttura e le dipendenze presenti nei file package.json ma la nostra APP si può modellare nel suo SRC (source) e APP dove abbiamo file critici come app.component.html che intuitivamente ci dice a cosa serve: se infatti da localhost:4200 proviamo a modificare il testo della pagina e dell’ HTML precedendo con un ciao i messaggi standard e salvando, scopriremo che la pagina si aggiorna automaticamente con il nuovo contenuto:

In app.component.ts ho anche la possibilità di modificare il contenuto della variabile {{title}} per esempio ma anche di vedere la collocazione delle directory correnti che ospitano i file critici per le modifiche come quello HTML visto precedentemente, ma anche il CSS per esempio. A questo punto è utile vedere come differisce il sorgente rispetto a una pagina HTML tradizionale:

Da notare i marcatori tipo <app-root></app-root> per esempio e le numerose librerie js linkate per rendere eseguibile l’applicazione a runtime. Se andiamo sul nostro codice alal voce app.component.ts scopriremo che la voce è settata nella riga selector: ‘app-root’, ovviamente nella root del folder nel file index.html mi ritroverò la dicitura <app-root></app-root> come da visualizzazione del codice sorgente. A questo punto cimentiamoci in una cosa apparentemente molto complicata, voglio creare una casella di testo che nella parte inferiore nella prima fase mi farà vedere il contenuto della variabile nome settata in app.component.ts (basterà modificare il title in nome e assegnare un valore). Ovviamente non è questo che vogliamo, perchè dinamicamente abbiamo bisogno che prima la casella di testo abbia un contenuto per poter essere catturato poi nella parte inferiore, vediamo quindi come fare per la prima parte. Il file app.component.html si trasformerà in:

<input type=”text”>
<p>{{nome}}</p>

Così però mi ritrovo una situazione statica dove non riesco a catturare dinamicamente il contenuto della casella di testo, quindi dovrò fare delle operazioni preliminari come aggiungere la direttiva che introduce questa opzione che però va prima aggiunto al componente modulo, quindi nello specifico app.component.html diventa:

<input type=”text” [(ngModel)]=”nome”>
<p>{{nome}}</p>

Ovviamente se scriverò un nome nella casella di testo non succederà nulla in quanto adesso dovrò lavorare sul file app.module.ts e in particolare includendo le righe di codice per rendere la direttiva eseguibile, quindi le righe:

import { FormsModule } from ‘@angular/forms’;

e FormsModule sempre nel file app.module.ts:

imports: [
BrowserModule,
FormsModule
],

A questo punto la casella di testo di default prende il valore predefinito ma cambiando il contenuto della casella di testo ci accorgiamo che dinamicamente il tutto sarà aggiornato in tempo reale. Come primo approccio ad Angular può bastare, è sufficiente far quadrare il cerchio con le istruzioni sopra elencate e con i mini obiettivi raggiungibili tramite schermate.