Check the new version here

Popular channels

Login en php,mysql con logout correcto



Panel de administrador con rango o nivel admin



Panel de cliente usuario con rango, privilegio normal




Este es un tutorial de como crear un login con php y motor de base de datos mysql, de todos los codigos de login en internet ninguno hace enfasis en si sirve o no el sistema de cerrar sesion o logout, me refiero a que cuando uno da click en el enlace cerrar sesion y uno va y da click en el boton atras de la barra del navegador uno generalmente se regresa a la sesion, encontrar un codigo correcto de login que tenga la solucion es dificil, aqui les comparto el login que despues de dos años logre tenerlo, cualquiera que no sepa esto hace que se pare el desarrollo.


Si hacen las cosas bien debera verse el login como en las fotos , recuerden pueden llegar a tener problemas de conexion con la base de datos dependen del programa que instalen si wamp server o xampp, lo que se es que me esmere por tener el codigo del login full lo que les destaco es que cuando den click en cerrar sesion cuando den click en la flecha atras del navegador nunca se volveran a la sesion es un login correcto.



Cuando esta en funcionamiento este login uno en la barra del navegador escribe el nombre de algun archivo php que este dentro del proyecto y no lo abre porque tiene que iniciar sesion.

1. van a crear un archivo index.php y pondran el formulario siguiente este archivo ira por fuera de toda carpeta es la cubierta principal cuando se abre una pagina web, los hosting reconoce ese archivo con el nombre index.php que es la primer pagina que saldra.





Document








Entrar





































2. Crearan una carpeta llamada PHP aqui pondran el codigo del login y demas importante.

este es el archivo cpadmin.php osea el archivo que sera el panel de administrador

include'../bd/conexion.php';
include ('../php/avatar.php');




?>





Document











Caja1




if(isset($_SESSION['username']))
{
echo'Cerrar Sesion';
}else
{
header('Location: ../index.php');
}

?>







Administrador

































3. van a crear este archivo cpusuario.php que sera el panel de usuario o cliente


include'../bd/conexion.php';
include ('../php/avatar.php');


?>





Document











Caja1




if(isset($_SESSION['username']))
{
echo'Cerrar Sesion';
}else
{
header('Location: ../index.php');
}

?>







Cliente



































4. este es el codigo principal del login, este codigo permite crear usuarios por nivel si administrador o paciente , cliente, eso lo especifican en la tabla mysql usuarios y en el condicional.


el archivo se llamara login.php ira dentro de la carpeta php


include '../bd/conexion.php';
session_start();

if(isset($_POST['btnenviar']))
{
$usuario = $_POST['nombre'];
$clave = $_POST['clave'];

$consulta = "SELECT id_usuario, nivel
FROM usuarios
WHERE nombre = '" . $usuario . "' AND clave = '" . $clave . "'";

$query = mysql_query($consulta);

if(mysql_num_rows($query) > 0)
{
$arraylogin = mysql_fetch_object($query);

$_SESSION['username'] = $arraylogin->id_usuario;

if($arraylogin->nivel == "Admin"
{

header("Location: ../php/cpadmin.php ";

}
elseif($arraylogin->nivel == "cliente" )
{


header("Location: ../php/cpusuario.php ";

}
}


else {

header("Location: ../index.php ";
}




}


?>



5. Dentro de la carpeta PHP crearan un archivo llamado logout.php y pondran el siguiente codigo


session_start();
session_destroy();


header ('Location: ../index.php');




?>



6. crearan un archivo llamado avatar.php aqui el codigo llamara el nombre del usuario que acaba de iniciar sesion y cuando se da click en su nombre sale una ventanita como la de facebook que contendra la opcion cerrar sesion, aquel codigo que rodea el enlace cerrar sesion ese codigo debera ir en los paneles que creen de diferentes niveles de usuario en este caso pues el login tiene dos niveles de usuario administrador y cliente por lo tanto el codigo esta bien.


include '../bd/conexion.php';
session_start();
@$idusuario = $_SESSION['username'];


class Elusuario
{

public static function avatar()
{

global $idusuario;

$consultanombre = "SELECT nombre
FROM usuarios
WHERE id_usuario = '".$idusuario."'";

$query = mysql_query($consultanombre);
$row = mysql_num_rows($query);
if($row > 0 )
{
while($array = mysql_fetch_object($query))
{
echo '';
echo $array->nombre.'
';


}

}

}


}

?>




7. crearan una carpeta llamada js para poner codigo solo javascript y luego creen un archivo llamado windowlogin.js lo meten ahi que contendra un codigo javascript de la ventana como la de facebook que contiene la opcion de cerrar sesion, este codigo es muy dificil de conseguir generalmente todo codigo tiene su nombre en ingles, en este caso este es un codigo que se oculta cuando se da click por fuera del document.

MEjor dicho estan bendecidos con este post porque les hago un excelente aporte y aunque los codigos no son iguales los que permiten crear esa ventana y no hay necesidad de usar jquery nos permite salir rapido del problema.

Adicionen el codigo al archivo llamado windowlogin.js

function mostrar()
{
document.getElementById("box1".style.display="block";

}

window.addEventListener('mouseup', function(event)
{

var box = document.getElementById('box1');
if(event.target != box && event.target.parentNode != box)
{
box.style.display = 'none';

}

});




8. crearan una carpeta llamada img para guardar ahi las imagenes les adjuntare una imagen de iconos ahi estara la imagen del triangulito aquel que se ve en la ventana donde esta la opcion de cerrar sesion en facebook , mercadolibre, 4shared y mas paginas.

La imagen tiene este nombre sprite-iconos.png descarguenla y pongalan en la carpeta img.





9. crearan una carpeta llamada css y crearan un archivo llamado cpusuario.css y pegaran el siguiente codigo .


*{
padding:0px;
margin:0px;
}
#contenedorglobalheader
{
width:100%;
min-height:55px;
background-color: #F5F2EF;
border-bottom: 1px solid #CCC;

}

#titlecpanel
{
float:left;
margin:9px 0px 0px 30px;

}

#contaccountbar
{
width:169px;
height:52px;
background:none repeat scroll 0% 0% padding-box #FFF;
border-style:solid;
border-color:#ccc;
border-width:0px 1px 1px;
cursor:pointer;
border-radius:0px 0px 4px 4px;
position:absolute;
right:330px;
float:right;
}


#contaccountbar:after
{
display:block;
visibility:hidden;
height:0px;
clear:both;
content:".";
}

#cntnotificaciones
{
border-right:1px solid #ccc;
float:left;
padding:17px 17px 18px 20px;
position: relative;

}

#cnticononotificaciones
{
background:url("../img/sprite-iconos.png" no-repeat scroll 0% 0% transparent;
display:block;
width:24px;
height:17px;

}

#myaccount:after
{

display:block;
visibility:hidden;
height:0px;
clear:both;
content:".";

}

#myaccount
{
float:left;
padding:15px 20px 17px;
background-color:;
box-sizing:border-box;
position:absolute;
right:0px;
}



.nameavatar
{
margin-top:3px;
position:relative;
text-decoration:none;
}



#box1{

position: absolute;
top:63px;
right:360px;
width:300px;
height:158px;
background-color:#FFF;
padding:20px;
display:none;
border:1px solid #ccc;
border-radius:3px;

}


a{
text-decoration:none;

}

.triangulo
{
background-image:url("../img/sprite-iconos.png";
background-position:-169px -3px;
width:20px;
height:10px;
position:absolute;
top:-10px;
right:30px;

}



}




10 . crearan una carpeta llamada bd y luego dentro de la carpeta y crearan un archivo llamado conexion.php y luego pegaran el siguiente codigo que es la conexion a la base de datos mysql


$localhost = "localhost";
$usuario = "root";
$clave = "";
$db ="logincorrecto";

$conexion = mysql_connect($localhost, $usuario, $clave);
$db = mysql_select_db($db);


if(!$conexion)
{

echo "Hay un problema con la conexion ";
}


if(!$db)
{
echo "Hay un error con la base de datos";

}




?>





11. van a instalar wampserver o xampp usen mejor si quieren wampserver que es el que uso, es un programa que hace el papel de servidor local ahi todos los sque desarrollan paginas web ahi prueban lo que programan, si son primiparos y no conocian el programa ya lo conocen y cuando hagan algo de paginas web todo lo probaran con alguno de los dos, en wamp server serciorense que el programa este en verde y en xampp que donde dice apache y mysql den click en start osea iniciar sino no correra tienen que dar click en start.

Atencion las carpetas y los archivos que han creado deben estar metidos en la siguiente carpeta de acuerdo al programa que hallan instalado, si instalaron xampp la carpeta se llama htdocs ahi pondran todo el codigo que les comparto la carpeta esta dentro de donde quedo instalado xampp, si instalaron mas bien wampserver la carpeta se
0
0
0
1
0No comments yet