Crear login en php con mysql

Crear login en php con mysql

Creación de una login screen hecho en html y php con conexión a base de datos mysql.

Para este login screen hay que instalar php, mysql, phpmyadmin y apache en ubuntu vallan a mi anterior post, click aqui.

Iré comentado el código para ir explicando parte por parte cada elemento.

Lo primero es ir a phpmyadmin, en mi caso como tengo el servidor instalado en mi localhost, la dirección sera http://localhost/phpmyadmin.

login en phpmyadmin

Nos logueamos y creamos nuestras base de datos, su tabla, y los siguientes campos, “id, usuario, admin, password“, el id sera autoincrement y primary key, el usuario sera el nombre de usuario, el admin sera un valor boolean, o como lo escribe mysql tinyint, que sera falso si no eres el administrador y verdaderos si eres el admnistrador, y el password evidentemente sera el password.

Creación de base de datos en mysql

Ya tenemos la base de datos creada y la tabla ahora vamos a introducir dos valores de prueba uno sera el administrador y otro sera un usuario común. El administrador sera “Usuario: admin, password: admin” y el usuario común, “Usuario: paco, password:123456“, primero y antes de todo sera pasar nuestro password a hash para tener más seguridad.

Para ello hay varias web que encriptan en en hash salt, pero yo lo haré con el mismo código que utilizaremos mas adelante en una web que emula un entorno php. El código sera el siguiente, “echo password_hash(‘admin’, PASSWORD_DEFAULT);” y en http://sandbox.onlinephpfunctions.com/ lo introducimos y lo ejecutamos con cada una de las password que queremos guardar en la db.

Creacion de tabla y camos en mysql

Una vez terminados los trabajos previos vamos directos con el código.

Primero vamos con el archivo que llamaremos conexion.php, que establecera una conexion con la base de datos.

<?php
/* Bien sencillo, llamamos a mysqli y le pasamos, la ip, el usuario de mysql, el password en este caso vacío, y
la base de datos */
$conexion = @mysqli_connect('localhost', 'root', '', 'usuarios');
if (!$conexion) {
    echo "Error: " . mysqli_connect_error();
	exit();
}
  
?>

Lo siguinte sera el index.php

<?php
session_start();
	$incorrecto = false;

if (empty($_SESSION) and isset($_POST['usuario'])){
	include ('conexion.php');
	/* con esto evitamos caracteres extraños para evitar ataques maliciosos por ejemplo, aunque en próximos
	 * posts veremos msqli->prepare para evitar mejor aun el sql injection */
	$nombre_de_usuario=mysqli_real_escape_string($conexion,$_POST['usuario']);
	$contraseña_introducida=$_POST['password'];
	//se hará la consulta a la base de datos
	$consulta='select * from usuarios where usuario="'.$nombre_de_usuario.'"';
	//si hubo un resultado
	if ($ejecución_de_la_consulta=$conexion->query($consulta)){
		//se obtiene la contraseña registrada
		$datos_consulta=$ejecución_de_la_consulta->fetch_assoc();
		//se compara la contraseña
		$verificar_contraseña=password_verify($contraseña_introducida,$datos_consulta['password']);
		//si el resultado de la comparación ha sido verdadero
		if ($verificar_contraseña){
			//se asigna la sesión y redirecciona
			$_SESSION['usuario']=$nombre_de_usuario;
			$_SESSION['tipo-usuario']=$datos_consulta['admin'];
                        // Redirigimos al archivo home.php si todo va bien
			header ('location: home.php');
			echo "correcto";
		}//si la contraseña es incorrecta
		else{
			$incorrecto = true;
		}
	}//si el usuario no está registrado

	else{
		$incorrecto = true;
	}
}
?>

<!DOCTYPE html>
<html lang="es">
  <head>    
    <title>Prueba login</title>
    <link href="css/estilo.css" rel="stylesheet">  </head>
  <body class="index">

	<body>
		<form class="contendor_form" method="post" action="index.php">
			<label>Log in!</label><br/>
                        //Cuando sea incorrecto se mostrará lo siguiente
			<?php if ($incorrecto) :?>
				<span style="color:red;">Usuario/Password incorrecto</span><br/>
			<?php endif; ?>
			<input type="text" name="usuario" placeholder="Usuario..."><br/>
			<input type="password" name="password" placeholder="Password..."><br/>
			<input type="submit" value="Entrar">
		</form>
		
	</body>

</html>

Como podemos ver redirigimos a home.php que sera el siguiente paso.

<?php
session_start();
//si hay una sesión
if (isset($_SESSION['usuario']) && isset($_SESSION['tipo-usuario'])){
    //se muestra el contenido de la página web
?>
<?php if(array_key_exists('cerrar',$_POST)){
   /* Redirigimos al archivo que destruirá las cookies
    header ('location: cerrar_sesion.php');
}?>
<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <title>Home</title>
    <link href="css/estilo.css" rel="stylesheet">  
  </head>
  <body class="home">
      <div class="contenedor-usuario">
                  // Aquí mostramos el nombre del usuario y le añadimos "es el administrador" si es el administrador
		  <label>Usuario: <?php echo $_SESSION['usuario']; if ($_SESSION['tipo-usuario'] == 1): echo " el Administrador"; endif;?></label><br/><br/>
		  <?php if ($_SESSION['tipo-usuario']):?>
                  // En próximos post desarrollaremos el formulario de registro solo activo para el administrador
		  <div><a href="registrar.php">Registrar a un nuevo usuario!</a></div><br>
		  <?php endif; ?>
		  <div><a href="cerrar_sesion.php">Cerrar sesión!</a></div>
      </div>
      <div class="contenido">
		<article style="text-align: center;">
                // Aquí se muestra contenido exclusivo del administrador
		<?php if ($_SESSION['tipo-usuario']):?>
		<h3>Aquí se muestra el contenido web visibre solo para el administrador</h3><hr>
		<?php endif; ?>
		<h4>Aquí se muestra el contenido web visible solo para usuarios registrados.</h4>
		</article>
	  </div>
 
  </body>
</html>
<?php
}
//si no hay sesión
else{
    //se redirecciona
    header ('location: index.php');
}
?>

Y como uno el archivo css/estilo.css, es algo cutre pero como es para un tutorial da igual, por lo menos no se ve tan mal.

/* index */

.index {
	background-color:  #d2b4de ;
}

.contendor_form {
	width: 30%;
	margin: 5% auto auto auto;
	border: 1px solid rgba(0, 0, 0, 0.3);
	border-radius: 2px;
	text-align: center;
	background-color:rgba( 251, 252, 252, 0.7);
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	padding: 2% 0 2% 0;
}

.contendor_form label {
	color: #f1948a;
	font-size: 2em;
}


.contendor_form input {
    margin:2% auto 2% auto;
    text-align: center;
    width:80%;
}

.contendor_form input[type='checkbox'] {
	position: relative;
	top: -45px;
	float: right;
}

.contendor_form input[type='submit'] {
    background-color: #cc9ae0;
    color:white;
	border:none;
    padding: 2%;
    font-size:1.2em;
    font-weight:bold;
}
.contendor_form input[type='text'],  .contendor_form input[type='password']{
    background-color: #ccd1d1 ;
    color: #5d6d7e;
	border:none;
    padding: 1%;
    font-size:1em;
}
/* fin index */
/* home */
.home {
	background-color:#088A68;
}

.contenedor-usuario {
	width: 25%;
	border: 1px solid rgba(0, 0, 0, 0.3);
	margin:2%;
	border-radius: 3px;
	background-color:rgba( 255, 255, 255, 0.95);
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
	padding: 1.5%;
	float:left;
	text-align:center;

}
.contenido {
	width: 60%;
	border: 1px solid rgba(0, 0, 0, 0.3);
	margin:2%;
	border-radius: 3px;
	background-color:rgba( 255, 255, 255, 0.95);
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
	padding: 1%;
	float: right;
}
.contenedor-usuario div {
    text-align: center;
    width:90%;
    line-height:2em;
    background-color: #81F79F ;
	border:none;
    padding: 2% 3%;
    font-size:1em;
    margin: auto;
}
.contenedor-usuario a {
	text-decoration:none;
	color: white;

}

.contenedor-usuario label {
	color: #f1948a;
	font-size: 1em;
	font-weight:bold;
}
/* fin home */

Os dejo unas imágenes del funcionamiento.

login screen en php

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Pin It on Pinterest