AJAX + JQuery = Facilidade

Abril 27, 2007 on 1:21 pm | In Informatica, php, JavaScript, JQuery, AJAX | 30 Comments

Irei falar sobre método de envio e recebindo através de um form sem dar reload em uma página usando o framework JQuery.

Primeiro criamos o formulário:

HTML:
  1. form method="post" id="form" action="starterkit.php">
  2. <table width="49%" cellspacing="0" cellpadding="0" border="0">
  3. <td style="width: 33%"><span class="nome">
  4. <label>Nome :</label></span></td>
  5. <td style="width: 67%"><input type="text" id="nome" name="nome" /></td>
  6. </tr>
  7. <td><span class="Apelido"><label>Apelido :</label></span></td>
  8. <td><input type="text" id="Apelido" name="Apelido" /></td>
  9. </tr>
  10. <td><span class="site"><label>Site :</label></span></td>
  11. <td><input type="text" id="site" name="site" /></td>
  12. </tr>
  13. <td><input type="submit" class="envio" value="Enviar" id="submit" name="submit" /></td>
  14. <td><span id="loading"><img alt="Ajax Indicator" src="http://rafaelcunha.com/indicator.gif" /></span>    <span id="result" /></td>
  15. </tr>
  16. </table>

Utilizamos então o método de POST do JQuery para pegar os valores e enviar para um arquivo externo no caso o 'recebe.php':

JAVASCRIPT:
  1. $('input.envio').click(function() {
  2. $('#loading').show();
  3. $.post('recebe.php',{
  4. nome: $('#nome').val(),
  5. Apelido: $('#Apelido').val(),
  6. site: $('#site').val()
  7. },function(response){
  8. // resposta
  9. $('#result').fadeOut();
  10. setTimeout("finishAjax('result', '"+escape(response)+"')", 400);
  11.  
  12. })
  13.  
  14. return false;
  15. });

Comentários sobre o código:
Quando recebe o click no input classe envio. Ele mostra a div id=loading e depois chama a função de .POST do modulo de AJAX do JQuery.
Logo em seguida ele atribui para valor nome: o valor pego do input id=nome ( $('#nome').val(); e faz o mesmo com todos aqueles valores que irão ser passados por POST para o arquivo recebe.php.
Ele chama a função response que na verdade é a resposta enviada do arquivo recebe.php. No nosso caso se a resposta por 'positiva' mostraremos o dados enviados na tela. Para isso dou settimeout para esperar um pouco e chamo a função finishAjax, passando dentro dela dois valores, o ID onde colocarei o resultado e o resultado de resposta do arquivo recebe.php

JAVASCRIPT:
  1. function finishAjax(id, response) {
  2. $('#loading').hide();
  3. $('#'+id).html(unescape(response));
  4. $('#'+id).fadeIn();
  5. if (response == 'Inserido'){
  6. $('#todos').fadeOut();
  7. $('#nome').val('');
  8. $('#Apelido').val('');
  9. $('#site').val('');
  10. $.post('envia.php',{
  11. nome: ''
  12. },function(response){
  13. // resposta
  14. $('#todos').html(unescape(response));
  15. $('#todos').fadeIn();
  16.  
  17. })
  18. }
  19. }

Comentário sobre o código acima:

A função testa se a resposta foi 'Inserido' (caso positivo do recebe.php), nesse caso ele atribui a cada valor do formulário o valor vazio com o método $('#nome').val(''); e depois chama o método POST de novo, para enviar e receber os dados necessário para imprimir na tela os valores enviador pelo formulário que ja estão gravados no banco.
Na resposta eu recebo ja os valores de modo que é so fazer a impressão na tela.
Para fazer impressão eu uso o metodo html.(unescape(RESPOSTA)) do JQuery. Escrevo a resposta no span id='todos'.

Recebe.php:

PHP:
  1. if (isset($_POST['nome'])){
  2. $nome = $_POST['nome'];
  3. }
  4. if (isset($_POST['Apelido'])){
  5. $Apelido = $_POST['Apelido'];
  6. }
  7. if (isset($_POST['site'])){
  8. $site = $_POST['site'];
  9. }
  10. $query=mysql_query("INSERT INTO     Envio_dados (nome,tel,site) VALUES ('".$nome."','".$Apelido."','".$site."')");
  11. if ($query)
  12. echo 'Inserido';
  13. else
  14. echo 'Erro na inserção!';

Envia.php:

SELECT em todos dados da tabela e monta uma tabela de saído com echo. A saída sera exatamento como você formatou este arquivo. Eu não sei porque mas deu problema aqui no blog e não esta mostrando a saída deste arquivo. ;/

Para ler mais sobre as funções e metodos do Jquery so ler a documentação. Para ver o exemplo deste script va em Script Teste.
E é so isso pessoal, dúvidas é comentar... Espero que esse script sirva de inspiração para o uso do JQuery... Até a próxima


Filme: Muito Gelo e Dois dedos d´água

Abril 27, 2007 on 8:20 am | In Filmes | 1 Comment

Filme brasileiro muito legal, superdivertido, da para rir bastante... A história é que 2 irmãs sequestram a avó para leva-la a sua própria casa de praia, as duas tem na cabeça de torturar a velhinha porém no meio dessa história toda aconteçe varias coisas, muita loucura entre as duas e outros que apareçem...
Vale a pena alugar para assistir, os filmes Brasileiros cada vez me surpreendem mais. O elenco se encontram : Laura Cardoso, Mariana Ximenes, Paloma Duarte, Ângelo Paes Leme, Tiago Lacerda, Carla Daniel e Aílton Graça.


Integração BRPay

Abril 27, 2007 on 7:40 am | In Informatica, Trabalho, php | No Comments

Esses dias eu fiz um integração de uma loja virtual com o BRPay, tudo ocorreu legal, apesar de alguns problemas, fiz ela com base nos dados obtidos (scripts) que eles geram, usando eles como modelo desenvolvi o próprio script...

É super simples depois que o usuário clica para fechar o pedido, você monta um formulário com todos dados necessários para o envio, e envia ele para o site da BRPay, no caso a BRPay gera tudo sobre o pagamento depois retorna as informações, você precisa fazer um reenvio de confirmação, enviando uma palavra que é única para você, logo em seguida recebe a confirmação... com a confirmação voccê fecha o pedido internamente como se nada tivesse acontecido, tudo isso transparente ao usuário.

Meu maior problema foi que quando ouve necessidade do suporte, unico modo de entrar em contato com eles é o Ticket direto no atendimento e ou então e-mail, quando aberto o ticket no qual eu escolhi, houve uma demora de 1 dia ou até mais para a resposta... Isso me trouxe uma demora em demasia para a criação e termino do script. ;/

Durante um período de 2 dias de testes vi o aplicativo deles de recebindo de dados ficar fora  do ar durante algum período. Creio que eles precisam monitorar melhor o serviço deles lá, ainda está longe de ser uma solução 'perfeita'. Mas em contra partida ja atende todas as necessidades de alguns clientes.

Caso você tenha dúvida envie nos comentários, talvez possa ajudar. Abraços.


Contato

Abril 25, 2007 on 12:50 pm | In Informatica | 1 Comment

Meu contato para sugestões, dúvidas e outros mais a que possa interessar.

silici0@gmail.com 


Férias!

Abril 25, 2007 on 9:56 am | In Trabalho, Juliana | 1 Comment

Sair de férias é tão bom e desejado o ano inteiro... que mal voltamos a trabalhar e já queremos que ela volte novamente.

Faltam 12 dias para as minhas tão desejadas e parece que essas ultimas semanas são as mais corridas e piores do ano inteiro, trabalho em demasia, clientes em demasia, gerentes e diretoria em demasia, todo mundo falando na minha orelha e eu só contando os dias.

Independente se iremos ou não viajar, as férias são sempre muito boas... é o momento que temos pra desligar completamente de nossa vida profissional, que por muitas vezes enche o saco, e tirar sim um tempo só pra nós! Nos dedicar a familía, ao marido/ esposa, diversão sem a preocupação em trabalhar no dia seguinte e principalmente nos dedicar a nós mesmos.

As mulheres com a revolução feminista conseguiram arrumar trabalho e hoje a conseguir cargos superiores a muitos homens. Realmente é muito bom a mulher conseguir seu lugar no mundo, mas sinceramente, TRABALHAR É DOSE! Não... elaborando melhor a minha frase para que entendam: na verdade trabalhar não é tão dificil e ruim assim, o problema é que a mulher não tem só o esforço do trabalho a fazer, mesmo que trabalhemos nossas funções são sempre a mais das do homem. Porque? porque além do esforço no serviço tanto como o do homem ou as vezes maior, nós mulheres nos preocupamos com a casa, com o marido, crianças... depois de chegar de um dia cansativo de trabalho temos que nos preocupar se a casa está limpa ou não, o que nossos maridos vão comer, o que nossas crianças vão comer, será que estão bem? será que falta algo? estar a disposição de nossos amores, caso contrario sabe-se lá (hehehehehe) e ainda... depois de tudo isso ter um sorriso estampado no rosto porque se não tiver ainda tem que ouvir: poxa... mas vc é mal humorada heinm!

Nas férias a vantagem é que sumimos do mapa para o pessoal do serviço (desligo o celular, não atendo telefone em casa, não vejo e-mail e assim vai), e com certeza nossa vida pessoal caminha melhor. Sem trabalho fora de casa, trabalho melhor dentro de casa e assim vai... por essas e outras eu me revolto com essa tal revolução. Se não tivessemos que trabalhar estaríamos de férias sempre, fazendo o trabalho doméstico que toda mulher tem que fazer todos os dias quando chega do serviço, independente se é dona de casa ou não.

As férias são boas e só acontecem uma vez por ano, o que ao meu ponto de vista é injusto, onde já se viu trabalhar doze meses e ter 20 dias só de férias? portanto APROVEITEM AO MÁXIMO quando saírem de férias. É o que farei daqui a 12 dias.

boa semana! ;)


Importancia da documentação

Abril 23, 2007 on 11:31 pm | In Informatica, Trabalho | No Comments

Eu sei que atualmente muitos sistemas e softwares para internet são desenvolvidos em cima de um website e por isso eles na sua grande maioria pareçem pequenos, por isso muito veem documentação como ponto negativo em relação aos gastos para produção.

Irei sitar porque de alguns motivos de se ter uma documentação, nem que seja mínima.

Vejamos que a princípio a grande maioria das empresas tende geralmente a entregar o projeto na mão de um único funcionário assim vendo o projeto como algo pequeno, as vezes até mais funcionários são designados ao projeto e suas funções e metas são ditas boca a boca, causando muita vezes um gasto maior do que o necessário.

Muitos desses projetos sem documentação são lindos e maravilhosos e NÃO atendem a necessidade do cliente ou do público visado, porque? É muito simples, quando não existe documentação o projeto é feito sem diretrizes e sem as necessidades claras do que e como ele deve se comportar, dando ao c0der uma liberdade de se criar o mais bonito e menos prático (hehehe), assim muitos desses sites são colocados na internet e morrem no esquecimendo do dono ou criador.

A documentação mínima que seja, tende a levantar os requisitos e necessidades do projeto em questão, assim focando todos no projeto a desenvolverem a necessidade real; o propósito; focando a usabilidade pode-se tranquilamente deixa-lo bonito sem fugir da necessidade real no qual o cliente exige.

Fica claro com a documentação o comportamento do software, apartir disso fica fácil criar um orçamento, uma proposta e deixar o cliente ciente o que ele realmente esta comprando, deixando claro que todas necessidades são aquelas, nada pior quando o cliente lhe liga no meio do processo dizendo que suas necessidades não eram bem aquela, que os produtos tem necessidade de cores, tamanhos, volumes, alturas, custo, padronizações diferentes, trazendo uma insatisfação para ambos e um custo e prejuízo na maioria das vezes para o produtor.

A documentação interna para os programadores e designer, preveem o melhor uso do tempo deles e maior produtividade com o foco único de comportamente, sem dar a chance do coder ficar imaginando, pesquisando, modelando, remodelando, recriando e recodificando novas idéias. Nesse momento os mesmos devem ja estar concretos e documentados.

Uma documentação nem que mínima, 1 ou 2 folhas dizendo o objetivo do sistema deve ter em mãos ou de bom acesso/localidade a todos envolvidos no projeto.


Next Page »

 

 Assine o feed