DEV Community: Luis Carlos

Criando um Grid de Dados Simples usando MYSQL, PHP e AJAX - Paginação

Luis Carlos — Thu, 29 May 2025 02:57:59 +0000

No último post publicado, foi ensinado a maneira para poder listar os alunos e suas respectivas informações. Nesse atual post, será mostrado como fazer uma paginação padrão, limitada pelo tamanho de itens dentro da lista, podendo clicar no final se a página não for a página fim, podendo clicar no início caso a página atual não seja a página início, com espaçamento, caso seja uma paginação de uma lista grande, e tudo funcionando sem precisar recarregar a página, ou seja, utilizando AJAX e o PHP, utilizado para montar a lógica do funcionamento da paginação.

Em primeiro lugar, precisamos entender como funciona uma paginação básica:

- LIMIT

O comando LIMIT no SQL limita a quantidade de dados você quer que apareça, logo, se colocar no final da query um LIMIT 5

$sqlAlunos = "SELECT
    aluno.id, aluno.nome, aluno.idade, aluno.media, status.nome AS status_nome, aluno.foto
    FROM aluno 
    JOIN status ON aluno.idStatus = status.id
    LIMIT 5";

Nós iremos receber apenas as primeiras 5 linhas

Esse dado é fixo, porém, iremos setar uma variável para armazenar seu valor:

$pageSize = isset($_GET['pageSize']) ? (int) $_GET['pageSize'] : 5; // Se não estiver setado, define o valor para 5

Agora, ao invés de usar LIMIT 5, trocaremos por :pageSize e diremos para o $stmt que o valor de pageSize é $pageSize e é um valor do tipo INT:

$stmt->bindValue(':pageSize', $pageSize, PDO::PARAM_INT);

- Offset

Já cortamos a tabela em partes, mas agora, como será feito para ver as outras partes? É aí que entra o offset, ele permite que nós possamos começar a partir de um intervalo de linha, então se eu quero começar na linha 5, com um limite de 5 linhas, eu poderia usar no final da minha query:

LIMIT :pageSize OFFSET 5

E isso nos traria o que seria a próxima página:

Logo, mais uma vez teremos que adicionar mais umas variáveis, nesse caso, mais duas: $page para definir a página atual que estamos naquele momento e $offset, em resumo, se quisermos ver a 2º parte dos dados e assim consecutivamente precisaremos fazer uma simples equação $offset = ($page - 1) * $pageSize, lembrando que a primeira página é a página 1, e precisamos pegar desde a linha 0, por isso $page - 1 e a variável $page que será $page = isset($_GET['page']) ? (int) $_GET['page'] : 1;

Agora, poderemos adicionar ao final da query:

LIMIT :pageSize OFFSET :offset

Ou simplificando:

LIMIT :offset, :pageSize

E por último, entregar para o $stmt o valor de :offset

$stmt->bindValue(':offset', $offset, PDO::PARAM_INT);

- LÓGICA

Para começar, devemos contar qual é o total de registros que temos para descobrir a quantidade de páginas que o sistema possuirá, assim possibilitando para que nos retorne a primeira e a última página na paginação sempre.

$sqlCount = "SELECT COUNT(*) FROM aluno";
$stmtCount = $pdo->prepare($sqlCount);
$stmtCount->execute();
$totalRegistros = $stmtCount->fetchColumn();
$totalPaginas = ceil($totalRegistros / $pageSize) // a função ceil retorna o valor acima mais próximo, caso seja um número quebrado.

// vão ser o intervalo do meu for loop
$start = max(1, $page - 2);
$end = min($totalPaginas - 1, $page + 2);

O que é necessário saber sobre a lógica a seguir:

Se a página atual for maior do que 3, então ele volta com o 1 no início, já que é a partir do 3 que o intervalo entre $start e $end não pegam mais o número 1;
Entre $start e $end, ele deve imprimir todos os números presentes dentro do intervalo. Se a variável do loop $i for igual à página atual $page, logo, o número fica em destaque dos outros. Se não, ele apenas printa o número na tela
Enquanto a página atual $page é menor que o total de páginas - 3, ele irá printar "..." em seguida, representando que tem continuidade.
Se o total de páginas $totalPaginas for maior do que 1 e a página atual for diferente da última página que também é representado pela variável $totalPaginas, ele irá printar a página final, sem estar em destaque.

echo "<div class='paginacao'>";

if ($page > 3){
    echo "<a href='#' data-page='1'> 1 </a>";
    echo "<span> ... </span>";
}

for ($i = $start; $i <= $end; $i++){
    if ($i === $page){
        echo "<a href='#' data-page='$i'>
        <strong> $i
        </strong></a>";
    } else {
        echo "<a href='#' data-page='$i'> $i </a>";
    }
}

if ($page < $totalPaginas - 3){
    echo "<span> ... </span>";
}

if ($totalPaginas > 1 && $page != $totalPaginas){
    echo "<a href='#' data-page='$totalPaginas'> $totalPaginas </a>";
}
echo "</div>";

Como resultado, teremos isso aqui:

Porém, ele ainda não está completo, ainda precisamos inserir a lógica com ajax para que ele funcione e não precise recarregar a página toda vez

- AJAX

AJAX é "JavaScript Assíncrono e XML", ele faz requisições em segundo plano para o servidor sem que seja necessário recarregar todo o html da página, permitindo que o usuário, no caso atual, acesse os outros dados de maneira assíncrona, recebendo apenas os dados que foram pedidos instantaneamente.

Para isso, crie dois arquivos. Um que será parte do front: index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lista de Alunos</title>
</head>
<body>

<h2>Alunos</h2>
<div id="resultado">
    <?php include 'artigos.php'; ?>
</div>

<script src="./app.js"></script>
</body>
</html>

E outro de nome app.js:

document.addEventListener('DOMContentLoaded', function () {
  const resultado = document.getElementById("resultado");
  document.addEventListener('click', function (e) {
    if (e.target.matches('[data-page]')) {
      e.preventDefault();

      const page = e.target.getAttribute('data-page');

      fetch(`artigos.php?page=${page}&ajax=1`)
        .then(res => res.text())
        .then(html => {
          resultado.innerHTML = html;
        })
    }
  });
});

Ele funciona da seguinte forma:

document.addEventListener('DOMContentLoaded', function (): espera o carregamento completo da página para executar alguma função;
const resultado = document.getElementById("resultado");: seleciona onde serão feitas as requisições que irão envolver o ajax;
document.addEventListener('click', function (e): adiciona um listener para todos os botões na página, isso se chama event delegation, ao invés de pegar botão por botão, ele pega todos os botões para depois tratar eles;
if (e.target.matches('[data-page]')): se o elemento clicado tiver o atributo data-page;
e.preventDefault();: evita comportamento padrão de recarregar a página;
const page = e.target.getAttribute('data-page');: pega o valor do atributo data-page para adicioná-lo na requisição ajax;
fetch('artigos.php?page=${page}&ajax=1\'): faz a requisição a página de artigo correspondente, o ajax é para dizer que somente deve ser entregue o conteúdo solicitado;
.then(res => res.text()): como a resposta não é em JSON, usamos .text;
.then(html => {resultado.innerHTML = html;}): atualiza a div resultado.

Por fim, a paginação após isso deve estar funcionando de forma assíncrona, sem recarregar a página e entregando todos os conteúdos solicitados.

Na próxima parte, irei mostrar como fazer uma barra de pesquisa usando também ajax. Muito obrigado por lerem até aqui!

O repositório oficial do projeto se encontra aqui: https://github.com/Luis-60/lista-de-alunos.

Criando um Grid de Dados Simples usando MYSQL, PHP e AJAX - Listar Dados

Luis Carlos — Tue, 20 May 2025 04:47:12 +0000

De iniciante para iniciante, gostaria de compartilhar uma maneira de como fazer um grid de dados, ou seja, uma página contendo uma lista de itens, com ferramentas de filtro, pesquisa e futuramente classificação, tudo isso utilizando MYSQL, PHP e AJAX. Os detalhes de cada ferramenta serão explicados logo embaixo.

FERRAMENTAS UTILIZADAS

MYSQL

Versão: 8.0

O MYSQL será o Gerenciador de Banco de Dados Relacionais utilizado pela sua facilidade de aprendizado e ferramentas embutidas que auxiliam o desenvolvedor.

PHP

Versão: 8.4.7

O PHP é uma linguagem de programação e, será usado para fazer conexão com o banco de dados, utilizando PDO, extensão de acesso a banco de dados do PHP.

AJAX

AJAX é um padrão de programação que envolve javascript e xml e que torna páginas mais interativas com o usuário pois como o próprio nome já diz, é assíncrono, ou seja, permite que parte de uma página se atualize assíncronamente, sem precisar recarregar toda a página. Quando um evento ocorre, ele cria um objeto XMLHttpRequest e envia para o servidor, o servidor cria a resposta e envia os dados de volta para o browser, atualizando o conteúdo da página após ser processado pelo browser. Ele será importante, pois irá facilitar o cenário de busca, de filtragem e listagem para o usuário, sem precisar recarregar a página sempre.

CENÁRIO E BANCO DE DADOS

Criado pensando em um cenário simples e fictício, apenas para fins educativos. O caso se baseia numa lista de alunos, onde dará para listar todos os alunos de uma única matéria não especificada, contendo nome, idade, notas, média, imagem e status (Reprovado, Aprovado)

Criar as tabelas no banco de dados (MYSQL)

-- Tabela de Status
CREATE TABLE status (
    id INT NOT NULL AUTO_INCREMENT,
    nome VARCHAR(255),
    PRIMARY KEY (id)
);

-- Tabela de Aluno
CREATE TABLE aluno (
    id INT NOT NULL AUTO_INCREMENT,
    nome VARCHAR(255),
    idade INT,
    media FLOAT,
    idStatus INT,
    foto VARCHAR(255),
    PRIMARY KEY (id),
    FOREIGN KEY (idStatus) REFERENCES status(id)
);

Popular as tabelas (MYSQL)

-- Tabela de Status
INSERT INTO status (id, nome) VALUES
(1, 'APROVADO'),
(2, 'REPROVADO');

-- Tabela de Alunos
INSERT INTO aluno (nome, idade, media, idStatus, foto) VALUES
('Ana Clara', 18, 8.5, 1, 'profile.jpg'),
('Bruno Silva', 20, 6.9, 1, 'profile.jpg'),
('Carlos Eduardo', 22, 7.4, 1, 'profile.jpg'),
('Daniela Rocha', 19, 9.1, 1, 'profile.jpg'),
('Eduardo Lima', 21, 5.8, 2, 'profile.jpg'),
('Fernanda Souza', 20, 7.9, 1, 'profile.jpg'),
('Gabriel Costa', 18, 6.4, 1, 'profile.jpg'),
('Helena Martins', 19, 8.7, 1, 'profile.jpg'),
('Igor Pereira', 22, 7.2, 1, 'profile.jpg'),
('Julia Fernandes', 20, 9.4, 1, 'profile.jpg'),
('Kauã Almeida', 21, 5.2, 2, 'profile.jpg'),
('Lara Gonçalves', 18, 8.0, 1, 'profile.jpg'),
('Lucas Melo', 19, 7.1, 1, 'profile.jpg'),
('Mariana Castro', 22, 9.0, 1, 'profile.jpg'),
('Nicolas Duarte', 20, 6.5, 1, 'profile.jpg'),
('Olívia Braga', 21, 8.9, 1, 'profile.jpg'),
('Pedro Henrique', 18, 5.9, 2, 'profile.jpg'),
('Queila Nascimento', 20, 7.8, 1, 'profile.jpg'),
('Rafael Teixeira', 22, 6.7, 1, 'profile.jpg'),
('Sara Lopes', 19, 9.5, 1, 'profile.jpg'),
('Tiago Amorim', 21, 4.8, 2, 'profile.jpg'),
('Ursula Neves', 20, 8.3, 1, 'profile.jpg'),
('Vinícius Moreira', 19, 7.6, 1, 'profile.jpg'),
('Wesley Barbosa', 22, 6.3, 1, 'profile.jpg'),
('Xuxa Andrade', 18, 8.2, 1, 'profile.jpg'),
('Yasmin Torres', 20, 7.0, 1, 'profile.jpg'),
('Zeca Pagodinho', 23, 5.7, 2, 'profile.jpg'),
('Arthur Lima', 21, 9.1, 1, 'profile.jpg'),
('Beatriz Ramos', 20, 8.6, 1, 'profile.jpg'),
('César Vieira', 22, 7.3, 1, 'profile.jpg');

LISTA DE ALUNOS

Conexão com o Banco de Dados (PHP)

Será necessário para fazer a conexão com o banco de dados criar duas pastas e um arquivo de conexão no root do projeto de nome /app/database/connection.php

Dentro do arquivo, configuraremos a conexão da seguinte forma:

<?php
namespace app\database;
use PDO;

class Connection {
    private static $pdoInstance = null;

    public static function getConnection()
    {
        if (empty(self::$pdoInstance)) {
            self::$pdoInstance = new PDO(
                "mysql:host=localhost;dbname=app_db",
                "user",
                "secret", // mude de acordo com sua demanda
                [
                    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_OBJ,
                    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION // boa prática: mostrar erros PDO
                ]
            );
        }
        return self::$pdoInstance;
    }
}

$pdo = Connection::getConnection();

Testar para saber se a conexão deu certo (PHP)

Dentro da pasta root do projeto, crie um arquivo de nome index.php e dentro dele, chame o diretório que contém o arquivo que possui a conexão:

<?php
require_once __DIR__ . '/app/database/connection.php';
use app\database\Connection;

Em seguida, monte sua Query e adicione-a em uma lista

$sqlAlunos = "SELECT
 aluno.id, aluno.nome, aluno.idade, aluno.media, status.nome
 AS status_nome, aluno.foto 
 FROM aluno 
 JOIN status ON aluno.idStatus = status.id";
$stmt = $pdo->prepare($sqlAlunos); // Prepara o sql com stakeholders
$stmt->execute(); // Executa a consulta no banco
$alunos = $stmt->fetchAll(PDO::FETCH_OBJ); // Adiciona tudo em uma lista

Obs.: O stmt é uma variavel com nome arbitrário, mas que signica "Statement", ela prepara a query com placeholders, que representam valores que serão usados depois protegendo de SQL Injection

Montar o foreach para listar os alunos

foreach ($alunos as $aluno) {
    echo "<p>";
    echo "<b>Nome</b>: {$aluno->nome}<br>";
    echo "<b>Status:</b> {$aluno->status_nome}<br>";
    echo "<b>Idade</b>: {$aluno->idade}<br>";
    echo "<b>Média</b>: {$aluno->media}<br>";
    echo"</p><hr>";
}

?>

Pronto! Agora nós listamos todos os alunos e seus dados mais importantes (mesmo que esteja bem feinho).

Por enquanto foi só isso, no próximo será feita a paginação, onde já começaremos a trabalhar com AJAX.

Caso queira dar alguma sugestão, por favor, digite em baixo.
O código fonte se encontra no repositório: lista-de-alunos