Painel Administrativo Com CSS E jQuery Parte1

Uma das características mais importantes da internet é a interatividade. Obter respostas quase imediatas a uma ação ou no mínimo saber o que esta acontecendo.

Como desenvolvedores, penso que devemos garantir respostas relevantes ao usuário da maneira mais elegante possível. E para isso contamos com a dupla CSS e javascript.

Neste tutorial criaremos um painel administrativo bastante sucinto, mas que apresentará o uso prático dos seletores CSS 3 e a delegação de eventos com o jQuery. Em uma única página o usuário poderá cadastrar, editar e deletar os dados recebendo dicas visuais sobre o processo e conclusão das requisições.

A Parte Do Servidor

Vamos criar uma tabela com três campos, para id, nome e instrumento. Cole o trecho abaixo no phpMyAdmin e você terá a estrutura da tabela.

CREATE TABLE IF NOT EXISTS `integrantes` (

  `id` int(2) NOT NULL auto_increment,

  `nome` varchar(50) NOT NULL,

  `instrumento` varchar(32) NOT NULL,

  PRIMARY KEY  (`id`)

) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Em seguida crie um arquivo e salve com o nome de ‘db.php’, ele servirá para fazer a conexão com o servidor. O conteúdo será:

<?php

  $db = "banco_de_dados";

  @mysql_connect("localhost", "usuario", "senha") or trigger_error(mysql_error(),E_USER_ERROR);

  mysql_select_db($db); 

?>

Lembre de mudar os dados genéricos acima pelas informações necessários para conectar no seu servidor.

Importação Dos Arquivos Necessários

No cabeçalho da página do painel vamos importar a biblioteca jQuery, um arquivo javascript e uma folha de estilo. A ordem de importação é esta:

<link rel="stylesheet" type="text/css" href="estilo.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<script type="text/javascript" src="javascript.js"></script>

Formulário De Cadastro

Na página que foram importados os arquivos acima, vamos criar o formulário para o cadastro.

<form method="post" action="grava.php" id="grava">

<input type="text" name="nome" value="Integrante"  />

<input type="text" name="instrumento" value="Instrumento"  />

<input type="submit" name="cadastrar" value="Cadastrar" />

</form>

É de se observar que os campos não tem um label. Isso porque os rótulos são inseridos dentro dos campos, o que torna o layout mais limpo sem comprometer a usabilidade, pois serão apagados quando o usuário clicar sobre o campo.

Arquivo De Gravação

Crie um arquivo php e salve com o nome de ‘grava.php’, ele será, como o nome sugere, o responsável pela gravação das informações na tabela. O conteúdo é o seguinte:

<?php

  include("db.php");

  $nome = mysql_real_escape_string($_POST['nome']);

  $instrumento = mysql_real_escape_string($_POST['instrumento']);

  

  if (mysql_query("INSERT INTO integrantes(nome, instrumento) VALUES ('$nome', '$instrumento')"))

  {

    echo '<p><img src="accept.png" /> Integrante adicionado</p>';

  } else {

    echo '<p>Problema na gravação</p>';  

  }

?>

Primeiro é feita inclusão do arquivo que conecta com o banco de dados. Os dados então são recebidos após um tratamento para prevenir injeção de código e são gravados na tabela ‘integrantes’. Com a verificação condicional sabemos qual frase mostrar.

Nesta altura, o cadastro esta totalmente funcional. Mas podemos tornar a gravação dos dados muito mais elegante e é o que faremos com o javascript.

Tornando A Gravação Mais Interativa

No arquivo ‘javascript.js’ escreva:

$(function(){

  $('#grava').submit(function(){

    var nome_int = $('#grava input[name=nome]').val();

    var instr = $('#grava input[name=instrumento]').val();

    if (nome_int!='' && instr!='' && nome_int!='Integrante' && instr!='Instrumento')

    {

      $('#grava input[type=text]').each(function(){

        $(this).addClass('loading');

      })

      $.post('grava.php', $('#grava').serialize(), function(resposta){

        $('#grava').prepend(resposta).find('p'). fadeOut(2000, function(){$(this).remove();});

        $('#grava input[type=text]').removeClass('loading');

        $('form')[0].reset();

      })

      return false;

    } else {

      alert('Complete todos os campos');  

      return false;

    }

  })



})

Na segunda linha é observado. Quando o formulário identificado com o id ‘grava’ for submetido, seja ao clicar no botão cadastrar ou pressionando enter, a função é executada.

Primeiro são criadas duas variáveis para guardar os valores inseridos nos campos. São utilizados seletores no estilo CSS, o que poupa a necessidade de criar um id para cada campo e possibilita tranquilamente reconhecer quais os campos estão sendo requeridos. O método val() pega o valor dos campos.

Em seguida é criado um bloco condicional para verificar se os campos foram preenchidos e se estes valores são diferentes de ‘integrante’ e ‘instrumento’.

Logo abaixo com o método each() são percorridos todos os inputs do tipo text do formulário e é anexada a classe ‘loading’ a cada um. Isso vai fazer com que fiquem com a animação informando o usuário que os dados estão sendo processados.

Finalmente chegamos ao método que envia os dados. O primeiro parâmetro do $.post() informa o arquivo que receberá os dados. No segundo parâmetro é informado quais dados serão enviados. Como todos os campos serão submetidos, utilizamos o serialize() que já cria uma string com os pares ‘nome:valor’ e poupa-nos o trabalho de criar código para receber o valor de cada campo. O terceiro parâmetro é a função de retorno que recebe na variável ‘resposta’ o saída do arquivo ‘grava.php’.

Ao receber a resposta da requisição são executadas três linhas:

A primeira linha anexa logo após a abertura do elemento formulário, o texto que veio como resposta da requisição. Se você voltar ao arquivo ‘grava.php’ verá que a resposta vem dentro de elemento de parágrafo. Então após a anexação, é feita uma busca por elementos de parágrafo que estejam dentro do ‘#grava’ e ao encontra-lo, é feito o efeito de esvanecimento com duração de 2 segundos (2000 milisegundos).

Só que ao final do fadeOut() o elemento só ganha um ‘display:none’, só desaparece de vista, pois na árvore do documento permanece. Para deixar o trabalho impecável, ao final do efeito o elemento é removido da estrutura com o remove().

Mas porque desaparecer com o retorno da requisição? Se isso não for feito ao final de cadastros consecutivos teríamos uma lista de ‘Integrante adicionado’ gerando uma estética terrível.

Na segunda linha é removida a animação do processamento inserida anteriormente no código através da classe ‘loading’.

A terceira linha apaga os dados do formulário, pois como o envio é feito sem o reload da página que zera o formulário, temos que providenciar isso via código. São selecionados os elementos de formulário contidos na página, o que retorna uma array. O elemento zero representa o primeiro formulário da página. Ele é o alvo do reset(), que apaga o conteúdo dos campos.

Ufa. Acabou a requisição e retorno.

É adicionado então um ‘return false’ para evitar que a ação do formulário aconteça e ele seja submetido.

Lembrando que ainda estamos dentro do bloco condicional, vem o else, para o caso de os campos estarem vazios ou com os valores padrão.

Valores Padrão

Ainda no arquivo javascript, vamos retirar os rótulos dos campos quando estes receberem o foco do mouse.

  $('#grava input[type=text]').focus(function(){

    var valor = $(this).val();

    if (valor === "Integrante" || valor === "Instrumento"){

      $(this).val('');  

    }

  })

Código bastante simples. Quando os campos de texto do formulário receberem o foco, que é o cursor piscando dentro deles, uma variável recebe o valor deste campo. É feita então uma verificação para saber qual é o valor. Se forem os valores padrão, eles são apagados ao se atribuir valor nulo.

Teste e você verá que está funcionando.

Estilização

Apesar de funcional, o formulário está bastante básico. Vejamos como fazer para que fique com uma aparência mais profissional.

input[type=text]{

padding:3px; 

border:1px solid transparent; 

width:150px; 

margin-right:10px; 

background-color:transparent;}



#grava input[type=text]{border-color:#999;}



input:focus{

border:1px solid #ccc;

-moz-box-shadow:0 0 3px #999; 

-webkit-box-shadow:0 0 3px #999;

box-shadow:0 0 3px #999;

background:#fff;}



input[type=submit]{

padding:3px 7px; 

border:1px solid #ccc;

-webkit-border-radius:20px; 

-moz-border-radius:20px; 

border-radius:20px; 

background:-moz-linear-gradient(top,  #dedede, #ededed, #fdfdfd, #ffffff, #e1e1e1); background:-webkit-gradient(linear,left top, left bottom, color-stop(0,#dedede), color-stop(.8,#ededed), color-stop(.3,#fdfdfd)); 

font-size:0.9em; 

font-weight:bold;

color:#333;}



input[type=submit]:hover{

color:#000; 

-webkit-box-shadow:0 0 2px #333; 

-moz-box-shadow:0 0 2px #333; 

box-shadow:0 0 2px #333;}

São selecionados todos os elementos de formulário do tipo texto. Eles recebem um espaçamento interno para evitar que o conteúdo toque nas bordas do elemento, uma borda transparente, que terá sua valia na edição dos dados, ganham um pouco mais de largura, são distanciados e recebem um fundo transparente. O fundo transparente tira a cor do fundo, mas permite a inserção de imagem, que é importante para a animação de ‘loading’.

Os campos tipo texto do formulário de gravação diferem dos outros porque precisam de borda visível já que estão sobre fundo branco, ao contrário dos campos de edição que estarão sobre fundo cinza.

Ao receber o foco dos campos ganham fundo, sombra e borda como destaque.

O botão submit ganhou tratamento caprichado. Além de mais espaço interno teve as bordas arredondadas e o fundo ganhou gradiente. O que gerou um visual bastante agradável. Quando esse botão receber o foco do mouse ganha sombra para destaca-lo dos outros elementos. Se você quiser saber mais sobre criação de gradientes com CSS procure aqui no site na seção ‘Webdesign’ e você encontrará diversos tutoriais sobre folhas de estilo.

.alterado{background:url(accept.png) no-repeat right center;}



.loading{background:url(loading.gif) no-repeat right center; }

Estas duas classes são úteis para o retorno visual do que esta acontecendo. São adicionadas e removidas ao longo do código javascript.

Conclusão

Toda a parte de gravação está completa. Veremos na sequência deste tutorial como listar os dados já cadastrados e permitir a edição inline sem a necessidade de reload da página.

O código usado neste tutorial estará disponível para download na Parte2 do tutorial:

Painel Administrativo Com CSS E jQuery Parte2