Deletando dados com checkbox sem refresh de página

29/08/2017

Nesse tutorial aprenderemos como deletar dados no banco de dados com checkbox através do Ajax. Utilizaremos para isso banco de dados MySql com conector MySqli,PHP, JQuery e HTML5.

Tabela para deletar dados com checkbox sem refresh

O código para criarmos a nossa tabela sql segue abaixo.

CREATE TABLE CARGOS (
	id INT NOT NULL AUTO_INCREMENT,
    PRIMARY KEY(id),
    cargo VARCHAR (30),
    nome VARCHAR (90)
)

Após criar a tabela, crie alguns registros para testar o sistema.

Conexão com o banco de dados (conecta.php)

Esse arquivo realiza a conexão do banco de dados com nosso PHP.

$servidor="localhost";
$usuario="root";
$senha="";
$bancodedados="db_mysqli";
$mysqli=new mysqli($servidor,$usuario,$senha,$bancodedados);

HTML5 com o formulário para deletar dados (index.php)

Criaremos nosso formulário que receberá o checkbox e irá realizar a exclusão dos dados.

Iniciamos linkando nossos arquivos:

<!doctype html>
<html lang="pt-br">
<head>
    <link rel="stylesheet" href="styleshhet.css">
    <script src="jquery-2.1.4.min.js"></script>
    <script src="javascript.js"></script>
</head>

<body>
    <?php include ("exibicao.php"); ?>
</body>
</html>

Arquivo de exibição dos dados (exibicao.php)

Esse arquivo contém os dados oriundos do banco de dados.

include('conecta.php');

$sql=$mysqli->prepare('select * from cargos');
$sql->execute();
$sql->bind_result($id,$cargo,$nome);

echo "
<div id='resultado'>
    <form action='deletar.php' name='form1' id='form1' method='post'>
    <table>
        <thead>
            <tr>
                <td>Selecionar</td>
                <td>Id</td>
                <td>Cargo</td>
                <td>Nome</td>
            </tr>
        </thead>

        <tbody>
";

    while($sql->fetch()){

    echo "
        <tr>
            <td><input type="checkbox" value="" name="checkbox[]" id="checkbox[]"></td>
            <td>$id</td>
            <td>$cargo</td>
            <td>$nome</td>
        </tr>
    ";
    }

    echo "
        </tbody>
    </table>
    ";
    <input type='submit' value='Deletar'>
    </form>
</div>

Estilizando uma table no HTML5 (stylesheet.php)

table thead td{
    width: 100%;
    background: #333;
    color:#FFF;
    height: 40px;
    text-align:center;
}

table tbody td{
    width: 100%;
    height: 40px;
    text-align:center;
}

Processamento dos dados (deletar.php)

Esse arquivo php será o responsável por receber as variáveis e deletar os dados no banco.

include('conecta.php');

foreach ($_POST['checkbox' as $checkbox){
    $sql=$mysqli->prepare('delete from cargos where id = ?');
    $sql->bind_param('i',$checkbox);
    $sql->execute();
}

<?php include ("exibicao.php"); ?>

Arquivo javascript para evitar o refresh da página ao deletar (javascript.js)

$(document).ready(function(){
    $(document).on('submit','#form1',function(event){
        event.preventDefault();
        var dados=$(this).serialize();

        $.ajax({
            url: 'deletar.php',
            type: 'post',
            data: dados,
            success: function(data){
                $('#resultado').empty().html(data);
            }

        });
    }

}

Receba as aulas da Webdesign em Foco em Seu Email

Posts Relacionados

Passando parâmetros PHP através de URL's amigáveis

Hoje vamos aprender como passar parâmetros pelo php através de url amigáveis. A principal utilização das URL Amigáveis é em relação ao SEO.

Enquete sem refresh com PHP, MySql e JQuery

Nesse tutorial trataremos do tema Criação de enquete sem refresh de página com PHP, Mysql e JQuery. Com esse sistema é possível contabilizar votos.

PHP

PHP é uma das principais linguagens de programação utilizada nas plataformas web. Isso porque além de ser uma linguagem leve, o PHP é robusto.