Principais conclusões:
- A criação de um painel de administração personalizado com PHP e Bootstrap simplifica a gestão de aplicações Web, facilitando tarefas como a monitorização do desempenho e a gestão de utilizadores.
- A combinação do tratamento de dados do PHP com as capacidades de design do Bootstrap permite-te criar um painel de controlo visualmente apelativo e de fácil utilização para uma administração eficiente da aplicação Web.
Muitas empresas têm dificuldade em gerir as suas aplicações Web. Sem um bom painel de controlo, tarefas como verificar o desempenho, gerir utilizadores e analisar dados podem ser difíceis e demorar muito tempo.
O PHP e o Bootstrap podem ajudar-te a criar um painel de controlo personalizado. O PHP pode tratar dados complexos e o Bootstrap torna o painel de controlo visualmente apelativo e fácil de utilizar em diferentes dispositivos.
Este blogue irá mostrar-te como construir um painel de administração PHP. Um painel de controlo bem concebido pode ajudar-te a trabalhar mais rapidamente, a simplificar processos e a obter informações úteis sobre a tua aplicação Web.
Cria aplicações Web dinâmicas com PHP e Bootstrap 5 na Cloudways
Potencia as tuas aplicações web com as últimas versões de PHP e Bootstrap num alojamento de alto desempenho que cumpre todos os requisitos de sistema.
O que é a integração do PHP Bootstrap?
PHP e Bootstrap são duas ferramentas importantes para a construção de sítios Web. O PHP é uma linguagem de programação que ajuda a criar páginas Web dinâmicas. Bootstrap é uma estrutura que fornece estilos e funcionalidades prontos a usar para criar sítios Web atractivos.
Quando combinados, o PHP e o Bootstrap criam uma forma poderosa de criar aplicações Web que são funcionais e visualmente apelativas. O PHP lida com a lógica do lado do servidor, enquanto o Bootstrap cuida do design do front-end.
Benefícios de usar Bootstrap com PHP
PHP e Bootstrap juntos tornam a construção de sites mais rápida e fácil. Os programadores podem concentrar-se nas principais funcionalidades do Web site, enquanto o Bootstrap trata do design.
Utilizar PHP e Bootstrap tem muitas vantagens.
✅ O Bootstrap oferece estilos e funcionalidades prontos a usar.
Assegura que os sítios Web têm bom aspeto em todos os dispositivos.
Ajuda os programadores a escrever código mais organizado.
Facilita a criação de sítios Web atraentes e interactivos.
Visão geral de um painel de administração
Um painel de administração é uma IU da Web que permite aos administradores monitorizar o desempenho da aplicação e gerir definições. Fornece estatísticas vitais, como o envolvimento dos utilizadores, as vendas e a funcionalidade do sítio Web. Além disso, permite que os administradores ajustem definições inacessíveis aos utilizadores normais.
Os painéis de administração facilitam diferentes funções, incluindo:
- Gere contas de utilizador criando, editando ou eliminando-as.
- Modifica o conteúdo do sítio Web.
- Visualiza métricas sobre o número de visitantes, a duração da sessão e as taxas de compra.
- Personalizar o aspeto e o funcionamento do sítio Web.
Requisitos para PHP e Bootstrap 5
Neste tutorial, presumo que já tenhas um site baseado em PHP. Aqui está o que vais precisar:
- PHP 8 ou superior
- MariaDB 10 ou superior
- Bootstrap 5 ou superior
Criar um painel de administração com Bootstrap
Vou criar uma aplicação simples para gerir as vendas. Terá um painel de controlo onde os utilizadores podem ver informações de vendas, atualizar dados de produtos e adicionar novos produtos. Os utilizadores também podem inscrever-se e iniciar sessão no painel de controlo.
Passo 1: Cria os formulários
O modelo do painel de administração tem muitos formulários diferentes, incluindo registo e início de sessão. Vou utilizar HTML5 e código PHP personalizado para garantir que as informações introduzidas pelos utilizadores estão corretas.
Criar um formulário de registo
Os formulários de registo de utilizadores já estão disponíveis. Vou alterar os nomes dos campos e atualizar o método e a ação utilizando o seguinte 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>
Vê como aparece o formulário de registo após as modificações:
– Uma página de registo com campos para nome de utilizador, endereço de e-mail, palavra-passe, confirmar palavra-passe e botões para registar ou ir para a página de início de sessão.
Cria um formulário de início de sessão
Em seguida, utiliza o seguinte código para o formulário de início de sessão:
<?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>
Vê como aparece o formulário de início de sessão após as modificações:
– Uma página de início de sessão com campos para o nome de utilizador e a palavra-passe, uma caixa de verificação para memorizar a palavra-passe e botões para iniciar sessão ou criar uma conta.
Passo 2: Configura a ligação à base de dados
É possível acessar facilmente a conexão do banco de dados na Plataforma Cloudways, conforme mostrado abaixo.
- Faz login na plataforma Cloudways
- Vai a Servidores → Gestão de Servidores
- Clica na opção Aplicações
– Uma página de gestão de servidores que mostra uma lista de servidores com informações como o tipo de servidor, a capacidade de memória, o endereço IP e a localização, juntamente com as acções que podes tomar.
- Vai para Aplicações → Gestão de aplicações
- Vai a Detalhes de acesso e clica em URL da aplicação
– Uma página de gestão da aplicação que mostra “Detalhes de acesso” para as definições da base de dados, incluindo campos para a base de dados, juntamente com um botão para abrir o gestor da base de dados.
Tabela de utilizadores
Utiliza as seguintes consultas SQL para criar as tabelas:
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;
Tabela de produtos
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;
Tabela de vendas
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;
Vai para o Gerenciador de banco de dados na Cloudways. Encontra o nome da base de dados e outras informações. Em seguida, cria um novo arquivo chamado server.php e copia este código para ele.
<?php
session_start();
// initializing variables
$username = "";
$email = "";
$errors = array();
// connect to the database
$db = mysqli_connect('localhost', 'root', '', 'registration');
Registo
// 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');
}
}
Acede
// 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 os erros, cria um novo ficheiro chamado errors.php e copia este código para ele.
<?php if (count($errors) > 0) : ?> <div class="error"> <?php foreach ($errors as $error) : ?> <p><?php echo $error ?></p> <?php endforeach ?> </div> <?php endif ?>
Passo 3: Cria a página do produto
Depois, cria uma nova página chamada product.php e copia este código para ela.
<?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>
Passo 4: Adiciona produtos à base de dados
Em seguida, vou criar um novo ficheiro chamado pserver.php na pasta principal e copiar este código para ele.
<?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();
?>
Passo 5: Visualiza os dados
Preciso de preencher a tabela de dados do Bootstrap com informação da base de dados. Vou ligar a tabela de dados à base de dados.
Aqui tens o código para preencher a tabela de dados do Bootstrap. Vamos atualizar o código da tabela com 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>
Vê aqui o aspeto da tabela depois de utilizares o código acima:
Em seguida, utilizarei os dados da base de dados para criar um gráfico de linhas no painel de administração do PHP.
– Um painel de controlo que mostra informações como transferências, lucros, clientes e canais, juntamente com gráficos de repartição de receitas e segmentos, e opções para ver relatórios mais detalhados.
Como podes ver, a parte superior do painel tem quatro cartões que mostram os visitantes mensais, a receita, as novas encomendas e os novos bilhetes. Os dados para esses cartões vêm do banco de dados usando uma consulta SELECT simples.
Estás a construir um painel de controlo PHP?
Partilha os teus modelos Bootstrap e hacks UI com outros na Comunidade Cloudways Reddit.
Passo 6: Configura o painel de controlo
Aqui está o código completo para a vista do painel de controlo que tens de colocar em 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>
</
Modelos de painel de administração Bootstrap
Aqui estão os melhores modelos de painel de administração Bootstrap gratuitos, cada um oferecendo algo diferente. Escolhe o mais adequado para o teu projeto.
1. AdminLTE
– Fonte: AdminLTE
O AdminLTE é um dos modelos de administração Bootstrap gratuitos mais populares disponíveis. O seu design limpo e responsivo torna-o ideal para projectos pequenos e grandes. A interface é intuitiva e permite que os programadores configurem rapidamente um painel de administração com um aspeto elegante.
O que distingue o AdminLTE é a sua extensa biblioteca de componentes reutilizáveis, tais como tabelas, gráficos e formulários. Suporta vários plug-ins, tornando a personalização perfeita. O modelo é altamente reativo, garantindo que funciona em todos os dispositivos.
Caraterísticas
- Vários skins pré-desenhados
- Tabelas e gráficos interactivos
- Bem documentado e fácil de personalizar
Prós e contras
Responde bem em todos os dispositivos
Grande coleção de componentes reutilizáveis
Personalização avançada limitada sem extensões pagas
2. SB Admin 2
– Fonte: SB Admin 2
O SB Admin 2 é um modelo de painel de administração moderno e gratuito baseado no Bootstrap 4. O design minimalista centra-se na funcionalidade, garantindo uma experiência rápida e leve. O seu layout limpo torna a navegação suave e fácil de usar.
O modelo inclui uma gama de componentes de IU como botões, cartões e formulários que podem ser facilmente adaptados. Também integra ícones FontAwesome e utilitários Bootstrap personalizados para melhorar as opções de estilo. O SB Admin 2 é perfeito para criar painéis de administração básicos e intermédios.
Caraterísticas
- Ícones FontAwesome integrados
- Utilitários Bootstrap personalizados para um estilo alargado
- Design minimalista para um carregamento mais rápido
Prós e contras
Leve e de carregamento rápido
Integração fácil com ícones FontAwesome
Widgets limitados e prontos a utilizar
3. CoreUI
– Fonte: CoreUI
CoreUI é um modelo de painel de administração gratuito e abrangente que oferece muito mais do que apenas uma configuração Bootstrap básica. Concebido a pensar nos programadores, o CoreUI é rico em funcionalidades e fornece uma base sólida para a construção de interfaces de administração complexas. Vem com suporte para várias estruturas como Vue.js, React e Angular.
Este modelo destaca-se pela sua extensa gama de componentes pré-construídos, incluindo várias bibliotecas de gráficos e formulários detalhados. A flexibilidade que o CoreUI oferece torna-o uma escolha preferida para os programadores que procuram implementar dashboards em aplicações web mais avançadas.
Caraterísticas
- Suporte para Vue.js, Angular e React
- Formulários detalhados e várias opções de gráficos
- Compatibilidade com várias estruturas
Prós e contras
Suporte a várias estruturas (Vue, Angular, React)
Inúmeras opções de personalização
Um pouco complexo para principiantes
4. Administração da matriz
– Fonte: Matrix Admin
O Matrix Admin oferece uma abordagem direta e sem sentido aos painéis de administração. Tem um design simples que é fácil de navegar, tornando-o adequado para projectos em que a simplicidade é fundamental. O modelo inclui vários widgets básicos e componentes de IU, fornecendo uma base sólida para um painel de controlo funcional.
O Matrix Admin é perfeito para programadores que procuram um modelo leve que não sobrecarregue com funcionalidades desnecessárias. Inclui elementos de formulário básicos, ferramentas de validação e tabelas simples, o que o torna uma excelente escolha para interfaces de back-end mais simples.
Caraterísticas
- Widgets simples e ferramentas de validação de formulários
- Design leve e fácil de navegar
- Tabelas básicas com funcionalidade de ordenação e filtragem
Prós e contras
Leve e fácil de montar
Bom para backends simples
Opções de personalização limitadas
5. Gentelella
– Fonte: Gentelella
Gentelella é um elegante modelo de administração Bootstrap gratuito com um layout flexível e muitas funcionalidades para sistemas de backend avançados. O seu design moderno e bem estruturado torna-o ideal para projectos de grande escala. O Gentelella fornece vários plug-ins para gráficos, tabelas de dados e calendários, garantindo que os programadores têm as ferramentas necessárias para criar painéis de controlo robustos.
Este modelo destaca-se pelos seus painéis personalizáveis e plug-ins avançados, tornando-o altamente adaptável. O Gentelella foi concebido para lidar com grandes conjuntos de dados de forma eficiente, oferecendo tabelas e relatórios detalhados que são perfeitos para projectos baseados em dados.
Caraterísticas
- Vários plug-ins de gráficos e calendários
- Tabelas de dados avançadas para grandes conjuntos de dados
- Painéis personalizáveis com layouts flexíveis
Prós e contras
Ideal para lidar com grandes conjuntos de dados
Inclui ferramentas avançadas de visualização de dados
Pode parecer esmagador para projectos mais pequenos
Aloja sites PHP com facilidade [A partir de $11 de crédito]
- Preparação gratuita
- Backup gratuito
- PHP 8.3
- Sites ilimitados
Resumo
Construir um painel de administração PHP com Bootstrap 5 pode facilitar o teu desenvolvimento web e melhorar a forma como os teus utilizadores experimentam as tuas aplicações. Mas as escolhas de design que fazes podem afetar o bom funcionamento do teu dashboard, a facilidade de manutenção e o seu crescimento.
Ao aprenderes e melhorares as tuas competências, podes criar soluções fantásticas que os teus utilizadores vão adorar. Também podes utilizar uma API para criar esta aplicação sem misturar código HTML e PHP. A API adiciona ou obtém dados da base de dados. Podes usar o alojamento web PHP da Cloudways para usar facilmente o Bootstrap com a aplicação PHP.
P: O Bootstrap é um CSS?
R: Bootstrap não é apenas um CSS. É uma estrutura de código aberto que inclui CSS e JavaScript para ajudar a criar rapidamente Web sites responsivos e com prioridade para dispositivos móveis. Fornece estilos pré-construídos para tipografia, formulários, botões e muito mais, facilitando aos programadores a criação de interfaces Web consistentes e fáceis de utilizar.
P: O que é um dashboard em PHP?
R: Em PHP, um dashboard é uma interface de utilizador concebida para apresentar informações e dados essenciais de forma clara. Agrega e organiza os dados num formato fácil de ler, frequentemente utilizado para monitorização e análise, tornando acessível aos utilizadores a visualização de métricas e actualizações importantes num relance.
P: É melhor usar Bootstrap ou PHP?
R: O Bootstrap e o PHP têm finalidades diferentes, pelo que compará-los diretamente não é útil. O Bootstrap é uma estrutura de front-end utilizada para conceber interfaces Web responsivas, enquanto o PHP é uma linguagem de programação de back-end para funcionalidades do lado do servidor. Eles podem trabalhar juntos no desenvolvimento da Web para criar sites funcionais e atraentes.
P: Como criar um painel de administração no Bootstrap?
A. Para criar um painel de administração com o Bootstrap, começa por utilizar o layout de grelha responsivo para organizar secções como a navegação, a barra lateral e o conteúdo principal. Inclui componentes como tabelas, formulários e cartões para apresentar dados. Utiliza os elementos de IU incorporados no Bootstrap, como botões, alertas e modais para interatividade. Para funcionalidades avançadas, considera a integração de bibliotecas como Chart.js para visualização de dados. Esta configuração garante um design de fácil utilização e de resposta móvel para uma gestão fácil dos dados.
P: Posso utilizar o Bootstrap com PHP?
A. Sim, podes utilizar o Bootstrap com PHP. O Bootstrap é uma estrutura de front-end, enquanto o PHP é uma linguagem de programação de back-end. Ao combinar os dois, podes criar páginas Web dinâmicas e responsivas. O PHP lida com a lógica do lado do servidor, enquanto o Bootstrap garante que a interface do utilizador é atractiva e compatível com dispositivos móveis. Esta combinação permite-te criar aplicações Web robustas e interactivas.
P: A utilização do AdminLTE é gratuita?
A. Sim, o AdminLTE é de utilização gratuita. É um modelo de painel de controlo de código aberto e responsivo construído com Bootstrap. Podes usá-lo para projectos pessoais e comerciais sem quaisquer taxas de licenciamento. No entanto, certifica-te sempre de verificar os termos específicos no seu repositório GitHub para quaisquer actualizações ou potenciais restrições.
P: Como integrar o painel de administração no Laravel?
A. Para integrar um dashboard de administração no Laravel, tens algumas opções. Podes usar um pacote como o Voyager ou AdminLTE, ou construir o teu próprio dashboard de raiz. Começa configurando o Laravel e instalando todos os pacotes necessários através do Composer. Em seguida, adiciona o HTML, CSS e JavaScript para o painel de controle às suas exibições do Laravel. Use o roteamento e os controladores do Laravel para vincular seu conteúdo dinâmico e terás um painel de administração poderoso em funcionamento.
Mansoor Ahmed Khan
Estou no marketing de conteúdo desde 2014 e ainda me divirto a criar histórias que ressoam com o público-alvo e geram resultados. Na Cloudways by DigitalOcean (uma empresa líder de alojamento na nuvem, aliás!), lidero uma equipa de sonho de criadores de conteúdos. Juntos, fazemos brainstorming, escrevemos e produzimos conteúdos fantásticos em todos os canais: blogues, redes sociais, e-mails, o que quiseres! Podes contactar-me em [email protected].
