prova Programação para web II

Prévia do material em texto

U
N
O
P
A
R
P
R
O
G
R
A
M
A
Ç
Ã
O
 P
A
R
A
 W
E
B
 II Programação 
para web II
Anderson Emídio Macedo Gonçalves
Adriano Sepe
Paulo Henrique Terra
Programação para web II
Dados Internacionais de Catalogação na Publicação (CIP) 
 Gonçalves, Anderson Emídio Macedo 
 
 ISBN 978-85-522-0318-6
 1. Sites da web – projetos – programas de computador. 
 I. Sepe, Adriano. II. Terra, Paulo Henrique. III. Título.
 CDD 006.786 
Gonçalves, Adriano Sepe, Paulo Henrique Terra. – Londrina: 
Editora e Distribuidora Educacional S.A., 2018
 112p.
G635p Programação para web II/ Anderson Emídio Macedo 
© 2018 por Editora e Distribuidora Educacional S.A.
Todos os direitos reservados. Nenhuma parte desta publicação poderá ser reproduzida ou transmitida de qualquer 
modo ou por qualquer outro meio, eletrônico ou mecânico, incluindo fotocópia, gravação ou qualquer outro tipo 
de sistema de armazenamento e transmissão de informação, sem prévia autorização, por escrito, da Editora e 
Distribuidora Educacional S.A.
Presidente
Rodrigo Galindo
Vice-Presidente Acadêmico de Graduação
Mário Ghio Júnior
Conselho Acadêmico 
Alberto S. Santana
Ana Lucia Jankovic Barduchi
Camila Cardoso Rotella
Danielly Nunes Andrade Noé
Grasiele Aparecida Lourenço
Isabel Cristina Chagas Barbin
Lidiane Cristina Vivaldini Olo
Thatiane Cristina dos Santos de Carvalho Ribeiro
Revisora Técnica
Adriane Aparecida Loper
Editorial
Adilson Braga Fontes
André Augusto de Andrade Ramos
Leticia Bento Pieroni 
Lidiane Cristina Vivaldini Olo
2018
Editora e Distribuidora Educacional S.A.
Avenida Paris, 675 – Parque Residencial João Piza
CEP: 86041-100 — Londrina — PR
e-mail: editora.educacional@kroton.com.br
Homepage: http://www.kroton.com.br/
Unidade 1 | Framework: conceitos básicos no desenvolvimento web
Seção 1 - Introdução ao framework
1.1 | Framework
1.2 | Introdução ao ASP.NET Core
1.2.1 | Arquitetura do .NET
1.3 | Tecnologia .NET Core
1.4 | Startup da Aplicação ASP.NET Core
1.4.1 | Método de Configuração
1.4.2 | Método de Configuração de Serviços
1.5 | Analisando o Start da Aplicação
1.6 | Middleware
1.7 | Arquivos Estáticos
1.8 | Servidor
Seção 2 - Compreendendo a programação
2.1 | Definindo Razor
2.2 | Blocos de Código
2.3 | Estruturas de Controle
2.4 | Diretivas
2.5 | Páginas Razor
Sumário
7
10
10
10
11
12
13
13
13
13
15
15
16
18
18
19
19
20
24
Unidade 2 | Tecnologias para programação web
Seção 1 - Padrão HTML5 
1.1 | Novos elementos em HTML5
1.2 | Diferentes navegadores
Seção 2 - Estilo CSS
2.1 | Introdução ao CSS
2.2 | Introdução ao Java Script
Seção 3 - Linguagem PHP
3.1 | HTM5 e linguagem lado servidor
3.2 | Programando em PHP
3.3 | Funcionalidades do PHP
31
34
35
37
42
42
45
49
49
49
51
Unidade 3 | O padrão MVC
Seção 1 - Padrões de projeto
1.1 | Design patterns
1.2 | Estrutura de um padrão
1.3 | Tipos de padrões de projeto
Seção 2 - O padrão MVC
2.1 | Padrões de arquitetura
2.2 | Padrões de arquitetura comuns
2.3 | O padrão MVC
2.4 | Frameworks
57
60
60
61
61
65
65
66
67
71
Unidade 4 | Tecnologia de acesso ao banco de dados
Seção 1 - API JDBC
1.1 | Funcionamento da API
81
84
84
1.2 | Conexão java
Seção 2 - Interface PreparedStatement
2.1 | Introdução a interface PreparedStatement’ 
2.2 | Funcionamento da interface
Seção 3 - API mysqli_connect 
3.1 | Introdução ao componente mysqli_connect
3.2 | Objeto mysqli query
85
93
93
94
98
98
99
Apresentação
Caro aluno, em busca de aprofundar o conhecimento na 
arquitetura web, vamos caminhar por uma trilha que perpassa por 
vários assuntos dentro desse universo rico em informação e de muitos 
recursos tecnológicos para cumprimento do seu propósito. Propósito 
este de desenvolver sistemas inteligentes e de fácil operacionalização, 
proporcionando aos clientes uma melhor produtividade, aumento 
na performance e uma resposta rápida no auxílio a tomada de 
decisões. Estamos falando de tecnologias de ponta no mercado para 
o desenvolvimento web. Da mesma maneira estamos vivendo uma 
época de revolução digital e nossos sistemas de informação estão 
evoluindo para acompanhar a tecnologia da atualidade.
Este livro está dividido em quatro unidades de estudo. A Unidade 1 
aborda os Frameworks, componentes importantes que, se utilizados 
com inteligência, auxiliam no processo de desenvolvimento de 
software. A Unidade 2 trabalha com várias tecnologias, como HTML5, 
CSS, Java Script, PHP e MySQL. São apresentadas de forma didática por 
meio de exemplos práticos que ajudarão você a entender melhor como 
funciona o processo de construção de um sistema web. A Unidade 3 
apresenta a arquitetura MVC - Model View Controller, mostrando suas 
principais características, seu funcionamento e alguns exemplos de 
trabalho com esse padrão de desenvolvimento. A unidade 4 vem para 
fechar o conteúdo do livro de Programação para Web II, apresentando 
formas de conexão com o banco de dados. Abordamos, nesta unidade, 
algumas APIs de conexão com banco de dados e apresentamos alguns 
exemplos de utilização destas APIs.
Acreditamos que a leitura e o estudo deste livro trarão novos 
conhecimentos que serão necessários para ajudar na composição de 
todos os materiais dos cursos da área de tecnologia da informação.
Tenha uma boa leitura, um ótimo estudo e todo sucesso que você 
puder alcançar. 
Prof. Anderson Macedo
Unidade 1
Framework: conceitos básicos 
no desenvolvimento web
Este material tem o objetivo de ajudar o leitor a entender como 
o conceito de modularização por meio de framework pode garantir 
maior produtividade e facilidades no processo de desenvolvimento. 
Isso é necessário principalmente para aplicações web, pois envolve 
várias tecnologias com HTML, CSS, JavaScript, linguagem de 
programação, acesso a dados e técnicas de segurança. 
Pensar na construção de uma aplicação partindo exclusivamente 
do mecanismo de comunicação HTTP, com certeza seria algo 
desafiador. Esse cenário bastante desafiador era a realidade para 
muitos desenvolvedores no tempo em que o padrão Common 
Gateway Interface (CGI) imperava. Vamos, ainda, abordar alguns 
conceitos existentes na tecnologia ASP.NET Core.
Objetivos de aprendizagem
Nesta seção compreenderemos os conceitos de framework, e uma aplicação 
para desenvolvimento web através da conceptualização da tecnologia ASP.NET 
Core.
Seção 1 | Introdução ao framework
Nesta seção visualizaremos os mecanismos programáveis existentes 
na tecnologia ASP.NET Core e, principalmente, teremos a oportunidade de 
compreender como a integração entre linguagem de programação e linguagem 
de marcação não é algo simples, mas existem facilitadores para isso.
Seção 2 | Compreendendo a programação
Adriano Sepe
Introdução à unidade
Vamos estudar, nesta unidade, conceitos de framework e como a 
programação pode ser facilitada a partir desse tipo de modularização.
Além dessa abordagem conceitual, vamos entender como a 
tecnologia ASP.NET Core, desenvolvida pela Microsoft, apresenta-se 
para o mercado de desenvolvimento de aplicações web. Abordaremos 
os conceitos relacionados à tecnologia e também sobre a forma de 
programarmos uma aplicação.
Nos aspectos relacionados à tecnologia, compreenderemos 
elementos básicos, como origem e ambiente de execução, também 
abordaremos conceitos de inicialização, arquivos estáticos e outros. 
Para entendermos como a programação de conteúdo dinâmico 
ocorre, abordaremos a linguagem de marcação chamada Razor, 
que permite, dentre outras coisas, mesclar conteúdos estáticos, 
como HTML, CSS e JavaScript com a linguagem de programação. 
Abordaremos conceitos relacionados à construção de páginas Razor, 
promovendo a demonstração da tecnologia como um todo.
Não abordaremos o padrão arquitetural MVC nesta unidade, muito 
natural à tecnologia tratada aqui, pois será devidamente apresentado 
na Unidade 4, tendo em vista a importância e a aderência que o tema 
tem para o desenvolvimento Web.
Vamos apontar vários conteúdos correlacionados,aproveitem!
U1 - Framework: conceitos básicos no desenvolvimento web10
Seção 1
Introdução ao framework
Introdução à seção
Nesta seção, apreenderemos conceitos de framework e suas 
aplicações. Também observaremos como a tecnologia ASP.NET Core 
se apresenta, por meio de conceitos básicos dessa tecnologia.
1.1 Framework
Entendemos como framework, um padrão arquitetural que fornece 
um modelo de desenvolvimento, também conhecido como template. 
Esse modelo de desenvolvimento deve necessariamente possibilitar a 
extensão, sendo assim, entendemos que um framework deve fornecer 
um template que seja extensível para aplicações dentro de um domínio. 
Existem vários frameworks focados em resolver um problema 
comum ao desenvolvimento, que é a manipulação de um banco de 
dados relacional através de uma aplicação que se utiliza do paradigma 
orientado a objetos. Neste caso, temos paradigmas que divergem 
conceitualmente, no qual, para o banco de dados, os dados são 
mapeados por meio de tabelas e relacionamentos; já para a orientação 
a objetos, temos classes e associações. Para diminuir a impedância 
entre essas duas tecnologias existem frameworks que disponibilizam 
um modelo de desenvolvimento, e que naturalmente são extensíveis 
para suportar a necessidades de cada projeto (BOOCH; JAMES; 
JACOBSON, 2012). 
Devemos compreender que, um framework é maior do que um 
mecanismo. De fato, podemos pensar em um framework como um 
tipo de microarquitetura abrangendo um conjunto de mecanismos 
que trabalham juntos para resolver um problema básico de um 
domínio comum. Na criação de um framework existe a especificação 
do esqueleto arquitetural, juntamente com conceitos e mecanismos 
para possibilitar que usuários possam adequar / estender para suas 
realidades, possibilitando assim o funcionamento a partir de seu próprio 
contexto (BOOCH; JAMES; JACOBSON; 2012).
1.2 Introdução ao ASP.NET Core
A tecnologia ASP.NET Core apresenta-se com suporte à múltiplas 
U1 - Framework: conceitos básicos no desenvolvimento web 11
plataformas, com alta performance, código de fonte Open Source e 
disponível para construção de aplicações modernas, com base em 
tecnologias nas nuvens, aplicações conectadas na internet. Por meio 
dela podemos desenvolver aplicações web e serviços, aplicações 
para a Internet das Coisas (IoT – sigla em inglês) e infraestrutura 
servidora para aplicações para dispositivos móveis. Diferentemente de 
outras tecnologias, essa pode ser executada nos principais sistemas 
operacionais, como Windows, macOS e Linux. Possibilita a sua 
utilização tanto em ambientes nas nuvens como infraestrutura local. 
Uma aplicação ASP.NET Core roda no topo da tecnologia .NET Core ou 
.NET Framework. Vejamos algumas diferenças entre estas tecnologias 
(ROTH; ANDERSON; LUTTIN, 2017). 
1.2.1 Arquitetura do .NET
A plataforma tecnologia .NET disponibiliza três ambientes de tempo 
de execução, isso significa que utilizando qualquer uma das linguagens 
suportadas podemos construir aplicações com restrições e facilitadores 
distintos. Esses ambientes de execução são necessários para permitir 
que uma aplicação desenvolvida em .NET possa ser executada, 
devemos compreender que são necessariamente pré-requisitos para 
as aplicações desenvolvidas. A imagem a seguir apresentará esses três 
ambientes: .NET Core, .NET Framework e Xamarin. 
Fonte: <https://docs.microsoft.com/en us/dotnet/articles/standard/media/components.png>. Acesso em: 26 abr. 2017.
Figura 1.1 | Componentes do .NET
U1 - Framework: conceitos básicos no desenvolvimento web12
Como já esclarecido, cada ambiente disponibilizará características 
específicas, restrições e vantagens. Algumas características tornam 
esses ambientes totalmente especializados, dessa forma, a adoção de 
um ou de outro deve ser baseado nas características gerais da aplicação 
que desejamos construir (LANDER, 2016).
• NET Framework: foi o primeiro ambiente de execução 
construído e que consolidou a tecnologia .NET, como 
característica principal podemos destacar a dependência 
do sistema operacional Windows, também que através dele 
podemos construir aplicações web, servidoras ou desktop.
• NET Core: ambiente otimizado para ser escalável, isso significa 
que foi desenhado para ser eficiente em infraestruturas 
servidoras locais ou remotas, através da computação nas 
nuvens. Diferencia-se do .NET Framework principalmente 
por ser multiplataforma, isso implica ser suportado em vários 
sistemas operacionais como Windows, Linux e macOS.
• Xamarin: este ambiente foi concebido por uma empresa 
chamada Xamarin, que possibilita a construção e otimização 
de aplicações para plataformas móveis como Android e Apple 
iOS.
Durante o decorrer desse material vamos avaliar a execução da 
tecnologia ASP.NET Core rodando no topo do .NET Core, visto que 
essa combinação apresenta maior flexibilidade pois possibilita-nos a 
utilização de outros sistemas operacionais (LANDER, 2016). 
1.3 Tecnologia .NET Core
A plataforma tecnologia .NET Core, como já visto, dispões de 
um ambiente de execução próprio. Além disso, apresenta algumas 
características que devem ser enaltecidas, visto que exibe algumas 
abordagens vantajosas na perspectiva do desenvolvedor quando do 
projeto a ser desenvolvido (LANDER, 2016). 
• Open Source: plataforma de código aberto, com licenças de 
utilização MIT e Apache 2.
• Suporte: coloca-se como uma tecnologia segura relativo à 
evolução e ao suporte, pois possui um Long Term Support 
(LTS) da Microsoft, e isso significa que será suportado por um 
longo prazo.
• Multiplataforma: suportado pelos sistemas operacionais 
U1 - Framework: conceitos básicos no desenvolvimento web 13
Windows, Linux e macOS, com possibilidade de ser portado 
para outros sistemas.
1.4 Startup da Aplicação ASP.NET Core
Uma aplicação ASP.NET Core inicia por meio de uma classe que, 
por convenção, é chamada de Startup. Como facilitador, podemos 
desenvolver classes de inicialização diferentes de acordo com o 
ambiente de execução. Para possibilitar a execução da classe Startup 
dentro do contexto de uma aplicação, é necessário que haja a 
implementação de um método de configuração, como opcional, 
também podemos implementar um método que servirá para 
configuração dos serviços. Vamos entender as diferenças entre eles, as 
características próprias e também suas assinaturas (SMITH, 2017).
1.4.1 Método de configuração
O método de configuração servirá para especificar como uma 
aplicação ASP.NET responderá as requisições HTTP. Em vias gerais, o 
método de configuração permitirá que o desenvolvedor defina como 
a aplicação processará as requisições geradas pelos navegadores, 
habilitando ou não recursos para isso. Estes recursos são chamados de 
Middleware e serão discutidos logo mais.
1.4.2 Método de configuração de serviços
Sendo opcional, podemos utilizá-lo para iniciar alguns pré-requisitos 
necessários aos serviços que serão estabelecidos por meio do método 
de configuração, dessa forma, devemos compreender que, mesmo 
sendo opcional, o método de configuração de serviços será chamado 
antes do método de configuração.
1.5 Analisando o Start da aplicação
Considerando a criação de uma aplicação ASP.NET Core na versão 
2, teremos ao menos duas classes, a primeira camada Startup, que 
corresponderá à classe inicialização de nossa aplicação, já a segunda, 
a classe Program, que corresponde ao ponto de inicialização de nossa 
aplicação. Não devemos confundi-las, uma configura o funcionamento 
de nossa aplicação, já a outra corresponde ao ponto de inicialização da 
nossa aplicação no contexto de execução (SMITH, 2017). 
Vejamos inicialmente a classe Program, que servirá, como já dito, 
como ponto de inicialização da nossa aplicação:
U1 - Framework: conceitos básicos no desenvolvimento web14
Fonte: elaborado pelo autor.
Quadro 1.1 | Ponto de entrada da aplicação ASP.NET CORE
Já a classe de inicialização (Startup.cs) tem um grau de complexidade 
maior, visto que define mais parâmetrosde configuração. A ativação 
e configuração de mais serviços pode aumentar drasticamente a 
complexidade dela, mas de modo geral os recursos que ativaremos em 
nosso exemplo são aplicáveis para a maioria das aplicações, vejamos 
o código:
Fonte: elaborado pelo autor.
Quadro 1.2 | Configurações através da classe Startup
U1 - Framework: conceitos básicos no desenvolvimento web 15
Devemos compreender que, por meio dessas duas classes 
conseguimos configurar o funcionamento do servidor web que 
hospedará a nossa aplicação, bem como ativar recursos que 
sustentarão o funcionamento da aplicação.
1.6 Middleware
Para possibilitar uma maior flexibilidade na construção de uma 
aplicação web, a tecnologia ASP.NET Core dispõe de um conceito 
chamado de Middleware que, em vias gerais, possibilita que elementos 
computacionais sejam ativados para processar uma requisição, 
possibilitando, dessa forma, que cada um destes possa manipular 
a requisição e/ou gerar conteúdo de resposta, permitindo ainda 
interromper a continuidade do processamento de uma requisição 
(ANDERSON; SMITH, 2017).
1.7 Arquivos estáticos
 Todo e qualquer recurso que não necessite de processamento 
pelo servidor para que haja a entrega ao cliente, que na maioria dos 
casos será um navegador, serão chamados de arquivos estáticos. 
Como exemplo podemos destacar arquivos de mídia, arquivos de 
marcação HTML/XML ou script em JavaScript. Para possibilitar essa 
entrega, devemos ativar esse recurso por meio da classe de Startup, e 
então utilizar uma pasta chamada wwwroot para armazenamento, isso 
para uma configuração padrão (ROTH; ANDERSON; LUTTIN, 2017). 
Vejamos como ativaremos esse recurso por meio da classe Startup.
cs:
Fonte: elaborado pelo autor.
Quadro 1.3 | Habilitando arquivos estáticos
U1 - Framework: conceitos básicos no desenvolvimento web16
1.8 Servidor
Dentro da arquitetura existente na web, encontramos a topologia 
Cliente/Servidor, na qual basicamente a figura do cliente é o navegador, 
e a figura do servidor será atendida por algum componente de software 
capaz de responder as solicitações dos clientes, isso possivelmente por 
meio do protocolo HTTP e suas variações.
Aplicações ASP.NET Core rodam em processos de 
implementações de servidores HTTP, e atualmente dispomos de duas 
implementações capazes de hospedar e processar uma aplicação 
desenvolvida nessa tecnologia. Até para possibilitar que uma aplicação 
ASP.NET Core funcione em múltiplas plataformas, dispomos de um 
servidor web chamado Kestrel. Para ambientes Windows podemos 
utilizar algumas possibilidades, como módulo ASP.NET Core, que roda 
por trás do IIS, que é uma implementação do servidor web construído 
pela Microsoft. Destacamos a versão HttpSys e WebListener como outra 
implementação para sistemas operacionais Windows. O que devemos 
entender é que cada uma dessas implementações disponibiliza mais 
ou menos recursos, também existem diferenças sobre o melhor 
cenário, em quesitos de performance, segurança ou capacidade de 
gerenciamento (DYKSTRA, 2017).
Para saber mais
Para saber mais a respeito da linguagem de programação C# e o 
framework .NET Core, acompanhe uma trilha de estudo com o título 
“Gruía de C#”, fornecido pela Microsoft. Para isso, utilize o link a seguir: 
<https://docs.microsoft.com/pt-br/dotnet/csharp/index>.
Questão para reflexão
Qual é a diferença entre framework e biblioteca?
Atividades de aprendizagem
1. Para possibilitar que uma aplicação ASP.NET Core execute, precisamos 
que isso ocorra através de um servidor web. Para possibilitar que a tecnologia 
em questão pudesse ser multiplataforma, o que significa a possibilidade 
U1 - Framework: conceitos básicos no desenvolvimento web 17
de rodar em vários ambientes como sistemas operacionais distintos ou 
mecanismos de hospedagem, então houve a implementação de um servidor 
capaz de ser multiplataforma. Qual o nome do servidor web disponibilizado 
pela Microsoft para tal feito?
a) IIS.
b) Kestrel.
c) HttpSys.
d) Apache.
e) WebListeners.
2. A representação de um dado na programação está diretamente 
relacionada à utilização de variável, então é natural que, ao projetarmos 
um algoritmo a quantidade e os tipos de variáveis estarão relacionados a 
alguma lógica. Qual é a justificativa para a declaração de uma variável e a 
definição do seu tipo?
U1 - Framework: conceitos básicos no desenvolvimento web18
Seção 2
Compreendendo a programação
Introdução à seção
Nesta seção, vamos compreender como a programação de 
conteúdo dinâmico para web ocorre com o uso da tecnologia ASP.
NET Core, para isso, veremos como mesclamos conteúdos estáticos 
com linguagem de programação, e como isso tudo gerará conteúdos 
dinâmicos que poderão ser consumidos nos navegadores.
2.1 Definindo Razor
Primeiramente devemos compreender o que é a sintaxe Razor 
para então avançarmos nos conceitos que a norteiam. A correta 
interpretação sobre a sintaxe Razor pode ser definida da seguinte 
maneira: Razor é uma sintaxe de marcação para códigos que rodam do 
lado do servidor, isso para páginas web. Então, a sintaxe Razor consiste 
em uma marcação Razor, que possui características próprias, que 
permite a inclusão de código C# em arquivos de marcação contento 
HTML. Esses arquivos possuem a extensão “.cshtml” (MULLEN; 
ANDERSON, 2017).
A linguagem padrão do Razor é o HTML, dessa forma, o seguinte 
código será interpretado inteiramente como um arquivo HTML, 
vejamos: 
Fonte: elaborado pelo autor.
Quadro 1.4 | Utilizando HTML no Razor
Como já falado, Razor suporta a utilização da linguagem de 
programação C#, permitindo, assim, a criação de conteúdos dinâmicos. 
Como também já mencionado, a linguagem padrão do Razor é HTML, 
e quando há necessidade da inclusão de código C# devemos utilizar 
o símbolo @ (arroba). A inclusão de C# implicará a avaliação e no 
processamento desse código, gerando, na maioria das vezes, código 
HTML. Dessa forma, devemos compreender que o Razor permite que 
alternemos códigos estáticos em linguagem de marcação HTML que, 
U1 - Framework: conceitos básicos no desenvolvimento web 19
quando processados gerarão como resultado o próprio conteúdo 
HTML, já quando houver código em C#, haverá um processamento 
e a geração de um conteúdo dinâmico (MULLEN; ANDERSON, 2017). 
2.2 Blocos de código
Para a inclusão de um bloco de código devemos iniciá-lo utilizando 
o @ e acrescentar as chaves de abertura { e de fechamento }, assim 
como definirmos um bloco em C#. Dentro dessa estrutura, devemos 
utilizar código válido em C#, não gerando conteúdo de marcação 
algum. Ao definirmos uma variável dentro desse bloco, ela estará visível 
em todo o documento Razor. Vejamos no exemplo a seguir como 
podemos utilizá-lo (MULLEN; ANDERSON, 2017):
Fonte: elaborado pelo autor.
Quadro 1.5 | Mesclando HTML e C# 
2.3 Estruturas de controle
Para atender aos mais complexos fluxos podemos utilizar todas as 
estruturas de controle disponíveis em C#, tudo isso no documento 
Razor. Perceba que para utilizá-las devemos apenas incluir o caractere 
@ (MULLEN; ANDERSON, 2017). 
U1 - Framework: conceitos básicos no desenvolvimento web20
Fonte: elaborado pelo autor.
Quadro 1.6 | Controlando fluxo na visão 
Perceba que apenas a estrutura de repetição for que iniciamos com 
o @, isso porque sempre que houver um bloco de código em Razor 
entende-se que haverá código C#, sendo assim, as demais instruções 
em C# foram compreendidas corretamente, Dentro dessa lógica, 
Razor define que podemos gerar conteúdo de marcação utilizando o 
que chamamos de transição implícita. Veja que no bloco do primeiro if 
geramos um conteúdo HTML, e isso é reconhecido automaticamente. 
Também podemos utilizar a transição delimita explicitamente, para 
isso, utilizamos uma marcação com uma tag chamada text, perceba 
isso no segundo bloco de código. Ainda podemos utilizar a transição 
explicita de linha, como pode ser observado nas saídas de HTML 
geradas nos cases definidos dentro da estrutura de seleção switch 
(MULLEN;ANDERSON, 2017). 
O processo de transição entre linguagem de programação C# e 
linguagem de marcação HTML tende a ser tranquilo, visto as várias 
formas de flexibilização disponibilizadas pela tecnologia. 
2.4 Diretivas
Diretivas Razor são representadas por expressões implícitas e 
palavras-chave precedidas pelo símbolo @. Utilizamos a diretiva @
using para importação de recursos externos ao nosso projeto, como o 
código apresentado no quadro 1.5 (MULLEN; ANDERSON, 2017). 
Outra importante diretiva é a @model, que permite que seja 
U1 - Framework: conceitos básicos no desenvolvimento web 21
definido qual o tipo do modelo que será manipulado pela página 
Razor, vejamos o seguinte exemplo, nele encontraremos uma página 
que, por objetivo, deve apresentar os dados da um objeto da classe 
aluno. Devemos compreender que o modelo dessa página servirá para 
permitir que a ferramenta auxilie no processo de mesclagem entre 
código C#, baseado na classe modelo, e linguagem de marcação 
HTML. Para isso, observaremos dois arquivos, um com extensão .cs, 
no qual será codificado a classe Aluno e outro com extensão .cshtml, 
no qual codificaremos a nossa página Razor. 
Fonte: elaborado pelo autor.
Quadro 1.7 | Definindo a classe modelo Aluno
A classe Aluno, como já observado, representará o modelo do dado 
no qual desejamos que seja apresentado na página Razor. Vejamos 
agora como o uso da diretiva @model deve ser feito e, principalmente, 
alguns benefícios a respeito disso.
Fonte: elaborado pelo autor.
Quadro 1.8 | Criando visão baseada no modelo
U1 - Framework: conceitos básicos no desenvolvimento web22
Perceba, inicialmente, que a classe Aluno foi informada (expressão 
implícita) diretamente na diretiva @model, e para esse projeto 
chamado DemoAspNetCore, utilizamos uma subpasta chamada 
Models, então se fez necessário informar o namespace para que 
a classe fosse reconhecida. Não estamos aqui discutindo como o 
objeto que será acessado através da variável de contexto @Model será 
gerado e passado, isso porque entraríamos na discussão do modelo 
de desenvolvimento, no qual veremos uma das formas, na sequência 
(MULLEN; ANDERSON, 2017). 
Existem algumas vantagens na utilização da diretiva @model, pois 
a partir do momento que é estabelecido o modelo de uma página 
Razor, então, a ferramenta (que no meu caso é o Visual Studio) passará 
a auxiliar na codificação, permitindo maior produtividade e também 
evitando erros, isso porque haverá uma checagem de todo o código, 
e havendo o acesso a algum membro não válido para Aluno, então, 
o compilador indicará. Vejamos essa consideração em evidência 
por meio de uma pequena adaptação ao nosso código (MULLEN; 
ANDERSON, 2017).
Fonte: elaborado pelo autor.
Quadro 1.9 | Checagem da visão pelo compilador
Perceba que ao invés de acessarmos o atributo Cpf, estamos 
indicando o acesso ao atributo Cpfs que, conforme observação ao 
modelo, percebemos que não existe, veja que até mesmo a coloração 
ficou diferenciada. Como resultado do processo de compilação, a 
seguinte mensagem é apresentada:
U1 - Framework: conceitos básicos no desenvolvimento web 23
Fonte: elaborado pelo autor.
Quadro 1.10 | Resultado da compilação após checagem da visão
Sever-
ity
Code Description Project File Line
Suppression 
State
Error CS1061
‘Aluno’ does not 
contain a defi-
nition for ‘Cpfs’ 
and no extension 
method ‘Cpfs’ 
accepting a first 
argument of type 
‘Aluno’ could be 
found (are you 
missing a using 
directive or an 
assembly refer-
ence?)
De-
moAspNet-
Core
C:\Us-
ers\x-admin\ 
\demo-src\
DemoAspN-
etCore\De-
moAspNet-
Core\Pages\
AlunoView.
cshtml
17 Active
Já a diretiva @functions permite que qualquer código C# seja 
definido, exceto instruções que, neste caso, devemos utilizar os blocos 
de códigos. Para melhor entendimento, considere o seguinte exemplo, 
ele mostrará a utilização desses dois recursos (MULLEN; ANDERSON, 
2017).
U1 - Framework: conceitos básicos no desenvolvimento web24
Fonte: elaborado pelo autor.
Quadro 1.11 | Utilizando a diretiva @functions
2.5 Páginas Razor
Utilizamos as páginas Razor para construir aplicações web em 
cenários focados nas páginas, algo mais simples e intuído, isso 
porque a tecnologia ASP.NET Core possui total suporte para o 
padrão arquitetural MVC. Este padrão possibilita o desenvolvimento 
de aplicações separando em três grupos de recursos, os modelos 
que representam os dados manipulados, os controles que executam 
ações de controle sobre o fluxo de interações geradas pelos usuários 
da solução e, por último, tempo, as visões, que correspondem aos 
recursos que representam aquilo que o usuário visualizará. Vale o 
destaque que esse padrão se apresenta como um ótimo modelo para 
desenvolvimento web, e que será devidamente abordado na Unidade 
4 (ANDERSON; NOWAK, 2017).
Para introduzirmos o conceito de páginas Razor, vamos avaliar o 
U1 - Framework: conceitos básicos no desenvolvimento web 25
seguinte conteúdo escrito, utilizando a sintaxe Razor, e que tem por 
objetivo a geração de um conteúdo HTML apresentando a tabulada de 
um número que, neste caso, é a tabuada do três, vejamos o código:
Fonte: elaborado pelo autor.
Quadro 1.12 | Criando uma página Razor
A primeira característica de destaque é a diretiva @page, que habilita 
o arquivo para ser acessado através do navegador sem a necessidade 
U1 - Framework: conceitos básicos no desenvolvimento web26
de criação de um elemento de controle ou qualquer outro tipo de 
configuração. Neste exemplo utilizamos a criação da visão (HTML + 
Razor cshtml) e o modelo (classe TabuadaModelo), ambos dentro de 
um mesmo arquivo, mas a tecnologia possibilita que arquivos sejam 
gerados separadamente, HTML + Razor em arquivos cshtml, já as 
classes modelos em arquivos cs (ANDERSON; NOWAK, 2017).
Para saber mais
Mecanismos de segurança focados na identificação e autorização 
de usuários para execução de ações em uma aplicação web são 
fundamentais, pois este ambiente é muito hostil quando avaliamos 
as possibilidades de ataques hackers. Como sugestão, leia o artigo “O 
novo modelo de segurança do ASP.NET Core” escrito pelo autor Rafael 
Paschoal de Carvalho, ele vai conceitualizar uma das abordagens de 
segurança disponíveis no ASP.NET Core. Para acessar utilize o seguinte 
link: <http://netcoders.com.br/o-novo-modelo-de-seguranca-do-
asp-net-core/>. Acesso em: 12 set. 2017.
Questão para reflexão
Existem outras formas para desenvolvermos as nossas aplicações ASP.
NET Core sem utilizarmos páginas Razor?
Atividades de aprendizagem
1. As páginas Razor possibilitam a construção de conteúdos dinâmicos 
utilizando a sintaxe Razor. Qual a função do modelo definido utilizando a 
diretiva @model? 
a) Persistir dados automaticamente na base de dados.
b) Criar facilitadores para persistência de dados.
c) Facilitar a construção de conteúdo dinâmico baseado no modelo.
d) Possibilitar a carga automática da base de dados.
e) Criar facilitadores para carregar dados.
2. A estruturação de um código traz algumas vantagens significativas, 
citadas e visualizadas por meio da refatoração efetuada. Assinale a alternativa 
incorreta relativo à modularização:
a)Possibilidade de reutilização de código.
U1 - Framework: conceitos básicos no desenvolvimento web 27
b) Complexidade nas técnicas utilizadas.
c) Aumento de legibilidade.
d) Associa-se, necessariamente, a técnicas mais simples de programação.
e) Potencializa a organização do código.
Fique ligado
Nesta unidade estudamos:
- Conceito de framework.
- Introdução ao .NET Core.
- Tecnologia ASP.NET Core.
- Programação Web com Razor.
Para concluir o estudo da unidade
Caro aluno, estamos finalizando esta unidade! Por meio dela, você 
pôde observar como o conceito de modularização por framework 
é algo extremamente funcional, podemos ainda compreender 
como a tecnologia .NET Core flexibiliza o desenvolvimento, por ser 
multiplataforma, e independente do sistema operacional Windows. 
Abordamos algunsconceitos relevantes sobre a tecnologia ASP.NET 
Core, carro-chefe para desenvolvimento web, fornecido também pela 
Microsoft, e, então, concluímos compreendendo uma das faces do 
desenvolvimento web, utilizando, para isso, a sintaxe de marcação 
Razor. 
Atividades de aprendizagem da unidade
1. Para a construção de aplicações web, podemos utilizar recursos que 
necessitam de processamento, por exemplo, podemos citar imagens, 
vídeos, ou arquivos como HTML e CSS. Para isso, em ASP.NET Core, 
devemos ativar um recurso que permitirá que esse tipo de conteúdo seja 
exposto. Assinale a alternativa que corretamente define como devemos 
fazer isso:
a) Na classe Program através da instrução app.EnableStaticFiles().
b) Na classe Startup através da instrução app.EnableStaticFiles().
c) Na classe Startup através da instrução app.UseStaticFiles().
d) Na classe GlobalConfig através da instrução app.UseStaticFiles().
e) Através do arquivo de configuração appsettings.json adicionando o 
conteúdo "StaticFiles": true.
U1 - Framework: conceitos básicos no desenvolvimento web28
2. Qual a função do recurso chamado middleware para a tecnologia ASP.
NET Core?
a) Permitir que haja balanceamento de carga nos servidores automaticamente.
b) Possibilitar a comunicação com bibliotecas nativas do sistema operacional 
hospedeiro.
c) Habilitar mecanismos para conversação com bibliotecas escritas em 
versões anteriores à da aplicação em desenvolvimento.
d) Possibilitar que componentes de inteligência processem as requisições, 
podendo ou não gerar a saída (resultado do processamento).
e) Permitir que uma aplicação ASP.NET Core funcione em servidores web 
construídos para outras tecnologias.
3. As diretivas são utilizadas no Razor para vários fins, para indicar o uso de 
namespace, para adicionar novos blocos de código ou então tipos de dados 
internos a nossa página, e ainda podemos utilizar para indicar o tipo de dado 
referente ao modelo que será necessário para codificar a página. Assinale a 
alternativa que corretamente define a diretiva de modelo:
a) @using.
b) @Model.
c) @model.
d) @type.
e) @import.
4. Podemos adicionar códigos diretamente em nossos arquivos Razor, para 
isso, podemos utilizar a diretiva de funções ou então a declaração de bloco 
de códigos. Assinale a alternativa que apresenta corretamente a forma com 
que poderíamos fazer a declaração de ambos:
a) Bloco de Código: @{ } – Diretiva de Funções: @functions { }
b) Bloco de Código: @code { } – Diretiva de Funções: @functions { }
c) Bloco de Código: @code { } – Diretiva de Funções: @function { }
d) Bloco de Código: @block { } – Diretiva de Funções: @functions { }
e) Bloco de Código: @block { } – Diretiva de Funções: @function { } 
5. Para configurarmos a aplicação, de forma geral, podemos utilizar a classe 
Startup, disponível exatamente para isso. A partir dessa classe, poderemos 
exercer dois tipos de configuração e, para isso, são disponibilizados dois 
métodos: Configure e ConfigureServices.
Assinale a alternativa que define conceitualmente quando utilizaremos um 
e/ou outro método de configuração:
a) Não há distinção, podemos optar conforme acharmos mais apropriado.
b) As configurações gerais são feitas no método Configure, já o método 
U1 - Framework: conceitos básicos no desenvolvimento web 29
ConfigureServices será utilizado para aplicações do tipo Web Service.
c) As configurações de acesso a banco serão feitas necessariamente no 
método Configure, já o método ConfigureServices será utilizado para 
aplicações do tipo Web Service.
d) Configuramos os Web Services no método Configure, já o método 
ConfigureServices nós os ativamos.
e) No método Configure especificamos como a aplicação responderá às 
requisições, já o método ConfigureService utilizamos para inicializar 
alguns pré-requisitos necessários.
U1 - Framework: conceitos básicos no desenvolvimento web30
Referências
ANDERSON, Rick; NOWAK, Ryan. Introduction to Razor Pages in ASP.NET Core. Microsoft, 
15 ago. 2017. Disponível em: <https://docs.microsoft.com/en-us/aspnet/core/mvc/razor-
pages>. Acesso em: 20 ago. 2017.
ANDERSON, Rick; SMITH, Steve. ASP.NET Core Middleware Fundamentals. Microsoft, 14 
ago. 2017. Disponível em: <https://docs.microsoft.com/en-us/aspnet/core/fundamentals/
middleware>. Acesso em: 20 ago. 2017.
BOOCH, Grady; RUMBAUGH, James; JACOBSON, Ivar. UML: Guia do usuário. Rio de 
Janeiro: Campus, 2012.
DYKSTRA, Tom et al. Web server implementations in ASP.NET Core. Microsoft, 3 ago. 
2017. Disponível em: <https://docs.microsoft.com/en-us/aspnet/core/fundamentals/
servers/?tabs=aspnetcore2x>. Acesso em: 10 ago. 2017.
LANDER, Rich. Guia da plataforma .NET. Microsoft, 31 out. 2016. Disponível em: <https://
docs.microsoft.com/pt-br/dotnet/articles/standard/>. Acesso em: 2 ago. 2017.
MULLEN, Taylor; ANDERSON, Rick. Razor syntax for ASP.NET Core. Microsoft, 4 jul. 
2017. Disponível em: <https://docs.microsoft.com/en-us/aspnet/core/mvc/views/razor>. 
Acesso em: 10 ago. 2017.
ROTH, Daniel; ANDERSON, Rick; LUTTIN, Shaun. Introduction to ASP.NET Core. 
Microsoft, 3 ago. 2017. Disponível em: <https://docs.microsoft.com/en-us/aspnet/core/>. 
Acesso em: 9 ago. 2017.
SMITH, Steve et al. Application Startup in ASP.NET Core. Microsoft, 1 mar. 2017. Disponível 
em: <https://docs.microsoft.com/en-us/aspnet/core/fundamentals/startup>. Acesso em: 
5 ago. 2017.
Unidade 2
Tecnologias para 
programação web
Considerando toda a complexidade existente para a plataforma 
web, a proposta desta unidade é a utilização de uma linguagem 
didática e instrutiva, buscando a simplicidade nas abordagens das 
seções e desenvolvendo alguns assuntos contidos na ementa 
da disciplina de Programação para web II. Além disso, dentro da 
metodologia adotada, busca-se o objetivo de inserir o aluno ao 
contexto de desenvolvimento de aplicações web para que ele se 
familiarize com as etapas e desafios deste universo.
Objetivos de aprendizagem
Anderson Emidio de Macedo Gonçalves
Grande parte do conteúdo criado para a internet é acessada por navegadores 
web por meio do protocolo HTTP ou HTTPS.
Serão abordadas, nesta seção, as características básicas que envolvem os 
padrões do HTML5, padrão utilizado no desenvolvimento web.
Seção 1 | Padrão HTML5
Será abordada, nesta seção, o CSS, uma linguagem de folhas de estilos em 
cascata, utilizada em toda etapa de design de uma página web. Além disso, o CSS é 
um padrão altamente utilizado na arquitetura web e anda junto em muitos aspectos 
com o HTML5, pois o CSS precisa do HTML5 para que suas funcionalidades 
tenham efeito. Veremos os conceitos, características e os principais comandos do 
CSS, na Seção 2, desta unidade de ensino.
Esta seção também abordará algumas técnicas do Java Script. Java 
Script é uma linguagem de programação para web baseada em SCRIPT que 
também é utilizada em conjunto com o HTML5. O JS, como é popularmente 
Seção 2 | Estilo CSS e Java Script
conhecido, pode ser utilizado para acessar algumas áreas de uma página HTML 
ou para desempenhar alguns recursos específicos, importantes somente para esta 
tecnologia.
Portanto, nesta seção, será abordada a parte conceitual do Java Script, 
assim como as suas principais características e formas de utilização que serão 
apresentadas especificamente com elementos do HTML5.
A linguagem de programação orientada a objetos PHP, vem sendo bem 
utilizada no mercado web por características como: recursos modernos, fácil 
sintaxe e desempenho no tráfego das informações específicas do lado servidor.
Nesta seção serão abordados alguns conceitos, principais características e 
alguns exemplos de páginas com funções em PHP.
Seção 3 | Linguagem PHP
Introdução à unidade
Atualmente existem várias tecnologias e ferramentas que auxiliam 
o desenvolvimento web. A proposta desta unidade de ensino é 
abordar algumas destas tecnologias, apresentando suas características 
e funcionalidades, contextualizando por meio de exemplos de 
utilização. Serão abordadas tambémalgumas ferramentas com 
recursos poderosos que auxiliam o profissional de arquitetura web no 
cumprimento de suas atividades.
Esta unidade de ensino abordará características de descrição e 
funcionalidades de três tecnologias para programação web, são elas: 
HTML5, CSS e Java Script. Além de aplicar alguns exemplos em PHP, 
uma linguagem de programação para web utilizada no mercado 
profissional de TI.
U2 - Tecnologias para programação web34
Seção 1
Padrão HTML5
Introdução à seção
Atualmente grande parte do conteúdo que está disponível na 
internet necessita de comandos HTML para ser apresentado e mostrado 
ao usuário final. Diversos aplicativos de utilização diária, como editores 
de textos, foram desenvolvidos por meio de uma linguagem de 
marcação. No entanto, não conseguimos visualizá-los, porque, como 
as linguagens de programação, o código fonte de uma página web, 
por exemplo, não é explícito ao usuário final. Sabemos que está por 
trás da interface apresentada, mas não temos acesso à sua codificação 
tão facilmente.
Nesta seção, abordaremos algumas características e comandos 
que foram criados especificamente para o HTML5. Geralmente não 
existe dificuldade demasiada para migração de HTML para HTML5, por 
exemplo. Basta saber posicionar o que deseja entre uma tag de abertura 
e uma tag de fechamento. Essas tags são chamadas de container. Esse 
container, por sua vez, vai aplicar as configurações do texto, imagem, 
gráfico, arquivos de mídia ou qualquer conteúdo que possa ser exibido 
em uma página web (SANDERS, 2012).
Fonte: elaborada pelo autor.
Figura 2.1 | Containers em HTML5
U2 - Tecnologias para programação web 35
A Figura 2.1, ilustra alguns containers da estrutura de HTML5, CSS, 
Java Script e PHP.
Repare que na parte superior da Figura 2.1 o nome do arquivo está 
com extensão .php. Se você editar este arquivo e salvar como HTML, 
ele funcionará com exceção do trecho que está entre as tags <?php 
?>, pois esta tag é específica para comandos PHP e o arquivo tem que 
estar salvo nesta extensão. Enfim, existem várias particularidades entre 
arquivos de códigos fontes híbridos, isto é, contendo várias linguagens.
1.1 Novos elementos em HTML5
A linguagem HTML é composta por tags. Uma tag é descrita em 
um código fonte HTML entre caracteres especiais "<>", por exemplo: 
<h1> Texto inserido </h1>. Tudo que está entre as tags de início e 
fechamento será formatado ou executado de acordo com a regra da 
própria tag, no caso, h1. Ainda dentro de uma tag, temos os elementos 
e os atributos. Os elementos são os diferentes tipos de tags existentes, 
e os atributos são as características que podemos alterar para cada 
elemento.
Fonte: Sanders (2012, p. 9).
Figura 2.2 | Elementos em HTML5
U2 - Tecnologias para programação web36
O número de elementos é bem extenso. Na Figura 2.2 e 2.3 estão 
presentes alguns deles. 
Fonte: Sanders (2012, p. 10).
Figura 2.3 | Elementos em HTML5
Dentre as novas tags criadas para o padrão HTML5, vale a pena 
destacar que elas trabalham em conjunto com as tags CSS e ou Java 
Script, além disso, elas têm autonomia para exercer sua funcionalidade 
sozinhas.
Depois de conhecer um pouco das novas tags, é importante 
aplicar para que você aprenda a funcionalidade destas tags na prática. 
Sugerimos a você que comece a escrever um código em HTML e faça 
o teste destas tags.
É importante também, como estamos falando de desenvolvimento 
web, que o teste seja feito em mais do que um navegador.
U2 - Tecnologias para programação web 37
Questão para reflexão
Analise a utilização das tags a seguir:
 <center>
 <spacer
 <font>
Estas e outras tags são consideradas tags inválidas para o HTML5. Elas 
foram substituídas por outras estruturas. Por exemplo, a tag font pode 
ser utilizada de outra maneira com um comando de CSS. Podemos 
concluir que novas versões de linguagens e aplicativos contêm, além de 
comandos e funcionalidades novas, correções de alguns bugs pontuais.
1.2 Diferentes navegadores
Uma grande dificuldade de quem desenvolve para web é fazer com 
que o seu website se comporte da mesma maneira na maioria dos 
navegadores existentes no mercado. É um desafio nada fácil, pois foram 
criados muitos navegadores desde o surgimento da internet. Enquanto 
os desenvolvedores estão apenas preocupados em fazer o seu sistema 
funcionar nos navegadores de sua preferência, acabam esquecendo 
que os usuários comuns podem utilizar outros navegadores para 
acessar o seu website. Isso também pode ser um problema.
Outra condição na atualidade é o fato de existirem vários dispositivos 
de acesso à web, como smartphones, tablets além de computadores 
comuns, isto afeta diretamente a responsividade. A responsividade é 
um recurso que pode ser implementado, fazendo as adequações de 
interfaces automaticamente, conforme o dispositivo que está sendo 
utilizado para visualização de uma página web.
Como foi mencionado, existem vários navegadores à disposição do 
público em geral para acesso à web. A Microsoft, por exemplo, criou 
o Internet Explorer (IE), A Apple, o Safari, o Google, o Chrome e assim 
por diante.
Vamos apresentar, nesta seção, alguns navegadores existentes no 
mercado e algumas de suas características.
Vamos começar falando um pouco sobre o Internet Explorer.
U2 - Tecnologias para programação web38
Fonte: elaborada pelo autor.
Figura 2.4 | Navegador Internet Explorer (IE)
Por questões apenas de padronização todos os navegadores aqui 
apresentados estarão com o Google carregado: <http://www.google.
com.br>.
O Internet Explorer é o navegador padrão da Microsoft. Atualmente, 
a versão mais recente é a versão EDGE, apresentada na Figura 2.5.
Fonte: elaborada pelo autor.
Figura 2.5 | Navegador Internet Explorer (versão EDGE)
U2 - Tecnologias para programação web 39
O navegador FireFox, da Mozilla, exibido na Figura 2.6, veio do 
antigo e famoso Netscape e foi lançado em meados da década de 
1990. O FireFox também tem suporte ao HTML5.
Fonte: elaborada pelo autor.
Figura 2.6 | Navegador FireFox Mozilla
Na Figura 2.7 é exibida o famoso Google Chrome, um dos 
navegadores mais populares da atualidade.
Fonte: elaborada pelo autor.
Figura 2.7 | Navegador Google Chrome
U2 - Tecnologias para programação web40
O google ficou mundialmente famoso por meio de vários de seus 
recursos. Aplicativos como tradutores, buscas e mapas, deixaram este 
navegador muito atraente para os seus usuários. O Chrome, a exemplo 
dos outros navegadores, também possui suporte ao HTML5.
Outros navegadores existentes como Opera, Safari, Iron entre 
outros, também possui suporte às novas tags e recursos do HTML5, 
isto significa que se você está utilizando HTML5 em suas páginas, pode 
ficar tranquilo, pois existe suporte por quase todos os navegadores 
disponíveis no mercado (SANDERS, 2012).
Para saber mais
Algumas das principais funcionalidades dos navegadores web estão 
presentes em quase todos os existentes, porém, existe algumas 
particularidades: acesse este link: <http://g1.globo.com/tecnologia/
noticia/2011/06/saiba-mais-sobre-os-principais-navegadores-de-
internet.html>, e veja um comparativo sobre os principais navegadores 
existentes na web. Vale a pena.
Atividades de aprendizagem
1. Uma grande parte do conteúdo disponível e criado para a internet está 
em HTML, porém, existem outras tecnologias que associam recursos e 
complementam as páginas da web. De acordo com estas informações, a 
linguagem HTML é considerada uma linguagem de que tipo?
Assinale a alternativa correta:
a) Linguagem de marcação de hipertexto.
b) Linguagem de programação orientada a objetos.
c) Linguagem de programação estruturada.
d) Linguagem de script de comandos.
e) Pseudolinguagem utilizada em arquivos HTML.
2. A linguagem HTML é composta por tags. Uma tag é descrita em um 
código fonte HTML entre caracteres especiais "<>", por exemplo: <h1> 
Texto inserido </h1>. Tudo que está entre as tags de início e fechamento 
será formatado ou executado de acordo com a regra daprópria tag, no 
caso, h1. Ainda, dentro de uma tag, temos os elementos e os atributos. Os 
elementos são os diferentes tipos de tags que temos e os atributos são as 
características que podemos alterar para cada elemento.
U2 - Tecnologias para programação web 41
Paralelamente a isto existem novas tags, ou novos elementos que foram 
criados especificamente para o HTML5. Analise as alternativas e assinale 
a opção correta que contenha apenas elementos específicos do HTML5.
a) <article> <aside> <audio> <canvas>.
b) <html> <embed> <figure> <footer>.
c) <article> <aside> <mark> <h1>.
d) <footer><hgroup><keygen><table>.
e) <sql><article><keygen><canvas>.
U2 - Tecnologias para programação web42
Seção 2
Estilo CSS
Introdução à seção
O CSS, que significa Cascading Style Sheets, ou folhas de estilo 
em cascata, em português, é uma especificação que define como os 
elementos de uma página web serão apresentados.
No decorrer desta seção serão apresentados alguns comandos e 
exemplos desta tecnologia de design da arquitetura web.
2.1 Introdução ao CSS
O CSS trabalha em conjunto com o HTML, pois dentro do próprio 
HTML podemos inserir comandos em estilo CSS. Procurando dar uma 
visão prática, vamos para algumas características de funcionamento 
do CSS.
Em primeiro lugar é preciso dizer ao documento HTML que ele 
precisa aceitar comandos em CSS. Este processo é realizado por meio 
da tag: <link rel="stylesheet">.
Dentro do código fonte HTML é simples fazer esta referência, e 
ela pode ser feita de duas maneiras diferentes. Uma é fazer referência 
ao código CC3 dentro do próprio arquivo e a outra maneira é fazer 
referência a um arquivo externo. O comportamento em relação à 
execução dos comandos será o mesmo, mas a organização dos 
comandos será feita de forma diferente. Enfim, são possibilidades de 
trabalho com os comandos do CSS.
U2 - Tecnologias para programação web 43
Fonte: elaborada pelo autor.
Figura 2.8 | Código CSS em arquivo externo
A Figura 2.8, nos mostra, na linha 6, o link para outro arquivo com 
o nome de "estilo.css", onde existem as configurações de design de 
todo o documento index.html exibido na figura. Observe a seguir o 
conteúdo do arquivo "estilo.css".
Fonte: elaborada pelo autor.
Figura 2.9 | Código do arquivo "estilo.css"
U2 - Tecnologias para programação web44
A Figura 2.9 consta parte da configuração de CSS existente que será 
responsável pela formatação do conteúdo da página index.html no 
browser.
Vamos então apresentar está página no navegador Chrome.
Fonte: elaborada pelo autor.
Figura 2.10 | Página index.html exibida no Chrome
Incrível, não é mesmo!? O código CSS presente no arquivo "estilo.
css" formatou em forma de menu suspenso alguns países mais visitados 
do mundo todo.
O link existente no nome de cada país foi feito com a tag "href", 
mas a cor, posicionamento, fonte, tamanho da fonte etc. foi tudo 
configurado com comandos CSS.
Questão para reflexão
Analise as duas questões a seguir, refletindo como resolvê-las. 
 Pela experiência em programação web que você tem e com o 
conteúdo apresentado nesta unidade, até o momento, podemos afirmar 
que o CSS veio para ficar e é uma das tecnologias mais presente na 
atualidade, quando o assunto é interface gráfica para web. A partir desta 
colocação, reflita como fazer melhor a organização dos comandos CSS 
dentro do seu projeto web. 
 Analise também as vantagens obtidas por optar por trabalhar com 
uma ferramenta de apoio para a construção do seu CSS, por exemplo, 
o editor SUBLIME.
Sabemos que quando trabalhamos com projetos WEB, também 
precisamos manter nossos códigos e scripts devidamente organizados.
U2 - Tecnologias para programação web 45
2.2 Introdução ao Java Script
O Java Script, popularmente conhecido como JS, é uma linguagem 
de script que também, a exemplo do CSS, pode e deve ser utilizada em 
conjunto com o HTML5. Vamos apresentar algumas considerações 
e aplicações desta linguagem utilizada no desenvolvimento de um 
projeto web.
Apesar de ser outro tipo de linguagem, a forma de inseri-la dentro 
de um arquivo HTML é similar ao CSS. Temos que referenciar o arquivo 
utilizado com um link e também podemos construir comandos em JS 
dentro do próprio arquivo HTML ou em um arquivo fora dele. Baseado 
em nossa questão para reflexão do item 2.1, podemos concluir que a 
segunda maneira é a mais adequada, por questões de organização do 
código.
Fonte: elaborada pelo autor.
Figura 2.11 | Código Java Script dentro do arquivo HTML
A Figura 2.11, nos mostra, na linha 5, a tag <script> </script> para 
utilização de comandos Java Script dentro do arquivo html. Após a 
linha 20, existe a continuação deste arquivo HTML com a tag <body> 
</body>, que nos mostra como o conteúdo será exibido.
Basicamente este código JS valida a idade de uma pessoa fornecida 
em um campo input type de entrada de dados. A partir dessa idade, a 
U2 - Tecnologias para programação web46
função verificarIdade(), como pode ser observada a partir da linha 7 na 
Figura 2.11, abrirá a página do Google se a idade fornecida for acima 
de 17, caso contrário uma mensagem "Acesso proibido para menores 
de 18 anos." é apresentada no browser. Vamos às práticas através das 
imagens.
Fonte: elaborada pelo autor.
Figura 2.12 | Exibição da página index.html
A Figura 2.11 mostra a tela inicial da validação. O teste começa após 
o usuário clicar no botão "OK". Neste momento, o nosso JS entra em 
ação disparando uma mensagem na tela: "Qual a sua idade?", como 
pode ser observado na Figura 2.12.
Fonte: elaborada pelo autor.
Figura 2.13 | Mensagem do Java Script
Aplicando uma estrutura condicional composta, o algoritmo 
implementado pode tomar dois caminhos. O primeiro caso, a idade 
seja menor que 18.
Fonte: elaborada pelo autor.
Figura 2.14 | Mensagem para idade menor que 18 anos
U2 - Tecnologias para programação web 47
O segundo caminho é a idade ser pelo menos 18 anos. Neste caso, 
como já relatado, será aberta uma nova página com o endereço do 
Google resultando na imagem da Figura 2.15.
Fonte: elaborada pelo autor.
Figura 2.15 | Página exibida para maiores de idade
Como podemos constatar, é relativamente simples programar em 
Java Script dentro de páginas HTML, basta desenvolver a lógica e utilizar 
os comandos JS para deixar sua página mais profissional (SANDERS, 
2012).
Para saber mais
As tecnologias CSS e Java Script estão presentes no mercado 
profissional de desenvolvimento web e prontas para serem exploradas 
por vocês. Se você quer conhecer mais um pouco dos recursos destas 
linguagens e saber como aplicá-las, não perca tempo! Todas estas 
informações você encontra no livro Smashing HTML5: técnicas para a 
nova geração da web (2012, p. 109-233), do autor Bill Sanders. 
Atividades de aprendizagem
1. A propriedade position do CSS3 refere-se ao posicionamento usado para 
um determinado elemento HTML. 
Quais valores essa propriedade permite?
U2 - Tecnologias para programação web48
Assinale a alternativa correta:
a) public, private, default ou static.
b) top, bottom, left, right ou center.
c) bottom, left, right, wrap ou center.
d) static, relative, absolute, fixed.
e) public, protected, private, fixed.
2. Uma folha de estilo, essa seria a tradução para a sigla CSS, externa é 
ideal, pensando no reaproveitamento de código, sendo possível mudar a 
aparência de um site inteiro alterando apenas um arquivo. Com relação às 
folhas de estilo externas, considere:
I- < link rel="stylesheet" type="text/css" href="estilo.css"> 
II- < style type="text/css"> @import url("estilo.css"); 
III- < @import page="text/css" src="estilo.css"> 
IV- <@include type="text/css" href="estilo.css"> 
Considere que o arquivo CSS está no mesmo diretório da página HTML. Para 
fazer referência correta a um arquivo CSS externo, no interior do cabeçalho 
da página HTML pode-se utilizar o que é apresentado na(s) afirmativa(s):
a) I e II.
b) I, II e III.
c) III e IV.
d) I e III.
e) I e IV.
U2 - Tecnologias para programaçãoweb 49
Seção 3
Linguagem PHP
Introdução à seção
A linguagem PHP atua no lado do servidor para traduzir as 
informações armazenadas para quem está acessando uma página 
HTML5, por exemplo. Dizemos que a página está no lado cliente.
Vamos estudar algumas características desta linguagem, saber um 
pouco mais sobre como ela funciona no lado servidor e, finalmente, 
ver alguns exemplos de codificações em PHP. Vamos ao nosso estudo!
3.1 HTM5 e linguagem lado servidor
O trabalho de um servidor web é um pouco diferente, um servidor 
PHP, por exemplo, pode processar informações de várias origens e 
depois enviar para um navegador HTML. Ele pode, por exemplo, 
interagir com bancos de dados, recurso que não seria possível utilizando 
somente códigos HTML ou HTML5. Essa interação é responsável 
pelo dinamismo de grande parte do conteúdo web que acessamos 
hoje. Isto quer dizer que fatalmente estamos consultando, inserindo, 
alterando e deletando dados de um servidor a partir de páginas HTML. 
Isto só é possível por meio de um servidor web.
Entre outras palavras, o trabalho da linguagem de programação 
PHP é, além de possibilitar comandos e funções que dão vida às nossas 
páginas web, ser parte do processo de transmissão de informações por 
meio da internet.
Outro servidor web que atua no mercado é o Apache. Temos 
outros servidores também, mas o foco agora é abordar um pouco da 
linguagem PHP.
3.2 Programando em PHP
Um detalhe muito importante é a extensão do arquivo PHP. Para 
que um código na linguagem PHP venha funcionar, obrigatoriamente 
o arquivo tem que estar salvo com a extensão .php. Caso contrário o 
código não irá executar.
U2 - Tecnologias para programação web50
Fonte: elaborada pelo autor.
Figura 2.16 | Exemplo PHP parte 1
Na Figura 2.16, é apresentado um código em PHP simples. Este 
código cria algumas variáveis e testa se o nome da variável "$professor" 
é igual a "Anderson Macedo". A condição retorna o resultado lógico 
verdadeiro, pois está sendo atribuído este valor de forma fixa no código. 
Então, o nome do professor e a abreviatura da disciplina são exibidos 
na tela.
A linguagem PHP é uma linguagem fracamente tipada. Esta 
afirmação significa que as variáveis criadas em PHP não precisam 
de tipos definidos e que durante a execução do programa podem 
armazenar conteúdos de diferentes tipos de dados.
A sintaxe desta linguagem é bem simples. Isto também é um fator 
que atrai o número de desenvolvedores simpatizantes ao PHP.
Também é uma linguagem que consegue se conectar com vários 
bancos de dados disponíveis no mercado, por exemplo, o MySQL, 
banco de dados que, por sinal, foi muito aceito no desenvolvimento 
de projetos web.
U2 - Tecnologias para programação web 51
Fonte: elaborada pelo autor.
Figura 2.17 | Exemplo PHP parte 2
A Figura 2.17 exibe a página produzida pelo código da Figura 2.16. 
Como o nome do professor é o mesmo que utilizado no comando 
condicional, ele foi exibido na página.
Questão para reflexão
Analise as duas questões a seguir refletindo como resolvê-las. 
 A linguagem PHP é a mais adequada atualmente para desenvolvimento 
web, de acordo com o cenário de tecnologia da atualidade? 
 Como trabalhar com a responsividade de uma página web? Existem 
frameworks para auxílio desta tarefa?
O apelo visual para conteúdos web está presente na internet. É preciso 
considerar este requisito no desenvolvimento de um projeto web.
3.3 Funcionalidades do PHP
Já abordamos, nesta unidade, que PHP é utilizado do lado do 
servidor para realizar funções dinâmicas, como coletar dados de 
formulários, gerar páginas com informações fornecidas por uma base 
de dados etc., mas ele também possui outras funcionalidades, tais 
como:
• Escrever aplicações desktop: certamente o PHP não é 
considerado a melhor linguagem para desenvolver aplicações 
desktops, porém, para tal finalidade pode ser utilizado o PHP-
GTK, que é uma extensão do PHP para desenvolvimento em 
U2 - Tecnologias para programação web52
multiplataformas.
• Utilização em grande parte dos sistemas operacionais: o 
PHP também pode ser utilizado na maioria dos sistemas 
operacionais, como Windows, Unix, RISC OS etc. Também é 
suportado por vários servidores web do mercado. O Apache 
por exemplo suporta o PHP sem problemas.
• Outra funcionalidade é o suporte de vários SGBD da 
atualidade, por exemplo: MySQL por meio de uma conexão 
ODBC.
Para concluir, o PHP tem uma biblioteca de comandos que estão 
disponíveis para utilização em todo o processo de desenvolvimento 
web.
Para saber mais
O PHP é uma linguagem para ser trabalhada do lado do servidor, assim 
como o Java Script é uma linguagem para ser utilizada do lado do 
cliente.
A validação de um CPF é um bom exemplo para utilização de um JS, 
pois a página web não vai precisar fazer nova requisição ao servidor para 
fazer esta validação, já que o JS valida no lado do cliente.
Atividades de aprendizagem
1. De acordo com o código PHP a seguir:
Ao ser executado por um servidor web, esse código apresentará um número. 
Pegue o número apresentado e multiplique-o por 2.
Assinale a alternativa que contenha o resultado desta multiplicação.
U2 - Tecnologias para programação web 53
a) 14.
b) 15.
d) 5.
d) 7.
e) 12.
2. A declaração de variáveis em PHP também está de acordo com as boas 
práticas existentes para nomenclatura de variáveis de outras linguagens.
Os nomes que identificam as variáveis no PHP devem ser sempre iniciados 
pelo sinal de dólar "$", seguido por:
Assinale a alternativa correta:
a) um hífen.
b) um arroba.
c) qualquer dígito hexadecimal.
d) uma letra ou sinal de sublinhado.
e) qualquer caractere existente.
Fique ligado
Resumo dos itens estudados nesta unidade:
• Padrão HTML5.
• Estilo CSS e Java Script.
• Linguagem PHP.
Para concluir o estudo da unidade
O processo de desenvolvimento de uma página web, ou um 
ecommerce completo se torna muito complexo considerando 
alguns aspectos que vimos nesta unidade de ensino, como 
tecnologias utilizadas, diferentes navegadores presentes no mercado, 
responsividade entre outros.
Assim como no processo de engenharia de requisitos, para a 
criação de conteúdos web também deve-se levar em consideração 
a visão dos profissionais envolvidos no projeto, garantindo, assim, um 
alto percentual de acerto na satisfação do cliente ou usuário.
U2 - Tecnologias para programação web54
Atividades de aprendizagem da unidade
1. O servidor web é responsável por interpretar os comandos presentes em 
uma página web e realizar o seu processamento.
Assinale a alternativa que contenha um servidor web existente.
a) Delphi.
b) JSTL.
c) NetBeans.
d) Netscape.
e) Apache.
2. No desenvolvimento web, assim como no desenvolvimento em outras 
arquiteturas, existem alguns padrões de boas práticas de programação, tais 
como nomenclatura de variáveis, um código limpo e profissional, padrões 
de design etc.
Assinale a alternativa correta para o órgão no qual pessoas trabalham em 
tempo integral em busca de melhorias.
a) W3G. 
b) JSF.
c) IIF.
d) W3F.
e) W3C.
3. Assinale a linguagem que foi projetada para separar o conteúdo escrito, 
tal como HTML, de conteúdos como: layout, cores, fontes, alinhamentos, 
margens etc.?
Assinale a alternativa que contenha o nome dessa linguagem.
a) Ajax.
b) CSS.
c) Ruby.
d) JavaScript.
e) PHP.
4. Acompanhe o exemplo da construção de uma página web a seguir:
Um profissional estava desenvolvendo uma página web utilizando HTML e 
CSS em uma técnica conhecida como tableless. Ele criou o layout da página 
utilizando contêineres com bordas discretas para agrupar elementos de 
acordo com um conjunto de características. Quando adicionou elementos 
nos contêineres, percebeu que estes elementos ficavam grudados nas 
laterais da página.
Para definir, então, uma margem interna de mesma medida, em todos os 
U2 - Tecnologias para programação web 55
lados dos contêineres, utilizou um atributo CSS.
Assinale a alternativa que contenha este atributo.
a) Padding.
b) Align.
c) Margin.d) Stretching.
e) Default-margin.
5. Veja o código a seguir:
lados dos contêineres, utilizou um atributo CSS.
Assinale a alternativa que contenha este atributo.
a) Padding.
b) Align.
c) Margin.
d) Stretching.
e) Default-margin.
U2 - Tecnologias para programação web56
Referências
SANDERS, Bill. Smashing HTML5. São Paulo: Bookman, 2012.
BASHAM, Bryan; SIERRA, Kathy; BATES, Bert. Use a cabeça!: Servlets & JSP. 2. ed. Rio de 
Janeiro: Alta Books, 2008.
Unidade 3
O padrão MVC
Nesta unidade estudaremos o padrão de projeto MVC, 
exploraremos os conceitos relacionados a padrões de projetos e 
frameworks utilizados na implementação de aplicações web e que a 
cada dia se consolidam mais nas práticas de desenvolvimento sendo 
largamente utilizados nas principais tecnologias para este ambiente. 
Objetivos de aprendizagem
Como resolver problemas relacionados à implementação de soluções 
web? Com certeza teremos uma série de desafios que deverão ser enfrentados 
e que teremos que solucionar, mas graças ao exponencial crescimento de 
tecnologias, linguagens, arquiteturas e componentes em aplicação nos projetos 
de desenvolvimento web temos uma forma interessante de propor soluções, 
os padrões de projeto vêm em resposta a uma série de situações já enfrentadas 
por outras pessoas, e que, com soluções criativas, acabaram criando padrões 
largamente divulgados e utilizados como soluções para estes desafios. 
Seção 1 | Padrões de projeto
Um dos principais padrões utilizados no desenvolvimento de aplicações web 
será o foco do nosso estudo nesta seção, vamos entender o objetivo geral desse 
padrão e a função de cada uma de suas camadas, incluindo comentários sobre 
frameworks que implementam esse padrão. 
Seção 2 | O padrão MVC
Paulo Henrique Terra
Introdução à unidade
Vários aspectos relacionados à implementação de uma aplicação 
web favorecem a utilização de padrões de projetos já empregados no 
desenvolvimento de software, entre eles podemos citar a proposta 
de solução para organização de código e solução arquitetural 
lógica para separar em camadas as regras de negócio disponíveis 
em classes, métodos e/ou funções das interfaces que formarão o 
front-end responsável pela interação com o usuário final. Podemos 
citar ainda fatores relacionados à qualidade do projeto e do produto 
final de software, como a manutenibilidade proporcionada pela 
independência funcional dos módulos criados separadamente, 
cada um encapsulando sua respectiva responsabilidade, evitando 
acoplamentos desnecessários entre componentes proporcionando 
uma alta coesão desses componentes que, mais tarde, podem sofrer 
manutenção. 
A facilidade em encontrar soluções baseadas em padrões de 
projeto como o MVC, disponível e com grande qualidade nos 
principais motores de busca na interbet. e a vasta literatura contendo 
referências renomadas no assunto, gera outro fator motivacional para 
aplicação destas soluções. Pense que você não precisará “reinventar 
a roda” para organizar a estrutura lógica de sua aplicação, incluindo a 
criação do código de seu projeto web, há também grande oferta de 
mão de obra com o conhecimento em padrões comuns de projeto 
que facilitam a integração de desenvolvedores em uma equipe de 
desenvolvimento para esse tipo de projeto, até mesmo o fato da 
necessidade de capacitação de desenvolvedores utilizando padrões de 
projeto é um fator relevante a ser considerado devido à curva rápida de 
aprendizagem desses conceitos. 
Portanto, conhecer os princípios que norteiam os padrões básicos 
é de essencial importância para desenvolvedores de software, estes 
princípios darão base sólida para a tomada de decisão e utilização de 
frameworks que “concretizam” e podem ser aplicados para facilitar o 
emprego destes conceitos na criação de soluções de software. 
Sendo assim, nas seções desta unidade vamos explorar padrões de 
projeto, frameworks e, principalmente, o padrão MVC. Vamos construir 
a base do conhecimento destes conceitos para conseguirmos ganhar 
mais produtividade na construção de nossas aplicações web. 
Boa leitura!
U3 - O padrão MVC60
Seção 1
Padrões de projeto
Introdução à seção
A compreensão acerca de soluções pré-estabelecidas permite 
uma implementação de software com mais reutilização de códigos 
e componentes. Usualmente implementamos aplicações web 
utilizando linguagens de programação orientadas a objetos ou 
baseadas nos princípios deste paradigma, assim, uma das propostas 
deste paradigma é o reúso, para potencializar uma programação mais 
eficiente. Vamos abordar dois temas importantes para este propósito, 
o primeiro relacionado a padrões de projeto reforçará a ideia do uso 
de soluções comuns a um conjunto de situações, o segundo terá foco 
na concretização destas soluções comuns no formato de frameworks. 
Iniciaremos os nossos estudos e potencializaremos também os nossos 
conhecimentos. 
1.1 Design patterns
Design patterns ou simplesmente padrões projeto são soluções 
aplicadas a um grupo comum de problemas que podem ser adaptadas 
a uma série de situações enfrentadas no processo de implementação 
de aplicações web. 
Um padrão de projeto descreve um problema comum que 
ocorre regularmente no desenvolvimento de software e 
descreve então uma solução geral para esse problema 
que pode ser utilizada em muitos contextos diferentes. 
Em geral, para padrões de projeto de software, a solução é 
uma descrição de um pequeno conjunto de classes e suas 
interações (BARNES, 2004, p. 325).
Conforme definido por Barnes (2004), os padrões de projeto 
podem nos ajudar de duas maneiras, ao desenvolver uma aplicação 
de software. Inicialmente documentam boas soluções para problemas, 
de modo que essas soluções possam ser reutilizadas em problemas 
U3 - O padrão MVC 61
semelhantes, assim, a reutilização não está no nível de código-
fonte criado em uma determinada linguagem, mas sim, no nível das 
estruturas das classes. Segundo, padrões de projeto são nomeados e 
ajudam os designers de software em conversas sobre seus designs, isso 
permite economizar detalhes de uma explicação, assim, a linguagem 
padrão introduzida por padrões de projeto estabelece outro nível de 
abstração, um que permite lidar com a complexidade até em sistemas 
mais intrincados. 
Podemos citar como benefícios na utilização de padrões de 
projetos o fato de fornecerem soluções testadas e aprovadas, tornando 
as aplicações mais fáceis de entender e manter, além do fato de 
manter o desenvolvimento de módulos coesos e permitir, ainda, que a 
comunicação entre os membros do time de desenvolvimento de projeto 
torne-se mais eficiente. Apesar de todos os benefícios vale ressaltar 
que os padrões de projetos não são “receitas de bolo” prontas a serem 
utilizadas. Elas devem ser avaliadas e adaptadas à realidade do projeto 
em desenvolvimento, caso esses padrões sejam mal implementados, 
eles podem tornar-se um dificultador no entendimento do projeto, 
causando até mesmo a criação de código desnecessário, assim, é 
preciso bom senso, será necessário implementar a solução e validar o 
seu funcionamento, uma vez que ela se aplique, ela ainda poderá ser 
otimizada, ajustando-se para tratar as deficiências do projeto, para isso, 
vale o conhecimento geral sobre o projeto e o seu funcionamento.
1.2 Estrutura de um padrão
Os padrões são descritos com informações mínimas relativas 
à estrutura de classes e devem incluir uma descrição do problema 
resolvido por este padrão, além das forças contra ou a favor da 
utilização deste, o template básico deve possuir no mínimo:
 Nome: deve descrever o padrão de maneira conveniente. 
 Descrição: em relação ao problema que o padrão pretende 
solucionar (normalmente dividida em seções como intensão, 
motivação, aplicabilidade).
 Consequências: do uso do padrão, que deve prever resultados 
e compensações. 
1.3 Tipos de padrões de projeto
Conforme definido por Gamma et al. (2000), os padrões de 
projeto foram classificados em três tipos: padrões de criação,padrões 
estruturais e padrões comportamentais. 
U3 - O padrão MVC62
Os padrões de criação têm como objetivo abstrair o processo de 
criação de objetos, ou seja, a sua instanciação. Assim, eles ajudam um 
sistema a tornar-se independente, a despeito de como seus objetos 
são criados, compostos e representados. Basicamente, utiliza-se a 
herança para variar a classe que é instanciada. Por exemplo, o padrão 
Singleton garante que haverá somente uma única instância para 
uma determinada classe e esta instância é acessível de forma global 
e uniforme. Outros padrões de criação são: Abstract Factory, Builder, 
Factory Method e Prototype. 
Os padrões estruturais dão ênfase em como as classes e objetos 
são compostos, ou seja, preocupa-se com sua estrutura, o objetivo 
destes padrões é reduzir a preocupação do desenvolvedor em como 
realizar o relacionamento entre unidades, para isso, propõe soluções 
de design de sistemas, o padrão Adapter, por exemplo, permite que 
dois objetos se comuniquem, mesmo com interfaces incompatíveis, 
assim, uma nova classe é criada para adaptar uma interface a outra. 
Por fim, os padrões comportamentais atuam sobre como 
responsabilidades são atribuídas às entidades, o que afeta diretamente 
o comportamento destas, o objetivo é facilitar a comunicação entre 
os objetos por meio da distribuição de responsabilidades, garantindo 
a coesão. Um exemplo de padrão comportamental é o padrão State 
que permite um objeto alterar o seu comportamento quando seu 
estado interno muda, outros padrões comportamentais são: Strategy, 
Template Method e Visitor. 
Percebemos que existem padrões com objetivos distintos, 
portanto, será necessário, como já comentamos anteriormente, uma 
compreensão ampla sobre cada um desses padrões para que de fato 
se tornem soluções e não mais conceitos complexos que podem 
atrapalhar o desenvolvimento. 
O livro Padrões de projeto, escrito por Gamma et al., em sua versão 
original de 1995, é referência no estudo desses padrões. Nesta obra, 
encontramos os detalhes sobre cada um dos padrões comentados 
anteriormente, tais padrões ficaram conhecidos como padrões GoF 
(Gang of Four), isto se deve ao fato do livro ter sido elaborado por 
quatro autores que definiram os padrões.
Na Figura 3.1, podemos ver uma imagem muito difundida pela 
internet e demonstra de maneira sintética a distribuição dos padrões 
de projeto, conforme o seu tipo e propósito.
U3 - O padrão MVC 63
Fonte: César (2017).
Figura 3.1 | Estrutura do MVC
Para saber mais
Leia o material indicado: Componentes, Frameworks e Design Patterns. 
Disponível em: <http://www.dca.fee.unicamp.br/~gudwin/ftp/ea976/
Patterns.pdf>. Acesso em: 1 nov. 2017.
Questão para reflexão
Então, quer dizer que existem padrões para tipos distintos de problemas 
e que podem ser utilizados em resposta às dificuldades enfrentadas em 
projeto de desenvolvimento web? Como vimos nesta seção, a resposta 
é sim, porém, para que os padrões não se tornem mais um problema, é 
necessário entender a sua estrutura, isto inclui o tipo de problema que 
pretende solucionar. 
Atividades de aprendizagem
1. O padrão de projetos GoF define 23 padrões divididos em três tipos, sendo: 
padrões de criação, padrões de estrutura e padrões de comportamento. 
Assinale a alternativa que possui somente padrões de estrutura.
U3 - O padrão MVC64
a) Brigde, Decorator e Visitor. 
b) Brigde, Decorator e Builder.
c) Decorator, Facade e Singleton.
d) Decorator, Facade e Memento.
e) Brigde, Decorator e Facade.
2. Cada tipo de padrão de projeto GoF possui ênfase em objetivo(s) 
distinto(s). Assinale a questão que melhor define o(s) objetivo(s) dos tipos de 
padrões de projeto de comportamento:
a) O objetivo destes padrões é reduzir a preocupação do desenvolvedor em 
como realizar o relacionamento entre unidades, para isso, propõe soluções 
de projeto de sistemas.
b) O objetivo destes padrões é reduzir a preocupação do desenvolvedor em 
como realizar o relacionamento entre unidades, para isso, propõe soluções 
de design de sistemas.
c) O padrão dos tipos de projeto de comportamento tem como objetivo 
facilitar a comunicação entre objetos por meio da distribuição das 
responsabilidades entre os objetos. 
d) Padrões do tipo comportamento ajudam um sistema a tornar-se 
independente, a despeito de como seus objetos são criados, compostos e 
representados por meio da abstração do processo de criação de objetos.
e) O padrão dos tipos de projeto de comportamento tem como objetivo 
facilitar a comunicação entre objetos por meio separação da lógica de 
programação da persistência de dados.
U3 - O padrão MVC 65
Seção 2
O padrão MVC
Introdução à seção
A organização arquitetural de uma aplicação é dos desafios que 
devem ser superados em um projeto de desenvolvimento, a aplicação 
dos conceitos baseados no padrão MVC possibilitará a aplicação de 
soluções eficientes e que presam pela separação da lógica de negócios 
da camada de apresentação por meio da organização do código 
em camadas. Temos que levar em consideração o fato de que, ao 
desenvolver para web, também temos outros componentes envolvidos 
que foram elaborados de maneira a coexistir de modo harmônico com 
as camadas e suas respectivas funções estabelecidas no padrão MVC. 
Iniciaremos os nossos estudos relacionados a este padrão e a estes 
componentes que permitem a sua aplicação.
2.1 Padrões de arquitetura
Você pode pensar em um padrão de arquitetura como 
uma descrição abstrata, estilizada, de boas práticas 
experimentadas e testadas em diferentes tipos de sistemas 
e ambientes. Assim, um padrão de arquitetura deve 
descrever uma organização de sistema bem-sucedida em 
sistemas anteriores. Deve incluir informações de quando o 
uso de desse padrão é adequado, e seus pontos fortes e 
fracos (SOMMERVILLE, 2011, p. 108).
Podemos perceber que, pela definição anterior de Sommerville 
(2011), há uma grande semelhança entre os conceitos definidos por 
Gamma et al. (2000) e Barnes (2004), vistos na seção anterior desta 
unidade, sobre definição de padrões de projeto. Portanto, podemos 
concluir que padrões, em sua definição mais ampla, descreve um 
problema que ocorre inúmeras vezes em um determinado contexto, 
e descreve ainda a solução para este problema, de modo que essa 
solução possa ser utilizada em situações distintas, logo, sejam os 
padrões do tipo criacional, estrutural ou comportamental, ou ainda, 
U3 - O padrão MVC66
padrões arquiteturais definidos em outras áreas da engenharia de 
software, eles colaborarão para a solução de problemas de projetos 
de software. 
Pensando em um padrão de arquitetura, conforme Sommerville 
(2011), como uma descrição abstrata, estilizada, de boas práticas já 
utilizadas e testadas em diferentes ambientes e sistemas, então, um 
padrão de arquitetura deve descrever uma organização de sistemas 
bem-sucedida em outros sistemas, incluindo informações de quando 
esse padrão é adequado, seus pontos fortes e fracos, bem como é 
feito em um padrão de projeto.
2.2 Padrões de arquitetura comuns
É comum a utilização de vários conceitos definidos por arquiteturas 
vastamente conhecidas em projetos de software para web, entre elas 
a arquitetura cliente-servidor, arquitetura de repositório, arquitetura em 
camadas entre outros. Há uma variedade de arquiteturas propostas 
como solução conceitual para uma série de situações que necessitam 
de organização sistêmica, seja em nível de estruturação de código até 
a condição de equipamentos físicos em que o sistema proposto estará 
hospedado. 
Estes padrões atuam em visões distintas, mas complementares e 
que devem ser consideradas na etapa de projeto técnico do processo 
de desenvolvimento do software, devemos considerar algumas visões 
fundamentais nesta etapa e que são essenciais para a evolução da etapa 
de desenvolvimento, conforme exposto por Kruchten (1995), o modelo 
de visão 4 + 1 de arquitetura de software sugere que deve haver quatro 
visões fundamentais de arquitetura relacionadas, conforme segue:1. Visão lógica: nesta visão deve ser possível relacionar os 
requisitos do sistema com as entidades demostrando as 
abstrações fundamentais do sistema como objetos ou classes 
de objetos. 
2. Visão de processo: esta visão permite fazer julgamentos 
sobre as características não funcionais do sistema, como 
desempenho e disponibilidade. Este julgamento é possível 
pela análise em tempo de execução dos processos interativos 
que compõem o sistema. 
3. Visão de desenvolvimento: apresenta a distribuição do 
software em componentes que são implementados de 
maneira decomposta. 
U3 - O padrão MVC 67
4. Visão física: mostra o hardware que será base do sistema e 
como este será distribuído entre processadores, redes de 
comunicação e outros componentes físicos. 
Vamos considerar que estas visões formam a noção de uma 
visão conceitual, ou seja, uma percepção abstrata do sistema que 
forma a base para a decomposição de componentes de alto nível em 
especificações mais detalhadas, geralmente, as visões conceitos são 
elaboradas durante o processo de projeto e são utilizadas para apoiar 
a tomada de decisões de arquitetura, durante este processo podem 
ser desenvolvidas outras visões resultantes das discussões provocadas 
pelos conceitos definidos pelas visões fundamentais. 
Para saber mais
Veja mais sobre arquitetura de software acessando: <https://imasters.
com.br/framework/dotnet/net-definindo-a-arquitetura-de-um-
projeto-de-software/?trace=1519021197&source=single>. Acesso em: 
1 nov. 2017.
<http://www.funpar.ufpr.br:8080/rup/process/workflow/ana_desi/co_
swarch.htm>. Acesso em: 1 nov. 2017.
2.3 O padrão MVC
Vamos desmistificar logo de início este padrão, apesar de rotulado 
como tal, este modelo não está descrito como um padrão de projeto 
na obra de Shaw e Garlan (1996), ele comumente é descrito na 
engenharia de software como um padrão arquitetural de sistemas, 
ou seja, seu foco está na organização lógica do sistema baseado no 
conceito de camadas, seu principal objetivo é separar a lógica do 
negócio da interface do sistema.
O padrão MVC é largamente utilizado juntamente com as 
linguagens orientadas a objetos para desenvolvimento web. No MVC, 
o modelo (M) representa os dados da aplicação e as regras do negócio 
que determinam o acesso aos dados persistentes, o modelo também 
fornece ao controlador a capacidade de acessar as funcionalidades da 
aplicação (MACORATTI, 2017). 
Um componente de visualização (V) renderiza o conteúdo de uma 
parte particular do modelo e encaminha para o controlador as ações do 
U3 - O padrão MVC68
usuário; acessa também os dados do modelo via controlador e define 
como esses dados devem ser apresentados, por fim, o controlador 
(C) define o comportamento da aplicação, interpretando as ações dos 
usuários e mapeando-as para chamados do modelo (MACORATTI, 
2017).
Com o advento da internet e o crescimento do desenvolvimento de 
aplicações web, houve um grande movimento para desacoplar a lógica 
do negócio da interface com o usuário, um dos desafios é possibilitar 
o acesso simultâneo à aplicação, ou seja, permitir que vários usuários 
tenham acesso a uma aplicação dinâmica através de navegadores 
que devem “carregar” somente a interface sem ter que instalar estas 
aplicações na máquina local, a responsabilidade de execução da 
aplicação fica sob responsabilidade do servidor que hospeda a regra 
“pesada” do negócio. Abaixo temos uma visão geral de como este 
padrão está dividido entre camadas:
Fonte: <http://www.tutorialized.com /tutorial/Fundamentals-of-an-MVC-Framework/81946>. Acesso em: 1 set. 2017.
Figura 3.2 | Estrutura básica do MVC
O objetivo deste modelo é proporcionar a separação e a 
independência permitindo alterações localizadas no código, a 
aplicação deste modelo de arquitetura permite a inclusão ou alteração 
de uma interface sem a necessidade de alterar os modelos e dados 
subjacentes. 
U3 - O padrão MVC 69
Fonte: adaptado de <http://www.dsc.ufcg.edu.br/~jacques/cursos/map/html/arqu/mvc/mvc.htm>. Acesso em: 1 set. 
2017.
Figura 3.3 | Acesso simultâneo à aplicação
Fonte: adaptado de Sommerville (2011, p. 109). 
Quadro 3.1 | O padrão Modelo-Visão-Controlador (MVC)
Nome MVC (Modelo-Visão-Controlador)
Descrição
Separa a apresentação e a interação dos dados do sis-
tema. O sistema é estruturado em três componentes 
lógicos que interagem entre si. O componente Modelo 
gerencia o sistema de dados e as operações associadas 
a esses dados. O componente Visão define e gerencia 
como os dados são apresentados ao usuário. O compo-
nente Controlador gerencia a interação do usuário (por 
exemplo, teclas, cliques do mouse, etc.) e passa essas in-
terações para a Visão e o Modelo. Veja a Figura 3.4.
Exemplo
A Figura 3.5 mostra a arquitetura de um sistema aplicati-
vo baseado na internet, organizado pelo uso do padrão 
MVC.
Quando é usado
É usado quando existem várias maneiras de se visualizar e 
interagir com dados. Também quando são desconhecidos 
os futuros requisitos de interação e apresentação de 
dados. 
Vantagens
Permite que os dados sejam alterados de forma indepen-
dente de sua representação, e vice-versa. Apoia a apre-
sentação dos mesmos dados de maneiras diferentes, 
com as alterações feitas em uma representação apare-
cendo em todas elas.
Desvantagens
Quando o modelo de dados e as interações são simples, 
pode envolver código adicional e complexidade de có-
digo. 
A Figura 3.4 é uma visão conceitual do padrão MVC, enquanto a 
Figura 3.5 mostra uma possível arquitetura run-time, quando esse 
U3 - O padrão MVC70
padrão é utilizado para gerenciamento de interações em um sistema 
baseado em Web.
Fonte: adaptado de Sommerville (2011, p. 109). 
Figura 3.4 | Organização do MVC
Resumindo, o padrão MVC possui características para resolver os 
seguintes problemas:
1. Interfaces suscetíveis à mudança: pode ser por necessidade 
ou por preciosismo, mas os usuários de uma aplicação podem 
solicitar mudanças das interfaces da aplicação, se não for 
possível realizar as alterações na interface sem ter que alterar o 
restante do código, então, temos um problema. 
2. Portabilidade: caso seja necessário implementar a solução 
para plataformas distintas, haverá necessidade de desacoplar 
a interface do restante da aplicação para possibilitar o uso da 
arquitetura cliente-servidor, em se tratando de aplicações web, 
neste caso, deve-se separar as camadas de visão das demais 
para conseguir a portabilidade. 
3. Usabilidade: uma mesma aplicação pode possuir usuários 
com diferentes necessidades, um digitador pode preferir uma 
interface onde tudo pode ser feito através do uso do teclado, 
Controlador
Visão
Modelo
Mapeia ações de usuário 
para atualizar modelo
Seleciona visões
Mudança 
de estado 
Seleção 
de visão
Eventos de 
usuário
Notificação 
de mudança
Consulta de 
estado 
Encapsula estado de aplicação
Notifica visão de mudanças 
de estado 
Modelos renders
Solicita atualização de 
modelo
Envia eventos de usuário 
para controlador
U3 - O padrão MVC 71
um usuário comum pode preferir uma interface que priorize o 
uso de mouse e de menus com visualização gráfica. 
A principal característica do MVC que permite solucionar os 
problemas citados é a separação da interface do restante da aplicação 
que deve ser dividida em três partes, o Modelo, a Visão e o Controlador.
Fonte: adaptado de <http://www.dsc.ufcg.edu.br/~jacques/cursos/map/html/arqu/mvc/mvc.htm>. Acesso em: 1 set. 
2017.
Figura 3.5 | Fluxo de eventos e informações na arquitetura MVC
Para saber mais
Veja um exemplo de aplicação dos conceitos do padrão MVC em um 
código através do link: <http://www.dsc.ufcg.edu.br/~jacques/cursos/
map/html/arqu/mvc/mvc.htm>. Acesso em: 1 nov. 2017.
2.4 Frameworks
Segundo Fayad (1997), framework é um conjunto de classes que 
colaboraram para realizar uma responsabilidade para um domínio de 
um subsistema de aplicação. Apesar dos frameworks consistirem de 
classes, interfaces e colaborações semelhantes aos padrões deprojeto, 
existem diferenças que devem ser consideradas. É natural que um 
framework seja menos abstrato que um padrão de projeto possuindo 
código, este pode ser estudado, executado e reusado. Outro ponto 
relacionado ao framework é que ele pode conter tipicamente vários 
padrões de projeto, no entanto, o contrário não ocorre e, por fim, um 
framework é mais especializado, portanto, há sempre um domínio de 
aplicação, enquanto padrões de projetos não ditam uma arquitetura 
de aplicação. 
VIEW
Entrada de 
informações
CONTROLLER
Altera o modelo 
(business logic)
MODEL
Modelo lança
eventos, indican-
do mudanças
U3 - O padrão MVC72
A Figura 3.6 demonstra as diferenças entre um framework e uma 
biblioteca. Podemos notar que um framework possui componentes 
conectados, e que juntos formam um pacote funcional, por outro lado, 
uma biblioteca pode possuir um conjunto de classes desconexas e que 
não compõe um pacote funcional, neste caso cabe ao desenvolvedor 
conhecer os detalhes da biblioteca para utilizá-las no código em 
construção. 
Fonte: <http://www.dsc.ufcg.edu.br/~jacques/cursos/map/html/frame/oque.htm>. Acesso em: 1 set. 2017.
Figura 3.6 | A diferença entre framework e uma biblioteca de classes
Sendo assim, é possível criar uma aplicação web utilizando os 
conceitos mais abstratos dos padrões de projeto, pode-se recorrer 
ao uso de bibliotecas independentes, porém, é comum utilizar os 
frameworks para implementação de código. Podemos pensar que 
um framework é uma aplicação quase completa com partes a serem 
construídas, assim, o trabalho, ao desenvolver uma aplicação utilizando 
frameworks, consiste em construir as partes específicas desta aplicação. 
O fato de implementar uma aplicação web utilizando somente os 
princípios de um ou mais padrão de projetos ou um framework está 
relacionado à curva de aprendizagem da equipe de desenvolvimento. 
Normalmente a utilização de um framework possibilita um ganho de 
tempo que será despendido pelos desenvolvedores para adquirir as 
competências necessárias para manipular certos frameworks, criar o 
seu próprio framework baseado nos padrões de projetos é uma opção, 
mas devido ao nível mais abstrato, exigirá mais tempo para construção 
e aplicação desses conceitos.
U3 - O padrão MVC 73
Tratando-se especificamente do padrão MVC, existem inúmeros 
frameworks disponíveis em várias linguagens de programação que 
implementam o conceito de organização do código em camadas. 
Para o ASP, por exemplo, podemos citar o ASP Xtreme Evolution, 
Toika e Ajaxed, para a linguagem de programação Java há uma grande 
variedade de frameworks, o mais tradicional entre eles é o JSF (Java 
Server Faces), mas, podemos citar ainda o Spring MVC e Struts, ambos 
comumente utilizados na implementação de aplicações Java web 
baseados no padrão MVC. A linguagem PHP também possui algumas 
opções de frameworks, por exemplo, o CakePHP, Zend Framework, 
Kohana Framework entre outros.
Para saber mais
Veja mais sobre frameworks nos links recomendados a seguir:
<https://imasters.com.br/linguagens/java/listagem-de-frameworks-jav
a/?trace=1519021197&source=single>.
<http://www.linhadecodigo.com.br/artigo/1602/consideracoes-
iniciais-sobre-o-aspnet-mvc-framework.aspx>.
<http://www.devmedia.com.br/php-mvc-aplicando-o-padrao-mvc-
no-php-yii-framework/31459>.
<http://www.dsc.ufcg.edu.br/~jacques/cursos/map/html/frame/oque.
htm>.
Acessos em: 1 nov. 2017.
A questão relevante sobre frameworks e padrões de projeto é que 
o primeiro é mais específico que o segundo, isto se deve ao fato de 
que frameworks estão relacionados a um domínio de aplicação, um 
aspecto de infraestrutura ou de integração de middleware, e padrões de 
projetos são mais gerais e podem ser utilizados em diversas situações, 
independentemente do domínio da aplicação. 
Segundo Fayad (1997), o benefício da utilização de frameworks 
advém da modularidade, reusabilidade, extensibilidade e inversão de 
controle. O aumento da modularidade de uma aplicação é conseguido 
por meio do encapsulamento dos detalhes de implementação 
proporcionados pelo framework, não há necessidade de alterar classes 
U3 - O padrão MVC74
e criar novos códigos para que ele funcione, inclusive, os locais de 
mudança de projeto e implementação da aplicação construída usando 
o framework são localizados, o que diminui o esforço para entender e 
manter a aplicação. 
O reúso de código é incentivado, pois capturam o conhecimento 
de desenvolvedores em determinado domínio ou aspecto de 
infraestrutura ou de integração de middleware. A possibilidade de 
compartilhar funcionalidades definidas em um framework proporciona 
o aumento de produtividade dos desenvolvedores, pois a construção 
não começa do zero. Já que essas funcionalidades já foram testadas 
em várias instâncias. Também há o aumento da qualidade e da 
confiabilidade do produto final. 
Frameworks também oferecem pontos de extensão explícitos que 
permitem aos programadores estender suas funcionalidades para gerar 
uma aplicação e, por fim, alguns frameworks apresentam inversão de 
controle (Inversion of Controll – IOC), trata-se de transferir o controle 
da execução da aplicação para o framework, que chama a aplicação 
quando necessário, através da IOC, o framework controla quais 
métodos da aplicação e em quais contextos eles serão chamados em 
decorrência de eventos, como eventos de janela, um pacote enviado 
para determinada porta, entre outros. 
A próxima figura resume este conceito e demonstra o controle de 
execução a partir da aplicação ou a partir de um framework
Fonte: Martins (2005).
Figura 3.7 | Diferença entre framework e uma biblioteca de classes
U3 - O padrão MVC 75
Concluímos que a utilização do padrão MVC, embutido em 
frameworks que possuem as finalidades comentadas anteriormente, 
é incentivada. Incluímos como fator motivador a utilização das 
linguagens orientadas a objetos que possuem nativamente o conceito 
de reutilização, os frameworks além do ganho de produção também 
permitirão manter dois aspectos de qualidade relevantes na criação 
de programas baseados no paradigma orientado a objetos, sendo o 
primeiro a alta coesão, ou seja, permitir que cada componente execute 
a sua responsabilidade, reduzindo o acoplamento entre os vários 
componentes existentes em um programa web orientado a objetos, 
o que, consequentemente, permitirá uma maior manutenibilidade e 
suporte da aplicação, quando esta estiver na etapa de utilização.
Para saber mais
Leia o material indicado: Componentes, Frameworks e Design Patterns. 
Disponível em: http://www.dca.fee.unicamp.br/~gudwin/ftp/ea976/
Patterns.pdf. Acesso em: 1 nov. 2017.
Questão para reflexão
Os frameworks, assim como os padrões de projetos, são uma solução 
viável nos projetos de desenvolvimento web? Não falamos sobre a 
criação dos frameworks, porém, é claro que eles consomem neurônios 
em sua criação, eles devem ser flexíveis sem serem complexos 
e intrusivos nos aplicativos utilizados, o mesmo se aplica em sua 
utilização, os desenvolvedores que pretendem utilizar frameworks 
em seus projetos devem saber configurar e instanciar os objetos do 
framework, mas, antes de mais nada, será necessário saber escolhê-lo 
de acordo com a sua aplicação. 
Atividades de aprendizagem
1. São exemplos de frameworks web baseados na linguagem Java:
a) JSF, Toika e Zend Framework.
b) JSF, Struts e Toika.
c) JSF, Struts e Spring MVC. 
d) Struts, Toika e Zend Framework.
e) JSF, Toika e Struts.
U3 - O padrão MVC76
2. (CESPE, 2016, TRE-PE, Técnico Judiciário – Operação de Computadores). 
Tendo em vista que a arquitetura cliente-servidor pode ser modelada em 
três camadas: apresentação, domínio e fonte de dados, assinale a opção 
correta. 
a) Na arquitetura em questão, a ligação entre a camada de apresentação e a 
de armazenamento de dados não é realizada de forma direta.
b) A camada de apresentação trata da interação entre o usuário e o software, 
como uma interface gráfica em um navegador.
c) A solicitação dos usuáriospode ser tratada pela camada de apresentação 
ou pela camada de domínio, por exemplo, respectivamente, requisições 
HTTP e chamadas em linhas de comando.
d) Traduzir comandos do usuário em ações sobre o domínio é uma função 
de fontes de dados.
e) A lógica de negócio está mais bem relacionada à camada de fonte de 
dados do que à de domínio.
Fique ligado
Nesta unidade, estudamos:
- Os padrões de projeto e seus principais tipos.
- O padrão arquitetural MVC. 
- As diferenças entre padrões de projeto e frameworks. 
- Frameworks que implementam o padrão MVC. 
Para concluir o estudo da unidade
Chegamos ao fim desta unidade!
Nossa meta foi entender os princípios norteadores relacionados 
aos padrões de projetos e frameworks que podem ser utilizados na 
programação de aplicações orientadas a objetos para web. O assunto 
principal, claro, foi o padrão MVC, entendemos que além de um padrão, 
podemos utilizar os benefícios deste estilo arquitetural em um formato 
mais concreto, por meio do uso de frameworks que implementem os 
princípios deste padrão, aprofunde seus conhecimentos com o uso 
dos materiais adicionais indicados durante a unidade e aplique-os aos 
seus trabalhos de desenvolvimento, esta será uma forma de enriquecer 
o seu conhecimento técnico ganhando novas habilidades como 
programador. O recado final a você é, não se acomode com o uso de 
U3 - O padrão MVC 77
uma tecnologia, afinal, precisaremos sempre incluir novos conceitos 
no nosso “repertório” técnico com intuito de ganhar agilidade no 
desenvolvimento de aplicações, prezando por um processo eficiente e 
com garantia de qualidade do produto final de software. 
Até breve!
Atividades de aprendizagem da unidade
1. Podemos afirmar que padrões de projetos são o mesmo que framework, 
visto que ambos propõem soluções comuns para um tipo de problema, 
a forma de utilizá-los na fase de implementação de software também é a 
mesma no que se refere ao uso de bibliotecas. 
Acerca do texto anterior, é correto afirmar o que se encontra na alternativa:
a) Padrões de projeto e frameworks são soluções empregadas em problemas 
comuns em projetos de desenvolvimento web, são aplicados da mesma 
maneira, pois são formados basicamente de bibliotecas desconectadas. 
b) Padrões de projeto e frameworks são soluções empregadas em problemas 
comuns em projetos de desenvolvimento web, são aplicados da mesma 
maneira, pois são formados de bibliotecas com interações e interfaces. 
c) Apesar de padrões de projeto e frameworks consolidarem ideias comuns 
para um grupo similar de problemas eles diferem em sua estrutura, um pode 
ser mais abstrato que o outro. 
d) Apesar de padrões de projeto e frameworks consolidarem ideias comuns 
para um grupo similar de problemas eles diferem em sua estrutura, sendo 
ambos conceitos abstratos e não implementam tipo de código algum a ser 
reutilizado.
e) Padrões de projetos e frameworks são exatamente a mesma coisa, 
ou seja, são soluções baseadas em componentes interacionados e que 
disponibilizam código semipronto e que podem ser totalmente reutilizados. 
2. (FUNCAB, 2016, CREA-AC, Analista de Sistemas) O framework utilizado 
no Java Enterprise Edition, que permite que o desenvolvedor crie interfaces 
de usuários através de um conjunto de componentes de interfaces pré-
definidas, que fornece um conjunto de tags JSP para acessar os componentes 
e utiliza Ajax para tornar os processos mais rápidos e eficientes é o: 
a) Ant Build.
b) Cactus.
c) JavaServer Faces.
d) Jakarta Commons.
e) Spring.
U3 - O padrão MVC78
3. (EBAL, 2010, CEFET-BA, Analista de Sistemas) Define-se framework 
como: 
a) Uma armazenagem de informações sobre itens de dados encontrados 
em um diagrama de fluxo de dados.
b) Uma descrição dos principais recursos de um produto de software, seu 
fluxo de informações, comportamento e atributos.
c) A especificação das atividades de um sistema.
d) Uma combinação de componentes, por exemplo, uma biblioteca de 
classes, que simplifica a construção de aplicações e pode ser conectada em 
uma aplicação.
e) Um exame e a alteração de um sistema de software para reconstruí-lo e 
reimplementá-lo de nova forma.
4. Um analista de desenvolvimento de sistemas do CNMP deve indicar o 
padrão de projeto mais adequado para ser aplicado na seguinte situação:
 Uma aplicação que existe simultaneamente em um dispositivo móvel e no 
ambiente corporativo, necessita de um processo de sincronização entre 
as informações processadas no dispositivo móvel e na base corporativa. 
 Ambas as aplicações devem se comunicar com um objeto que deve ser 
único para processar este sincronismo, a fim de evitar a possibilidade de 
criar dados na base.
 O padrão de projeto corretamente indicado pelo analista deve ser
 (FCC, 2015, CNMP, Analista – Tecnologia da Informação e Comunicação 
Desenvolvimento de Sistemas).
a) Facade, um padrão estrutural que busca garantir que um objeto terá 
apenas uma única instância, ou seja, uma classe gerará apenas um objeto 
e que este estará disponível de forma única para todo o escopo de uma 
aplicação.
b) Factory Method, um padrão de criação que busca definir o fluxo de um 
algoritmo em uma operação, postergando (deferring) alguns passos para 
subclasses, sem mudar a sua estrutura.
c) Prototype, um padrão estrutural que busca fornecer uma interface para 
criação de famílias de objetos relacionados ou dependentes sem especificar 
suas classes concretas.
d) Singleton, um padrão de criação que busca garantir que um objeto terá 
apenas uma única instância, ou seja, uma classe gerará apenas um objeto 
e que este estará disponível de forma única para todo o escopo de uma 
aplicação.
e) Command, um padrão comportamental que busca definir o fluxo de um 
algoritmo em uma operação, postergando (deferring) alguns passos para 
subclasses, sem mudar a sua estrutura.
U3 - O padrão MVC 79
5. (CONSULPLAN, 2012, TSE – Técnico Judiciário - Programação de 
Sistemas) O desenvolvimento de software é uma atividade que apresenta 
dificuldades relacionadas ao entendimento do problema. Padrões de 
projeto surgiram na busca de soluções para as dificuldades, tornando-se 
um mecanismo eficiente no compartilhamento de conhecimento entre os 
desenvolvedores. Gamma et al. (2000) propõem um modo de categorização 
dos Design Patterns, definindo famílias de padrões relacionados, descritos a 
seguir.
I. Abrange a configuração e inicialização de objetos e classes. 
II. Lida com as interfaces e a implementação das classes e dos objetos. 
III. Lida com as interações dinâmicas entre grupos de classes e objetos. 
Essas famílias são denominadas, respectivamente,
a) Structural Patterns, Standard Patterns e Creational Patterns.
b) Behavioral Patterns, Structural Patterns e Standard Patterns.
c) Creational Patterns, Structural Patterns e Behavioral Patterns.
d) Standard Patterns, Creational Patterns e Structural Patterns.
e) Structural Patterns, Creational Patterns e Standard Patterns
U3 - O padrão MVC80
Referências
BOOCH Grady, RUMBAUGH James, JACOBSON Ivar. The unified modeling language. 
EUA: Addison Wesley Publishing Company, 1999.
BOSCH, Jan. Design and use of software architecture. Ronneby, Sweden: University of 
Karlskrone/Addison Wesley Professional, 2000.
CÉSAR, Vitor. Desing Patterns na prática: desvendando mistérios (parte 1). Devmedia. 
Disponível em: <http://www.devmedia.com.br/desing-patterns-na-pratica-desvendando-
misterios-parte-1/14713>. Acesso em: 1 set. 2017.
FAYAD, Mohamed E.; SCHMIDT, Douglas C. Object-oriented application frameworks. 
Communications of the ACM, v. 40, n. 10, p. 32-38, 1997.
GAMMA, Erich et al. Padrões de projeto: soluções reutilizáveis de software orientado a 
objetos. Porto Alegre: Bookman, 2000.
KRUCHTEN, Philippe. Architectural Blueprints – The “4+1” View Model of Software 
Arquitecture. IEEE Software, 1995. Disponível em: <https://www.cs.ubc.ca/~gregor/
teaching/papers/4+1view-architecture.pdf>. Acesso em: 28 ago. 2017.
MACORATTI, José Carlos. Padrões de projeto: o modeloMVC - Model View Controller. 
Disponível em: <http://www.macoratti.net/vbn_mvc.htm>. Acesso em: 10 ago. 2017.
MACORATTI, José Carlos. Padrões de projeto: design patterns. Disponível em: <http://
www.macoratti.net/vb_pd1.htm>. Acesso em: 3 set. 2017.
MARTINS, Eliana. Reutilização de software. Campinas: Unicamp: Instituto de Computação, 
2005. Disponível em: <http://slideplayer.com.br/slide/352266/>. Acesso em: 2 set. 2017. 
RUMBAUGH, James et al. Object-oriented modeling and design. New Jersey: Prentice-
Hall, 1990.
SHAW, Mary; GARLAN, David. Software architeture: perspectives on an emerging 
discipline. New Jersey: Prentice-Hall, 1996.
SOMMERVILLE, Ian. Engenharia de software. 9. ed. São Paulo: Pearson Prentice Hall, 2011.
Unidade 4
Tecnologia de acesso ao 
banco de dados
Considerando toda a complexidade existente para a plataforma 
web, a proposta desta unidade é a utilização de uma linguagem 
didática e instrutiva, buscando a simplicidade nas abordagens das 
seções e desenvolvendo alguns assuntos contidos na ementa 
da disciplina de Programação para Web II. Além disso, dentro da 
metodologia adotada, busca-se o objetivo de inserir o aluno no 
contexto de alguns tipos de conexões entre a aplicação e o banco 
de dados.
Objetivos de aprendizagem
A conexão via JDBC consiste em um conjunto de classes e métodos da 
linguagem Java para padronização de conexões com diversos bancos de dados. 
Nesta seção abordaremos o estudo desse tipo de conexão, como ela funciona e 
um sistema didático para sua demonstração.
Seção 1 | API JDBC
Nesta seção abordaremos a Interface PreparedStatement como um 
componente auxiliar na conexão de banco de dados. Suas principais características 
e forma de utilização serão demonstradas por meio de um exemplo em uma 
aplicação.
Seção 2 | Interface PreparedStatement
O mysqli_connect é uma extensão da API MySQL com suporte a novas 
funcionalidades para versões lançadas depois do MySQL 4.1. 
A API é de fácil utilização e será aplicada nesta seção em um exemplo web, 
Seção 3 | API mysqli_connect
Anderson Emidio de Macedo Gonçalves
reunindo algumas tecnologias como: HTML5, CSS, Java Script, PHP e o próprio 
banco de dados MySQL.
Nesta seção serão abordados alguns conceitos, principais características e 
alguns exemplos de aplicação da API mysqli_connect, páginas com funções em 
PHP.
Introdução à unidade
Os diversos tipos de aplicações e sistemas computacionais que 
utilizamos em nosso dia a dia necessitam manter as informações para 
desempenharem diversas funcionalidades. Para que isso seja possível, 
é utilizado um banco de dados com o objetivo de não apenas manter, 
mas organizar e estruturar o acesso e a manipulação da informação 
nele contida.
Na atualidade existem várias tecnologias e componentes que 
auxiliam a conexão da aplicação com o banco de dados. A proposta 
desta unidade de ensino é abordar algumas destas tecnologias, 
apresentando suas características e funcionalidades, contextualizando 
por meio de exemplos de utilização. Abordaremos, também, algumas 
ferramentas de trabalho para a demonstração desses exemplos.
Alguns tipos de conexões como: API JDBC, Interface 
PreparedStatement e a API mysqli_connect serão demonstradas 
nesta unidade.
U4 - Tecnologia de acesso ao banco de dados84
Seção 1
API JDBC
Introdução à seção
Este tipo de conexão faz com que a aplicação, de uma maneira 
técnica, entenda os mecanismos de ligação até o banco de dados. Esta 
é uma tarefa fundamental para que todo o processo funcione bem.
Nesta seção abordaremos estes e outros aspectos.
1.1 Funcionamento da API
A API JDBC ou conexão JDBC, como é popularmente conhecida 
entre os profissionais da área de desenvolvimento de softwares, atua 
geralmente nos bancos relacionais. Já os bancos não relacionais, estão 
mais focados em outros recursos.
Os bancos de dados não relacionais, também chamado de "No 
SQL" ou Not Only SQL - Não somente SQL, consiste em alguns tipos de 
banco de dados que não exigem esquemas e também não suportam 
instruções de junção SQL. A escalabilidade horizontal, utilizada pela 
computação em nuvens, por exemplo, é um recurso oferecido por 
este tipo de banco de dados.
Já os bancos relacionais são bancos que utilizam uma modelagem 
de dados em forma de tabelas que se relacionam umas com as outras 
criando, assim, regras e restrições para alimentação e armazenamento 
dos dados.
Na Figura 4.1, um pequeno exemplo de um repositório de dados, 
no centro, o servidor onde fica o banco de dados e, nas pontas, as 
estações de trabalho representando máquinas e/ou pessoas que 
estarão consumindo a informação do banco.
U4 - Tecnologia de acesso ao banco de dados 85
Fonte: <http://mediablog.sistemasinformacao.com/sad.jpg.>. Acesso em: 12 out. 2017.
Figura 4.1 | Repositório de dados
Explicada a diferença em cada tipo de armazenamento dos dados, 
vamos abordar a conexão JDBC para alimentação das informações por 
meio de uma aplicação. Na maioria das vezes uma aplicação web, pois 
a portabilidade, conectividade e usabilidade são conceitos totalmente 
aplicados em sistemas computacionais da atualidade. Isto significa que 
o usuário quer ter acesso ao sistema por meio de qualquer dispositivo
e em qualquer lugar onde ele esteja.
1.2 Conexão java
Abordaremos a conexão em Java, pois se trata exatamente da API 
JDBC, que significa Java DataBase Connectivity, ou um conjunto de 
classes e interfaces localizadas dentro do pacote java.sql, responsável 
pela comunicação entre a aplicação e o banco de dados.
Na Figura 4.2 observamos que a API JDBC fica entre a camada de 
banco e a camada cliente. Nesse processo, um outro fator importante 
são os drivers que ajudam a concluir a comunicação com os protocolos 
proprietários de cada banco de dados. Em outras palavras, isso quer 
dizer que por meio da API JDBC é possível se comunicar com qualquer 
banco de dados, pois todos os principais bancos de dados do mercado 
possuem drivers JDBC para serem utilizados com Java.
U4 - Tecnologia de acesso ao banco de dados86
Fonte: <https://www.caelum.com.br/apostila-java-web/bancos-de-dados-e-jdbc/#2-3-a-conexao-em-java>. Acesso 
em: 12 out. 2017.
Figura 4.2 | Esquema JDBC
Podemos fazer, aqui, uma pequena analogia com os drivers que 
utilizamos nas impressoras. Seria improvável que nosso sistema 
operacional (SO) conseguisse “conversar” com todos os tipos de 
impressoras existentes no mundo. Por isso, o fabricante de cada 
impressora desenvolve o seu driver, "software", que executa o papel de 
tradutor da conversa entre o SO e determinada impressora.
Vamos, então, abordar uma prática com esse tipo de conexão por 
meio de uma aplicação desenvolvida em Java no NetBeans 7.3.1, que 
se trata de uma aplicação simples para fazer uma inserção em uma 
tabela do banco de dados MySQL.
No primeiro momento é criada a classe de conexão chamada 
"Conexao.java". Esta classe, basicamente, será composta de:
• conectar() - método que fará a conexão com o banco de 
dados por meio de um try – catch, tratando as exceções 
quando o driver JDBC não é encontrado e quanto existe erro 
na "string de conexão" por exemplo, nome do banco inválido.
• desconectar() - método que, após a utilização da operação 
necessária no banco de dados pela aplicação, fecha a conexão 
que estava aberta. Essa operação faz parte das boas práticas de 
programação.
• construtor - o método construtor executado no momento da 
instância da classe "Conexão.java" fará a chamada do método 
conectar(), acima mencionado.
Inter-
face 
JDBC
BD
Imple-
men-
tação 
JDBC
Qual?
Cliente
U4 - Tecnologia de acesso ao banco de dados 87
Fonte: elaborada pelo autor.
Figura 4.3 | Método conectar
Na Figura 4.3, o método "getConnection()" da classe "DriverManager" 
é executado passando por parâmetro o driver jdbc do banco MySQL 
e os outros parâmetros da string de conexão, como: local, nome do 
banco, usuário e senha. Esses parâmetros são necessários para que a 
aplicação consiga localizar e se conectar com obanco.
Após a execução do método getConnection(), se tudo estiver 
correto, a aplicação se conecta ao banco, retornando uma conexão 
aberta. Uma mensagem pode ser disparada, porém, somente afim de 
testar a conexão com o banco. A Figura 4.4 mostra um exemplo desta 
mensagem diretamente no prompt.
Fonte: elaborada pelo autor.
Figura 4.4 | Mensagem de conexão
U4 - Tecnologia de acesso ao banco de dados88
Questão para reflexão
Analise a utilização do try catch abaixo:
Podemos concluir que se algum parâmetro da string de conexão estiver 
incorreto, ou o driver não estiver configurado no projeto, será disparado 
as exceções contidas no catch. No primeiro catch, se o driver não 
estiver configurado na aplicação e no segundo se o conjunto de valores 
do parâmetro da string de conexão estiver incorreto.
Continuando nosso exemplo, uma vez realizada a conexão com o 
banco, precisamos de outras classes para fazer a inserção de dados, 
visto que estamos trabalhando atualmente com o paradigma orientado 
a objeto, devemos fazer corretamente a separação da implementação 
da nossa aplicação de forma separada e utilizando os conceitos 
de: objetos, encapsulamento, herança polimorfismo entre outros 
existentes em POO (programação orientada a objetos).
Precisamos inserir dados em uma tabela na base de dados "Alunos", 
dentro do banco MySQL. O nome da base também deve estar presente 
na string de conexão. Na base Alunos temos uma tabela com o nome 
de "Aluno", que possui os campos de: mat, nome, cidade e uf. Seguindo 
o padrão OO (orientado a objetos). Vamos fazer o encapsulamento 
dos atributos desta tabela. Lembrando que o encapsulamento serve 
para proteger o acesso a cada atributo. Então, precisamos de outra 
classe, a classe "AlunoBean".
Uma visualização resumida da classe AlunoBean pode ser conferida 
na Figura 4.5.
U4 - Tecnologia de acesso ao banco de dados 89
Fonte: elaborada pelo autor.
Figura 4.5 | Classe AlunoBean
A aplicação deverá ser implementada de maneira que a classe 
AlunoBean seja utilizada para receber os valores de cada atributo antes 
de passar para o banco. Caso isso não seja feito, estamos somente 
criando a código que nunca será utilizado.
Agora, temos a classe chamada de "AlunoControl". O nome 
escolhido para esta classe é justamente porque ela controlará a 
manipulação de dados na tabela de "Aluno" da base "Alunos" do nosso 
exemplo.
Como podemos observar na Figura 4.6, colocamos todas as 
instruções SQL referente à manipulação nesta tabela, e temos um 
método para cada operação, por exemplo: método cadastrarAluno(), 
responsável por se conectar com a classe Conexão e AlunoBean, abrir 
a conexão com o banco, passar a instrução SQL que será feita, no caso 
de inserção, executar a instrução e depois fechar a conexão com a 
base por meio do método desconectar().
U4 - Tecnologia de acesso ao banco de dados90
Fonte: elaborada pelo autor.
Figura 4.6 | Classe AlunoControl
Após todos os procedimentos do nosso exemplo, ainda precisamos 
de uma classe teste que fará o papel da nossa interface web ou de 
qualquer outro tipo de interface operacional que fará a inserção de 
dados de um objeto Aluno.
Figura 4.7 | Classe para inserção de um aluno
U4 - Tecnologia de acesso ao banco de dados 91
Fonte: elaborada pelo autor.
O método main da Figura 4.7, como podemos observar, mostra 
a inserção por meio do método cadastrarAluno() e a mensagem e 
consulta no banco de dados com os dados respectivos inseridos com 
sucesso.
Para saber mais
Outras explicações referentes ao meio de acesso e a API JDBC do 
Java, estão disponíveis no seguinte link: <https://www.caelum.com.
br/apostila-java-web/bancos-de-dados-e-jdbc/#2-3-a-conexao-em-
java>. Acesso em: 12 out. 2017.
Você pode também aprender mais com os exemplos contidos nesse 
link e aprofundar um pouco mais o seu conhecimento.
Atividades de aprendizagem
1. Uma grande parte do conteúdo disponível e criado para a internet está 
em HTML, porém, o SGBD, sistema gerenciador do banco MySQL, é por 
padrão instalado com a execução de uma transação com instruções de 
atualização (operações de inserção, exclusão e alteração de tuplas) em uma 
tabela com o modo:
U4 - Tecnologia de acesso ao banco de dados92
a) transaction.
b) autotransaction.
c) autocommit.
d) autocommit/autorollback.
e) start transaction.
2. No banco de dados MySQL, o comando utilizado para acrescentar um 
campo em uma tabela já existente é:
Assinale a alternativa correta.
a) RENAME TABLE.
b) DROP TABLE.
c) ADD NOME_CAMPO.
d) ALTER TABLE.
e) DELETE TABLE.
U4 - Tecnologia de acesso ao banco de dados 93
Seção 2
Interface PreparedStatement
Introdução à seção
A interface PreparedStatement é utilizada para trafegar as 
informações passando valores da aplicação para o banco e possui 
algumas regras e formas de aplicação.
No decorrer desta seção, apresentaremos, por meio de um 
exemplo prático, regras de inserção de dados utilizando esta interface 
como meio de comunicação e tráfego de informações da aplicação 
para o banco de dados.
2.1 Introdução a interface PreparedStatement
Para fazer a inserção de dados em uma tabela do banco é 
relativamente simples. Por meio da linguagem SQL, basta utilizar a 
instrução "insert into" respeitando os parâmetros obrigatórios e pronto. 
Contudo, por meio de uma aplicação é um pouco diferente, pois não 
podemos utilizar o comando passando valores fixos. Exemplo: Para 
executar a instrução "insert into" no banco, basta fazer conforme a 
Figura 4.8.
Fonte: elaborada pelo autor.
Figura 4.8 | Inserção de dados em uma tabela de forma fixa
U4 - Tecnologia de acesso ao banco de dados94
Note que passamos os valores de cada campo de forma fixa 
diretamente no comando, o que não poderá acontecer por meio de 
uma aplicação, pois o usuário quer cadastrar um aluno que não seja o 
"Roberto", ou até dizer que ele é de outra cidade.
Se deixarmos desta maneira, esse comando só funcionará uma vez 
e sempre irá cadastrar um aluno com esses dados.
2.2 Funcionamento da interface
A interface PreparedStatement trabalha na substituição dos valores 
antes da execução da instrução no banco.
O primeiro passo é a criação de um objeto do tipo PreparedStatement 
na classe "AlunoControl" mencionada na Figura 4.6. Após esse 
procedimento é necessário fazer a instância deste objeto, por exemplo: 
pstm = (PreparedStatement) mysql.conectar().preparedStatement().
Pstm é o objeto criado e, entre parênteses, coloca-se o tipo do 
objeto, no caso, PreparedStatement. A conexão com o banco está 
feita na classe "Conexao" por meio do método conectar(), ou seja, a 
conexão irá retornar aberta para o objeto pstm. Para concluir, basta 
passar a instrução em SQL dentro do último parêntese.
Mas de que forma o comando tem que ser passado para não ficar 
fixo novamente? Observemos a Figura 4.8.
Para resolver esse problema, a interface PreparedStatement conta 
com caracteres coringa ao invés de valores dos campos da tabela 
propriamente ditos. Esses caracteres coringa só são substituídos no 
momento em que a aplicação está sendo utilizada para a inclusão dos 
dados.
No nosso exemplo da tabela Aluno, quando o usuário acessar 
a aplicação para cadastrar o aluno, o sistema traz os valores 
fornecidos pelo usuário e troca pelos caracteres coringa da interface 
PreparedStatement, completando, assim, a operação e fazendo com 
que a instrução SQL "insert into" seja utilizada corretamente.
Vale lembrar que a instrução SQL deve ser passada como argumento 
com os valores já prontos vindos das variáveis preenchidos com uma 
interrogação.
Esta interrogação se caracteriza no caractere coringa utilizado na 
interface PreparedStatement.
A Figura 2.9 mostra uma variável do tipo String com o nome 
de cadastraaluno, que armazenará a instrução em SQL com as 
U4 - Tecnologia de acesso ao banco de dados 95
interrogações (caractere coringa) para termos uma ideia de como 
funciona essa logística. Acompanhe a seguir:
Fonte: elaborada pelo autor.
Figura 2.9 | String cadastraalunoÉ desta forma que a instrução fica: no lugar dos valores aparecem, 
neste momento, as interrogações. Claro que se executarmos o 
comando desta maneira ele será recusado, pois não está dentro das 
regras de sintaxe existentes.
O comando do objeto psmt responsável por executar a instrução 
SQL no banco seja ela uma instrução de inserção ou alteração dos 
dados é o executeUpdate(). Contudo, antes de executar este comando 
devemos fazer a substituição das interrogações por valores reais.
Fonte: elaborada pelo autor.
Figura 4.10 | Substituição dos parâmetros
Na Figura 4.10 observamos que para cada campo existe um método 
que começa com a palavra get seguido do nome do campo na tabela. 
O valor retornará por meio dos métodos gets da classe "AlunoBean" 
para cada parâmetro do objeto pstm. Esse processo substituirá a 
interrogação pelo valor passado pelo usuário.
Vamos à explicação: digamos que o usuário no momento do 
cadastro informe o nome: "Anderson Macedo" (Figura 4.7). Esse nome, 
por meio do método público setMat() da classe "AlunoBean" como 
também pode ser observado na Figura 4.7, passará a ser o valor do 
atributo nome da classe "AlunoBean".
U4 - Tecnologia de acesso ao banco de dados96
Na Figura 4.10, quando o método getNome() é executado, ele 
retorna o que está no atributo nome da Classe "AlunoBean", ou seja, 
podemos substituir a linha 29 da Figura 4.10 por: pstm.setString(2, 
'Anderson Macedo');
Depois desse processo, o próximo passo é fazer a substituição do 
nome do aluno no lugar da interrogação. Acompanhe como ficaria o 
código da troca somente do nome do aluno exemplificado acima pela 
interrogação da instrução SQL.
Fonte: elaborada pelo autor.
Figura 4.11 | Exemplo da substituição do nome do aluno
Conforme podemos observar na Figura 4.11, o nome do aluno foi 
trocado pela 2 interrogação, pois na Figura 4.10 o nome do aluno é 
relativo ao parâmetro 2
Questão para reflexão
O processo de substituição dos valores da instrução SQL pelos valores 
fornecidos pelo usuário na hora do cadastro do aluno só é possível 
graças ao encapsulamento.
Exatamente por meio do encapsulamento da classe AlunoBean os 
valores são trafegados para o modo seguro, ou seja, protegido. A 
proteção dos valores dos atributos é o foco do encapsulamento. Os 
métodos sets e gets realizam esse processo.
Analise e estude esse processo de modo que você aprenda como fazer o 
encapsulamento da forma correta. Lembrando que o encapsulamento 
também é um conceito da programação orientada a objetos.
U4 - Tecnologia de acesso ao banco de dados 97
Para saber mais
Acompanhe este post da DevMedia: Entendendo a Linguagem SQL. 
O post fala um pouco sobre o histórico da linguagem SQL e algumas 
formas de aplicá-la. 
Acesse o link: <http://www.devmedia.com.br/entedendo-a-linguagem-
sql/7775> e aprimore-se na linguagem SQL. Afinal, a Linguagem SQL é 
padrão de movimentação de dados na maioria dos bancos relacionais 
existentes no mercado.
Atividades de aprendizagem
1. Analise a frase a seguir:
"...conjunto de conceitos que podem ser usados para descrever a estrutura 
de um banco de dados…" (NISHIMURA, 2009, p. 11).
Assinale a alternativa que contém a expressão que caracteriza a definição 
fornecida na frase.
a) Modelo de dados.
b) Arquitetura de software.
c) Hardware de servidor.
d) Sistemas operacionais.
e) Modelo ocupacional.
2. Qual é a finalidade da interface PreparedStatement no contexto da 
conexão e manipulação dos dados no banco?
Assinale a alternativa correta:
a) Conexão na base de dados por meio de um parâmetro.
b) Preencher os valores que serão trafegados ao banco.
c) Identificar a instrução em SQL que será executada.
d) Comunicação com os drivers JDBC em Java.
e) Faz uma busca de alguns registros de uma tabela do banco.
U4 - Tecnologia de acesso ao banco de dados98
Seção 3
API mysqli_connect 
Introdução à seção
A API mysqli_connect é uma função nativa do banco MySQL que 
funciona similarmente ao PreparedStatement mas com algumas 
particularidades de utilização.
Vamos estudar algumas características do funcionamento deste 
componente por meio de um exemplo prático com a linguagem 
PHP, banco MySQL e comandos da linguagem SQL. Vamos ao nosso 
estudo!
3.1 Introdução ao componente mysqli_connect
O componente mysqli_connect é específico somente para realizar 
a conexão com o banco de dados. A sua aplicação é bem simples, por 
intermédio de parâmetros obrigatórios fornecidos em sua escrita, ele 
se conecta ao banco.
Fonte: elaborada pelo autor.
Figura 4.12 | Parâmetros de conexão
Na Figura 4.12, observamos que se trata de uma string de conexão, 
ou seja, é preciso passar os parâmetros para conseguir realizar a 
conexão com o banco. Neste exemplo é utilizada a linguagem de 
U4 - Tecnologia de acesso ao banco de dados 99
programação orientada a objetos PHP. Note que os parâmetros ou 
variáveis são criados com o caractere reservado "$" antes do nome da 
variável. Para valorizar esse objeto basta colocar o sinal de atribuição 
"=", por exemplo: $server = 'localhost', está locando como conteúdo 
do objeto "server" o valor "localhost".
Para executar a conexão basta executar o método como podemos 
ver na linha 8 da Figura 4.11. Se todos os parâmetros estiverem corretos 
a conexão é realizada.
3.2 Objeto mysqli query
A partir da conexão realizada no passo anterior, para executar a 
inserção de dados, o processo será o mesmo que mostrado no exemplo 
anterior na Seção 2, para respeitar a logística do desenvolvimento em 
camadas com programação orientada a objetos.
Abordaremos, na Seção 3 somente a parte de inserção dos dados 
de um pedido.
O nome do método para inserir um pedido é function pedido() e 
atuará realizando a conexão com o banco e, logo após, inserindo o 
pedido.
Fonte: elaborada pelo autor.
Figura 4.13 | Function pedido parte 1
Neste momento, na Figura 4.13, linha 24, é feita a chamada do 
arquivo conexao.php, conforme Figura 4.12, e será executado a 
conexão com o banco. Na linha 25 é executada a chamada do método 
session_start(), que iniciará o processo de start da seção utilizada.
U4 - Tecnologia de acesso ao banco de dados100
Fonte: elaborada pelo autor.
Figura 4.14 | Function pedido parte 2
Questão para reflexão
Analise as duas questões a seguir refletindo como resolvê-las. 
A linguagem PHP associada ao banco MySQL é uma boa decisão de 
tecnologia para desenvolvimento de uma aplicação web? 
Existe a necessidade do emprego de frameworks para fazer o trabalho 
de manipulação da informação dentro do banco?
É preciso ter muito cuidado para avaliar a melhor maneira de tráfego dos 
dados para o banco e avaliar a viabilidade do emprego de ferramentas 
de segurança nesse processo.
Estamos trabalhando com a informação e todo cuidado ainda é pouco.
Continuando o processo de inserção do pedido, o próximo passo é 
escrever a instrução SQL, substituir os parâmetros por valores e depois 
executá-la.
Na Figura 4.14, na linha 27, é inserido um registro na tabela de pedido 
por meio do comando insert into. Logo após na linha 28 é verificado 
se o objeto $pedido está vazio, do contrário começa-se, então, a 
preparação para inserção dos itens do pedido na tabela itempedido. 
Podemos ver o insert nesta tabela na linha 36, logo depois é atualizado 
o estoque na tabela de produtos na linha 37.
U4 - Tecnologia de acesso ao banco de dados 101
Perceba que todo o processo de inserção dos itens é repetido, pois 
estão dentro de um comando de laço de repetição, ou seja, enquanto 
tem itens no pedido ele irá inserir na tabela de banco de banco.
Para saber mais
O editor de código utilizado nas imagens da Seção 3 é o SUBLIME Text.
O sublime é um ótimo editor html com vários recursos como: 
autocompletar, criação de árvore de diretórios, localização de arquivos, 
alinhamento entre outros.
Vale a pena baixá-lo e experimentar seus recursos. Faça isso. O sublime 
é gratuito e de fácil operação. 
Atividades de aprendizagem
1. Considere o código PHP:
As saídas ou resultados esperadospara os comandos das linhas 36 e 37 são, 
respectivamente:
a) Sou $profissao / Sou $profissao.
b) Sou Programador Web / Sou $profissao.
c) Sou $profissao / Sou Programador Web.
d) Sou Programador Web / Sou Programador Web.
e) Sou profissao / profissao.
Fonte: elaborada pelo autor.
2. Linguagem de programação que é considerada uma linguagem Server 
Side (processadas pelo servidor web.
Assinale a alternativa a qual o texto acima se refere:
a) Flash.
b) Silverlight.
c) Html.
d) CSS.
e) PHP.
U4 - Tecnologia de acesso ao banco de dados102
Fique ligado
Resumo dos itens estudado nesta unidade:
• API Conexão JDBC.
• Interface PreparedStatement.
• API mysqli_connect.
Para concluir o estudo da unidade
Esta unidade abordou algumas técnicas de conexão e manipulação 
de informações de uma aplicação qualquer para o banco de dados.
Neste processo foi aplicado técnicas de programação orientada 
a objetos, tratamento de exceções, substituição de parâmetros entre 
outras.
Assim como em todo o processo de desenvolvimento de uma 
página web, o tráfego das informações da aplicação para o banco e 
vice-versa deve ser tratado com grande cuidado, principalmente no 
que diz respeito à segurança desses dados.
Esperamos que esta unidade de ensino tenha contribuído com o seu 
aprendizado e instigue a sua curiosidade para que seu desenvolvimento 
profissional e acadêmico seja sempre aperfeiçoado.
Atividades de aprendizagem da unidade
1. (FCC - 2012 - MPE - PE - Analista Ministerial - Informática - adaptado) 
Fernanda está desenvolvendo uma aplicação web em PHP. Como está 
utilizando um banco de dados MySQL, escolheu uma função para enviar 
uma consulta ou comando SQL (por exemplo, os comandos select, insert 
ou delete) para o banco de dados ativo.
 A função correta escolhida para que Fernanda tenha sucesso é:
a) mysql->update.
b) mysql->fetch.
c) mysqli->query.
d) mysql->execute.
e) mysql->insert.
U4 - Tecnologia de acesso ao banco de dados 103
2. A declaração de variáveis em PHP também está de acordo com as boas 
práticas existentes para nomenclatura de variáveis de outras linguagens.
Os nomes que identificam as variáveis no PHP devem ser sempre iniciados 
pelo sinal de dólar "$", seguido por:
Assinale a alternativa correta:
a) Um hífen.
b) Uma arroba.
c) Qualquer dígito hexadecimal.
d) Uma letra ou sinal de sublinhado.
e) Qualquer caractere existente.
3. Linguagem de programação web, que além de utilizada em servidor 
de aplicações Apache, opera com o sistema operacional Linux e é uma 
linguagem de scripts.
Considerando o texto acima, assinale a alternativa correta:
a) PHP.
b) Lisp.
c) Clipper.
d) Algol.
e) html.
4. De acordo com a sintaxe da linguagem PHP, para se declarar uma variável 
é preciso seguir algumas regras de nomenclatura de variáveis. Também é 
indicado seguir as regras de boas práticas de programação existentes.
Veja o código a seguir: $var = “false”.
Considerando a linha de código acima, assinale a alternativa correta:
a) A variável é criada como lógica e o conteúdo true.
b) A variável é criada como caractere e o conteúdo é false.
c) Existe um erro na sintaxe e a variável não é criada.
d) A variável var só aceita 4 caracteres (true).
e) A variável é tipada como variant e o conteúdo dela é false.
5. Considere a execução do trecho de código escrito na linguagem PHP, a 
seguir e analise:
U4 - Tecnologia de acesso ao banco de dados104
O que será impresso na tela? Assinale a alternativa correta:
a) False.
b) Não achei.
c) Achei.
d) True.
e) Achei, sim.
U4 - Tecnologia de acesso ao banco de dados 105
Referências
MORRISON, Michael; BEIGHLEY, Lynn. Use a cabeça PHP & MySQL. Rio de Janeiro: Alta 
Books, 2010.
NISHIMURA, Roberto Yokio. Banco de Dados I. São Paulo: Pearson, 2009.
Anotações
Anotações
Anotações
Anotações
Anotações
Anotações
Anotações
U
N
O
P
A
R
P
R
O
G
R
A
M
A
Ç
Ã
O
 P
A
R
A
 W
E
B
 II Programação 
para web II