Como preencher tabela HTML com banco de dados em PHP

Exibir dados do banco de dados em uma página web é uma das tarefas mais comuns no desenvolvimento web. Ao integrar PHP com HTML, é possível recuperar informações de um banco de dados e apresentá-las dentro de uma tabela HTML, criando uma interface dinâmica e interativa para o usuário. Neste post, aprenda como preencher tabela HTML com banco de dados em PHP.

Passos para preencher uma tabela HTML com dados do banco de dados

Aqui estão os passos para realizar essa tarefa:

1. Configurar o banco de dados: Criar um banco de dados e uma tabela no MySQL;
   
   
2. Conectar ao banco de dados em PHP: Estabelecer a conexão entre o PHP e o banco de dados MySQL;
   
   
3. Recuperar os dados: Utilizar uma consulta SQL para obter os dados;
   
   
4. Exibir os dados em uma tabela HTML: Utilizar loops para preencher a tabela HTML com os dados recuperados.

1. Criando a tabela no banco de dados MySQL

Antes de tudo, crie um banco de dados e uma tabela simples no MySQL. No exemplo a seguir, criamos uma tabela chamada usuarios com três colunas: id, nome, e email.

CREATE DATABASE minha_base;

USE minha_base;

CREATE TABLE usuarios (
    id INT AUTO_INCREMENT PRIMARY KEY,
    nome VARCHAR(100) NOT NULL,
    email VARCHAR(100) NOT NULL
);

INSERT INTO usuarios (nome, email)
VALUES
('João Silva', 'joao@email.com'),
('Maria Oliveira', 'maria@email.com'),
('Pedro Santos', 'pedro@email.com');

Agora que você tem o banco de dados e os dados inseridos, vamos passar para o PHP para exibir essas informações.

2. Conectando ao banco de dados com PHP

O próximo passo é conectar o PHP ao banco de dados. Para isso, utilizamos a função mysqli_connect() ou PDO. Vamos usar mysqli para simplificar.

Conexão com o banco de dados:

<?php
$host = "localhost"; // Servidor do banco de dados
$usuario = "root";    // Usuário do banco de dados
$senha = "";          // Senha do banco de dados
$banco = "minha_base"; // Nome do banco de dados

// Estabelecendo a conexão
$conexao = mysqli_connect($host, $usuario, $senha, $banco);

// Verificando a conexão
if (!$conexao) {
    die("Erro de conexão: " . mysqli_connect_error());
}
?>

Aqui, estabelecemos a conexão com o banco de dados MySQL usando as credenciais de acesso. Se a conexão falhar, a função mysqli_connect_error() mostrará uma mensagem de erro.

3. Recuperando os dados do banco

Após conectar ao banco, o próximo passo é executar uma consulta SQL para obter os dados da tabela usuarios.

Executando a consulta SQL:

<?php
// Consulta SQL para selecionar os dados da tabela usuarios
$sql = "SELECT id, nome, email FROM usuarios";
$resultado = mysqli_query($conexao, $sql);

// Verificando se há dados retornados
if (mysqli_num_rows($resultado) > 0) {
    // Vamos exibir os dados na tabela HTML
} else {
    echo "Nenhum dado encontrado.";
}
?>

O código acima executa uma consulta SQL para selecionar todos os registros da tabela usuarios. A função mysqli_query() é usada para executar a consulta, e mysqli_num_rows() verifica se há registros no resultado.

4. Exibindo os dados em uma tabela HTML

Agora que temos os dados, vamos exibi-los em uma tabela HTML. Vamos usar um loop while para iterar pelos resultados e preencher as linhas da tabela.

Exibindo os dados na tabela HTML:

<?php
// Iniciando a tabela HTML
echo "<table border='1'>
<tr>
    <th>ID</th>
    <th>Nome</th>
    <th>Email</th>
</tr>";

// Loop para preencher a tabela com os dados
while ($linha = mysqli_fetch_assoc($resultado)) {
    echo "<tr>";
    echo "<td>" . $linha['id'] . "</td>";
    echo "<td>" . $linha['nome'] . "</td>";
    echo "<td>" . $linha['email'] . "</td>";
    echo "</tr>";
}

echo "</table>";

// Fechando a conexão
mysqli_close($conexao);
?>

Saída Esperada:

<table border="1">
    <tr>
        <th>ID</th>
        <th>Nome</th>
        <th>Email</th>
    </tr>
    <tr>
        <td>1</td>
        <td>João Silva</td>
        <td>joao@email.com</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Maria Oliveira</td>
        <td>maria@email.com</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Pedro Santos</td>
        <td>pedro@email.com</td>
    </tr>
</table>

No exemplo acima, usamos mysqli_fetch_assoc() para retornar cada linha como um array associativo. Cada iteração do while adiciona uma nova linha à tabela HTML com os dados do banco de dados.

5. Código PHP completo

Veja o código completo, desde a conexão ao banco de dados até a exibição dos dados na tabela HTML.

<?php
// 1. Conexão com o banco de dados
$host = "localhost";
$usuario = "root";
$senha = "";
$banco = "minha_base";

$conexao = mysqli_connect($host, $usuario, $senha, $banco);

if (!$conexao) {
    die("Erro de conexão: " . mysqli_connect_error());
}

// 2. Executando a consulta
$sql = "SELECT id, nome, email FROM usuarios";
$resultado = mysqli_query($conexao, $sql);

if (mysqli_num_rows($resultado) > 0) {
    // 3. Iniciando a tabela HTML
    echo "<table border='1'>
    <tr>
        <th>ID</th>
        <th>Nome</th>
        <th>Email</th>
    </tr>";

    // 4. Preenchendo a tabela com os dados
    while ($linha = mysqli_fetch_assoc($resultado)) {
        echo "<tr>";
        echo "<td>" . $linha['id'] . "</td>";
        echo "<td>" . $linha['nome'] . "</td>";
        echo "<td>" . $linha['email'] . "</td>";
        echo "</tr>";
    }

    echo "</table>";
} else {
    echo "Nenhum dado encontrado.";
}

// 5. Fechando a conexão
mysqli_close($conexao);
?>

Com este guia, você aprendeu como preencher uma tabela HTML com dados de um banco de dados MySQL em PHP. O processo envolve conectar-se ao banco de dados, executar uma consulta SQL para recuperar os dados e exibi-los em uma estrutura HTML.

Este é um recurso básico, mas essencial para construir aplicações web dinâmicas que exibem informações armazenadas em banco de dados.

Você pode adaptar esse código para trabalhar com diferentes tipos de dados e tabelas, tornando-o parte de um sistema de gerenciamento de conteúdo, relatórios ou qualquer outro tipo de aplicação web interativa.

Dúvidas ou sugestões? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Tags: html php