In pratica si tratta di mostrare su una propria pagina web lo status di un visitatore.

Tramite javascript si effettua una chiamata alle API di Twitter, è quindi possibile ottenere sul client i dati relativi all’utente.

L’utilità di questo sta, ad esempio, nella creazione di widget del tipo Twit-this, che permettono all’utente di twittare la pagina su cui sta navigando.

La funzione richiamata è user_timeline e quindi si ha una cosa del genere

<script type="text/javascript"
src="'http://twitter.com/statuses/user_timeline.json&amp;count=1&callback=TwitterData">;
</script>

Quindi la funzione richiamata in callback è TwitterData

function TwitterData(data){
 document.write(data[0].text)
}

Un esempio di quello che si può fare è questo.

© slacko for slacko.org, 2009. | Permalink | Nessun commento | Add to del.icio.us
Post tags: API, hack, Javascript, twitter

Iniziamo con lo scheletro della pagina HTML. Molto semplice, due div e una textbox.

1
2
3
4
5
6
7
8
9

<div>
<form>
<div>
				Scrivi le prime lettere del paese:
 
				<input id="inputString" onkeyup="lookup(this.value);" size="30" type="text" /></div>
<div id="suggestions" class="suggestionsBox" style="display: none;">
				<img style="position: relative; top: -12px; left: 30px;" src="upArrow.png" alt="upArrow" /></div>
</form></div>

Vediamo ora la parte javascript.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<script type="text/javascript" src="jquery-1.2.1.pack.js"></script>
<script type="text/javascript">
	function lookup(inputString) {
		if(inputString.length == 0) {
			// se non è stato inserito nessun carattere nascondiamo il div che contiene i suggerimenti
			$('#suggestions').hide();
		} else {
			$.post("rpc.php", {queryString: ""+inputString+""}, function(data){
				if(data.length >0) {
					$('#suggestions').show();
					$('#autoSuggestionsList').html(data);
				}
			});
		}
	} // lookup dei suggerimenti
 
	function fill(thisValue) {
	//riempi la textbox con il risultato e poi nascondi i suggerimenti
		$('#inputString').val(thisValue);
		setTimeout("$('#suggestions').hide();", 200);
	}
</script>

In pratica il compito della prima funzione è quello di raccogliere l’input della textbox e passarlo (in POST) allo script PHP utilizzando la chiamata $.post di jQuery.
Tale funzione prende 3 parametri: l’url a cui postare i dati, il dato da postare e una funzione di callback da eseguire di ritorno.
Infatti se la funzione di callback ritorna qualcosa solo allora è mostrata la lista dei suggerimenti

Infine una funzione fill che riempie la textbox con il suggerimento selezionato.

Lo script PHP è ampiamente commentato ed in pratica consiste in una funzione che prende in argomento la stringa presente in POST, esegue la query al database ritornando i suggerimenti disponibili.

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
32
33
34
35
36
37
38

< ?php
 
	// mysqli('url', 'user', 'pass', 'database');
	$db = new mysqli('localhost', 'root' ,'', 'prove');
 
	if(!$db) {
		echo 'ERRORE: Impossibile connettersi al DB.';
	} else {
		// controllo se c'è qualche stringa con cui effettuare la query
		if(isset($_POST['queryString'])) {
			$queryString = $db->real_escape_string($_POST['queryString']);
 
			//se la stringa è più lunga di 0...
			if(strlen($queryString) >0) {
				// usiamo LIKE con il carattere jolly % alla fine... 
				//quind se il valore di querystring è "it"
				// allora verranno cercati i valori che iniziano con "it" e sono seguiti da altri n caratteri
 
				$query = $db->query("SELECT value FROM countries WHERE value LIKE '$queryString%' LIMIT 10");
				if($query) {
					// finquando ho dei risultati li piazzo in un oggetto
					while ($result = $query ->fetch_object()) {
						// formattiamo i risultati mettendoli in una lista
						// quindi riempiamo la textbox con la funzione Fill
 
	         			echo '<li onClick="fill(\''.$result->value.'\');">'.$result->value.'</li>';
	         		}
				} else {
					echo 'ERRORE: C\'è stato un problema con la query.';
				}
			} else {
 
			} 
		} else {
			echo 'Attenzione, non permettere l\'accesso diretto a questo script';
		}
	}
?>

Alla fine ho condito il tutto con un po’ di CSS3 (giusto per vedere l’effetto che fa…)
L’esempio funzionante lo trovate qui

Per qualsiasi problema commentate pure.

© slacko for slacko.org, 2008. | Permalink | 4 commenti | Add to del.icio.us
Post tags:

Vediamo quindi brevemente come comportarci in questo caso.

var http = new XMLHttpRequest();
var url = "get_data.php";
var params = "lorem=ipsum&name=binny";
http.open("POST", url, true);

con POST creiamo l’oggetto XMLHttpRequest e l’URL senza parametri.

http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");

Settiamo poi gli headers http insieme alla richiesta in modo che i dati vengano siano interpretati come inviati da un form, e magari diamo anche la lunghezza dei parametri che invieremo.

Scriviamo un handler per l’evento ready state

http.onreadystatechange = function() { 
	if(http.readyState == 4 && http.status == 200) {
		// fai qualcosa qui quando è generato l'evento
	}
}

Infine inviamo i parametri insieme alla richiesta. L’url, infatti, verrà caricata solo in seguito all’esecuzione di questa riga. Con il metodo GET invece i parametri sono inviati, dalla funzione send, con valore null poichè contenuti direttamente nell’url.

http.send(params);

Spero di essere stato chiaro e diretto, se c’è qualcosa che non vi quadra chiedete pure nei commenti.

© slacko for slacko.org, 2008. | Permalink | 1 commento | Add to del.icio.us
Post tags:

Abbiamo quindi bisogno di:

• Un form HTML
• Un javascript che esegua una animazione, chiamato al submit del form.
• Uno script PHP che esegua l’upload vero e proprio
• Un iframe invisibile nella stessa pagina del form

Il form HTML è davvero semplice, c’è un campo per la scelta del file e un bottone.
Da notare il parametro enctype che indica il tipo di codifica.

<form action="upload.php" enctype="multipart/form-data" method="post"> File: <input name="myfile" type="file" />
<input name="submitBtn" type="submit" value="Upload" />
</form>

A questa pagina c’è da aggiungere un blocco che mostrerà l’animazione durante l’upload e per dare la conferma all’utente che l’operazione è riuscita. Inoltre, come già detto, aggiungiamo un iframe invisibie da usare come target del form.

<p id="f1_upload_process">Loading...
<img src="loader.gif" alt="" /></p>
<p id="result"></p>
<form action="upload.php" enctype="multipart/form-data" method="post"> File: <input name="myfile" type="file" />
<input name="submitBtn" type="submit" value="Upload" />
</form>
<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>

Scriviamo adesso la semplice funzione javascript che rende il blocco contenente l’animazione visibile sulla pagina.

      function startUpload(){
      document.getElementById('f1_upload_process').style.visibility = 'visible';
      return true;
      }

E di riflesso scriviamo anche la funzione che verrà chiamata al termine del processo per mostrare un messaggio all’utente e fermare l’animazione.

      function stopUpload(success){
      var result = '';
      if (success == 1){
      document.getElementById('result').innerHTML =
      '<span class="msg">The file was uploaded successfully!< \/span><br /><br />';
      }
      else {
      document.getElementById('result').innerHTML =
      '<span class="emsg">There was an error during file upload!< \/span><br /><br />';
      }
      document.getElementById('f1_upload_process').style.visibility = 'hidden';
      return true;
      }
</span></span>

Visto che ci siamo diamo un po’ di stile al nostro form con qualche regola CSS

      #f1_upload_process{
      z-index:100;
      position:absolute;
      visibility:hidden;
      text-align:center;
      width:400px;
      margin:0px;
      padding:0px;
      background-color:#fff;
      border:1px solid #ccc;
      }
 
      form{
      text-align:center;
      width:390px;
      margin:0px;
      padding:5px;
      background-color:#fff;
      border:1px solid #ccc;
      }

Ora passiamo alla parte server.
Dovrebbe essere abbastanza semplice da capire, spieghiamo comunque qualcosa. Prima di tutto andiamo a settare il percorso di destinazione del file. Poi introduciamo una variabile che ci conterrà l’eventuale errore in fase di upload del file.
Procediamo quindi a spostare il file dalla directory temporanea alla sua destinazione finale.
Il codice PHP dovrebbe essere una cosa del genere

< ?php
$destination_path = getcwd().DIRECTORY_SEPARATOR;
$result = 0;
$target_path = $destination_path . basename( $_FILES['myfile']['name']);
if(@move_uploaded_file($_FILES['myfile']['tmp_name'], $target_path)) {
$result = 1;
}
sleep(1);
?>

Come visto nelle proprietà del form il codice PHP verrà eseguito all’interno dell’iframe nascosto. A questo punto non ci rimane che aggiungere al suo interno il codice js che chiamerà la funzione scritta precedentemente e che notificherà l’utente se l’upload è andato a buone fine o meno

      <script language="javascript" type="text/javascript">
      window.top.window.stopUpload(< ?php echo $result; ?>);
      </script>

Cosa vi avevo detto? Facile e veloce.
Se vi siete persi qualche passaggio o non vi è del tutto chiaro il funzionamento, se volete farmi i complimenti o mandarmi a cag*re, se volete invitarmi a cena fuori fatelo pure nei commenti.

© slacko for slacko.org, 2008. | Permalink | 8 commenti | Add to del.icio.us
Post tags:

Per prima cosa creiamo un file index.php, dentro ci mettiamo prima la chiamata alla libreria mootools, poi il codice js della prima lezione.

Fatto questo possiamo mettere su un bel form html condito con un po di CSS per renderlo più attraente, l’importate è che vi ricordiate di mettere nel attributo target del tag form il valore register.php, cioè il nome della pagina creata nella seconda lezione.

Il risultato lo potete vedere qui!

Per qualsiasi informazione, dubbio, chiarimento e affini non esitate a commentare.

Technorati Tag: javascript , php , mootols , tutorial

© slacko for slacko.org, 2007. | Permalink | 1 commento | Add to del.icio.us
Post tags: