En este tutorial desarrollaremos y explicaremos un sistema de registro de usuarios, este tutorial es una continuación de este otro donde vimos como crear un sistema de login de usuarios.
1. Crear la tabla en MySQL
Vamos a comenzar preparando una tabla en nuestra base de datos, la cual almacenara la información de los usuarios, para crear la tabla simplemente copia y ejecuta la siguiente consulta SQL:
CREATE TABLE `usuarios` (
`idusuario` INT(11) NOT NULL AUTO_INCREMENT,
`usuario` VARCHAR(20) NOT NULL,
`password` VARCHAR(10) NOT NULL,
PRIMARY KEY (`idusuario`)
)
2. Conectando a MySQL en PHP
Ya una vez que tengamos la estructura de nuestra tabla, creamos un archivo llamado conexion.php.
<?php
// datos para la coneccion a mysql define('DB_SERVER','localhost');
define('DB_NAME','TU_BASE_DE_DATOS');
define('DB_USER','TU_USUARIO');
define('DB_PASS','TU_CLAVE');
La funcion define como su nombre lo dice, se usa para definir una constante nominada, que nos permite almacenar valores escalares(string, integer, float, boolean y nulos).
$con = mysql_connect(DB_SERVER,DB_USER,DB_PASS);
mysql_select_db(DB_NAME,$con);
?>
La función de mysql_connect nos servira para abrir una conexión al servidor de MySQL usando los 3 parámetros que declaramos anteriormente. Luego mysql_select_db selecciona la base de datos usando 2 parámetros, el nombre de la base de datos y la conexión a usar.
Código completo
<?php // datos para la conexion a mysql define('DB_SERVER','localhost');
define('DB_NAME','TU_BASE_DE_DATOS');
define('DB_USER','TU_USUARIO');
define('DB_PASS','TU_CLAVE');
$con = mysql_connect(DB_SERVER,DB_USER,DB_PASS); mysql_select_db(DB_NAME,$con);
?>
4. index.php
Ahora pasamos el archivo index.php, el cual contendrá el formulario de registro y al mismo tiempo el mensaje de «fue registrado correctamente» o «faltan llenar campos».
<?php session_start(); include_once "conexion.php";
session_start() crea una sesión para ser usada mediante una petición GET o POST, o pasado por una cookie y la sentencia include_once es la usaremos para incluir el archivo de conexión a la base de datos que creamos anteriormente.
<form class="registro" action="" method="post">
<div><label>Usuario:</label> <input type="text" name="usuario"></div>
<div><label>Clave:</label> <input type="password" name="password"></div>
<div><label>Repetir Clave:</label> <input type="password" name="repassword"></div>
<div><input type="submit" name="enviar" value="Registrar"></div>
</form>
Creamos el formulario con el campo de Usuario que se llamara $_POST[‘usuario’] y 2 campos para la clave y uno mas para confirmar si escribió bien la clave, se llamaran $_POST[‘password’] y $_POST[‘repassword’] respectivamente, procedemos a escribir el codigo que procesara y validara lo que el usuario ingrese:
if(isset($_POST['enviar'])) {
if($_POST['usuario'] == '' or $_POST['password'] == '' or $_POST['repassword'] == '') {
echo 'Por favor llene todos los campos.';
} else {
$sql = 'SELECT * FROM usuarios';
$rec = mysql_query($sql);
$verificar_usuario = 0;
while($result = mysql_fetch_object($rec)) {
if($result->usuario == $_POST['usuario']) {
$verificar_usuario = 1;
}
}
if($verificar_usuario) {
if($_POST['password'] == $_POST['repassword']) {
$usuario = $_POST['usuario'];
$password = $_POST['password'];
$sql = "INSERT INTO usuarios (usuario,password) VALUES ('$usuario','$password')";
mysql_query($sql);
echo 'Usted se ha registrado correctamente.';
} else {
echo 'Las claves no son iguales, intente nuevamente.';
}
} else {
echo 'Este usuario ya ha sido registrado anteriormente.';
}
}
}
- Linea 1: La primera condición es para saber cuando el formulario haya sido enviado.
- Linea 3: Si los campos están vacíos muestra el siguiente mensaje, caso contrario sigue el siguiente bloque de código.
- Linea 11, 15 y 21: Creamos la variable $verificar_usuario que empieza con un valor de 0, pero si la condición de la linea 15 resulta verdadera, entonces la variable toma el valor de 1 que quiere decir que ese nombre de usuario ya existe por lo tanto no se puede registrar.
- Linea 23: Si los campos son iguales, continua el registro o caso contrario saldrá un mensaje de error.
- Linea 27: Se insertan los datos a la base de datos, el usuario es registrado con exito y sale el mensaje correspondiente.
Decoración opcional con CSS
Esta parte es algo de CSS opcional ya que no influye en nada en el funcionamiento del sistema, es unicamente decorativa:
* {
font-size: 14px;
font-family: sans-serif;
}
form.registro {
background: none repeat scroll 0 0 #F1F1F1;
border: 1px solid #DDDDDD;
margin: 0 auto;
padding: 20px;
width: 278px;
}
form.registro div {
margin-bottom: 15px;
overflow: hidden;
}
form.registro div label {
display: block;
float: left;
line-height: 25px;
}
form.registro div input[type="text"],
form.registro div input[type="password"] {
border: 1px solid #DCDCDC;
float: right;
padding: 4px;
}
form.registro div input[type="submit"] {
background: none repeat scroll 0 0 #DEDEDE;
border: 1px solid #C6C6C6;
float: right;
font-weight: bold;
padding: 4px 20px;
}
.error {
color: red;
font-weight: bold;
margin: 10px;
text-align: center;
}