Archive for category: Tutoriales

16May 2010 21 Comments */?>

Como usar AJAX Auto Suggest V2.0

Categories: Recursos, Tutoriales - Tags: ,

AJAX Autosuggest v2

Yo personalmente las pocas veces que he implementado un Auto Suggest o caja de sugerencias en mis proyectos he utilizado AJAX Auto Suggest V2.0. No es que haya probado muchos , pero en su día este fue el que más me convencio por su facilidad de uso y de personalización.

Para utilizarlo primero debemos incluir sus archivos:

1
2
3
<link type="text/css" rel="stylesheet" href="autosuggest_inquisitor.css">
 
<script src="bsn.AutoSuggest_2.1.3.js" type="text/javascript"></script>

Crear un campo de texto y asignarle un Id:

1
2
 
<input type="text" style="width: 200px; color: rgb(204, 204, 204);" id="materiales_input" name="materiales" autocomplete="off">

Luego definimos algunas opciones y creamos el objeto autosuggest:

1
2
3
4
5
6
7
8
9
10
11
function autosuggest(){
var options = {
	script: "get_materiales.php?limit=6&",//página la cual recibirá la llamada AJAX
	varname: "materiales",// nombre de la variable que contendra el valor escrito
	json:false,//Podemos elegir JSON o XML
	maxresults:10,//Un máximo de resulados para mostrar
       timeout:9999,//numero en milisegundos antes de que se cierre la lista de valores sugeridos
	noresults:'Ingresar nuevo material a la base de datos' //valor que muestra en caso de no encontrar resultados
};
var as = new bsn.AutoSuggest('materiales_input',  options); //creamos el objeto AutoSuggest
}

Para más opciones consultar la página del autor.

Llamamos a la función cuando cargue la página:

1
<body onload="autosuggest();">

Por último creamos un archivo PHP que devuelva los resultados de búsqueda(en este caso XML) para que se muestren en las sugerencias.

get_materiales.php:

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
39
40
41
<? 
header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Fecha del pasado 
	header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); // siempre modificado
	header ("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
	header ("Pragma: no-cache"); // HTTP/1.0
 
include_once('config/db.php'); 
$conn=get_db_conn();
$input=utf8_decode(cleanQuery($_GET['materiales']));
$query='SELECT * FROM categoria_materiales WHERE nombreMaterial LIKE \'%'.$input.'%\'';
$materiales=mysql_query($query,$conn);
 
if (isset($_REQUEST['json']))
	{
		header("Content-Type: application/json" );
 
		echo "{\"results\": [";
		$arr = array();
		while ($row=mysql_fetch_assoc($materiales))
		{
 
			$arr[] = "{\"id\": \"".$row['idCatMaterial']."\", \"value\": \"".$row['nombreMaterial']."\", \"info\": \"\"}";
		}
		echo implode(", ", $arr);
		echo "]}";
	}
	else
	{
header("Content-Type: text/xml");
 
		echo "<?xml version=\"1.0\" encoding=\"ISO-8859-1\" ?><results>";
		while ($row=mysql_fetch_assoc($materiales))
		{
 
			echo "<rs id=\"".$row['idCatMaterial']."\" info=\"\">".$row['nombreMaterial']."</rs>";
		}
		echo "</results>";
 
	}	
 
	?>

Explicando get_materiales.php:


Formato XML:

1
2
3
4
5
<results>
	<rs id="1" info="Cheshire">Foobar</rs>
	<rs id="2" info="">Foobarfly</rs>
	<rs id="3" info="">Foobarnacle</rs>
</results>


Formato JSON:

1
2
3
4
5
{ results: [
	{ id: "1", value: "Foobar", info: "Cheshire" },
	{ id: "2", value: "Foobarfly", info: "" },
	{ id: "3", value: "Foobarnacle", info: "Essex" }
] }

Como anotacíon en mi caso al enviar el formulario compruebo si el material ingresado existe en la base de datos y sino existe lo agrego. Por ese motivo en noresults muestro el mensaje de “Añadir a la base de datos”.Para ello hago lo siguiente:

1
2
3
4
5
6
7
8
9
10
<?
include_once('db.php'); 
$conn=get_db_conn();
if($_POST['materiales']!=''){
    $material=cleanQuery($_POST['materiales']);
	$existe=mysql_query("SELECT * FROM materiales WHERE nombreMaterial ='$material'",$conn);
					if (mysql_num_rows($existe) == 0) mysql_query("INSERT INTO materiales (nombreMaterial) VALUES ('$material')",$conn);	  
 
}
?>

Con todo esto tendriamos el autosuggest o caja de sugerencias funcionando a la perfección.

Pueden ver un EJEMPLO FUNCIONANDO
O tambien DESCARGARSE EL CÓDIGO

Un saludo a todos, espero sus comentarios!

31Dic 2009 3 Comments */?>

Como hacer una web multilenguaje

Categories: Tutoriales - Tags:

Para detectar el idioma del navegador y hacer una web multilenguaje existen diversos métodos. Yo particularmente suelo usar el siguiente:

Primero creo el archivo lang-functions.php

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<?php
 
    /*
 
    =============================================================================
 
     Funcion: detectar_idioma_navegador() 
 
    -----------------------------------------------------------------------------
 
     Proposito: Esta funcion detecta el idioma por defecto seleccionado en el navegador del visitante.
 
     Si no se detecta un lenguaje valido, se asigna el selecionado por defecto.
 
 
 
    =============================================================================
 
    */
 
    function detectar_idioma_navegador() {
 
    global $conf;
 
 
 
    $languages = preg_replace('/(;q=\d+.\d+)/i', '', getenv('HTTP_ACCEPT_LANGUAGE'));
 
 
 
    $bol_language_detected = false;
 
 
 
    // Comprobamos si el navegador usa alguno de los idiomas que hemos predefinido.
 
    foreach ($conf['lang_enabled'] as $tmp_arr_language) {
 
    if (preg_match('/' . $tmp_arr_language . '/i', $languages)) {
 
    $tmp_str_language_detected = $tmp_arr_language;
 
    $bol_language_detected = true;
 
    break;
 
    }
 
    }
 
    // Si el navegador usa uno de los idiomas seleccionados, se devuelve el path del fichero de idioma
 
    // En caso contrario, se devuelve el path del idioma original
 
    if ($bol_language_detected) {
 
    return $tmp_str_language_detected;
 
    } else {
 
    return $conf['lang_default'];
 
    }
 
    }

Una vez creado el archivo lo incluyo de la siguiente manera:

1
2
3
4
5
6
7
8
9
10
11
12
include("languages/lang-functions.php");
 
 
		$conf['lang_default'] = 'es'; // idioma por defecto
 
		$conf['lang_enabled'] = array('es','en');
 
		$conf['lang'] = detectar_idioma_navegador();
 
		if(isset($_GET['lang'])) $conf['lang']=$_GET['lang'];// Podemos crear un link como por ej una bandera para permitir cambiar el idioma al usario
 
		require_once("languages/".$conf['lang'].".php");

Por último nos queda crear los archivos de idiomas de la siguiente forma:

es.php

1
2
3
4
<? // Spanish language file 
   setlocale(LC_ALL,'es_ES');
define("_MENSAJE", "HOLA SOY UN MENSAJE EN ESPAÑOL");
?>

en.php

1
2
3
4
<? // English language file 
   setlocale(LC_ALL,'es_ES');
define("_MENSAJE", "Hi im a English message");
?>

En la web escribiriamos echo (_MENSAJE); y según el idioma del navegador aparecerá de una forma u otra.

Espero que haya servido de ayuda

14Dic 2009 5 Comments */?>

Como limitar los caracteres de un textarea

Categories: Tutoriales - Tags:

A diferencia de los <input type=”text”> , los campos <textarea> no tienen el atributo de maxlength. Digamos que dado un campo de texto como el siguiente:

1
<textarea id="descripcion" onkeyup="contar(this);" cols="50" rows="8" name="descripcion"> </textarea><span id="letras">3000/3000 caracteres</span>

Si queremos contar y mostrar los caracteres escritos en un span, tan solo necesitamos esta pequeña función.

1
2
3
4
5
6
7
8
9
10
11
12
13
function contar(input) {
//Comprobamos que no pase de 3000 caracteres y si pasa, que borre los sobrantes
if (input.value.length >= 3000) {
input.value = input.value.substring(0,3000);
}
//alamacenamos el resto
var resto = 3000 - input.value.length;
 
//imprimimos los caracteres restantes en el span
var final=document.getElementById('letras');
final.innerHTML=resto+"/3000 caracteres";
 
}

Como pueden ver, es muy facil y tan solo bastaron unas lineas de javascript. Saludosss

30Sep 2009 10 Comments */?>

Selects anidados con AJAX y JQuery

Categories: JQuery, Tutoriales - Tags:

Los selects anidados o dependent cascading selects como dicen los ingleses , son usados hoy en día en la mayoria de formularios cuando nos registramos en una web. El ejemplo más comun es a la hora de elegir nuestro pais de procedencia , donde seguidamente carga en otro select las provincias de dicho pais. El otro día precísamente publique un listado completo de paises + provincias.

Hacer esto con JQuery es más que sencillo. Tan solo necesitaremos 3 archivos:

index.php Donde tendremos un formulario simple con sus correspondientes selects.

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
<script type="text/javascript" src="cargarProvincias.js"></script>   
<script type="text/javascript" src="../jquery.js"></script> 
<? 
   include_once ('db.php');
   $conn= get_db_conn();
 
$paises=mysql_query("SELECT * from paises",$conn);
   ?>
<form id="form" action="" method="post" class="niceform">
<dl><dt>  	  <label><span class="rojo">*</span> Pais :</label></dt>
          	  <dd>	 <select name="pais" id="pais"  onchange="cargarProvincias();" />
                                 <option value="null">Selecciona un pais</option>
           	 <? 	          while($row=mysql_fetch_assoc($paises)){
					print '<option value="'.$row['id'].'" >'.$row['pais'].'</option>';
											}?>
				</select>
                 </dd>
</dl>                                                  
 
<dl><dt>      <label><span class="rojo">*</span> Provincia :</label></dt>
           		<dd>	 <select name="provincia" id="provincia"  />
                                <option value="null">Selecciona un pais</option>
           			</select></dd>
</dl>
</form>

Un archivo encargado de buscar las provincias según el pais indicado. Primero se conectará a la base de datos, y luego devolverá los resultados.

ajax_provincias.php

1
2
3
4
5
6
7
8
9
10
11
12
13
<? 
   include_once ('db.php');
   $conn= get_db_conn();
   ?>
<? 
$conn=get_db_conn();
$pais= cleanQuery($_GET['pais']);
$provincias=mysql_query("SELECT * FROM estados WHERE relacion = '$pais'",$conn);
?><?
while( $row= mysql_fetch_assoc($provincias)){
		echo '<option value="'.$row['id'].'">'.$row['estado'].'</option>';
}
?>

Y por último el código JQuery que hará la magia de pasar el Pais seleccionado al archivo ajax_provincias.php mediante AJAX y luego cargará los valores devueltos dentro del segundo SELECT

cargarProvincias.js

1
2
3
4
5
6
7
8
9
10
11
12
13
function cargarProvincias(){
	$('#provincia').html('<option selected>Cargando</option>');
 
 	var idPais= $('#pais').val();
 
	var toLoad= 'cargar_provincias.php?pais='+ idPais ;
	$.post(toLoad,function (responseText){
 
	$('#provincia').html(responseText);
 
							});
 
}

Para terminar , le pueden echar una ojeada al DEMO ONLINE
Y descargar el código del ejemplo.

24Ago 2009 3 Comments */?>

Como añadir Google custom search a WordPress y modificar el template page

Categories: Tips de wordpress, Tutoriales, Wordpress - Tags: ,

En este tutorial les voy a explicar una de las formas para agregar google custom search a wordpress. Como saben los que me siguen hace tiempo, no siempre me gusta usar plugins ya que el template de mi wordpress esta modificado y no siempre funcionan a la perfección.

Lo primero que necesitamos es ir a la página de Adsense y crear un motor de búsqueda personalizado.

Ingresas los datos que pide el formulario:

  1. En “¿Qué quiere buscar? seleccionamos Sólo los sitios que seleccione.
  2. En “Seleccione algunos sitios debemos ingresar la URL del blog donde se va a realizar la búsqueda.
  3. En “Seleccione una edición seleccionamos Edición estándar.
  4. En “Palabras clave” podes poner algunos keywords que describar tu blog.
  5. Despues elegimos el lenguaje de tu blog.
  6. El formato o estilo de  la caja de texto. ( Más adelante voy a explicar como cambiar el estilo)
  7. Y donde abrir los resultados. En este caso elegimos nuestro propio sitio y ponemos una dirección del estilo “http://masquewordpress.com/buscar“.
  8. Elegimos solo mostrar anuncios en la parte derecha(esto a gusto de cada uno).
  9. Cambiamos el estilo con la paleta de colores.
  10. Aceptamos las Condiciones de servicio.
  11. Elegimos un nombre para el buscador y le damos a obtener el código.

Read more

16Ago 2009 2 Comments */?>

Como proteger a tus usuarios cuando te hackean la base de datos

Categories: Seguridad, Tutoriales - Tags:

Como proteger a tus usuarios cuando te hackean la base de datos? o en otras palabras ¿Como mejorar un HASH MD5 para que no sea tan facil de descifrar?

Para empezar, vamos a explicar que es un HASH MD5 . MD5 es un algoritmo de reducción criptográficos diseñados por el profesor Ronald Rivest del MIT. Hoy en dia es el sistema más utilizado en internet para almacenar las contraseñas . Por lo general cada vez que nos registramos en una web , foro, blog, etc , nuestra contraseña pasa a formar parte de una base de datos que se va a usar cada ves que queremos logear en dicha web para comprobar nuestra identidad.

El algoritmo MD5 es usado para no almacenar las contraseñas como simple cadenas de texto y así proteger la privacidad de cada uno. Imaginense lo que un administrador malicioso o descontento podría hacer con un listado de emails y sus respectivas contraseñas…

Todo programa web , foro , blog ,etc suele traer algun BUG o fallo de software que un usuario mal intensionado puede aprovechar para acceder de forma ilícita y substraer datos importantes (Por eso siempre hay que mantener las actualizaciones al día). El botín más preciado suelen ser las base de datos que cuentan con miles y miles de usuarios. Haganse una idea que cada página que nos registramos nos pide un email y por lo general la gente (me incluyo) suele usar la misma contraseña una y otra ves ( email, foros, paypal, banco, etc).

La función md5 de PHP tiene un solo sentido —>  por lo que si la contraseña es “pepe” su HASH (o cadena) en md5 es 926e27eecdbc7a18858b3798ba99bddd .

1
2
$pass=md5('pepe');
//$pass= '926e27eecdbc7a18858b3798ba99bddd'

Cuando el usuario se conecta e ingresa su clave simplemente se comprueba si el hash md5 de la contraseña ingresada concuerda con el hash md5 almacenado en la base de datos. No existe una función que devuelva de un hash md5 su valor en texto plano.
Pero lo que si existe hoy en día ,son grandes base de datos con millones de hash md5 y sus respectivos valores en texto plano. Por lo que si usamos una contraseña facil o comun es 100% seguro que aparecerá en dicha base de datos.

También existen webs con cientos de ordenadores interconectados que se dedican a crackear los hash md5 y si la contraseña no es compleja (numeros + letras + mayusculas) suelen dar con ella en cuestión de horas o minutos.

Volviendo al principio, y suponiendo que un usuario mal intencionado consiguió acceso a nuestra base de datos , aun tenemos una forma de protegernos. Es mediante la combinación de un hash md5 y una cadena de texto aleatoria, más conocida como SALT.

Para agregar salt a un hash md5 debemo seguir este simple paso:

1
2
3
$contraseña =$_POST['pass'];
$salt= 'Soy un pedazo de texto aleatorio lalalala';
$pass=md5($contraseña . $salt);

Con esa pequeña modificación ya seria imposible crackear el hash md5 siempre y cuando no dispongan del salt. Por lo que si solo tuvieron acceso a la base de datos, lo máximo que nos podrian sacar es un listado de emails, pero no sus respectivos passwords.

Espero que haya servido de ayuda, cualquier duda dejen un comentario.

15Ago 2009 4 Comments */?>

Como crear una página de lanzamiento con PHP, AJAX y JQuery – II Parte

Categories: JQuery, MySQL, PHP, Tutoriales - Tags: ,

Hoy les voy a explicar como crear un formulario AJAX para nuestra página de lanzamiento y así poder crear una base de datos con los emails de nuestros visitantes que quieren manternerse actualizados con novedades, etc.

cuenta-atras

Siguiendo la estructura básica de una web vamos a necesitar varios archivos para lo que queremos hacer:

Como ya tenemos definido el archivo db.php tal y como se explico en su día , pasamos al archivo ajax_usuarios.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
// compruena la variable $_POST 
if(isset($_POST['email']) && $_POST['email']!= ''){
     /* Conectamos a la base de datos */
     include('config/db.php');
     $conn=get_db_conn();
     /* Protejo SQL injection */
     $email = cleanQuery($_POST['email']);
     /* Realizo consulta SQL */
     $query = "INSERT INTO listado_emails (email) VALUES ('$email')";
     mysql_query($query,$conn);
    // Mensaje de respuesta
     echo $email .' fue ingresado a la base de datos correctamente!!!!!!';
} else { 
     // En caso de q la variable no este iniciado o no tenga caracteres el mensaje de respuesta es el siguiente
 echo 'Hubo un error, intenta otra ves.'; 
}
?>

El código de index.php también va a cambiar ya que agregamos nuevos plugins de JQuery y el formulario para ingresar emails

index.php

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Timersys</title>
<link href="css/estilo.css" rel="stylesheet" type="text/css" />
<link href="css/jqtransform.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="js/jquery.epiclock.min.js"></script>
<script type="text/javascript" src="js/jquery.corners.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript" src="js/jquery.jqtransform.js"></script>
 
<script type="text/javascript">
$(document).ready(function(){
	// Cuenta atras					   
	   jQuery('#text').epiclock({mode: EC_COUNTDOWN, format: 'V{<sup>dias</sup>} x{<sup>horas</sup>} i{<sup>minutos</sup>} s{<sup>segundos</sup>}', target: 'January 1, 2012 00:00:00'}).clocks(EC_RUN);  
 
	   //Esquinas redondeadas
	   $('.rounded').corners('transparent');
 
	   //Transformar el formulario
	   $("form.jqtransform").jqTransform();
 
 
	   // definimos las opciones del plugin AJAX FORM
            var opciones= {
 
                               success: mostrarRespuesta //funcion que se ejecuta una vez enviado el formulario
            };
             //asignamos el plugin ajaxForm al formulario email_list y le pasamos las opciones
            $('#email_list').ajaxForm(opciones) ;
 
             //lugar donde defino las funciones que utilizo dentro de "opciones"
 
             function mostrarRespuesta (responseText){
                          $("#update").fadeOut("slow"); // Hago desaparecer el formulario
                          $("#succes").fadeIn("slow").html(responseText); //muestro mensaje 
             };
 
 
		});
</script> 
 
</head>
<body>
 
<div id="header">
  <h3>Como crear una P&aacute;gina de lanzamiento. M&aacute;s tutoriales en: <a href="http://masquewordpress.com">http://masquewordpress.com</a> </h3>
</div>
<div id="wrapper">
	<div id="cuadro2" class="rounded">
	<div id="text" class="count_down"></div>
	</div>
    <div id="update">
 
    <form id="email_list" class="jqtransform" action="ajax_usuarios.php" method="post">
    <input type="text" class="input_text" name="email" value="Ingresa tu email para recibir actualizaciones" onclick="this.select();" />
    <input type="submit" value="ENVIAR"  class="input_button" />
     </form>
	</div>
    <div id="succes"></div>
</div>
</body>
</html>

Con esto y un poco de código CSS ya tendriamos nuestra página de lanzamiento lista , y ademas podriamos juntar una base de datos con emails de los usuarios para poder enviarles actualizaciones.

Como siempre pueden ver el EJEMPLO TERMINADO

Y descargar el código fuente .( Recuerden de editar el archivo db.php con los datos de su propia base de datos y crear las tablas necesarias)