Separando o código com PHP

Trabalhar com HTML puro é estressante? Fica pior quando o site é muito grande? Eis a solução para seus problemas.

O seu Dreamweaver também fica assim?

No post anterior eu ensinei como iniciar o trabalho com PHP, a partir daí, vamos dar continuidade ao nosso processo de aprendizado. Quando comecei a trabalhar com PHP, esse foi o meu maior motivo para continuar. Por causa de um link, ter que mudar página por página, para trocar somente “um maldito link” que estava errado é um saco. Agora imagina alterar 500 páginas? Melhor então, seu chefe manda você trocar o banner do site que consta em umas 300 páginas do site? Super Hiper Mega estressante não?

Veja o exemplo em funcionamento!

Com o PHP você pode separar o conteúdo do site em partes e quando você tiver que alterar o banner do site ou o menu, ou qualquer outra coisa que quiser, terá apenas que editar somente 1 arquivo. Isso mesmo, é bem simples. Segue o tutorial.

Primeiro criaremos a página header, que é o topo do site. Ele terá menu, banner, todo cabeçalho do documento, e salvaremos como header.php

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Alexandre Mattos Blog - PHP Require</title>
<!-- CSS da página -->
<link rel="stylesheet" type="text/css" href="estilo.css" />
<!-- JavaScript jQuery-->
</head>
<body>
<div id="menu">
	<a href="index.php">Home</a> | <a href="arquivos.php">Arquivos</a> | <a href="downloads.php">Downloads</a> | <a href="contato.php">Contato</a>
</div>
<div id="conteudo"> <!-- inicio da div do conteudo -->

Agora criaremos a página footer.php, que terá o final do html e o rodadé da página.

</div> <!-- fim da div do conteudo -->
<div id="rodape">
	<div class="esquerda">Meu Blog <a href="http://www.alexandremattos.com.br/blog" title="Alexandre Mattos Blog">amBlog</a></div>
    <div class="direita">Editado por: <a href="http://www.alexandremattos.com.br">Alexandre Mattos</a></div>
</div>
</body>
</html>

Antes de criar as páginas de conteúdo, faremos o css. Use o css que tenho como base deste html e grave como estilo.css

@charset "utf-8";
/* Desenvolvido por Alexandre Mattos
Site: alexandremattos.com.br
email: xandynnn@gmail.com
 */

*{
	padding: 0;
	margin: 0;
}

#menu {
	padding:  5px;
	border-bottom: 1px solid #CCCCCC;
	color: #999999;
}

	#menu a:link, #menu a:visited {
		color: #3399ff;
		text-decoration: none;
		padding: 0 5px 0 5px;
	}

	#menu a:hover {
		color:#999999;
		text-decoration: underline;
	}

#conteudo {
	color: #999999;
	padding: 20px;
}

	#conteudo h1{
		color:#00CC99;
		margin-bottom: 10px;
	}

	#conteudo img{
		margin: 100px 0 0 0;
	}

	#conteudo a:link, #conteudo a:visited {
		color: #3399ff;
		text-decoration: none;
	}

	#conteudo a:hover {
		color:#999999;
		text-decoration: underline;
	}

#rodape {
	color:#999999;
}

	#rodape .esquerda{
		float: left;
		margin: 0 0 0 20px;
	}

	#rodape .direita{
		float: right;
		margin: 0 20px 0 0;
	}

	#rodape a:link, #rodape a:visited {
		color: #3399ff;
		text-decoration: none;
	}

	#rodape a:hover {
		color:#999999;
		text-decoration: underline;
	}

Próximo passo é criar todas as páginas que farão parte do site.
Criarei somente 2 páginas para não alongar o post, mas é exatamente o mesmo processo para as demais.

index.php

<?php
require_once('header.php');
?>

    <h1>P&aacute;gina Principal</h1>

    <p>par&aacute;grafo da p&aacute;gina principal.</p>

<?php
require_once('footer.php');
?>

Agora a página de contato.

contato.php

<?php
require_once('header.php');
?>

    <h1>Contato</h1>

    <p>par&aacute;grafo da p&aacute;gina de contato.</p>

<?php
require_once('footer.php');
?>

Tudo pronto! Opa, ainda não! Falta 2 coisas, uma é eu explicar os códigos acima. O PHP disponibiliza em sua biblioteca de funções, uma função chamada require_once(), que permite você carregar um arquivo externo para página. Existe outras maneiras de inserir arquivos em uma página, mas no momento utilizaremos esse, que é o mais seguro neste caso.

O que essa função faz é abrir o arquivo indicado por você entre aspas simples, como no exemplo acima.

Sobre os títulos de cada página, tag title.

Eles serão os mesmos para todas as páginas Alexandre? Eu te respondo que não, pois vamos alterar agorinha mesmo.

O que temos que fazer é inserir um pequeno código em cada página de conteúdo e outro código da página header.php.

Abra o arquivo header.php e altere a seguinte linha:

<title>Alexandre Mattos Blog - PHP Require</title>

para:

<title>Alexandre Mattos Blog - <?php echo $titulo; ?></title>

Salve o arquivo header.php e abra agora todos as páginas de conteúdo criadas, que são index.php, contato.php, downloads.php e arquivos.php e insira o código a seguir na primeira linha do script php, antes do require_once do header.php.

$titulo = 'Nome da página';

Ex: O arquivo index.php que era assim:

<?php
require_once('header.php');
?>
    <h1>P&aacute;gina Principal</h1>
    <p>Par&aacute;grafo da p&aacute;gina principal</p>
<?php
require_once('footer.php');
?>

ficará assim:

<?php
$titulo = 'Nome da página';
require_once('header.php');
?>
    <h1>P&aacute;gina Principal</h1>
    <p>Par&aacute;grafo da p&aacute;gina principal</p>
<?php
require_once('footer.php');
?>

Agora faça isso em todas outras páginas e altere o valor que está entre aspas simples da variável $titulo para o nome da página referente. Você também pode fazer isso para incluir arquivos css para páginas específicas, javascripts, entre outras coisas. É muito mais simples na hora de fazer manutenção no site ou sistema, pois só terá o trabalho de alterar 1 arquivo. Quando a aplicação rodar todas as páginas incluirão a página header como cabeçalho, então se mudar o arquivo header.php, todas as páginas mudarão também.

Com sou um menino bonzinho, disponibilizo o download do exemplo. Se você não leu o tutorial, leia, pois está tudo explicado neste post.

Abraços e qualquer dúvida só perguntar.

Tags: html, passo-a-passo, PHP, require, require_once, Site, Tutorial