Puntos clave:
- Construir un panel de administración personalizado con PHP y Bootstrap agiliza la gestión de la aplicación web, facilitando tareas como la supervisión del rendimiento y la gestión de usuarios.
- Combinar el manejo de datos de PHP con las capacidades de diseño de Bootstrap te permite crear un panel de control visualmente atractivo y fácil de usar para una administración eficiente de la aplicación web.
Muchas empresas tienen problemas para gestionar sus aplicaciones web. Sin un buen panel de control, tareas como comprobar el rendimiento, gestionar usuarios y analizar datos pueden ser difíciles y llevar mucho tiempo.
PHP y Bootstrap pueden ayudarte a crear un panel de control personalizado. PHP puede manejar datos complejos, y Bootstrap hace que el panel de control sea visualmente atractivo y fácil de usar en diferentes dispositivos.
Este blog te mostrará cómo crear un panel de control de administración PHP. Un panel de control bien diseñado puede ayudarte a trabajar más rápido, agilizar los procesos y obtener información útil sobre tu aplicación web.
Crea aplicaciones web dinámicas con PHP y Bootstrap 5 en Cloudways
Potencia tus aplicaciones web con las últimas versiones de PHP y Bootstrap en un alojamiento de alto rendimiento que cumple todos los requisitos del sistema.
¿Qué es la integración de PHP Bootstrap?
PHP y Bootstrap son dos herramientas importantes para crear sitios web. PHP es un lenguaje de programación que ayuda a crear páginas web dinámicas. Bootstrap es un marco que proporciona estilos y funciones ya creados para diseñar sitios web atractivos.
Cuando se combinan, PHP y Bootstrap crean una potente forma de crear aplicaciones web que son a la vez funcionales y visualmente atractivas. PHP se encarga de la lógica del lado del servidor, mientras que Bootstrap se ocupa del diseño del front-end.
Ventajas de usar Bootstrap con PHP
PHP y Bootstrap juntos hacen que la construcción de sitios web sea más rápida y sencilla. Los desarrolladores pueden centrarse en las funciones principales del sitio web, mientras que Bootstrap se encarga del diseño.
Utilizar PHP y Bootstrap tiene muchas ventajas.
✅ Bootstrap ofrece estilos y funciones ya preparados.
✅ Garantiza que los sitios web se vean bien en todos los dispositivos.
✅ Ayuda a los desarrolladores a escribir un código más organizado.
✅ Facilita la creación de sitios web atractivos e interactivos.
Visión general de un panel de control de administración
Un panel de control de administración es una interfaz web que permite a los administradores supervisar el rendimiento de la aplicación y gestionar los ajustes. Proporciona estadísticas vitales como la participación de los usuarios, las ventas y la funcionalidad del sitio web. Además, permite a los administradores ajustar parámetros inaccesibles para los usuarios normales.
Los cuadros de mando de administración facilitan diferentes funciones, entre ellas:
- Gestionar cuentas de usuario creándolas, editándolas o eliminándolas.
- Modificar el contenido del sitio web.
- Visualización de métricas sobre el recuento de visitantes, la duración de la sesión y las tasas de compra.
- Personalizar la apariencia y el funcionamiento del sitio web.
Requisitos para PHP y Bootstrap 5
En este tutorial, asumo que ya tienes un sitio web basado en PHP. Esto es lo que necesitarás
- PHP 8 o superior
- MariaDB 10 o superior
- Bootstrap 5 o superior
Construir un panel de administración con Bootstrap
Construiré una aplicación sencilla para gestionar las ventas. Tendrá un panel de control donde los usuarios podrán ver la información de ventas, actualizar los datos de los productos y añadir nuevos productos. Los usuarios también podrán registrarse e iniciar sesión en el panel de control.
Paso 1: Crear los Formularios
La plantilla del panel de administración tiene muchos formularios diferentes, incluidos los de registro e inicio de sesión. Utilizaré HTML5 y código PHP personalizado para asegurarme de que la información que introducen los usuarios es correcta.
Crear un formulario de inscripción
Los formularios de registro de usuarios ya están disponibles. Cambiaré los nombres de los campos y actualizaré el método y la acción utilizando el siguiente código:
<?php include('server.php') ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin - Start Bootstrap Template</title>
<!-- Bootstrap core CSS-->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template-->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template-->
<link href="css/sb-admin.css" rel="stylesheet">
</head>
<body class="bg-dark">
<div class="container">
<div class="card card-register mx-auto mt-5">
<div class="card-header">Register an Account</div>
<div class="card-body">
<form method="post" action="register.php">
<?php include('errors.php'); ?>
<div class="form-group">
<div class="form-row">
<div class="col-md-12">
<label for="exampleInputName">Username</label>
<input class="form-control" id="exampleInputName" type="text" name="username" value="<?php echo $username; ?>" >
</div>
</div>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input class="form-control" id="exampleInputEmail1" type="email" aria-describedby="emailHelp" name="email" value="<?php echo $email; ?>" >
</div>
<div class="form-group">
<div class="form-row">
<div class="col-md-6">
<label for="exampleInputPassword1">Password</label>
<input class="form-control" id="exampleInputPassword1" type="password" name="password_1" >
</div>
<div class="col-md-6">
<label for="exampleInputPassword1">Confirm Password</label>
<input class="form-control" id="exampleInputPassword2" type="password" name="password_2" >
</div>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block" name="reg_user">Register</button>
</form>
<div class="text-center">
<a class="d-block small mt-3" href="login.php">Login Page</a>
<!--- <a class="d-block small" href="forgot-password.html">Forgot Password?</a>-->
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
</body>
</html>
Así es como aparece el formulario de inscripción después de las modificaciones:
– Una página de registro con campos para nombre de usuario, dirección de correo electrónico, contraseña, confirmar contraseña y botones para registrarte o ir a la página de inicio de sesión.
Crear un formulario de inicio de sesión
A continuación, utiliza el siguiente código para el formulario de acceso:
<?php include('server.php') ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin - Start Bootstrap Template</title>
<!-- Bootstrap core CSS-->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template-->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template-->
<link href="css/sb-admin.css" rel="stylesheet">
</head>
<body class="bg-dark">
<div class="container">
<div class="card card-login mx-auto mt-5">
<div class="card-header">Login</div>
<div class="card-body">
<form method="post" action="login.php">
<?php include('errors.php'); ?>
<div class="form-group">
<label for="exampleInputEmail1">Username</label>
<input class="form-control" type="text" name="username">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input class="form-control" type="password" name="password">
</div>
<div class="form-group">
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox"> Remember Password</label>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block" name="login_user">Login</button>
</form>
<div class="text-center">
<a class="d-block small mt-3" href="register.php">Register an Account</a>
<!-- <a class="d-block small" href="forgot-password.php">Forgot Password?</a>-->
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
</body>
</html>
Así es como aparece el formulario de acceso después de las modificaciones:
– Una página de inicio de sesión con campos para el nombre de usuario y la contraseña, una casilla para recordar la contraseña y botones para iniciar sesión o crear una cuenta.
Paso 2: Configurar la conexión a la base de datos
Puedes acceder fácilmente a tu conexión de base de datos en la Plataforma Cloudways, como se muestra a continuación.
- Accede a la Plataforma Cloudways
- Ve a Servidores → Gestión de Servidores
- Pulsa en Aplicaciones
– Una página de gestión de servidores que muestra una lista de servidores con información como el tipo de servidor, la capacidad de memoria, la dirección IP y la ubicación, junto con las acciones que puedes llevar a cabo.
- Ve a Aplicaciones → Gestión de aplicaciones
- Ve a Detalles de acceso y haz clic en URL de aplicación
– Una página de gestión de la aplicación que muestra «Detalles de acceso» para la configuración de la base de datos, incluidos los campos de la base de datos, junto con un botón para abrir el gestor de la base de datos.
Tabla de usuarios
Utiliza las siguientes consultas SQL para crear las tablas:
CREATE TABLE `users` ( `id` int(11) NOT NULL, `username` varchar(100) NOT NULL, `email` varchar(100) NOT NULL, `password` varchar(100) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;Products tableCREATE TABLE `products` ( `product_id` int(22) NOT NULL, `product_name` varchar(22) NOT NULL, `product_price` int(22) NOT NULL, `product_cat` varchar(22) NOT NULL, `product_details` varchar(22) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; Sales tableCREATE TABLE `sales_stats` ( `id` int(22) NOT NULL, `sales` int(22) NOT NULL, `month` varchar(25) NOT NULL, `pending_orders` int(55) NOT NULL, `revenue` int(55) NOT NULL, `Vistors` int(55) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Tabla de productos
CREATE TABLE `products` ( `product_id` int(22) NOT NULL, `product_name` varchar(22) NOT NULL, `product_price` int(22) NOT NULL, `product_cat` varchar(22) NOT NULL, `product_details` varchar(22) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Tabla de ventas
CREATE TABLE `sales_stats` ( `id` int(22) NOT NULL, `sales` int(22) NOT NULL, `month` varchar(25) NOT NULL, `pending_orders` int(55) NOT NULL, `revenue` int(55) NOT NULL, `Vistors` int(55) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Ve al Gestor de Bases de Datos en Cloudways. Busca el nombre de la base de datos y otra información. A continuación, crea un nuevo archivo llamado server.php y copia en él este código.
<?php
session_start();
// initializing variables
$username = "";
$email = "";
$errors = array();
// connect to the database
$db = mysqli_connect('localhost', 'root', '', 'registration');
Inscripción
// REGISTER USER
if (isset($_POST['reg_user'])) {
// Receive all input values from the form
$username = mysqli_real_escape_string($db, $_POST['username']);
$email = mysqli_real_escape_string($db, $_POST['email']);
$password_1 = mysqli_real_escape_string($db, $_POST['password_1']);
$password_2 = mysqli_real_escape_string($db, $_POST['password_2']);
// Form validation: ensure that the form is correctly filled
// by adding (array_push()) corresponding error unto $errors array
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");
}
// First check the database to make sure
// a user does not already exist with the same username and/or email
$user_check_query = "SELECT * FROM users WHERE username='$username' OR email='$email' LIMIT 1";
$result = mysqli_query($db, $user_check_query);
$user = mysqli_fetch_assoc($result);
if ($user) { // If user exists
if ($user['username'] === $username) {
array_push($errors, "Username already exists");
}
if ($user['email'] === $email) {
array_push($errors, "Email already exists");
}
}
// Finally, 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
$query = "INSERT INTO users(username, email, password) VALUES('$username', '$email', '$password')";
mysqli_query($db, $query);
$_SESSION['username'] = $username;
$_SESSION['success'] = "You are now logged in";
header('location: login.php');
}
}
Iniciar sesión
// LOGIN USER
if (isset($_POST['login_user'])) {
$username = mysqli_real_escape_string($db, $_POST['username']);
$password = mysqli_real_escape_string($db, $_POST['password']);
if (empty($username)) {
array_push($errors, "Username is required");
}
if (empty($password)) {
array_push($errors, "Password is required");
}
if (count($errors) == 0) {
$password = md5($password);
$query = "SELECT * FROM users WHERE username='$username' AND password='$password'";
$results = mysqli_query($db, $query);
if (mysqli_num_rows($results) == 1) {
$_SESSION['username'] = $username;
$_SESSION['success'] = "You are now logged in";
header('location: index.php');
}else {
array_push($errors, "Wrong username/password combination");
}
}
}?>
Para mostrar los errores, crea un nuevo archivo llamado errores.php y copia este código en él.
<?php if (count($errors) > 0) : ?> <div class="error"> <?php foreach ($errors as $error) : ?> <p><?php echo $error ?></p> <?php endforeach ?> </div> <?php endif ?>
Paso 3: Crear la página de producto
A continuación, crea una nueva página llamada product.php y copia este código en ella.
<?php
include('pserver.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin - Start Bootstrap Template</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<link href="css/sb-admin.css" rel="stylesheet">
</head>
<body class="fixed-nav sticky-footer bg-dark" id="page-top">
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<a class="navbar-brand" href="index.php">Start Bootstrap</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav navbar-sidenav" id="exampleAccordion">
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Dashboard">
<a class="nav-link" href="index.php">
<i class="fa fa-fw fa-dashboard"></i>
<span class="nav-link-text">Dashboard</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Charts">
<a class="nav-link" href="charts.html">
<i class="fa fa-check-square"></i>
<span class="nav-link-text">Create Products</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Charts">
<a class="nav-link" href="register.php">
<i class="fa fas fa-user"></i>
<span class="nav-link-text">Register Users</span>
</a>
</li>
</ul>
<ul class="navbar-nav sidenav-toggler">
<li class="nav-item">
<a class="nav-link text-center" id="sidenavToggler">
<i class="fa fa-fw fa-angle-left"></i>
</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle mr-lg-2" id="messagesDropdown" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-envelope"></i>
<span class="d-lg-none">Messages
<span class="badge badge-pill badge-primary">12 New</span>
</span>
<span class="indicator text-primary d-none d-lg-block">
<i class="fa fa-fw fa-circle"></i>
</span>
</a>
<div class="dropdown-menu" aria-labelledby="messagesDropdown">
<h6 class="dropdown-header">New Messages:</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<strong>David Miller</strong>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">Hey there! This new version of SB Admin is pretty awesome! These messages clip off when they reach the end of the box so they don't overflow over to the sides!</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<strong>Jane Smith</strong>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">I was wondering if you could meet for an appointment at 3:00 instead of 4:00. Thanks!</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<strong>John Doe</strong>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">I've sent the final files over to you for review. When you're able to sign off of them let me know and we can discuss distribution.</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item small" href="#">View all messages</a>
</div>
</li>
<li class="nav-item">
<form class="form-inline my-2 my-lg-0 mr-lg-2">
<div class="input-group">
<input class="form-control" type="text" placeholder="Search for...">
<span class="input-group-append">
<button class="btn btn-primary" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="modal" data-target="#exampleModal">
<i class="fa fa-fw fa-sign-out"></i>Logout</a>
</li>
</ul>
</div>
</nav>
<div class="content-wrapper">
<div class="container-fluid">
<!-- Breadcrumbs-->
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="index.html">Dashboard</a>
</li>
<li class="breadcrumb-item active">Product Page</li>
</ol>
<div class="row">
<div class="col-12">
<h1>Create Product</h1>
</div>
<div class="col-md-8">
<form method="post" action="product.php">
<div class="form-group">
<label>Product Name</label>
<input type="text" class="form-control" name="pname" required>
</div>
<div class="form-group">
<label>Product Price</label>
<input type="text" class="form-control" name="price" required>
</div>
<div class="form-group">
<label>Product Category</label>
<input type="text" class="form-control" name="pcat" required>
</div>
<div class="form-group">
<label>Product Details</label>
<textarea class="form-control" name="pdetails" required></textarea>
</div>
<button type="submit" class="btn btn-primary" name="reg_p">Submit</button>
</form>
</div>
</div>
</div>
<!-- /.container-fluid-->
<!-- /.content-wrapper-->
<footer class="sticky-footer">
<div class="container">
<div class="text-center">
<small>Copyright © Your Website 2018</small>
</div>
</div>
</footer>
<!-- Scroll to Top Button-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fa fa-angle-up"></i>
</a>
<!-- Logout Modal-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="document" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
<a class="btn btn-primary" href="login.php">Logout</a>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="js/sb-admin.min.js"></script>
</div>
</body>
</html>
Paso 4: Añadir productos a la base de datos
A continuación, crearé un nuevo archivo llamado pserver.php en la carpeta principal y copiaré este código en él.
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "registration";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
if (isset($_POST['reg_p'])) {
// Receive all input values from the form
$pname = mysqli_real_escape_string($conn, $_POST['pname']);
$price = mysqli_real_escape_string($conn, $_POST['pirce']); // Note: There might be a typo here, should it be 'price'?
$pcat = mysqli_real_escape_string($conn, $_POST['pcat']);
$product_details = mysqli_real_escape_string($conn, $_POST['pdetails']);
$sql = "INSERT INTO products (product_name, product_price, product_cat, product_details)
VALUES ('$pname', '$price', '$pcat', '$product_details')";
if ($conn->query($sql) === TRUE) {
echo "alert('New record created successfully')";
} else {
echo "Error: " . $sql . "<br>" . $conn->error;
}
}
$conn->close();
?>
Paso 5: Visualizar los datos
Necesito llenar la tabla de datos de Bootstrap con información de la base de datos. Conectaré la tabla de datos a la base de datos.
Aquí tienes el código para rellenar la tabla de datos de Bootstrap. Actualicemos el código de la tabla con este código:
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>Name of Product</th>
<th>Price of Product</th>
<th>Product Category</th>
<th>Product Details</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Name of Product</th>
<th>Price of Product</th>
<th>Product Category</th>
<th>Product Details</th>
</tr>
</tfoot>
<tbody>
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "registration";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
$sql = 'SELECT * FROM products';
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
// Output data of each row
while ($row = mysqli_fetch_assoc($result)) {
?>
<tr>
<th><?php echo $row['product_id']; ?></th>
<td><?php echo htmlspecialchars($row['product_name']); ?></td>
<td><?php echo htmlspecialchars($row['product_price']); ?></td>
<td><?php echo htmlspecialchars($row['product_cat']); ?></td>
<td><?php echo htmlspecialchars($row['product_details']); ?></td>
</tr>
<?php
}
} else {
echo '<tr><td colspan="5">0 results</td></tr>';
}
$conn->close();
?>
</tbody>
</table>
</div>
Este es el aspecto de la tabla después de utilizar el código anterior:
A continuación, utilizaré los datos de la base de datos para crear un gráfico de líneas en el panel de administración PHP.
– Un panel de control que muestra información como descargas, beneficios, clientes y canales, junto con gráficos de desglose de ingresos y segmentos, y opciones para ver informes más detallados.
Como puedes ver, la parte superior del panel de control tiene cuatro tarjetas que muestran los visitantes mensuales, los ingresos, los nuevos pedidos y los nuevos tickets. Los datos de estas tarjetas proceden de la base de datos mediante una simple consulta SELECT.
¿Construir un panel de control PHP?
Comparte tus plantillas Bootstrap y tus hacks de interfaz de usuario con los demás en la Comunidad Reddit de Cloudways.
Paso 6: Configurar el Panel de Control
Aquí tienes el código completo de la vista del panel de control que debes poner en index.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>SB Admin - Start Bootstrap Template</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom fonts for this template -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Page level plugin CSS -->
<link href="vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/sb-admin.css" rel="stylesheet">
</head>
<body class="fixed-nav sticky-footer bg-dark" id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<a class="navbar-brand" href="index.php">Start Bootstrap</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav navbar-sidenav" id="exampleAccordion">
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Dashboard">
<a class="nav-link" href="index.php">
<i class="fa fa-fw fa-dashboard"></i>
<span class="nav-link-text">Dashboard</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Create Product">
<a class="nav-link" href="product.php">
<i class="fa fa-check-square"></i>
<span class="nav-link-text">Create Product</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Register Users">
<a class="nav-link" href="register.php">
<i class="fa fas fa-user"></i>
<span class="nav-link-text">Register Users</span>
</a>
</li>
</ul>
<ul class="navbar-nav sidenav-toggler">
<li class="nav-item">
<a class="nav-link text-center" id="sidenavToggler">
<i class="fa fa-fw fa-angle-left"></i>
</a>
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle mr-lg-2" id="messagesDropdown" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-fw fa-envelope"></i>
<span class="d-lg-none">Messages
<span class="badge badge-pill badge-primary">12 New</span>
</span>
<span class="indicator text-primary d-none d-lg-block">
<i class="fa fa-fw fa-circle"></i>
</span>
</a>
<div class="dropdown-menu" aria-labelledby="messagesDropdown">
<h6 class="dropdown-header">New Messages:</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<strong>David Miller</strong>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">Hey there! This new version of SB Admin is pretty awesome! These messages clip off when they reach the end of the box so they don't overflow over to the sides!</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<strong>Jane Smith</strong>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">I was wondering if you could meet for an appointment at 3:00 instead of 4:00. Thanks!</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<strong>John Doe</strong>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">I've sent the final files over to you for review. When you're able to sign off of them let me know and we can discuss distribution.</div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item small" href="#">View all messages</a>
</div>
</li>
<li class="nav-item">
<form class="form-inline my-2 my-lg-0 mr-lg-2">
<div class="input-group">
<input class="form-control" type="text" placeholder="Search for...">
<span class="input-group-append">
<button class="btn btn-primary" type="button">
<i class="fa fa-search"></i>
</button>
</span>
</div>
</form>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="modal" data-target="#exampleModal">
<i class="fa fa-fw fa-sign-out"></i>Logout
</a>
</li>
</ul>
</div>
</nav>
<div class="content-wrapper">
<div class="container-fluid">
<!-- Breadcrumbs-->
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="#">Dashboard</a>
</li>
<li class="breadcrumb-item active">My Dashboard</li>
</ol>
<!-- Icon Cards-->
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "registration";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
$sql = "SELECT * from sales_stats WHERE month='Mar' ";
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
?>
<div class="row">
<div class="col-xl-3 col-sm-6 mb-3">
<div class="card text-white bg-primary o-hidden h-100">
<div class="card-body">
<div class="card-body-icon">
<i class="fa fa-fw fa-comments"></i>
</div>
<div class="mr-5"><?php echo $row['Visitors']; ?> Visitors</div>
</div>
<a class="card-footer text-white clearfix small z-1" href="#">
<span class="float-left">View Details</span>
<span class="float-right">
<i class="fa fa-angle-right"></i>
</span>
</a>
</div>
</div>
<?php
}
} else {
echo '0 results';
}
$conn->close();
?>
<!-- Example DataTables Card-->
<div class="card mb-3">
<div class="card-header">
<i class="fa fa-table"></i> Data Table Example
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>ID</th>
<th>Name of Product</th>
<th>Price of Product</th>
<th>Product Category</th>
<th>Product Details</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Name of Product</th>
<th>Price of Product</th>
<th>Product Category</th>
<th>Product Details</th>
</tr>
</tfoot>
<tbody>
<?php
$sql = 'SELECT * from products';
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
?>
<tr>
<th><?php echo $row['product_id']; ?></th>
<td><?php echo $row['product_name']; ?></td>
<td><?php echo $row['product_price']; ?></td>
<td><?php echo $row['product_cat']; ?></td>
<td><?php echo $row['product_details']; ?></td>
</tr>
<?php
}
} else {
echo '0 results';
}
?>
</tbody>
</
Plantillas Bootstrap para el panel de control de administración
Aquí tienes las mejores plantillas gratuitas de panel de control de administración de Bootstrap, cada una de las cuales ofrece algo diferente. Elige la más adecuada para tu proyecto.
1. AdminLTE
– Fuente: AdminLTE
AdminLTE es una de las plantillas gratuitas de administración Bootstrap más populares que existen. Su diseño limpio y adaptable la hace ideal tanto para proyectos pequeños como grandes. La interfaz es intuitiva y permite a los desarrolladores configurar rápidamente un panel de administración con un aspecto elegante.
Lo que diferencia a AdminLTE es su amplia biblioteca de componentes reutilizables, como tablas, gráficos y formularios. Es compatible con múltiples plugins, lo que hace que la personalización sea perfecta. La plantilla es altamente responsive, lo que garantiza su funcionamiento en todos los dispositivos.
Características
- Múltiples pieles prediseñadas
- Tablas y gráficos interactivos
- Bien documentado y fácil de personalizar
Ventajas e inconvenientes
✓ Alta capacidad de respuesta en todos los dispositivos
✓ Gran colección de componentes reutilizables
✗ Personalización avanzada limitada sin extensiones de pago
2. SB Admin 2
– Fuente: SB Admin 2
SB Admin 2 es una plantilla de panel de administración moderna y gratuita basada en Bootstrap 4. Su diseño minimalista se centra en la funcionalidad a la vez que garantiza una experiencia rápida y ligera. Su diseño limpio hace que la navegación sea fluida y fácil de usar.
La plantilla incluye una serie de componentes de interfaz de usuario como botones, tarjetas y formularios que se pueden adaptar fácilmente. También integra iconos FontAwesome y utilidades Bootstrap personalizadas para mejorar las opciones de estilo. SB Admin 2 es perfecta para crear paneles de administración básicos a intermedios.
Características
- Iconos FontAwesome integrados
- Utilidades Bootstrap personalizadas para ampliar el estilo
- Diseño minimalista para tiempos de carga más rápidos
Ventajas e inconvenientes
✓ Ligero y de carga rápida
✓ Fácil integración con los iconos de FontAwesome
✗ Widgets «out-of-the-box» limitados
3. CoreUI
– Fuente: CoreUI
CoreUI es una plantilla de panel de control de administración completa y gratuita que ofrece mucho más que una configuración básica de Bootstrap. Diseñada pensando en los desarrolladores, CoreUI es rica en funciones y proporciona una base sólida para construir interfaces de administración complejas. Es compatible con múltiples frameworks como Vue.js, React y Angular.
Esta plantilla destaca por su amplia gama de componentes preconstruidos, incluidas varias bibliotecas de gráficos y formularios detallados. La flexibilidad que ofrece CoreUI la convierte en la opción preferida de los desarrolladores que buscan implementar cuadros de mando en aplicaciones web más avanzadas.
Características
- Compatibilidad con Vue.js, Angular y React
- Formularios detallados y múltiples opciones de gráficos
- Compatibilidad con múltiples marcos
Ventajas e inconvenientes
Soporte multi-framework (Vue, Angular, React)
✓ Numerosas opciones de personalización
✗ Ligeramente complejo para principiantes
4. Matriz Admin
– Fuente: Matrix Admin
Matrix Admin ofrece un enfoque directo y sencillo de los paneles de control de administración. Tiene un diseño sencillo y fácil de navegar, por lo que es adecuada para proyectos en los que la simplicidad es clave. La plantilla incluye varios widgets básicos y componentes de interfaz de usuario, que proporcionan una base sólida para un panel de control funcional.
Matrix Admin es perfecta para desarrolladores que buscan una plantilla ligera que no abrume con funciones innecesarias. Incluye elementos de formulario básicos, herramientas de validación y tablas sencillas, lo que la convierte en una opción excelente para interfaces de backend más simples.
Características
- Widgets sencillos y herramientas de validación de formularios
- Diseño ligero y fácil de navegar
- Tablas básicas con funciones de clasificación y filtrado
Ventajas e inconvenientes
✓ Ligero y fácil de montar
✓ Bueno para backends sencillos
✗ Opciones de personalización limitadas
5. Gentelella
– Fuente: Gentelella
Gentelella es una elegante plantilla de administración gratuita de Bootstrap con un diseño flexible y muchas funciones para sistemas backend avanzados. Su diseño moderno y bien estructurado la hace ideal para proyectos a gran escala. Gentelella proporciona múltiples plugins para gráficos, tablas de datos y calendarios, garantizando que los desarrolladores tengan las herramientas que necesitan para crear cuadros de mando robustos.
Esta plantilla destaca por sus paneles personalizables y plugins avanzados, que la hacen muy adaptable. Gentelella está diseñada para manejar grandes conjuntos de datos con eficacia, ofreciendo tablas e informes detallados que son perfectos para proyectos basados en datos.
Características
- Múltiples plugins de gráficos y calendarios
- Tablas de datos avanzadas para grandes conjuntos de datos
- Paneles personalizables con diseños flexibles
Ventajas e inconvenientes
✓ Ideal para manejar grandes conjuntos de datos
✓ Incluye herramientas avanzadas de visualización de datos
✗ Puede resultar abrumador para proyectos pequeños
Aloja sitios web PHP con facilidad [A partir de 11 $ de crédito].
- Puesta en escena gratuita
- Copia de seguridad gratuita
- PHP 8.3
- Sitios web ilimitados
Resumen
Crear un panel de control de administración PHP con Bootstrap 5 puede facilitarte el desarrollo web y mejorar la experiencia de tus usuarios con tus aplicaciones. Pero las opciones de diseño que elijas pueden afectar al funcionamiento de tu panel de control, a su facilidad de mantenimiento y a su crecimiento.
Aprendiendo y mejorando tus habilidades, puedes crear grandes soluciones que encantarán a tus usuarios. También puedes utilizar una API para crear esta aplicación sin mezclar código HTML y PHP. La API añadirá u obtendrá datos de la base de datos. Puedes utilizar el alojamiento web PHP de Cloudways para utilizar fácilmente Bootstrap con una aplicación PHP.
P: ¿Es Bootstrap un CSS?
R: Bootstrap no es sólo un CSS. Es un marco de trabajo de código abierto que incluye CSS y JavaScript para ayudar a crear rápidamente sitios web con capacidad de respuesta y orientados a dispositivos móviles. Proporciona estilos predefinidos para tipografía, formularios, botones y mucho más, facilitando a los desarrolladores la creación de interfaces web coherentes y fáciles de usar.
P: ¿Qué es un panel de control en PHP?
R: En PHP, un panel de control es una interfaz de usuario diseñada para mostrar información y datos esenciales de forma clara. Agrega y organiza los datos en un formato fácil de leer, a menudo utilizado para la supervisión y el análisis, haciendo que los usuarios puedan ver las métricas clave y las actualizaciones de un vistazo.
P: ¿Es mejor Bootstrap o PHP?
R: Bootstrap y PHP tienen propósitos diferentes, por lo que compararlos directamente no es útil. Bootstrap es un marco de trabajo de front-end que se utiliza para diseñar interfaces web responsivas, mientras que PHP es un lenguaje de programación de back-end para la funcionalidad del lado del servidor. Pueden trabajar juntos en el desarrollo web para crear sitios web funcionales y atractivos.
P: ¿Cómo crear un panel de administración en Bootstrap?
A. Para crear un panel de control de administración con Bootstrap, empieza utilizando el diseño de cuadrícula adaptable para organizar secciones como la navegación, la barra lateral y el contenido principal. Incluye componentes como tablas, formularios y tarjetas para mostrar datos. Utiliza los elementos de interfaz de usuario integrados en Bootstrap, como botones, alertas y modales para la interactividad. Para funciones avanzadas, considera integrar bibliotecas como Chart.js para la visualización de datos. Esta configuración garantiza un diseño fácil de usar y sensible a los dispositivos móviles para una gestión sencilla de los datos.
P: ¿Puedo utilizar Bootstrap con PHP?
A. Sí, puedes utilizar Bootstrap con PHP. Bootstrap es un framework de front-end, mientras que PHP es un lenguaje de programación de back-end. Combinando ambos, puedes crear páginas web dinámicas y con capacidad de respuesta. PHP se encarga de la lógica del lado del servidor, mientras que Bootstrap garantiza que la interfaz de usuario sea atractiva y apta para móviles. Esta combinación te permite crear aplicaciones web robustas e interactivas.
P: ¿El uso de AdminLTE es gratuito?
A. Sí, AdminLTE es de uso gratuito. Es una plantilla de panel de control de código abierto y con capacidad de respuesta, creada con Bootstrap. Puedes utilizarla para proyectos personales y comerciales sin ningún coste de licencia. Sin embargo, asegúrate siempre de comprobar los términos específicos en su repositorio de GitHub para cualquier actualización o restricción potencial.
P: ¿Cómo integrar el panel de administración en Laravel?
A. Para integrar un panel de control de administración en Laravel, tienes un par de opciones. Puedes utilizar un paquete como Voyager o AdminLTE, o crear tu propio panel de control desde cero. Empieza por configurar Laravel e instalar los paquetes necesarios a través de Composer. A continuación, añade el HTML, CSS y JavaScript del panel de control a tus vistas de Laravel. Utiliza el enrutamiento y los controladores de Laravel para enlazar tu contenido dinámico, y tendrás un potente panel de administración en funcionamiento.
Start Growing with Cloudways Today.
Our Clients Love us because we never compromise on these
Mansoor Ahmed Khan
Llevo en el marketing de contenidos desde 2014, y todavía me entusiasma crear historias que resuenen con el público objetivo y generen resultados. En Cloudways by DigitalOcean (una empresa líder en alojamiento en la nube), dirijo un equipo de creadores de contenidos de ensueño. Juntos, aportamos ideas, escribimos y producimos contenidos increíbles en todos los canales: blogs, redes sociales, correos electrónicos, ¡lo que quieras! Puedes ponerte en contacto conmigo en [email protected].
