Você está na página 1de 51

Escola Secundária de Barcelos

Curso Tecnológico de Informática


Ano Lectivo 2007/2008

Página Web – Directório de empresas

Projecto de Aptidão Tecnológica

Por:
Marco Rafael Linhares Couto, nº 12, 12º I
Resumo
O projecto elaborado é um website que contém as empresas de Barcelos.
Basicamente, possibilita aos visitantes do website ficarem a conhecer todas as
características de um determinada empresa, ou seja, nome, telefone, história,
descrição, site, e-mail e localização (através da API fornecida pelo Google
Maps). Terá também uma parte administrativa, para que seja possível
adicionar novas empresas sem recorrer à utilização da ferramenta MySql, ou
seja, será permitido adicionar empresas ao website de uma forma mais
interactiva, por parte dos administradores do website em questão, e será
também possível alterar dados de uma determinada empresa seguindo a
filosofia anteriormente descrita (ou seja, maior interactividade), mas, neste
caso, será possível efectuar essa tarefa por parte de administradores e por
representantes de empresas.
Este relatório estará dividido em cinco partes fundamentais, tal como o
indica o esquema seguinte:
1. Introdução ao projecto: descrição do tema e objectivos do projecto;
2. Análise do projecto
3. Enquadramento: ferramentas utilizadas;
4. Descrição do projecto: apresentação mais detalhada das
funcionalidades do projecto, bem como do estado actual em que se
encontra o projecto.
5. Considerações: conclusão, opinião pessoal acerca das
funcionalidades do projecto e motivos que levaram à escolha deste
tipo de projecto para elaboração.

Os extractos de código apresentados no relatório são aqueles que achei


serem mais importantes e que serviram de base à criação de código para
outras situações.
Índice
ÍNDICE...........................................................................................................I

ÍNDICE DE FIGURAS......................................................................................III

AGRADECIMENTOS........................................................................................1

INTRODUÇÃO................................................................................................2

TEMA E ESTRUTURA DO PROJECTO.................................................................................................2

OBJECTIVOS DO PROJECTO.........................................................................................................4

ANÁLISE E PLANIFICAÇÃO DO PROJECTO.........................................................5

LISTA DE TAREFAS..................................................................................................................5

REDE PERT.......................................................................................................................5
MAPA DE GANTT................................................................................................................5
ESQUEMA DA BASE DE DADOS.....................................................................................................6

ENQUADRAMENTO........................................................................................7

MYSQL (STRUCTURED QUERY LANGUAGE)......................................................................................7


O que é?.....................................................................................................................7
Utilização no projecto.................................................................................................7
História......................................................................................................................8
PHP (HYPERTEXT PREPROCESSOR)..............................................................................................9
O que é?.....................................................................................................................9
Utilização no projecto.................................................................................................9
História....................................................................................................................10
HTML (HIPER TEXT MARKUP LANGUAGE)...................................................................................11
O que é?...................................................................................................................11
Utilização no projecto...............................................................................................11
História....................................................................................................................12
CSS (CASCADIAN STYLE SHEET)..............................................................................................13
O que é?...................................................................................................................13
Utilização no projecto...............................................................................................13
História....................................................................................................................14
JAVASCRIPT........................................................................................................................15
O que é?...................................................................................................................15
Utilização no projecto...............................................................................................15
História....................................................................................................................16
SERVIDOR APACHE...............................................................................................................17
O que é?...................................................................................................................17
Utilização no projecto...............................................................................................17
História....................................................................................................................18

PROJECTO...................................................................................................19

“+ BARCELUZ” – DIRECTÓRIO DE EMPRESAS.................................................................................19

Os menus.................................................................................................................19
Registo.....................................................................................................................21
Login........................................................................................................................24
A função de pesquisa...............................................................................................26
As secções “Termos”, “Política de privacidade”, ”Contacto” e “Sobre”...................27
Submeter dados.......................................................................................................29
Listagem de empresas por categorias.....................................................................34
Página de empresa..................................................................................................35
Secção Administrativa..............................................................................................37

ÚLTIMAS CONSIDERAÇÕES...........................................................................45
Índice de Figuras
ASPECTO BASE DO PROJECTO (TEMPLATE).......................................................2

.....................................................................................................................6

ESQUEMA DA BASE DE DADOS........................................................................6

CONTEÚDO DA PÁGINA WEB (CENTRO)..........................................................21

FORMULÁRIO DE REGISTO DE UTILIZADOR.....................................................23

LOGIN (BASE)...............................................................................................24

LOGIN (DEPOIS DE SE IDENTIFICAR)..............................................................24

MENSAGEM DE SUCESSO NO LOGIN...............................................................25

LOGIN (DEPOIS DO ERRO NA IDENTIFICAÇÃO)................................................25

MENSAGEM DE ERRO NO LOGIN.....................................................................25

HIPERLIGAÇÃO PARA FORMULÁRIO DE EDIÇÃO DE DADOS DE UTILIZADOR......25

FORMULÁRIO DE PESQUISA, COM A “TEXT BOX” PREENCHIDA COM O NOME DA


EMPRESA A PROCURAR – “MEGATRÓNICA”............................................................26

RESULTADO DA PESQUISA DE EMPRESA COM O NOME “MEGATRÓNICA”:........26

RESULTADO DA PESQUISA POR “INFORMÁTICA”............................................26

RESULTADO DA PESQUISA POR “KRT”...........................................................27

SECÇÃO “SUBMETER” DA PÁGINA WEB (QUANDO É ABERTA POR UM VISITANTE


NORMAL).............................................................................................................29

SECÇÃO DE SUBMISSÃO DE DADOS QUANDO O LOGIN É FEITO COMO


ADMINISTRADOR OU ANUNCIANTE (IMAGEM INCOMPLETA)....................................29

SELECT BOX.................................................................................................30

LISTAGEM DE CATEGORIAS............................................................................34

LISTAGEM DAS SUBCATEGORIAS DA CATEGORIA INFORMÁTICA.......................34

LISTAGEM DE EMPRESAS DA SUBCATEGORIA DESIGN.....................................34

PÁGINA DE EMPRESA – 1º PARTE (SECÇÕES: GERAL; HISTÓRIA; DESCRIÇÃO) . .36

...................................................................................................................36

PÁGINA DE EMPRESA – 2º PARTE (SECÇÃO DE MAPA E FOTOS)........................36

ITEM “ADMINISTRAR” NO MENU DE TOPO, QUE APARECE QUANDO É FEITO O


LOGIN.................................................................................................................37
PÁGINA DE ADMINISTRAÇÃO QUANDO O LOGIN É EFECTUADO COMO
ADMINISTRADOR.................................................................................................38

FRASE QUE INDICA O NÚMERO DE EMPRESAS INACTIVAS DO SITE E PEDE PARA


ACTIVAR..............................................................................................................39

SECÇÃO PARA ACTIVAÇÃO DE EMPRESAS......................................................39

LIGAÇÕES “ADICIONAR EMPRESA” E “ADICIONAR CATEGORIA” DA SECÇÃO


ADMINISTRATIVA.................................................................................................40

FORMULÁRIO DE INSERÇÃO DE CATEGORIA...................................................40

ASPECTO DA LISTAGEM DE EMPRESAS POR CATEGORIA NA PÁGINA DE


ADMINISTRAÇÃO..................................................................................................42

FORMULÁRIO DA SECÇÃO ADMINISTRATIVA DA PÁGINA WEB COM OS CAMPOS


PREENCHIDOS COM DADOS DA EMPRESA..............................................................43

PÁGINA DE ADMINISTRAÇÃO QUANDO O UTILIZADOR É UM ANUNCIANTE........44


Escola Secundária de Barcelos

Agradecimentos
Queria expressar aqui a minha gratidão para com duas pessoas que me
ajudaram bastante na elaboração do meu projecto.
Tenho de começar por agradecer ao professor Luís Silva, pela grande
ajuda que me ofereceu na elaboração do trabalho. Foi um professor dedicado e
sempre disposto a ajudar. Com aquilo que aprendi com ele, consegui
conhecimentos suficientes para servir de base à elaboração do meu projecto.
Foi muito importante tanto na aprendizagem de PHP e MySql, mas também na
elaboração de código para o projecto final.
Não me posso esquecer de agradecer também ao meu colega Teotónio
Ricardo, porque, sem, ele, o projecto não seria aquilo que é agora. Tal como o
professor Luís Silva, ele foi muito importante na elaboração do projecto. Recebi
ajuda dele para a elaboração do código em PHP, para me ajudar a fazer o estilo
da página (em CSS) e para adaptar o Javascript à página Web.
Apesar de ter recebido opiniões e ajudas por parte de várias pessoas,
foram estas duas referidas em cima que mais fizeram a diferença e que mais
se empenharam em ajudar-me.

1
Escola Secundária de Barcelos

Introdução

Tema e estrutura do projecto


O projecto consiste na criação de uma página Web dinâmica para gestão
de um directório de empresas. A página Web irá permitir, não só a gestão das
empresas por parte dos administradores e representantes das empresas, como
também a pesquisa e consulta de várias empresas, por parte dos visitantes da
página. Para tal, tomamos a decisão de permitir a entrada na nossa página de
qualquer utilizador que o deseje fazer, ou seja, sem ser necessário um registo
por parte dos visitantes. O mesmo não acontecendo com os administradores e
representantes das empresas, que têm obrigação de se registarem para
poderem administrar os dados das empresas
O site terá esta estrutura:

Aspecto base do projecto (Template)

Na página inicial, estarão disponibilizadas as empresas mais


recentemente adicionadas à base de dados.
Em cada categoria (à esquerda), estarão as empresas que lhe
correspondem. Cada empresa terá um espaço/secção, onde haverá

2
Escola Secundária de Barcelos

informações sobre a história, os serviços, a localização, os contactos, o site,


etc., da empresa.

3
Escola Secundária de Barcelos

Objectivos do projecto
 Reunir um directório/base de dados de empresas e estabelecimentos
activos no concelho de Barcelos;
 Permitir aos residentes no concelho de Barcelos e/ou Turistas obter
informações e localizações de empresas que prestam determinados
serviços, de uma forma mais organizada;
 Facilitar a localização de empresas e estabelecimentos recorrendo à API
fornecida pelo Google Maps (plano futuro);
 Possibilitar às empresas do concelho uma maior divulgação dos seus
serviços através deste meio de comunicação (A Internet);
 Permitir às empresas a divulgação de campanhas publicitárias
directamente ao público-alvo;
 Possibilitar o destaque das empresas em categorias específicas;
 Permitir a empresas de publicidade revender os nossos serviços de
publicidade aos seus clientes.

4
Escola Secundária de Barcelos

Análise e planificação do projecto

Lista de tarefas

Nome da tarefa Dependênci Tempo


a
A- Pesquisa de Dados - 6 Semanas
B- Design - 5 Semanas
C- Base de Dados A 3 Semanas
D- Programação B, C 12 Semanas
E- Adicionar Dados D 5 Semanas
F- Testar/Correcção E 2 Semanas
Finalização
G- Elaboração do F 3 Semanas
Relatório

Rede PERT

Mapa de GANTT

5
Escola Secundária de Barcelos

Esquema da base de dados

Esquema da base de dados

6
Escola Secundária de Barcelos

Enquadramento

MySql (Structured Query Language)

O que é?

É a linguagem com mais sucesso em relação ao acesso e manipulação de


dados.
É considerada actualmente como padrão dos Sistemas Gestores de Bases
de Dados Relacionais (SGBDR).
Com esta linguagem é possível:
 Criar, Alterar e Remover todos os componentes de uma Base de
Dados (tabelas, views, índices, etc.);
 Inserir, Alterar e Apagar dados;
 Interrogar a Base de Dados;
 Controlar o acesso dos utilizadores à Base de Dados e as operações
a que cada um deles pode ter acesso
 Obter a garantia de consistência e integridade dos dados.

Utilização no projecto

O MySql foi utilizado única e exclusivamente para a criação da base de


dados. Decidi utilizar este sistema de gestão de base de dados devido não só à
sua fácil integração com o PHP, como também devido à sua grande
portabilidade e compatibilidade, excelente desempenho e estabilidade, por ser
um software livre e por ser bastante fácil de usar. Foi também um dos temas
leccionados ao longo do ano na disciplina de base de dados e portanto foi mais
fácil de aprender.

7
Escola Secundária de Barcelos

História

O MySql foi criado na Suécia por dois suecos e um finlandês: David


Axmark, Allan Larsson e Michael "Monty" Widenius, que têm trabalhado juntos
desde a década de 1980. Hoje o seu desenvolvimento e manutenção
empregam aproximadamente 70 profissionais no mundo inteiro, e mais de mil
contribuem, testando o software, integrando-o a outros produtos, e escrevendo
a respeito dele.
No dia 16 de Janeiro de 2008, a MySql AB, desenvolvedora do MySql, foi
adquirida pela Sun Microsystems, por 1 bilião de dólares, um preço jamais visto
no sector das licenças livres.
O sucesso do MySql deve-se em grande medida à fácil integração com o
PHP, incluído, quase que obrigatoriamente, nos pacotes de hospedagem de
sites da Internet oferecidos actualmente. Empresas como Yahoo! Finance,
MP3.com, Motorola, NASA, Silicon Graphics e Texas Instruments usam o MySql
em aplicações de missão crítica.
O MySql hoje suporta Unicode, Full Text Indexes, replicação, Hot Backup,
GIS, OLAP e muitos outros recursos.

8
Escola Secundária de Barcelos

PHP (Hypertext Preprocessor)

O que é?

É uma linguagem de programação de computadores interpretada, livre e


muito utilizada para gerar conteúdo dinâmico na Web. Apesar de ser uma
linguagem de fácil aprendizagem e de utilização para pequenos scripts
dinâmicos simples, o PHP é uma poderosa linguagem orientada a objectos.

Utilização no projecto

Esta linguagem será utilizada para a interacção entre Base de Dados e


HTML. Servirá para extrair valores da Base de Dados para serem mostrados na
página Web (através do HTML), e também para validar a entrada de valores na
base de dados, provenientes de formulários feitos em HTML.
Servirá também para incluir outros ficheiros dentro da página Web e para
validar as sessões.
A escolha desta linguagem para a sua função deveu-se principalmente ao
facto de ser quase a única que conhecemos, mas também pela sua boa
compatibilidade com o HTML e o MySql e porque era um dos conteúdos a
leccionar no 12º ano de escolaridade, daí ser mais fácil de aprender, mais
rápido e com mais ajudas.

9
Escola Secundária de Barcelos

História

A linguagem surgiu por volta de 1994, como um pacote de programas CGI


criados por Rasmus Lerdof, com o nome Personal Home Page Tools, para
substituir um conjunto de scripts Perl que ele usava no desenvolvimento de
sua página pessoal. Em 1997 foi lançado o novo pacote da linguagem com o
nome de PHP/FI, trazendo a ferramenta Forms Interpreter, um interpretador de
comandos SQL.
Mais tarde, Zeev Suraski desenvolveu o analisador do PHP 3 que contava
com o primeiro recurso de orientação a objectos, que dava poder de alcançar
alguns pacotes, tinha herança e dava aos desenvolvedores somente a
possibilidade de implementar propriedades e métodos.
Pouco depois, Zeev e Andi Gutmans escreveram o PHP 4, abandonando
por completo o PHP 3, dando mais poder à máquina da linguagem e maior
número de recursos de orientação a objectos. O problema sério que
apresentou o PHP 4 foi a criação de cópias de objectos, pois a linguagem ainda
não trabalhava com apontadores ou handlers, como é a linguagem Java. O
problema foi resolvido na versão actual do PHP, a versão 5, que já trabalha
com handlers.
Trata-se de uma linguagem extremamente modularizada, o que a fez com
que fosse muito utilizada para scripts Web.

10
Escola Secundária de Barcelos

HTML (Hiper Text Markup Language)

O que é?

É uma linguagem de marcação utilizada para produzir páginas na Web.


Documentos HTML podem ser interpretados por browsers. A tecnologia é fruto
do "casamento" dos padrões HyTime e SGML.
HyTime é um padrão para a representação estruturada de hipermédia e
conteúdo baseado em tempo. Um documento é visto como um conjunto de
eventos concorrentes dependentes de tempo (como áudio, vídeo, etc.),
conectados por hiper-ligações. O padrão é independente de outros padrões de
processamento de texto em geral.
SGML é um padrão de formatação de textos. Não foi desenvolvido para
hipertexto, mas tornou-se conveniente para transformar documentos em hiper-
objetos e para descrever as ligações.

Utilização no projecto

Servirá para, no nosso projecto, criar a estrutura e o design da página,


juntamente com o CSS, e receber os dados provenientes de scripts feitos em
PHP para inclui-los dentro da página.
Visto que o HTML é a linguagem Web por defeito, a minha escolha tinha
de incidir nesta linguagem.

11
Escola Secundária de Barcelos

História

Tim Berners-Lee criou o HTML original numa estação NeXTcube usando o


ambiente de desenvolvimento NeXTSTEP.
As primeiras versões do HTML foram definidas com regras sintácticas
flexíveis, o que ajudou aqueles sem familiaridade com a publicação na Web.
Actualmente a sintaxe do HTML é muito mais rígida, permitindo um código
mais preciso. Através do tempo, a utilização de ferramentas para
desenvolvimento de HTML aumentou, assim como a tendência em tornar a
sintaxe cada vez mais rígida. Apesar disso, por questões histórias, os browsers
ainda hoje conseguem interpretar páginas Web que estão longe de ser um
código HTML válido.
A linguagem foi definida em especificações formais pela década de 1990,
inspiradas nas propostas originais de Tim Berners-Lee em criar uma linguagem
baseada em SGML para a Internet. A primeira publicação foi esboçada por
Berners-Lee e Dan Connolly, e publicada em 1993 na IETFcomo uma aplicação
formal para o SGML (com uma DTD em SGML definindo a gramática). A IETF
criou um grupo de trabalho para o HTML no ano seguinte, e publicou o HTML
2.0 em 1995. Desde 1996, as especificações HTML vêm sendo mantidas, com o
auxílio de fabricantes de software, pela World Wide Web Consortium (W3C).
Apesar disso, em 2000 a linguagem tornou-se também uma norma
internacional. A última especificação HTML lançada pela W3C foi a
recomendação HTML 4.01, publicada no final de 1999.
Desde a publicação do HTML 4.0 no final de 1997, o grupo de trabalho da
W3C tem-se focado cada vez mais — e de 2002 a 2006, de forma exclusiva —
no desenvolvimento do XHTML, uma especificação HTML baseada em XML que
é considerada pela W3C como um sucessor do HTML. O XHTML faz uso de uma
sintaxe mais rigorosa e menos ambígua para tornar o HTML mais simples de
ser processado e estendido.

12
Escola Secundária de Barcelos

CSS (Cascadian Style Sheet)

O que é?

É uma linguagem de estilo utilizada para definir a apresentação de


documentos escritos em uma linguagem de marcação, como HTML ou XML.
Seu principal benefício é prover a separação entre o formato (estilo/design) e o
conteúdo de um documento.
Ao invés de colocar a formatação dentro do documento, o desenvolvedor
cria uma hiperligação para uma página que contém os estilos, procedendo de
forma idêntica para todas as páginas de um portal (página Web). Quando
quiser alterar a aparência do portal basta portanto modificar apenas um
arquivo.

Utilização no projecto

O CSS será usado no meu projecto para formatar o design da página.


Através dele, pude definir completamente a estrutura da página, as cores
utilizadas, os efeitos, etc. Optei por usar esta linguagem para o estilo da página
por achar ser fácil de usar e por ser uma das mais conhecidas na sua função

13
Escola Secundária de Barcelos

História

Quando o HTML foi criado, a intenção não era de forma alguma, formatar
informação. A medida que o HTML se foi popularizando e evoluindo, foram
incluídas em suas qualidades o domínio de controlar algumas aparências para
o documento. Isso fez com que a linguagem ficasse muito complexa, mais
difícil para entender e manter.
Outro problema era que os browsers tinham diferenças de
implementações, o que dificultava a visualização dos sites, trazendo menos
controle na navegação pela Web.
Nesta altura apareceu Håkon Wium Lie, que, vendo toda essa dificuldade,
resolveu criar um jeito mais fácil para formatar a informação. Foi aí que ele
propôs a criação do CSS ou Cascadian Style Sheet… Esse era o ano de 1994.
Aceitando o convite feito pelo próprio Håkon, Bert Bos - que naquele
tempo estava a trabalhar num browser chamado Argo - começou a trabalhar
no projecto.
Os dois trabalharam juntamente no começo do desenvolvimento do CSS.
Em 1995 eles apresentaram sua proposta e finalmente, o W3C – World
Wide Web Consortium – que tinha acabado de nascer, interessou-se pelo
projecto e resolveu criar uma equipa, obviamente liderada por Håkon e Bert
Bos.
O resultado apareceu logo, em 1996, eles lançaram a recomendação
oficial pelo W3C do CSS Level 1 (CSS 1).
Dois anos depois, no dia 12 de Maio de 1998, eles lançaram a
recomendação do CSS de nível 2. A segunda versão das Folhas de Estilo para
Web.
O nível 3 do CSS ainda está em desenvolvimento. Mas sabemos que as
facilidades serão muitas, como por exemplo, criar bordas arredondadas sem o
uso de imagens, ou definir duas imagens como background de um mesmo
objecto.

14
Escola Secundária de Barcelos

Javascript

O que é?

Javascript é uma linguagem de programação criada pela Netscape em


1995, que a princípio se chamava Livescript, para atender, principalmente, às
necessidades de validação de formulários e interacção com a página. Assim, foi
feita como uma linguagem de script. Javascript tem sintaxe semelhante à do
Java, mas é totalmente diferente no conceito e no uso. É interpretada, ao invés
de compilada e possui óptimas ferramentas padrão para listagens (como as
linguagens de script, de modo geral). Além de uso em browsers para processar
páginas HTML dinâmicas, o Javascript é hoje usado também na construção do
navegador Mozilla Firefox, o qual oferece para a criação de sistemas GUI todo
um conjunto de ferramentas (na sua versão normal como navegador, sem a
necessidade de nenhum software adicional), que incluem (e não apenas) um
interpretador de Javascript, um comunicador Javascript <-> C++ e um
interpretador de XUL, linguagem criada para definir a interface gráfica de
aplicações.

Utilização no projecto

O Javascript é utilizado na minha página apenas para mostrar mensagens


de sucesso ou erro quando se efectuar o login, quando se faz logout, quando
se insere empresas na base de dados, quando se activa/desactiva uma
empresa e quando se elimina uma empresa. Optei por esta linguagem apenas
porque já conhecia um exemplo daquilo que queria fazer e foi só necessário
implementar na minha página Web. É necessário recordar que não aprendi
javascript nas aulas ao longo dos três anos do meu curso, daí a não elaboração
do código completo e apenas uma adaptação do mesmo na página.

15
Escola Secundária de Barcelos

História

O Javascript foi desenvolvido originalmente por Brendan Eich da


Corporação Netscape Communications sob o nome Mocha, depois renomeada
para Livescript, e finalmente para Javascript. A troca do nome Livescript para
Javascript ocorreu, por coincidência, na mesma época que a Netscape
adicionou o suporte à linguagem Java no seu browser, Netscape Navigator.
Devido a esta coincidência, muitos passaram a crer que Javascript e Java são
versões diferentes da mesma linguagem.
As mais recentes versões do Javascript baseiam-se na padronização da
ECMAScript. Desta mesma especificação derivam outras linguagens, como, por
exemplo, o ActionScript, usado pelo Adobe/Macromedia Flash.

16
Escola Secundária de Barcelos

Servidor Apache

O que é?

É o mais bem sucedido servidor Web livre. É a principal tecnologia da


Apache Software Foundation, responsável por mais de uma dezena de
projectos envolvendo tecnologias de transmissão via Web, processamento de
dados e execução de aplicativos distribuídos.
O servidor é compatível com o protocolo HTTP versão 1.1. Suas
funcionalidades são mantidas através de uma estrutura de módulos, podendo
inclusive o usuário escrever seus próprios módulos — utilizando a API do
software.

Utilização no projecto

No meu projecto, o servidor Apache é, obviamente, o servidor utilizado


para fazer a página Web funcionar na sua totalidade. Optei por usar esta
ferramenta porque existiam “packs” que permitiam “juntar” o Apache com o
MySql. A ferramenta que utilizei foi o “Xampp”. É muito conhecida e foi
recomendado pelo professor da disciplina de base de dados.

17
Escola Secundária de Barcelos

História

O servidor Apache (ou Apache Server) surgiu no National Center of


Supercomputing Applications (NCSA) através do trabalho de Rob McCool. Ao
sair da NCSA, McCool parou de trabalhar no software (que nessa época recebia
justamente a denominação NCSA) e então várias pessoas e grupos passaram a
adaptar o servidor Web às suas necessidades. No entanto, foram Brian
Behlendorf e Cliff Skolnick os principais responsáveis pela retomada do
projecto, contando logo em seguida com o apoio de Brandon Long e Beth
Frank. Estes últimos tinham a tarefa de continuar com o desenvolvimento do
servidor, mas pela NCSA. Não demorou muito para que eles se juntassem ao
Apache Group.
A origem da Fundação Apache (Apache Foundation) vem daí: Brian
Behlendorf e Cliff Skolnick passaram a controlar "patches" (adição de recursos
ou correcções) atrás de uma lista de discussão. Dessa lista foi formado o
grupo, constituído inicialmente de 8 pessoas. O nome da fundação parece ter
sido baseado nessa característica (uso de patches), já que pode ser
interpretado como um trocadilho com a expressão em inglês "a patchy". No
entanto, segundo os desenvolvedores do servidor, o nome é baseado numa
tribo americana de nome Apache.
Teve a sua primeira versão oficial (0.6.2) lançada em 1995.

18
Escola Secundária de Barcelos

Projecto

“+ Barceluz” – Directório de empresas


O “+ Barceluz” é um directório de empresas on-line desenvolvido com a
principal finalidade de dar a conhecer aos habitantes do concelho de Barcelos
todas as empresas em actividade no concelho em questão, organizadas por
categorias e com a especial inclusão dos seus dados mais relevantes (nome,
telefone, e-mail, site, localidade, etc.). É um website livre (não necessita de um
registo para o poder visitar) e inclui uma parte administrativa bastante
interactiva.

Os menus

Passando à descrição mais detalhada, o “+ Barceluz” tem dois menus que


são muito importantes: o menu de topo e o menu lateral.

19
Escola Secundária de Barcelos

No menu de topo existem vários itens, com diferentes funções:


• Home: Página inicial, onde está disponibilizada uma breve apresentação
da página e as últimas cinco empresas adicionadas ao site;
• Directório: Listagem de categorias das empresas (mapa de categorias);
• Submeter: Zona da página com a finalidade de
adicionar empresas à base de dados (apenas disponível
para administradores e representantes de empresas.);
• Termos: Termos de utilização da página (apenas
texto);
• Política de privacidade: Política de privacidade da
página (apenas texto);
• Contactos: Zona da página com um formulário para
contactos com administradores. Para o fazer, será
necessário fornecer o nome e e-mail para identificação.
• Sobre: Zona da página com informações sobre a
página Web.

20
Escola Secundária de Barcelos

O que é também importante referir é que o menu de topo nunca sofre


alterações, ou seja, é “fixo”, ao clicar em qualquer ligação dentro da página,
seja ela qual for, o menu de topo mantém-se, o que muda é o conteúdo na
parte central. Isto é conseguido através de “includes” em PHP, ou seja, na
parte que corresponde ao centro, há uma variação consoante o endereço em
que se encontra. Vejamos o exemplo:

Conteúdo da página Web (centro)

Neste exemplo, apenas se vê o centro da página. Ao clicar no item


“Sobre” do menu de topo, aparece-nos um texto de descrição sobre o site. O
mesmo acontece com todos os outros itens do menu. Resumindo, a única parte
manipulável é o centro. Mas, no que diz respeito ao menu lateral, ao clicarmos
no botão login, poderão aparecer-nos diferentes mensagens. Vamos falar então
sobre os registos e as respectivas sessões.

Registo

Apesar de o meu site não precisar de registo, é possível fazê-lo caso seja
do interesse do visitante fazer parte dos anunciantes de empresas. Para ser
representante de uma empresa, o registo é a primeira etapa.
Ao clicarem “registar” ( ) no formulário de login, irá
aparecer outro formulário para inserção de dados a fim de o utilizador passar a
ser um anunciante.

21
Escola Secundária de Barcelos

Esse formulário irá ter campos para inserção de nome de utilizador,


password e respectiva confirmação, telefone e e-mail, como mostra a figura a
seguir:

22
Escola Secundária de Barcelos

Formulário de registo de utilizador

Depois de inseridos os valores, irá aparecer uma mensagem que


informará acerca do resultado da operação.
• Se a password ou o nome estiverem em falta, irá aparecer:

• Se as passwords não estiverem iguais (password e password


(confirmação)),
mostrará:

• Caso nenhuma das últimas hipóteses se verifique e o registo seja,


então, efectuado com sucesso, aparecerá:

Agora que o registo foi bem sucedido, o utilizador podem então adicionar
empresas à base de dados e passará então a ser o anunciante/representante
dessa (s) empresa (s).
É importante referir também que os administradores (que não precisam
de registo, pois já pertencem de inicio à base de dados) têm também
permissão para inserir empresas tal como os outros utilizadores, e essas

23
Escola Secundária de Barcelos

empresas não serão consideradas representadas por um utilizador específico,


mas sim por todos os administradores.

Login

No “+ Barceluz”, o login apenas pode ser efectuado se o utilizador for um


administrador ou um anunciante de uma determinada empresa devidamente
autorizado (como já foi referido). Para o fazer, é necessário fornecer um nome
de utilizador e uma password, que deverão estar guardados na tabela de
utilizadores da base de dados.
Deve-se então utilizar o seguinte formulário:
Como se pode verificar, o utilizador “kito” vai tentar
identificar-se no site. Se houver sucesso nesta
operação, será mostrada uma mensagem a dizer:
“Bem-vindo, kito”. Caso contrário, Aparecerá uma
mensagem de erro a dizer: “Utilizador não existe…”.

Login (Base)
Sabendo que o utilizador “kito” é um administrador do site, sabemos
também que poderá acrescentar empresas utilizando a zona de “Submeter” da
página. O mesmo aconteceria se fosse um anunciante de empresa (s), mas não
se fosse um visitante normal.
Vejamos os seguintes casos…
• Ao entrar com o utilizador “kito”:

- Esta será a caixa de login depois de nos


identificarmos.

Login (depois de se identificar)

-Esta será a nossa mensagem, que aparecerá no centro da página,


sobrepondo-se ao texto existente. Aparecerá durante cerca de cinco
segundos, e depois desaparecerá, a não ser que
antes o utilizador clique n botão com um “X”
vermelho para a fechar.

24
Escola Secundária de Barcelos

Mensagem de sucesso no login

• Ao entrar com o utilizador (por exemplo) “Altair” (que não existe):


- A caixa de login permanecerá sem
alterações.

Login (depois do erro na identificação)


- Esta será a nossa mensagem, que aparecerá
no centro da página, sobrepondo-se ao texto existente, tal como a
anterior. Este efeito conseguiu-se através de
Javascript, não desenvolvido por nós,
mas sim adaptado e implementado na página.

Mensagem de erro no login

Depois de ser efectuado o login, o utilizador poderá então mudar os seus


dados (nome, password, telefone e e-mail). O procedimento será igual ao do
registo, mas com a diferença de que os campos do formulário estarão
preenchidos com informação relativa ao utilizador em questão. As mensagens
serão praticamente as mesmas.
Para aceder a esta parte, basta clicar em “editar dados” no formulário de
login, como mostra a figura:

Hiperligação para formulário de edição de dados de utilizador

Se clicarmos em “logout”, a sessão é destruída.

25
Escola Secundária de Barcelos

A função de pesquisa

Como podemos verificar, logo abaixo do formulário de login e da listagem


de categorias principais, no menu lateral, existe um outro formulário com a
função de pesquisa. Isto apenas servirá para procurar empresas que tenham
nome, história ou descrição semelhantes ao que foi inserido na “input box” do
formulário. Vejamos o seguinte exemplo:
• Procuramos uma empresa com o nome “Megatrónica”. Inserimos o
nome da empresa no formulário, como mostra a imagem:

Formulário de pesquisa, com a “text box” preenchida com o nome da empresa


a procurar – “Megatrónica”

• Agora, se clicarmos em Procurar, o que nos aparece, é o seguinte:

Resultado da pesquisa de empresa com o nome “Megatrónica”:

Como podemos ver, a página apresenta-nos uma lista de empresas. Neste


caso, como o nome foi muito específico, apenas apresentou uma. Se a
pesquisa fosse feita por informática (por exemplo) a página iria retornar o
seguinte:

Resultado da pesquisa por “informática”

26
Escola Secundária de Barcelos

Se pesquisarmos, por “krt”, a pesquisa não pode retornar nada porque


não existem empresas na base de dados com esse nome, nem existe nenhuma
empresa com a palavra “krt” na história ou na descrição. Logo, o resultado
será este:

Resultado da pesquisa por “krt”

Como se pode verificar, a página Web mostrou uma mensagem a dizer


que não existe qualquer registo na base de dados com a palavra “krt”, tanto no
nome como na história ou descrição.
Se a pesquisa fosse feita por “mega”, a página também apresentaria a
empresa “Megatrónica”.
Ainda assim, esta secção não foi trabalhada muito profundamente, porque
não se pode considerar um sistema de pesquisa completo. Por exemplo, se
procurasse-mos por “megatronica”, não iriam aparecer resultados. Isto porque
este sistema de pesquisa é sensível a acentos, apesar de não ser sensível a
maiúsculas e minúsculas. Será um plano para o futuro, visto que o tempo não
foi suficiente para implementar um sistema de pesquisa mais elaborado. Existe
uma tabela de tags que só tem razão para existir se existir se o sistema de
pesquisa for mais elaborado, mas, como ainda não está, essa tabela irá ficar
sem qualquer função até que esse sistema de pesquisa seja desenvolvido.

As secções “Termos”, “Política de privacidade”, ”Contacto”


e “Sobre”

Estas secções não merecem grande destaque na minha página Web. Ao


contrário da secção “Contacto”, que contém um formulário, todas as outras
têm apenas texto. Mas até mesmo esta secção não tem grande utilidade, visto

27
Escola Secundária de Barcelos

que seria necessário um servidor de e-mail instalado, e não tive essa


possibilidade.

28
Escola Secundária de Barcelos

Submeter dados

Se tentarmos inserir dados (empresas) através da secção “Submeter”,


temos obrigatoriamente de estar identificados como administradores ou
anunciantes.

Vejamos o que acontece quando isso não se verifica:

Secção “Submeter” da página Web (Quando é aberta por um visitante normal)

Se formos simples visitantes da página, é isto que acontece ao tentar


aceder à secção “Submeter”. Mas, se estivermos identificados como
administradores ou anunciantes, o resultado será este:

Ficamos com um formulário pronto a


preencher com dados de empresas para
adicionar à base e dados.
Se os dados das empresas forem inseridos
por um anunciante, esse anunciante passará
a representar essa empresa.

Secção de Submissão de Dados quando o login


é feito como administrador ou anunciante
(imagem incompleta)

29
Escola Secundária de Barcelos

O ficheiro que contém o código do formulário tem também código para


validar a entrada de utilizadores. Se houver uma sessão iniciada, a página irá
apresentar o formulário mostrado na figura anterior. Senão, irá apresentar a
mensagem a pedir a identificação (login).
O código é:
<?php
if (isset($_SESSION["login_usuario"]) AND
isset($_SESSION["senha_usuario"])) {
$login_usuario = $_SESSION["login_usuario"];
$senha_usuario = $_SESSION["senha_usuario"];
?>
//Código do formulário

<?php
}else{
?>
//Código da mensagem

Ao clicar na “select box” , ela vai buscar à base de


dados todas as categorias lá existentes, inclusive as subcategorias, e ordena-
as segundo a sua dependência, ou seja, se houver alguma subcategoria de
alguma categoria, como por exemplo design (que tem como categoria principal
a informática), a “select box” ordena-as e apresenta-as de forma a que haja
uma maior organização e para ser mais fácil para os administradores inserirem
os dados.
Eis como aparecem os dados dentro select box:

Select box

Consegui que fosse feita uma ordenação automática


porque fiz dois ciclos, um dentro do outro, em PHP, em que o primeiro
procurava por registos de categorias principais (com o “cod_catcategoria” igual
a 0) e apresentava-as, e o segundo ciclo procurava por empresas em que o seu

30
Escola Secundária de Barcelos

“cod_catcategoria” seja igual ao “cod_categoria” da empresa anteriormente


encontrada. Se encontra-se, retornava valores, caso contrário, não
apresentava resultados, logo preenchia automaticamente a “select box”

31
Escola Secundária de Barcelos

Eis o código, onde os paços estão um pouco melhor explicados:


<select name="categoria">
<option selected="selected">Selecionar categoria...</option>
<?php
//primeira consulta (categorias principais)
$consulta="SELECT * FROM categoria WHERE
cod_catcategoria=0";
$result=mysqli_query($ligax, $consulta);
$nregistos=mysqli_num_rows($result);
//inicio do primeiro ciclo for
for ($i=0;$i <$nregistos; $i++) {
$registo=mysqli_fetch_assoc($result);
?>
//Preenchimento da select box, com as categorias principais
<option class="cat" name="cod_categoria" "value="<?php echo
$registo['cod_categoria']; ?>"><?php echo $registo['nome']; ?></option>
<?php
//segunda consulta (subcategorias pertencentes à categoria principal encontrada
anteriormente)
$consulta2="SELECT * FROM categoria WHERE
cod_catcategoria='". $registo['cod_categoria'] ."'";
$result2=mysqli_query($ligax, $consulta2);
$nregistos2=mysqli_num_rows($result2);
for ($o=0;$o <$nregistos2; $o++) {
$registo2=mysqli_fetch_assoc($result2);
//preenchimento da select box com as subcategorias e fim do segundo ciclo (em “<?php

}?>”)
?><option class="cate" name="cod_categoria" value="<?php echo
$registo2['cod_categoria']; ?>"> - <?php echo $registo2['nome']; ?
></option><?php }?>

// fim do primeiro ciclo


<?php } ?>

</select>

32
Escola Secundária de Barcelos

33
Escola Secundária de Barcelos

Listagem de empresas por categorias

Esta secção irá apresentar-nos os dados referentes às categorias. É


necessário ter em conta que a uma categoria poderá ter várias subcategorias e
estas, por sua vez, podem ter várias empresas. Quando seleccionamos uma
categoria a partir do menu lateral ou a partir de “directório” (no menu de topo)
a

página Web irá mostrar-nos o seguinte:

Listagem de categorias

Agora, ao clicarmos numa categoria, é apresentada uma listagem de


subcategorias e empresas pertencentes a esta.
Escolhemos, por exemplo, a categoria “Informática”:

Listagem das subcategorias da categoria informática

Neste caso, como podemos verificar, a categoria Informática não tem


empresas a ela associadas, mas tem duas subcategorias: Design e Lojas de
Informática. Se agora clicarmos, por exemplo, na subcategoria Design teremos
todas as empresas associadas à categoria Informática e à subcategoria Design.
O

que nos aparece é isto:

Listagem de empresas da subcategoria Design

34
Escola Secundária de Barcelos

Ao clicarmos em “Webtuga”, haverá o redireccionamento para a página


dessa empresa, onde serão apresentados todos os dados relativos a essa
empresa. Será o tema do próximo capítulo.

Página de empresa

A página de empresa apresenta dados referentes à empresa por


diferentes secções:
• Geral: contém o logótipo, o nome e o site da empresa;
• História e Descrição: contém a história e a descrição da empresa;
• Contactos: contém nº de telefone, código postal e e-mail da
empresa;
• Mapa e fotos: contém o mapa do Google Maps e as fotografias da
empresa;
Nesta parte do site, apenas não consegui incluir a última secção daquelas
referidas em cima, visto que não é muito fácil conseguir as coordenadas de
todas as empresas e nem todas as empresas têm fotos disponíveis na sua
página Web. O que irei disponibilizar será um exemplo de como a página ficará
quando tiver as fotografias e as coordenadas de todas as empresas e conseguir
optimizar a secção do mapa. Será, portanto, um plano futuro, visto que não
tive tempo para incorporar completamente esta parte na nossa página Web e
os conhecimentos para o efeito seriam apenas adquiridos por mi, sem qualquer
ajuda.
De resto, tudo o que estava previsto foi conseguido e não tive de adaptar
nada por falta de conhecimentos ou por falta de tempo. Consegui aquilo que
era essencial, que era conseguir fazer o código para apresentar todos os
valores da base de dados relativos à empresa seleccionada.
O que nos aparece quando clicamos numa empresa (por exemplo, a
empresa “Webtuga”) é o seguinte (relembrando que a 2º secção não está
totalmente desenvolvida, pois aquilo que é apresentado é apenas um exemplo
do que vai ficar no final):

35
Escola Secundária de Barcelos

Página de empresa – 1º parte (Secções: Geral; História; Descrição)

Página de empresa – 2º parte (Secção de mapa e fotos)

36
Escola Secundária de Barcelos

Secção Administrativa

Esta é a parte que torna o meu projecto mais interessante, mas também é
a mais difícil de fazer. Consiste em incluir, na barra de menus de topo, um
novo item chamado “Administrar” quando alguém fizer o login. Como existem
dois tipos de utilizadores, o resultado será diferente. Caso se seja um
administrador, aparecerá uma página idêntica à página há página de
directório, ou seja, uma listagem de categorias. Ao navegarmos ao longo desta
secção, o que nos vai aparecer ao clicar numa empresa será, ao contrário do
que vimos anteriormente, um formulário semelhante ao da secção “Submeter”,
mas com os campos preenchidos com os dados da empresa. Para editá-las
basta mudar os dados que queremos. Caso o utilizador seja um anunciante de
empresas, aparecerão as empresas que ele representa. Ao clicarmos em cada
uma delas, o resultado será igual ao da secção de administradores: aparecerá
um formulário com os campos preenchidos.
Vejamos as imagens:
• Depois de fazer o login, aparecerá um novo item no menu de topo:

Item “Administrar” no menu de topo, que aparece quando é feito o login.

• Se o utilizador em questão for um administrador, ao clicar no item


“Administrar”, a página será esta:

37
Escola Secundária de Barcelos

Página de administração quando o login é efectuado como administrador

É de notar a frase em baixo: “Todas as empresas estão activas. Isto


porque não há empresas inactivas, e se alguma empresa estivasse inactiva, ou
seja, se o campo da base de dados activa tivesse valor “0”, a mensagem
mostraria o nº de empresas inactivas e pediria para activar.

38
Escola Secundária de Barcelos

Caso existisse, por exemplo, uma empresa inactiva, a frase seria esta:

Frase que indica o número de empresas inactivas do site e pede para activar.

Agora, se quisermos activar essa empresa, podemos aceder à secção de


activação de empresas, clicando em activar. Essa secção terá os nomes das
empresas e um ícone que as antecede, como podemos ver na figura a seguir:

Secção para activação de empresas

Agora, se clicarmos no botão de activação ( ), a empresa passará de


inactiva a activa (mudando apenas o valor do campo “activa” na base de
dados de 0 para 1). Vejamos as imagens:
• Ao clicarmos no botão, irá aparecer:

• Depois, se a operação for bem sucedida, a mensagem será:

• Caso contrário, aparecerá:

As duas mensagens anteriores são apresentadas na secção de activação,


mas, se só restar uma empresa para activar, ao clicar no ícone de activação, a
mensagem seguinte será apresentada na página de administração inicial:

Para o administrador saber se os dados da empresa inseridos são ou não


correctos (isto para saber se pode ou não activar a empresa), basta clicar
sobre o nome da empresa e aparecerão todos os dados da empresa em
questão apresentados exactamente como na secção da página de empresa.
39
Escola Secundária de Barcelos

Na secção de administração, existia também duas ligações:

Ligações “Adicionar empresa” e “Adicionar categoria” da secção


administrativa

Estas ligações redireccionam o administrador para duas secções distintas.


Se clicarmos em “Adicionar empresa”, o que aparecerá será a secção de
submeter dados (já vista anteriormente). Mas, se clicarmos em Adicionar
categoria, o que nos aparecerá será um formulário para inserção de categorias,
que terá o aspecto seguinte:

Formulário de inserção de categoria

Cada campo deste formulário corresponde a um campo da tabela


“categoria”, presente na base de dados., e os dados serão inseridos nessa
base de dados. Se clicarmos na “select box” , o que nos
vai aparecer vai ser uma lista de todas as categorias principais existentes na
base de dados. Se escolhermos uma dessas categorias, a categoria que iremos
inserir passará a ser uma subcategoria da categoria que nós escolhemos.
É importante referir que só poderão ser inseridas categorias que ainda não
existam, caso contrário irá aparecer uma mensagem de erro a dizer que a
40
Escola Secundária de Barcelos

categoria inserida já existe e a pedir para inserir outro nome. Se os campos do


formulário não estiverem devidamente preenchidos, aparecerá uma
mensagem a dizer que existem campos em falta e a pedir para rever os
campos.

41
Escola Secundária de Barcelos

Agora, ao entrarmos numa categoria ou numa subcategoria da secção


administrativa, irão aparecer a empresas a ela associadas. O aspecto será o
seguinte:

Aspecto da listagem de empresas por categoria na página de administração

É um aspecto muito idêntico ao das páginas de categoria da secção


“Directório” (menu de topo), mas com a diferença de que, à frente das
empresas, existem dois ícones que servirão para eliminar a empresa e para a
desactivar, ou seja, torná-la oculta. Isto só será possível, obviamente, por parte
dos administradores.
Portanto, se clicarmos no primeiro ícone ( ), será apagada a empresa. O
resultado será este:
• Ao apagar, por exemplo, a empresa “M. Oliveira Informática”,
aparecerá uma mensagem no centro que será:

• Depois, será redireccionada para a página administrativa inicial, com


a mensagem:

o Se existir sucesso na operação:

o Se não tiver acontecido o que era pretendido:

Se clicarmos no segundo ícone ( ), iremos desactivar a empresa. O


resultado será idêntico a eliminar, mas com a diferença óbvia de que as
mensagens dirão que a empresa foi activada ou que não foi possível desactivar
a empresa, dependendo do resultado da operação, e a mensagem anterior dirá
“A desactivar… Aguarde”.

42
Escola Secundária de Barcelos

Mas, se clicarmos no nome da empresa, iremos ter um formulário em que


os dados da empresa em questão estarão visíveis e, para altera-los, mudamos
os dados desejados e clicamos no botão “Alterar Dados”. De seguida,
aparecerá uma mensagem que comenta sobre o sucesso da operação de
alteração de dados:
Vejamos as imagens:
• Ao entrar na secção administrativa da empresa, o formulário será:

Formulário da secção administrativa da página Web com os campos


preenchidos com dados da empresa

• Depois de clicarmos em Alterar:


o Se a operação for bem sucedida:

o Se a operação não tiver o sucesso desejado:

43
Escola Secundária de Barcelos

Depois de fazer o login como anunciante (utilizador normal), ao clicar no


item “Administrar”, a página irá conter o seguinte:

Página de administração quando o utilizador é um anunciante

Neste caso, o utilizador que fez o login apenas representa a empresa


“Webtuga”.
Agora, ao entrar numa página de empresa, por exemplo “Webtuga”, o
aspecto da página será exactamente o mesmo da secção de administradores,
sem qualquer diferença. As mensagens que se seguirão à conclusão da
operação também serão as mesmas, dependendo do sucesso ou insucesso da
operação, claro.

44
Escola Secundária de Barcelos

Últimas considerações
Depois de ter estado a trabalhar no projecto desde o início do ano, posso
afirmar que o projecto não está finalizado a 100%, pois não consegui fazer
tudo aquilo que queria. Desde logo a secção de fotos e mapa da empresa era
uma parte que eu gostava de implementar, mas infelizmente não foi possível.
Na parte das fotos, era minha intenção colocar um formulário para submissão
de fotos disponível para administradores e anunciantes, mas não consegui por
falta de conhecimentos, e a parte do mapa seria, depois de adicionar as
coordenadas, o mapa era automaticamente gerado, mas não foi possível, não
só pela dificuldade em implementar essa parte, mas também pela dificuldade
em conseguir recolher as coordenadas das empresas.
De resto, tudo foi conseguido, apenas alguns aspectos de design poderiam
ser melhorados, mas não é nada de muito extraordinário.
Em suma, posso dizer que os objectivos principais foram conseguidos e o
essencial foi conseguido com um sucesso maior do que o que eu esperava.

45