Tecnologias para Internet II - LD1410

TECNOLOGIAS PARA
INTERNET II
autor
FABIANO GONÇALVES DOS SANTOS
1ª edição
SESES
rio de janeiro 2018
Conselho editorial roberto paes e gisele lima
Autor do original fabiano gonçalves dos santos
Projeto editorial roberto paes
Coordenação de produção gisele lima, paula r. de a. machado e aline karina

rabello
Projeto gráfico paulo vitor bastos
Diagramação bfs media
Revisão linguística bfs media
Revisão de conteúdo raimundo pereira da cunha neto
Imagem de capa jirsak | shutterstock.com
Todos os direitos reservados. Nenhuma parte desta obra pode ser reproduzida ou transmitida
por quaisquer meios (eletrônico ou mecânico, incluindo fotocópia e gravação) ou arquivada em
qualquer sistema ou banco de dados sem permissão escrita da Editora. Copyright seses, 2018.
Dados Internacionais de Catalogação na Publicação (cip)
S237t Santos, Fabiano Gonçalves dos

Tecnologias para internet II / Fabiano Gonçalves dos Santos.
Rio de Janeiro : SESES, 2018.
152 p: il.
isbn: 978-85-5548-565-7.
1. Javascript. 2. JQuery. 3. PHP Orientado a objetos. 4. PHP PDO.

I. SESES. II. Estácio.
cdd 467.8
Diretoria de Ensino — Fábrica de Conhecimento

Rua do Bispo, 83, bloco F, Campus João Uchôa
Rio Comprido — Rio de Janeiro — rj — cep 20261-063
Sumário
Prefácio 7
1. Linguagem Javascript 9
Programação cliente-servidor 11
Definição de DOM - Document Object Model 11
Incluindo Javascript em um documento HTML 14

Incluir vários arquivos .js em um documento 17
Usar referências externas com uma URL ou por meio de
um caminho relativo: 17
Criação de variáveis 18
Exibição de dados em Javascript 20

Exibição em documentos HTML 20
Uso do console.log() 22
Estruturas de decisão 23
O if 23
O switch 25
Estruturas de repetição 27
O while 27
O for 28
Vetor (Array) 30
Criação de vetor vazio 30
Acesso a elementos 31
Removendo elementos 31
JSON (Javascript Object Notation) 33

Criação de variáveis 33
Acesso a um elemento 34
Convertendo um JSON para um formato texto 34
Convertendo um JSON para um formato objeto 36
2. Biblioteca JQuery 39
JQuery 40
Instalação 41
Versões do JQuery 42
Seletores 43
Métodos e eventos 49
Travessia (DOM traversing) 52
3. Formulários em HTML5 com PHP 61

Formulários HTML5 62
A linguagem PHP 68
Criação de variáveis em PHP 68
Operadores 70
Aritméticos 70
Atribuição 70
Operadores de incremento/decremento 71
Lógicos 71
Variáveis Pré-definidas e recebimento de dados com

$_GET, $_POST, $_REQUEST 71
O método GET 72
O método POST 75
A variável $_REQUEST 77
Estruturas de decisão 78
Estruturas de repetição 79
Funções 81
Criando uma função em PHP 81
Passagem de parâmetros por referência 84
Valores padrão em funções 85
Arrays 86
Arrays numéricos 87
Arrays associativos 88
Arrays Multidimensionais 89
4. Programação orientada a objetos em PHP 93
Introdução 94
Classes e Objetos em PHP 95
Herança 98
Herança Simples 98
Herança multinível 101
Interfaces 103
Classes abstratas 104
Métodos “mágicos” 106

Construtores 107
Destrutores 109
__get() e __set() 110
__toString() 112
5. Integração de PHP com banco de dados 117

Introdução 119
Operações do cadastro 120

Conexão com o banco de dados 120
Entrada de dados 122
Script de consulta 125
Script de Alteração 128
Script de exclusão 131
Melhorando a aplicação 133
Considerações finais 144

Prefácio
Prezados(as) alunos(as),
O desenvolvimento de aplicações para internet pode ser feito de várias ma-

neiras. Atualmente existem muitos frameworks, técnicas e linguagens diferentes
que dificultam a nossa escolha de uma tecnologia. Entre elas, o conjunto HTML,
CSS, Javascript, JQuery e PHP (mais o banco de dados) é sem dúvida a escolha
mais popular, fácil de aprender e de implantar entre elas. Neste livro vamos in-
troduzir estes conceitos a você gradativamente até chegarmos a uma aplicação
completa envolvendo banco de dados com inclusão, consulta, edição e exclusão,
ou popularmente conhecido como CRUD.
Vamos usar o banco de dados MySQL, Bootstrap tendo como base o Apache,
fornecido pelo XAMPP.
Não temos o objetivo de esgotar o assunto neste livro. Mas vamos te dar fun-
damentos para aprender os conceitos e depois permitir que você tenha condições
de continuar suas pesquisas de forma a ampliar o conteúdo e conhecer frameworks
que envolvem este conteúdo e permitir que você ganhe mais produtividade no
desenvolvimento de aplicações para internet usando PHP.
Vamos estudar Javascript e JQuery que, juntos, formam uma base para criar
aplicações interativas no lado do cliente e depois PHP com orientação a objetos
e comunicação com banco de dados, fazendo a parte do lado do servidor, tendo
assim uma boa noção de aplicações cliente-servidor para internet.
Esperamos que goste, pois o material foi preparado com muito cuidado e
dedicação para que te inspire a continuar estudando.
Acompanhe os exercícios e exemplos do livro no seu computador nunca dei-
xando de praticar para poder absorver os conceitos mais rapidamente.
Bons estudos!
7
1
Linguagem
Javascript
Linguagem Javascript
Há alguns anos, um aluno me procurou com uma dúvida clássica de um
típico estudante de computação: “Professor, qual linguagem você aconselha para
estudar para poder programar para web? ” Eu não tive dúvida e frustrei o aluno ao
responder: “Javascript”. Ele estava certo que eu responderia Java, ou C#, ou C++
ou outra parecida. Eu acredito não ter errado na resposta, porque muito do que a
gente vê e estuda para internet tem algum tipo de relacionamento com Javascript.
A interatividade que vemos em sites como o Facebook, onde o simples “Curtir”
faz com que as letras mudem de estilo na hora, aparece um “joinha” e outros
efeitos estão baseados em Javascript. Bibliotecas como JQuery, AngularJS, Dojo
Toolkit, Umbrella e outras, são baseadas em Javascript e fazem muito sucesso entre
os desenvolvedores e empresas que trabalham para a internet.
Portanto, creio que não errei nas minhas previsões.
O Javascript permite que as páginas da web possam receber comportamentos
exclusivos. Recursos que a linguagem de marcação, HTML, e a linguagem de for-
matação, CSS, não fornecem. Portanto, aprender esse trio de linguagens é funda-
mental para qualquer programador atual. Neste capítulo vamos estudar um pouco
o Javascript, porém não esqueça que aqui estamos apresentando alguns pontos
importantes da linguagem. Não deixe de procurar bons sites de estudo, vídeos, e
outros materiais para ajudar a completar o seu treinamento (acho que esta frase é
do Yoda, em Star Wars não é?).
E estamos aqui para ajudá-lo nisso. Vamos lá, bons estudos!
OBJETIVOS
• Apresentar os conceitos de programação client-side e server-side;
• Apresentar as estruturas de programação em Javascript: sequência, repetição e decisão;
• Apresentar as formas de trabalhar com vetores em Javascript;
• Apresentar os conceitos e forma de trabalho com JSON.
capítulo 1 • 10
Programação cliente-servidor
Imagine a seguinte situação: você é um estudante e está querendo no momen-

to acessar o portal da faculdade para saber suas notas e frequência em uma certa
disciplina. Isso é super comum nos dias de hoje, não é? Nada mais prático, fácil e
até mesmo rápido conseguir essas informações.
Mas pense tecnicamente, o que houve nessa situação?
Observe a Figura 1.1.
USUÁRIO INTERNET SERVIDOR BANCO DE DADOS
Figura 1.1 – Exemplo de programação cliente-servidor.
O usuário está tentando localizar algum recurso ou serviço oferecido pelo

servidor. No nosso exemplo ele quer ver suas notas em uma disciplina. Portanto
por meio de um link na internet, ele acessa uma página que está no servidor da
faculdade. Nesta página, há um programa, ou script, que busca o banco de dados
onde estão as informações solicitadas pelo usuário. Uma vez encontradas, ou não,
uma resposta é gerada e enviada de volta para o servidor. O servidor por sua vez,
monta o HTML, e o devolve para o usuário via internet.
Podemos deduzir que houve um processamento no lado do servidor (buscar
as informações no banco de dados por exemplo) e outro no lado do usuário (fazer
a atualização da página por exemplo). Temos aqui um típico exemplo de um pro-
cesso cliente-servidor.
Existem vários outros exemplos sobre o relacionamento cliente-servidor.
Basicamente a internet inteira funciona desta forma.
Neste capítulo vamos estudar a parte cliente (client side) deste processo por
meio da linguagem Javascript.
Vamos começar com um conceito muito importante, o DOM (Document
Object Model).
Definição de DOM - Document Object Model
O DOM é um conceito muito importante para o Javascript. Com ele é pos-

sível acessar os elementos de uma página HTML e fazer mudanças como por
exemplo inserir outros elementos, mudar as propriedades de um elemento etc.
capítulo 1 • 11
O DOM antes de mais nada, é um padrão estabelecido pelo W3C (World
Wide Web Consortium) o qual define um modo de acessar os elementos de uma
página HTML. De acordo com o próprio W3C, o DOM é “uma plataforma e
uma interface neutra com relação a linguagens, a qual permite que programas e
scripts acessem e atualizem dinamicamente o conteúdo, a estrutura e o estilo de
um documento”.
Basicamente, toda página carregada em uma janela de um navegador pode ser
considerada como um objeto e, portanto, ela deve possuir atributos (ou elemen-
tos) e métodos. Um objeto de documento representa o documento HTML que é
exibido nessa janela. O objeto Document tem várias propriedades que se referem a
outros objetos que permitem o acesso e a modificação do conteúdo do documen-
to. Vamos esclarecer isso com um exemplo bem simples:
Sabemos que um script HTML tem o seguinte formato básico:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Título da Página</title>
5. </head>
6. <body>
7.
8. <p>Algum texto.</p>
9.
10. </body>
11. </html>
Em outras palavras, o DOM é a forma como o conteúdo de um documento é

acessado e modificado. Os objetos de um documento ficam organizados em uma
hierarquia. Esta estrutura hierárquica aplica-se à organização de objetos em um
documento da web.
A estrutura de um arquivo HTML é composta por tags que possuem uma
marcação inicial e uma final. Esta estrutura gera uma árvore de elementos que por
sua vez cria o modelo de objetos do documento. Desta forma, o trecho de código
HTML anterior gera a árvore de elementos:
capítulo 1 • 12
DOCUMENTO
DOCTYPE: <html>
ELEMENTO <head> ELEMENTO <body> ELEMENTO <p>
ELEMENTO <title> TEXTO: “Algum Texto”
TEXTO: “Título da Página”
Figura 1.2 – Modelo de objetos de documento (DOM).
O DOM é importante porque com ele é possível manipular os elementos

HTML e criar páginas mais interativas. No próximo capítulo vamos estudar o
JQuery e teremos uma noção maior do que é esta interatividade.
O DOM é dividido em 3 partes:
• Core DOM: é o modelo padrão para todos os documentos;
• XML DOM: padrão para documentos XML;
• HTML DOM: padrão para documentos HTML.
Você deve ter reparado que falamos algumas vezes a palavra “objeto”. Então, se
estamos falando de objetos, nos leva a lembrar da programação orientada a objetos
e lá temos o conceito de propriedades e métodos para cada objeto. Isto vai ocorrer
com o DOM também. No caso do HTML DOM, que é o que vamos estudar por
enquanto, os métodos são ações que podem ser feitas nos elementos HTML. Por
exemplo, é possível adicionar ou remover um elemento HTML com o Javascript,
como ocorre quando você faz um post no facebook: ou seja, o usuário clica em um
botão e uma caixa de texto aparece para ele inserir algum texto e depois salvar o
que foi escrito. Quando tratamos de propriedades são os valores dos elementos
HTML que podem ser usados ou modificados. Por exemplo, no Youtube existe o
famoso “joinha” que fica desabilitado, em uma cor diferente. O usuário clica no
“joinha” e ele muda de cor.
capítulo 1 • 13
São comportamentos muito comuns que fazemos quase todo dia e é uma
aplicação direta da manipulação do DOM de uma página. Veja o código a seguir
como exemplo:
1. <html>
2. <body>
3. <p id="Teste"></p>
4. <script>
5. document.getElementById("Teste").innerHTML = "Olá pessoal!";
6. </script>
7. </body>
8. </html>
No exemplo, perceba na linha 5 o uso do método getElementById() e da pro-

priedade innerHTML em ação.
Vamos, constantemente, ao longo deste livro voltar ao assunto do DOM de
uma maneira mais prática.
Incluindo Javascript em um documento HTML
A inclusão de código Javascript em um documento HTML é muito simples.

A inclusão é feita pela tag <script> e tudo que estiver dentro desta tag, até sua fina-
lização em </script> será considerado.
Você provavelmente vai encontrar na internet alguns tutoriais e leituras citando que a
tag <script> deve ser acompanhada de uma propriedade type. Assim:
<script type="text/javascript">
A propriedade type é opcional, pois Javascript é a linguagem de script padrão para uso
em HTML.
Podemos inserir o código Javascript em alguns lugares de um documento

HTML. Lembre-se que é possível inserir várias vezes a tag <script> no documento.
Os lugares que podem ser inseridos são:
• No cabeçalho ou no corpo do documento, ou seja, dentro da tag <head> ou
<body> ou nos dois simultaneamente. Observe o exemplo:
capítulo 1 • 14
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Minha página</title>
5. <script>
6. function funcaoX() { Dentro do <head>
7. ...
8. }
9. </script>
10. </head>
11. <body>
12.
13. <h1>Testando</h1>
14. <script>
15. function funcaoY() { Dentro do <body>
16. ...
17. }
18. </script>
19.
20. </body>
21. </html>
No exemplo anterior, perceba que a tag <script> pode ser usada tanto dentro
do <head> ou dentro do <body> ou nos dois lugares, simultaneamente ou não.
• Em arquivos externos: os scripts também podem estar fora do documento
HTML. Neste caso é criado um arquivo externo com a extensão .js e referenciado
no documento HTML.
Por exemplo, vamos criar um arquivo chamado meuScript.js com o seguin-
te conteúdo:
1. function funcaoX() {
2. ...
3. }
capítulo 1 • 15
Perceba a simplicidade do arquivo: trata-se de um arquivo texto comum (plain
text) salvo com o nome meuScript.js.
Em um documento HTML, precisamos referenciar este arquivo. Veja como
isto é feito no exemplo a seguir, especificamente na linha 4:
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <script src="meuScript.js"></script>
5. </body>
6. </html>
Observe que colocamos a tag <script> dentro do <body>. Poderia ter sido co-
locado dentro do <head> também. Ou se existir outro arquivo .js, poderia colocar
também dentro do <head> e <body> simultaneamente.
Temos que fazer algumas considerações a respeito da posição na qual a inclu-
são do Javascript será feita.
Em primeiro lugar, quando usamos arquivos externos, o script será executado
como se estivesse tomando lugar da sua referência. Ou seja. No exemplo anterior,
na hora da montagem da página HTML, o conteúdo do arquivo meuScript.js
substituirá a referência contida na linha 4. Portanto, se a referência estivesse no
<head>, seria executado lá, antes da montagem da página pela tag <body>.
Usar arquivos externos possui algumas vantagens que devem ser consideradas:
• Separa o código HTML do Javascript. Isto é ótimo para legibilidade e orga-
nização do código e do projeto. O projeto será melhor organizado se os seus scripts
estiverem em um diretório específico para tal.
• Como consequência da primeira vantagem, separar o código aumenta a
facilidade de manutenção do projeto
• Quando separamos o arquivo Javascript, podemos usar um recurso chama-
do cache e isto faz com que as páginas carreguem mais rapidamente.
Observe outras formas de usar arquivos Javascript dentro de um documen-

to HTML.
capítulo 1 • 16
Incluir vários arquivos .js em um documento
1. <script src="script1.js"></script>
2. <script src="script2.js"></script>
3. ...
4. <script src="scriptN.js"></script>
No exemplo anterior, os arquivos script1.js, script2.js etc. estão no mesmo di-

retório que o arquivo HTML que está os referenciando.
Usar referências externas com uma URL ou por meio de um caminho relativo:
Podemos, e isso é muito usado, referenciar uma URL completa para incluir
arquivos Javascript. Observe um exemplo real usando um caminho absoluto, de
uma URL:
60 <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
61 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
Figura 1.3 – Exemplo de inclusão de Javascript por meio de uma URL.
E agora um exemplo que usa o caminho relativo, de um diretório dentro da

pasta do projeto, chamado js:
64 <script src="js/jquery.validate.js"></script>
65 <script src="js/localization/messages_ptbr.js"></script>
66 <script src="js/site.js"></script>
Figura 1.4 – Exemplo de caminho relativo.
CONEXÃO
Um bom site para você aprender estas questões sobre o caminho dos arquivos é o
W3Schools. Apesar dele estar todo em inglês, a leitura é fácil e direta e ainda dá para traduzir
a página on line. Consulte o link a seguir para aprender mais sobre os caminhos:https://www.
w3schools.com/html/html_filepaths.asp.
capítulo 1 • 17
Sabemos que toda linguagem de programação possui alguns “pilares” que são
indispensáveis para se construir programas: estruturas sequenciais, de decisão, de
repetição, saber como usar vetores entre outras coisas. Porém, antes de entrar nes-
tes assuntos, especificamente, vamos aprender como fazer algumas tarefas básicas
em Javascript.
Criação de variáveis
A criação e o uso de variáveis em Javascript é extremamente simples. Javascript

é uma linguagem classificada como fracamente tipada. Estas linguagens têm
como característica principal não possuir a obrigatoriedade de se declarar um tipo
para uma variável. Sendo assim, o programador não tem que se preocupar com
o tipo das variáveis e nem como convertê-las dentro de um programa. Observe o
próximo exemplo.
1. //declaração de variáveis
2. var x, y;
3. x = 5;
4. y = 6;
5. var z = x + y;
Percebeu que para usar variáveis basta usar a palavra reservada var? As linhas 2
e 5 mostram isso. E mais, na linha 5 observa-se que além de declarar a variável z,
podemos usar as variáveis declaradas anteriormente em uma operação aritmética.
Além disso, o exemplo nos mostra como comentar linhas em Javascript. Você
vai perceber que a sintaxe é bem parecida com Java, C#, C++. É muito importante
você saber que apenas a sintaxe é parecida.
CURIOSIDADE
Qual o relacionamento entre a linguagem Java e a linguagem Javascript?
Resposta: nenhum, a não ser o nome parecido. É melhor o próprio site da linguagem Java
explicar isto para você.
Acesse o link: <https://www.java.com/pt_BR/download/faq/java_javascript.xml>.
capítulo 1 • 18
Outros pontos iniciais que devem ser observados em Javascript:
• Toda instrução (ou linha) termina obrigatoriamente com “;”. Também é
possível colocar várias instruções em uma só linha, desde que separadas por “;”;
• Os blocos de comandos em Javascript ficam entre chaves: { ... };
• Comentários de várias linhas funcionam como em Java, C++, C# etc.: /*
... */;
• Maiúsculas e minúsculas são diferenciadas em Javascript. Ou seja, Javascript
é case-sensitive;
• Os nomes de variáveis seguem as mesmas regras que as linguagens em
geral. Por exemplo, não é possível que uma variável comece com um número,
mas é possível começar com “_”, “$”. Palavras reservadas não podem ser usadas
como identificadores;
• O operador “=” serve para atribuição e não para comparação. Observe as
linhas 3, 4 e 5 do exemplo anterior;
• Em Javascript, uma variável identificada por nome, pode guardar tantos
valores numéricos quanto strings;
• Uma variável que não recebeu valor algum terá o valor undefined.
Observe os exemplos a seguir.
1. var pi = 3.14;
2. var pessoa = "Roberto Baratão";
3. var saudacao = 'Não agora';
4. var pessoa = "João Neve", aviao = "Airbus", altura = 175;
5. var temporada11;
Perceba que na linha 2 foi declarada uma string entre aspas duplas e na linha
3 a string foi declarada entre aspas simples. Ou seja, Javascript permite estas duas
formas de uso.
Na linha 4 perceba que várias variáveis foram declaradas na mesma linha se-
paradas por vírgula.
A variável temporada11 como não foi iniciada, possui o valor undefined.
Continuando com operações básicas em Javascript, vamos aprender como
mostrar dados e criar saídas de informações.
capítulo 1 • 19
Exibição de dados em Javascript
Basicamente é possível mostrar dados em Javascript de duas formas principais:

• Em documentos HTML;
• Pelo console do navegador.
Exibição em documentos HTML
Dentro desta opção é possível mostrar dados de algumas maneiras diferentes.

Veja os exemplos:
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <p>Testando</p>
5. <p id="elem"></p>
6. <script>
7. document.getElementById("elem").innerHTML = 5 + 6;
8. </script>
9. </body>
10. </html>
Exemplo 1: Uso do innerHTML.
No exemplo 1 foi usado o método getElementById() e a propriedade innerHTML.

Alterar a propriedade innerHTML de um elemento HTML é uma das formas
de exibir dados em HTML, pois esta propriedade permite que um conteúdo seja
definido para um elemento da página. No caso, foi criado um parágrafo na linha 5
com um id para ele chamado “elem”. O script das linhas 6 a 8 acessam o elemento
pelo id “elem” e inserem um código HTML com o resultado da soma entre 5 e 6.
Outra forma de exibição é por meio do método document.write(). Esta forma
é muito útil para testes. Veja o exemplo 2 e a linha 6. O método vai inserir o valor
11 após o parágrafo definido na linha 4.
1. <!DOCTYPE html>
2. <html>
3. <body>
capítulo 1 • 20
4. <p>Testando</p>
5. <script>
6. document.write(5+6);
7. </script>
8. </body>
9. </html>
Exemplo 2: document.write().
Observe o exemplo 3. O document.write() aparece após o carregamento da

página e quando isso ocorre, todo o conteúdo da página será apagado e depois o
valor será exibido.
1. <!DOCTYPE html>
2. <html
3. <body>
4. <p>Testando</p>
5. <button onclick="document.write(5 + 6)">Me clica!</button>
6. </body>
7. </html>
Exemplo 3: document.write() após o HTML.
A última forma de exibir dados em um documento HTML é usar a função

alert() do Javascript, mostrada no exemplo 4:
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <p>Testando</p>
5. <script>
6. window.alert(5 + 6);
7. </script>
8. </body>
9. </html>
Exemplo 4: função alert().
capítulo 1 • 21
A função alert(), como o nome sugere, mostra uma pequena janela de alerta
no navegador do usuário e pode ser muito útil para fazer o debug de programas
em Javascript.
Figura 1.5 – Resultado da saída dos exemplos.
A figura 1.5 mostra o resultado dos exemplos que acabamos de estudar.

Observe que o uso do document.write() limpa a tela após o clique do botão na
figura central. A figura à direita é o resultado do alert() mostrado no exemplo 4.
Uso do console.log()
Esta forma é indispensável para o debug dos seus programas e de sites que
você deseja inspecionar o código.
Observe o código a seguir.
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <script>
5. console.log('Testando 5 + 6 = ',5+6);
6. </script>
7. </body>
8. </html>
Como podemos observar, não haverá saída alguma na tela do navegador do

usuário. Porém, a linha 5 gera uma mensagem em um local chamado de console do
navegador. Este console é acessado geralmente pela tecla F12 dos navegadores mais
conhecidos e uma vez acionada, ela abre uma ferramenta chamada Ferramentas do
capítulo 1 • 22
Desenvolvedor. Como o nome sugere, esta ferramenta habilita um conjunto de apli-
cativos que ajudam o programador a verificar erros, eventos, variáveis, parâmetros
trocados entre o servidor e cliente, entre outras atividades. Uma delas é um console
onde mensagens de erro são exibidas além de outras informações e é neste console
que vamos mostrar valores de variáveis que gostaríamos de inspecionar.
Figura 1.6 – Console do navegador Mozilla Firefox.
A figura 1.6 mostra um pedaço das ferramentas do desenvolvedor do Mozilla

Firefox. Perceba que na figura o Console está selecionado e há uma mensagem
avisando o usuário sobre a codificação da página e o nosso código sendo mostrado.
O console de fato é muito útil porque é um espaço onde podemos verificar o valor
de variáveis e execução de programas sem interferência no que é mostrado na tela.
Vamos ter outros exemplos que vão usar o console ao longo do livro.
Estruturas de decisão
Como já sabemos, as estruturas de decisão são aquelas nas quais condições

devem ser verificadas para a continuação do fluxo do programa.
Basicamente o Javascript possui dois tipos principais:
• O if (se) e seus derivados (if-else e if-else-if);
• E o switch.
Vamos começar pelo if.
O if
Como já comentamos sobre a semelhança da sintaxe do Javascript com ou-

tras linguagens, o if segue o mesmo raciocínio. Vamos aprender por meio de
um exemplo:
1. if (idade >= 16) {

2. mensagem = "Você pode votar";
3. }
capítulo 1 • 23
É bem provável que é idêntico aos outros ifs de outras linguagens que você co-
nhece. Lembre-se que o if é sempre escrito em letras minúsculas obrigatoriamente
e a condição sempre colocada dentro de parênteses.
O else é igual às outras linguagens, perceba:
1. if (idade >= 16) {

3. }
4. else {
5. mensagem = "Você ainda não pode votar";
6. }
A última variação do if é o if-else-if. Observe o exemplo a seguir.
1. if (idade >= 16) {

3. }
4. else if (idade >=18){
5. mensagem = "Você tem que votar obrigatoriamente";
6. }
7. else {
8. mensagem = "Você não pode votar";
9. }
Assim como os outros exemplos, não há mistério: a sintaxe é semelhante aos

outros else if que você deve conhecer. Apenas para relembrar você, o último exem-
plo avalia a variável idade, declarada e iniciada em outra parte do código. Se o
valor da variável for 17, a mensagem “Você pode votar” será exibida. Se o valor for
19, a mensagem não satisfaz a condição da linha 1 e entra no else da linha 4 onde
o valor é novamente avaliado. Como o valor da idade agora é 19, o valor satisfaz a
condição e a mensagem “Você tem que votar obrigatoriamente” é mostrada. Se o
valor da idade for 14, nem a condição da linha 1, nem a condição da linha 4 são
satisfeitas, logo, a mensagem “Você não pode votar” será exibida.
O próximo comando de avaliação de condições é o switch.
capítulo 1 • 24
O switch
Como você já deve saber, o switch é usado para realizar ações diferentes basea-
do em várias condições, ou seja, ele é usado para selecionar um de vários blocos de
código. Lembre-se que:
• A expressão do switch é avaliada somente uma vez;
• O valor da expressão é comparado com os valores de cada case;
• Se há alguma correspondência, o bloco associado é executado. Senão, o
bloco default será executado.
Vamos analisar o seguinte exemplo:
1. switch (new Date().getDay()) {

2. case 0:
3. dia = "Domingo";
4. break;
5. case 1:
6. dia = "Segunda";
7. break;
8. case 2:
9. dia = "Terça";
10. break;
11. case 3:
12. dia = "Quarta";
13. break;
14. case 4:
15. dia = "Quinta";
16. break;
17. case 5:
18. dia = "Sexta";
19. break;
20. case 6:
21. dia = "Sábado";
22. }
capítulo 1 • 25
Na linha 1 foi usado o método getDay() da classe Date do Javascript. Como
você já pode ter imaginado, este método retorna e nos dá o número do dia da
semana baseado na data atual, no formato numérico, sendo que “0” é o número
para o Domingo.
Baseado no retorno deste método, temos o switch que se comportará da mes-
ma maneira que o switch do PHP, Java, C++ etc.
Caso o dia da semana seja 4, após a avaliação dos case 0, 1, 2 e 3, o case da li-
nha14 será satisfeito e as instruções das linhas 15 e 16 serão executadas. Observe o
uso do break após cada case. O break economiza muito tempo de execução porque
ele "ignora" a execução de todo o resto do código no bloco switch.
No exemplo anterior, não usamos o default, que é o comando usado para exe-
cutar o código quando nenhum case é executado. Eis um exemplo simples:

2. case 6:
3. msg = "Hoje é sábado";
4. break;
5. case 0:
6. msg = "Hoje é domingo";
7. break;
8. default:
9. msg = "Esperando pelo fim de semana";
10. }
Veja que o exemplo apenas trata os valores “6” e “0”. Caso o dia da semana
seja “Quarta”, o default é que será executado e mostrará a mensagem: “Esperando
pelo fim de semana”. Um detalhe importante e que normalmente não encontra-
mos nos materiais e tutoriais que encontramos na internet, é que o default não
precisa ser necessariamente o último comando de um bloco switch. No exemplo
anterior, ele poderia estar localizado na linha 2 no lugar do “case 6”.
Para finalizar, o último exemplo também é “esquecido” pelos programadores
em geral. Trata-se de usar vários case para executar os mesmos comandos. Observe
o exemplo a seguir, especialmente as linhas 2-3 e 6-7.
capítulo 1 • 26
2. case 4:
3. case 5:
4. msg = "O fim de semana está chegando";
5. break;
6. case 0:
7. case 6:
8. msg = "Fim de semana chegou!";
9. break;
10. default:
11. msg = "Esperando o fim de semana";
12. }
Após ver como as estruturas de decisão se comportam em Javascript, vamos

agora a outro pilar da programação estruturada: as estruturas de repetição.
Estruturas de repetição
Assim como as estruturas de decisão em Javascript são semelhantes às estrutu-

ras de outras linguagens, as estruturas de repetição seguem a mesma semelhança.
O Javascript nos apresenta dois tipos de comandos de repetição: o while e seus
variantes e o for e seus variantes.
O while
O while é o tipo de repetição usada quando não sabemos exatamente quantas

repetições o bloco terá. O bloco de comandos será executado enquanto uma con-
dição for verdadeira.
Novamente, a sintaxe é igual a maioria das linguagens mais populares. Observe
o exemplo a seguir. Lembre-se sempre de iniciar a variável que controla o loop para
evitar loops infinitos.
1. var contador = 0;
2. while (i < 10) {
3. msg += "O número é " + i;
4. i++;
5. }
capítulo 1 • 27
Uma variação do while é o do-while. Esta variação permite que o loop seja exe-
cutado pelo menos uma vez para que no final do bloco a condição seja avaliada.
Veja o exemplo a seguir. Ele fará 10 repetições assim como o exemplo do while,
certo? Lembre-se sempre de incrementar a variável de controle do loop.
1. var contador = 1;
2. do {
3. Console.log("Contador: " + contador);
4. contador++;
5. } while (contador < 11);
O for
O for normalmente é usado para as situações onde conhecemos bem a quanti-

dade de vezes que um determinado bloco de comandos precisa ser repetido.
A seguir temos um exemplo do comando. Neste exemplo vamos colocar um
pouco mais de código Javascript para você se acostumar cada vez mais rápido.
1. <script>
2. var contador;
3. document.write("Iniciando o Loop" + "<br />");
4. for(contador = 0; contador < 10; contador++){
5. document.write("Contador: " + contador );
6. document.write("<br />");
7. }
8. document.write("Loop finalizado!");
9. </script>
A sintaxe é idêntica à sintaxe do Java, C# e outras. Observe que o loop se en-

contra entre as linhas 4 a 7. É bom lembrar que o for possui 3 partes que precisam
estar bem configuradas para que o comando seja executado corretamente. Além
disso, lembre-se que o loop pode ser decrescente ou até mesmo ter um passo dife-
rente de 1. Observe a sua sintaxe.
for (início; condição de teste; iteração){

comandos a serem executados enquanto a condição for verdadeira
}
capítulo 1 • 28
Existe uma variação muito útil do for. Em Javascript é o comando for-in mas
em outras linguagens ele é conhecido como foreach. Ele é usado quando uma
coleção de termos de um objeto precisa ser percorrida. Ele é muito usado quando
usamos vetores (arrays) e precisamos percorrer o vetor e processar elemento por
elemento. Veja o exemplo:
1. <!DOCTYPE html>
2. <html>
3. <body>
4. <button onclick="funcaoX()">Clique aqui</button>
5. <p id="teste"></p>
6. <script>
7. function funcaoX() {
8. var pessoa = {nome:"Joao", sobrenome:"Neve", idade:25};
9. var msg = "";
10. var x;
11. for (x in pessoa) {
12. msg += pessoa[x] + " ";
13. }
14. document.getElementById("teste").innerHTML = msg;
15. }
16. </script>
17. </body>
18. </html>
Figura 1.7 – Exemplo do for-in.
capítulo 1 • 29
Embora o visual do resultado seja muito simples, o programa percorreu o
vetor pessoa e com o uso do for na linha 11, imprimiu na tela todos os valores de
pessoa: “Joao”, “Neve” e “25”.
Vetor (Array)
Os vetores em Javascript também são bem parecidos com os vetores que você
já deve conhecer de outras linguagens. Lembre-se que os vetores são estruturas de
dados que armazenam valores, todos do mesmo tipo, ao mesmo tempo e cujos
valores são acessados por meio de um índice normalmente numérico.
CONCEITO
Em algumas linguagens existe o conceito de vetor associativo, no qual os índices não
são necessariamente numéricos podendo ser letras ou outras formas. Veja o exemplo em
PHP a seguir.
1.<?php
2.$doc = array();
3.$doc['rg'] = "00.000.000-X";
4.$doc['cpf'] = "000.000.000-00";
5.$doc['cartao de credito'] = 12345;
6.?>
Perceba que os índices do exemplo são “rg”, “cpf” e “cartão de crédito”.
Criação de vetor vazio
É super simples! Para criar um vetor com nome vet sem nenhum elemento,
faça assim:
var vet = new Array();
E para criar um vetor vet com 5 posições ainda vazio, o comando é:
var vet = new Array(5);
capítulo 1 • 30
0 1 2 3 4
vet
Figura 1.8 – Representação gráfica do vetor vet com 5 posições, porém sem valores.
Acesso a elementos
O acesso aos elementos de um vetor é feito por meio dos seus índices.
Para colocar valores no vetor vet criado no último exemplo, existem várias
formas. Uma delas é acessar as posições do vetor para inserir os valores que de-
sejamos. Veja o próximo exemplo onde para cada posição do vetor foi inserido
um valor.
vet[0] = 1;
vet[1] = 1; 0 1 2 3 4
vet[2] = 2; vet 1 1 2 3 5
vet[3] = 3;
vet[4] = 5;
ACESSO ÀS POSIÇÕES DO VECTOR POR MEIO DOS ÍNDICES
Figura 1.9 – Acesso a elementos do vetor.
Portanto, para acessar e manipular os valores de um vetor usamos os índices

dentro de colchetes, assim como ocorre na maioria das linguagens de programação.
Removendo elementos
Por incrível que pareça, remover elementos de um vetor não é uma tarefa
trivial quanto parece. A linguagem Javascript fornece algumas formas para esta
tarefa.
Uma das formas é usar uma função encontrada em outras linguagens chamada
pop() a qual remove e nos devolve o último elemento de um vetor. Vamos usar o
vetor vet definido anteriormente como exemplo.
1. var vet=[1,1,2,3,5];
2. var elem = vet.pop();
capítulo 1 • 31
Perceba que inicializamos o vetor vet de uma maneira diferente da qual está-
vamos fazendo até então na linha 1.
A linha 2 contém uma variável elem que vai receber o valor 5 devido ao uso
da função pop(). Após a execução desta função, o vetor vet conterá os elementos
[1,1,2,3]. Lembre-se que a função pop() retira o último elemento do vetor. Mas e
se quisermos remover o primeiro? Usaríamos a função shift(). Observe o exemplo:
1. var cores = ["Verde", "Amarelo", "Azul", "Branco"];

2. cores.shift(); // Remove o primeiro elemnto do vetor cores.
O vetor passa a ser ["Amarelo","Azul","Branco"]
Outra forma de remover elementos de um vetor em Javascript é usar a função

splice(). Esta função realiza um corte no vetor e remove os itens desejados. Ela também
pode ser usada para inserir valores. Observe o exemplo para você entender melhor.
1. var cores = ["Verde", "Amarelo", "Azul", "Branco"];

2. cores.splice(2,2);
3. // Na posição 2 do vetor, remova 2 itens
4. // O vetor passa a ser ["Verde", Amarelo"]
A função splice() possui a seguinte sintaxe:
vetor.splice(índice, número_elementos, item1, ..., itemN)
Somente o primeiro parâmetro (índice) é obrigatório. Os outros são opcionais.

O parâmetro índice indica em qual posição do vetor a função será aplicada. O pa-
râmetro número_elementos especifica quantos elementos serão removidos. Se for 0,
nenhum elemento será removido. Item1, ..., ItemN são os elementos que serão adi-
cionados, quando a função splice() estiver sendo usada para adicionar itens no vetor.
REFLEXÃO
Procure associar o nome das funções com o seu propósito:
pop(): é uma tradução para desempilhar, ou seja, numa estrutura de dados pilha, sempre
o último elemento será retirado.
shift(): é o mesmo que deslocar. Se um elemento será retirado da primeira posição, os
outros seguintes serão deslocados para que o vetor mantenha os índices.
capítulo 1 • 32
splice(): é o mesmo que cortar. Neste caso, o corte pode ser feito dentro de um vetor em
uma determinada posição.
Por enquanto vamos dar uma pausa na sintaxe e funções do Javascript e va-
mos aprender sobre um conceito muito importante da programação para internet
atual, o JSON.
JSON (Javascript Object Notation)
Hoje em dia, na internet, ocorrem muitas trocas de informações entre clientes

e servidores. Mas você já parou para pensar em como estas trocas de informações
são feitas? Será que tanto o cliente quanto o servidor não precisam ter alguns
padrões para poder entender o que está indo de um lado para outro. Sim, é claro
que sim. Um destes padrões de trocas de dados, principalmente no que se refere a
arquivos é o formato JSON.
JSON é a sigla para Javascript Object Notation (Notação de objetos Javascript)
e na prática é um arquivo formato de texto escrito em uma notação específica de
Javascript. É possível converter qualquer objeto Javascript no formato JSON e
enviar para o servidor. Da maneira contrária, recebemos o JSON do servidor e
convertemos os dados em objetos Javascript.
Vamos estudar alguns tópicos para entender melhor este conceito.
Criação de variáveis
A criação de um objeto em Javascript é bem simples. Os objetos JSON são

escritos em um formato chave/valor e sempre entre chaves. As chaves podem ser
strings e os valores devem ser em algum formato de tipo de dados válido em
Javascript (número, objeto, vetor, booleano ou null). Vamos ver um exemplo.
CHAVES
var livro1 = {"nome":"Iracema", "autor":"José de Alencar", "editora":null}
NOME DO OBJETO VALORES NOME DO OBJETO
Figura 1.10 – Objeto em Javascript.
capítulo 1 • 33
Veja a criação de outro objeto:
var livro2 = {"nome":"Vidas Secas", "autor":"Graciliano Ramos",

"editora":"ABC"}
Portanto, como podemos perceber, podemos criar objetos da mesma maneira

que criamos variáveis, porém quando for objetos devemos obedecer a estes peque-
nos detalhes observados na figura 1.10 e no exemplo anterior.
Acesso a um elemento
O acesso a um elemento de um objeto Javascript é feito pelo operador “ponto” (.)

após o nome da variável objeto. Vamos supor que seja necessário inserir um valor para
o campo “editora” do objeto livro1. A atribuição é feita na linha 2 do exemplo a seguir.
1. var livro1 = {"nome":"Iracema", "autor":"José de Alencar",

"editora":null};
2. livro1.editora = "Editora XYZ";
Neste caso estamos inserindo um valor no objeto. Se precisarmos obter o valor

armazenado, usamos o “ponto” após o objeto e atribuímos o valor a uma variável.
Por exemplo:
var qualLivro = livro1.nome; //livro1.nome = “Iracema”
Convertendo um JSON para um formato texto
Um servidor normalmente manda suas informações para um cliente no for-

mato JSON. Quando isso ocorre, temos que transformar o JSON em um formato
possível de ser manipulado dentro das aplicações.
Vamos supor que o servidor dos Correios, por meio de um webservice exija que
os dados sejam enviados no seguinte formato para um dado endereço:
{"logradouro":"Rua Abrahão Issa Halach","número":"980", "bairro":

"Ribeirânia", "cidade":"Ribeirão Preto", "estado":"SP", "cep":"14096-160"}
capítulo 1 • 34
Muitas vezes, a forma de apresentar um objeto JSON obedece ao seguinte formato para
ficar mais legível:
{
"logradouro": "Rua Abrahão Issa Halach",
"número": "980",
"bairro": "Ribeirânia",
"cidade": "Ribeirão Preto",
"estado": "SP",
"cep": "14096-160"
}
A transformação deste formato para o formato de texto é feito pela função

stringfy(). Esta função retorna uma string a qual pode ser enviada para o servidor.
Observe a sua forma de uso:
var obj = JSON.stringfy('{"logradouro":"Rua Abrahão Issa

Halach","número":"980", "bairro":"Ribeirânia", "cidade":"Ribeirão
Preto", "estado":"SP", "cep":"14096-160"} ');
CONEXÃO
É sempre importante verificar se o formato JSON que está sendo enviado ou recebido
está no formato correto. Existem vários verificadores na internet disponíveis e gratuitos. Um
deles é o JSONLint <https://jsonlint.com>. Se o formato de envio ou recebimento estiverem
incorretos, o Javascript gerará um erro de sintaxe.
Vamos a um exemplo:
var obj = { "logradouro":"Rua Abrahão Issa Halach","número":"980",

"bairro":"Ribeirânia", "cidade":"Ribeirão Preto", "estado":"SP",
"cep":"14096-160"};
var teste = JSON.stringify(obj);
// teste = {"logradouro":"Rua Abrahão Issa

Halach","número":"980","bairro":"Ribeirânia","cidade":"Ribeirão
Preto","estado":"SP","cep":"14096-160"}
capítulo 1 • 35
Convertendo um JSON para um formato objeto
A transformação deste formato para o formato de texto é feito pela função

parse(). Observe a sua forma de uso:
var obj = JSON.parse('{"logradouro":"Rua Abrahão Issa

Halach","número":"980", "bairro":"Ribeirânia", "cidade":"Ribeirão
Preto", "estado":"SP", "cep":"14096-160"} ');
No exemplo anterior, após o parse(), podemos acessar os elementos do JSON

da seguinte forma:
var endereco = obj.logradouro + “,” + obj.numero ;

// endereço = Rua Abrahão Issa Halach, 980
Por enquanto para o capítulo inicial está bom. Vamos voltar a estes assuntos
de uma maneira mais aplicada posteriormente.
ATIVIDADES
01. Qual é a sintaxe correta para chamar uma referência a um script externo chamado
"xxx.js"?
02. Como escrever “Alô Mundo” em uma caixa de alerta?
03. Assinale a alternativa correta sobre a sintaxe do comando for.

a) for i = 1 to 5
b) for (i = 0; i <= 5)
c) for (i <= 5; i++)
d) for (i = 0; i <= 5; i++)
04. Qual é o jeito correto de escrever uma condição no qual “i não seja igual a 10” ?
a) if (i != 10)
b) if (i <> 10)
c) if i =! 10 then
d) if i <> 10
capítulo 1 • 36
05. Crie um botão em html que ao ser clicado, chama uma função em JavaScript que abre
uma janela com a mensagem "Olá mundo". O código em Javascript deverá ser criado em um
arquivo externo. No arquivo em JavaScript, insira o seguinte comentário:
"Função criada em um arquivo externo que mostra uma mensagem".
REFERÊNCIAS BIBLIOGRÁFICAS
DEITEL, P. J. Ajax: Rich Internet Applications e desenvolvimento Web para. São Paulo: Pearson, 2008.
LAWSON, B. Introdução ao HTML 5. Rio de Janeiro: Alta Books, 2011.
SILVA, M. S. JavaScript - Guia do Programador. São Paulo: Novatec, 2010.
W3SCHOOLS. Javascript Tutorial. W3Schools. Disponivel em: <https://www.w3schools.com/js/
default.asp>. Acesso em: 01 jun. 2017.
capítulo 1 • 37
capítulo 1 • 38
2
Biblioteca JQuery
Biblioteca JQuery
O desenvolvimento de software para web é marcado por uma característica pe-
culiar: é desejável que o programador saiba HTML, CSS e Javascript, pelo menos.
E conforme o número de projetos aumenta, bem como a experiência e o uso, é
natural que o programador comece a colecionar conjuntos ou pedaços de códigos
que são reutilizados em outros projetos.
Algumas empresas entendem esta característica e acabam criando bibliote-
cas úteis para os desenvolvedores. Algumas bibliotecas se tornam mais robustas
e consistentes, além de ser usada por grandes empresas e aí acabam se tornando
referência para os desenvolvedores.
Esta é basicamente a história, muito breve, do Jquery, criada em 2006 e mui-
to usada até hoje. Segundo a wikipedia, 77% dos 10000 sites mais usados no
mundo usam a biblioteca. É um número bem expressivo e certamente você não
pode deixar de aprendê-la, pois certamente vai trabalhar em um projeto que usa o
(ou “a”) Jquery. Vamos estudar um pouco dela neste capítulo.
OBJETIVOS
• Conhecer os principais tópicos da biblioteca Jquery;
• Aprender a incluir a biblioteca nos sites que você desenvolverá;
• Aprender a usar os seletores e eventos da biblioteca.
JQuery
A linguagem Javascript tem sido usada cada vez mais para deixar as aplicações
web mais interativas e amigáveis para o usuário.
No facebook por exemplo, quando a gente curte um post, vemos que imedia-
tamente temos uma indicação que houve a curtida. Isso é muito natural e nem
damos conta da tecnologia que está por trás disso. Há alguns anos isso não era
feito tão interativamente assim.
Na nossa vida de programador e engenheiro de software, ao longo do tempo
vamos criando componentes de software reutilizáveis, isto é natural e muito prati-
cado nas empresas.
capítulo 2 • 40
Com o JQuery ocorreu o mesmo. O JQuery, ou "a" JQuery, é uma biblioteca
escrita em Javascript cheia de componentes reutilizáveis que vão deixar nossas apli-
cações web mais fáceis de serem desenvolvidas e mais produtivas. Ela foi criada em
2006 e tinha um slogan muito apropriado: "Write less, do more" (Escreva menos,
faça mais).
A JQuery simplifica muitas coisas como animações, tratamento de eventos e
interações Ajax para o desenvolvimento rápido de aplicações web.
A seguir estão listadas as características mais importantes da biblioteca:
• Manipulação do DOM: JQuery manipula facilmente os elementos DOM
por meio da modificação dos seus valores, usando um "motor" chamado Sizzle.
JQuery facilita;
• Encontra elementos dentro de um documento html;
• Mudar os elementos html;
• "Escutar" o que o usuário faz e reagir a essas ações de acordo com o que
foi feito;
• Animar o conteúdo de uma página;
• Comunicar com o servidor para receber conteúdo;
• Tratamento de eventos: com as funções pré-definidas em JQuery, o tra-
tamento de eventos como clique do mouse fica facilitado, pois não é necessário
mexer no código HTML com os manipuladores de eventos;
• Suporte a AJAX;
• Animações: JQuery tem várias funções e efeitos específicos para criar ani-
mações e interatividades nos sites;
• É leve: quando incluída na página, JQuery vai ocupar cerca de 19Kb na sua
versão minimizada;
• É independente de browser: JQuery tem suporte em vários browsers como
IE 6.0+, FF 2.0+, Safari 3.0+, Chrome e Opera 9.0+;
• Tecnologia: JQuery usa os seletores de CSS3 e sintaxe XPath.
** Definir o que é XPath **
Instalação
JQuery pode ser incluído em um documento HTML basicamente por meio

de duas formas: por meio de uma instalação local ou por meio do vínculo a al-
gum CDN.
capítulo 2 • 41
A instalação local é feita por meio do download de alguns arquivos onde é
possível inclui-los na instalação local do site. Você já deve ter uma noção da di-
ferença entre incluir bibliotecas locais e importá-las de um local externo. Instalar
localmente permite que seu site possa funcionar independente de um local exter-
no o qual pode estar offline. Por exemplo, em alguns ambientes empresariais, pode
existir uma intranet na qual não seja possível o acesso à web externa. Neste caso,
se a intranet for usar os recursos da JQuery, a única alternativa é ter os arquivos da
JQuery no próprio servidor, localmente.
Para fazer a instalação da JQuery localmente, é necessário fazer o download da
biblioteca do site da JQuery pelo link <http://jquery.com/download/>.
A figura 2.1 mostra uma sugestão para estruturar os diretórios de um site. A
organização dos diretórios de um site varia de acordo com diversos fatores: orga-
nizacionais, devido ao framework, preferências pessoais etc. A estrutura da figura
reserva um diretório para os arquivos javascript (js) e dentro dele separa um dire-
tório exclusivo para o Jquery. Este, portanto, é um exemplo de importação local
dos arquivos.
Figura 2.1 – Exemplo de estrutura de diretórios de um site.
Versões do JQuery
No link de download você vai encontrar várias versões da biblioeca JQuery.

É importante observar a versão que você vai baixar. Normalmente no desenvol-
vimento de sites modernos, a JQuery vai ser usada com outras bibliotecas, por
exemplo, o Bootstrap. Portanto, nem sempre a versão mais nova é a mais indicada
para fazer o download, pois ela pode ser incompatível com as outras bibliotecas
presentes no seu projeto. Logo, leia com atenção as documentações das bibliotecas
que você está usando no projeto para não ter problemas de compatibilidade.
capítulo 2 • 42
Além de fazer o download normal do JQuery é possível fazer usando alguns ge-
renciadores de pacotes como o NPM ou o Bower. Estes gerenciadores de pacotes
pertencem a outras tecnologias as quais não vamos abordar aqui.
• Versão baseada em CDN (Content Delivery Network - Rede de Entrega
de Conteúdos): a JQuery nesta forma é incluída externamente por meio de uma
URL. Existem algumas vantagens ao usar um CDN;
• Download feito em paralelo;
• O navegador pode já ter o arquivo em cache (se o usuário esteve em outro
site que utiliza o mesmo CDN);
• Não irá consumir o trafego do seu servidor;
• CDN’s como do Google, Microsoft e Amazon, costumam ter ótima latên-
cia e taxa de transferência;
• CDN’s grandes tem menos chance de ser infectados com malwares;
E é claro, tem algumas desvantagens:

• Você não tem controle sobre o conteúdo do arquivo quando referencia um
servidor remoto;
• Se o CDN tirar o arquivo do ar ou estiver indisponível (manutenção), isso
vai impactar no seu site. Isso também vai ocorrer se a conexão com internet do seu
host estiver interrompida;
• Usar um CDN não confiável poderá tornar seu site perigoso para os usuá-
rios que estão visitando.
Portanto, agora você tem uma escolha a fazer no seu projeto: local ou remoto.
Essa decisão vai depender do projeto, de onde o site ficará armazenado, da latên-
cia, de cache e outros elementos que você julgar relevante.
Seletores
O Jquery usa muito bem os seletores de CSS para também acessar os elemen-
tos DOM de um documento, de uma maneira fácil e rápida.
A principal regra é usar a função jQuery() ou também conhecida como $()
(esta é a forma que você vai encontrar na grande maioria das pesquisas que você
fizer na internet e é também a maneira preferida para usarmos Jquery). O $() é a
maneira resumida de usar a função.
capítulo 2 • 43
Temos algumas formas de selecionar os elementos do DOM em Jquery:
Seleciona os elementos de um documento pelo nome da tag.

NOME DA TAG Por exemplo: $(“p”) vai selecionar todos os parágrafos <p> do
documento.
Seleciona os elementos de um documento por meio do seu id.

ID DA TAG Por exemplo, $(“#nome”) vai selecionar todos os elementos que
id=”nome”
Seleciona os elementos de um documento por meio da sua clas-

CLASSE DA TAG se. Por exemplo, $(“.intro”) vai selecionar todos os elementos
que estão formatados com a classe “intro”, ou class=”intro”
Como podemos perceber, o $(“__”) representa o seletor do Jquery e depen-

dendo do parâmetro que estivermos passando, ele vai “pegar” elementos diferentes
do documento.
É melhor mostrar por meio de um exemplo.
Vamos criar uma página bem simples, sem maiores preocupações com forma-
tação para poder entender melhor como selecionar os elementos de acordo com
os parâmetros.
A página a ser usada como exemplo está mostrada na figura 2.2. Ela poderia
ser uma página de produtos de um site de uma loja de aeromodelos.
Figura 2.2 – Página exemplo.
capítulo 2 • 44
O código fonte da figura 2.2 está mostrado a seguir.
3. <!DOCTYPE HTML>
4. <html>
5. <head>
6. <meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
7. <link rel="stylesheet" href="estilos.css">
8. <script src="https://ajax.googleapis.com/ajax/libs/
jquery/3.2.1/jquery.min.js"></script>
9. <title>Testando</title>
10. </head>
11. <body>
12. <div id="anuncios">
13. <h1>Produtos</h1>
14. <ul>
15. <li class="produto">
16. <img src="aero1.png">
17. <h2>Cherokee</h2>
18. <span class="preco">$20.00</span>
19. <button class="reserva">Reservar</button>
20. </li>
23. <h2>Ipanema</h2>
26. </li>
29. <h2>AT-6</h2>
32. </li>
33. </ul>
34. </div>
35. </body>
36. </html>
capítulo 2 • 45
Percebemos que na linha 6 optamos por incluir o arquivo do Jquery por meio
de um CDN, neste caso hospedado nos servidores da Google. Sem esta inclusão
não será possível usar o Jquery. Não esqueça que podemos também inserir o ar-
quivo do Jquery localmente.
Também temos um arquivo CSS referenciado na linha 5 (estilos.css). O códi-
go deste arquivo está mostrado a seguir.
1. li.produto {
2. width: 250px;
3. display: inline-block;
4. vertical-align: top;
5. }
6.
7. .reserva {
8. display: block;
9. }
Com o arquivo CSS, conseguimos fazer com que a lista não ordenada (<ul>)
e seus itens (<li>) sejam apresentados horizontalmente, além de outras formata-
ções básicas.
Neste ponto, poderíamos começar a usar os seletores. Porém, é muito impor-
tante que o programador conheça, além do HTML e CSS, a estrutura DOM da
página. Fica mais fácil selecionar os elementos com o conhecimento do DOM.
Dica: Os navegadores mais usados pelos desenvolvedores, como o Google Chrome e

Mozilla Firefox possuem uma ferramenta interna a qual é bem interativa e permite que o
deenvolvedor possa navegar pelos nós do DOM. Normalmente esta ferramenta é exe-
cutada pelo acionamento da tecla F12 e em cada navegador possui um nome diferente:
Web Developer no Firefox, Ferramentas do Desenvolvedor no Chrome.
Usando o Web Developer do Firefox (veja a dica no quadro), a estrutura de

nós que temos para o DOM da página exemplo está mostrada na figura 2.3.
Usando o Web Developer, temos uma aba chamada console, a qual vai permitir
alguns testes. Nesta aba, o desenvolvedor pode digitar alguns comandos e ver a
sua execução na tela.
capítulo 2 • 46
Figura 2.3 – DOM da página exemplo.
Veja o resultado das seguintes seleções.

• Ao digitar $(“li”):
Muito bem! Selecionamos os elementos <li> do documento. E para quê a gen-

te seleciona elementos em um documento HTML? Uma das possibilidades é para
mudar o seu conteúdo. Para fazer isso, podemos usar a função text() do Jquery.
Lembre-se: o Jquery é uma biblioteca cheia de funções pré-definidas, reserve
um tempo para estudá-las e ver as possibilidades que elas oferecem.
$(“li”).text(“Aeromodelo”);
Este comando vai gerar um pequeno “estrago” na sua página! Porém vai ser
útil para nos mostrar que tudo o que estiver abaixo dos elementos <li> na árvore
DOM, receberá um texto contendo “Aeromodelo”. O resultado é mostrado na
figura 2.4. Veja que a imagem <img>, título <h2>, span e o botão <button> que
havia antes foram substituídos pelo texto puro “Aeromodelo”.
capítulo 2 • 47
Figura 2.4 – Aplicação da função text().
• Ao digitar $(“.produto”):
Vamos ter na prática o mesmo resultado que a seleção anterior, veja a figura 2.5.
Porém, neste caso, não estamos selecionando os elementos <li> e sim todos
aqueles que estão formatados com a classe “produto”. Esta classe está definida no
arquivo CSS importado.
Figura 2.5 – Resultado da seleção $(".produto").
• Ao digitar $(“#anuncios”)
Figura 2.6 – Resultado da seleção $("#anuncios").
Neste caso, o seletor pega toda a div cujo ID é igual a “anuncios”.

Portanto, como podemos ver, em Jquery podemos selecionar os elementos de
um documento por meio do seu tipo, da sua classe ou pelo seu id. Além dessas
formas, é possível:
• Selecionar todos os elementos do DOM → $(*);
• Selecionar vários elementos combinados → $(E, F, G) onde E,F e G são os
seletores especificados.
capítulo 2 • 48
Métodos e eventos
Os eventos permitem que páginas dinâmicas sejam criadas e ações possam ser
detectadas pela aplicação que você estiver construindo.
Eis alguns exemplos de eventos:
• Clique do mouse;
• Carregamento da página web;
• Passar com o mouse sobre um elemento;
• Fazer o submit de um form;
• Teclar ou digitar uma determinada tecla.
Quando um destes eventos é disparado (ou outros que não listamos aqui),
uma função que podemos definir pode tratar o evento. Estas funções são chama-
das de tratadoras de eventos.
Veja um exemplo. O método ready() tem uma função de tratamento de evento
como argumento:
$(document).ready(<função de tratamento do evento>);
Criamos uma função em javascript normalmente:

function(){
//código a ser executado pela função

}
E passamos a função como argumento do método ready():
$(document).ready({ function(){
//excuta quando o DOM foi carregado
});
Vamos agora aplicar o que aprendemos com um exemplo prático. Lembra-

se da nossa página do comécio eletrônico de aeromodelos? Lembre que para
cada produto, temos um botão o qual podemos clicar para reservar o produto.
Desejamos que ao clicar o botão, um evento seja disparado (o clique do botão) e
apareça um texto “reservado!” no botão pressionado.
capítulo 2 • 49
Como se faz isso? Já temos uma ideia: Primeiro, temos que esperar o DOM
carregar completamente:
$(document).ready(function(){
});
Em seguida, precisamos criar a função para tratar o evento “click” do botão.

Usamos para isso, o método .on(<evento>, <tratador do evento>) no elemento
que queremos associar o evento. Fazemos isso selecionando o elemento antes e
depois aplicando o método on():
$('button').on('click',function(){
//executa o código da função
});
Lembre-se que neste caso, do jeito que estamos selecionado o elemento, to-
dos os “button” serão selecionados. Portanto, tome cuidado. Vamos ver o que
vai acontecer. Verifique novamente a figura 2.2 para lembrar da página no seu
estado inicial.
Agora, pense no que vai ser feito:
1. O usuário clica no botão do produto escolhido;
2. O botão “Reservar” desaparece e no lugar dele aparece o texto
“Reservado!”.
Temos alguns detalhes aqui. Em primeiro lugar temos que saber quais são os
métodos Jquery que fazem o botão desaparecer e o texto desejado, aparecer.
Assim como qualquer biblioteca para programação, o Jquery oferece uma api con-
tendo uma lista de métodos pré-definidos. Você pode encontrar esta lista em
<https://api.jquery.com/>.
Olhando a lista de métodos da API, temos o append() e o remove().

Provavelmente você vai usar bastante estes dois métodos. Leia o link para enten-
der mais sobre os dois métodos. Por ora, saiba que o append vai acrescentar o que
estiver como argumento a um determinado elemento e o remove obviamente vai
remover o elemento especificado. Vamos completar o código da função:
capítulo 2 • 50
var txt = $("<p>Reservado!</p>");
$('.produto').append(txt);
$('button').remove();
});
O resultado será:
Figura 2.7 – Tratamento do evento click().
Embora esteja errado, já sabíamos que todos os “button” seriam afetados, não é?
Precisamos de algum mecanismo para selecionar apenas o elemento que desejamos,
ou seja, dentro do DOM, este determinado elemento. Para isso, usamos o this.
O this vai nos ajudar removendo apenas o botão que foi clicado. Vamos checar
“isto” na figura 2.8. Observe a alteração que terá no código:
$(this).remove();
});
});
capítulo 2 • 51
E o resultado será:
Figura 2.8 – Uso do "this".
Deu certo. Só que não! Todos os outros botões agora também contém o texto
“Reservado!”. E não queremos isto. Para isto, temos que entender outro conceito
do Jquery chamado “travessia” ou no original “DOM Traversing”.
Travessia (DOM traversing)
Esta travessia que estamos falando consiste em encontrar, com o uso do méto-
do find(), os elementos que são desejados para executar alguma ação, baseado na
sua relação com outros elementos. A travessia inicia com uma seleção e se movi-
menta até chegar aos elementos desejados.
Vamos supor que temos a seguinte hierarquia DOM de um determina-
do documento:
Como o nome sugere, com a travessia, a partir de um determinado elemento,
podemos encontrar o elemento desejado subindo na hierarquia (em direção aos
pais – ancestors), descendo (descendants) ou procurando de lado (siblings)
capítulo 2 • 52
<body>
<h1> <h2> <ul>
<li>
<li>
<li>
Figura 2.9 – Hierarquia DOM.
Na figura 2.9 temos as seguintes possibilidades:

• O elemento <div> é o pai (parent) de <ul>, e um ancestral (ancestor) de
todos os elementos que estiverem dentro dele;
• O elemento <ul> é o pai (parent) dos dois elementos <li> e um filho (child)
de <div>;
• O elemento <li> da esquerda é parent de <span>, child de <ul> e um descen-
dente (descendant) de <div>;
• O elemento <span> é um child do <li> da esquerda e um descendant de
<ul> e <div>;
• Os dois elementos <li> são irmãos (siblings);
• O elemento <li> direito é o parent de <b>, child de <ul> e um descendant
de <div>;
• O elemento <b> é um child do <li> direito e um descendant de <ul> e <div>.
Escrevemos as palavras propositalmente em inglês porque elas são de fato o

nome dos métodos existentes em Jquery para fazer a travessia na árvore DOM.
Vamos fazer alguns testes com estes métodos.
Os exemplos a seguir mostram que podemos encontrar o <li> do meio.
<body>
<h1> <h2> <ul>
$(“li”).first(); <li>
<li>
<li>
capítulo 2 • 53
<body>
<h1> <h2> <ul>
$(“li”).first();
<li>
$(“li”).first().next();
<li>
<li>
<body>
<h1> <h2> <ul>

$(“li”).first().next(); <li>
$(“li”).first().next().prev();
<li>
<li>
Nos exemplos a seguir, podemos selecionar um elemento filho e depois desco-

brir quem são seus pais diretos (ancestors), ou seja, são exemplos de como “subir”
na hierarquia.
<body>
<h1> <h2> <ul>
$(“li”).first(); <li>
<li>
<li>
capítulo 2 • 54
<body>
<h1> <h2> <ul>
<li>
$(“li”).first().parent();
<li>
<li>
Agora que vimos como “subir” na hierarquia, vamos ver como fazemos para
“descer”. Vamos supor que o elemento <ul> tenha um id específico:
<body>
<h1> <h2> <ul> id=“teste”
$(“#teste”).children(“li”); <li>
<li>
<li>
O children somente seleciona os filhos diretos.
Mostramos apenas alguns métodos de travessia da árvore DOM. Novamente

salientamos a importância de estudar a API do Jquery para verificar os outros mé-
todos possíveis. Lembra do link? Aqui está: https://api.jquery.com/
Vamos voltar ao nosso comércio eletrônico? Ficamos com uma tarefa em aber-
to: fazer com que o texto “Reservado!” apareça somente quando clicar em um
determinado botão. Os outros botões permanecerão no estado atual.
Agora é com você: abra o link da API e procure por algum método que possa
te ajudar nesta tarefa. O código parou aqui:
$(this).remove();
});
});
capítulo 2 • 55
Vamos fazer a inserção da travessia no DOM para posicionar corretamente o
texto “Reservado!” sobre o botão no qual foi acionado o evento click(). Observe
o código:
$(this).after(txt);
$(this).remove();
});
});
Neste caso, queremos colocar o parágrafo (<p>) como um elemento irmão

(sibling) após o botão. Este efeito pode ser alcançado de outras formas porém,
para ser compatível com o que estávamos aprendendo sobre travessia, ele pode ser
feito assim.
Figura 2.10 – Uso do after().
É importante sempre observar o DOM. Caso a estrutura do DOM seja al-

terada e os elementos sofram mudança de posição dentro da estrutura, outros
métodos os quais não tratamos aqui podem e devem ser empregados.
Um método que você pode estudar um pouco mais é o closest(). Ele retorna o
primeiro ancestral (pai – ancestor) do elemento selecionado. Lembre-se que quan-
do dizemos “pai”, estamos nos referindo aos ancestrais (pai, avô, bisavô etc.) de
um determinado elemento.
capítulo 2 • 56
Veja como ficaria o exemplo usando o closest():
$(this).closest('.produto').append(txt);
$(this).remove();
});
});
O código Javascript final do arquivo “site.js” será:
$(this).closest('.produto').append(txt);
$(this).remove();
});
});
E o HTML:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset
=UTF-8" />
<link rel="stylesheet" href="estilos.css">
<script src="https://ajax.googleapis.com/ajax/libs/
<script src="site.js"></script>
<title>Testando</title>
</head>
<body>
<div id="anuncios">
<h1>Produtos</h1>
capítulo 2 • 57
<ul>
<li class="produto">
<img src="aero1.png">
<h2>Cherokee</h2>
<span class="preco">$20.00</span>
<button class="reserva">Reservar</button>
</li>
<h2>Ipanema</h2>
</li>
<h2>AT-6</h2>
</li>
</ul>
</div>
</body>
</html>
Novamente salientamos que a página usada como exemplo está sem elemen-
tos gráficos mais interessantes e bonitos. Em uma aplicação real, o arquivo CSS do
exemplo seria muito mais elaborado e cheio de recursos para fazer a página ficar
mais bonita.
Veja na figura 2.11 como uma pequena aplicação da biblioteca Bootstrap
(http://www.getbootstrap.com) pode já dar uma nova “cara” para a página.
Perceba que o código Jquery que desenvolvemos durante este capítulo ainda fun-
ciona normalmente.
capítulo 2 • 58
Figura 2.11 – Aplicação da biblioteca Bootstrap.
Lembre-se que o HTML é responsável pelo conteúdo. O CSS é encarregado

da formatação e o Javascript é quem vai tornar a página mais interativa.
ATIVIDADES
A seguir propomos alguns exercícios para você testar os seus conhecimentos.
01. Verifique as afirmações a seguir.

I. Jquery é uma biblioteca escrita em Json
II. Jquery é uma biblioteca escrita em Javascript
III. Jquery usa seletores CSS para selecionar elementos
Estão corretas:
a) Somente I d) Somente I e III
b) Somente II e) Somente II e III
c) Somente III
02. Qual é o caractere usado como seletor em Jquery?

a) % d) #
b) ? e) .
c) $
capítulo 2 • 59
03. O que o comando $(“div”) seleciona dentro de um documento HTML?
a) Todos os elementos “div” d) Todas as tags com nome “div”
b) O primeiro elemento “div” e) O último elemento “div”
c) Todos as tags com classe “div”
04. Jquery é uma biblioteca escrita para atuar no cliente ou no servidor?
05. Qual é o código escrito com Jquery correto para alterar a cor de fundo de todos os pa-
rágrafos de um documento HTML para vermelho?
a) $(“p”).css(“background-color”,”red”)
b) $(“p”).manipulate(“background-color”,”red”)
c) $(“p”).layout(“background-color”,”red”)
d) $(“p”).style(“background-color”,”red”)
e) $(“p”).css(“background-color:red”)
DEITEL Paul, J. Ajax, Rich Internet Applications e desenvolvimento Web para programadores . São
Paulo: Pearson, 2008. Série do desenvolvedor.
DALL`OGLIO, Pablo. PHP: Programando com orientação a objetos. 2 ed. São Paulo: Novatec, 2009.
LAWSON, Bruce. Introdução ao HTML 5. Rio de Janeiro, RJ: Alta Books, 2011.
capítulo 2 • 60
3
Formulários em
HTML5 com PHP
Formulários em HTML5 com PHP
Entre as linguagens de programação usadas na internet do lado do servidor,
sem dúvida, e sem fazer muitas pesquisas, vamos encontrar a linguagem PHP
sendo a campeã de utilização pelos desenvolvedores.
Sites como o Facebook, Yahoo!, Wikipedia, Flickr e outros tem como prin-
cipal linguagem de desenvolvimento a linguagem PHP e isto é muito expressivo.
Principalmente para contradizer várias opiniões que existem na internet a respeito
de tecnologias mais tradicionais como Microsoft e .Net, Java, Python, entre ou-
tras. É claro, são excelentes plataformas, sem dúvida, mas o PHP ainda assim não
deixa a desejar frente a essas linguagens e é muito utilizado até hoje.
Além disso, grandes CMS (Content Management Systems – Sistemas geren-
ciadores de conteúdo) são desenvolvidos com base no PHP como por exemplo o
Wordpress, o Joomla, Drupal, entre outros. A linguagem também tornou possível
o aparecimento de importantes frameworks de desenvolvimento como o CakePHP,
Yii, Laravel e outros. Ou seja, a linguagem continua viva e forte e é sobre ela que
vamos tratar neste capítulo. Aproveite.
Neste capítulo vamos estudar a linguagem PHP e ver na prática o quanto ela
é simples de ser aprendida e aplicada. Vamos começar aprendendo a criar formu-
lários em HTML5 e depois aplica-los na linguagem PHP. Vamos lá?
OBJETIVOS
• Criar formulários em HTML5;
• Compreender as estruturas de programação em PHP;
• Manipular os dados vindos de formulários em HTML5 na linguagem PHP.
Formulários HTML5
Os formulários são usados para entrada de dados na internet. Com certeza

você já preencheu dados, fez algum cadastro, ou algo parecido na internet e isto foi
feito usando um formulário. Os formulários são então usados quando precisamos
coletar dados do usuário.
capítulo 3 • 62
Um formulário vai pegar os dados que o usuário digitar e manda-los para
uma aplicação que fica em um servidor para que estes dados sejam processados
por alguma linguagem residente no servidor, como PHP, ASP, Python, CGI, para
alguma finalidade (cadastro, atualização de dados, etc.). O processamento é reali-
zado mediante as regras de negócio definidas para a aplicação.
Vamos aprender que existem vários elementos que podem ser colocados em
um formulário como caixas de texto, campos de texto longo, menus, botões de
rádio, listas etc..
ATENÇÃO
Se você for procurar e estudar pela internet outros exemplos de controles para for-
mulários, lembre-se que existem versões do HTML. Muitas referências do HTML vão estar
na versão 4 sendo que a mais atual, desde 2010 e compatível com os navegadores mais
modernos, é a versão 5 e cheia de novidades em relação à anterior. Procure ler materiais
sobre a versão 5! E lembre-se que o navegador tem que suportar esta versão do HTML caso
contrário a página não será montada corretamente. A página seguinte mostra uma lista dos
elementos de formulário que foram introduzidos no HTML5: <https://www.w3schools.com/
html/html5_new_elements.asp>.
Para criar um formulário, temos que usar a tag form. Veja a seguir um exemplo
usando HTML5.
<!DOCTYPE html>
<html>
<body>
<form method="post" action="">
<label for="nome">Nome:</label>
<input type="text" name="nome" id="nome" >
<br><br>
<label for="nome">Senha do site:</label>
<input type="password" name="nome" id="nome" >
<br><br>
<label for="datanasc">Data de nascimento:</label>
<input type="date" name="datanasc" id="datanasc" >
capítulo 3 • 63
<br><br>
<label for="experiencia">Tempo de experiência:</label>
<input type="number" name="experiencia" id="experiencia" >
<br><br>
<label for="email'">E-mail:</label>
<input type="email" name="email" id="email">
<br><br>
<label for="site">Site:</label>
<input type="url" name="site" id="site">
<br><br>
<label for="telefone">Telefone:</label>
<input type="tel" name="telefone" id="telefone">
<br><br>
<label for="cidade">Cidade:</label>
<input type="text" name="cidade" id="cidade">
<br><br>
<label for="uf">Estado:</label>
<select name="estado" id="uf">
<option value="ES">Espírito Santo</option>
<option value="MG">Minas Gerais</option>
<option value="RJ">Rio de Janeiro</option>
<option value="SP">São Paulo</option>
</select>
<br><br>
<label for="sexo">Sexo:</label>
<input type="radio" id="sexo" name="gender"
value="female">Feminino
<input type="radio" id="sexo" name="gender"
value="male">Masculino
<br><br>
<label for="comentario">Mensagem</label>
<textarea cols="40" rows="5" id="comentario"
name="msg"></textarea>
<input type="hidden" id="idusuario" name="idusuario"
value="id#001">
<br><br>
capítulo 3 • 64
<input type="submit" name="submit" value="Enviar">
</form>
</body>
</html>
Este código vai gerar o formulário da Figura 3.1. Não está muito bonito mas
se aplicarmos um estilo ou uma biblioteca de front-end como o Bootstrap, aí fica
legal. Na figura também são mostrados os efeitos que o próprio HTML5 fornece.
Nas versões anteriores do HTML, mensagens de validação de campo como “Insira
uma URL” para o campo texto do tipo “url” e o pop-up de data, não eram mos-
tradas a não ser com o uso de javascript.
Figura 3.1 – Formulário de exemplo.
Assim como qualquer tag em HTML, a tag form tem atributos que a comple-
mentam. No caso do nosso exemplo, temos 2 atributos: o method e o post. A tabela
mostra outros atributos e suas descrições:
capítulo 3 • 65
ATRIBUTO DESCRIÇÃO
Aponta para o script no servidor (back-end) o qual vai processar os
ACTION dados do formulário
É o método a ser usado para enviar os dados. Pode ser “get” ou

METHOD “post”. Vamos tratar destes métodos mais adiante neste capítulo
Especifica a janela ou frame de destino onde o resultado será

TARGET mostrado. Normalmente este atributo é omitido. Os valores podem
ser: _blank, _self, _parent etc.
Este atributo é usado para especificar como o navegador codifi-

ca os dados antes de enviar para o servidor. Os valores possíveis
podem ser:
ENCTYPE • application/x-www-form-urlencoded: é o padrão, usado na
maioria dos casos
• multipart/form-data: é usado quando são enviados dados biná-
rios como imagens, arquivos etc
Tabela 3.1 – Atributos da tag <form>.
Os formulários possuem controles que executam as coletas de dados do usuá-

rio. Os controles são marcados pela tag <input>, foram mostrados no exemplo e
como podemos perceber, existem diferentes tipos, entre eles:
• Controles de entrada de texto
– Controles de texto simples. Veja no código que podemos variar este
controle para validar e-mails, url, telefones, números e data. Isso é bem
legal e é uma característica de HTML5.
<input type=”text”>
– Controles para senhas (password)
<input type=”password”>
– Controles de várias linhas (textarea)
<textarea>
• Checkboxes
<input type=”checkbox”>
• Radio boxes
<input type=”radio”>
capítulo 3 • 66
• Select (listas)
<select>
<option>
• Controles escondidos (hidden)

<input type=”hidden”>
• Botões
<input type=”button”>
• Botões de submit (envio) e reset

<input type=”submit”>
CONEXÃO
Na tabela 3.1 vimos que a tag <form> possui atributos específicos. Assim como o
<form>, cada um dos controles apresentados também possui uma lista de atributos es-
pecífica e bem variada. É interessante que você consulte o site W3Schools.com e leia a
parte específica dos atributos dos controles de entrada. O link para este site é https://www.
w3schools.com/html/html_form_attributes.asp. O site está em inglês e é interessante que
você se esforce para ler neste idioma e se acostumar com a leitura técnica. Neste link você
encontrará vários exemplos dos atributos dos controles de entrada.
De acordo com o que você pode pesquisar no link indicado, os atributos exis-
tentes em HTML5 são:
• autocomplete;
• autofocus;
• form;
• formaction;
• formenctype;
• formmethod;
• formnovalidate;
• formtarget;
• height e width;
capítulo 3 • 67
• list;
• min e max;
• multiple;
• pattern (regexp);
• placeholder;
• required;
• step.
Podemos perceber que no código do formulário temos uma tag chamada

<label>. Ela é útil para estilizarmos os formulários e associar o rótulo (label) a um
controle por meio do atributo id de cada controle (veja no código que temos um
id igual à referência de cada label).
A linguagem PHP
Você já deve ter alguma experiência com programação e já deve ter sacado
como as linguagens estruturadas funcionam, suas estruturas e sua sintaxe. Você vai
perceber que PHP não é muito diferente. O detalhe é que ela é uma linguagem
essencialmente de script, e que roda em um servidor, como back-end.
Portanto, nosso objetivo aqui não é explicar novamente o que são variáveis,
como são as estruturas de programação (sequencial, decisão e repetição), funções,
arrays etc. Temos certeza que você já sabe muito bem este conteúdo. Caso não
se recorde, sugerimos que estude algoritmos e lógica de programação, conteúdo
normalmente visto no início do curso.
Nosso objetivo aqui é mostrar como esses elementos são feitos em PHP. Temos
certeza que baseado na sua experiência e conhecimento dos fundamentos de pro-
gramação você terá um bom aproveitamento agora em PHP. Vamos lá!
Criação de variáveis em PHP
Antes de mais nada, lembre-se que PHP é uma linguagem de script e precisa-
mos de uma forma de separar o código PHP do código HTML em uma página.
Portanto, é possível criar um arquivo HTML e ter código PHP “misturado” ao
código HTML. Mas para isso, precisamos marcar esta separação e isto é feito pelos
marcadores <?php e ?>. Veja um exemplo:
capítulo 3 • 68
<html>
<head>
<title>Testando</title>
</head>
<body>
<?php
echo "<h1>Olá mundo PHP!</h1>";
?>
</body>
</html>
Tenha o cuidado de sempre fechar o <?php com ?>. Naturalmente, tudo que
estiver dentro destes marcadores serão interpretados como código PHP e o servi-
dor procurará executá-los.
Vamos agora ver alguns assuntos mais específicos da linguagem.
• Todas as variáveis em PHP são representadas usando um $ na frente do seu
nome. Por exemplo $nome;
• Embora seja possível, não é necessário declarar variáveis antes do seu uso
em PHP;
• As variáveis em PHP não tem um tipo intrínseco, ou seja, a variável não
sabe qual é o seu tipo antecipadamente: ela não sabe se vai guardar um inteiro ou
uma string por exemplo;
• PHP converte o tipo automaticamente de acordo com o uso da variável;
• Os nomes das variáveis podem começar com uma letra ou com o unders-
core “_”;
• Podemos ter números, letras, underscores no meio do nome da variável.
Outros caracteres não são permitidos.
Em PHP existem oito tipos de dados que são usados para construir variáveis:
• Inteiros (integer);
• Ponto flutuante (double);
• Booleanas;
• NULL;
• Strings;
• Arrays;
• Objetos;
• Recursos (resources): são variáveis especiais que guardam referências a recur-
sos externos ao PHP.
capítulo 3 • 69
Operadores
Aritméticos
Sendo $a = 10 e $b = 20, observe os exemplos:
OPERADOR DESCRIÇÃO EXEMPLO

+ Soma 2 operandos $a + $b = 30
- Subtração $a - $b = -10
* Multiplicação $a * $b = 200
/ Divisão $b / $a = 2
Operador módulo, retorna o resto inteiro da

% $b % $a = 0
divisão
++ Operador de incremento, incrementa em 1 $a ++ = 11
-- Operador de decremento, decrementa em 1 $a -- = 9
Atribuição

= Operador simples de atribuição $c =$a + $b
+= Adiciona e atribui o valor $c += $a → $c = $c + $a
-= Subtrai e atribui o valor $c -= $a → $c = $c - $a
*= Multiplica e atribui o valor $c *= $a → $c = $c * $a
/= Divide e atribui o valor $c /= $a → $c = $c /$a
%= Calcula o módulo e atribui o valor $c %= $a → $c = $c % $a
capítulo 3 • 70
Operadores de incremento/decremento

++$a Incrementa a variável $a em 1, depois retorna $a ++$a
$a++ Retorna a variável $a, e depois incrementa $a em 1 $a++
--$a Decrementa a variável $a em 1, depois retorna $a --$a
$a-- Retorna a variável $a, e depois decrementa $a em 1 $a--
Lógicos
Sendo $a verdadeiro e $b verdadeiro, observe os operadores e exemplos:

and Operador lógico AND ($a and $b) é verdadeiro (true).
or Operador lógico OR ($a or $b) verdadeiro (true)
&& Operador lógico AND ($a && $b) verdadeiro (true)
|| Operador lógico OR ($a || $b) verdadeiro (true)
! Operador lógico NOT !( $a && $b) falso (false)
Variáveis Pré-definidas e recebimento de dados com $_GET, $_

POST, $_REQUEST
No primeiro tópico deste capítulo, vimos como criar um formulário em

HTML5 e deixamos o atributo action do formulário sem preencher. Agora che-
gou a hora de aprender como ele funciona e para que ele serve. Portanto, para
enviar as informações para o servidor, vamos usar os forms.
Basicamente existem duas formas de enviar informações para um servidor
web: por meio do método GET ou por meio do método POST.
capítulo 3 • 71
CONEXÃO
Para entender mais sobre estes métodos, e outros, é legal você dar uma olhada no
protocolo HTTP. Um bom início de estudo é a Wikipedia: <https://pt.wikipedia.org/wiki/
Hypertext_Transfer_Protocol>. Neste link tem uma seção chamada “Métodos de Solicitação”
a qual vai te ajudar nos detalhes destes métodos.
Para resumir, antes do navegador enviar a informação para o servidor, ele co-
difica a informação em um esquema chamado “URL encoding”. Neste esquema,
os pares nome/valor são enviados da seguinte forma:
nome1=valor1&nome2=valor2&nome3=valor3
Ou seja, temos que criar uma lista de pares nome/valor usando o “=” e se-
parados por “&”. Os espaços são removidos e substituídos com o caractere “+” e
qualquer outro caractere não alfanumérico é substituído por valores hexadecimais.
Depois a informação é codificada e enviada para o servidor.
O método GET
O método GET envia a informação codificada para o servidor anexada no

request (ou requisição) da página. Fizemos uma recomendação para você recordar
algumas informações importantes sobre o protocolo HTTP. Neste protocolo, um
conceito importante é o do request. O pedido de informações ao servidor é feito
por meio de uma URL usando algum método e os detalhes do pedido são enviados
em conjunto.
No caso do GET, o pedido é enviado explicitamente na URL após o uso do
caractere “?” e usando as regras mencionadas anteriormente. Por exemplo:
http://www.seilá.com.br/index.html?nome1=valor1&nome2=valor2&nome3=valor3
capítulo 3 • 72
Há um detalhe muito importante a respeito deste método: ele produz uma
string que aparece nos logs do servidor. Esta string pode ter até 1024 caracteres e
o detalhe reside na privacidade dos dados a serem enviados pois eles ficarão explí-
citos na URL, logo, enviar usuário e senha ou dados sigilosos não é aconselhável.
O método GET não pode ser usado para enviar dados binários, como imagens
ou por exemplo uma planilha do Excel. Os dados enviados pelo método GET
podem ser acessados usando a variável QUERY_STRING. No PHP existe uma
variável superglobal implementada no array $_GET[] para acessar os dados envia-
dos por GET. Veja um exemplo:
<?php
if( $_GET["nome"] || $_GET["idade"] ) {
echo "Olá ". $_GET['nome']. "<br />";
echo "Você tem ". $_GET['idade']. " anos.";
exit();
}
?>
<html>
<body>
<form action = "exemplo.php" method = "GET">
Nome: <input type = "text" name = "t_nome" />
Idade: <input type = "text" name = "t_idade" />
<input type = "submit" />
</form>
</body>
</html>
Ao executarmos o código em PHP, teremos o seguinte resultado. Observe

como ficou a URL após enviar os dados.
capítulo 3 • 73
Figura 3.2 – Exemplo do GET.
Vamos dar uma olhada com um pouco mais de detalhes no que está aconte-
cendo aqui. Observe a figura 3.3.
1. De um lado temos o cliente, representado pelo navegador do usuário.
No navegador temos um arquivo exemplo.php o qual contém um <form>
com 2 controles de texto o <input> com <name=”t_nome”> e o <input>
com <name=”t_idade”>.
2. Ao clicar no botão Enviar, o form é enviado (submit) para o recurso
localizado no servidor (action=”exemplo.php”). Neste caso, o recurso é o
próprio arquivo que estamos trabalhando. Poderíamos ter aqui um arquivo
localizado remotamente, em um servidor presente na internet. Portanto,
o action vai apontar para o script PHP do servidor o qual vai processar os
dados enviados. Neste caso, estamos mandando os dados por GET (metho-
d=”GET”) e assim os dados são enviados pela URL.
3. O servidor web recebe os dados, envia para o interpretador PHP o qual,
após processar os dados e ...
4. ... transformar os dados processados em uma página HTML que será a
resposta do processo e enviada para o cliente. Temos aqui então um clássico
exemplo de solicitação-resposta existente entre os servidores presentes na
internet.
capítulo 3 • 74
Figura 3.3 – Comunicação cliente-servidor em PHP.
O método POST
O método POST envia dados por meio dos cabeçalhos do protocolo HTTP. A
informação enviada é codificada como no método GET e pelo cabeçalho QUERY_
STRING é possível verificar os dados que foram enviados para o servidor.
Diferente do GET, o POST não possui limite no tamanho dos dados a se-
rem enviados. Além disso, é possível enviar dados em ASCII assim como dados
binários.
Os dados enviados pelo método POST passam pelo cabeçalho HTTP, de
modo que a segurança depende do protocolo HTTP. Ao usar o Secure HTTP,
você pode ter certeza de que suas informações são seguras. Estas informações são
pertinentes ao protocolo HTTP e portanto novamente recomendamos que você
leia o link sugerido para entender melhor este protocolo.
No caso do PHP, ele possui um array associativo chamado $_POST para aces-
sar todas as informações enviadas pelo POST. Agora que já vimos como funciona
o típico ciclo de vida de uma requisição PHP no servidor, vamos ver um exemplo
do POST:
capítulo 3 • 75
<?php
if( $_POST["t_nome"] || $_POST["t_idade"] ) {
if (preg_match("/[^A-Za-z'-]/",$_POST['t_nome'] )) {
die ("Nome invalido!");
}
echo "Bem-vindo ". $_POST['t_nome']. "<br />";
echo "Voce tem ". $_POST['idade']. " anos.";
exit();
}
?>
<html>
<body>
<form action = "exemplo2.php" method = "POST">
Nome: <input type = "text" name = "t_nome" />
</form>
</body>
</html>
Observe o resultado da execução do script anterior na figura 3.4. Veja que a

URL não carrega os dados enviados do formulário. No código usamos algumas fun-
ções do PHP como preg_match() e die(). A função die() é mais fácil de supor o que
ela faz: ela “mata” a execução do programa, enquanto que a função preg_match()
usa expressões regulares para validar se o argumento da função corresponde às
regras estabelecidas pela expressão regular. É uma boa ideia consultar a documen-
tação oficial do PHP para aprender novas funções em PHP.
Figura 3.4 – Método POST em PHP.
capítulo 3 • 76
A variável $_REQUEST
Outra variável supergobal que pode receber dos provenientes de um formu-

lário é a $_REQUEST. Ela contém tanto $_GET quanto $_POST (e outra cha-
mada $_COOKIE). Esta variável pode ser usada para pegar os dados enviados por
um formulário tanto pelo método GET quanto pelo POST. Veja o exemplo
<?php
if( $_REQUEST["nome"] || $_REQUEST["idade"] ) {
echo "Oi ". $_REQUEST[nome]. "<br />";
echo "Voce tem ". $_REQUEST['age']. " anos de idade.";
exit();
}
?>
<html>
<body>
<form action = "script.php" method = "POST">

Nome: <input type = "text" nome = "t_nome" />
</form>
</body>
</html>
O resultado da execução do script é o mesmo que os mostrados anteriormen-
te. Nossa intenção aqui é mostrar que a variável $_REQUEST também pode ser
usada para armazenar os valores de um <form>.
A pergunta passa a ser: quando usar $_REQUEST sendo que $_GET e
$_POST já fazem o serviço que precisamos? Na maioria das vezes vamos mes-
mo usar ou $_GET ou $_POST. O uso do $_REQUEST é problemático por
questões de segurança. Vimos que o $_REQUEST pode ser usado para GET,
POST, e COOKIE e pode ser modificado por um usuário remoto e desta forma,
a segurança pode falhar. Portanto é recomendável que você escolha um dos dois
métodos mais importantes (GET ou POST) e usá-los explicitamente.
capítulo 3 • 77
Estruturas de decisão
As estruturas de decisão em PHP se comportam de maneira muito semelhante

às outras linguagens de programação estruturadas e têm uma sintaxe bem parecida.
Em PHP temos as seguintes estruturas de decisão:
if...else
if (condição)
bloco de comandos executados quando a condição é verdadeira;
else
bloco de comandos executados quando a condição é falsa;
elseif
if (condição)
bloco a ser executado quando a condição é verdadeira;
elseif (condição)
bloco a ser executado quando a condição é verdadeira;
else
bloco a ser executado quando a condição é falsa;
switch
switch (expressão){
case teste1:
bloco de código a ser executado se a expressão = teste1;
break;
case teste2:
bloco de código a ser executado se a expressão = teste2;
break;
default:
código a ser executado se a expressão é diferente de teste1
e teste2;
}
capítulo 3 • 78
Estruturas de repetição
While
while (condição) {
bloco de código a ser executado enquanto a condição é verdadeira;
}
Exemplo:
<?php
$i = 0;
$num = 50;
while($i < 10) {
$num--;
$i++;
}
echo ("O loop começou em i = $i e num = $num" );
?>
O resultado será:
O loop começou em i=10 e num=40
Do-While
do {
código a ser executado enquanto a condição é verdadeira;
}
while (condição);
Exemplo:
<?php
$i = 0;
$num = 0;
capítulo 3 • 79
do {
$i++;
}
while( $i < 10 );
echo ("O loop começou em i = $i" );
?>
O resultado será:
O loop começou em i = 10
For
for (inicialização; condição; incremento){

bloco de código a ser repetido;
}
Exemplo:
<?php
$a = 0;
$b = 0;
for($i = 0; $i<5; $i++) {
$a += 10;
$b += 5;
}
echo ("No final do loop a=$a e b=$b" );
?>
O resultado será:
No final do loop a=50 e b=25
Foreach
foreach (array as valor) {

código a ser executado;
}
capítulo 3 • 80
Exemplo:
<?php
$array = array( 1, 2, 3, 4, 5);
foreach($array as $valor) {
echo "O valor é $valor <br />";
}
?>
O resultado é:
O valor é 1
O valor é 2
O valor é 3
O valor é 4
O valor é 5
Funções
Em PHP não existem muitas diferenças no uso, criação e tratamento de fun-

ções diferentes do que existem em outras linguagens que talvez você já conheça.
É bem parecido.
Já vimos algumas funções pré-definidas neste capítulo e vamos ver como criar
nossas próprias funções.
Dica: Existem mais de 1000 funções pré-definidas em PHP. Para você ter uma ideia
e explora-las, acesse a Referência de Funções em PHP no link http://php.net/ma-
nual/pt_BR/funcref.php.
Criando uma função em PHP
Vamos aprender a criar funções de uma maneira prática e direta. Suponha que
você queira criar uma função em PHP que apenas mostre uma mensagem na tela
do navegador do usuário. Veja o código a seguir:
capítulo 3 • 81
10. <html>
11. <head>
12. <title>Teste</title>
13. </head>
14. <body>
15. <?php
16. /* Criando a função */
17. function escreve() {
18. echo "É isso aí pe-pe-pe-pessoal!";
19. }
20.
21. /* Chamando a função */
22. escreve();
23. ?>
24. </body>
25. </html>
A função está definida nas linhas 9 a 10. A palavra chave function é obrigató-
ria para definir a função seguida de parênteses onde podemos ou não ter uma lista
de argumentos. O corpo da função deve ficar entre chaves “{“ e “}”.
A chamada da função ocorre na linha 13.
Veja que, de fato, não é muito diferente do que já conhecemos das outras
linguagens, o que muda basicamente é a sintaxe. Vamos ver outros exemplos. O
próximo exemplo mostra a definição da função soma() na linha 8 com dois argu-
mentos: $n1 e $n2.
Estes argumentos são passados na linha 14 onde ocorre a chamada. Como
você já deve saber, $n1=2 e $n2=3. Dentro da função os valores são substituídos
e o resultado da conta é armazenado na variável $soma, na linha 9. A chamada da
função ocorre na linha 14.
1. html>
2. <head>
3. <title>Teste</title>
4. </head>
capítulo 3 • 82
5. <body>
6. <?php
7. /* Função com argumentos */
8. function soma($n1, $n2) {
9. $soma = $n1 + $n2;
10. echo "A soma é $soma";
11. }
12.
13. /* Chamando a função */
14. soma(2,3);
15. ?>
16. </body>
17. </html>
Você deve saber que toda função deveria retornar um valor e deve ter per-
cebido que até agora não fizemos isto. Então você deve lembrar das suas aulas
básicas de programação que existem funções que não retornam valor chamadas
de procedimentos ou procedures. Logo, concluímos em PHP que é possível criar
procedimentos em PHP usando a mesma estrutura de uma função, ou seja, tanto
funções quanto procedimentos são criados por meio da palavra chave function e
demais regras.
Observe o código a seguir. Veja a linha 11 especialmente.
1. <html>
2. <head>
3. <title>Funções</title>
4. </head>
5. <body>
6. <?php
7. function soma($n1, $n2) {
8. $soma = $n1 + $n2;
9. return $soma;
10. }
11. $retorno = soma(10, 20);
12.
capítulo 3 • 83
13. echo "Valor retornado pela função: $retorno";
14. ?>
15. </body>
16. </html>
Está vendo como faz o retorno? Assim como outras linguagens de programação,
usamos a palavra chave return. A chamada da função é feita na linha 11 onde temos
uma variável chamada $retorno que vai guardar o valor retornado pela função.
O valor guardado na variável $retorno é usado na linha 13 onde uma mensa-
gem simples é mostrada na tela:
Valor retornado pela função: 30
Simples não é? PHP de fato é bem fácil de aprender e usar!
Passagem de parâmetros por referência
Passar uma variável por referência significa usar uma forma de trabalhar com
funções onde a variável usada na chamada da função será modificada dentro da
função. Ou seja, é diferente de uma cópia da variável como ocorre na passagem por
valor. Qualquer modificação na variável do argumento vai afetar o valor da variá-
vel original. Isto pode ser útil em alguns casos. Observe bem o próximo exemplo:
1. <html>
2. <head>
3. <title>Passagem de parâmetros por referência</title>
4. </head>
5. <body>
6. <?php
7. function soma5($num) {
8. $num += 5;
9. }
10.
11. function soma6(&$num) {
12. $num += 6;
13. }
capítulo 3 • 84
14.
15. $numero_original = 10;
16. soma5($numero_original);
17.
18. echo "O valor original é $numero_original <br />";
19.
20. soma6($numero_original);
21. echo "O valor original é $numero_original <br />";
22. ?>
23. </body>
24. </html>
Veja a linha 11. Percebeu o “&” na frente da variável? Temos aqui uma in-
dicação que o argumento $num da função será uma referência da variável
$numero_original da linha 20. Veja como fica a execução do código e perceba
como é a passagem de parâmetros por referência:
O valor original é 10
O valor original é 16
Certo? Na função soma5(), a função é executada por meio de uma cópia da

variável $numero_original em $num. Assim, qualquer alteração que a variável
$num sofrer dentro da função soma5() não afetará a variável $numero_original
que está fora do escopo da função. Isso não ocorre com a função soma6(). Como
houve uma passagem por referência, as alterações sofridas por $num dentro do
escopo de soma6() afetarão o valor de $numero_original for a da função.
Valores padrão em funções
Para terminar, é possível estabelecer um parâmetro para um argumento de

uma função caso ele não seja usado na chamada. Veja o próximo exemplo: a fun-
ção vai mostrar NULL no caso do parâmetro não ter sido passado
1. <html>
2. <head>
3. <title>Valor padrão</title>
capítulo 3 • 85
4. </head>
5. <body>
6. <?php
7. function escreve($par = NULL) {
8. print $par;
9. }
10. escreve("Isto é um teste");
11. escreve();
12. ?>
13. </body>
14. </html>
O resultado será:
Isto é um teste → (pois passou o parâmetro na linha 10)
____________ → (não vai escrever nada, pois não passamos o
parâmetro na linha 11)
Arrays
Assim como outros elementos vistos até agora da linguagem PHP, estamos
certos que você tem bons conhecimentos do conceito de arrays.
Em PHP, temos 3 diferentes tipos de arrays que podem ser usados:
• Arrays numéricos: onde o índice de cada posição é um número. Os valores
são armazenados e acessados de uma maneira linear;
• Arrays associativos: estes podem ser novos para você pois os índices podem
ser strings. Este tipo de array armazena valores de elementos em associação com
valores-chave em vez de em uma ordem de índice linear rígida como é feita no
array numérico;
• Arrays multimensionais: são as famosas matrizes.
O legal do PHP é que existem muitas funções pré-definidas para trabalharmos

com arrays. Vale a pena dar uma olhada nelas e perceber que muitas operações que
as vezes acabamos desenvolvendo já foram feitas anteriormente.
Vamos dar uma olhada rápida nos tipos de arrays e aprender como usá-los
em PHP.
capítulo 3 • 86
Arrays numéricos
Estes são os arrays tradicionais da forma como aprendemos em lógica de pro-

gramação e nas primeiras linguagens de programação. Veja como usá-los em PHP:
<?php
/* Uma forma de criar um array. */
$numeros = array( 1, 2, 3, 4, 5);
foreach( $numeros as $Valor ) {

}
/* Outra forma de criar um array. */

$numeros[0] = "um";
$numeros[1] = "dois";
$numeros[2] = "três";
$numeros[3] = "quatro";
$numeros[4] = "cinco";
foreach( $numeros as $valor ) {

}
?>
O resultado será:
O valor é 1
O valor é 2
O valor é 3
O valor é 4
O valor é 5
O valor é um
O valor é dois
O valor é três
O valor é quatro
O valor é cinco
capítulo 3 • 87
Arrays associativos
Os arrays associativos são bem parecidos com os arrays numéricos em ter-

mos de funcionalidade, mas são diferentes em relação ao índice. O array as-
sociativo terá no seu índice uma string para uma associação entre chave e valores
seja estabelecida.
No próximo exemplo, vamos usar um array associative para guardar os salários
de alguns funcionários de uma empresa. Não ia ser muito interessante usar um
array numérico pois teríamos que mapear o funcionário ao valor do índice. Então,
para estruturar melhor a solução, cada salário terá seu funcionário correspondente
em um array cujo índice é o nome do funcionário. Vamos ao exemplo.
1. <?php
2. /* Uma forma de criar o array. */
3. $salarios = array("pedro" => 2000, "tiago" => 1000, "joao"
=> 500);
4.
5. echo "O salario de Pedro é ". $salarios['pedro'] . "<br />";
6. echo "O salario de Tiago é ". $salarios['tiago']. "<br />";
7. echo "O salario de Joao é ". $salarios['joao']. "<br />";
8.
9. /* Outra forma de criar o array. */
10. $salarios['pedro'] = "alto";
11. $salarios['tiago'] = "medio";
12. $salarios['joao'] = "baixo";
13.
14. echo "O salario de Pedro é ". $salarios['pedro'] . "<br />";
15. echo "O salario de Tiago é ". $salarios['tiago']. "<br />";
16. echo "O salario de Joao é ". $salarios['joao']. "<br />";
17. ?>
O salário de Pedro é 2000

O salário de Tiago é 1000
O salário de Joao é 500
O salário de Pedro é alto
O salário de Tiago é médio
O salário de Joao é baixo
capítulo 3 • 88
Figura 3.5 – Array associativo.
Arrays Multidimensionais
Um array matriz multidimensional também é conhecido por matriz. Não se

esqueça que cada elemento na sub-matriz pode ser uma matriz, e assim por diante.
Os valores na matriz são acessados usando o índice múltiplo. No próximo exem-
plo uma matriz é usada para guardar dados de alunos e suas notas em 3 matérias:
1. <?php
2. $notas = array(
3. "pedro" => array (
4. "fisica" => 8,
5. "matematica" => 7,
6. "quimica" => 9
7. ),
8.
9. "tiago" => array (
10. "fisica" => 6,
12. "quimica" => 8
13. ),
14.
15. "joao" => array (
16. "fisica" => 10,
18. "quimica" => 8
19. )
20. );
21.
capítulo 3 • 89
22. /* Acessando os valores na matriz */
23. echo "Notas de pedro em fisica : " ;
24. echo $notas['pedro']['fisica'] . "<br />";
25.
26. echo "Notas de tiago em matematica : ";
27. echo $notas['tiago']['matematica'] . "<br />";
28.
29. echo "Notas de joao em quimica : " ;
30. echo $notas['joao']['quimica'] . "<br />";
31. ?>
O resultado será:
Notas de pedro em fisica: 8
Notas de tiago em matematica : 9
Notas de joao em quimica : 8
Figura 3.6 – Matriz
Como falamos anteriormente, a linguagem PHP é cheia de recursos e se fos-

semos detalhar cada tópico que vimos aqui levaríamos muito mais tempo e não é
esse o nosso objetivo. Como proposto, o objetivo é mostrar a você os principais
elementos, te dar um bom fundamento e deixar que você continue explorando os
recursos que existem em PHP por sua conta e levando em conta os conhecimentos
e experiência que você já possui de outras linguagens.
ATIVIDADES
01. Como você obtém informações de um formulário que é submetido usando o método
"get"?
02. Ao usar o método POST, as variáveis são exibidas no URL (verdadeiro ou falso?)
capítulo 3 • 90
03. Como você escreve "Hello World" em PHP?
04. Qual é a maneira correta de criar uma função no PHP?
05. Como aprendemos a acessar os dados enviados por POST em um formulário HTML?
DALL'OGLIO, P. PHP: Programando com orientação a objetos. 2 ed. São Paulo: Novatec, 2009.
DEITEL, P. Ajax: Rich Internet Applications e desenvolvimento web para programadores. São
Paulo: Pearson, 2008.
LAWSON, B. Introdução ao HTML5. Rio de Janeiro: Alta Books, 2011.
THE PHP GROUP. Documentation. Manual do PHP. Disponivel em: <https://secure.php.net/
manual/pt_BR/introduction.php>. Acesso em: 30 jul. 2017.
W3SCHOOLS. PHP 5 Tutorial. PHP Tutorial. Disponivel em: <https://www.w3schools.com/php/>.
Acesso em: 30 jul. 2017.
capítulo 3 • 91
capítulo 3 • 92
4
Programação
orientada a objetos
em PHP
Programação orientada a objetos em PHP
A orientação a objetos é um tema presente em várias linguagens de programa-
ção atuais. E saber usá-la corretamente faz com que o desenvolvedor e a equipe
que ele participa tenha ganhos de produtividade e reusabilidade muito grandes,
basta ter uma boa arquitetura de software.
A linguagem PHP é muito popular e como consequência várias iniciativas na
criação de frameworks existem como por exemplo o CakePHP, CodeIgniter, Zend
Framework, Laravel e outros. Todos eles dependem da orientação a objetos para
poderem ser produtivos.
Sabemos que você já deve ter aprendido os conceitos deste paradigma em
outras disciplinas e com outras linguagens e agora vamos aplicar o que você já
sabe no PHP. Você vai ver que é bem fácil e tranquilo. Basta praticar e praticar!
O que você tem que ter em mente é um slogan que a orientação a objetos sempre
persegue: o famoso DRY (Don’t repeat Yourself – Não se repita), ou seja, criando as
classes e suas estruturas corretamente você terá condições de desenvolver código
reusável e reaproveitável facilmente.
Outra dica importante é usar a UML a seu favor. A UML possui diagramas
muito importantes para ajudá-lo a criar uma boa estrutura de classes. Bem, vamos
ao que interessa! Boa leitura e se puder fazer os exemplos no seu computador,
melhor ainda!
OBJETIVOS
• Aplicar os conceitos de orientação a objetos em PHP;
• Criar programas orientados a objeto em PHP.
Introdução
As classes e objetos foram incorporadas à linguagem PHP a partir da versão 5

e implementa as seguintes características:
• Classes;
• Objetos;
• Herança;
capítulo 4 • 94
• Interfaces;
• Abstração;
• Métodos mágicos (Magic Methods).
Vamos tratar desses assuntos neste capítulo. Vamos lá?
Classes e Objetos em PHP
Antes de mostrar o código PHP para a implementação destes conceitos, va-

mos relembrar rapidamente alguns tópicos sobre orientação a objetos.
Uma classe é um tipo de dado definido pelo programador e que pode conter
atributos e métodos. A classe é um conjunto de objetos e funciona como um mo-
delo gerador de objetos.
Um objeto possui propriedades, representadas pelos seus atributos e compor-
tamentos, representados pelos seus métodos.
Primeiro definimos uma classe, onde seu nome é o mesmo nome que seu
arquivo, e em outras partes do programa, criamos os objetos.
Em PHP, a palavra chave que cria uma classe é class.
O nome da classe tem que ser um nome válido e não pode ser uma palavra
reservada do PHP, sempre começando com uma letra ou sublinhado. Para não
errar na definição de uma classe, procure seguir as mesmas regras para a definição
de variáveis.
Vamos a um exemplo:
32. <?php
33. class Celular {
34. /* atributos */
35. var $preco;
36. var $titulo;
37.
38. /*métodos de acesso*/
39. function setPreco($p){
40. $this->preco = $p;
41. }
42.
capítulo 4 • 95
43. function gePreco(){
44. return $this->preco;
45. }
46.
47. function setTitulo($t){
48. $this->titulo = $t;
49. }
50.
51. function getTitulo(){
52. return $this->preco ;
53. }
54. }
55. ?>
Código 1 – Celular.php.
Como vimos no código 1, criar uma classe em PHP é muito fácil e bem pa-
recido com outras linguagens, muda somente a sintaxe, é claro. Podemos, agora,
criar outro arquivo, chamado teste.php e nele incluir o arquivo da classe e criar-
mos objetos:
ATENÇÃO
Lembre-se: para testar os seus exemplos, você tem que estar com o Apache ligado e se
estiver usando o XAMPP, criar uma pasta para os seus exemplos dentro dos diretórios que
o Apache está configurado como Virtual Host. Caso tenha dúvida nisso, se estiver usando o
Windows, use a pasta htdocs dentro do XAMPP. Tudo que estiver dentro desta pasta irá ser
encarado como pasta válida para execução do PHP.
1. <?php
2. include 'Celular.php';
3.
4. $samsung = new Celular();
5. $iphone = new Celular();
6.
7. $samsung->setNome("Galaxy");
capítulo 4 • 96
8. $samsung->setPreco("100.00");
9.
10. $iphone->setNome("IPhone 7");
11. $iphone->setPreco("200.00");
12.
13. echo "Celular: ".$samsung->getNome()." Preco: "
.$samsung->getPreco();
14. echo "<br>";
15. echo "Celular: ".$iphone->getNome()." Preco: "
.$iphone->getPreco();
16. ?>
Código 2 – Teste.php.
Veja no código 2 a forma de criar objetos. Criamos dois: samsung e iphone.

Perceba que temos o “$” assim como nas variáveis. Veja nas linhas 4 e 5 que usa-
mos a palavra chave new para criar novas instâncias de Celular. Esta palavra chave
é obrigatória para a criação dos objetos. Não se esqueça de incluir o arquivo da
classe desejada na primeira linha, veja a linha 1.
Nas linhas 7, 8, 10 e 11 temos a chamada dos métodos de acesso da classe
Celular, assim como nas linhas 13 e 15.
A sintaxe para acessar os membros da classe é:
$nome_objeto -> membro da classe (atributo ou método)
Por enquanto está fácil. Precisamos incluir outros conceitos da orientação a

objetos para incrementar nosso exemplo como por exemplo: não definimos um
construtor e as variáveis definidas ainda estão públicas. Você deve ter aprendido
que toda classe precisa ter um construtor e que devemos definir os atributos como
privados para garantir o encapsulamento.
A visibilidade dos atributos em PHP obedece aos conceitos que aprendemos
sobre orientação a objetos e pode ser:
• public
public $variável = “teste”;
• protected
protected $outra = “outro teste”;
capítulo 4 • 97
• private
private $mais_uma = “novo teste”;
Não vamos esquecer dos construtores. Vamos continuar nosso aprendizado e

trataremos deles mais tarde.
Herança
A herança é o mecanismo no qual o reuso de software está suportado. Você

deve lembrar de alguns conceitos importantes para entender a herança. Vamos
mostrar uma figura para exemplificar:
Herança Simples
Usuário
nome_usuário
logado
login()
logout()
esta_logado()
Administrador
criar_forum()
banir()
Figura 4.1 – Herança Simples.
Na figura 4.1 temos a representação de duas classes sendo que Usuário é a

super-classe ou classe pai, e Administrador é a sub-classe ou classe derivada.
Lembrando dos conceitos de orientação a objetos, a subclasse é uma especiali-
zação da superclasse podendo ser considerada um tipo da superclasse. Portanto,
Administrador é um tipo de Usuário.
capítulo 4 • 98
A implementação em PHP do diagrama da figura 4.1 é mostrada a seguir:
1. <?php
2. class Usuario{
3.
4. public $nome_usuario = "";
5. private $logado = false;
6.
7. public function login() {
8. $this->logado = true;
9. }
10.
11. public function logout() {
12. $this->logado = false;
13. }
14.
15. public function estaLogado() {
16. return $this->logado;
17. }
18. }
19.
20. class Administrador extends Usuario {
21. public function criaForum( $nomeForum ) {
22. echo "$this->nome_usuario criou um forum: $nomeForum<br>";
23. }
24.
25. public function banir( $usuario ) {
26. echo "$this->nome_usuario baniu o usuario: $usuario-
>nome_usuario<br>";
27. }
28. }
29. ?>
Código 3 – Usuario.php.
capítulo 4 • 99
A classe Usuario é bem simples de ser entendida. Veja alguns detalhes:
• Na linha 5 usamos o private no atributo logado, conforme havíamos comen-
tado anteriormente que poderíamos usar este tipo de modificador;
• Temos um atributo chamado nome_usuario que somente foi usado na classe
Administrador, definida no mesmo arquivo que a classe Usuario. Perceba a palavra
chave extends na linha 20 indicando que Administrador é uma subclasse de Usuario;
• Na classe Administrador, o atributo nome_usuario foi usado, lembrando que
este atributo pertence à superclasse.
1. <?php
2. include 'Usuario.php';
3. // Cria um novo usuário e faz o login dele
4. $usuario = new Usuario();
5. $usuario->nome_usuario = "Sr Smith";
6. $usuario->login();
7. echo $usuario->nome_usuario." ".($usuario->estaLogado()?"es-
ta logado":"nao esta logado")."<br>";
8.
9. // Cria um novo administrador e faz seu login
10. $admin = new Administrador();
11. $admin->nome_usuario = "Neo";
12. $admin->login();
13. echo $admin->nome_usuario." ".($usuario->estaLogado()?"esta
logado":"nao esta logado")."<br>";
14.
15. // Mostra: Neo criou um novo fórum: Matrix"
16. $admin->criaForum("Forum da Matrix");
17.
18. // Mostra "Neo baniu o usuário: Sr Smith"
19. $admin->banir($usuario);
20. ?>
Código 4 – Teste de Usuário.
capítulo 4 • 100
No código 4 temos o teste da herança. Perceba que uma vez que já conhece-
mos bem a linguagem PHP e somando aos seus conhecimentos de orientação a
objetos, não é complicado de entender a dinâmica do teste.
Essa é, realmente, a essência da herança no PHP. No restante deste capítulo,
você explorará várias maneiras de ajustar a herança para fins específicos, incluindo
a substituição, as classes e métodos finais, as classes abstratas e as interfaces.
A execução do código 3 está mostrada na figura4. 2:
Figura 4.2 – Exemplo de herança simples.
Herança multinível
A figura 4.3 mostra uma herança multinível, ou seja, que contém mais do que
um nível, além do nível pai-filho.
Pai
idade()
Filho
idadeFilho()
Neto
idadeNeto()
Figura 4.3 – Herança multinível.
capítulo 4 • 101
A implementação da hierarquia mostrada na figura 4.3 está mostrada no có-
digo 5.
1. <?php
2. class Pai {
3. public function idade() {
4. return ' idade: 80';
5. }
6. }
7. class Filho extends Pai {
8. public function idadeFilho() {
9. return ' idade: 50';
10. }
11. }
12. class Neto extends Filho {
13. public function idadeNeto() {
14. return 'idade: 20';
15. }
16. public function geracoes() {
17. echo "Pai " .$this->idade();
18. echo "<br>Filho ".$this->idadeFilho();
19. echo "<br>Neto ".$this->idadeNeto();
20. }
21. }
22. $obj = new Neto();
23. $obj->geracoes();
24. ?>
Código 5 – Herança multinível.
A execução do Teste.php está mostrada na figura 4.4. O método geracoes()

executa a sequência de métodos de suas superclasses.
capítulo 4 • 102
Figura 4.4 – Execução da herança multinível.
Interfaces
Uma interface é como uma descrição das ações que um objeto pode fazer.
Ela é escrita da mesma forma que uma classe, mas com o uso da palavra-chave
interface. Vamos lembrar de alguns detalhes sobre as interfaces.
• Todos os métodos declarados em uma interface devem ser públicos;
• Todos os métodos em uma interface devem ser implementados dentro de
uma classe. Se não fizer isso, ocorrerá um erro;
• A classe que implementa uma interface deve usar as mesmas assinaturas de
métodos definidas na interface;
• As interfaces podem ser estendidas usando o operador extends.
Vamos usar um exemplo para relembrar como funciona uma interface:

1. <?php
2. interface A {
3. public function setPropriedade($x);
4. public function descricao();
5. }
6.
7. class Teste implements A {
8. public function setPropriedade($x) {
9. $this->x = $x;
10. }
11. public function descricao() {
12. echo 'Descrevendo o objeto '.$this->x;
13. }
14. }
capítulo 4 • 103
15. $teste = new Teste();
16. $teste->setPropriedade("oculos");
17. $teste->descricao();
18. ?>
Código 6 – Interface:
No código 6 temos um exemplo bem simples de uma interface “A”. Ela possui
dois métodos: setPropriedade() e descricao(). Eles, obrigatoriamente, devem apare-
cer em qualquer classe que implementa a interface A. E isto ocorre na classe Teste,
nas linhas 8 e 11.
O atributo x aparece na classe Teste e é usado no teste da classe, entre as linhas
15 a 17.
Portanto, o uso de interfaces em PHP é bem parecido com outras linguagens.
Lembre-se que o conceito de orientação a objetos é mantido, o que estamos vendo
aqui neste capítulo não deve ser novidade para você, a única diferença deve ser
a sintaxe.
CONEXÃO
Caso você tenha alguma dúvida sobre orientação a objetos, sugerimos os seguintes links:
http://www.devmedia.com.br/os-4-pilares-da-programacao-orientada-a-objetos/9264.
O da Wikipedia está bem interessante. Nele você vai encontrar links para outras referên-
cias: <https://pt.wikipedia.org/wiki/Orienta%C3%A7%C3%A3o_a_objetos>.
Sobre as interfaces, não esqueça:

• Não podemos criar objetos para interface, mas a classe que implementa a
interface pode ter objetos;
• Não podemos definir uma variável em uma interface;
• Se estendemos a interface, todos os métodos da interface devem ser imple-
mentados na classe filha.
Classes abstratas
Uma classe abstrata é uma classe que contém pelo menos um método abstrato.
Este, por sua vez, é a declaração de função sem nenhum código e tem apenas o
capítulo 4 • 104
nome do método e seus parâmetros. Pode haver vários métodos na classe e deve-
mos declarar a classe como abstrata somente quando existir um método abstrato.
Vamos a um exemplo:
1. <?php
2. abstract class Carro {
3. public abstract function getMontadora();
4. public abstract function getPreco();
5. }
6. class Corolla extends Carro {
7. public function getMontadora() {
8. return "Toyota" . '<br/>';
9. }
10. public function getPreco() {
11. return 100000 . '<br/>';
12. }
13. }
14. class Uno extends Carro {
15. public function getMontadora() {
16. return "Fiat" . '<br/>';
17. }
18. public function getPreco() {
19. return 35000 . '<br/>';
20. }
21. }
22. $carro1 = new Corolla();
23. $carro2 = new Uno();
24. echo $carro1->getMontadora();
25. echo $carro1->getPreco();
26. echo $carro2->getMontadora();
27. echo $carro2->getPreco();
28. ?>
Código 7 – Classe abstrata.
No código 7 temos um exemplo da classe abstrata Carro. Como mostram

as linhas 3 e 4 temos a definição de dois métodos abstratos getMontadora() e
getPreco(). Perceba que não há código de implementação.
capítulo 4 • 105
Nas classes Corolla e Uno temos novamente os métodos, porém agora
implementados.
O resultado do teste das linhas 22 a 27 está mostrado na figura 4.5.
Figura 4.5 – Implementação da classe abstrata.
Lembre-se de alguns detalhes sobre as classes abstratas:

• Não existem instâncias de classes abstratas;
• Se uma classe possui apenas um método como abstrato, essa classe deve ser
uma classe abstrata;
• A classe filha que estende uma classe abstrata deve definir todos os métodos
da classe abstrata;
• Se o método abstrato for definido como protegido na classe pai, a imple-
mentação da função deve ser definida como protegida ou pública, mas não privada;
• As assinaturas dos métodos devem ser iguais às da classe abstrata, se houver
algum parâmetro opcional na classe filho não será aceito e o erro será mostrado;
• As classes abstratas que declaram todos os seus métodos como abstratos não
são interfaces com nomes diferentes. Pode-se implementar várias interfaces, mas
não estender várias classes (ou classes abstratas).
Agora já sabemos como criar uma classe, definir objetos para a classe e criar
métodos em PHP.
Métodos “mágicos”
Você pode achar que este tópico tem um nome peculiar, afinal, o que são
métodos mágicos? A gente não estuda este conceito em orientação a objetos. Mas
a própria documentação do PHP se refere a alguns métodos especiais como “má-
gicos”. Confira no link: http://php.net/manual/pt_BR/language.oop5.magic.php.
Apendemos nos tópicos anteriores sobre diferentes conceitos de programação
orientada a objetos, como herança, interface e abstração em PHP. Os métodos
capítulo 4 • 106
mágicos começam com o prefixo __, por exemplo __call, __get, __set. Existem
vários métodos mágicos em PHP. Vamos apresentar alguns destes métodos mági-
cos usados em programação orientada a objetos. A Tabela 1 mostra alguns destes
métodos e uma breve descrição:
NOME DESCRIÇÃO
Lembra que na seção 1 deste capítulo falamos que mais tarde che-
__construct() garia a hora de ver sobre construtores? Este método define o cons-
trutor de uma classe.
__destruct() Este método é chamado para destruir um objeto de uma classe.
É o método de acesso para obter o valor de alguma variável de

__get()
instância.
É o método de acesso para armazenar algum valor em uma variável

__set()
de instância.
Este método é útil para ter uma representação em string do objeto.

__toString()
Muito usado com o comando echo
__clone Faz a cópia de um objeto
Tabela 4.1 – Métodos mágicos em PHP.
Os nomes: __construir (), __destruir (), __call (), __callStatic (), __get (),
__set (), __isset (), __unset (), __sleep (), __wakeup (), __toString (), __ invoke
() , __set_state (), __clone () e __debugInfo () são os métodos mágicos do PHP.
Logo, não podemos ter funções com esses nomes em nenhum programa, a não ser
que você deseje usar a funcionalidade deles.
Construtores
Você já deve saber bem o que faz um construtor em uma classe. Mas apenas
para lembrá-lo, o construtor é o primeiro método a ser executado quando um
novo objeto é criado. É muito importante que toda classe que você definir tenha
um construtor, pois trata-se de uma boa prática de programação.
Lembre-se que o construtor é chamado automaticamente quando um objeto
é criado.
capítulo 4 • 107
1. <?php
2. class Animal {
3. public function __construct($nome){
4.
5. $this->nome =$nome;
6. }
7. }
8. $animal = new Animal("Ornitorrinco");
9. echo $animal->nome;
10. ?>
Código 8 – Exemplo de construtor.
Veja que na linha 3 temos a definição do construtor para a classe Animal. Na

linha 8, quando um novo objeto desta classe for criado, o construtor será chamado.
Lembre-se que podemos ter construtores em hierarquias de classes:
1. <?php
2. class Superclasse {
3. function __construct() {
4. echo "Construtor da classe pai <br>";
5. }
6. }
7. class Subclasse extends Superclasse {
9. parent::__construct();
10. echo "Construtor da classe filho <br>";
11. }
12. }
13. $obj = new Superclasse();
14. $obj = new Subclasse();
15. ?>
Código 9 – Construtores com herança.
Antes de espiar o que vai ser impresso na execução deste exemplo, tente olhar
e estudar o código. Na linha 13 é criado um novo objeto da superclasse. O cons-
trutor da superclasse imprime “Construtor da classe pai”.
capítulo 4 • 108
Na linha 14, é criado outro objeto, porém com o mesmo nome da linha 13, da
subclasse. O construtor da subclasse chama o construtor da superclasse na linha 9,
e este imprime a sua mensagem, e depois na linha 10, é impressa uma mensagem
do construtor da subclasse. Logo, a execução é mostrada na figura 4.6:
Figura 4.6 – Construtores e herança.
ATENÇÃO
Na linha 9 apareceu algo diferente chamado de Operador de Resolução de Escopo ou
dois pontos duplo “::”. Este operador permite acessar métodos ou propriedades estáticas,
constantes, e sobrecarregadas de uma classe. Neste caso, o construtor.
Destrutores
Um destruidor é chamado automaticamente quando o objeto é destruído.

O destruidor também é chamado automaticamente pelo coletor de lixo quando
a memória alocada para a variável ou o objeto que contém o recurso não é mais
necessário.
1. <?php
2. class Destrutor {
4. echo "Chamando o construtor <br>";
5. $this->nome = "objeto";
6. }
7. function __destruct() {
8. echo "Chamando o destrutor:" . $this->nome . "\n";
9. }
10. }
capítulo 4 • 109
11. $obj = new Destrutor();
12. ?>
Código 10 – Exemplo de destrutor.
Normalmente, não encontramos muitos exemplos de destrutores nos mate-

riais relacionados a orientação a objetos. Mas eles existem e são chamados quando
o objeto é destruído e isso já foi comentado. Mas você sabe quando de fato o
objeto é destruído?
No exemplo do código 10, ele é destruído quando o programa termina. Mas
caso o sistema operacional verificar que existem objetos na memória não usados
há algum tempo, o coletor de lixo é chamado e este vai destruir os objetos ociosos.
Veja a execução do código 10:
Figura 4.7 – Destrutor.
__get() e __set()
Estes dois métodos auxiliam o reforço do conceito de encapsulamento em

PHP.
O __get() é usado para leitura de dados de atributos não acessíveis (private).
Ele recebe como parâmetro o nome do atributo no qual ele vai fazer a leitura. O
método deve retornar o valor armazenado no atributo.
O __set() é usado para escrever algum valor em um atributo. Ele recebe dois
parâmetros: o nome do atributo e o valor a ser passado para o atributo.
1. <?php
2. class Aluno {
3. private $nome;
4. private $idade;
5.
capítulo 4 • 110
6. public function __construct() {}
7.
8. public function __set($var, $valor) {
9. $this->$var = $valor;
10. }
11.
12. public function __get($valor) {
13. return $this->$valor;
14. }
15. }
16. ?>
Código 11 – __get() e __set().
O teste para a classe Aluno é mostrado a seguir.
1. <?php
2. include 'Aluno.php';
3.
4. $aluno = new Aluno();
5. $aluno->nome = 'Nabucodonosor';
6. $aluno->idade = 28;
7. echo 'O aluno: '.$aluno->nome.' tem '.$aluno->idade.' anos de
idade';
Veja a forma de trabalhar com os métodos mágicos __get() e __set(). Nas

linhas 5 e 6 do teste temos uma maior praticidade de acessar as variáveis $nome e
$idade que são privadas na classe Aluno.
Tenha em mente que os parâmetros da linha 8 referem-se a um par chave-valor
onde o $var da linha 8 é o nome do atributo no qual queremos inserir o valor presente
no parâmetro $valor. Esta forma de trabalhar com os métodos de acesso é bem versátil.
O resultado do teste do __get() e __set() é:
capítulo 4 • 111
__toString()
Este método é usado quando queremos que um determinado objeto seja tra-
tado como uma string. Ele não possui argumentos e deve retornar uma string.
Observe a pequena inserção que fizemos nas linhas 16 a 18 na classe Aluno:
1. <?php
2. class Aluno {
3. private $nome;
4. private $idade;
5.
6. public function __construct() {}
7.
8. public function __set($nome, $valor) {
9. $this->$nome = $valor;
10. }
11.
12. public function __get($nome) {
13. return $this->$nome;
14. }
15.
16. public function __toString(){
17. return 'Nome: '.$this->$nome.' Idade:'.$this->$idade;
18. }
19. }
20. ?>
O teste passa a ser:
1. <?php
2. include 'Aluno.php';
3.
4. $aluno = new Aluno();
5. $aluno->nome = 'Nabucodonosor';
6. $aluno->idade = 28;
7. echo $aluno;
capítulo 4 • 112
E tem como resultado:
Percebeu no teste que demos um echo no objeto e ele retornou como se fosse
uma string? O toString() normalmente cria uma linha ou um array percorrendo
todas as variáveis de instância da classe e mostra o valor de cada uma delas. Em
alguns casos, nem todas as variáveis são mostradas, mas dependerá do caso. É inte-
ressante criar uma variável desta para cada classe, pois existem várias situações que
o valor das variáveis de instância podem ser usadas.
Você deve saber que a orientação a objetos é um grande campo de estudo na
área de programação. E em PHP, por ser uma linguagem bastante difundida, te-
mos várias aplicações nas quais a orientação a objetos pode ser usada.
Atualmente, na programação para web é impensável não ter algum tipo de
framework para nos ajudar nos projetos de desenvolvimentos de portais, aplicati-
vos e sites. frameworks como:
• Yii (www.yiiframework.com);
• Laravel (laravel.com);
• Code Igniter (codeigniter.com);
• CakePHP (cakephp.org);
• Zend Framework (framework.zend.com).
E muitos outros se baseiam em classes e objetos para poder funcionar. Por

serem frameworks, facilidades para criar telas, persistir objetos no banco, criar rotas
e regras de segurança são baseados na orientação a objetos.
Além disso, os modernos e famosos CMS (Content Management Systems) como
Wordpress, Joomla, Drupal e outros, escritos em PHP, usam demais a orientação a
objetos nas suas estruturas.
Só para exemplificar, veja como é o código de uma classe para Notícias em
Code Igniter, obtida de: https://www.digitalocean.com/community/tutorials/
codeigniter-getting-started-with-a-simple-example.
capítulo 4 • 113
class News_model extends CI_Model {
public function __construct() {
$this->load->database();
}
public function get_news($id) {
if($id != FALSE) {
$query = $this->db->get_where('news', array('id' => $id));
return $query->row_array();
}
else {
return FALSE;
}
}
}
Viu como o framework usa a orientação a objetos? Embora possa ser compli-
cado na primeira vista, o framework é bem fácil de mexer e aprender.
Nosso objetivo aqui é mostrar o básico para você sobre como usar a orientação
a objetos em PHP. Temos a certeza que com os ensinamentos apresentados aqui
aliada à sua experiência e dedicação, além de pesquisas e estudos, você conseguirá
criar muitos projetos de sucesso com a linguagem neste paradigma.
ATIVIDADES
01. Observe a classe a seguir.
class Usuario {
private $nome;
private $sobrenome;
}
Adicione um construtor para a classe para atribuir um valor ao $nome.
02. Usando a classe do exercício anterior, crie um construtor para iniciar os valores de
$nome e $sobrenome
capítulo 4 • 114
03. Crie um método que retorne o nome completo do usuário
04. Crie um novo objeto, $usuario1 e passe para o construtor os valores do primeiro e último
nome. O primeiro nome é "Nabuco" e o sobrenome é "Donosor" (o usuário pode escolher o
nome e sobrenome).
05. Mostre o nome completo do usuario1 com o método da classe
DEITEL, P. Ajax: Rich Internet Applications e desenvolvimento web para programadores. São Paulo:
Pearson, 2008.
THE PHP GROUP. Documentation. Manual do PHP. Disponível em: <https://secure.php.net/manual/
pt_BR/introduction.php>. Acesso em: 30 jul. 2017.
W3SCHOOLS. PHP 5 Tutorial. PHP Tutorial. Disponível em: <https://www.w3schools.com/php/>.
capítulo 4 • 115
capítulo 4 • 116
5
Integração de PHP
com banco de
dados
Integração de PHP com banco de dados
Dê uma olhada no sumário do nosso livro e veja o que já fizemos até agora:
estudamos HTML, CSS, Javascript, Jquery, PHP ... É bastante coisa. Está na hora
da gente embrulhar o pacote com uma embalagem bacana para completar o nosso
aprendizado: acessar e conversar com banco de dados. Temos certeza que a maio-
ria absoluta dos projetos que você participar envolvendo programação para inter-
net vai usar um banco de dados para armazenar as informações do seu sistema.
Este capítulo vai requerer que você tenha conhecimentos básicos de manipu-
lação de banco de dados como criação de tabelas, comandos de inserção, consulta,
remoção e edição de registros, bem como conhecer algum cliente de banco de
dados da sua preferência, mas aqui vamos usar o PHPMyAdmin. Estamos usando
o ambiente Windows com o XAMPP instalado, pois é bem simples de instalar
e usar.
Com os conhecimentos que vamos introduzir aqui mais o que você já acumu-
lou neste tempo, e mais sua criatividade, você terá condições de criar aplicações
bem bacanas, interativas e modernas. Só que este capítulo é apenas o começo. É
muito importante que você vá além dos limites deste capítulo e procure formas
de desenvolvimento em PHP mais produtivas como algum dos vários frameworks
que existem no mercado.
E conte conosco para ajudar na sua jornada. Bons estudos!
OBJETIVOS
• Criar programas com interação com banco de dados;
• Criar telas de cadastro completas em PHP e MySQL.
capítulo 5 • 118
Introdução
Já vimos vários recursos nas nossas aulas. Já temos condições de criar aplica-
ções para a internet bem interativas no lado cliente com Javascript e JQuery, criar
scripts orientados a objetos em PHP no servidor, mas falta uma parte super im-
portante: a conexão com banco de dados. E isto o PHP faz muito bem.
Neste capítulo vamos mostrar a ciação de um CRUD (Create, Read, Update,
Delete) completo, envolvendo uma aplicação bem simples em PHP com banco
de dados MySQL.
No caso do MySQL, é possível fazer a conexão com o banco de dados por
meio de duas formas:
• com a extensão MySQLi;
• por meio do PDO (PHP Data Objects).
Vamos usar o PDO porque ele consegue trabalhar com vários tipos de bancos
de dados. Se você estiver usando o Postgres, por exemplo, os exemplos que vamos
desenvolver aqui servirão para você. Idem se usar MariaDB etc. E como você pode
deduzir, o MySQLi só funciona com MySQL.
É claro que dependendo do seu projeto você pode usar o MySQLi desde que
o banco de dados seja MySQL. A maioria dos frameworks existentes para PHP
usam o PDO.
No nosso exemplo, vamos usar vários scrips em PHP para criar o projeto. E
vamos começar pelo script de conexão com o banco de dados.
Antes de começar, é obrigatório que o banco de dados esteja criado.
Se você estiver usando o XAMPP como recomendamos no início dos estu-
dos de PHP, execute-o e em seguida crie o banco de dados no PHPMyAdmin.
Normalmente ele fica instalado na seguinte URL: http://localhost/phpmyadmin/.
O banco de dados pode ser chamado Teste e nele vamos criar uma tabela cha-
mada Pessoa com os seguintes campos (e seus respectivos tipos):
• Id (integer, autonumérica);
• Nome (varchar(100);
• Idade (integer);
• Salario (double);
• Data de nascimento (date).
capítulo 5 • 119
Figura 5.1 – Tela do PHPMyAdmin com o banco de dados criado.
Com o banco de dados e a tabela criados, vamos aos programas.
Operações do cadastro
Conexão com o banco de dados
Em primeiro lugar vamos criar a conexão com o banco de dados em um ar-

quivo chamado conexao.php:
CONEXAO.PHP
8. <?php
9. $servidor = "localhost";
10. $usuario = "root";
11. $senha = "";
12.
13. try {
capítulo 5 • 120
14. $con = new PDO("mysql:host=$servidor;dbname=test", $usua-
rio, $senha);
15. $con->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
16. echo "Conexão OK";
17. }
18. catch(PDOException $e) {
19. echo "Erro na conexao: " . $e->getMessage();
20. }
21. ?>
Decidimos criar um arquivo específico para a conexão porque iremos usar os

parâmetros de conexão várias vezes no nosso projeto.
Como você deve ter reparado, temos 3 variáveis que tratam da localização e
credenciais de acesso ao banco: $servidor, $usuario e $senha. a variável $servidor
guarda uma URL onde no nosso caso é o próprio servidor do XAMPP, mas pode-
ria ser uma localização remota também.
A conexão é feita dentro de um bloco try-catch, pois nem sempre a conexão é
estabelecida com sucesso e no caso de um erro, é importante saber o que gerou o
erro, o que é feito na linha 12 pelo método getMessage(). Ainda, a conexão é um
objeto instanciado na linha 7 do tipo PDO.
Neste objeto temos um método chamado setAtrribute() onde configuramos
o tipo de erro que a conexão gerará se houver algum problema. Na linha 8 seta-
mos o atributo com as configurações padrão: ATTR_ERRMODE, ERRMODE_
EXCEPTION.Isto faz com que em caso de erro, uma exceção seja gerada e pode-
mos tratá-la dentro de um try-catch.
Vamos testar o script conexao.php:
Figura 5.2 – Teste de conexão.
Ótimo! Temos um banco conectado para trabalhar. Agora vamos partir para o
formulário de entrada de dados.
capítulo 5 • 121
Entrada de dados
A tabela Pessoa é bem simples, temos apenas 5 campos sendo que um deles
é o campo Data de Nascimento o qual requer alguns detalhes que vamos tratar
mais tarde.
Portanto, precisamos de um formulário com apenas quatro campos. Epa! Não
são cinco campos? Por que está faltando um? Lembre-se que o campo Id é do tipo
integer e automático, logo, não vamos precisar inserir dados para ele.
Vamos criar um formulário bem simples, sem formatações usando CSS (de-
pois a gente deixa ele mais bonito). Veja como ele vai ficar:
Figura 5.3 – Formulário de entrada de dados (form.php).
O código para o formulário, inserido no arquivo form.php é:
FORM.PHP
1. <!doctype html>
2. <html>
3. <head>
4. <title> Formulário para inclusão de dados</title>
5. </head>
6. <body>
7. <form action="insere.php" method="post">
8. <label for="nome">Nome:</label>
9. <input type="text" id="nome" name="nome" placeholder="Di-
gite seu nome">
10. <br><br>
capítulo 5 • 122
11. <label for=idade> Idade:</label>
12. <input type="number" id="idade" name="idade" placeholder="-
Digite sua idade">
13. <br><br>
14. <label for="salario"> Salario:</label>
15. <input type="number" id="salario" name="salario" step="0.01"
placeholder="Digite seu salario">
16. <br><br>
17. <label for=data> Data de nascimento:</label>
18. <input type="date" id="data" name="data_nascimento" pla-
ceholder="Digite sua data de nascimento">
19. <br><br>
20. <input type="submit" value="Salvar Formulário">
21. </form>
22. </body>
23. </html>
Lembrando do capítulo 3 onde tratamos de HTML e formulários, perceba na

linha 7 que vamos enviar os dados via POST para um script chamado insere.php.
Não se esqueça que este script deve estar na mesma pasta que o formulário. Vamos
ver como fazer este script:
INSERE.PHP
1. <?php
2. include 'conexao.php';
3.
4. $nome = $_POST['nome'];
5. $idade = $_POST['idade'];
6. $salario = $_POST['salario'];
7. $nascimento=$_POST['data_nascimento'];
8.
9. $sql = "insert into pessoa(nome, idade, salario, data_nas-
cimento) values('$nome', $idade, $salario, '$data_nascimento') ";
10. $count = $con->exec($sql);
11. echo "<p> $count registro foi incluído</p>";
12. ?>
capítulo 5 • 123
Para testar este script, é recomendável apagar a linha 09 do script conexao.php
para evitar que a frase “Conexao OK” apareça toda hora.
Figura 5.4 – Este do script insere.php.
Podemos verificar no PHPmyadmin que o registro realmente foi incluído.

Use o comando select * from pessoa na aba SQL e você poderá verificar os registros
atuais. Observe a figura 5.5:
Figura 5.5 – Resultado do script insere.php no banco de dados.
Observando a figura 5.5 percebemos que a data de nascimento está armaze-

nada como “1972-12-02”, equivalente ao formato YYYY-MM-DD (ano, mês e
dia). Esta é a forma que o banco de dados armazena datas, para facilitar a pesquisa
posteriormente. Guarde esta informação porque vamos ter um detalhe a ser con-
siderado quando formos consultar o banco de dados.
Fizemos a primeira operação do CRUD, o Create, equivalente ao insert.
Vamos agora tratar da segunda operação: o select (CRUD – read).
capítulo 5 • 124
Script de consulta
O script de consulta aos dados será chamado de consulta.php. Ele é bem sim-
ples e poderia ser mais completo e complexo. Por enquanto vamos optar pela
simplicidade para poder entender como ele funciona. Depois a gente aprimora
ele. Veja o código:
CONSULTA.PHP
1. <?php
3.
4. $sql = 'SELECT id, nome, idade, salario, data_nascimento
FROM pessoa ORDER BY nome';
5. echo "<table border=1>";
6. echo " <caption>Consulta aos dados das pessoas
cadastradas</caption>";
7. echo "
8. <thead>
9. <tr>
10. <th>Nome</th>
11. <th>idade</th>
12. <th>Salario</th>
13. <th>Data de nascimento</th>
14. <th> </th>
15. <th> </th>
16. </tr>
17. </thead>";
18. echo " <tbody>";
19. foreach ($con->query($sql) as $row) {
20. echo "<tr>";
21. echo "<td>". $row['nome'] . "</td>";
22. echo "<td>". $row['idade'] . "</td>";
23. echo "<td>". $row['salario'] . "</td>";
24. echo "<td>". $row['data_nascimento'] . "</td>";
25. echo "<td>";
26. echo "<a href=editar.php?id=".$row['id'].">Editar</a>";
capítulo 5 • 125
27. echo "</td>";
28. echo "<td>";
29. echo "<a href=excluir.php?id=".$row['id'].">Excluir</a>";
30. echo "</td>";
31. echo "</tr>";
32. }
33. echo "</tbody>";
34. echo "</table>"
35. ?>
A tela formada pelo script é mostrada na figura 5.6. Novamente não estamos
usando nenhuma formatação com CSS e inserimos outros registros para deixar a
tela um pouco mais representativa.
Lembre-se que para poder inserir outros registros, temos que usar a URL
apontando para o script form.php toda vez que quisermos inserir um novo registro.
Figura 5.6 – Tela de consulta aos dados inseridos
Vamos estudar o script consulta.php:

• Na linha 2 novamente estamos incluindo o arquivo conexao.php. Ele será
obrigatório em todos os scripts que usar a conexão com o banco de dados. Lembre-
se que a conexão é armazenada no objeto con e por meio dele vamos fazer a comu-
nicação com o banco de dados;
• Na linha 4 temos o comando SQL para fazer a consulta aos dados. É uma
consulta fixa, não podemos alterar pelo navegador e retornar todos os registros
existentes na tabela. Em programas “reais” é interessante que o comando SQL seja
modificado a cada consulta, com mais opções por exemplo com a inclusão de um
filtro ou ordenação dos registros. Do jeito que está, os dados serão mostrados da
forma como estão armazenados no banco de dados;
• Montamos uma tabela para mostrar os dados entre as linhas 7 a 34;
• Entre as linhas 19 e 32 temos um loopI que repete para cada registro re-
tornado pelo comando SQL da linha 4. O método query() do objeto $con faz
a consulta no banco de dados, de acordo com a string $sql criada na linha 4.
O resultado do método query() gera um array, que é percorrido pelo foreach da
capítulo 5 • 126
linha 19. O array é associado à variável array $row, a qual vai receber como valores
os registros. Os índices de $row[] são os nomes dos campos presentes no comando
SQL da linha 4. Veja uma representação desse contexto na figura 5.7:
Figura 5.7 – Resultado do método query como array
• Perceba que montamos uma linha da tabela HTML para cada registro en-
contrado no banco de dados combinando com os dados obtidos pela query. Veja
ainda que temos 2 links, um para editar o registro (linha 26) e outro para apagá-lo
(linha 29). Nestes casos, passamos o id de cada registro por get pela URL para o
script respectivo.
Temos um problema que ficamos devendo: observe como a data de nasci-

mento está mostrada. Não fica legal desta forma, pois nosso padrão de data é
dd/mm/aaaa. Temos algumas alternativas para contornar isso: ou recuperamos
do banco de dados a data já formatada e neste caso quem seria responsável pela
formatação é o banco de dados, ou o PHP formata a data e mostra na tela. Vamos
usar o PHP. Altere a linha 24 do script consulta.php para inserir a função de for-
matação de data do PHP. Altere para:
echo "<td>". date('d/m/Y',strtotime($row['data_nascimento'])) . "</td>";
A função strtotime() converte strings para o fomato data. Ela é necessária por-
que o $row[] de cada linha será uma string quando recuperada do banco de dados,
assim como qualquer outro valor. Lembre-se disso para outros tipos de campos. A
função date() por sua vez, formata uma data para um padrão pré-definido. Neste
caso, “d/m/Y” é o equivalente ao formato que queremos. A função date() neste
caso tem como parâmetro a data convertida pela função strtotime().
capítulo 5 • 127
CONEXÃO
Para conhecer outros formatos de data, acesse o link: <http://php.net/manual/pt_
BR/function.date.php>.
Com a consulta pronta, temos duas tarefas do CRUD prontas: o Create e o

Read. Vamos ao Alter, representado pelo script edita.php.
Script de Alteração
A tela de consulta contém links para editar os registros de cada linha da tabela.
Vamos criar a tela para edição dos dados. O arquivo terá como nome editar.php
para ficar compatível com o link de edição presente na linha 26 do script
consulta.php.
EDITAR.PHP
1. <?php
3. $id = $_GET['id'];
4.
5. $sql = "SELECT id, nome, idade, salario, data_nascimento
FROM pessoa where id=$id ";
6. echo "<html>";
7. echo "<body>";
8. echo "<form action='edita.php' method='post'>";
10. echo "<input type='hidden' name='id' value='$id' >";
11. echo "<label for='nome'>Nome:</label>";
12. echo "<input type='text' id='nome' name='nome' placehol-
der='Digite seu nome' value='".$row['nome']."' >";
13. echo "<br><br>";
14. echo "<label for='idade'> Idade:</label>";
15. echo "<input type='number' id='idade' name='idade' pla-
ceholder='Digite sua idade' value='".$row['idade']."' >";
capítulo 5 • 128
17. echo "<label for='salario'> Salario:</label>";
18. echo "<input type='number' id='salario' name='salario'
step='0.01' placeholder='Digite seu salario' value='".$row['sala-
rio']."' >";
20. echo "<label for='data_nascimento'> Data de
nascimento:</label>";
21. echo "<input type='date' id='data' name='data' pla-
ceholder='Digite sua data de nascimento' value='".$row['data_nasci-
mento']."' >";
23. echo "<input type='submit' value='Salvar Formulário'>";
24. }
25. echo "</form>";
26. echo "</body>";
27. echo "</html>";
28. ?>
Não precisamos mais falar do script conexao.php na linha 2 não é?

A linha 3 possui a variável $id que vai receber o id do registro pela URL por
get. Observe que para receber o get, usamos o array $_GET[] do PHP, já comen-
tado em capítulos anteriores.
Baseado no valor recuperado, a linha 5 monta o comando SQL para recuperar
o registro específico no banco de dados. Veja que combinamos o valor desta variá-
vel com o where do comando SQL na linha 5.
As linhas 9 a 25 montam um formulário baseado no comando SQL, agora
executado e armazenado no objeto $con, da mesma forma que fizemos no script
de consulta.
Os dados são montados em um formulário (<form>) e sabemos que o <form>
é usado para inserir dados no banco de dados. Os dados do formulário são en-
viados para um script chamado edita.php via post, da mesma forma que fizemos
na tela de inserção. Ou seja, para editar o formulário, vamos alterar os registros e
enviar os dados alterados para o banco de dados.
Veja a linha 10 e preste atenção nela, ela é muito importante e obrigatória.
Colocamos no formulário um campo oculto (hidden) o qual vai guardar o valor
do id do registro, pois este será necessário no script edita.php para o comando de
capítulo 5 • 129
edição (update). Lembre-se que os campos hidden também são enviados via post
para o script relacionado no action do formulário. A figura 5.8 mostra um exemplo
da tela de edição destacando o id recuperado por get pela URL.
Figura 5.8 – Formulário de edição.
O script de alteração é mostrado a seguir:
EDITA.PHP
1. <?php
3.
4. $id=$_POST['id'];
5. $nome = $_POST['nome'];
6. $idade = $_POST['idade'];
7. $salario = $_POST['salario'];
8. $nascimento=$_POST['data_nascimento'];
9.
10. $sql = "update pessoa set nome='$nome', idade=$idade, sa-
lario=$salario, data_nascimento=$nascimento where id=$id ";
12. echo "<p> $count registro foi atualizado</p>";
13. ?>
Após a execução do script edita.php, será mostrada uma mensagem contendo

o número de registros alterados. Deu para sacar que sempre será 1 registro apenas,
não é? Pois o where do comando SQL sempre filtrará 1 registro que é a chave
primária da tabela.
capítulo 5 • 130
Como exemplo, alteramos o salário do John Isnou para 999. Veja o resultado
na figura 5.9:
Figura 5.9 – Resultado da alteração.
Script de exclusão
Excluir um registro é uma tarefa que pode ser feita de várias formas também.
Vamos optar por mostrar um formulário no qual não seja possível modificar os
valores e pedir a confirmação do usuário para apagar o registro. É uma questão de
segurança. Vamos ao formulário:
EXCLUIR.PHP
1. <?php
3. $id = $_GET['id'];
4.
6. echo "<html>";
7. echo "<body>";
8. echo "<form action='exclui.php' method='post'>";
11. echo "<label for='nome'>Nome:</label>";
12. echo "<input type='text' id='nome' name='nome' value='".$ro-
w['nome']."' readonly>";
14. echo "<label for='idade'> Idade:</label>";
15. echo "<input type='text' id='idade' name='idade' value='".$ro-
w['idade']."' readonly>";
capítulo 5 • 131
17. echo "<label for='salario'> Salario:</label>";
18. echo "<input type='text' id='salario' name='salario'
value='".$row['salario']."' readonly>";
20. echo "<label for='data_nascimento'> Data de
nascimento:</label>";
21. echo "<input type='text' id='data_nascimento' name='da-
ta_nascimento' value='".date('d/m/Y',strtotime($row['data_nascimen-
to']))."' readonly>";
23. echo "<input type='submit' value='Apagar registro'>";
24. }
25. echo "</form>";
26. echo "</body>";
27. echo "</html>";
28. ?>
Figura 5.10 – Exclusão de registro.
capítulo 5 • 132
A figura 5.10 mostra a sequência de telas que geram a exclusão do registro.
Temos o formulário de exclusão, a tela com a confirmação da exclusão e por fim a
tela de consulta dos dados após a exclusão. Perceba que “John Isnou” foi excluído
do banco de dados. A seguir temos o script que executa o comando SQL para
excluir o registro.
EXCLUI.PHP
1. <?php
3.
4. $id=$_POST['id'];
5. $sql = "delete from pessoa where id=$id ";
7. echo "<p> $count registro foi remvido</p>";
8. ?>
Melhorando a aplicação
O nosso cadastro está completo, mas não está muito funcional para o usuário.
Seria legal que houvesse um pouco de interatividade e até mesmo uma tela mais
bonita e navegável para o usuário.
Uma forma rápida, elegante e atual de fazer isso é usar o Bootstrap. O Bootstrap
(http://www.getbootstrap.com) é um framework que contempla HTML, CSS e
Javascript para desenvolver sites responsivos.
Vamos aplicá-lo no nosso projeto agora. Lembra que falamos no capítulo 2
sobre importar códigos externos no nosso projeto ou fazer o download e usá-los
localmente? Agora é uma boa hora para tomar essa decisão e vamos usar um CDN
para incluir os arquivos necessários do Bootstrap no nosso projeto.
O próximo passo é criar um arquivo index.php, que será o responsável por
chamar os outros scripts por meio de um menu que vamos criar.
No arquivo index.php insira o seguinte código, observe o uso dos CDN nas
linhas 12, 32 e 33.
capítulo 5 • 133
INDEX.PHP
1. <?php
2. $pagina="consulta";
3. if(isset($_GET["pagina"]))
4. $pagina=$_GET["pagina"];
5. ?>
6. <!DOCTYPE html>
7. <html lang="pt-br">
8. <head>
9. <meta charset="utf-8">
10. <meta name="viewport" content="width=device-width, ini-
tial-scale=1, shrink-to-fit=no">
11. <title>CRUD</title>
12. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.
com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYii-
SIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
13. <link rel="stylesheet" href="estilo.css">
14. </head>
15. <body>
16. 
17. <?php
18. include 'nav.php';
19. ?>
20. <div id="main" class="container-fluid">
21. <?php
22. if ($pagina == "consulta"){
23. include 'consulta.php';
24. }
25. else{
26. $url = $pagina.'.php';
27. include "$url";
28. }
29. ?>
30. </div>
31. 
capítulo 5 • 134
32. <script src="https://ajax.googleapis.com/ajax/libs/
33. <script src="https://maxcdn.bootstrapcdn.com/
bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5I-
Qib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
34. </body>
35. </html>
Para ajustar a página, criamos um arquivo de estilos específico para a página

chamado estilo.css.
ESTILO.CSS
body {
padding-top: 50px;
}
.crud {
padding: 40px 15px;
text-align: center;
}
A página está um pouco diferente do que você imaginava, não é? A resposta é

que estamos criando uma estrutura muito típica em aplicações para internet onde
teremos um arquivo index.php que vai chamar apenas a parte central, que vai mu-
dar conforme o script que precisamos.
Para isso precisamos criar um mecanismo inicial que vai aceitar um script por
get. Observe a linha 3: se não vier nada por get, a variável $pagina vai conter o valor
“consulta”. Este valor será usado para incluir o arquivo consulta.php lá nas linhas
23 e 27. Se o get conter o valor “excluir” por exemplo, ele vai ser concatenado na
linha 26 com a extensão “.php” e ser incluído na linha 27. Basicamente é este
mecanismo que vai alternar as nossas páginas.
Vamos, por enquanto, alterar apenas a linha 5 do script consulta.php criado
anteriormente para:
echo "<table class='table table-striped'>";
capítulo 5 • 135
Colocamos a formatação específica para tabelas do Bootstrap. É muito im-
portante, se você não estiver acostumado com o Bootstrap, consultar a página de
documentação do framework para escolher a formatação mais adequada e que vi-
sualmente agrada. Neste caso, usamos a tabela listrada (table-striped). Poderíamos
colocar outras formatações para acrescentar mais detalhes visuais, mas só esta for-
matação já vai ficar legal, veja como ficou agora (não vamos mais executar o script
diretamente, a partir de agora, vamos só usar o index.php).
Figura 5.11 – Uso do Bootstrap no index.php.
Vamos colocar um menu superior, chamado nav no Bootstrap. Crie um arqui-

vo chamado nav.php e insira o seguinte código:
NAV.PHP
1. <nav class="navbar navbar-inverse navbar-fixed-top">
2. <div class="container-fluid">
3. <div class="navbar-header">
4. <button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#navbar" aria-expanded="false"
aria-controls="navbar">
5. <span class="sr-only">Toggle navigation</span>
6. <span class="icon-bar"></span>
9. </button>
10. <a class="navbar-brand" href="#">Nosso CRUD</a>
11. </div>
12. <div id="navbar" class="navbar-collapse collapse">
13. <ul class="nav navbar-nav">
14. <li><a href="#">Início</a></li>
capítulo 5 • 136
15. </ul>
16. </div>
17. </div>
18. </nav>
E faça uma pequena modificação no index.php:
...
15. <body>
16. 
17. <?php
18. include 'nav.php';
19. ?>
20. <div id="main" class="container-fluid">
...
Veja como está ficando legal:
Figura 5.12 – Nova tela estilizada com Bootstrap.
Vamos estilizar os links “Editar” e “Excluir” com uma classe para botões.
Altere as linhas dos links no arquivo consulta.php para:
echo "<a class='btn btn-warning btn-xs' href='index.

php?pagina=editar&id=".$row['id']."'>Editar</a>";
echo "<a class='btn btn-danger btn-xs' href='index.
php?pagina=excluir&id=".$row['id']."'>Excluir</a>";
capítulo 5 • 137
E olhe o resultado:
Figura 5.13 – Alterações nos botões.
As alterações nos links vão fazer com que o nome do respectivo script seja
enviado via get para o index.php juntamente com outro parâmetro id referente ao
índice do registro.
Vamos agora alterar os formulários nos arquivos: editar.php, excluir.php e
form.php. A alteração que vamos fazer no form.php serve como base para os outros
arquivos. Perceba que as tags iniciais de HTML foram removidas, pois agora estes
scripts serão adicionados ao index.php, o qual já contém as tags.
1. <form action="insere.php" method="post">

2. <div class="row">
3. <div class="form-group col-md-4">
5. <input type="text" id="nome" name="nome" placehol-
der="Digite seu nome" class="form-control">
6. </div>
7. </div>
11. <input type="number" id="idade" name="idade" pla-
ceholder="Digite sua idade" class="form-control">
12. </div>
13. </div>
capítulo 5 • 138
17. <input type="number" id="salario" name="salario"
step="0.01" placeholder="Digite seu salario" class="form-control">
18. </div>
19. </div>
23. <input type="date" id="data_nascimento" na-
me="data_nascimento" placeholder="Digite sua data de nascimento"
class="form-control">
24. </div>
25. </div>
26. <input type="submit" value="Salvar Formulário"
class="btn-btn-default">
27. </form>
O resultado será:
Figura 5.14 – Novo formulário para inclusão de dados.
capítulo 5 • 139
O arquivo editar.php ficará com as seguintes alterações (observe as alterações
em relação às formatações do Bootstrap).
EDITAR.PHP
1. <?php
3. $id = $_GET['id'];
4.
6. echo "<form action='edita.php' method='post'>";
9. ?>
13. : <input type="text" id="nome" name="nome"
placeholder="Digite seu nome" class="form-control" value="<?php echo
$row['nome'];?>">
14. </div>
15. </div>
19. <input type="number" id="idade" name="idade"
placeholder="Digite sua idade" class="form-control" value="<?php echo
$row['idade'];?>">
20. </div>
21. </div>
25. <input type="number" id="salario" name="sa-
lario" step="0.01" placeholder="Digite seu salario" class="form-con-
trol" value="<?php echo $row['salario'];?>">
capítulo 5 • 140
26. </div>
27. </div>
31. <input type="date" id="data_nascimento" name="-
data_nascimento" placeholder="Digite sua data de nascimento" class="-
form-control" value="<?php echo $row['data_nascimento'];?>">
32. </div>
33. </div>
34. <?php
35. }
36. echo "<input type='submit' value='Salvar Formulário' clas-
s='btn btn-primary'>";
37. echo "</form>";
38. ?>
Precisamos incluir um botão na página inicial para apontar para o formulário

de inclusão de dados (form.php):
...
echo "<h3 class='page-header'>Pessoas</h3>";
echo "<div class='col-md-3'>";
echo "<a href='index.php?pagina=form' class='btn btn-primary
h2'>Novo registro</a>";
echo "</div>";
echo "<table class='table table-striped'>";
...
Você deve se lembrar que a cada vez que inserimos, editamos ou excluimos um
registro, após a operação no banco de dados, aparece uma mensagem dizendo que
um registro foi incluído, editado ou excluído. Podemos alterar os scripts e colocar
uma função em PHP que redireciona a navegação para o index.php. A alteração
deve então remover a mensagem e inserir a seguinte linha nos arquivos: insere.php,
edita.php e exclui.php.
header("location:index.php");
capítulo 5 • 141
Vamos ver como ficou nossa aplicação:
Figura 5.15 – Aplicação final: tela inicial.
Figura 5.16 – Aplicação final: inserção de dados.
capítulo 5 • 142
Figura 5.17 – Aplicação final: Tela de edição de dados.
Figura 5.18 – Aplicação final: Tela de exclusão de registro.
capítulo 5 • 143
Considerações finais
Existem várias formas de criar um CRUD semelhante ao nosso. Se você pro-

curar na internet, existem vários exemplos diferentes e o nosso é mais uma varia-
ção. Não tivemos algumas preocupações como validação de dados e outras tarefas
automáticas, por exemplo: se temos um campo chamado data de nascimento, qual
é a utilidade de informar a idade da pessoa? Poderia ser calculado automaticamen-
te de acordo com a data, não é?
Outra validação que poderíamos adicionar é no campo nome: poderíamos
impedir que o usuário digite números e isto poderia ser feito via Javascript ou
Jquery. Enfim, dá para colocar muito mais recursos para tornar o exemplo mais
rico, porém por questão de espaço e para deixar aqui o essencial para se aprender,
deixamos esta tarefa para você.
O importante agora é você expandir os exemplos que fizemos aqui. Colocar
uma autenticação no sistema com login e senha, inserir outras tabelas, fazer joins
entre elas e mostrar na tela, criar formulários master-detail, entre outras muitas
coisas que dá para serem feitas. Agora é com você. Conte conosco para te orientar
em busca de ampliar seus conhecimentos!
ATIVIDADES
01. Durante o nosso texto, ao recuperar datas do banco de dados, optamos por formatar a
data no código PHP. Como poderia ser feito pelo banco de dados para que este envie a data
já formatada para o PHP?
02. Quando usamos POST, as variáveis são mostradas na URL

( ) Verdadeiro ( ) Falso
03. No nosso texto, trabalhamos com MySql. Como seria a forma de se conectar com o
PostgreSQL usando PDO?
04. Se o usuário tiver os valores a serem inseridos em um array, como você faria para inserir
o array no banco de dados? (Em alguns frameworks é assim que os dados são inseridos).
capítulo 5 • 144
DEITEL, P. Ajax: Rich Internet Applications e desenvolvimento web para programadores. São Paulo:
Pearson, 2008.
THE PHP GROUP. Documentation. Manual do PHP. Disponível em: <https://secure.php.net/manual/
pt_BR/introduction.php>. Acesso em: 30 jul. 2017.
W3SCHOOLS. PHP 5 Tutorial. PHP Tutorial. Disponível em: <https://www.w3schools.com/php/>.
GABARITO
Capítulo 1
01.
<script src="xxx.js">
02.
alert("Alô Mundo");
03. D
04.
Capítulo 2
01. E 05. A
02. C
03. E
04. No cliente
capítulo 5 • 145
Capítulo 3
01.
$_GET[];
02. Falso
03.
echo “Hello World”
04.
function nome() { ... }
05. Quando os dados são enviados por um formulário HTML via método POST (<form ...
method="POST">), podemos usar o array $_POST, que usa como chaves os nomes dos
campos do formulário. Por exemplo: os dados do campo "nome" do formulário podem ser
acessados por $_POST["nome"].
Capítulo 4
01.
class Usuario {
private $nome;
private $sobrenome;
public function __construct($nome) {
$this -> nome = $nome;
}
}
02.
class Usuario {
private $nome;
private $sobrenome;
public function __construct($nome,$snome) {

$this -> nome = $nome;
$this -> sobrenome = $snome;
capítulo 5 • 146
}
}
03.
class Usuario {
private $nome;
private $sobrenome;
public function __construct($n,$s) {

$this -> nome = $n;
$this -> sobrenome = $s;
}
public function getNomeCompleto() {

return $this -> nome . " " . $this -> sobrenome;
}
}
04.
$usuario1 = new Usuario("Nabuco", "Donosor");
05.
echo $usuario1->getNomeCompleto();
Capítulo 5
01. Podemos usar a seguinte função em MySQL:

SELECT *,date_format(nome_do_campo, ‘%d/%m/%Y’) AS DATA FROM nome_da_tabela
02. Falso
03. Teríamos que criar a seguinte conexão:

<?
try {
$db = new PDO("pgsql:host=LOCAL_BANCO dbname=NOME_BANCO user=USUARIO
password=SENHA");
capítulo 5 • 147
} catch (PDOException $e) {
print $e->getMessage();
}
?>
04. Existem várias formas. Segue uma sugestão com a função prepare()
$prep = array();
foreach($dados_insercao as $k => $v ) {
$prep[':'.$k] = $v;
}
$sth = $db->prepare("INSERT INTO table (".implode(', ',array_keys($da-
dos_insercao)).") VALUES (".implode(', ',array_keys($prep)) . ")");
$res = $sth->execute($prep);
capítulo 5 • 148
ANOTAÇÕES
capítulo 5 • 149
ANOTAÇÕES
capítulo 5 • 150
ANOTAÇÕES
capítulo 5 • 151
ANOTAÇÕES
capítulo 5 • 152

Idioma

Bem-vindo(a) ao Scribd!

Tecnologias para Internet II - LD1410

Enviado por

Dados do documento

Descrição:

Data de envio

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Descrição:

Direitos autorais:

Formatos disponíveis

Tecnologias para Internet II - LD1410

Enviado por

Descrição:

Direitos autorais:

Formatos disponíveis

Títulos relacionados

TECNOLOGIAS PARA

Autor do original fabiano gonçalves dos santos

Projeto editorial roberto paes

Coordenação de produção gisele lima, paula r. de a. machado e aline karina

Projeto gráfico paulo vitor bastos

Diagramação bfs media

Revisão linguística bfs media

Revisão de conteúdo raimundo pereira da cunha neto

Imagem de capa jirsak | shutterstock.com

Dados Internacionais de Catalogação na Publicação (cip)

S237t Santos, Fabiano Gonçalves dos

1. Javascript. 2. JQuery. 3. PHP Orientado a objetos. 4. PHP PDO.

Diretoria de Ensino — Fábrica de Conhecimento

Definição de DOM - Document Object Model 11

Incluindo Javascript em um documento HTML 14

Exibição de dados em Javascript 20

JSON (Javascript Object Notation) 33

3. Formulários em HTML5 com PHP 61

Variáveis Pré-definidas e recebimento de dados com

Classes e Objetos em PHP 95

Classes abstratas 104

Métodos “mágicos” 106

5. Integração de PHP com banco de dados 117

Operações do cadastro 120

Melhorando a aplicação 133

Considerações finais 144

O desenvolvimento de aplicações para internet pode ser feito de várias ma-

Imagine a seguinte situação: você é um estudante e está querendo no momen-

USUÁRIO INTERNET SERVIDOR BANCO DE DADOS

Figura 1.1 – Exemplo de programação cliente-servidor.

O usuário está tentando localizar algum recurso ou serviço oferecido pelo

Definição de DOM - Document Object Model

O DOM é um conceito muito importante para o Javascript. Com ele é pos-

Em outras palavras, o DOM é a forma como o conteúdo de um documento é

ELEMENTO <head> ELEMENTO <body> ELEMENTO <p>

ELEMENTO <title> TEXTO: “Algum Texto”

TEXTO: “Título da Página”

Figura 1.2 – Modelo de objetos de documento (DOM).

O DOM é importante porque com ele é possível manipular os elementos

No exemplo, perceba na linha 5 o uso do método getElementById() e da pro-

Incluindo Javascript em um documento HTML

A inclusão de código Javascript em um documento HTML é muito simples.

Podemos inserir o código Javascript em alguns lugares de um documento

Observe outras formas de usar arquivos Javascript dentro de um documen-

No exemplo anterior, os arquivos script1.js, script2.js etc. estão no mesmo di-

Figura 1.3 – Exemplo de inclusão de Javascript por meio de uma URL.

E agora um exemplo que usa o caminho relativo, de um diretório dentro da

Figura 1.4 – Exemplo de caminho relativo.

A criação e o uso de variáveis em Javascript é extremamente simples. Javascript

Observe os exemplos a seguir.

Basicamente é possível mostrar dados em Javascript de duas formas principais:

Exibição em documentos HTML

Dentro desta opção é possível mostrar dados de algumas maneiras diferentes.

No exemplo 1 foi usado o método getElementById() e a propriedade innerHTML.

Observe o exemplo 3. O document.write() aparece após o carregamento da

A última forma de exibir dados em um documento HTML é usar a função

Figura 1.5 – Resultado da saída dos exemplos.

Definir o que é XPath