A causa delle limitazioni imposte da wordpress.com il blog è stato spostato su

WWW.MDT.NETSONS.ORG

Eravamo rimasti ai problemi di interazione tra il form di Ext JS e CakePHP.

Ecco la soluzione:

1. similmente a quanto fatto per la funzione add creiamo nel file posts_controller.php le due funzioni edit ed edi2:
   

   function edit($id = null) {
   //carico i dati del post
   $this->data = $this->Post->read();
   // uso set per passare i dati alla view
   $this->set(‘data’, $this->data);
   }

   function edit2($id = null)
   {
   Configure::write(‘debug’, ’0′); //turn debugging off; debugging breaks ajax
   $this->layout = ‘Ajax’; //set the layout to Ajax so the ajax doesn’t break

   if (empty($this->data))
   {
   $this->Post->id = $id;
   $this->data = $this->Post->read();
   $this->set(‘success’, ‘{success:true}’); //this is a json statement. EXT forms need this to know if things worked

   }
   else
   {
   if ($this->Post->save($this->data['Post']))
   {
   $this->set(‘success’, ‘{success:true}’); //this is a json statement. EXT forms need this to know if things worked

   }
   else {
   $this->set(‘success’, ‘{success:false}’); //EXT forms need this to know if something went wrong

   }
   }
   }

   Da notare l’uso nella funzione edit di read per caricare i dati del post in memoria e di set per passare questi dati alla view.

2. nella view edit.thtml andremo a scrivere il seguente codice:
   

   $myTextArea = addslashes($data['Post']['body']);
   $myTextArea = preg_replace(“/\n/”,”\\n”,$myTextArea);
   $myTextArea = preg_replace(“/\r/”,”\\r”,$myTextArea);
   ?>

   var titolo=”;
   var body=”;

   link(‘myFormEDIT’); ?>

   Quanto scritto non fa altro che fare l’escape del messaggio contenuto nel post (per evitare situazioni spiacevoli che causano errori di sintassi), salvarlo nella variabile myTextArea ed assegnare quest’ultima alla variabile body definita in javascript; tale variabile, insieme a quella titolo, verrà usata nel form di Ext JS. Infine carichiamo il file javascript myFormEDIT.js che si occuperà della renderizzazione del form in Ext JS.

3. il file myFormEdit.js differisce dal form usato per la funzione add solamente per due righe, collocate rispettivamente nell’item textfield e nell’item htmleditor (ovvero il campo di testo per il titolo e la textarea per il contenuto del post): con la riga value:titolo assegniamo al textfield il contenuto della variabile titolo definita al punto 2., similmente con la riga value:body assegniamo all’htmleditor il contenuto della variabile body.

Per chiarire quanto spiegato finora descriviamo brevemente il flusso dell’applicazione per la funzione edit:

• cliccando su Edit viene caricata la view edit.thtml che renderizza il form tramite il file myFormEDIT.js
• a questo punto facciamo le nostre modifiche al post e lo salviamo. Quando clicchiamo su Save viene chiamata la view edit2.thtml che restituisce

  {success:true}

• il file myFormEDIT.js pertanto mostra un messaggio di alert comunicando l’avvenuto salvataggio (“It worked!”) e rindirizza l’utente alla lista dei posts ricaricando la pagina.

Al momento sto lavorando affinchè i post editati non vengano non salvati in un nuovo post e sto cercando di capire perchè l’applicazione si comporti, nonostante il codice sia lo stesso, in modo differente se caricata in locale o in remoto.

Purtroppo devo dire che ho incontrato molte difficoltà e tuttora non sono riuscito a fare ciò che mi ero proposto. Le cose principali che mi hanno dato problemi sono state la:

1. visualizzazione del form creato con Ext JS in CakePHP: nonostante il form funzionasse correttamente se visualizzato in una pagina a sè, importandolo in CakePHP vi erano numerosi errori di visualizzazione (pulsanti invisibili o non allineati e layout del form che non rispettava le specifiche inserite); dopo molte prove ho capito che il problema era causato da un conflitto tra il foglio di stile css di CakePHP e quello di Ext JS e sono riuscito a risolverlo
2. interazione tra il form di Ext JS e CakePHP: la creazione di un nuovo articolo funziona, mentre la modifica di un articolo già esistente ed il suo caricamento nel form cliccando su “Edit” no; inoltre l’eventuale formattazione del testo (grassetto, colore, ecc.) di un nuovo articolo non viene salvata da nessuna parte, pertanto visualizzandolo il testo appare non formattato.

Potete dare un’occhiata a quest’ultima versione che presenta le limitazioni appena esposte qui.

Per fare ciò ho seguito questo tutorial che spiega come aggiungere TinyMCE (uno dei più diffusi editor WYSIWYG) a CakePHP. I passi da seguire sono i seguenti:

1. scaricare TinyMCE da qui, estrarre il file compresso e copiare la cartella tinymce/jscripts/tiny_mce in /webroot/js
2. creare un nuovo layout default.thtml nella cartella /cake/app/views/layouts con questo codice di base:

<html>
<head>
<title><?php echo $title_for_layout?></title>
<?php
if(isset($javascript)):
echo $javascript->link(‘tiny_mce/tiny_mce.js’);
endif;
?>
</head>
<body>
<?php echo $content_for_layout ?>
</body>
</html>

3. aggiungere questo codice in ogni file di tipo view in cui vogliamo mostrare l’editor:

<script type=”text/javascript”>
tinyMCE.init({
theme : “simple”,
mode : “textareas”,
convert_urls : false
});
</script>

Alcuni consigli personali:

• il codice del punto 3. potete inserirlo direttamente nel file default.thtml, se pensate di usare l’editor in tutte le views che avete creato
• attenzione al codice
  

  <?php
  if(isset($javascript)):
  echo $javascript->link(‘tiny_mce/tiny_mce.js’);
  endif;
  ?>

  che deve stare prima del tag </head> della pagina html, altrimenti non funzionerà l’editor! Per questo motivo non potete inserire il codice visto al punto 2. direttamente nelle views, perché verrebbe caricato dentro il <body> (e quindi dopo il tag </head>) della pagina html.

• potete modificare il layout creato al punto 2. caricando i fogli di stile css ed usando i tag <div> nel <body> della pagina (ad esempio potremmo creare un div header per l’intestazione, un div content per il contenuto e un div footer per il piè di pagina), in modo da applicare uno stile ben definito al nostro documento.

Ci sono diversi servizi gratuiti di questo tipo, come altervista (che però limita il numero di queries), gigacities e netsons. Io ho scelto di usare quest’ultimo.

Una volta creata la nostra applicazione in locale con CakePHP basterà uploadare i nostri file tramite FTP sull’account precedentemente creato di netsons; a questo punto si dovrà configurare il file database.php situato nella cartella /cake/app/config nel seguente modo:

var $default = array(‘driver’ => ‘mysql’,
‘connect’ => ‘mysql_connect’,
‘host’ => ‘mysql5.netsons.org’,
‘login’ => ‘tuo_login_di_netsons‘,
‘password’ => ‘tua_password_di_netsons‘,
‘database’ => ‘nome_database‘,
‘prefix’ => ”);

Attenzione alla riga ‘host’ => ‘mysql5.netsons.org’ dove dovrete inserire mysql5.netsons.org se avete creato un database mysql5 oppure mysql4.netsons.org nel caso di un database mysql4.

Se tutto è andato a buon fine a questo punto la vostra applicazione dovrebbe essere pronta; qui potete vedere la mia.

Innanzitutto per installarlo è necessario disporre di un server con php e database, io ho usato Apache e MySql; i passi da seguire sono sostanzialmente i seguenti per chi usa Windows:

1. scaricare ed installare xampp (la versione lite va più che bene) che comprende Apache, PHP e MySql pronti per l’uso (ci sono altri programmi simili, ad esempio EasyPHP)
2. scaricare ed estrarre CakePHP nella cartella “htdocs” di xampp
3. creare un file di configurazione “database.php” nella cartella “app/config” di CakePHP inserendo i dati relativi al database (host, utente, password, nome del database)
4. far partire xampp ed andare all’indirizzo “http://localhost/cake” (“cake” è il nome della cartella dove è stato estratto CakePHP)

Se è andato tutto bene dovremmo vedere una pagina che ci mostra che CakePHP è stato installato e funziona correttamente.

Per maggiori dettagli rimando a questo articolo.

Per comprendere i principi di CakePHP è molto utile seguire questo tutorial che ci porterà in breve tempo alla creazione di un blog molto semplice.

Devo dire che sono rimasto piacevolmente sorpreso dalle possibilità che questo framework mette a disposizione, infatti semplifica di molto la creazione di applicazioni web; forse all’inizio può sembrare un po’ complicato, ma una volta capito il suo funzionamento applicazioni anche complesse diventeranno facili da sviluppare e gestire grazie al modello MVC.

Ora, più per “dovere” che per mia convinzione, inizia questa avventura in cui cercherò di raccontare (a chi?) il mio stage presso la Fondazione Bruno Kessler.

Non escludo che in un secondo momento, qualora dovessi prenderci particolarmente gusto o nel caso questo modesto blog diventasse abbastanza frequentato da darmi sufficienti gratificazioni, inizierò a pubblicare non solo resoconti del mio stage, ma anche notizie più personali o interessanti.

Buona lettura, ciao!