Introdução à linguagem PHP

Prévia do material em texto

Unidade 2
Introdução à 
linguagem PHP
Luis Fernando Corcine
Introdução ao 
Coding Web
Diretor Executivo 
DAVID LIRA STEPHEN BARROS
Diretora Editorial 
ANDRÉA CÉSAR PEDROSA
Projeto Gráfico 
MANUELA CÉSAR ARRUDA
Autor 
LUIS FERNANDO CORCINE
Desenvolvedor 
CAIO BENTO GOMES DOS SANTOS
 luis Fernando Corcine
Olá! Meu nome é Luiz Fernando Corcini. Sou formado em 
Engenharia Eletrônica, com especialização em Administração de TI, 
Mestre em Educação e Novas Tecnologias e Doutorando em Sistemas 
Tutores Inteligentes. Tenho experiência técnico- profissional na área 
de desenvolvimento e gestão da produção de softwares nas áreas 
de Gerenciamento de Processos Empresariais. Uso os recursos 
disponibilizados pela Web há mais de 20 anos. Sou professor universitário 
há mais de 15 anos, publiquei vários livros técnicos sobre assuntos 
voltados à área de informática. Fui convidado pela Editora Telesapiens a 
integrar seu elenco de autores independentes. Estou muito feliz em poder 
ajudar você nesta fase de muito estudo e trabalho.
O AUTOR
Olá. Meu nome é Manuela César de Arruda. Sou a responsável pelo 
projeto gráfico de seu material. Esses ícones irão aparecer em sua trilha 
de aprendizagem toda vez que:
ICONOGRÁFICOS
INTRODUÇÃO: 
para o início do 
desenvolvimento de 
uma nova com-
petência;
DEFINIÇÃO: 
houver necessidade 
de se apresentar um 
novo conceito;
NOTA: 
quando forem 
necessários obser-
vações ou comple-
mentações para o 
seu conhecimento;
IMPORTANTE: 
as observações 
escritas tiveram que 
ser priorizadas para 
você;
EXPLICANDO 
MELHOR: 
algo precisa ser 
melhor explicado ou 
detalhado;
VOCÊ SABIA? 
curiosidades e 
indagações lúdicas 
sobre o tema em 
estudo, se forem 
necessárias;
SAIBA MAIS: 
textos, referências 
bibliográficas e links 
para aprofundamen-
to do seu conheci-
mento;
REFLITA: 
se houver a neces-
sidade de chamar a 
atenção sobre algo 
a ser refletido ou 
discutido sobre;
ACESSE: 
se for preciso aces-
sar um ou mais sites 
para fazer download, 
assistir vídeos, ler 
textos, ouvir podcast;
RESUMINDO: 
quando for preciso 
se fazer um resumo 
acumulativo das 
últimas abordagens;
ATIVIDADES: 
quando alguma 
atividade de au-
toaprendizagem for 
aplicada;
TESTANDO: 
quando o desen-
volvimento de uma 
competência for 
concluído e questões 
forem explicadas;
SUMÁRIO
Ambiente de desenvolvimento PHP e Sua sintaxe ..................... 11
Introdução ..........................................................................................................................................11
Instalação e configuração do ambiente de desenvolvimento php .........12
Sintaxe básica de um programa........................................................................................13
O primeiro código PHP .............................................................................................................15
Blog pessoal com código PHP ...........................................................................................16
Sintaxe básica de um programa........................................................................................17
O primeiro código PHP .............................................................................................................18
Blog pessoal com código PHP ...........................................................................................19
Variáveis, tipos de dados, op eradores e expressões ................ 21
Variáveis em PHP .........................................................................................................................21
Tipos de dados básicos em PHP ......................................................................................21
Constantes .....................................................................................................................22
Testando no blog ......................................................................................................23
Operadores em PHP ..................................................................................................................26
Operadores de atribuição ...................................................................................26
Operadores aritméticos ........................................................................................27
Operador de strings ................................................................................................28
Operadores lógicos .................................................................................................30
Operadores condicionais ....................................................................................30
Expressões em PHP ...................................................................................................................31
Atualizando o blog pessoal ..................................................................................................32
Matrizes e estruturas de controle ...................................................... 40
Matrizes ...............................................................................................................................................40
Atualizando o blog pessoal ..................................................................................................42
Estruturas de controle ..............................................................................................................47
Estruturas De Controle Condicionais..........................................................47
O comando condicional if ................................................................47
Estruturas de controle de repetição ........................................54
Comando de repetição for ..............................................................54
Comando de repetição while ........................................................56
Comando de repetição DO-WHILE ..........................................58
Atualizando o blog pessoal ..................................................................................................60
Formulários (HTML + W3.CSS + PHP) .................................................. 65
Formulários HTML5 + W3.CSS ............................................................................................65
Inserindo php no formulário .................................................................................................76
Método GET ..................................................................................................................76
 POST ..................................................................................................................................77
Adaptando o formulário de acesso .............................................................77
Introdução ao Coding Web8
UNIDADE
02
INTRODUÇÃO A LINGUAGEM PHP
Introdução ao Coding Web 9
Seja bem-vindo à Unidade 2 – Introdução à Linguagem PHP, da 
disciplina de Introdução ao Coding (Web). O conteúdo desta Unidade está 
dividido em quatro módulos. No primeiro módulo vamos aprender como 
se instala o ambiente que permite o desenvolvimento de projeto em 
linguagem PHP em seu próprio computador e, também, apresentaremos 
a sintaxe básica dessa linguagem de programação. 
No segundo módulo vamos compreender os vários tipos de dados 
suportados pela linguagem PHP, bem como entender como trabalhar 
com expressões que envolvam variáveis, constantes e operadores. No 
módulo três, aprofundaremos nossos conhecimentos em programação, 
entendendo para que serve e como funcionam as estruturas de controle 
condicional e de repetição. Neste mesmo módulo aprenderemos a 
trabalhar com matrizes de dados. Por fim, no quarto módulo, aprenderemos 
a criar colocar blocos de código PHP dentro de páginas HTML5, mais 
especificamente em formulários. 
É claro que existe muito mais a aprender, mas o aprofundamento 
de cada um desses conhecimentos pode ser feitopor meio do acesso 
aos links indicados durante o texto, no tópico Saiba mais ou verificando 
os itens indicados na bibliografia. Vamos começar? Excelente estudo para 
você!
INTRODUÇÃO
Introdução ao Coding Web10
Olá. Seja muito bem-vindo à Unidade 2. Nosso propósito é auxiliar 
você no desenvolvimento das seguintes objetivos de aprendizagem até o 
término desta etapa de estudos:
1. Aclimatar-se ao ambiente de desenvolvimento do PHP, entendendo a 
sintaxe elementar de sua linguagem;
2. Codificar programas em php usando variáveis, operadores e 
expressões, compreendendo os vários tipos de dados aceitos pela linguagem;;
3. Desenvolver estruturas de controle para manipulação de matrizes e 
demais estruturas de dados;
4. Criar formulários em html5 conectados a programas php, aplicando 
estruturas de estilo de páginas com o w3.css.
Então? Preparado para uma viagem sem volta rumo ao 
conhecimento? Ao trabalho! 
OBJETIVOS
Introdução ao Coding Web 11
Ambiente de desenvolvimento PHP e Sua 
sintaxe
Introdução
O PHP (Hypertext Preprocessor) é uma linguagem de programação 
com “código- fonte aberto”1 utilizada para desenvolvimento de aplicações 
web com as mais diferentes funcionalidades, como: envio e recebimento 
de arquivos e e-mails; geração de páginas dinâmicas; montagem de salas 
de bate-papo, blogs e redes sociais; manipulação e processamento de 
dados de formulários.
1 Código aberto é um termo que se refere a um software cujo código está disponível 
para download por qualquer pessoa; é uma filosofia de criação de aplicativos voltada 
para a colaboração entre desenvolvedores (KURTZ, 2016).
SAIBA MAIS:
Segundo a Tiobe Company (TIOBE, 2018), empresa que 
verifica a qualidade de softwares, com base em dados de 
agosto de 2018, a linguagem PHP está posicionada como a 
sétima linguagem de programação mais utilizada. No topo da 
lista está o Java, seguido por C e C++.
A linguagem PHP pode trabalhar junto com a escrita HTML e 
tem como objetivo potencializar as funcionalidades da página web, a 
permitir que esta possa, por exemplo, ter conteúdo dinâmico. Na maioria 
das vezes, o usuário comum que acessa uma página web que utiliza a 
linguagem PHP não consegue ter acesso ao código, o que é uma grande 
vantagem quando se trata com estratégias ou lógicas confidenciais de 
tratamento de dados.
Para se trabalhar com a linguagem PHP é necessário primeiro 
configurar o ambiente de desenvolvimento. Então, vamos a ele!
Introdução ao Coding Web12
Instalação e configuração do ambiente de 
desenvolvimento php
Para se trabalhar com a linguagem PHP em seu computador, 
será necessário instalar um aplicativo chamado WampServer (ou outro 
servidor PHP e Apache, como XAMP server também por exemplo), que é 
um ambiente de desenvolvimento web para a plataforma Windows. É um 
pacote de softwares que instala todo o ambiente para você, permitindo 
que você crie aplicações web PHP, utilizando do servidor Apache e do 
banco de dados MySQL.
Figura 1: Logo da WampServer
Fonte: Flaticon
Siga os itens indicados a seguir para instalar o WampServer em sua 
máquina: 
PASSO A PASSO
1- Baixar o software em < https://bit.ly/2X1rjP1 >.
2 - É importante que seja instalado na raiz do sistema (C:\
wamp) para que você possa localizar facilmente os arquivos 
na hora de fazer alguma modificação.
3 - Nesse processo de instalação, será sugerido o 
navegador – escolha aquele que você usa para desenvolver 
seu site.
Introdução ao Coding Web 13
4 - Ainda na instalação terá uma caixa para preencher qual 
é o servidor SMTP e o endereço de e-mail que você quer usar 
– se preferir, pode deixar os valores em default, pois não tem 
problema.
IMPORTANTE:
Ao fazer a instalação, o aplicativo criará automaticamente uma 
pasta chamada “www” dentro do diretório raiz da instalação 
(usualmente C:\wamp\www). É dentro dessa pasta que você 
deve colocar seus arquivos PHP.
Após a instalação, veja se o ícone do Wamp aparece ao lado do relógio 
do sistema. Ele pode estar vermelho (servidor off-line), laranja (iniciando os 
serviços) ou verde (servidor on-line).
Para testar se o WampServer está realmente on-line, abra o 
navegador de sua preferência e digite:
http://localhost/ ou http://127.0.0.1/
e veja se a lista de diretórios da pasta www aparece.
 • Não se preocupe em entender neste momento tudo o que 
o WampServer disponibiliza. No decorrer deste material e 
nas próximas unidades letivas apresentaremos de forma 
gradual, cada funcionalidade.
Sintaxe básica de um programa
O Código PHP fica embutido ou inserido dentro das páginas HTML, 
mas para que o navegador consiga saber o que é HTML e o que é PHP 
este último deve ser diferenciado com a utilização de tags específicas, da 
seguinte maneira:
Introdução ao Coding Web14
<?php
Linha1 de código PHP; Linha2 de código PHP;
...
LinhaN de código PHP;
?>
 Existem outras maneiras, isto é, tags que apresentaremos conforme 
for necessário.
Note, pelo modelo de código apresentado, que ao final de cada 
instrução PHP deve ser colocado um ponto-e-vírgula. Mas é preciso 
tomar cuidado com linhas de comando ou de controle, pois elas não 
usam ponto-e- vírgula no final, como veremos mais adiante. Para inserir 
comentários dentro do código PHP utiliza-se o caractere “#” ou duas 
barras “//”, como mostrado no bloco de código a seguir:
 <?php
echo “linha de instrução 1”; #exemplo de comentário para a linha 
1 echo “linha de instrução 2”; //exemplo de comentário para a linha 2
?>
No código apresentado, é importante notar os seguintes pontos:
 • A instrução “echo” tem a função de apresentar na tela do 
navegador o conteúdo que está logo em seguida, entre 
aspas.
 • Como “echo” é uma instrução PHP, deve ser finalizada com 
ponto-e-vírgula. Isso acontece na linha 1 e 2.
 • A instrução 1 e 2 possuem comentários específicos (de 
apenas uma linha). O primeiro inicia com o caractere “#” e 
o segundo com “//”. Você escolhe qual usar.
Caso seja necessário fazer comentários mais extensos (de mais de 
uma linha), também chamados de bloco de comentários, deve-se utilizar 
Introdução ao Coding Web 15
o delimitador “/*” para iniciar o bloco de comentário e o “*/” para finalizá-lo.
O primeiro código PHP
Agora que você já entendeu a sintaxe básica do código PHP, vamos 
colocar a mão na massa.
PASSO A PASSO 
1 - Abra o aplicativo NotePad++, crie uma nova aba e digite o 
seguinte código:
<?php
// primeiro código em PHP
echo “O comando ‘echo’ apresenta dados na tela do 
navegador.”;
?>
2 - Crie uma pasta dentro do diretório “www” do Wamp com 
o nome “Unidade2” e salve este código como exe01_u2.php. 
Não use acentuação ou caracteres especiais para dar nome 
às pastas dentro do diretório www.
3 - Abra o navegador, digite a url http://localhost e pressione 
a tecla Enter.
4 - Selecione a pasta Unidade2 e o arquivo correspondente ao 
código PHP que você acabou de gravar.
O navegador deve apresentar a frase que você digitou entre aspas 
após o comando “echo”, ou seja, “o comando ‘echo’ apresenta dados na 
tela do navegador.”, sem as aspas inicial e final.
Agora que você já aprendeu como se apresenta uma frase na tela 
do navegador utilizando a linguagem PHP, vamos dar uma olhadinha no 
Introdução ao Coding Web16
blog que fizemos na unidade passada.
Blog pessoal com código PHP
Você deve lembrar do blog pessoal que criou na unidade passada, 
não é? Pois então, vamos trabalhar nele aqui, inserindo o código PHP para 
transformá-lo de um blog estático a um blog dinâmico.
A primeira coisa a fazer é localizar onde você gravou seu arquivo 
HTML do blog e fazer uma cópia dele para dentro da pasta Unidade2, 
do diretório www do Wamp. Em seguida, renomeie o arquivo html para 
exe02_blog_u2.php.
Agora, você deve testar se o servidor consegue identificá-lo e 
apresentá-lo corretamente. Para isso, abra o navegador e digite http://
localhost. Selecione a pasta Unidade2, na qual devem aparecer dois 
arquivos. Cliqueno que corresponde ao blog e ele deve ser apresentado 
corretamente (com todos os conteúdos e as fotos) no navegador.
Funcionou? Muito bem! Então, vamos inserir um código PHP dentro 
do arquivo html, ok?
PASSO A PASSO 
1 - Abra o arquivo do blog no Notepad++. 
2 - Insira o bloco de código PHP nas linhas 6 a 8, conforme 
apresentado na Figura 3: 
3 - Salve o arquivo e atualize a visualizaçãodo blog no 
navegador. Você verá a palavra “teste”aparecer no canto 
superior esquerdo da tela.
Bom, você deve estar pensando assim: “Mas isso não é útil para 
nada!”. Calma, vamos melhorar isso então.
Introdução ao Coding Web 17
Figura 2: Logo do Notepad++
Fonte: notepad.com
Sintaxe básica de um programa
O Código PHP fica embutido ou inserido dentro das páginas HTML, 
mas para que o navegador consiga saber o que é HTML e o que é PHP 
este último deve ser diferenciado com a utilização de tags específicas, da 
seguinte maneira:
<?php
Linha1 de código PHP; Linha2 de código PHP;
...
LinhaN de código PHP;
?>
 Existem outras maneiras, isto é, tags que apresentaremos conforme 
for necessário.
Note, pelo modelo de código apresentado, que ao final de cada 
instrução PHP deve ser colocado um ponto-e-vírgula. Mas é preciso 
tomar cuidado com linhas de comando ou de controle, pois elas não 
usam ponto-e- vírgula no final, como veremos mais adiante. Para inserir 
Introdução ao Coding Web18
comentários dentro do código PHP utiliza-se o caractere “#” ou duas 
barras “//”, como mostrado no bloco de código a seguir:
 <?php
echo “linha de instrução 1”; #exemplo de comentário para a linha 
1 echo “linha de instrução 2”; //exemplo de comentário para a linha 2
?>
No código apresentado, é importante notar os seguintes pontos:
 • A instrução “echo” tem a função de apresentar na tela do 
navegador o conteúdo que está logo em seguida, entre 
aspas.
 • Como “echo” é uma instrução PHP, deve ser finalizada com 
ponto-e-vírgula. Isso acontece na linha 1 e 2.
 • A instrução 1 e 2 possuem comentários específicos (de 
apenas uma linha). O primeiro inicia com o caractere “#” e 
o segundo com “//”. Você escolhe qual usar.
Caso seja necessário fazer comentários mais extensos (de mais de 
uma linha), também chamados de bloco de comentários, deve-se utilizar 
o delimitador “/*” para iniciar o bloco de comentário e o “*/” para finalizá-lo.
O primeiro código PHP
Agora que você já entendeu a sintaxe básica do código PHP, vamos 
colocar a mão na massa.
PASSO A PASSO 
1 - Abra o aplicativo NotePad++, crie uma nova aba e digite o 
seguinte código:
<?php
// primeiro código em PHP
Introdução ao Coding Web 19
echo “O comando ‘echo’ apresenta dados na tela do 
navegador.”;
?>
2 - Crie uma pasta dentro do diretório “www” do Wamp com 
o nome “Unidade2” e salve este código como exe01_u2.php. 
Não use acentuação ou caracteres especiais para dar nome 
às pastas dentro do diretório www.
3 - Abra o navegador, digite a url http://localhost e pressione 
a tecla Enter.
4 - Selecione a pasta Unidade2 e o arquivo correspondente ao 
código PHP que você acabou de gravar.
O navegador deve apresentar a frase que você digitou entre aspas 
após o comando “echo”, ou seja, “o comando ‘echo’ apresenta dados na 
tela do navegador.”, sem as aspas inicial e final.
Agora que você já aprendeu como se apresenta uma frase na tela 
do navegador utilizando a linguagem PHP, vamos dar uma olhadinha no 
blog que fizemos na unidade passada.
Blog pessoal com código PHP
Você deve lembrar do blog pessoal que criou na unidade passada, 
não é? Pois então, vamos trabalhar nele aqui, inserindo o código PHP para 
transformá-lo de um blog estático a um blog dinâmico.
A primeira coisa a fazer é localizar onde você gravou seu arquivo 
HTML do blog e fazer uma cópia dele para dentro da pasta Unidade2, 
do diretório www do Wamp. Em seguida, renomeie o arquivo html para 
exe02_blog_u2.php.
Agora, você deve testar se o servidor consegue identificá-lo e 
apresentá-lo corretamente. Para isso, abra o navegador e digite http://
localhost. Selecione a pasta Unidade2, na qual devem aparecer dois 
arquivos. Clique no que corresponde ao blog e ele deve ser apresentado 
corretamente (com todos os conteúdos e as fotos) no navegador.
Introdução ao Coding Web20
Funcionou? Muito bem! Então, vamos inserir um código PHP dentro 
do arquivo html, ok?
PASSO A PASSO 
1 - Abra o arquivo do blog no Notepad++. 
2 - Insira o bloco de código PHP nas linhas 6 a 8, conforme 
apresentado na Figura 3: 
3 - Salve o arquivo e atualize a visualizaçãodo blog no 
navegador. Você verá a palavra “teste”aparecer no canto 
superior esquerdo da tela.
Bom, você deve estar pensando assim: “Mas isso não é útil para 
nada!”. Calma, vamos melhorar isso então.
Figura 3: Bloco de código
Fonte: O Autor
<!-- BLOG PESSOAL com PHP
Autor: Luiz Fernando Corcini
Data: dd/mm/aaaa
-->
<?php
echo “teste”;
?>
<html>
 <!-- cabeça da página Web -->
 <head>
 <meta charset=”UTF-8”>
Introdução ao Coding Web 21
Variáveis, tipos de dados, op eradores e 
expressões
Variáveis em PHP
A utilização de variáveis é muito importante em qualquer linguagem 
de programação. Elas são responsáveis por armazenar conteúdos que 
podem variar durante a execução do script e que são descartados quando 
o programa termina ou o navegador é fechado. Em PHP, todas as variáveis 
devem começar com o caractere “$” e não precisam especificar sua 
tipologia, isto é, não precisam informar se é uma variável que armazena 
um valor inteiro, um texto etc.
EXEMPLO: Abra um novo arquivo no NotePad++ e salve-o dentro do 
diretório www\ Unidade2 como exe02_u2.php. Digite o seguinte código:
<?php
//exemplo 02 da unidade 2
//Variáveis em PHP
$teste = 30;
$TESTE = 2;
echo “O valor de ‘teste’ é $teste e o de ‘TESTE’ é $TESTE.”;
?>
O resultado deve ser a apresentação da seguinte frase na tela do 
navegador: “O valor de ‘teste’ é 30 e o de ‘TESTE é 2”.
É muito importante que você entenda essa diferenciação!
Tipos de dados básicos em PHP
Como vimos no item anterior, os dados podem ser armazenados 
provisoriamente em variáveis. Esses dados podem ser de tipos variados e 
o PHP não exige que você defina qual é a tipologia das variáveis que vai 
utilizar, mas reconhece os tipos básicos apresentados na Tabela 1:
Introdução ao Coding Web22
Tabela 1: Características
Fonte: O Autor
TIPO CARACTERÍSTICA EXEMPLO
Inteiro Número sem casas decimais $Teste = 10;
Ponto Flutuante Números com casas decimais $Teste = 1.232;
Bolleano Variáveis lógicas
$Teste = true;
$Teste = fasle
Texto
São informações alfanuméricas. 
Podem ser definidas com o uso 
de aspas simples ou duplas
$Teste = 
‘Unidade2’
SAIBA MAIS:
Se quiser conhecer mais sobre variáveis PHP, acesse o link: 
<https://bit.ly/2OLVRj5>.
Constantes
O contrário de “variável” é “constante”. Algumas vezes, faz-se 
necessário definir variáveis que não terão seu conteúdo alterado durante 
toda a execução do script. Para esses casos, como o conteúdo não varia, é 
indicado utilizar constantes em vez de variáveis. Porém, não há problema 
nenhum em definir uma variável cujo conteúdo não varie no decorrer da 
execução do script. Mas o contrário não é possível, ou seja, não se pode 
variar o conteúdo de uma constante já definida.
Para definir uma constante, usa-se o comando “define”, da seguinte 
maneira:
Introdução ao Coding Web 23
Figura 4: Definição de constante em PHP
Fonte: O Autor
<?php
define(“PI”, 3.1415926535);
echo PI;
?>
Note que o nome da constante não precisa ser precedido pelo 
caractere especial “$”.
Testando no blog
Vamos testar se funciona no nosso blog?
TESTE 1:
Abra o arquivo (php) do blog pessoal e altere aquele código PHP 
para o mostrado na Figura 4:
Repare que o nome da constante é “NOME” e o conteúdo dela é 
“Marcos”. Salve o arquivo e atualize a visualização do blog no navegador. 
O conteúdo da constante “NOME” aparecerá no canto superior esquerdo 
do navegador.Vamos melhorar isso?
<?php
//definição de constante
define(“NOME”, ‘Marcos’);
echo NOME;
?>
<html>
TESTE 2: 
Veja o cabeçalho do nosso blog. Ele deve a como mostra a Figura 5:
Introdução ao Coding Web24
Figura 5: Cabeçalho original do blog pessoal
Fonte: O Autor
Meu Blog Pessoal
Seja Bem vindo. Criado por NOME
Localize as linhas de código html responsáveis por apresentar essas 
informações na tela do navegador. No meu arquivo são as linhas 26 e 27, 
como mostra a Figura 6:
Figura 6: Código html responsável por apresentar o cabeçalho do blog
Fonte: O Autor
<header class=”w3-container w3-center w3-padding-32”>
 <h1><b>Meu Blog Pessoal</b></h1>
 <p>Seja Bem vindo, Criado por <span class=”w-
3-tag”>NOME</span></p>
 </header>
Na linha 27, substitua a palavra NOME por: <?php echo NOME ?>. 
Salve o arquivo e veja o que acontece em seu blog depois de pressionar a 
tecla F5 (atualizar o navegador). Você deve ter notado que a palavra NOME 
(Figura 3) foi substituída pelo conteúdo da constante NOME que você 
definiu na linha 8 (Figura 4) do seu código. Mas ainda está aparecendo o 
mesmo conteúdo no canto superior esquerdo do navegador. Para resolver 
esse problema, apague a linha 9 (Figura 4), salve o arquivo e atualize o 
navegador. Pronto! Resolvido o problema.
TESTE 3:
Não sei você, mas eu gosto de utilizar nomes para constantes e 
variáveis que me lembrem do que elas (variáveis ou constantes) estão 
armazenando. Por isso, chamar uma constante de NOME não faz muito 
sentido. Nome do quê? Do produto? Do autor do blog? Da postagem? 
Introdução ao Coding Web 25
Por isso, aconselho a sempre utilizar nomes mnemônicos, isto é, que 
lembrem ao programador o que a variável ou constante está a armazenar.
Usando esse conhecimento, sugiro a alteração do código na linha 
8 para o seguinte:
Verificando o primeiro erro no código
Fonte: O Autor
Quando (erros como na imagem da figura 6), leia atentamente a 
mensagem antes de entrar em desespero, pois a solução pode ser fácil. 
Nesse caso, em especial, o navegador está avisando que você utilizou 
uma constante chamada NOME que não foi definida e que isso está a 
acontecer na linha 26 do seu código.
Como nós provocamos isso de propósito, sabemos que na linha 26 
do código tem uma constante chamada NOME, mas essa constante teve 
seu nome alterado para AUTOR_ BLOG. Então, o que devemos fazer é 
substituir a palavra NOME (que não existe mais) por AUTOR_BLOG (novo 
nome da constante) que armazena o nome do autor do blog. Logo que 
você fizer essa correção, salvar o arquivo e pressionar F5 no navegador, 
perceberá que o erro foi corrigido.
SAIBA MAIS:
Para saber mais sobre constantes em PHP, acesse o link: 
<https://bit.ly/30Cer2z>.
Introdução ao Coding Web26
Operadores em PHP
Operadores são elementos utilizados para efetuar determinadas 
operações em variáveis e constantes, dentro do código, durante a 
execução do script PHP. Vamos ver alguns tipos de operadores.
Operadores de atribuição
São responsáveis por atribuir valor a uma variável. O operador mais 
conhecido desse tipo é o “=”, que faz uma atribuição simples de uma valor 
para uma determinada variável.
$Num = 12;
Mas existem outros, conforme apresentado pela Tabela 2:
Tabela 2: Operadores de atribuição
Fonte: O Autor
Operador Função
= Atribuição simples
+= Atribuição com adição
.= Atribuição com subtração
*= Atribuição com multiplicação
/= Atribuição com divisão
%= Atribuição com módulo
.= Atribuição com concatenação
EXEMPLO: Abra o NotePad++ e crie um novo arquivo php chamado 
exe03_u2.php. Imagine que você deseja numerar as postagens que 
aparecem na tela do seu blog. Nesse caso, devemos criar uma variável 
que tem seu valor inicial igual a zero e, a cada postagem, essa variável 
deve ter seu próprio valor incrementado de uma unidade. Seu código 
base ficaria mais ou menos assim:
Introdução ao Coding Web 27
Figura 7: Exemplo de operadores de atribuição
Fonte: O Autor
<?php
$NPost = 0; //Atribuição simples
$NPost +=1; //Atribuição com adição
/*Apresenta o resultado na tela
e pula linha */
echo “Postagem $NPost <br>”;
$NPost +=1; //Atribuição com adição
/*Apresenta o resultado na tela*/
echo “Postagem $NPost “;
//...
?>
Note que na linha 7 foi usada uma tag html “<br>” para informar ao 
navegador que ele deveria pular para a próxima linha depois de executar 
o comando.
Operadores aritméticos
Esses operadores são utilizados para executar operações 
matemáticas. São apresentados na Tabela 3:
Introdução ao Coding Web28
Tabela 3: Operações matemáticas
Fonte: O Autor
OPERADOR FUNÇÃO EXEMPLO RESULTADO
+ Adição $a + $b
Soma as variáveis $a e 
$b
- Subtração $a - $b
Diferença entre $a e 
$b
* Multiplicação $a * $b Produto entre $a e$b
/ Divisão $a / $b Divide $a por $b
^ Exponenciação $a ^ $b
Eleva o valor de $a à 
potência $b
% Módulo $a % $b
Calcula o resto da 
divisão entre $a por $b
as, em vez de usarmos operadores de atribuição, usaremos 
operadores aritméticos. Ficaria mais ou menos assim:
Operador de strings
Utilizado para concatenar (unir) textos (strings), esse operador é 
representado por um ponto (.)
<?php
$NPost = 0; //Operador de Atribuição simples
$NPost = $NPost + 1; //Operador Aritmético de Adição
/*Apresenta o resultado na tela
e pula linha */
echo “Postagem $NPost <br>”;
Figura 8: Exemplo de operadores aritméticos
Introdução ao Coding Web 29
Fonte: O Autor
$NPost = $NPost + 1; //Operador Aritmético de Adição
/*Apresenta o resultado na tela*/
echo “Postagem $NPost “;
//...
?>
Abra o NotePad++ e crie um arquivo php chamado exe05_u2.php. 
Imagine que você tem três variáveis com pedaços de uma mesma frase. 
Isso pode acontecer quando recebemos dados de lugares diferentes e 
precisamos colocar tudo em uma mesma frase. Digamos, como mostra 
a Figura :
Figura 9: Exemplo de operador de string
<?php
$Saudacao = “Bom dia”;
$Titulo = “Professor”;
$Nome = “Luiz”;
$Interesse1 = “Historia de Portugal”;
$Interesse2 = “Programacao Web”;
$Interesse3 = “Vida no campo”;
$Idade = “46”;
echo $Saudacao . “, <br>” . “Eu sou o “ . $Titulo . 
“ “ . $Nome . “.<br>” .
“Tenho “ . $Idade . “ anos e meus interesses sao: 
<br>” .
Introdução ao Coding Web30
Fonte: O Autor
$Interesse1 . “;<br>” . $Interesse2 . “;<br>” . 
$Interesse3 . “.”;
?>
Operadores lógicos
São responsáveis por tratar a “lógica booleana” dentro do programa. 
Normalmente são utilizados para verificar se uma situação é verdadeira 
ou falsa.
Tabela 4: Operadores lógicos
Fonte: O Autor
Operador Função Retorno
And ou && “e” lógico
Verdadeiro quando as duas condições 
forem verdadeiras
Or ou II “ou” lógico
Verdadeiro quando uma ou duas das 
condições forem verdadeiras
Xor Ou exclusivo
Verdadeiro somente quando uma das 
condições forem verdadeiras
! Não (inversão) Inverte o resultado de um teste lógico
^ Exponenciação $a ^ $b
% Módulo $a % $b
Apresentaremos exemplos desses operadores mais adiante, tão 
logo estudemos estruturas de controle.
Operadores condicionais
São operadores que executam testes entre variáveis.
Introdução ao Coding Web 31
Tabela 5
Fonte: O Autor
Operador Função Exemplo RESULTADO
== Igual $a==$b
Verdadeiro se as 
variáveis forem iguais
!= ou <> Diferente
$a != $b ou 
$a <> $b
Verdadeiro se as 
variáveis forem 
diferentes
> Maior do que $a > $b
Verdadeiro se $a for 
maior que $b
< Menor do que $a < $b
Verdadeiro se $a for 
menor que $b
>= Maior ou igual $a >= $b
Verdadeiro se $a for 
maior ou igual a $b
<=
Menor ou 
igual
$a <= $b
Verdadeiro se $a for 
menor ou igual a $b
Da mesma maneira que acontece com os operadores lógicos, 
precisamos estudar estruturas de controle para efetivamente utilizar esses 
operadores. Não se preocupe, pois em breve estaremos a dar exemplos 
da utilização desses operadores.
Expressões em PHP
Expressões são as peças de construção mais importantes da 
linguagem PHP. Conforme o site <http://PHP.net>,praticamente quase 
tudo o que se escreve em PHP são expressões e uma maneira simples de 
definir uma expressão é: “Tudo o que tem um valor”, isto é, uma variável, 
uma constante, uma função etc.
EXEMPLO
$a = 10
Introdução ao Coding Web32
$cont = $cont+1
$Texto = “oi”
$a = ($b + $c)/ $d
$num >= 100
Cada uma das linhas apresentadas é uma expressão.
Atualizando o blog pessoal
Abra o arquivo php referente ao seu blog pessoal no NotePad++ e 
renomeie para exe03_ blog_u2.php. É muito importante que você guarde 
o histórico do que fez para posterior consulta ou, em caso de algo dar 
errado, para não precisar recomeçar do zero.
Agora, vamos organizar melhor esse código fazendo uso dos 
operadores, variáveis e constantes que aprendemos até aqui.
DESAFIO 
Lembra-se do exemplo da Figura 6 que fizemos para o número de 
postagens? Então, eu faço um desafio: que tal implementar esse código 
dentro do blog para ver como fica?
PASSO-A-PASSO 
1 - Precisamos criar uma variável para contar o número de 
postagens que serão exibidas na tela do navegador. Ela pode 
ser chamada de $NPostagens e a ela deve ser atribuído um 
valor inicial, como “zero”.
2 - Devemos localizar todos os locais dentro do código 
HTML do blog que sejam referentes a um início de postagem 
(por exemplo: todos os títulos de postagens) e inserir essa 
variável, sem se esquecer de incrementar o valor da mesma 
em uma unidade a cada vez. A imagem a seguir mostra os 
locais em que devem estar os títulos de cada postagem.
Introdução ao Coding Web 33
Esquema do projeto da página do blog pessoal com indicação de onde estão os títulos de 
cada postagem
Fonte: Editorial
Para resolver o item (1) desse desafio, você precisa alterar o código 
PHP da página do blog da seguinte maneira:
Destacamos a linha 9 para você perceber onde e como foi feita a 
inserção da variável contadora de postagens.
Agora, para inserir esse contador, incrementado de uma unidade, 
ao lado de todos os títulos de postagens, primeiro precisamos localizar 
dentro do código, onde estão esses títulos.
Para facilitar sua vida, fizemos um recorte do código para apresentar onde 
estão os dois títulos de postagens procurados. Veja na Figura 10.
Figura 10: Código PHP da página do blog
<!-- BLOG PESSOAL com PHP
Autor: Luiz Fernando Corcini
Data: dd/mm/aaaa
-->
 <?php
 //definição de constante
 define(“AUTOR BLOG”, ‘Marcos’);
Introdução ao Coding Web34
Fonte: O Autor
 $NPostagens = 0;
 ?>
<html>
Para inserir a variável contadora de postagens, precisamos 
usar código PHP e o comando “echo” (que mostra o valor na tela do 
navegador). Também precisamos lembrar de adicionar uma unidade em 
cada momento que inserirmos a variável, isto é, nas linhas 37 e 62 (Figura 
11). Então, o código a ser inserido deve ser mais ou menos assim:
<?php echo $NPostagens+=1 ?>
Figura 11
<!-- Postagem -->
 <div class=”w3-card-4 w3-margin w3-white”>
 <img src=”https://www.w3schools.com/w3images/
woods.jpg”
 <div class=”w3-constainer”>
 <h3><b>GAMES</b></h3>
 <h5>O mundo virtual está cada vez mais 
real!, <span c
 </div>
 ...
 <!-- Postagem -->
 <div class=”w3-card-4 w3-margin w3-white”>
 <img src=”https://www.w3schools.com/w3images/
bridge.jpg”
 <div class=”w3-constainer”>
 <h3><b>GUARTELÁ</b></h3>
Introdução ao Coding Web 35
Fonte: O Autor
 <h5>Um Passeio Inesquecível, <span class=”w-
3-opacity
 </div>
Figura 12: Recorte da parte do blog apresenta a numeração dos títulos das postagens 
realizados com código PHP
Fonte: O Autor
Organizar os textos do blog em variáveis antes de apresentá-los 
na tela. Você já reparou quanto texto tem na página do blog que está 
misturado aos comandos HTML, CSS e PHP? Pois então, seria muito 
interessante organizar essa bagunça e, para tanto, podemos fazer uso das 
variáveis que aprendemos. Vamos começar pelas postagens. 
Se repararmos bem, toda postagem deve ter um título, um subtítulo, 
um data em que foi feita sua publicação, o conteúdo e o número de 
comentários. Podemos criar uma variável para cada um desses itens no 
início do código. Pode ser: $PostTit (para o título da postagem) e $PostSTit 
(para o subtítulo). Usando a mesma regra de nomenclatura, temos: 
$PostData, $PostTexto e $PostComent.
Colocando todas elas no código PHP, já com seus respectivos 
conteúdos, fica mais ou menos assim:
Introdução ao Coding Web36
<?php
//definição de constante
define(“AUTOR_BLOG”, ‘Marcos’);
//definição de variáveis
$NPostagens = 0;
//Postagem 1
$PostTit1 = “GAMES”;
$PostSTit1 = “o mundo virtual está cada vez mais 
real!”;
$PostData1 = “Agosto 8, 2018”;
$PostTexto1 = “Cada vez mais as novas tecnologias 
estão a melhorar a capacidade dos games. Estão a se 
 transformar em verdadeiras obras de arte. 
Muitas vezes fica dificil distinguir o real do
 virtual. Os últimos lançamentos da...”;
$PostComent1 = “0”;
//Postagem 2
$PostTit2 = “GUARTELÁ”;
$PostSTit2 = “Um Passeio Inesquecivel”;
$PostData2 = “Julho 14, 2018”;
$PostTexto2 = “Cânion Guartelá é um cânion brasi-
leiro situado no planalto dos Campos Gerais, entre 
os municipios
 de Castro e Tibagi, no Parabá. É consi-
derado um dos maiores cânions do mundo em extensão, 
o 6º mais
Figura 13
Introdução ao Coding Web 37
 Longo do mundo e o mais longo do Bra-
sil.<br> O Cânion do Guartelá é uma garganta reti-
linea com cerca
 de 30 km de extensão e desnivel máximo 
de 450 metros. Foi escavado pelo Rio Iapó, que...”;
$PostComent2 = “2”;
Fonte: O Autor
Note que foi necessário criar variáveis para as postagens número 1 e 
número 2. Você deve estar pensando: “Mas e se tivéssemos 10 postagens 
por página? Ficaria inviável!”.
Calma... Veremos a solução para sua dúvida quando chegar o 
momento certo.
Dando continuidade ao nosso código, precisamos atribuir conteúdo 
a essas variáveis. Depois de atribuídos os conteúdos para cada variável 
das postagens 1 e 2, o código fica assim:
Agora vem a parte mais legal: mudar o código para que essas 
variáveis possam substituir o texto no interior do código HTML. Para inserir 
essas variáveis no código HTML usaremos blocos de código PHP. A parte 
referente à primeira postagem fica assim:
Figura 14
<!--Postagem-->
<div class = “w3-card-4 w3-margin w3-white”>
 <img src=”http://www.w3schools.com/w3images/
woods.jpg” alt=”Nature” style=”width:100%>
 <div class=”w3-container”>
 <h3><br>
 <?php
 $NPostagens , “ “ , $PostTiti;
Introdução ao Coding Web38
 ?>
 </h3>
 <h5>
 <?php
 echo $PostTiti , “ “ , <span class 
= ‘w3-opacity’>, $PostData1 , “</span>”;
 ?>
 </h5>
 </div>
 
 <div class = “w3-container”>
 <?php 
 echo “<p>” , $PostTexto1 , “</p>”;
 ?>
 <div class = “w3-row”>
 <div class=”w3-col” style=”width:80%”>
 <p><button class=”w3-button w3-pa-
dding-large w3-white w3-border”><b>Leia mais... </
b></button></p>
 </div>
 <div class=”w3-col w3-hide-small” 
style=”width:20%”>
 <p><span class=”w3-padding-large 
w3-right”><b>Comments </b>
 <span class = “w3-tag”>
 <?php echo $PostComment1; 
?>
 </span>
Fonte: O Autor
Introdução ao Coding Web 39
Agora falta o código referente a segunda postagem. Mas uma coisa 
bem legal deve ter acontecido nesse momento! Você deve ter percebido 
que o código para a segunda postagem será exatamente igual ao que foi 
apresentado para a primeira postagem (Figura 14), apenas que precisa 
substituir as variáveis com final 1 ($PostTi1) para variáveis com final 2 
($PostTit2). Sensacional, não é? Isso se chama organização de código e 
deve se feito sempre que possível, pois fica muito mais fácil de entender 
e de fazer posterioresmodificações.
IMPORTANTE:
Note que dessa vez não alteramos o layout (HTML) do blog 
nem trabalhamos com o estilo da página (W3.CSS). Porém, 
fizemos algo igualmente importante, que foi inserir blocos de 
código PHP para organizar o código e torná-lo mais facilmente 
legível e modificável. Vamos em frente!
Introdução ao Coding Web40
Matrizes e estruturas de controle
Matrizes e estruturas de controle são elementos essenciais no 
aprendizado de qualquer linguagem de programação.
Matrizes
Também conhecidas pelo nome “Array”, as matrizes podem ser 
definidas como variáveis que conseguem armazenar mais de um valor 
simultaneamente de forma organizada. De fato, elas conseguem organizar 
um grupo de dados de maneira indexada, sendo que cada índice dessa 
matriz representa um espaço no qual pode ser armazenado um dado, um 
valor ou uma informação.
EXEMPLO: Abra o NotePad++ e crie um arquivo php, chamado 
exe06_u2.php. Imagine que você precise armazenar o nome de vários 
colegas dentro de um programa PHP. Se fosse utilizar variáveis comuns, 
teria que usar uma variável para cada colega. Mas se utilizar matrizes, 
pode usar apenas uma matriz e indexar os nomes de seus colegas, da 
seguinte maneira:
Figura 15: Exemplo simples do uso de matrizes em PHP
<?php 
 $colegas = array{
 0 => “Carlos”,
 1 => “Joana”,
 2 => “Marisa”,
 3 => “Joaquim”};
 echo $colegas[0] . “<br>”;
 echo $colegas[3];
?>
Fonte: O Autor
Introdução ao Coding Web 41
Repare que o código apresentado na Figura 15 mostra apenas 
nomes de quatro colegas, que estão indexados pelos números 0 e 3, 
respectivamente. Destaca-se também que estamos usando o atributo de 
string, na linha 7, para concatenar o nome do primeiro colega com uma 
tag html que informa que a linha deve ser quebrada.
Um exemplo mais complexo seria melhorar o exemplo simples 
e inserir, além do nome do colega, o telefone, o endereço e a data de 
nascimento. O que acha? Vamos lá!
EXEMPLO: Abra o NotePad++ e crie um arquivo php chamado exe06_
u2.php. O código ficariam mais ou menos assim:
Figura 16: Exemplo do uso de matrizes de duas dimensões em PHP
<?php 
 $colegas = array(
 1 => array(
 “Nome” => “Carlos”,
 “Telefone” => “99525252”,
 “Endereco” => “Rua XV, 120”,
 “Data Nasc” => “01/01/2000”),
 2 => array(
 “Nome” => “Joana”,
 “Telefone” => “99252525”,
 “Endereco” => “Rua das flores, 
10”,
 “Data Nasc” => “10/04/2002”),
 3 => array(
 “Nome” => “Marisa”,
 “Telefone” => “98181818”,
 “Endereco” => “Rua do Rio, 1”,
 “Data Nasc” => “27/09/2001”),
 4 => array(
 “Nome” => “Joaquin”,
Introdução ao Coding Web42
 “Telefone” => “996363651”,
 “Endereco” => “Rua do Rio, 15”,
 “Data Nasc” => “17/02/2010”)
 );
 echo $colegas[4][“Telefone”] . “<br>”;
 echo $colegas[3][“Data Nasc”];
?>
Fonte: O Autor
Note, neste caso, que o resultado na tela do navegador mostra o 
telefone do contato número 4 e a data de nascimento do contato número 
3, porém não identifica o nome do contato. Podemos melhorar este 
código para apresentar os dados de maneira mais adequada, da seguinte 
maneira:
echo “<b>” . $colegas[4][“Nome”] . “</b><br>”;
echo “ - Telefone: “ . $colegas[4][“Telefone”] . “<br>”;
echo “<b>” . $colegas[3][“Nome”] . “</b><br>”;
echo “ - Data de Nascimento: “ . $colegas[3][“Data Nasc”] . “<br>”;
 • Não copie e cole o código. Escreva você mesmo, assim 
aprenderá melhor.
Atualizando o blog pessoal
Abra o arquivo php referente ao seu blog pessoal no NotePad++ e o 
renomeie para exe04_blog_u2.php.
Agora que você entendeu como funcionam as matrizes em PHP, 
pode estar pensando que seria muito útil utilizá-las no blog. Então, está 
dado o desafio.
Introdução ao Coding Web 43
 • DESAFIO 1
Alterar o bloco de apresentação do blog para trabalhar com 
matrizes.
Como fazer? 
 • Identifique quais são as informações que estão 
apresentadas nesse bloco.
 • Pense como organizar, em forma de matriz, as informações 
ou os dados apresentados. Para resolver o problema 
número 1, basta verificar a tela do blog no navegador. Lá 
estão as três informações apresentadas: a foto, o nome e 
uma breve descrição sobre você. O problema 2 pode ser 
resolvido mais ou menos assim:
$Bloco_Apresentacao = array(
 “img” => “...”,
 “nome” => “...”,
 “descr” => “...”);
Que tal? Agora falta implementar no código do blog, tal como 
fizemos da última vez com as variáveis das postagens.
A parte das definições de variáveis, constantes e, agora, das 
matrizes, fica assim:
Figura 17: Bloco de código PHP referente a declaração de uma matriz
//definição de constante
define(“AUTOR_BLOG”, ‘Marcos’);
//definição de matrizes
$Bloco_Apres = array(
 “img” => “https://www.w3schools.com/
w3images/avatar_g.jpg”,
 “nome” => AUTOR_BLOG,
Introdução ao Coding Web44
 “descr” => “Apenas eu, eu e eu mesmo, 
explorando o universo do conhecimento,
 Tenho interesse em.... e quero compar-
tilhar minhas ideias com você!”
 );
//definição de variáveis
$NPostagens = 0;
Fonte: O Autor
Note que não precisamos repetir o nome do autor, pois a constante 
AUTOR_BLOG já estava definida (linha 8) e foi possível fazer referência a 
ela (linha 12).
Já o código para inserir este conteúdo no bloco de apresentação 
pode ser:
Figura 18
Fonte: O Autor
<!-- bloco Apresentação -->
<div class=”w3-card w3-margin”>
 <img src= <?php echo $Bloco_Apres[“img”]; ?> 
style=”width:100%”>
 <div class=”w3-container w3-white”>
 <div class=”w3-container w3-white”>
 <h4><b><?php echo $Bloco_Apres[“nome”]; ?></
b></h4>
 <p><?php echo $Bloco_Apres[“descr”]; ?></p>
 </div>
</div>
 • DESAFIO 2 
Alterar o bloco de TOP5 do blog para trabalhar com matrizes. Mas 
não se esqueça de renomear o arquivo para exe05_blog_u2.php.
Introdução ao Coding Web 45
Resolvendo o desafio: assim como no desafio anterior:
 • Identifique quais são as informações que estão 
apresentadas nesse bloco.
 • Imagine como organizar, em forma de matriz, essas 
informações ou dados apresentados. Para resolver o 
item 1, podemos identificar que os dados apresentados 
são: imagem, título e número de comentários para cada 
uma das cinco primeiras posições. Neste caso, temos a 
seguinte matriz:
Figura 19: Trecho de código que define a matriz para o bloco TOP5
$Bloco_TOP5 = array(
 1 => array(
 “img” => “https://www.w3schools.
com/w3images/workshop.jpg”,
 “titulo” => “Dez motivos para 
aprender HTML5 + w3.CSS”,
 “nComent” => “142”),
 2 => array(
 “img” => “https://www.w3schools.
com/w3images/workshop.jpg”,
 “titulo” => “Experiência em 
Gravidade 0.”,
 “nComent” => “10”),
 3 => array(
 “img” => “https://www.w3schools.
com/w3images/gondol.jpg”,
 “titulo” => “Como morar sozi-
nho”,
 “nComent” => “7”),
 4 => array(
 “img” => “https://www.w3schools.
com/w3images/skies.jpg”,
 “titulo” => “Melhores músicas 
dos anos 90.”,
Introdução ao Coding Web46
 “nComent” => “3”),
 5 => array(
 “img” => “https://www.w3schools.
com/w3images/rock.jpg”,
 “titulo” => “O que fazer num 
sábado chuvoso.”,
 “nComent” => “2”));
Fonte: O Autor
O código para apresentaresses dados dentro do bloco TOP5 do 
blog é:
Figura 20: Trecho de código para apresentar a postagem com o maior número de 
comentários, no bloco TOP5 do blog
Fonte: O Autor
<li class=”w3-padding-16”> 
 <img scr=”<?php echo $Bloco_TOP5[3][“img”]; ?>”
 class=”w3-left w3-margin-right” style=”wid-
th:50px”>
 <span class=”w3-large”><?php echo $Bloco_
TOP5[3][“titulo”]; ?></span>
 <br>
 <span>Comentários: <?php echo $Bloco_TOP5[3]
[“nComent”]; ?></span>
</li>
As demais posições seguem o mesmo padrão. Repare que o código 
para colocar a postagem com maior número de comentários é igual para 
todas as outras. A única coisa que troca é o número referente à posição.
Introdução ao Coding Web 47
 • Para conhecer mais sobre arrays, acesse: 
https://bit.ly/3eQ19oS.
Está ficando muito bom! Vamos em frente!
Estruturas de controle
Estruturas de controle são essenciais na programação, pois permitem 
tomadas de decisões e repetições de comandos enquanto uma determinada 
situação seja verdadeira. Normalmente, as estruturas de controle são 
formadas por blocos de comandos (vários comandos) que devem ser 
delimitados por chaves. Existem várias estruturas de controle em PHP. Neste 
material, vamos estudar algumas estruturas de controle condicionais e de 
repetição.
Estruturas De Controle Condicionais
Também chamados de comandos condicionais, são estruturas de 
controle que executam determinado bloco de comandos somente de 
uma determinada condição for satisfeita. Neste material, estudaremos 
dois tipos de comandos condicionais em PHP: o IF e o SWITCH.
O comando condicional if
O termo IF (em inglês) significa SE (em português). A partir disso, você 
já deve ter imaginado como ele funciona, ou seja:
SE uma condição for satisfeita, ENTÃO: execute determinado bloco 
de comandos,
SENÃO, execute outro bloco de comandos.
Existem algumas variações ou modelos da sintaxe desse comando 
condicional, por exemplo:
https://bit.ly/3eQ19oS
Introdução ao Coding Web48
MODELO 1 MODELO 2 MODELO 3
if(expressão)
 comando1;
if(expressão)
 comando1;
comando 2;
comando 3;
if(expressão){
 comando1;
 comando 2;
 comando 3;
}
Tabela 6
Fonte: O Autor
Explicando as sintaxes:
 • Modelo 1: o comando 1 somente será executado se a 
expressão for verdadeira.
 • Modelo 2: apenas o comando 1 está relacionado com o IF 
e será executado somente se a expressão for verdadeira. 
Os comandos 2 e 3 serão executados independentemente 
da expressão ser verdadeira ou falsa.
 • Modelo 3: os comandos 1, 2 e 3 serão executados apenas 
se a expressão for verdadeira. Isso ocorre porque todos os 
três comandos estão dentro das chaves que compõem o 
bloco de comandos da estrutura condicional IF.
IMPORTANTE:
A expressão tratada nos itens anteriores normalmente é 
uma condição que tem duas possibilidades de resultado: 
verdadeiro ou falso.
Introdução ao Coding Web 49
Tabela 6
Fonte: O Autor
MODELO 4 MODELO 5 MODELO 6
if(expressão)
 {
 comando 1;
 comando 2;
 }
 else
 {comando 3;}
if(expressão)
 {
 comando 1;
 comando 2;
 }
 else if (expressão 2)
 {
 comando3;
 }
 else
 {
 comando 4;
 }
if(expressão){
 comando 1;
 comando 2;
 comando 3;
 }
 else
 {
 if (expressão 2)
 {
 comando3;
 }
 else
 {
 comando 4;
 }
 }
Explicando as sintaxes:
 • Modelo 4: podemos ver claramente dois blocos, 
destacados pelas duas linhas verticais laterais. O comando 
1 e o comando 2 (no bloco 1) serão executados apenas se 
a expressão for verdadeira. Já o comando 3 (no bloco 2) 
será executado apenas se a expressão for falsa.
 • Modelo 5: Neste caso, podemos ver três blocos, 
destacados pelas linhas verticais laterais ao código. Os 
comandos 1 e 2 (no bloco 1) serão executados somente 
se a expressão 1 for verdadeira. Mas caso a expressão 1 
seja falsa, outra expressão será testada (expressão 2). 
Introdução ao Coding Web50
Caso a segunda expressão seja verdadeira, o comando 
3 (no bloco 2) será executado. Porém, para o caso de 
nem a expressão 1 nem a expressão 2 serem verdadeiras, 
o comando 4 (no bloco 3) será executado. Note que 
a expressão 1 é a condição de entrada do bloco 1 e a 
expressão 2 é a condição de entrada do bloco 2.
 • Modelo 6: neste caso temos quatro blocos e, se você 
reparar bem, perceberá que existe outra estrutura IF-ELSE 
dentro do bloco ELSE. Funciona assim: os comandos 1 e 
2 (bloco 1) apenas serão executados caso a expressão 1 
(condição para entrada do bloco 1) seja verdadeira. Mas 
se a expressão 1 for falsa, executa-se o código do bloco 
ELSE (bloco 2). Mas, dentro do bloco 2, abre-se outra 
estrutura condicional IF-ELSE que verifica se a expressão 
2 é verdadeira. Em caso positivo, apenas o comando 3 
(bloco 3) será executado e, em caso negativo, apenas o 
comando 4 (bloco 4) será executado.
 • EXEMPLO: Abra o NotePad++ e crie um arquivo php 
chamado exe07_u2.php. Imagine que você queira controlar 
a notas dos seus alunos e apresentar o resultado na tela 
da situação em que ele se encontra no final de período 
letivo. As situações podem ser: (1) Aprovado: caso a média 
das notas seja igual ou maior que 7,0. (2) Recuperação: 
caso a média das notas seja maior ou igual a 4,0 e menor 
que 7,0. (3) Reprovado: caso a média das notas seja menos 
que 4,0.
O código ficaria mais ou menos assim:
Figura 21: Exemplo do uso do comando condicional IF
<?php 
 $nota = 10 //exemplo de valor
 if($nota < 4)
 {
 echo “Alunos reprovado”;
 }
 else if($nota >= 7)
Introdução ao Coding Web 51
Fonte: O Autor
 {
 echo “Alunos aprovado”;
 }
 else
 {
 echo “Aluno em recuperação”;
 }
?>
Troque o valor da variável $nota para um valor entre 4 e 7 e veja 
o que acontece. Depois troque para um valor menor que 4 e verifique o 
resultado. Isso fará você compreender melhor o que o código está a fazer. 
Vale a pena!
Comando condicional switch
O comando SWITCH é muito semelhante ao comando condicional 
IF e pode servir como alternativa a este último quando o número de 
verificações é muito grande, por exemplo. Funciona assim: o SWITCH 
verifica uma condição dada por uma expressão, testa todos os casos 
referentes ao resultado dessa expressão e direciona o fluxo do programa 
para o caso (bloco de código) adequado.
Sua sintaxe é apresentada na Figura 22:
Figura 22: Sintaxe- padrão do comando condicional SWITCH
switch (exepressão) 
{
 case valor1:
 <bloco de comando1>
 break;
 case valor2:
 <bloco de comando2>
 break;
 ...
 case valorN:
 <bloco de comandoN>
 break;
Introdução ao Coding Web52
 
 default:
 <bloco de comando padrão>
 break;
}
Fonte: O Autor
Na sintaxe apresentada, note que existem vários blocos de código 
(iniciados pela palavra reservada case e finalizados pela palavra reservada 
break) dentro do bloco principal (switch).
O único bloco que será executado será aquele cujo valor testado 
pelo case for igual ao resultado da expressão testada pelo switch.
Repare também que o último bloco (dentro do bloco switch) não 
é iniciado com a palavra case, mas, sim, com a palavra default. Isso 
significa que os comandos internos a esse bloco serão executados 
quando o programa não encontrar nenhum case adequado ao resultado 
da expressão. Ele é opcional.
IMPORTANTE:
A função da palavra reservada break é fazer com que o fluxo 
de execução do programa saia do bloco principal do switch 
depois de ter executado o case adequado. Caso você se 
esqueça de colocar um break no final de cada case, o fluxo do 
programa continuará executando outros blocos case, o que 
causará vários tipos de erros.
EXEMPLO: Abra o NotePad++ e crie um arquivo php chamado 
exe08_u2.php. Imagineque no seu blog o usuário precise selecionar o ano 
em que ele nasceu, ou o estilo de filme favorito, ou o assunto que mais 
gosta de ler etc. Nesse caso, você precisaria utilizar uma estrutura switch 
para executar um código de acordo com a escolha. Vamos apresentar 
aqui (Figura 23) um exemplo para o caso dele ter que escolher o mês de 
nascimento.
Introdução ao Coding Web 53
Figura 23
Fonte: O Autor
<?php
 $mes = 1; //exemplo
 switch ($mes) 
 {
 case 1:
 echo (“Janeiro”);
 break;
 case 2:
 echo (“Fevereiro”);
 break;
 case 3:
 echo (“Março”);
 break;
 case 4:
 echo (“Abril”);
 break;
 case 5:
 ....
 case 10:
 echo (“Outubro”);
 break;
 case 11:
 echo (“Novembro”);
 break;
 case 12:
 echo (“Dezembro”);
 break;
 
 default:
 echo (“Mês inválido”);
 }
?>
Introdução ao Coding Web54
Estruturas de controle de repetição
Também conhecidos como “laços de repetição” ou “looping”, 
essas estruturas devem ser utilizadas sempre que você precisar que 
determinado bloco de código seja executado diversas vezes enquanto 
uma determinada condição seja verdadeira. Você certamente usará 
muitas vezes esses comandos de repetição em seus futuros códigos.
Comando de repetição for
Esse comando de repetição permite que o programa execute um 
bloco de código por um número específico de vezes, controlado por 
um contador. Tal contador pode ser incrementado ou decrementado até 
que a condição para que o loop seja realizado não seja mais atendida 
e, então, o laço de repetição FOR é quebrado e o fluxo de execução do 
programa segue para a linha seguinte ao laço FOR. Sua sintaxe básica 
está apresentada na Figura 24.
Figura 24
for (<inic>;<expr>;<incr/decr>)
{
 comando 1;
 comando 2;
 ...
 comando N;
Fonte: O Autor
Na Figura 24, é importante considerar que: (1) <inic> é o local onde 
se inicializa o contador. Exemplo: $contador = 1. (2) <expr> marca o local 
onde a condição para se executar o laço ou loop será testada. Exemplo: 
$contador < 10. Enquanto essa condição for verdadeira, os comandos 
do laço FOR serão executados. (3) <incr/decr> é o local onde devemos 
fazer o incremento ou decremento da variável $contador, para que, ao 
ser incrementada ou decrementada (depende do caso), deixe de atender 
à condição determinada pela <expr> após dado número de repetições. 
Exemplo: $contador++.
Introdução ao Coding Web 55
Vamos a um exemplo completo:
EXEMPLO: Abra o NotePad++ e crie um arquivo php chamado exe09_
u2.php. Imagine que, no seu blog, a leitura do banco de dados indique 
que você tem sete postagens registradas. Então, você quer fazer um laço 
de repetição para que todas as sete postagens sejam apresentadas. Esse 
laço terá que se repetir sete vezes, não é mesmo? Então vamos ao código:
<?php
//exemplo do laço de repetição FOR
 $NPostagens = 7;
 For ($Cont = $NPostagens; $Cont>0; $Cont--)
 {
 /*Exemplo de bloco de código para 
 apresentar o conteúdo das postagens*/
 echo “Postagem” . $Cont . “- <b>Titulo</b> 
“ . $Cont . “<br>”; 
 echo “Conteudo da postagem” . $Cont . 
“<br>”;
 echo “Autor e data da postagem” . $Cont . 
“<br><br>”;
 }
?>
Figura 25: Exemplo de código utilizando o laço de repetição FOR
Fonte: O Autor
Importante notar neste código que: (1) O número de postagens, 
representado pela variável $NPostagens, é determinado como 7 (linha 
3), mas em um caso real esse número seria especificado pelo banco de 
dados (assunto que trataremos na próxima Unidade letiva). (2) O contador 
$Cont é inicializado (<inic>) com o valor do número de postagens. No 
Introdução ao Coding Web56
local marcado para a testar a condição para realizar o loop (<expr>), existe 
uma expressão que verifica se o contador ($Cont) é maior do que zero 
(enquanto essa condição for válida, o loop FOR será executado). (3) No local 
marcado para o incremento ou decremento do contador (<incr/decr>), 
existe a expressão “$Cont--”. Os dois sinais de “menos” após a variável têm 
a função de decrementá-la em uma unidade a cada execução do loop 
FOR. É a mesma coisa que escrever: “$Cont = $Cont-1”, isto é, no primeiro 
loop a variável $Cont vale 7, já no segundo vale 6, e assim por diante, até 
que a condição deixe de ser atendida. No nosso exemplo, o loop será 
executado enquanto o valor da variável $Cont for maior do que zero.
Comando de repetição while
Esse é o comando de repetição mais simples que o FOR. Ele executa 
um bloco de código repetidas vezes até que determinada condição deixe 
de ser atendida, isto é, seja falsa. Sua sintaxe básica é a seguinte:
Figura 26: Sintaxe básica do laço de repetição WHILE
while(expr)
{
 <bloco de comandos>
}
Fonte: O Autor
Abra o NotePad++ e crie um arquivo php chamado exe10_u2.php. 
Vamos resolver o mesmo caso do exemplo anterior (Laço de repetição 
FOR). O código fica mais ou menos assim:
<?php
//exemplo do laço de repetição WHILE
 $NPostagens = 7;
 while ($NPostagens > 0)
 {
Figura 27: Exemplo básico do laço de repetição WHILE com decremento de variável 
contadora
Introdução ao Coding Web 57
Fonte: O Autor
 /*Exemplo de bloco de código para 
 apresentar o conteúdo das postagens*/
 echo “Postagem” . $NPostagens . “- <b>Titu-
lo</b> “ . $NPostagens . “<br>”; 
 echo “Conteudo da postagem” . $NPostagens . 
“<br>”;
 echo “Autor e data da postagem” . $NPosta-
gens . “<br><br>”;
 $NPostagens --;
 }
?>
Considerações importantes acerca do exemplo apresentado: (1) 
Não existe inicialização (<inic>) nem incremento ou decremento (<incr/
decr>) na linha de código do comando “While”. A inicialização ocorre antes 
(linha 3) e o incremento ou decremento ocorre no final (linha 11) do bloco 
de código pertencente ao comando “While”.
Você pode estar curioso para saber como seria o código do 
exemplo anterior para o caso de querermos utilizar incremento de variável 
contadora e não decremento (como foi utilizado). Se esse é o caso, aí vai 
o exemplo.
EXEMPLO: 
INCREMENTO DE VARIÁVEL CONTADORA
Abra o NotePad++ e crie um arquivo php chamado exe11_u2.php. O 
código fica mais ou menos assim:
Figura 28: Exemplo básico do laco de repetição WHILE com incremento de variável 
contadora
<?php
 $NPostagens = 7;
 $Cont = 1;
Introdução ao Coding Web58
Fonte: O Autor
 while ($Cont <= $NPostagens)
 {
 /*Exemplo de bloco de código para 
 apresentar o conteúdo das postagens*/
 echo “Postagem” . $Cont . “- <b>Titulo</b> 
“ . $Cont . “<br>”; 
 echo “Conteudo da postagem” . $Cont . 
“<br>”;
 echo “Autor e data da postagem” . $Cont . 
“<br><br>”;
 $Cont ++;
 }
?>
A consideração mais importante acerca do código do exemplo 
apresentado é a linha 12 ($Cont++), cuja função é incrementar em uma 
unidade a variável $Cont a cada loop. Significa a mesma coisa que 
escrever “$Cont = $Cont+1”.
Comando de repetição DO-WHILE
É muito semelhante ao laço de repetição “While”. A diferença 
consiste no fato de que a condição para se executar o laço ocorre no final 
do bloco e não no começo (como é o caso do “FOR” e do “WHILE”). Isso 
significa que, quando usamos o laço de repetição do-while, o bloco de 
código será executado pelo menos uma vez. Sua sintaxe é:
Introdução ao Coding Web 59
Fonte: O Autor
Figura 29: Sintaxe básica do laço de repetição DO_WHILE
do
{
 <bloco de comandos>
} while(expr)
Com base nesta sintaxe, vamos fazer um exemplo diferente.
EXEMPLO: Abra o NotePad++ e crie um arquivo php chamado 
exe12_u2.php. Monte um programa que mostre na tela do navegador os 
números ímpares de 1 a 10. Segue o código:
Fonte: O Autor
Figura 30: Exemplo do uso de laço de repetição DO-WHILE<?php
//exemplo do laço de repetição WHILE
 $i = 1;
 do {
 /*Exemplo de bloco de código para 
 apresentar o conteúdo das postagens*/
 if($i % 2 == 1)
 {
 echo “O numero “ . $i . “eh impar<br>”;
 }
 $i++
 } while ($i <= 10);
?>
Explicando o exemplo: perceba que neste exemplo usamos um 
operador “%” que calcula o resto da divisão (no caso, por 2). Isso foi feito 
porque, se o resto de divisão de qualquer número por 2 for igual a 1, esse 
número é ímpar.
Introdução ao Coding Web60
Repare também que o controle do laço só acontece no final 
do bloco “do-while”. Isso prova que os comandos internos do referido 
bloco serão executados pelo menos uma vez. Muito bem. Agora que já 
estudamos variáveis, tipos, expressões, comando de controle condicional 
e de repetição, vamos começar a usar tudo isso, junto, no nosso blog.
SAIBA MAIS:
Acesse o link https://bit.ly/3dz5A6Y e verifique as demais 
estruturas controle disponível na linguagem PHP. Vale a pena!
Atualizando o blog pessoal
Abra o arquivo php referente ao seu blog pessoal no NotePad++ 
e o renomeie para exe05_blog_u2.php. Agora, vamos implementar um 
exemplo de controle de repetição dentro do código do blog pessoal.
Você deve se lembrar que criamos uma matriz para os dados 
referentes ao bloco TOP5 (Figuras 19 e 20) e comentamos logo que os 
blocos de código html+w3.css+php eram iguais para exibir as cinco 
postagens mais comentadas do blog. Pois então, vamos usar o comando 
“FOR” para melhorar aquele código. Como resolver: se, são cinco 
postagens e a matriz que contém esses dados ($Bloco_TOP5) vai de 1 a 5, 
conforme podemos ver na Figura 19, vamos usar o comando for variando 
de 1 a 5 para repetir apenas um bloco cinco vezes, a variar o índice da 
matriz, mais ou menos assim:
Figura 31: Estrutura de código PHP utilizando o comando “FOR”
<ul class=”w3-ul w3-hoverable w3-white”>
 <?php
 for ($i=1; $i<=0; $i++)
 {
 $I = $Bloco_TOP5[$i][‘img’];
 $T = $Bloco_TOP5[$i][‘titulo’];
 $N = $Bloco_TOP5[$i][‘nComent’]; ?>
 <li class=”w3-padding-16”>
https://bit.ly/3dz5A6Y
Introdução ao Coding Web 61
Fonte: O Autor
 <img src=”<?php echo $Bloco_
TOP5[$i][“img”]; ?>” class=”w3-left w3-margin-ri-
ght” style=”width:50px”>
 <span class=”w3-large”><?php echo 
$Bloco_TOP5[$i][“titulo”]; ?></span>
 <br>
 <span>Comentários: <?php echo $Blo-
co_TOP5[$i][“nComent”]; ?></span>
 </li>
 <?php
 }
Note, na Figura 31, que não precisamos mais repetir 5 vezes o 
mesmo código. Usamos o comando “FOR” para apenas um dos blocos e 
fizemos o índice da matriz $Bloco_TOP5.
 • DESAFIO MÁXIMO
Transformar as variáveis referentes às duas postagens em matriz e 
fazer um laço de repetição “While” para apresentá-las na tela. O que acha? 
Mãos à obra! Mas antes, abra o arquivo php referente ao seu blog pessoal 
no NotePad++ e o renomeie para exe06_ blog_u2.php.
Para resolver o desafio: (1) Verifique quais são as variáveis das 
postagens. (2) Monte a matriz que as substitua. (3) Crie um código PHP 
para o loop While no local em que as postagens devem aparecer na tela.
Resolvendo o item 1:
Figura 32
//Matriz de postagens
$Bloco_Postagens = array(
 1 => array(
 “img” => “https://www.w3schools.com/w3ima-
ges/wooods.jpg”,
Introdução ao Coding Web62
 “titulo” => “GAME”,
 “sTitulo” => “O mundo virtual está cada 
vez mais real!”),
 “data” => “Agosto 8, 2018”;
 “texto” => “Cada vez mais as novas tecnolo-
gias estão a melhorar a capacidade dos games. Estão 
a se 
 transformar em verdadeiras obras de 
arte. Muitas vezes fica dificil distinguir o real do
 virtual. Os últimos lançamentos 
da...”;
 “nComent” => “0”),
 2 => array(
 “img” => “https://www.w3schools.com/w3ima-
ges/bridge.jpg”,
 “titulo” => “GUARTELÁ”,
 “sTitulo” => “Um Passeio Inesquecivel”),
 “data” => “Julho 14, 2018”;
 “texto” => “Cânion Guartelá é um cânion 
brasileiro situado no planalto dos Campos Gerais, 
entre os municipios
 de Castro e Tibagi, no Parabá. É consi-
derado um dos maiores cânions do mundo em extensão, 
o 6º mais
 Longo do mundo e o mais longo do Bra-
sil.<br> O Cânion do Guartelá é uma garganta reti-
linea com cerca
 de 30 km de extensão e desnivel máximo 
de 450 metros. Foi escavado pelo Rio Iapó, que...”;
 “nComent” => “2”));
Fonte: O Autor
Introdução ao Coding Web 63
O código para as postagens ficará assim:
Figura 33
<!--Postagem-->
<?php
while ($NPostagens < 2)
{
 $NPostagens++;
}?>
<div class=”w3-card-4 w3-margin w3-white”>
 <img src=”<?php echo $Bloco_Postagens [$NPosta-
gens] (‘img’); ?>” alt=”Nature” style=”width:100%”>
 
 <div class=”w3-container”>
 <h3><b>
 <?php echo $NPostagens, “ “, $Bloco_
Postagens[$NPostagens](‘titulo’);?>
 </b></h3>
 <h5>
 <?php echo $Bloco_Postagens [$NPosta-
gens](‘aTitulo’), “ ,<span class=”w3-opacity”>”, 
$Bloco_Postagens[$NPostagens](“data”), “</span>”; 
?>
 </h5>
 </div>
 <div class=”w3-container”>
 <?php echo “<p>”, $Bloco_Postagens[$NPosta-
gens (“texto”), “</p>”; ?>
 <div class=”w3-row”>
Introdução ao Coding Web64
 <div class=”w3-col” style=”width:80%;”>
 <p><button class=”w3-button w3-pad-
ding-large w3-white w3-border”>
 <b>Leia mais... </b> </button> 
</p>
 </div>
 <div class=”w3-col w3-hide-small” 
style=”width:20%;”>
 <p>
 <span class=”w3-padding-large 
w3-right”><b> Comments </b>
 <span class=”w3-tag”>
 <?php echo $Bloco_Pos-
tagens[$NPostagens](“nComent”); ?>
 </span>
 </span>
 </p>
 </div>
 </div>
 </div>
</div>
<h2>
<?php
;
?>
Fonte: O Autor
Ficou muito legal! Conforme você percebeu, muita coisa ainda pode 
ser melhorada no blog. Fique à vontade para fazer suas experiências, mas 
não se esqueça de gravar um arquivo-base que funcione, para o caso de 
algo estranho acontecer. Agora, seguimos para o próximo e último tópico 
desta Unidade Letiva.
Introdução ao Coding Web 65
Formulários (HTML + W3.CSS + PHP)
O formulário é uma parte muito importante de uma página web, 
pois é por meio deles que se permite que o usuário do nosso blog, 
por exemplo, escreva um comentário, faça uma escolha ou deixe uma 
sugestão.
Vamos começar entendendo como o HTML5 e o W3.CSS trabalham 
com formulários e na segunda parte desta seção, vamos inserir o código 
PHP.
Formulários HTML5 + W3.CSS
Formulários em HTML5 + W3.CSS são também chamados de Input 
Forms. São contêineres nos quais se pode colocar todo tipo de elemento 
que permita a interação ou escolha do usuário do blog (seja um visitante 
ou administrador) na forma de entrada de dados.
Vamos começar com a tela mais comum, a tela de login. Para você 
poder administrar o blog, precisa que este o reconheça. Nesse caso, nada 
melhor do que uma tela que permita que você digite suas credenciais.
Formulário de Acesso
Usuário
Entrar
Senha
Lembrar de mim.
Esqueci a senha
X
Cancelar
Figura 34: Exemplo de formulário de login
Fonte: O Autor
Introdução ao Coding Web66
Na Figura 34 podemos identificar quatro tipos de interações que 
o usuário pode fazer. (1) Digitar na caixa de texto (nome do usuário ou 
senha). (2) Clicar no botão (Entrar ou Cancelar). (3) Marcar o check- box 
“Lembrar de mim”. (4) Clicar sobre o link “Esqueci a senha”. Muito bem, 
vamos aprender a montar esse formulário.
Lembra a estrutura de uma página HTML5?
Caso não se lembre, aí vai a “cola”!!
<html>
<head>
 <!—cabeça da página -->
</head>
<body><!-- corpo da página -->
</body>
</html>
 Note que o corpo da página pode ser divido em três partes, como 
mostra a Figura 35:
Figura 35
Fonte: O Autor
Formulário de Acesso
Usuário
Entrar
Senha
Lembrar de mim.
Esqueci a senha
X
Cancelar
header
section
footer
Introdução ao Coding Web 67
Abra o NotePad++ e crie um arquivo chamado login.php e insira a 
estrutura apresentada na Figura 33.
Figura 35
Fonte: O Autor
Formulário de Acesso
Usuário
Entrar
Senha
Lembrar de mim.
Esqueci a senha
X
Cancelar
header
section
footer
Abra o NotePad++ e crie um arquivo chamado login.php e insira a 
estrutura apresentada na Figura 33.
IMPORTANTE:
Não esqueça de inserir três linhas no <head> do código: (1) 
Uma linha que define o título da página que aparece na aba do 
navegador – neste caso, o título pode ser “Login”. (2) Uma linha 
que define que estamos a usar o idioma português/ brasileiro 
com seus acentos. (3) Uma linha que faz a ligação (link) com 
a folha de estilos do W3.CSS, para indicar ao navegador que 
queremos usar suas classes nessa página.
Muito bem. A estrutura básica do seu código deve ter ficado assim:
Introdução ao Coding Web68
Figura 36: Codígo a ser inserido
Fonte: O Autor
<html>
<head>
 <title>login</title>
 <meta charset=”UTF-8”>
 <link rel=”stylesheet”
 href=”https://www.w3schools.com/w3css/4/
w3.css”>
</head>
 <body>
 <header>
 </header>
 <section>
 </section>
 <footer>
 </footer>
 
 </body>
</html>
 • MONTANDO O <HEADER>:
 O cabeçalho do corpo da página de login precisa ter um título e, 
conforme podemos verificar na Figura 36, o título do cabeçalho deve ser 
“Formulário de Acesso”. Então, mãos à obra. Seu código deve ficar assim:
O cabeçalho do corpo da página de login precisa ter um título 
e podemos verificar na Figura 36 que o título do cabeçalho deve ser 
“Formulário de Acesso”. Então, mãos à obra. Seu código deve ficar assim:
Introdução ao Coding Web 69
Figura 37
Fonte: O Autor
<body>
 <header class=”w3-container w3-center 
w3-light-grey”>
 <h1>Formulário de Acesso</h1>
 </header>
Perceba que foram atribuídas três classes W3.CSS para o <header>: 
w3-container, w3-center e w3-light-grey. Esta última não estava prevista, 
mas acabei usando só para destacar o cabeçalho do resto do corpo da 
página.
IMPORTANTE:
Caso você não se recorde para que servem e como são 
usadas as classes W3.CSS, é muito importante que reveja a 
Unidade 1 deste material.
Agora vamos tratar do rodapé do corpo da página.
 • MONTANDO O <FOOTER>:
Aqui precisamos colocar um botão vermelho (Cancelar) e, alinhado 
à direita da tela, um link para “Esqueceu a senha?”. Também podemos 
colocar a cor de fundo do <footer> como grey para diferenciar do light-
grey utilizado no cabeçalho. Que tal?
O trecho de código referente ao rodapé do corpo da página de 
login fica assim:
Introdução ao Coding Web70
Figura 38
Fonte: O Autor
<footer class=”w3-container w3-border-top w3-pad-
ding-16 w3-grey”>
 <button type=”button” class=”w3-button 
w3-red”>Cancelar</button>
 <span class=”w3-right w3-padding w3-hi-
de-small”>
 Esqueceu a <a href=”#”>senha?</
a></span>
 </footer>
 </body>
Note que o rodapé que também foi definido como w3-container, 
tem a linha da borda superior aparecendo, tem espaços de 16 px definidos 
sobre e sob os objetos contidos no rodapé e tem cor de fundo cinza. Com 
relação ao botão, não precisa colocar que ele vai ficar do lado esquerdo 
(w3-left), pois é a ordem padrão de disposição dos elementos contidos 
na página, mas a ele foram atribuídas as classes w3-button (nada mais 
natural, pois se trata de um botão) e w3-red (para que ele tenha a cor 
vermelha). Relativamente ao link “Esqueceu a senha?”, foi colocado como 
<span> – caso você não se lembre, deve rever a Unidade 1 deste material. 
Foi alinhado à direita (w3-right) e não será exibido em caso de dispositivos 
com telas pequenas (w3-hide-small). Agora, para que serve a classe “w3- 
padding”? Se você não se recorda, consulte a Unidade 1 deste material.
Neste momento, a tela de login deve estar mais ou menos assim:
Figura 39: Aparência da tela de login até o momento
Fonte: O Autor
Esqueceu a senha?Cancelar
Formulário de Acesso
Introdução ao Coding Web 71
Precisamos preencher o meio entre o cabeçalho e o rodapé do 
corpo da página. Vamos lá!
 • MONTANDO O <HEADER>:
Em HTML, quando precisamos usar elementos para que o usuário 
digite algo, como é o caso da caixa de texto necessária para digitar o 
usuário e a senha, usamos duas tags importantes: (1) a tag <label>, que 
define a etiqueta da caixa de texto, isto é, o nome que normalmente está 
sobre caixa e que identifica qual informação ou dado deve ser escrito na 
caixa de texto; e (2) a tag <input>, que é a caixa de interação propriamente 
dita. Pode ser do tipo “text” (como é o caso do local onde será digitado o 
nome do usuário), do tipo “password” (como é o caso onde será digitada 
a senha do usuário) ou do tipo “checkbox” (como é o caso da caixa de 
verificação, onde o usuário pode marcar ou não para ser lembrado da 
próxima vez que fizer o login). Existem vários outros tipos.
SAIBA MAIS:
Se você quiser conhecer outros tipos de interações possíveis, 
visite: https://bit.ly/2Y6b42M.
Dito isso, vamos ao nosso scódigo. Para definir a etiqueta onde vai a 
palavra “Usuário” e a palavra “Senha”, usamos a tag <label> desta maneira:
<label><b>Usuário:</b></label>
....
<label><b>Senha:</b></label>
....
Note que as tags <b> e </b> só foram usadas para deixar as palavras 
Usuário e Senha em negrito, mas não são necessárias.
Para inserir a primeira caixa de texto, usamos a tag <input> da 
seguinte maneira:
https://bit.ly/2Y6b42M
Introdução ao Coding Web72
<input type=”text”>
Para a caixa de texto da senha:
<input type=”password”>
E para a caixa de verificação:
<input type=”checkbox”>
Sem se esquecer do botão, nosso código fica mais ou menos assim:
Figura 40: Trecho de código referente à <section> do corpo da página de login.php
Fonte: O Autor
<section class=”w3-container”>
 <label><b>Usuário</b></label>
 <input type=”text”>
 <label><b>Senha</b></label>
 <input type=”password”>
 <button type=”button”>Entrar</button>
 <input type=”checkbox”>Lembrar de mim.
 </section>
O resultado, não muito animador, fica assim:
Figura 41: Aparência da tela de login até o momento
Fonte: O Autor
Formulário de Acesso
Usuário
Entrar
Senha
Cancelar Esqueceu a senha?
Lembrar de mim.
Introdução ao Coding Web 73
Para transformar a Figura 41 em algo parecido com a Figura 36, 
precisamos atribuir classes W3.CSS aos objetos contidos na <section>.
Para as caixas de texto e password, podemos utilizar as classes “w3-
input” e “w3-border”; já para o botão “Entrar”, podemos utilizar as classes 
“w3-button” e “w3-green”; por fim, para a caixa de verificação, a classe 
“w3-check”.
Nosso código fica mais ou menos assim:
Figura 42: Trecho de código referente à <section> do corpo da página de login.php
Fonte: O Autor
<section class=”w3-container”>
 <label><b>Usuário</b></label>
 <input class=”w3-input w3-border” 
type=”text”>
 <label><b>Senha</b></label>
 <input class=”w3-input w3-border” 
type=”password”>
 <button class=”w3-button w3-green”-
type=”button”>Entrar</button>
 <input class=”w3-check” type=”checkbo-
x”>Lembrar de mim.
 </section>
O resultado já está melhor... Veja:
Introdução ao Coding Web74
Figura 43: Aparência da tela de login até o momento
Fonte: O Autor
Formulário de Acesso
Entrar
Cancelar Esqueceu a senha?
Usuário
Senha
Lembrar de mim.
Para melhorar a aparência, precisamos:
 • Inserir espaço entre o final do cabeçalho e a etiqueta 
“Usuário”. Para isso, atribuímos