Ola Amigos e Frequentadores do Portal Oficina da Net.

Hoje iremos aprendere como monstar um DataGrid de listagem com a exibição de descrição da cada item da listagem em Tooltip, é uma combinação de CSS e codigo Asp, perceba nesta coluna que não tem nem uma inteiração com Java Script, que tambem é uma opção de fazer a mesma coisa.

Dado inicio a nossa coluna criem um novo banco de dados em vazio no Access com o nome de banco.mdb salvem e depois criem a tabela TAcesso com os campos da figura abaixo.


Feito isso, agora criaremos a segunda tabela que é a TUsuarios, tambem criem ela como mostra a figura a baixo, definão o campo Usuario_IP como chave primaria.



Depois disso devemos criar o Relacionamento entre as duas tabelas para isso devemos clicar no icone da barra de ferramentas do Access e joguem as duas tabelas na janela que surgir e depois vocês devem arrastar o campo Usuario_IP da tabela TUsuarios em cima do campo Acesso_IP da tabela TAcesso, cliquem na opção "Impor Integridade Referencial" os relacionamento ficara da seguite forma como na figura abaixo;


Agora vamos povoar a Tabela TUsuarios com 5 Usuairos ficticios para testarmos vejam a figura abaixo:


Feito isso vamos tambem povoar a tabela TAcesso lembrando que o campo Acesso_IP deve conter dados do campo Usuario_IP, pois eles estam relacionados entre si e o campo Acesso_IP não aceita outro tipo de dado que não tenha na outra tabela, e pode ser repedindo tambem desde que os dados inserido sejam da outra tabela. Vejam a imagem abaixo:

Agora apatiremos para programação da pagina Asp, que exibira o resultado em forma da DataGrid ou seja a listagem e com o ToolTip ao passar o mouse por cima. Pegem o codigo abaixo, e salvem como default.asp, eu decidi postar tudo de uma vez por que pensei que iria ficar mais complicado explicar parte por parte da pagina achei melhor postar o codigo da pagina inteira e depois explicar o codigo bloco a bloco.

Vejamos o codigo inteiro:


<%
'Abre a conexão com o Banco de Dados Access
Dim caminho
Dim conexao
caminho = Server.MapPath("banco.mdb")
Set conexao = Server.CreateObject("ADODB.Connection")
conexao.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source="&caminho&";"

%>



Data Grid com ToolTip em Asp



<% 'Cria o Objeto para pegar os dados na tabela Acesso do Banco de Dados Dim rsBuscaAcesso Dim strBuscaAcesso Set rsBuscaAcesso = Server.CreateObject("ADODB.Recordset") strBuscaAcesso = "SELECT * FROM TAcesso ORDER BY Acesso_Hora" rsBuscaAcesso.open strBuscaAcesso, conexao 'Loop para pegar os todos os dados da tabela Acessos no banco de dados cont = 0 while not rsBuscaAcesso.eof 'Cria o Objeto para Selecionar as Fotos dos Usuarios Dim rsBuscaUsuario Dim strBuscaUsuario Set rsBuscaUsuario = Server.CreateObject("ADODB.Recordset") strBuscaUsuario = "SELECT * FROM TUsuarios WHERE Usuario_IP ='"&rsBuscaAcesso("Acesso_Ip")&"' ORDER BY Usuario_Nome" rsBuscaUsuario.open strBuscaUsuario, conexao %> <% rsBuscaAcesso.MoveNext cont = cont + 1 wend 'Apaga do os Objetos criados rsBuscaAcesso.close Set rsBuscaAcesso = Nothing rsBuscaUsuario.close Set rsBuscaUsuario = Nothing %>

IP Máquina Hora de Acesso Opções
<%=rsBuscaAcesso("Acesso_IP")%> <%=rsBuscaAcesso("Acesso_Maquina")%> <%=rsBuscaAcesso("Acesso_Hora")%>
Descrição








Creio que não é muito dificil de ententer pois esta bem estruturado e não é uma pagina grande nem complexa basta um minimo de conhecimento em Asp. Rodem no IIS de vocês e vejam como ficou.

Vamos a explicação dos codigos bloco a bloco:

O codigo abaixo faz a Conexão com o banco no topo da pagina.