PHP Aplicar Edição INLINE na tabela do banco de dados - Não sei como aplicar

danielfpcarneiro · 8 de fevereiro de 2018

Olá pessoa beleza ? Sou novo aqui então me desculpem por ser TÃO ESPECIFICO.

Meu chefe me pediu para criar uma pagina com uma tabela que consta-se os números de telefones internos do pessoal da empresa , com busca , beleza criei certinho.

fiz da seguinte forma; Quando a pessoa entrasse na pagina ela teria um INPUT de busca, depois vinha a tabela com os dados do Banco de Dados MYSQLi, onde a ultima coluna a pessoa tinha dois BOTÕES, sendo 1 pra redirecionar para a tela ALTERAR.PHP e alterar o dado no banco e o outro PAGINANOVOCONTATO.HTML para ADICIONAR um dado no banco, beleza, FUNCIONOU tudo perfeito, porém na hora que ele viu as paginas, logo me disse que NÃO QUERIA REDIRECIONAMENTO PARA ALTERAÇÃO , a opção para alterar os dados tem que ser INLINE a pessoa clica no nome dela, ALTERA e pronto, ja fica salvo no banco de dados, a questão é, NÃO SEI COMO FAZER ISSO. Tirei o Botão de alterar e travei.

vou colocar cada página, se alguém puder me ajudar eu agradeço !!! TO EM EXPERIÊNCIA E ISSO VAI ME AJUDAR MUITO.

INDEX.PHP

<html>
    <head>
        <title>RAMAIS</title>
		<link href="css/bootstrap.css" rel="stylesheet">
		<link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">
		<link href="css/theme.css" rel="stylesheet">
		<script src="js/ie-emulation-modes-warning.js"></script>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php
	$parametro = filter_input(INPUT_GET, "parametro");
	$mysqllink = @mysql_connect("localhost","root","");
	mysql_select_db("agenda_telefonica");
	
	
	if($parametro){
		$dados = mysql_query("select * from contato where setor like '$parametro%' order by setor");
	
	} else {
		$dados = mysql_query("select * from contato order by setor");
	}
	
	$linha = mysql_fetch_assoc($dados);
	$total = mysql_num_rows($dados);
	

	
	?>
	</head>
    <body>
	<center>
       <div class="container theme-showcase" role="main">
		<div class="page-header">
		<font face="DejaVu Sans Mono">
		<h1>AGENDA DE RAMAIS</h1>
		</font>
		</div>
		<div class="row">
			<div class="col-md-12">
				<table class="table">
		
		<p>
			</font>
		<font face="DejaVu Sans Mono" size="4">
		<form action="<?php echo $_SERVER['PHP_SELF']; ?>" class="form-inline">
		<div class="form-group">
        
		<input type="text" align="center" class="form-control" id="exampleInputEmail2" placeholder=" DIGITE O SETOR !" name="parametro"/>
		<button type="submit" class="btn btn-primary btn-lg btn-block">Encontrar </button><br>
		</form>
		</p>
		
		<p>
		
		  
		
		</p>
		
		<div class="row">
			<div class="col-md-12">
				<table class="table">
					<thead>
		<tr>
		  <td bgcolor="#0B614B"></td>
		  <td bgcolor="#0B614B"><CENTER><font face="DejaVu Sans Mono" color="white" size="4">SETOR</font></td>
		  <td bgcolor="#0B614B"><CENTER><font face="DejaVu Sans Mono" color="white" size="4">NOME</font></td>
		  <td bgcolor="#0B614B"><CENTER><font face="DejaVu Sans Mono" color="white" size="4">RAMAL</font></td>
		  <td align="center" bgcolor="#0B614B"><a href="paginanovocontato.html"><button type="button" class="btn btn-info">Adicionar Novo</button> </a></td>
		</tr>
		<?php
		if($total){ do{
			
			?>
			
			
		<tr>
		  <td style="visibility: hidden;"><?php echo $linha['id'] ?><center></td>
		  <td><?php echo $linha['setor'] ?></td>
		  <td><?php echo $linha['nome'] ?></td>
		  <td align="center"><?php echo $linha['telefone'] ?></td>
		  		</tr>
		
		<?php
		} while($linha = mysql_fetch_assoc($dados));
		
		mysql_free_result($dados);}
		mysql_close($mysqllink);
		
		?>
		</div>
    </body>
</html>

ALTERAR.PHP



<?php


$id = filter_input(INPUT_GET, "id");
$nome = filter_input(INPUT_GET, "nome");
$telefone = filter_input(INPUT_GET, "telefone");

$link = mysqli_connect("localhost", "root", "", "agenda_telefonica");

if($link){
$query = mysqli_query($link,"update contato set nome='$nome',setor='$setor', telefone='$telefone' where id=$id");
if ($query) {
	
  header("Location: index.php");
}else{
die("Erro: ". mysqli_error($link));
}

}else{
die("Erro: ". mysqli_error($link));

PAGINANOVOCONTATO.HTML

<html>
    <head>
        <title>Agenda Telefonica / Novo Contato</title>
        <link href="css/bootstrap.css" rel="stylesheet">
		<link href="css/ie10-viewport-bug-workaround.css" rel="stylesheet">
		<link href="css/theme.css" rel="stylesheet">
		<script src="js/ie-emulation-modes-warning.js"></script>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
		</head>
    <body>
		<font face="DejaVu Sans Mono" size="4">
        <div class="container theme-showcase" role="main">
		<div class="page-header">
		<h1>NOVO CONTATO</h1>
		</div>
		<div class="row">
			<div class="col-md-12">
		<p>
		<form action="salvar.php" class="form-inline">
		<div class="form-group">
		<label for="exampleInputName2">SETOR</label>
		<input type="text" name="setor" class="form-control" id="exampleInputName2" placeholder="Digite o Nome"/> <br/>
		</div>
		<div class="form-group">
		<label for="exampleInputName2">NOME</label>
		<input type="text" name="nome" class="form-control" id="exampleInputName2" placeholder="Digite o Nome"/> <br/>
		</div>
		<div class="form-group">
	  <label for="exampleInputEmail2">RAMAL</label> 
		<input type="text" name="telefone" class="form-control" id="exampleInputEmail2" placeholder="Digite o Ramal"/> <br/>
		</div>
  <button type="submit" class="btn btn-primary">CRIAR CONTATO</button>
		</form><br><br><br><br><br><br><br><br><br><br><br><br>
		<center>
		<img src="iasd.jpg"width="150px" height="90px" />
		</p>
		 </div>
</html>

SALVAR.PHP

<?php

$nome = filter_input(INPUT_GET, "nome");
$setor = filter_input(INPUT_GET, "setor");
$telefone = filter_input(INPUT_GET, "telefone");

$link = mysqli_connect("localhost", "root", "", "agenda_telefonica");

if($link){
$query = mysqli_query($link,"insert into contato values(null,'$nome','$setor','$telefone');");
if ($query) {
  header("Location: index.php");
}else{
die("Erro: ". mysqli_error($link));
}

}else{
die("Erro: ". mysqli_error($link));
}

DiF · 8 de fevereiro de 2018

@danielfpcarneiro Olá, primeiramente seja bem vindo em nosso Clube do Hardware.

Isso que seu chefe quer é uma tabela editável.

Terá que usar o jQuery( javascript) para isso e combinar com o $.ajax() do jquery para poder enviar o novo dados para o banco de dados.

Veja este vídeo para saber com detalhes como fazer a tabela editável.

Obviamente, você terá que estudar e implementar a parte do ajax onde faz a requisição ao arquivo alterar.php sem que seja redirecionado ou clicar em um botão.

Por exemplo, aqui no fórum temos um plugin desenvolvido por um profissional que contratamos para editar os títulos dos tópicos sem precisar clicar no botão de editar, bastando apenas segurar por alguns segundos o botão em cima do título que aparece a caixa para escrever.

Como o trabalho é exclusivamente seu, e ainda está em fase de treinamento, sugiro que estude bastante esta parte de ajax com jquery. Não é difícil. Você pode aprender em uma tarde ou duas o básico para poder implementar.

danielfpcarneiro · 9 de fevereiro de 2018

Seguinte criei uma Tabela com edição INLINE, essa tabela consta os dados do meu BANCO DE DADOS MYSQL, antes essa tabela tinha um botão que alterava os dados do banco, porém agora tenho que editar os dados do banco direto da linha, coloquei o método por JQUERY, consegui editar os dados da tabela, mais não sei como fazer esses dados serem alterados no banco de dados, pois quando dou REFRESH ele volta os dados anteriores do banco.

Segue as Páginas criadas.

INDEX.PHP  - PAGINA DA TABELA EDITAVEL

<html>
    <head>
        <title>RAMAIS</title>
		   <link rel="stylesheet" type="text/css" href="estilo.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
		<script type="text/javascript" src="script.js"></script>
		
    <?php
	$parametro = filter_input(INPUT_GET, "parametro");
	$mysqllink = @mysql_connect("localhost","root","");
	mysql_select_db("agenda_telefonica");
	
	
	if($parametro){
		$dados = mysql_query("select * from contato where setor like '$parametro%' order by setor");
	
	} else {
		$dados = mysql_query("select * from contato order by setor");
	}
	
	$linha = mysql_fetch_assoc($dados);
	$total = mysql_num_rows($dados);
	

	
	?>
	</head>
    <body>
	<center>
       <div class="container theme-showcase" role="main">
		<div class="page-header">
		<font face="DejaVu Sans Mono">
		<h1>AGENDA DE RAMAIS - HASP</h1>
		</font>
		</div>
		<div class="row">
			<div class="col-md-12">
				<table class="tabela">
		
		<p>
			</font>
		<font face="DejaVu Sans Mono" size="4">
		<form action="<?php echo $_SERVER['PHP_SELF']; ?>" class="form-inline">
		<div class="form-group">
        
		<input type="text" align="center" class="form-control" id="exampleInputEmail2" placeholder=" DIGITE O SETOR !" name="parametro"/>
		<button type="submit" class="btn btn-primary btn-lg btn-block">Encontrar </button><br>
		</form>
		</p>
		
		<p>
		
		  
		
		</p>
		
		<div class="row">
			<div class="col-md-12">
				<table class="tabela">
					<thead>
		<tr>
		  <td bgcolor="#0B614B"></td>
		  <td bgcolor="#0B614B"><CENTER><font face="DejaVu Sans Mono" color="white" size="4">SETOR</font></td>
		  <td bgcolor="#0B614B"><CENTER><font face="DejaVu Sans Mono" color="white" size="4">NOME</font></td>
		  <td bgcolor="#0B614B"><CENTER><font face="DejaVu Sans Mono" color="white" size="4">RAMAL</font></td>
		  <td align="center" bgcolor="#0B614B"><a href="paginanovocontato.html"><button type="button" class="btn btn-info">Adicionar Novo</button> </a></td>
		</tr>
		
		<?php
		if($total){ do{
			
			?>
			
			
		<tr>
		  <td style="visibility: hidden;"><?php echo $linha['id'] ?><center></td>
		  <td><?php echo $linha['setor'] ?></td>
		  <td><?php echo $linha['nome'] ?></td>
		  <td align="center"><?php echo $linha['telefone'] ?></td>
		  
		  		</tr>
		
		<?php
		} while($linha = mysql_fetch_assoc($dados));
		
		mysql_free_result($dados);}
		mysql_close($mysqllink);
		
		?>
		</div>
    </body>
</html>

Jquery

Script para Edição da Tabela !!!

$(function () {
    $("td").dblclick(function () {
        var conteudoOriginal = $(this).text();
        
        $(this).addClass("celulaEmEdicao");
        $(this).html("<input type='text' value='" + conteudoOriginal + "' />");
        $(this).children().first().focus();

        $(this).children().first().keypress(function (e) {
            if (e.which == 13) {
                var novoConteudo = $(this).val();
                $(this).parent().text(novoConteudo);
              
            }
        });
		
	$(this).children().first().blur(function(){
		$(this).parent().text(conteudoOriginal);
		
	});
    });
});

PHP

Pagina que alterava os dados da Tabela quando se clicava no Botão ALTERAR.

<?php


$id = filter_input(INPUT_GET, "id");
$nome = filter_input(INPUT_GET, "nome");
$telefone = filter_input(INPUT_GET, "telefone");

$link = mysqli_connect("localhost", "root", "", "agenda_telefonica");

if($link){
$query = mysqli_query($link,"update contato set nome='$nome',setor='$setor', telefone='$telefone' where id=$id");
if ($query) {
	
  header("Location: index.php");
}else{
die("Erro: ". mysqli_error($link));
}

}else{
die("Erro: ". mysqli_error($link));
}

DiF · 10 de fevereiro de 2018

@danielfpcarneiro Nesse caso, você não pode usar o jquery desta forma. Como você quer submeter dados de um formulário ao php sem sair da página e sem clicar em nada, você deve implementar dentro da função keypress o $.ajax() que envia os dados para o arquivo php.

Quando usar o ajax, você deve remover do php os retornos(callback) de header location. Só precisa retornar o texto de bem sucedido ou não.

Felipe Paz · 13 de fevereiro de 2018

@danielfpcarneiro aqui eu fiz um exemplo bem mas bem básico de como se comportar a tabela para funcionar como teu chefe pediu. Depois você pode adequar àquilo que realmente precisa.

https://jsfiddle.net/felipepaz/eL26wk1y/

E quando clicar em save, pode fazer fazer a chamada ajax e tratar os dados para o teu arquivo php e fazer a alteração no banco de dados.