CRUD com Bootstrap, PHP & MySQL – Parte II

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.

crud-bootstrap-dashboard

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:

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:

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:

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:

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

Próximos Passos…

No próximo tutorial, vamos implementar a tela de listagem, que permite acessar as principais funções do CRUD, e que exibe todos os registros cadastrados.

Até a próxima!

Orgulhosamente feito com WordPress | Tema: Baskerville 2 por Anders Noren

Acima ↑