Programmazione Web » jquery codeigniter ajax http://www.programmazione-web.com il Blog open degli sviluppatori del web! Tue, 10 Nov 2009 21:04:43 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Tutorial Codeigniter per l’integrazione di ajax con jquery http://www.programmazione-web.com/tutorial-codeigniter-integrazione-ajax-jquery.php http://www.programmazione-web.com/tutorial-codeigniter-integrazione-ajax-jquery.php#comments Sat, 07 Jun 2008 14:07:36 +0000 neryo http://www.programmazione-web.com/?p=56 Tutorial Codeigniter per l’integrazione di ajax con jquery

Negli ultimi due anni passati, AJAX è diventato velocemente uno strumento ormai necessario per ogni web developer. In effetti grazie all’utilizzo di AJAX è possibile velocizzare le applicazioni, diminuendo il consumo di banda e i tempi di caricamento delle pagine, donando inoltre una maggiore usabilità.

In questo tutorial per il framework Codeigniter, tradotto parzialmente dall’articolo di Michael Wales, verrà mostrato come implementare in Codeigniter un caricamento dinamico di record da un database, utilizzando chiamate AJAX con l’usilio di Jquery.

La nostra applicazione sarà composta da una lista di post di un blog, che sono suddivisi in due tipologie: la lista dei pubblicati o la lista delle bozze. Inizialmente la nostra applicazione funzionerà senza l’utilizzo di chiamate AJAX; poi successivamente inseriremo questa funzionalità utilizzando un semplice script jQuery, garantendo comunque la fruibilità del sito anche se l’utente non ha abilitato il supporto javascript (perdendo solamente le chiamate asincrone AJAX ma non i contenuti da visualizzare).

Creazione dell’applicazione

Nella nostra installazione del framework Codeigniter, creiamo una nuova classe controller che in questo tutorial chiameremo Post.

  1. // File: ./controllers/post.php
  2. class Post extends Controller {
  3.  
  4. function Post() {
  5.   parent::Controller();
  6. }
  7.  
  8. function index($status = NULL) {
  9.  
  10.  $this->load->model(‘posts’);
  11.  
  12.  if ($status === NULL) {
  13.   $template[‘posts’] = $this->posts->get_where(array(‘id >’=>0));
  14.  } else {
  15.    $template[‘posts’] = $this->posts->get_where(array(’status’=>$status));
  16.  }
  17.  
  18.   $template[‘partial’] = ‘post/list’;
  19.   $this->load->view(‘view’, $template);
  20. }
  21. }
Qui viene delineata la struttura di base della nostra applicazione. Il nostro metodo index() accetta un parametro facoltativo (status), che se non è definito tornera’ tutti i posti all’interno del nostro blog.
Il controller attraverso il modello, effettua una query ritornando la lista dei post del blog sulla base di determinati parametri, settando una variabile chiamata partial, che verra’ utilizzata anche in seguito per la visualizzazione dei risultati parziali.
Ma passiamo subito al modello per comprendere completamente il funzionamento del controller visto precendentemente.
  1. // File: ./models/posts.php
  2. class Posts extends Model {
  3.  
  4. var $_table = ‘posts’;
  5.  
  6. function Posts() {
  7.   parent::Model();
  8. }
  9.  
  10. function get_where($params = array()) {
  11.  
  12.  if (count($params) > 0) {
  13.   $query = $this->db->get_where($this->_table, $params);
  14.  
  15.   if ($query->num_rows() > 0) {
  16.     return $query->result_array();
  17.   }
  18.  }
  19.  
  20.  return FALSE;
  21. }
  22. }
Nel metodo get_where () si nota come l’autore voleva assicurarsi che la funzione ricevesse un parametro, altrimenti restituisce inesorabilemnte un FALSE al controller al posto dell’array contenente i dati.

Giunti a questo punto si puo’ dire che la nostra applicazione e’ praticamente fatta e ora possiamo iniziare a giocare con AJAX! Inanzittutto vediamo di creare il file della vista principale, che verrà caricata insieme all header e al footer dal nostro controller.

  1. // File: ./views/view.php
  2. < ?php $this->load->view(‘_global/header’); ?>
  3. < ?php $this->load->view($partial); ?>
  4. < ?php $this->load->view(‘_global/footer’); ?>

Questa vista come vediamo include i file header e footer che sono all’interno della directory _global, creata dall’autore con l’underscore davanti al nome per forzarla a rimanere per comodita’ sempre in alto della lista dei file e direcory.

  1. // File: ./views/_global/header.php
  2.  
  3. <script src="<?php echo base_url(); ?><!–
  4. assets/js/jquery-1.2.6.min.js" type="text/javascript"><!–mce:0–></script>
  5. <script src="<?php echo base_url(); ?><!–
  6. assets/js/ajax_tut.js" type="text/javascript"><!–mce:1–></script>
  7. <div id="wrapper">
  8. <div id="header">
  9. <h1>CodeIgniter Ajax Tutorial</h1>
  10. <div id="nav">
  11. <ul>
  12.         <li>< ?php echo anchor(”, ‘All Posts’); ?></li>
  13.         <li>< ?php echo anchor(‘published’, ‘Published’); ?></li>
  14.         <li>< ?php echo anchor(‘draft’, ‘Drafts’); ?></li>
  15. </ul>
  16. </div>
  17. </div>
  18. </div>

In questo file header avrete notato l’utilizzo della funzione base_url () al fine di garantire ai file statici inclusi di avere un riferiemento assoluto che funziona sempre. Non fate caso agli utlimi 3 tags di chiusura sbagliati nel header. perche’ non sono riuscito a toglierli qui nel blog, perche’ il mio syntax highlighter me li continua ad aggiungere :( infatti andrebbero nel footer ovvero i tag di chiusura del div wapper del body e del tag html.

Ecco la vista che implementa le viste dei post del blog, parziali e non:

  1. // File: ./views/post/list.php
  2. <div id="loading">Loading…</div>
  3. <div id="list">
  4. < ?php
  5. foreach ($posts as $post) {
  6. echo ‘
  7. <h3>’ . $post[‘title’] . ‘<span class="created_on">Posted on: ‘ . $post[‘created_on’] . ‘</span>’;
  8. }
  9. ?></h3>
  10. </div>

Nella vista (post/list.php) non credo ci sia niente da chiarire, tutto quello che fa è effettuare un ciclo sull’array posts ritornato dal modello tramite il controller e stampare il titolo e la data di creazione di ogni post.

La nostra applicazione è praticamente completa! Ora è giunto il momente di fare gli ultimi passi e accertarsi che funzioni. Per prima cosa andremo a creare il database con la tabella e i dati per il test utilizzando il file sql di dump:

  1. CREATE TABLE IF NOT EXISTS `posts` (
  2. `id` int(10) UNSIGNED NOT NULL AUTO_INCREMENT,
  3. `title` varchar(255) NOT NULL,
  4. `status` varchar(10) NOT NULL,
  5. `created_on` date NOT NULL,
  6. PRIMARY KEY  (`id`)
  7. ) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=4 ;
  8.  
  9. INSERT INTO `posts` (`id`, `title`, `status`, `created_on`) VALUES
  10. (1, ‘First post.’, ‘published’, ‘2008-05-27′),
  11. (2, ‘This is the second post.’, ‘published’, ‘2008-05-27′),
  12. (3, ‘This is a draft.’, ‘draft’, ‘2008-05-28′);

Ora dobbiamo effettuare alcuni cambiamenti alle configurazioni, ricordando che i settaggi potrebbero essere leggermente diversi dalla vostra situazione, ma sicuramente e’ un buon punto di partenza.

Per prima cosa accertevi che sia configurato in modo appropiato il base url

  1. // File: ./config/config.php
  2. $config[‘base_url’]    = "http://localhost/ajax_tut/";

Ora, assicuratevi che potete connettervi al vostro database

  1. // File: ./config/database.php
  2. $db[‘default’][‘hostname’] = "localhost";
  3. $db[‘default’][‘username’] = "root";
  4. $db[‘default’][‘password’] = "";
  5. $db[‘default’][‘database’] = "ajax_tut";
  6. $db[‘default’][‘dbdriver’] = "mysql";

Dobbiamo caricare automaticamente le librerie e gli helper necessari per renderci lo sviluppo piu semplice e veloce.

  1. // File: ./config/autoload.php
  2. $autoload[‘libraries’] = array(‘database’);

Infine, dobbiamo riderezionare la route di codeigniter sul nostro controller di post che chiamera’ in automatico il metodo index() contenuto in esso.

  1. // File: ./config/routes.php
  2. $route[‘([a-zA-Z]+)’] = ‘post/index/$1′;
  3. $route[‘default_controller’] = ‘post’;

Qui sotto possiamo vedere il css agganciato alla nostra applicazione:

  1. // File: ./assets/css/style.css
  2. body {
  3. font:0.8em Verdana;
  4. text-align:center;
  5. }
  6.  
  7. a:link, a:active, a:hover, a:visited {
  8. color:blue;
  9. text-decoration:none;
  10. }
  11.  
  12. #wrapper {
  13. margin:0 auto;
  14. text-align:left;
  15. width:600px;
  16. }
  17.  
  18. #nav {
  19. background:#DDD;
  20. }
  21.  
  22. #nav a {
  23. padding:10px;
  24. }
  25.  
  26. #nav a:hover {
  27. background:#FFF;
  28. }
  29.  
  30. #nav ul {
  31. padding:5px;
  32. list-style:none;
  33. }
  34.  
  35. #nav li {
  36. display:inline;
  37. margin-right:1.5em;
  38. }
  39.  
  40. #loading {
  41. display:none;
  42. font-weight:bold;
  43. text-align:center;
  44. }
  45.  
  46. #list h3 {
  47. display:inline;
  48. }
  49.  
  50. .created_on {
  51. color:#AAA;
  52. font-size:0.7em;
  53. }
Ma e’ AJAX?
Ci sono diversi modi per implementare AJAX in un sito web, soprattutto in un sito realizzato con Codeigniter. Noi potremmo tornare XML o JSON e fare poi il parsing all’interno del nostro controller, o semplicemente inviare tutto direttamente alle nostre viste e gestire solo la formattazione (se non è richiesto il parsing). Probabilmente il modo più semplice, all’interno di CodeIgniter, è semplicemente caricare un file di vista proprio come con un normale richiesta! Sappiamo tutti pero’ che per caricare una vista abbiamo bisogno sempre di un metodo controller che ne implementa la logica, gestendo le eventuali chiamate verso il modello, e inviando i dati per la visualizzazione. Alcuni preferiscono creare una nuova classe, in particolare per le richieste AJAX, altri creano nuovi metodi all’interno della stessa classe che verranno utilizzate solo da AJAX.

L’autore, invece preferisce tenere la classe asciutta e utilizzare lo stesso controller effettuando solamente alcune modifiche richiamando librerie esterne, dal momento che il nostro metodo attuale richiede solamente una vista (che comprende header footer e partial).

Per fare questo crea quindi prima una classe libreria, contenente un metodo che ci consenta di sapere se si tratta di una richiesta AJAX o meno e poi utilizzare questa libreria come una condizione per determinare che cosa fare in base al tipo di richiesta.

  1. // File: ./libraries/request.php
  2. class Request {
  3.  function is_ajax() {
  4.     return (isset($_SERVER[‘HTTP_X_REQUESTED_WITH’]) &amp;&amp; ($_SERVER[‘HTTP_X_REQUESTED_WITH’] == ‘XMLHttpRequest’));
  5.   }
  6. }

In questa classe tramite il metodo is_ajax(), semplicemente viene effettuato un controllo sulla variabile HTTP_X_REQUESTED_WITH che è un header jQuery settato quando noi effettuamo una richiesta di tipo AJAX.

Ora nel controller dobbiamo richiamare questa libreria per effettuare il controllo e inviare solamente i dati parziali alla vista.

  1. // File: ./controllers/post.php
  2. function index($status = NULL) {
  3.  $this->load->model(‘posts’);
  4.  $this->load->library(‘request’);
  5.  
  6.  if ($status === NULL) {
  7.   $template[‘posts’] = $this->posts->get_where(array(‘id >’=>0));
  8.  } else {
  9.    $template[‘posts’] = $this->posts->get_where(array(’status’=>$status));
  10.  }
  11.  $template[‘partial’] = ‘post/list’;
  12.  
  13.  if ($this->request->is_ajax()) {
  14.   $this->load->view($template[‘partial’], $template);
  15.  } else {
  16.   $this->load->view(‘view’, $template);
  17.  }

Ora vediamo come vengono implementate in semplice stile jQuery le chiamate ajax, assicuriamoci pero’ di aver scaricato la liberia jQuery, che sia nella cartella dell’applicazione in /assets/js/ e venga agganciata correttamente all’header.php in _global.

  1. //File: ./assets/js/ajax_tut.js
  2. $(document).ready(function() {
  3.  $(‘#nav a’).click(function(event) {
  4.   event.preventDefault();
  5.   $(‘#list’).load(this.href);
  6.  });
  7.  
  8. $(‘#loading’).ajaxStart(function() {
  9.  $(this).show();
  10. }).ajaxStop(function() {
  11.  $(this).hide();
  12. });
  13.  
  14. $(‘#list’).ajaxStart(function() {
  15.  $(this).hide();
  16. }).ajaxStop(function() {
  17.  $(this).show();
  18. });
  19. });

Javascript e jQuery sono al di fuori dello scopo di questo tutorial, quindi se avete problemi a capire quanto sopra riportato vi consiglio di fare riferimento alla documentazione ufficiale sul sito di jQuery. Spero che questo tutorial vi abbia chiarito le idee su come includere AJAX, in particolare jQuery nelle vostre applicazioni con Codeigniter, ringrazio Michael Wales per il suo tutorial che mi ha permesso di realizzare questa traduzione sul mio blog.

Se avete commenti, postate pure.. Vi ricordo che il codice del solo applicativo senza il framework codeigniter e’ scaricabile qui sotto.

Riferimenti

http://michaelwales.com/tutorials/codeigniter-ajax-with-jquery/
http://www.michaelwales.com/wp-content/tutorials/codeigniter-ajax-with-jquery/codeigniter-ajax-with-jquery.zip
http://www.codeigniter.com
http://jquery.com

]]> http://www.programmazione-web.com/tutorial-codeigniter-integrazione-ajax-jquery.php/feed 0