Hoy vamos a construir un sistema de registro que realiza un seguimiento de qué usuarios son administradores y cuáles son usuarios normales. Los usuarios normales de nuestra aplicación no pueden acceder a las páginas de administración. Todos los usuarios (tanto administradores como usuarios normales) utilizan el mismo formulario para iniciar sesión. Después de iniciar sesión, los usuarios normales son redirigidos a la página de índice, mientras que los usuarios administradores son redirigidos a las páginas de administración.
Entonces, comencemos con la creación de los archivos, ¿de acuerdo? Navegue hasta la carpeta de su máquina a la que puede acceder el servidor (es decir, htdocs si está usando xampp y www si está usando wampp) y cree los siguientes archivos y carpetas:
Ahora abre register.php en tu editor de texto favorito y comencemos a escribir código.
En nuestro archivo register.php en blanco, agreguemos este código:
<!DOCTYPE html>
<html>
<head>
<title>Registration system PHP and MySQL</title>
</head>
<body>
<div class="header">
<h2>Register</h2>
</div>
<form method="post" action="register.php">
<div class="input-group">
<label>Username</label>
<input type="text" name="username" value="">
</div>
<div class="input-group">
<label>Email</label>
<input type="email" name="email" value="">
</div>
<div class="input-group">
<label>Password</label>
<input type="password" name="password_1">
</div>
<div class="input-group">
<label>Confirm password</label>
<input type="password" name="password_2">
</div>
<div class="input-group">
<button type="submit" class="btn" name="register_btn">Register</button>
</div>
<p>
Already a member? <a href="login.php">Sign in</a>
</p>
</form>
</body>
</html>
Si iniciamos nuestro navegador y vemos esto, esto es lo que obtenemos:
Eso no se ve bien. Hagamos algo al respecto.
Agregue un enlace al archivo css justo debajo de la etiqueta
<link rel="stylesheet" href="style.css">
Luego abra el archivo style.css y escupe este código CSS en él:
* { margin: 0px; padding: 0px; }
body {
font-size: 120%;
background: #F8F8FF;
}
.header {
width: 40%;
margin: 50px auto 0px;
color: white;
background: #5F9EA0;
text-align: center;
border: 1px solid #B0C4DE;
border-bottom: none;
border-radius: 10px 10px 0px 0px;
padding: 20px;
}
form, .content {
width: 40%;
margin: 0px auto;
padding: 20px;
border: 1px solid #B0C4DE;
background: white;
border-radius: 0px 0px 10px 10px;
}
.input-group {
margin: 10px 0px 10px 0px;
}
.input-group label {
display: block;
text-align: left;
margin: 3px;
}
.input-group input {
height: 30px;
width: 93%;
padding: 5px 10px;
font-size: 16px;
border-radius: 5px;
border: 1px solid gray;
}
#user_type {
height: 40px;
width: 98%;
padding: 5px 10px;
background: white;
font-size: 16px;
border-radius: 5px;
border: 1px solid gray;
}
.btn {
padding: 10px;
font-size: 15px;
color: white;
background: #5F9EA0;
border: none;
border-radius: 5px;
}
.error {
width: 92%;
margin: 0px auto;
padding: 10px;
border: 1px solid #a94442;
color: #a94442;
background: #f2dede;
border-radius: 5px;
text-align: left;
}
.success {
color: #3c763d;
background: #dff0d8;
border: 1px solid #3c763d;
margin-bottom: 20px;
}
.profile_info img {
display: inline-block;
width: 50px;
height: 50px;
margin: 5px;
float: left;
}
.profile_info div {
display: inline-block;
margin: 5px;
}
.profile_info:after {
content: "";
display: block;
clear: both;
}
Este código CSS se utilizará para diseñar toda nuestra aplicación.
Si actualizamos la página register.php en el navegador, obtenemos esta belleza:
Lo que queremos ahora es que el usuario complete el formulario y presione el botón de registro para que la información se pueda guardar en la base de datos. Así que pasamos al siguiente paso.
Creemos una base de datos llamada multi_login. En la base de datos multi_login, cree una tabla llamada usuarios con los siguientes campos:
- id – int (10)
- nombre de usuario – varchar (100)
- correo electrónico – varchar (100)
- tipo_usuario – varchar (100)
- contraseña – varchar (100)
Eso es todo lo que necesitamos para nuestra base de datos.
Pasemos a nuestro archivo register.php una vez más y hagamos algunas modificaciones.
Primero debemos asegurarnos de que el atributo del método del formulario esté establecido en correo y que el atributo de acción se establece en register.php lo que significa que cuando se hace clic en el botón de registro, los valores del formulario se envían a la misma página.
Escribamos ahora el código para recibir estos valores y almacenarlos en la base de datos. Pero es mi costumbre evitar, tanto como sea posible, mezclar código php en html, así que seguiré adelante y crearé un archivo functions.php para poner este código dentro y luego hacer que este código esté disponible en el archivo register.php.
En la parte superior (primera línea) del archivo register.php, agregue esta línea de código:
<?php include('functions.php') ?>
//...
Además, queremos que cuando el usuario no ingrese los valores del formulario correctamente, se muestren mensajes de error que lo orienten a hacerlo correctamente. En el mismo archivo register.php, justo después de la etiqueta de apertura