CENTRO DE EDUCAÇÃO TECNOLÓGICA PAULA SOUZA … · gerenciamento de banco de dados MySQL. Os...

CENTRO DE EDUCAÇÃO TECNOLÓGICA PAULA SOUZA

ETEC DOUTOR DOMINGOS MINICUCCI FILHO

Técnico em Informática

Aléxia Maria Luz Oliveira Costa

Igor dos Santos Arruda

Kennedy Vinicius Marino

Leonardo José Pereira Bicudo

E-COMMERCE PARA SUPERMERCADOS DA REGIÃO DE

BOTUCATU-SP

BOTUCATU-SP

JUNHO - 2016

Aléxia Maria Luz Oliveira Costa

Igor dos Santos Arruda

Kennedy Vinicius Marino

Leonardo José Pereira Bicudo

E-COMMERCE PARA SUPERMERCADOS DA REGIÃO DE

BOTUCATU-SP

Trabalho de Conclusão de Curso apresentado ao Curso Técnico em Informática da Etec Dr. Domingos Minicucci Filho orientado pelo Professor Arilson José de Oliveira Júnior como requisito parcial para obtenção do título de Técnico em Informática.

BOTUCATU-SP

JUNHO - 2016

DEDICATÓRIA

Dedicamos este trabalho aos nossos familiares e alunos, e também todos do grupo

que se desempenharam para a construção do Site Online, e aos professores pelo

auxílio do TCC. Por mais esse sonho concretizado, ao ensinamento de todos os

professores, amigos e todos aqueles que direta ou indiretamente, nós fizeram

manter o foco para não desistir dos ideais.

AGRADECIMENTO

Agradecemos primeiramente a Deus por nós dar toda força, paciência e

responsabilidade com nossas obrigações e deveres com o TCC.

Aos nossos pais pela confiança, amor, carinho, que nos fortalece a cada dia que se

passa, e por ter nós tornado o que somos hoje.

EPÍGRAFE

“Tente uma, duas, três vezes e se possível tente a quarta, a quinta e quantas vezes

for necessário. Só não desista nas primeiras tentativas, a persistência é amiga da

conquista. Se você quer chegar à onde a maioria não chega, faça o que a maioria

não faz”.

Bill Gates

RESUMO

As lojas virtuais estão em alta nos dias atuais, por conta da evolução da tecnologia e da praticidade do e-commerce, com isso a criação de uma ferramenta inovadora no âmbito dos supermercados é indispensável, e necessário para acompanhar à evolução, principalmente para se garantir no mercado. Devido à falta de uma ferramenta especializada no serviço de e-commerce para supermercados na região de Botucatu-SP, este trabalho teve por objetivo desenvolver um website para supermercados visando à criação de uma ferramenta prática e eficiente. Para o desenvolvimento do website foram utilizadas às linguagens HTML e CSS para definições de layouts, juntamente com PHP e JavaScript para lógicas de programação. Utilizou-se um banco de dados relacional e o serviço de gerenciamento de banco de dados MySQL. Os recursos de cadastro dos clientes, salvamento de informações em banco de dados, efetuação das compras e geração de boleto, foram testados mediante servidor local EasyPHP. Pode-se concluir que o website foi desenvolvido conforme objetivo proposto, demonstrando ser uma ferramenta usual e prática para supermercados da região de Botucatu-SP.

Palavras-chave: Lojas Virtuais; Comércio Eletrônico; Compras Online; Falta de uma ferramenta.

ABSTRACT

The virtual stores are up today, due to the evolution of technology and e-commerce convenience, thus creating an innovative tool within the supermarket is essential and necessary to monitor the developments, mainly to ensure market. Due to the lack of a specialized tool in e-commerce service for supermarkets in the Botucatu region, this study aimed to develop a website for supermarkets seeking to create a practical and efficient tool. For the development of the website we were used to HTML and CSS languages to layouts settings, along with PHP and JavaScript for logic programming. We used a relational database and the MySQL database management service. The customer registration resources, saving information in the database, the shopping effectuation and generation of billet were tested by local server EasyPHP. It can be concluded that the website was developed as proposed goal, proving to be a usual and practical tool for supermarkets of the Botucatu region.

Keywords: Virtual Shops; E-commerce; Online shopping; Lack of a tool.

LISTA DE ABREVIATURAS

DER: Diagrama de Entidade e Relacionamento;

MER: Modelo de Entidade e Relacionamento;

PHP: PHP Hypertext Preprocessor;

CSS: Cascading Style Sheets;

SGBD: Sistema Gerenciador de Banco de Dados;

LISTA DE ILUSTRAÇÕES

Figura 1- SGBD ................................................................................................ 13

Figura 2- Sublime Text 3 .................................................................................. 14

Figura 3- EasyPHP ........................................................................................... 15

Figura 4- CSS ................................................................................................... 15

Figura 5- Tela Inicial ......................................................................................... 17

Figura 6- Tela de cadastro do cliente ............................................................... 18

Figura 7- Login Cliente ..................................................................................... 18

Figura 8- Carrinho de Compra .......................................................................... 19

Figura 9- Endereço de Entrega e formas de pagamento.................................. 20

Figura 10- Detalhes da Compra cliente ............................................................ 21

Figura 11- Detalhes da Compra ....................................................................... 22

Figura 12- Alterar Dados .................................................................................. 23

Figura 13- Imprimir Boleto ................................................................................ 24

Figura 14- Tela de login administrador ............................................................. 25

Figura 15- Área do administrador ..................................................................... 26

Figura 16- Privilégios Ver as Vendas ............................................................... 27

Figura 17- Privilégios Ver o detalhe da venda .................................................. 27

Figura 18- Privilégios alterar ............................................................................. 28

Figura 19- Privilégios deletar ............................................................................ 29

Figura 20- Cadastrar Produtos ......................................................................... 30

Figura 21- Endereço de Entrega ...................................................................... 30

SUMÁRIO

1 INTRODUÇÃO .............................................................................................. 10

2 DESENVOLVIMENTO .................................................................................. 12

2.1 SGBD MySQL e MySQL Workbench ................................................................. 12

2.2 Sublime Text 3 ................................................................................................... 13

2.3 EasyPHP ...................................................................................................... 14

2.4 HTML ............................................................................................................ 15

2.5 CSS .............................................................................................................. 15

2.6 JAVASCRIPT ................................................................................................ 16

2.7 RESULTADOS ............................................................................................. 16

2.7.1 Pagina Inicial do site ..................................................................................... 16

2.7.2 Cadastro ....................................................................................................... 17

2.7.3 Login Cliente ................................................................................................. 18

2.7.4 Carrinho de Compras ................................................................................... 19

2.7.5 Entrega e Pagamento ................................................................................... 19

2.7.6 Detalhes da Compra ..................................................................................... 20

2.7.7 Detalhes da Compra do Cliente .................................................................... 21

2.7.8 Alterar Dados ................................................................................................ 22

2.7.9 Imprimir Boleto .............................................................................................. 23

2.7.10 Login Administrador ...................................................................................... 24

2.7.11 Área do Administrador .................................................................................. 25

2.7.12 Privilégios– Detalhes .................................................................................... 26

2.7.13 Privilégios - Alterar ........................................................................................ 28

2.7.14 Privilégios -Deletar ........................................................................................ 28

2.7.15 Privilégios -Cadastrar Produto ...................................................................... 29

2.7.16 Privilégios – Endereço de Entrega ................................................................ 30

3 CONCLUSÃO ............................................................................................... 31

REFERENCIAS BIBLIOGRÁFICAS .......................................................................... 32

10

1 INTRODUÇÃO

Fazer compras no supermercado requer tempo, paciência e bastante

disposição para enfrentar filas, corrida por vagas no estacionamento, entre

outros aspectos relacionados. Com o cotidiano corrido dos dias atuais, muitas

pessoas acabam por fazer suas compras em mercearias, por conta de fatores

e inconveniências que lhes impedem de se deslocarem para efetuarem suas

compras. Com isso, a geração Y, os nascidos a partir de 1980 segundo

Ciashop (2011), que está muito mais conectada à web, não somente em redes

sociais, mas também em outros serviços como delivery, e-commerce e

compras coletivas, são clientes em potenciais das lojas virtuais.

A geração Y reúne um grupo de usuários que espera mais de suas

experiências de compras do que as gerações anteriores. No Brasil, esse grupo

representa atualmente 14% da população, com 32 milhões de pessoas. A

presença digital dessa geração é significativa de acordo com a pesquisa da

Ciashop (2016), na qual a cada dez pessoas, nove possuem seus próprios

aparelhos eletrônicos (smartphones, tablets, mp3 etc). Ainda segundo a

pesquisa, cerca de 90% desse grupo possui um computador pessoal e 45%

acessam à internet por seu aparelho celular. Já em pesquisa feita (pela

B!Tmagazine,2015),constatou-se que os usuários de smartphones e tablets

utilizaram em torno de 42% mais os sites e aplicativos para realizar suas

compras na web.

Embora haja grande evolução tecnológica no mercado de compras via web em

diversas áreas, no município de Botucatu-SP não há uma ferramenta

especializada em compras online para supermercados, que possibilite à

compra e o recebimento de produtos mediante uma experiência virtual.

Considerando que o mercado de compras online é uma área que está em

desenvolvimento na atualidade, principalmente com o uso do serviço e-

commerce, procurou-se disponibilizar uma ferramenta para melhorar o

cotidiano dos clientes.

11

Desta forma, esse trabalho teve como objetivo à criação de um site para

supermercados da região de Botucatu-SP, a fim de fornecer aos clientes e

funcionários uma ferramenta prática e eficiente para compras de produtos por

meio de um serviço de e-commerce.

12

2 DESENVOLVIMENTO

O Website foi desenvolvido nas linguagens CSS, PHP, HTML e uma pequena

parte em JavaScript. Como base de dados utilizou-se um banco de dados

relacional, desenvolvido por meio do sistema de gerenciamento de banco de

dados MySQL e MySQL Workbench.Para simulação de um servidor local o

EasyPHP foi utilizado.

2.1 SGBD MySQL e MySQL Workbench

O SGBD MySQL é um sistema de gerenciamento de banco de dados relacional

de código aberto, usado na maioria das aplicações gratuitas para gerir suas

bases de dados. O serviço utiliza a linguagem SQL (Structure Query Language

– Linguagem de Consulta Estruturada), que é a linguagem mais popular

atualmente para inserir, acessar e gerenciar o conteúdo armazenado num

bando de dados. Já o MySQL Workbench é uma interface gráfica fornecida

pela Oracle, que possibilita executar consultas SQL, administrar o sistema,

modelar, criar e manter a base de dados mediante um ambiente integrado.

(PISA, 2012).

Na Figura 1 mostra-se a tela inicial do Workbench.

13

Figura 1- SGBD

Fonte: MySQL Workbench

O SGBD MySQL foi utilizado para criar o banco de dados na linguagem SQL, já

o Workbench foi aplicado para criação do MER (Modelo Entidade

Relacionamento) e o DER (Diagrama Entidade Relacionamento), que são uma

das principais etapas que deve existir para criação de um site ou qualquer

outro tipo de sistema.

2.2 Sublime Text 3

Sublime Text 3 é um editor de código HTML. O programa tem interface com

diferentes cores para facilitar à compreensão e construção dos códigos. Com o

Sublime Text 3 o usuário pode fazer edições em ambientes mais sofisticados

contando com opções generosas de comandos, além de pesquisar expressões

e utilizar marcadores. (SUBLIMETEXT, 2013).

Na Figura 2 mostra-se a interface do Sublime Text 3.

14

Figura 2- Sublime Text 3

Fonte:Sublime Text 3

Este editor de códigos foi escolhido por ser um software gratuito para testes e

bastante difundido na área de desenvolvimento web, e pela disponibilidade de

ferramentas que facilitam o entendimento da construção dos códigos para

usuários iniciantes.

2.3 EasyPHP

O EasyPHP é um WAMP (pacote de soluções para Windows, Apache, MySQL

e Php) programa que instala em pequenos passos um servidor WEB Apache,

um modulo para programação em PHP e o MySQL (banco de dados). No

EasyPHP também há a instalação do módulo de administração de banco de

dados phpMyAdmin (MORAES, 2008). Utilizou-se o EasyPHP devido ao

recurso de criação de um servidor local em qualquer computador (Figura 3).

15

Figura 3- EasyPHP

Fonte: EasyPhp

2.4 HTML

HTML é uma das linguagens que utilizamos para desenvolver websites. O

acrônimo HTML vem do inglês e significa Hypertext Markup Language ou em

português Linguagem de Marcação de Hipertexto. (DIEGO EIS, 2011)

2.5 CSS

O Cascading Style Sheets (CSS) é uma folha de estilo composta por camadas

e utilizada para definir a apresentação (aparência) em páginas da internet que

adotam para o seu desenvolvimento linguagens de marcação, como XML,

HTML e XHTML (PEREIRA, 2009).

Na Figura 4 mostra-se um código desenvolvido em CSS.

Figura 4- CSS

Fonte:Sublime Text 3

16

O CSS define como serão exibidos os elementos contidos no código de uma

página da internet e sua maior vantagem é efetuar a separação entre o formato

e o conteúdo de um documento (PEREIRA, 2009).

A folha de estilos foi aplicada a fim de aprimorar o layout do site, visando

melhorar à qualidade das páginas.

2.6 JAVASCRIPT

O JavaScript foi originalmente desenvolvido sob o nome de Mocha,

posteriormente teve seu nome modificado para LiveScript e, por

fim, JavaScript. LiveScript foi o nome oficial da linguagem quando ela foi

lançada pela primeira vez na versão beta do navegador Netscape 2.0, em

setembro de 1995, mas teve seu nome alterado em um anúncio conjunto com a

Sun Microsystems, em dezembro do mesmo ano, quando foi implementado no

navegador Netscape, versão 2.0 B3 (MUSTAFA, 2016).

Para o desenvolvimento deste trabalho o JavaScript foi aplicado para validar o

login do usuário e para exibir recursos de alerts, como por exemplo, login e

senha incorretos.

2.7 RESULTADOS

2.7.1 Pagina Inicial do site

Nesta página, os clientes terão uma primeira impressão do website, onde ficam

as promoções, cadastro de clientes e as categorias dos produtos que existem

no site.

A Figura 5 apresenta a Tela Inicial do site.

17

Figura 5- Tela Inicial

Fonte: E-COMMERCE PARA SUPERMERCADOS DA REGIÃO DE BOTUCATU-SP

2.7.2 Cadastro

Nesta tela o cliente terá que se cadastrar para que possa comprar os produtos

no site, depois de cadastrado as informações são enviadas para o banco de

dados (MySQL).

Na Figura 6 apresenta se o cadastro do cliente.

18

Figura 6- Tela de cadastro do cliente


2.7.3 Login Cliente

Na Figura 7 o cliente poderá logar-se no site.

Figura 7- Login Cliente


19

Nesta área o cliente efetuara seu login, pois já terá os seus dados cadastrados

no site.

2.7.4 Carrinho de Compras

Na Figura 8 apresenta-se o carrinho de compras.

Figura 8- Carrinho de Compra


Mediante o cadastro, o cliente poderá adicionar os produtos do site ao carrinho

de compra.

2.7.5 Entrega e Pagamento

Na Figura 9 o cliente finaliza sua compra.

20

Figura 9- Endereço de Entrega e formas de pagamento


Nesta área o cliente escolherá o endereço da entrega e a forma de pagamento

assim gerando o boleto.

2.7.6 Detalhes da Compra

Na Figura 10 apresentam-se os detalhes da compra do cliente.

21

Figura 10- Detalhes da Compra cliente


Ao clicar em Histórico de Compra no menu superior o cliente exibe suas

compras já feitas no site.

2.7.7 Detalhes da Compra do Cliente

Na Figura 11 apresenta mostra-se os produtos das compras.

22

Figura 11- Detalhes da Compra


Nesta imagem mostram-se os detalhes das compras que o cliente fez

anteriormente.

2.7.8 Alterar Dados

Na Figura 12 o cliente poderá alterar seus dados.

23

Figura 12- Alterar Dados


Nesta área o cliente poderá alterar seus dados que já foram cadastrados,

como, por exemplo, um novo endereço.

2.7.9 Imprimir Boleto

Na Figura 13 o cliente imprime boleto.

24

Figura 13- Imprimir Boleto


Nesta área o cliente poderá imprimir o seu boleto para pagar.

2.7.10 Login Administrador

Na Figura 14 apresenta-se o login do administrador.

25

Figura 14- Tela de login administrador


Mediante login e senha o administrador terá privilégios que o cliente não tem

no site.

2.7.11 Área do Administrador

Na Figura 15 mostra-se a área exclusiva para o administrador.

26

Figura 15- Área do administrador


Nesta área, o administrador poderá usar seus privilégios, como por exemplo,

ver os detalhes das vendas, cadastrar novos produtos, alterar produtos já

cadastrados no banco de dados ou apagá-los.

2.7.12 Privilégios– Detalhes

Nas Figuras 16 e 17 são apresentados os privilégios que o administrador tem

em sua área no site.

27

Figura 16- Privilégios Ver as Vendas


Nesta área o administrador poderá visualizar todas as vendas dos clientes.

Figura 17- Privilégios Ver o detalhe da venda

28


Nesta área o administrador poderá ver o detalhe das vendas efetuadas.

2.7.13 Privilégios - Alterar

Na Figura 18 mostra-se outro privilégio do administrador.

Figura 18- Privilégios alterar


Nesta área o administrador poderá alterar os produtos já cadastrados no banco

de dados.

2.7.14 Privilégios -Deletar

29

Na Figura 19 mostram-se os privilégios do administrador.

Figura 19- Privilégios deletar


Nesta área o administrador poderá deletar os produtos já cadastrados no

banco de dados.

2.7.15 Privilégios -Cadastrar Produto


30

Figura 20- Cadastrar Produtos


Nesta área o administrador poderá cadastrar os produtos no banco de dados.

2.7.16 Privilégios – Endereço de Entrega


Figura 21- Endereço de Entrega


Nesta área o administrador poderá ver onde será entregue os produtos.

31

3 CONCLUSÃO

Com a utilização de códigos em HTML, JavaScript,PHP e CSS e outras

ferramentas, como o serviço de gerenciamento de banco de dados MySQL, e o

EasyPHP, foi possível disponibilizar uma ferramenta de e-commerce para

supermercados.

Observou-se que, mediante o website, clientes de supermercados são capazes

de realizar pedidos de produtos online, e de que funcionários podem receber

pedidos e encaminhá-los para entrega.

Visto os benefícios que à ferramenta apresenta, pretende-se evoluir o website

para execução em plataformas mobile, além da implementação de novos

recursos como outras opções de formas de pagamento, notificações de compra

via e-mail e exibição de promoções por período.

Portanto, a existência de um website para servir de ferramenta aos clientes é

indispensável, pois nós dias atuais é necessário acompanhar à evolução para

se garantir no mercado.

32

REFERENCIAS BIBLIOGRÁFICAS

CIASHOP. A Geração Y. Disponível em:<http://www.ciashop.com.br/noticias/geracao-y-e-o-consumo-online/>. Acesso em: 16 maio 2016.

Eis, D. O que é HTML. Disponível em: <http://tableless.com.br/o-que-html-basico/>. Acesso em: 16 maio 2016.

Moraes, M. Configurando o Easyphp. Disponível em: <http://www.linhadecodigo.com.br/artigo/1676/instalando-e-configurando-o-easyphp.aspx>. Acesso em: 16 maio 2016.

Mustafa, E. JavaScript. Disponível em: <http://imasters.com.br/front-end/javascript/javascript-20-anos-de-historia-e-construcao-da-web/?trace=1519021197>. Acesso em: 16 maio 2016.

Pereira, A. P. O que é CSS. Disponível em: <http://www.tecmundo.com.br/programacao/2705-o-que-e-css-.htm>. Acesso em: 16 maio 2016.

Pisa, P. O que é o MySQL. Disponível em: <http://www.techtudo.com.br/artigos/noticia/2012/04/o-que-e-e-como-usar-o-mysql.html>. Acesso em: 16 maio 2016.

SublimeText. Editor de texto. Disponível em: <www.sublimetext.com/>. Acesso em: 16 maio 2016.

CENTRO DE EDUCAÇÃO TECNOLÓGICA PAULA SOUZA … · gerenciamento de banco de dados MySQL. Os...

Documents

Transcript of CENTRO DE EDUCAÇÃO TECNOLÓGICA PAULA SOUZA … · gerenciamento de banco de dados MySQL. Os...