El post que buscas se encuentra eliminado, pero este también te puede interesar

Login en php,mysql con logout correcto

Login en php,mysql con logout correcto

Panel de administrador con rango o nivel admin

mysql php

Panel de cliente usuario con rango, privilegio normal

logout php mysql


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.

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>

<div id="formulariologin">


<form action="./php/login.php" method="post">

<span>Entrar</span>
<br />
<br />

<label for="nombre">Usuario</label>
<input type="text" name="nombre" />
<br />
<br />

<label for="clave">Clave</label>
<br />
<input type="password" name="clave"/>
<br />
<br />
<input type="submit" name="btnenviar" value="Enviar" />


</form>




</div>

</body>
</html>





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

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




?>

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>

<link rel="stylesheet" href="../css/cpusuario.css" type="text/css" media="screen" title="no title" charset="utf-8"/>


<script src="../js/windowlogin.js"> </script>
</head>
<body>

<div id="box1">
<div class="triangulo"></div>

<h2>Caja1</h2>

<?php

if(isset($_SESSION['username']))
{
echo'<a href="../php/logout.php" id="optlogout">Cerrar Sesion</a>';
}else
{
header('Location: ../index.php');
}

?>


</div>

<header id="contenedorglobalheader" class="clearfix">

<div id="titlecpanel">
<h2>Administrador</h2>
</div>


<div id="contaccountbar">


<div id="cntnotificaciones">

<div id="cnticononotificacion"></div>

</div>


<div id="myaccount">

<?php Elusuario::avatar(); ?>

</div>


</div>




</header>

</body>
</html>


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


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


?>

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>

<link rel="stylesheet" href="../css/cpusuario.css" type="text/css" media="screen" title="no title" charset="utf-8"/>


<script src="../js/windowlogin.js"> </script>
</head>
<body>

<div id="box1">
<div class="triangulo"></div>

<h2>Caja1</h2>

<?php

if(isset($_SESSION['username']))
{
echo'<a href="../php/logout.php" id="optlogout">Cerrar Sesion</a>';
}else
{
header('Location: ../index.php');
}

?>


</div>

<header id="contenedorglobalheader" class="clearfix">

<div id="titlecpanel">
<h2>Cliente</h2>
</div>


<div id="contaccountbar">


<div id="cntnotificaciones">

<div id="cnticononotificacion"></div>

</div>


<div id="myaccount">

<?php Elusuario::avatar(); ?>

</div>


</div>




</header>


</body>
</html>



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


<?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


<?php
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.


<?php
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 '<a href="javascript:void(0)" onclick="mostrar();"; class="nameavatar">';
echo $array->nombre.'</a>';


}

}

}


}

?>




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.


login php mysql


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

<?php

$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 llama www ahi pondran entonces el codigo que les comparto.



12. ya instalado el progrma que escogieron entonces escribiran dentro del navegador en la barra www, escribiran lo siguiente. localhost/phpmyadmin


login con sistema de logout full

Si no les sale esa cubierta revisen si el icono de wampserver esta en verde y si usan xampp que donde dice apache y mysql le hallan dado click en start sino es que el puerto de apache o mysql esta mal averiguen para ese entonces si tienen problemas como cambiar el puerto de apache.

Aunque bueno digamos que si tienen instalado skype y justamente esta con una sesión abierta y dan click en wamp server o xampp depeden el que tengan instalado y ejecutan apache pero no se pone verde significa que deben cerrar la sesion de skype y esperar que vuelva a salir el formulario para ingresar datos en skype, luego si entonces el puerto que usa apache estara libre y vuelven a ejecutar apache.

Listo.....

otra cosa importante es que ahora en el archivo de conexion en xampp las funciones de php como mysql_connect o mysql_select_db exigen ponerle la i osea quedaria asi mysqli_select_db o mysqli_connect son las nuevas funciones para conectar con la bd es algo que deberan teenr en cuenta despues.

cuando les salga la cubierta escribiran como usuario root y la clave no ponen nada ingresan y luego debera salirles esto.

sistema de logout full para logi

Ahi les señalo con rojo donde deben dar click dan click en la consola sql ahi pegaran el siguiente codigo para crear las tablas mysql pero ojo primero den click en la base de datos que hallan creado y luego si dentro de ella en la consola pegaran el codigo para crear la tabla usuarios.

CREATE TABLE `usuarios` (
`id_usuario` int(11) NOT NULL AUTO_INCREMENT,
`nombre` varchar(255) DEFAULT NULL,
`apellido` varchar(255) DEFAULT NULL,
`correo` varchar(255) NOT NULL,
`sexo` varchar(255) DEFAULT NULL,
`clave` varchar(255) DEFAULT NULL,
`nivel` varchar(255) NOT NULL,
PRIMARY KEY (`id_usuario`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=latin1



Yo generalmente uso un comando que es show create table nombretabla y con eso me genera la estructura de la tabla que ya tengo creada para compartirlo y que los demas lo peguen y creen la tabla por consola.

El otro comando es describe nombretabla pero es mejor el primero.



OJO


Despues de haber creado la tabla dan click en ella y luego se van donde dice insertar creen dos usuarios con el siguiente nivel primero Admin asi con letra inicial en mayuscula porque si la dejan en minuscula no les servira a menos que busquen en el codigo del login en el condicional y lo adecuen a como necesitan.
El segund nivel es cliente para un segundo usuario y prueben el login.

importante

Le estuve trabajando al login con ajax pero no hay necesidad, estuve mirando paginas web si al iniciar sesion la flecha del navegador se movia y si , en mi caso probe ajax y generalmente uno tiene un div con id respuesta para recibir la informacion como respuesta entonces me daba de respuesta parte de la informacion cuando uno inicia sesion y sin css, vi que no habia necesidad, de pronto lo que hice fue en otro archivo lo llame validacion.php y ahi le mande por medio de ajax los datos que uno ingresa por login para luego mandar un mensaje de error o exito talvez asi hizo lago, estuve mirando facebook y pues ellos hacen mas es condicionales y redirigen con la funcion de php header hacia otras url que indican ciertos mensajes.



Recomendacion

Revisen mis otros post ahi hay varios buenos de programacion que he hecho como por ejemplo como manejar sprites que es una sola imagen que contiene varias imagenes diferentes por dentro, es algo enredado aprender a manejarlas pero conmigo estara solucionado, aprenderán fácil.

6 comentarios - Login en php,mysql con logout correcto

joshrsp +2
lo único que te recomiendo, es que la forma de conectar y las funciones a la base de datos como el row, hacer query, etc y eso, utilices las nuevas formas ya que esta sera removida prontamente y así también evitar sql injected
Gracias por tu aporte
Herni_Official +2
si deberia utilizar my sqli que es mucho mas seguro
jerauma
Gracias a vosotros
web_master_187
Gran aporte amigo lo estoy probando, una pregunta, no tendrás algún codido para que se pueda hacer el login con contraseña encriptada?
Makiber1990
Muy obsoleto el manejo que utilizas del ajax y el mysql.
leo640
Tenes algun tutorial sobre hacer una pagina e-commerce con php y mysql? se html y css pero estoy comenzando con php y mysql