Hacer un login_box como el de forosdelweb

nero97 · #1 (**permalink**) 27/04/2011, 14:41

Hola, saben el login de foros del web... que cuando pasas por encima se despliega el login_box?? Pues vale, me gustaria hacer uno como ese pero que tenga que clicar en Iniciar Sesión para que se despliegue... tipo como Taringa... como lo hagoo??

chicohot20 · #2 (**permalink**) 27/04/2011, 19:44

Probablemente en el foro de CSS o Javascript te lo digan. Esto es ajax, no tiene nada que ver.

Rankxerox1984 · #3 (**permalink**) 28/04/2011, 02:38

Hola Nero:

Te paso como lo tengo hecho yo por si te sirve. Funciona con sesiones. Asumo que tienes todo el tema de registro de usuario creado. Al principio de la página declaras "session_start"
En cada página que desees tener el login añadess esto:

Código PHP:

 
    
        <!--Usuario registrado--> 
         
        <div id="UserREG"><?php 
             
            $_SESSION['usuario']=$usuario; 
            echo $usuario; 
             
        ?></div>     
  
        <!--Logout--> 
         
        <div id="LOGIN"> 
            <?php 
 
                include('login/ComandBTNLogout.php'); 
 
            ?> 
        </div>     
         
          <!--Login--> 
        <div id="LOGIN"> 
            <?php 
 
                include('login/ComandBTNLogin.php'); 
 
            ?> 
        </div>

El código de login (ComandBTNLogin.php) es:

Código PHP:

  <a href="login/main_login.php" onClick="window.open(this.href, this.target, 'top='+parseInt(((screen.height) / 2) - 100)+',left='+parseInt(((screen.width) / 2) - 175)+',width=350,height=200,resizable=no,scrollbars=no,titlebar=no,status=no,toolbar=no,location=no,directories=no,menubar=no');return false;window.close();exit">Login</a>

Que lleva a la página "login/main_login.php" que contien el form del login y cuyo código es:

Código PHP:

  <?php session_start(); 
//Compruebo errores 
error_reporting(E_ALL & ~E_NOTICE);  
ini_set("display_errors", 1);  
 
?><html> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd "> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 
 
    <?php         
 
    //Detectammos el idioma del explorador 
 
       $Lengua = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'],0,2); 
 
    ?> 
 
<head> 
 
   <meta http-equiv="Content-Type"content=" text/html;charset=utf-8"> 
 
 <!--Aquí se indica donde está la hoja de estilos CSS --> 
 
 <?php 
 
    include('../phpBits/estilo_css.php'); 
 
        ?> 
 
   <!--Aquí se indican los estilos CSS particulares de esta hoja CSS --> 
<style></style> 
 
</head > 
 
<body> 
 
<div id="popup"> 
 
    <table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC"> 
        <tr> 
        <form name="form1" method="post" action="checklogin.php">     
            <td> 
            <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF"> 
                <tr> 
                    <td colspan="3"><center><strong>Acceso</strong></center></td> 
                </tr> 
                 
                <tr> 
                    <td width="78">Usuario</td> 
                    <td width="6">:</td> 
                    <td width="294"><input name="usuario" type="text" id="usuario"></td> 
                </tr> 
 
                <tr> 
                    <td>Clave</td> 
                    <td>:</td> 
                    <td><input name="clave" type="password" id="clave"></td> 
                </tr> 
                 
                <tr> 
                    <td>&nbsp;</td> 
                    <td>&nbsp;</td> 
                    <td><input type="submit" name="Submit" value="Login"></td> 
                </tr> 
                <tr> 
                    <td colspan="3"> 
                    <center><a href="#" onclick="getUsuario()">Si has olvidado tu clave pincha aquí</a></center></td> 
                                 
                    <script language=javascript>  
                    function getUsuario() 
                    {var usuario;usuario = document.form1.usuario.value;  
                    window.location="../login/RescateClave.php?usuario="+usuario;  } 
                    </script> 
                 
                </tr> 
            </table> 
        </form> 
    </div> 
        <script language=javascript>  
    onclick="self.close()"; 
    </script> 
    </table> 
</body> 
</html>

El usuario se verifica con:

Código PHP:

  <?php session_start (); 
//Compruebo errores 
error_reporting(E_ALL & ~E_NOTICE);  
ini_set("display_errors", 1);  
 
// Llamo las variables de conexión a DB 
 
        require_once ('../recor/LoginDB.php'); 
          
// Nombre de la tabla 
     
        $tbl_name="usuarios";   
 
// Defino $usuario y $clave  
        $usuario=$_POST['usuario'];  
        if (empty ($_POST['usuario'])) {echo "<script type=\"text/javascript\">alert(\"ERROR: Pon un usuario\");   
                    window.history.back();   
                    </script>"; 
                exit; 
                };   
        $clave=$_POST['clave']; 
        if (empty ($_POST['clave'])) {echo "<script type=\"text/javascript\">alert(\"ERROR: Pon la clave\");   
                    window.history.back();   
                    </script>"; 
                exit; 
                };   
 
// Protejo frente a MYSQL injection 
        $usuario = stripslashes($usuario); 
        $clave = stripslashes($clave); 
 
// Abro conexión y selecciono la base de datos 
        $connection = mysql_connect($host, $user, $pass) or die ("Unable to connect!");  
        mysql_select_db($db) or die ("Unable to select database!");  
         
//Elimino los usuarios inactivos más antiguos de diez dias 
 
$SelFAKEUSER =mysql_query ("delete from usuarios WHERE datediff(CURDATE(),fecha)>10 and activo='0'"); 
         
//Construyo la select 
        $sql="SELECT * FROM $tbl_name WHERE usuario='$usuario' and clave='$clave' and`activo`=1"; 
        $result=mysql_query($sql); 
 
// Cuento las filas de la tabla  
        $count=mysql_num_rows($result);  
         
// Si $usuario y $clave coinciden, y Activo es igual a 1, tiene que haber una fila 
 
        if($count==1){ 
 
// Registro $usuario, $clave y redirijo a la página de destino  
         
    $_SESSION['usuario'] = $usuario;  
    $_SESSION['clave'] = $clave;  
     
     
//abro la ventana de destino     
?>  
<script language=javascript>  
 
self.close(); 
opener.location.reload();  
 
 </script> 
<?php 
 
}  
else {  
    echo "<script type=\"text/javascript\">alert(\"ERROR usuario o clave. Si has olvidado tu contraseña Pincha aquí para recuperarla. Si te has registrado con anterioridad busca en tu correo electrónico el mensaje de activación y sigue sus instrucciones. Si no te has registrado, por favor, debes hacerlo \");   
                    window.history.back();   
                    </script>"; 
                exit; 
}   
 
?>

El código de logout (ComandBTNLout.php) es:

Código PHP:

  <a href="login/main_logout.php" onClick="window.open(this.href, this.target, 'top='+parseInt(((screen.height) / 2) - 100)+',left='+parseInt(((screen.width) / 2) - 175)+',width=350,height=125,resizable=no,scrollbars=no,titlebar=no,status=no,toolbar=no,location=no,directories=no,menubar=no');return false;window.close();exit">Logout</a>

Que lleva a la página "login/main_logout.php" cuyo código es:

Código PHP:

  <?php session_start(); 
//Compruebo errores 
error_reporting(E_ALL & ~E_NOTICE);  
ini_set("display_errors", 1);  
 
?><html> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd "> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 
 
    <?php         
 
    //Detectammos el idioma del explorador 
 
       $Lengua = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'],0,2); 
 
    //Detectamos la pagina en que estamos y convertimos a minúsculas para evitar problemas al teclear la página sin saber 
 
              $site = $_SERVER['PHP_SELF'];  
           $pagina = strtolower($site); 
 
    ?> 
 
<head> 
 
   <meta http-equiv="Content-Type"content=" text/html;charset=utf-8"> 
 
 <!--Aquí se indica donde está la hoja de estilos CSS --> 
 
 <?php 
 
    include('../phpBits/estilo_css.php'); 
 
        ?> 
 
   <!--Aquí se indican los estilos CSS particulares de esta hoja CSS --> 
<style></style> 
 
</head > 
 
<body> 
 
<div id="popup"> 
 
    <p></center>¿Estas seguro de que quieres salir?</center></p> 
 
    <table width="300" border="0" align="center" cellpadding="0" cellspacing="1" > 
        <tr> 
        <form name="form1" method="post" action="logout.php"> 
            <td> 
                <table width="100%" border="0" cellpadding="3" cellspacing="1"> 
                <tr> 
                <td><center><input type="submit" name="Submit" value="Logout"></center></td> 
                </tr> 
                </table> 
            </td> 
        </form> 
        </tr> 
    </table> 
    <script language=javascript>  
     onclick="self.close()"; 
    </script> 
</div> 
</body> 
</html>

que destruye las sesiones con este codigo (logout.php):

Código PHP:

  <?php 
//destruyo la sesión 
session_start(); 
session_destroy(); 
?> 
<script language=javascript>  
self.close(); 
opener.location.reload();  
 </script

>

Los estilos de CSS son:

Código HTML:

/*Saludo usuario*/

	#UserREG{float:left;z-index:10;font-weight: bold; color:FireBrick;height:auto;width:auto;padding:0.25%; margin:0.1em;}
	

/*login/Logout/Cambio de Clave*/

	#LOGIN {float:right;z-index:10;font-weight: bold;height:auto;width:auto;padding:0.25%; margin:0.1em;}
	#LOGIN a:link { text-decoration: none; }
	#LOGIN a:visited { text-decoration: none; color: #666 }
	#LOGIN a:hover {color: blue }
	
	/*PopUp login/Logout/Cambio de Clave/actualizaciones de perfil y popup's en general*/
	
	#popup body {color:purple;background-color:#d8da3d;}
	#popup {background:#e9e9e9;z-index:5;color:#ffffff;left:auto;padding:10px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;}
	#popup {text-decoration:none;font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif;color:FireBrick;}
	#popup table{background:#e9e9e9;font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif;color:DarkRed;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px; }
	#popup label {text-decoration:none;font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif;color:FireBrick;}
	#popup legend {text-decoration: none;font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif;color:DarkRed;}
	#popup radio {text-decoration: none;font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif;color:FireBrick;}

Creo que está todo, a mi me funciona. Te lo he puesto según lo tengo yo, lo tendrás que adpatar a tus necesidades.
Si necesitas algo más o tienes alguna duda, estoy por aquí.

Un saludo,

nero97 · #4 (**permalink**) 28/04/2011, 08:16

Cita:

Iniciado por Rankxerox1984

Hola Nero:

Te paso como lo tengo hecho yo por si te sirve. Funciona con sesiones. Asumo que tienes todo el tema de registro de usuario creado. Al principio de la página declaras "session_start"
En cada página que desees tener el login añadess esto:

Código PHP:

 
    
        <!--Usuario registrado--> 
         
        <div id="UserREG"><?php 
             
            $_SESSION['usuario']=$usuario; 
            echo $usuario; 
             
        ?></div>     
  
        <!--Logout--> 
         
        <div id="LOGIN"> 
            <?php 
 
                include('login/ComandBTNLogout.php'); 
 
            ?> 
        </div>     
         
          <!--Login--> 
        <div id="LOGIN"> 
            <?php 
 
                include('login/ComandBTNLogin.php'); 
 
            ?> 
        </div>

El código de login (ComandBTNLogin.php) es:

Código PHP:

  <a href="login/main_login.php" onClick="window.open(this.href, this.target, 'top='+parseInt(((screen.height) / 2) - 100)+',left='+parseInt(((screen.width) / 2) - 175)+',width=350,height=200,resizable=no,scrollbars=no,titlebar=no,status=no,toolbar=no,location=no,directories=no,menubar=no');return false;window.close();exit">Login</a>

Que lleva a la página "login/main_login.php" que contien el form del login y cuyo código es:

Código PHP:

  <?php session_start(); 
//Compruebo errores 
error_reporting(E_ALL & ~E_NOTICE);  
ini_set("display_errors", 1);  
 
?><html> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd "> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 
 
    <?php         
 
    //Detectammos el idioma del explorador 
 
       $Lengua = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'],0,2); 
 
    ?> 
 
<head> 
 
   <meta http-equiv="Content-Type"content=" text/html;charset=utf-8"> 
 
 <!--Aquí se indica donde está la hoja de estilos CSS --> 
 
 <?php 
 
    include('../phpBits/estilo_css.php'); 
 
        ?> 
 
   <!--Aquí se indican los estilos CSS particulares de esta hoja CSS --> 
<style></style> 
 
</head > 
 
<body> 
 
<div id="popup"> 
 
    <table width="300" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC"> 
        <tr> 
        <form name="form1" method="post" action="checklogin.php">     
            <td> 
            <table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF"> 
                <tr> 
                    <td colspan="3"><center><strong>Acceso</strong></center></td> 
                </tr> 
                 
                <tr> 
                    <td width="78">Usuario</td> 
                    <td width="6">:</td> 
                    <td width="294"><input name="usuario" type="text" id="usuario"></td> 
                </tr> 
 
                <tr> 
                    <td>Clave</td> 
                    <td>:</td> 
                    <td><input name="clave" type="password" id="clave"></td> 
                </tr> 
                 
                <tr> 
                    <td>&nbsp;</td> 
                    <td>&nbsp;</td> 
                    <td><input type="submit" name="Submit" value="Login"></td> 
                </tr> 
                <tr> 
                    <td colspan="3"> 
                    <center><a href="#" onclick="getUsuario()">Si has olvidado tu clave pincha aquí</a></center></td> 
                                 
                    <script language=javascript>  
                    function getUsuario() 
                    {var usuario;usuario = document.form1.usuario.value;  
                    window.location="../login/RescateClave.php?usuario="+usuario;  } 
                    </script> 
                 
                </tr> 
            </table> 
        </form> 
    </div> 
        <script language=javascript>  
    onclick="self.close()"; 
    </script> 
    </table> 
</body> 
</html>

El usuario se verifica con:

Código PHP:

  <?php session_start (); 
//Compruebo errores 
error_reporting(E_ALL & ~E_NOTICE);  
ini_set("display_errors", 1);  
 
// Llamo las variables de conexión a DB 
 
        require_once ('../recor/LoginDB.php'); 
          
// Nombre de la tabla 
     
        $tbl_name="usuarios";   
 
// Defino $usuario y $clave  
        $usuario=$_POST['usuario'];  
        if (empty ($_POST['usuario'])) {echo "<script type=\"text/javascript\">alert(\"ERROR: Pon un usuario\");   
                    window.history.back();   
                    </script>"; 
                exit; 
                };   
        $clave=$_POST['clave']; 
        if (empty ($_POST['clave'])) {echo "<script type=\"text/javascript\">alert(\"ERROR: Pon la clave\");   
                    window.history.back();   
                    </script>"; 
                exit; 
                };   
 
// Protejo frente a MYSQL injection 
        $usuario = stripslashes($usuario); 
        $clave = stripslashes($clave); 
 
// Abro conexión y selecciono la base de datos 
        $connection = mysql_connect($host, $user, $pass) or die ("Unable to connect!");  
        mysql_select_db($db) or die ("Unable to select database!");  
         
//Elimino los usuarios inactivos más antiguos de diez dias 
 
$SelFAKEUSER =mysql_query ("delete from usuarios WHERE datediff(CURDATE(),fecha)>10 and activo='0'"); 
         
//Construyo la select 
        $sql="SELECT * FROM $tbl_name WHERE usuario='$usuario' and clave='$clave' and`activo`=1"; 
        $result=mysql_query($sql); 
 
// Cuento las filas de la tabla  
        $count=mysql_num_rows($result);  
         
// Si $usuario y $clave coinciden, y Activo es igual a 1, tiene que haber una fila 
 
        if($count==1){ 
 
// Registro $usuario, $clave y redirijo a la página de destino  
         
    $_SESSION['usuario'] = $usuario;  
    $_SESSION['clave'] = $clave;  
     
     
//abro la ventana de destino     
?>  
<script language=javascript>  
 
self.close(); 
opener.location.reload();  
 
 </script> 
<?php 
 
}  
else {  
    echo "<script type=\"text/javascript\">alert(\"ERROR usuario o clave. Si has olvidado tu contraseña Pincha aquí para recuperarla. Si te has registrado con anterioridad busca en tu correo electrónico el mensaje de activación y sigue sus instrucciones. Si no te has registrado, por favor, debes hacerlo \");   
                    window.history.back();   
                    </script>"; 
                exit; 
}   
 
?>

El código de logout (ComandBTNLout.php) es:

Código PHP:

  <a href="login/main_logout.php" onClick="window.open(this.href, this.target, 'top='+parseInt(((screen.height) / 2) - 100)+',left='+parseInt(((screen.width) / 2) - 175)+',width=350,height=125,resizable=no,scrollbars=no,titlebar=no,status=no,toolbar=no,location=no,directories=no,menubar=no');return false;window.close();exit">Logout</a>

Que lleva a la página "login/main_logout.php" cuyo código es:

Código PHP:

  <?php session_start(); 
//Compruebo errores 
error_reporting(E_ALL & ~E_NOTICE);  
ini_set("display_errors", 1);  
 
?><html> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd "> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> 
 
    <?php         
 
    //Detectammos el idioma del explorador 
 
       $Lengua = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'],0,2); 
 
    //Detectamos la pagina en que estamos y convertimos a minúsculas para evitar problemas al teclear la página sin saber 
 
              $site = $_SERVER['PHP_SELF'];  
           $pagina = strtolower($site); 
 
    ?> 
 
<head> 
 
   <meta http-equiv="Content-Type"content=" text/html;charset=utf-8"> 
 
 <!--Aquí se indica donde está la hoja de estilos CSS --> 
 
 <?php 
 
    include('../phpBits/estilo_css.php'); 
 
        ?> 
 
   <!--Aquí se indican los estilos CSS particulares de esta hoja CSS --> 
<style></style> 
 
</head > 
 
<body> 
 
<div id="popup"> 
 
    <p></center>¿Estas seguro de que quieres salir?</center></p> 
 
    <table width="300" border="0" align="center" cellpadding="0" cellspacing="1" > 
        <tr> 
        <form name="form1" method="post" action="logout.php"> 
            <td> 
                <table width="100%" border="0" cellpadding="3" cellspacing="1"> 
                <tr> 
                <td><center><input type="submit" name="Submit" value="Logout"></center></td> 
                </tr> 
                </table> 
            </td> 
        </form> 
        </tr> 
    </table> 
    <script language=javascript>  
     onclick="self.close()"; 
    </script> 
</div> 
</body> 
</html>

que destruye las sesiones con este codigo (logout.php):

Código PHP:

  <?php 
//destruyo la sesión 
session_start(); 
session_destroy(); 
?> 
<script language=javascript>  
self.close(); 
opener.location.reload();  
 </script

>

Los estilos de CSS son:

Código HTML:

/*Saludo usuario*/

	#UserREG{float:left;z-index:10;font-weight: bold; color:FireBrick;height:auto;width:auto;padding:0.25%; margin:0.1em;}
	

/*login/Logout/Cambio de Clave*/

	#LOGIN {float:right;z-index:10;font-weight: bold;height:auto;width:auto;padding:0.25%; margin:0.1em;}
	#LOGIN a:link { text-decoration: none; }
	#LOGIN a:visited { text-decoration: none; color: #666 }
	#LOGIN a:hover {color: blue }
	
	/*PopUp login/Logout/Cambio de Clave/actualizaciones de perfil y popup's en general*/
	
	#popup body {color:purple;background-color:#d8da3d;}
	#popup {background:#e9e9e9;z-index:5;color:#ffffff;left:auto;padding:10px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;}
	#popup {text-decoration:none;font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif;color:FireBrick;}
	#popup table{background:#e9e9e9;font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif;color:DarkRed;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px; }
	#popup label {text-decoration:none;font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif;color:FireBrick;}
	#popup legend {text-decoration: none;font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif;color:DarkRed;}
	#popup radio {text-decoration: none;font-family:Helvetica,Geneva,Arial,SunSans-Regular,sans-serif;color:FireBrick;}

Creo que está todo, a mi me funciona. Te lo he puesto según lo tengo yo, lo tendrás que adpatar a tus necesidades.
Si necesitas algo más o tienes alguna duda, estoy por aquí.

Un saludo,

Gracias!!!!!! Me sirvio de muchooo!!