CescoBlog » Coding http://www.cescopag.com Web-appunti tecnici (e non) per webdesigner e sviluppatori. Fri, 24 Dec 2010 08:11:29 +0000 http://wordpress.org/?v=2.8.5 en hourly 1 Google Maps API: “Calcola il percorso” nel nostro sito http://www.cescopag.com/2009/11/google-maps-api-calcola-il-percorso-nel-nostro-sito/ http://www.cescopag.com/2009/11/google-maps-api-calcola-il-percorso-nel-nostro-sito/#comments Tue, 03 Nov 2009 21:05:40 +0000 Francesco Paggin http://www.cescopag.com/?p=122 Google Maps Directions

Come molti di voi sapranno Google mette a disposizione per la maggior parte dei propri prodotti una serie di strumenti per sfruttarne le potenzialità nei nostri progetti.
Google Maps non fa eccezione e ci fornisce tutti gli strumenti (API) per sfruttare le mappe di Google nei nostri siti tramite Javascript.

Una delle funzionalità più utili è quella di poter calcolare il percorso ottimale per raggiungere un determinato luogo, ottenendo tutte le indicazioni sulle svolte e sulle strade da percorrere. Non molti sanno che queste funzionalità sono a disposizione degli sviluppatori per integrarle nei propri progetti, ed è proprio ciò che faremo.

Demo

Ipotizziamo di voler integrare nel nostro sito una comoda sezione “Come raggiungerci”, dove l’utente possa inserire la propria posizione ed ottenere il percorso per raggiungerci.

La nostra pagina quindi sarà composta da un breve form dove l’utente inserirà la posizione, la mappa dove verrà visualizzato il percorso e l’area in cui verranno visualizzate le informazioni:

<form name="findRoute" action="">
	<p>
		<label for="partenza">Da dove parti?</label>
		<input type="text" name="partenza" />
	</p>

	<p>
		<input type="submit" value="Calcola" name="calcola" id="calcola" />
	</p>
</form>

<div id="map"></div>
<div id="route"></div>

Com’è facile intuire la mappà sarà inserita all’interno del div map, mentre le indicazioni all’interno del div route.

Ma veniamo alla parte Javascript. Per prima cosa è necessario procurarsi una API Key dal sito google:

http://code.google.com/intl/it-IT/apis/maps/signup.html

Una volta ottenuta la chiave possiamo includere il javascript di Google Maps: 

<script src="http://maps.google.com/maps?file=api&v=2.x&key=CHIAVE" type="text/javascript"></script>

Dove al posto di CHIAVE ci andrà la API Key fornita da Google.

Procediamo ora con lo script vero e proprio. Innanzitutto inizializziamo una serie di variabili vuote che conterranno gli oggetti di Google Maps che istanzieremo:

/* GOOGLE MAPS OBJECTS */
var home;       //Home GLatLng object
var map;        //GMap object
var directions; //Directions object
var marker;     //GMarker object

La prima funzione che andremo ad utilizzare sarà la funzione initialize() che come dice il nome preparerà tutto il necessario per far funzionare la mini-applicazione. Questa funzione dovrà essere richiamata al caricamento della pagina, ad esempio all’interno del tag body:

<body onload="initialize()">

Ma veniamo al codice. Per prima cosa recuperiamo gli elementi html che ci servono tramite il metodo document.getElementById:

//Get html elements needed:
var mapPanel        = document.getElementById('map');
var directionsPanel = document.getElementById('route');
var submitButton    = document.getElementById('calcola');

Subito dopo invece definiamo il nostro punto base, nell’esempio sarà la nostra ipotetica sede:

//Home location:
home = new GLatLng(45.434629,12.337925);

Ora che abbiamo il necessario possiamo già istanziare la mappa che verrà visualizzata di default e mostrerà il punto base:

//Create a map:
map = new GMap2(mapPanel);
map.setCenter(home, 13);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

Per prima cosa viene creato l’oggetto GMap2, cioè la Google Map, e viene associato al div#map (mapPanel). La mappa viene poi centrata in home, al livello di zoom 13 (qui possiamo procedere a tentativi, più piccolo sarà il numero e più superficie terrestre vedremo). Tramite le altre due righe andiamo ad aggiungere i controlli che ci interessano (in questo caso i controlli standard e quelli per il tipo di visualizzazione – satellite, mappa, ibrida).

Ora dobbiamo evidenziare il punto base, e lo faremo aggiungendo un marker:

//Create marker:
marker = new GMarker(home);
map.addOverlay(marker);

Al marker possiamo aggiungere un fumetto descrittivo, contenente ad es. l’indirizzo, che si apre al click:

GEvent.addListener(marker, "click", function() {
    marker.openInfoWindowHtml("<strong>Venezia</strong><br />Piazza San Marco");
});

Il comando addListener serve appunto per associare il click sul marker all’operazione di mostrare un fumetto contenente una stringa html (tramite il comando openInfoWindowHtml).

Come ultimo passaggio preparatorio dobbiamo istanziare l’oggetto GDirections di Google, che ci servirà per calcolare le rotte:

//Create directions module:
directions = new GDirections(map, directionsPanel);

Ora che tutto è pronto dobbiamo preoccuparci di cosa fare quando l’utente premerà sul pulsante “Calcola”:

submitButton.onclick = function() {
    getRoute();
    return false;
}

Definiamo quindi la funzione getRoute():

function getRoute() {
	var userLocation = document.findRoute.partenza.value;
	from = userLocation;
	to  = home;

    directions.load("from: " + from + " to: " + to, {"locale":"it_IT"});
}

Questa non fa altro che leggere la posizione di partenza dal campo compilato dall’utente e assegnarla alla variabile from e associare il punto base alla variabile to.
La magia avviene infine nell’ultima riga, dove andremo a calcolare la rotta tramite il metodo load del nostro oggetto GDirections.

A questo andremo a passare due parametri: Il primo sarà una stringa contenente le indicazioni nella forma “from:INDIRIZZO_DI_PARTENZA to:INDIRIZZO_DI_ARRIVO” (esattamente a come faremmo nella casella di ricerca in maps.google.it). Il secondo parametro invece è un oggetto che ci permette di specificare varie opzioni, in questo caso la lingua italiana.

Se andiamo a testare il tutto, dovremmo vedere che, una volta scelto un indirizzo di partenza, automaticamente verrà generato un percorso, visualizzato correttamente nella mappa, e generato il percorso passo-passo con tutte le indicazioni. Semplice no?

Demo 1

Ora aggiungiamo qualche funzionalità in più. Per prima cosa vogliamo dare la possibiltà di calcolare anche il percorso di ritorno. Aggiungiamo quindi un checkbox con la dicitura “Calcola percorso di ritorno”:

<h1>Come arrivare</h1>
<form name="findRoute" action="">
	<p>
		<label for="partenza">Da dove parti?</label>
		<input type="text" name="partenza" />
	</p>

	<p>
		<label><input type="checkbox" name="inverti" value="inverti" />Calcola percorso di ritorno</label>
	</p>

	<p>
		<input type="submit" value="Calcola" name="calcola" id="calcola" />
	</p>
</form>

Nel javascript, all’interno di getRoute, andiamo quindi a gestire il caso in cui si voglia invertire la direzione:

function getRoute() {
	var userLocation = document.findRoute.partenza.value;
	var reverse = document.findRoute.inverti.checked;

	if (!reverse) {
		//andata...
		from = userLocation;
		to  = home;
	} else {
		//ritorno...
		from = home;
		to = userLocation;
	}

    directions.load("from: " + from + " to: " + to, {"locale":"it_IT"});
}

Viene infatti controllato se la checkbox è selezionata oppure no, e in caso positivo vengono invertite le posizioni di partenza e arrivo.

Se visualizziamo l’esempio vediamo quindi che selezionando il checkbox le indicazioni saranno invertite, partendo dal punto base fino alla destinazione inserita dall’utente.

Demo 2

Come ultima personalizzazione andiamo a sostituire l’icona di default con una scelta ad-hoc. Per farlo ci avvaleremo dell’ottimo sito: http://www.powerhut.co.uk/googlemaps/custom_markers.php Il quale ci permette di caricare immagini in gif, jpeg e png per generare il corrispondente marcatore, completo di immagini e javascript.

Nel mio caso il risultato fornito è il seguente: 

var myIcon = new GIcon();
myIcon.image = 'markers/image.png';
myIcon.printImage = 'markers/printImage.gif';
myIcon.mozPrintImage = 'markers/mozPrintImage.gif';
myIcon.iconSize = new GSize(65,190);
myIcon.shadow = 'markers/shadow.png';
myIcon.transparent = 'markers/transparent.png';
myIcon.shadowSize = new GSize(160,190);
myIcon.printShadow = 'markers/printShadow.gif';
myIcon.iconAnchor = new GPoint(33,190);
myIcon.infoWindowAnchor = new GPoint(33,0);
myIcon.imageMap = [4...0]; //omesso per questioni di spazio

Per poter utilizzare l’icona dobbiamo modificare leggermente la riga dove viene creato il marker:

//Create marker:
marker = new GMarker(home, {icon:myIcon});

Abbiamo infatti aggiunto l’opzione icon che permette di specificare quale icona utilizzare.

Se visualizzamo quest’ultimo esempio vedremo una simpatica icona al posto del consueto pallino rosso.

Demo 3

]]> http://www.cescopag.com/2009/11/google-maps-api-calcola-il-percorso-nel-nostro-sito/feed/ 20 jQuery zoom plugin http://www.cescopag.com/2009/01/jquery-zoom-plugin/ http://www.cescopag.com/2009/01/jquery-zoom-plugin/#comments Sun, 11 Jan 2009 14:24:06 +0000 Francesco Paggin http://www.cescopag.com/?p=87 Visitando il sito Apple Store è possibile vedere all’opera un interessante funzionalità che permette lo zoom delle foto direttamente nel loro spazio, senza aprire fastidiosi popup.

Grazie a jQuery e la sua estensione jQuery UI è possibile realizzare il medesimo effetto in maniera semplice. In particolare andremo ad utilizzare il plugin "draggable" di jQuery UI.

Demo

L’idea di base è quella di prevedere un DIV contenente l’immagine a bassa risoluzione. Al click su questa immagine, questa viene ingrandita fino alle dimensioni dell’immagine a grande risoluzione e successivamente scambiata con quest’ultima in modo da simulare uno zoom. Tramite la funzionalità "draggable" renderemo trascinabile questa immagine, in modo da poter visualizzare tutte le parti dell’ingrandimento. Il nostro riquadro originale che contiene la foto sarà la "finestra" attraverso cui si vedrà l’immagine ad alta risoluzione sottostante. Sarà inoltre necessario impostare posizionamenti e limiti di trascinamento per garantire che l’immagine non esca dal riquadro.
Ho realizzato una piccola animazione che rappresenta l’idea:

Animazione Zoom

Il riquadro rosso è l’area originale dell’immagine piccola (non rappresentata). L’immagine grande (la foto che vedete nell’animazione) potrà essere trascinata in tutte le direzioni e soltanto la parte all’interno del riquadro rosso sarà visibile, dando l’impressione di un’immagine zoomata su cui effettuiamo il panning. Il riquadro grigio invece rappresenta i limiti entro i quali l’immagine può essere trascinata senza uscire dal riquadro rosso. Vedremo dopo come realizzare tutto ciò.

Ma procediamo con ordine. Per prima cosa realizziamo l’html necessario. Come abbiamo detto realizziamo un DIV contenente l’immagine piccola. Per garantire l’accessibilità anche a chi non ha javascript abilitato, l’inseriamo all’interno di un link che punta all’immagine grande e che ci servirà per identificare il path all’immagine ad alta risoluzione:

<div class="image-zoom">
<a href="img1-big.jpg">
<img src="img1-small.jpg" alt="img1" />
</a>
</div>

Ora che l’html è pronto possiamo procedere con gli opportuni stili css:

.image-zoom { overflow:hidden; width:300px; height:300px; position:relative }
.image-zoom img { position:absolute; }

Come potete vedere ho impostato l’overflow hidden per confinare l’immagine all’interno del riquadro quando viene zoomata (come se fosse una finestra) e le dimensioni coincidenti con la dimensione dell’immagine contenuta. Ho poi aggiunto il posizionamento relative al contenitore e absolute all’immagine, in modo da poterla muovere liberamente nel nostro div.

Ora che abbiamo tutto pronto possiamo procedere all’aggiunta del javascript necessario, il tutto grazie a jQuery e jQuery UI. Andiamo quindi a realizzare la struttura base per realizzare un plugin in jQuery:

(function($){
$.fn.zoom = function(params) {
   var defaults = {
      duration: 200,
      small_width:300,
      small_height:300,
      big_width:1000,
      big_height:1000
   };
   var options = $.extend(defaults, params);
   return this.each(function() {
      //istruzioni del plugin...
   });
}
})(jQuery)

La prima riga e l’ultima riga servono soltanto a garantirci di poter utilizzare la scorciatoia "$" al posto di "jQuery", mentre tramite $.fn.zoom = function(params) { ... } andiamo a realizzare il plugin vero e proprio. La variabile params è l’insieme di opzioni che possiamo impostare all’inizializzazione del plugin, mentre defaults sono i valori di default che il plugin andrà ad utilizzare. Infine uniamo il tutto tramite il metodo $.extend nell’oggetto options, il quale che conterrà i valori di default eventualmente sovrascritti dai parametri passati in params. I parametri di default sono in particolare la durata delle animazioni di zoom-in e zoom-out e le dimensioni dell’immagine a bassa e alta risoluzione (per semplicità ipotizziamo di avere immagini di dimensioni fisse).
Le istruzioni del plugin invece andranno inserite all’interno del ciclo return this.each(function() {...});. Tramite each infatti possiamo inizializzare la funzionalità del plugin a più elementi contemporaneamente.

Il motivo per cui ho deciso di realizzare un plugin anziché semplici istruzioni è che permette di avere un codice riutilizzabile facilmente, permette di scrivere codice molto più ordinato e di estenderne le funzionalità senza dover mettere mano a tutto il flusso di lavoro.

Ma vediamo in dettaglio come sarà strutturato il plugin. In generale prevediamo quattro parti: una prima parte dove andremo a preparare tutte le variabili che ci servono, una seconda parte dove manipolare css e html per preparare le funzionalità del plugin, una terza parte dove andremo a gestire gli eventi dell’utente, richiamando gli opportuni metodi, ed infine un’ultima parte dove andremo ad implementare le varie funzionalità (zoom in, zoom out, drag etc.).

Prima parte

//caching...
var $container = $(this);
var $link = $container.find('a');
var $image = $link.find('img');

//reading some parameters...
var small_path = $image.attr('src');
var big_path   = $link.attr('href');

//status variables...
var dragging = false;
var zoomed   = false;

//calculate correct positioning...
var a_width  = (options.big_width  - options.small_width)  * 2 + options.small_width;
var a_height = (options.big_height - options.small_height) * 2 + options.small_height;

var a_top  = options.big_height - options.small_height;
var a_left = options.big_width  - options.small_width;

La prima sezione serve per fare il "caching" degli elementi utilizzati in modo da semplificarne e velocizzarne l’utilizzo nel resto del plugin. Salviamo poi i path delle immagini a bassa e alta risoluzione che ci serviranno nelle operazioni di zoom-in e zoom-out. Le variabili dragging e zoomed, che impostiamo all’inizio a false, servono per salvare lo stato corrente delle immagini, in particolare se le stiamo trascinando e se sono zoomate o rimpicciolite. Nell’ultima sezione infine calcoliamo i posizionamenti e le larghezze che ci serviranno quando andremo a manipolare il css dell’html.

Seconda parte

$link.css({
    display:'block',
    position:'absolute',
    width: a_width   + 'px',
    height: a_height + 'px',
    top:  '-' + a_top  + 'px',
    left: '-' + a_left + 'px'
});

/* Removing default link behaviour... */
$link.removeAttr('href');

$image.css({
    display:'block',
    position:'absolute',
    width:  options.small_width + 'px',
    height: options.small_height + 'px',
    top: a_top + 'px',
    left: a_left + 'px'
});

Nella seconda parte andiamo a cambiare i css di link e immagine per predisporre la funzionalità di zoom. In particolare il link diventerà il blocco che conterrà lo spostamento dell’immagine grande (il rettangolo grigio nell’animazione). A questo andremo poi a togliere l’attributo href, in modo da eliminare il comportamento standard del link che interferirebbe con il nostro plugin. L’immagine infine viene riposizionata all’interno del tag a in modo da trovarsi in corrispondenza della finestra originale (il rettangolo rosso). Infatti mentre il link è spostato a sinistra e in alto tramite margini negativi, l’immagine viene spostata degli stessi valori (a_top, a_left) ma verso destra e in basso, in modo da trovarsi nel medesimo punto rispetto alla finestra originale. In questo modo avremo già pronti i posizionamenti assoluti per l’animazione.

Terza parte

$image.mouseup(function() {
    if (!dragging) {
        if (zoomed) {
	        zoomOut();
        } else {
    	    zoomIn();
        }
    }
});

L’unico evento che ci interessa gestire è il rilascio del pulsante del mouse. Utilizzando infatti l’evento "mouseup" anziché l’evento "click" possiamo controllare lo stato prima di decidere che operazione compiere. Al rilascio del mouse controllo se sto effettuando il "dragging". Se non sto trascinando, e quindi è un semplice click, effettuo lo zoom-in o lo zoom-out in base allo stato "zoomed", richiamando i due metodi zoomOut() e zoomIn().

Quarta parte

Nella quarta parte andremo ad implementare i metodi zoomOut() e zoomIn() richiamati precedentemente, oltre a quelli che si renderanno necessari successivamente:

function zoomOut() {
    $image.animate({
        width:options.small_width + 'px',
        height:options.small_height + 'px',
        top:  a_top  + 'px',
        left: a_left + 'px'
    }, options.duration, swapWithSmall);
	zoomed = false;
}

function zoomIn() {
    $image.animate({
        width:options.big_width + 'px',
        height:options.big_height + 'px',
        top:  a_top / 2  + 'px',
        left: a_left / 2 + 'px'
    }, options.duration, swapWithBig);
    zoomed = true;
}



Come vedete ogni metodo va ad animare dimensioni e posizionamenti css secondo i valori calcolati nella prima parte. Alla fine dell’animazione vengono richiamati i due metodi per scambiare l’immagine, rispettivamente "swapWithBig" e swapWithSmall":

function swapWithBig() {
	$image.attr('src', big_path);
	$image.draggable({
		containment: 'parent',
		start: handleStartDrag,
		stop: handleStopDrag
	});
}

function swapWithSmall() {
	$image.attr('src', small_path);
	$image.draggable('disable');
}

function handleStartDrag() {
	dragging = true;
}

function handleStopDrag() {
	dragging = false;
}

Questi non fanno altro che cambiare l’attributo src e ad abilitare (nel caso dello zoom-in) o disabilitare (nel caso dello zoom-out) la funzionalità "draggable" di jQuery UI. Come vedete a draggable vengono impostati alcuni parametri:

containment: serve ad impostare i limiti di trascinamento. Nel nostro caso è impostato a parent, e cioè al tag html che contiene l’elemento e quindi il tag a che abbiamo appositamente posizionato e dimensionato proprio per questo scopo.
start: è la funzione che viene eseguita quando inizia il trascinamento. Nel nostro caso è la funzione handleStartDrag che non fa altro che aggiornare la variabile di stato corrispondente (dragging).
stop: è la funzione che viene eseguita alla fine del trascinamento e richiama la funzione handleStopDrag, che aggiorna la variabile dragging.

Il plugin ora è completo, non ci resta che richiamarlo nella nostra pagina tramite la sintassi solita di jQuery:

$(document).ready(function() {
	$('.image-zoom').zoom();
});

Alcuni metodi possono sembrare superflui, ma ho preferito spezzettare il plugin in più funzioni esplicite, ciascuna con funzionalità ben definite, piuttosto che annidare funzioni su funzioni come jQuery a volte induce a fare. Questo semplifica la lettura del codice e soprattutto le successive manipolazioni e revisioni.

Ecco il codice completo del plugin, mentre qui potete vederlo in azione:

(function($) {
$.fn.zoom = function(params) {
	/*
	Zoom jQuery Plugin
	Copyright: (C) 3009 - Francesco Paggin
	Parameters:
		(int) duration: the duration of the zooming animaton
		(int) small_width, small_height: the dimensions of the small thumbnails
		(int) big_width, big_height: the dimensions of the zoomed images
	*/
	var defaults = {
		duration: 200,
		small_width:300,
		small_height:300,
		big_width:1000,
		big_height:1000
	};
	var options = $.extend(defaults, params);

	return this.each(function() {
		//caching...
		var $container = $(this);
		var $link = $container.find('a');
		var $image = $link.find('img');

		//reading some parameters...
		var small_path = $image.attr('src');
		var big_path   = $link.attr('href');

		//status variables...
		var dragging = false;
		var zoomed   = false;

		//calculate correct positioning...
		var a_width  = (options.big_width  - options.small_width)  * 2 + options.small_width;
		var a_height = (options.big_height - options.small_height) * 2 + options.small_height;

		var a_top  = options.big_height - options.small_height;
		var a_left = options.big_width  - options.small_width;

		/*
			INITIALIZATION...
		*/
		$link.css({
			display:'block',
			position:'absolute',
			width: a_width   + 'px',
			height: a_height + 'px',
			top:  '-' + a_top  + 'px',
			left: '-' + a_left + 'px'
		});

		/* Removing default link behaviour... */
		$link.removeAttr('href');

		$image.css({
			display:'block',
			position:'absolute',
			width:  options.small_width + 'px',
			height: options.small_height + 'px',
			top: a_top + 'px',
			left: a_left + 'px'
		});

		/*
			HANDLE EVENTS...
		*/
		$image.mouseup(function() {
			if (!dragging) {
				if (zoomed) {
					zoomOut();
				} else {
					zoomIn();
				}
			}
		});

		/*
			METHODS...
		*/
		function zoomOut() {
			$image.animate({
				width:options.small_width + 'px',
				height:options.small_height + 'px',
				top:  a_top  + 'px',
				left: a_left + 'px'
			}, options.duration, swapWithSmall);
			zoomed = false;
		}

		function zoomIn() {
			$image.animate({
				width:options.big_width + 'px',
				height:options.big_height + 'px',
				top:  a_top / 2  + 'px',
				left: a_left / 2 + 'px'
			}, options.duration, swapWithBig);
			zoomed = true;
		}

		function swapWithBig() {
			$image.attr('src', big_path);
			$image.draggable({
				containment: 'parent',
				start: handleStartDrag,
				stop: handleStopDrag
			});
		}

		function swapWithSmall() {
			$image.attr('src', small_path);
			$image.draggable('disable');
		}

		function handleStartDrag() {
			dragging = true;
		}

		function handleStopDrag() {
			dragging = false;
		}
	});
}
})(jQuery)
]]> http://www.cescopag.com/2009/01/jquery-zoom-plugin/feed/ 4 Progetto Step by Step CodeIgniter – I Controller http://www.cescopag.com/2008/11/progetto-step-by-step-codeigniter-i-controller/ http://www.cescopag.com/2008/11/progetto-step-by-step-codeigniter-i-controller/#comments Tue, 18 Nov 2008 22:30:34 +0000 Francesco Paggin http://www.cescopag.com/?p=78 In questo passaggio del tutorial a CodeIgniter vediamo finalmente l’elemento del framework che si occupa della logica dell’applicazione, e cioè il controller. Come vedremo questo elemento è quello che viene eseguito direttamente dall’utente ed è ciò che mette in comunicazione i dati (e cioè i modelli) con l’output (le viste).

CodeIgniter infatti, tramite la classe Routing, si occupa di leggere l’URL digitato e indirizzare all’apposito controller il metodo da eseguire. Ad esempio, digitando l’indirizzo http://www.dominio.com/index.php/nome_controller/nome_metodo/ CodeIgniter andrà a richiamare il controller nome_controller ed eseguirà il metodo nome_metodo. Se invece viene omesso nome_metodo verrà richiamato il metodo di default chiamato index.

Dal punto di vista del codice, un controller non è altro che una classe PHP che eredita dalla classe nativa Controller. Pertanto la sintassi base sarà:

class Mia_classe extends Controller {
    function Mia_classe() { //questo è il costruttore
        parent::Controller(); //richiamo il costruttore della classe “Controller”
    }

    function index() {
        //funzione richiamata di default
    }

    function mia_funzione() {
        //metodo personalizzato
    }
}

i controller vanno di norma salvati nella cartella /system/application/controllers, mentre il nome del file dovrà coincidere col nome della classe, quindi nell’esempio precedente questo dovrà chiamarsi mia_classe.php – Notare l’eliminazione delle maiuscole richiesta dal framework.

Tornando alla nostra applicazione, dato che abbiamo tre entità in gioco avremo bisogno di tre file separati. Ciò non è la regola, in quanto i controller vanno intesi più che altro come azioni da compiere. Nel nostro caso però, dato che andremo ad operare ogni volta su un elemento preciso in maniera abbastanza indipendente, ho preferito separarli in tre controller distinti anziché uno unico.

Partiamo dal controller delle tipologie (che sarà analogo a quello degli stati).

Prendendo come spunto il modello qui sopra, il nostro controller per gli stati sarà del tipo:

class Statuses extends Controller {
    function Statuses() {
        parent::Controller();
        $this->load->model(‘status_model’);
    }

    function index() {
        //funzione richiamata di default
    }
}

Come vedete nel costruttore Statuses() vado a caricare il modello status_model che mi servirà all’interno del controller.

Ora andiamo a popolare il metodo index() che ci servirà per la lista completa degli stati. Per farlo aggiungiamo: 

$data[‘statuses’] = $this->status_model->get();
$this->load->view(‘list_statuses’, $data);

La prima riga si occupa di eseguire il metodo get del modello status_model e a salvarne l’output nell’array $data. Nella seconda riga invece andiamo a caricare la vista list_statuses passando i dati da visualizzare. CodeIgniter andrà a cercare la vista list_statuses.php all’interno della cartella /system/application/views. Vedremo in seguito come realizzare la vista, ma per quanto riguarda il Controller abbiamo già ottenuto quello che ci serve.

I prossimi metodi che ci servono sono quelli per interagire col sito. Infatti abbiamo previsto la possibilità di aggiungere, modificare o rimuovere stati direttamente dal sito senza dover accedere al database.

Presupponiamo già di avere un form che invii tramite post i campi necessari (andremo a realizzarlo in una delle viste). Il nostro metodo che chiameremo add() sarà:

function add() {
    if ($this->input->post(‘submit’) {
        //ho fatto il submit...
        $insert[‘name’] = $this->input->post(‘name’);
        $this->status_model->add($insert);
        return $this->index();
    } else {
        //non ho fatto il submit quindi mostro il form...
        $this->load->view(‘add_status’);
    }
}

Innanzitutto vedo se ho già fatto il submit o se invece devo mostrare il form per l’inserimento. Nel primo caso leggo i dati tramite $this->input->post('nome') che è il metodo offerto dalla libreria Input di C.I. per leggere i dati in POST, richiamo il metodo add() del modello per seguire l’inserimento. Una volta concluso mostro la lista degli articoli richiamando il metodo di default $this->index()

La funzione edit() è molto simile, con la differenza che dovendo modificare un preciso stato dovrò specificarlo tramite id. Per farlo basta passare quest’ultimo come parametro al nostro metodo. Nel browser ciò è possibile nella forma: http://www.dominio.com/index.php/mio_controller/metodo/parametro1/parametro2/ etc…

Il metodo diventa quindi:

function edit($id) {
    if ($this->input->post(‘submit’) {
        //ho fatto il submit...
        $insert[‘name’] = $this->input->post(‘name’);
        $this->status_model->edit($insert, $id);
        return $this->index();
    } else {
        //non ho fatto il submit quindi mostro il form...
        $data[‘status’] = $this->status_model->get_single($id);
        $this->load->view(‘add_status’, $data);
    }
}

Come vedete l’unica differenza rispetto all’inserimento sta che nel metodo edit() del modello devo passare anche l’id dell’elemento da modificare. Devo inoltre pre-popolare il form con i valori già esistenti. Posso farlo tramite il metodo get_single($id) del nostro modello, che ci permette di leggere un singolo stato e passarne i dati alla vista.

L’ultimo metodo è quello destinato alla cancellazione di uno stato, ed è molto semplice:

function delete($id) {
    $this->status_model->delete($id);
    return $this->index();
}

Come avrete sicuramente visto non viene effettuato nessun controllo sulla validità dei dati. Questo però sarà facilmente integrabile in un secondo momento tramite ulteriori controlli e la libreria Validation presente in CodeIgniter.

Il controller Types sarà identico a quanto appena visto, con l’unica differenza di nomenclatura tra stati e tipi. Basterà quindi fare copia-incolla dei files e modificare quanto serve.

Anche il controller relativo agli items sarà molto simile, con la differenza che avremo più campi da gestire (non solo il nome) e avremo bisogno di tutti e tre i modelli. Il controller completo è il seguente:

class Items extends Controller {

    function Items() {
        parent::Controller();
        $this->load->model('item_model');
        $this->load->model('type_model');
        $this->load->model('status_model');
    }

    function index() {
        //lista degli elementi nel database
        $data['items'] = $this->item_model->get();
        $this->load->view('list_items', $data);
    }

    function add() {
        if ($this->input->post('submit')) {
            $insert['name']             = $this->input->post('name');
            $insert['code']             = $this->input->post('code');
            $insert['description']      = $this->input->post('description');
            $insert['position']         = $this->input->post('position');
            $insert['type_id']          = $this->input->post('type_id');
            $insert['status_id']        = $this->input->post('status_id');
            $insert['about_the_status'] = $this->input->post('about_the_status');

            $this->item_model->add($insert);
            return $this->index(); //torno all'indice...
        } else {
            $data['types']    = $this->type_model->get();
            $data['statuses'] = $this->status_model->get();
            $this->load->view('add_item', $data);
        }
    }

    function edit($id) {
        if ($this->input->post('submit')) {
            $insert['name']             = $this->input->post('name');
            $insert['code']             = $this->input->post('code');
            $insert['description']      = $this->input->post('description');
            $insert['position']         = $this->input->post('position');
            $insert['type_id']          = $this->input->post('type_id');
            $insert['status_id']        = $this->input->post('status_id');
            $insert['about_the_status'] = $this->input->post('about_the_status');

            $this->item_model->edit($insert, $id);
            return $this->index(); //torno all'indice...
        } else {
            $data['item']     = $this->item_model->get_single($id);
            $data['types']    = $this->type_model->get();
            $data['statuses'] = $this->status_model->get();
            $this->load->view('edit_item', $data);
        }
    }

    function delete($id) {
        $this->item_model->delete($id);
        return $this->index();
    }
}

Anche se più lungo, il concetto è il medesimo dei precedenti. Vorrei soffermarmi semplicemente sulle istruzioni

$data[‘types’] = $this->type_model->get();
$data[‘statuses’] = $this->status_model->get();

presenti sia nel metodo per l’inserimento che per quello per la cancellazione. In pratica andiamo a prepararci in due array l’elenco degli stati e delle tipologie disponibili nel nostro database. Questo ci serve per realizzare delle comode dropdown nei form per i riferimenti esterni. Quando vedremo in dettaglio le viste capiremo meglio come andremo a utilizzarlo.

Nella prossima puntata vedremo in dettaglio le viste, completando il primo step e potendo far funzionare una prima basilare applicazione. In seguito, come già accennato, vedremo come gestire la validazione dei dati.

Puntate precedenti:

  1. Introduzione
  2. Il database
  3. I modelli
  4. L’applicazione
]]> http://www.cescopag.com/2008/11/progetto-step-by-step-codeigniter-i-controller/feed/ 5 Footer sempre in fondo http://www.cescopag.com/2008/11/footer-sempre-in-fondo/ http://www.cescopag.com/2008/11/footer-sempre-in-fondo/#comments Wed, 05 Nov 2008 20:56:59 +0000 Francesco Paggin http://www.cescopag.com/2008/11/footer-sempre-in-fondo/ Il footer, per definizione, è quell’elemento che chiude la pagina e si pone alla fine dei contenuti. Quando però il contenuto è più corto dello spazio disponibile a video – il viewport – il footer si “solleva” dal bordo inferiore della pagina, lasciando uno spazio più o meno grande al di sotto di esso. L’effetto in certi casi può essere poco gradevole, dando l’impressione di un layout “tagliato a metà”. Potete vedere qui un esempio…

Il footer dovrebbe invece disporsi allineato al bordo inferiore della pagina nel caso citato, mentre dovrebbe posizionarsi in fondo al contenuto, oltre lo scroll, se questo è sufficientemente lungo da riempire tutto il viewport. Per farvi un’idea date un’occhiata qui e qui.

Una soluzione valida, compatibile con tutti i moderni browser, è quella di utilizzare la proprietà css min-height per imporre l’altezza minima del contenuto tale da farlo ampliare fino a riempire con il viewport.

Ma procediamo con ordine. Il layout standard potrebbe essere questo:

<body>
    <div id="container">
            <div id="header">
                 Header
            </div>
           <div id="content">
                 Content
            </div>
    </div>
    <div id="footer">
        Footer
    </div>
</body>

Tramite css impostiamo l’altezza minima del container al 100% in modo da farlo occupare tutto lo spazio verticale disponibile. L’altezza viene però calcolata in base a quella degli elementi contenenti il div, quindi dobbiamo impostare al 100% sia il tag body che il tag html:

html, body {
    height:100%;
}

#container {
    min-height:100%;
}

In questo modo però il footer andrà a posizionarsi fuori dall’area visibile (oltre il 100%, per intendersi): occorre quindi recuperare lo spazio necessario. Per farlo utilizziamo un semplice margine negativo pari all’altezza voluta del footer (in pixel o em, come preferite): 

html, body {
    height:100%;
}

#container {
    min-height:100%;
    margin-bottom:-100px;
}

Ora però dobbiamo impedire al contenuto di finire sotto al footer che abbiamo portato in primo piano. Aggiungiamo perciò un padding inferiore al content in modo da distanziarlo a sufficienza: è importante quindi che abbia almeno lo stesso valore. Se vogliamo aggiungere un ulteriore spazio basta addizionarlo: (ad es. 110px per un padding inferiore apparente di 10px).

html, body {
    height:100%;
}

#container {
    min-height:100%;
    margin-bottom:-100px;
}

#content {
    padding-bottom:100px;
}

Se provate la pagina con un browser come Firefox o Safari noterete che abbiamo già ottenuto l’effetto desiderato. La proprietà min-height però non è supportata da Internet Explorer 6. Possiamo risolvere facilmente con il noto l’hack che utilizza la proprietà !important. Aggiorniamo quindi il css ed abbiamo finito:

#body {
    height:100%;
}

#container {
    min-height:100%;
    height:auto !important; /*per gli altri browser*/
    height:100%; /*per IE 6*/
    margin-bottom:-100px;
}

#content {
    padding-bottom:100px;
}

Ecco quindi l’esempio finito con poco o molto contenuto. Potete in alternativa scaricare lo zip con i sorgenti.
Ho aggiunto qualche altra istruzione per evidenziare header e footer, ma il css di base è lo stesso.

]]> http://www.cescopag.com/2008/11/footer-sempre-in-fondo/feed/ 5 Progetto Step by Step Codeigniter – l’applicazione (edit) http://www.cescopag.com/2008/10/progetto-step-by-step-codeigniter-lapplicazione/ http://www.cescopag.com/2008/10/progetto-step-by-step-codeigniter-lapplicazione/#comments Thu, 09 Oct 2008 12:46:43 +0000 Francesco Paggin http://www.cescopag.com/?p=43 Riprendo dopo qualche tempo il tutorial su CodeIgniter, dato che ho ultimato una prima versione preliminare dell’applicazione (molto scarna, ma rende l’idea). Potete quindi già testarne il funzionamento e seguire i prossimi tutorial direttamente sul codice finito.

L’installazione è semplicissima se avete un webserver php attivo con mysql configurato. Provate visitando l’indirizzo http://localhost/ (altrimenti esistono ambienti preconfigurati come XAMPP per windows o MAMP per macintosh molto facili da installare).

Innanzitutto scaricate il file contenente tutto il necessario: [Scarica]

Create poi una cartella (io l’ho chiamata “homeDB”) all’interno del vostro “localhost” (dove avete le cartelle dei vostri progetti in php, per intenderci) e scompattate all’interno il file zip. Quest’ultimo contiene, oltre al framework e all’applicazione, un file SQL per creare le tabelle necessarie (eseguite la query all’interno di phpMyAdmin o della vostra interfaccia MySQL preferita).

Ora non resta che modificare la configurazione dell’applicazione per adattarla al vostro ambiente. Per prima cosa aprite il file config.php all’interno di [vostraCartella]/system/application/config/ e modificate la riga $config['base_url'] = "http://127.0.0.1/homeDB/"; con la vostra cartella al posto di homeDB.

In secondo luogo bisognerà indicare i nuovi parametri di connessione al database. Per farlo aprite database.php nella stessa cartella e modificate in fondo alla pagina i parametri con quelli corretti.

A questo punto tutto dovrebbe essere configurato correttamente e dovreste già poter vedere l’applicazione funzionante visitando l’indirizzo http://localhost/[vostraCartella]. Potete creare qualche record fittizio per provare il tutto: vi suggerisco di partire dalle tipologie e dagli stati dato che sono campi obbligatori. Potete anche vedere, nell’inserimento degli articoli, la libreria Validation fornita direttamente da CodeIgniter (provate a creare un articolo vuoto).

Nei prossimi giorni vedremo gli altri elementi dell’applicazione, ovvero i controller e le viste, nonché l’utilizzo di helper e librerie.

Edit: ho messo on-line una demo di questo primo abbozzo di applicazione a questo indirizzo se volete provarla “dal vivo”. Mi raccomando non scrivete oscenità :)

]]> http://www.cescopag.com/2008/10/progetto-step-by-step-codeigniter-lapplicazione/feed/ 1 jQuery plugin http://www.cescopag.com/2008/09/jquery-plugin/ http://www.cescopag.com/2008/09/jquery-plugin/#comments Tue, 23 Sep 2008 20:33:38 +0000 Francesco Paggin http://www.cescopag.com/?p=38 Oggi ho realizzato un piccolo plugin in jQuery che ben si presta a fare da breve introduzione allo sviluppo di plugin per il famoso framework javascript.

Quello di cui avevo bisogno era un plugin per simulare il comportamento della pseudo-classe “focus” in modo da renderla compatibile con tutti i browser. Nella fattispecie quando ci si posiziona su un campo di input, a questo viene aggiunta una classe in modo da cambiarne lo stile. In questo modo si evidenzia all’utente il campo in cui sta operando favorendo l’accessibilità e l’usabilità.

Ma veniamo al sodo. Il comando base che useremo per estendere jQuery è il metodo $.fn.nomePlugin = function() {}. Possiamo passare alla funzione i parametri per la configurazione, nel caso il nostro plugin ne abbia bisogno. La prassi è di utilizzare come parametro un singolo oggetto contenente i vari parametri, in modo da rendere il codice più leggibile ed espandibile. Nel nostro caso è sufficiente un unico parametro che sarà il nome della classe che verrà aggiunta agli elementi durante il focus. Cominciamo quindi a scrivere:

$.fn.pseudoFocus = function(params) {
    defaults = {classe: 'hasFocus'};
    options = $.extend(defaults, params);
}

Come vedete utilizzo il parametro params per i valori passati dall’utente e defaults per le impostazioni di default appunto. Tramite il comando $.extend(defaults, params) jQuery “estende” i valori di default con i nuovi valori passati al plugin. In pratica vengono modificati solo i parametri diversi da quelli di default, lasciando gli altri inalterati.

Ora che abbiamo tutte le informazioni passiamo alla funzionalità vera e propria del plugin:

$.fn.pseudoFocus = function(params) {
	//valori di default
    defaults = {classe: 'hasFocus'};
    options = $.extend(defaults, params);

    return this.each(function() {
    	var element = $(this); //opero sull'elemento che qui è individuato da "this"
    	//qui va il nostro codice...
    });

}

Come evidenziato da return this.each(function() {...}) il corpo del plugin deve ritornare un ciclo. Questo perché jQuery opera su tutti gli elementi individuati dal selettore usato, quindi nel caso in cui ce ne siano più d’uno dovremo eseguire il plugin su ciascuno di essi. All’interno del nostro ciclo quindi il singolo elemento sarà individuato da $(this). Per comodità assegnamo l’elemento ad una variabile che ho chiamato element.

Il nostro plugin, come accennato prima, deve aggiungere agli elementi la classe desiderata durante l’evento focus e rimuoverla durante l’evento blur. Aggiungiamo quindi questi metodi:

$.fn.pseudoFocus = function(params) {
	//valori di default
    defaults = {classe: 'hasFocus'};
    options = $.extend(defaults, params);

    return this.each(function() {
    	var element = $(this); //opero sull'elemento che qui è individuato da "this"
    	//qui va il nostro codice...
    	element.focus(function() {
    		element.addClass(options.classe);
    	});
    	element.blur(function() {
    		element.removeClass(options.classe);
    	});
    });
}

Come vedete all’interno dei due metodi appena citati viene aggiunta o tolta la classe grazie a element.addClass(options.classe) e element.removeClass(options.classe), i metodi di jQuery per manipolare le classi. Come vedete ho utilizzato il nostro oggetto options che contiene la classe desiderata (sia essa quella di default o quella fornita in fase di inizializzazione del plugin).

Ci rimane però un ultimo step. Come vedete abbiamo sempre utilizzato l’abbreviazione $ al posto di jQuery. Questo potrebbe generare conflitti con altre librerie che utilizzano lo stesso metodo (prototype e motools, tanto per citarne due…). Per fortuna possiamo sfruttare la sintassi di javascript per aggiungere una “schermatura” (in inglese “closure”) in modo da poter utilizzare liberamente il dollaro all’interno del plugin senza però interferire con ciò che viene usato all’esterno. Per farlo basta utilizzare la forma (function($) {…})(jQuery). Questa non fa altro che definire la funzione anonima function($) {...} ed utilizzarla subito passando come parametro jQuery. In questo modo $ diventa una variabile interna alla funzione e quindi il nostro plugin può utilizzarla liberamente.

Il plugin finito è quindi:

(function($) {
    $.fn.pseudoFocus = function(params) {
	    //valori di default
        defaults = {classe: 'hasFocus'};
        options = $.extend(defaults, params);

        return this.each(function() {
    	    var element = $(this); //opero sull'elemento che qui è individuato da "this"
            //qui va il nostro codice...
            element.focus(function() {
                element.addClass(options.classe);
            });
            element.blur(function() {
                element.removeClass(options.classe);
            });
        });
    }
})(jQuery)

Salviamo il file come jquery.pseudoFocus.js nella stessa cartella di jQuery. Per utilizzarlo dobbiamo richiamarlo nella pagina subito dopo il tag “script” che richiama jQuery. Dovremo poi eseguirlo dopo il caricamento del DOM tramite la sintassi $(document).ready(...):

<script type="text/javascript" src="jquery.js">
<script type="text/javascript" src="jquery.pseudoFocus.js">

$(document).ready(function() {
    $('input[type=text], input[type=password], textarea').pseudoFocus({classe: 'miaClasse'});
});

Come vedete vengono prelevati gli input di tipo text, password e le textarea (ma avrei potuto utilizzare un qualsiasi elemento) e viene loro assegnato l’effetto focus tramite la classe “miaClasse”. Basterà realizzare un css adeguato e il gioco sarà fatto.

Come considerazione finale c’è da dire che la pseudo-classe focus è supportata da molti browser moderni e quindi l’esecuzione del plugin non è sempre necessaria. Ci basterebbe infatti utilizzare “:focus” nel css al posto di .miaClasse ed avremmo il medesimo effetto.

Non ho voluto dilungarmi su questo ma focalizzarmi su come stendere un semplice plugin. Nell’utilizzo reale avremmo potuto controllare la versione del browser tramite $.browser e decidere di conseguenza se applicare o meno la classe.

]]> http://www.cescopag.com/2008/09/jquery-plugin/feed/ 2 XML Cross-domain con PHP http://www.cescopag.com/2008/09/xml-cross-domain-con-php/ http://www.cescopag.com/2008/09/xml-cross-domain-con-php/#comments Thu, 11 Sep 2008 22:51:41 +0000 Francesco Paggin http://www.cescopag.com/?p=32 Come potete vedere qui a destra ho implementato da poco le API di last.fm tramite i feed xml.

Nel mio post precedente ho spiegato come utilizzare i dati in Xml nel codice PHP per creare i propri widget. Questo sistema però ha un inconveniente: finché il php non ha avuto il file dal server di last.fm la pagina non viene completata e il sito non si carica. E questo vale in generale.

Tramite javascript invece i contenuti vengono aggiunti dopo e se per qualche motivo il server non rispondesse, avremmo comunque possibilità di consultare il sito. E’ per questo che ho deciso di implementare la soluzione via jQuery.

Il problema è che per questioni di sicurezza non è consentito eseguire richieste ajax tra domini diversi (come in questo caso) a meno che non si utilizzi l’apposito formato JSON (come ho fatto con le API flickr, sempre qui a fianco) – che però last.fm non mette a disposizione gratuitamente.

Ho risolto il problema con un trucchetto creando una paginetta in php che si occupa di prelevare l’xml da last.fm e stamparlo così com’è. Il vantaggio è che tramite jQuery devo fare una semplice chiamata ad un file locale, del tipo “ajax.php?url=…” evitando quindi il problema del cross-domain ed evitando di fare il parsing direttamente nella pagina principale, col rischio di bloccarla in attesa di last.fm.

Il codice che ho usato è questo:

<?php
if (isset($_GET['url'])) {
    $url = $_GET['url'];
    echo(@file_get_contents($url));
}
?>

Mentre nella chiamata ajax utilizzo l’url:

/ajax.php?url=ws.audioscrobbler.com/1.0/user/cescopag/topalbums.xml

che risulta quindi un path locale.

]]> http://www.cescopag.com/2008/09/xml-cross-domain-con-php/feed/ 1 Google Static Maps http://www.cescopag.com/2008/09/google-static-maps/ http://www.cescopag.com/2008/09/google-static-maps/#comments Thu, 04 Sep 2008 19:12:30 +0000 Francesco Paggin http://www.cescopag.com/?p=27 staticmap.gif

Molti di voi probabilmente conoscono il servizio Google Maps, l’avrete visto sicuramente in molti siti. Nella stragrande maggioranza viene usato via javascript tramite le API pubbliche o tramite iFrame.

Qualche volta però queste soluzioni non sono applicabili, ad esempio se stiamo realizzando un sito per dispositivi portatili che non supportano bene i contenuti dinamici, oppure se non vogliamo appesantire la pagina con troppe mappe dinamiche, o in generale per tutte quelle situazioni dove javascript non è la soluzione migliore.

La cosa che forse non tutti sanno è che Google mette a disposizione anche la possibilità di generare mappe statiche, che diventano quindi semplici immagini jpeg, gif o bitmap. I vantaggi possono essere moltissimi:

  • La compatibilità (praticamente qualsiasi browser o dispositivo supporta le immagini, cosa che non si può dire di javascript)
  • La velocità (anziché interrogare ogni volta i server Google per ottenere una mappa, possiamo pregenerare l’immagine, salvarla nel nostro server ed utilizzarla nelle pagine)
  • La leggerezza (se dobbiamo inserire molte piccole mappe, per esempio per una serie di indirizzi, non dovremo appesantire la pagina con tutto il javascript necessario per ogni mappa)
  • La flessibilità (il fatto di avere un’immagine “fisica” ci permette di processarla tramite le librerie fornite dai vari linguaggi, ad esempio per aggiungere bordi, effetti, sovraimpressioni etc.)

Ma veniamo all’utilizzo. Innanzitutto è necessario procurarsi una chiave API per nostro sito (http://code.google.com/apis/maps/signup.html). Una volta ottenuta possiamo comporre un URL che contiene tutte le nostre specifiche della mappa richiesta. Google provvederà a restituirci un’immagine nel formato desiderato.

Per sapere come comporre l’URL vi basta visitare i link della documentazione:

Vi anticipo che non sono supportate tutte le opzioni di Google Maps via Javascript, tuttavia è possibile indicare – oltre alla posizione e allo zoom – vari punti sulla mappa, personalizzarne gli indicatori (colore, dimensione e lettera), disegnare path, scegliere le dimensioni dell’immagine (fino ad un massimo di 640×480 pixels) e il formato (jpeg, png, gif). Praticamente tutto quello che ci può servire!

]]> http://www.cescopag.com/2008/09/google-static-maps/feed/ 0 Flickr Feeds http://www.cescopag.com/2008/08/flickr-feeds/ http://www.cescopag.com/2008/08/flickr-feeds/#comments Sun, 31 Aug 2008 07:22:28 +0000 Francesco Paggin http://www.cescopag.com/?p=26 Continua la mia caccia alla ricerca di API e feed per i servizi di social network più diffusi. Stavolta tocca a Flickr.

Anche qui il nostro obiettivo è reperire le nostre ultime foto per utilizzarle nel proprio sito come più ci aggrada.

Pur non essendo disponibili liberamente tutte le API, per i nostri scopi possiamo utilizzare i feeds pubblici forniti da Flickr.

L’indirizzo base da cui partire è il seguente: http://api.flickr.com/services/feeds/photos_public.gne a cui dovremo passare alcuni parametri.

Innanzitutto dobbiamo procurarci il nostro id. Per farlo basta andare nel proprio album e, in fondo alla pagina, trovare il link ai feed RSS. Troverete nell’indirizzo un parametro “id” che rappresenta appunto il vostro ID e che dovete segnarvi.

Una volta reperito l’id lo aggiungiamo all’indirizzo del nostro feed, che diventa quindi http://api.flickr.com/services/feeds/photos_public.gne?id=88988666@N00 (ho usato il mio ID).

Infine possiamo specificare il formato preferito. A seconda delle nostre necessità possiamo optare per il formato RSS, Atom o l’utile JSON. Flickr inoltre ci mette a disposizione vari altri formati, ad esempio — cito — “php, php_serial, csv, json, sql, yaml, cdf e altri ancora”. Ipotizzando di voler manipolare i dati tramite javascript e quindi di richiedere il formato JSON l’url diventa http://api.flickr.com/services/feeds/photos_public.gne?id=88988666@N00&format=json

Interessante poi è la possibilità di utilizzare direttamente il formato PHP e quindi avere già un array precompilato, evitando quindi di dover fare il parsing dei dati. Per farlo basta includere l’url: (se le impostazioni di sicurezza del server lo permettono)

<?php
include("http://api.flickr.com/services/feeds/photos_public.gne?id=88988666@N00&format=php");
print_r($feed); //vediamo l'array fornito da Flickr...
?>

Con PHP ≥ 5.2.0 è necessario avere la direttiva allow_url_include impostata a On: Potete verificare tramite il comando phpinfo();. In alternativa potete utilizzare il formato “php_serial” — che ci fornisce l’array “serializzato” — e il comando unserialize():

<php
$serial = file_get_contents("http://api.flickr.com/services/feeds/photos_public.gne?id=88988666@N00&format=php_serial");
$feed = unserialize($serial);
print_r($feed); //vediamo l'array fornito da Flickr
?>

Flickr mette a disposizione feeds per numerose informazioni, basterà cambiare “photos_public.gne” con l’indirizzo che ci interessa. Per approfondire l’argomento, non mi resta che lasciarvi i link della documentazione di Flickr: http://www.flickr.com/services/feeds/

]]> http://www.cescopag.com/2008/08/flickr-feeds/feed/ 1 Twitter API http://www.cescopag.com/2008/08/twitter-api/ http://www.cescopag.com/2008/08/twitter-api/#comments Sat, 23 Aug 2008 20:54:32 +0000 Francesco Paggin http://www.cescopag.com/?p=22 269E7D5A-38CA-49F0-8105-3654900F3FAB.jpgSe cinguettate su Twitter e volete inserire i messaggi nel vostro sito avete a disposizioni le completissime API. La documentazione la trovate qui ma vi do due dritte al volo…

Dovete semplicemente utilizzare l’indirizzo http://twitter.com/statuses/user_timeline/username.format, dove al posto di username metterete il vostro nome utente in Twitter e su format il formato che più vi piace!

Potete infatti scegliere tra vari formati per interfacciarvi con Twitter. Se volete gestire il tutto via semplice javascript vi basterà usare il formato .json, se avete dimestichezza con l’xml potete usare appunto il formato .xml oppure .rss o .atom se preferite i classici feed.

In aggiunta potete passare altri parametri, ad esempio ?count=NN per prelevare solo gli ultimi NN messaggi (senza questo parametro sono 20), ?since=... per prelevare i messaggi da una certa data (in formato HTML date standard), ?since_id=ID per prelevare tutti i messaggi dopo un certo ID o infine con ?page=N potete passare alle pagine successive.

Utile no? Ad esempio il mio tweeter in rss è:

http://twitter.com/statuses/user_timeline/cescopag.rss

PS: per sapere come fare il parsing di un xml con php potete leggere il post su last.fm

Se invece conoscete jQuery e non volete preoccuparvi del parsing dei dati potete usare questo semplice plugin che si occupa di tutto il necessario, html compreso: http://tweet.seaofclouds.com/

Che dire, happy twitting!

]]> http://www.cescopag.com/2008/08/twitter-api/feed/ 0