Qué es el login Login es el proceso mediante el cual se controla el acceso individual a un sistema informático mediante el uso de credenciales provistas al usuario con el fin de proteger la información contenida. Cuáles son lo archivos necesarios En este tutorial explicaré sobre cómo crear un formulario de login usando jquery, php y mysql. Lo primero será crear una carpeta en nuestro servidor a la que este ejemplo llamaremos ajax_login Nuestra carpeta de login contendrá 5 archivos: index.php login.php logout.php, estilo.css y jquery.js que lo descargamos desde jquery.com.

Paso 1: Crear la tabla user en mysql

Primero tenemos que crear la tabla que contendrá todos los usuarios y sus claves. Nótese que hemos definido el campo id como un AUTO_INCREMENT, significa que se la asigna de forma automática a todos los miembros del sitio.

	CREATE TABLE IF NOT EXISTS `user` (
  	`id` int(2) NOT NULL AUTO_INCREMENT,
  	`username` varchar(20) NOT NULL,
  	`password` varchar(50) NOT NULL,
  	PRIMARY KEY (`id`)
	) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=2 ;

	INSERT INTO `user` (`id`, `username`, `password`) VALUES
	(1, 'admin', '1a1dc91c907325c69271ddf0c944bc72');
		

Paso 2: Formulario en el archivo index.php

	<?php @session_start(); ?>
	<div id="profile">
    	<?php if(isset($_SESSION['user_name'])){
			?>
			<a href='logout.php' id='logout'>Logout</a>
		<?php }else {?>
		<a id="login_a" href="#">login</a>
        <?php } ?>
	</div>
    <div id="login_form">
        <div class="err" id="add_err"></div>
    	<form action="login.php">
			<label>Usuario:</label>
			<input type="text" id="user_name" name="user_name" />
			<label>Password:</label>
			<input type="password" id="password" name="password" />
			<label></label><br/>
			<input type="submit" id="login" value="Login" />
			<input type="button" id="cancel_hide" value="Cancel" />
		</form>
    </div>
	<div id="shadow" class="popup"></div>	
	

Paso 3: El archivo login.php

En este archivo tenemos que incluir los datos de conexión para generar la consulta sql, y nos trae como resultado el nombre de usuario para agregarlo en la sesión con el identificador user_name

	<?php
	session_start();
	$username = $_POST['name'];
	$password = md5($_POST['pwd']);
	$mysqli=mysqli_connect('localhost','usuario_mysql','password_mysql','nombre_bd');
	$query = "SELECT * FROM user WHERE username='$username' AND password='$password'";
	$result = mysqli_query($mysqli,$query)or die(mysqli_error());
	$num_row = mysqli_num_rows($result);
	$row=mysqli_fetch_array($result);
	if( $num_row >=1 ) {
	echo 'true';
	$_SESSION['user_name']=$row['username'];
		}
		else{
			echo 'false';
		}
?>
	

Paso 4: Deslogearse con logout.php

<?php
session_start();
unset($_SESSION['user_name']);
header('Location: index.php');
?>

Paso 5: Utilizando ajax para comunicarse con el servidor

Ajax es una técnica para crear aplicaciones web interactivas, estas aplicaciones se ejecutan en el navegador mientras se mantiene la comunicación con el servidor en segundo plano.

<script type="text/javascript">
$(document).ready(function(){
	$("#login_a").click(function(){
        $("#shadow").fadeIn("normal");
         $("#login_form").fadeIn("normal");
         $("#user_name").focus();
    });
	$("#cancel_hide").click(function(){
        $("#login_form").fadeOut("normal");
        $("#shadow").fadeOut();
   });
   $("#login").click(function(){
    
        username=$("#user_name").val();
        password=$("#password").val();
         $.ajax({
            type: "POST",
            url: "login.php",
            data: "name="+username+"&pwd="+password,
            success: function(html){
              if(html=='true')
              {
                $("#login_form").fadeOut("normal");
				$("#shadow").fadeOut();
				$("#profile").html("<a href='logout.php' id='logout'>Logout</a>");
				
              }
              else
              {
                    $("#add_err").html("Usuario o password incorrectos");
              }
            },
            beforeSend:function()
			{
                 $("#add_err").html("Cargando...")
            }
        });
         return false;
    });
});
</script>

Sobre Ajax: La primera aplicación Ajax conocida fue el Outlook Web Access de Microsoft en la versión de 1998. Ya es parte importante de tecnología web actual y presenta evidentes ventajas como mayor velocidad de respuesta y evita la pérdida de contexto al momento de recargar las páginas.

En los siguientes links queda la demo de este post y además la descarga del código incluyendo el estilo css.

Abrir DEMO
Descargar Código

Artículos

• Validación de formularios usando características de HTML5
• Método para insertar registros en MySQL usando PHP
• Obtener datos desde MySQL y mostrar el resultado en una tabla
• Los colores y sus códigos RGB
• Cómo evitar los comentarios spam
• Creando un login simple con jquery, php y mysql
• Conversor de Medidas Online
• Visualizar datos en una tabla parte II: Aplicando estilo css
• Constanza Gonzalez: Mini Poesía
• Constanza Gonzalez: Ensayo - Sobre las Desiciones
• Un ejemplo de ABM usando Ajax - PHP - MySQL
• Usando jquery para modificar elementos del HTML
• Michelles Jaque
• Beatriz Cabrera Zapata
• Lista comercios asociados al CyberMonday 2015
• Cómo desarmar un notebook HP Compaq Presario C700
• Enviar correos desde localhost o sitio web con PHPMailer smtp
• Cuadro de busqueda instantanea en sitio web jquery-php
• Sistema de LogIn con verificacion de email y recuperacion de contraseña usando PHP
• Usar PDO para conectarse a MYSQL
• Proyecto Intranet: Ordenes de servicio y ventas
• Cómo detectar el navegador con JavaScript
• Demostración Jquery UI Selectable usando php y bases de datos mysql
• Subir, insertar, actualizar, borrar imágenes con PHP y MySQL
• Calculadora IMC usando JavaScript
• Select dependientes con Ajax MySQL PHP
• Expresiones regulares en PHP
• Visualizar datos en tabla html con mysqli