Tive que fazer isso recentemente e fiquei pensando como?Precisei disso pois estava criando uma WEB TV e gostaria de um sistema de comentários que não atualiza-se a página para poder enviar o comentário.
Fiquei sabendo que faria em AJAX, mas como sempre existe gente boa nesse mundo, pesquisei bastante e encontrei um sistema que utiliza unicamente ASP ou PHP e JavaScript
Vejam aqui.
Comecem criando a página que você quer que tenha as informações do Banco de Dados.
No caso abaixo é um exemplo de um recordset ASP
<%
Set con = Server.CreateObject("ADODB.connection")
con.open ("DRIVER={MySQL Driver};SERVER=servidor;PORT=3306;DATABASE=bd;USER=usuario;PASSWORD=senha;OPTION=3;")
%>
<%
set rs= server.CreateObject("ADODB.recordset")
rs.open "SELECT * FROM tabela",con
%>
Set con = Server.CreateObject("ADODB.connection")
con.open ("DRIVER={MySQL Driver};SERVER=servidor;PORT=3306;DATABASE=bd;USER=usuario;PASSWORD=senha;OPTION=3;")
%>
<%
set rs= server.CreateObject("ADODB.recordset")
rs.open "SELECT * FROM tabela",con
%>
após isso coloque em qualquer lugar do BODY a listagem
<%
while not rs.eof
%>
<div id="item<%=rs("cod")%>"><%=rs("campo1")%></div><input type="submit" name="button" id="button" value="enviar" onClick="apaga('<%=rs("cod")%>')">
<%
rs.movenext
wend
%>
while not rs.eof
%>
<div id="item<%=rs("cod")%>"><%=rs("campo1")%></div><input type="submit" name="button" id="button" value="enviar" onClick="apaga('<%=rs("cod")%>')">
<%
rs.movenext
wend
%>
Trata-se de um exemplo simples mas tentem adaptar isso para algo melhor, o importante é entender o conceito.
Foi feita uma conexão com o bd e logo após um recordset com o nome rs para pegar os dados da tabela chamada tabela e então fizemos um loop que retorna os dados da tabela, gerando divs com nomes que variam dependendo do campo cod da tabela.
Vejam como ficaria isso ao ser executado pelo IIS
<div id="item1">Registro 1</div><input type="submit" name="button" id="button" value="enviar" onClick="apaga('1')">
<div id="item2">Bla bla bla</div><input type="submit" name="button" id="button" value="enviar" onClick="apaga('2')">
<div id="item3">bla bla</div><input type="submit" name="button" id="button" value="enviar" onClick="apaga('3')">
<div id="item4">123 testando</div> <input type="submit" name="button" id="button" value="enviar" onClick="apaga('item1')">
<div id="item2">Bla bla bla</div><input type="submit" name="button" id="button" value="enviar" onClick="apaga('2')">
<div id="item3">bla bla</div><input type="submit" name="button" id="button" value="enviar" onClick="apaga('3')">
<div id="item4">123 testando</div> <input type="submit" name="button" id="button" value="enviar" onClick="apaga('item1')">
Espero que tenham entendido
Agora criaremos a função JavaScript que ira efetuar todo o processo e compartilhar as informações com mais uma página ASP que iremos criar
<script language="javascript">
function apaga(cod) {
var head = document.getElementsByTagName('head').item(0);
var eScript = document.createElement('script');
eScript.setAttribute('src','apaga.asp?item='+cod);
head.appendChild(eScript);
}
</script>
function apaga(cod) {
var head = document.getElementsByTagName('head').item(0);
var eScript = document.createElement('script');
eScript.setAttribute('src','apaga.asp?item='+cod);
head.appendChild(eScript);
}
</script>
O script acima recebe daquele botão que nós criamos a ID do objeto. e depois manda para página apaga.asp via método GET.
Ao todo poderia ficar assim
<%
Set con = Server.CreateObject("ADODB.connection")
con.open ("DRIVER={MySQL Driver};SERVER=servidor;PORT=3306;DATABASE=bd;USER=usuario;PASSWORD=senha;OPTION=3;")
%>
<%
set rs= server.CreateObject("ADODB.recordset")
rs.open "SELECT * FROM tabela",con
%>
<html>
<head>
<script language="javascript">
function apaga(cod) {
var head = document.getElementsByTagName('head').item(0);
var eScript = document.createElement('script');
eScript.setAttribute('src','apaga.asp?item='+cod);
head.appendChild(eScript);
}
</script>
<title>teste de edição sem AJAX</title>
<body>
<%
while not rs.eof
%>
<div id="item<%=rs("cod")%>"><%=rs("campo1")%></div><input type="submit" name="button" id="button" value="enviar" onClick="apaga('<%=rs("cod")%>')">
<%
rs.movenext
wend
%>
</body>
</html>
Set con = Server.CreateObject("ADODB.connection")
con.open ("DRIVER={MySQL Driver};SERVER=servidor;PORT=3306;DATABASE=bd;USER=usuario;PASSWORD=senha;OPTION=3;")
%>
<%
set rs= server.CreateObject("ADODB.recordset")
rs.open "SELECT * FROM tabela",con
%>
<html>
<head>
<script language="javascript">
function apaga(cod) {
var head = document.getElementsByTagName('head').item(0);
var eScript = document.createElement('script');
eScript.setAttribute('src','apaga.asp?item='+cod);
head.appendChild(eScript);
}
</script>
<title>teste de edição sem AJAX</title>
<body>
<%
while not rs.eof
%>
<div id="item<%=rs("cod")%>"><%=rs("campo1")%></div><input type="submit" name="button" id="button" value="enviar" onClick="apaga('<%=rs("cod")%>')">
<%
rs.movenext
wend
%>
</body>
</html>
Agora criaremos a página responsavel pelo processo de apagar o registro do Banco de Dados
apaga.asp
<%
Set con = Server.CreateObject("ADODB.connection")
con.open ("DRIVER={MySQL Driver};SERVER=servidor;PORT=3306;DATABASE=bd;USER=usuario;PASSWORD=senha;OPTION=3;")
%>
<%
codigo = request.QueryString("item")
exclui= con.execute("DELETE FROM tabela WHERE cod = '"&codigo&"'")
response.write "document.getElementById('item"&codigo&"').style.display='none';"
%>
Set con = Server.CreateObject("ADODB.connection")
con.open ("DRIVER={MySQL Driver};SERVER=servidor;PORT=3306;DATABASE=bd;USER=usuario;PASSWORD=senha;OPTION=3;")
%>
<%
codigo = request.QueryString("item")
exclui= con.execute("DELETE FROM tabela WHERE cod = '"&codigo&"'")
response.write "document.getElementById('item"&codigo&"').style.display='none';"
%>
resolvido, está pronto nosso sistema, simples eu confesso mas usual e pronto para ser melhorado.
Explicando esse ultimo pedaço ai. A página apaga.asp recebe via GET o valor de item e guarda na variavel codigo e então executa uma SQL que apaga os dados com o cod = a variavel codigo mas o mais legal é que depois ele imprime um JavaScript que manda a div com a ID "item"&codigo&" sumir.
quando executamos tudo isso é concatenado e ai faz sentido.
Apenas tive problemas com o IE, por que não consigo executar corretamente a função setAttribute, se algume tiver uma luz comenta ai.
Valeu galera e até a proxima
4 comentários:
Grande Adriano!
Vejo que o povo não comenta muito, mas cara, quem trabalha com ASP sabe as maravilha que é esta linguagem, e podem até falar mal dela, mas ainda é muito utilizada no mercado.
Parabéns pelo post!
Um abraço,
Igor
Estou com grande dificuldade de adaptá-la para PHP. Haveria como de me ajudar nessa?
Adriano, muito bom seu post.
Desculpe voltar a ele após tanto tempo, mas só agora tive a necessidade de fazer algo parecido com isso e, assim, surgiu uma dúvida: Tentei reproduzir seu código mas ele só funciona na primeira execução. A partir da segunda tentativa, não executa mais o código. Como posso fazer elle executar indefinidamente ? Obrigado e um abraço.
Adriano, muito bom seu post.
Desculpe voltar a ele após tanto tempo, mas só agora tive a necessidade de fazer algo parecido com isso e, assim, surgiu uma dúvida: Tentei reproduzir seu código mas ele só funciona na primeira execução. A partir da segunda tentativa, não executa mais o código. Como posso fazer elle executar indefinidamente ? Obrigado e um abraço.
Postar um comentário