Publicado em

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!

19 comentários sobre “CRUD com Bootstrap, PHP & MySQL – Parte II

  1. Parabéns, perfeito! seu nível de conhecimento é incrível, ficou bonito o dashboard.

    1. Muito obrigado, Eduardo!

  2. Amigo boa noite quando voce vai postar a proxima aula?

    1. Tô finalizando as partes III e IV, Julio.
      Deve sair amanhã.

      1. Opa Ruan Carvalho Obrigado amigo estou entrando agora na área de desenvolvimento e seus tutorias tenho aprendido bastante. Parabéns pelo trabalho

  3. Bom dia, Ruan!

    Ótimo tutorial! Muito obrigado por compartilhar seu conhecimento!

    Aguardamos as próximas partes!

  4. Esse tutorial era tudo oque precisava! Excelente!

  5. Bom dia Raul;

    Na linha 17 do arquivo header.php, faz-se uma referencia ao arquivo style.css na pasta css.
    Não achei em nenhum lugar como construir este arquivo style.css.

    Pulei alguma parte ?

    Obrigado

    1. Raul?! rsrsrs

      O style.css não tem implementação nesse tutorial. Está lá apenas para o caso de você querer modificar algum CSS.
      Pode criar se quiser. Mas o tutorial não tem dependência dele.

      Abs.
      Ruan

  6. Fala ai cara. Bom demais?
    Gostei muito do seu site. Tem muita informação bacana que ajuda bastante na hora do aperto.
    Eu tenho as seguintes linhas: “css/bootstrap.min.css”.
    Quando eu coloco esse comando php o bootstrap não funciona e obviamente quando tiro ele funciona, será que pode ser a referencia da pasta?

    1. Pode ser, sim.
      Talvez ele não tá encontrando o caminho correto do arquivo, ou pode ser algum erro na sintaxe (falta de aspas, etc.) daí nada funciona depois do comando.

      1. Pois é eu uso a IDE Aptana Studio 3, MySQL e o XAMPP para fazer este tutorial. Existe alguma forma em que eu possa descobrir a url correta, algum comando específico. Eu consegui seguir até a parte do Banco de Dados que funcionou que é uma maravilha, mas quando chegou nessa parte… Deus é mais… enrolou tudo. Me ajuda ai se tiver como. To usando esta ideia de software que você postou para criar uma outra para o local onde trabalho. Obrigado!

  7. Tem como eu substituir este comando?

  8. Bom dia Ruan. Parabéns pela iniciativa. Este tutorial está ótimo, com fácil compreensão e ótima aplicação. Tenho uma dúvida, no meu caso estou usando como pasta raiz ‘/var/www/html/estudo’ para chegar até crud-bootstrap-php. Por causa das pasta estudo o CSS do bootstrap não carrega, embora tanto o header quanto o footer apareçam embora. Pelo inspetor de elementos do Chromecast vi que falta só essa pasta no caminho base, pois colocando /estudo/ antes de o bootstrap funciona. Poderia me tirar essa dúvida do caminho até a pasta? Creio que seria na constante ABSPATH. Ah, tentei colocar na constante antes depois da /, sem sucesso e tbm na constante BASEURL antes de /crud-bootstrap-php/ mas tbm sem sucesso

    1. Seguem prints da minha dúvida
      http://imageshack.com/a/img922/70/QGBxiS.png
      http://imageshack.com/a/img924/1808/t5jiQF.png

      Favor verificar a url no browser e a url pelo inspetor de elementos

      1. Seu problema é no BASEURL.

        Essa constante é o endereço HTTP completo da aplicação. No seu caso deve ficar assim:
        define(‘BASEURL’, ‘/estudo/crud-bootstrap-php/’)
        no arquivo config.php. (Observe a “barra” no início da constante.)

        Daí, sempre que ela for usada, vai ficar algo como http://localhost/estudo/crud-bootstrap-php.

        Abs.
        Ruan

  9. Boa tarde
    eu coloquei esse caminha

    /** caminho no server para o sistema **/
    if ( !defined(‘BASEURL’) )
    define(‘BASEURL’, ‘/gestaoescolar/’);

    e dá esse erro
    Parse error: syntax error, unexpected ‘BASEURL’ (T_STRING), expecting ‘,’ or ‘)’ in C:\xampp\htdocs\gestaoescolar\config.php on line 15

    1. Você está usando apóstrofo (‘BASEURL’) ao invés de aspas simples (‘BASEURL’)
      Por isso o interpretador dá como erro de sintaxe (Parse error: syntax error)
      Parece igual, mas não é.

  10. Bom dia,
    No meu site a faixa na cor preta do header não apareceu, o que pode ser?

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *