Nozioni base sulla programmazione back-end.

PHP E JAVASCRIPT

Nell'articolo precedente ho illustrato i linguaggi front-end HTML e CSS, ovvero quei linguaggi che comunicano col browser in maniera diretta. Insomma, è l'unione di tutti quei componenti che vengono mostrati a video, senza il bisogno di interagire con essi. Ma tutto ciò non basta, perchè una pagina web composta solamente da testi e immagini è definita "statica", l'utente può limitarsi solamente a guardare o leggere, privato di qualsiasi forma di interattività. E qui entrano in gioco i linguaggi back-end, quindi quei linguaggi che, lavorando lato server, rendono la pagina "dinamica", permettendo all'utente di compiere azioni come inviare messaggi, cercare dei contenuti, registrarsi e così via...
In questo articolo verranno illustrati i linguaggi PHP e Javascript, consci del fatto che questi due linguaggi back-end richiedono uno studio e una pratica di vari mesi o anni per essere capiti a pieno. Stesso discorso fatto per l'HTML e il CSS, in questo articolo verranno spiegate le nozioni base ed elencate le funzioni più conosciute e diffuse.

Cominciamo!

Cos'è il PHP?

Il PHP, acronimo di PHP: Hypertext Preprocessor, è un linguaggio di scripting interpretato nato nel 1995 e ideato per realizzare pagine web dinamiche. Veloce, flessibile e pragmatico dà la possibilità di rendere interattivo ogni elemento, dando "vita" alla pagina web. Proprio per questo motivo è il linguaggio lato server più diffuso in assoluto. È un linguaggio a tipizzazione debole e dalla versione 5 migliora il supporto al paradigma di programmazione ad oggetti. Ogni documento PHP inizia con <?php e termina con ?>

Iniziamo ad elencare alcune delle funzionalità del PHP, definendo fin da subito che non ci sarà un esempio troppo complesso per ogni elemento, perchè trattasi solamente di una spiegazione basilare del linguaggio, destinato ad aumentare la curiosità e la voglia di maggiori informazioni.

Le variabili: primo concetto da imparare in qualunque linguaggio lato server, una variabile è una porzione di memoria in cui viene memorizzato un dato che può variare durante l’esecuzione del programma.

$hello = "Ciao mondo!";
echo $hello;
Tramite l'echo verrà visualizzata la frase "Ciao mondo!".

Le stringhe: Il tipo string viene utilizzato per memorizzare stringhe di caratteri ASCII, dove ciascun carattere è rappresentato da un byte. Una stringa può contenere lettere, numeri e caratteri speciali ed è l'insieme di più variabili.

$uno = 'Il PHP';
$due = 'è';
$tre = 'potente';
echo $uno . ' ' . $due . ' ' . $tre;
echo "$one $due $tre";
Col primo esempio verrà stampata la stringa con gli spazi tra una parola e l'altra, nel secondo esempio gli spazi non vengono inclusi. Output: "Il PHP è potente."

Gli Array: in italiano "vettori", sono delle mappe associative, ovvero un elenco di chiavi associate univocamente a un certo valore. Un array può avere al suo interno altri array o sotto-array dando vita a strutture dati complesse. Per ciclare un array si utilizza il foreach che serve a iterare delle operazioni che vanno eseguite sugli elementi di un array.

$residenti = array(
'Torino' => 908551,
'Milano' => 1315791,
'Roma' => 2753000);
$sum = 0;
foreach($residenti as $key=>$value) {
echo "La città $key ha $value abitanti. ";
$sum += $value;
}
echo "E in tutto ci sono $sum abitanti!";
L'output del codice è: La città Torino ha 908551 abitanti. La città Milano ha 1315791 abitanti. La città Roma ha 2753000 abitanti. E in tutto ci sono 4977342 abitanti!

If / Else: entrando nel cuore del linguaggio, if ed else sono due istruzioni condizionali in modo da inserire un bivio tra due o più opzioni alternative. Se è così eseguilo, altrimenti se non è così, esegui un'altra cosa. Per visualizzare un esempio scorrere e leggere "Gestione dei parametri".

Le funzioni: sono un modo flessibile e semplice per consolidare il codice. In pratica si cerca di riassumerlo il più possibile in modo da evitare di ripetere il codice più volte per ottenere lo stesso risultato desiderato in più parti delle pagina.

function visitare( $soggetto, $luogo ) {
return "Venite a visitare $soggetto sul $luogo"; }
echo visitare("GG-CREATOR", "sito.");
L'output sarà "Venite a visitare GG-CREATOR sul sito."

Include: È possibile includere una pagina PHP all'interno di un'altra per eseguirne il codice per evitare codice ridondante. Altri metodi di inclusione sono: require, include_once e require_once.

include 'header.php';
echo "Ciao mondo!";
include 'footer.php';

Gestione dei parametri: i parametri permetteno il passaggio di informazioni da una pagina all'altra attraverso le diverse funzionalità supportate dall'HTTP, tramite quattro array di tipo associativo chiamati internamente: $_GET, $_POST, $_COOKIE, $_SESSION.

Esempio del parametro GET:

/*Controllo se è stato ricevuto il parametro "GG-CREATOR" tramite metodo GET.
Se è rilevato lo visualizzo; se non è rilevato avverto l'utente.*/

if( isset( $_GET['GG-CREATOR'] ) ) {
$a = $_GET['GG-CREATOR']; // Salvo nella variabile $a il parametro "GG-CREATOR"
$a = htmlentities( $a ); // Questo "disinnesca" eventuali contenuti HTML contenuti in $a
echo $a; // Mostro a video
} else {
echo "Nessun parametro di nome GG-CREATOR trovato. Devi inviarlo!"; }

Ciclo for e while: il ciclo for è una struttura di controllo iterativa che determina l'esecuzione di una porzione di programma ripetuta per un certo numero noto di volte. Si distingue in questo modo dal ciclo while, in cui la ripetizione avviene finché è valida una determinata condizione.

Esempio del ciclo for:
/* In questo caso la variabile $n viene stampata a video, successivamente viene incrementata di 1, il ciclo termina quando $n è uguale a 9 (il ciclo conta da 0 fino a 9 quindi 10 volte). */

for($n=0; $n<=9; $n++){
echo $n; }
L'output sarà 0123456789.

Esempio del ciclo while:
/* In questo caso vediamo come stampare a video dei risultati estratti da una base di dati MySQL, eseguendo una query SQL. Questo script è incompleto, in quanto prima è necessario effettuare il collegamento alla base di dati MySQL tramite mysqli o PDO. */

$result = $mysqli->query("SELECT id FROM persone");
while($row = $result->fetch_assoc()) {
echo $row['id'] . "<br />"; }

/* In questo modo estraiamo dei dati da una base di dati MySQL sotto forma di array che verrà poi stampato tramite un ciclo while */

Do while: La differenza fondamentale tra il ciclo do-while e i cicli for e while è che il do-while esegue l’esecuzione del ciclo almeno per una volta, quindi il controllo della condizione viene eseguito al termine di ogni loop.

$i = 0;
do {
echo $i;
} while ($i > 0);

Switch: è una struttura di controllo che permette la verifica del valore di un'espressione, il cui ruolo consiste nel distinguere più casi corrispondenti ad altrettanti valori di una espressione

if ($i == 0) {
echo "i uguale a 0";
} elseif ($i == 1) {
echo "i uguale a 1";
} elseif ($i == 2) {
echo "i uguale a 2"; }
switch ($i) {
case 0:
echo "i uguale a 0";
break;
case 1:
echo "i uguale a 1";
break;
case 2:
echo "i uguale a 2";
break; }

Prima di passare al Javascript è fondamentale sottolineare che PHP permette l'elaborazione e la gestione dei dati di un database MySQL. I dati verranno richiesti, inseriti e modificati attraverso opportune query usando alcune estensioni tra cui MySQLi. Vediamo un esempio:

// Connessione a MySQL con l'estensione MySQLi

$mysqli = new mysqli('localhost', 'nome_utente_database', 'password_database', 'nome_database');

// Questo è il modo ufficiale di controllare se una connessione MySQL è fallita, MA $connect_error non è supportato fino a PHP 5.2.9 e 5.3.0. //

if ($mysqli->connect_error) { die("Connessione fallita, motivi: " . $mysqli->connect_error); }

// Proviamo una query ipotizzando che stiamo elaborando dati provenienti da una simil-rubrica:

$SQLQuery = $mysqli->query("SELECT indirizzo, telefono FROM utenti WHERE nome = 'Francesca' ");

// Da questa query otterremo l'indirizzo e il telefono della persona di nome Francesca,

// ipotizzando sia presente nella tabella utenti della base di dati in questione.

// Ora "trasformiamo" i dati ricevuti dalla query in un array associativo utilizzabile successivamente

$row = $SQLQuery->fetch_assoc();

// Mostriamo a video per esempio il numero di telefono dall'array

echo "Il numero di telefono di Francesca è: " . $row['telefono'];

// Chiusura della connessione alla base di dati

$mysqli->close();

Abbiamo quindi visto le nozioni base del vasto mondo del linguaggio PHP; non sono andato nel dettaglio ma comunque ogni elemento ha una sua spiegazione e un piccolo esempio per dare l'idea e incentivare la voglia di curiosare e documentarsi maggiormente. Il posto migliore per farlo è ovviamente visitare il sito ufficiale che trovate cliccando QUI, contenente una miriade di informazioni aggiuntive su nuovi elementi. Ma ora passiamo al Javascript.

Cos'è il Javascript?

JavaScript è un linguaggio di programmazione orientato agli oggetti e agli eventi utilizzato per la creazione di effetti dinamici interattivi tramite funzioni di script generate da eventi e inizializzati dall'utente nella pagina web. JavaScript viene utilizzato soprattutto come linguaggio di scripting, integrato, ovvero all'interno di altro codice. Sebbene per la maggior parte dei casi sia un linguaggio front-end, è anche considerato back-end, motivo per il quale ho scelto di inserirlo in questo articolo. Per dare più valore a tutto ciò subentra l'AJAX (Asynchronous JavaScript and XML), ovvero una tecnica di sviluppo software per la realizzazione di applicazioni web interattive, che consente l'aggiornamento dinamico di una pagina web senza esplicito ricaricamento da parte dell'utente. Tutto questo comunicando in background col server.
Prima di iniziare ad illustrare le nozioni base del Javascript ci tengo a sottolineare il jQuery, una libreria JavaScript per applicazioni web. Nasce con l'obiettivo di semplificare la selezione, la manipolazione, la gestione degli eventi e l'animazione di elementi DOM in pagine HTML, nonché semplificare l'uso di funzionalità AJAX, la gestione degli eventi e la manipolazione dei CSS. Per maggiori approfondimenti visitare il sito ufficiale cliccando QUI.

Cominciamo!

Per cominciare a scrivere del Javascript occorre utilizzare un tag apposito: <script> o per essere più specifici <script type="text/javascript">.

Esempio:

Detto questo, siamo pronti ad impartire i comandi più diffusi e conosciuti, specificando che molti li abbiamo già visti nel linguaggio PHP, quindi la spiegazione non cambia ma la sintassi in alcuni casi è differente.

Alert: il famoso messaggio di avviso che compare nel browser viene riprodotto scrivendo: alert('Ciao mondo!');
Document.write: per "scrivere" direttamente nella pagina HTML: document.write('Ciao mondo!');
Variabili: se nel PHP le variabili venivano inizializzate con il $, con javascript bisogna scrivere var. Un esempio è:

var name="Ciao";
alert(name);
L'output sarà ovviamente "Ciao", sotto forma di alert.
Oggetti: ogni cosa in Javascript è un oggetto. Questi sono entità dotate di unicità (sono uguali solo a sé stessi) e che associano nomi di proprietà a valori, in particolare: Array, Boolean (booleani), Date (oggetti contenenti una data e un'ora), Function (funzioni), Math (oggetto contenente funzioni di uso nel calcolo matematico), Number (numeri), Object (oggetti), RegExp (espressioni regolari) e String (stringhe). Tramite la definizione dei costruttori (hanno lo scopo di inizializzare le variabili) si possono definire gli oggetti.

Esempio di creazione di un oggetto:

// costruttore
function MyObject(attributeA, attributeB) {
this.attributeA = attributeA
this.attributeB = attributeB }
// crea un Oggetto
obj = new MyObject('red', 1000)
// accede ad un attributo di obj
alert(obj.attributeA)
// accede ad un attributo con la notazione del vettore associativo
alert(obj["attributeA"])
Array: sappiamo già cos'è, ma meglio specificarlo nuovamente: è una mappa associativa contenente delle coppie di chiavi/valori da cui, volendo, si possono estrarre delle informazioni desiderate.
var myArray = new Array();
myArray[0] = "pizza";
myArray[1] = "cioccolato";
alert(myArray[0]);

L'output sarà un alert contenente la parola "pizza", poichè abbiamo selezionato la chiave 0, come si può vedere nell'ultima riga di codice.
If / Else, While, Do While, Switch, For, Switch, funzioni: la sintassi e la logica è la stessa del linguaggio PHP.

Gli eventi

Come già detto, Javascript è un linguaggio orientato agli eventi e quest'ultimi ricoprono una buona parte da analizzare attentamente. Senza troppi giri di parole iniziamo subito:

Esistono varie categorie di eventi:

Eventi attivabili dai tasti del mouse
Eventi attivabili dai movimenti del mouse
Eventi attivabili dal trascinamento del mouse (drag and drop)
Eventi attivabili dall'utente con la tastiera
Eventi attivabili dalle modifiche dell'utente
Eventi legati al "fuoco"
Eventi attivabili dal caricamento degli oggetti
Eventi attivabili dai movimenti delle finestre
Eventi legati a particolari bottoni
Altri e nuovi tipi di eventi

Vediamoli nel dettaglio:

Eventi attivabili dai tasti del mouse

onClick: attivato quando si clicca su un oggetto;
onDblClick: attivato con un doppio click;
onMouseDown: attivato quando si schiaccia il tasto sinistro del mouse;
onMouseUp: attivato quando si alza il tasto sinistro del mouse precedentemente schiacciato;
onContextMenu: attivato quando si clicca il tasto destro del mouse aprendo il ContextMenu.

Il doppio click è un evento che ingloba gli altri e, per la precisione, attiva in successione onmousedown, onmouseup, onclick.

Eventi attivabili dai movimenti del mouse

onMouseOver: attivato quando il mouse si muove su un oggetto;
onMouseOut: attivato quando il mouse si sposta da un oggetto;
onMouseMove: si muove il puntatore del mouse, ma poiché questo evento ricorre spesso (l'utilizzo del mouse è frequente), non è disponibile per default, ma solo abbinato con la cattura degli eventi, che si spiegherà in seguito.

Eventi attivabili dal trascinamento del mouse (drag and drop)

onDragDrop: evento attivato quando un utente trascina un oggetto sulla finestra del browser o quando rilascia un file sulla stessa;
onMove: attivato quando un oggetto muove una finestra o un frame;
onDragStart: evento attivato appena l'utente inizia a trascinare un oggetto;
onDrag: attivato quando il mouse trascina un oggetto o una selezione di testo nella finestra dello stesso browser o anche di un altro o anche sul Desktop;
onDragEnter: attivato appena l'utente trascina un oggetto su un obiettivo valido dello stesso o di un altro browser;
onDragOver: attivato quando l'utente trascina un oggetto su un obiettivo valido ad ospitarlo, ed è simile all'evento precedente, ma viene attivato dopo quello;
onDragLeave: attivato quando l'utente trascina un oggetto su un obiettivo adatto per ospitarlo, ma non vi viene rilasciato;
onDragEnd: attivato quando l'utente rilascia l'oggetto al termine del trascinamento.
onDrop: attivato quando il tasto del mouse si alza in seguito ad un'operazione di trascinamento;

Eventi attivabili dall'utente con la tastiera

onKeyPress: evento attivato quando un utente preme e rilascia un tasto o anche quando lo tiene premuto;
onKeyDown: attivato quando viene premuto il tasto;
onKeyUp: evento attivato quando un tasto, che era stato premuto, viene rilasciato;
onHelp: attivato quando un utente preme il tasto F1;

Eventi attivabili dalle modifiche dell'utente

onChange Attivato quando il contenuto di un campo di un form o modulo è modificato o non è più selezionato. Viene utilizzato anche con gli oggetti FileUpload, Select, Text, TextArea.
onCellChange Attivato quando si modifica un elemento in una base di dati, per questa sua caratteristica ha un uso non propriamente legato a JavaScript;
onPropertyChange Evento attivato quando cambia la proprietà di un elemento;
onReadyStateChange Evento attivato quando lo stato del caricamento di un elemento cambia, l'evento è utile, ad esempio, per verificare che un elemento sia stato caricato.

Eventi legati al "fuoco" (focus)

onFocus Questo handler è l'opposto di onBlur per cui si attiva quando l'utente entra in un campo;
onBlur Viene attivato quando il puntatore del mouse o il cursore esce dalla finestra corrente utilizzando il mouse o il carattere TAB. Applicato ai moduli, invece, tale handler si avvia se si esce dal campo il cui tag contiene il controllo;
onSelect Attivabile quando si seleziona del testo all'interno di una casella di testo sia col mouse sia tenendo premuto SHIFT e selezionando con i tasti Freccia;
onSelectStart Si attiva quando si inizia a selezionare un evento;
onbeforeEditFocus Si attiva con un doppio click o con un click su un oggetto che ha già la selezione, quando questo è in DesignMode;
onLoseCapture Si attiva quando un oggetto perde la cattura del mouse.

Eventi attivabili dal caricamento degli oggetti

onLoad Questo handler funziona nel caricamento di oggetti, per lo più finestre e immagini;
onUnload È l'opposto del precedente e funziona quando si lascia una finestra per caricarne un'altra o anche per ricaricare la stessa (col tasto refresh);
onAbort L'Handler dell'evento onAbort permette di specificare del codice nel caso in cui l'utente blocchi il caricamento di un oggetto, o che si blocchi il caricamento di un'immagine.
onError Si attiva quando il caricamento di un oggetto causa un errore, ma solo se questo è dovuto ad un errore di sintassi del codice e non del browser così funziona su un link errato di un'immagine della pagina, ma non su un link errato di caricamento di una pagina intera. Opera non gestisce questo evento, ormai obsoleto: per una corretta gestione degli errori si utilizza il costrutto try ... catch;
onBeforeUnload Questo handler funziona allo stesso modo di onUnload ma si carica in un momento prima;
onStop Questo handler funziona quando si ferma il caricamento della pagina con il tasto stop del browser e dovrebbe funzionare anche allo stesso modo di onUnload caricandosi prima di questo ma dopo onBeforeUnload.

Eventi attivabili dai movimenti delle finestre

onResize: Questo handler si attiva quando l'utente rimpicciolisce o ingrandisce una finestra o un frame o, in caso particolare per Explorer, un oggetto a cui siano stati fissati l'altezza e la larghezza o anche la posizione, come ad esempio un layer;
onScroll: attivato quando si effettua lo scrolling della pagina sia col mouse con i tasti PGUP e PGDOWN o anche con il metodo doScroll.

Eventi legati a particolari bottoni

onSubmit: Questo handler è attivato dal click su tasto di Invio di un form;
onReset: questo handler è attivato dal click su tasto di Annulla di un form.

Abbiamo terminato! Quello che abbiamo fatto è ricoprire le nozioni base dei linguaggi back-end PHP e Javascript (ribadisco che quest'ultimo non è puro back-end ma una versione ibrida) e ora sta a voi decidere se approfondire di più l'argomento!

A presto, GG-CREATOR.

La parte che illustra in lungo e in largo gli eventi Javascript è opera di Wikipedia.

« Articolo successivo:
Bootstrap 5.0 » Articolo precedente:
Programmazione front-end

Nozioni base sulla programmazione back-end