Escola Básica e Secundária de Salvaterra de Magos RELATÓRIO CRÍTICO Prova de Aptidão Profissional Rafael Letra nº 11 12º H Ricardo Santos nº 12 12º H Curso Profissional Técnico de Gestão e Programação de Sistemas Informáticos Salvaterra de Magos Junho de 2018
Escola Básica e Secundária de Salvaterra de Magos Rafael Letra nº 11 12º H Ricardo Santos nº 12 12º H Curso Profissional Técnico de Gestão e Programação de Sistemas Informáticos SUMÁRIO Relatório das atividades do Projeto Pizzaria Comme Chez Soi desenvolvido como requisito parcial dos módulos curriculares, supervisionado pelos Prof. António Andrade, José Nunes, Sónia Santos, Fátima Ferreira, no curso Técnico de Gestão e Programação de Sistemas Informáticos Salvaterra de Magos Junho de 2018 2
Agradecimentos Gostaríamos de agradecer aos nossos colegas que nos ajudaram neste projeto direta ou indiretamente, na nossa vida profissional e também pessoal. Também temos que agradecer aos nossos professores da Escola Secundária de Salvaterra de Magos por nos terem ajudado a adquirir conhecimentos necessários para a concretização deste projeto, sempre disponíveis para nos ajudar e por terem criado todas as condições necessárias para estes três anos de curso. 3
Indice Conteúdo Agradecimentos... 3 Resumo... 6 Introdução... 7 Ferramentas utilizadas... 8 WebSite... 9 Base de dados... 10 Página Inicial... 11 Menu... 12 Carrinho das encomendas... 13 Crie a sua pizza... 14 Contacto... 15 Log in... 16 Registo... 17 Sem início de sessão - logged out... 18 Com início de sessão - logged in... 19 Perfil de utilizador... 20 Histórico de encomendas... 21 Alterar palavra passe... 22 Sair... 23 Recuperar Palavra Passe... 24 Back Office Login... 25 Página Inicial do Admin... 26 Encomendas... 27 Pizzas... 28 Lista de Pizzas... 29 Adicionar uma nova pizza... 30 Utilizadores... 31 Lista de clientes... 32 Lista de clientes bloqueados... 33 Staff... 34 Lista de membros staff... 35 4
Adicionar um administrador... 36 Sugestões... 37 Editar Perfil-Informações Pessoais... 38 Alterar palavra passe... 39 Conclusão... 40 5
Resumo Este trabalho foi elaborado no âmbito do projeto de aptidão profissional, do Curso Técnico de Gestão e Programação de Sistemas Informáticos, pelos alunos Rafael Letra e Ricardo Santos, da Escola Básica e Secundária de Salvaterra de Magos com o objetivo de criar um website que se encontra dividido em duas partes o back office que permite aos funcionários da pizzaria Comme Chez Soi observarem dados relativos às encomendas e aos seus clientes e o front office que visa promover e potenciar as vendas da pizzaria. A aplicação foi desenvolvida em HTML com integração com PHP, utilizando o Atom e a base de dados definida em SQL. A criação da base de dados foi feita utilizando o PHPMyAdmin. 6
Introdução A nossa Prova de Aptidão Profissional tem o nome de Pizzaria Comme Chez Soi, sendo este o nome de uma pizzaria localizada em Salvaterra de Magos, Santarém. Um elemento do grupo já era cliente regular desta pizzaria, mas deparou-se com um sistema de encomendas primitivo, que estava a penalizar a mesma. Após alguns dias de diálogo a nossa opinião estava traçada, em ajudar esta pizzaria. O projeto baseou-se no desenvolvimento de um website dividido em back office e front office que visa publicitar a pizzaria. A primeira tarefa do nosso projeto foi a criação da base de dados, na qual surgiram algumas dificuldades mas rapidamente ultrapassadas. Algo que aconteceu em todo o projeto, mas com a perserverança do grupo e ajuda dos nossos docentes os objetivos foram concluídos. Na elaboração da prova de aptidão profissional foram utilizamos vários softwares já conheçidos do curso de Gestão e Programação de Sistemas Informaticos tais como: cdobe Photoshop C5.1, Atom e o Filezilla que nos permitiu trabalhar online num servidor. 7
Ferramentas utilizadas Para a realização da Prova de Aptidão Profissional, utilizamos o Adobe Photoshop CS5.1 para editar imagens. Como se trata de uma pizzaria necessita de uma base de dados, e para isso foi usado o MySql, XAMPP, onde foi guardada a nossa base de dados com os dados da mesma. O PHP que é uma linguagem de script de código livre de uso geral, muito utilizada, e especialmente adequada para o desenvolvimento websites e que pode ser encaixada dentro do HTML. O JavaScript que é uma linguagem de programação interpretada. Foi originalmente implementada como parte dos navegadores web para que scripts pudessem ser executados do lado do cliente. O CSS foi utilizado para adicionar estilos às páginas do website. Em vez de colocar o código dos estilos dentro da página, o CSS cria um link para uma página que contém os estilos. O Ajax foi utilizado para tornar as páginas mais interativas com os utilizadores utilizando solicitações assíncronas de informações. O Bootstrap é uma framework web com código aberto, que serve para desonvolver componentes de front end usando HTML, CSS e JavaScript. 8
WebSite No desenvolvimento do website, teve que ser feito um trabalho de pesquisa de outros sites relativos ao tema pizzaria porque não possuíamos informações suficientes deste tema. Encontramos este template que de imediato nos agradou imenso pois era responsivo e user friendly. Este foi o nosso ponto de partida para o desenvolvimento deste website. Figura 1 e 2 - Template Original 9
Base de dados Na realização da base de dados começámos por pedir algumas informações à pizzaria tais como as pizzas vendidas, os preços, os tamanhos e a possibilidade de o cliente criar a sua própria pizza, onde retirámos os dados necessários para começar a construção da base de dados começando por utilizar um dos modelos que aprendemos em aula, o modelo ER. De seguida realizámos as ligações das tabelas resultando a base de dados final. Até chegarmos a este resultado tivemos que fazer alguns ajustes, o que nos fez parar a meio do desenvolvimento do website para acertar pormenores importantes. Enquanto realizávamos a base de dados começámos a pensar como iríamos realizar o BackOffice, a zona administrativa do site, onde os proprietários da pizzaria podem gerir os seus clientes, pizzas e encomendas. 10
Página Inicial Ao ser encontrado o template tivemos algumas dúvidas e algumas diferenças de opinião sobre o que iria conter esta página. Após acertadas as divergências avançámos e o resultado final foi este: Figura 3 Página Inicial 11
Menu O desenvolvimento desta página não estava a correr muito bem. Sempre que resolviamos um problema apareçiam logo a seguir mais dois. Então decidimos voltar a fazer esta página do zero mas com os conhecimentos adquiridos anteriormente esta página foi rápidamente feita. O utilizador observa as pizzas que estão inseridas na base de dados, os tamanhos possiveis, quantidades e os preços das mesmas. Figura 4 Página Menu 12
Carrinho das encomendas O desenvolvimento do carrinho começou por ser algo dificil, mas com alguma pesquisa foi concluido com sucesso, nele os utilizadores podem observar a quantidade, o nome da pizza, o tamanho, o preço de cada pizza, o preço total a pagar, botões para que cada pizza possa ser apagada e o botão de encomendar para finalizar a encomenda. 13
Crie a sua pizza O desenvolvimento desta página acabou por não ser o pretendido. O objetivo era o cliente fazer a sua própria pizza (escolher ingredientes) e encomendar online, acabou por não ser possivel devido a dificuldades e o tempo não estava a nosso favor. Tornou-se então uma página informativa onde o cliente observa os ingredientes disponiveis e liga para a pizzaria para realizar a encomenda da mesma. Figura 6 Página Crie a sua Pizza 14
Contacto O desenvolvimento desta página acabou por ser o mais fácil, pois um membro do grupo já tinha realizado um mapa com localização então foi adaptar o que já estava feito. Podemos observar também a morada da pizzaria, os seus contactos e um espaço onde os utilizadores podem escrever sugestões, perguntas, etc. Figura 7 - Página Contacto 15
Log in Esta é a página de início de sessão. Para aceder à funcionalidade das encomendas do website é necessário um utilizador autenticado. Caso o utilizador não esteja registado, este é redirecionado para a página de registo. A estética não é o forte deste grupo então decidimos não modificar muito, para não estragar o que já se encontrava apelativo visualmente. Figura 8 Login 16
Registo Nesta página de registo será pedido ao utilizador o nome, o apelido, o seu número de telemóvel, o seu email, uma palavra passe e a confirmação da palavra passe. Depois de concluir o seu registo o utilizador é direcionado para a página log in, para iniciar sessão com os seus dados. Figura 9 - Registo 17
Sem início de sessão - logged out Se o utilizador não se encontrar com a sua conta iniciada só poderá visualizar as opções entrar e registar, e na página contacto terá que preencher os campos do seu nome e email. Figura 10 e 11 Barra de registar e entrar ; Contacta-nos 18
Com início de sessão - logged in Se o utilizador tiver a sua sessão iniciada poderá visualizar uma zona onde se encontram três operações que pode efetuar: editar o perfil, o Histórico de encomendas realizadas por este utilizador, o alterar a palavra passe e o carrinho para efetuar as encomendas. O utilizador poderá enviar um comentário. Figura 12 e 13 Utilizador ; Carrinho 19
Perfil de utilizador O perfil contém os dados do utilizador através de uma pesquisa à base de dados. Estes dados podem ser alterados, se assim o utilizador pretender e também colocar uma foto se assim o entender. Figura 14 Página Perfil 20
Histórico de encomendas O utilizador visualiza as suas encomendas que estão colocadas numa tabela com os campos mais importantes das mesmas (a quantidade, o nome, o tamanho, a data e hora de entrega e o total a pagar). Pode também fazer pesquisas pelos diversos campos da tabela. Figura 15 Página Histórico de Encomendas 21
Alterar palavra passe O utilizador visualiza o seu email e tem que preencher a sua senha atual, a sua nova senha e confirmar a nova senha. Figura 16 Página Perfil- Modificar senha 22
Sair Ao clicar neste botão é chamada a página logout.php que termina a sessão do cliente e envia-o para a página principal. Figura 17 Menu de utilizador 23
Back Office e Front Office - Recuperar Palavra Passe Nesta página o cliente coloca o email da conta que não se lembrar a palavra passe e depois irá receber nesse email a opção de colocar uma nova palavra passe. 24
Back Office Login Esta é a página de início de sessão dos administradores. Nesta página só podem entrar utilizadores com permissões de administrador. A estética não é o forte deste grupo então decidimos não modificar muito, para não estragar o que já se encontrava apelativo visualmente. Figura 18 Back Office Login 25
Página Inicial do Admin Nesta página podemos observar as operações que o administrador pode realizar tais como visualizar os dados dos utilizadores, da staff, das pizzas, das encomendas e sugestões dos clientes, gráficos relacionados com as pizzas vendidas e o número de clientes e encomendas. Também pode ser observado o valor total de vendas, o número de encomendas do dia já realizadas e as visualizações que o website obteve. Figura 19 Página Inicial Back Office 26
Encomendas Aqui o administrador pode visualizar o número da encomenda, o nome do cliente que a realizou, o estado da encomenda (por defeito está no estado em processamento), duas ações que são visualizar e cancelar a encomenda e um local de pesquisas que funciona com as três informações descritas anteriormente.existem ainda três estados que são em processamento que esta assinalado a laranja,concluido assinalado a verde e cancelado assinalado a vermelho. Figura 20 Página Encomendas 27
Pizzas Na opção pizzas o administrador tem duas opções: a lista de pizzas atual ou adicionar uma nova pizza. Figura 21 Menu Pizzas 28
Lista de Pizzas Nesta página o administrador observa a foto, o nome e a descrição que é o resultado de uma pesquisa à base de dados. Contém ainda duas opções que são atualizar a pizza e apagar a pizza. O administrador pode também pesquisar pelos diferentes campos acima descritos. Figura 22 Página Lista de Pizzas 29
Adicionar uma nova pizza Nesta página o administrador pode inserir uma nova pizza preenchendo 3 campos: a foto, o nome da pizza e a descrição/ingredientes da mesma. Estes campos quando executados criam uma nova pizza na tabela pizzas que é mostrada na página do menu. Figura 23 e 24 Página adicionar uma pizza ; Pizza festiva (este) 30
Utilizadores Na opção utilizadores o administrador tem duas opções: a lista de clientes e uma lista de clientes bloqueados. Figura 25 Menu Utilizadores 31
Lista de utilizadores Nesta página o administrador observa o nome e o apelido dos clientes e tem as opções visualizar, onde aparecem todos os dados desse cliente, e o bloquear utilizador. Também pode fazer pesquisas em relação ao nome e ao apelido do utilizador. Figura 26 e 27 Página Lista de clientes e Dados do cliente 32
Lista de clientes bloqueados Nesta página o administrador visualiza uma lista de clientes bloqueados podendo observar o nome e o apelido dos mesmos e é apresentada a opção desbloquear utilizador, ou seja, o utilizador volta para a lista de clientes, e um local em que pode efetuar pesquisas em relação ao nome e ao apelido do cliente bloqueado. Figura 28 e 29 Lista de clientes bloqueados 33
Staff Na opção staff o administrador tem duas opções: a lista de membros staff e a opção de adicionar um novo administrador. Figura 30 Menu Staff 34
Lista de membros staff Nesta página é apresentada uma lista com o nome e o apelido dos administradores e as opções de visualizar onde aparecem todos os dados desse membro da staff e o apagar. Figura 31 e 32 Lista de membros staff e dados membro staff 35
Adicionar um administrador Nesta página o administrador pode inserir um novo administrador preenchendo o nome, o apelido, o telemóvel, a morada, a localidade, o email, a senha e a confirmação da senha e uma foto. Figura 33 Página Adicionar membro staff 36
Sugestões Nesta página o administrador observa as sugestões feitas pelos utilizadores sendo apresentado o nome do utilizador e a data em que foi enviada. Figura 34 e 35 Menu Sugestoes e Sugestões 37
Editar Perfil-Informações Pessoais Nesta página o administrador pode aceder e alterar os dados da sua conta: o nome, o apelido, o telemóvel, a morada, a localidade e a foto. Figura 36 Página Editar Perfil 38
Alterar palavra passe Para mudar a sua palavra passe, o administrador tem que preencher a sua senha atual, a sua nova senha e confirmar a nova senha. Figura 37 Página Editar Senha 39
Conclusão O nosso projeto sofreu muitas alterações desde o primeiro esboço até à versão atual. Começámos a desenvolver um site e um programa em c# para a parte administrativa, mas depois decidimos, em grupo, que iria ficar tudo online (front office e back office) para facilitar o acesso à parte administrativa. Durante o desenvolvimento da PAP tivemos muitos problemas e muitas dificuldades. Quando resolvíamos um problema apareciam dois problemas novos, mas isso é normal num projeto desta dimensão. Os nossos maiores problemas de início foi encontrar um template que nos interessasse a nivel estético porque nenhum dos membros do grupo tem jeito para essa parte. Tivemos alguns problemas com a base de dados, pois no início funcionava tudo, estava tudo a correr de acordo o previsto, tivemos que realizar alguns ajustes. Outro grande problema foi na página menu que não conseguiamos que as pizzas fossem adicionadas ao carrinho, tendo que ser refeito a pouco tempo do fim. 40