police-box

Modelo de Projeto

Refatorando o Projeto de HTML para PHP

Reorganizando as Pastas

Para uma melhor organização, criamos uma pasta chamada assets. Nela, todo o conteúdo extra, como CSS, JS, imagens e bibliotecas, será armazenado. Atualmente, temos apenas os diretórios css, js e img.

Agora vamos criar nossos componentes isolados. Crie uma pasta chamada includes. Aqui, estarão os templates do nosso código. Por enquanto, teremos footer.php, header.php e produtos.php. O conteúdo desses arquivos foi retirado do index.html, com cada tag colocada em seu respectivo arquivo.

• No arquivo header.php, teremos nosso cabeçalho junto com os links de referência do projeto, e também nosso menu de navegação.

• No arquivo footer.php, teremos toda a tag footer e o script do projeto.

• Note que a tag <body> não é fechada no arquivo header.php. Esta tag deverá ser fechada no início do arquivo footer.php.

• No arquivo de produtos, foi copiada toda a section id="produtos". A estrutura principal com a section e main foi mantida, mas apenas a primeira tag figure foi deixada como base.

• Resultado das alterações até o momento.

  

Reorganizando os Arquivos

• Primeiramente, renomeie o arquivo index.html para index.php, já que a maioria das tags do nosso arquivo principal foi removida. Agora, precisaremos incluí-las no novo arquivo.