Inicio de sesión de administrador y usuario en la base de datos php y mysql

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.

Notas: La primera parte de este tutorial ya está cubierta en una publicación anterior sobre el registro de usuarios. Puede visitar esta publicación para obtener una explicación más detallada del sistema de registro de usuarios. Para aquellos que ya han seguido ese post, les pido disculpas por la repetición aquí.

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 en la sección principal del archivo register.php. Al igual que:

<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.

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

, agregue este código

<form method="post" action="register.php">
	<?php echo display_error(); ?>
//...
</form>

Display_error () es una función simple que definiremos en breve.

Una última cosa en el archivo register.php: Modifique los campos de entrada de nombre de usuario y correo electrónico estableciendo sus atributos de valor en las variables correspondientes. Al igual que:

<input type="text" name="username" value="<?php echo $username; ?>">
<input type="email" name="email" value="<?php echo $email; ?>">

Pronto definiremos las variables $ username y $ email …

Ahora abra el archivo functions.php vacío y agregue este código en él:

<?php 
session_start();

// connect to database
$db = mysqli_connect('localhost', 'root', '', 'multi_login');

// variable declaration
$username = "";
$email    = "";
$errors   = array(); 

// call the register() function if register_btn is clicked
if (isset($_POST['register_btn'])) {
	register();
}

// REGISTER USER
function register(){
	// call these variables with the global keyword to make them available in function
	global $db, $errors, $username, $email;

	// receive all input values from the form. Call the e() function
    // defined below to escape form values
	$username    =  e($_POST['username']);
	$email       =  e($_POST['email']);
	$password_1  =  e($_POST['password_1']);
	$password_2  =  e($_POST['password_2']);

	// form validation: ensure that the form is correctly filled
	if (empty($username)) { 
		array_push($errors, "Username is required"); 
	}
	if (empty($email)) { 
		array_push($errors, "Email is required"); 
	}
	if (empty($password_1)) { 
		array_push($errors, "Password is required"); 
	}
	if ($password_1 != $password_2) {
		array_push($errors, "The two passwords do not match");
	}

	// register user if there are no errors in the form
	if (count($errors) == 0) {
		$password = md5($password_1);//encrypt the password before saving in the database

		if (isset($_POST['user_type'])) {
			$user_type = e($_POST['user_type']);
			$query = "INSERT INTO users (username, email, user_type, password) 
					  VALUES('$username', '$email', '$user_type', '$password')";
			mysqli_query($db, $query);
			$_SESSION['success']  = "New user successfully created!!";
			header('location: home.php');
		}else{
			$query = "INSERT INTO users (username, email, user_type, password) 
					  VALUES('$username', '$email', 'user', '$password')";
			mysqli_query($db, $query);

			// get id of the created user
			$logged_in_user_id = mysqli_insert_id($db);

			$_SESSION['user'] = getUserById($logged_in_user_id); // put logged in user in session
			$_SESSION['success']  = "You are now logged in";
			header('location: index.php');				
		}
	}
}

// return user array from their id
function getUserById($id){
	global $db;
	$query = "SELECT * FROM users WHERE id=" . $id;
	$result = mysqli_query($db, $query);

	$user = mysqli_fetch_assoc($result);
	return $user;
}

// escape string
function e($val){
	global $db;
	return mysqli_real_escape_string($db, trim($val));
}

function display_error() {
	global $errors;

	if (count($errors) > 0){
		echo '<div class="error">';
			foreach ($errors as $error){
				echo $error .'<br>';
			}
		echo '</div>';
	}
}	

Fácil ¿verdad?

Si observa atentamente, ahora puede ver la diferencia entre un Cliente y un administración. En la función register (), el usuario se guarda como administración si la variable user_type se envió en la solicitud de publicación o como usuario, si no se envió user_type. Dado que nuestro formulario no tiene ningún campo para user_type, es obvio que el usuario que estamos creando se guardará como Cliente y no administración.

Cuando un usuario está registrado, obtenemos la última identificación insertada (identificación del usuario registrado) y lo registramos. A partir de la identificación del usuario, podemos obtener todos los demás atributos del usuario utilizando la función getUserById (). Después de obtener el usuario, lo colocamos en la variable de sesión como una matriz llamada usuario.

Almacenar al usuario en una variable de sesión significa que el usuario está disponible incluso si actualiza y navega a otras páginas (donde se inició la sesión). La variable de usuario en la sesión no se pierde; sólo se puede perder si se desarma (así es como se cierra la sesión del usuario. Próximamente …).

Ahora, de regreso a nuestro formulario de registro, se da cuenta de que cuando ingresa valores y hace clic en el botón de registro, se le redirige a la página index.php. Pero está en blanco. Hagamos que parezca una página de índice.

Abra el archivo index.php en su editor de texto y coloque el siguiente código en él.

<?php 
	include('functions.php');
?>
<!DOCTYPE html>
<html>
<head>
	<title>Home</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="header">
		<h2>Home Page</h2>
	</div>
	<div class="content">
		<!-- notification message -->
		<?php if (isset($_SESSION['success'])) : ?>
			<div class="error success" >
				<h3>
					<?php 
						echo $_SESSION['success']; 
						unset($_SESSION['success']);
					?>
				</h3>
			</div>
		<?php endif ?>
		<!-- logged in user information -->
		<div class="profile_info">
			<img src="images/user_profile.png"  >

			<div>
				<?php  if (isset($_SESSION['user'])) : ?>
					<strong><?php echo $_SESSION['user']['username']; ?></strong>

					<small>
						<i  style="color: #888;">(<?php echo ucfirst($_SESSION['user']['user_type']); ?>)</i> 
						<br>
						<a href="index.php?logout='1'" style="color: red;">logout</a>
					</small>

				<?php endif ?>
			</div>
		</div>
	</div>
</body>
</html>

Ahora, si registra un nuevo usuario, lo registra y lo redirige a una página de índice que se ve así:

Eso se ve genial.

Solo un pequeño problema. Si una persona escribe la URL correcta para esta página index.php en el navegador, podrá acceder a esta página sin siquiera iniciar sesión. No queremos eso, ¿verdad? Arreglemoslo.

Visitemos nuestro archivo functions.php una vez más y agreguemos esta función en la parte inferior del archivo:

function isLoggedIn()
{
	if (isset($_SESSION['user'])) {
		return true;
	}else{
		return false;
	}
}

Esta función, cuando se llama, le dice si un usuario ha iniciado sesión o no devolviendo verdadero o falso.

Abra el archivo index.php (o cualquier archivo que desee que sea accesible solo para los usuarios registrados) y pegue este código justo después de la declaración de inclusión en la parte superior del archivo:

<?php
include('functions.php');
if (!isLoggedIn()) {
	$_SESSION['msg'] = "You must log in first";
	header('location: login.php');
}

//...

Si el usuario no ha iniciado sesión e intenta acceder a esta página, se le redirige automáticamente a la página de inicio de sesión.

Para cerrar la sesión del usuario, agreguemos este código en el archivo functions.php:

// log user out if logout button clicked
if (isset($_GET['logout'])) {
	session_destroy();
	unset($_SESSION['user']);
	header("location: login.php");
}

En este punto podemos decir que hemos terminado con el registro de usuario.

Hacer el inicio de sesión de usuario es aún más fácil.

Abra su archivo login.php y pegue este código en él:

<?php include('functions.php') ?>
<!DOCTYPE html>
<html>
<head>
	<title>Registration system PHP and MySQL</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="header">
		<h2>Login</h2>
	</div>
	<form method="post" action="login.php">

		<?php echo display_error(); ?>

		<div class="input-group">
			<label>Username</label>
			<input type="text" name="username" >
		</div>
		<div class="input-group">
			<label>Password</label>
			<input type="password" name="password">
		</div>
		<div class="input-group">
			<button type="submit" class="btn" name="login_btn">Login</button>
		</div>
		<p>
			Not yet a member? <a href="register.php">Sign up</a>
		</p>
	</form>
</body>
</html>

Una última cosa, agregue esta declaración if y esta función dentro de functions.php:

// call the login() function if register_btn is clicked
if (isset($_POST['login_btn'])) {
	login();
}

// LOGIN USER
function login(){
	global $db, $username, $errors;

	// grap form values
	$username = e($_POST['username']);
	$password = e($_POST['password']);

	// make sure form is filled properly
	if (empty($username)) {
		array_push($errors, "Username is required");
	}
	if (empty($password)) {
		array_push($errors, "Password is required");
	}

	// attempt login if no errors on form
	if (count($errors) == 0) {
		$password = md5($password);

		$query = "SELECT * FROM users WHERE username='$username' AND password='$password' LIMIT 1";
		$results = mysqli_query($db, $query);

		if (mysqli_num_rows($results) == 1) { // user found
			// check if user is admin or user
			$logged_in_user = mysqli_fetch_assoc($results);
			if ($logged_in_user['user_type'] == 'admin') {

				$_SESSION['user'] = $logged_in_user;
				$_SESSION['success']  = "You are now logged in";
				header('location: admin/home.php');		  
			}else{
				$_SESSION['user'] = $logged_in_user;
				$_SESSION['success']  = "You are now logged in";

				header('location: index.php');
			}
		}else {
			array_push($errors, "Wrong username/password combination");
		}
	}
}

Básicamente, lo que hace es: si se hace clic en el botón de inicio de sesión, se llama a la función de inicio de sesión () que inicia la sesión del usuario. Tenga en cuenta que cuando el usuario inicia sesión, también realiza una verificación: si el usuario es administrador, lo redirige a la página admin / home.php. Sin embargo, si es solo un usuario normal, se le redirige a la página index.php.

Ahora empecemos a trabajar en el sitio de administración. Vamos a utilizar los archivos en la carpeta de administración (create_user y home.php). Estos archivos están disponibles solo para usuarios administradores, lo que significa que solo un administrador puede crear otro administrador.

Abra create_user.php y pegue este código en él:

<?php include('../functions.php') ?>
<!DOCTYPE html>
<html>
<head>
	<title>Registration system PHP and MySQL - Create user</title>
	<link rel="stylesheet" type="text/css" href="../style.css">
	<style>
		.header {
			background: #003366;
		}
		button[name=register_btn] {
			background: #003366;
		}
	</style>
</head>
<body>
	<div class="header">
		<h2>Admin - create user</h2>
	</div>
	
	<form method="post" action="create_user.php">

		<?php echo display_error(); ?>

		<div class="input-group">
			<label>Username</label>
			<input type="text" name="username" value="<?php echo $username; ?>">
		</div>
		<div class="input-group">
			<label>Email</label>
			<input type="email" name="email" value="<?php echo $email; ?>">
		</div>
		<div class="input-group">
			<label>User type</label>
			<select name="user_type" id="user_type" >
				<option value=""></option>
				<option value="admin">Admin</option>
				<option value="user">User</option>
			</select>
		</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"> + Create user</button>
		</div>
	</form>
</body>
</html>

Además del estilo, la principal diferencia entre esta página y la página de registro es el campo de selección de opción en la página create_user.php que permite al administrador especificar el tipo de usuario. Por lo tanto, un administrador puede crear un usuario normal y un administrador.

Seguiré adelante y pegaré el código completo de home.php dentro del archivo. Aquí está:

<?php 
include('../functions.php');

if (!isAdmin()) {
	$_SESSION['msg'] = "You must log in first";
	header('location: ../login.php');
}

if (isset($_GET['logout'])) {
	session_destroy();
	unset($_SESSION['user']);
	header("location: ../login.php");
}
?>
<!DOCTYPE html>
<html>
<head>
	<title>Home</title>
	<link rel="stylesheet" type="text/css" href="../style.css">
	<style>
	.header {
		background: #003366;
	}
	button[name=register_btn] {
		background: #003366;
	}
	</style>
</head>
<body>
	<div class="header">
		<h2>Admin - Home Page</h2>
	</div>
	<div class="content">
		<!-- notification message -->
		<?php if (isset($_SESSION['success'])) : ?>
			<div class="error success" >
				<h3>
					<?php 
						echo $_SESSION['success']; 
						unset($_SESSION['success']);
					?>
				</h3>
			</div>
		<?php endif ?>

		<!-- logged in user information -->
		<div class="profile_info">
			<img src="../images/admin_profile.png"  >

			<div>
				<?php  if (isset($_SESSION['user'])) : ?>
					<strong><?php echo $_SESSION['user']['username']; ?></strong>

					<small>
						<i  style="color: #888;">(<?php echo ucfirst($_SESSION['user']['user_type']); ?>)</i> 
						<br>
						<a href="home.php?logout='1'" style="color: red;">logout</a>
                       &nbsp; <a href="create_user.php"> + add user</a>
					</small>

				<?php endif ?>
			</div>
		</div>
	</div>
</body>
</html>

En la parte superior de este archivo, hay una declaración if que verifica si el usuario es administrador (usando la función isAdmin ()). Agreguemos esa función a nuestro archivo functions.php:

// ...
function isAdmin()
{
	if (isset($_SESSION['user']) && $_SESSION['user']['user_type'] == 'admin' ) {
		return true;
	}else{
		return false;
	}
}

Ahora podría decir, si solo un administrador puede crear otro administrador, entonces, ¿quién crea el primer administrador? Bueno, para crear el primer administrador, puede crear un usuario normal usando el formulario de registro, luego usar cualquier cliente mysql como phpmyadmin o el símbolo del sistema mysql y cambiar el tipo de usuario a administración. De esa forma, podrá iniciar sesión como administrador y crear otros administradores.

Tan simple como eso, hemos terminado con la construcción de un sistema que gestiona usuarios normales junto con usuarios administradores.

Conclusión

Espero que este tutorial te haya sido útil. Me alegro de que lo hayas seguido hasta el final. No dude en examinar el código, personalizarlo para que se adapte a sus necesidades y utilizarlo en sus proyectos. Si tiene algún problema o comentario o algún comentario sobre este tutorial, déjelo en los comentarios a continuación.

¡Los mejores deseos!


También podría gustarte:

4.5/5 - (744 votos)

Deja un comentario