Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 8 de 8

Tema: [TUTORIAL] Crear Sistema De Registo Con Ajax ::SurKaiser::

  1. #1
    Me va gustando esto... Habitante Avatar de SurKaiser
    Fecha de Ingreso
    15 oct, 11
    Mensajes
    256
    Poder de Reputación
    10

    [TUTORIAL] Crear Sistema De Registo Con Ajax ::SurKaiser::

    Bueno ahora les traigo este tutorial de como ir creando un sistema de registro de usuarios implementando Ajax , Todo con el fin de terminar un registro de usuario muy completo y ahora yo participare con lo que es el ajax se podra ir modificando poco a poco y podras aportar para ir mejorando por tanto dejo lo principal que es el registro.

    Ahora el registro esta en V0.1 alpha y lo pongo ahora porque se ira modificando y explicando poco a poco ahora mismo solo pondre el codigo que he creado hasta ahora lo he hecho lo mas simple y practico posible cualquier duda no dudes en comentar. (Lo editare conforme la marcha).

    Lo hice en base al defecto del curso paso a paso de cctw por jorgens , basandome en la idea de cesar_ed y piediendole permiso de poder crear el tuto a su idea y su respuesta fue positiva.

    Necesitaremos entrar a nuestra bd y entrar a introduccion de SQL e introducir esto :

    Código HTML:
    --
    -- Estructura de tabla para la tabla `usuarios_ajax`
    --
    
    CREATE TABLE IF NOT EXISTS `usuarios_ajax` (
      `user_id` int(20) NOT NULL AUTO_INCREMENT,
      `usuario` varchar(250) NOT NULL,
      `clave` text NOT NULL,
      `email` text NOT NULL,
      PRIMARY KEY (`user_id`)
    ) ENGINE=MyISAM;
    Ahora creamos una nueva carpeta con el nombre RegistroCCTW y dentro creamos otra carpeta 'estilos' , ahora accedemos a estilos y creamos un archivo estilo-general.css y ponemos esta imagen : (pronto la subo).

    Bien ahora el codigo de estilo-general.css

    Código:
    /*
    $estilo-general.css (por Jorgens CCTW).
     -         SurKaiser    -
     *
     *      SDRDUCA v0.1 Alpha 
     
     *     (C) Nov 2011    
     *
     *      Ultima Modificacion : 25/11/2011 por : SurKaiser
     *
     -    Sistema De Registro De Usuarios Con Ajax(SDRDUCA)
     -    Es de codigo abierto puedes modificarlo y editarlo al gusto
     -    Si utilizaras el codigo en un tutorial , intentar dar referencia al autor
     *
     *
     *     No olvides consultar :
     *
     *      http://www.comocreartuweb.com/consultas/
     *
     *    Para cualquier duda o pregunta.
     *
     *        
     -
     */
    * {text-indent:0px ; margin:0px ; padding:0px ; border:0px }
    p {text-align: justify}
    h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center}
    h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center}
    body        {text-align: center }
    #global     {width:800px ; margin:4px auto }
    
    #curva-superior { background-image: url(../index_files/objetos/curva-superior.gif) ; 
    		background-repeat: no-repeat ;
    		width: 800px ;
    		height:12px ;
    		overflow: hidden }
    #cabecera   {background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; height:85px}
    #logotipo   {width:280px ; float:left }
    #publicidad {width:518px ; float:right ; margin-top:25px ; font-size: 16px }
    #navegacion {background-color: gray ; border: black 1px solid  ; height:20px}
    #navegacion li {float:left ; list-style:none ; margin: 0px 20px 0px 20px }
    #navegacion ul { margin-left: 60px }
    #contenido  {background-color: orange ; border-left: black 1px solid ; border-right: black 1px solid }
    #contenido p {margin: 5px 10px 0px 10px ; text-indent: 15px}
    #menu       {background-color: lorange ; width: 150px ; float:left ; 
                 text-align:left ; margin: 3px 10px 3px 3px ;
    		background-image: url(../index_files/objetos/menu-parte-inferior.gif);
    		background-position: bottom ;
    		padding-bottom:5px }
    #menu li    {list-style:none ; margin: 4px 8px 4px 6px }
    #menu h1 {text-decoration:none ; font-size:12px ; padding-top:12px ;background-image: url(../index_files/objetos/menu-parte-superior.gif) }
    #pie     {border-left:  black 1px solid ; 
              border-right: black 1px solid ; 
    		border-top:   black 1px solid ; 
    		height: 65px }
    #pie li {list-style: none ; font-size: 10px }
    #pieuno  {float:left ; width:150px ; list-style:none }
    #piedos  {float:left ; width:498px }
    #pietres {float:left ; width:150px }
    #curva-inferior { background-image: url(../index_files/objetos/curva-inferior.gif) ; 
    		background-repeat: no-repeat ;
    		width: 800px ;
    		height:12px ;
    		overflow: hidden }
    									
    a         {color: brown ; text-decoration:none ; display: block }
    a:link    {}
    a:visited {}
    a:hover   {color:red ; text-decoration:underline ; background-color: silver}
    a:active  {}
    
    #pie a         {color: blue; text-decoration:none ; display: block }
    #pie a:link    {}
    #pie a:visited {}
    #pie a:hover   {color:black ; text-decoration:underline ; background-color: white }
    #pie a:active  {color:black}
    
    #logotipo a         {}
    #logotipo a:link    {}
    #logotipo a:visited {}
    #logotipo a:hover   {background-color: white }
    #logotipo a:active  {}
    Bien ahora regresamos a la raiz de la carpeta (RegistroCCTW) y creamos otra carpeta con el nombre de 'ajax' , entramos en el y dentro creamos un archivo con el nombre registro.js y lo llenamos con el siguiente codigo y lo guardamos :

    Código:
    /*
     $registro.js
     -         SurKaiser    -
     *
     *      SDRDUCA v0.1 Alpha 
     
     *     (C) Nov 2011    
     *
     *      Ultima Modificacion : 25/11/2011 por : SurKaiser
     *
     -    Sistema De Registro De Usuarios Con Ajax(SDRDUCA)
     -    Es de codigo abierto puedes modificarlo y editarlo al gusto
     -    Si utilizaras el codigo en un tutorial , intentar dar referencia al autor
     *
     *
     *     No olvides consultar :
     *
     *      http://www.comocreartuweb.com/consultas/
     *
     *    Para cualquier duda o pregunta.
     *
     *        
     -
     */
     
    
    function obtenerXMLHttpRequest()
    {
      try {
      req = new XMLHttpRequest();
      } catch (err1) {
      try {
      req = new ActiveXObject ("Msxml2.XMLHTTP");
      } catch (err2) {
      try {
      req = new ActiveXObject ("Microsoft.XMLHTTP");
      } catch (err3) {
      req = false;
      }
     }
    }
    return req;
    }
     var conexion = obtenerXMLHttpRequest();
     function registrar()
     {
        var info = document.getElementById('informacion');
        var usuario = document.formulario.usuario.value;
    	var clave = document.formulario.clave.value;
    	var clavev = document.getElementById('confc');
    	var texto = document.getElementById('correo');
    	if( usuario == '')
    		 {
    		 info.innerHTML = '<p style="color:red">Ups, Olvidaste ingresar un nombre de usuario</p>';
    		 }
    		 else if(usuario.length <= 4)
    		 {
    		   info.innerHTML = '<p style="color:red">Para registrarte . EL nombre de usuario de contener mas de 4 caracteres</p>';
    		   }
    		  else {
    	if(clave == "")
    	{
    	  info.innerHTML = '<p style="color:red">Antes de registrarte debes elegir una contrase&ntilde;a</p>';
    	  }
    	  else if( clave.length <= 6)
    	  {
    	   info.innerHTML = '<p style="color:red">No puedes registrarte por que : Tu clave no es segura , debe ser de mas de 6 caracteres</p>';
    	   }
    	   else if ( clave != clavev.value )
    	   {
    	      info.innerHTML = '<p style="color:red">Antes de registrarte , debes confirmar correctamente tu contraseña</p>';
    		  }
    		 else {
    			 
    			 if(texto.value == '')
    			 {
    		
         info.innerHTML = '<p style="color:red"> La direccion de correo electronica no es correcta </p>';
    			 }
    			 else {
    				 
        var mailres = true;            
        var cadena = "abcdefghijklmnñopqrstuvwxyzABCDEFGHIJKLMNÑOPQRSTUVWXYZ1234567890@._-";
        
        var arroba = texto.value.indexOf("@",0);
        if ((texto.value.lastIndexOf("@")) != arroba) arroba = -1;
        
        var punto = texto.value.lastIndexOf(".");
                    
         for (var contador = 0 ; contador < texto.value.length ; contador++){
            if (cadena.indexOf(texto.value.substr(contador, 1),0) == -1){
                mailres = false;
                break;
         }
        }
    
        if ((arroba > 1) && (arroba + 1 < punto) && (punto + 1 < (texto.value.length)) && (mailres == true) 
             && (texto.value.indexOf("..",0) == -1))
        {
      registrando();
    	}
        else {
    		info.innerHTML = '<p style="color:red">La direccion de correo electronica  no es correcta. <br> Ingresa una direccion de correo electronica correcta para poderte registrar</p>'; 
    	}
    	
       }
     }
     
    }
     }
     function registrando()
     {  
        var cargando = document.getElementById('carR');
    	cargando.innerHTML = 'Registrando.......';
        var usuario = document.formulario.usuario.value;
    	var clave = document.formulario.clave.value;
    	var correo = document.formulario.correo.value;
    	var aleatorio = parseInt(Math.random()*99999999);
    	var url = "registrar.php";
    	conexion.open("POST", url , true);
    	conexion.onreadystatechange = InformacionR;
    	conexion.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    	conexion.send("mode=registrar&usuario="+ usuario +"&clave=" + clave +"&correo=" + correo +"&randomize=" + aleatorio);
    }
    function InformacionR()
    {
      if(conexion.readyState == 4)
      {
       if(conexion.status == 200)
       {
        var cargando = document.getElementById('carR');
    	cargando.innerHTML = '';
        var informacion = document.getElementById('informacion');
    	informacion.innerHTML = conexion.responseText;
       }
      }
     }
      
     function llamarAjax()
     {
       var textoTd = document.getElementById('resultadoU');
            textoTd.innerHTML = 'Comprobando....';
     var usuario = document.getElementById('usuario');
     var u = usuario.value;
     var Aleatorio =parseInt(Math.random()*99999999);
     var url = "registrar.php";
     conexion.open("POST", url  , true);
     conexion.onreadystatechange = respuestaAjax;
     conexion.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
     conexion.send("mode=c_usuario&usuario=" + u + "&rand="+ Aleatorio);
     }
      function respuestaAjax()
      {
        if(conexion.readyState == 4)
    	{
    	   if(conexion.status == 200)
    	   {
    	   var textoTd = document.getElementById('resultadoU');
    	  
            textoTd.innerHTML = conexion.responseText;
    		
    	   }
    	   else {
    	   alert("Ha ocurrido un error:" + conexion.statusText);
    	   }
    	 }
    }
    function cargando (campo)
    {
      if(campo.name == "usuario")
      {
        var texto = document.getElementById('textoU');
    	texto.innerHTML = 'Cargando.....';
    	}
    	else if (campo.name == "clave")
    	{
    	var texto = document.getElementById('textoC');
    	texto.innerHTML = 'Cargando.....';
    	}
    	else if (campo.name == "confirm")
    	{
    	var texto = document.getElementById('textoCR');
    	texto.innerHTML = 'Cargando.....';
    }
      else if (campo.name == "correo")
      {
    	   var texto = document.getElementById('textoMail');
    	   texto.innerHTML = 'Cargando.....';
      }
        else if (campo.name == "captcha")
    	{
    		var texto = document.getElementById('textoCap');
    	texto.innerHTML = 'Cargando.....';
    	}
    	else {
    	}
    }
    function comprobarU(usuario){
      var texto = document.getElementById('textoU');
      var textoTd = document.getElementById('resultadoU');
    	texto.innerHTML = '';
      var contenido = usuario.value;
      if(contenido.length <= 4)
      { 
         textoTd.innerHTML = '<p style="color:red">Tu nombre de usuario debe contener mas de 4 caracteres</p>';
    	 }
    	else if ( contenido.length > 4)
    	{
    	
       
    	llamarAjax();
    	}
    	else {
    	}
    }
    function comprobarC(clave) 
    {
         var texto = document.getElementById('textoC');
      var textoTd = document.getElementById('resC');
    	texto.innerHTML = '';
      var contenido = clave.value;
      if(contenido.length <= 6)
      { 
         textoTd.innerHTML = '<p style="color:red">Tu Contrase&ntilde;a debe contener minimo mas de 6 caracteres</p>';
    	 }
    	else if ( contenido.length > 6)
    	{
    	
        textoTd.innerHTML = '<p style="color:green">Correcto</p>';
    	}
    	else{
    	}
    }
      function comprobarCR(claver)
      {
        var texto = document.getElementById('textoCR');
      var textoTd = document.getElementById('resCR');
      var c = document.getElementById('clave');
    	texto.innerHTML = '';
      var contenido = claver.value;
      if (c.value == '')
      {
         textoTd.innerHTML = '<p style="color:red">Primero ingresa tu contraseña</p>';
    	 }
     else if (contenido == c.value)
      {
              textoTd.innerHTML = '<p style="color:green">Correcto</p>';
    		 }
    		 else {
    		 textoTd.innerHTML = '<p style="color:red">Las claves no coinciden</p>';
    		 }
    	}
    
    
    
    
    function comprobarMail(texto){
        
    	var textoMail = document.getElementById('textoMail');
    	var textoRes = document.getElementById('resMail');
    	textoMail.innerHTML= '';
        var mailres = true;            
        var cadena = "abcdefghijklmnñopqrstuvwxyzABCDEFGHIJKLMNÑOPQRSTUVWXYZ1234567890@._-";
        
        var arroba = texto.value.indexOf("@",0);
        if ((texto.value.lastIndexOf("@")) != arroba) arroba = -1;
        
        var punto = texto.value.lastIndexOf(".");
                    
         for (var contador = 0 ; contador < texto.value.length ; contador++){
            if (cadena.indexOf(texto.value.substr(contador, 1),0) == -1){
                mailres = false;
                break;
         }
        }
    
        if ((arroba > 1) && (arroba + 1 < punto) && (punto + 1 < (texto.value.length)) && (mailres == true) 
             && (texto.value.indexOf("..",0) == -1))
        {
    		textoRes.innerHTML = '<p style="color:green">Correcto</p>';
    	}
        else {
    		
       
                 textoRes.innerHTML = '<p style="color:red">La direccion de correo electronica proporcionada no es correcta.</p>'; 
    	}
       
    }
    
    
    function ComprobarCap(numero)
    {
       var texto = document.getElementById('textoCap');
       texto.innerHTML = '';
       var respuesta = document.getElementById('resCap');
       respuesta.innerHTML = '<p>Comprobando</p>';
       aleatorio = parseInt(Math.random()*99999999);
       url = 'registrar.php?mode=verificarcaptcha';
       conexion.open('GET',url +'&codigo='+ numero.value +'&randomize='+ aleatorio,true);
       conexion.onreadystatechange = captcha;
       conexion.send(null);
    }
     function captcha()
     {
    	 if (conexion.readyState == 4)
    	 {
    		 if (conexion.status == 200)
    		 {
    			 	   var textoTd = document.getElementById('resCap');
    	  
            textoTd.innerHTML = conexion.responseText;
    		
    	   }
    	   else {
    	   alert("Ha ocurrido un error:" + conexion.statusText);
    	   }
    	 }
    }
    Bien ahora regresamos a la raiz de carpeta nuevamente (RegistroCCTW) y creamos 3 archivos :

    -index.html
    -registro.html
    -registrar.php
    -config.php

    y bien abrimos los archivos y empezamos con :

    index.html :

    Código HTML:
    <!--
    $index.html (Diseño por Jorgens CCTW).
    /*
     -         SurKaiser    -
     *
     *      SDRDUCA v0.1 Alpha 
     
     *     (C) Nov 2011    
     *
     *      Ultima Modificacion : 25/11/2011 por : SurKaiser
     *
     -    Sistema De Registro De Usuarios Con Ajax(SDRDUCA)
     -    Es de codigo abierto puedes modificarlo y editarlo al gusto
     -    Si utilizaras el codigo en un tutorial , intentar dar referencia al autor
     *
     *
     *     No olvides consultar :
     *
     *      http://www.comocreartuweb.com/consultas/
     *
     *    Para cualquier duda o pregunta.
     *
     *        
     -
     */
     -->
    
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html><head>
    
    
    <meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">
    <title>Página Oficial de la banda</title>
    <link rel="stylesheet" href="estilos/estilo-general.css" type="text/css" media="all">
    </head><body>
    <div id="global">
      <div id="curva-superior"></div>
      <!-- INICIO DE CODIGO DE CABECERA - NO TOCAR -->
      <div id="cabecera">
        <div id="logotipo"><a href="http://www.comocreartuweb.com/html-kit-tutorial/web-ejemplo-cctw-001/index.html"><img src="estilos/logotipo.gif" alt="Haz clic aquí para volver a la página de inicio" height="80" width="270"></a></div>
        <div id="publicidad">Bienvenidos a mi Web</div>
      </div>
    <div id="navegacion">
      <ul>
       <li><a href="index.html">Inicio</a></li>
       <li><a href="registro.html">Registrarse</a></li>
       <li><a href="#">Iniciar Sesion</a></li>
      </ul>
    </div>
      <!-- FIN DE CODIGO DE CABECERA -->
      <div id="contenido">
         <!-- INICIO DE CODIGO DE MENU LATERAL IZQUIERDO - NO TOCAR -->
         <!-- FIN DE CODIGO DE MENU LATERAL IZQUIERDO -->
    <h1>Bienvenidos a la página oficial de la banda</h1>
    <p>Bienvenido a la página oficial de la banda. En este portal puedes
    estar informado de todo lo referente al grupo, desde su historia hasta
    sus próximos conciertos, pasándo por su completa discografía, descarga
    de cosas interesantes e incluso por nuestra tienda online, en la que
    puedes encargar tu camiseta del grupo.</p>
    <p>No olvides visitarnos en el foro y dejar tus comentarios.</p>
    <p>Gracias por la visita, esperamos verte pronto!
      </p>
     	</div>
      <div id="pie">
        <div id="pieuno">
           <ul>
              <li><a href="#">Foro Ejemplo</a></li><li><a href="#">Contactos</a></li><li><a href="#">Nos Enlazan</a></li>
           </ul>
        </div>
        <div id="piedos">pie dos</div>
        <div id="pietres">
           <ul>
              <li><a href="#">Directorio</a></li><li><a href="#">TopSite</a></li><li><a href="#">Mapa de la Web</a></li>
           </ul>
        </div>
      </div>
      <!-- INICIO DE CODIGO DE PIE DE PAGINA - NO TOCAR -->
    	<div id="curva-inferior"></div>
    </div>
    </body></html>
    Código HTML:
    <!--
    $registro.html (Diseño por Jorgens CCTW).
    /*
     -         SurKaiser    -
     *
     *      SDRDUCA v0.1 Alpha 
     
     *     (C) Nov 2011    
     *
     *      Ultima Modificacion : 25/11/2011 por : SurKaiser
     *
     -    Sistema De Registro De Usuarios Con Ajax(SDRDUCA)
     -    Es de codigo abierto puedes modificarlo y editarlo al gusto
     -    Si utilizaras el codigo en un tutorial , intentar dar referencia al autor
     *
     *
     *     No olvides consultar :
     *
     *      http://www.comocreartuweb.com/consultas/
     *
     *    Para cualquier duda o pregunta.
     *
     *        
     -
     */
     -->
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html><head>
    
    
    <meta content="text/html; charset=ISO-8859-1" http-equiv="Content-Type">
    <title>Página Oficial de la banda</title>
    <link rel="stylesheet" href="estilos/estilo-general.css" type="text/css" media="all">
    <script type="text/javascript" language="javascript" src="ajax/registro.js"></script>
    </head><body>
    <div id="global">
      <div id="curva-superior"></div>
      <!-- INICIO DE CODIGO DE CABECERA - NO TOCAR -->
      <div id="cabecera">
        <div id="logotipo"><a href="http://www.comocreartuweb.com/html-kit-tutorial/web-ejemplo-cctw-001/index.html"><img src="estilos/logotipo.gif" alt="Haz clic aquí para volver a la página de inicio" height="80" width="270"></a></div>
        <div id="publicidad">Bienvenidos a mi Web</div>
      </div>
    <div id="navegacion">
      <ul>
        <li><a href="index.php">Inicio</a></li>
        <li><a href="registro.html">Registrar</a></li>
        <li><a href="iniciar.html">Iniciar sesion</a>
    	</li>
       
      </ul>
    </div>
      <!-- FIN DE CODIGO DE CABECERA -->
      <div id="contenido">
         <!-- INICIO DE CODIGO DE MENU LATERAL IZQUIERDO - NO TOCAR -->
         <!-- FIN DE CODIGO DE MENU LATERAL IZQUIERDO -->
    <h1>Registro:</h1>
         <form name="formulario">
    <table border="0px">
    <tr>
    <td>Nombre de usuario:</td>
    <td><input type="text" name="usuario" id="usuario" onKeyPress="cargando(this)" onBlur="comprobarU(this)" /></td>
    </tr>
    <tr>
    <td id="textoU"></td>
    <td id="resultadoU"></td>
    </tr>
    <tr>
    <td>Contraseña:</td>
    <td><input type="password" name="clave" id="clave" onKeyPress="cargando(this)" onBlur="comprobarC(this)" /></td>
    </tr>
    <tr>
    <td id="textoC"></td>
    <td id="resC"></td>
    <tr>
    <td>Confirma Contraseña:</td>
    <td><input id="confc" type="password" name="confirm" onClick="cargando(this)"  onkeyup="comprobarCR(this)"/></td>
    </tr>
    <tr>
    <td id="textoCR"></td>
    <td id="resCR"></td>
    </tr>
    <tr>
    <td>Direccion de Correo electronico(e-mail):</td>
    <td><input type="text" id="correo" name="correo" onKeyPress="cargando(this)" onBlur="comprobarMail(this)"></td>
    </tr>
    <tr>
    <td id="textoMail"></td>
    <td id="resMail"></td>
    </tr>
    <tr>
    <td>Ingresa el codigo que ves en la siguiente imagen:<br>
           <center> <img src="registrar.php?mode=captcha" width="100" height="30" vspace="3"></center></td>
    <td><input type="text" id="captcha" name="captcha" onClick="cargando(this)" onKeyUp="ComprobarCap(this)"></td>
    </tr>
    <tr>
    <td id="textoCap"></td>
    <td id="resCap"></td>
    </tr>
    <tr>
    <td></td>
    <td><input  type="button" value="Registrar"  onclick="registrar();"/></td>
    </tr>
    <tr>
    <td id="carR"></td>
    <td id="informacion"></td>
    </tr>
    </table>
    </form>
     	</div>
      <div id="pie">
        <div id="pieuno">
           <ul>
              <li><a href="#">Foro Ejemplo</a></li><li><a href="#">Contactos</a></li><li><a href="#">Nos Enlazan</a></li>
           </ul>
        </div>
        <div id="piedos">pie dos</div>
        <div id="pietres">
           <ul>
              <li><a href="#">Directorio</a></li><li><a href="#">TopSite</a></li><li><a href="#">Mapa de la Web</a></li>
           </ul>
        </div>
      </div>
      <!-- INICIO DE CODIGO DE PIE DE PAGINA - NO TOCAR -->
    	<div id="curva-inferior"></div>
    </div>
    </body></html>
    registrar.php :

    Código PHP:
    <?php
    /*
     $registrar.php
     
     -         SurKaiser    -
     *
     *      SDRDUCA v0.1 Alpha 
     
     *     (C) Nov 2011    
     *
     *      Ultima Modificacion : 25/11/2011 por : SurKaiser
     *
     -    Sistema De Registro De Usuarios Con Ajax(SDRDUCA)
     -    Es de codigo abierto puedes modificarlo y editarlo al gusto
     -    Si utilizaras el codigo en un tutorial , intentar dar referencia al autor
     *
     *
     *     No olvides consultar :
     *
     *      http://www.comocreartuweb.com/consultas/
     *
     *    Para cualquier duda o pregunta.
     *
     *
     -
     */
     
     
    include("./config.php");
          
    $mode $_POST['mode'];
         
    $modeg $_GET['mode'];
       if(
    $mode == 'c_usuario')
       {
       
    $u $_POST['usuario'];
       if(
    $u == '')
       {
          echo 
    'Hubo un error de procesamiento AJAX';
       }
      
       else {
       
    db_conect();
        
    $obtener_usuario mysql_query("SELECT * FROM usuarios_ajax WHERE usuario ='".$u."'") or die(mysql_error());
        
    $contar mysql_num_rows($obtener_usuario);
        if( 
    $contar >= 1)
        {
         echo 
    '<p style="color:red">El usuario <span style="color:blue">'.$u.'</span> ya esta en uso, por favor elige otro.</p>';
         }
         else {
         
          echo 
    '<p style="color:green">El usuario <span style="color:blue">'.$u.'</span> esta disponible!!!</p>';
         }
        }
        
      }
      else if(
    $mode == 'registrar')
      {
      
    $us $_POST['usuario'];
      
    $cl md5($_POST['clave']);
      
    $email $_POST['correo'];
       if(
    $us == '' && $cl == '')
       {
         echo 
    'Hubo un error de procesamiento AJAX';
         }
        else {
      
    db_conect();
      
    $obtener_usuario mysql_query("SELECT * FROM usuarios_ajax WHERE usuario ='".$us."'") or die(mysql_error());
        
    $contar mysql_num_rows($obtener_usuario);
        if( 
    $contar >= 1)
        {
        echo 
    '<p style="color:red">No puedes registrarte ya que el usuario <span style="color:blue">'.$us.'</span> ya esta en uso, por favor elige otro.</p>';
        }
        else {
        
    $obtener_correo mysql_query("SELECT * FROM usuarios_ajax WHERE email ='".$email."'") or die (mysql_error());
        
    $contar_correo mysql_num_rows($obtener_correo);
        if(
    $contar_correo >= 1)
        {
        echo 
    '<p style="color:red">No puedes registrarte ya que el correo <span style="color:blue">'.$email.'</span> ya esta en uso, por favor elige otro.</p>';
        }
        else {
       
    $insertar mysql_query("INSERT INTO usuarios_ajax(usuario,clave,email)
        VALUES ('"
    .$us."','".$cl."','".$email."')") or die(mysql_error());
        echo 
    'Te has registrado correctamente , vuelve a registrarte aqui : <a href="registro37.html">Registrarse</a>';
        }
        }
        }
    }
     else if(
    $modeg == 'captcha')
     {
     
    session_start();
    function 
    randomText($length) {
        
    $pattern "1234567890abcdefghijklmnopqrstuvwxyz";
        for(
    $i=0;$i<$length;$i++) {
          
    $key .= $pattern{rand(0,35)};
        }
        return 
    $key;
    }

    $_SESSION['tmptxt'] = randomText(8);
    $captcha imagecreatefromgif("bgcaptcha.gif");
    $colText imagecolorallocate($captcha000);
    imagestring($captcha5167$_SESSION['tmptxt'], $colText);

    header("Content-type: image/gif");
    imagegif($captcha);
     }
     else if(
    $modeg == 'verificarcaptcha')
     {
       
    $codigo $_GET['codigo'];
         
    session_start();
        if (
    $_SESSION['tmptxt'] == $codigo) {
            echo 
    '<p style="color:green">Correcto</p>';
        } else {
                echo 
    '<p style="color:red">El codigo que has ingresado es incorrecto</p>';
        }
    }
    else 
    {
    }
       
    ?>
    y por ultimo config.php
    Código PHP:
    <?php
    /*
     $config.php
     
     -         SurKaiser    -
     *
     *      SDRDUCA v0.1 Alpha 
     
     *     (C) Nov 2011    
     *
     *      Ultima Modificacion : 25/11/2011 por : SurKaiser
     *
     -    Sistema De Registro De Usuarios Con Ajax(SDRDUCA)
     -    Es de codigo abierto puedes modificarlo y editarlo al gusto
     -    Si utilizaras el codigo en un tutorial , intentar dar referencia al autor
     *
     *
     *     No olvides consultar :
     *
     *      http://www.comocreartuweb.com/consultas/
     *
     *    Para cualquier duda o pregunta.
     *
     *
     -
     */

    function db_conect()
     {
         
    $s=mysql_connect("servidor mysql","usuario","clave");
         
         
    $d=mysql_select_db("Base de datos");
        
     } 
     
    ?>
    Ahora las imagenes necesarias :
    en momentos.

    Bien ya tenemos listo nuestro registro de usuarios con ajax ahora solo necesitamos subirlo a nuestro servidor y testearlo!!

    Proximos cambios :

    -login.html
    -login.php
    -logout.php
    -Añadir script subir imagen by surkaiser para implementar logo de usuario y con la opcion a subir.
    -Mejorar seguridad
    -implementacion con registro de Jorgens_CCTW(Esto para hacer el registo final completisimo).
    Por ahora es lo previsto cualquier adicion decidme y lo añado a la lista .

    Saludos!
    Mi web en construccion :
    surkaiser . com . es
    "El conocimiento es Poder"

  2. #2
    Me va gustando esto... Habitante
    Fecha de Ingreso
    10 oct, 11
    Mensajes
    189
    Poder de Reputación
    9
    OMG, luego lo pruebo y updateo!
    Se ve lindo!

    Saludos!!

  3. #3
    Esto empieza a ser un vicio... Habitante Avatar de victor5atodogas
    Fecha de Ingreso
    19 abr, 10
    Ubicación
    Zaragoza (España)
    Mensajes
    1,658
    Poder de Reputación
    20
    Una preuntilla, esto es sistema es solo de registro o tambien de identificacion.

    Saludos.
    Tienda de Productos de mascotas (perros, gatos, roedores, reptiles, pajaros, peces, tarjetas regalo, cestas...) a los mejores precios El Universo del perro Sigue a El Universo del Perro en Facebook

    Si quieres montar tu tienda con Prestashop y necesitas que te ayude puedes preguntarme, tambien ofrezco buenos precios para instalacion, configuracion, etc para tu nueva tienda.

  4. #4
    Me va gustando esto... Habitante Avatar de SurKaiser
    Fecha de Ingreso
    15 oct, 11
    Mensajes
    256
    Poder de Reputación
    10
    Cita Iniciado por victor5atodogas Ver Mensaje
    Una preuntilla, esto es sistema es solo de registro o tambien de identificacion.

    Saludos.
    Por ahora solo de registro , continuare elaborandolo para que abarque todo lo de un registro xD
    Mi web en construccion :
    surkaiser . com . es
    "El conocimiento es Poder"

  5. #5
    Me va gustando esto... Habitante
    Fecha de Ingreso
    10 oct, 11
    Mensajes
    189
    Poder de Reputación
    9
    Vamos surkaiser, te he viste inactivo estos días, que te ha pasado?

  6. #6
    Administrador CCTW Webmaster de CCTWHabitante Avatar de Jorgens_CCTW
    Fecha de Ingreso
    30 ene, 11
    Ubicación
    Cartagena, Murcia, España.
    Mensajes
    1,188
    Poder de Reputación
    10
    Os sigo! Gracias por los aportes!

  7. #7
    Recien Llegado! Pasaba por aquí...
    Fecha de Ingreso
    26 jul, 12
    Mensajes
    1
    Poder de Reputación
    0

    Wink este es el problema q cuando graba [object HTMLInputElement]

    Hola amigo, medio arregle el codigo para que solo grabe el email pero me sale esto:

    este es el problema q cuando graba [object HTMLInputElement]

    cuando pongo asi: var correo = document.getElementById('correo'); en la funcion registrar, si lo pongo como tu lo tienes no pasa nada se queda sin hacer nada.

    el resto de mi codigo:

    function registrando()
    {
    var cargando = document.getElementById('carR');
    cargando.innerHTML = 'Registrando.......';
    var correo = document.getElementById('correo');
    var aleatorio = parseInt(Math.random()*99999999);
    var url = "registrar.php";
    conexion.open("POST", url , true);
    conexion.onreadystatechange = InformacionR;
    conexion.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    conexion.send("mode=registrar&correo="+ correo +"&randomize=" + aleatorio);
    }

    function InformacionR()
    {
    if(conexion.readyState == 4)
    {
    if(conexion.status == 200)
    {
    var cargando = document.getElementById('carR');
    cargando.innerHTML = '';
    var informacion = document.getElementById('informacion');
    informacion.innerHTML = conexion.responseText;
    }
    }
    }

    function llamarAjax()
    {
    var textoTd = document.getElementById('resultadoU');
    textoTd.innerHTML = 'Comprobando....';
    var usuario = document.getElementById('correo');
    var u = usuario.value;
    var Aleatorio =parseInt(Math.random()*99999999);
    var url = "registrar.php";
    conexion.open("POST", url , true);
    conexion.onreadystatechange = respuestaAjax;
    conexion.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    conexion.send("mode=c_usuario&usuario=" + u + "&rand="+ Aleatorio);
    }

    ojala me ayuden

  8. #8
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    02 may, 11
    Ubicación
    Santiago, Chile
    Mensajes
    2,047
    Poder de Reputación
    21
    Hola israeldavid:

    Lo que te ocurre es lo correcto, porque con esta línea

    Código:
    document.getElementById('correo');
    lo que haces es obtener una referencia a la etiqueta HTML y no a su valor. Para obtener el valor debes hacer esto:

    Código:
    var correo = document.getElementById('correo');
    ...
    conexion.send("mode=registrar&correo="+ correo.value +"&randomize=" + aleatorio);
    o en una sola línea:

    Código:
    var correo = document.getElementById('correo').value;
    ...
    conexion.send("mode=registrar&correo="+ correo +"&randomize=" + aleatorio);
    Saludos.

Temas Similares

  1. [TUTORIAL] Visual Basic 6 ::SurKaiser:: Aprende VB6
    Por SurKaiser en el foro Visual Basic
    Respuestas: 4
    Último Mensaje: 30/04/2012, 17:41
  2. [TUTORIAL] Sistema de registro ( en Ajax )
    Por cesar_ed en el foro Sistema de Registro de Usuarios
    Respuestas: 4
    Último Mensaje: 14/11/2011, 19:36

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •