Blog de programación, errores, soluciones
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 explicare.
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 mas simples como PureCSS tienen un muy buen estilo para formularios.
El formulario
El formulario, lo podemos crear de varias maneras, esto dependera 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 pagina en la que estamos. Yo particularmente prefiero enviar los datos a otra pagina 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 logica.
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 pagina, para esto subdiviré las partes principales.
$form = false;
if (!isset($_POST["name"]) || $_POST["name"] == "") {
$form = true;
}
if (!isset($_POST["password"]) || $_POST["password"]=="") {
$form = true;
}
En estas lineas estamos chequeando si existen las variables $_POST[‘name’] y $_POST[‘password’] ademas chequea si son string vacíos. En caso de que no exista la data enviada por post o este vacia el valor de $form sera false.
Siguientes lineas 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.
Tercera parte:
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). En caso de no usar un framework puedes tambien crear una clase que haga la validacion de esa forma puedes llamar a Validation(nombre de clase) y hacer $validation->name($_POST[‘name’]).
Ademas de hacer las validaciones también tenemos la decisión si vamos a procesar los datos o no y por ultimo 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; ?>
Luego de las validaciones tenemos:
if ($checkname && $checkpassword) {
$message .="// aqui va el chequeo de si existe en la base de datos";
$status="success";
}
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 esta hecha debido que hay múltiples sistemas de administración de bases de datos y hay varias maneras de conectarse en algunos.
Ultima Parte:
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.
Me encuentro pensando si debo o no meter el chequeo de usuario en mysql o hacer un post relacionado para que no sea demaciado largo si deseas puedes darme tu opinion en twitter.
