Criando um Data Grid com POO e PHP5

1 Comente abaixo Jonathan Lamim (@jlamim)

Nesse artigo vamos ver como criar um data grid usando uma classe gratuita do PHP, passo a passo. Mas antes de começar vou explicar o que é um Data Grid.

Nesse artigo vamos ver como criar um data grid usando uma classe gratuita do PHP, passo a passo. Mas antes de começar vou explicar o que é um Data Grid.

Um data grid nada mais é do que a apresentação de dados em forma de tabela (lembra das
? algo assim). Cada conjunto de registros é mostrado em uma linha, e o data grid pode ter funcionalidades de ordenação dos dados e opções para sua edição ou exclusão.

Classe Data Grid PHP
Com esta simples classe se pode criar um data grid a partir de um array com os dadso que queremos apresentar na tabela. É simples criar e configurar e com alguns comandos avançados é possível aterar o seu comportamento, para que seja possível implementar as necesidades habituais em uma estrutura desse tipo.

Essa classe foi criada com POO (Programação Orientada a Objetos) e características que estão disponíveis somente a partir do PHP5. Ela poderá ser baixada clicando aqui.

Vamos começar a ver como funciona a classe utilizando um exemplo simples e inserindo funcionalidades no decorrer do artigo, para deixar nosso exemplo mais robusto.

Para começar é necessário inserir a classe nos scripts PHP antes de utilizá-la.


//incluimos a classe

require ?DataGrid.php?;


Agora temos que criar um Array com os dados que serão apresentados no Data Grid. Será um array associativo, duas dimensões, onde a primeira, o array principal, receberá todos os registros a serem mostrados no data Grid, e a segunda estão cada um dos registros definidos como um array associativo.

Agora contruímos o array com um algumas informações, mais adiante veremos contruir esse array através de uma consulta ao banco de dados.


//criamos o array com os dados a serem apresentados no Data Grid

$alunos = array(

    array(?id? => 1, ?nome? => ?Pepe Perez?, ?curso? => ?Informática básica?, ?nivel? => 2),

    array(?id? => 2, ?nome? => ?María Suarez?, ?curso? => ?Informática avançada?, ?nivel? => 1),

    array(?id? => 3, ?nome? => ?Roberto Soriano?, ?curso? => ?Sistemas operacionais?, ?nivel? => 2),

    array(?id? => 5, ?nome? => ?Alberto Rodriguez?, ?curso? => ?Inglés técnico?, ?nivel? => 1),

    array(?id? => 7, ?nome? => ?Julia Marcos?, ?curso? => ?Sociologia?, ?nivel? => 3),

    array(?id? => 10, ?nome? => ?Socorro Rozas?, ?curso? => ?Informática básica?, ?nivel? => 1),

    array(?id? => 11, ?nome? => ?Pablo Reñones?, ?curso? => ?Informática básica?, ?nivel? => 2)

);


Agora, antes de contibuarmos com a construção da estrutura, temos que criar alguns estilos CSS para podermos melhorar o aspecto do Data Grid


<style type=?text/css?>

.linhaI{background-color:#ffffcc;}

.linhaP{background-color:#ffcc99;}

.fdg_sortable {cursor:pointer;text-decoration:underline;color:#00c;}

</style>


Foram criadas 3 classes CSS, com seus respoectivos estilos. As classes ?linhaI? (linha ímpar) e ?linhaP? (linha par) aplicaram estilo às linhas do Data Grid e a classe ?fdg_sortable? é responsável pos estilizar os titulos de cada coluna do Data Grid.

Vamos criar o data grid a partir dos dados que temos no array.


//instanciamos o objeto data grid, passando como parâmetro o array anterior

Fete_ViewControl_DataGrid::getInstance($alunos)

//VAMOS LANÇANDO DIVERSOS MÉTODOS SOBRE O OBJETO INSTANCIADO

//atributos gerais para a tabela

->setGridAttributes(array(?cellspacing? => ?3?, ?cellpadding? => ?4?, ?border? => ?0?))

//permitimos que hajam características de ordenação

->enableSorting(true)

//fazemos um setup das colunas do data grid, indicando o valor que será mostrado na primeira linha do data grid

->setup(array(

    ?id? => array(?header? => ?ID?),

    ?nome? => array(?header? => ?Nome?),

    ?curso? => array(?header? => ?Curso?),

    ?nivel? => array(?header? => ?Nivel curso?)

))

//definimos os estilos para as linhas ímpares

->setRowClass(?linhaI?)

//definimos os estilos para as linhas pares

->setAlterRowClass(?linhasP?)

//chamamos o método que construirá o data grid

->render();


Todas as linhas foram comentadas para que o entendimento se torne mais simples

Agora vejamos como inserir ou apagar coisas do data grid, para personalizá-lo. Faremos algumas coisas como:

1. Vamos ocultar o ?ID? do array associativo, para que não seja mostrado.
2. No campo de nível do curos, vamos mostrar o nível com alguns asteriscos usando uma função que converterá os números em uma cadeia de asteriscos.
3. VAmos coluna no data grid, que aparecerá antes de qualquer outra, para mostrar um contador que indicará a quantidade de registros apresentados.

Destas 3 coisas, a mais complicada é fazer um modelo para alterar a forma como é mostrado um campo. Para começar precisaremos de uma função que devolva o dado que se quer mostrar, com o formato desejado.


function nivel_estrelas($num){

    $estrelas = ??;

    for ($i=0; $i<$num; $i  ){

        $estrelas .= ?*?;

    }

    return $estrelas;

}


Utilizaremos essa função para atribuir como ?template? para o campo nível de curso.

Vamos agora ao código utilizado para implementar todas as funcionalidades citadas no data grid:


//OCULTAR UM CAMPO NO DATA GRID

//COLOCAR UMA FUNÇÂO PARA MOSTRAR UM CAMPO

//COLOCAR UM CAMPO ANTES DAS COLUNAS DO ARRAY DO DATA GRID

Fete_ViewControl_DataGrid::getInstance($alunos)

->setGridAttributes(array(?cellspacing? => ?3?, ?cellpadding? => ?4?, ?border? => ?0?))

->enableSorting(true)

//fazemos com que o campo ?id? do array associativo não seja mostrado

->removeColumn(?id?)

->setup(array(

?nome? => array(?header? => ?Nome?),

?curso? => array(?header? => ?Curso?),

//utilizamos a função template para mostrar o nivel do curso com umas estrelas

?nivel? => array(?header? => ?Nivel curso?, ?cellTemplate? => ?[[nivel_estrelas:?a%]]?)

))

//inserimos uma coluna em todos os registros do data grid(a primeira coluna será esta)

//nesta coluna mostramos um contador de registros

->addColumnBefore(?Contador?, ?%counter%.?, ?Num?, array(?align? => ?right?))

//definimos a partir de que número será iniciado o contador

->setStartingCounter(1)

->setRowClass(?linhaI?)

->setAlterRowClass(?linhaP?)

->render();



Novamente as linhas foram comentadas para facilitar o entendimento. Chamo a atenção sobre a linha que faz uso da função anterior como um template para um campo.

?nivel? => array(?header? => ?Nivel curso?, ?cellTemplate? => ?[[nivel_estrelas:?a%]]?)

Isto faz com que o campo ?nivel?, quando for mostrado em linhas distintas do data grid chame a função nivel_estrelas(), passando como parâmetro ?a%, que é o valor que tem cada um dos registros do array associativo, cno campo ?nível?.

Por último vamos ver outro exemplo, um pouco mais desenvolvido, para mostra os dados do mesmo array. Neste caso vamos simplesmente mostrar uma coluna adicional ao final de cada registro do data grid, onde iremos inserir uns links para editar e/ou apagar o registro atual.


//PARA COLOCAR UM BOTÃO PARA EDITAR OU APAGAR

Fete_ViewControl_DataGrid::getInstance($alunos)

->setGridAttributes(array(?cellspacing? => ?3?, ?cellpadding? => ?4?, ?border? => ?0?))

->enableSorting(true)

->removeColumn(?id?)

->setup(array(

?nome? => array(?header? => ?Nome?),

?curso? => array(?header? => ?Curso?),

?nivel? => array(?header? => ?Nivel curso?, ?cellTemplate? => ?[[nivel_estrelas:?a%]]?)

))

->addColumnBefore(?Contador?, ?%counter%.?, ?Num?, array(?align? => ?right?))

//agora mostro um campo depois de cada elelemto, com links para editar ou apagar o registro

//no interior deste campo utilizo $id$ para enviar o valor ?id? do array

->addColumnAfter(?actions?, ?<a href=?exemplo3.php?editar=$id$?>Editar</a> ? <a href=?exemplo3.php?apagar=$id$? onclick=?return confirm(?Está certo que quer apagar $nome$??)?>Apagar</a>?, ?Actions?, array(?align? => ?center?))

->setStartingCounter(1)

->setRowClass(?linhaI?)

->setAlterRowClass(?linhaP?)

->render();


Neste exemplo apenas inserimos uam linha de código para fazer uma chamada ao método addColumnAfter(), que serve para iserir uma coluna depois das colunas que formamos com o array.

->addColumnAfter(?actions?, ?Editar ? Apagar?, ?Actions?, array(?align? => ?center?))


Neste caso simplesmente temos que indicar como parâmetro a addColumnAfter() dois dados: o primeiro para especificar um titulo para a coluna e o segundo para especificar o seu conteúdo. O conteúdo dessa coluna neste caso são os links para editar e apagar, onde são utilizadas urls que enviam os dados por GET, que é o identificador do registro.

Montando o data grid a partir de um banco de dados
Só falta agora falar sobre como extrair os dados de uma base de dados para fazer o array de elementos que será utilizado na montagem do data grid.

No exemplo que acompanha a classe data_grid há um código para extrair a informação do MySQL, como pode ser visto nas linhas abaixo.


$users = array();

$result = mysql_query(?SELECT * FROM user?, $dbLinkId);

while ($row = mysql_fetch_assoc($result))

{

    $users[] = $row;

}


Como se pode ver, primeiro se cria um array e logo se faz um looping pelos resultados da consulta. Cada um dos elementos retornados pela consulta será introduzido no array criado anteriormente e para ele assinalamos o array associativo que nos devolverá mysql_fetch_assoc() desse primeiro array.

Bom pessoal, espero que esse artigo possa ser útil a vocês. Clique abaixo para poder fazer o download da classe e de um exemplo.
Recomendamos para você
 

Comentários
Compartilhe com seus amigos:
Novidades
Compartilhe com seus amigos:
últimos reviews
  • 6,4
    Review Nokia Lumia 635
    Testamos hoje o Smartphone Nokia Lumia 635. Confira abaixo o que achamos.
  • 8,1
    Review Samsung Galaxy S5
    O smarphone primogênito da família Galaxy é a evolução de seus descendentes, evolução porque não há grandes novidades, m...
  • 8,0
    Review Motorola Moto G Segunda Geração
    Conheça o novo Moto G, que substitui seu antigo modelo com uma performance ainda melhor



TOPO