Você está na página 1de 350

çã

Programacao
Web
Ricardo Sonaglio Albano
Evandro Zatti

Curitiba
2017
Ficha Catalográfica elaborada pela Fael. Bibliotecária – Cassiana Souza CRB9/1501

A321e Albano, Ricardo Sonaglio


Programação web / Ricardo Sonaglio Albano, Evandro Zatti . – .
Curitiba: Fael, 2017.
350 p..: il.
ISBN 978-85-60531-94-3

1. Linguagem de programação 2. Internet I. Zatti, Evandro II.


Título
CDD 005.1

Direitos desta edição reservados à Fael.


É proibida a reprodução total ou parcial desta obra sem autorização expressa da Fael.

FAEL

Direção Acadêmica Francisco Carlos Sardo


Coordenação Editorial Raquel Andrade Lorenz
Revisão Editora Coletânea
Projeto Gráfico Sandro Niemicz
Capa Vitor Bernardo Backes Lopes
Imagem da Capa Shutterstock.com/Sentavio
Arte-Final Evelyn Caroline dos Santos Betim
Sumário

Carta ao Aluno | 5

1. Introdução à Programação Web  | 7

2. HTML | 25

3. CSS | 61

4. JQuery | 101

5. Softwares, Frameworks e Bootstrap | 135

6. PHP | 169

7. PHP Orientação a Objeto  | 207

8. PHP: Acesso ao Banco de Dados  | 243

9. Estudo de caso | 271

10. Estudo de Caso 2  | 313

Conclusão | 339

Gabarito | 341

Referências | 345
Carta ao Aluno

Prezado(a) aluno(a),
O mercado de trabalho é carente de bons profissionais na
área de desenvolvimento de sistemas, visto a deficiência da maioria
em prover soluções, utilizar as melhores técnicas e implementá-las.
Essa obra traz conceitos, exemplos e exercícios que buscam promo-
ver uma reflexão sobre o assunto e a importância do conhecimento
numa área que expõe todas as fragilidades e expertise de negócio, a
Programação Web

interface e a interação que é a web. Com mais de vinte anos de atuação na


área de desenvolvimento de sistemas e banco de dados, reuni nesse material
parte desse conhecimento, compartilhado com você para auxiliá-lo em seu
desenvolvimento profissional.

–  6  –
1
Introdução à
Programação Web
Ricardo Sonaglio Albano

A velocidade do crescimento da internet e de todas as fer-


ramentas e recursos que advêm dessa tecnologia, modificaram
profundamente não só a forma de comunicação entre as pessoas,
mas a forma como interagem com um mundo muito mais digital
e interconectado. E, desta forma, as organizações também se adap-
tam e transformam-se para continuar competitivas e inovadoras no
seu segmento de atuação, exigindo profissionais capacitados para se
adaptar aos novos e contínuos desafios tecnológicos.
Nesse contexto, o conhecimento e as habilidades dos desen-
volvedores web têm um papel fundamental na maneira como
a internet é utilizada e em como isso se dará no futuro. Por esse
motivo, esses profissionais devem estar sempre atentos às inovações,
capacitando-se para desenvolver e adotar as últimas tecnologias,
contribuindo assim com as novas tendências tecnológicas e com o
futuro do mundo digital.
Programação Web

Neste capítulo, contextualizaremos o mundo web, sua história, apli-


cações, desenvolvimento, as principais arquiteturas utilizadas e tendên-
cias futuras.

1.1 Introdução
A internet possui características que a diferenciam de qualquer outro
meio de comunicação, e o exame de suas peculiaridades nos fornece impor-
tantes subsídios para melhor conhecer seu impacto e efeitos sobre as relações
pessoais processadas por meio dela.
Antes de tudo, a internet não é um meio físico de comunicação, tangível
e com dimensão facilmente determinável. Ela é uma gigantesca rede que com-
preende várias outras redes menores de computadores – é uma rede de redes.
Redes de computadores são constituídas por diversos computadores
interligados, com o propósito de troca de dados, além de possibilitar a utili-
zação de recursos de computadores e periféricos fisicamente distantes, como
o acesso à uma impressora instalada em um outro local, ou a pesquisa em
um banco de dados remoto.
Muitas redes são locais ou fechadas. Algumas são constituídas por
alguns computadores interligados, em um escritório ou um laboratório,
por exemplo. Outras, por sua vez, estão conectadas à outras redes maiores
que funcionam como elo de ligação entre elas e outras com finalidade
semelhante, de maneira tal que permita a computadores de várias outras
redes menores compartilhar dados entre si. Uma rede que interconecta
diversas outras redes em escala global, proporcionando a todo computador
pertencente a uma subrede o acesso a outro computador de outra subrede,
é a internet.

1.2 Resumo sobre a evolução


da Internet – a origem
A seguir será apresentado um breve resumo sobre os pontos mais impor-
tantes na história do mundo web.

– 8 –
Introdução à Programação Web

Quadro 1.1 – Resumo sobre a história da internet

Ano Descrição
Projeto militar norte-americano desenvolvido pela Defense Advan-
1969
ced Research Project Agency (DARPA), denominado ARPANET.
A Network Working Group (NWG) conclui o primeiro protocolo
1970 servidor a servidor (Host-to-Host protocol), chamado Network
Control Protocol (NCP).
Ray Tomlinson – criação do software básico de e-mail, com as
1972
funções de ler e enviar.
Robert Kahn – criação do TCP para substituir o NCP.

1974 Usado até hoje, o conjunto de protocolos Transmission Control


Protocol / Internet Protocol (TCP/IP) é um padrão de comunica-
ção e endereçamento para toda e qualquer rede de computadores.
Robert Kahn e Vint Cerf conseguiram realizar com sucesso a inter-
1977
ligação entre três redes de computadores.
Toda a rede ARPANET adotou o protocolo TCP / IP. A inter-
1983
net nasceu.
Tim Berners-Lee desenvolveu as três tecnologias fundamentais que
continuam sendo a base da web atualmente: HyperText Markup
Language (HTML), a linguagem de marcação (formatação) para a
web; Uniform Resource Identifier (URI), mais comumente conhe-
cida como Uniform Resource Locator (URL), endereço único uti-
lizado para identificar cada recurso na web; e Hypertext Transfer
1990 Protocol (HTTP), o protocolo de transferência de hipertexto, que
permite a recuperação de sites da web.
Também escreveu o primeiro editor de páginas da web / browser
(WorldWideWeb.app) e o primeiro servidor web (“httpd”).
No final de 1990, a empresa CERN tornou pública a primeira
página, utilizando o conceito de World Wide Web.
1995 A exploração comercial da internet é liberada no Brasil.
Fonte: Internet Society (s.d.); Computer History Museum (s.d); World Wide Web Foundation (s.d.).

– 9 –
Programação Web

Saiba mais
Acesse
<http://www.evolutionoftheweb.com/#/evolution/day> e
<http://ceweb.br/linhadotempo/>
para visualizar a evolução da internet e suas ferramentas.

1.3 Diferenças entre internet,


intranet e extranet
Os ambientes de comunicação são classificados em três tipos de redes:
22 Internet − redes de computadores interligadas, seguindo um con-
junto de normas e protocolos para conectar milhões de usuários
no mundo inteiro. Disponibiliza informação de forma pública,
ligada a uma grande variedade de tecnologias (mensagens, redes
sociais, sistemas de gerenciamento, armazenamento em nuvem
etc.) e, por meio de todas as tecnologias disponíveis, promove
o surgimento de novas redes corporativas, classificadas pelo seu
nível de abrangência.
22 Intranet − rede fechada. Uso exclusivo e restrito a um local físico
e, portanto, desenvolvida e utilizada apenas internamente em uma
empresa. Toda a sua estrutura e funcionamento é baseada nos pro-
tocolos, regras e aplicativos da internet. Surgiu com o objetivo de
centralizar as informações corporativas, melhorar a comunicação,
diminuir custos e manter o nível de segurança.

– 10 –
Introdução à Programação Web

Figura 1.1 – Exemplo de intranet

Fonte: Elaborada pelo autor.


22 Extranet − rede formada entre uma ou mais redes, na qual uma
empresa e seus parceiros (clientes, colaboradores, fornecedores,
representantes, distribuidores etc.) conectam-se. Esse tipo de cone-
xão utiliza-se da internet pública para acessar a Intranet, promo-
vendo o acesso à informação e a interação da empresa com seus
colaboradores mundialmente.

– 11 –
Programação Web

Figura 1.2 – Exemplo de extranet

Fonte: Elaborada pelo autor.

1.3.1 Comparativo entre redes


Para melhor entendimento, segue comparativo englobando as principais
características de cada ambiente.

– 12 –
Introdução à Programação Web

Quadro 1.2 – Comparativo geral sobre os tipos de redes e sua abrangência

Acesso Usuários Informação


Público Qualquer usuário Grande gama de infor-
INTERNET mações disponíveis de
forma pública
Restrito aos Usuários da rede Rede privada. Compar-
INTRANET funcionários interna tilhamento ocorre ape-
da empresa nas dentro da empresa
Restrito a Redes conectadas Informações comparti-
clientes e ou autorizadas lhadas entre empresas
EXTRANET
parceiros específicas. Rede mista
(pública e privada)
Fonte: Elaborado pelo autor.

1.4 Web 2.0


Criada em 2004 por Tim O’Reilly (precursor e chefe-executivo da
O’Reilly Media), a web 2.0 é uma quebra de paradigma, pois apesar de ser uma
nova versão da internet, não visa à atualização de suas especificações técnicas,
mas promove e potencializa as formas de tratamento do conteúdo dinâmico no
que se refere a publicação, gerenciamento, compartilhamento e organização das
informações, gerando um ambiente de interação, com promoção da colabora-
ção e participação dos usuários como geradores de conteúdo.
A web 2.0 também tem um importante papel na criação e disponibiliza-
ção de novas estratégias mercadológicas e sociais, com ferramentas e serviços
mais intuitivos e fáceis de usar, como por exemplo as WIKIS (coleções de
páginas interligadas que possibilitam que o usuário não só as consulte, mas
também as edite), softwares colaborativos, blogs, redes sociais, fotos e vídeos.
Por causa dessa nova visão, isto é, o conceito de “web como plataforma”,
para que uma página seja reconhecida como pertencente ao padrão web 2.0,
deve possuir as seguintes características:

– 13 –
Programação Web

22 fornecer experiência de conteúdo e dinamismo;


22 promover a participação e interação do usuário de forma colaborativa;
22 possibilitar a construção coletiva do conhecimento, promovendo o
conceito de “inteligência coletiva”.
Esse último aspecto chama a atenção para uma nova tendência presente
na web 2.0: a internet vista como uma plataforma de desenvolvimento e
trabalho, com ênfase no desenvolvimento como uma “arquitetura de partici-
pação” (O’REILLY, 2005), que salienta que os desenvolvedores devem apro-
veitar ao máximo as inúmeras possibilidades geradas pela rede de inteligência
coletiva no desenvolvimento de seus aplicativos.
No que se refere ao efeito da web 2.0 na área de desenvolvimento,
O’Reilly (2005) salienta algumas características desejáveis que devem estar
presentes nos aplicativos:
22 versão Beta contínua (“The Perpetual Beta”) − todos os apli-
cativos devem ser desenvolvidos em um processo de evolução
contínua, isto é, aberto a melhorias baseadas no comprometi-
mento e experiência de seus usuários, que devem ser tratados
como codesenvolvedores;
22 reutilização/programação modular − módulos, dados e
serviços disponíveis para serem utilizados por terceiros (outros
desenvolvedores), formando um ciclo de colaboração. Para que isso
seja possível, é necessário estimular que a programação modular
contenha um código simples e objetivo;
22 monitoramento em tempo real do comportamento do usuário
(“User eXperience − UX”) – avaliar quais recursos são usados e de
que forma são usados, utilizando essa estratégia para a tomada de
decisão quanto à descontinuação ou distribuição de um aplicativo;
22 tratamento do software como serviço e não como produto −
outra mudança de paradigma: não se adquire mais produtos (por
exemplo, o pacote Microsoft Office), mas paga-se pela utilização de
um serviço disponível on-line (por exemplo, o Microsoft Office 365).

– 14 –
Introdução à Programação Web

1.5 Arquitetura cliente/servidor


Baseia-se no princípio do sistema estruturado como um conjunto de
processos cooperativos, proporcionando o compartilhamento de recursos e
serviços. Há a presença de máquinas com maior poder de processamento e
armazenamento que atuam como servidores, disponibilizando recursos que
serão requisitados por diversos computadores distribuídos (clientes). Vale
salientar que, no modelo cliente/servidor, a comunicação sempre ocorrerá
por meio de mensagens, com protocolos de comunicação simples de requisi-
ção ou resposta.
Um servidor sempre está em contínua execução, aguardando, recebendo
e fornecendo serviços distribuídos para as diversas solicitações simultâneas
de seus clientes. Esta arquitetura pode ser desenvolvida apenas com servidor
central ou com múltiplos servidores distribuídos.
Já o cliente é responsável por iniciar e terminar interações com o servi-
dor, por meio de requisições de serviços e no aguardo da resposta do servidor,
além de exercer a função de entrada/saída de dados e de comunicação com o
usuário, de forma transparente, mas sem que ele perceba toda a engrenagem
existente para atender às suas demandas.
As vantagens desse tipo de arquitetura podem ser caracterizadas por
alguns aspectos:
22 manutenibilidade − permite que um servidor possa ser atualizado
ou até mesmo realocado de forma transparente ao cliente;
22 integridade e confiabilidade − como os dados são armazena-
dos no servidor, seu processo de atualização é simples e fácil de
administrar;
22 transparência − quando um usuário acessa/requisita qualquer
recurso ao servidor, o tipo de processo executado deve ocorrer
de forma imperceptível, independentemente da localização do
servidor;
22 segurança − por causa da centralização dos dados e recursos em
servidores, é mais fácil implantar e manter políticas de segurança.

– 15 –
Programação Web

Figura 1.3 − Arquitetura cliente/servidor

Fonte: Shutterstock.com/dny3d.

1.6 Protocolos
Para que a comunicação entre servidor e clientes funcione, é necessário
o uso de diversos protocolos que executam funções específicas na internet:
22 Internet Protocol ou Protocolo de Internet (IP) − é o protocolo
que define um endereço exclusivo para cada dispositivo conectado
na internet (notebooks, tablets, celulares etc.);
22 Protocolo de Controle de Transmissão (TCP) − é o protocolo
padrão de comunicação da internet e também pode ser utilizado
em redes privadas;
22 Hypertext Transfer Protocol ou Protocolo de Transferência de
Hipertexto (HTTP) − é o protocolo padrão dos navegadores da
web. Usa o modelo baseado na arquitetura cliente/servidor;

– 16 –
Introdução à Programação Web

22 File Transfer Protocol ou Protocolo de Transferência de Arquivo


(FTP) − padrão utilizado em transferências de arquivos, responsá-
vel pelo controle do envio e recebimento de arquivos;
22 Secure Sockets Layer ou Camada de Portas de Segurança (SSL)
− atua como um protocolo de segurança que possui a função de
verificar a identidade e o nível de confiança de um servidor. Garante
aspectos de integridade, privacidade e autenticação. Foi substitu-
ído em grande parte pelo Transport Layer Security, ou Segurança
da Camada de Transporte (TLS), um protocolo considerado mais
eficiente, por proporcionar maior segurança em autenticação de
mensagens, geração de chaves criptografadas e suporte a algoritmos
mais atuais;
22 Simple Mail Transfer Protocol ou Protocolo para Transferência
de E-mail Simples (SMTP) − é o protocolo padrão que define
como ocorrerá o envio de mensagens por meio da internet;
22 Internet Message Access Protocol ou Protocolo de Acesso ao
Correio da Internet (IMAP) − protocolo que realiza a manipu-
lação de acessos simultâneos em várias caixas de e-mail. Realiza a
sincronização das caixas de e-mail do servidor e do cliente e não
possui limitação de acesso;
22 Post Office Protocol ou Protocolo dos Correios (POP3) − desen-
volvido para o recebimento de mensagens de servidores de e-mail.
Tem sua utilização limitada a apenas uma caixa de e-mail.

1.7 Tendências futuras


O ritmo, a velocidade e a amplitude da geração de novas tecnologias
exigem do profissional da área de Tecnologia da Informação (TI) grande
dedicação, para que se mantenha sempre atualizado e apto para adaptar essas
tecnologias nos ambientes organizacionais.
A seguir destacamos algumas dessas tecnologias que prometem mudan-
ças profundas em nosso cotidiano.

– 17 –
Programação Web

1.7.1 Web 3.0


A web 3.0 promete promover uma mudança fundamental, focando
seus esforços na organização de forma inteligente de toda a informação/
conhecimento existente na internet – a web artificialmente inteligente. A
W3C encabeça esse desafio, criando um grupo de cientistas que possuem a
difícil tarefa de encontrar novas tecnologias que permitam que esse objetivo
seja alcançado.
Utilizando-se de recursos poderosos, que unem a inteligência artificial e
o conceito de “semantic web” (tecnologia semântica), toda e qualquer infor-
mação disponível será analisada, classificada e armazenada de tal forma que o
computador poderá aprender o que significam os dados, e assim gerar resul-
tados mais inteligentes e precisos. É capaz ainda de compreender as necessida-
des reais de cada usuário e disponibilizar conteúdo personalizado, associando
não só informações, como também experiências e conhecimento adquirido
por meio da web 2.0.

1.7.2 A internet das coisas (IOT)


Alguns pesquisadores consideram que a existência do IOT já é um indí-
cio da presença da web 3.0 nos dias atuais. A Internet of Things (Internet das
Coisas) é uma rede de objetos autônomos conectados à internet por meio de
sensores incorporados, que permitem, por meio da coleta e troca de dados,
sua monitoração e controle de forma remota.
A quantidade de objetos que utilizam a tecnologia IOT é imensa,
incluindo quase tudo no mundo real, desde objetos da vida cotidiana (carros,
celulares, calçados, relógios, cafeteiras, máquinas de lavar, refrigeradores, rou-
pas, fones de ouvido, lâmpadas etc.) até a aplicação em indústrias, transporte
público, empresas aéreas, telecomunicação, dentre outros.
O principal objetivo em utilizar esta tecnologia é a monitoração de
informações sobre status, localização, funcionalidades e problemas. Estas
informações podem nos auxiliar na redução de desperdício e em melhorar
significativamente a eficiência na utilização e operação. E mais além, demons-
trando um grande potencial de controle sobre como vivemos e trabalhamos.

– 18 –
Introdução à Programação Web

A realidade é que a IOT apresenta possibilidades intermináveis, cujo


impacto ainda não é possível prever ou compreender por inteiro. No futuro,
a nova regra será: “qualquer coisa que possa ser conectada, estará conectada”.
Figura 1.4 – Representação da tecnologia IOT

Fonte: Shutterstock.com/Macrovector.

1.7.3 Arquitetura Cloud-client computing


O conceito de cloud computing (computação em nuvem) já faz parte do
cotidiano da maioria das pessoas e empresas. O servidor não fica mais situado
em uma empresa, e sim baseado na internet, sendo utilizado como um ser-
viço contratado que permite que os usuários acessem arquivos, aplicativos e
sistemas operacionais de qualquer lugar com acesso à internet.
A utilização de um data center em nuvem ou de diversos data centers
interligados em substituição ao usual servidor, caracteriza-se por um novo
modelo denominado client-cloud (cliente-nuvem). O uso de virtualização
aumenta exponencialmente a eficiência, a capacidade de resposta às requisi-
ções de serviços e recursos, o compartilhamento e a flexibilidade de uso.

– 19 –
Programação Web

1.8 Conceitos importantes


A seguir serão apresentados alguns conceitos fundamentais para ambien-
tar o aluno aos temas que serão abordados ao longo deste livro.
22 HTML: o Hypertext Markup Language (Linguagem de Marcação
de Hipertexto) é a linguagem básica para o desenvolvimento de
páginas para a web.
22 HTML5: é a versão mais atual do HTML.
22 CSS: linguagem de configuração visual de páginas; define o estilo.
22 CSS3: versão mais atual do CSS.
22 JavaScript: linguagem interpretada que é responsável pela defini-
ção do comportamento dos elementos de uma página. Por exem-
plo: o que deve ocorrer quando o usuário clica em um botão.
22 JQuery: framework de JavaScript, isto é, uma biblioteca contendo
funções e métodos para serem utilizados em JavaScript.
22 Bootstrap: framework desenvolvido pelo Twitter, que aperfeiçoa
o layout do CSS. Baseia-se na tecnologia mobile ou tecnologia res-
ponsiva, permitindo tratar o layout de uma página sem digitar uma
linha de CSS.
22 PHP: linguagem de programação web que permite o desenvolvi-
mento de sites dinâmicos. É um código executado apenas no servi-
dor, isto é, ele executa o programa PHP e retorna apenas a página
HTML para o cliente.
22 Sites responsivos: sites com layout adaptável a qualquer dispositivo.

1.9 Desenvolvimento em camadas


O desenvolvimento web está baseado em três camadas: informação, forma-
tação e comportamento. O desenvolvimento em camadas possibilita que cada
camada seja independente uma da outra. Ou seja, se for necessário alterar a for-
mação de uma página, isso pode ser feito somente alterando o CSS, não necessi-
tando alterar o HTML, Javascript ou códigos de programação (Java, PHP etc.).

– 20 –
Introdução à Programação Web

22 Primeira camada: informação − é a camada mais importante. Ela


contém a base de tudo, ou seja, a informação, e está a cargo do
HTML, que estrutura essa informação dando a ela significado. Sis-
temas, aplicações e robôs de pesquisa identificam esse significado e
podem acessar e reutilizar essas informações. É requisito da internet
que a informação esteja disponível a qualquer hora, lugar e acessível
por qualquer dispositivo.
É importante ter em mente que nós, seres humanos, conseguimos
distinguir facilmente em um texto o que é um título, um parágrafo,
uma imagem etc. Mas o que ocorre com as máquinas que não
possuem essa capacidade? E quando nos referimos a “máquina”,
estamos falamos sobre navegadores, aplicações, sistemas de busca,
smartphones etc. É por isso que o HTML é tão importante, pois é
responsável por fazer essa identificação, “traduzindo” os elementos
presentes na página (título, parágrafo, imagem etc.).
Deve-se ter em mente que, mesmo que a apresentação falhe (pro-
blemas no CSS ou JavaScript desabilitado no navegador), a infor-
mação requerida deve ser entregue, não importando o visual.
22 Segunda camada: formatação – é responsável por controlar o
visual, ou seja, como a informação será apresentada para o usuário.
Essa responsabilidade fica a cargo do CSS. O CSS é a linguagem
responsável por criar o visual. Ela formata o conteúdo por meio de
regras. Essas regras controlam deste o tamanho da fonte, a cor do
fundo da página, a posição do texto etc. Essa apresentação deverá
funcionar independentemente do meio de acesso, podendo ser: siste-
mas de busca, aplicações, smartphones, tablets etc. Caso você esteja
utilizando um leitor de tela, o CSS poderá controlar como a voz do
leitor sairá pelas caixas de som. Tenha em mente que o CSS é respon-
sável pela apresentação do conteúdo em qualquer dispositivo.
22 Terceira camada: comportamento – define-se nesta camada quais
serão os comportamentos que cada elemento deverá possuir. Atual-
mente, o Javascript é o principal responsável por essa camada. Por
meio do Javascript, definiremos se os elementos serão rotaciona-
dos, arrastados, dimensionados e como serão suas características.

– 21 –
Programação Web

Resumindo, o Javascript controla os valores definidos pelo CSS e


manipula estas propriedades.
Atualmente, o CSS3 também pode controlar alguns comporta-
mentos simples, como por exemplo, transições no estado do ele-
mento, animações etc.

Síntese
Neste capítulo foram discutidos tópicos introdutórios do mundo web,
transitando desde a sua origem, com fins militares; sua evolução, interco-
nectando instituições de ensino; até o ponto em que se tornou uma rede
mundial. Além disso, foram diferenciados os tipos de rede e seus ambientes
de comunicação, verificando as principais diferenças entre internet, intranet e
extranet. Navegamos também pelos tipos de comunicação conhecidos como
protocolos (TCP/IP, HTTP etc.) e pela arquitetura cliente/servidor, distin-
guindo o papel de cada elemento no contexto.
Também abordamos as tendências futuras, como a internet das coisas,
que revolucionará a forma como interagiremos no cotidiano, permitindo a
comunicação com qualquer dispositivo.
Por fim, introduzimos alguns conceitos para os futuros profissionais de
desenvolvimento web (sites responsivos, linguagem de marcação HTML,
CSS, Framework etc.), e salientamos a importância do desenvolvimento em
camadas, no qual cada componente de software está organizado de acordo
com sua finalidade.

Atividades
1. Na arquitetura cliente/servidor, é característica de um servidor:
a) receber e responder a solicitações.
b) iniciar e terminar as conversações.
c) não prestar serviços distribuídos.
d) executar o software apenas quando for chamado.

– 22 –
Introdução à Programação Web

e) comunicar-se continuamente com outros servidores.


2. As redes aplicadas aos negócios são utilizadas pelas empresas com fina-
lidades comerciais e corporativas. Sobre estas redes, pode-se afirmar:
a) a intranet é uma rede interna, fechada e exclusiva, com acesso
somente para os funcionários de uma determinada empresa, libe-
rado somente no ambiente de trabalho e em computadores regis-
trados na rede. Essa restrição do ambiente de trabalho é necessária,
já que as intranets são necessariamente LANs construídas sobre a
internet. Em outras palavras, não é possível acessar intranets de
outro computador ligado à internet.
b) as intranets são redes restritas e fechadas a membros de um grupo
ou funcionários de uma empresa. Uma intranet é uma versão par-
ticular da internet que funciona somente conectada a ela. Essa rede
pode servir para troca de informação, mensagens instantâneas,
fóruns ou sistemas de gerenciamento de sites ou serviços on-line.
c) uma extranet pode conectar funcionários de uma empresa que
trabalham em escritórios diferentes ou pode facilitar a logística de
pedidos justamente por interligar diferentes departamentos de uma
mesma empresa em uma mesma rede, mas sempre numa configu-
ração de rede local.
d) a diferença entre intranet e extranet está em quem gerencia a rede
e nos protocolos que utilizam. O funcionamento é o mesmo, a
arquitetura da rede é a mesma, mas a extranet não utiliza os pro-
tocolos HTTP, SMTP e FTP. Além disso, em uma intranet, quem
a gerencia é só uma empresa, enquanto que em uma extranet os
gerentes são as várias empresas que compartilham a rede.
e) quando alguma informação da intranet é aberta a clientes ou for-
necedores da empresa, essa rede passa a ser chamada de extranet.
A extranet é formada por redes privadas que compartilham uma
rede entre si para facilitar pedidos, pagamentos e o que mais pre-
cisarem. Em uma extranet a empresa abre uma parte de sua rede
para contato com o cliente ou permite uma interface de acesso dos
fornecedores a rede.

– 23 –
Programação Web

3. A transferência de um arquivo de um computador local para um


servidor na internet é denominada:
a) casting.
b) download.
c) upload.
d) backup.
e) SMTP.
4. Tim O’Reilly, um precursor do uso do termo web 2.0, define que:
I. o termo significa a mudança para uma internet como plata-
forma e um entendimento das regras para obter sucesso nesta
nova plataforma.
II. a regra mais importante é o uso de aplicativos isolados, que se
tornam melhores quanto mais são usados pelas pessoas, apro-
veitando a inteligência individual.
III. as regras referenciadas em I, feitas por O’Reilly, nunca foram
discutidas, mesmo que de alguma outra forma, antes do sur-
gimento do termo web 2.0.
Assinale a alternativa que representa as afirmativas corretas:
a) somente a afirmativa I está correta.
b) somente a afirmativa II está correta.
c) somente a afirmativa III está correta.
d) as afirmativas I e II estão corretas.
e) todas as alternativas estão corretas.

– 24 –
2
HTML
Ricardo Sonaglio Albano

A demanda por profissionais com conhecimento no desenvol-


vimento para web cresce a cada ano. Esses profissionais são alvo de
empresas que buscam pessoas capazes de criar websites dinâmicos,
responsivos e funcionais. O processo de desenvolvimento web refere-
-se à construção de sites que satisfaçam a necessidade do usuário.
Vale salientar que um site é diferente de outro. Cada um
possui um público-alvo e objetivos diferentes. Sendo assim, para
um profissional desta área, é exigida uma gama de conhecimentos,
como: HTML, CSS, JavaScript, jQuery, linguagem de programa-
ção servidor (PHP, .NET, Java etc), usabilidade, entre outros. Afi-
nal, cada página tem suas características e são elas que representam
a preferência do cliente.
Neste capítulo, serão abordados os seguintes assuntos: lin-
guagem HTML, finalidade, estrutura, tags principais, tags para cria-
ção de formulário e o funcionamento da característica de herança
entre os elementos do HTML.
Programação Web

Saiba mais
Softwares utilizados neste capítulo:
Para que você possa acompanhar todos os códigos produzidos neste
capítulo, é importante que você possua algum tipo de editor de texto
simples, como o bloco de notas.
Sugestão:
Instale o Notepad++, que é um editor de texto com mais recursos
que o bloco de notas. Obviamente, você pode optar pelo editor de
sua preferência. Há diversos softwares e IDEs para desenvolvimento.

2.1 Introdução ao HTML


A sigla HTML significa Hyper Text Markup Language, ou seja, Lingua-
gem de Marcação de Hipertexto, tendo como finalidade a criação de páginas
web. O HTML é a base do desenvolvimento web e toda a estrutura de um
site é escrita em HTML.
Por meio do HTML, podemos criar qualquer tipo de site (um buscador,
um e-commerce, uma rede social) e inserir uma diversidade de recursos ao
mesmo (textos, vídeos, imagens, sons etc).
É importante salientar que o HTML não é uma linguagem de
programação, e sim, como o próprio nome diz, uma linguagem de marca-
ção. Esse é um equívoco bastante comum, pois o termo “programação” é
bastante utilizado quando nos referimos ao desenvolvimento em HTML.
Mas é necessário entender a diferença: Uma linguagem de programação
deve ser capaz de fazer cálculos, mudar informações contidas em variáveis,
tomar decisões, mudar o fluxo de execução. Algo que realmente não conse-
guimos fazer em HTML.
Atualmente, o HTML está na versão 5, com a implementação de novas
funcionalidades que facilitam a criação de páginas com mais recursos, o que

– 26 –
HTML

está de acordo com uma das principais características do HTML, que é a


facilidade de compreensão e de implementação.

2.2 HTML5
O HTML5 surgiu em 2008, quando o W3C divulgou as primeiras
especificações sobre a nova versão. Além de ser uma nova versão do HTML,
é também um conjunto de tecnologias que permite a criação de aplicações
mais poderosas.
A semântica é importante para que os programas possam utilizar melhor
a informação distribuída na web. Antes do HTML5, não havia como identi-
ficar em uma página o que era cabeçalho, rodapé etc. Não havia uma tag com
essa finalidade. Tudo era separado por meio de DIVs.
O HTML5 introduziu novos elementos (novas tags) que auxiliam os nave-
gadores a entenderem melhor as páginas que montam para o usuário. Além
disso, com as novas tags, com valor semântico, os motores de busca têm maior
compreensão sobre cada parte do site e, com isso, podem fazer inferências sob
as informações de acordo com o sentido e o contexto, oferecendo aos usuários
resultados mais relevantes. Inclusive, proporcionam um grande ganho para a
acessibilidade. Seguem algumas das novidades presentes no HTML5:
22 novas tags com significados semânticos que possibilitam maior
acessibilidade aos usuários;
22 inclusão do elemento Canvas, que permite o desenho e renderiza-
ção de elementos gráficos usando JavaScript;
22 maior compatibilidade com o CSS e o JavaScript;
22 novos significados para alguns elementos;
22 melhor tratamento de exceção;
22 independência de plataforma;
22 possibilidade de criar sites responsivos;
22 redução da necessidade de plugins externos.

– 27 –
Programação Web

Figura 2.1 – Comparativo entre o uso de DIVs e as novas tags

Fonte: Elaborada pelo autor.


É importante afirmar que isso não significa que não usaremos mais o
DIV no HTML5. O seu uso será apenas mais específico, não sendo mais
utilizado de forma tão generalizada como antes. Por exemplo: ao diferenciar
dois parágrafos em um SECTION, o DIV poderá ser usado.

2.3 W3C
Segundo o W3C Brasil,
o Consórcio World Wide Web (W3C) é um consórcio internacio-
nal no qual organizações filiadas, uma equipe em tempo integral e o
público trabalham juntos para desenvolver padrões para a Web. Lide-
rado pelo inventor da web Tim Berners-Lee e o CEO Jeffrey Jaffe, o
W3C tem como missão Conduzir a World Wide Web para que atinja
todo seu potencial, desenvolvendo protocolos e diretrizes que garan-
tam seu crescimento de longo prazo.

2.4 Browser
Browser ou navegador é o software que permite a interação do usuá-
rio com a internet. É por meio dele que o usuário acessa todo o conteúdo

– 28 –
HTML

disponível na rede. Os navegadores têm como função ler o código HTML,


interpretá-lo e montar a página solicitada pelo usuário.
Há diversos Browsers disponíveis. Os mais conhecidos são: Chrome,
Safari, Ópera, Internet Explorer e Mozilla Firefox.
Figura 2.2 − Logotipos dos navegadores

Fonte: AWS – Atomic Web Strategy.

2.4.1 Motores de renderização


Quantas vezes já nos deparamos com o mesmo site sendo apresentado
de forma diferente em navegadores diferentes? Isso é comum. Mas por que
isso acontece?
Os navegadores utilizam motores de renderização diferentes. A função
do motor de renderização é justamente montar, desenhar a página. A página
é composta de vários códigos que informam ao navegador o que e como deve
ser feito. E cada motor de renderização interpreta esses códigos de uma forma.
Segue quadro com os motores de renderização dos principais navegadores.
Quadro 2.1 – Motores de renderização

Motor Browser
WebKit Safari, Google Chrome
EdgeHTML Microsoft Edge
Gecko Firefox
Presto Opera 7 e superior
Fonte: Elaborado pelo autor.

– 29 –
Programação Web

Vale salientar que uma página HTML é montada de cima para baixo,
na ordem em que os componentes estão escritos no código. Nos casos onde o
desenvolvimento da página necessite ser estruturado em colunas, será neces-
sário configurar sua ordem utilizando CSS.

2.5 Estrutura básica do HTML


A seguir apresentamos, por meio de código, a estrutura básica de uma
página HTML5.
<!DOCTYPE html>
<html>
<head>
<title>Título da página</title>
</head>
<body>
Conteúdo que será exibido ao usuário
</body>
</html>

Compreensão da estrutura da página:


22 DOCTYPE − indica para o navegador a versão do HTML (especi-
ficação) que está sendo utilizada. Neste caso, o HTML5.
22 HTML − o elemento principal da estrutura.
22 HEAD − título da página, informações e configurações sobre a página.
As informações contidas aqui não serão exibidas para o usuário.
22 BODY − possui o conteúdo que será exibido no browser. Tudo que
estiver dentro do BODY será exibido para o usuário.

2.5.1 Criação do primeiro exemplo prático


22 Digite a estrutura a seguir no editor de texto.
<!DOCTYPE html>
<html>
<head>
<title>Estrutura Básica</title>
</head>

– 30 –
HTML

<body>
Hello, World!!!
</body>
</html>

22 Salve o arquivo com um nome. Por exemplo, index.html.


22 A extensão do arquivo é muito importante. Sempre deve ser defi-
nida como HTML. Essa extensão irá indicar ao navegador que o
arquivo é uma página HTML.
22 Para abrir o arquivo no navegador, vá até a pasta onde salvou o
arquivo e clique com o botão direito sobre o arquivo. Escolha a
opção “Abrir com” e então o navegador da sua preferência.
Figura 2.3 – Abrindo o arquivo

Fonte: Elaborada pelo autor.


22 Resultado do código:
Figura 2.4 – Exemplo da estrutura básica do HTML

Fonte: Elaborada pelo autor.

– 31 –
Programação Web

2.6 Tag
Uma tag indica um elemento do HTML e é composta por um sinal de
menor “<”, o nome do elemento e o sinal de maior “>”. Exemplo: <html>
Normalmente há uma tag de abertura <html> e a uma tag de fecha-
mento </html>. A tag de fechamento possui a uma barra “/” antes do nome
do elemento. Mas existem algumas tags que não possuem fechamento. Por
exemplo: a tag de quebra de linha (break row) <br>. Nestes casos, também
pode ser utilizada a barra no final da própria tag <br />. Essas tags são conhe-
cidas como “self closing tags”.
Ao escrever o código HTML, deve-se ter atenção quanto à ordem de
fechamento das tags. A primeira tag a ser aberta deverá ser a última a ser fechada.
Exemplos:
22 Correto: <p> texto, texto <br/> <h2> Titulo </h2> </p>
22 Incorreto: <p> texto, texto <br/> <h2> Titulo </p> </h2>

2.6.1 Atributo
As tags podem possuir atributos que são responsáveis por definir algu-
mas propriedades da tag. Estudaremos, detalhadamente, os atributos mais
à frente.
Exemplos:
<p id=”resumo”>Este texto resume tudo</p>
<a href=”http://fael.edu.br/”>FAEL</a>
<table id=“notas”>
<li class=“itens”>

2.6.2 Tipos de elementos


Há, no HTML, dois tipos de elementos: os elementos de linha e os
de bloco. São importantes pois interferirem no comportamento visual
do elemento.

– 32 –
HTML

22 Elementos de bloco: ocupam todo o espaço horizontal disponível,


ou seja, ocupam a linha inteira da página. Os próximos elementos
começarão na próxima linha livre. Elementos de bloco: div, h1 à
h6, p, blockquote, ul, ol, form.
22 Elementos de linha: ocupam apenas o espaço necessário. Novos
elementos podem ocupar a mesma linha, caso haja espaço para isso.
Elementos de linha: a, img, input, span.
Além disso, os elementos de linha não podem conter elementos de
bloco. Já os elementos de bloco podem conter os elementos de linha. Por
exemplo: uma lista ordenada (ol), pode conter uma imagem (img). Mas uma
imagem não pode conter uma lista.

2.7 Principais tags


O quadro a seguir contém as principais tags utilizadas no desenvolvi-
mento de páginas web:
Quadro 2.2 – Tags

Tipo tags
Estrutural <html>, <head>, <title>, <body>
Meta informações <meta>
Script <script>, <noscript>
Comentário <!-- [comentário] -->
Texto <p>, <br>
Título <h1> a <h6>
Listas <ol>, <ul>, <li>, <dl>
Links <a>
Imagens <img>
Tabelas <table>, <tr>, <td>
Negrito e Itálico <Strong>..</Strong> e <em>..</em>
Formulários <input>

– 33 –
Programação Web

Tipo tags
Outras <div> <span>
Fonte: Elaborado pelo autor.
Observação:
Vale salientar que as configurações de apresentação das tags (cor da fonte,
tamanho da fonte, cor de fundo, bordas etc.) serão discutidas no próximo
capítulo que tratará sobre o CSS.

Saiba mais
Descubra mais sobre as tags , acessando o site do W3School:
<https://www.w3schools.com/>. Nesse site você encontrará todas
as tags e atributos do HTML5 com exemplos.

2.7.1 Meta
Segundo a especificação do W3C, a tag Meta representa vários tipos de
metadados que não podem ser informados usando os elementos título, base,
link, estilo e script. O principal atributo desta tag é o CHARSET. Ele indica
o conjunto de caracteres que será usado na página. Atualmente utiliza-se
o padrão UTF-8 de configuração para evitar a apresentação de caracteres
desconfigurados, principalmente no que se refere à acentuação na página.
A tag Meta localiza-se dentro do cabeçalho da página <head>.
Exemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8”>
<title>Exemplo COM tag META</title>
</head>
<body>
Apresentação
</body>
</html>

– 34 –
HTML

Importante
A partir deste ponto, com raras exceções, os códigos serão apresen-
tados contendo somente a seção BODY do HTML, pois as demais
seções não sofrerão qualquer alteração.

2.7.2 Script
A tag <script> é utilizada para declarar um trecho de código dentro de
um documento HTML, permitindo a inserção de códigos, como por exem-
plo, um código JavaScript.
Exemplo:
<body>
<script type=”text/javascript”>
document.write(“Exemplo da tag Script”)
</script>
</body>

Resultado:
Figura 2.5 – Exemplo da tag script

Fonte: Elaborada pelo autor.

2.7.3 Comentários
Sempre é importante documentarmos o que estamos fazendo. Desta
forma, ficará mais fácil para futuras manutenções.

– 35 –
Programação Web

No HTML, para inserirmos um comentário, usamos a tag: <!-- [comen-


tário] -->
Exemplo:
<head>
<meta charset=”UTF-8”>
<!-- Todo esse texto não aparecerá na página -->
<title>Comentário</title>
</head>
<body>
Vou escrever um texto que será comentário.
<!-- Todo esse texto não aparecerá na página -->
</body>

Resultado:
Figura 2.6 – Exemplo de comentário

Fonte: elaborada pelo autor.


Note que o texto presente no código “Todo esse texto não apare-
cerá na página”, realmente não aparece na tela. Ele é apenas um comen-
tário interno, utilizado para documentar o código da página e pode ser usado
em qualquer parte do documento HTML.

2.7.4 Parágrafo e quebra de linha


A tag <p>, representa um parágrafo de texto. Já a tag <br>, representa
a quebra de linha. Em HTML, quando digitamos um texto e teclamos o
ENTER, o navegador não interpreta esse ENTER como quebra de linha.
Para isso deveremos utilizar a tag <br/>.

Saiba mais
Gerando texto: quando você estiver desenvolvendo uma página

– 36 –
HTML

que ainda não possui um conteúdo definitivo e necessita testar a


sua página, utilize um gerador de texto. No link <http://br.lipsum.
com/>, você pode gerar parágrafos, listas, palavras etc.

Exemplo:
<body>
<p>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
Morbi ullamcorper nunc magna, at molestie mi
ultrices sed.
Nulla nec tincidunt nunc, eget pulvinar neque.
</p>
</body>

Resultado:
Figura 2.7 – Exemplo de parágrafo sem quebra de linha

Fonte: Elaborada pelo autor.


Note que o texto em HTML fez uso do ENTER, no final de cada linha,
mas o navegador não reconhece como quebra de linha.
Adicionando a tag <br/>
Exemplo:
<body>
<p>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit.<br/>
Morbi ullamcorper nunc magna,at molestie mi
ultrices sed.<br/>
Nulla nec tincidunt nunc, eget pulvinar neque.
<br/>
</p>
</body>

– 37 –
Programação Web

Resultado:
Figura 2.8 – Exemplo de parágrafo com quebra de linha

Fonte: Elaborada pelo autor.


Note que por meio do uso da tag <br /> no final das linhas, o navegador
foi capaz de reconhecer a quebra de linha.

2.7.5 Títulos
Normalmente, dividimos o conteúdo de uma página por meio de títu-
los. Esses títulos possuem uma hierarquia, um nível de importância. Os mes-
mos são descritos como: <h1>, <h2>, <h3>, <h4>, <h5> e <h6>, nos quais a
tag H1 é caracterizada por ser o título principal (maior relevância) da página.
Já o H6, é o título de menor relevância.
Exemplo:
<body>
<h1>Título Principal</h1>
<p> Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
</p>
<h2>Título H2</h2>
<p> Nunc nec gravida mauris. Donec quis tincidunt
massa.</p>
<h3>Título H3</h3>
<p> Aliquam eget risus pretium, laoree, hendrerit
velit. </p>
<h4>Título H4</h4>

– 38 –
HTML

<p> Suspendisse ligula orci, accumsan non,


molestie felis.</p>
<h5>Título H5</h5>
<p> Donec iaculis, orci quis varius accumsan,
erat mauris.</p>
<h6>Título H6</h6>
<p> Sed vel mauris sit amet quam interdum
elementum. </p>
</body>

Resultado:
Figura 2.9 – Exemplo das tags de cabeçalho

Fonte: Elaborada pelo autor.

– 39 –
Programação Web

2.7.6 Listas
É um tipo de tag bastante utilizada e possui três tipos de lista:
22 listas ordenadas <ol>;
22 listas não ordenadas <ul>;
22 listas de definição <dl>.
Cada item da lista é um list, representado pela tag <li>.
Exemplo de lista ordenada:
<body>
<h1>Campeões Mundiais</h1>
<ol>
<li>Brasil</li>
<li>Alemanha</li>
<li>Itália</li>
</ol>
</body>

Resultado:
Figura 2.10 – Exemplo de listas ordenadas <ol>

Fonte: Elaborada pelo autor.


Ressaltamos que, por meio do CSS, poderemos alterar o tipo de nume-
ração (números romanos, letras) apresentado nas listas.
Exemplo de lista não-ordenada (apresentação do trecho):

– 40 –
HTML

<body>
<h1>Lista de compras</h1>
<ol>
<li>Arroz</li>
<li>Feijão</li>
<li>Massa</li>
</ol>
</body>

Resultado:
Figura 2.11 – Exemplo de listas não ordenadas <ul>

Fonte: Elaborada pelo autor.


É possível alterar os tipos de marcadores (círculo, quadrado, elipse),
realizando a alteração por meio do CSS.
Exemplo de lista de definição:
<body>
<h1>Lista de termos</h1>
<dl>
<dt>Internet</dt>
<dd>Rede de computadores mundial</
dd>
<dt>HTML</dt>
<dd>Linguagem de marcação</dd>
</dl>
</body>

Resultado:

– 41 –
Programação Web

Figura 2.12 – Exemplo de listas de definição <dl>

Fonte: Elaborada pelo autor.

2.7.7 Links
Por meio da tag <a> conseguimos definir links que direcionam o usuário
para outras páginas ou para áreas específicas da própria página. Para essa tag,
devemos usar o atributo HREF. É onde será definido o endereço (URL) que
será acessado, quando o usuário clicar no texto de referência.
Exemplo:
<body>
<h1>Exemplo de link</h1>
<a href=”http://www.fael.edu.br”>FAEL</a>
</body>

Resultado:
Figura 2.13 – Exemplo link <a>

Fonte: Elaborada pelo autor.

– 42 –
HTML

Note que, ao clicarmos no texto FAEL, seremos direcionados para a


página da Fael. Sendo que a página será aberta na aba atual do usuário. Mas
também podemos adicionar o atributo target= “_blank” na tag e, assim,
quando o usuário clicar no link, a página solicitada será aberta em uma
nova aba.
Por exemplo: <a href=”http://www.fael.edu.br” target=”_
blank”>FAEL</a>

2.7.8 Imagens
Em HTML, inserimos imagens por meio da tag img. Essa tag possui os
seguintes atributos:
22 src (source / origem) − para indicar o nome do arquivo;
22 width (largura) e height (altura) − define o tamanho da imagem em
pixels. Vale salientar que o mais adequado é incluir a imagem na
página já no tamanho desejado, sem redimensionar. O redimensio-
namento faz com que o navegador carregue a imagem no tamanho
real do arquivo e depois altere para o tamanho desejado. E isso
consome tempo. Caso haja a necessidade de redimensionar uma
imagem, utilize um software de tratamento de imagem e salve com
o tamanho desejado;
22 alt − com este atributo podemos incluir um texto que será uma
alternativa para pessoas com deficiência visual. Quando o usuário
posicionar o mouse sobre a imagem, o navegador apresentará o
texto contido no atributo alt.
Exemplo:
<body>
<img src=”imagens/fael.png” alt=”logo da
instituição” />
</body>

Resultado:

– 43 –
Programação Web

Figura 2.14 – Exemplo imagem <img>

Fonte: Elaborada pelo autor.


Vamos alterar a largura e altura da imagem para que possamos comparar.
Exemplo:
<body>
<h3>Imagem tamanho real</h3>
<img src=”imagens/fael.png” alt=”logo da instituição” />

<h3>Imagem com Altura e largura</h3>


<img src=”imagens/fael.png” alt=”logo da
instituição” width=”150” height=”150”/>
</body>

Resultado:
Figura 2.15 – Exemplo da imagem <img> com redimensionamento

Fonte: Elaborada pelo autor.

– 44 –
HTML

Imagem com erro: caso ao incluir uma imagem seja apresentado o resul-
tado a seguir, isso significa que houve algum problema na tag, isto é, o nave-
gador não encontrou a imagem. Isso pode ter ocorrido por diversos motivos,
tais como:
22 o caminho da pasta está incorreto;
22 o nome do arquivo está errado;
22 a extensão do arquivo está errada.
Figura 2.16 – Exemplo de uma imagem <img> com erro

Fonte: Elaborada pelo autor.

2.7.9 Tabelas
Nas páginas, é muito comum o uso do recurso de tabelas, sendo utilizada
para diversas situações: apresentar informações, formulário, imagens, etc.
Para construir uma tabela são necessárias as seguintes tags:
Quadro 2.3 – Tags usadas para criação de tabelas

Tag Função
<table> .. </table> Indica o início e o final da tabela.
<tr> </tr> Início de uma linha na tabela.
<th> </th> Indica que é uma coluna de cabeçalho
<td> </td> Define a coluna do corpo da tabela.
Fonte: Elaborado pelo autor.

– 45 –
Programação Web

Além disso, é possível mesclar linhas e colunas por meio dos atributos
COLSPAN e ROWSPAN.
Exemplo 1:
<body>
<h3>Tabela simples</h3>
<table>
<tr>
<th>Nome do Aluno</th>
<th>Média</th>
</tr>
<tr>
<td>Ana Silva</td>
<td>9,0</td>
</tr>
<tr>
<td>José Lima</td>
<td>8,5</td>
</tr>
</table>
</body>

Resultado:
Figura 2.17 – Exemplo de tabela <table>

Fonte: Elaborada pelo autor.


Exemplo 2:
No código a seguir, usamos o COLSPAN em duas colunas. Isso significa
que ele mesclou as duas colunas em uma única coluna.

– 46 –
HTML

<body>
<h3>Tabela simples</h3>
<table>
<tr>
<th>Mês</th>
<th>Despesas</th>
</tr>
<tr>
<td>Janeiro</td>
<td>R$ 1.000,00</td>
</tr>
<tr>
<td>Fevereiro</td>
<td>R$ 1.200,00</td>
</tr>
<tr>
<td colspan=”2”>2.200,00</td>
</tr>
</table>
</body>

Resultado:
Figura 2.18 – Exemplo de tabela <table> com COLSPAN

Fonte: Elaborada pelo autor.


Exemplo 3:

– 47 –
Programação Web

Neste caso, usamos o ROWSPAN em duas linhas. Isso significa que ele
mesclou as duas linhas em uma única linha.
<body>
<h3>Tabela simples</h3>
<table>
<tr>
<th>Mês</th>
<th>Despesas</th>
<th>Economia</th>
</tr>
<tr>
<td>Janeiro</td>
<td>R$ 1.000,00</td>
<td rowspan=”2”>R$ 150,00</td>
</tr>
<tr>
<td>Fevereiro</td>
<td>R$ 180,00</td>
</tr>
</table>
</body>

Resultado:
Figura 2.19 – Exemplo de tabela <table> com ROWSPAN

Fonte: Elaborada pelo autor.

Importante
Você deve ter percebido que as tabelas desenvolvidas não apresen-
tam bordas. Esse tipo de configuração é realizado pelo CSS.

– 48 –
HTML

2.7.10 Negrito, itálico e caracteres especiais


Para adicionar a formatação negrito e itálico utiliza-se, respectivamente,
as tags <strong> e <em>.
Exemplo:
<body>
<p>Atualmente utiliza-se a tag <strong>STRONG</
strong><br/></p>
<p>E para itálico é utilizada a tag <em> EM </em>
<p>Para mostrar uma tag &lt;p&gt; usamos
caracteres especiais</p>
<p>&copy; 2017 − FAEL</p>
</body>

Resultado:
Figura 2.20 – Exemplo negrito <STRONG>, itálico <EM>

Fonte: Elaborada pelo autor.


Note que dentro do texto é apresentado “tag <p>”. Como isso é possível?
Por que o navegador não interpretou essa tag? O segredo é a utilização dos
caracteres especiais “&lt;” que impedem que o navegador reconheça o texto
como uma tag.

2.7.11 Formulário
Importante elemento utilizado para a interatividade do usuário com a
página. É por meio do formulário que as informações fornecidas pelo usuário
serão repassadas para o servidor.

– 49 –
Programação Web

Os formulários são compostos por campos que devem ser preenchidos


pelo usuário e enviados para o servidor onde está hospedado o site. Mas o que
ocorre quando enviamos um formulário?
22 O usuário preenche o formulário e o envia;
22 O navegador empacota os dados e os envia para o servidor web;
22 O servidor web recebe os dados e encaminha para a aplicação que
processará os dados;
22 A aplicação processa os dados, criando a nova página e reenvia para
o servidor;
22 O servidor envia esta nova página para o browser;
22 O browser exibe esta nova página para o usuário.
Para criarmos um formulário usamos as tags <form> </form> e, seme-
lhante à tag <table>, a tag de formulário sempre será utilizada com outras
tags para a composição do formulário. A tag <form> possui alguns atributos
importantes que são apresentados no quadro a seguir:
Quadro 2.4 – Atributos da tag <form>

Atributo Função
Especifica qual a ação será realizada quando o usu-
ário clicar no botão Submit. Normalmente aponta
Action para um script que irá receber e decodificar os
resultados ou ficará vazio, caso a ação seja reali-
zada na própria página onde está o formulário.
Indica se os campos poderão ser autocompletados.
autocomplete
O padrão é ON.
Determina como os dados do formulário são codi-
ficados. Esse atributo é opcional e deve ser usado
Enctype quando vamos fazer upload de arquivos.
Enctype=”multipart/form-data”
Define qual método será usado para o envio dos
method
dados do formulário (GET/POST).

– 50 –
HTML

Atributo Função
O nome do formulário. É importante, caso tenha-
name mos mais de um formulário sendo utilizado na
mesma página
Desativa a validação de envio de formulário, caso
novalidate
haja algum campo com validação.
Fonte: Elaborado pelo autor.
Vamos falar mais sobre o atributo Method. Ele possui dois valores GET
ou POST. Veja a diferença entre os dois:
22 o GET é o método padrão. Os dados serão enviados através da
URL do browser, ou seja, ficarão expostos. É utilizado quando
nenhuma informação sigilosa for enviada.
22 o POST oferece maior segurança, pois a transferência dos dados
para o servidor não estará visível na URL. Além disso, possibilita a
transmissão de uma maior quantidade de informações.
Quadro 2.5 – Tags para elementos do formulário

Elementos do formulário
Tag Descrição
Principal tag para criação de componentes de formu-
Input
lário.
Campo com várias linhas para preenchimento do
TextArea usuário. Possui os atributos: ROWS (número de
linhas) e COLS (número de colunas).
Texto que será exibido juntamente com o elemento
Label
INPUT.
Fieldset Cria um grupo com os elementos.
Legend Define um texto para o grupo criado no Fieldset.
Elemento para criarmos a opção de seleção para o
Select
usuário.
OptGroup Cria um subgrupo dentro da seleção.

– 51 –
Programação Web

Elementos do formulário
Tag Descrição
Option Define os itens para a seleção.
Button Cria botões.
Fonte: Elaborado pelo autor.
As tags de formulário possuem diversos atributos. A seguir apresentare-
mos um quadro contendo os principais atributos.
Quadro 2.6 – Principais atributos dos elementos de formulário

Atributo Função
Utilizada na tag <input>, determina qual o tipo de
Type componente será exibido. Não é usado nos demais
elementos
Campo somente para leitura. O seu conteúdo não
disabled será enviado para o formulário. O usuário não
consegue editar esse campo.
Define o número máximo de caracteres que o
maxlength
componente poderá receber.
Tamanho do campo na tela. Se SIZE for menor
Size que MAXLENGTH, será apresentado um rola-
mento na tela.
Min Número mínimo de caracteres do campo.
Campo somente para leitura. O seu conteúdo será
readonly enviado para o formulário. O usuário não conse-
gue editar o campo.
Indica se o campo é de preenchimento obrigatório
required
ou não.
Determina o conteúdo do campo. Este atributo
Value armazena o valor que o usuário digitar. Também
usado para mostrar algum valor para o usuário.

– 52 –
HTML

Atributo Função
Mostra texto no campo e quando o usuário clicar
placeholder
o texto desaparece.
Fonte: Elaborado pelo autor.
No quadro a seguir, veremos os principais tipos de campos que pode-
mos criar com a tag INPUT. O tipo de campo será definido por meio do
atributo TYPE.
Quadro 2.7 – Principais tipos de componentes da tag <input>

Atributo Função
text Indica que o campo será um texto.
Indica que o campo será uma senha. Os caracteres
password
digitados não serão mostrados.
submit Botão padrão para enviar os dados do formulário.
reset Botão que limpa todos os campos do formulário.
Cria o componente com opções, onde o usuário
radio
poderá selecionar um dos itens.
Cria o componente com opções, onde o usuário
checkbox
poderá selecionar vários itens.
date Cria um campo data.
Cria campo do tipo data com base na data e hora
datetime-local
do computador do usuário.
Cria campo do tipo hora com base na data e hora
time
do servidor.
image Campo para armazenar uma imagem.
email Campo para receber um e-mail.
Cria um botão. Pode ser usado no lugar do sub-
button
mit.
Cria um campo para trabalhar com cores. Possui
color
uma paleta com todas as cores.

– 53 –
Programação Web

Atributo Função
Cria um campo que possibilita selecionar um
file
arquivo.
Campo escondido/oculto. Útil quando precisa-
hidden mos ter um campo no formulário sem que o usu-
ário visualize.
number Campo que receberá somente números.
url Campo para URL.
Fonte: Elaborado pelo autor.
Exemplo:

– 54 –
HTML

Resultado:
Figura 2.21 – Exemplo de formulário (navegador Opera)

Fonte: Elaborada pelo autor.

– 55 –
Programação Web

2.7.12 Outras tags e atributos


A finalidade das tags e os atributos desta seção serão melhor compreen-
didos quando trabalharmos com CSS.
Tags SPAN e DIV:
22 tag <div> − utilizada para criar um container (box) no documento
HTML. Tem como objetivo agrupar elementos da página para
configurações de apresentação com o CSS.
22 tag <span> − utilizada para criar um container em linha no docu-
mento HTML. Tem como objetivo agrupar elementos da página
para configurações de apresentação com o CSS.
O elemento SPAN é semelhante ao elemento DIV. A diferença é que o
SPAN é um elemento de linha e o DIV é um elemento de bloco. Normal-
mente são utilizados juntamente com os atributos CLASS e/ou ID.
Atributos ID e class:
São atributos utilizados para identificar os elementos, na configuração
de apresentação por meio do CSS. E visualmente não apresentarão alteração
na página.
22 Class: pode ser usado o mesmo identificador para vários elemen-
tos. Por exemplo: criar uma tabela com o nome dos amigos e seus
apelidos, ressaltando o apelido com uma cor diferente. Para isso,
precisamos criar o mesmo identificador para vários elementos.
22 ID: mesma função do class, mas só pode existir um elemento com a
mesma identificação. Por exemplo: queremos diferenciar um pará-
grafo de outro, contendo o título e o texto. Para isso, será necessário
criar um identificador diferente para cada parágrafo.

2.8 Novas tags do HTML5 (PESO 01)


Com a nova versão HTML5, surgiram novas tags que adicionaram
novos recursos e facilidades para o desenvolvimento web. As mais utilizadas
serão apresentadas no quadro a seguir:

– 56 –
HTML

Quadro 2.8 – Novas tags do HTML5

Tag Finalidade
header Define o cabeçalho da página, de uma seção.
Define a área de navegação do site. Normalmente é com-
nav
posta por links com as principais páginas ou seções.
Define uma parte da página que tem uma composição de
article
artigo, texto, redação etc.
Define uma seção da página que pode conter outros ele-
mentos. Por exemplo, há uma área no site para um deter-
section
minado assunto onde há links, menu, conteúdo, imagens
etc. Isso tudo é agrupado na SECTION.
Refere-se à área lateral do site. Contém assuntos não rela-
aside cionados ao assunto principal do site. Podendo ser utili-
zado para publicidade e banners.
footer Define o rodapé da página de uma seção.
Fonte: Elaborado pelo autor.
Vale salientar que as tags têm valor semântico, isto é, não irão alterar
a apresentação do site. Sendo assim, apresentaremos exemplos de seu uso
quando estivermos tratando do tema CSS.

2.9 Herança no HTML


Quando possuímos um elemento (filho), dentro de outro elemento
(pai), ocorre o que chamamos de herança. Um elemento-pai pode conter
vários elementos-filhos. Por exemplo: um item de lista <li> é filho de um
elemento de uma lista ordenada <ol> ou de uma lista não-ordenada <ul>. O
parágrafo <p> dentro do corpo da página <body> também seria um exemplo
de herança.
Esse conceito é importante para entendermos o comportamento dos
elementos no momento da configuração de uma página. Por exemplo: há
uma página com dois parágrafos. Um dentro do outro. Ao atribuir uma cor

– 57 –
Programação Web

de fundo ao parágrafo-pai, automaticamente o parágrafo-filho herdará essa


cor. Esse conceito de herança é conhecido como “NEST”.

Exercício de fixação
Com o intuito de praticar o conteúdo abordado neste capítulo,
desenvolva um site com duas páginas. O conteúdo de cada página
será o seguinte:
1) Index.html: página principal, contendo informações sobre um
assunto a sua escolha.
Estrutura a ser apresentada na página:
22 o título da página deverá ser sobre o tema do site;
22 o menu deverá conter os links para a própria página (index.
html) e para a página de contato (contato.html);
22 sobre o assunto, adicione:
22 no mínimo 4 parágrafos, sobre o tema escolhido;
22 duas ou três imagens sobre o tema;
22 uma tabela.
22 adicione, após o assunto, alguns links para redes sociais e
sites de busca de sua preferência;
22 no final, coloque um rodapé com o nome do autor do site.
2) Contato.html: segunda página, contendo um formulário de
contato do usuário com o site. Adicione os campos que julgar
mais apropriado.

Síntese
Nesse capítulo, abordamos a importância do HTML para o desenvol-
vimento web, que é linguagem de programação base para toda a criação de

– 58 –
HTML

aplicações web. Estudamos a estrutura básica de uma página e as novas tags


presentes no HTML5, versão que possibilita o desenvolvimento de aplicações
com mais recursos. Além disso, discutimos o padrão que o W3C sugere para
o desenvolvimento de páginas web.
Também aprendemos sobre as tags necessárias para a criação de formu-
lários, que são um meio de interação e comunicação do site com o usuário
final. Os conhecimentos adquiridos com esse material permitem que o aluno
seja capaz de desenvolver plenamente sites utilizando HTML.

Atividades
1. Assinale a alternativa que apresenta a linguagem de marcação (tags)
responsável pela formatação de textos, dados, imagens e tabelas de
uma página na internet.
a) Javascript.
b) JQuery.
c) HTML.
d) CSS.
e) PHP.
2. Um programa elaborado na linguagem HTML apresenta a seguinte
linha: <!DOCTYPE HTML>
Sobre essa linha, é correto afirmar que a mesma:
a) indica que o arquivo com o programa-fonte possui a extensão doc.
b) deve vir sempre após a tag.
c) é uma tag que define o nome do arquivo que possui o programa.
d) especifica ao navegador o tipo de documento HTML que ele vai
renderizar.
e) não atende corretamente à linguagem HTML, que não aceita o
símbolo ! em seus comandos.

– 59 –
Programação Web

3. Em HTML, as tags <UL> e <LI> permitem criar listas


a) de interrogação.
b) ordenadas.
c) não-ordenadas.
d) de definição.
e) de frames.
4. Um dos elementos mais utilizados no formulário do HTML é o
input. Por meio dele, o usuário pode enviar dados para o servidor.
Sobre o input, analise o código a seguir e assinale a alternativa correta.
<input type=”text” name=”nome” value=”html5” maxlength =
“20” size = “30”>
a) O tamanho da caixa de texto será 20.
b) O nome da variável que armazenará a informação inserida pelo
usuário será “html5”.
c) Caso o usuário não insira uma informação, o valor padrão utilizado
será “nome”.
d) A quantidade máxima de caracteres que o usuário poderá digitar
é 30.
e) O código cria uma caixa de texto.

– 60 –
3
CSS
Ricardo Sonaglio Albano

Neste capítulo, apresentaremos uma importante e indis-


pensável ferramenta para os desenvolvedores Web: o CSS, cuja efici-
ência comprovada e grande popularidade ao longo dos anos fez com
que se tornasse parte do processo de desenvolvimento Web. Isso
promoveu o total controle visual de sites, facilitando tanto na cons-
trução de novos layouts quanto na manutenção futura, de maneira
prática, rápida e eficaz.
Neste capítulo, são abordados os seguintes assuntos: seleto-
res, propriedades e atalhos, ordem de aplicação, Box Model e for-
mas de inserção do CSS em páginas HTML.
Programação Web

Saiba mais
Para acompanhar todos os códigos produzidos neste capítulo, é
importante ter algum tipo de editor de texto simples, por exemplo,
o Bloco de Notas. No entanto, é possível optar pelo editor de sua
preferência. Há diversos softwares e IDEs para desenvolvimento.
Sugestão: Instale o Notepad++, que é um editor de texto com mais
recursos que o Bloco de Notas.

3.1 Introdução ao CSS


O Cascading Style Sheets (CSS – folha de estilo em cascata) é o respon-
sável por controlar o visual das páginas, ou seja, como é exibido o conteúdo
criado pelo HTML. Essa formatação é aplicada em diferentes dispositivos,
como computadores, smartphones, tablets, TVs, etc.
O CSS controla desde como um texto será impresso, como será exibido
em um dispositivo e, até mesmo, a forma como o som será transmitido pelas
caixas de som.
É importante ressaltar que o CSS faz mais do que controlar DIVs, cor de
fundo, formatação de texto ou imagens. Ele dispõe de recursos que possibili-
tam que a informação seja apresentada da maneira mais adequada para cada
tipo de dispositivo. E essa é sua principal responsabilidade.
Conforme o próprio nome indica – folha de estilo em cascata –, as for-
matações são executadas em cascata, o que significa que o navegador inter-
preta as regras exatamente na ordem em que elas se encontram declaradas no
arquivo CSS, ou seja, de cima para baixo.

3.2 Sintaxe do CSS


A sintaxe do CSS é bastante simples e totalmente baseada em regras.
Cada regra é subdividida em seletor, propriedade e valor.

– 62 –
CSS

Sintaxe: seletor { propriedade: valor; }

Em que:
22 seletor − elemento, atributo ou uma estrutura HTML.
22 propriedade − definição da característica do seletor que quere-
mos alterar.
22 valor − determinação do valor que queremos que a propriedade do
seletor assuma.
Exemplo: p { background: blue;}
Nesse caso, estamos alterando no seletor P (parágrafo), a propriedade
Background (cor de fundo) para o valor Blue (azul). Vale salientar, que essa
regra será aplicada a todos os parágrafos da página.
É importante ressaltar que toda a regra CSS termina com o ponto e
vírgula (;). Além disso, em uma mesma regra, podemos alterar mais de uma
propriedade do mesmo seletor.
Exemplo: p { background: blue; font-size: 18pt; }
No exemplo, incluímos a propriedade font-size, que se refere ao tamanho
do fonte.

3.3 CSS3
A versão CSS3 adicionou novos recursos. A seguir, há uma lista das
principais novidades adicionadas, segundo o W3C.
22 Selecionar:
22 primeiro e último elemento;
22 elementos pares ou ímpares;
22 elementos específicos de determinado grupo de elementos.
22 Gradiente em textos e elementos.
22 Bordas arredondadas.

– 63 –
Programação Web

22 Sombras em texto e elementos.


22 Manipulação de opacidade.
22 Controle de rotação.
22 Controle de perspectiva.
22 Animação.
22 Controle básico de 3D.
22 Estruturação independentemente da posição no código HTML.

3.4 Seletor
Como já vimos, um seletor pode ser um elemento, um atributo ou uma
estrutura (DIV) em HTML. O CSS permite alguns tipos de seletores: sim-
ples, encadeado, agrupado e complexo.

3.4.1 Seletor encadeado


Ocorre quando definimos um seletor que faz parte de um elemento que
por sua vez está dentro de outro elemento.
Exemplo: table strong a { color: yellow; }
No exemplo, estamos aplicando à propriedade COLOR o valor YELLOW
para o seletor A, que está contido em um STRONG, que por sua vez está den-
tro de um TABLE. Essa regra não afetará os demais links da página.

3.4.2 Seletor agrupado


Usamos um seletor agrupado para aplicarmos a mesma configuração
para diversos elementos HTML diferentes.
Exemplo: p, table { font-size:18pt;}
No caso, estamos aplicando na propriedade font-size o valor 18pt para
os seletores P e table. Assim, todos os parágrafos e tabelas terão o mesmo
tamanho de fonte.

– 64 –
CSS

3.4.3 Seletor complexo


Por meio de um seletor complexo, podemos criar combinações entre os
elementos que antes do CSS3 não seriam possíveis. Pense no seguinte cená-
rio: é necessário fazer uma configuração a ser aplicada em todas as tabelas que
se encontram abaixo de uma H6. Como poderíamos fazer essa alteração de
maneira rápida e eficiente? Simples. Usando o seletor complexo.
Exemplo: h6 + table { color: black; }
No exemplo, estamos indicando que queremos selecionar as tabelas
(table) que se localizam abaixo de um cabeçalho (H6) e aplicar a cor (color)
preta (black).

Saiba mais
No site do W3C, há a lista com todos os seletores comple-
xos que podemos utilizar: <https://www.w3.org/TR/css3-
-selectors/#selectors>.

3.5 Como usar o CSS


Já sabemos o que é CSS, o que é uma regra, um seletor e os tipos de sele-
tores. Conhecemos o que é uma propriedade, um valor. Mas como utilizar
o CSS ao HTML? Para a aplicação das regras CSS no HTML existem três
opções diferentes, conforme segue.
22 Em linha (inline): a regra CSS é adicionada diretamente no ele-
mento que receberá a ação.
22 Interna (incorporado): inserção da regra CSS no cabeçalho da
página HTML. Essas regras serão aplicadas na página inteira.
22 Externas (linkado): as regras CSS são inseridas em um arquivo sepa-
rado do HTML. Nesse formato podemos usar um mesmo arquivo de
configuração para diversas páginas HTML. Esse tipo é recomendado
para padronização de sites, permitindo o reaproveitamento do código.

– 65 –
Programação Web

Vale salientar que existe uma hierarquia, isto é, uma ordem de impor-
tância na forma de declaração do CSS. Uma declaração inline tem maior
precedência sobre a incorporado. E incorporado tem maior precedência sobre
uma regra linkado.

3.5.1 Em linha – inline


Essa declaração é realizada diretamente no elemento. Para isso, usaremos
o atributo style. Observe um exemplo de aplicação de cor de fundo para o
corpo da página (body):
Exemplo:
<body style=”background:gray;”>
<p>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. <br/>
Morbi ullamcorper nunc magna, at molestie mi
ultrices sed. <br/>
Nulla nec tincidunt nunc, eget pulvinar neque.
<br/>
</p>

<h1>Campeões Mundiais</h1>
<ol>
<li>Brasil</li>
<li>Alemanha</li>
<li>Itália</li>
</ol>
</body>

Resultado:

– 66 –
CSS

Figura 3.1 – CSS inline

Fonte: Elaborada pelo autor.

3.5.2 Interna
Essa declaração é realizada no cabeçalho (head) da página. Para isso,
usaremos a tag style. Para tanto, utilizamos o exemplo anterior:
<!DOCTYPE html>
<html lang=”pt-br”>
<head>
<meta charset=”UTF-8”>
<title>Interno</title>
<style type=”text/css”>
body {
background:gray;
}
</style>

– 67 –
Programação Web

</head>
<body>
. . .
</body>
</html>

O código do CSS está inserido no cabeçalho. Para isso, foi adicionada


a tag style. Um atributo da tag é o tipo de script que será utilizado. No caso,
estamos indicando que será um script CSS (type=”text/css”).
Resultado:
Figura 3.2 – CSS interno

Fonte: Elaborada pelo autor.

3.5.3 Externa
Para utilizarmos uma declaração externa do CSS, deveremos ter um
arquivo com extensão (.css). No arquivo HTML que usará o CSS, devere-
mos fazer referência a esse arquivo através da tag link, no cabeçalho (head) da
página. Vamos fazer o mesmo exemplo anterior.
Exemplo: fonte HTML
<body>
<!DOCTYPE html>
<html lang=”pt-br”>
<head>
<meta charset=”UTF-8”>

– 68 –
CSS

<title>Externo</title>
<link rel=”stylesheet” type=”text/css”
href=”CSSinterno.css” />
</head>
<body>
. . .
</body>
</html>

Arquivo CSS:
@CHARSET “ISO-8859-1”;
body {
background: gray;
}

Resultado:
Figura 3.3 – CSS externo

Fonte: Elaborada pelo autor.


Note que o código do CSS está contido em um arquivo separado
(CSSinterno.css). Pode ser nomeado conforme sua preferência. Normal-
mente, utiliza-se estilo.css. No cabeçalho do HTML, fizemos a referência ao
arquivo CSSinterno.css, por meio da tag link.
Também é possível inserir comentários em arquivos CSS. A sintaxe é
a mesma da maioria das linguagens de programação. Inicia com o “/*”, e
termina com “*/”.

– 69 –
Programação Web

3.6 Trabalhando com cores


Há três maneiras de atribuirmos cores aos elementos de uma página.
22 Nome da cor: a cor é atribuída pelo nome da cor.
Exemplo: p { background-color: red; }

22 Sistema RGB: atribui-se a cor pela combinação entre as cores red,


green e blue. Os valores podem variar entre 0 e 255.
Exemplo: p { background-color: rgb(100,10, 20); }

22 Hexadecimal: a cor é atribuída, também, pela combinação entre


red, green e blue. Só que os valores são informados em hexadecimal.
Exemplo: p {background-color: “#ff0000”;}

Saiba mais
É possível consultar a tabela de cores em diversos sites da web. Pro-
cure o termo “código de cores HTML” e encontrará diversos sites
com os códigos em hexadecimal, RGB, etc.

3.7 Trabalhando com margem,


espaçamento e borda
A margem (margin) é o espaço entre um componente e os demais
componentes. Podemos alterar a margem superior (top), inferior (bottom),
esquerda (left) e direita (right).
Quadro 3.1 – Propriedades da margem

Valores possíveis Função Propriedade


Especifica a margem superior do
Auto, tamanho, % margin-top
elemento
Especifica a margem da esquerda
Auto, tamanho, % margin-left
do elemento

– 70 –
CSS

Valores possíveis Função Propriedade


Especifica a margem da direita do
Auto, tamanho, % margin-right
elemento
Especifica a margem inferior do
Auto, tamanho, % margin-bottom
elemento
Fonte: Elaborado pelo autor.
O espaçamento (padding) é o espaço entre o componente e a sua borda. Tam-
bém possibilita a alteração do espaçamento superior, inferior, esquerda e direita.
Quadro 3.2 – Propriedades do espaçamento

Valores possíveis Função Propriedade


Especifica o espaçamento supe-
Auto, tamanho, % padding-top
rior do elemento
Especifica o espaçamento da
Auto, tamanho, % padding-left
esquerda do elemento
Especifica o espaçamento da
Auto, tamanho, % padding-right
direita do elemento
Especifica o espaçamento inferior
Auto, tamanho, % padding-bottom
do elemento
Fonte: Elaborado pelo autor.
A borda (border) é a linha entre o espaçamento (padding) e a margem
(margin) do componente. Também apresenta as propriedades superior, infe-
rior, esquerda e direita.
Quadro 3.3 – Propriedades da borda

Parâmetros Função Propriedade


Especifica as propriedades para as Border-bottom,
border-width, bordas inferior, superior, esquerda Border-top,
border-style, border- e direita. Podemos configurar a
-color largura (width), o estilo da borda Border-left;
(style) e a cor da borda (color) Border-Right

– 71 –
Programação Web

Parâmetros Função Propriedade


Especifica a cor em: top, left, right,
border-color border-???-color
bottom
border-style Especifica o estilo da borda border-???-style
Thin, medium,
Especifica a largura da borda border-???-width
thick, length
Color Especifica a cor das quatro bordas border-color
None, hidden,dotted,
Especifica o estilo das quatro bor-
dashed, solid, dou-
das. Pode ser especificado de uma border-style
ble, groove, ridge,
até as quatro bordas
inset, outset
Especifica o estilo das quatro bor-
Thin, medium,
das. Pode ser especificado de uma border-width
thick, length
até as quatro bordas
Fonte: Elaborado pelo autor.
Exemplo HTML:
<!DOCTYPE html>
<html lang=”pt-br”>
<head>
<meta charset=”UTF-8”>
<title>Margem, espaçamento e borda</title>
<link rel=”stylesheet” type=”text/css”
href=”CSSMarginPaddingBorder.css”/>
</head>
<body>
<h2>Exemplo de Margem, espaçamento e borda</h2>
<h3>Exemplo de Margem, espaçamento e borda</h3>
<h4>Exemplo de Margem, espaçamento e borda</h4>
<h5>Exemplo de Margem, espaçamento e borda</h5>
</body>
</html>

– 72 –
CSS

Exemplo CSS:
body { background: #F5F5DC; }

h2 { border-width : 2px 4px 6px 8px; /*top left


bottom right */
border-style: solid;
border-color: #A52A2A; }

h3 { border-top-width: 2px;
border-left-width: 4px;
border-right-width: 6px;
border-bottom-width: 8px;
border-style: dotted dashed solid double;
border-color: #CD5C5C; }

h4 { border-width: 2px 4px 6px 8px;


border-style: solid;
border-color: #B03060;
padding: 6px 10px 14px 18px;
margin: 4px 6px 8px 10px; }

h5 { border: 2px double blue;


padding: 6px;
margin: 4px; }

Resultado:
Figura 3.4 – Margem, espaçamento e borda

Fonte: Elaborada pelo autor.

– 73 –
Programação Web

3.8 Trabalhando com o plano de fundo


A propriedade background permite a manipulação do plano de fundo
dos elementos HTML.
Quadro 3.4 – Propriedades do background

Valores possíveis Descrição Propriedade


Especifica se uma imagem de background-
Scroll, fixed
fundo é fixa ou rola com o página -attachment
rgb, hex, name, Configura a cor do fundo de um background-
transparent elemento -color
Configura uma imagem como background-
url, none
plano de fundo -image
top left, top center,
top right, center
left, center center, Configura a posição inicial de b a c k g r o u n d -
center right, bottom uma imagem de plano de fundo -position
left, bottom center,
bottom right
Repeat, repeat-x, Estabelece se/como uma imagem b a c k g r o u n d -
repeat-y, no-repeat de plano de fundo será repetida -repeat
Fonte: Elaborado pelo autor.
Exemplo HTML:
<body>
<p>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. <br>
Vestibulum blandit sapien justo, sed
bibendum varius in. <br>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. <br>
Vestibulum blandit sapien justo, sed
bibendum varius in. <br>
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. <br>

– 74 –
CSS

Vestibulum blandit sapien justo, sed


bibendum varius in. <br>
</p>
<h1>Campeões Mundiais</h1>
<ol>
<li>Brasil</li>
<li>Alemanha</li>
<li>Itália</li>
</ol>
</body>

CSS:
body {background-image: url(“imagens/matrix1.jpg”);}
p { background-image: url(“imagens/carro1.jpg”);
background-repeat: no-repeat;}

Resultado:
Figura 3.5 – Background

Fonte: Elaborada pelo autor.


Importante: quando você desenvolver esse exemplo, irá notar que a
imagem do fundo da página está sendo repetida de modo horizontal e verti-
cal. Já a imagem de fundo do parágrafo não apresenta repetição. Isso ocorre
devido à propriedade: background-repeat: no-repeat;.

– 75 –
Programação Web

3.9 Trabalhando com texto


A propriedade text permite a manipulação dos textos dos elementos
HTML.
Quadro 3.5 – Propriedades do text

Parâmetros Função Propriedade


RGB, hexadecimal,
Indica a cor do texto Color
name
Left, right, center,
Alinha o texto do elemento text-align
justify
None, underline,
overline, line-through, Adiciona decoração ao texto text-decoration
blink
Recua a primeira linha de um
Length, % text-indent
texto
Adiciona uma sombra no texto
None, color, length text-shadow
do elemento
None, capitalize, Controla as letras em um ele-
text-transform
uppercase, lowercase mento
Fonte: Elaborado pelo autor.
Exemplo HTML:
<body>
<h2>Exemplo </h2>
<h3>Exemplo </h3>
<h4>exemplo </h4>
<h5>Exemplo </h5>
</body>

Exemplo CSS:
h2 { text-align: center;}
h3 { text-decoration: underline; }
h4 { text-transform: capitalize;}
h5 { text-shadow:3px 2px red; }

Resultado:

– 76 –
CSS

Figura 3.6 – Text

Fonte: Elaborada pelo autor.

3.10 Trabalhando com fonte


A propriedade font, permite a manipulação da família de fonte dos ele-
mentos HTML.
Quadro 3.6 – Propriedades do font

Parâmetros Função Propriedade


family-name Lista com as famílias de fontes que
font-family
generic-family podem ser usadas no elemento
Small, médium, large,
Especifica o tamanho de fonte font-size
length, %
Normal, italic,
Especifica o estilo da fonte font-style
oblique
Normal, bold, bolder,
Especifica o peso de uma fonte font-weight
lighter, 100 a 900
Fonte: Elaborado pelo autor.
Há dois tipos de nomes de família:

– 77 –
Programação Web

22 Família genérica (generic-family): grupo de fontes com aspectos


semelhantes (“Serif ” ou “Monospace”).
22 Família de fontes (family-name): fontes específicas (“Times New
Roman” ou “Arial”).
Quadro 3.7 – Família de fontes

Descrição Família de fontes Família genérica


As fontes Serif têm peque-
Times New Roman,
nas linhas no final de alguns Serif
Georgia
caracteres
Fontes sem as linhas no final
Arial Sans-serif
dos caracteres
Todos os caracteres possuem
Courier New Monospace
o mesmo tamanho
Fonte: Elaborado pelo autor.
Figura 3.7 – Tipos de fontes

Fonte: https://www.w3schools.com/css/css_font.asp.
Exemplo HTML:
<body>
<h2>Exemplo </h2>
<h3>Exemplo </h3>
</body>

Exemplo CSS:
h2 { font-family: Times, “Times New Roman”, Georgia, serif;}
h3 { font-family: “Courier New”; font-weight: bold;}

– 78 –
CSS

Resultado:
Figura 3.8 – Fonte

Fonte: Elaborada pelo autor.

3.11 Trabalhando com listas


A propriedade list, permite a manipulação das listas ordenadas e não
ordenadas do HTML. Através dessa propriedade podemos:
22 definir marcadores de itens de lista diferentes para listas ordenadas;
22 definir marcadores de itens de lista diferentes para listas não
ordenadas;
22 definir uma imagem como marcador de item de lista;
22 adicionar cores de fundo a listas e itens de lista.
Quadro 3.8 – Propriedades

Valores possíveis Descrição Propriedade


Especifica uma imagem
None, url list-style-image
como marcador da lista.
Posiciona o marcador de
Inside, outside list-style-position
item de lista na lista

– 79 –
Programação Web

Valores possíveis Descrição Propriedade


None, disc, circle, square,
decimal, decimal-lea-
ding-zero, lower-roman,
upper-roman, lower-
-alpha, upper-alpha,
Determina o tipo de mar-
lower-greek, lower-latin, list-style-type
cador da lista.
upper-latin, hebrew,
armenian, georgian, cjk-
-ideographic, hiragana,
katakana, hiragana-iroha,
katakana-iroha
Fonte: Elaborado pelo autor.
Exemplo HTML:
<body>
<h3>Campeões Mundiais</h3>
<ol>
<li>Brasil</li>
<li>Alemanha</li>
<li>Itália</li>
</ol>
<h3>Lista de compras</h3>
<ul>
<li>Arroz</li>
<li>Feijão</li>
<li>Massa</li>
</ul>
</body>

Exemplo CSS:
ol { list-style-position: inside;
list-style-type: upper-latin;}

ul { list-style-position: outside;
list-style-type: square; }

Resultado:

– 80 –
CSS

Figura 3.9 – Listas

Fonte: Elaborada pelo autor.

3.12 Trabalhando com ID e class


Os atributos ID e class do HTML são muito úteis para a configuração
de elementos no CSS. O atributo ID é uma identificação única, enquanto o
class pode ser repetido. Cada um é identificado de uma forma: o seletor da
class começará com um ponto (.), enquanto o seletor do ID começará com
um sustenido (#).
Exemplos de seletores:
.texto{ color: blue; }
#menu {font-size: 18;}

Cenário: uma página com dois parágrafos, cada um com um cabeçalho


e no segundo parágrafo há uma tabela. Precisamos configurar cada parágrafo
com o respectivo cabeçalho diferente do outro grupo. Além disso, a tabela

– 81 –
Programação Web

apresenta uma coluna com características próprias, que a diferenciam das


demais colunas.
Código HTML:
<!DOCTYPE html>
<html lang=”pt-br”>
<head>
<meta charset=”UTF-8”>
<title>Background</title>
<link rel=”stylesheet” type=”text/css” href=”CSSidclass.
css” />
</head>
<body>
<h1>Exemplo de DIV e SPAN</h1>

<div id=”primeiro”>
<h2>Parágrafo 1</h2>
<p>
Lorem ipsum dolor sit amet, consectetur
adipiscing. <br>
Vestibulum blandit sapien justo, sed
urna varius in.<br>
Lorem ipsum dolor sit amet, consectetur
adipiscing. <br>

<h1>Campeões Mundiais</h1>
<ol>
<li>Brasil</li>
<li>Alemanha</li>
<li>Itália</li>
</ol>
</p>
</div>

<div id=”segundo”>
<h2>Parágrafo 2</h2>
<p>
Vestibulum blandit sapien justo, sed
urna varius in. <br>
Lorem ipsum dolor sit amet, consectetur
adipiscing. <br>
Vestibulum blandit sapien justo, sed
urna varius in. <br>

– 82 –
CSS

<table>
<tr>
<th>Nome do Aluno</th>
< t h > < s p a n
class=”apelido”>Apelido</span></th>
<th>Média</th>
</tr>
<tr>
<td>Francisco Silva</td>
<td><span class=”apelido”>Chico</
span></td>
<td>9,0</td>
</tr>
<tr>
<td>José Lima</td>
<td><span class=”apelido”>Zé</
span></td>
<td>8,5</td>
</tr>
</table>
</p>
</div>
</body>
</html>

Código CSS:
body { background-color: #C1CDC1;
width: 900px; /*Largura da página*/
margin: 0 auto; /*Centralizar o corpo da
página*/}

#primeiro { background-color: #F0FFF0;


padding: 8px;
border: 2px solid #8B8B83;}

h1 {text-align: center;}

#primeiro h2 {color: green;}

#segundo { background-color: #E0EEE0;


padding: 10px;
border: 2px solid #838B83;
margin: 10px;}

– 83 –
Programação Web

#segundo h2 {text-shadow: 6px 6px #00008B;}

.apelido { color: red;}

Resultado:
Figura 3.10 – ID e class

Fonte: Elaborada pelo autor.

3.13 Trabalhando com pseudoclasse


e pseudoelemento
As pseudoclasses e os pseudoelementos auxiliam no desenvolvimento de
sites mais atrativos e dinâmicos. Eles permitem encontrar e separar os elemen-
tos que não são possíveis pelo class ou ID no documento HTML.

3.13.1 Pseudoclasse
Define um estado especial de um elemento, tendo a função de “inserir”
uma classe (class) dinâmica nele, inclusive sendo utilizado para identificar e
tratar determinadas ações. Por exemplo, pode ser necessário fazer algum tipo

– 84 –
CSS

de alteração (cor, imagem, etc.) no momento em que o usuário passar o mouse


por cima de um link. Por meio da pseudoclasse, é como se o navegador inse-
risse uma classe no elemento no momento da ação do usuário.
As pseudoclasses podem ser utilizadas para alterar comportamentos
de alguns elementos. Um exemplo é o evento da passagem do mouse sobre
algum objeto, ao clicar, quando um elemento ganha foco, etc., promovendo
assim uma melhor experiência para o usuário. As pseudoclasses iniciam por
dois pontos (:).
Quadro 3.9 – Algumas pseudoclasses

Descrição Propriedade
Ocorre quando o mouse passa por cima de um objeto :hover
Quando o elemento foi visitado. Por exemplo, um link
:visited
após ser clicado
Quando o elemento está ativo. Por exemplo, clicando em
:active
um link, mas sem soltar o botão do mouse
Quando o elemento ganha o foco. Por exemplo, quando
:focus
clicamos em um campo de um formulário
Fonte: Elaborado pelo autor.

3.13.2 Pseudoelemento
Apresenta a função de “inserir” um elemento em determinada posição
do documento. Exemplo: por algum motivo qualquer, é preciso alterar a fonte
da primeira letra de uma palavra. Nessa situação, usa-se o pseudoelemento,
pois assim o navegador encontra a palavra desejada e realiza a alteração neces-
sária. Os pseudoelementos iniciam por um par de dois pontos (::).
Quadro 3.10 – Alguns pseudoelementos

Descrição Propriedade
Encontra a primeira letra da primeira palavra de um bloco
::first-letter
de texto
Seleciona a primeira linha de um bloco de texto ::first-line

– 85 –
Programação Web

Descrição Propriedade
Insere um elemento no início do conteúdo de um elemento ::before
Insere um elemento no final do conteúdo de um elemento ::after
Fonte: Elaborado pelo autor.

Saiba mais
Você pode consultar mais informações e as tabelas das pseudoclasses
e dos pseudoelementos nos seguintes links: <https://www.w3scho-
ols.com/css/css_pseudo_classes.asp> e <https://www.w3schools.
com/cSS/css_pseudo_elements.asp>.

Exemplo - HTML:
<body>
<a href=”http://www.uol.com.br”>UOL</a><br>
<a href=”http://www.g1.com.br”>G1</a>
</body>

CSS:
body { background-color: #FAEBD7; }
a:link {background-color: #FFE4C4;}
a:visited { background-color: #1E90FF;}
a:hover { background-color: #20B2AA;}
a:active {background-color: #F08080;}

Resultado:
Figura 3.11 – Pseudo

Fonte: Elaborada pelo autor.

– 86 –
CSS

3.14 Box Model


Cada elemento apresenta um tamanho que é o resultado da soma das
seguintes medidas: componente, espaçamento, borda e margem. Esse tama-
nho total forma o que chamamos de Box Model, que é um diagrama imaginá-
rio que contém cada elemento dentro do DOM.
O Document Object Model (DOM) ou Modelo de Objeto de Docu-
mento é uma convenção multiplataforma para representação e interação com
objetos em documentos HTML, XHTML e XML. O DOM está presente em
todos os navegadores, sendo acessado pelo console ou pelo inspetor de objetos.

3.14.1 Propriedades do Box Model


Há algumas propriedades importantes para trabalharmos com a for-
matação do layout de uma página. Mas é importante estar ciente de que
algumas propriedades podem ou não funcionar de acordo com a versão do
CSS e do navegador.
Lembre-se de que o navegador monta a página de cima para baixo, na
ordem em que os elementos estão inseridos no arquivo. Para alterarmos essa
ordem, vamos precisar das propriedades do Box Model. As principais proprie-
dades são: float, position, display, clear e overflow.
22 Float: por essa propriedade podemos alinhar os elementos em rela-
ção aos outros elementos. A propriedade float, apresenta dois valo-
res: right (direita) e left (esquerda).
22 Clear: com essa propriedade limpamos a configuração aplicada pelo
float. É utilizada para alterar o alinhamento dos elementos.
22 Position: tem como objetivo definir a posição do elemento. Essa
posição será relativa ao elemento pai (conceito de herança em
HTML). As posições podem ser as seguintes:
22 fixed: o elemento será posicionado fixo à janela do navegador;
22 relative: ficará posicionado relativamente à sua posição de origem;
22 static: valor-padrão. O posicionamento dos elementos será de
acordo com a ordem de declaração definida no código HTML.

– 87 –
Programação Web

22 absolute: será posicionado conforme a declaração do primeiro


elemento não estático (no static).
22 Display: define de qual maneira o elemento estará disposto na
página. Pode ter os seguintes valores:
22 display:none: o elemento não aparecerá na tela;
22 display:block: o elemento estará disposto em bloco;
22 display:inline: o elemento estará disposto em linha;
22 display:inline-block: o elemento estará disposto em blocos ali-
nhados em linha.
22 Overflow: através dessa propriedade, definimos a sobra do elemento
dentro de um container (DIV). Ou seja, quando o elemento for
maior que o local onde ele está inserido. Os valores podem ser:
22 overflow:visible: valor-padrão, mantém a sobra do elemento;
22 overflow:auto: adiciona uma barra de rolagem quando o ele-
mento filho sobra;
22 overflow:hidden: esconde a sobra do elemento;
22 overflow:scroll: sempre adiciona uma barra de rolagem, mesmo
quando não for necessário.
Vamos analisar alguns exemplos.
Exemplo 1:
<!doctype html>
<html>
<head>
<title>CSS - Elementos Flutuantes</
title>
<meta charset=”utf-8” />
<style type=”text/css”>

#resumo { border: 1px solid
gray;

– 88 –
CSS

width: 250px;
height: 300px;
float: right; }
</style>
</head>
<body>
<div id=”resumo”>
<h2>Elemento Flutuante</h2>
<p> Donec fermentum nisi eu nisi
faucibus pretium. Vivamus
sit amet lacinia sem, vel interdum ligula.
Vivamus interdum vulputate nulla non tristique.
Donec aliquam, augue quis laoreet hendrerit,
velit mauris varius
</p>
</div>
</body>
</html>
Resultado:
Figura 3.12 – Box Model 1

Fonte: Elaborada pelo autor.

– 89 –
Programação Web

Note que a propriedade float = right, fez com que a DIV “resumo” fosse
deslocada para o lado direito da página.
Exemplo 2:
<!doctype html>
<html>
<head>
<style type=”text/css”>
body {background: #61bd8c;
padding: 10px;}
#conteudo { background: #ffffff;
padding: 10px;
width: 600px;
height: 2500px;
/*position: relative;*/
margin: 30px auto; /*30px de
margem superior e inferior e as margens laterias
autormáticas*/
margin-top: 120px;}
.caixa {background: #1e6f44;
width: 200px;
height: 100px;
color: #ffffff;}
#relativo { position: relative;
left: -30px;
top: 0px;
width: 660px;}
#absoluto { position: absolute;
bottom: 0px;
right: 30px;}
#fixo { position: fixed;
top: 0px;
left: 0px;
width: 100%;
background: #000000;}
</style>
</head>
<body>
<div id=”conteudo”>
<h1>Posicionamento</h1>
<h4>Relative</h4>
<div id=”relativo”
class=”caixa”>Relative</div>

– 90 –
CSS

<h4>Absolute</h4>
<div id=”absoluto”
class=”caixa”>Absolute</div>
<h4>Fixed</h4>
<div id=”fixo” class=”caixa”>Fixed</div>
</div>
</body>
</html>

Resultado 2:
Figura 3.13 – Position

Fonte: Elaborada pelo autor.


Observe que o bloco definido com a posição “fixed” não se movimenta.
Você pode rolar a tela, mas ele não apresenta alteração. Isso ocorre porque
a propriedade position foi definida fixed. Isso é muito usado em barras de
menu. Já o elemento box “relative”, está posicionado de acordo com o seu
elemento pai. E o elemento box “absolute” está posicionado de acordo com a
sua posição na página. Nesse caso “bottom: 0px” considerando a parte visível
da página.
Exemplo 3:
<!doctype html>
<html>
<head>
<title>CSS - Links</title>
<style type=”text/css”>

– 91 –
Programação Web

a { /*retira o sublinhado do link*/


text-decoration: none;
padding: 5px;}
a:link { /*Link não visitado*/
color: #b9c941; }
a:visited { /*Link já clicado*/
color: #c0c0c0; }
a:hover { /*Link passar o mouse por
cima*/
color: #6d790f;
background: #6d790f;}
a:active { /*Clicar no link*/
color: #c4f371; }
</style>
</head>
<body>
<a href=”http://www.google.com.br”> Google </a>
|
<a href=”http://www.tecmundo.com.br”> TecMundo
</a> |
<a href=”http://www.uol.com.br”> UOL </a> |
<a href=”http://www.g1.com.br”> G1 </a> |
</body>
</html>

Resultado 3:
Figura 3.14 – Menu

Fonte: Elaborada pelo autor.


Exemplo 4:
<!doctype html>
<html>

– 92 –
CSS

<head>
<style type=”text/css”>
#resumo {border: 1px solid gray;
width: 250px; height: 300px;
float: left;
margin: 10px; }
.clear {
clear: both; /*Limpa o float. Os
elementos não seguirão o float anterior*/
}
</style>
</head>
<body>
<div id=”resumo”>
<h2>Elemento Flutuante 1</h2>
<p>
Donec fermentum nisi eu nisi faucibus
pretium. Vivamus sit amet lacinia sem, vel interdum
ligula. Vivamus interdum vulputate nulla non
</p>
</div>

<div id=”resumo”>
<h2>Elemento Flutuante 2</h2>
<p>
Donec fermentum nisi eu nisi faucibus
pretium. Vivamus sit amet lacinia sem, vel interdum
ligula. Vivamus interdum vulputate nulla non
</p>
</div>

<div class=”clear”>
Donec fermentum nisi eu nisi faucibus
pretium. Vivamus sit amet lacinia sem, vel interdum
ligula. Vivamus interdum vulputate nulla non ac nisl
lectus. Mauris eleifend vitae sapien et scelerisque.

</div>
<div>Todos os direitos reservados</div>
</body>
</html>

Resultado 4:

– 93 –
Programação Web

Figura 3.15 – Propriedade clear

Fonte: Elaborada pelo autor.


Observe que o bloco que contém a classe “clear” não segue o fluxo dos
elementos de cima. Isso acontece porque a classe “.clear” está com a proprie-
dade “clear: both”.

3.15 Degradês e transparências


No CSS3 podemos adicionar efeitos de transparência e tons de degradê
nas páginas. O degradê (gradiente) é realizado no background, o que possibi-
lita definir a direção e as cores que farão parte dele.
22 Degradê: linear-gradient(direção, cor1, cor2). Em que a direção
pode ser: to bottom, to top, to right, to left, to bottom right, etc.
22 Transparência: usa-se o RGBA, em que A é o Alfa. O valor de Alfa
pode variar de 1 (sem transparência) a 0 (com transparência total).
Exemplo de degradê:
<!doctype html>
<html lang=”pt-br”> <!-- Informa o idioma da página-->
<head>
<link rel=”stylesheet” type=”text/css”
href=”css/normalize.css”>
<style type=”text/css”>
body { margin-left: 20px;}
#box { width: 300px;
height: 420px;
padding: 5px;
/*background: linear-gradient(to
left, red, yellow);*/

– 94 –
CSS

background: linear-gradient(25deg,
red, yellow); }
</style>
</head>
<body>
<div id=”box”>
<h1>Degradee</h1>
<p> Donec fermentum nisi eu nisi
faucibus pretium. Vivamus sit amet lacinia sem, vel
interdum ligula. Vivamus interdum vulputate nulla non
tristique. Donec aliquam, augue quis laoreet hendrerit,
velit
</P>
</div>
</body>
</html>

Resultado:
Figura 3.16 – Degradê

Fonte: Elaborada pelo autor.

– 95 –
Programação Web

Exemplo de transparência:
<!doctype html>
<html lang=”pt-br”> <!-- Informa o idioma da página-->
<head>
<style type=”text/css”>
body { margin-left: 20px;}
#box {
width: 300px;
height: 420px;
padding: 5px;
background: url(“transparencia.
png”); }

#box h1 { background: rgba(255, 255, 255,


0.4); }
</style>
</head>
<body>
<div id=”box”>
<h1>Transparencia</h1>
<p> Donec fermentum
nisi eu nisi faucibus pretium. Vivamus sit amet lacinia
sem, vel interdum ligula. Vivamus interdum torquent per
conubia nostra, per inceptos himenaeos.
</P>
</div>
</body>
</html>

Resultado:

– 96 –
CSS

Figura 3.17 – Transparência

Fonte: Elaborada pelo autor.

Saiba mais
É muito importante que você pratique os conteúdos estudados neste
capítulo. Só com a prática, você conseguirá fixar conceitos, coman-
dos e estruturas.

– 97 –
Programação Web

Atividades
1. No que se refere às regras de CSS especificadas dentro de uma tag
de HTML, marque a alternativa correta.
a) Afetam outros documentos da página HTML.
b) Podem ser aplicadas por link no cabeçalho da página HTML.
c) Afetam somente a tag a qual está inserida na página HTML.
d) Afetam outras tags da página HTML.
e) Nenhuma alternativa está correta.
2. Ao projetar um website para visualização em resoluções de smar-
tphones de baixo custo até FullHD (1920x1080), um webdesigner
optou por posicionar a foto de uma paisagem (paisagem.jpg) como
elemento decorativo no topo de cada página. Essa imagem deve
ocupar toda a largura da página e deve apresentar uma altura de
280 pixels. A imagem não pode ser redimensionada ou distorcida
quando o tamanho da janela do navegador for alterado – ela deve
ser cortada, exibindo somente o que couber na área visível. O
código CSS para gerar a caixa que receberá a imagem é:
a) { width: 100%; height: auto; background: url(paisagem.jpg)
no-repeat; }
b) { width: 1080px; height: 280px;
background: url(paisagem.jpg) no-repeat; }
c) { width: auto; height: 1080px; background: url(paisagem.jpg)
no-repeat; }
d) { width: 100%; height: 280px; background: url(paisagem.jpg)
no-repeat; }
e) { width: 1920px; height: auto; background: url(paisagem.jpg)
no-repeat; }
3. CSS é uma linguagem de folha de estilo criada para:

– 98 –
CSS

a) reduzir o tempo de carregamento de uma página, separando forma


e conteúdo em arquivos distintos.
b) descrever a apresentação de um documento HTML por meio da
definição de como os elementos devem ser exibidos em tela ou
outros meios.
c) permitir a criação de funções matemáticas repetitivas que podem
ser chamadas a partir do código HTML.
d) simplificar a seleção de fontes e aplicação de cores em páginas
HTML.
e) definir a hierarquia dos elementos de uma página, independente-
mente de sua forma, para simplificar a diagramação em HTML.
4. Na interface web, ele é um arquivo independente do arquivo
HTML no qual são declarados propriedades e valores de estilização
para os elementos do HTML, cabendo-lhe, dessa forma, a tarefa de
estilização e ao HTML, exclusivamente, a marcação e estruturação
do conteúdo do documento. Estamos falando de:
a) CSS (Cascading Style Sheets).
b) XML (eXtensible Markup Language).
c) XHTML (eXtensible Hypertext Markup Language).
d) Tableless.
e) RDF (Resource Description Framework).

– 99 –
4
JQuery
Ricardo Sonaglio Albano

Neste capítulo, abordaremos as linguagens de programa-


ção que possibilitam tornar um site mais dinâmico e responsivo na
comunicação com o usuário final. Estas são conhecidas como lin-
guagens script. Com certeza, todos os usuários já se depararam com
diversos sites que utilizam essa tecnologia para comunicar-se com o
usuário de uma forma mais interativa.
Abordaremos, ainda, a linguagem JavaScript, JQuery e a uti-
lização da biblioteca de funções, o uso e a manipulação de eventos
e métodos.
Programação Web

4.1 O que é JavaScript?


Criada por Brendan Eich, o JavaScript é uma linguagem interpretada,
orientada a objetos e multiplataforma. Foi desenvolvida com uma sintaxe
bem simples, com o objetivo de adicionar interatividade em páginas web.
Vale salientar que o JavaScript foi criado baseando-se na arquitetura Client-
-Side, o que significa que é executado diretamente na máquina do usuário
(atualmente, existe a plataforma Node.js para desenvolvimento de aplicações
Server-Side). Além disso, seus códigos podem ser incorporados aos códigos de
outras linguagens de programação, por exemplo, PHP, Python, entre outras.

4.2 Quais as principais vantagens


ao utilizar o JavaScript?
A seguir, apresentaremos os principais benefícios que o desenvolvedor
irá obter fazendo uso da linguagem JavaScript.
22 Facilidade de implementação: simplesmente adicionar o código
ao documento HTML, informando no cabeçalho que será usado
JavaScript. Isso indicará ao navegador que o HTML possui código
JavaScript incorporado.
22 Disponível mesmo quando o computador se encontrar off-line.
22 Criação de interfaces responsivas com funcionalidades dinâmicas
que proporcionam uma melhor experiência ao usuário.
22 Possibilita o carregamento de apenas partes do conteúdo de uma
página, conforme a necessidade usuário, aumentando, assim, a efi-
ciência de tempo de resposta.
22 Possui grande popularidade por ser um padrão suportado pela
grande maioria dos navegadores.

4.3 Testando o JavaScript


De forma bastante simples, vamos demonstrar a facilidade com que o
JavaScript pode interagir com o seu navegar web.

– 102 –
JQuery

1. Abra o seu navegador web (browser).


2. Digite o código descrito a seguir na barra de endereço do seu
navegador:
javascript: alert(“Testando o JavaScript”);

Neste caso, estamos usando o pseudo-protocolo do JavaScript, enviando


uma solicitação de execução da função alert() e, conforme a sintaxe da fun-
ção, passamos entre as aspas uma mensagem.
Ao pressionar a tecla Enter será apresentada uma caixa de diálogo com
o seguinte resultado:
Figura 4.1 – Testando o JavaScript

Fonte: Elaborada pelo autor.

4.4 Incluindo o JavaScript


A inserção do JavaScript em um arquivo HTML pode ser feita em
qualquer lugar dele, inclusive depois da tag de encerramento do HTML
(</html>). Apenas é interessante avaliar em que momento o desenvolvedor
deseja que o browser detecte e faça uso do código JavaScript. Geralmente, a
referência ou conteúdo JavaScript é inserido dentro da tag <head>, para que
sua codificação já esteja carregada e pronta para ser utilizada nos elementos
definidos dentro do <body>.
Existem duas formas básicas de trabalhar com o JavaScript em arqui-
vos HTML.

– 103 –
Programação Web

1. Embutido ou incorporado no próprio código HTML


<script type=”text/javascript”>
Instruções da aplicação JavaScript
</script>

Indica ao browser que tudo que estiver declarado dentro das tags
<script>...</script> deve ser interpretado como um conteúdo JavaScript
(type=”text/javascript”).
2. Referenciando em HTML um arquivo externo com a extensão .js

Observe que todo conteúdo/codificação JavaScript estará contido em


um arquivo externo chamado “arquivo_javascript.js”. Dessa forma, tere-
mos dois arquivos: um contendo a codificação HTML (incluindo o script
de inserção do arquivo externo), e outro, com extensão .js contendo apenas
codificação JavaScript.
A seguir, apresentaremos um exemplo que engloba as duas situações.
Perceba que o primeiro exemplo (inserção direta em HTML do código JavaS-
cript) está comentado, e estamos demonstrando de que forma utilizar um
arquivo externo com código JavaScript. Sugerimos que sejam testadas as duas
opções, apenas eliminando a tag de comentário.
Observe o exemplo de arquivo HTML.

– 104 –
JQuery

Exemplo
arquivo_javascript.js.
alert(“Testando a inclusão do js externo”); //contendo
apenas a instrução.

Observação: perceba que o comentário inserido na linha de comando


foi iniciado com “//”, diferente dos comentários em HTML. Dessa forma,
podemos inserir comentários por meio do uso de barras duplas “//” para
apenas uma linha ou para múltiplas linhas, utilizando “/*” e “*/” (indicando
o início e o fim do comentário).
Figura 4.2 – Testando o JavaScript externo

Fonte: Elaborada pelo autor.

4.5 Variáveis
Basicamente, uma variável é um espaço reservado na memória do
computador para armazenar um tipo de dado determinado. Variáveis
devem receber nomes para que possam ser referenciadas e modificadas
quando necessário.

4.5.1 Regras de declaração


O JavaScript é Case Sensitive, isto é, letras maiúsculas e minúsculas são
consideradas como caracteres diferentes nessa linguagem. Se declararmos
uma variável com o nome “soma”, ela será diferente de Soma, SOMA, SoMa
ou sOmA;

– 105 –
Programação Web

22 O primeiro caractere do nome de uma variável deve, obrigatoria-


mente, iniciar com uma letra, $ ou underline. Além disso, todo
nome de variável só pode conter letras, dígitos e o caractere “_”
(underline), nunca caracteres especiais (&, ç, @, etc.);
22 Sempre escolher nomes significativos, isto é, que indiquem a fun-
ção da variável. Por exemplo: media, soma, total, nome, sexo, etc;
22 Tomar cuidado para não utilizar nenhuma palavra reservada da lin-
guagem na criação de uma variável (por exemplo, a palavra reser-
vada “var”).

4.5.2 Tipos de dados


22 int (valores inteiros numéricos, tanto positivos quanto negativos);
22 float (valores com ponto flutuante ou fracionados, tanto positivos
quanto negativos. Utiliza-se o ponto para definir as casas decimais);
22 string (cadeia ou conjunto de caracteres);
22 boolean (armazenam estados, apenas true (verdadeiro) ou false
(falso) que são utilizados em testes de condições, tomadas de deci-
são, validação no decorrer da execução do código JavaScript).

4.5.3 Declaração e atribuição de valores às variáveis


Ao declararmos uma variável, podemos fazê-lo utilizando a palavra
reservada var antes do nome da variável e, logo, devemos definir o tipo de
dado por meio do processo de atribuição de valores a uma variável específica.
O sinal “=” é utilizado como símbolo de atribuição. Um outro detalhe impor-
tante é a recomendação do uso do ponto e vírgula (;) para finalizar cada linha
de instrução. Apesar de seu uso ser facultativo, é considerado uma boa prática
entre os desenvolvedores.
Exemplos:
var numero = -7; //tipo int, no caso um número negativo.
var frase = “Estudando sobre variáveis”; //tipo string
salario = 5500.53; //tipo float.
situacao = true; //tipo boolean

– 106 –
JQuery

Ao declarar uma variável, podemos definir sua visibilidade, ou seja, se a


variável será global ou local.

4.5.4 Visibilidade das variáveis


Existem dois tipos de variáveis: locais e globais. Uma variável local fun-
ciona apenas dentro do bloco onde ela foi declarada. Já no caso das variá-
veis globais, estas são acessíveis em todo o código e podem ser utilizadas em
qualquer local do script.
A declaração de uma variável pode ocorrer de duas formas: explícita e
implícita, de acordo com o uso ou não do var, respectivamente. O uso do
var dentro de uma função determina que a variável será local. Sua declaração
fora da função será considerada global.
Quando a palavra reservada var não for utilizada, ou seja, a variável for
declarada de forma implícita, ela será considerada global. Observe o exemplo:

– 107 –
Programação Web

4.5.5 Apresentação dos valores contidos em variáveis


Para realizar a apresentação ao usuário dos dados armazenados nas vari-
áveis, utilizaremos o comando document.write(nome_variavel), que tem por
função escrever seu conteúdo no browser, seja sob a forma de uma string,
números ou conteúdo de variáveis. É possível também adicionar tags HTML.
<!DOCTYPE html>
<html lang=”pt-br”>
<head>
<meta charset=”utf-8”>
<title>Aula 2 - Declarando variáveis</title>
<script type=”text/javascript”>
var frase = “Estudando sobre variáveis “;
var salario = 5500.53;
document.write(frase);
</script>
</head>
<body> </body>
</html>

Esse comando, inclusive, permite a concatenação das variáveis para


reduzir linhas de código. Para tanto, utiliza o “+” que também é utilizado
como o operador de concatenação no JavaScript. Observe o exemplo e seu
respectivo resultado:
var frase_2 = “Salário do funcionário: R$ “;
var salario = 5500.53;
document.write(frase_2 + salario);
Figura 4.3 – Resultado da concatenação de variáveis

Fonte: Elaborada pelo autor.

– 108 –
JQuery

Também é possível receber dados em variáveis de forma dinâmica,


usando o comando prompt(), que captura uma entrada de dados feita pelo
usuário por meio do browser.
var frase_3 = prompt(“Informe o seu nome: “);
document.write(“Olá, “ + frase_3);

//incluindo tags HTML


document.write(“<br>Olá, “ + “<strong>” + frase_3 + “</
strong>”);
Figura 4.4 – Tela de captura de entrada de dados – comando prompt

Fonte: Elaborada pelo autor.


Figura 4.5 – Resultado – comando prompt

Fonte: Elaborada pelo autor.

– 109 –
Programação Web

Observação: se desejarmos, é possível inserir novas linhas utilizando o


comando prompt apenas inserindo “\n” (new line). Observe o exemplo:
var frase_3 = prompt(“Registro:\n Informe o seu nome: “);

4.6 Trabalhando com arrays


Um array possibilita que um grupo de valores (do mesmo tipo) seja
representado por meio de uma única variável, em que os valores são individu-
alizados entre si pela posição e identificados por índices, garantindo, assim, a
independência de cada um dos valores armazenados no array.

4.6.1 Declaração de um array


No JavaScript, a declaração de uma variável do tipo array é feita de uma
forma um pouco diferente em relação às demais variáveis. É necessário infor-
mar que a variável recebe o objeto array. Outro detalhe importante é que o
índice de um array sempre começa em 0 (zero).
Sintaxes
Atenção: a primeira letra da palavra reservada array é sempre escrita com
letra maiúscula.
1. var nome_array = Array();
nome_array[0] = “valor”; //Para cada chave/índice é
definido um valor.
2. var nome_array = Array(“1o valor”,”2o valor”,”etc”);
3. var nome_array = [];

Exemplos
1. Neste exemplo, o desenvolvedor declara qual índice receberá cada
valor, inclusive podendo optar por iniciar em qualquer índice.
var pilotos = Array() var meses = Array()
pilotos[0] = “Ayrton Senna”; meses[4] = “Abril”;
pilotos[1] = “Nelson Piquet”; meses[5] = “Maio”;
pilotos[2] = “Emerson Fittipaldi”; meses[6] = “Junho”;

– 110 –
JQuery

2. Declaração direta dos valores sem identificação dos índices. Neste


caso, o objeto array, ao construir a lista, irá indexar automaticamente cada
valor informado. O array iniciará o primeiro índice com 0 (zero) e os demais,
na ordem sequencial.
var pilotos=Array(“Ayrton Senna”,”Nelson Piquet”,”Emerson
Fittipaldi”);
Em que os índices serão gerados automaticamente, começando
por 0 (zero).
Veja:
Índice [0] armazenará o valor “Ayrton Senna”
Índice [1] armazenará o valor “Nelson Piquet”
Índice [2] armazenará o valor “Emerson Fittipaldi”

3. Sem a declaração da palavra reservada array. O uso apenas de


colchetes indicará que a variável é do tipo array. Também gera o índice
automaticamente, iniciando em 0 (zero).
var pilotos = [“Ayrton Senna”,”Nelson Piquet”,”Emerson
Fittipaldi”];

4.6.2 Apresentando valores contidos em um array


O ideal para apresentação de todos os valores contidos em um array
seria fazer uso de uma estrutura de repetição, que será discutida ainda neste
capítulo. Por ora, nos exemplos descritos a seguir, faremos uso apenas do
comando já discutido document.write(), utilizando os exemplos desenvolvidos
na declaração de arrays.
Exemplo 1
document.write(“<strong>Pilotos:</strong> (fora de
ordem) <br>” +
pilotos[1] + “, “ + pilotos[0] + “, “ +
pilotos[2] +”<br>”);
document.write(“<strong>Mês:</strong> “ + meses[5]);

Resultado: Pilotos: (fora de ordem)


Nelson Piquet, Ayrton Senna, Emerson Fittipaldi
Mês: maio

– 111 –
Programação Web

Exemplo 2
var pilotos=Array(“Ayrton Senna”,”Nelson Piquet”,”Emerson
Fittipaldi”);
document.write(“Pilotos (índice começando no zero): “ +
pilotos[0]);

Resultado: Pilotos (índice começando no zero): Ayrton Senna


Exemplo 3
var pilotos = [“Ayrton Senna”,”Nelson Piquet”,”Emerson
Fittipaldi”]; document.write(“Pilotos (índice
começando no zero): “ + pilotos[2]);

Resultado: Pilotos (índice começando no zero): Emerson Fittipaldi

4.7 Tipos de operadores –


aritméticos e lógicos
Operadores Aritméticos Operadores Lógicos
* Multiplicação > Maior do que
/ Divisão >= Maior ou igual a
% Resto < Menor do que
+ Adição <= Menor ou igual a
- Subtração == Igual
++ Incremento (adiciona) === Igual e do mesmo tipo de dado
-- Decremento <> ou != Diferente
Fonte: Elaborado pelo autor.

4.8 Estruturas de controle


As estruturas de controle são fundamentais para qualquer linguagem de
programação. São elas que irão tratar as situações condicionais e de repetição

– 112 –
JQuery

existentes em qualquer problema. Dificilmente um programa não irá apre-


sentar um tipo de estrutura de decisão para determinar o curso da ação. Essas
estruturas são categorizadas em dois tipos.
1. Estruturas de Decisão: if / if... else / if... else if... else / switch
2. Estruturas de Repetição: while / do...while / for / foreach

4.8.1 Estrutura de decisão


Exemplos
If
var nota_avaliacao = prompt(“Informe a nota de avaliação (0.0 a
10): “);

if (nota_avaliacao >= 7) {
document.write(“Resultado: <strong>APROVADO.</strong>”);
}

if... else
var nota_avaliacao = prompt(“Informe a nota de avaliação (0.0 a
10): “);

if (nota_avaliacao >= 7) {
document.write(“Resultado: <strong>APROVADO.</strong>”);
}
else{
document.write(“Resultado: <strong>REPROVADO.</
strong>”);
}

if... else if... else


if (nota_avaliacao >= 7) {
document.write(“Resultado: <strong>APROVADO.</strong>”);
} else if (nota_avaliacao >= 0){
document.write(“Resultado: <strong>REPROVADO.</strong>”);
} else {
document.write(“Resultado: <strong>VALOR INFORMADO INCORRETO</
strong>”);
}

– 113 –
Programação Web

Exemplos
switch
var voto = prompt(“VOTAÇÃO:\n 1 - Bill Gates\n 2 - Linus Thorvald\n”
+ “3 - Steve Jobs\n\n” + “INFORME SEU VOTO: “);

switch (voto){
case ‘1’:
document.write(“Você votou em BILL GATES!”);
break;
case ‘2’:
document.write(“Você votou em LINUS THORVALD!”);
break;
case ‘3’:
document.write(“Você votou em STEVE JOBS!”);
break;
default:
document.write(“Valor INCORRETO.<br>Voto ANULA-
DO.”);
}

Fonte: Elaborado pelo autor.

4.8.2 Estruturas de repetição


Exemplos
while do... while
var i = 0; i = 0;
while (i < 10){ do {
document.write(i, “<br>”); document.write(i, “<br>”);
i++; i++;
} } while (i < 10);

for
for (var i = 0; i < 10; i++) {
document.write(i, “<br>”);
}

– 114 –
JQuery

Exemplos
for... in
var funcionarios = {nome:”Wilquison “, sobrenome:”Zanana “,
Idade:18};

var texto = “”;


var x;
for (x in funcionarios) {
texto += funcionarios[x];
}
document.write(texto);

Fonte: Elaborado pelo autor.

4.9 Funções
Uma função é um trecho de código ou bloco de instruções criada para
realizar determinada tarefa sempre que esta for referenciada (chamada).
Exemplo:
var valor=0;
var tipo=” “;
function par_impar(numero) {
if (numero % 2 == 0) {
tipo = “PAR”;
} else {
tipo = “ÍMPAR”;
}
return tipo;
}

valor = prompt(“Digite um número: “);


document.write( par_impar(valor) );

– 115 –
Programação Web

//OU unir as duas linhas acima em uma única


instrução.
//document.write( par_impar(prompt(“Digite um número:
“)));

4.10 Eventos
O uso de eventos possibilita que o desenvolvedor possa capturar e mani-
pular ações realizadas dentro do browser, como a ação de clicar em um botão,
o movimento do mouse sobre a página apresentada pelo browser, etc. Então,
para manipular os eventos, o desenvolvedor deve especificar o evento, definir
o elemento HTML que estará aguardando o evento e declarar as funções que
serão executadas quando ele ocorrer.
Perceba que é necessário definir elementos no body da página para que
possamos manipular eventos sobre eles.
Tabela 4.1 – Principais eventos relacionados ao mouse

Evento Função
Considerado um evento de foco. Acionado (disparado)
onclick quando ocorrer um clique em um elemento presente
na página.
<div onclick=”alert(‘Você clicou com o mouse’);”
style=”background:orange; height:150px;
width:150px”></div>

ondblclick Acionado (disparado) quando ocorrer um duplo clique.


<div ondblclick=”alert(‘Você deu um duplo cli-
que.’);”
style=”background:orange; height:150px;
width:150px”></div>

Evento gerado quando um botão do mouse é pressio-


onmousedown
nado acima de um elemento.
<div onmousedown=”alert(‘Você pressionou o botão
do mouse.’);”
style=”background:orange; height:150px;
width:150px”></div>

– 116 –
JQuery

Evento Função
Quando o cursor do mouse passa em cima de algum ele-
onmouseover
mento presente na página.
<div onmouseover=”alert(‘Você está passando por
este elemento.’);”
style=”background:orange; height:150px;
width:150px”></div>

Quando o cursor do mouse sai da área delimitada por


onmouseout
algum elemento.
<div onmouseout=”alert(‘Você saiu da área delimi-
tada.’);”
style=”background:orange; height:150px;
width:150px”></div>

Fonte: Elaborado pelo autor.


Tabela 4.2 – Principais eventos relacionados ao teclado

Evento Função
onkeydown Evento gerado quando uma tecla do teclado é pressionada.
<input onkeydown=”alert(‘Uma tecla foi pressio-
nada.’);” type=”text”/>

Evento gerado quando uma tecla do teclado é pressionada.


onkeypress
Desconsidera teclas do tipo alt, ctrl, Fn, shift, etc.
<input onkeypress=”alert(‘Uma tecla foi pressio-
nada.’);” type=”text”/>

onkeyup Acionado quando a tecla for liberada.


<input onkeyup=”alert(‘Liberação de uma tecla.’);” type=”text”/>

Fonte: Elaborado pelo autor.


Tabela 4.3 – Principais eventos relacionados à janela

Evento Função
Evento gerado quando o carregamento da página é fina-
onload lizado. Por se tratar da página, sua declaração deve ser
inserida dentro da tag body.

– 117 –
Programação Web

Evento Função
<body onload=”alert(‘Carregamento finalizado.’);”>

Acionado no momento em que uma página ou um frame


onresize
é redimensionado.
<body onresize=”alert(‘A página foi redimensio-
nada.’);”>

Fonte: Elaborado pelo autor.


Tabela 4.4 – Principais eventos relacionados ao formulário

Evento Função
Considerado um evento de foco. Acionado (disparado) quando
onfocus
o cursor se posiciona acima de um elemento da página.
<input onfocus=”alert(‘O elemento recebeu foco.’);”
type=”text”/>

É gerado quando o cursor sai da área predefinida de um ele-


onblur
mento. Retira o foco.
<input onfocus=”alert(‘O elemento recebeu foco.’);”
onblur=”alert(‘O elemento perdeu o foco.’);”
type=”text”/>

É acionado quando ocorre alguma modificação com o estado


onchange
de um elemento.
<select onchange=”alert(‘A opção foi modificada.’);”>
<option value=”1”>Primeira opção</option>
<option value=”2”>Segunda opção</option>
</select>

Fonte: Elaborado pelo autor.

4.11 HTML DOM


O Document Object Model (DOM) é um API (Application Programming
Interface), multiplataforma que permite o acesso e a manipulação via JavaS-
cript (ou qualquer linguagem script) a todos os elementos de uma página
HTML. O DOM fornece uma representação do documento HTML por
meio de objetos (estruturalmente hierárquicos, em árvore) que possuem pro-
priedades e métodos, conectando as páginas web aos scripts, fornecendo não

– 118 –
JQuery

só uma maneira diferente de representação, como, também, de armazena-


mento e manipulação da página web.
Basicamente existem três componentes importantes que o desenvolve-
dor precisa dominar para poder tirar o máximo proveito do DOM.
22 Object Document
22 Método document.getElementById(id)
22 Atributos id de um elemento HTML
O DOM é uma árvore constituída de vários elementos e esta estru-
tura é acessada pelo Object Document,sendo por meio do método document.
getElementById(id) que obtemos a referência do elemento da página a ser
acessado e manipulado (contido no atributo ID). Observe o exemplo:

– 119 –
Programação Web

O DOM também possibilita a manipulação de propriedades CSS,


por exemplo:
<body>
<h1 id=”titulo_h1”> <em>MUDANDO CORES NO CSS<br>COM O
HTML DOM</em></h1>

<input type=”button” value=”Vermelho”


onclick=”document.getElementById(‘titulo_h1’).style.
color=’red’”>
<input type=”button” value=”Azul”
onclick=”document.getElementById(‘titulo_h1’).style.
color=’darkblue’”>
</body>

Saiba mais
Você pode encontrar mais informações sobre o tema no site oficial
da W3Schools (https://www.w3schools.com/js/js_htmldom.asp).

4.12 JQuery
Desenvolvido por John Resig e disponibilizado de forma livre e aberta
(Open-Source), o JQuery é um framework (biblioteca), multiplataforma total-
mente baseado em JavaScript.
Sua sintaxe é considerada bastante simples, tornando ainda mais fácil
a manipulação dos diversos elementos presentes em websites, visto que
o JQuery foi projetado com o objetivo de simplificar a manipulação de
aspectos de animação, eventos e interações Ajax. Inclusive, permiteque os
desenvolvedores criem plug-ins e efeitos avançados em páginas e aplicativos
web dinâmicos.
Algumas características do JQuery são:

– 120 –
JQuery

22 simplifica a criação de scripts;


22 facilita o uso de tarefas complexas do JavaScript;
22 por ser multiplataforma (cross-browser), proporciona interativi-
dade sem a imposição de limitações por parte dos navegadores,
dando suporte a uma grande variedade de eventos;
22 possibilita, por meio de linhas de código reduzido, a manipulação
ilimitada de qualquer tipo de conteúdo;
22 adição ou criação de recursos (plug-in, add-in).
22 adiciona efeitos visuais e animações com uma simples linha de código;
22 acessa e manipula diretamente qualquer componente do DOM
(discutido em JavaScript).
É importante compreender que o JQuery não substitui o JavaScript;
ele oferece caminhos alternativos e mais rápidos para realizar algumas
tarefas, mas o código que se escreve quando está utilizando o JQuery
ainda é JavaScript.
Vale salientar que existem diversas bibliotecas baseadas em código JavaS-
cript, mas o JQuery possui preferência para a maioria dos desenvolvedores
web, devido à sua facilidade de uso e ao potencial superior em comparação
às demais.

4.12.1 Principais diferenças entre JavaScript e JQuery


As principais diferenças entre o JavaScript e o JQuery baseiam-se nos
seguintes fatores.
22 O JQuery funciona de forma mais otimizada, pois, na maioria das
vezes, utiliza linhas de código mais reduzidas na execução de fun-
ções e, portanto, torna-se mais rápido e eficiente.
22 Apesar de sua grande popularidade, o JavaScript ainda apresenta
problemas de compatibilidade entre os navegadores. Em contra-
partida, o JQuery consegue trabalhar de forma automática com a
maioria dos navegadores existentes, eliminando a possibilidade de
futuros conflitos.

– 121 –
Programação Web

4.12.2 Inclusão do JQuery


A inclusão do Framework JQuery em nossos códigos pode ocorrer de
duas formas.
22 Via link CDN (Redes de distribuição de conteúdo, “Content deli-
very networks”)
É informado o link para o diretório público do JQuery.

A diferença entre os dois arquivos é o seu tamanho. O minified


possui a mesma codificação, mas foram eliminados do seu conte-
údo os comentários, quebras de linhas, tabulações e até mesmo os
espaços, Promovendo, assim, a redução do tamanho do arquivo
para diminuir o tempo de carregamento.
22 Localmente
Será necessário fazer download do arquivo na página oficial do
JQuery (http://jquery.com/download/), copiá-lo para a pasta do
projeto que iremos desenvolver e declaramos a inclusão do arquivo
.js no código.
<script src=”jquery-3.2.0.js”></script>

4.12.3 Sintaxe básica do JQuery


Como já discutido anteriormente, a tarefa do JQuery é selecionar ele-
mentos do HTML e aplicar ações em um elemento determinado.
Sintaxe básica:
$(‘seletor’).ação();

Onde:

– 122 –
JQuery

Figura 4.6 – Sintaxe básica do JQuery

Fonte: Elaborada pelo autor.

4.12.4 Diferença sintática entre JavaScript e JQuery


Para que possamos avaliar e compreender melhor as diferenças dis-
cutidas sobre JavaScript e JQuery, iremos apresentar os dois códigos de
forma comparativa.
JavaScript
<script type=”text/javascript”>
function changeBackground(color) {
document.body.style.background = color;
}
</script>

<body onload=”changeBackground(‘green’);”>
<h1 style=”color:white”>Aula 2 - Testando
BackgroundColor</h1>
</body>

JQuery
<script type=”text/javascript”>

– 123 –
Programação Web

$(document).ready(function(){
$(‘body’).css(‘background-color’, ‘green’);
});
</script>
<body>
<h1 style=”color:white”>Aula 2 - Testando
BackgroundColor</h1>
</body>
Figura 4.7 – Linha de código JQuery

Fonte: Elaborada pelo autor.


Perceba que o código ficou bem menor e mais simples com o uso do
JQuery, escrevendo menos e fazendo mais (“Write less, do more”, proposta e
slogan da JQuery). Imagine, então, sua aplicação em um grande e complexo
projeto? Além do tamanho, também acarretará na redução significativa do
tempo utilizado para interpretá-lo.

4.13 Manipulação de elementos na prática


As formas mais comuns de manipulação utilizando o JQueryocorrem
por meio dos elementos tag, id e class.

4.13.1 Manipulação de elementos por meio de Tag


Neste exemplo, utiliza-se as funções nativas do JQuery show() e hide()
para apresentar e ocultar parágrafos, após o usuário clicar em um botão. Dessa
forma, além do uso das funções nativas, é necessário associar sua execução a
eventos, nesse caso, o onclick.

– 124 –
JQuery

<script src=”jquery-3.2.0.min.js”></script>

<script type=”text/javascript”>
function exibeTag(tag){
$(tag).show();
}

function ocultaTag(tag){
$(tag).hide();
}
</script>

<body>
<p class=”bg-primary”>Este é um parágrafo</p>
<p class=”bg-success”>Este é outro parágrafo</
p>

<button type=”button” class=”btn btn-danger”


onclick=”ocultaTag(‘p’)”>Esconder
parágrafos</button>
<button type=”button” class=”btn btn-success”
onclick=”exibeTag(‘p’)”>Exibir parágrafos</
button>
</body>

Perceba a facilidade com que o elemento é manipulado. Quando o evento


onclick é acionado, ocorre a chamada da função (declarada na seção de JavaS-
cript) e é passado um valor (‘p’), que é reconhecido automaticamente pela
unidade seletora do JQuery como o elemento parágrafo. Inclusive, o elemento
parágrafo poderia ser declarado diretamente: $(‘p’).show();

4.13.2 Manipulação de elementos por meio de Id


É fundamental que os ids criados no código contenham sempre valores
únicos, isto é, não utilizem o mesmo nome para TAG’s diferentes.
Na sequência do exemplo, para que o seletor do JQuery identifique o
elemento como um Id, é necessário agregar a cerquilha (#).

– 125 –
Programação Web

Perceba que pelo caráter único de id é necessário realizar a chamada


da função duas vezes, transmitindo um Id por vez (“exibeId(‘texto1’);
exibeId(‘texto2’);”).

4.13.3 Manipulação de elementos por meio do Class


Como visto anteriormente, o Class é um atributo que pode ser
repetido. Sendo assim, permite que o desenvolvedor manipule vários
elementos simultaneamente.
Seguindo o mesmo exemplo acima, no caso do Class, para que o seletor
do JQuery identifique que o elemento é um Class, é necessário agregar o
ponto de concatenação, por uma questão de sintaxe obrigatória desse ele-
mento (.class).

– 126 –
JQuery

4.14 Eventos JQuery


Considerados um dos recursos mais importantes no desenvolvimento
de aplicativos web, os eventos estão presentes por meio da interatividade
entre o usuário final e a página web, isto é, toda e qualquer ação proveniente
dessa interaçãoComo exemplo, temos a ação executada no preenchimento
de um formulário, ao clicar em um parágrafo ou em um botão presente em
uma página.
Sintaxe básica
$(‘elemento’).evento(function(){
Descrição das instruções que serão executadas
após a execução da ação. });

Onde
$(‘elemento’) Nome do elemento que receberá a ação.
.evento(function(){…}) Declaração do evento que executará a ação.

4.14.1 Eventos mais conhecidos


Na sequência, apresentaremos uma breve descrição dos eventos mais
conhecidos e utilizados, juntamente com exemplos.

– 127 –
Programação Web

Tabela 4.5 – Relação de eventos mais conhecidos

Evento Função
Considerado um evento de foco. Gerado (disparado) quando
ocorre um clique em um elemento presente na página.
.click
No caso de botões, será acionado apenas quando os eventos
.mousedown e .mouseup ocorrerem no mesmo elemento.
<script>
$(function(){
$(‘button’).click(function(){
alert(‘uma mensagem’);
$(‘.elemento’).addClass(‘classe’);
})
});
</script>

.dblclick Ocorrência de um duplo clique.


<script>
$(function(){
$(‘button’).dbllick(function(){
alert(‘uma mensagem’);
$(‘.elemento’).addClass(‘classe’);
})
});
</script>

Monitora amplamente a movimentação do mouse sobre os


.hover
elementos.
<script>
$(function(){
$(‘elemento’).hover(function(){
$(‘elemento’).css({
background: ‘#fff’,
border: ‘1px solid red’ });
})
});
</script>

.mousedown O evento é disparado quando o usuário pressiona um botão.


<script>
$(function(){
$(‘elemento’).mousedown(function(){
$(‘elemento’).removeClass(‘classe’); })
});
</script>

– 128 –
JQuery

Evento Função
É acionado quando o usuário libera um botão após o evento
.mouseup
.mousedown.
<script>
$(function(){
$(‘elemento’).mouseup(function(){
$(‘elemento’).attr(‘disabled’,
false); })
});
</script>

É acionado quando o mouse (ponteiro) se posiciona sobre


um elemento. Inclusive, também será acionado na passagem
.mouseover por qualquer elemento filho.
Esse evento é geralmente utilizado juntamente com o evento
.mouseout.
<script>
$(function(){
$(‘elemento’).mouseover(function(){
$(‘elemento’).addClass(‘classe’); })
});
</script>

Sua função é semelhante ao .mouseover, mas apenas atua


sobre elementos selecionados, não sendo acionado em ele-
.mouseenter
mentos filhos. Sua abrangência limita-se apenas a um ele-
mento. Usado juntamente com o evento .mouseleave.
<script>
$(function(){
$(‘elemento’).mouseenter(function(){
$(‘elemento’).attr(‘disabled’, false); })
});
</script>

Evento acionado quando o ponteiro do mouse se retira da


.mouseleave área delimitada por um elemento. Não abrange elementos
filhos.
<script>
$(function(){
$(‘elemento’).mouseleave(function(){
$(‘elemento’).html(‘teste’); })
});
</script>

– 129 –
Programação Web

Evento Função
É acionado por meio da movimentação do ponteiro do
mouse dentro de um elemento. Atenção ao uso desse evento,
.mousemove
pois a abrangência e captação de movimentação no elemento
são pixel a pixel.
<script>
$(function(){
$(‘elemento’).mousemove(function(){
$(‘elemento’).toggleClass(‘classe’);
})
});
</script>

Quando o cursor do mouse sai da área delimitada por algum


.mouseout
elemento. Também abrange os elementos filhos.
<script>
$(function(){
$(‘elemento’).mouseout(function(){
$(‘elemento’).addClass(‘classe’);
})
});
</script>

Ao clicar em um elemento, dispara a execução de várias fun-


.toggle
ções em paralelo e/ou mostra ou esconde um elemento.
<script>
$(function(){
$(‘elemento’).toggle(
function(){$(‘elemento’).css({color:’red’}); },
function(){$(‘elemento’).css({color:’blue’});},
function(){$(‘elemento’).css({color:’green’});
});
});
</script>

<script>
$(document).ready(function(){
$(“button”).click(function(){
$(“p”).toggle();
});
});
</script>

.scroll Este evento é disparado quando o scroll do mouse for utilizado.

– 130 –
JQuery

Evento Função
<script>
$(function(){
$(‘elemento’).scroll(function(){
$(‘elemento’).toggleClass(‘classe’);
});
});
</script>

Gerado na ocorrência de um redimensionamento da tela do


.resize
browser.
<script>
$(function(){
$(window).resize(function(){
$(‘elemento’).
toggleClass(‘classe’); });
});
</script>

Fonte: Elaborado pelo autor.

Saiba mais
O tema discutido neste capítulo é muito importante para os futuros
desenvolvedores web. Por isso, é importante que você pesquise
mais sobre o assunto. Encontre mais informações no site oficial do
JQuery (https://jquery.com/ ) e no site da W3Schools (https://
www.w3schools.com/jquery/). Além disso, o link http://try.jquery.
com/ disponibiliza um curso passo a passo, com vídeos sobre o tema.

Síntese
Neste capítulo, demonstramos a importância de uma linguagem script
para o desenvolvimento de sites interativos e mais dinâmicos, que possibi-
litam mais recursos para o usuário final. Apresentamos a linguagem JavaS-
cript (considerada a principal linguagem script) e estudamos seus principais
comandos e eventos, que permitem o monitoramento de todas as ações que

– 131 –
Programação Web

o usuário realiza na página, possibilitando, assim, a criação de respostas mais


dinâmicas às ações do usuário.
Também estudamos o JQuery, um framework que simplifica a utiliza-
ção do JavaScript, permitindo, dessa forma, a criação de códigos reduzidos e
gerando maior produtividade no desenvolvimento.

Atividades
1. O método do JQuery que possibilita ocultar um elemento selecio-
nado chama-se:
a) .show(false)
b) .hide()
c) .mask()
d) .visible(false)
e) .display(false)
2. Na linguagem JavaScript, a forma de comunicação com o usuário
por meio de mensagens via caixa de entrada de dados usa o método:
a) alert
b) confirm
c) input
d) prompt
e) textarea
3. Um website foi programado para exibir o nome do usuário no
canto da tela por meio do seguinte código HTML: < p
id=”cliente”>usuário</p>
Considerando que o nome está armazenado na variável “meu-
Nome”, a sintaxe correta em JavaScript para trocar a palavra “usuá-
rio” pelo conteúdo da variável é:
a) document.getElementById(cliente).innerHTML = “meuNome”

– 132 –
JQuery

b) document.getElement(“cliente”).innerHTML = meuNome
c) document.getElementByName(cliente).innerHTML = meuNome
d) document.getElementById(meuNome).innerHTML = “cliente”
e) document.getElementById(“cliente”).innerHTML = meuNome
4. Em relação aos eventos da linguagem JavaScript, o evento que é
executado quando o usuário coloca o ponteiro do mouse sobre um
link, sem clicar, é o:
a) onLoad
b) onmouseOut
c) onmouseOver
d) onSelect
e) onSubmit

– 133 –
5
Softwares, Frameworks
e Bootstrap
Ricardo Sonaglio Albano

Existe uma grande quantidade de ferramentas disponíveis


para a área de desenvolvimento, abrangendo não apenas lingua-
gens de programação propriamente ditas; e também ferramentas de
suporte ao desenvolvimento, como por exemplo, frameworks, IDEs,
bibliotecas etc. Desta forma, o profissional deve possuir conheci-
mento e experiência para analisar cuidadosamente as necessidades
de um projeto, juntamente com as características e especificações
de cada ferramenta, pois a escolha da mais adequada fará diferença
no desenvolvimento e conclusão das tarefas. Cabe ao profissional
estar sempre atento às novas tendências, para que possa aproveitar
as vantagens provenientes do uso dessas tecnologias, tornando assim
o seu trabalho cada vez mais eficiente e eficaz.
Programação Web

Neste capítulo discutiremos sobre a escolha da ferramenta de desenvol-


vimento; contextualizaremos framework, biblioteca, Git, GitHub e bootstrap.
Ao final, será apresentada a ferramenta IDE Eclipse e sua utilização.

5.1 Conceitos gerais


A seguir abordaremos os principais conceitos necessários para a plena
compreensão deste capítulo.

5.1.1 Framework versus biblioteca


Framework e biblioteca são conceitos muito importantes e é bastante
comum verificarmos uma certa confusão sobre o que cada um deles significa,
não só por parte dos estudantes, mas também dos desenvolvedores.
22 Biblioteca: é apenas uma coleção de trechos de código, que exe-
cutam pequenas rotinas e funcionalidades (operações específicas
e bem-definidas). Baseia-se no conceito de reutilização, ou seja,
um desenvolvedor utiliza o código (somente para leitura) que foi
escrito por outros desenvolvedores. Desta forma, basta apenas que
o desenvolvedor chame uma função (presente na biblioteca), que a
biblioteca executará a rotina solicitada e retornará o resultado para
o seu código, sem que o desenvolvedor precise se preocupar com a
sua implementação. Isso reduz muito o tempo de desenvolvimento
e, consequentemente, o tamanho do projeto.
22 Framework: um framework contém o conjunto de bibliotecas.
Ele é o responsável pelos aspectos de arquitetura, isto é, contém
a definição da metodologia e características próprias de desen-
volvimento compatível para o uso das bibliotecas disponíveis. E
o desenvolvedor, ao optar por um determinado framework, terá
que adequar-se aos padrões e exigências metodológicas de desen-
volvimento de código e design. Neste caso, há uma inversão de
controle, pois o desenvolvedor apenas acessa as bibliotecas; o fra-
mework acessa o código do desenvolvedor para avaliar se a meto-
dologia é compatível.

– 136 –
Softwares, Frameworks e Bootstrap

Figura 5.1 – Esquema de representação: biblioteca versus framework

Fonte: Elaborada pelo autor.

5.1.2 Frameworks CSS minimalistas


Os frameworks minimalistas têm como objetivo proporcionar uma alter-
nativa para os projetos de desenvolvimento web, com a redução dos seus
tamanhos. Muitas vezes acabamos usando um framework poderoso para fazer
algo pequeno e, consequentemente, acabamos gerando um código maior,
sem necessidade. Esses frameworks têm como foco otimizar o que realmente
é necessário para a construção de um website. O foco é otimizar o que real-
mente importa no desenvolvimento front-end.
A tendência dos frameworks não é mais tentar resolver tudo, e sim
resolver problemas específicos, como os frameworks de Grids para a cons-
trução de layouts.
O surgimento dessa nova categoria de frameworks mais simples e práti-
cos acompanha a tendência de simplificar, utilizar somente o que é necessário
para um desenvolvimento web de qualidade e respeitando os padrões.
Alguns frameworks minimalistas são:

– 137 –
Programação Web

22 Simple Grid − foco na apresentação. Responsivo, traz apenas uma


simples grid, tornando-se leve e simples de utilizar.
22 Cardinal − otimiza a construção de layouts. Disponibiliza apenas
um esqueleto básico para construção de aplicações.
22 Pocket Grid − é um dos mais leves. Responsivo e mobile first, utili-
zando código semântico e sem limitação para o número de colunas.
É compatível com o bootstrap.
22 Cascade − utiliza o padrão Atomic Design. Separa as funcionalida-
des em módulos, ou seja, dá liberdade para o desenvolvedor acres-
centar somente o que for precisar.
Há diversos frameworks com características diferentes. É interessante
baixar e testar até encontrar o framework que se adapte melhor às suas neces-
sidades, facilitando e melhorando a eficiência do seu trabalho.

5.1.3 IDE
Um ambiente de desenvolvimento integrado (Integrated Development
Environment − IDE) é um conjunto de ferramentas de apoio destinadas ao
desenvolvimento de programas. Basicamente, oferecem um editor de código,
um compilador (ou interpretador) e um depurador, que permitem avaliar
linha a linha de um código. Podem conter alguns recursos adicionais inte-
ressantes, como realce de sintaxe (o que facilita a detecção de erros), função
autocompletar, interfaces personalizáveis de usuário, envio de aplicativos para
serviços de hospedagem, ferramentas de navegação etc.
A seguir serão apresentadas as IDEs mais populares, indicando algumas
das linguagens suportadas por cada ambiente de desenvolvimento
22 Microsoft Visual Studio: Ajax, ASP.NET, DHTML, JavaScript,
JScript, Visual Basic, Visual C #, Visual C ++, Visual F #, XAML;
22 NetBeans (open source – código aberto): C, C + +, C ++ 11, For-
tran, HTML 5, Java, PHP;
22 Eclipse (open source): C, C ++, Java, Perl, PHP, Python, Ruby;

– 138 –
Softwares, Frameworks e Bootstrap

22 Aptana Studio 3 (open source): HTML5, CSS3, JavaScript, Ruby,


Rails, PHP e Python;
22 IntelliJ IDEA: AngularJS, CoffeeScript, CS, HTML, JavaScript,
LESS, Nó JS, PHP, Python, Ruby, Sass, TypeScript;
22 Komodo: CSS, Go, JavaScript, HTML, NodeJS, PerlPHP, Python,
Ruby, Tcl;
22 Code :: Blocks: C, C ++, Fortran.

5.1.4 Git
Software open source destinado para o controle de versões de desenvolvi-
mento de aplicativos. É uma ferramenta muito útil quando o projeto é reali-
zado por uma equipe de desenvolvedores trabalhando em paralelo. Apesar de
aumentar a produtividade, é necessário um controle mais rígido para que não
ocorra nenhum risco de perda de código por causa das constantes alterações
no mesmo. O Git faz esse trabalho, gerenciando de forma eficiente todas as
diferentes versões do código que são geradas. Ele fornece um histórico com-
pleto sobre cada alteração nova, o que auxilia muito no processo acompanha-
mento da evolução e da revisão finais.

5.1.5 GitHub
É um serviço web que tem a função de hospedagem (repositório) dos
seus projetos com o objetivo de promover o desenvolvimento colaborativo,
permitindo que outros desenvolvedores possam acompanhar a evolução das
versões do seu projeto, contribuir com códigos, sugerir ou realizar altera-
ções, executar testes, incluir informações sobre a ocorrência de possíveis bugs
(erros) etc.

5.1.6 Desenvolvimento front-end e back-end


Front-end e back-end são dois conceitos bastante atuais na área de desen-
volvimento de software. Mas o que exatamente eles significam?

– 139 –
Programação Web

22 Front-end: preocupa-se apenas com o projeto visual (design) de


um aplicativo, sua usabilidade, interatividade e conteúdo. Por-
tanto, um desenvolvedor front-end é o profissional que constrói as
interfaces de um aplicativo (código direcionado ao usuário final). É
necessário que possua fluência em HTML, JavaScript e CSS. Além
disso, precisa estar familiarizado com frameworks e suas bibliotecas
(bootstrap, JQuery, Ajax etc).
22 Back-end: neste caso, tratamos do projeto lógico do aplicativo,
desenvolvendo os recursos necessários para que as interfaces
funcionem conforme o planejado, garantindo não só as rotinas
lógicas da aplicação, como também a funcionalidade da comu-
nicação entre o aplicativo, o banco de dados e o(s) servidor(es)
envolvido(s). Nessa área, também existe uma gama de linguagens
e ferramentas que o profissional necessita possuir fluência para
desenvolver seu trabalho, como as linguagens Java, PHP, Ruby,
Python, .Net; ferramentas de banco de dados como MySQL,
Oracle, SQL Server; ferramentas de controle de versão (como o
Git), IDEs etc.
Para auxiliar no desenvolvimento tanto front-end quanto back-end, exis-
tem frameworks específicos para cada um deles.

Nota
Além dos dois tipos de desenvolvedores comentados anteriormente
(front-end e back-end), ainda destacamos um profissional muito
disputado e procurado no mercado de trabalho, conhecido como
desenvolvedor full stack. Este profissional possui conhecimento para
atuar nas duas áreas de desenvolvimento de forma generalizada, tra-
balhando tanto os aspectos lógicos quanto visuais, o que o torna
um profissional muito capacitado e com diferencial sobre os demais,
pois apresenta fluência e experiência em todos os níveis da área de
desenvolvimento do projeto.

– 140 –
Softwares, Frameworks e Bootstrap

5.2 A escolha da ferramenta


de desenvolvimento mais
adequada para seu projeto
Existe uma diversidade de frameworks disponíveis no mercado. A escolha
de um determinado framework em detrimento dos demais baseia-se em prefe-
rência, conhecimento (pesquisa) e experiência. Mas qualquer um desses fato-
res, infelizmente não faz parte da realidade de um desenvolvedor iniciante.
Mesmo hábeis desenvolvedores também precisam se preocupar com a
escolha da melhor ferramenta para implementar uma solução, pois o tama-
nho e exigências diferem de projeto para projeto. Isso significa que nem sem-
pre o framework da sua preferência será o mais adequado e, por esse motivo, é
necessário definir algumas práticas que permitirão que o desenvolvedor possa
tomar a melhor decisão, garantindo menos esforço de codificação, redução
do tempo de desenvolvimento (o framework será responsável pela maior parte
do trabalho pesado), melhoria na qualidade e eficiência dos resultados, menor
custo para os clientes e a melhor experiência possível para o usuário final.
Vale salientar que a utilização de um framework não é obrigatória, mas
torna o processo de desenvolvimento mais produtivo.

5.2.1 Etapas para fazer a escolha certa


Para auxiliar na escolha do framework que melhor se adequa as necessi-
dades de um projeto específico, vamos salientar alguns aspectos que devem
ser levados em consideração para realizar essa tarefa:
1. a palavra de ordem é necessidade − procure compreender as
necessidades do cliente, entendendo qual o objetivo real da aplica-
ção dessa solução, inclusive os problemas que o cliente já enfrenta
em sua empresa e que deseja sanar com esse novo aplicativo. Con-
verse com o cliente e reúna todos os requisitos do projeto. Quanto
maior a informação, melhor o resultado e, consequentemente, a
satisfação do cliente.

– 141 –
Programação Web

2. regras de negócio/design lógico − organize os requisitos do pro-


jeto em módulos lógicos. Nesta fase, o foco não é a implementação,
e sim as regras de negócio. Desenvolva um diagrama do projeto que
represente as interações entre cada módulo. Lembre-se sempre que
a função de cada módulo não deve ser vaga ou abstrata. Caso isso
ocorra, reanalise o módulo e subdivida se for necessário.
3. identificar o tipo de solução − avalie os módulos principais do
projeto e pesquise sobre as soluções já desenvolvidas e as tecnolo-
gias mais comumente empregadas para cada uma dessas necessi-
dades. Escolha a tecnologia que lide com todas ou a maioria das
necessidades do projeto. Havendo casos especiais (requisitos não
contemplados em sua pesquisa), procure outros frameworks, plug-
-ins ou extensões que possam solucionar cada caso.
4. aspectos técnicos − é extremamente importante analisar os aspec-
tos práticos e técnicos, como prazo de entrega, equipe participante
do projeto, capacidade técnica de cada colaborador da equipe, ser-
vidor em que o projeto será hospedado, integrações com outros
serviços etc.
5. capacidade técnica − leve em consideração a capacidade técnica
da sua equipe. Os colaboradores da equipe devem conhecer o fra-
mework escolhido. Normalmente em projetos não há margem de
tempo para aprendizado paralelo.
6. limitação de tecnologia − em alguns casos, dependendo da com-
plexidade do projeto, talvez uma única ferramenta não seja sufi-
ciente para se adaptar a todas as necessidades e, portanto, será
necessário combinar mais de uma tecnologia no desenvolvimento
da solução.
7. considere a manutenção − ao escolher um framework, considere
com bastante cuidado se o responsável pela criação do framework
oferece suporte e se participa ativamente de alguma comunidade de
desenvolvimento de frameworks.
8. popularidade da ferramenta − o nível de aceitação de um fra-
mework pelos demais profissionais é um bom indicativo que atesta

– 142 –
Softwares, Frameworks e Bootstrap

a qualidade e estabilidade de uma ferramenta. Inclusive, facilitará a


obtenção de material de estudo e troca de experiências entre outros
profissionais do ramo (fóruns de discussão, comunidades).
9. protótipo − é importante avaliar a eficiência do framework para um
determinado projeto, aplicando testes funcionais, coletando resul-
tados e analisando o comportamento do framework.
Ao atender todos os aspectos discutidos acima, com certeza você pos-
suirá um bom embasamento (mesmo para desenvolvedores iniciantes) para
realizar a tomada de decisão quanto à escolha de um ou mais frameworks a
serem utilizados em um projeto.

5.3 Bootstrap
Inicialmente denominado twitter blueprint (desenvolvido por Mark
Otto e Jacob Thornton), este framework front-end (open source) foi criado
para o desenvolvimento de aplicações web baseadas em design responsivo
(comentado a seguir, no item recursos responsivos), com foco em dispo-
sitivos móveis (abordagem mobile-first), e é considerado o mais poderoso e
popular framework da atualidade.
Sua grande aceitação no mercado justifica-se por ser de leve e fácil insta-
lação, o que permite que seja utilizado tanto para projetos simples como para
projetos complexos e de grandes proporções. Além disso, no que se refere à
curva de aprendizagem, a ferramenta é muito intuitiva e acessível, proporcio-
nando facilidade e rapidez de aprendizado e, por esse motivo, é destinada a
desenvolvedores com qualquer nível de conhecimento.
Suas principais vantagens:
22 atualizações constantes − possui grande número de desenvolve-
dores colaborando com seu desenvolvimento. Desta forma, há a
promoção de atualizações de forma mais rápida e constante;
22 recursos responsivos − essa característica permite que as páginas ou
aplicativos web, além de serem mais dinâmicos, também possuam
uma melhor performance de carregamento das páginas (conforme
as limitações de tráfico na rede), e que elas sejam apresentadas com

– 143 –
Programação Web

um visual mais adequado, naquele momento, aos diferentes tipos


de resolução de tela e dispositivos móveis, e o melhor, sem exigir
nenhum trabalho adicional para o desenvolvedor.
22 consistência − o bootstrap possui uma biblioteca central que con-
tém todos os modelos e estilos de design. Isso significa que todo o
desenvolvimento front-end será padronizado.
22 compatibilidade com navegadores − este framework é reconhe-
cido por todos os mais modernos e populares navegadores.
É importante salientar que, para funcionar, o bootstrap necessita do
JQuery (já discutido anteriormente).

Dicas
Você pode realizar o download do bootstrap no próprio ende-
reço eletrônico do framework: <http://getbootstrap.com/getting-
-started/#download>. O site disponibiliza ainda extenso material para
consulta, o que permitirá que você aprofunde seu conhecimento sobre
o tema.
No que se refere ao design responsivo, o endereço eletrônico
<http://mediaqueri.es/> disponibiliza diversos modelos de layout
que identificam o dispositivo no qual o site está sendo executado e
se adequam a ele.

Essencialmente, o bootstrap estrutura-se sob um sistema de Grid (grade


com, no máximo, 12 colunas e linhas infinitas), e é a base na qual todo o
layout será desenvolvido. Esse sistema usa uma série de containers, linhas e
colunas, com a função de mapeamento e alinhamento do conteúdo e dos
elementos da página.
O Grid estrutura-se por meio de um container, que é o espaço que armaze-
nará todo o conteúdo do site, podendo ser definido em sua largura total (.con-
tainer-fluid) ou em uma largura fixa (.container) do layout. Dentro do container
existem linhas (denominadas row) e colunas (col) em que classes são utilizadas
para a criação de colunas, possuindo uma forma padronizada de identificação.

– 144 –
Softwares, Frameworks e Bootstrap

Exemplo:
.col-xs-1
Em que:
22 .col − refere-se ao nome do elemento, isto é, coluna;
22 Xs − define o tamanho que o elemento será assumido pela coluna
na tela do dispositivo, podendo ser:
22 xs = extra small (muito pequeno);
22 sm = small (pequeno);
22 md = medium (médio);
22 lg = large (grande).
22 1 − Número que determina a quantidade de colunas envolvidas
(mescladas). Neste caso, será usada apenas uma coluna simples.
Para uma melhor compreensão, na figura 5.2 serão apresentados esque-
mas representativos envolvendo o layout, aplicação do Grid e o trecho resul-
tante gerado no HTML (código-fonte).
Figura 5.2 – Sistema de Grid

Fonte: Elaborada pelo autor.

– 145 –
Programação Web

Figura 5.3 – Exemplo de representação do Grid

Fonte: Elaborada pelo autor.


Trecho do HTML resultante:
<div class=”container” style=”color:white;font-
weight:bold;text-align:center”>
<!-- 1a linha (declaração sequencial) -->
<div class=”row” style=”background-color:limeGreen;”>
<div class=”col-md-4”>4</div> <!-- Col. esquerda
-->
<div class=”col-md-5”>5</div> <!-- Col. central
-->
<div class=”col-md-3”>3</div> <!-- Col. direita
-->
</div></br>
<!-- 2a linha -->
<div class=”row” style=”background-color:limeGreen;”>
<div class=”col-md-1”>1</div>
<div class=”col-md-1”>1</div>
<div class=”col-md-1”>1</div>
<div class=”col-md-1”>1</div>
<div class=”col-md-1”>1</div>
<div class=”col-md-1”>1</div>
<div class=”col-md-1”>1</div>
<div class=”col-md-1”>1</div>
<div class=”col-md-1”>1</div>
<div class=”col-md-1”>1</div>
<div class=”col-md-1”>1</div>
<div class=”col-md-1”>1</div>
</div></br>
<!-- 3a linha -->
<div class=”row” style=”background-color:limeGreen;”>
<div class=”col-md-12”>12</div>
</div></br>
<!-- 4a linha -->

– 146 –
Softwares, Frameworks e Bootstrap

<div class=”row” style=”background-color:limeGreen;”>


<div class=”col-md-2”>2</div>
<div class=”col-md-7”>7</div>
<div class=”col-md-1”>1</div>
<div class=”col-md-2”>2</div>
</div>
</div>

Perceba que este exemplo está direcionado para o tamanho medium, que
é definido para notebooks. A figura 5.4 apresenta a classificação padrão do
sistema de Grid do bootstrap.
Figura 5.4 − Opções de Grid do bootstrap

Fonte: Adaptado de <https://v4-alpha.getbootstrap.com/layout/grid/>.


É importante salientar que também é possível configurar cada coluna
para cada tipo de exibição (dos vários tipos de dispositivos) apresentado ante-
riormente. Veja o exemplo:

– 147 –
Programação Web

Dicas
Exemplos, material de consulta e mais opções sobre o Grid com
bootstrap podem ser acessados nos endereços eletrônicos <https://
getbootstrap.com/examples/grid/> e <http://getbootstrap.com/css/>.

5.3.1 Primeiros passos – mãos à obra


1. Faça o download do bootstrap em <http://getbootstrap.com/get-
ting-started/#download)>. O arquivo compactado inclui CSS,
JavaScript e fontes.
2. Descompacte o arquivo na sua pasta de desenvolvimento web
(projeto).
Figura 5.5 − Pastas e arquivos do bootstrap
Fonte: Elaborada pelo autor.

– 148 –
Softwares, Frameworks e Bootstrap

3. Dentro da pasta de desenvolvimento, crie um arquivo utilizando o


editor da sua preferência. Recorde que seu arquivo deverá ser salvo
com o nome index.html.
4. Na mesma página de download do bootstrap, você irá encontrar o
item basic template, que é o arquivo básico que o site disponibiliza
para os desenvolvedores iniciantes. Copie o código HTML.
Figura 5.6 – Basic template (layout básico)

Fonte: <http://getbootstrap.com/getting-started/#download>.
5. Ao longo da explicação deste código, algumas alterações serão
necessárias:
22 Na segunda linha de código, temos a nossa primeira alteração:
como a linguagem está definida para o inglês, devemos trocar para
o português brasileiro (“pt-br”).
<html lang=”en”>

Alterar para:
<html lang=”pt-br”>

– 149 –
Programação Web

22 Declaração da tag para criação de design responsivo: meta chamada


“viewport” que define a largura do dispositivo e a escala inicial. O
viewport é a área completa de visualização da sua página no browser.
<meta name=”viewport” content=”width=device-width,
initial-scale=1”>

Importante: perceba que, logo abaixo da linha de código, existe


um comentário informando a precedência (ordem de importân-
cia) e obrigatoriedade da declaração das três tags no head, acima de
qualquer outra instrução.
22 Instrução que define o conteúdo que será apresentado na aba
da página.
<title>Bootstrap 101 Template</title>

Alterar para:
<title>Exemplo Bootstrap</title>

22 Link para o CSS do bootstrap: aqui novamente teremos que inter-


ferir e alterar o código conforme a estrutura das pastas gravadas
em nosso computador. Vale salientar que o arquivo é “minificado”
(minified, compactado), isto é, o código passou por um processo de
eliminação de espaços, reduzindo-se a apenas uma linha contendo
todo o código. Estudos indicam que o tempo de carregamento de
um arquivo minified é reduzido em 70%. Na mesma pasta, existe o
bootstrap.css, que é o arquivo original, sem compactação.
<link href=”css/bootstrap.min.css” rel=”stylesheet”>

Alterar para:
<link href=”bootstrap/css/bootstrap.min.css”
rel=”stylesheet”>

Importante: adquira o costume de manter organizada sua pasta de


desenvolvimento, criando subpastas. Isso é considerado pelos desen-
volvedores uma boa prática e tornará o seu trabalho mais fácil e rápido.

– 150 –
Softwares, Frameworks e Bootstrap

22 Link para o JQuery do bootstrap: Recomendado, pois possibilita o


uso de plug-ins JavaScript do bootstrap.
<script src=”https://ajax.googleapis.com/ajax/libs/
jquery/1.12.4/jquery.min. js”></script>

22 Link para o JavaScript do bootstrap: Este é o arquivo JavaScript


que é utilizado juntamente com o bootstrap. Aqui também será
necessário adaptar o caminho do arquivo conforme a estrutura
das suas pastas.
<script src=”js/bootstrap.min.js”></script>

Alterar para:
<script src=”bootstrap/js/bootstrap.min.js”></
script>

6. Salve as alterações realizadas e visualize o arquivo no browser.


Figura 5.7 – Página resultante: Hello, World!

Fonte: Elaborada pelo autor.


7. Lembra-se do exemplo de código que definimos para o Grid do
bootstrap? Vamos incluí-lo neste código, logo abaixo do “Hello,
World!” (dentro do body). Salve novamente e atualize o arquivo
no browser.

– 151 –
Programação Web

Figura 5.8 – Página resultante: uso do Grid

Fonte: Elaborada pelo autor.


8. Redimensionando a tela do browser será possível verificar o con-
ceito de design responsivo no realinhamento das colunas. Perceba
que, ao redimensionar a tela, o Grid será reagrupado linearmente
(quebrando em linhas), pois os demais tipos de exibição não
foram definidos.
Figura 5.9 − Exemplo de design responsivo

Fonte: Elaborada pelo autor.

5.3.2 Utilização do bootstrap na criação de formulários


1. Dentro do mesmo projeto que estamos trabalhando, crie um
arquivo denominado “formulario.html”;

– 152 –
Softwares, Frameworks e Bootstrap

2. Copie o conteúdo do arquivo “index.html” e cole no arquivo “for-


mulario.html”.
3. Altere o título da página.
<title>Exemplo Bootstrap</title>

Alterar para:
<title>Formulário</title>

4. Elimine todo o conteúdo do body.


5. Declare a classe container e, por meio desta classe, desenvolva um
simples formulário com o uso do sistema de grid do bootstrap.
<div class=”container”>

</div>

6. A estrutura que queremos construir no formulário deverá conter:


título, área de cadastro (contendo o botão “salvar”) e área de login
(contendo o botão “login”), como na figura 5.10.
Figura 5.10 – Formulário-destino

Fonte: Elaborada pelo autor.


7. Dentro da classe container, vamos declarar uma classe utilizando
uma função do bootstrap para tratar títulos. Neste caso, a função

– 153 –
Programação Web

page-header tratará o conteúdo definido na tag <h1> como um


cabeçalho, incluindo uma linha horizontal sob o mesmo e acres-
centando espaço em torno desse elemento.
<div class=”container”>
<div class=”page-header”>
<h1>Formulário utilizando Bootstrap</h1>
</div>
</div>
Figura 5.11 − Usando a função page-header

Fonte: Elaborada pelo autor.


8. Voltando a analisar a figura que apresenta o formulário desejado,
percebemos que será necessário criar duas colunas correspon-
dentes aos subtítulos do formulário. Lembre-se de usar as tags
correspondentes para subtítulos (<h2>...<h6>). Preste atenção
também ao número máximo de colunas (12) que podem ser uti-
lizadas por linha.
<div class=”container”>
<!-- ... -->
<div class=”col-sm-8”> <!-- Configuração p/tablets.
Ocupará 8 col -->
<h3>Registre-se </h3>
<h5>Não é usuário?</h5>
</div>
<div class=”col-sm-4”> <!-- 4 colunas. Totalizando
12 col (8+4) -->
<h3>Login</h3>
<h5>(Apenas usuários cadastrados)</h5>
</div>
</div>

– 154 –
Softwares, Frameworks e Bootstrap

Figura 5.12 – Formulário/subtítulos

Fonte: Elaborada pelo autor.


9. Pronto. Agora vamos desenvolver o formulário propriamente
dito, utilizando o que você já aprendeu no capítulo sobre HTML.
Para tanto, vamos usar tanto a tag <form> e suas correlatas (label,
input, checkbox, button), para a declaração dos elementos desejados,
quanto alguns componentes do próprio bootstrap. No caso, utili-
zaremos as funções “form-group” que são responsáveis por agrupar
elementos de um formulário, a função “form-control”, responsável
pela formatação dos campos e duas funções de criação de botão
“btn” (default) e de botão pré-formatado “btn-primary”.
Segue o resultado:

– 155 –
Programação Web

– 156 –
Softwares, Frameworks e Bootstrap

10. Como sugestão, procure atualizar a sua página a cada inserção de


um novo elemento, para que você possa acompanhar passo a passo
e entender melhor a evolução da construção do formulário.

5.3.3 Criação de tabelas com o bootstrap


O objetivo desta seção é apresentar de forma simples como é possível
construir tabelas, utilizando o bootstrap e suas funções.
1. Copie o conteúdo do arquivo “formulario.html” para um novo
arquivo denominado “tabela.html”.
2. Apague o formulário, mantendo apenas a div correspondente a
classe do page-header.
3. Altere o título da página.
<title>Formulário</title>

Alterar para:
<title>Tabelas</title>

4. Altere o título contido na classe page-header.


<div class=”container”>
<div class=”page-header”>
<h1>Formulário utilizando Bootstrap</h1>
</div>
</div>

Alterar para:
<div class=”container”>
<div class=”page-header”>
<h1>Trabalhando com tabelas utilizando Boots-
trap</h1>
</div>
</div>

5. O objetivo é construir uma tabela semelhante à figura 5.13.

– 157 –
Programação Web

Figura 5.13 – Tabela-destino

Fonte: Elaborada pelo autor.


6. Dentro da classe “container” (após a div da classe page-header), crie
a tabela da forma como já foi discutido no capítulo sobre HTML.
Não esqueça de incluir o cabeçalho da tabela usando a tag <thead>.
<table>
<thead>
<tr>
<th>Cidade</th>
<th>Hora de Saída</th>
<th>Hora de Chegada</th>
<th>Categoria do ônibus</th>
<th>Tarifa normal</th>
<th>Frequência</th>

</tr>
</thead>

<tbody>
<tr>
<td>Cidade A</td>
<td>06:00</td>
<td>14:00</td>
<td>Convencional</td>
<td>R$ 67,00</td>
<td>Diária</td>

</tr>
</tbody>
<table>
<!-- Note que codificamos apenas uma linha de dados. Na
figura a seguir,
foram adicionados mais dados. -->

– 158 –
Softwares, Frameworks e Bootstrap

Figura 5.14 – Tabela simples/formatação default

Fonte: Elaborada pelo autor.


7. Agora vamos adicionar uma função bootstrap de formatação de
tabela, apenas declarando dentro da tag <table> a classe “table”.
Atualize sua página e observe que apenas a aplicação desta fun-
ção já promoveu uma grande transformação na apresentação de
sua tabela.
<table class=”table”>
Figura 5.15 – Tabela formatada com a função table do bootstrap

Fonte: Elaborada pelo autor.


Vale salientar que esta tabela também é responsiva, isto é, vai se adap-
tando conforme o tamanho disponível.
8. Podemos melhorar ainda mais a apresentação da tabela, adicio-
nando na classe já declarada uma nova função, a “table-striped”, que
apresentará uma tabela “zebrada”, como na figura da tabela-modelo
apresentada no início dessa seção.
<table class=”table table-striped”>

9. Outras ações rápidas de formatação:


22 inserção de bordas externas na tabela: função “table-bordered”;

– 159 –
Programação Web

22 efeito de transição entre linhas: função “table-hover” que apre-


senta um efeito no qual as linhas são “evidenciadas” quando o
usuário movimenta o cursor sobre as mesmas;
22 alteração das margens-padrão: função “table-condensed”,
diminuindo o espaço reservado para as margens, tornando a
tabela menor.
<table class=”table table-striped table-bordered
table-hover

table-condensed”>

Segue o resultado:
<div class=”container”>
<div class=”page-header”>
<h1>Trabalhando com tabelas utilizando
Bootstrap</h1>
</div>

<table class=”table table-striped table-bordered


table-hover
table-condensed”>
<thead>
<tr>
<th>Destino</th>
<th>Hora de Saída</th>
<th>Hora de Chegada</th>
<th>Categoria do ônibus</th>
<th>Tarifa normal</th>
<th>Frequência</th>

</tr>
</thead>
<tbody>
<tr>
<td>Cidade A</td>
<td>06:00</td>
<td>14:00</td>
<td>Convencional</td>
<td>R$ 67,00</td>
<td>Diária</td>

– 160 –
Softwares, Frameworks e Bootstrap

</tr>
<tr>
<td>Cidade B</td>
<td>08:30</td>
<td>20:00</td>
<td>Executivo</td>
<td>R$ 126,00</td>
<td>Domingos</td>

</tr>
<tr>
<td>Cidade C</td>
<td>23:00</td>
<td>05:30</td>
<td>Leito</td>
<td>R$ 183,00</td>
<td>Domingos</td>

</tr>
</tbody>
</table>
</div>

Existe uma infinidade de funções disponíveis no bootstrap que facilitarão


o trabalho do desenvolvedor, reduzindo o tempo gasto e a sua carga de tra-
balho. Desta forma, é importante que você acesse o site oficial do bootstrap,
consulte e teste os diversos materiais disponíveis, para assim aprimorar o seu
domínio sobre o framework.

Importante
A área de desenvolvimento web exige constante atualização do pro-
fissional (reciclagem de conhecimentos é a chave!), e isso se justifica
pela velocidade de produção e lançamento de novas tecnologias.
Às vezes, a ferramenta da sua preferência pode, ao longo do tempo,
apresentar perda de performance, ou pior, tornar-se obsoleta. Então,
nunca pare de estudar.
Além disso, tenha em mente que conhecimentos e práticas novas

– 161 –
Programação Web

sempre trazem algum tipo de risco. Desta forma, procure realizar seus
“experimentos” em projetos pequenos e sem grande impacto. Assim
ficará mais fácil contornar ou mitigar (reduzir) qualquer possível problema.

5.4 IDE Eclipse


Existe uma grande diversidade de IDEs disponíveis no mercado e, nesse
âmbito, o Eclipse é uma ferramenta conceituada entre os desenvolvedores,
inclusive porque pode ser utilizada para desenvolver aplicações nas mais varia-
das e atuais linguagens de programação, não só na área de desenvolvimento
web, mas também no desenvolvimento desktop.
Serão apresentados aspectos de utilização desta ferramenta, para que
você possa ambientar-se e avaliar a viabilidade da utilização desta IDE em
projetos futuros.
O Eclipse é um projeto open source e possui diferentes distribuições para
diferentes perfis de desenvolvimento. Essa ferramenta permite a integração de
outros componentes de software (plug-ins), gerando aplicativos autônomos
denominados Eclipse RCP (Rich Client Platform).
Faça o download do Eclipse por meio do endereço eletrônico oficial:
<https://eclipse.org/downloads/eclipse-packages/>. Escolha a opção “Eclipse
IDE para desenvolvedores de JavaScript e Web”. Descompacte e execute o
arquivo (eclipse.exe).
Logo no início, o Eclipse solicitará que você defina sua pasta de trabalho.
Apenas direcione para a pasta na qual você está desenvolvendo os exemplos
discutidos neste capítulo.

– 162 –
Softwares, Frameworks e Bootstrap

Figura 5.16 – Eclipse. Seleção da pasta de trabalho

Fonte: Elaborada pelo autor.


Depois da execução desse procedimento, será apresentada a tela de
boas-vindas do Eclipse e, logo em seguida, você terá acesso ao ambiente
de desenvolvimento.
Figura 5.17 – Eclipse. Ambiente de desenvolvimento

Fonte: Elaborada pelo autor.

– 163 –
Programação Web

Para começar a trabalhar, é necessário criar a estrutura adequada. O


Eclipse necessita que seja criando um projeto, para que os códigos desenvol-
vidos futuramente sejam relacionados por meio dele.
Figura 5.18 – Eclipse. Criação de um projeto

Fonte: Elaborada pelo autor.


Na tela do assistente (Wizard), existem algumas opções de tipo de pro-
jeto. Neste caso, iremos escolher a opção “Web”, “Static Web Project”, e
estamos prontos para começar a desenvolver nossas páginas.

– 164 –
Softwares, Frameworks e Bootstrap

Figura 5.19 – Eclipse. Criação de projeto estático para web

Fonte: Elaborada pelo autor.

Importante
Lembre-se sempre de manter a pasta do bootstrap na mesma pasta
em que estão sendo desenvolvidas as suas páginas web.

Para finalizar, veja no quadro 5.1 algumas das teclas de atalho mais uti-
lizadas, com o objetivo de facilitar e tornar mais rápido o seu trabalho no
desenvolvimento de códigos utilizando o IDE Eclipse.
Quadro 5.1 – Teclas de atalho do Eclipse

Tecla de Atalho Descrição


Habilita a função “autocompletar”. Extremamente
CTRL + Espaço útil, ajudando na escrita sem erros de comandos, clas-
ses e métodos.

– 165 –
Programação Web

Tecla de Atalho Descrição


Diferente do conhecido CTRL+S (salvar um arquivo),
CTRL + Shift + S o uso desta tecla de atalho é mais produtivo, pois sal-
vará todos os arquivos contidos em um projeto.
Realiza a busca e inclusão dos imports (frameworks)
CTRL + Shift + O
utilizados no código.
Formatação automática do código (identação), con-
CTRL + Shift + F
forme padrão.
Atalho muito útil em casos em que é necessário reno-
mear alguma parte do código (variáveis, classes, méto-
Alt + Shift + R dos etc.), corrigindo todas as demais ocorrências no
projeto (um ou vários arquivos). Utiliza o processo de
renomear refatorando.
Utilizado para criação de métodos, em que seleciona-
Alt – Shift + M mos um conjunto de linhas do código e é gerado um
novo método.
Pesquisa os resources disponíveis na sua pasta de traba-
Ctrl + Shift + R
lho (workspace).
Ctrl + Shift + T Pesquisa todos os códigos-fonte e arquivos compiláveis.
Ctrl + E Pesquisa e navega entre arquivos abertos (ativos).
Processo de depuração (debugging): execução da linha
F5 selecionada, seguindo para a linha imediatamente abaixo.
Se for um método, executará o método associado.
Depuração (debugging): realiza uma função seme-
F6 lhante ao F5, a diferença é que não executa métodos
associados ao código.
Depuração: conclui a execução do método associado,
F7
retornando para o código de origem.
O depurador do Eclipse retoma a execução do código
até atingir o próximo ponto de interrupção (break-
F8
point). Não havendo breakpoints, a execução continu-
ará até sua conclusão.
Fonte: Elaborado pelo autor.
– 166 –
Softwares, Frameworks e Bootstrap

Síntese
Nesse capítulo abordamos alguns aspectos importantes não só para
o desenvolvimento de aplicações web, mas para toda a área de desenvolvi-
mento, como por exemplo o uso de frameworks, que são cada vez mais utili-
zados entre os profissionais da área. Já não basta apenas conhecer a linguagem
de programação que se trabalha, mas também é necessário conhecer os fra-
meworks que podem ser utilizados para otimizar o trabalho de desenvolvi-
mento das aplicações.
Também estudamos duas novas tendências que são fundamentais para o
cotidiano de um profissional de desenvolvimento: o controlador de versões,
que permite que o desenvolvedor mantenha de forma eficiente o controle
de versões do software que está sendo produzido e o GitHub, que permite
o desenvolvimento de uma aplicação de forma compartilhada. O GitHub é
uma tendência neste segmento de mercado.

Atividades
1. O objetivo do design responsivo é:
a) conduzir a navegação do usuário a um sistema de busca, por meio
de ícones e representações gráficas.
b) responder a perguntas frequentes dos usuários, por meio de ícones
e representações gráficas e não por meio de texto.
c) programar visualmente o site, desconsiderando as dimensões de
tela, as velocidades de conexão, os recursos de toque e outras carac-
terísticas do dispositivo do usuário.
d) fazer corresponder os recursos de um site o mais fielmente possível
às funcionalidades dos diferentes dispositivos em que um usuário
o visualiza.
e) aumentar o número de visitação de um site, utilizando ícones este-
ticamente atraentes e divertidos para aumentar a capacidade de
interação visual do usuário leigo.

– 167 –
Programação Web

2. Para evitar que dispositivos móveis (os que mais sofrem com baixa
qualidade de conexão à internet) baixem uma página pesada com
dados desnecessários, existe um padrão de desenvolvimento que
prioriza o carregamento rápido e seletivo de recursos para esses
tipos de aparelho. Essa técnica é conhecimento como:
a) First Media Query.
b) Mobile First.
c) Mobile Priority.
d) Mobility in First Place.
e) Phone Queries.
3. Qual destes é um framework de CSS e front-end?
a) Laravel.
b) Node JS.
c) bootstrap.
d) Angular.
e) Nenhuma alternativa está correta.
4. Modificações são inevitáveis quando um software é construído.
Um objetivo primordial da engenharia de software é otimizar a
forma como as modificações podem ser acomodadas e reduzir a
quantidade de esforço despendido quando elas estiverem sendo fei-
tas. Uma das ferramentas existentes para dar suporte ao processo de
gestão de modificações é:
a) front-end.
b) Hub.
c) framework.
d) Git.
e) Nenhuma alternativa está correta.

– 168 –
6
PHP
Ricardo Sonaglio Albano

A linguagem de programação PHP possui grande aceitação,


tanto para desenvolvedores iniciantes quanto para os mais expe-
rientes. Essa popularidade deve-se em grande parte às suas carac-
terísticas, pois o PHP possui uma sintaxe de fácil compreensão e
rápida aprendizagem, com suporte para a maioria dos servidores
web, sendo considerada segura e confiável. Além disso, possui uma
grande comunidade com muita documentação para pesquisa e com
participantes ativos, sempre dispostos à troca de experiências.
Neste capítulo serão abordados os fundamentos da lin-
guagem PHP (versão 7), instruindo o aluno no desenvolvimento
web, na criação, na aplicação de funções e no tratamento de dados
em formulários.
Programação Web

6.1 Uma breve história


Algo interessante sobre a história do PHP é que seu criador, Rasmus Ler-
dorf, queria apenas um contador de visitas para o seu website. Sendo assim,
desenvolveu em 1994 o seu “Personal Home Page – PHP”, como era origi-
nalmente chamado (anos depois seu nome foi modificado), utilizando para
tanto a linguagem C.
Além disso, outras duas personalidades importantes para a história do
PHP são os dois israelenses Andi Gutmans e Zeev Suraski, cofundadores da
Zend e responsáveis diretos pelo que o PHP é atualmente. Inclusive, foi a
empresa Zend que reescreveu o Core (base) do PHP 5.

6.2 Introdução e conceitos importantes


PHP (acrônimo recursivo para “PHP: Hypertext Preprocessor”) é uma
linguagem de script open source de uso geral e que possibilita criação de sites
dinâmicos, promovendo a interação com o usuário.
A principal diferença do PHP em relação a linguagens como o JavaS-
cript é que a execução do código PHP ocorre no servidor web (server-side),
sendo enviado para o cliente apenas o HTML puro.
Figura 6.1 – Diferença entre páginas estáticas e dinâmicas no servidor web

Fonte: Elaborada pelo autor.

– 170 –
PHP

Como já visto, o servidor web é um programa de computador capaz de


aceitar requisições HyperText Transfer Protocol (HTTP), ou Protocolo de
Transferência de Hipertexto, processá-las e respondê-las. Existe diversos ser-
vidores web disponíveis. Os mais conhecidos são: o IIS (Microsoft), o WebS-
phere (IBM) e o Apache, que será o servidor utilizado no desenvolvimento
deste material.
É necessário compreender que a linguagem PHP é comumente
configurada dentro de um servidor web, e que o mesmo, pode contar tam-
bém com um sistema de gerenciamento de banco de dados (SQLServer, Ora-
cle, MySQL, PostgreSQL).
Para que não sejam necessárias a instalação e a configuração de um
servidor web e das demais ferramentas necessárias de forma individual, uti-
lizaremos o programa XAMPP (acrônimo de Cross-Platform (X), Apache,
MySQL, PHP e Perl). Este programa não é um servidor web, e sim um pro-
grama facilitador multiplataforma (podendo ser utilizado em S.O. Windows,
Mac e Linux) que gerará um servidor web local para fins de teste, fornecendo
um pacote com todas as ferramentas necessárias para o desenvolvimento dos
exemplos e exercícios sugeridos neste capítulo.

Nota
Um detalhe técnico importante que deve ser lembrado diz respeito
aos nomes dos arquivos de configuração do Apache (httpd.conf) e
do PHP (php.ini).

6.3 Instalação das ferramentas necessárias


1. Faça o download da ferramenta XAMPP, disponível no link <www.
apachefriends.org/pt_br/download.html>.
2. Execute o arquivo e o assistente de instalação será acionado,
instalando a ferramenta e apresentando o painel de controle do
XAMPP.

– 171 –
Programação Web

Figura 6.2 – XAMPP Control Panel

3. Por meio desse painel iremos iniciar o serviço do Apache e do banco


de dados MySQL. Basta clicar nos botões Start do Apache (nesse
momento não é necessário iniciar o serviço do MySQL − banco de
dados − que será utilizado apenas em tópicos futuros).
22 Importante: para não consumir memória do computador, é
necessário iniciar o serviço do Apache somente no momento
em que será utilizado. Após finalizar os estudos, é preciso
desabilitar o serviço. Desta forma, você estará liberando
espaço de memória.
4. Para verificar se o seu servidor web está funcionando corretamente,
abra o seu browser e digite localhost (acesso ao servidor web local). Se
tudo estiver correto, será apresentada a página padrão do XAMPP, e
ainda será possível verificar se o PHP está em pleno funcionamento
acessando o link <http://localhost/dashboard/phpinfo.php> (ou
por meio da opção “PHPInfo”, disponível na própria página padrão
do XAMPP). Perceba que nesse momento não acontece nenhum

– 172 –
PHP

acesso à internet. Na verdade, estamos informando que o servidor


é local e está funcionando no seu computador pessoal.
Figura 6.3 – Página padrão XAMPP

Figura 6.4 – Página do PHPInfo

– 173 –
Programação Web

6.4 PHP: teoria e prática


Com tudo pronto, configurado e testado, podemos dar início ao desen-
volvimento de páginas utilizando a linguagem de programação PHP.
O PHP é uma linguagem interpretada e, desta forma, necessita de um
interpretador. Quando o servidor PHP interpreta uma página, ele percorre
todo o código-fonte do arquivo até encontrar a tag que indica o início do con-
teúdo PHP. O interpretador então executa todo o código que encontra, até
chegar na tag de fechamento PHP. É importante compreender que o código
PHP tanto pode estar em uma página separada como ficar embutido/inserido
entre as tags HTML.
Existem algumas maneiras de declarar o início e o final de uma tag PHP.
Neste material, nos fixaremos na mais comum e habilitada por padrão.
Declaração do PHP:
<?php //Tag inicial do PHP
Instruções; //Cada instrução finalizada com
ponto-e-vírgula
?> //Tag de fechamento do PHP

Observação: dentro do código PHP, podemos inserir comentários com


a utilização de barras duplas “//” para apenas uma linha, ou utilizando “/*” e
“*/” para múltiplas linhas (indicando o início e o fim do comentário).
Um detalhe importante é que todas as páginas contendo código PHP
deverão ser salvas com a extensão .PHP. Além disso, no padrão de configura-
ção do XAMPP, todos os arquivos devem ser gravados na pasta htdocs (dentro
da pasta xampp), que é o local padrão em que o Apache irá procurar os arqui-
vos .php a serem executados no localhost. Inclusive, o primeiro arquivo que o
Apache irá procurar por padrão é denominado index.php ou default.php. Vale
salientar que o index.php precede o default.php.

6.4.1 Primeiro programa em PHP


1. Abrir um editor de texto de sua preferência (por exemplo, notepad++).
2. Salvar esse arquivo na pasta htdocs (subpasta da pasta XAMPP) com
o nome index.php.

– 174 –
PHP

3. Para esse primeiro exemplo iremos utilizar o comando echo, cuja


função é a exibição de dados declarados entre aspas.
4. Dentro do arquivo index.php, digite o seguinte código:
<?php
echo “Aprendendo a programar em PHP.”;
?>
ou digite o código PHP incorporado ao código HTML:
<html>
<head>
<title>Primeiros passos – PHP</title>
</head>
<body>
<?php
echo “Aprendendo a programar em PHP.”;
?>
</body>
</html>

5. Salve o arquivo novamente.


6. Acesse o browser de sua preferência e digite localhost. O XAMPP exe-
cutará automaticamente o arquivo index.php (como já explicado).
7. Será apresentado o seguinte resultado (figura 6.5).
Figura 6.5 – Primeiro programa em PHP

Fonte: Elaborada pelo autor.


Um fato interessante relacionado ao comando echo é que a string (texto
entre aspas no exemplo a seguir) é enviada para o browser sem modificação,
permitindo que elementos HTML sejam inseridos dentro das aspas.

– 175 –
Programação Web

Exemplo:
echo “Aprendendo a programar em <strong>PHP</strong>.”;

Além disso, este comando aceita vários parâmetros de saída, incluindo


apenas uma vírgula para separá-los. Como por exemplo:
echo “Aprendendo a programar em <br>”, “<strong>PHP</
strong>.”;

6.4.2 Trabalho com variáveis em PHP


Um recurso importante na programação é o uso das variáveis que são
utilizadas para o armazenamento temporário de dados.
Regras de declaração:
22 toda variável começa pelo caractere cifrão ($);
22 após o cifrão ($), deve ser declarada uma string, que deve começar
por uma letra ou pelo caractere underline ( _ );
22 as variáveis são case sensitive, ou seja, $var, $Var e $VAR são con-
sideradas variáveis diferentes e podem possuir valores diferentes;
22 também não é possível utilizar variáveis predefinidas, conhecidas
como super global arrays. São variáveis internas do PHP, como por
exemplo: $this, $_SERVER, $_SESSION, $_GET, $_POST etc.
Exemplos de declaração de variáveis:
$_variavel = “valor”; $mes1 = “Janeiro”; $ano = 1994;
$nome = “João”; $bloqueado = false; $salario = 5500.99;
Importante comentar que o PHP não suporta a definição explícita de
tipos de variáveis (int, float, string, boolean, etc.), pois possui conversão auto-
mática de tipo (coerção de tipo automática). Desta forma, o tipo de uma
variável será determinado pelo conteúdo definido na variável. Isso quer dizer
que, quando se atribui uma string a uma determinada variável, esta variável
torna-se uma string. Da mesma maneira, se for declarado um valor inteiro
para $var, a variável se tornará um int.

– 176 –
PHP

O PHP trabalha com três tipos de dados:


22 básicos: integer, string, float, boolean;
22 compostos: array (matrizes) e object (discutido no capítulo 7, sobre
orientação a objetos);
22 especiais: resource (manipulação de arquivos) e null (discutido no
capítulo 8, sobre banco de dados).
Exemplo de código utilizando tipos de dados básicos e compostos
(array):
<?php
echo “*** Tipos de dados básicos ***<br>”;
$ano = 2017; //inteiro
$nome = “João”; //string
$bloqueado = true; //boleano (true = 1 ou false =
vazio)
$salario = 5500.99; //float, ponto flutuante

echo “Nome: “, $nome;


echo “<br>”;
echo “<br>Utilizando concatenação de dados:<br>”;
echo $ano.” “.$nome.” R$ “.$salario.”
“.$bloqueado.”<br>”;
/* perceba que é utilizado o ponto para definir a
concatenação das variáveis, espaços e texto. O
conteúdo
de cada variável é convertido para string, concatenado
e impresso, respectivamente. */

echo “<br>*** Tipos de dados compostos ***<br>”;


echo “Usando Array:<br>”;

$dados = array(“Pedro”, 1994, true, 3500.99);

/* o índice do array começa em 0 (zero) e utiliza-se


colchetes para indicar o índice */
echo $dados[2].”<br>”;
echo “Nome: “.$dados[0].”<br>”;
echo “Salário: “.$dados[3].”<br>”;
?>

– 177 –
Programação Web

Figura 6.6 – Resultado do programa sobre variáveis .JPG

Fonte: Elaborada pelo autor.


Eliminando variáveis:
O comando unset() tem a função de excluir uma variável, eliminando
da memória e impedindo que ocorra algum tipo de conflito quando for reu-
tilizada. Isso é muito útil quando estamos trabalhando com arrays ou com
orientação a objetos. Inclusive, podem ser eliminadas diversas variáveis em
uma mesma linha de comando.
Exemplo:
unset ($var1);

unset ($var2, $var3, $var4);

6.4.3 Estruturas de controle


A linguagem de programação PHP possui estruturas de controle seme-
lhantes às das demais linguagens, dividindo-se em estruturas de decisão (if...
else...elseif e switch) e estruturas de repetição (while, do...while, for e foreach).

– 178 –
PHP

Quadro 6.1 − Exemplos de código utilizando estruturas de decisão

if (código completo) if...else (código completo)


<?php <?php
$x = 5; $x = 5;
$y = 8; $y = 8;

if ($x == $y) { if ($x == $y) {


echo “x é igual a y.”; echo “x é igual a y.”;
} }
?> else {
echo “x é dife-
rente de y.”;
}

?>

if...else...elseif (trecho do código) switch (trecho do código)


if ($x == $y) { switch($x){

echo “x é igual y”; case 5:

} echo “x é igual a
5”;
elseif ($x > $y) {
break;
echo “x é maior que y”;
case 8:
}
echo “x é igual a
else {
8”;
echo “x é menor que y”;
break;
}
default:

echo “x é diferente
de 5 e 8”;

Fonte: Elaborado pelo autor.

– 179 –
Programação Web

Quadro 6.2 − Exemplos de código utilizando estruturas de repetição

while (código completo) do...while (trecho do código)


<?php $i = 0;
$i = 0; //executa, incrementa e
testa
//testa, executa e incrementa
do {
while ($i < 10) {
echo $i, “<br>”;
echo $i, “<br>”;
$i++;
$i++;
} } while ($i < 10);

?>

for (trecho do código) foreach (trecho do código)


for ($i = 0; $i < 10; $i++) { $numeros = array(1, 2, 3,
4);
echo $i, “ “;
foreach ($numeros as
}
$valores) {
echo $valores;
}

Fonte: Elaborado pelo autor.

6.4.4 Um pouco mais sobre array


Arrays em PHP comportam-se de forma semelhante aos das demais lin-
guagens, isto é, realizam atribuição de valores por meio do índice da posição:
são uma lista de valores que podem armazenar dados de diversos tipos.
Cada variável contida dentro de um array é denominada elemento, e
cada elemento é constituído por uma chave e por um valor.
Para criar um array, utiliza-se a função array(). Também podemos utili-
zar [ ] (colchetes).
Sintaxe:
array(índice/chave => valor)

– 180 –
PHP

Figura 6.7 – Código demonstrativo do array

Fonte: Elaborada pelo autor.


Outras formas de declaração de array:
<?php
$a=array(0=>”Ayrton Senna”, 1=>”Nelson Piquet”,
2=>”Emerson Fittipaldi”);
print($pilotos[1]);
print($pilotos[2]);
print($pilotos[3]);
?>

<?php
$pilotos = array(“Ayrton Senna”, “Nelson Piquet”,
“Emerson Fittipaldi”);
print($pilotos[1]);
print($pilotos[2]);
print($pilotos[3]);
?>

<?php
$pilotos = array (“Ayrton Senna”, “Nelson Piquet”,
“Emerson Fittipaldi”);
print($pilotos[2]);
$pilotos[2] = “Felipe Massa”;
print($pilotos[2]);
?>

<?php
$pilotos = [“Ayrton Senna”,”Nelson Piquet”,
“Emerson Fittipaldi”];

– 181 –
Programação Web

print($pilotos[0]);
?>

22 Array associativo
O que difere este array dos demais é o fato de possibilitar o acesso
ou atribuição de valores por meio de um identificador (número ou
nome), ou seja, de uma chave;
Exemplo:
Figura 6.8 – Código demonstrativo do array associativo

Fonte: Elaborada pelo autor.


22 Recuperação dos dados – FOR:
<?php
$pilotos = array (“Ayrton Senna”, “Nelson
Piquet”,
“Emerson Fittipaldi”);
$tamanho = count($pilotos);
for ($i=0 ; $i < $tamanho ; $i++) {
print($pilotos[$i]);
echo”<br>”;
}
?>

22 Recuperação dos dados – WHILE


<?php
$pilotos = array (“Ayrton Senna”, “Nelson
Piquet”,
“Emerson Fittipaldi”);
while ( list($chave, $valor) = each($pilotos) )
{
print(“$chave e $valor\n”);
}
?>

– 182 –
PHP

22 Recuperação dos dados – WHILE


<?php
$pilotos = array (“anos90” => “Ayrton Senna”,
“anos80” => “Nelson Piquet”,
“anos70” => “Emerson Fittipaldi”);
while ( list($chave, $valor) = each($pilotos) )
{
print(“$chave e $valor”);
}
?>

22 Recuperação dos dados – FOREACH


<?php
$pilotos = array ( “anos90” => “Ayrton Senna”,
“anos80” => “Nelson
Piquet”,
“anos70” => “Emerson
Fittipaldi”);
foreach($pilotos as $chave => $valor) {
print(“$chave , $valor”);
}
?>
Quadro 6.3 − Funções de manipulação de arrays

Função Descrição
print_r() Mostra todos os elementos de um array.
count() Conta o número de elementos de um array.
array_sum() Soma os conteúdos do array.
Unset() Permite apagar chaves de um array.
array_unique() Elimina elementos repetidos.
array_merge() Agrupa dois arrays em um.
array_intersect Faz a intersecção de dois arrays.
array_reverse() Cria um array em ordem inversa.
array_search() Procura um item em um array e retorna seu índice.
array_slice() Divide um array em vários outros.

– 183 –
Programação Web

Função Descrição
Retorna true se o elemento informado está em um
in_array()
array.
array_change_key_ Retorna o array (associativo) com o índice dos ele-
case() mentos.
Fonte: Elaborado pelo autor.
Exemplos de aplicação de função:
22 Print_R()
<?php
$pilotos = array (“Ayrton Senna”, “Nelson
Piquet”,
“Sebastian Vettel”, “Luis
Hamilton”);
print_r($pilotos);
?>

22 Count()
<?php
$pilotos = array (“anos90” => “Ayrton Senna”,
“anos80” => “Nelson Piquet”,
“anos70” => “Emerson Fittipaldi”);
print(count($pilotos));
?>

22 Unset
<?php
$pilotos = array ( “anos90” => “Ayrton Senna”,
“anos80” => “Nelson
Piquet”,
“anos70” => “Emerson
Fittipaldi”);
unset( $pilotos[“anos90”] );
$equipes = array (“Red bull”, “Mercedes”,
“Ferrari”);
unset( $equipes[1] );
?>

<?php

– 184 –
PHP

$pilotos = array ( “anos90” => “Ayrton Senna”,


“anos80” => “Nelson
Piquet”,
“anos70” => “Emerson
Fittipaldi”);
foreach ($pilotos as $i => $valor) {
unset($pilotos [$i]); }
?>

<?php
$pilotos = array ( “anos90” => “Ayrton Senna”,
“anos80” => “Nelson
Piquet”,
“anos70” => “Emerson
Fittipaldi”);
unset($pilotos);
?>

22 In_array
<?php
$people = array(“joão”, “Jose”, “Gil”, “Edson”);
if (in_array(“Gil”,$people)) {
echo “encontrado”;
} else {
echo “não encontrado”;
}
?>

6.4.5 O uso de funções


Uma função é um trecho de código ou bloco de instruções, criada para
realizar determinada tarefa. Sempre que for referenciada (chamada), um
determinado procedimento será executado. Independentemente dos argu-
mentos passados para esta função, ela sempre executará o procedimento da
mesma forma, permitindo, portanto, que a função seja reaproveitada con-
forme a necessidade. Existem muitas funções disponíveis no PHP, mas o
desenvolvedor também pode criar suas próprias funções (user’s function). Isso
é interessante quando o desenvolvedor recebe regras de negócio muito espe-
cíficas para desenvolver.
Por que usar funções?

– 185 –
Programação Web

22 Para evitar que um trecho de código que seja repetido várias vezes
dentro de um mesmo programa;
22 Para permitir o reaproveitamento de código já construído;
22 Para tornar mais rápida a alteração de um trecho de código. Com
o uso de uma função é preciso alterar apenas dentro da função
desejada;
22 Para que os blocos do programa não fiquem grandes demais e, por
consequência, mais difíceis de entender;
22 Para facilitar a leitura do programa-fonte;
22 Para separar o programa em partes (blocos) que possam ser logica-
mente compreendidos de forma isolada.
Sintaxe de declaração de uma função:
<?php
function nome_da_funcao(argumento1, argumento2)
{
bloco de instruções;
return resultado_da_função; //opcional
}
nome_da_funcao(argumentos);//chamada da função
?>

Exemplo:
<?php
function par_impar($numero) {
if ($numero % 2 == 0) {
$tipo = “par”;
} else {
$tipo = “ímpar”;
}
return $tipo;
}
echo par_impar(10);
?>

Vale salientar que os argumentos ou parâmetros apresentados na sintaxe


de declaração da função podem ou não ser usados, dependendo da necessi-
dade do desenvolvedor. Também é possível criar argumentos já com a defi-

– 186 –
PHP

nição de valores padrão, isto é, não havendo a passagem de parâmetros na


chamada da função, ela assumirá o padrão definido.
Exemplo:
<?php
function funcionario($nome=”Pedro”,
$situac=”Solteiro”){
return “Func.: $nome – Est.Civil:
$situac<br>”;
}

echo funcionario(“João”, “Casado”);


echo funcionario(“Maria”);
echo funcionario();
?>

Resultado:
Func.: João – Est.Civil: Casado
Func.: Maria – Est.Civil: Solteiro
Func.: Pedro – Est.Civil: Solteiro
Observe que na chamada da função é obrigatória a passagem de argu-
mentos na ordem correta. A passagem de parâmetros/argumentos pode ser
realizada de duas formas: a mais comum, denominada passagem de parâme-
tro por valor e a passagem de parâmetro por referência (&).
Enquanto na passagem por valor apenas envia-se o valor, esteja ele con-
tido em uma variável ou diretamente informado, na passagem por referência
utiliza-se o símbolo “&” na frente da variável, definindo que a variável não
receberá um valor propriamente dito, mas sim, um endereço ou referência de
memória informando onde o valor desejado se encontra, isto é, a informação
recebida pela função é o endereço no qual se encontra o valor e o resultado da
sua manipulação na função será gravado nesse endereço.
Exemplo:
<?php
$a = 10;

function incrementa($valor){

– 187 –
Programação Web

$valor += 50; //soma ao valor da variável


$valor
return $valor;
}

function substitui_valor(&$valor){
//& -> recebe a referência/endereço onde está a
variável
$valor += 50;
return $valor;
}

echo “<strong>Passagem por valor:</strong><br>”;


echo “Valor sem usar a função = $a <br>”;
echo “Valor usando a função =
“.incrementa($a).”<br>”;
echo “Valor sem usar a função = $a <br>”;
echo “<br>”;
echo “<strong>Passagem por referência:</
strong><br>”;
echo “Valor sem usar a função = $a <br>”;
echo “Valor usando a função = “.substitui_
valor($a).”<br>”;
echo “Valor sem usar a função = $a”;
?>

Resultado:

Passagem por valor: Passagem por referência:


Valor sem usar a função = 10 Valor sem usar a função = 10
Valor usando a função = 60 Valor usando a função = 60
Valor sem usar a função = 10 Valor sem usar a função = 60
Perceba que, na passagem por valor, o conteúdo da variável permaneceu
imutável, isto é, o que aconteceu dentro da função não provocou mudança
no conteúdo da variável usada na chamada da função. Mas na passagem por
referência, o procedimento ocorrido dentro da função alterou diretamente o
valor da variável utilizada na chamada da função. Isso ocorreu porque a alte-
ração incidiu diretamente no endereço de memória (&).

– 188 –
PHP

6.4.5.1 Funções de data e hora no PHP


Existem diversas funções predefinidas no PHP para o tratamento de
datas. Com o uso dessas funções é possível exibir a data atual, antiga e futura
de várias formas.
22 date(): pode-se formatar a data atual de diversas formas, recebendo
apenas um parâmetro: o formato de data.
Quadro 6.4 – Formato da data

Formato Descrição
d Dia do mês com 2 dígitos.
D Representação textual do dia.
m Representação numérica do mês.
M Representação textual do mês.
y Representação do ano com 2 dígitos.
Y Representação do ano com 4 dígitos.
l (‘L’ minúsculo) Descrição do dia da semana.
h Formato em 12 horas.
H Formato em 24 horas.
i Minutos.
s Segundos.
Fonte: Elaborado pelo autor.
22 time(): representação da hora em segundos, contados desde 1º de
janeiro de 1970 às 12h PM, GMT é chamada “timestamp” (UNIX
timestamp). Possui um tamanho de 11 algarismos. Pode ser usado
como segundo argumento da função  date()  quando queremos
formatar uma data antiga ou futura.
22 mktime(): recebe como parâmetro hora, minuto, segundo, mês,
dia e ano e transforma em um tipo de dado timestamp.

– 189 –
Programação Web

22 strtotime(): recebe como parâmetro uma string de formato de data


em inglês e tenta converter esse formato para timestamp. É como
tentar transformar uma frase que possui possíveis informações de
data em uma data real.

Nota
Existem casos onde o desenvolvedor possui várias aplicações sendo exe-
cutadas em um mesmo servidor que trabalham em fuso horários diferentes
(por exemplo, em empresas multinacionais). Como as funções de data
e hora do PHP baseiam-se no fuso horário (timezone) configurado na
máquina onde ele está instalado, necessitamos para cada aplicação utilizar
a função date_default_timezone_set() que especifica o timezone que
recebe o identificador de fuso horário através de um parâmetro.

6.4.6 Include e require


A prática de criação e reutilização de funções é extremamente comum
no mundo do desenvolvimento de softwares como um todo. No PHP exis-
tem duas funções que permitem a inclusão não só de funções, mas também
de páginas, bibliotecas, classes etc.
Para fazer uso dessa facilidade, basta referenciar o arquivo desejado por
meio da utilização das funções de importação:
22 include;
22 include_once;
22 require;
22 require_once.
22 Include
Ao tentar realizar a inclusão de uma página, e o processo retornar
algum tipo de erro, o script retorna um warning (aviso) e prossegue
com a execução do script. Também pode ser utilizada uma estrutura
de comandos condicionais que terá seu efeito perpetuado todas as

– 190 –
PHP

vezes que for chamada, inclusive aceitando a passagem de variáveis


(GET) na string.
Outro ponto importante é que o include é sempre reavaliado a
cada nova chamada da página, isto é, a função include é nova-
mente executada.
22 Require
Diferente da função include, se ocorrer algum tipo de erro no carre-
gamento de uma página, o script retornará um fatal error e abortará
a execução do script. Além disso, também não aceita a passagem de
variáveis (GET) na string.
Ressalta-se ainda que a instrução require pode incluir apenas um
arquivo, isto é, não há a possibilidade de inclusão de arquivos
dinamicamente.
22 Include_once e require_once
Idênticas às funções include e require, porém, se o arquivo refe-
renciado já tiver sido incluído na página anteriormente, a função
retornará ‘false’ e o arquivo solicitado não é incluído.
Exemplos:
include “lib/smtp.php”;
require “configuracoes.php”;
require_once “lib/pdf.php”;

Arquivo: biblioteca.php
<?php
function quadrado($num){
return $num * $num;
}
?>

Arquivo: teste_include.php
<?php
include ‘biblioteca.php’;
echo quadrado(2); //Função presente na
biblioteca.php
?>

– 191 –
Programação Web

6.4.7 Manipulando formulários


O PHP trabalha intensivamente com formulários, com a criação de
interfaces que proporcionam a interação do usuário (cliente) com o website.
Portanto, é necessário estabelecer qual o método de transmissão de dados e a
determinação do seu destino, isto é, qual arquivo receberá os dados para que
o PHP possa manipulá-los.
Existem duas opções de métodos de envio:
22 GET − tem a função de enviar os dados já formatados por meio da
própria URL (na barra de endereço).
22 POST − realiza a transmissão de dados por meio de pacotes, com
um maior nível de segurança.
Declaração no HTML:
Figura 6.9 − Method e action

Fonte: Elaborada pelo autor.


No código PHP é necessário receber cada dado com o método corres-
pondente ao utilizado no formulário.
Declaração em PHP:

– 192 –
PHP

Figura 6.10 – Method e Action – HTML e PHP

Fonte: Elaborada pelo autor.


Exemplo de aplicação de formulários com PHP:
Para este exemplo, será utilizado o formulário desenvolvido no capítulo 5,
sobre Bootstrap, e apenas trabalharemos na sessão de registro de novo usuário.
A seguir apresentaremos as alterações necessárias.
1. Altere a linha de comando do formulário <form> para:
<form METHOD=”post” ACTION=”recupera.php”>

2. Defina nomes para cada elemento utilizando o atributo name.


Inclua o atributo required nos elementos que forem de preenchi-
mento obrigatório:

– 193 –
Programação Web

3. Crie um arquivo chamado “recupera.php” e digite o código a seguir.


Observe que $_POST deve ser escrito com letras maiúsculas.
<?php
$nome = $_POST[“txtnome”];
$email = $_POST[“email”];
$senha = $_POST[“senha”];
$opcao = $_POST[“radopcoes”];
$servico = $_POST[“chkservico”];

echo “Nome do usuário: $nome<br>”;
echo “E-mail: $email<br>”;
echo “Senha: $senha<br>”;

if ($opcao==”P”)
$ling=”PHP”;
else
$ling=”Java”;
echo “Linguagem de Programação: $ling<br>”;

if ($servico==”on”)
$resposta=”SIM”;
else
$resposta=”NÃO”;
echo “Aceitação dos termos de Serviço:
$resposta”;
?>

4. Execute no localhost o formulário, preencha apenas os dados de


registro de novo usuário e clique no botão salvar.
5. Resultado obtido na execução:

– 194 –
PHP

Figura 6.11 – Resultado da utilização de formulários com PHP – Método Post

Fonte: Elaborada pelo autor.


Agora, vamos utilizar o método GET, para que possamos avaliar a dife-
rença entre os dois métodos de transmissão de dados.
1. Crie dois novos arquivos com o mesmo conteúdo desenvolvido em
HTML e PHP.
2. Na linha de comando do formulário, altere o método de envio de
dados para “get”:
3. De: <form METHOD=”post” ACTION=”recupera.php”>
Para: <form METHOD=”get” ACTION=”recupera_get.php”>
4. No arquivo PHP, altere o parâmetro de recebimento de dados para
$_GET, em letras maiúsculas.
$nome = $_GET[“txtnome”];
$email = $_GET[“email”];
$senha = $_GET[“senha”];
$opcao = $_GET[“radopcoes”];
$servico = $_GET[“chkservico”];

5. Execute no localhost o formulário, preencha apenas os dados de


registro de novo usuário e clique no botão salvar.
6. Resultado obtido na execução:

– 195 –
Programação Web

Figura 6.12 – Resultado da utilização de formulários com PHP – Método Get

Fonte: Elaborada pelo autor.

6.5 Cookies e sessões


O protocolo HTTP é stateless, ou seja, não mantém registro entre tran-
sações (estado/conexão). Toda a interação que o seu cliente fizer com um
servidor web acarretará em uma nova requisição e resposta. E cada requisição
é independente, possuindo um tempo de vida (conexão, envio de mensagem,
resposta, encerramento da conexão).
Além disso, o servidor web não é capaz de identificar se a ocorrência de
duas requisições originam-se de um mesmo navegador, e não faz nenhum
gerenciamento em memória para que mensagens sejam compartilhadas
entre requisições.
Desta forma, é necessário um mecanismo que permita que sejam criadas
relações entre transações e, para suprir esta necessidade, utilizamos os recursos
de cookies e sessões.
Os cookies e sessões são mecanismos que permitem armazenar informa-
ções enquanto o usuário navega entre diferentes páginas de um site.
Aplicação de cookies e sessões:
22 autenticação de usuários;
22 carrinho de compras;
22 exibição de anúncios ou imagens;
22 personalização de páginas.

– 196 –
PHP

6.5.1 Cookies
Transferência de pequenas porções de informação do web server para
o browser client e vice-versa. Geralmente usados para autenticação, rastrea-
mento e para guardar informação sobre os utilizadores, tais como as preferên-
cias do usuário.
A principal função dos cookies é permitir acesso de informações gerais
ao navegador, isto é, quando o cliente acessar novamente o site, já existirá
um arquivo-texto (cookie) armazenado no próprio computador do cliente
com informações referentes ao mesmo. Desta forma, é possível promover o
processo de adaptação dinâmica ao perfil e às preferências do cliente (língua
utilizada, cores, formulários preenchidos etc.).
É importante ressaltar que o tempo de validade de um cookie é o de
permanência deste arquivo no computador do usuário. Isso poderá ser habi-
litado/desabilitado pelo navegador (no cliente).
O PHP torna o processamento de cookies relativamente fácil. Utiliza
para tal a função setcookie(), que trabalha com dois parâmetros: o nome do
cookie e o seu respectivo valor.
O uso de cookies em PHP envolve dois passos:
22 criar o cookie;
22 recuperar o valor do cookie.
1. Criando um arquivo cookie:
Sintaxe – função setcookie():
setcookie (string nome[, string valor [, int
validade
[, string caminho [, string dominio
[, int seguro]]]]]);

Observação: os itens entre colchetes são opcionais.


Neste exemplo, temos:
22 nome – nome do cookie, de caráter obrigatório.

– 197 –
Programação Web

22 valor – conteúdo do cookie (se não for fornecido o cookie


será removido).
22 validade – tempo de validade do cookie.
22 caminho – caminho em que o cookie será armazenado.
22 domínio – domínio para o qual o cookie estará disponível;
22 seguro – 0 ou 1 (o valor 1 define que o cookie apenas será
transmitido caso seja uma conexão segura (HTTPS)).
Exemplo:
setcookie(“usuario”, $nome_usuario, time()+86400*365); 

Observação: o envio de cookies deverá ser a primeira coisa a ser


feita na transmissão de uma página (antes inclusive das tags
<html> e <body>).
2. Recuperando o valor do cookie (só pode ser recuperado em outra página):
Sintaxe – uso do array $_COOKIE
$_COOKIE[“usuario”]; //realiza a leitura do
valor do cookie.

Importante:
22 os cookies não podem ser utilizados dentro da própria página
que os criou. Podem apenas ser usados a partir do envio da pró-
xima solicitação vinda do navegador do usuário (do cliente).
22 não definir variáveis no script com o mesmo nome que os
cookies. Em PHP, o conteúdo da variável local tem precedência
(privilégio) em relação ao cookie.
Exemplos:
22 Criação do cookie:
<?php
setcookie(“cookie[teste]”, “EsoUmTeste”);
setcookie(“cookie[exemplo]”, “EumExemplo”);
setcookie(“cookie[cor]”, “UmaCor”);
?>

– 198 –
PHP

22 Recuperação:
<?php
if (isset($_COOKIE[‘cookie’])) {
foreach ($_COOKIE[‘cookie’] as
$name => $value) {
echo “$name : $value <br
/>\n”;
}
}
?>

22 Criação do cookie:
<?php
setcookie(“username”,”PHP”);
setcookie(“ultimologin”,”31-12-2100”);
?>

22 Recuperação:
<?php
if (isset($_COOKIE[“username”])) {
$username = $_COOKIE[“username”];
echo “O username é: “. $username . “\n”;
} else {
echo “Não existe nenhuma cookie com o nome
username”;
}
echo “As cookies recebidas são:\n”;
foreach ($_COOKIE as $nomecookie => $valorcookie)
{
echo “Cookie $nomecookie tem o valor
$valorcookie”;
}
?>

6.5.2 Sessões
O período de tempo durante o qual um usuário navega pelas páginas
de um site é denominado sessão. Toda sessão, quando iniciada, possui um
identificador único, geralmente armazenado em um cookie, sendo enviado ao
servidor sempre que o usuário faz uma requisição e devolvido sempre que o
servidor envie a resposta.

– 199 –
Programação Web

A sessão é utilizada em situações em que seja necessário armazenar infor-


mação, mas não por tempo suficiente que justifique seu armazenamento em
um banco de dados ou como cookie. Assim, permite-se o compartilhamento de
informações entre diferentes páginas durante a navegação do usuário pelo site.
Utiliza-se o conceito de sessão para controlar o acesso dos usuários ao site.
A sessão possibilita armazenar, por exemplo, o nome do usuário e sua senha, e,
assim, ao se navegar pelo site, em cada página poderá ser verificado se o login e
a senha estão corretos. Por isso, a sessão é tão importante quando se quer mais
segurança na página ou quando deseja-se ter um controle sobre o usuário.
O uso da sessão é comparável à utilização de um carrinho de compras on-
-line: quando adicionamos um produto no carrinho, normalmente somos dire-
cionados para outra página, em que são apresentados todos os produtos contidos
no carrinho. Se não houvesse sessão, ao retornarmos para a página de compra, o
conteúdo do carrinho seria perdido. Lembre-se, o HTTP é stateless, ou seja, cada
vez que você troca de página ele perde as informações da página anterior. Então,
para se manter os produtos da compra, é utilizado um array na sessão que arma-
zena todos os produtos adicionados no carrinho. E somente ao final, se a compra
for confirmada, os dados serão armazenados no banco de dados.
Em PHP, o session é uma variável do tipo array associativo, composto
por chaves e valores. Seu uso está condicionado a uma indicação em todas
páginas em que a sessão será utilizada. Cada sessão possui um identificador
único denominado Session ID (SID).
Regras no uso de sessão:
22 é necessário declarar a função session_start() no início de todas as
páginas do website que manipularão a sessão;
22 para adicionar alguma informação na sessão, utiliza-se a variável
$_SESSION;
22 a forma de utilização é:
$_SESSION[“variavel”] = valor;

22 para capturar a informação contida na sessão, utiliza-se a mesma


variável, mas sem atribuir nenhum valor à mesma;
echo $_SESSION[“variavel”];

– 200 –
PHP

22 ela é única por browser e por usuário;


22 se por algum motivo for preciso destruir a sessão do usuário, uti-
liza-se a função session_destroy();
22 pode ser acessada em qualquer página PHP, dentro de qualquer
método ou função;
22 acessível pela variável $_SESSION[‘ ’];
22 adiciona-se um valor à SESSION e atribui-se um nome (chave/
índice), para que se possa acessar este valor posteriormente.
$_SESSION[‘chave’] = valor;

$_SESSION[‘login’] = $_POST[‘login’];
Quadro 6.5 − Algumas funções

Função Descrição
session_id() Retorna o identificador da sessão.
session_destroy() Abandona a sessão, eliminando as variáveis e o identificador.

Fonte: Elaborado pelo autor.


Figura 6.13 – Criar e excluir uma sessão

Fonte: Elaborada pelo autor.

– 201 –
Programação Web

Na figura anterior, analisando o código “criando_sessao.php”, verifica-


-se que é utilizada a função session_start() para iniciar uma sessão e, após, é
criada uma variável sessão denominada “nome”, com a atribuição do valor
“Zanana”. Desta forma, a chave de identificação da sessão será “nome” e o
valor da chave será “Zanana”.
No código apresentado à direita na figura 6.13 (apagando_sessao.php),
a função unset() é utilizada para a exclusão da sessão. Perceba que é necessário
informar qual variável deverá ser excluída.
Figura 6.14 – Testando retorno da sessão

Fonte: Elaborada pelo autor.


No programa logado.php, é utilizada a função isset() para verificar se
uma variável existe ou não na memória. Esta função retornará o valor verda-
deiro (true) se a mesma existir. Desta forma, se a variável de sessão “logado”
existir, isso significa que o usuário está logado.
Repare que no exemplo (sessao.php) foi atribuído o valor true para a
sessão, mas poderia ser qualquer outro valor, pois estamos verificando a sua
existência e não o seu conteúdo.
Primeiro exemplo − iniciando sessão:

– 202 –
PHP

<?php
session_start(); //Iniciando sessão
if(isset($_COOKIE[“PHPSESSID”])) {
echo ‘Sessão ativada’;
}
/* Verifica se o cookie “PHPSESSID” existe.
Existindo
significa que a sessão já está ativa.
Lembre-se que o nome do cookie e da sessão é
atribuído pelo
desenvolvedor.*/
?>

Segundo exemplo – iniciando sessão:


<?php
session_start();
echo ‘Sessão Iniciada.<br />’;
//atribuindo a data como parâmetro da sessão.
$_SESSION[‘data’] = date(“Y-m-d”); echo ‘Sessão
gravada.<br />’;
echo “Sessão recuperada: “ . $_SESSION[‘data’];
?>

Exemplo – destruindo sessão:


<?php
session_start();
echo ‘Antes: <pre>’;
print_r($_SESSION);
echo ‘</pre>Depois: <pre> ‘;
session_destroy(); //Eliminando todas as sessões
ativas.
print_r($_SESSION);
echo ‘</pre>’;
?>

Nota
É importante que o leitor procure testar não só os códigos sugeridos
neste capítulo, mas que se aprofunde em cada tema, para que possa
construir o embasamento necessário, permitindo um melhor acompa-
nhamento e aproveitamento dos próximos capítulos.

– 203 –
Programação Web

Síntese
Neste capítulo foi apresentada a linguagem de programação PHP, pro-
porcionando ao aluno os conhecimentos básicos para o desenvolvimento de
programas nesta linguagem.
Aprendemos como realizar a declaração de variáveis, a atribuição de
valores às mesmas, os tipos de estrutura condicionais (if e switch) e de repeti-
ção (for, while e do...while). Discutimos também sobre o trabalho com arrays
uni e bidimensionais e algumas funções de manipulação desses arrays. Além
disso, estudamos sobre a criação de funções, sua finalidade, tipos de passa-
gem de parâmetros e aplicação. E, finalmente, aprendemos a manipular dois
importantes conceitos: cookies e sessão, com os quais podemos personalizar e
controlar o acesso às aplicações desenvolvidas.

Atividades
1. Assinale a opção que identifica uma linguagem de programação
adequada para utilização no desenvolvimento de aplicação em
ambiente web e que, além de poder ser utilizada em servidor de
aplicações Apache, funciona com o sistema operacional Windows/
Linux e é uma linguagem de scripts:
a) CLIPPER
b) PHP
c) COBOL
d) HTML
e) Nenhuma alternativa está correta.
2. Para o recebimento dos dados de um formulário HTML, enviados
por meio do método GET, para uma página PHP, deve-se utilizar:
a) $_GET[“nome_text”]
b) $GET[“nome_text”]
c) _GET$[“nome_text”]

– 204 –
PHP

d) _$GET[“nome_text”]
e) Nenhuma alternativa está correta.
3. Ao acessar uma página em PHP, onde toda a informação é processada?
a) No cliente.
b) No servidor.
c) Em ambos.
d) A informação não é processada.
e) Nenhuma alternativa está correta.
4. Qual a instrução necessária para que uma sessão seja criada em PHP?
a) session_inicio()
b) start_sesscion()
c) session_start()
d) session_begin()
e) Nenhuma alternativa está correta.

– 205 –
7
PHP Orientação
a Objeto
Ricardo Sonaglio Albano

Neste capítulo, abordaremos os conceitos da Orientação a


Objeto, paradigma que surgiu como uma possível solução para tor-
nar o processo de desenvolvimento de aplicações menos complexo,
longo e repetitivo. Uma das grandes vantagens para a orientação a
objeto é a reutilização de códigos que proporcionam o desenvol-
vimento de aplicações de forma mais simples e eficiente. Por isso,
tornou-se um padrão para a criação de aplicações.
Neste capítulo, abordaremos os conceitos de Orientação
a Objeto na linguagem PHP, instruindo o aluno na aplicação dessa
metodologia no desenvolvimento Web.
Programação Web

7.1 Introdução
A Orientação a Objetos é um paradigma de análise, projeto e desenvolvi
mento baseado na composição e interação entre diversas unidades de software.
A OOP (Object Oriented Programming) foi criada para tentar aproximar
o mundo real do mundo virtual: a proposta é simular a realidade dentro do
computador. Devido à extrema complexidade do mundo real, a Orientação a
Objetos tenta gerenciar a complexidade inerente aos problemas desse mundo,
abstraindo o conhecimento relevante e encapsulando-o dentro de objetos. O
programador é responsável por moldar o mundo dos objetos e explicar para
eles como como devem interagir entre si.
Como o PHP foi criado baseado em uma metodologia de linguagem
estruturada, foi necessário passar por um processo de amadurecimento e
adaptação da linguagem ao paradigma da Orientação a Objeto.

7.2 Objeto
É um elemento computacional que representa uma entidade (abstrata
ou concreta) do domínio do problema. Cada objeto tem suas características,
conhecidas como atributos ou propriedades, e comportamentos, chamados
de métodos ou ações. Cada objeto representa uma instância da classe.
Características (atributos)
22 São as informações de um objeto que serão manipuladas pelas ope-
rações (comportamento) daquele objeto.
22 Cada objeto possui seu próprio conjunto de atributos.
Comportamento (métodos)
22 São ações que os objetos realizam.
22 Conjunto de ações predefinidas por meio das quais o objeto res-
ponderá a demanda de processamento por parte de outros objetos.
Exemplo – carro
22 Características: modelo, cor, ano de fabricação, ano do modelo,
combustível, motor, número de portas, etc.

– 208 –
PHP Orientação a Objeto

22 Comportamentos: ligar, desligar, acelerar, frear, etc.

7.3 Classe
Representa a abstração de um conjunto de objetos que possuem carac-
terísticas e comportamentos em comum. Os objetos representados por deter-
minada classe diferenciam-se entre si pelos valores de seus atributos.
A partir de uma classe criada, podemos criar instâncias dela. A classe
irá atuar como modelo no processo de criação do objeto. Cada instância é
chamada de objeto e possui uma identidade única, pois irá ocupar um local
determinado na memória.
Por exemplo: pense em uma conta corrente. Quais os atributos e ações
que uma conta corrente pode conter? Há vários atributos. Por exemplo: CPF,
nome do correntista, data de nascimento, endereço, telefones, e-mails, agên-
cia, número da conta, saldo, etc. Analise quais ações podem ser realizadas
(sacar, depositar, transferir dinheiro, etc.). Para efeito de exemplo, vamos
reduzir esses atributos e ações.
Como criar uma classe no PHP
<?php
class ContaCorrente {
public $nome;
public $agencia;
public $numeroConta;
public $saldo;
}
?>

Como instanciar uma classe


Utiliza-se o operador NEW. Por exemplo:
<?php
include_once(‘ContaCorrente.class.php’);
// instanciando um objeto da classe ContaCorrente
$conta = new ContaCorrente();
?>

Atribuição de valores para os atributos da classe

– 209 –
Programação Web

Utiliza-se o nome do objeto seguido do nome do atributo: $objeto ->


atributo. Note que o “$” fica junto ao nome do objeto e não mais no nome
do atributo.
Exemplo: criando uma nova classe para manipular a classe ContaCorrente.
<?php
include_once(‘ContaCorrente.class.php’);
// instanciando um objeto da classe ContaCorrente
$conta = new ContaCorrente();
// atribuindo os valores dos atributos
$conta->nome = “Zanana”;
$conta->agencia = 1234;
$conta->numeroConta = 887799;
$conta->saldo = 1000.00;
// mostrando os valores dos atributos
print($conta->nome);
print(“<br>”);
print($conta->saldo);
?>

Declarando um método
Utiliza-se o nome do objeto seguido do nome do método: $objeto ->
método().
Exemplo: adicionando um método, na classe ContaCorrente, para mos-
trar os atributos da classe.
<?php
class ContaCorrente {
public $nome;
public $agencia;
public $numeroConta;
public $saldo;

function mostrarDados() {
print($this->nome);
print(“<br>”);
print($this->agencia);
print(“<br>”);
print($this->numeroConta);
print(“<br>”);
print($this->saldo);
}

– 210 –
PHP Orientação a Objeto

}
?>

Note que usamos o $this. O que isso significa? O $this indica que esta-
mos nos referenciando aos atributos ou métodos da classe e não a uma variá-
vel comum. Isso ficará mais claro, quando tratarmos dos métodos GET/SET.
Executando um método (classe de movimentação)
<?php
include_once(‘ContaCorrente.class.php’);
// instanciando um objeto da classe ContaCorrente
$conta = new ContaCorrente();
// atribuindo os valores dos atributos
$conta->nome = “Zanana”;
$conta->agencia = 1234;
$conta->numeroConta = 887799;
$conta->saldo = 1000.00;
// mostrando os valores dos atributos
$conta->mostrarDados();
?>

7.4 Boas práticas


No PHP, existem algumas boas práticas para trabalharmos com orienta-
ção a objeto. Essas regras são recomendações e não têm caráter obrigatório,
mas é importante segui-las para mantermos o padrão de desenvolvimento. A
seguir, descrevemos algumas das práticas recomendadas.
Classes
22 Definir as classes em arquivos separados.
22 Incluir os arquivos nas páginas em que os objetos dessa classe serão
utilizados. Dessa forma, aumentará a facilidade de manutenção do
código das classes sem a necessidade de alterar páginas já disponi-
bilizadas aos seus usuários.
22 Nomenclatura da classe:
22 nome de classe – deve ser escrito em CamelCase (as iniciais de
cada palavra deverão ser em letras maiúsculas, por exemplo,
ContaCorrente, ConectaBanco);

– 211 –
Programação Web

22 exemplo – class ExemploClasse { ..... }


22 nome do arquivo – ExemploClasse.class.php
Atributos
22 Nomenclatura dos atributos:
22 deve ser o mais descritivo possível;
22 também tão curto quanto possível;
22 caso seja composta por mais de uma palavra,deve iniciar, a
segunda palavra, com uma letra maiúscula;
22 exemplos – $nome, $enderecoCliente, $dataNascimento
Métodos
22 Escreva todos os métodos em camelBack. A primeira letra deve ser
minúscula. Exemplo: function buscarNomeCliente() { ..... }

Saiba mais
Para consultas e esclarecimento de qualquer dúvida, acesse o mate-
rial disponível no website oficial do PHP: <http://php.net/language.
oop5>.

7.5 Encapsulamento
A partir do PHP 5 foi introduzido o conceito de visibilidade das pro-
priedades e métodos de uma classe. É um processo no qual se ocultam as
características do objeto àqueles elementos que não têm por que conhecê-las.
Garante maior independência entre os objetos, e os atributos do objeto só
podem ser manipulados pelos próprios métodos do objeto.
Deve ser aplicado de forma a permitir que alterações na estrutura interna
de uma classe/objeto não prejudiquem o funcionamento do código externo
que a usa.
Os modificadores de acesso são:

– 212 –
PHP Orientação a Objeto

22 public – acessível a qualquer classe.


22 private – acessada pela própria classe em que ela foi declarada.
22 protected – acessada também pelas subclasses da classe em que ela
foi declarada.
A boa prática da Orientação a Objeto diz que os atributos de uma classe
devem ser privados. No caso dos atributos que estão protegidos por meio do
Private ou Protect é necessária a criação de dois métodos de acesso aos atribu-
tos. Esses métodos são denominados: GETTERS e SETTERS, sendo:
22 get – tem como responsabilidade retornar o valor do atributo desejado.
22 set – recebe o valor como argumento e atribui ao atributo em questão.
Exemplo: ContaCorrente.class.php
<?php
class ContaCorrente {
private $nome;
private $agencia;
private $numeroConta;
private $saldo;

function getnome() {
return $this->nome;
}

function setnome($nome) {
$this->nome = $nome;
}

function mostrarDados() {
print($this->nome);
print(“<br>”);
print($this->agencia);
print(“<br>”);
print($this->numeroConta);
print(“<br>”);
print($this->saldo);
}
}
?>

– 213 –
Programação Web

Ao atribuirmos o “private” para os atributos, estes não poderão ser


acessados diretamente por outras classes. Eles ficam protegidos do acesso direto
e só poderão ser acessados por meio dos métodos Get/Set. Isso possibilita maior
controle sobre os dados. Dessa forma, poderemos inserir nesses métodos todas
as regras de negócio. No exemplo a segui, utilizaremos somente o Get/Set para
o nome, mas isso deveria ser realizado para todos os atributos.
Exemplo: MovimentaContaCorrente.php
<?php
include_once(‘ContaCorrente.class.php’);
// instanciando um objeto da classe ContaCorrente
$conta = new ContaCorrente();
// atribuindo os valores dos atributos
$conta->nome = “Zanana”;
$conta->agencia = 1234;
$conta->numeroConta = 887799;
$conta->saldo = 1000.00;
// mostrando os valores dos atributos
$conta->mostrarDados();
?>

Ao executarmos a classe MovimentaContaCorrente.php, ela apresentará


o seguinte erro:
Figura 7.1 – Erro ao acessar atributos privados

Fonte: Elaborada pelo autor.


Esse erro ocorre porque o programa está tentando acessar os atributos de
outra classe que estão no modo private. Para acessar esses atributos, deve-se
usar os métodos Get/Set.
Exemplo: MovimentaContaCorrente.php

– 214 –
PHP Orientação a Objeto

<?php
include_once(‘ContaCorrente.class.php’);
// instanciando um objeto da classe ContaCorrente
$conta = new ContaCorrente();
// atribuindo os valores dos atributos
$conta->setnome(“Zanana”);
print($conta->getnome());
?>

7.6 Método construtor


Consiste em um método que será executado ou chamado toda vez que
for criado um objeto da classe. É o encarregado das ações de inicialização do
objeto e deve ser criado com o nome _construct().
Exemplo: ContaCorrente.class.php

Exemplo: MovimentaContaCorrente.php
<?php
include_once(‘ContaCorrente.class.php’);
// instanciando um objeto da classe ContaCorrente

– 215 –
Programação Web

// Usando o método construtor


$conta = new ContaCorrente(“Zanana”, 1234, 8790,
1000.00);
?>

Observação: note que no construtor é declarado o termo $this. O $this


tem como função indicar que estamos nos referenciando ao atributo da classe
e não ao parâmetro ou variável local. Assim fica mais fácil identificarmos o
que é atributo e variável.

7.7 Herança
Permite criar novas classes a partir de outras já existentes, aproveitando-
-se das características presentes na classe a ser estendida. Classes podem her-
dar as características (atributos e métodos) de outras, de modo que podemos
criar classes especializadas, baseadas em outras de abrangência mais geral. Esse
mecanismo é muito interessante, pois promove o reuso e o reaproveitamento
de código existente.
Existem diversas denominações para classes que herdam características
de outras. Elas podem ser chamadas de: classe filha, classe derivada, subclasse.
Já no caso da classe que foi herdada, ela pode ser denominada como:
classe mãe, classe principal, superclasse.
A subclasse estende a superclasse e pode:
22 adicionar novos atributos;
22 adicionar novos comportamentos, métodos;
22 alterar os comportamentos já existentes (polimorfismo – falaremos
deste tema ainda neste capítulo).
Em PHP, utiliza-se a palavra-chave extends para indicar que a classe
herda de outra. Além disso, só é possível herdar apenas de uma única classe,
ou seja, a herança múltipla não é permitida.

– 216 –
PHP Orientação a Objeto

Para ter certeza se uma classe deve herdar características de outra, faça a
seguinte pergunta: a classe Y é um tipo de classe X? Se a resposta for sim, isso
indica que será necessário aplicar o conceito de herança.
Vamos pensar no exemplo que estamos desenvolvendo sobre Conta Cor-
rente: em uma instituição financeira há vários tipos de contas, por exemplo,
conta corrente, conta corrente especial, conta salário, conta poupança, etc.
Para entendermos melhor, vamos visualizar esse cenário por meio de modelos
das classes.
Figura 7.2 – Modelo sem o uso de herança

Fonte: Elaborada pelo autor.


Obviamente os modelos apresentados na figura não apresentam a totali-
dade de atributos e métodos necessários. Foram listados apenas alguns destes
para efeito de demonstração. Consideramos que somente a conta corrente
comum tem tarifa. Observe que nas classes os atributos e métodos são pra-
ticamente os mesmos. Dessa forma, ao implementar o código dessas classes,
estaríamos, basicamente, reescrevendo vários códigos iguais, algo que, além
de não ser produtivo, geraria mais manutenção. Então, por que não unificar
os atributos e métodos que são iguais em uma única classe? E como fazer isso?
A resposta seria a utilização de herança. Aplicando o conceito de herança,
iremos unificar os códigos que são comuns em uma única classe, e as demais
herdariam seus atributos e métodos, somente sendo necessária a implementa-
ção das características específicas de cada classe.

– 217 –
Programação Web

Figura 7.3 – Modelo com o uso de herança

Fonte: Elaborada pelo autor.


A seguir, apresentaremos os códigos correspondentes.
Classe principal: Conta.class.php

– 218 –
PHP Orientação a Objeto

Classe: ContaCorrente.class.php

Importante
Note que, no método __construct() e no mostraDados(), aparece
o termo parent::. O que isso significa? O parente:: é uma palavra-
chave que permite que subclasses acessem atributos e métodos de
uma superclasse.
Basicamente, dentro do construtor da subclasse ContaCorrente,
executamos o construtor da superclasse Conta. O mesmo vale para
o método mostrarDados(),também conhecido como Operador de
Paamayim Nekudotayim, ou, em termos mais simples, dois pontos
duplo (::).

Classe: ContaEspecial.class.php

– 219 –
Programação Web

Observe que, conforme o modelo da classe ContaEspecial, ainda não


foi implementado o método sacar. Este método será desenvolvido quando
abordarmos o conceito de polimorfismo.
Classe: Poupanca.class.php

Criação dos códigos para manipulação das classes


Classe: MovimentaContaCorrente.php
<?php
include_once(‘Conta.class.php’);
include_once(‘ContaCorrente.class.php’);
$conta = new ContaCorrente(“Zanana”, 1234, 8790,
1000.00, 10.00);

– 220 –
PHP Orientação a Objeto

$conta-> mostrarDados();
?>
Figura 7.4 – Resultado ContaCorrente

Fonte: Elaborada pelo autor.


Classe: MovimentaEspecial.php
<?php
include_once(‘Conta.class.php’);
include_once(‘ContaEspecial.class.php’);
$conta = new ContaEspecial(“Wilquison”, 4321, 9870,
5000.00, 2000);
$conta-> mostrarDados();
?>
Figura 7.5 – Resultado ContaEspecial

Fonte: Elaborada pelo autor.


Classe: MovimentaPoupanca.php

– 221 –
Programação Web

<?php
include_once(‘Conta.class.php’);
include_once(‘ContaPoupanca.class.php’);
$conta=new ContaPoupanca(“Zanana e Wilquison”, 3241,
6578, 65400.00, 27);
$conta-> mostrarDados();
?>
Figura 7.6 – Resultado ContaPoupanca

Fonte: Elaborada pelo autor.

7.8 Polimorfismo
Capacidade de utilizar um comportamento (método), definido em
uma classe mãe (superclasse), sem que se preocupe com a sua implemen-
tação diferenciada em uma classe filha (subclasse). Ou seja, uma mesma
operação pode se comportar de diferentes formas em diferentes classes. A
boa prática de desenvolvimento de sistemas orientados a objetos indica que
o polimorfismo é uma vantagem, dando flexibilidade e manutenibilidade a
um sistema.
No nosso modelo, é definido um método denominado sacar na
superclasse Conta, e outro na subclasse ContaEspecial. Recorde que ainda
não foi implementado esse método na classe ContaEspecial. Além disso,
você já parou para pensar por que precisamos de um método sacar na
classe ContaEspecial?

– 222 –
PHP Orientação a Objeto

No exemplo a seguir, iremos realizar um saque no objeto ContaCor-


rente, que foi instanciado anteriormente.
Classe: MovimentaContaCorrente.php
<?php
include_once(‘Conta.class.php’);
include_once(‘ContaCorrente.class.php’);
$conta = new ContaCorrente(“Zanana”, 1234, 8790,
1000.00, 10.00);
$conta-> sacar(100);
$conta-> mostrarDados();
?>

Repare que realizamos um saque no valor de R$ 100,00. Sendo o saldo


inicial correspondente a R$ 1.000,00, ele será atualizado para R$ 900,00.
Figura 7.7 – Resultado da execução do método sacar

Fonte: Elaborada pelo autor.


A seguir, iremos realizar um saque com um valor maior que o saldo da
conta. Nesse caso, o valor do saque será de R$ 1.200,00.
<?php
include_once(‘Conta.class.php’);
include_once(‘ContaCorrente.class.php’);
$conta = new ContaCorrente(“Zanana”, 1234, 8790,
1000.00, 10.00);
$conta-> sacar(1200);
$conta-> mostrarDados();
?>

– 223 –
Programação Web

Figura 7.8 – Resultado da execução do método sacar sem saldo

Fonte: Elaborada pelo autor.


Você pode estar se perguntando: e se a conta fosse do tipo especial?
Deveríamos considerar o limite da conta, correto? Perceba que o método
sacar da classe conta não leva isso em consideração.
function sacar($valor) {
if ($this-> getsaldo() < $valor) {
print(“<br> saldo insuficiente <br>”);
} else {
$this-> saldo = $this-> saldo - $valor;
}
}

Mas esse procedimento está correto, pois o limite é uma característica pecu-
liar apenas da conta especial. Os demais tipos de conta não possuem essa pro-
priedade. Lembre-se de que a superclasse deve conter tudo que é comum a todas
as classes. Sendo assim, quando o tipo de conta for especial, ela deverá usar outro
método sacar, e é nesse momento que se faz necessário o uso do polimorfismo.
Ou seja, teremos um novo método sacar, só que declarado na classe filha (Con-
taEspecial). E, dessa forma, o método sacar será sobreposto (override), resultando
no método sacar, da classe ContaEspecial, declarado da seguinte forma:

– 224 –
PHP Orientação a Objeto

function sacar($valor) {
if ( $this-> getsaldo() + $this-> getLimite() <
$valor) {
print(“<br> saldo insuficiente <br>”);
} else {
$this-> setSaldo($this-> getsaldo() -
$valor);
}
}

Observe que a alteração aconteceu no comando if. Agora, além de con-


siderar o saldo, usaremos também o valor do limite.
Classe: MovimentaEspecial.php
<?php
include_once(‘Conta.class.php’);
include_once(‘ContaEspecial.class.php’);
$conta = new ContaEspecial(“Wilquison”, 4321, 9870,
5000, 2000);
$conta-> sacar(6000);
$conta-> mostrarDados();
?>
Figura 7.9 – Resultado da execução do método sacar especial

Fonte: Elaborada pelo autor.

– 225 –
Programação Web

Perceba que a classe que movimenta a conta especial (Movimenta-


Especial.php) não sofreu nenhuma alteração. Ela simplesmente executa o
método sacar. Mas como ela sabe qual método sacar deverá ser executado?
O método sacar da conta ou da conta especial? Essa decisão está ligada ao
tipo do objeto, que, nesse caso, é do tipo conta especial, sendo assim, o PHP
verifica se há na classe conta especial o método sacar. Havendo, será execu-
tado. Caso não haja o método sacar na conta especial, o PHP irá procurar o
método na superclasse Conta.

7.9 Classe abstrata


Analise a seguinte situação: você dirige-se a uma agência bancária e, ao
ser atendido pelo gerente, você solicita a abertura de uma conta. Provavel-
mente o gerente lhe perguntará qual o tipo de conta (corrente, poupança,
salário, etc). Então, não basta apenas solicitar uma “conta”, pois será neces-
sário definir qual o tipo de conta. No nosso modelo, podemos instanciar um
objeto do tipo conta.
Classe: MovimentaConta.php
<?php
include_once(‘Conta.class.php’);
$conta = new Conta(“Monstro”, 3241, 6578, 400.00);
$conta-> mostrarDados();
?>
Figura 7.10 – Objeto conta

Fonte: Elaborada pelo autor.

– 226 –
PHP Orientação a Objeto

Perceba que não fará sentido instanciarmos um objeto do tipo Conta,


pois como já comentado toda conta necessita possuir um tipo. Dessa
forma, a classe Conta deverá ser utilizada apenas como modelo para as
demais classes.
É nesse cenário que introduzimos o conceito de Classe Abstrata.
Esse tipo de classe será utilizado para herança, mas não poderá ter nenhum
objeto instanciado.
Para transformarmos uma classe em abstrata basta adicionar o termo
abstract na definição da classe.
Exemplo: Conta.class.php
<?php
abstract class Conta {
private $nome;
private $agencia;
private $numeroConta;
private $saldo;
function __construct ($nome, $agencia, $numeroConta,
$saldo) {
$this -> nome = $nome;
$this -> agencia = $agencia;
$this -> numeroConta = $numeroConta;
$this -> saldo = $saldo; }
function getNome() { return $this->nome; }
function setNome($nome) { $this->nome = $nome; }
function getAgencia() { return $this->agencia; }
function setAgencia($agencia) { $this->agencia =
$agencia; }
function getNumeroConta() { return $this->numeroConta;
}
function setNumeroConta($numeroConta) {
$this->numeroConta = $numeroConta; }
function getsaldo() { return $this->saldo; }
function setSaldo($saldo) { $this->saldo = $saldo; }
function Depositar$valor) { $this-> saldo =
$this-> saldo + $valor;}
function sacar($valor) {
if ($this-> getsaldo() < $valor) {
print(“saldo insuficiente”);
} else {

– 227 –
Programação Web

$this-> saldo = $this-> saldo - $valor;


}
}
function mostrarDados() {
print(“Nome: “ . $this->nome);
print(“<br>”);
print(“Agência: “ . $this->agencia);
print(“<br>”);
print(“Conta: “ . $this->numeroConta);
print(“<br>”);
print(“Saldo: “ . $this->saldo); }
}
?>

A seguir, tentaremos instanciar um objeto da classe abstrata Conta.


Classe: MovimentaConta.php
<?php
include_once(‘Conta.class.php’);
$conta = new Conta(“Monstro”, 3241, 6578, 400.00);
$conta-> mostrarDados();
?>

Resultado: quando tentamos executar o código, é gerada a mensagem


de erro apresentada na figura a seguir, informando que não é possível instan-
ciar uma classe abstrata.
Figura 7.11 – Classe abstrata: mensagem de erro

Fonte: Elaborada pelo autor.


Resumindo, classes abstratas definem o esqueleto, o modelo de compor-
tamento de outras classes e, por esse motivo, não podem ser instanciadas. Ou
seja, só existem objetos das classes reais que herdam dela. As Classes filhas são
responsáveis pela implementação da classe abstrata.

– 228 –
PHP Orientação a Objeto

7.9.1 Métodos abstratos


É possível criar métodos abstratos, mas isso significa que o método é
apenas declarado, isto é, sua implementação não é fornecida, sendo imple-
mentado posteriormente por suas classes filhas.
Analise a seguinte situação: de uma classe Forma derivam as classes:
Triangulo, Circulo e Quadrado. Todas essas classes possuem o método dese-
nhar, apagar, pintar e muitos outros. Você concorda que desenhar um triân-
gulo é diferente de desenhar um quadrado? Para executar cada um deles são
necessárias informações diferentes, pois o método desenhar da classe Trian-
gulo é diferente do método desenhar da classe Quadrado, mas ambos são
desenhar. Desse modo, para que não exista uma variação de nomes, criamos
um método desenhar abstrato na classe mãe (nesse caso a classe Forma),
e, assim, todas as classes filhas deverão implementar individualmente o que
o método desenhar deverá realizar. Na classe mãe (superclasse) apenas será
declarado o método, mas sem código algum.
Figura 7.12 – Métodos abstratos

Fonte: Elaborada pelo autor.

– 229 –
Programação Web

Retornando ao nosso exemplo anterior (contas bancárias), vamos utili-


zar o conceito de Classe Abstrata e implementá-lo, transformando o método
sacar em um método abstrato.
abstract function sacar($valor);

Repare que não há código algum, apenas uma declaração do método. E


o restante da classe continua igual.
A partir disso, vamos realizar um teste: executaremos a classe Movimen-
taContaCorrente, que instancia um objeto da classe ContaCorrente, reali-
zando um saque.
Classe: MovimentaContaCorrente.php
<?php
include_once(‘Conta.class.php’);
include_once(‘ContaCorrente.class.php’);
$conta = new ContaCorrente(“Zanana”, 1234, 8790,
1000.00, 10.00);
$conta-> sacar(1200);
$conta-> mostrarDados();
?>

Resultado
Figura 7.13 – Métodos abstratos: mensagem de erro

Fonte: Elaborada pelo autor.


A apresentação desta mensagem de erro aconteceu porque alterarmos o
método sacar da classe conta para abstrato e não implementamos o mesmo
nas classes filhas. A mensagem informa que o método sacar é abstrato.
Para solucionar esse problema, basta adicionarmos o método sacar
em todas as classes derivadas da classe Conta, nesse caso, conta corrente
e poupança.

– 230 –
PHP Orientação a Objeto

function sacar($valor) {
if ($this-> getsaldo() < $valor) {
print(“<br> saldo insuficiente <br>”);
} else {
$this-> saldo = $this-> saldo -
$valor;
}
}
Agora, ao executarmos a classe movimentaContaCorrente, o programa
funcionará normalmente. A seguir, na figura, temos o resultado obtido na
execução da classe.
Figura 7.14 – Método abstrato – implementação

Fonte: Elaborada pelo autor.

7.10 Interface
As interfaces são importantes, porque estabelecem um tipo de contrato
com as classes que as implementam. Uma classe, ao implementar uma inter-
face, compromete-se a escrever os métodos contidos nesta.

7.10.1 Características da interface


22 Não possui implementação, apenas assinatura, ou seja, apenas a
definição dos seus métodos sem o corpo.
22 Seus métodos são implicitamente Públicos e Abstratos.

– 231 –
Programação Web

22 Não é possível fazer uma instância de uma Interface e nem criar


um Construtor.
22 Funcionam como um tipo de “contrato”, em que são especificados
os atributos, métodos e funções que as classes que implementem
essa interface são obrigadas a executar.
22 As interfaces podem ser utilizadas para implementar herança múltipla.
Uma classe pode implementar diversas interfaces. Em PHP, para imple-
mentarmos uma interface, utilizamos o termo implements, juntamente com o
nome da classe a ser implementada.
Figura 7.15 – Herança – classe veículo

Fonte: Elaborada pelo autor.


Na figura anterior, é apresentado o modelo de herança da classe veículo.
Baseados nisso, faremos dois questionamentos que ajudarão na identificação
do tipo de relacionamento existente entre as classes.
1. Moto é um motor?
Definitivamente não! O que indica que não haverá herança entre
essas classes.
2. Moto usa motor?

– 232 –
PHP Orientação a Objeto

A resposta é sim. Isso significa a presença de um relacionamento


entre as duas classes, em que a classe moto irá implementar os méto-
dos da classe motor. Isso caracteriza o uso do conceito de interface:
a classe motor terá todos os métodos pertinentes a um motor (por
exemplo, ligar, acelerar, frear, etc.), e a classe moto simplesmente
implementará esses métodos. Veja o modelo na figura a seguir.
Figura 17.6 – Interface

Fonte: Elaborada pelo autor.


Implementação
Classe: motor.class.php
<?php
interface Motor {
function ligar();
function desligar();
}
?>

Classe: moto.class.php
<?php
include_once(‘Motor.class.php’);
class Moto extends veiculo implements Motor {
private $cor;

function __construct($ano, $modelo, $cor) {


parent::__construct($ano, $modelo);
$this -> cor = $cor;

– 233 –
Programação Web

}
function getCor() {return $this->cor;}
function setCor($cor) { $this->cor = $cor;}

function ligar() {print(“<br> motor está ligado


<br>”);}
function desligar() {print(“<br> motor está
desligado <br>”);}
}
?>

Observe que a classe Moto implementou os métodos ligar e desligar da


interface Motor.
Classe: exemploMoto.class.php
<?php
include_once(‘Veiculo.class.php’);
include_once(‘Moto.class.php’);
$moto = new Moto(2017, “moto 800”, “cinza”);
$moto-> ligar();
$moto-> desligar();
?>
Figura 7.17 – Resultado do uso da interface

Fonte: Elaborada pelo autor.

7.11 Palavra-chave final


Métodos que forem declarados com a palavra final não poderão ser
sobrescritos pelas subclasses. Ou seja, todas as classes derivadas deverão utilizar o
método definido como final. Não há possibilidade de polimorfismo (override).

– 234 –
PHP Orientação a Objeto

É possível declarar uma classe como final, mas isso significa que ela não
poderá ter subclasses, ou seja, não poderá implementar herança. Inclusive
podemos definir uma variável como final. Dessa forma, a variável não poderá
ter o seu valor alterado.
Para exemplificar esse conceito, em nosso estudo de caso, iremos trans-
formar para final o método depositar da classe Conta. Depois, tentaremos
sobrescrevê-lo em uma das subclasses.
Classe: Conta.class.php
Adicione ao método depositar a palavra final, no início. O restante da
classe permanecerá igual.
class Conta {
. . . .
final function Depositar($valor) {
$this-> saldo = $this-> saldo + $valor; }
. . . .

Classe: ContaCorrente.class.php
Adicione o método depositar na classe. O restante da classe permane-
cerá imutável.
function Depositar($valor) { $this-> saldo = $this->
saldo + $valor;}

Classe: MovimentaContaCorrente.php
<?php
include_once(‘Conta.class.php’);
include_once(‘ContaCorrente.class.php’);
$conta = new ContaCorrente(“Zanana”, 1234, 8790,
1000.00, 10.00);
$conta-> depositar(1200);
?>

Observe, na figura a seguir, que foi gerado um erro, que ocorreu porque
houve uma tentativa de redefinição, ou seja, executar uma sobrescrita (over-
ride) do método depositar na classe Conta Corrente. A classe Conta é do tipo
final, que não permite esse tipo de operação.

– 235 –
Programação Web

Figura 7.18 – Sobrescrita: método final

Fonte: Elaborada pelo autor.

7.12 Atributos e métodos static


Quando declaramos propriedades em uma classe, cada instância dela
possuirá suas próprias versões e valores dessas propriedades. Contudo, existe
uma forma de fazer com que uma determinada propriedade ou método per-
tença à classe e não aos objetos instanciados a partir dela. É isso que faz a
palavra-chave static.
O static determina que o atributo ou método são imutáveis. Se for
usada em um atributo, o valor deste não será alterado. No caso dos métodos,
significa que o método será o mesmo para todas as instâncias da classe, ou
seja, cada instância não possuirá um método próprio.
Um método estático pode ser chamado mesmo sem a criação de um
objeto para a classe em que este foi declarado. Métodos estáticos devem ser
usados para realizar operações que não têm vínculo com objetos, ou seja,
devem ser utilizados em casos nos quais não haja necessidade de alterar atri-
butos de algum objeto.

7.12.1 Acessando uma variável ou método estáticos


Na mesma classe: Variável: self::$NomeVariável;
Método: self::$NomeVariável;

Em outra classe:
Variável: nomeClasse:: $NomeVariável ou parent::$NomeVariável;

Método: nomeClasse::$NomeVariável;

– 236 –
PHP Orientação a Objeto

Em nosso estudo de caso, realizaremos uma alteração na classe conta.


Para cada conta criada, independentemente do tipo (corrente, especial, pou-
pança), vamos somar o valor 1 para a variável QuantidadeContas que cria-
remos na classe Conta. Essa variável será declarada do tipo static, tornando-a
única para todas as instâncias da classe. Seu objetivo será o de armazenar a
quantidade total de contas abertas. Caso essa variável não fosse do tipo static,
seria gerado a cada nova instância (new) um novo valor na memória e, dessa
forma, nunca obteríamos a quantidade total.
Classe: Conta.class.php

Classe: MovimentaConta.class.php
<?php
include_once(‘Conta.class.php’);
include_once(‘ContaCorrente.class.php’);
$conta = new ContaCorrente(“Zanana”, 1234, 8790,
1000.00, 10.00);
$conta-> mostrarDados();
$conta1 = new ContaCorrente(“Wilquison”, 4321, 9870,
5000, 20.00);
$conta1-> mostrarDados();
?>

– 237 –
Programação Web

Figura 7.19 – Exemplo de variável estática

Fonte: Elaborada pelo autor.


Perceba que, ao instanciarmos a primeira conta, o valor do campo quan-
tidade de contas é 1 e, logo depois de instanciarmos a segunda conta, alterou
o valor para 2. Isso só foi possível porque a variável é uma só para a classe e
não para cada instância.
A seguir, será realizada uma alteração na classe conta. Em vez de somar-
mos diretamente no construtor, iremos adicionar um método para fazer essa
operação, que será o método estático.
Classe: Conta.class.php
function __construct($nome, $agencia, $numeroConta,
$saldo) {
$this -> nome = $nome;
$this -> agencia = $agencia;
$this -> numeroConta = $numeroConta;
$this -> saldo = $saldo;
Conta::contar();

– 238 –
PHP Orientação a Objeto

static function contar() {


self::$QuantidadeContas++;
}

Classe: MovimentaConta.class.php
<?php
include_once(‘Conta.class.php’);
include_once(‘ContaCorrente.class.php’);
$conta = new ContaCorrente(“Zanana”, 1234, 8790,
1000.00, 10.00);
$conta-> mostrarDados();
$conta1 = new ContaCorrente(“Wilquison”, 4321, 9870,
5000, 20.00);
$conta1-> mostrarDados();
// executar o método contar da classe conta
Conta::contar();
// mostra a variável estática da classe conta
print(“<br>Quantidade de contas: “ .
Conta::$QuantidadeContas);
?>
Figura 7.20 – Exemplo de método estático

Fonte: Elaborada pelo autor.

– 239 –
Programação Web

Repare que no MovimentaConta, além de instanciarmos dois objetos,


também foi executado o método contar(). Assim, a variável $QuantidadeCon-
tas ficou com o valor 3.

Síntese
Neste capítulo, estudamos os conceitos de Orientação a Objetos, que
são importantes para a implementação de sistemas robustos, complexos, con-
fiáveis e com melhor manutenibilidade. Vale salientar que é extremamente
importante que o aluno busque aprofundar-se nos tópicos abordados, pois
eles são fundamentais não só em PHP, mas também nas demais linguagens
baseadas no paradigma de Orientação a Objetos.
Abordamos os conceitos do paradigma de Orientação a Objeto, apresenta-
mos as principais vantagens da aplicação dessa metodologia de desenvolvimento
e discutimos seus principais conceitos de OO (objeto, classe, métodos, etc.).
Estudamos, também, um de seus principais recursos, denominado
herança, que permite a reutilização de códigos sem a necessidade de
reescrevê-los a todo o momento, gerando, dessa forma, um ganho de pro-
dutividade e eficiência, desde o desenvolvimento de aplicações mais simples
até as mais complexas.
Todos esses conceitos foram demonstrados por meio de exemplos práti-
cos utilizando a linguagem PHP, com o objetivo de ambientar o aluno nesse
novo paradigma.

Atividades
1. Em programação orientada a objetos, a possibilidade de haver fun-
ções de mesmo nome, com funcionalidades similares em classes
com relação de herança entre elas, denomina-se:
a) encapsulamento
b) objeto
c) classe

– 240 –
PHP Orientação a Objeto

d) polimorfismo
e) sobrecarga
2. Na orientação a objetos, em uma relação de herança entre classes, a
subclasse herda da superclasse
a) apenas as variáveis públicas de instância.
b) apenas os métodos e variáveis de instância públicos.
c) todas as variáveis de instância e apenas os métodos estáticos.
d) todas as variáveis e métodos, exceto os públicos e os que foram
sobrescritos.
e) todas as variáveis de instância e os métodos, entretanto, podem
explicitamente sobrescrever alguns desses componentes.
3. Em POO (Programação Orientada a Objetos), dizer que a classe A
estende a classe B é o mesmo que dizer que:
a) Classe B é subclasse de A.
b) Classe A é superclasse de B.
c) Classe A é derivada de B.
d) Classe B é derivada de A.
e) Classes A e B são irmãs.
4. Para que um atributo seja visível apenas dentro da classe, ele precisa
ser do tipo:
a) public
b) private
c) void
d) comum
e) nenhuma alternativa está correta

– 241 –
8
PHP: Acesso ao
Banco de Dados
Ricardo Sonaglio Albano

Neste capítulo, estudaremos a utilização de banco de


dados dentro de uma aplicação web. Esse uso é essencial para que
possamos armazenar e manipular informações em nossas aplicações.
Também veremos formas de evitar o acesso indevido a essas infor-
mações, utilizando novos mecanismos de comunicação entre o PHP
e o banco de dados, aumentando, assim, o nível de segurança no
acesso às informações.
Neste capítulo, abordaremos o desenvolvimento PHP vol-
tado ao acesso a banco de dados por meio do PDO (PHP Data
Object), classes de acesso e manipulação de base de dados.
Atenção: para o pleno aproveitamento e desenvolvimento
deste capítulo, é importante que o aluno possua conhecimento pré-
vio sobre SQL.
Programação Web

8.1 PDO – PHP Data Object


O PHP Data Object (PDO) possibilita uma padronização da forma
como ele se comunica com um banco de dados, isto é, uma classe desenvol-
vida exclusivamente para acessar e manipular um banco de dados. O acesso à
base de dados é realizado por uma camada de abstração e interface unificada
para acessar diversos bancos de dados, tornando a comunicação com a base
de dados totalmente independentemente, ou seja, o desenvolvedor usará as
mesmas funções para realizar qualquer processo de interação com qualquer
banco de dados (CRUD – Create, Read, Update e Delete).
Presente no PHP a partir da versão 5.1, o PDO consolidou-se como
um padrão no lançamento da versão 7 do PHP. Sua principal vantagem é
que ele trabalha com uma metodologia de drivers de vários bancos de dados
(MySQL, Microsoft SQL Server, Oracle, etc.). Isso, na prática, significa que
qualquer futura migração para um novo banco de dados não acarretará em
grande impacto de manutenção e adaptação de seus códigos, bastando apenas
que o desenvolvedor carregue o driver correspondente ao banco de dados, e o
PDO fará o resto do trabalho.
O PDO está estruturado da seguinte forma:
22 núcleo –fornece a interface unificada;
22 coleção/biblioteca de drivers – para acessar banco de dados.
Figura 8.1 – Representação do funcionamento do PDO

Fonte: Elaborada pelo autor.

– 244 –
PHP: Acesso ao Banco de Dados

8.2 Principais vantagens


Os maiores benefícios do uso do PDO são:
22 segurança extra – ao contrário do MySQL e do MySQLi, o PDO
evita o SQL Injection, (possibilidade de inserir código SQL direta-
mente em um input do tipo text e, consequentemente, atribuição à
variável PHP), oferecendo maior proteção contra possíveis ataques.
Isso ocorre porque o PDO realiza o encapsulamento e verifica os
dados antes do processo de execução.
22 suporte a banco de dados – com a disponibilização de uma biblio-
teca de drivers que permitem acesso independente e padronizado a
diversos bancos de dados.
22 facilidade de uso (usabilidade) e reutilização – trabalhando
com sentenças SQL precompiladas que podem ser utilizadas
quantas vezes forem necessárias, apenas transmitindo os dados
para o Server.
22 tratamento de erros – todo e qualquer bloco de código PDO,
conceitualmente, deve estar contido entre try e catch, o que na
ocorrência de erros irá gerar warning (avisos) e exception (exceção),
auxiliando, assim, na depuração e tratamento de erros.
22 execução mais rápida por meio de conexões persistentes – a
conexão com o banco de dados não é encerrada no final do
script, ficando armazenada em cache e disponível para ser reu-
tilizada quando outro script solicitar uma conexão, evitando,
assim, a sobrecarga.

8.3 Aspectos técnicos


Para implementar e obter o máximo de rendimento do PDO, é impor-
tante que o desenvolvedor conheça claramente o significado e aplicação de
alguns aspectos técnicos necessários para o acesso e manipulação de um banco
de dados.

– 245 –
Programação Web

8.3.1 Conexão com o banco de dados


Como já discutido anteriormente, o PDO possui uma interface uni-
ficada (camada de abstração) para a conexão com o banco de dados. Isso
permite que, por meio de uma simples modificação na string de conexão,
seja efetuada a conexão com qualquer banco de dados que o PDO possua
o driver correspondente.
Sintaxe
$variavel = new PDO(“bd:host=caminho; dbname=base_dados”,
“usuario”, “senha”);

Por meio dessa declaração é feita a instância do objeto PDO, pas-


sando os parâmetros referentes ao DSN (Data Source Name, que contém as
informações de conexão com o banco de dados), o nome do usuário e sua
respectiva senha. É importante destacar que, mesmo quando não houver
uma senha definida (por exemplo, apenas focada em testes e estudos), é
obrigatória a passagem do parâmetro, bastando declarar as aspas sem con-
teúdo (“”).
Figura 8.2 – Exemplo de conexão de banco de dados

Fonte: Elaborada pelo autor.


É importante observar com bastante atenção o formato e uso de deli-
mitadores (aspas, dois pontos, ponto e vírgula, vírgula) da declaração do
PDO na conexão com o banco de dados.

8.3.2 Métodos mais comuns


A seguir, apresentaremos os métodos mais utilizados do PHP Data
Object (PDO) com suas respectivas funções.

– 246 –
PHP: Acesso ao Banco de Dados

Figura 8.3 – Métodos comuns do PDO

Fonte: Elaborada pelo autor.

8.4 PDO na prática


Na sequência, apresentaremos diversos exemplos de codificação com a
utilização do PDO na conexão com banco de dados.
Atenção: lembre-se do que já foi recomendado no início deste capítulo
– sempre desenvolver a codificação PDO entre cláusulas try e catch.

8.4.1 Criando a base de dados


Para que possamos trabalhar com o PDO, primeiramente é necessário
criar uma base de dados. É possível optar por criar por meio de qualquer fer-
ramenta. Neste caso, iremos utilizar o phpMyAdmin, que está disponível na
ferramenta XAMPP já instalada.

– 247 –
Programação Web

1. Como demonstrado na figura 8.4, apenas clique no botão “Admin”


do banco de dados MySQL.
Figura 8.4 – XAMPP: acessando o phpMyAdmin

Fonte: Elaborada pelo autor.


2. O phpMyAdmin será executado e apresentará a tela a seguir:
Figura 8.5 – Tela de apresentação da ferramenta phpMyAdmin

Fonte: Elaborada pelo autor.

– 248 –
PHP: Acesso ao Banco de Dados

3. A criação da base de dados e da tabela pode ser desenvolvida no


phpMyAdmin de duas formas: através da guia “Base de dados” ou
pela guia “SQL”, através do uso de scripts.
Figura 8.6 – phpMyAdmin: guias

Fonte: Elaborada pelo autor.


A base de dados será denominada bd_pdo e a tabela, tb_usuario, con-
forme definido na apresentação da estrutura da tabela ou por meio do script
descrito a seguir.
a) Estrutura da tabela
Figura 8.7 – Estrutura da tabela tb_usuario da base de dados bd_pdo

Fonte: Elaborada pelo autor.


b) Script
CREATE DATABASE bd_pdo;
USE bd_pdo;
CREATE TABLE tb_usuario (
id_usu INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
descr_usu VARCHAR(64) NOT NULL,
senha_usu VARCHAR(256) NOT NULL,

– 249 –
Programação Web

dtcad_usu TIMESTAMP NOT NULL DEFAULT CURRENT_


TIMESTAMP()
);

4. Insira dados na tabela criada para que se possa obter informações


no desenvolvimento do próximo tema, a manipulação de banco de
dados com o PDO.
INSERT INTO ‘tb_usuario’(‘descr_usu’, ‘senha_
usu’)
VALUES (‘usuario1’,’1234’);

8.4.2 Manipulando o banco de dados com o PDO


1. Consulta/leitura de dados
a) Conexão com o banco de dados
<?php
$conn = new PDO(“mysql:host=localhost;db
name=bd_pdo”, “root”, “”);
?>

Perceba que não foi informada a senha, isso porque não definimos
nenhuma na criação do banco de dados.
Utilizando as cláusulas try e catch, temos:

Vale salientar que o mais adequado seria realizar a passagem das infor-
mações de conexão (host, usuário e senha) por meio de variáveis, pois isso
facilita a manutenção posterior. Por exemplo:
<?php
$host = “localhost”;
$basedad = “bd_pdo”;

– 250 –
PHP: Acesso ao Banco de Dados

$usuario = “root”;
$senha = “”;

$conn = new PDO(“mysql:host=”.$host.”;dbname=”.$bas
edad,
$usuario, $senha);

b) Tratamento de erros no PDO


Para o tratamento e manipulação de erros em PDO, salientamos três
alternativas.
Figura 8.8 – Tratamento de erros no PDO

Fonte: Elaborada pelo autor.


Observe o exemplo de código (com erro intencional):
<?php
try {
$conn = new PDO(“mysql:host=localhost;db
name=bd_pdo”,”root”, “”);
$conn->setAttribute(PDO::ATTR_ERRMODE,
PDO::ERRMODE_EXCEPTION);
$statement = $conn->prepare(‘DELECT *
FROM tb_usuario’);
//DELECT é um erro intencional
$statement->execute();
} catch(PDOException $erro) {
echo “<strong>ERRO DETECTADO:</strong></
br>”, $erro->getMessage();
file_put_contents(‘PDOErrors.txt’,
$e->getMessage(), FILE_APPEND);
}

– 251 –
Programação Web

?>

c) Declarando uma instrução SQL – Prepared Statement


Para declarar uma instrução SQL (Query), utilizamos o método pre-
pare() relacionado à variável responsável pela conexão com o banco de dados.
No exemplo a seguir, iremos declarar um select para apresentar os dados con-
tidos na tabela tb_usuario.
$statement = $conn->prepare(“SELECT * FROM tb_
usuario”);

d) Executando a Query
O método execute() será o responsável por enviar a instrução (select) para
o banco de dados realizar a execução.
$statement->execute();

e) Leitura de retorno (múltiplas linhas)


Após a execução, o banco de dados enviará o resultado obtido por meio
da instrução SQL. Sendo assim, para capturarmos a informação de retorno,
utilizaremos o método fetch(), juntamente com a constante interna da classe
PDO denominada PDO::fetch_assoc, que retorna um Array indexado pelo
nome da coluna. Finalmente, apresentaremos os valores contidos no Array
resultante utilizando um comando foreach lendo cada linha e outro foreach
para a leitura de cada coluna do Array.
$results = $statement->fetchAll(PDO::FETCH_ASSOC);

foreach($results as $row) { //leitura do Array, linha


a linha
foreach($row as $key => $value) { //leitura
coluna a coluna
echo “</strong>”.$key.”: </
strong>”.$value.”</br>”; }
//finaliza a apresentação de cada registro com
uma linha
echo “========================================
=========</br>”;
}
//Onde: $key contém o nome da coluna e o $value o valor
contido na mesma.

– 252 –
PHP: Acesso ao Banco de Dados

Como resultado, temos:


Figura 8.9 – Leitura de dados por meio do fetchAll

Fonte: Elaborada pelo autor.


Podemos, ainda, utilizar o comando var_dump, que, além de apresentar
os dados contidos na tabela, também apresentará as informações de configu-
ração dela.
$results = $statement->fetchAll(PDO::FETCH_ASSOC);
var_dump($results);

f ) Código completo resultante (consulta.php)

– 253 –
Programação Web

g) Leitura de retorno (apenas uma linha, um registro)

h) Parâmetros do método fetch()


Na figura 8.10, temos os principais parâmetros do método fetch(), com
suas respectivas descrições.
8.10 – Principais parâmetros do fetch()

– 254 –
PHP: Acesso ao Banco de Dados

Fonte: Elaborada pelo autor.


2. Inserindo dados
Na implementação do nosso código, é possível perceber que não
utilizaremos a declaração direta de variáveis no Prepared Statement
(declarações predefinidas). Isso porque esse tipo de declaração pos-
sibilita que um SQL Injection (já comentado no início deste capí-
tulo) seja executado.
Por esse motivo, todas as futuras declarações trabalharam com a
substituição de valores por espaços reservados (Named Placehol-
ders), que podem ser sob a forma de pseudo-nomes (espaços reser-
vados nomeados) ou pontos de interrogação (espaços reservados
não nomeados).
// espaços reservados não nomeados (pontos de
interrogação)
$statement = $conn->prepare(“INSERT INTO tb_
usuario(descr_usu, senha_usu)
VALUES (?, ?)”);

// espaços reservados nomeados (pseudo-nomes)


$statement = $conn->prepare(“INSERT INTO tb_
usuario(descr_usu, senha_usu)
VALUES (:login,
:password)”);

Atenção: observe o uso de dois pontos no início da declaração dos


pseudonomes.
a) Código resultante (inclusaointerrog.php)

– 255 –
Programação Web

b) Código resultante (inclusaopseudo.php)

Também podemos utilizar o método bindParam(), que, por meio de


referência, receberá o valor contido no Named Placeholder.

É importante sempre verificarmos se a execução da instrução foi realizada


com sucesso. Para isso podemos testar o retorno da execução do comando
(true ou false) utilizando o if...else:
$result = $statement->execute();
if ($result) {
echo(“Registro incluído com sucesso”);
}else {

– 256 –
PHP: Acesso ao Banco de Dados

echo(“Erro de inclusão. Operação não


realizada.”);
}

c) Código resultante

3. Alterando registros

– 257 –
Programação Web

Figura 8.11 – Alteração de registro: antes e depois

Fonte: Elaborado pelo autor.


Observação: sempre tome muito cuidado ao utilizar o comando update.
O uso da cláusula where deve sempre acompanhar essa instrução, pois, assim,
serão delimitadas quais linhas da tabela serão alteradas.
4. Eliminando dados

Observação: sempre ao utilizar esse comando analise cuidadosamente o


que será excluído. Evite utilizar o comando delete sem a cláusula where.
5. Commit e Rollback – transações
O controle de transações é um procedimento que gera maior segu-
rança sobre os dados armazenados em uma base de dados. O uso
dos comandos update e delete de forma descuidada pode acarretar
grandes prejuízos em uma organização. E, dessa forma, é necessário

– 258 –
PHP: Acesso ao Banco de Dados

que seja implantada uma política de tratamento e avaliação de pos-


síveis inconsistências ou falhas.
Essa avaliação baseia-se no conceito ACID (atomicidade, consistên-
cia, isolamento e durabilidade). Conceitualmente, uma transação
só poderá ser concluída se abranger essas quatro propriedades.
Para implementar o conceito de transações utilizaremos três métodos.
22 BeginTransaction(): método responsável por definir o início
de uma transação. Sempre relacionado à conexão com o banco
de dados e não ao Prepared Statement. Ao utilizar esse método,
qualquer declaração de instrução SQL poderá ser executada,
mas não em caráter definitivo, necessitando de confirmação
ou cancelamento da execução.
$conn->beginTransaction();

22 Commit(): confirma a execução da transação de forma defi-


nitiva. Todas as instruções SQL (Query) declaradas abaixo do
método beginTransaction() serão devidamente executadas.
Vale salientar a importância de executar o método Commit()
apenas depois de realizar todos os procedimentos de avaliação
de possíveis erros.
$conn->commit();

22 Rollback(): método utilizado sempre quando houver a


ocorrência de erro na execução da Query. Cancela a execução
da transação, abortando a operação.
$conn->rollBack();

a) Código resultante

– 259 –
Programação Web

8.5 PHP Data Object – DAO


Quando desenvolvemos, devemos visualizar e implementar o projeto em
camadas: a camada referente ao banco de dados, a camada de PHP que conversa
com o banco de dados e a camada de interface final, na qual o usuário interage
com a aplicação. O usuário preenche uma informação que é enviada para o PHP,
o qual consulta no banco de dados, que recebe e trata o resultado, devolvendo-o
para a última camada, formando, assim, uma arquitetura em camadas.
Na sequência, apresentaremos um exemplo da declaração de uma classe
DAO. Observe que, na declaração da classe, temos todos os métodos necessá-
rios para a comunicação com o banco de dados e que a classe (Sql) herda da
classe PDO, o que significa que esta, automaticamente, irá possuir todos os
métodos contidos/declarados no PDO.
O construtor dessa classe possui a função de conexão com o banco de
dados e, sendo assim, sempre que instanciarmos um objeto do tipo Sql, estare-
mos automaticamente nos conectando ao banco de dados, não necessitando,
portanto, repetir o mesmo bloco de comando nos trechos de instrução SQL,
sempre que for necessário.
Ainda temos a definição de dois métodos denominados, respectivamente,
query() e select(). No query(), podemos executar os comandos insert, update
e delete, e não se espera o retorno de qualquer informação. Já no método
select(), executaremos uma instrução select, aguardando o retorno solicitado.
Perceba que nesses dois métodos existe um parâmetro denominado $raw-
Query, no qual será inserido o código SQL que desejamos executar. Dessa

– 260 –
PHP: Acesso ao Banco de Dados

forma, a mesma classe pode ser utilizada na execução de instruções SQL para
qualquer tabela do banco de dados. Por exemplo:
//Arquivo sql.php
<?php
class Sql extends PDO{
private $conn;
public function __construct(){
$this->conn = new PDO(“mysql:host=localhost;dbn
ame=bd_pdo”,
“root”, “”);
}

private function setParams($statement, $parameters =


array()){
foreach ($parameters as $key => $value){
$ t h i s - > s e t P a r a m ( $ s t a t e m e n t , $ k e y ,
$value);
}
}

private function setParam($statement, $key, $value){
$statement->bindParam($key, $value);
}

//execução de comandos
public function query($rawQuery, $params = array()){
$stmt = $this->conn->prepare($rawQuery);
$this->setParams($stmt, $params);
$stmt->execute();
return $stmt;
}

public function select($rawQuery, $params =
array()):array {
$stmt = $this->query($rawQuery, $params);
return $stmt->fetchAll(PDO::FETCH_ASSOC);
}
}
?>

– 261 –
Programação Web

//Arquivo index.php

Sugestão: para manter a organização dos seus códigos dentro da pasta


DAO, crie uma pasta chamada classe e copie a classe Sql recém-criada.
Lembre-se de que é necessário alterar o path (caminho) declarado no
arquivo index.php:
require_once (“\classe\sql.php”);

A seguir, iremos demonstrar a comunicação entre classes, isto é, a Sql,


criada no exemplo anterior, e outras classes, que criaremos a seguir.
1. Consulta a registros
//Arquivo usuarios.php
<?php
//criação da classe modelo
class Usuario{
//definição das colunas existentes na tabela do
banco de dados
private $id_usu;
private $descr_usu;
private $senha_usu;
private $dtcad_usu;

public function getId_usu(){


return $this->id_usu;
}

public function setId_usu($id_usu){


$this->id_usu = $id_usu;
}

public function getDescr_usu(){


return $this->descr_usu;
}

public function setDescr_usu($descr_usu){


$this->descr_usu = $descr_usu;

– 262 –
PHP: Acesso ao Banco de Dados

public function getSenha_usu(){


return $this->senha_usu;
}

public function setSenha_usu($senha_usu){


$this->senha_usu = $senha_usu;
}

public function getDtcad_usu(){


return $this->dtcad_usu;
}

public function setDtcad_usu($dtcad_usu){


$this->dtcad_usu = $dtcad_usu;
}

//Carregando os dados do banco para o objeto
public function loadById($id){
$sql = new Sql(); //criação/instanciando
o objeto
$results = $sql->select(“SELECT * FROM
tb_usuario
WHERE id_usu = :ID”, array(“:ID”=>$id));
if (count($results) > 0){
$row = $results[0];

$this->setId_usu($row[‘id_usu’]);
$this->setDescr_usu($row[‘descr_
usu’]);
$this->setSenha_usu($row[‘senha_
usu’]);
$this->setDtcad_usu(new DateTime
($row[‘dtcad_usu’]));
}
}

//formatando a apresentação do objeto - método
__toString()
public function __toString(){
return
“Id: “.$this->getId_usu().

– 263 –
Programação Web

“<br> Descrição: “.$this->getDescr_


usu().
“<br> Senha: “.$this->getSenha_usu().
“<br> Data: “.$this->getDtcad_usu()-
>format(“d/m/Y H:i:s”);
}
}
?>

//Arquivo index.php – Consultando apenas UM registro


<?php
require_once (“\class\sql.php”);
require_once (“\class\usuarios.php”);

$usu = new Usuario();
$usu ->loadById(1);
echo $usu;
?>

2. List
Incluir na classe Usuario o método descrito a seguir.
//Arquivo usuarios.php
public function getList(){
$sql = new Sql();
$resultado = $sql -> select (“SELECT * FROM
tb_usuario
ORDER BY descr_usu;”);
return $resultado;
}

//Arquivo index.php – Consultando TODOS/VÁRIOS


registros
<?php
require_once (“\class\sql.php”);
require_once (“\class\usuarios.php”);

$lista = new Usuario();
$resultado = $lista->getList();

foreach($resultado as $linha) { //leitura do


Array, linha a linha
foreach($linha as $key => $value) { //
leitura coluna a coluna

– 264 –
PHP: Acesso ao Banco de Dados

echo “</strong>”.$key.”: </


strong>”.$value.”</br>”; }
//finaliza a apresentação de cada registro
com uma linha
echo “==================================
===============</br>”;
}
?>

3. Inserção de registros
Incluir na classe Usuario o método descrito a seguir:.//Arquivo
usuarios.php
public function Inserir($descr_usu, $senha_usu){
$sql = new Sql();

$resultado = $sql -> query(“INSERT INTO tb_usuario


(descr_usu, senha_usu)
VALUES (:DESC, :SENHA)”,

array(“:DESC”=>$descr_usu,”:SENHA”=>$senha_usu));
return ($resultado);
}

//Arquivo index.php
<?php
require_once (“\class\sql.php”);
require_once (“\class\usuarios.php”);

$usu = new Usuario();

$usu->Inserir(“Wilquison”, “cruzes”);
?>

4. Alteração de registros
Incluir na classe Usuario o método descrito a seguir.
//Arquivo usuarios.php
public function Alterar($id_usu, $descr_usu, $senha_
usu){
$sql = new Sql();

$resultado = $sql -> query(“UPDATE tb_usuario

– 265 –
Programação Web

SET descr_usu = :DESC,


senha_usu = :SENHA
WHERE id_usu = :ID”,
a r r a y ( “ : I D ” = > $ i d _ u s u ,
“:DESC”=>$descr_usu,
“:SENHA”=>$senha_usu));
return ($resultado);
}

//Arquivo index.php
<?php
require_once (“\class\sql.php”);
require_once (“\class\usuarios.php”);

$usu = new Usuario();
$usu->Alterar(2, “Wilquison Zanana”,
“cruzes2x”);
?>
5. Exclusão de registros
Incluir na classe Usuario o método descrito a seguir.
//Arquivo usuarios.php

//Arquivo index.php
<?php
require_once (“\class\sql.php”);
require_once (“\class\usuarios.php”);

$usu = new Usuario();

$usu->Excluir(1);
?>

Comparando com os códigos desenvolvidos anteriormente, é percep-


tível que a codificação resultante ficou mais simples e compacta, não sendo
necessário reescrever várias vezes o mesmo código e aplicando, de forma mais
eficiente, os conceitos de Orientação a Objetos.

– 266 –
PHP: Acesso ao Banco de Dados

Nota
É importante que o futuro desenvolvedor PHP também procure
conhecimentos sobre a manipulação da linguagem com o banco de
dados, pois a maioria das aplicações necessitam interagir com algum
tipo de banco de dados. Além disso, é relevante que o profissional
esteja apto a desenvolver aplicações mais abrangentes.

Síntese
Neste capítulo, estudamos a utilização de banco de dados em aplica-
ções web, por meio do qual podemos armazenar informações para posterior
consulta e manipulação. Também apresentamos os principais cuidados que
o desenvolvedor deve ter ao manipular um banco de dados para impedir a
invasão de pessoas mal-intencionadas (SQL Injection). Para evitar tais ações,
aprendemos a trabalhar com o PHP Data Objects (PDO), que são classes e
métodos que possuem a função de realizar a comunicação e manipulação das
informações de forma eficiente e com segurança extra.

Atividades
1. Para conectar uma aplicação PHP5 orientada a objetos aos prin-
cipais servidores de banco de dados, abstraindo o acesso de forma
que, para se mudar de servidor, seja necessário alterar apenas a
string de conexão, deve-se utilizar:
a) PHPDbc
b) ObjectODBC
c) Whoops
d) PDO
e) Nenhuma alternativa está correta.
2. Considere o seguinte fragmento de código PHP:

– 267 –
Programação Web

$conn = new PDO(“mysql:host=localhost;dbname=exe


mplo”, “root”, “senha”);
$stmt = $conn->prepare(“insert into tabExemplo
(id) values (:id)”);
$stmt->__I__(‘:id’, 1, PDO::PARAM_INT);
$stmt->execute();

A lacuna I deve ser preenchida corretamente com:


a) bindParam
b) setParameter
c) setValue
d) setAttribute
e) setInt
3. Uma aplicação web, escrita em PHP, recebe dados do usuário em
um campo de formulário. Os dados são armazenados na variável
$campo, que é inserida diretamente, sem filtros, na consulta: $con-
sulta = “select * from dados where nome =’$campos”.
Em seguida, a aplicação executa essa consulta no banco de dados.
Desconsiderando os mecanismos de segurança no banco de dados
ou configurações especiais no servidor PHP, essa aplicação é vulne-
rável a ataques do tipo:
a) Slash Overflow
b) SQL Injection
c) PHP Leak
d) PHP Bypass
e) Smurf
4. Qual a função do PHP Data Object (PDO)?
a) Possibilitar uma padronização sob a forma de uma classe desenvol-
vida exclusivamente para acessar e manipular banco de dados.

– 268 –
PHP: Acesso ao Banco de Dados

b) Executar pequenas rotinas e funcionalidades por meio de uma cole-


ção de trecho de código.
c) Oferecer um ambiente de desenvolvimento integrado com um
conjunto de ferramentas de apoio destinadas ao desenvolvimento
de programas orientados a objeto.
d) Possibilitar acesso exclusivo ao banco de dados MySQL.
e) Nenhuma alternativa está correta.

– 269 –
9
Estudo de caso
Ricardo Sonaglio Albano

Neste capítulo, por meio de um estudo de caso, será desen-


volvido um sistema colocando em prática os conhecimentos adqui-
ridos a respeito de desenvolvimento web, trabalhando com todas as
ferramentas já estudadas.
Para o pleno aproveitamento e desenvolvimento deste capí-
tulo, é importante ter conhecimento prévio sobre SQL.
Programação Web

9.1 Objetivo do projeto


Desenvolver um sistema que gerencia os usuários de um website. Por
meio desse controle, é possível administrar o perfil de cada usuário.
O controle é dividido em dois módulos:
22 usuário final, que terá permissão apenas para realizar seu cadastro
e efetuar login;
22 usuário administrador – denominado admin (default) – que terá
todas as permissões para controle e manutenção de usuários (inclu-
são, alteração, exclusão e consulta).

9.2 Identidade visual


A seguir são apresentadas as telas correspondentes ao sistema, as quais
serão desenvolvidas ao longo deste estudo de caso.

9.2.1 Telas principais


Apresentação do layout do formulário que apresenta a dupla função de
registro de novos usuários e de acesso ao site.
Figura 9.1 – Formulário de cadastro e acesso (login)

Fonte: Elaborada pelo autor.

– 272 –
Estudo de caso

Após a validação e liberado o acesso para o administrador, a página de


administração de usuários deve ser apresentada contendo a relação de usuá-
rios cadastrados, juntamente com acesso à manipulação desses registros.
Figura 9.2 – Página de administração de usuários

Fonte: Elaborada pelo autor.


Caso o administrador escolher o botão “Visualizar”, o layout reprodu-
zido a seguir deve ser apresentado, contendo apenas o registro selecionado.
Figura 9.3 – Página de administração – visualizar

Fonte: Elaborada pelo autor.


Ao escolher o botão “Editar”, o seguinte layout deve ser apresentado,
permitindo que o administrador realize as alterações necessárias no registro
do usuário.

– 273 –
Programação Web

Figura 9.4 – Página de administração – editar

Fonte: Elaborada pelo autor.


A seguir, é apresentado o exemplo da edição de um registro com a alte-
ração do campo “Nome”.
Figura 9.5 – Página de administração – Editar – alteração do nome

Fonte: Elaborada pelo autor.

– 274 –
Estudo de caso

Ao sair das páginas de manutenção de registro, o administrador retorna


à página de administração de usuários.
Figura 9.6 – Página de administração – consulta depois da alteração

Fonte: Elaborada pelo autor.


Caso o administrador opte por excluir um registro (botão “Excluir”),
uma mensagem deve ser apresentada solicitando a confirmação da exclusão
do registro selecionado.
Figura 9.7 – Página de administração – excluir

Fonte: Elaborada pelo autor.


Após a exclusão, a página de administração é atualizada.

– 275 –
Programação Web

Figura 9.8 – Página de administração – consulta depois da exclusão

Fonte: Elaborada pelo autor.

9.2.2 Mensagens de validação


A seguir é apresentada a relação de mensagens utilizadas nesse estudo
de caso.
No formulário de acesso ao site, na área de cadastro de novos usuários,
caso o usuário não preencha o campo “Nome”, a seguinte mensagem deve
ser apresentada.
Figura 9.9 – Mensagem de validação – cadastro – nome não informado

Fonte: Elaborada pelo autor.

– 276 –
Estudo de caso

No mesmo formulário, caso o usuário não preencha o campo “Email”, a


seguinte mensagem deve ser apresentada.
Figura 9.10 – Mensagem de validação – cadastro – e-mail não informado

Fonte: Elaborada pelo autor.


Ainda no mesmo formulário, caso o usuário não preencha o campo
“Senha”, a seguinte mensagem deve ser apresentada.
Figura 9.11 – Mensagem de validação – cadastro – senha não informada

Fonte: Elaborada pelo autor.


No formulário de acesso ao site, na área de login, caso o usuário não
preencha o campo destinado ao e-mail de login, a seguinte mensagem de
validação deve ser apresentada.

– 277 –
Programação Web

Figura 9.12 – Mensagem de validação – login – e-mail não informado

Fonte: Elaborada pelo autor.


Na área de login do formulário, caso o usuário não preencha o campo
destinado a senha de login, a seguinte mensagem deve ser apresentada.
Figura 9.13 – Mensagem de validação – login – senha não informada

Fonte: Elaborada pelo autor.


Vale salientar que o e-mail deve estar devidamente registrado na base de
dados, caso contrário a mensagem de e-mail inválido é apresentada.
Figura 9.14 – Mensagem de validação – login – e-mail inválido

Fonte: Elaborada pelo autor.

– 278 –
Estudo de caso

O mesmo ocorre caso a senha informada seja incorreta.


Figura 9.15 – Mensagem de validação – login – senha inválida

Fonte: Elaborada pelo autor.

9.3 Banco de dados


Devem ser executados os procedimentos descritos a seguir.
1. No XAMPP, habilitar o MySQL, como explicado em capítulos
anteriores.
2. Acessar o phpMyAdmin para a criação da base de dados e da tabela
ou qualquer outra ferramenta de administração de banco de dados
de sua preferência (Workbench, SQL Developer, Toad for SQL
Server, etc.).
3. Criar a base de dados denominada capitulo9 e a tabela de dados
usuario.
Figura 9.16 - Estrutura da tabela usuario da base de dados capitulo9

Fonte: Elaborada pelo autor.

– 279 –
Programação Web

Script:
CREATE DATABASE capitulo9;
USE capitulo9;
CREATE TABLE usuario (
usuId INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
usuNome VARCHAR(100) NOT NULL,
usuEmail VARCHAR(100) NOT NULL,
usuSenha VARCHAR(100) NOT NULL,
usuTipo CHAR(05) NOT NULL
);

4. Após a criação da tabela, adicionar o usuário admin diretamente


na tabela do banco de dados, pois ele terá acesso privilegiado em
relação aos demais. Todos os usuários cadastrados pelo site são
considerados usuários sem privilégios.
INSERT INTO usuario (usuNome, usuEmail, usuSenha,
usuTipo)
VALUES (“admin”, “admin@exemplo.com.br”,
“123”, “admin”);

9.4 Mãos à obra – codificação


Devem ser executados os procedimentos descritos a seguir.
1. Abrir a ferramenta Eclipse ou qualquer outro IDE da sua preferên-
cia. Lembrar-se de adicionar ao projeto a pasta do Bootstrap.
2. Criar um novo projeto PHP. No estudo de caso, o projeto é deno-
minado Sistema. Ao final do desenvolvimento desse projeto, a
estrutura de arquivos será a seguinte:

– 280 –
Estudo de caso

Figura 9.17 – Estrutura do projeto Sistema

Fonte: Elaborada pelo autor.


Observe que ao lado da estrutura de pastas e arquivos foi inserida uma
breve explicação sobre cada item.
3. Baseando-se nos princípios de orientação a objetos, são desenvolvi-
dos os códigos na seguinte ordem:
22 classe modelo do usuário: usuario.class.php;
22 classe de conexão com o banco de dados: sql.php;
22 classe DAO: usuarioDAO.class.php;
22 arquivo de validação do usuário: validaUsuario.php;

– 281 –
Programação Web

22 página inicial do sistema: index.php;


22 página de administração dos usuários: admin.php;
22 página de consulta as informações: consultar.php;
22 página de alteração das informações: editar.php;
22 página de exclusão de informações: deletar.php;
22 página de login realizado com sucesso pelo usuário: logado.
php;
22 página de encerramento do acesso ao site: logout.php.
Botões-padrão
22 Sair: logout do sistema.
22 Home: voltar para a página inicial, mantendo-se logado.
22 Retornar: retornar para a página inicial de administração.
4. Desenvolver os códigos descritos a seguir.
Código do arquivo usuario.class.php
<?php
class Usuario{//definição das colunas existentes na
tabela do BD
private $usuId;
private $usuNome;
private $usuEmail;
private $usuSenha;
private $usuTipo;

public function getusuId(){
return $this->usuId;
}

public function setusuId($usuId){


$this->usuId = $usuId;
}

public function getusuNome(){


return $this->usuNome;
}

– 282 –
Estudo de caso

public function setusuNome($usuNome){


$this->usuNome = $usuNome;
}

public function getusuEmail(){
return $this->usuEmail;
}

public function setusuEmail($usuEmail){


$this->usuEmail = $usuEmail;
}

public function getusuSenha(){


return $this->usuSenha;
}

public function setusuSenha($usuSenha){


$this->usuSenha = $usuSenha;
}

public function getusuTipo(){


return $this->usuTipo;
}

public function setusuTipo($usuTipo){


$this->usuTipo = $usuTipo;
}

//formatando a apresentação do objeto - método
__toString()
public function __toString(){
return “Id: “.$this->getusuId().
“<br> Nome: “.$this-
>getusuNome().
“<br> Email: “.$this-
>getusuEmail().
“<br> Senha: “.$this-
>getusuSenha().
“<br> Tipo: “.$this-
>getusuTipo();
}
}
?>

– 283 –
Programação Web

Código do arquivo sql.php


<?php
class Sql extends PDO{
private $conn;

public function __construct(){
$this->conn =
new PDO(“mysql:host=localhost;dbname=capitulo9”,
“root”, “”);
}

private function setParams($statement,


$parameters = array()){
foreach ($parameters as $key =>
$value){
$ t h i s -
>setParam($statement, $key, $value);
}
}

private function setParam($statement,
$key, $value){
$ s t a t e m e n t - > b i n d P a r a m ( $ k e y ,
$value);
}

public function query($rawQuery, $params
= array()){
$stmt = $this->conn-
>prepare($rawQuery);
$this->setParams($stmt, $params);
$stmt->execute();
return $stmt;
}

public function select($rawQuery, $params
= array()){
$stmt = $this->query($rawQuery,
$params);
return $stmt->fetchAll(PDO::FETCH_
ASSOC);
}
}
?>

– 284 –
Estudo de caso

Código do arquivo usuarioDAO.class.php


<?php
require_once (“\dao\sql.php”);

class UsuarioDAO extends Sql {

public function listaUsuario(){


$sql = new Sql();
$resultado = $sql -> select (“SELECT *
FROM usuario
ORDER BY usuNome;”);
return $resultado;
}

//inclusão do usuario
public function insereUsuario($usuNome,$usuEma
il,$usuSenha,$usuTipo){
$sql = new Sql();

$resultado = $sql -> query(“INSERT INTO


usuario (usuNome, usuEmail, usuSenha, usuTipo)
VALUES (:NOME, :EMAIL,
:SENHA, :TIPO)”,
a r r a y ( “ : N O M E ” = > $ u s u N o m e ,
“:EMAIL”=>$usuEmail,
“:SENHA”=>$usuSenha, “:TIPO”=>$usuTipo));
return ($resultado);
}

public function excluiUsuario($id){


$sql = new Sql();

$resultado = $sql -> query(“DELETE FROM


usuario
WHERE usuId = :ID”,
array(“:ID”=>$id));
return ($resultado);
}

public function alteraUsuario($usuId, $usuNome,


$usuEmail,
$usuSenha, $usuTipo){
$sql = new Sql();

– 285 –
Programação Web

$resultado = $sql -> query(“UPDATE


usuário SET
usuNome = :NOME,
usuEmail =
:EMAIL,
usuSenha =
:SENHA,
usuTipo =
:TIPO
WHERE usuId
= :ID”,
a r r a y ( “ : N O M E ” = > $ u s u N o m e ,
“:EMAIL”=>$usuEmail,
“:SENHA”=>$usuSenha, “:TIPO”=>$usuTipo,
“:ID”=>$usuId));
return ($resultado);
}

public function consultaUsuario($id){


$sql = new Sql();
$results = $sql->select(“SELECT * FROM
usuario
WHERE usuId = :ID”, array(“:ID”=>$id));
return $results;
}

public function buscaEmail($email){


$sql = new Sql();
$results = $sql->select(“SELECT * FROM
usuario
WHERE usuEmail = :EMAIL”, array(“:EMAIL”=>$email));
return $results;
}
}
?>

Código do arquivo validaUsuario.php


O código descrito a seguir é responsável por verificar em cada
página se o usuário realizou o processo de login na página principal,
mantendo assim a segurança de acesso ao sistema.
Esse código será inserido em todas as páginas do sistema pela
função require_once.

– 286 –
Estudo de caso

<?php
if (isset($_COOKIE[‘usuEmail’])) {
$usuEmail = $_COOKIE[‘usuEmail’];
}
if (isset($_COOKIE[‘usuSenha’])) {
$usuSenha = $_COOKIE[‘usuSenha’];
}

if (isset($_COOKIE[‘usuTipo’])){
$usuTipo = $_COOKIE[‘usuTipo’];
}

if ( !(empty($usuEmail)) and !(empty($usuSenha))
) {
$usuarioDAO = new UsuarioDAO();
$resultado = $usuarioDAO->
buscaEmail($usuEmail);
if ( count($resultado) == 0) {
?>
<script type=”text/
javascript”>
alert(“Email não
cadastrado”);
</script>
<?php
header(‘Location: index.php’);
} else {
foreach($resultado as $linha) {
$usuSenhaBD =
$linha[‘usuSenha’];
$usuTipoBD =
$linha[‘usuTipo’];
}
/*verifica se a senha é igual a
senha cadastrada.
Vale salientar que nesse exemplo
não foi utilizado
nenhum método de criptografia. */

if ($usuSenha != $usuSenhaBD) {
?>
<script type=”text/
javascript”>

– 287 –
Programação Web

alert(“Senha
não confere”);
</script>
<?php
header(‘Location: index.
php’);
}
}
} else {
?>
<script type=”text/javascript”>
alert(“Você não realizou o
login”);
</script>
<?php
header(‘Location: index.php’);
}
?>

Código do arquivo index.php


Perceba que no código seguinte foram criadas duas funções
JavaScript com o objetivo de verificar se as informações foram
preenchidas ou não. Dessa forma, não é necessário acessar o
servidor para realizar a validação.
Outro aspecto importante a observar é que, após a validação de
e-mail e senha do usuário, os cookies são atualizados para que se
possa fazer o controle de usuário. Sendo assim, o usuário só obtém
acesso às demais páginas após a realização do login.
<!DOCTYPE html>
<html lang=”pt-br”>
<head>
<meta charset=”utf-8”>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width,
initial-scale=1”>
<!-- The above 3 meta tags *must* come first in the
head; any other head content must come *after* these
tags -->
<title>Formulário</title>

– 288 –
Estudo de caso

<!-- Bootstrap -->


<link href=”bootstrap/css/bootstrap.min.css”
rel=”stylesheet”>

<!-- HTML5 shim and Respond.js for IE8 support of


HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn’t work if you view the
page via file:// -->
<!--[if lt IE 9]>
<script src=”https://oss.maxcdn.com/
html5shiv/3.7.3/html5shiv.min.js”></script>
<script src=”https://oss.maxcdn.com/respond/1.4.2/
respond.min.js”></script>
<![endif]-->

<script type=”text/javascript”>

function valida(){
var nome = document.
getElementById(‘nome’).value;
var email = document.
getElementById(‘email’).value;
var senha = document.
getElementById(‘senha’).value;

if(nome == “”) {
alert(“Preencha o nome”);
cadastro.nome.focus();
return false;
} else if (email == “”) {
alert(“Preencha o email”);
cadastro.email.focus();
return false;
} else if (senha == “”) {
alert(“Preencha a senha”);
cadastro.senha.focus();
return false;
}
}

function validaLogin(){
var emailLogin = login.emailLogin.
value;

– 289 –
Programação Web

var senhaLogin = login.senhaLogin.


value;

if(emailLogin == “”) {
alert(“Preencha o email de
login”);
login.emailLogin.focus();
return false;
} else if (senhaLogin == “”) {
alert(“Preencha a senha de
login”);
login.senhaLogin.focus();
return false;
}
}
</script>

<?php
require_once (“\class\usuario.class.php”);
require_once (“\dao\usuarioDAO.class.php”);

if ( isset($_POST[‘salvar’]) and ($_POST[‘salvar’]


== ‘Salvar’)) {

if( !empty($_POST[‘nome’]) &&


!empty($_POST[‘email’]) && !empty($_POST[‘senha’]) )
{
//Tipo de usuário: 0 - admin, 1 - comum
$usuario = new Usuario();
$usuario-> setusuNome($_POST[‘nome’]);
$usuario-> setusuEmail($_POST[‘email’]);
$usuario-> setusuSenha($_POST[‘senha’]);
$usuario-> setusuTipo(“comum”);
$usuarioDAO = new UsuarioDAO();
$resultado = $usuarioDAO->
buscaEmail($usuario->getusuEmail());
if ( count($resultado) > 0) {
?>
<script type=”text/
javascript”>
alert(“Email já
cadastrado”);
c a d a s t r o . e m a i l .
focus();

– 290 –
Estudo de caso

</script>
<?php
} else {
$results = $usuarioDAO->
insereUsuario(
$usuario-> getusuNome(),
$usuario-> getusuEmail(),
$usuario-> getusuSenha(),
$usuario-> getusuTipo());
}
}
}

if ( isset($_POST[‘logar’]) and ($_POST[‘logar’] ==


‘Acessar’)) {

if( !empty($_POST[‘emailLogin’]) && !empty($_


POST[‘senhaLogin’]) ) {

// recebe os dados do formulário


$usuEmail = $_POST[‘emailLogin’];
$usuSenha = $_POST[‘senhaLogin’];

// instancia um usuário
$usuario = new Usuario();

// instancia o usuarioDAO p/ a conexão e
comandos do BD
$usuarioDAO = new UsuarioDAO();

// Pesquisa se o email informado existe.


$resultado = $usuarioDAO->
buscaEmail($usuEmail);

/* Testa se o email informado existe. Se
for igual 0, significa
que não há email cadastrado.*/
if ( count($resultado) == 0) {
?>
<script type=”text/javascript”>
alert(“Email não
cadastrado”);
login.email.focus();
</script>

– 291 –
Programação Web

<?php
} else { // armazena o resultado do select
no objeto usuario
foreach($resultado as $linha) {
$ u s u a r i o - >
setusuNome($linha[‘usuNome’]);
$usuario-> setusuEmail($li
nha[‘usuEmail’]);
$usuario-> setusuSenha($li
nha[‘usuSenha’]);
$ u s u a r i o - >
setusuTipo($linha[‘usuTipo’]);
}

// verifica se a senha é igual a


senha cadastrada.
if ($usuario -> getusuSenha() !=
$usuSenha) {
?>
<script type=”text/
javascript”>
alert(“Senha
não confere”);
login.email.
focus();
</script>
<?php
} else { // redireciona usuário
cfme perfil cadastrado.
setcookie(‘usuEmail’,$usuE
mail);
setcookie(‘usuSenha’,$usuS
enha);

if ($usuario-
>getusuTipo()== “admin”) {

setcookie(‘usuTipo’,’admin’);

header(‘Location: admin.php’);
} else {

setcookie(‘usuTipo’,’comum’);

– 292 –
Estudo de caso

h e a d e r ( ‘ L o c a t i o n :
logado.php’);
}
}
}
}
}
?>
</head>
<body>
<div class=”container”>
<div class=”page-header”>
<h1>Gerenciamento de Usuários</
h1>
</div>
<div class=”row”>
<div class=”col-sm-8”>
<!-- Configuração p/tablets.
Ocupará 8 colunas. -->
<h3>Registre-se</h3>
<h5>Não é usuário?</h5>
<form name=”cadastro”
method=”post”>
<div class=”form-
group”>
<label>Nome:
</label> <input type=”text”

class=”form-control”

name=”nome” id=”nome”>
<!-- classe
de formatação Bootstrap -->
</div>

<div class=”form-
group”>
< l a b e l > E -
mail: </label> <input
type=”email” class=”form-control”

name=”email” id=”email”>
</div>

– 293 –
Programação Web

<div class=”form-
group”>
<label>Senha:
</label> <input
type=”password”
class=”form-control”

name=”senha” id=”senha”>
</div>

< d i v
class=”checkbox”>
< l a b e l >
<input type=”checkbox”>
Aceito os termos do serviço. </label>
</div>

< b u t t o n
type=”submit” class=”btn btn-primary”
name=”salvar”
value=”Salvar”
onclick=”valida()”>Salvar</button>
</form>
</div>

<div class=”col-sm-4”>
<!-- Ocupará 4 col.
Totalizando 12 col (8+4) -->
<h3>Login</h3>
<h5>(Apenas usuários
cadastrados)</h5>
<form id=”login”
name=”login” method=”post”>
<div class=”form-
group”>
< i n p u t
type=”email” name=”emailLogin”

class=”form-control”

placeholder=”Digite seu e-mail.”>
</div>

– 294 –
Estudo de caso

<div class=”form-
group”>
< i n p u t
type=”password” name=”senhaLogin”

class=”form-control”

placeholder=”Digite sua senha.”>
</div>

<input type=”submit”
class=”btn btn-primary”
name=”logar”
value=”Acessar”

onclick=”validaLogin()”>
</form>
</div>
</div>
</div>

<!-- jQuery (necessary for Bootstrap’s JavaScript


plugins) -->
<script
src=
“https://ajax.googleapis.com/ajax/libs/
jquery/1.12.4/jquery.min.js”>
</script>
<!-- Include all compiled plugins (below), or
include individual
files as needed -->
<script src=”bootstrap/js/bootstrap.min.js”></
script>
</body>
</html>

Código do arquivo admin.php


Essa página é considerada a principal do sistema, pois por meio
dela o administrador realiza a manutenção dos usuários. Vale
salientar que a página foi desenvolvida utilizando PHP juntamente
com HTML e, dessa forma, é importante observar atentamente a
inserção dos códigos PHP.

– 295 –
Programação Web

<?php
require_once (“\class\usuario.class.php”);
require_once (“\dao\usuarioDAO.class.php”);
require_once (“validaUsuario.php”);
$usuarioDAO = new UsuarioDAO();
$usuarios = $usuarioDAO-> listaUsuario();
?>

<!DOCTYPE html>
<html lang=”pt-br”>
<head>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width,
initial-scale=1”>
<!-- The above 3 meta tags *must* come first in the
head; any other head content must come *after* these
tags -->
<title>Formulário</title>

<!-- Bootstrap -->


<link href=”bootstrap/css/bootstrap.min.css”
rel=”stylesheet”>

<!-- HTML5 shim and Respond.js for IE8 support of


HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn’t work if you view the
page via file:// -->
<!--[if lt IE 9]>
<script src=”https://oss.maxcdn.com/
html5shiv/3.7.3/html5shiv.min.js”></script>
<script src=”https://oss.maxcdn.com/respond/1.4.2/
respond.min.js”></script>
<![endif]-->
<script>

function excluir(id) {
var apagar = confirm(‘Você deseja excluir
este usuário?’);
if (apagar){
location.href = ‘deletar.php?id=’+ id;
}
}
</script>
</head>

– 296 –
Estudo de caso

<body>
<div class=”container”>

<header>
<div class=”row”>
<div class=”col-sm-6”>
<h2>Administração de
Usuários</h2>
</div>
<div class=”col-sm-6 text-right
h2”>
<a class=”btn btn-default”
href=”index.php”>
<i class=”fa fa-refresh”></i>Home</a>
<a class=”btn btn-default”
href=”logout.php”>
<i class=”fa fa-refresh”></i>Sair</a>
</div>
</div>
</header>
<table class=”table table-hover”>
<thead>
<tr>
<th>ID</th>
<th width=”40%”>Nome</th>
<th>email</th>
<th>senha</th>
<th>tipo</th>
<th>Opções</th>
</tr>
</thead>
<tbody>
<?php if ($usuarios) {
foreach ($usuarios as
$usuario) {
?><tr>
<td id=”usuId”>
<?php echo $usuario[‘usuId’]; ?></td>
<td><?php echo
$usuario[‘usuNome’]; ?></td>
<td><?php echo
$usuario[‘usuEmail’]; ?></td>
<td><?php echo
$usuario[‘usuSenha’]; ?></td>

– 297 –
Programação Web

<td><?php echo
$usuario[‘usuTipo’]; ?></td>
<td class=”actions
text-right”>
<a href=”consultar.
php?id=
<?php echo $usuario[‘usuId’]; ?>”
class=”btn btn-sm btn-success”>
<i class=”fa fa-eye”></i> Visualizar</a>

<a href=”editar.
php?id=
<?php echo $usuario[‘usuId’]; ?>”
class=”btn btn-sm btn-warning”>
<i class=”fa fa-pencil”></i> Editar</a>

<a href=”#”
id=”Excluir”
class=”btn btn-sm btn-danger”
data-toggle=”modal”
data-target=”#delete-modal”
data-customer=
“<?php echo $usuario[‘usuId’]; ?>”
onclick=”excluir(
<?php echo $usuario[‘usuId’];?>)”>
<i class=”fa
fa-trash”></i> Excluir
</a>
</td>
<?php }

} else {
?>
<tr>
< t d
colspan=”6”>
Nenhum registro encontrado.</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>

– 298 –
Estudo de caso

<!-- jQuery (necessary for Bootstrap’s JavaScript


plugins) -->
<script
src=
“https://ajax.googleapis.com/ajax/libs/
jquery/1.12.4/jquery.min.js”>
</script>
<!-- Include all compiled plugins (below), or
include individual
files as needed -->
<script src=”bootstrap/js/bootstrap.min.js”></
script>
</body>
</html>

Código do arquivo consultar.php


<?php
require_once (“\class\usuario.class.php”);
require_once (“\dao\usuarioDAO.class.php”);
require_once (“validaUsuario.php”);
?>
<!DOCTYPE html>
<html lang=”pt-br”>
<head>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width,
initial-scale=1”>
<!-- The above 3 meta tags *must* come first in the
head; any other head content must come *after* these
tags -->
<title>Formulário</title>

<!-- Bootstrap -->


<link href=”bootstrap/css/bootstrap.min.css”
rel=”stylesheet”>

<!-- HTML5 shim and Respond.js for IE8 support of


HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn’t work if you view the
page via file:// -->
<!--[if lt IE 9]>
<script src=”https://oss.maxcdn.com/
html5shiv/3.7.3/html5shiv.min.js”></script>

– 299 –
Programação Web

<script src=”https://oss.maxcdn.com/respond/1.4.2/
respond.min.js”></script>
<![endif]-->

<?php

if ( isset($_GET[‘id’]) and ($_GET[‘id’] != “”)) {

// recebe os dados do formulário


$id = $_GET[‘id’];

// instancia um usuário
$usuario = new Usuario();

// instancia o usuarioDAO para fazer
conexão e comandos do BD
$usuarioDAO = new UsuarioDAO();

// Pesquisa se o email informado existe.


$resultado = $usuarioDAO->
consultaUsuario($id);

if ( count($resultado) == 0) {
?>
<script type=”text/javascript”>
alert(“Email não
cadastrado”);
login.email.focus();
</script>
<?php
} else { // armazena o resultado do select
no objeto usuario foreach($resultado
as $linha) {
$ u s u a r i o - >
setusuNome($linha[‘usuNome’]);
$usuario-> setusuEmail($li
nha[‘usuEmail’]);
$usuario-> setusuSenha($li
nha[‘usuSenha’]);
$ u s u a r i o - >
setusuTipo($linha[‘usuTipo’]);
}
}
}

– 300 –
Estudo de caso

if ( isset($_POST[‘voltar’]) and ($_POST[‘voltar’]


== ‘Voltar’)) {
header(‘Location: admin.php’);
}
?>

</head>
<body>
<div class=”container”>
<header>
<div class=”row”>
<div class=”col-sm-6”>
<h2>Dados do
Usuário</h2>
</div>
<div class=”col-sm-6 text-
right h2”>
<a class=”btn btn-default”
href=”index.php”>
<i class=”fa fa-refresh”></i>Home</a>
<a class=”btn btn-default”
href=”logout.php”>
<i class=”fa fa-refresh”></i>Sair</a>
</div>
</div>
</header>

<div class=”row”>
<div class=”col-sm-8”>
<!-- Configuração p/tablets.
Ocupará 8 colunas. -->
<form name=”consulta”
method=”post”>
<div class=”form-group”>
<label>Nome: </
label> <input type=”text”
class=”form-
control”
n a m e = ” n o m e ”
id=”nome” value=
<?php echo $usuario->getusuNome(); ?>
readonly>

– 301 –
Programação Web

<!-- classe
de formatação Bootstrap -->
</div>

<div class=”form-group”>
<label>E-mail: </
label> <input type=”email”
class=”form-
control” name=”email”
id=”email” value=
<?php echo $usuario->getusuEmail(); ?>
readonly>
</div>
<div class=”form-group”>
<label>Senha: </
label> <input type=”password”
class=”form-
control” name=”senha”
id=”senha” value=
<?php echo $usuario->getusuSenha(); ?> readonly>
</div>

<div class=”form-group”>
<label>Tipo: </
label> <input type=”text”
class=”form-control” name=”tipo”
id=”tipo” value=
<?php echo $usuario->getusuTipo(); ?> readonly>
</div>

<button type=”submit”
class=”btn btn-primary”
name=”voltar” value=”Voltar”>Retornar</button>
</form>
</div>
</div>
</div>

<!-- jQuery (necessary for Bootstrap’s JavaScript


plugins) -->
<script
src=
“https://ajax.googleapis.com/ajax/libs/
jquery/1.12.4/jquery.min.js”>

– 302 –
Estudo de caso

</script>
<!-- Include all compiled plugins (below), or include
individual files as needed -->
<script src=”bootstrap/js/bootstrap.min.js”></
script>
</body>
</html>

Código do arquivo editar.php


<?php
require_once (“\class\usuario.class.php”);
require_once (“\dao\usuarioDAO.class.php”);
require_once (“validaUsuario.php”);
?>
<!DOCTYPE html>
<html lang=”pt-br”>
<head>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width,
initial-scale=1”>
<!-- The above 3 meta tags *must* come first in the
head; any other head content must come *after* these
tags -->
<title>Formulário</title>

<!-- Bootstrap -->


<link href=”bootstrap/css/bootstrap.min.css”
rel=”stylesheet”>

<!-- HTML5 shim and Respond.js for IE8 support of


HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn’t work if you view the
page via file:// -->
<!--[if lt IE 9]>
<script src=”https://oss.maxcdn.com/
html5shiv/3.7.3/html5shiv.min.js”></script>
<script src=”https://oss.maxcdn.com/respond/1.4.2/
respond.min.js”></script>
<![endif]-->

<script type=”text/javascript”>
document.editar.reset();
editar.nome.reser();

– 303 –
Programação Web


function valida(){
var nome = editar.nome.value;
var email = editar.email.value;
var senha = editar.senha.value;
var tipo = editar.tipo.value;

if(nome == “”) {
alert(“Preencha o nome”);
editar.nome.focus();
return false;
} else if (email == “”) {
alert(“Preencha o email”);
editar.email.focus();
return false;
} else if (senha == “”) {
alert(“Preencha a senha”);
editar.senha.focus();
return false;
}
if (tipo != “admin” && tipo !=
“comum” {
a l e r t ( “ T i p o
inválido”);
e d i t a r . t i p o .
focus();
return false;
}
}
</script>

<?php
if ( isset($_GET[‘id’]) and ($_GET[‘id’] != “”)) {

// recebe os dados do formulário


$id = $_GET[‘id’];

// instancia um usuário
$usuario = new Usuario();

// instancia o usuarioDAO p/ fazer conexão e


comandos relac. ao BD
$usuarioDAO = new UsuarioDAO();

– 304 –
Estudo de caso

// Pesquisa se o email informado existe.


$resultado = $usuarioDAO-> consultaUsuario($id);

if ( count($resultado) == 0) {
?>
<script type=”text/javascript”>
alert(“Email não
cadastrado”);
login.email.focus();
</script>
<?php
} else { // armazena o resultado do select no
objeto usuario criado
foreach($resultado as $linha) {
$ u s u a r i o - >
setusuId($linha[‘usuId’]);
$ u s u a r i o - >
setusuNome($linha[‘usuNome’]);
$usuario-> setusuEmail($linha[‘us
uEmail’]);
$usuario-> setusuSenha($linha[‘us
uSenha’]);
$ u s u a r i o - >
setusuTipo($linha[‘usuTipo’]);
}
}
}

if ( isset($_POST[‘voltar’]) and ($_POST[‘voltar’]


== ‘Retornar’)) {
header(‘Location: admin.php’);
}

if ( isset($_POST[‘salvar’]) and ($_POST[‘salvar’]


== ‘Salvar’)) {
if( !empty($_POST[‘nome’]) && !empty($_
POST[‘email’])
&& !empty($_POST[‘senha’]) ) {
$usuario-> setusuId($_POST[‘id’]);
$usuario-> setusuNome($_POST[‘nome’]);
$usuario-> setusuEmail($_POST[‘email’]);
$usuario-> setusuSenha($_POST[‘senha’]);
$usuario-> setusuTipo($_POST[‘tipo’]);

– 305 –
Programação Web

$usuarioDAO = new UsuarioDAO();



$resultado = $usuarioDAO->
alteraUsuario($usuario->getusuId(),
$usuario->getusuNome(),
$usuario->getusuEmail(),
$usuario->getusuSenha(),
$usuario->getusuTipo());
}
}

?>
</head>
<body>
<div class=”container”>
<header>
<div class=”row”>
<div class=”col-sm-6”>
<h2>Dados do Usuário</h2>
</div>
<div class=”col-sm-6 text-right
h2”>
<a class=”btn btn-default”
href=”index.php”>
<i class=”fa fa-refresh”></i>Home</a>
<a class=”btn btn-default”
href=”logout.php”>
<i class=”fa fa-refresh”></i>Sair</a>
</div>
</div>
</header>
<div class=”row”>
<div class=”col-sm-8”>
<form id=”editar”
name=”editar” method=”post”>
<div class=”form-
group”>
<input type=”hidden”
name=”id” id=”id”
value=<?php echo $usuario->getusuId();?> >
</div>

<div class=”form-
group”>

– 306 –
Estudo de caso

<label>Nome: </
label>
< i n p u t
type=”text” class=”form-control”
name=”nome”
id=”nome” value=
<?php echo $usuario->getusuNome();?>>
</div>
<div class=”form-
group”>
<label>E-mail: </
label> <input type=”email”
class=”form-
control” name=”email”
id=”email” value=
<?php echo $usuario->getusuEmail();?>>
</div>

<div class=”form-
group”>
<label>Senha: </
label> <input

type=”password” class=”form-control”
name=”senha”
id=”senha”
value=
<?php echo $usuario->getusuSenha();?>>
</div>

<div class=”form-
group”>
<label>Tipo: </
label> <input type=”text”
class=”form-
control” name=”tipo”
id=”tipo” value=
<?php echo $usuario->getusuTipo(); ?>>
</div>

< b u t t o n
type=”submit” class=”btn btn-success”
name=”salvar” value=”Salvar”
onclick=”valida()”>Salvar</button>

– 307 –
Programação Web

<input type=”submit”
class=”btn btn-info”
name=”voltar” value=”Retornar”>
</form>
</div>
</div>
</div>

<!-- jQuery (necessary for Bootstrap’s JavaScript


plugins) -->
<script
src=
“https://ajax.googleapis.com/ajax/libs/
jquery/1.12.4/jquery.min.js”>
</script>
<!-- Include all compiled plugins (below), or include
individual files as needed -->
<script src=”bootstrap/js/bootstrap.min.js”></
script>
</body>
</html>

Código do arquivo deletar.php


<?php
require_once (“\class\usuario.class.php”);
require_once (“\dao\usuarioDAO.class.php”);
require_once (“validaUsuario.php”);

if ( isset($_GET[‘id’]) and ($_GET[‘id’] !=
“”)) {

// recebe os dados do formulário
$id = $_GET[‘id’];

//instancia o usuarioDAO p/fazer conexão
e comandos relac ao BD
$usuarioDAO = new UsuarioDAO();
// Pesquisa se o email informado existe.
$resultado = $usuarioDAO->
excluiUsuario($id);
header(‘Location: admin.php’);
}

– 308 –
Estudo de caso

?>

Código do arquivo logado.php


<?php
require_once (“\class\usuario.class.php”);
require_once (“\dao\usuarioDAO.class.php”);
require_once (“validaUsuario.php”);
?>
<!DOCTYPE html>
<html lang=”pt-br”>
<head>
<meta charset=”utf-8”>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width,
initial-scale=1”>
<!-- The above 3 meta tags *must* come first in the
head; any other head content must come *after* these
tags -->
<title>Formulário</title>

<!-- Bootstrap -->


<link href=”bootstrap/css/bootstrap.min.css”
rel=”stylesheet”>

<!-- HTML5 shim and Respond.js for IE8 support of


HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn’t work if you view the
page via file:// -->
<!--[if lt IE 9]>
<script src=”https://oss.maxcdn.com/
html5shiv/3.7.3/html5shiv.min.js”></script>
<script src=”https://oss.maxcdn.com/respond/1.4.2/
respond.min.js”></script>
<![endif]-->

</head>
<body>
<div class=”container”>
<header>
<div class=”row”>
<div class=”col-sm-6”>
<h2>Usuário logado
no sistema</h2>

– 309 –
Programação Web

</div>
<div class=”col-sm-6 text-
right h2”>
<a class=”btn btn-default”
href=”index.php”>
<i class=”fa fa-refresh”></i>Home</a>
<a class=”btn btn-default”
href=”logout.php”>
<i class=”fa fa-refresh”></i>Sair</a>
</div>
</div>
</header>
</div>
<!-- jQuery (necessary for Bootstrap’s JavaScript
plugins) -->
<script
src=
“https://ajax.googleapis.com/ajax/libs/
jquery/1.12.4/jquery.min.js”>
</script>
<!-- Include all compiled plugins (below), or include
individual files as needed -->
<script src=”bootstrap/js/bootstrap.min.js”></
script>
</body>
</html>

Código do arquivo logout.php


<?php
setcookie(‘usuEmail’);
setcookie(‘usuSenha’);
setcookie(‘usuTipo’);
header(‘Location: index.php’);
?>

– 310 –
Estudo de caso

Importante
É importante ressaltar que o sistema desenvolvido no presente docu-
mento poderia receber diversas melhorias. Entretanto, ele foi desen-
volvido com o intuito englobar e demonstrar na prática apenas os
conhecimentos discutidos no material.
Algumas melhorias que podem ser ressaltadas são política de senha,
melhor aproveitamento de código utilizando os conceitos de orienta-
ção a objeto, entre outros.
Finalmente, sugere-se que, como objeto de estudo, procure-se imple-
mentar algumas das melhorias citadas anteriormente.

– 311 –
10
Estudo de Caso 2
Evandro Zatti

Este capítulo tem como objetivo consolidar os conceitos de


programação web com um estudo de caso que implementa uma
solução em dois dos ambientes mais utilizados comercialmente. A
proposta é trazer uma situação comumente utilizada em negócios,
tanto em um ambiente de software livre quanto em um ambiente de
software licenciado pago, para estabelecer uma análise paralela entre
as duas realidades. Para o ambiente livre, é utilizada a linguagem
PHP, que é executada em servidor Apache e acessa banco de dados
MySQL, isto é, a tão conhecida solução AMP (Apache MySQL
Programação Web

PHP). Na implementação licenciada, é utilizada a linguagem C#, da Micro-


soft, executada com servidor IIS (Internet Information Services) acessando
banco de dados Microsoft SQL Server.

10.1 Solução adotada


Como estudo de caso para implementação dos dois ambientes, vamos
utilizar uma situação-problema muito comum no desenvolvimento web: o
comércio de produtos via internet, isto é, o e-commerce, e o contexto será uma
loja de departamentos.
Evidentemente não se trata de uma solução completa de e-commerce,
pois cada ramo de comércio tem suas particularidades, e existem empresas de
diferentes tamanhos. Mas é apresentado aqui o núcleo base para a criação de
qualquer solução de comércio eletrônico.
É importante deixar claro, também, que existem dois universos bastante
distintos em uma solução de e-commerce: a área restrita, em que são cadastra-
dos departamentos, categorias, produtos, entre outros, e a área pública, em
que acontece a compra dos produtos exibidos. A área restrita pode, inclusive,
não ser construída utilizando-se a programação web; ela pode ser um sistema
para desktop. Nesse estudo de caso é implementada apenas a área pública, par-
tindo do pressuposto de que os registros da área restrita já estão disponíveis
no banco de dados.

Ambas as soluções contêm versões bastante “enxutas” do


código-fonte. Isso significa que o enfoque está nas funciona-
lidades, sem grandes preocupações com estética. Utilizando
estilos em CSS (Cascading Style Sheets – folhas de estilo
em cascata), pode-se facilmente deixar o site com um apelo
visual mais encorpado, bastando integrar as classes de estilo
aos componentes. Em caso de dúvidas, o capítulo 3, que
trata dos estilos visuais utilizando CSS, pode ser consul-

– 314 –
Estudo de Caso 2

tado. Também não são utilizados frameworks para auxílio


de navegação nas páginas e/ou acesso a banco de dados,
sendo utilizado código “puro” em ambas as linguagens.

Para que se tenha uma ideia do que será construído, na figura 10.1 há
um exemplo da área pública de uma loja de departamentos fictícia, para
comércio via internet.
Figura 10.1 – Loja de departamentos – área pública

Fonte: elaborada pelo autor com elementos de Shutterstock.com/Dacian G.


Agora se tem uma ideia do que será construído, é necessário pensar em
como será desenvolvido o sistema, a começar pela sua modelagem básica. E
como o livro foca na programação, são utilizados apenas alguns artefatos da
análise essenciais para a compreensão do contexto. Como o desenvolvimento
é orientado a objetos, o início é pelo diagrama de classes, notado em UML e
apresentado na figura 10.2.

– 315 –
Programação Web

Figura 10.2 – Loja de departamentos – diagrama de classes

Produto Categoria Departamento

-idProduto : inteiro -idCategoria : inteiro -idDepartamento : inteiro


-categoria : Categoria -departamento : Departamento -nome : texto
-nome : texto -nome : texto ...
-valor : real ...
-imagens : texto[]
+inserir() : void Cliente
+pesquisar() : Produto
+alterar() : void PedidoProduto -cpf : numérico
+excluir() : void -nome : texto
-pedido : Pedido -email : texto
-produto : Produto -senha : texto
-quantidade : int
...
...

Pedido
-idPedido : int
-cliente : Cliente
-dtaPedido : data
...

Fonte: Elaborada pelo autor.


O diagrama apresenta as classes que serão trabalhadas nesse contexto. Elas
estão com número reduzido de atributos, apenas os que são suficientes para o
funcionamento. Por exemplo, a classe Cliente foi criada apenas com o atributo
identificador (CPF) e mais dois atributos: nome e e-mail. Nela, poderia haver
diversos outros atributos, como telefone, endereço, data de nascimento, e assim
por diante. Porém, a adição desses atributos iria apenas aumentar o volume
dos artefatos produzidos (mais atributos em classes, mais campos de formulá-
rios para serem criados, etc.), sem agregar conhecimento. Da mesma forma, as
outras classes também apresentam um número mínimo de atributos.
Agora, entendendo o contexto: cada “Produto” está subordinado a uma
“Categoria”. Por exemplo: determinado modelo de televisor faz parte da catego-
ria de televisores. Porém, é uma loja de departamentos e, portanto, cada catego-
ria faz parte de um “Departamento”. Nesse caso, por exemplo, os televisores são
subordinados ao departamento de eletrônicos. No site, os produtos são exibidos
dentro de suas categorias que, por sua vez, são subordinadas aos departamentos.
Um “Cliente” poderá adicionar produtos a um carrinho, bem como removê-
-los, ou alterar a quantidade, simulando uma compra. Ao finalizar a compra,

– 316 –
Estudo de Caso 2

é gerado um “Pedido”, e os produtos integrantes do carrinho são vinculados a


esse pedido por meio da classe de associação “PedidoProduto”.

10.2 Banco de dados


Tanto o MySQL quanto o Microsoft SQL Server, utilizados para este
estudo de caso, são bancos de dados relacionais. Portanto, é importante ter o
Modelo Lógico do banco de dados construído sob esse paradigma. A figura
10.3 apresenta o diagrama do modelo lógico notado em UML. Observe que,
apesar de trazer praticamente as mesmas entidades utilizadas na construção
do diagrama de classes apresentado anteriormente, há diferença, tanto nas
classes quanto na forma como elas se relacionam. Esse diagrama contempla
também algumas características do modelo físico, em que os tipos de dados
são aplicáveis em ambos os gerenciadores de banco de dados.
Figura 10.3 – Loja de departamentos – modelo lógico relacional

Produto Categoria Departamento


(0,n) (0,1)
PK IdProduto : INT (0,1) PK IdCategoria : INT PK IdDepartamento : INT
(0,n)
FK IdCategoria : INT FK IdDepartamento : INT Nome : VARCHAR(100)
(0,1)

Nome : VARCHAR(100) Nome : VARCHAR(100)


(0,1)
Valor : DECIMAL(5,2) (0,n)

(0,1)
Cliente
(0,n)
PedidoProduto PK CPF : DECIMAL(11)
ImagemProduto (0,1)
PK Nome : VARCHAR(100)
IdPedido : INT
PK FK
IdProduto : INT
FK (0,n) PK
IdProduto : INT Email : VARCHAR(100)
FK
PK IdSequencia : INT
Quantidade : INT Senha : CHAR(32)
Arquivo : VARCHAR(200)
(0,n)

(0,1)

Pedido
(0,n)
PK IdPedido : INT

FK CPF : DECIMAL(11)

DataHora : DATETIME

Fonte: Elaborada pelo autor.

– 317 –
Programação Web

10.3 Área restrita versus área pública


Como já mencionado, a área restrita contempla os cadastros dos itens
que devem estar disponíveis para o cliente poder realizar sua compra. Para
esse caso, ao menos três destas entidades devem conter registros: “Depar-
tamento”, “Categoria” e “Produto”. Se o produto contiver imagens a serem
exibidas, a tabela “ImagemProduto” também irá conter registros. Nessa solu-
ção não será criada aplicação para a área restrita. No caso, os registros básicos
estão previamente cadastrados, para que possamos desenvolver a área pública
em ambas as linguagens/soluções mencionadas.
A área pública apresenta departamentos, categorias e produtos exibi-
dos para serem adicionados ao carrinho, permitir a inclusão de produtos
no carrinho e verificar o pedido ao final do processo. A partir daqui, cada
página ou grupo de páginas é apresentada pensando em cada funcionali-
dade, tanto na solução PHP quanto na solução C#, começando pela apli-
cação utilizando linguagem PHP acessando MySQL, pois é uma solução
mais familiar.

10.4 Aplicação PHP / MySQL


O primeiro passo é preparar o ambiente para receber a aplicação. No
capítulo 6, foi abordado o modo como instalar e configurar o XAMPP, uma
das opções disponíveis de ambiente para desenvolvimento de aplicações PHP/
MySQL. Então, nessa sessão, não é preciso entrar em detalhes sobre esse pro-
cesso. O primeiro código a ser construído não trata de uma funcionalidade
específica, mas sim do ponto de partida da aplicação.

10.4.1 Ponto de partida


A aplicação inicia sua execução por uma página principal, aqui chamada
de “index.php”, que contém o código que integra a conexão com o banco de
dados e as chamadas para outras páginas. Essa página também é responsável
por manter a estrutura visual do site, apresentando sempre o cabeçalho com o
logotipo da loja e logo abaixo a estrutura de menus para acesso às categorias
de produtos. Observe o código a seguir.

– 318 –
Estudo de Caso 2

1 <?php
2 try {
3 $conn = new PDO("mysql:host=localhost;dbname=LojaDepartamentos", "root", "");
4 echo "Conectado com o banco de dados</br>";
5 }
6 catch(PDOException $erro)
7 {
8 echo "<strong>ERRO DETECTADO:</strong></br>", $erro->getMessage();
9 }
10 ?>

O código inicia com a tag <body>, pois nesse momento não se fazem
necessárias maiores explicações sobre outras partes do código. Nesse trecho
inicial, as linhas de 3 a 8 estabelecem a conexão com o banco de dados,
fazendo uso da classe PDO, vista no capítulo 8. Lembrando que as tags que
indicam início e fim de um trecho de código processado no servidor são
“<?php” e “?>”, respectivamente.
A parte seguinte do código tem por objetivo apresentar, em forma de
link, os departamentos disponíveis, direcionando para a página que irá apre-
sentar as categorias de cada departamento. Para tanto, a página acessa o banco
de dados e busca os departamentos da tabela “Departamento”.
11 <table class="menudepartamentos"><tr>
12 <?php
13 $sqlSelectCommand="SELECT IdDepartamento, Nome ";
14 $sqlSelectCommand.="FROM Departamento ";
15 $sqlSelectCommand.="ORDER BY Nome";
16 $statement = $conn->prepare($sqlSelectCommand);
17 $statement->execute();
18 $ds = $statement->fetchAll(PDO::FETCH_ASSOC);
19 foreach($ds as $row) {
20 $tmp_iddepartamento = $row["IdDepartamento"];
21 $tmp_nome = $row["Nome"];
22 echo "<td><a href=\"index.php?pagina=\"categoria\"&iddepartamento=";
23 echo $tmp_idepartamento."\">".$tmp_nome."</a></td>";
24 }
25 ?>
26 </tr></table>

Em um loop que percorre cada departamento, o código vai escrevendo,


pelas linhas 20 a 23, dentro de células da tabela, os departamentos existentes
com links para apresentação das categorias, fazendo a chamada para a pró-
pria página “index.php”, passando como parâmetro a página que deve ser
incorporada (no caso, “categoria”) e o departamento que foi selecionado. Na

– 319 –
Programação Web

sequência, caso um departamento já tenha sido selecionado, é incorporado


o menu de categorias, que será exibido pela página “categoria.php”, que será
posteriormente explicada.

27 <?php
28 $iddepartamento = $_GET["iddepartamento"];
29 if(!empty($iddepartamento))
30 include("categoria.php");
31 ?>
32 </div>

Em seguida, o código incorpora a página que deve ser exibida no centro,


conforme navegação:

33 <div class="pagina">
34 <?php
35 $pagina = $_GET["pagina"];
36 switch(pagina)
37 {
38 case "produto": include("produto.php"); break;
39 case "adicionar": include("adicionar.php"); break;
40 case "carrinho": include("carrinho.php"); break;
41 case "pedido": include("pedido.php"); break;
42 case "final": include("finalizar.php"); break;
43 }
44 ?>
45 </div>

Por último, a estrutura da página é completada exibindo-se o rodapé:

46 <div class="rodape">
47 <table>
48 <tr><td>2017 - Todos os direitos reservados</td></tr>
49 </table>
50 </div>
51 </body>

– 320 –
Estudo de Caso 2

10.4.2 Apresentação das categorias


Conforme foi mencionado, de acordo com o departamento selecionado,
é exibido um segundo menu com as categorias de produtos previamente
cadastradas para cada departamento. A apresentação do menu fica a cargo
da página “categoria.php”, que foi incorporada à página inicial. O código da
página “categoria.php” é apresentado a seguir.
1 <table class="menucategorias"><tr>
2 <?php
3 $sqlSelectCommand="SELECT IdCategoria, Nome ";
4 $sqlSelectCommand.="FROM Categoria ";
5 $sqlSelectCommand.="WHERE IdDepartamento = ".$iddepartamento;
6 $statement = $conn->prepare($sqlSelectCommand);
7 $statement->execute();
8 $ds = $statement->fetchAll(PDO::FETCH_ASSOC);
9 foreach($ds as $row) {
10 $tmp_idcategoria = $row["IdCategoria"];
11 $tmp_nome = $row["Nome"];
12 echo "<td><a href=\"index.php?pagina=produto&idcategoria=";
13 echo $tmp_idcategoria."\">".$tmp_nome."</a></td>";
14 }
15 ?>
16 </tr></table>

Esse código busca no banco de dados da tabela “Categoria” as catego-


rias para determinado departamento selecionado. Lembrando que, caso não
tenha sido selecionado um departamento, essa página não é incorporada. Em
uma estrutura repetitiva, a página vai escrevendo os links em forma de tabela
para compor o menu de categorias. Os links gerados direcionam para a pró-
pria página “index.php”, porém passando a página central como parâmetro,
que nesse caso é “produto”, para que seja incorporada à página que irá exibir
os produtos específicos da categoria para compra.

10.4.3 Apresentação dos produtos


Conforme a categoria selecionada, devem ser apresentados os produ-
tos para inserção no carrinho de compras. Os produtos são apresentados na
página central, cada um com sua descrição e imagens. Embaixo de cada pro-
duto é apresentado um botão com link para adicionar ao carrinho, que irá

– 321 –
Programação Web

redirecionar para a página “adicionar”, passando o id do produto selecionado.


Observe o código a seguir.
1 <table class="pagina"><tr>
2 <?php
3 $idcategoria = $GET["idcategoria"];
4 $sqlSelectCommand="SELECT IdProduto, Nome, Valor ";
5 $sqlSelectCommand.="FROM Produto ";
6 $sqlSelectCommand.="WHERE IdCategoria = ".$idcategoria;
7 $statement = $conn->prepare($sqlSelectCommand);
8 $statement->execute();
9 $ds = $statement->fetchAll(PDO::FETCH_ASSOC);
10 $reg = 0;
11 foreach($ds as $row) {
12 if($reg % 4 == 0)
13 echo "</tr><tr>";
14 $tmp_idproduto = $row["IdProduto"];
15 $tmp_nome = $row["Nome"];
16 $tmp_valor = number_format($row["Valor"], 2, ',', '.’);
17 $sqlSelectCommand="SELECT Arquivo ";
18 $sqlSelectCommand.="FROM ImagemProduto ";
19 $sqlSelectCommand.="WHERE IdProduto = ".$tmp_idproduto." ";
20 $sqlSelectCommand.="AND IdSequencia = 1";
21 $statementimagem = $conn->prepare($sqlSelectCommand);
22 $statementimagem->execute();
23 $dsimagem = $statementimagem->fetch(PDO::FETCH_ASSOC);
24 $tmp_imagem = $dsimagem["Arquivo"];
25 echo "<td>";
26 echo "<img src=\"images/".$tmp_imagem."\"><br>";
27 echo $tmp_nome."<br>";
28 echo $tmp_valor."<br>";
29 echo "<a href=\"index.php?pagina=adicionar&idproduto=";
30 echo $tmp_idproduto."\"><img src=\"../images/btncomprar.png\"></a>";
31 echo "/<td>";
32 $reg++;
33 }
34 ?>
35 </tr></table>

As linhas 1 a 10 e 33 a 35 já são familiares; elas selecionam os produtos


filtrando pela categoria e percorrem os registros mostrando cada produto. A
novidade aqui é a criação de uma variável $reg, que controla qual registro
está sendo exibido para que, utilizando-se resto de divisão, apresente apenas
quatro produtos por linha de tabela. Isso é controlado pelas linhas 12 e 13.
Também é importante observar que, para cada produto da lista, as linhas 17 a
24 buscam a referência para a primeira imagem que está cadastrada no banco
de dados para o produto, para que seja exibida essa imagem na linha 26. As

– 322 –
Estudo de Caso 2

linhas 27 e 28 mostram a descrição e valor para o produto, e as linhas 29 e


30 geram o link associado à figura de um botão (comprar) para adicionar o
produto ao carrinho mediante o redirecionamento para a página “adicionar”.

10.4.4 Adicionando produto ao carrinho


Uma vez que o produto foi selecionado, ele será adicionado ao carrinho.
O carrinho é tratado como uma array em uma variável de sessão. Observe o
código seguinte:

1 <?php
2 session_start();
3 if(!isset($_SESSION["carrinho"]))
4 $_SESSION["carrinho"] = array();
5 $idproduto = intval($_GET["idproduto"]);
6 if(!isset($_SESSION["carrinho"][$idproduto]))
7 $_SESSION["carrinho"][$idproduto] = 1;
8 else
9 $_SESSION["carrinho"][$idproduto] += 1;
10 header("../index.php?pagina=carrinho",301);
11 ?>

O código não apresenta uma página diretamente. A linha 3 verifica se


existe um carrinho e, se não existir, a linha 4 cria o carrinho como um array
vazio. A linha 5 obtém o id do produto que está sendo incluído. A linha 6
verifica se existe aquele produto no carrinho. Se o produto não estiver no car-
rinho, ele é adicionado na linha 7. Caso contrário, a quantidade do produto
já existente é acrescida em uma unidade, na linha 9. A linha 10 redireciona
para a página que exibe os produtos que estão no carrinho.

10.4.5 Exibindo o conteúdo do carrinho


A página “carrinho.php” é responsável por exibir o conteúdo do carri-
nho. Para tanto, ela percorre o array em memória e, para cada produto exis-
tente no carrinho, busca os dados no banco de dados para exibição em uma
tabela. Observe o código a seguir.

– 323 –
Programação Web

1 <?php
2 if(count($_SESSION["carrinho"]) == 0)
3 echo "Carrinho vazio!";
4 else
5 {
6 echo "<table class=\"carrinho\"><tr>";
7 echo "<th>Imagem</th><th>Descrição</th><th>Quantidade</th>";
8 echo "<th>Valor Unitário</th><th>Valor Total</th><th>Remover</th>";
9 echo "</tr>";
10 $tmp_total = 0;
11 foreach($_SESSION["carrinho"] as $tmp_idproduto => $tmp_qtde) {
12 echo "<tr>";
13 $sqlSelectCommand="SELECT Arquivo ";
14 $sqlSelectCommand.="FROM ImagemProduto ";
15 $sqlSelectCommand.="WHERE IdProduto = ".$tmp_idproduto." ";
16 $sqlSelectCommand.="AND IdSequencia = 1";
17 $statement = $conn->prepare($sqlSelectCommand);
18 $statement->execute();
19 $ds = $statement->fetch(PDO::FETCH_ASSOC);
20 $tmp_imagem = $ds["Arquivo"];
21 echo "<td><img src=\"".$tmp_imagem."\"></td>";

As linhas 2 e 3 verificam se existe conteúdo no carrinho, para emitir


uma mensagem caso o carrinho esteja vazio. As linhas de 6 a 9 iniciam a
tabela com os rótulos para os cabeçalhos das colunas. Na linha 11, é iniciado
o percurso do array de itens do carrinho, trazendo o id e a quantidade, apre-
sentando cada produto em cada linha da tabela. As linhas de 13 a 20 obtêm
o caminho da imagem do produto.
22 $sqlSelectCommand="SELECT Nome, Valor ";
23 $sqlSelectCommand.="FROM Produto ";
24 $sqlSelectCommand.="WHERE IdProduto = ".$tmp_idproduto." ";
25 $statement = $conn->prepare($sqlSelectCommand);
26 $statement->execute();
27 $ds = $statement->fetch(PDO::FETCH_ASSOC);
28 $tmp_nome = $ds["Nome"];
29 $tmp_valor_u = number_format($ds["Valor"], 2, ',', '.’);
30 $tmp_valor_t = number_format($ds["Valor"] * $tmp_qtde, 2, ',', '.’);
31 $tmp_total += $ds["Valor"] * $tmp_qtde;
32 echo "<td>".$tmp_nome."</td><td>".$tmp_qtde."</td>";
33 echo "<td>".$tmp_valor_u."</td><td>".$tmp_valor_t."</td>";
34 echo "<td><a href=\"index.php?pagina=remover&idproduto=".$tmp_idproduto."\">";
35 echo "<img src=\"../images/btnremover.png\"></a></td>";
36 echo "</tr>";
37 }

As linhas de 22 a 27 selecionam os dados do produto; já as linhas 28 a


31 guardam os dados em variáveis temporárias. As linhas 32 a 35 exibem os
valores nas colunas correspondentes da tabela, e a última coluna, tratada pelas

– 324 –
Estudo de Caso 2

linhas 34 e 35, gera um link para remover o produto do carrinho, redirecio-


nando para a página “remover”. Por fim, depois de exibidos todos os produ-
tos, é mostrada a soma total da compra e o botão para finalização do pedido.

38 echo "</table>";
39 $tmp_total = number_format($tmp_total, 2, ',', '.');
40 echo "<tr><td></td><td></td><td></td>";
41 echo "<td>Total:</td><td>".$_tmp_total."</td></tr>";
42 echo "<a href=\"index.php?pagina=finalizar\">";
43 echo "<img src=\"../images/btnfinalizar.png\"></a>";
44 }
45 ?>

10.4.6 Removendo produto do carrinho


A página “remover.php” é responsável por retirar determinado pro-
duto do carrinho, cujo id tenha sido passado como parâmetro. Para isso, seu
código localiza o produto determinado no array, removendo-o de lá por meio
do comando unset. Observe o código a seguir.

1 <?php
2 session_start();
3 $idproduto = intval($_GET["idproduto"]);
4 if(isset($_SESSION['carrinho'][$idproduto]))
5 unset($_SESSION['carrinho'][$idproduto]);
6 header("../index.php?pagina=carrinho",301);
7 ?>

Depois de removido o produto por meio da linha 5, na linha 6 é feito


um redirecionamento para a página “carrinho”, para exibição do conteúdo
atualizado do carrinho.

10.4.7 Finalizando o pedido


O último passo da compra é a finalização do pedido. Nesse caso, é neces-
sário que o cliente informe os seus dados cadastrais para geração do pedido
e concretização da compra, isto é, registrar os produtos comprados tanto na

– 325 –
Programação Web

tabela “Pedido” quanto na tabela “PedidoProduto”. No caso, são inseridos


registros em ambas as tabelas, referentes aos produtos que constam da lista
em memória (sessão).

10.5 Aplicação visual C#/MSSQL


Da mesma forma feita para a aplicação PHP/MySQL, é necessário pre-
parar o ambiente para receber a aplicação. Então, chegou o momento de ver
como é feita a criação/configuração de um projeto para aplicações .NET, o
que é feito com o auxílio do Microsoft Visual Studio, a principal IDE utili-
zada para criação de aplicações na plataforma .NET.
Para construção de uma aplicação web utilizando a linguagem C#, é
necessário que seja criado um projeto que atenda a essas características.
O projeto deve ser composto de arquivos e pastas necessários ao funcio-
namento da aplicação. No processo de criação do projeto no Visual Stu-
dio, deve-se escolher a linguagem que será utilizada, bem como o tipo de
projeto. A figura 10.4 apresenta a tela de criação de projeto, destacando
as opções que devem ser escolhidas. Observe que na árvore de projetos,
à esquerda, foi selecionada a linguagem “Visual C#” e o tipo de projeto
“Web”. Na área central, foi selecionado o tipo de aplicação web: “ASP.NET
Web Application (.NET Framework)”. E na parte inferior, foi selecionado
o nome para o projeto “LojaDepartamentos”.

– 326 –
Estudo de Caso 2

Figura 10.4 – Novo projeto ASP.NET Web

Fonte: Elaborada pelo autor.


Depois de selecionada a linguagem e o tipo de projeto, são oferecidos
alguns modelos (templates) que podem ser utilizados. Para essa solução, será
utilizado o template “Vazio”, conforme ilustra a figura 10.5.

– 327 –
Programação Web

Figura 10.5 – Novo projeto ASP.NET Web Vazio

Fonte: Elaborada pelo autor.


Por se tratar de um projeto vazio, assim que for criado o projeto, será
preciso acrescentar os arquivos necessários ao seu funcionamento.

10.5.1 Ponto de partida


O primeiro arquivo é o que se chama de “página mestra”. A partir dela
poderão ser chamadas outras páginas, como acontecia com a “index.php” da
solução anterior. Para adicionar uma página mestra, basta clicar com o botão

– 328 –
Estudo de Caso 2

direito do mouse sobre o nome do projeto (“LojaDepartamentos”), escolher


a opção “Adicionar” no menu e, então, “Página mestra dos Web Forms”. Essa
sequência é ilustrada pela figura 10.6.
Figura 10.6 – Nova página mestra

Fonte: Elaborada pelo autor.


A página mestra irá se chamar “Principal”, e a ela o Visual Studio acres-
centa a extensão “.Master”. Em seguida, é preciso alterar o código da página
mestra para que ela apresente os departamentos que estão cadastrados no
banco de dados. A parte do código que necessita de alteração está no corpo
da página, isto é, delimitada pela tag “<body>”:

– 329 –
Programação Web

1 <body>
2 <%
3 if (Application["SqlConnectionString"] == null)
4 Application["SqlConnectionString"] =
5 @"Data Source=(localdb)\MSSQLLocalDB;
6 Initial Catalog=LojaDepartamentos;Integrated Security=True;
7 Connect Timeout=30;Encrypt=False;TrustServerCertificate=True;
8 ApplicationIntent=ReadWrite;MultiSubnetFailover=False";
9 %>
10 <form id="form1" runat="server">
11 <div class="cabecalho">
12 <table>
13 <tr><td><img src="logo_loja.jpg"></td></tr>
14 </table>
15 </div>

Assim como na solução em PHP, aqui também há uma pré-configuração da


conexão com o banco de dados, das linhas 2 a 9. As tags que indicam início e fim
de código servidor, no caso do ASP.NET são “<%” e “%>”, respectivamente. As
classes que fazem acesso ao banco de dados já fazem parte do .NET framework,
não havendo inclusão de páginas para tratamento delas. Igualmente aqui é apre-
sentado o cabeçalho da página entre as linhas 10 a 15. Há uma linha diferente, a
linha 10, que prepara o conteúdo para ser exibido dentro de um formulário que
será pré-processado pelo servidor. Como em PHP, essa página tem por objetivo
apresentar, em forma de link, os departamentos disponíveis, direcionando para a
página que irá apresentar as categorias de cada departamento:
16 <div class="navbar">
17 <table class="menudepartamentos"><tr>
18 <%
19 string SqlSelectCommand = "SELECT IdDepartamento, Nome ";
20 SqlSelectCommand += "FROM Departamento ";
21 SqlSelectCommand += "ORDER BY Nome";
22 SqlDataSource ds = new SqlDataSource(
23 (string)Application["SqlConnectionString"], SqlSelectCommand);
24 GridView gd = new GridView();
25 gd.DataSource = ds;
26 gd.DataBind();
27 string tmp_iddepartamento, tmp_nome;
28 for (int i = 0; i < gd.Rows.Count; i++)
29 {
30 tmp_iddepartamento = gd.Rows[i].Cells[0].Text;
31 tmp_nome = gd.Rows[i].Cells[1].Text;
32 Response.Write(
33 @"<td><a runat=""server"" href=""Categoria.aspx?iddepartamento=");
34 Response.Write(tmp_iddepartamento + @""">" + tmp_nome + "</a></td>");
35 }
36 %>
37 </tr></table>
38 </div>

– 330 –
Estudo de Caso 2

As linhas 19 a 21 especificam o comando para busca dos departamen-


tos. As linhas 22 e 23 executam o comando, armazenando em um objeto da
classe “SqlDataSource”. Esse tipo de objeto armazena o retorno da consulta
e poderá ser vinculado a um objeto que possa ser preenchido. Neste caso,
optou-se por utilizar um “GridView” para armazenamento temporário dos
dados. As linhas 25 e 26 vinculam o retorno da consulta ao grid. A partir
daí, as linhas 28 a 35 percorrem o grid apresentando os departamentos no
menu, com seus respectivos links. Dessa vez, o percurso foi feito utilizando-se
a estrutura “for”, uma vez que o resultado da consulta foi vinculado ao grid, e
o número de registros é o número de linhas do girid, dado pela propriedade
“.Rows.Count” do grid.
Em C#, o método “Write”, da classe “Response”, é o responsável por
escrever código HTML para o cliente, assim como o “echo” do PHP.
Por fim, assim como na solução em PHP, é apresentado o rodapé da
página:
39 <div>
40 <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
41 </asp:ContentPlaceHolder>
42 </div>
43 <div class="rodape">
44 <table>
45 <tr><td>2017 - Todos os direitos reservados</td></tr>
46 </table>
47 </div>
48 </form>
49 </body>

10.5.2 Apresentação das categorias


Igualmente à solução anterior, de acordo com o departamento que foi
selecionado, é exibido um segundo menu com as categorias de produtos, que
foram previamente cadastradas para cada departamento. Nesse caso, a apre-
sentação das categorias fica a cargo da página “Categoria.aspx”.
A partir daqui, as páginas adicionadas ao projeto são de conteúdo,
subordinadas à página mestra. Para adicionar uma página desse tipo, deve-se
clicar com o botão direito do mouse sobre a página mestra, e escolher a opção
“Adicionar Página de Conteúdo”, como ilustra a figura 10.7.

– 331 –
Programação Web

Figura 10.7 – Nova página de conteúdo

Fonte: Elaborada pelo autor.


É criada uma página com um template de código. Não se deve esque-
cer de renomeá-la para “Categoria.aspx”. Para as páginas de conteúdo, ire-
mos fazer alteração somente no trecho de código do “Content2”. Observe o
código a seguir.
1 <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"
2 runat="server">
3 <table class="menucategorias"><tr>
4 <%
5 string SqlSelectCommand = "SELECT IdCategoria, Nome ";
6 SqlSelectCommand += "FROM Categoria ";
7 SqlSelectCommand += "WHERE IdDepartamento = "
8 + Request.QueryString["iddepartamento"] + " ";
9 SqlSelectCommand += "ORDER BY Nome";
10 SqlDataSource ds = new SqlDataSource(
11 (string)Application["SqlConnectionString"], SqlSelectCommand);
12 GridView gd = new GridView();
13 gd.DataSource = ds;
14 gd.DataBind(); – 332 –
15 string tmp_idcategoria, tmp_nome;
16 for (int i = 0; i < gd.Rows.Count; i++)
17 {
18 tmp_idcategoria = gd.Rows[i].Cells[0].Text;
19 tmp_nome = gd.Rows[i].Cells[1].Text;
1 <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"
2 runat="server">
3 <table class="menucategorias"><tr>
4 <%
5 string SqlSelectCommand = "SELECT IdCategoria, Nome ";
6 SqlSelectCommand += "FROM Categoria ";
7 SqlSelectCommand += "WHERE IdDepartamento = "
8 + Request.QueryString["iddepartamento"] + " ";
9 SqlSelectCommand += "ORDER BY Nome";
Estudo de Caso 2
10 SqlDataSource ds = new SqlDataSource(
11 (string)Application["SqlConnectionString"], SqlSelectCommand);
12 GridView gd = new GridView();
13 gd.DataSource = ds;
14 gd.DataBind();
15 string tmp_idcategoria, tmp_nome;
16 for (int i = 0; i < gd.Rows.Count; i++)
17 {
18 tmp_idcategoria = gd.Rows[i].Cells[0].Text;
19 tmp_nome = gd.Rows[i].Cells[1].Text;
20 Response.Write(
21 @"<td><a runat=""server"" href=""Produto.aspx?idcategoria=");
22 Response.Write(tmp_idcategoria + @""">" + tmp_nome + "</a></td>");
23 }
24 %>
25 </tr></table>
26 </asp:Content>

Assim como na página “categoria.php”, esse código busca no banco de


dados, da tabela “Categoria”, as categorias para determinado departamento
selecionado. A única diferença aqui é que o redirecionamento é feito para
uma página específica para exibição os produtos (“Produto.aspx”), ao invés
do autorredirecionamento com incorporação, como acontecia na solução
PHP. Isso é feito pelas linhas 20 a 22 deste código.

10.5.3 Apresentação dos produtos


De acordo com a categoria, a página “Produto.aspx” apresentam-se os
produtos para inserção no carrinho de compras, com os dados do produto e
o link para adicionar ao carrinho.
1 <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"
2 runat="server">
3 <table class="pagina"><tr>
4 <%
5 string SqlSelectCommand;
6 SqlSelectCommand = "SELECT IdProduto, Nome, Valor ";
7 SqlSelectCommand += "FROM Produto ";
8 SqlSelectCommand += "WHERE IdCategoria = “
9 + Request.QueryString["idcategoria"] + " ";
10 SqlSelectCommand += "ORDER BY Nome";
11 SqlDataSource ds = new SqlDataSource(
12 (string)Application["SqlConnectionString"], SqlSelectCommand);
13 GridView gd = new GridView();
14 gd.DataSource = ds;
15 gd.DataBind();
16 string tmp_idproduto, tmp_nome, tmp_valor, tmp_imagem;

– 333 –
Programação Web

A parte inicial do código já é conhecida: seleciona os produtos filtrando


pela categoria, trazendo em um objeto da classe “SqlDataSource”. A seguir,
há uma estrutura iterativa que percorre o grid no qual o resultado da consulta
foi armazenado.
17 for (int i = 0; i < gd.Rows.Count; i++)
18 {
19 if (i % 4 == 3)
20 Response.Write("</tr><tr>");
21 tmp_idproduto = gd.Rows[i].Cells[0].Text;
22 tmp_nome = gd.Rows[i].Cells[1].Text;
23 tmp_valor = gd.Rows[i].Cells[2].Text;
24 SqlSelectCommand = "SELECT Arquivo ";
25 SqlSelectCommand += "FROM ImagemProduto ";
26 SqlSelectCommand += "WHERE IdProduto = " + tmp_idproduto + " ";
27 SqlSelectCommand += "AND IdSequencia = 1";
28 SqlDataSource dsimagem = new SqlDataSource(
29 (string)Application["SqlConnectionString"], SqlSelectCommand);
30 GridView gdimagem = new GridView();
31 gdimagem.DataSource = dsimagem;
32 gdimagem.DataBind();
33 tmp_imagem = gdimagem.Rows[0].Cells[0].Text;
34 Response.Write("<td>");
35 Response.Write(@"<img src=""images/" + tmp_imagem + @"""><br>");
36 Response.Write(tmp_nome + "<br>");
37 Response.Write(tmp_valor + "<br>");
38 Response.Write(
39 @"<a runat=""server"" href=""Adicionar.aspx?idproduto=");
40 Response.Write(
41 tmp_idproduto + @"""><img src=""../images/btncomprar.png""></a>");
42 Response.Write("/<td>");
43 }
44 %>
45 </tr></table>
46 </asp:Content>

A diferença nesse código, em relação ao PHP, é que não precisou ser


criada uma variável para contagem de linhas e controle de exibição de quatro
produtos por linha, tendo sido utilizado o próprio iterador “i”, que percorre
as linhas do grid. Aqui, as linhas 38 a 40 são responsáveis por gerar o link para
adicionar o produto ao carrinho, que será feito pela página “Adicionar.aspx”.

10.5.4 Adicionando produto ao carrinho


Assim como na solução anterior, chegou a vez de adicionar o produto
ao carrinho. Nessa aplicação .NET, o carrinho também é tratado como uma
array em uma variável de sessão. Observe o código seguinte:

– 334 –
Estudo de Caso 2

1 <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">


2 <%
3 if (Session["Carrinho"] == null)
4 Session["Carrinho"] = new List<LojaDepartamentos.Produto>();
5 int idproduto = int.Parse(Request.QueryString["idproduto"]);
6 List<LojaDepartamentos.Produto> produtos =
7 (List<LojaDepartamentos.Produto>)Session["Carrinho"];
8 LojaDepartamentos.Produto p = produtos.Find(x => x.IdProduto == idproduto);
9 if (p == null)
10 produtos.Add(new LojaDepartamentos.Produto(idproduto, 1));
11 else
12 p.Qtde += 1;
13 Session["Carrinho"] = produtos;
14 Response.Redirect("Carrinho.aspx");
15 %>
16 </asp:Content>

Nessa versão, a linha 3 também verifica se existe um carrinho e, se não


existir, a linha 4 cria o carrinho como um array vazio. A diferença, nesse caso,
é que, em vez de se criar uma matriz, criou-se uma lista de objetos da classe
“Produto” (detalhada a seguir). A linha 5 obtém o id do produto que está
sendo incluído. A linha 8 verifica se existe aquele produto no carrinho. Se o
produto não estiver no carrinho, ele é adicionado na linha 10, com quanti-
dade = 1. Caso contrário, a quantidade do produto já existente é acrescida em
uma unidade, na linha 12. A linha 14 redireciona para a página que exibe os
produtos que estão no carrinho. Agora observe o trecho de código que define
a classe “Produto” que foi criada para essa solução:

1 public class Produto


2 {
3 public int IdProduto { get; set; }
4 public int Qtde { get; set; }
5
6 public Produto()
7 {
8 IdProduto = 0;
9 Qtde = 0;
10 }
11 public Produto(int paridproduto, int parqtde)
12 {
13 IdProduto = paridproduto;
14 Qtde = parqtde;
15 }
16 }

– 335 –
Programação Web

A classe foi criada para atender ao objeto produto no carrinho e, por-


tanto, possui apenas os atributos id e quantidade. Além do construtor vazio,
foi criado um construtor que recebe estes atributos por parâmetro (veja linhas
11 a 15).

10.5.5 Exibindo o conteúdo do carrinho


Nessa solução, a página “Carrinho.aspx” é responsável por exibir o con-
teúdo do carrinho. Da mesma forma que na solução em PHP, ela percorre o
array em memória e, para cada produto existente no carrinho, busca os dados
no banco de dados para exibição em uma tabela. Observe a seguir o código
particionado da mesma forma:
1 <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
2 <%
3 List<LojaDepartamentos.Produto> produtos =
4 (List<LojaDepartamentos.Produto>)Session["Carrinho"];
5 if (produtos.Count == 0)
6 Response.Write("Carrinho vazio!");
7 else
8 {
9 Response.Write(@"<table class=""carrinho""><tr>");
10 Response.Write("<th>Imagem</th><th>Descrição</th><th>Quantidade</th>");
11 Response.Write("<th>Valor Unitário</th><th>Valor Total</th><th>Remover</th>");
12 Response.Write("</tr>");
13 float tmp_total = 0f;
14 string SqlSelectCommand;
15 foreach(LojaDepartamentos.Produto p in produtos)
16 {
17 Response.Write("<tr>");
18 SqlSelectCommand ="SELECT Arquivo ";
19 SqlSelectCommand +="FROM ImagemProduto ";
20 SqlSelectCommand +="WHERE IdProduto = " + p.IdProduto.ToString() + " ";
21 SqlSelectCommand +="AND IdSequencia = 1";
22 SqlDataSource ds = new SqlDataSource(
23 (string)Application["SqlConnectionString"], SqlSelectCommand);
24 GridView gd = new GridView();
25 gd.DataSource = ds;
26 gd.DataBind();
27 string tmp_imagem = gd.Rows[0].Cells[0].Text;
28 Response.Write(@"<td><img src=""../images/" + tmp_imagem + @"""></td>");

Nessa versão, a linha 3 cria uma lista temporária, denominada “produ-


tos”, para ser utilizada com a lista de produtos do carrinho que está na sessão.
A partir daí, é feita a mesma verificação de existência ou não de produtos no
carrinho. Também é criada uma tabela com os rótulos para os cabeçalhos das
colunas, da mesma forma feita anteriormente. Observe que foi adotada aqui
a mesma lógica da versão em PHP para exibição da tabela:

– 336 –
Estudo de Caso 2

29 SqlSelectCommand ="SELECT Nome, Valor ";


30 SqlSelectCommand +="FROM Produto ";
31 SqlSelectCommand +="WHERE IdProduto = " + p.IdProduto.ToString() + " ";
32 ds = new SqlDataSource(
33 (string)Application["SqlConnectionString"], SqlSelectCommand);
34 gd = new GridView();
35 gd.DataSource = ds;
36 gd.DataBind();
37 string tmp_nome = gd.Rows[0].Cells[0].Text;
38 string tmp_valor_u = float.Parse(gd.Rows[0].Cells[1].Text).ToString("C2");
39 string tmp_valor_t = (float.Parse(gd.Rows[0].Cells[1].Text) * p.Qtde).ToString("C2");
40 tmp_total += float.Parse(gd.Rows[0].Cells[1].Text) * p.Qtde;
41 Response.Write("<td>" + tmp_nome + "</td><td>" + p.Qtde.ToString() + "</td>");
42 Response.Write("<td>" + tmp_valor_u + "</td><td>" + tmp_valor_t + "</td><td>");
43 Response.Write(
44 @"<a href=""Remover.aspx?idproduto=" + p.IdProduto.ToString() + @""">");
45 Response.Write(@"<img src=""../images/btnremover.png""></a><td>");
46 Response.Write("</tr>");
47 }
48 Response.Write("<tr><td></td><td></td><td></td>");
49 Response.Write("<td>Total:</td><td>" + tmp_total.ToString("C2") + "</td></tr>");
50 Response.Write("</tr></table>");
51 Response.Write(@"<a href=""Finalizar.aspx"">");
52 Response.Write(@"<img src=""../images/btnfinalizar.png""></a></td>");
53 }
54 %>
55 </asp:Content>

10.5.6 Removendo produto do carrinho


A página “Remover.aspx” é responsável por retirar determinado produto
do carrinho cujo id tenha sido passado como parâmetro. Para isso, seu código
localiza o produto determinado no array, removendo-o de lá por meio do
método “Remove”, na linha 9 deste código, conforme a seguir.
1 <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"
2 runat="server">
3 <%
4 int idproduto = int.Parse(Request.QueryString["idproduto"]);
5 List<LojaDepartamentos.Produto> produtos =
6 (List<LojaDepartamentos.Produto>)Session["Carrinho"];
7 LojaDepartamentos.Produto p =
8 produtos.Find(x => x.IdProduto == idproduto);
9 produtos.Remove(p);
10 Session["Carrinho"] = produtos;
11 Response.Redirect("Carrinho.aspx");
12 %>
13 </asp:Content>

Depois de removido o produto, a linha 11 faz o redirecionamento para


a página “Carrinho.aspx”, para exibição do conteúdo atualizado.

– 337 –
Programação Web

Síntese
O objetivo deste capítulo foi mostrar que é possível implementar uma
mesma solução negocial utilizando linguagens e frameworks de programa-
ção completamente diferentes. Um mesmo problema pode ser solucionado
tanto com software livre como mediante solução proprietária. Ambas as solu-
ções fizeram uso de conceitos de interação entre cliente e servidor, em que o
código gerado para o cliente pode ser interpretado por qualquer navegador,
independentemente da linguagem adotada no servidor, fazendo uso de ele-
mentos de formatação visual, como o CSS. Da mesma forma, mais de um
tipo de gerenciador de banco de dados foi utilizado, tanto livre quanto pago,
e atendem igualmente à necessidade negocial: a implantação de um sistema
web para comércio eletrônico.

– 338 –
Conclusão
Programação Web

Nessa obra serão apresentados os principais conceitos e a construção de


programas voltados para a web, fazendo um tour inicial pelo “mundo web”,
e em seguida caminhando pelas técnicas a serem utilizadas, como o HTML
(estrutura de uma página); o CSS, que fornece todas as formatações necessá-
rias; o JavaScript e o JQuery, que promovem uma interação dinâmica com o
usuário; e a utilização de Framework para o desenvolvimento de sites respon-
sivos. Serão apresentados os conceitos de orientação a objetos, que serão usa-
dos na linguagem PHP, tornando-a mais eficiente. Finalmente, será realizado
um estudo de caso, com apresentação de soluções para projeto e implementa-
ção de desenvolvimento web.

– 340 –
Gabarito
Programação Web

1. Introdução à Programação Web


1. A
2. E
3. C
4. A

2. HTML
1. C
2. D
3. C
4. E

3. CSS
1. C
2. D
3. B
4. A

4. JQuery
1. B
2. D
3. E
4. C

– 342 –
Gabarito

5. Softwares, Frameworks e Bootstrap


1. D
2. B
3. C
4. D

6. PHP
1. B
2. A
3. B
4. C

7. PHP: Orientação a Objeto


1. D
2. E
3. C
4. B

8. PHP: Acesso ao Banco de Dados


1. D
2. A
3. B
4. A

– 343 –
Referências
Programação Web

APACHE FRIENDS. XAMPP para Windows. Disponível em: <https://


www.apachefriends.org/pt_br/download.html>. Acesso em: 26 mar. 2017.
AWS. Atomic Web Strategy. Disponível em: <http://www.atomicwebstra-
tegy.com.au/website-development/>. Acesso em: 24 fev. 2017.
BIBEAULT, B.; KATZ, Y. JQuery in Action. 2. ed. Manning, 2010.
BOOTSTRAP. Official website. Disponível em: <http://getbootstrap.
com/>. Acesso em: 5 mar. 2017.
CODE SCHOOL. Disponível em: <https://www.codeschool.com>. Acesso
em: 21 fev. 2017.
COMPUTER HISTORY MUSEUM. Inventing the internet. s. d. Dispo-
nível em: <http://www.computerhistory.org/revolution/networking/19/375>
Acesso em: 25 fev. 2017.
DALL’OGLIO, P. PHP. Programando com Orientação a Objetos. 3. ed. São
Paulo: Novatec, 2015.
DEVMEDIA. Disponível em: <http://www.devmedia.com.br/html-meta-
-tags-entendendo-o-uso-de-meta-tags/30328>. Acesso em: 25 fev. 2017.
ECLIPSE. Official website. Disponível em: <https://eclipse.org/>. Acesso
em: 15 mar. 2017.
FREEMAN, E.; FREEMAN, E. Use a Cabeça! HTML e CSS. Trad. 2. ed.
Rio de Janeiro: Alta Books, 2015.
GIT. Official website. Disponível em: <https://git-scm.com/>. Acesso em:
7 mar. 2017.
GITHUB. Official website. Disponível em: <https://github.com/>. Acesso
em: 7 mar. 2017.
GRAHAM, P. Web 2.0: Want to start a startup? 2005 Disponível em: <http://
www.paulgraham.com/web20.html>. Acesso em: 27 fev. 2017.
IEEE. Internet of things. 2015. Disponível em: <http://iot.ieee.org/defini-
tion.html>. Acesso em: 28 fev. 2017.
INTERNET SOCIETY. Brief history of the internet: origins of the inter-
net, s. d. Disponível em: <http://www.internetsociety.org/internet/what-

– 346 –
Referências

-internet/history-internet/brief-history-internet#Origins>. Acesso em: 25


fev. 2017.
JQUERY. Disponível em: <https://jquery.com/>. Acesso em: 2 mar. 2017.
______ Foundation. Disponível em: <https://jquery.org/history/>. Acesso
em: 2 mar. 2017.
MDN – Mozilla, Developer Network. Disponível em: <https://developer.
mozilla.org/pt-BR/docs/Mozilla/Gecko>. Acesso em: 26 fev. 2017.
______. JavaScript guide. Disponível em: <https://developer.mozilla.org/
pt-BR/docs/Web/JavaScript>. Acesso em: 1 mar. 2017.
NIELSEN, J. Projetando Websites. Rio de Janeiro: Campus. 2000.
O’REILLY, T. What is Web 2.0. 2005. Disponível em: http://www.oreilly.
com/pub/a/web2/archive/what-is-web-20.html?page=1. Acesso em: 25 fev.
2017.
PHP. Official website. Disponível em: <https://secure.php.net/>. Acesso em:
22 mar. 2017.
______. PDO. Disponível em: <http://www.php.net/manual/en/book.pdo.
php>. Acesso em: 26 mar. 2017.
PRIMO, A. O aspecto relacional das interações na Web 2.0. E-Compôs, v. 9,
p. 1-21, 2007. Disponível em: <http://www.ufrgs.br/limc/PDFs/web2.pdf>.
Acesso em: 27 fev. 2017.
QURIKS Mode. Disponível em: <http://www.quirksmode.org/dom/events/
click.html>. Acesso em: 3 mar. 2017.
ROBBINS, J. N. HTML & XHTML: guia de bolso. Rio de Janeiro: Alta
Books, 2008.
RUSSELL, C. Ferramentas essenciais para desenvolvedores PHP. Guia de
referência para o desenvolvimento web com PHP. São Paulo: Novatec, 2016.
SAMY, M. Bootstrap 3.3.5 − aprenda a usar o framework Bootstrap para
criar layouts CSS complexos e responsivos. 1. ed. São Paulo: Novatec, 2015.
______. Construindo sites com CSS e (X)HTML: sites controlados por
folhas de estilo em cascata. São Paulo: Novatec, 2008.

– 347 –
Programação Web

______. JQuery – a biblioteca do programador JavaScript. 3. ed. São Paulo:


Novatec, 2013.
SOMASUNDARAM, R. Git: version control for everyone. Beginner’s guide.
1. ed. Birmingham: Packt Publishing Ltda., 2013.
SUEHRING, S. JavaScript, Step by Step. 3. ed. Microsoft Press, 2013.
TRACHTENBERG, A.; SKLAR, D. PHP Cookbook. 3. ed. CA/EUA:
O’Reilly Media, Sebastopol, 2014.
TRY JQuery. JQuery tutorial. Disponível em: <try.jquery.com>. Acesso em:
2 mar. 2017.
VERAS, M. Computação em nuvem: nova arquitetura de TI. 1. ed., Rio de
Janeiro: Brasport, 2015.
W3C BRASIL. Linha do tempo da web: web e internet. Disponível em:
<http://ceweb.br/linhadotempo/>. Acesso em: 26 fev. 2017.
W3C. World Wide Web Consortium. Disponível em: <http://www.w3.org>.
Acesso em: 20 fev. 2017.
W3SCHOOLS. Disponível em: <http://www.w3schools.com>. Acesso em:
20 fev. 2017.
______. JavaScript HTML DOM. Disponível em: <https://www.w3schools.
com/js/js_htmldom.asp>. Acesso em: 25 mar. 2017b.
______. jQuery Get Started. Disponível em: <https://www.w3schools.com/
jquery/jquery_get_started.asp>. Acesso em: 2 mar. 2017a.
______. PHP Prepared Statements. Disponível em: <https://www.
w3schools.com/php/php_mysql_prepared_statements.asp>. Acesso em: 26
mar. 2017.
WEB SOCIAL DEV. Lista de frameworks CSS minimalistas. Disponível
em: <http://websocialdev.com/2014/09/09/lista-de-minimal-frameworks-e-
-grid-frameworks-css/>. Acesso 1 mar. 2017.
WORLD WIDE WEB FOUNDATION. History of the web. s. d. Dis-
ponível em: <http://webfoundation.org/about/vision/history-of-the-web/.
Acesso em: 25 fev. 2017.

– 348 –

Você também pode gostar