Alla possibile comparsa dell’errore “NO INPUT FILE SPECIFIED”, bisognerebbe innanzitutto testare il funzionamento del sito con tutte le opzioni SEO/SEF   disabilitate (nella sezione Configurazione>Sito  impostare tutti i parametri su NO).

Se la navigazione del sito non presenta problemi con le opzioni SEO/SEF disabilitate, allora seguire i passi seguenti:

1. Nella sezione Configurazione>Sito abilitare le prime due voci;
2. Attraverso un client FTP o dal pannello di controllo dell’ hoster, procurarsi il file htaccess.txt e modificarlo commentando la riga che riporta

    Options +FollowSymLinks

   aggiungendo un simbolo di cancelletto (#) all’inizio della riga, in questo modo

    # +FollowSymLinks

3. Se il sito si trova in una sottocartella dello spazio web, sostituire la riga

   # RewriteBase /

   con

   RewriteBase /nomecartella/

4. Rinominare il file htaccess.txt in .htaccess e riposizionarlo nella root del sito web.
5. Se ancora dovessero presentarsi problemi, controllare la versione php utilizzata dall’hoster ed eventuali versioni del php.ini personalizzate. Anche se non più consigliata, la versione php 5.2.x non dovrebbe dare problemi con Joomla.

PS. Il file .htaccess non può essere utilizzato su server Windows IIS oppure se il nostro hosting non supporta il mod_rewrite. In questi casi bisogna rinunciare alle impostazioni SEO/SEF impostando su NO tutte le voci presenti nella sezione Configurazione>Sito del pannello di amministrazione di Joomla.

Strumenti utili a creare un ambiente di test nella programmazione php sono senza dubbio PHPUnit e seleniumHQ.
PHPUnit presuppone la presenza del framework PEAR, perciò vediamo come installare il tutto.

Nelle versioni precedenti di EasyPhp era presente un file bat (C:\Program Files (x86)\EasyPHP-5.3.6.0\php\go-pear.bat) che permetteva di effettuare l’installazione di PEAR con facilità.

Nelle nuove versioni (EasyPHP 5.3.8 e 5.3.9) questo file non è incluso, perciò di seguito trovate i passi da effettuare per installare PEAR e PHPUnit con EasyPHP 5.3.9 e Win7.

Innanzitutto rinominare il file

      Programmi (x86)\EasyPHP-5.3.9\php\php539x120203095725\php.ini
      in 
      Programmi(x86)\EasyPHP-5.3.9\php\php539x120203095725\php.ini.old

in quanto questo file procura un sacco di errori con le estensioni.

Creare un nuovo file php.ini vuoto nella stessa cartella (la mia è Program Files (x86)\EasyPHP-5.3.9\php\php539x120203095725).

L’unica riga che deve contenere il nuovo php.ini è la seguente:

include_path = "C:\DEV\PEAR\\pear";    //Nota il doppio slash tra PEAR\\pear

Aggiungere 2 cartelle al Windows PATH. (Tasto destro su Computer>proprietà>Impostazioni di sistema avanzate>Variabili d’ambiente>path)

Mantenendo quelle già presenti, aggiungere alla fine le seguenti cartelle, separate da ;

• La cartella che contiene php.exe. (Sulla mia macchina è C:\Program Files (x86)\EasyPHP-5.3.9\php\php539x120306151656;)
• La cartella dove si vuole che PEAR venga installato. (Io ho usato C:\DEV\PEAR;)

Scaricare http://pear.php.net/go-pear.phar

Shift + tasto destro sulla cartella di download di go-pear.phar e poi > Apri finestra di comando qui

Nel prompt dei comandi :

php go-pear.phar

Premendo invio si installa il system-wide PEAR (default)

Scegliere 1 per cambiare la cartella d’installazione. Io ho scelto C:\DEV\PEAR.

Lasciare le altre opzioni invariate. Premere 2 volte invio quando richiesto.

Se durante l’installazione un warning vi avverte che l’include_path nell’attuale php.ini non contiene il percorso giusto, scegliere Y per effettuare la modifica automaticamente.

Verrà creato un file .reg nella cartella indicata, doppio click per eseguirlo. (C:\DEV\PEAR\PEAR_ENV.reg)

PEAR è installato. Digitando

pear help

nel prompt dei comandi dovrebbe apparire una lista di tutti i comandi disponibili.

Per installare PHPUnit digitare nel prompt:

1
2
3
4
5
6

    pear channel-discover pear.phpunit.de            # aggiunge il canale
    pear channel-discover pear.symfony-project.com   # aggiunge il canale
    pear channel-discover components.ez.no           # aggiunge il canale
    pear clear-cache                                 #cancella la cache dei web services
    pear upgrade --force PEAR                        # aggiorna all'ultima versione
    pear install --alldeps phpunit/PHPUnit           # installa phpunit

Se l’installazione di PHPUnit è andata a buon fine, digitando al prompt dei comandi

phpunit

dovrebbe comparire l’help di phpunit, con la lista di tutti le opzioni disponibili.

Per installare Selenium Server scaricare il file jar in una cartella facilmente raggiungibile (io l’ho salvato in C:\DEV).

Per eseguire il server bisogna che sia installato il JRE (Java Runtime Environment) e che la cartella bin (nel mio pc è C:\Programmi\Java\jre6\bin) sia nel path. Poi portarsi nella cartella dove si è salvato il file jar del server e digitare nel prompt

java -jar selenium-server-standalone-2.20.0.jar

Per integrare il server selenium direttamente in PHPUnit, bisogna innanzitutto aggiungere al php.ini la seguente riga:

extension="C:\PROGRA~1\EASYPH~1.9\php\php539x120203095725\ext\php_curl.dll"

Oppure

1
2
3
4
5
6
7
8
9
10

extension_dir = "C:\PROGRA~2\EASYPH~1.9\\php\php539x120203095725\ext\"
extension=php_bz2.dll
extension=php_curl.dll
extension=php_gd2.dll
extension=php_mbstring.dll
extension=php_mysql.dll
extension=php_mysqli.dll
extension=php_pdo_mysql.dll
extension=php_pdo_sqlite.dll
extension=php_sqlite3.dll

Poi digitare nel prompt

pear install phpunit/PHPUnit_Selenium

string mb_strtoupper ( string $str [, string $encoding] )

ritorna una stringa con tutti i caratteri convertiti in maiuscolo e codificati in $encoding .

ad esempio:

$str = “àèìòù”;
echo mb_strtoupper($str ,”UTF-8″); // ÀÈÌÒÙ

Un "problema" ricorrente è popolare una select in base alla scelta effettuata in un’altra select. Un esempio è quello delle regioni e città: si seleziona una regione dalla prima select e tramite ajax si popola la seconda select con le sole città della regione scelta. Ma ci sono migliaia di esempi e casi d’uso.

Guarda Demo

Vediamo come sia semplice realizzare tutto con l’aiuto di jQuery.

Come esempio base ci basta un file html che contiene le select ed un file php al quale viene inoltrata la richiesta asincrona e che ci restituisce i dati in base ai parametri passati.

Nella sezione head del file html:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"</script>
<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
	   $("select#primaselect").change(function(){
		 $.getJSON("select.php",{id: $(this).val()}, function(dati){
			var options = '';
			for (var i = 0; i < dati.length; i++) {
				options += '<option value="' + dati[i].valore + '">' + dati[i].etichetta + '</option>';
			}
			$("#secondaselect").html(options);
			$('#secondaselect option:first').attr('selected', 'selected');
		});
            });
      });
</script>

Nel body del file html:

1
2
3
4

<b>Scegli il tuo smartphone preferito:</b>
<select id="primaselect"><option value="">Scegli</option><option value="1">HTC</option><option value="2">SAMSUNG</option><option value="3">MOTOROLA</option>
</select>
<select id="secondaselect"></select>

Contenuto del file php:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<?php
 
  $dati = array();
 
  $id = $_GET['id'];
 
  if($id == 1){
     array_push($dati, array("valore"=>"cod_001","etichetta"=>"Desire HD"));
     array_push($dati, array("valore"=>"cod_002","etichetta"=>"Flyer"));
     array_push($dati, array("valore"=>"cod_003","etichetta"=>"Chacha"));
     array_push($dati, array("valore"=>"cod_004","etichetta"=>"HD2"));
  }
 
  if($id == 2){
     array_push($dati, array("valore"=>"cod_005","etichetta"=>"Galaxi S"));
     array_push($dati, array("valore"=>"cod_006","etichetta"=>"Wave II"));
     array_push($dati, array("valore"=>"cod_007","etichetta"=>"Omnia 7"));
     array_push($dati, array("valore"=>"cod_008","etichetta"=>"Omnia HD"));
 
  }
 
  if($id == 3){
     array_push($dati, array("valore"=>"cod_009","etichetta"=>"Atrix 4G"));
     array_push($dati, array("valore"=>"cod_010","etichetta"=>"Droid Bionic"));
     array_push($dati, array("valore"=>"cod_011","etichetta"=>"Cliq 2"));
     array_push($dati, array("valore"=>"cod_012","etichetta"=>"Bravo"));
 
  }
 
   echo json_encode($dati);
?>

In questo caso il file php recupera i dati da alcuni array costruiti ad hoc per l’esempio, ma nulla vieta (anzi si spera) che i dati siano recuperati da un db.

Per qualsiasi chiarimento, a disposizione.

Guarda demo

Le richieste asincrone effettuate con Ajax hanno spesso lo scopo di modificare parti della pagina html. Effettuando varie richieste consecutive, ci si può trovare innanzi ad una pagina completamente diversa da quella iniziale, ma con uno stesso url nella barra degli indirizzi!

Esempio: Il sito www.sitodiannunci.it, alla pagina annunci.php permette di navigare tra gli annunci di una categoria mediante due pulsanti avanti e indietro. Il contenuto della pagina annunci.php cambia, mostrando i dati relativi al nuovo annuncio caricati via Ajax.

Dopo varie pressioni dei pulsanti avanti e indietro, l’utente decide di salvare la pagina tra i preferiti perchè interessato all’annuncio. Cosa succede? Viene salvata la stringa www.sitodiannunci.it/annunci.php, ma da questa non si riesce a  risalire all’annuncio di interesse. E’ chiaro che servirebbe una variabile da aggiungere alla query string che identifichi univocamente un annuncio, tipo www.sitodiannunci.it/annunci.php?id=123.

Se si modifica l’url della pagina ad ogni annuncio con un linguaggio lato server tipo php, si ottiene il ricaricamento della pagina che non è un effetto voluto (altrimenti perchè stiamo usando Ajax?). Stesso risultato se modifichiamo la proprietà window.location.href  via javascript.  Allora come risolvere???

Ci viene in aiuto una proprietà poco conosciuta  dell’oggetto location javascript: window.location.hash.

La stringa contenuta in window.location.hash sarà aggiunta in coda all’url della pagina, preceduta dal simbolo cancelletto # , senza ricaricare la pagina, ad esempio  www.sitoannunci.it/annunci.php#123

Salvando nei preferiti  www.sitoannunci.it/annunci.php#123   la proprietà window.location.hash conterrà la stringa 123 che può servire a risalire all’annuncio di interesse.

Abbiamo visto come risalire al contenuto di un annuncio  impostando e poi leggendo la proprietà javascript window.location.hash .

E non è tutto. Si poteva mai parlare di javascript senza nominare jQuery??? Certo che no. Esiste infatti un plugin, jquery.history, che rende tutto semplicissimo.

jQuery history plugin aiuta a supportare i pulsanti avanti/indietro ed il bookmarks nelle applicazioni javascript. Permette di salvare lo stato nell’url hash e di ripristinarlo.

live demo    ( consultare il codice sorgente )

Ci sono 2 metodi per interagire con l’oggetto jQuery.history:

jQuery.history.init(callback [, options])

Inizializza il plugin e va richiamato una volta quando la pagina è completamente caricata.

jQuery.history.load(hash)

Carica una stringa in location.hash,crea una nuova entry nella storia della navigazione e invoca la funzione di callback se necessario.  A meno che  l’hash passato come parametro sia diverso da quello corrente, la funzione di callback non è invocata.

Documentazione completa (in inglese)

Guarda la demo live

Testato e funzionante anche su dispositivi mobili touch screen iphone e Android !

Il contenuto del div scroller può essere qualsiasi elemento html (anche solo una tabella, a differenza di altri plugin! )

Il plugin calcola automaticamente l’altezza del div scroller.

Si possono utilizzare più istanze di scroller nella stessa pagina cambiando semplicemente gli id del div wrapper, del div scroller e dei pulsanti.

Si può impostare di quanti pixel deve scorrere il contenuto e la velocità di scorrimento.

Facilissimo da usare:

• basta creare due div, uno dentro l’altro;
• il div esterno sarà il contenitore;
• il div interno sarà lo scroller;
• due pulsanti per scorrere su e giù;
• tutti gli elementi inseriti all’interno del div scroller scorreranno alla pressione dei pulsanti.

1
2
3
4
5

<div id="wrapper" style="width:350px;height:120px;">
	<div id="scroller">. . . </div>
</div>
<p><input id="su_btn" type="button" value="su" /> 
<input id="giu_btn" type="button" value="giù" /></p>

Includere i files jQuery e applicare il plugin al div contenitore:

7
8
9
10
11
12
13
14

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script type="text/javascript" src="jquery.verticalscrollplus-1.0.js"></script>
<script language="JavaScript" type="text/javascript">
  $(document).ready(function(){
      $("#wrapper").verticalScrollPlus({step:100});
      $("#wrapper2").verticalScrollPlus({speed: 1500, step: 50, upID: "#su_btn2", downID: "#giu_btn2", scrollerID:"#scroller2" });
  });
  </script>

Se reputi che il jQuery Vertical Scroller Plus Plugin ti sia stato utile, pensa ad una libera donazione come incentivo allo sviluppo futuro. Ti ringrazio anticipatamente.

Il plugin può essere scaricato da:

http://plugins.jquery.com/content/verticalscrollerplus-10

jquery.verticalscrollplus-1.0.js

Plugin options:

• speed : quanto è veloce l’animazione di scorrimento verticale;(default = 500)
• step: di quanti pixel scorre il contenuto ad ogni pressione di tasto su oppure giù;(default = 60)
• upID: id dell’elemento che fa partire l’animazione verso su;(default = #su_btn)
• downID: id dell’elemento che fa partire l’animazione verso giù;(default = #giu_btn)
• scrollerID: id dell’elemento il cui contenuto scorrerà verticalmente;(default = #scroller)

Mi riferisco alla  etichetta di loading che compare in alto nella pagina  ogni qualvolta eseguiamo un’azione tipo eliminare un messaggio (che evidentemente effettua richieste Ajax) all’interno ad esempio di GMail.

Con l’aiuto di JQuery diventa tutto semplicissimo. Vedi la demo live.

Di seguito la parte più importante del codice javascript:
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$(document).ready(function(){
 
         /* quando si preme il pulsante si carica il contenuto da un file di testo  */
         $('#loadingbtn').click(function(){
             $('#contenuto').load('file.txt');
         });
 
         /* quando parte la richiesta Ajax mostra il div di loading, quando la richiesta
            viene completata nasconde il div  */
         $('#loading').ajaxSend(function(){
           $(this).fadeIn('slow');
         }).ajaxComplete(function(){
           $(this).fadeOut('slow');});
 
 });

Di seguito il codice html della pagina:

1
2
3
4
5
6
7

<p>Clicca sul pulsante per caricare via Ajax del contenuto nel div sotto</p>
 
<input type="button" id="loadingbtn" name="loadingbtn" value="Carica contenuto" />
<br /><br />
<div id="contenuto" name="contenuto"></div>
 
<div id="loading" name="loading">Loading...</div>

Importante la regola css che imposta lo stato iniziale dell’avviso di loading su invisibile, in quanto è su questa che va ad agire javascript al verificarsi degli eventi ajaxSend e ajaxComplete.

1
2
3
4
5
6
7
8
9

#loading{
  position:fixed;
  top:0;
  left:0;
  background-color: green;
  color:white;
  width: 80px;
  display:none;
}

1. Il pallino del radiobox viene annerito ad indicare che è selezionato;
2. Viene lanciato un evento javascript di tipo onchange, che volendo può essere intercettato.

Supponiamo di avere un gruppo di radiobox che rappresentano colori:

<input name="colori" type="radio" value="red" /> Rosso 
<input name="colori" type="radio" value="green" /> Verde 
<input name="colori" type="radio" value="blue" /> Blu
 
<span id="risposta"></span>

Grazie alla potenza di jQuery è semplice intercettare l'evento onchange quando si seleziona un radiobox:

$("input[name=colori]:radio").change(function(){
    $("#risposta").html(this.value);
    $("#risposta").css("color",this.value);
});

Quando si seleziona un radiobox, il corrispondente colore viene scritto in un elemento span con id="risposta". Da notare anche come sia semplice modificare lo stile di un elemento.

Ma come si potrebbe simulare il click del mouse da jQuery?

 
var colore ="red";
 
if(colore != ""){
   $("input[value="+colore+"]:radio").attr('checked', true);
}

Attraverso il metodo attr(), risulta semplice modificare l'attributo checked del radiobox.

Sembrerebbe bastare, ma la modifica dell'attributo checked attraverso il metodo attr() ottiene come risultato la sola selezione del radiobox, senza lanciare alcun evento onchange.

Dando il valore “red” alla variabile colore, si ottiene la selezione del radiobox corrispondente, ma non viene scritto nulla nell'elemento con id=”risposta”. Questo perchè attraverso la sola modifica dell'attributo col metodo attr() non viene lanciato l'evento onchange.

Si può però lanciare l'evento onchange manualmente attraverso il codice

 
 $("input[value="+colore+"]:radio").change();

Il codice finale è

<input name="colori" type="radio" value="red" />Rosso
<input name="colori" type="radio" value="green" />Verde
<input name="colori" type="radio" value="blue" />Blu
 
<span id="risposta"></span>
 
<script type="text/javascript">
var colore ="red";
 
if(colore != ""){
    $("input[value="+colore+"]:radio").attr('checked', true);
}
 
$("input[name=colori]:radio").change(function(){
         $("#risposta").html(this.value);
         $("#risposta").css("color",this.value);
});
 
$("input[value="+colore+"]:radio").change();
</script>

Guarda il risultato