CENTRO ESTADUAL DE EDUCAÇÃO TECNOLÓGICA
PAULA SOUZA
FACULDADE DE TECNOLOGIA DE LINS PROF. ANTONIO SEABRA
CURSO SUPERIOR DE TECNOLOGIA EM BANCO DE DADOS
FERNANDO HENRIQUE ALVES
RAFAEL DE LIMA DA CUNHA CARVALHO
PROTÓTIPO DE LOJA VIRTUAL UTILIZANDO
WEB DESIGN RESPONSIVO
LINS/SP
1° SEMESTRE/2013
CENTRO ESTADUAL DE EDUCAÇÃO TECNOLÓGICA
PAULA SOUZA
FACULDADE DE TECNOLOGIA DE LINS PROF. ANTONIO SEABRA
CURSO SUPERIOR DE TECNOLOGIA EM BANCO DE DADOS
FERNANDO HENRIQUE ALVES
RAFAEL DE LIMA DA CUNHA CARVALHO
PROTÓTIPO DE LOJA VIRTUAL UTILIZANDO
WEB DESIGN RESPONSIVO
Trabalho de Conclusão de Curso apresentado à
Faculdade de Tecnologia de Lins para obtenção
do Título de Tecnólogo em Banco de Dados.
Orientador: Prof. Me. Paulo Augusto Nardi
LINS/SP
1° SEMESTRE/2013
Dedicatória
Dedico esse trabalho primeiramente a minha
mãe, Janes Luz de Lima e a minha esposa, Juliana
Cristina Pacheco de Oliveira pelo apoio, incentivo,
compreensão e por acreditarem em meu potencial.
Agradeço também ao meu pai, Mario da Cunha Carvalho
in memorian, que com plena certeza, sempre está ao
meu lado, auxiliando e guiando meus passos. E a minha
filha Sophia que é a razão pela qual eu vivo e busco
adquirir o conhecimento que compartilharei com ela por
toda minha vida.
Rafael de Lima da Cunha Carvalho
AGRADECIMENTOS
É com muita alegria que concluo uma parte de grande e valiosa importância
em minha vida pessoal e profissional, sei que de forma alguma conseguiria isso
sozinho, por isso, gostaria de agradecer a pessoas que tornaram esse momento
possível.
Primeiramente agradeço ao Professor Me. Paulo Augusto Nardi, por me
orientar durante todo o desenvolvimento da monografia, por estar sempre disponível
para tirar dúvidas e por compartilhar parte de seu grande conhecimento comigo.
Gostaria também de agradecer aos professores Alexandre Ponce, Adriana de
Bortoli e Luciane Noronha, pela grande ajuda nas correções e pelos valiosos
momentos de aprendizado que nos proporcionaram durante esse momento
importante para a minha formação.
Agradeço também aos professores Fabio Lucio Meira, Anderson Pazin,
Renato Barros, Adriano Bezerra e Mario Henrique de Souza Pardo por estarem
sempre dispostos a tirar dúvidas e sugerir melhorias com a finalidade de tornar esse
trabalho ainda mais especial.
E ao grande amigo Fernando Henrique Alves, que admiro muito por sua
competência e dedicação e por ser a pessoa com o qual tive a oportunidade de
partilhar conhecimentos e desenvolver este trabalho.
Rafael de Lima da Cunha Carvalho
Dedicatória
Primeiramente, dedico este trabalho a Deus,
por ter me dado esta oportunidade e por ter me dado
forças para nunca nem pensar em desistir. Além disso,
dedico este trabalho aos meus pais, pela paciência e
compreensão ao permitir que eu focasse apenas em
minha formação. Dedico também à minha irmã e meus
amigos, pela motivação, e à minha prima in memorian.
Fernando Henrique Alves
AGRADECIMENTOS
Neste momento tão importante de minha vida, tenho a felicidade de agradecer
a todos os que me ajudaram, de alguma forma, a finalizar esta caminhada.
Em especial, agradeço o Professor Me. Paulo Augusto Nardi, pela dedicação
e por todas as horas de auxílio nas quais pude conviver a aprender com um
profissional de extrema competência.
Agradeço ao professor Fábio Lúcio Meira, pelo auxílio sempre que precisei e
pela oportunidade de estágio no Núcleo de Inovação Tecnológica (NIT).
Aos professores Alexandre Ponce, Adriana de Bortoli e Luciane Noronha pela
dedicação e paciência ao nos ensinar e ao corrigir nossos trabalhos.
Aos professores Renato Barros, Anderson Pazin, Adriano Bezerra e Mário
Henrique de Souza Pardo, pela atenção e ajuda no esclarecimento de dúvidas.
Aos meus amigos Guilherme Delbortolo, Gustavo Marinho e Luiz Antonio
Mantana, por terem fornecido livros quando precisei.
Aos meus amigos do Núcleo de Inovação Tecnológica, Felipe Petucoski,
Clóvis Grete, Denis Santos e Nathan Souza da Silva, por muito terem me ajudado
em todas as etapas deste trabalho.
E ao meu amigo Rafael de Lima da Cunha Carvalho, uma das pessoas mais
dedicadas que já conheci, na qual tive a honra de poder contar ao desenvolver este
trabalho.
Fernando Henrique Alves
RESUMO
O presente trabalho tem como tema principal o desenvolvimento de uma loja virtual,
que na maioria dos casos possui o objetivo de ampliar o campo de atuação e o
potencial de competitividade do negócio para o qual foi desenvolvida. A loja virtual
implementada ao longo deste trabalho é voltada para o segmento de som e
acessórios automotivos, com o intuito de promover os objetivos citados
anteriormente à empresa Car System, que atualmente possui restrições que a
impedem de crescer no âmbito empresarial. Com o objetivo definido, foi realizado
um levantamento teórico que aborda as principais tecnologias utilizadas para o
desenvolvimento da loja virtual em questão, assim como também algumas
tecnologias que possuem grande relevância no mercado. Também foi realizado o
estudo de caso referente ao problema atual da empresa e os requisitos (expressos
em forma de diagramas) necessários para o desenvolvimento da solução proposta
(a loja virtual). Além disso, são exemplificadas, com imagens e códigos, a parte de
implementação das funcionalidades do sistema, na qual é ressaltado o uso do Web
Design Responsivo, que é uma técnica que promove uma melhor apresentação da
loja virtual em dispositivos móveis. Por fim, são apresentados os resultados obtidos
e as dificuldades enfrentadas durante o processo de desenvolvimento, que juntos
concluem este trabalho.
Palavras-Chave: Loja Virtual e Comércio Eletrônico.
ABSTRACT
The current study has as main motif the development of a virtual shop that in the
most of the cases has the objective of enlarge the acting field and the competitive
potential of the business for which if was developed. The virtual shop developed
during this study is focused to the segment of automotive sound and accessories
with the intention of promoting the objectives cited previously to the CarSystem
company, that currently has restrictions that prevent it to grow in the business scope.
With the definite objective, it was performed a theoretical survey that approaches the
main technologies used in the development of such virtual shop concerned, as well
as some technologies that have great relevance in the market. It was also performed
a case study relative to the company current problem and the requirements
(expressed in form of diagrams) required to the development of the proposed
solution (the virtual shop). Besides, parts of the development of the system’s features
are exemplified, with pictures and codes, which are emphasizing the use of the
Responsive Web Design, that is a technique that promote a better presentation of the
virtual shop in mobile devices. Finally, they are presented the results obtained are
presented and the difficulties faced during the process of development that together
complete this study.
Keywords: Virtual Shop and Eletronic Commerce
LISTA DE ILUSTRAÇÕES
Figura 2.1 – Diagrama de Caso de Uso .................................................................... 39
Figura 2.2 – Diagrama de Implantação ..................................................................... 40
Figura 2.3 – Modelo Lógico ....................................................................................... 41
Figura 2.4 – Modelo Relacional ................................................................................. 42
Figura 2.5 – Diagrama de Atividade – Cadastrar Categoria ...................................... 42
Figura 2.6 – Diagrama de Atividade – Cadastrar Marca............................................ 43
Figura 2.7 – Diagrama de Atividade – Cadastrar Fabricante..................................... 43
Figura 2.8 – Diagrama de Atividade – Cadastrar Especificação ............................... 43
Figura 2.9 – Diagrama de Atividade – Realizar Compra ........................................... 44
Figura 2.10 – Diagrama de Atividade – Cadastrar Produto ....................................... 44
Figura 2.11 – Diagrama de Atividade – Efetuar Login (Administrador)...................... 45
Figura 2.12 – Diagrama de Atividade – Efetuar Login (Cliente) ................................ 45
Figura 2.13 – Diagrama de Atividade – Cadastrar Cliente ........................................ 46
Figura 2.14 – Diagrama de Atividade – Realizar Contato.......................................... 46
Figura 2.15 – MVC – Cadastrar Categoria ................................................................ 47
Figura 2.16 – MVC – Cadastrar Marca ...................................................................... 47
Figura 2.17 – MVC – Cadastrar Fabricante ............................................................... 48
Figura 2.18 – MVC – Cadastrar Especificação.......................................................... 48
Figura 2.19 – MVC – Realizar Compra...................................................................... 49
Figura 2.20 – MVC – Cadastrar Produto ................................................................... 49
Figura 2.21 – MVC – Efetuar Login (Administrador) .................................................. 50
Figura 2.22 – MVC – Efetuar Login (Cliente)............................................................. 50
Figura 2.23 – MVC – Cadastrar Cliente..................................................................... 51
Figura 2.24 – MVC – Realizar Contato ...................................................................... 51
Figura 2.25 – Diagrama de Sequência – Cadastrar Categoria .................................. 52
Figura 2.26 – Diagrama de Sequência – Cadastrar Marca ....................................... 52
Figura 2.27 – Diagrama de Sequência – Cadastrar Fabricante ................................ 53
Figura 2.28 – Diagrama de Sequência – Cadastrar Especificação ........................... 53
Figura 2.29 – Diagrama de Sequência – Cadastrar Cliente ...................................... 54
Figura 2.30 – Diagrama de Sequência – Cadastrar Produto ..................................... 54
Figura 2.31 – Diagrama de Sequência – Efetuar Login (Administrador) ................... 55
Figura 2.32 – Diagrama de Sequência – Efetuar Login (Cliente) .............................. 55
Figura 2.33 – Diagrama de Sequência – Realizar Compra ....................................... 56
Figura 2.34 – Diagrama de Sequência – Realizar Contato ....................................... 56
Figura 3.1 – Página Home do site ............................................................................. 57
Figura 3.2 – Página de Contato................................................................................. 58
Figura 3.3 – Carrinho de Compras ............................................................................ 59
Figura 3.4 – Login ..................................................................................................... 59
Figura 3.5 – Busca por categorias do menu Lateral .................................................. 60
Figura 3.6 – Detalhes do produto .............................................................................. 60
Figura 3.7 – Adição de produto ao carrinho de compras ........................................... 61
Figura 3.8 – Mensagem do site sobre quantidade em estoque ................................. 62
Figura 3.9 – Login do Cliente ao efetuar compra ...................................................... 63
Figura 3.10 – Cadastro de Cliente ............................................................................. 63
Figura 3.11 – Confirmação de cadastro .................................................................... 64
Figura 3.12 – Inserção dos dados do cartão ............................................................. 64
Figura 3.13 – Página com dados da compra e do cliente.......................................... 65
Figura 3.14 – Login de clientes ................................................................................. 66
Figura 3.15 – Área do cliente .................................................................................... 66
Figura 3.16 – Alteração de dados do cliente ............................................................. 67
Figura 3.17 – Visualização de compras do cliente .................................................... 67
Figura 3.18 – Visualização de detalhes de compras de clientes ............................... 68
Figura 3.19 – Login Gerente...................................................................................... 69
Figura 3.20 – Área do Gerente .................................................................................. 69
Figura 3.21 – Menu de marcas .................................................................................. 70
Figura 3.22 – Cadastro de marcas ............................................................................ 70
Figura 3.23 – Consulta de marcas ............................................................................ 71
Figura 3.24 – Atualização marcas ............................................................................. 71
Figura 3.25 – Menu de produtos ............................................................................... 72
Figura 3.26 – Cadastro de produtos .......................................................................... 72
Figura 3.27 – Adição de Especificação ao cadastrar ................................................ 73
Figura 3.28 – Consulta de produtos .......................................................................... 73
Figura 3.29 – Atualização de produtos ...................................................................... 74
Figura 3.30 – Adição de especificação ao atualizar .................................................. 74
Figura 3.31 – Recuperação de dados do formulário ................................................. 75
Figura 3.32 – Upload de arquivo ............................................................................... 76
Figura 3.33 - Verificação de inserção ou atualização do Servlet ControleProduto .... 76
Figura 3.34 – Página de adição de especificação ..................................................... 77
Figura 3.35 – Verificação de inserção ou atualização do servlet
ControleListaEspecificacao ....................................................................................... 78
Figura 3.36 – Recuperação dos valores do formulário .............................................. 78
Figura 3.37 – Gerencia Especificação ....................................................................... 79
Figura 3.38 – Servlet DownloadManual..................................................................... 80
Figura 3.39 – Servlet TrataImagem ........................................................................... 81
Figura 3.40 – Imagem flexível ................................................................................... 81
Figura 3.41 – Código CSS fixo .................................................................................. 82
Figura 3.42 – Código CSS flexível ............................................................................ 83
Figura 3.43 – Código para resolução mínima de 846 pixels...................................... 84
Figura 3.44 – Elemento superior para resolução mínima de 846 pixels .................... 84
Figura 3.45 – Código para resolução mínima de 699 pixels e máxima de 845 ......... 85
Figura 3.46 – Elemento superior para resolução mínima de 699 pixels e máxima de
845 pixels .................................................................................................................. 85
Figura 3.47 – Código para resolução mínima de 392 pixels e máxima de 668 pixels
.................................................................................................................................. 85
Figura 3.48 – Elemento superior para resolução mínima de 392 pixels e máxima de
668 pixels .................................................................................................................. 86
Figura 3.49 – Código para resolução máxima de 391 pixels ..................................... 86
Figura 3.50 – Código para resolução máxima de 391 pixels ..................................... 86
Figura 3.51 – Dispositivo com resolução de 320 x 480. ............................................ 87
Figura 3.52 – Dispositivo com resolução de 320 x 240. ............................................ 88
Figura 3.53 – Dispositivo com resolução de 240 x 320. ............................................ 88
Figura 3.54 – Dispositivo com resolução de 480 x 320. ............................................ 89
Figura 3.55 – Dispositivo com resolução de 685 x 380. ............................................ 89
Figura 3.56 – Dispositivo com resolução de 600 x 1024. .......................................... 90
Figura 3.57 – Dispositivo com resolução de 600 x 1024. .......................................... 91
LISTA DE ABREVIATURAS E SIGLAS
API – Application Programming Interface
B2B – Business to Business
B2C – Business to Consumer
BD – Banco de Dados
BDOO – Banco de Dados Orientado a Objetos
C2B – Consumer to Business
CE – Comércio Eletrônico
CSS – Cascading Style Sheets
ER – Entidade Relacionamento
GB – Giga Bytes
HTML – Hypertext Markup Language
HYTIME – Hypermidia Time-Based Structuring Language
JDBC – Java Data Base Connectivity
JEE – Java Enterprise Edition
JME – Java Micro Edition
JSE – Java Standard Edition
JSP – Java Server Pages
MB – Mega Bytes
MIME – Multipurpose Internet Mail Extensions
ODBC – Open Data Base Connectivity
OMG – Object Management Group
PL / SQL – Procedural Language / Structured Query Language
RAD – Rapid Application Development
RAM – Random Access Memory
SGBD – Sistema Gerenciador de Banco de Dados
SGML – Standard Generalized Markup Language
SO – Sistema Operacional
TB – Tera Bytes
UML – Unified Modeling Language
XHTML – Extensible Hypertext Markup Language
XML – Extensible Markup Language
SUMÁRIO
INTRODUÇÃO .......................................................................................................... 17
1 FUNDAMENTAÇÃO TEÓRICA .............................................................................. 20
1.1 COMÉRCIO ELETRÔNICO (CE) ........................................................................ 20
1.2 NETBEANS ......................................................................................................... 22
1.3 ECLIPSE ............................................................................................................. 22
1.4 BANCO DE DADOS ............................................................................................ 22
1.5 SGBD .................................................................................................................. 25
1.5.1 MySQL ............................................................................................................. 25
1.5.2 Oracle ............................................................................................................... 26
1.6.1 Hypertext Markup Language (HTML) ............................................................... 27
1.6.2 Extensible Markup Language (XML) ................................................................ 27
1.6.3 Extensible Hypertext Markup Language (XHTML) ........................................... 27
1.7 WEB DESIGN RESPONSIVO ............................................................................. 28
1.8 DOCTYPE ........................................................................................................... 28
1.8.1 Doctype Transitional ......................................................................................... 29
1.8.2 Doctype Strict ................................................................................................... 29
1.9 QUIRKS MODE ................................................................................................... 29
1.10 CASCADING STYLE SHEETS (CSS) ............................................................... 30
1.11 JAVASCRIPT .................................................................................................... 30
1.12 FRAMEWORK ................................................................................................... 30
1.13 HIBERNATE ...................................................................................................... 31
1.14 JAVA ................................................................................................................. 31
1.15 SERVLET .......................................................................................................... 32
1.16 JSP .................................................................................................................... 33
1.18 JDBC ................................................................................................................. 33
1.19 UNIFIED MODELING LANGUAGE (UML) ........................................................ 33
2 ANÁLISE E PROJETO DE SISTEMA .................................................................... 35
2.1 ANÁLISE DE NEGÓCIO ..................................................................................... 35
2.1.1 Instrução do problema ...................................................................................... 35
2.1.2 Análise de Mercado .......................................................................................... 35
2.1.3 Atores envolvidos no processo ......................................................................... 36
2.1.4 Descrição do ambiente atual ............................................................................ 36
2.2 VISÃO GERAL DO PRODUTO ........................................................................... 36
2.2.1 Perspectiva do Produto (Análise de Mercado) ................................................. 36
2.2.2 Premissas e Dependências .............................................................................. 36
2.2.3 Características.................................................................................................. 37
2.2.4 Outros Requisitos do Produto .......................................................................... 38
2.3 ANÁLISE DE REQUISITOS FUNCIONAIS ......................................................... 38
2.3.1 Análise de Requisitos Funcionais ..................................................................... 38
2.3.1.1 Diagrama de Caso de Uso ............................................................................ 39
2.3.1.2 Especificação de Histórias ............................................................................ 39
2.4 ANÁLISE E DESIGN ........................................................................................... 40
2.4.1 Diagrama de Implantação ................................................................................ 40
2.4.2 Projeto de Banco de Dados.............................................................................. 41
2.4.2.1 Diagrama de Dados....................................................................................... 41
2.4.2.2 Mapeamento para o Modelo Relacional e Projeto Físico .............................. 42
2.4.3 Diagrama de Atividades ................................................................................... 42
2.4.3.1 Cadastrar Categoria ...................................................................................... 42
2.4.3.2 Cadastrar Marca ............................................................................................ 43
2.4.3.3 Cadastrar Fabricante ..................................................................................... 43
2.4.3.4 Cadastrar Especificação................................................................................ 43
2.4.3.5 Realizar Compra............................................................................................ 44
2.4.3.6 Cadastrar Produto ......................................................................................... 44
2.4.3.7 Efetuar Login ................................................................................................. 45
2.4.3.8 Cadastrar Cliente........................................................................................... 46
2.4.3.9 Realizar Contato ............................................................................................ 46
2.4.4 MVC ................................................................................................................. 46
2.4.4.1 Cadastrar Categoria ...................................................................................... 47
2.4.4.2 Cadastrar Marca ............................................................................................ 47
2.4.4.3 Cadastrar Fabricante ..................................................................................... 48
2.4.4.4 Cadastrar Especificação................................................................................ 48
2.4.4.5 Realizar Compra............................................................................................ 49
2.4.4.6 Cadastrar Produto ......................................................................................... 49
2.4.4.7 Efetuar Login ................................................................................................. 50
2.4.4.8 Cadastrar Cliente........................................................................................... 51
2.4.4.9 Realizar Contato ............................................................................................ 51
2.4.5 Diagrama de Sequência ................................................................................... 51
2.4.5.1 Cadastrar Categoria ...................................................................................... 52
2.4.5.2 Cadastrar Marca ............................................................................................ 52
2.4.5.3 Cadastrar Fabricante ..................................................................................... 53
2.4.5.4 Cadastrar Especificação................................................................................ 53
2.4.5.5 Cadastrar Cliente........................................................................................... 54
2.4.5.6 Cadastrar Produto ......................................................................................... 54
2.4.5.7 Efetuar Login ................................................................................................. 55
2.4.5.8 Realizar Compra............................................................................................ 56
2.4.5.9 Realizar Contato ............................................................................................ 56
3 IMPLEMENTAÇÃO ................................................................................................ 57
3.1 ÁREA DO USUÁRIO ........................................................................................... 57
3.1.1 Página Home do Site........................................................................................ 57
3.1.2 Página para Contato......................................................................................... 58
3.1.3 Carrinho de Compras ....................................................................................... 58
3.1.4 Login................................................................................................................. 59
3.1.5 Buscar produtos pelo menu Lateral .................................................................. 60
3.1.6 Exibição de detalhes de produto ...................................................................... 60
3.1.7 Realização de compras pelo site ...................................................................... 61
3.2 ÁREA DO CLIENTE ............................................................................................ 65
3.2.1 Login do Cliente................................................................................................ 65
3.2.2 Área do Cliente ................................................................................................. 66
3.2.3 Atualização de dados do Cliente ...................................................................... 66
3.2.4 Visualização de Compras ................................................................................. 67
3.3 ÁREA DO GERENTE .......................................................................................... 68
3.3.1 Login Gerente ................................................................................................... 68
3.3.2 Área do Gerente ............................................................................................... 69
3.3.3 Menu de Marcas ............................................................................................... 69
3.3.4 Menu de Produtos ............................................................................................ 72
3.4 APRESENTAÇÃO DO CÓDIGO FONTE ............................................................ 74
3.4.1 Cadastro de Produtos....................................................................................... 75
3.4.2 Download do manual do produto ...................................................................... 80
3.4.3 Servlet para recuperar imagem de qualquer diretório ...................................... 81
3.4.4 Web Design Responsivo .................................................................................. 81
CONSIDERAÇÕES FINAIS ...................................................................................... 92
REFERÊNCIAS BIBLIOGRÁFICAS .......................................................................... 94
17
INTRODUÇÃO
Segundo Rodrigues e Escola (2010), passaram-se cinco mil anos entre a
invenção do instrumento primitivo de calcular criado na antiguidade e o
desenvolvimento do primeiro computador eletrônico em 1946. Desde então a
evolução tecnológica tem se acelerado tanto que em poucas décadas resultou na
maior mudança no estilo de vida do ser humano.
Como consequência deste fato e mesmo por ter se consolidado no final do
século passado, a Tecnologia da Informação (TI) parece apenas estar começando,
mas já possui grande capacidade de inovação, cria empregos em todo o planeta e é
a área que mais cresce no momento. (RODRIGUES; ESCOLA, 2010)
Conforme Elmasri e Navathe (2005), em quase todas as áreas da TI os
bancos de dados são muito importantes. Esse tipo de sistema se tornou
indispensável para a sociedade moderna, pois muitas atividades como o depósito ou
retirada de dinheiro, a reserva em um hotel, a compra de passagens aéreas, o
acesso a um catálogo de produtos, a compra de produtos, entre outros, possuem um
software ou uma pessoa que fará uso de um banco de dados.
Assim como o banco de dados, a Internet também é algo muito importante
nos dias atuais, e segundo Rodrigues e Escola (2010), a área de desenvolvimento
de software terá crescimento acelerado devido à capacidade de suceder novidades
das diferentes aplicações vinculadas a ela.
Segundo Zemel (2012), os sites também estão se tornando mais complexos,
pois atualmente, novos tipos de telas com diferentes modos de resoluções estão
surgindo e os sites que oferecerem suporte a esses dispositivos, estarão melhores
preparados para o futuro. Um exemplo disso são os milhões de dólares por dia que
o Paypal movimenta em pagamentos mobile e no eBay chegaram perto de 2 bilhões
de dólares em 2010 as vendas realizadas por este tipo de equipamento eletrônico.
Existem duas formas de se desenvolver um site para dispositivos móveis.
Uma delas é o desenvolvimento de um site específico para cada tipo de resolução
para cada dispositivo. Ou então, o desenvolvedor poderá optar por utilizar uma
técnica denominada Web Design Responsivo, que faz com que o site se adapte a
todas as resoluções.
18
Com o foco na relevância que a Internet possui juntamente com banco de
dados e todos os outros avanços relacionados à área de TI, o Comércio Eletrônico
(CE) também ganha destaque. De acordo com Turban e King (2004), o CE é a forma
como as transações acontecem por meio da Internet, ou seja, é o processo de
comprar e vender bens, serviços e informações eletronicamente. Algumas
aplicações de CE que são usadas para vender ações pela Internet estão em grande
ascensão, como exemplo, pode-se citar a Coréia, na qual 70 por cento desse tipo de
comércio é realizado pela Internet.
A princípio, as aplicações para CE aparecem como uma das aplicações mais
promissoras da Internet. Devido as variedades de opções de desenvolvimento e alta
complexidade dos sistemas envolvidos no ambiente em contínua evolução que a
Internet possui, faz com que o CE e projetos similares se tornem complexos aos
olhos dos profissionais da área de informática. (JUNIOR et al, 2002)
Em relação aos fatos apontados, o foco desse trabalho é o desenvolvimento
de uma loja virtual, que possui o objetivo de aumentar o potencial de competitividade
da empresa Car System. Ressalta-se o fato de que a loja desenvolvida permitirá o
acesso a partir de dispositivos móveis, pois será utilizado o Web Design Responsivo,
que consiste em uma técnica que faz com que as páginas web se adaptem a
qualquer tipo de dispositivo móvel. Dessa forma a loja virtual ampliará o campo de
atuação da empresa em questão, pois disponibilizará a venda dos produtos a
distância e por qualquer tipo de dispositivo que possua acesso à Internet.
Para uma melhor compreensão dos assuntos abordados, esse trabalho se
divide em três capítulos, no qual o primeiro capítulo abordará, em caráter de nível
básico de conhecimento, as principais tecnologias envolvidas no desenvolvimento
da loja virtual e também algumas tecnologias concorrentes que se destacam no
mercado.
O segundo capítulo é utilizado para destacar o motivo pelo qual surgiu a
necessidade de implantação da loja virtual, além de mostrar as principais
características do sistema desenvolvido e exemplificar as funcionalidades do
sistema através de diagramas específicos para cada uma delas.
O processo de implementação do projeto será apresentado no terceiro
capítulo, que por sua vez, possui ilustrações das paginas criadas juntamente com a
descrição e exemplificação das funcionalidades pertencentes a elas, ou seja, o
terceiro capitulo abordará exemplos ilustrados de como o sistema funciona.
19
No processo de implementação do projeto, serão seguidos os passos:

Implementação das tabelas no Banco de Dados;

Conexão com o banco e criação das classes modelo utilizando Hibernate;

Implementação das funcionalidades que envolvem a área administrativa;

Implementação das funcionalidades que envolvem a área do cliente;

Criação do carrinho de compras;

Implementação da funcionalidade finalizar compra;

Implementação do site para envio de emails;

Aplicação do Web Design Responsivo;
Dessa forma, este trabalho apresenta uma das opções para a resolução de
problemas enfrentados pelo administrador de uma loja de som, equipamentos e
acessórios automotivos (de pequeno porte), na qual, o site será uma ferramenta
utilizada pelo administrador, e que poderá ser acessado por sistemas desktop e/ou
dispositivos móveis, com o intuito de ampliar a abrangência atual do negócio e
consequentemente o número de clientes e vendas.
20
1 FUNDAMENTAÇÃO TEÓRICA
1.1 COMÉRCIO ELETRÔNICO (CE)
Segundo Turban e King (2004), define-se CE como um processo de compra,
venda e barganha de produtos, serviços e informações por uma rede de
computadores ou pela Internet. Para os autores, na economia atual, o CE faz com
que o processo de revolução digital se acelere ao permitir que as empresas tenham
vantagens competitivas ao adquirir este tipo de negócio. Em um estudo realizado por
Lederer et al. (1998), aumentar a competitividade ou criar vantagem estratégica é o
grande benefício dos sistemas que funcionam na web.
Atualmente a infraestrutura de comunicação proporciona uma plataforma
global que possui características como; (i) a possibilidade, por meio de
computadores e celulares, de realizar transações financeiras; (ii) disponibilidade de
uso, em qualquer momento e local; (iii) grande quantidade de dados e informações
em banco de dados, notícias, livros, revistas, programação de rádio e TV, filmes,
jogos eletrônicos, CDs de áudio e software, entre outros. (TURBAN; KING, 2004)
Para os autores citados acima, não foram muitas as inovações que trouxeram
tantos benefícios quanto o CE e inúmeras pessoas afirmam que as mudanças
trazidas pelo CE são tão intensas quanto às mudanças proporcionadas pela
Revolução Industrial.
A lista a seguir mostra como se divide os benefícios do CE para as empresas:
(TURBAN; KING, 2004)

O CE expande o mercado: com baixo investimento, uma empresa pode
alcançar mais clientes, melhores parceiros e melhores fornecedores.

O CE possibilita significativa redução de custos: utilizando o CE, não é
necessário
investir
na
criação,
processamento,
distribuição,
armazenamento e recuperação de dados registrados em papel.

O CE melhora a organização e os processos de negócio: o CE permite
criar modelos inovadores, minimizar problemas como excesso de
produtos em estoque e atrasos nas entregas.
21

O CE oferece interatividade: ao utilizar o CE, uma empresa consegue
obter retorno rápido e preciso de seus colaboradores, além de aumentar a
interatividade.
Para Junior et al (2002), o CE é uma atividade muito importante para o
desenvolvimento do setor produtivo uma vez que permite o aumento da
diversificação dos mercados consumidores, introduz novas formas de comércio,
possibilita a criação de novas atividades comerciais e contribui para a criação e
propagação de novas tecnologias de informação.
De acordo com Turban e King (2004), o CE é dividido de acordo com seu tipo
de transação ou de acordo com seus participantes envolvidos. Os tipos mais
encontrados são descritos da seguinte forma: business-to-business (B2B) indica que
os participantes são somente empresas; business-to-consumer (B2C) empresaconsumidor, ou seja, quando as transações de varejo são feitas entre empresas e
compradores individuais; consumer-to-business (C2B) quando o cliente fornece
produtos ou serviços para empresas, entre outros.
No tipo de transação B2C os principais tipos de mercado eletrônico são as
lojas e shopping centers virtuais. Esses tipos de mercado eletrônico podem ser
divididos em: genéricos, na qual vendem muitos tipos de produtos; especializados,
que vendem poucos tipos de produto ou apenas um; regionais, que vendem apenas
para os consumidores que residem na região; globais, que mesmo sendo locais,
aceitam vender para consumidores que residem no exterior, desde que estes
concordem em pagar frete, seguros e outros custos; organizações on-line puras, que
não existem fisicamente ou organizações de cliques e cimento, que são lojas que
existem fisicamente e optaram por vender na internet. (TURBAN; KING, 2004)
Segundo Turban e King (2004), existe uma opinião geral sobre o CE: seu
futuro será brilhante. E este sucesso do CE no futuro, baseia-se em vários fatores,
tais como o crescimento dos internautas, aumento dos produtos e serviços
disponíveis on-line, o aumento das vantagens dos compradores, a queda dos
preços, o aperfeiçoamento do processo de compra na internet, maior segurança e
confiabilidade, entre muitos outros. Os analistas fazem previsões sobre o
crescimento esperado e sobre qual segmento terá crescimento mais acelerado.
Dessa forma, os fatores citados anteriormente acerca do futuro do CE, geram um
otimismo geral.
22
Os benefícios do CE, a sua importância e a perspectiva de crescimento,
motivaram o desenvolvimento deste trabalho, cujo objetivo é a criação de uma loja
virtual especializada do tipo de transação B2C. No processo de desenvolvimento de
uma loja virtual, diversas tecnologias podem ser utilizadas, e algumas delas serão
descritas a seguir: 1.2 Netbeans, 1.3 Eclipse, 1.4 Banco de Dados, 1.5 Sistema
Gerenciador de Banco de Dados (SGBD), 1.6 Linguagens de Marcação, 1.7 Design
Responsivo, 1.8 Doctype, 1.9 Quirks Mode, 1.10 CSS, 1.11 JavaScript, 1.12
Framework, 1.13 Hibernate, 1.14 Java, 1.15 Servlet, 1.16 JSP, 1.17 iReport, 1.18
JDBC, 1.19 UML.
1.2 NETBEANS
O Netbeans é um ambiente integrado para desenvolvimento de software que
fornece o necessário para o desenvolvedor escrever e compilar aplicações. Além de
ter o código-fonte aberto e ser escrito totalmente em Java, o Netbeans possui várias
funcionalidades, tais como, suporte completo ao Java Enterprise Edition (JEE),
integração com banco de dados, plugins, entre outras. Estas funcionalidades foram
adquiridas no decorrer de suas atualizações, o que tornou essa ferramenta bastante
atrativa para os desenvolvedores Java. (GONÇALVES, 2006)
1.3 ECLIPSE
Criado originalmente pela IBM, o Eclipse é um ambiente integrado de
desenvolvimento mantido pela Eclipse Foundation. Assim como o Netbeans, o
Eclipse também possui seu código-fonte aberto, oferece recursos e ferramentas que
visam
facilitar
o
desenvolvimento
de
aplicações
Java
e
possui
varias
funcionalidades, tornando-o bastante difundido e utilizado atualmente. (FILHO;
RIBEIRO, 2010)
1.4 BANCO DE DADOS
Para Elmasri e Navathe (2005), um banco de dados é um conjunto de dados
encadeados e esses dados representam acontecimentos que possuem um sentido.
Por exemplo, entenda que a descrição, a marca, o tamanho ou o peso de um objeto
23
podem ser registrados em um caderno ou em um dispositivo por meio de programas
específicos. Esses registros constituem um banco de dados. Porém, segundo os
autores, a definição de banco de dados é um pouco mais rigorosa, e devem-se
considerar as seguintes características para um melhor aproveitamento e utilização
de recursos: um banco de dados representa a realidade, é um conjunto de dados
coerentes com algum sentido, é planejado, desenvolvido e preenchido por dados
para auxiliar algum processo e é utilizado por usuários ou aplicações, dependendo
do objetivo proposto pelos usuários.
De acordo com Nassu e Setzer (2009), existem dois tipos principais de banco
de dados: os bancos de dados orientados a objetos e os bancos de dados
relacionais.
Segundo Nassu e Setzer (2009), em um banco de dados orientado a objetos,
a unidade de armazenamento é o objeto e este tipo de banco possui o mesmo
conceito das linguagens de programação orientadas a objetos. A principal diferença
é a forma na qual este banco persiste os dados, pois os objetos continuam a existir
quando o software é finalizado.
Conforme Welling e Thomson (2005), os bancos de dados relacionais são os
mais utilizados. Geralmente este tipo de banco de dados é composto por várias
tabelas, nas quais são especificadas chaves que servem como referência de uma
tabela para outra.
Segundo Ramakrishnan e Gehrke (2008), por serem mais compreensíveis
que os bancos de dados mais antigos, os bancos de dados relacionais possibilitam o
fácil entendimento de seu conteúdo até mesmo pelos usuários iniciantes. Suas
principais vantagens são a facilidade de realizar consultas complexas e a
simplicidade na representação dos dados.
De acordo com Welling e Thomson (2005), na criação de um banco de dados,
devem-se modelar itens do mundo real, relacionamentos e armazenar dados sobre
esses objetos e relacionamentos.
Para Ramakrishnan e Gehrke (2008), seis etapas podem dividir o projeto de
banco de dados, sendo que, nas três primeiras etapas, o modelo Entidade
Relacionamento (ER) é o mais importante. As três primeiras etapas são:
 Análise de requisitos: etapa na qual se realiza uma análise para descobrir
o que os usuários esperam do sistema. Após esta análise, programas são
utilizados para fazer a documentação do software proposto.
24
 Projeto Conceitual do Banco de Dados: nesta etapa, o modelo ER é criado
com o objetivo de simplificar a representação dos dados. Desse modo,
todas as pessoas envolvidas no projeto podem debater inclusive as que
não têm conhecimento técnico.
 Projeto Lógico de Banco de Dados: Considerando a utilização de um
banco de dados relacional, nesta etapa, deve-se converter o esquema ER
em um esquema de banco de dados relacional no modelo de dados do
SGBD escolhido.
Em um projeto de banco de dados, são realizadas análises mais cuidadosas
com o objetivo de refinar o esquema lógico final, pois o modelo ER é somente uma
descrição aproximada dos dados criada no processo de análise de requisitos. Após
a criação do esquema lógico, deve-se dar importância ao critério desempenho e
criar o esquema físico. Por fim, podemos criar restrições de segurança e garantir que
os usuários terão acesso apenas aos dados que necessitam. (RAMAKRISHNAN;
GEHRKE, 2008)
As etapas finais do projeto de banco de dados são descritas a seguir:

Refinamento do Esquema: nesta etapa, a teoria de normalização de
relações é utilizada em uma análise para identificar problemas nas
relações.

Projeto físico de Banco de Dados: na quinta etapa, o projeto é refinado
para que o banco de dados suporte cargas esperadas e mantenha um
desempenho considerável. Para que isso aconteça, podem ser criados
índices em tabelas, realizar agrupamento de tabelas ou realizar um
reprojeto de partes do esquema anterior do banco de dados.

Projeto de Aplicativos e Segurança: na última etapa, devemos expor o
objetivo das entidades nos procedimentos que resultem em uma tarefa de
aplicativo como componente do procedimento. Também é necessário
identificar e definir as partes do banco de dados que podem ser
acessadas pelos diferentes usuários e garantir que as regras de acesso
sejam satisfeitas.
Segundo os autores, na realidade, em um projeto de banco de dados
completo, será exigida uma etapa chamada tunning, que tem por objetivo realizar
uma repetição dos seis tipos de etapas até que o projeto esteja aceitável.
25
1.5 SGBD
Para Nassu e Setzer (2009), um SGBD é um software ou um conjunto de
software desenvolvidos com o objetivo de controlar todas as ações em um banco de
dados. Entre estas ações estão a definição da estrutura de dados, inserção e busca
dos dados, recuperação de falhas na comunicação ou no meio de gravação,
controles de concorrência, de acesso e de segurança dos dados.
Atualmente existem vários tipos de SGBDs relacionais e orientados a objetos.
Neste trabalho são descritos dois SGBDs, o MySQL que possui código fonte aberto
e o Oracle que oferece recursos que muitos dos outros SGBDs não oferecem.
1.5.1 MySQL
É um sistema de gerenciamento de banco de dados relacional que surgiu com
a finalidade de suprir a necessidade de um SGBD rápido e flexível. Além de atender
essas necessidades, o MySQL é confiável, de nível corporativo e possui códigofonte aberto. (GONÇALVES, 2006)
De acordo com Leite (2007), as principais características do MySQL são:

Multiplataforma: pode ser instalado em diversos Sistemas Operacionais
(SO) como Windows, Linux, Novell, AIX, HP-UX, SCO, Solaris, FreeBD,
OpenBSD, MacOS.

Funcionalidades: Stored Procedures, triggers, cluster.

Limites: De modo teórico, o número de usuários, conexões ou tamanho da
base de dados são ilimitados. Existem situações com até 104 conexões e
tabelas com até 8 Tera Bytes (TB) para Solaris 2.7 ultra-sparc.

Recursos de Hardware: Exigência de um processador Pentium 3 com 64
Mega Bytes (MB) de Random Access Memory (RAM).

Padrão de tabelas do MySQL: As tabelas do MySQL podem ser criadas
nos padrões: ISAM, MyISAM, InnoDB, BerkeleyDB, MERGE e HEAP,
possuem tamanho máximo de aproximadamente 4 Giga Bytes (GB).
Entretanto, a capacidade de armazenamento de uma tabela pode ser
estendida se o sistema necessitar de utilizar tabelas com capacidade de
armazenamento maior que 4 GB.
26

Compatibilidade: O MySQL é compatível com o Open Data Base
Connectivity (ODBC), Java Data Base Connectivity (JDBC), .NET e
módulos de interface para diversas linguagens de programação.
Segundo Leite (2007), o MySQL objetiva ser livre de bugs, ser de fácil uso e
permitir implementações contínuas, desde que não deixe de ser seguro e rápido.
1.5.2 Oracle
Segundo Abbey, Corey e Abramson (2002), a Oracle divide-se em cinco
áreas, tais como: banco de dados Oracle, servidor de aplicações Oracle, pacote de
desenvolvimento para Internet, Data Warehouse (DW) e desenvolvimento comercial
e pacote E-Business da Oracle. O Oracle é um sistema gerenciador de banco de
dados relacional muito confiável e bastante utilizado pelas empresas, pois muitos
dos SGBDs não oferecem os recursos oferecidos por um SGBD Oracle,
principalmente quando se trata de segurança dos dados armazenados. (LEITE,
2007)
De acordo com Leite (2007), a versão Oracle 10g Express Edition é uma das
mais conhecidas entre os desenvolvedores, pois suporta Windows e Linux e está
disponível gratuitamente para download. Essa versão traz muitos recursos para
implementação em diferentes plataformas, como por exemplo, aplicações com
ferramentas Rapid Application Development (RAD), Procedural Language /
Structured Query Language (PL/SQL) e permite o desenvolvimento de aplicações
em diversas linguagens de programação. No Oracle, é preciso criar uma tablespace
para depois criar as tabelas que vão armazenar os registros. As tablespaces são
áreas para armazenamento de dados que devem estar associadas à no mínimo um
ou vários arquivo de dados. A capacidade de armazenamento do banco de dados
está ligada aos arquivos de dados associados à tablespace. (LEITE, 2007)
1.6 LINGUAGEM DE MARCAÇÃO
Segundo Freeman e Freeman (2008), uma linguagem de marcação é utilizada
para criar páginas web. Para isso, no documento são especificadas as marcações
denominadas tags que mostram ao browser como o texto está estruturado, dessa
forma o browser interpreta a página e a exibe de acordo com o que foi especificado.
27
1.6.1 Hypertext Markup Language (HTML)
Segundo Gonçalves (2007), a HTML é uma linguagem que foi criada a partir
da Standard Generalized Markup Language (SGML), que por sua vez é uma
linguagem para descrever linguagem de marcação. O HTML é menos complexo do
que o SGML, pois utiliza um pequeno conjunto de tags que suprem as necessidades
para criação da estrutura das páginas e gerenciamento simples de documentos.
O HTML apenas cria a estrutura das páginas, especificando o que é título,
texto, lista, subtítulo, local das imagens, etc. Por ser baseado em SGML, o HTML
não tem uma estrutura rígida e exata. (MARCONDES, 2005)
Para a utilização de hipertexto, o HTML utiliza o Hypermedia Time-based
Structuring Language (HYTIME) que consiste em um padrão para representação
estruturada de hipermídia e informação baseada em tempo. (GONÇALVES, 2007)
1.6.2 Extensible Markup Language (XML)
A sintaxe básica da XML é parecida com a da HTML, porém sua finalidade é
outra. Assim como a HTML, a XML é baseada na linguagem SGML, mas ela não
limita o desenvolvedor a utilizar elementos fixos, ou seja, ela permite a criação de
novas marcações que visam auxiliar na leitura do documento por pessoas e na
manipulação pelos computadores, por esse motivo essa linguagem de marcação é
denominada extensível. (FREEMAN; FREEMAN, 2008)
Segundo Medeiros (2004), a XML é uma linguagem estruturada, isso porque
todas as tags que são abertas devem ser fechadas e também porque suas tags
possuem um significado. Essa linguagem possui um verificador de sintaxe chamado
Parse XML e um mecanismo denominado DTD, que informa qual é a estrutura de
um arquivo XML.
1.6.3 Extensible Hypertext Markup Language (XHTML)
De acordo com Freeman e Freeman (2008), o XHMTL é a junção de duas
linguagens de marcação, HTML e XML. Essa junção uniu a popularidade e
28
compatibilidade com os browsers do HTML com a extensibilidade e exatidão do
XML.
Com essa união, o XHTML se tornou mais rigoroso em relação a sua sintaxe,
porém garante o aproveitamento de todas as ultimas atualizações dos browsers e
compatibilidade com dispositivos móveis. (FREEMAN; FREEMAN, 2008)
1.7 WEB DESIGN RESPONSIVO
O Web Design Responsivo é uma técnica que faz com que um site se adapte
a resolução de qualquer dispositivo e, com isso, o mesmo será bem apresentado em
qualquer um deles. Essa técnica é composta por três outras técnicas, são elas:
Layout Fluído, Imagens e recursos flexíveis e Media Queries. Essas três técnicas
são aplicadas a partir de configurações no arquivo de estilização do projeto, com o
intuito de garantir que o site seja totalmente flexível à todas as resoluções. O Layout
fluído é aplicado em um site a partir da definição e medidas não fixas, para que haja
uma adaptação automática do site na tela, com o objetivo de evitar as barras de
rolagem horizontais e conteúdos incompletos. Imagens e recursos flexíveis é uma
técnica que pode ser aplicada no site apenas com a especificação em porcentagem
nas marcações que contém o elemento no qual se deseja que seja flexível a fim de
fazer com que o elemento possa ter qualquer tamanho, variando de acordo com o
tamanho do elemento que o contém. O uso de Media Queries pode fazer com que
elementos fiquem ocultos, apareçam ou se reposicionem de acordo com a
resolução, pois um site não precisa ter a mesma aparência de seus elementos em
qualquer dispositivo. (ZEMEL, 2012)
1.8 DOCTYPE
Segundo Freeman e Freeman (2008), o Doctype é uma linha que possui um
conjunto de especificações que o browser precisa para interpretar a página web da
melhor forma possível. Essa linha é chamada de definição do tipo de documento,
pois informa ao browser qual é o tipo de documento.
A declaração do Doctype usado, deve ser colocada no topo da página web
para especificar com antecedência como a página deve ser interpretada. Para
explicar melhor os elementos que compõem a linha doctype, segue o seguinte
29
exemplo: <!DOCTYPE html PUBLIC “-//W3C//DTD//HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>. Na linha Doctype, o HTML indica que o
elemento html é o elemento raiz na página, PUBLIC indica que o HTML 4.01 está
disponível ao público, o elemento “-//W3C//DTD//HTML 4.01 Transitional//EN”
informa que a versão do HTML usada é a 4.01 e está escrita em Inglês, e por fim, o
elemento “http://www.w3.org/TR/html4/loose.dtd” aponta para um arquivo que
identifica este padrão em particular.
A palavra Transitional descrita na linha Doctype informa ao browser qual é o
tipo de Doctype usado na página. Os tipos de Doctype são descritos a seguir: 1.8.1
doctype Transitional, 1.8.2 doctype Strict.
1.8.1 Doctype Transitional
Conforme Freeman e Freeman (2008), Transitional é o tipo de Doctype que
deve ser utilizado quando a página estiver em transição de um HTML antigo para um
HTML atualizado. Este Doctype permite a utilização do HTML antigo e o HTML
padrão ao mesmo tempo em um documento, pois não exige o HTML totalmente
padronizado.
1.8.2 Doctype Strict
Para Freeman e Freeman (2008), Strict é o tipo de Doctype rigoroso que
deverá ser usado quando estiver escrevendo HTML totalmente padronizado. Para
desenvolver uma página com HTML Strict, é necessário seguir regras como a
utilização de elementos e atributos que não estão obsoletos, ou seja, ainda fazem
parte do padrão, estruturar as páginas de acordo com o padrão e não cometer erros
de sintaxe. De acordo com os autores, desenvolver páginas de acordo com o padrão
é garantir que as mesmas serão interpretadas da forma mais rápida e mais estável
possível na maioria dos browsers.
1.9 QUIRKS MODE
Segundo Freeman e Freeman (2008), Quirks Mode é a forma na qual o
browser interpretará uma página web caso não seja especificado a versão do HTML
30
que está sendo usada. Cada browser entenderá a página web de uma forma
diferente e possivelmente inconsistente. Para evitar que isso aconteça, deve-se
informar ao browser uma linha do tipo Doctype no inicio do documento. Esta linha
define o tipo de documento, ou seja, a versão do HTML. Essa definição é utilizada
para informar aos browsers sobre como o documento foi estruturado, e isto facilitará
a leitura e interpretação da página.
1.10 CASCADING STYLE SHEETS (CSS)
Segundo Freeman e Freeman (2008), as CSS são utilizadas para
personalizar a parte visual de paginas web. As regras CSS são aplicadas aos
elementos de uma página, atribuindo um valor para cada propriedade que se deseja
alterar. Com a utilização das CSS, é possível alterar vários elementos de varias
paginas de uma só vez, facilitando a manutenção em casos de alterações. Então,
além de estilizar as páginas, as CSS visam facilitar a definição e inserção dos estilos
que serão aplicados.
1.11 JAVASCRIPT
Para que as paginas web possuam um bom visual e dinamismo, ao construílas, pode-se utilizar o JavaScript, que por sua vez disponibiliza os recursos
necessários para tornar uma página funcional.
Trocar imagens dinamicamente, efetuar cálculos, e validar campos de um
formulário em uma página online, estão entre as várias funções de interatividade que
o JavaScript pode realizar. A linguagem JavaScript não necessita ser compilada, os
seus códigos são escritos dentro da estrutura HTML. Os navegadores web possuem
um interpretador que cuja função é interpretar o código JavaScript e realizar as
funções nele descritas. Levando em consideração todas essas vantagens, o
JavaScript tem tornado a internet muito mais funcional. (MORRISON, 2008)
1.12 FRAMEWORK
Framework é uma estrutura com funcionalidades definidas que reúne o
necessário para auxiliar no desenvolvimento de determinados projetos. Algumas
31
aplicações possuem problemas e soluções parecidas, analisando esses fatos, e com
a finalidade de simplificar o desenvolvimento de aplicações em comum, surgiram os
Frameworks. Com a utilização dessas estruturas, o desenvolvedor pode organizar e
desenvolver vários projetos. Um Framework pode envolver bibliotecas de código,
linguagens de scripts, programas de apoio ao desenvolvimento, entre outros.
(GONÇALVES, 2006)
1.13 HIBERNATE
Segundo Gonçalves (2007), o Hibernate surgiu com a finalidade de reduzir
e/ou eliminar a dificuldade no processo de persistência de dados com o Java, uma
vez que é problemático efetuar alterações no sistema quando as informações são
armazenadas em tabelas e devem ser apresentadas através de objetos. Então esse
framework de fácil configuração e grande popularidade possui um conjunto de
ferramentas de mapeamento com acesso ao banco de dados que realizam a
comunicação do sistema com o banco de dados facilitando o desenvolvimento do
projeto.
1.14 JAVA
Java é uma linguagem de programação criada pela Sun Microsystems que
tem sido destaque no mercado. Esse destaque é dado devido as suas criações que
auxiliam no processo de implementação e aos aprimoramentos que possibilitam que
a linguagem Java suporte diferentes plataformas. (GONÇALVES, 2010)
A portabilidade é um dos pontos fortes do Java, pois permite que a aplicação
desenvolvida funcione em diversas plataformas sem ter a necessidade de
modificação. Além disso, a linguagem de programação Java é muito segura, o que
possibilita a conexão com grandes bancos de dados. Somando a segurança com a
portabilidade e todas as outras ferramentas de suporte que essa linguagem abrange,
grandes empresas como a NASA, IBM, ESPN, optaram por utilizar o Java.
(GONÇALVES, 2007)
Segundo Filho e Ribeiro (2010), a linguagem de programação Java possui
diferentes ambientes de programação, cada um deles é voltado para uma finalidade
32
especifica. O Java Standard Edition (JSE), o JEE e o Java Micro Edition (JME) são
ambientes pertencentes ao Java e são definidos da seguinte forma:

JSE - é um ambiente para construção e execução de aplicações Java.
Como o próprio nome diz, é a edição Java padrão que disponibiliza as
ferramentas necessárias para o desenvolvimento de aplicações de
pequeno porte voltadas para web e desktop, o JSE é ideal para a
aprendizagem da linguagem Java. (FILHO; RIBEIRO, 2010)

JEE -
Versão baseada na plataforma
JSE,
a JEE foi criada
especificamente para o desenvolvimento de aplicações corporativas de
grande porte. Ela possui um padrão de desenvolvimento que deve ser
seguida pelo desenvolvedor para que o sistema criado se comunique com
outros automaticamente. O JEE também possui a característica da
arquitetura cliente/ servidor, onde parte da aplicação é executada na
máquina e outra parte no servidor. (FILHO; RIBEIRO, 2010)

JME – é uma plataforma de desenvolvimento de aplicativos para sistemas
embarcados, ou seja, sistemas que funcionam em um dispositivo
específico como: celular, controles remotos, semáforos. Esta plataforma
oferece recursos específicos para este tipo de desenvolvimento e entre
estes recursos está a facilidade de se lidar com as limitações da
capacidade de processamento dos equipamentos. (FILHO; RIBEIRO,
2010)
1.15 SERVLET
Servlets são classes Java que necessitam de um servidor web para serem
executadas. Eles possuem a função de receber uma solicitação, processá-la junto a
um servidor web e devolver uma resposta. (SIERRA; BATES, 2005)
De acordo com Gonçalves (2006), os Servlets são utilizados para a criação de
paginas web com conteúdo dinâmico, ou seja, paginas que alteram o conteúdo de
acordo com ações executadas pelo usuário. Para a construção de um Servlet não se
faz uso da interface gráfica, e sim de códigos Java, após o recebimento da
requisição e o processamento da tarefa solicitada, o Servlet pode retornar como
resposta, uma pagina HTML ou conteúdo Multipurpose Internet Mail Extensions
(MIME).
33
1.16 JSP
JSP é uma tecnologia Java também voltada para o desenvolvimento de
aplicações web que surgiu com o intuito de aprimorar a tecnologia de Servlets.
Mesmo por ser muito conhecida e ser considerada uma das melhores tecnologias de
desenvolvimento de conteúdo dinâmico para internet, a tecnologia Servlet misturava
códigos Java com códigos HTML, o que dificultava a manutenção das páginas, visto
que, um especialista em web designer que não conhece Servlets, teria dificuldades
em realizar modificações no código HTML. Esse problema foi identificado pela Sun
Microsystems que, por sua vez, desenvolveu a JSP. (KURNIAWAN, 2002)
A tecnologia JSP é utilizada na criação de páginas web dinâmicas, ou seja, a
JSP disponibiliza os recursos necessários para o desenvolvimento de páginas que
se modificam durante o tempo de execução. Para que essas modificações ocorram,
utilizam-se códigos Java dentro do HTML, esses códigos quando acionados, são
responsáveis pelas atualizações dinâmicas da página.
1.18 JDBC
Atualmente
é
imprescindível
que uma
aplicação
que necessite do
armazenamento de grande quantidade de informações se conecte a um banco de
dados para que haja um melhor gerenciamento das informações. Para que essa
comunicação ocorra entre o banco de dados e o aplicativo Java, foi criada uma
solução denominada JDBC. O JDBC é uma API incluída na linguagem Java que
torna possível o acesso de aplicativos ao banco de dados. Além disso, ele permite
que uma única aplicação se comunique com diversos bancos de dados, ressaltando
que, para que haja essa comunicação, o banco de dados deve possuir suporte a
um driver JDBC. (GONÇALVES, 2006)
1.19 UNIFIED MODELING LANGUAGE (UML)
Conforme Silva (2007), a UML é um padrão internacional de notação
orientada a objetos promovida pela entidade normalizadora Object Management
Group (OMG). A UML surgiu em meio a várias tentativas de unificar notações, essas
tentativas se deram devido ao problema de existirem várias propostas de notações
34
que dificultavam o entendimento por parte do usuário, visto que cada projeto poderia
utilizar uma notação diferente. O suporte de ferramentas também era um problema,
pois a criação de ferramentas era centralizada em poucas notações, limitando o
usuário a utilizar as que possuíam esse suporte.
A ideia de unificações de notação não era exatamente nova e nem a UML
foi a primeira tentativa de fazê-lo. De fato, o maior obstáculo de uma
proposta de unificação de notações era tornar-se aceita. Ter conseguido
esse feito é, talvez, um dos maiores méritos da UML. (SILVA, 2007, p.81).
A UML é composta por diagramas que são divididos em dois grupos:
diagramas estruturais e diagramas de comportamento.
Como o próprio nome diz, os diagramas estruturais são utilizados para
estruturação do sistema e das classes que o compõe. Os diagramas que englobam
a estrutura do sistema são: diagrama de classe, diagrama de objetos, diagrama de
pacotes, diagrama de estrutura composta, diagrama de componentes e diagrama de
utilização.
Os diagramas de comportamento são utilizados para mostrar e analisar o
sistema em funcionamento, esses diagramas são importantes, principalmente em
projetos de grande porte, visto que é necessário saber o comportamento do sistema
perante suas funcionalidades. A categoria de diagramas de comportamento é
composta pelos: diagrama de caso de uso, diagrama de divisão geral de interação,
diagrama de atividades, diagrama de máquina de estados, diagrama de sequência,
diagrama de comunicação e diagrama de temporização.
35
2 ANÁLISE E PROJETO DE SISTEMA
O objetivo deste capítulo é apresentar o estado da prática atual da empresa,
além de descrever toda a estrutura de documentos e diagramas que explicam e
ilustram as funcionalidades e arquitetura do sistema.
2.1 ANÁLISE DE NEGÓCIO
Identifica-se na análise de negócio, a situação atual da empresa em questão,
na qual seu objetivo é mostrar os problemas enfrentados, necessidades e pessoas
envolvidas no processo, visando uma solução eficaz para a eliminação do problema.
2.1.1 Instrução do problema
Por estar localizada em uma cidade de pequeno porte, a empresa Car System
ainda é uma marca desconhecida, possui um número limitado de clientes e não
existe a possibilidade de se aumentar as vendas e a quantidade de clientes
consideravelmente.
Uma solução é a criação de um sistema de vendas online com o objetivo de
tornar os produtos da empresa acessíveis às pessoas de todo o Brasil. Dessa forma,
haverá a possibilidade de se aumentar os clientes e as vendas.
2.1.2 Análise de Mercado
A loja virtual será desenvolvida para a empresa Car System que, atualmente
está localizada em uma cidade de pequeno porte, não possui marcas conhecidas no
mercado, as vendas estão limitadas para uma quantidade pequena de pessoas e a
possibilidade de aumentar o número de clientes torna-se difícil devido a pequena
quantidade de habitantes da cidade.
Dessa forma o sistema de vendas online (loja virtual) almeja tornar os
produtos da empresa Car System acessíveis para mais pessoas na tentativa de
aumentar as vendas consideravelmente.
36
2.1.3 Atores envolvidos no processo
O administrador da loja e os clientes serão os atores envolvidos no sistema. O
primeiro será responsável por administrar todas as ações no site, no qual após
efetuar login, poderá realizar processos de inserção, alteração e exclusão de
produtos, categorias, marcas, fabricantes e especificações. O administrador poderá
também consultar as compras realizadas. Os clientes serão responsáveis por se
cadastrar no site, efetuar login, realizar as compras, realizar contato e efetuar
consultas de compras realizadas por eles.
2.1.4 Descrição do ambiente atual
Atualmente o dono do negócio realiza tarefas como vendas, instalações e o
controle financeiro sem auxilio de funcionários e software.
2.2 VISÃO GERAL DO PRODUTO
O objetivo desta seção é mostrar qual a intenção do sistema, ressaltando
suas características e necessidades para um funcionamento que atenda as
perspectivas do negócio da empresa em questão.
2.2.1 Perspectiva do Produto (Análise de Mercado)
O sistema tem como objetivo tornar a marca da loja conhecida, tornar os
produtos da loja disponíveis para mais pessoas e aumentar as vendas ao tornar o
processo de compra possível por meio do acesso à internet a partir de qualquer
dispositivo.
Ressalta-se
que
os
produtos
vendidos
pelo
site
não
serão
necessariamente instalados pelo dono da loja (administrador), nesse caso o cliente
pode contratar o serviço de um instalador de sua preferência.
2.2.2 Premissas e Dependências
Na loja, há necessidade de um computador com acesso a internet, visto que o
site será carregado pelo browser através do endereço de hospedagem no servidor.
37
2.2.3 Características
Funcionalidades do produto:

Efetuar login; ação realizada pelo administrador ou cliente, que
necessitam dessa funcionalidade para realizar determinadas operações
no site. O administrador, por ser responsável pela administração do
sistema, possuirá privilégios não pertencentes aos clientes e não
necessitará de cadastro no sistema, pois o acesso será concedido pelos
desenvolvedores do site. Os clientes, se não cadastrados, deverão
obrigatoriamente se cadastrar no site ao final da compra, e efetuar login
para finalizar a mesma. Se já cadastrados, poderão efetuar login desde o
primeiro momento em que acessam o site e, assim, poderão acessar sua
área e efetuar novas compras.

Cadastrar clientes; é realizado na interação do cliente com site, através
da funcionalidade cadastro de clientes que estará disponível no final da
primeira compra e na página de login.

Cadastrar produtos; atividade realizada pelo administrador do site, essa é
uma funcionalidade que permite cadastrar, excluir e atualizar os produtos
disponibilizados para a venda online.

Cadastrar categoria; atividade realizada pelo administrador, que poderá
cadastrar as categorias para cada tipo de produto contido na loja virtual.

Cadastrar especificações; o administrador é responsável por esta
atividade, na qual ele pode cadastrar uma ou mais especificações para os
produtos da loja virtual.

Cadastrar fabricantes; essa é outra atividade realizada pelo administrador,
que após ter cadastrado um ou mais fabricantes, poderá relacionar um
deles cada vez que for cadastrar um produto.

Cadastrar marcas; atividade semelhante a cadastrar fabricantes, também
será realizada pelo administrador que poderá cadastrar ou selecionar a
marca do produto no momento em que o estiver cadastrando.

Realizar compras; o cliente realiza as compras, porém é necessário o
cadastro prévio no site.
38

Consultar compras; o administrador e o cliente possuem acesso a esse
item, porém o cliente poderá consultar somente as compras realizadas
pelo seu usuário, o administrador possui acesso para consultar todas as
compras efetivadas através do site.

Realizar contato; é uma funcionalidade que permite com que os clientes
entrem em contato com o administrador do site para tirar dúvidas e/ou
enviar sugestões. Com os dados devidamente preenchidos, ao utilizar
esse recurso o sistema envia um e-mail com as informações descritas
pelo cliente para o administrador.
Para as funcionalidades supracitadas, são necessários os recursos: SGBD e
acesso a Internet.
2.2.4 Outros Requisitos do Produto
O produto deverá estar hospedado em um servidor para que esteja disponível
na Internet, e assim ser acessado por pessoas que possam vir a serem clientes da
empresa.
2.3 ANÁLISE DE REQUISITOS FUNCIONAIS
Nessa seção, mostram-se todas as funcionalidades do sistema, e os detalhes
destas funcionalidades são apresentados por meio de descrições e diagramas.
Junto a estes detalhes, as funcionalidades são atribuídas aos atores envolvidos no
negócio da empresa Car System, demonstrando assim, como é o funcionamento do
sistema.
2.3.1 Análise de Requisitos Funcionais
Para a obtenção dos resultados esperados com o site, considerando o
administrador e o cliente como atores, identificam-se as seguintes funcionalidades:
cadastrar clientes, cadastrar produtos, cadastrar categoria, cadastrar especificação,
cadastrar fabricante, cadastrar marca, realizar compras, consultar compras, realizar
contato e efetuar login.
39
2.3.1.1 Diagrama de Caso de Uso
Figura 2.1 – Diagrama de Caso de Uso
Fonte: Elaborado pelos autores, 2013
2.3.1.2 Especificação de Histórias
Uma loja do seguimento de equipamentos e acessórios para automóveis
necessita de um sistema de vendas online para ampliar o numero de clientes,
vendas e se tornar competitiva no mercado em que atua.
A única pessoa que trabalha na empresa é o próprio dono. Ele é o
encarregado de todas as tarefas na loja, tais como: vender os equipamentos,
instalar, comprar novos equipamentos, entre outros.
Com a solução proposta, não há a necessidade de o cliente estar presente na
loja, pois através de uma conexão com a internet ele pode realizar as compras
através do site. Para realizar a compra, o cliente deve adicionar os produtos ao
carrinho de compras e finalizar a mesma efetuando cadastro no site. Depois de ter
40
realizado o cadastro na primeira compra, o cliente deverá apenas efetuar o login ao
final de cada compra no site, utilizando o login e senha registrados no cadastro.
O cadastro de produtos também é uma função atribuída ao administrador, que
nesse caso, analisa qual categoria o produto pertence e realiza a inserção do
produto no site. No cadastro de produtos, o administrador também cadastra as
especificações do produto, marca e fabricante, além de informar o preço e
acrescentar fotos para uma melhor apresentação ao cliente.
As compras são realizadas pelos clientes e, logo após, é notificado através de
um e-mail automático que é disparado assim que o cliente efetua a compra.
O administrador e o cliente possuem o recurso de visualizar compras. O
administrador poderá visualizar todas as compras realizadas no site através de dois
períodos informados e o cliente poderá visualizar as compras realizadas por ele.
2.4 ANÁLISE E DESIGN
A etapa de análise e design objetiva criar o design ou a arquitetura do sistema
a ser desenvolvido a partir dos requisitos do sistema e de uma análise mais
específica.
Esta arquitetura deve ser adaptada para que corresponda à
implementação.
2.4.1 Diagrama de Implantação
Estes diagramas ilustram a implantação dos elementos de software à
arquitetura física e a comunicação de rede entre esses elementos.
Figura 2.2 – Diagrama de Implantação
Fonte: Elaborado pelos autores, 2013
41
2.4.2 Projeto de Banco de Dados
O projeto de banco de dados é uma atividade essencial no desenvolvimento
de software, pois a não realização dessa atividade pode causar problemas como
ineficiência do banco de dados em atender a demanda das aplicações e problemas
na manutenção. (MACHADO, 2008)
Para o desenvolvimento de um projeto de banco de dados orientada a
modelagem de banco de dados, deve-se envolver os seguintes modelos que o
compõe: modelo conceitual, modelo lógico e modelo físico.
2.4.2.1 Diagrama de Dados
Figura 2.3 – Modelo Lógico
Fonte: Elaborado pelos autores, 2013
42
2.4.2.2 Mapeamento para o Modelo Relacional e Projeto Físico
Figura 2.4 – Modelo Relacional
Fonte: Elaborado pelos autores, 2013
2.4.3 Diagrama de Atividades
Os diagramas de atividades oferecem uma notação rica para exibir atividades
sequênciais e paralelas em um processo. Esses diagramas são importantes para
modelar processos de negócios, fluxos de trabalho, fluxos de dados e algoritmos
complexos.
2.4.3.1 Cadastrar Categoria
Figura 2.5 – Diagrama de Atividade – Cadastrar Categoria
Fonte: Elaborado pelos autores, 2013
43
2.4.3.2 Cadastrar Marca
Figura 2.6 – Diagrama de Atividade – Cadastrar Marca
Fonte: Elaborado pelos autores, 2013
2.4.3.3 Cadastrar Fabricante
Figura 2.7 – Diagrama de Atividade – Cadastrar Fabricante
Fonte: Elaborado pelos autores, 2013
2.4.3.4 Cadastrar Especificação
Figura 2.8 – Diagrama de Atividade – Cadastrar Especificação
Fonte: Elaborado pelos autores, 2013
44
2.4.3.5 Realizar Compra
Figura 2.9 – Diagrama de Atividade – Realizar Compra
Fonte: Elaborado pelos autores, 2013
2.4.3.6 Cadastrar Produto
Figura 2.10 – Diagrama de Atividade – Cadastrar Produto
Fonte: Elaborado pelos autores, 2013
45
2.4.3.7 Efetuar Login
Figura 2.11 – Diagrama de Atividade – Efetuar Login (Administrador)
Fonte: Elaborado pelos autores, 2013
Figura 2.12 – Diagrama de Atividade – Efetuar Login (Cliente)
Fonte: Elaborado pelos autores, 2013
46
2.4.3.8 Cadastrar Cliente
Figura 2.13 – Diagrama de Atividade – Cadastrar Cliente
Fonte: Elaborado pelos autores, 2013
2.4.3.9 Realizar Contato
Figura 2.14 – Diagrama de Atividade – Realizar Contato
Fonte: Elaborado pelos autores, 2013
2.4.4 MVC
O Diagrama MVC é o padrão de arquitetura de software que tem a finalidade
de separar a aplicação em três camadas: Model que representa as classes que se
está trabalhando, View define como e o que será apresentado na tela, e o Controller
que gerencia os eventos entre a interface do usuário e o modelo.
47
2.4.4.1 Cadastrar Categoria
Figura 2.15 – MVC – Cadastrar Categoria
Fonte: Elaborado pelos autores, 2013
2.4.4.2 Cadastrar Marca
Figura 2.16 – MVC – Cadastrar Marca
Fonte: Elaborado pelos autores, 2013
48
2.4.4.3 Cadastrar Fabricante
Figura 2.17 – MVC – Cadastrar Fabricante
Fonte: Elaborado pelos autores, 2013
2.4.4.4 Cadastrar Especificação
Figura 2.18 – MVC – Cadastrar Especificação
Fonte: Elaborado pelos autores, 2013
49
2.4.4.5 Realizar Compra
Figura 2.19 – MVC – Realizar Compra
Fonte: Elaborado pelos autores, 2013
2.4.4.6 Cadastrar Produto
Figura 2.20 – MVC – Cadastrar Produto
Fonte: Elaborado pelos autores, 2013
50
2.4.4.7 Efetuar Login
Figura 2.21 – MVC – Efetuar Login (Administrador)
Fonte: Elaborado pelos autores, 2013
Figura 2.22 – MVC – Efetuar Login (Cliente)
Fonte: Elaborado pelos autores, 2013
51
2.4.4.8 Cadastrar Cliente
Figura 2.23 – MVC – Cadastrar Cliente
Fonte: Elaborado pelos autores, 2013
2.4.4.9 Realizar Contato
Figura 2.24 – MVC – Realizar Contato
Fonte: Elaborado pelos autores, 2013
2.4.5 Diagrama de Sequência
Os Diagramas de Sequência são usados para representar os eventos de
entrada e saída do sistema e são muito importantes para o projeto de objetos.
52
2.4.5.1 Cadastrar Categoria
Figura 2.25 – Diagrama de Sequência – Cadastrar Categoria
Fonte: Elaborado pelos autores, 2013
2.4.5.2 Cadastrar Marca
Figura 2.26 – Diagrama de Sequência – Cadastrar Marca
Fonte: Elaborado pelos autores, 2013
53
2.4.5.3 Cadastrar Fabricante
Figura 2.27 – Diagrama de Sequência – Cadastrar Fabricante
Fonte: Elaborado pelos autores, 2013
2.4.5.4 Cadastrar Especificação
Figura 2.28 – Diagrama de Sequência – Cadastrar Especificação
Fonte: Elaborado pelos autores, 2013
54
2.4.5.5 Cadastrar Cliente
Figura 2.29 – Diagrama de Sequência – Cadastrar Cliente
Fonte: Elaborado pelos autores, 2013
2.4.5.6 Cadastrar Produto
Figura 2.30 – Diagrama de Sequência – Cadastrar Produto
Fonte: Elaborado pelos autores, 2013
55
2.4.5.7 Efetuar Login
Figura 2.31 – Diagrama de Sequência – Efetuar Login (Administrador)
Fonte: Elaborado pelos autores, 2013
Figura 2.32 – Diagrama de Sequência – Efetuar Login (Cliente)
Fonte: Elaborado pelos autores, 2013
56
2.4.5.8 Realizar Compra
Figura 2.33 – Diagrama de Sequência – Realizar Compra
Fonte: Elaborado pelos autores, 2013
2.4.5.9 Realizar Contato
Figura 2.34 – Diagrama de Sequência – Realizar Contato
Fonte: Elaborado pelos autores, 2013
57
3 IMPLEMENTAÇÃO
Neste capítulo, são mostradas as interfaces gráficas do sistema e suas
respectivas funcionalidades que, por sua vez, se dividem em área do usuário, área
do cliente e área do gerente. Também são apresentados os códigos responsáveis
pelas principais funcionalidades do sistema e pelo funcionamento do Web Design
Responsivo junto a simulação do funcionamento do site em diferentes resoluções.
3.1 ÁREA DO USUÁRIO
Nesta subdivisão, são apresentadas as interfaces com suas respectivas
funcionalidades que o usuário tem acesso sem a necessidade de acessar a área do
cliente ou gerente.
3.1.1 Página Home do Site
Na figura 3.1, é ilustrada a página inicial do site, denominada página Home.
Ao acessar o site, o usuário visualiza a página Home que, assim como todas as
outras páginas, possui um menu superior alinhado à direita, o logo da loja alinhado à
esquerda, um campo de busca por nome de produto, um menu lateral alinhado a
esquerda que divide os produtos por categoria, o conteúdo principal e rodapé.
Figura 3.1 – Página Home do site
Fonte: Elaborada pelos autores, 2013.
58
Sempre que acessada, a página Home possui como conteúdo os produtos em
oferta. Todas as páginas do site permitem a busca por nome de produtos, a partir do
campo na parte superior da página, e a busca por ofertas ou destaques, a partir do
campo no rodapé da página. Quando qualquer uma dessas três buscas é solicitada,
o site é direcionado para a página Home com o respectivo conteúdo buscado.
3.1.2 Página para Contato
Na figura 3.2, é apresentada a página de Contato.
Figura 3.2 – Página de Contato
Fonte: Elaborada pelos autores, 2013.
O usuário pode utilizar esta página para entrar em contato com o Gerente da
loja. Para isso, o usuário deve informar dados como: nome, email, cidade, telefone,
assunto e mensagem.
3.1.3 Carrinho de Compras
Na figura 3.3, é apresentada a página do carrinho de compras. Esta página é
usada para exibir os produtos adicionados ao carrinho pelo usuário, e quando ela é
acessada através do menu superior, e não existe nenhum item adicionado no
carrinho, a página não permite que o usuário dê andamento a uma compra.
59
Figura 3.3 – Carrinho de Compras
Fonte: Elaborada pelos autores, 2013.
3.1.4 Login
Na figura 3.4, é exibida a página que o usuário visualiza ao optar por efetuar
login, opção disponível no menu superior. A partir desta página, o usuário pode
seguir para a página de login do gerente ou para página de login do cliente. O
funcionamento da página de login do cliente e login do gerente são mostrados nos
itens 3.2 Área do Cliente e 3.3 Área do Gerente respectivamente.
Figura 3.4 – Login
Fonte: Elaborada pelos autores, 2013.
60
3.1.5 Buscar produtos pelo menu Lateral
Na figura 3.5, é exibida a página Home com o resultado da busca por “CD
Player”, no menu Lateral.
Figura 3.5 – Busca por categorias do menu Lateral
Fonte: Elaborada pelos autores, 2013.
3.1.6 Exibição de detalhes de produto
Na figura 3.6, é ilustrada a página de detalhes de produto.
Figura 3.6 – Detalhes do produto
Fonte: Elaborada pelos autores, 2013.
61
Na página de detalhes de produto, o usuário poderá visualizar informações
como a garantia do produto, as especificações atribuídas a ele, o preço, três fotos e
também poderá efetuar download do manual do produto.
3.1.7 Realização de compras pelo site
Para melhor explicar o funcionamento do processo de efetuar compra no site,
é mostrada uma compra sendo realizada por um cliente ainda não cadastrado, ou
seja, é mostrada a maior sequência possível de passos que uma compra pode ter
neste site. Em outra situação, na qual o usuário já se cadastrou e confirmou o
cadastro, para realizar uma compra, ele pode efetuar login antes de iniciar a compra.
Dessa forma, logo o site exibirá a página de inserção de dados do cartão quando o
usuário clicar em “Finalizar Compra”. O usuário poderá também optar por efetuar
login depois de ter escolhido os produtos do carrinho, pois caso o mesmo finalize o
carrinho sem estar logado, o site exibirá a página de login do cliente.
Na figura 3.7, é apresentada a pagina do carrinho de compras após o usuário
ter adicionado um produto ao carrinho a partir da opção “Adicionar ao Carrinho”,
disponível abaixo de cada produto no site. Um produto não terá a opção de adição
ao carrinho de compras, caso ele tenha a quantidade em estoque igual a zero.
Nesse caso, aparecerá abaixo do produto a mensagem de “Produto indisponível”.
Figura 3.7 – Adição de produto ao carrinho de compras
Fonte: Elaborada pelos autores, 2013.
62
Com pelo menos um produto adicionado ao carrinho, o usuário tem opções
como: atualizar valores, opção que calcula os valores do carrinho de acordo com a
quantidade informada no campo Quantidade, excluir, que exclui o produto do
carrinho e, por fim, a opção finalizar carrinho, que direciona o site para a página de
inserção de dados do cartão. Caso o usuário informe um novo valor para o campo
Quantidade e se esqueça de clicar em “Atualizar Valores”, o site irá calcular os
valores da compra automaticamente quando o usuário optar por finalizar a compra.
E caso o usuário informe um valor para o campo Quantidade, que seja maior que a
quantidade em estoque do produto desejado, o site não irá permitir a atualização
dos valores ou o andamento da compra e exibirá uma mensagem para informá-lo
sobre a quantidade em estoque do produto.
Na figura 3.8, é ilustrada a página do carrinho de compras após o cliente
tentar dar andamento em uma compra com um valor no campo quantidade do
carrinho maior do que a quantidade em estoque do produto.
Figura 3.8 – Mensagem do site sobre quantidade em estoque
Fonte: Elaborada pelos autores, 2013.
Com os produtos e as respectivas quantidades já definidas, considerando as
quantidades dos produtos em estoque, o usuário poderá dar andamento clicando na
opção “Finalizar Carrinho”. Nesta situação, como definida no início deste item, o
usuário ainda não está cadastrado e, consequentemente, não está logado. Assim,
após finalizar o carrinho, a página de login do cliente é apresentada.
63
Na figura 3.9, é apresentada a página de login do cliente.
Figura 3.9 – Login do Cliente ao efetuar compra
Fonte: Elaborada pelos autores, 2013.
A partir da página de login do Cliente, o usuário poderá acessar a página de
cadastro de cliente. Na figura 3.10, é apresentada a página de cadastro de Clientes.
Figura 3.10 – Cadastro de Cliente
Fonte: Elaborada pelos autores, 2013.
Após ter realizado o cadastro, o cliente recebe um email com um link no qual
ele deve acessar para confirmar o cadastro no site.
64
Na figura 3.11, é ilustrada a página exibida pelo site quando um cadastro é
realizado com sucesso.
Figura 3.11 – Confirmação de cadastro
Fonte: Elaborada pelos autores, 2013.
Uma vez que a compra foi realizada, ao confirmar o cadastro por meio do link
enviado por email, o usuário terá acesso à página para inserção dos dados do
cartão para finalizar a compra. Na figura 3.12, é apresentada a página para inserção
dos dados do cartão.
Figura 3.12 – Inserção dos dados do cartão
Fonte: Elaborada pelos autores, 2013.
65
Na página de inserção de dados do cartão, o cliente tem a opção de cancelar
a compra. Se o cliente optar por cancelar a compra, todos os produtos serão
excluídos do carrinho, e o site exibirá a página Home.
Ao finalizar a compra, o site exibe uma página com alguns dados do Cliente e
alguns dados da Compra. Na figura 3.13, é ilustrada a página que é exibida quando
o cliente finaliza a compra.
Figura 3.13 – Página com dados da compra e do cliente
Fonte: Elaborada pelos autores, 2013.
3.2 ÁREA DO CLIENTE
Nesta subdivisão, são mostradas as interfaces e funcionalidades que os
clientes tem acesso ao efetuar login no site.
3.2.1 Login do Cliente
Para acessar a área do cliente, o usuário deve efetuar login por meio da
página de login do cliente, disponível na página de login que permite acesso para as
páginas de login do gerente e login dos clientes, que pode ser acessada ao clicar na
opção “Login” no menu superior. Se na tentativa de efetuar login, o cliente informar
dados incorretos, o site irá exibir uma página informando um erro. Na figura 3.14, é
apresentada a página que o usuário utiliza para efetuar login no site.
66
Figura 3.14 – Login de clientes
Fonte: Elaborada pelos autores, 2013.
3.2.2 Área do Cliente
Na figura 3.15, é apresentada a área do cliente.
Figura 3.15 – Área do cliente
Fonte: Elaborada pelos autores, 2013.
3.2.3 Atualização de dados do Cliente
Na figura 3.16, é apresentada a página para alteração dos dados do cliente.
67
Figura 3.16 – Alteração de dados do cliente
Fonte: Elaborada pelos autores, 2013.
3.2.4 Visualização de Compras
Na figura 4.17, é ilustrada a página para visualização de compras. Nesta
página, o cliente poderá visualizar as compras realizadas por ele.
Figura 3.17 – Visualização de compras do cliente
Fonte: Elaborada pelos autores, 2013.
A partir da página de visualização das compras, o cliente pode acessar os
detalhes de cada compra.
68
Na figura 3.18, é apresentada a página de detalhes de compras do cliente.
Figura 3.18 – Visualização de detalhes de compras de clientes
Fonte: Elaborada pelos autores, 2013.
3.3 ÁREA DO GERENTE
Nesta subdivisão, são mostradas as interfaces e funcionalidades que os
gerentes terão acesso ao efetuar login no site.
3.3.1 Login Gerente
Para ter acesso à área dos gerentes, o usuário deve efetuar login por meio da
página de login do gerente, disponível na página de login que permite acesso para
as páginas de login de gerente e de clientes, localizada no menu superior. Caso os
dados informados pelo gerente estejam incorretos, o site exibirá uma página que
informa um erro.
É a partir da área do gerente que as principais funcionalidades do site podem
ser acessadas. Funcionalidades como o cadastro de produtos, essencial para que
uma compra possa ser realizada, e inserção de outras informações muito
importantes para que os clientes possam se informar melhor no momento em que
forem adquirir o produto desejado. A partir da figura 3.19, o usuário pode visualizar a
página de login do gerente.
69
Figura 3.19 – Login Gerente
Fonte: Elaborada pelos autores, 2013.
3.3.2 Área do Gerente
Na figura 3.20, é apresentada a área do gerente.
Figura 3.20 – Área do Gerente
Fonte: Elaborada pelos autores, 2013.
3.3.3 Menu de Marcas
Na figura 3.21, é apresentada o menu de marcas.
70
Figura 3.21 – Menu de marcas
Fonte: Elaborada pelos autores, 2013.
Ao optar pela opção “Marcas”, disponível no menu da área do gerente, o site
irá exibir um submenu para gerenciamento de marcas que permite cadastrar,
consultar ou voltar para a área do gerente. As outras opções de gerenciamento de
categorias, fabricantes e especificações, presentes no menu da área do gerente,
não serão apresentadas, pois são similares a opção de gerenciamento de marcas.
Na figura 3.22, é exibida a página de cadastro de marcas.
Figura 3.22 – Cadastro de marcas
Fonte: Elaborada pelos autores, 2013.
71
Na figura 3.23, é exibida a página de consulta de marcas. Ao encontrar
marcas cadastradas, o site automaticamente exibe a opção de atualizá-las.
Figura 3.23 – Consulta de marcas
Fonte: Elaborada pelos autores, 2013.
Na figura 3.24, é exibida a página de atualização de marcas.
Figura 3.24 – Atualização marcas
Fonte: Elaborada pelos autores, 2013.
Ao optar por atualizar uma marca, os dados da mesma estarão disponíveis no
formulário de atualização.
72
3.3.4 Menu de Produtos
Na figura 3.25, é apresentado o menu de produtos.
Figura 3.25 – Menu de produtos
Fonte: Elaborada pelos autores, 2013.
A funcionalidade cadastro de produto aparece como a mais complexa e está
dividida nas etapas de inserção de dados genéricos e de adição de especificações.
Na figura 3.26, é exibida a primeira etapa do cadastro de produtos.
Figura 3.26 – Cadastro de produtos
Fonte: Elaborada pelos autores, 2013.
73
A partir da página de adição de especificações ao produto, pode-se cadastrar
novas especificações. Quando uma especificação é cadastrada nesta etapa, o site
exibe a página de adição de especificação ao produto novamente, já com a nova
especificação cadastrada, para que o gerente possa dar andamento ao cadastro de
produto. Na figura 3.27, é apresentada a segunda etapa de cadastro de produtos.
Figura 3.27 – Adição de Especificação ao cadastrar
Fonte: Elaborada pelos autores, 2013.
Na figura 3.28, é apresentada a página de consulta de produtos.
Figura 3.28 – Consulta de produtos
Fonte: Elaborada pelos autores, 2013.
74
Na figura 3.29, é apresentada a página de atualização de produtos.
Figura 3.29 – Atualização de produtos
Fonte: Elaborada pelos autores, 2013.
Na figura 3.30, é exibida a página de adição de especificação ao produto.
Figura 3.30 – Adição de especificação ao atualizar
Fonte: Elaborada pelos autores, 2013.
3.4 APRESENTAÇÃO DO CÓDIGO FONTE
Nesta seção, serão apresentados os códigos que são utilizados nas
funcionalidades mais complexas do site.
75
3.4.1 Cadastro de Produtos
O formulário utilizado para cadastro de produto permite inserção de dados
como: o nome do produto, quantidade em estoque, garantia, preço, percentual de
desconto, manual, quantidade vendida, fotos, marca, fabricante, categoria, e a
opção de definição do produto como em oferta e destaque ou não.
Para que um formulário possa permitir a inserção de arquivos, o mesmo deve
ter a propriedade enctype definida como multipart/form-data, e depois que esses
dados são passados da página de cadastro para o servlet, o processo de
recuperação dos dados é dividido em duas etapas: a etapa de recuperação de
caracteres e a etapa de recuperação de arquivos. Na figura 3.31, é exibido o código
utilizado para recuperação dos dados do formulário.
Figura 3.31 – Recuperação de dados do formulário
Fonte: Elaborada pelos autores, 2013.
No código da figura 3.30, o código está resumido, pois o objetivo é apenas
mostrar como os valores do formulário são recuperados. O laço While percorre os
valores recuperados e o comando if se encarrega de verificar, por meio do método
isFormField, se o valor vem de um campo do tipo arquivo ou não.
76
Na figura 3.32, é exibido o código utilizado para fazer upload de arquivo. Este
código é parte do código utilizado para gerenciar os arquivos.
Figura 3.32 – Upload de arquivo
Fonte: Elaborada pelos autores, 2013.
Após os dados terem sidos recuperados e as imagens gravadas nos
diretórios, antes de registrar os dados dos produtos no banco, o servlet faz uma
verificação que identifica se um novo produto está sendo inserido ou se um produto
existente está sendo atualizado.
Na figura 3.33, é apresentado o código que verifica se um novo produto está
sendo inserido, ou se um produto existente está sendo atualizado.
Figura 3.33 - Verificação de inserção ou atualização do Servlet ControleProduto
Fonte: Elaborada pelos autores, 2013.
77
Com o produto cadastrado ou atualizado, o próximo passo é exibir as
especificações para que o gerente tenha a opção de adicioná-las ao produto. Na
figura 3.34, é apresentado o trecho de código da página jsp que exibe as
especificações na página de adição de especificação ao produto.
Figura 3.34 – Página de adição de especificação
Fonte: Elaborada pelos autores, 2013.
Neste código, uma sincronização foi feita para a definição das propriedades
name no formulário, e esta mesma sincronização é feita no servlet para a
recuperação dos valores corretamente.
78
Após o uso do método para recuperar as especificações cadastradas no
banco, é realizada uma verificação para se saber se a lista que recupera o retorno
do método, possui alguma especificação. Caso possua pelo menos uma
especificação, um laço irá percorrer a lista e uma verificação será feita para
identificar uma inserção ou uma atualização do produto no qual se deseja que sejam
adicionadas ou removidas as especificações. Caso seja uma inserção, a página será
gerada com todas as especificações desmarcadas e com os respectivos valores
vazios e caso seja uma atualização, serão recuperados os dados das especificações
e a página conterá as especificações já adicionadas ao produto com o valor que foi
especificado. Na figura 3.35, é apresentado o código utilizado pelo servlet para
identificar uma inserção ou uma atualização.
Figura 3.35 – Verificação de inserção ou atualização do servlet
ControleListaEspecificacao
Fonte: Elaborada pelos autores, 2013.
Esta verificação é muito importante, pois recupera o código do último produto
inserido em caso de inserção ou o código do produto que foi atualizado em caso de
atualização, ou seja, recupera o código do produto correto a ser relacionado ou não
com as especificações.
Na figura 3.36, é apresentado o código usado para recuperar os valores dos
códigos das especificações e os valores atribuídos às especificações.
Figura 3.36 – Recuperação dos valores do formulário
Fonte: Elaborada pelos autores, 2013.
79
Neste código, o valor zero da variável t é convertido para string e atribuído
para
a
string
nameCodEspec.
Dessa
forma,
ao
utilizar
o
comando
request.getParameter(nameCodEspec), o valor contido na string nameCodEspec
equivale a propriedade name do formulário e, assim, esta string é usada para
recuperar o valor da propriedade name que foi definida como zero.
O valor de t é incrementado em um, para cada vez que o laço for executado
e, devido a isso, o valor dos códigos de todas as especificações são recuperados no
servlet. Mas caso o campo checkbox de uma especificação não seja marcado, o
valor enviado ao servlet será nulo. A mesma situação ocorre para a recuperação do
valor atribuído à especificação. Deve-se considerar que o valor dado a uma
especificação não será recuperado se o respectivo não estiver marcado.
Na figura 3.37, é apresentado o código que gerencia a inserção das
especificações na tabela listaEspecificação.
Figura 3.37 – Gerencia Especificação
Fonte: Elaborada pelos autores, 2013.
80
No início do código, é verificado se uma inserção ou uma atualização está
ocorrendo.
Caso
seja
uma
inserção
e
o
valor
recuperado
do
atributo
“manipulaProduto” for igual a 1, é verificado se o campo checkbox da especificação
está marcado. Se estiver, os dados são inseridos na tabela listaEspecificação. Caso
seja uma atualização, o valor recuperado do atributo “manipulaProduto” for igual a 2,
é verificado se o campo checkbox foi
marcado. Se o campo checkbox não foi
marcado é verificado se existe um registro com o código do produto e com o código
da especificação. Se existir, o registro é excluído. Caso o checkbox foi marcado, é
verificado se o código do produto e o código da especificação existem em um
registro da tabela listaEspecificação. Se existir, o valor atribuído ao registro do banco
é comparado com o registro passado pelo formulário. Se for diferente, o valor é
atualizado, caso contrário, nada é feito. Mas caso o checkbox foi marcado e nada foi
encontrado no banco, um novo registro é inserido na tabela listaEspecificação.
3.4.2 Download do manual do produto
Quando o usuário solicita o manual, o código do produto é enviado ao servlet
e, a partir deste código, são recuperados todos os dados do produto, pois o nome do
produto será utilizado no processo de download. Ao concatenar o diretório padrão
dos arquivos do site, com o código do produto e o nome da pasta “manual”, é
possível gerar o diretório completo e recuperar o arquivo correto.
Figura 3.38 – Servlet DownloadManual
Fonte: Elaborada pelos autores, 2013.
81
3.4.3 Servlet para recuperar imagem de qualquer diretório
O servlet TrataImagem é utilizado para recuperar as imagens do site, pois as
mesmas são gravadas em um diretório fora da aplicação. Na figura 3.39, é
apresentado o código do servlet utilizado para recuperar as imagens do site.
Figura 3.39 – Servlet TrataImagem
Fonte: Elaborada pelos autores, 2013.
3.4.4 Web Design Responsivo
No primeiro capítulo, o funcionamento e a forma de implementação das três
técnicas que compõem o Web Design Responsivo foi apresentado na teoria e, nesta
seção, o funcionamento e a forma de implementação das três técnicas é
apresentado por meio de códigos fonte e imagens.
Neste site, a necessidade do uso da técnica Imagens e recursos flexíveis, foi
devido o uso de uma imagem na qual é apresentada a marca da empresa. Na figura
3.40, é apresentada a forma na qual esta técnica se aplica no arquivo de estilização.
Figura 3.40 – Imagem flexível
Fonte: Elaborada pelos autores, 2013.
82
Para demonstrar a forma de implementação da técnica Layout de Fluído,
primeiramente é apresentado um código CSS com medidas fixas para que depois,
ao apresentar um código CSS com medidas flexíveis, a diferença possa ser notada.
Na Figura 3.41, é apresentado o código CSS com medidas fixas.
Figura 3.41 – Código CSS fixo
Fonte: Elaborada pelos autores, 2013.
83
Na figura 3.42, é apresentado o código CSS com medidas flexíveis para
demonstrar o uso da técnica Layout de Fluído.
Figura 3.42 – Código CSS flexível
Fonte: Elaborada pelos autores, 2013.
84
Para apresentar o funcionamento e a forma de implementação da técnica
Media Queries, os códigos e a evolução do elemento superior do site são mostrados
ao mesmo tempo, exibindo os efeitos do código na evolução do elemento de acordo
com a resolução utilizada. Isso acontece apenas nesta seção, pois os efeitos
causados
pelas
duas
técnicas
apresentadas
anteriormente,
também
são
apresentados a partir da evolução deste elemento, pelo fato do banner da empresa
ser apresentado nas imagens da evolução e medidas em porcentagem serem
usadas nos códigos.
A evolução do elemento superior do site, contendo o banner da empresa e o
menu superior, é utilizado para apresentar o funcionamento das três técnicas e os
códigos visam apresentar o uso de Media Queries. Na figura 3.43, é apresentado o
código para dispositivos com resolução mínima de até 846 pixels.
Figura 3.43 – Código para resolução mínima de 846 pixels
Fonte: Elaborada pelos autores, 2013.
Na figura 3.44, é apresentado o elemento superior para dispositivos com
resolução mínima de até 846 pixels.
Figura 3.44 – Elemento superior para resolução mínima de 846 pixels
Fonte: Elaborada pelos autores, 2013.
Na figura 3.45, é apresentado o código para dispositivos com resolução
mínima de 669 pixels e máxima de 845 pixels.
85
Figura 3.45 – Código para resolução mínima de 699 pixels e máxima de 845
Fonte: Elaborada pelos autores, 2013.
Na figura 3.46, é apresentado o elemento superior para dispositivos com
resolução mínima de 699 pixels e máxima de 845 pixels.
Figura 3.46 – Elemento superior para resolução mínima de 699 pixels e máxima de
845 pixels
Fonte: Elaborada pelos autores, 2013.
Na figura 3.47, é apresentado o código para dispositivos com resolução
mínima de 392 pixels e máxima de 668 pixels.
Figura 3.47 – Código para resolução mínima de 392 pixels e máxima de 668 pixels
Fonte: Elaborada pelos autores, 2013.
Na figura 3.48, é apresentado o elemento superior para dispositivos com
resolução mínima de 392 pixels e máxima de 668 pixels.
86
Figura 3.48 – Elemento superior para resolução mínima de 392 pixels e máxima de
668 pixels
Fonte: Elaborada pelos autores, 2013.
Na figura 3.49, é apresentado o código para dispositivos com resolução
máxima de 391 pixels.
Figura 3.49 – Código para resolução máxima de 391 pixels
Fonte: Elaborada pelos autores, 2013.
Na figura 3.50, é apresentado o elemento superior para dispositivos com
resolução máxima de 391 pixels.
Figura 3.50 – Código para resolução máxima de 391 pixels
Fonte: Elaborada pelos autores, 2013.
87
3.4.5 Simulação do site em diferentes resoluções
Para a realização dos testes do Design Responsivo da loja virtual, o site
http://responsinator.com/, foi utilizado.
Nas imagens a seguir, são apresentadas as diferentes adaptações do site em
diversas resoluções. Na figura 3.51, o site é apresentado em um dispositivo com
resolução de 320 x 480.
Figura 3.51 – Dispositivo com resolução de 320 x 480.
Fonte: Elaborada pelos autores, 2013.
88
Na figura 3.52, o site é apresentado em um dispositivo com resolução de 320
x 240.
Figura 3.52 – Dispositivo com resolução de 320 x 240.
Fonte: Elaborada pelos autores, 2013.
Na figura 3.53, o site é apresentado em um dispositivo com resolução de 240
x 320.
Figura 3.53 – Dispositivo com resolução de 240 x 320.
Fonte: Elaborada pelos autores, 2013.
89
Na figura 3.54, o site é apresentado em um dispositivo com resolução de 480
x 320.
Figura 3.54 – Dispositivo com resolução de 480 x 320.
Fonte: Elaborada pelos autores, 2013.
Na figura 3.55, o site é apresentado em um dispositivo com resolução de 685
x 380.
Figura 3.55 – Dispositivo com resolução de 685 x 380.
Fonte: Elaborada pelos autores, 2013.
90
Na figura 3.56, o site é apresentado em um dispositivo com resolução de 600
x 1024.
Figura 3.56 – Dispositivo com resolução de 600 x 1024.
Fonte: Elaborada pelos autores, 2013.
91
Na figura 3.57, o site é apresentado em um dispositivo com resolução de
1024 x 600.
Figura 3.57 – Dispositivo com resolução de 600 x 1024.
Fonte: Elaborada pelos autores, 2013.
92
CONSIDERAÇÕES FINAIS
O conceito de loja virtual já é bastante difundido atualmente. São diversas as
maneiras como elas se apresentam e buscam promover o negócio para o qual foi
desenvolvida, assim como também são várias as ferramentas e técnicas existentes
para o seu desenvolvimento. Dessa forma, fica evidente que várias empresas já
utilizaram e/ou utilizam uma loja virtual com o intuito de serem competitivas e
aumentarem seus lucros. Embasado nesses fatos, surgiu a ideia de montar a loja
virtual que compõe esse trabalho, com a intenção de sanar os problemas
enfrentados pela empresa Car System.
No decorrer do desenvolvimento deste trabalho foram encontradas diversas
dificuldades, que vieram desde a escolha de uma bibliografia adequada e a definição
das ferramentas que se encaixariam melhor para a resolução do problema, até a
complicada tarefa de implementação de um projeto para web.
A proposta do uso da ferramenta Designer Responsivo foi de grande valia, e
apesar de ter demandado um esforço maior, foi implementada e funcionou conforme
o esperado e, além de agregar valores à apresentação do site em diferentes
resoluções, também proporcionou conhecimentos importantes devido a sua
relevância em um meio no qual a mobilidade é essencial.
Ao atingir os objetivos como a implementação de todas as funcionalidades do
sistema e do Web Design Responsivo, pode-se concluir que o trabalho em questão
possibilitou o desenvolvimento de uma ferramenta que, além de se adequar às
novas e promissoras tendências de mercado, também pode ser muito útil para
empresas que objetivam ampliar seu negócio e eliminar problemas como os
enfrentados pela empresa para o qual ela foi desenvolvida, a Car System.
Em consideração às constantes evoluções voltadas para a área de tecnologia
da informação e as aplicações envolvidas por ela, pode-se considerar que esse
projeto também possui grandes oportunidades de expansão. Essas oportunidades
englobam: integração da loja com um sistema de pagamentos, a apresentação
visual da aplicação, a adição de recursos, o desenvolvimento de funcionalidades
diferentes ou melhoramentos das existentes, segurança voltada para aplicação web,
entre outras.
93
Esses fatores podem tornar a loja virtual ainda mais interessante e funcional,
ressaltando que o fato dela ser uma aplicação web, provavelmente sempre haverá
aprimoramentos a ser implementados com a finalidade de mantê-la atual.
94
REFERÊNCIAS BIBLIOGRÁFICAS
ABBEY, M.; COREY, M.; ABRAMSON, I. Oracle 9i: Guia Introdutório. Rio de
Janeiro: Campus Ltda, 2002.
ELMASRI, R.; NAVATHE, S. B. Sistemas de Banco de Dados. 4. Ed. São Paulo:
Pearson Education, 2005.
FILHO, R. D. C.; RIBEIRO, C. E. Informática: Programação de Computadores. 4.
ed. São Paulo: Fundação Padre Anchieta, 2010.
FREEMAN, E.; FREEMAN, E. Use a Cabeça! HTML com CSS e XHTML. 2. ed. Rio
de Janeiro: Alta Books Ltda, 2008.
GONÇALVES, E. Desenvolvendo Aplicações Web com JSP, Servlets, Java
Server Faces, Hibernate, EJB3 Persistence e Ajax. Rio de Janeiro: Ciência
Moderna, 2007.
GONÇALVES, E. Dominando Java Server Faces e Facelets Utilizando Spring
1.5, Hibernate e JPA. Rio de Janeiro: Ciência Moderna, 2008.
GONÇALVES, E. Dominando Netbeans. Rio de Janeiro: Ciência Moderna, 2006.
JUNIOR, W. M. et al. Sistemas de Comércio
Desenvolvimento. Rio de Janeiro: Campus Ltda, 2002.
Eletrônico:
Projeto
e
KURNIAWAN, B. Java para Web com Servlets, JSP e EJB. Rio de Janeiro:
Ciência Moderna, 2002.
LARMAN, C. Utilizando UML e Padrões: Uma Introdução à Analise e ao Projeto
Orientado a Objetos e ao Desenvolvimento Iterativo. Porto Alegre: Bookman, 2007.
LEITE, M. Acessando Banco de Dados com Ferramentas RAD: Aplicações em
Visual Basic. Rio de Janeiro: Brasport Livros e Multimídia Ltda, 2007.
MACHADO, F. N. R. Banco de Dados: Projeto e Implementação. 2. ed. São Paulo:
Érica Ltda, 2008.
MARCONDES, C. A. HTML 4.0 Fundamental: A Base da Programação para Web.
São Paulo: Érica Ltda, 2005.
MORRISON, M. Use a Cabeça!: JavaScript. 1. ed. Rio de Janeiro: Alta Books, 2008.
NASSU, E. A.; SETZER, V. W. Banco de Dados Orientados a Objetos. São Paulo:
Edgard Blucher Ltda, 2009.
95
RAMAKRISHNAN, R.; GEHRKE, J. Sistemas de Gerenciamento de Banco de
Dados. 3. ed. São Paulo: McGraw-Hill, 2008.
RODRIGUES, L. C.; ESCOLA, J. P. L. Informática: Sistemas Operacionais e
Softwares Aplicativos. São Paulo: Fundação Padre Anchieta, 2010.
SIERRA, K.; BATES, B. Use a Cabeça!: Java. 2. ed. Rio de Janeiro: Alta Books,
2005.
SILVA, R. P. UML: Modelagem Orientada a Objetos. Florianópolis: Visual Books,
2007.
TURBAN, E.; KING, D. Comércio Eletrônico: Estratégia e Gestão. São Paulo:
Prentice Hall, 2004.
WELLING, L.; THOMSON, L. PHP e MySQL: Desenvolvimento Web. 3. ed. Rio de
Janeiro: Elsevier Editora Ltda, 2005.
ZEMEL, T. Web Design Responsivo: Páginas Adaptáveis para Todos Dispositivos.
São Paulo: Casa do Código, 2012.