Probamos Ubuntu 25.04 - Muy rápido y confiable !!
Ver el video ayudare mucho a comprender el resto del tutorial
y
Como hacer rápidamente un sistema de login y registro de usuarios.
El módulo iniciar sesión y registrarse es una de esas características que tienen casi todos los sitios web de hoy en día.
Pero desarrollar un formulario de inicio de sesión y registro seguro puede ser una pesadilla para los principiantes en programación PHP.
Porque el html por un lado, y el PHP por otro, más las validaciones, puede ser un lio al comienzo.
Entonces, en este tutorial, crearemos un sistema de inicio de sesión y registro usando PHP PDO, usamos PDO por ser mas seguro y eficiente. "lo usa laravel, symfony etc."
Para el estilo usaremos una plantilla gratis, de boostrap 4 una plantilla que pueden descargar de aquí .
El código fuente constará de 5 archivos que serían:
config.php: archivo con conexión pdo.
login.php: archivo con formulario de inicio de sesión html y validación del lado del servidor y código de inicio de sesión.
register.php: archivo con formulario de registro, validación del lado del servidor y código de registro.
dashboard.php: el usuario aterrizará en este archivo después de iniciar sesión correctamente.
logout.php: archivo con código de cierre de sesión.
Creamos la base de datos, la llamamos demo luego usando phpmyadmin en SQL le agremagos el siguiente código para crear la tabla y los campos
CREATE TABLE `users` (
`id` INT(11) NOT NULL AUTO_INCREMENT,
`nombre` VARCHAR(255) NOT NULL DEFAULT 'nombre',
`apellido` VARCHAR(255) NOT NULL DEFAULT 'apellido',
`email` VARCHAR(255) NOT NULL DEFAULT 'email',
`password` VARCHAR(255) NOT NULL DEFAULT 'password',
`created_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
`updated_at` DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
PRIMARY KEY (`id`)
);
Creamos el archivo config.php y le agregamos la conexión a la base de datos
<?php
$dsn = 'mysql:dbname=demo;host=localhost';
$user = 'root';
$password = '';
try
{
$pdo = new PDO($dsn,$user,$password);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}
catch(PDOException $e)
{
echo "PDO error".$e->getMessage();
die();
}
?>Tomamos el archivo login.html y lo renombramos a login.php y agregamos al comienzo este código,
encargado de traernos la conexión a la base de datos y comprobar si existe el usuario y su password
<?php
session_start();
require_once('config.php');
if(isset($_POST['submit']))
{
if(isset($_POST['email'],$_POST['password']) && !empty($_POST['email']) && !empty($_POST['password']))
{
$email = trim($_POST['email']);
$password = trim($_POST['password']);
if(filter_var($email, FILTER_VALIDATE_EMAIL))
{
$sql = "select * from users where email = :email ";
$handle = $pdo->prepare($sql);
$params = ['email'=>$email];
$handle->execute($params);
if($handle->rowCount() > 0)
{
$getRow = $handle->fetch(PDO::FETCH_ASSOC);
if(password_verify($password, $getRow['password']))
{
unset($getRow['password']);
$_SESSION = $getRow;
header('location:dashboard.php');
exit();
}
else
{
$errors[] = "Error en Email o Password";
}
}
else
{
$errors[] = "Error Email o Password";
}
}
else
{
$errors[] = "Email no valido";
}
}
else
{
$errors[] = "Email y Password son requeridos";
}
}
?>
en el mismo archivo que estamos trabajando editamos el formulario, agregamos la el código php para comprobar si hay errores y comprobamos que el formulario nos quede así:
<div class="card-header">
<h3 class="text-center font-weight-light my-4">Login</h3>
</div>
<div class="card-body">
<?php
if (isset($errors) && count($errors) > 0) {
foreach ($errors as $error_msg) {
echo '<div class="alert alert-danger">' . $error_msg . '</div>';
}
}
?>
<form method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<div class="form-group">
<label class="small mb-1" for="inputEmailAddress">Email</label>
<input class="form-control py-4" name="email" id="inputEmailAddress"
type="email" placeholder="Enter email address" />
</div>
<div class="form-group">
<label class="small mb-1" for="inputPassword">Password</label>
<input class="form-control py-4" name="password" id="inputPassword"
type="password" placeholder="Enter password" />
</div>
<div class="form-group">
<div class="custom-control custom-checkbox">
<input class="custom-control-input" id="rememberPasswordCheck"
type="checkbox" />
<label class="custom-control-label" for="rememberPasswordCheck">
Recordar contraseña</label>
</div>
</div>
<div
class="form-group d-flex align-items-center justify-content-between mt-4 mb-0">
<a class="small" href="password.html">¿Ha olvidado tu contraseña?</a>
<button type="submit" name="submit" class="btn btn-primary">Login</button>
</div>
</form>
</div>
<div class="card-footer text-center">
<div class="small"><a href="register.php">Registrese!</a></div>
</div>Vista en pantalla
------------------- Archivo de Registro de usuarios ---------------
El archivo de registro también consta de dos partes HTML y PHP. En la parte HTML, el estilo es el mismo que el del formulario de inicio de sesión. $errors también está ahí para imprimir errores del lado del servidor. También agrego una variable $success para imprimir un mensaje de envío de formulario exitoso.
register.php
<?php
session_start();
require_once('config.php');
if(isset($_POST['submit']))
{
if(isset($_POST['nombre'],$_POST['apellido'],$_POST['email'],$_POST['password']) && !empty($_POST['nombre']) && !empty($_POST['apellido']) && !empty($_POST['email']) && !empty($_POST['password']))
{
$firstName = trim($_POST['nombre']);
$lastName = trim($_POST['apellido']);
$email = trim($_POST['email']);
$password = trim($_POST['password']);
$hashPassword = $password;
$options = array("cost"=>4);
$hashPassword = password_hash($password,PASSWORD_BCRYPT,$options);
$date = date('Y-m-d H:i:s');
if(filter_var($email, FILTER_VALIDATE_EMAIL))
{
$sql = 'select * from users where email = :email';
$stmt = $pdo->prepare($sql);
$p = ['email'=>$email];
$stmt->execute($p);
if($stmt->rowCount() == 0)
{
$sql = "insert into users (nombre, apellido, email, `password`, created_at,updated_at) values(:vnombre,:vapellido,:email,:pass,:created_at,:updated_at)";
try{
$handle = $pdo->prepare($sql);
$params = [
':vnombre'=>$firstName,
':vapellido'=>$lastName,
':email'=>$email,
':pass'=>$hashPassword,
':created_at'=>$date,
':updated_at'=>$date
];
$handle->execute($params);
$success = 'Usuario creado correctamente!!';
}
catch(PDOException $e){
$errors[] = $e->getMessage();
}
}
else
{
$valFirstName = $firstName;
$valLastName = $lastName;
$valEmail = '';
$valPassword = $password;
$errors[] = 'el Email ya esta registrado';
}
}
else
{
$errors[] = "el Email no es valido";
}
}
else
{
if(!isset($_POST['nombre']) || empty($_POST['nombre']))
{
$errors[] = 'el nombre es requerido';
}
else
{
$valFirstName = $_POST['apellido'];
}
if(!isset($_POST['apellido']) || empty($_POST['apellido']))
{
$errors[] = 'el apellido es requerido';
}
else
{
$valLastName = $_POST['apellido'];
}
if(!isset($_POST['email']) || empty($_POST['email']))
{
$errors[] = 'Email es requerido';
}
else
{
$valEmail = $_POST['email'];
}
if(!isset($_POST['password']) || empty($_POST['password']))
{
$errors[] = 'el Password es requerido';
}
else
{
$valPassword = $_POST['password'];
}
}
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Page Title - SB Admin</title>
<link href="css/styles.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/js/all.min.js" crossorigin="anonymous"></script>
</head>
<body class="bg-primary">
<div id="layoutAuthentication">
<div id="layoutAuthentication_content">
<main>
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-7">
<div class="card shadow-lg border-0 rounded-lg mt-5">
<div class="card-header"><h3 class="text-center font-weight-light my-4">Registrese</h3></div>
<div class="card-body">
<?php
if(isset($errors) && count($errors) > 0)
{
foreach($errors as $error_msg)
{
echo '<div class="alert alert-danger">'.$error_msg.'</div>';
}
}
if(isset($success))
{
echo '<div class="alert alert-success">'.$success.'</div>';
}
?>
<form method="POST" action="<?php echo $_SERVER['PHP_SELF'];?>">
<div class="form-row">
<div class="col-md-6">
<div class="form-group">
<label class="small mb-1" for="inputFirstName">Nombre</label>
<input class="form-control py-4" name="nombre" id="inputFirstName" type="text" placeholder="Enter first name" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="small mb-1" for="inputLastName">Apellido</label>
<input class="form-control py-4" name="apellido" id="inputLastName" type="text" placeholder="Enter last name" />
</div>
</div>
</div>
<div class="form-group">
<label class="small mb-1" for="inputEmailAddress">Email</label>
<input class="form-control py-4" name="email" id="inputEmailAddress" type="email" aria-describedby="emailHelp" placeholder="Enter email address" />
</div>
<div class="form-row">
<div class="col-md-6">
<div class="form-group">
<label class="small mb-1" for="inputPassword">Password</label>
<input class="form-control py-4" name="password" id="inputPassword" type="password" placeholder="Enter password" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="small mb-1" for="inputConfirmPassword">Confirme el Password</label>
<input class="form-control py-4" name="repassword" id="inputConfirmPassword" type="password" placeholder="Confirm password" />
</div>
</div>
</div>
<button type="submit" name="submit" class="btn btn-primary">Registrarse</button>
</form>
</div>
<div class="card-footer text-center">
<div class="small"><a href="login.php">¿Tener una cuenta? Ir a iniciar sesión</a></div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<div id="layoutAuthentication_footer">
<footer class="py-4 bg-light mt-auto">
<div class="container-fluid">
<div class="d-flex align-items-center justify-content-between small">
<div class="text-muted">Copyright © Your Website 2021</div>
<div>
<a href="#">Privacy Policy</a>
·
<a href="#">Terms & Conditions</a>
</div>
</div>
</div>
</footer>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script src="js/scripts.js"></script>
</body>
</html>
Vista en pantalla
dashboard.php:
Después de iniciar sesión correctamente, el usuario accederá a esta página. Esta página tiene la función session_start y también estoy comprobando que dashboard.php no debería acceder directamente. El código HTML es solo un encabezado y un enlace para cerrar sesión.
<?php
session_start();
if(!$_SESSION['id']){
header('location:login.php');
}
?>
<h1>Bienvenido <?php echo ucfirst($_SESSION['nombre']); ?></h1>
<a href="logout.php?logout=true">Logout</a>
logout.php:
La magia aquí es session_destroy()
<?php
session_start();
if(isset($_SESSION)){
session_destroy();
header('location:login.php');
exit();
}
?>
Saludos amigos de compucenter33 hasta el proximo tuto
esta bueno el tutorial y soy nuevo en el php, por favor ayudame cuando ago la prueba de registro me aparece esto al tratar de registrarme: Warning: Undefined variable $pdo in C:\xampp\htdocs\admin\register.php on line 21
ResponderEliminarFatal error: Uncaught Error: Call to a member function prepare() on null in C:\xampp\htdocs\admin\register.php:21 Stack trace: #0 {main} thrown in C:\xampp\htdocs\admin\register.php on line 21