portal web - gestão de alunos de um jardim de...
TRANSCRIPT
Portal WEB - Gestão de Alunos de um Jardim de Infância
Jorge Lopes nº29761
Nuno Monteiro nº29760
Trabalho realizado sob a orientação de
Orientador - Professora Isabel Lopes
Engenharia Informática
2014/2015
iii
PORTAL WEB - Gestão de Alunos de um Jardim de
Infância
Relatório da UC de Projeto
Licenciatura em Engenharia Informática
Escola Superior de Tecnologia e Gestão
Jorge Lopes
Nuno Monteiro
Setembro/2015
iv
A Escola Superior de Tecnologia e Gestão não se responsabiliza pelas opiniões expressas
neste relatório.
v
Certifico que li este relatório e que na minha opinião, é adequado no seu
conteúdo e forma como demonstrador do trabalho desenvolvido no
âmbito da UC de Projeto.
___________________________________________
Isabel Maria Lopes - Orientador
Certifico que li este relatório e que na minha opinião, é adequado no seu
conteúdo e forma como demonstrador do trabalho desenvolvido no
âmbito da UC de Projeto.
___________________________________________
Arguente
Aceite para avaliação da UC de Projeto
vi
vii
Agradecimentos
Em primeiro lugar queremos agradecer aos nossos pais por que sem eles, este momento que é
o culminar de um projeto de vida, não seria possível. Gostaríamos de agradecer pela
paciência, contributo emocional e sacrifícios prestados, com o intuito de nos manter sempre
no caminho certo e nos levar a concretizar uma das maiores metas que nos foi proposta, a
graduação num curso superior. Queremos agradecer à orientadora, Professora Isabel Maria
Lopes, ao Professor José Exposto e Professor José Adriano que lecionaram as Unidades
Curriculares de Desenvolvimento Web e Base de Dados, inspiradoras e impulsionadoras do
interesse pelo estudo e a base para a conceção de todo o nosso projeto. Agradecimento que se
extende aos demais Professores do curso pela solida preparação nesta área do conhecimento.
Aos alunos e companheiros, muito obrigado!
viii
ix
Resumo
O nosso projeto consiste na elaboração de um portal Web de um Jardim de Infância que sente
necessidade de criar uma página WEB/aplicação mais funcional e prática do ponto de vista
dos utilizadores, funcionários e administradores. O portal tem ainda informação sobre a
localização, horário de funcionamento e contactos. Isto tudo está incluído na front-end
(página dedicada ao utilizador). No back-end, área responsável pela administração, o
administrador tem o poder de gerir alunos, funcionários e conteúdos tais como ementas,
notícias, galerias, entre outros. Para a sua construção recorreu-se ao uso do MySQL como
suporte de base de dados. HTML, PHP e JavaScript foram utilizados para a produção e
visualização da página WEB. Foram ainda implementados mecanismos de segurança e
privacidade como encriptação dos quais falaremos mais adiante com mais profundidade.
Palavras-chave: PHP, SQL, HTML, XAMPP, JavaScript
x
xi
Abstract
Our project consists in developing a Website for a kindergarten which feels the need to create
a Web page/application more functional and practical from the users, staff and administrators
point of view. The portal also has information on the location, business hours and contact
details. All this is included in the front-end (page dedicated to the user). On the back-end, area
responsible for the management, the administrator has the power to manage the students, staff
and content such as menus, news, galleries, among others. For its construction MySQL was
used as database support.
For the design and format of the web page HTML, PHP and JavaScript were used. Security
and privacy mechanisms were also configured such as encryption which will be described
later in more depth.
Keywords: PHP, SQL, HTML, XAMPP, JavaScript
xii
xiii
Conteúdo
1 Introdução .......................................................................................................................... 1
1.1 Contexto do Projeto ...................................................................................................... 1
1.2 Objetivos do Projeto ..................................................................................................... 1
1.3 Enquadramento e Estrutura do Relatório ...................................................................... 2
2 Planeamento ....................................................................................................................... 3
2.1 Levantamento e especificação dos requisitos ............................................................... 4
2.2 Análise do sistema ........................................................................................................ 4
2.3 Implementação do sistema ............................................................................................ 4
2.4 Teste de verificação e validação ................................................................................... 4
2.5 Produção da documentação ........................................................................................... 4
3 Tecnologias e ferramentas utilizadas ............................................................................... 5
3.1 Tecnologias Utilizadas .................................................................................................. 5 3.1.1 HTML5 ................................................................................................................... 5
3.1.2 CSS ......................................................................................................................... 6 3.1.3 PHP ......................................................................................................................... 6
3.1.4 SQL ........................................................................................................................ 7 3.1.5 JavaScript ............................................................................................................... 7
3.2 Ferramentas utilizadas .................................................................................................. 7 3.2.1 NetBeans ................................................................................................................ 7
3.2.2 GIMP2 .................................................................................................................... 8
3.2.3 MySQL Workbench ............................................................................................... 8
3.2.4 XAMPP .................................................................................................................. 9 3.2.5 Firebug ................................................................................................................... 9 3.2.6 Astah ..................................................................................................................... 10
4 Análise do Sistema ........................................................................................................... 11
4.1 Análise da solução pretendida .................................................................................... 11
4.2 Especificação dos requisitos do portal ........................................................................ 11 4.2.1 Requisitos funcionais ........................................................................................... 11 4.2.2 Requisitos não funcionais ..................................................................................... 11
4.3 Tipos de utilizadores ................................................................................................... 12
4.4 Diagramas de caso de uso ........................................................................................... 12
4.5 Diagramas E/R (Entidade/Relação) ............................................................................ 16
5 Implementação do sistema .............................................................................................. 19
14
5.1 Estrutura da Aplicação ................................................................................................ 19
5.2 Desenho da Aplicação ................................................................................................. 19
5.3 Áreas Principais – Área Utilizador Comum ............................................................... 21
5.4 Áreas Principais – Área Utilizador Registado ............................................................ 25
5.5 Áreas Principais – Área Educador .............................................................................. 28
5.6 Áreas Principais – Área Funcionário .......................................................................... 36
5.7 Áreas Principais – Área Administrador ...................................................................... 37
6 Conclusão ......................................................................................................................... 45
7 Referências bibliográficas ............................................................................................... 46
xv
xvii
Lista de Figuras
Figura 3.1 - HTML Logo ........................................................................................................... 5 Figura 3.2 - CSS Logo ................................................................................................................ 6 Figura 3.3 - PHP Logo ............................................................................................................... 6
Figura 3.4 - SQL Logo ............................................................................................................... 7 Figura 3.5 - JavaScript Logo ...................................................................................................... 7 Figura 3.6 - NetBeans Logo ....................................................................................................... 8 Figura 3.7 - GIMP Logo ............................................................................................................. 8
Figura 3.8 - MySQL Workbench Logo ...................................................................................... 9 Figura 3.9 - XAMPP Logo ......................................................................................................... 9 Figura 3.10 - Firebug Logo ........................................................................................................ 9 Figura 3.11 - Astah Logo ......................................................................................................... 10
Figura 4.1 - Diagrama Casos de Uso Utilizador Comum ........................................................ 13 Figura 4.2 - Diagrama Casos de Uso Utilizador Registado ..................................................... 13
Figura 4.3 - Diagrama Casos de Uso Funcionário ................................................................... 14 Figura 4.4 - Diagrama Casos de Uso Educador ....................................................................... 14
Figura 4.5 - Diagrama Casos de Uso Administrador ............................................................... 15 Figura 4.6 - Diagrama Entidade/Relação ................................................................................. 16 Figura 5.1 - Layout MainPage .................................................................................................. 20
Figura 5.2 - Layout Área Utilizador Comum ........................................................................... 21 Figura 5.3 - Top Menu ............................................................................................................. 21
Figura 5.4 - Tópico ‘O Jardim’ – Informação sobre o Jardim ................................................. 22 Figura 5.5 - Tópico ‘Ementa’ – Ementa das próximas semanas .............................................. 22 Figura 5.6 - ‘Localização/Contatos’ – Localização através de morada e mapa ....................... 23
Figura 5.7 - Side Menu para Login e Registo .......................................................................... 24
Figura 5.8 - Ficha de Registo ................................................................................................... 24 Figura 5.9 - Login do Utilizador .............................................................................................. 24
Figura 5.10 - Exemplo de encriptação em MD5 ...................................................................... 25 Figura 5.11 - Layout Área do Utilizador Registado ................................................................. 25 Figura 5.12 - Side Menu Área Utilizador Registado ................................................................ 26 Figura 5.13 - Ficha pré-inscrição ............................................................................................. 27 Figura 5.14 – Mensalidades ..................................................................................................... 27
Figura 5.15 – Comentários ....................................................................................................... 28 Figura 5.16 - Layout Área Educador ........................................................................................ 29 Figura 5.17 - Side Menu Área Educador .................................................................................. 30 Figura 5.18 - Lista de Alunos ................................................................................................... 31 Figura 5.19 - Valências e respetivos Alunos ............................................................................ 31
Figura 5.20 - Marcar ou Remover Presenças ........................................................................... 32
Figura 5.21 - Lista dos alunos com o Histórico de presenças do aluno Jorge Lopes ............... 33
Figura 5.22 - Lista de Presenças de todos os alunos num mês à escolha ................................. 34 Figura 5.23 - Adicionar fotos à Galeria .................................................................................... 34 Figura 5.24 - Adicionar Notícias e Atividades ......................................................................... 35 Figura 5.25 - Galeria de Fotos .................................................................................................. 35 Figura 5.26 - Layout da Área Funcionário ............................................................................... 36
18
Figura 5.27 - Secção Editar Ementa ......................................................................................... 36 Figura 5.28 - Secção Perfil ....................................................................................................... 37 Figura 5.29 - Layout Administrador ........................................................................................ 38
Figura 5.30 - Side Menu Administrador .................................................................................. 39 Figura 5.31 - Secção Adicionar Aluno ..................................................................................... 40 Figura 5.32 - Secção Gerir Turmas .......................................................................................... 40 Figura 5.33 - Subsecção Horários Funcionários ...................................................................... 41 Figura 5.34 - Subsecção Horários Educadores ......................................................................... 41
Figura 5.35 - Subsecção Horários Valências ........................................................................... 42 Figura 5.36 - Secção Administração ........................................................................................ 42 Figura 5.37 - Campo “Tipo” na BD ......................................................................................... 43
Figura 5.38 - Aceitar Pré-Inscrição .......................................................................................... 44 Figura 5.39 - Botão Procurar Aluno ......................................................................................... 44
xix
xxi
Lista de Abreviações
HTML - HyperText Markup Language, Linguagem com marcas de hipertexto;
CSS - Cascate Style Sheet;
PHP - Hypertext Preprocessor;
MySQL - My Structured Query Language, Sistema de gestão de base de dados;
XAMPP - O nome provem da abreviação de X (para qualquer dos diferentes sistemas
operativos), Apache, MySQL, PHP, Perl;
BD – Base de dados;
xxii
1
Capítulo 1
1 Introdução
Neste primeiro capítulo, efetua-se a apresentação do projeto. É descrito o contexto do projeto,
os seus objetivos e a forma como se planeou a realização do mesmo.
1.1 Contexto do Projeto
O trabalho apresentado neste relatório foi desenvolvido no âmbito da unidade
curricular de Projeto do terceiro ano da Licenciatura em Engenharia Informática do Instituto
Politécnico de Bragança, tendo como orientadora a professora Isabel Maria Lopes.
O projeto atribuído, desenvolvimento de um portal Web de um Jardim de Infância,
parte da necessidade de otimizar os serviços de gestão de alunos, proporcionando aos seus
funcionários maior facilidade nas tarefas relativas às funções que desempenham, divulgação
de informações úteis ao público em geral acerca da atividade do estabelecimento.
1.2 Objetivos do Projeto
O objetivo é criar uma aplicação que permita a gestão dos alunos que frequentam um
Jardim de Infância. Essa gestão passa pela inscrição dos alunos nos três anos possíveis,
dependendo da sua idade. A aplicação irá ainda permitir o controlo do pagamento de
mensalidades, por aluno, de acordo com a frequência de diversas atividades. Deverá também
disponibilizar um calendário de atividades para todo o ano letivo.
2
1.3 Enquadramento e Estrutura do Relatório
Feita uma exaustiva investigação em websites relacionados com os objetivos
propostos, desenvolvidos os wireframes, traçado o desenho da base de dados e o diagrama de
casos de uso do sistema, deu-se início à fase de implementação.
Este relatório é composto por seis capítulos ficando estruturado da seguinte forma:
O primeiro capítulo proporciona ao leitor o enquadramento do tema e a questão de
partida. São apresentados os objetivos a concretizar bem como a motivação para o
desenvolvimento do projeto.
No segundo capítulo foca o plano delineado para o processo de construção do portal
Web de maneira a orientar o trabalho para que o objetivo final seja o melhor possível.
No capítulo seguinte é efetuado um pré-desenvolvimento da aplicação pretendida bem
como as tecnologias que foram utilizadas no desenvolvimento deste projeto. São
demonstrados os diagramas de suporte ao desenvolvimento da aplicação.
O quarto capítulo descreve todo o processo desde a criação à elaboração e
implementação do portal.
O quinto capítulo resulta da análise dos resultados obtidos após a produção do trabalho
desenvolvido de acordo com o descrito na introdução.
O sexto e último capítulo apresentada a conclusão do projeto concebido.
3
Capítulo 2
2 Planeamento
Para um planeamento sólido e conciso, com o objetivo do melhor resultado possível,
procedemos ao estudo do estado de arte. Esta análise e pesquisa passou pela observação e
recolha de informações em sites de igual interesse tais como www.obarquinho.pt,
http://www.bebelux-infantario.com, www.opetiz.pt, www.mundodacrianca.pt e
www.youngenglandkindergarten.co.uk. As principais informações recolhidas foram,
nomeadamente, funcionalidades básicas e essenciais, funcionalidades adicionais, design e
apresentação.
Após a recolha de informações iniciou-se o processo de análise, de forma a identificar
as funcionalidades em falta com o intuito de melhorar as já existentes. Depois de se efetuar a
modelação do sistema a ser desenvolvido seguiu-se um estudo para determinar o tipo de
tecnologias que iriam ser utilizadas. Após a instalação e configuração dessas tecnologias,
passámos à criação da base de dados que dá suporte à aplicação e procedemos à elaboração da
interface da aplicação.
A realização deste projeto passou pelas seguintes etapas:
1. Levantamento e especificação dos requisitos;
2. Análise do sistema;
3. Implementação;
4. Testes de verificação e validação;
5. Produção da documentação.
De seguida será efetuada uma explicação mais minuciosa de cada uma das etapas.
4
2.1 Levantamento e especificação dos requisitos
Estudo e levantamento de requisitos;
Identificação de funcionalidades e definição de conteúdos;
Escolha do layout a ser utilizado.
2.2 Análise do sistema
Pesquisa das tecnologias utilizadas;
Modelação do sistema a desenvolver.
2.3 Implementação do sistema
Criação do suporte de base de dados;
Elaboração do layout;
Desenvolvimento do sistema.
2.4 Teste de verificação e validação
Testes para avaliar a integridade do sistema.
2.5 Produção da documentação
Elaboração do relatório.
5
Capítulo 3
3 Tecnologias e ferramentas utilizadas
Para a conceção deste projeto foi necessário o uso de diversas linguagens e uma
aprendizagem mais aprofundada das mesmas. Apresentaremos de forma breve e concisa o
papel de cada uma das linguagens e a sua utilidade.
3.1 Tecnologias Utilizadas
3.1.1 HTML5
HTML é a sigla de HyperText Markup Language, expressão inglesa que significa
”Linguagem de Marcação de Hipertexto”. Consiste numa linguagem de marcação utilizada
para produção de páginas na web permitindo a criação de documentos que podem ser lidos
em praticamente qualquer tipo de computador e transmitidos pela internet.
Para escrever documentos HTML não é necessário mais do que um editor de texto
simples e conhecimento dos códigos que compõem a linguagem. Os códigos (conhecidos com
o tags) servem para indicar a função de cada elemento da página Web. Os tags funcionam
como comandos de formatação de textos, formulários, links (ligações), imagens, tabelas, entre
outros.
Os browsers (navegadores) identificam as tags e apresentam a página conforme está
especificada. Um documento em HTML é um texto simples, que pode ser editado no Bloco
de Notas (Windows) ou Editor de Texto (Mac) e transformado em hipertexto.[1]
Figura 3.1 - HTML Logo
6
3.1.2 CSS
CSS é a designação de Cascading Style Sheets e é uma linguagem que permite
formatar documentos estruturados, como é o caso do HTML e XML. Permite por exemplo
formatar o tipo, ou cor de uma fonte de texto, definir uma imagem de fundo. Com o uso de
CSS existe uma separação entre o conteúdo propriamente dito e a estética de uma página
Web, sendo um padrão recomendado pela W3C.[2]
Figura 3.2 - CSS Logo
3.1.3 PHP
PHP (um acrônimo recursivo para "PHP: Hypertext Preprocessor", originalmente
Personal Home Page) é uma linguagem de interpretação livre, usada originalmente apenas
para o desenvolvimento de aplicações presentes e atuantes no lado do servidor, capazes de
gerar conteúdo dinâmico na World Wide Web. Figura entre as primeiras linguagens passíveis
de inserção em documentos HTML, dispensando em muitos casos o uso de arquivos externos
para eventuais processamentos de dados. O código é interpretado no lado do servidor pelo
módulo PHP, que também gera a página web a ser visualizada no lado do cliente. A
linguagem evoluiu, passou a oferecer funcionalidades em linha de comando, e além disso,
ganhou características adicionais, que possibilitaram usos adicionais do PHP, não
relacionados a web sites. [3]
Figura 3.3 - PHP Logo
7
3.1.4 SQL
O SQL – Structured Query Language – como o próprio nome indica permite a
pesquisa estruturada de elementos de uma base de dados. É uma linguagem simples e fácil de
utilizar, que permite efetuar operações como inserir, alterar e eliminar informações de uma
base de dados relacional. [4]
Figura 3.4 - SQL Logo
3.1.5 JavaScript
JavaScript é uma linguagem clientside, incorporada num documento HTML. Ou seja é uma
linguagem que permite a execução de comandos do lado do cliente. Permite por exemplo a
validação de dados por parte do cliente. No projeto foi utilizada, por exemplo, para validar a
inserção de um e-mail, o uso de expressões regulares. [5]
Figura 3.5 - JavaScript Logo
3.2 Ferramentas utilizadas
3.2.1 NetBeans
O NetBeans IDE é um ambiente de desenvolvimento integrado, gratuito e de código
aberto para criadores de software nas linguagens Java, C, C++, PHP, Groovy, Ruby, entre
outras. O IDE é executado em muitas plataformas, como Windows, Linux, Solaris e MacOS.
8
O NetBeans IDE oferece aos seus utilizadores ferramentas necessárias para desenvolver
aplicativos profissionais de desktop, empresariais, Web e móveis multiplataformas. [6]
Figura 3.6 - NetBeans Logo
3.2.2 GIMP2
GIMP (GNU Image Manipulation Program) é um programa open-source voltado
principalmente para a criação e edição de imagens e em menor escala para o desenho vetorial.
Sendo uma alternativa gratuita ao Adobe Photoshop, o aplicativo reúne uma série de recursos
indicados quer para amadores, quer para profissionais.
Mais uma vez a sua escolha reflete a preocupação de utilizar software livre. [7]
Figura 3.7 - GIMP Logo
3.2.3 MySQL Workbench
MySQL Workbench é uma ferramenta gráfica para modelagem de dados, integrando
criação e designer. A ferramenta possibilita trabalhar diretamente com objetos schema, além
de fazer a separação do modelo lógico do catálogo de base de dados.
Toda a criação dos relacionamentos entre as tabelas pode ser baseado em chaves
estrangeiras. Outro recurso que a ferramenta possibilita é realizar a engenharia reversa de
esquemas de base de dados, bem como gerar todos os scripts em SQL. [8]
9
Figura 3.8 - MySQL Workbench Logo
3.2.4 XAMPP
É um servidor independente de plataforma, software livre, que consiste principalmente
na base de dados MySQL, o servidor web Apache e os interpretadores para linguagens de
script: PHP e Perl. O nome provem da abreviação de X (para qualquer dos diferentes sistemas
operativos), Apache, MySQL, PHP, Perl. O programa está liberado sob a licença GNU e atua
como um servidor web livre, fácil de usar e capaz de interpretar páginas dinâmicas.
Atualmente XAMPP está disponível para Microsoft Windows, GNU/Linux, Solaris, e MacOS
X. [9]
Figura 3.9 - XAMPP Logo
3.2.5 Firebug
Firebug é uma extensão do Firefox particularmente útil para os programadores Web.
Dispõe de um conjunto de ferramentas que permitem analisar o código fonte (CSS, Java
Script e HTML) de uma página, sendo bastante útil na deteção de erros.
Por todas as suas potencialidades e por ser de código aberto e distribuição gratuita foi
utilizada para auxiliar o desenvolvimento deste projeto. [10]
Figura 3.10 - Firebug Logo
10
3.2.6 Astah
Astah, anteriormente denominado JUDE, é um software para modelagem UML. E
desenvolvido na plataforma Java, o que garante sua portabilidade para qualquer plataforma
que possui uma máquina virtual Java. [11]
Figura 3.11 - Astah Logo
11
Capítulo 4
4 Análise do Sistema
Capítulo alusivo à fase de análise do sistema e modelação do projeto.
4.1 Análise da solução pretendida
O projeto iniciou-se com a investigação e levantamento de especificações e requisitos
para a sua realização. Foram identificados os conteúdos e as funcionalidades que o portal
deveria possuir.
Em seguida iniciou-se um estudo sobre quais seriam as tecnologias necessárias para o
desenvolvimento do projeto, de acordo com os requisitos. Após a seleção das tecnologias a
serem utilizadas foram escolhidas as linguagens de programação.
Por fim, idealizámos o layout e com a estratégia bem delineada e programada,
procedemos à implementação do portal.
4.2 Especificação dos requisitos do portal
Foi cuidadosamente feita uma correta especificação, essencial para um
desenvolvimento coerente do sistema.
4.2.1 Requisitos funcionais
Os requisitos funcionais descrevem objetivamente as funcionalidades e serviços do
sistema.
Os requisitos funcionais deste sistema particular são:
• Criação de uma aplicação Web.
• O sistema permite a apresentação de conteúdos.
12
• O sistema contém uma zona de administração dos conteúdos e
funcionalidades da aplicação.
• Existem diferentes tipos de utilizadores designados de comuns,
registados, funcionários e educadores, cada um com acesso e
privilégios específicos.
4.2.2 Requisitos não funcionais
Estes requisitos estão relacionados com as propriedades e restrições globais do sistema
em termos de manutenção, uso, desempenho, interface e segurança conforme a designação e
tipo de utilizador.
4.3 Tipos de utilizadores
O sistema foi desenvolvido de forma a satisfazer as necessidades de cinco tipos de
utilizadores:
1. Utilizadores comuns: utilizador normal que visita o portal.
2. Utilizadores registados: utilizador que depois de autentificado pode aceder a
conteúdos especiais do portal, neste caso adicionar pré-inscrição, consultar
mensalidades, entre outras.
3. Funcionários: utilizadores com direito a um perfil e a mudar a ementa.
4. Educadores: utilizadores com privilégios mais vastos como consultar e editar
listas de presenças de alunos, adicionar atividades, notícias e fotos.
5. Administradores: o administrador é o responsável pela gestão da plataforma.
4.4 Diagramas de caso de uso
As figuras seguintes representam diagramas de caso de uso, do ponto de vista dos
diferentes tipos de utilizadores que têm acesso ao portal.
13
Utilizador comum (Figura 4.1):
Figura 4.1 - Diagrama Casos de Uso Utilizador Comum
Como demostrado no diagrama, utilizador comum tem apenas privilégios para
consultar um certo tipo informações.
Utilizar Registado (Figura 4.2):
Figura 4.2 - Diagrama Casos de Uso Utilizador Registado
Este diagrama mostra que um utilizador registado tem mais alguns tipos de
funcionalidades como por exemplo fazer uma pré-inscrição ou adicionar comentários.
14
Funcionário (Figura 4.3):
Figura 4.3 - Diagrama Casos de Uso Funcionário
O funcionário é em tudo semelhante ao utilizador registado mas pode editar o menu de
ementas.
Educador (Figura 4.4):
Figura 4.4 - Diagrama Casos de Uso Educador
O Educador tem direitos bem mais avançados como adicionar atividades e fotos,
direitos de edição e consulta.
15
Por fim, o Administrador (Figura 4.5):
Figura 4.5 - Diagrama Casos de Uso Administrador
O administrador, utilizador com todos os privilégios e direitos de acesso a qualquer
tipo de informação, efetua a administração e gestão do jardim-de-infância.
16
4.5 Diagramas E/R (Entidade/Relação)
Figura 4.6 - Diagrama Entidade/Relação
A base de dados foi implementada por forma a ser de fácil utilização e ao mesmo
tempo armazenar as várias informações requeridas pelo Website, criando assim uma mais-
valia para o jardim-de-infância e para os utilizadores do sistema.
A entidade “Utilizador” guarda as informações dos utilizadores, especificando o tipo
de cada utilizador, com a finalidade de distinguir as diferentes permissões de acesso. A
entidade ”Horariofunc” guarda os horários dos funcionários descriminando o período da
manhã e da tarde. “Horarioprof” tem as mesmas diretrizes da entidade anterior mas armazena
ainda a sala a que o educador está atribuído e o horário em que estará disponível para atender
os encarregados de educação. Na entidade “coment_sugest” são armazenados comentários ou
sugestões dos utilizadores e a data da sua criação. Esta entidade serve de plataforma para os
utilizadores exprimirem as suas opiniões. A entidade “atividades” guarda as várias entradas e
calendarização do plano anual de atividades e na entidade “notícias” são armazenadas
informações relevantes que necessitem de publicitação na comunidade escolar. As várias
17
informações dos alunos estão organizadas na entidade “aluno” onde são discriminadas as
valências em que cada aluno está inscrito, utilizador a que está associado, quantia da
mensalidade que este terá de pagar e uma breve descrição de possíveis problemas de saúde. A
entidade “mensalidade” refere as datas correspondentes aos pagamentos ou de dívida quando
se encontrem em falta. A assiduidade do aluno é registada na entidade “presenca” onde ficam
armazenadas as datas de frequência do mesmo. A entidade “horarioval” regista a distribuição
horária das diferentes valências disponibilizadas. Foi criada a entidade “galeria_fotos” com o
objetivo de catalogar imagens relevantes do jardim-de-infância. Para disponibilizar aos
utilizadores informações sobre a ementa semanal criou-se a entidade “ementa” onde são
registadas as semanas e o conteúdo alimentar de cada dia da semana.
18
A19
Capítulo 5
5 Implementação do sistema
5.1 Estrutura da Aplicação
A estrutura da aplicação foi pensada para ser prática e conveniente de modo a ter
grande segurança relativamente à área de cada utilizador e confidencialidade das nossas
crianças. Para este efeito foi dividido em cinco partes principais:
Área utilizadores comuns: área sem privilégios e sem acesso a conteúdos
específicos, permite aceder a comentários e informações úteis acerca das
atividades do estabelecimento, bem como a sua localização e contatos.
Área utilizadores registados: além das funcionalidades permitidas ao utilizador
comum, proporciona um perfil com opção de o poder alterar, adicionar
comentários, consultar as mensalidades de um ou mais alunos atribuídos e
ainda adicionar uma pré-inscrição.
Área funcionários: também proporciona um perfil com opção de o poder
alterar. Têm permissões para alterar a ementa.
Área educadores: com privilégios mais vastos como consultar a lista dos
alunos, editar presenças, atividades, notícias e adicionar fotos.
Área administradores: habilitados a todas as funções do resto dos utilizadores e
ainda administrar utilizadores, adicionar alunos, gerir turmas, horários,
utilizadores, mensalidades e aceitar inscrições.
5.2 Desenho da Aplicação
O desenho da aplicação foi pensado para ser flexível (fácil de incorporar futuras
alterações e corrigir possíveis erros), eficiente (velocidade a que o sistema é capaz de efetuar
20
as funções requeridas) e de fácil usabilidade (simplicidade e facilidade para qualquer
utilizador manusear a aplicação).
Na construção da estrutura principal do Layout foi utilizado CSS e HTML. O layout
foi utilizado nas cinco áreas principais, divergindo apenas em alguns pormenores entre eles.
Na figura abaixo podemos verificar a página apresentada ao cliente quando entra no site.
Figura 5.1 - Layout MainPage
A página inicial tem um layout simples direcionado para uma temática mais infantil.
Possui um menu superior com algum tipo de informação. No centro, para maior facilidade e
rapidez, o utilizador tem acesso às últimas notícias e à ementa da semana.
.
A21
5.3 Áreas Principais – Área Utilizador Comum
A área de utilizador comum possui um menu superior com informações, como por
exemplo, informações sobre o jardim-de-infância e respetivos contactos e localização,
atividades, notícias, horários, ementa e comentários. Este Top Menu pode também ser
consultado nas restantes áreas.
Figura 5.2 - Layout Área Utilizador Comum
Figura 5.3 - Top Menu
Após clicar no botão do menu, a informação requerida é carregada para o centro da
página principal.
22
Figura 5.4 - Tópico ‘O Jardim’ – Informação sobre o Jardim
Figura 5.5 - Tópico ‘Ementa’ – Ementa das próximas semanas
A23
Figura 5.6 - ‘Localização/Contatos’ – Localização através de morada e mapa
No Side Menu, temos a opção de Login, caso o utilizador já esteja registado, seja
cliente, funcionário, educador ou administrador. Ainda a opção de Registo para novos
utilizadores.
24
Figura 5.7 - Side Menu para Login e Registo
Para efetuar o registo basta preencher a seguinte ficha:
Figura 5.8 - Ficha de Registo
Após efetuar o registo o cliente pode de seguida fazer o seu login se desejar ter acesso
à ficha de pré-inscrição dos seus filhos ou para adicionar comentários.
Figura 5.9 - Login do Utilizador
Um dos aspetos mais importantes do registo e posterior login de cada cliente é a
integridade e segurança dos seus dados, para isso usamos a encriptação de modo a que os seus
dados estejam o mais salvaguardados possível. Para isso utilizamos a encriptação MD5.
A25
.
Figura 5.10 - Exemplo de encriptação em MD5
5.4 Áreas Principais – Área Utilizador Registado
Após efetuar o Login entramos na área do utilizador registado (Figura 5.7). Como se
pode observar, a página inicial do utilizador registado apresenta as boas-vindas ao utilizador,
um Side Menu com várias opções e o Top Menu presente em todas as áreas de igual forma.
Figura 5.11 - Layout Área do Utilizador Registado
26
Esta área é destinada a encarregados de educação ou pessoas que pretendam inscrever
os seus filhos neste jardim-de-infância. Os botões do Side Menu são um exemplo disso
mesmo, com opções como pré-inscrição, consultar mensalidades, adicionar comentários, etc.
Figura 5.12 - Side Menu Área Utilizador Registado
A pré-inscrição de um aluno requer: fotografia, os seus dados pessoais, nome do
encarregado de educação e valências. Disponibiliza um campo para observações caso o aluno
necessite de cuidados de especial atenção relacionados com a saúde ou de outras restrições.
A27
Figura 5.13 - Ficha pré-inscrição
A secção das Mensalidades permite ao utilizador ver: mensalidades anteriores e as
datas em que foram efetuados os pagamentos, mensalidades atuais e futuras. Se o encarregado
pagar com atraso, a multa é somada à mensalidade.
Figura 5.14 – Mensalidades
28
Desde que o utilizador esteja registado, e logado, a sua área permite-lhe escrever
comentários exprimindo o feedback sobre a instituição, opiniões sobre o seu funcionamento,
comentários sobre eventos passados/futuros ou apresentar qualquer tipo de sugestão.
Figura 5.15 – Comentários
5.5 Áreas Principais – Área Educador
A área resportada aos educadores de infância permite-lhe o acesso à lista de alunos do
jardim-de-infância, às valências lecionadas e aos alunos que as frequentam, marcar presenças,
adicionar fotos à galeria, adicionar atividades e notícias, visualizar comentários e se
pretenderem inscrever os seus filhos têm uma secção de pré-inscrição. Todas estas
funcionalidades estão presentes no Side Menu.
A29
Figura 5.16 - Layout Área Educador
30
Figura 5.17 - Side Menu Área Educador
A31
A secção dos alunos apresenta a lista de todos os alunos que frequentam o jardim de
infância.
Figura 5.18 - Lista de Alunos
A secção Valências apresenta as diferentes disciplinas e os alunos que as frequentam.
Figura 5.19 - Valências e respetivos Alunos
32
Os educadores podem marcar as presenças dos alunos em sala ou proceder à sua
remoção caso tenham sido inseridas por engano.
Figura 5.20 - Marcar ou Remover Presenças
A33
Os educadores podem também consultar a frequência de determinado aluno em dias
específicos, aparecendo o histórico completo das presenças desse aluno.
Figura 5.21 - Lista dos alunos com o Histórico de presenças do aluno Jorge Lopes
34
Se o educador de infância pretender consultar a lista de assiduidade de todos os
alunos, em algum mês específico, tem também essa opção.
Figura 5.22 - Lista de Presenças de todos os alunos num mês à escolha
De seguida surgem as secções Adicionar Foto e Adicionar Atividades/Notícias que
proporcionam ao educador de infância a possibilidade de colocar fotografias na galeria do
portal, atividades no plano escolar e notícias para todos utilizadores.
Figura 5.23 - Adicionar fotos à Galeria
A35
Figura 5.24 - Adicionar Notícias e Atividades
Na secção Galeria, o educador pode observar e consultar a galeria com todas as
fotografias de festas e outros momentos do jardim de infância.
Figura 5.25 - Galeria de Fotos
36
5.6 Áreas Principais – Área Funcionário
Área simples destinada ao funcionário com acesso a menos secções como por
exemplo: editar ementa, ver mensalidades se tiver um aluno atribuído e ver galeria de fotos.
Figura 5.26 - Layout da Área Funcionário
O funcionário tem permissão para criar, editar ou apagar o menu da ementa das cinco
semanas seguintes à atual.
Figura 5.27 - Secção Editar Ementa
A37
Todos os utilizadores desde que registados têm direito a um perfil e permissão para o
alterar.
Figura 5.28 - Secção Perfil
5.7 Áreas Principais – Área Administrador
Área reservada à administração do portal. O administrador depois de efetuar login
entra numa página onde pode fazer uma rápida gestão de toda a aplicação.
Um administrador genérico foi criado na base de dados, com o nome de utilizador
"admin" e "password "admin". É possível adicionar novos administradores atendendo às
necessidades do jardim-de-infância. Um administrador é diferenciado dos outros utilizadores,
através de um campo “tipo” na base de dados (esclarecida mais à frente na secção de
administração).
O layout tem no centro as notícias mais recentes, a ementa da semana em questão e a
galeria de fotos. As secções de administração, no Side Menu.
38
Figura 5.29 - Layout Administrador
O Side Menu do administrador permite-lhe um controlo total sobre o portal. Para além
do acesso a todas as funcionalidades apresentadas nas áreas de todos os outros utilizadores,
nesta área são apresentadas todas as secções com todas as permissões.
A39
Figura 5.30 - Side Menu Administrador
As seguintes secções são de direito exclusivo do ou dos Administradores:
Só o administrador pode adicionar novos alunos. Nesta secção (adicionar aluno) é
apresentado ao administrador um pequena ficha para preencher com os dados pessoais da
criança, um campo para escolher a sala, de acordo com a idade da criança, um campo para
associar a criança a um utilizador previamente registado, escolher as valências que esta vai
frequentar e as possíveis observações desde restrições ou considerações, como por exemplo,
alergias.
40
Figura 5.31 - Secção Adicionar Aluno
Outra secção de igual importância é de gestão de turmas. Os administradores e
professores vêem a lista de todos os alunos distribuídos pelas respetivas salas, dispondo de
um botão “Alterar”, caso seja necessário modificar a sala de um determinado aluno.
Figura 5.32 - Secção Gerir Turmas
A41
A próxima secção gerir horários, tem a finalidade de informar sobre o tempo laboral
dos funcionários e educadores e os momentos em que as diferentes valências serão lecionadas
nas diferentes salas.
Figura 5.33 - Subsecção Horários Funcionários
Figura 5.34 - Subsecção Horários Educadores
42
Figura 5.35 - Subsecção Horários Valências
De seguida, no Side Menu, aparece a secção administração. É aqui que o
administrador faz a gestão de utilizadores. Quando o administrador pretende adicionar,
remover, editar privilégios ou consultar informações de qualquer utilizador é este o local para
o fazer.
Figura 5.36 - Secção Administração
A43
Como demostrado na Figura 5.35 o administrador pode ver todos os utilizadores
registados. Quando um novo utilizador faz o registo, este passa diretamente a utilizador
registado, com privilégios mínimos. Cabe aos administradores na sua área definirem na opção
“Alterar” se estes continuam a ser utilizadores comuns, educadores, funcionários ou até
mesmo outros administradores.
Um administrador é diferenciado dos outros utilizadores, através de um campo “tipo”
na base de dados, em que “admin” diz respeito ao administrador, “prof” para educadores,
“func” para funcionários e “user” para utilizadores comuns.
Figura 5.37 - Campo “Tipo” na BD
Para aceitar inscrições de novos alunos, o administrador acede à secção pré-inscrição,
onde aparecem, se existentes, fichas de candidatura submetidas pelos encarregados de
educação.
O administrador abre o perfil do(s) candidato(s) e atribui-lhe(s) uma sala e um
utilizador (encarregado de educação), ficando registado de imediato.
44
Figura 5.38 - Aceitar Pré-Inscrição
No canto superior direito aparece um botão de pesquisa, para procurar de forma rápida
qualquer aluno. Esta opção encontra-se disponível na área administrador e na área educador.
Essa pesquisa pode ser feita através do nome do aluno, do apelido ou ambos.
Figura 5.39 - Botão Procurar Aluno
A45
Capítulo 6
6 Conclusão
Foi com enorme gosto e vontade de aprender que abraçámos este projeto. Constitui-se
um desafio de grande dimensão porque permite não somente aplicar todos os conhecimentos
adquiridos ao longo do curso como também aprofundá-los e resolver contratempos que vão
surgindo, preparando-nos para a vida num contexto profissional com cenários que podem ser
os mais diversificados.
O projeto estimulou-nos a relembrar, recapitular, aprofundar e colocar em prática
conhecimentos em linguagens como HTML, PHP e CSS. Outra matéria evocada enraizada em
quase todas as áreas ligadas à informática é a elaboração de uma base de dados bem
estruturada e compatível com a aplicação desenvolvida.
Para a produção deste trabalho foi necessário tanto um esforço conjunto, como
individual de muitas horas de trabalho e pesquisa. Todo o tempo dedicado resultou numa
expansão dos nossos conhecimentos, muito importante em benefício próprio, que nos levou a
querer aprender mais e acrescentar melhorias e funcionalidades ao modelo inicialmente
apresentado.
Este trabalho poderá ser melhorado em alguns aspetos se for aplicado numa situação
real. Desde logo gostaríamos de aprofundar a parte do design do site, pois hoje em dia é um
dos pontos mais fortes neste tipo deste projetos, inserir mais informações e mais conteúdos
com funcionalidade e estética. Também criar um sistema de recuperação de passwords e um
serviço de e-mail.
Em suma pensamos ter conseguido atingir os objetivos inicialmente propostos para
este projeto e ainda aperfeiçoar e aprimorar as ideias que foram surgindo à medida que fomos
evoluindo e investigando.
46
7 Referências bibliográficas
[1] https://pt.wikipedia.org/wiki/HTML5 - HTML5, Acedido em 2015.
[2] http://pt.wikipedia.org/wiki/CSS3 - CSS, Acedido em 2015.
[3] http://pt.wikipedia.org/wiki/PHP - PHP, Acedido em 2015.
[4] http://pt.wikipedia.org/wiki/SQL - SQL, Acedido em 2015.
[5] https://pt.wikipedia.org/wiki/JavaScript - JavaScript, Acedido em 2015.
[6] https://pt.wikipedia.org/wiki/NetBeans - NetBeans, Acedido em 2015.
[7] https://pt.wikipedia.org/wiki/GIMP - GIMP, Acedido em 2015.
[8] http://en.wikipedia.org/wiki/MySQL_Workbench - MySQL Workbench,
Acedido em 2015.
[9] http://pt.wikipedia.org/wiki/XAMPP - XAMPP, Acedido em 2015.
[10] http://en.wikipedia.org/wiki/Firebug_(software) - Firebug (sotfware), Acedido
em 2015.
[11] https://pt.wikipedia.org/wiki/Astah - Astah, Acedido em 2015.