Home

WEB - Repositório Científico do Instituto Politécnico do Porto

1. 45 Figura 28 P gina principal do s tio desenvolvido AutoInf0 49 Figura 29 P gina principal aspecto da barra superior eee 50 Figura 30 Barra superior sec o de pesquisa de marcas e modelo i 51 Figura 31 Contas nas redes sociais criadas para O s tio is ceeeeraeereneea 51 Figura 32 Barra superior sec o de autentica o eeeeeeracereneea 52 Figura33 Log tipo do sitio Autolnfo erre ceraee era neraanaraneaenanoa 52 Figura34 Rodap do s tio Autolnfo rr eE E caraca EAEE EESE ES 53 Figura 35 a Coluna da esquerda para visitantes b Coluna da esquerda para utilizadores registados c Coluna da esquerda para o administrador res 54 Figura 36 a Coluna da direita classifica o individual b Coluna da direita classifica o por EQUIPAS reee ia Cesta de Pe SE dal eso OR Rh AA ths teach oer icine DOTE ate ies la ts Teel leet Teco ves 54 Figura 37 P gina principal conte do central eeecceseceneeeeseecececeseeeeeecnsaeseeeesneeoaaes 56 Figura 38 P gina principal not cia aberta atrav s da shadowbox rea 56 Figura 39 Formul rio de login efectuar registo c ec erereeraerareeeranos 57 Figura 40 P gina deregisto e nessa edita pee sere haseeves isa doi Mapa e A e N aaa Tia 57 Figura 41 Menu de registo aviso da disponibilidade
2. Figura 21 phpMyAdmin cria o de uma nova tabela na base de dados A tabela citroen geral j apresentada no diagrama Entidade Rela o elaborado Figura 19 sec o 3 5 composta por 6 campos entre eles id versao modelo versao tipo combustivel numero portas e inicio producao Quando executada a cria o da tabela surge uma nova janela semelhante da Figura 22 onde s o definidos e parametrizados cada um destes campos O significado de cada um destes campos ser explicado com maior detalhe no cap tulo da implementa o do projecto O tipo de dados usado por cada campo definido no par metro Tipo e o tamanho desses dados em Tamanho Valores apresentados na Figura 22 Os dados podem ser do tipo int varchar text ou date Os dados do tipo int correspondem a n meros inteiros como por exemplo 1 2 e 3 Os dados do tipo varchar representam strings de tamanho vari vel de tamanho entre O e 255 exemplos Cl C2 e C3 Os dados do tipo text permitem armazenar grandes quantidades de texto geralmente usados para guardar mensagens de e mail na base de dados e por sua vez os dados do tipo date para armazenar datas de forma a ser poss vel manipular as datas atrav s da base de dados Ap s terem sido definidos e parametrizados os campos o processo de cria o da tabela termina Na Figura 23 apresenta se o aspecto final desta tabela 41 phpMyAdmin g Servidor
3. 96 Anexo F Algoritmo separador Contactos Neste anexo exp e se o algoritmo criado para o envio de sugest es e ou reclama es por parte dos utilizadores do s tio desenvolvido ao administrador Este algoritmo encontra se dividido em dois ficheiros contactos php e enviar php O ficheiro contactos php corresponde ao formul rio desenvolvido para este efeito O c digo extracto presente neste apresentado a seguir lt html gt lt head gt lt title gt Contactos lt title gt Geren lt head lt body gt Genes lt form name forml method post action enviar php gt lt p gt Nome lt input type text name nome id nome gt lt p gt lt p gt Email lt input type text name email id email gt lt p gt lt p gt Assunto lt input type text name assunto id assunto gt lt p gt lt p gt Mensagem lt textarea name mensagem wrap VIRTUAL id mensagem cols 25 rows 10 gt lt textarea gt lt p gt lt p gt lt input type submit name Submit value Enviar gt lt p gt lt form gt CERA lt body gt lt html gt z O formul rio presente no ficheiro contactos php identificado pelo marcador lt form name forml method post action enviar php gt O atributo action representa o programa que ir tratar os dados do formul rio neste caso o ficheiro enviar php O method especifica o m todo pelo qual os dados ser o enviados tendo
4. o que permite associar cada coment rio em determinada noticia ao utilizador respons vel pelo mesmo A tabela forum semelhan a da tabela anterior tamb m possui uma chave prim ria composta formada pelos campos id user e numero mensagem que permite identificar o utilizador que publicou determinada mensagem colocada no f rum Visto se tratar de uma chave prim ria composta os valores de cada um destes campos podem se repetir por m a combina o destes valores n o pode ser repetida ou seja o utilizador com um id user 1 apenas pode ter associada uma nica entrada na tabela de dados com numero mensagem 24 Contudo pode existir uma outra entrada na tabela com numero mensagem 24 desde que o valor do campo id user seja diferente de 1 ou seja referente a outro utilizador As tabelas citroen geral citroen dados performance citroen dados motor citroen dados chassi e citroen dados dimensoes apresentam uma chave prim ria simples formada pelo campo id versao pois existe apenas uma entrada em cada uma destas tabelas para cada vers o de determinado autom vel Assim torna se simples associar cada conjunto de dados a cada vers o de determinado modelo autom vel 3 6 DESENVOLVIMENTO DA BASE DE DADOS Ap s ter sido efectuada a an lise de requisitos e elaborados os respectivos diagramas UML Unified Modeling Language tornou se poss vel concretizar a
5. exclusivamente dedicada a esta opera o que ser apresentada de seguida Para al m de poderem editar os seus dados de perfil os utilizadores podem tamb m alterar a password com que efectuaram o registo Para tal estes devem seleccionar a op o gt Alterar Password localizada dentro do perfil de utilizador Assim surgir a p gina respectiva representada na Figura 50 em que o utilizador ter de inserir a password actual e a nova password pretendida 3 a Editar Perfil Nome Cristiano Alves idade 23anos z 3 3 e Pais Portugal Email caralho cestas pit e Cidade Porto Viatura Renault Clio Data de Nascimento 19 v 5 x 1990 x rea Sexo Masculino x Forum Ged Cidade Poro Alterar Password Pa s Portugal x voL LOTTOS Carro Actual Renault Clio Foto de Perfil Procurar Jetta x Jotta Aherar Perfil Figura 49 P gina para editar os dados de perfil do utilizador 62 Pesquisar Alterar password Introduza a password com que efectuou o registo Password actual e a nova amnion que Ea URS cea password Sera enviado um email de confirma o em que poder consultar os novos dados para acesso Password actual EO Nova password ET Confirmar password esessesse Figura 50 P gina para altera o da password Para que seja aceite a nova password esta ter de apresentar um n vel de seguran
6. lt div gt lt h3 gt Transmiss o lt h3 gt lt div gt eee lt Informa o acerca do componente Transmiss o gt lt div gt lt h3 gt Suspens o lt h3 gt lt div gt Ge lt Informa o acerca do componente Suspens o gt lt div gt lt h3 gt Trav es lt h3 gt lt div gt ER lt Informa o acerca do componente Trav es gt lt div gt lt h3 gt Carrocaria lt h3 gt lt div gt Gee lt Informa o acerca do componente Carro aria gt lt div gt lt div gt eres lt body gt lt html gt 93 O algoritmo apresentado acima constitu do por um cabe alho identificado pelas tags lt head gt e lt head gt que fornece informa es relativas p gina e por um corpo principal identificado pelas tags lt body gt e lt body gt que engloba os elementos que ser o exibidos no navegador No cabe alho foi definido atrav s do elemento lt title gt um t tulo para a p gina que exibido na barra de t tulos do navegador usado Este inclui ainda um script onde inclu da a fun o JavaScript onde se encontra toda a programa o necess ria para o funcionamento do menu accordion No corpo principal apresentado o conte do do menu accordion Este foi dividido em cinco cabe alhos lt h3 gt e respectivos conte dos div que correspondem aos diferentes componentes que constituem um autom vel e que neste foram abordad
7. numero cilindros consumo medio binario maximo Figura 19 Diagrama entidade rela o da plataforma Web No DER representado na Figura 19 no qual poss vel observar o relacionamento entre as diferentes tabelas da base de dados isto o modo como estas se relacionam entre si encontrando se assinalado a negrito as chaves prim rias de cada uma destas tabelas As chaves prim rias do ponto de vista de uma base de dados relacional referem se a conjuntos de um ou mais campos de uma tabela cujos valores nunca se repetem e que podem ser usadas como ndice para os demais campos dessa mesma tabela As rela es entre as tabelas j foram explicadas na sec o anterior 3 4 portanto n o ser o alvo de estudo nesta sec o sob pena de se repetir informa o No que diz respeito s chaves prim rias pode se constatar que a tabela utilizadores tem como chave prim ria o campo id user que n o pode ter dois ou mais registos com o mesmo valor o que permite identificar inequivocamente cada utilizador A tabela noticias tem como chave prim ria o campo id noticia que permite identificar cada uma das not cias presentes na base de dados Visto que cada utilizador pode efectuar v rios coment rios na mesma not cia ou em not cias diferentes a tabela noticias comentarios apresenta uma chave prim ria composta ou seja formada por mais de um campo nomeadamente pelos campos 38 id noticia e id user
8. separador MAarcaS esseeseeeeeeresresrreeressrersresrreerrssressrerreee 66 Figura 57 Separador Marcas descri o NistOricd sccscccseccessecesseeeseccessecesseesseecnsaeseeeeeneeenaaes 67 Figura 58 Separador Marcas modelos ccccsccessccesseceseesseecessecesceesseecsaeceeeesseecnsaeseeeeeneeenaaes 67 Figura 59 Separador Marcas concept cars eteciteaeeererereraneaa ceara niaareeaseraneaaeeanataniaa 68 Figura 60 Separador Marcas sites teis cesccesccessccesseeeeeecessececeeeseecssaeceseeesneecnsaeseaeeeeneecaaes 69 Figura 61 Separador Sites teis aba Citro n sssssessessessessessesseisrisresreseeseeseestesrerreresereresreseeses 69 Figura 62 Separador Sites teis aba Geral eereaeena caraca era neraanaraneaenan a 69 Figura 63 Separador Gloss rio cabe alho Motor cccescccessecesseeeseecesseceeeeeeeecnsceseseeeeseeonaaes 70 Figura 64 Separador Gloss rio cabe alho Transmiss o csccsccescccesseceneeessccnsceseseeeeseeonaaes 71 Figura 65 Separador Novidades Inova es 1 not cia errar 71 Figura 66 Separador Novidades Inova es 3 not cia eecesseeseeeeseecssseceseeeeseecnsaeseeeeeneeoaaes 72 Figura 67 Barra de menu central separador Galeria cceeeeccessecesseeeseecessececeeeseccnaeseeeesneeoaaes 72 Figura 68 Sub separador Fotos aplica o da shadowboX cesscessceesceesseceneeeeseecnsceseeeesneecaaes 12 Figura 69 Fi
9. Uma aplica o Web amplia o conceito de website ao adicionar funcionalidade ao sistema isto ao permitir que os utilizadores executem l gica de neg cio atrav s de um navegador Esta deve ser entendida como uma forma de utiliza o de software atrav s do acesso a dados persistentes a partir do servidor Web permitindo ainda construir p ginas din micas para manipula o de dados 2 1 1 ARQUITECTURA CLIENTE SERVIDOR Desde que foi criada a Web evoluiu continuamente o que explicado em grande parte pela sua arquitectura simples por m eficiente 34 Esta arquitectura conhecida por modelo cliente servidor e constitu da por um cliente e um servidor instalados sobre uma rede de computadores heterog nea como mostra a Figura 2 A arquitectura cliente servidor formada por um browser conhecido em portugu s por navegador a funcionar do lado do cliente que serve de intermedi rio para a solicita o de informa es ao servidor e para as apresentar ao utilizador O servidor por sua vez atende os pedidos dos diferentes clientes que comp em a rede e ou outros servidores indistintamente Pese embora o modelo referencie uma arquitectura cliente servidor talvez fosse mais adequado apelid lo de pedido resposta request respost visto ser este o tipo de comunica o entre as partes o cliente navegador solicita um documento ao servidor que processa o pedido envia o documento ao cliente e encerra a comunica
10. es relacionadas A finalidade inicial era possibilitar a troca de informa es e o acesso a documentos de pesquisas entre cientistas de diferentes universidades por m o sucesso deste projecto foi tal que este esteve na base dos fundamentos da Internet tal como a conhecemos actualmente 11 HTML o acr nimo de HyperText Markup Language em portugu s Linguagem de Marca o de Hipertexto por m n o se trata de uma linguagem de programa o propriamente dita mas de uma linguagem de formata o que define um conjunto de etiquetas tags que afectam a forma pela qual o texto as imagens e restantes elementos de uma p gina s o exibidos pelo navegador Os documentos HTML podem ser criados a partir de qualquer editor de texto como por exemplo o Bloco de notas dos sistemas Windows Figura 13 visto tratarem se de ficheiros de texto simples Existem outras linguagens mais avan adas que podem ser utilizadas no 23 desenvolvimento de paginas Web no entanto dificil encontrar um site que nao utilize a linguagem HTML sendo at mais comum encontrar sites que utilizem apenas o HTML 2 Na Figura 13 poss vel visualizar a estrutura b sica de um documento HTML Esta composta por um cabe alho e pelo corpo do documento A primeira linha do documento apresentado nesta figura indica que este se trata de um documento HTML As tags lt html gt e lt html gt marcam o in cio e o fim deste c digo respectivamente O cabe a
11. o para os web designers e realizam se testes s interfaces desenvolvidas a partir do servidor de forma a verificar o correcto funcionamento das mesmas A terceira fase que trata do design das interfaces procura aprimorar o que foi desenvolvido nas fases anteriores atrav s do conceito art stico e criativo do s desenvolvedor es do sistema Nesta fase o que predomina a arte e a est tica que podem ser observadas na distribui o das liga es links nas p ginas nas cores e anima es nos t tulos nos cabe alhos e no design em geral Para o desenvolvimento de websites s o utilizadas linguagens e tecnologias modelos metodologias e ferramentas gr ficas e de design Se um website for composto apenas por interfaces est ticas conte do permanente as necessidades do projecto centram se na selec o das linguagens de programa o HTML CSS Javascript etc e nas ferramentas de design adequadas Se o website possuir interfaces din micas que sofram altera es constantes e que possam interagir com o utilizador para al m destas escolhas necess rio seleccionar a tecnologia respons vel pela gera o das p ginas din micas e do sistema de gest o da base de dados sec o 3 6 As linguagens para cria o de p ginas din micas como a Active Server Pages ASP Java Server Pages JSP e Page Hypertext Preprocessor PHP s o amplamente utilizadas Cada uma destas tecnologias discutida com o detalhe apropriado na
12. pesquisa por marcas sendo esta efectuada a partir das tabelas dos modelos Numa segunda sec o da barra superior encontram se os cones de acesso s p ginas das redes sociais conforme print screen apresentado na Figura 31 Estas incluem uma conta no Facebook acess vel em https www facebook com pages Auto Info 369620166499078 outra no Twitter acess vel em https twitter com AutoInfo e outra no Youtube acess vel em ttp www youtube com channel UCYhU ZCPoRSJVYDYNOkXJCA feed x Auto Auto Info Auto Info T Siga Auto Info Autolnfo a i f Figura 31 Contas nas redes sociais criadas para o s tio 51 Nome de Utilizador E Password Entrar Lembrar Login Recuperar password Efectuar registo Figura 32 Barra superior sec o de autentica o Por fim na ltima sec o da barra superior encontra se o bot o que permite realizar o login no s tio Para isso basta passar com o cursor do rato por cima da caixa de Login exibida na Figura 32 e surgir ent o um formul rio desenvolvido com javascript css html e php onde podem ser inseridos os dados para autentica o do utilizador Caso o utilizador j tenha efectuado a autentica o no s tio apresentado em alternativa a mensagem Bem vindo nome de utilizador Sair Para sair da conta apenas necess rio clicar em Sair sendo ent o a sess o destru da atrav s do u
13. J X Cristiano Alves 4f754eca115987590e1dc0814a889e16 carvalhocristiano hotmail com 1990 05 19 Portugal Porto Masculino 7fae3jpg Renault Clio Figura 42 Registo dos dados do utilizador na base de dados 58 Em caso de esquecimento da password o utilizador pode solicitar o envio de uma nova password para o email com que efectuou o registo atrav s da op o PD Recuperar password do formul rio de login j apresentado anteriormente na Figura 39 Ao clicar nesta op o apresentada uma nova p gina onde o utilizador ter de introduzir o seu email como mostra a Figura 43 Tal como referido anteriormente quando o utilizador solicita a recupera o da sua password de acesso esta lhe enviada para o seu email como demonstra a Figura 44 No Anexo C encontra se representado o algoritmo respons vel por gerar aleatoriamente a nova password voL ro In cio Marcas Carp dia Novidadk aleria F rum w TESTES E AVALIA ES St Recuperar password Introduza o email com o qual efectuou o registo Ser gerada uma nova password e enviada para o seu email Dualogi Introduza o seu email Bom hatch m dio traz E c mbio melhorado e sede por lcool Enviar nova password e Hatch reformulado econ mico e est vel bom de cidade Figura 43 P gina de recupera o de password E Assunto Auto Info an o De Cristiano Alves lt carvalhocristiano hotmail com gt Data Hoje 17 57 51 WEST Para carvalh
14. constitu do por 5 op es que correspondem s marcas de autom veis abordadas neste projecto isto com informa o t cnica disponibilizada aos utilizadores do s tio Estas incluem citro n ford peugeot renault e seat Cada uma destas op es encontra se dividida em quatro itens descri o hist rica modelos concept cars e sites teis como pode ser visualizado na Figura 56 Uma vez que estes itens s o comuns a todas as op es inclu das variando apenas a informa o nelas contidas ser o apresentados de seguida apenas os itens referentes a uma destas op es marcas Para isto foi tomado como exemplo a primeira destas marcas ou seja a citro n O item descri o hist rica tal como o pr prio nome sugere inclui um enquadramento hist rico da marca seleccionada com apresenta o de algumas imagens sugestivas Este apresenta relev ncia para os utilizadores que pretendam adquirir algum conhecimento sobre a evolu o da marca desde a sua origem at actualidade Na Figura 57 exposto um exemplo de um destes itens afecto marca citro n Marcas Carp dia Novidades Inovagoes Galeria Forum Sites uteis Contactos Ferramentas Figura 56 Barra de menu central separador Marcas 66 23 anos Portugal Cidade Porto Viatura Renaun Clio Question rio Online vor LOTTO O item modelos constitu do por um formul rio em que os utilizadores podem consultar informa o t cnica acerca de di
15. id user int w numero mensagem int Ww nome utilizador string w assunto string W texto string data date utilizadores Ww id user int w nivel_privilegio char w nome utilizador string Ww password string foto perfil string w data nascimento date W sexo string W nacionalidade string W cidade string Ww carro actual string br email string Ww data registo date br ultimo acesso date E Registo E alterar Perfil E Alterar Password citroen geral w modelo string Ww versao string Ww id versao int Ww tipo combustivel string w numero portas string 1 W inicio producao int Ww id versao int w comprimento int W largura int w altura int W distancia eixos int Ww peso int W capacidade combustivel int Ww id_user int w id_user int w id_questionario int W id_noticia int w comentar string w id_versao int 1 w velocidade maxima int Ww id_questionario int w numero questao int Ww resposta correcta char Consultar noticias w id_noticia int W titulo noticia string W noticia string Ww imagem noticia string Ww id versao int W cilindrada int w potencia int Ww numero cilindros int W binario maximo string Figura 18 Diagrama de classes do site desenvolvido 36 Na Figura 18 apresenta se o diagrama de classes da plataforma desenvolvida o
16. localhost p f Base de Dados tese p fz Tabela citroen geral Campo Tipo Tamanho Valores Defeito Atributos 5 E21 oe Base de Dados id_versao INT x 3 None m UNSIGNED C tese E modelo VARCHAR v 10 None Y tese 0 Nenhuma tabela encontrada na versao TEXT X None 7 base de dados tipo combustivel VARCHAR x 10 None x z numero_portas TEXT x None ibd in cio producao INT X 4 None w UNSIGNED vw Coment rios da tabela Storage Engine Collation MyISAM 2 PARTITION definition Guada OuAdd 1 els Executa Figura 22 phpMyAdmin defini o e parametriza o dos campos da tabela criada phpMyAdmin g Servidor localhost 3 Base de Dados tese p E Tabela citroen geral a o Visualiza g Estrutura SQL Pesquisar nsere FEExportar import Opera es Limpa Elimina w Table tese citroen geral has been created Base de Dados tese 1 x CREATE TABLE tese citroen geral id versao INT 3 UNSIGNED NOT NULL tese 1 modelo VARCHAR 10 NOT NULL versao TEXT NOT NULL citroen geral tipo combustivel VARCHAR 10 NOT NULL numero portas TEXT NOT NULL inicio producao INT 4 UNSIGNED NOT NULL ENGINE MYISAM Edita Criar c digo PHP Campo Tipo Atributos Nulo Defeito Extra Ac es 7 id versao int 3 UNSIGNED N o None a 7 X E
17. o Esta arquitectura possui tr s componentes principais o sistema de endere amento o protocolo de comunica o e a linguagem HTML HyperText Markup Language Clientes browsers executados em diferentes plataformas Servidor Servidor atende outro servidor Figura 2 Modelo cliente servidor da Web 34 O sistema de endere amento especifica o endere o localiza o do objecto documento a que se pretende aceder e o protocolo usado para esse efeito A URL Uniform Resource Locator a forma mais conhecida para endere amento de objectos via Web e apresenta a estrutura protocolo servidor recurso em que protocolo especifica o protocolo usado para a comunica o servidor designa o servidor e recurso o documento ou recurso solicitado O protocolo mais utilizado para comunica es do tipo cliente servidor o HTTP HyperText Transfer Protocol Este especifica o modo como s o realizadas as transac es de informa o entre o s cliente s e o s servidor es atrav s da utiliza o de algumas regras b sicas Outros protocolos com um n mero de utiliza es significativo s o o FTP File Transfer Protocol usado para envio de recursos de um computador para um servidor na Web e o SMTP Simple Mail Transfer Protocol usado para correio electr nico A linguagem HTML define a estrutura e a formata o dos documentos do tipo hipertexto atrav s de etiquetas tags que indicam o modo como estes dev
18. BF modelo varchar 10 N o None fa 2X amp AT E versao text N o None eX Mh Br tipo combustivel varchar 10 N o None BAX Hh Tr 7 numero portas text N o None wz xonim in cio producao int 4 UNSIGNED N o None SSX Hh BT f Todos Nenhum Com os seleccionados f 4 X M fo Vista de impress o E Vista de Rela o P Propor uma estrutura de tabela 3 Add 1 field s No Fim da Tabela No In cio da Tabela Depois id versao Executa Figura 23 phpMyAdmin estrutura da tabela criada Ap s ter sido criada a tabela ent o poss vel preencher a mesma com os dados que se pretendem armazenar A cada conjunto de dados definidos preenchimento de todos os campos d se o nome de registos Na Figura 24 apresenta se um exemplo do modo de inser o de um novo registo onde poss vel observar que existe um separador pr prio para este efeito denominado por Insere que se encontra assinalado na figura dentro de um rect ngulo com contorno vermelho 42 phpMyAdmin g Servidor localhost gt Gi Base de Dados site E Tabela citroen geral FEVisualiza g Estrutura SQL LE Pesquisar Zeinsere Exportar fBlmport amp Opera es BEANE MELimpa KElimina B de Dadi E site 1 Campo Tipo Fun es Nulo Valor id_versso int 3 unsigned 7 1 site 1 modelo varchar 10 X c1 rc a versao text 1 0 68cv tipo comb
19. Gases if Snumero convl Sresultadol Snumerol 1 36 echo O resultado Sresultadol echo cavalos cv if numero conv2 Sresultado2 Snumerol 0 735 echo O resultado Sresultado2 echo quilowatts kW 22 A ferramenta convers o mph km h km h mph apresenta um funcionamento semelhante ferramenta apresentada anteriormente Nesta o utilizador tem a possibilidade de introduzir um valor em mph e convert lo para o respectivo valor em km h A opera o inversa tamb m poss vel de ser realizada nesta mesma ferramenta bastando para tal alterar o valor da drop down list de mph gt km h para km h gt mph Figura 76 Ferramentas Ferramenta pretendida Convers o mph km h kmh mph Introduza o valor para convers o 10 Seleccione o tipo de convers o pretendida O resultado 6 mph Figura 76 Separador Ferramentas ferramenta convers o mph km h km h mph 77 A ferramenta calcular consumo combust vel assim como o pr prio nome indica permite calcular o consumo de combust vel de determinado ve culo a partir da quantidade de combust vel gasto numa determinada dist ncia percorrida Esta ferramenta encontra se representada na Figura 77 A ferramenta calcular pot ncia do motor representada na Figura 78 possibilita aos utilizadores estimarem a pot ncia de determinado ve culo sendo apenas necess rio introduzir alguns dados do mesmo nomea
20. Interface UML diagrams Databases Relational Model vi Indice AGRA DECIMENT OS viecdiccccccssassesessossessesaasseseiocceessensesssosisssvasdoonasvegvincsonsbodeesodsconsdocusssoassocssassoseadoseasoesaaesos I RESUMO Sasori cisssscsetiossssscasnescotassusesssnbeessaasosenssssisessonasessaseaesssstvensessuasdosnvasoesbas sveasssavadeesdassvesssonvesscobsoeesaaecs HI ABSTRACT wisccsssssscssesssscscassessasascsncasseseusscnssesess ssassecoosaodovasossnsedscanseseadossass seabesseneadedeedssnsadsendaeanessesnassenesoes V INDICE neria T a soda ade A TE T R VII INDICE DE FIGURAS n aa a Rb ER IX NDICE DE TABELAS spt XII AGCRONIMOS ee a a SE R T EA E a E A E EARE XV I INTRODUCA Oee eE E oalloetcrvens dosector santas eanestosndsacau ten eee tence 1 1 1 OBJECTIVOS P E ie cokes ies us teedeebytandecaout cod vaudescaalucdecia copies sted coblets des cavteedeeivanieeiectecions 3 1 2 CALENDARIZAGAO Sextet a MesSoRSSC ELLE o beck Sheed GOLEIA OE RE EA ees 3 1 3 ORGANIZA O DO RELAT RIO cccscseessscesssscescecesseeccseeccssecceseeccesseccessecesssccesaeceesaecesssecessaeeeaeees 4 2 ESTADODAARTE viscssssssssssiesssecssocsscscsssassescssesossoassensoosiessonsosssasscoutessenssedsosssdebensonsesdooesscubensdepesdeveasonnen 7 2 1 PHAON ESA A s E E A E 8 2 1 1 Arquitectura cliente ServidO teene E O N E NE E SSNS 9 2 2 DESENVOLVIMENTO DE WEBSITE cccssceceseenseeceeeeeeeeeceseenseeeeeeeeeeeeneeesessssssneeeeeeeeeeseseeeeensaaaeeeees 10 2
21. O AutoInfo relembra o que ainda pode desfrutar dos nossos servi os Caso pretenda cancelar o seu registo favor enviar um email para tese_0713 hotmail com Pode aceder ao nosso site atrav s do link http localhost tese Os melhores cumprimentos Autolnfo Figura 48 Envio de email a relembrar ao utilizador que ainda se encontra inscrito no sitio 61 4 3 2 EDITAR PERFIL E ALTERAR PASSWORD Ap s efectuar o registo no s tio o utilizador tem a possibilidade de alterar os seus dados de perfil corrigindo eventuais dados preenchidos de forma incorrecta ou mudan as do estado de algum dos campos do registo Para isso deve ser seleccionada a op o DP Editar Perfil localizada dentro do perfil de utilizador Surge ent o a p gina de edi o dos dados de perfil que apresenta o formato apresentado na Figura 49 Como se pode visualizar ao ser apresentada a p gina s o carregados a partir da base de dados os dados de perfil do utilizador e preenchidos automaticamente nos campos respectivos Estes campos incluem email data de nascimento sexo cidade pa s carro actual e foto de perfil Para alterar os dados o utilizador apenas tem que substituir o s valor es do s campo s carregado s da base de dados que deseja modificar e para concluir o processo e actualizar a base de dados pressionar o bot o Alterar Perfil Como se pode observar n o disponibilizado nesta p gina a altera o da password uma vez que foi criada uma p gina
22. Toyota Citro n gt C Ford Citro n gt D Renault Citro n 2 Qual dos modelos abaixo apresentados n o ou n o foi fabricado pela Ford A Ka gt B El camino 5 C Maverick D Prefect simon 3 Qual o animal que esta presente no logotipo da Peugeot gt A Gato gt B Raposa gt C Doninha D Le o Lira 4 Em que ano a Renault foi criada 5 A 1898 B 1899 C 1922 gt D 1952 5 Qual dos modelos abaixo apresentados n o ou n o foi fabricado pela Seat gt A Alhambra B C rdoba gt C Altea D Sandero Figura 54 Perfil de Utilizador question rio online 65 4 4 BARRA DE MENU CENTRAL A barra de menu central apresentada na Figura 55 permite que os utilizadores acedam a todas as p ginas que fazem parte do site Esta barra composta por 9 separadores s o eles In cio Marcas Carp dia Novidades Inovac es Galeria F rum Sites teis Contactos e Ferramentas O separador apresentado por omiss o isto quando se acede ao s tio corresponde ao separador In cio Este por sua vez est associado p gina principal do mesmo A seguir ser o apresentados os restantes separadores com excep o do separador F rum que j foi referenciado na subsec o 4 3 3 Inicio Marcas Carp dia Novidadesinova es Galeria F rum Sites teis Contactos Ferramentas Figura 55 Barra de menu central 4 4 1 SEPARADORES MARCAS E SITES TEIS O separador Marcas
23. Web s o visitados uma nica vez pelos utilizadores o que se verifica n o porque o conte do do mesmo n o lhes interessa mas sim porque estes n o foram capazes de encontrar a informa o desejada Assim facilmente se percebe a necessidade de um bom planeamento e da utiliza o de ferramentas de aux lio ao processo de cria o de um website Uma das ferramentas mais utilizada para auxiliar este processo a Unified Modeling Language UML A UML uma linguagem gr fica padr o usada para especifica o constru o visualiza o e documenta o de sistemas computacionais sec o 2 3 do cap tulo 2 O processo de desenvolvimento de um website com recurso UML composto essencialmente por tr s fases levantamento de requisitos implementa o e design das interfaces A fase de levantamento de requisitos compreende a defini o dos objectivos a procura das informa es dispon veis para que haja um planeamento do website e o levantamento das necessidades do projecto e do sistema a implementar Na segunda fase que representa a implementa o s o seleccionados os requisitos definidos na etapa anterior para composi o das interfaces e do sistema de navega o Nesta efectua se uma previs o dos n veis do localizador padr o de recursos em ingl s Uniform Resource Locator URL e dos locais de entrada do utilizador no site elabora se a documenta o com informa es pertinentes as instru es de administra
24. ao item concept cars apresentada uma pequena descri o e correspondente imagem alusivas a cada um dos modelos citados Em cada um destes modelos ainda inclu do um ink para acesso directo sua p gina oficial intitulado por Clique para mais informa es onde pode ser encontrado uma descri o mais pormenorizada sobre o mesmo O item sites teis cont m uma lista com os principais sites relacionados com a marca seleccionada neste separador A cada um destes sites foi associado um link para que os utilizadores possam caso desejem aceder a estes conforme exposto na Figura 60 Nesta lista foram inclu dos apenas os sites oficiais da marca pesquisada para n o a tornar demasiado extensa e de dif cil consulta e por estes apresentarem regra geral informa o mais fi vel sem informa o adulterada cio Marcos Carpodi Citro n concept cars Citro n Survolt idade 23 anos O Survolt inverte ss ideiss recebidss e prop e ums vis o radicalmente diferente a sliancs Pale Portugal perfeita entre o glamour e s extravagancis da aita costurs com o dinamismo ds competi o Cidade Porto autom vel Mas a tudo isto junta se sinda um toque de impertin ncia so adoptar uma Viatura Renautt C o motoriza o 100 el ctrica Question rio Onire No in cio o projecto ers crisr ums categoria monomarca s para pilotos do sexo no feminino O mundo do autom vel dominado pelos homens At a pr pria ess ncia suja e mu
25. da HTML que uma linguagem est tica permite a implementa o de anima es com textos e imagens e diversas outras interac es com o utilizador sendo assim considerada um acess rio da HTML Por ser o JavaScript uma das poucas linguagens suportadas pela maioria dos navegadores mais populares esta tornou se uma linguagem alvo para muitos frameworks desenvolvidos em outras linguagens N o obstante as limita es de desempenho inerentes sua natureza din mica a crescente velocidade das implementa es JavaScript tem feito da mesma uma linguagem pr tica e de utiliza o massiva 2 5 LINGUAGENS DE PROGRAMA O PARA P GINAS DIN MICAS Inicialmente as interfaces Web n o eram mais do que documentos HTML com texto e imagens interligados por links que permitiam navegar entre documentos A necessidade de se utilizar a Web como um ambiente de base para aplica es mais complexas como por exemplo transac es com bases de dados motivou o desenvolvimento de novas tecnologias nomeadamente de tecnologias para programa o de p ginas din micas Softwares servidores de p ginas din micas como o Active Server Pages ASP Java Server Pages JSP e Page Hypertext Preprocessor PHP t m sido amplamente utilizados para o desenvolvimento de interfaces din micas geradas a partir de uma consulta base de dados e para o desenvolvimento din mico que se faz pelo aproveitamento de um ou mais arquivos em diversas interfaces usa
26. de Janeiro 2005 ISBN 8535217843 BOS Bert Web Style Sheets Home Page W3C Style Activity Lead Agosto de 2013 http www w3 org Style CARMONA Tadeu Curso pr tico de cria o de sites Digerati Books Universo dos Livros Editora Ltda S o Paulo Brasil 2006 ISBN 85 7702 063 0 CONALLEN Jim Building Web Applications with UML Addison Wesley Boston Estados Unidos da Am rica 2000 ISBN 0 201 61577 0 CSS Globe Easy Slider 17 Numeric Navigation jQuery Slider Agosto de 2009 http cssglobe com easy slider 17 numeric navigation jquery slider CSS Menu Maker jQuery Menus About our jQuery Menus Agosto de 2013 http cssmenumaker com jquery menus DANYANG Cao BINGRU Yang Design and implementation forMD5 based data integrity checking system IEEE 2 International Conference on Information Management and Engineering paginas 608 611 Abril de 2010 DZENDZIK Isolete Processo de desenvolvimento de web sites com recursos da UML Disserta o de Mestrado do Curso de P s gradua o em Computa o Aplicada INPE Instituto Nacional de Pesquisas Espaciais S o Paulo Brasil 2005 83 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 Forumeiros Descubra que Criar um forum Forumeiros com Agosto de 2013 http www forumeiros com criar um forum Freio a Tambor Como Calcular a Potencia do seu Veiculo Blogue Freio a T
27. do log tipo e do rodap do mesmo No que diz respeito barra superior esta corresponde na realidade a duas barras distintas uma apresentada caso o utilizador n o tenha realizado o login no site e outra caso tenha sido efectuado o login como representado na Figura 29 49 Barra superior caso o utilizador n o se encontre autenticado Pesquisar Marcas vQ HO s Login v Barra superior caso o utilizador se encontre autenticado Pesquisar Marcas rQ g Bem vindo Cristiano Alves Sair Figura 29 P gina principal aspecto da barra superior Para verificar se o utilizador se encontra autenticado testa se se este tem sess o iniciada ou seja se j efectuou o login no s tio Para tal necess rio recorrer ao c digo que a seguir se apresenta c digo este que se encontra na p gina principal odio session Sims isi ego lt body gt lt php LE S SESS GN aici ww 1 SCfUlaLiee Mogucicel Sibjoaicaloie m lac F else fecqMired Login carr uperior php gt lt body gt Neste extracto de c digo poss vel observar que em primeiro lugar iniciada a sess o atrav s da fun o session start e em seguida verificado o id da sess o Caso o id esteja em branco isto caso o utilizador ainda n o tenha efectuado o login chamado o ficheiro barra superior html e a barra superior apresenta o aspecto da primeira barra apresentada na Figura 29 Caso o
28. do nome de utilizador n vel de seguran a da password dados em falta esses ssa ioanpaetresiracg ced oa wien Tas ab tensa Lanes TAL Tan eas 58 Figura 42 Registo dos dados do utilizador na base de dados 58 Figura 43 P gina de recupera o de Password ccssecessceesecessecenseesneecssceceeeesseecsaeseaeeeeeeenaaes 59 Figura 44 Envio da nova password para o email do utilizador ii 59 Figura 45 Exemplo de um perfil de utilizador e erereeaeerarerenan a 60 Figura 46 Perfil de utilizador do administrador do s tio see 60 Figura 47 Painel de controlo das contas dos utilizadores ren 61 Figura 48 Envio de email a relembrar ao utilizador que ainda se encontra inscrito no s tio 61 Figura 49 P gina para editar os dados de perfil do utilizador 62 Figura 50 Pagina para altera o da password cccessecesseeeseccessececeesneecusaeceseeeseeecssaeseaeeesneeenaaes 63 Figura 51 Envio de email para confirma o de altera o da password 63 Figura 52 Processo de cria o do f rum ir irereaeceraeeer nara ceraeaenanoa 64 Figura 53 Aspecto final do f rum Autolnfo er ereeeeereeraacerareaeran a 65 Figura 54 Perfil de Utilizador question rio online ererareeereeraarerareaenanos 65 Figura55 Barra de menu centralisatie areneda aaria aean S aTa ie 66 Figura 56 Barra de menu central
29. estas informa es podem ser agrupadas por categorias isto por aquilo a que se designa de atributos Os atributos de cada entidade descrevem as suas propriedades Nos diagramas Entidade Rela o os atributos aparecem num compartilhamento diferente da entidade a que pertencem como por exemplo o atributo nome da entidade Propriet rio da Figura 12 Na Tabela 2 apresentam se os principais tipos de atributos que se podem encontrar nos DER Tabela 2 Diagramas Entidade Rela o tipos de atributos Um nico atributo representa Atributo nome da entidade uma caracter stica Propriet rio Atributos marca modelo e V rios atributos representam matr cula da entidade uma caracter stica Autom vel Um atributo que sempre nico Atributo matr cula da entidade dentro de uma entidade n o se Autom vel repete Atributo matr cula da entidade Atributo que se identifica com a i Marca o relaciona se com a chave prim ria de uma outra chave prim ria da entidade entidade Autom vel 21 nome marca modelo matricula N r y r y VA Na A A XY nome data hora matricula Figura 12 Exemplo de um Diagrama Entidade Rela o Rela es Uma rela o define uma associa o ou liga o entre duas entidades As rela es s o representadas nos DER atrav s de losangos por exemplo
30. este formul rio e ap s submeter o mesmo atrav s do bot o Enviar enviado um email para o administrador com a informa o preenchida pelo utilizador no formul rio nome email assunto e mensagem Na Figura 74 apresenta se um exemplo de um e mail recebido pelo administrador com as sugest es e ou reclama es de um utilizador espec fico O algoritmo respons vel por este separador consiste em dois ficheiros contactos php e enviar php O primeiro corresponde ao formul rio propriamente dito e o segundo baseia se na recolha dos dados enviados pelo formul rio e no correspondente envio dos mesmos para o email do administrador Estes ficheiros podem ser consultados no Anexo F Para o envio destes dados foi utilizada a fun o mail tamb m apresentada e explicada de forma sucinta no referido anexo contudo caso seja pretendido um conhecimento mais aprofundado acerca desta fun o recomenda se a leitura do manual da mesma 32 Para esclarecer d vidas questionar nos acerca dos nossos servi os apresentar sugest es ou reclama es preeencha o formul rio abaixo apresentado Nome Email Viatura Renault Clio Assunto Mensagem VoL LOTTOS Figura 73 Separador Contactos formulario de contacto Z3 E Assunto Autolnfo Pedido de contacto 8060 De Cristiano Alves lt carvalhocristisno hotmail com gt Data Hoje 23 12 49 WEST Para carvaiho cristiano sspo pt Uma mensa
31. gt SECR Eron da slider cslider autoplay 8 AGIA bgincrement 450 cad VD DE lt script gt e lt body gt lt html gt O extracto de c digo acima apresentado consiste essencialmente no desenvolvimento de um slider O slider desenvolvido composto por quatro classes da slide o que 95 corresponde a uma por cada not cia Cada classe engloba um t tulo cabe alho lt h2 gt uma descri o da not cia entre as tags lt p align justify gt e lt p gt um link para acesso not cia lt a href link da not cia gt e um outro link para acesso foto lt a href link da imagem gt A classe da arrows permite alternar entre as not cias apresentadas avan ando da arrows next ou recuando da arrows prev entre as mesmas Por fim inclu da a fun o respons vel pelo movimento deslizante do slider Os par metros mais relevantes para o desenvolvimento do slider foram autoplay e bgincrement Ao ser definido como verdadeiro true o par metro autoplay o slider ir percorrer automaticamente as classes quando carregada a p gina das novidades inova es isto sem necessidade do utilizador carregar nos bot es de avan ar ou recuar as not cias O par metro bgincrement permite incrementar a posi o da base do slider background neste caso definido como 450 o que corresponde ao tamanho total de cada uma das classes permitindo que a cada movimento seja alterada a classe exibida
32. o intuito de facilitar a programa o de websites tarefa esta muito mais complexa nessa poca Para se chegar a um resultado simples como a cria o de uma tabela os desenvolvedores de websites tinham necessidade de utilizar mais c digos face aos utilizados actualmente A primeira vers o do CSS CSS1 surgiu em 1995 como projecto de um grupo de empresas do ramo da inform tica conhecido por W3C 10 Esta alcan ou enorme destaque nos anos seguintes entre 1997 e 1999 ficando conhecida por uma grande parte dos programadores O CSS uma linguagem que determina a apar ncia layout de p ginas Web atrav s da especifica o de um conjunto de atributos de formata o da p gina de prefer ncias tipogr ficas e outras caracter sticas do dispositivo cliente de forma a garantir a continuidade visual do site Esta utilizada por milhares de programadores espalhados por todo o mundo e permite controlar as op es de margem posicionamento cores altura e largura estilos de linhas e imagens sem necessidade de programar em HTML A sintaxe da linguagem CSS um pouco diferente de sintaxe HTML por m possibilita a altera o de quase todas as tags da linguagem HTML A principal limita o desta linguagem reside na falta de reconhecimento de algumas vers es de navegadores sendo utilizada portanto como complemento ao HTML As principais vantagens da utiliza o do CSS s o facilidade de cria o de layouts que n o neces
33. o proposto por Santos 37 que sugere uma divis o deste processo em cinco etapas principais consultoria defini o an lise proposta prot tipo produ o e testes Figura 4 A primeira etapa consultoria defini o compreende um trabalho conjunto entre o desenvolvedor e o cliente quando poss vel no planeamento e organiza o do projecto Ap s a fase de consultoria elaborado um relat rio detalhado com as exig ncias t cnicas para o website e a estrutura b sica de navega o an lise proposta A seguir aprova o da proposta apresentado o prot tipo do website que pode incluir apenas o layout do mesmo ou em alguns casos um projecto semi funcional Quando o layout se encontrar de acordo com as expectativas do cliente ent o poss vel a produ o das imagens textos formul rios e outros elementos interactivos etapa de produ o Para tal o trabalho regra geral dividido internamente entre os envolvidos no processo Por ltimo efectuam se testes ao website desenvolvido e executam se as altera es necess rias 2 2 2 TIPOS DE PERFIS No que diz respeito elabora o de um website n o existe um modelo nico devido ao facto de estes variarem de acordo com a natureza e o prop sito do mesmo Estes constituem se normalmente pelos esfor os de um nico indiv duo ou de uma empresa organiza o e s o dedicados a um t pico ou prop sito em particular sempre complicado afirmar com clareza a
34. possui da Figura 12 ou outro s mbolo semelhante a estes como elipses hex gonos etc poss vel estabelecer diferentes tipos de rela es entre entidades podem ser do tipo um para um um para muitos ou muitos para muitos Uma rela o do tipo um para um se a uma ocorr ncia de uma entidade corresponder uma e uma s ocorr ncia de uma outra entidade exemplo a cada entidade Propriet rio corresponde uma e uma s ocorr ncia na entidade Autom vel da Figura 12 Uma rela o do tipo um para muitos se a uma ocorr ncia de uma entidade corresponder uma ou mais ocorr ncias de uma outra entidade sendo que a esta segunda apenas pode corresponder uma ocorr ncia da primeira Na Figura 12 pode se visualizar uma rela o do tipo um para muitos em que cada Marca o atendida por um e um s Funcion rio e cada Funcion rio atende a uma ou v rias Marca es Uma rela o do tipo muitos para muitos se a uma ocorr ncia de uma entidade corresponder uma ou mais ocorr ncias de uma outra entidade 2 4 LINGUAGENS DE PROGRAMA O CLIENT SIDE As linguagens de programa o client side s o linguagens executadas no lado do cliente ou seja no computador do pr prio utilizador e por isso s o utilizadas nas situa es em que a linguagem server side executadas no lado do servidor n o tem alcance Nas linguagens interpretadas na m quina cliente client side o conte do gerado e
35. sido utilizado o m todo post uma vez que neste os dados s o enviados parte ou seja separados do cabe alho da requisi o que o navegador envia para o servidor Desta forma os dados inseridos no formul rio ser o passados para a p gina enviar php de uma forma invis vel para o utilizador visto que as vari veis enviadas n o s o mostradas na URL Uniform Resource Locator 97 Dentro do formul rio foram definidos quatro campos nome email assunto e mensagem Os tr s primeiros correspondem a campos com entrada de dados de apenas uma linha lt input type text gt e o ltimo com entrada de dados de v rias linhas textarea Existe ainda um bot o submit para proceder ao envio destes dados O ficheiro enviar php permite recolher os dados do formul rio e envi los para o email do administrador O c digo respectivo a este ficheiro apresentado a seguir lt html gt ERR lt php declara o das vari veis que recebidas pelo m todo post Semail destino carvalhocristiano hotmail com Snome S POST nome Semail POST email Sassunto S POST assunto Smensagem S POST mensagem ScorpoDoEmail Uma mensagem vinda do site AutoInfo Um visitant nviou esta mensagem pelo sit Nome Snome Email email Assunto Sassunto Mensagem mensagem Scabecalho MIME Version 1 0 r n Content type text html charset iso 8859 1 r n METrO RS email NEN T Reply To
36. utilizador tenha realizado o login ent o atribu do um id sess o e requerido o ficheiro respectivo barra superior php Neste caso a barra superior apresenta o aspecto da segunda barra apresentada na figura referida Em ambos os casos duas barras pode ser encontrada numa primeira sec o um drop down menu onde se encontram os campos de pesquisa com possibilidade de seleccionar o que se pretende pesquisar seja marcas de autom veis ou respectivos modelos Ao iniciar a escrita na caixa de texto surgem sugest es de pesquisa tanto de marcas como de modelos de 50 forma a facilitar a pesquisa como demonstra a Figura 30 Estas sugest es foram implementadas em jquery e php e efectuam a pesquisa nas tabelas de dados das marcas e modelo pelas palavras introduzidas na barra de pesquisa pelo utilizador Figura 30 Barra superior sec o de pesquisa de marcas e modelo Se o utilizador efectuar a pesquisa baseada em marcas ser pesquisado nas tabelas de dados referentes s mesmas citroen geral ford geral peugeot geral renault geral e seat geral o conte do da pesquisa Caso seja encontrada correspond ncia com uma marca contida na base de dados ser ent o encaminhado para a p gina do s tio da marca pesquisada que pode tamb m ser acedido atrav s do separador Marcas da barra de menu central conforme ser exposto na subsec o 4 4 1 A pesquisa baseada nos modelos apresenta um funcionamento semelhante
37. v o gastar para efectuar determinada viagem Para isso os utilizadores devem introduzir no formul rio apresentado a dist ncia a ser percorrida o consumo m dio de combust vel do autom vel e o seu pre o respectivo que o algoritmo criado encarrega se de calcular o custo aproximado da viagem Note se que caso o utilizador n o tenha acesso ao valor actual do pre o do combust vel para a sua viatura pode consultar essa informa o neste mesmo site uma vez que foi inclu do na sua p gina principal um script com esta informa o subsec o 4 1 3 Ferramentas Ferramenta pretendida Calcular custo monet rio de viagem Dist ncia percorrida em kil metros 15 Consumo de combustivel do veiculo 1100km 5 5 Pre o do combust vel 1 1 49 O custo monet rio para esta viagem de aproximadamente 1 23 Figura 79 Separador Ferramentas ferramenta calcular custo monet rio de viagem 79 5 CONCLUS ES Com a realiza o deste trabalho foi poss vel adquirir novos conhecimentos e consolidar os ja existentes relativos ao desenvolvimento de aplica es Web nomeadamente cria o de websites Estes conhecimentos distribuem se pelas tem ticas de sistemas de gest o de base de dados diagramas UML e linguagens de programa o para sistemas computacionais Ao elaborar a aplica o Web foi poss vel verificar a import ncia da execu o de uma an lise pr via dos requisitos antes d
38. variam consoante o tipo de utilizador isto visitante utilizador registado ou administrador esta distin o j foi abordada no cap tulo 3 aquando da an lise de requisitos e do diagrama de use cases sec es 3 2 e 3 3 respectivamente ainda nesta coluna que se encontram localizados o calend rio e o rel gio para apresenta o da data e das horas respectivamente Por ltimo apresentado um script desenvolvido em JavaScript com not cias testes e comparativos e fotos do mundo autom vel em constante actualiza o 48 A barra de menu central possibilita aos utilizadores acederem a todas as p ginas que comp em o s tio Mais frente ser o apresentadas todas as p ginas que estes poder o consultar atrav s da referida barra sec o 4 4 Na sec o de conte do central apresenta se o conte do da p gina acedida nomeadamente as not cias principais um quadro com uma mensagem de boas vindas ao site e dois scripts um com not cias sobre o desporto autom vel actualizadas via Google Web Elements 19 e um outro com informa o relativa ao pre o m dio dos combust veis actualizada de forma autom tica e constante A coluna da direita apresenta informa o relativa ao campeonato de F rmula 1 poca 2012 2013 nomeadamente as classifica es individual e por equipas O rodap inclui uma lista com alguns dos links mais comuns que se podem encontrar em qualquer website de forma a facilitar o seu aces
39. 2T Etapas planeamento rrenen a a E gash ia E a e cia E ETE S E ine ll 22 2 Tipos d perfis saias da pa Deas gad Reais Benoa gk Pasa pub dns EEA DON Sa aU de DS ETE sans 13 2 3 DIAGRAMAS UML E MODELO RELACIONAL DE BASES DE DADOG sscscccceeeeeeseeeeensenteeeeees 14 2 3 1 Diagrama de USE CASES casi niaii ss ckectaish seeaseescdagyish stated seed stash a digas da gone arasa Too akika aeai 16 2 3 2 Diagrama d classes a scccsise teh Ree aisha bad dated E tees ested eek eas 18 2 3 3 Diagrama entidade rela o cesccccesecccsssccenseceeseeccessecseseeceeseeceeseceesaecessaeeessaeesseeesneeeeaeees 20 2 4 LINGUAGENS DE PROGRAMA O CLIENT SIDE cceceesessseseeececeeeecceeseseessssnseeeeeeeeceeesseenessnsaeeeeees 22 2 4 1 HIMD es eRe er Oar N ee ee eee eee eee 23 2 4 2 CS Sse se os Ra RR SOS ER ERES e aT Tee UHE TEU 25 2 4 3 J AVASCHIPE norin a ah swab tbied ae i e cha chat e a Sian E T a PE dose nhasta nie indado 26 2 5 LINGUAGENS DE PROGRAMA O PARA P GINAS DINAMICAS csccsssssceesseceesceecseccessecceseceetsecesaes 26 2 5 1 PS Peet essen tess a RO RR RR EE EEE ERE 27 2 5 2 o aisles gated eae htt ores cae PR UR Clana RS UR EGRESSOS 28 2 5 3 PHP phic cece eid REAIS ER RR OTAN ER SORA SO RAIN NEC E ERS 28 3 PLATAFORMA WEB MODELA O jo usioiasini i o adia 31 3 1 INTRODU O essas teres cistos A Seabed cd pes EE Sas A STALIN ss R TaTo LISTA asas dad an bak eed As ote 31 3 2 ANALISEDE REQUISITOS 2 s
40. 71 apresenta se um exemplo da adi o de um novo v deo ao sub separador V deos por parte do administrador semelhan a do anterior tamb m neste sub separador utilizada a aplica o shadowbox neste caso para reprodu o dos v deos Figura 72 Marcas Carp dia Novida eis Contactos Ferramentas vi Citro n Ford Peugeot Renault Seat PESSOA FSNC3B2wD 0 Renault w Renault Clio Mk3 An lise Cidade Porto P gina 1 Painel de Controlo Question rio Online Editar Perfil Alterar Password Renault Cho An lise WhatCar Renault Megane Mk3 An lise Renault Twingo Mk3 An lise Figura 71 Sub separador V deos adicionar um novo v deo Renault Clio An lise WhatCar Figura 72 Sub separador V deos aplica o da shadowbox 74 4 4 4 SEPARADOR CONTACTOS Se um utilizador necessitar de entrar em contacto com a administra o do site a fim de esclarecer eventuais d vidas efectuar alguma quest o acerca dos servi os oferecidos apresentar sugest es e ou reclama es pode faz lo atrav s do separador Contactos Ao aceder a este separador poss vel encontrar um formul rio igual ao apresentado na Figura 73 onde necess rio preencher os dados do utilizador nome e email e os dados da mensagem a ser enviada assunto e mensagem O formul rio acima apresentado permite que os utilizadores enviem as suas d vidas sugest es e ou reclama es para o administrador do s tio Ao preencher
41. A PASS WORD ssssssssssssssessessseseeesees ANEXO D ALGORITMO SEPARADOR CARPEDIA escsssssssssscssssssssssssssasscassasseaccesceacsssccassescsesessees ANEXO E ALGORITMO SEPARADOR NOVIDADES INOVA ES sssssssssssssesscsssssssessessascnsensens ANEXO F ALGORITMO SEPARADOR CONTACTOS sssssssssssssssessssssssvscsscssesscessssscsseesscsseeesees viii Indice de Figuras Figural Arquitectura b sica de uma aplica o Web 34 8 Figura 2 Modelo cliente servidor da Web 34 cccccccccseessessecsseccecceeceeceeeeceeceeeceseeseseeseeneeraaaas 9 Figura3 Ciclo de desenvolvimento de um website modelo proposto por Scapin 38 12 Figura4 Ciclo de desenvolvimento de um website modelo proposto por Santos 13 Figura5 Hierarquia dos diagramas UML existentes rear 15 Figura6 Diagrama de use cases representa o gr fica de um Actor 2 16 Figura7 Diagrama de use cases representa o gr fica de um Caso de Uso 2 17 Figura8 Diagrama de use cases a exemplo de uma rela o de associa o b exemplo de uma rela o de generaliza o 2 s sizmaa ces cita a a EE Aae aS EEEN E aE Eees 18 Figura9 Diagrama de classes representa o gen rica de uma Classe 2 1 19 Figura 10 Diagrama de classes representa o gr fica dos diferentes tipos de rela es entre objectos 2 19 Figura 11 Diagrama de classes
42. Figura 36 a Coluna da direita classifica o individual b Coluna da direita classifica o por equipas 54 A coluna da direita assim como j foi referido exibe informa o relativa ao campeonato de F rmula 1 da presente poca 2012 2013 nomeadamente as classifica es individual e por equipas representadas na Figura 36 a e b respectivamente A apresenta o desta informa o no s tio engloba a inclus o anterior da mesma na respectiva tabela da base de dados formulal classificacao de forma a ser poss vel a sua consulta Todo este processo resume se ao c digo apresentado no Anexo A 4 1 3 CONTE DO CENTRAL A sec o de conte do central engloba o conte do da p gina acedida No que diz respeito p gina principal do s tio esta inclui as not cias principais uma mensagem de boas vindas ao site e dois scripts um com not cias sobre o desporto autom vel e outro com informa o relativa ao pre o m dio dos diferentes tipos de combust veis como demonstra a Figura 37 As not cias principais da p gina principal est o constantemente a rodar isto avan am para a not cia seguinte de forma autom tica e a uma velocidade constante previamente definida em forma de slide Tal s se tornou poss vel uma vez que foi associado a estas not cias um easy slider para apresenta o das mesmas Foi ainda implementada uma outra tecnologia denominada por shadowbox de forma a permitir abrir ampli
43. LATAFORMA WEB IMPLEMENTA O Neste cap tulo ser o apresentadas as p ginas existentes no site tamb m conhecido por s tio em portugu s bem como uma explica o das potencialidades de cada uma delas e do modo como se relacionam entre si Ser o tamb m apresentadas todas as op es tomadas tecnologias escolhidas ao longo do projecto e o modo como foram integradas no s tio medida que este foi evoluindo De forma a possibilitar uma melhor compreens o do funcionamento do s tio entendeu se Pa Ses Bie Sa ae ae necess ria a divis o deste projecto em quatro sec es p gina principal perfil de utilizador pagina de registo e barra de menu central O sitio foi implementado atrav s do software Macromedia Dreamweaver que pode ser descarregado via web a partir do site da companhia norte americana Adobe Systems 1 Trata se de um software de desenvolvimento voltado para aplica es web de f cil utiliza o e configura o e que suporta diversas linguagens de programa o tais como CSS Cascading Style Sheets JavaScript Ajax Asynchronous Javascript and XML PHP e JSP JavaServer Pages Com excep o da linguagem JSP foram utilizadas todas estas 47 linguagens durante o processo de cria o do s tio conforme ser poss vel atestar ao longo das pr ximas sec es O Dreamweaver possibilitou liberdade de escolha em rela o constru o do s tio no que diz respeito estrutura das su
44. PLATAFORMA WEB DE INFORMACAO AUTOMOBILISTICA Cristiano Herlander Carvalho Alves HE Instituto Superior de Engenharia do Porto Departamento de Engenharia Electrot cnica Instituto Superior de Engenharia do Porto 2013 Este relat rio satisfaz parcialmente os requisitos que constam da Ficha de Disciplina de Tese Disserta o do 2 ano do Mestrado em Engenharia Electrot cnica e de Computadores Candidato Cristiano Herlander Carvalho Alves N 1080440 1080440 isep ipp pt Orienta o cient fica Cec lia Maria do Rio Fernandes Moreira Reis cmr isep ipp pt Instituto Superior de Engenharia do Porto Departamento de Engenharia Electrot cnica Instituto Superior de Engenharia do Porto 30 de Outubro de 2013 Agradecimentos Quero desde j agradecer a preciosa colabora o da Professora Cec lia Reis pela sua disponibilidade rigor cient fico e dedica o para que este projecto fosse um xito Aos meus amigos e familiares agrade o todo o apoio que me permitiu abra ar este projecto que sendo exigente os torna ainda mais queridos Quero deixar aqui um agradecimento especial minha m e pelos valores que sempre me tentou incutir e por me ter disponibilizado na medida do poss vel todo o apoio necess rio minha forma o acad mica Estou ainda em d vida para com muitas pessoas pela sua ajuda apoio e paci ncia E por isso que quero dedicar este trabalho a todos aqueles que sem reservas
45. QL foi utilizada a aplica o phpMyAdmin que simplifica o acesso base de dados permitindo definir manipular e consultar os seus dados Palavras Chave Sistemas de Informa o Internet Interfaces Web Diagramas UML Bases de Dados Modelo Relacional Abstract This dissertation fits within the scope of Information Systems namely in the development of Web applications such as the case of a website With the wide use of technological means it has been verified its exponential growth which is reflected in the easiness in which they can be found on the Internet in every type of computer platforms Moreover nowadays a large part of the organizations has its own website to disclose your services and or products The aim of this dissertation is to explore these new technologies including Unified Modeling Language diagrams UML and design of databases and then develop a website The development of this website do not propose the creation of a new technology but the use of different technologies together using the UML tools This process is organized in three main phases requirements analysis implementation and interface design In the requirements analysis was carried out the lifting of the proposed objectives for the system and the needs requirements for its implementation assisted essentially by the Use Case Diagram of the system In the implementation phase were prepared the archives and directories that make up the lo
46. Semail destino Sassunto2 AutoInfo Pedido de contacto enviar os dados usando a funcdo mail mail Semail destino Sassunto2 ScorpoDoEmail cabecalho Mostrar no navegador da pessoa que enviou o email uma mensagem de confirma o echo A sua mensagem foi enviada com sucesso gt ae lt html gt Tal como poss vel observar no extracto de c digo apresentado acima em primeiro lugar s o recolhidos atrav s da vari vel _POST os dados inseridos no formul rio e armazenados nas vari veis correspondentes nome email assunto e mensagem Por ltimo s o enviados os dados para o e mail atrav s da fun o mail O primeiro par metro email destino refere se ao receptor do e mail neste caso o administrador do s tio carvalho cristiano Osapo pt O par metro assunto2 designa o assunto do e mail a ser enviado O par metro seguinte corpoDoEmail diz respeito mensagem em si ou seja mensagem que ser enviada para o administrador Por fim o par metro cabecalho serve para adicionar cabe alhos extra como por exemplo From Cc e Bcc 98
47. Utilizador registado Explorar o site A gt CRegine no te Visitant SE Z ie Visitante realiza o registo para ter acesso a zonas restrictas do site Figura 17 Diagrama de use cases da plataforma Web Definidos que est o os actores e as funcionalidades associadas ao sistema pode ent o ser representado o diagrama de use cases onde ser apresentada a forma como estes se relacionam entre si O diagrama referido encontra se ilustrado na Figura 17 Analisando a Figura 17 pode se constatar que os visitantes podem explorar o site e efectuar o registo no mesmo Ap s efectuar o registo passa a ser considerado como utilizador registado onde para al m de poder continuar a explorar o site pode ainda aceder a zonas exclusivas acesso exclusivo O administrador do sistema tem por funcionalidades a sua gest o e o controlo de acesso a ele 35 3 4 Ap s terem sido identificados os diferentes actores que ir o interagir com o sistema desenvolvido e descritas as funcionalidades associadas a cada um deles pode ent o ser constru do o diagrama de classes do sistema O objectivo do diagrama de classes consiste em descrever os v rios tipos de objectos entidades e conceitos do sistema as caracter sticas comuns em termos de propriedades atributos e o relacionamento entre eles Os elementos principais deste tipo de diagramas s o classe atributos opera es e multiplicidade Atributos DIAGRAMA DE CLASSES forum
48. a considerado pelo menos como m dio ver sec o 4 2 Caso cumpra este requisito enviado um email de confirma o para o utilizador no qual poder consultar futuramente os novos dados de acesso ao s tio Figura 51 Assunto Auto Info apec De Cristiano Alves lt carvalhocristiano hotmail com gt Data Qui 12 Set 2013 00 06 51 WEST Para carvalho cristiano sapo pt Bem vindo ao nosso site Os seus dados para que possa efecuar o login no nosso site s o apresentados a seguir Nome de utilizador Cristiano Alves Password 6J4JEZyr9 Pode aceder ao nosso site atrav s do link http localhost tese Os melhores cumprimentos Auto Info Figura 51 Envio de email para confirma o de altera o da password 63 4 3 3 FORUM E QUESTION RIO ONLINE Como referido atr s o acesso ao f rum do site pode ser efectuado a partir do separador do perfil de utilizador nomeadamente atrav s da op o gt F rum Ap s alguma pesquisa foi optado pelo desenvolvimento do f rum atrav s do servi o Forumeiros com 17 em grande parte devido ao facto de ser gratuito a hospedagem do f rum tamb m gratuita e bastante simples sendo apenas necess rio preencher um formul rio com informa es b sicas e essenciais para a cria o do mesmo conforme exposto na Figura 52 Como demonstra a Figura 52 ao ser utilizado o servi o Forumeiros com o processo de desenvolvimento de um f rum bastante simples sendo apenas ne
49. a p gina respectiva Figura 46 Perfil de utilizador ad Nome Administrador Idade 23 anos Pais Portugal Viatura BMW 120d m Painel de Controlo Question rio Online F rum Editar Perfil Alterar Password Figura 46 Perfil de utilizador do administrador do s tio 60 No painel de controlo apresentado na Figura 47 o administrador pode verificar a data do registo e do ltimo acesso ao sitio de todos os utilizadores e o tempo decorrido entre ambas Atrav s deste o utilizador pode ainda seleccionar as contas inactivas durante determinado per odo de tempo seleccionado atrav s da op o ltimo acesso e enviar um email a esses utilizadores a relembrar que podem usufruir dos servi os do s tio ou ent o caso prefira eliminar a s conta s desse s utilizador es Ao seleccionar a op o Enviar emails enviado um email semelhante ao da Figura 48 para os utilizadores seleccionados a ltimo acesso Marcar todos Desmarcar todos Utilizador Data do registo ltimo login Dias de inactividade Painel de Controlo Ant nio 2012 06 12 2013 08 03 39 dias Rae e E Ad o Cunha 2013 08 23 2013 08 23 19 dias Eliminar utilizadores Enviar emails Figura 47 Painel de controlo das contas dos utilizadores Assunto Autoinfo agogo De Cristiano Alves lt carvalhocristiano hotmail com gt Data Hoje 23 09 41 WEST Para carvalho cristiano sapo pt Ola Cristiano Alves
50. a um consenso do modo como deve ser sistematizado o processo de cria o de um website e quais os modelos necess rios para este processo existe um padr o conhecido como JEEE 2001 Pr ticas recomendadas para a Internet Engenharia de websites gest o de websites e ciclos de vida de websites definido no IEEE Instituto de Engenheiros El ctricos e Electr nicos 21 que inclui um conjunto de normas para o desenvolvimento de websites e os tipos de informa o que nestes devem ser destacados Algumas destas normas que pretendem facilitar o sistema de acesso e navega o de um website s o e todos os documentos e informa o diversa publicados num website dever o terminado o seu prazo de vida passar para o arquivo e manter se dispon vel para os utilizadores por exemplo atrav s de motores de pesquisa de forma a facilitar a procura de informa o e devem ser realizados testes sobre as p ginas em diferentes navegadores e em diferentes vers es pelo menos para os dois navegadores com maior divulga o e nas suas duas ltimas vers es e A concep o das p ginas dever permitir a navega o mesmo com a resolu o gr fica diminuta 2 2 1 ETAPAS PLANEAMENTO Antes de se criar um website este deve ser devidamente planeado isto devem ser identificados os recursos t cnicos financeiros e humanos necess rios para o acompanhamento desenvolvimento e promo o do projecto Sem um bom planeamento c
51. ais utilizados e por ventura os mais importantes no contexto dos diagramas UML servindo de apoio maioria dos outros diagramas Como o pr prio nome indica estes diagramas definem a estrutura das classes utilizadas no sistema determinando os atributos e m todos usados por cada uma delas para al m de estabelecer o modo como se relacionam e trocam informa es entre si A sua cria o resulta de um processo de abstrac o onde s o identificados os objectos entidades e conceitos relevantes para o sistema a ser modelado e onde se procura descrever as caracter sticas comuns em termos de propriedades atributos e de comportamentos opera es Os diagramas de classes s o considerados est ticos uma vez que a estrutura neles descrita sempre v lida em qualquer ponto do ciclo de vida do sistema Frequentemente os sistemas possuem mais do que um diagrama de classe devido ao facto de as classes n o estarem todas inseridas num nico diagrama podendo uma determinada classe participar em v rios diagramas Nos diagramas de classes existem tr s elementos de modela o que importam referir classe rela o e multiplicidade Classe Uma classe define os atributos e os m todos opera es de um conjunto de objectos que compartilham o mesmo comportamento e possuem o mesmo conjunto de atributos diz se que todos estes objectos s o inst ncias da classe a que pertencem As classes s o representadas por rect ngulos divid
52. ambor Fevereiro de 2009 http freioatambor blogspot pt 2009 02 como calcular potencia do seu veiculo html Google Google Web Elements Google News Agosto de 2013 http www google com uds modules elements newsshow iframe html rsz large amp for mat 300x250 amp hl pt PT amp q Desporto Autom C3 B3vel GUEDES Gilleanes UML 2 Uma Abordagem Pr tica 2 edi o Novatec Editora S o Paulo Brasil 2011 978 85 7522 281 2 ISAAK Jim Web site engineering best practice standards IEEE 2001 Proceedings of the 4 International Workshop on Web Site Evolution Montreal Canad Outubro de 2002 ISBN 0 7695 1804 4 JARVINEN K TOMMISKA M SKYTTA J Hardware Implementation Analysis of the MDS Hash Algorithm Proceedings of the 38 Annual Hawaii International Conference on System Sciences vol 9 Janeiro de 2005 jQuery User Interface Accordion jQuery UI Team Agosto de 2013 http jqueryui com accordion jQuery User Interface Slider jQuery UI Team Agosto de 2013 http jqueryui com slider jQuery User Interface Tabs jQuery UI Team Agosto de 2013 http jqueryui com tabs Mais Gasolina Utilidades Widgets Portugal Agosto de 2013 http www maisgasolina com widgets MICROSOFT The Official Microsoft ASP NET Site Neudesic LLC Microsoft California 2013 http www asp net OLIVEIRA Jo o N SANTOS Leonel D dos Amaral Lu s A do Guia de Boas Pr ticas na Constru o de Web Site
53. ar a not cia que se pretende consultar e efectuar caso se pretenda coment rios s mesmas como se demonstra na Figura 38 Ao abrir uma not cia poss vel visualizar do lado esquerdo da shadowbox a imagem da not cia e os coment rios a esta associados e do lado direito o seu t tulo e conte do Estas duas solu es easy slider e shadowbox foram implementadas com recurso s tecnologias jquery css e html Por serem necess rios conhecimentos acerca destas linguagens que n o se enquadram nos objectivos definidos para este projecto nomeadamente de jquery foram descarregadas da internet duas solu es j desenvolvidas uma para implementa o do easy slider 13 e outra para implementa o da shadowbox 39 s quais foram efectuadas as devidas altera es para conformidade com o site desenvolvido 55 Mensagem de Boas Vindas Noticias Seja bem vindo a Visitante ao site Auto Into Esteja vontade para navegar pelo nosso site e desfrutar de todas as suas funcionalidades THE F Pre o m dio dos combust veis Desporto Autom vel FOTOS novo Audi Sport Quattro chega aos Gasolina AutoPortal 2 horas atr s O Audi Sport Quattro est de regresso tr s d cadas essso E c1774 depois do seu lan amento com um prot tipo hibrido Gas leo que abre caminho para o lan amento de um desportivo de ligar tomada O Sport Quattro e tron Res D 1 531 4 Audi Sport Quattro um hibrido GPL Auto Aud
54. as p ginas que foram implementadas atrav s do uso de folhas de estilo em HTML HyperText Markup Language e programa o necess ria para a interac o dos utilizadores com o site como o acesso base de dados 4 1 P GINA PRINCIPAL A p gina principal do site desenvolvido Autolnfo representada na Figura 28 corresponde p gina apresentada ao utilizador quando este acede raiz do site localizado em http localhost tese index php Esta p gina constitu da essencialmente por uma barra superior log tipo do site coluna da esquerda coluna da direita barra do menu central conte do central e rodap A barra superior contempla uma drop down menu 14 que permite pesquisar atrav s de palavras chave alguns dos conte dos do s tio nomeadamente marcas de autom veis e respectivos modelos Numa segunda sec o desta barra s o apresentados alguns cones que d o acesso s p ginas das redes sociais criadas para o s tio nomeadamente Facebook Twitter e Youtube Esta possui ainda um bot o que permite realizar o login no s tio O log tipo localizado abaixo da barra superior refere se forma particular como o s tio representado graficamente pela escolha de um desenho com uma tipografia espec fica que pretende facilitar a identifica o do mesmo perante o seu publico alvo 2 Na coluna da esquerda inclu do um separador que permite ao utilizador aceder a determinados conte dos do s tio que
55. atar no rect ngulo vermelho assinalado na Figura 20 Esta base de dados ser usada para armazenamento dos dados que ser o exibidos no site desenvolvido e ou inseridos a partir deste 3 6 1 CRIA O DAS TABELAS DE DADOS Ap s criada a base de dados podem ser definidas as tabelas que a constituem tal como apresentado na Figura 21 A base de dados composta por 35 tabelas conforme referido anteriormente na sec o 3 4 De forma a clarificar o modo como estas podem ser criadas e quais os par metros que devem ser configurados ser o expostos a seguir os passos efectuados para cria o de uma destas tabelas em particular da tabela citroen geral Durante este processo necess rio definir apenas dois par metros o par metro Nome que tal como o nome indica permite associar tabela um nome exemplo citroen geral e o par metro Number of fields que designa o n mero de campos da tabela exemplo 6 40 phpMyAdmin gJ Servidor localhost p i Base de Dados tese BIO ES Estrutura A2SQL Pesquisar Pesquisa por formul rio Exportar import Designer Opera es esPrivil gios Elimina Base de Dados Database tese has been created tese Ra tese 0 Edita Criar c digo PHP Nenhuma tabela encontrada na base de dados Nenhuma tabela encontrada na base de dados 48 Criar nova tabela na base de dados tese Nome citroen geral Number of fields 6 Executa
56. bina o PHP3 MySQL alcan ou o pr mio de sistema de gest o de bases de dados do ano em 1998 No extracto de c digo que se segue apresentado um pequeno exemplo do funcionamento de um arquivo PHP identificado pelas tags lt php e gt embutida no meio de uma p gina HTML identificada pelas tags lt html gt e lt html gt lt html gt lt head gt lt title gt Exemplo de c digo php lt title gt lt head gt lt body gt lt php Sa Ol Mundo echo Sa 2 gt lt body gt lt html gt 29 O c digo PHP acima apresentado resume se na defini o de uma vari vel vari vel a identificada por a e respectiva impress o para o ecr navegador usado pelo cliente Neste poss vel observar alguns aspectos relativos sintaxe b sica O primeiro que em cada linha de c digo tem de haver um ponto e v rgula de forma a indicar ao sistema o fim da instru o exemplo echo a O segundo reside no facto de em PHP todas as vari veis serem identificadas pelo caracter e n o ser necess rio defini las antes de serem utilizadas nem definir um tipo para ela int float char 30 3 PLATAFORMA WEB MODELACAO Neste cap tulo apresentada a fase de projecto para o desenvolvimento da plataforma web Inicialmente introduzido o conceito do projecto e quais os objectivos que se pretendem alcan ar com a realiza o do mesmo Numa fase seguinte ser apresentada a an lise dos requisito
57. ce E sev ceecesvet caxcecs cas Seceet Dada ES itetedebecerss Mapstlous AEE 32 3 3 DIAGRAMA DE USE CASES x scainas sxc roses E S oho awiadi ede enotaieataine Ahh 34 vii 3 4 DIAGRAMA DE CLASSES lt lt lt cvsdeeiess csi cchican dense E EE ES evi serasa inn aca O EErEE tos ias tania dinda ceadecdeespecieeaes 3 5 DIAGRAMA ENTIDADE RELAGCAO cc cccccccceeeeeesssnneeeeeeeeecccesneseeaeaeeeeeeeeeeeesessssaeeeeeeeeeeeeneeseesneaaes 3 6 DESENVOLVIMENTO DA BASE DE DADOS csssseseeeeeeeeeeecesseesenaaeeeeeeeeeseeseseseaseeeeeeeeeseneeeeesseaaes 3 6 1 Cria o das tabelas de dados cesses eseeeeesseessaeeessseeessseecesaeecnsaeecnaeesenaeeeegs 3 6 2 Interac o com a base de dados erre neeera narra aaa eranaeeaeaaeraneaeraarenana 4 PLATAFORMA WEB IMPLEMENTA O esssssseseesssssseeeeessssssecesrosssesseessssseeeee Als PAGNA PRINCIPAL ts so fos vegesestaseeds db aeee O aaee ea ssa E as qa US Dna Sa A bat alta 4 1 1 Barra superior log tipo e rodap ren reeenanaeenanaereaaaeeeaaeranaaeranarenana 4 1 2 Coluna da esquerda e coluna da direita eeereerea carreata era neeeranaeeraneeeaa 4 1 3 Conte do Centr l uses cre Bivites avo e Wade dava voos T Em ada Stes Uno e ASS doa Rees RS ago bso da Sad aah ea abot 4 2 P GINA DE REGISTO suit sits saadacevetevens E e cars EE AE E r s 4 3 PERFIL DE UTILIZADOR si tintos cdescabsaestes sdavecveccst css sdsucuscccvecssuksdtneguedentds sighevted cd
58. cess rio introduzir no formul rio disponibilizado o t tulo descri o e endere o para o f rum e o email e respectiva senha para administra o do mesmo Ap s preenchidos estes campos e alteradas algumas op es disponibilizadas ap s preenchimento do formul rio o f rum do site apresenta o aspecto representado na Figura 53 O f rum criado pode ser acedido atrav s do link http autoinfo forumeiro com AE Forumeiros com 4 Escolha do tema Preencha o formul rio 3 Confirme sua senha F rum gr tis _ Informa es sobre o F rum Titulo do seu f rum Autoinfo Descri o Este site foi desenvolvido no 4 mbito do projecto de Tese do estrado em Engenharia 5 Electrot cnica e de Y Endere o do seu f rum iie fenmen Minimo 4 caracteres Informa es sobre o Administrador Seu e mail tese_0713 hotmail com Senhs pars s sdministra o eeccccccees 6 caracteres no m nimo compostos de n meros e letras gt Figura 52 Processo de cria o do f rum 64 Forumeiros Compartilhe eS FT Foe Bem vindo Admin Notifica es A AutoInfo Este site foi desenvolvido no Smbito do projecto de Tese do Mestrado em Engenharia Electrot cnica e de Computadores ramo Automa o Sistemas Oln cio Calend rio C FAQ Q Buscar Membros Grupos Z Perfil Mensagens privadas Sair Admin Buscar Buscar Data hora atual Qui 12 Set 2013 21 47 A sus ltims vi
59. cionar uma maior facilidade de interpreta o dos conte dos apresentados no cap tulo seguinte Plataforma Web Modela o Nos dois cap tulos seguintes cap tulo 3 e cap tulo 4 apresentam se as v rias etapas percorridas desde o planeamento at implementa o da plataforma Web que podem ser agrupadas em dois grandes grupos modela o e implementa o Na etapa de modela o apresentada no cap tulo 3 introduzido o conceito do projecto e efectuada a an lise dos requisitos para a plataforma a ser desenvolvida A seguir s o apresentados os diagramas UML diagramas de classes e de use cases relativos plataforma e o modelo relacional da base de dados atrav s da an lise do diagrama entidade rela o S o ainda relatados todos os passos para o desenvolvimento da base de dados usada nesta plataforma nomeadamente a cria o das diferentes tabelas de dados e interac o entre elas O objectivo principal deste cap tulo expressar numa linguagem modelo as principais funcionalidades e rela es afectas plataforma No cap tulo 4 referente etapa de implementa o incluem se as diferentes p ginas que fazem parte do s tio e as potencialidades de cada uma delas evidenciando todas as op es tomadas como por exemplo as tecnologias usadas e o modo como estas se relacionam entre si De forma a possibilitar uma melhor compreens o do funcionamento da plataforma Web foram inclu dos alguns c digos extracto
60. cteresAceitos 1 Spass null ore SiSOs Sal lt Be Sse i Spass CaracteresAceitos mt_rand 0 max Spassd md5 Spass Ssqlinsert UPDATE utilizadores SET password Spassd WHERE email Semail mysql query sqlinsert or die N o foi poss vel inserir os dados require registar enviar email php Ficheiro para enviar email gt lt b id label gt A sua password foi enviada com sucesso lt b gt lt php else gt lt b id erro gt O0 email que inseriu n o se encontra registado lt b gt lt php Be Quando se pressiona o bot o Enviar nova password o algoritmo come a por recolher o email inserido e armazena o na vari vel email sendo a seguir seleccionados a partir da tabela que contem os dados dos utilizadores utilizadores os campos password e email que correspondem a esse email Esta selec o realizada atrav s da instru o SQL sgl SELECT password email FROM utilizadores WHERE email email Se for encontrada correspond ncia entre o email inserido no site com um dos emails registados na tabela de dados criado um array com os caracteres v lidos e o c digo ro transita para o ciclo for onde s o executadas 8 itera es de i 0 at i lt 8 em que 91 gerado aleatoriamente um caracter em cada itera o ao ser executado um random ao array criado Este random feito com recurso fun o mt
61. d passwordDescription innerHTML vector nivel document getElementBylId passwordStrength className strength nivel A fun o apresentada cont m um vari vel nivel inicializada a zero e que vai sendo incrementada medida que atravessa os testes efectuados caso falhe um teste n o incrementado o seu valor Quantos mais condi es if forem verdadeiras maior ser o 89 valor armazenado nesta vari vel de O a 5 No final do algoritmo o valor desta vari vel apontar para a posi o respectiva do vector vector Para que a password seja aceite durante o processo de registo do utilizador o seu n vel de seguran a ter de ser considerado pelo menos como m dio ou seja verificar pelo menos 3 destas condi es a que corresponde a posi o 3 do vector vector 3 M dia 90 Anexo C Algoritmo gerar aleatoriamente nova password Neste anexo apresentado o algoritmo respons vel pela gera o de forma aleat ria de uma nova password Este executado sempre que solicitado uma nova password de acesso por parte de um dos utilizadores devido ao esquecimento da mesma lt php if POST enviar nova password email POST email Ssql SELECT password email FROM utilizadores WHERE email Semail q 1f S email email SCaracteresAceitos abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPORSTUVWXYZ0123456789 Smax strlen Cara
62. da todos os atributos e opera es de uma outra classe podendo sobrepor ou modificar algumas delas assim como adicionar mais atributos ou opera es pr prias Associa o Depend ncia Heran a Agrega o Composi o Figura 10 Diagrama de classes representa o gr fica dos diferentes tipos de rela es entre objectos 2 19 A agrega o um tipo especial de associa o na qual as duas classes participantes n o possuem um n vel igual por m fazem parte de um relacionamento todo parte onde o objecto definido como parte um atribu do do objecto definido como todo e onde o objecto parte criado apenas se o objecto todo ao qual est agregado tamb m for criado A composi o semelhan a da agrega o forma um relacionamento todo parte por m este relacionamento t o forte que as partes n o podem existir independentes ou seja apenas existem dentro do todo sendo destru das caso o todo tamb m o seja Multiplicidade As rela es s o caracterizadas por possu rem uma multiplicidade que assinala o n mero de objectos que participam numa determinada rela o A multiplicidade pode assumir diferentes formas Na Figura 11 s o apresentadas as formas mais comuns de multiplicidade e a simbologia associada a cada uma delas Multiplicidade 0 Zero ou um 1 1 Um para um n Um para muitos Zero ou muitos Umax 1 20 entre um in
63. damente o peso e o tempo que este demora a deslocar se dos O km h at aos 100 km h Desta forma os utilizadores podem obter a pot ncia estimada do seu ve culo necessitando apenas de introduzir estes dois dados que podem ser facilmente encontrados no separador Marcas j referenciado anteriormente modelos Para este c lculo o algoritmo utiliza a equa o 1 que a seguir se apresenta Esta equa o foi retirada da Internet em espec fico do blogue Freio a Tambor onde explicado passo a passo como chegar at esta equa o 18 1 Peso 769 44 Tempo dos 0 100km h Pot ncia estimada 1 34 1073 Ferramentas Ferramenta pretendida Calcular consumo combustivel xl Quantidade de combustivel gasto em litros 15 Dist ncia percorrida em kil metros 250 O consumo de combustivel do seu veiculo foi de 6 0 1100km Ferramentas Ferramenta pretendida Calcular pot ncia do motor Tempo dos 0 100km h em segundos 14 7 Peso do veiculo em kilogramas 1390 A pot ncia estimada do seu veiculo de 97 cavalos Figura 78 Separador Ferramentas ferramenta calcular pot ncia do motor 78 A ferramenta calcular custo monet rio de viagem apresentada na Figura 79 permite que os utilizadores possam calcular antecipadamente o valor monet rio gasto em combust vel associado a uma viagem constitui se como uma mais valia para aqueles utilizadores com maiores preocupa es sobre quanto
64. de de utiliza o e constru o de p ginas Tamb m a utiliza o do phpMyAdmin se mostrou uma mais valia para o projecto visto providenciar um conjunto diversificado de servi os de acesso base de dados tais como defini o manipula o e consulta de dados Apesar de se entender que este projecto foi bem sucedido n o se pode deixar de referir que nem tudo o que estava projectado foi implementado ficando apenas a faltar disponibilizar o website desenvolvido atrav s da Internet coloc lo online n o por incapacidade de implementa o mas por uma quest o de tempo e custo monet rio Desta forma o custo de implementa o do site ficou se apenas pela aquisi o dos softwares Macromedia Dreamweaver e phpMyAdmin Este configura se como um ponto a ser adicionado como trabalho futuro Uma maneira de sustentar os custos de alojamento e manuten o deste potencial melhoramento seria adicionar patroc nios e publicidade ao site preservando sempre o seu bom funcionamento sem incomodar os utilizadores Para al m desta sugest o como proposta de melhorias futuras ao sistema destacam se e disponibiliza o do site em diferentes linguagens multilingue e melhoria da interface gr fica valorizando mais o trabalho art stico e criativo e compatibiliza o com todos os tipos de navegadores browsers e inclus o de novos m dulos ou novas tarefas suportadas pelo sistema conforme se entenda necess rio 82 Refer nc
65. dish ci 2 5 KB a J ford dados dimensoes Beek x 1 MyISAM Istinf swedish ci 2 8 KB j dados dimensoss HI rd ado mota ford dados motor ES tk X 1 MyISAM Istinf swedish ci 2 9 RE J performance a ee ee cae ford dados performance Ee amp k amp X 16 MyISAM Iatinf swedish ci 2 7 KB at o eq E formulas classifica o individual ford geral Eg Be mx 26 MyISAM Iatinf swedish ci 2 8 KB Toru 2 H ay formula1_classificacao_equipas ES Ex x 11 MyISAM Istinf swedish ci 2 2 KB z E E noticias comentarios formulat classificacao individual E SB E de W X 33 MyISAM latin swedish ci 2 6 EB Pace sados amensoes g forum Eg mt kh mx 17 MyISAM latinf swedish ci 1 6 KB aep fotos ageewk mx 54 MyISAM latinf swedish ci 5 2 KB E peugeot geral noticias E D x 4 MyISAM Istin swedish oi 2 5 KB E questionario x y a H ee ene noticias comentarios EENEN x MyISAM Istinf swedish ci 2 2 KB ae peugeot dados chassi ESET x 20 MylISAM Istinf swedish ci 3 8 RE 4 e dates a peugeot_dados_dimensoes ESERE x 20 MyISAM Istinf swedish ci 2 0 KB _ peugeot dados motor ES Bk He x 20 MyISAM istinf swedish ci 3 1 KB E o peugeot dados performance ES ek m x 20 MyISAM latin1_swedish_ci 2 8 KB E set geral 1 peugeot geral ES ek we x 20 MyISAM Iatinf swedish ci 2 9 KB E visor questionario ES E rEx 4 MyISAM latin swedish ci 2 9 EE questionario_classificacao fg ek x 25 MyISAM latin1_swedish_ci 2 0 KB re
66. e adicionar novas fotos v deos e not cias 3 3 DIAGRAMA DE USE CASES O diagrama de Use Cases em portugu s diagrama de casos de uso tem por objectivo descrever as funcionalidades do sistema do ponto de vista dos seus utilizadores e identificar os diferentes actores que interagem com o mesmo Tal como j foi referido no cap tulo anterior nomeadamente na subsec o 2 3 1 o diagrama de Use Cases representado por actores use cases e relacionamentos entre estes elementos Os actores correspondem aos utilizadores do sistema e podem ser utilizadores humanos ou um outro sistema No caso do site desenvolvido neste projecto este composto por tr s actores visitante utilizador registado e administrador Ap s serem identificados os actores do sistema podem ent o ser identificados os use cases isto as funcionalidades que cada um destes actores encontra sua disposi o As funcionalidades associadas ao sistema desenvolvido neste projecto encontram se representadas na Tabela 3 34 Tabela 3 Use Cases funcionalidades do sistema elaborado Pesquisar e consultar informa o e efectuar coment rios s not cias Gerir a p gina conte dos e as contas dos utilizadores Aceder ao f rum e question rio online Acess vel a todos os visitantes que o desejem fazer Restringir a utiliza o do site por parte de alguns utilizadores Sistema de Gest o da P gina A E Administrador FN
67. e ser executada a implementa o e o design das interfaces Esta an lise permitiu verificar quais as necessidades e objectivos que se pretendiam atingir e identificar os principais intervenientes do sistema isto os diferentes tipos de utilizadores administrador visitante utilizador registado atrav s do diagrama de use cases Os restantes diagramas UML elaborados diagramas de classes e de entidade rela o proporcionaram uma melhor compreens o do modelo relacional da base de dados durante a etapa de desenho e estrutura o da mesma Aquando do desenvolvimento das v rias p ginas Web que fazem parte do s tio depressa se constatou que a linguagem HTML n o era suficiente para atender a todos os requisitos do sistema tendo sido utilizado c digo em PHP para execu o de scripts que permitem interagir com as diferentes funcionalidades do website nomeadamente para tratamento da informa o e acesso base de dados criada Para a defini o do design das p ginas e inclus o de efeitos visuais foi ainda utilizada Javascript 81 Ap s a conclus o deste trabalho ficou evidente que com todas as ferramentas e softwares existentes no mercado para auxiliar o processo de planeamento desenvolvimento e disponibiliza o na Internet de um site este uma tarefa cada vez mais simplificada O que mais contribuiu para simplificar a implementa o do site foi o software Macromedia Dreamweaver pela sua r pida aprendizagem e facilida
68. e uma foto na tabela respectiva da base de dados o algoritmo desenvolvido para este efeito atribui de forma aleat ria um nome para a imagem de forma a evitar surgirem imagens sobrepostas caso fossem definidas duas imagens com o mesmo nome Este nome armazenado no campo fotos da respectiva tabela de dados como mostra a Figura 70 Perfil de utilizador ad Nome Administrador CAUsersiCristiano Alve Procurar Ford x Ford Fiesta Mk7 Interior Adicionar idade 23 anos Pais Portugal Ea Purto P gina 1 2 Viatura BMW 1206 5 PN Painel de Controlo Queston rio Online F rum Editar Perfil Alterar Password T Jetta x Jetta b NOTICIAS E m gt TESTES E AVALIA ES Figura 69 Sub separador Fotos adicionar uma nova foto id_fotos fotos pagina descricao categoria A AX 55 95477293f58ff5a170a584f1b4d65746 jpg 2 Ford Fiesta Mk7 Interior ford Figura 70 Inser o na base de dados dos dados relativos foto adicionada 73 O sub separador Videos apresenta um funcionamento semelhante ao sub separador Fotos e engloba alguns v deos relativos s marcas de autom veis Tal como no sub separador anterior o administrador respons vel pela gest o dos v deos no entanto ao introduzir um novo v deo p gina este em vez de ser descarregado directamente a partir do seu computador descarregado a partir de uma liga o ao Youtube atrav s do id atribu do ao v deo pelo Youtube Na Figura
69. ecsteustensdtsdeseds Fada 4 3 1 Painel de controlo ss sussce rantostesueaserantesrasn nda e assento desse Cah canoes gta beussatecehe dee SEE EE o ma dan TIO 4 3 2 Editar perfil e alterar password isisisi eikin stseen dita ob iso des dpaa aei e 4 3 3 F rum e Question rio online cteeeeeereeeeeeenaaaanerereererereeeeaeanaaaaanereeeeeaaaanaaaaaaaaaaas 4 4 BARRA DE MENU CENTRAL qua scvces pereeo ea bedreet R aE n pa ENOR Era REES pE NTN EN pe OR EEEREN ERNAS nai pie 4 4 1 Separadores Marcas e Sites teis cccscccscccsscssscsscecssecesseescecesecesaeesceceeseseseseesseeseeeensaes 4 4 2 Separadores Carp dia e Novidades Inova es cccssesssccrsecesesessecneecesecesceeseeceseensees 4 4 3 Separador Galeria Sepsi Meiega a a a Moedhe SS ao den i eee S 4 4 4 Separador Contactos senetan Seth ovas ai aeiae aiae aaka i Ea iai kahese kas raaes ieie 4 4 5 Separador Ferramentas sccseccseccesssesccssccesecesecescecesecssceesaecssecesaeeseeceeceseceaeeeesneesesees 5 CONCLUS ES conii nanna na ES iaa iaia iaiia REFER NCIAS DOCUMENTAIS sseesssessssssesseeceecerereessessssssssseesseceereeessrossssesssesesseeeorerossrsssssssseseseserere ANEXO A ALGORITMO COLUNA DA DIREITA sscsssssssssssssnssssssssssssssssssessssanscsssssassanscsassensessscssses ANEXO B ALGORITMO AN LISE DE PASS WORDS E VERIFICA O DO N VEL DE SEGURANCA Susa Susana AAA ANEXO C ALGORITMO GERAR ALEATORIAMENTE NOV
70. eis contactos e pesquisar cada um dos diferentes modelos de autom vel que constam na base de dados criada atrav s da barra de pesquisa 32 e apenas os utilizadores registados podem aceder ao f rum e qualquer utilizador pode visualizar comentar as not cias e aceder galeria de imagens e fotos e ap s efectuar o login os utilizadores registados podem responder ao question rio e o administrador respons vel por toda a gest o do site registo dos utilizadores f rum not cias galeria e question rio e pela cria o e gest o das contas nas redes sociais Para satisfazer alguns destes requisitos torna se necess rio efectuar o armazenamento dos dados nomeadamente dos dados pessoais de acesso dos utilizadores de forma a ser poss vel aceder a estes para consulta e ou escrita de novos dados e consequente controlo de acesso a algumas das funcionalidades do site O site pode ser acedido por tr s tipos de utilizadores visitante utilizador registado e administrador Por visitante ou utilizador normal entende se todo o utilizador que navega pelo site sem ter ainda efectuado o registo no mesmo Ap s ter efectuado o registo no site passa a ser considerado como utilizador registado O administrador aquele que tem a responsabilidade de planear organizar alocar os recursos e controlar todos os servi os da plataforma web De forma a esclarecer o papel de cada um destes tipos de utilizadores no site ser o a
71. ela o cujo objectivo auxiliar os desenvolvedores de softwares a definir as caracter sticas dos softwares bem como os seus requisitos estrutura l gica e at os equipamentos sobre os quais o sistema dever ser implementado antes de se iniciar o desenvolvimento do software A UML possui catorze tipos de diagramas divididos em duas grandes categorias estruturais e comportamentais Sete destes diagramas representam informa es estruturais e os outros sete informa es gerais de comportamento Na Figura 5 podem ser visualizados de forma hier rquica os diferentes diagramas UML existentes O objectivo de ser disponibilizado um n mero relativamente elevado de diagramas fornecer m ltiplas vis es do sistema a ser modelado possibilitando a an lise e modela o sob diferentes aspectos procurando atingir uma modela o o mais completa poss vel cada diagrama complementa os outros diminuindo a possibilidade da ocorr ncia de erros durante o desenvolvimento do software Embora cada diagrama tenha a sua utilidade nem sempre necess rio modelar um sistema utilizando todos estes diagramas uma vez que alguns deles Diagramas UML possuem fun es muito espec ficas Diagramas Comportamentais Diagrama de objectos Diagrama Figura 5 Hierarquia dos diagramas UML existentes 15 Nas subsec es seguintes 2 3 1 e 2 3 2 ser o descritos de uma forma breve destacando os seus objectivo
72. em ser visualizados As principais vantagens da utiliza o desta linguagem s o a facilidade em associar as informa es atrav s de links permitindo a forma o de grandes redes de informa o o mecanismo de navega o simplificado e uniforme e a facilidade com que esta pode ser percebida mesmo por utilizador n o especializados 2 2 DESENVOLVIMENTO DE WEBSITE Nos primeiros websites desenvolvidos era dada pouca import ncia an lise dos seus requisitos o que originava que as interfaces criadas n o atendessem s necessidades dos seus utilizadores Esta falha do processo de desenvolvimento foi mais tarde parcialmente colmata com a introdu o de t cnicas centradas no utilizador denominadas por User Centered Design abreviadamente UCD o que permitiu a inclus o dos requisitos dos utilizadores durante o projecto do site Contudo esta mudan a de atitude era ainda insuficiente para a obten o de websites com qualidade uma vez que o seu design era ainda elaborado de forma muito informal Presentemente os projectistas socorrem se de ferramentas para edi o de p ginas e ou para identifica o dos requisitos no entanto estas n o fornecem suporte a muitas fases do ciclo de concep o de um website Embora a pr tica informal seja aceit vel para projectos de 10 pequena dimens o projectos do tipo do your own web page esta torna se critica para sites de maior complexidade e ou dimens o Embora n o haj
73. em servi os de consultoria forma o entre outros O seu conte do visa essencialmente esclarecer o dom nio dos servi os prestados por essa institui o e dar a conhecer os mesmos aos visitantes 2 3 DIAGRAMAS UML E MODELO RELACIONAL DE BASES DE DADOS Entre o final da d cada de 80 e in cios da d cada de 90 sensivelmente entre os anos 1989 e 1994 a quantidade de m todos orientados a objectos existentes aumentou consideravelmente o que ocasionou que os seus utilizadores tivessem dificuldades em encontrar uma linguagem de modela o capaz de atender s suas necessidades 16 Tal tornou necess rio o aparecimento de uma linguagem unificada em que os desenvolvedores de softwares pudessem falar numa linguagem comum 12 Com o intuito de encontrar uma solu o para os problemas decorrentes no desenvolvimento de softwares os autores Grady Booch Ivar Jacobson e James Rumbaugh uniram se e unificaram os seus m todos criando a Unified Modeling Language UML 9 A UML uma linguagem gr fica destinada especifica o constru o visualiza o e 14 documenta o de sistemas computacionais atrav s do paradigma de Orienta o a Objectos Esta linguagem tornou se nos ltimos anos a linguagem padr o para modela o de softwares tendo sido adoptada internacionalmente pela ind stria de Engenharia de Software 20 De referir que a UML n o uma linguagem de programa o mas sim uma linguagem de mod
74. ervidor em que o site se encontra alojado utiliza se a fun o mysql_connect Esta possui como argumentos o nome do servidor Local serve o nome do utilizador que pretende aceder ao mesmo usuario serve e a respectiva password de acesso senha serve Se n o for poss vel ligar com o servidor retornada uma mensagem de aviso O servidor n o responde Ap s efectuada a liga o com o servidor pode ser realizada a liga o com a base de dados Para tal utilizada a fun o mysgl select db que selecciona atrav s da liga o ao servidor efectuada anteriormente Ligacao servidor a base de dados que se encontra no primeiro argumento da fun o banco de dados Tamb m aqui apresentada em caso de falha da liga o uma mensagem de aviso com o conte do N o foi poss vel conectar se base de dados 44 lt php Slocel_serve localhost 11 localtza o do servidor Gusuario serve root 1 Dome do utilizador fsenha serve eeeesesens senta gbanco de dados site nome do banco de dados 4 liga o com o servidor ligacao_servidor mysql connecr glocal serve Gusuario serve fsenha serve or die O servidor n o responde comectar se ao banco de dados ligacao_base Qmysql select db fbanco de dados ligacao servidor or die N o foi poss vel conectar se 2 bese de dados Figura 27 C digo em PHP para liga o com o servidor e com a base de dados 45 46 4 P
75. gem vinda do site AutoInfo Um visitante enviou esta mensagem pelo site Nome Adao Cunha Email adaocunha hotmail com Assunto Sugest o Mensagem Ola Gostava de deixar uma sugest o para o site Poderiam adicionar mais marcas para consulta Cumprimentos Ad o Cunha Figura 74 Envio de e mail com sugest es e ou reclama es para o administrador do s tio 4 4 5 SEPARADOR FERRAMENTAS Na barra de menu central pode ser encontrado um separador com um formul rio que permite alternar entre diversas funcionalidades nomeadamente convers o quilowatt cavalo vapor kw cv e vice versa convers o milha por hora quil metro por hora mph km h e vice versa e c lculo do consumo de combust vel da pot ncia do motor ou do custo monet rio de uma viagem como se apresenta na Figura 75 A ferramenta convers o kw cv cv kw permite aos utilizadores converter um valor em quilowatts para o correspondente valor em cavalo vapor e vice versa conforme apresentado na Figura 75 Esta ltima unidade n o reconhecida no Sistema Internacional de Unidades SI contudo frequentemente utilizada pelos condutores e pelos pr prios fabricantes de autom veis para se referirem pot ncia dos seus ve culos Ferramentas Ferramenta pretendida Ws Convers o kw cv cv kw w Convers o kw cy cv kw Convers o mph km h km h mph Nome Administrador Calcular consumo combust vel Idade 23 anos Calcular pot ncia do motor Pais P
76. gical architecture according to the models described in the Class Diagram and Entity Relationship Diagram The requirements identified were analysed and used in the interfaces composition and navigation system Finally in the interface design phase it were enhanced the interfaces developed based on the artistic and creative concept This enhancement fits the personal taste of its creator that aims to develop an interface which also appeals to as many users as possible This can be seen in the way how are links distributed between pages titles headings colors and animations and its overall design For the development of the website were used different programming languages including HyperText Markup Language HTML Page Hypertext Preprocessor PHP and JavaScript HTML was used for the disposal of all visible content of the pages and to define its layout and PHP was used to run small scripts that allow to interact with the different functions of the site The JavaScript language was used to define the pages design and add some visual For the website pages construction was used the Macromedia Dreamweaver software which simplified the implementation due to the facility in which can be constructed For the interaction with the management system database MySQL it was utilized the phpMyAdmin application which simplifies access to the database allowing to define manipulate and query their data Keywords Information Systems Internet Web
77. grama de Classes e no Diagrama de Entidade Rela o Os requisitos identificados foram analisados e usados na composi o das interfaces e sistema de navega o Por fim na fase de desenho das interfaces foram aperfei oadas as interfaces desenvolvidas com base no conceito art stico e criativo do autor Este aperfei oamento vai de encontro ao gosto pessoal e tem como objectivo elaborar uma interface que possa tamb m agradar ao maior n mero poss vel de utilizadores Este pode ser observado na maneira como se encontram distribu das as liga es links entre p ginas nos t tulos nos cabe alhos nas cores e anima es e no seu design em geral Para o desenvolvimento do website foram utilizadas diferentes linguagens de programa o nomeadamente a HyperText Markup Language HTML a Page Hypertext Preprocessor PHP e Javascript A HTML foi utilizada para a disposi o de todo o conte do vis vel das iii p ginas e para defini o do layout das mesmas e a PHP para executar pequenos scripts que permitem interagir com as diferentes funcionalidades do site A linguagem Javascript foi usada para definir o design das p ginas e incluir alguns efeitos visuais nas mesmas Para a constru o das p ginas que comp em o website foi utilizado o software Macromedia Dreamweaver o que simplificou a sua implementa o pela facilidade com que estas podem ser constru das Para interac o com o sistema de gest o da base de dados o MyS
78. guagens de programa o usadas para desenvolvimento de aplica es Web o estudo do software Macromedia Dreamweaver e da aplica o phpMyAdmin o planeamento e selec o das ferramentas necess rias para o desenvolvimento do website o desenvolvimento das diferentes p ginas Web que comp em o website 1 2 CALENDARIZACAO Sendo o desenvolvimento de uma plataforma Web a principal motiva o deste trabalho a sua prossecu o conduziu calendariza o apresentada na Tabela 1 Esta inclui um conjunto de tarefas como por exemplo estudo das Tecnologias de Informa o estudo dos diagramas UML e do modelo relacional de bases de dados modela o e implementa o da plataforma Web e elabora o do relat rio ordenadas de forma a ser seguida uma l gica sequencial 1 3 ORGANIZA O DO RELAT RIO Este relat rio encontra se dividido em cinco cap tulos Neste primeiro cap tulo efectua se uma primeira abordagem ao projecto e suas especifica es No cap tulo 2 encontra se o estado da arte que resulta de uma pesquisa sobre os conceitos b sicos associados Internet e cria o de plataformas Web Para uma melhor compreens o do ambiente Web apresentado o modo como este funciona em que consiste diferentes tecnologias que podem ser utilizadas para construir interfaces neste ambiente ainda efectuado um estudo acerca do funcionamento dos Diagramas UML e do Modelo Relacional de Bases de Dados de forma a propor
79. gura 70 Figura 71 Figura 72 Figura 73 Figura 74 Figura 75 Figura 76 Figura 77 Figura 78 Figura 79 Sub separador Fotos adicionar uma nova foto era 13 Inser o na base de dados dos dados relativos foto adicionada 13 Sub separador V deos adicionar um novo v deo 74 Sub separador Videos aplica o da SHAdOWDOX scceseeescceesecenneeseneeeseceneeseaeeesaeees 74 Separador Contactos formul rio de contacto er 15 Envio de e mail com sugest es e ou reclama es para o administrador do s tio 76 Separador Ferramentas selec o da ferramenta pretendida ee eee esse ereere 76 Separador Ferramentas ferramenta convers o mph km h km h mph 77 Separador Ferramentas ferramenta calcular consumo combust vel 78 Separador Ferramentas ferramenta calcular pot ncia do motor 78 Separador Ferramentas ferramenta calcular custo monet rio de viagem 79 xi xii Indice de Tabelas Tabela Tabela 2 Tabela 3 Calendariza o do projecto Diagramas Entidade Rela o tipos de atributos Use Cases funcionalidades do sistema elaborado xiii Acronimos ADO AJAX ASP CSS DER GPL HTML HTTP IEEE IMAP JSP MDS NNTP PHP POP3 SI SMTP ActiveX Data Objects Asynchronous Javascript and XML Active Server Pages Cascading Sty
80. i apresenta Sport quattro co 782 Artigos Relacionados zz Actualiza o 2 09 2013 Cos Fornecido por Mais Gasolina Anterior Seguinte Google Web Elements Figura 37 Pagina principal conte do central H novas regras de seguran a na F rmula 1 H novas regras de seguran a na F rmula 1 A Federa o Internacional de Automobilismo FIA adoptou novas medidas para aumentar os n veis de seguran a na zona das boxes As altera es surgiram para evitar a repeti o do incidente do Red Bull de Mark Webber em N rburgring onde um pneu se soltou e atingiu um operador de c mera Paul Allen que estava a filmar a sa da do Lotus de Romain Grosjean n o se apercebeu do problema no Red Bull do australiano Allen facturou a clavicula duas costelas e teve uma concuss o cerebral Agora com as novas medidas s fiscais e membros das equipas poder o permanecer na zona em causa durante a qualifica o e a corrida os membros da ll Cristiano Alves imprensa ficar o no muro do outro lado Todos os ah ah mec nicos s o obrigados a usar capacete e s sair quando o carro estiver mesmo a chegar e devem sair mal o trabalho esteja completo A velocidade dos carros nas boxes foi reduzida de 100 para 80 quil metros por hora exceptuando nos Grandes Pr mios de Austr lia M naco e Singapura onde j havia e continua a haver um limite de 60 quil metros por hora Todas as medidas ser o aplicadas j a partir da pr xi
81. ias Documentais 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Adobe Systems Download and Installation Help California Estados Unidos da Am rica Agosto de 2013 http helpx adobe com download install html ALVES Cristiano ROCHA Daniel SILVA Jos SILVA Marco GESTAO DESPORTIVA Trabalho realizado no mbito da cadeira de Modela o e Simula o Industrial do Mestrado em Engenharia Electrot cnica e de Computadores do Instituto Superior de Engenharia do Instituto Polit cnico do Porto em 2012 Aquidaban Tabela Geral de Convers o de Unidades Aquidaban Shipping Trading Logistic amp Cargo S o Paulo Brasil 2006 http www aquidaban com br informacoes Autoevolution Automotive news amp test drives Bucareste Rom nia Agosto de 2013 http www autoevolution com ACP Autom vel Clube de Portugal Portugal Agosto de 2013 http www acp pt BAPTISTELLA Francisca BARCELLINI Gian Franco Desenvolvimento de Websites Centro de Computa o da Unicamp S o Paulo Brasil 2000 BENEDETTI Ryan CRANLEY Ronan Head First jQuery OReilly Media 2011 ISBN 978 1 4493 9321 2 BERNERS LEE T et al The World Wide Web Communication of the ACM Association for Computing Machinery Nova Iorque v 37 n 8 p 76 82 1994 BOOCH Grady JACOBSON Ivar RUMBAUGH James UML Guia do Usu rio Tradu o da 2 edi o Editora Campus Rio
82. idos em tr s partes a primeira designa o nome da classe a segunda os seus atributos e a terceira as opera es da mesma Figura 9 18 Nome da classe Atributos Opera es Figura 9 Diagrama de classes representa o gen rica de uma Classe 2 Rela o Uma rela o assim como o nome indica representa uma rela o entre diferentes objectos Estas s o representadas nos diagramas de classes por um tra o e normalmente caracterizadas por um nome e se necess rio pelo papel que os objectos apresentam nessas rela es As rela es poss veis entre os objectos incluem associa o depend ncia heran a agrega o e composi o Na Figura 10 apresenta se a representa o gr fica de cada um destes tipos de rela es A associa o o mecanismo que permite que os objectos comuniquem entre si descrevendo a conex o entre diferentes classes Estas podem ter uma regra que especifica o seu prop sito e ser uni ou bidireccional indicando se apenas um deles pode enviar mensagens para o outro ou se os dois objectos participantes do relacionamento podem enviar mensagens entre si respectivamente A depend ncia trata se de uma rela o na qual uma mudan a na especifica o de um elemento pode alterar a especifica o do elemento dependente A depend ncia entre classes indica que os objectos de uma classe utilizam servi os dos objectos de outra classe Uma rela o de heran a verifica se quando uma classe her
83. implementa o e estrutura o das tabelas que comp em a base de dados que ser utilizada para armazenar os dados que ser o apresentados no site e ou inseridos a partir do mesmo A base de dados foi criada directamente no servidor de alojamento atrav s da aplica o phpMyAdmin Esta aplica o permite criar e remover bases de dados criar remover e alterar tabelas inserir remover e editar campos e definir as chaves prim rias sem necessidade de inserir c digos SQL Structured Query Language sendo apenas necess rio especificar os nomes das tabelas e dos campos assim como definir os seus tipos de dados tamanhos e chaves prim rias O phpMyAdmin gera o c digo SQL e cria automaticamente as tabelas e ou os campos que o utilizador especificou 39 phpMyAdmin g Servidor localhost Basede Dados SQL Estado Vari veis Mapas de Caracteres Engines s Privil gios AS ele 5 Processos uExportar Eilmport Actions MySQL cdcol 1 information schema 28 mysql 23 Alterar a palavra passe EB servidor localhost via TCP IP phpmyadmin 8 Sair 89 Vers o do servidor 5 1 41 gt Protocol version 10 MySQL localhost gt Utilizador root localhost Por favor seleccione uma base a de dados Criar nova base de dados 2 Mapa de Caracteres do mySQL UTF 8 Unicode utf8 site Collation Criar 2 MySQL connection col
84. ina Oficial Citro n Portugal ITROEN inss P gina Oficial Citro n Portugal no Twitter O separador Sites teis apresenta o mesmo conte do do item sites teis do separador Marcas como demonstra a Figura 61 Contudo este re ne numa nica p gina todas as listas inclu das no s tio de todas as marcas divididas por abas tags que permitem alternar entre elas Adicionalmente incluiu se uma aba com sites mais gerais com conte do de interesse para os mais entusiastas do mundo autom vel conforme exposto na Figura 62 semelhan a de algumas das funcionalidades do s tio j apresentadas anteriormente estas tags foram tamb m implementadas em jQuery 25 Geral Gtro n Ford Peugeot Renault Seat Redes Sociais Outros sites ETA TT A isine Orca Citro n Portugal ro Facebook AA CITRO N Twitter P ginas Oficis Citro n Portugal no Twitter Youli Cana Otro n Portugal no YouTube Mini site Citro n DS3 Google P gina Oficial Citro n Portugal ro Google Figura 61 Separador Sites teis aba Citro n rum Sites teis Co i F rum Autohoje O f rum Autohoje Online um dos f runs mais visitado s nivel nacional o que torma possivel Este site possui um reposit rio com as especifica es t cnicas ds maioria dos autom veis existentes bem como ums apresenta o hist rica de cada um dos fabricantes a estes associados Nele sinda poss vel mu encontram alguns test drives efect
85. l 2007 SCAPIN Dominique et al Transferring Knowledge of User Interfaces Guidelines to the Web Annual Meeting of the Special Interest Group Springer London p ginas 293 304 2001 ISBN 978 1 85233 355 3 Shadowbox Shadowbox Download page Agosto de 2013 http www shadowbox js com download html SIQUEIRA Bruno Rodrigues Apostila de PHP Outubro de 2013 http www etelg com br paginaete downloads informatica apostila_php pdf Tuning Online O portal do tuning e autom vel Portugal Agosto de 2013 http www tuning online pt VIEIRA Jo o Programa o Web com Active Server Pages 1 edi o Edi es Centro Atl ntico Portugal Janeiro de 2000 ISBN 972 8426 21 6 ZAFIRIS A P GEORGANTIS P N A Practitioner s Approach to Evolving and Remodeling Large Scale WWW Sites IEEE 34 Hawai International Conference on System Sciences Maui Hawai 3 6 de Janeiro 2001 W Techs Usage of JavaScript libraries for websites Q Success Web based Services Agosto de 2013 http w3techs com technologies overview javascript_library all0 85 86 Anexo A Algoritmo coluna da direita Neste anexo apresentado o extracto de c digo referente coluna da direita isto apresenta o das classifica es individual e por equipas do campeonato de F rmula 1 poca 2012 2013 lt php Stipo classificacao GET tipo classificacao toi pelas cattaicaca o RUN Senpomeitas
86. las da base de dados criada uma vez que esta possui 35 tabelas e que levariam a que o diagrama a apresentar se tornasse muito extenso Assim no que diz respeito s tabelas referentes s marcas de autom veis foram inclu das apenas as tabelas de apenas uma das marcas neste caso da Citro n Para as restantes marcas as tabelas apresentam o mesmo funcionamento mudando apenas o nome das classes 3 5 DIAGRAMA ENTIDADE RELACAO Ap s constru do o diagrama de classes pode ent o ser elaborado o diagrama entidade rela o DER com vista a auxiliar o processo de concep o da base de dados Os DER semelhan a dos diagramas de classes s o tamb m constitu dos pelos elementos classes atributos e rela es No entanto os DER s o baseados numa t cnica de representa o gr fica que auxilia a visualiza o das rela es entre as diferentes entidades de uma base de dados 37 noticias_comentarios N 1 id notica s titulo noticia noticia nivel privilegio imagem noticia nome utilizador id questionario numero questao resposta correcta id user numero mensagem citroen dados chassi id versao tipo traccao caixa travoes frente travoes tras tamanho pneus tipo combustivel numero portas inicio producao bt citroen dados motor citroen dados performance id versao id versao cilindrada velocidade maxima potencia aceleracao distancia eixos peso capacidade combustivel
87. lation utf8_general_ci o Web server gt Apache 2 2 14 Win32 DAVIZ mod ssl 2 2 14 OpenSSL 0 9 81 Interface E mod autoindex color PHP 5 3 1 S Language Portugu s Portuguese mod apreg2 20090110 2 7 1 mod perii2 0 4 Perliv5 10 1 Theme style Original E gt MySQL client version 5 1 41 gt Custom color 48 Limpa gt PHP extension mysqli gt Font size 82 x j phpMyAdmin gt Version information 3 2 4 O Documenta o Q wiki P gina Oficial do phpMyAdmin gt ChangeLog Subversion Lists phpMyAdmin Open new phpMyAdmin window Figura 20 Janela principal da aplica o phpMyAdmin Esta aplica o pode ser descarregada gratuitamente da Internet atrav s do site da phpMyAdmin 33 Ap s a instala o da aplica o e ao executar a mesma iniciada uma janela igual apresentada na Figura 20 Na janela principal do phpMyAdmin poss vel seleccionar qual a base de dados que se pretende aceder atrav s do menu lateral apresentado esquerda do leitor ou atrav s do separador Base de Dados localizado no menu central no topo da janela Uma vez que se trata do primeiro acesso aplica o s o apenas apresentadas as tabelas j inclu das no ficheiro de instala o da mesma neste caso cdcol information schema mysql e phpmyadmin Assim sendo foi criada uma nova base de dados qual foi atribu do o nome site conforme se pode const
88. le Sheets Diagrama Entidade Rela o File Transfer Protocol G s de Petr leo Liquefeito HyperText Markup Language HyperText Transfer Protocol Instituto de Engenheiros El ctricos e Electr nicos Internet Message Access Protocol Java Server Pages Message Digest algorithm 5 Network News Transfer Protocol Page Hypertext Preprocessor Post Office Protocol 3 Sistema Internacional de Unidades Simple Mail Transfer Protocol XV SNMP SQL SSI UCD UML URL WWW Simple Network Management Protocol Structured Query Language Server Side Include User Centered Design Unified Modeling Language Uniform Resource Locator World Wide Web xvi 1 INTRODU O Com a massifica o da utiliza o da Internet verificada a partir do in cio do s culo XX os sistemas de informa o das organiza es passaram a estar dispon veis cada vez mais em multiplataforma computador pessoal tablet smartphone etc e nos diversos sistemas operativos existentes como o Windows e o Linux O meio utilizado para aceder aos sistemas das organiza es a pr pria Internet e os servi os s o disponibilizados sob a forma de p ginas Web acess veis de qualquer parte do mundo Durante este processo evolutivo o n mero de utilizadores e de websites cresceram de forma exponencial tornando a Web acess vel a todas as pessoas e com uma grande variedade de aplica es N o obstante muitos dos sites presentes na
89. lho identificado pelas tags lt head gt e lt head gt cont m informa o relativa ao documento como por exemplo o seu t tulo texto apresentado na barra superior do navegador que identificado pelas tags lt title gt e lt title gt palavras chave que possam ser teis nos motores de busca e outros dados que n o s o considerados como parte do conte do do documento O corpo do documento identificado tags lt body gt e lt body gt e o local onde inclu do todo o conte do de um site habitualmente constitu do por texto imagens liga es entre outros elementos Para programar em HTML n o necess rio instalar software espec fico por m existem alguns softwares que facilitam o seu desenvolvimento atrav s do uso de v rias ferramentas combinadas o que permite que sejam desenvolvidos com maior facilidade p ginas Web Um destes softwares com maior utiliza o o Macromedia Dreamweaver da Adobe Systems 1 que como ser mostrado posteriormente no cap tulo 4 foi o software usado para a implementa o deste projecto E Sem t tulo Bloco de notas Ficheiro Editar Formatar Ver Ajuda lt html gt lt head gt lt title gt Titulo do documento lt title gt lt head gt lt body gt Texto imagens links etc lt body gt lt html gt Figura 13 Estrutura b sica de um documento HTML 2 24 24 2 CSS O CSS foi apresentado em Outubro de 1994 por Hakon Lie com
90. lo Question rio Online F rum Editar Perfil Bom hatch m dio traz Altersr Password c mbio melhorado e sede por lcool vor arros vor Carros t Hatch reformulado econ mico e est vel bom de cidade Jetta x Jetta Jetta x Jetta oe b NOTICIAS b NOTICIAS b NOTICIAS gt TESTES E AVALIA ES gt TESTES E AVALIA ES http icarros uoL com br http carros uvol com br http rcarros uol com br a Figura 35 a Coluna da esquerda para visitantes b Coluna da esquerda para utilizadores b o registados c Coluna da esquerda para o administrador F rmula 1 2012 2013 F rmula 1 2012 2013 Formola 4 Formola X CEN assi courras crassir inpivipuar ENTE Pos Pontos Bos 1 Sebastian Vettel 157 1 Red Bull Racing Renault 250 2 Femando Alonso 123 2 Mercedes 183 3 Kimi Raikkonen 116 3 Ferrari 180 4 Lewis Hamilton 99 4 Lotus Renault 157 5 Mark Webber 93 5 Force India Mercedes 59 6 Nico Rosberg 84 6 McLaren Mercedes 49 7 Felipe Massa 57 7 STR Ferrari 24 8 Romain Grosjean 41 8 Sauber Ferrari 7 9 Pauldi Resta 36 9 Williams Renault o 10 Jenson Button 33 10 Marussia Cosworth 0 11 Adrian Sutil 23 11 Caterham Renault 0 12 Sergio Perez 16 13 Jean Eric Vergne 13 b 14 Daniel Ricciardo 11 15 Nico Hulkenberg F 16 Pastor Maldonado 0 17 Valtteri Bottas 0 18 Esteban Gutierrez 0 19 Jules Bianchi 0 20 Charles Pic 0 21 Max Chilton 0 22 Giedo van der Garde 0 a
91. m regra geral uma liga o com outros servi os da Internet Estes documentos formam a arquitectura World Wide Web WWW ou simplesmente Web que tem facilitado a utiliza o em larga escala da Internet por todo o mundo uma vez que qualquer utilizador que possua um m nimo de conhecimento de inform tica pode aceder rede A Web foi criada na d cada de 90 pela Organiza o Europeia para a Pesquisa Nuclear conhecida como CERN antigo acr nimo para Conseil Europ en pour la Recherche Nucl aire como solu o para os problemas de interc mbio de informa o entre os seus pesquisadores 8 A partir da a tecnologia para constru o de interfaces Web foi progressivamente incrementada permitindo o desenvolvimento de aplica es cada vez mais complexas Entre estas interfaces Web destaca se o desenvolvimento de websites tamb m conhecidos por site ou em portugu s por s tio que engloba a engenharia de websites bases de dados metodologias e modelos t cnicas de uso de ferramentas gr ficas e ainda outros conte dos conforme necessidades espec ficas 34 Para o desenvolvimento de websites s o utilizadas linguagens e tecnologias modelos metodologias e t cnicas de uso de ferramentas gr ficas e de design Se o website for composto integralmente por interfaces est ticas de conte do permanente as necessidades do projecto centram se na selec o das linguagens para programa o e nas ferramentas de design adequadas Cas
92. m autom vel auxiliada por imagens ilustrativas Figura 63 Este pretende ser uma fonte de consulta de informa o acerca do funcionamento dos autom veis para os utilizadores com maior interesse por esta rea A jQuery uma biblioteca Javascript desenvolvida com o intuito de simplificar os scripts cliente side do lado do cliente que interagem com o utilizador sem a necessidade de passar pelo servidor 7 Esta linguagem a biblioteca Javascript mais utilizada no desenvolvimento de websites sendo actualmente utilizada por cerca de 55 dos dez mil sites com maior n mero de visitas 44 A utiliza o do accordion serve para estruturar conte do de uma p gina em t picos exibindo pain is de conte do recolh vel para apresenta o de informa o numa quantidade limitada de espa o Este bastante simples de utilizar e pode ser executado com um n mero reduzido de linhas de c digo onde s o definidos cabe alhos que permitem atrav s do seu clique expandir recolher o conte do associado a cada um deles como demonstra a Figura 63 e a Figura 64 O algoritmo desenvolvido para este separador encontra se exposto no Anexo D Seleccione no quadro abaixo apresentado qual o componente autom vel que deseja consultar Poter Um mat que converte sutras fos Figura 63 Separador Gloss rio cabe alho Motor 70 Figura 64 Separador Gloss rio cabe alho Transmiss o O separador No
93. ma o C Java e Perl podendo ser vista como uma combina o de linguagens de programa o e servidores de aplica es Tal como nas linguagens anteriores ASP e JSP os comandos s o processados pelo servidor antes de a p gina ser enviada para o navegador Uma das caracter sticas mais importantes desta tecnologia o suporte de um n mero elevado de sistemas de gest o de base de dados como o mSQL ou mini SQL mySQL PostgreSQL Oracle dBase Interbase Sybase entre outros 40 Para al m disso esta suporta ainda um grande n mero de outros servi os atrav s do uso de protocolos como o SNMP Simple Network Management Protocol POP3 Post Office Protocol IMAP Internet Message Access Protocol NNTP Network News Transfer Protocol e HTTP HyperText Transfer Protocol O PHP o l der de mercado de servidores Web gratuitos e est presente em cerca de 55 da World Wide Web 40 Este compat vel com v rias plataformas o que significa que este executado no seu formato original em diferentes vers es dos sistemas operativos UNIX e Windows O PHP est actualmente na vers o 5 chamada de PHP35 na sua vers o est vel 5 5 5 31 As v rias vers es do PHP foram sendo aclamadas e premiadas nos ltimos anos O PHP3 foi finalista em 1999 no LinuxWorld Editor s Choice Awards na categoria de bibliotecas ferramentas de programa o tendo alcan ado o segundo lugar sendo apenas ultrapassado pelo ColdFusion Tamb m a com
94. ma p gina ao servidor O servidor Web reconhece o pedido especial extens o jsp e envia o para o componente que o manipula recuperando dados de uma base de dados ou de outro tipo de reposit rio e envia a resposta de volta para o servidor Por fim o servidor envia a p gina j formatada de volta para o cliente que a pode visualizar no seu navegador Por ser baseada na linguagem Java a tecnologia JSP tem a vantagem da portabilidade de plataforma que permite a sua execu o em diversos sistemas operacionais como o Windows e o Linux 36 Esta tecnologia permite ao desenvolvedor Web produzir aplica es que acedam a bases de dados recolham informa es a partir de formul rios e manipulem arquivos no formato de texto ee a a o a Pedido Figura 16 Arquitectura das p ginas din micas JSP Java Server Pages 36 2 5 3 PHP O PHP apresenta se como uma alternativa gratuita e de c digo aberto open source ao ASP e JSP e constitui se como uma linguagem de scripts bastante utilizada no desenvolvimento de aplica es Web podendo ser incorporada dentro do c digo HTML Esta tecnologia surgiu em 1994 sob o nome de Personal Home Page como um projecto pessoal de Ramus Lerdof com o intuito de controlar os acessos sua p gina Web Actualmente esta linguagem conhecida por Page Hypertext Preprocessor e controlada pela Apache Software Foundation 31 28 A linguagem PHP baseia se nas linguagens de progra
95. ma prova na Hungria Boa noticia Figura 38 Pagina principal noticia aberta atrav s da shadowbox Por baixo das not cias principais encontram se dois scripts O primeiro onde s o apresentadas as not cias sobre o Desporto Autom vel a partir de uma API Application Programming Interface desenvolvida pela Google 19 em que s o disponibilizadas not cias de diversos sites actualizadas frequentemente por norma diariamente O segundo script abrange informa o referente ao pre o m dio dos principais tipos de combust vel autom vel em Portugal Continental e a varia o do seu pre o nomeadamente gasolina gas leo e GPL g s de petr leo liquefeito auto Esta informa o actualizada diariamente atrav s do site Mais Gasolina que cont m um direct rio interactivo de postos de abastecimento de Portugal com os pre os actualizados dos combust veis 26 56 4 2 P GINA DE REGISTO Uma das p ginas mais importante do s tio desenvolvido corresponde p gina de registo uma vez que atrav s desta que os utilizadores at aqui considerados como visitantes t m acesso a algumas das suas sec es Assim ap s efectuar o registo no s tio o utilizador considerado como um utilizador registado passando a ter acesso s p ginas de consulta e altera o dos dados de perfil f rum e question rio online ap s se autenticar no site A pagina de registo pode ser acedida atrav s da op o Efectuar regi
96. nault dados chassi ESEREX 22 MylSAM Istinf swedish ci 4 1 KB renault dados dimensoes EBEHREXx 22 MyISAM Istinf swedish ci 2 1 KB renault_dados_motor ES ElmTx 22 MyISAM Istinf swedish ci 3 2 KB renault dados performance e ome mx 22 MylSAM Istint swedish ci 2 9 EE renault geral ES Exma x 22 MyISAM Iatinf swedish ci 2 0 KB O seat dados chassi ES Bk we x 24 MyISAM lstini_swedish_ci 4 3 KB seat_dados_dimensoes EEDEN 24 MylISAM Istin1_swedish_ci 2 2 EB seat dados motor ES Ex i Xx 24 MyISAM latinf swedish ci 2 4 KB seat dados performance ES Bk MX 22 MyISAM latin swedish ci 2 9 EB seat geral ESET X 24 MyISAM latinl swedish ci 2 1 KB utilizadores ESR EKEN x 4 MyISAM lstini_swedish_ci 6 6 KE videos EBaetk x 15 MyISAM Istinf swedish ci 2 9 KB 35 tabela s Soma 751 MyISAM latinf swedishci 111 6 KB O Bytes Figura 26 phpMyAdmin tabelas da base de dados criada 3 6 2 INTERAC O COM A BASE DE DADOS A interac o com a base de dados engloba o seu acesso ou seja a consulta inser o ou at substitui o dos seus dados Este tipo de interac o realizado geralmente na linguagem de programa o PHP no c digo da p gina respectiva Na Figura 27 fornecido um exemplo de um c digo PHP identificado pelas tags lt php e gt que permite ligar com o servidor e com a base de dados necess rios para conseguir interagir com determinada base de dados Para efectuar a liga o com o s
97. nde poss vel observar os diferentes elementos descritos Atrav s desta poss vel ter uma ideia de como se relacionam as diferentes tabelas presentes na base de dados criada e do modo como s o geridos e relacionados os dados nelas contidos Na tabela utilizadores encontram se os dados referentes a cada um dos utilizadores registados no site Cada um destes utilizadores pode efectuar v rios coment rios nas not cias noticias comentarios e responder ao question rio questionario as vezes que pretender desta forma verifica se uma rela o de 1 para muitos 0 A tabela forum armazena os dados das mensagens escritas pelos utilizadores no f rum podendo cada um dos utilizadores escrever v rias mensagens o que corresponde a uma rela o de 1 para muitos As tabelas referentes aos coment rios das not cias e do question rio cont m um utilizador por coment rio e por question rio realizado logo uma rela o de muitos para 1 Nas tabelas referentes s marcas de autom veis Citro n Ford Peugeot Renault e Seat verificam se rela es de 1 para 1 uma vez que existe uma nica vers o de autom vel identificada pelo atributo id versao para cada um dos conjuntos de dados marca dados performance marca dados motor marca dados chassi e marca dados dimensoes Importa referir que n o foram inclu das no diagrama de classes apresentado na Figura 18 todas as tabe
98. ndo directivas de Server Side Include SSD A seguir ser o apresentadas as tecnologias para cria o de p ginas din micas ASP JSP e PHP Tal como nas linguagens de programa o client side tamb m aqui n o pretendido descrever exaustivamente todo o seu potencial mas uma breve descri o das mesmas 26 2 5 1 ASP A ASP criada pela Microsoft 27 trata se de uma tecnologia orientada a objectos utilizada para desenvolver aplica es interactivas na Web ou seja cujo conte do din mico vai sendo alterado atrav s da interac o com o utilizador Utilizada por mais de 2 milh es de sites em todo o mundo 42 esta n o na realidade uma linguagem mas sim uma estrutura de bibliotecas b sicas para processamento de linguagens de script por exemplo VBScript JScript PerlScript ou Python Estes scripts s o interpretados no lado do servidor e o que enviado para o lado do utilizador por exemplo para o navegador apenas a sa da que habitualmente corresponde a uma linguagem de marca o como o HTML o que permite que qualquer navegador existente no mercado seja capaz de aceder a um site que utilize esta tecnologia As p ginas ASP respeitam uma arquitectura de 3 n veis como apresentado na Figura 15 Esta arquitectura permite que um servidor n vel 2 possa servir de intermedi rio entre o navegador instalado no lado do cliente n vel 1 e uma base de dados n vel 3 pelo acesso transparente ao mesmo atrav
99. o cristiano sapo pt Bem vindo ao nosso site Os seus dados para que possa efecuar o login no nosso site s o apresentados a seguir Nome de utilizador Cristiano Alves Password 6J4JEZyr Pode aceder ao nosso site atrav s do link h tp localhost tese Os melhores cumprimentos Auto Info Figura 44 Envio da nova password para o email do utilizador 59 4 3 PERFIL DE UTILIZADOR Como j foi referido anteriormente ao efectuar a autentica o no s tio apresentado ao utilizador um separador com os dados de perfil referentes a esse utilizador Neste separador apelidado por perfil de utilizador pode se visualizar o nome idade pa s cidade e foto de perfil Este inclui ainda alguns links para acesso a determinados p ginas do s tio como o question rio online o f rum e as p ginas de edi o do perfil e de altera o da password Na Figura 45 apresentado um exemplo de um perfil de utilizador onde podem ser observadas todas estas funcionalidades Perfil de utilizador P Nome Cristiano Alves Idade 23 anos Pais Portugal Cidade Pa os de Ferreira Viatura Renault Clio Question rio Online F rum Editar Perfil Alterar Password Figura 45 Exemplo de um perfil de utilizador 4 3 1 PAINEL DE CONTROLO Apenas o administrador do s tio tem acesso ao painel de controlo a partir do seu perfil de utilizador Este acesso efectuado atrav s do link Painel de Controlo que o reencaminha para
100. o possua interfaces din micas aquelas em que o conte do gerado ap s uma consulta na base de dados e apenas mantido durante a perman ncia do utilizador na interface para al m da escolha das linguagens e das ferramentas de design ainda necess rio seleccionar a tecnologia respons vel por gerar as p ginas din micas e o sistema usado para a base de dados 16 37 43 Para melhor entender os temas relacionados com o desenvolvimento de um website que ser o apresentados nas subsec es seguintes necess rio entender como funciona a Web Desta forma ser apresentado na subsec o 2 1 1 a arquitectura cliente servidor na qual a Web se baseia 2 1 APLICA ES WEB Uma aplica o Web pode ser definida como um sistema inform tico que utiliza a Web como ambiente de execu o atrav s de um navegador 34 As aplica es Web envolvem frequentemente o desenvolvimento de websites cuja arquitectura encontra se representada na Figura 1 Nela poss vel observar que quando o servidor Web recebe uma solicita o pedido proveniente de um navegador localiza o recurso num sistema de arquivos local e envia o de volta para o cliente resposta Estes recursos podem ser documentos de texto imagens v deos e udio Internet Cliente Pedido N A una VE Servidor Sistema de Navegador A Web Y arquivos Resposta local E Figura 1 Arquitectura b sica de uma aplica o Web 34
101. oi utilizada a aplica o shadowbox j apresentada anteriormente Assim ao ser aberta ampliada uma imagem criada uma galeria de imagens correspondente p gina que esta se encontra podendo o utilizador retroceder ou avan ar a imagem visualizar o seu t tulo uma ligeira descri o atribu da imagem e encerrar a janela quando pretendido Esta aplica o encontra se representada na Figura 68 Ford Fiesta WRC NOTICIAS TESTES E AVALIA ES Figura 68 Sub separador Fotos aplica o da shadowbox 72 Qualquer utilizador pode aceder a este sub separador contudo apenas o administrador do s tio pode acrescentar ou remover fotos a este Para tal deve efectuar o upload das fotos indicando a qual fabricante de autom veis pertence de forma a ficar alocada no separador correspondente Ao inserir a foto o administrador pode tamb m atribuir uma descri o foto exemplo Ford Fiesta Mk7 Interior Na Figura 69 apresenta se um exemplo da adi o de uma nova foto ao sub separador Fotos por parte do administrador Como pode ser observado as fotos encontram se distribu das num formato 3x4 3 linhas com 4 colunas cada perfazendo um total de doze fotos por p gina Caso uma determinada marca contenha mais de doze fotos ao ser inserida uma nova acrescentada uma nova p gina onde esta ser apresentada e as onze fotos seguintes que eventualmente possam ser carregadas Ao serem introduzidos os dados d
102. onde cria o das p ginas HTML e dos objectos de som imagem necess rias para desenvolvimento da aplica o Embora os testes ocorram durante todo o processo de cria o de um website o teste definitivo acontece ap s conclu da a implementa o do mesmo ou seja na etapa de testes avalia o Nesta s o testados links imagens textos liga es com a base de dados formul rios e outros elementos interactivos para al m do teste da imagem do website em diferentes plataformas e browsers Por fim a fase de manuten o envolve a recolha de novos requisitos e o planeamento das modifica es necess rias identificadas na fase de testes De referir que este ciclo engloba ainda um atalho que possibilita a passagem etapa da implementa o logo ap s a an lise de requisitos sem se passar pela etapa de especifica o o que na pr tica se verifica frequentemente Por m isto dificulta o processo de cria o do website uma vez que s o necess rias modifica es frequentes do mesmo sempre que seja alterada a sua interface devido a n o ter sido criado um modelo da interface na etapa da especifica o 12 Consultoria Defini o An lise Proposta Figura 4 Ciclo de desenvolvimento de um website modelo proposto por Santos Para al m do modelo proposto por Scapin existem muitos outros modelos de refer ncia para o desenvolvimento de um website Um modelo que merece ainda refer ncia neste trabalho
103. orre se o risco de o website criado n o corresponder s expectativas do seu p blico alvo ou cliente final 37 O ciclo de desenvolvimento de um website uma espiral cont nua marcado por sucessivas modifica es Ao longo deste ciclo v o se sucedendo v rias etapas sendo que o n mero e a import ncia de cada uma delas variam em fun o da abordagem utilizada A seguir ser apresentada e descrita a abordagem proposta por Scapin que composta por seis etapas como mostra a Figura 3 Estas incluem an lise de requisitos especifica o design implementa o testes avalia o e manuten o 38 Il An lise de requisitos o Testes Avalia o O Implementa o Figura 3 Ciclo de desenvolvimento de um website modelo proposto por Scapin 38 O modelo proposto por Scapin para o desenvolvimento de um website configura se como um processo sistem tico e c clico onde deve ser executada em primeiro lugar a an lise dos requisitos Esta etapa diz respeito estrutura o do site e identifica o do seu contexto definindo os objectivos do mesmo caracterizando o seu p blico alvo e identificando os recursos que ser o utilizados Na fase de especifica o s o produzidos os modelos da interface a partir dos requisitos obtidos durante a an lise de requisitos A seguir estes modelos s o refinados e implementado o website de acordo com o seu conte do Design A etapa da implementa o corresp
104. ortugal Calcular custo monet rio de viagem Cidade Porto Viatura BMW 1200 Introduza o valor para convers o 10 Seleccione o tipo de convers o pretendida REST Painel de Controlo sod Forum Editar Perfil O resultado 7 quilowatts kW Alterar Password Figura 75 Separador Ferramentas selec o da ferramenta pretendida 76 Para a ferramenta convers o kw cv cv kw foi desenvolvido um algoritmo onde se inclui um formul rio com duas op es conv e conv2 que correspondem convers o kw cv e cv kw respectivamente Ap s definida a convers o procede se ao c lculo do valor resultante da convers o Para o primeiro tipo de convers o ao valor em kw introduzido directamente no s tio multiplica se por 1 36 para obten o do valor em cv respectivo No segundo tipo de convers o multiplica se o valor introduzido no s tio por 0 735 para convers o para a unidade kw 3 O algoritmo referido apresentado de seguida lt form method post action ferramentas 1 php gt Introduza o valor para convers o lt input type text name numerol gt Seleccione o tipo de convers o pretendida lt select name scale gt lt option value convl gt kw gt cv lt option gt lt option value conv2 gt cv gt kw lt option gt lt select gt lt INPUT TYPE submit VALUE Calcular gt lt INPUT TYPE reset VALUE Reiniciar gt lt form gt lt php Snumero POST scale
105. os s o eles motor transmiss o suspens o trav es e carro aria Estes cabe alhos permitem atrav s do seu clique expandir recolher o conte do associado a cada um deles inclu do dentro das tags lt div gt e lt div gt 94 Anexo E Algoritmo separador Novidades Inova es Neste anexo apresentado o algoritmo desenvolvido para a p gina associada ao separador Novidades Inovac es lt html gt GES lt body gt lt div class container gt lt div id da slider class da slider gt lt div class da slide gt lt h2 gt Volvo apresenta carregador el ctrico portatil lt h2 gt lt p align justify gt Chama se Pure Tension Pavillion lt p gt lt a href link da not cia class da link gt Ler mais lt a gt lt a href link da imagem gt lt img src images 1 jpg alt image01 width 340 height 235 gt lt a gt lt div gt lt div gt lt div class da slide gt lt h2 gt Renault Fluence Z E t xi em Lisboa lt h2 gt ra lt Texto e imagem gt lt div gt boas lt div class da slide gt lt h2 gt Portuguesa desenvolve tecnologia vital para carros el tricos lt h2 gt CER lt Texto e imagem gt lt div gt lt nav class da arrows gt lt span class da arrows prev gt lt span gt lt span class da arrows next gt lt span gt lt nav gt lt div gt lt div gt Gees lt script type text javascript
106. partilharam comigo os seus conhecimentos Resumo Esta disserta o enquadra se no mbito dos Sistemas de Informa o em concreto no desenvolvimento de aplica es Web como o caso de um website Com a utiliza o em larga escala dos meios tecnol gicos tem se verificado um crescimento exponencial dos mesmos o que se traduz na facilidade com que podem ser encontradas na Internet diversos tipos de plataformas inform ticas Al m disso hoje em dia uma grande parte das organiza es possui o seu pr prio s tio na Internet onde procede divulga o dos seus servi os e ou produtos Pretende se com esta disserta o explorar estas novas tecnologias nomeadamente os diagramas UML Unified Modeling Language e a concep o de bases de dados e posteriormente desenvolver um website Com o desenvolvimento deste website n o se prop e a cria o de uma nova tecnologia mas o uso de diversas tecnologias em conjunto com recurso s ferramentas UML Este encontra se organizado em tr s fases principais an lise de requisitos implementa o e desenho das interfaces Na an lise de requisitos efectuou se o levantamento dos objectivos propostos para o sistema e das necessidades requisitos necess rios sua implementa o auxiliado essencialmente pelo Diagrama de Use Cases do sistema Na fase de implementa o foram elaborados os arquivos e direct rios que formam a arquitectura l gica de acordo com os modelos descritos no Dia
107. presentadas a seguir as funcionalidades tarefas a cada um deles associadas Utilizador normal visitante Pode consultar a informa o relativa a cada marca gloss rio novidades inova es sites teis contactos e a classifica o individual e por equipas do campeonato de F rmula 1 da presente poca pesquisar cada um dos modelos de autom veis que constam da base de dados com recurso barra de pesquisa visualizar e comentar not cias aceder galeria de fotos e v deos e s redes sociais facebook twitter e youtube efectuar o registo e sugerir poss veis altera es de forma a melhorar o site desenvolvido 33 Utilizador registado Para al m das funcionalidades afectas aos visitantes ap s efectuar o registo os utilizadores podem efectuar o login no site consultar e alterar os seus dados do perfil por exemplo alterar a sua password de registo aceder ao f rum e responder ao question rio online Administrador Para al m das funcionalidades afectas aos utilizadores registados o administrador pode aceder s estat sticas do site e tem por tarefa gerir o f rum as contas nas redes sociais 0 question rio online inserir alterar ou eliminar quest es e os registos dos utilizadores atrav s do painel de controlo visualizar contas inactivas durante um intervalo de tempo seleccionado com possibilidade de apagar essas contas ou enviar um e mail a relembrar os utilizadores que podem aceder ao site
108. raliza o include e extend A rela o de generaliza o especifica que um use case UC herda as caracter sticas de um outro UC e pode sobrepor algumas delas ou adicionar novas caracter sticas Nesta situa o diz que o primeiro UC um caso particular do segundo conhecido por Super Caso de Uso A rela o include significa que para determinado UC ter a s sua s funcionalidade s executada s necessita de utilizar ou incluir uma funcionalidade de um outro UC A rela o extend significa que deve ser inclu do num determinado UC um comportamento opcional que se encontra definido num outro UC base Existem ainda rela es entre actores e use cases que s o apelidadas de associa o Figura 8 e definem uma funcionalidade do sistema sob o ponto de vista do utilizador Podem tamb m existir rela es entre actores denominadas de generaliza o semelhan a do que se verifica na rela o de generaliza o entre UC tamb m nesta um actor herda as caracter sticas de um outro actor dos seus use cases Esta rela o encontra se representada na Figura 8 onde os UC do actor B s o tamb m os UC do actor A no entanto o actor A possui os seus pr prios UC 17 Actor Use Case Actor A Actor B a b Figura 8 Diagrama de use cases a exemplo de uma rela o de associa o b exemplo de uma rela o de generaliza o 2 2 3 2 DIAGRAMA DE CLASSES Os diagramas de classes s o os m
109. rand que apresenta um funcionamento semelhante fun o rand por m capaz de atribuir n meros aleat rios num intervalo de tempo quatro vezes inferior No final destas itera es a vari vel pass cont m a nova password do utilizador Contudo ainda necess rio encriptar a password antes de a actualizar na base de dados sendo portanto utilizada a fun o md5 Message Digest algorithm 5 Por fim actualiza se o valor do campo password na tabela de dados de forma a corresponder com a nova password que ser enviada para o utilizador sglinsert UPDATE utilizadores SET password passd WHERE email email Em caso de falha ao inserir os novos dados na tabela apresentada uma mensagem de aviso N o foi poss vel inserir os dados Caso contr rio solicitado o ficheiro enviar email php respons vel pelo envio do email com a nova password 92 Anexo D Algoritmo separador Carp dia Neste anexo apresenta se o algoritmo associado ao separador Carp dia ou seja p gina de Carp dia lt html gt lt head gt lt title gt Carp dia lt title gt Gees lt script gt function SiGLFraceondi onl accordil on oe lt script gt lt head gt lt body gt Seleccione no quadro abaixo apresentado qual o componente autom vel que deseja consultar lt div id accordion gt lt h3 gt Motor lt h3 gt lt div gt ERED lt Informa o acerca do componente Motor gt
110. renagem bihelicoidal Durante a ocupa o alem da Fran a os investidores da Citro n continuaram com o seu trabalho e desenvolveram os conceitos que mais tarde chegaram ao mercado pelos modelos 2CV Dois Cavalos e DS carinhosamente apelidado por boca de sapo Estes foram largamente criticados pelos jomalistas contempor neos como sendo radicais e at mesmo como solu es da linha da frente para o design autom vel PN CITRO N S mbolo da Citro n Figura 57 Separador Marcas descri o hist rica portas e in cio de produ o como demonstra a Figura 58 Jetta x Jetta Figura 58 Separador Marcas modelos 67 O item concept cars engloba exemplos de veiculos ainda em fase experimental em que sao aplicados novos conceitos sejam eles est ticos t cnicos ou tecnol gicos os denominados carro conceitual ou carro conceito da express o inglesa concept car Futuramente alguns destes ve culos poder o dar origem a um ve culo de produ o em s rie ou ent o servir apenas de exerc cio de estilo para os fabricantes demonstrarem as tend ncias que se sup e virem a ser determinantes para o futuro dos autom veis Desta forma ao consultarem esta p gina os utilizadores podem ficar a par de algumas destas novidades tend ncias e da vis o de mercado de cada um destes fabricantes Esta p gina pode ser consultada na Figura 59 Conforme pode ser observado na figura acima mencionada na p gina relativa
111. representa o das formas mais comuns de multiplicidade 2 20 Figura 12 Exemplo de um Diagrama Entidade Rela o re 22 Figura 13 Estrutura b sica de um documento HTML 2 e rerere 24 Figura 14 Sintaxe da linguagem CSS ir ei E ea i eiei ei 25 Figura 15 Arquitectura das p ginas din micas ASP Active Server Pages ccecce 27 Figura 16 Arquitectura das p ginas din micas JSP Java Server Pages 36 eenen 28 Figura 17 Diagrama de use cases da plataforma Web errar 35 Figura 18 Diagrama de classes do site desenvolvido errar 36 Figura 19 Diagrama entidade rela o da plataforma Web ee 38 Figura 20 Janela principal da aplica o phpMyAdmin cre eeaeeereeereaneaaceraaaeea 40 Figura21 phpMyAdmin cria o de uma nova tabela na base de dados 41 Figura 22 phpMyAdmin defini o e parametriza o dos campos da tabela criada 42 Figura 23 phpMyAdmin estrutura da tabela criada eee eereeeeerereranarea 42 Figura 24 phpMyAdmin inserir novo registo ccccesscccesseceesecceeencaeceeseeceeseaeeecesaeeceeteeeeeeaeeeees 43 Figura 25 phpMyAdmin registo inserido com sucesso na tabela de dados 43 Figura 26 phpMyAdmin tabelas da base de dados criada c rena 44 Figura 27 C digo em PHP para liga o com o servidor e com a base de dados
112. roduzido o nome de utilizador no formul rio de registo este comparado com os nomes de utilizador j existentes na base de dados de forma a verificar a disponibilidade do mesmo Caso o nome j esteja em uso apresentada uma mensagem de aviso O nome nome de utilizador j est em uso como exibido na Figura 41 Para an lise das passwords e correspondente indica o do n vel de seguran a foi desenvolvido um algoritmo espec fico apresentado no Anexo B Ap s o visitante efectuar o registo os dados preenchidos s o enviados para a base de dados que cont m os dados dos utilizadores sendo a password encriptada pela fun o md5 15 22 que a transforma numa sequ ncia de caracteres como demonstra a Figura 42 Desta forma garantida maior seguran a no tratamento dos dados de cada utilizador em particular da sua password de acesso In cio Marcas Carp dia Novidadesilnova es Galeria F rum Sitq Menu de registo O preenchimento destes campos obrigat rio x Campos n o preenchidos Nome de Utilizador Cristiano Alves O nome Cristiano Alves j est em uso Password eecccccee A password deve conter pelo menos 6 caracteres M dia Confirmar Password essssssss Email x Figura 41 Menu de registo aviso da disponibilidade do nome de utilizador n vel de seguran a da password e dados em falta nome utilizador password email data nascimento pais cidade sexo foto perfil carro actual
113. s utilizados para a programa o destas p ginas e as respectivas explica es do seu funcionamento Por ltimo no cap tulo 5 s o apresentadas as conclus es do trabalho desenvolvido e poss veis melhorias futuras Tabela 1 Calendariza o do projecto A Agosto Setembro Outubro Fim Dura o Estudo das Tecnologias de Informa o 05 08 2013 07 08 2013 3 dias Estudo dos diagramas UMLe do modelo relacional de base de dados ig ee Mi Modela o da plataforma Web 12 08 2013 25 08 2013 2 semanas Implementa o da plataforma Web 26 08 2013 22 09 2013 4 semanas Elabora o do relat rio 23 09 2013 25 10 2013 5 semanas Entrega do relat rio 28 10 2013 01 11 2013 5 dias Apresenta o dotrabalho 11 11 2013 2 ESTADO DA ARTE As tecnologias de informa o surgiram de uma forma laboratorial e em alguns casos at confidencialmente sendo na actualidade amplamente difundidas fazendo parte do quotidiano de cada um De facto estas tecnologias est o presentes em cada recanto para cumprir uma qualquer miss o e a sua utiliza o tornou se rotineira e quase indetect vel 28 Uma das tecnologias de informa o que mais evoluiu e que se assume como uma das mais utilizadas a Internet Esta distribui atrav s dos seus servidores uma grande variedade de documentos texto e multim dia que qualquer utilizador da rede pode aceder e que apresenta
114. s da Administra o Directa e Indirecta do Estado Laborat rio de Estudo e Desenvolvimento da Sociedade da Informa o Universidade do Minho Portugal 2003 ISBN 972 98921 0 5 ORACLE JavaServer Pages Technology Oracle Corporation Calif rnia 2013 http www oracle com technetwork java javaee jsp index html Ultimate Specs Car Specifications Agosto de 2013 http www ultimatespecs com pt PHP PHP Downloads The PHP Group Outubro de 2013 http www php net downloads php PHP Php Manual mail The PHP Group Agosto de 2013 http www php net manual pt_BR book mail php PhpMyAdmin phpMyAdmin Download The phpMyAdmin Project Agosto de 2013 http www phpmyadmin net home_page downloads php 84 34 35 36 37 38 39 40 41 42 43 44 PIMENTA Marcelo WINCKLER Marco Avalia o de Usabilidade de Sites Web Instituto de Informatica Universidade Federal do Rio Grande do Sul Brasil 2002 PortalFl ltimas Not cias da Fl Reino Unido Agosto de 2013 http www portalf1 com pt SANTOS Roneclei JORGE Eduardo Java Server Pages JSP Javafree org 2008 http javafree uol com br files_user files A 74 F8 Tutorial_JSP1 pdf SANTOS Ver nica S dos Arquitetura e Metodologia na Cria o de WebSite Trabalho de conclus o de Curso para obten o do grau de Licenciado em Tecnologia em Desenvolvimento de Software Centro Universit rio Amparense Brasi
115. s da tecnologia ADO ActiveX Data Objects que fornece os elementos necess rios para a conex o com o sistema de gest o da base de dados As principais vantagens da utiliza o da tecnologia ASP incluem a independ ncia do navegador a seguran a do c digo fonte o suporte de diferentes linguagens e a possibilidade de interac o com bases de dados Como os scripts usados nesta tecnologia s o interpretados no lado do servidor esta independente do navegador usado podendo ser acedidos a partir de qualquer um destes Da mesma forma ao retornar apenas o resultado preservado o c digo fonte Esta permite ainda visualizar actualizar e ou adicionar dados num sistema de gest o de bases de dados N VEL 1 N VEL 2 Pedido Enviodo p do N VEL 3 http pedido 7 A lt a Banco de dados Cliente Servidor Web navegador Figura 15 Arquitectura das p ginas din micas ASP Active Server Pages 27 2 5 2 JSP A linguagem JSP criada pela Sun Microsystems subsidi ria da Oracle Corporation 29 baseia se na linguagem de programa o Java e tem como prop sito simplificar o processo de desenvolvimento din mico de websites O seu funcionamento similar ao da tecnologia ASP sendo os comandos processados pelo servidor antes da p gina HTML ser enviada para o navegador como demonstra a Figura 16 Como se pode visualizar na referida figura em primeiro lugar o cliente envia um pedido atrav s do navegador pela Internet de u
116. s necess rios para atender s necessidades da plataforma de forma a permitir reunir as ideias necess rias para a projec o da mesma Por ltimo ser o apresentados os diagramas UML Unified Modeling Language relativos ao projecto desenvolvido dos quais fazem parte o diagrama de classes e o diagrama de use cases e o diagrama entidade rela o tamb m denominado por modelo E R do modelo relacional de bases de dados Estes diagramas t m por finalidade expressar numa linguagem modelo todas as funcionalidades e rela es que se pretendem atribuir plataforma a ser desenvolvida 3 1 INTRODU O O desenvolvimento deste trabalho de disserta o teve como principal objectivo a obten o de compet ncias na rea de desenvolvimento de uma p gina web com recurso a bases de dados 31 Foram utilizadas as linguagens HTML e PHP ja apresentadas anteriormente nas subsec es 2 4 1 e 2 5 3 do capitulo 2 respectivamente O HTML foi utilizado para o layout e disposi o de todo o conte do vis vel da p gina e o PHP para a execu o dos scripts que permitem a interac o com as diversas funcionalidades do website Foi ainda utilizada a linguagem de programa o Javascript numa fase mais avan ada do trabalho para o design da p gina e para inclus o de efeitos visuais Para interac o com as bases de dados criadas para o website utilizou se a linguagem SQL de forma a providenciar um conjunto diversificado de servi os de ace
117. s principais e as suas caracter sticas os diagramas UML com relevo para o projecto desenvolvido neste trabalho isto diagrama de use cases e de classes respectivamente Na subsec o 2 3 3 apresentado o diagrama entidade rela o do modelo relacional de bases de dados 2 3 1 DIAGRAMA DE USE CASES O diagrama de use cases em portugu s diagrama de casos de uso corresponde ao diagrama mais geral e informal da UML sendo utilizado como aux lio aos processos de levantamento e an lise dos requisitos e na compreens o do sistema como um todo 20 Apesar do seu car cter geral e informal este serve de base para os restantes diagramas e consultado durante todo o processo de modela o visto conter uma descri o das principais funcionalidades do sistema sob o ponto de vista dos utilizadores Um diagrama de use cases composto por actores casos de uso e rela es Actores Um actor uma entidade externa fora do sistema que interage com o sistema e pode ser um utilizador humano um outro sistema f sico ou l gico ou um evento externo A representa o gr fica de um actor caracteriza se por um boneco e por um r tulo com o seu nome conforme apresentado na Figura 6 Os actores devem ser caracterizados por interm dio de uma pequena descri o de modo a assegurar uma boa compreens o do seu significado por parte de todos os elementos da equipa envolvida na an lise 2 Os actores comunicam com o sistema a
118. s sec es 2 4 e 2 5 do cap tulo 2 sendo apresentada uma breve explica o de cada tecnologia e citados exemplos para informa o complementar Apesar do esfor o empregue reconhece se que algumas destas tecnologias mereciam uma maior profundidade de tratamento no entanto acredita se que esse esfor o iria muito al m dos objectivos propostos para este projecto O presente trabalho apresenta se em duas divis es a primeira relata sobre procedimentos planeamento e estrutura o de um website a segunda parte apresenta um modelo funcional de um website com recursos s ferramentas UML 1 1 OBJECTIVOS O objectivo principal deste trabalho de disserta o o desenvolvimento de uma plataforma Web website com recurso ao modelo UML bases de dados e diferentes linguagens de programa o HTML PHP JavaScript CSS ASP JSP Para a concretiza o deste objectivo foi necess rio desenvolver as tarefas a seguir apresentadas e estudo das Tecnologias de Informa o TI focadas no desenvolvimento de aplica es Web e estudo dos diagramas Unified Modeling Language UML e do modelo relacional de bases de dados e modela o da plataforma Web o desenvolvimento dos diagramas UML diagrama de classes e diagrama de use cases e do diagrama entidade rela o do modelo relacional de bases de dados o desenvolvimento da base de dados relativa plataforma Web criada e implementa o da plataforma Web o estudo das lin
119. saificacao E anda aid HR AAA Criat tabelka KOR KKK KKK KK KK KKK Ssql SELECT posicao piloto equipa pontos FROM formulal classificacao Slimite mysql_query sql verifica o limite da tabela Sposicao S sql posicao Spsslo Fon ES serao sous Sequipa Ssql equipa Spontos Ssql pontos loop para exibir os dados da tabela while sql mysql fetch array Slimite if tipo_classificacao individual echo Sposicao cCho Sp TOCOU SchoL SPONTOS u if tipo classificacao equipas echo rSposiicaoll echo Sequipa echovSpontos t R Conforme se pode visualizar no extracto de c digo acima apresentado em primeiro lugar recolhido atrav s da vari vel _GET o valor do tipo de classifica o do formul rio e armazenado em tipo_classificacao A seguir s o seleccionados os campos da tabela de dados que se pretende utilizar nomeadamente posicao piloto equipa e pontos e armazenados individualmente nas vari veis posicao piloto equipa e pontos 87 respectivamente Esta selec o realizada atrav s da instru o SQL sql SELECT posicao piloto equipa pontos FROM formulal classificacao Por fim o programa avan a para um ciclo loop onde os dados s o impressos para o ecr at que seja atingido o limite da tabela isto at serem exibidos todos os dados limite Se tiver sido seleccionado no form
120. sar de ter um registo v lido Nesta situa o representada na Figura 35 a s o somente apresentados dois scripts um para apresenta o da data e hora do servidor e um outro para exibi o de not cias testes e comparativos e outras informa es acerca do mundo autom vel Um utilizador ao efectuar a autentica o no site s o lhe apresentadas as funcionalidades acima referidas para os visitantes por m com um menu adicional com informa o relativa ao perfil desse utilizador em concreto o nome idade pa s cidade viatura actual e a foto de perfil conforme registado na Figura 35 b Este menu inclui ainda links para acesso a algumas p ginas do s tio que eventualmente poder o ser de interesse para o utilizador como o question rio online o f rum e as p ginas para editar o perfil ou alterar a password de registo Mais frente ser o detalhados os aspectos referentes a este menu O administrador ter em rela o aos utilizadores registados dois links extras para gest o e administra o do site representados por Painel de Controlo e imagem apresentada quadrado branco com tr s barras vermelhas de diferentes tamanhos Esta situa o encontra se representada pela Figura 35 c semelhan a dos anteriores tamb m estes links ser o alvo de estudo nas pr ximas sec es 53 Perfil de utilizador Perfil de utilizador ad Pais Portugal vot Carros Cidade Porto Viatura BMW 120d Painel de Contro
121. scular do motor a combust o est mais pr xima do universo masculino O Survolt EG um contraponto s isso afirma Patrick Arnaud respons vel pelos conceitos da Citro n Alterar Password Como n o tem obriga o com s prsticsbilidade no uso fora das pistas o Survolt recebeu as baterias no locs mais conveniente pars sus performance numa posi o mais centralizada e perio do solo pars baixar o centro de gravidade e optimizar a reparti o de peso pelos dois eixos Clique pars mais informa es GTbyCitro n Com os tra os de uma r plica de um ve culo vindo do mundo digital o concept car Citro n GTbyCitro n ums interpreta o in dita de um ve culo de turismo Este o resultado de ums parceria entre a Citro n e a Polyphony ED Jotta x Jotta A aerodin mica e a fluidez de linhas valores fortes ds marca foram particularmente cuidadas contribuindo pars o dinamismo do GTbyCitro n pars a efic cia do comportamento do veiculo e pars gerar sensa es de condu o fora do comum hagvcarma cotcom br Clique para mais informa es Figura 59 Separador Marcas concept cars 68 Citro n sites teis Redes Sociais Beles E P gina Oficial Citro n Portugal no Facebook C ge Citro n WRC SS Yousif Canal Citro n Portugal no YouTube ie rF n Mini site Citro n DS3 Google P gina Oficial Citro n Portugal no Google Figura 60 Separador Marcas sites teis LA Ow P g
122. sitam de c digos muito complexos existem bastantes c digos prontos que podem ser facilmente descarregados da Internet com um nico documento CSS poss vel controlar v rios documentos HTML e a rapidez de aprendizagem da mesma Na Figura 14 apresenta se na sua forma mais elementar a sintaxe da linguagem CSS que como poss vel constatar encontra se dividida em tr s partes selector propriedade e valor O selector indica o elemento tag HTML ao qual ser aplicada a propriedade por exemplo lt body gt a propriedade designa o atributo que se deseja alterar por exemplo font color background etc e o valor especifica a caracter stica a ser assumida pela propriedade por exemplo tipo de letra arial cor da letra verde etc selector propriedade valor Figura 14 Sintaxe da linguagem CSS 25 2 4 3 JAVASCRIPT JavaScript foi originalmente desenvolvido por Brendan Eich da Netscape Communications Corporation sob o nome de Mocha posteriormente teve o seu nome mudado para LiveScript e por fim JavaScript JavaScript uma linguagem interpretada embutida dentro de arquivos HTML e cujo funcionamento bastante simples sempre que um destes arquivos carregado o navegador interpreta o script e realiza as opera es especificadas Embora seja bastante limitada n o suporta aplica es complexas nem transac es que necessitem de comunica o a partir da rede a linguagem JavaScript ao contr rio
123. sits foi dis Que 31 Jul 2013 20 16 Ver as novas mensagens desde minha ltima visits Ver minhas mensagens Ver as mensagens sem resposta Assinalar todos os f runs como lidos t pico encontram se as regras de utiliza o do site ex 26 J 3 18 57 Apresenta o Apresenta o Adm Este t pico serve para todos os utilizadores efectuarem s sua apresenta o Sex 26 Jul 2013 19 06 Moderador Moderadores Admin amp T picos ativos do dia Top 20 dos postadores do dia Top 20 dos postadores do f rum Excluir os cookies do f rum QUEM EST CONECTADO H 4 usu rio Legenda Moderadores ESTAT STICAS am um total de 3 mensagens registrado atende pelo nome de Admin mensagens E N o h novas mensagens Eg e Bloqueado In cio F rum gr tis phpBS F rum gratis de ajuda Estat sticas Fale conosco Assinalar uma queixa Painel de Controle Figura 53 Aspecto final do f rum AutoInfo O question rio online acedido a partir da op o D Question rio Online localizada dentro do perfil de utilizador Na Figura 54 apresenta se a p gina relativa a este question rio Este pretende ser uma rea l dica onde os utilizadores podem testar os seus conhecimentos acerca do universo autom vel permitindo ainda ao administrador obter um feedback do n vel de conhecimento do p blico alvo do s tio 1 APSA o conjunto de quais marcas gt A Peugeot Citro n B
124. so bem como os respectivos direitos do autor A seguir ser o apresentadas as potencialidades de cada um dos aspectos referidos ESSE Jas ES i Hos Seja bem vindo a Visitante ao site Auto Into Esteja vontade para navegar ea cross cquipas pelo nosso site e desfrutar de ona Pos Pontos todas as suas funcionalidades si Sebastian Va 2 Femando Alonso 123 3 Kimi Raikkonen 116 4 Lewis Hamilton 99 5 Mark Webber 93 6 Nico Rosberg 84 7 Felipe Massa 57 8 Romain Grosjean 4 Desporto Autom vel Pre o m dio dos combustiveis nm raa aa Santos Gasolina 11 Adrian Sutil 23 O Audi Spor Quattro est de regresso tr s d cadas c1650 e1 774 4 42 Sergio Perez 16 gee pes ple ere Gas leo 13 Jean Eric Vergne 13 desportivo de ligar 3 tomada O Sport Quattro tron Dersa D essas 14 Daniel Ricciardo 1 Audi Sport Quattro um hibrido GPL Auto 15 Nico Hulkenberg 7 Audi apresenta Sport quattro 0 782 16 Pastor Maldonado 0 g 47 Valtteri Bottas 0 PESE Actualiza o 2 09 2013 AU EAGLE INNES E Fornecido por Mais Gasolina Abeta s Anterior Sequins Googe Web Edementa doa mesas 0 20 Charles Pic 0 21 Max Chilton 0 o N N Giedo van der Garde Figura 28 P gina principal do s tio desenvolvido AutoInfo 4 1 1 BARRA SUPERIOR LOG TIPO E RODAP O desenvolvimento da p gina principal do s tio foi iniciado pela cria o da barra superior
125. so da fun o pr pria para o efeito ou seja pela fun o session destroy conforme demonstra o extracto de c digo que a seguir se apresenta sendo o utilizador encaminhado para a p gina principal index php lt php Session srarec session destroy in aclere location 1ndex php gt Logo abaixo da barra superior apresentado o log tipo que tal como j foi referido identifica o s tio perante o seu p blico alvo atrav s de uma representa o gr fica particular Esta representa o gr fica pode ser visualizada na Figura 33 Figura 33 Log tipo do s tio AutoInfo 52 Figura 34 Rodap do s tio AutoInfo Atrav s do rodap do site poss vel aceder a algumas das suas reas de interesse nomeadamente p gina principal Inicio p gina de contactos Contactos p gina de sugest es Sugest es ou mapa do site Mapa do Site como representado na Figura 34 4 1 2 COLUNA DA ESQUERDA E COLUNA DA DIREITA A coluna da esquerda inclui um separador que tem por objectivo facilitar o acesso informa o relativa ao perfil de utilizador caso este tenha efectuado a autentica o no s tio Se o acesso ao s tio tiver sido realizado por um visitante n o apresentada qualquer informa o relativa ao perfil de utilizador uma vez que este n o efectuou a autentica o seja por n o possuir ainda um registo v lido seja por n o ter efectuado o login ape
126. sso aos dados nelas contidos tais como defini o manipula o e consulta de dados A p gina web criada destina se a ser utilizada por pessoas com interesse pela rea dos autom veis Pretende se que a p gina apresente uma interface gr fica apelativa e ao mesmo tempo simples de forma a cativar poss veis visitantes Com o intuito de proporcionar aos utilizadores do website um papel mais activo e simultaneamente mais din mico este disponibiliza uma s rie de recursos tais como not cias acerca dos recentes desenvolvimentos no que diz respeito ao mundo autom vel informa o t cnica de algumas das marcas de autom veis com maior ndice de vendas um f rum em que cada utilizador pode ap s efectuar o registo obrigat rio criar novos t picos de debate e consultar comentar os t picos existentes galeria de imagens e fotos entre outros 3 2 AN LISE DE REQUISITOS Ap s terem sido definidos os objectivos propostos para a elabora o desta disserta o seguiu se a elabora o da an lise dos requisitos necess rios para a cria o do site Para isso foi realizada uma an lise a sites relacionados com o tema deste trabalho 4 5 30 35 41 Ap s a an lise realizada decidiu se implementar os seguintes requisitos e qualquer utilizador pode consultar informa es relativas a cada marca autom vel descri o hist rica modelos concept cars e links teis gloss rio novidades inova o lista de sites t
127. sto do formul rio de login localizado na barra superior ao clicar se sobre o bot o Login conforme apresentado na Figura 39 Surge ent o um formul rio igual ao apresentado na Figura 40 onde devem ser introduzidos os dados para o registo nomeadamente o nome de utilizador password email data de nascimento cidade e pa s sexo carro actual e foto de perfil Nome de Utilizador Password ES f Lembrar Login Recuperar password Efectuar registo Figura 39 Formul rio de login efectuar registo Pesquisar Marcas Sie Boe Login m Eg CEEE Eq vor Lor ici s vidades lnova es Galer rum Menu de registo SS a O preenchimento destes campos obrigat rio Nome de Utilizador lt Password A password deve conter pelo menos 6 caracteres Password n o inserida Confirmar Password Email Data de Nascimento 1 Jan w 2013 Pa s Portugal Cidade Sexo Selecionar Carro Actual Foto de Perfil Procurar Figura 40 P gina de registo 57 Alguns dos campos do formul rio de registo s o de car cter obrigat rio portanto caso n o seja preenchido um destes campos n o poss vel efectuar o registo sendo apresentada uma mensagem de aviso Campos n o preenchidos e indicado quais os campos que ficaram por preencher conforme apresentado na Figura 41 Ao ser int
128. t onde vai um website havendo alguns websites que s o aut nticas mantas de retalhos isto complicados e de navega o algo confusa o que origina que os seus visitantes se percam antes de conseguirem aceder informa o desejada 6 13 Os perfis mais utilizados na constru o de websites s o comunidades virtuais servem para os utilizadores comunicarem com outros utilizadores e surgem normalmente associados a um tema criado e mantido pela pr pria din mica da interac o entre os seus visitantes Nesta categoria incluem se os f runs chats sites de relacionamento etc e institucional este perfil bastante utilizado por empresas como ponto de contacto com os seus clientes e ou fornecedores a fim de aumentar a sua repercuss o no mercado gerando potencial de neg cio e informa es Neste perfil incluem se ainda os websites criados por profissionais liberais para publica o dos seus trabalhos e portal congregam conte dos de diversos tipos de perfis geralmente fornecidos por uma empresa ou organiza o O nome atribu do a este tipo de perfil prende se com o facto de estes congregarem uma grande quantidade de servi os num nico local e produtos s o utilizados por institui es comerciais para venda dos seus produtos apresentado as suas caracter sticas e benef cios e servi os semelhan a do perfil anterior este tamb m utilizado pelas institui es por m para vender
129. tervalo estabelecido rem Figura 11 Diagrama de classes representa o das formas mais comuns de multiplicidade 2 2 3 3 DIAGRAMA ENTIDADE RELACAO Os diagramas Entidade Rela o tamb m denominados por diagramas Entidade Associa o s o utilizados como ferramenta de aux lio concep o de bases de dados Estes v m acompanhados por uma t cnica de representa o gr fica que ajuda na visualiza o das rela es entre as diferentes entidades conceitos de um sistema de informa o no entanto n o fornece informa es acerca das fun es que manipulam os dados Um diagrama Entidade Rela o DER composto por tr s elementos principais entidades atributos e rela es 4 Entidades Uma entidade pode ser definida como uma colec o ou conjunto de objectos do mundo real sejam concretos por exemplo um computador ou rob ou abstractos por exemplo um curso universit rio cujas informa es s o de interesse para o sistema Ao serem identificadas as diferentes entidades que comp em um sistema facilitado o processo de constru o de uma base de dados uma vez que s o identificados os objectos relevantes para o sistema e as suas caracter sticas ou propriedades Na elabora o de um DER as entidades s o representadas por rect ngulos como demonstra a Figura 12 por exemplo a entidade Propriet rio Atributos Na recolha e armazenamento das informa es relacionadas com as entidades
130. trav s dos casos de uso podendo invocar v rios casos de uso cada caso de uso pode ser invocado por v rios actores C gt 2 f N 7 Actor Figura 6 Diagrama de use cases representa o gr fica de um Actor 2 Casos de Uso Ap s serem identificados os actores que comp em o sistema pode se identificar os casos de uso ou use cases com os quais cada actor interage com o sistema Um caso de uso permite caracterizar as funcionalidades que determinada aplica o a ser desenvolvida deve disponibilizar aos seus utilizadores 16 Devido ao facto de nem todos os use cases virem a ser suportados por um sistema inform tico estes podem ser definidos segundo uma perspectiva de neg cio pela identifica o do modo como respondem a um cliente ou evento em termos de processo de neg cio Quando se implementa um caso de uso a responsabilidade de cada passo da execu o associada s classes actores ou casos de uso que fazem parte da colabora o atrav s da especifica o das opera es necess rias e da defini o do modo como estas ir o interagir com o sistema A representa o gr fica de um caso de uso caracteriza se por uma elipse e por um r tulo com o seu nome como apresentado na Figura 7 Caso de Uso Figura 7 Diagrama de use cases representa o gr fica de um Caso de Uso 2 Rela es Os use cases podem estar relacionados entre si As rela es mais comuns entre use cases s o gene
131. trcen geral Profiling Edita Explicar SQL Criar c digo PHP Refresh 1 e em modo horizontal m com cabe alhos repetidos s cada 100 c lulas id versao modelo versao tipo combustivel numero portas in cio producao 1 c1 1 068cv Gasolina 30u5 2005 wel T Todos Nenhum Com os seleccionados 2 X E 1 registos come ando em O Registo inserido em modo horizontal com cabe alhos repetidos a cada 100 c lulas Query results operations Vista de impress o Vista de impress o com texto inteiro ff Exportar 5 CREATE VIEW Open new phpMyAdmin window Figura 25 phpMyAdmin registo inserido com sucesso na tabela de dados 43 phplyAdmin Servidor localhost b gi Base de Dados site E Estrutura SQL j Pesquisar Pesquisa por formul rio glExportar lmport dEDesigner SEOpera es g Privil gios Elimina BEBE lt Tabela Ac es Registos Tipo Collation Tamanho Suspenso Sase de Dados citroen dados chassi Ege x 26 MyISAM Istin1 swedish ci 3 4 KB site 34 izi citroen_dados_dimensoes Ea ek i x 16 MyISAM latin1_swedish_ci 2 8 KB site 5 citroen dados motor ES Ezmx 26 MylSAM Istinf swedish ci 2 8 RE oo nee citroen dados performance ES ek x 2 MyISAM Istinl swedish ci 2 6 EB E Es citroen geral ES EEE X 1 MyISAM Istinf swedish ci 2 7 KB Seon oan ane ford dados chassi Ea kh i x 26 MyISAM Istinf swe
132. uados a cada um Gestes ve culos consultar fotos videce Gos 3 s consultar as ltimas novidades do mundo autom vel entre outros obrigat rio efectuar registo estando escolher s sec o abrir os t picos desejados Por tudo isto este f rum apresenta se como bastante gt Us pars esclarecimento de qualquer d vids e para 10100 troca de informa o acerca desta ares Este site tal como o anterior cont m ums base de F rum Autoportsl tirarem escritas ns lingua portuguesa O f rum Autoporte tal como o f rum anterior um sec es sendo que sigumss aper O possiveis consultar ap s efectuar registo no mesmo Autohoje z legin No site prod peated encontrar uma grande vyetedede de informa o sutomivel como roticas EE F rum TuningOnline Este site oficial ds revista Autoesporte Editora Globo Brasi incide sobre o mundo torte Em de funcionalidades este em tudo semelhante so site anterior Autohoje apresentando se portanto como ums alternativa s este com as respectivas vantagens e limita es face ao anterior desperto Jedi Ee a Jem usados e muito mai Figura 62 Separador Sites teis aba Geral 69 4 4 2 SEPARADORES CARPEDIA E NOVIDADES INOVACOES O separador Carp dia foi implementado em jQuery e consiste num accordion tamb m conhecido como menu sanfona 23 em que apresentado uma descri o acerca dos diferentes componentes que constituem u
133. ul rio a classifica o individual tipo_classificacao individual s o impressos os valores contidos nas vari veis posicao piloto e pontos Se for pretendida a consulta da classifica o por equipas tipo classificacao equipas s o impressas as vari veis posicao equipa e pontos 88 Anexo B Algoritmo an lise de passwords e verifica o do n vel de seguran a Neste anexo apresenta se a fun o respons vel pela an lise da password introduzida por um utilizador na p gina de registo como sua password de autentica o no site Esta fun o passwordStrength password permite ainda verificar o n vel de seguran a associada password introduzida function passwordStrength password var vector new Array vector Wuna Traces vecror HU Wiracani vector 2 I Melhor vector 3 M dia veGkor 4 kRontel WAC EO S VMAS Portel var nivel 0 Se password gt 4 caracteres incrementa vector if password length gt 4 nivel Se password tiver pelo menos um caracter mai sculo incrementa vector if password match a z amp amp password match A Z nivel Se password tiver pelo menos um n mero incrementa vector if password match d nivel Se password gt 6 caracteres incrementa vector if password length gt 6 nivel Se password gt 8 caracteres incrementa vector 1f password length gt 8 nivel document getElementByI
134. ustivel varchar 10 X Gasolina numero_portas text v 2 ou 5 inicio producso int 4 unsigned X 2005 Insere como novo registo v and then Voltar atr s X seas moe Restart insertion with 1 x rows Use TAB key to move from value to value or CTRL srrows to move anywhere Figura 24 phpMyAdmin inserir novo registo Depois de preenchidos todos os campos do registo e ap s ser executado o comando isto ap s ser pressionado o bot o Executa poss vel visualizar que o registo foi adicionado com sucesso tabela criada conforme apresentado na Figura 25 Para adicionar mais registos tabela de dados devem ser seguidos os mesmos passos efectuados para a inser o do registo dado como exemplo sendo apenas alterados os valores atribu dos a cada um dos campos da tabela Chegado a este ponto e com o conhecimento adquirido acerca do funcionamento do phpMyAdmin tornou se poss vel criar todas as tabelas necess rias bem como os respectivos registos para o desenvolvimento do projecto Estas encontram se representadas na Figura 26 phpMyAdmin g Servidor localhost gt Gi Base de Dados site gt E3 Tabela citroen geral Visualiza pGEstrutura SQL j Pesquisar Zelnsere Exportar f import BBB R Opera es Limpa X Elimina Base de Dados ite 1 md 4 Mostrando registos O O 1 total O Query demorou 0 0006 sec F SELECT site 1 FROM citroen geral mero E ot
135. versos modelos de autom veis Esta encontra se dividida em cinco categorias geral motor performance dimens es e chassi Por sua vez cada categoria categoria geral composto pelos campos modelo vers o tipo de combust vel n mero de composta por um conjunto de campos relacionados com esta Por exemplo a deito Y Citro n descri o hist rica A Citro n um fabricante de autom veis francesa fundada em 1919 por Andr Citro n e hoje parte integrante da parceria Peugeot Citro n denominada de PSA Originalmente um fabricante com projectos relativamente simples o carro da Citro n chocou o mundo em 1934 com a inovadora trac o dianteira Traction Avant At ao final dos anos 80 esta companhia alcan ou a reputa o de projectar carros de uma maneira original A hist ria de Citro n come a com o fundador da companhia o engenheiro Andr Citro n Este CITRO N construiu armamentos para a Fran a durante a Primeira Guerra Mundial mas depois da guerra ele tinha uma f brica e nenhum produto Em 1919 come ou a produzir autom veis come ando com o modelo convencional Type 4 O s mbolo da companhia ainda usado at hoje o double chevron referenciando o trabalho anterior da Citro n a engrenagem ou h lice helicoidal bem como o Dinamo Militar utilizado em diversos equipamentos de uso militar Os dois V s invertidos conhecidos na Fran a como Deux Chevron simbolizam a eng
136. vidades Inova es semelhan a do separador anterior foi implementado em jQuery nomeadamente atrav s de uma janela deslizante slider 24 Esta permite apresentar conte do destacado no site usando anima es nomeadamente not cias com algumas das novidades do mundo autom vel Este inclui um t tulo uma pequena descri o da not cia e uma imagem associada mesma e um bot o para acesso ao link da not cia apresentada Ler mais onde esta pode ser lida na sua totalidade conforme apresentado na Figura 65 ainda inclu do duas classes que permitem alternar entre as not cias apresentadas avan ando ou recuando entre estas como demonstram a Figura 65 e a Figura 66 O algoritmo desenvolvido para a p gina associada a este separador consiste essencialmente no desenvolvimento do slider Este encontra se representado no Anexo E dd Bem vindo Cristiano Alves Sair port til Ler mais Figura 65 Separador Novidades Inova es 1 not cia 71 Bem vindo Cristiano Alves Sair Figura 66 Separador Novidades Inova es 3 noticia 4 4 3 SEPARADOR GALERIA O separador Galeria como demonstra a Figura 67 encontra se dividido em 2 sub separadores Fotos e V deos O sub separador Fotos como o pr prio nome indica inclui fotos relativas s diferentes marcas de autom veis utilizadas para o desenvolvimento do s tio Para exibi o destas fotos f
137. xibido conforme os 22 recursos dispon veis em cada navegador ou seja caso o navegador n o tenha os recursos que est o nos scripts c digos que fazem parte dos arquivos existentes num website o utilizador ser privado de visualizar parte do seu conte do Por sua vez nas linguagens interpretadas num servidor server side a apresenta o do conte do de uma p gina depende do servidor que a interpreta assim quando um utilizador efectua uma requisi o ou pedido o servidor processa os scripts que comp em a p gina e devolve ao cliente apenas o resultado na forma de HTML A seguir ser o apresentadas algumas das linguagens de programa o client side amplamente utilizadas na constru o de websites nomeadamente HTML HyperText Markup Language CSS Cascading Style Sheets e JavaScript N o objectivo descrever exaustivamente todo o potencial de cada uma destas tecnologias mas sim apresentar uma breve descri o de forma a possibilitar ao leitor uma maior familiariza o com estas tecnologias e por consegu ncia uma melhor compreens o da interface desenvolvida 24 1 HTML O HTML surgiu no ano 1990 por interm dio do cientista brit nico Tim Berners Lee com o objectivo de colmatar a inexist ncia de uma linguagem espec fica para a organiza o quer l gica quer art stica das informa es agrupadas num determinado local da Web o acesso aos dados era poss vel mas n o s informa es ou p ginas de informa

WEB - Repositório Científico do Instituto Politécnico do Porto

Contents

Download Pdf Manuals

Related Search

Related Contents

WEB - Reposit&oacute;rio Cient&iacute;fico do Instituto Polit&eacute;cnico do Porto

Contents

Download Pdf Manuals

Related Search

Related Contents

WEB - Repositório Científico do Instituto Politécnico do Porto