Programação para Web II

Programação
para web II
Programação para web II
Anderson Emídio Macedo Gonçalves

Adriano Sepe
Paulo Henrique Terra
© 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
Dados Internacionais de Catalogação na Publicação (CIP)
Gonçalves, Anderson Emídio Macedo

G635p Programação para web II/ Anderson Emídio Macedo
Gonçalves, Adriano Sepe, Paulo Henrique Terra. – Londrina:
Editora e Distribuidora Educacional S.A., 2018
112p.
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
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/
Sumário
Unidade 1 | Framework: conceitos básicos no desenvolvimento web 7
Seção 1 - Introdução ao framework 10

1.1 | Framework 10
1.2 | Introdução ao ASP.NET Core 10
1.2.1 | Arquitetura do .NET 11
1.3 | Tecnologia .NET Core 12
1.4 | Startup da Aplicação ASP.NET Core 13
1.4.1 | Método de Configuração 13
1.4.2 | Método de Configuração de Serviços 13
1.5 | Analisando o Start da Aplicação 13
1.6 | Middleware 15
1.7 | Arquivos Estáticos 15
1.8 | Servidor 16
Seção 2 - Compreendendo a programação 18

2.1 | Definindo Razor 18
2.2 | Blocos de Código 19
2.3 | Estruturas de Controle 19
2.4 | Diretivas 20
2.5 | Páginas Razor 24
Unidade 2 | Tecnologias para programação web 31
Seção 1 - Padrão HTML5 34

1.1 | Novos elementos em HTML5 35
1.2 | Diferentes navegadores 37
Seção 2 - Estilo CSS 42

2.1 | Introdução ao CSS 42
2.2 | Introdução ao Java Script 45
Seção 3 - Linguagem PHP 49

3.1 | HTM5 e linguagem lado servidor 49
3.2 | Programando em PHP 49
3.3 | Funcionalidades do PHP 51
Unidade 3 | O padrão MVC 57
Seção 1 - Padrões de projeto 60

1.1 | Design patterns 60
1.2 | Estrutura de um padrão 61
1.3 | Tipos de padrões de projeto 61
Seção 2 - O padrão MVC 65

2.1 | Padrões de arquitetura 65
2.2 | Padrões de arquitetura comuns 66
2.3 | O padrão MVC 67
2.4 | Frameworks 71
Unidade 4 | Tecnologia de acesso ao banco de dados 81
Seção 1 - API JDBC 84

1.1 | Funcionamento da API 84
1.2 | Conexão java 85
Seção 2 - Interface PreparedStatement 93

2.1 | Introdução a interface PreparedStatement’ 93
2.2 | Funcionamento da interface 94
Seção 3 - API mysqli_connect 98

3.1 | Introdução ao componente mysqli_connect 98
3.2 | Objeto mysqli query 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
Adriano Sepe
Objetivos de aprendizagem
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.
Seção 1 | Introdução ao framework

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 2 | Compreendendo a programação

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.
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!
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
10 U1 - Framework: conceitos básicos no desenvolvimento web

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.
Figura 1.1 | Componentes do .NET
Fonte: <https://docs.microsoft.com/en us/dotnet/articles/standard/media/components.png>. Acesso em: 26 abr. 2017.
U1 - Framework: conceitos básicos no desenvolvimento web 11

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.
• uporte: coloca-se como uma tecnologia segura relativo à
S
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

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:

Quadro 1.1 | Ponto de entrada da aplicação ASP.NET CORE
Fonte: elaborado pelo autor.
Já a classe de inicialização (Startup.cs) tem um grau de complexidade

maior, visto que define mais parâmetros de 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:
Quadro 1.2 | Configurações através da classe Startup

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:
Quadro 1.3 | Habilitando arquivos estáticos

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

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?

Seção 2
Compreendendo a programaçã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:
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,

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):
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).

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

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.
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.
Quadro 1.8 | Criando visão baseada no modelo

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).
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:

Quadro 1.10 | Resultado da compilação após checagem da visão
Sever- Suppression
Code Description Project File Line
ity State
‘Aluno’ does not
contain a defi-
nition for ‘Cpfs’ C:\Us-
and no extension ers\x-admin\
method ‘Cpfs’ \demo-src\
accepting a first De- DemoAspN-
Error CS1061 argument of type moAspNet- etCore\De- 17 Active
‘Aluno’ could be Core moAspNet-
found (are you Core\Pages\
missing a using AlunoView.
directive or an cshtml
assembly refer-
ence?)
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).

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

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:
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

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.

Existem outras formas para desenvolvermos as nossas aplicações ASP.
NET Core sem utilizarmos páginas Razor?
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.

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 alguns conceitos 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.

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

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.

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
Anderson Emidio de Macedo Gonçalves
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.
Seção 1 | Padrão HTML5

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 2 | Estilo CSS e Java Script

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
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.
Seção 3 | Linguagem PHP

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.
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ém algumas 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.
Seção 1
Padrão HTML5
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).
Figura 2.1 | Containers em HTML5
Fonte: elaborada pelo autor.
34 U2 - Tecnologias para programação web

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.
Figura 2.2 | Elementos em HTML5
Fonte: Sanders (2012, p. 9).
U2 - Tecnologias para programação web 35

O número de elementos é bem extenso. Na Figura 2.2 e 2.3 estão
presentes alguns deles.
Figura 2.3 | Elementos em HTML5
Fonte: Sanders (2012, p. 10).
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.

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.

Por questões apenas de padronização todos os navegadores aqui
apresentados estarão com o Google carregado: <http://www.google.
com.br>.
Figura 2.4 | Navegador Internet Explorer (IE)
O Internet Explorer é o navegador padrão da Microsoft. Atualmente,

a versão mais recente é a versão EDGE, apresentada na Figura 2.5.
Figura 2.5 | Navegador Internet Explorer (versão EDGE)

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.
Figura 2.6 | Navegador FireFox Mozilla
Na Figura 2.7 é exibida o famoso Google Chrome, um dos

navegadores mais populares da atualidade.
Figura 2.7 | Navegador Google Chrome

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.
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 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 que temos e os atributos são as
características que podemos alterar para cada elemento.

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>.

Seção 2
Estilo CSS
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.

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".
Figura 2.9 | Código do arquivo "estilo.css"

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.
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.

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.

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.
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

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.
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.
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.
Figura 2.14 | Mensagem para idade menor que 18 anos

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.
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.
1. A propriedade position do CSS3 refere-se ao posicionamento usado para
um determinado elemento HTML.
Quais valores essa propriedade permite?

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.

Seção 3
Linguagem PHP
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.

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.

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.

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

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.
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.

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:
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.

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.

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

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.

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
Paulo Henrique Terra
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.
Seção 1 | Padrões de projeto

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 2 | O padrão MVC

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.
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!
Seção 1
Padrões de projeto
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
60 U3 - O padrão MVC
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 MVC 61
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.
Figura 3.1 | Estrutura do MVC
Fonte: César (2017).
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.

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.
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.
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.
Seção 2
O padrão MVC
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,
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.
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
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:
Figura 3.2 | Estrutura básica do MVC
Fonte: <http://www.tutorialized.com /tutorial/Fundamentals-of-an-MVC-Framework/81946>. Acesso em: 1 set. 2017.
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.
Figura 3.3 | Acesso simultâneo à aplicação
Fonte: adaptado de <http://www.dsc.ufcg.edu.br/~jacques/cursos/map/html/arqu/mvc/mvc.htm>. Acesso em: 1 set.

2017.
Quadro 3.1 | O padrão Modelo-Visão-Controlador (MVC)
Nome MVC (Modelo-Visão-Controlador)

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
Descrição 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.
A Figura 3.5 mostra a arquitetura de um sistema aplicati-
Exemplo vo baseado na internet, organizado pelo uso do padrão
MVC.
É usado quando existem várias maneiras de se visualizar e
interagir com dados. Também quando são desconhecidos
Quando é usado
os futuros requisitos de interação e apresentação de
dados.
Permite que os dados sejam alterados de forma indepen-
dente de sua representação, e vice-versa. Apoia a apre-
Vantagens sentação dos mesmos dados de maneiras diferentes,
com as alterações feitas em uma representação apare-
cendo em todas elas.
Quando o modelo de dados e as interações são simples,
Desvantagens pode envolver código adicional e complexidade de có-
digo.
Fonte: adaptado de Sommerville (2011, p. 109).
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
padrão é utilizado para gerenciamento de interações em um sistema
baseado em Web.
Figura 3.4 | Organização do MVC
Visão
Controlador
Seleção Modelos renders
Mapeia ações de usuário de visão Solicita atualização de
para atualizar modelo modelo
Envia eventos de usuário
Seleciona visões Eventos de para controlador
usuário
Notificação
de mudança
Mudança Consulta de
de estado estado
Modelo
Encapsula estado de aplicação
Notifica visão de mudanças
de estado
Fonte: adaptado de Sommerville (2011, p. 109).
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,
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.
Figura 3.5 | Fluxo de eventos e informações na arquitetura MVC
Entrada de
informações
VIEW CONTROLLER
Altera o modelo
(business logic)
Modelo lança
eventos, indican-
do mudanças MODEL
Fonte: adaptado de <http://www.dsc.ufcg.edu.br/~jacques/cursos/map/html/arqu/mvc/mvc.htm>. Acesso em: 1 set.

2017.
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 de projeto,
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.
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.
Figura 3.6 | A diferença entre framework e uma biblioteca de classes
Fonte: <http://www.dsc.ufcg.edu.br/~jacques/cursos/map/html/frame/oque.htm>. Acesso em: 1 set. 2017.
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.
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
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
Figura 3.7 | Diferença entre framework e uma biblioteca de classes
Fonte: Martins (2005).
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.

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.
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.
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ários pode 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.

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
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!

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.
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.
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
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 modelo MVC - 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
Anderson Emidio de Macedo Gonçalves
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.
Seção 1 | API JDBC

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 2 | Interface PreparedStatement

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 3 | API mysqli_connect

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,

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.
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.
Seção 1
API JDBC
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.
84 U4 - Tecnologia de acesso ao banco de dados

Figura 4.1 | Repositório de dados
Fonte: <http://mediablog.sistemasinformacao.com/sad.jpg.>. Acesso em: 12 out. 2017.
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 dados 85

Figura 4.2 | Esquema JDBC
Imple-
Inter- men-
Cliente
face tação
BD
JDBC JDBC
Qual?
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.
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:
• onectar() - método que fará a conexão com o banco de
c
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.
• onstrutor - o método construtor executado no momento da
c
instância da classe "Conexão.java" fará a chamada do método
conectar(), acima mencionado.

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 o banco.
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.
Figura 4.4 | Mensagem de conexã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.

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().

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

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.
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:

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.

Seção 2
Interface PreparedStatement
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.
Figura 4.8 | Inserção de dados em uma tabela de forma fixa

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

interrogações (caractere coringa) para termos uma ideia de como
funciona essa logística. Acompanhe a seguir:
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.
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".

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.
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

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.

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.
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?
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.

Seção 3
API mysqli_connect
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.
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

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.
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.

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.
Figura 4.14 | Function pedido parte 2
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.

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.
1. Considere o código PHP:
As saídas ou resultados esperados para 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.
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.

Fique ligado
Resumo dos itens estudado nesta unidade:
• API Conexão JDBC.
• Interface PreparedStatement.
• API mysqli_connect.

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.

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.

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:
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:

O que será impresso na tela? Assinale a alternativa correta:
a) False.
b) Não achei.
c) Achei.
d) True.
e) Achei, sim.

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

Programação para Web II

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Programação para Web II

Enviado por

Direitos autorais:

Formatos disponíveis

Programação

Anderson Emídio Macedo Gonçalves

Vice-Presidente Acadêmico de Graduação

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

Gonçalves, Anderson Emídio Macedo

1. Sites da web – projetos – programas de computador.

Unidade 1 | Framework: conceitos básicos no desenvolvimento web 7

Seção 1 - Introdução ao framework 10

Seção 2 - Compreendendo a programação 18

Unidade 2 | Tecnologias para programação web 31

Seção 1 - Padrão HTML5 34

Seção 2 - Estilo CSS 42

Seção 3 - Linguagem PHP 49

Unidade 3 | O padrão MVC 57

Seção 1 - Padrões de projeto 60

Seção 2 - O padrão MVC 65

Unidade 4 | Tecnologia de acesso ao banco de dados 81

Seção 1 - API JDBC 84

Seção 2 - Interface PreparedStatement 93

Seção 3 - API mysqli_connect 98

Framework: conceitos básicos

Pensar na construção de uma aplicação partindo exclusivamente

Seção 1 | Introdução ao framework

Seção 2 | Compreendendo a programação

Nesta seção, apreenderemos conceitos de framework e suas

10 U1 - Framework: conceitos básicos no desenvolvimento web

Figura 1.1 | Componentes do .NET

Fonte: <https://docs.microsoft.com/en us/dotnet/articles/standard/media/components.png>. Acesso em: 26 abr. 2017.

U1 - Framework: conceitos básicos no desenvolvimento web 11

12 U1 - Framework: conceitos básicos no desenvolvimento web

U1 - Framework: conceitos básicos no desenvolvimento web 13

Fonte: elaborado pelo autor.

Já a classe de inicialização (Startup.cs) tem um grau de complexidade

Quadro 1.2 | Configurações através da classe Startup

Fonte: elaborado pelo autor.

14 U1 - Framework: conceitos básicos no desenvolvimento web

Quadro 1.3 | Habilitando arquivos estáticos

Fonte: elaborado pelo autor.

U1 - Framework: conceitos básicos no desenvolvimento web 15

Para saber mais

Questão para reflexão

16 U1 - Framework: conceitos básicos no desenvolvimento web

2. A representação de um dado na programação está diretamente

U1 - Framework: conceitos básicos no desenvolvimento web 17

Nesta seção, vamos compreender como a programação de

Quadro 1.4 | Utilizando HTML no Razor

Fonte: elaborado pelo autor.

Como já falado, Razor suporta a utilização da linguagem de

18 U1 - Framework: conceitos básicos no desenvolvimento web

Quadro 1.5 | Mesclando HTML e C#

Fonte: elaborado pelo autor.

2.3 Estruturas de controle

U1 - Framework: conceitos básicos no desenvolvimento web 19

Fonte: elaborado pelo autor.

Perceba que apenas a estrutura de repetição for que iniciamos com

20 U1 - Framework: conceitos básicos no desenvolvimento web

Fonte: elaborado pelo autor.

A classe Aluno, como já observado, representará o modelo do dado

Quadro 1.8 | Criando visão baseada no modelo

Fonte: elaborado pelo autor.

U1 - Framework: conceitos básicos no desenvolvimento web 21

Quadro 1.9 | Checagem da visão pelo compilador

Fonte: elaborado pelo autor.