Mostrar error de Login dentro de Form

Iniciado por KeyPy HH, 16 Septiembre 2012, 00:02 AM

0 Miembros y 1 Visitante están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

KeyPy HH

16 Septiembre 2012, 00:02 AM
Hola,

Yo otra vez por aca molestando! :P He estado buscando en google, y ninguna implementación me ha servido para hacer esto: que muestre un mensaje de error dentro de la misma página (y a su vez dentro del form) que diga que no se pudo iniciar sesión debido a pass o username incorrecto. Cabe aclarar que tengo un script que muestra un efecto al abrir el form (no se si interferirá o no). La pagina principal es index.php , tengo la pagina con el codigo para conectar a la base de datos (login.php)
Lo que no quiero es que si el user o el pass es incorrecto, se vaya a cargar la pagina login.php

INDEX.PHP

Código (php-brief) [Seleccionar]

<html>
    <head>
        <meta charset="utf-8">
        <title>.:Br&uacute;jula Empresarial:.</title>

        <!-- Favicon -->
        <link rel ="shortcut icon" href="img/favicon.ico" type="image/x-ico"/>

        <!-- CSS -->
        <link rel="stylesheet" href="css/loginStyles.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
        <link rel="stylesheet" href="css/plastic/style.css" type="text/css" media="screen" />
        <!-- Ends CSS -->

        <!-- GOOGLE FONTS -->
        <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>

        <!-- JS -->
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
        <script type="text/javascript" src="js/easing.js"></script>
        <script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
        <script type="text/javascript" src="js/quicksand.js"></script>
        <script type="text/javascript" src="js/jquery.cycle.all.js"></script>
        <script type="text/javascript" src="js/custom.js"></script>
        <!-- Ends JS -->

        <!-- Nivo slider -->
        <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
        <script src="js/nivo-slider/jquery.nivo.slider.js" type="text/javascript"></script>
        <!-- ENDS Nivo slider -->

        <!-- prettyPhoto -->
        <script type="text/javascript" src="js/prettyPhoto/js/jquery.prettyPhoto.js"></script>
        <link rel="stylesheet" href="js/prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen" />
        <!-- ENDS prettyPhoto -->

        <!-- superfish -->
        <link rel="stylesheet" media="screen" href="css/superfish.css" />
        <link rel="stylesheet" media="screen" href="css/superfish-left.css" />
        <script type="text/javascript" src="js/superfish-1.4.8/js/hoverIntent.js"></script>
        <script type="text/javascript" src="js/superfish-1.4.8/js/superfish.js"></script>
        <script type="text/javascript" src="js/superfish-1.4.8/js/supersubs.js"></script>
        <!-- ENDS superfish -->

        <!-- poshytip -->
        <link rel="stylesheet" href="js/poshytip-1.0/src/tip-twitter/tip-twitter.css" type="text/css" />
        <link rel="stylesheet" href="js/poshytip-1.0/src/tip-yellowsimple/tip-yellowsimple.css" type="text/css" />
        <script type="text/javascript" src="js/poshytip-1.0/src/jquery.poshytip.min.js"></script>
        <!-- ENDS poshytip -->

        <!-- Fancybox -->
        <link rel="stylesheet" href="js/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
        <script type="text/javascript" src="js/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
        <!-- ENDS Fancybox -->

    </head>
    <body class ="home">

        <!-- WRAPPER -->
        <div id="wrapper">

            <!-- HEADER -->
            <div id="header">
                <a href="index.php"><img id="logo" src="img/logoBrujulaPrincipalBlanco.png" alt="Brújula Empresarial" /></a>

                <!-- Barra de redes sociales (OCULTA) -->
                <div id="social-holder">
                    <!-- Este segmento esta vacío, pues no se necesitan Redes Sociales -->   
                </div>
                <!-- ENDS Social -->

                <!-- Barra de Menu (Navigation) -->
                <ul id="nav" class="sf-menu">
                    <li class="current-menu-item"><a href="index.php">Inicio</a></li>
                    <li><a href="mapaSitio.php">Mapa del Sitio</a></li>
                    <li><a href="help.php">Ayuda</a></li>
                    <li><a href="about.php">Acerca De</a></li>

                    <!-- Cajita Del Login -->
                    <li class="alineacion" id="login" >
                        <a href="#" id="showlogin">Iniciar Sesi&oacute;n
                            <span id="triangle_down">&#9660;</span>
                            <span id="triangle_up" style="display:none;">&#9650;</span>
                        </a>
                        <!-- Cuando se abre la cajita, muestra esto -->
                        <div id="loginpanel" style="display:none;">
                            <form action="login.php" method="post" >
                                <input type="text" name="username"   placeholder = "Usuario"/>
                                <input type="password" name="password" placeholder = "Contrase&ntilde;a"/>
                                <button type="submit">Acceder</button>
                                <a href="http://rlv.zcache.com/okay_face_guy_postcard-p239169425656832751baanr_400.jpg">
                                    ¿Olvid&oacute; su contrase&ntilde;a?
                                </a>
                            </form>
                        </div>
                    </li>
                </ul>


                <!-- Navigation -->

                <!-- Espacio entre barra de Menu y Slider -->
                <div id="headline">
                    <hr>
                </div>
                <!-- ENDS Espacio entre barra de Menu y Slider -->

                <!-- Slider -->
                <div id="slider-block">
                    <div id="slider-holder">
                        <div id="slider">
                            <a href="index.php">
                                <img src="images/imagen1_slider.png" title="Clientes" alt=""/>
                            </a>
                            <a href="index.php">
                                <img src="images/imagen2_slider.png" title="Proveedores" alt=""/>
                            </a>
                        </div>
                    </div>
                </div>
                <!-- ENDS Slider -->
            </div>
            <!-- ENDS HEADER -->

            <!-- MAIN -->
            <div id="main">

                <!-- content -->
                <div id="content">

                    <!-- 1/4 cols -->
                    <div class="three-fourth ">
                        <h6></h6>
                        <br>
                        <p>
                        </p>
                        <p>
                        </p>
                    </div>
                    <div class="one-fourth last">
                        <h6>

                        </h6>

                    </div>
                    <div class="clear"></div>
                    <!-- ENDS 1/4 cols -->

                </div>
                <!-- ENDS content -->

            </div>
            <!-- ENDS MAIN -->
</div>
        <!-- ENDS WRAPPER -->
    </body>
</html>

<script>
    $(document).ready(function() {
        $('#showlogin').click(function() {
            $('#loginpanel').slideToggle('slow', function() {
                $("#triangle_down").toggle();
                $("#triangle_up").toggle();
            });
        });
    });
</script>


LOGIN.PHP

Código (php) [Seleccionar]
<?php

ini_set('display_errors', 'On');
ini_set('display_startup_errors', 'On');
error_reporting(0);

$username = $_POST['username'];
$password = $_POST['password'];



function Conectarse() {
    /* Pasar la contraseña y el usuario local para abrir las bases de datos */
    if (!($link = mysql_connect("localhost", "root", "toor"))) {
        echo "Error conectando a la base de datos.";
        exit();
    }
    /* Seleccionar la base de datos a usar */
    if (!mysql_select_db("prueba", $link)) {
        echo "Error seleccionando la base de datos.";
        exit();
    }
    
    return $link;
}

$con = Conectarse();
$query = "SELECT * FROM sesion WHERE usuario ='" . $username . "' AND clave = '" . $password . "'";
$q = mysql_query($query, $con);
try {


    if (mysql_result($q, 0)) {
        $result = mysql_result($q, 0);


        echo "Usuario validado correctamente";
    }else
        echo "Usuario o password erroneos.";
} catch (Exception $error) {
    
}
mysql_close($con);
?>

sexto

#1
17 Septiembre 2012, 12:11 PM
crea una variable nada mas empezar el script llamada por ejemplo msg.
Código [Seleccionar]
$msg = '';
en la respuesta al form, si es correcta hace el login y si no pon esto:
Código [Seleccionar]
$msg = 'Usuario o contrase&ntilde;a incorrectos';
Y antes del form, donde quieras poner el mensaje:
Código [Seleccionar]
<span id="msg"><?php echo $msg; ?></span>

Luego desde el CSS le puedes dar un estilo.
Existen muchísimas formas de hacerlo, pero esta es la mas fácil y rápida.

RevangelyonX

#2
17 Septiembre 2012, 15:03 PM
Ya que utlizas jquery podrias utilizar el método Ajax. Es limpio y por Ajax.
Salu2
Just Linux
OSCP certified

jdc

#3
18 Septiembre 2012, 11:14 AM
Creo que ni siquiera estas entendiendo lo que hace el código. Si quieres aprender bien te recomiendo hacerlo primero sin estilos ni efectos especiales.

Crea 2 inputs, usuario y contraseña.
Estos se validaran en login.php verdad?

En login.php haz algo como esto:

Están ambos campos con texto?
No: devuelve al index con un texto de error diciendo que ambos campos deben contener información.

Si: realiza tu consulta a la base de datos y mira si coincide o no el usuario y la contraseña...
Si coincide lo logueas, sino mi mandas al index con el error de el usuario y las contraseña no corresponden.

Cuando logres hacer eso, tendrás otros problemas.

1) Inyección SQL.
2) ver si el usuario no existe y agregar el error...

Personalmente pienso que mientras menos información tenga el usuario respecto a su inicio de sesión más seguro será tu script, pero eso ya es cosa tuya ;) intenta hacerlo, si tienes problemas con la programación de lo que te dije ponelos aqui y te damos una mano

EFEX

#4
18 Septiembre 2012, 20:10 PM
Pienso como dice jdc, en este caso no es necesario aplicar una validacion mas elaborada, es solo el formulario login, distinto seria en el caso de registro, donde hay mas casillas, nacionalidad, fecha de nacimiento, nombre de usuario, etc. seria mas conveniente en ese caso. Comunmente se hace con javascript y php, por medio de json.

Hay muchisimos ejemplos...
12 Useful jQuery Form Validation
http://designmodo.com/jquery-form-validation/
GITHUB 

jdc

#5
19 Septiembre 2012, 06:28 AM Ultima modificación: 19 Septiembre 2012, 06:31 AM por jdc
Ahora te respondo desde el PC xD

mira para lo que estas preguntando,en login.php reemplaza esto:

Código [Seleccionar]
if (mysql_result($q, 0)) {
       $result = mysql_result($q, 0);


       echo "Usuario validado correctamente";
   }else
       echo "Usuario o password erroneos.";
}

por esto:

Código (php) [Seleccionar]

if (mysql_result($q, 0)) {
       $result = mysql_result($q, 0);


       echo "Usuario validado correctamente";
   }else
echo '
       <script type="text/javascript">
window.location="index.php?error=1";
       </script>';
}


Y en index.php agrega esto al principio:

Código (php) [Seleccionar]

<?php
$error = @$_GET['error'];
 $perror ="";
 if(!empty($error)){
 if($error = 1){
 /* Reemplaza lo que esta entre comillas por lo 
que quieras que se vea cuando no metan bien el pass */
 $perror = "Password Incorrecto";
 }
 /* en caso de que quieras setear mas errores descomenta lo siguiente
Tambien puedes agregar mas siguiendo la idea */
/*
elseif($error = 2){
$perror = "Otro error";
}
*/
 }
?>


Y en donde quieras que se muestre en index.php el error pones:

<?php
echo $perror;
?>

Es basico pero te dara una idea. No me gusta dar codigo hecho, prefiero que aprendas a hacerlo por ti mismo. Solo espero que lo entiendas y no lo copies y pegues, hace eso por mi ya que me di el tiempo de hacerlo para ti ;) Si noi entiendes, pregunta.

Saludos.

KeyPy HH

#6
23 Septiembre 2012, 17:29 PM
Muchas Gracias a todos, la verdad era que estaba un poco confundido.. Tanto código  a veces satura la mente! jaajja Pero en serio muchas gracias! jdc en verdad era ese pedacito de codigo lo que necesitaba... se te agradece! :)

jdc

#7
24 Septiembre 2012, 06:00 AM
Ojo que te redirige por javascript así que podría fallar. Trata de ver como corregir eso :) saludos
Imprimir
Ir Arriba Páginas1
Acciones del Usuario