quinta-feira, 1 de agosto de 2013

Manipulando base de dados MySql com PHP e JQuery

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'> &nbsp; </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&Iacute;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&Atilde;O H&Aacute; MATR&Iacute;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