ReTabNews

Quem conhece e gosta de PHP, já deve ter percebido como essa ferramenta torna mais interessante - e até mais divertido - a criação de páginas e sites. Neste breve tutorial vou mostrar um método simples para dinamizar a estrutura e navegação entre páginas de um site. Não será criado aqui um modelo MVC, apenas uma modularização do carregamento de páginas. Para saber mais sobre esse tipo de modelo, pesquise sobre frameworks como Laravel, Codeigniter ou Zend.

Let's code... =)

01. No diretório raiz, crie um arquivo chamado index.php e em seguida crie um diretório chamado app que vai ser a pasta onde será armazenado todo o conteúdo que será criado:

│---pasta-raiz

│  │---app

│

│  │---index.php

Para a modularização do código, o carregamento da página deve ser dividido em vários arquivos.

02. Dentro da pasta app, crie uma nova pasta chamada views e dentro desta crie três arquivos: header.php, home.php e footer.php:

│---app

│   │---views
         │---header.php
│
         │---home.php
│
         │---footer.php
│

03. Em seguida, abra o arquivo index.php - que já deve conter seu conteúdo - e o edite em três passos:

a) Recorte o conteúdo desde a primeira linha até o final da tag <header> e cole-o no arquivo app/views/header.php;

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Site Dinâmico PHP</title>

        <link rel="stylesheet" href="app/css/styles.css">
    </head>
    <body>
        <header>
            <nav>
                <div class="container">
                    <div class="row">
                        <span id="logo">&#128578</span>
                    </div>
                    <div class="row">
                        <h1 id="title">MEU SITE</h1>
                    </div>
                </div>
                <div class="container">
                    <div class="row" id="navigation">
                        <a href="">Home</a>
                        <a href="">Página 1</a>
                        <a href="">Página 2</a>
                        <a href="">Página 3</a>
                    </div>
                </div>
            </nav>
        </header>

b) Recorte o conteúdo a partir do início da tag <main> até antes do início da tag <footer> e cole-o no arquivo app/views/home.php;

<main>
    <div class="container">
        <div class="row">
            <h1>Bem Vindo!</h1>
        </div>
        <div class="row">
            <p>
                Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                Laudantium eligendi id incidunt error dolores, adipisci atque
                molestiae cum harum vero tenetur ratione, nobis labore illo quas
                quaerat aperiam similique perferendis!
            </p>
        </div>
    </div>
</main>

c) Recorte todo o restante do conteúdo - que começará a partir do início da tag <footer> - e cole-o no arquivo app/views/footer.php.

        <footer>
            <div class="container">
                <div class="row">
                    <p id="copy">&copy Copyright - Meu Site</p>
                </div>
            </div>
        </footer>
    </body>
</html>

04. Crie um arquivo chamado index.html dentro de cada pasta do site, com exceção da raiz, e nesses arquivos escreva algo, por exemplo, “Acesso negado.”. A existência desse arquivo irá garantir que ninguém consiga acesso à estrutura de suas pastas, pois ao solicitar acesso à algum dos diretórios através da URL o usuário será redirecionado para index.html. Apenas index.php dará esse acesso:

│---pasta-raiz
    │---app
│       │---css
	     │---index.html

│       │---js
	     │---index.html

│	│---views
	     │---index.html

│

│   │---index.php

05. Dentro da pasta app crie mais uma pasta, chamada pages, e nela crie arquivos para cada página do site:

│---app

│    │---pages
         │---index.html
│
         │---page1.php
│
         │---page2.php
│
         │---page3.php
│

06. Agora crie o conteúdo de index.php:

a) Para detectar a página atual crie uma variável ($pagina) que irá conter inicialmente o valor “home”, para que primeiramente seja carregado home.php e em seguida, verifique se existe na URL um valor ('id') para a variável $_GET usando o if e isset. Use também a função addslashes() que será responsável por tratar caracteres especiais;

<?php
    /* Difinir página atual pela URL */
    $pagina = 'home';

    if(isset($_GET['id'])){
        $pagina = addslashes($_GET['id']);
    }

b) A seguir, faça uma validação usando o switch. O switch irá carregar cada página solicitada com os links de navegação. Não esqueça de incluir o header.php acima e o footer.php abaixo do switch.

    /* Para carregar o header.php */
    include_once("app/views/header.php");

    /* Para carregar a página escolhida pelo usuário */
    switch ($pagina){
        case 'home':
            include_once("app/views/home.php");
        break;
        case 'page1':
            include_once("app/pages/page1.php");
        break;
        case 'page2':
            include_once("app/pages/page2.php");
        break;
        case 'page3':
            include_once("app/pages/page3.php");
        break;
        default:
            include_once("app/views/home.php");
        break;
    }

    /* Para carregar o footer.php */
    include_once("app/views/footer.php");
?>

DICA: Procure dar preferência ao uso do include_once(); para evitar erros de carregamento, pois diferente do include();, ele irá carregar o arquivo apenas uma vez, não carregando-o novamente se verificar que isto já tenha sido feito.

07. Por fim, faça o endereçamento dos links de navegação que estão dentro da tag <nav> em header.php:

<div class="container">
    <div class="row" id="navigation">
        <a href="?id=home">Home</a>
        <a href="?id=page1">Página 1</a>
        <a href="?id=page2">Página 2</a>
        <a href="?id=page3">Página 3</a>
    </div>
</div>

Repositório completo no Github

Saiba mais:

Entendendo a função addslashes():

addslashes() é uma função embutida no PHP que retorna uma string com barras invertidas na frente dos caracteres predefinidos. Não leva nenhum caractere especificado no parâmetro.

Sintaxe: addslashes($string);

Os caracteres predefinidos são:

a) citação única (‘); b) citação dupla (“); c) barra invertida ( \ ); d) NULO.

Essa função aceita apenas um parâmetro $string que especifica a string de entrada que precisa ser escapada. Também podemos dizer que este parâmetro especifica uma string na qual queremos adicionar barras invertidas antes dos caracteres predefinidos. Ela retorna a string de escape com barras invertidas na frente dos caracteres predefinidos que são passados no parâmetro.

<?php
    /* String de entrada */
    $str = addslashes('twinkle loves "coding"'); 
  
    /* Imprime a string de escape */
    echo($str);
?>

Input → $string = ‘twinkle loves “coding”‘
Output → twinkle loves \”coding\”

addslashes() diferencia-se da função addcslashes(), que aceita caracteres especificados antes dos quais deseja adicionar barras, em não aceitar nenhum caractere nos parâmetros, em vez disso, adiciona barras antes de alguns caracteres especificados.

Entendendo o papel da variável $_GET:

Quando a variável $_GET recebe algum valor através da URL, a variável ($pagina) que está sendo usada para detectar a página atual irá armazenar o valor recebido por ela. Se o usuário digita, por exemplo, http://localhost/site-dinamico?id=page1, a variável $_GET recebe o valor ('id') igual a “page1” e, em seguida, a variável $pagina o armazena. Observe que o nome “index.php” é omitido da URL. Se o valor ('id') para $_GET não for definido, a página atual continuará sendo home.php.

Referência: