Crear login con jQuery PHP y MySQL

Crear login con jQuery PHP y MySQL. En la actualidad se requieren sistemas dinámicos que ahorren recursos, que no sature el servidor consumiendo muchos recursos como ancho de banda y CPU y lo más importante el tiempo. En este artículo, trataremos el tema de un login de usuarios que funciona con una serie de recursos que detallaremos a continuación.

Crear login con jQuery PHP y MySQL

¿Qué lenguajes se utilizaran para realizar este sistema?

• El lenguaje de programación PHP
• JQuery para darle dinamismo al sistema
• Lenguaje de marcas HTML5
• Librería Bootstrap

Componentes y archivos de este sistema login

#1 La base de datos

CREATE TABLE `usuario` (
  `id_usuario` int(11) NOT NULL,
  `username` varchar(10) NOT NULL,
  `contrasena` varchar(80) NOT NULL,
  `nombres` varchar(120) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 ROW_FORMAT=DYNAMIC;


INSERT INTO `usuario` (`id_usuario`, `username`, `contrasena`, `nombres`) VALUES
(1, 'admin', 'admin', 'Juan Torres Muñoz');

--
-- Indices de la tabla `usuario`
--
ALTER TABLE `usuario`
  ADD PRIMARY KEY (`id_usuario`);

--
-- AUTO_INCREMENT de la tabla `usuario`
--
ALTER TABLE `usuario`
  MODIFY `id_usuario` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=2;

#2 Fichero conexion.php

<?php

// Configuración necesaria para acceder a la data base.
$hostname = "localhost";
$usuariodb = "root";
$passworddb = "root";
$dbname = "php_login_ajax";
	
// Generando la conexión con el servidor
$conectar = mysqli_connect($hostname, $usuariodb, $passworddb, $dbname);

// Definiendo el charset como utf8
mysqli_set_charset($conectar,"utf8");

?>

#3 Fichero index.php

Aqui se incluyen las librerias para que este login sea dinamico

<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.form.js'></script>

Delaracion de una funcion jQuery es el que realizara las solicitudes, si es incorrecto los datos ingresados al login mostrara un mensaje de error, caso contrario mostrara el fichero con la sesion iniciada.

<script type="text/javascript">
        // inicia funcion cuando carga la página
        $(function($) {
            // Cuando envia desde formulário
            $('#frmLogin').submit(function() {
                // Limpiando los mensajes de error
                $('div.mensagem-erro').html('');
                // Mostrando carga
                $('div.loader').show();
                // Enviando informacion via AJAX
                $(this).ajaxSubmit(function(respuesta) {
                    // Si no hay error mostrar el siguiente archivo
                    if (!respuesta)
                        // Redirecionando para o painel
                        window.location.href = 'PanelControl.php';
                    else
                    {
                        // Encondiendo la carga con hide()
                        $('div.loader').hide();
                        // Exibimos mensaje de error
                        $('div.mensagem-erro').html(respuesta);
                    }
                });
                // Retornando false
                return false;
            });
        });
        </script>

Por ultimo en el cuerpo de la página mostraremos el formulario en el cual utilizaremos BootStrap para darle una apariencia moderna y profesional. Este formulario envía los datos mediante el id «frmLogin»

   <!-- Contenido --> 

<form id="frmLogin" action="ajax/login.php" method="post">
  <fieldset>
      <div class="loader" style="display: none;"><img src="image/loader.gif" alt="Cargando" /></div>
      <p><div class="mensagem-erro"></div></p>
        <div class="form-group">
    <label for="usuario">Usuario:</label>
    <input required type="text" class="form-control" id="username" name="username" placeholder="Ingrese su usuario" value="">
 	   </div>
        <div class="form-group">
    <label for="password">Contraseña:</label>
    <input required class="form-control" type="password" id="contrasena" name="contrasena"  placeholder="Ingrese su Contraseña" value="">
 	   </div>
  
<input class="btn btn-primary" type="submit" value="Iniciar Sesion">
             
  </fieldset>

</form>

 <!-- Fin Contenido -->

#4 Fichero PanelControl

En este apartado se realiza la verificación a través de la clase «Login», si es correcto el login mostrara los valores de la sesión actual.

<?php
// Incluimos el archivo conexión
require_once('db/conexion.php');
require_once('db/clase.php');
// Instancia del objeto classe Login
$objLogin = new Login();

// Verificamos si esta logueado, caso contrario será redireccionado a la página de login
if (!$objLogin->verificar('index.php'))
    // Cerramos la verificacion
    exit;

// Selecionamos informacion del usuario desde MySQL
$query = mysqli_query($conectar,"SELECT * FROM usuario WHERE id_usuario = {$objLogin->getID()}");
$usuario = mysqli_fetch_object($query);
?>

#5 Archivo cerrar sesión

<?php
// Declaramos en fichero encargado de realizar la conexión
require_once('db/conexion.php');
require_once('db/clase.php');
// Instancia el objeto da classe Login
$objLogin = new Login();

// Finaliza la sessión del usuario
$objLogin->logout('index.php');
?>

CONCLUSIÓN

El avance de la tecnología nos lleva a cambiar y más aún si es en el entorno web. Las nuevas plataformas hacen uso de estas librerías para trabajar de manera dinámica. Por lo tanto, si nos damos cuenta hoy en día ya desapareció el manejo de animaciones en formato «.SWF» de los proyectos y páginas web.

Hoy en día esta tecnología fue reemplazada por el lenguaje jQuery que es una variante del famoso lenguaje JavaScript. Usando esta librería podemos crear animaciones de imágenes, login interactivos como el que presentamos en este artículo, entre otras opciones.

Es muy recomendable su uso y espero que ustedes puedan implementarlo en sus proyectos web para estar a la par en la tecnología.

DESCARGA