Olá Pessoal.
Aprenderemos um pouco sobre o que
podemos fazer com as
tecnologias PHP, MyQql e JQuery trabalhando juntas.
-
trazer informações do banco de dados sem refresh na página;
-
carregar combobox com JQuerye MyQql;
- carregar
combobox
com o evento onChange() de uma outra;
- update
no banco de dados com JQuery;
- métodos
$.post() e $.ajax();
- funções JQuery e outras dicas;
# NOSSO EXEMPLO SERÁ BASEADO EM UM SISTEMA GERENCIADOR DE PEDIDOS DE
# BOLSAS PARA CURSOS DIVERSOS, NESSE SISTEMA O USUÁRIO SERÁ CAPAZ DE
# ATENDER OU NÃO AO PEDIDO DE BOLSAS POR TURMA E MATRICULAS
# 1. AO SELECIONAR O CURSO EM UMA COMBOBOX UMA OUTRA SURGIRÁ CONTENDO TODOS AS TURMAS DO CURSO SELECIONADO.
# 2. AO SELECIONAR UMA DAS TURMAS SERÁ EXIBIDO UMA LISTA COM TODOS OS ALUNOS (MATRÍCULAS) QUE SOLICITARAM PEDIDO DE BOLSA.
# 3. AO MARCAR UM CHECKBOX (ATENDER PEDIDO) AUTOMATICAMENTE O PEDIDO SERÁ ATENDIDO OU NÃO CASO SEJA DESMARCADO.
NOTA:
Para este post é necessário que na sua base de dados sejam criadas as seguintes tabelas: alunos, cursos, turmas e matriculas
Sendo que um aluno está ligado à uma matrícula;
Uma matrícula está ligada a uma turma
Uma turma está ligada a um curso
É necessário ainda o JQuery 1.8.3
#======================================================================
# 1) INICIALMENTE CRIAREMOS O ARQUIVO DE CONEXÃO COM O MYSQL
conexao.inc.php
<?php
define("SERVIDOR", "localhost");
define("USUARIO", "root");
define("SENHA", "secreta");
define("BANCO", "bdescola");
$conexao = new mysqli(SERVIDOR, USUARIO, SENHA, BANCO);
if ($conexao -> connect_error)
{
die('Erro ao conectar a Base de Dados (' . $conexao -> connect_errno . ') ' . $conexao -> connect_error);
}
?>
#=======================================================================
# 2) CRIAMOS O ARQUIVO DE ESTILO CSS
estilo.css
body
{
margin:0 auto;
text-align:center;
}
.corpo
{
width:900px;
border:none;
margin:0 auto;
background-color:#E3EDF2;
text-align:center;
}
hr
{
float:left;
clear:both;
background-color:#660000; width:100%; margin-bottom:20px;
}
.selecao
{
width:800px;
float:left;
margin-bottom:10px;
margin-top:10px;
padding:6px;
display:block;
}
.impar, .par
{
padding:3px;
text-align:left
}
.impar
{
background-color:#FFFF99;
}
.par
{
background-color:#FFFFCC;
}
.visivel
{
display:block;
visibility:visible;
}
.oculta
{
display:none;
visibility:hidden;
}
#turmas, #cursos
{
width:500px;
height:20px;
margin:0;
border : #AAA 1.4px solid;
background: #EEF1F2;
color: #333333;
float:left;
}
#turmas:focus, #cursos:focus
{
border: #CC0033 1.4px solid;
background: #FFFF99;
color: #660000;
}
.rotulo
{
width:140px;
line-height:20px;
display:block;
float:left;
text-align:left;
padding-left:10px;
margin-right:-0.5px;
color:#FFFFFF;
background-color:#8D8AC6;
}
.titulo
{
width:900px;
line-height:30px;
display:block;
float:left;
text-align:center;
color:#FFFFFF;
background-color:#8D8AC6;
}
.atalhos li
{
list-style:none;
display:inline;
}
.atalhos li a
{
width:30px;
display:inline-block;
color:#FFFFFF;
background-color:#BAADD6;
text-decoration:none;
text-align:center;
line-height:22px;
}
.atalhos li a:hover
{
background-color:#660033;
}
#alunos table
{
width:900px;
border:#D8DDE2 1px solid;
float:left;
}
#alunos table tr
{
background-color:#D8DBE0;
margin-top:4px;
}
#alunos table tr td, #alunos table tr th
{
padding:6px;
}
#alunos table tr th
{
background-color:#8D8AC6;
color:#FFFFFF;
}
#alunos table tr th.vazio
{
background-color:#CCCCFF;
}
#alunos table tr.marcador
{
background-color:#BFE6DB;
}
#alunos table tr:hover
{
background-color:#FFFF99;
}
.top
{
display:block;
background:#BAADD6;
text-decoration:none;
color:#333333;
float:left;
line-height:18px;
padding:5px;
margin:5px;
}
#=======================================================================
# 3) CRIAMOS O ARQUIVO DE SCRIPT JS (BAIXEM O JQUERY 1.8.3)
script.js
// ESTE TRECHO É EXECUTADO ASSIM QUE O PÁGINA É CARREGADA
$(document).ready(function()
{
// LIMPAMOS TODOS OS RESULTADOS CONSTANTES NA TELA;
$("#lista").hide();
// AO TROCAR A SELEÇÃO DA COMBO CURSOS:
$('#cursos').change(function()
{
// 1. LIMPAMOS TODOS OS RESULTADOS CONSTANTES NA TELA;
$("#lista").fadeOut('slow');
$("#lista").removeClass().addClass("oculta");
// 2. SE HÁ VALOR É CHAMADA A FUNÇÃO QUE CARREGA A COMBO DE TURMAS
if($(this).val())
{
$.carregaTurmas($(this).val());
}
else
{
$("#turmas").removeClass().addClass("oculta");
$("#turmas").attr("disabled", "disabled");
$("#areaTurmas").fadeOut('slow');
}
});
// AO TROCAR A SELEÇÃO DA COMBO TURMAS:
$('#turmas').change(function()
{
// 1. SE HÁ VALOR É CHAMADA A FUNÇÃO QUE CARREGA A LISTA DE ALUNOS
if($(this).val() && $('#cursos').val())
{
$.carregaMatriculas();
}
});
});
// FUNÇÃO QUE CARREGA A COMBO DE TURMAS DO CURSO SELECIONADO
$.carregaTurmas = function(id_curso)
{
if(id_curso != "")
{
$("#turmas").removeClass().addClass("visivel");
$.ajax(
{
type: "POST",
url: "turmas_ajax.php",
data: {"curso_id": id_curso},
async: false,
complete: function()
{
$("#areaTurmas").fadeTo(500,1).show();
$("#turmas").removeClass().addClass("visivel");
$("#turmas").removeAttr("disabled");
},
cache: false,
success: function(listaResult)
{
if($.trim(listaResult) != "")
{
$('#cursos').blur();
$('#turmas').focus();
$("#turmas").removeClass().addClass("visivel");
$('#turmas').html(listaResult);
}
},
error: function(error)
{
alert("Erro ao solicitar dados. Tente mais tarde: " + error);
}
});
}
else
{
alert("Selecione o curso e a turma");
}
};
// FUNÇÃO QUE CARREGA A TABELA DE ALUNOS DA TURMA SELECIONADA
$.carregaMatriculas = function()
{
if($('#cursos').val() && $('#turmas').val())
{
$.ajax(
{
type: "POST",
url: "matriculas_ajax.php",
data: {"turma_id": $('#turmas').val()},
timeout: 2000,
async: false,
beforeSend: function()
{
$("#alunos").remove();
$("#lista").addClass("carregando");
},
complete: function()
{
$("#lista").fadeTo(500,0.8).removeClass("carregando");
$("#lista").removeClass("oculta");
$("#lista").fadeIn('slow');
},
cache: false,
success: function(listaResult)
{
if($.trim(listaResult) != '')
{
var conteudoLista = $('#lista').html() + "<div id='alunos'> </div>";
$('#lista').html(conteudoLista);
$("#alunos").prependTo("#lista");
$("#alunos").show('slow');
$("#alunos").html(listaResult).fadeIn('slow');
$('#turmas').focus();
}
},
error: function(error)
{
alert("Erro ao solicitar dados. Tente mais tarde: " + error);
}
});
}
else
{
alert("Selecione o curso e a turma");
}
// COM A LISTA CARREGADA É CHAMADA FUNÇÃO QUE MARCA DE VERDE A LINHA
// DOS PEDIDOS DE BOLSAS ATENDIDOS
$.confereBolsas();
};
// AO MARCAR OU DESMARCAR O CHECKBOX ESTA FUNÇÃO É CHAMADA PARA
// FAZER O UPDATE NO BANCO, ATENDENDO OU NÃO O PEDIDO DO BOLSISTA
$.concedeBolsa = function(e)
{
if($(e).is(':checked'))
{
$(e).parent().parent().removeClass();
$(e).parent().parent().addClass('marcador');
$.post("update_ajax.php",{matricula_id: $(e).val()}, function(resposta)
{
if($.trim(resposta) != 'OK')
{
$(e).attr('checked', false);
$(e).parent().parent().removeClass('marcador');
}
});
}
else
{
$(e).parent().parent().addClass();
$(e).parent().parent().removeClass('marcador');
$.post("update_ajax.php",{matricula_id: $(e).val(), negar: '0'}, function(resposta)
{
if($.trim(resposta) != 'OK')
{
$(e).attr('checked', false);
$(e).parent().parent().removeClass('marcador');
}
});
}
};
// FUNÇÃO PARA MARCAR OS PEDIDOS DE BOLSAS ATENDIDOS
$.confereBolsas = function()
{
// COM UM LAÇO PERCORRO TODOS OS CHECKBOX DAS MATRÍCULAS
$("input[name='respond[]']").each(function()
{
// SE O CHECKBOX ESTIVER MARCADO MUDO A COR DA LINHA
if($(this).is(':checked'))
{
$(this).parent().parent().removeClass();
$(this).parent().parent().addClass('marcador');
}
});
};
#=======================================================================
# 4) CRIAMOS O ARQUIVO PHP QUE CONSULTA AS TURMAS DO CURSO SELECIONADO
turmas_ajax.php
<?php
include_once("conexao.inc.php");
extract($_POST, EXTR_OVERWRITE);
$i = 1;
$curso_id = mysqli_real_escape_string($conexao, $curso_id);
$sql = "SELECT id, nome FROM turmas WHERE fk_curso_id = '".$curso_id."' ORDER BY nome ASC";
if($consulta = $conexao -> query($sql))
{
if($consulta -> num_rows > 0)
{
$opcoes = "<option value=\"0\">SELECIONE...</option>";
while($lista = $consulta -> fetch_assoc())
{
$opcoes .= "<option value=\"{$lista['id']}\" class=\"$clasCSS\">{$lista['nome']}</option>";
$clasCSS = $i%2 ? "impar" : "par";
$i++;
}
}
}
echo utf8_encode($opcoes);
?>
#=======================================================================
# 5) CRIAMOS O ARQUIVO PHP QUE CONSULTA AS MATRICULAS DA TURMA SELECIONADA
matriculas_ajax.php
<?php
include_once("conexao.inc.php");
extract($_POST, EXTR_OVERWRITE);
$turma_id = mysqli_real_escape_string($conexao, $turma_id);
$resultado = "";
$link = "";
$titulo = "MATRICULAS COM PEDIDOS DE BOLSAS";
$sql = "SELECT a.cpf, a.nome, m.id AS matricula, m.flag_bolsa
FROM matriculas AS m
INNER JOIN alunos AS a
ON a.id = m.fk_aluno_id
WHERE flag_bolsa IS NOT NULL
AND m.fk_turma_id='".$turma_id."' ORDER BY a.nome";
if($consulta = $conexao -> query($sql))
{
if($consulta -> num_rows > 0)
{
$letra = "Z";
$ancora = array("A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","X","Y","W","Z");
# ESTE TRECHO/LAÇO MONTA A TABELA COM A LISTA DE ALUNOS/MATRÍCULAS
# DA TURMA
while($lista = $consulta -> fetch_assoc())
{
$letraInicial = substr($lista['nome'],0,1);
if($letra != $letraInicial)
{
if(in_array($letraInicial, $ancora, true))
{
$indice = array_search($letraInicial, $ancora);
unset($ancora[$indice]);
$link = "<a name='" . $letraInicial . "'>";
$atalhos.="<li><a href='#" . $letraInicial . "'>". $letraInicial ."</a></li>\n";
}
else
{
$link = "";
}
$resultado .= "<tr><th id='letra'>" . $letraInicial . $link ."</th><th colspan='3' class='vazio'> </th></tr>";
$letra = substr($lista['nome'],0,1);
}
# MARCO O CHECKBOX DO PEDIDOS DE BOLSA ATENDIDOS
$marcado = $lista['flag_bolsa'] == '2' ? "checked" : "";
$resultado .= "<tr><td>" . $lista['cpf'] . "</td> <td>" . $lista['nome'] ."</td> <td>" . $lista['matricula'] . "</td><td><input type='checkbox' " . $marcado . " name='respond[]' value='" . $lista['matricula'] . "' onChange=\"$.concedeBolsa($(this));\"></td></tr>\n";
}
# OS ATALHOS SÃO ÂNCORAS HTML PARA ENCONTRAR ALUNOS
# CUJOS NOMES INICIEM COM UMA DETERMINADA LETRA
$atalhos = $atalhos !="" ? "\n<tr><th colspan='4' class='vazio'><ul class='atalhos'>".$atalhos."</ul></th></tr>\n" : "";
$resultado = $resultado != "" ? "<tr> <th>CPF</th> <th>ALUNO</th> <th>MATRÍCULA</th> <th>CONCEDER BOLSA</th></tr>".$resultado : "";
$resultado = $resultado != "" ? "<p class=\"titulo\">".$titulo."</p><table>".$atalhos.$resultado."</table>": "";
echo $resultado != "" ? utf8_encode($resultado) : "";
}
else
echo "<p class=\"titulo\">NÃO HÁ MATRÍCULAS PARA ESTA TURMA</p>";
}
else
echo "<p>ERRO AO CONSULTAR BASE DE DADOS</p>";
?>
#=======================================================================
# 6) CRIAMOS O ARQUIVO PHP QUE ATUALIZA AS MATRICULAS DA LISTA
update_ajax.php
<?php
include_once("conexao.inc.php");
extract($_POST, EXTR_OVERWRITE);
$id = mysqli_real_escape_string($conexao ,$matricula_id);
$valor = $negar == '0' ? '3' : '2';
$sql = "UPDATE matriculas SET flag_bolsa = '" . $valor . "' WHERE matriculas.id ='" . $id . "'";
if($consulta = $conexao -> query($sql))
echo "OK";
else
echo "0";
?>
#=======================================================================
# 7) CRIAMOS O ARQUIVO PHP QUE ATUALIZA AS MATRICULAS DA LISTA
bolsistas.php
<?php
include_once("conexao.inc.php");
$sql = "SELECT id, nome FROM cursos ORDER BY nome ASC";
$conexao;
if($consulta = $conexao -> query($sql))
{
if($consulta -> num_rows > 0)
{
$opcoes = "<option value=\"\">SELECIONE...</option>";
while($lista = $consulta -> fetch_assoc())
{
$opcoes .= "<option value=\"{$lista['id']}\" class=\"$clasCSS\">{$lista['nome']}</option>";
$clasCSS = $i%2 ? "impar" : "par";
$i++;
}
}
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Exemplo PHP, JQuery e MySql</title>
<link rel="stylesheet" href="estilo.css">
<script language="javascript" type="text/javascript" src="jquery-1.8.3.js"></script>
<script language="javascript" type="text/javascript" src="script.js"></script>
</head>
<body>
<a name="topo"></a>
<div class="corpo">
<div class="titulo">GERENCIAMENTO DE PEDIDOS DE BOLSA DE ESTUDOS</div>
<div class="selecao">
<label class="rotulo">CURSO:</label>
<select name="cursos" id="cursos" class="visivel">
<?=$opcoes?>
</select>
</div>
<div id="areaTurmas" class="selecao">
<label class="rotulo">TURMA:</label>
<select name="turmas" id="turmas" class="oculta">
</select>
</div>
<hr>
<div id="lista">
<div id="alunos">
</div>
</div>
<a href='#topo' class="top"><small>TOPO</small></a>
</div>
</body>
</html>
Estes exemplos serão melhor entendidos na prática, pois aparentemente observando-os apenas aqui no blog ficamos um a impressão de que são códigos complexos, mas na prática são bem fáceis de serem compreendidos e aplicáveis.
Quaisquer dúvidas e inconsistências no código retratem e deixem seus comentários
