elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Tutorial básico de Quickjs


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web
| | |-+  PHP (Moderador: #!drvy)
| | | |-+  Mostrar error de Login dentro de Form
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Mostrar error de Login dentro de Form  (Leído 14,586 veces)
KeyPy HH

Desconectado Desconectado

Mensajes: 26


Ver Perfil
Mostrar error de Login dentro de Form
« en: 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
  1. <html>
  2.    <head>
  3.        <meta charset="utf-8">
  4.        <title>.:Br&uacute;jula Empresarial:.</title>
  5.  
  6.        <!-- Favicon -->
  7.        <link rel ="shortcut icon" href="img/favicon.ico" type="image/x-ico"/>
  8.  
  9.        <!-- CSS -->
  10.        <link rel="stylesheet" href="css/loginStyles.css" type="text/css" media="screen" />
  11.        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
  12.        <link rel="stylesheet" href="css/plastic/style.css" type="text/css" media="screen" />
  13.        <!-- Ends CSS -->
  14.  
  15.        <!-- GOOGLE FONTS -->
  16.        <link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>
  17.  
  18.        <!-- JS -->
  19.        <script type="text/javascript" src="js/jquery.min.js"></script>
  20.        <script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
  21.        <script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
  22.        <script type="text/javascript" src="js/easing.js"></script>
  23.        <script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script>
  24.        <script type="text/javascript" src="js/quicksand.js"></script>
  25.        <script type="text/javascript" src="js/jquery.cycle.all.js"></script>
  26.        <script type="text/javascript" src="js/custom.js"></script>
  27.        <!-- Ends JS -->
  28.  
  29.        <!-- Nivo slider -->
  30.        <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" media="screen" />
  31.        <script src="js/nivo-slider/jquery.nivo.slider.js" type="text/javascript"></script>
  32.        <!-- ENDS Nivo slider -->
  33.  
  34.        <!-- prettyPhoto -->
  35.        <script type="text/javascript" src="js/prettyPhoto/js/jquery.prettyPhoto.js"></script>
  36.        <link rel="stylesheet" href="js/prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen" />
  37.        <!-- ENDS prettyPhoto -->
  38.  
  39.        <!-- superfish -->
  40.        <link rel="stylesheet" media="screen" href="css/superfish.css" />
  41.        <link rel="stylesheet" media="screen" href="css/superfish-left.css" />
  42.        <script type="text/javascript" src="js/superfish-1.4.8/js/hoverIntent.js"></script>
  43.        <script type="text/javascript" src="js/superfish-1.4.8/js/superfish.js"></script>
  44.        <script type="text/javascript" src="js/superfish-1.4.8/js/supersubs.js"></script>
  45.        <!-- ENDS superfish -->
  46.  
  47.        <!-- poshytip -->
  48.        <link rel="stylesheet" href="js/poshytip-1.0/src/tip-twitter/tip-twitter.css" type="text/css" />
  49.        <link rel="stylesheet" href="js/poshytip-1.0/src/tip-yellowsimple/tip-yellowsimple.css" type="text/css" />
  50.        <script type="text/javascript" src="js/poshytip-1.0/src/jquery.poshytip.min.js"></script>
  51.        <!-- ENDS poshytip -->
  52.  
  53.        <!-- Fancybox -->
  54.        <link rel="stylesheet" href="js/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
  55.        <script type="text/javascript" src="js/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
  56.        <!-- ENDS Fancybox -->
  57.  
  58.    </head>
  59.    <body class ="home">
  60.  
  61.        <!-- WRAPPER -->
  62.        <div id="wrapper">
  63.  
  64.            <!-- HEADER -->
  65.            <div id="header">
  66.                <a href="index.php"><img id="logo" src="img/logoBrujulaPrincipalBlanco.png" alt="Brújula Empresarial" /></a>
  67.  
  68.                <!-- Barra de redes sociales (OCULTA) -->
  69.                <div id="social-holder">
  70.                    <!-- Este segmento esta vacío, pues no se necesitan Redes Sociales -->  
  71.                </div>
  72.                <!-- ENDS Social -->
  73.  
  74.                <!-- Barra de Menu (Navigation) -->
  75.                <ul id="nav" class="sf-menu">
  76.                    <li class="current-menu-item"><a href="index.php">Inicio</a></li>
  77.                    <li><a href="mapaSitio.php">Mapa del Sitio</a></li>
  78.                    <li><a href="help.php">Ayuda</a></li>
  79.                    <li><a href="about.php">Acerca De</a></li>
  80.  
  81.                    <!-- Cajita Del Login -->
  82.                    <li class="alineacion" id="login" >
  83.                        <a href="#" id="showlogin">Iniciar Sesi&oacute;n
  84.                            <span id="triangle_down">&#38;#9660;</span>
  85.                            <span id="triangle_up" style="display:none;">&#38;#9650;</span>
  86.                        </a>
  87.                        <!-- Cuando se abre la cajita, muestra esto -->
  88.                        <div id="loginpanel" style="display:none;">
  89.                            <form action="login.php" method="post" >
  90.                                <input type="text" name="username"   placeholder = "Usuario"/>
  91.                                <input type="password" name="password" placeholder = "Contrase&ntilde;a"/>
  92.                                <button type="submit">Acceder</button>
  93.                                <a href="http://rlv.zcache.com/okay_face_guy_postcard-p239169425656832751baanr_400.jpg">
  94.                                    ¿Olvid&oacute; su contrase&ntilde;a?
  95.                                </a>
  96.                            </form>
  97.                        </div>
  98.                    </li>
  99.                </ul>
  100.  
  101.  
  102.                <!-- Navigation -->
  103.  
  104.                <!-- Espacio entre barra de Menu y Slider -->
  105.                <div id="headline">
  106.                    <hr>
  107.                </div>
  108.                <!-- ENDS Espacio entre barra de Menu y Slider -->
  109.  
  110.                <!-- Slider -->
  111.                <div id="slider-block">
  112.                    <div id="slider-holder">
  113.                        <div id="slider">
  114.                            <a href="index.php">
  115.                                <img src="images/imagen1_slider.png" title="Clientes" alt=""/>
  116.                            </a>
  117.                            <a href="index.php">
  118.                                <img src="images/imagen2_slider.png" title="Proveedores" alt=""/>
  119.                            </a>
  120.                        </div>
  121.                    </div>
  122.                </div>
  123.                <!-- ENDS Slider -->
  124.            </div>
  125.            <!-- ENDS HEADER -->
  126.  
  127.            <!-- MAIN -->
  128.            <div id="main">
  129.  
  130.                <!-- content -->
  131.                <div id="content">
  132.  
  133.                    <!-- 1/4 cols -->
  134.                    <div class="three-fourth ">
  135.                        <h6></h6>
  136.                        <br>
  137.                        <p>
  138.                        </p>
  139.                        <p>
  140.                        </p>
  141.                    </div>
  142.                    <div class="one-fourth last">
  143.                        <h6>
  144.  
  145.                        </h6>
  146.  
  147.                    </div>
  148.                    <div class="clear"></div>
  149.                    <!-- ENDS 1/4 cols -->
  150.  
  151.                </div>
  152.                <!-- ENDS content -->
  153.  
  154.            </div>
  155.            <!-- ENDS MAIN -->
  156. </div>
  157.        <!-- ENDS WRAPPER -->
  158.    </body>
  159. </html>
  160.  
  161. <script>
  162.    $(document).ready(function() {
  163.        $('#showlogin').click(function() {
  164.            $('#loginpanel').slideToggle('slow', function() {
  165.                $("#triangle_down").toggle();
  166.                $("#triangle_up").toggle();
  167.            });
  168.        });
  169.    });
  170. </script>
  171.  

LOGIN.PHP

Código
  1. <?php
  2.  
  3. ini_set('display_errors', 'On');
  4. ini_set('display_startup_errors', 'On');
  5.  
  6. $username = $_POST['username'];
  7. $password = $_POST['password'];
  8.  
  9.  
  10.  
  11. function Conectarse() {
  12.    /* Pasar la contraseña y el usuario local para abrir las bases de datos */
  13.    if (!($link = mysql_connect("localhost", "root", "toor"))) {
  14.        echo "Error conectando a la base de datos.";
  15.        exit();
  16.    }
  17.    /* Seleccionar la base de datos a usar */
  18.    if (!mysql_select_db("prueba", $link)) {
  19.        echo "Error seleccionando la base de datos.";
  20.        exit();
  21.    }
  22.  
  23.    return $link;
  24. }
  25.  
  26. $con = Conectarse();
  27. $query = "SELECT * FROM sesion WHERE usuario ='" . $username . "' AND clave = '" . $password . "'";
  28. $q = mysql_query($query, $con);
  29. try {
  30.  
  31.  
  32.    if (mysql_result($q, 0)) {
  33.        $result = mysql_result($q, 0);
  34.  
  35.  
  36.        echo "Usuario validado correctamente";
  37.    }else
  38.        echo "Usuario o password erroneos.";
  39. } catch (Exception $error) {
  40.  
  41. }
  42. ?>


En línea

sexto

Desconectado Desconectado

Mensajes: 200


Ver Perfil
Re: Mostrar error de Login dentro de Form
« Respuesta #1 en: 17 Septiembre 2012, 12:11 pm »

crea una variable nada mas empezar el script llamada por ejemplo msg.
Código:
$msg = '';
en la respuesta al form, si es correcta hace el login y si no pon esto:
Código:
$msg = 'Usuario o contrase&ntilde;a incorrectos';
Y antes del form, donde quieras poner el mensaje:
Código:
<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.


En línea

RevangelyonX

Desconectado Desconectado

Mensajes: 245


Ver Perfil WWW
Re: Mostrar error de Login dentro de Form
« Respuesta #2 en: 17 Septiembre 2012, 15:03 pm »

Ya que utlizas jquery podrias utilizar el método Ajax. Es limpio y por Ajax.
Salu2
En línea

Just Linux
OSCP certified
jdc


Desconectado Desconectado

Mensajes: 3.406


Ver Perfil WWW
Re: Mostrar error de Login dentro de Form
« Respuesta #3 en: 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
En línea

EFEX


Desconectado Desconectado

Mensajes: 1.171


"Dinero Facil"


Ver Perfil WWW
Re: Mostrar error de Login dentro de Form
« Respuesta #4 en: 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/
En línea

jdc


Desconectado Desconectado

Mensajes: 3.406


Ver Perfil WWW
Re: Mostrar error de Login dentro de Form
« Respuesta #5 en: 19 Septiembre 2012, 06:28 am »

Ahora te respondo desde el PC xD

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

Código:
 if (mysql_result($q, 0)) {
        $result = mysql_result($q, 0);
 
 
        echo "Usuario validado correctamente";
    }else
        echo "Usuario o password erroneos.";
}

por esto:

Código
  1. if (mysql_result($q, 0)) {
  2.        $result = mysql_result($q, 0);
  3.  
  4.  
  5.        echo "Usuario validado correctamente";
  6.    }else
  7. echo '
  8.        <script type="text/javascript">
  9. window.location="index.php?error=1";
  10.        </script>';
  11. }
  12.  

Y en index.php agrega esto al principio:

Código
  1. <?php
  2. $error = @$_GET['error'];
  3. $perror ="";
  4. if(!empty($error)){
  5. if($error = 1){
  6. /* Reemplaza lo que esta entre comillas por lo
  7. que quieras que se vea cuando no metan bien el pass */
  8. $perror = "Password Incorrecto";
  9. }
  10. /* en caso de que quieras setear mas errores descomenta lo siguiente
  11. Tambien puedes agregar mas siguiendo la idea */
  12.  
  13. /*
  14. elseif($error = 2){
  15. $perror = "Otro error";
  16. }
  17. */
  18. }
  19. ?>
  20.  

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.
« Última modificación: 19 Septiembre 2012, 06:31 am por jdc » En línea

KeyPy HH

Desconectado Desconectado

Mensajes: 26


Ver Perfil
Re: Mostrar error de Login dentro de Form
« Respuesta #6 en: 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! :)
En línea

jdc


Desconectado Desconectado

Mensajes: 3.406


Ver Perfil WWW
Re: Mostrar error de Login dentro de Form
« Respuesta #7 en: 24 Septiembre 2012, 06:00 am »

Ojo que te redirige por javascript así que podría fallar. Trata de ver como corregir eso :) saludos
En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Disculpe, como puedo mostrar un form en un form?
Programación Visual Basic
Sai-To 8 4,258 Último mensaje 13 Enero 2008, 15:27 pm
por nhaalclkiemr
Login Form WinForm c#
.NET (C#, VB.NET, ASP)
evicar 5 8,429 Último mensaje 3 Diciembre 2010, 06:48 am
por [D4N93R]
problema con login form « 1 2 »
.NET (C#, VB.NET, ASP)
bitaziko 11 8,910 Último mensaje 11 Octubre 2011, 19:12 pm
por bitaziko
[Duda] Mostrar nueva pantalla sin cambiar de Form
.NET (C#, VB.NET, ASP)
z3nth10n 7 4,677 Último mensaje 29 Mayo 2013, 11:24 am
por Eleкtro
Ayuda con un Form Login
PHP
luiszr2009 2 2,516 Último mensaje 23 Agosto 2013, 02:05 am
por juaqui
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines