Tutorial PHP 5 – Construção de Layout – Parte 2

Requisitos: Artigo “Tutorial PHP5 – Construção de Layout“.

Olá pessoal,

Seguindo com nosso tutorial de criação de layouts utilizando o php 5, iremos criar a classe “header”, a qual será responsável pela criação do cabeçalho do site(topo,imagem do topo, título e descrição).

Utilizarei CSS para o design. Se surgir alguma dúvida a respeito das regras utilizadas, poste seu comentário ou visite o site do maujor. Lá, você encontrará diversos artigos relacionados à criação e utilização de regras css.

Vamos ao código comentado:

<style type="text/css">
<!--
 
/* Regras CSS */ 
#tudo{
	background-color:#CCCCCC;
	width:800px;
	height:600px;
	float:left;	
}
 
#topo{
	width:800px;
	height:100px;
	float:left;
	background-color:#FFFFFF;
	border:1px solid #000;
}
 
 
-->
</style>
 
<?php
 
//Criado por : Raphael Monroe Marcondes
// BLOG : www.raphaelmonroe.com
 
class head
{
	//construtor da classe...
	function __construct()
	{
	   //Chama a função de inclusão de início de código HTML...
	   $this->inclui_HTML();
	   //Chama a função de criação do topo...
	   $this->cria_topo();
	   //"Fecha" as tags HTML que foram abertas...
	   $this->fecha_tags();
	}
 
	function inclui_HTML()
	{
	    //HTML...
	   echo "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">";
	   echo "<html xmlns=\"http://www.w3.org/1999/xhtml\">";
	   echo "<head>";
	   echo "<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\" />";
	   //Título da página (será melhorado posteriormente a forma de dar títulos á suas paginas)...
	   echo "<title>MINHA PÁGINA</title>";
	   echo "</head>";
	   echo "<body>";	
	}
 
	function cria_topo()
	{
	   //Cria dois boxes, um que engloba todo o site e o outro sendo o topo.
	   echo "<div id=\"tudo\">";
	   echo "<div id=\"topo\"></div>";
	}
 
	function fecha_tags()
	{
	    //Fecha a a div "tudo"...
	    echo "</div>";
            echo "</body>";
	    echo "</html>";
	}
 
}	
?>

Salve o código acima como “head.class.php”.
Com essa nova classe, já podemos obter nossa primeira visualização de página!
Basta criar o index:

<?php
 
$index = new index();
 
class index
{
	function __construct()
	{
	  //Inclui as classes necessárias...
	  $this->inclui_classes();
	  //Criando a página index...
	  $this->constroi_index();
	}
 
	function inclui_classes()
	{
	    //Incluindo a classe layout...
	    include_once("layout.class.php");
	}
 
	function constroi_index()
	{
	    //Criando uma nova página através de layout...
	    $this->layout = new layout();
	}
}
?>

Salve o código acima como “index.php”.

Portanto, só para lembrá-los, até agora possuímos 3 arquivos : “layout.class.php”, “head.class.php” e “index.php”.

Basta agora, salvá-los na mesma pasta e abrir o index. Você obterá a primeira visualização da página!

OBS:Para conseguir “rodar” o index sem erros, é necessário comentar, na classe “layout”, as linhas que incluem as classes que ainda não foram feitas, como por exemplo, “menu_nav.class.php”.

Para facilitar, você pode baixar todas as classes(inclusive o “layout.class.php” com as linhas comentadas).
Lembrando à todos que estou tentando ser o mais direto possível. Qualquer dúvida é só postar seu comentário!

[]`s

10 Comentários para “Tutorial PHP 5 – Construção de Layout – Parte 2”

William
23 de julho de 2009 às 9:21

Excelente!
Lucas
12 de agosto de 2009 às 11:18

Nossa Esses tutoriais até então postados estão me ajudando,e muito agradeço,muito obrigado ajudou muito….
PPorem
3 de setembro de 2009 às 8:10

Estes exemplos tem ajudado podes continuar
obrigado
Devil's Reject
9 de setembro de 2009 às 21:04

Achei ótimo esse tutorial usando as classes do php5.
Espero que continue postando mais artigos práticos como este.
Estou desenvolvendo o restante das classes que compõe o layout proposto pelo teu artigo.
Ao invés de usar o css escrito nas páginas, criei um arquivo layout.css com todas as regras, um arquivo css.php com o link para o layout.css e depois usei um include nas páginas para puxar as regras css.
Haveria algum problema em fazer desta forma?
Saudações!
Raphael Monroe
9 de setembro de 2009 às 21:44

@Devils: Fala Cara!
Não tem problema algum. Entretanto, você estará criando um arquivo adicional, o css.php.
Você poderia criar uma classe topo, com o código do topo. Neste msm arquivo você chamaria o css criado através da linha:
Um abraço!

@Willians @Lucas @Pporem : Obrigado!
Manuel
19 de outubro de 2009 às 22:33

Como eu imaginei: perfeito!

Bem, vou ver se consigo fazer os demais. Depois compararei com os que vc ainda vai postar. Espero não ficar de raiva ou de vergonha!
Manuel
19 de outubro de 2009 às 22:37

kkkkkkkkkkkkkkkk os emoticons são todos amarelinhos! Eu quis dizer: … ficar “vermelho” de de raiva ou “azul” de vergonha.
Gil
21 de outubro de 2009 às 8:32

Você pretende continuar esta escelente série de tutos cara? Tô ansioso por ver php orientado na prática…. Jah li muita coisa mais ainda num vi algo taum bom assim como vc tah fazendo… Continua ai comfirmeza… o publico eh pequeno mas eh fiel… ^_^ Abraços.
Raphael Monroe
26 de outubro de 2009 às 8:33

@Gil: Fala cara! Pretendo continuar sim, mas infelizmente estou com um curto tempo para realizar minhas tarefas diárias. Estou cursando o último perído da universidade e isto está me tomando muito, mas muito tempo. Além dos meus trampos e talz. Portanto, tão breve não irei postar atualizações para o tutorial, mas no futuro, certamente continuarei. Grande Abraço!
nilma
12 de fevereiro de 2010 às 12:10

Achei legal essas instruções que vc passou.
tive duvidas nesta frase sua:”Para conseguir “rodar” o index sem erros, é necessário comentar, na classe “layout”, as linhas que incluem as classes que ainda não foram feitas, como por exemplo, “menu_nav.class.php”.Onde fazer essas classes, como baixar
todas as classes(inclusive o “layout.class.php” com as linhas comentadas).
Abraços!!!!