Cómo hacer un login en javascript, HTML y PHP

Tiempo de lectura: 5 minutos

5/5 - (1 vote)

Tabla de contenido

Una de las actividades más comunes cuando trabajamos como Desarrolladores, es crear un login en Javascript y algunas otras tecnologías como pueden ser HTML, CSS y PHP, es por ello que en este artículo describiré una de las tantas de formas de desarrollarlo.

Lo primero que vamos a definir para el login en Javascript es definir una estructura de archivos, para ello, he creado una carpeta denominada login-validate, la cual contiene dentro 1 archivo html denominado index.html y 3 carpetas: JS, CSS y DATA

Dentro de la carpeta JS hemos creado un archivo index.js, mientras que dentro de la carpeta CSS hemos generado un archivo styles.css y dentro de la carpeta de DATA, un archivo Users.php

Algo más o menos como esto, por favor, los archivos .DS_Store, .gitattributes, LICENSE y README.md, ignoralos por el momento.

Una vez que se ha generado la estructura correspondiente para el login en javascript, ahora empezaremos a definir cada uno de los archivos, para ello, empezaremos por el index.html

<!DOCTYPE html>
<html lang="es-MX">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/styles.css">
  <title>Login validate</title>
</head>
<body>
  <form action="#" id="formLogin">
    <div>
      <label for="username">Usuario</label>
      <input type="text" name="username" id="username">
    </div>
    <div>
      <label for="pass">Contraseña</label>
      <input type="password" name="pass" id="pass">
    </div>
    <div>
      <button type="button" id="btnLogin">Iniciar sesión</button>
    </div>
  </form>
  <script src="js/index.js"></script>
</body>
</html>

HTML

Como puedes ver, es un archivo muy sencillo, en el cual, los puntos importantes para crear el login en javascript, son los siguientes:

En la línea 6 se agrega la etiqueta link para enlazar el archivo styles.css que se encuentra dentro de la carpeta css
En la línea 10, se agrega una etiqueta form con un id denominado formLogin
De la línea 11 a la 21, se agregan divs con cada uno de los campos para el login, agregando los ids username, pass y btnLogin
Por último, en la línea 23, se agrega la etiqueta script que enlaza el archivo index.js

El archivo styles.css contiene la siguiente información, lo más relevante será la sección del body en donde nos permite centrar en pantalla el formulario, el reset de las líneas 1 a la 5 y agregarle un ancho predefinido al formulario con el cual realizaremos el login en Javascript

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
}

form {
  width: 480px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input {
  margin-bottom: 10px;
  display: block;
  width: 100%;
  height: 35px;
  padding: 10px;
}

button {
  background: crimson;
  height: 40px;
  border: none;
  border-radius: 4px;
  color: white;
  font-size: 1rem;
  width: 100%;
}

CSS

Dentro del archivo index.js podrémos encontrar el siguiente código:

const formLogin = document.querySelector("#formLogin")
btnLogin.addEventListener('click', event => {
  event.preventDefault()
  if (username.value == "" || pass.value == "") {
    alert("Completa todos los campos...")
    return false
  }
  const form = new FormData(formLogin)
  form.append("function", "login")
  fetch("data/Users.php", {
    method: "POST",
    body: form
  })
    .then(response => response.json())
    .then(json => {
      if (!json) {
        alert("No has podido iniciar sesión")
        return false
      }
      sessionStorage.setItem("user", JSON.stringify(json))
    })
})

JavaScript

En la línea 1, obtenemos el selector para hacer uso del elemento HTML formLogin

De la línea 2 a la 22, se le da funcionamiento al botón de iniciar sesión, con id btnLogin, para ello, se le asigna un evento click mediante addEventListener.

Lo primero que haremos será prevenir la acción por defecto del botón, y después de ello, metemos una guarda en donde validamos si el campo de username y el campo de password se encuentren vacíos y enviamos un mensaje de alerta.

Si los campos se han rellenado, entonces enviamos un fetch de tipo POST al archivo Users.php que se encuentra dentro de la carpeta data, en la cual enviaremos 3 datos importantes: el username, el password y una función que cuenta con el valor de login.

Es importante comentarte que en estos momentos, la función no se está utilizando, sin embargo, cuando refactoricemos el código del PHP, será de gran utilidad.

Si, el Users.php nos devuelve información entonces, guardamos esta info en el sessionStorage del navegador, y en caso de no devolver información, retornamos una alerta con la leyenda: “No has podido iniciar sesión”

Por último y para poder terminar con esta primera parte de validación de un login en Javascript, solo nos queda el código de Users.php

<?php
$db = "spending_tracker";
$host = "localhost";
$user = "root";
$password = "";

try {
  $conexion = new PDO("mysql:host=$host;dbname=$db", $user, $password);
  $username = $_POST["username"];
  $pass = $_POST["pass"];

  $query = $conexion->prepare("SELECT * FROM usuarios WHERE correo = :username AND password = :pass");
  $query->execute(["username" => $username, ":pass" => $pass]);
  $result = $query->fetch(PDO::FETCH_ASSOC);
  echo json_encode($result);
} catch (PDOException $e) {
  echo "Hubo un error: " . $e->getMessage();
}

PHP

Lo primero que hacemos, definir las variables de conexión $db, $host, $user y $password, después mediante una sentencia try/catch, intentamos conectarnos a la base de datos, generando una nueva instancia de la clase PDO.

Si la conexión es satisfactoria, entonces, preparamos la consulta mediante el método prepare y la ejecutamos enviando un arreglo asociativo con los aliases dentro del método execute.

Si la consulta retorna datos, se imprimirá un JSON mediante la instrucción json_encode.

En caso de existir algún error, se genera una excepción dentro de la clase PDOException y se imprime el error correspondiente, mediante el método getMessage().

Con estos 4 archivos, hemos logrado validar que un registro dentro de la base de datos, obtener la información del registro y validar el login en javascript, si la validación es satisfactoría, entonces, almacenaremos los datos dentro del sessionStorage del navegador.

Si deseas obtener el código completo del proyecto, puedes acceder a mi repositorio en github login-validate

¿Quieres aprender a conectar una base de datos MySQL con PHP?, aquí te dejo un artículo

Si te ha servido esta información, te pido la compartas con tus compañeros y personas que creas que les puede ayudar igual que a ti, así mismo, te comparto mis redes sociales, en donde sería de mucha ayuda si te suscribes y me ayudas a compartir

Próximamente se encontrará esta información dentro de mi canal de Youtube(O tal vez ya está disponible), así que te pido te suscribas, ya que continuamente comparto código por esos medios.

¿Quieres aprender a conectar una base de datos MySQL con PHP utilizando PDO?, aquí te dejo un artículo

Si te ha gustado este artículo y te aporta valor te pido me sigas en mi:

🖥️ Youtube: https://www.youtube.com/@eightdev?sub_confirmation=1

🎵 Tik Tok: https://www.tiktok.com/@8devmx

✅ Facebook: https://www.facebook.com/8devmx/

📸 Instagram: https://www.instagram.com/8devmx/