[Tutorial] - Login con ajax . Mysql || Php con clases || Ajax

[Hadess_inf]

Introduccion : Hola a todos, pues es domingo, y para buena suerte mia [sarcasmo] se quemo la fuente de mi PC, mi Tv no esta operativo, mi movil esta descargando y no tengo dinero ni para ir a ver una buena pelicula (Transformers II - segun los trailers esta buenisima) felizmente nadie esta usando la otra Pc (despechada por mi xD .. y que no corre ni el warcraft III), como ven no tengo nada que hacer, me puse a pensar ... meditar .... y me anime a escribir este pequeño tutorial, la idea es usar clases para trabajar con una BD (todo con php y mysql). Pues manos a la obra.

En esta ocacion haremos un login con ajax. A continuacion los detalles. Base de Datos, crea la BD sistema y en ella ejecutar el siguiente script:

Código (php) [Seleccionar] Expandir

CREATE TABLE `personal` (
 `idpersonal` varchar(8) NOT NULL,
 `nombres` varchar(45) NOT NULL,
 `apellidos` varchar(45) NOT NULL,
 `clave` varchar(45) NOT NULL,
 `fecnac` date NOT NULL,
 `fecreg` date NOT NULL,
 `imagen` text,
 `sexo` char(1) default NULL,
 `estado` char(1) default NULL,
 PRIMARY KEY  (`idpersonal`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;


Insertar registros a discrecion xD

Código (php) [Seleccionar] Expandir

INSERT INTO `personal` VALUES ('41338110', 'Juar Carlos', 'Malca Pereda', 'clave1' ,'1982-02-23', '2009-04-28', NULL, '0', '1');
INSERT INTO `personal` VALUES ('41352619', 'Yessenia Clariza', 'Rodas Correo', 'clave2' , '1989-01-09', '2009-04-28', NULL, '1', '1');
INSERT INTO `personal` VALUES ('42751388', 'Pedro Ricardo', 'Mariano Jimenz', 'clave3' , '1984-12-20', '2009-04-28', NULL, '1', '1');
* En este caso por ser un ejemplo no se usar el md5 (Es recomendable usarlo)

Ahora la estructura de la pagina sera la siguiente:

Appserver/
    |--- www/
         |--- web/
         |     |--- ajax/ (Js ^^', alquien se dio cuenta?)
         |     |     |--- home.js (ajax)
         |     |--- clases/ (clases php ^^')
         |     |     |--- mysql.php (clase de conexion)
         |     |     |--- personal.php (clase para personal)
         |     |     |--- ingreso.php (clase funciones)
         |     |--- imagenes/ (imagenes)
         |     |     |--- loader.gif (icono cargando)
         |     |--- index.php (pagina de inicio)
         

Imagen loader.gif

Empezemos con la clase para la conexion:
www/web/clases/mysql.php

Código (php) [Seleccionar] Expandir

<?
//Clase Mysql, se usa para la conexion a la Base de Datos
class Mysql
{
var $conexion;
//inicia conexion con el servidor
function conecta()
{
if(!isset($this->conexion))
{
$ser = "localhost"; //servidor
$usr = "root"; //usuario
$pwd = "root"; //password
$bbd = "sistema"; //base de datos
$this->conexion = (mysql_connect($ser,$usr,$pwd)) or die(mysql_error());
mysql_select_db($bbd,$this->conexion) or die(mysql_error());
}
}

//realiza la consulta recepcionada
function consulta($consulta)
{
$resultado = mysql_query($consulta,$this->conexion);
if(!$resultado)
{
echo 'MySql Error: '.mysql_error();
exit;
}
return $resultado;
}

//devuelve un vector de la consulta
function vector($consulta)
{
return mysql_fetch_array($consulta);  
   }
   
//retorna el numero de registros para la consulta
function filas($consulta)
{
return mysql_num_rows($consulta);  
}  
}
?>

Clase para verificacion de personal:
www/web/clases/personal.php

Código (php) [Seleccionar] Expandir

<?
class Persona
{
var $p_idpersona;
var $p_nombre;
var $p_apellido;
var $p_persona;
var $p_imagen;
var $p_sexo;
var $p_fecnac;
var $p_estado;
var $p_existe;

//function que define si el idpersona existe
function set_idpersona($codigo,$clave)
{
include("mysql.php");
$sql = "select * from personal where idpersonal='$codigo' and clave='$clave'";
$con = new Mysql();
$con->conecta();
$res = $con->consulta($sql);
$num = $con->filas($res);
if($num>0)
{
$row = $con->vector($res);
$this->p_idpersona=$codigo;
$this->p_nombre=$row['nombres'];
$this->p_apellido=$row['apellidos'];
$this->p_imagen=$row['imagen'];
$this->p_sexo=$row['sexo'];
$this->p_estado=$row['estado'];
$this->p_fecnac=$row['fecnac'];
$this->p_persona=$this->p_apellido.', '.$this->p_nombre;
$this->p_existe=1;
}
else
{
$this->p_existe=0;
}
}

//Retorna true si el usuario existe, caso contrario false
function get_existe()
{
return $this->p_existe;
}

//Retorna el codigo de la persona
function get_idpersona()
{
return $this->p_idpersona;
}

//Retorna el nombre de la persona
function get_nombre()
{
return $this->p_nombre;
}

//Retorna el apellido de la persona
function get_apellido()
{
return $this->p_apellido;
}

//Retorna el sexo de la persona
function get_sexo()
{
return $this->p_sexo;
}

//Retorna la imagen de la persona
function get_imagen()
{
return $this->p_imagen;
}

//Retorna la fecha de nacimiento de la persona
function get_fecnac()
{
return $this->p_fecnac;
}

//Retorna el estado de la persona
function get_estado()
{
return $this->p_estado;
}

//Retorna el nombre completo de la persona
function get_persona()
{
return $this->p_persona;
}
}
?>

Clase para el login, es llamado por la funcion ajax en  ‫javascript:
www/web/clases/ingreso.php

Código (php) [Seleccionar] Expandir

<?
include("persona.php");
$usuario = $_REQUEST['usu'];
$clave = $_REQUEST['pwd'];
$usu = new Persona();
$usu->set_idpersona($usuario,$clave);
$est = $usu->get_existe();
if($est==1){
?>

Llamar a funcion  ‫javascript que llame a la pagina principal.
APORTE PARA LA COMUNIDAD FORO.ELHACKER.NET
saludos.

<? }else{ ?>

Usuario <input type="text" id="usr" name="usr" maxlength="8" /><br>
clave <input type="text" id="pwd" name="pwd" maxlength="25" /><br>
<input type="button" value="Ingresar" onclick="verifica();"/><br><br>
<center>Datos incorrectos</center>

<? } ?>

Ajax, se llama desde el index:
www/web/ajax/home.js

Código ( ‫javascript) [Seleccionar] Expandir

//Funcion para ajax
function NewAjax()
{
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;
}
//Funcion para el login
function verifica()
{
var usu = document.getElementById('usr');
       var pwd = document.getElementById('pwd');
var div = document.getElementById('cuerpo');
var ajax = NewAjax();
ajax.open("POST", 'clases/ingreso.php?usu='+usu.value+'&pwd='+pwd.value,true);
ajax.onreadystatechange=function()
{
if (ajax.readyState==4)
{
var ok = ajax.responseText;
div.innerHTML = ok;
}
else
{
div.innerHTML = "<img src='imagenes/loader.gif'><br><br><font color='#666666'>Autentificando<br>Espere un momento por favor.</font>";
}
}
ajax.send(null);
}

Pagina index, donde se efectura el login
www/web/index.php

Código (html4strict) [Seleccionar] Expandir

<!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=utf-8" />
<title>Ingreso : Aporte para foro.elhacker.net</title>
<script src="ajax/home.js" language=" ‫javascript" type="text/ ‫javascript"></script>
</head>
<body>

<div id='cuerpo' name='cuerpo'>

Usuario <input type="text" id="usr" name="usr" maxlength="8" /><br>
clave <input type="text" id="pwd" name="pwd" maxlength="25" /><br>
<input type="button" value="Ingresar" onclick="verifica();"/>

</div>

</body>
</html>

Archivo a descargar: Click
El file no contiene la Bd (esta se crea independientemente, ver inicio del hilo)

Sin mas que decirles me despido (en realidad ahora estoy mas aburrido que cuando comence a tipear ^^' ... ), espero que esto le sea util a alquien, como siempre tambien decir: si encuentran algun error no duden en avisarme y lo corrijo.

Cuidense y estamos viendonos pronto.
Hadess_inf

[bleyarkngel]

ahora mismo lo pruebo y a ver tal esta !   

[HardieVon]

JEJE yo fuí al pre-estreno en sala IMAX 
que por cierto, muy buena eh.

a si man te digo, la clase no cumple con un poliformismo idoneo, es demasiado especifica, en php tenemos la ventaja de crear funciones que dejan atras los objetos para realizar acciones suamante sencillas, bueno ya que si estas acostumbrado a algun estandar como el de java ps que le hacemos

[^Cloud^]

El polimorfismo es el mismo se aplique donde se aplique y es la capacidad de los métodos de tomar otros valores diferentes dependiendo de donde se implementen.

En este caso y como es un ejemplo, no es necesario el uso de el polimorfismo de los objetos.

Si estuviéramos en el caso que tenemos que programar el driver de conexión a base de datos en modo factoría si que podríamos aplicar el polimorfismo de los objetos creando una interfaz o una clase abstracta donde definamos los métodos que luego se implementarán en distintos objetos y de diferentes formas para darnos acceso a diferentes bases de datos.

Yo creo que te refieres a los setters y getters que se suelen usar en java. En PHP se llaman métodos mágicos y se usan de esta manera:

public function __set($key,$val) {
  $this->$key=$val;
}

public function __get($key) {
  return $this->$key;
}

Pero esto no tiene nada que ver con el poliformismo de los objetos.

Bueno, para ser un ejemplo esta bastante bien aunque para mi gusto demasiado "aparatoso". Yo optaría primero a implementar el login de forma normal (con redirección y recarga de pagina) y después implementaría la funcionalidad ajax a parte y como complemento en el caso que sea viable para el cliente poder utilizarlo.


Un saludo,

[HardieVon]

^Cloud^

estaba pensansdo, que opinas si los campos se extrajeran con un puntero, de una forma que si devuelve una consulta mas campos se puedan extraer desde $this->n_campo

haha siento deviarme pero pido opinion de una implementación que pienso hacer.

PD: esto ya es de sql

[^Cloud^]

En realidad los punteros no existen en PHP. Existen las referencias. Esto te va a permitir acceder al contenido de una variable con diferentes nombres. Se podría decir que son como enlaces de directorios.

function test_reference (&$var) {
  $var = ($var + 5);
}

$z = 10;
test_reference($z);

var_dump($z);


Este ejemplo va a devolver 15 como valor de $z. Al usar una variable por referencia lo que estamos haciendo es acceder al valor de $z y sumarle 5. De esta manera, aunque nuestra función no devuelva ningún valor estamos cambiando el valor de $z mediante el acceso a su referencia.

Todo esto está mejor explicado en la documentación de php y siempre es bueno que uno saque sus propias conclusiones.

Un saludo,

[[u]nsigned]

Muy buen tuto, me viene al pelo con lo que estoy por hacer. 

* En este caso por ser un ejemplo no se usar el md5 (Es recomendable usarlo)

Creo que se te escapo una 'R' amigo...xD

Saludos

[Pazador]

quiero estudiar tu script pero no puedo descargarlo de rapidshare porque no tengo premium, me muestra esto:

Error

This file is neither allocated to a Premium Account, or a Collector's Account, and can therefore only be downloaded 10 times.

This limit is reached.

To download this file, the uploader either needs to transfer this file into his/her Collector's Account, or upload the file again. The file can later be moved to a Collector's Account. The uploader just needs to click the delete link of the file to get further information.

podrias subirlo a mediafire u otro servidor libre??  

[дٳŦ٭]

El md5 en php o mysql es md5($string) y no es reversible

Saludos.

[lokotronX]

Hola quisiera saber si este tuto le funciono a alguien, porque yo lo copie ya que no se puede descargar de rapishare, pero no me funciona, gracias