Biblioteca Digital do IPG: Relatório de Projeto - Gestão de publicações de imóveis online

(1)

(2)

-i

f’{)Iit&fli(I) (III ,Gtia rd a

ESCOLA SUPERIOR DE TECNOLOGIA E GESTÃO INSTITUTO POLITÉCNICO DA GUARDA

PROJETO

GESTÃO DE PUBLICAÇÕES DE IMÓVEIS ONLINE

RELATÓRIO PARA A OBTENÇÃO DO GRAU DE LICENCIATURA EM ENGENHARIA INFORMÁTICA

Belmiro dos Santos Bernardo N.° 1009448

me

(3)

ESCOLA SUPERIOR DE TECNOLOGIA E GESTÃO

INSTITUTO POLITÉCNICO DA GUARDA

P R O J E T O

G

E S T Ã O D E PU B L I C A Ç Õ E S D E IM Ó V E I S

O

N L I N E

RELATÓRIO PARA A OBTENÇÃO DO GRAU

DE LICENCIATURA EM ENGENHARIA INFORMÁTICA

Belmiro dos Santos Bernardo

N.º 1009448

(4)

ESCOLA SUPERIOR DE TECNOLOGIA E GESTÃO

INSTITUTO POLITÉCNICO DA GUARDA

P R O J E T O

G

E S T Ã O D E

P

U B L I C A Ç Õ E S D E

I

M Ó VE I S

O

N L I N E

RELATÓRIO DE PROJETO SUBMETIDO COMO REQUISITO PARCIAL PARA

OBTENÇÃO DO GRAU DE LICENCIATURA EM ENGENHARIA INFORMÁTICA

Belmiro Bernardo

N.º: 1009448

Data de início: 01/05/2015

Data de Fim: 30/09/2015

Orientador: Prof. Rui Pedro Marques Pereira

(5)

FICHA DE IDENT IFICAÇÃO

Aluno: Belmiro dos Santos Bernardo Número: 1009448

Ano: 2015

Estabelecimento de ensino: Instituto Politécnico da Guarda

Escola Superior de Tecnologia e Gestão

Morada: Av.ª Dr. Francisco Sá Carneiro, 50 - 6300-559 Guarda Telefone: +351 271 220 100

Fax: +351 271 222 690 E-mail: ipg@ipg.pt

Curso: Engenharia Informática

(6)

Agradecimentos

A realização deste Projeto constitui um desafio chave para o corolário académico pretendido, tanto a nível do conhecimento adquirido, como da sua implementação prática, sendo a sua realização uma realidade consolidada. Nesta altura, é justo referenciar e agradecer a todos os que de alguma forma colaboraram, e tiveram um papel fundamental para que fosse possível alcançar os objetivos traçados.

- Assim, deixo um especial agradecimento ao meu orientador, Professor Rui Pereira, que para além de ter sido um bom professor ao longo do curso, foi um bom orientador, demonstrando as suas excelentes qualidades pessoais e académicas, por isso considero que todas as palavras são poucas ou insuficientes para exprimir toda a disponibilidade e paciência demonstrada ao longo do projeto.

-Agradeço à minha esposa (São), todo o carinho, paciência, compreensão, atenção e apoio incansável, nos melhores e piores momentos ao longo de todos estes anos, muitas vezes suportando as minhas ausências com muito sacrifício e redobrado trabalho. São, obrigada por me ajudares a crescer academicamente.

-Agradeço aos meus filhos (Joana e Ricardo), toda a compreensão que tiveram comigo enquanto pai stressado e cansado, pois muitas vezes, não estive presente nas suas brincadeiras favoritas, para aproveitar mais o tempo de estudo que me era exigido. Desculpem as minhas ausências enquanto pai, mas interpretem isto como um exemplo de dedicação para o alcance de um determinado objetivo na vida.

-Agradeço ao Instituto de São Miguel, nomeadamente ao diretor geral do Outeiro de S. Miguel, sr. Cónego Geada Pinto, todo o apoio e flexibilidade proporcionado ao longo destes anos.

-Por último e não menos importante, deixo uma palavra de agradecimento a todos os familiares e amigos, que de alguma forma me apoiaram, ainda que, discretamente.

(7)

II

RESUMO

Este projeto foi realizado no âmbito da disciplina da cadeira de Projeto de Informática, do 3.º Ano de Engenharia Informática. Tem como objetivo a elaboração de uma web site, que possibilite a Gestão de Publicações de Imóveis Online (arrendar, vender e gerir publicações).

O web site, foi desenvolvido de forma modelar através da criação de um módulo (módulo genérico), ficando em aberto a possibilidade de criação de um módulo para dispositivos móveis. A sua pertinência nasce com o facto de que, esta é uma área que movimenta um elevado volume de negócios, surge aqui a necessidade da existência de uma dinâmica a nível das ferramentas em utilização.

Tendencialmente as plataformas imobiliárias caraterizam-se como sendo estáticas, sem grande interatividade entre o cliente e a plataforma, estando estas um tanto ou quanto limitadas à inserção ou remoção dos seus anúncios. Com esta solução, pretende-se que o cliente final seja estimulado a visitar a página web e desta forma criar um ponto de partida para um possível negócio, interagindo através da sua área de cliente com os potenciais interessados.

Existem diversas plataformas com diversificadas funcionalidades, ou seja, já existe trabalho feito, embora não contemple no seu todo os requisitos da solução projetada, dado que estas soluções funcionam na ótica do utilizador enquanto cliente final.

Este projeto académico, tem como ponto forte, ser flexível o suficiente para se adaptar a diferentes cenários (arrendamento, venda e publicação de anúncios), para, além disso, o cliente beneficia da solução, pelo facto de não ter que pagar ou doar uma percentagem da sua venda a terceiros, a qualquer momento pode gerir o seu anúncio. Os interessados poderão encontrar o que procuram a preços mais vantajosos, dado não haver lugar a comissões por parte do vendedor. Propõe-se como objetivo geral a elaboração do módulo genérico, que possibilita a gestão de publicações de imóveis online (arrendamento, venda e publicação de anúncios). A solução terá como público alvo qualquer empresa que comercialize bens e produtos, desde que a solução se possa adaptar ao ramo de negócio em questão.

A nível de requisitos funcionais, esta, estará disponível através do módulo genérico, para acesso por qualquer dispositivo fixo ou móvel desde que tenham acesso à internet, posteriormente será implementado o módulo para dispositivos móveis de forma optimizada a nível de conteúdo e recursos para os mesmos.

Palavras Chave

(8)

III

AB STRAC T

This project was carried out under the discipline of Computer Project chair, the 3rd year Computer Engineering. It aims at developing a web site, which enables the Online Property Management Publications (lease, sell and manage publications).

The web site was developed in order to model by creating a module (generic module), leaving open the possibility of creating a module for mobile devices. Its relevance is born with the fact that this is an area that moves a high volume of business, here comes the need of the existence of a dynamic in terms of the tools in use.

Tend real estate platforms are characterized as being static, with little interaction between the client and the platform when these somewhat limited to the insertion or removal of your ads. With this solution, the end user is intended to be encouraged to visit the web page and thus create a starting point for a possible deal, interacting through its client area with potentially interested parties.

There are several platforms with diverse functionalities, or work done already exists, although not contemplate a whole the requirements of the designed solution, since these solutions work from the viewpoint of the user as the final customer.

This academic project's, strong point, be flexible enough to adapt to different scenarios (lease, sale and advertising of ads) for further customer benefits from the solution by not having to pay or donate a percentage of its sale to third parties at any time you can manage your ad. You may find what they seek the most advantageous prices, as there is no place to commissions by the seller. It is proposed as a general objective the development of the generic module, which enables the online real estate publications management (leasing, sale and advertising of ads). The solution will target public any undertaking marketing goods and products, since the solution can adapt to the type of business in question.

The level of functional requirements, this will be available through the generic module to access any fixed or mobile device provided they have access to the Internet, will be further implemented the module for mobile devices optimally in terms of content and resources for the same .

Keywords

(9)

IV

ÍNDICE

Resumo ... II Abstract... III Índice ... IV Índice de Ilustrações ... VII Índice de Figuras... VII Índice de Diagramas ... IX Lista de siglas... X 1. Introdução... 1 1.1 Objetivos ... 1 1.2 Estrutura do Relatório... 2 2. Estado da Arte ... 3 2.1 Vantagens... 9 2.2 Desvantagens ...10 3. Metodologia aplicada ...11

4. Tecnologias e ferramentas a utilizar ...12

5. Planeamento do projeto...13 6. Modelação do sistema...15 6.1. Diagrama de Arquitetura ...16 6.2. Casos de Uso...16 6.3. Casos de Teste ...20 6.4. Diagramas de Sequência ...21 6.5. Diagramas de Actividade...24

(10)

V

6.6. Diagrama de Estados ...25

6.7. Modelo Entidade Relacionamento ...25

7. Implementação ...27

7.1 Base de dados – Modelo Relacional ...27

7.2 Dicionário de dados ...28

7.3. Codificação ...31

7.4 Configuração de aplicativos ...31

7.5 A Home Page ...35

7.6 Área Administrativa Clientes e Administrador ...53

7.6.1 Separador Início Clientes e Administrador...56

7.6.2 Editar Perfil Cliente ...58

7.6.3 Registar Publicações ...59 7.6.4 Aguardam Aprovação...60 7.6.5 Anúncios Pendentes ...61 7.6.6 Anúncios Ativos ...61 7.6.7 Renovar Anúncios ...62 7.6.8 Anúncios Terminados...62

7.6.9 Caixa de Entrada Mensagens ...62

7.6.10 Emails Respondidos ...63 7.6.11 Apoio ao Cliente...64 7.6.12 Segurança ...65 8. Conclusões ...70 8.1. Considerações finais ...70 8.2. Perspetivas futuras ...71 Bibliografia ...72

(11)

VI

Lista de Anexos ...74

Anexos ...75

Anexo A – Home Page ...77

Anexo B – Procura Avançada ...89

Anexo C – Login Bem Sucedido ...98

Anexo D – Registar Publicações ... 103

Anexo E – Outros Códigos... 107

Anexo F - Detalhes Tabela Relacional ... 115

Apoios ... 115 Clientes ... 116 Imoveis... 117 Mailadmin ... 118 Mailcliente ... 119 Multimedia... 120

(12)

VII ÍNDICE DE ILUSTRAÇÕES

Tabela 1 – Descrição de um caso de uso Registar Anúncio de Imóvel ... 19

Tabela 2 – Caso de Teste Executar Login... 20

Tabela 3 – Caso de Teste Consultar Estado do Anúncio... 21

Tabela 4 – Caso de Teste Consultar Estado do Anúncio do Imóvel ... 21

Tabela 5 – Dicionário de Dados da Tabela Apoios ... 28

Tabela 6 - Dicionário de Dados da Tabela Clientes ... 28

Tabela 7 - Dicionário de Dados da Tabela Imóveis... 29

Tabela 8 - Dicionário de Dados da Tabela MailAdmin... 30

Tabela 9 - Dicionário de Dados da Tabela MailCliente ... 30

Tabela 10 - Dicionário de Dados da Tabela Multimédia... 30

ÍNDICE DE FIGURAS Figura 1 - Prestashop ... 4

Figura 2 – Quadro de Pesquisas do Google Trends... 5

Figura 3 - Magento ... 6

Figura 4 - OpenCart ... 7

Figura 5 - Wordpress ... 9

Figura 6 - Mapa de Gantt proposto... 14

Figura 7 - Mapa de Gantt cumprido ... 14

Figura 8 – Diagrama da plataforma Web... 15

Figura 9 – Diagrama de Arquitetura do projeto... 16

(13)

VIII

Figura 11 – Configuração da ligação à Base de dados local... 34

Figura 12 – Título da página configurado na opção Title ... 35

Figura 13 – Aspecto inicial da Home Page ... 36

Figura 14 – Um aspecto ilustrativo da produção de banner em Adobe Flash... 36

Figura 15 – Vista final do banner feito em flash ... 38

Figura 16 – Anúncio da Google AdSense ... 40

Figura 17 – Aspeto após colocação do código na zona de login ... 44

Figura 18 - Aspeto após colocação do código na zona de anúncio do cliente... 45

Figura 19 - Aspeto após colocação do código na zona de procura avançada ... 47

Figura 20 – Aspeto geral após a formatação da secção de procura ... 49

Figura 21 – Aspecto após a formatação da secção de imóveis 1 e 2 ... 51

Figura 22 – Aspecto após formatção completa da secção Home Page... 53

Figura 23 – Imagem ilustrativa da área de autenticação em caso de erro de dados... 54

Figura 24 – Imagem ilustrativa de Login com sucesso na Área de Administrador ... 56

Figura 25 – Imagem ilustrativa do painel inicial da área de clientes... 57

Figura 26 – Imagem ilustrativa da seção Perfil do utilizador ... 59

Figura 27 – Aspeto do formulário de registo de um imóvel ... 60

Figura 28 – Anúncio para aprovação na área Administrativa ... 60

Figura 29 –Anúncio pendente na área de Cliente... 61

Figura 30 – Exemplo da vista do Menu Anúncios Ativos ... 62

Figura 31 – Exemplo de alerta por falta de cumprimento de requisitos... 63

Figura 32 – Confirmação de envio com sucesso ... 63

Figura 33 – Imagem ilustrativa de Emails Respondidos ... 64

Figura 34 – Exemplo de solicitação de um pedido de ajuda na área de Clientes ... 64

(14)

IX ÍNDICE DE DIAGRAMAS

– Diagrama de Casos de Uso... 17

– Sequência Cliente ... 22

– Sequência Administrador... 23

– Atividade Registar e Publicar Anúncio de Imóvel... 24

– Diagrama de Estados Registar Anúncio ... 25

– Diagrama de Entidade Relacionamento (ER) ... 26

(15)

X

LISTA DE SIG LAS

API – Application Programming Interface; BD’s – Bases de Dados

CSS – Cascading Style Sheets;

CMS – Content Management System; CRM - Customer Relationship Management ESTEG – Escola Superior de Tecnologia e Gestão; FTP – File Transfer Protocol;

FIG – Figura

HTML – HyperText Markup Language; HTTP – HyperText Transfer Protocol; IPG – Instituto Politécnico da Guarda; MYSQL – Structured Query Language; PDO – PHP Data Object

SQL - Structured Query Language UML – Unified Modeling Language XP – Extreme Programming

(16)

1

1. INTRODUÇÃO

Este projeto foi realizado no âmbito da disciplina da cadeira de Projeto de Informática, do 3.º Ano de Engenharia Informática. Tem como objetivo a elaboração de um web site em linguagem PHP, que contemple a gestão de anúncios de Imóveis Online (arrendar, vender e gerir anúncios). A linguagem escolhida tem uma vertente de investigação, dado que não é lecionada no curso de Engenharia Informática, o que torna o projeto mais desafiante. Através do estado da arte, foi possível ficar com uma ilação sobre as principais aplicações existentes e suas funcionalidades, pois já existe trabalho feito embora não contemple no seu todo, os requisitos da solução projetada.

A Modelação de Software de qualidade, é essencial para fazer um planeamento detalhado, com a finalidade de pensar sobre as formas de construção, estimativas de tempo e material para a realização. Neste ponto, o desenvolvimento com qualidade é semelhante, pois também se trata de uma questão de arquitetura e ferramentas a associar para a produção da solução. As caraterísticas, funcionalidades e comportamento da solução, são assim reforçados de forma estática e dinâmica, neste caso, ao longo do processo de desenvolvimento, por meio de gráficos e diagramas produzidos no Microsoft Visio.

1.1 OBJETIVOS

Propõe-se como objetivo geral a elaboração do módulo genérico (permite o acesso a qualquer dispositivo com acesso à internet), que possibilite gestão de Anúncios de Imóveis Online (arrendar, vender e gerir anúncios). A solução terá como público alvo qualquer empresa que comercialize bens e produtos, desde que a seja adaptável ao ramo do negócio em questão.

A nível de requisitos funcionais, esta, estará disponível através do módulo genérico, para acesso por qualquer dispositivo fixo ou móvel desde que tenham acesso à internet, ficando em aberto a possibilidade de implementação de um módulo para dispositivos móveis, por forma a optimizar os conteúdos e recursos para este tipo de dispositivos.

(17)

2

1.2 ESTRUTURA DO RELATÓRIO

Tendo em conta as boas práticas de organização da informação apresentada, de forma a lidar melhor com a complexidade e para cumprir os requisitos exigidos sequencialmente, o projeto encontra-se organizado por capítulos numerados de 1 a 10, contendo sequencialmente a seguinte informação:

_{No capítulo 1, é feita uma introdução, onde se referem as vantagens e desvantagens do}

projeto;

 No capítulo 2, é feita uma análise relativa ao estado da arte, fazendo uma comparação das

principais soluções existentes;

 No capítulo 3, é referida a metodologia aplicada;

 No capítulo 4, são abordadas as tecnologias e ferramentas utilizadas;

 No capítulo 5, é feito o planeamento do projeto;

 No capítulo 6, é abordada a modelação do sistema;

 No capítulo 7, é abordado o tema sobre a implementação da solução;

 No capítulo 8, são feitas a conclusões e perspetivas futuras;  No capítulo 9, é informada a bibliografia consultada e utilizada;

(18)

3

2. ESTADO DA ARTE

Para se ter uma ideia sobre as soluções existentes e suas potencialidades, fez-se uma extensa pesquisa na internet, sobre soluções CRM’s, tendo como referência as plataformas mais conhecidas no momento. Fizeram-se algumas comparações, estudaram-se as principais vantagens e desvantagens, criando-se desta forma uma opinião sobre a sua pertinência para este projeto, sem dúvida alguma pode-se afirmar que já existe trabalho feito embora não contemple no seu todo, os requisitos da solução projetada.

Tendo necessidade de publicitar um anúncio sem grandes exigências, de forma fácil e com projeção nacional, poder-se-ia optar por utilizar serviços associados a plataformas de vendas generalista como o iol, sapo, olx e outras. Com apenas alguns cliques, coloca-se sem grande dificuldade um anúncio online. A desvantagem destas soluções é que o cliente terá que respeitar e aceitar as condições exigidas pelos fornecedores dos serviços na ótica de utilizador final.

Para ultrapassar esta forma de negócio, foram criadas as plataformas independentes que são completas e fornecem um serviço adequado à medida do negócio. Fomentando uma iteração dinâmica entre o cliente e a plataforma, ao mesmo tempo que são criadas condições para uma gestão da comunicação e negócio de forma eficiente, tudo isto é proporcionado na área de cliente estando este registado. Através de plataformas gratuitas, na sua versão base, seria difícil no geral conseguir obter uma solução apropriada para o modelo de negócio em questão, a nível da gestão de publicações (anúncios, vendas,

arrendamentos e gestão de pagamentos). Segundo (Benício, 2013) a designação de

Plataforma de E-commerce Open Soure, tem a ver com o facto de que são gratuitas e possuem código aberto, ou seja, qualquer pessoa ou empresa pode fazer o download gratuito do sistema e utilizá-lo e modificá-lo. O que tecnicamente chamamos de plataforma de e-commerce é o sistema que cria o FrontEnd, a parte da loja virtual que é visível por qualquer utilizador da Internet e o BackEnd, a área administrativa de uma loja virtual. A plataforma de e-commerce é o verdadeiro coração de um sistema de comércio eletrónico. As plataformas de e-commerce neste modelo avançam com esforço colaborativo de vários programadores que aderem ao projeto e criam extensões, plugins e soluções complementares ao código, uma das grandes vantagens destas plataformas é o seu constante processo de atualização.

(19)

4

Das plataformas gratuitas (ou com versões gratuitas e limitadas), que seguem este modelo, as mais conhecidas para soluções de e-commerce são: PrestaShop, Magento, Opencart e

Wordpress. Foi feita uma análise às suas potencialidades de e-commerce e verificou-se que

por vezes têm alguns custos associados, para tornar a solução mais completa.

Para efeitos de desenvolvimento, os custos da personalização dos recursos associados às soluções têm em média custos mais elevados para o Prestashop e OpenCart, isto porque, até aqui, estes sistemas eram os mais difíceis de personalizar, a solução virada para o WooCommerce, como o Wordpress é a que fica mais económica. A nível de serviços no geral são muito completas e de acordo com as exigências de mercado.

Prestashop:

Foi criada pelos franceses Bruno Leveque e Igor Schlumberger (Benício, 2013). Eles inspiraram-se em empresários com necessidade de uma solução de comércio eletrónico grátis, poderosa e simples. Bruno e Igor reconheceram essa necessidade e começaram a trabalhar no que hoje é conhecido como PrestaShop, a sua primeira versão foi lançada em maio de 2007, e no seu primeiro mês do lançamento, o software teve 1.000 downloads e traduzido para 13 idiomas em três meses. Mais tarde os autores do software criaram uma das primeiras soluções de comércio eletrônico no formato de mercado aberto, para que os membros da comunidade pudessem contribuir e proporcionar melhorias através de Add-Ons (ver Fig. 1), modelos e outros componentes para programadores e empresários.

(20)

5

Hoje, o software de código aberto da PrestaShop é utilizado por mais de 100.000 lojas em todo o mundo, com uma comunidade de cerca de 300.000 colaboradores que continua a crescer continuamente.

Utilizando o Google Trends pode verificar-se a evolução das pesquisas pelos termos Magento, PrestaShop, OpenCart e Wordpress. A nível mundial, o Prestashop foi pesquisado mais vezes em Espanha, seguido da França. É interessante destacar que esta plataforma possui maior realce na Europa. O Wordpress é de longe o mais procurado, como se pode verificar no gráfico da Figura 2.

Figura 2 – Quadro de Pesquisas do Google Trends Vantagens

 Dispõe de muitos recursos e funcionalidade (módulos, temas, serviços...)

 Back Office intuitivo e de fácil utilização

 Grande quantidade de plugins e extensões

 Possui integração nativa com formas de pagamento como PagSeguro e PayPal

 Painel Administrativo com bom visual, fácil utilização e configuração para o utilizador

 Possibilidade de Migrar a Loja de outro Sistema Open Source como Magento, Open

(21)

6 Desvantagens

• Alguns bugs com as atualizações (conflitos com módulos e AddOns após atualização para nova versão)

Magento:

Figura 3 - Magento

Este sistema web de e-commerce (Figura 3), foi criado por uma empresa americana de nome Varien (Benício, 2013). Começou a desenvolver o Magento em janeiro de 2007. A sua primeira versão pública ocorreu em 31 de março de 2008. Daí em diante foram sendo lançadas novas versões com diversas atualizações e correção de bugs variados. Devido à sua flexibilidade e robustez, o sistema despertou a atenção dos programadores, tendo tido uma rápida expansão, hoje em dia, tem uma comunidade de utilizadores elevada e regista em 2015, mais de 200.000 lojas em todo mundo. Curiosamente a palavra Magento tem maior pesquisa que o termo e-commerce no Google.

O Magento Community Ediition, é a versão gratuita do sistema, sendo a mais conhecida e utilizada no mundo, o que nem todos sabem é que o sistema ainda conta com mais duas versões pagas que trazem recursos novos (wikipedia.org, 2015).

Atualmente possui três versões:

• Community Edition (CE) - Versão gratuita, o suporte é dado pela comunidade em fóruns e via web.

• Enterprise Edition - Versão paga com suporte especializado e recursos avançados. • Magento Go – É uma solução média, para pequenas empresas e funciona na "Cloud",

(22)

7 Vantagens

 Possui maior número de funcionalidades e recursos nativos entre as plataformas

citadas

 Capacidade para lidar com grande quantidade projetos ecommerce

 Tem uma grande comunidade de utilizadores e programadores

 Possui muita variedade e quantidade de extensões, plugins e AddOns

 Conta com uma comunidade muito participativa

 É a plataforma que tem maior quantidade de lojas publicadas

 Está bem otimizada para os mecanismos de pesquisa

Desvantagens

 Serviço de alojamento no servidor são mais elevados, por ser um sistema robusto não funciona bem em servidores partilhados

 Devido à sua complexidade, exige mais tempo para implementação da loja virtual e também envolve maiores custos de desenvolvimento

 Maior custo de manutenção, pequenas alterações podem significar várias horas de trabalho de um programador, encarecendo muito o serviço

 A personalização de Layout e Design é considerada complexa

 O Painel Administrativo (Backend) é considerado complexo

Opencart:

(23)

8

O Sistema de ecommerce Open Cart (Figura 4), foi desenvolvido por Daniel Kerr (Benício, 2013), programador americano. Teve sua 1ª versão oficial lançada em janeiro de 2009. Devido à sua simplicidade e flexibilidade teve boa aceitação no mercado e conquistou uma boa popularidade.

Vantagens

 É o sistema mais leve dos 3 apresentados, possuindo menos exigências do servidor para funcionar bem

 Tem uma fácil Instalação e Configuração

 As Extensões, plugins e templates são mais baratos que os das outras soluções

 A comunidade de utilizadores e colaboradores tem crescido bastante

 Possui menores custos de manutenção

 Painel Administrativo de fácil utilização

 Recomendado para soluções de menos exigência de recursos e ferramentas

 Opção económica



Desvantagens

 Possui menos recursos e funcionalidades que as outras soluções

 Tem menos integrações com terceiros

 Back office fraco

(24)

9 Wordpress:

O WordPress, Figura 5, e todo o seu sistema de gestão de conteúdos, foi construído para que as pessoas que não estão familiarizadas com linguagem de programação, consigam adicionar ou alterar conteúdos num website. Esta ferramenta é por padrão um CMS (Content Management Systems) ou (em português Sistema de Gestão de Conteúdos). É dos mais utilizados na atualidade, para BLOGS e sites. Eis algumas vantagens e desvantagens desta plataforma:

2.1 VANTAGENS

• É totalmente gratuita

• Tem muitos plugins de fácil instalação e configuração

• Tem uma elevada quantidade de utilizadores

• Tem uma boa comunidade de programadores

• Boa documentação

• Atualizações frequentes

• Painel de Gestão e Controlo intuitivo

• Gestão de PINGS e TRACKBACKS

• Facilidade de instalação e configuração

(25)

10

2.2 DESVANTAGENS

• Como foi criado como sendo um CMS voltado para BLOGS, a hierarquia das páginas

é complexa e de difícil manipulação e gestão

• Quem faz templates para WordPress nota a falta de organização com a não

orientação a objetos dos mesmos, sendo necessário utilizar funções (existentes na documentação que está bem bem feita, mas carece de alguma hierarquia)

• Não há organização para o desenvolvimento de plugins por parte da comunidade

Após análise das 4 soluções mais conhecidas, pode concluir-se que poderá não existir claramente uma solução genérica para qualquer tipo de plataforma, isto porque cada caso deverá ser tratado de forma independente, ainda assim para projetos de ecommerce mais complexos, que envolvam elevada manipulação e configuração, a plataforma mais indicada será o Magento. Para projetos de menor exigência, que seja requerida uma implementação mais rápida, o PrestaShop e OpenCart são a melhor solução.

Se tivesse que optar por uma das plataformas para aplicar neste projeto, a escolha iria recair sobre o Prestashop ou Magento. Por opção própria e dado que se pretende criar uma solução que proporcione a aplicação prática de conhecimentos adquiridos ao longo do curso

de Engenharia Informática, será feita uma solução de raiz em formato modelar, ou seja, irá

ser desenvolvido o front office do website numa primeira fase, e seguidamente o back office, ficando em aberto a possibilidade de desenvolvimento do módulo para dispositivos móveis. Como é evidente este não é o melhor caminho para quem pretenda uma solução a curto prazo ou esteja limitado em termos económicos e temporais, para essa situação é aconselhada vivamente a opção por uma das plataformas gratuitas existentes no mercado, de forma a obter uma maior agilização do processo de produção. Por outro lado, querendo uma solução original, com recursos personalizados para um controlo total e aplicação de conhecimentos gerais aprendidos em engenharia informática, a criação da solução de raiz é uma boa opção, embora também tenha as suas desvantagens a nível prático e económico.

(26)

11

3. METODOLOGIA APLICADA

As metodologias tradicionais de desenvolvimento foram criadas num cenário muito diferente do atual. Há uns anos atrás, as limitações tecnológicas e a falta de ferramentas para a criação de software, tornavam o processo de desenvolvimento e manutenção dispendioso em termos económicos e temporais, por isso era essencial planear e documentar todo o processo de desenvolvimento do software para posteriormente ser implementado. Na atualidade, o cenário está muito mudado, por isso a metodologia escolhida para o desenvolvimento do projeto, implementação e testes é baseada no Desenvolvimento Ágil com uma breve adaptação à Metodologia XP (Extreme Programming). Uma abordagem interativa que faz com que o cliente avalie o desenvolvimento do projeto com alguma periodicidade, tendo como vantagem um feedback constante que se torna útil para o desenvolvimento do projeto, pois facilita as adaptações ao processo à medida que se vai desenvolvendo. Os princípios do processo de desenvolvimento ágil contemplam (comunicação, feedback, coragem e simplicidade), eis algumas das vantagens associadas: 1. Indivíduos e interações em vez de processos e ferramentas - existindo sempre uma cooperação constante entre quem desenvolve e o cliente em detrimento da análise de requisitos.

2. Software funcional em vez de documentação abrangente - ao longo do período de desenvolvimento, com a vantagem da existência de algo para testar e ver se cumpre os objetivos pretendidos, ou ainda para deteção de requisitos em falta.

3. Colaboração do cliente em vez de negociação de contratos

4. Resposta a modificações em detrimento de um plano rígido são feitas muitas alterações nos requisitos do projeto ao longo do seu desenvolvimento, tentando sempre responder com eficácia e rapidez. Uma interação constante por parte do cliente é sempre uma mais-valia para qualquer projeto, por isso, deve-se considerar como um método a utilizar.

(27)

12

4. TECNOLOGIAS E FERRAMENTAS A UTILIZAR

A solução será desenvolvida tendo como base a Linguagem de programação PHP. É uma tecnologia open Soure que permite criar conteúdos dinâmicos para a Web (Tavares, 2012) e que permite o desenvolvimento de páginas Web dinâmicas através da introdução do código embebido no HTML, ou recorrendo às mais modernas técnicas de desenvolvimento e separação por camadas, ou de distribuição de componentes. Esta linguagem de programação oferece a possibilidade de escolher o sistema operativo e o servidor Web suportando técnicas de programação tão distintas como as procedimentais ou as orientadas por objetos (Marques, 2011).

Software utilizado:

Microsoft Project – Elaboração do Diagrama de Gantt, que permite gerir as etapas de desenvolvimento.

Microsoft Visio – Elaboração de diagramas UML da aplicação.

Adobe Photoshop – Tratamento de imagens e criação do layout matriz

Adobe Fireworks – Esta aplicação foi utilizada apenas para a configuração visual da página inicial, que depois de desenhada no Adobe Photoshop, foi feito o Slice da página de forma a ficar de acordo com o pretendido a nível visual e dinâmico.

Adobe DreamWeaver – Criação de páginas do web site e respetivas folhas de estilos

Adobe Flash – Por forma a tornar a solução mias dinâmica, foi utilizada esta aplicação para a fazer 2 banners dinâmicos, sendo estes colocados no topo da página principal, área administrativa e área de clientes.

Tortoise - Gestão de Versões de software. Dado que muitos dos problemas de

desenvolvimento de software são causados por falta de controlo de versões, esse risco é

minimizado através da utilização desta ferramenta.

PowerDesigner - Desenvolvimento do ER (Modelo Entidade Relacionamento) SqlDeveloper - Criação de modelo lógico e relacional

(28)

13 MySqlAdmin - Criação, Administração, Gestão da Base de Dados e Dicionário de dados WampServer - Servidor local da Base de Dados

FileZilla - Upload de dados para o servidor de BackEnd

5. PLANEAMENTO DO PROJETO

As principais tarefas para o desenvolvimento da plataforma web são: Tarefa 1 – Estado da arte

Tarefa 2 – Objetivos gerais Tarefa 3 – Análise de requisitos Tarefa 4 – Metodologia a utilizar Tarefa 5 – Implementação

1- Definição do layout do site 2- Fatiar página principal

3- Criar as diversas páginas do site 4- Definir diferentes folhas de estilos css 5- Formatar páginas

6- Finalizar site

7- Iniciar programação geral 8- Criar Base de Dados

9- Iniciar programação da Área de Clientes e Administrativa 10- Alojamento da plataforma num servidor comercial Tarefa 6 – Testes

(29)

14 Para uma melhor gestão e organização do projeto foi elaborado o mapa de Gantt inicial (Figura 6), com as previsões para cada uma das tarefas a realizar e o mapa de Gantt final (Figura 7), que nos permite ter uma perceção dos desvios ao longo do projeto.

Figura 6 - Mapa de Gantt proposto

Figura 7 - Mapa de Gantt cumprido

Analizando o mapa de Gant Proposto (Fig. 6) e o mapa de Gant cumprido (fig. 7), pode concluir-se que as tarefas em termos temporais, sofreram algum desfazamento, visto que o

(30)

15 tempo gasto na execução de algumas tarefas não foi criteriosamente cumprido, houve necessidade de alguns ajustamentos à medida que o projeto se foi modelando. Como consequência o Mapa de Gant cumprido, registou uma atividade temporal maior face ao Mapa de Gant proposto.

6. MODELAÇÃO DO SISTEMA

Dado que é muito importante a Modelação de Software, foi utilizada a linguagem UML, pois as caraterísticas, funcionalidades e comportamento da solução, são assim reforçados de forma estática e dinâmica, ao longo do processo de desenvolvimento. Esta está presente na modelação, ao longo de todo o projeto, por meio de gráficos e diagramas produzidos no Microsoft Visio.

A plataforma web, será construída em 3 níveis (páginas gerais de acesso a qualquer utilizador, zona de segurança e área de clientes e administrador), de acordo com a figura 8:

(31)

16

6.1. DIAGRAMA DE ARQUITETURA

A arquitetura do sistema a implementar está de acordo com a Figura 9.

Figura 9 – Diagrama de Arquitetura do projeto

6.2. CASOS DE USO

Os diagramas de casos de uso (Diagrama 1), permitem a representação gráfica do

resultado da análise de requisitos de um sistema. Um caso de uso representa uma

unidade discreta da interação entre um utilizador (ser humano ou máquina) e o

sistema. Um caso de uso é uma unidade de um trabalho significante. Por exemplo: o

caso de um login no sistema, efetuar registos, alterar ou atualizar dados num

sistema, são todos casos de uso. Cada caso de uso tem uma descrição que descreve

a funcionalidade que irá ser construída no sistema proposto. Um caso de uso pode

incluir outra funcionalidade de caso de uso ou "estender" a outro caso de uso com

seu próprio comportamento (wikipedia.org, 2015). É importante notar que o Caso de

Uso, não descreve como o software deverá ser construído, mas sim como ele se

deverá comportar quando estiver pronto, sendo assim é importante conseguir

identificar os atores e casos de uso do sistema. Com base na informação extraída nos

(32)

17

requisitos, existirão dois atores o cliente e o administrador, que através do login no

sistema farão as suas iterações.

Diagrama 1 – Diagrama de Casos de Uso

Exemplo da Descrição de um caso de uso Registar anúncio de imóvel Nome: Registar anúncio

Descrição: Este caso de uso tem como objetivo efetuar o registo de um anúncio no sistema

(33)

18 Prioridade Alta

Pré-condição: Login Caminho

Principal:

1) O cliente escolhe a opção (“registar para anunciar”) 2) O sistema apresenta o formulário de registo de cliente 3) O cliente preenche as opções de registo

4) O sistema verifica o preenchimento dos dados e aguarda a sua confirmação.

5) O cliente confirma e clica em Registar

6) O sistema confirma o registo e apresenta a opção de Login 7) O cliente preenche os campos de login e clica em Entrar 8) O sistema mostra o Menu de Cliente e as opções disponíveis. 9) O cliente escolhe a opção registar imóvel

10) O sistema apresenta o formulário de registo

11) O cliente insere os dados do imóvel de acordo com os requisitos do formulário.

12) O sistema verifica o preenchimento dos dados e aguarda a sua confirmação.

13) O cliente confirma

14) O sistema envia os dados para aprovação 15) O cliente vê o seu imóvel em Aguarda Aprovação

(34)

19 Tabela 1 – Descrição de um caso de uso Registar Anúncio de Imóvel Caminhos

Alternativos

2.a) A qualquer momento o cliente pode sair do registo clicando no botão Cancelar.

b) O Actor sai do registo.

4.a) O sistema assume alguns campos como inválidos e pede a sua reintrodução.

b) O sistema indica que existem campos obrigatórios por preencher. c) O sistema indica que os campos não cumprem os requisitos e não estão corretamente preenchidos

.d) O cliente cancela o registo.

9.a) O cliente escolhe a opção Alugar / Vender b) O sistema mostra os anúncios a Alugar / Vender c) O cliente escolhe a opção Anúncios Ativos d) O sistema mostra os Anúncios Ativos

e) O cliente escolhe a opção Anúncios Pendentes f) O sistema mostra os Anúncios Pendentes g) O cliente escolhe a opção A Aguardar Aprovação h) O sistema mostra os Anúncios A Aguardar Aprovação i) O cliente escolhe a opção Anúncios Terminados j) O sistema mostra os Anúncios Terminados k) O cliente escolhe a opção Caixa de Entrada l) O sistema mostra o conteúdo da Caixa de Entrada m) O cliente escolhe a opção Meus Emails

n) O sistema mostra o conteúdo dos Meus Emails o) O cliente escolhe a opção Apoio / Suporte p) O sistema mostra o conteúdo Apoio / Suporte

Suplementos Testar se o sistema regista Clientes sem preenchimento de alguns campos obrigatórios

Testar se o sistema permite o registo de um imóvel sem alguns campos obrigatórios

Pós-condições: Enviar um e-mail ao Administrador a avisar o registo de um novo cliente. Enviar um e-mail ao Cliente com os dados do registo (senha e password).

(35)

20

6.3. CASOS DE TESTE

Caso de Teste: Executar Login

Objetivo: Verificar o correto funcionamento do Login Inputs Email e Password do utilizador

Procedimentos:

1. Introduzir a password errada para um utilizador existente, verificar se efetua login.

2. Introduzir o email do utilizador errado no Login, para verificar se efetua login.

3. Verificar se em caso de erro é redirecionado para recuperação de senha

Outputs - Entrada no sistema - Recuperação de Senha

Tabela 2 – Caso de Teste Executar Login

Caso de Teste: Consultar Estado do Anúncio Actor primário Cliente

Nome Consultar Estado do Anúncio Descrição

O ator acede ao sistema para ver o estado do anúncio do imóvel

Pré condições Cliente autenticado

Caminho principal ou cenário principal

1. Cliente acede ao sistema 2. O sistema permite o acesso

3. Cliente seleciona um anúncio de imóvel previamente publicado.

(36)

21 Caminhos

alternativos

2.a) Sistema indisponível

Mensagem erro, cliente tenta novamente Cliente sai do caso de uso

4.a) Não consegue mostrar o estado do anúncio do imóvel Avisa o cliente que não consegue consultar o estado do anúncio do imóvel, sugere para tentar de novo mais tarde

Cliente sai do caso de uso

Suplementos ou Adornos Pós condições

Tabela 3 – Caso de Teste Consultar Estado do Anúncio

Caso de Teste: Consultar Estado do anúncio do imóvel Objetivo: Verificar o correto funcionamento

Inputs Email e Password do utilizador, Procedimentos:

1. Introduzir password errada para um utilizador existente, verificar se efetua login.

Outputs

Tabela 4 – Caso de Teste Consultar Estado do Anúncio do Imóvel

6.4. DIAGRAMAS DE SEQUÊNCIA

O diagrama de sequência permite-nos representar o comportamento dinâmico de um sistema, principalmente as inter-relações entre objetos. Consiste essencialmente na representação da sequência de chamada de métodos entre os objetos das classes que

(37)

22 suportam a aplicação. Ao elaborar-se tomam-se decisões a nível da implementação e da linguagem a ser utilizada. (Henrique O'Neill, Junho de 2010).

Exemplo Diagrama Sequencia Cliente

Activos

Seleciona opção "Registar Imóvel"

Interface "Meus Anúncios" Cliente Registado

Opção "Activos" Seleciona a Opção Efetuar Pagamento

{Área Cliente}

Aguarda Aprovação Terminados

Seleciona a opção "Activos"

Pendentes

Devolve o estado "Pendente" Preenche formulário registo

Opção Pagamentos Aguarda Aprovação

Devolve Imóveis Activos Opção "Terminados" Seleciona a opção "Terminados"

Devolve Imóveis "Terminados"

Sistema

Diagrama 2 – Sequência Cliente

Cliente clienteId criadoEm modificadoEm clienteStatus utilizadorNivel nome email senha telefone Consultar () Registar () Atualizar() Cancelar()

(38)

23 Exemplo Diagrama de Sequência Administrador

Activos

Seleciona opção "Pendentes"

Interface "Anúncios"

Administrador

Seleciona a opção "Anúncio Pendente"

{Área Administrativa}

Pendentes Terminados

Seleciona a opção "Terminados"

Devolve Anúncios "Terminado" c/ sucesso

Devolve Dados Alterados c/ sucesso

Edição Clientes

Devolve "Aprovado"

Alterar Dados

Seleciona opção "Activos"

Devolve "Anúncio Terminado" c/ sucesso Seleciona opção "Terminar Imóvel"

Seleciona a opção "Edição Clientes"

Devolve Cliente Editado c/ sucesso Seleciona a opção "Editar Cliente"

Seleciona a opção "Alterar Dados"

Seleciona opção "Alterar Dadosl" Sistema

Diagrama 3 – Sequência Administrador

Administrador adminId criadoEm modificadoEm clienteStatus utilizadorNivel nome email senha telefone Publicar () Terminar() Alterar() Cancelar()

(39)

24

6.5. DIAGRAMAS DE ACTIVIDADE

O diagrama de atividades (Diagrama 4), permite descrever um cenário de realização

de um caso de uso através do encadeamento de atividades que são realizadas pelos

diversos objetos.

Exemplo do Diagrama de Atividade Registar e Publicar Anúncio de Imóvel

(40)

25

6.6. DIAGRAMA DE ESTADOS

Exemplo do Diagrama de Estados Registar Anúncio

Diagrama 5 – Diagrama de Estados Registar Anúncio

6.7. MODELO ENTIDADE RELACIONAMENTO

O diagrama de entidade relacionamento (também conhecido por Modelo ER, ou simplesmente MER), é um modelo conceitual utilizado para descrever os objetos (entidades) ou aspectos de informação de um domínio de negócio com os seus atributos, caraterísticas e

(41)

26 relacionamentos entre si. No geral, este modelo representa de uma forma abstrata a estrutura que irá constituir a base de dados da aplicação, embora, a base de dados possa ter outras entidades, como por exemplo chaves e tabelas intermediárias, que poderão apenas fazer sentido no contexto de bases de dados relacionais.

(42)

27

7. IMPLEMENTA ÇÃ O

A implementação é a fase mais morosa do projeto, isto porque é necessário que todas as informações afetas ao mesmo, sejam integradas e, por outro, toda integração constitua no seu todo a resposta às necessidades do cliente final, colocando os objetivos traçados inicialmente em consonância com o plano do projeto. Segundo (pmelink, 2015), “O CRM transforma dados dispersos em informações úteis e centralizadas, que devem ser utilizadas por todos em benefício, primeiro do cliente e, em segundo lugar, da empresa”.

7.1 BASE DE DADOS – MODELO RELACIONAL

(43)

28

7.2 DICIONÁRIO DE DADOS

Estrutura da tabela apoios

Coluna Tipo Nulo Padrão

apoioId int(11) Não

clienteId varchar(160) Não NULL

apoioData Timestamp Sim NULL

apoioPergunta varchar(160) Sim NULL

apoioResposta varchar(160) Sim NULL

Tabela 5 – Dicionário de Dados da Tabela Apoios

Estrutura da tabela clientes

clienteId int(11) Não

criadoEm Timestamp Sim NULL

modificadoEm Timestamp Sim NULL

clienteStatus varchar(160) Sim NULL

utilizadorNivel varchar(160) Sim NULL

nome varchar(160) Não NULL

email varchar(160) Não NULL

senha varchar(160) Não NULL

telefone int(9) Sim NULL

Tabela 6 - Dicionário de Dados da Tabela Clientes

Estrutura da tabela imóveis

imovelId int(11) Não

clienteId varchar(160) Não NULL

imovelVisitas varchar(160) Sim NULL

(44)

29

imovelThumb varchar(160) Sim NULL

imovelTipo varchar(160) Sim NULL

imovelValor Double(160) Sim NULL

imovelNegocio varchar(160) Sim NULL

imovelDescricao varchar(160) Sim NULL

imovelQuartos int (160) Sim NULL

imovelSuites int(160) Sim NULL

imovelWcs int(10) Sim NULL

imovelSalas int(20) Sim NULL

imovelChurrasqueira varchar(10) Sim NULL

imovelGaragem varchar(10) Sim NULL

imovelArrumos varchar(20) Sim NULL

imovelPiscina varchar(10) Sim NULL

imovelProximo varchar(160) Sim NULL

imovelRua varchar(160) Sim NULL

imovelNumero varchar(160) Sim NULL

imovelCidade varchar(160) Sim NULL

imovelLocalizacao varchar(160) Sim NULL

imovelRegisto timestamp Sim NULL

imovelUpdate timestamp Sim NULL

imovelTermino timestamp Sim NULL

imovelStatus varchar(160) Sim NULL

imovelConfirma varchar(160) Sim NULL

Tabela 7 - Dicionário de Dados da Tabela Imóveis

Estrutura da tabela mailadmin

emailId int(11) Não

emailNome varchar(160) Sim NULL

(45)

30

emailMensagem varchar(160) Sim NULL

emailData Timestamp Sim NULL

emailStatus varchar(160) Sim NULL

emailResposta Timestamp Sim NULL

emailTxt varchar(160) Sim NULL

emailCod int(160) Sim NULL

Tabela 8 - Dicionário de Dados da Tabela MailAdmin

Estrutura da tabela mailcliente

emailId int(11) Não

emailNome varchar(160) Sim NULL

emailMail varchar(160) Não NULL

emailTelef int(9) Sim NULL

emailMsg varchar(160) Sim NULL

emailData Timestamp Sim NULL

emailResTxt varchar(160) Sim NULL

emailRes Timestamp Sim NULL

emailStatus varchar(160) Sim NULL

clienteId int160) Não NULL

Tabela 9 - Dicionário de Dados da Tabela MailCliente

Estrutura da tabela multimedia

fotoId int(11) Não

imovelId int(160) Não NULL

imovelImg varchar(160) Sim NULL

(46)

31

7.3. CODIF ICAÇ ÃO

A plataforma web produzida em linguagem PHP, contempla a gestão de Publicações de Imóveis Online (arrendar, vender e gerir publicações). Nas primeiras etapas do projeto, a solução foi desenvolvida utilizando um servidor localhost (Wamp Server), na fase de testes foi tido o cuidado de publicar a plataforma online, alojando-a num servidor web com domínio próprio (http://imovonline.esy.es). Nesta etapa, surgiram alguns problemas nos browsers, a nível da visualização que foram solucionados aos poucos.

Na linguagem PHP, o PDO (PHP Data Objects) é uma extensão que fornece uma interface padrão que serve para trabalhar com a base de dados, a sua principal finalidade é a abstração nas ligações e interações com a base de dados, ou seja não interessa qual a base de dados que se está a utilizar pois as funções/métodos a utilizar serão os mesmos, independente da base de dados utilizada, ainda assim, isso não significa maior compatibilidade da Base de Dados, pois por muito que se utilize o PDO, e embora este facilite a sua portabilidade, apenas significa, que se poderá comunicará com qualquer base de dados através de um conjunto de funções/métodos e classes, nada mais. O PHP trabalha de forma um pouco diferente do Mysql comum, em que apenas se declara uma variável (por exemplo: Connetcion, DB) e executa o Mysql query. Em PHP, trabalha-se com funções/métodos e tem que se definir a constante HOST, BD, USER e PASSWORD, utilizando o ‘define’.

7.4 CONF IG URAÇÃO DE AP LICATIVO S

Um das ferramentas necessárias para a vizualização da solução corretamente, é utilização de um servidor web (Wamp Server, PHP Admin ou outro), após a instalação deverá verificar-se se o servidor está ativo e a correr corretamente, neste projeto foi utilizado o Wamp Server que se configurou após a instalação. Por defeito foi escolhido o browser Google Chrome, seguidamente foi aberto o aplicativo Wamp Server, para configurar o ficheiro PHP.ini, este ficheiro foi aberto no bloco de notas e pesquisada a linha com: “error_re” correspodente ao Error reporting da aplicação, e configurado o error reporting que se pretende neste caso pretende-se que mostre todos os erros sem as notícias de alertas, para isso mudou-se o trecho de código:

(47)

32 Common Values:

; E_ALL & ~E_NOTICE (Show all errors, except for notices and coding standards warnings.) ; E_ALL & ~E_NOTICE | E_STRICT (Show all errors, except for notices)

; E_COMPILE_ERROR|E_RECOVERABLE_ERROR|E_ERROR|E_CORE_ERROR (Show only errors)

; E_ALL | E_STRICT (Show all errors, warnings and notices including coding standards.) ; Default Value: E_ALL & ~E_NOTICE

; Development Value: E_ALL | E_STRICT ; Production Value: E_ALL & ~E_DEPRECATED ; http://php.net/error-reporting

error_reporting = E_ALL Para:

; E_ALL & ~E_NOTICE (Show all errors, except for notices and coding standards warnings.) ; E_ALL & ~E_NOTICE | E_STRICT (Show all errors, except for notices)

; E_COMPILE_ERROR|E_RECOVERABLE_ERROR|E_ERROR|E_CORE_ERROR (Show only errors)

; E_ALL | E_STRICT (Show all errors, warnings and notices including coding standards.) ; Default Value: E_ALL & ~E_NOTICE

; Development Value: E_ALL | E_STRICT ; Production Value: E_ALL & ~E_DEPRECATED ; http://php.net/error-reporting

(48)

33 Figura 10 – Configuração do ficheiro PHP.ini do Wamp Server

Por fim gravou-se o ficheiro na mesma diretoria ficando o Wamps Server configurado. Fazendo-se um restart ao aplicativo e teremos o Wamp Server a correr corretamente. A seguir foi configurado software da base de dados My SQL Admin, onde foi configurado o nome da ligação LOCALHOST na porta 3306, >User Name = ROOT e Senha em branco, onde irá ser criada a Base de Dados com as tabelas para a solução.

(49)

34 Figura 11 – Configuração da ligação à Base de dados local

Clicando em Test Connection, estando tudo configurado corretamente, obtém-se uma confirmação de sucesso.

A seguir abre-se o DreamWeaver e cria-se um ficheiro em linguagem php, a que vamos atribuir o nome de index.php e gravar na diretoria do projeto “IMOVONLINE”, dentro da pasta do servidor Wamp, mais concretamente na pasta www.

Após isso vamos configurar o Manage Sites no DreamWeaver Cs5, para isso criamos no Manage Sites um novo site a que se irá chamar por exemplo ImovONLINE, na linha de baixo vamos colocar o caminho da pasta raiz do projeto, neste caso na pasta com o caminho: C:\wamp\www\IMOVONLINE.

Desta forma fica configurado o local onde serão gravados todos os ficheiros a serem configurados.

Colocando a visualização do site em modo Split, pode ter-se uma noção do que se faz em termos de código e preview de visualização, na opção Title, é colocado o nome do projeto, este nome será um título que surgirá na barra de layout da página web quando esta é acedida.

(50)

35 Figura 12 – Título da página configurado na opção Title

A seguir é feita a criação de uma folha de estilos que estará afeta à página inicial do projeto, ficando assim completa a configuração da estrutura de todos os elementos para se produzir a página inicial da plataforma web.

Após o desenho do layout da página inicial, utilizando o Adobe Photoshop, vai editar-se o layout utilizando o Adobe FireWorks. Com este aplicativo e utilizando uma das ferramentas (Slice Tool), vai ser feito o posicionamento e formatação dos elementos dentro da página, nesta etapa vai-se criando e formatando a folha de estilos da Home Page, onde se tem em conta a dimensão da página, as diferentes secções com conteúdos a configurar como o Header_Topo, Header, Body, Header_Topo, Header_Navegacao, Imoveis_Home, Imoveis_Lista e Footer.

7.5 A HOME P AG E

Seguidamente é apresentado o código da folha de estilos style.css da Home Page, contendo as explicações comentadas em cor verde, o restante código pode ser consultado no Anexo A – Home Page.

/*RESET*/

*{margin:0; padding:0;}

body{background:#333} /*FUNDO SITE*/

(51)

36 Após a gravação do ficheiro index.php, obtém-se o equivalente ao visual da Figura 13.

Figura 13 – Aspecto inicial da Home Page

Um dos cuidados a ter na formatação é relativa à colocação de um banner feito em Flash, para tal é necessário gravar também o respetivo ficheiro em html, para que ao colocar o banner no browser, este seja carregado corretamente nas páginas, para isso foi acrescentada uma div para ser colocado o código HTML gerado pela aplicação Flash.

(52)

37 <!—Banner Fundo casas -->

<div id="header_navegar_fcasas li h" <div id="header_navegar_fcasas li h"

 <div id="flashContent">

(53)

38 <param name="salign" value="" />

<a href="http://www.adobe.com/go/getflash"> <img

src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />

</a>  </object>  </object> </div> </div>

Figura 15 – Vista final do banner feito em flash

ZONA DE ANÚNCIO, LOGIN, REGISTO E PROCURA AVANÇADA Anúncio da Google Ad Sense

Continuando a configuração da Home Page, segue-se a configuração da zona de publicidade, a publicidade a surgir automaticamente, esta é da Google AdSense (wikipedia.org, 2015), que é um serviço de publicidade oferecido pelo Google inc., em que os donos de websites

(54)

39 podem inscrever-se no programa para publicitar anúncios em texto, imagem e, mais recentemente em vídeo.

Na folha de estilos style.css, é colocado o seguinte código para formatar a zona de anúncio da Google AdSense:

/*PUB GOOGLE 1*/

#header_navegar_publicidade{width:200px; height:210px; margin-right:3px; padding:7px 0px; float:right; color:#006;}

/*PUB GOOGLE ADSENSE LETRAS PUBLICIDADE*/

#header_navegar_publicidade h1{font:26px Georgia, "Times New Roman", Times, serif; font-weight:bold; font-variant:small-caps; color:#069; margin-bottom:2px; padding-bottom:4px; border-bottom:2px solid #F00;}

No ficheiro header.html, coloca-se o código abaixo, para se obter como resultado o equivalente à figura 15:

<!— ... -->

<div id="header_navegar_publicidade"> <h1>Publicidade</h1>

google_ad_client = "pub-6252101946778080"; /* Ref.ª dada pela Google */ /* PÁGINA HOME CONTEÚDO */

google_ad_slot = "6369250044"; /* REFERÊNCIA DO ANÚNIO */ google_ad_width = 202; /* LARGURA DO ANÚNCIO */

google_ad_height = 204; /* ALTURA DO ANÚNCIO */ //-->

</script>

src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>

(55)

40 Figura 16 – Anúncio da Google AdSense

A exibição dos anúncios é administrada pela Google e gera lucros de acordo com a quantidade de cliques ou de visualizações, sendo este um método baseado nas ações realizadas pelo utilizador que está em fase de testes. Para se poder beneficiar desta vantagem, é necessário (Google, 2015) estar registado na Google e possuir uma conta de email ou então efetuar um registo e cumprir os requisitos exigidos como ser maior de didade, ter acesso de edição ao código-fonte das páginas do Web Site onde se deseja que os anúncios sejam publicitados. Para mais informações poderão obter-se consultando o link: https://www.google.pt/ads/

CONFIGURAÇÃO DA ZONA DE LOGIN

Para formatar a zona de login e zona de registo para anúncios do cliente, que terá duas imagens de fundo, é necessário acrescentar uma div que irá ter a altura das duas imagens, sendo cada uma delas colocada em linhas diferentes, mas na mesma coluna. Começando pela configuração da folha de estilos afeta a esta secção seria colocado o seguinte código na folha de estilos:

(56)

41 /* ... */

/*RECTANGULO DE LOGIN*/

#header_navegar_central_anuncio label{display:block;}

#header_navegar_central_anuncio form{margin:40px 0 0 15px; float:left;} /*TEXTOS EMAIL E USER DO LOGIN*/

#header_navegar_central_anuncio span{font:12px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#FFF; width:40px; float:left; text-align:right; margin-right:4px;}

/*LETRAS DO INPUT TEXTO LOGIN*/

#header_navegar_central_anuncio input{width:160px; height:20px; border:0px solid #FFF; background:#fff; padding:1px; font:14px "Trebuchet MS", Arial, Helvetica, sans-serif;

color:#5757dd;}

#header_navegar_central_anuncio label{margin:3px 0 0px 0;} /*TEXTO RECUPERAR*/

#header_navegar_central_anuncio p{text-align:center; font:13px "Trebuchet MS", Arial, Helvetica, sans-serif;padding:3px;}

#header_navegar_central_anuncio p a{align:right;color:#FFF; text-decoration:none;margin:3px 0 0 0;}

/*TEXTO RECUPERAR SENHA HOVER*/

#header_navegar_central_anuncio p a:hover{color:#29f807;} /* cor recuperar senha hover*/

/* INPUT TEXT SENHA*/

(57)

42 /*BOTÃO ENTRAR*/

#header_navegar_central_anuncio .btn{width:50px; height:26px; float:right; background:url(images/central_btn.png) no-repeat; border:0px solid #C7C7C7; cursor:pointer;}

Configuração do acesso à base de dados para acesso aos registos dos clientes registados Para aceder ao contéudo dos registos de cllientes existentes na base de dados foi configurado um acesso na pasta Connetcions, que contém um ficheiro (painel_config.php), com as definições de utilizador e password. O aplicado é o seguinte:

<?php

# FileName="Connection_php_mysql.htm" # Type="MYSQL"

# HTTP="true"

$hostname_painel_config = "localhost"; < !—LIGAÇÃO LOCAL-->

$database_painel_config = "imovonline"; < !- -NOME DA BASE DE DADOS--> $username_painel_config = "root"; < !- - NOME DO UTILIZADOR-->

$senhaord_painel_config = ""; < !—PASSWORD GRAVADA-->

$painel_config = mysql_pconnect($hostname_painel_config, $username_painel_config, $senhaord_painel_config) or trigger_error(mysql_error(),E_USER_ERROR);

?>

Configuração da zona de registo para anúncios do cliente #header_navegar_central_anuncio

.btn:hover{background:url(images/central_btn_hover.png) no-repeat;} #header_navegar_central_anuncio .senha_txt{margin:3px 2px 0 0;}

(58)

43 /*CLICK PARA ANUNCIAR FUNDO*/

#header_navegar_central_anunciar{width:235px; height:130px; background:url(images/anuncie_bg.jpg) no-repeat;}

/*BOTÃO CLIQUE PARA ANUNCIAR*/

#header_navegar_central_anunciar a{background:url(images/anuncie_btn.png) no-repeat; width:210px; height:19px; float:left; text-decoration:none; font:12px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; color:#003; padding:7px 10px 5px 10px; margin-left:33px; display:block;}

#header_navegar_central_anunciar a:hover{color:#069;}

/*TEXTO ANUNCIE NA IMOVONLINE... A MELHOR PUBLICIDADE... */

#header_navegar_central_anunciar p{font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#003; float:left; width:215px; text-align:center; padding:5px 5px 0 0; font-weight:bold; text-shadow:1px 1px #FFF;}

.header_navegar_central_anunciar{margin:39px 0 0 10px; float:left;} /* ... */

No ficheiro header.html, para a zona de login, é configurado e colocado o código de acordo com as seguintes linhas:

<!—CÓDIGO DA ZONA DE LOGIN NO FICHEIRO HEADER.HTML--> <div id="header_navegar_central">

<formbname="central_anuncio" action="<?php echo $loginFormAction;?>" method="POST">

<label>

<label>

<span class="senha_txt">Senha:</span>

(59)

44 </form>

<p><a href="admin/recover.php">[Recuperar Senha]</a> <a href="index.php?pg=novoregisto"> [Registar]</a></p> </div>

Figura 17 – Aspeto após colocação do código na zona de login

No ficheiro header.html, na zona de Anúncio do cliente, é configurado e colocado o código de acordo com as seguintes linhas:

<!—CÓDIGO DA ZONA DE ANÚNCIO DO CLIENTE --> 

<a href="index.php?pg=anuncie">Clique para Anunciar...</a>

<p>Anuncie na ImovOnline...</p> <p> a melhor Publicidade na web!!</p> </div>

</div> 

(60)

45 Figura 18 - Aspeto após colocação do código na zona de anúncio do cliente Configuração da zona de procura avançada

Na folha de estilos style.css, é colcado o seguinte código para formatar o conteúdo da header.php, na procura avançada:

/*CÓDIGO DA FOLHA DE ESTILOS FILTRO DE PROCURA AVANÇADA IMAGEM FUNDO */ #header_navegar_filtro{width:412px; height:250px;

/*FORMATAÇÃO DA IMAGEM FUNDO */

background:url(images/procura_avancada_bg.jpg) no-repeat; float:left;} /*PROCURE O SEU IMÓVEL*/

#header_navegar_filtro h1{margin:23px 0 0 18px; font:29px Georgia, "Times New Roman",

Times, serif; font-weight:bold; color:#FFF;}

/*TEXTO PARA UMA PROCURA MAIS...*/

#header_navegar_filtro h2{font:17px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#0F0; text-align:center; margin-right:40px;}

/*CAIXAS PROCURA AVANCADA*/

#header_navegar_filtro form{float:left; margin:10px 0 0 15px;}

#header_navegar_filtro select{border:1px solid #; background:#FFF; width:185px; height:23px; margin:0 8px 15px 0; font:15px "Trebuchet MS", Arial, Helvetica, sans-serif; color:#666; font-weight:bold;}