Mostrar mensaje "dinamico" de validacion en login

luis123123 · #1 (**permalink**) 22/09/2012, 00:19

Bueno, esa mi consulta parece facil, o quizas sea facil solo que no se como hacerlo,
la forma mas clasica seria que te envie un mensaje JavaScript con el popular Alert, pero eso no quiero, quiero algo mas avanzado
he visto paginas en particular la de esta pagina, me gusta su mensaje de validacion cuando pones un user o pass que no es el correcto, he buscado manuales por internet, pero me salen mensajes de validacion en la pagina cliente, eso es facil, pero como validar desde la base de datos,cuando tienes una pagina login.php que es tu formulario, y en esa pagina llamas a un control.php , que hace todo el proceso de logeo
Pero de ahi como hacer que te aparesca un mensaje de error como el de esta web o algo parecido.. algun manual o ayuda.. gracias ante todo..xD

moro666 · #2 (**permalink**) 22/09/2012, 05:27

Haber si entiendo tu duda, quieres que aparezca un codigo de error cuando el usuario se equivoque al loguerse?
O quieres que mediante JS se comprueve el contenido de la base de datos sin necessidad de recargar la pagina?

antoniopol · #3 (**permalink**) 22/09/2012, 09:11

Posiblemente lo que busques es el uso de AJAX

luis123123 · #4 (**permalink**) 22/09/2012, 14:52

Cita:

Iniciado por moro666

Haber si entiendo tu duda, quieres que aparezca un codigo de error cuando el usuario se equivoque al loguerse?
O quieres que mediante JS se comprueve el contenido de la base de datos sin necessidad de recargar la pagina?

Soy principiante en php,
estoy creando un login esta es la pagina aunque falta arreglarla
http://universidadprivadadelsur.16mb.com/
USER ESTUDIANTE: ES1000
PASS : 1234

USER ADMIN : admin
PASS : 1234

quiero que si se logea con user diferentes me salga un mensaje de error parecido al del login de eset foro.. me gusto ..xD O estaba pensando q se puede personalizar el mensaje javascript con otro formato mucho mejor..

moro666 · #5 (**permalink**) 23/09/2012, 02:59

Vale, ahora ya lo he pillado, pon el codigo que tienes del logueo para que pueda decirte como hacerlo!

luis123123 · #6 (**permalink**) 23/09/2012, 17:53

Cita:

Iniciado por moro666

Vale, ahora ya lo he pillado, pon el codigo que tienes del logueo para que pueda decirte como hacerlo!

Ok, este es mi formulario html:

Código HTML:

<!DOCTYPE html>
<html>
    <head>
    	<script language="javascript" src="jquery.js"></script>
        <meta charset="utf-8" />
		<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
		<title>ziceinclude; admin  version 1.0 online</title>
   <link href="componentes/css/zice.style.css" rel="stylesheet" type="text/css" />
<link href="componentes/css/icon.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="componentes/components/tipsy/tipsy.css"  media="all"/>
<style type="text/css">
html {
	background-image: none;
}
label.iPhoneCheckLabelOn span {
	padding-left:0px
}
#versionBar {
	background-color:#212121;
	position:fixed;
	width:100%;
	height:35px;
	bottom:0;
	left:0;
	text-align:center;
	line-height:35px;
	z-index:11;
	-webkit-box-shadow: black 0px 10px 10px -10px inset;
	-moz-box-shadow: black 0px 10px 10px -10px inset;
	box-shadow: black 0px 10px 10px -10px inset;
}
.copyright{
	text-align:center; font-size:10px; color:#CCC;
}
.copyright a{
	color:#A31F1A; text-decoration:none
}    
</style>
</head>
<body >
         
<div id="alertMessage"></div>
<div id="successLogin"></div>
<div class="text_success"><img src="componentes/images/loadder/loader_green.gif"   alt="ziceAdmin" /><span>Please wait</span></div>

<div id="login" >
  <div class="inner">
    <div class="logo" ><img src="componentes/images/logo/logo_login.png"  alt="ziceAdmin" /></div>
  <div class="formLogin">
   <form name="formLogin"  id="formLogin" method="post" action="control.php">

          <div class="tip">
				<input name="username" maxlenght="9" required type="text"  id="username_id"  title="Username"   />
          </div>
          <div class="tip">
				<input name="password" maxlenght="8" required type="password" id="password"   title="Password" />
			</div>
			<div id="error" class="tip" colspan="2" align="center">
			</div>
          <div class="loginButton">
          			<div style="float:right; padding:3px 0; margin-right:-12px;">
              <div> 
                <ul class="uibutton-group">
                   <li><input type="submit" value="Login" class="uibutton normal"></li>
				   <li><a href="olvide_pass.htm" class="uibutton normal" > olvide mi clave <a></li>

               </ul>
              </div>
			  
            </div>
			<div class="clear"></div>
		  </div>

    </form>
  </div>
</div>
  <div class="clear"></div>
  <div class="shadow"></div>
</div>

<!--Login div-->
<div class="clear"></div>
<div id="versionBar" >
  <div class="copyright" > &copy; Copyright 2012 UPS Intranet All Rights Reserved </div>
  <!-- // copyright-->
</div>
<!-- Link JScript-->
<script type="text/javascript" src="componentes/js/jquery.min.js" tppabs="http://zicedemo.com/js/jquery.min.js"></script>
<script type="text/javascript" src="componentes/components/effect/jquery-jrumble.js" tppabs="http://zicedemo.com/components/effect/jquery-jrumble.js"></script>
<script type="text/javascript" src="componentes/components/ui/jquery.ui.min.js" tppabs="http://zicedemo.com/components/ui/jquery.ui.min.js"></script>     
<script type="text/javascript" src="componentes/components/tipsy/jquery.tipsy.js" tppabs="http://zicedemo.com/components/tipsy/jquery.tipsy.js"></script>
<script type="text/javascript" src="componentes/components/checkboxes/iphone.check.js" tppabs="http://zicedemo.com/components/checkboxes/iphone.check.js"></script>
<script type="text/javascript" src="componentes/js/login.js" tppabs="http://zicedemo.com/js/login.js"></script>
</body>
</html>

y este es mi archivo php, que es el que hace todo el proceso del login:

Código PHP:

  <?php
session_start();
include_once "conexion.php";
include_once "function_login.php";
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

</head>
<body>

<?php
    $id = $_POST['username'];
    $n = 1;
    $user = strtolower($id{$n - 1});
switch ($user)
    {    
        case  "a":
        $_POST['password'] = md5($_POST['password']);
            
        if(verificar_login_a($_POST['username'],$_POST['password'],$result) == 1)
        {
            $_SESSION['userid'] = $result->id_user;
            echo '<script type="text/javascript">location.href="admin/index.php"</script>';
        }
        else
        {
            echo '<script type="text/javascript">location.href="index.php"</script>';
            
        }
        break;
        
        case "e":
        $_POST['password'] = md5($_POST['password']);
            
        if(verificar_login_e($_POST['username'],$_POST['password'],$result) == 1)
        {
            $_SESSION['userid'] = $result->id_alumno;
            echo '<script type="text/javascript">location.href="alumno/index.php"</script>';
        }
        else
        {
            echo '<script type="text/javascript">location.href="index.php"</script>';
        }
        break;
        default:
            echo '<script type="text/javascript">location.href="index.php"</script>';
    }
?>
</body>
</html>

Todo funciona perfectamente solo quiero que me muestre un mensaje personalizado si el usuario ingreso un user o pass incorrecto, asi como el mensaje que muestra el login de este foro

moro666 · #7 (**permalink**) 24/09/2012, 02:21

Mira si esto te sirve, junte los dos archivos en uno, me parecio mas facil!

Código PHP:

Ver original<?php
session_start();
include_once "conexion.php";
include_once "function_login.php";
 
    $error = "";
if (isset($_POST['username']){
                 
    $id = $_POST['username'];
    $n = 1;
    $user = strtolower($id{$n - 1});
switch ($user)
    {    
        case  "a":
        $_POST['password'] = md5($_POST['password']);
            
        if(verificar_login_a($_POST['username'],$_POST['password'],$result) == 1)
        {
            $_SESSION['userid'] = $result->id_user;
            echo '<script type="text/javascript">location.href="admin/index.php"</script>';
        }
        else
        {
            $error = "Clave i/o usuario erroneos";
            
        }
        break;
        
        case "e":
        $_POST['password'] = md5($_POST['password']);
            
        if(verificar_login_e($_POST['username'],$_POST['password'],$result) == 1)
        {
            $_SESSION['userid'] = $result->id_alumno;
            echo '<script type="text/javascript">location.href="alumno/index.php"</script>';
        }
        else
        {
            $error = "Clave i/o usuario erroneos";
        }
        break;
        default:
            $error = "Clave i/o usuario erroneos";
    }
};
?>
 
 
<!DOCTYPE html>
<html>
    <head>
        <script language="javascript" src="jquery.js"></script>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
        <title>ziceinclude; admin  version 1.0 online</title>
   <link href="componentes/css/zice.style.css" rel="stylesheet" type="text/css" />
<link href="componentes/css/icon.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="componentes/components/tipsy/tipsy.css"  media="all"/>
<style type="text/css">
html {
    background-image: none;
}
label.iPhoneCheckLabelOn span {
    padding-left:0px
}
#versionBar {
    background-color:#212121;
    position:fixed;
    width:100%;
    height:35px;
    bottom:0;
    left:0;
    text-align:center;
    line-height:35px;
    z-index:11;
    -webkit-box-shadow: black 0px 10px 10px -10px inset;
    -moz-box-shadow: black 0px 10px 10px -10px inset;
    box-shadow: black 0px 10px 10px -10px inset;
}
.copyright{
    text-align:center; font-size:10px; color:#CCC;
}
.copyright a{
    color:#A31F1A; text-decoration:none
}    
</style>
</head>
<body >
         
<div id="alertMessage"></div>
<div id="successLogin"></div>
<div class="text_success"><img src="componentes/images/loadder/loader_green.gif"   alt="ziceAdmin" /><span>Please wait</span></div>
 
<div id="login" >
  <div class="inner">
    <div class="logo" ><img src="componentes/images/logo/logo_login.png"  alt="ziceAdmin" /></div>
  <div class="formLogin">
   <form name="formLogin"  id="formLogin" method="post" action="">
 
          <div class="tip">
                <input name="username" maxlenght="9" required type="text"  id="username_id"  title="Username"   />
          </div>
          <div class="tip">
                <input name="password" maxlenght="8" required type="password" id="password"   title="Password" />
            </div>
            <div id="error" class="tip" colspan="2" align="center">
            </div>
          <div class="loginButton">
                    <div style="float:right; padding:3px 0; margin-right:-12px;">
              <div> 
                <ul class="uibutton-group">
                   <li><input type="submit" value="Login" class="uibutton normal"></li>
                   <li><a href="olvide_pass.htm" class="uibutton normal" > olvide mi clave <a></li>
 
               </ul>
              </div>
              
            </div>
            <div class="clear"></div>
          </div>
 
    </form>
  </div>
</div>
  <div class="clear"></div>
  <div class="shadow"></div>
</div>
 
<!--Login div-->
<div class="clear"></div>
<div id="versionBar" >
  <div class="copyright" > &copy; Copyright 2012 UPS Intranet All Rights Reserved </div>
  <!-- // copyright-->
</div>
<!-- Link JScript-->
<script type="text/javascript" src="componentes/js/jquery.min.js" tppabs="http://zicedemo.com/js/jquery.min.js"></script>
<script type="text/javascript" src="componentes/components/effect/jquery-jrumble.js" tppabs="http://zicedemo.com/components/effect/jquery-jrumble.js"></script>
<script type="text/javascript" src="componentes/components/ui/jquery.ui.min.js" tppabs="http://zicedemo.com/components/ui/jquery.ui.min.js"></script>     
<script type="text/javascript" src="componentes/components/tipsy/jquery.tipsy.js" tppabs="http://zicedemo.com/components/tipsy/jquery.tipsy.js"></script>
<script type="text/javascript" src="componentes/components/checkboxes/iphone.check.js" tppabs="http://zicedemo.com/components/checkboxes/iphone.check.js"></script>
<script type="text/javascript" src="componentes/js/login.js" tppabs="http://zicedemo.com/js/login.js"></script>
</body>
</html> <!DOCTYPE html>
<html>
    <head>
        <script language="javascript" src="jquery.js"></script>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
        <title>ziceinclude; admin  version 1.0 online</title>
   <link href="componentes/css/zice.style.css" rel="stylesheet" type="text/css" />
<link href="componentes/css/icon.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="componentes/components/tipsy/tipsy.css"  media="all"/>
<style type="text/css">
html {
    background-image: none;
}
label.iPhoneCheckLabelOn span {
    padding-left:0px
}
#versionBar {
    background-color:#212121;
    position:fixed;
    width:100%;
    height:35px;
    bottom:0;
    left:0;
    text-align:center;
    line-height:35px;
    z-index:11;
    -webkit-box-shadow: black 0px 10px 10px -10px inset;
    -moz-box-shadow: black 0px 10px 10px -10px inset;
    box-shadow: black 0px 10px 10px -10px inset;
}
.copyright{
    text-align:center; font-size:10px; color:#CCC;
}
.copyright a{
    color:#A31F1A; text-decoration:none
}    
</style>
</head>
<body >
         
<div id="alertMessage"></div>
<div id="successLogin"></div>
<div class="text_success"><img src="componentes/images/loadder/loader_green.gif"   alt="ziceAdmin" /><span>Please wait</span></div>
 
<div id="login" >
  <div class="inner">
    <div class="logo" ><img src="componentes/images/logo/logo_login.png"  alt="ziceAdmin" /><?php print("$error"); ?></div>
  <div class="formLogin">
   <form name="formLogin"  id="formLogin" method="post" action="control.php">
 
          <div class="tip">
                <input name="username" maxlenght="9" required type="text"  id="username_id"  title="Username"   />
          </div>
          <div class="tip">
                <input name="password" maxlenght="8" required type="password" id="password"   title="Password" />
            </div>
            <div id="error" class="tip" colspan="2" align="center">
            </div>
          <div class="loginButton">
                    <div style="float:right; padding:3px 0; margin-right:-12px;">
              <div> 
                <ul class="uibutton-group">
                   <li><input type="submit" value="Login" class="uibutton normal"></li>
                   <li><a href="olvide_pass.htm" class="uibutton normal" > olvide mi clave <a></li>
 
               </ul>
              </div>
              
            </div>
            <div class="clear"></div>
          </div>
 
    </form>
  </div>
</div>
  <div class="clear"></div>
  <div class="shadow"></div>
</div>
 
<!--Login div-->
<div class="clear"></div>
<div id="versionBar" >
  <div class="copyright" > &copy; Copyright 2012 UPS Intranet All Rights Reserved </div>
  <!-- // copyright-->
</div>
<!-- Link JScript-->
<script type="text/javascript" src="componentes/js/jquery.min.js" tppabs="http://zicedemo.com/js/jquery.min.js"></script>
<script type="text/javascript" src="componentes/components/effect/jquery-jrumble.js" tppabs="http://zicedemo.com/components/effect/jquery-jrumble.js"></script>
<script type="text/javascript" src="componentes/components/ui/jquery.ui.min.js" tppabs="http://zicedemo.com/components/ui/jquery.ui.min.js"></script>     
<script type="text/javascript" src="componentes/components/tipsy/jquery.tipsy.js" tppabs="http://zicedemo.com/components/tipsy/jquery.tipsy.js"></script>
<script type="text/javascript" src="componentes/components/checkboxes/iphone.check.js" tppabs="http://zicedemo.com/components/checkboxes/iphone.check.js"></script>
<script type="text/javascript" src="componentes/js/login.js" tppabs="http://zicedemo.com/js/login.js"></script>
</body>
</html>