Você está na página 1de 11

https://becode.com.

br/site-dinamico-com-php/

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

Você sabe a diferença entre sites dinâmicos e estáticos? Descubra e ainda desenvolva a sua primeira página
dinâmica com 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:

Uma linguagem de programação que possui código aberto, vasta documentação e uma grande comunidade
de… Clique para tuitar

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.


Página estática HTML
XHTML
<!DOCTYPE html>

<html lang="pt-br">
<head>

1 <!DOCTYPE html>
2
3 <html lang="pt-br">
4 <head>
5 <title>Meu primeiro exemplo em PHP</title>
6 <meta charset="utf-8">
7 </head>
8 <body>
9 <h1>Página de produtos</h1>
10 </body>
11 </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:

Inserindo CSS via bootstrap


XHTML

1 <!DOCTYPE html>
2
3 <html lang="pt-br">
4 <head>
5 <title>Meu primeiro exemplo em PHP</title>
6 <meta charset="utf-8">
7 <!-- Inclui as meta tags necessárias e o css do bootstrap -->
8 <meta http-equiv="X-UA-Compatible" content="IE=edge">
9 <meta name="viewport" content="width=device-width, initial-scale=1">
10 <link rel="stylesheet"
11 href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-
12 BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
13 crossorigin="anonymous">
14 </head>
15 <body>
16 <!-- Cria um container do bootstrap para estilizar e deixar o website responsivo -->
17 <div class="container">
18 <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.

Seu 1º código PHP


PHP
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Meu primeiro exemp

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

2º Código PHP
PHP
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Meu primeiro exemp

<!DOCTYPE html>
<html lang="pt-br">
1 <head>
2 <title>Meu primeiro exemplo em PHP</title>
3 <meta charset="utf-8">
4 <meta http-equiv="X-UA-Compatible" content="IE=edge">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <link rel="stylesheet"
7 href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-
8 BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
9 crossorigin="anonymous">
10 </head>
11 <body>
12 <div class="container">
13 <?php
14 $titulo = 'produtos';
15 ?>
16 <h1>Página de <?php echo $titulo;?></h1>
17 <p>Lista de <?php echo $titulo; ?></p>
18 <?php
19 $valor_alteravel = true; // Se a variável for, em algum momento, modificada para false (falso),
20 o html abaixo (<p>Exibe o campo.</p>) não seria exibido
21 if($valor_alteravel === true){
22 echo '<p>Exibe o campo.</p>';
23 }
24 ?>
25 </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:

3º Código PHP
PHP
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Meu primeiro exemp

<!DOCTYPE html>
<html lang="pt-br">
1
<head>
2
<title>Meu primeiro exemplo em PHP</title>
3
<meta charset="utf-8">
4
<meta http-equiv="X-UA-Compatible" content="IE=edge">
5
<meta name="viewport" content="width=device-width, initial-scale=1">
6
<link rel="stylesheet"
7
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-
8
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
9
crossorigin="anonymous">
10
</head>
11
<body>
12
<div class="container">
13
<?php
14
$titulo = 'produtos';
15
?>
16
<h1>Página de <?php echo $titulo; ?></h1>
17
<p>Lista de <?php echo $titulo; ?></p>
18
<ul class="list-group">
19
<?php
20
21
/*
22
* $i é uma variável contadora, ela começa com o valor de 1 ($i = 1)
23
* e a cada repetição soma-se 1 a i ($i++). Encerra-se as repetições
24
* quando i é menor ou igual a 10 ($i <= 10). Toda vez que esta repetição
25
* é realizada, cria-se um item de lista (li) com o valor do contador $i
26
*/
27
28
for($i = 1; $i <= 10; $i++)
29
{
30
echo '<li class="list-group-item">Produto '. $i .'</li>';
31
}
32
?>
33
</ul>
34
</div>
35
</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!
 Web Design: 11 sites incríveis que você se surpreenderá com o CSS!

 Top 14 dicas para começar a trabalhar com TI e se destacar no mercado!

Leonello de Leone

Estudante da Ciência da Computação, iniciou sua trajetória na TI como estagiário e hoje responde como
Desenvolvedor Full-Stack na Becode. Tem experiência e fortes vínculos com HTML, CSS, JavaScript e PHP.
Entusiasta das áreas de Machine Learning, Inteligência Artificial e Desenvolvimento de Jogos.

Você também pode gostar