Crea sito

php-easyMVC e ajax

Ciao a tutti, è passato un po’ di tempo dall’ultimo post sul blog, in questo periodo ho sperimentato diverse nuove tecnologie di cui vi parlerò sicuramente nei prossimi articoli.

Ora però volevo scrivere questa breve guida in quanto molti di voi mi hanno contattato in questi mesi chiedendomi informazioni su come integrare il Framework php-easyMVC che ho presentato nel tutorial in sette parti che trovate a questo indirizzo, con javascript, jquery e in special modo su come utilizzare per effettuare chiamate AJAX: tecnica fondamentale e uno standard de facto nel recupero dei dati necessari all’interazione con le più moderne applicazioni web.

Iniziamo col dire che una vista, all’interno del framework, è una semplice pagina html, e come qualsiasi pagina html accetta il tag script, per tanto è possibile eseguire codice javascript all’interno di qualsiasi vista della nostra applicazione nativamente.

è ovviamente anche possibile includere file javascript di terze parti, come fareste in una semplice pagina html all’esterno del framework, per tanto includere framework esterni come jquery, mootools, prototype o qualsiasi altro è immediato, facciamo un esempio.

  • Per prima cosa procuriamoci una versione pulita del framework, la trovate qua: github.
  • Estraiamo tutto in una cartella del nostro webserver che possiamo chiamare come preferiamo ad esempio “jsTest”
  • Ora procuriamoci l’ultima versione disponibile di jquery (ad oggi è la 1.11.0) potete scaricarla da qua.
  • Creiamo una nuova cartella nella root della nostra webapp in cui conserveremo tutti i file javascript del sito, chiamiamola ad esempio “js” e copiamoci dentro il file che abbiamo scaricato dal sito di jquery
  • Apriamo semplicemente la vista dell’index (file: views/index.php) e sostituiamo l’intero contenuto del file col codice seguente:
<!-- This is the default home page -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="styles/main.css" type="text/css" />
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<title>jsTest</title>
</head>
<body>
<input id="operation" type="text"></input>&nbsp;<button onclick="calculateOp();"> Calculate</button>
<br/>
<p>Result: <span id="result"></span></p>
</body>

<script type="text/javascript">
function calculateOp(){
var input = $('#operation').val().split(" ");
var op1 = parseInt(input[0]);
var op2 = parseInt(input[2]);
var operator = input[1];
switch(operator){
case '+':
$('#result').html(op1 + op2);
break;
case '-':
$('#result').html(op1 - op2);
break;
case '*':
$('#result').html(op1 * op2);
break;
case '/':
$('#result').html(op1 / op2);
break;
}
}

</script>
</html>

Il concetto è semplicissimo, includiamo normalmente il file di jquery e attraverso un semplice form leggiamo una stringa inserita dall’utente, un operazione da svolgere dove ogni elemento è separato da uno spazio: qualcosa del tipo “54 + 2” e alla pressione del pulsante Calculate chiamiamo una funzione javascript, che quindi gira lato client, che si occupa di parsare la stringa in input separando operandi da operatore, svolgere l’operazione e stampare il risultato, niente di trascendentale!

Ecco un esempio di esecuzione:

php-easyMVC eseguire codice javascript

 

Come vedete non ci sono problemi ad eseguire codice javascript all’interno di una vista del framework, le cose però cambiano nel momento in cui vogliamo effettuare una chiamata asincrona al server via javascript per ottenere dinamicamente contenuti dal server, ovvero una chiamata ajax.

Supponiamo di voler demandare il calcolo delle “difficilissime” operazioni che possono essere inserite nel nostro form al potente server che ospita la nostra applicazione web 🙂

Ovviamente noi vorremmo sfruttare il php-easyMVC framework per separare ciò che è il modello, ovvero il nostro cervellone in grado di risolvere addizioni, dalla vista che stampa il risultato all’utente, per cui iniziamo dal modello!

Andiamo nella cartella models della nostra applicazione e creiamo un nuovo file, chiamiamolo calculator_brain.class.php mantenendo per coerenza la sintassi del framework.

All’interno scriviamo il codice necessario a svolgere le operazioni:

<?php

class calculator_brain{

public function solveOperation($op1, $op2, $operand){

switch($operand){
case "+":
return $op1 + $op2;
case "-":
return $op1 - $op2;
case "*":
return $op1 * $op2;
case "/":
return $op1 / $op2;
}

}
}

?>

Bene, a questo punto la tentazione sarebbe quella di effettuare una chiamata in POST al server indirizzandola verso un nostro controller che si occuperà di recuperare il risultato e restituirlo al chiamante, il problema è che così facendo il chiamante non riceverà come risposta unicamente il valore da stampare, ma un’enorme stringa contenente tutto il codice eseguito fino ad arrivare al punto in cui abbiamo eseguito l’istruzione di echo, questo seguendo la logica del framework vorrebbe dire tutto il codice dell’index nella root, più tutto il codice del controller e parte del codice della vista corrente, questo perché ajax funziona in maniera semplice tu richiedi una pagina, ad esempio index.php?rt=… e lui restituisce index.php a è stato passato in $_GET il valore  rt=…

Non è quello che serve a noi, a noi serve solo il risultato dell’operazione, dobbiamo quindi in questo caso bypassare il router del framework, e fare una chiamata ad un file, che chiameremo callback il cui unico scopo sarà stampare solo i dati che ci servono.

Andiamo nella root della nostra applicazione e creiamo una cartella che chiamiamo callbacks, al suo interno creiamo un file solver.php che farà quanto stabilito prima, ecco il codice:

<?php

include('../models/calculator_brain.class.php');

$cb = new calculator_brain();
echo $cb->solveOperation($_POST['op1'], $_POST['op2'], $_POST['operator']);

?>

Come potete vedere, noi stiamo bypassando il framework, per cui non possiamo fare affidamento al sistema di autocaricamento dei modelli, per tanto qualsiasi modello vogliamo riutilizzare all’interno della nostra callback andrà incluso manualmente, è quello che facciamo con la prima istruzione che leggete:

da notare come il percorso di inclusione sia relativo alla posizione attuale della nostra callback, essa si trova nella cartella “callbacks”, dobbiamo quindi tornare alla root con “..” e poi nella cartella models/ …

In modo del tutto analogo, se nella nostra callback dovessimo utilizzare le classi del framework per operare su un database, ad esempio mysql, dovremmo includere le classi “../models/db.class.php” e “../models/mysql_db.class.php” e poi andrà istanziato il modello con un istruzione tipo:

$db = new mysql_db($host, $user, $pass, $database, $port, $socket);

ovviamente i file di configurazione del database, potranno essere recuperati includendo il file config.php che si trova nella root di ogni applicazione che utilizza php-easyMVC

Ma andiamo avanti, ci manca la parte interessante: dobbiamo modificare lo script javascript nella nostra vista in modo da non risolvere da solo l’operazione, ma da fare una chiamata al server per ottenere la risposta.

Modifichiamo la funzione calculateOp come segue:

function calculateOp(){
var input = $('#operation').val().split(" ");
var op1 = parseInt(input[0]);
var op2 = parseInt(input[2]);
var operator = input[1];
$.post("callbacks/solver.php", {op1: op1, op2: op2, operator:operator}).done(function(data){
$('#result').html(data);
});
}

Il risultato ovviamente sarà quello di prima, ma questa volta, come potete vedere dall’immagine sotto, il risultato dell’applicazione lo ha fornito il server e non il client!

Framework Callback

 

 

Spero di aver fatto un po’ di chiarezza sull’argomento,

come al solito per commenti, domande dubbi o suggerimenti, non esitate a commentare!

 

One Response to php-easyMVC e ajax

  1. Alessio agosto 4, 2017 at 10:58 am #

    Ciao Jacopo,
    sto utilizzando il tuo framework lo trovo molto interessante, mi chiedevo come fare a caricare dinamicamente un modulo attraverso una chiamata ajax.
    Praticamente volendo definire diverse sotto sezioni, ognuna delle quali gestite da un modulo (cartella modules), vorrei nel momento in cui si clicca su una delle sottosezioni caricare il relativo modulo.
    Per il momento non sono riuscito a farlo.
    Per intenderci il modulo lo carico in questo modo:

    execute(sezione1); ?>

    Grazie in anticipo.
    Ciao

Lascia un commento

Powered by WordPress. Designed by WooThemes