En este pequeño tutorial veremos, como realizar una autenticación de usuarios utilizando PHP MySQL + Ajax con JavaScript primera parte.
Para comenzar a desarrollar nuestro pequeño proyecto lo primero sería, tener nuestro servidor local en este caso utilizare Xampp.
En nuestro htdocs, administrador de documentos necesitamos agregar una nueva carpeta con el nombre digamos usuarios, login etc.
Una vez tengamos nuestra carpeta allí agregamos unas subcarpetas con los siguientes nombres CSS, JS, AJAX y IMG.
Ahora bien una vez hecho aquello abrimos nuestra carpeta login o usuarios a nuestro editor de código, una vez allí creamos nuestro primer archivo con el nombre de index.php creamos otro archivo llamado conexion.php
Bien ya teniendo nuestros primero archivo crearemos tres más un para nuestros estilos llamado main.css en nuestra carpeta css, otro llamada app.js en nuestra carpeta js y los dos últimos en nuestra carpeta ajax add_users.php y functios.php.
Estaremos trabajando con un framework css llamado materializecss, en nuestro index.php agregamos el siguiente código.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="css/materialize.css">
<link rel="stylesheet" href="css/main.css">
<title>SING IN</title>
</head>
<body>
<section class="login-bg">
<div class="form-login box">
<h5 class="center white-text">Registrate con facebook</h5>
<div class="btn-social center mt-2">
<ul>
<li>
<a href="javascript:void(0)" class="facebook btn-block">
Facebook <i class="fab fa-facebook-f"></i>
</a>
</li>
</ul>
</div>
<form id="registro" onsubmit="return false" class="col s12">
<div id="optinoOne">
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">email</i>
<input type="email" id="email" name="email">
<label for="email">Correo</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">lock_outline</i>
<input type="password" id="pass1" name="pass1">
<label for="pass1">Contraseña</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">input</i>
<input type="password" id="pass2" name="pass2">
<label for="pass2">Confirme su ontraseña</label>
</div>
</div>
<div class="center">
<input type="submit" class="btnIngreso" onclick="add_users(email.value, pass1.value, pass2.value);" value="Registro">
</div>
</form>
<div class="center">
<a href="<?php echo $url; ?>login" class="white-text">Ya tengo cuenta</a>
</div>
</div>
</section>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/materialize.min.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Ok como podemos ver tenemos un formulario con tres input email y password, agreguemos un poco de estilos css, para darle una vista agradable a nuestro form de registro.
body{
background: url('../img/bg.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 100vh;
}
/*===============================
Forms pages login and singup
=================================*/
section.login-bg{
background: url('../img/bg.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
height: 100%;
}
div.form-login{
width: 30%;
position: absolute;
margin-top: 300px;
right: 50%;
transform: translate(50%, -50%);
padding: 10px;
background: url('../img/bg-form.jpg');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
@media only screen and (max-width: 768px){
div.form-login{
width: 80%;
}
}
div.form-login .facebook{
background: #3b5998;
color: #fff;
padding: 10px 20px;
text-align: center;
}
div.form-logo{
text-align: center;
margin-top: -30px;
}
.btn-social ul li{
display: inline-block;
}
div.form-login form label,
div.form-login form i{
color: #fff;
}
div.form-login form .btnIngreso{
background: #E74C3C;
border: none;
width: 80%;
color: #fff;
text-align: center;
padding: 10px 0;
border-radius: 10px;
}
div.form-login form input{
color: #ffff;
}
p.chek{
margin-left: 15px!important;
}
input:not([type]):focus:not([readonly]),
input[type=text]:not(.browser-default):focus:not([readonly]),
input[type=password]:not(.browser-default):focus:not([readonly]),
input[type=email]:not(.browser-default):focus:not([readonly]),
input[type=url]:not(.browser-default):focus:not([readonly]),
input[type=time]:not(.browser-default):focus:not([readonly]),
input[type=date]:not(.browser-default):focus:not([readonly]),
input[type=datetime]:not(.browser-default):focus:not([readonly]),
input[type=datetime-local]:not(.browser-default):focus:not([readonly]),
input[type=tel]:not(.browser-default):focus:not([readonly]),
input[type=number]:not(.browser-default):focus:not([readonly]),
input[type=search]:not(.browser-default):focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
border-bottom: 1px solid #E74C3C;
-webkit-box-shadow: 0 1px 0 0 #E74C3C;
box-shadow: 0 1px 0 0 #E74C3C;
}
input:not([type]):focus:not([readonly]) + label,
input[type=text]:not(.browser-default):focus:not([readonly]) + label,
input[type=password]:not(.browser-default):focus:not([readonly]) + label,
input[type=email]:not(.browser-default):focus:not([readonly]) + label,
input[type=url]:not(.browser-default):focus:not([readonly]) + label,
input[type=time]:not(.browser-default):focus:not([readonly]) + label,
input[type=date]:not(.browser-default):focus:not([readonly]) + label,
input[type=datetime]:not(.browser-default):focus:not([readonly]) + label,
input[type=datetime-local]:not(.browser-default):focus:not([readonly]) + label,
input[type=tel]:not(.browser-default):focus:not([readonly]) + label,
input[type=number]:not(.browser-default):focus:not([readonly]) + label,
input[type=search]:not(.browser-default):focus:not([readonly]) + label,
textarea.materialize-textarea:focus:not([readonly]) + label {
color: #E74C3C;
}
.input-field .prefix.active {
color: #E74C3C;
}
Bien ya tenemos nuestro form mucho mejor comencemos a trabajar en él para que funcione, nos vamos nuestro archivo app.js pero antes agregamos lo siguiente en nuestro form si aún no lo tenemos para decirle que queremos trabajar con ajax.
Nos dirijimos a app.js y agregamos el siguiente código.
var toastContent;
var displayLength = 5000;
function add_users(email, pass1, pass2) {
var email = email.split(" ").join("");
re = /^([\da-z_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
if (limpiar(email) != '' && limpiar(pass1) != '' && limpiar(pass2) != '') {
//Paso 1 validación ok
if (limpiar(pass1) != limpiar(pass2)) {
toastContent = $('<span>Las contraseñan nocinciden.</span>');
Materialize.toast(toastContent, displayLength);
} else if (!re.exec(email)) {
toastContent = $('<span>El correo ingresado no es v\u00e1lido.</span>');
Materialize.toast(toastContent, displayLength);
} else {
//Enviar registro
$.ajax({
type: 'POST',
url: 'ajax/add_users.php',
cache: false,
//data: 'user=' + user + '&correo=' + correo + '&pass1=' + pass1,
data: $('#registro').serialize(),
success: function(respuesta) {
if (limpiar(respuesta) == 'correcto') {
//Ir a login
$('#registro')[0].reset();
toastContent = $('<span>Se registro correctamente.</span>');
Materialize.toast(toastContent, displayLength);
} else if (limpiar(respuesta) == 'error') {
//Mostrar error
toastContent = $('<span>No se pudieron guardar los datos.</span>');
Materialize.toast(toastContent, displayLength);
}
}
});
}
} else {
toastContent = $('<span>Completa los campos.</span>');
Materialize.toast(toastContent, displayLength);
}
}
function limpiar(valor) {
var cadena = valor.split(' ').join('');
return cadena;
}
Podemos ver que tenemos una function con el nombre add_users en el agregamos un poco de validación para comprobar que los campos no se encuentren vacíos como lo hacemos primero en nuestro form enviamos los valores para trabajarlos desde javascript.
<div class="center">
<input type="submit" class="btnIngreso" onclick="add_users(email.value, pass1.value, pass2.value);" value="Registro">
</div>
Luego preguntamos con un if si los campos son diferente de nada o vacío le enviamos una alert requiriendo que complete los campos , comprobando ya que los campos no estén vacíos agregamos nuestro ajax.
if (limpiar(email) != '' && limpiar(pass1) != '' && limpiar(pass2) != '')
Ahora validamos el email utilizando la siguiente expresión.
var email = email.split(" ").join("");
re = /^([\da-z_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
Preguntamos si el email en es válido.
else if (!re.exec(email)) {
toastContent = $('<span>El correo ingresado no es v\u00e1lido.</span>');
Materialize.toast(toastContent, displayLength);
para comprobar que los datos se envíen nos iremos a nuestro archivo add_iusers.php y agregamos lo siguiente.
No vamos a nuestro form y abrimos la consola de crom nos vamos a la Network o Red.
Probamos enviando nuestros primeros datos llenamos nuestro form y presionamos registro.
Como podemos ver todo funciona bien ahora nos toca irnos a crear nuestra base de datos la cual se encargará de guardar estos datos, creamos nuestra tabla.
Con nuestra base de datos y nuestra tabla nos iremos a nuestro archivo de conexion.php y agregamos el siguiente código.
<?php
$conn = new mysqli('localhost', 'root','','login');
if($conn->connect_error) {
echo $error = $conn->connect_error;
}
require_once 'ajax/functions.php';
Ya estando conectados Nos estaría faltando, hacer que los datos que enviamos por el form se almacenen en la base de datos, para eso nos vamos nuevamente a nuestro archivo add_users.php y agregamos el siguiente código.
<?php require_once('../conexion.php');
if ($_SERVER['REQUEST_METHOD'] =='POST'){
//Validar formulario
if(!isset($_POST['email']) || $_POST['email']=='' || $_POST['pass1']=='') exit;
$accion_adduser = sprintf("INSERT INTO tc_usuarios (email, password, nivel) VALUES (%s, %s, %s)",
limpiar($_POST['email'],'text'),
limpiar(md5($_POST['pass1']),'text'),
limpiar(1,'int'));
$consulta_adduser = mysqli_query($conn,$accion_adduser) or die(mysqli_error());
echo 'correcto';
}else{
echo 'error';
}
?>
Pero antes de explicar el código tenemos que agregar una nueva function php a nuestro archivo functions.php agregamos el siguiente código.
<?php
function limpiar($theValue, $theType, $theDefinedValue = "", $theNotDefinedValue = "")
{
//Iniciamos la variable $conn
global $conn;
if (PHP_VERSION < 6) {
$theValue = get_magic_quotes_gpc() ? stripslashes($theValue) : $theValue;
}
//Agregamos $conn en las funciones mysqli_real_escape_string y mysqli_escape_string
$theValue = function_exists("mysqli_real_escape_string") ? mysqli_real_escape_string($conn,$theValue) : mysqli_escape_string($conn,$theValue);
switch ($theType) {
case "text":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "long":
case "int":
$theValue = ($theValue != "") ? intval($theValue) : "NULL";
break;
case "double":
$theValue = ($theValue != "") ? doubleval($theValue) : "NULL";
break;
case "date":
$theValue = ($theValue != "") ? "'" . $theValue . "'" : "NULL";
break;
case "defined":
$theValue = ($theValue != "") ? $theDefinedValue : $theNotDefinedValue;
break;
}
return $theValue;
}
Bien ya tenemos nuestro código en add_users.php el cual se encargará de enviar nuestros datos del form registro a la base de datos, primero preguntamos con un if para comprobar que los datos que se envían sean por POST si no es así cortamos la ejecución con un exit
if(!isset($_POST['email']) || $_POST['email']=='' || $_POST['pass1']=='') exit;
Luego agregamos el siguiente código donde agregamos una sentencia sql para insertar los datos en la tabla usuarios, agregamos un echo ‘correcto’; para decirle a ajax que los datos se insertaron.
$accion_adduser = sprintf("INSERT INTO tc_usuarios (email, password, nivel) VALUES (%s, %s, %s)",
limpiar($_POST['email'],'text'),
limpiar(md5($_POST['pass1']),'text'),
limpiar(1,'int'));
$consulta_adduser = mysqli_query($conn,$accion_adduser) or die(mysqli_error());
echo 'correcto';
Comprobamos llenando nuestro form y presionar en registro luego consultamos nuestra tabla creada.
Muy bien como podemos ver ya tenemos nuestro primer registro.
Espero te haya gustado este pequeño tutorial y no olvides compartir con tus amigos. 💪 👍😊
Recuerda puedes visitarme y seguir aprendiendo en youtube
Materialize es un marco de diseño moderno que utiliza principios de diseño de material para crear interfaces de usuario interactivas y atractivas. Aquí te mostramos cómo puedes crear una plantilla básica utilizando Materialize.
Una serie de consultas MySQLi que puedes utilizar a la hora de comenzar a crear tus propios proyectos utilizando PHP Y MySQL..
Hola mi nombre es Eduardo Nava, Soy programador, diseñador web, móvil y de videojuegos.
El mundo digital avanza cada día.
Soy completamente autodidacta, por eso te ofrezco muchos de mis conocimientos para puedas aprender más fácilmente y más rápido de lo que hice y hago cada día.
Mi propósito es tratar mi pasión para enseñar tecnologías que avanzan cada día a todas esas personas, que quieran iniciarse en este mundo de forma actualizada.
