Cyou
From Laboratório MM 5
Contents |
Introdução
The Web is more a social creation than a technical one. I designed it for a social effect—to help people work together—and not as a technical toy. —Tim Berners-Lee, Weaving the Web (1999)
A proliferação mundial da tecnologia, da Internet e o boom dot.com fez com que se procedesse à evolução da criação de páginas para a Web. A explosão da Web 2.0 levou a ter presente os seguintes conceitos: páginas dinâmicas, partilha de conhecimento, formas de interacção, criação e edição de conteúdos, grupos, comunicação (as)síncrona e identidade.
Objectivo do documento
Face a esta realidade, serve o presente documento como suporte ao projecto, que surge no âmbito das unidades curriculares Laboratório Multimédia V, Implementação e Controlo de Projectos e Gestão de Empresas e, que tem por objectivo conceber e desenvolver um website que se insira no contexto Web 2.0. No que diz respeito à sua implementação tem como coordenadores, os docentes Hélder Caixinha e Lícinio Mano.
Definiram-se como objectivos gerais do projecto:
- Apresentação do processo de concepção e desenvolvimento do website;
- Implementação técnica de todas as componentes leccionadas na u.c. Laboratório Multimédia;
- Criação de um website server-side, dinâmico e funcional;
Definiram-se como objectivos específicos:
- Conseguir autonomia no desenvolvimento de layouts para páginas Web;
- Integração da arquitectura das 3 camadas no Website (multitier architecture): armazenamento de dados, lógica e apresentação;
- Criação e conexão à Base de Dados associada à própria aplicação;
- Criação de conteúdos, sofisticação do layout através de ferramentas de CSS, JS e utilização de frameworks;
Visão geral do projecto
Cyou é o nome da rede social que pretende aproximar as pessoas e reconhecê-las em tempo real. Através da API da Google, o utilizador consegue partilhar a sua localização em tempo real, interagindo com os diferentes membros através de mensagens no mural e visualização das suas diferentes localizações.
De forma sucinta, esta apresenta as seguintes funcionalidades:
- Publicação de mensagens no Mural (comunicação assíncrona);
- Edição de dados/perfil;
- Inserção de comentários ao perfil e fotos;
- Serviço de localização do utilizador;
- Acesso ao mapa de localização dos amigos, conhecidos e desconhecidos;
- Procura de localizações;
- Acesso ao sistema de ajuda do tipo FAQ e inserção de novas questões, reguladas por um administrador interno;
Base de dados desenvolvida
“Web users ultimately want to get at data quickly and easily. They don't care as much about attractive sites and pretty design.” —Tim Berners-Lee, 1955
A Base de Dados Cyou armazena os dados de treze tabelas, apresentando como Sistema de Gestão de Base de Dados Relacional, o MySQL.Assim, prosseguiu-se à determinação de:
1.Tabelas
As tabelas apresentam-se como sendo a estrutura básica em que a informação é armazenada. As entidades que foram identificadas no momento em que se repensaram as funcionalidades da rede social, foram:
1.1.Profile
A entidade profile é onde se encontra a informação relativa ao utilizador que acede à rede social. Diferentes tipos de informação são armazenados:
- Informação pessoal que provém do registo na aplicação (ex.: nome, apelido, data de nascimento, descrição);
- Informação de registo e login (ex.: email e password);
- Informação de edição de perfil (ex: fotografia, status);
No que concerne à parametrização de dados, a maior parte dos campos são do tipo varchar, algumas variáveis booleanas como auto-login, gender e active e int como o id_profile e a privacidade.
1.1.1.Friends_profile_AA
Em Web 2.0, encontra-se muito presente o conceito de colaboração. Para tal, é preciso que o perfil do utilizador esteja ligado a outros perfis e é a entidade friends_profile_AA que armazena as informações dessa relação. Os ids de cada perfil são do tipo INT e o estado_amizade, do tipo varchar.
1.2.Location
A entidade location armazena informação relativa à latitude, longitude e a morada definida aquando o registo. Os dados são do tipo float e a morada é do tipo varchar.
1.3.Msg
A tabela com a designação msg armazena a informação relativa a mensagens de mural próprias de cada perfil como a localização, o texto, a pessoa, imagem e o id do profile a que se destina. Os ids são do tipo int e o texto da mensagem são do tipo TEXT, a fim de não haver uma grande limitação de caracteres na mensagem.
1.3.1.Msg_like
De forma a proporcionar a concordância e discordância entre utilizadores, implementou-se o mecanismo de (dis) likes nas mensagens. Assim, é armazenado o id da mensagem, o id do perfil (do tipo int) e a variável booleana like.
1.4.Photo
A tabela photo armazena o id da foto, o id da localização e os atributos próprios para armazenar a fotografia (filename e texto). Como tal, os ids são do tipo int, o filename do tipo varchar (que irá buscar o caminho da imagem) e a descrição/texto do tipo text.
1.4.1.Photo_like
O mesmo mecanismo que se segue para msg_like, passa-se com photo_like. Assim passa a ser armazenado o identificador da fotografia, o id do perfil (do tipo int) e o estado booleano like.
1.5.Plan
Uma nova tabela surge com a integração do tipo de plano escolhido pelo utilizador. Esta irá armazenar o tipo de plano (free e premium) e, também, a data inicial e final em que o utilizador passou a ser premium. Por essa razão em que só se armazena apenas a data inicial e final do que o utilizador é premium, o plano deixa de ser atributo do perfil e faz parte de uma nova tabela. No que diz respeito à parametrização de dados, o id e o tipo de plano são inteiros e a data inicial e final são do tipo date.
1.6.Faq
Uma das formas de prestar auxílio ao utilizador na rede social cyou é através de FAQ. Assim é armazenada a pegunta do tipo text, o estado booleano de activo ou não, nome da pessoa e email (varchar).
1.6.1.Id_categoria
Dado que se pode inserir novas categorias a rotular novas questões no faq, serve a tabela do id da categoria do tipo inteiro e a descrição do tipo varchar.
1.6.2. Resposta_faq
É o administrador que responde às questões de FAQ, sendo necessária uma entidade que armazene o id da resposta, a resposta e o id do perfil. Os ids são do tipo inteiro e a resposta do tipo text.
1.7. Privacy
O utilizador pode controlar a privacidade, indicando o que quer ou não tornar público – control settings (perfil, mensagens de mural, fotografia, localização e amigos). Assim, para as diferentes tabelas, é acrescentado o atributo de privacidade. Estas são dp tipo inteiro.
Uma vez identificadas as entidades e as propriedades armazenadas, segue-se a determinação das relações existentes entre elas, dependências e tabelas de relação.
- - Relações 1:1 do tipo Identifying
- A relação 1:1 existe entre profile e plan (cada utilizador tem um tipo de plano free ou premium e vice-versa); profile e privacy (cada utilizador tem um tipo de privacidade e cada tipo de privacidade diz respeito a um e um só utilizador) e entre faq e resposta_faq (para cada pergunta, só há a resposta do administrador). Estas relações são do tipo identifying dado que as tabelas plan e privacy são dependentes da tabela profile e a resposta_faq da faq.
- - Relações 1:M do tipo Non Identifying
- A relação 1:M do tipo Non Identifying encontra-se presente na relação que existe entre as entidades faq e id_categoria (cada questão apresenta apenas uma categoria e cada categoria diz respeito a várias questões), entre profile e resposta_faq. Ambas as relações são do tipo non identifying porque não existe dependência entre as tabelas. Esta relação também existe entre as tabelas profile e msg, profile e location, msg e photo, photo e location e msg e location.
- - Relações M:M
- A relação M:M existe entre profile e msg (cada utilizador pode enviar várias mensagens e cada mensagem pode ser enviada por vários utilizadores), tendo como tabela intermédia msg_like em se procede ao (dis)like da mesma. A mesma relação repercute-se entre a tabela profile e photo (cada utilizador pode submeter várias fotografias e cada fotografia pode ser submetida por vários utilizadores), tendo como tabela intermédia photo_like em que se procede ao seu (dis)like.
- -Auto-associações
- As auto-associações existentes na base de dados ocorrem nas tabelas msg e profile. No que diz respeito à tabela profile, para representar as amizades entre os diferentes utilizadores, definiu-se uma auto-associação entre id_profiles, armazenando o atributo estado_amizade. No que concerne a tabela msg, há uma auto-associação da mensagem e comentário (Cada mensagem no mural pode ter vários comentários e cada comentário diz respeito apenas a uma mensagem).
Depois da base de dados modelada e a geração do código SQL, procedeu-se à sua implementação (execução de scripts de criação, leitura e carregamento de dados), sua administração e configuração do servidor de base de dados (localhost) e, por fim, ao desenho das queries visualmente através do FlySpeed e editor do Workbench.
2.Queries/Views
As queries são questões que se efectuam para perguntar informação das tabelas. As queries mais utilizadas à base de dados, foram:
- 2.1. Select
O commando SELECT foi utilizado para seleccionar alguma informação da base de dados. Segue-se um exemplos do seu uso e extracção de elementos:
Por exemplo,
<?php
//Create query
$qry="SELECT * FROM profile WHERE email='$login' AND password='$password'";
$result=mysql_query($qry);
//Check whether the query was successful or not
if($result) {
if(mysql_num_rows($result) == 1) {
//Login Successful
session_regenerate_id();
$member = mysql_fetch_assoc($result);
if($member['active']==1){
$_SESSION['SESS_MEMBER_ID'] = $member['id_profile'];
$_SESSION['SESS_FIRST_NAME'] = $member['name'];
$_SESSION['SESS_LAST_NAME'] = $member['last_name'];
session_write_close();
header("location: member-index.php");
exit();
}else{
echo "This account wasn't confirmed. Please check your email"; }
}else {
//Login failed
header("location: login-failed.php");
exit();
}
.....
Fig.2 – Exemplo da selecção de um registo na Base de dados
O exemplo da selecção de registo na base de dados traduz a situação de login. Procedeu-se à selecção de todos os registos da tabela perfil com a condição de email e password serem iguais às variáveis que armazenam os dados do formulario. Caso seja, regenera um novo id de sessão e verifica a condição se a conta foi confirmada ou não existe. Outros exemplos da utilização do comando SELECT, são: o uso de estatísticas, selecção de perguntas e respostas do faq.
- 2.2. Insert
O commando INSERT foi utilizado para adicionar um novo registo na base de dados (um novo utilizador, uma nova mensagem, uma nova pergunta, uma nova localização).
Por exemplo,
<?php
/*SUBMISSÃO DO FORMULÀRIO*/
//Criar INSERT
if (isset($_POST["submit"]) && $_POST["submit"] != "" ){
$perg_new = "INSERT INTO faq (pergunta, nome, email, active, categoria_id) VALUES('$question','$name','$email', '0', '1')";
$rslt = @mysql_query($perg_new);
//Verificar se a query foi bem sucedidada ou não
if($rslt) {
echo "<h1>yes!!</h1>";
}else {
die("Query failed 222222");
}
}
?>
Fig.3 – Exemplo da inserção de um registo na Base de dados
O exemplo do INSERT exarado anteriormente foi a concretização da ligação que foi feita através do formulário de questões submetidas pelos utilizadores à base de dados. Assim, aquando a submissão do formulario, actualizou-se os atributos da base de dados: pergunta, nome, email, active e o identificador da categoria com os valores dos diferentes campos do formulário e active=0 e com o identificador da cartegoria=1 (Sem categoria). Depois cabe ao administrador actualizar na sua página a categoria e responder à questão, passando a questã a estar activa e exposta na página de FAQ.
- 2.3. Update
O commando UPDATE foi utilizado para actualizar registos na tabela. Este comando foi utilizado na página de FAQ, no registo de utilizadores e edição de perfil.
Por exemplo,
<?php
$perg_update = "
UPDATE faq
SET pergunta = \"$perg\", active = \"$faqactive\"
WHERE id_faq = \"$faqid\"";
$updatingper=mysql_query($perg_update) or die( "An error has ocured: " .mysql_error (). ":" .mysql_errno ());
//Verificar se a query foi bem sucedidada ou não
if($updatingper) {
echo "<h1>Question was updated!</h1>";
//session_write_close();
//exit();
}";
?>
Fig.4 – Exemplo da actualização de um registo na Base de dados
O exemplo do UPDATE exarado anteriormente actualiza os campos da pergunta e se está activa ou não, tendo por base o seu id. Este é o caso em que o administrador edita, modificando cada questão.
Tendo presente a arquitectura multitier de aplicações para a Web, a primeira camada “Data Tier” ficou completa com o armazenamento da base de dados e feito o forward engineer no Workbench e utilizando o MySQL , prosseguiu-se para a camada “Logic Tier” em que se tomaram decisões e avaliações ao nível lógico e se estabeleceu a ligação da base de dados com a página final apresentada ao utilizador final. Esta ligação foi feita através da linguagem PHP. Por último, a apresentação da página ao utilizador (Presentation tier) é apresentada utilizando as tecnologias: HTML, Javascript, AJAX, JQuery.
Assim, este relatório localizou-se, até ao momento, na camada “Data Tier”. Segue-se a camada “Logic Tier” muito presente em formulários e a camada “Presentation Tier” será detalhada no ponto 3.3.Integração com outras tecnologias.
3.Formulários
Posteriormente às queries da Base de Dados, seguiu-se, então, a interacção com a mesma quer no preenchimento de formulários (input de dados por parte do utilizador) quer através da extracção de informação da base de dados para as páginas Web.
O esquema anterior ilustra o funcionamento da interacção estabelecida entre o utilizador final e a Base de dados, ao longo de toda a aplicação. As actividades que o utilizador concretiza ao longo da aplicação, consiste em criar (create), ler (read), actualizar (update) e apagar (delete): CRUD.
Por sua vez, a base de dados devolve e mostra a leitura de dados, consoante as permissões dos utilizadores.
4.Interacção PHP- Base de Dados
Nas diferentes páginas PHP, a ligação à base de dados é feita através da página config.php. Como se trata de uma ligação primordial que compromete o funcionamento de toda a aplicação, esta é imposta através do require_once (), devolvendo um erro fatal, caso não funcione. Nesse ficheiro, consta:
- - A definição do servidor, utilizador, password e nome da base de dados;
- - Ligação ao servidor MySQL e o seleccionar da Base de Dados;
- - Devolução de mensagens de erro, caso não consiga a ligação ao servidor ou a conexão à base de dados;
Implementação
“A good idea is about ten percent and implementation and hard work and luck is 90 percent" —KAWASAKI, Guy
Descrição das principais funcionalidades da aplicação Web
Registo e Login
O registo e login do utilizador é “a gateway ou o passaporte” que permite o acesso à maior parte dos conteúdos e actividades na rede social. Os utilizadores que não estiverem logados, só conseguem aceder à homepage, informações sobre a rede social e FAQ.
O registo na rede social atravessa 5 etapas: Login, Information, Places, Privacy e Plans. Este consiste num conjunto de formulários em que o utilizador vai inserindo a sua informação e contacto pessoal. De seguida, é solicitada a validação da conta por email, podendo o utilizador fazer login.
No formulário de login, estabelece-se a comparação com a introdução de dados feita pelo utilizador com a do registo presente na Base de Dados. É de referir que as passwords são codificadas/encriptadas em md5, ou seja, num conjunto de caracteres de A a Z, comparáveis, de forma a que apenas o utilizador saiba a password e não todos os que tentem aceder à base de dados.
Atente-se ainda na importância do conceito de sessão, após o login há a regeneração da sessão (id_sessão), diferente do id_utilizador. Caso não haja a variável de sessão, o acesso ao perfil é negado.
Ainda no login, há a actualização do status do utilizador na BD, verificando se o id da sessão equivale ao id do perfil, verificando a (in)actividade da sua conta.
Em período de inactividade, se o utilizador fechar o browser, o utilizador mantém-se na página de perfil, permitindo estar logado.
Criação / Edição de dados de perfil
Após o registo do utilizador, é-lhe atribuído um perfil. Este pode, à posteriori, modificar as suas informações pessoais, efectuar o controlo da sua visibilidade e fazer o upload de imagem.
Publicação de mensagens no mural (comunicação assíncrona)
Acompanhada da partilha da sua localização, o utilizador pode inserir uma mensagem no seu mural. Submetendo-a, esta gera automaticamente o seu registo na Base de Dados identificada pelo seu ID e, posteriormente, é mostrada a mensagem submetida, o tempo e local do utilizador.
Inserção de fotos e comentários
O registo do utilizador permite ainda submeter fotografias e comentar. O upload de fotos é feito através da biblioteca GD para arrecadar os ficheiros das fotografias e o utilizador procede ao preenchimento de um formulário e selecção do caminho (“path”) da fotografia. Após a sua submissão, há o redimensionamento das imagens: Small Picture e Médium Picture.
Verificar os utilizadores que se encontram online
A verificação de quem está online ou off, faz parte das funcionalidades da rede social. É muito importante a inclusão destes OPIs-Online presence indicators, para que o utilizador saber o estado de quem procura e os possíveis respondedores das mensagens do seu mural. É de referir que, uma vez que este trabalho surge no âmbito académico, apresenta como ponto de fraqueza, apresentar (através de uma query à base de dados), todos os utilizadores. No entanto, a equipa multimédia tem consciência que com o alargar do número de utilizadores, numa plataforma estilo facebook – este sistema arrebentaria com o servidor. Porém, optou-se por mostrar todos os utilizadores e, à posteriori, proceder à sua filtragem, dado que seria a forma mais rápida de preencher o nosso objectivo.
Serviço de localização do utilizador
No que concerne à localização, o utilizador pode verificar no momento em que inicia a sua sessão e acede à página de perfil a sua localização em tempo real, através da integração da API do Google Maps (geo-referenciação) e a associação das coordenadas da localização ao utilizador.
Acesso ao mapa de localização dos amigos, conhecidos e desconhecidos
O utilizador, para além da sua localização, pode verificar quem o rodeia (amigos, conhecidos e desconhecidos), dependentemente da distância.
Sistema de ajuda: FAQ
O utilizador obtém ajuda pelo acesso a perguntas e respostas frequentes. Este pode inserir uma nova questão que não esteja ainda comtemplada e obterá reposta pelo Administrador. A questão, é posteriormente inserida no FAQ, com a inclusão da pergunta e resposta.
Pesquisa
O sistema de pesquisa do Website é feito com recurso à tecnologia AJAX a fim de verificar, em permanência a existência da palavra inserida pelo utilizador, em todo o Website. Serão apresentados os nomes dos utilizadores registados.
Histórico
O utilizador que apresenta um tipo de plano Premium pode verificar o histórico de localizações dos seus contactos actualizado.
Mapa de páginas
> FALTA AQUI
Todas as páginas do website seguem uma estrutura idêntica: a inclusão de elementos que se mantem no cabeçalho e footer e a inclusão de algumas funções que rentabilizam código e utilizadas nas diferentes páginas – por exemplo, conexão à base de dados. Estas encontram-se separadas numa página diferente, com recurso a funções inclusivas, como require_once();.
Em algumas páginas, é necessário o conceito de sessão para se estabelecer a diferenciação entre as páginas restritas (restrit acess page) de domínio privado e as páginas de domínio público. Em termos de acesso às diferentes páginas (access levels), pode-se distinguir diferentes tipos de utilizadores:
- 1.Utilizador Admin
- Este utilizador acede a todas páginas, podendo editar a página de perfil, tal como o utilizador com login. Acresce o facto que visualiza o histórico de localizações como o utilizador premium e tem uma página específica quando acede à página de faq, podendo editar as perguntas e respostas, bem como, inserir.
- 2.Utilizador Premium
- Este utilizador acede a todas páginas, podendo editar a página de perfil, tal como o utilizador com login. Acresce o facto que visualiza o histórico de localizações.
- 3.Utilizador com Login
- Este utilizador acede a todas páginas, podendo editar a página de perfil. Porém não lhe é permitido visualizar o histórico de localizações, uma vez que não apresenta o plano de utilizador premium.
- 4. Utilizador sem Login
- Este utilizador tem apenas acesso à homepage, páginas de apresentação de informação, podendo inserir questões no formulário.
Procederemos, então, a uma breve descrição das diferentes páginas:
Homepage
A homepage é a página que convida à participação dos utilizadores e à exploração. Esta apresenta o login, a área de registo, slider e informação relativa à rede social. Através da mesma, o utilizador consegue percepcionar as diferentes acções necessárias para o acesso às diversas páginas (Create your account, Know who is where and when, Choose your plan) e as funcionalidades e caracterização da rede social.
Registo de utilizadores
O registo de utilizadores é feito através do preenchimento de vários formulários. Os diferentes campos são validados por Javascript e Ajax e as animações contempladas são recorrentes de bibliotecas de jQuery. Para além da validação (cumprimento do número de caracteres, confirmação da password, etc), também é verificado se o utilizador já existe e se encontra registado na rede social, procedendo ao aviso de utilizador já existente.
Faq
O Frequently-Asked Questions (FAQ) é uma das estruturas mais comuns de conversação/dialogo que visa auxiliar o utilizador, caso necessite de ajuda. Caso o utilizador tenha uma questão que não esteja contemplada nas FAQ, pode adicionar a sua nova questão e esta por sua vez irá ser respondida pelo administrador da página. Sendo o login efectuado pelo administrador, este encontra a mesma página do utilizador, porém editável.
User-location
A página user-location que permite que o utilizador controle a localização exibida na sua página de perfil. Este pode escolher uma de duas opções:
- 1. Aceitação da última localização do utilizador ( variáveis latitude, longitude, localização, cidade e data);
- 2. Inserção da localização manual, inserindo o endereço e verificando a sua localização no Google maps.
Perfil
A página de Perfil é onde se encontra presente o conceito de identidade social, desde a exposição da fotografia, nickname, idade, género, localização e demais informações do contacto pessoal do utilizador. É a página aonde, também se apresentam os OPIs - Online presence indicators, verificando quem está ausente e presente para além do mapa da sua localização e a troca de mensagens no mural. A comunicação entre utilizadores estabelece-se da seguinte forma: 1. I exist. 2. I’m Ok. 3. You exist 4.You’re OK. 5. The channel is open. 6.The network exists 7.The network is active 8. The network is flowing.
A página de perfil encontra-se centralizada na partilha e visualização das diferentes localizações. Porém, apresenta também informação e edição de perfil, estatísticas, inserção de mensagens no mural (envio e visualização de mensagens através de comandos de SELECT e INSERT), visualização de amigos por distâncias e suas fotografias de perfil, membros online e offline e histórico.
3.2.1.Server Behaviours utilizados
Os server behaviours permitema manipulação de dados de diferentes páginas. É de referir que a equipa multimédia optou por inserir o código manualmente ao invés de usufruir das funcionalidades existentes do dreamweaver. Porém, as funcionalidades programadas equivalem aos seguintes server behaviours:
- 1.Insert Record
- O server behaviour Insert Record foi utilizado na inserção de novos utilizadores na rede social, novas mensagens no mural, localização, novas questões e respostas do FAQ e inserção de dados do utilizador captados através de formulários para a Base de Dados. Exemplos deste server behaviour foram apresentados, anteriormente, com o exemplo da query INSERT INTO.
- 2.Update Record
- O server behaviour Update Record foi utilizado na actualização da informação dos utilizadores na rede social, edição da localização e respostas do FAQ. Exemplos deste server behaviour foram apresentados, anteriormente, com o exemplo da query UPDATE.
- 3.Display Record Count
O server behaviour Record Count foi utilizado na contagem do número de localizações em cada país, para fins estatísticos. Por exemplo:
$qPais = "SELECT country FROM location GROUP BY country";
$sPais = mysql_query($qPais) or die( "An error has ocured: " .mysql_error (). ":" .mysql_errno());
$Pais = mysql_fetch_assoc($sPais);
do{
$showPais = $Pais['country'];
echo $showPais;
echo "<br />";
}while ($Pais = mysql_fetch_assoc($sPais));
$qPaiscount = "SELECT count( * ) as country FROM location Group By country";
$sPaiscount = mysql_query($qPaiscount) or die( "An error has ocured: " .mysql_error (). ":" .mysql_errno());
$Pais2 = mysql_fetch_assoc($sPaiscount);
do{
$showPais2 = $Pais2['country'];
echo $showPais2;
echo "<br />";
}while ($Pais2 = mysql_fetch_assoc($sPaiscount));
A query anterior efectua o agrupamento de localizações por países e a query $Paiscount exibe o número de localizações de cada pais.
- 4.Display Ending Record Number
O server behaviour Display Ending Record Number foi utilizado na exibição dos últimos utilizadores registados na rede social. Por exemplo:
//Query 5 últimos utilizadores a registarem-se na rede social
$util5 = $numbutilizadores - 5;
$qUtil = "Select name From profile ORDER BY id_profile DESC LIMIT $util5";
$sUtil = mysql_query($qUtil) or die( "An error has ocured: " .mysql_error (). ":" .mysql_errno());
$Util = mysql_fetch_assoc($sUtil);
do {
$showutil = $Util['name'];
echo $showutil;
echo "<br />";
}while ($Util = mysql_fetch_assoc($sUtil));
echo "<br />";
A query exibe os últimos cinco utilizadores a registarem-se na rede social.
5.Display Total Records
- O server behaviour Update Record foi utilizado em todas as queries com o comando SELECT * FROM. Este server behavior foi muito utilizado para devolver o registo de todos os utilizadores, questões, etc...
6. Dynamic Form Elements
- No que diz respeito a servers behaviors do tipo dynamic form elements, estes foram usados também constantemente para a apresentação de informação oriunda da Base de Dados
7.User Authentication (Login User, Restrict Access to Page, Logout User, Check new user)
- O conjunto de behaviors do User Authentication são utilizados nos diferentes acessos às páginas. Por exemplo,
$qry="SELECT * FROM profile WHERE email='$login' AND password='".md5($_POST['password'])."'";
$result=mysql_query($qry);
//Verifica sucesso da query
if($result) {
if(mysql_num_rows($result) == 1) {
//Login COM sucesso
session_regenerate_id();
$utilizador = mysql_fetch_assoc($result);
if($utilizador['active']==1){
// QUERY para actualizar o status do utilizador na BD
$updt="UPDATE profile SET status='1', date_status= NOW() WHERE email='$login'";
$resultUPDT=mysql_query($updt) or die( "An error has ocured: " .mysql_error (). ":" .mysql_errno ());
$_SESSION['SESS_MEMBER_ID'] = $utilizador['id_profile'];
session_write_close();
header("location: member-profile.php");
exit();
}else{
// conta ainda não activa (a implementar posteriormente - numa primeira fase todas as contas estão activas automáticamente)
echo "This account wasn't confirmed. Please check your email";
}
}else {
//Login SEM sucesso
header("location: login-failed.php");
exit();
}
}else {
die("Query failed");
}
?>
Este trecho de código é exemplifica o funcionamento da área de login em que há a comparação das variáveis email e password, a verificação do estado activo e o sucesso das queries.
3.2.2.Recordsets/Queries utilizados
Os recordsets são estruturas de dados armazenados num grupo de registos da base de dados. A ligação com esta última é feita através de queries. Optou-se por concretizar os recordsets manualmente e estes são utilizadas nas páginas de activação dos utilizadores (activate_key), faq, exucação do login (comparação entre os dados dos dados inseridos na base de dados e o formulário de login),etc.
Para a criação dos diferentes recordsets, seguiram-se os passos:
- 1.Armazenar a query numa variável;
- 2.Envio de uma query para o banco de dados através de mysql_query();
- 3.Verificação se há o envio da query para o banco de dados;
- 4.Recuperação da query como array associativo mysql_fetch_assoc();
- 5.Impressão dos parâmetros desse “array” proveneniente da query;
- 6.Impressão do erro caso não se verifique a condição;
3.2.3.Parâmetros passados entre páginas
No decorrer do projecto, optou-se, maioritariamente, pelo método POST ($_POST) para a passagem de parâmetros entre páginas, uma vez que este método é utilizado quando a informação contida pelos parâmetros é relevante em termos de segurança ou quantidade de caracteres (passa mais 255 bytes que o método GET).
Por exemplo,
- -Submissão do formulário de FAQ, uma vez que é necessário a passagem de um grande número de caracteres para passar nome, email e questão;
- -Formulário de login e registo, dado que por questões de segurança, não poderão ser visivéis por URL;
//------variáveis passadas pelo POST
if (isset($_POST["login"]) && $_POST["login"] != "" ){
$login = clean($_POST['login']);}
if (isset($_POST["password"]) && $_POST["password"] != "" ){ $password = clean($_POST['password']);}
Integração (e.g. Flash, AJAX Frameworks, etc)
No que diz respeito à integração com outras tecnologias, é utilizado AJAX, jQuery e Javascript para a validação de formulários, apoio ao utilizador em formulários (tooltips), login, lista de utilizadores/amigos, motor de pesquisa e slideshow. A utilização destas tecnologias conferem interactividade entre as diferentes páginas e dinamismo.
A API do Google Maps foi utilizada para a exibição da localização dos utilizadores no mapa. Esta API é fundamental para fazer face à finalidade da rede social, dado que vai de encontro ao objectivo de fornecer a localização, em tempo real, do utilizador.
Além da estrutura HTML (inclusive versão 5.0), todo o conteúdo é editado e formatado em CSS (inclusive versão 3) – com recurso a classes e ids e algumas animações de objectos, são feitas com recurso a Javascript : exemplo de slideshow, acordion do faq, colocação da morada online e mensagem de boas vindas.
É de referir, também, que utilizou-se a extensão JSON (Javascript Object Notation) a fim de implementar o intercâmbio de formatos e implementar a pesquisa dinâmica de utilizadores.
Desenvolvimentos Futuros
“We realize that we can still play better. Were still improving. We make advances every day and we continue to make advances.” BELSKY, Andrew
Não foi possível implementar todas as funcionalidades inicialmente previstas pela equipa multimédia, no decorrer do projecto. A falta de tempo e a emergência de alguns erros cuja resolução foi morosa, constituíram os principais factores. Segue-se, então, a citação e a explicação de algumas das funcionalidades:
- - Slider Km’s
- Na área do perfil de utilizador, há uma listagem de todos os utilizadores registados na rede social, ordenados pela sua proximidade e distância, em relação ao utilizador final. O objectivo da slider por Kms, seria o utilizador, também, poder controlar a visibilidade dos restantes utilizadores com a distância compreendida nesse intervalo.
- - Distinção entre género e estado dos utilizadores no mapa
- De forma a optimizar a apresentação das diferentes localizações dos utilizadores no mapa, pensou-se em efectuar a sua distinção por género e estado (cor e simbologia diferente).
- - Estatísticas e integração com o Google Analytics
Apesar de se terem feito algumas estatísticas com recurso a queries à base de dados, é objectivo da equipa multimédia a integração dos dados seleccionados da base de dados com a aplicação do Google Analytics. Desta forma, além dos resultados, há a exibição de gráficos representativos dos dados obtidos.
- FB Connect (Open Inviter)
Na área de login, pensou-se em estabelecer a ligação/conexão com o facebook, permitindo o utilizador logar-se através da conta do facebook e a importação de contactos/amigos, não sendo necessário o registo na rede social. Para alcançar esse objectivo, seria utilizada a aplicação Open Inviter para efectuar a importação de contactos.
- Chat
Com o objectivo de se estabelecer a comunicação síncrona entre os diferentes utilizadores da rede social, pensou-se na integração de um chat (comunicação em tempo real).
- Notificação entrada amigo online, mensagem/foto e nova pessoa nas redondezas
Com vista a reforçar a identidade social do utilizador e o feedback relativo ao estado dos outros utilizadores e as diferentes acções na rede social, proceder-se-á à inserção de um sistema de notificações para cada utilizador.
- CSS e aplicação para mobile
Considerando a ideia inicial do projecto em que se estabelece a integração de uma aplicação de realidade aumentada instalada em Android e a sua ligação com o registo dos utilizadores na rede socal, é necessário desenvolver o CSS da rede social para mobile e o envio de coordenadas e posicionamento dos utilizadores.
- Galeria de fotografias
Apesar de se ter o upload de imagens a funcionar e a sua exposição na área de perfil, pensou-se na integração de uma galeria de fotografias em que o utilizador pudesse efectuar a sua gestão.
Conclusões
“A project is complete when it starts working for you, rather than you working for it.” ALLEN, Scott
No término deste relatório, pode-se concluir que grande parte dos objectivos a que nos propusemos foram conseguidos. Nem sempre é fácil conceptualizar uma ideia e desenvolvê-la. Porém, efectuaram-se estudos prévios, ultrapassaram-se barreiras, previram-se situações, pensando sempre no objectivo final.
Ao longo do desenvolvimento do projecto, pôde-se concluir que o conceito Web 2.0 encontra-se presente em vários serviços de interacção com o utilizador e, insere-se na nova geração da plataforma Web. Torna-se um autêntico desafio criar algo apelativo, funcional e diferenciar-se do que já existe na «teia» da Internet. A equipa multimédia apresentou como meta que o website Cyou apresentasse coerência visual, fosse intuitivo, tivesse uma forte presença online e o ambiente fosse de colaboração.
De um modo geral, o projecto implicou muitas horas de trabalho não proporcional ao número reduzido de elementos na equipa. Procedeu-se a uma ordenação de tarefas por nível de importância/prioridade.
Este projecto contribuiu para que se percebesse o funcionamento das aplicações Web numa perspectiva macro, a complexidade do desenvolvimento de páginas dinâmicas e a combinação de diferentes tecnologias: Php, Ajax, Jquery,etc. . Considerando a sua complexidade, pensa-se que este atingiu níveis satisfatórios, porém, o mesmo estará sujeito a alguns aperfeiçoamentos, apresentando novas funcionalidades e adaptando-se ao desenvolvimento e às tendências tecnológicas.
Por fim e em jeito de nota conclusiva, a criatividade ao nível gráfico, a prática e aprendizagem do PHP, a alteração de código de diferentes fontes , o aumento de índices de usabilidade e navegabilidade próprias da Web e a integração de várias aplicações resumem as competências adquiridas com este trabalho.
Bibliografia
Livros
- CRUMLISH, Christian; MALONE, Erin, Designing Social Interfaces-Principles, Patterns and Practices for Improving the User Experience, O’Reilly. ISBN:978-0-596-15492-9
- GILMORE, JASON – Beginning PHP and MySQL: From Novice to Professional. 3ª ed. EUA: Apress, 2008. ISBN: 1590598628.
- WHITEHORN, Mark – Inside Relational Databases with Examples in ACCESS. 2ª ed. EUA.: Springer, 2001. ISBN: 1852334010.
- POWERS, David – PHP Solutions – Dynamic Web Design Made Easy. ISBN-13 (pbk): 978-1-59059-731-6
Web
Glossário
Internet- O maior conjunto de redes de dados do mundo, tendo em comum apenas a utilização do protocolo TCP/IP.
boom dot.com- Especulação nas bolsas de valores, no final dos anos 90, em relação às empresas baseadas na Internter. Dot.com enterprises. No contexto, refere-se ao crescimento da Internet comercial, da World Wide Web.
Web 2.0- Segunda geração de comunidades e serviços, assumindo o conceito Web como uma plataforma. Envolve wikis, redes sociais e Tecnologias da Informação.
Páginas dinâmicas- Páginas dotadas de flexibilidade na alteração do seu conteúdo, recorrem a bancos de dados ou formas de armazenamento de dados específicos. São o exemplo de páginas que utilizem linguagens de programação na base do servidor, como o PHP.
Website server-side- Website que necessita de um servidor para efectuar a tradução da programação para a página do cliente. Essa trradução é feita pelo servidor XAMPP do desenvolvedor Apache.
Multitier Architecture- Arquitectura de aplicações web em 3 camadas: Data Tier, Logic tier e Presentation tier.
Cascading Style Sheets/CSS- linguagem de folhas de estilo usado para a apresentação visual e formatação de um focumento escrito.
Javascript /JS- Linguagem do tipo interpretado, passível de ser lida nos browsers WWW mais utilizados do mundo e interpretada directamente no bowser.
Frameworks- conjunto de bibliotecas reutilizáveis ou classes para um sistema de software.
API/Application Programming Interface- conjunto de rotinas e padrões estabelecidos por um software para a utilização das suas funcionalidades por programas aplicativos.
Índice Remissivo
| ÍNDICE REMISSIVO | ||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
|
