Este sistema de usuarios está elaborado con HTML y php, la base de datos para registra usuarios se creó en MySQL. Para el host local se utilizó wampserver. Los archivos del sistema están en el siguiente enlace.
Los archivos son:
config.php
index.php
login.php
logout.php
register.php
reset-password.php
y el script de la tabla users es:
users.sql
No tiene agregado CSS para mejor comprensión del código.
config.php
<?php
/* Credenciales de la base de datos. Suponiendo que está ejecutando MySQL
con configuración predeterminada (usuario 'root' sin contraseña) */
define('DB_SERVER', 'localhost');//nombre del servidor
define('DB_USERNAME', 'root');//nombre de usuario del servidor
define('DB_PASSWORD', '');//contraseña del servidor
define('DB_NAME', 'db_usuarios');//nombre de la base de datos
/* Prueba de conexión a la base de datos MySQL*/
$link = mysqli_connect(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);
// Se verifica la conexión, si no se puede realizar se indica el error
if($link === false){
die("ERROR: Could not connect. " . mysqli_connect_error());
}
?>
index.php
<?php
// Se inicializa la sesión
session_start();
/* Se comprueba si el usuario ha iniciado sesión, si no, se redirecciona
a la página de inicio de sesión (login.php)*/
if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
header("location: login.php");
exit;
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Bienvenido</title>
</head>
<body>
<h1>Hola, <b><?php echo htmlspecialchars($_SESSION["username"]); ?></b>. Has ingresado al sitio.</h1>
<p>
<a href="logout.php">Cerrar sesión</a><br>
<a href="reset-password.php" >Cambiar contraseña</a>
</p>
<p>
Nuestro sistema cuenta con ....
</p>
</body>
</html>
login.php
<?php
// Inicializa la sesión
session_start();
/* Verifique si el usuario ya ha iniciado sesión, si es así,
rediríjalo a la página de bienvenida (index.php)*/
if(isset($_SESSION["loggedin"]) && $_SESSION["loggedin"] === true){
header("location: index.php");
exit;
}
// Incluir el archivo de configuración
require_once "config.php";
// Definir variables e inicializar con valores vacíos
$username = $password = $username_err = $password_err = "";
// Procesamiento de datos del formulario cuando se envía el formulario
if($_SERVER["REQUEST_METHOD"] == "POST"){
// Comprobar si el nombre de usuario está vacío
if(empty(trim($_POST["username"]))){
$username_err = "Por favor ingrese su usuario.";
} else{
$username = trim($_POST["username"]);
}
// Comprobar si la contraseña está vacía
if(empty(trim($_POST["password"]))){
$password_err = "Por favor ingrese su contraseña.";
} else{
$password = trim($_POST["password"]);
}
// Validar información del usuario
if(empty($username_err) && empty($password_err)){
// Preparar la consulta select
$sql = "SELECT id, username, password FROM users WHERE username = ?";
if($stmt = mysqli_prepare($link, $sql)){
/* Vincular variables a la declaración preparada como parámetros, s es por la
variable de tipo string*/
mysqli_stmt_bind_param($stmt, "s", $param_username);
// Asignar parámetros
$param_username = $username;
// Intentar ejecutar la declaración preparada
if(mysqli_stmt_execute($stmt)){
// almacenar el resultado de la consulta
mysqli_stmt_store_result($stmt);
/*Verificar si existe el nombre de usuario, si es así,
verificar la contraseña*/
if(mysqli_stmt_num_rows($stmt) == 1){
// Vincular las variables del resultado
mysqli_stmt_bind_result($stmt, $id, $username, $hashed_password);
//obtener los valores de la consulta
if(mysqli_stmt_fetch($stmt)){
/*comprueba que la contraseña ingresada sea igual a la
almacenada con hash*/
if(password_verify($password, $hashed_password)){
// La contraseña es correcta, así que se inicia una nueva sesión
session_start();
// se almacenan los datos en las variables de la sesión
$_SESSION["loggedin"] = true;
$_SESSION["id"] = $id;
$_SESSION["username"] = $username;
// Redirigir al usuario a la página de inicio
header("location: index.php");
} else{
// Mostrar un mensaje de error si la contraseña no es válida
$password_err = "La contraseña que ha ingresado no es válida.";
}
}
} else{
// Mostrar un mensaje de error si el nombre de usuario no existe
$username_err = "No existe cuenta registrada con ese nombre de usuario.";
}
} else{
echo "Algo salió mal, por favor vuelve a intentarlo.";
}
}
// Cerrar la sentencia de consulta
mysqli_stmt_close($stmt);
}
// Cerrar laconexión
mysqli_close($link);
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<!link href="CSS/estilo_form.css" rel="stylesheet" type="text/css">
<title>Inicio de sesión</title>
</head>
<body>
<h2>Inicio de sesión</h2>
<p>Por favor, introduzca usuario y contraseña para iniciar sesión.</p>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<label>Usuario</label>
<input type="text" name="username" value="<?php echo $username; ?>">
<span ><?php echo $username_err; ?></span><br>
<label>Contraseña</label>
<input type="password" name="password">
<span ><?php echo $password_err; ?></span><br>
<input type="submit" value="Ingresar"><br>
<p>¿No tienes una cuenta? <a href="register.php">Regístrate ahora</a>.</p>
</form>
</body>
</html>
logout.php
<?php
// Se inicia la sesión
session_start();
// se desasignan todas las variables de sesión
$_SESSION = array();
// se destruye la sesión
session_destroy();
// se redirecciona a la página de inicio de sesión (login.php)
header("location: login.php");
//se sale del archivo
exit;
?>
register.php
<?php
// se incluye el archivo de configuración
require_once "config.php";
// Definir variables e inicializar con valores vacíos
$username = $password = $confirm_password = "";
$username_err = $password_err = $confirm_password_err = "";
// Procesamiento de datos del formulario cuando se envía el formulario
if($_SERVER["REQUEST_METHOD"] == "POST"){
// Validar el nombre de usuario
if(empty(trim($_POST["username"]))){
$username_err = "Por favor ingrese un usuario.";
} else{
// Preparar la consulta
$sql = "SELECT id FROM users WHERE username = ?";
if($stmt = mysqli_prepare($link, $sql)){
// Vincular variables a la declaración preparada como parámetros
mysqli_stmt_bind_param($stmt, "s", $param_username);
// asignar parámetros
$param_username = trim($_POST["username"]);
// Intentar ejecutar la declaración preparada
if(mysqli_stmt_execute($stmt)){
/* almacenar resultado*/
mysqli_stmt_store_result($stmt);
if(mysqli_stmt_num_rows($stmt) == 1){
$username_err = "Este usuario ya fue tomado.";
} else{
$username = trim($_POST["username"]);
}
} else{
echo "Al parecer algo salió mal.";
}
}
// Declaración de cierre
mysqli_stmt_close($stmt);
}
// Validar contraseña
if(empty(trim($_POST["password"]))){
$password_err = "Por favor ingresa una contraseña.";
} elseif(strlen(trim($_POST["password"])) < 6){
$password_err = "La contraseña al menos debe tener 6 caracteres.";
} else{
$password = trim($_POST["password"]);
}
// Validar que se confirma la contraseña
if(empty(trim($_POST["confirm_password"]))){
$confirm_password_err = "Confirma tu contraseña.";
} else{
$confirm_password = trim($_POST["confirm_password"]);
if(empty($password_err) && ($password != $confirm_password)){
$confirm_password_err = "No coincide la contraseña.";
}
}
// Verifique los errores de entrada antes de insertar en la base de datos
if(empty($username_err) && empty($password_err) && empty($confirm_password_err)){
// Prepare una declaración de inserción
$sql = "INSERT INTO users (username, password) VALUES (?, ?)";
if($stmt = mysqli_prepare($link, $sql)){
// Vincular variables a la declaración preparada como parámetros
mysqli_stmt_bind_param($stmt, "ss", $param_username, $param_password);
// Establecer parámetros
$param_username = $username;
$param_password = password_hash($password, PASSWORD_DEFAULT); // Crear una contraseña hash
// Intentar ejecutar la declaración preparada
if(mysqli_stmt_execute($stmt)){
// Redirigir a la página de inicio de sesión (login.php)
header("location: login.php");
} else{
echo "Algo salió mal, por favor inténtalo de nuevo.";
}
}
// claración de cierre
mysqli_stmt_close($stmt);
}
// Cerrar la conexión
mysqli_close($link);
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<!link href="CSS/estilo_form.css" rel="stylesheet" type="text/css">
<title>Registro</title>
</head>
<body>
<h2>Registro</h2>
<p>Por favor complete este formulario para crear una cuenta.</p>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<label>Usuario</label>
<input type="text" name="username" value="<?php echo $username; ?>">
<span><?php echo $username_err; ?></span><br>
<label>Contraseña</label>
<input type="password" name="password" value="<?php echo $password; ?>">
<span><?php echo $password_err; ?></span><br>
<label>Confirmar contraseña</label>
<input type="password" name="confirm_password" value="<?php echo $confirm_password; ?>">
<span><?php echo $confirm_password_err; ?></span><br>
<input type="submit" value="Ingresar">
<input type="reset" value="Borrar"><br>
<p>¿Ya tienes una cuenta? <a href="login.php">Ingresa aquí</a>.</p>
</form>
</body>
</html>
reset-password.php
<?php
// inicializa la sesión
session_start();
/* Compruebe si el usuario ha iniciado sesión;
de lo contrario, redirija a la página de inicio de sesión (login.php)*/
if(!isset($_SESSION["loggedin"]) || $_SESSION["loggedin"] !== true){
header("location: login.php");
exit;
}
// incluir el archivo de configuración
require_once "config.php";
// Definir variables e inicializar con valores vacíos
$new_password = $confirm_password = "";
$new_password_err = $confirm_password_err = "";
// Procesamiento de datos del formulario cuando se envía el formulario
if($_SERVER["REQUEST_METHOD"] == "POST"){
// Validar la nueva contraseña
if(empty(trim($_POST["new_password"]))){
$new_password_err = "Por favor, introduzca la nueva contraseña.";
} elseif(strlen(trim($_POST["new_password"])) < 6){
$new_password_err = "La contraseña debe tener al menos 6 caracteres.";
} else{
$new_password = trim($_POST["new_password"]);
}
// Validar la confirmación de contraseña
if(empty(trim($_POST["confirm_password"]))){
$confirm_password_err = "Por favor confirme la contraseña.";
} else{
$confirm_password = trim($_POST["confirm_password"]);
if(empty($new_password_err) && ($new_password != $confirm_password)){
$confirm_password_err = "Las contraseñas no coinciden.";
}
}
// Verifique los errores de entrada antes de actualizar la base de datos
if(empty($new_password_err) && empty($confirm_password_err)){
// Prepare la declaración de actualización
$sql = "UPDATE users SET password = ? WHERE id = ?";
if($stmt = mysqli_prepare($link, $sql)){
// Vincular variables a la declaración preparada como parámetros
mysqli_stmt_bind_param($stmt, "si", $param_password, $param_id);
// Asignar parámetros
$param_password = password_hash($new_password, PASSWORD_DEFAULT);
$param_id = $_SESSION["id"];
// Intente ejecutar la declaración preparada
if(mysqli_stmt_execute($stmt)){
/* Contraseña actualizada exitosamente.
Destruye la sesión y redirige a la página de inicio de sesión (login.php)*/
session_destroy();
header("location: login.php");
exit();
} else{
echo "Algo salió mal, por favor vuelva a intentarlo.";
}
}
// Declaración de cierre
mysqli_stmt_close($stmt);
}
// Cerrar conexión
mysqli_close($link);
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<!link href="CSS/estilo_form.css" rel="stylesheet" type="text/css">
<title>Cambio de contraseña</title>
</head>
<body>
<h2>Cambio contraseña</h2>
<p>Complete este formulario para restablecer su contraseña.</p>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<label>Nueva contraseña</label>
<input type="password" name="new_password" value="<?php echo $new_password; ?>">
<span><?php echo $new_password_err; ?></span><br>
<label>Confirmar contraseña</label>
<input type="password" name="confirm_password" >
<span><?php echo $confirm_password_err; ?></span><br>
<input type="submit" value="Enviar"><br>
<a class="btn btn-link" href="index.php">Cancelar</a>
</form>
</body>
</html>
users.sql
CREATE TABLE IF NOT EXISTS `users` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(50) NOT NULL,
`password` varchar(255) NOT NULL,
`created_at` datetime DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`),
UNIQUE KEY `username` (`username`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
Si se utiliza wampserver solamente copiamos los archivos en una carpeta dentro de la carpeta www de la ruta de instalación. Por ejemplo en C:\wamp64\www\
Ahí creamos una carpeta con el nombre que deseemos, por ejemplo sistema_2_es
Ahora en la carpeta alias (C:\wamp64\alias) copiamos cualquiera de los archivos con extensión .conf y le cambiamos el nombre por el de nuestra carpeta de archivos: sistema_2_es.conf
Si realizamos bien los pasos despues de abrir el local host veremos en your aliases el nombre de nuestra carpeta y al dar clic se abrirá la página de inicio (index.php) pero como es necesario estar iniciar sesión se abre el archivo de login (login.php).
La base de datos la podemos crear en phpmyadmin.
