LOGIN Básico con HTML + PHP + XAMPP MYSQL



Un login sumamente sencillo que lo puedes hacer en menos de 30 minutos, no requiere mucho esfuerzo y solo necesitas 3 archivos en una carpeta (1 hoja HTML, 1 hoja PHP y 1 imagen), no te vayas a olvidar de la base de datos.


login.html

En la hoja HTML primero debemos de crear nuestra tabla y ubicarlo dentro de un formulario, la hoja PHP se llamará login.php y los datos que enviaremos será de la caja txtusuario y txtpassword.

<html>
<style>
</style>
<center>
<form method="post" action="login.php">
<table>
<tr><td colspan="2" style="background-color:#33A8DB; padding-bottom:5px; padding-top:5px;">
<label>Login</label></td>
</tr>
<tr><td align="center" rowspan="5"><img src="candado.png"/></td>
<td><label>Usuario</label></td>
</tr>
<tr><td><input type="text" name="txtusuario"/></td></tr>
<tr><td><label>Password</label></td></tr>
<tr><td><input type="password" name="txtpassword" /> </td></tr>
<tr><td><input type="submit" value="Ingresar" /> </td></tr>
</table>
</form>
</center>
</html>

Para que se vea mejor nuestro login podemos agregar el siguiente estilo en la misma hoja.

<style>

table 
{
border: 2px solid #353A46;
background-color: #3ABAF1;
}

input[type=text], input[type=password]
{
width: 100%;
padding: 8px 20px;
border: 2px solid #ccc;
box-sizing: border-box;
}

img
{
width: 100px;
height: 100px;
}

label
{
font-size: 14px;
font-weight: bold;
font-family: arial;
}

input[type=submit]
{
background-color: #1C94C8;
color:white;
padding: 8px 10px;
margin: 8px 0px;
border: solid;
cursor: pointer;
width: 40%;
}
</style>

login.php

Realizamos la conexión, recibimos los datos que fueron enviados desde login.html (usuario y contraseña), si los datos están correctos deberá de darle la bienvenida.

<?php

$dbhost = "localhost";
$dbuser = "root";
$dbpass = "";
$dbname = "test";

$conn = mysqli_connect($dbhost, $dbuser, $dbpass, $dbname);
if (!$conn) 
{
	die("No hay conexión: ".mysqli_connect_error());
}

$nombre = $_POST["txtusuario"];
$pass = $_POST["txtpassword"];

$query = mysqli_query($conn,"SELECT * FROM login WHERE usuario = '".$nombre."' and password = '".$pass."'");
$nr = mysqli_num_rows($query);

if($nr == 1)
{
	//header("Location: pagina.html")
	echo "Bienvenido:" .$nombre;
}
else if ($nr == 0) 
{
	//header("Location: login.html");
	//echo "No ingreso"; 
	echo "<script> alert('Error');window.location= 'login.html' </script>";
}
	


?>

Base de datos "test"

La base de datos deberá de tener las columnas usuario y password.





  • Notepad++
  • Xampp (Apache y MySQL)
    Fecha:
    Etiquetas: , , , , , ,