Página inicial con el formulario de autentificación en PHP

  • Por
Página que muestra el formulario donde el visitante debe introducir su nombre de usuario y contraseña, necesarios para acceder a la aplicación segura.
Vamos a realizar la página inicial, que tiene el formulario de autentificación en el que el visitante debería rellenar con su usuario y contraseña. Como es la página inicial, la llamaremos index.php, que es el documento por defecto configurado en nuestro servidor.

Para realizar esta página, utilizaremos HTML básico, excepto en una comprobación que nos permitirá saber si se accede al formulario de nuevo por no haber introducido correctamente el usuario y contraseña, pues, en ese caso, habría que mostrar un cartelito informando que el usuario o la contraseña no son válidos.

Para pasar a la página inicial el mensaje de que el usuario/contraseña introducidos no son válidos utilizaremos una variable pasada a través de la URL. La llamaremos errorusuario, y si contiene la cadena "si" es que estamos recibiendo un error.

El código sería el siguiente:

<html>
<head>
<title>Autentificación PHP</title>
</head>
<body>
<h1>Autentificación PHP</h1>
<form action="control.php" method="POST">
<table align="center" width="225" cellspacing="2" cellpadding="2" border="0">
<tr>
<td colspan="2" align="center"
<?if ($_GET["errorusuario"]=="si"){?>
bgcolor=red><span style="color:ffffff"><b>Datos incorrectos</b></span>
<?}else{?>
bgcolor=#cccccc>Introduce tu clave de acceso
<?}?></td>
</tr>
<tr>
<td align="right">USER:</td>
<td><input type="Text" name="usuario" size="8" maxlength="50"></td>
</tr>
<tr>
<td align="right">PASSWD:</td>
<td><input type="password" name="contrasena" size="8" maxlength="50"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="Submit" value="ENTRAR"></td>
</tr>
</table>
</form>
</body>
</html>


Nota: La variable errorusuario, recibida por la URL y que informa si se produjo un error anterior al introducir usuario y contraseña, se está recogiendo por mediación del array asociativo $_GET, que guarda todas las variables enviadas por la URL. Aprendemos más sobre pasar variables por la URL en la dirección: http://www.desarrolloweb.com/articulos/317.php

El formulario tiene el atributo action dirigido hacia la página "control.php", que es la que se encarga de recoger los datos y ver si son correctos. Será tratada en el próximo capítulo.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Jose

30/10/2005
Hemos de tener cuidado en que la web cumpla las normativas del W3C (www.w3c.org) para que nuestra web sea compatible con el mayor número posible de navegadores. Por lo tanto, usar "submit" en lugar de "Submit", "post" en lugar de "POST", etc

Rafael Varela

31/10/2005
Yo me las arreglé de la siguiente forma para quitar el error de la variable no definida:

<?
if (isset($_GET["errorusuario"])){
if ($_GET["errorusuario"]=="si"){
echo '<b>Datos incorrectos</b>';
}else{
echo 'Esperando datos';
}
}else{
echo 'Esperando datos';
}
?>

ivonne St

06/3/2006
bien, tu codigo sirvio perfectamente, acomodando y limpiado el codigo original + lo tuyo queda perfecto

aqui va el codigo depurado
<?
if (isset($_GET["errorusuario"]))
{
if ($_GET["errorusuario"]=="si")
{
echo "Datos incorrectos" ;
}
else
{
echo "Introduce tu clave de acceso ";
}
}
else
{
echo 'Esperando datos';
}
?>

balack

25/3/2009
Hola ha todos, soy principiante en esto y he creado los 5 archivos (index, control, seguridad, aplicacion y salir).php con su correspondiente código y cuando pulso al boton entrar me salta a la página control.php la cual me sale en blanco y no se que tengo que hacer para que funcione.
PD: he probado con el password correcto y otro para que me saltase a la página principal y nada

Blaster

12/4/2009
Otra forma de ponerlo para los que no tenemos mucha idea
Un saludo a tod@s.Enhorabuena por la página (que por cierto acabo de descubrir buscando documentación para iniciarme en php) Pues eso... que para los que no tenemos mucha idea creo que es más sencillito ponerlo así...lo digo por no andar mezclando instrucciones php y html (eso creo yo vamos, corregirme los que entendeis del tema). Deciros que esto va justo despues de la etiqueta <tr>. Otra cosa... no entiendo muy bien el tema de la variable "errorusuario", es decir....en el formulario html no aparece... no entiendo como se puede usar con $_GET. Perdonad mi ignorancia pero estoy empezando.... ains que duro es esto......

<?
if ($_GET["errorusuario"]=="si")
{
echo"<td bgcolor=red>";
echo"Error, Introduzca datos nuevamente";
echo"</td>";
}
else
{
echo"<td bgcolor=silver>";
echo"Introduzca su clave de acceso";
echo"</td>";
}
?>

sergio

18/9/2009
gracias
ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss

Miguel

12/11/2009
Sobre todo el sistema de credenciales
Te felicito por este post ya que es de mucha utilidad. Yo estoy buscando info. porq tngo un proyecto de la universidad y necesito lo de log in, asi que muchas gracias y que Dios te bendiga.

antonio

18/2/2010
Pregunta sobre el articulo de la clave
He estado obserbando el prceso conpleto pero no se en que parte de codigo as puesto la clave en concreto lo dodrias aclarar ,no las encuentro por ningun lugar i se supone que esa clave es fija.

Walter

07/5/2010
Error al ejecutar
uso Netbeans. cuando copio el codigo lo ejecuto y aunque ponga mal el user siempre me envia a la pagina control. No me da el mismo efecto que en la pagina de prueba. donde se marca la clave incorrecta e indica el error

Diony Reveron

18/6/2010
Ayuda
Hola como estan? estoy programando en php pero tengo dos errores uno es que no se como validar de que cuando metan la clave y le mande a repetir me valide que mabas sean iguales. este es parte del codigo
<form name="registro_usuario" method="post" action="FormInsertarusuario.php">
<center><h3>Registro de Usuario</h3></center>
<center><table border="0" height="100">
<tbody>
<tr>
<td>C&eacute;dula</td>
<td><input type="text" name="cedula" size="20"></td>
</tr>
<tr>
<td>Nombres</td>
<td><input type="text" name="nombre" size="20"></td>
</tr>
<tr>
<td>Apellidos</td>
<td><input type="text" name="apellido" size="20"></td>
</tr>

<tr>
<td>Usuario</td>
<td><input type="text" name="usuario" size="20"></td>
</tr>
<tr>
<td>Clave</td>
<td><input type="password" name="clave" size="20"></td>
</tr>
<tr>
<td>Telefono</td>
<td><input type="text" name="telefono" size="20"></td>
</tr>
<tr>
<td>Tipo de Usuario</td>
<td><select name="tipo">
<option value="administrador">Administrador</option>
<option value="Usuario">Usuaio</option>
</select></td>
</tr>
<tr>
<td>Clave Administrador</td>
<td><input type="password" name="claveAdmin" size="20"></td>
</tr>
<tr>
<td align="left">Direccion</td>
<td align="left"><input type="text" rows="3" cols="20" name="direccion"></td>
</tr>
<tr align="center">
<td colspan="2">
<input type="submit" name="enviar" value="Enviar">
<input type="reset" value="Cancelar">
</td></tr>
</tbody>
</table></center><br><br>
</form>

y despues cuando me los envie a la base de datos no se como guardarlo ya que tengo un ID en auto_increment pero si no coloco que lo coloque el usuario entonces no me guarda y lo que quiero es que el lo genere solo pues...
es decir que quiero colocar en la consulta sql todos los datos del formulario anterior pero que la base de datos el campo de id lo genere solo como hago la consulta... Gracias

Yuri

19/7/2010
envio de formulario acorreo en php
hola, estoy tratando de enviar un formulario de php a un correo. Ya hice el formulario y la forma de envio pero me sale este error:

Advertencia: mail () [function.mail]: No se pudo conectar al servidor de correo en "localhost" el puerto 25, verificar su "SMTP" y "smtp_port" configuración en php.ini o ini_set uso () en C: Archivos de programa xampplite htdocs www nuevo_proyecto enviar.php on line 20
Mensaje Enviado correctamente

Asi que no se que hacer alrespecto.
si me pueden ayudar lo más pronto que puedan, les agradeceré...
:-)

pedrolp

31/8/2010
Problemas
que tal, bueno mas que nada esta bueno el material pero tengo un problema... he hecho el codigo tal y como dice en el manual, pero creo que el index.php esta mal... bueno eso creo, no se si le pudieran dar una revision al codigo en la parte de la cabecera en donde te dice que ingreses tus datos... justo cuando comienza el codigo php... no se si pudieran hacer algo mas detallado esta parte, ya que lo he hecho y me salen errores... y cuando intento arreglarlo, el archivo control.php no hace nada, no me redirige hacia aplicacion.php sino que se keda estancado en control.php o me salen errores, xfa si pudieran arreglar esto xq me es importante aprender estos pasos... gracias

pedrolp

01/9/2010
buenos datos!
Olas, escribi pensando que habia un pekeño error, pero al analizar detalladamente me di cuenta que el error estaba en mi codigo, en un bendito caracter! lo pude solucionar! (Y) aunq igual me parece que hay un pekeño error en la parte del comentario en que si ingresa mal la clave (en la etiketa <td> cuando sale el mensajito de error) de todas formas los aportes arriba mostrados sirven de muxo (Y)

alberto_kriskovich

07/9/2010
Da error el ejemplo
Hola:
No puedo más que agradecer a Desarrollo Web, y en especial a Miguel, por los excelentes artículos que mucho me ha ayudado para aprender y comprender PHP.
Pero el motivo de este comentario es sumarme a otros que aparecen en el sitio, en el sentido de que el código que se publica en este artículo de autentificación, da error de código PHP.
Me quedé en la página index porque aparece el código PHP en el navegador. Busqué por todas partes para ver dónde cometí el error, pero no lo encuentro. Copié el código de la página y lo pegué y lo mismo.
Por favor, ¿podría alguien revisar el código? porque seguramente que el error está al mezclarse los códigos PHP con html.
Gracias

Gusttavo

07/10/2010
Comienzo de intrucciones
Estoy trabajando con Komodo Edit 6.0 y Wamp Server2.0i y el codigo no considera las intrucciones en Php cuyos parrafos no comienzan con <?php, a diferencia de como aparece aca solo con <?. Recorde que aca mismo en desarrolloweb lei esa informacion, ademas indicaba que en la configuracion del php.ini se puede determinar la consideracion.

packmanuel

16/12/2010
[php] etiqueta html
Buenas, no soy programador y hay ciertas cosas referentes a la sintaxis que me desconciertan a veces. Por ejemplo:


1.- <td colspan="2" align="center"
2.- <?if ($_GET["errorusuario"]=="si"){?>
3.- bgcolor=red><span style="color:ffffff"><b>Datos incorrectos</b></span>
4.- <?}else{?>
5.- bgcolor=#cccccc>Introduce tu clave de acceso


Línea 6: "...bgcolor=#cccccc>"; no se corresponde con ninguna "<" previa.

¿Eso es así?

Gracias de antemano y saludos cordiales.

packmanuel

16/12/2010
[php] etiqueta html
¡Ups!
Edito: "linea 5".

neri

25/8/2011
Gracias
Justo lo que estaba buscando..... gracias por la corrección.

Gabriel palma C

12/9/2011
dudas password y usuarios
como puedo hacer que el cliente genere su clave y usuario para despues poder acceder a una pagina que yo quiera? por ejemplo: se genere una clave para que puedan acceder a la pagina de "lista de precios por Mayoreo"?
lo que quiero es que el cliente de de alta una contraseña y un usuario sin tener que darles la clave para cada cliente nuevo/
Les agradeceria muchisimo su guia

javier

20/9/2011
error de caractes
hola, me funciona el sistema perfectamente. Además en el php de conexión lo conecto con una base de datos mysql y va todo bien. El problema que tengo es que me queda, encima del formulario el carácter > suelto y no sé donde está el error. He repasado el código 100.000 veces y no veo el fallo.

Carles

15/10/2011
Explicación "etiqueta html"
Fíjate bien, el "<" está en la línea 1.

1.- <td colspan="2" align="center"
2.- <?if ($_GET["errorusuario"]=="si"){?>
3.- bgcolor=red><span style="color:ffffff"><b>Datos incorrectos</b></span>
4.- <?}else{?>
5.- bgcolor=#cccccc>Introduce tu clave de acceso

Quizás queda un poco enmascarado por la mezcla de código html y php.
HTML <-- creas el TD y lo defines "< TD blabla ", pero NO LO CIERRAS.
PHP <-- condicional SI hay error
HTML <-- color rojo y CIERRAS " color/>"
PHP <-- EN CASO CONTRARIO (no hay error)
HTML <-- otro color y CIERRAS "color/>".

Creo que la explicación más vale 'tarde' que 'nunca'.. quizás les sirva a otros :D

kingg

12/12/2011
correccion
para evitar el problema de la variable no definida y ke el kodigo kede en contexto kon el kodigo inicial modifike algunos detalles para ke kuando no esta definida la variable tambn muestre el letrero de introduce tus datos.
(realizo este aporte porke la pagina me ha sido de mucha ayuda y me ha reducido el tiempo de trabajo , muchas gracias todo esta bn explikado aunke faltan komentarios en el kodigo ^^)

<?
if (isset($_GET["error"]))
{
if ($_GET["error"]=="si")
{?>
bgcolor=red><span style="color:ffffff"><b>Datos incorrectos</b></span>
<?}else{?>
bgcolor=#cccccc>Introduce tu clave de acceso
<?}?>
<?}else{?>
bgcolor=#cccccc>Introduce tu clave de acceso
<?}?>

Paulo

26/3/2012
Formulario estructura
Creo que la parte en php del formulario quedaría más limpio de esta forma y tambien se evita el error de no haber declarado lavariable

<?php

//comprueba si la variable existe si no declara la variable sin valor
if (empty($_GET["errorusuario"])) {
$_GET["errorusuario"]="";
}

//procesa el formulario
if ($_GET["errorusuario"]=="si")
{
echo "Datos incorrectos";
}
else
{
echo "Introduce tu clave de acceso";
}

?>

principiante

14/5/2012
funciona
<html>
<head>
<title>Autentificación PHP</title>
</head>
<body>
<h1>Autentificación PHP</h1>


<form action="control.php" method="POST">
<table align="center" width="225" cellspacing="2" cellpadding="2" border="1">
<tr>
<td colspan="2" align="center"
<?
if (isset($_GET["errorusuario"]))
{
if ($_GET["errorusuario"]=="si")
{
echo"<td bgcolor=red>";
echo"Error, Introduzca datos nuevamente";
echo"</td>";
}
else
{
echo"<td bgcolor=silver>";
echo"Introduzca su clave de acceso";
echo"</td>";
}
}
else
{
echo"<td bgcolor=silver>";
echo"Esperando datos";
echo"</td>";
}
?>
</td>
</tr>
<tr>
<td align="right">USER:</td>
<td><input type="Text" name="usuario" size="8" maxlength="50"></td>
</tr>
<tr>
<td align="right">PASSWD:</td>
<td><input type="password" name="contrasena" size="8" maxlength="50"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="Submit" value="ENTRAR"></td>
</tr>
</table>
</form>


<hr><hr>
<br>
Datos correctos:
<br>
<br>
User: miguel
<br>
Passwd: qwerty


</body>
</html>

Hernan Serrano

18/9/2012
Necesito ayuda
bgcolor=red>Datos incorrectos
bgcolor=#cccccc>Introduce tu
clave de acceso
La pagina me muestra los datos de esa forma, no me respeta el codigo php. Me podrian ayudar, es algo de configuracion. El codigo lo copie y lo pegue tal como esta en la pagina.
Utilizo el wampserver 2.2 y mi sistema es windows 7

Solo

10/5/2013
Gracias
Muchas gracias, probe el codigo de la pagina pero traia errores, vi los cometarios de los usuarios, que mencionaban como solucionar esto, gracias a todos.

Probe este codigo en WampServer version 2.2
Apache Version : 2.2.22
PHP Version : 5.4.3
MySQL Version : 5.5.24

Pongo el codigo para que simplemente lo pegen en su pagina

<?php
if (isset($_GET["errorusuario"]))
{
if ($_GET["errorusuario"]=="si")
{
echo "<td colspan='2' align='center' bgcolor=red>";
echo "<span style='color:ffffff'><b>Datos incorrectos</b></span>
</td>";
}
else
{
echo "<td colspan='2' align='center' bgcolor=green>";
echo "<span style='color:ffffff'><b>Introduce tu clave de acceso</b></span>
</td>";
}
}
else{
echo "<td colspan='2' align='center' bgcolor=green>";
echo "<span style='color:ffffff'><b>Introduce tu clave de acceso</b></span>
</td>";
}
?>

Juan Carlos Marcano

28/7/2014
observación
Creo que si el method es POST, deberia utilizarce el $_POST en vez del $_GET.

Juan Carlos Marcano

28/7/2014
Corrección
Disculpen no habia visto el código de la siguiente pagina, el valor retornado es por el GET, entonces esta bien el $_GET. ;-)

Carlos Andres

03/3/2017
Pagina con los nombres de cada usuario.
Hola a todos.Quisiera saber como yo puedo hacer que:
Si pongo por ejemplo:
Usuario:carlos
Password:hola
me lleve a una pagina que diga bienvenido Carlos
y si pongo otro usuario como por ejemplo:
Usuario:andres
Password:mundo
que me lleve a una pagina que diga bienvenido andres.
Gracias.