09 nov 2015

Edição – Sistema de Cadastro com PHP + PDO e MySQL

Post sobre PHP Por William Em novembro 9, 2015

No post de hoje vou demonstrar como construir a página de edição de registros, dando continuidade na série de posts sobre sistema de cadastro com PHP + PDO e MySQL. Nos posts anteriores já construímos a página para inclusão de clientes e a página para consulta de clientes.

Na minha opinião a funcionalidade de edição de registros geralmente envolve mais complexidade, não é nada fora do comum mas temos que ter atenção, principalmente quando estamos trabalhando com upload de imagens. Nesse sistema podemos enviar a foto do cliente durante a inclusão, quando carregamos a página de edição temos que exibir essa foto e dar a opção para o usuário trocar essa imagem caso queira, nesse ponto temos que ter atenção.

Outros posts que podem interessar:

Consulta – Sistema de Cadastro com PHP + PDO e MySQL

Inclusão – Sistema de Cadastro com PHP + PDO e MySQL

Exclusão – Sistema de Cadastro com PHP + PDO e MySQL

Todos os scripts que serão postados aqui são praticamente idênticos aos postados anteriormente, mas como venho lembrando desde de o começo dessa série de posts a medida que estamos construindo o sistema estou acrescentando funcionalidades nos scripts, nesse post foram adicionadas novas funcionalidade no script “action_cliente.php“.

Script do Banco de Dados

A estrutura da tabela se mantém idêntica desde o primeiro post:

CREATE DATABASE IF NOT EXISTS db_blog;

USE db_blog;

CREATE TABLE tab_clientes(
	id integer auto_increment primary key,
	nome varchar(100),
	cpf varchar(20),
	email varchar(50),
	telefone varchar(20),
	celular varchar(20),
	data_nascimento date,
	status varchar(10),
    foto varchar(200),
	data_cadastro timestamp default CURRENT_TIMESTAMP,
	data_alteracao timestamp
);

CREATE DATABASE IF NOT EXISTS db_blog;

USE db_blog;

CREATE TABLE tab_clientes(

id integer auto_increment primary key,

nome varchar(100),

cpf varchar(20),

email varchar(50),

telefone varchar(20),

celular varchar(20),

data_nascimento date,

status varchar(10),

foto varchar(200),

data_cadastro timestamp default CURRENT_TIMESTAMP,

data_alteracao timestamp

);

Formulário para Edição dos Dados

O layout da página de edição é idêntico ao da página de inclusão, a diferença é que agora recebemos um “id” via GET que foi enviado após o usuário clicar no botão “Editar” na página de consulta de clientes, com esse id temos que carregar os dados do cliente nos respectivos campos do formulário e também a foto no elemento <img>.

O “id” do cliente foi passado via GET e fazemos uma validação básica, se for válido então executamos uma consulta com parâmetro via PDO para capturar os dados do cliente, se a consulta retornar registros o próximo passo é acertar o formato da data de nascimento, como temos um campo “data_nascimento” do tipo DATE (YYYY/MM/DD) é necessário formatar essa data para o formato nacional (DD/MM/YYYY).

No corpo da página verifico se a consulta retornou vazia “if(empty($cliente)):”, caso sim apenas exibimos uma mensagem para o usuário “Cliente não encontrado”, senão carregamos a foto e os valores nos inputs do formulário.

Temos 3 campos “hidden”, sendo o primeiro com o valor da ação (editar) que vamos executar no script “action_cliente.php“, o segundo contendo o id do cliente para instrução de UPDATE e o terceiro é o nome da foto gravada atualmente no banco de dados. Caso o usuário decida trocar a foto por outra temos que excluir o arquivo antigo na pasta, por isso é necessário saber o nome da imagem.

Foi usado o script de conexão PHP seguindo o padrão Singleton.

Caso o usuário queira cancelar a edição e voltar para listagem de clientes, basta pressionar o link “Cancelar“.

<?php
require 'conexao.php';

// Recebe o id do cliente do cliente via GET
$id_cliente = (isset($_GET['id'])) ? $_GET['id'] : '';

// Valida se existe um id e se ele é numérico
if (!empty($id_cliente) && is_numeric($id_cliente)):

	// Captura os dados do cliente solicitado
	$conexao = conexao::getInstance();
	$sql = 'SELECT id, nome, email, cpf, data_nascimento, telefone, celular, status, foto FROM tab_clientes WHERE id = :id';
	$stm = $conexao->prepare($sql);
	$stm->bindValue(':id', $id_cliente);
	$stm->execute();
	$cliente = $stm->fetch(PDO::FETCH_OBJ);

	if(!empty($cliente)):

		// Formata a data no formato nacional
		$array_data     = explode('-', $cliente->data_nascimento);
		$data_formatada = $array_data[2] . '/' . $array_data[1] . '/' . $array_data[0];

	endif;

endif;

?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title>Edição de Cliente</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
<body>
	<div class='container'>
		<fieldset>
			<legend><h1>Formulário - Edição de Cliente</h1></legend>
			
			<?php if(empty($cliente)):?>
				<h3 class="text-center text-danger">Cliente não encontrado!</h3>
			<?php else: ?>
				<form action="action_cliente.php" method="post" id='form-contato' enctype='multipart/form-data'>
					<div class="row">
						<label for="nome">Alterar Foto</label>
				      	<div class="col-md-2">
						    <a href="#" class="thumbnail">
						      <img src="fotos/<?=$cliente->foto?>" height="190" width="150" id="foto-cliente">
						    </a>
					  	</div>
					  	<input type="file" name="foto" id="foto" value="foto" >
				  	</div>

				    <div class="form-group">
				      <label for="nome">Nome</label>
				      <input type="text" class="form-control" id="nome" name="nome" value="<?=$cliente->nome?>" placeholder="Infome o Nome">
				      <span class='msg-erro msg-nome'></span>
				    </div>

				    <div class="form-group">
				      <label for="email">E-mail</label>
				      <input type="email" class="form-control" id="email" name="email" value="<?=$cliente->email?>" placeholder="Informe o E-mail">
				      <span class='msg-erro msg-email'></span>
				    </div>

				    <div class="form-group">
				      <label for="cpf">CPF</label>
				      <input type="cpf" class="form-control" id="cpf" maxlength="14" name="cpf" value="<?=$cliente->cpf?>" placeholder="Informe o CPF">
				      <span class='msg-erro msg-cpf'></span>
				    </div>
				    <div class="form-group">
				      <label for="data_nascimento">Data de Nascimento</label>
				      <input type="data_nascimento" class="form-control" id="data_nascimento" maxlength="10" value="<?=$data_formatada?>" name="data_nascimento">
				      <span class='msg-erro msg-data'></span>
				    </div>
				    <div class="form-group">
				      <label for="telefone">Telefone</label>
				      <input type="telefone" class="form-control" id="telefone" maxlength="12" name="telefone" value="<?=$cliente->telefone?>" placeholder="Informe o Telefone">
				      <span class='msg-erro msg-telefone'></span>
				    </div>
				    <div class="form-group">
				      <label for="celular">Celular</label>
				      <input type="celular" class="form-control" id="celular" maxlength="13" name="celular" value="<?=$cliente->celular?>" placeholder="Informe o Celular">
				      <span class='msg-erro msg-celular'></span>
				    </div>
				    <div class="form-group">
				      <label for="status">Status</label>
				      <select class="form-control" name="status" id="status">
					    <option value="<?=$cliente->status?>"><?=$cliente->status?></option>
					    <option value="Ativo">Ativo</option>
					    <option value="Inativo">Inativo</option>
					  </select>
					  <span class='msg-erro msg-status'></span>
				    </div>

				    <input type="hidden" name="acao" value="editar">
				    <input type="hidden" name="id" value="<?=$cliente->id?>">
				    <input type="hidden" name="foto_atual" value="<?=$cliente->foto?>">
				    <button type="submit" class="btn btn-primary" id='botao'> 
				      Gravar
				    </button>
				    <a href='index.php' class="btn btn-danger">Cancelar</a>
				</form>
			<?php endif; ?>
		</fieldset>

	</div>
	<script type="text/javascript" src="js/custom.js"></script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

<?php

require 'conexao.php';

// Recebe o id do cliente do cliente via GET

$id_cliente = (isset($_GET['id'])) ? $_GET['id'] : '';

// Valida se existe um id e se ele é numérico

if (!empty($id_cliente) && is_numeric($id_cliente)):

// Captura os dados do cliente solicitado

$conexao = conexao::getInstance();

$sql = 'SELECT id, nome, email, cpf, data_nascimento, telefone, celular, status, foto FROM tab_clientes WHERE id = :id';

$stm = $conexao->prepare($sql);

$stm->bindValue(':id', $id_cliente);

$stm->execute();

$cliente = $stm->fetch(PDO::FETCH_OBJ);

if(!empty($cliente)):

// Formata a data no formato nacional

$array_data = explode('-', $cliente->data_nascimento);

$data_formatada = $array_data[2] . '/' . $array_data[1] . '/' . $array_data[];

endif;

<!DOCTYPE html>

<html>

<head>

<title>Edição de Cliente</title>

</head>

<body>

<legend><h1>Formulário - Edição de Cliente</h1></legend>

<?php if(empty($cliente)):?>

<h3 class="text-center text-danger">Cliente não encontrado!</h3>

<?php else: ?>

<label for="nome">Alterar Foto</label>

<img src="fotos/<?=$cliente->foto?>" height="190" width="150" id="foto-cliente">

</a>

</div>

</div>

<input type="text" class="form-control" id="nome" name="nome" value="<?=$cliente->nome?>" placeholder="Infome o Nome">

</div>

<input type="email" class="form-control" id="email" name="email" value="<?=$cliente->email?>" placeholder="Informe o E-mail">

</div>

<input type="cpf" class="form-control" id="cpf" maxlength="14" name="cpf" value="<?=$cliente->cpf?>" placeholder="Informe o CPF">

</div>

<label for="data_nascimento">Data de Nascimento</label>

<input type="data_nascimento" class="form-control" id="data_nascimento" maxlength="10" value="<?=$data_formatada?>" name="data_nascimento">

</div>

<label for="telefone">Telefone</label>

<input type="telefone" class="form-control" id="telefone" maxlength="12" name="telefone" value="<?=$cliente->telefone?>" placeholder="Informe o Telefone">

</div>

<label for="celular">Celular</label>

<input type="celular" class="form-control" id="celular" maxlength="13" name="celular" value="<?=$cliente->celular?>" placeholder="Informe o Celular">

</div>

<label for="status">Status</label>

<option value="<?=$cliente->status?>"><?=$cliente->status?></option>

<option value="Ativo">Ativo</option>

<option value="Inativo">Inativo</option>

</select>

</div>

Gravar

</button>

<a href='index.php' class="btn btn-danger">Cancelar</a>

</form>

<?php endif; ?>

</fieldset>

</div>

</body>

</html>

Folha de estilo CSS customizada

A folha de estilo “custom.css” não sofreu alteração, lembrando que a maior parte das regras de estilização como já citado vem do “bootstrap.min.css“.

Post relacionado: Configurando uma conexão com MySQL utilizando PDO no PHP

fieldset{margin:1% auto;}
.box-mensagem-crud{ margin-top: 10px;}
.msg-erro{ color: red; }

fieldset{margin:1% auto;}

.box-mensagem-crud{ margin-top: 10px;}

.msg-erro{ color: red; }

Script JavaScript com Validação, Máscaras e Load de Imagem

O script “custom.js” não sofreu alterações, pois como a estrutura do formulário é a mesma de inclusão podemos aproveitar as mesmas regras de validação, máscaras e a função para carregar a imagem de upload.

/* Atribui ao evento submit do formulário a função de validação de dados */
var form = document.getElementById("form-contato");
if (form.addEventListener) {                   
    form.addEventListener("submit", validaCadastro);
} else if (form.attachEvent) {                  
    form.attachEvent("onsubmit", validaCadastro);
}

/* Atribui ao evento keypress do input cpf a função para formatar o CPF */
var inputCPF = document.getElementById("cpf");
if (inputCPF.addEventListener) {                   
    inputCPF.addEventListener("keypress", function(){mascaraTexto(this, '###.###.###-##')});
} else if (inputCPF.attachEvent) {                  
    inputCPF.attachEvent("onkeypress", function(){mascaraTexto(this, '###.###.###-##')});
}

/* Atribui ao evento keypress do input data de nascimento a função para formatar o data (dd/mm/yyyy) */
var inputDataNascimento = document.getElementById("data_nascimento");
if (inputDataNascimento.addEventListener) {                   
    inputDataNascimento.addEventListener("keypress", function(){mascaraTexto(this, '##/##/####')});
} else if (inputDataNascimento.attachEvent) {                  
    inputDataNascimento.attachEvent("onkeypress", function(){mascaraTexto(this, '##/##/####')});
}

/* Atribui ao evento keypress do input telefone a função para formatar o Telefone (00 0000-0000) */
var inputTelefone = document.getElementById("telefone");
if (inputTelefone.addEventListener) {                   
    inputTelefone.addEventListener("keypress", function(){mascaraTexto(this, '## ####-####')});
} else if (inputTelefone.attachEvent) {                  
    inputTelefone.attachEvent("onkeypress", function(){mascaraTexto(this, '## ####-####')});
}

/* Atribui ao evento keypress do input celular a função para formatar o Celular (00 00000-0000) */
var inputCelular = document.getElementById("celular");
if (inputCelular.addEventListener) {                   
    inputCelular.addEventListener("keypress", function(){mascaraTexto(this, '## #####-####')});
} else if (inputCelular.attachEvent) {                  
    inputCelular.attachEvent("onkeypress", function(){mascaraTexto(this, '## #####-####')});
}

/* Atribui ao evento change do input FILE para upload da foto*/
var inputFile = document.getElementById("foto");
var foto_cliente = document.getElementById("foto-cliente");
if (inputFile.addEventListener) {                   
    inputFile.addEventListener("change", function(){loadFoto(this, foto_cliente)});
} else if (inputFile.attachEvent) {                  
    inputFile.attachEvent("onchange", function(){loadFoto(this, foto_cliente)});
}

/* Função para validar os dados antes da submissão dos dados */
function validaCadastro(evt){
	var nome = document.getElementById('nome');
	var email = document.getElementById('email');
	var cpf = document.getElementById('cpf');
	var status = document.getElementById('status');
	var data_nascimento = document.getElementById('data_nascimento');
	var telefone = document.getElementById('telefone');
	var celular = document.getElementById('celular');
	var filtro = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
	var contErro = 0;


	/* Validação do campo nome */
	caixa_nome = document.querySelector('.msg-nome');
	if(nome.value == ""){
		caixa_nome.innerHTML = "Favor preencher o Nome";
		caixa_nome.style.display = 'block';
		contErro += 1;
	}else{
		caixa_nome.style.display = 'none';
	}

	/* Validação do campo email */
	caixa_email = document.querySelector('.msg-email');
	if(email.value == ""){
		caixa_email.innerHTML = "Favor preencher o E-mail";
		caixa_email.style.display = 'block';
		contErro += 1;
	}else if(filtro.test(email.value)){
		caixa_email.style.display = 'none';
	}else{
		caixa_email.innerHTML = "Formato do E-mail inválido";
		caixa_email.style.display = 'block';
		contErro += 1;
	}	

	/* Validação do campo cpf */
	caixa_data = document.querySelector('.msg-data');
	if(data_nascimento.value == ""){
		caixa_data.innerHTML = "Favor preencher a Data de Nascimento";
		caixa_data.style.display = 'block';
		contErro += 1;
	}else{
		caixa_data.style.display = 'none';
	}

	/* Validação do campo cpf */
	caixa_cpf = document.querySelector('.msg-cpf');
	if(cpf.value == ""){
		caixa_cpf.innerHTML = "Favor preencher o CPF";
		caixa_cpf.style.display = 'block';
		contErro += 1;
	}else{
		caixa_cpf.style.display = 'none';
	}

	/* Validação do campo telefone */
	caixa_telefone = document.querySelector('.msg-telefone');
	if(telefone.value == ""){
		caixa_telefone.innerHTML = "Favor preencher o Telefone";
		caixa_telefone.style.display = 'block';
		contErro += 1;
	}else{
		caixa_telefone.style.display = 'none';
	}

	/* Validação do campo celular */
	caixa_celular = document.querySelector('.msg-celular');
	if(celular.value == ""){
		caixa_celular.innerHTML = "Favor preencher o Celular";
		caixa_celular.style.display = 'block';
		contErro += 1;
	}else{
		caixa_celular.style.display = 'none';
	}

	/* Validação do campo status */
	caixa_status = document.querySelector('.msg-status');
	if(status.value == ""){
		caixa_status.innerHTML = "Favor preencher o Status";
		caixa_status.style.display = 'block';
		contErro += 1;
	}else{
		caixa_status.style.display = 'none';
	}

	if(contErro > 0){
		evt.preventDefault();
	}
}

/* Função para formatar dados conforme parâmetro enviado, CPF, DATA, TELEFONE e CELULAR */
function mascaraTexto(t, mask){
	var i = t.value.length;
	var saida = mask.substring(1,0);
	var texto = mask.substring(i);

	if (texto.substring(0,1) != saida){
		t.value += texto.substring(0,1);
	}
}

/* Função para exibir a imagem selecionada no input file na elemento <img>  */
function loadFoto(file, img){
    if (file.files && file.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
           img.src = e.target.result;
        }
        reader.readAsDataURL(file.files[0]);
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

/* Atribui ao evento submit do formulário a função de validação de dados */

var form = document.getElementById("form-contato");

if (form.addEventListener) {

form.addEventListener("submit", validaCadastro);

} else if (form.attachEvent) {

form.attachEvent("onsubmit", validaCadastro);

}

/* Atribui ao evento keypress do input cpf a função para formatar o CPF */

var inputCPF = document.getElementById("cpf");

if (inputCPF.addEventListener) {

inputCPF.addEventListener("keypress", function(){mascaraTexto(this, '###.###.###-##')});

} else if (inputCPF.attachEvent) {

inputCPF.attachEvent("onkeypress", function(){mascaraTexto(this, '###.###.###-##')});

}

/* Atribui ao evento keypress do input data de nascimento a função para formatar o data (dd/mm/yyyy) */

var inputDataNascimento = document.getElementById("data_nascimento");

if (inputDataNascimento.addEventListener) {

inputDataNascimento.addEventListener("keypress", function(){mascaraTexto(this, '##/##/####')});

} else if (inputDataNascimento.attachEvent) {

inputDataNascimento.attachEvent("onkeypress", function(){mascaraTexto(this, '##/##/####')});

}

/* Atribui ao evento keypress do input telefone a função para formatar o Telefone (00 0000-0000) */

var inputTelefone = document.getElementById("telefone");

if (inputTelefone.addEventListener) {

inputTelefone.addEventListener("keypress", function(){mascaraTexto(this, '## ####-####')});

} else if (inputTelefone.attachEvent) {

inputTelefone.attachEvent("onkeypress", function(){mascaraTexto(this, '## ####-####')});

}

/* Atribui ao evento keypress do input celular a função para formatar o Celular (00 00000-0000) */

var inputCelular = document.getElementById("celular");

if (inputCelular.addEventListener) {

inputCelular.addEventListener("keypress", function(){mascaraTexto(this, '## #####-####')});

} else if (inputCelular.attachEvent) {

inputCelular.attachEvent("onkeypress", function(){mascaraTexto(this, '## #####-####')});

}

/* Atribui ao evento change do input FILE para upload da foto*/

var inputFile = document.getElementById("foto");

var foto_cliente = document.getElementById("foto-cliente");

if (inputFile.addEventListener) {

inputFile.addEventListener("change", function(){loadFoto(this, foto_cliente)});

} else if (inputFile.attachEvent) {

inputFile.attachEvent("onchange", function(){loadFoto(this, foto_cliente)});

}

/* Função para validar os dados antes da submissão dos dados */

function validaCadastro(evt){

var nome = document.getElementById('nome');

var email = document.getElementById('email');

var cpf = document.getElementById('cpf');

var status = document.getElementById('status');

var data_nascimento = document.getElementById('data_nascimento');

var telefone = document.getElementById('telefone');

var celular = document.getElementById('celular');

var filtro = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;

var contErro = ;

/* Validação do campo nome */

caixa_nome = document.querySelector('.msg-nome');

if(nome.value == ""){

caixa_nome.innerHTML = "Favor preencher o Nome";

caixa_nome.style.display = 'block';

contErro += 1;

}else{

caixa_nome.style.display = 'none';

}

/* Validação do campo email */

caixa_email = document.querySelector('.msg-email');

if(email.value == ""){

caixa_email.innerHTML = "Favor preencher o E-mail";

caixa_email.style.display = 'block';

contErro += 1;

}else if(filtro.test(email.value)){

caixa_email.style.display = 'none';

}else{

caixa_email.innerHTML = "Formato do E-mail inválido";

caixa_email.style.display = 'block';

contErro += 1;

}

/* Validação do campo cpf */

caixa_data = document.querySelector('.msg-data');

if(data_nascimento.value == ""){

caixa_data.innerHTML = "Favor preencher a Data de Nascimento";

caixa_data.style.display = 'block';

contErro += 1;

}else{

caixa_data.style.display = 'none';

}

/* Validação do campo cpf */

caixa_cpf = document.querySelector('.msg-cpf');

if(cpf.value == ""){

caixa_cpf.innerHTML = "Favor preencher o CPF";

caixa_cpf.style.display = 'block';

contErro += 1;

}else{

caixa_cpf.style.display = 'none';

}

/* Validação do campo telefone */

caixa_telefone = document.querySelector('.msg-telefone');

if(telefone.value == ""){

caixa_telefone.innerHTML = "Favor preencher o Telefone";

caixa_telefone.style.display = 'block';

contErro += 1;

}else{

caixa_telefone.style.display = 'none';

}

/* Validação do campo celular */

caixa_celular = document.querySelector('.msg-celular');

if(celular.value == ""){

caixa_celular.innerHTML = "Favor preencher o Celular";

caixa_celular.style.display = 'block';

contErro += 1;

}else{

caixa_celular.style.display = 'none';

}

/* Validação do campo status */

caixa_status = document.querySelector('.msg-status');

if(status.value == ""){

caixa_status.innerHTML = "Favor preencher o Status";

caixa_status.style.display = 'block';

contErro += 1;

}else{

caixa_status.style.display = 'none';

}

if(contErro > ){

evt.preventDefault();

}

/* Função para formatar dados conforme parâmetro enviado, CPF, DATA, TELEFONE e CELULAR */

function mascaraTexto(t, mask){

var i = t.value.length;

var saida = mask.substring(1,);

var texto = mask.substring(i);

if (texto.substring(,1) != saida){

t.value += texto.substring(,1);

}

/* Função para exibir a imagem selecionada no input file na elemento <img> */

function loadFoto(file, img){

if (file.files && file.files[]) {

var reader = new FileReader();

reader.onload = function (e) {

img.src = e.target.result;

}

reader.readAsDataURL(file.files[]);

}

Script PHP para Edição dos Dados

No script “action_cliente.php” foram adicionadas linhas para executar também a edição dos dados, observem que agora temos outra condição “if ($acao == ‘editar’):” verificando se a ação solicitada é “editar”, esse valor será passado no campo hidden do formulário que foi explicado acima.

Post relacionado: DSN PDO - diversos bancos de dados | Dica

Dentro dessa condição de edição verifico se foi enviado um upload de foto, isso significa que a foto do cliente está sendo alterada, então primeiro excluo a imagem da pasta com base no nome da foto_atual passado pelo formulário e depois processo o upload da nova foto, semelhante ao que foi feito na inclusão.

Caso não seja enviado um upload o fluxo entra na lógica do “else:” e simplesmente mantenho o mesmo nome da foto “$nome_foto = $foto_atual;” e envio esse valor para instrução UPDATE.

Após ser executada a instrução SQL exibo uma mensagem de sucesso e redireciono o usuário para a página “index.php” aguardando 3 segundos.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title>Sistema de Cadastro</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
<body>
	<div class='container box-mensagem-crud'>
		<?php 
		require 'conexao.php';

		// Atribui uma conexão PDO
		$conexao = conexao::getInstance();

		// Recebe os dados enviados pela submissão
		$acao  = (isset($_POST['acao'])) ? $_POST['acao'] : '';
		$id    = (isset($_POST['id'])) ? $_POST['id'] : '';
		$nome  = (isset($_POST['nome'])) ? $_POST['nome'] : '';
		$cpf   = (isset($_POST['cpf'])) ? str_replace(array('.','-'), '', $_POST['cpf']): '';
		$email = (isset($_POST['email'])) ? $_POST['email'] : '';
		$foto_atual		  = (isset($_POST['foto_atual'])) ? $_POST['foto_atual'] : '';
		$data_nascimento  = (isset($_POST['data_nascimento'])) ? $_POST['data_nascimento'] : '';
		$telefone  		  = (isset($_POST['telefone'])) ? str_replace(array('-', ' '), '', $_POST['telefone']) : '';
		$celular   		  = (isset($_POST['celular'])) ? str_replace(array('-', ' '), '', $_POST['celular']) : '';
		$status    		  = (isset($_POST['status'])) ? $_POST['status'] : '';


		// Valida os dados recebidos
		$mensagem = '';
		if ($acao == 'editar' && $id == ''):
		    $mensagem .= '<li>ID do registros desconhecido.</li>';
	    endif;

	    // Se for ação diferente de excluir valida os dados obrigatórios
	    if ($acao != 'excluir'):
			if ($nome == '' || strlen($nome) < 3):
				$mensagem .= '<li>Favor preencher o Nome.</li>';
		    endif;

			if ($cpf == ''):
			   $mensagem .= '<li>Favor preencher o CPF.</li>';
		    elseif(strlen($cpf) < 11):
				  $mensagem .= '<li>Formato do CPF inválido.</li>';
		    endif;

			if ($email == ''):
				$mensagem .= '<li>Favor preencher o E-mail.</li>';
			elseif(!filter_var($email, FILTER_VALIDATE_EMAIL)):
				  $mensagem .= '<li>Formato do E-mail inválido.</li>';
			endif;

			if ($data_nascimento == ''): 		
				$mensagem .= '<li>Favor preencher a Data de Nascimento.</li>';
			else:
				$data = explode('/', $data_nascimento);
				if (!checkdate($data[1], $data[0], $data[2])):
					$mensagem .= '<li>Formato da Data de Nascimento inválido.</li>';
				endif;
			endif;

			if ($telefone == ''): 
				$mensagem .= '<li>Favor preencher o Telefone.</li>';
			elseif(strlen($telefone) < 10):
				  $mensagem .= '<li>Formato do Telefone inválido.</li>';
		    endif;

			if ($celular == ''):
				$mensagem .= '<li>Favor preencher o Celular.</li>';
			elseif(strlen($celular) < 11):
				  $mensagem .= '<li>Formato do Celular inválido.</li>';
			endif;

			if ($status == ''):
			   $mensagem .= '<li>Favor preencher o Status.</li>';
			endif;

			if ($mensagem != ''):
				$mensagem = '<ul>' . $mensagem . '</ul>';
				echo "<div class='alert alert-danger' role='alert'>".$mensagem."</div> ";
				exit;
			endif;

			// Constrói a data no formato ANSI yyyy/mm/dd
			$data_temp = explode('/', $data_nascimento);
			$data_ansi = $data_temp[2] . '/' . $data_temp[1] . '/' . $data_temp[0];
		endif;



		// Verifica se foi solicitada a inclusão de dados
		if ($acao == 'incluir'):

			$nome_foto = 'padrao.jpg';
			if(isset($_FILES['foto']) && $_FILES['foto']['size'] > 0):  

				$extensoes_aceitas = array('bmp' ,'png', 'svg', 'jpeg', 'jpg');
			    $extensao = strtolower(end(explode('.', $_FILES['foto']['name'])));

			     // Validamos se a extensão do arquivo é aceita
			    if (array_search($extensao, $extensoes_aceitas) === false):
			       echo "<h1>Extensão Inválida!</h1>";
			       exit;
			    endif;
 
			     // Verifica se o upload foi enviado via POST   
			     if(is_uploaded_file($_FILES['foto']['tmp_name'])):  
			             
			          // Verifica se o diretório de destino existe, senão existir cria o diretório  
			          if(!file_exists("fotos")):  
			               mkdir("fotos");  
			          endif;  
			  
			          // Monta o caminho de destino com o nome do arquivo  
			          $nome_foto = date('dmY') . '_' . $_FILES['foto']['name'];  
			            
			          // Essa função move_uploaded_file() copia e verifica se o arquivo enviado foi copiado com sucesso para o destino  
			          if (!move_uploaded_file($_FILES['foto']['tmp_name'], 'fotos/'.$nome_foto)):  
			               echo "Houve um erro ao gravar arquivo na pasta de destino!";  
			          endif;  
			     endif;  
			endif;

			$sql = 'INSERT INTO tab_clientes (nome, email, cpf, data_nascimento, telefone, celular, status, foto)
							   VALUES(:nome, :email, :cpf, :data_nascimento, :telefone, :celular, :status, :foto)';

			$stm = $conexao->prepare($sql);
			$stm->bindValue(':nome', $nome);
			$stm->bindValue(':email', $email);
			$stm->bindValue(':cpf', $cpf);
			$stm->bindValue(':data_nascimento', $data_ansi);
			$stm->bindValue(':telefone', $telefone);
			$stm->bindValue(':celular', $celular);
			$stm->bindValue(':status', $status);
			$stm->bindValue(':foto', $nome_foto);
			$retorno = $stm->execute();

			if ($retorno):
				echo "<div class='alert alert-success' role='alert'>Registro inserido com sucesso, aguarde você está sendo redirecionado ...</div> ";
		    else:
		    	echo "<div class='alert alert-danger' role='alert'>Erro ao inserir registro!</div> ";
			endif;

			echo "<meta http-equiv=refresh content='3;URL=index.php'>";
		endif;


		// Verifica se foi solicitada a edição de dados
		if ($acao == 'editar'):

             // Verifica se foi enviado uma foto via upload
			if(isset($_FILES['foto']) && $_FILES['foto']['size'] > 0): 

				// Verifica se a foto é diferente da padrão, se verdadeiro exclui a foto antiga da pasta
				if ($foto_atual <> 'padrao.jpg'):
					unlink("fotos/" . $foto_atual);
				endif;
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="http://www.devwilliam.com.br/php/paginacao-de-dados-com-php-introducao" target="_blank" rel="nofollow" class="u14b1b1bec213030b9c28e49f781194e5"><!-- INLINE RELATED POSTS 3/3 //--><style> .u14b1b1bec213030b9c28e49f781194e5 , .u14b1b1bec213030b9c28e49f781194e5 .postImageUrl , .u14b1b1bec213030b9c28e49f781194e5 .centered-text-area { min-height: 80px; position: relative; } .u14b1b1bec213030b9c28e49f781194e5 , .u14b1b1bec213030b9c28e49f781194e5:hover , .u14b1b1bec213030b9c28e49f781194e5:visited , .u14b1b1bec213030b9c28e49f781194e5:active { border:0!important; } .u14b1b1bec213030b9c28e49f781194e5 .clearfix:after { content: ""; display: table; clear: both; } .u14b1b1bec213030b9c28e49f781194e5 { display: block; transition: background-color 250ms; webkit-transition: background-color 250ms; width: 100%; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #2980B9; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); } .u14b1b1bec213030b9c28e49f781194e5:active , .u14b1b1bec213030b9c28e49f781194e5:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; background-color: #D35400; } .u14b1b1bec213030b9c28e49f781194e5 .centered-text-area { width: 100%; position: relative; } .u14b1b1bec213030b9c28e49f781194e5 .ctaText { border-bottom: 0 solid #fff; color: #ECF0F1; font-size: 16px; font-weight: bold; margin: 0; padding: 0; text-decoration: underline; } .u14b1b1bec213030b9c28e49f781194e5 .postTitle { color: #FFFFFF; font-size: 16px; font-weight: 600; margin: 0; padding: 0; width: 100%; } .u14b1b1bec213030b9c28e49f781194e5 .ctaButton { background-color: #3498DB!important; color: #ECF0F1; border: none; border-radius: 3px; box-shadow: none; font-size: 14px; font-weight: bold; line-height: 26px; moz-border-radius: 3px; text-align: center; text-decoration: none; text-shadow: none; width: 80px; min-height: 80px; background: url(http://www.devwilliam.com.br/wp-content/plugins/intelly-related-posts/assets/images/simple-arrow.png)no-repeat; position: absolute; right: 0; top: 0; } .u14b1b1bec213030b9c28e49f781194e5:hover .ctaButton { background-color: #E67E22!important; } .u14b1b1bec213030b9c28e49f781194e5 .centered-text { display: table; height: 80px; padding-left: 18px; top: 0; } .u14b1b1bec213030b9c28e49f781194e5 .u14b1b1bec213030b9c28e49f781194e5-content { display: table-cell; margin: 0; padding: 0; padding-right: 108px; position: relative; vertical-align: middle; width: 100%; } .u14b1b1bec213030b9c28e49f781194e5:after { content: ""; display: block; clear: both; } </style><div class="centered-text-area"><div class="centered-text" style="float: left;"><div class="u14b1b1bec213030b9c28e49f781194e5-content"><span class="ctaText">Post relacionado:</span>  <span class="postTitle">Paginação de Dados no PHP com PDO - Introdução</span></div></div></div><div class="ctaButton"></div></a></div>
				$extensoes_aceitas = array('bmp' ,'png', 'svg', 'jpeg', 'jpg');
			    $extensao = strtolower(end(explode('.', $_FILES['foto']['name'])));

			     // Validamos se a extensão do arquivo é aceita
			    if (array_search($extensao, $extensoes_aceitas) === false):
			       echo "<h1>Extensão Inválida!</h1>";
			       exit;
			    endif;
 
			     // Verifica se o upload foi enviado via POST   
			     if(is_uploaded_file($_FILES['foto']['tmp_name'])):  
			             
			          // Verifica se o diretório de destino existe, senão existir cria o diretório  
			          if(!file_exists("fotos")):  
			               mkdir("fotos");  
			          endif;  
			  
			          // Monta o nome do arquivo  
			          $nome_foto = date('dmY') . '_' . $_FILES['foto']['name'];  
			            
			          // Essa função move_uploaded_file() copia e verifica se o arquivo enviado foi copiado com sucesso para o destino  
			          if (!move_uploaded_file($_FILES['foto']['tmp_name'], 'fotos/'.$nome_foto)):  
			               echo "Houve um erro ao gravar arquivo na pasta de destino!";  
			          endif;  
			     endif;
			else:

			 	$nome_foto = $foto_atual;

			endif;

			$sql = 'UPDATE tab_clientes SET nome=:nome, email=:email, cpf=:cpf, data_nascimento=:data_nascimento, telefone=:telefone, celular=:celular, status=:status, foto=:foto ';
			$sql .= 'WHERE id = :id';

			$stm = $conexao->prepare($sql);
			$stm->bindValue(':nome', $nome);
			$stm->bindValue(':email', $email);
			$stm->bindValue(':cpf', $cpf);
			$stm->bindValue(':data_nascimento', $data_ansi);
			$stm->bindValue(':telefone', $telefone);
			$stm->bindValue(':celular', $celular);
			$stm->bindValue(':status', $status);
			$stm->bindValue(':foto', $nome_foto);
			$stm->bindValue(':id', $id);
			$retorno = $stm->execute();

			if ($retorno):
				echo "<div class='alert alert-success' role='alert'>Registro editado com sucesso, aguarde você está sendo redirecionado ...</div> ";
		    else:
		    	echo "<div class='alert alert-danger' role='alert'>Erro ao editar registro!</div> ";
			endif;

			echo "<meta http-equiv=refresh content='3;URL=index.php'>";
		endif;
		?>

	</div>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

<!DOCTYPE html>

<html>

<head>

<title>Sistema de Cadastro</title>

</head>

<body>

<?php

require 'conexao.php';

// Atribui uma conexão PDO

$conexao = conexao::getInstance();

// Recebe os dados enviados pela submissão

$acao = (isset($_POST['acao'])) ? $_POST['acao'] : '';

$id = (isset($_POST['id'])) ? $_POST['id'] : '';

$nome = (isset($_POST['nome'])) ? $_POST['nome'] : '';

$cpf = (isset($_POST['cpf'])) ? str_replace(array('.','-'), '', $_POST['cpf']): '';

$email = (isset($_POST['email'])) ? $_POST['email'] : '';

$foto_atual = (isset($_POST['foto_atual'])) ? $_POST['foto_atual'] : '';

$data_nascimento = (isset($_POST['data_nascimento'])) ? $_POST['data_nascimento'] : '';

$telefone = (isset($_POST['telefone'])) ? str_replace(array('-', ' '), '', $_POST['telefone']) : '';

$celular = (isset($_POST['celular'])) ? str_replace(array('-', ' '), '', $_POST['celular']) : '';

$status = (isset($_POST['status'])) ? $_POST['status'] : '';

// Valida os dados recebidos

$mensagem = '';

if ($acao == 'editar' && $id == ''):

$mensagem .= '<li>ID do registros desconhecido.</li>';

endif;

// Se for ação diferente de excluir valida os dados obrigatórios

if ($acao != 'excluir'):

if ($nome == '' || strlen($nome) < 3):

$mensagem .= '<li>Favor preencher o Nome.</li>';

endif;

if ($cpf == ''):

$mensagem .= '<li>Favor preencher o CPF.</li>';

elseif(strlen($cpf) < 11):

$mensagem .= '<li>Formato do CPF inválido.</li>';

endif;

if ($email == ''):

$mensagem .= '<li>Favor preencher o E-mail.</li>';

elseif(!filter_var($email, FILTER_VALIDATE_EMAIL)):

$mensagem .= '<li>Formato do E-mail inválido.</li>';

endif;

if ($data_nascimento == ''):

$mensagem .= '<li>Favor preencher a Data de Nascimento.</li>';

else:

$data = explode('/', $data_nascimento);

if (!checkdate($data[1], $data[], $data[2])):

$mensagem .= '<li>Formato da Data de Nascimento inválido.</li>';

endif;

if ($telefone == ''):

$mensagem .= '<li>Favor preencher o Telefone.</li>';

elseif(strlen($telefone) < 10):

$mensagem .= '<li>Formato do Telefone inválido.</li>';

endif;

if ($celular == ''):

$mensagem .= '<li>Favor preencher o Celular.</li>';

elseif(strlen($celular) < 11):

$mensagem .= '<li>Formato do Celular inválido.</li>';

endif;

if ($status == ''):

$mensagem .= '<li>Favor preencher o Status.</li>';

endif;

if ($mensagem != ''):

$mensagem = '<ul>' . $mensagem . '</ul>';

echo "<div class='alert alert-danger' role='alert'>".$mensagem."</div> ";

exit;

endif;

// Constrói a data no formato ANSI yyyy/mm/dd

$data_temp = explode('/', $data_nascimento);

$data_ansi = $data_temp[2] . '/' . $data_temp[1] . '/' . $data_temp[];

endif;

// Verifica se foi solicitada a inclusão de dados

if ($acao == 'incluir'):

$nome_foto = 'padrao.jpg';

if(isset($_FILES['foto']) && $_FILES['foto']['size'] > ):

$extensoes_aceitas = array('bmp' ,'png', 'svg', 'jpeg', 'jpg');

$extensao = strtolower(end(explode('.', $_FILES['foto']['name'])));

// Validamos se a extensão do arquivo é aceita

if (array_search($extensao, $extensoes_aceitas) === false):

echo "<h1>Extensão Inválida!</h1>";

exit;

endif;

// Verifica se o upload foi enviado via POST

if(is_uploaded_file($_FILES['foto']['tmp_name'])):

// Verifica se o diretório de destino existe, senão existir cria o diretório

if(!file_exists("fotos")):

mkdir("fotos");

endif;

// Monta o caminho de destino com o nome do arquivo

$nome_foto = date('dmY') . '_' . $_FILES['foto']['name'];

// Essa função move_uploaded_file() copia e verifica se o arquivo enviado foi copiado com sucesso para o destino

if (!move_uploaded_file($_FILES['foto']['tmp_name'], 'fotos/'.$nome_foto)):

echo "Houve um erro ao gravar arquivo na pasta de destino!";

endif;

$sql = 'INSERT INTO tab_clientes (nome, email, cpf, data_nascimento, telefone, celular, status, foto)

VALUES(:nome, :email, :cpf, :data_nascimento, :telefone, :celular, :status, :foto)';

$stm = $conexao->prepare($sql);

$stm->bindValue(':nome', $nome);

$stm->bindValue(':email', $email);

$stm->bindValue(':cpf', $cpf);

$stm->bindValue(':data_nascimento', $data_ansi);

$stm->bindValue(':telefone', $telefone);

$stm->bindValue(':celular', $celular);

$stm->bindValue(':status', $status);

$stm->bindValue(':foto', $nome_foto);

$retorno = $stm->execute();

if ($retorno):

echo "<div class='alert alert-success' role='alert'>Registro inserido com sucesso, aguarde você está sendo redirecionado ...</div> ";

else:

echo "<div class='alert alert-danger' role='alert'>Erro ao inserir registro!</div> ";

endif;

echo "<meta http-equiv=refresh content='3;URL=index.php'>";

endif;

// Verifica se foi solicitada a edição de dados

if ($acao == 'editar'):

// Verifica se foi enviado uma foto via upload

if(isset($_FILES['foto']) && $_FILES['foto']['size'] > ):

// Verifica se a foto é diferente da padrão, se verdadeiro exclui a foto antiga da pasta

if ($foto_atual <> 'padrao.jpg'):

unlink("fotos/" . $foto_atual);

endif;

$extensoes_aceitas = array('bmp' ,'png', 'svg', 'jpeg', 'jpg');

$extensao = strtolower(end(explode('.', $_FILES['foto']['name'])));

// Validamos se a extensão do arquivo é aceita

if (array_search($extensao, $extensoes_aceitas) === false):

echo "<h1>Extensão Inválida!</h1>";

exit;

endif;

// Verifica se o upload foi enviado via POST

if(is_uploaded_file($_FILES['foto']['tmp_name'])):

// Verifica se o diretório de destino existe, senão existir cria o diretório

if(!file_exists("fotos")):

mkdir("fotos");

endif;

// Monta o nome do arquivo

$nome_foto = date('dmY') . '_' . $_FILES['foto']['name'];

// Essa função move_uploaded_file() copia e verifica se o arquivo enviado foi copiado com sucesso para o destino

if (!move_uploaded_file($_FILES['foto']['tmp_name'], 'fotos/'.$nome_foto)):

echo "Houve um erro ao gravar arquivo na pasta de destino!";

endif;

else:

$nome_foto = $foto_atual;

endif;

$sql = 'UPDATE tab_clientes SET nome=:nome, email=:email, cpf=:cpf, data_nascimento=:data_nascimento, telefone=:telefone, celular=:celular, status=:status, foto=:foto ';

$sql .= 'WHERE id = :id';

$stm = $conexao->prepare($sql);

$stm->bindValue(':nome', $nome);

$stm->bindValue(':email', $email);

$stm->bindValue(':cpf', $cpf);

$stm->bindValue(':data_nascimento', $data_ansi);

$stm->bindValue(':telefone', $telefone);

$stm->bindValue(':celular', $celular);

$stm->bindValue(':status', $status);

$stm->bindValue(':foto', $nome_foto);

$stm->bindValue(':id', $id);

$retorno = $stm->execute();

if ($retorno):

echo "<div class='alert alert-success' role='alert'>Registro editado com sucesso, aguarde você está sendo redirecionado ...</div> ";

else:

echo "<div class='alert alert-danger' role='alert'>Erro ao editar registro!</div> ";

endif;

echo "<meta http-equiv=refresh content='3;URL=index.php'>";

endif;

</div>

</body>

</html>

Resultado Final

Caso o id do cliente passado como parâmetro não seja encontrado:

Se o usuário clicar no botão “Editar” de um cliente ele será redirecionado para página de edição:

Carregando dados para edição do cliente com id válido:

Após gravar a edição será exibida a mensagem de sucesso:

Bom pessoal, chegando ao final de mais um post da série sobre sistema de cadastro com PHP, hoje demonstrei como construir um formulário para edição dos dados do cliente, não tivemos nada muito diferente da inclusão em termos de layout HTML somente na lógica PHP.

O próximo post será o último dessa série e vou demonstrar como excluir clientes do banco de dados.

Link para Download do projeto final com INCLUSÃO, EDIÇÃO, EXCLUSÃO E CONSULTA. (8161 downloads)

Até a próxima ….

Tags:CRUD, PDO

DevWilliam – Programação, Banco de dados e Linux

Edição – Sistema de Cadastro com PHP + PDO e MySQL

Script do Banco de Dados

Formulário para Edição dos Dados

Folha de estilo CSS customizada

Script JavaScript com Validação, Máscaras e Load de Imagem

Script PHP para Edição dos Dados

Resultado Final

Obrigado