VaidrollTeam: LOGIN BÁSICO CON REGISTRO DE USUARIOS EN HTML, PHP Y MYSQL

Este es uno de los proyectos que hice cuando estaba practicando para dar mi examen, permite iniciar sesión y registrar un nuevo usuario en la misma página, el proyecto es similar al primer login que hice.

index.html

<html>

<head>
<meta charset="UTF-8">
<title>Login</title>
<link rel="stylesheet" href="estilos.css">
</head>

<body>
<form action="login_registrar.php" method="POST">
<h2>Iniciar sesión</h2>
<input type="text" placeholder="&#128273; Usuario" name="usuario" required>
<input type="password" placeholder="&#128274; Contraseña" name="pass" required>
<input type="submit" value="Ingresar" name="btningresar">

<br>
<a href="registrar.html" style="float:right">Crear una cuenta</a>

</form>
</body>
</html>

principal.html

<html>

<head>
<meta charset="UTF-8">
<title>Principal</title>
<link rel="stylesheet" href="estilos.css">
</head>

<body>
<form>
<h2>Hola mundo</h2>
<br>
<a href="index.html" style="float:right">Regresar</a>

</form>
</body>
</html>

registrar.html

<html>

<head>
<meta charset="UTF-8">
<title>Registrar</title>
<link rel="stylesheet" href="estilos.css">
</head>

<body>
<form action="login_registrar.php" method="POST">
<h2>Crear una cuenta</h2>
<input type="text" placeholder="&#128273; Usuario" name="usuario" required>
<input type="password" placeholder="&#128274; Contraseña" name="pass" required>
<input type="submit" value="Registrar" name="btnregistrar">

<br>
<a href="index.html" style="float:right">Regresar</a>

</form>
</body>
</html>

conexion.php

<?php

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

$conn = mysqli_connect($dbhost,$dbuser,$dbpass,$dbname);

if(!$conn)
{
	die("No hay conexion:" .mysqli_connect_error());
}
?>

login_registrar.php

<?php

include("conexion.php");

$nombre = $_POST["usuario"];
$pass   = $_POST["pass"];

//Login
if(isset($_POST["btningresar"]))
{
	$query = mysqli_query($conn,"SELECT * FROM login WHERE usuario = '$nombre' AND password='$pass'");
	$nr = mysqli_num_rows($query);
	
	if($nr==1)
	{
		echo "<script> alert('Bienvenido $nombre'); window.location='principal.html' </script>";
	}else
	{
		echo "<script> alert('Usuario no existe'); window.location='index.html' </script>";
	}
}

//Registrar
if(isset($_POST["btnregistrar"]))
{
	$sqlgrabar = "INSERT INTO login(usuario,password) values ('$nombre','$pass')";
	
	if(mysqli_query($conn,$sqlgrabar))
	{
		echo "<script> alert('Usuario registrado con exito: $nombre'); window.location='index.html' </script>";
	}else 
	{
		echo "Error: ".$sqlgrabar."<br>".mysql_error($conn);
	}
}


?>

estilos.css

* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  box-sizing: border-box;
}

:focus {
  outline: none;
}

body {
  background: #EC610B;
  display: flex;
  min-height: 100vh;
}

form {
  margin: auto;
  width: 50%;
  max-width: 500px;
  background: #F3F3F3;
  padding: 20px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

h2 {
  text-align: center;
  margin-bottom: 10px;
  color: rgba(0, 0, 0, 0.5);
  font-family: Arial Black;
}

input {
  display: block;
  padding: 10px;
  width: 100%;
  margin: 30px 0;
  font-size: 20px;
}

input[type="submit"] {
  background: linear-gradient(#FFDA63, #FFB940);
  border: 0;
  color: black;
  opacity: 0.8;
  cursor: pointer;
   font-family: Arial;
  border-radius: 20px;
  margin-bottom: 0;
}

input[type="submit"]:hover {
  opacity: 1;

  
}

input[type="submit"]:active {
  transform: scale(0.95);

}

@media (max-width:768px) {
  form {
    width: 100%;
  }
}

@media (max-width:480px) {
  form {
    width: 100%;
  }
}

Registrar

Login

Notepad++

Xampp (Apache y MySQL)

Páginas

LOGIN BÁSICO CON REGISTRO DE USUARIOS EN HTML, PHP Y MYSQL