Help!

From Laboratório MM 5

(Difference between revisions)
Jump to: navigation, search
(→Base de Dados desenvolvida)
(→Desenvolvimentos Futuros)
 
(12 intermediate revisions not shown)
Line 17: Line 17:
== '''Base de Dados desenvolvida''' ==
== '''Base de Dados desenvolvida''' ==
-
[[File:printbd.png|600px|thumb|right|Help Base de Dados]]
+
[[File:bdprint.png|600px|thumb|right|Help Base de Dados]]
Como observado na figura, a base de dados é composta por 13 tabelas, no entanto, estas relacionam-se e umas são especificações de outras. Assim sendo, destacam-se as seguintes entidades:
Como observado na figura, a base de dados é composta por 13 tabelas, no entanto, estas relacionam-se e umas são especificações de outras. Assim sendo, destacam-se as seguintes entidades:
Line 33: Line 33:
'''3.2. Mapa de páginas'''
'''3.2. Mapa de páginas'''
-
3.2.1. Server Behaviours utilizados
 
-
3.2.1. Recordsets/Queries utilizados
 
-
3.2.1. Parâmetros passados entre páginas
 
-
'''3.3. Integração (eg: Flash, AJAX, Frameworks, etc)'''
 
 +
[[File:Mapahelp.png|600px|thumb|right|Mapa de páginas]]
 +
'''3.2.1. Server Behaviours utilizados'''
 +
Os Server Behaviours são ferramentas automáticas do Dreamweaver que permitem a gestão de conteúdos mais fácil. Contudo, no projeto optámos por não utilizar essa "ajuda" do Dreamweaver escrevendo o código todo de raiz. No entanto os "behaviours" mais utilizados foram:
-
== '''Desenvolvimentos Futuros''' ==
+
'''. Insert Record:''' permite inserir registos na base de dados;
-
Dado às restrições de tempo que nos foram impostas, ainda ficaram algumas funcionalidades por implementar que considerámos de baixa prioridade. Para começar gostaríamos de desenvolver a página em várias línguas (nomeadamente Português, Francês e Espanhol – decidimos por desenvolver em Inglês dado o seu carácter universal). A área pessoal do utilizador poderá sofrer uma evolução no sentido de ter um relógio alarme e um calendário onde o estudante poderá marcar exames, trabalhos e outros lembretes. No futuro, gostaríamos também de desenvolver um sistema de upload de imagens mais elaborado, em que o utilizador pudesse fazer o crop à foto que faz o upload, e ainda permitir o upload de mais de uma foto por post para que fosse criada uma galeria.
+
'''. Update Record:''' permite editar e atualizar os registos na base de dados previamente criados;
 +
'''. Delete Record:''' permite eliminar registos na base de dados;
 +
'''. Restrict Page Access:''' permite verificar se existe uma sessão de utilizador iniciada. Caso não exista o utilizador é redirecionado para o index de modo a efetuar o log in, caso exista, o utilizador tem acesso à página a que pretende aceder;
 +
 +
'''. LogIn e LogOut:''' permite o utilizador iniciar ou terminar uma sessão;
 +
 +
'''. Repeat Region:''' permite utilizar de uma forma dinâmica o conteúdo de um recordset;
 +
 +
'''. Dynamic Text Field:''' permite escrever no value dos inputs informação da base de dados;
 +
 +
 +
'''3.2.1. Recordsets/Queries utilizados'''
 +
 +
Para este projeto foram utilizados três tipos de queries diferentes: query complexa com um switch; query simples para um parâmetro estático; query dinâmica.
 +
 +
A query complexa com um switch é utilizada sempre que queremos inserir, modificar, pesquisar, etc., dados na tabela post e em cada tabela de especificação das categorias:
 +
 +
switch($cat) {
 +
 +
case 1:
 +
 +
$query_mind = "INSERT INTO mind (post_id_post, conteudo) VALUES ('{$id_anterior}', '{$mind_desc}')";
 +
 +
//echo $query_mind;
 +
 +
if(mysql_query($query_mind, $connection)){
 +
 +
//redirect_to('everything.php');
 +
 +
}
 +
 +
//if query fails then it show error message
 +
 +
else{
 +
 +
//Display error message
 +
 +
echo "subject creation failed";
 +
 +
die("Upload error". mysql_error());
 +
 +
}
 +
 +
break;
 +
 +
 +
case 2:
 +
 +
$query_receita= "INSERT INTO receita (post_id_post, preparacao, tempo, custo, ingrediente) VALUES ('{$id_anterior}', '{$preparacao}', '{$tempo}', '{$custo}', '{$ingredientes}')";
 +
 +
//echo $query_receita;
 +
 +
if(mysql_query($query_receita, $connection)){
 +
 +
//redirect_to("everything.php");
 +
 +
}
 +
 +
//if query fails then it show error message
 +
 +
else{
 +
 +
//Display error message
 +
 +
echo "subject creation failed";
 +
 +
die("Upload error". mysql_error());
 +
 +
}
 +
 +
break;
 +
 +
...
 +
}
 +
 +
 +
As queries simples estáticas consistem na definição de variáveis que poderão ser utilizadas mais tarde:
 +
 +
 +
$user_query = "SELECT * FROM utilizador WHERE id_utilizador = $id_user";
 +
 +
$query_user = mysql_query($user_query, $connection);
 +
 +
if(!$query_user) {
 +
 +
die("Connection error:".mysql_error());
 +
 +
}
 +
 +
$rs_user = mysql_fetch_array($query_user);
 +
 +
$username = $rs_user['username'];
 +
 +
$name = $rs_user['nome'];
 +
 +
 +
Definimos primeiro a query em sql, depois de executarmos a query criamos um recordset e de seguido definimos variáveis de acordo com o que pretendemos para "ir buscar" a informação do recordset.
 +
 +
 +
Por fim, as queries de utilização "dinâmica" definem-se por terem um ciclo while que percorre as colunas todas da tabela consoante o seu "cumprimento":
 +
 +
 +
$result_mind = mysql_query("SELECT * FROM mind WHERE post_id_post = $post_id", $connection);
 +
 +
if(!$result_mind){
 +
 +
die("Database query failed:".myql_error());
 +
 +
}
 +
 +
while($row_mind = mysql_fetch_array($result_mind)){
 +
 +
$conteudo=$row_mind["conteudo"];
 +
 +
 +
 +
build_mind();
 +
 +
};
 +
 +
 +
'''3.2.1. Parâmetros passados entre páginas'''
 +
 +
A passagem de parâmetros entre páginas foi feita através de dois métodos que se definem no processamento do formulário: method e post.
 +
 +
Como o método get utilizar o URL para passar parâmetros, foi utilizado quando apenas queríamos passar informação sobre o id de um utilizador para aceder ao seu perfil, para efetuar o follow e unfollow dos utilizadores e ainda para passar o id do post para se poder ver o post pretendido.
 +
 +
<a href="view_profile.php?id_user=<?php echo $rs_posts['id_utilizador'];?>" class="view_author">
 +
 +
Assim estamos a dizer que ao clicarmos neste link o url vai ser alterado para aparecer o id do utilizador em questão e assim ser redirecionado para a sua página pessoal.
 +
 +
Na página "view_profile.php" definimos uma variável:
 +
 +
$id_user = $_GET['id_user'];
 +
 +
que vai buscar ao url o id do utilizador em questão para realizar as outras queries.
 +
 +
 +
Quanto ao método post, este foi utilizado sempre que queríamos passar informação ou demasiado importante ou demasiado grande para caber no url. É o caso dos formulários de inserção de dados na base de dados, update, confirmação de dados.
 +
 +
 +
'''3.3. Integração (eg: Flash, AJAX, Frameworks, etc)'''
 +
 +
Neste projeto para além da utilização de uma biblioteca de jquery que permite vários eventos como slide-down, slide-up, utilizámos AJAX para apresentar os resultados da pesquisa de filtros sem ser necessário recarregar a página.
 +
 +
== '''Desenvolvimentos Futuros''' ==
 +
 +
Dado às restrições de tempo que nos foram impostas, ainda ficaram algumas funcionalidades por implementar que considerámos de baixa prioridade. Para começar gostaríamos de desenvolver a página em várias línguas (nomeadamente Português, Francês e Espanhol – decidimos por desenvolver em Inglês dado o seu carácter universal). A área pessoal do utilizador poderá sofrer uma evolução no sentido de ter um relógio alarme e um calendário onde o estudante poderá marcar exames, trabalhos e outros lembretes. No futuro, gostaríamos também de desenvolver um sistema de upload de imagens mais elaborado, em que o utilizador pudesse fazer o crop à foto que faz o upload, e ainda permitir o upload de mais de uma foto por post para que fosse criada uma galeria. Outra ideia a implementar seria o envio automático de uma "newsletter" semanal para cada utilizador com informação dos novos posts criados pelos utilizadores que segue. Esta opção não só iria motivar o utilizador a utilizar a plataforma, como iria mante-lo informado das novidades. Gostaríamos ainda de implementar uma página "Following" onde estivessem os posts das pessoas que o utilizador está a seguir. Por fim, gostaríamos de melhorar a validação e feedback de todo o website.
== '''Conclusões''' ==
== '''Conclusões''' ==
Line 53: Line 199:
== '''Bibliografia''' ==
== '''Bibliografia''' ==
 +
 +
W3Schools Online Web Tutorials - http://www.w3schools.com/
 +
 +
Lynda.com - http://www.lynda.com/
 +
 +
Jquery slide - http://jquery.malsup.com/form/
 +
 +
Jquery plugins - http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements
 +
 +
Ajax div function - http://kokeshnet.com/wordpress/?p=186

Latest revision as of 08:40, 20 January 2012

Contents

Introdução

Este projeto surge no âmbito da disciplina de Laboratório Multimédia 5, do terceiro ano da licenciatura em Novas Tecnologias da Comunicação da Universidade de Aveiro, e tem como objectivo a concepção de uma rede social baseada em princípios da Web 2.0, com recurso às tecnologias aprendidas durante o semestre, nomeadamente PHP e MySql.


1.1. Objetivos do documento

Este relatório consiste na exposição dos diferentes processos e etapas inerentes à concepção da rede social HELP!, assim como as dificuldades encontradas e perspectivas futuras.

1.2. Visão geral do projeto

Com o intuito de encontrar um tema atual e que fosse útil no dia-a-dia das pessoas, após uma fase de brainstorming decidimos optar por algo relacionado com os estudantes. Tendo em conta as dificuldades que os estudantes têm a níveis económicos, sociais, académicos e pessoais, surgiu a ideia de desenvolver uma interface de ajuda para os mesmos. O projeto, designa-se de “HELP!”, e tem como principal objectivo constituir uma rede social de e para estudantes, em que cada pessoa se regista e pode procurar ajuda ou ajudar os outros. Definiram-se quatro categorias principais (Mind (nível pessoal), Food (receitas), Entertainment (entretenimento) e Fitness (exercício físico), e qualquer pessoa poderá efetuar um post em cada categoria, ou então procurar ajuda, consoante o que precisa. Tal como em qualquer rede social, e tendo em conta os objetivos da disciplina, o utilizador pode criar informação, ler, editar e eliminar (CRUD: create, read, update, delete).


Base de Dados desenvolvida

Help Base de Dados

Como observado na figura, a base de dados é composta por 13 tabelas, no entanto, estas relacionam-se e umas são especificações de outras. Assim sendo, destacam-se as seguintes entidades:

Utilizador: nesta tabela estão presentes os campos que dizem respeito ao utilizador que se registar na plataforma. Existem três tipos de utilizadores: não-registados, registados, administradores. Os não registados naturalmente não constam como dados na BD. Para além disso, cada utilizador pode seguir um ou mais utilizadores sem que estes tenham de aprovar o relacionamento ou não. Ainda, um utilizador pode seguir alguém que não o segue de volta (tabela follow).

Post: cada post poderá conter um título, data de publicação, foto, um url e um autor. Cada post é feito por apenas um autor e cada autor poderá ter mais do que um post. Os campos anteriormente mencionados são comuns a todo o tipo de posts, ou seja, independentemente da categoria a que pertencem, todos os posts têm aqueles campos. No entanto, houve necessidade de criar tabelas que permitissem a especificação dos posts consoante a categoria escolhida: exercício, mind, receita e entretenimento. Por sua vez, estas tabelas poderão estar relacionadas com outras tabelas que permitam especificar ainda mais os seus componentes, é o caso do tempo e custo de uma receita, do tipo de exercício e de entretenimento. Os valores referentes a essas especificações são pré-definidos por nós e não pelo utilizador, são uma espécie de “catálogo”.

Comentário: Ao efetuar um comentário são necessários dados como: data do comentário, a mensagem escrita, o post a que se refere e o seu autor. Um autor poderá escrever vários comentários, mas um comentário apenas pertence a um autor (1:M), assim como cada post poderá ter vários comentários, mas cada comentário só pertence a um post (1:M).

Implementação

3.1. Descrição das principais funcionalidades da aplicação Web

Como referido anteriormente, a aplicação web permite as interações de CRUD (create, read, update, delete). Mais concretamente as funcionalidades que a aplicação oferece são: o registo de utilizadores, assim como a criação da respetiva sessão e alteração do seu perfil; a criação de posts referentes a diversas categorias, ou seja, cada utilizador registado poderá criar (apagar e editar) um número infinito de posts e organizá-los em categorias diferentes (mind, food, entertainment, fitness); comentários dos utilizadores aos posts; adicionar posts aos favoritos do utilizador; seguir utilizadores, o que se assemelha a um sistema de subscrição, isto é, cada utilizador pode escolher “seguir” um outro e assim ter acesso direto aos posts que os utilizadores que segue publicam; pesquisar por palavras em todo o site (utilizadores e posts) ou então fazer uma pesquisa de posts por filtros (categoria e parâmetros específicos em cada categoria).

3.2. Mapa de páginas

Mapa de páginas

3.2.1. Server Behaviours utilizados

Os Server Behaviours são ferramentas automáticas do Dreamweaver que permitem a gestão de conteúdos mais fácil. Contudo, no projeto optámos por não utilizar essa "ajuda" do Dreamweaver escrevendo o código todo de raiz. No entanto os "behaviours" mais utilizados foram:

. Insert Record: permite inserir registos na base de dados;

. Update Record: permite editar e atualizar os registos na base de dados previamente criados;

. Delete Record: permite eliminar registos na base de dados;

. Restrict Page Access: permite verificar se existe uma sessão de utilizador iniciada. Caso não exista o utilizador é redirecionado para o index de modo a efetuar o log in, caso exista, o utilizador tem acesso à página a que pretende aceder;

. LogIn e LogOut: permite o utilizador iniciar ou terminar uma sessão;

. Repeat Region: permite utilizar de uma forma dinâmica o conteúdo de um recordset;

. Dynamic Text Field: permite escrever no value dos inputs informação da base de dados;


3.2.1. Recordsets/Queries utilizados

Para este projeto foram utilizados três tipos de queries diferentes: query complexa com um switch; query simples para um parâmetro estático; query dinâmica.

A query complexa com um switch é utilizada sempre que queremos inserir, modificar, pesquisar, etc., dados na tabela post e em cada tabela de especificação das categorias:

switch($cat) {

case 1:

$query_mind = "INSERT INTO mind (post_id_post, conteudo) VALUES ('{$id_anterior}', '{$mind_desc}')";

//echo $query_mind;

if(mysql_query($query_mind, $connection)){

//redirect_to('everything.php');

}

//if query fails then it show error message

else{

//Display error message

echo "subject creation failed";

die("Upload error". mysql_error());

}

break;


case 2:

$query_receita= "INSERT INTO receita (post_id_post, preparacao, tempo, custo, ingrediente) VALUES ('{$id_anterior}', '{$preparacao}', '{$tempo}', '{$custo}', '{$ingredientes}')";

//echo $query_receita;

if(mysql_query($query_receita, $connection)){

//redirect_to("everything.php");

}

//if query fails then it show error message

else{

//Display error message

echo "subject creation failed";

die("Upload error". mysql_error());

}

break;

... }


As queries simples estáticas consistem na definição de variáveis que poderão ser utilizadas mais tarde:


$user_query = "SELECT * FROM utilizador WHERE id_utilizador = $id_user";

$query_user = mysql_query($user_query, $connection);

if(!$query_user) {

die("Connection error:".mysql_error());

}

$rs_user = mysql_fetch_array($query_user);

$username = $rs_user['username'];

$name = $rs_user['nome'];


Definimos primeiro a query em sql, depois de executarmos a query criamos um recordset e de seguido definimos variáveis de acordo com o que pretendemos para "ir buscar" a informação do recordset.


Por fim, as queries de utilização "dinâmica" definem-se por terem um ciclo while que percorre as colunas todas da tabela consoante o seu "cumprimento":


$result_mind = mysql_query("SELECT * FROM mind WHERE post_id_post = $post_id", $connection);

if(!$result_mind){

die("Database query failed:".myql_error());

}

while($row_mind = mysql_fetch_array($result_mind)){

$conteudo=$row_mind["conteudo"];


build_mind();

};


3.2.1. Parâmetros passados entre páginas

A passagem de parâmetros entre páginas foi feita através de dois métodos que se definem no processamento do formulário: method e post.

Como o método get utilizar o URL para passar parâmetros, foi utilizado quando apenas queríamos passar informação sobre o id de um utilizador para aceder ao seu perfil, para efetuar o follow e unfollow dos utilizadores e ainda para passar o id do post para se poder ver o post pretendido.

<a href="view_profile.php?id_user=<?php echo $rs_posts['id_utilizador'];?>" class="view_author">

Assim estamos a dizer que ao clicarmos neste link o url vai ser alterado para aparecer o id do utilizador em questão e assim ser redirecionado para a sua página pessoal.

Na página "view_profile.php" definimos uma variável:

$id_user = $_GET['id_user'];

que vai buscar ao url o id do utilizador em questão para realizar as outras queries.


Quanto ao método post, este foi utilizado sempre que queríamos passar informação ou demasiado importante ou demasiado grande para caber no url. É o caso dos formulários de inserção de dados na base de dados, update, confirmação de dados.


3.3. Integração (eg: Flash, AJAX, Frameworks, etc)

Neste projeto para além da utilização de uma biblioteca de jquery que permite vários eventos como slide-down, slide-up, utilizámos AJAX para apresentar os resultados da pesquisa de filtros sem ser necessário recarregar a página.

Desenvolvimentos Futuros

Dado às restrições de tempo que nos foram impostas, ainda ficaram algumas funcionalidades por implementar que considerámos de baixa prioridade. Para começar gostaríamos de desenvolver a página em várias línguas (nomeadamente Português, Francês e Espanhol – decidimos por desenvolver em Inglês dado o seu carácter universal). A área pessoal do utilizador poderá sofrer uma evolução no sentido de ter um relógio alarme e um calendário onde o estudante poderá marcar exames, trabalhos e outros lembretes. No futuro, gostaríamos também de desenvolver um sistema de upload de imagens mais elaborado, em que o utilizador pudesse fazer o crop à foto que faz o upload, e ainda permitir o upload de mais de uma foto por post para que fosse criada uma galeria. Outra ideia a implementar seria o envio automático de uma "newsletter" semanal para cada utilizador com informação dos novos posts criados pelos utilizadores que segue. Esta opção não só iria motivar o utilizador a utilizar a plataforma, como iria mante-lo informado das novidades. Gostaríamos ainda de implementar uma página "Following" onde estivessem os posts das pessoas que o utilizador está a seguir. Por fim, gostaríamos de melhorar a validação e feedback de todo o website.

Conclusões

Em suma, o grupo concorda que este projeto foi extremamente enriquecedor tanto a nível pessoal como académico. Um projeto desta dimensão implicou um nível de organização muito alto, além disso, como decidimos não utilizar a ajuda das ferramentas do Dreamweaver e programar o código todo de raiz, sentimos que ganhámos um domínio muito grande sob as linguagens utilizadas. Com a utilização desse método tornamos a página mais ‘programmer-friendly’, isto é, quando for necessário fazer alguma alteração a nível de código, esta será muito mais facilmente executada. Ficamos satisfeitos com o resultado final do projeto e esperamos poder continuar a melhorá-lo e a ganhar utilizadores.


Bibliografia

W3Schools Online Web Tutorials - http://www.w3schools.com/

Lynda.com - http://www.lynda.com/

Jquery slide - http://jquery.malsup.com/form/

Jquery plugins - http://www.queness.com/post/204/25-jquery-plugins-that-enhance-and-beautify-html-form-elements

Ajax div function - http://kokeshnet.com/wordpress/?p=186

Retrieved from "http://wikis.ua.pt/labmm5/index.php?title=Help!"
Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox