SlideShare uma empresa Scribd logo
Passo 1: Crie o Banco de Dados e a Tabela
de Clientes
Fonte: http://webdevacademy.com.br/tutoriais/crud-bootstrap-php-mysql-parte1/
A maior parte dos sistemas em PHP é feito com um banco de dados no back end, e
normalmente, esse banco de dados é o MySQL. Por isso, é importante criar essa
camada de acesso a dados de uma forma bem genérica e independente, para que
depois ela possa ser reaproveitada em todo o sistema.
Neste tutorial, você vai ver como deve ser esse banco de dados para o nosso sistema
de CRUD e como criá-lo, executando o SQL pelo phpMyAdmin. Depois disso, vamos
criar um arquivo de configurações para usar em todo o sistema. E ,por fim, vamos criar
o script de conexão com esse banco de dados, usando PHP.
Ao final, você vai ter uma estrutura inicial do banco de dados para o nosso CRUD, e a
tabela de clientes vazia, além dos arquivos iniciais do projeto.
Antes de Começar
Eu vou assumir que você já está com o seu ambiente de desenvolvimento
funcionando.
Aqui, nós vamos utilizar o XAMPP, que já traz o PHP, o MySQL (ou MariaDB), e o
phpMyAdmin para manipular o banco de dados.
Se você ainda não estiver com o ambiente pronto, é só ver a introdução desta série e
instalar os pré-requisitos.
Passo 1: Crie o Banco de Dados e a Tabela
de Clientes
Para este tutorial, vamos criar um banco de dados bem simples, com uma tabela de
clientes apenas.
Eu vou usar aqueles campos de clientes que são usados em notas fiscais para criar
essa tabela, e assim ela vai servir de exemplo para um cadastro de clientes bem
genérico.
O mapeamento das colunas da tabela de clientes ficou assim:
Clientes (codigo, nome, cpf/cnpj, data de nascimento,
endereço, bairro, cep, cidade, estado,
telefone, celular, inscrição estadual,
data de cadastro, data de atualização)
Uma boa prática, que eu sempre recomendo, é você traduzir os nomes de tabelas e os
campos para o inglês, e a partir daí criar seu banco de dados. Isso facilita muito na
hora de escrever as consultas, e na hora de escrever o código do sistema. Você ainda
acaba aprendendo um pouco mais do idioma.
Então, nós vamos ter os seguintes campos:
customers
PK id int
name varchar
cpf_cnpj varchar
birthdate date
address varchar
hood varchar
zip_code int
city varchar
state varchar
phone int
mobile int
ie int
created datetime
modified datetime
E, convertendo tudo isso em SQL, fica assim:
CREATE TABLE customers (
id int(11) NOT NULL,
name varchar(255) NOT NULL,
cpf_cnpj varchar(14) NOT NULL,
birthdate date NOT NULL,
address varchar(255) NOT NULL,
hood varchar(100) NOT NULL,
zip_code int(8) NOT NULL,
city varchar(100) NOT NULL,
state varchar(100) NOT NULL,
phone int(13) NOT NULL,
mobile int(13) NOT NULL,
ie int(11) NOT NULL,
created datetime NOT NULL,
modified datetime NOT NULL
);
ALTER TABLE customers
ADD PRIMARY KEY (id);
ALTER TABLE customers
MODIFY id int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;
view rawcrud-bootstrap.sql hosted with by GitHub
Agora, abra o phpMyAdmin do XAMPP e crie um banco de dados. Eu coloquei o nome
como wda_crud.
Se preferir, pode fazer via SQL direto (na aba SQL, do phpMyAdmin):
:
CREATE DATABASE wda_crud;
Depois que criar, use o SQL acima para criar a tabela ‘customers‘ nesse banco de
dados.
Passo 2: Crie o Arquivo de Configurações do
Sistema
Agora, vamos criar um arquivo de configurações, que vai guardar todos os dados que
vão ser usados em todos os outros scritps PHP do sistema.
Crie um arquivo chamado config.php, na pasta principal, e coloque o código a seguir:
<?php
/** O nome do banco de dados*/
define('DB_NAME', 'wda_crud');
/** Usuário do banco de dados MySQL */
define('DB_USER', 'root');
/** Senha do banco de dados MySQL */
define('DB_PASSWORD', '');
/** nome do host do MySQL */
define('DB_HOST', 'localhost');
/** caminho absoluto para a pasta do sistema **/
if ( !defined('ABSPATH') )
define('ABSPATH', dirname(__FILE__) . '/');
/** caminho no server para o sistema **/
if ( !defined('BASEURL') )
define('BASEURL', '/crud-bootstrap-php/');
/** caminho do arquivo de banco de dados **/
if ( !defined('DBAPI') )
define('DBAPI', ABSPATH . 'inc/database.php');
view rawconfig.php hosted with by GitHub
Este arquivo de configurações é baseado no wp-config do WordPress.
Os quatro primeiros itens são as constantes que vão guardar as credenciais para
acessar o banco de dados:
 o DB_NAME define o nome do seu banco de dados;
 o DB_USER é o usuário para acessar o banco de dados;
 o DB_PASSWORD é a senha deste usuário (no XAMPP, este usuário root não
tem senha);
 e o DB_HOST é endereço do servidor do banco de dados;
Você deve modificar esses valores de acordo com o seu ambiente de
desenvolvimento, ou de produção.
Além dessas constantes, temos mais duas outras que são muito importantes:
O ABSPATH, na linha 17, define o caminho absoluto da pasta deste webapp no
sistema de arquivos.
Ela vai ser usada para chamar os outros arquivos e templates via PHP (usando
o include_once), já que ela guarda o caminho físico da pasta.
E o BASEURL, na linha 21, define o caminho deste webapp no servidor web.
Esse valor deve ser igual ao nome da pasta que você criou no começo do projeto. Ela
será usada para montar os links da aplicação, já que ela guarda a URL inicial.
Depois, nós vamos adicionar mais itens neste arquivo de configurações. Por enquanto,
esses aí são suficientes para conectar com o banco.
Você pode criar outros itens próprios, também, se precisar.
Passo 3: Implemente o script de Conexão
com o Banco de Dados
Vamos criar um arquivo que vai ter todas as funções de acesso ao banco de dados.
Assim, podemos reaproveitar código nas outras partes do CRUD.
Crie um arquivo chamado database.php, na pasta inc do seu projeto, e coloque o
código a seguir:
<?php
mysqli_report(MYSQLI_REPORT_STRICT);
function open_database() {
try {
$conn = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME);
return $conn;
} catch (Exception $e) {
echo $e->getMessage();
return null;
}
}
function close_database($conn) {
try {
mysqli_close($conn);
} catch (Exception $e) {
echo $e->getMessage();
}
}
view rawdatabase.php hosted with by GitHub
Este será um arquivo de funções do banco de dados. Tudo que for relativo ao BD
estará nele.
Vamos entender esses códigos…
Primeiramente, na linha 3, configuramos o MySQL para avisar sobre erros graves,
usando a função mysqli_report(). Depois, temos duas funções.
A primeira função – open_database() – abre a conexão com a base de dados, e
retorna a conexão realizada, se der tudo certo. Se houver algum erro, a função dispara
uma exceção, que pode ser exibida ao usuário.
Já a segunda função – close_database($conn) – fecha a conexão que for passada.
Se houver qualquer erro, a função dispara uma exceção, também.
Observe as constantes sendo
usadas (DB_HOST, DB_USER, DB_PASSWORD, DB_NAME). Dessa forma, caso
você mude de servidor ou de BD, basta alterar o arquivo de
configurações; sem precisar mexer no código principal.
Passo 4: Teste a Conexão
Agora sim, vamos ver se o banco de dados está conectado ao CRUD.
Crie um arquivo chamado index.php, na pasta principal, e coloque o código a seguir:
<?php require_once 'config.php'; ?>
<?php require_once DBAPI; ?>
<?php
$db = open_database();
if ($db) {
echo '<h1>Banco de Dados Conectado!</h1>';
} else {
echo '<h1>ERRO: Não foi possível Conectar!</h1>';
}
?>
view rawindex.php hosted with by GitHub
Para entender, rapidamente:
Primeiro, adicionamos o arquivo de configurações e o arquivo de funções do banco de
dados (ou API de Banco de Dados), usando o require_once.
Depois, usamos a função para abrir a conexão. E, então, é feito um teste para saber
se a conexão existe: if ($db) …
Vamos ver se funciona… Acesse o CRUD pelo navegador:
http://localhost/crud-bootstrap-php
Se aparecer a mensagem ‘Banco de Dados Conectado!‘, sua conexão está OK.
Senão, verifique
se o MySQL está iniciado e verifique se as credenciais estão
corretas (DB_HOST, DB_USER, DB_PASSWORD, DB_NAME). Qualquer item errado
causa falha na conexão.
Até aqui, seu projeto deve estar assim:
 crud-bootstrap-php
 css
 fonts
 inc
 database.php
 js
 config.php
 index.php
 Sempre que você for fazer um sistema com PHP, ou até mesmo um site, você
deve pensar em reaproveitamento de código. Ao fazer isso você aumenta sua
produtividade, e evita gerar bugs. O ideal é que você use templates e funções
sempre que possível.
 Neste tutorial, você vai ver como criar os arquivos de template do cabeçalho
(header) e do rodapé (footer) para usar em todo o projeto. Depois disso, vamos
criar uma página inicial com os botões de acesso para as funcionalidades do
sistema.
Ao final deste tutorial, você vai ter uma estrutura básica de templates para reaproveitar
no projeto e, também, a página inicial que vai servir como dashboard, onde o usuário
vai poder acessar as funcionalidades do sistema, e do CRUD.
Antes de Começar
Eu vou assumir que você já está com o seu ambiente de desenvolvimento
funcionando, e que já criou o banco de dados do CRUD.
Se você ainda não estiver com o ambiente pronto, é só ver a introdução desta
série para instalar os pré-requisitos, e criar o BD.
Passo 1: Crie o Template do Header
Primeiro de tudo, crie um arquivo chamado header.php na pasta /inc do seu projeto.
Depois coloque esta marcação:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>CRUD com Bootstrap</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="<?php echo BASEURL; ?>css/bootstrap.min.css">
<style>
body {
padding-top: 50px;
padding-bottom: 20px;
}
</style>
<link rel="stylesheet" href="<?php echo BASEURL; ?>css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="<?php echo BASEURL; ?>index.php" class="navbar-brand">CRUD</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true
Clientes <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="<?php echo BASEURL; ?>customers">Gerenciar Clientes</a></li>
<li><a href="<?php echo BASEURL; ?>customers/add.php">Novo Cliente</a></li>
</ul>
</li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</nav>
<main class="container">
view rawheader.php hosted with by GitHub
Bastante coisa, né?!
O que essa marcação faz é o definir inicio de um página HTML básica, já usando o
Bootstrap. E, também, vamos usar o Font Awesome, que é uma biblioteca de ícones,
para os nossos botões.
Observe que em várias linhas tem o seguinte comando:
<?php echo BASEURL; ?>
Você deve se lembrar que a constante BASEURL foi definida no config.php, certo?!
Sempre que você for montar um link, você deve usar essa constante, já que ela guarda
o endereço correto dessa nossa aplicação web no servidor.
Esse header também cria um menu (a partir da linha 22), que ficará no topo da página.
Eu até adicionei dois links para os futuros “módulos” do CRUD:
<li><a href="<?php echo BASEURL; ?>customers">Gerenciar
Clientes</a></li>
<li><a href="<?php echo BASEURL; ?>customers/add.php">Novo
Cliente</a></li>
Essas páginas ainda não existem. Vamos criar nos próximos tutoriais. Mas já deixe os
links aí, esperando pelo código do “módulo de clientes”.
Passo 2: Crie o Template do Footer
Agora, crie um arquivo chamado footer.php na pasta /inc do seu projeto. E coloque
esta marcação:
</main> <!-- /container -->
<hr>
<footer class="container">
<p>&copy;2016 - Web Dev Academy</p>
</footer>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="<?php echo BASEURL; ?>js/jquery-1.11.2.min.js"></
<script src="<?php echo BASEURL; ?>js/bootstrap.min.js"></script>
<script src="<?php echo BASEURL; ?>js/main.js"></script>
</body>
</html>
view rawfooter.php hosted with by GitHub
Este aqui é mais simples.
O que essa marcação faz é “fechar” a página e criar um rodapé. Além disso, ela faz a
referência aos arquivos JavaScript do Bootstrap e do jQuery.
Chamamos os .js ao final, para manter a perfomance da página.
Veja que eu também usei o BASEURL para fazer os links.
Passo 3: Altere o config.php
Abra o arquivo config.php e adicione as constantes para os templates no seu arquivo
(as linhas 23 e 24, abaixo). Ele deve ficar assim:
<?php
/** O nome do banco de dados*/
define('DB_NAME', 'wda_crud');
/** Usuário do banco de dados MySQL */
define('DB_USER', 'root');
/** Senha do banco de dados MySQL */
define('DB_PASSWORD', '');
/** nome do host do MySQL */
define('DB_HOST', 'localhost');
/** caminho absoluto para a pasta do sistema **/
if ( !defined('ABSPATH') )
define('ABSPATH', dirname(__FILE__) . '/');
/** caminho no server para o sistema **/
if ( !defined('BASEURL') )
define('BASEURL', '/crud-bootstrap/');
/** caminho do arquivo de banco de dados **/
if ( !defined('DBAPI') )
define('DBAPI', ABSPATH . 'inc/database.php');
/** caminhos dos templates de header e footer **/
define('HEADER_TEMPLATE', ABSPATH . 'inc/header.php');
define('FOOTER_TEMPLATE', ABSPATH . 'inc/footer.php');
view rawconfig.php hosted with by GitHub
A partir daqui, sempre que você criar uma página nova, você pode usar essas
constantes HEADER_TEMPLATE e FOOTER_TEMPLATE para importar o topo e o
final da página.
Isso evita muito a repetição de código, e economizará seu tempo e esforço.
Lembre-se que para usar esses templates, você precisará sempre requisitar
o config.php, usando a função require_once.
Vamos ver isso no próximo passo…
Passo 4: Crie a Página Inicial
Agora, altere o arquivo index.php na pasta principal do seu projeto. E coloque esta
marcação:
<?php require_once 'config.php'; ?>
<?php require_once DBAPI; ?>
<?php include(HEADER_TEMPLATE); ?>
<?php $db = open_database(); ?>
<h1>Dashboard</h1>
<hr />
<?php if ($db) : ?>
<div class="row">
<div class="col-xs-6 col-sm-3 col-md-2">
<a href="customers/add.php" class="btn btn-primary">
<div class="row">
<div class="col-xs-12 text-center">
<i class="fa fa-plus fa-5x"></i>
</div>
<div class="col-xs-12 text-center">
<p>Novo Cliente</p>
</div>
</div>
</a>
</div>
<div class="col-xs-6 col-sm-3 col-md-2">
<a href="customers" class="btn btn-default">
<div class="row">
<div class="col-xs-12 text-center">
<i class="fa fa-user fa-5x"></i>
</div>
<div class="col-xs-12 text-center">
<p>Clientes</p>
</div>
</div>
</a>
</div>
</div>
<?php else : ?>
<div class="alert alert-danger" role="alert">
<p><strong>ERRO:</strong> Não foi possível Conectar ao Banco de Dados!</p>
</div>
<?php endif; ?>
<?php include(FOOTER_TEMPLATE); ?>
view rawindex.php hosted with by GitHub
As primeiras linhas fazem a inclusão do arquivo de configuração e da camada de
banco de dados.
Na linha 4, temos o seguinte comando:
<?php include(HEADER_TEMPLATE); ?>
É ele que faz a importação do nosso template de header para a página, e traz toda
aquela marcação em HTML. Assim, você não precisa escrever o topo da página em
cada script.
Depois disso, é que começa a página em si. Coloquei um título simples, e um grid que
vai manter os botões do dashboard. Esses botões usam o componente do Bootstrap e
o ícone vem do Font Awesome.
Por último, usei o comando para importar o template footer da página:
<?php include(FOOTER_TEMPLATE); ?>
Agora acesse pelo navegador, e verifique se a página está aparecendo corretamente.
http://localhost/crud-bootstrap
Até aqui, seu projeto deve estar assim:
 crud-bootstrap-php
 css
 fonts
 inc
 database.php
 footer.php
 header.php
 js
 config.php
 index.php
Agora, neste tutorial, você vai ver como criar os arquivos funções para usar em um
módulo de cadastro de clientes. Depois disso, vamos criar uma listagem inicial com os
botões de acesso para as funcionalidades do cadastro, como inserção, edição e
exclusão de cada registro.
Passo 1: Crie o Módulo e as Funções
Para começar, crie uma pasta chamada “customers“.
Essa pasta será o nosso módulo de clientes, e ela terá todas as funcionalidades
relacionadas a este model, ou entidade.
Dentro da pasta, crie um arquivo chamado “functions.php“. Esse arquivo terá todas as
funções das telas de cadastro de clientes. O código desse arquivo fica assim, por
enquanto:
<?php
require_once('../config.php');
require_once(DBAPI);
$customers = null;
$customer = null;
/**
* Listagem de Clientes
*/
function index() {
global $customers;
$customers = find_all('customers');
}
view rawfunctions.php hosted with by GitHub
As primeiras linhas fazem a importação do arquivo de configurações e da camada de
acesso a dados (DBAPI).
Depois, eu criei duas variáveis globais, para serem usadas entre as funções, e que vão
guardar os registros que estiverem sendo usados:
 A variável $customers, irá guardar um conjunto de registros de clientes.
 E a variável $customer guardará um único cliente, para os casos de inserção e
atualização (CREATE e UPDATE).
Observe a diferença entre plural e singular nos nomes de variáveis. Em web, você vai
usar muito isso: plural para vários, e singular para um único item.
A função index() é a função que será chamada na tela principal de clientes, e ela fará a
consulta pelos registros no banco de dados, e depois colocará tudo na
variável $customers, para que possamos exibir.
Observe que tem uma função find_all() sendo usada, é ela que traz os dados. Mas,
essa função não existe ainda.
Precisamos implementar essa função no arquivo database.php.
Passo 2: Implemente a Consulta no Banco de
Dados
Agora, vamos implementar as funções de consulta ao banco de dados. Vamos tentar
deixar o mais genérico possível.
Abra o arquivo database.php, que está na pasta /inc do seu projeto.
Crie a função a seguir:
<?php
/**
* Pesquisa um Registro pelo ID em uma Tabela
*/
function find( $table = null, $id = null ) {
$database = open_database();
$found = null;
try {
if ($id) {
$sql = "SELECT * FROM " . $table . " WHERE id = " . $id;
$result = $database->query($sql);
if ($result->num_rows > 0) {
$found = $result->fetch_assoc();
}
} else {
$sql = "SELECT * FROM " . $table;
$result = $database->query($sql);
if ($result->num_rows > 0) {
$found = $result->fetch_all(MYSQLI_ASSOC);
/* Metodo alternativo
$found = array();
while ($row = $result->fetch_assoc()) {
array_push($found, $row);
} */
}
}
} catch (Exception $e) {
$_SESSION['message'] = $e->GetMessage();
$_SESSION['type'] = 'danger';
}
close_database($database);
return $found;
}
view rawdatabase.php hosted with by GitHub
Essa função find faz uma busca em uma determinada tabela.
Se for passado algum id, nos parâmetros, a pesquisa será feita por esse id, que é a
chave primária da tabela (como definimos no começo).
Se não for passado o id, a consulta retornará todos os registros da tabela.
Nos dois casos, a consulta retornará dados associativos (usando
o fetch_assoc e MYSQLI_ASSOC), ou seja, são arrays com o nome da coluna e o
valor dela. Assim, fica mais fácil na hora de implementar a tela.
Caso aconteça algum problema na consulta e for disparada uma Exceção, nós
devemos exibir o que aconteceu em forma de mensagem. Para isso, eu criei duas
variáveis de sessão, do PHP, que vão guardar a mensagem da exception, e assim
poderemos exibir na tela.
Agora, crie também a seguinte função:
<?php
/**
* Pesquisa Todos os Registros de uma Tabela
*/
function find_all( $table ) {
return find($table);
}
view rawdatabase.php hosted with by GitHub
Essa função é só um alias (leia-se “aláias”) para a função find, ou seja, uma outra
forma mais prática de chamar a função sem precisar do parâmetro.
A função find_all retorna todos os registros de uma tabela.
Passo 3: Crie a Listagem dos Registros
Voltando na pasta “customers”, crie um arquivo chamado index.php.
Esse arquivo será a listagem dos registros, e também será a página principal do
módulo de clientes.
Implemente a marcação abaixo, nesse arquivo:
<?php
require_once('functions.php');
index();
?>
<?php include(HEADER_TEMPLATE); ?>
<header>
<div class="row">
<div class="col-sm-6">
<h2>Clientes</h2>
</div>
<div class="col-sm-6 text-right h2">
<a class="btn btn-primary" href="add.php"><i class="fa fa-plus"></i> Novo Cliente</a>
<a class="btn btn-default" href="index.php"><i class="fa fa-refresh"></i> Atualizar</a>
</div>
</div>
</header>
<?php if (!empty($_SESSION['message'])) : ?>
<div class="alert alert-<?php echo $_SESSION['type']; ?> alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden=
<?php echo $_SESSION['message']; ?>
</div>
<?php clear_messages(); ?>
<?php endif; ?>
<hr>
<table class="table table-hover">
<thead>
<tr>
<th>ID</th>
<th width="30%">Nome</th>
<th>CPF/CNPJ</th>
<th>Telefone</th>
<th>Atualizado em</th>
<th>Opções</th>
</tr>
</thead>
<tbody>
<?php if ($customers) : ?>
<?php foreach ($customers as $customer) : ?>
<tr>
<td><?php echo $customer['id']; ?></td>
<td><?php echo $customer['name']; ?></td>
<td><?php echo $customer['cpf_cnpj']; ?></td>
<td>00 0000-0000</td>
<td><?php echo $customer['modified']; ?></td>
<td class="actions text-right">
<a href="view.php?id=<?php echo $customer['id']; ?>" class="btn btn-sm btn-success"><i
<a href="edit.php?id=<?php echo $customer['id']; ?>" class="btn btn-sm btn-warning"><i
<a href="#" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#delete-moda
<i class="fa fa-trash"></i> Excluir
</a>
</td>
</tr>
<?php endforeach; ?>
<?php else : ?>
<tr>
<td colspan="6">Nenhum registro encontrado.</td>
</tr>
<?php endif; ?>
</tbody>
</table>
<?php include(FOOTER_TEMPLATE); ?>
view rawindex.php hosted with by GitHub
Vamos por partes…
As primeiras linhas fazem a ligação dessa página com o módulo de clientes (pelo
arquivo functions.php) e chama função index, que é o backend desta página.
Depois, coloquei um include para trazer o template de header da página, com todos os
CSS’s e Metatags necessários. Assim, não precisamos reescrever essa parte.
A partir da linha oito (8) começa a marcação da listagem, apenas com um topo simples
e algumas opções.
Na linha 20, você pode ver a verificação de mensagens de seção. Isso serve para
exibir alguma notificação que tenha sido definida no backend, como mensagens de
erro ou de sucesso, por exemplo.
Depois, você pode ver a tabela de registros. Dentro dela tem um loop (usando
o foreach) que vai pegar cada registro da variável $customers e criar uma linha nessa
tabela e exibir os dados. Como usamos os dados de forma associativa (lá na camada
de acesso a dados), é possível obter esses dados pelo nome das colunas.
Isso é um padrão em vários frameworks. Também é possível criar objetos dessa
forma.
A linha 49, mostra como você pode criar links para operações nos registros da tabela.
Basta passar o ID como parâmetro, e a função no backend (do arquivo functions.php)
deve ler e usar esse parâmetro.
E, no final, coloquei o template de footer, para fechar a página.
Passo 4: Adicione Registros via SQL
Para ver essa tela funcionando, enquanto não temos as telas de inserção, você pode
criar registros na tabela “customers” via SQL, usando o PHPMyAdmin, por exemplo:
INSERT INTO `customers` (`id`, `name`, `cpf_cnpj`, `birthdate`, `address`,
`hood`, `zip_code`, `city`, `state`, `phone`, `mobile`, `ie`, `created`, `modified`)
VALUES ('0', 'Fulano de Tal', '123.456.789-00', '1989-01-01', 'Rua da Web, 123',
'Internet', '1234568', 'Teste', 'Teste', '5555555', '55555555', '123456',
'2016-05-24 00:00:00', '2016-05-24 00:00:00');
Você pode alterar esse SQL para criar mais registros.
Até aqui, você deve ter uma tela, mais ou menos, como essa:
E a estrutura do seu projeto deve estar assim:
 crud-bootstrap-php
 css
 customers
 functions.php
 index.php
 fonts
 inc
 database.php
 footer.php
 header.php
 js
 config.php
 index.php
vamos criar as funções de persistência dessas informações no banco de dados.
Este tutorial é um pouco extenso, e tem alguns códigos mais complexos. Separe um
tempo para entender bem, e caso não entenda alguma parte, é só perguntar nos
comentários.
Passo 1: Crie a Função de Cadastro
Voltando à pasta “customers“, adicione estas a função de cadastro no arquivo
functions.php:
<?php
/**
* Cadastro de Clientes
*/
function add() {
if (!empty($_POST['customer'])) {
$today =
date_create('now', new DateTimeZone('America/Sao_Paulo'));
$customer = $_POST['customer'];
$customer['modified'] = $customer['created'] = $today->format("Y-m-d H:i:s");
save('customers', $customer);
header('location: index.php');
}
}
view rawfunctions.php hosted with by GitHub
Passo 2: Crie o Formulário de Cadastro
 Agora, crie um arquivo chamado add.php na pasta customers. Esse arquivo vai ter a
marcação do formulário de cadastro do cliente:
<?php
require_once('functions.php');
add();
?>
<?php include(HEADER_TEMPLATE); ?>
<h2>Novo Cliente</h2>
<form action="add.php" method="post">
<!-- area de campos do form -->
<hr />
<div class="row">
<div class="form-group col-md-7">
<label for="name">Nome / Razão Social</label>
<input type="text" class="form-control" name="customer['name']">
</div>
<div class="form-group col-md-3">
<label for="campo2">CNPJ / CPF</label>
<input type="text" class="form-control" name="customer['cpf_cnpj']">
</div>
<div class="form-group col-md-2">
<label for="campo3">Data de Nascimento</label>
<input type="text" class="form-control" name="customer['birthdate']">
</div>
</div>
<div class="row">
<div class="form-group col-md-5">
<label for="campo1">Endereço</label>
<input type="text" class="form-control" name="customer['address']">
</div>
<div class="form-group col-md-3">
<label for="campo2">Bairro</label>
<input type="text" class="form-control" name="customer['hood']">
</div>
<div class="form-group col-md-2">
<label for="campo3">CEP</label>
<input type="text" class="form-control" name="customer['zip_code']">
</div>
<div class="form-group col-md-2">
<label for="campo3">Data de Cadastro</label>
<input type="text" class="form-control" name="customer['created']" disabled>
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<label for="campo1">Município</label>
<input type="text" class="form-control" name="customer['city']">
</div>
<div class="form-group col-md-2">
<label for="campo2">Telefone</label>
<input type="text" class="form-control" name="customer['phone']">
</div>
<div class="form-group col-md-2">
<label for="campo3">Celular</label>
<input type="text" class="form-control" name="customer['mobile']">
</div>
<div class="form-group col-md-1">
<label for="campo3">UF</label>
<input type="text" class="form-control" name="customer['state']">
</div>
<div class="form-group col-md-2">
<label for="campo3">Inscrição Estadual</label>
<input type="text" class="form-control" name="customer['ie']">
</div>
<div class="form-group col-md-2">
<label for="campo3">UF</label>
<input type="text" class="form-control">
</div>
</div>
<div id="actions" class="row">
<div class="col-md-12">
<button type="submit" class="btn btn-primary">Salvar</button>
<a href="index.php" class="btn btn-default">Cancelar</a>
</div>
</div>
</form>
<?php include(FOOTER_TEMPLATE); ?>
view rawadd.php hosted with by GitHub
Passo 3: Crie a Função de Persistência no
BD
No arquivo database.php, implemente a função que vai inserir um registro no banco de
dados:
<?php
/**
* Insere um registro no BD
*/
function save($table = null, $data = null) {
$database = open_database();
$columns = null;
$values = null;
//print_r($data);
foreach ($data as $key => $value) {
$columns .= trim($key, "'") . ",";
$values .= "'$value',";
}
// remove a ultima virgula
$columns = rtrim($columns, ',');
$values = rtrim($values, ',');
$sql = "INSERT INTO " . $table . "($columns)" . " VALUES " . "($values);";
try {
$database->query($sql);
$_SESSION['message'] = 'Registro cadastrado com sucesso.';
$_SESSION['type'] = 'success';
} catch (Exception $e) {
$_SESSION['message'] = 'Nao foi possivel realizar a operacao.';
$_SESSION['type'] = 'danger';
}
close_database($database);
}
view rawdatabase.php hosted with by GitHub
Passo 4: Crie a Função de
Edição/Atualização
Agora, vamos fazer a parte de edição, ou atualização dos clientes.
O primeiro passo é implementar a função edit() no módulo de clientes, ou seja, no
arquivo functions.php:
<?php
/**
* Atualizacao/Edicao de Cliente
*/
function edit() {
$now = date_create('now', new DateTimeZone('America/Sao_Paulo'));
if (isset($_GET['id'])) {
$id = $_GET['id'];
if (isset($_POST['customer'])) {
$customer = $_POST['customer'];
$customer['modified'] = $now->format("Y-m-d H:i:s");
update('customers', $id, $customer);
header('location: index.php');
} else {
global $customer;
$customer = find('customers', $id);
}
} else {
header('location: index.php');
}
}
view rawfunctions.php hosted with by GitHub
Passo 5: Implemente o Formulário de Edição
Agora, crie um arquivo chamado edit.php na past  a customers. Esse arquivo vai ter a
marcação do formulário de edição do cliente, que é quase igual à do cadastro:
<?php
require_once('functions.php');
edit();
?>
<?php include(HEADER_TEMPLATE); ?>
<h2>Atualizar Cliente</h2>
<form action="edit.php?id=<?php echo $customer['id']; ?>" method="post">
<hr />
<div class="row">
<div class="form-group col-md-7">
<label for="name">Nome / Razão Social</label>
<input type="text" class="form-control" name="customer['name']" value="<?php echo $customer['name']; ?
</div>
<div class="form-group col-md-3">
<label for="campo2">CNPJ / CPF</label>
<input type="text" class="form-control" name="customer['cpf_cnpj']" value="<?php echo $customer['cpf_c
</div>
<div class="form-group col-md-2">
<label for="campo3">Data de Nascimento</label>
<input type="text" class="form-control" name="customer['birthdate']" value="<?php echo $customer['birt
</div>
</div>
<div class="row">
<div class="form-group col-md-5">
<label for="campo1">Endereço</label>
<input type="text" class="form-control" name="customer['address']" value="<?php echo $customer['addres
</div>
<div class="form-group col-md-3">
<label for="campo2">Bairro</label>
<input type="text" class="form-control" name="customer['hood']" value="<?php echo $customer['hood']; ?
</div>
<div class="form-group col-md-2">
<label for="campo3">CEP</label>
<input type="text" class="form-control" name="customer['zip_code']" value="<?php echo $customer['zip_c
</div>
<div class="form-group col-md-2">
<label for="campo3">Data de Cadastro</label>
<input type="text" class="form-control" name="customer['created']" disabled value="<?php echo $custome
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<label for="campo1">Município</label>
<input type="text" class="form-control" name="customer['city']" value="<?php echo $customer['city']; ?
</div>
<div class="form-group col-md-2">
<label for="campo2">Telefone</label>
<input type="text" class="form-control" name="customer['phone']" value="<?php echo $customer['phone'];
</div>
<div class="form-group col-md-2">
<label for="campo3">Celular</label>
<input type="text" class="form-control" name="customer['mobile']" value="<?php echo $customer['mobile'
</div>
<div class="form-group col-md-1">
<label for="campo3">UF</label>
<input type="text" class="form-control" name="customer['state']" value="<?php echo $customer['state'];
</div>
<div class="form-group col-md-2">
<label for="campo3">Inscrição Estadual</label>
<input type="text" class="form-control" name="customer['ie']" value="<?php echo $customer['ie']; ?>">
</div>
<div class="form-group col-md-2">
<label for="campo3">UF</label>
<input type="text" class="form-control">
</div>
</div>
<div id="actions" class="row">
<div class="col-md-12">
<button type="submit" class="btn btn-primary">Salvar</button>
<a href="index.php" class="btn btn-default">Cancelar</a>
</div>
</div>
</form>
<?php include(FOOTER_TEMPLATE); ?>
view rawedit.php hosted with by GitHub
Passo 6: Crie a Função de Atualização no BD
E no arquivo database.php, implemente a função que faz a atualização de um registro
no banco de dados:
<?php
/**
* Atualiza um registro em uma tabela, por ID
*/
function update($table = null, $id = 0, $data = null) {
$database = open_database();
$items = null;
foreach ($data as $key => $value) {
$items .= trim($key, "'") . "='$value',";
}
// remove a ultima virgula
$items = rtrim($items, ',');
$sql = "UPDATE " . $table;
$sql .= " SET $items";
$sql .= " WHERE id=" . $id . ";";
try {
$database->query($sql);
$_SESSION['message'] = 'Registro atualizado com sucesso.';
$_SESSION['type'] = 'success';
} catch (Exception $e) {
$_SESSION['message'] = 'Nao foi possivel realizar a operacao.';
$_SESSION['type'] = 'danger';
}
close_database($database);
}
view rawdatabase.php hosted with by GitHub
você vai ver como criar os arquivos e funções para implementar a tela de visualização
do cadastro de um cliente.
Passo 1: Revise a Consulta de Registros no
BD
No tutorial de listagem do CRUD, você deve ter criado a função find(), no
arquivo database.php.
Essa função faz a consulta de um registro, pelo ID, em uma tabela do banco de dados.
Aqui, vamos reaproveitar essa função para implementar a tela de detalhes do cliente.
Passo 2: Crie a Função de Visualização
Dentro do arquivo funcions.php, na pasta customers, implemente a função que
carrega os dados do cliente:
<?php
/**
* Visualização de um Cliente
*/
function view($id = null) {
global $customer;
$customer = find('customers', $id);
}
view rawfunctions.php hosted with by GitHub
Essa função faz a busca na tabela clientes pelo ID que foi passado pela requisição
(através do parâmetro $id).
Depois, o resultado é guardado na variável $customer, que será acessada na tela de
visualização.
Passo 3: Crie a Tela de Visualização
Voltando na pasta “customers”, crie um arquivo chamado view.php.
Esse arquivo será a visualização em detalhes do registro, ou seja, a detail view do
nosso CRUD.
Implemente a marcação abaixo, nesse arquivo:
<?php
require_once('functions.php');
view($_GET['id']);
?>
<?php include(HEADER_TEMPLATE); ?>
<h2>Cliente <?php echo $customer['id']; ?></h2>
<hr>
<?php if (!empty($_SESSION['message'])) : ?>
<div class="alert alert-<?php echo $_SESSION['type']; ?>"><?php echo $_SESSION['message']; ?></div>
<?php endif; ?>
<dl class="dl-horizontal">
<dt>Nome / Razão Social:</dt>
<dd><?php echo $customer['name']; ?></dd>
<dt>CPF / CNPJ:</dt>
<dd><?php echo $customer['cpf_cnpj']; ?></dd>
<dt>Data de Nascimento:</dt>
<dd><?php echo $customer['birthdate']; ?></dd>
</dl>
<dl class="dl-horizontal">
<dt>Endereço:</dt>
<dd><?php echo $customer['address']; ?></dd>
<dt>Bairro:</dt>
<dd><?php echo $customer['hood']; ?></dd>
<dt>CEP:</dt>
<dd><?php echo $customer['zip_code']; ?></dd>
<dt>Data de Cadastro:</dt>
<dd><?php echo $customer['created']; ?></dd>
</dl>
<dl class="dl-horizontal">
<dt>Cidade:</dt>
<dd><?php echo $customer['city']; ?></dd>
<dt>Telefone:</dt>
<dd><?php echo $customer['phone']; ?></dd>
<dt>Celular:</dt>
<dd><?php echo $customer['mobile']; ?></dd>
<dt>UF:</dt>
<dd><?php echo $customer['state']; ?></dd>
<dt>Inscrição Estadual:</dt>
<dd><?php echo $customer['ie']; ?></dd>
</dl>
<div id="actions" class="row">
<div class="col-md-12">
<a href="edit.php?id=<?php echo $customer['id']; ?>" class="btn btn-primary">Editar</a>
<a href="index.php" class="btn btn-default">Voltar</a>
</div>
</div>
<?php include(FOOTER_TEMPLATE); ?>
view rawview.php hosted with by GitHub
Você pode adicionar mais itens, se achar necessário.
você vai ver como criar a parte de exclusão de registros, usando o componente de
modal do Bootstrap.
Passo 1: Crie a Função de Exclusão
Voltando à pasta customers, implemente a função de exclusão no módulo de clientes,
ou seja, no arquivo functions.php:
<?php
/**
* Exclusão de um Cliente
*/
function delete($id = null) {
global $customer;
$customer = remove('customers', $id);
header('location: index.php');
}
view rawfunctions.php hosted with by GitHub
Passo 2: Crie o Modal de Confirmação
Agora, precisamos criar o modal de confirmação que irá aparecer quando o usuário
apertar o botão de Excluir.
Para isso, crie um arquivo chamado modal.php, dentro da pasta customers, e adicione
essa marcação:
<!-- Modal de Delete-->
<div class="modal fade" id="delete-modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Fechar"><span aria-hidden="true
<h4 class="modal-title" id="modalLabel">Excluir Item</h4>
</div>
<div class="modal-body">
Deseja realmente excluir este item?
</div>
<div class="modal-footer">
<a id="confirm" class="btn btn-primary" href="#">Sim</a>
<a id="cancel" class="btn btn-default" data-dismiss="modal">N&atilde;o</a>
</div>
</div>
</div>
</div> <!-- /.modal -->
view rawmodal.php hosted with by GitHub
Passo 3: Inclua o Modal na Listagem
(importante!)
Faça a importação do arquivo modal.php no arquivo index.php. Coloque antes
do template do footer:
// index.php
...
<?php include('modal.php'); ?>
<?php include(FOOTER_TEMPLATE); ?>
Com isso, a marcação do modal vai ser injetada na página de listagem e aí o modal
poderá ser exibido.
Passo 4: Implemente a chamada JavaScript
para excluir
Na pasta /js do seu projeto, deve ter um arquivo chamado main.js. Se não tiver, crie
ele.
Nesse arquivo, você deve implementar o evento que passa os dados para o modal e
chama a função de exclusão:
/**
* Passa os dados do cliente para o Modal, e atualiza o link para exclusão
*/
$('#delete-modal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var id = button.data('customer');
var modal = $(this);
modal.find('.modal-title').text('Excluir Cliente #' + id);
modal.find('#confirm').attr('href', 'delete.php?id=' + id);
})
view rawmain.js hosted with by GitHub
Este arquivo já deve estar referenciado no seu projeto, pelo template do footer. Se não
estiver, você precisará adicionar essa referência, como foi feito na parte 2 desta série.
Passo 5: Crie a Página de Exclusão
Na pasta customers, crie um arquivo chamado delete.php.
Esse arquivo vai receber a chamada do JavaScript junto com o ID do cliente, e
executará a exclusão.
Implemente a marcação abaixo, nesse arquivo:
<?php
require_once('functions.php');
if (isset($_GET['id'])){
delete($_GET['id']);
} else {
die("ERRO: ID não definido.");
}
?>
view rawdelete.php hosted with by GitHub
Passo 6: Implemente o SQL de Exclusão
Para finalizar, falta o comando de exclusão no banco de dados.
No arquivo inc/database.php, implemente a função remove:
<?php
/**
* Remove uma linha de uma tabela pelo ID do registro
*/
function remove( $table = null, $id = null ) {
$database = open_database();
try {
if ($id) {
$sql = "DELETE FROM " . $table . " WHERE id = " . $id;
$result = $database->query($sql);
if ($result = $database->query($sql)) {
$_SESSION['message'] = "Registro Removido com Sucesso.";
$_SESSION['type'] = 'success';
}
}
} catch (Exception $e) {
$_SESSION['message'] = $e->GetMessage();
$_SESSION['type'] = 'danger';
}
close_database($database);
}
view rawdatabase.php hosted with by GitHub
Este exemplo CRUD foi feito como uma espécie simulação de arquitetura em
camadas, como o MVC, para que você pudesse ver onde cada código se aplica.

Mais conteúdo relacionado

Mais procurados

Introdução a Linguagem C
Introdução a Linguagem CIntrodução a Linguagem C
Introdução a Linguagem C
apolllorj
 
Python - Introdução Básica
Python - Introdução BásicaPython - Introdução Básica
Python - Introdução Básica
Christian Perone
 

Mais procurados (20)

Algoritmos e lp parte 4-vetores matrizes e registros
Algoritmos e lp parte 4-vetores matrizes e registrosAlgoritmos e lp parte 4-vetores matrizes e registros
Algoritmos e lp parte 4-vetores matrizes e registros
 
Metodologia e Linguagem de Programação - Aula 1
Metodologia e Linguagem de Programação - Aula 1Metodologia e Linguagem de Programação - Aula 1
Metodologia e Linguagem de Programação - Aula 1
 
Conhecendo o Django
Conhecendo o DjangoConhecendo o Django
Conhecendo o Django
 
Introdução à Linguagem de Programação C
Introdução à Linguagem de Programação CIntrodução à Linguagem de Programação C
Introdução à Linguagem de Programação C
 
Linguagem C - Vetores
Linguagem C - VetoresLinguagem C - Vetores
Linguagem C - Vetores
 
Tags HTML
Tags HTMLTags HTML
Tags HTML
 
Apostila de Introdução aos Algoritmos - usando o Visualg
Apostila de Introdução aos Algoritmos - usando o VisualgApostila de Introdução aos Algoritmos - usando o Visualg
Apostila de Introdução aos Algoritmos - usando o Visualg
 
Python - Introdução
Python - IntroduçãoPython - Introdução
Python - Introdução
 
Programação Orientação a Objetos - Herança
Programação Orientação a Objetos - HerançaProgramação Orientação a Objetos - Herança
Programação Orientação a Objetos - Herança
 
Aula 02 - Principios da Orientação a Objetos (POO)
Aula 02 - Principios da Orientação a Objetos (POO)Aula 02 - Principios da Orientação a Objetos (POO)
Aula 02 - Principios da Orientação a Objetos (POO)
 
Introdução a Linguagem C
Introdução a Linguagem CIntrodução a Linguagem C
Introdução a Linguagem C
 
Manipulação de formulários com PHP. Uso de Cookies e Session com PHP.
Manipulação de formulários com PHP. Uso de Cookies e Session com PHP.Manipulação de formulários com PHP. Uso de Cookies e Session com PHP.
Manipulação de formulários com PHP. Uso de Cookies e Session com PHP.
 
Python - Introdução Básica
Python - Introdução BásicaPython - Introdução Básica
Python - Introdução Básica
 
Algoritmos e Técnicas de Programação - Aula 03
Algoritmos e Técnicas de Programação - Aula 03Algoritmos e Técnicas de Programação - Aula 03
Algoritmos e Técnicas de Programação - Aula 03
 
Python Interface Gráfica Tkinter
Python Interface Gráfica TkinterPython Interface Gráfica Tkinter
Python Interface Gráfica Tkinter
 
Algoritmos - Pascal
Algoritmos - PascalAlgoritmos - Pascal
Algoritmos - Pascal
 
Introdução à programação
Introdução à programação Introdução à programação
Introdução à programação
 
Curso de Python e Django
Curso de Python e DjangoCurso de Python e Django
Curso de Python e Django
 
Aprendendo Kotlin na Prática
Aprendendo Kotlin na PráticaAprendendo Kotlin na Prática
Aprendendo Kotlin na Prática
 
PYTHON FEATURES.pptx
PYTHON FEATURES.pptxPYTHON FEATURES.pptx
PYTHON FEATURES.pptx
 

Semelhante a Crud

3260 php truquesmagicos %281%29
3260 php truquesmagicos %281%293260 php truquesmagicos %281%29
3260 php truquesmagicos %281%29
Juliana Nascimento
 
Apontamentos psi m18
Apontamentos psi m18Apontamentos psi m18
Apontamentos psi m18
tomascarol2
 

Semelhante a Crud (20)

3260 php truquesmagicos %281%29
3260 php truquesmagicos %281%293260 php truquesmagicos %281%29
3260 php truquesmagicos %281%29
 
3260 php truquesmagicos
3260 php truquesmagicos3260 php truquesmagicos
3260 php truquesmagicos
 
Cakephp - framework de desenvolvimento de aplicações Web em PHP
Cakephp - framework de desenvolvimento de aplicações Web em PHPCakephp - framework de desenvolvimento de aplicações Web em PHP
Cakephp - framework de desenvolvimento de aplicações Web em PHP
 
Cake Php
Cake PhpCake Php
Cake Php
 
CakePHP
CakePHPCakePHP
CakePHP
 
Banco de dadados MySQL com PHP
Banco de dadados MySQL com PHPBanco de dadados MySQL com PHP
Banco de dadados MySQL com PHP
 
Introdução ao zend framework
Introdução ao zend frameworkIntrodução ao zend framework
Introdução ao zend framework
 
Mongo Db - PHP Day Workshop
Mongo Db - PHP Day WorkshopMongo Db - PHP Day Workshop
Mongo Db - PHP Day Workshop
 
hibernate annotation
hibernate annotationhibernate annotation
hibernate annotation
 
Dsi 015 - poo e php - conexão com bancos de dados usando pdo
Dsi   015 - poo e php - conexão com bancos de dados usando pdoDsi   015 - poo e php - conexão com bancos de dados usando pdo
Dsi 015 - poo e php - conexão com bancos de dados usando pdo
 
Tutorial codeigniter
Tutorial codeigniterTutorial codeigniter
Tutorial codeigniter
 
Apontamentos psi m18
Apontamentos psi m18Apontamentos psi m18
Apontamentos psi m18
 
Minicurso Yii2
Minicurso Yii2Minicurso Yii2
Minicurso Yii2
 
Slide 01 introdução ao php e ao code igniter
Slide 01   introdução ao php e ao code igniterSlide 01   introdução ao php e ao code igniter
Slide 01 introdução ao php e ao code igniter
 
Introducao cms-wordpress
Introducao cms-wordpressIntroducao cms-wordpress
Introducao cms-wordpress
 
Criando Sites Com CMS
Criando Sites Com CMSCriando Sites Com CMS
Criando Sites Com CMS
 
Prog web 05-php-mysql
Prog web 05-php-mysqlProg web 05-php-mysql
Prog web 05-php-mysql
 
Vb
VbVb
Vb
 
Desenvolvimento Web com Simfony Framework.
Desenvolvimento Web com Simfony Framework.Desenvolvimento Web com Simfony Framework.
Desenvolvimento Web com Simfony Framework.
 
Apostila PhP com Wamp 3a Parte
Apostila PhP com Wamp 3a ParteApostila PhP com Wamp 3a Parte
Apostila PhP com Wamp 3a Parte
 

Mais de Renato Lucena (12)

Php assíncrono com_react_php
Php assíncrono com_react_phpPhp assíncrono com_react_php
Php assíncrono com_react_php
 
Crunchy containers
Crunchy containersCrunchy containers
Crunchy containers
 
Aulão de docker
Aulão de dockerAulão de docker
Aulão de docker
 
Laravelcollectionsunraveled
LaravelcollectionsunraveledLaravelcollectionsunraveled
Laravelcollectionsunraveled
 
Ebook ui-design-v2
Ebook ui-design-v2Ebook ui-design-v2
Ebook ui-design-v2
 
Desconstruindo paulo freire thomas giulliano
Desconstruindo paulo freire   thomas giullianoDesconstruindo paulo freire   thomas giulliano
Desconstruindo paulo freire thomas giulliano
 
8 motivos-para-usar-o-yii2
8 motivos-para-usar-o-yii28 motivos-para-usar-o-yii2
8 motivos-para-usar-o-yii2
 
Estruturas blade-repeticao
Estruturas blade-repeticaoEstruturas blade-repeticao
Estruturas blade-repeticao
 
Revista programar 51
Revista programar 51Revista programar 51
Revista programar 51
 
Apresentacao engenharia aup
Apresentacao engenharia aupApresentacao engenharia aup
Apresentacao engenharia aup
 
Curiosidades bíblia
Curiosidades bíbliaCuriosidades bíblia
Curiosidades bíblia
 
Team viwer linux inicia ubuntu
Team viwer linux inicia ubuntuTeam viwer linux inicia ubuntu
Team viwer linux inicia ubuntu
 

Crud

  • 1. Passo 1: Crie o Banco de Dados e a Tabela de Clientes Fonte: http://webdevacademy.com.br/tutoriais/crud-bootstrap-php-mysql-parte1/ A maior parte dos sistemas em PHP é feito com um banco de dados no back end, e normalmente, esse banco de dados é o MySQL. Por isso, é importante criar essa camada de acesso a dados de uma forma bem genérica e independente, para que depois ela possa ser reaproveitada em todo o sistema. Neste tutorial, você vai ver como deve ser esse banco de dados para o nosso sistema de CRUD e como criá-lo, executando o SQL pelo phpMyAdmin. Depois disso, vamos criar um arquivo de configurações para usar em todo o sistema. E ,por fim, vamos criar o script de conexão com esse banco de dados, usando PHP. Ao final, você vai ter uma estrutura inicial do banco de dados para o nosso CRUD, e a tabela de clientes vazia, além dos arquivos iniciais do projeto. Antes de Começar Eu vou assumir que você já está com o seu ambiente de desenvolvimento funcionando. Aqui, nós vamos utilizar o XAMPP, que já traz o PHP, o MySQL (ou MariaDB), e o phpMyAdmin para manipular o banco de dados. Se você ainda não estiver com o ambiente pronto, é só ver a introdução desta série e instalar os pré-requisitos.
  • 2. Passo 1: Crie o Banco de Dados e a Tabela de Clientes Para este tutorial, vamos criar um banco de dados bem simples, com uma tabela de clientes apenas. Eu vou usar aqueles campos de clientes que são usados em notas fiscais para criar essa tabela, e assim ela vai servir de exemplo para um cadastro de clientes bem genérico. O mapeamento das colunas da tabela de clientes ficou assim: Clientes (codigo, nome, cpf/cnpj, data de nascimento, endereço, bairro, cep, cidade, estado, telefone, celular, inscrição estadual, data de cadastro, data de atualização) Uma boa prática, que eu sempre recomendo, é você traduzir os nomes de tabelas e os campos para o inglês, e a partir daí criar seu banco de dados. Isso facilita muito na hora de escrever as consultas, e na hora de escrever o código do sistema. Você ainda acaba aprendendo um pouco mais do idioma. Então, nós vamos ter os seguintes campos: customers PK id int name varchar cpf_cnpj varchar birthdate date address varchar
  • 3. hood varchar zip_code int city varchar state varchar phone int mobile int ie int created datetime modified datetime E, convertendo tudo isso em SQL, fica assim: CREATE TABLE customers ( id int(11) NOT NULL, name varchar(255) NOT NULL, cpf_cnpj varchar(14) NOT NULL, birthdate date NOT NULL, address varchar(255) NOT NULL, hood varchar(100) NOT NULL, zip_code int(8) NOT NULL, city varchar(100) NOT NULL, state varchar(100) NOT NULL,
  • 4. phone int(13) NOT NULL, mobile int(13) NOT NULL, ie int(11) NOT NULL, created datetime NOT NULL, modified datetime NOT NULL ); ALTER TABLE customers ADD PRIMARY KEY (id); ALTER TABLE customers MODIFY id int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1; view rawcrud-bootstrap.sql hosted with by GitHub Agora, abra o phpMyAdmin do XAMPP e crie um banco de dados. Eu coloquei o nome como wda_crud. Se preferir, pode fazer via SQL direto (na aba SQL, do phpMyAdmin): : CREATE DATABASE wda_crud; Depois que criar, use o SQL acima para criar a tabela ‘customers‘ nesse banco de dados. Passo 2: Crie o Arquivo de Configurações do Sistema Agora, vamos criar um arquivo de configurações, que vai guardar todos os dados que vão ser usados em todos os outros scritps PHP do sistema. Crie um arquivo chamado config.php, na pasta principal, e coloque o código a seguir: <?php /** O nome do banco de dados*/ define('DB_NAME', 'wda_crud'); /** Usuário do banco de dados MySQL */
  • 5. define('DB_USER', 'root'); /** Senha do banco de dados MySQL */ define('DB_PASSWORD', ''); /** nome do host do MySQL */ define('DB_HOST', 'localhost'); /** caminho absoluto para a pasta do sistema **/ if ( !defined('ABSPATH') ) define('ABSPATH', dirname(__FILE__) . '/'); /** caminho no server para o sistema **/ if ( !defined('BASEURL') ) define('BASEURL', '/crud-bootstrap-php/'); /** caminho do arquivo de banco de dados **/ if ( !defined('DBAPI') ) define('DBAPI', ABSPATH . 'inc/database.php'); view rawconfig.php hosted with by GitHub Este arquivo de configurações é baseado no wp-config do WordPress. Os quatro primeiros itens são as constantes que vão guardar as credenciais para acessar o banco de dados:  o DB_NAME define o nome do seu banco de dados;  o DB_USER é o usuário para acessar o banco de dados;  o DB_PASSWORD é a senha deste usuário (no XAMPP, este usuário root não tem senha);  e o DB_HOST é endereço do servidor do banco de dados; Você deve modificar esses valores de acordo com o seu ambiente de desenvolvimento, ou de produção. Além dessas constantes, temos mais duas outras que são muito importantes: O ABSPATH, na linha 17, define o caminho absoluto da pasta deste webapp no sistema de arquivos. Ela vai ser usada para chamar os outros arquivos e templates via PHP (usando o include_once), já que ela guarda o caminho físico da pasta. E o BASEURL, na linha 21, define o caminho deste webapp no servidor web.
  • 6. Esse valor deve ser igual ao nome da pasta que você criou no começo do projeto. Ela será usada para montar os links da aplicação, já que ela guarda a URL inicial. Depois, nós vamos adicionar mais itens neste arquivo de configurações. Por enquanto, esses aí são suficientes para conectar com o banco. Você pode criar outros itens próprios, também, se precisar. Passo 3: Implemente o script de Conexão com o Banco de Dados Vamos criar um arquivo que vai ter todas as funções de acesso ao banco de dados. Assim, podemos reaproveitar código nas outras partes do CRUD. Crie um arquivo chamado database.php, na pasta inc do seu projeto, e coloque o código a seguir: <?php mysqli_report(MYSQLI_REPORT_STRICT); function open_database() { try { $conn = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME); return $conn; } catch (Exception $e) { echo $e->getMessage(); return null; } } function close_database($conn) { try { mysqli_close($conn); } catch (Exception $e) { echo $e->getMessage(); } } view rawdatabase.php hosted with by GitHub
  • 7. Este será um arquivo de funções do banco de dados. Tudo que for relativo ao BD estará nele. Vamos entender esses códigos… Primeiramente, na linha 3, configuramos o MySQL para avisar sobre erros graves, usando a função mysqli_report(). Depois, temos duas funções. A primeira função – open_database() – abre a conexão com a base de dados, e retorna a conexão realizada, se der tudo certo. Se houver algum erro, a função dispara uma exceção, que pode ser exibida ao usuário. Já a segunda função – close_database($conn) – fecha a conexão que for passada. Se houver qualquer erro, a função dispara uma exceção, também. Observe as constantes sendo usadas (DB_HOST, DB_USER, DB_PASSWORD, DB_NAME). Dessa forma, caso você mude de servidor ou de BD, basta alterar o arquivo de configurações; sem precisar mexer no código principal. Passo 4: Teste a Conexão Agora sim, vamos ver se o banco de dados está conectado ao CRUD. Crie um arquivo chamado index.php, na pasta principal, e coloque o código a seguir: <?php require_once 'config.php'; ?> <?php require_once DBAPI; ?> <?php $db = open_database(); if ($db) { echo '<h1>Banco de Dados Conectado!</h1>'; } else { echo '<h1>ERRO: Não foi possível Conectar!</h1>'; } ?> view rawindex.php hosted with by GitHub Para entender, rapidamente:
  • 8. Primeiro, adicionamos o arquivo de configurações e o arquivo de funções do banco de dados (ou API de Banco de Dados), usando o require_once. Depois, usamos a função para abrir a conexão. E, então, é feito um teste para saber se a conexão existe: if ($db) … Vamos ver se funciona… Acesse o CRUD pelo navegador: http://localhost/crud-bootstrap-php Se aparecer a mensagem ‘Banco de Dados Conectado!‘, sua conexão está OK. Senão, verifique se o MySQL está iniciado e verifique se as credenciais estão corretas (DB_HOST, DB_USER, DB_PASSWORD, DB_NAME). Qualquer item errado causa falha na conexão. Até aqui, seu projeto deve estar assim:  crud-bootstrap-php  css  fonts  inc  database.php  js  config.php  index.php  Sempre que você for fazer um sistema com PHP, ou até mesmo um site, você deve pensar em reaproveitamento de código. Ao fazer isso você aumenta sua produtividade, e evita gerar bugs. O ideal é que você use templates e funções sempre que possível.  Neste tutorial, você vai ver como criar os arquivos de template do cabeçalho (header) e do rodapé (footer) para usar em todo o projeto. Depois disso, vamos criar uma página inicial com os botões de acesso para as funcionalidades do sistema.
  • 9. Ao final deste tutorial, você vai ter uma estrutura básica de templates para reaproveitar no projeto e, também, a página inicial que vai servir como dashboard, onde o usuário vai poder acessar as funcionalidades do sistema, e do CRUD. Antes de Começar Eu vou assumir que você já está com o seu ambiente de desenvolvimento funcionando, e que já criou o banco de dados do CRUD. Se você ainda não estiver com o ambiente pronto, é só ver a introdução desta série para instalar os pré-requisitos, e criar o BD. Passo 1: Crie o Template do Header Primeiro de tudo, crie um arquivo chamado header.php na pasta /inc do seu projeto. Depois coloque esta marcação: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>CRUD com Bootstrap</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1">
  • 10. <link rel="stylesheet" href="<?php echo BASEURL; ?>css/bootstrap.min.css"> <style> body { padding-top: 50px; padding-bottom: 20px; } </style> <link rel="stylesheet" href="<?php echo BASEURL; ?>css/style.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="<?php echo BASEURL; ?>index.php" class="navbar-brand">CRUD</a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true Clientes <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="<?php echo BASEURL; ?>customers">Gerenciar Clientes</a></li>
  • 11. <li><a href="<?php echo BASEURL; ?>customers/add.php">Novo Cliente</a></li> </ul> </li> </ul> </div><!--/.navbar-collapse --> </div> </nav> <main class="container"> view rawheader.php hosted with by GitHub Bastante coisa, né?! O que essa marcação faz é o definir inicio de um página HTML básica, já usando o Bootstrap. E, também, vamos usar o Font Awesome, que é uma biblioteca de ícones, para os nossos botões. Observe que em várias linhas tem o seguinte comando: <?php echo BASEURL; ?> Você deve se lembrar que a constante BASEURL foi definida no config.php, certo?! Sempre que você for montar um link, você deve usar essa constante, já que ela guarda o endereço correto dessa nossa aplicação web no servidor. Esse header também cria um menu (a partir da linha 22), que ficará no topo da página. Eu até adicionei dois links para os futuros “módulos” do CRUD: <li><a href="<?php echo BASEURL; ?>customers">Gerenciar Clientes</a></li> <li><a href="<?php echo BASEURL; ?>customers/add.php">Novo Cliente</a></li> Essas páginas ainda não existem. Vamos criar nos próximos tutoriais. Mas já deixe os links aí, esperando pelo código do “módulo de clientes”. Passo 2: Crie o Template do Footer Agora, crie um arquivo chamado footer.php na pasta /inc do seu projeto. E coloque esta marcação:
  • 12. </main> <!-- /container --> <hr> <footer class="container"> <p>&copy;2016 - Web Dev Academy</p> </footer> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="<?php echo BASEURL; ?>js/jquery-1.11.2.min.js"></ <script src="<?php echo BASEURL; ?>js/bootstrap.min.js"></script> <script src="<?php echo BASEURL; ?>js/main.js"></script> </body> </html> view rawfooter.php hosted with by GitHub Este aqui é mais simples. O que essa marcação faz é “fechar” a página e criar um rodapé. Além disso, ela faz a referência aos arquivos JavaScript do Bootstrap e do jQuery. Chamamos os .js ao final, para manter a perfomance da página. Veja que eu também usei o BASEURL para fazer os links. Passo 3: Altere o config.php Abra o arquivo config.php e adicione as constantes para os templates no seu arquivo (as linhas 23 e 24, abaixo). Ele deve ficar assim: <?php
  • 13. /** O nome do banco de dados*/ define('DB_NAME', 'wda_crud'); /** Usuário do banco de dados MySQL */ define('DB_USER', 'root'); /** Senha do banco de dados MySQL */ define('DB_PASSWORD', ''); /** nome do host do MySQL */ define('DB_HOST', 'localhost'); /** caminho absoluto para a pasta do sistema **/ if ( !defined('ABSPATH') ) define('ABSPATH', dirname(__FILE__) . '/'); /** caminho no server para o sistema **/ if ( !defined('BASEURL') ) define('BASEURL', '/crud-bootstrap/'); /** caminho do arquivo de banco de dados **/ if ( !defined('DBAPI') ) define('DBAPI', ABSPATH . 'inc/database.php'); /** caminhos dos templates de header e footer **/ define('HEADER_TEMPLATE', ABSPATH . 'inc/header.php'); define('FOOTER_TEMPLATE', ABSPATH . 'inc/footer.php'); view rawconfig.php hosted with by GitHub A partir daqui, sempre que você criar uma página nova, você pode usar essas constantes HEADER_TEMPLATE e FOOTER_TEMPLATE para importar o topo e o final da página. Isso evita muito a repetição de código, e economizará seu tempo e esforço. Lembre-se que para usar esses templates, você precisará sempre requisitar o config.php, usando a função require_once. Vamos ver isso no próximo passo…
  • 14. Passo 4: Crie a Página Inicial Agora, altere o arquivo index.php na pasta principal do seu projeto. E coloque esta marcação: <?php require_once 'config.php'; ?> <?php require_once DBAPI; ?> <?php include(HEADER_TEMPLATE); ?> <?php $db = open_database(); ?> <h1>Dashboard</h1> <hr /> <?php if ($db) : ?> <div class="row"> <div class="col-xs-6 col-sm-3 col-md-2"> <a href="customers/add.php" class="btn btn-primary"> <div class="row"> <div class="col-xs-12 text-center"> <i class="fa fa-plus fa-5x"></i> </div> <div class="col-xs-12 text-center"> <p>Novo Cliente</p> </div> </div> </a> </div>
  • 15. <div class="col-xs-6 col-sm-3 col-md-2"> <a href="customers" class="btn btn-default"> <div class="row"> <div class="col-xs-12 text-center"> <i class="fa fa-user fa-5x"></i> </div> <div class="col-xs-12 text-center"> <p>Clientes</p> </div> </div> </a> </div> </div> <?php else : ?> <div class="alert alert-danger" role="alert"> <p><strong>ERRO:</strong> Não foi possível Conectar ao Banco de Dados!</p> </div> <?php endif; ?> <?php include(FOOTER_TEMPLATE); ?> view rawindex.php hosted with by GitHub As primeiras linhas fazem a inclusão do arquivo de configuração e da camada de banco de dados. Na linha 4, temos o seguinte comando: <?php include(HEADER_TEMPLATE); ?>
  • 16. É ele que faz a importação do nosso template de header para a página, e traz toda aquela marcação em HTML. Assim, você não precisa escrever o topo da página em cada script. Depois disso, é que começa a página em si. Coloquei um título simples, e um grid que vai manter os botões do dashboard. Esses botões usam o componente do Bootstrap e o ícone vem do Font Awesome. Por último, usei o comando para importar o template footer da página: <?php include(FOOTER_TEMPLATE); ?> Agora acesse pelo navegador, e verifique se a página está aparecendo corretamente. http://localhost/crud-bootstrap Até aqui, seu projeto deve estar assim:  crud-bootstrap-php  css  fonts  inc  database.php  footer.php  header.php  js  config.php  index.php Agora, neste tutorial, você vai ver como criar os arquivos funções para usar em um módulo de cadastro de clientes. Depois disso, vamos criar uma listagem inicial com os botões de acesso para as funcionalidades do cadastro, como inserção, edição e exclusão de cada registro.
  • 17. Passo 1: Crie o Módulo e as Funções Para começar, crie uma pasta chamada “customers“. Essa pasta será o nosso módulo de clientes, e ela terá todas as funcionalidades relacionadas a este model, ou entidade. Dentro da pasta, crie um arquivo chamado “functions.php“. Esse arquivo terá todas as funções das telas de cadastro de clientes. O código desse arquivo fica assim, por enquanto: <?php require_once('../config.php'); require_once(DBAPI); $customers = null; $customer = null; /** * Listagem de Clientes */ function index() { global $customers; $customers = find_all('customers'); }
  • 18. view rawfunctions.php hosted with by GitHub As primeiras linhas fazem a importação do arquivo de configurações e da camada de acesso a dados (DBAPI). Depois, eu criei duas variáveis globais, para serem usadas entre as funções, e que vão guardar os registros que estiverem sendo usados:  A variável $customers, irá guardar um conjunto de registros de clientes.  E a variável $customer guardará um único cliente, para os casos de inserção e atualização (CREATE e UPDATE). Observe a diferença entre plural e singular nos nomes de variáveis. Em web, você vai usar muito isso: plural para vários, e singular para um único item. A função index() é a função que será chamada na tela principal de clientes, e ela fará a consulta pelos registros no banco de dados, e depois colocará tudo na variável $customers, para que possamos exibir. Observe que tem uma função find_all() sendo usada, é ela que traz os dados. Mas, essa função não existe ainda. Precisamos implementar essa função no arquivo database.php. Passo 2: Implemente a Consulta no Banco de Dados Agora, vamos implementar as funções de consulta ao banco de dados. Vamos tentar deixar o mais genérico possível. Abra o arquivo database.php, que está na pasta /inc do seu projeto. Crie a função a seguir: <?php /** * Pesquisa um Registro pelo ID em uma Tabela */ function find( $table = null, $id = null ) { $database = open_database(); $found = null; try {
  • 19. if ($id) { $sql = "SELECT * FROM " . $table . " WHERE id = " . $id; $result = $database->query($sql); if ($result->num_rows > 0) { $found = $result->fetch_assoc(); } } else { $sql = "SELECT * FROM " . $table; $result = $database->query($sql); if ($result->num_rows > 0) { $found = $result->fetch_all(MYSQLI_ASSOC); /* Metodo alternativo $found = array(); while ($row = $result->fetch_assoc()) { array_push($found, $row); } */ } } } catch (Exception $e) { $_SESSION['message'] = $e->GetMessage(); $_SESSION['type'] = 'danger'; } close_database($database); return $found; } view rawdatabase.php hosted with by GitHub Essa função find faz uma busca em uma determinada tabela.
  • 20. Se for passado algum id, nos parâmetros, a pesquisa será feita por esse id, que é a chave primária da tabela (como definimos no começo). Se não for passado o id, a consulta retornará todos os registros da tabela. Nos dois casos, a consulta retornará dados associativos (usando o fetch_assoc e MYSQLI_ASSOC), ou seja, são arrays com o nome da coluna e o valor dela. Assim, fica mais fácil na hora de implementar a tela. Caso aconteça algum problema na consulta e for disparada uma Exceção, nós devemos exibir o que aconteceu em forma de mensagem. Para isso, eu criei duas variáveis de sessão, do PHP, que vão guardar a mensagem da exception, e assim poderemos exibir na tela. Agora, crie também a seguinte função: <?php /** * Pesquisa Todos os Registros de uma Tabela */ function find_all( $table ) { return find($table); } view rawdatabase.php hosted with by GitHub Essa função é só um alias (leia-se “aláias”) para a função find, ou seja, uma outra forma mais prática de chamar a função sem precisar do parâmetro. A função find_all retorna todos os registros de uma tabela. Passo 3: Crie a Listagem dos Registros Voltando na pasta “customers”, crie um arquivo chamado index.php. Esse arquivo será a listagem dos registros, e também será a página principal do módulo de clientes. Implemente a marcação abaixo, nesse arquivo: <?php require_once('functions.php'); index(); ?>
  • 21. <?php include(HEADER_TEMPLATE); ?> <header> <div class="row"> <div class="col-sm-6"> <h2>Clientes</h2> </div> <div class="col-sm-6 text-right h2"> <a class="btn btn-primary" href="add.php"><i class="fa fa-plus"></i> Novo Cliente</a> <a class="btn btn-default" href="index.php"><i class="fa fa-refresh"></i> Atualizar</a> </div> </div> </header> <?php if (!empty($_SESSION['message'])) : ?> <div class="alert alert-<?php echo $_SESSION['type']; ?> alert-dismissible" role="alert"> <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden= <?php echo $_SESSION['message']; ?> </div> <?php clear_messages(); ?> <?php endif; ?> <hr> <table class="table table-hover"> <thead> <tr>
  • 22. <th>ID</th> <th width="30%">Nome</th> <th>CPF/CNPJ</th> <th>Telefone</th> <th>Atualizado em</th> <th>Opções</th> </tr> </thead> <tbody> <?php if ($customers) : ?> <?php foreach ($customers as $customer) : ?> <tr> <td><?php echo $customer['id']; ?></td> <td><?php echo $customer['name']; ?></td> <td><?php echo $customer['cpf_cnpj']; ?></td> <td>00 0000-0000</td> <td><?php echo $customer['modified']; ?></td> <td class="actions text-right"> <a href="view.php?id=<?php echo $customer['id']; ?>" class="btn btn-sm btn-success"><i <a href="edit.php?id=<?php echo $customer['id']; ?>" class="btn btn-sm btn-warning"><i <a href="#" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#delete-moda <i class="fa fa-trash"></i> Excluir </a> </td> </tr> <?php endforeach; ?> <?php else : ?> <tr> <td colspan="6">Nenhum registro encontrado.</td> </tr> <?php endif; ?> </tbody> </table>
  • 23. <?php include(FOOTER_TEMPLATE); ?> view rawindex.php hosted with by GitHub Vamos por partes… As primeiras linhas fazem a ligação dessa página com o módulo de clientes (pelo arquivo functions.php) e chama função index, que é o backend desta página. Depois, coloquei um include para trazer o template de header da página, com todos os CSS’s e Metatags necessários. Assim, não precisamos reescrever essa parte. A partir da linha oito (8) começa a marcação da listagem, apenas com um topo simples e algumas opções. Na linha 20, você pode ver a verificação de mensagens de seção. Isso serve para exibir alguma notificação que tenha sido definida no backend, como mensagens de erro ou de sucesso, por exemplo. Depois, você pode ver a tabela de registros. Dentro dela tem um loop (usando o foreach) que vai pegar cada registro da variável $customers e criar uma linha nessa tabela e exibir os dados. Como usamos os dados de forma associativa (lá na camada de acesso a dados), é possível obter esses dados pelo nome das colunas. Isso é um padrão em vários frameworks. Também é possível criar objetos dessa forma. A linha 49, mostra como você pode criar links para operações nos registros da tabela. Basta passar o ID como parâmetro, e a função no backend (do arquivo functions.php) deve ler e usar esse parâmetro. E, no final, coloquei o template de footer, para fechar a página. Passo 4: Adicione Registros via SQL Para ver essa tela funcionando, enquanto não temos as telas de inserção, você pode criar registros na tabela “customers” via SQL, usando o PHPMyAdmin, por exemplo: INSERT INTO `customers` (`id`, `name`, `cpf_cnpj`, `birthdate`, `address`, `hood`, `zip_code`, `city`, `state`, `phone`, `mobile`, `ie`, `created`, `modified`) VALUES ('0', 'Fulano de Tal', '123.456.789-00', '1989-01-01', 'Rua da Web, 123', 'Internet', '1234568', 'Teste', 'Teste', '5555555', '55555555', '123456', '2016-05-24 00:00:00', '2016-05-24 00:00:00'); Você pode alterar esse SQL para criar mais registros. Até aqui, você deve ter uma tela, mais ou menos, como essa:
  • 24. E a estrutura do seu projeto deve estar assim:  crud-bootstrap-php  css  customers  functions.php  index.php  fonts  inc  database.php  footer.php  header.php  js  config.php  index.php vamos criar as funções de persistência dessas informações no banco de dados.
  • 25. Este tutorial é um pouco extenso, e tem alguns códigos mais complexos. Separe um tempo para entender bem, e caso não entenda alguma parte, é só perguntar nos comentários. Passo 1: Crie a Função de Cadastro Voltando à pasta “customers“, adicione estas a função de cadastro no arquivo functions.php: <?php /** * Cadastro de Clientes */ function add() { if (!empty($_POST['customer'])) { $today = date_create('now', new DateTimeZone('America/Sao_Paulo')); $customer = $_POST['customer']; $customer['modified'] = $customer['created'] = $today->format("Y-m-d H:i:s"); save('customers', $customer);
  • 26. header('location: index.php'); } } view rawfunctions.php hosted with by GitHub Passo 2: Crie o Formulário de Cadastro  Agora, crie um arquivo chamado add.php na pasta customers. Esse arquivo vai ter a marcação do formulário de cadastro do cliente: <?php require_once('functions.php'); add(); ?> <?php include(HEADER_TEMPLATE); ?> <h2>Novo Cliente</h2> <form action="add.php" method="post"> <!-- area de campos do form --> <hr /> <div class="row"> <div class="form-group col-md-7"> <label for="name">Nome / Razão Social</label> <input type="text" class="form-control" name="customer['name']"> </div> <div class="form-group col-md-3"> <label for="campo2">CNPJ / CPF</label>
  • 27. <input type="text" class="form-control" name="customer['cpf_cnpj']"> </div> <div class="form-group col-md-2"> <label for="campo3">Data de Nascimento</label> <input type="text" class="form-control" name="customer['birthdate']"> </div> </div> <div class="row"> <div class="form-group col-md-5"> <label for="campo1">Endereço</label> <input type="text" class="form-control" name="customer['address']"> </div> <div class="form-group col-md-3"> <label for="campo2">Bairro</label> <input type="text" class="form-control" name="customer['hood']"> </div> <div class="form-group col-md-2"> <label for="campo3">CEP</label> <input type="text" class="form-control" name="customer['zip_code']"> </div> <div class="form-group col-md-2"> <label for="campo3">Data de Cadastro</label> <input type="text" class="form-control" name="customer['created']" disabled> </div> </div>
  • 28. <div class="row"> <div class="form-group col-md-3"> <label for="campo1">Município</label> <input type="text" class="form-control" name="customer['city']"> </div> <div class="form-group col-md-2"> <label for="campo2">Telefone</label> <input type="text" class="form-control" name="customer['phone']"> </div> <div class="form-group col-md-2"> <label for="campo3">Celular</label> <input type="text" class="form-control" name="customer['mobile']"> </div> <div class="form-group col-md-1"> <label for="campo3">UF</label> <input type="text" class="form-control" name="customer['state']"> </div> <div class="form-group col-md-2"> <label for="campo3">Inscrição Estadual</label> <input type="text" class="form-control" name="customer['ie']"> </div> <div class="form-group col-md-2"> <label for="campo3">UF</label> <input type="text" class="form-control"> </div> </div> <div id="actions" class="row">
  • 29. <div class="col-md-12"> <button type="submit" class="btn btn-primary">Salvar</button> <a href="index.php" class="btn btn-default">Cancelar</a> </div> </div> </form> <?php include(FOOTER_TEMPLATE); ?> view rawadd.php hosted with by GitHub Passo 3: Crie a Função de Persistência no BD No arquivo database.php, implemente a função que vai inserir um registro no banco de dados: <?php /** * Insere um registro no BD */ function save($table = null, $data = null) { $database = open_database(); $columns = null; $values = null; //print_r($data); foreach ($data as $key => $value) { $columns .= trim($key, "'") . ","; $values .= "'$value',"; } // remove a ultima virgula $columns = rtrim($columns, ','); $values = rtrim($values, ',');
  • 30. $sql = "INSERT INTO " . $table . "($columns)" . " VALUES " . "($values);"; try { $database->query($sql); $_SESSION['message'] = 'Registro cadastrado com sucesso.'; $_SESSION['type'] = 'success'; } catch (Exception $e) { $_SESSION['message'] = 'Nao foi possivel realizar a operacao.'; $_SESSION['type'] = 'danger'; } close_database($database); } view rawdatabase.php hosted with by GitHub Passo 4: Crie a Função de Edição/Atualização Agora, vamos fazer a parte de edição, ou atualização dos clientes. O primeiro passo é implementar a função edit() no módulo de clientes, ou seja, no arquivo functions.php: <?php /** * Atualizacao/Edicao de Cliente */ function edit() { $now = date_create('now', new DateTimeZone('America/Sao_Paulo')); if (isset($_GET['id'])) { $id = $_GET['id']; if (isset($_POST['customer'])) { $customer = $_POST['customer']; $customer['modified'] = $now->format("Y-m-d H:i:s");
  • 31. update('customers', $id, $customer); header('location: index.php'); } else { global $customer; $customer = find('customers', $id); } } else { header('location: index.php'); } } view rawfunctions.php hosted with by GitHub Passo 5: Implemente o Formulário de Edição Agora, crie um arquivo chamado edit.php na past  a customers. Esse arquivo vai ter a marcação do formulário de edição do cliente, que é quase igual à do cadastro: <?php require_once('functions.php'); edit(); ?> <?php include(HEADER_TEMPLATE); ?> <h2>Atualizar Cliente</h2> <form action="edit.php?id=<?php echo $customer['id']; ?>" method="post"> <hr /> <div class="row"> <div class="form-group col-md-7">
  • 32. <label for="name">Nome / Razão Social</label> <input type="text" class="form-control" name="customer['name']" value="<?php echo $customer['name']; ? </div> <div class="form-group col-md-3"> <label for="campo2">CNPJ / CPF</label> <input type="text" class="form-control" name="customer['cpf_cnpj']" value="<?php echo $customer['cpf_c </div> <div class="form-group col-md-2"> <label for="campo3">Data de Nascimento</label> <input type="text" class="form-control" name="customer['birthdate']" value="<?php echo $customer['birt </div> </div> <div class="row"> <div class="form-group col-md-5"> <label for="campo1">Endereço</label> <input type="text" class="form-control" name="customer['address']" value="<?php echo $customer['addres </div> <div class="form-group col-md-3"> <label for="campo2">Bairro</label> <input type="text" class="form-control" name="customer['hood']" value="<?php echo $customer['hood']; ? </div> <div class="form-group col-md-2"> <label for="campo3">CEP</label> <input type="text" class="form-control" name="customer['zip_code']" value="<?php echo $customer['zip_c </div>
  • 33. <div class="form-group col-md-2"> <label for="campo3">Data de Cadastro</label> <input type="text" class="form-control" name="customer['created']" disabled value="<?php echo $custome </div> </div> <div class="row"> <div class="form-group col-md-3"> <label for="campo1">Município</label> <input type="text" class="form-control" name="customer['city']" value="<?php echo $customer['city']; ? </div> <div class="form-group col-md-2"> <label for="campo2">Telefone</label> <input type="text" class="form-control" name="customer['phone']" value="<?php echo $customer['phone']; </div> <div class="form-group col-md-2"> <label for="campo3">Celular</label> <input type="text" class="form-control" name="customer['mobile']" value="<?php echo $customer['mobile' </div> <div class="form-group col-md-1"> <label for="campo3">UF</label> <input type="text" class="form-control" name="customer['state']" value="<?php echo $customer['state']; </div> <div class="form-group col-md-2">
  • 34. <label for="campo3">Inscrição Estadual</label> <input type="text" class="form-control" name="customer['ie']" value="<?php echo $customer['ie']; ?>"> </div> <div class="form-group col-md-2"> <label for="campo3">UF</label> <input type="text" class="form-control"> </div> </div> <div id="actions" class="row"> <div class="col-md-12"> <button type="submit" class="btn btn-primary">Salvar</button> <a href="index.php" class="btn btn-default">Cancelar</a> </div> </div> </form> <?php include(FOOTER_TEMPLATE); ?> view rawedit.php hosted with by GitHub Passo 6: Crie a Função de Atualização no BD E no arquivo database.php, implemente a função que faz a atualização de um registro no banco de dados: <?php /** * Atualiza um registro em uma tabela, por ID */ function update($table = null, $id = 0, $data = null) { $database = open_database();
  • 35. $items = null; foreach ($data as $key => $value) { $items .= trim($key, "'") . "='$value',"; } // remove a ultima virgula $items = rtrim($items, ','); $sql = "UPDATE " . $table; $sql .= " SET $items"; $sql .= " WHERE id=" . $id . ";"; try { $database->query($sql); $_SESSION['message'] = 'Registro atualizado com sucesso.'; $_SESSION['type'] = 'success'; } catch (Exception $e) { $_SESSION['message'] = 'Nao foi possivel realizar a operacao.'; $_SESSION['type'] = 'danger'; } close_database($database); } view rawdatabase.php hosted with by GitHub você vai ver como criar os arquivos e funções para implementar a tela de visualização do cadastro de um cliente.
  • 36. Passo 1: Revise a Consulta de Registros no BD No tutorial de listagem do CRUD, você deve ter criado a função find(), no arquivo database.php. Essa função faz a consulta de um registro, pelo ID, em uma tabela do banco de dados. Aqui, vamos reaproveitar essa função para implementar a tela de detalhes do cliente. Passo 2: Crie a Função de Visualização Dentro do arquivo funcions.php, na pasta customers, implemente a função que carrega os dados do cliente: <?php /** * Visualização de um Cliente */ function view($id = null) { global $customer; $customer = find('customers', $id); }
  • 37. view rawfunctions.php hosted with by GitHub Essa função faz a busca na tabela clientes pelo ID que foi passado pela requisição (através do parâmetro $id). Depois, o resultado é guardado na variável $customer, que será acessada na tela de visualização. Passo 3: Crie a Tela de Visualização Voltando na pasta “customers”, crie um arquivo chamado view.php. Esse arquivo será a visualização em detalhes do registro, ou seja, a detail view do nosso CRUD. Implemente a marcação abaixo, nesse arquivo: <?php require_once('functions.php'); view($_GET['id']); ?> <?php include(HEADER_TEMPLATE); ?> <h2>Cliente <?php echo $customer['id']; ?></h2> <hr> <?php if (!empty($_SESSION['message'])) : ?> <div class="alert alert-<?php echo $_SESSION['type']; ?>"><?php echo $_SESSION['message']; ?></div> <?php endif; ?> <dl class="dl-horizontal"> <dt>Nome / Razão Social:</dt> <dd><?php echo $customer['name']; ?></dd>
  • 38. <dt>CPF / CNPJ:</dt> <dd><?php echo $customer['cpf_cnpj']; ?></dd> <dt>Data de Nascimento:</dt> <dd><?php echo $customer['birthdate']; ?></dd> </dl> <dl class="dl-horizontal"> <dt>Endereço:</dt> <dd><?php echo $customer['address']; ?></dd> <dt>Bairro:</dt> <dd><?php echo $customer['hood']; ?></dd> <dt>CEP:</dt> <dd><?php echo $customer['zip_code']; ?></dd> <dt>Data de Cadastro:</dt> <dd><?php echo $customer['created']; ?></dd> </dl> <dl class="dl-horizontal"> <dt>Cidade:</dt> <dd><?php echo $customer['city']; ?></dd>
  • 39. <dt>Telefone:</dt> <dd><?php echo $customer['phone']; ?></dd> <dt>Celular:</dt> <dd><?php echo $customer['mobile']; ?></dd> <dt>UF:</dt> <dd><?php echo $customer['state']; ?></dd> <dt>Inscrição Estadual:</dt> <dd><?php echo $customer['ie']; ?></dd> </dl> <div id="actions" class="row"> <div class="col-md-12"> <a href="edit.php?id=<?php echo $customer['id']; ?>" class="btn btn-primary">Editar</a> <a href="index.php" class="btn btn-default">Voltar</a> </div> </div> <?php include(FOOTER_TEMPLATE); ?> view rawview.php hosted with by GitHub Você pode adicionar mais itens, se achar necessário. você vai ver como criar a parte de exclusão de registros, usando o componente de modal do Bootstrap.
  • 40. Passo 1: Crie a Função de Exclusão Voltando à pasta customers, implemente a função de exclusão no módulo de clientes, ou seja, no arquivo functions.php: <?php /** * Exclusão de um Cliente */ function delete($id = null) { global $customer; $customer = remove('customers', $id); header('location: index.php'); } view rawfunctions.php hosted with by GitHub Passo 2: Crie o Modal de Confirmação Agora, precisamos criar o modal de confirmação que irá aparecer quando o usuário apertar o botão de Excluir. Para isso, crie um arquivo chamado modal.php, dentro da pasta customers, e adicione essa marcação:
  • 41. <!-- Modal de Delete--> <div class="modal fade" id="delete-modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Fechar"><span aria-hidden="true <h4 class="modal-title" id="modalLabel">Excluir Item</h4> </div> <div class="modal-body"> Deseja realmente excluir este item? </div> <div class="modal-footer"> <a id="confirm" class="btn btn-primary" href="#">Sim</a> <a id="cancel" class="btn btn-default" data-dismiss="modal">N&atilde;o</a> </div> </div> </div> </div> <!-- /.modal --> view rawmodal.php hosted with by GitHub Passo 3: Inclua o Modal na Listagem (importante!) Faça a importação do arquivo modal.php no arquivo index.php. Coloque antes do template do footer: // index.php ... <?php include('modal.php'); ?>
  • 42. <?php include(FOOTER_TEMPLATE); ?> Com isso, a marcação do modal vai ser injetada na página de listagem e aí o modal poderá ser exibido. Passo 4: Implemente a chamada JavaScript para excluir Na pasta /js do seu projeto, deve ter um arquivo chamado main.js. Se não tiver, crie ele. Nesse arquivo, você deve implementar o evento que passa os dados para o modal e chama a função de exclusão: /** * Passa os dados do cliente para o Modal, e atualiza o link para exclusão */ $('#delete-modal').on('show.bs.modal', function (event) { var button = $(event.relatedTarget); var id = button.data('customer'); var modal = $(this); modal.find('.modal-title').text('Excluir Cliente #' + id); modal.find('#confirm').attr('href', 'delete.php?id=' + id); }) view rawmain.js hosted with by GitHub Este arquivo já deve estar referenciado no seu projeto, pelo template do footer. Se não estiver, você precisará adicionar essa referência, como foi feito na parte 2 desta série. Passo 5: Crie a Página de Exclusão Na pasta customers, crie um arquivo chamado delete.php. Esse arquivo vai receber a chamada do JavaScript junto com o ID do cliente, e executará a exclusão. Implemente a marcação abaixo, nesse arquivo:
  • 43. <?php require_once('functions.php'); if (isset($_GET['id'])){ delete($_GET['id']); } else { die("ERRO: ID não definido."); } ?> view rawdelete.php hosted with by GitHub Passo 6: Implemente o SQL de Exclusão Para finalizar, falta o comando de exclusão no banco de dados. No arquivo inc/database.php, implemente a função remove: <?php /** * Remove uma linha de uma tabela pelo ID do registro */ function remove( $table = null, $id = null ) { $database = open_database(); try { if ($id) { $sql = "DELETE FROM " . $table . " WHERE id = " . $id; $result = $database->query($sql); if ($result = $database->query($sql)) { $_SESSION['message'] = "Registro Removido com Sucesso."; $_SESSION['type'] = 'success'; } } } catch (Exception $e) { $_SESSION['message'] = $e->GetMessage();
  • 44. $_SESSION['type'] = 'danger'; } close_database($database); } view rawdatabase.php hosted with by GitHub Este exemplo CRUD foi feito como uma espécie simulação de arquitetura em camadas, como o MVC, para que você pudesse ver onde cada código se aplica.