itaeng

Blog

Pubblicato in:cakephp

Twitter bootstrap su CakePHP... senza sforzo

11GIU2013

Twitter Bootstrap, per chi non lo conoscesse, è un bellissimo framework css, realizzato originariamente da quei geniacci di Twitter per semplificare la realizzazione di interfacce che, oltre ad essere graficamente consistenti (una manna dal cielo per chi, come me, non è dotato di particolari doti grafiche), sono anche responsive. In grado quindi di adattarsi a diverse risoluzioni e tipi di dispositivo: cellulare, tablet, schermo ecc.

Lo scaffolding di CakePHP, (o il codice generato da bake), genera invece layout molto semplici, con pagine che sarebbero da modificare pesantemente per adattarle all'uso di bootstrap. 

Per fortuna c'è un punto d'incontro: javascript. Sfruttando questa bellissima tecnologia (ed in particolare jQuery) possiamo adattare il codice generato da CakePHP in modo da far gestire la grafica a twitter bootstrap, senza doverlo nemmeno modificare.

Per comodità ho realizzato un piccolo file javascript, che prende le più comuni classi generate da CakePHP e gli "appiccica" gli stili di cui avevo bisogno.

Se anche tu hai necessità di fare qualcosa del genere, chissà, magari questo può servirti da spunto:

// cakePHP bootstrap - based on twitter bootstrap 3
$(document).ready(function() {

/*
* LAYOUT
* aggiungo le classi relative alle dimensioni degli elementi
*/
$("#container").addClass("row-fluid");
$("div.actions").prependTo("#content");
$("div.actions").addClass("span3");
$("div.index").addClass("span9");
$("div.form").addClass("span9");
$("div.view").addClass("span9");
$("div.related").addClass("span9");
$("div.flashMessage").addClass("span9");

/**
* TABELLE
* aggiungo il tag <thead> per la riga di intestazione delle tabelle
**/
$("table").prepend( $('<thead></thead>').append($('table tr:first').remove()) );

/*
* FORMS
* classi per form ed inputs
*/
$("input:not(.datepicker)").addClass("input-block-level");
$("textarea").addClass("input-block-level");

/*
* BOTTONI
* classi per bottoni, link etc.
*/
$(":submit").addClass("btn btn-success");
$(".actions ul li a").addClass("btn-block");
$("#content a").addClass("btn");
$("div.actions").addClass("row");
$(".actions a[href*='delete']").addClass("btn-danger");
$("a[href*='add']").addClass("btn-primary");
$("a[href*='view']").prepend("<i class='icon-search'></i> ");
$("a[href*='edit']").prepend("<i class='icon-edit'></i> ");
$("a[href*='delete']").prepend("<i class='icon-remove'></i> ");
$("form[action*='delete']").next("a").prepend("<i class='icon-remove icon-white'></i> ").addClass("btn-danger");
/**/
});
Pubblicato in:null

... e quindi uscimmo a riveder le email

08MAG2013

Questa mattina un cliente mi ha avvisato, creandomi un po' di imbarazzo e notevole disappunto, che le email inviate dal modulo contatti di questo sito non arrivavano nella mia casella di posta, pur dando al mittente un avviso di "email inviata correttamente".

Bella storia.

Indagando un po' ho scoperto che il mio hosting ha cambiato (senza avvisarmi, direi) le policy di sendmail cosicché tutto ciò che veniva spedito dal sito senza un preciso indirizzo email finiva... nel cestino.

Alé.

Chiedo scusa a chi mi avesse mandato mail nelle ultime settimane senza ricevere alcuna risposta, ora il problema sembra comunque risolto.

Emanuele

Pubblicato in:php trucchi

Visualizzare il testo di una pagina durante il caricamento

18APR2013

Perdona il titolo  nebuloso, ma non so come riassumere meglio questa piccola ma utie pillola di codice.

Come al solito parto dalla necessità: ho creato una piccola applicazione che per via dei lunghi tempi di esecuzione rende difficile capire cosa sta facendo, fino a quando non ha terminato l'ultimo script. Il che può essere ragionevole fino a quando lo script richiede pochi secondi, ma quando ne richiede alcune decine... è decisamente troppo.

Da qui la necessità di stampare sullo schermo un resoconto per ogni operazione completata, per poi fare il resoconto finale al termine del tutto. Più facile a dirsi che a farsi, probabilmente. Per me di sicuro lo era finché non mi sono imbattuto in questa piccola chicca

function echo_live($txt) {
    // inizializzazione del buffer per l'output
    if (ob_get_level() == 0) ob_start();
    echo $txt;
    // per Chrome e Safari si deve aggiungere questa istruzione
    print str_pad('',4096)."\n";
    // invia il contenuto al buffer
    ob_flush();
    flush();
}

Queste poche righe di codice fanno proprio ciò che mi serve: stampano una stringa a video immediatamente, senza aspettare il "termine dei lavori". Figata. Quello che è più importante è che, in sostanza, invece di fare un "echo" dell'informazione che voglio mostrare a video, basta utilizzare la nuova funzione "echo_live", senza dover riscrivere pressoché nulla nel codice.

Comodo vero?

Pubblicato in:css

Menu Html con effetto zoom sull'hover degli elementi usando solo CSS

08APR2013

A volte si perde tempo cercando di creare effetti semplici con javascript, magari aiutandosi con jQuery, per poi scoprire che il tutto sarebbe stato molto più semplice facendo semplicemente affidamento su altri strumenti, più adatti a questo genere di cose. Mi riferisco a piccoli effetti grafici, che spesso possono essere gestiti direttamente da CSS3 in modo estremamente più semplice rispetto a qualunque script o plugin fatto in javascript.

Andiamo con ordine: avevo la necessità di creare un semplice effetto di zoom passando con il mouse sopra gli elementi di un menu ed avevo pensato, inizialmente, di crearlo con jQuery. Non è un'operazione complessa, ma può diventare tediosa e visto che alla fin fine si tratta solo di manipolare alcuni stili CSS ho pensato: ma se lo facessi direttamente con i css3? D'altra parte, ormai le animazioni sono supportate dalla maggior parte dei browser...

Il risultato lo puoi vedere qui: http://goo.gl/Fo30t

Come funziona? In realtà è molto semplice.

Ho impostato uno stile a #test li, che descrive la grafica di default degli elementi del menu e -bada bene- quella a cui bisogna tornare quando finisce l'hover. In queste righe ho quindi inserito anche le istruzioni per l'animazione di ritorno alla grafica standard: transition: all .1s ease-in;

Poco sotto ho impostato la grafica che deve essere utilizzata nell'effetto hover: voglio quindi che il box venga zoomato al 130% (transform: scale(1.3)) nell'arco di 2 secondi (transition: all .2s ease-out;), e che venga spostato leggermente più in alto per dargli un effetto più "rimbalzante" (position:relative; top: -5px;).

Tutto qui. Non c'è davvero nient'altro da dire, è di una semplicità disarmante ed il bello è che questo genere di animazioni è supportato nativamente dalla maggior parte dei browser (utilizzando i consueti prefissi -ms, -o, -moz e -webkit, per ora).

Ovviamente sulle vecchie versioni di internet explorer il menu non funziona, ma... è ancora così importante?

Pubblicato in:php trucchi segnalazioni

Effettuare il dump di una tabella MySQL da php

15MAR2013

Recentemente mi è capitato di dover creare uno script PHP che effettuasse il dump di una tabella di un database MySQL e la salvasse in un file, magari con compressione gzip.

Su internet ci sono decine di risorse, qualcuna fatta a mano, qualcuna che sfrutta il (comodissimo) programma mysqldump, ma nessuno propriamente personalizzabile: a me serviva qualcosa che tirasse giù i dati, magari in una sola insert e non in duecentomila, ma che all'occorrenza mi permettesse anche di inserire le istruzioni di DROP TABLE e la seguente CREATE.

Così, sfruttando parte di script scritti da qualcun altro, me ne sono creato uno da me. Lo riporto qua, sperando che possa essere utile a qualcuno.

Clicca per vedere lo script!

http://pastebin.com/ujLYxAWW