Você está na página 1de 5

29/8/2014 ByteCodex » Blog Archive » Implementando um ProgressBar em PHP com JQuery

Home
Outras Notícias

Tecnologia no século XXI

Implementando um ProgressBar em PHP com JQuery


por Iuri Jacob em abril 17th, 2012

Outro dia desses ocorreu uma discussão bem bacana na lista do PHPRio sobre como implementar um ProgressBar usando o JQuery para acompanhar um processo de
inserção de registros num banco de dados qualquer. Uma das soluções propostas envolvia a criação de um javascript que implementaria um timer na página e que a cada
tantos segundos (ou milissegundos) acessaria o servidor via ajax para atualizar o status do progresso. O script PHP responsável pela inserção dos registros teria a
responsabilidade de atualizar um arquivo ou uma variável de sessão com os dados do progresso, de forma que o script que daria o retorno ao ajax pudesse acessá-lo.
Embora seja uma solução viável e interessante até certo ponto, me preocupava o fato do script ter que fazer centenas de requisições ao servidor para dar a noção de
progresso.

Então propus uma abordagem diferente. Propus que o processo que faz as inserções fosse disparado pelo mesmo script que informa o progresso e que o retorno fosse
em tempo real, usando essa mesma requisição. Além disso, a solução teria que ser genérica o suficiente para atender a qualquer processo que necessitasse informar o
retorno do progresso, não apenas para o problema específico das inserções, discutido até então.

O resultado disso foi seguinte código para o lado do cliente:

HTML | copy code |?

01<html>

02

03<head>

04 <title>Exemplo de implementação de barra de progresso usando JQuery com PHP</title>

05 <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-lightness/jquery-ui.css" type="text/css"

06 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

07 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>

08</head>

09<body>

10

11 <iframe id="hiddenframe" style="display: none;" src="about:blank"></iframe>

12

13 <button onclick="$('#hiddenframe').attr('src', 'processar.php')">Processar Algo!</button><br /><br />

14 <div id="progresso" style="width: 200px; height: 15px;"></div>

15

16 <script>

17
$(function() {

18 $("#progresso").progressbar({ value: 0 });

19 });

20 </script>

http://www.bytecodex.com/blog/2012/04/17/implementando-um-progressbar/ 1/5
29/8/2014 ByteCodex » Blog Archive » Implementando um ProgressBar em PHP com JQuery

21

22</body>

A solução é bem simples. Um iframe escondido é usado para disparar o processo no servidor que, como veremos mais a frente, retorna comandos jquery para atualizar o
progressbar no frame pai. Ao clicar no botão para “processar algo” o endereço do iframe é acionado para executar o nosso script server-side. O script “processar.php”
faz o seguinte:

PHP | copy code |?

01<?

02// Garante que o envio do buffer será imediato

03@apache_setenv('no-gzip', 1);

04@ini_set('zlib.output_compression', 0);

05@ini_set('implicit_flush', 1);

06for ($i = 0; $i < ob_get_level(); $i++) { ob_end_flush(); }

07
ob_implicit_flush(1);

08?>

09<html>

10

11<head>

12 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

13</head>

14<body>

15<?

16flush();

17$procs = array();

18

19// Cria massa de processos que serão executados.

20for($x = 0; $x <= 100; $x++)

21 $procs[$x]=$x;

22

23// Calcula o peso de cada processo no universo de processos

24$p_proc = 100/count($procs);

25

26// Essa variável controla o progresso

27$progresso = 0;

28

29// Essa auxiliar ajuda a verificar se mudou a parte inteira do progresso para atualizar a barra

30$progresso_anterior = 0;

http://www.bytecodex.com/blog/2012/04/17/implementando-um-progressbar/ 2/5
29/8/2014 ByteCodex » Blog Archive » Implementando um ProgressBar em PHP com JQuery
31

32// itera sobre os array de processos

33foreach($procs as $proc)

34{

35 $progresso += $p_proc;

36

37 // Executa o processo

38 // (A linha abaixo não é necessária em uma aplicação real, serve apenas para simular a visualização do progresso.

39 // Deve ser substituida pelo processo em si.)

40 usleep(100000);

41

42 // Atualiza a barra de progresso caso tenha atingido a próxima porcentagem

43 if (ceil($progresso) != ceil($progresso_anterior)) {

44 echo "<script>window.parent.$('#progresso').progressbar('value',".ceil($progresso).");</script>\r\n

45 flush();

46 }

47 $progresso_anterior = $progresso;

48}

49

50?>

51</body>

As primeiras linhas desse arquivo são hacks usados para dizer ao PHP que ele deve liberar o buffer de saída por demanda, ou seja, ele não ficará aguardando o final do
processamento para enviar os resultados para o cliente de uma só vez. As linhas 20 e 21 apenas criam a nossa massa de teste. Na verdade os processos aqui significam
comandos ou linhas de execução que precisam ser rastreados pela barra de progresso. Esses processos podem ser uma lista de inserts no banco de dados, uma lista de
arquivos a serem salvos ou carregados, uma lista de eventos que devem ocorrer ou whatever… Como eu disse no início, a idéia é que a solução seja genérica e aplicável
na maioria dos casos. A linha 40, onde temos o comando usleep deve ser substituída pela execução propriamente dita do processo atual dentro do laço. Aqui, apenas
para fins de teste, coloquei o usleep para simular algo sendo processado em 1 segundo.

A parte importante desse script está mesmo é entre as linhas 43 e 46. A linha 44 envia o comando do JQuery que atualizará o componente do ProgressBar. O flush() da
linha 45 força o envio precoce do comando gerado na linha anterior para o navegador. O if da linha 43 não é obrigatório. Mas ele garante que o status será atualizado de
1 em 1 por cento, evitando um flood na requisição (imagina o tráfego que geraria um processo com milhões de comandos retornando o status do progresso a cada
execução).

Quando o script é disparado no iframe o navegador fica aguardando o retorno do php, que por sua vez envia os comandos de atualização do status a medida que o
processo é executado. Os testes que fiz com esse esquema revelou um resultado muito promissor para esse modelo.

Rating: 4.0/5 (5 votes cast)


Implementando um ProgressBar em PHP com JQuery, 4.0 out of 5 based on 5 ratings

Tags: HTML, jQuery, php, ProgressBar


Postado em PHP, Programação, Tecnologia | 2 Comentários »

2 Respostas para “Implementando um ProgressBar em PHP com JQuery”

1. theobaldo Says:
janeiro 10th, 2013 às 17:08

Faltou deixar uma demo ou download

http://www.bytecodex.com/blog/2012/04/17/implementando-um-progressbar/ 3/5
29/8/2014 ByteCodex » Blog Archive » Implementando um ProgressBar em PHP com JQuery
Rating: 3.7/5 (3 votes cast)

2. rodrigo Says:
agosto 22nd, 2014 às 02:55

Olá, estou com uma dificuldade, se eu tiver que executar 5000 processos onde incluo que o total é 5000? Onde informo o número de processos e o processo atual
para poder calcular o “percentual”, se puder me ajudar agradeço.

Rating: 0.0/5 (0 votes cast)

Responder

Connect with Facebook

Nome (requerido)

E-mail (não será publicado) (requerido)

Website

XHTML: Você pode usar essas tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i>
<q cite=""> <strike> <strong>

Enviar Comentário

Antes de enviar o comentário, por favor, complete o cálculo abaixo:


+ 4 = sete

Sobre o Autor

Iuri Jacob, 33, é desenvolvedor de sistemas e especialista em engenharia da computação pela UFRJ. Geek convicto, também é aficionado por esportes e pretende um dia
estudar astronomia, seu hobby favorito. Não é dado a extremismos, embora goste de música clássica e heavy metal na mesma proporção.

LaserVue, Mitsubishi's RGB Laser Powered Television Demo

Blogroll
Jovens Nerds
Vida de Programador
xkcd

http://www.bytecodex.com/blog/2012/04/17/implementando-um-progressbar/ 4/5
29/8/2014 ByteCodex » Blog Archive » Implementando um ProgressBar em PHP com JQuery

Grupos
Grupo PHP Rio

Mídias
ComputerWorld Magazine
NY Times – Technology
PCWorld
Site Inovação Tecnológica

Últimos posts
Da Vinci Digital
Livro: O Fim da Infância
Implementando um ProgressBar em PHP com JQuery
Uma pequena invenção para gerar grandes mudanças
IPTV: o futuro da mídia televisiva

ByteCodex no Facebook

© copyright ByteCodex 2014.

Designed by Chosen | Developer Shane

http://www.bytecodex.com/blog/2012/04/17/implementando-um-progressbar/ 5/5