Guia para desenvolver o seu 1º site dinâmico utilizando PHP!

Em 90% dos casos, resumimos o nosso início de carreira na TI com duas palavras: HTML e CSS.

Sim! E, no começo, saber estas duas linguagens é realmente incrível!

Afinal de contas, você é capaz de inserir elementos via HTML e ainda consegue formatar estes elementos, aplicando estilos, cores, efeitos e muito mais através de regras CSS! E, se você for determinado, logo você já aprende scripts básicos com JavaScript para dar vida a sua página e proporcionar interação com o usuário!

Por fim, você consegue enxergar o resultado de tudo isso em seu navegador. Muito provavelmente você estará visualizando uma página estática. O que não deixa de ser incrível para quem está começando a sua trajetória no mundo do desenvolvimento Web!

Contudo, a web pode ser muito mais do que simplesmente páginas estruturadas manualmente em um documento HTML. Ao invés de aplicações estáticas, elas podem ser dinâmicas. Tá, mas o que é isso?

Site Dinâmico

Um website pode processar e executar tarefas utilizando linguagens de programação que servem como instrumento para responder à requisições de usuários e funções pré-programadas, manipulando os dados de entrada e saída de forma automática. Chamamos isso de um site dinâmico!

Neste caso, linguagens de programação são responsáveis por processar informações de formulários e URLs, controlar o fluxo da aplicação, gerenciar permissões de usuários e muitas outras funcionalidades.

Site Estático

Já, um website estático possui toda a informação que deve ser exibida incluída e, posteriormente editada, diretamente nos seu código HTML. Esse tipo de abordagem é útil para a criação de websites que não necessitam de alterações frequentes.

Como exemplo, podemos citar: currículos online, portfólios ou websites institucionais que não dependam de gerenciamento de notícias.

Prós e contras…

O principal benefício de um site estático é a flexibilidade de adaptação do conteúdo e facilidade no seu desenvolvimento:

O conteúdo é fácil de adaptar porque não envolve funções complexas que utilizam linguagens de programação ou conexões com banco de dados;
Já a facilidade de desenvolvimento se dá por ser possível desenvolvê-lo apenas com conhecimentos básicos de HTML e CSS.

Por outro lado, um site dinâmico traz a possibilidade de criar aplicações mais robustas e que possuem diversas funcionalidades:

Essa abordagem gera mais custos pela complexidade de desenvolvimento e necessidade de padronização do conteúdo exibido, tendo em vista adaptá-lo às necessidades da linguagem de programação;
A complexidade de desenvolvimento é recompensada, uma vez que sites dinâmicos atendem a qualquer tamanho de aplicação e não dependem do conhecimento técnico em programação, por parte do usuário, para editá-lo. Ou seja, com um site dinâmico é possível implementar um gerenciador de conteúdos que possibilita o usuário administrador a realizar todas as alterações necessárias através de uma interface amigável.

Exemplos de sites dinâmicos:

Blogs, redes sociais, portais de conteúdo, sistemas bancários, serviços de e-mail, de pagamento, lojas virtuais e até o próprio site da Becode.

Enfim, qualquer site que precisa ser dinamicamente gerenciado, caso contrário, seria inviável realizar a manutenção do conteúdo de forma manual. Imagine se a cada nova postagem, um funcionário do Facebook tivesse que incluir o HTML e o CSS para aquele novo conteúdo? Difícil, se não impossível, certo? E o que seria o Facebook, se não uma interface amigável onde você (usuário administrador de sua conta) consegue realizar todas as alterações necessárias apenas apertando botões intuitivos? Ou seja, o Facebook é uma aplicação dinâmica!

Criando Sites Dinâmicos

Dito isso, como podemos dar o primeiro passo rumo ao desenvolvimento de sites dinâmicos?

Basicamente, existem duas formas principais:

Scripts do lado do servidor (server-side) ou;
Scripts do lado do cliente (client-side).

Neste post, vamos dar atenção à primeira forma.

Sendo assim, o que precisamos fazer primeiro é definir qual linguagem de programação iremos utilizar. Entre as opções, temos diversas tecnologias que poderiam ser utilizadas para essa finalidade, entre elas: ASP, node.js, Perl, PHP, Ruby, JavaScript e muitas outras.

Neste post, vamos utilizar o PHP:

[easy-tweet tweet=”Uma linguagem de programação que possui código aberto, vasta documentação e uma grande comunidade de desenvolvedores.” user=”BecodeTT” usehashtags=”no” template=”light”]

Contudo, com estudo e experiência, você poderá escolher a melhor opção para a sua necessidade ou projeto que você estiver envolvido.

1. Configurações Iniciais

Pelo fato de o PHP ser uma linguagem de servidor, os scripts precisam estar necessariamente em um servidor. Isso significa que abrir o arquivo diretamente em sua máquina não trará resultado algum.

Por isso, se faz necessário o uso de uma ferramenta para “criar” um servidor local no seu computador, possibilitando testar suas páginas web sem depender de um servidor online. Felizmente, existem diversas ferramentas que possibilitam essa prática, entre elas, podemos instalar um servidor via Xampp, Wampp, EasyPHP e Mamp.

Neste post, iremos adotar o Xampp, pois o mesmo possui versões para Windows, Linux e OS. Contudo, sinta-se à vontade para testar outras ferramentas (desde que você já conheça a ferramenta e consiga acompanhar os próximos passos).

Caso você tenha optado pelo Xampp, instale a aplicação através desse link.

Após instalado, procure pelo painel de controle do software, o “Control Panel”, conforme ilustração abaixo:

Clique no botão start, ao lado de “Apache”, assim você estará iniciando o seu servidor local (conforme imagem abaixo).

Após, crie uma pasta para o seu projeto e insira esta pasta dentro da pasta pública do servidor local. Em nosso exemplo, iremos criar uma pasta chamada “pagina-dinamica-php”.

No xampp, a pasta pública é chamada de “htdocs”, portanto, crie uma pasta chamada “pagina-dinamica-php”, dentro de “htdocs”.

2. Criar uma Página Estática

Feito as configurações iniciais, é necessário criar uma página estática HTML chamada “index.html”. Para criar este arquivo, utilize um editor de texto de sua preferência (Sublime, Notepad ++, entre outros). O importante é lembrar de salvar o arquivo com a extensão .html.

IMPORTANTE: caso seja o seu primeiro contato com o HTML, aconselhamos que primeiro você procure informações sobre criação de páginas utilizando HTML, CSS e JavaScript ou acesse o nosso curso online que vai te ensinar tudo que você precisa saber para iniciar na área!

Adicione o código abaixo em seu arquivo index.html.

<!DOCTYPE html>

<html lang="pt-br">
     <head>
          <title>Meu primeiro exemplo em PHP</title>
          <meta charset="utf-8">
     </head>
     <body>
          <h1>Página de produtos</h1>
     </body>
</html>

<!DOCTYPE html>

<head>

<title>Meu primeiro exemplo em PHP</title>

</head>

<body>

<h1>Página de produtos</h1>

</body>

</html>

Lembrando, este arquivo deve estar contido dentro da pasta pública do servidor (se for Xampp, o nome da pasta pública é “htdocs”).

Feito isso, sempre que você acessar a sua página pelo seu navegador, digitando “http://localhost/pagina-dinamica-php”, o arquivo “index.html” que você acabou de criar será lido automaticamente.

Mas seguindo em frente…

O resultado do seu código, no navegador, deverá ser o seguinte:

Em seguida, para efeitos de visualização do exercício, podemos adicionar um estilo básico em nosso documento HTML. Com isso, teremos uma página visualmente mais atraente e organizada.

Entretanto, como o foco desse post não é explorar estilos CSS, utilizaremos uma biblioteca pronta que possui a estilização já desenvolvida e só precisaremos incluir as classes da biblioteca em nosso HTML. Faremos isso com o Bootstrap, como ilustrado abaixo:

<!DOCTYPE html>

<html lang="pt-br">
     <head>
         <title>Meu primeiro exemplo em PHP</title>
         <meta charset="utf-8">
         <!-- Inclui as meta tags necessárias e o css do bootstrap -->
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
               <meta name="viewport" content="width=device-width, initial-scale=1">
               <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
     </head> 
     <body>
         <!-- Cria um container do bootstrap para estilizar e deixar o website responsivo -->
         <div class="container">
               <h1>Página de produtos</h1>
         </div>
     </body>
</html>

<!DOCTYPE html>

<head>

<title>Meu primeiro exemplo em PHP</title>

</head>

<body>

<h1>Página de produtos</h1>

</div>

</body>

</html>

Feito isso, atualizando a página você verá que ocorreu uma pequena modificação no estilo da página. Para mais informações sobre o Bootstrap, acesse o site oficial.

Agora, com o nosso HTML e CSS prontos, começaremos a utilizar o PHP para interagir com o documento HTML.

3. Integrar o PHP com HTML

Antes de tudo, devemos modificar o nome do nosso arquivo de index.html para index.php.

Assim, faremos com que o servidor reconheça que estamos trabalhando com a linguagem PHP e, portanto, consiga interpretar os scripts criados para serem executados. O servidor continuará executando o arquivo index.php em primeiro lugar, quando acessado http://localhost/pagina-dinamica-php.

Com esta pequena modificação (de .html para .php), agora é possível escrever scripts .php e, assim, manipular os elementos HTML de acordo com a necessidade. Além disso, podemos criar e imprimir variáveis, fazer repetições, verificações de verdadeiro e falso e outras rotinas de programação.

Para criar um script PHP, devemos usar os delimitadores <?php para abrir e ?> para fechar. Abaixo, um exemplo que cria uma variável com um valor atribuído a ela e a exibe no HTML da página.

IMPORTANTE: por fins didáticos, irei utilizar comentários nos códigos para facilitar a sua compreensão sob cada novo elemento ensinado. Uma das formas de criar comentários em PHP é utilizando “//”, conforme abaixo.

<!DOCTYPE html>
<html lang="pt-br">
     <head>
         <title>Meu primeiro exemplo em PHP</title>
         <meta charset="utf-8">
         <!-- Inclui as meta tags necessárias e o css do bootstrap -->
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
               <meta name="viewport" content="width=device-width, initial-scale=1">
               <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
     </head> 
     <body>
         <div class="container">
              <?php
              // Esse é um comentário em PHP, isso não será executado!
              // Abaixo, uma criação de variável:
              $titulo = 'produtos';
              ?>
              <h1>Página de <?php echo $titulo; // 'echo' imprime o valor da variável ?></h1> 
              <p>Lista de <?php echo $titulo; ?></p>
         </div>
     </body>
</html>

<!DOCTYPE html>

<head>

<title>Meu primeiro exemplo em PHP</title>

</head>

<body>

<?php

// Esse é um comentário em PHP, isso não será executado!

// Abaixo, uma criação de variável:

$titulo = 'produtos';

<h1>Página de <?php echo $titulo; // 'echo' imprime o valor da variável ?></h1>

<p>Lista de <?php echo $titulo; ?></p>

</div>

</body>

</html>

Note que atribuímos o valor “produtos” a variável “titulo”, através do código <?php $titulo = ‘produtos’; ?>.

Agora, antes de gerar o HTML da página, este script PHP será executado, trocando os espaços destinados às variáveis pelos seus respectivos valores e tornando possível a reutilização da palavra “produtos”.

Como assim reutilização?

Através do script acima, sempre que quisermos utilizar a palavra produtos, basta utilizar o código que imprime a variável <?php echo $titulo; ?>, assim como foi utilizado na tag <h1> e <p> do nosso HTML acima, ou seja, uma variável foi reutilizada em dois elementos distintos.

Contudo, atenção! Caso o valor da variável seja alterado em algum momento, o valor mostrado na tela também será modificado em todos os locais que ele estiver sendo utilizado.

4. Exemplo 1: Verdadeiro ou Falso

Linguagens de programação possuem diversas funções, entre elas, verificar se uma condição é verdadeira ou falsa e, a partir do resultado, executar uma função.

Em nosso exemplo abaixo, temos um trecho de código que está instruindo o navegador a exibir um novo campo HTML, caso a variável seja alterada em algum momento.

Sendo assim, copie o novo trecho de código e atualize a sua página.

<!DOCTYPE html>
<html lang="pt-br">
     <head>
          <title>Meu primeiro exemplo em PHP</title>
          <meta charset="utf-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
     </head>
     <body>
          <div class="container">
                <?php
                $titulo = 'produtos';
                ?>
                <h1>Página de <?php echo $titulo;?></h1>
                <p>Lista de <?php echo $titulo; ?></p>
                <?php
                     $valor_alteravel = true; // Se a variável for, em algum momento, modificada para false (falso), o html abaixo (<p>Exibe o campo.</p>) não seria exibido
                     if($valor_alteravel === true){
                         echo '<p>Exibe o campo.</p>';
                     }
                ?>
           </div>
     </body>
</html>

<!DOCTYPE html>

<head>

<title>Meu primeiro exemplo em PHP</title>

</head>

<body>

<?php

$titulo = 'produtos';

<h1>Página de <?php echo $titulo;?></h1>

<p>Lista de <?php echo $titulo; ?></p>

<?php

$valor_alteravel = true; // Se a variável for, em algum momento, modificada para false (falso), o html abaixo (<p>Exibe o campo.</p>) não seria exibido

if($valor_alteravel === true){

echo '<p>Exibe o campo.</p>';

}

</div>

</body>

</html>

Agora, altere o valor da variável e atualize o seu navegador. Pronto, um novo campo HTML foi exibido dinamicamente.

5. Exemplo 2: FOR

Para finalizar nosso tutorial de como criar o seu primeiro site dinâmico, um último exemplo. Agora, utilizando laços de repetições como o “FOR”.

Em nosso código, iremos definir o número de repetições a serem realizadas (10 repetições) e a cada nova repetição, o script irá gerar uma novo item de lista a ser inserido dinamicamente, desta forma, automatizando a geração de listas. Veja abaixo:

<!DOCTYPE html>
<html lang="pt-br">
    <head>
         <title>Meu primeiro exemplo em PHP</title>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
              <meta name="viewport" content="width=device-width, initial-scale=1">
              <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    </head>   
    <body>
         <div class="container">
              <?php
              $titulo = 'produtos';
              ?>
              <h1>Página de <?php echo $titulo; ?></h1>
              <p>Lista de <?php echo $titulo; ?></p>
              <ul class="list-group">
              <?php

              /*
              * $i é uma variável contadora, ela começa com o valor de 1 ($i = 1)
              * e a cada repetição soma-se 1 a i ($i++). Encerra-se as repetições
              * quando i é menor ou igual a 10 ($i <= 10). Toda vez que esta repetição
              * é realizada, cria-se um item de lista (li) com o valor do contador $i
              */

                  for($i = 1; $i <= 10; $i++)
                  {
                      echo '<li class="list-group-item">Produto '. $i .'</li>';
                  }
              ?>
              </ul>
         </div>
    </body>
</html>

<!DOCTYPE html>

<head>

<title>Meu primeiro exemplo em PHP</title>

</head>

<body>

<?php

$titulo = 'produtos';

<h1>Página de <?php echo $titulo; ?></h1>

<p>Lista de <?php echo $titulo; ?></p>

<?php

* $i é uma variável contadora, ela começa com o valor de 1 ($i = 1)

* e a cada repetição soma-se 1 a i ($i++). Encerra-se as repetições

* quando i é menor ou igual a 10 ($i <= 10). Toda vez que esta repetição

* é realizada, cria-se um item de lista (li) com o valor do contador $i

for($i = 1; $i <= 10; $i++)

{

echo '<li class="list-group-item">Produto '. $i .'</li>';

}

</ul>

</div>

</body>

</html>

Pronto, atualize o seu navegador.

Você deverá visualizar uma lista de produtos (produto 1, produto 2, …., produto 10), conforme ilustrado abaixo.

Esta lista foi gerada automaticamente através da condicional “FOR”, descrita no código apresentado anteriormente.

Este é um recurso muito importante de linguagens de programação, principalmente em situações onde possuímos base de dados que armazenam diversas informações que precisam ser inseridas automaticamente em listas ou diversos outros elementos HTML.

Neste caso, diferente de aplicações estáticas, não é necessário inserir manualmente cada elemento novo na página. Sendo assim, a aplicação fará o trabalho de forma automatica, claro, desde que o seu script esteja funcionando corretamente!

Resumindo…

Os exemplos acima mostram uma simples integração que o PHP é capaz de fazer com documentos HTML. Contudo, ainda não exploramos 1% do potencial desta linguagem.

Isso porque o PHP é uma linguagem de programação poderosa que proporciona ao desenvolvedor, a possibilidade de desenvolvimento de grandes aplicações com qualidade e segurança.

Por exemplo, os produtos inseridos na tela poderiam ter sido originados de um banco de dados ou poderíamos ter criado um formulário para adição de mais produtos, onde o PHP seria responsável por fazer a transição dos valores do formulário ao banco de dados. Neste caso, já estaríamos criando um sistema simples de gerenciamento de conteúdo. Enfim, são inúmeras possibilidades e espero que este post tenha ilustrado um pouco deste potencial existente em linguagens de programação!

Para explorar mais sobre as funcionalidades do PHP, recomendamos que você acesse a biblioteca no site oficial, onde é possível acessar a documentação da tecnologia e ,claro, o nosso curso de PHP para Iniciantes!