Supporto volontario e collaborativo per Joomla!® in italiano

Creare i tuoi QR code in un sito Joomla.

vales_qrcodeUn QR code (Quick Response) è un codice bidimensionale che permette di inserire informazioni dentro un'immagine. Il metodo è ormai molto diffuso e comodo, perchè i lettori di questi codici sono generalmente disponibili in telefonini e smartphone. Ciò consente di potere accedere rapidamente ad informazioni inserite su molteplici tipologie di supporto tramite il QR code. Basta puntare il telefonino sul QR code ed avremo le informazioni, il link per approfondimenti e quanto altro direttamente in modo immediato. Il loro utilizzo può avvenire quindi in infiniti contesti: giornali, riviste, depliants, cartelli turistici, oggetti e chi più ne ha ne metta.

In questo articolo esamineremo le procedure per produrre immagini QR code all'interno di un sito Joomla 1.5 o Joomla 1.6 ed averle così disponibili per riutilizzarle dove vorremo inserirle. Per ottenere il risultato voluto useremo il componente Chronoforms nella versione v4 RC 1.9 nelle due versioni per Joomla 1.5 e per Joomla 1.6. Le due versioni sono scaricabili nel sito ufficiiale di Chronoforms da questo link.


Dopo aver installato uno dei due componenti, con la normale procedura, accederemo ad esso dal pannello di controllo di Joomla e creeremo il nostro form con la procedura cliccando sull'apposito tasto Form Wizard come nella figura seguente.

form_wizard

Per prima cosa nella finestra a destra Drop clicchiamo sull'etichetta Form Setting.

vales_formname

Qui nel campo Form name assegneremo il nome al form inserendo QR_code. Nel campo successivo Published abiliteremo la voce Yes per pubblicare il form. Fatto questo clicchiamo sulla icona Salva e Chiudi della finestra Form Wizard per salvare il lavoro.

Sulla riga del form appena creato premiamo ora sul nome del form QR_code. Nella finestra che si aprirà, scorrendo in basso, nel campo Submit URL dovrà essere inserito il seguente link "index.php?option=com_chronoforms&chronoform=QR_code" (senza doppi apici ") per rimandare il form a se stesso dopo l'invio. Premiamo il bottone Salva e Chiudi in alto a destra per salvare il lavoro

vales_submit_url

Sulla riga del form premiamo Wizard Edit, nella finestra che si aprirà, vedremo due aree, Drag e Drop. Clicchiamo con il tasto sinistro del mouse sulla voce Textarea nell'area Drag e trasciniamo il campo nell'area Drop. Eseguiamo la stessa procedura con la voce Submit button. Come indicato in figura.

campi_form

Nell'area drop clicchiamo sull'icona di Edit (quella centrale con la chiave inglese stilizzata) del primo campo textarea inserito ed accediamo ad una finestra lightbox in cui possiamo configurare il campo.

vales_textarea1

In questa finestra inseriamo nel primo campo Field Name la parola testo, che sarà così anche il nome della nostra textarea nel form. Per gli altri campi prendiamo in considerazione solo i seguenti: Field Title in cui inseriamo "Testo QRcode", Label Text in cui inseriamo anche qui "Testo QRcode" e Instructions for users dove mettiamo "Inserire il testo da codificare", che darà il messaggio di aiuto a chi compilerà il form. Fatto questo possiamo cliccare sul bottone Apply, in lato a destra del lightbox, e quindi sul bottone X di chiusura. Conviene subito cliccare sul bottone Salva in alto a destra della finestra per salvare il lavoro fatto.

A questo punto abbiamo i campi necessari del nostro form. Dovremo ora aggiungere un po' di codice php per consentire la creazione del QR code.

La parte principale del codice sarà una Classe php che eseguirà per noi tutto il lavoro di codificazione del testo che inseriremo nel campo textarea di nome testo del form che abbiamo appena creato.

La classe è disponibile online in vari siti. Quello che ho preso a riferimento è questo, http://www.simplesoft.it/php/script-php-per-generare-qr-codes.html, perchè mi sembra da delle spiegazioni sul funzionamento ed possibilità di approfondimenti con altri link.

Adesso abbiamo tutti i nostri attrezzi pronti, dovremo solo inserirli nel form. Per questo nella finestra di sinistra Drag del form clicchiamo sull'etichetta Actions. Si aprono due nuove finestre, a sinistra Actions ed a destra Events. Dalla prima trasciniamo in quella di destra i campi Show html e Custom code. Il primo servirà ad aprire il form quando sarà chiamato nel frontend di joomla, il secondo per ospitare la nostra classe di codificazione del QRcode e un po' di nostro codice per completare l'opera.

vales_qrcode_events

Premiamo il bottone Salva per salvare il lavoro e riclicchiamo su Events per riaprire le finestre. Clicchiamo sulla seconda icona centrale del campo Custom Code per configurare. Si apre la seguente finestra lightbox.

vales_qrcode_customcode

Nel campo Mode lasciamo la voce di default Controller. In Action Label inseriamo Generatore QRcode come etichetta del nostro Custom code. In Code inseriamo con copia incolla il seguente codice, clicchiamo su Apply poi su X per chiudere il lightbox e salviamo di nuovo il form.

 
<?php
class QRCode {
 
  public static $_ENCODING_UTF8 = "UTF-8";
  public static $_ENCODING_Shift_JIS = "Shift_JIS";
  public static $_ENCODING_ISO_8859_1 = "ISO-8859-1";
 
  public static $_OUTPUT_FORMAT_PNG = "png";
  public static $_OUTPUT_FORMAT_GIF = "gif";
 
  private $baseUrl = "http://chart.apis.google.com/chart";
  private $width=300;
  private $height=300;
  private $map = array();
 
  function __construct() {
    $this->map['cht']="qr";
    $this->map['chs']=$this->width."x".$this->height;
    $this->map['chof'] = QRCode::$_OUTPUT_FORMAT_PNG;
  }
 
  public function setOutputEncoding($type) { $this->map['choe'] = $type; }
  public function setOutputFormat($type) { $this->map['chof'] = $type; }
  public function getOuputFormat() { return $this->map['chof']; }
  public function setData($data) { $this->map['chl'] = urlencode($data);}
  public function setImageSize($width, $height) { $this->map['chs'] =
  $width."x".$height; }
  public function setMargin($margin) { $this->map['chld'] = $margin; }
  public function getMap() { return $this->map; }
 
  public function setErrorCorrectionLevel($errorCorrectionLevel) {
        $this->map['chld'] = $errorCorrectionLevel;
  }
 
  public function getUrlQuery() {
    return $this->baseUrl."?".$this->getQuery();
  }
 
  public function getQuery() {
    $query = "";
    $keys = array_keys($this->map);
    $i = 0;
    $length = count($this->map);
    foreach($keys as $key) {
      $query .= $key."=".$this->map[$key];
      $i++;
      if($i<$length) $query.="&";
    }
    return $query;
  }
 
  public function getContentsForGet() {
    return file_get_contents($this->baseUrl."?".$this->getQuery());
  }
 
  public function getContentsForPost() {
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_URL, $this->baseUrl);
    curl_setopt($ch, CURLOPT_HTTPHEADER, array("accept: image/png"));
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 30);
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_FOLLOWLOCATION, 1);
    curl_setopt($ch, CURLOPT_POST, true);
    curl_setopt($ch, CURLOPT_POSTFIELDS,$this->getQuery());
    $output = curl_exec($ch);
    $info = curl_getinfo($ch);
    curl_close($ch);
    if($info['http_code'] == 200) {
      return $output;
    }
    return $info['http_code'];
  }
}
 
$codice=JRequest::getVar('testo','','post');
if ($codice<>"") {
$qrcode = new QRCode();
$qrcode->setData($codice);
$qrcode->setOutputEncoding(QRCode::$_ENCODING_UTF8);
$qrcode->setOutPutFormat(QRCode::$_OUTPUT_FORMAT_PNG);
//$content = $qrcode->getContentsForPost();
$content = $qrcode->getUrlQuery();
echo $codice."<br/>";
echo '<img src="'.$content.'">';
/*
echo '<img src="data:image/png;base64,'.base64_encode($content).'">';
file_put_contents(Juri::base().DS."images".DS."stories".DS."qrcode".DS.
"prova.png", $content);
*/
}
?>
 

La prima parte del codice è la classe PHP QRcode con le sue proprietà è metodi implementati. Le proprietà $with e $height potranno essere personalizzate su dimensioni idonee per il sito di uso. La base di partenza è 300px.
La seconda parte del codice legge il valore della textarea di nome testo passato dal form. Poi c'è l'istanza alla classe, l'inserimento del valore trasmesso dal form e la creazione del QRcode. Una semplice if di php controlla che quando il form è inviato senza valori di testo da codificare non viene mostrata l'immagine del QRcode che sarebbe vuota.
Nell'esempio viene usato il metodo della classe getUrlQuery() poichè esso funziona su tutti i siti, mentre l'uso del metodo getContentsForPost() funziona solo nei siti in cui è attiva sul server la libreria CURL. Le righe di codice per l'uso di quest'ultimo sono quindi commentate e non attive. Chi lo vorrà potrà anche attivare il salvataggio delle immagini del codice in un cartella del sito (anche questa istruzione è commentata e potrà essere personalizza con un nome eventualmente dinamico e non statico come ora)

NB il QRcode è in grado di gestire 4296 caratteri alfanumerici.

Non resta ora che creare una voce di menù che punta al form per poter creare i nostri QR code direttamente sul nostro sito. Le immagini del QR code create postranno essere salvate cliccando su esse con il tasto destro del mouse e salvando in locale nel computer per riutilizzarle per le nostre necessità.

Questo sarà il risultato finale.

Form QR_code al lavoro

Buon QR code a tutti da vales (Valerio Sichi).

CommentaCommenta questo articolo sul forum