miércoles, 13 de abril de 2016

2º.Login con PHP, HTML y MYSQL

Bueno esta entrada es más una actualización del ejemplo de login utilizando el form de html, con php y mysql.
Hago esta actualización por que puedo ver que siguen entrando mucho a ese ejemplo pero ese ejemplo es de hace unos 4 años y pues algunas de las funciones que aparecen ya no son compatibles con las nuevas versiones de PHP por lo que vamos a actualizarnos.
Para dar una comparación pueden ver la antigua entrada aquí.



Para este ejemplo vamos a utilizar 3 archivos:
1.- index.html: Donde pondremos todo el formato html , básicamente será el esqueleto de nuestro de proyecto.
2.- login.php : Este será el archivo donde haremos la conexión con la base de datos.
3.-bienvenido.php: Este archivo solo tienen una linea y será el ejemplo del archivo que se cargaría una vez que los datos fueron ingresados correctamente.

veamos el código del primer archivo (index.html):


<html>
<head>

<style>

   table{
 width:285px;
 height:185px;
 text-align:center;
 background-color:#FFFFCC;
 margin:auto;
  }
</style>

</head>
<body>
<form name="login" method="post" action="login.php">
<table cellpadding="0" cellspacing="0" >
  <tr>
    <th height="39" colspan="2" scope="col">EJEMPLO 1:  LOGIN </th>
  </tr>
  <tr>
    <th width="108" height="49" scope="col">USUARIO</th>
    <th width="176" align="center" scope="col">
    <input name="txtuser" type="text" id="txtuser" /></th>
  </tr>
  <tr>
    <th height="51">PASSWORD</th>
    <td align="center">
       <input name="txtpass" type="password" id="txtpass" />
    </td>
  </tr>
  <tr>
    <td height="46" colspan="2" align="center">
 <input type="submit" name="Submit" value="Iniciar Sesion" />
    </td>
  </tr>
</table>
</form>
</body>
</html>

Expliquemos un poco la diferencia entre este archivo y el de la antigua entrada, no cambio mucho solo que agregamos el estilo desde la sección style que está en el header ya que algunos atributos como align o bgcolor ya no funcionan igual con HTML5.

Pueden observar que al inicio hay una etiqueta de tipo form esto es lo que indica que estamos haciendo un formulario y que por lo tanto vamos a mandar datos. esta etiqueta tiene como atributos el nombre del form que algunas veces no es obligatorio, el metodo que se va a utilizar para el envió de los datos que en este ejemplo utilizaremos el método POST y por ultimo pero no menos importante tenemos un atributo que se llama action en el es donde hacemos la referencia del archivo que va a realizar la validación a la hora de hacer clic en el botón, en este ejemplo pueden ver que hace referencia aun archivo llamado "login.php".
Así luce.

________________________________________________________________

Ahora veamos el código del archivo login.php



<?php 
 //Conexion con la base de datos.
 $conexion= new mysqli("localhost","root", "");
   
 if($conexion->connect_errno){
      echo "Fallo al conectar a MySQL:(". $conexion->connect_errno.")";
 }
 else{
 $conexion->select_db("test");
      
 //declaramos como variables a los campos de texto del formulario.
 $nombre=$_POST["txtuser"];
 $password=$_POST["txtpass"];

 //Consulta del usuario y el password
 $consulta="SELECT usuario,password FROM usuario 
 WHERE usuario='$nombre' and password='$password'";
 if($query= $conexion->query($consulta)){
 $row=$query->fetch_array(); 
 $nr =$query->num_rows; 
 //Si existe el usuario lo va a redireccionar a la pagina de Bienvenida.
 if($nr == 1){ 
   header ("Location:bienvenido.php"); 
 }
 //Si no existe lo va a enviar al login otra vez.
 else if($nr <= 0) { 
               header("Location:index.html"); 
 }  
 }
 else{
 echo $conexion->error;  
 }
}  
?>

Los cambios más notables en cuanto a la entrada antigua es el llmado a mysql. Por que antes utilizabamos "=@mysql_connect()" o "mysql_select_db" pero estos comando ya no son válidos si entran a la página de PHP lo podrán corroborar. Ahora recomienda las llamadas por medio de  MySQLi o PDO_MySQL .
Bueno expliquemos un poquito el código:

$conexion= new mysqli("localhost","root", "");
La primeras lineas es donde se hace llamado al servidor donde se encuentra ubicada la base de datos. Como estoy utilizando un servidor local (XAMPP o WAMPP) el servidor será localhost, despues los siguientes datos serán el usuario y la contraseña que tienen el permiso para entrar a la base de datos , normalmente estos se quedan como root y sin contraseña.
Lo que sigue es un if() donde validará que  se haya podido realizar la conexión, en caso de no poder mandará un error.

Si se pudo conectar correctamente al servidor ahora sigue ingresar el nombre de la base de datos a la que se va a conectar.
$conexion-&gt;select_db("test"); Despues tenemos:
$nombre=$_POST["txtuser"];
$password=$_POST["txtpass"];

Estas variables tomarán el valor de los inputs (campos de texto) que se encuentran en el archivo index.html.

Por último la consulta es un select donde vamos a filtrar donde el usuario y el password sean igual a los datos que hay en los campos de texto. si  la consulta encuentra aun usuario con estos datos  se va a redireccionar la pagina de bienvenida. Si no encuentra ninguno se regresa al login.html, para que se vuelvan a ingresar los datos.

________________________________________________________________

Ahora La pagina de Bienvenida que es "bienvenido.php"


<?php 
echo '<div align=center>
  <font color=Blue><b> Bienvenido sus datos son correctos</b></font>
</div>';
?>



Solo estoy poniendo un mensaje muy sencillo pero se supone que esta seria la página principal a donde se tiene que ir una ves validados los datos.
Y eso sería todo espero que este ejemplo les sigua sirviendo ya con las consultas a mysql actualizadas. Recuerden que es importante entrar a revisar las actulizaciones que cualquier código que utilicen tengan para mantener siempre al día sus proyectos.
Si tienen dudas o recomendaciones al respecto no duden en dejar sus comentarios. 

Y no duden en entrar a visitar mi otro ejemplo de login utilizando Ajax en lugar de form. Aquí abajo les dejo la liga:



"Programar no tiene que ser tan difícil como parece...."

4 comentarios:

  1. If you're trying hard to lose fat then you certainly need to start following this totally brand new personalized keto plan.

    To design this keto diet service, licenced nutritionists, personal trainers, and chefs joined together to develop keto meal plans that are powerful, painless, money-efficient, and enjoyable.

    Since their launch in 2019, 100's of people have already remodeled their body and health with the benefits a certified keto plan can give.

    Speaking of benefits: in this link, you'll discover eight scientifically-confirmed ones provided by the keto plan.

    ResponderEliminar
  2. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  3. Cuando introduzco el usuario y contraseña para entrar al login, me dice que tengo que abrir el archivo login.php y no me dirige directamente a la págia de Bienvenido...

    ResponderEliminar
  4. Muchas gracias, me sirve un montón!
    Consulta...
    Yo en "Bienvenido.php" voy a tener un input text que necesito que se autocomplete con el usuario anteriomente logueado... como puedo hacer?

    ResponderEliminar