Como crear un login en PHP

Primero que nada tenga en cuenta que puede tener varias maneras de hacer un login en PHP, en esta sección haremos uno y lo explicaré.

Empecemos por el estilo del login, para que tenga una cierta consistencia visualmente. En este caso lo haré dentro de etiquetas(tags) style.

<style>
form{
	background-color:#d5d5d5;
	padding:10px 20px;
	width:600px;
	border-radius: 5px;
}
form .form_sector{
	margin-bottom: 5px;
}
form .form_label{
	display: inline-block;
	width:100px;
}
form .form_input{
	display: inline-block;
	width:450px;
}
form .form_submit{
	width:550px;
	text-align: right;
}
form .form_submit input{
	display: inline-block;
	width:150px;
}
input{
	width:100%;
}
.warning{
	width:550px;
	background-color:#ffe861;
	border-radius: 15px;
	padding: 10px;
}
.success{
	width:550px;
	background-color:#a2ffb9;
	border-radius: 15px;
	padding:10px;
}
</style>

Tenga en cuenta que lo anterior probablemente usted no lo haga, ya que con CSS frameworks como Bootstrap o incluso los más simples como PureCSS tienen un muy buen estilo para formularios.

El formulario

El formulario, lo podemos crear de varias maneras, esto dependerá de como utilicemos el CSS, aquí usaremos el clásico.

<form action="<?php $_SERVER['PHP_SELF']?>" method="post">
	<div class=""><h2>Login</h2></div>
	<div class="form_sector">
		<div class="form_label"><label for="name">Name:</label></div>
		<div class="form_input"><input type="text" name="name" id="name" /></div>
	</div>
	<div class="form_sector">
		<div class="form_label"><label for="password">Password:</label></div>
		<div class="form_input"><input type="text" name="password" id="password" /></div>
	</div>
	<div class="form_sector">
		<div class="form_submit"><input type="submit" value="confirm"/></div>
	</div>
</form>

Vea que en el formulario ponemos $_SERVER['PHP_SELF'] , esto hará que le enviemos los datos a la misma página en la que estamos. Yo particularmente prefiero enviar los datos a otra página PHP por ejemplo process_login.php

En este caso lo haremos con $_SERVER['PHP_SELF'] pero tenga en cuenta que hacer un archivo aparte separa la parte visual de la parte lógica.

Continuemos viendo nuestra parte PHP, todo lo que tiene la etiqueta style no lo pondré, pero tenga en cuenta que va arriba de lo siguiente:

<?php
$form = false;
if (!isset($_POST["name"]) || $_POST["name"] == "") {
	$form = true;	
}
if (!isset($_POST["password"]) || $_POST["password"]=="") {
	$form = true;	
}
?>
<?php if($form): ?>
<form action="<?php $_SERVER['PHP_SELF']?>" method="post">
	<div class=""><h2>Login</h2></div>
	<div class="form_sector">
		<div class="form_label"><label for="name">Name:</label></div>
		<div class="form_input"><input type="text" name="name" id="name" /></div>
	</div>
	<div class="form_sector">
		<div class="form_label"><label for="password">Password:</label></div>
		<div class="form_input"><input type="text" name="password" id="password" /></div>
	</div>
	<div class="form_sector">
		<div class="form_submit"><input type="submit" value="confirm"/></div>
	</div>
</form>
<?php else:
$message= "";
$status;
$checkname = preg_match("$[a-z0-9_-]{3,16}$",$_POST['name']);
if ($checkname !== false && $checkname == 0) {
	$message .="Your username is not allowed";
	$status="warning";
}
$checkpassword =preg_match("$(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$",$_POST['password']);
if ($checkpassword !== false && $checkpassword == 0) {
	$message .="your password is not allowed";
	$status="warning";
}
if ($checkname && $checkpassword) {
	$message .="// aqui va el chequeo de si existe en la base de datos";
	$status="success";
}
echo "<div class=\"$status\">";
echo "$message";
echo "</div>";
endif; ?>

Analizando el código

Ahora nos toca analizar el código de la página, para esto separaré las partes principales.

$form = false;
if (!isset($_POST["name"]) || $_POST["name"] == "") {
	$form = true;	
}
if (!isset($_POST["password"]) || $_POST["password"]=="") {
	$form = true;	
}

En estas líneas estamos chequeando si existen las variables $_POST['name'] y $_POST['password'] además chequea si son string vacíos. En caso de que no exista la data enviada por post o este vacía el valor de $form será false.

Siguientes líneas de código:

<?php if($form): ?>
<form action="<?php $_SERVER['PHP_SELF']?>" method="post">
	<div class=""><h2>Login</h2></div>
	<div class="form_sector">
		<div class="form_label"><label for="name">Name:</label></div>
		<div class="form_input"><input type="text" name="name" id="name" /></div>
	</div>
	<div class="form_sector">
		<div class="form_label"><label for="password">Password:</label></div>
		<div class="form_input"><input type="text" name="password" id="password" /></div>
	</div>
	<div class="form_sector">
		<div class="form_submit"><input type="submit" value="confirm"/></div>
	</div>
</form>

Decido si el formulario es mostrado.

La parte de chequeo de si las variables existen también podrían ir dentro de una clase validación, quedando el código mucho más claro.

Tercera parte: Validación

Realizo el chequeo del formulario con expresiones regulares de los datos. Esta parte se le llama validación, en Laravel y otros frameworks la puede encontrar con ese nombre(validation).

Puedes optar por una validación hecha por terceros, en Packagist hay una amplia variedad.

En caso de no usar un framework o un paquete de terceros puedes también crear una clase que haga la validación, de esa forma puedes llamar a validation(nombre de clase) y hacer $validation->name($_POST['name']).

Además de hacer las validaciones, también tenemos la decisión si vamos a procesar los datos o no y por último el mensaje a usuario.

<?php else:
$message= "";
$status;
$checkname = preg_match("$[a-z0-9_-]{3,16}$",$_POST['name']);
if ($checkname !== false && $checkname == 0) {
	$message .="Your username is not allowed";
	$status="warning";
}
$checkpassword =preg_match("$(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$",$_POST['password']);
if ($checkpassword !== false && $checkpassword == 0) {
	$message .="your password is not allowed";
	$status="warning";
}
if ($checkname && $checkpassword) {
	$message .="// aqui va el chequeo de si existe en la base de datos";
	$status="success";
}
echo "<div class=\"$status\">";
echo "$message";
echo "</div>";
endif; ?>

Chequeo en base de datos

Aquí decidimos si entrar a nuestra base de datos y chequear si el usuario existe o no. Tenga en cuenta que la parte de conexión a base de datos no está hecha debido a que hay múltiples sistemas de administración de bases de datos y hay varias maneras de conectarse en algunos.

Luego de las validaciones tenemos:

if ($checkname && $checkpassword) {
        // aqui va el chequeo de si existe en la base de datos
        //En caso de success muestro un mensaje de logueado con exito
	$message .="Login success";
	$status="success";
}

En este caso forzaremos que sea success porque no estamos chequeando que el usuario esté en la base de datos, eso lo haremos en otro post.

Esta parte también puede ser puesta en la clase validation, haciendo que sí pasa la clase validation.

Luego si la clase validation no retorna un error de validación. Continuamos con el chequeo dentro de la base de datos, así que podríamos tener varios mensajes y status(estado), siendo success cuando el usuario logra pasar la validación y es chequeado que el usuario es el que dice ser. En los otros casos el status sería error o warnning

Última Parte: mensaje de éxito o fracaso dependiendo de si pudimos loguearnos

echo "<div class=\"$status\">";
echo "$message";
echo "</div>";
endif; ?>

Creo que no hace falta explicarla, ya que es el mensaje que dará, $status solo define que clase utilizara el estilo y $message el mensaje.

Podríamos mejorar un poco nuestro mensaje poniendo un if que cheque si $status != "" eso evitara que nuestro div sea imprimido en pantalla si aún no tiene un valor de "success" o "error" la variable $status

Me encuentro pensando si debo o no meter el chequeo de usuario en MySQL o hacer un post relacionado para que no sea demasiado largo si deseas puedes darme tu opinión en X(ex Twitter).

Category: php