DIV\`s\` dinamicamente no Browser.

Transcrição

Exibição de \'DIV\'s\' dinamicamente no Browser.
Posted by Sérgio Maia - 2007/11/20 16:46
_____________________________________
Estou a tentar implementar uma aplicação que deverá exibir algumas DIV's de maneira dinâmica, semelhante a Página
Principal do Technorati (www.technorati.com), onde os dados exibidos dentro das DIV's serão oriundos do BD, sendo
estes atualizados em tempo real a cada nova inserção de dados pelo utilizador. Ou seja, melhor explicando, toda vez que
o utilizador inserir os dados no BD, estes serão exibidos na Pagina Principal da aplicação dinâmicamente. Gostaria da
saber como poderia fazer isso utilizando PHP???
Desde já agradeço.
Sérgio Maia.
============================================================================
Re:Exibição de \'DIV\'s\' dinamicamente no Browser.
Posted by miguelp - 2007/11/21 05:35
_____________________________________
olá sergio,
vamos la ver se eu percebi bem o que queres fazer, 1 tens de pesquisar a base de dados e limitar os resultados. no
caso da technorati o que eles fazem é simples têm um select deste genero:
SELECT * FROM 'posts' ORDER BY 'id' DESC LIMIT 0,5
ou claro, algo similar. recolhes os resultados num array (mysql_fetch_array) e começas por criar uma div principal, que
vai segurar todo o conteudo e uma lista ordenada:
<div id="conteudo">
<ol>
</ol>
</div>
até aqui tudo ok e bastante simples simples, vamos imaginar que recebeste da base de dados os dados e os
armazenaste num array chamado $dbresult, algo deste genero:
Array
(
=> Array
(
=> titulo1
=> 123456789abcd
=> conteudo 1 bla bla bla
)
=> Array
(
=> titulo 2
=> 248585545abcd
)
=> Array
(
=> titulo 3
=> 787443516abcd
)
=> Array
(
PHP-PT.com Forum - Comunidade Portuguesa de PHP
Joomlaboard Forum Component version: 1.1.4 Stable
Generated: 30 September, 2016, 04:33
=> titulo 4
=> 164646558abcd
)
=> Array
(
=> titulo 5
=> 987653215abcd
)
)
ok então o que nos resta fazer para mostrar os resultados é algo tipo:
<?php
function buildPostList(){
// Aqui teriamos de colocar a chamada a DB e construir o array com os dados.....
// o que nao vou fazer para nao tornar isto muito grande presumo que essa parte será simples de fazeres.
// aqui armazenamos o ultimo ID para mais tarde verificarmos se existem alterações
$maxId = $dbresult;
// agora vamos construir o HTML da listagem
//ok aqui garantimos que a variavel começa sempre sem conteudo
$conteudo = '';
//vamos abrir a lista
$conteudo .= '<ol>';
for($i=0; $i < count($dbresult); $i++)
{
// vamos iniciar o elemento da lista, e incluir o conteudo desse elemento numa div interna
$coneudo .= '<li><div id="item">';
//agora vamos listar o titulo o link e o conteudo deste item vou nomear cada uma das divs com nomes diferentes desta
forma podes aplicar a formatação diferente a cada uma via CSS assim como o seu posicionamento
$conteudo .= '<div id="titulo">' . $dbresult . '</div>';
$conteudo .= '<div id="link"><a href="post.php?ref=' . $dbresult . '"> titulo link </a></div>';
$conteudo .= '<div id="conteudo">' . $dbresult . '</div>';
$conteudo .= '</div></li>';
}
//vamos terminar a nossa lista
$conteudo .='</ol>';
//vamos retornar o resultado
return $conteudo;
}
//ok chamemos a esta div o involocru do nosso conteudo
echo '<div id ="conteudo">';
//mostremos o conteudo
echo buildPostList();
//vamos fechar a div
echo '</div>';
//ok o que nos resta agora? passar o valor da variavel $maxId para uma variavel de javascript para que possamos com
uma função periodica e utilizando ajax verificar se a nossa DB foi alterada
echo '<script type="text/javascript"> lastid = ' . $maxId .'; </script>';
// ok agora so te falta colocares no header um include a um ficheiro JS com a função de executar pedidos de X em X
tempo a DB a ver se o ultimo ID é diferente da var lastid se for diferente usas um
//callback á função buildPostList para te actualizar a div conteudo podes fazer isso facilmente usando a libraria
prototype.js
?>
espero ter respondido a tua duvida. se precisares de mais ajuda ou esclarecimentos, ou caso eu nao tenha percebido
bem a tua duvida diz.
abraço, Miguel Pinto
============================================================================
Posted by tiago - 2007/11/22 00:35
_____________________________________
Viva Sérgio,
a technorati usa a pseudo-tecnologia AJAX (Asynchronous Javascript And XML) para efectuar a actualização em tempo
real.
Aconselho-te a veres no www.google.pt sobre: prototype (a última versão desta framework já suporta AJAX
nativamente), Sajax (uma framework muito simplicista feita também em PHP).
Se conseguires resolver o teu problema com as informações acima indicadas (conjuntamente com o que o miguelp disse),
perfeito. Caso contrário, avisa que eu coloco pequenos exemplos funcionais/simples para tentar resolver as tuas
dúvidas.
Abraços,
Tiago Lopes
============================================================================
_____________________________________
Miguel,
Suas dicas serão de grande valia, olhando agora, acredito ser isso mesmo o que preciso.Obrigado.
Tiago,
Já estou a consultar as referências indicadas por ti, obrigado.
============================================================================
_____________________________________
caro sergio,
Sendo que era isso que pretendia então aqui vai mais umas dicas, vamos pegar na função e vamos coloca-la separado
num ficheiro chamado por exemplo "postsUpdater.php" e o que resta do código que fizemos anteriormente vamos colocalo num ficheiro chamado por exemplo "index.php", desta forma vamos fazer uma melhor separação entre o "User
interface" e a parte de lógica da aplicação.
Agora vamos pegar no postsUpdater.php e vamos acrescentar umas coisas:
<?php
// vamos verificar qual o valor de Update para sabermos o que actualizar
// neste caso é so uma função mas imaginemos que mais tarde queres acrescentar outras funções para
// outras secções podes usar o mesmo codigo sem teres de andar a alterar a estrutura.
if(isset($_GET)){
switch ($_GET){
case "posts":
buildPostList();
break;
}
}
function buildPostList(){
// Aqui teriamos de colocar a chamada a DB e construir o array com os dados.....
// o que nao vou fazer para nao tornar isto muito grande presumo que essa parte será simples de fazeres.
// aqui armazenamos o ultimo ID para mais tarde verificarmos se existem alterações
$maxId = $dbresult;
//Ok aqui vamos comparar os IDS e sempre que o ID que vem do utilizador for igual ou
// inferior ao da base de dados a função nao vai retornar nada, caso contrario, ou caso
// o array $_POST nao contenha um elemento lastid retorna o novo HTML com os novos posts
if((isset($_POST)&($_POST <= $maxId)){
return false;
}else{
// agora vamos construir o HTML da listagem
//ok aqui garantimos que a variavel começa sempre sem conteudo
$conteudo = '';
//vamos abrir a lista
$conteudo .= '<ol>';
for($i=0; $i < count($dbresult); $i++)
{
// vamos iniciar o elemento da lista, e incluir o conteudo desse elemento numa div interna
$coneudo .= '<li><div id="item">';
//agora vamos listar o titulo o link e o conteudo deste item vou nomear cada uma das divs com nomes
//diferentes desta forma podes aplicar a formatação diferente a cada uma via CSS assim como o seu
//posicionamento
$conteudo .= '<div id="titulo">' . $dbresult . '</div>';
$conteudo .= '<div id="link"><a href="post.php?ref=' . $dbresult . '"> titulo link </a></div>';
$conteudo .= '<div id="conteudo">' . $dbresult . '</div>';
$conteudo .= '</div></li>';
}
//vamos terminar a nossa lista
$conteudo .='</ol>';
// ok passei
$conteudo .='<script type=\"text/javascript\"> lastid = ' . $maxId .'; </script>';
//vamos retornar o resultado
return $conteudo;
}
}
?>
e por fim vamos ver como fica o index.php
<?php
//incluimos o ficheiro que contem as funções
include("postsUpdater.php"Â«Â»);
//iniciamos a variavel dos posts
$maxId = 0;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/effects.js"></script>
<script type="text/javascript">
// vamos iniciar a variavel que vai aculumar o maxID vindo da BD
var lastid = 0;
/*O
k aqui vamos usar umas das funções do prototype e vamos dizer que
queremos executar o pedido ao ficheiro postsUpdater.php de 300 em 300 segundos, e que queremos que apenas a div
'conteudo' seja actualizada, o metodo a utilizar é post.
O que vai acontecer aqui é que a div conteudo mas apenas ela vai ser actualizada de 5 em 5 minutos.
*/
new Ajax.PeriodicalUpdater('conteudo',
'/postsUpdater.php?update="Posts"',
{ method: 'post',
frequency: 300,
decay: 2 ,
parameters: { lastid: lastid },
});
</script>
</head>
<body>
<h1> Ok aqui ficaria Mais HTML</h1><br />
<div id ="conteudo">
<?php
/*
executamos esta função aqui porque caso o utilizador nao tenha activado o JS a listagem será apresentada na mesma
apenas nao executá as actualizações dinâmicas.
*/
echo buildPostList();
?>
</div>
</body></html>
e com estes 2 pequenos scripts penso que tens algo muito similar ao que pretendias...
vê la se assim serve, se tiveres duvidas ou questões avisa.
============================================================================
_____________________________________
Viva Miguel,
Como sempre, acertastes tudo o que eu precisava. Estou implementando conforme suas instruções e tudo caminha para
aquilo que preciso em minha aplicação.
Mais uma vez agradeço o apoio.;)
Sérgio Maia.
============================================================================
_____________________________________
Viva sérgio,
Ainda bem que pude ser útil, é para isso que cá estamos para ajudar e tirar duvidas. a comunidade foi criada
exactamente com o objectivo de unir os programadores de PHP e todos os que pretendem ajudar, aprender e partilhar
conhecimentos e experiencias.
Abraço,
Miguel Pinto
============================================================================

DIV\`s\` dinamicamente no Browser.

Transcrição

Documentos relacionados

Chat Box em PHP - Comunidade Portuguesa de PHP

Folha de Estilos em Cascata Cascading Style Sheet

Osciloscópios Digitais

Adt n 008 ao BI n 195 - CCOMGEX

some advices

PDF, AJUDA!

Softwares e versões

Cascading Style Sheets II

Dicionários e Arquivos

curso php prático

Campanha Institucional

PROJETO RIQUEZAS MINERAIS RELATÓRIO FINAL