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 inclui('server.php') ?>
<!DOCTYPE html>
<html lang="en">
<cabeça>
<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="">
<título>SB Admin - Modelo Start Bootstrap</title>
<!-- CSS do núcleo do Bootstrap-->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Tipos de letra personalizados para este modelo-->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Estilos personalizados para este modelo-->
<link href="css/sb-admin.css" rel="folha de estilos">
</head>
<body class="bg-dark">
<div class="contentor">
<div class="cartão cartão-registo mx-auto mt-5">
<div class="card-header">Registar uma conta</div>
<div class="card-body">
<form method="post" action="register.php">
<?php inclui('errors.php'); ?>
<div class="grupo-formulário">
<div class="form-row">
<div class="col-md-12">
<etiqueta for="exampleInputName">Nome de utilizador</label>
<input class="form-control" id="exampleInputName" type="text" name="username" value="" >
</div>
</div>
</div>
<div class="grupo-formulário">
<etiqueta for="exampleInputEmail1">Endereço de correio eletrónico</label>
<input class="form-control" id="exampleInputEmail1" type="email" aria-describedby="emailHelp" name="email" value="<?php echo $email; ?>" >
</div>
<div class="grupo-formulário">
<div class="form-row">
<div class="col-md-6">
<etiqueta for="exampleInputPassword1">Palavra-passe</label>
<input class="form-control" id="exampleInputPassword1" type="password" name="password_1" >
</div>
<div class="col-md-6">
<etiqueta for="exampleInputPassword1">Confirma a palavra-passe</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">Regista-te</button>
</form>
<div class="text-center">
<a class="d-block small mt-3" href="login.php">Página de início de sessão</a>
<!--- <a class="d-block small" href="esqueci-me da palavra-passe.html">Esqueceste-te da palavra-passe?</a>-->
</div>
</div>
</div>
</div>
<!-- Núcleo Bootstrap JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin do núcleo 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 inclui('server.php') ?>
<!DOCTYPE html>
<html lang="en">
<cabeça>
<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="">
<título>SB Admin - Modelo Start Bootstrap</title>
<!-- CSS do núcleo do Bootstrap-->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Tipos de letra personalizados para este modelo-->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Estilos personalizados para este modelo-->
<link href="css/sb-admin.css" rel="folha de estilos">
</head>
<body class="bg-dark">
<div class="contentor">
<div class="cartão cartão-login mx-auto mt-5">
<div class="card-header">Acede</div>
<div class="card-body">
<form method="post" action="login.php">
<?php inclui('errors.php'); ?>
<div class="grupo-formulário">
<etiqueta for="exampleInputEmail1">Nome de utilizador</label>
<input class="form-control" type="text" name="username">
</div>
<div class="grupo-formulário">
<etiqueta for="exampleInputPassword1">Palavra-passe</label>
<input class="form-control" type="password" name="password">
</div>
<div class="grupo-formulário">
<div class="form-check">
<etiqueta class="form-check-label">
<input class="form-check-input" type="checkbox"> Lembra-te da palavra-passe</label>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block" name="login_user">Acede</button>
</form>
<div class="text-center">
<a class="d-block small mt-3" href="register.php">Registar uma conta</a>
<!-- <a class="d-block small" href="esqueci-me da palavra-passe.php">Esqueceste-te da palavra-passe?</a>-->
</div>
</div>
</div>
</div>
<!-- Núcleo Bootstrap JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin do núcleo 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;Tabela de produtosCREATE TABLE `produtos` ( `product_id` int(22) NOT NULL, `nome_do_produto` 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 vendasCREATE TABLE `sales_stats` ( `id` int(22) NOT NULL, `sales` int(22) NOT NULL, `mês` varchar(25) NOT NULL, `ordens_pendentes` int(55) NOT NULL, `revenue` int(55) NOT NULL, `Vistores` int(55) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Tabela de produtos
CREATE TABLE `produtos` ( `product_id` int(22) NOT NULL, `nome_do_produto` 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, `mês` varchar(25) NOT NULL, `ordens_pendentes` int(55) NOT NULL, `revenue` int(55) NOT NULL, `Vistores` 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();
// inicializa as variáveis
Nome de utilizador = "";
$email = "";
$errors = array();
// liga-te à base de dados
$db = mysqli_connect('localhost', 'root', '', 'registration');
Registo
// REGISTA O UTILIZADOR
Se (isset($_POST['reg_user'])) {
// Recebe todos os valores de entrada do formulário
$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']);
// Validação do formulário: certifica-se de que o formulário está corretamente preenchido
// adicionando (array_push()) o erro correspondente ao array $errors
se (vazio($username)) {
array_push($errors, "O nome de utilizador é obrigatório");
}
se (vazio($email)) {
array_push($errors, "O e-mail é obrigatório");
}
se (vazio($password_1)) {
array_push($errors, "A palavra-passe é obrigatória");
}
se ($password_1 != $password_2) {
array_push($errors, "As duas palavras-passe não coincidem");
}
// Primeiro verifica a base de dados para ter a certeza que
// um utilizador não existe já com o mesmo nome de utilizador e/ou e-mail
$user_check_query = "SELECT * FROM users WHERE username='$username' OR email='$email' LIMIT 1";
$resultado = mysqli_query($db, $user_check_query);
$user = mysqli_fetch_assoc($result);
if ($user) { // Se o utilizador existir
se ($user['username'] === $username) {
array_push($errors, "O nome de utilizador já existe");
}
se ($user['email'] === $email) {
array_push($errors, "O e-mail já existe");
}
}
// Finalmente, regista o utilizador se não houver erros no formulário
se (count($errors) == 0) {
$password = md5($password_1); // Encripta a palavra-passe antes de a guardares na base de dados
$query = "INSERT INTO users(username, email, password) VALUES('$username', '$email', '$password')";
mysqli_query($db, $query);
$_SESSION['nome de utilizador'] = $nome de utilizador;
$_SESSION['success'] = "Tens agora a sessão iniciada";
cabeçalho('localização: login.php');
}
}
Acede
// INICIA A SESSÃO DE UTILIZADOR
Se (isset($_POST['login_user'])) {
$username = mysqli_real_escape_string($db, $_POST['username']);
$password = mysqli_real_escape_string($db, $_POST['password']);
se (vazio($username)) {
array_push($errors, "O nome de utilizador é obrigatório");
}
se (empty($password)) {
array_push($errors, "A palavra-passe é obrigatória");
}
se (count($errors) == 0) {
$password = md5($password);
$query = "SELECT * FROM users WHERE username='$username' AND password='$password'";
$results = mysqli_query($db, $query);
Se (mysqli_num_rows($results) == 1) {
$_SESSION['nome de utilizador'] = $nome de utilizador;
$_SESSION['success'] = "Tens agora a sessão iniciada";
cabeçalho('localização: index.php');
}else {
array_push($errors, "Combinação errada de nome de utilizador/palavra-passe");
}
}
}?>
Para mostrar os erros, cria um novo ficheiro chamado errors.php e copia este código para ele.
<?php se (count($errors) > 0) : ?> <div class="erro"> <?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
inclui('pserver.php');
?>
<!DOCTYPE html>
<html lang="en">
<cabeça>
<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="">
<título>SB Admin - Modelo Start Bootstrap</title>
<!-- CSS do núcleo do Bootstrap -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Fontes personalizadas para este modelo -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Estilos personalizados para este modelo -->
<link href="css/sb-admin.css" rel="folha de estilos">
</head>
<body class="fixed-nav sticky-footer bg-dark" id="page-top">
<!-- Navegação -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<a class="navbar-brand" href="index.php">Inicia o 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">Painel de controlo</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">Criar produtos</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">Registar utilizadores</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">Mensagens
<span class="distintivo distintivo-pílula distintivo-primário">12 Novo</span>
</span>
<span class="indicador texto-primário 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">Novas mensagens:</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<forte>David Miller</strong>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">Olha lá! Esta nova versão do SB Admin é espetacular! Estas mensagens são cortadas quando chegam ao fim da caixa para não transbordarem para os lados! </div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<forte>Jane Smith</strong>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">Gostaria de saber se te podes encontrar para uma consulta às 15:00 em vez das 16:00. Obrigado! </div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<forte>João Ninguém</strong>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">Enviei-te os ficheiros finais para revisão. Quando puderes assinar, avisa-me e podemos discutir a distribuição. </div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item small" href="#">Ver todas as mensagens</a>
</div>
</li>
<li class="nav-item">
<form class="form-inline my-2 my-lg-0 mr-lg-2">
<div class="grupo-entrada">
<input class="form-control" type="text" placeholder="Procura por...">
<span class="input-group-append">
<botão class="btn btn-primary" type="botão">
<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>Terminar sessão</a>
</li>
</ul>
</div>
</nav>
<div class="content-wrapper">
<div class="contentor-fluido">
<!-- Pão ralado-->
<ol class="breadcrumb">
<li class="item de navegação">
<a href="index.html">Painel de controlo</a>
</li>
<li class="item de navegação ativo">Página do produto</li>
</ol>
<div class="linha">
<div class="col-12">
<h1>Criar produto</h1>
</div>
<div class="col-md-8">
<form method="post" action="product.php">
<div class="grupo-formulário">
<etiqueta>Nome do produto</label>
<input type="text" class="form-control" name="pname" required>
</div>
<div class="grupo-formulário">
<etiqueta>Preço do produto</label>
<input type="text" class="form-control" name="price" required>
</div>
<div class="grupo-formulário">
<etiqueta>Categoria do produto</label>
<input type="text" class="form-control" name="pcat" required>
</div>
<div class="grupo-formulário">
<etiqueta>Detalhes do produto</label>
<textarea class="form-control" name="pdetails" required></textarea>
</div>
<button type="submit" class="btn btn-primary" name="reg_p">Submete</button>
</form>
</div>
</div>
</div>
<!-- /.contentor-fluido-->
<!-- /.content-wrapper-->
<rodapé class="sticky-footer">
<div class="contentor">
<div class="text-center">
<pequeno>Direitos de autor © O teu sítio Web 2018</small>
</div>
</div>
</footer>
<!-- Desloca-te para o botão superior-->
<a class="scroll-to-top rounded" href="#page-top">
<i class="fa fa-angle-up"></i>
</a>
<!-- Sai do 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">Estás pronto para partir?</h5>
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">Seleciona "Sair" abaixo se estiveres pronto para terminar a tua sessão atual.</div>
<div class="modal-footer">
<button class="btn btn-secondary" type="button" data-dismiss="modal">Cancela</button>
<a class="btn btn-primary" href="login.php">Terminar sessão</a>
</div>
</div>
</div>
</div>
<!-- Núcleo Bootstrap JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin do núcleo JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Scripts personalizados para todas as páginas-->
<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";
Nome de utilizador = "root";
$password = "";
$dbname = "registration";
// Cria uma ligação
$conn = new mysqli($servername, $username, $password, $dbname);
// Verifica a ligação
se ($conn->connect_error) {
morre ("A ligação falhou: " . $conn- >liga_erro);
}
se (isset($_POST['reg_p'])) {
// Recebe todos os valores de entrada do formulário
$pname = mysqli_real_escape_string($conn, $_POST['pname']);
$price = mysqli_real_escape_string($conn, $_POST['pirce']); // Nota: Pode haver um erro de digitação aqui, deveria ser 'price'?
$pcat = mysqli_real_escape_string($conn, $_POST['pcat']);
$product_details = mysqli_real_escape_string($conn, $_POST['pdetails']);
$sql = "INSERIR EM produtos (nome_do_produto, preço_do_produto, gato_do_produto, detalhes_do_produto)
VALUES ('$pname', '$price', '$pcat', '$product_details')";
se ($conn->consulta($sql) === TRUE) {
echo "alert('Novo registo criado com sucesso')";
} else {
echo "Erro: " . $sql . "
" . $conn- >erro;
}
}
$conn->fecha();
?>
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">
<tabela class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<tead>
<tr>
<th>ID</th>
<th>Nome do produto</th>
<th>Preço do produto</th>
<th>Categoria do produto</th>
<th>Detalhes do produto</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Nome do produto</th>
<th>Preço do produto</th>
<th>Categoria do produto</th>
<th>Detalhes do produto</th>
</tr>
</tfoot>
<corpo>
<?php
$servername = "localhost";
Nome de utilizador = "root";
$password = "";
$dbname = "registration";
// Cria uma ligação
$conn = new mysqli($servername, $username, $password, $dbname);
// Verifica a ligação
se ($conn->liga_erro) {
morre ("A ligação falhou: " . $conn- >liga_erro);
}
$sql = 'SELECT * FROM products';
$resultado = mysqli_query($conn, $sql);
se (mysqli_num_rows($result) > 0) {
// Emite os dados de cada linha
enquanto ($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 {
ecoa '<tr><td colspan="5">0 resultados</td></tr>';
}
$conn->fecha();
?>
</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">
<cabeça>
<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="">
<título>SB Admin - Modelo Start Bootstrap</title>
<!-- CSS do núcleo do Bootstrap -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Fontes personalizadas para este modelo -->
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- CSS do plugin ao nível da página -->
<link href="vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet">
<!-- Estilos personalizados para este modelo -->
<link href="css/sb-admin.css" rel="folha de estilos">
</head>
<body class="fixed-nav sticky-footer bg-dark" id="page-top">
<!-- Navegação-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<a class="navbar-brand" href="index.php">Inicia o 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">Painel de controlo</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Criar produto">
<a class="nav-link" href="produto.php">
<i class="fa fa-check-square"></i>
<span class="nav-link-text">Criar produto</span>
</a>
</li>
<li class="nav-item" data-toggle="tooltip" data-placement="right" title="Registar utilizadores">
<a class="nav-link" href="register.php">
<i class="fa fas fa-user"></i>
<span class="nav-link-text">Registar utilizadores</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">Mensagens
<span class="distintivo distintivo-pílula distintivo-primário">12 Novo</span>
</span>
<span class="indicador texto-primário 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">Novas mensagens:</h6>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<forte>David Miller</strong>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">Ouve lá! Esta nova versão do SB Admin é espetacular! Estas mensagens são cortadas quando chegam ao fim da caixa para não transbordarem para os lados! </div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<forte>Jane Smith</strong>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">Gostaria de saber se te podes encontrar para uma consulta às 15:00 em vez das 16:00. Obrigado! </div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">
<forte>João Ninguém</strong>
<span class="small float-right text-muted">11:21 AM</span>
<div class="dropdown-message small">Enviei-te os ficheiros finais para revisão. Quando puderes assiná-los, avisa-me e podemos discutir a distribuição. </div>
</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item small" href="#">Ver todas as mensagens</a>
</div>
</li>
<li class="nav-item">
<form class="form-inline my-2 my-lg-0 mr-lg-2">
<div class="grupo-entrada">
<input class="form-control" type="text" placeholder="Procura por...">
<span class="input-group-append">
<botão class="btn btn-primary" type="botão">
<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>Terminar sessão
</a>
</li>
</ul>
</div>
</nav>
<div class="content-wrapper">
<div class="contentor-fluido">
<!-- Pão ralado-->
<ol class="breadcrumb">
<li class="item de navegação">
<a href="#">Painel de controlo</a>
</li>
<li class="item de navegação ativo">O meu painel de controlo</li>
</ol>
<Cartas de ícones>
<?php
$servername = "localhost";
Nome de utilizador = "root";
$password = "";
$dbname = "registration";
// Cria uma ligação
$conn = new mysqli($servername, $username, $password, $dbname);
$sql = "SELECT * from sales_stats WHERE month='Mar' ";
$resultado = mysqli_query($conn, $sql);
se (mysqli_num_rows($result) > 0) {
// dados de saída de cada linha
while($row = mysqli_fetch_assoc($result)) {
?>
<div class="linha">
<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="ícone do corpo do cartão">
<i class="fa fa-fw fa-comments"></i>
</div>
<div class="mr-5"><?php echo $row['Visitantes']; ?> Visitantes</div>
</div>
<a class="card-footer text-white clearfix small z-1" href="#">
<span class="float-left">Ver detalhes</span>
<span class="float-right">
<i class="fa fa-angle-right"></i>
</span>
</a>
</div>
</div>
<?php
}
} else {
ecoa '0 resultados';
}
$conn->fecha();
?>
<!-- Exemplo de cartão de tabelas de dados-->
<div class="cartão mb-3">
<div class="card-header">
<i class="fa fa-table"></i> Exemplo de tabela de dados
</div>
<div class="card-body">
<div class="table-responsive">
<tabela class="table table-bordered" id="dataTable" width="100%" cellspacing="0">
<tead>
<tr>
<th>ID</th>
<th>Nome do produto</th>
<th>Preço do produto</th>
<th>Categoria do produto</th>
<th>Detalhes do produto</th>
</tr>
</thead>
<tfoot>
<tr>
<th>ID</th>
<th>Nome do produto</th>
<th>Preço do produto</th>
<th>Categoria do produto</th>
<th>Detalhes do produto</th>
</tr>
</tfoot>
<corpo>
<?php
$sql = 'SELECT * from products';
$resultado = mysqli_query($conn, $sql);
se (mysqli_num_rows($result) > 0) {
// dados de saída de cada linha
while($row = mysqli_fetch_assoc($result)) {
?>
<tr>
<th><?php echo $row['product_id']; ?></th>
<td><?php echo $row['nome_do_produto']; ?></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 {
ecoa '0 resultados';
}
?>
</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].
