ETEC ORLANDO QUAGLIATO

TÉCNICO EM DESENVOLVIMENTO DE SISTEMA

Guilherme Jardim Costa

Gustavo Henrique Pilato Biaggi
Luiz Henrique da Silva
Matheus Bacochina de Oliveira
Virginia Helena de Souza

SITE PARA UM EMPREENDEDOR (CANTINHO DOS SABORES)

Santa Cruz do Rio Pardo – SP

2020
 2

SUMÁRIO

1 INTRODUÇÃO ......................................................................................................7
2 A EMPRESA .......................................................................................................10
HISTÓRIA ........................................................................................................10
JUSTIFICATIVA.................................................................................................10
3 DESENVOLVIMENTO .........................................................................................11
FERRAMENTAS DE DESENVOLVIMENTO ..............................................................11
LINGUAGENS UTILIZADAS .................................................................................12
3.2.1 HTML ..........................................................................................................12
3.2.2 PHP.............................................................................................................13
3.2.3 CSS ............................................................................................................14
3.2.4 BANCO DE DADOS ........................................................................................15
3.2.5 JAVA SCRIPT ................................................................................................16
SOFTWARES E FRAMEWORK .............................................................................17
3.3.1 BOOTSTRAP.................................................................................................17
3.3.2 NOTEPAD++ ................................................................................................18
3.3.3 SUBLIME TEXT ............................................................................................19
3.3.4 MICROSOFT WORD ....................................................................................20
4 ARQUITETURA DO SOFTWARE .......................................................................21
4.1. INÍCIO .............................................................................................................21
4.2. PRODUTOS......................................................................................................22
4.3. CADASTRO......................................................................................................23
4.4. MAPS .............................................................................................................24
4.5. CABEÇALHO ...................................................................................................25
5 MODELO ENTIDADE RELACIONAMENTO (MER) ...........................................26
6 CONCLUSÃO ......................................................................................................27
REFERÊNCIAS..........................................................................................................28
 3

LISTA DE ILUSTRAÇÔES

Figura 1 – Html .........................................................................................................12

Figura 2 – Php...........................................................................................................13
Figura 3 – Css ...........................................................................................................14
Figura 4 – Banco de dados ......................................................................................15
Figura 5 – Java Script ..............................................................................................16
Figura 6 – Boostrap ..................................................................................................17
Figura 7 – Notepad++ ...............................................................................................18
Figura 8 – Sublime ...................................................................................................19
Figura 9 – Word ........................................................................................................20
Figura 10 – Inicio ......................................................................................................21
Figura 11 – Produtos ................................................................................................22
Figura 12 – Cadastro ................................................................................................23
Figura 13 – Maps ......................................................................................................24
Figura 14 – Cabeçalho .............................................................................................25
 4

Guilherme Jardim Costa

Gustavo Henrique Pilato Biaggi
Luiz Henrique da Silva Gabriel
Matheus Bacochina de Oliveira
Virginia Helena Lemes de Souza

SITE PARA UM EMPREENDEDOR (CANTINHO DOS SABORES):

Trabalho de Conclusão de Curso apresentado ao Curso

Técnico em Técnico em Desenvolvimento em Sistemas da Etec
Orlando Quagliato, orientado pela Prof. Bruna Moraes e David
Silva, como requisito parcial para obtenção do título de técnico
em Desenvolvimento de Sistemas.

Santa Cruz do Rio Pardo – SP

2020
 5

AGRADECIMENTOS:

Nós gostaríamos primeiramente de agradecer a todos

os professores que nos guiaram até este momento. E
aos nossos colegas que nos suportaram por toda a
nossa trajetória. Nossos pais que nos deram o apoio
nos momentos de dificuldades.
 6

“Tornou-se chocantemente óbvio que a

nossa tecnologia excedeu a nossa
humanidade”.

ALBERT EINSTEIN
 7

1 INTRODUÇÃO

Neste projeto experienciamos a inciativa e um requisito que vimos de criar um Web

Site para uma lanchonete, no município de Santa Cruz do Rio Pardo (Cantinhos dos
Sabores), por fins de trazer uma segurança e comodidade para o empreendedor e
cliente. Nosso principal foco é trazer um site dinâmico de fácil interação com cliente,
como umas páginas do site sem muitos botões, textos simples e bem objetivo para
escolher seus produtos com descrições em cada um deles, assim não precisando o
consumidor ir até mesmo ao estabelecimento podendo optar também pelo serviço
delivery se for ao caso dele. Quanto a parte de ferramentas utilizamos a
programação com Php e Html na maioria do código fonte, as pesquisas deram-se em
sites que abordam profissionalmente esses mesmos tipos de conteúdo para criação
de Sites. A referência principal foi do site “w3schools.com” que traz ensinamentos
precisos como utilizar uma linguagem programação.
 8

RESUMO

A proposta do presente trabalho é desenvolver um site para a empresa “Cantinho

dos Sabores”, uma lanchonete localizada no município de Santa Cruz do Rio Pardo,
no interior do estado de São Paulo. O site será utilizado para a realização de
encomendas, consultas e pedidos de produtos, como salgados e doces em geral,
oferecendo assim um melhor atendimento aos clientes da empresa. As páginas
serão desenvolvidas utilizando a linguagem de marcação HTML, folhas de estilos
CSS, linguagem de programação PHP, Bootstrap, JavaScript e o banco de dados
MySql.

Palavras-chave: Site, linguagem de programação, banco de dados.

 9

ABSTRACT

The purpose of this work is to develop a website for the company “Cantinho dos
Sabores”, a snack bar located in the municipality of Santa Cruz do Rio Pardo, in the
interior of the state of São Paulo. The website will be used to place orders,
consultations and order products, such as snacks and sweets in general, thus offering
better service to the company's customers. The pages will be developed using the
HTML markup language, CSS style sheets, PHP programming language, Bootstrap,
JavaScript and the MySql database.

Keywords: Website, programming language, database.

 10

2 A EMPRESA

História

O Cantinho dos Sabores nasceu no dia 13 de dezembro de 2014, pelo proprietário

Ricardo Aparecido Selani e sua esposa Fabiana Gabriel Selani. A empresa foi criada
com intuito de oferecer produtos alimentícios de boa qualidade com preços
acessíveis, com um bom atendimento. A lanchonete está localizada em Santa Cruz
do Rio Pardo na rua Conselheiro Dantas na quadra dois do calçadão da cidade, pois
demonstrava uma lacuna neste ramo. Com o passar do tempo a empresa foi
ganhando reconhecimento e clientes e hoje faz sucesso pela qualidade e variedade
de produtos. E possível encontrar salgados, refrigerantes, doces, além dos
sanduiches naturais. Seu horário de funcionamento é das 08:00 às 18:00 e aos finais
de semana dás 08:00 às 15:00.

Justificativa

A principal finalidade foi auxiliar no desenvolvimento de pedidos via web, onde os

clientes poderiam facilmente acessar e realizar, por meio do site desenvolvido. Além
de também ser disponível a consulta e o acesso aos demais dados.
 11

3 DESENVOLVIMENTO

Ferramentas de desenvolvimento

Para o desenvolvimento desse trabalho foi utilizado diversas aplicações de software,

pesquisa, linguagens de afazeres, apoio e trabalho em equipe para realização de
nossa Web Site.
 12

Linguagens utilizadas

3.2.1 Html

O HTML é uma linguagem de programação para fins de criação de web sites, umas
das linguagens mais escolhidas pelos desenvolvedores de sites, também essa
dicção tem uma formatação rápida pelos navegadores HTML é uma linguagem que
se encaixa com praticamente todas outras línguas dentro do mundo da programação
também devemos ressaltar que ela é de fácil entendimento e por isso qualquer
pessoa que se dedique um tempo para ela ira compreendê-la, como afirma
(LOGEN,2019). HTML significa Hypertext Markup Language. Ele permite que os
usuários criem e estruturem seções, parágrafos, cabeçalhos e links para páginas da
internet ou aplicações. O HTML é a principal linguagem de marcação da internet. Ele
roda nativamente em todos os navegadores e é mantido pelo Consórcio World Wide
Web (W3C).

Documentos HTML são arquivos com as extensões .html ou .htm. Eles

podem ser visualizados com qualquer navegador (como Google Chrome,
Safari, ou Mozilla Firefox). O navegador faz a leitura do arquivo e renderiza
seu conteúdo para visualização dos usuários. (LOGEN,2019).

Figura 1 – Html

Disponível em: https://www.mediapost.com.br/blog/editor-de-html-para-voce-criar-ou-

editar-seu-template-de-e-mail-marketing/
 13

3.2.2 Php

O PHP é uma linguagem de programação utilizada por programadores para

realização de páginas de web sites, muito empregado por diversos sites na internet
principalmente por sites de notícias, que com alta demanda de atualização ao todo
momento a linguagem PHP tem uma característica de variáveis dinâmicas para
trocar qualquer parte do site com facilidade. Em resumo diz (ESTRELLA,2019).
Numa explicação de poucas palavras, PHP é uma linguagem de
programação utilizada por programadores e desenvolvedores para construir sites
dinâmicos, extensões de integração de aplicações e agilizar no desenvolvimento de
um sistema.

Essa linguagem é mundialmente conhecida e uma das mais utilizadas pela

facilidade em aprendê-la, manuseá-la, além de ser compatível com quase
todos os sistemas operacionais que existem – o que torna seu custo menor.
(ESTRELLA,2019)

PHP é muito famigerado pelo fato da sua dinâmica com Web Sites que atrai muita
atenção de programadores para ser preferida “ela é principalmente utilizada para
gerar conteúdos dinâmicos num site”. (ESTRELLA,2019) e por isso é linguagem
muito empregada por desenvolvedores.

Figura 2 – Php

Disponível em: https://www.visualdicas.com.br/programacao/php/23-diferenca-entre-

aspas-simples-aspas-duplas-e-aspas-invertidas-em-php
 14

3.2.3 Css

O CSS é um arquivo auxiliar de design de páginas para web sites com foco somente
em estilizar, trabalha com arquivos HTML e PHP, por exemplo, vantagem que é uma
linguagem de fácil entendimento por todos os usuários novatos e também deixa o
site muito mas elegante e fácil edição, complementando isso diz
(GOLÇALVES,2020). CSS foi desenvolvido pelo W3C (World Wide Web Consortium)
em 1996, por uma razão bem simples. O HTML não foi projetado para ter tags que
ajudariam a formatar a página. Você deveria apenas escrever a marcação para o
site.

“A relação entre HTML e CSS é bem forte. Como o HTML é uma linguagem
de marcação (o alicerce de um site) e o CSS é focado no estilo (toda a
estética de um site), eles andam juntos.” (GOLÇALVES,2020)

CSS é utilizado por quase todos web sites existentes na internet por ser excelente
pelo seu propósito “CSS não é tecnicamente uma necessidade, mas provavelmente
você não gostaria de olhar para um site que usa apenas HTML, pois isso pareceria
completamente abandonado.” (GOLÇALVES,2020). Isso demonstra sua precisão em
tê-lo em sua programação.

Figura 3 – Css

Disponível em: http://luizricardo.org/2014/03/entenda-como-zebrar-uma-tabela-com-css/

 15

3.2.4 Banco de dados

Banco de dados como o próprio nome diz é uma base de dados onde ficam
armazenadas diversas informações sejam elas cadastros de clientes de uma
empresa ou dados de um sistema, existe diversos tipos de bancos, mas todos eles
trabalham com uma linguagem chamada SQL que essa linguagem é de fácil
entendimento por programadores intermediários, mas que devem tomar o máximo de
cuidado com os comandos, pois estará manuseando informações de extrema
importância. Contando mas um pouco diz (REZENTE,2006) Os objetivos de
um sistema de banco de dados são o de isolar o usuário dos detalhes internos do
banco de dados (promover a abstração de dados) e promover a independência dos
dados em relação às aplicações, ou seja, tornar independente da aplicação, a
estratégia de acesso e a forma de armazenamento.

Antigamente as empresas armazenavam informações em arquivos físicos,

mas o surgimento e evolução dos computadores possibilitaram o
armazenamento de dados de modo digital. Assim os bancos de dados
evoluíram e se tornaram o coração de muitos sistemas de informação.
(ALVES,2013)

Por tanto é bom ressaltar que esses bancos de dados devem ter um Firewall
extremamente seguro, pois existem informações sigilosas que devem ser protegidas
para não acontecer nenhum problema “catástrofe” pensando na analogia.
(MACÊDO,2011) As ameaças aos bancos de dados podem resultar na perda ou
degradação de alguns ou de todos os objetivos de segurança aceitos, são eles:
integridade, disponibilidade, confidencialidade. A integridade do banco de dados se
refere ao requisito de que a informação seja protegida contra modificação imprópria.

Figura 4 – Banco de dados

Disponível em: https://www.alura.com.br/curso-online-modelagem-banco-relacional-

entidade-relacionamento-atributo
 16

3.2.5 Java script

Java Script é uma das linguagens mais utilizadas no mundo de criação de web sites
da programação que anda sempre em conjunto com HTML e CSS a maioria das
vezes, o Java Script é perfeito para quem busca um site mais dinâmico e com
animações. Dizendo sobre o assunto fala (ZAMPIERI,2018) Esta que é uma das
principais linguagens de programação oferece uma variedade muito grande de
frameworks e aplicações para os mais diversos dispositivos. E, quem domina o
Javascript, acaba se tornando um programador muito versátil.

A linguagem de programação Javascript permite ao desenvolvedor

implementar diversos itens de alto nível de complexidade em páginas web,
como animações, mapas, gráficos ou informações que se atualizam em
intervalos de tempo padrão, por exemplo.Javascript é a terceira camada do
bolo de desenvolvimento web e front-end, junto com HTML, CSS e PHP.
(ZAMPIERI,2018)

Contudo da para compreender a necessidade que o Java Script faz nos sites do dia-
dia “A linguagem de programação Javascript permite ao desenvolvedor implementar
diversos itens de alto nível de complexidade em páginas web, como animações,
mapas, gráficos ou informações que se atualizam em intervalos de tempo padrão”
(ZAMPIERI,2018).

Figura 5 – Java Script

Disponível em: https://pt.wikipedia.org/wiki/JavaScript

 17

Softwares e framework

3.3.1 Bootstrap

Bootstrap é um framework front-end mais utilizados pelos programadores para

criação de um web sites isso por ter uma biblioteca gigantesca de linhas de códigos
muito completa e fácil de utilização complementando isso e explicando sobre diz
(LONGEN,2019)O framework front-end e de código-aberto foi inicialmente criado por
Mark Otto e Jacob Thornton para o desenvolvimento web mais rápido e prático.

O conjunto de sintaxes de tarefas específicas que eles têm permite que os

desenvolvedores construam sites muito mais rapidamente porque não é
preciso se preocupar com comandos básicos e funções adicionais.
(LONGEN,2019)

Como podemos notar após essas informações um framework em si é somente uma

ferramenta de auxílio para criação de web sites um processo de aceleração para
programadores não precisarem escrever comandos básicos assim poupando tempo
até para elaboração de um site mais extenso e completo em poucas semanas.

Figura 6 – Boostrap

Disponível em: https://getbootstrap.com.br/

 18

3.3.2 Notepad++

Notepad++ é uma ferramenta muito conhecida pelos programadores, sua função ser
um editor de texto para criação de diversos softwares e web sites muito simples de
utilizar também pode servir como um simples editor de blocos de notas compatível
com diversos tipos de linguagens no mundo da programação complementando isso
diz (ALVAREZ,2008) É destes editores que oferecem ajudas muito úteis para "tirar
linhas de código", como ressaltado de cores, possibilidade de editar vários
documentos de uma só vez, menus contextuais, auto-completar código, etc. É um
presente para os programadores, já que além de tudo é gratuito.

Recheado de código para mais de 40 linguagens de programação diferentes,

entre as quais se incluem todas as que um desenvolvedor da web poderia
manusear, como HTML, Javascript, ASP, SQL, PHP, CSS, Piton, Ruby, etc.
Impressão a cor dos códigos, permite definir o ressaltado de sintaxe para
novas linguagens de programação que necessite o usuário.
(ALVAREZ,2008)

Um ponto muito bom desse software que ele é extremamente leve por esse motivo
pode ser um software portátil dentro de um pendrive para instalação em qualquer
máquina que utilize Windows 10 32/64 Bits afirmando isso fala (SOUZA,2011)
Primeiramente, há a possibilidade de instalar em qualquer pendrive a versão portátil
dele (que ocupa apenas incríveis 2MB!), algo extremamente útil para programadores
que desejam fazer alguns pequenos retoques em algum código, mas não possuem
nenhuma máquina com sua IDE instalada para fazê-lo.

Figura 7 – Notepad++

Disponível em: https://pt.wikipedia.org/wiki/Notepad%2B%2B

 19

3.3.3 Sublime text

Sublime Text é um editor de texto mais dinâmico para quem busca uma programação
mais “ágil”, pois nesse software ele pode escrever as tags automaticamente
enquanto o programador digita seu código facilitando o processo, diferente de alguns
editores de texto um pouco mais simples. Dizendo mais diz (ALVES,2015) Outra
característica muito interessante do Sublime Text é a possibilidade de dividir a tela
colocando dois (ou mais) arquivos lado a lado. Isso é muito útil para comparar
arquivos. Inclusive é possível colocar partes diferentes do mesmo arquivo lado a
lado. Outra utilização muito comum entre web designers é colocar o HTML de um
lado e o CSS do outro.

Uma das coisas mais interessantes do Sublime Text é a capacidade de

estender as funcionalidades do editor por meio de plugins. Existe plugin pra
tudo! Integração com o GIT, snippets para Bootstrap, SFTP, highlight, VI,
SASS, LESS, e ótimas ferramentas para refatoração de código.

Finalizando esse software de editor de texto para quem curte uma aplicação mais
abrangente e também leve sem dúvidas vai gostar, pois tem sua versão portátil para
pendrive que facilita sua instalação em qualquer computador. Comentando sobre
suas compatibilidades Sublime Text é disponível para Windows e Linux.

Figura 8 – Sublime

Disponível em: https://twitter.com/sublimehq

 20

3.3.4 Microsoft word

Microsoft Word é software para criação de documentação para diversos afazeres

para trabalho, muito utilizado mundialmente é quase meio que indispensável nos
computadores do dia-dia de hoje por ser um dos mais completos processadores de
textos, explicando mais sobre essa aplicação fala (SANTOS,2009) O Word permite a
elaboração de documentos escritos para a gravação, Impressão, contando ainda
com recursos de ajuste de parágrafos, uso de diferentes tipos de letras, importação
de imagens, correção de erros ortográficos, criação de tabelas, mala direta, entre
outros recursos.

Trabalhar com o Word você terá outros benefícios também, pois todos os
outros produtos da versão trabalham basicamente da mesma forma, então
você poderá transferir conhecimentos obtidos em uma aplicação para
outra.(SANTOS,2009)

Dizendo uma característica é que o Word não é simples existem diversas mecânicas
nele que devem ser aprendidas para um bom manuseio desse Software para boas
criação de documentos. É muito importante salvar frequentemente seus documentos
para impedir a perda de dados. Assim que um arquivo é salvo pela primeira vez,
recebendo um nome, o Word grava esse nome e atualiza o arquivo sempre que for
salvo. No caso de haver necessidade de fazer uma cópia do arquivo, use o comando
Salvar como e dê um nome e/ou localização diferentes (SANTOS,2009). Por esses
motivos é bom ter um conhecimento básico do Word.

Figura 9 – Word

Disponível_em:https://pt.wikipedia.org/wiki/Ficheiro:Microsoft_Office_Word_(2018%E
2%80%93present).svg
 21

4 ARQUITETURA DO SOFTWARE

4.1. Início

Você pode navegar pelo site pela barra de navegação, tento acesso a todo conteúdo
disponível.

Figura 10 – Inicio
 22

4.2. Produtos

Aqui haverá a variedade de produtos e seus devidos preços, tudo separado em tipos
como bebida, doce e etc.

Figura 11 – Produtos
 23

4.3. Cadastro

Aqui você poderá se cadastrar em nosso site, para facilitar na obtenção de dados
para contato do cliente.

Figura 12 – Cadastro
 24

4.4. Maps

Você poderá ver a localização de nossa lanchonete direto do maps, facilitando a

localização.

Figura 13 – Maps
 25

4.5. Cabeçalho

Aqui haverá informações úteis como horários, meios de comunicação como e-mail e
telefone e localidade sendo obtida tanto com a informação escrita quanto com o QR
CODE que levará direto a localidade no Google maps.

Figura 14 – Cabeçalho
 26

5 MODELO ENTIDADE RELACIONAMENTO (MER)

 27

6 CONCLUSÃO

O desenvolvimento do presente trabalho intuito é a realização de uma Web site para

uma lanchonete localizada em Santa Cruz do Rio Pardo (Cantinho dos Sabores),
cuja ideia é a haver controle para o empreendedor e facilidade para os clientes em
seus pedidos. Nosso estudo tem finalidade de ser um trabalho de grande
funcionalidade de uso com fácil entendimento por todos os usuários e leve para que
possa rodar em todo o tipo de Softwares. Esperamos também resultados positivos
com esse projeto, e bons feedbacks para que possamos ampliar e melhorá-lo com
nossas ideias e com ajuda dos nossos clientes.
 28

REFERÊNCIAS

ESTRELLA, Carlos, O Que é HTML? Guia Básico Para Iniciantes. Disponível em:<
https://www.hostinger.com.br/tutoriais/o-que-e-html-conceitos-basicos/ > Acesso em:
14 mar 2020.
ESTRELLA, Carlos, O Que é PHP? Guia Básico de Programação PHP. Disponível
em:< https://www.hostinger.com.br/tutoriais/o-que-e-php-guia-basico/> Acesso em:
14 mar 2020.
GOLÇALVES, Ariane, O que é CSS? Guia Básico para Iniciantes. Disponível em:<
https://www.hostinger.com.br/tutoriais/o-que-e-css-guia-basico-de-css/> Acesso em:
15 mar 2020.
REZENDE, Ricardo, Conceitos Fundamentais de Banco de Dados. Disponível em:<
https://www.devmedia.com.br/conceitos-fundamentais-de-banco-de-dados/1649 >
Acesso em: 15 mar 2020.
ALVES, Gustavo, O que é Banco de Dados. Disponível
em:<https://dicasdeprogramacao.com.br/o-que-e-um-banco-de-dados/ > Acesso em:
15 mar 2020.
ZAMPIERI,Gabriel, O que é JavaScript. Disponível
em:<https://www.hostinger.com.br/tutoriais/o-que-e-javascript/> Acesso em: 23 maio
2020.
EDUARDO, O que é HTML5. Disponível em:< https://www.devmmedia.com.br/o-que-
e-o-html5/25820 > Acesso em: 23 maio 2020.
ALVAREZ,Miguel, Editor de código fonte com suporte para diversas linguagens de
programação, gratuito e de código livre. Disponível
em:<http://www.criarweb.dominiotemporario.com/artigos/notepad.html> Acesso em:
24 maio 2020.
SOUZA, Felipe, Notepad++, a evolução do Bloco de Notas. Disponível
em:<https://www.guiadopc.com.br/analises/20307/notepad-plus.html> Acesso em: 24
maio 2020.
ALVES, Gustavo, Sublime Text: O queridinho dos programadores. Disponível
em:<https://dicasdeprogramacao.com.br/sublime-text-o-queridinho-dos-
programadores/> Acesso em: 24 maio 2020.
SANTOS, Araken, Roteiro 2 Microsoft Word. Disponível
em:<http://www2.ufersa.edu.br/portal/view/uploads/setores/160/disciplinas/20092/info
rmatica_aplicada/unidade01/04_Informatica_Aplicada%20-
%20Word_ArakenMedeiros%C2%AD2009.2%20-%20Roteiro%2002.pdf> Acesso
em: 24 maio 2020.
MACÊDO,Diego, Conceitos sobre segurança em Banco de dados. Disponível
em:<https://www.diegomacedo.com.br/conceitos-sobre-seguranca-em-banco-de-
dados/> Acesso em: 25 maio 2020.
LOGEN, Andrei, O que é bootstrap? Guia para iniciantes. Disponível
em:<https://www.hostinger.com.br/tutoriais/o-que-e-bootstrap/> Acesso em: 25 maio
2020.