Fernando Softov » html http://www.softov.com.br/blog Só mais um blog do WordPress Wed, 01 Sep 2010 04:41:42 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Jquery + Ajax + PHP http://www.softov.com.br/blog/post/93/jquery-ajax-php http://www.softov.com.br/blog/post/93/jquery-ajax-php#comments Thu, 10 Sep 2009 20:06:25 +0000 fernandosoftov http://www.softov.com.br/blog/?p=93 No post  – Jquery, introdução – anterior a este falei um pouco sobre Jquery, como o titulo diz, uma breve introdução, hoje falarei sobre o uso de jQuery + Ajax + PHP.

Em breve exemplo usarei o envio de formulário, deixarei a validação do mesmo para um post posterior.

Primeiramente acesse este link http://docs.jquery.com/Downloading_jQuery, e faça o download da versão mais recente da JQuery.

Seguindo a estrutura html básica


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ajax Post - Erick Alves</title>
<script src="js/jquery-1.3.2.min.js" type="text/javascript" language="javascript"></script>

</head>

<body>
<form action="#" method="post">
<label>Nome: <input type="text" name="nome" id="nome" /></label>
<label>Email: <input type="text" name="email" id="email" /></label>
<label>Telefone: <input type="text" name="telefone" id="telefone" /></label>
<input type="button" value="Enviar" id="enviar" />
</form>
<div id="resposta"></div>
</body>
</html>

Neste html eu criei um formulario com os campos, nome, email e telefone,  respectivamente cada um com seu id, para utilizarmos eles no jQuery.

Entres as tags <head></head> eu inseri o jQuery


<script src="js/jquery-1.3.2.min.js" type="text/javascript" language="javascript"></script>

Depois disso criaremos uma página chamada de enviar.php com a seguinte estrutura


<?php
// recebo os campos via $_POST[''];
$nome = $_POST['nome'];
$email = $_POST['email'];
$telefone = $_POST['telefone'];

// verifico se estão preenchidos
if (!($nome) || !($email) || !($telefone)){
     echo 'Preencha todos os campos!';
     exit();
}
//Abrindo Conexao com o banco de dados
$conexao = mysql_pconnect("localhost","usuario","senha") or die (mysql_error());
$banco = mysql_select_db("bancodedados");

//Utilizando o  mysql_real_escape_string voce se protege o seu código contra SQL Injection.
$nome = mysql_real_escape_string($nome);
$email = mysql_real_escape_string($email);
$telefone = mysql_real_escape_string($telefone);

$insert = mysql_query("insert into contatos (nome,email,telefone) values ('{$nome}','{$email}','{$telefone}')");
mysql_close($conexao);
if($insert) {
     echo 'Cadastro Realizado!';
}else {
     echo 'Erro ao Cadastrar!';
}
?>

O exemplo acima está auto comentado e de fácil entendimento.

E agora? O formulario não vai funcionar pois não estamos setando nenhum action nele. Isso é importante para o funcionamento dele via jQuery.

Utilizaremos agora a função click do jQuery, instanciando o elemento de id “enviar“, no caso do formulario html o botão de envio.

Receberemos os valores dos campos de id:

  • nome
  • email
  • telefone

Feito isso, teremos a função post do jQuery, requisitando dados no envia.php e passando como paramentro nossos campos.

Instanciamos o elemento de id “resposta” para receber o retorno do nosso ajax.

Tudo isso é feito utilizando o script jQuery abaixo

<script type="text/javascript">
$(document).ready(function() {
    $("#enviar").click(function() {
       var nome = $("#nome");
       var nomePost = nome.val();
       var email = $("#email");
       var emailPost = email.val();
       var telefone = $("#telefone");
       var telefonePost = telefone.val();
       $.post("enviar.php", {nome: nomePost, email: emailPost, telefone: telefonePost},
       function(data){
          $("#resposta").html(data);
       }
       , "html");
     });
});
</script>

Que deve ser inserido entre as tags head do seu html.

Fim…

Temos também no jQuery outros modos de enviar requisições ajax, como a própria funçao $.ajax().

Mas deixarei isso para outro post, assim como as validações.

Bem isso é tudo pessoal.

]]> http://www.softov.com.br/blog/post/93/jquery-ajax-php/feed 0 Jquery, introdução http://www.softov.com.br/blog/post/82/jquery-introducao http://www.softov.com.br/blog/post/82/jquery-introducao#comments Mon, 07 Sep 2009 00:22:43 +0000 fernandosoftov http://www.softov.com.br/blog/?p=82 O jQuery, é uma das melhores coisas que aconteceram nos últimos anos em termos de programação. A Linguagem jQuery é rápida e concisa, ao utilizala, tornamos o site extremamente poderoso, funcional e atractivo.

Neste post vou mostrar uma introdução ao Jquery, motivos para utiliza-lo no desenvolvimento de um web site.

Vantagens:

  • Compatibilidade com qualquer navegador;
  • Seu peso é bem leve ficando em torno de 20kb(comprimido);
  • Otimização de código, você evita de programar linhas e linhas de código;
  • Você consegue acessar a qualquer elemento ou combinações de elementos;
  • Possui diversos efeitos visuais para deixar seu site mais atraente.

Introdução

Primeiramente acesse este link http://docs.jquery.com/Downloading_jQuery, e faça o download da versão mais recente da JQuery. De prefencia baixe a versão comprimida.

Após ter efetuado o download bastar inserir o jquery entre os heads do seu html

<script type="text/javascript" language
="javascript" src="javascript/jquery.js"></script>

Utilizando

O uso do jQuery é bem simples, digamos que você queira selecionar todas as tgs ‘div’.

Em javascript

document.getElementsByTagName("div");

Em jQuery:

("div");

Seguindo o exemplo acima já podemos ter uma noção da simplicidade do uso do jQuery. Agora supomos que vc queira selecionar não todas as divs, mas outro elemento pelo id ou pela classe.


// pela id conteudo
("#conteudo");

// pela classe link
(".link");

//um link com a classe titulo
("a.titulo");

//selecionando todas as div com a classe menu que estão dentro da div conteudo
("#conteudo div.menu");
//ou
("div.menu", "#conteudo");

A estrutura segue este padrão bem simples. Sem muita complicação.

Bom agora vejamos como utilizar efeitos no jQuery.


// escondendo um elemento
("#id_do_elemento").hide()

// mostrando o elemento
("#id_do_elemento").show()

No exemplo acima temos
(“#id_do_elemento”) = refencia ao elemento
hide(“slow”) = efeito

O jQuery conta também com efeitos do tipo fadeIn, fadeOut e fadeTo

("p").fadeIn("slow");
("p").fadeOut("slow");
("p").fadeTo("slow");

Eventos

Agora queremos um elemento que ao clicarmos nele dispara um evento em outro elemento.

Estrutura html


<a href="#" class="mostra">mostrar div</a>

<div id="recebe" style="display:none;">estou mostrando esta div</div>

Estrutura jQuery

$(document).ready(function(){
                $("a.mostra").click(function(){
                         $("#recebe").show();
                 });
});

Exemplo:
mostrar div

O que foi feito é bem simples, pegamos a tag de link “a” com a classe “mostra” e adicionamos uma acão ao ser clicado “.click(function(){ }) ;”, dentro da função instanciamos o elemento de id “recebe“, adicionando o efeito de show();

O jQuery é bem dinamico e ainda possibilita a manipulação de objetos DOM, Ajax, validação de formulário e muitos outros efeitos.

Por hoje é tudo pessoal, logo estarei postando aqui mais funcionalidades do jQuery.

]]> http://www.softov.com.br/blog/post/82/jquery-introducao/feed 1 Centralizar div com css http://www.softov.com.br/blog/post/71/centralizar-div-com-css http://www.softov.com.br/blog/post/71/centralizar-div-com-css#comments Tue, 01 Sep 2009 18:43:13 +0000 fernandosoftov http://www.softov.com.br/blog/?p=71 Desde que eu comecei a desenvolver sites seguindo um padrão tive muitos problemas na centralização de uma div no navegador, aonde eu consequia centralizar no mozilla e no IE ficava desconfigurado.

Bem, para quem o mesmo problema que eu tive, veja a abaixo a solução.

Sigamos a estrutura a seguir dentro do body.

<body>
<div id="geral">
<div id="corpo">
conteudo
</div>
</div>
</body>

E dentro do seu style ou se preferir colocar dentro de um .css o código a seguir

body{
 background-color:#efefef; /*um fundo para visualizar a div*/
 margin:0px;
 padding:0px;
 text-align:center; /* bug do IE 6*/

}
#geral{
 margin:0 auto;
 width:900px;
 background-color:#FFF; /*um fundo para visualizar a div*/
 text-align:left;
}
#corpo{
 padding:10px;
}

Veja o exemplo aqui

]]> http://www.softov.com.br/blog/post/71/centralizar-div-com-css/feed 2