<?php
$gmtDate = gmdate("D, d M Y H:i:s");
header("Expires: {$gmtDate} GMT");
header("Last-Modified: {$gmtDate} GMT");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");
header("Content-Type: text/html; charset=ISO-8859-1");
$con = mysql_connect('localhost', 'root', '') or die ("Erro de conexão");
$res = mysql_select_db('trabalho') or die ("Banco de dados inexistente");
import_request_variables("g");
// Atualização do produto
if($_GET['acao'] == 'atualizar'){
if(!empty($_GET['nome']) && !empty($_GET['preço'])){
$preço = str_replace(",",".", $_GET['preço']); //troca a vírgula por ponto
if(is_numeric($preço)){
$sql = mysql_query("update produtos set nome = '".$_GET['nome']."', preço = '".$preço."' where codigo = '".$_GET['cod']."'");
$res2 = mysql_query($sql);
}else{
echo 'Preço inválido';
}
}
}
// exclusão de produtos
elseif($_GET['acao'] == 'excluir'){
$sql = "delete from produtos where codigo = '".$_GET['cod']."'";
$res = mysql_query($sql);
}
// Cadastro de produtos
elseif($_GET['acao'] == 'cadastrar'){
if(!empty($_GET['nome']) && !empty($_GET['preço'])){
$preço = str_replace(",",".", $_GET['preço']);
if(is_numeric($preço)){
$sql = "insert into produtos (nome, preço) values ('".$_GET['nome']."', '".$preço."')";
$res2 = mysql_query($sql);
$novo_codigo = mysql_insert_id($con);
//retorna a mensagem de confirmação de cadasro do produto
}else{
echo 'Preço inválido';
}
}else{
echo 'Você deve preencher todos os campos!';
}
}
?>
bibliotecaAjax.js
/*
Esta biblioteca é composta por um conjunto de funções que tratam e manipulam as informações enviadas do browser ao servidor e vice-versa
Copyright (c) 2008 Aline Lima, Aline Magalhães, Andréa Lopes e Frederico Pimentel.
Este documento permite cópia, distribuição e/ou modificação garantida sob os termos da Lincença Pública Geral Menor do GNU conforme publicada pela Free Software Foundation; tanto a versão 2.1 da Licença quanto as versões posteriores.
Esta biblioteca é distribuída na expectativa de que seja útil, porém, SEM NENHUMA GARANTIA; nem mesmo a garantia implícita de COMERCIABILIDADE OU ADEQUAÇÃO A UMA FINALIDADE ESPECÍFICA.
Consulte a Licença Pública Geral Menor do GNU para mais detalhes.
*/
var ajax;
var dadosUsuario;
// ----- Cria o objeto e faz a requisição -----
function requisicaoHTTP(tipo,url,assinc){
if(window.XMLHttpRequest){// Objeto usado no Mozila, Safari...
ajax = new XMLHttpRequest;
}
else if(window.ActiveXObject){// Objeto usado pelo Internet Explorer
ajax = new ActiveXObject("Msxml2.XMLHTTP");
if(!ajax){
ajax = new ActiveXObject("Microsoft.XMLHTTP");
}
}
//ajax é a variável que vai armanezar o objeto que será utilizado baseado no navegador usado pelo usuário
if (ajax){
iniciaRequisicao(tipo,url,assinc); // Iniciou com sucesso
}else{
alert("Seu navegador não possui suporte a essa aplicação"); // Mensagem que será exibida caso não seja possível iniciar a requisição
}
}
// ----- Inicia o objeto criado e envia os dados (se existirem) -----
function iniciaRequisicao(tipo, url, bool){
ajax.onreadystatechange = trataResposta; //Atribui ao objeto a resposta da função trataResposta
ajax.open(tipo, url, bool); //Informa os parâmetros do objeto: tipo de envio, url e se a comunicação será assíncrona ou não
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");//Recupera as informações do cabeçalho
ajax.send(dadosUsuario);// Envia os dados processados para o navegador
}
// ----- Inicia requisição com envio de dados -----
function enviaDados(url){
criaQueryString(); //Chama a função que transformará os dados enviados em ua string
requisicaoHTTP("POST", url, true); //Chama a função que fará a requisição de dados ao servidor
}
// ----- Cria a string a ser enviada, formato campo1=valor&campo2=valor2... -----
function criaQueryString(){
dadosUsuario = "";
var frm = document.forms[0]; //Identifica o formulário
var numElementos = frm.elements.length;// Informa o número de elementos
for(var i = 0; i < numElementos; i++){//Monta a querystring
if(i < numElementos-1){ //Se i for menor que o número de elementos (menos 1)
dadosUsuario += frm.elements[i].name+"="+encodeURIComponent(frm.elements[i].value)+"&"; //recupera os valores que comporão a url se houver mais elementos a serem incluídos;
}
else{
dadosUsuario += frm.elements[i].name+"="+encodeURIComponent(frm.elements[i].value); //recupera os valores que comporão a url se houver mais elementos a serem incluídos;
}
}
}
// ----- Trata a resposta do servidor -----
function trataResposta(){
if(ajax.readyState == 4){// Se todas as informações e a conexão foi fechada...
if(ajax.status == 200){// Se o status da conexão for 200
trataDados(); // Chama a função trataDAdos
}
else{
alert("Problema na comunicação com o objeto XMLHttpRequest.");
}
}
}
/*
requisicaoHTTP = tenta instanciar o objeto XMLHttpRequest e, se conseguir, chama a função que fará a requisição, passando a ela os dados fornecidos pelo usuário.
iniciaRequisição = recebe os dados da função requisiçãoHTTP e processa a requisição, além de definir a função que irá tratar a resposta do servidor.
enviaDados = faz uma requisição definindo antes os dados a serem enviados, que, no caso, são obtidos de um formulário HTML. Caso não haja dados a seresm enviados, podemos chamar diretamente a função requisicaoHTTP.
criaQueryString = coloca os dados do firmulário no formato de uma QueryString, para que o servidor possa identificar os pares nome/valor.
trataResposta = verifica se a requisição foi conluída e inicia o tratamento dos dados. Há diferença desta função para a função trataDados(), que você deverá criar em seu programa para realizar o tratamento desejado sobre os dados retornados pelo servidor.
Possíveis valores do readyState
0(Não Iniciado): O Objeto foi criado mas o método open() não foi chamado ainda.
1(Carregando): O método open() foi chamado mas a requisição não foi enviada ainda.
2(Carregado): A requisição foi enviada.
3(Incompleto): Uma parte da resposta do servidor foi recebida.
4(Completo): Todos as informações foram recebidas e a conexão foi fechada com sucesso.
*/
dataGrid.js
/*
Esta biblioteca é composta por um conjunto de funções que tratam as informações que foram transmitidas pelo servidor, para exibição do navegador do usuário.
Copyright (c) 2008 Aline Lima, Aline Magalhães, Andréa Lopes e Frederico Pimentel.
Este documento permite cópia, distribuição e/ou modificação garantida sob os termos da Lincença Pública Geral Menor do GNU conforme publicada pela Free Software Foundation; tanto a versão 2.1 da Licença quanto as versões posteriores.
Esta biblioteca é distribuída na expectativa de que seja útil, porém, SEM NENHUMA GARANTIA; nem mesmo a garantia implícita de COMERCIABILIDADE OU ADEQUAÇÃO A UMA FINALIDADE ESPECÍFICA.
Consulte a Licença Pública Geral Menor do GNU para mais detalhes.
*/
var dadosAtuais; //Array que guarda os dados atuais da linha antes de editá-la
var linhaEmEdicao = null; //Guarda o ID da linha a ser editada, incluída ou excluída
var linhasNovas = 0; //Variável auxiliar
var num = 0;
//Prepara uma linha para edição
function EditarLinha(idLinha, cod){
if(num == 0) {
num = 1;
//if(!linhaEmEdicao){//Se linhaEmEdicao não for nulo...
linhaEmEdicao = idLinha; //Armazena o id da linha que será editada
//Obtém a linha a ser editada e altera a sua cor
var linha = document.getElementById(idLinha);//Obtém o id da linha que será editada
linha.className = 'linhaSelecionada';//Altera a cor da linha que será editada
var celulas = linha.cells;//Aramazena a célula que será editada
//salva os dados atuais para o caso de cancelamento
SalvaDados(idLinha);//Chama a função que salvára os dados atuais da linha antes de editá-la
//Cria os campo de texto editáveis
celulas[0].innerHTML = '<input type="hidden" name="id" value="'+celulas[0].innerHTML+'">';//Armazena o código do produto num campo oculto de formulário
celulas[1].innerHTML = '<input type="text" name="protocolo" value="'+celulas[1].innerHTML+'">';//Mostrar o campo texto permitindo a edição do nome do produto
celulas[2].innerHTML = '<input type="text" name="status" value="'+celulas[2].innerHTML+'">';//Mostrar o campo texto permitindo a edição do preço do produto
celulas[3].innerHTML = '<input type="text" name="abertura" value="'+celulas[3].innerHTML+'">';
celulas[4].innerHTML = '<input type="text" name="fechamento" value="'+celulas[4].innerHTML+'">';
celulas[5].innerHTML = '<input type="text" name="tipo" value="'+celulas[5].innerHTML+'">';
celulas[6].innerHTML = '<input type="text" name="atendente" value="'+celulas[6].innerHTML+'">';
celulas[7].innerHTML = '<a href="#" onclick="Atualizar(document.formulario.id.value, document.formulario.protocolo.value, document.formulario.status.value, document.formulario.abertura.value, document.formulario.fechamento.value, document.formulario.tipo.value, document.formulario.atendente.value);"><img src="images/atualizar.gif" alt="Atualizar" title="Atualizar"></a><br/>'+'<a href="#" onclick="Cancelar('+idLinha+');"><img src="images/cancelar.gif" alt="Cancelar" title="Cancelar"></a>';//Monta os links que chamarão as funções para atualizar ou cancelar a edição da linha
celulas[8].innerHTML = ' ';//Insere um espaço na última célula
//}else{
//alert("Você já está digitando um registro.");
//}
}else{
alert('Você já está editando uma linha. \n Conclua a edição desta linha para então editar outra.');
}
}
//Exclui uma linha da tabela
function ExcluirLinha(idLinha, cod){
if(num == 0){
var linha = document.getElementById(idLinha);//Armazena o id da linha que será excluída
linha.className = 'linhaSelecionada';// define a classe de estilos que será usada na linha
if(confirm("Tem certeza que deseja excluir este registro?")){//Pergunta se a linha realmente deve ser excluída
Aviso(1); // Exibe o aviso: Aguarde...
var url = "index2.php?acao=excluir&cod="+cod;//Url que será enviada
requisicaoHTTP("GET", url, true);//Função que fará a requisição
}else{
linha.className = 'linha';//Define a classe de estilo que será usada se a linha não estiver maracada para exclusão
}
}else{
alert('Você deve concluir a edição da linha para então excluir algum produto.');
}
}
//Cria um novo registro
function NovoRegistro(){
if(num == 0){
//Se houver linha sendo editada, cancela edição
if(linhaEmEdicao){// Se linhas em edição for nulo...
alert("Você está com um registro aberto. Feche-o antes de prosseguir");
}else{
//Insere uma nova linha na tabela
proxIndice = document.getElementById('minhaTabela').rows.length-1;//Armazena o índice a linha que será inserida
var novaLinha = document.getElementById('minhaTabela').insertRow(proxIndice);//Insere uma nova linha na tabela
novaLinha.className = 'linhaSelecionada';//Define a classe de estilos que será usada na n ova linha
}
//Define o id da nova linha (que será usado em caso de edição/exclusão
novoId = "nova"+linhasNovas;//Armazena o id da linha
novaLinha.setAttribute('id', novoId);//Define que o nome do id será o valor da variável novoId
linhasNovas++; //Incrementa o valor da variável
linhaEmEdicao = novoId;// Aramazena o valor da variável novoId
//Insere as células na linha criada
var novasCelulas = new Array(5); //Cria um array
for(var i=0; i<5; i++){
novasCelulas[i] = novaLinha.insertCell(i); //Preenche o array
}
//Cria os campos dos formulários
novasCelulas[0].innerHTML = '*'; //código
novasCelulas[1].innerHTML = '<input type="text" name="nome">'; //insere o campo nome
novasCelulas[2].innerHTML = '<input type="text" name="preço">'; //insere o campo código
novasCelulas[3].innerHTML = '<a href="#" onclick="Cadastrar(document.formulario.nome.value, document.formulario.preço.value);"><img src="images/cadastrar.gif" alt="Cadastrar" title="Cadastrar"></a>'; //Monta os links que chamarão as funções para cadastrar e cancelar a inserção de uma nova linha
novasCelulas[4].innerHTML = '<a href="#" onclick="CancelarInclusao();"><img src="images/cancelar.gif" alt="Cancelar" title="Cancelar"></a>';// Cria o link para cancelar a inserção de dados do formulário
num =1;
}else{
alert('Você já está editando um registro. \n Conclua a edição para então cadastrar um novo produto.');
}
}
//Salva os dados atuais num array
function SalvaDados(idLinha){
var celulas = document.getElementById(idLinha).cells;//Armazena o id da célula
dadosAtuais = new Array(celulas.length);//Armazena num array os dados atuais da linha
for(var i=0; i<celulas.length; i++){
dadosAtuais[i] = celulas[i].innerHTML; //Preenche o array
}
linhaEmEdicao = null;
}
//Cancela a edição de uma linha
function Cancelar(idLinha){
self.location.href="index.php"; //Direciona a página
linhaEmEdicao = null;
num = 0;
}
//Cancela a inclusão de uma linha, excluindo-a
function CancelarInclusao(){
var linha = document.getElementById(linhaEmEdicao);//Armazena o id da linha em edição
linha.parentNode.removeChild(linha);// Remove a linha que seria incluída
linhasNovas--;//Decrementa o número de linhas
linhaEmEdicao = null;
num = 0;
}
//Atualiza o conteúdo da linha
function Atualizar(n,p,c){
Aviso(1); //Exibe o aviso aguarde...
var dados = ObtemDadosForm(n, p, c);//Chama a função que montará a string com os dados que estarão na url
var cod = c;//Armazena o código do produto que será atualizado
var url = "index2.php?acao=atualizar"; //Monta a url
url += "&cod="+cod+"&"+dados;//Monta a url
requisicaoHTTP("GET", url, true);//Inicia a requisição
}
//Chamada do programa em PHP que cadastra no banco de dados
function Cadastrar(n, p){
Aviso(1);//Chama a função aviso
var dados = ObtemDadosForm(n, p, 0); //Armazena a string com dados que comporão a url
var url = "index2.php?acao=cadastrar&"+dados;//Url que será enviada
requisicaoHTTP("GET", url, true);//Inicia a requisição
}
//Coloca os dados do formulário em formato de query string
function ObtemDadosForm(n,p,c){
parametros = "nome="+n+"&preço="+p;//Define os parâmetros da url que será enviada
return parametros;//Retorna o valor da variável como resposta da função
}
//Exibe ou oculta a mensagem de espera
function Aviso(exibir){
var saida = document.getElementById("avisos");//Armazena a chamada da div avisos
if(exibir){// Se exibir for verdadeio...
saida.className = "aviso";//Define que a classe a ser usada será avisos
saida.innerHTML = "Aguarde... Processando!";// Exibe o aviso: Aguarde... Processando!
}else{
saida.className = "";//Elimina a classe se exibir for falso
saida.innerHTML = "";//Não exibe nenhum aviso
}
}
//Trata a resposta do servidor, de acordo com a operação realizada
function trataDados(){
var resposta = ajax.responseText; //armazena a resposta do servidor
var linha = document.getElementById(linhaEmEdicao);//Aramazena o id da linha em edição
if(resposta == "atualizou"){//registro foi atualizado
//volta ao estilo antigo
linha.className='linha'; //Define o nome da classe que será usada na linha
var celulas = linha.cells;
//coloca novos valores nas celulas
var meuForm = document.forms.formulario;//Armazena a chamada do formulário
var nome = meuForm.nome.value; //Armazena o valor do campo nome
var preço = meuForm.preço.value;//Armazena o valor do campo preço
celulas[1].innerHTML = nome;//Insere o nome do produto na celula
celulas[2].innerHTML = preço;//Insere o preço do produto na célula
celulas[3].innerHTML = dadosAtuais[3];// link para edição
celulas[4].innerHTML = dadosAtuais[4];// link para exclusão
linhaEmEdicao = null;
}else if (resposta == "excluir"){// registro excluído
linha.parentNode.removeChild(linha);//Remove a linha
linhaEmEdicao=null;
}else if(resposta.substring(0,9)=="cadastrou"){// registro foi incluído
linha.className='linha';//Define a classe que será usada
var celulas = linha.cells;
//obtém o código gerado para o produto no banco de dados
novoCodigo = resposta.substring(10);
//coloca os novos valores na celula
var meuForm = document.forms.formulario;
var nome = meuForm.nome.value;
var preço = meuForm.preço.value;
celulas[0].innerHTML = novoCodigo;
celulas[1].innerHTML = nome;
celulas[2].innerHTML = preço;
celulas[3].innerHTML = '<a href="#" onclick="EditarLinha(\''+linhaEmEdicao+'\');">Editar</a>';//Link para editar a linha
celulas[4].innerHTML = '<a href="#" onclick="ExcluirLinha(\''+linhaEmEdicao+'\');">Excluir</a>';//Link para excluir a linha
linhaEmEdicao = null;
}else{//mensagem de erro
if(resposta == 1){
alert('Produto atualizado.');
window.location.reload();
}
if(resposta == 2){
alert('Produto excluído.');
window.location.reload();
}
if(resposta == 3){
alert('Produto cadastrado.');
window.location.href="index.php";
}
Aviso(0);
}
}
estiloDataGrid.css
/*
contém os estilos que serão utilizados pelo sistema
Copyright (c) 2008 Aline Lima, Aline Magalhães, Andréa Lopes, Frederico Pimentel.
Este documento permite cópia, distribuição e/ou modificação garantida sob os termos da Lincença Pública Geral Menor do GNU conforme publicada pela Free Software Foundation; tanto a versão 2.1 da Licença quanto as versões posteriores. Esta biblioteca é distribuído na expectativa de que seja útil, porém, SEM NENHUMA GARANTIA; nem mesmo a garantia implícita de COMERCIABILIDADE OU ADEQUAÇÃO A UMA FINALIDADE ESPECÍFICA. Consulte a Licença Pública Geral Menor do GNU para mais detalhes.
*/
/*Define as configurações que serão usadas na tabela*/
table{
width:800px;
border:#000000 1px solid;
}
/*Define as configurações que serão usadas na célula da tabela*/
td{
border:#dbdbdb 1px solid;
}
.linha{
background-color:#ffffff;
}
body{
font:Verdana, Arial, Helvetica, sans-serif; color:#333399;
}
table{
width:100%;
border:#f4f4f4 2px outset;
background-color:#006699;
color: #666;
}
img {
border:none
}
.linhas{
background-color: #f7f7f7
}
#editar, #excluir, #codigo{
width:60px;
text-align:center
}
#preço{
width:150px
}
#titulo{
font-size:18px;
color:#003399;
text-align:center;
background:url(images/table_title_bg.png) repeat-x center;
}
#cabecalho, #novo{
background:url(images/table_header_bg.png) repeat-x center;
}
.linhaSelecionada{
background-color: #B6C1E0; font-weight:bold;
}
.aviso{
border: thin solid #000000;
font-size:12pt;
font-weight:bold;
color:#ffffff;
padding-bottom:10px;
padding-top:50px;
background:url(images/loader.gif) no-repeat center #006699;
}
SQL
CREATE TABLE `produtos` (
`codigo` int(100) NOT NULL,
`protocolo` varchar(100) NOT NULL,
`status` varchar(100) NOT NULL,
`abertura` date NOT NULL,
`fechamento` date NOT NULL,
`tipo` varchar(255) NOT NULL,
`atendente` varchar(255) default NULL,
PRIMARY KEY (`codigo`,`protocolo`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
Pergunta
Kandrakah
Boa noite.
eu sou novo aqui e gostaria de uma ajuda em um pequeno sistema que estou tentando montar.
É um pequeno gerenciador de protocolos de atendimento (quero usar para "anotar" os protocolos CLARO)
Eu peguei um sistema pronto e editei ele inserindo novos campos (ID, Protocolo, Status, Abertura, Fechamento , Tipo e Atendente)
O problema é que agora ele não edita e nem insere novos dados, apenas exclui. Eu não sei o que fazer pra concertar esse bug e gostaria de uma ajuda.
Scripts
index.php
<html> <head> <script type="text/javascript" src="bibliotecaAjax.js"></script> <script type="text/javascript" src="dataGrid.js"></script> <link rel="stylesheet" type="text/css" href="estiloDataGrid.css"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Protocolos Claro</title> <style type="text/css"> <!-- body,td,th { color: #D4D0C8; } body { background-image: url(images/body.jpg); background-repeat: repeat; } #avisos form #minhaTabela #cabecalho #atendente strong { color: #666; } #avisos form #minhaTabela #cabecalho #tipo strong { color: #666; } #avisos form #minhaTabela #cabecalho #fechamento strong { color: #666; } #avisos form #minhaTabela #cabecalho #abertura strong { color: #666; } #avisos form #minhaTabela #cabecalho #status strong { color: #666; } #avisos form #minhaTabela #cabecalho #protocolo strong { color: #666; } #avisos form #minhaTabela #cabecalho #id strong { color: #666; } --> </style></head> <body> <p><a href="index.php"><img src="images/logo.png" width="60" height="62"></a></p> <div id="avisos"> <form name="formulario"> <table id="minhaTabela" cellpadding="1" cellspacing="0"> <tr> <td colspan="300" id="titulo"><strong>Cadastro de Protocolos Claro</strong></td> </tr> <tr id="cabecalho"> <td width="30" id="id"><strong>ID</strong></td> <td width="128" id="protocolo"><strong>Protocolo</strong></td> <td width="80" id="status"><strong>Status</strong></td> <td width="108" id="abertura"><strong>Abertura</strong></td> <td width="135" id="fechamento"><strong>Fechamento</strong></td> <td width="91" id="tipo"><strong>Tipo</strong></td> <td width="449" id="atendente"><strong>Atendente</strong></td> <td width="61" id="editar"><strong> </strong></td> <td width="69" id="excluir"><strong> </strong></td> </tr> <?php $con = mysql_connect('localhost', 'root', '') or die ("Erro de conexão"); $res1 = mysql_select_db('trabalho') or die ("Banco de dados inexistente"); $res = mysql_query("select * from produtos ORDER BY codigo ASC"); $total = mysql_num_rows($res); for($i=0; $i<$total; $i++){ $dados = mysql_fetch_row($res); $codigo = $dados[0]; $protocolo = $dados[1]; $status = $dados[2]; $abertura = $dados[3]; $fechamento = $dados[4]; $tipo = $dados[5]; $atendente = $dados[6]; $data_quebrada1 = explode ( "-", $abertura); $abertura2 = $data_quebrada1[2]."/".$data_quebrada1[1]."/".$data_quebrada1[0]; $data_quebrada2 = explode ( "-", $fechamento); $fechamento2 = $data_quebrada2[2]."/".$data_quebrada2[1]."/".$data_quebrada2[0]; if($fechamento2 == '00/00/0000'){ $fechamento2 = "Em Andamento"; } if($status == '0'){ $status = "Aberto"; } if($status == '1'){ $status = "Fechado"; } if($atendente == ''){ $atendente = "Indefinido"; } if($status == '2'){ $status = "Inexistente"; $abertura2 = "Inexistente"; $fechamento2 = "Inexistente"; $fechamento2 = "Inexistente"; $tipo = "Inexistente"; $atendente = "Inexistente"; } $idLinha = "linha$i"; echo '<tr id="'.$idLinha.'">'; echo '<td class="linhas" align="center">'.$codigo.'</td>'; echo "<td class=\"linhas\">$protocolo</td>"; echo "<td class=\"linhas\">$status</td>"; echo "<td class=\"linhas\">$abertura2</td>"; echo "<td class=\"linhas\">$fechamento2</td>"; echo "<td class=\"linhas\">$tipo</td>"; echo "<td class=\"linhas\">$atendente</td>"; echo "<td class=\"linhas\"><a href=\"#\" onclick=\"EditarLinha('$idLinha', '$codigo');\"><img src=\"images/editar.gif\" alt=\"Editar\" title=\"Editar\"></a></td>"; echo "<td class=\"linhas\"><a href=\"#\" onclick=\"ExcluirLinha('$idLinha', '$codigo');\"><img src=\"images/excluir.png\" alt=\"Excluir\" title=\"Excluir\"></a></td>"; } ?> <tr> <td colspan="300" id="novo"><a href="java script:NovoRegistro();"><img src="images/novo.png" alt="Novo Registro" title="Novo Registro" /></a></td> </tr> </table> </form> </div> </body> </html>index2.php<?php $gmtDate = gmdate("D, d M Y H:i:s"); header("Expires: {$gmtDate} GMT"); header("Last-Modified: {$gmtDate} GMT"); header("Cache-Control: no-cache, must-revalidate"); header("Pragma: no-cache"); header("Content-Type: text/html; charset=ISO-8859-1"); $con = mysql_connect('localhost', 'root', '') or die ("Erro de conexão"); $res = mysql_select_db('trabalho') or die ("Banco de dados inexistente"); import_request_variables("g"); // Atualização do produto if($_GET['acao'] == 'atualizar'){ if(!empty($_GET['nome']) && !empty($_GET['preço'])){ $preço = str_replace(",",".", $_GET['preço']); //troca a vírgula por ponto if(is_numeric($preço)){ $sql = mysql_query("update produtos set nome = '".$_GET['nome']."', preço = '".$preço."' where codigo = '".$_GET['cod']."'"); $res2 = mysql_query($sql); }else{ echo 'Preço inválido'; } } } // exclusão de produtos elseif($_GET['acao'] == 'excluir'){ $sql = "delete from produtos where codigo = '".$_GET['cod']."'"; $res = mysql_query($sql); } // Cadastro de produtos elseif($_GET['acao'] == 'cadastrar'){ if(!empty($_GET['nome']) && !empty($_GET['preço'])){ $preço = str_replace(",",".", $_GET['preço']); if(is_numeric($preço)){ $sql = "insert into produtos (nome, preço) values ('".$_GET['nome']."', '".$preço."')"; $res2 = mysql_query($sql); $novo_codigo = mysql_insert_id($con); //retorna a mensagem de confirmação de cadasro do produto }else{ echo 'Preço inválido'; } }else{ echo 'Você deve preencher todos os campos!'; } } ?>bibliotecaAjax.js/* Esta biblioteca é composta por um conjunto de funções que tratam e manipulam as informações enviadas do browser ao servidor e vice-versa Copyright (c) 2008 Aline Lima, Aline Magalhães, Andréa Lopes e Frederico Pimentel. Este documento permite cópia, distribuição e/ou modificação garantida sob os termos da Lincença Pública Geral Menor do GNU conforme publicada pela Free Software Foundation; tanto a versão 2.1 da Licença quanto as versões posteriores. Esta biblioteca é distribuída na expectativa de que seja útil, porém, SEM NENHUMA GARANTIA; nem mesmo a garantia implícita de COMERCIABILIDADE OU ADEQUAÇÃO A UMA FINALIDADE ESPECÍFICA. Consulte a Licença Pública Geral Menor do GNU para mais detalhes. */ var ajax; var dadosUsuario; // ----- Cria o objeto e faz a requisição ----- function requisicaoHTTP(tipo,url,assinc){ if(window.XMLHttpRequest){// Objeto usado no Mozila, Safari... ajax = new XMLHttpRequest; } else if(window.ActiveXObject){// Objeto usado pelo Internet Explorer ajax = new ActiveXObject("Msxml2.XMLHTTP"); if(!ajax){ ajax = new ActiveXObject("Microsoft.XMLHTTP"); } } //ajax é a variável que vai armanezar o objeto que será utilizado baseado no navegador usado pelo usuário if (ajax){ iniciaRequisicao(tipo,url,assinc); // Iniciou com sucesso }else{ alert("Seu navegador não possui suporte a essa aplicação"); // Mensagem que será exibida caso não seja possível iniciar a requisição } } // ----- Inicia o objeto criado e envia os dados (se existirem) ----- function iniciaRequisicao(tipo, url, bool){ ajax.onreadystatechange = trataResposta; //Atribui ao objeto a resposta da função trataResposta ajax.open(tipo, url, bool); //Informa os parâmetros do objeto: tipo de envio, url e se a comunicação será assíncrona ou não ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");//Recupera as informações do cabeçalho ajax.send(dadosUsuario);// Envia os dados processados para o navegador } // ----- Inicia requisição com envio de dados ----- function enviaDados(url){ criaQueryString(); //Chama a função que transformará os dados enviados em ua string requisicaoHTTP("POST", url, true); //Chama a função que fará a requisição de dados ao servidor } // ----- Cria a string a ser enviada, formato campo1=valor&campo2=valor2... ----- function criaQueryString(){ dadosUsuario = ""; var frm = document.forms[0]; //Identifica o formulário var numElementos = frm.elements.length;// Informa o número de elementos for(var i = 0; i < numElementos; i++){//Monta a querystring if(i < numElementos-1){ //Se i for menor que o número de elementos (menos 1) dadosUsuario += frm.elements[i].name+"="+encodeURIComponent(frm.elements[i].value)+"&"; //recupera os valores que comporão a url se houver mais elementos a serem incluídos; } else{ dadosUsuario += frm.elements[i].name+"="+encodeURIComponent(frm.elements[i].value); //recupera os valores que comporão a url se houver mais elementos a serem incluídos; } } } // ----- Trata a resposta do servidor ----- function trataResposta(){ if(ajax.readyState == 4){// Se todas as informações e a conexão foi fechada... if(ajax.status == 200){// Se o status da conexão for 200 trataDados(); // Chama a função trataDAdos } else{ alert("Problema na comunicação com o objeto XMLHttpRequest."); } } } /* requisicaoHTTP = tenta instanciar o objeto XMLHttpRequest e, se conseguir, chama a função que fará a requisição, passando a ela os dados fornecidos pelo usuário. iniciaRequisição = recebe os dados da função requisiçãoHTTP e processa a requisição, além de definir a função que irá tratar a resposta do servidor. enviaDados = faz uma requisição definindo antes os dados a serem enviados, que, no caso, são obtidos de um formulário HTML. Caso não haja dados a seresm enviados, podemos chamar diretamente a função requisicaoHTTP. criaQueryString = coloca os dados do firmulário no formato de uma QueryString, para que o servidor possa identificar os pares nome/valor. trataResposta = verifica se a requisição foi conluída e inicia o tratamento dos dados. Há diferença desta função para a função trataDados(), que você deverá criar em seu programa para realizar o tratamento desejado sobre os dados retornados pelo servidor. Possíveis valores do readyState 0(Não Iniciado): O Objeto foi criado mas o método open() não foi chamado ainda. 1(Carregando): O método open() foi chamado mas a requisição não foi enviada ainda. 2(Carregado): A requisição foi enviada. 3(Incompleto): Uma parte da resposta do servidor foi recebida. 4(Completo): Todos as informações foram recebidas e a conexão foi fechada com sucesso. */dataGrid.js/* Esta biblioteca é composta por um conjunto de funções que tratam as informações que foram transmitidas pelo servidor, para exibição do navegador do usuário. Copyright (c) 2008 Aline Lima, Aline Magalhães, Andréa Lopes e Frederico Pimentel. Este documento permite cópia, distribuição e/ou modificação garantida sob os termos da Lincença Pública Geral Menor do GNU conforme publicada pela Free Software Foundation; tanto a versão 2.1 da Licença quanto as versões posteriores. Esta biblioteca é distribuída na expectativa de que seja útil, porém, SEM NENHUMA GARANTIA; nem mesmo a garantia implícita de COMERCIABILIDADE OU ADEQUAÇÃO A UMA FINALIDADE ESPECÍFICA. Consulte a Licença Pública Geral Menor do GNU para mais detalhes. */ var dadosAtuais; //Array que guarda os dados atuais da linha antes de editá-la var linhaEmEdicao = null; //Guarda o ID da linha a ser editada, incluída ou excluída var linhasNovas = 0; //Variável auxiliar var num = 0; //Prepara uma linha para edição function EditarLinha(idLinha, cod){ if(num == 0) { num = 1; //if(!linhaEmEdicao){//Se linhaEmEdicao não for nulo... linhaEmEdicao = idLinha; //Armazena o id da linha que será editada //Obtém a linha a ser editada e altera a sua cor var linha = document.getElementById(idLinha);//Obtém o id da linha que será editada linha.className = 'linhaSelecionada';//Altera a cor da linha que será editada var celulas = linha.cells;//Aramazena a célula que será editada //salva os dados atuais para o caso de cancelamento SalvaDados(idLinha);//Chama a função que salvára os dados atuais da linha antes de editá-la //Cria os campo de texto editáveis celulas[0].innerHTML = '<input type="hidden" name="id" value="'+celulas[0].innerHTML+'">';//Armazena o código do produto num campo oculto de formulário celulas[1].innerHTML = '<input type="text" name="protocolo" value="'+celulas[1].innerHTML+'">';//Mostrar o campo texto permitindo a edição do nome do produto celulas[2].innerHTML = '<input type="text" name="status" value="'+celulas[2].innerHTML+'">';//Mostrar o campo texto permitindo a edição do preço do produto celulas[3].innerHTML = '<input type="text" name="abertura" value="'+celulas[3].innerHTML+'">'; celulas[4].innerHTML = '<input type="text" name="fechamento" value="'+celulas[4].innerHTML+'">'; celulas[5].innerHTML = '<input type="text" name="tipo" value="'+celulas[5].innerHTML+'">'; celulas[6].innerHTML = '<input type="text" name="atendente" value="'+celulas[6].innerHTML+'">'; celulas[7].innerHTML = '<a href="#" onclick="Atualizar(document.formulario.id.value, document.formulario.protocolo.value, document.formulario.status.value, document.formulario.abertura.value, document.formulario.fechamento.value, document.formulario.tipo.value, document.formulario.atendente.value);"><img src="images/atualizar.gif" alt="Atualizar" title="Atualizar"></a><br/>'+'<a href="#" onclick="Cancelar('+idLinha+');"><img src="images/cancelar.gif" alt="Cancelar" title="Cancelar"></a>';//Monta os links que chamarão as funções para atualizar ou cancelar a edição da linha celulas[8].innerHTML = ' ';//Insere um espaço na última célula //}else{ //alert("Você já está digitando um registro."); //} }else{ alert('Você já está editando uma linha. \n Conclua a edição desta linha para então editar outra.'); } } //Exclui uma linha da tabela function ExcluirLinha(idLinha, cod){ if(num == 0){ var linha = document.getElementById(idLinha);//Armazena o id da linha que será excluída linha.className = 'linhaSelecionada';// define a classe de estilos que será usada na linha if(confirm("Tem certeza que deseja excluir este registro?")){//Pergunta se a linha realmente deve ser excluída Aviso(1); // Exibe o aviso: Aguarde... var url = "index2.php?acao=excluir&cod="+cod;//Url que será enviada requisicaoHTTP("GET", url, true);//Função que fará a requisição }else{ linha.className = 'linha';//Define a classe de estilo que será usada se a linha não estiver maracada para exclusão } }else{ alert('Você deve concluir a edição da linha para então excluir algum produto.'); } } //Cria um novo registro function NovoRegistro(){ if(num == 0){ //Se houver linha sendo editada, cancela edição if(linhaEmEdicao){// Se linhas em edição for nulo... alert("Você está com um registro aberto. Feche-o antes de prosseguir"); }else{ //Insere uma nova linha na tabela proxIndice = document.getElementById('minhaTabela').rows.length-1;//Armazena o índice a linha que será inserida var novaLinha = document.getElementById('minhaTabela').insertRow(proxIndice);//Insere uma nova linha na tabela novaLinha.className = 'linhaSelecionada';//Define a classe de estilos que será usada na n ova linha } //Define o id da nova linha (que será usado em caso de edição/exclusão novoId = "nova"+linhasNovas;//Armazena o id da linha novaLinha.setAttribute('id', novoId);//Define que o nome do id será o valor da variável novoId linhasNovas++; //Incrementa o valor da variável linhaEmEdicao = novoId;// Aramazena o valor da variável novoId //Insere as células na linha criada var novasCelulas = new Array(5); //Cria um array for(var i=0; i<5; i++){ novasCelulas[i] = novaLinha.insertCell(i); //Preenche o array } //Cria os campos dos formulários novasCelulas[0].innerHTML = '*'; //código novasCelulas[1].innerHTML = '<input type="text" name="nome">'; //insere o campo nome novasCelulas[2].innerHTML = '<input type="text" name="preço">'; //insere o campo código novasCelulas[3].innerHTML = '<a href="#" onclick="Cadastrar(document.formulario.nome.value, document.formulario.preço.value);"><img src="images/cadastrar.gif" alt="Cadastrar" title="Cadastrar"></a>'; //Monta os links que chamarão as funções para cadastrar e cancelar a inserção de uma nova linha novasCelulas[4].innerHTML = '<a href="#" onclick="CancelarInclusao();"><img src="images/cancelar.gif" alt="Cancelar" title="Cancelar"></a>';// Cria o link para cancelar a inserção de dados do formulário num =1; }else{ alert('Você já está editando um registro. \n Conclua a edição para então cadastrar um novo produto.'); } } //Salva os dados atuais num array function SalvaDados(idLinha){ var celulas = document.getElementById(idLinha).cells;//Armazena o id da célula dadosAtuais = new Array(celulas.length);//Armazena num array os dados atuais da linha for(var i=0; i<celulas.length; i++){ dadosAtuais[i] = celulas[i].innerHTML; //Preenche o array } linhaEmEdicao = null; } //Cancela a edição de uma linha function Cancelar(idLinha){ self.location.href="index.php"; //Direciona a página linhaEmEdicao = null; num = 0; } //Cancela a inclusão de uma linha, excluindo-a function CancelarInclusao(){ var linha = document.getElementById(linhaEmEdicao);//Armazena o id da linha em edição linha.parentNode.removeChild(linha);// Remove a linha que seria incluída linhasNovas--;//Decrementa o número de linhas linhaEmEdicao = null; num = 0; } //Atualiza o conteúdo da linha function Atualizar(n,p,c){ Aviso(1); //Exibe o aviso aguarde... var dados = ObtemDadosForm(n, p, c);//Chama a função que montará a string com os dados que estarão na url var cod = c;//Armazena o código do produto que será atualizado var url = "index2.php?acao=atualizar"; //Monta a url url += "&cod="+cod+"&"+dados;//Monta a url requisicaoHTTP("GET", url, true);//Inicia a requisição } //Chamada do programa em PHP que cadastra no banco de dados function Cadastrar(n, p){ Aviso(1);//Chama a função aviso var dados = ObtemDadosForm(n, p, 0); //Armazena a string com dados que comporão a url var url = "index2.php?acao=cadastrar&"+dados;//Url que será enviada requisicaoHTTP("GET", url, true);//Inicia a requisição } //Coloca os dados do formulário em formato de query string function ObtemDadosForm(n,p,c){ parametros = "nome="+n+"&preço="+p;//Define os parâmetros da url que será enviada return parametros;//Retorna o valor da variável como resposta da função } //Exibe ou oculta a mensagem de espera function Aviso(exibir){ var saida = document.getElementById("avisos");//Armazena a chamada da div avisos if(exibir){// Se exibir for verdadeio... saida.className = "aviso";//Define que a classe a ser usada será avisos saida.innerHTML = "Aguarde... Processando!";// Exibe o aviso: Aguarde... Processando! }else{ saida.className = "";//Elimina a classe se exibir for falso saida.innerHTML = "";//Não exibe nenhum aviso } } //Trata a resposta do servidor, de acordo com a operação realizada function trataDados(){ var resposta = ajax.responseText; //armazena a resposta do servidor var linha = document.getElementById(linhaEmEdicao);//Aramazena o id da linha em edição if(resposta == "atualizou"){//registro foi atualizado //volta ao estilo antigo linha.className='linha'; //Define o nome da classe que será usada na linha var celulas = linha.cells; //coloca novos valores nas celulas var meuForm = document.forms.formulario;//Armazena a chamada do formulário var nome = meuForm.nome.value; //Armazena o valor do campo nome var preço = meuForm.preço.value;//Armazena o valor do campo preço celulas[1].innerHTML = nome;//Insere o nome do produto na celula celulas[2].innerHTML = preço;//Insere o preço do produto na célula celulas[3].innerHTML = dadosAtuais[3];// link para edição celulas[4].innerHTML = dadosAtuais[4];// link para exclusão linhaEmEdicao = null; }else if (resposta == "excluir"){// registro excluído linha.parentNode.removeChild(linha);//Remove a linha linhaEmEdicao=null; }else if(resposta.substring(0,9)=="cadastrou"){// registro foi incluído linha.className='linha';//Define a classe que será usada var celulas = linha.cells; //obtém o código gerado para o produto no banco de dados novoCodigo = resposta.substring(10); //coloca os novos valores na celula var meuForm = document.forms.formulario; var nome = meuForm.nome.value; var preço = meuForm.preço.value; celulas[0].innerHTML = novoCodigo; celulas[1].innerHTML = nome; celulas[2].innerHTML = preço; celulas[3].innerHTML = '<a href="#" onclick="EditarLinha(\''+linhaEmEdicao+'\');">Editar</a>';//Link para editar a linha celulas[4].innerHTML = '<a href="#" onclick="ExcluirLinha(\''+linhaEmEdicao+'\');">Excluir</a>';//Link para excluir a linha linhaEmEdicao = null; }else{//mensagem de erro if(resposta == 1){ alert('Produto atualizado.'); window.location.reload(); } if(resposta == 2){ alert('Produto excluído.'); window.location.reload(); } if(resposta == 3){ alert('Produto cadastrado.'); window.location.href="index.php"; } Aviso(0); } }estiloDataGrid.css/* contém os estilos que serão utilizados pelo sistema Copyright (c) 2008 Aline Lima, Aline Magalhães, Andréa Lopes, Frederico Pimentel. Este documento permite cópia, distribuição e/ou modificação garantida sob os termos da Lincença Pública Geral Menor do GNU conforme publicada pela Free Software Foundation; tanto a versão 2.1 da Licença quanto as versões posteriores. Esta biblioteca é distribuído na expectativa de que seja útil, porém, SEM NENHUMA GARANTIA; nem mesmo a garantia implícita de COMERCIABILIDADE OU ADEQUAÇÃO A UMA FINALIDADE ESPECÍFICA. Consulte a Licença Pública Geral Menor do GNU para mais detalhes. */ /*Define as configurações que serão usadas na tabela*/ table{ width:800px; border:#000000 1px solid; } /*Define as configurações que serão usadas na célula da tabela*/ td{ border:#dbdbdb 1px solid; } .linha{ background-color:#ffffff; } body{ font:Verdana, Arial, Helvetica, sans-serif; color:#333399; } table{ width:100%; border:#f4f4f4 2px outset; background-color:#006699; color: #666; } img { border:none } .linhas{ background-color: #f7f7f7 } #editar, #excluir, #codigo{ width:60px; text-align:center } #preço{ width:150px } #titulo{ font-size:18px; color:#003399; text-align:center; background:url(images/table_title_bg.png) repeat-x center; } #cabecalho, #novo{ background:url(images/table_header_bg.png) repeat-x center; } .linhaSelecionada{ background-color: #B6C1E0; font-weight:bold; } .aviso{ border: thin solid #000000; font-size:12pt; font-weight:bold; color:#ffffff; padding-bottom:10px; padding-top:50px; background:url(images/loader.gif) no-repeat center #006699; }SQLEspero que possam me ajudar
Desde já agradeço...
Link para o comentário
Compartilhar em outros sites
6 respostass a esta questão
Posts Recomendados
Participe da discussão
Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.