Bienvenido Internauta.! :)
Ahora te enseñare como hacer una ventana de login o acceso a usuarios con una aplicación desarrollada en PHP + MySQL + Html5 + jQuery, todo lo aremos de una manera muy sencilla, recuerda que para esto debes de tener ya configurado tu ambiente de desarrollo y saber como realizar una conexión a la base de datos de MySQL, si no sabes como hacerlo puedes ver mis artículos anteriores donde te enseño como hacerlo.
Muy Bien Pues Comencemos :) ..!
1.- Creación de formulario y validación de campos (jQuery)
Vamos a utilizar la librería de jQuery que le podemos decir que es algo así como el javascript moderno.
Link: jQuery Web Oficial
Crea una nueva carpeta para tu proyecto dentro de "C:\xampp\htdocs" yo la llamare login y dentro de ella creare una carpeta llamada js donde y dentro de ella guarda el archivo como jquery.js hasta el momento así se ve mi proyecto.
El motivo de esto es comenzar a aprender a ordenar nuestras librerías de javascript, estilos css, librerías php, funciones etc tranquilo mas adelante aprenderemos esto.
Por ahora ya tenemos la carpeta del proyecto y la librería que usaremos ahora a comenzar a programar. Abrimos nuestro editor de texto preferido ( Sublime Text en mi caso, yo ya configure mi carpeta de proyecto por default) y crearemos el archivo index.php con el siguiente código:
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery.js"></script><!--ESTA LINEA IMPORTA LA LIBRERIA DE JQUERY QUE ESTA EN LA CARPETA JS-->
<title>Login PHP + MySQL</title>
</head>
<body>
<div id="formulario">
<form id="miformulario" method="POST" action="">
<p><label>Usuario*: <input type="text" id="usuario" name="usuario" /></label></p>
<p><label>Clave*: <input type="text" id="clave" name="clave" /></label></p>
<p><input type="button" id="enviar" value="Enviar"></p>
</form>
</div>
<div id="exito" style="display:none"><!--Div Oculto que se mostrara con jQuery en caso de Exitoso-->
Sus datos han sido recibidos con éxito.
</div>
<div id="fracaso" style="display:none"><!--Div Oculto que se mostrara con jQuery en caso de Error-->
Se ha producido un error durante el envío de datos.
</div>
</body>
</html>
Hasta el momento el archivo nos quedaría así:
Ahora ejecutamos en navegador http://localhost/login y obtenemos la siguiente vista:
Ahora veamos como usar jQuery para validar y hacer el envió de información, esto se divide en dos pasos, la función que valida el formulario y la función que hace el envió de datos a un documento php que nos regresara una respuesta. Para empezar el código completo seria el siguiente:
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/jquery.js"></script><!--ESTA LINEA IMPORTA LA LIBRERIA DE JQUERY QUE ESTA EN LA CARPETA JS-->
<title>Login PHP + MySQL</title>
<script>
function validaForm(){ //Creamos la funcion que valida los campos
if($("#usuario").val() == ""){ //El campo con id = usuario validamos si esta vacion
alert("El campo Nombre es Requerido"); //Mensaje de Alerta
$("#usuario").focus(); //Regresarmos el cursor al campo
return false; //Terminamos la ejecucion del Javascript
}
if($("#clave").val() == ""){
alert("El campo Clave es Requerido");
$("#clave").focus();
return false;
}
return true; // Si todo está correcto
}
$(document).ready( function() { // Esta parte del código se ejecutará automáticamente cuando la página esté lista.
$("#enviar").click( function() { // Con esto establecemos la acción por defecto de nuestro botón de enviar.
if(validaForm()){ // Primero validamos el formulario. Llamamos la Funcion
$.post("enviar.php",$("#miformulario").serialize(),function(res){
$("#miformulario").fadeOut("slow"); // Hacemos desaparecer el div "formulario" con un efecto fadeOut lento.
if(res == 1){
$("#exito").delay(500).fadeIn("slow"); // Si hemos tenido éxito, hacemos aparecer el div "exito" con un efecto fadeIn lento tras un delay de 0,5 segundos.
} else {
$("#fracaso").delay(500).fadeIn("slow"); // Si no, lo mismo, pero haremos aparecer el div "fracaso"
}
});
}
});
});
</script>
</head>
<body>
<div id="formulario">
<form id="miformulario" method="POST" action="">
<p><label>Usuario*: <input type="text" id="usuario" name="usuario" /></label></p>
<p><label>Clave*: <input type="text" id="clave" name="clave" /></label></p>
<p><input type="button" id="enviar" value="Enviar"></p>
</form>
</div>
<div id="exito" style="display:none"><!--Div Oculto que se mostrara con jQuery en caso de Exitoso-->
Sus datos han sido recibidos con éxito.
</div>
<div id="fracaso" style="display:none"><!--Div Oculto que se mostrara con jQuery en caso de Error-->
Se ha producido un error durante el envío de datos.
</div>
</body>
</html>
El código agregado nos muestra como se genera la función que valida el formulario, y la función que envía los datos a un archivo llamado enviar.php que mas adelante construiremos la función javascript se ve de la siguiente manera:
El código completo se ve de la siguiente manera:
Si ejecutamos esto en el navegador http://localhost/login veremos el siguiente comportamiento:
El campo que este vació nos mostrara el mensaje
Ahora ya sabes validar campos con jQuery :) ..!! Fácil no ?
2.- Envió de formulario por POST y búsqueda de registro en una tabla de MySQL
A lo largo de estos tutoriales tratare de ir desarrollando una sola aplicación en conjunto así que de una vez generare una base de datos que utilizare a lo largo de todos mis artículos, así que comencemos.
Primero generaremos una base de datos, yo en mi caso llamare phpmas y creare una tabla llamada TblUsuarios dejare imagen de la estructura y el script de creación:
Nota : Si no sabes como utilizar el archivo aquí te enseño como Importar Base desde archivo
El usuario para mi ejemplo sera mariano y la contraseña sera lopez123 con esto ya podemos continuar con el tutorial.
Para esto vamos a crear el archivo enviar.php que es el archivo que llama la función de javascript
Primeramente haremos la conexión a la base de datos con el siguiente código
$conexion = mysqli_connect("localhost","root","");
if(!$conexion){
$conexion="<p>Error en la Conexion: ".mysqli_error($conexion)."</p>";
}else{
mysqli_select_db($conexion,"phpmas");
mysqli_query($conexion,'set names "utf-8"');
}
posteriormente recibiremos las variables que enviamos por método POST fijémonos en la función javascript que este método es usado, lo subraye en color rojo.
El código a utilizar para recibir las variables es el siguiente
$usuario = $_POST['usuario'];
$clave = $_POST['clave'];
Ahora ejecutamos una consulta utilizando las variables recibidas, yo leería la consulta de la siguiente manera "Tráeme a todos los registros de la tabla TblUsuarios CUANDO usuario sea igual al usario que te indico y clave sea igual a la clave que te indico "
$consulta = "SELECT * FROM tblusuarios WHERE usuario = '$usuario' and clave = '$clave' ";
$resul = mysqli_query($conexion,$consulta);
if(!$resul){
$resul = "ERROR:".mysqli_error($conexion)."\n\r".$consulta;
}
Ahora con una función de php contaremos cuantos registros trae el resultado
mysqli_num_rows($resul)
Utilizamos echo para que ese sea el valor que devuelva la ejecución del archivo enviar.php el codigo completo quedaría así:
<?php
$conexion = mysqli_connect("localhost","root","");
if(!$conexion){
$conexion="<p>Error en la Conexion: ".mysqli_error($conexion)."</p>";
}else{
mysqli_select_db($conexion,"phpmas");
mysqli_query($conexion,'set names "utf-8"');
}
//$usuario = $_POST['usuario'];
//$clave = $_POST['clave'];
$usuario = "mlopez";
$clave = "lopez123";
$consulta = "SELECT * FROM tblusuarios WHERE usuario = '$usuario' and clave = '$clave' ";
$resul = mysqli_query($conexion,$consulta);
if(!$resul){
$resul = "ERROR:".mysqli_error($conexion)."\n\r".$consulta;
}
echo mysqli_num_rows($resul)
?>
Si todo lo hicimos correctamente el resultado deberá ser uno entonces si analizamos la función de javascript nos dice que si el resultado es 1 nos mostrara el mensaje "Sus datos han sido recibidos con éxito."
Si el resultado es 0 nos mostrara el siguiente mensaje "Se ha producido un error durante el envío de datos."
Recordemos que nuestro usuario para la prueba era mlopez y la clave lopez123 entonces ejecutemos nuestro código en el navegador y primero mandare un error.
Ahora mandare los datos correctos :).!
Al final yo solo mostré un mensaje, pero puedes hacer múltiples acciones, como mostrar otro formulario, direccionamiento a otra pagina, etc etc.! el ejemplo solo fue demostrativo.!
:)
No olvides escribirme a : gismodelta79@gmail.com
También puedes seguirme en mis redes oficiales:
Instagram: Mariano Balderas
Twitter: @MarianoBOficial
