Costruire un’applicazione reale con Zend Framework ( parte 5 )

Di admin in Php, Zend Framework Controls: +-close

Ajax con Zend Framework

Premetto che il seguente è solo uno dei possibili metodi di usare ajax all’interno della vostra applicazione sviluppata con Zend Framework, ma sicuramente è il metodo che più mantiene il concetto di MVC. In questo articolo integreremo le richieste asincrone tramite l’uso di un framework javascript. Tra i vari framework javascript esistenti quello che personalmente preferisco è JQuery ed è quindi quello che utilizzerò in questo articolo. Purtroppo ad oggi non ho ancora scritto nessun articolo su questo fantastico framework, quindi se volete saperne di più o volete vedere subito qualche esempio non vi rimane che cercare su internet.

Giusto per completezza, esistono diversi altri framework javascript che gestiscono le richieste asincrone, tra cui Prototype, Script.aculo.us, YUI library di Yahoo! e diversi altri.

Recuperare JQuery

Potete scaricare l’ultima versione di JQuery dal sito ufficiale jquery.com/. Una volta scaricato il file questo dev’essere inserito nella cartella js presente nella web root del nostro progetto.

Layout.phtml

Il primo passo sarà l’aggiunta del framework javascript all’interno dell’applicazione. Per fare ciò aggiungeremo due righe di codice nel nostro file layout.phtml, che vi ricordo si trova all’interno di application\views\layouts

    <script type="text/javascript" src="<?php echo $this->baseUrl(); ?>/js/jquery.js" />
    <script type="text/javascript" src="<?php echo $this->baseUrl(); ?>/js/ajax.js" />

Header.phtml

Il prossimo file a subire modifiche sarà header.phtml. In questo file andremo ad aggiungere un breve form con un input di testo dove poter inserire il nome utente.

<h1>Paesidelmondo Header</h1>

<form action="#">
 <fieldset>
  <legend>Registratione</legend>
  <label for="name">Nome Utente:</label><input id="name" name="name" type="text" autocomplete="off" />
 </fieldset>
</form>
<div id="message"></div>

Ajax.js

Creiamo un file e chiamiamolo per comodità ajax.js. Questo conterrà il codice javascript che metterà in ascolto l’input di testo con l’evento keyup e che gestirà la richiesta asincrona, codice che ovviamente utilizza il framework JQuery che abbiamo aggiunto poco fa. Questo file è da salvare all’interno della cartella js. Il seguente è il codice.

  $(document).ready(function(){
    $("#name").bind('keyup',function(){
      var baseUrl = "http://localhost";
      var nome = $(this).val();
      var destUrl = baseUrl + "/asyncrequest/username/nome/" + nome;
      $.ajax({
        url: destUrl,
        type: 'GET',
        success:  function(responseText){
          $("#message").html(responseText);
        }
      });
    });
  });

Come potete notare voi stessi all’interno del codice è presente la stringa ‘/asyncrequest/username/nome/’, questo significa che nella nostra applicazione è presente un nuovo controller, asyncrequest che contiene una action chiamata username.

AsyncRequestController.php

Creiamo un nuovo file controller e chiamiamolo AsyncRequestController.php, che salveremo nella directory dei controllers, application\controllers. Il seguente sarà il suo contenuto

<?php
  class AsyncRequestController extends Zend_Controller_Action {

    public function usernameAction(){
      $utenti = array('zend', 'jquery', 'javascript');
      $username = $this->_request->getParam('nome');
      if ($username == ''){
        $return = '';
      }elseif (strlen($username) < 4){
        $return = '
Nome Utente troppo corto!';
      }elseif (in_array($username, $utenti)){
        $return = '
Utente già esistente

';
      }else{
        $return = '
Nome Utente Valido

';
      }
      $this->_response->appendBody($return);
      $this->_helper->layout->disableLayout();
    }

  }

Principalmente sono 2 i punti degni di nota in questo codice, $this->_response->appendBody($return); che inserisce nell’output il contenuto ritornato e $this->_helper->layout->disableLayout(); che disabilita il layout. Questo è indispensabile in quanto non vogliamo che ad ogni richiesta asincrona il sistema ci restituisca anche il layout.

Procediamo quindi con la creazione della view per la action che abbiamo appena creato, ovvero username.phtml.

username.phtml

Come abbiamo creato la directory index

all’interno della directory views\scripts per la gestione delle action dell’IndexController, procederemo a creare la directory asyncRequest nella stessa locazione, per la gestione delle views delle relative action.
La action username.phtml dovrà semplicemente visualizzare il contenuto di result, quindi il suo codice sarà semplicemente

<?php echo $this->result; ?>

main.css

Per concludere aggiungiamo una piccola porzione di codice nel nostro css per la gestione di due nuove classi che abbiamo appena inserito all’interno di ajax.js


	/**************************************************************************
	* Stili Generici
	**/

	.ok {
		color: green;
	}

    .error {
		color: red;
	}

Se avete eseguito correttamente ogni passaggio potrete amirare nel vostro header un form che vi restituirà un messaggio man mano che inserite dei caratteri all’interno dell’input di testo presente!

Termina così la quinta parte sullo sviluppo di una vera applicazione con zend framework, se qualcuno di voi ha domande può inviare un commento al termine di ogni articolo.