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:

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:

Oggi vedremo come creare il "motore" su cui si basa la validazione del nostro form; per prima cosa controlleremo se l’utente ha inserito tutti i dati, poi se le password inserite combaciano ed infine se l’indirizzo e-mail è valido.

<?php
    include(‘functions.php’);

    if ($_POST['Nome']==” || strlen($_POST['Nome'])<3)
    {
        $errors[] = ‘Campo obbligatorio, il nome deve contenere almeno 3 caratteri’;
    }

    if ($_POST['Cognome']==” || strlen($_POST['Cognome'])<3)
    {
        $errors[] = ‘Campo obbligatorio, il cognome deve contenere almeno 3 caratteri’;
    }

    if ($_POST['Username']==” || alpha_numeric($_POST['Username'])==FALSE)
    {
        $errors[] = ‘Username obbligatorio, deve contenere valori alfanumerici’;
    }

    if ($_POST['Password']==” || alpha_numeric($_POST['Password'])==FALSE)
    {
        $errors[] = ‘Password obbligatoria, deve contenere valori alfanumerici’;
    }

    if ($_POST['Password']!=$_POST['re_Password'])
    {
        $errors[] = ‘Le due password non corrispondono’;
    }

    if (valid_email($_POST['Email'])==FALSE)
    {
        $errors[] = ‘Per piacere inserisci un indirizzo valido’;
    }

    if(is_array($errors))
    {
        echo ‘<p class="error"><b>Si sono verificati i seguenti errori</b></p>’;
        while (list($key,$value) = each($errors))
        {

            echo ‘<span class="error">’.$value.’</span><br />’;
        }
    }
    else {
        //fai qualcosa,
        echo ‘<p><b>OK!</b></p>’;
        echo ‘<span>La tua registrazione è avvenuta con successo!</span>’;
    }

?>

Il codice proposto include un file "functions.php" che contiene la definizione delle funzioni "alphanumeric" e "valid_email" utili alla validazione. Successivamente controlliamo che nome e cognome siano stringhe di almeno 3 caratteri, in caso contrario memorizziamo l’errore in un array chiamato "errors", controlliamo quindi che lo username e la password siano alfanumeriche e le 2 password combacino, infine controlliamo che l’e-mail sia valida mettendo la descrizione degli errori nell’array questo perchè ci potrebbero essere più errori contemporaneamente e quindi alla fine conviene mostrare il contenuto dell’array tramite un ciclo while, altrimenti se l’array non è stato creato (e quindi non ci sono errori) mostriamo un messaggio che indica all’utente l’avvenuta registrazione.

Come detto vengono utilizzate 2 funzioni per la validazione di utente, password ed email, eccovi il codice:

<?php

    function alpha_numeric($str)
    {
        return ( ! preg_match("/^([-a-z0-9])+$/i", $str)) ? FALSE : TRUE;
    }

    function valid_email($str)
    {
        return ( ! preg_match("/^([a-z0-9\+_\-]+)(\.[a-z0-9\+_\-]+)*@([a-z0-9\-]+\.)+[a-z]{2,6}$/ix", $str)) ? FALSE : TRUE;
    }

?>

semplicemente valutano la stringa che viene loro passata tramite con una espressione regolare e restituiscono il relativo valore di verità.

Per un approfondimento sulle espressioni regolari in PHP fate riferimento a questi articoli qui e qui.

La prossima volta metteremo tutto insieme e vedremo all’opera quanto creato fin’ora, vi aspetto!

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

Quello che faremo però sarà un semplice sistema che sfruttando le API di HostIp ci fornirà le informazioni riguardo la nazione e la città dei visitatori del nostro sito web.

Gli ingredienti necessari sono:

• PHP
• Web server per provare il nostro script
• Le API di HostIp reperibili qui
• Un editor di testo
• Sale e pepe quanto basta

Cominciamo da HostIp, è un progetto nato al fine di geo-localizzare gli ip il cui database è disponibili al pubblico tramite l’utilizzo di semplici API.

Vogliamo quindi realizzare un script che ci indichi la provenienza del nostro visitatore, quindi per prima cosa ci serve conoscere il suo ip, niente di più semplice
$ip=$_SERVER['REMOTE_ADDR'];
poi se avete dato un occhiata alle API avrete notato come HostIp costruisce un URL del tipo http://api.hostip.info/get_html.php?ip= indirizzo del client.
Quindi costruiamo l’URL e la mettiamo in una variabile
$url = "http://www.hostip.info/api/get.html?ip=".$ip;
vi sembrerà strano ma il più è fatto, ora ci basta acquisire il contenuto della nostra URL in un vettore i cui elementi sono una riga del file tramite la funzione file (che fantasia)
$result = file($url);
e adesso stampiamo il tutto con un ciclo
foreach($result as $line_num=>$line){
echo ($line."<br/>");
}
Questo potrebbe già bastare in quanto mostra Nazione e Città del client (anche se a volte il risultato non è proprio preciso) ma possiamo aggiungere qualcosina, come ad esempio visualizzare la bandiera della nazione.
HostIp fornisce un semplice meccanismo per far questo sempre sottoforma di un URL costruita ad-hoc del tipo http://api.hostip.info/flag.php?ip= indirizzo del visitatore.
Quindi creiamo un immagine con il <img> e all’attributo src diamo l’URL con l’ip che ci interessa

echo("<A href=\"http://www.hostip.info\">");
echo("<IMG src=\"http://api.hostip.info/flag.php?ip=".$ip."ALT=\"IP Address Lookup\">");
echo("</A>");


Ed ecco qui un esempio.
Davvero semplice, nel prossimo tutorial spero di poter mostrare come ottenere anche longitudine e latitudine per visualizzare la posizione all’interno di Google Maps, quindi alla prossima!

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