Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Livro Texto - Unidade IV pdf Desenvolvimento de Software para internet
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
163
Unidade IV
7 ESTAÇÃO JAVASCRIPT
7.1 JavaScript
7.1.1 Introdução ao JavaScript
A linguagem de programação JavaScript pode ser utilizada em conjunto com o HTML e o CSS na
construção de páginas web. Trata-se de uma linguagem muito conhecida, capaz de modificar conteúdos
HTML e estilos CSS de forma dinâmica. Com ela, podemos criar diversos conteúdos, como controles de
mídias, gráficos e animações, que fornecem interatividade e versatilidade às nossas páginas.
Em arquivos HTML, podemos inserir trechos de código JavaScript tanto na seção <body> quanto na
seção <head> do documento. Esses códigos devem ser inseridos dentro das marcas <script> e </script>
e, dessa forma, são interpretados pelo navegador como trechos JavaScript.
Da mesma forma que podemos criar um arquivo de estilos CSS externo que se comunica com um
arquivo HTML, podemos trabalhar com scripts. Arquivos externos JavaScript possuem extensão .js e
são práticos quando várias páginas utilizam os mesmos scripts. Nos exemplos a seguir, no entanto,
utilizaremos scripts inseridos no próprio código HTML, para facilitar nosso entendimento.
7.1.2 Relembrando conceitos de linguagens de programação
Como em outras linguagens de programação, o JavaScript trabalha com variáveis. Uma variável é
um espaço de memória reservado para abrigar determinado dado. Para criar variáveis em JavaScript,
podemos utilizar o comando var. Também podemos declarar constantes por meio do comando const.
Por exemplo, na linha a seguir, declaramos uma variável. No caso, o nome da variável é nomeUsuario,
e o valor atribuído a ela é “Ana”.
var nomeUsuario = “Ana”;
Também fazemos uso de funções. Uma função é um conjunto de instruções que executa uma tarefa
específica, sendo que essa execução ocorre quando a função é chamada.
Para declararmos uma função em JavaScript, podemos utilizar o termo function, seguido do nome
da função com seus parâmetros entre parênteses. Os parâmetros são variáveis que aguardam os dados
que passamos à função quando ela é chamada. Entre chaves, escrevemos o código que compõe o
bloco de instruções da nossa função. Por exemplo, a função a seguir, denominada somanum, retorna a
variável soma, que abriga o resultado da soma entre os parâmetros num1 e num2.
Unidade IV
164
function somanum(num1, num2){
var soma = num1 + num2;
return soma;
}
Observe o código apresentado na figura a seguir.
Figura 145 – Exemplo de código JavaScript com uma função declarada
Dentro do elemento <script>, posicionamos a função somanum. Na linha 16, utilizamos o comando
document.write(), que imprime o conteúdo em tela, para exibir o retorno da função somanum. Observe
que chamamos a função no formato somanum(5, 11). Com isso, passamos os argumentos 5 e 11 para os
parâmetros num1 e num2, respectivamente. Dessa forma, a variável num1 assume valor 5, e a variável
num2 assume valor 11. O arquivo HTML, quando executado no navegador, é apresentado conforme a
figura seguinte.
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
165
Figura 146 – Resultado da execução do exemplo
Como em qualquer linguagem de programação, também podemos utilizar:
• operadores (aritméticos, lógicos, de atribuição etc.);
• estruturas de decisão (como o if);
• estruturas de repetição (como o laço for).
No entanto, quando tratamos de JavaScript, os objetos são o centro do seu desenvolvimento: quase
tudo é um objeto ou age como um objeto. Assim, no próximo tópico, iremos examinar a criação de
objetos em JavaScript.
7.1.3 Objetos JavaScript
No contexto do JavaScript, um objeto nada mais é do que uma coleção de propriedades. Propriedades,
por sua vez, são associações entre nomes e valores. Antes de analisarmos qualquer código JavaScript,
vamos raciocinar sobre isso com base na tabela do exemplo de aplicação a seguir.
Exemplo de aplicação
Tabela 2 – Alunos alocados no banco de dados
Aluno
Nome da propriedade: Valor da propriedade:
Idade: 33
Gênero: Masculino
A palavra “aluno” na tabela é apenas um rótulo para o grupo de nomes de propriedades e valores
correspondentes que compõem exatamente o que é um aluno. JavaScript, no entanto, não fala em
tabelas, e sim em objetos. Os exemplos poderão ser desenvolvidos no Visual Studio Code, no Microsoft
Visual Studio, no Sublime Text ou no editor de sua preferência.
Unidade IV
166
Figura 147 – Exemplo de código JavaScript
Mantenha este estudo em primeiro plano: os objetos são apenas recipientes para propriedades, em
que cada uma detém um nome e um valor. Podemos acessar as propriedades de um objeto utilizando a
notação de ponto, na seguinte sintaxe:
nomeDoObjeto.nomeDaPropriedade
No nosso exemplo, aluno é um objeto JavaScript que nós criamos na linha 6, fornecendo as suas
propriedades nas linhas 8 e 9.
Até o momento, o objeto aluno que estamos estudando tem apenas informações estáticas. Como
estamos lidando com uma linguagem de programação, queremos programar nosso objeto para
realmente tentar fazer alguma coisa; caso contrário, tudo o que temos seria um banco de dados
semelhante ao JSON.
Para dar vida ao objeto aluno, precisamos adicionar um método, que possibilitará a execução de uma
função. Em JavaScript, um método é uma propriedade de um objeto que é também uma função. Ou
seja, um método é uma função associada a um objeto, cuja intenção é simplesmente operar no objeto
em que a função está contida.
Utilizamos o comando document.write() anteriormente em nosso livro-texto. Vamos agora entender
sua constituição. O próprio arquivo HTML é considerado um objeto do tipo document. Para o objeto
document, o Javascript oferece o método write(), que possui a função de imprimir em tela. Dessa forma,
a chamada do método pode ser feita obedecendo à sintaxe:
nomeDoObjeto.nomeDoMetodo
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
167
Portanto, para chamar o método write() do objeto document, escrevemos document.write().
O comando console.log(), visto no nosso exemplo anterior, também chama o método log() do objeto
console. Nesse caso, são enviados dados para o console do navegador, que podem ser visualizados (se
você está utilizando o Chrome, aperte F12 e clique em “Console” para visualizar os dados).
Vamos voltar ao exemplo da tabela anterior. Se porventura atualizarmos a tabela com um método
getGenero, teremos o que segue.
Tabela 3 – Método getGenero apresentado na classe aluno
Aluno
Propriedade Valor da propriedade
Idade 33
Gênero Masculino
getGenero Retornar o valor do sexo
O método getGenero é uma propriedade do objeto aluno (conforme apresentado na figura a seguir),
utilizado para retornar um dos outros valores de propriedade de aluno: o valor masculino armazenado
na propriedade gênero. Assim, podemos avaliar que, sem métodos, nosso objeto não faria muito, exceto
armazenar propriedades estáticas.
Figura 148 – Método getGenero apresentado no JavaScript
Unidade IV
168
Saiba mais
A JavaScript Object Notation (JSON), notação de objetos JavaScript, é
considerada uma formatação leve de alternância de dados. Leia sobre o
assunto na indicação a seguir.
Disponível em: https://bit.ly/3LX9Oql. Acesso em: 10 maio 2022.
Utilizamos a função construtora Object() para produzir um objeto vazio que chamamos de aluno.
Podemos pensar nas funções construtoras como um modelo para produzir objetos predefinidos. Dessa
forma, as funções construtoras servem de molde para a criação de novos objetos no JavaScript.
Aluno é um objeto construído a partir do construtor Object(). Então, chamamos aluno de Object().
O que realmente precisamos definir de maneira clara é que, além da criação de um Object() simples
como aluno, a maioria dos valores expressos em JavaScript são também objetos.
Vamos considerar que o objeto aluno criado a partir da função construtora Object() não seja
realmente distinto de um objeto string criado a partir da função construtora String().
Figura 149 – Exemplo de construtor JavaScript
Como podemos observar no exemplo anterior, myObjecte myString são objetos. Dessa forma,
ambos podem ter suas propriedades, herdá-las, e são produzidos a partir de uma função construtora.
A variável myString, que acopla o valor da string foo, parece ser a mais simples possível, porém de
forma surpreendente possui uma estrutura de objeto sob sua superfície. O resultado da execução, no
console do navegador, pode ser visto na figura a seguir.
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
169
Figura 150 – Console do navegador após execução do exemplo de construtor JavaScript
Se examinarmos os dois objetos produzidos, vamos perceber que eles são objetos idênticos em
substância, mas não em tipo. O mais importante é que possamos visualizar que o JavaScript utiliza
objetos para expressar valores, conforme apresentado na figura a seguir.
Figura 151 – Exemplo de construtor JavaScript: pessoa
Unidade IV
170
A função construtora Pessoa() definida pelo usuário pode produzir objetos pessoa. Logo, a função
construtora String() nativa pode produzir objetos string. O construtor Pessoa() não é inferior e não é
mais ou menos maleável do que o construtor String() nativo ou qualquer um dos construtores nativos
utilizados no JavaScript.
É importante observar que a função construtora Object() e o novo construtor Pessoa(), mostrados no
exemplo de código anterior, podem nos dar resultados idênticos, mas ambos podem produzir um objeto
semelhante, com as mesmas propriedades e os mesmos métodos de propriedade.
7.1.4 Construtores JavaScript criam e retornam instâncias de objetos
Conforme já abordado, o papel de uma função construtora é possibilitar o desenvolvimento de vários
objetos que compartilham, por exemplo, certas qualidades e certos comportamentos. Basicamente,
uma função construtora é um “cortador de frutas” para produzir objetos que possuem propriedades e
métodos de propriedade padronizados.
Afirmar que um construtor nada mais é do que uma função é correto, a menos que essa função seja
chamada usando a nova palavra-chave, como a nova String (foo). Quando isso tende a acontecer, uma
função assume uma atribuição especial, e o JavaScript a trata como especial, definindo, assim, o valor
desse elemento para a função no novo objeto que está sendo construído.
Além desse comportamento especial, a função retornará o objeto recém-criado por padrão, em
vez do valor false. O novo objeto retornado da função pode ser considerado uma instância da função
construtora que a constrói.
Por exemplo, podemos considerar o construtor Pessoa() novamente, mas, desta vez, gostaríamos que
acompanhasse a leitura dos comentários no exemplo de código com atenção, pois destacam o efeito da
nova palavra-chave, conforme apresentado a seguir.
Figura 152 – Exemplo de construtor
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
171
A construção do código anterior utiliza uma função construtora definida pelo usuário, por exemplo,
Pessoa(), para criar o objeto aluno. Isso não é diferente do construtor Array(), que cria um objeto Array(),
conforme apresentado a seguir.
Figura 153 – Exemplo de código com Array
Em JavaScript, a maioria dos valores envolve objetos que foram criados, ou instanciados, a partir de
uma função construtora. Um objeto retornado de um construtor é denominado de instância.
Observação
Array, em tecnologia, pode ser definido como um arranjo de uma
estrutura de dados capaz de proporcionar o armazenamento de uma coleção
de elementos de tal maneira que cada um possa ser facilmente identificado
por pelo menos um índice ou uma chave.
7.1.4.1 Os construtores de objetos JavaScript nativos
A linguagem JavaScript tem por definição nove construtores de objetos nativos (ou internos), sendo
que esses objetos são utilizados pelo JavaScript para desenvolver a linguagem. Por construção, podemos
dizer que esses objetos são utilizados para expressar valores de objetos no código JavaScript, além de
organizar diversos recursos da linguagem.
Logo, os construtores de objetos nativos podem ser multifacetados, na medida em que produzem
objetos, mas também são aproveitados para facilitar muitas das convenções de programação da
linguagem, como funções que são objetos criados a partir do construtor Function(). Também são
utilizados para gerar outros objetos quando chamados como funções de construtor utilizando a
nova palavra-chave.
Unidade IV
172
Os nove construtores de objetos nativos que vêm predefinidos com JavaScript são os que seguem.
• Number()
• String()
• Boolean()
• Object()
• Array()
• Function()
• Date()
• RegExp()
• Error()
Saiba mais
Recomendamos a leitura dos nove construtores de objetos nativos
indicada a seguir.
STANDARD built-in objects. JavaScript Reference. Mozilla, 2022.
Disponível em: https://mzl.la/3M5xY1Q. Acesso em: 10 maio 2022.
O JavaScript é constituído basicamente a partir desses nove tipos de objetos, além de valores
primários de cadeia, número e booleano.
7.1.5 Funções a partir do construtor Function()
Já abordamos que uma função é um contêiner de instruções de código que podem ser chamadas
utilizando o operador parênteses (). Logo, os argumentos podem ser trafegados entre parênteses
durante a invocação, para que as instruções na função possam acessar determinados valores quando
ela é invocada.
No exemplo apresentado na figura a seguir, identificaremos a construção de duas versões de um
objeto de função addNumbers, uma utilizando o construtor Function() e outra utilizando o padrão
literal mais comum. Ambas estão esperando dois parâmetros, ou seja, em cada caso invocamos a função
passando parâmetros no operador parênteses ().
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
173
Figura 154 – Exemplo de aplicação do addNumbers
Uma função pode ser utilizada para retornar um valor, construir um objeto ou ser um mecanismo
destinado simplesmente a executar o código. Ou seja, o JavaScript tem uma utilidade para funções, mas,
na sua maneira mais básica, uma função é simplesmente um escopo exclusivo de instruções executáveis.
O construtor Function() utiliza-se de um número indefinido de parâmetros, mas o último parâmetro
esperado pelo construtor Function() é uma sequência que contém instruções que compõem o corpo
da função. Quaisquer parâmetros trafegados para o construtor antes do último estarão disponíveis
para a função que está sendo criada, ou seja, também é possível enviar vários parâmetros como uma
sequência separada por vírgula.
No exemplo apresentado na figura a seguir, estudaremos o uso do construtor Function() com os
padrões mais comuns de instanciar um objeto de função.
Figura 155 – Exemplo de aplicação de function
Unidade IV
174
As funções podem ser canceladas a qualquer instante durante a chamada, utilizando-se, para isso, a
palavra-chave return com ou sem um valor. No exemplo apresentado na figura a seguir, identificaremos
o cancelamento da função de adição se os parâmetros forem indefinidos ou não forem um número.
Figura 156 – Exemplo de cancelamento de function
7.1.6 Aplicações do método getElementById()
O JavaScript possui muitas funcionalidades. Entre as funcionalidades mais interessantes,
temos o método getElementById(), que nos possibilita modificar elementos HTML a partir de seus
identificadores. Esse método é muito funcional quando utilizado em eventos de clique de elementos,
como botões. Acompanhe o exemplo da figura a seguir.
Figura 157 – Exemplo de utilização do método getElementById()
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
175
No exemplo, temos um título <h2>, para o qual foi designado o ID th2, no corpo do documento
HTML. Esse elemento será modificado a partir dos cliques nos dois botões criados. Nos botões, vemos a
propriedade onclick, que recebe o valor designado entre aspas. Vamos examinar o valor do primeiro botão.
document.getElementById(“th2”).innerHTML = “Olá!”
O termo “document” refere-se ao objeto, que, no caso, é o próprio documento HTML. O método
getElementById(“th2”) procura o elemento existente no objeto que possui o ID igual a th2.Depois,
temos a propriedade innerHTML, que acessa o conteúdo interno de um elemento. Logo, o que fazemos
com esse comando é modificar para “Olá” o conteúdo interno do elemento que possui o ID th2. Essa
ação ocorrerá quando o botão for acionado pelo usuário. Ao executar o arquivo no navegador, vemos
o que é apresentado a seguir.
Figura 158 – Resultado da execução do exemplo utilizando o método getElementById()
Ao clicar no botão “Clique para Olá”, o texto do título <h2> é modificado para “Olá!”. Ao clicar no
botão “Clique para Oi”, o texto é modificado para “Oi!”.
No exemplo a seguir, vamos modificar o estilo CSS adotado em um parágrafo. Avalie o código
apresentado na figura.
Figura 159 – Exemplo de utilização do método getElementById() para mudança de estilo
Unidade IV
176
Perceba que, no elemento <p>, temos um estilo CSS inline, que ajusta a cor do conteúdo do parágrafo
para azul. O ID desse elemento é parag. O papel dos botões, no caso, é justamente modificar o valor
da propriedade style do elemento cujo ID é igual a parag. Logo, aqui, não modificamos o conteúdo em
si, como fizemos no exemplo anterior, mas sim o estilo do conteúdo do elemento. Ao executarmos o
arquivo, vemos a tela a seguir.
Figura 160 – Resultado da execução do exemplo de mudança de estilo
Ao clicar no botão “Clique para verde”, o texto do parágrafo passa a ser exibido em verde. Ao clicar
no botão “Clique para vermelho”, o texto passa a ser exibido em vermelho.
No exemplo seguinte, utilizamos funções criadas por meio do construtor Function(). As funções
devem ser descritas dentro da tag <script>. Acompanhe a seguir.
Figura 161 – Exemplo de utilização do método getElementById() dentro de funções
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
177
No caso, também modificamos o estilo, mas escolhemos mexer na cor de fundo do elemento <div>,
que se encontra no corpo do documento HTML. Ao clicar em um botão, chamamos a função designada
na propriedade onclick. Ao executar o arquivo, vemos a tela seguinte.
Figura 162 – Resultado da execução do exemplo com funções
Ao clicar no botão “Clique para azul”, a cor de fundo do elemento <div> é modificada para azul. Ao
clicar no botão “Clique para verde”, a cor de fundo é modificada para verde, conforme demonstrado a
seguir. No caso, a cor do conteúdo (a cor do texto “Divisão div”) mantém-se inalterada.
Figura 163 – Resultado após clicar no botão “Clique para verde”
7.1.7 Array
Um array (matriz) é uma lista ordenada de valores, normalmente criada com a finalidade de
percorrer valores indexados, iniciando com o índice zero. O que precisamos saber é que um array em
posição de objeto possui uma definição de nomes e de propriedades associada a valores em ordem não
numérica também.
Essencialmente, as matrizes utilizam números como uma chave de pesquisa, enquanto os objetos têm
nomes de propriedades definidas pelo usuário. O JavaScript não possui matrizes associativas verdadeiras,
mas os objetos podem ser utilizados para obter essa funcionalidade de matrizes associativas.
No exemplo apresentado na figura a seguir, iremos armazenar quatro sequências de caracteres no
myArray, que poderemos acessar utilizando um índice numérico.
Unidade IV
178
Figura 164 – Exemplo de aplicação de array
Podemos passar os valores de uma instância de matriz para o construtor como parâmetros separados
por vírgula. O construtor Array() pode levar aproximadamente até 4.294.967.295 parâmetros.
No entanto, se apenas um parâmetro for enviado ao construtor Array() e esse valor for um número
inteiro, ele será utilizado para realizar a configuração do comprimento da matriz e não será utilizado
como um valor contido na matriz, conforme apresentado a seguir.
Figura 165 – Exemplo de aplicação de array com parâmetros
7.2 Uso de roteamento de soluções MVC
O MVC (model → view → controller) pode ser considerado um pattern de arquitetura para o
desenvolvimento de aplicações web. Ele pode estabelecer a segregação de três camadas, model, view e
controller, sendo que se pode considerar que a camada model corresponde a dados e regras determinadas
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
179
para a manipulação de todos os itens. Todas as estruturas são manipuladas inicialmente por controllers,
servindo como base para a implementação e apresentação de dados pela camada view.
Observação
Os estudos de diagramação UML e de diagrama de sequência agregam
elementos para o entendimento do conceito de aplicação MVC, pois são
recursos que se complementam na análise e no desenvolvimento de
aplicações em camadas web.
A camada controller tem for finalidade tratar todas as requisições, sendo, assim, efetuada por meio
de métodos declarados na mesma classe controller. Por fim, a camada view tem o objetivo de centralizar
todas as ações e apresentá-las dentro da página .aspx.
Pode-se entender todo o fluxo da maneira exposta a seguir.
• A camada de apresentação apresenta elementos da interface do cliente do site e encapsula
toda a estrutura lógica, o que inclui desde a interação até a integração de cliente e as regras
de negócio.
• A camada de controle, também conhecida como camada de negócio, retorna ao cliente o resultado
de toda a regra de negócio encapsulada na classe (C#).
• A camada de acesso a dados detém todos os métodos e todas as conexões inseridas, que retornam
para a camada de negócio toda a execução efetuada em banco de dados, feita em classe (C#).
Observação
Para o desenvolvimento de todas as classes (de controle ou de acesso
a dados ou modelo), recomendamos a utilização de classes C# e o uso de
conhecimentos relativos à programação orientada a objetos.
A arquitetura de três camadas também pode ser estudada como uma solicitação enviada ao servidor,
na qual a interface com o cliente efetua processos de regras de negócio a fim de armazenar dados que
são desenvolvidos e armazenados de maneira independente, ou até mesmo em plataformas separadas,
conforme apresentado a seguir.
Unidade IV
180
Figura 166 – Exemplo de aplicação MVC
Após a seleção do template (figura anterior), será criado o projeto utilizando a arquitetura ASP.NET MVC,
apresentado nas figuras a seguir.
Figura 167 – Identificação de projeto MVC no Visual Studio .NET
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
181
Figura 168 – Escolha de template dentro do Visual Studio
Saiba mais
Recomendamos a leitura do seguinte livro-texto, especialmente o
tópico que trata de back-end, que usaremos como linguagem base C#.
MARINHO, S. L. Programação Orientada a Objetos II. São Paulo:
Editora Sol, 2020.
Sugerimos também a instalação da última versão do Visual Studio,
para que o exemplo apresentado em Web Forms possa ser executado com
sucesso. Para a verificação da última versão do Microsoft Visual Studio,
consulte o link indicado a seguir.
DOWNLOADS. Visual Studio. Microsoft, 2022. Disponível em:
https://bit.ly/38kvez5. Acesso em: 10 maio 2022.
Atualmente, a maioria dos projetos é desenvolvida utilizando a arquitetura MVC, em virtude da
segregação de código e, principalmente, do paralelismo que é feito com a parte de análise do projeto.
O conceito de MVC vem ao encontro de alguns diagramas da UML (tais como o diagrama de caso de
uso, sequência e classe), que são de extrema importância para o desenvolvimento de qualquer aplicação.
Unidade IV
182
Observação
No contexto aqui analisado, o estudo de diagramas UML é essencial. Por
exemplo, os conceitos de diagrama de caso de uso, diagrama de sequência,
classe e atividade são a base de todo o desenvolvimento web efetuado
neste livro-texto.
7.3 Razor
O Razor agrega uma série de características importantes que possibilitam, por intermédio de um
objetivo natural, a construção de páginas com a estrutura de ASP.NET MVC. No entanto, essa ideia
nasceu a partir da versão 3.
Uma das características importantes construídas no Razor é que ele foi desenvolvido para ser
expressivo, compacto e ágil. A intenção foi construir um mecanismo capazde reduzir ao máximo o
número de caracteres necessários para a codificação de uma página aspx.
O View Engine Default do ASP.NET (aspx) é conhecido por possuir uma sintaxe muito
próxima à do HTML, com abertura e fechamento de tags em páginas aspx. No Razor, não
conseguimos identificar esse item, reduzindo, portanto, a quantidade de texto necessária
para a codificação de itens contidos em controle, ou parte da página aspx.
Tratando exclusivamente da redução significativa de caracteres, do ponto de vista do
programador da página aspx, todo o processo passa a ficar muito mais eficaz, o que significa
que se perde menos tempo na codificação das páginas aspx. Ao contrário da maioria dos
View Engines, com o Razor não é necessário ficar desenvolvendo abertura e fechamento
dos blocos de código. O parser do Razor é inteligente e capaz de separar o código HTML do
código C# ou VB.NET, por exemplo.
Todo esse universo garante um código eficaz e limpo, não só facilitando a sua escrita
inicial, mas também deixando fácil a manutenção posterior nessas páginas aspx.
Outra característica muito importante do Razor é a sua facilidade de aprendizagem.
Podemos considerar como um dos pontos a sua composição de HTML e C# (ou vb.net).
Qualquer programador .NET com conhecimento básico em HTML conseguirá com grande
facilidade capturar a estrutura do Razor e, em pouco tempo, terá conhecimento para
escrever páginas aspx com o novo template.
Outro ponto importante do Razor é o fato de ele não ser uma nova linguagem, ou seja,
ao contrário de todos os View Engines existentes, o Razor utiliza sua própria linguagem
C#/VB, o que torna sua aderência ainda mais efetiva e eficaz.
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
183
O Razor não depende exclusivamente de nenhuma ferramenta para ser escrito, ou seja,
não dependeria também do Visual Studio. É possível desenvolver páginas com o Razor
em qualquer editor de texto, até mesmo no Notepad, caso seja necessário utilizar essa
ferramenta para tal desenvolvimento.
Ao escolher utilizar o Razor no Visual Studio, o programador consegue ganhar todos
os recursos de intellisense e statement completion (recurso que completa palavras do
código que podem ser automaticamente identificadas). Com esses recursos, o processo de
desenvolvimento de páginas se torna ainda mais rápido e eficiente.
Outro ponto interessante do Razor é que ele é totalmente amigável para efetuar
testes, trabalhando com testes unitários. Com o Razor, é possível criar testes unitários para
verificação das views da aplicação web, sem que haja necessidade de conhecer o controller
que renderiza a view e vice-versa.
Mesmo assim, ele passa a ser apenas mais uma escolha a se fazer ao criar as views de
uma aplicação web. O View Engine Default do ASP.NET sempre irá funcionar e ser uma
grande opção.
Adaptado de: Sendin (2009).
7.4 Rest
Podemos definir representational state transfer (Rest) como um estilo de arquitetura que se assenta
em uma série de princípios. A ascensão do Rest nos últimos anos está ligada ao design da API que a
maioria dos aplicativos da web oferece para estender suas funcionalidades. Mesmo que não esteja
vinculado ao HTTP, ele geralmente está associado aos aplicativos da web. O HTTP se encaixa bem com
os seus princípios.
Os princípios do Rest são: interface uniforme, sem estado, armazenável em cache, cliente-servidor,
sistema em camadas e código sob demanda.
Essa é uma breve introdução à arquitetura Rest. O que precisamos entender é o princípio básico
e uma imagem geral do aplicativo. A ideia do Rest sobre HTTP é usar a funcionalidade do protocolo o
máximo possível, para que não tenhamos que reinventar a roda.
Um recurso pode ser uma postagem em um blog, um cliente, um documento e, em geral, qualquer
coisa que desejamos expor. Um recurso tem um identificador, como um registro em um banco de
dados tem uma chave primária. Da mesma maneira, um recurso possui um URI que identifica o próprio
recurso, que não é uma representação do recurso que pode assumir diferentes formatos. É apenas um
identificador que podemos usar para acessar o recurso.
Podemos solicitar o recurso com o URI, e o que obtemos é uma representação desse recurso solicitado
em um formato específico. O formato é negociado entre o cliente e o servidor e pode ser qualquer
Unidade IV
184
coisa, desde os XML e JSON mais usados até HTML, PNG, CSV ou outros formatos binários. Com a
representação do recurso, o cliente pode manipular o estado e operar com o recurso usando o servidor,
se tiver os direitos para fazê-lo.
O servidor nunca deve armazenar informações sobre os clientes. Isso significa que, quando uma
solicitação chega ao servidor, o servidor carrega o recurso do armazenamento (geralmente um banco
de dados) e envia de volta a representação ao cliente. Esse é o estado do recurso. Se um segundo
depois o estado no armazenamento for alterado devido a uma nova solicitação que chega, o cliente
não deve saber.
Sem estado também significa que o servidor nunca deve usar sessões ou outros mecanismos para
armazenar informações do cliente, e todas as solicitações não estão correlacionadas com solicitações
passadas ou futuras.
O servidor pode estender a funcionalidade do cliente passando o código executável. Por exemplo, um
servidor pode enviar JavaScript ao cliente para que ele possa executar algum tipo de operação nos dados.
Se lermos cuidadosamente esses princípios, notamos que o foco principal é a escalabilidade. O
fato de o servidor não armazenar informações do cliente permite economizar memória. O sistema
em camadas nos permite usar servidores de cache como um balanceador de carga para obter
escalabilidade. Adicionar novos servidores e seguir os princípios cliente-servidor nos permite alterar
a implementação (por exemplo, passando de um banco de dados SQL para o armazenamento NoSQL)
sem o conhecimento do cliente.
Mas como obtemos isso e como funciona? No documento original que descreve o Rest, Roy Fielding
não vincula a arquitetura Rest ao HTTP, mas, como afirmado anteriormente, o HTTP parece perfeito para
criar uma API Rest, já que a maioria das coisas nesse estado já está construída no próprio protocolo
(cache, por exemplo).
A web em si é Rest: temos o URL, que é o identificador da página que precisamos, digitamos o
URL no navegador para obter uma representação no formato HTML e usamos um link para transferir o
estado para outra página.
Um aspecto do Rest que contrasta com Soap (RPC) é que a operação no recurso é baseada no verbo
HTTP usado em combinação com o URI.
O HTTP tem a noção de verbos. Estamos acostumados a get e post, pois o navegador gerencia
esses dois verbos, mas outros são especificados na especificação HTTP (RFC 2616), que pode ser usada
para outras operações. A lista completa de verbos é: options, get, head, post, put, patch, delete,
trace e connect.
Eles podem ser usados com seu significado semântico. Portanto, quando precisamos ler um recurso,
podemos usar o método get, e, quando precisamos excluir um recurso, podemos usar um delete, e
assim por diante.
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
185
Como ilustrado no quadro a seguir, usando o URI correto e o verbo correto, temos as operações Crud
(criar, ler, atualizar, excluir) prontas para serem usadas.
Quadro 13 – Verbos e significados HTTP
Verbo URI Descrição
Get /posts Obtenha a lista de postagens
Get /posts/42 Obtenha uma única postagem (com o ID 42)
Delete /posts/42 Exclua a publicação 42
Post /posts Crie uma postagem
Put /posts/42 Atualize a postagem
Patch /post/42 Faça uma atualização parcial
Options /post/42 Recupere a operação disponível no recurso
Head /post/42 Retorne apenas o cabeçalho HTTP
Depois que uma solicitação é emitida para o servidor, ele a analisa e cria a resposta para retornar
os dados ou resultados ao cliente. Cada resposta é representada com um estado e um status HTTP, que
devem ser usados semanticamente para informar o cliente do resultado.
A operaçãoget é usada para ler um recurso. O URI especifica o recurso que estamos lendo, e podemos
usar o cabeçalho accept para solicitar um formato específico.
Quando o post é usado para criar um recurso, os dados do recurso são enviados ao servidor como
parte do corpo da solicitação. O servidor responde com o status “201 created” se tudo correr bem.
Quando um novo recurso é criado, é recomendado usar o cabeçalho location na resposta para especificar
o URI do recurso recém-criado.
O put é usado para modificar o recurso. O URI especifica o recurso que queremos modificar e o corpo
contém os novos valores de recurso. O código de status HTTP da resposta deve ser “200 OK” ou “204 sem
conteúdo” se a resposta não contiver o recurso modificado. Não é necessário retornar o URI do próprio
recurso no cabeçalho location, porque o cliente já o conhece.
O put deve ser idempotente, o que significa que o resultado de uma solicitação bem-sucedida é
independente do número de vezes que é executada. Deve ser possível fazer duas chamadas iguais para
o servidor, e este não deve retornar erros; a segunda chamada simplesmente refaz a atualização, mesmo
que não altere o recurso.
O delete é usado para excluir o recurso. O resultado pode ser “200 OK” ou “204 sem conteúdo” se a
resposta não contiver um corpo. Pode ser “404 não encontrado” se o URI não estiver correto e o recurso
não puder ser encontrado.
Unidade IV
186
7.5 Exemplo de web API
Dado que um aplicativo web ASP.NET MVC 4 foi criado, na segunda etapa, escolhe-se o modelo de
web API. Uma vez criado, o projeto é quase idêntico a um projeto clássico do ASP.NET MVC e, na verdade,
mantém muitos conceitos desse tipo de projeto.
Na figura a seguir, temos a estrutura da solução visualizada após a criação do projeto.
Figura 169 – Estrutura do projeto da API da web
Os itens mais importantes a serem observados são mostrados a seguir.
• As pastas controladores, modelos e exibições são obtidas do ASP.NET MVC. Como veremos mais
adiante, a web API usa o mesmo padrão MVC; portanto, temos controladores e modelos. Também
existe uma pasta Views, mas não é muito útil em um contexto de API, mesmo que possamos
retornar uma visualização ao nosso chamador.
• Além da pasta de visualizações, existem pastas de imagens, scripts e conteúdo. Elas não são
usadas com frequência, pois uma API geralmente é utilizada para retornar dados, não uma
interface do usuário.
• A pasta App_Start é usada para configurar a API. Ela contém vários configuradores para
configurar o comportamento da API. Essa pasta também apresenta algumas configurações
para a parte do ASP.NET MVC.
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
187
Como você pode observar com esse modelo de projeto, podemos criar aplicativos ASP.NET MVC e
aplicativos API, já que os dois têm muito em comum.
Vamos aprofundar um pouco o conteúdo abrindo a pasta Controllers e dando uma olhada na classe
ValuesController, conforme apresentado nas figuras a seguir.
Figura 170 – Controller: web API
Unidade IV
188
Figura 171 – Continuação do controller: web API
Após o uso e o namespace, encontramos uma declaração de classe. A classe ValuesController
herda de ApiController. Ela não é relativa à classe base do controlador usada no ASP.NET MVC, embora
tenha muitas semelhanças. Ela serve como uma classe base para todos os recursos que decidimos
expor por meio da API.
Nessa classe, encontramos todos os verbos padrão para manipular o recurso value: get, post, put e
delete. O nome dos métodos aqui é importante, pois o tempo de execução da web API do ASP.NET usa
convenções para encontrar a ação a ser chamada em uma solicitação HTTP. Portanto, o método get
é utilizado para obter uma coleção de valores e um único valor, considerando seu ID. O método put é
utilizado para inserir e modificar o recurso de valor (value), enquanto o método delete é utilizado para
excluir um recurso com o ID.
Como podemos observar, os cinco métodos são as ações chamadas contra uma solicitação HTTP get,
post, put ou delete.
Como um aplicativo web ASP.NET MVC, os projetos de web API usam um sistema de roteamento.
A configuração das rotas está em um arquivo chamado WebApiConfig.cs na pasta App_Start. Veja o
conteúdo desse arquivo apresentado a seguir.
Figura 172 – WebApiConfig.cs
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
189
Essa classe possui um método que é chamado a partir da classe WebApiApplication no global.asax.
Esse método registra as rotas necessárias pelo aplicativo. Por padrão, o ValuesController definido antes
responde ao URI/API/Values, como podemos ver no código anterior. Observe que essas rotas, apesar de
muito semelhantes às rotas do ASP.NET MVC, são uma pilha completamente diferente. Nesse caso, o
tipo de rota é IHttpRoute e a implementação está contida no assembly System.Web.Http, portanto é
completamente novo e não está vinculado ao System.Web.
Mesmo se forem diferentes, eles são implementados quase da mesma maneira: cada rota possui um
nome e um modelo que são “tokenizados” para corresponder aos padrões de entrada.
Até agora, vimos o controlador values, que tem o dever de gerenciar o recurso Values e um sistema
de roteamento simples para rotear a solicitação para o controlador correspondente. Vamos, então,
simular a execução do aplicativo web API para ver como ele funciona.
Uma vez executado, ele abrirá um servidor web local para uma porta específica. Em seguida,
construiremos um web API, para tratar o retorno de informações dos alunos, tais como nome, RA e
idade em formato JSON.
Exemplo de aplicação
Este exemplo será desenvolvido de maneira sequencial em suas figuras, utilizando-se o Visual Studio
2019. Na figura a seguir, observa-se a seleção do template aplicativo Web ASP.NET (.NET Framework).
Deve-se atentar à linguagem que será utilizada no back-end, que será o C#. Após validar as informações,
acionar o botão seguinte.
Define-se o nome do projeto na caixa “Nome do projeto” e em qual local do computador será
armazenado o exemplo. Após o preenchimento dos campos, acionar o botão “Criar”.
Figura 173 – Criando um projeto web API
Unidade IV
190
Escolhe-se o template web API e aciona-se o botão “Criar”.
Figura 174 – Criando um projeto web API
A seguir, é possível visualizar um Solution Explorer (gerenciador de soluções), com as pastas
Controllers e Models.
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
191
Figura 175 – Estruturando um projeto web API
Nesta etapa, criamos as classes indicadas a seguir.
• AlunoController.cs na pasta Controllers.
• Aluno.cs, AlunoRepositorio.cs e IAlunoRepositorio.cs na pasta Models.
Nas figuras a seguir, mostramos como criar uma classe dentro da pasta Models, clicando com o
botão direito e selecionando a opção “Adicionar” e, depois, “Classe” (nomeando-a, no exemplo, Aluno.cs).
Este passo deve ser seguido sempre que for solicitada a criação de uma classe na pasta Models,
Controller etc.
Unidade IV
192
Figura 176 – Adicionando uma classe
Figura 177 – Adicionando uma classe
Conforme indicado nas figuras adiante, desenvolve-se dentro da classe AlunoController os métodos
a seguir.
• GetAllAlunos: responsável por apresentar todos os dados dos alunos cadastrados.
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
193
• GetAluno: responsável por apresentar o registro de um aluno específico que foi solicitado
através do seu RA.
• GetAlunosPorIdade: responsável por apresentar o registro de um aluno específico que foi
solicitado através da sua idade.
• GetPostAluno: responsável por adicionar um registro de um aluno.
• GetPutAluno: responsável por atualizar os dados do aluno.
• DeleteAluno: responsável por excluir o registro do aluno.
Figura 178 – Implementando a classe AlunoControllers
Figura 179 – Continuação da implementação da classe AlunoControllers
Unidade IV
194
Figura 180 – Continuação da implementação da classe AlunoControllers
Então, criamos a classe Aluno, com os atributos nome, RA e idade. A tipagem dos atributos (string
nome,int RA, int idade) tem relação com a tabela criada que recebeu os dados com as tipagens corretas.
Figura 181 – Implementando a classe Aluno
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
195
Assim, inicia-se a implementação da classe AlunoRepositorio, que irá herdar a interface
IAlunoRepositorio, em que serão desenvolvidos os métodos a seguir.
• GetAll: retorna todos os dados de alunos.
• Get: retorna o dado do aluno através do filtro RA.
• Add: adiciona o registro do aluno (nome, RA e idade).
• Remove: exclui o registro do aluno.
• Update: atualiza o registro do aluno.
Na classe AlunoRepositorio, deve-se informar os dados de alunos cadastrados (Salatiel, Dorgival,
Doralice e Doracy) e seus respectivos dados de RA (registro acadêmico) e idade.
Figura 182 – Implementando a classe AlunoRepositorio
Unidade IV
196
Figura 183 – Continuação da implementação da classe AlunoRepositorio
Figura 184 – Continuação da implementação da classe AlunoRepositorio
Inicia-se a implementação da classe IAlunoRepositorio com os métodos getall, get, add, remove
e update.
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
197
Figura 185 – Implementação da classe IAlunoRepositorio
Localiza-se no Solution Explorer o arquivo WebApiConfig (dentro da pasta App_Start).
Figura 186 – Implementação da classe WebApiConfig
Unidade IV
198
Inicia-se, então, a implementação do código, que será responsável por proporcionar a inicialização
da API, e configura-se a rota, conforme já mencionado.
Figura 187 – Implementação da classe WebApiConfig
Neste momento, deve-se clicar no botão “IIS Express” para iniciar a API. Nas figuras a seguir, pode-se
observar o funcionamento de uma consulta de todos os alunos e uma consulta de um aluno específico.
Figura 188 – Executando o projeto web API
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
199
Figura 189 – Executando o projeto web API
Figura 190 – Executando o projeto web API
No exemplo anterior, utilizamos um código do repositório definido pela classe AlunoRepositorio
para implementar a web API 2, expondo os serviços a seguir.
• GetAllAlunos: retorna todos os alunos.
• GetAluno: retorna um aluno.
• GetAlunosPorIdade: retorna os alunos por idade.
• PostAluno: inclui um novo aluno.
• PutAluno: altera um aluno.
• DeleteAluno: exclui um aluno.
7.6 Desenvolvimento de aplicações MVC
As figuras apresentadas aqui são concebidas por meio de desenvolvimento MVC. Na sequência, iremos
entender de maneira prática como podemos desenvolver um projeto WebForms, com alguns conceitos
de HTML, CSS e JavaScript para o front-end e a linguagem de programação orientada a objetos C# para
o desenvolvimento do back-end.
Vale ressaltar também que o banco de dados aplicado nesta unidade foi o SQL Server, mas existem
diversos outros no mercado, como SQL Lite, Mongo DB etc.
Caso optemos por utilizar o seu banco de preferência, alteramos o endereçamento da linha
connectionString, conforme ilustrado a seguir.
Unidade IV
200
Figura 191 – Endereçamento do banco de dados
Lembrete
No JavaScript, os objetos são o centro de seu desenvolvimento: quase
tudo é um objeto ou age como um objeto.
8 ACESSANDO DADOS COM MS ADO.NET
Existem diversas maneiras de conexão com o banco de dados, como Oracle, SQL, Access, entre outros.
No entanto, para que a conexão seja efetuada de maneira amigável, neste livro-texto teremos como
base a construção de conexão utilizando a linguagem C#, que será utilizada como ponto entre a
view (aspx) e a codificação de itens de conexão (C#).
Observação
É importante assimilar os conceitos estudados sobre banco de dados
para que este conteúdo seja absorvido de maneira clara e objetiva.
Iremos dar sequência às figuras que exemplificam como elaborar a aplicação em três camadas. A
figura a seguir mostra a inclusão dos registros nome, e-mail e idade.
Figura 192 – Exemplo de aplicação em três camadas: página Default.aspx
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
201
Para iniciar a criação desse projeto, devemos criar um projeto Asp.NET Web Forms no Visual
Studio 2019.
Figura 193 – Criando um projeto Web Forms
Como ilustrado, iniciamos a criação do projeto Web Forms acionando o botão “Criar um projeto”.
Figura 194 – Criando um projeto Web Forms: ASP.NET WebForms
Unidade IV
202
Selecionamos o Aplicativo Web ASP.NET(.NET Framework). Utilizar a caixa de busca para digitar o
nome do template facilita a sua localização. Após efetuar essa seleção, acionamos o botão “Próximo”.
Figura 195 – Criando um projeto Web Forms: atribuindo o nome do projeto
Preenchemos o nome do projeto (TresCamadasAdoNet) e acionamos o botão “Criar”.
Figura 196 – Criando um projeto Web Forms: selecionando Web Forms
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
203
Em seguida, devemos escolher o Web Forms e acionar o botão “Criar”.
Figura 197 – Criando um projeto Web Forms: selecionando Web Forms
Na figura a seguir, será apresentada a estrutura criada para o projeto Web Forms Três Camadas
ADO.NET. Deve-se clicar da página Default.aspx e desenvolver o layout proposto nas próximas figuras.
Essa tela será responsável por alocar os campos nome, idade e e-mail, e o botão “Submeter” terá a
função de enviar os registros preenchidos para o banco de dados.
Unidade IV
204
Figura 198 – Layout sugerido para a página Default.aspx
Figura 199 – Continuação do layout sugerido para a página Default.aspx
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
205
Figura 200 – Continuação do layout sugerido para a página Default.aspx
Após essas etapas, adicionamos o projeto BLL (business logic layer – camada de regra de negócio).
Para adicionar um projeto, devemos selecionar o nome da solução Três Camadas ADO.NET, acionar o
botão direito do mouse e selecionar “Adicionar”, depois “Novo Projeto”.
Figura 201 – Adicionar um novo projeto
Localizamos a biblioteca de classe (.NET Framework). Devemos nos certificar de que a linguagem
definida é C#. Após realizar a seleção, acionamos o botão seguinte.
Unidade IV
206
Figura 202 – Adicionando a biblioteca de classes
Escrevemos o nome do projeto BLL e acionamos o botão “Criar”.
Figura 203 – Nomeando a biblioteca como BLL
Figura 204 – Camada BLL criada com a classe Class1
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
207
Em seguida, devemos escrever o nome do projeto BLL e, novamente, acionar o botão “Criar”.
Figura 205 – Camada BLL criada com a classe Class1
Devemos renomear a classe para Negócios. Para realizar essa ação, clicamos com o botão direito do
mouse sobre a Class1 e selecionamos a opção “Renomear”.
Figura 206 – Renomeando a Class1 para Negócios
Unidade IV
208
A figura a seguir ilustra o momento que terminamos de renomear a classe. Então, o Visual Studio
pergunta se gostaríamos de assumir o novo nome para a classe. Agora, devemos acionar o botão “Sim”.
Figura 207 – Classe Negócios
Na figura a seguir, apresentamos o nome classe Negócios.
Figura 208 – Incluindo summary
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
209
Para acionar o summary, basta digitarmos acima do nome da classe ///.
Figura 209 – Desenvolvimento da classe BLL
Nas figuras a seguir, podemos observar o desenvolvimento dos métodos insert, update, load e delete,
que terão responsabilidade de filtrar a regra de negócio e conservar a persistência no banco de dados.
Unidade IV
210
Figura 210 – Desenvolvimento da classe BLL
Figura 211 – Continuação do desenvolvimento efetuado na classe BLL (classe Negócio)
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
211
Figura 212 – Continuação do desenvolvimento efetuado na classe BLL (classe Negócio)
Figura 213 – Camada DAL com a classe Acesso a Dados
A seguir, apresentamos o projeto DAL, do inglês, data access layer (camada de acesso a dados). Esse
projeto será adicionado da mesma maneira que a camada BLL foi adicionada anteriormente. A classe
será renomeada para AcessoDados.
Unidade IV
212
Figura 214 – Classe AcessoDados dentro da camada DAL
Nas figuras a seguir, podemos ver a criação dos métodosinsert (que será utilizado na aplicação),
update, load e delete. Eles serão utilizados para realizar a persistência no banco de dados SQL.
Figura 215 – Desenvolvimento efetuado na classe DAL
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
213
Figura 216 – Continuação do desenvolvimento efetuado na classe DAL
Na figura anterior, linha 20, podemos observar a chave de conexão [“EADUNIPSqlServer”], que será
utilizada para alocar o endereço do banco de dados SQL.
Unidade IV
214
Figura 217 – Continuação do desenvolvimento efetuado na classe DAL
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
215
Figura 218 – Continuação do desenvolvimento efetuado na classe DAL
Unidade IV
216
Figura 219 – Continuação do desenvolvimento efetuado na classe DAL
Figura 220 – Realizando a referência na camada BLL
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
217
Conforme pode ser visto nas figuras a seguir, clicamos com o botão direito do mouse sobre a
pasta de referências e acionamos a opção “Adicionar Referência”. Em seguida, devemos selecionar
“Projetos” >> “DAL” e “OK”.
Figura 221 – Realizando a referência na camada BLL da camada DAL
Figura 222 – Realizando a referência na camada TresCamadasAdoNet
Unidade IV
218
Figura 223 – Realizando a referência na camada BLL da camada TresCamadasAdoNet
Figura 224 – Referência da camada BLL na camada TresCamadasAdoNet
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
219
Conforme mostrado na figura a seguir, devemos ir à página Default.aspx e efetuar um duplo clique no
botão “Submeter”. Será criado o btnSubmit_Click. Nessa classe, devemos atribuir o nome da camada BLL
utilizando a palavra using. Na sequência, digitamos o trecho do código que se encontra na figura a
seguir. Esse código realiza a instância do objeto pBLL para que seja possível acessar o método insert,
que está localizado na classe Negócios e que, por sua vez, dará acesso ao método insert, localizado na
classe Acessadados.
Com as informações digitadas na tela (nome, idade e e-mail), o método insert contido na classe
Acessadados irá gravar os dados na base de dados.
Figura 225 – Evento bntSubmit_Click
Observação
Classe BLL é a camada de negócio. Classe DAL é a camada de dados.
O exemplo tratado nesta unidade tem por finalidade realizar a junção do
front-end (tela) com o back-end (linguagem de programação C#) utilizando
um projeto Web Forms.
Unidade IV
220
Po
r
fim
, d
ev
e-
se
a
ce
ss
ar
o
a
rq
ui
vo
w
eb
.co
nfi
g
e
al
oc
ar
o
e
nd
er
eç
am
en
to
d
o
ba
nc
o
de
d
ad
os
, p
ar
a
qu
e
el
e
se
ja
lo
ca
liz
ad
o
de
nt
ro
d
a
ap
lic
aç
ão
qu
an
do
so
lic
ita
do
p
el
a
ch
av
e
[“E
AD
UN
IP
Sq
lS
er
ve
r”
].
Fi
gu
ra
2
26
–
A
rq
ui
vo
w
eb
.co
nfi
g
Fi
gu
ra
2
27
–
C
on
ne
ct
io
nS
tr
in
g
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
221
Lembrete
Criar a base de dados EADUNIP e a tabela com os atributos código,
nome, idade e e-mail é necessário para que a aplicação funcione. O banco
de dados utilizado para esse exemplo é o SQL Server.
8.1 Instalar/configurar o banco de dados SQLite
Para instalar e configurar o banco de dados SQLite, é necessário acessar o link, conforme apresentado
na figura a seguir. Após realizar o download, iniciar a instalação no seu computador, conforme
descrito a seguir.
Figura 228 – Tela de download do SQLiteStudio
Figura 229 – Download realizado em formato .zip do SQLStudio
Após a extração do arquivo gerado e mencionado na figura anterior, será gerada a pasta
SQLiteStudio, conforme apresentado a seguir.
Unidade IV
222
Figura 230 – Pasta do SQLiteStudio
Após acessar a pasta SQLiteStudio, localizar o arquivo SQLiteStudio e acessá-lo conforme
apresentado a seguir.
Figura 231 – Executável do SQLiteStudio
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
223
Figura 232 – SQLiteStudio
Para criar a base de dados de estudo, precisamos clicar em “Database” → “Add a database”, conforme
apresentado a seguir.
Figura 233 – Adicionando database no SQLiteStudio
Unidade IV
224
Figura 234 – Criando database no SQLiteStudio
Agora, é necessário nomear a base de dados, conforme apresentado a seguir.
Figura 235 – Criando database unidade4 no SQLiteStudio
Após adicionar o nome da base de dados (unidade4), precisamos clicar no botão “Test connection”
para verificar a estabilidade da conexão local, conforme apresentado a seguir.
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
225
Figura 236 – Test connection no SQLiteStudio
Após o teste de conexão ter finalizado com sucesso, clicamos no botão “OK”. Neste momento, a base
de dados está pronta e já é possível criar uma tabela clicando com o botão direito em cima do nome da
base de dados (unidade4) → “Create a table”, conforme apresentado a seguir.
Figura 237 – Criando tabela aluno no SQLiteStudio
Unidade IV
226
Após nomear a tabela, precisamos adicionar os campos necessários para a construção da tabela.
Clicando duas vezes no espaço vazio da aba “Structure”, temos o que está apresentado na figura.
Figura 238 – Acionando coluna na tabela aluno no SQLiteStudio
Figura 239 – Acionando coluna na tabela aluno no SQLiteStudio
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
227
Figura 240 – Acionando coluna na tabela aluno no SQLiteStudio
Para efetivar a construção da tabela, precisamos clicar no botão verde “Commit structure changes”,
conforme apresentado a seguir.
Figura 241 – Botão “Commit structure changes”
Em seguida, aparece a mensagem de sucesso. Após essa tela, clicamos no botão “OK”.
Unidade IV
228
Figura 242 – Efetivação da criação da tabela aluno
Figura 243 – Tabela aluno criada
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
229
Figura 244 – Tabela aluno criada e armazenada na pasta do SQLiteStudio
Figura 245 – Exemplo de ConnectionString do SQLiteStudio
Para fixar o que estudamos, vamos resolver os exercícios do exemplo de aplicação a seguir.
Exemplo de aplicação
Exemplo 1
Sabendo que, nas linguagens de programação, existem diferentes palavras reservadas, é correto
afirmar que são apenas palavras reservadas em linguagem de programação Java (INSTITUTO AOCP 2019):
Unidade IV
230
A) Strictfp, private, byte, transient.
B) Function, void, real, procedure.
C) Protected, finally, if, yield.
D) Public, void, del, elif.
E) Void, var, int, def.
Resolução
A) Alternativa correta.
Justificativa: todas as palavras da alternativa são reservadas para a linguagem Java.
B) Alternativa incorreta.
Justificativa: as palavras “function” e “real” não são reservadas.
C) Alternativa incorreta.
Justificativa: “yield” é o nome de uma função da classe thread, mas pode ser usada livremente.
D) Alternativa incorreta.
Justificativa: as palavras “del” e “elif” não são reservadas.
E) Alternativa incorreta.
Justificativa: as palavras “var” e “def” não são palavras reservadas.
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
231
Exemplo 2
Assinale a opção que apresenta corretamente a saída gerada pelo código Java precedente
(Cespe 2019).
Figura 246
A) 36.
B) 1 2 3 4 5 6.
C) 1 2 3 4 5.
D) 0 1 2 3 4 5.
E) 0 1 2 3 4 5 6.
Resposta correta: alternativa D.
Resolução
Vejamos o que ocorre em cada uma das rodadas do código do enunciado.
1ª rodada
i = 0 0 × 0 = 0 (menor que 36)
2ª rodada
i = 1 1 × 1= 1 (menor que 36)
3ª rodada
i = 2 2 × 2 = 4 (menor que 36)
Unidade IV
232
4ª rodada
i = 3 3 × 3 = 9 (menor que 36)
5ª rodada
i = 5 5 × 5 = 25 (menor que 36)
6ª rodada
i = 6 6 × 6 = 36 (igual a 36)
Resposta: 0 1 2 3 4 5
Resumo
Na unidade IV, vimos como podemos combinar e integrar técnicas de
desenvolvimento web, como o JavaScript, as quais, de fato, enriquecem
todo o processo da aplicação web, principalmente quando se trata de suas
funções e seus métodos, o que gera praticidade e facilidades no front-end
na atuação do desenvolvimento de software para internet.
Vimos também conceitos de conexão com banco de dados, utilizando
como base a linguagem C#. Trabalhando com o desenvolvimentode
aplicações web, empregamos recursos da linguagem C# para efetuar a
codificação de banco de dados, bem como toda a lógica de botões inseridos
nas páginas aspx.
Finalmente, ressaltamos tópicos relativos à construção de arquitetura
web e sua execução, com ênfase na preocupação atual em realizar
desenvolvimentos com qualidade e agilidade, para que seja possível a
visualização da página em qualquer dispositivo conectado à internet.
DESENVOLVIMENTO DE SOFTWARE PARA INTERNET
233
Exercícios
Questão 1. (FCC 2019) Considere o fragmento de código a seguir, retirado do corpo de uma página
web que utiliza JavaScript.
<body>
<img id=”evento” src=”grupo1.gif” onclick=”trocar()”>
<script>
function trocar() {
}
</script>
</body>
Para que, ao clicar na imagem grupo1.gif, ela seja substituída pela imagem grupo2.gif, no interior da
função trocar deverá ser incluído o comando:
A) # ( ‘$evento ‘) .src ( ‘grupo2.gif ‘) ;
B) document.getElementById(“evento”).src = “grupo2.gif” ;
C) $ ( ‘. evento ‘) . attr ( ‘src ‘, ‘grupo2.gif ‘) ;
D) document.img.src = “grupo2.gif” ;
E) document.getElementById(“evento”).change = “grupo2.gif” ;
Resposta correta: alternativa B.
Análise da questão
Em JavaScript, o método getElementById() nos possibilita modificar elementos HTML a partir de
seus identificadores. A propriedade src desse método é capaz de ajustar o valor do atributo src de uma
imagem. O atributo src é responsável por especificar a URL da imagem. Portanto, o comando
document.getElementById(“evento”).src = “grupo2.gif”;
procura, dentro do objeto document (que, no caso, é o próprio documento HTML), o elemento cujo id
é igual a “evento”, e modifica o valor do seu atributo src para “grupo2.gif”. Essa ação ocorrerá mediante
um evento de clique na imagem original, que será responsável por invocar a função trocar().
Unidade IV
234
Questão 2. (Iades 2018, adaptada) A sigla do padrão de projeto MVC vem do inglês model-view-controller.
A respeito do MVC, avalie as afirmativas a seguir.
I – A camada model é responsável pela exibição de dados na tela.
II – A camada view é responsável pelas regras de negócio.
III – A comunicação entre as interfaces e as regras de negócio é responsabilidade da camada controller.
É correto o que se afirma em:
A) I, apenas.
B) III, apenas.
C) I e II, apenas.
D) II e III, apenas.
E) I, II e III.
Resposta correta: alternativa B.
Análise das afirmativas
I – Afirmativa incorreta.
Justificativa: o MVC é um padrão de arquitetura de software focado na separação de conceitos em
três camadas interconectadas. Pode ser considerado um padrão de arquitetura para o desenvolvimento de
aplicações web. A camada model, responsável pela modelagem da aplicação, gerencia o comportamento
dos dados por meio de regras de negócios, lógicas e funções. Dessa forma, essa camada modela o
problema que se pretende resolver com a aplicação.
II – Afirmativa incorreta.
Justificativa: a camada view, de visualização, é responsável pela exibição dos dados oriundos do
model. Portanto, é utilizada para apresentar informações para o usuário, utilizando combinações de
gráficos e textos.
III – Afirmativa correta.
Justificativa: a camada controller tem foco na interação do usuário, sendo responsável pela
mediação entre as interfaces com o usuário e as regras de negócio. Ela interpreta as ações recebidas
pelos periféricos de entrada (como teclado ou mouse), vindas do usuário, e mapeia essas ações, que são
enviadas para o model ou para o view.
235
REFERÊNCIAS
Textuais
BRASIL. Lei n. 13.709, de 14 de agosto de 2018. Lei Geral de Proteção de Dados Pessoais (LGPD).
Brasília, 2018. Disponível em: https://bityli.com/AmfFN. Acesso em: 11 maio 2022.
COYIER, C. Named colors and hex equivalents. CSS-Tricks, jan. 2012. Disponível em: https://bit.ly/3L1KDSe.
Acesso em: 10 maio 2022.
DEVMEDIA. Artigo .net Magazine 65 - ASP.NET: WebForms X MVC. Rio de Janeiro, 2009. Disponível em:
https://bityli.com/Uayuhz. Acesso em: 11 maio 2022.
DEVMEDIA. ASP.NET MVC: desenvolvendo soluções para web. Rio de Janeiro, 2011. Disponível em:
https://bityli.com/WmwjAO. Acesso em: 11 maio 2022.
DEVMEDIA. Qualidade de software: uma questão de eficiência. Rio de Janeiro, 2010. Disponível em:
https://bityli.com/EIwnDC. Acesso em: 11 maio 2022.
DEVMEDIA. Utilizando os custom data attributes da HTML5. 2013. Disponível em:
https://bit.ly/3FvCOTE. Acesso em: 10 maio 2022.
DOWNLOADS. Visual Studio. Microsoft, 2022. Disponível em: https://bit.ly/38kvez5.
Acesso em: 10 maio 2022.
DURÃES, R. Desenvolvendo para web usando o Visual Studio 2008. Rio de Janeiro: Brasport, 2011.
FONT SQUIRREL. Webfont Generator. 2022. Disponível em: https://bit.ly/3M5sZhB.
Acesso em: 10 maio 2022.
GETBOOTSTRAP. Introduction. [s.d.]. Disponível em: https://bit.ly/3FxyS4J. Acesso em: 10 maio 2022.
GOEL, A. HTML vs HTML5 vs XHTML: differences you should know. Hackr.io, jan. 2021. Disponível em:
https://bityli.com/nfanQW. Acesso em: 11 maio 2022.
ISHIDA, R. Servindo HTML & XHTML. Tradução: Maurício Samy Silva. W3C, 2016. Disponível em:
https://bit.ly/3LJpj57. Acesso em: 5 maio 2022.
KLEINA, N. A história da internet: pré-década de 60 até anos 80 [infográfico]. Tecmundo, Curitiba, 29
abr. 2011. Disponível em: https://bityli.com/JgSgYW. Acesso em: 11 maio 2022.
LOTAR, A. Programando com ASP.NET MVC. São Paulo: Novatec, 2011.
MANZANO, J. A. N.; TOLEDO, S. A. Guia de orientação e desenvolvimento de sites: HTML, XHTML, CSS e
JavaScript/JScript. 2. ed. São Paulo: Érica, 2010.
236
MARINHO, S. L. Programação Orientada a Objetos II. São Paulo: Editora Sol, 2020.
ROBERT, M. C. Código limpo. São Paulo: Alta Books, 2020.
SILVA, M. S. CSS grid layout: criando layouts CSS profissionais. São Paulo: Novatec, 2019.
SILVA, M. S. HTML5: a linguagem de marcação que revolucionou a web. São Paulo: Novatec, 2019.
SILVA, M. S. Servindo HTML & XHTML. W3, fev. 2016. Disponível em: https://bityli.com/RfzcMr.
Acesso em: 11 maio 2022.
STANDARD built-in objects. JavaScript Reference. Mozilla, 2022. Disponível em:
https://mzl.la/3M5xY1Q. Acesso em: 10 maio 2022.
TERUEL, E. C. HTML5: guia prático. São Paulo: Érica, 2014.
USE as ferramentas para desenvolvedores do Google Chrome para verificar tags. Ajuda do Campaign
Manager 360. Suport Google, 2020. Disponível em: https://bit.ly/3N5yehG. Acesso em: 10 maio 2022.
W3C PRESS RELEASES. Novo roteiro para o futuro das publicações está em andamento: W3C e IDPF
estão agora oficialmente unificados. W3C, fev. 2017. Disponível em: https://bityli.com/yDprk.
Acesso em: 11 maio 2022.
W3C. GT acessibilidade. 2011a. Disponível em: https://bit.ly/3LvqVzs. Acesso em: 28 abr. 2022.
W3C. Markup Validation Service. 2013. Disponível em: http://validator.w3.org/. Acesso
em: 5 maio 2022.
W3C. Sobre o W3C. 2011b. Disponível em: https://bit.ly/36WuzTT. Acesso em: 28 abr. 2022.
W3SCHOOLS. CSS Pseudo-elements. 2022a. Disponível em: https://bit.ly/3L5C3Sm. Acesso
em: 10 maio 2022.
W3SCHOOLS. CSS Tutorial. 2022b. Disponível em: https://bityli.com/duIhAb. Acesso em: 11 maio 2022.
W3SCHOOLS. HTML <input> type Attribute. 2022c. Disponível em: https://bit.ly/38SpUTt.
Acesso em: 5 maio 2022.
W3SCHOOLS. HTML Forms. 2022d. Disponível em: https://bit.ly/3NbDJvl. Acesso em: 5 maio 2022.
W3SCHOOLS. HTML Tutorial. 2022e. Disponível em: https://bityli.com/onbPQU. Acesso em: 5 maio 2022.
W3SCHOOLS. JavaScript Tutorial. 2022f. Disponível em: https://bityli.com/XPTXll. Acesso em: 5 maio 2022.
237
238
239
240
Informações:
www.sepi.unip.br ou 0800 010 9000Materiais relacionados
26 pág.
87 pág.
Perguntas relacionadas
Compartilhar