Posteado por: irodriguezm | diciembre 25, 2011

Disponibilidad de usuarios en PHP


Hola amigos, tengo un video donde se ve lo que se puede realizar con php ajax para comprobar la existencia de un usuario, ahora vamos a explicar en detalle como hacerlo, primero el video

Nota: este codigo lo encontre en internet, le modifique algunos puntos, asi que va el credito a quien realizo gran parte de este codigo.
vamos a lo nuestro, primero creamos una tabla en nuestra base de datos con nombre usuarios y dos campos id y usuario tenemos nuestro formulario.php con un campo tipo text y nombre txt_username, este es la pag. donde se muestra al usuario el campo a ingresar y donde se obtiene la respuesta si el nombre de usuario esta disponible o no, el cod. completo seria:

<!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>
<script src="javascript/ajaxformulario.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
 			.ok{
	background-color:#99FF99;
	font-family: Calibri;
	font-weight: bold;
	color: #999999;
	font-size:12px;
}
.error{
	background-color:#FFAAAA;
	font-family: Calibri;
	font-weight: bold;
	color: #999999;
	font-size:12px;
}
.form_alert_msg {
        font-size: 14px;
        font-weight: Calibri;
        color: #006666;
        display:inline;
        background-color: #FFFFCC;
        padding: 2px 5px;
        margin-left: 5px;
        border-top: 1px solid #D4E0EE;
        border-right: 1px solid #D4E0EE;
        border-bottom: 1px solid #D4E0EE;
        border-left: 1px solid #D4E0EE;
}
    </style>
</head>
<body>
<body>
   <div id="estadoUser"></div>
  <form name="myform" id="myform" method="post" onSubmit="return checkForm(this);" action="">
    
    <div><label >Usuario:</label>
      <input name="txt_username" type="text" id="txt_username" onblur="checkField(this);" onkeyup="javascript:ComprobarUsuario('./comprobarUser.php','estadoUser')" size="12" maxlength="12" />
    </div>   
  </form>
	
</body>
</html>

Podemos observar que se agregar un archivo javascript y que además se asigna mediante css un color cuando esta ok y otro cuando hay error (verde y rojo en nuestro caso)

primero hacemos la conexion a nuestra base de datos, dejo el ejemplo y los datos que deberian modificar conexion.php

<?php
//Configuracion de la conexion a base de datos
$bd_host = "localhost";// definir host 
$bd_usuario = "root";  // definir usuario
$bd_password = ""; // definir password
$bd_base = "prueba";  // definir base de datos
$con = mysql_connect($bd_host, $bd_usuario, $bd_password); 
mysql_select_db($bd_base, $con); 
?>

ahora veremos el codig. del archivo comprobarUser.php, este archivo es el que se conecta a nuestra base de datos y comprueba la existencia o no del usuario mostrando un msje en cada caso

<?php 
require('conexion.php');

$colname_rs_user = "-1";
if (isset($_POST['username'])) {
  $colname_rs_user = $_POST['username'];
}
//mysql_select_db($database_conn, $conn);
$query_rs_user = sprintf("SELECT * FROM usuarios WHERE usuario = '%s'",$colname_rs_user);
$rs_user = mysql_query($query_rs_user, $con) or die(mysql_error());
$row_rs_user = mysql_fetch_assoc($rs_user);
$totalRows_rs_user = mysql_num_rows($rs_user);
if($totalRows_rs_user == 0)
{
	echo '<div align="center" class="ok">Nombre de usuario disponible';
}
else{
	echo '<div align="center" class="error">Nombre de usuario Ocupado';
}
?>
<?php 
mysql_free_result($rs_user);
?>

ahora creamos el directorio javascript, con el archivo ajaxformulario.js

function getXMLHttpRequest(){
	var xmlhttp=false;
	try {
		xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (e) {
		try {
		   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (E) {
			xmlhttp = false;
  		}
	}

	if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
		xmlhttp = new XMLHttpRequest();
	}
	return xmlhttp;
}

function TraerPagina(datos,contenedor){
	divResultado = document.getElementById(contenedor);
	ajax=getXMLHttpRequest();
	ajax.open("GET", datos);
	ajax.onreadystatechange=function(){
	if(ajax.readyState==1)
		{divLoader.innerHTML='<br/><br/><br/><center><img widht="50" height="50" src="./bigrotation2.gif"/><br/>Cargando...</center>'}
		else{
			if(ajax.readyState==4){divResultado.innerHTML=ajax.responseText;divLoader.innerHTML=''}
			}
		}
	ajax.send(null)
}

function ComprobarUsuario(datos,contenedor){
	divResultado = document.getElementById(contenedor);
	
	username_=document.myform.txt_username.value;
	
	ajax=getXMLHttpRequest();
	ajax.open("POST", datos);
	ajax.onreadystatechange=function(){
	if(ajax.readyState==1)
		{divResultado.innerHTML='<br/><br/><br/><center><img widht="50" height="50" src="../img/bigrotation2.gif"/><br/>Cargando...</center>'}
		else{
			if(ajax.readyState==4)
			{divResultado.innerHTML=ajax.responseText;}
			}
		}
	ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	//enviando los valores
	ajax.send("username="+username_);
}

Bueno eso seria, ahora llenen la tabla con algún usuario y prueban que tal funciona

saludos a todos


Responses

  1. excelente aporte

  2. es muy bueno este documento, gracias por compartir tu informacion.

  3. Muy bueno , pero tengo algunas consultas ¿ como valido que el user no pase en blanco? y ¿ como vuelvo el foco al user?

  4. excelente aporte funcionando a 100%


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Categorías

A %d blogueros les gusta esto: