Territorio, storia, cultura: conoscere le risorse che hai sotto casa con GLOCAL Web-App. Come mettere in moto un progetto con Codeigniter, puntata N 25

Glocal un progetto in …working progress

Riassunto delle puntate precedenti

Il periodo è caratterizzato dal punto di vista professionale da schiaffoni rubicondi, ormai nel mio caso non si parla più di resilienza ma di immortalità acquisità anche se vivo in un mondo alternativo opalescente da romanzo di fantascienza! Dopo un pò le creature degli abissi sviluppano la sconcertante capacità di adattarsi anche in contesti…particolari, ma in questo caso quando ti tolgono qualcosa (per la seconda volta quelli del CED di Macerata e di Adecco sono riusciti a discriminarmi per l’ammissione a un corso che avrei voluto fare a causa probabilmente della mia età anagrafica o di altre incapacità acquisite). Di fronte a questi “sgarbi” del modello globalizzato non resta che rispondere con i fatti e con rinnovato impegno per dimostrare che le loro valutazioni di mummificazione discriminanti sulla mia figura sono in realtà frutto di errate e infelici accostamenti. Per la serie come incanalare rabbia e infelici incazzature in favore di una crescita professionale! Intanto se vogliamo citare anche un film potremmo parlare di Qualcosa è cambiato con Jack Nicholson perchè si notera che il titolo da questo report si mostra con una differenza sostanziale pur restando sempre uguale. Segno che la nostra WEB-APP è arrivata a un punto di svolta!

Elenco moduli

http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryDynamic/areas

Elenco Articoli

http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryDynamic/posts
Il FORMAT del titolo è cambiato, segno che le cose si evolvono!

Ritrovata la motivazione per RI-partire? Bene allora cosa c’è di nuovo?

Abbiamo fatto cose nuove perchè c’è molto da lavorare per rafforzare il mio cv da web designer e portarlo verso quello di web developer! Per esempio questo modulo esterno con JS che fa il monitoraggio e traspone con i numeri l’impegno nelk quotidiano può diventare una felice integrazione con una tecnologia lato server come il framework codeigniter? Parliamo di:

http://umbriawayformazione.altervista.org/uwcode/glocal_counter/

Poi però abbiamo scoperto che JavaScript (lato client) e PHP stanno bene insieme, infatti è nata anche una nuova sezione dinamica dove i valori vengono passati grazie a una tabella di supporto:

http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryDynamic/info

Qui è possibile sapere tutto dell’ applicazione, vita, morte e miracoli, un ciclo di vita che si concretizza estrapolando ore e giorni lavorati, cose fatte e in che quantità e persino il volume di crescita dell’ applicazione espresso in MB! Come si può vedere il glocal_counter con html+css+js+php+mysql è l’apeteosi della commistione valorizzata tra più tecnologie che cooperano all’ unisono in un MECCANISMO FONDAMENTALMENTE SEMPLICE DA STUDIARE con un approccio leonardesco (intendo la sua concezione di macchina, non certo il suo genio). Quindi vediamo come si esplica il totale di ore lavorate per esempio

Il Glocal Counter, come funziona?

Bella domanda, Leonardo sarebbe uscito di testa come entusiasmo per vedere quale magica interazione corre tra JS e CSS in questo script, vediamo il pezzettino di HTML statico che tira fuori le ore lavorate per esempio:

<div class="nome-container">
<i class="fas fa-user-clock fa-5x"></i>
<div class="timecounter" data-target="<?php echo  $array->hour ?>"></div>
<h4>Ore lavorate sul progetto fino al <?php echo  $array->time ?></h4>
</div>

Il database dal modello spara i dati al controller che spara i dati alla vista che materializzerà i frammenti di tabella (campi) interessati per una rappresentazione a video grazie alla logica degli array. Infatti rispetto al codice visto sopra, dobbiamo pensare che prima del div iniziale e dopo la fine del div dell’ ultima riga abbiamo i delimitatori di un ciclo FOREACH / ENDFOREACH che di fatto non fa altro che stampare a video i record nel punto indicato (istruzione echo). Javascript per fare le sue interazioni si appoggia interamente sul CSS che modella il nome delle classi dei DIV, vediamo la sua psicoespressione:

const counters = document.querySelectorAll('.timecounter')

counters.forEach(counter => {
    counter.innerText = '0'

    const updateCounter = () => {
        const target = +counter.getAttribute('data-target')
        const c = +counter.innerText

        const increment = target / 200

        if(c < target) {
            counter.innerText = `${Math.ceil(c + increment)}`
            setTimeout(updateCounter, 1)
        } else {
            counter.innerText = target
        }
    }

    updateCounter()
})

Qui ci sono molte cose interessanti da analizzare e da acquisire per capire JS a un primo livello. L’istruzione:

document.querySelectorAll

è come una pinza meccanica (immaginiamo una autorimessa con vecchie auto da rottamare in una zona predisposta, per questo abbiamo citato in precedenza Leonardo, per la sua passione per le macchine) che va a identificare tutt gli elementi di classe definiti come timecounter. La costante dichiarata con const andrà ad agire in quell’ ambito di identificazione. Il contatore ovviamente parte da ZERO. A questo punto si capisce che per far scorrere un range di numeri avrò bisogno anmche di una costante che rappresenta il punto di arrivo per il ciclo che scorre e stampa a video i valori, per cui entra in scena una costante TARGET che va a prelevare l’informazione scritta nel data-target , ossia il valore finale da mostrare a video. A questo punto entrano in scena due nuove costante C che rappresenta il punto di inizio per lo scorrimento e INCREMENT che deve far ruotare il tutto fino al valore TARGET. Poi intuitivamente come va da sè pensare che ciclando tutte le mie costanti ottengo lo scorrimento dei dati! Da notare che c’è anche una funzione CEIL che di fatto restituisce un intero. FACILE NO? Lo script è molto utile perchè sono i numeri a determinare se qualcosa funziona oppure no in termini di sviluppo e di crescita da monitorare! ATTENZIONE: lo script va messo in un punto preciso della pagina altrimenti non funzionerà, sta allo sviluppatore di buona volontà scoprire dove!

L’integrazione fatta in http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryDynamic/info è da applauso perchè passa i parametri dinamicamente tramite PHP che attinge con Codeigniter a un DataBase!

Mosse a tripla funzionalità!

Ok è proprio il caso di dire che GLOCAL sta ripartendo. Da un lato possiamo migliorare le nostre applicazioni e imparare cose nuove rafforzando il CV, dall’ altro possiamo investigare qualcosa sui contenuti (se c’è la storia di mezzo ricordiamoci che la scrittura creativa è sempre viva sotto le ceneri) e dall’ altro possiamo anche stare meglio con il fisico, visto che il portale parla di ecologia, trekking e alla fine anche di salute (indirettamente). Di solito negli scacchi ci sono mosse a doppia funzionalità, ma qui con GLOCAL, http://umbriawayformazione.altervista.org/ci_project_glocal/index.php/ColleGalleryDynamic/colleview , si va oltre! A prposito, visto che dobbiamo studiare meglio JavaScript e il modo migliore di farlo é USARLO NELLA PRATICA, abbiamo tanto per iniziare scaldato i motori a http://umbriawayformazione.altervista.org/ci_project_glocal/index.php dove abbiamo caricato l’evento OLOAD con un ALERT direttamente nel BODY:

Dalla teoria alla pratica, quale modo migliore di consolidare JS se non…facendo?
<body onload="alert('Benvenuti nel progetto di valorizzazione territoriale Glocal!')">

questa riga di codice è più elegante rispetto al tradizionale:

<script>
alert ('benvenuto');
</script>
ok e nel frattempo i lavori di ricerca vanno avanti!

Cosa bolle in pentola nella prossima puntata?

All’ indirizzo http://umbriawayformazione.altervista.org/uwcode/colle_slider/ ne abbiamo combinata un’ altra, abbiamo messo in piedi per motivi didattivi un efficace background-slider, si tratterà di vedere in dettaglio come funziona nella pratica. Per esempio una istruzione come:

document.getElementById("start").innerHtml='scrivi questo testo in corrispondenza di un punto preciso';

può sparare come una pistola il testo desiderato in corrispondenza di una zona precisa che posso posizionare dove voglio con:

<div id="start"></div>

JavaScript è case sensitive e usa la classica notazione di scripting a gobba di cammello caratterizzata dalla prima parola chiave minuscola seguita subito dopo da una maiuscola. Per concatenare le stringhe non usa il punto come php ma il simbolo +; le variabili locali all’ interno di una funziona non sono riutilizzabili mentre quelle esterne definite globali si.

CONCLUSIONI

Malgrado riscontriamo ancora problemi con i protocolli di sicurezza sul sito hosting che ci ospita (da risolvere), di fatto dopo qualche inevitabile esperienza che ci vede parte angherizzata e oppressa dalla BCE a pozzanghere liquide (mitica rimane la selezione di fine febbraio dove prima ti dicono di richiamare dopo il superamento del primo step e poi ti bollano come eretico, bravi SPRING PINKO PALLO!) come da modello economico espresso da Bauman, siamo riusciti seppure ancora barcollanti a rimetterci in carreggiata. Basta vedere anche i contenuti espressi da questo articolo e confrontarli con quelli più scarni e di circostanza delle puntate precedenti. Segno che la WEB APP GLOCAL ottimizzata per risoluzione DESKTOP sta crescendo, malgrado tutto, su tutta la linea e gli argomenti da approfondire sono tanti, tipo il DOM per esempio che ci consente di modificare dinamicamente gli elementi-nodi della pagina!

Prossimo obiettivo legato a GLOCAL: rinforzare JS con un corso Udemy da completare nei prossimi giorni, con materiale da studiare e riadattare per le esigenze pratiche!

Programmazione PHP Gualdo Tadino e le tabelle di tipo MyISAM

polo tecnologico colle di nocera umbraSono quelle che vengono proposte di default nel DB, parliamo di sistema gestionale dei dati che ha al suo interno determinate caratteristiche che ora programmazione PHP Gualdo Tadino dovulgherà nel massimo riservo. Hanno un file di estensione.frm che simboleggia il formato della tabella, hanno un file con estensione .MYD e un file con estensione .MYI che contiene gli indici tutti racchiusi all’ interno della directory che ha il nome di database. Ha la clausola AUTO_.INCREMENT che risulta la più flessibile rispetto a tutte le altre opzioni di gestione dati. Queste tabelle si prestano per creare tabelle di tipo MERGE. Possono essere convertite in tabelle compresse a sola lettura molto veloci. Supportano il tipo di dati di ricerca FULLTEXT. Supportano il lock a livello di tabella per evitare che più query accedano alla tabella in scrittura. In lettura l’accesso è consentito a più query simultaneamente mentre in scrittura é utilizzato un lock esclusivo a livello di tabella in modo che mentre una query sta scrivendo i suoi dati, altre interrogazioni non possano accedere alla tabella neanche in modalità lettura. Questo comportamento evita i deadlock descritti precedentemente, ossia il fenomeno del blocco query che non hanno regole per essere risolte singolarmente. In una delle prossime sessioni di allenamento Umbriaway Consulting alias programmazione PHP Gualdo Tadino prenderà in esame le potenzialità nascoste nelle tabelle di tipo InnoDB.

Polo Tecnologico Colle di Nocera Umbra e la codifica lato client con Java Script

polo-tecnologico-colle-di-nocera-umbra-2Polo Tecnologico Colle di Nocera Umbra sa bene che lo studente ha ormai assimilato l’idea di architettura client-server e sa anche bvene che JavaScript é un linguaggio lato client che consente ad esempio di modificare gli elementi di una pagina, aggiungere animazioni o creare effetti su delle immagini per esempio, aprire finestre di dialogo i famosi pop-up inibiti spesso dai browser per motivi di sicurezza, validare i dati inseriti in un modulo, creare quiz e sondaggi e tanto altro. Polo Tecnologico Colle di Nocera Umbra ricorda che l’interprete JavaScript è incorporato nel browser. JS nasce da LiveScript che fu creato nel mesozoico per il browser Netscape. L’unica accortezza da tenere presente ricorda Polo Tecnologico Colle di Nocera Umbra é quella di tenere abilitato JS tra le varie opzioni di settaggio e di configurazione del browser. Ai tempi Microsoft implementò un linguaggio simile a JS chiamandolo Jscript, i due linguaggi erano (e sono?) totalmente compatibili. Polo Tecnologico Colle di Nocera Umbra ricorda che la famosa J di Ajax sta appunto per JavaScript per questo é assolutamente indispensabile per l’aspirante web developer di successo sapere come incorporare i comandi JS e i file JS esterni all’ interno delle proprie pagine applicazioni., utilizzare i più comuni comandi JS, utilizzare i gestori di eventi per lanciare i comandi JS, lavorare con le variabili e gli oggetti JavaScrit e trasformare i comandi JS in funzioni. Polo Tecnologico Colle di Nocera UmbraPolo Tecnologico Colle di Nocera Umbra ricorda di avere sottolineato più volte nei portali Umbriaway Consulting dedicati alla formazione che per incorporare JavaScript all’ interno della pagina é sufficiente usare il famoso tag HTML e usando tra l’altro anche gli attributi come SRC= per includere i file esterni e l’altrettanto famoso language= per specificare il tipo di linguaggio utilizzato. Polo Tecnologico Colle di Nocera Umbra ricorda che l’inclusione dei file esterni JS nelle pagine é maggiormente performante in quanto velocizza il rendering della pagina lascindo chiara, pulita e ordinata tutta la struttura del sito quindi é auspicabile che l’attributo SRC venga usato non spesso ma spessissimo. Non solo l’inclusione esterna nel tempo genera una banca dati riutilizzabile come libreria che può essere usata velocemente per creare altre applicazioni risparmiando tempo. Polo Tecnologico Colle di Nocera Umbra ricorda anche che all’ interno del tag é dispoinibile l’attributo type=che dovrà essere riempito con la dicitura “text/javascript”.  All’ interno del tag script posso scrivere le mie istruzioni con un doppio significato: se ho lo script nell’ head della pagina lo richiamerò tramite nome di funzione se ce l’ho direttamente nel body lo script agirà direttamente come al solito l’approccio di Polo Tecnologico Colle di Nocera Umbra é fatto dic ose concrete quindi qualcosa tipo document.writeln(“riga generata usando JS!”);. Polo Tecnologico Colle di Nocera Umbra ricorda che JavaScript E’ CASE SENSITIVE e non é come l’HTML che non fa differenza tra lettera minuscola e maiuscola, quindi quando si inseriscono i comandi bisogna fare particolare attenzione nel sottolineare con cura queste minuscole o maiuscole.Per quanto riguarda l’attributo Language= diciamo al browser che le dichiarazioni contenute in questo elemento di script devono essere interpretate esclusivamente come JS e l’attributo type può contenere anche espressioni diverse tipo “text/xml” per esempio o “text/vbscript”. Nell’ esempio visto precedentemente con l’espressione .writeln si indica un metodo esclusivo dell’ oggetto document che ha la funzione di stampare a video una istruzione specifica con l’aggiunta di ln che sta a significare stampa andando a capo. L’oggetto di riferimento per tale metodo é document e oltre a queste due importanti espressioni (Oggetti, Metodi) dobbiamo affiancare l’idea di Proprietà.I metodi eseguoni azioni sopra l’oggetto e il punto indica una relazione gerarchica. Per argomento si intende la stringa tra parentesi che viene passata al metodo definita tra virgolette per distinguerla da variabili numeriche come in PHP. In una delle prossime sessioni di allenamento continueremo ad esplorare il potenziale di fuoco offerto da JS lato client, nello specifico ripartiremo dall’ inclusione nelle pagine HTML, see you later da Umbriaway Consulting!