Login Form usando Bootstrap5: Descarga gratis

Login Form usando Bootstrap5. En este artículo veremos 3 ejemplos concretos para login de usuarios usando el framework BootStrap 5. Además, los ejemplos tendrán acceso contraseña cifrada.

El sistema de inicio de sesión sirve para autenticar a los usuarios antes de permitirles acceder a los servicios de la aplicación. Autoriza a los usuarios a acceder a las páginas privilegiadas de las aplicaciones.

💣 Descarga sistemas PHP y Laravel COMPLETOS GRATIS

Recursos premium listos para usar en proyectos reales 💻

👥 +1000 desarrolladores · 🔥 Publicaciones diarias

🔥 Unirme al canal GRATIS ahora 👥 Grupo de Facebook

⏳ Enlaces disponibles por tiempo limitado

💻 Sistemas completos 🔌 Plugins PRO ⚡ Scripts listos 🔥 Recursos exclusivos

La autenticación se puede realizar de varias formas. Algunos de ellos se enumeran a continuación.

a) Nombre de usuario / correo electrónico y contraseña
b) Autenticación OTP basada en números móviles
c) Autenticación 2FA
d) Autenticación de detección de rostros
e) Autenticación basada en reconocimiento de voz
f) Autenticación basada en dictado de código

Se recomienda implementar la forma más amigable posible que se sigue en todo el mundo. Sin embargo, en la lista anterior, el primer punto es el método más común para recopilar el nombre de usuario y la contraseña de los usuarios. Entonces, esta forma da más conocida y da más claridad a los usuarios.

La página de inicio de sesión debe ser una interfaz de usuario muy simple para que los usuarios puedan iniciar sesión sin problemas. Para lograr tal desempeño, usaremos una herramienta de interfaz como Bootstrap para presentar un formulario de inicio de sesión profesional.

Tabla de contenidos

¿Qué contiene el Login Form usando Bootstrap5?

Vamos a mostrar 3 plantillas de formulario de inicio de sesión usando Bootstrap. Además, se ha implementado un código backend en PHP para procesar el inicio de sesión.

Haciendo uso de una condicional podemos cambiar la plantilla de acuerdo al gusto del usuario final, dándole una apariencia profesional. Además, se podría crear más opciones para gestionar el cambio de plantillas.

Componentes del formulario de inicio de sesión

Un formulario de inicio de sesión puede contener los siguientes elementos. Bootstrap es una herramienta adecuada para encajar estos elementos en una plantilla de formulario de inicio de sesión con una buena apariencia.

Campos de entrada de inicio de sesión
Opción de casilla de verificación «Recordarme«
Opción «Olvidé mi contraseña«
Registro de acceso directo para nuevos usuarios

Este ejemplo mostrará solo dos campos de entrada para obtener el nombre de usuario y la contraseña. Utiliza CSS externo para manejar consultas de medios para agregar capacidad de respuesta a la interfaz de usuario.

Login Form usando Bootstrap5

Este ejemplo de formulario de inicio de sesión de Bootstrap proporciona 3 plantillas alternativas para la página de inicio de sesión.

Las tres plantillas comparten un motor de backend común para procesar el inicio de sesión en PHP. El backend incluye un script de inicio de sesión basado en sesión para continuar con el proceso de autenticación.

Después de iniciar sesión, valida la existencia de la sesión de usuario para mostrar el mensaje de bienvenida.

Estructura de carpetas login form bootstrap5

Diseño de página de inicio de sesión código HTML

Este es el diseño común para las tres plantillas de inicio de sesión. Este diseño contiene el JavaScript requerido, CSS incluye la carga de Bootstrap 5.

Utiliza el kit de herramientas Font-Awesome para enriquecer la página de inicio de sesión y mostrar iconos en un lugar adecuado.

Si no se pasa ningún valor, PHP pone un valor predeterminado para cargar la plantilla 1 del formulario de inicio de sesión de Bootstrap. Interpola la variable $ template en la ruta de la plantilla de la página de inicio de sesión.

index.php (plantilla principal común para representar el formulario de inicio de sesión de Bootstrap)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css"
crossorigin="anonymous">
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<link href="vendor/fontawesome/css/all.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<?php
if (! empty($_GET["i"])) {
$template = intval($_GET["i"]);
}
if (empty($template)) {
$template = 1;
}
require_once __DIR__ . '/template/login-template' . $template . '.php';
?>
</body>
</html>

Plantillas para la página de inicio de sesión

Las siguientes plantillas HTML son para mostrar el formulario de inicio de sesión de Bootstrap en varios diseños. Esta sección muestra la captura de pantalla de salida de cada plantilla de página de inicio de sesión debajo del código HTML.

a) Plantilla 1: template/login-template1.php

<div id="template-bg-1">
<div
class="d-flex flex-column min-vh-100 justify-content-center align-items-center">
<div class="card p-4 text-light bg-dark mb-5">
<div class="card-header">
<h3>Iniciar sesión </h3>
</div>
<div class="card-body w-100">
<form name="login" action="" method="post">
<div class="input-group form-group mt-3">
<div class="bg-secondary rounded-start">
<span class="m-3"><i class="fas fa-user mt-2"></i></span>
</div>
<input type="text" class="form-control" placeholder="Usuario"
name="username">
</div>
<div class="input-group form-group mt-3">
<div class="bg-secondary rounded-start">
<span class="m-3"><i class="fas fa-key mt-2"></i></span>
</div>
<input type="password" class="form-control" placeholder="Contraseña"
name="password">
</div>

<div class="form-group mt-3">
<input type="submit" value="Acceder"
class="btn bg-secondary float-end text-white w-100"
name="login-btn">
</div>
</form>
<?php if(!empty($loginResult)){?>
<div class="text-danger"><?php echo $loginResult;?></div>
<?php }?>
</div>
<div class="card-footer">
<div class="d-flex justify-content-center">
<div class="text-primary">Si es un usuario registrado, inicie sesión aquí.</div>
</div>
</div>
</div>
</div>
</div>

b) Plantilla 2: template/login-template2.php

c) Plantilla 3: template/login-template3.php

<div class="d-flex flex-column min-vh-100 justify-content-center align-items-center"
id="template-bg-3">

<div class="card mb-5 p-5 bg-dark bg-gradient text-white col-md-4">
<div class="card-header text-center">
<h3>Iniciar sesión </h3>
</div>
<div class="card-body mt-3">
<form name="login" action="" method="post">
<div class="input-group form-group mt-3">
<input type="text" class="form-control text-center p-3"
placeholder="Usuario" name="username">
</div>
<div class="input-group form-group mt-3">
<input type="password" class="form-control text-center p-3"
placeholder="Contraseña" name="password">
</div>
<div class="text-center">
<input type="submit" value="Acceder"
class="btn btn-primary mt-3 w-100 p-2" name="login-btn">
</div>
</form>
<?php if(!empty($loginResult)){?>
<div class="text-danger"><?php echo $loginResult;?></div>
<?php }?>
</div>
<div class="card-footer p-3">
<div class="d-flex justify-content-center">
<div class="text-primary">If you are a registered user, login here.</div>
</div>
</div>
</div>

</div>

Estos son los estilos externos para agregar fondos de página de inicio de sesión. También contiene las consultas de medios para que el formulario de inicio de sesión de Bootstrap responda.

Página de inicio de sesión enviar acción en PHP

Hay más cosas para construir un sistema de autenticación de inicio de sesión seguro. Pero, este ejemplo crea un script PHP simple para verificar los detalles ingresados con la base de datos.

Este es un código PHP de rutina para manejar la autenticación de usuarios basada en sesiones. Es común que el formulario de inicio de sesión simple con el nombre de usuario y la contraseña. No importa si es un formulario de inicio de sesión de Bootstrap o no.

Importa la clase de modelo Member para llamar a la función de autenticación de inicio de sesión. La clase de modelo define loginMember() para recibir los detalles de inicio de sesión publicados a través del formulario.

Valida el nombre de usuario y la contraseña con la base de datos de miembros. Este PHP recibe la respuesta de la función loginMember().

index.php (Llame a la función de inicio de sesión)

<?php

use Baulphp\Member;
if (! empty($_POST["login-btn"])) {
require_once __DIR__ . '/lib/Member.php';
$member = new Member();
$loginResult = $member->loginMember();
}
?>

Esta clase de modelo de miembro conecta la base de datos para obtener el objeto de conexión. Cuando el usuario inicia sesión, verifica si el nombre de usuario existe. Si es así, verifica la contraseña publicada con la contraseña cifrada en la base de datos.

Después de iniciar sesión correctamente, agrega el estado de inicio de sesión a la sesión de PHP. De lo contrario, devuelve un mensaje de error para pedirle al usuario que vuelva a intentarlo.

lib/Member.php

<?php


namespace Baulphp;

class Member
{

private $ds;

function __construct()
{
require_once __DIR__ . '/../lib/DataSource.php';
$this->ds = new DataSource();
}

public function getMember($username)
{
$query = 'SELECT * FROM tbl_member where username = ?';
$paramType = 's';
$paramValue = array(
$username
);
$memberRecord = $this->ds->select($query, $paramType, $paramValue);
return $memberRecord;
}

public function loginMember()
{
$memberRecord = $this->getMember($_POST["username"]);
$loginPassword = 0;
if (! empty($memberRecord)) {
if (!empty($_POST["password"])) {
$password = $_POST["password"];
}
$hashedPassword = $memberRecord[0]["password"];
$loginPassword = 0;
if (password_verify($password, $hashedPassword)) {
$loginPassword = 1;
}
} else {
$loginPassword = 0;
}
if ($loginPassword == 1) {
// login sucess so store the member's username in
// the session
session_start();
$_SESSION["username"] = $memberRecord[0]["username"];
$_SESSION["name"] = $memberRecord[0]["name"];
//session_write_close();
$url = "home.php";
header("Location: $url");
exit();
} else if ($loginPassword == 0) {
$loginStatus = "Usuario o contraseña invalida.";
return $loginStatus;
}
}
}

Pantalla de bienvenida desde la página de inicio de sesión

Al ingresar los detalles de inicio de sesión, la acción de envío llama a PHP para mostrar el resultado del inicio de sesión. Esta es la respuesta exitosa de la acción del formulario de inicio de sesión de Bootstrap.

Muestra un mensaje de bienvenida al dirigirse al usuario que inició sesión. Carga el nombre para mostrar del usuario de la sesión.

Antes de mostrar la interfaz de usuario, verifica la sesión iniciada. Si la sesión no está vacía, mostrará la pantalla de bienvenida. De lo contrario, redirigirá al usuario al formulario de inicio de sesión de Bootstrap.

home.php

<?php
session_start();
if (!empty($_SESSION["name"])) {
$name = $_SESSION["name"];
} else {
session_unset();
$url = "./index.php";
header("Location: $url");
}
//session_write_close();
?>
<html>
<head>
<title>Bienvenidos</title>
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css"
crossorigin="anonymous">
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<link href="vendor/fontawesome-free-5.15.3-web/css/all.css"
rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
<style>
</style>
</head>
<body class="bg-image">
<div class="row">
<div class="col-md-12 text-center mt-5">
<h1>Bienvenida a la aplicación, <?php echo $name;?>!</h1>
</div>

</body>
</html>

Inicio de sesión de Bootstrap: datos de prueba

Los siguientes son los pasos para ejecutar este ejemplo en su entorno.

Descarga el código y descomprímelo en tu entorno PHP.
Importe el script de la base de datos y configure la base de datos en la clase DataSource
Utilice estos datos de inicio de sesión para probar el inicio de sesión.

nombre de usuario - admin
contraseña - admin123

Script de base de datos

Importe este archivo.sql a su base de datos y configure los detalles en DataSource.php. Este es un paso importante para ejecutar este ejemplo en su computadora local.

Este script incluye la declaración de creación y la consulta de inserción para la tabla de miembros. La tabla de miembros contiene las columnas de nombre de usuario, contraseña y nombre para mostrar.

database.sql

CREATE TABLE `tbl_member` (
`id` int(11) NOT NULL,
`username` varchar(255) NOT NULL,
`name` varchar(30) NOT NULL,
`password` varchar(200) NOT NULL,
`create_at` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=latin1;


INSERT INTO `tbl_member` (`id`, `username`, `name`, `password`, `create_at`) VALUES
(1, 'admin', 'baulphp', '$2y$10$3ZnwXA1hl0oSTOmnRC7KRu4jh0d8eVsZfIWpT.6nPuuvpb.MU96tW', '2021-11-18 12:48:40'),
(2, 'user', 'baulcode', '$2y$10$3ZnwXA1hl0oSTOmnRC7KRu4jh0d8eVsZfIWpT.6nPuuvpb.MU96tW', '2021-11-18 12:49:01');


ALTER TABLE `tbl_member`
ADD PRIMARY KEY (`id`);


ALTER TABLE `tbl_member`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4;

CONCLUSIÓN

En este artículo hemos logrado dar un ejemplo de login usando PHP y la Librería BootStrap 5. Sin embargo, existen otras librerías similares para realizar login de usuarios para poder obtener una interfaz amigable y profesional:

Materialize CSS.
ZURB Foundation.
Material Design
Bulma
Skeleton
Metro 4, entro otros.

La idea era usar un framework de estilos que destaque sobre los demás y que este en su última versión, el más popular es BootStrap 5 para dar una imagen moderna y profesional.

Hemos organizado el proyecto para que soporte 3 plantillas que el usuario final pueda elegir sin ningún problema y además con conexión con mysql para que el usuario pueda loguearse.