Layouts simples com PHP

Este tutorial é para aqueles que se estão a iniciar no PHP e querem aprender uma maneira simples e eficaz de criar layouts, eliminando redundancia e sem terem de escrever muito código.

Imaginem que têm 5 páginas idênticas e querem alterar o link que diz “Contacte-me” para “Contacte-nos”, bem, terá de ir às 5 páginas diferentes e actualizar o código. Isto é lento e pode dar origem a erro no caso de se esquecer de uma página ou assim. Para isso vamos utilizar PHP para nos safarmos desse problema.

1º Fase (0 layout)

Primeiro que tudo vamos criar o nosso layout numa pagina em php.

É este o ficheiro onde nós vamos trabalhar, exemplo.php:

<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  </head>
  <body>
    <div id="header">Texto do header</div>
    <div id="center">
        <div id="sidebar" style="float:left;">Conteúdo da sidebar</div>
        <div id="conteudo" style="float:left;">Conteúdo do site</div>
        <br style="clear:both;"/>
    </div>
    <div id="footer">Algum texto</div>
  </body>
</html>

Agora que temos o nosso ficheiro principal vamos então construir o nosso layout.

Para isso iremos criar os ficheiros header.html, footer.html e sidebar.html:

header.html:

Texto do header

footer.html:

Algum texto

sidebar.html

Conteúdo da sidebar

Agora vamos alterar o nosso exemplo.php para o seguinte:

<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  </head>
  <body>
    <div id="header"><?php include("header.html"); ?></div>
    <div id="center">
        <div id="sidebar" style="float:left;"><?php include("sidebar.html"); ?></div>
        <div id="conteudo" style="float:left;">Conteúdo do site</div>
        <br style="clear:both;"/>
    </div>
    <div id="footer"><?php include("footer.html"); ?></div>
  </body>
</html>

Por agora temos uma pagina PHP que inclui os ficheiros header.html, footer.html e sidebar.html. Assim podemos editar apenas um deles e as alterações serão feitas em todas as páginas que utilizam este código.

Mas isto não é suficiente, pois teríamos de copiar este código para todas as páginas, portanto vamos fazer mais uma pequena modificação.

2º fase (automatização)

Vamos utilizar um URL para as nossa páginas de uma maneira diferente, este seria o nosso link para a página de contactos: http://domain.com/exemplo.php?pagina=contactos

Para isto vamos alterar o nosso ficheiro exemplo.php e adicionar o seguinte código:

<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  </head>
  <body>
    <div id="header"><?php include("header.html"); ?></div>
    <div id="center">
        <div id="sidebar" style="float:left;"><?php include("sidebar.html"); ?></div>
        <div id="conteudo" style="float:left;">
        <?php
            $whitelist = array("sobre", "contactos");
            if(in_array($_GET['page'], $whitelist)) {
                include($_GET['page'].".php");
            }else{
                include("home.php");
            }
        ?>
        </div>
        <br style="clear:both;"/>
    </div>
    <div id="footer"><?php include("footer.html"); ?></div>
  </body>
</html>

Neste exemplo só aceitamos as paginas ‘sobre’, ‘contactos’ e ‘home’. A informação é retirada do link e o código inclui a página pedida. Agora so nos falta criar as paginas a serem utilizadas

home.php:

Esta é a home page.

sobre.php:

Sobre mim.

contactos.php:

Contacte-me.

Agora imagine que quer alterar o footer de todas as paginas, basta alterar o footer.html, ou então a sidebar, edita o ficheiro sidebar.html.

Nos caso de precisar de mais páginas, adicione a nova página ao array $whitelist e crie um ficheiro com o nome posto nesse array com extensão .php e o layout será sempre o mesmo que criou na página exemplo.php.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s