¡Hola Girl! Hoy te compartimos un pequeño código para crear un login con PHP, trabajaremos la estructura con html, funcionamiento con JavaScript y jQuery y el procesamiento de información lo haremos con MySQL.
Antes de comenzar te damos un breve panorama del login que estaremos creando.
Primeramente crearemos la interfaz y funcionalidad para que los usuarios puedan crear una cuenta si no tienen una.
Enseguida trabajaremos la interfaz y funcionalidad para el inicio de sesión mediante sesiones en PHP.
Finalmente aprenderemos como cerrar sesión en nuestro proyecto web.
Al finalizar tendremos algo como esto 👇:
Tabla de Contenido
Recomendaciones Iniciales
Antes de comenzar con el código te compartimos las siguientes recomendaciones para que puedas implementar este código de login con PHP en tus proyectos:
- Asegúrate de incluir las librerías de Bootstrap.
- Asegúrate de incluir jQuery.
- Si usaras el estilo que sugerimos en este ejercicio asegúrate de llamarlo al inicio de las pantallas de crear cuenta y login (al final del post te decimos donde encontrarlo).
- Crea una base de datos, para este ejercicio únicamente utilizamos la tabla usuarios con los campos nombre, email y password.
- Incluye un archivo de conexión a tu base de datos.
Sin más preámbulo veamos el código con todo el ⚡POWER.
Crear Cuenta
<div class="container signup__container">
<div class="row mt-5 signup__box">
<div class="col-md-6 g-0 signup-form__image">
<img src="img/login.png" class="signup-form__img" />
</div>
<div class="col-md-6 signup-form__container">
<form class="signup-form__form">
<h2 class="mb-3 signup-form__title">Regístrate</h2>
<div class="mb-3">
<label>Ingresa tu nombre</label>
<input type="text" name="nombre" class="form-control" id="nombre" required>
</div>
<div class="mb-3">
<label>Ingresa tu correo</label>
<input type="email" name="email" class="form-control" id="email" required>
</div>
<div class="mb-3">
<label>Ingresa tu contraseña</label>
<input type="password" name="password" class="form-control" id="password" required>
</div>
<div class="mb-3">
<label>Confirma tu contraseña</label>
<input type="password" name="confirm_password" class="form-control" id="confirm_password" required>
</div>
<button type="submit" class="btn btn-success mt-3 signup-form__btn-signup">Registrarte</button>
<hr>
<a class="btn btn-info signup-form__btn-login mt-3" href="index">Iniciar Sesión</a>
</form>
<div class="alert alert-warning mt-4" role="alert">Las contraseñas no coinciden, verifica nuevamente</div>
<div class='alert alert-success signup__success mt-4' role='alert'>¡La cuenta se creó correctamente!</div>
<div class='alert alert-danger signup__fail mt-4' role='alert'>Ocurrió un error intenta nuevamente</div>
</div>
</div>
</div>Comenzaremos creando nuestro primer archivo, en este caso sería el de crear cuenta al cual le llamaremos signup.php.
En el siguiente código HTML puedes checar que tenemos dos contenedores principales signup-form__image, donde simplemente colocaremos una imagen y signup-form__container donde ira nuestro formulario.
Lo más importante de este código es nuestro formulario, en él definimos todos los campos que necesitamos para crear una cuenta.
Para este ejercicio solicitamos nombre, correo, contraseña y confirmar contraseña, dependiendo del tipo de dato definimos el type del input.
Finalmente tenemos tres alertas que mostraremos al usuario si las contraseñas no coinciden, si la cuenta se creó correctamente o si ocurrió algún error.
Por el momento agrega el código más adelante te mostramos como mostrar u ocultar una de estas alertas.
<script>
$(document).ready(function() {
$(".signup-form__form").submit(function(e) {
e.preventDefault();
var pass1 = $("#password").val();
var pass2 = $("#confirm_password").val();
validarPass(pass1, pass2);
});
function validarPass(pass1, pass2) {
if (pass1 != pass2) {
$(".alert-warning").css("display", "inherit");
} else {
$(".alert-warning").css("display", "none");
$.ajax({
url: 'database/__signup.php',
type: 'POST',
data: {
nombre: $("#nombre").val(),
email: $("#email").val(),
password: pass1,
confirm_password: pass2
}
})
.done(function(data) {
if (data == 'OK') {
$(".signup__success").css("display", "inherit");
} else {
$(".signup__fail").css("display", "inherit");
}
})
}
}
});
</script>Dentro del mismo archivo signup.php dentro de las etiquetas script incluiremos el siguiente código.
Lo primero que hacemos es detener el evento submit de nuestro formulario para realizar un par de validaciones.
Enseguida en la función validarPass() recibimos las contraseñas que el usuario capturo y validamos si son idénticas.
En caso de ser diferentes mostramos una de las alertas que definimos arriba.
Si las contraseñas coinciden hacemos una petición mediante AJAX al archivo __signup.php, más adelante crearemos este archivo.
Básicamente lo que hacemos dentro de la petición es definir el método en este caso sería POST y enviamos los datos que el usuario capturo para crear su cuenta.
Finalmente si nuestra petición fue correcta mostramos la alerta de éxito o en su caso contrario la de error.
<?php
require 'conexion.php';
if(isset($_POST['nombre']) && isset($_POST['email']) && isset($_POST['password']) && isset($_POST['confirm_password'])){
$sql = "INSERT INTO usuarios (nombre, email, password) VALUES (:nombre, :email, :password)";
$stmt = $conn->prepare($sql);
$stmt->bindParam(':nombre', $_POST['nombre']);
$stmt->bindParam(':email', $_POST['email']);
$password = password_hash($_POST['password'], PASSWORD_BCRYPT);
$stmt->bindParam(':password', $password);
if($stmt->execute()){
echo "OK";
}else{
echo "FAIL";
}
}
?>Por último para terminar esta primer parte de crear cuenta crearíamos el archivo __signup.php al cual hicimos referencia en la parte superior.
Lo primero que haremos será incluir el archivo de conexión a la base de datos, nosotros lo llamamos conexion.php y lo incluimos mediante require().
Validamos que nuestro valores vengan correctos y si es así comenzaremos con nuestro consulta a base de datos.
En la variable $sql definimos la consulta INSERT que queremos ejecutar.
En $stmt preparamos la consulta que hemos definido.
Enseguida relacionamos los valores con los datos que estamos recibiendo.
Finalmente mediante execute() ejecutamos nuestra consulta para crear la cuenta del usuario.
Resultado de crear cuenta
Iniciar Sesión
Muy bien, ahora que tenemos lista la funcionalidad para crear una cuenta lo siguiente seria poder iniciar sesión.
¿Recuerdas que en el formulario de crear cuenta detuvimos el evento submit e hicimos la petición con AJAX?
Para la funcionalidad de iniciar sesión lo haremos de otra manera sin detener el evento y hacia el action del formulario.
<div class="container login__container">
<div class="row mt-5 login__box">
<div class="col-md-6 g-0 login-form__image">
<img src="img/login.png" class="login-form__img" />
</div>
<div class="col-md-6 login-form__form">
<h2 class="mb-3 login-form__title">Iniciar Sesión</h2>
<form action="database/__login.php" method="POST">
<div class="mb-3">
<label>Ingresa tu correo</label>
<input type="email" name="email" class="form-control" required>
</div>
<div class="mb-3">
<label>Ingresa tu contraseña</label>
<input type="password" name="password" class="form-control" required>
</div>
<button type="submit" class="btn btn-success mt-3 login-form__btn-login">Iniciar sesión</button>
<hr>
<a class="btn btn-info mt-3 form__button-signup login-form__btn-signup" href="signup">Crear cuenta</a>
</form>
</div>
</div>
</div>En el parámetro action del formulario definimos la ruta hacia donde se haría la petición.
Solicitamos el correo y contraseña e incluimos un button type submit para procesar la petición.
Si quieres aprender más sobre enviar datos de un formulario con PHP da clic en el enlace para ver otro post donde lo explicamos más detalladamente.
<?php
session_start();
require 'conexion.php';
if( isset($_POST['email']) && isset($_POST['password']) ){
$sql = $conn->prepare('SELECT id, email, password FROM usuarios WHERE email = :email');
$sql->bindParam(':email', $_POST['email']);
$sql->execute();
$results = $sql->fetch(PDO::FETCH_ASSOC);
if (count($results) >0 && password_verify($_POST['password'], $results['password'])) {
$_SESSION['user_id'] = $results['id'];
header('Location: ../dashboard');
} else{
header('Location: ../index?acceso=error');
}
}
?>Ya que tenemos definida la estructura de nuestro formulario crearíamos ahora el archivo __login.php donde inicializaríamos la sesión.
De entrada es necesario agregar session_start() para inicializar nuestras sesiones.
Enseguida validamos que el email y contraseña vengan bien definidos y si pasamos la validación en la variable $sql preparamos la consulta SELECT a la base de datos, el criterio de búsqueda sería el email.
Ejecutamos la consulta y en $results guardamos si hubo registros encontrados.
Ahora en la variable global $_SESSION almacenamos el id del usuario, mucho 👁 con esto, ya que más adelante lo usaremos.
Finalmente, redirigimos a dashboard que sería la página inicial en nuestro proyecto, tú colocarías la página inicial de tu proyecto.
<?php
session_start();
if (isset($_SESSION['user_id'])) {
header('Location: dashboard');
}
?>Es muy importante que incluyas session_start() en la parte superior todas las páginas que necesitas validar si el usuario tiene o no sesión. ¿Recuerdas que almacenamos el id del usuario? Pues aquí es donde lo utilizamos para hacer la comprobación.
Cerrar Sesión
<?php
session_start();
session_unset();
session_destroy();
header('Location: index');
?>Como puedes checar el código para cerrar sesión es sumamente sencillo, únicamente incluimos este pequeño código y referenciamos el archivo desde el botón o elemento encargado de cerrar sesión en nuestro proyecto.
session_start: Activamos las sesiones.
session_unset: Libera todas las variables de sesión actualmente registradas.
session_destroy: Eliminamos todas las sesiones creadas.
Finalmente redirigimos a nuestra pantalla de inicio, en nuestro caso es index.
Recursos Extras
Para consultar el estilo, imágenes y el código completo de este login con PHP puedes checarlo en este enlace.
Impleméntalo hoy mismo en tus proyectos web y cuéntanos como te va.
Recuerda compartir este post en tu red social favorita para que más chicas aprendan sobre este tema y seamos más girls in code.
¡Hasta pronto! 🙋♀️
