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