ESCOLA ESTADUAL DE EDUCAÇÃO PROFISSIONAL DR. SOLON TAVARES CURSO TÉCNICO EM INFORMÁTICA Jéssica Luiz Vieira LYLART S E.V.A Site para divulgação e vendas de artesanatos Guaíba 2015
Jéssica Luiz Vieira LYLART S E.V.A Site para divulgação e vendas de artesanatos Trabalho de apresentado Conclusão à Escola de Curso Estadual de Educação Profissional Dr. Solon Tavares como requisito parcial para a obtenção do título de Técnico em Informática. Orientador: Prof. Rodrigo Souza Warzak. Guaíba 2015
Jéssica Luiz Vieira LYLART S E.V.A Site para divulgação e vendas de artesanatos Trabalho de Conclusão apresentado à Escola Estadual de Educação Profissional Dr. Solon Tavares como requisito parcial para obtenção do título de Técnico em Informática. AVALIADO POR Prof. Orientador: Rodrigo Souza Warzak Sistemas de Informática / UNISINOS Prof. de Projeto Técnico: César Augusto Neves Letras/UFRGS Aprovado em / /
A todos que me auxiliaram no trabalho, tiveram paciência comigo durante este tempo, principalmente para meu colega Yan Lopes.
AGRADECIMENTOS Agradeço primeira a Deus que me deu a sabedoria e paciência necessária para concluir este curso, a minha mãe que me incentivou e me acalmou todas as vezes que eu me sentia incapaz de alguma atividade. Agradeço também a professora Caroline Siervo que teve paciência e determinação para nos ensinar algoritmos no primeiro módulo, e assim, acabou nos incentivando a continuar neste curso. Agradeço também aos demais professores que sempre estiveram disponíveis para nós alunos, e tiveram um pacote extra de paciência com os nossos erros mais comuns (o esquecimento de um ponto e vírgula). Agradeço ao professor Rodrigo, que me orientou neste trabalho e esteve disponível para todas as dúvidas que surgiram no meio do caminho. Agradeço também ao meu melhor amigo, Kelvin Pires, que com a sua inteligência em informática, acabou me incentivando a concluir o curso, além de ter me ajudado em muitas questões com a sua lógica de pensamento, quando a minha não encontrava solução. E claro, meus agradecimentos ao meu colega de curso Yan Lopes, que esteve comigo desde o primeiro módulo, passando por cada dificuldade e fazendo com que as aulas rendessem além de aprendizado escolar, também um aprendizado de vida.
Se mexer, pertence à Biologia. Se feder, pertence à Química. Se não funcionar, pertence à Física. Se ninguém entende, é Matemática. Se não faz sentido, é Economia ou Psicologia. Se não mexe, não fede, não funciona, ninguém entende e não faz sentido... Com certeza é Informática!
RESUMO O seguinte trabalho tem como objetivo auxiliar na divulgação dos produtos construídos pela artesã Liliane, além de auxiliar também no controle de suas vendas através do sistema de gerenciamento do web site. Através de entrevistas realizadas com a artesã, foi constatado que o sistema de controle de vendas ela atualmente é desadequado, visto que suas anotações são todas feitas em cadernos, estando vulneráveis a perda de dados e confusão ao buscar por informações. Assim foi pensado que com a elaboração deste website, a artesã poderia expandir seu grupo de clientes através dos usuários que acessariam o sistema, além de possuir um sistema gerenciador para controle de vendas. Para isso foram utilizadas as linguagens HTML, CSS, e PHP para que fossem criados e editados os códigos, para isso foi utilizado o Notepad++. Foi aplicado o WAMPP, tendo dentro dele o Mysql, para que fosse executado o banco de dados e o Apache para rodar os códigos em PHP. Com este trabalho espera-se auxiliar a artesã no seu sistema de vendas e ampliar a divulgação do seu trabalho. Palavras Chave: website, gerenciador de vendas, artesanato.
ABSTRACT The following paper aims to assist in the dissemination of products built by artisan Liliane, and help also in control of their sales through the web site management system. Through interviews with the artisan, it was found that the sales control system it is currently inadequate, since his notes are all made in notebooks and is vulnerable to data loss and confusion when searching for information. So it was thought that with the preparation of this website, the artisan could expand their client group through the Users who would access the system, and have a management system for sales control. For this they used the HTML, CSS, and PHP to be created and edited the codes, for this was used Notepad ++. The WAMPP was applied, and inside it MySQL, that it should run the database and Apache to run the PHP code. This work is expected to assist the artisan in your sales system and broaden the dissemination of their work. Keywords: website, sales manager, crafts.
LISTA DE ILUSTRAÇÕES Figura 1 Modelo de Caso de Uso......... 17 Figura 2 Entidade de Relacionamento...... 18 Figura 3 Tela inicial...... 20 Figura 4 Menu principal...... 21 Figura 5 Menu lateral.......21 Figura 6 Tela de cadastrar pedido.......23 Figura 7 Tela de informações ao cliente........ 24 Figura 8 Tela Fale Conosco............ 25 Figura 9 Tela de postagens...... 26 Figura 10 Tela de login...... 27 Figura 11 Tela para recuperação de senha.......28 Figura 12 Tela de pedidos cadastrados...... 28 Figura 13 Tela de cadastros da categoria 15 anos...... 29 Figura 14 Novo cadastro de produto...... 30 Figura 15 Tela alterar dados...... 30 Figura 16 Tela de registro de administradores...... 31 Figura 17 Tela de cadastro de administrador...... 31 Figura 18 Tela de alterar dados do administrador......32
SUMÁRIO 1 INTRODUÇÃO......... 12 2 REFERENCIAL TEÓRICO......... 14 2.1 FUNDAMENTAÇÃO TEÓRICA......... 14 2. 2 FERRAMENTAS...15 3 METODOLOGIA..........17 4 DEMONSTRAÇÃO............19 5 CONSIDERAÇÕES FINAIS............33 REFERÊNCIAS.BIBLIOGRÁFICAS........ 34
14 1 INTRODUÇÃO Atualmente a sociedade está adepta as novas tecnologias de comunicação, tanto em tarefas de lazer, quanto em tarefas diárias e de trabalho. Já é mais difícil ver um estabelecimento, mesmo que pequeno, em que seu sistema não é informatizado. As pessoas já estão tão adaptadas as novas tecnologias que fazem o possível para informatizar tudo o que puderem. Esse é o novo mundo, em que o ser humano busca aperfeiçoar o seu trabalho através de sistemas da informática. Este relatório irá apresentar a proposta de um site para uma artesã divulgar e também vender os seus produtos pela internet. O site irá permitir que os usuários conheçam o trabalho da artesã, além de poder entrar em contato com a mesma e até fazerem encomendas por meio deste. Este projeto fará com que a divulgação do trabalho da artesã seja maior, trazendo assim, mais vendas para a mesma e ajudando na ampliação da sua microempresa. Este site será uma porta para que ela consiga alcançar seus objetivos maiores, além de colaborar para a administração, já que irá contar com o registro dos clientes. Para desenvolver este projeto, foram realizadas reuniões com a artesã, afim de acertar todos os detalhes sobre o site, para que tudo estivesse dentro das exigências e desejos da artesã. Também foram feitas pesquisas em outros sites de artesanato visando evitar qualquer possível plágio. As vantagens deste site serão nas áreas de divulgação e extensão de trabalho, visto que as encomendas poderão ser feitas até mesmo de outros estados. A desvantagem, é que um site requer pagamento anual. Este trabalho está dividido da seguinte maneira: no primeiro capítulo serão descritas as ferramentas e linguagens utilizadas no processo de geração do site; já no segundo capítulo será apresentada a metodologia; no terceiro capítulo será abordada a interface gráfica e funcionalidades do site, e por fim serão descritas as considerações finais.
15 Com este projeto espera-se que a artesã alcance os objetivos de expansão do seu trabalho, além de ter maior segurança com os dados registrados dos seus clientes.
16 2 REFERENCIAL TEÓRICO 2.1 FUNDAMENTAÇÃO TEÓRICA Conforme Nazário (1999), o fluxo de informações era mantido através do papel, o que resultava em uma transferência de informações lenta, pouco confiável e propensa a erros. O custo decrescente da tecnologia, associado a sua maior facilidade de uso, permitem aos executivos poder contar com meios para coletar, armazenar, transferir e processar dados com maior eficiência, eficácia e rapidez. Nicholas Carr (2003), visa que a TI é, antes de tudo, um mecanismo de transporte, que carrega a informação digital assim como uma ferrovia carrega produtos e malhas elétricas transportam eletricidade. Logo, TI é a solução perfeita para controlar dados importantes. Nas palavras dos autores Flávia Souza e Silvio Melhado: O mundo atualmente passa por transformações e estas fazem com que o recurso mais importante para a sociedade seja o conhecimento. Ou seja, a sociedade precisa estar organizada para a inovação e precisa saber lidar com o volume de informações que irão obter principalmente no âmbito corporativo. Uma solução que auxilia a sociedade com este quesito, são os sistemas de informação1. Segundo Sergio Junger, especialista em Gestão de Tecnologia da Informação: O principal benefício proporcionado pela tecnologia aos Sistemas de Informação é a habilidade de processar um enorme volume dados e informações, simultaneamente, tornando a disponibilização destas, praticamente imediata2. 1 Fonte: A importância dos sistemas de informação para a gestão das empresas. In: R2XSistemas. Disponível em http://www.r2xsistemas.com/blog_importancia_sistemas_gestao_05032015.html. Acessado 10/05/15. 2 Fonte: JUNGER, Sérgio. A organização e a importância dos Sistemas de Informação. Disponível em http://www.craes.org.br/arquivo/artigotecnico/sistemasdeinformacao3_3.pdf. Acessado em 12/05/15.
17 2.2 FERRAMENTAS3 Para a realização do site foram utilizadas as seguintes linguagens: CSS: é 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). 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. A principal função dessa versão é abolir as imagens de plano de fundo, bordas arredondadas, apresentar transições e efeitos para criar animações de vários tipos. HTML: é uma linguagem para estruturação e apresentação de conteúdo. Esta versão traz consigo importantes mudanças quanto ao papel do HTML no mundo da web, através de novas funcionalidades como semânticas e acessibilidade. Sua essência tem sido melhorar a linguagem com o suporte para as mais recentes multimídias. PHP: é uma linguagem que permite criar sites web dinâmicos, possibilitando uma interação com o usuário através de formulários, parâmetros da URL e links. A diferença dessa linguagem semelhantes a JavaScript é que o código PHP é executado no servidor, sendo enviado para o cliente apenas html puro. Desta maneira é possível interagir com banco de dados e aplicações existentes no servidor, com a vantagem de não expor o código fonte para o cliente. Isso pode ser útil quando o programa está lidando com senha ou qualquer tipo de informações confidenciais. SQL: é uma linguagem padrão de gerenciamento de dados que interage com os principais bancos de dados baseados no modelo relacional. 3 Fonte: PEREIRA, Isaac. Website Escola Profissionalizante Líder. 2014. Técnico em Informática Escola Técnica Dr. Solon Tavares, Guaíba, 2014.
18 MySQL: é um sistema gerenciador 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. Notepad++: é um editor de textos e códigos fontes completa que suporta as mais diversas linguagens de programação. Essa ferramenta foi utilizada para criar e editar códigos HTML, PHP, CSS e JavaScript. WAMPP: é um ambiente de desenvolvimento web do Windows. Ele permite que você crie aplicações web com Apache, PHP e um banco de dados MySQL. Paralelamente, phpmyadmin permite que você gerencie facilmente seu banco de dados. BOOTSTRAP: é um framework front-end que facilita a vida dos desenvolvedores web a criar sites com tecnologia mobile (responsivo). O Bootstrap possui uma diversidade de componentes (plugins) em JavaScript (jquery) que auxiliam o designer a implementar: tootlip, menu-dropdown, modal, carousel, slideshow, entre outros sem a menor dificuldade, apenas acrescentando algumas configurações no código, sem a necessidade de criar scripts e mais scripts.
19 3. METODOLOGIA Em entrevistas feitas com artesã Liliane dos Santos Jesinski, foram levantados os seguintes problemas: suas encomendas e vendas eram anotadas em um caderno simples, o que deixava a artesã extremamente sujeita a perda das informações, além de dificultar no momento da busca por dados, e ainda gastar muito papel. Outra questão que poderia trazer melhorias, era a divulgação dos produtos produzidos e vendidos. A partir disto, juntamente da artesã, foi elaborado um projeto para solucionar estes problemas. Para isto, foi desenvolvido o site Lylart s e.v.a, para divulgação e vendas de artesanatos. As funções que o sistema traz podem ser vistas no digrama de caso de uso (Figura 1): Figura 1: Modelo de Caso de Uso Para auxiliar na compreensão da interação do banco de dados com o sistema, foi projetado um Diagrama ER para representar o funcionamento do banco de dados (Figura 2):
20 Figura 2: Entidade de Relacionamento. O capítulo a seguir apresentará a interface gráfica do sistema e suas funcionalidades.
21 4. DEMONSTRAÇÃO Neste capítulo demonstra-se o funcionamento do sistema desenvolvido, através da apresentação gráfica. Ao iniciar o sistema, será apresentado ao usuário a tela de amostras (Figura 3), onde pode-se ver o slogan da empresa no topo, juntamente do menu de funções, na área lateral o menu de categoria dos produtos que estão sendo vendidos, e ao lado os produtos em si. Nesta página, o usuário poderá escolher um produto ao clicar sobre a foto do mesmo, o que resultará no redirecionamento a página que permite ao usuário fazer a encomenda do produto (Figura 4). Cada imagem mostra na sua legenda o preço do produto e o código que por ser preenchido automaticamente na página Fazer pedido, foi deixado a mostra para que o usuário possa ter a certeza do produto que está solicitando.
22 Figura 3: Tela inicial.
23 No topo está o slogan juntamente do menu principal, que contém o logotipo da empresa, e os links para página inicial, Informações, Postagens e Fale Conosco (figura 4). Figura 4: Menu principal Ao lado está o menu que apresenta as categorias dos produtos a serem vendidos (figura 5). Figura 5: Menu lateral, referente as categorias.
24 As páginas correspondentes as categorias, são semelhantes a página de amostras, mudando apenas o nome da categoria no topo e os produtos oferecidos. Na figura 6, pode-se observar a tela onde o cliente poderá efetuar o pedido informando seu nome completo, RG, CPF, endereço, número da casa/apto, bairro, CEP, cidade, estado, E-mail, telefone para contato e a quantidade de produtos que deseja. Além destes itens, há também as áreas de código do produto e categoria, que são preenchidas automaticamente pelo sistema, quando o usuário escolhe o produto. Há também o campo de descrição, onde o usuário tem a oportunidade de descrever algum detalhe especifico da sua compra, como por exemplo, uma boneca de cabelos ruivos ou coloridos. Na mesma página ainda existem informações sobre a forma de pagamento, que será por depósito bancário, além de trazer o endereço e número de contato da artesã para sanar quaisquer dúvidas que o cliente tenha sobre os produtos ou forma de pagamento.
25 Figura 6: tela de cadastrar pedido.
26 O link Informações do menu principal, é um espaço de informações ao cliente. Esta página contém informações sobre a artesã e também sobre os pedidos. (Figura 7): Figura 7: Tela de informações ao cliente.
27 Ainda no menu principal, há o link Fale Conosco, que possibilita ao usuário enviar uma mensagem para a artesã, que irá receber esta mensagem diretamente no seu E-mail. Basta o usuário preencher todos os campos (nome, E-mail, assunto e mensagem), e clicar no botão Enviar Mensagem, e a mensagem será enviada. Figura 8: Tela Fale Conosco.
28 Como a artesã possui uma página na rede social Facebook, onde divulga os seus trabalhos também, foi construído um espaço de interação entre as postagens realizadas na rede social para o site (figura 9). Figura 9: Tela de postagens.
29 Por questões de segurança, não foi acrescentado um link para login do administrador. Ao invés disso, o administrador deve entrar com o endereço <http://lylartsartesanatos.besaba.com/login.php> para logar no sistema (figura 10). Figura 10: Tela de login. Além disso, foi incluída a função Esqueceu a senha?, que ao ser solicitada, direciona ao formulário Recuperar senha (figura 11), onde, após ser informado o Email de administrador, é enviado um E-mail para este, com a senha cadastrada no sistema.
30 Figura 11: Tela para recuperação de senha. Após efetuar o login, a administradora é direcionada para a página de pedidos cadastrados (figura 12), onde é possível visualizar a lista de pedidos cadastrados, além de trazer links para as páginas de cada categoria. Figura 12: Tela de pedidos cadastrados.
31 Através dos links de cada categoria disponíveis na tela de pedidos cadastrados, é possível visualizar os produtos cadastrados, alterar ou excluí-los, ou ainda fazer um novo cadastro, todas as páginas são semelhantes, alterando apenas a categoria de cada uma (figura 13): Figura 13: Tela de cadastros da categoria 15 anos. A partir desta tela de visualização, existem as opções de novo cadastro (figura 14), alterar (figura 15), e deletar, cujo não necessita de uma tela, pois simplesmente deleta o cadastro do produto. Na tela de cadastro (figura 14), a administradora deverá completar as seguintes informações para cadastrar o seu produto: escolher a foto do produto correspondente, informar a categoria, uma breve descrição (palavra-chave) e o preço.
32 Figura 14: Novo cadastro de produto. Na tela Alterar (figura 15), os dados salvos aparecem na tela para serem alterados, com exceção do arquivo de imagem que representa de modo ilustrativo o produto. Figura 15: Tela alterar dados.
33 Estas opções estão disponíveis para todas as categorias, cujas telas são semelhantes. Em relação ao administrador, existem as telas de consultar os administradores registrados (figura 16), cuja página contém links para o cadastro de um novo administrador (figura 17), alteração dos dados do administrador (figura 18), ou para deletar um administrador cadastrado. Figura 16: Tela de registro de administradores Para o cadastro de um novo administrador, é necessário preencher o formulário na tela de cadastro de Administrador (figura 17), com os seguintes campos: nome, senha e E-mail. Figura 17: tela de cadastro de administrador.
34 A tela Alterar administrador (figura 18), fornece as informações já cadastradas no sistema para alteração. Figura 18: tela de alterar dados do administrador.
35 5. CONSIDERAÇÕES FINAIS Este projeto possibilitou aprender como um sistema de gerenciamento realmente funciona, trazendo benefícios não somente para o aprendizado da programação, mas também para a vida como um todo, auxiliando na forma de organização dos processos, o que o torna essencial para empresas de todos os níveis, sobretudo para microempresa, ao auxiliar na economia, organização, agilidade de processos e divulgação de serviços. Com este projeto foi possível perceber o quanto um sistema de gerenciamento é concreto e ligado aos mínimos detalhes para ter um bom funcionamento. Ficou perfeitamente claro, como em nenhum outro momento do curso, a lógica com que um sistema funciona. Este projeto também mostrou que não é possível elaborar um projeto apenas com o que os professores ensinam em sala de aula, mas sim que depende do aluno querer aprender e buscar informações a mais. Com isto aprendi também, em um ponto de vista acadêmico, que o aluno não deve se satisfazer apenas com o que o professor fala em sala de aula, mas sim, pesquisar sobre os conteúdos e sanar dúvidas desde o início do curso, buscar aprender cada detalhe que puder, pois os professores estão disponíveis para lhes atender.
36 REFERÊNCIAS BIBLIOGRÁFICAS PEREIRA, Isaac. Website Escola Profissionalizante Líder. Informática Escola Técnica Dr. Solon Tavares, Guaíba, 2014. 2014. Técnico em A importância dos sistemas de informação para a gestão das empresas. In: R2XSistemas. Disponível em http://www.r2xsistemas.com/blog_importancia_sistemas_gestao_05032015.html. Acessado 10/05/15. JUNGER, Sergio. A organização e a importância dos Sistemas de Informação. Disponível em http://www.craes.org.br/arquivo/artigotecnico/sistemasdeinformacao3_3.pdf. Acessado em 12/05/15. LOPES, S. O que é PHP. In: OFICINA DA NET. Disponível em: < http://www.oficinadanet.com.br/artigo/659/o_que_e_php >. Acessado em: 10/05/15 PEREIRA, Ana Paula. O que é CSS?. In: TECMUNDO. Disponível em: < http://www.tecmundo.com.br/programacao/2705-o-que-e-css-.htm >. Acessado em: 10/05/15. Significado de SQL. In: Significados.com.br. Disponível http://www.significados.com.br/sql/ >. Acessado em: 10/05/15. Wikipédia. CSS. In: Wikipédia, a enciclopédia livre. http://pt.wikipedia.org/wiki/css >. Acessado em: 10/05/15. Disponível em: em: < < Wikipédia. HTML5. In: Wikipédia, a enciclopédia livre. Disponível em: < http://pt.wikipedia.org/wiki/html5 >. Acessado em: 10/05/15. WampServer. WAMPSERVER, um ambiente de desenvolvimento. In: WampServer. Disponível em: < http://www.wampserver.com/en/ >. Acessado em 10/05/15.