[ajax] Administração Completa

crucifier · Junho 14, 2006

Olá galera, tudo certo?

faz um tempinho que não passo por aqui, voltei para ajudar a galerinha que curte ajax aih...

fiz um script de administração total de uma pagina (adicionar, deletar, alterar)...

são 3 paginas, index.php, crucifier.php (:lol:) e crucifier.js (:yay:)

aceito sugestões para mudar isso...tambem estou aprendendo esse negocio de ajax...

aih vai o codigo:

(comentem ^_^ )

estrutura da tabela

CREATE TABLE tutorial (
id int(10) unsigned NOT NULL auto_increment,
nome varchar(50) NOT NULL default '',
sobrenome varchar(50) NOT NULL default '',
PRIMARY KEY (id)
) TYPE=MyISAM;
INSERT INTO tutorial VALUES (1, 'alo', 'teste');
INSERT INTO tutorial VALUES (2, 'pedro', 'neto');
INSERT INTO tutorial VALUES (3, 'crucifier', 'pedro neto');

index.php

<!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=iso-8859-1" />
<script language="javascript" src="crucifier.js"></script>
<style>
* {
    text-align: center;
}
h1 {
font-family: Verdana, Tahoma, Arial, Trebuchet MS, Sans-Serif, Georgia, Courier, Times New Roman, Serif;
    font-size: 20px;
    font-weight: bold;
}
th {
    background: #f3f3f3;
    height: 30px;
}
td {
    background: #f9f9f9;
    height: 20px;
}
</style>
</head><body>
<h1>Administra&ccedil;&atilde;o de registros via Ajax - By Crucifier </h1>
  <table align="center" cellspacing="0" class="tbls-consulta" id="tabela">
    <tbody>
    <tr>
      <th width="70">ID</th>
      <th width="200">Fun&ccedil;&atilde;o</th>
      <th width="200">Comiss&atilde;o</th>
      <th width="179">Op&ccedil;&otilde;es</th>
    </tr>
    <?
    mysql_connect("localhost", "root", "");
    mysql_select_db("tuto");
    
    $sql = mysql_query("SELECT id, nome, sobrenome FROM tutorial ORDER BY id ASC");
    while($coluna = mysql_fetch_array($sql)){
        $id = $coluna["id"];
  ?>
  <tr>
      <td><?=$coluna['id'];?></td>
      <td><span id="campo<?=$id?>"><?= $coluna["nome"]; ?></span></td>
      <td><span id="campo_<?=$id?>"><?= $coluna["sobrenome"]; ?></span></td>
      <td><span id="enviar<?=$id?>"><a href="java script:editar('<?=$id;?>')">alterar</a></span><br /><a href="java script:;" onClick="apagar('<?=$id ?>', this.parentNode.parentNode.rowIndex);">del</a></td>
    </tr>
    <?
    }
  ?>
  </table>
<table align="center" cellspacing="0">
    <tr>
      <td width="70">&nbsp;</td>
      <td width="200"><input name="nome" type="text" id="nome" /></td>
      <td width="200"><input name="sobrenome" type="text" id="sobrenome" /></td>
      <td width="179">
      <input name="button" type="button" onclick="add();" value=" + " /></td>
    </tr>
    <tr>
      <th colspan="4"></th>
    </tr>
    </tbody>
</table>

crucifier.js

function ajax() {
};
ajax.prototype.iniciar = function() {

    try{
        this.xmlhttp = new XMLHttpRequest();
    }catch(ee){
        try{
            this.xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e){
            try{
                this.xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }catch(E){
                this.xmlhttp = false;
            }
        }
    }
    return true;
}

ajax.prototype.ocupado = function() {
    estadoAtual = this.xmlhttp.readyState;
    return (estadoAtual && (estadoAtual < 4));
}

ajax.prototype.processa = function() {
    if (this.xmlhttp.readyState == 4 && this.xmlhttp.status == 200) {
        return true;
    }
}

ajax.prototype.enviar = function(url, metodo, modo) {
    if (!this.xmlhttp) {
        this.iniciar();
    }
    if (!this.ocupado()) {
        if(metodo == "GET") {
            this.xmlhttp.open("GET", url, modo);
            this.xmlhttp.send(null);
        } else {        
            this.xmlhttp.open("POST", url, modo);
            this.xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
            this.xmlhttp.setRequestHeader("Cache-Control", "no-store, no-cache, must-revalidate");
            this.xmlhttp.setRequestHeader("Cache-Control", "post-check=0, pre-check=0");
            this.xmlhttp.setRequestHeader("Pragma", "no-cache");
            this.xmlhttp.send(url);
        }    

        if (this.processa) {
            return unescape(this.xmlhttp.responseText.replace(/\+/g," "));
        }
    }
    return false;
}


function editar(id) {
    elem = document.getElementById('campo'+id); //primeiro campo
    elem2 = document.getElementById('campo_'+id); //segundo campo
    bot = document.getElementById("enviar"+id); //botao de enviar
    elem.innerHTML = "<input type=\"text\" value=\"" + elem.innerHTML + "\" id='"+id+"_c' />"; //inserir o primeiro input
    elem2.innerHTML = "<input type=\"text\" value=\"" + elem2.innerHTML + "\" id='"+id+"d_c' />"; //inserir o segundo input
    bot.innerHTML = '<a href="java script:editado(\''+ id +'\')">enviar</a>'; //inserir o botao de enviar a alteracao
}


function editado(id) {
    envia = document.getElementById('enviar'+id); //span onde vai aparecer o botaozinho para enviar a alteracao
    campo = document.getElementById(id+'_c').value; //primeiro campo
    campod = document.getElementById(id+'d_c').value; //segundo campo
    ecampo = escape(campo); //para não haver problemas de acentos e tal
    ecampod = escape(campod); //para não haver problemas de acentos e tal
    document.getElementById('campo'+id).innerHTML = campo; //alterar o registro na pagina
    document.getElementById('campo_'+id).innerHTML = campod; //alterar o registro na pagina
    envia.innerHTML = '<a href="java script:editar(\''+id+'\')">alterar</a>'; //depois de enviar, mostrar de novo o botão de editar
    xmlhttp = new ajax();
    xmlhttp.enviar('crucifier.php?acao=edit&id='+ id + '&nome='+ ecampo + '&sobrenome=' + ecampod, "POST", false); //endereco para enviar a alteração
}


function addrow(id) {
    também = document.getElementById('tabela'); //id da tabela
    campo = document.getElementById('nome'); //primeiro campo
    campod = document.getElementById('sobrenome'); //segundo campo
    
    var x=também.insertRow(-1); //inserir a linha
    var y=x.insertCell(0); //inserir coluna 1
    var z=x.insertCell(1); //inserir coluna 2
    var w=x.insertCell(2); //inserir coluna 3
    var b=x.insertCell(3); //inserir coluna 4
    
    y.innerHTML=id; //na primeira coluna, inserir o id
    z.innerHTML="<span id=\"campo"+id+"\">"+campo.value+"</span>"; //na segunda coluna, inserir o nome
    w.innerHTML="<span id=\"campo_"+id+"\">"+campod.value+"</span>"; //na terceira coluna, inserir o sobrenome
    b.innerHTML='<span id="enviar'+id+'"><a href="java script:editar(\''+id+'\')">alterar</a></span><br><a href="java script:;" onClick="deleterow(\''+id+'\', this.parentNode.parentNode.rowIndex);">del</a>'; //na quarta coluna, inserir as opções
}

function add() {
    campo = document.getElementById('nome').value; //recupera primeiro campo
    ecampo = escape(campo); //"escapa" primeiro campo
    campod = document.getElementById('sobrenome').value; //recupera segundo campo
    ecampod = escape(campod);//"escapa" segundo campo
    xmlhttp = new ajax();
    id = xmlhttp.enviar('crucifier.php?acao=add&nome='+ ecampo + '&sobrenome=' + ecampod, "POST", false); //manda adicionar
    addrow(id); //adiciona a linha com os campos
    campo.value = ""; //limpa o campo 1
    campod.value = ""; //limpa o campo2
}

function apagar(id, rowIndex)
{
    if (confirm('Tem certeza que deseja excluir este registro?'))
    {
        document.getElementById("tabela").deleteRow(rowIndex); //id da tabela + excluir linha
        xmlhttp = new ajax();
        xmlhttp.enviar('crucifier.php?acao=del&id='+ id, "POST", false); //envia o comando para deletar
    }
}

crucifier.php

<?php

//conecta ao banco de dados
mysql_connect("localhost", "root", "");
mysql_select_db("tuto");

//essa function eu coloquei para retornar o id e inserir na tabela, ela é desnecessaria para o funcionamento...coloquei porq no meu tava xD
function autoindex($também)
{
    $query = mysql_query('SHOW TABLE STATUS LIKE "' . $também . '"');
    $data = mysql_fetch_array($query);
    return $data['Auto_increment'];
}

switch ($_REQUEST['acao'] == "add") {
//se acao = add então adicionar
case 'add' :
    $valor    = urldecode($_REQUEST['nome']);
    $valor2 = urldecode($_REQUEST['sobrenome']);
    echo autoindex("tutorial");
    mysql_query("INSERT INTO tutorial VALUES('','$valor','$valor2')");
    break;
//se acao = del então deletar
case 'del' :
    $id = $_REQUEST['id'];
    mysql_query("DELETE FROM tutorial WHERE id = '$id'");
    break;
//se acao = edit então editar
case 'edit' :
    $id        = $_REQUEST["id"];
    $valor    = urldecode($_REQUEST["nome"]);
    $valor2 = urldecode($_REQUEST["sobrenome"]);
    mysql_query("UPDATE tutorial SET nome = '$valor', sobrenome = '$valor2' WHERE id = '$id'");
    break;
}

?>

Maio 21, 2007

Cara como é que eu faço para inserir os registros em codificação UTF-8.

Senão fica tudo com sinla de "?"

Maio 27, 2007

Felipe, a principio o urldecode() deveria dar conta disso...

oh não, confundi tudo... peço desculpas...

realmente parece que não há um tratamento para isso felipe

sobre o urlencode, ele pega os dados requisitados, não tem nada a ver com a codificação... peço desculpas pelo equívoco ;)

freddys_ · Outubro 2, 2007

show de bola este script, dá pra se ver como o Ajax facilita, a interação do usuário com o sistema!

Dezembro 6, 2007

os liks del e atualiza não funcionaram;

Gabriel Koerich · Abril 1, 2009

cara acho que isso ficou estranho no começo do switch

ele tem que fazer o switch apenas da variável, não já setando o valor dela

o correto não seria assim?

switch ($_REQUEST['acao']){
//se acao = add então adicionar
case 'add' :
    $valor    = urldecode($_REQUEST['nome']);
    $valor2 = urldecode($_REQUEST['sobrenome']);
    echo autoindex("tutorial");
    mysql_query("INSERT INTO tutorial VALUES('','$valor','$valor2')");
    break;
//se acao = del então deletar
case 'del' :
    $id = $_REQUEST['id'];
    mysql_query("DELETE FROM tutorial WHERE id = '$id'");
    break;
//se acao = edit então editar
case 'edit' :
    $id        = $_REQUEST["id"];
    $valor    = urldecode($_REQUEST["nome"]);
    $valor2 = urldecode($_REQUEST["sobrenome"]);
    mysql_query("UPDATE tutorial SET nome = '$valor', sobrenome = '$valor2' WHERE id = '$id'");
    break;
}

talvez por isso o del e edit não funcionou com o amigo aima

11closed · Maio 27, 2010

iaew galera o tutorial tem uma otima função

gostei muito do script, gostaria de poder usar ele.

mais o problema é o botão editar e o excluir eles não funciona.

como arrumar ? ajudem aewwww.

t+

11closed · Maio 27, 2010

ops, eu dinovo

mais uma coisa na index.php o while não esta funcionando, quando abro a pagina fica td vazil como se no BD não tivese nd

estou tentando arrumar esse bug. mais não manjo muito, gostaria de ajuda ...

t+

Entrar

[ajax] Administração Completa

Pergunta

crucifier

Link para o comentário

Compartilhar em outros sites

7 respostass a esta questão

Posts Recomendados

Guest Felipe PS

Link para o comentário

Compartilhar em outros sites

Guest --tokageh --

Link para o comentário

Compartilhar em outros sites

freddys_

Link para o comentário

Compartilhar em outros sites

Guest --Eugênio --

Link para o comentário

Compartilhar em outros sites

Gabriel Koerich

Link para o comentário

Compartilhar em outros sites

11closed

Link para o comentário

Compartilhar em outros sites

11closed

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades