1 SISTEMA DE GERENCIAMENTO WEB PARA A ASSOCIAÇÃO DOS AMIGOS DO RIO URUGUAI DE ITAPIRANGA Rafael König1, André Klunk2 RESUMO Esse trabalho tem como objetivo principal o desenvolvimento de um sistema web para gerenciamento, controle e divulgação da Associação dos Amigos do Rio Uruguai de Itapiranga (AARUI), permitindo que pessoas efetuem o cadastro no site para se tornarem membros da entidade. A AARUI tem hoje um papel fundamental nos trabalhos de preservação do Rio Uruguai e seus afluentes, realizando campanhas diversas, sempre com trabalho voluntário, fato que dificulta a realização das campanhas por não existir uma forma de divulgação e as pessoas não terem conhecimento de como poder se tornar membro. No início do projeto foi elaborada a documentação e especificação dos requisitos com base em técnicas de extração como reuniões e entrevistas. Na parte do desenvolvimento, a utilização de um framework auxiliou na agilidade do desenvolvimento, facilitando assim a conclusão do projeto. O projeto foi desenvolvido na base incremental, sendo alterado durante o desenvolvimento do mesmo com o objetivo de adequar as necessidades. O Sistema de Gerenciamento Web para AARUI já está registrado no domínio www.aarui.com.br, o qual a entidade já possuía e está hospedado na Hostinger. A alguns dias no ar, passou-se a realizar ajustes e após considerar pronto, deu-se início a alimentação com informações repassadas pela entidade. Neste sistema, as pessoas podem acessar e realizar seu cadastro para se tornar-se um membro, além de ser possível acompanhar as notícias e ações com fotos tiradas pela entidade. O público terá um espaço para interagir com a entidade, podendo enviar suas fotos tiradas do Rio Uruguai para divulgação no site. Palavras-Chave: Sistema Web. Entidade. Cadastro. Voluntário. Gerenciamento. ABSTRACT This work has as main objective the development of a web system for management, control and disclosure of the Association of Friends of the Uruguay River Itapiranga (AARUI). It would also allow people effete the registration directly on the site to become members of the organization. The AARUI now has a key role in the preservation work of the Uruguay River and its tributaries, carrying out several campaigns, always with volunteer work, a fact that complicates the implementation of campaigns because there is no form of dissemination and people do not have knowledge of how power become a member. When the project was prepared documentation and specification of requirements based on extraction techniques such as meetings and interviews. In the development by using a framework aided the development speed, thus facilitating the completion of the project. The project was developed in incremental basis, that will be changed during the project development in order to tailor it to the needs that arise. The Web Management System for Association of Friends of Uruguay River Itapiranga is already registered in the field www.aarui.com.br, an area in which the entity already owned and is hosted in KingHost. Already a few days in the air, began to make adjustments, and after considering ready, was started feeding with information passed on by the entity. In this system 1 Acadêmico do curso de Gestão da Tecnologia da Informação da FAI Faculdades de Itapiranga. E-mail: [email protected]. 2 Especialista em Desenvolvimento de Sistemas para Internet pela Universidade Regional Integrada do Alto Uruguai e das Missões- URI e professor do curso de Gestão da Tecnologia da Informação, da FAI Faculdades, de Itapiranga. Email: [email protected]. 2 people can log in and make your registration to become a member of AARUI, it would also be possible to follow the news and actions with photos taken by the entity, the public will also have a space to interact with the entity, and may upload your photos taken from the Rio Uruguay to publicize the site. Keywords: Web System. Entity Registration. Volunteer. Management. 1 INTRODUÇÃO Com o uso da tecnologia, torna-se indispensável que empresas e entidades façam uso da mesma em seus negócios. O que leva isso é a falta de tempo das pessoas. Com uma carga horária de trabalho cheia, torna-se difícil realizar outras atividades. Em virtude disso, empresas estão fazendo uso da internet para atender as necessidades dos clientes com lojas virtuais, onde o cliente realiza suas compras no conforto da sua casa tudo, pelo computador. A AARUI, fundada em 21 de outubro de 1997 é formada por uma constituição civil, sem fins lucrativos com sede e foro na cidade de Itapiranga/SC. Possui como objetivo geral, defender e lutar pela preservação e recuperação do Rio Uruguai e seus afluentes. A partir disso, surge a ideia de um sistema em que o usuário possa se associar sem precisar sair de casa e sem custo. Conciliado com a necessidade da AARUI, deu-se início ao projeto de desenvolver um sistema de gerenciamento web. Como a entidade não dispõe de um site e encontra dificuldade em fazer o controle de seus membros associados, surgiu-se a ideia de, além do sistema de gerenciamento, apresentar notícias e fotos de ações realizadas pela entidade. O desenvolvimento se dará em duas fases: a primeira com o levantamento de requisitos e dados, seleção de população e amostra, desenvolvimento do Modelo ER (Modelo Entidade- Relacionamento) e seleção de ferramentas a serem usadas para a elaboração do projeto; e a segunda fase, com o desenvolvimento, testes e implantação do sistema. 2 REVISÃO DA LITERATURA Como a internet vem se tornando um meio cada vez mais acessível, onde as pessoas buscam por notícias, informações, novidades, entretenimento e tudo mais, torna-se de grande importância o desenvolvimento desse projeto. Uma notícia lançada na rede consegue se espalhar numa velocidade muito grande, fazendo com que as pessoas busquem cada vez mais saber das novidades através dela, deixando de lado o jornal impresso e outros meios de comunicação, inclusive o rádio, que também busca informações na internet. 3 É de grande importância que organizações como a AARUI estejam conectadas à internet, conscientizando a população da importância da preservação dos rios e destacar seu trabalho e mostrar que se trata de campanhas sérias e que, com o auxílio da população, é possível a realização de campanhas mais eficientes e alcançar melhores resultados. Assim, Foina (2012, p.2) diz que “de maneira bem livre, podemos definir informação como um valor, ou dado, que possa ser útil para alguma aplicação ou pessoa”. O’Brien (2011, p.6) afirma que “Sistema de Informação é um conjunto organizado de pessoas, hardware, software, redes de comunicações e recursos de dados que coleta, transforma e dissemina informações em uma organização”. Qualquer sistema, independente se usar ou não Tecnologia da Informação para funcionar, mas, que esteja trabalhando e gerando informações pode ser considerado genericamente um Sistema de Informação. (REZENDE E ABREU, 2011) Quando o assunto é Segurança da Informação, a mesma se trata da proteção contra o uso ou acesso não autorizado e a negação de serviço ao usuário autorizado no momento em que a confidencialidade e a integridade são preservadas. Ela se aplica a toda e qualquer aspecto relacionado a proteção da informação ou dados. (SILVA E STEIN, 2007) A linguagem PHP tem suporte para diversos sistemas de gerência de bancos de dados, oferecendo funções para executar operações como consultas de dados, inclusões, alterações, exclusões, etc. Entre elas estão: MySQL, PostgreSQL, SQLite, InterBase, Oracle, SQL Server, Sybase, entre outros que possuem suporte à linguagem SQL. (NIEDERAUER, 2008) Quando se fala em JavaScript, pode-se dizer que ele é uma página onde se pode reconhecer e responder a situações como clique, movimentação do mouse, entrada de dados etc. Pode-se por exemplo, criar um novo script para verificar se o usuário digitou algo em um formulário de dados, se o número de telefone ou CPF é válido e até avisá-lo caso não tenha feito corretamente. (CARDOSO, 2004) A JavaScript é definida como uma linguagem com scripts que fica dentro de um programa HTML. (RAMALHO, 2006) Assim, o CSS é um padrão de formatação com maior possibilidade de características no design de um site. Com a utilização do CSS, passamos a ter a HTML/XHTML preocupando-se em estruturar o documento em blocos de informação (títulos, cabeçalhos, parágrafos) enquanto o CSS controla o design (posicionamento, cores, fontes etc). (MACEDO, 2006) O CSS tem como função a apresentação de um documento. Para diminuir o conteúdo escrito em HTML e para a leitura ser rápida, é usada a função CSS, responsável por dar cor de fonte, alinhamento, tamanho de texto, posicionamentos e todas as formatações de uma página. (SILVA, 2012) MySQL é um sistema utilizado para gerenciar o banco de dados da maioria das aplicações gratuitas, utilizando a linguagem SQL (Structure Query Language – Linguagem de 4 Consulta Estruturada), usada para trabalhar com conteúdo em um banco de dados. Para sua utilização, é necessário a instalação de um servidor responsável pelo armazenamento de dados, responder requisições e controlar a consistência dos dados. (PISA, 2012) Quando se vai trabalhar no desenvolvimento de um produto ou sistema, deve-se seguir um roteiro de atividades, denominado “processo de software”. Ele auxilia no trabalho organizado, ou seja, esse roteiro passa cada etapa a se desenvolver, sendo possível ter um controle melhor no desenvolvimento e diminuir os ricos. Esse modelo aplica sequências lineares que geram incrementais, ou seja, o projeto é dividido em partes, e ao fim de cada parte elas devem ser apresentadas para aprovação e posterior liberação. (PRESSMAN, 2011) O uso de novas tecnologias é importante para a sobrevivência de uma organização, principalmente quando se trata de TI, que altera a estrutura organizacional da empresa. (NETO, 1999) 3 PROCEDIMENTOS METODOLÓGICOS Quanto à natureza, a pesquisa caracteriza-se em teórico-empírico, pois a elaboração realiza-se com base de pesquisas bibliográficas. O termo empírico refere-se a algo dentro de um todo, ou seja, trabalha-se com uma parte de um grande todo. (MEKSENAS, 2002) Quanto à abordagem do problema, trata-se de pesquisa qualitativa, sendo a forma de diminuir a distância entre teoria e dados, transformar dados em algo palpável, frisando que a maioria das vezes a pesquisa qualitativa é feita no local de origem dos dados. (NEVES, 1996) Em relação aos objetivos, trata-se de uma pesquisa exploratória, pois baseia-se na entrevista com pessoas que entendam do assunto e sua experiência possa auxiliar no entendimento do problema para conseguir uma solução eficaz. Quanto aos procedimentos, trata-se de pesquisa ação, sendo a realização do projeto em conjunto com o sujeito pesquisado, onde a pesquisa foi feita em conjunto com a entidade a fim de buscar uma solução ao problema. Já ao tipo de amostra, trata-se de amostra não-probabilística, que é a coleta de dados de acordo com o que é necessário, fazendo com que não esteja assegurada a representatividade da população para não generalizar os resultados. (RAMPAZZO E CORRÊA, 2008) No projeto, utiliza-se o estudo com dados primários, sendo selecionados os necessários para a sua elaboração. Os dados foram coletados a partir de uma entrevista com o presidente da entidade buscando-se entender suas necessidades, em seguida, foi realizado o levantamento dos requisitos necessários para o desenvolvimento, requisitos estes que foram organizados e formou a modelagem do banco de dados, o modelo ER. Entrevista, conforme Rampazzo e Corrêa (2008, p.95) é a “coleta de dados que impõe o contato face a face entre a pessoa que recolhe e que 5 fornece informações”. A entrevista marcou o início do projeto, com o levantamento de dados e requisitos sobre o que seria necessário conter no sistema. O presidente salientou que seria de grande interesse divulgar os trabalhos e as campanhas, como também, conseguir novos associados. A entrevista foi semiestruturada, onde o entrevistador pôde fazer outras perguntas se necessário, direcionando a entrevista de forma a buscar responder todas as dúvidas. Esses dados e as informações foram organizados de forma quantitativa dentro do Modelo ER. 4 APRESENTAÇÃO E DISCUSSÃO DOS RESULTADOS Para o desenvolvimento do projeto, foi preciso ser instalado na máquina o Apache, responsável por auxiliar na execução. Sem ele, o navegador não consegue realizar a leitura das pastas para a exibição do site. Juntamente com o Apache, é necessário ser instalado o SGBD MySQL, que é o Banco de Dados que foi utilizado no desenvolvimento. Todo o projeto foi desenvolvido utilizando a ferramenta Dreamweaver, auxiliando no desenvolvimento e facilitando a conexão com o Banco de Dados, a formatação das telas com o CSS e todo o trabalho em PHP e HTML. Com uma guia de notícias no lado direito da página, é possível observar as notícias relacionadas à entidade que estão em destaque. Ao clicar em algum botão do menu lateral, o conteúdo relacionado a cada botão será apresentado no centro da página, inclusive o botão “Faça Parte”, que é a função que a entidade considera de maior valia, pois se trata da tabela de cadastro de novos associados. Na parte superior, há o botão “home” que direciona a página principal, ao lado do mesmo, existe o botão de “acesso restrito” que direciona a área de manutenção, onde só terá acesso as pessoas que possuírem um login e senha. Na parte inferior há uma opção de “envie sua foto”, função que foi solicitada pela entidade para permitir que pessoas possam publicar fotos diretamente no site. Para possibilitar o acesso, o funcionamento é através de interface web, e para o armazenamento das informações cadastradas o SGDB utilizado é o MySQL para que o usuário tenha acesso às informações, sendo necessário autenticar o acesso com login e senha. O usuário autorizado poderá realizar todas as operações do sistema, como o cadastro de notícias, ações, envio de fotos e tudo que o sistema dispõe. Pode-se citar a tabela foto_banner, responsável por armazenar imagens exibidas no banner do Front-End do site. Da mesma forma, incluídas as tabelas diretoria e pais. O modelo ER completo é apresentado na Figura 01. 6 Figura 01: Modelo ER Entidade-Relacionamento Fonte: Dados do autor (2015) Após o usuário acessar o www.aarui.com.br, ele será direcionado a página inicial do site (Figura 02) sendo possível observar um pouco da história da entidade. Ao clicar em um botão no menu lateral, o usuário poderá observar notícias, ações, fotos da entidade e fotos enviadas por populares, como também, efetuar o cadastro para se tornar um membro. Figura 02: Tela Inicial Front-End Fonte: Dados do autor (2015) Na parte superior do site, tem-se o logotipo e o nome da associação, culminando no lado direito com duas opções de link: Home que retorna à página inicial e o cadeado, abrindo a tela de login para o acesso à intranet. Logo abaixo, tem-se a transição de imagens que ocorre automaticamente a cada cinco segundos, ou então, tendo a opção de avanço e retrocesso manual. À esquerda das transições, apresenta-se o menu de navegação, com seis opções: Sobre a AARUI: será exibido no centro da tela informações sobre a entidade, endereço, razão social, sigla, CNPJ e também um pouco sobre o que é a AARUI e o que ela faz. Galeria de Fotos: é 7 aberta uma nova aba de navegação que direciona o usuário até a galeria onde ficam as fotos, tanto as de campanhas quanto as dos visitantes, conforme demonstrado na Figura 03. Figura 03: Galeria de Fotos Fonte: Dados do autor (2015) Notícias: é aberto no centro da tela uma relação com todas as notícias da entidade, ordenada por data de publicação. Basta o visitante clicar no título da notícia ou na opção “leia mais” que será direcionado à publicação completa. Ações: de forma similar ao que ocorre com as Notícias, são listadas no centro da tela todas as ações realizadas pela entidade com ordem de publicação. Faça Parte: é o espaço onde o visitante pode efetuar seu cadastro para se tornar um membro ou simpatizante da AARUI. É apresentada no centro da tela um formulário para preenchimento, conforme a Figura 04. De posse das informações, os gestores da associação têm a possibilidade de otimizarem suas ações, com divulgações mais amplas e abrangentes. Figura 04: Cadastro de pessoas Fonte: Dados do autor (2015) Redes Sociais: é um espaço para divulgar os endereços das redes sociais que a entidade tiver, ampliando ainda mais as opções de contato com o público. No centro da página, são destacadas as ações. Serão exibidas as duas ações mais recentes publicadas. Clicando no título ou no link “leia mais”, abre-se a descrição completa da referida ação. Ainda, ao final, encontra- 8 se o link “Listas todas as Ações” para acesso completo ao número total de ações publicadas, o que pode ser melhor contemplado observando o código fonte da Figura 05. Figura 05: Código Fonte exibição Ações Fonte: Dados do autor (2015) Pode-se observar na lateral direita um espaço para exibição das notícias que são destaques da AARUI. São apresentadas com o título em forma de link, uma breve descrição e uma opção de ler mais, caso o usuário tenha interesse em ler mais sobre a notícia. São exibidas as últimas quatro notícias inseridas. Para acesso às demais, encontra-se logo abaixo dessa listagem um link “Todas as Notícias” que dá acesso a listagem completa. Ainda na lateral direita, abaixo das notícias, tem-se um espaço onde o público pode enviar fotos que julguem interessantes para publicar no site. Essas fotos são enviadas, ficando bloqueadas até serem avaliadas pelo administrador. Figura 06: Espaços Front-End Fonte: Dados do autor (2015) No centro da página, na parte inferior, como pode ser visto na Figura 06, estão localizados três espaços: o primeiro traz a listagem das últimas três fotos enviadas pelos visitantes e aprovadas pelo administrador. Clicando sobre a descrição, é exibida a foto numa tela modal. Caso interesse, também se tem um link que dá acesso à todas as fotos enviadas; no espaço do meio, exibe-se as opções de contato com a AARUI, com endereço, e-mail e telefone. Já ao lado, fica destacado o espaço com a relação de toda a diretoria, sendo destaque do campo o presidente, secretário e tesoureiro. Caso o visitante tenha interesse em saber quem compõe 9 toda a diretoria, basta clicar em “Diretoria Completa”. Em todos os espaços que são apresentados notícias ou ações, basta o usuário clicar no link do canto inferior do destaque, na opção de ver mais, sendo exibida a informação em um espaço maior. Ao clicar no botão de acesso restrito (Figura 07), será direcionado a área onde ele deverá realizar a autenticação com login e senha para conseguir ter acesso às informações ali presentes. (Figura 08). Isso serve para evitar que pessoas não autorizadas acessem a intranet e causem possíveis danos. Figura 07 - Link com Acesso Restrito Fonte: Dados do autor (2015) O sistema usa sessões para gerenciar o acesso. Figura 08: Tela de Login Fonte: Dados do autor (2015) Após informar seu login e senha, o usuário será direcionado para a página da Intranet (Figura 09), tendo acesso para manutenção do sistema, dando acesso aos menus do sistema. Figura 09 : Back-End: Tela Inicial Intranet Fonte: Dados do autor (2015) Essa tela contém uma coleção de menus que permitem que sejam feitos todos os ajustes necessários para a manutenção do site, bem como o gerenciamento básico da entidade. Menu Inicial: Retorna à tela principal da intranet. Menu Cadastros: se desdobra nas opções Cidade, 10 Entidade e Diretoria. Permite que sejam incluídos, alterados ou removidos dados relacionados a estes itens. Menu Financeiro: se desdobra nas opções Entradas e Saídas. Nestes links se tem acesso ao lançamento dos registros financeiros da entidade, como entrada de valores e despesas pagas. Menu Pessoas: gerenciar os cadastros dos simpatizantes oriundos da tela de Front-End, tanto das pessoas físicas, como jurídicas. Menu Imagens: se desdobra em duas opções; galeria de fotos e aprovação de fotos dos visitantes. A primeira se refere à manutenção dos álbuns de fotos, permitindo a inclusão de novas imagens e álbuns, bem como a manutenção dos já existentes. A opção de aprovação de fotos tem por objetivo permitir ou não a publicação das imagens enviadas pelos visitantes. Menu Notícia: gerenciar as notícias exibidas no site. Além das opções de inclusão, alteração e exclusão de notícias, tem-se a possibilidade de criar vínculos com álbuns de fotos e links apontando para endereços de portais web e/ou envio de arquivos para download. Menu Ação: área destinada para o gerenciamento das ações que são desempenhas pela entidade. Usuários: controle de usuários com gerenciamento de login e senha de quem tem acesso à área administrativa (intranet) do site. Sair: desloga o usuário que estiver logado no sistema, fazendo o sistema retornar para a tela de login. Na página Usuário, pode-se observar usuários já cadastrados (Figura 10) e realizar um novo cadastro de usuário. Figura 10: Tabela de Usuários Fonte: Dados do autor (2015) Ao clicar em Incluir Usuário, o mesmo será direcionado à área onde se encontram os campos de preenchimento para realizar o cadastro do mesmo (Figura 11). Figura 11: Inserir Usuário Fonte: Dados do autor (2015)