Login.php

<? php

session\_start ();

**comentario:**

***// "session\_start" sirve para iniciar una sesión o reanudar la existencia, lo importante es la función "session\_start" debe ser una llamada al principio del principio, antes de enviar cualquier salida al navegador. De otra forma, el error infame "Los encabezados ya están enviados" `)`.***

include 'serv.php';

**comentario:**

***//Include es una palabra clave que hace referencia a una instrucción al preprocesador que esta presente en la gran mayoría de lenguajes de alto y medio nivel, de forma genérica se usa para adicionar un archivo al código, Hace el llamado a el archivo "serv.php" para conectarse a la base de datos.***

if(isset($\_SESSION['user'])) {

**comentario:**

***//Si el mensaje que envia el formulario atraves de el "user" es igual a el que esta en la base datos iniciara sesión y mostrara la pagina "panel.php", "isset" determina si una variable está definida y no es NULL, dicha función comprueba si una variable está definida o no en el script de PHP que se está ejecutando***

echo '<script> window.location = "panel.php"; </script> ';

**comentario:**

***//La propiedad de sólo lectura `Window.location`retorna un objeto `Location` con información acerca de la ubicación actual del documento.***

}

?>

<html>

<head>

<meta charset=utf-8>

<title>Transparent login form desing </title>

<style>

body {

margin: 0;

padding: 0;

background: url(image.jpg);

        width: 100%;

        height: 100%;

background-size: cover;

background-position: center;

font-family: sans-serif;

}

.login-box{

width: 300px;

height: 370px;

background: rgba(0, 0, 0, 0.5);

color: #fff;

top: 50%;

left: 50%;

position: absolute;

transform: translate(-50%,-50%);

box-sizing: border-box;

padding: 70px 38px;

border-radius: 10px;

}

.avatar{

width: 85px;

height: 100px;

border-radius:;

position: absolute;

top: -50px;

left: calc(50% - 50px);

}

h1{

margin: 0;

padding: 0 0 20px;

text-align: center;

font-size: 22px;

}

.login-box p{

margin: 0;

padding: 0;

font-weight: bold;

}

.login-box input{

width: 100%;

margin-bottom: 20px;

}

.login-box input[type="text"], input[type="password"]

{

border: none;

border-bottom: 1px solid #fff;

background: transparent;

outline: none;

height: 40px;

color: #fff;

font-size: 16px;

}

.login-box input[type="submit"]

{

border: none;

outline: none;

height: 40px;

background: #1C8ADB;

color: #fff;

font-size: 18px;

border-radius: 20px;

}

.login-box input[type="submit"]:hover

{

cursor: pointer;

background: #39DC79;

color:#000;

}

.login-box a{

text-decoration: none;

font-size: 14px;

color:#fff;

}

.login-box a:hover

{

color: #39DC79;

}

</style>

</head>

<body>

<div class="login-box">

<img src="logo.png" class="avatar">

# Iniciar Sesion

<form method="post" action="validar.php">

<p>Nombre de Usuario</p>

<input type="text" class="form-control" name="user" autocomplete="off" required placeholder="Nombre de Usuario"><br><br>

<p>Contraseña</p>

<input type="password" class="form-control" name="pw" autocomplete="off" required placeholder="Contraseña"><br><br>

<input type="submit" class="btn btn-success" name="login" value="Entrar">

        </div>

  </div>

</form>

</div>

</body>

</html>