martes, 27 de noviembre de 2012

Sistema de usuarios con php y MySQL

Este es un sencillo sistema de usuarios en usando PHP y MySQL así como Wamp Server para visualizar nuestro proyecto. El sistema consiste en registrar usuarios y su logueo. Acontinuacion les describo cada uno de los archivos con que cuenta este sistema.
Nota: estos archivos tienen extension .php
Archivo conexion, este archivo contiene las indicaciones sobre el host, usuario, contraseña y base de datos sobre la que va a trabajar principalmente el sistema, esto para evitar estar declarando esta información cada vez que tenemos un nuevo archivo, para solo agregamos include ("conexion.php"); en los demás archivos.
<?php
//nuestro host
$host="localhost";
//el nombre de usuario
$user="root";

//se indica la contraseña,en mi caso no uso contraseña ya que uso el wampserver,
//si usara un servidor físico entonces forsózamente debo de tener una contraseña
//para evitar infiltraciones

$pw="";
//indicamos la base de datos en la cual trabajaremos
$db="huguito";
?>


Login, este contiene el formulario donde se loguea el usuario.
<!DOCTYPE html>
<html>
       <head>
       <title>El Huguito</title>

       </head>
 <body>

       <h2>Inserte sus datos para loguearse:

       <!--con este formulario el usuario se loguea y manda a llamar a verificar.php

       para realizar el logueo, se usa el método post-->

       <h3>        
<form action="verificar.php"method="post"name="form">

       <p>Nombre: <input type="text"name="Nombre"/><br>

       <p>Password: <input type="password"name="PW"/><br>

       <input type="submit"value="Login"/><br>

</form>     

</body>


</html>

 Index, este archivo es el principal en nuestro proyecto, es el primero que se cargará el abrir el proyecto en el wamp server y en cualquier servidor. Este indica al usuario si está logueado o quiere loguearse.

<?php

//session_start()  comprueba que esté logueado el usuario

session_start(); 
//si name_user tiene un valor entonces se indica que está logueado

if (isset($_SESSION['name_user']))

{

echo'Bienvenido  ';//mensaje de bienvenida más el nombre de usuario

echo'<b>'.$_SESSION['name_user'].'</b>.';
echo'<p><a href="logout.php">Logout</a></p>';//este link manda a logout para cerrar sesión

}

//si no se está logueado se invita a loguearse o registrarse

else

{

echo'<p><ahref="login.php">Login</a></p>

<p><href="registro.php">Registrar</a></p>';

}

?>


<!DOCTYPEhtml>

<html>

       <head>

       <title>El Huguito</title>
       </head>


<body>

       <p><h1>             INDEX

       <p><h2>ESTA ES LA PAGINA PRINCIPAL DE LA PAGINA WEB


</body>


</html>


Insertar, aquí es donde se enlaza a la base de datos para insertar un nuevo usuario:
<?php

//se llama a conexion.php

include ("conexion.php");
//se establece la conexión usando elhost, el usuario y la base de datos

//declarados en conexion.php

       $conexion=mysql_connect($host,$user,$pw);

       //si no hay conexión

       if(!$conexion){

             die('No se ha podido conectar: '.mysql_error());

       }

       else

       {

             //indicamos el select ,la base de datos y laconexión

             mysql_select_db($db,$conexion);  

             //declaramos variables y les asignamos valores, los cuales vienen del formulario 
            //de registro

             //el trim inidica que se eliminan los espacios en blanco

             $username=trim($_POST["Nombre"]);

             $password=trim($_POST["PW"]);

            

             //Consulta:
             //realizamos la consulta de insert indicando los valores (variables declaradas         
             //anteriormente)
             //a insertar usando el formato '{$variable}', observe también el formato de 
             //la fecha

             $consulta = ("INSERT INTO usuario(Nombre_User,Password,Fecha)           values('{$username}','{$password}','".date("Y-m-d")."')");

             $resultado = mysql_query($consulta) or die (mysql_error());
             $datos = @mysql_fetch_array($resultado);
            mysql_close();
             echo 'Se ha registrado correctamente.';
             header('location:index.php');

       }

?>



Logout, si el usuario decide cerrar sesión este archivo se encarga de terminar la sesión.


<?php

session_start();

session_destroy();//se termina la sesión

echo'Ha terminado la session';

?>

<SCRIPT LANGUAGE="javascript">

//se regresa a index

location.href = "index.php";

</SCRIPT>


Registro, este contiene el formulario de registro para los nuevos usuarios:

<!DOCTYPE html>

<html>

       <head>

       <title>Page Title</title>

       </head>


<body>

       <p><h2>Inserte sus datos para registrarse:

<!--este es el formulario que guarda el nombre de usuario y su password en la base de datos

se usa el método post-->

<h3>

<form action="insertar.php" method="post" name="form">

       <p>Nombre: <input type="text" name="Nombre"/><br>

       <p>Password: <input type="password" name="PW"/><br>

       <input type="submit" value="Registrar"/><br>

</form>     

</body>


</html>

Verificar, este es el encargado de consultar en la base de datos el nombre de usuario y contraseña proporcionados al momento del logueo, si son iguales a los que tiene la base de datos se inicia la sesión, de no ser así se indica el error:

<?php

include ("conexion.php");

$username=$_POST["Nombre"];

$password=$_POST["PW"];

echo $username;

//indicar el servidor

mysql_connect($host,$user,$pwor die ('Ha fallado la conexión: '.mysql_error());

//elegir la base de datos

mysql_select_db($db)ordie ('Error al seleccionar la Base de Datos: '.mysql_error());

//trim quita espacios en blanco

if(trim($username) !=""&&trim($password) !="")

{

       //buscar en la base de datos un usuario con ese nombre y traer el password

       $consulta="SELECT Password,Nombre_User FROM usuario WHERE Nombre_User='".$username."'";

       //en la variable $result guarda lo que trajo la consulta y verifica que se realice
       $result=mysql_query($consulta)ordie ('Ha fallado la conexión: '.mysql_error());

       //ahora guarda en $row lo obtenido en la consulta(Password y Nombre_User)

       if($row=mysql_fetch_row($result)){

      //si el row[0] (el cual es la contraseña que trae la consulta)es igual a

      // la contraseña proporcionada por el usuario se inicia la sesion

if($row[0] == $password)

         {

       session_start();

        $_SESSION["name_user"] = $row[1];//Es una variable de sesion que toma el nombre de 
    //usuario, nos ayudará a indicar si el usuario está logueado y con ella indicaremos el    //nombre del usuario al estar registrado

            

echo'Has sido logueado correctamente '. $_SESSION['name_user'];

       header("Location: index.php");//Te redirecciona a la página index

      }

       else

         {

echo'Contraseña o Nombre de usuario incorrectos, verifique e intente de nuevo.';

      }

   }

else

   {

echo'Contraseña o Nombre de usuario incorrectos, verifique e intente de nuevo.';

}

mysql_free_result($result);

}

else

{

echo'Especifique un Nombre de usuario y Contraseña para loguearse';

}

mysql_close();


?>

Cuando ya tenemos cada uno de estos archivos se procede a verificar que funcionen, sin embargo antes de ello necesitamos la base de datos en MySQL, en la cual guardaremos los usuarios registrados. 
Para ello usaremos el mismo Wamp Server con la herramienta phpMyAdmin. Es necesario iniciar el Wamp Server:
ya iniciado verificamos que el servidor esté activo, esto se logra cuando el ícono del Wamp Server está verde, de no estarlo sobre deben de dar clic conre el ícono y seleccionar Start All Services
Al estar activo ingresamos a nuestro navegador preferido, en mi caso Google Chrome y escribimos localhost para ingresar a las herramientas de Wamp Server, en algunos casos el Wamp se instala con un puerto diferente por lo que podría ser localhost:8080, pero todo depende de su instalación, para revisar esto puede ingresar al archivo httpd.conf de la Opcion Pache y cambiar el puerto por donde escucha.


Este es el Wamp Server y sus herramientas.
Ahora usamos la herramienta phpMyAdmin para crear la base de datos que necesitamos:














Aquí es donde crearemos la base de datos.

Seleccionamos la opción base de datos:
Asignamos un nombre y damos clic en crear:
Ahora aparece la ventana para crear una tabla:
Para probar el proyecto solo necesitamos de la tabla usuario, la cual tendrá cuatro columnas, damos clic en continuar:
Esta tabla solo contendrá cuatro columnas:
ID_Usuario, de tipo entero, autoincrementable y siendo esta la llave primaria.
Nombre_User, de tipo VARCHAR, longitud 20.
Password, de tipo VARCHAR, longitud 20.
Fecha, de tipo DATE.
 si ya han creado base de datos les resultará muy sencillo este paso.



d

Del lado derecho asignamos Autoincrementable y Primaria a la columna ID_Usuario


Guardamos la tabla:







Y así se mostrará al estar ya creada:
Al seleccionarla en el lado izquierdo de la ventana podremos visualizarla.


Ya que tenemos la base de datos, ahora guardamos los archivos anteriores en una carpeta y la copiamos en la dirección:  C:wamp/www


Ahora en la dirección: C:wamp/alias tomamos cualquiera de los archvios con extensión COF y lo copiamos pegamos en la misma carpeta.


Le cambiamos el nombre y le asignamos el que tiene nuestra carpeta de archivos, en nuestro caso se trata de la carpeta "huguito".



 

En el navegador debemos recargar la pagína.
Ya recargado el navegador en la parte de Your Proyects veremos que aparece nuestro proyecto con el nombre "huguito".






Esta es la página principal, debido a su nombre index es como el servidor sabe que es la principal.
 Damos clic a Registar y nos manda al formulario de registro, registramos un usuario con el Nombre hugo y de password 123.
Si revisamos en la tabla de la base de datos podemos verificar la inserción.



A hora nos logueamos con ese nomre de usuario y su contraseña.

 Vemos ahora que aparece el emsaje de bienvenida con nuestro nombre de usuario
Si decidimos cerrar sesión solo damos clic en logout y apareen de nuevo las opciones para loguearse o registrarse.

Para entender mejor el sistema pueden ver sel siguiente video:

Eso sería todo y gracias por ver el contenido, espero que  les ayude en algo.