0% acharam este documento útil (0 voto)

128 visualizações

CRUD Com Bootstrap, PHP & MySQL - Parte II - Web Dev Academy

Este tutorial ensina como criar templates de cabeçalho e rodapé para reutilizar em um projeto CRUD com PHP e MySQL. Também mostra como criar uma página inicial com links para as funcionalidades do sistema.

Enviado por

Anselmo Nicoski

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

128 visualizações

CRUD Com Bootstrap, PHP & MySQL - Parte II - Web Dev Academy

Enviado por

Anselmo Nicoski

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 10

17/09/2021 22:32 CRUD com Bootstrap, PHP & MySQL – Parte II - Web Dev Academy

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.

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.

https://webdevacademy.com.br/tutoriais/crud-bootstrap-php-mysql-parte2/ 1/10
17/09/2021 22:33 CRUD com Bootstrap, PHP & MySQL – Parte II - Web Dev Academy

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:

1 <!DOCTYPE html>
2 <html>

3 <head>

4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6 <title>CRUD com Bootstrap</title>
7 <meta name="description" content="">
8 <meta name="viewport" content="width=device-width, initial-scale=1">

9
10 <link rel="stylesheet" href="<?php echo BASEURL; ?>css/bootstrap.min.
11 <style>

12 body {
13 padding-top: 50px;
14 padding-bottom: 20px;

15 }

16 </style>
17 <link rel="stylesheet" href="<?php echo BASEURL; ?>css/style.css">
18 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awe

19 </head>

20 <body>

21
22 <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"

23 <div class="container">

24 <div class="navbar-header">

25 <button type="button" class="navbar-toggle collapsed" data-togg

26 <span class="sr-only">Toggle navigation</span>

27 <span class="icon-bar"></span>

28 <span class="icon-bar"></span>
29 <span class="icon-bar"></span>
30 </button>

31 <a href="<?php echo BASEURL; ?>index.php" class="navbar-brand">

32 </div>

33 <div id="navbar" class="navbar-collapse collapse">

34 <ul class="nav navbar-nav">

35 <li class="dropdown">

36 <a href="#" class="dropdown toggle" data toggle="dropdown

https://webdevacademy.com.br/tutoriais/crud-bootstrap-php-mysql-parte2/ 2/10
17/09/2021 22:33 CRUD com Bootstrap, PHP & MySQL – Parte II - Web Dev Academy
36 <a href= # class= dropdown-toggle data-toggle= dropdown

37 Clientes <span class="caret"></span>

38 </a>

39 <ul class="dropdown-menu">

40 <li><a href="<?php echo BASEURL; ?>customers">Gerenci

41 <li><a href="<?php echo BASEURL; ?>customers/add.php"

42 </ul>
43 </li>

44 </ul>

45 </div>
46 </div>

47 </nav>

48
49 <main class="container">

header.php hosted with ❤ by GitHub view raw

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

https://webdevacademy.com.br/tutoriais/crud-bootstrap-php-mysql-parte2/ 3/10
17/09/2021 22:33 CRUD com Bootstrap, PHP & MySQL – Parte II - Web Dev Academy

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:

1
2 </main>

3
4 <hr>
5 <footer class="container">
6 <p>©2016 - Web Dev Academy</p>
7 </footer>
8
9 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery
10 <script>window.jQuery || document.write('<script src="<?php echo BASE
11
12 <script src="<?php echo BASEURL; ?>js/bootstrap.min.js"></script>
13
14 <script src="<?php echo BASEURL; ?>js/main.js"></script>

15 </body>

16 </html>

footer.php hosted with ❤ by GitHub view raw

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:

https://webdevacademy.com.br/tutoriais/crud-bootstrap-php-mysql-parte2/ 4/10
17/09/2021 22:33 CRUD com Bootstrap, PHP & MySQL – Parte II - Web Dev Academy

1 <?php
2 /** O nome do banco de dados*/

3 define('DB_NAME', 'wda_crud');

4 /** Usuário do banco de dados MySQL */

5 define('DB_USER', 'root');

6 /** Senha do banco de dados MySQL */

7 define('DB_PASSWORD', '');

8 /** nome do host do MySQL */

9 define('DB_HOST', 'localhost');

10 / caminho absoluto para a pasta do sistema /

11 if ( !defined('ABSPATH') )

12 define('ABSPATH', dirname(FILE) . '/');

13
14 /** caminho no server para o sistema **/

15 if ( !defined('BASEURL') )
16 define('BASEURL', '/crud-bootstrap/');

17
18 /** caminho do arquivo de banco de dados **/
19 if ( !defined('DBAPI') )

20 define('DBAPI', ABSPATH . 'inc/database.php');

21
22 /** caminhos dos templates de header e footer **/

23 define('HEADER_TEMPLATE', ABSPATH . 'inc/header.php');

24 define('FOOTER_TEMPLATE', ABSPATH . 'inc/footer.php');

config.php hosted with ❤ by GitHub view raw

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:

1 <?php require once 'config php'; ?>

https://webdevacademy.com.br/tutoriais/crud-bootstrap-php-mysql-parte2/ 5/10
17/09/2021 22:33 CRUD com Bootstrap, PHP & MySQL – Parte II - Web Dev Academy
1 <?php require_once config.php ; ?>
2 <?php require_once DBAPI; ?>

3
4 <?php include(HEADER_TEMPLATE); ?>

5 <?php $db = open_database(); ?>

6
7 <h1>Dashboard</h1>

8 <hr />

9
10 <?php if ($db) : ?>

11
12 <div class="row">

13 <div class="col-xs-6 col-sm-3 col-md-2">

14 <a href="customers/add.php" class="btn btn-primary">

15 <div class="row">

16 <div class="col-xs-12 text-center">

17 <i class="fa fa-plus fa-5x"></i>
18 </div>

19 <div class="col-xs-12 text-center">

20 <p>Novo Cliente</p>
21 </div>
22 </div>

23 </a>
24 </div>
25
26 <div class="col-xs-6 col-sm-3 col-md-2">

27 <a href="customers" class="btn btn-default">

28 <div class="row">
29 <div class="col-xs-12 text-center">
30 <i class="fa fa-user fa-5x"></i>

31 </div>
32 <div class="col-xs-12 text-center">

33 <p>Clientes</p>

34 </div>
35 </div>

36 </a>

37 </div>
38 </div>

39
40 <?php else : ?>
41 <div class="alert alert-danger" role="alert">

42 <p><strong>ERRO:</strong> Não foi possível Conectar ao Ba

43 </div>

44
45 <?php endif; ?>
46
https://webdevacademy.com.br/tutoriais/crud-bootstrap-php-mysql-parte2/ 6/10
17/09/2021 22:33 CRUD com Bootstrap, PHP & MySQL – Parte II - Web Dev Academy

47 <?php include(FOOTER_TEMPLATE); ?>

index.php hosted with ❤ by GitHub view raw

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

config.php

index.php

https://webdevacademy.com.br/tutoriais/crud-bootstrap-php-mysql-parte2/ 7/10
17/09/2021 22:33 CRUD com Bootstrap, PHP & MySQL – Parte II - Web Dev Academy

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!

Publicado por Ruan Carvalho

Ruan é especialista em Front-end e trabalha com Desenvolvimento Web desde 2007.

 Ver todos os posts por Ruan Carvalho

Tutoriais

Bootstrap, PHP

https://webdevacademy.com.br/tutoriais/crud-bootstrap-php-mysql-parte2/ 8/10
17/09/2021 22:33 CRUD com Bootstrap, PHP & MySQL – Parte II - Web Dev Academy

59 Comentários Web Dev Academy 🔒 Disqus' Privacy Policy 

1 Entrar

 Recomendar t Tweet f Compartilhar Ordenar por Mais votados

Participe da discussão...

FAZER LOGIN COM

OU REGISTRE-SE NO DISQUS ?

Nome

Breno Do Vale • 2 anos atrás

to usando a versao 4.1 do bootstrap, e ta aparecendo da seguinte forma.
http://prntscr.com/n7y7xp
6△ ▽ • Responder • Compartilhar ›

Paulo Rangel • 3 anos atrás

Ruan, não te conheço mas a tua disposição e paciência no trabalho de
compartilhar conhecimento e ajudar os colegas que você sequer conhece, o
recomenda como uma pessoa especial! Tem o meu respeito e consideração!

» CRUD com Bootstrap, PHP & MySQL - Parte I

» Bootstrap: Criando Layouts e Grids
» Bootstrap 4: Como Começar
» Como Configurar um Servidor Local para Desenvolvimento Web
» Aprenda a Fazer um CRUD com Bootstrap, PHP & MySQL

https://webdevacademy.com.br/tutoriais/crud-bootstrap-php-mysql-parte2/ 9/10
17/09/2021 22:33 CRUD com Bootstrap, PHP & MySQL – Parte II - Web Dev Academy