Tutorial: Login y registro en Php, Mysqli y Ajax con rangos

  • Autor Autor irwin238
  • Fecha de inicio Fecha de inicio
irwin238

irwin238

Gamma
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
Hola, les traigo este pequeño y sencillo login que hice :love_heart:



El PHP esta en estructural para que sea facil la edicion para los usuarios que no saben POO



Tambien esta sin diseño para que sea facil de adaptar a sus scripts 😛



Ejemplo del script: [LINK]

Ejemplo del script hecho en POO y con CSS (Bootstrap x'D) [LINK]

NOTA: Requieren soporte "Mysqli" (extension)


Paso 1.



Creen una nueva base de datos y descargen e importen el siguiente archivo .SQL [LINK]



Paso 2.



Creen un nuevo archivo llamado "index.php" con el siguiente codigo


HTML: 
<?php require('inc/config.php'); require('inc/funciones.php'); ?>
<!doctype HTML>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Login Simple By Irwin2382</title>
	  <link href="<?=$url?>/assets/css/Irwin2382.css" rel="stylesheet">
	  <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
	<?php
if (logueado()) {
	echo "Hola ".username()." tu rango es: ".rango();

	if (rango() == "Administrador") {
		echo "<br>:P Eres admin e.e";
	}

	echo "<br><a href='logout.php'>Cerrar Sesión</a>";
}else{
	echo "Por favor <a href='login.php'>Inicia Sesión</a> o <a href='signup.php'>Registrate</a>";
}
  ?>
</body>
</html>

</html>

Explicacion del codigo:

La linea 1 llama a los archivos "config.php" y "funciones.php" que se encuentran dentro de la carpeta "inc".

De la linea 12 a la 20 se encuentra un If que verifica si esta logueado o no mediante la funcion "logueado()" la cual se encuentra en "funciones.php" , Tambien imprime un pequeño mensaje " 😛 Eres admin e.e" en caso de que sea admin. Que puede ser remplazado por un link hacia la administración o ser eliminado a demas de imprimir un link "Cerrar Sesión" que no creo tener que explicar

En la linea 13 si el usuario esta logueado imprime "Hola NICK tu rango es: RANGO"

(El rango se obtiene mediante una consulta MYSQL y un IF de la linea 42 a la 48 en "funciones.php")

En la linea 20 en caso de que no este logueado imprime "Por favor Inicia Sesión o Registrate" para que el usuario tome la accion que dese

------------------------------------ Terminamos con index.php ------------------------------------​

Ahora creamos los formularios para el acceso o registro

Paso 3.
En la raiz del script creamos 3 nuevos archivos con los siguientes nombres "login.php" , "signup.php" y "logout.php"
Dentro de login.php ponemos el siguiente codigo

HTML: 
<?php require('inc/config.php'); require('inc/funciones.php'); ?>
<!doctype HTML>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Login Simple By Irwin2382</title>
	  <link href="<?=$url?>/assets/css/Irwin2382.css" rel="stylesheet">
	  <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
	  <script src="<?=$url?>/assets/js/login.js"></script>
	  
</head>
<body>
<p id='alert_error' class='text-error invisible'></p>
<p id='alert_success' class='text-correcto invisible'></p>
<form id="LoginSimpleIrwin2382">
	<input type="text" id="username" placeholder="Usuario"><br>
	<input type="password" id="password" placeholder="Contraseña"><br>
	<input type="submit" id="EnviarLogin" value="Iniciar Sesión"><br>
</form>
</body>
</html>

No explicare este codigo ya que no tiene mucha ciencia 😛 solo crea un formulario para procesar el login

------------------------------------ Terminamos con login.php ------------------------------------​

Dentro de "signup.php" Agregamos el siguiente codigo

HTML: 
<?php require('inc/config.php'); require('inc/funciones.php'); ?>
<!doctype HTML>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Login Simple By Irwin2382</title>
	  <link href="<?=$url?>/assets/css/Irwin2382.css" rel="stylesheet">
	  <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
	  <script src="<?=$url?>/assets/js/signup.js"></script>
	  
</head>
<body>
<p id='alert_error' class='text-error invisible'></p>
<p id='alert_success' class='text-correcto invisible'></p>
<form id="SignupSimpleIrwin2382">
	<input type="text" id="username" placeholder="Usuario"><br>
	<input type="text" id="email" placeholder="Correo"><br>
	<input type="password" id="password" placeholder="Contraseña"><br>
	<input type="password" id="cpassword" placeholder="Confirma tu contraseña"><br>
	<input type="submit" id="EnviarRegistro" value="Registrarme"><br>
</form>
</body>
</html>
Tampoco explicare este codigo ya que no tiene mucha ciencia 😛 solo crea un formulario para el registro



------------------------------------ Terminamos con signup.php ------------------------------------​


Ahora dentro de "logout.php" ponemos el siguiente codigo

HTML: 
<?php require('inc/config.php'); require('inc/funciones.php');
session_id();
session_destroy();
redir("index.php");
?>

Tampoco explicare este codigo ya que no tiene mucha ciencia 😛

------------------------------------ Terminamos con logout.php ------------------------------------​





Paso 4. Creamos una nueva carpeta llamada "inc" y dentro creamos 2 archivos: "config.php" y "funciones.php"



Dentro de "config.php" Ponemos el siguiente codigo y EDITAMOS las lineas de la 14 a la 18 sus datos (Si lo desean pueden editar la linea 12 y cambiar la Zona horaria)

HTML: 
<?php
 /**
  * @package: Login Simple
  * @author: Irwin Lopez (Irwin2382 | Cerec)
  * @version: 1.0
  *    [MENTION=3037]Link[/MENTION]: [url]http://www.poxion.net[/url]
  *    [MENTION=109939]Copy[/MENTION]right: NINGUNO PERO NO LE QUITEN LOS CREDITOS -.-"
  **/ 
    [MENTION=72080]session[/MENTION]_start();
 error_reporting(E_ERROR | E_WARNING | E_PARSE);
 setlocale(LC_ALL,"es_ES");
 date_default_timezone_set('America/Mexico_City');
//Configuracion
 $url = "http://SUDOMINIO.COM/CARPETA"; //Sin / al final (En caso de que se use en la raiz dejar el puro dominio)
 $serv = "localhost"; //Servidor Mysql GENERAL MENTE LOCALHOST
 $user = "SU USUARIO"; //Usuario Mysql
 $pass = "SU CONTRASEÑA"; //Contraseña Mysql
 $base = "SU BASE"; //Base Myqsl
 $con = mysqli_connect($serv,$user,$pass,$base);
 if (!$con) { echo "<b>NO SE PUDO CONECTAR CON LA BASE DE DATOS</b>"; exit; }

------------------------------------ Terminamos con config.php ------------------------------------​



Ahora dentro de "funciones.php" agregamos el siguiente codigo

HTML: 
<?php
 /**
  * @package: Login Simple
  * @author: Irwin Lopez (Irwin2382 | Cerec)
  * @version: 1.0
  *    [MENTION=3037]Link[/MENTION]: [url]http://www.poxion.net[/url]
  *    [MENTION=109939]Copy[/MENTION]right: NINGUNO PERO NO LE QUITEN LOS CREDITOS -.-"
  **/ 

 function limpiar($valor){
 		global $con;
		$valor = mysqli_real_escape_string($con,$valor);
		$valor = htmlentities(strip_tags($valor), ENT_QUOTES, 'UTF-8');
		return $valor;
 }

 function redir($url){
		echo '<script >top.location.href="'.$url.'";</script>';
	}
	function logueado(){
		if (isset($_SESSION['username']) && !empty($_SESSION['username'])) {
			return true;
		}else{
			return false;
		}
	}
	function username(){
		return $_SESSION['username'];
	}
	function encriptacion($username,$password){
		return md5(sha1(base64_encode("K978971!#&&3(1)".$username.$password."8194Ksk103:P-Ola-k-Ase-:v")));
	}
	function ip(){
		if(isset($_SERVER['HTTP_X_FORWARDED_FOR']))
      		$ip=$_SERVER['HTTP_X_FORWARDED_FOR'];
  		else
      		$ip=$_SERVER['REMOTE_ADDR'];
  		if(isset($_SERVER['HTTP_CF_CONNECTING_IP']))
      		$ip=$_SERVER['HTTP_CF_CONNECTING_IP'];
  		return $ip;
	}
	function rango(){
		global $con;
		$query = 'SELECT * FROM usuarios WHERE usuario = "' .$_SESSION['username']. '" LIMIT 1';
  		$result = mysqli_query($con, $query) or die('Algo salio mal con la consulta');
  		$rango = mysqli_fetch_assoc($result);
  		if ($rango['rango'] == 1) return "Administrador";
  		return "Usuario comun";
	}

Explicacion del codigo:



config.php no creo que necesite mucha explicacion, solamente creamos variables para almacenar los datos de la MYSQL y hacemos una conexion a ella, ademas de definir la zona horaria y otras cosillas :topsy_turvy:


Ahora bien en funciones.php tardaria bastante explicando cada funcion detalladamente asi que lo hare rapidamente



La primera funcion (limpiar) de la linea 10 a la 15 Obtiene un texto el cual pasa por distintas funciones para evitar XSS



La segunda funcion (redir) de la linea 17 a la 19 Obtiene el directorio o archivo al cual se redirigira e imprime un <script> con el codigo de redireccion



La tercera funcion (logueado) la cual ya habia explicado arriba, verifica si el usuario esta logueado o no



La cuarta funcion (username) regresa el nombre del usuario en caso de que este logueado



La quita funcion (encriptacion) encripta el usuario y la contraseña junto con 2 SALTS que recomiendo modificarlos



La sexta funcion (ip) regresa la ip del usuario



La septima y ultima funcion (rango) que ya tambien habia explicado arriba, hace una conexion mysql y verifica el rango del usuario y lo regresa en forma de "Administrador" | "Usuario comun" que puede ser utilizado en ifs para las restricciones en algunas partes de la web

------------------------------------ Terminamos con funciones.php ------------------------------------​


En los siguientes archivos no explicare el codigo puesto que basicamente solo son validaciones ifs o consultas mysql para login / registro en cuestion de los archivos .php


En los .JS solamente obtiene los datos de los inputs y envia el POST mediante ajax



Paso 5.
Crean una carpeta llamada "ajax" y dentro de ella crean 2 archivos "login.php" y "signup.php"



Dentro del archivo "login.php" ponen el siguiente codigo

HTML: 
<?php
 /**
  * @package: Login Simple
  * @author: Irwin Lopez (Irwin2382 | Cerec)
  * @version: 1.0
  *    [MENTION=3037]Link[/MENTION]: [url]http://www.poxion.net[/url]
  *    [MENTION=109939]Copy[/MENTION]right: NINGUNO PERO NO LE QUITEN LOS CREDITOS -.-"
  **/ 
    require('../inc/config.php');
    require('../inc/funciones.php');
    if ($_POST) {
    $username = limpiar($_POST['username']);
    $password = limpiar($_POST['password']);
    if (!empty($username) && isset($username) and !empty($password) && isset($password)) {
    $passenc = encriptacion($username,$password);
    $ValidarLogin = mysqli_query($con,"SELECT * FROM usuarios WHERE usuario='$username' and contrasena='$passenc'");
      if($Login = mysqli_fetch_array($ValidarLogin)) {
        $_SESSION["username"] = $Login["usuario"];
    $result = array("status" => "si", "msg" => "Gracias por iniciar sesión, Seras redirigido en un momento");
    }else{
      $result = array("status" => "no", "error" => "Sus datos no son validos");
  }
    }else{
        $result = array("status" => "no", "error" => "Necesitas llenar todos los campos");
    }
    echo json_encode($result);
    }else{
        echo "Ola k ase";
    }
?>

------------------------------------ Terminamos con login.php ------------------------------------​

Ahora bien dentro del archivo "signup.php" ponen el siguiente codigo

HTML: 
<?php
 /**
  * @package: Login Simple
  * @author: Irwin Lopez (Irwin2382 | Cerec)
  * @version: 1.0
  *    [MENTION=3037]Link[/MENTION]: [url]http://www.poxion.net[/url]
  *    [MENTION=109939]Copy[/MENTION]right: NINGUNO PERO NO LE QUITEN LOS CREDITOS -.-"
  **/ 
    require('../inc/config.php');
    require('../inc/funciones.php');
        if ($_POST) {
    $username = limpiar($_POST['username']);
    $email = limpiar($_POST['email']);
    $password = limpiar($_POST['password']);
    $cpassword = limpiar($_POST['cpassword']);
    $passenc = encriptacion($username,$password);
    $fecha = strftime("%A %d de %B del %Y")." a las ".date("g:i a");
    $ip = ip();
    if (!empty($username) && isset($username) and !empty($email) && isset($email) and !empty($password) && isset($password) and !empty($cpassword) && isset($cpassword)) {
        if(strlen($username) < 3 ) {
    $result = array("status" => "no","error" => "El nick ingresado es muy corto. Necesitas al menos 3 Caracteres ");
    $continue = 0;
  }else{
    if(strlen($email) < 8){
    $result = array("status" => "no", "error" => "El correo ingresado es muy corto. Necesitas al menos 8 Caracteres " );
    $continue = 0;
    }else{
  if(strlen($password) < 8) {
    $result = array("status" => "no","error" => "La contraseña ingresada es muy corta. Necesitas al menos 8 Caracteres ");
    $continue = 0;
    }else{

    $continue = 1;
  }}}

   if ($continue == 1) {
              $userconsult = mysqli_query($con,"SELECT * FROM usuarios WHERE usuario ='$username'");
              $userconsultexist=mysqli_num_rows($userconsult);
if ($userconsultexist != 0) {
     $result = array("status" => "no","error" => "Ya existe un usuario con este nick ");
    }else{ 
        $emailconsult = mysqli_query($con,"SELECT * FROM usuarios WHERE email ='$email'");
        $emailconsultexist=mysqli_num_rows($emailconsult);
    if ($emailconsultexist != 0) {
     $result = array("status" => "no","error" => "Ya existe un usuario con este correo ");
    }else{


if ($password != $cpassword) {
  $result = array("status" => "no","error" => "Las contraseñas no coinciden ");
}else{


$signupsave = mysqli_query($con,"INSERT INTO usuarios (usuario, contrasena, email, ip, fechaderegistro, rango) VALUES ('$username', '$passenc','$email', '$ip','$fecha',1)");
      if($signupsave) {
            $result = array( "status" => "si", "msg" => "Gracias por registrarte, seras redirigido en un momento " );            
            $_SESSION["username"] = $username;
    }else{
      $result = array( "status" => "no", "error" => "Lo sentimos, no pudimos registrarte ");
  }
}
}
}
}
    }else{
        $result = array("status" => "no", "error" => "Necesitas llenar todos los campos ");
    }
    echo json_encode($result);
    }else{
        echo "Ola k ase";
    }
?>

------------------------------------ Terminamos con signup.php y todos los PHP 😛 ------------------------------------

Ahora vamos al .JS

Creamos 2 nuevas carpetas "assets/js"

3Wlr5kC.png

Dentro de la carpeta "js" creamos 2 nuevos archivos llamados "login.js" y "signup.js"


Dentro de "login.js" ponemos el siguiente codigo

HTML: 
$(document).ready(function () {     
          $('#LoginSimpleIrwin2382').submit(function (event) {
        event.preventDefault();
        var username = $("#username").val();
        var password = $("#password").val();
        var data = "username="+username+"&password="+password;
  $.ajax({
        type: "POST",
              url: "ajax/login.php",
              data: data,
              timeout:5000,
              dataType: 'json',
               beforeSend: function () {
                $("#alert_error").slideUp("slow");
            },
              success: function(response) {
                var status = response.status
                if (status == "si" ) {
              setTimeout(function () {
              $("#alert_success").text(response.msg);
              $("#alert_success").slideDown("slow");
              setTimeout(function () {
              $(location).attr('href',"index.php"); 
              }, 2000);
          }, 600);              
            }else{
                $("#alert_error").slideDown("slow");
                $("#alert_error").text(response.error);
                setTimeout(function () { $("#alert_error").slideUp("slow"); }, 2000);
                        }

            },error: function () {
              $("#alert_error").slideDown("slow");
              setTimeout(function () { $("#alert_error").slideUp("slow"); }, 2000);
              $("#alert_error").text("No se pudo procesar su solicitud");
            }

      });

    });


    });

------------------------------------ Terminamos con login.js ------------------------------------​



Ahora bien abrimos "signup.js" y dentro ponemos
HTML: 
$(document).ready(function () {     
          $('#SignupSimpleIrwin2382').submit(function (event) {
        event.preventDefault();
        var username = $("#username").val();
        var email = $("#email").val();
        var password = $("#password").val();
        var cpassword = $("#cpassword").val();
        var data = "username="+username+"&email="+email+"&password="+password+"&cpassword="+cpassword;
  $.ajax({
        type: "POST",
              url: "ajax/signup.php",
              data: data,
              timeout:5000,
              dataType: 'json',
               beforeSend: function () {
                $("#alert_error").slideUp("slow");
            },
              success: function(response) {
                var status = response.status
                if (status == "si" ) {
              setTimeout(function () {
              $("#alert_success").text(response.msg);
              $("#alert_success").slideDown("slow");
              setTimeout(function () {
              $(location).attr('href',"index.php"); 
              }, 2000);
          }, 600);              
            }else{
                $("#alert_error").slideDown("slow");
                $("#alert_error").text(response.error);
                setTimeout(function () { $("#alert_error").slideUp("slow"); }, 2000);
                        }

            },error: function () {
              $("#alert_error").slideDown("slow");
              setTimeout(function () { $("#alert_error").slideUp("slow"); }, 2000);
              $("#alert_error").text("No se pudo procesar su solicitud");
            }

      });

    });


      });

Paso 5.

Anterior mente creamos la carpeta "assets" vamos a ella y dentro creamos una nueva carpeta llamada "css" quedaria algo asi: "/assets/css"

Dentro de la carpeta "css" creamos un nuevo archivo llamado "Irwin2382.css" y dentro agregamos lo siguiente

HTML: 
.text-error{
	  color: #b94a48;
}
.text-correcto{
	  color: #468847;
}
.invisible{
	display: none;
}

Y listo, tendriamos el login y registro terminado 😛... Tambien pueden descargar el script completo aqui: [LINK]
 
Última edición:
Excelente aporte, thanks for sharing 🙂
 
Algun demo?
 
Interesante , gracias 😉
 
Ea, me ire delujo comenzar con esto, muchisimas gracias, te has ganado mi LIKE :encouragement:
 
Este tutorial irá directamente a los favoritos.
Se agradece este ESPLENDIDO aporte. 😀
 
RaikND dijo:
Ea, me ire delujo comenzar con esto, muchisimas gracias, te has ganado mi LIKE :encouragement:
Hacer clic para expandir...
😀 me alegro te sirva, gracias por el like :3

---------- Post agregado el 10-jun-2014 hora: 03:33 ----------
spamer01 dijo:
Este tutorial irá directamente a los favoritos.
Se agradece este ESPLENDIDO aporte. 😀
Hacer clic para expandir...

😀 Gracias 😛 nada mas que tenga un poco de tiempo agrando el script, para "Perfiles" "Mensajes" Etc :drunk:
 
Gracias por el aporte 🙂
 
Gracias amigo 😀
 
Excelente aporte, te quería consultar, tienes visto algún diseño para este script?
 
Excelente tutorial amigo,
Aunque sigo prefiriendo mySQL por su facil forma de adaptacion y uso en diferentes tipos de plataformas como whm y plesk en cambio el mysqli solo lo soporta whm :witless:
 
Kotel dijo:
Excelente tutorial amigo,
Aunque sigo prefiriendo mySQL por su facil forma de adaptacion y uso en diferentes tipos de plataformas como whm y plesk en cambio el mysqli solo lo soporta whm :witless:
Hacer clic para expandir...

Mysql esta obsoleto, las alternativas son Mysqli o PDO 😉

- - - Actualizado - - -

mashe dijo:
Excelente aporte, te quería consultar, tienes visto algún diseño para este script?
Hacer clic para expandir...

Lo siento amigo, apenas leo tu comentario jeje...

este login no hice completamente sencillo sin diseño para que fuera fácil de adaptar :encouragement: así que no, no cuento con ningún diseño para este login
 
Myswl no esta obsoleto, mysqli es una librería para trabajar con mysql que ayuda a evitar las inyecciones SQL y xss

Desde php recomiendan mysql lo porque consume menos, desde mysql la mysql. En cuanto a rendimiento ambas son similares, en cambio pro es mucho mas lenta. Tu decides... A tener en cuenta, mysqli solo funciona desde php 5 o superior
 
Última edición:
Buenas tardes,

He intentado acceder al "Ejemplo del script hecho en POO y con CSS (Bootstrap x'D) [LINK]" a través del link que has puesto en este magnífico tutorial, pero el enlace está roto.
¿Serías tan amable de proporcionar otro link?

Muchas gracias
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba