Criando um Botão de Ação

Criando um Botão de Ação

Criar um botão de ação em uma tabela para visualizar ou deletar um dado é uma tarefa que para o principiante não faz sentido, se perder é comum, e vamos deixar aqui o modo mais fácil para que isso seja possível, depois você pode implementar outras formas, aprender a fazer isso melhor, mas este primeiro modo é o mais fácil.

Vamos ter basicamente 2 arquivos aqui:
1. (Um arquivo que liste os dados da tabela e transforme isso em html com cada dado em uma linha tudo arrumadinho e bonitinho)
Lembre-se de deixar neste arquivo uma coluna a mais, vamos criar um botão de deletar e colocar este botão dentro da coluna a mais.

O arquivo que mostra os dados ficaria assim:

#1.(ver_dados.php) Aqui está contido tudo, a lista e o botão.

Iniciamos um html normal:

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="author" content="David Snege david.snege@gmail.com">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="theme.css" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>

<body>

Inserimos o código que verifica o login, de acordo com o post do sistema de login, se você não quiser usar o sistema de login ignore esta parte.

<?php
include_once("L_logado.php");
@session_start();
?>

Criamos um cabeçalho normal em html só para enfeitar o código.

<div class="py-5 text-center">
<div class="container">
<div class="row">
<div class="col-lg-12 col-12">

<h1>Orçamentos</h1>
<p class="mb-3">Para apagar clique na lixeira.
</p>

Criamos o topo da tabela, contendo os títulos das colunas que a tabela vai ter.

<div class="py-2">
<div class="container">
<div class="row">
<div class="col-md-12">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>#N</th>
<th>Nombre Sociedad</th>
<th>Ver</th>
<th>Editar</th>
<th>Borrar</th>
</tr>
</thead>

A seguir vem todo o conteúdo das colunas, o que o trecho de código a seguir faz é listar os dados do Banco de Dados e colocar eles dentro das células da tabela, por este motivo você vai ver alternar entre PHP e HTML dentro do mesmo código, se atente para o fato de ter a concatenação usando pontos para a parte PHP e aspas simples quando usamos HTML. (ao final explico separado um pedaço destes.

<tbody>

<?php
//includes de conexão
include 'conn.php';
echo '<br>';
//Listando dados nas Tabelas
//Seleção por ordem e limite de exibições
$sql = "SELECT * FROM orcamento ORDER BY id DESC LIMIT 0, 30";
$result = mysqli_query($conn, $sql);
while ($row = mysqli_fetch_array($result)){
echo'<tr>
<td>'
.$row['id'].
'</td>
<td>'
.$row ['nombresociedad_'].
'</td>
<!--INICIO BUTTON APAGA OU SIMILARES-->
<td class="text-center">
<form form action="" method="POST">
<input type="hidden" name="id" value='
.$row['id'].
'
>

Aqui esta o primeiro botão abaixo, note que ele contém na verdade um formulário só dele que começa acima, enviando em action para a página PHP que contém a ação em especial, no caso acima não temos ação e esta “” sem nada dentro, mas no último botão deletar contamos com uma página de ação.

<button type="submit" class="btn btn-sm btn-secondary text-center justify-content-center align-items-center flex-grow-0 shadow-none border-0 border-left-0 border-right-0 border-top-0 border-bottom-0 rounded-circle rounded-left rounded-right rounded-top rounded-bottom" style="border: 0; background: none;"><i style="font-size:24px" class="fa">&#xf007;</i></button>

</form>
'
.
'
</td>
<!--FIM BUTTON APAGA OU SIMILARES-->
'.
'
<!--INICIO BUTTON APAGA OU SIMILARES-->
<td class="text-center">
<form form action="" method="POST">
<input type="hidden" name="id" value='
.$row['id'].
'
>
<button type="submit" class="btn btn-sm btn-secondary text-center justify-content-center align-items-center flex-grow-0 shadow-none border-0 border-left-0 border-right-0 border-top-0 border-bottom-0 rounded-circle rounded-left rounded-right rounded-top rounded-bottom" style="border: 0; background: none;"><i style="font-size:24px" class="fa">&#xf040;</i></button>

</form>
'
.
'
</td>
<!--FIM BUTTON APAGA OU SIMILARES-->
'
.
'
<!--INICIO BUTTON APAGA OU SIMILARES-->
<td class="text-center">
<form form action="deleta.php" method="POST">
<input type="hidden" name="id" value='
.$row['id'].
'
>

Aqui sim, temos a ação no botão, onde a action do formulário envia o campo com nome ID para a página deleta.php, no value ele usa o campo com um valor da consulta do php .$row[‘id’]. ou seja ele só vai deletar o campo do ID que esta na mesma linha.

<button type="submit" class="btn btn-sm btn-secondary text-center justify-content-center align-items-center flex-grow-0 shadow-none border-0 border-left-0 border-right-0 border-top-0 border-bottom-0 rounded-circle rounded-left rounded-right rounded-top rounded-bottom" style="border: 0; background: none;"><i style="font-size:24px" class="fa">&#xf1f8;</i></button>

</form>
'
.
'
</td>
<!--FIM BUTTON APAGA OU SIMILARES-->
'
.
'
</tr>'
;
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>

</div>
</div>
</div>
</div>

O final do HTML agora é simples e corrente.

</body>

</html>

Cuidado com as concatenações, por exemplo.

echo'<tr>
<td>'
.$row['id'].
'</td>
<td>'

Nós iniciamos o echo lá em cima, e ele é que exibe tudo a partir dai, não podemos quebrar o echo, então fazemos as concatenações entre o php e o html.

ENTENDA:

echo 'código html vem entre as aspas simples'.código php vem entre pontos.'voltamos ao html' ;

Ao final do echo, la no fim do código todo que é exibido vem ponto e virgula obrigatoriamente.

Estude cada pedaço do código, pulamos muitas linhas para facilitar o entendimento do código, mas você pode pular menos linhas e deixar o código compacto, desde que não se perda com as aberturas de aspas e concatenações de php. (se você errar nisto um erro vai aparecer e não vai te exibir tabela alguma)

#2.(deleta.php) Aqui está o php que executa a ação e volta para a listagem.

Começamos com um include de conexão.

<?php
//includes de conexão
include 'conn.php';

Criamos uma variável para receber o ID do form do botão.

$id= $_POST['id'];

Iniciamos o processo de apagar de acordo com o $id recebido pelo POST

//Deletando dados nas Tabelas
$sql = "DELETE FROM orcamento WHERE id='$id'";
//Checando o Delete
if ($conn->query($sql) === TRUE){
echo '<div class="alert alert-success"><strong>Ok, </strong> pressupuesto deletado! </div>';
header('Location:ver_dados.php');
exit;
}else{
echo '<div class="alert alert-danger"><strong>Buff, </strong> no logramos! </div>';
}
//Fechando a conexão
$conn->close();
?>

E pronto, simples assim, este arquivo recebe o ID do form do html que tem o botão como ação e está oculto em um input com a propriedade hidden, ele armazena isso na váriavel $id logo depois criamos a função $sql com o comando para deletar (DELETE) de (FROM) tabela “orcamento” (WHERE) com o id igual ao $id recebido na váriavel, depois disso tudo é checagem.

O comando header(‘Location:ver_dados.php’); é só um meio de redirecionar a página de novo para a página de exibição, é tão rápido que você nem vê a passagem da página.

David Snege

Debes estar conectado para publicar un comentario

Traducir »