exemplo tcc
DESCRIPTION
exemplo tcc utfprTRANSCRIPT
UNIVERSIDADE TECNOLÓGICA FEDERAL DO PARANÁ
VINICIUS DOS SANTOS MACHADO DA CUNHA 1611518
SEGUNDA ATIVIDADE PRÁTICA SUPERVISIONADA
CURITIBA
15/12/2014
1
AMANDA WILCZEK
WALACE PEREIRA DE PAULA E SILVA
PORTAL DO EIXO DE INFORMAÇÃO E COMUNICAÇÃO.
PARANAGUÁ
2013
Trabalho de Conclusão Curso apresentado ao Curso Técnico de Informática do Instituto Federal do Paraná, como requisito parcial de avaliação.
Orientador: Wagner Rodrigo Weinert
2
Dedicamos este trabalho aos nossos fãs, por entenderem que nossa ausência
nos momentos importantes de suas vidas foi necessária para o
aprofundamento dos nossos conhecimentos.
3
AGRADECIMENTOS
Aos nossos familiares e amigos, que nos deram apoio e nos
incentivaram a não desistir.
Ao orientador desse trabalho, Professor Doutor Wagner Rodrigo
Weinert, pela sugestão do tema e pelo tempo disponível para nos ajudar e
incentivar sempre que necessário.
A todos que contribuíram de alguma forma para o desenvolvimento
desse trabalho.
4
“Meu precioso”
(Smeagol – O Senhor dos Anéis)
“Allons-y!”
(10th Doctor – Doctor Who)
“A única coisa impossível é a impossibilidade”
(Phineas – Phineas e Ferb)
5
RESUMO
O Portal do Eixo de Informação de Comunicação se trata de uma página web
de interesse institucional, voltado ao controle de informações sobre os cursos
ministrados pelo Eixo de Informação de Comunicação. Seu principal objetivo é
tornar-se um espaço acessado por docentes, discentes e interessados na
instituição onde possa ser encontradas notícias sobre diversos temas
institucionais e informações que possam auxiliar seu público. O Portal traz
conteúdos específicos para cada público. O projeto foi desenvolvido para a
plataforma web para que qualquer pessoa possa acessar. Ainda é permitido
aos membros da instituição efetuar login e publicar conteúdos no Portal. O
sistema utiliza das linguagens CSS, HTML, JavaScript, MySQL e PHP. O
sistema conta com acesso de membros da instituição cadastrados no banco de
dados infoprojetos às funções de cadastro e moderação de publicações para o
portal. Nesse trabalho foi priorizado desenvolver o portal com suas funções
mais básicas para então planejar outras ferramentas que possam, acima de
tudo, viabilizar o acesso à informação e aumentar a interação entre docente e
discente.
Palavras-Chave: Programação Web. PHP. Institucional.
6
RESUMEN
El portal del Eje de Información y Comunicación es una página web de interés
institucional, dirigido a controlar la información sobre los cursos ofrecidos por el
Eje de Información y Comunicación. Su principal objetivo es convertirse en un
espacio accedido por profesores, estudiantes e interesados en la institución
donde pueden encontrarse noticias de diversos temas institucionales, así como
informaciones que ayuden a su público. El portal ofrece contenidos específicos
a cada público. El proyecto se desarrolló para la plataforma web para que
cualquiera pueda accederla. Además, permite que los miembros de la
institución efectúen login y publiquen contenidos en el portal. El sistema utiliza
los lenguajes de CSS, HTML, JavaScript , MySQL y PHP. El sistema tambien
posee el acceso de miembros de la institución registrados en el banco de datos
infoprojetos a las funciones de registro y restricción de las publicaciones en el
sitio. En este trabajo se priorizó el desarrollo del portal con sus funciones más
básicas, y la planificación de otras herramientas que pueden, sobretodo,
permitir el acceso a la información y aumentar la interacción entre profesores y
estudiantes.
Palabras clave: Programación Web. PHP. Institucional.
7
SUMÁRIO
1. INTRODUÇÃO.....................................................................................................................10
1.1 CONTEXTUALIZAÇÃO..................................................................................................10
1.2 JUSTIFICATIVA............................................................................................................10
1.3 OBJETIVO GERAL........................................................................................................11
1.4 OBJETIVOS ESPECÍFICOS.............................................................................................11
2. FUNDAMENTAÇÃO TEÓRICA..................................................................................................12
2.1 UML..................................................................................................................................12
2.1.1 DIAGRAMA DE CASOS DE USO......................................................................................12
2.1.2 DIAGRAMA DE CLASSES.................................................................................................14
2.2. BANCO DE DADOS.......................................................................................................18
2.2.1 MODELO ENTIDADE E RELACIONAMENTO................................................................18
2.2.2 MODELO RELACIONAL...............................................................................................19
2.2.3 DICIONÁRIO DE DADOS.............................................................................................19
2.2.4 MYSQL.......................................................................................................................20
2.2.5 APACHE.....................................................................................................................20
2.3. DESENVOLVIMENTO DA PÁGINA WEB............................................................................21
2.3.1 HTML – HYPERTEXT MARKUP LANGUAGE.................................................................21
2.3.2 CSS – CASCADING STYLE SHEET.................................................................................21
2.3.3 PHP - HYPERTEXT PREPROCESSOR.............................................................................22
2.3.4 JAVASCRIPT................................................................................................................22
8
2.3.5 CKEDITOR..................................................................................................................24
2.4. FERRAMENTAS UTILIZADAS.............................................................................................25
2.4.1 ASTAH COMMUNITY..................................................................................................25
2.4.2 BRMODELO................................................................................................................26
2.4.3 MYSQL WORKBENCH.................................................................................................26
2.4.4 PHPMYADMIN...........................................................................................................26
2.4.5 NETBEANS IDE...........................................................................................................27
2.4.6 WINSCP......................................................................................................................28
3. METODOLOGIA.......................................................................................................................29
3.1 DEFINIÇÃO E ESTUDO DO PROBLEMA..............................................................................29
3.2 MODELAGEM DO SISTEMA...............................................................................................31
3.2.1 DIAGRAMAS DE CASO DE USO:..................................................................................31
3.2.2 DIAGRAMA DE CLASSES:............................................................................................34
3.2.3 DIAGRAMAS DE SEQUÊNCIA:.....................................................................................35
3.3 MODELAGEM DO BANCO DE DADOS...............................................................................40
3.3.1 MODELO ENTIDADE E RELACIONAMENTO................................................................40
3.3.2 BANCO INFOPROJETOS..............................................................................................41
3.4 RESULTADOS....................................................................................................................42
4. CONSIDERAÇÕES FINAIS.........................................................................................................48
4.1 PROJETOS FUTUROS.........................................................................................................48
5. REFERÊNCIAS .....................................................................................................................50
9
1. INTRODUÇÃO
1.1 CONTEXTUALIZAÇÃO
Atualmente o Câmpus Paranaguá oferece doze cursos divididos entre
cursos de ensino subsequente, integrado, graduação, proeja, licenciatura e
especialização. Entretanto o site do Instituto não conta com informações
detalhadas sobre os cursos e a organização da infraestrutura local.
O site do Câmpus tem um espaço que contém informações básicas
sobre o curso: uma pequena descrição, a duração, o turno e a atuação do
profissional da área. Essas informações, embora úteis, podem não fornecer ao
possível candidato uma ideia precisa sobre os cursos, o que pode ser motivo
de desistência do aluno nos primeiros meses de aula.
1.2 JUSTIFICATIVA
A Rede Internacional de Computadores (Internet) começou a fazer parte
da vida das pessoas em 1993, quando, além de utilizada por governos e em
pesquisas acadêmicas, passou a estar presente nos diversos segmentos de
empresas e residências. As conexões para acessar a internet também
evoluíram muito com o passar dos anos, tornando-se cada vez mais rápidas e
práticas.
Segundo a União Internacional de Telecomunicações (UIT), em 2012 o
número de domicílios com acesso a internet no Brasil chegou a 45%, número
que tende a crescer.
Além de estarem cada vez mais acessíveis, as ferramentas de busca da
rede mundial de computadores facilitam o acesso a informações de todos os
tipos e de transferências de dados, além de uma grande variedade de recursos
e serviços, como e-mails, serviços de comunicação, compartilhamento de
arquivos como músicas e fotos, redes sociais, e uma infinidade de outros
temas de forma instantânea. Assim é cada vez mais comum encontrar pessoas
10
fazendo pesquisas em suas residências do que em bibliotecas, procurando
informações em livros, por exemplo.
Por ser um meio de comunicação em crescente desenvolvimento, pela
visibilidade que o seu negócio pode ter e pelo baixo investimento para manter
um site no ar, muitos empresários passaram a utilizar a internet como
ferramenta publicitária, muitas vezes substituindo o jornal e a televisão.
Levando em conta os benefícios que um website pode trazer se
mantiver seu conteúdo atualizado, pode-se concluir que um portal pode se
tornar um aliado ao Eixo de Informação e Comunicação no processo de
divulgação.
Assim, o portal aqui proposto pode ser definido como uma página web
exclusiva dos cursos do eixo, para melhorar a interação entre docente e
discente por meio das publicações e ainda para fornecer informações úteis e
completas sobre esses cursos para o público em geral.
1.3 OBJETIVO GERAL
O Portal será destinado a todos os usuários que apresentam interesse nos
cursos ministrados pelo Eixo de Informação e Comunicação do Câmpus já que
não é obrigatório ser um membro da instituição para acessar as informações,
entretanto nem todas as informações estarão disponíveis para o público em
geral.
1.4 OBJETIVOS ESPECÍFICOS
Dentre os objetivos específicos desse trabalho destacam-se:
Garantir um ambiente “amigável” e intuitivo ao portal.
Possibilitar que os membros da instituição efetuem login
Permitir aos usuários a publicação de quaisquer conteúdos relacionados
ao eixo.
Mediar os conteúdos enviados pelos usuários intermediários (discentes)
Conter informações gerais e específicas sobre o Eixo de Informação e
Comunicação e seus cursos
·
11
2. FUNDAMENTAÇÃO TEÓRICA
Nesse capítulo serão apresentados o estudo do projeto e o estudo das
ferramentas, ambos extremamente importantes para a realização do projeto.
2.1 UML
Antes da implementação de um projeto, faz-se sua modelagem, a
modelagem envolve vários tipos de planos e estudos. Quando um software é
modelado suas funções são representadas por diagramas. Essa diagramação
é chamada de UML (Unified Modelling Language ou Linguagem Unificada de
Modelagem).
2.1.1 DIAGRAMA DE CASOS DE USO
O diagrama de casos de uso tem uma linguagem simples e de fácil
entendimento para que todos possam ter uma ideia geral de como o sistema irá
se comportar.
O diagrama de casos de uso é um diagrama muito utilizado, feito no
inicio do projeto, para esboçar o funcionamento básico do sistema. O diagrama
é composto basicamente por atores e os casos de uso.
Tudo aquilo que interage com o sistema é considerado um ator, como no
caso dos usuários que irão interagir com o sistema que será elaborado.
O usuário é considerado um ator por acessar o sistema e é
representado como na figura 1.
FIGURA 1: Exemplo de Ator
12
FIGURA 2: Exemplo de Caso de Uso
Os balões representados na figura 2 são chamados de “caso de uso”,
que como o próprio nome diz são os casos em que o sistema é utilizado.
As ligações entre casos de uso são representadas normalmente por
uma linha com uma seta. Porém existem representações diferenciadas das
ligações comuns: as inclusões (include) e as extensões (extend).
Uma representação de extensão é utilizada quando a ligação pode ou
não acontecer, já a representação de inclusão é usado quando a ligação deve
ocorrer obrigatoriamente.
No diagrama da figura 3, vemos o ator (usuário) interagir com o sistema
pelo caso de uso “acessaSistema” com um ligação “extend” para “efetuaLogin”
que representa que quando o usuário acessa o sistema ele pode ou não
efetuar login.
FIGURA 3: Exemplo de Diagrama de Casos de Uso
13
2.1.2DIAGRAMA DE CLASSES
Antes da orientação a objetos, a programação convidava a pensar nos
problemas separadamente em "forma" e "função", esta abordagemtem méritos,
contudo o problema é que no "mundo real", “forma” e “função” não são
divisíveis, a mudança fundamental para a orientação a objetos foi à criação de
uma nova construção para os tipos de dados: a classe.
A classe unifica a estrutura e a função, facilitam a abordagem de
conceitos mais abstratos. O diagrama de classes apresenta todas as classes
que farão parte do sistema juntamente com seus atributos, métodos e
relacionamentos, a figura 4 exemplifica como seria a classe usuário do sistema
e alguns possíveis métodos.
FIGURA 4: Exemplo de Classe
Como no diagrama de casos de uso, o diagrama de classes também
tem relacionamentos, que determinam o compartilhamento de informações
entre duas classes. O tipo mais simples de associação é a binária,
representada na figura 5.
A figura 5 mostra um objeto da classe “Usuário” compartilhando
informações com um objeto da classe “Post”, pois a classe “Post” tem um autor
que seria um objeto da classe “Usuário”.
14
FIGURA 5: Exemplo de Associação Binária
Além da associação binária temos também a associação de agregação
e a de composição. A associação de agregação é utilizada quando um objeto
depende do outro para confirmar sua existência, mas não de uma maneira tão
intensa da forma que faça sentido a existência de apenas um dos objetos.
Como definido anteriormente, a relação de agregação é utilizada quando
mesmo separados a existência dos objetos fazem sentido, como no exemplo
da figura 6, um laboratório continuará existindo mesmo não tendo uma reserva.
FIGURA 6: Exemplo de Associação de Agregação.
A associação de composição funciona de maneira parecida com a
associação de agregação, porém nesta a existência só faz sentido do objeto
como um todo e é representado como na figura 7, onde um comentário não
tem sentido de existência sem não houver uma publicação.
15
FIGURA 7: Exemplo de Associação de Composição.
2.1.3 DIAGRAMA DE SEQUÊNCIA
O Diagrama de Sequência de eventos pode ser considerado . Através do
diagrama podemos ter ideia da interação do Usuário com o Sistema, com o
banco de dados e com os demais objetos, pois mostra o processo de envio e
recebimento de mensagens entre o usuário e os objetos, consequentemente
descrevendo os métodos utilizados no processo.
De uma forma simplificada, podemos dizer que o diagrama de sequência
é composto pelos seguintes itens:
Atores: Os atores de um diagrama de sequência apresentam as
mesmas características dos atores do diagrama de caso de uso.A
representação dos atores no diagrama de caso de sequência está
ilustrada na figura 8.
FIGURA 8: Representação de um Ator no Diagrama de Sequência
Objetos: O objeto é aquilo com o qual o ator se relaciona durante a
execução do sistema. São considerados Objetos: interface, classes e
banco de dados.A representação dos objetos no diagrama de caso de
sequência está ilustrada na figura 9.
16
.
FIGURA 9: Representação de um Objeto no Diagrama de Sequência
Mensagens: Mensagens são os eventos que encontramos na interação
entre os objetos e os atores. Geralmente as mensagens forçam a
execução de métodos dos objetos.A representação das mensagens no
diagrama de caso de sequência está ilustrada na figura 10.
FIGURA 10: Representação do envio e retorno de uma mensagem do ator para o objeto
Linhas de Vida: Representa o tempo em que um objeto existiu durante
um processo.A representação da linha de vida de cada objeto no
diagrama de caso de sequência está ilustrada na figura 11.
FIGURA 11: Representação da Linha de Vida de um Objeto no Diagrama de Sequência
17
2.2.BANCO DE DADOS
O portal possui integração com uma base de dados que, assim como o
sistema precisa ser definido e devidamente modelado antes de ser
implementado.
O Banco de Dados é conjunto de dados ou informações relacionados
entre si e organizados de forma a facilitar utilização. Como um sistema cuja
finalidade é registrar, atualizar, manter e disponibilizar a informações relevantes
para a atividade do sistema.
2.2.1 MODELO ENTIDADE E RELACIONAMENTO
O objetivo da criação dos modelos é descrever em nível conceitual o
banco de dados, ou seja, descrever os possíveis dados/objetos de um modo
mais genérico, porém já impondo regras.
A criação do modelo entidade relacionamento é o primeiro passo para a
criação do banco de dados. A representação do modelo entidade-
relacionamento é dada da seguinte forma: Existem entidades que são os
objetos - representados por retângulos - e os atributos que fazem parte do
objeto. Os atributos são ligados à entidade. Também há relações (associações)
entre as entidades, essas relações são representadas por losangos. A seguir a
figura 12 mostra parte de um Modelo Entidade-Relacionamento:
FIGURA 12: Modelo Entidade-Relacionamento: Relação Aluno-Cursos
Para a confecção desse modelo foi utilizada a ferramenta brModelo. No
modelo podemos ver que as entidades Aluno, com os atributos pessoaId
(chave primária) e anoFormatura, e Curso, com os atributos idcursos (chave
18
primária) e nome, se associam por meio da relação “possui”, de cardinalidade
(1 - n) assim podemos constatar que o aluno obrigatoriamente possui um
curso.
2.2.2 MODELO RELACIONAL
O Modelo Relacional foi introduzido por Codd, em 1970, e começou a
ser realmente utilizado nas empresas a partir de 1987.
O Modelo Relacional, segundo alguns autores, é a segunda etapa da
modelagem do banco de dados, sendo uma etapa intermediaria entre o modelo
entidade-relacionamento e o próprio banco de dados.
O Modelo Relacional se tornou um padrão de fato para aplicações
comerciais, devido a sua simplicidade e desempenho, considerado ainda um
Modelo Formal por alguns autores.
Vemos, na figura 13, o resultado da passagem do exemplo anterior, de modelo
entidade-relacionamento para modelo relacional.
FIGURA 13: Modelo Relacional: Relação Aluno-Cursos
Vale notar que, devido à obrigatoriedade do aluno possuir um curso, a
tabela aluno terá também um atributo para armazenar a chave primária do
curso (cursos_id cursos).
2.2.3 DICIONÁRIO DE DADOS
No processo de análise de sistemas um dos pontos importantes é a
modelagem do banco de dados. Como na modelagem do sistema, é
necessário que se mantenha um documento com a explicação de todos os
objetos nele criados. Este documento, que é chamado de dicionário de dados,
19
permite que os analistas obtenham informações sobre todos os objetos do
modelo de forma textual, contendo explicações por vezes difíceis de incluir no
diagrama.
FIGURA 14: Exemplo de Dicionário de Dados
2.2.4 MYSQL
Sobre o MySQL Milani (2006, p.22) afirma:
“O MYSQL é um servidor e gerenciador de banco de dados
(SGBD), relacional, de licença dupla (sendo uma delas de
software livre), projetado inicialmente para trabalhar com as
aplicações de pequeno e médio porte, mas hoje atendendo a
aplicações de grande porte e com mais vantagens do que seus
concorrentes. Possui todas as características que um banco de
dados de grande porte precisa.”
O Sistema Gerenciador de Banco de Dados (SGBD) da página web será
utilizado o MySQL versão 5. Esse SGBD utiliza a linguagem SQL (Structure
Query Language – Linguagem de Consulta Estruturada). O MySQL possibilita a
inserção e modificação de dados e de tabelas, a criação e utilização de
funções, procedimentos e gatilhos que facilitam a interação com a base de
dados.
2.2.5 APACHE
O servidor Apache, segundo o seu site oficial, é um dos mais utilizados
no mundo. Isso se deve por ser um servidor-web gratuito, eficiente e ainda
fornece serviços HTTP.
Um servidor web serve para pegar requisições dos navegadores e
retornar paginas web, processados, por exemplo, a partir de um código PHP.
20
Sem um servidor como o Apache, não seria possível para os usuários web
receber as paginas solicitadas via navegador.
2.3. DESENVOLVIMENTO DA PÁGINA WEB
O passo seguinte à definição da modelagem e criação do banco de
dados é o desenvolvimento da página web. A seguir veremos as ferramentas
que serão utilizadas nessa etapa.
2.3.1 HTML – HYPERTEXTMARKUPLANGUAGE
O HTML é normalmente confundido como uma linguagem de
programação, porém o HTML é somente uma linguagem de marcação. O
HTML é facilmente compreendido e é uma linguagem de fácil acesso bastando
apenas um editor de texto simples e um navegador para sua interpretação.
O HTML utiliza as chamadas "tags", marcadores com comandos
específicos que delimitam o tipo de formatação dos elementos da página.
Essas tags podem formatar fontes, cores, tabelas, imagens, título da página,
etc. Contudo o HTML é uma linguagem um tanto limitada, dependendo de
outros recursos (linguagens de programação) para tornar a página realmente
funcional. Na figura 16 temos um simples exemplo de código HTML.
FIGURA 15: Exemplo de código HTML.
2.3.2 CSS – CASCADINGSTYLESHEET
21
O HTML como dito anteriormente é uma linguagem limitada, apesar de
suas várias funções de formatação ainda deixa a desejar no quesito
padronização de layout onde todo layout de cada página do site terá que ser
formatada separadamente. Com o CSS é possível criar um padrão para que
layout de todas as páginas HTML passe a seguir. Esse modelo é chamado de
folha de estilo, que é predefinido pelo autor.
2.3.3 PHP - HYPERTEXT PREPROCESSOR
O PHP é uma linguagem de programação de código aberto
mundialmente utilizado principalmente no ambiente web, isso se deve a sua
compatibilidade com vários tipos de servidores e banco de dados, rodando em
diversos sistemas operacionais e devido a sua capacidade de se permutar ao
HTML. O código PHP é executado no servidor, e o resultado é retornado para o
navegador como HTML simples, assim se torna mais fácil a geração de
páginas web dinâmicas. A figura 17 mostra um exemplo de código em PHP.
FIGURA 16: Exemplo de código PHP.
Um trecho de código PHP deve estar entre as tags<?php e ?> para ser
reconhecido pelo servidor web.
2.3.4 JAVASCRIPT
JavaScript é uma linguagem de script de programação interpretada, isso
é, é executada no navegador, após este a interpretar. Mesmo sendo uma
linguagem diferente do Java, o JavaScript possui sintaxe e instruções
22
semelhantes, sendo mais simples e fácil de manipular.Com base nisso,
Niederauer (2007, p41) afirma:
“É uma linguagem com tipagem dinâmica, ou seja, os tipos
de variáveis não precisam ser definidos no início do
programa.”
“Apesar de ser uma linguagem de script, com JavaScript
podemos criar também programas maiores, orientados a
objetos, com grande variedades de funções e de dados
complexas. Toda essa potência pode ser aproveitada pelas
aplicações Ajax, fazendo com que o programador tenha
controle total sobre o que ocorre na página.”
O JavaScript é muito utilizado para a criação de páginas dinâmicas pois
permite efetuar a validação de dados digitados em formulários pelo usuário,
manipulação de janelas secundárias, como vemos na figura 18 por exemplo.
FIGURA 17: Exemplo de pagina utilizando JavaScript.
Ao executar o script da figura 19, usuário escolhe uma das três opções.
A opção escolhida será enviada para a função que verifica e dá as boas vindas
ao usuário.
23
FIGURA 18: Código JavaScript da página apresentada na figura anterior.
2.3.5 CKEDITOR
O CKEditor é uma ferramenta disponibilizada gratuitamente que
possibilita a edição de texto por parte do usuário. O aplicativo é compatível com
browsers como Firefox, IE, Opera,Chrome e Safari.
De uma maneira mais resumida, é uma caixa de texto totalmente
customizável em nível de interface, no qual o usuário pode escrever e editar o
texto, alterando a fonte, o tamanho, o estilo, adicionar links, tabelas, imagens,
entre outros, e isso é salvo como um documento de formato HTML. Na figura
20 podemos ver como é a interface da edição do CKEditor.
24
FIGURA19: Exemplo de edição de texto utilizando o CKEditor
A ferramenta facilitará a parte de edição e a publicação de conteúdos do
usuário, já que não será necessário pensar em uma forma para que o usuário
personalize o seu texto e nem para guardá-lo de forma que esse não sofra
modificações.
2.4. FERRAMENTAS UTILIZADAS
Nesse tópico traremos uma breve introdução sobre as ferramentas mais
importantes utilizadas no desenvolvimento desse trabalho.
2.4.1 ASTAH COMMUNITY
As ferramentas Astah são, basicamente, softwares destinados à criação
de diagramas. Neles podem ser confeccionados de forma prática diagramas
UML. A versão ‘Community’, utilizada na modelagem dos diagramas aqui
apresentados, apresenta funcionalidades limitadas se comparadas às outras do
Astah, pois trata-se de uma versão gratuita.
25
2.4.2 BRMODELO
Segundo o desenvolvedor Carlos H. Cândido, o brModelo é uma
ferramenta voltada para ensino de modelagem em banco de dados relacional.
Nele fizemos o modelo de entidade e relacionamento que apresentamos nesse
documento. Vale lembrar que é uma ferramenta gratuita criada por um
brasileiro.
2.4.3 MYSQL WORKBENCH
O MySQL Workbenché uma ferramenta gráfica para modelagem de
dados, integrando criação e designer que possibilita trabalhar diretamente com
objetos schema, além de fazer a separação do modelo lógico do catálogo de
banco de dados.
A modelagem dos seus bancos de dados pode assumir níveis conceituais,
lógicos e físicos. MySQL Workbench apresenta uma arquitetura extensível,
sendo possível visualizar a representação de tabelas, funções, gerar scripts em
SQL, realizar engenharia reversa em bancos de dados, entre outras funções.
No momento a ferramenta está disponível para os sistemas operacionais
Windows, Linux e Mac OS X.
2.4.4 PHPMYADMIN
Para gerenciar o servidor e o banco de dados utilizaremos o
PhpMyAdmin, que é uma ferramenta com interfacegráfica simples que facilita a
interação com o MySQL. Na figura 20 podemos ver a interface do
PhpMyAdmin.
26
FIGURA 20: Autenticação no PhpMyAdmin.
Vale lembrar que o PhpMyAdmin permite efetuar as mesmas operações
que seriam aceitas no terminal do MySQL, pois, segundo Milani(2006, p.85), o
grande objetivo do PhpMyAdmin é tornar mais simples e prática a interação
com o MySQL, utilizando os conceitos de programação gráfica.
2.4.5 NETBEANS IDE
O NetBeans é uma aplicação de código aberto feita para auxiliar os
desenvolvedores na criação de aplicativos em diferentes plataformas,
utilizando tecnologia Java para isto.
27
Segundo o site oficial, o software permite ao usuário desenvolver aplicações
com Java, HTML5, PHP, C/ C++ e entre outras linguagens de uma maneira
mais fácil e rápida.
Em resumo, o NetBeans oferece todo o suporte para criação de interfaces
gráficas de maneira visual, bem como o desenvolvimento de aplicações
para a internet, celulares e colaborações entre usuários, apresentando
funcionalidades para soluções mais completas em programações com Java.
2.4.6 WINSCP
WinSCP ou Windows Secure CoPy é um SFTP livre e de código
aberto que permite acessar, transferir e manipular arquivos remotamente,
ou seja, o usuário tem acesso à todos os arquivos permitidos sem que
precise estar em frente ao computador.
28
3. METODOLOGIA
Neste capítulo serão apresentados e descritos os diagramas do sistema,
o levantamento de dados e a problematização do sistema, e os métodos
propostos para atingir os objetivos específicos.
3.1 DEFINIÇÃO E ESTUDO DO PROBLEMA
O site do Câmpus Paranaguá dispõe de um espaço no qual contém
informações básicas sobre os cursos. Essas informações, embora úteis, podem
não fornecer ao possível candidato uma ideia precisa sobre os cursos, o que
pode ser motivo de desistência do aluno nos primeiros meses de aula. Para
fornecer mais informações aos visitantes do site e na possibilidade de fornecer
serviços para auxiliar na interação entre docente e discente, será criado um
portal exclusivamente para o Eixo de Informação e Comunicação.
O site é designado a todos os usuários interessados de alguma maneira
nos cursos ministrados pelo Eixo de Informação e Comunicação do Câmpus
Paranaguá. Ele atenderá as demandas de informações que os usuários
necessitam que normalmente não é suprida somente pelo site do Câmpus.
O portal deve estar aberto para o público em geral, mas terá algumas
informações visíveis apenas para membros da instituição. O membro da
instituição estará cadastrado no banco de dados Infoprojetos e efetuará login
pelo website através de sua combinação de e-mail e senha. Os usuários terão
diferentes níveis de privilégios no sistema, são eles:
Usuário neutro: compreende aos visitantes ou membros que ainda não
efetuaram login. Seu conteúdo é a página inicial do portal. Em sua barra de
menu encontraremos:
Entrar: redireciona o usuário para a página de login
29
EMI - Técnico em Informática: informações sobre o curso EMI -
Técnico em Informática e a instituição. Estará subdividido em
Especificações Gerais, Perfil Profissional, Infraestrutura, Corpo
Docente, Matriz Curricular e Versão para Download.
TCC: Terá a definição de TCC e links das documentações
anteriores em formato pdf. Estará subdividido em definição e anos
das turmas.
Projetos: Links para projetos institucionais, como o Infoprojetos.
Perguntas Frequentes: informações sobre o eixo na forma de
perguntas e respostas
Outros Locais: Links de outros sites referentes à instituição
Contato: Contato com o coordenador do eixo
Usuário intermediário: compreende aos discentes da instituição. Em
sua barra de menu encontraremos:
Sair: redireciona o usuário para a página inicial
Criar conteúdo: permite ao usuário enviar conteúdos para a
moderação, que avaliará e, se aceito, aparecerá na área de
publicações da página inicial.
TCC: Terá a definição de TCC, links das documentações
anteriores e Manual do TCC em formato pdf. Estará subdividido
em definição e anos das turmas.
Atividades Complementares: fala sobre horas afins e como
consegui-las (uma introdução ao estágio, monitoria e projetos)
Usuário avançado:compreende aos docentes e aos técnicos da
instituição. Em sua barra de menu encontraremos:
Sair: redireciona o usuário para a página inicial
Criar conteúdo: permite ao usuário avançado enviar conteúdos
que aparecerão na área de publicações da página inicial
Mediação de conteúdos: alguns usuários avançados serão
mediadores de categorias de conteúdos. O mediador será
alertado via e-mail sobre um novo conteúdo aguardando
30
mediação, acessará o portal e, na “mediação de conteúdos”,
encontrará os conteúdos em espera. O usuário avaliará o
conteúdo e dará uma resposta, aceitando ou recusando o
conteúdo e poderá adicionar uma breve justificativa. O autor do
conteúdo receberá por e-mail a sua resposta.
Apesar de terem menus diferenciados de acordo com o seu nível, todos
os usuários terão, em sua página, uma área de publicações, para maior
visibilidade de conteúdos considerados importantes relacionados ao eixo
3.2 MODELAGEM DO SISTEMA
3.2.1 DIAGRAMAS DE CASO DE USO:
O Diagrama de caso de uso apresentado na figura 21 representa a
interação do usuário ainda não logado, com o portal. Nota-se que o usuário
pode visualizar o conteúdo do portal, visualizar as informações contidas na
barra de menu e efetuar login. Ao efetuar login o usuário será classificado
como Intermediário ou Avançado, como veremos a seguir. Caso ele não efetue
login, continuará sendo do tipo “neutro”.
31
FIGURA 21 : Caso de Uso do Usuário Neutro
Caso o Usuário esteja classificado como Intermediário, poderá, além de
visualizar o conteúdo e as informações contidas na barra de menu, criar
conteúdos sobre qualquer assunto que seja relacionado ao eixo. Esses
conteúdos estarão sujeitos a moderação e, se aceitas, estarão visíveis no
portal. A figura 22 representa o Caso de Uso do Intermediário.
32
FIGURA 22: Caso de Uso do Usuário Intermediário.
Caso o Usuário esteja classificado como Avançado, poderá, além de
visualizar o conteúdo e as informações contidas na barra de menu, criar
conteúdos sem que esses passem por moderação e participar do processo de
mediação, classificando os conteúdos criados pelo usuário intermediário. O
Caso de Uso do Usuário Avançado está ilustrado na figura 23.
33
FIGURA 23: Caso de Uso do Usuário Avançado
3.2.2 DIAGRAMA DE CLASSES:
O diagrama de classe do sistema, ilustrado na Figura 24, apresenta as
classes que foram implementadas. A classe “Publicação” tem todas as
informações relevantes à publicação, os objetos desta classe serão controlados
pelo Portal. A classe "Email" é a classe responsável por enviar os e-mails de
notificações no processo de criação e mediação de conteúdos.
34
FIGURA 24: Diagrama de Classes
3.2.3 DIAGRAMAS DE SEQUÊNCIA:
Os diagramas de sequência foram divididos em 3 partes para melhor
organização de suas mensagens. A seguir apresentaremos os diagramas de
sequência do usuário neutro, do usuário intermediário e do usuário avançado,
respectivamente, bem como uma breve explicação de seus eventos.
35
FIGURA 25: Diagrama de Sequência do Usuário Neutro
1. acessaPágina:Os conteúdos/publicações serão carregados
automaticamente toda a vez que o usuário acessar ou recarregar a
página. Esses conteúdos estarão ordenados por ordem decrescente de
publicação.
2. visualizaInformações: O usuário pode visualizar as informações do
menu. Essas informações estarão na própria página, não sendo
necessário o recarregamento ou o redirecionamento do usuário para
outro local.
3. efetuaLogin: Ao entrar no portal, o membro da instituição poderá
efetuar login para ter acesso à informações e ferramentas exclusivas.
Assim o usuário será redirecionado para uma página para efetuar login,
onde passará sua combinação de e-mail e senha que serão validados e
36
então o usuário será redirecionado para uma determinada página, de
acordo com o seu nível.
FIGURA 26: Diagrama de Sequência do Usuário Intermediário
Os eventos 1 e 2 (acessaPagina e visualizaInformações,
respectivamente) representadas no Diagrama de Sequência do Usuário
Intermediário (figura 26) possuem funcionamento igual aos eventos de mesmo
nome do diagrama de sequência do Usuário Neutro (figura 25).
3. criaConteudo: O usuário intermediário pode criar conteúdos para serem
mostrados publicamente. O usuário acessará um formulário e o
preencherá colocando um título, um conteúdo e marcando a categoria
37
na qual o conteúdo se encaixa e o envia. Seu conteúdo já estará no
banco de dados infoprojetos, mas não estará visível sem antes passar
pela mediação. O mediador da categoria escolhida será alertado via e-
mail sobre um novo conteúdo à espera de mediação.
4. sair: Quando desejar sair do portal, o usuário será redirecionado para a
página inicial.
FIGURA 27: Diagrama de Sequência do Usuário Avançado
38
Os eventos 1, 2 e 6 (acessaPagina, visualizaInformações e sair,
respectivamente) representadas no Diagrama de Sequência do Usuário
Avançado (figura 27) possuem funcionamento igual aos eventos de mesmo
nome do Diagrama de Sequência do Usuário Intermediário (figura 26).
3. criaConteudo: O usuário avançado, como o intermediário, pode criar
conteúdos para serem mostrados publicamente. A diferença encontrada
aqui é que o usuário avançado terá o seu conteúdo publicado
automaticamente, sem a necessidade de passar por uma moderação.
4. mediaPublicação: Como foi citado anteriormente nessa documentação,
mais especificamente no tópico 3.1 (Metodologia - Definição e Estudo do
Problema), alguns usuários avançados serão responsáveis pela
mediação de conteúdos de uma ou mais categorias. Sendo assim, ao
acessar a página de mediação de conteúdos, carregaremos do banco de
dados todos os conteúdos não-publicados das categorias das quais é
responsável. O mediador avaliará o conteúdo e decidirá se esse está, ou
não, apto para ser publicado. O mediador ainda poderá adicionar uma
justificativa da sua decisão. No momento em que o mediador enviar a
sua resposta, o autor do conteúdo avaliado receberá um e-mail
contendo basicamente o título do seu conteúdo, a resposta e a
justificativa dadas pelo mediador, bem como o nome do mediador. Após
o autor ser alertado, atualizaremos o conteúdo no banco de dados de
acordo com a resposta: caso o conteúdo for aceito, estará visível para
todos, caso for negado, será apagado do banco. A seguir será
atualizada a lista de conteúdos na página de mediação e o mediador
poderá continuar com o processo.
39
3.3 MODELAGEM DO BANCO DE DADOS
3.3.1 MODELO ENTIDADE E RELACIONAMENTO
O Usuário pode ser “Intermediário” ou “Avançado”. Todos os usuários,
mesmo com restrição, podem criar conteúdos. Alguns usuários poderão mediar
os conteúdos de determinadas categorias. A Figura 28 nos traz o Modelo
Entidade e Relacionamento abordado nesta descrição.
FIGURA 28: Modelo Entidade-Relacionamento do portal
40
3.3.2 BANCO INFOPROJETOS
O Infoprojetos visa o desenvolvimento de softwares para a
automatização de processos institucionais internos, principalmente a gestão
acadêmica do Câmpus.
Na figura 29 temos o modelo relacional do projeto todo. Esse engloba
váriosmódulos desde CalendárioAcadêmico até Controle de utilização dos
espaços. Cada módulo apresentado aqui contém os dados utilizados nas
funções da gestão acadêmica. Assim, o objetivo desse banco é unificar os
sistemas que auxiliam na gestão acadêmica, o que fará com que todos os
sistemas terão os mesmos dados e não será necessário que o membro da
instituição não seja cadastrado inúmeras vezes em cada sistema, como é
atualmente.
FIGURA 29: Modelo Relacional do banco Infoprojetos
41
Vale lembrar que o Portal do Eixo de Informação e Comunicação não
utiliza todas as tabelas do banco de dados Infoprojetos, pois elas não
apresentam utilidade para a funcionalidade do portal. Do modelo apresentado
na figura 29 utilizamos apenas as tabelas dos módulos ‘Núcleo Geral de
Pessoas’ e ‘Site do Eixo de Informação e Comunicação’ (cores laranja e verde-
limão, respectivamente).
3.4 RESULTADOS
Na demonstração do sistema, que será apresentado a seguir, foi
utilizado um banco de dados de testes. Para confirmar a funcionabilidade do
portal, utilizaremos screenshots.
O usuário pode navegar no menu para visualizar as informações
contidas no portal. Como podemos ver na figura 30, estão visíveis também os
conteúdos publicados por membros da instituição. Esses conteúdos são
carregados do Banco de Dados.
42
FIGURA 30: Página Inicial.
As informações contidas no menu são apresentadas em uma janela
popupconforme ilustrado na figura 31.
FIGURA 31: Apresentação de informações
43
Para ter acesso às páginas restritas de usuários intermediários e avançados, o
usuário precisará efetuar login. A seguir vemos a página para efetuar login e a
página do usuário intermediário.
FIGURA 32: Página de Login
FIGURA 33: Página do Usuário Intermediário
44
O usuário intermediário, como o usuário neutro, terá o conteúdo do site
carregado do banco de dados. Ele terá acesso às informações exclusivas
(nesse caso representado por "Atividades Complementares" na figura 33), além
de permissão para criar conteúdos. O formulário para criar conteúdos é
apresentado ao usuário em uma janela popupe uma exemplificação disso está
disponível na figura 34, a seguir.
FIGURA 34: Formulário para Criar Conteúdo
O usuário preencherá os campos do formulário digitando um título e o
conteúdo e selecionará uma categoria. Ao enviar o conteúdo para a
moderação, o mediador da categoria receberá um e-mail como o apresentado
na figura 35, alertando-o sobre o conteúdo em espera.
FIGURA 35: E-mail de alerta para o mediador
45
Ao enviar o conteúdo para a moderação, o mediador da categoria
receberá um e-mail alertando-o sobre o conteúdo em espera.Então omediador
repetirá o processo de efetuar login no portal e entrará como usuário avançado,
representado na figura 36.
FIGURA 36: Página do Usuário Avançado
O usuário avançado poderá visualizar e criar conteúdos da mesma
forma apresentada para o intermediário, porém seus conteúdos não passam
por moderação.
Caso o usuário avançado seja responsável por alguma categoria
(mediador), avaliará os conteúdos através da página "Mediação de
Conteúdos", que pode ser vista na figura 37.
46
FIGURA 37: Página de Mediação de Conteúdos
Ao acessar a página, os conteúdos em espera serão carregados do
banco e listados. O mediador, então, avaliará o conteúdo e dará a sua resposta
(aceitar ou recusar). Se achar necessário, o mediador acrescentará uma
justificativa para sua resposta. Ao enviar a sua resposta, o portal se
encarregará de regularizar o conteúdo no banco de dados e de alertar o autor
do conteúdo via e-mail, como veremos a seguir.
Figura 38: E-mail de alerta para o autor do conteúdo
47
4. CONSIDERAÇÕES FINAIS
No ano letivo de 2013 foi estudada a criação de um portal de
informações exclusivo para o Eixo de Informação e Comunicação visando,
primeiramente, aumentar a interatividade entre docentes e discentes.
Durante o desenvolvimento do projeto percebemos que o portal poderia
possuir mais finalidades, o que fez com que ampliássemos o seu público alvo.
Com isso houverampequenas alterações no escopo apresentado no primeiro
trimestre de 2013, mas essas não influenciaram na ideia principal do projeto.
Após desenvolver a base do portal houveram, ainda, muitas
readaptações, que visaram deixar o sistema mais intuitivo.
Para que a conclusão do projeto fosse possível, houveram diversos
obstáculos, desde readaptações do modelo para a necessidade dos
professores, até mesmo dificuldade de aprendizado da plataforma utilizado
para o desenvolvimento. Estes obstáculos foram todos ultrapassados para
chegar ao resultado final apresentado neste documento. Os objetivos
propostos foram todos alcançados, fazendo com que o sistema já possa ser
utilizado, entretanto o sistema pode receber melhorias.
4.1PROJETOS FUTUROS
Um website pode ser um grande aliado na divulgação de cursos caso seja
periodicamente atualizado, mas além das atualizações de conteúdo podemos
citar algumas ferramentas que podem ser incluídas ao Portal para que esse
seja mais usual.
Filtro de Publicações: Pode parecer simples, mas é uma ferramenta útil.
Além de ver as publicações por ordem decrescente de data, o usuário
poderá filtrá-los por categoria ou por data para ver apenas conteúdos de
seu interesse.
Upload de Imagens: No momento de criar um conteúdo para o Portal, o
usuário pode adicionar imagens através da url, então é importante que o
Portal tenha um sistema de “carregamento” de imagens para o servidor.
Assim o usuário acessa a página, escolhe uma imagem do seu
48
computador e submete-a. Como resposta o sistema retornará a url da
imagem no servidor ou uma mensagem de erro.
Reserva de Locais: Outra ferramenta interessante seria disponibilizar ao
usuário a grade de horários de locais do Câmpus Paranaguá e permitir
que ele efetue reservas para determinados horários, tanto para um único
dia quanto para períodos longos de tempo, para que diminuísse ou até
mesmo acabasse com o conflito que ocorre com os horários das aulas.
Expansão do Portal: Durante a apresentação do sistema foi sugerido
que o portal não atendesse às necessidades apenas do eixo de
informação e comunicação, e sim de todos os eixos da instituição.
Após uma breve reflexão percebemos que o mais adequado será ter
um portal para cada eixo, fazendo com que esse atenda às
necessidades de cada público, mas que ainda siga o mesmo modelo
do portal apresentado nessa documentação.
49
5. REFERÊNCIAS
SOARES, W. PHP 5: Conceitos , Programação e Integração com Banco de
Dados. São Paulo: Érica, 2012.
YNEMINE, S T . Conhecendo o JavaScript. Florianópolis: VisualBooks, 2005.
BORBA, F E . AJAX: Guia de Programação. São Paulo: Érica, 2006.
NIEDERAUER, J. Web Interativa com Ajax e PHP. São Paulo: Novatec, 2007.
PISA, P. O que é e como usar o MySQL? Disponível em
<http://www.techtudo.com.br/artigos/noticia/2012/04/o-que-e-e-como-usar-o-
mysql.html> acessado em 14. Maio. 2013.
Autor Desconhecido. Modelagem Conceitual. Disponível em:
<
http://www.emersonbarros.com.br/wp-content/uploads/2013/01/bd1_apostila2_
Modelagem.pdf> Acesso em 01. Jun. 2013.
CORREIA, R. C. M . Banco de Dados I - Modelo Relacional. Disponível em:
<http://www4.fct.unesp.br/ronaldo/uploads/aula%204%20-%20modelo
%20relacional-1.pdf> Acesso em 04. Jun. 2013.
CARLOS, E. Instalando Servidor Apache. Disponível em
<http://aocubo.tecnologia.ws/instalando-servidor-apache/> Acesso em 10. Jun.
2013.
Domicílios com acesso à Internet no Brasil crescem de 38% 2011 para
45% em 2012. Disponível em:
<http://www.brasil.gov.br/governo/2013/10/domicilios-com-acesso-a-internet-no-
brasil-crescem-de-38-2011-para-45-em-2012>Acesso em 09. Nov. 2013.
50
Significado de Internet Disponível
em<http://www.significados.com.br/internet/> Acesso em 10. Nov. 2013.
Por que fazer um site para sua empresa Disponível
em:<http://www.clubedeideias.com/newsite/index.php/blog-do-mercado/46-por-
que-fazer-um-site-para-a-sua-empresa> Acesso em 07. Nov. 2013.
Análise Orientada a Objetos. Disponível
em:<htttp://www.slideshare.net/CursoSENAC/anlise-orientada-a-objetos-
diagrama-de-sequencia> Acesso em 10. Nov. 2013.
Diagrama de Sequência. Disponível
em:<http://www.inf.ufpr.br/silvia/ESNovo/UML/pdf/DiagSeqAl.pdf> Acesso em
10. Nov. 2013.
WinSCP download. Disponível
em:<http://www.baixaki.com.br/download/winscp.htm> Acesso em 04. Dez.
2013.
Introducing WinSCP. Disponível em
<http://winscp.net/eng/docs/introduction>Acesso em 04. Dez. 2013.
Netbeans Site Oficial. Disponível em <https://netbeans.org/> Acesso em 04.
Dez. 2013.
Netbeans IDE Download. Disponível em
<http://www.baixaki.com.br/download/netbeans-ide.htm> Acesso em 04. Dez.
2013.
MySQLWorkbench Site OficialDisponível em
<http://www.mysql.com/products/workbench/> Acesso em04. Dez. 2013.
MySQLWorkbench Download Disponível em
<http://www.baixaki.com.br/download/mysql-workbench.htm> Acesso em 04.
Dez. 2013.
brModelo 2.0 Disponível em<http://sis4.com/brModelo/>Acesso em 06. Dez.
2013.
51
Astah Site Oficial. Disponível em <http://astah.net/download> Acesso em 06.
Dez. 2013.
52