Login Sin base de datos

http://www.masiosare.mx/login-sin-base-de-datos/


Crear 3 archivos:
  • index.php
  • usuario.php
  • estilos.css
index.php :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
   <head>
      <title>Login</title>
      <link rel="stylesheet" type="text/css" href="estilos.css">
   </head>
   <body>
      <div id="login">
         <form action= "usuario.php" method="GET">
            <label>Usuario: </label>
            <input type="text" name="user"/><br>
            <label>Contraseña: </label>
            <input type="password" name="password"/><br><br>
            <input type="submit" value="Enviar"/>
         </form>
      </div>
   </body>
</html>


Ahora explico el código anterior
  • 4 – Enlace con el archivo estilos.css para aplicar los estilos a nuestra página
  • 7 – Comienza el div que contiene nuestro formulario
  • 8 – Inicio del form y enlace con el archivo usuario.php donde se encuentra toda la funcionalidad del sitio
  • 9 y 11 – Etiquetas “Usuario” y “Contraseña”
  • 10 y 12 – Campos donde introducir el usuario y la contraseña
  • 13 – Botón para enviar el formulario
usuario.php :
1
2
3
4
5
6
7
8
9
10
11
12
<?php
   $user = $_GET['user'];
   $password = $_GET['password'];
   if (($user == "usuario") AND ($password == "12345")){
      echo "Bienvenido ".$usuario;
   }
   Else{
      echo "¡Usuario o contraseña incorrectos!";
      echo '<a href="'.$_SERVER['HTTP_REFERER'].'"><br>Volver</a>';
   }
?>
Explicación:
  • 2 y 3 – Se crean las variables “user” y “password” que contendrán la información correspondiente
  • 4 – Aquí se estable el valor que debe de contener el campo de usuario y de contraseña, esto es lo que hace que se pueda acceder o no al contenido
  • 5 – Se muestra un mensaje que dice “Bienvenido”, en caso que los datos proporcionados sean correctos
  • 9 y 10 – en caso que los datos sean incorrectos, se muestra un mensaje al usuario donde se dice que los datos no son los correctos e inmediatamente se inserta un link para que el usuario regrese a la página anterior
estilos.css :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
/* Contenedor del login */
#login {
   background-color: #77B0C5;
   border-radius: 8px;
   box-shadow: 3px 3px 10px 0px rgba(50, 50, 50, 0.75);
   -moz-box-shadow: 3px 3px 10px 0px rgba(50, 50, 50, 0.75);
   -webkit-box-shadow: 3px 3px 10px 0px rgba(50, 50, 50, 0.75);
   margin-left: auto;
   margin-right: auto;
   margin-top: 10%;
   max-width: 20em;
   padding-bottom: 10px;
   padding-top: 10px;
}
/* Etiquetas del formulario */
label {
   color: white;
   display: block;
   margin-bottom: 6px;
   margin-left: 1.2em;
}
/* Campos del formulario */
input[type="text"],
input[type="password"] {
   border: none;
   border-radius: 6px;
   display: block;
   font-size: 1em;
   height: 2em;
   text-align: center;
   width: 90%;
   margin-left: auto;
   margin-right: auto;
}
/* Botón */
input[type="submit"] {
   background-color: #A3A0A2;
   border: none;
   border-radius: 6px;
   color: white;
   display: block;
   font-size: 1em;
   height: 3em;
   margin-left: auto;
   margin-right: auto;
   margin-top: -10px;
   text-align: center;
   width: 150px;
}
input[type="submit"]:hover {
   cursor: pointer;
   background-color: #A33D41;
   opacity: 0.8;
}

5 comentarios:

Suscribirse a: Comentarios (Atom)