Portada » Lenguaje PHP » Registro de usuarios usando asistente PHP MySQLi

Registro de usuarios usando asistente PHP MySQLi

Registro de usuarios usando asistente PHP MySQLi. Empezaremos este artículo, dando una opinión acerca de los formularios de registro que existen hoy en día, que la mayoría de páginas web utilizan para captar a los usuarios. Por lo tanto, este método hoy en día es el más utilizado por la mayoría de empresas tecnológicas en el mundo del internet.

Si observamos la historia del desarrollo de las páginas web veremos que en los inicios solamente estaban optimizados para la interfaz escritorio. En la actualidad, ya noes es así funciona bajo cualquier resolución dando al usuario una experiencia más cómoda.

Registro de usuarios usando asistente PHP MySQLi

Por lo tanto, los formularios de registros también migraron a una interfaz más simple para no cansar al usuario en estar llenando tremendos formularios para un determinado registro. La idea es hacer la vida más fácil al usuario final y no aburrir al usuario. Tenemos que evitar el estrés visual del usuario.

Ahora para evitar todo este proceso saturado decidimos una navegación con fichas. Y estas fichas tendrán los siguientes encabezados que detallaremos a continuación.

  • Cuenta. Recogerá la información: el nombre de usuario y el  correo electrónico.
  • Credenciales. Esta ficha validara la contraseña y que sean idénticas.
  • General. Estará encargada de recoger nombres del usuario y su género mediante una lista desplegable.

¿Cómo funciona este sistema de registro con asistente?

El usuario al acceder al formulario se le mostrara campos simples para ir llenando y cuando culmina puede presionar el botón siguiente en donde se mostrar nuevos campos de formulario. Esta metodología de registro es recomendable para no desanimar al usuario final.

ESTRUCTURA DE NUESTRO SISTEMA DE REGISTRO

A continuación, detallaremos los componentes de este sistema de registro con asistente.

1. Base de datos: php_asistenteregistro.sql

Este fichero almacena el contenido de la base de datos y sus respectivos registros.

CREATE TABLE IF NOT EXISTS `usuarios` (
`id` int(11) NOT NULL,
  `usuario` varchar(100) DEFAULT NULL,
  `email` varchar(150) DEFAULT NULL,
  `nombres` varchar(250) DEFAULT NULL,
  `password` varchar(80) DEFAULT NULL,
  `genero` varchar(80) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

--
-- Índices para tablas volcadas
--

--
-- Indices de la tabla `usuarios`
--
ALTER TABLE `usuarios`
 ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT de las tablas volcadas
--

--
-- AUTO_INCREMENT de la tabla `usuarios`
--
ALTER TABLE `usuarios`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT;

2. Conexión con la base de datos: dbcontroller.php

Un fichero muy esencial el cual nos permitirá la comunicación con la base de datos a través de una clase llamada «DBController»

<?php
class DBController {
	private $host = "localhost";
	private $user = "root";
	private $password = "root";
	private $database = "php_asistenteregistro";
	private $conn;
	
	function __construct() {
		$this->conn = $this->connectDB();
	}
	
	function connectDB() {
		$conn = mysqli_connect($this->host,$this->user,$this->password,$this->database);
		return $conn;
	}
	
	function runQuery($query) {
		$result = mysqli_query($this->conn,$query);
		while($row=mysqli_fetch_array($result)) {
			$resultset[] = $row;
		}
		if(!empty($resultset))
			return $resultset;
	}
}
?>

3. Validación jQuery

Utilizaremos un código jQuery para validar cada ficha en nuestro registro por asistente. La función se llamara «validate»

<script>
function validate() {
var output = true;
$(".registro-error").html('');
if($("#account-field").css('display') != 'none') {
	if(!($("#usuario").val())) {
		output = false;
		$("#usuario-error").html("Campo Requerido");
	}
	if(!($("#email").val())) {
		output = false;
		$("#email-error").html("Campo Requerido");
	}	
	if(!$("#email").val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)) {
		$("#email-error").html("Correo invalido");
		output = false;
	}
}

if($("#password-field").css('display') != 'none') {
	if(!($("#user-password").val())) {
		output = false;
		$("#password-error").html("Campo Requerido");
	}	
	if(!($("#confirm-password").val())) {
		output = false;
		$("#confirm-password-error").html("No coinciden");
	}	
	if($("#user-password").val() != $("#confirm-password").val()) {
		output = false;
		$("#confirm-password-error").html("No coinciden");
	}	
}
return output;
}
$(document).ready(function() {
	$("#next").click(function(){
		var output = validate();
		if(output) {
			var current = $(".highlight");
			var next = $(".highlight").next("li");
			if(next.length>0) {
				$("#"+current.attr("id")+"-field").hide();
				$("#"+next.attr("id")+"-field").show();
				$("#atras").show();
				$("#finish").hide();
				$(".highlight").removeClass("highlight");
				next.addClass("highlight");
				if($(".highlight").attr("id") == $("li").last().attr("id")) {
					$("#next").hide();
					$("#finish").show();				
				}
			}
		}
	});
	$("#atras").click(function(){ 
		var current = $(".highlight");
		var prev = $(".highlight").prev("li");
		if(prev.length>0) {
			$("#"+current.attr("id")+"-field").hide();
			$("#"+prev.attr("id")+"-field").show();
			$("#next").show();
			$("#finish").hide();
			$(".highlight").removeClass("highlight");
			prev.addClass("highlight");
			if($(".highlight").attr("id") == $("li").first().attr("id")) {
				$("#atras").hide();			
			}
		}
	});
});
</script>

4. Registro en la base de datos

Para almacenar la información validada por el asistente tenemos que guardarlo en la base de datos. A continuación el script que hace posible tal acción.

<?php
if(count($_POST)>0) {
	// Llamamos al fichero dbcontroller que sera el encargado de realizar la conexión con el servidor
	// Este controlador usa PDO para conectar. Uno de las conexiones mas seguras
	require_once("dbcontroller.php");
	// Instanciamos la clase DBController
	$db_handle = new DBController();
	// Aquí realizaremos una consulta para insertar registros a la base de datos
	$ConsultaInsercion = "INSERT INTO usuarios (usuario, email, nombres, password, genero) VALUES
	('" . $_POST["usuario"] . "', '" . $_POST["email"] . "', '" . $_POST["nombres"] . "', '" . $_POST["password"] . "', '" . $_POST["genero"] . "')";
	$Resultados = $db_handle->insertQuery($ConsultaInsercion);
	// Comprobamos si la insercion fue exitosa o tuvo algun problema
	if(!empty($Resultados)) {
	$mensajeresultado = "<div class='alert alert-primary' role='alert'>Usuario registrado correctamente!</div>";	
		unset($_POST);
	} else {
	$mensajeresultado = "<div class='alert alert-danger' role='alert'>Hubo un problema al registrar. Intente nuevamente!</div>";	
		
	}
}
?>

5. Librerías externas

La interfaz es muy necesaria a la hora de presentar un trabajo. Por lo tanto, usaremos librerías externas como el BooStrap y jQuery.

<!-- Bootstrap core CSS -->
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="assets/sticky-footer-navbar.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style>
#registro-pasos {
	margin:0;
	padding:0;
}
#registro-pasos li {
	list-style:none;
	float:left;
	padding:5px 10px;
	border-top:#EEE 1px solid;
	border-left:#EEE 1px solid;
	border-right:#EEE 1px solid;
}
#registro-pasos li.highlight {
	color: #fff;
	background-color: #17a2b8;
	border-color: #17a2b8;
	font-weight:bold;
}
#registro-form {
	clear:both;
	border:1px #EEE solid;
	padding:20px;
}
.claseinput {
	padding: 10px;
	border: #F0F0F0 1px solid;
	border-radius: 4px;
	background-color: #FFF;
	width: 50%;
}
.registro-error {
	color:#FF0000;
	padding-left:15px;
}
.mensajeresultado {
	font-weight: bold;
	width: 100%;
	padding: 10;
}
.btnOpcion {
	padding: 5px 10px;
	background-color: #09F;
	border: 0;
	color: #FFF;
	cursor: pointer;
	margin-top:15px;
}
</style>

6. El formulario del asistente

Este código HTML que alberga al formulario se utiliza para mostrar el asistente de registro. Contiene tres pasos o pestañas de registro. Los campos de registro se muestran basándose en el paso seleccionado y que tienen que pasar por una validación.

<div class="mensajeresultado">
  <?php if(isset($mensajeresultado)) echo $mensajeresultado; ?>
</div>
<ul id="registro-pasos">
  <li id="account" class="highlight">Cuenta</li>
  <li id="password">Credenciales</li>
  <li id="general">General</li>
</ul>
<form name="frmRegistration" id="registro-form" method="post">
  <div id="account-field">
    <label>Usuario</label>
    <span id="usuario-error" class="registro-error"></span>
    <div>
      <input type="text" name="usuario" id="usuario" class="claseinput" />
    </div>
    <label>Email</label>
    <span id="email-error" class="registro-error"></span>
    <div>
      <input type="text" name="email" id="email" class="claseinput" />
    </div>
  </div>
  <div id="password-field" style="display:none;">
    <label>Ingrese Contraseña</label>
    <span id="password-error" class="registro-error"></span>
    <div>
      <input type="password" name="password" id="user-password" class="claseinput" />
    </div>
    <label>Re-ingrese Contraseña</label>
    <span id="confirm-password-error" class="registro-error"></span>
    <div>
      <input type="password" name="confirm-password" id="confirm-password" class="claseinput" />
    </div>
  </div>
  <div id="general-field" style="display:none;">
    <label>Nombre para mostrar</label>
    <div>
      <input type="text" name="nombres" id="nombres" class="claseinput"/>
    </div>
    <label>Genero</label>
    <div>
      <select name="genero" id="genero" class="claseinput" required>
        <option value=""><< Seleccione >></option>
        <option value="mujer">Mujer</option>
        <option value="hombre">Hombre</option>
      </select>
    </div>
  </div>
  <div style="margin-top:15px;">
    <input class="btn btn-primary" type="button" name="atras" id="atras" value="Atras" style="display:none;">
    <input class="btn btn-primary" type="button" name="next" id="next" value="Siguiente" >
    <input class="btn btn-primary" type="submit" name="finish" id="finish" value="Finalizar" style="display:none;">
  </div>
</form>
Registro de usuarios usando asistente PHP MySQLi
Registro de usuarios usando asistente PHP MySQLi

CONCLUSIÓN

Basándonos en lo último en tecnología web, podemos deducir que el uso de un asistente es muy recomendable. Su implementación es muy simple y podemos incorporarlo en nuestros proyectos sin complicaciones.

Si observamos nuestro entorno, casi la gran mayoría de plataformas mundiales en el rubro de internet usan este método. Incluso, los gigantes como Google, Outlook, WordPress, entre otras tecnologías usan dos pasos para poder iniciar sesión. Este método puede ser implementado para seguridad anti hackers u otras utilidades.

Además, este código controla la navegación «anterior siguiente» para el Asistente de registro. Por lo tanto, valida el asistente actual antes de navegar hacia adelante y hacia atrás.

DESCARGA

Les dejare el código completo para que puedan descargarlo e instalarlo en sus sistemas web.

[sociallocker id=»5099″]

Descargar Ahora [/sociallocker]

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 0 / 5. Recuento de votos: 0

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad