ASP
DataGrid com Listagem e ToolTip
Publicado em: 07/07/2007 |
ASP |
Visualizações: 3.459 |
2 Comentário(s)
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:
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.
Ja este codigo é o responsavem por estilisar nosso DataGrid e construir o efeito do ToolTip quando passado o mouse na palavra Descrição é o codigo CSS que deve ser colocado dentro da tag <head> e </head> do cabecalho da pagina
Este outro codigo é a tabela que fica dentro da tag <span> e </span> que por sua vez fica dentro da tag <a href> e </a> é nesta tag que ocorre a exibição do Tooltip quando o mouse é passado por cima, devido a classe em CSS que é: dcontexto
Agora vamos ver parte que carrega o DataGrid e a Tabela Tooltip mostrada acima, é um Loop em Asp usando While para iniciar o Loop, e MoveNext para ir carregando ate o fim da tabela no banco e e Wend que para o Loop ao ver que chegou no final da tabela do banco em questão a tabela TAcesso. Vejamos:
Tendo tudo feito será como a imagem a baixo:
Bom pessoal, espero que tenham gostado desta coluna e que ela seja referencianda
por vocês no dia-a-dia de nossos trabalhos, para quem é desenvolvedor ou simples aprediz.
Deixo a seguinte pergunta para vocês, que coluna ou melhor Tema, voces gostariam de ver em Asp, não so para mim mas para todos aqui que são colunistas no setor de Asp.
Obrigado
Até a Proxima Coluna.
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&";"
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Data Grid com ToolTip em Asp</title>
<style>
.tabUsuarios {
border: 1px solid #666666;
margin: 2px 0px 2px 0px;
background: #FFFFFF;
border-collapse:collapse;
width: 700px;
}
.tabUsuarios td {
border: 0px solid #666666;
border-collapse:collapse;
}
.tabUsuarios td#titulo {
border: 1px solid #666666;
font: 7pt Verdana, Arial, Helvetica;
height: 17px;
background: #063d97;
color:#FFFFFF;
font-weight: bold;
}
.tabUsuarios td#Dados {
border: 1px solid #FFFFFF;
font: 8pt Verdana, Arial, Helvetica;
height: 17px;
background: #CCCCCC;
color: #666666;
}
a.dcontexto {
position: relative;
font: 12px arial, verdana, helvetica, sans-serif;
padding: 0;
color: #039;
text-decoration: none;
cursor: help;
z-index: 24;
}
a.dcontexto:hover {
background: transparent;
z-index: 25;
}
a.dcontexto span {
display: none;
}
a.dcontexto:hover span {
display: block;
position: absolute;
width: 230px;
top: 3em;
text-align: justify;
left: 0;
font: 10px Verdana, arial, helvetica, sans-serif;
padding: 5px 10px;
border: 1px solid #999;
background: #E8EBF2;
color: #000;
}
</style>
</head>
<body>
<table border="1" cellpadding="2" cellspacing="1" class="tabUsuarios">
<tr>
<td width="161" valign="middle" id="titulo">IP</td>
<td width="170" valign="middle" id="titulo">Máquina</td>
<td width="183" valign="middle" id="titulo">Hora de Acesso</td>
<td width="155" valign="middle" id="titulo">Opções</td>
</tr>
<%
'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
%>
<tr>
<td valign="middle" id="Dados"><%=rsBuscaAcesso("Acesso_IP")%></td>
<td valign="middle" id="Dados"><%=rsBuscaAcesso("Acesso_Maquina")%></td>
<td valign="middle" id="Dados"><%=rsBuscaAcesso("Acesso_Hora")%></td>
<td valign="middle" id="Dados">
<a href="#" class="dcontexto">Descrição
<span>
<table width="350" border="0">
<tr>
<td width="151" rowspan="4">
<img src="<%=rsBuscaUsuario("Usuario_Foto")%>" width="75" height="80" border="1"></td>
<td width="190" colspan="3" valign="top"><div>Nome: <%=rsBuscaUsuario("Usuario_Nome")%></div></td>
</tr>
<tr>
<td colspan="3" valign="top"><div>Idade: <%=rsBuscaUsuario("Usuario_Idade")%></div></td>
</tr>
<tr>
<td colspan="3" valign="top"><div>Email: <%=rsBuscaUsuario("Usuario_Email")%></div></td>
</tr>
<tr>
<td colspan="3" valign="top"><div>Empresa: <%=rsBuscaUsuario("Usuario_Empresa")%></div></td>
</tr>
<tr>
<td colspan="4"><div>Função: <%=rsBuscaUsuario("Usuario_Funcao")%></div></td>
</tr>
</table>
</span>
</a></td>
</tr>
<%
rsBuscaAcesso.MoveNext
cont = cont + 1
wend
'Apaga do os Objetos criados
rsBuscaAcesso.close
Set rsBuscaAcesso = Nothing
rsBuscaUsuario.close
Set rsBuscaUsuario = Nothing
%>
</table>
</body>
</html>
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.
<%
'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&";"
%>
Ja este codigo é o responsavem por estilisar nosso DataGrid e construir o efeito do ToolTip quando passado o mouse na palavra Descrição é o codigo CSS que deve ser colocado dentro da tag <head> e </head> do cabecalho da pagina
<style>
.tabUsuarios {
border: 1px solid #666666;
margin: 2px 0px 2px 0px;
background: #FFFFFF;
border-collapse:collapse;
width: 700px;
}
.tabUsuarios td {
border: 0px solid #666666;
border-collapse:collapse;
}
.tabUsuarios td#titulo {
border: 1px solid #666666;
font: 7pt Verdana, Arial, Helvetica;
height: 17px;
background: #063d97;
color:#FFFFFF;
font-weight: bold;
}
.tabUsuarios td#Dados {
border: 1px solid #FFFFFF;
font: 8pt Verdana, Arial, Helvetica;
height: 17px;
background: #CCCCCC;
color: #666666;
}
a.dcontexto {
position: relative;
font: 12px arial, verdana, helvetica, sans-serif;
padding: 0;
color: #039;
text-decoration: none;
cursor: help;
z-index: 24;
}
a.dcontexto:hover {
background: transparent;
z-index: 25;
}
a.dcontexto span {
display: none;
}
a.dcontexto:hover span {
display: block;
position: absolute;
width: 230px;
top: 3em;
text-align: justify;
left: 0;
font: 10px Verdana, arial, helvetica, sans-serif;
padding: 5px 10px;
border: 1px solid #999;
background: #E8EBF2;
color: #000;
}
</style>
Este outro codigo é a tabela que fica dentro da tag <span> e </span> que por sua vez fica dentro da tag <a href> e </a> é nesta tag que ocorre a exibição do Tooltip quando o mouse é passado por cima, devido a classe em CSS que é: dcontexto
<a href="#" class="dcontexto">Descrição
<span>
<table width="350" border="0">
<tr>
<td width="151" rowspan="4">
<img src="<%=rsBuscaUsuario("Usuario_Foto")%>" width="75" height="80" border="1"></td>
<td width="190" colspan="3" valign="top"><div>Nome: <%=rsBuscaUsuario("Usuario_Nome")%></div></td>
</tr>
<tr>
<td colspan="3" valign="top"><div>Idade: <%=rsBuscaUsuario("Usuario_Idade")%></div></td>
</tr>
<tr>
<td colspan="3" valign="top"><div>Email: <%=rsBuscaUsuario("Usuario_Email")%></div></td>
</tr>
<tr>
<td colspan="3" valign="top"><div>Empresa: <%=rsBuscaUsuario("Usuario_Empresa")%></div></td>
</tr>
<tr>
<td colspan="4"><div>Função: <%=rsBuscaUsuario("Usuario_Funcao")%></div></td>
</tr>
</table>
</span>
</a>
Agora vamos ver parte que carrega o DataGrid e a Tabela Tooltip mostrada acima, é um Loop em Asp usando While para iniciar o Loop, e MoveNext para ir carregando ate o fim da tabela no banco e e Wend que para o Loop ao ver que chegou no final da tabela do banco em questão a tabela TAcesso. Vejamos:
<table border="1" cellpadding="2" cellspacing="1" class="tabUsuarios">
<tr>
<td width="161" valign="middle" id="titulo">IP</td>
<td width="170" valign="middle" id="titulo">Máquina</td>
<td width="183" valign="middle" id="titulo">Hora de Acesso</td>
<td width="155" valign="middle" id="titulo">Opções</td>
</tr>
<%
'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
%>
<tr>
<td valign="middle" id="Dados"><%=rsBuscaAcesso("Acesso_IP")%></td>
<td valign="middle" id="Dados"><%=rsBuscaAcesso("Acesso_Maquina")%></td>
<td valign="middle" id="Dados"><%=rsBuscaAcesso("Acesso_Hora")%></td>
<td valign="middle" id="Dados">
<a href="#" class="dcontexto">Descrição
<span>
<table width="350" border="0">
<tr>
<td width="151" rowspan="4">
<img src="<%=rsBuscaUsuario("Usuario_Foto")%>" width="75" height="80" border="1"></td>
<td width="190" colspan="3" valign="top"><div>Nome: <%=rsBuscaUsuario("Usuario_Nome")%></div></td>
</tr>
<tr>
<td colspan="3" valign="top"><div>Idade: <%=rsBuscaUsuario("Usuario_Idade")%></div></td>
</tr>
<tr>
<td colspan="3" valign="top"><div>Email: <%=rsBuscaUsuario("Usuario_Email")%></div></td>
</tr>
<tr>
<td colspan="3" valign="top"><div>Empresa: <%=rsBuscaUsuario("Usuario_Empresa")%></div></td>
</tr>
<tr>
<td colspan="4"><div>Função: <%=rsBuscaUsuario("Usuario_Funcao")%></div></td>
</tr>
</table>
</span>
</a></td>
</tr>
<%
rsBuscaAcesso.MoveNext
cont = cont + 1
wend
'Apaga do os Objetos criados
rsBuscaAcesso.close
Set rsBuscaAcesso = Nothing
rsBuscaUsuario.close
Set rsBuscaUsuario = Nothing
%>
</table>
Tendo tudo feito será como a imagem a baixo:
Bom pessoal, espero que tenham gostado desta coluna e que ela seja referencianda
por vocês no dia-a-dia de nossos trabalhos, para quem é desenvolvedor ou simples aprediz.
Deixo a seguinte pergunta para vocês, que coluna ou melhor Tema, voces gostariam de ver em Asp, não so para mim mas para todos aqui que são colunistas no setor de Asp.
Obrigado
Até a Proxima Coluna.
Rodrigo
Formado em Sistemas de Informação pela Fac. de Tecnologia Uirapuru trabalha com Asp e Asp.Net a 2 an.
Todas as matérias de Rodrigo
- Compartilhando o acesso à internet 3G
A rede 3G de acesso à internet é uma grande realidade hoje, em funcionamento em . - Os 10 piores bugs da história
Os 10 piores bugs da história, acompanhe abaixo esses bugs e caso você conheça u. - Indicadores da Qualidade
Os indicadores da qualidade, são na realidade uma das ferramentas mais utilizada. - Internet, intranet e extranet o que são, e quais as diferenças?
Este artigo demonstra o que é cada um destes acessos. Como funcionam, e para que. - Photoshop - Criando gif animado
Vídeo aula de photoshop, ensina a criar um gif animado com a utilização da guia .
- Gráfico Dinâmico Utilizando XML e FLASH com Componente FusionCharts Free
Nesta coluna aprenderemos montar um Gráfico utilizando o componente FusionCharts. - ASP: Como criar classes
Podemos definir classes como um objeto, com seus próprios métodos (funções que a. - Criando uma enquete simples.
- ASP.NET e web standards
Essa matéria não pretende mostrar, nem de longe, todos os problemas e suas soluç. - Objeto Request e Componente FileAccess
O objeto Request se refere a todos os dados requisitados pelo servidor ao client.
Alexandre
Publicado em: 24/09/2007 - 23:15
Fala Rodrigo, e ae kra blz?parabens pelo tutorial,,sou programador PHP e estou tendo que aprender asp pra um projeto,,sua explicação foi muita clara e objetiva,,seria legal se houvesse um tutorial mostrando se é possivel utilizar algum padrão de desenvolvimento em asp,,como por exemplo a gente tem o MVC no PHP, de qualquer forma,,meus parabens,,excelente tutorial
Ricardo Coelho
Publicado em: 16/03/2008 - 10:33
Muito bom, parabéns!