web design umbria
web developer Umbria, wordpress

Analisi delle prime funzioni per edificare un tema da zero

Come faccio a inserire le risorse per la sezione head e footer? Come faccio a recuperare nome e descrizione del blog? Come faccio a scrivere la data nel footer? Come faccio a scrivere un charset dinamico? Come faccio a fare questo o quello, a mettere una data per esempio? KEEP CALM, vediamo tutto senza frenesia. Per scrivere un charset dinamico si usa:

<meta charset="<? php bloginfo('charset'); ?>">


per recuperare il nome del blog che si trova sotto la descrizione generale della pagina e stamparlo:

<? php bloginfo('name'); ?>

per recuperare la descrizione presente sempre nella stessa sezione:

<? php bloginfo('descrition'); ?>

per stampare la data in un footer per esempio l’anno:

<?php the_time('Y'); ?>

per linkare le risorse all’ interno della HEAD:

<?php wp_head(); ?>

per recuperare le risorse da aggiungere al footer:

<?php wp_footer(); ?>

Ovviamente queste funzioni si possono ripetere all’ interno della pagina come bloginfo(‘name’) per esempio. In ogni caso siamo di fronte alle prime funzioni in cui si sbatte il grugno non appena si inizia a familiarizzare dall’ interno con WP!

web design umbria
codeigniter, web design Umbria, web developer Umbria

Imparare dagli errori: non sono gli SCACCHI, ma é CODEIGNITER!

Chi gioca a scacchi ad alto livello o anche a livello condominiale sa bene che riguardare le proprie partite fa sempre bene per scovare le proprie zone erronee. Quando si impara una tecnologia nuova come codeigniter, https://codeigniter.com/, l’approccio dovrebbe essere lo stesso e adesso che sono state risolte una serie di anomalie per la pubblicazione del mio mio primo progetto, https://umbriawayformazione.altervista.org/, posso anche prendermi una pausa dopo 23 gg di esperienza per attraversare il campo di battaglia e contare i morti. In questa prima fase non ho ancora risolto i problemi tecnici della paginazione e del motore di ricerca, che se in procedurale sono abbastanza comprensibili e anche relativamente semplici da mettere in piedi con PHP, con l’approccio UNO e TRINO MVC le cose si complicano per chi come me è appena passato dallo stato di inclassificato a quelle delle categorie nazionali con un solo salto (negli scacchi la categoria di ingresso per i neofiti è quella di incalssificato, dopodiché l’iter prevede il superamento di tre scogli denominati categorie sociali per approddare infine in base al punteggio elo alle cosiddette categorie nazionali che sono solo l’inizio di un lunghissimo percorso che l’agonista dovrebbe intraprendere), in particolare penso di essere equiparato a un terza nazionale sulla base delle mie conoscenze attuali che sono tante rispetto a un NC ma poche rispetto a un giocatore che si muove nelle categorie magistrali.

In questo frangente di tempo delimitato da 23 gg di allenamento costante quotidiano e saltuario su CI, una serie di zone erronee me le sono focalizzate nelle mie partite, ossia nel mio sviluppo di codice e negli errori generati da questa attività. Vediamo quali sono gli errori più frequenti che si possono incontrare quando si passa a studiare questa tecnologia che per familiarizzare con MVC é semplicemente portentosa perché il framework é leggero e molto facile da modellare senza andare incontro ai pachidermi come Laravel e compagni. Una delle situazioni che generano più confusione soprattutto all’ inizio é legata all’ uso che se ne fa della famosa riga di istruzione presente nel file CONFIG.PHP incluso nella cartella omonima presente in APPLICATION:

$config[‘base_url’] = ‘nomedominiopresenteinrete’;

il parametro base_url è molto utile per sottolineare il path delle risorse dichiarate nelle nostre VIEW pertanto se non si hanno le idee chiare su cosa scrivere dopo = e si sbaglia ne deriva una anomalia. Un altro errore frequente che si riscontra é legato alla compilazione mancante o parziale del file DATABASE.PHP presente all’ interno della stessa cartella CONFIG sempre dentro APPLICATION dove i parametri di connessione al DB devono essere corretti:

‘hostname’ => ‘nometuoserver’,
‘username’ => ‘tuonomeutente’,
‘password’ => ‘tua pwd’,
‘database’ => ‘tuodatabase’

Qui si riscontrano diverse anomalie o errori o anche orrori.Non ti funziona l’applicativo su Aruba o qualsiasi altra parte? Magari hai scritto male un carattere può capitare. Verifica, magari guardando scoprirai divertito che durante il passaggio dallo sviluppo in LOCALE all’ AMBIENTE DI PRODUZIONE hai proprio dimenticato di scrivere i dati corretti lasciando i vecchi. Un altra situazione imbarazzante che potrebbe generarsi è quando non andiamo a compilare il file di caricamento automatico AUTOLOAD.PHP presente sempre allo stesso livello dei precedenti, ossia sempre dentro CONFIG e APPLICATION che in una veste accettabile dovrebbe suonare così in una istruzione specifica al suo interno:

$autoload[‘libraries’] = array(‘database’ , ‘pagination’);

ovviamente qui sopra ci sono anche le librerie utili per gestire la nostra paginazione (uno degli incubi peggiori per i NEWBIE) ma se non vado a compilare questi campi siamo semplicemente IMPANATI o PANATI. Un’ altra situazione critica é quella critica legata sempre allo stesso file degli HELPER che sono funzioni utili che gesticoscono specifiche situazioni. Se sto recuperando una variabile in GET e non ho le funzioni utili per supportare tale passaggio, sono di nuovo PANATO! L’istruzione si trova sempre nel file AUTOLOAD.PHP e nella sua stesura corretta dovrebbe suonare così (o a seconda delle esigenze):

$autoload[‘helper’] = array(‘url’, ‘form’);

in questo caso ho caricato un set di strumenti utili per gestire URL e FORM. Ovviamente se tentassi di scrivere del codice nel MODEL dove tento di prendere un valore in GET e non richiamo le funzionalità specifiche mi darà errore. Questi sono errori frequenti all’ inizio, ma sicuramente l’aspetto peggiore è quando si devono mettere in piedi dei LINK che richiamano delle risorse. Come sappiamo in MVC CI richiama prima la index, dopo il controller poi il metodo quindi il modo di lavorare è completamente STRAVOLTO rispetto alla linearità del procedurale. Quindi soprattutto all’ inizio quando non si sanno gestire le ROUTES che ha la sua gestione nel file specifico ROUTES.PHP può succedere di saltare un passaggio e di miagolare nel buio. Allora dopo FTP andiamo sulla pagina e vediamo che il link porta a una PAGINA MANCANTE oppure vediamo anche IMMAGINI solo come riquadro SENZA essere presenti. Non solo ma essendo questa logica strutturata a livello succede anche che dopo l’index, quando richiamo un altra pagina se inserissi dei LINK relativi con i famosi ../ per salire di un livello potrei andare incontro a seri problemi di visualizzazione, tanto è che la famosa [‘base_url’] qui potrebbe tornare utile per formare percorsi assoluti.

A scanso di equivoci da vero NEWBIE o terza nazionale di CI io per il mio progetto iniziale https://umbriawayformazione.altervista.org/ ho inserito proprio il path url di base, alcuni utilizzano anche il famoso site_url da anteporre alle risorse da agganciare ma io per tagliare la testa al toro ho inserito proprio percorsi assoluti vecchia maniera seguendo poi la logica INDEX/CONTROLLER/METODO. In queste facezie non di poco conto spesso il NOVIZIO si perde (almeno a me é successo perchè sono abituato a pensare al vecchio modo lineare) e genera errori scrivendo male LINK e collegamenti vari alle risorse. C’è molto da combatrtere dietro a questo tema. Poi ci sono tutti gli errori legati alla programmazione perché anche qui le query tradizionali vecchia maniera non sempre te le puoi portare dietro e devi saper trafficare con le query build e gli active records di CI, quindi in teoria bisognerebbe studiare la documentazione ma io ho scelto una strada alternativa basata sul prima faccio, genero errori di funzionamento e poi mi vado a cercare in rete la soluzione specifica senza perdere un sacco di tempo a farmi una cultura di base che non mi serve a nulla se non trova applicazione pratica. Comunque la cosa più importante soprattuto all’ inizio é studiare https://codeigniter.com/userguide3/index.html , a conferma di questo posso dire che quando ho scritto al forum ufficiale di codeigniter per descrivere un problema, indirettamente sono riusciti a portarmi sulla buona strada citando una sezione specifica che poi di fatto è servita a incanalarmi altrove dove c’era la soluzione! Quindi leggere la documentazione è IMPORTANTE!

Un altro errore comune é quello di NON DEFINIRE IL PUNTO DI INGRESSO DELL’APPLICAZIONE con un Entry Level nel file ROUTES.PHP, che andrebbe settato come segue:

$route[‘default_controller’] = ‘nomedeltuocontroller’;

Che di default è configurato sul famoso welcome tipico del dopo download. Ok abbiamo finito con gli errori più comuni riscontrati dopo 23 gg di attività con codeigniter? Macchè, anche ammesso che tu riesca a tirare in poco tempo qualcosa di traballante, poi devi fare i conti con il passaggio dal server locale a quello di produzione con una serie di complicazioni che fanno rabbrividire anche l’assistente vocale di GOOGLE quando ti sente parlare di straforo con epiteti blasfemi. Per esempio una delle questioni critiche all’ inizio è quella di seguire l’esatta nomenclatura descritta dai manuali, se ti dicono di scrivere il nome della classe in maiuscolo e anche il file corrispondente altrettanto un motivo ci sarà. A me in locale funzionava tutto così quando ho traslato al mio pusher di ficucia l’applicativo che in localhost andava bene e lì si piantava, perché? C’è un problema di incompatibilità tra versioni? Sono quelli della terra piatta che complottanto sul mio applicativo di esordio con CI? Forse abituarsi a leggere e fare il copia e incolla del problema che in inglese recitava una sorta non posso caricare il MODEL, per avere una risposta dai motori di ricerca era da farsi prima scrivere per aprire un ticket! Comunque alla fine alla mia domanda come mai non funziona nulla quando pubblico qui l’addetto alla magagne ha gentilmente risposto che il problema sta proprio in quella prima lettera minuscola del file. Così cambiando in maiuscolo scopro che tutto funziona ma solo per andare incontro a qualche altra magagna del tipo: non posso eseguire le INNER JOIN.

Esasperato anzichè riscrivere (cosa che comunque dovrò fare) subito ho pubblicato il tutto altrove per vedermelo alla fine funzionare, ovviamente sono curioso di sapere come si risolve il problema dlele INNER dal mio spacciatore di Arezzo, mi fa strano comunque (essendo solo terza nazionale il giudizio lascia il tempo che trova!) che porto tutto altrove nelle stesse condizioni funziona e qui no! Tutto questo solo come antipasto perché gli errori più comuni sono sempre in agguato e un framework per definizione non si può certo definire semplice, anche se qui ci avvicinamo di molto! A questo punto siamo concentrati e focalizzati e fermamente intenzionati a risolvere i problemi rimasti ossia quello della paginazione, quello del motore che mi funziona solo in procedurale e semplificare le URL con le routes magari eliminando il famoso index.php per rendere il tutto più digeribile ai motori di ricerca. Senza contare la questione della sessione e della dashboard per la gestione dei dati utenti, insomma il lavoro non manca mai su CI e non esiste il rischio di non riuscire a imparare cose nuove! Comunque nell’ infuriare della battaglia esistono anche grandi soddisfazioni da cogliere, due vittorie strepitose in stile Enrico V da parte di FWD che il giorno 28 ottobre e 2 novembre rispettivamente alle ore 9,50 e 9, 18 si è visto materializzare come per incanto il recupero dei dati in GET inserendo una semplice riga di codice che non essendo nato onniscente non avrei mai pensato di scrivere e la risoluzione per la pubblicazione! Quindi come si dice in gergo “bisogna continuare a stare sul pezzo“, ogni giorno dedicandoci una piccola quantità di tempo per non perdere l’allenamento! E usare i FORUM oltre a leggere il MANUALE: https://codeigniter.com/userguide3/index.html . Codeigniter conviene assimilarlo perchè é MVC Pattern e sappiamo bene quello che significa come competenze, é open source, é user fiendly é leggero e anche sicuro (se lo si sa usare!) tanti vantaggi racchiusi in unica soluzione. Infine siccome stiamo equiparando l’apprendimento di una tecnologia al punteggio elo degli scacchi, viene spontaneo chiedersi per chi non é avvezzo di queste cose quali sono queste categore e come si guadagna e incrementa elo per passare alla categoria superiore. Sono costituite da 12 categorie, che sono in ordine crescente di importanza, in questa fase per gioco mi sono definito terza nazionale mentre il gradino più alto della trascendenza é costituito dalla categoria GM, quindi la strada da fare con CI è ancora lunga e tortuosa:

  • Non Classificato (NC)
  • Terza Sociale (3S)
  • Seconda Sociale (2S)
  • Prima Sociale (1S)
  • Terza Nazionale (3N)
  • Seconda Nazionale (2N)
  • Prima Nazionale (1N)
  • Candidato Maestro (CM)
  • Maestro (M)
  • Maestro FIDE (MF)
  • Maestro Internazionale (MI)
  • Grande Maestro (GM).
web design umbria
react, web design Umbria, web developer Umbria

REACT lato server: INTRODUZIONE

web design umbria

All’ indirizzo https://umbriawayformazione.wordpress.com/2020/05/30/imparare-react-analizzando-casi-concreti-da-inclassificato-a-grande-maestro-in-sette-giorni/ abbiamo visto come costruire applicazioni lato client sulla parte statica HTML importando librerie esterne compreso il traduttore. Adesso vediamo perchè ci conviene passare sull’ altra sponda con JavaScript lato Server con Node, NPM etc. La prima obiezione che salta subito all’ occhio è “ma è così semplice fare tutto HTML, quello che scrivo si capisce“. Nel modo moderno di usare REACT invece devo conoscere la finestra terminale e impartire comandi del tipo:

  • npm -v (per verificare se ho installato il manager di Node, quello che mi fa arrivare in casa qualsiasi cosa (moduli)
  • node -v (il motore che gestisce la parte server di JS)
  • npm install -g create-react-app (comando che serve a dire globalmente al sistema che può creare applicazioni con la libreria react)
  • create-react-app mia-applicazione (dopo essersi posizionati sul desktop questo comando crea il progetto mia-applicazione che userà tecnologia react)
  • avere familiarità con comandi come cd mia-applicazione e npm start (per far partire il programma)
  • avere familiarità con i metodi di pubblicazione a produzione con npm run build (crea un index.html nella cartella build che sarebbe il corrispettivo del nostro https://www.farwebdesign.com/projectreact/react_14.html)
  • avere familiarità con il package.json e gli script a sostegno e le dipendenze associate nel file
  • essere in grado di creare la cartella node_modules con il comando npm install o npm i
  • saper lanciare i programmi appunto con npm start
  • saper costruire le build
  • saper servire in rete le buil con comandi come npm install serve – g e serve – s build che mi danno la possibilità di vedere il risultato finale su localhost

Ora la domanda critica é: perchè devo imparare tutte queste cose quando le posso evitare facendo solo la parte statica con il metodo: https://www.farwebdesign.com/projectreact/react_14.html ??? La risposta è semplicissima: perchè dopo un primo periodo di trauma ci si accorge che tutto è più ricco di risorse e veloce; perchè ci guadagna l’organizzazione di codice in quanto tutti gli snippet vengono separati adeguatamente al contrario di quello che si legge nell’ HTML. Vediamo dal vivo, il vecchio HTML statico era così composto:

 

<div id=”root”></div>
<script type=”text/babel”>

const lakeList = [
{id: 1, name: “Lago Trasimeno”, trailhead: “Volare”},
{id: 2, name: “Lago di Corbara”, trailhead: “Sognare”},
{id: 3, name: “Lago di Piediluco”, trailhead: “Ammirare”}
];

const App = ({lakes}) => (
<ul>
{lakes.map(lake =>
<li key={lake.id}>{lake.name} | Trailhead: {lake.trailhead}</li>
)}
</ul>
)

ReactDOM.render(
<App lakes={lakeList}/>,
document.getElementById(“root”)
);

</script>

vediamo cosa contiene la cartella SRC strutturata nel nuovo modo di creare applicazioni lato server, il file index.js:

import React from “react”;
import ReactDOM from “react-dom”;
import “./index.css”;
import App from “./App”;
import * as serviceWorker from “./serviceWorker”;

const lakeList = [
{ id: 1, name: “Echo Lake”, trailhead: “Echo Lake” },
{ id: 2, name: “Maud Lake”, trailhead: “Wright’s Lake” },
{ id: 3, name: “Cascade Lake”, trailhead: “Bayview” }
];

ReactDOM.render(<App lakes={lakeList} />, document.getElementById(“root”));

e cosa contiene il file App.js, sempre all’ interno della stessa cartella SRC, importato e richiamato dal metodo render con la A maiuscola?

import React from “react”;

const App = ({ lakes }) => (
<ul>
{lakes.map(lake => (
<li key={lake.id}>
{lake.name} | Trailhead: {lake.trailhead}
</li>
))}
</ul>
);

export default App;

 

il risultato finale quando si lancia il tutto dopo aver installato le dipendenze con npm install seguito da npm start è esattamente lo stesso che https://www.farwebdesign.com/projectreact/react_14.html , con la differenza sostanziale che non devo scrivere a mano nulla rispetto a CSS da integrare o altro perchè l’applicazione è tutta collegata all’ unisono. Nello specifico si noti come la index richiami il componente, isolato e riutilizzabile come vuole la filosofia atomica di react per altri usi e consumi!

CONCLUSIONI:

Dopo uno sbandamento iniziale che può durare a lungo si entra progressivamente nell’ area dei benefici che la nuova tecnologia offre. Quindi è meglio abbandonare da subito la logica seguita nel corso di https://umbriawayformazione.wordpress.com/2020/05/30/imparare-react-analizzando-casi-concreti-da-inclassificato-a-grande-maestro-in-sette-giorni/ e sposare subito la nuova filosofia che diventerà una sorta di esercizio di addestramento fatto su un cavallo indisponente e burrascoso che non vorrà lasciarsi ammansire in vista del palio!

web design umbria
react, web developer Umbria

Imparare REACT analizzando casi concreti: da inclassificato a Grande Maestro in sette giorni!

web design umbria
Sette Kg in sette giorni?

No, sette kg in sette giorni era un film comico con Pozzetto e Verdone, al massimo REACT ci può entrare sotto pelle se lo facciamo otto ore al giorno per almeno un semestre o giù di lì, lavorando su progetti concreti. Negli scacchi sportivi si parte a giocare dal livello inclassificato dopodichè se l’agonista si applica può arrivare al massimo titolo dopo alcuni anni di pratica giocata che è quello di GM (se ha le risorse necessarie e il talento, altrimenti si ferma prima). Qui è lo stesso, da inclassificati ci tocca analizzare caso per caso facendo le dovute premesse. Prima di tutto fra i prerequisiti servono competenze di base di HTML, CSS e JS. In particolare le funzioni arrow freccia sono tipiche di ECMASCRIPT 6, ossia l’ultima versione di js ricca di novità per cui anche qui si dovrebbe almeno sulla carta avere un pò di domestichezza. Tuttavia possiamo colmare il divario almeno rispettando Pareto e la regola ottanta venti: su ottanta minuti dedicati allo studio di REACT almeno venti minuti se ci si applica possono diventare competenze acquisite? Quindi partiamo senza dimenticare che i nostri browser hanno bisogno di implementare il plug-in react che analizza la corretta visibilità degli script marcati dai tag <script> di apertura e chiusura delle nostre pagine WEB. C’è inoltre da chiarire che fare APP con NODE (javaScript lato server) ha un modus operandi diverso dall’ analisi qui riportata, che essendo di primo livello, quindi adatta a chi inizia a giocare a scacchi non senza ambizioni e velleità, si presta solo alla parte statica terra-terra delle implementazioni senza terminale che automatizzano i processi e complicano anche la vita se non si conosce la struttura di una APP lato server(tradotto, saltare a javaScript lato server non è un processo indolore). Quindi installato il plug-in che ci segnala errori sui componenti react possiamo partire analizzando lo script presente all’ indirizzo: https://www.farwebdesign.com/projectreact/react_1.html ; bellissimo progetto non si vede nulla se non il bianco più profondo, magari gli esquimesi possono tradurre il termine NEVE in sette modi diversi ma noi qui che abbiamo fatto? In sostanza abbiamo messo i link al framework per farlo lavorare localmente lato client (cosa che ovviamente non servirebbe gestendo tutto con NPM). Molto importante invece il DIV contrassegnato da id=”root” in quanto è proprio quell’ area che farà il lavoro sporco:

<head>
<title>React Project</title>
https://unpkg.com/react@16.7.0/umd/react.development.js
https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js
</head>
<body>
<div id=”root”></div>
</body>

Adesso analizziamo il file https://www.farwebdesign.com/projectreact/react_2.html:

<head>
<title>React Project</title>
https://unpkg.com/react@16.7.0/umd/react.development.js
https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js
</head>
<body>
<div id=”root”></div>
<script type=”text/javascript”>
ReactDOM.render(
React.createElement(
“h1”,
{“style”: {“color”: “red”}},
“Creare é dare una forma al proprio destino – A Camus”
),
document.getElementById(“root”)
);
</script>
</body>

Qui al posto di ciao mondo abbiamo sostituito una frase di Camus che risulta anche mozzata perchè nell’ head andrebbe inserito il TAG <meta charset=”utf-8″> per l’esatta interpretazione dei caratteri a video, a noi interessa l’analisi di react per cui notiamo che siamo di fronte a una doppia funzione nidificata, ossia una scatola dentro la scatola. Quella esterna che è ReactDOM.render (vedere https://it.reactjs.org/docs/react-dom.html ) è responsabile di visualizzare graficamente i contenuti della funzione interna che con il metodo createElement ( vedere https://it.reactjs.org/docs/react-api.html#createelement ) riempe di contenuti la cornice. Vitale è l’istruzione finale javascript document.getElementById(“root”) che come si sottolineava prima serve a sparare tutto il contenuto creato in un punto preciso e cioé nel div che ha un nome e un cognome (root)! Ancora da analizzare ci sono le graffe dentro le graffe, in quanto ci sono delle proprietà che verranno riversate sul selettore. Quando non ci sono proprietà nell’ oggetto dobbiamo impostare a NULL il valore. Analizziamo ora https://www.farwebdesign.com/projectreact/react_3.html:

<head>
<title>React Project</title>
https://unpkg.com/react@16.7.0/umd/react.development.js
https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js
</head>
<body>
<div id=”root”></div>
<script type=”text/javascript”>
ReactDOM.render(
React.createElement(
“div”,
null,
React.createElement(
“h1”,
null,
“Creare é dare una forma al proprio destino – A Camus”
)
),
document.getElementById(“root”)
);
</script>
</body>

Qui compare il NULL che si diceva prima ossia NON CI SONO PROPRIETA’ per l’oggetto renderizzato. Manca sempre il <meta charset=”utf-8″> che fa guai sulle stringhe di testo ma non ci importa perchè la nostra attenzione è rivolta sulla parte dinamica. Qui viene creato un elemento div che diventa padre dell’ elemento h1 e questo ci porta ad analizzare una situazione molto importante perchè REACT appoggiandosi a un DOM virtuale che traduce prima di quello reale ha bisogno di decodificare bene il codice HTML per renderlo digeribile al rendering della pagina che ha bisogno di un traduttore che ha un nome e cioé JSX, infatti così il div come è segnalato ci crea problemi, vediamo allora il codice sorgente di https://www.farwebdesign.com/projectreact/react_4.html:

<head>
<title>React Project</title>
https://unpkg.com/react@16.7.0/umd/react.development.js
https://unpkg.com/react-dom@16.7.0/umd/react-dom.development.js
https://unpkg.com/@babel/standalone/babel.min.js
</head>
<body>
<div id=”root”></div>
<script type=”text/babel”>
ReactDOM.render(
<h1>Creare ̩ dare una forma al proprio destino РA Camus</h1>,
document.getElementById(“root”)
);
</script>

Qui abbiamo aggiunto un link esterno con CDN , un traduttore di nome BABEL che interpreta (come dovrebbe fare il charset menzionato prima che manca per le frasi) correttamente i TAG per il parser REACT che deve macinare le istruzioni delle funzioni per renderle compatibili con il DOM virtuale e successivo rendering. Infatti anche la dicitura sullo script è cambiata passando a script type=”text/babel”. Da questo momento avendo inserito il famoso traduttore JSX (vedere https://it.reactjs.org/docs/faq-build.html#gatsby-focus-wrapper ) di REACT non dovremmo più avere anomalie sull’ impostazione base. Vediamo il content di https://www.farwebdesign.com/projectreact/react_5.html , la parte head è per comodità tranciata visto che rimarrà invariata rispetto a prima per tutto il prosieguo, prenderemo in esame da ora in poi solo il contenuto del body:

<div id=”root”></div>
<script type=”text/babel”>
let city = “Assisi”;

ReactDOM.render(
<h1 className=”heading”>Hello {city}</h1>,
document.getElementById(“root”)
);
</script>

Qui siamo di fronte a un classico ciao Assisi (W il Glocal!) con testo stilizzato . Da notare come il contenuto della variabile city sia iniettato nel corpo del render grazie all’ uso delle graffe {}. Andiamo oltre analizzando il corpo della pagina con https://www.farwebdesign.com/projectreact/react_6.html:

<div id=”root”></div>
<script type=”text/babel”>

const Hello = () => {
return (
<div className=”heading”>
<h1>Creare ̩ dare una forma al proprio destino РA Camus</h1>
</div>
)
};

ReactDOM.render(
<Hello />,
document.getElementById(“root”)
);
</script>

Qui siamo di fronte a una incredibile novità! possiamo dichiarare una costante e all’ interno del suo valore costruire una funzione con un valore di ritorno che non fa altro che comporre tutto il div critico contrassegnato da id=”root”, per cui ci basterà assurdamente richiamare solo il nome di questa costante per invocare tutto quello che rappresenta. Magia! C’è anche un className=”heading” che possiamo stilizzare nell’ head come vogliamo settando la classe. Vediamo il corpo di https://www.farwebdesign.com/projectreact/react_7.html:

<body>
<div id=”root”></div>
<script type=”text/babel”>

const Hello = ({library, message}) => {
return (
<div className=”heading”>
<h1>Welcome to {library}</h1>
<p>{message}</p>
</div>
)
};

ReactDOM.render(
<Hello library=”React” message=”Enjoy!”/>,
document.getElementById(“root”)
);
</script>
</body>

Sempre più difficile! Qui abbiamo un componente che accetta due parametri di ingresso prima di sparare tutto il suo contenuto a video, per cui possiamo personalizzare il nostro oggettino decidendo di volta in volta cosa far comparire. La costante Hello che contiene tutto, deve avere la prima lettera rigorosamente maiuscola per poter essere invocata correttamente nel metodo render. Vediamo il corpo di https://www.farwebdesign.com/projectreact/react_8.html:

<div id=”root”></div>
<script type=”text/babel”>

const Lake = ({name}) => <h1>{name}</h1>;

const App = () => (
<div>
<Lake name=”Lago Trasimeno” />
<Lake name=”Lago di Corbara” />
<Lake name=”Lago di Piediluco” />
<Lake name=”Lago di Alviano” />
</div>
);

ReactDOM.render(
<App />,
document.getElementById(“root”)
);
</script>

Qui in sostanza con una funzione definita secondo la nuova nomenclatura js6 ARROW FRECCIA (una funzione in forma sintetica) definiamo come il valore di una costante debba essere formattato, in questo modo posso dire che ogni attributo name della costante Lake deve uscire sulla pagina con intestazione1 (h1). Questo avviene all’ interno di un COMPONENTE definito App il quale prima eredita sui suoi contenuti l’operazione descritta in precedenza e dopo si dà in pasto con un semplice TAG alla funzione ReactDOM.render che delegherà a document.getElementById di trasmettere i dati al div contrassegnato da ID=”root”. dA NOTARE E APPREZZARE QUINDI COME UN SEMPLICE tag COME <App /> sia utilizzabile a livello atomico! Vediamo https://www.farwebdesign.com/projectreact/react_9.html:

<div id=”root”></div>
<script type=”text/babel”>

const Lake = ({name}) => <h1>{name}</h1>;

class App extends React.Component {
render() {
return (
<div>
<Lake name=”Lago Trasimeno” />
<Lake name=”Lago di Corbara” />
<Lake name=”Lago di Piediluco” />
<Lake name=”Lago di Alviano” />>
</div>
)
}
}

ReactDOM.render(
<App />,
document.getElementById(“root”)
);
</script>

Qui abbiamo migliorato l’organizzazione del codice precedente e compattato tutto dentro un valore di ritorno del componente APP che adesso è completamente autonomo, non per questo REACT segue il principio della scomposizione molecolare e della riutilizzabilità del codice atomico, cioè la singola parte che non é più divisibile. Da notare l’uso di extends React.Component e render dentro il componente. Vediamo il corpo della pagina https://www.farwebdesign.com/projectreact/react_10.html:

<div id=”root”></div>
<script type=”text/babel”>

const Lake = ({name}) => <h1>{name}</h1>;

class App extends React.Component {
state = {
loggedIn: false
}
render() {
return (
<div>
<div>The user is {this.state.loggedIn ? “logged in” : “not logged in”}.</div>
<Lake name=”Lago Trasimeno” />
<Lake name=”Lago di Corbara” />
<Lake name=”Lago di Piediluco” />
<Lake name=”Lago di Alviano” />
</div>
)
}
}

ReactDOM.render(
<App />,
document.getElementById(“root”)
);
</script>
</body>

SIamo alla presenta agli STATI (vedere https://it.reactjs.org/docs/state-and-lifecycle.html ) e a come vengono ingeriti dal componente APP che nasce come estensione della classe genitore React.Component. In sostanza impostando il valore della variabile loggedIn a false sotto l’operatore ternario dice che se questa variabile ha un valore vero scrivi a video logged in altrimenti esegui l’istruzione contraria, una semplice istruzione condizionale espressa in formula veloce sintetica in una sola riga seguendo la sintassi dei ? e dei : al posto degli IF ed ELSE. Il resto rimane invariato. Analizziamo il contenuto del body in https://www.farwebdesign.com/projectreact/react_11.html:

<div id=”root”></div>
<script type=”text/babel”>

const Lake = ({name}) => <h1>{name}</h1>;

class App extends React.Component {
state = {
loggedIn: false
}
logIn = () => this.setState({loggedIn: true})
logOut = () => this.setState({loggedIn: false})
render() {
return (
<div>
<button onClick={this.logIn}>Log In</button>
<button onClick={this.logOut}>Log Out</button>
<div>
The user is {
this.state.loggedIn
? “logged in”
: “not logged in”}.
</div>
<Lake name=”Lago Trasimeno” />
<Lake name=”Lago di Corbara” />
<Lake name=”Lago di Piediluco” />
<Lake name=”Lago di Alviano” />
</div>
)
}
}

ReactDOM.render(
<App />,
document.getElementById(“root”)
);
</script>

Questo esempio invece mostra come INTERCETTARE GLI EVENTI seguendo la logica dell’ OPERATORE TERNARIO, vediamo come premendo su ogni rispettivo pulsante si ha una risposta all’ evento onclick che risponde segnalando vero o falso a seconda della scelta. l’ESPRESSIONE this.state.loggedIn fa riferimento alla funzione dell’ oggetto corrente che ha una proprietà valorizzata a false. Vediamo https://www.farwebdesign.com/projectreact/react_12.html solo il corpo della pagina:

<div id=”root”></div>
<script type=”text/babel”>

const Lake = ({name}) => <h1>{name}</h1>;
const SkiResort = ({name}) => <h1>{name}</h1>;

const App = ({summer}) => (
<div>
{summer
? <Lake name=”Lago Trasimeno”/>
: <SkiResort name=”Monte Pennino”/>}
</div>
)

ReactDOM.render(
<App summer={false}/>,
document.getElementById(“root”)
);
</script>

Qui gioco sulle vacanze da passare al lago o in montagna. L’operatore ternario lo abbiamo già visto prima e sappiamo come funziona. Il punto ? interrogativo ossia IF corrisponde di default a VERO altrimenti else o : corriponde a FALSO come valore booleano. Ma il componente quando viene dichiarato all’ interno del metodo render accetta l’impostazione a false di default per cui si annulla la condizione vera che era quella di vai al trasimeno se non succede altro, ma qui summer nel corpo del render è valorizzato a false, quindi l’altro succede! Ovviamente impostando nel render summer a true ci toccherà andare in vacanza al lago Trasimeno (che dispiacere!). Vediamo il corpo di https://www.farwebdesign.com/projectreact/react_13.html dove vediamo in azione un ciclo che prende gli elementi da un array e li fa girare:

<div id=”root”></div>
<script type=”text/babel”>

const lakeList = [
“Lago Trasimeno”,
“Lago di Corbara”,
“Lago di Piediluco”
];

const App = ({lakes}) => (
<ul>
{lakes.map((lake, i) =>
<li key={i}>{lake}</li>
)}
</ul>
)

ReactDOM.render(
<App lakes={lakeList}/>,
document.getElementById(“root”)
);

</script>

Questo è solo un ciclo, il componente è scomparso! Esiste una costante che genera un ciclo comprensivo di HTML che ha bisogno di un’altra costante per avere del contenuto da macinare, infatti si legge <App lakes={lakeList}/> con la A iniziale rigorosamente maiuscola (altrimente verrebbe segnalato errore) e dove lakeList è il contenuto dell’ armadio definito fuori contesto e presente come entità autonoma (o atomica visto il logo react!). Vediamo infine https://www.farwebdesign.com/projectreact/react_14.html dove viene proposta una soluzione per far ciclare gli elementi di un array che non hanno un solo valore assegnato ma più di uno da stampare a video:

<div id=”root”></div>
<script type=”text/babel”>

const lakeList = [
{id: 1, name: “Lago Trasimeno”, trailhead: “Volare”},
{id: 2, name: “Lago di Corbara”, trailhead: “Sognare”},
{id: 3, name: “Lago di Piediluco”, trailhead: “Ammirare”}
];

const App = ({lakes}) => (
<ul>
{lakes.map(lake =>
<li key={lake.id}>{lake.name} | Trailhead: {lake.trailhead}</li>
)}
</ul>
)

ReactDOM.render(
<App lakes={lakeList}/>,
document.getElementById(“root”)
);

</script>

Lo script è uguale al precedente come logica ma qui l’array è più complesso perchè non ha un solo valore associato all’ oggetto, ma bensì ospita due proprietà, name e trailhead. Abbiamo coppie di chiave/valore che hanno delle assegnazioni da restituire a video. Definiamo in sostanza prima un array che si chiama lakeList e successivamente diciamo cosa farne di questi dati con il nome della funzione che si chiama lakes e che accetta come parametro da masticare nel ciclo proprio il nome della mia costante array (array che sono facilmente riconoscibili perchè nella sintassi generale sono definiti da parentesi quadre!)

CONCLUSIONI

REACT (inventato da quelli di Facebook!) risponde al trend delle curve di apprendimento indicato dal mercato dove Vue JS sembra il framework più facile da digerire, poi viene REACT JS e infine il demoniaco ANGULAR con Typescript (Champollion dove sei?); alla fine di questo lungo viaggio siamo riusciti almeno a farci promuovere a terza nazionale che è sempre un gradino basso per un agonista che gioca a scacchi, ma ricordiamoci che eravamo partiti da livello inclassificato che è ancora peggio. In ogni caso ricordiamoci che davanti ci sono ancora miriadi di categorie da percorrere e ci sarà molto da esplorare sulla parte server di REACT, con un ambiente di sviluppo molto complesso ma anche molto più ricco di risorse, dove le possibilità rispetto a queste lavorazioni statiche HTML aumentano a dismisura, non è un caso che questa tecnologia oggi sia richiestissima e di uso quotidiano nelle grandi multinazionali globali! La domanda é ma la legge di Pareto iniziale nell’ incipit dopo questa trattazione è stata confutata? Ai poster(i) l’ardua sentenza! In uno dei prossimi articoli cercheremo di capire come fare le stesse cose viste qui, ma lato server analizzando i comandi da impartire a finestra terminale. Ci accorgeremo che il modo di lavorare sarà completamente diverso perche NODE e NPM ci consentono implementazioni veloci e dipendenze strutturate, così tanto che è necessario conoscere l’anatomia del FILE SYSTEM progetto creato al momento della comparsa del famoso package.json! Insomma REACT lato server rappresenta a dir poco uno STRAVOLGIMENTO TOTALE ma dà anche più soddifazioni in termini di risultati di grafica e di funzionalità, tanto da arrivare a valutare seriamente di concentrarsi solo sulla parte SERVER che non è questa statica con agganci a librerie esterne CDN vista oggi, anche se JS NON CAMBIA da entrambi i lati della rete. Infine cosa molto importante per uno sviluppatore di REACT, consultare sempre giorno-notte-colazione-cena la documentazione specifica, in questo caso https://it.reactjs.org/

web design umbria
game development, web design Umbria, web developer Umbria

Aspettando Godot: non é Beckett ma Game Development

Strano, digitando Godot su un motore di ricerca mi aspetterei di trovare informazioni sul teatro dell’ assurdo e https://it.wikipedia.org/wiki/Samuel_Beckett e quindi sullo strano sig. Godot che se ne va in giro a passeggiare con la mascherina nella fase due aspettando qualcuno. Invece il primo risultato della SERP riporta: https://godotengine.org/ il cui claim è guarda un pò proprio un famigliare “Il motore di gioco che hai aspettato“. Ci sono alcune buone notizie immediate. La piattaforma di sviluppo è liberamente usabile senza restrizioni e anche open source! E’ finita l’attesa spasmodica delle nostre teatrali pulsioni! Ha inoltre un vasto eco di appassionati sviluppatori che continuano a far crescere questo potente engine per i giochi. Godot usa un linguaggio di scripting simile a Pyton che si chiama GDScript. I primi passi da fare sono scaricare dal sito indicato l’eseguibile da decomprimere e prendere familiarità con i nodi e le escene e la personalizzazione degli oggetti e dei caratteri. Questa piattaforma segue una logica architetturale a nodi. Godot user interface supporta anche i suoni a corredo creatico e naturalmente consente di creare nemici a piacere e collezioni di oggetto. Tutto questo lo fa con una interfaccia enormemente semplificata rispetto a Unity dove posso anche scegliere di mettere in piedi costruzioni di gioco 3D. I nodi servono a gestire le scene e possiamo mettere in moto delle collection di location che avranno a sostegno quindi dei nodi che come struttura root ramificazione e figli ricorda proprio il DOM dei documenti html manipolabili con javascript. Un nodo può essere associato alla scena quindi e la generazione di fatto crea un file sul file system del progetto con estensione TSCN, per esempio MainScene.tscn. Il modo migliore per capire come funziona la piattaforma è riportare in vita il deprecato FLASH, un portentoso software che qualche anno fa creava fantastiche animazione usando la metafora dello STAGE, dove gli elementi venivano posizionati a livelli uno sopra l’altro. Qui è lo stesso: un nodo potrebbe fare da cornice principale, un altro potrebbe aiutarci l’istanza nemici, un altro potrebbe avere da controllare ostacoli e pericoli etc etc fino a scomporre tutti gli elementi primari che formano la scena che diventa un gigantesco affresco armonico e funzionale. Ad esempio devo creare un elemento nel progetto chiamato PLAYER.TSCN che sarà un nodo figlio del blocco main. Questo giocatore lo posso posizionare con una griglia di precisione disposta sulla destra inserendo dei valori numerici sugli assi X e Y e posso anche decidere di inserire un’ area di collisione sempre gestendone da pannello di controllo INSPECTOR le proprietà. Il programma mi fa istanziare gli oggetti per cui da figlio posso ereditare caratteristiche o proprietà tipiche del papà menzionato. Le griglie di costruzione per le scene e i personaggi sono sagomate millimetricamente per posizionare ad esempio blocchi o ostacoli lungo il cammino dell’ eroe con assoluta precisione. Una volta definite le possibilità di movimento del personaggio giocatore che può saltare usando la gravità e muoversi avanti e indietro per aggirare gli ostacoli possiamo disegnare gli scenari di gioco con i blocchi di piramide o simili messi a disposizione dagli asset-risorse della piattaforma. Certo è che la fase di pianificazione per creare un gioco deve tenere conto di innumerevoli fattori che sono sempre tanti: dobbiamo considerare situazioni in cui l’eroe saltando per esempio raccoglie delle monete e quindi incrementa uno SCORE, oppure situazioni dove un nemico entra in collisione con noi ed esplodiamo o in alternativa ostacoli vaganti con certe caratteristiche di movimento da definire, per cui servirà una FUNZIONE DI RIPRISTINO per continuare il gioco azzerando tutti i progressi. Servirà un dispositivo di ripresa cinematografica attivabile da INSPECTOR che seguirà i movimenti del nostro prode Achille, per cui saltando, correndo ed evitando ostacoli il nostro sguardo è dinamico e segue noi che siamo i protagonisti mentre la location di sfondo scorre. Le dinamiche da prevedere sono sempre tante e complesse: se devo saltare e afferrare due euro intendendo graficamente un doblone d’oro raggiungibile alcuni metri sopra la mia testa che afferro volando, quel nodo al momento del contatto deve ubbidire a una funzione che dissolve il valore della moneta per alimentare il mio contatore e contemporaneamente attivare la possibilità di afferrare il prossimo target da raggiungere sempre saltellando dinamicamente come un canguro. Come se non bastasse al momento della digestione per indicare un successo dovrò richiamare un suono sintomatico che l’operazione di ingurgitamento è stata piacevole. Con Godot tutti questi aspetti della progettazione si possono controllare ma soprattutto alle prime armi la piattaforma ci mette a disposizione con l’import alcuni progetti che si possono vivisezionare e studiare per vedere l’effetto che fa e come sono strutturati. Si possono quindi richiamare delle librerie che hanno oggetti figli che a loro volta diventeranno padri per le nostre mainScene e in questo modo potremmo agganciare dei nodi, richiamare dei valori etc, mettere a disposizioni numerosi metodi per soddisfare le nostre esigenze e anche richiamare delle risorse utili con User Interface per fornire audio tematico per il nostro game! Godot, quello del teatro, ci dispiace ma l’attesa è finita: https://godotengine.org/

ajax, jquery, web developer Umbria

Ajax e JQuery: come dare scacco matto in due mosse!

Fermi tutti! Ajax non è una squadra di calcio! E’ un rivoluzionario oggetto che hanno inserito nei moderni browser chiamato XMLHTTPREQUEST e serve per effettuare chiamate asincrone senza permettere il caricamento della pagina tanto caro a HTTP di vecchio stampo dove l’utente fa una richiesta client e il server singolarmente restituisce una risposta immediata prima di effettuare altre operazioni. Ne consegue che migliora la UI dell’ utente ma non solo l’esperienza in termini di velocità, soprattutto in efficienza visto che mentre in background Ajax si occupa di aggiornare dei dati per esempio senza rifare il rendering della pagina è possibile anche andare oltre in multitasking. E quando Ajax incontra JQuery il risultato finale performante è assicurato, in quanto con la versione semplificata di javascript con poche righe di codice lineari è possibile aggiornare e catturare i dati lato server senza mettere la sveglia per effettuare la nostra prossima operazione. Ma analizziamo un primo esempio dove in virtù di una richiesta effettuata tramite un BUTTON chiedo alla pagina di restituirmi il contenuto di un file testo lato server. Per restare in tema di scacchi supponiamo di chiedere all’ oracolo messo su come esercizio quale apertura sia più frequente nella pratica dei Grandi Maestri di scacchi. Non che ci interessi molto, ma con questo pretesto possiamo iniziare a dare un occhiata a come viene effettuata una chiamata AJAX sfruttando la potenza di esecuzione di JQuery e quali sono i suoi attributi che possiamo utilizzare per decidere se la richiesta deve essere GET o POST (di default è GET), se ci sono dei dati in caricamento, degli errori da gestire per dare un buon esito all’ utente e via dicendo con altri parametri. Prendiamo quindi in esame l’esempio presente all’ indirizzo https://www.farwebdesign.com/ajax_jquery/1/ dove c’è un pulsante che fa una domanda e un campo testo che dopo la pressione esercitata come EVENTO CLICK darà la risposta. Dentro la directory avremo quindi un file TXT, il file JQuery per permettere l’interazione con XMLHTTPREQUEST e il file HTML che avrà il seguente contenuto nel body:

<div id=”contenitore”>
<div id=”contenuto”></div>
<button>Vuoi sapere quale è la difesa più giocata tra i GM? Click here!</button>
</div>

<script>
$(document).ready( // questa riga è standard per permettere prima il caricamento della pagina rispetto ad altre operazioni da effettuare
function(){

$(“button”).click( // questa riga dice che l’elemento BUTTON alla pressione del CLICK eseguirà il contenuto della funzione contenuta
function()
{
$.ajax( // potenza di JQuery! Il metodo ajax permette comunicazioni asincrone
{
url: “berlinese.txt”, // il parametro url serve a collegare la risorsa per attingere ai suoi contenuti
success: function(result) // il parametro success evidenzia un risultato da restituire come risposta alla richiesta
{
$(“#contenuto”).html(result); // qui viene restituito il contenuto appoggiandosi all’ ID del DIV statico dell’ HTML definito come CONTENUTO

},
error: function (request, status, error) // il parametro error gestisce eventuali messaggi di errore sulla richiesta dell’ utente
{
alert(“Errore nella richiesta”); // una finestra semplice che segnala all’ utente che qualcosa è andato storto per esempio se il file testo del server si chiamasse in modo diverso da URL
}

}
);

}

);

});
</script>

Dopo la pressione del pulsante avrò graficamente la mia risposta come in figura ottenuta attraverso un processo lineare senza rendering della pagina: richiesta, elaborazione dei dati seguendo i criteri di lavoro dell’ oggetto xmhttprequest, risposta. Adesso analizziamo una caso dove al posto del file testo mi ritrovo da gestire un file con estensione JSON che sono sequenze di dati formattati in maniera particolare e che si possono validare facilmente come verifica della sintassi con strumenti free presenti in rete come https://jsonformatter.curiousconcept.com/ che si prendono cura di sottolineare eventuali anomalie nella struttura dei dati. Analizziamo quindi il seguente esercizio dedicato all’ attuale campione del mondo di scacchi all’ indirizzo https://www.farwebdesign.com/ajax_jquery/2/ , chi non sa di chi stiamo parlando può cliccare sul pulsante e scoprire chi è questa leggendaria figura. Qui abbiamo uno script decisamente diverso in quanto cambiando la tipologia di fonte di dati ci troviamo nella necessità di spezzare i dati per farli entrare nelle singole celle identificate da un ID poi catturato con il valore grazie a JQuery:

<table>
<tr>
<td>Nome</td>
<td id=”nome”></td>
</tr>
<tr>
<td>Cognome</td>
<td id=”cognome”></td>
</tr>
<tr>
<td>Età</td>
<td id=”eta”></td>
</tr>
<tr>
<td>Federazione</td>
<td id=”federazione”></td>
</tr>
<tr>
<td colspan=”2″><button>Scarica dati</button></td>
</tr>
</table>
<script>
$(document).ready(
function(){

$(“button”).click(function(){

$.ajax(
{
url: “dati.json”,
success: function(result)
{
$(“#nome”).text(result.nome);
$(“#cognome”).text(result.cognome);
$(“#eta”).text(result.eta);
$(“#federazione”).text(result.federazione);
}
}
);
});

}
);

</script>

 

Il risultato ottenuto è quello mostrato, da sottolineare come le istruzioni tipo $(“#nome”).text(result.nome); servano proprio a collegare la fonte dei dati con la cella da agganciare statica presente nell’ HTML. L’analisi del resto rimane sempre la stessa: abbiamo un evento click che scatena il contenuto di una funzione che di fatto aziona un metodo ajax, cattura i dati da un url, verifica il risultato ottenuto e immette questi dati nella parte client tramite l’identificazione ID consentita da JQuery tramite il famoso cancelletto #. Quindi nulla di particolarmente impegnativo. Finora abbiamo analizzato però solo casi in cui di default viene usato solo la trasmissione dati GET che sappiamo non essere ideale ad esempio quando dobbiamo gestire quelle situazioni in cui abbiamo utente e password che devono rimanere dati nascosti quando transitano in rete. Abbiamo disponibile nell’ oggetto xmlhttprequest dove il parametro type che ci consente di specificare la modalità di trasmissione dei dati, ossia nel caso che ci appresteremo ad analizzare quindi POST. Analizziamo quindi questa nuova situazione presente all’ indirizzo https://www.farwebdesign.com/ajax_jquery/3/

<div id=”contenitore”>
<input type=”text” name=”username” placeholder=”Username”/>
<input type=”password” name=”password” placeholder=”Password”/>
<button>Login</button>
</div>

<script>
$(document).ready(
function(){
$(“button”).click(function(){
username=$(“[name=username]”).val();
password=$(“[name=password]”).val();
$.ajax(
{
url:”login.php”,
type: “POST”,
data: {“username”:username, “password”:password},
success:function(result)
{
if (result==’OK’)
{
alert(“Puoi entrare”);
$(“[name=username]”).val(”);
$(“[name=password]”).val(”);
}
else if (result==’KO’)
{
alert(“Credenziali errate”);
}
else
alert(“Errore”);
}

}
);
});
});

</script>

Questa volta il file punta sul file login.ph che contiene al suo interno i criteri con cui l’utente dovrà o non dovrà ottenere il suo scopo, che si presuppone essere quello di atterrare su un’ area riservata.L’ultimo caso analizza invece un file JSON con dati multipli da caricare dove la creazione della lista nel suo elemento LI avviene ciclando con un EACH, per ottenere una stringa composita che verrà infine stampata a video usando il metodo APPEND

<div id=”centrale”>
<ul>
</ul>
</div>
<script>
$(document).ready(
function(){
$.ajax(
{
url:”persone.json”,
success: function (result)
{
lista=$(“ul”);
$.each(
result, function(k,v)
{
li=$(“<li>”);
li.text(v.nome+” “+v.cognome+”, “+v.eta+
” anni (“+v.citta+”)”);
lista.append(li);
}
);
}
}
);
});
</script>

dove il contenuto del file JSON sarà:

[
{
“nome”:”Giulio”,
“cognome”:”Rossi”,
“eta”: 25,
“citta”: “Genova”
},
{
“nome”:”Enea”,
“cognome”:”Verdi”,
“eta”: 33,
“citta”: “Torino”
},
{
“nome”:”Elisa”,
“cognome”:”Bianchi”,
“eta”: 19,
“citta”: “Roma”
},
{
“nome”:”Mario”,
“cognome”:”Bianchi”,
“eta”: 57,
“citta”: “Roma”
},
{
“nome”:”Silvio”,
“cognome”:”Gialli”,
“eta”: 28,
“citta”: “Napoli”
},
{
“nome”:”Marina”,
“cognome”:”Gialli”,
“eta”: 21,
“citta”: “Napoli”
}
]

web developer Umbria
oop, php, web developer Umbria

PHP e OOP: membri statici e costanti all’ interno di una classe

Articoli precedenti sullo stesso tema OOP in PHP nei portali umbriaway:

https://umbriawayinfo.wordpress.com/2019/04/07/programmazione-procedurale-oppure-oop-this-is-the-problem/

https://umbriawaypotenzia.wordpress.com/2019/04/07/php-versione-sette-introdotte-nuove-direttive-per-trasformare-il-linguaggio-in-fortemente-tipicizzato/

https://umbriawaysemplifica.wordpress.com/2019/04/08/ambito-di-visibilita-delle-variabili-in-php-public-protected-private/

https://umbriawaytarget.wordpress.com/2019/04/08/php-oop-magic-method-e-costruttori/

https://umbriawayvalorizza.wordpress.com/2019/04/08/warning-ambito-di-visibilita-publica-delle-classi-encapsulation-e-sicurezza-metodi-getter-e-setter/

https://umbriawayvendita.wordpress.com/2019/04/09/php-e-oop-magic-method-__autoload-ereditarieta-pianificazione-iniziale-con-uml/

https://umbriawaynoir.wordpress.com/2019/04/09/php-e-oop-overriding-e-polimorfismo/

web developer UmbriaEsiste un legame strettissimo tra le proprietà di una classe e l’istanza di una classe, nel senso che posso diversificare i valori tra le due classi. Posso anche impostare degli atributi specifici nella classe, esattamente come avviene in un ostello quando la cucina o certi locali sono in uso comune. Posso quindi identificare una proprietà o un metodo specifico definindolo in un certo modo con una certa sintassi tenendo presente che tutto quello che accade sulle istanze ha una ripercussione diretta su tutti gli oggetti che hanno quella caratteristica. A livello di comprensione è quello che accade nel procedurale con le variabili globali di PHP, dove tutte le variabili che hanno quella caratteristica subiranno le stesse modifiche in tutte le righe del programma. Sostanzialmente certe tipologie di variabili fanno riferimento alla classe originaria e non all’ istanza che ne scaturisce dall’ utilizzo della parola chiave NEW. Ad esempio all’ interno di una classe contatore potrei avere bisogno di una inizializzazione fissa nell’ istruzione protected static $contatore=0; in quanto il programma ha proprio questa caratteristica che non deve mutare neanche all’ esterno. Ma se volessi modificare da fuori il valore di questa variabile potrei farlo usando la notazione pattern singleton dei due punti che mi faranno accedere. La parola STATIC caratterizza una specificità nella classe, ossia è come se imponesse a tutti quelli che utilizzano la classe genitore o chi istanzia nuove classi che quella variabile ha quel valore che deve rimanere immutabile. Quindi userò una sintassi tipo:

self::$ proprietà oppure $metodo

A questo punto diamo un occhiata alla classe sorgente e quella derivata come si trasforma e come diventa:

/*

file Hits.php

<?php
class Hits {
protected $ip;
protected static $numhits = 0;
public function __construct() {
self::$numhits++;
}
public function totalHits() {
return self::$numhits;
}
public function setIp() {
$this->ip = $_SERVER[‘REMOTE_ADDR’];
$this->saveIp();
}
private function saveIp() {
// salvo dato su database
}
}

file di output index.php:

<?php
require_once “Classi/Hits.php”;
$hit = new Hits();
echo $hit -> totalHits();
echo “<br>”;
$hit = new Hits();
echo $hit -> totalHits();

file Hits1.php

<?php
class Hits {
protected $ip;
protected static $numhits = 0;
public static function increment() {
return self::$numhits++;
}
public function totalHits() {
return self::$numhits;
}
public function setIp() {
$this->ip = $_SERVER[‘REMOTE_ADDR’];
$this->saveIp();
}
private function saveIp() {
// salvo dato su database
}
}

file di lettura index1.php

<?php
require_once “Classi/Hits1.php”;
$hit = new Hits();
echo $hit::increment();
echo “<br>”;
Hits::increment();
echo $hit->totalHits();

*/

Quindi con questi attributi specifici nella classe, abbiamo visto la parola chiave STATIC, definisco una sorta di variabile globale che ha una sua costante appartenenza con la classe originaria. Quel metodo non apparterrà quindi all’ istanza che verrà creata ma sarà una particolarità della classe originale e ci potrò accedere solo usando una sintassi tipo self::$ proprietà oppure $metodo che avrà ripercussioni su tutte le aree del progetto che utilizzano quella proprietà. Non posso manipoalre queste variabili globali con la parola chiave THIS che fa riferimento all’ oggetto corrente, mentre abbiamo detto che una istanza non si porta dietro le caratteristiche esclusive della classe originaria.La parola chiave self fa riferimento alla classe di origine stessa.