Dúvida - PHP + MySQL + JQuery

aprendiz_ce · November 28, 2011

Como é que eu faço uma validação utilizando PHP + MySQL + JQuery? A validação seria feita consultando o DB e verificando se o novo registro já existe. A verificação deve ser feita quando o referido campo perdesse o focus e/ou quando o mesmo for submetido. Outra coisa: Como atualizar o FORMULÁRIO em questão logo após o SUBMIT/POST e deixar o mesmo pronto para uma nova insersão de dados.

Gostaria de alguma exemplo se possível, não tenho dúvidas quanto ao HTML, PHP e o MySQL, mas sim na construção (estrutura) do JQuery. Um exempo desse script (JQuery) já ajudaria muito.

Grato e aguardo qualquer orientação.

Edited November 28, 2011 by aprendiz_ce

ESerra · November 28, 2011

Movendo PHP » JS.

fiote · November 28, 2011

Esses tópicos podem te ajudar. Os usuários postaram dúvidas/exemplos relacionados:

Retornar valor de varios campos com php e javascript

[HELP] Atribuir valor em variavel dentro do retorno ajax

Andre_Luiz · November 29, 2011

Olá.

Sei bem como é no começo entender como funciona tudo isso. Vou tentar explicar de uma maneira simples como utilizar isso e quanto a sua estrutura. Veja bem.

O PHP deve somente estar lá para validar informações e gravar os dados no MySQL. HTML e JQuery (Ajax) irão fazer todo o resto.

Vamos tentar mostrar uma forma rápida por aqui. Vou tentar mostrar um cadastro simples de email. Somente isso email.

Existirá uma página HTML:

<html>
<head>
</head>
<body>
<div id="formulario">
<input type="text" id="txtEmail" name="txtEmail" />
<input type="button" id="btnGravar" name="btnGravar" />
</div>
</body>
</html>

Página simples, e com a utilização de JQuery, você nem precisa de um formulário (tag <form>). Deverá também existir um arquivo PHP, nele deverá ter o seguinte: - Imprimir 1 quando for gravado o email com sucesso; - Imprimir 2 quando já possuir o email cadastrado; - Imprimir 3 quando o email for inválido; Quando eu digo imprimir é basicamente o seguinte:

echo "1";

Lembrando que nesse arquivo PHP é favorável que não contenha nenhuma TAG HTML explícita, deixe somente o número mesmo. Isso porque iremos utilizar o AJAX para buscar as informações, no AJAX podemos pegar o retorno como TEXTO ou como XML, meu exemplo se restringe a TEXTO mas varia da imaginação de cada programador. Para receber os parâmetros no PHP vai utilizar como se usa normalmente $_POST["txtEmail"]. Dadas as diretrizes gerais vamos montar a nosso código em JQuery para fazer a interação entre o "formulário" e o PHP:

&lt;script>
    function formAjax() {
        
        if($("#txtEmail").val() == "") { // Verifico se o campo email está vazio
            alert("O email deve ser preenchido");
            return false;
        }
        
        tempForm = $("#formulario").html(); // Armazeno em uma variável todo o conteúdo da div formulário
        
        $.ajax({
           type: 'post', // Digo que vou enviar através do método POST
           url: 'pagina.php', // Digo a página na qual será chamada (o nosso php)
           data: 'txtEmail='+$("#txtEmail").val(), // Digo os parametros que serão passados para minha página

           beforeSend: function(){ // Antes de enviar
                $("#formulario").html("aguarde..."); // Coloco aguarde no formulário
           },
           
           success: function(data){ // Se tudo ocorrer bem
                if(data == "1") { // Quando o retorno da página for 1
                    alert("gravado com sucesso!");
                }else if(data == "2") { // Quando o retorno da página for 2
                    alert("Email já cadastrado");
                }else if(data == "3") { // Quando o retorno da página for 3
                    alert("Email inválido.");
                }
                $("#formulario").html(tempForm); // Volto todas as informações do formuário que armazenei numa variável
                $("#txtEmail").val(""); // Coloco o campo de email como vazio.
           },

           error: function(erro){
                alert("Ocorreu um erro! Favor tente novamente"); // se ocorrer algum erro
                $("#formulario").html(tempForm); // Volto todas as informações do formuário que armazenei numa variável
           }
        });

    }
</script>

Vejam que criei uma função para fazer toda a iteração. Basicamente é essa a estrutura: 1 - HTML que desenha o código; 2 - JQUERy que Passa as informações do HTML para o PHP através de AJAX; 3 - PHP que faz a iteração com o banco de dados, e imprime um determinado valor; 4 - Jquery que trabalha o retorno feito do PHP e mostra novamente o formulário No final o código ficou assim:

<html>
<head>
&lt;script type="text/javascript" src="jquery-1.5.2.min.js"></script>
&lt;script>
    function formAjax() {
        
        if($("#txtEmail").val() == "") { // Verifico se o campo email está vazio
            alert("O email deve ser preenchido");
            return false;
        }
        
        tempForm = $("#formulario").html(); // Armazeno em uma variável todo o conteúdo da div formulário
        
        $.ajax({
           type: 'post', // Digo que vou enviar através do método POST
           url: 'pagina.php', // Digo a página na qual será chamada (o nosso php)
           data: 'txtEmail='+$("#txtEmail").val(), // Digo os parametros que serão passados para minha página

           beforeSend: function(){ // Antes de enviar
                $("#formulario").html("aguarde..."); // Coloco aguarde no formulário
           },
           
           success: function(data){ // Se tudo ocorrer bem
                if(data == "1") { // Quando o retorno da página for 1
                    alert("gravado com sucesso!");
                }else if(data == "2") { // Quando o retorno da página for 2
                    alert("Email já cadastrado");
                }else if(data == "3") { // Quando o retorno da página for 3
                    alert("Email inválido.");
                }
                $("#formulario").html(tempForm); // Volto todas as informações do formuário que armazenei numa variável
                $("#txtEmail").val(""); // Coloco o campo de email como vazio.
           },

           error: function(erro){
                alert("Ocorreu um erro! Favor tente novamente"); // se ocorrer algum erro
                $("#formulario").html(tempForm); // Volto todas as informações do formuário que armazenei numa variável
           }
        });

    }
</script>
</head>
<body>
<div id="formulario">
<input type="text" id="txtEmail" name="txtEmail" />
<input type="button" id="btnGravar" onClick="formAjax()" name="btnGravar" />
</div>
</body>
</html>

Lembrando que não testei o código, mas tenho certeza que essa é a lógica. Se eu estiver errado, favor comentar.

Forte abraço.

aprendiz_ce · December 7, 2011

Olá.

Sei bem como é no começo entender como funciona tudo isso. Vou tentar explicar de uma maneira simples como utilizar isso e quanto a sua estrutura. Veja bem.

O PHP deve somente estar lá para validar informações e gravar os dados no MySQL. HTML e JQuery (Ajax) irão fazer todo o resto.

Vamos tentar mostrar uma forma rápida por aqui. Vou tentar mostrar um cadastro simples de email. Somente isso email.

Existirá uma página HTML:

<html>
<head>
</head>
<body>
<div id="formulario">
<input type="text" id="txtEmail" name="txtEmail" />
<input type="button" id="btnGravar" name="btnGravar" />
</div>
</body>
</html>

Página simples, e com a utilização de JQuery, você nem precisa de um formulário (tag <form>). Deverá também existir um arquivo PHP, nele deverá ter o seguinte: - Imprimir 1 quando for gravado o email com sucesso; - Imprimir 2 quando já possuir o email cadastrado; - Imprimir 3 quando o email for inválido; Quando eu digo imprimir é basicamente o seguinte:

echo "1";

Lembrando que nesse arquivo PHP é favorável que não contenha nenhuma TAG HTML explícita, deixe somente o número mesmo. Isso porque iremos utilizar o AJAX para buscar as informações, no AJAX podemos pegar o retorno como TEXTO ou como XML, meu exemplo se restringe a TEXTO mas varia da imaginação de cada programador. Para receber os parâmetros no PHP vai utilizar como se usa normalmente $_POST["txtEmail"]. Dadas as diretrizes gerais vamos montar a nosso código em JQuery para fazer a interação entre o "formulário" e o PHP:

&lt;script>
    function formAjax() {
        
        if($("#txtEmail").val() == "") { // Verifico se o campo email está vazio
            alert("O email deve ser preenchido");
            return false;
        }
        
        tempForm = $("#formulario").html(); // Armazeno em uma variável todo o conteúdo da div formulário
        
        $.ajax({
           type: 'post', // Digo que vou enviar através do método POST
           url: 'pagina.php', // Digo a página na qual será chamada (o nosso php)
           data: 'txtEmail='+$("#txtEmail").val(), // Digo os parametros que serão passados para minha página

           beforeSend: function(){ // Antes de enviar
                $("#formulario").html("aguarde..."); // Coloco aguarde no formulário
           },
           
           success: function(data){ // Se tudo ocorrer bem
                if(data == "1") { // Quando o retorno da página for 1
                    alert("gravado com sucesso!");
                }else if(data == "2") { // Quando o retorno da página for 2
                    alert("Email já cadastrado");
                }else if(data == "3") { // Quando o retorno da página for 3
                    alert("Email inválido.");
                }
                $("#formulario").html(tempForm); // Volto todas as informações do formuário que armazenei numa variável
                $("#txtEmail").val(""); // Coloco o campo de email como vazio.
           },

           error: function(erro){
                alert("Ocorreu um erro! Favor tente novamente"); // se ocorrer algum erro
                $("#formulario").html(tempForm); // Volto todas as informações do formuário que armazenei numa variável
           }
        });

    }
</script>

Vejam que criei uma função para fazer toda a iteração. Basicamente é essa a estrutura: 1 - HTML que desenha o código; 2 - JQUERy que Passa as informações do HTML para o PHP através de AJAX; 3 - PHP que faz a iteração com o banco de dados, e imprime um determinado valor; 4 - Jquery que trabalha o retorno feito do PHP e mostra novamente o formulário No final o código ficou assim:

<html>
<head>
&lt;script type="text/javascript" src="jquery-1.5.2.min.js"></script>
&lt;script>
    function formAjax() {
        
        if($("#txtEmail").val() == "") { // Verifico se o campo email está vazio
            alert("O email deve ser preenchido");
            return false;
        }
        
        tempForm = $("#formulario").html(); // Armazeno em uma variável todo o conteúdo da div formulário
        
        $.ajax({
           type: 'post', // Digo que vou enviar através do método POST
           url: 'pagina.php', // Digo a página na qual será chamada (o nosso php)
           data: 'txtEmail='+$("#txtEmail").val(), // Digo os parametros que serão passados para minha página

           beforeSend: function(){ // Antes de enviar
                $("#formulario").html("aguarde..."); // Coloco aguarde no formulário
           },
           
           success: function(data){ // Se tudo ocorrer bem
                if(data == "1") { // Quando o retorno da página for 1
                    alert("gravado com sucesso!");
                }else if(data == "2") { // Quando o retorno da página for 2
                    alert("Email já cadastrado");
                }else if(data == "3") { // Quando o retorno da página for 3
                    alert("Email inválido.");
                }
                $("#formulario").html(tempForm); // Volto todas as informações do formuário que armazenei numa variável
                $("#txtEmail").val(""); // Coloco o campo de email como vazio.
           },

           error: function(erro){
                alert("Ocorreu um erro! Favor tente novamente"); // se ocorrer algum erro
                $("#formulario").html(tempForm); // Volto todas as informações do formuário que armazenei numa variável
           }
        });

    }
</script>
</head>
<body>
<div id="formulario">
<input type="text" id="txtEmail" name="txtEmail" />
<input type="button" id="btnGravar" onClick="formAjax()" name="btnGravar" />
</div>
</body>
</html>

Lembrando que não testei o código, mas tenho certeza que essa é a lógica. Se eu estiver errado, favor comentar.

Forte abraço.

Olá Andre,

Gostei muito do seu exemplo. Vou se consigo colocá-lo pra funcionar e ir melhorando o meu entendido com o JQuery.

Grato pela sua atenção.

bmilani · December 12, 2011

Bom Dia !

Não tenho muito conhecimento em programação, mas estou estudando, e como todos que entram nessa, no começo "apanhamos" muito, estou fazendo um trabalho com a API do Google Maps que tem a finalidade de localizar um endereço, e guardar as informações de Latitude e Longitude, do mesmo em um arquivo de Excel. Entrei em varios Forums e fui reunindo informaçoes e programaçoes diferentes que me levaram a seguinte programação :

<html xmlns=> 
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAAAaVFxs6kNq7gWY59qf5XMxSec6s_uUscdbTyPSy8oWl8zYzqFRRanjFebOU60thM
mEQQDEPx3A3y5Q" type="text/javascript"></script>
<center><h1>Google Reclamações</center></h1>
</head>
<body onLoad="loaded = true; degc(); jsonload();load();" onUnload="GUnload();">

<center>
<form method="post" action="menu.php" name="uspot">
<script language="JavaScript" type="text/javascript">
var dfn = document.uspot;
var map = null; 
var geocoder = null; 
var from; 
var to; 
var directionsPanel = null; 
var directions = null


function mapquest() {
var lat = dfn.lat.value;
var lon = dfn.lon.value;
if(!lat || !lon) return;
window.open("http://www.mapquest.com/maps/map.adp?latlongtype=decimal&latitude="+lat+"&longitude="+lon,'_blank','resizable=yes,scrollbars=auto,toolbar,location,menubar=yes,');

}
function degc() {
dfn.lat.disabled = true;
dfn.lon.disabled = true;
dfn.latdeg.disabled = false;
dfn.londeg.disabled = false;
dfn.latmin.disabled = false;
dfn.lonmin.disabled = false;
dfn.latsec.disabled = false;
dfn.lonsec.disabled = false;
dfn.ddm[0].checked=true;
recal_deg_lat();
recal_deg_lon();
}

function decc() {
dfn.lat.disabled = false;
dfn.lon.disabled = false;
dfn.latdeg.disabled = true;
dfn.londeg.disabled = true;
dfn.latmin.disabled = true;
dfn.lonmin.disabled = true;
dfn.latsec.disabled = true;
dfn.lonsec.disabled = true;
dfn.ddm[1].checked=true;
recal_dec_lat();
recal_dec_lon();
}

function recal_dec_lat() {
var znam;
if(dfn.latc[0].checked==true) znam=1; else znam=-1;
cislo(dfn.latdeg);
cislo(dfn.latmin);
cislo(dfn.latsec);
dfn.lat.value = Math.round( Math.abs( parseFloat(dfn.latdeg.value) + parseFloat(dfn.latmin.value)/60 + parseFloat(dfn.latsec.value)/3600 ) *znam *1000000)/1000000;
}

function recal_dec_lon() {
var znam;
if(dfn.lonc[0].checked==true) znam=1; else znam=-1;
cislo(dfn.londeg);
cislo(dfn.lonmin);
cislo(dfn.lonsec);
dfn.lon.value = Math.round( Math.abs( parseFloat(dfn.londeg.value) + parseFloat(dfn.lonmin.value)/60 + parseFloat(dfn.lonsec.value)/3600 ) *znam *1000000)/1000000;
}

function recal_deg_lat() {
cislo(dfn.lat);
var abslat = Math.abs(dfn.lat.value);
dfn.latdeg.value = Math.floor(abslat);
var totmin = (abslat - dfn.latdeg.value)*60
dfn.latmin.value = Math.floor(totmin);
dfn.latsec.value = Math.round( ( ( totmin - Math.floor(totmin) )*60 )*100 )/100;
}

function recal_deg_lon() {
cislo(dfn.lon);
var abslon = Math.abs(dfn.lon.value);
dfn.londeg.value = Math.floor(abslon);
var totmin = (abslon - dfn.londeg.value)*60
dfn.lonmin.value = Math.floor(totmin);
dfn.lonsec.value = Math.round( ( ( totmin - Math.floor(totmin) )*60 )*100 )/100;
}

function checkMin(pole) {
pole.value = Math.round(pole.value);
if(pole.value<0) pole.value=0;
if(pole.value>=60) pole.value=59;
}

function checkSec(pole) {
if(pole.value<0) pole.value=0;
if(pole.value>=60) pole.value=59.99;
}

function checkLatDeg(pole) {
pole.value = Math.round(pole.value);
if(pole.value<-90 || pole.value>90) pole.value=0;
}

function checkLonDeg(pole) {
pole.value = Math.round(pole.value);
if(pole.value<-180 || pole.value>180) pole.value=0;
}

function cislo(val) {
if(isNaN(parseFloat(val.value))) val.value=0;
}

function plusminus_lat(val) {
var znam;
if(dfn.latc[0].checked==true) znam=1; else znam=-1;
cislo(val);
val.value = Math.abs(val.value)*znam;
}

function plusminus_lon(val) {
var znam;
if(dfn.lonc[0].checked==true) znam=1; else znam=-1;
cislo(val);
val.value = Math.abs(val.value)*znam;
}


function plusminus_latc(val) {
var znam;
cislo(val);
if(val.value>=0) dfn.latc[0].checked=true; 
else dfn.latc[1].checked=true; 
}

function plusminus_lonc(val) {
var znam;
cislo(val);
if(val.value>=0) dfn.lonc[0].checked=true;
else dfn.lonc[1].checked=true;
}



function jsonload() {
plusminus_latc(dfn.lat);
plusminus_lonc(dfn.lon);

if(dfn.lat.value!='' && dfn.lon.value != '') {
recal_deg_lat();
recal_deg_lon();
}
degc();

}

function wgSubmit() {
var frm = document.uspot;
decc();
if(frm.id_zeme.value <= 0) {
window.alert('Select country!');
return false;
}
selAll(frm.id_region_arr); 
frm.id_region_arr.name='id_regions[]'; 
frm.akce.value='pridat'; 
frm.submit();
}

function insLatLon() {
dfn.lat.value = gmapspot_lat;
dfn.lon.value = gmapspot_lon;
plusminus_latc(dfn.lat);
plusminus_lonc(dfn.lon);
recal_deg_lat();
recal_deg_lon();


}

var map;
var marker;

var gmapspot_lat = 0; 
var gmapspot_lon = 0; 

function load() {

if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("gmap"));
geocoder = new GClientGeocoder();
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.addControl(new GOverviewMapControl()); //Mapinha pequeno no canto 
map.setCenter(new GLatLng(-23.556891559155385, -46.66262358427048), 13);

GEvent.addListener(map, "click", function(clickmarker, point) {
marker = createMarker(point);
insLatLon();

});

}

}
function mostraEndereco(){ 
var endereco = document.getElementById("endereco").value; 
if ( geocoder ) { 
geocoder.getLatLng(endereco, 
function(point){ 
if ( !point ) { 
alert(endereco + " não encontrado"); 
} else { 
map.setCenter(point, 18); 

map.addOverlay(marca); 

} 
} 
);

} else { 
alert("GeoCoder não identificado");
GEvent.addListener(marca, "click", function() { 
marca.openInfoWindowHtml( endereco + "<br />" + point.toString() ); 
}); 
} 
}

function moveMapToSpot() {
var lat = dfn.lat.value;
var lon = dfn.lon.value;
map.setCenter(new GLatLng(lat, lon));
createMarker(new GLatLng(lat, lon));

}

function createMarker(point) {
if(marker) map.removeOverlay(marker);
marker = new GMarker(point,{clickable:false});
map.addOverlay(marker);
marker.openInfoWindowHtml("Coordenadas: <br/><b>Lat: "+point.lat()+"<br/>Long: "+point.lng()+"</b>");
gmapspot_lat = point.lat(); gmapspot_lon = point.lng();
return marker;

}
</script>

<input type="hidden" name="ddm" value="1" checked="checked" onClick="degc();"/>
<input type="hidden" name="ddm" value="0" onClick="decc();"/>
<input type="hidden" name="latc" onClick="plusminus_lat(this.form.lat);" value="1" checked="checked"/>

<input type="hidden" name="latc" onClick="plusminus_lat(this.form.lat);" value="-1"/>
<input type="hidden" name="latdeg" onChange="cislo(this); checkLatDeg(this); recal_dec_lat(); moveMapToSpot();" size="3" maxlength="3"/>
<input type="hidden" name="latmin" onChange="cislo(this); checkMin(this); recal_dec_lat(); moveMapToSpot();" size="3" maxlength="3"/>
<input type="hidden" name="latsec" onChange="cislo(this); checkSec(this); recal_dec_lat(); moveMapToSpot();" size="6" maxlength="6"/>
Latitude <input type="text" name="lat" id="lat" onChange="cislo(this); plusminus_latc(this.form.lat); recal_deg_lat(); moveMapToSpot(); " size="11" maxlength="11" value=""/><br>
<input type="hidden" name="lonc" onClick="plusminus_lon(this.form.lon);" value="1" checked="checked"/>
<input type="hidden" name="lonc" onClick="plusminus_lon(this.form.lon);" value="-1"/>
<input type="hidden" name="londeg" onChange="cislo(this); checkLonDeg(this); recal_dec_lon(); moveMapToSpot();" size="3" maxlength="3"/>
<input type="hidden" name="lonmin" onChange="cislo(this); checkMin(this); recal_dec_lon(); moveMapToSpot();" size="3" maxlength="3"/>
<input type="hidden" name="lonsec" onChange="cislo(this); checkSec(this); recal_dec_lon(); moveMapToSpot();" size="6" maxlength="6"/>
Longitude <input type="text" name="lon" id="lon" onChange="cislo(this); plusminus_lonc(this.form.lon); recal_deg_lon(); moveMapToSpot();" size="11" maxlength="11" value=""/>
<br/><b>Localização nos mapas Google:</b><br/><a href="java script:insLatLon();"></a><div id="gmap" style="width: 449px; height: 337px"></div><br/>
<iframe frameborder="0" width="0" height="0" name="inline_1" src="empty.html"></iframe>
<iframe frameborder="0" width="0" height="0" name="inline_2" src="empty.html"></iframe>
<iframe frameborder="0" width="0" height="0" name="inline_3" src="empty.html"></iframe>

<input type="button" name="uprav" onClick="window.location='?lat='+document.getElementById('lat').value +'&lon='+document.getElementById('lon').value;" value="SALVAR" />

</form>

<?php


//}
/*echo "Latitude: $lat";
echo "<br>";
echo "Longitude: $log";*/


?>
<form id="form_mapa" action="#" method="get"> 
<input type="text" name="endereco" id="endereco" size=?100? value="São Paulo" /> 
<input type="button" name="enviar" id="enviar" value="Buscar Endereço" onclick="mostraEndereco()"/> 
</form> 
</body> 
</html>

Com esse script estou quase no meu objetivo, eu consigo fazer uma busca por um endereço e ao clicar em um lugar no mapa as informações de latitude e longitude são "jogadas" cada uma em uma caixinha na página, queria saber como faço para jogar essas informaçoes no execel usando um botão, que quando acionado tranferisse os valores para um arquivo do excel ! se possivel jogar tambem o endereço que gerou a busca no mapa !!

Obrigado galerinha !!!

Sou fã de vocês !!

Sign In

Dúvida - PHP + MySQL + JQuery

Question

aprendiz_ce

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

ESerra

Link to comment

Share on other sites

fiote

Link to comment

Share on other sites

Andre_Luiz

Link to comment

Share on other sites

aprendiz_ce

Link to comment

Share on other sites

bmilani

Link to comment

Share on other sites

Join the conversation

Forum Statistics

Browse

Activity