sexta-feira, 19 de março de 2010

SELECT - INSERT - UPDATE em Banco de dados sem Refresh e sem AJAX

Tive que fazer isso recentemente e fiquei pensando como?
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
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.


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

%>


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
%>

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')">

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>

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>


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';"
%>

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:

Igor Popadiuk disse...

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

None disse...

Estou com grande dificuldade de adaptá-la para PHP. Haveria como de me ajudar nessa?

Francisco dos Anjos disse...

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.

Francisco dos Anjos disse...

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.