INSTITUTO MÉDIO COMERCIAL DE LUANDA

COORDENAÇÃO DO CURSO DE INFORMÁTICA DE GESTÃO

Criação de um Site de Venda de Produtos Online

Estudo de Caso: KIBABO

Luanda, 2023
Criação de um Site de Venda de Produtos Online
Estudo de Caso: KIBABO

Pré-Prova de Aptidão Profissional apresentado á

Coordenação do Curso Técnico de Informática de
Gestão do Instituto Médio Comercial de Luanda como
um dos requisitos para a aprovação da Prova de Aptidão
Profissional, sob a orientação do MSC Eugênio
Monteiro.

Luanda, 2023
 FICHA TÉCNICA

Nº: 2 Nome: António Dala

Curso: Informática de Gestão

Turma: ATI
Sala:6A
Classe: 12ª
 DEDICATÓRIA

Dedico este trabalho a minha família, aos amigos e colegas.

Cidade, ano.

I
 AGRADECIMENTOS

Agradeço a Deus pai todo poderoso, à família, ao IMCL, ao orientador e a todos os

docentes, à unidade pesquisada, aos amigos, colegas e outras.

II
 EPÍGRAFE

“Os fortes são aqueles que nunca desistem da batalha mesmo quando
tudo está difícil.”. NGA

III
 RESUMO

Este projecto vai criar um site de venda com algumas ferramentas importantes como o PHP que
vai gerenciar todos os dados do projecto, HTML que vai ser responsável pelo esqueleto da nossa
página, Css pela beleza e o JavaScript pela interação, mySQL para nós criarmos a base de dados
que vai armazenar todos os dados. Usando o Visual Studio Code para podermos programar, ou
seja, com estas todas ferramentas vamos ser capazes de montar um site de venda.

Palavras-chave: Venda. Comprar. Dinheiro. Pagamento

IV
 ABSTRACT

This project will create a sales website with some important tools like PHP that will manage all
the project data, HTML that will be responsible for the skeleton of our page, CSS for beauty and
JavaScript for interaction, mySQL for us to create the database that will store all the data. Using
Visual Studio Code to be able to program, that is, with all these tools we will be able to set up a
sales site.

Keywords: Sale. Buy. Cash. Payment.

V
 LISTA DE FIGURAS

Figura 1-Diagrama de caso de uso.................................................................................................29

Figura 2-Diagrama de classe..........................................................................................................30
Figura 3-Diagrama de entidade relacionamento.............................................................................31
Figura 4- código fonte....................................................................................................................32
Figura 5-admin page.......................................................................................................................33
Figura 6-user page..........................................................................................................................34

VI
 LISTA DE ABREVIATURAS E SIGLAS

 HTML: Hypertext Markup Language;

 Js: JavaScript;
 CSS: Cascading Style Sheets;
 PHP: Personal Home Page;
 WWW: World Wide Web
 MYSQL: MY Structure Query Language
 BD: Banco de Dados
 SGBD: Sistema de Gestão de Banco de Dados

VII
ÍNDICE

DEDICATÓRIA...............................................................................................................................I
AGRADECIMENTOS....................................................................................................................II
EPÍGRAFE.....................................................................................................................................III
RESUMO.......................................................................................................................................IV
ABSTRACT....................................................................................................................................V
LISTA DE FIGURAS....................................................................................................................VI
LISTA DE QUADROS.................................................................................................................VII
LISTA DE ABREVIATURAS E SIGLAS.................................................................................VIII
INTRODUÇÃO..............................................................................................................................11
OBJECTIVOS............................................................................................................................12
PROBLEMÁTICA.....................................................................................................................12
HIPÓTESE..................................................................................................................................12
JUSTIFICATIVA.......................................................................................................................12
CAPITULO I: FUNDAMENTAÇÃO TEÓRICA.........................................................................13
1.1 CONCEITO DE SITE.....................................................................................................13
1.2 FRONT-END (CLIENT-SIDE).......................................................................................13
1.3 BACK-END (SERVER-SIDE)........................................................................................14
1.4 HTML´.............................................................................................................................14
1.5 CSS..................................................................................................................................15
1.7 PHP..................................................................................................................................18
1.8 MYSQL...........................................................................................................................19
1.9 VISIO....................................................................................................................................21
1.10 FRAMEWORK..................................................................................................................22
CAPÍTULO II: METODOLOGIA.................................................................................................24
2.1 Ferramentas e tecnologias utilizadas....................................................................................24
2.2- Coleta de Dados...................................................................................................................25
CAPÍTULO III: PARTE PRÁCTICA............................................................................................28
3.1. Levantamento de requisitos.................................................................................................28
3.2 Requistos Funcionais............................................................................................................28
8
 3.2.2 Requisitos não funcionais..................................................................................................28
3.3 Documentação......................................................................................................................29
3.3.1 Diagrama de Caso de Uso..............................................................................................29
3.3.2 Diagrama de Classe........................................................................................................30
3.3.5 Diagrama Entidade e Relacionamento...........................................................................31
3.4 Demonstração de Resultados................................................................................................32
CONSIDERAÇÕES FINAIS.........................................................................................................10
REFERÊNCIAS BIBLIOGRÁFICAS...........................................................................................11

9
INTRODUÇÃO

Este trabalho vai falar acerca da criação de um site de venda de produtos para o KIBABI, O
surgimento das Vendas Online veio dar mais rapidez na hora de vender um produto, visto que
isso é algo novo que já se tornou muito útil em qualquer empresa. Com a implementação das
vendas online empresas como amazon, etc…, se tornaram muito mais famosas por toda a parte do
mundo, que proporcionou um aumento gigantesco nas suas vendas, ou seja, a venda online veio
aumentar a visibilidade da empresa para que ela seja mais conhecida no mercado.

O trabalho está organizado em três capítulos:

No primeiro capitulo falaremos da Fundamentação teórica onde vamos definir todos os conceitos
relevantes, no segundo capitulo falaremos da metodologia que foi usada para fazer o projeto e a
parte pratica onde mostraremos os resultados, diagramas entre outros.

10
OBJECTIVOS

Objectivo Geral:
Criar um site de vendas de produtos online para o KIBABO.

Objectivo específicos:
Avaliar a maneira que todas as vendas serão realizadas;

Controlar todos as compras que são feitas pelos usuários.

PROBLEMÁTICA

O KIBOBA não tem um site de vendas online, por este motivo surgiu a seguinte questão:
Com a criação de um site de vendas online vai possibilitar ganhar mais clientes?

HIPÓTESE

Com a criação deste site espera-se alcançar mais clientes e posteriormente crescer o lucro da
empresa.

JUSTIFICATIVA

Este site foi criado com o com o objectivo facilitar as vendas que são feitas na empresa, porque
tem muita gente que não tem muito tempo para ir constantemente ao supermercado para ir
comprar ou saber o preço de um determinado produto. Claro aumentar o lucro das vendas da
empresa.

11
CAPITULO I: FUNDAMENTAÇÃO TEÓRICA

Neste capítulo, onde serão mostrados os conceitos relevantes para compreender melhor o projeto.

1.1 CONCEITO DE SITE

O que chamamos de site aqui no Brasil, é chamado de website no idioma inglês. Então, para
entender o que significa site, vamos dividir as duas palavras: web e site.Web significa rede é
o nome dado a rede mundial de computadores (world wide web). Site significa lugar. Com
isso, podemos entender que website é um lugar na rede.E como encontrar esse local na rede
é outra história. Para encontrar um site, precisamos falar de domínio, que nada mais é que o
seu endereço online, no nosso caso, nosso domínio é hostinger.com.br. Pode conferir aí no
campo de pesquisa do seu navegador. (Ariane,2022).

Tipos de Site.(Ariane, 2022)

E aprofundando um pouco mais, vamos conhecer alguns tipos de website :

 Blog: você pode criar um blog sobre o assunto que quiser. Blog de  viagens, blog de
receitas, blog de games ou blog pessoal, não há limites para sua criatividade.
 Sites: sites são essenciais para a presença online de qualquer negócio. Sites
institucionais, afiliados, pessoais com formato de portfólio, quebre todas as barreiras
geográficas criando seu website.
 Loja virtual: venda o que quiser 24 horas por dia. Também conhecidos como
ecommerce .

1.2 FRONT-END (CLIENT-SIDE)

Segundo Flávia (2018, p.5) as linguagens client-side são linguagens onde apenas o navegador vai
entender. Quem vai processar essa linguagem não é o servidor, mas sim o browser (navegador
web). Qual a função de cada uma dessas linguagens que podem compor o front-end de uma
página web? HTML cria a estrutura, o layout da página: determina em quantos “blocos” a página
será dividida, se terá cabeçalho, rodapé, menus. CSS cria a apresentação da página: toda
formatação é feita através de regras CSS. Através de CSS se posiciona todos os elementos na

12
página, se colore, se formata.JavaScript é responsável pelas ações das páginas: faz a
interatividade das páginas com os usuários. Não confunda JS com a Linguagem de Programação
Java, pois são bem diferentes! O objetivo do uso dessas três linguagens para desenvolver
aplicações web, é separar a informação (conteúdo), formatação e comportamento, das páginas.

1.3 BACK-END (SERVER-SIDE)

Segundo Flávia (2018, p.6) as linguagens server-side são linguagens que o servidor entende, ou
seja, é o código que o servidor vai processar e depois vai mandar para o navegador alguma
resposta, algum retorno. Qual a função de cada uma dessas linguagens que podem compor o
back-end de uma página web? As linguagens usadas no server-side, como por exemplo: PHP, C#
(CSharp), Java, Ruby, Python, podem ser usadas para sites que precisam, por exemplo, acessar
um Banco de Dados (BD), sites que precisam ter algum tipo de serviço (web service) etc.

1.4 HTML´

A Linguagem de Marcação de Hipertexto (HTML) é uma linguagem de computador que

compõe a maior parte das páginas da internet e dos aplicativos online. Um hipertexto é um
texto usado para fazer referência a outros textos, enquanto uma linguagem de marcação é
composta por uma série de marcações que dizem para os servidores da web qual é o estilo e
a estrutura de um documento.O HTML não é considerado uma linguagem de programação,
já que ele não pode criar funcionalidades dinâmicas. Ao invés disso, com o HTML, os
usuários podem criar e estruturar seções, parágrafos e links usando elementos, tags e
atributos (Ariane,2022).
Para (Ariane,2022) alguns dos usos mais comuns para o HTML:

 Desenvolvimento web. Os desenvolvedores usam códigos HTML para projetar como

um navegador vai exibir os elementos das páginas, como textos, hiperlinks e arquivos
de mídia.
 Navegação na internet. Os usuários podem navegar facilmente e inserir links entre
páginas e sites relacionados, já que o HTML é amplamente usado para incorporar
hiperlinks.
 Documentação. O HTML torna possível a organização e a formatação de
documentos, de maneira similar ao Microsoft Word.

13
Como funciona o HTML?

Um site médio inclui diversas páginas HTML diferentes. Por exemplo, ele pode trazer uma
página inicial, uma página “sobre” e uma página de contato. Cada uma delas possui um
arquivo HTML separado.Documentos HTML são arquivos que terminam com uma
extensão .html ou .htm. Um navegador lê o arquivo HTML e renderiza o seu conteúdo para
que os usuários da internet possam vê-lo.Todas as páginas HTML possuem uma série de
elementos, que consistem num conjunto de tags e atributos. Os elementos HTML são os
tijolos de construção de uma página da internet. Uma tag diz para o navegador onde um
elemento começa e termina, enquanto um atributo descreve as características de um
elemento.(Ariane,2022).
Para (Ariane, 2022)As três principais partes de um elemento são:

 Tag de abertura – usada para dizer onde um elemento começa a ter efeito. A tag é
cercada de colchetes angulares para abertura e fechamento. Por exemplo, use a tag de
abertura <p> para criar um parágrafo.
 Conteúdo – essa é a parte que os usuários verão.
 Tag de fechamento – igual à tag de abertura, mas com uma barra antes do nome do
elemento. Por exemplo, </p> para encerrar um parágrafo.
A combinação dessas três partes vai criar um elemento HTML.

Elementos Bloco

Para (Ariane,2022) Os elementos bloco ocupam a largura completa de uma página. Eles
sempre iniciam uma nova linha no documento. Por exemplo, um elemento cabeçalho estará
numa linha diferente de um elemento parágrafo.Toda página HTML usa essas três tags:

 A tag <html> é o elemento raiz que define todo o documento HTML.

 A tag <head> contém metadados sobre o título e a codificação de caracteres da
página.
 A tag <body> inclui todo o conteúdo que aparece na página.

1.5 CSS

O CSS, do português “Folha de Estilo em Cascata” é uma linguagem de estilo, responsável pela
formatação e apresentação de conteúdo: layout, cores, fontes entre outros (FLATSCHART,
2011).

Segundo o TABLELESS (2017) o CSS é uma linguagem utilizada para definir a apresentação
14
(aparência) de documentos que adotam para o seu desenvolvimento linguagens de marcação
(como XML, HTML e XHTML e etc.). O CSS define como serão exibidos os elementos contidos
no código de um documento e sua maior vantagem é efetuar a separação entre o formato e o
conteúdo de um documento.

Neste projeto é utilizado Bootstrap, segundo Segundo (Beltrão,P.28,2017) é um framework para

desenvolvimento web front-end (HTML, CSS e JS) que adiciona às páginas recursos de
responsividade, diversos componentes de interface e estilos leves e modernos. O Bootstrap é
atualmente o principal framework front-end para desenvolvimento web responsivo. Além de um
poderoso sistema de grid, que facilita a c riação de páginas que se adequam aos mais diversos
tamanhos de tela, o Bootstrap conta, ainda, com vários componentes de uso comum em
aplicações web, como botões, menus, tabelas, etc. Tudo isso é alinhado a um conjunto de estilos
visuais elegante e moderno, que reduz a necessidade de escrita de código CSS em boa parte das
situações (DEVMEDIA, 2017).

1.6 JAVASCRIPT

JavaScript é uma linguagem de programação usada por desenvolvedores para fazer páginas
interativas da Internet. As funções de JavaScript podem melhorar a experiência do usuário
durante a navegação em um site, como, por exemplo, desde a atualização do feed na página da
mídia social até a exibição de animações e mapas interativos. Como uma linguagem de script do
lado do cliente, ele é uma das tecnologias principais da World Wide Web. Por exemplo, ao
navegar na Internet, é possível visualizar a qualquer momento um carrossel de imagens, um menu
suspenso “clicar para visualizar” ou mesmo mudar dinamicamente as cores dos elementos de uma
página da Web. Tudo isso graças ao JavaScript (António, P.21,2015).

Qual a utilidade do JavaScript?

Anteriormente, as páginas da Web eram estáticas como páginas em um livro. Uma página
estática exibia basicamente informações em um layout fixo e não fazia tudo que esperamos de um
site moderno hoje em dia. O JavaScript surgiu como uma tecnologia do lado do navegador para
tornar as aplicações Web mais dinâmicas. Ao usar JavaScript, os navegadores passaram a ser
capazes de responder a interações do usuário e alterar o layout do conteúdo na página. (António,
P.21,2015).

Para (António, P.21,2015) À medida que a linguagem amadureceu, desenvolvedores de

JavaScript estabeleceram bibliotecas, frameworks e práticas de programação, além de começar a
usá-la fora dos navegadores da Web. Hoje em dia, é possível usar JavaScript para
desenvolvimento tanto do lado do cliente quanto do lado do servidor. Nas próximas subseções,
apresentamos alguns casos de uso comuns:

Anteriormente, as páginas da Web eram estáticas como páginas em um livro. Uma página
estática exibia basicamente informações em um layout fixo e não fazia tudo que esperamos de um
site moderno hoje em dia. O JavaScript surgiu como uma tecnologia do lado do navegador para
tornar as aplicações Web mais dinâmicas. Ao usar JavaScript, os navegadores passaram a ser

15
capazes de responder a interações do usuário e alterar o layout do conteúdo na página (António,
P.21,2015)..

À medida que a linguagem amadureceu, desenvolvedores de JavaScript estabeleceram

bibliotecas, frameworks e práticas de programação, além de começar a usá-la fora dos
navegadores da Web. Hoje em dia, é possível usar JavaScript para desenvolvimento tanto do lado
do cliente quanto do lado do servidor. (António, P.21,2015). Nas próximas subseções,
apresentamos alguns casos de uso comuns;

Como o JavaScript funciona?

Todas as linguagens de programação funcionam traduzindo sintaxe escrita de modo semelhante

ao idioma inglês em código de máquina, que é executado pelo sistema operacional. O JavaScript
é amplamente categorizado como uma linguagem de criação de scripts ou uma linguagem
interpretada. O código em JavaScript é interpretado, ou seja, é traduzido diretamente no código
de linguagem de máquina subjacente por um mecanismo de JavaScript. Em outras linguagens de
programação, um compilador compila todo o código em linguagem de máquina durante uma
etapa distinta. Portanto, todas as linguagens de criação de script são linguagens de programação,
mas nem todas as linguagens de programação são linguagens de criação de script. (António,
P.22,2015).

O mecanismo JavaScript

Um mecanismo JavaScript é um programa de computador que executa código em JavaScript. Os

primeiros mecanismos JavaScript eram simples interpretadores, mas todos os mecanismos
modernos usam compilação just-in-time ou em tempo de execução para melhorar a performance.
(António, P.21,2015).

JavaScript do lado do cliente

O termo JavaScript do lado do cliente refere-se à maneira como o JavaScript funciona em seu
navegador. Nesse caso, o mecanismo JavaScript está integrado ao código do navegador. Todos os
principais navegadores acompanham os próprios mecanismos JavaScript integrados.Os
desenvolvedores de aplicações Web escrevem código em JavaScript com diferentes funções
associadas a diversos eventos, como um clique no botão ou focalização do mouse. Essas funções
promovem mudanças nos códigos em HTML e CSS.(António,P.22,2015).

Para (António,P.22,2015) uma síntese do funcionamento do JavaScript do lado do cliente:

1.   O navegador carrega uma página da Web quando você a acessa.

2.   Durante o carregamento, o navegador converte a página e todos os seus elementos, como

botões, rótulos e caixas de menu suspenso, em uma estrutura de dados chamada Modelo de
Objeto de Documento (DOM).

16
3.   O mecanismo JavaScript do navegador converte o código JavaScript em código de bytes.
Esse código é um intermediário entre a sintaxe em JavaScript e a máquina.

4.   Eventos diferentes, como o clique do mouse em um botão, acionam a execução do bloco de

código associado em JavaScript. Em seguida, o mecanismo interpreta o código de bytes e faz
alterações no DOM.

5.   O navegador exibe o novo DOM.

JavaScript do lado do servidor

O termo JavaScript do lado do servidor se refere ao uso da linguagem de codificação na lógica de

back-end do servidor. Nesse caso, o mecanismo JavaScript está diretamente no servidor. Uma
função de JavaScript do lado do servidor pode acessar o banco de dados, realizar diferentes
operações lógicas e responder a diversos eventos acionados pelo sistema operacional do servidor.
A principal vantagem da criação de script do lado do servidor é que você pode promover um alto
nível de personalização na resposta do site com base em seus requisitos, seus direitos de acesso e
nas solicitações de informação recebidas do site. (Francisco, P.23,2015).

1.7 PHP

PHP é uma linguagem de programação voltada para o desenvolvimento de aplicações para a

web e para criar sites, favorecendo a conexão entre os servidores e a interface do usuário.Entre
os fatores que fizeram o PHP se popularizar bastante é possível apontar, principalmente, o fato de
ser em código aberto. Isso significa que qualquer um pode realizar mudanças na estrutura
dessa linguagem.(Ferreira, P.25,2016).

Na prática, isso representa duas coisas importantes: primeiramente, por ser de código aberto, não
há restrições de uso ligadas a direitos.O usuário pode usar PHP para programar em qualquer
projeto e, depois, comercializá-lo tranquilamente. Além disso, a outra vantagem é a possibilidade
de melhorias constantes no código, algo que a comunidade de programadores costuma fazer.
(Ferreira, P.25,2016).

A função principal do PHP, na prática

Quando vemos algumas definições sobre o que é PHP, geralmente, ele é descrito como uma
linguagem do lado do servidor. Na prática, isso significa que ele é aplicado na programação que
acontece em um servidor da web responsável por rodar a aplicação ou, mais frequentemente, um
site.Esse trabalho prévio permite que os elementos de uma página sejam carregados antes de
17
serem exibidos ao usuário que acessa um site, por exemplo. O código PHP é executado no
servidor que, ao ler os comandos, consegue ativar todos os elementos funcionais e de interface
visual do site.Talvez, a principal aplicação da linguagem PHP, quando falamos de web, seja para
estruturar sites em WordPress. (Ferreira, P.25,2016).

Uma das principais características do PHP é o fato de ser uma linguagem bem mais dinâmica do
que a maioria das outras opções que existem.Portanto, ela é fundamental para desenvolver sites
que terão aplicações robustas e necessitam de duas coisas: tempo de resposta mais ágil e
conexão com banco de dados de grande porte. Por isso, nada menos do que o Facebook usa
PHP!Na prática, a ideia no uso dessa linguagem é diminuir o tempo de carregamento das páginas,
deixando o servidor trabalhar de forma leve para carregar plugins e aplicações nos sites.Desse
modo, é possível desenvolver sites com ótimo desempenho, ainda que repletos de recursos, de
maneira ágil e com a garantia de sustentabilidade de desempenho em longo prazo usando PHP. .
(Ferreira, P.26,2016).

Plugins WordPress

O WordPress é mais uma grande empresa que baseia todo a programação de suas aplicações na
linguagem PHP. Ela é a base dessa plataforma, o que, por si só, já ajuda a entender por que o
WordPress é uma escolha cada vez mais recorrente no desenvolvimento de sites.No entanto, PHP
também é aplicado em uma parte fundamental dessa plataforma: os seus plugins adicionais!Uma
das grandes bases do WordPress, os plugins ajudam diferentes projetos a manter seus sites mais
completos e com funcionalidades específicas que suportam a gestão.Assim como a linguagem
dos sites, plugins também precisam ter uma comunicação dinâmica e leve com o servidor, e é
justamente por isso que PHP é a escolha ideal nesse caso. .(Ferreira, P.26,2016).

E-commerce

As lojas virtuais têm uma necessidade muito marcante, que é a comunicação frequente com
bancos de dados robustos e repletos de elementos importantes.Afinal, há muitas fotos, vídeos e
outras mídias relacionadas aos produtos que são vendidos. Assim, toda vez que precisa carregar
páginas, é necessário se conectar com esses bancos de dados, o que poderia pesar muito a
ação.Diante disso, PHP se torna uma ótima alternativa para escapar da possibilidade de ter um e-
commerce que não seja capaz de proporcionar uma experiência de navegação satisfatória ao
usuário.Por conta disso, grandes plataformas de desenvolvimento de lojas online já usam o
PHP como linguagem principal para a programação de seu back-end.(Ferreira, P.26,2016).

18
1.8 MYSQL

Uma empresa sueca chamada MySQL AB desenvolveu o MySQL em 1994. Então, a

companhia norte-americana Sun Microsystems obteve controle total do software ao comprar
a MySQL AB em 2008.Já em 2010, a gigante Oracle, também norte-americana, por sua vez
comprou a Sun Microsystems, e o MySQL MySQL tem sido da Oracle desde então.Quanto a
sua definição, MySQL é um Banco de Dados relacional (RDBMS –  Relational Database
Management Systems) com um modelo de cliente-servidor. RDBMS é um software de
código aberto ou serviço usado na criação e gerenciamento de bancos de dados baseados no
modelo relacional. Agora vamos analisar cada termo. (Ariane, 2020).

Banco de Dados

Um banco de dados nada mais é do que uma coleção de dados estruturados. Pense em uma
selfie: você aperta o botão para tirar uma foto de você mesmo.A foto é o dado, enquanto a
galeria do seu celular onde a foto ficou armazenada é o banco de dados.Banco de dados é um
um local onde dados são armazenados e gerenciados. A palavra “relacional” significa que os
dados armazenados estão organizados em tabelas.Cada tabela está relacionada de alguma
maneira. Caso o software não suporte o modelo relacional, então chamamos DBMS. (Ariane,
2020).

Código Aberto

Código aberto significa que você tem a liberdade de usar e modificar. Qualquer pessoa pode
instalar o software. Você também pode aprender sobre o código e modificá-lo para melhor
atender suas necessidades.Mas o GPL (GNU – Licença Pública Geral ) determina o que é
possível ser feito de acordo com as condições. A versão comercializável da licença também
está disponível caso você precise de mais flexibilidade e suporte avançado. (Ariane, 2020).

Modelo Cliente-Servidor

Computadores que rodam softwares de RDBMS são chamados clientes. Sempre que
precisam de dados, eles se conectam a um servidor RDBMS.MySQL é um dos muitos
clientes RDBMS disponíveis. RDBMS e MySQL são muitas vezes confundidos como sendo
a mesma coisa devido a popularidade do MySQL.Algumas aplicações de renome , como
Facebook, Twitter, YouTube, Google e Yahoo! utilizam MySQL para o armazenamento de
dados.Mesmo que tenha sido inicialmente criada para uso ilimitado, atualmente é ele
compatível com muitas plataformas importantes como Linux, MacOS, Microsoft Windows e
Ubuntu. (Ariane, 2020).

19
SQL

É também importante saber a diferença entre SQL e MySQL .

O MySQL é uma marca de software RDBMS mais populares que utiliza o modelo cliente-
servidor.Mas como o cliente e o servidor se comunicam em um ambiente RDBMS? Eles
usam uma linguagem específica – Structured Query Language (SQL).Se você encontrar
outros nomes que também possuam SQL, como PostgreSQL e Microsoft SQL Server,
provavelmente são outras marcas que utilizam a sintaxe SQL.Um software RDBMS é
normalmente escrito em outra linguagem de programação, mas sempre utiliza SQL como
linguagem primária para comunicação com o banco de dados.O próprio MySQL é escrito em
C e C++. Pense em todos os países colonizados pela Inglaterra, cada um tem sua história e
costumes próprios, mas todos falam inglês.O cientista da computação Ted Codd desenvolveu
SQL no início dos anos 70 com um IBM baseado no modelo relacional. A linguagem se
tornou mais popular em 1974 substituindo algumas linguagens ultrapassadas, como ISAM e
VISAM.Colocando a história de lado, o SQL informa ao servidor o que deve ser feito com o
dado. (Ariane, 2020).

Para (Ariane,2022) ele desempenha as seguintes funções: 

 Data Query. Solicitar informações específicas de um banco de dados.

 Data Manipulation. Adicionar, excluir, mudar, ordenar e outras operações para
modificar os dados, valores ou visuais.
 Data Identity. Definir tipos de dados. Ex: mudar dados numéricos para integrais.
Isso também inclui definir a relação das tabelas no banco de dados.
 Data Access Control. Fornece técnicas de segurança para proteger dados, incluindo
quem pode visualizar ou usar as informações armazenadas no banco de dados.

Um modelo cliente-servidor, um ou mais dispositivos (clientes) conectam com o servidor

através de uma rede específica. Cada cliente pode fazer a solicitação através de uma interface
gráfica do usuário (IGU) em suas telas. E o servidor vai produzir o melhor resultado, desde que
ambos entendam as instruções. Sem entrar muito nos méritos técnicos, os principais processos
que acontecem em um ambiente MySQL são os mesmos. (Ariane,2020).

O MySQL cria um banco de dados para armazenamento e manipulação de dados, definindo a

relação de cada tabela.Clientes podem fazer solicitações digitando comandos SQL específicos no
MySQL.A aplicação do servidor responde com a informação solicitada fazendo aparecer no
cliente.Quanto ao cliente, geralmente se enfatiza qual IGU MySQL é utilizado. Quanto mais leve
e simples de usar for o GUI, mais eficiente será.Alguns dos IGU mais populares são MySQL
WorkBench, SequelPro, DBVisualizer e Navicat DB Admin Tool.Alguns deles são gratuitos,
enquanto outros são pagos. Alguns rodam exclusivamente no MacOS, enquanto outros são
20
compatíveis com os maiores sistemas operacionais.Cada cliente deve escolher um IGU de acordo
com suas necessidades. Para gerenciamento de bancos de dados web, incluindo sites WordPress,
a opção mais comum é o phpMyAdmin. (Ariane,2020).

1.9 VISIO

O Microsoft Visio pode ser usado para criar simples ou diagramas complicados. Ele oferece uma
grande variedade de formas, objetos e estênceis embutidos para trabalhar. Você também pode
criar suas próprias formas e importá-las se desejar fazer todo esse trabalho extra. A ideia
principal por trás do Visio é tornar a diagramação o mais fácil possível para o usuário. Acho que
o Visio está no caminho certo para isso! (VISIO,2016).

1.10 FRAMEWORK

Os sistemas computacionais oferecem soluções para problemas que normalmente são parecidos e
recorrentes, o que torna a reutilização do código algo bastante útil. Assim surgiram os
frameworks. Estes são códigos interligados e comuns a determinados problemas. Existem vários
frameworks usados em diferentes situações, como: Ionic Framework, usado para
desenvolvimento móvel; XUnit Framework, usado em teste de código automatizados ou para
games, como o Phaser (Monlevade,P.36,2016).

Segundo (MATTSSON, 1996), um framework é uma arquitetura desenvolvida com o objetivo de

atingir a máxima reutilização, representada como um conjunto de classes abstratas e concretas,
com grande potencial de especialização. A utilização de frameworks no desenvolvimento de
aplicações traz benefícios originados de suas características principais: são modulares, reusáveis,
extensíveis e eventualmente assumem o controle da execução invocando métodos da aplicação
quando necessário (inversão de controle).

A diferença entre bibliotecas e frameworks é que as funções do framework são interligadas e nas
bibliotecas não há interligação. A Figura 8 ilustra os componentes que formam o
DjangoFramework, que foi utilizado para o desenvolvimento deste projeto. Nela é possível
visualizar que o Django é formado e depende dos componentes Settings(Configurações),
Templates, RootURLS(Links principais), Database(Banco de dados) E APPS(Módulos), os quais

21
dependem de outro sub-nível de componentes que são Models(Modelos), Views(Controlador),
Templates(Telas). O conjunto desses componentes interagindo entre si formam o framework.
(Monlevade, P.37,2016).

Para (Monlevade, P.37,2016) as vantagens que um framework nos fornece, temos:

• Padronização;
• Manutenção;
• Reutilização do código;
• Qualidade.
Para (Monlevade, P.37,2016) apesar de todas as vantagens em utilizar framework para
desenvolvimento, existem também algumas dificuldades, que são:
• Curva de aprendizado;
• Requisitos e dependências do sistema.

No desenvolvimento web a utilização de framework tornou-se uma boa prática, uma vez que leva
à padronização e organização do código. Como a maioria dos projetos são desenvolvidos por
grupos de pessoas que muitas vezes trabalham em funcionalidades diferentes, a utilização do
framework permite reunir os códigos de equipes distintas no mesmo projeto.

22
CAPÍTULO II: METODOLOGIA

Este trabalho segue a modalidade de pesquisa aplicada é aquela em que o pesquisador é movido
pela necessidade de conhecer para a aplicação imediata dos resultados. Contribui para fins
práticos, visando à solução mais ou menos imediata do problema encontrado na realidade.
Na pesquisa aplicada, o pesquisador busca orientação prática à solução imediata de problemas
concretos do cotidiano. (BARROS; LEHFELD, 2014).

2.1 Ferramentas e tecnologias utilizadas

Os subtópicos a seguir apresenta as ferramentas e tecnologias que foram utilizadas no desenvolvimento do
software, a fim que se torne claro, às partes interessadas, a importância e o papel desempenhado por cada
uma delas no trabalho desenvolvido. As tecnologias e ferramentas foram selecionadas cautelosamente a

23
fim de entregar um produto que correspondesse e atendesse aos requisitos definidos junto às partes
interessadas.

UML - Para o uso da UML, foi utilizada a ferramenta VISIO 2019. A ferramenta disponibiliza uma
versão gratuita, além de dispor de inúmeros materiais para estudo e possuir uma interface amigável, o que
propiciou o desenvolvimento dos dois tipos de diagramas escolhidos para este trabalho: Diagrama de Caso
de Uso e Diagrama de Atividades;

HTML, CSS E JAVASCRIPT - Foi utilizado neste projeto o HTML5, por incluir novos elementos e
atributos que melhoram o processo de utilização da linguagem e se tratar da versão mais recente da
tecnologia. A linguagem JavaScript foi utilizada no desenvolvimento do back-end do software,
responsável pela parte de execução das funções do sistema e que fica invisível aos olhos do usuário. A
linguagem também foi aplicada no front-end do software, sendo essa a interface da aplicação web, a tela a
qual o usuário interage (Paula, 2020) ;

BOOTSTRAP - O Bootstrap é um framework front-end usado na criação de websites responsivos que

auxilia no desenvolvimento CSS e JavaScript, deixando sites e aplicações mobile mais ágeis e elegantes
(GETBOOTSTRAP, 2016). Foi escolhida a versão 5.0 para ser utilizada neste projeto, por ser a versão
mais recente, ser otimizada para o desenvolvimento de layouts responsivos, pelo aumento da
produtividade e por ser um framework gratuito.

MYSQL, PHP – Foi utlizado o MYSQL para armazenar os dados e o php para fazer a conexão com o
banco de dados e fazer toda a lógica de venda.

2.2- Coleta de Dados

A primeira pergunta foi qual é o seu género.

24
 31%
a) Masculino
b) Femenino
69%

Fonte: Autoria do Autor

Figure 1- Qual é o seu género.

Os resultados mostram que 31% são mulheres e 69% são homens.

A segunda pergunta foi qual é o intervalo da sua idade.

17% 3%
a) 18 aos 30 anos
50% b) 31 aos 40 anos
31% c) 41 aos 50
d) 51 à +55

Fonte:Autoria do Autor

Figure 2-Intervalo das idades

Os resultados mostram que 50% pertence ao intervalo dos 18 aos 30 anos, 30% pertence ao
intervalo dos 31 aos 40 anos, 17% pertence ao intervalo dos 41 aos 50 e 3% pertence aos 51 à
+45 anos.

A terceira pergunta foi qual é a área onde trabalhas.

25
 8%

a) Decisão
42% b) Gestão
c) Execução
d) outro
50%

Fonte: Autoria do Autor

Figure 3-Qual é a área onde trabalhas.

Os resultados mostram que 50% trabalham na área de Execução, 42% trabalham em outra área,
8% trabalham na área de Gestão e 0% trabalham na área de Decisão.

A quarta pergunta foi qual é o seu cargo na empresa.

8%
22% 8%
a) PCA
b) Gerente
c) Secretário
d) Vendedor
e) outro
61%

Fonte: Autoria do Autor

Figure 4-Qual é o seu cargo na empresa

Os resultados mostram que 61% são vendedores, 22% tem outro cargo, 9% são gerente, 8% são
secretários e 0% são os PCA.

A quinta pergunta foi com a criação deste site quanto é que nos dás, de 1 á 3 estrelas pela
26
iniciativa

14%
a) 1
b) 2
58% 28%
c) 3

Fonte:Autoria do Autor
Figure 5-classificação da ideia.

Os resultados mostram que 58% deu 3 estrelas, 28% deu 2 estrelas, 14% deu 1 estrela.

27
CAPÍTULO III: PARTE PRÁCTICA

O presente capítulo tem como finalidade apresentar os resultados adquiridos durante o

desenvolvimento do sistema. Definido pelo método de desenvolvimento incremental os
resultados serão apresentados em módulos principais e futuras melhorias. Sendo apresentado nos
módulos principais o básico do funcionamento do sistema e os módulos secundários melhorias
que podem ser realizadas para uma melhor experiência na utilização da loja virtual.

3.1. Levantamento de requisitos

O levantamento de requisitos é a peça fundamental para o bom desenvolvimento de um software,

todos os requisitos devem ser analisados e validados por ambas as partes, tanto cliente como
desenvolvedor.

3.2 Requistos Funcionais

3.2.1 Requisitos funcionais

 Registo de usuário;
 Compra de produtos.
 Pesquisar ´produto.
 Login no Sistema.

3.2.2 Requisitos não funcionais

 Confiabilidade;
 Segurança;
 Desempenho..

28
3.3 Documentação

3.3.1 Diagrama de Caso de Uso

Figura 1-Diagrama de caso de uso

Figure 6- Diagrama de Caso de Uso

Fonte-Autoria do Autor

29
3.3.2 Diagrama de Classe

Figura 2-Diagrama de classe

Figure 7-Diagrama de Classe

Fonte-Autoria do Autor

30
3.3.5 Diagrama Entidade e Relacionamento

Figura 3-Diagrama de entidade relacionamento

Fonte-Autoria do Autor
Figura 8- Diagrama Entidade e Relacionamento

31
3.4 Demonstração de Resultados

1. Código Fonte

Figura 4- código fonte

Fonte-Autoria do Autor
Figura 9- Código Fonte

32
2- Página inicial do Administrador

Figura 5-admin page

Fonte-Autoria do Autor
Figura 10- Admin page

2- Página inicial do Usuário

33
Figura 6-user page

Fonte-Autoria do Autor
Figura 11- User page

3- Localização do site: https://Antóniodala.000webhostapp.com/

34
 CONSIDERAÇÕES FINAIS

Possíveis implementações futuras foram apresentadas para tornar o sistema mais completo e
vantajoso de se utilizar, além de facilitar o seu uso, porém as funcionalidades básicas de uma loja
virtual foram implementadas com sucesso, podendo ser usada atualmente, apenas necessitando da
aquisição de uma empresa que forneça formas de pagamentos online.

Conclui-se que o objetivo do trabalho foi alcançado, demonstrando através de pesquisas os

fatores que levam a uma loja virtual trazer benefícios para as empresas atualmente e o exemplo
de desenvolvimento de uma loja virtual utilizando a ferramenta de desenvolvimento Vs Code.

Cada fase era uma etapa importante desse desenvolvimento e contribuiu para o amadurecimento
do objetivo inicial. O trabalho exigiu disciplina e estudo aprofundado em cada etapa que se
iniciava e concluía, pois a mal formação da estrutura poderia comprometer todo o seu
desenvolvimento. Além do estudo da engenharia de software, foi necessário aprofundar e não
medir esforços para o recolhimento de requisitos junto à empresária solicitante do sistema, para
que o mesmo pudesse atender sua necessidade e lhe proporcionar o objetivo esperado. Como
resultado se construiu uma ferramenta de apoio às vendas e de ajuda no controle dos vários
segmentos da empresa Skin Modas, como: caixa, estoque, produtos, entre outros. O sistema
atende à todos os requisitos solicitados.

35
 REFERÊNCIAS BIBLIOGRÁFICAS

ALBERTIN, Alberto Luiz. Comércio Eletrônico: Modelo, Aspectos e Contribuições

de sua Aplicação. 6. ed. São Paulo: Atlas, 2010. 306 p.

ASSENCIO, Claudia (São Paulo). Exame (Org.). Ibope aponta que acesso à internet
cresce 3% no 2º tri. 2013. Disponível em:
<http://exame.abril.com.br/tecnologia/noticias/ibope-aponta-que-acesso-a-internet-cresce-3-
no-2o-tri>. Acesso em: 04 maio 2016.

BOOCH, Grady; RUMBAUCH, James; JACOBSON, Ivar. UML: Guia do Usuário. 2.

ed. Rio de Janeiro: Elsevier, 200p.

CAELUM (Brasil). Sobre o curso – o complexo mundo do front-end. 2004A.

Disponível em: <https://www.caelum.com.br/apostila-html-css-javascript/sobre-o-curso-
o-complexo-mundo-do-front-end/>. Acesso em: 19 maio 2016.

CAELUM (Brasil). JavaScript e interatividade na Web. 2004B. Disponível em:

<https://www.caelum.com.br/apostila-html-css-javascript/javascript-e-interatividade-na-
web/>. Acesso em: 19 maio 2016.
CAMERON, Debra. Electronic Commerce: The New Business Platform for the Internet.
1. ed. Computer Technology Research Corp., 1997. 240 p.

E-BIT (São Paulo). E-commerce fatura r$ 10,2 bilhões no primeiro semestre de 2012.
2012. Disponível em: <https://empresa.ebit.com.br/noticias-1.asp>. Acesso em: 04 maio
2016.

E-BIT (São Paulo). E-commerce supera expectativas: E-commerce fatura R$ 35,8

bi em 2014. 2015. Disponível em:
<https://empresa.ebit.com.br/clip.asp?cod_noticia=3959&pi=1>. Acesso em: 04 maio 2016.

FOINA, Paulo Rogério. Tecnologia da informação: planejamento e gestão. São

Paulo: Atlas, 2001

36