Login con pdo y registro de usuarios

En esta entrada, voy a compartir el código completo para crear un formulario de inicio de sesión con la opción de registrar usuarios.

Como sabemos, cuando tenemos un sitio web o proyecto, es fundamental tener un formulario para que los usuarios se registren y, por supuesto, inicien sesión.

No hace falta decir que primero debemos crear una base de datos donde almacenaremos a todos los usuarios.

Creación de la Base de Datos

Para crear una base de datos, existen varias formas, pero aquí mostraré cómo hacerlo en SQL con código.

No tomará más de dos o tres líneas de código, lo que facilitará nuestro aprendizaje.

Sin más, aquí tienes el código para crear la base de datos:

CREATE DATABASE test;
            

---

Una vez creada nuestra base de datos, debemos crear la tabla de usuarios.

La crearemos de la misma forma, utilizando SQL.

Es importante destacar que las bases de datos para el registro de usuarios suelen incluir una contraseña, que debe estar encriptada.

Yo utilizaré una encriptación segura, como hash, en lugar de opciones menos seguras como MD5.

También incluiré un ejemplo de cómo guardar una imagen en una carpeta, que explicaré más adelante.

Código de la Tabla de Usuarios

CREATE TABLE usuarios (
    id INT AUTO_INCREMENT PRIMARY KEY,
    usuario VARCHAR(255) NOT NULL,
    nombre VARCHAR(255) NOT NULL,
    apellidos VARCHAR(255) NOT NULL,
    email VARCHAR(255) NOT NULL,
    password VARCHAR(255) NOT NULL,
    foto VARCHAR(255)
);
            

---

...

Creación del Formulario

Para la creación del formulario, he preparado el siguiente código.

Como sabemos, en internet existen numerosos modelos de formularios, por lo que cada uno puede elegir el que prefiera.

En mi caso, utilizaré este formulario:

Código del Formulario de Inicio de Sesión

                <div class="container-fluid vh-100 d-flex justify-content-center align-items-center background-container">
                    <div class="border border-1-solid black p-3 bg-warning">
                        <div class="text-center">
                            <div class="rounded-circle border border-1-solid black d-inline-block p-2 bg-white">
                                <img src="img/user.png" style="width: 150px;" alt="usuario">
                            </div>
                        </div>
                        <h1 class="text-center">Iniciar Sesión</h1>
                        <form action="procesar_inicio_sesion.php" method="post">
                            <div class="form-group mb-2">
                                <label for="usuario">Nombre de Usuario</label>
                                <input type="text" class="form-control" id="usuario" name="usuario" required>
                            </div>
                            <div class="form-group mb-2">
                                <label for="contrasena">Contraseña</label>
                                <input type="password" class="form-control" id="contrasena" name="contrasena" required>
                            </div><br>
                            <button type="submit" class="btn btn-primary">Iniciar Sesión</button>
                        </form>
                        <p class="text-center mt-3">
                            <a href="#" id="registroLink">¿No tienes una cuenta? Regístrate aquí.</a>
                        </p>
                        <p class="text-center"><a href="recuperar_contrasena.php">¿Olvidaste tu contraseña o nombre de usuario?</a></p>
                    </div>
                </div>
            

No hace falta decir que este formulario se debe incluir en el archivo index.php.

---

Ir al índice