Guia Para Crear Un Sistema De Inicio De Sesión Y Registro Usando PHP Y MySQL
Tiempo estimado de lectura 5 minutos

Un sistema seguro de inicio de sesión y registro es uno de los requerimientos principales al crear un sistema. Es por esto, que en esta oportunidad daremos una breve guía de como crear un sistema de inicio de sesión y registro, usando MySQL y PHP. No haremos uso de algún Framework (6 FrameWorks PHP para el desarrollo ágil), solamente usaremos PHP desde cero para lograrlo 😉 No es tan difícil de hacerlo, solo tienes que tener conocimientos básicos de programación, HTML, y algo de CSS (por si deseas modificar la apariencia). Esperamos que nuestro anterior articulo, sobre 10 consejos para ser un mejor programador en PHP, sea de gran utilidad.

Lo Que Se Necesita

  • Xampp (PHP versión 5.3 ó posterior y la versión de MySQL 4.1.3 ó posterior)
  • Conocimientos básicos sobre PHP, HTML y CSS
  • Algo de tiempo y paciencia 😉

Resultado Final

En las siguientes imágenes podrás ver el resultado final del sistema de inicio de sesión y registro al usar PHP y MySQL.

logueo

registro con php y mysql

mensaje bienvenida al iniciar sesion php

Te gusta como se ve el formulario? Puedes descargar el código de formulario de u sistema de inicio de sesión y registro.

Configuración Del Servidor

Puedes usar cualquier servicio de alojamiento web que tenga PHP y MySQL ya instalados (sólo asegúrese de tener la versión PHP 5.3 ó superior y MySQL 4.1.3 ó superior). Para esta guia, se usó Xampp como servidor. Te gustaría tener tu propio servidor online, te invitamos a conocer nuestros planes en servidores compartidos, servidores VPS y servidores Dedicados 😉

Paso 1 – MySQL

En primer lugar, es necesario que cree la base de datos y la tabla que almacenara todos los registros. Puedes hacer esto de forma manual utilizando la interfaz gráfica de usuario de PhpMyAdmin ó usar SQL para insertar esta información. Si deseas usar SQL, las siguientes lineas te crearan tanto la base de datos como la tabla:


/* Create Database */
CREATE DATABASE userlitdb;

/* Create Table */
 CREATE TABLE `usertbl` (
 `id` int(11) NOT NULL auto_increment,
 `full_name` varchar(32) collate utf8_unicode_ci NOT NULL default '',
 `email` varchar(32) collate utf8_unicode_ci NOT NULL default '',
 `username` varchar(20) collate utf8_unicode_ci NOT NULL default '',
 `password` varchar(32) collate utf8_unicode_ci NOT NULL default '',
 PRIMARY KEY (`id`),
 UNIQUE KEY `username` (`username`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Observe que todos ellos son de tipo varchar, incluso la contraseña que se convertirá más tarde en md5 para asegurar la contraseña del usuario. Además, use un AUTO_INCREMENT para asignar automáticamente un ID ó un número de usuarios que se registrarían más tarde.

Ahora que la tabla se ha creado, lo que tienes que hacer es implementar la estructura con HTML y diseño con CSS, luego vendrá el PHP.

Paso 2 – El HTML

Ya que el proceso lo haremos del lado del servidor (por usar solo PHP), usaremos tres archivos PHP en cual se cuenta con las funciones y la estructura con el HTML.  En primer lugar, se crea el archivo login.php. Sientete libre de copiar el siguiente código:


<?php
session_start();
?>

<?php require_once("includes/connection.php"); ?>
<?php include("includes/header.php"); ?>

<?php

if(isset($_SESSION["session_username"])){
// echo "Session is set"; // for testing purposes
header("Location: intropage.php");
}

if(isset($_POST["login"])){

if(!empty($_POST['username']) && !empty($_POST['password'])) {
 $username=$_POST['username'];
 $password=$_POST['password'];

$query =mysql_query("SELECT * FROM usertbl WHERE username='".$username."' AND password='".$password."'");

$numrows=mysql_num_rows($query);
 if($numrows!=0)

{
 while($row=mysql_fetch_assoc($query))
 {
 $dbusername=$row['username'];
 $dbpassword=$row['password'];
 }

if($username == $dbusername && $password == $dbpassword)

{

 $_SESSION['session_username']=$username;

/* Redirect browser */
 header("Location: intropage.php");
 }
 } else {

$message = "Nombre de usuario ó contraseña invalida!";
 }

} else {
 $message = "Todos los campos son requeridos!";
}
}
?>

 <div class="container mlogin">
 <div id="login">
 <h1>Logueo</h1>
<form name="loginform" id="loginform" action="" method="POST">
 <p>
 <label for="user_login">Nombre De Usuario<br />
 <input type="text" name="username" id="username" class="input" value="" size="20" /></label>
 </p>
 <p>
 <label for="user_pass">Contraseña<br />
 <input type="password" name="password" id="password" class="input" value="" size="20" /></label>
 </p>
 <p class="submit">
 <input type="submit" name="login" class="button" value="Entrar" />
 </p>
 <p class="regtext">No estas registrado? <a href="register.php" >Registrate Aquí</a>!</p>
</form>

</div>

</div>

 <?php include("includes/footer.php"); ?>

 <?php if (!empty($message)) {echo "<p class=\"error\">" . "MESSAGE: ". $message . "</p>";} ?>

A continuación, creamos el archivo register.php. Copie y pegue el siguiente código:


<?php require_once("includes/connection.php"); ?>
<?php include("includes/header.php"); ?>

 <?php

if(isset($_POST["register"])){

if(!empty($_POST['full_name']) && !empty($_POST['email']) && !empty($_POST['username']) && !empty($_POST['password'])) {
 $full_name=$_POST['full_name'];
 $email=$_POST['email'];
 $username=$_POST['username'];
 $password=$_POST['password'];

 $query=mysql_query("SELECT * FROM usertbl WHERE username='".$username."'");
 $numrows=mysql_num_rows($query);

 if($numrows==0)
 {
 $sql="INSERT INTO usertbl
 (full_name, email, username,password)
 VALUES('$full_name','$email', '$username', '$password')";

$result=mysql_query($sql);

 if($result){
 $message = "Cuenta Correctamente Creada";
 } else {
 $message = "Error al ingresar datos de la informacion!";
 }

} else {
 $message = "El nombre de usuario ya existe! Por favor, intenta con otro!";
 }

} else {
 $message = "Todos los campos no deben de estar vacios!";
}
}
?>

<?php if (!empty($message)) {echo "<p class=\"error\">" . "Mensaje: ". $message . "</p>";} ?>

<div class="container mregister">
 <div id="login">
 <h1>Registrar</h1>
<form name="registerform" id="registerform" action="register.php" method="post">
 <p>
 <label for="user_login">Nombre Completo<br />
 <input type="text" name="full_name" id="full_name" class="input" size="32" value="" /></label>
 </p>

 <p>
 <label for="user_pass">E-mail<br />
 <input type="email" name="email" id="email" class="input" value="" size="32" /></label>
 </p>

 <p>
 <label for="user_pass">Nombre De Usuario<br />
 <input type="text" name="username" id="username" class="input" value="" size="20" /></label>
 </p>

 <p>
 <label for="user_pass">Contraseña<br />
 <input type="password" name="password" id="password" class="input" value="" size="32" /></label>
 </p>

<p class="submit">
 <input type="submit" name="register" id="register" class="button" value="Registrar" />
 </p>

 <p class="regtext">Ya tienes una cuenta? <a href="login.php" >Entra Aquí!</a>!</p>
</form>

 </div>
 </div>

 <?php include("includes/footer.php"); ?>

A continuación, se crea la pagina de bienvenida en el archivo intropage.php. Esto servirá como la página principal una vez que un usuario inicia sesión exitosamente.


<?php
session_start();
if(!isset($_SESSION["session_username"])) {
 header("location:login.php");
} else {
?>

<?php include("includes/header.php"); ?>
<div id="welcome">
 <h2>Bienvenido, <span><?php echo $_SESSION['session_username'];?>! </span></h2>
 <p><a href="logout.php">Finalice</a> sesión aquí!</p>
</div>

<?php include("includes/footer.php"); ?>

<?php
}
?>

Si la estructura se maneja con HTML, ¿por que usar PHP con HTML? Simple, PHP es tan flexible  que nos permite usar HTML incrustado, si prefieres y quieres probar a tu modo, puedes separar la estructura del HTML del código PHP 😉 Pero bueno, que seria del HTML sin el CSS en estos días?

Paso 3 – El CSS

Para darle un aspecto bien interesante al ejercicio, le daremos un pequeño retoque con CSS, es por esto que se ve bastante llamativo el formulario 😉

*= GENERAL STYLES
--------------------------------------------------------*/
body {
	background: #efefef;
	font-family: 'Open Sans', sans-serif;
	color: #777;
}

a {
	color: #f58220;
	font-weight: 400;
}

span {
	font-weight: 300;
	color: #f58220;
}

.mlogin {
	margin: 170px auto 0;
}

.mregister {
	margin: 80px auto 0;
}

.error {
	margin: 40px auto 0;
	border: 1px solid #777;
	padding: 3px;
	color: #fff;
	text-align: center;
	width: 650px;
	background: #f58220;
}

.regtext {
	font-size: 13px;
	margin-top: 26px;
	color: #777;
}

/*= CONTAINERS
--------------------------------------------------------*/
.container {
	padding: 25px 16px 25px 10px;
	font-weight: 400;
	overflow: hidden;
	width: 350px;
	height: auto;
	background: #fff;
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.13);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,.13);
	box-shadow: 0 1px 3px rgba(0,0,0,.13);
}

#welcome {
	width: 500px;
	padding: 30px;
	background: #fff;
	margin: 160px auto 0;
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.13);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,.13);
	box-shadow: 0 1px 3px rgba(0,0,0,.13);
}

.container h1 {
	color: #777;
	text-align: center;
	font-weight: 300;
	border: 1px dashed #777;
	margin-top: 13px;
}

.container label {
	color: #777;
	font-size: 14px;
}

#login {
	width: 320px;
	margin: auto;
	padding-bottom: 15px;
}

.container form .input,.container input[type=text],.container input[type=password],.container input[type=e] {
	background: #fbfbfb;
	font-size: 24px;
	line-height: 1;
	width: 100%;
	padding: 3px;
	margin: 0 6px 5px 0;
	outline: none;
	border: 1px solid #d9d9d9;
}

.container form .input:focus {
	border: 1px solid #f58220;
	-webkit-box-shadow: 0 0 3px 0 rgba(245,130,32,0.75);
	-moz-box-shadow: 0 0 3px 0 rgba(245,130,32,0.75);
	box-shadow: 0 0 3px 0 rgba(245,130,32,0.75);
}

/*= BUTTONS
--------------------------------------------------------*/

.button{
border: solid 1px #da7c0c;
            	background: #f78d1d;
            	background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));
            	background: -moz-linear-gradient(top,  #faa51a,  #f47a20);
            	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#faa51a', endColorstr='#f47a20');
            	color: #fff;
padding: 7px 12px;
-webkit-border-radius:4px;
   -moz-border-radius:4px;
    	border-radius:4px;
float: right;
cursor: pointer;
}

.button:hover{
background: #f47c20;
            	background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));
            	background: -moz-linear-gradient(top,  #f88e11,  #f06015);
            	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#f88e11', endColorstr='#f06015');
}

/*= FOOTER
--------------------------------------------------------*/
footer {
	color: #777;
	font-size: 12px;
	text-align: center;
	margin-top: 20px;
}

Puntos A Tener En Cuenta

  • Se uso la re utilización de código haciendo uso del include, esto lo encontramos bastante en el header y el footer.
  • Variables constantes para la conexión a la base de datos, esto lo encontramos en el archivo connection.php.
  • La sesión de maneja con session_destroy, cuando el usuario desea finalizar la sesión, haremos uso de esta función.
  • Si eres curioso, y miras el código fuente dentro del navegador, no se vera el código PHP 😉

Finalmente

Hoy has aprendido a crear un sencillo sistema de inicio de sesión utilizando PHP y MySQL. Aunque hay muchas cosas a considerar cuando se trata de seguridad, esto es un buen comienzo para aquellos principiantes. Eres libre de modificar los anteriores códigos para tu proyecto. Si tiene alguna idea para mejorar los códigos, por favor, deja un buen comentario con el código y explicando el por que 😉 

Este post tiene 57 comentarios

  1. Samu

    Creo que nadie puede conectar, porque el connection.php y el constants.php estan en mysql, y lo que utilizamos nosotros es mysqli

    por lo tanto pienso que esta desactualizado para utilizarlo, he probado de mil maneras meterle mysqli y no lo consigo, falta de experiencia, si alguien lo ha conseguido solucionar que lo comparta plz

    deja registrarse correctamente y aparece en la bd, pero a la hora de hacer login, no hay forma, se auto-recarga la web y vuelve a pedirte ingresar la cuenta… asi constantemente, ya he probado 1000 codigos, sinceramente nose que hacer.

    1. Dinh

      Para pasarlo a msqli, solo agrega la “i”, en el caso de los querys desde usar la variable conexion dentro de la sentencia de select o insert algo asi:

      $query =mysqli_query($con,”SELECT * FROM usertbl WHERE username='”.$username.”‘ AND password='”.$password.”‘”);

      $numrows=mysqli_num_rows($query);
      if($numrows!=0)

      {
      while($row=mysqli_fetch_assoc($query))
      {

      y listo ya te funcionara el login

  2. Jose Bolaño

    Alguien me puee indicar por favor como hago para usar el mismo formulario pero dentro de mi pagina de html, es decir sin necesidad de redireccionar al cliente a otra ventana sino que haga el registro desde mi misma pagina.

  3. Andres T

    Hola buen tutorial, tengo una duda como puedo cerrar la sesion cuando uno cierre la ventana del navegador y cuando traspasen un tiempo determinado de inactividad como forma de seguridad

  4. Andres

    Hola amigo, muy buen tutorial. Tengo una consulta como puedo hacer para una vez entre en sesion con mi nombre de usuario y que cada 30 minutos de inactividad del usuario se cierre la sesion (algo asi como medida de seguridad) y lo otro que cuando uno cierre la pestaña del navegador se destruya la sesion???

  5. Angelica Luna

    Hola,para los que se preguntan por qué? luego de iniciar sesión no redirige a intropage.php, eso es por la ubicación de porque header(“Location:intropage.php”); debe ser llamado antes de mostrar nada por pantalla, etiquetas HTML, líneas en blanco desde un fichero o desde PHP. Entonces el debe ir despues del php q contiene el header(“Location:intropage.php”);
    y pues el archivo header.php tiene eso por eso ese archivo genera el error y no el

    y quedaria asi:

    Logueo

    Nombre De Usuario

    Contraseña

    No estas registrado? Registrate Aquí!

    <?php if (!empty($message)) {echo "” . “MESSAGE: “. $message . “”;} ?>

  6. roner

    Hola.. me crea el usuario, entra por login pero no redireciona a /intropage.php debo hacerlo de manera manual y si resulta que el usuario esta conectado… el codigo es el mismo del ejemplo una simple variación en /intropage.php solo agregue otro enlace e imagen

  7. luis

    por favor quisiera saber cual es el motivo quisiera saber si es un problema con el servidor interno
    lo de que los datos estan registrados pero no puedo acedera la base agradesco una respuesta inmediata

  8. luis

    cree el login mi problema es que al ingresar los datos me ingresa pero después que se destruye la sesión trato de entrar nuevamente y no hace nada como si no estuviese registrado a que se debe eso agradezco esa informacion

  9. JAIME MOSQUERA

    AMIGO ME GENERA ESTE ERROR “Warning: Cannot modify header information – headers already sent by (output started at C:\xampp\htdocs\phpform\login.php:5) in C:\xampp\htdocs\phpform\login.php on line 12” SERIA DE GRAN AYUDA SI ME PUEDE EXPLICAR EL PORQUE? Y COMO SOLUCIONARLO…

  10. ivan

    Hola, tengo un problema copie todo el login como lo pones, casi todo me funciona a la perfección, solo que cuando ya lo subo a mi servidor y me quiero logear, no me manda a la pagina header(“Location: intropage.php”); se queda en el login, por que pasa eso. si yo le doy esa liga en la URL me lo muestra si esta logeado. ayuda por favorrrrr..!!

  11. UsuarioNuevo

    Oh Oh la instrucción no apareció en el comentario anterior porque el html reproduce el php. Aqui dejo la instrucción a la que hago referencia:
    “error_reporting(E_COMPILE_ERROR|E_ERROR|E_CORE_ERROR);” Obviamente quitar las comillas y anteponer la sintaxis del php que ya han de saber “<?"

  12. UsuarioNuevo

    Agradezco por este post, me fue de gran utilidad; las novedades que encontré es que los archivos php tales como connection header footer que pertenecen al llamado requerido “include” los puedes descargar desde el link de la parte superior “Puedes descargar el código de formulario de u sistema de inicio de sesión y registro.” Además que en mi servidor WAMP en este caso me produce una advertencia o Warning al ejecutar en el navegador; esto se debe al uso obsoleto del mysql_connect ya que en las nuevas versiones de Php se comienza a usar el mysqli_connect. Aunque yo para corregirlo vi en un foro la siguiente instrucción que la pueden colocar antes de llamar al include en los archivos login.php y register.php:
    y solucionado el problema. Saludos. Dios les bendiga desde Posorja-Ecuador.

  13. Jose Juan

    Hola muy buenas tardes me parece muy bien tu codigo solo que pregunto y comento algunas cosas el footer es la parte inferior de la pagina ahi puedes añadir cualquier cosas el header puedes incluir el css ahora si queremos con privilegios como hago el if no se si estoy bien implementando me gustaria que me dijeras que falta mi ejemplo:

    //conexion a la base de datos
    $lin=mysql_connect(“localhost”,”controlusuario”,”12345″,””)
    or die(“No se pudo realizar la conexion”);
    mysql_select_db(“controlusuario”,$lin)
    or die(“ERROR con la base de datos”);

    $cone=”SELECT * FROM `usuario` WHERE matricula = ‘{$_POST[‘matricula’]}’ and password = ‘{$_POST[‘password’]}'”;
    $res=mysql_query($cone,$lin)
    if($row=mysql_fetch_array($res)){

    $roles = $row[“profile”];

    switch($roles){

    case ‘usuario’:

    header(‘location: _usuario/index.php’);
    break;

    case ‘admin’:
    header(‘location: _admin/index.php’);
    break;

    case ‘moderador’:
    header(‘location: _moderador/index.php’);
    break;

    }

    }else{

    echo “USUARIO NO REGISTRADO“;
    echo””;
    echo”Regresar“;
    }

    }

    }

    ?>

    necesito ayuda metodo es post no se que le hace falta……. o esta bien o mal

  14. Gustavo

    Excelente aporte, aunque claro para quienes empezamos en este lenguaje, es bueno tener lecturas previas para entender la razón de tanto archivo php, así como de sintaxis y demás. Nuevamente mis saludos y agradecimiento por este post.

  15. jose andres ayala tello

    hola es para mi un gusto poder saludarte es un marabilloso codigo pero apesar que ya pude hacer todo lo que indicas incluso mejorando algunos elementos ya que siempre tira un error o varios, pero no es nada que no se pueda solucionar la pregunta es porque al llevar el formulario no da el resultado esperado se borra todo y no hace nada que puedo hacer

  16. Alejo

    Gracias por la información, agradezco si me pudieras indicar como “transformar” la contraseña almacenada en texto claro a MD5 ó el algoritmo de cifrado que se desee.
    Gracias

  17. German

    me marca este error cuando pongo el login
    Warning: Cannot modify header information – headers already sent by (output started at C:\xampp-win32-1.7.3\xampp\htdocs\phpform\login.php:5) in C:\xampp-win32-1.7.3\xampp\htdocs\phpform\login.php on line 12

  18. Ricardo

    Muy buena guía, me ayudo bastante solo mencionar sobre md5 que actualmente ya es bastante vulnerable y es aconsejable otro algoritmo(y si asiendo a lado tantas cosas de seguridad que faltarían por implementar y mencionar).

    pero no le quita lo bueno a esto muchas gracias por la ayuda 😀

  19. jorge

    Buenas tardes, sigo este tutorial pero no encuentro donde realices el connection.php que lo incluyes en los archivos y donde se define la base de datos y las demas constantes, tampoco la realización del header.php y del footer.php, es que soy principiante y pues quisiera saber que es lo que se realiza en esos archivos?
    Mil gracias!

  20. Cris-t

    Buen día

    Tengo una pregunta, estuve creando la base de datos por la parte gráfica de phpmyadmin y la parte auto_increment no la encuentro para configurarla, soy novato agradezco su colaboración.

  21. Andrés

    Felicidades por el post, me ha servido. Mi consulta se debe a que no he visto que se haya aplicado la seguridad md5 que menciona al principio ¿Cómo se haría?. Agradezco su tiempo y empeño. Un cordial saludo.

  22. francisco

    esta muy bien tu post…. sinceramente lo que ando buscando es que al momento que haces el logueo y no este registrado el usuario.. en ese momento te de la opción de registrar.. es lo único que le falta al post.. o si lo tiene por favor serias tan amable de mostrarmelo…!! gracias por todo amigo 🙂

  23. Androidfastblog@gmail.com

    Hola buenas estoy buscando quien tenga la gentileza para ayudarme a poner un longin en mi blog en wordpress.com no soy premium solo puedo colocar widget y html pudieran ayudarme es que al menos en esto no poseo mucho conocimiento quien se Anima

    1. Julian Gonzales

      Como puedes ver en la linea del HTML, exactamente en la linea de < ?php include("includes/header.php"); ?>, se llama al archivo header.php, en él esta la linea que invoca el archivo CSS, por lo tanto, una vez se llame este archivo, no es necesario añadir el CSS en cada archivo, después de las imágenes encuentras el enlace de descarga.

Deja un comentario