3

Preciso que uma progress bar do bootstrap acompanhe a execução de uma query mysql.

$limite='200'; // limita
$i=1; // para gerar o looping da barra de progresso

$y = mysql_query("SELECT * FROM $tabela WHERE x='y' ORDER BY rand() limit $limite");
while($x = mysql_fetch_array($y)){

// gera a barra de progresso
$a_valor = $i / $limite * 100;
if($a_valor<'30'){$a_cor='danger';}elseif($a_valor>='30' && $a_valor<='70'){$a_cor='warning';}else{$a_cor='success';}
echo'
<div class="progress">
<div class="progress-bar progress-bar-'.$a_cor.'" role="progressbar" aria-valuenow="'.$a_valor.'" aria-valuemin="0" aria-valuemax="100" style="width:'.$a_valor.'%">
'.$a_valor.'% Completo
</div>
</div>';
$i++;
// gera a barra de progresso

}

Como eu já esperava, isso me gerou 200 barras de progresso, cada uma com um valor até 100%

Preciso que gere apenas 1 (uma) barra e o progresso seja atualizado até 100%, a cada execução.

Obs. 1: Imagino que só php não resolva e que seja necessário JS e CSS;

Obs. 2: O código foi reduzido para entendimento focado no pergunta;

Obs. 3: Sim, preciso atualizar pra mysqli :)

Obrigado desde já.

7
  • 1
    Não creio que seja possível fazer isso. A partir do momento que você passa o comando para o banco você não tem mais controle, você apenas senta e espera até voltar ou até o timeout vencer. Você já viu isso funcionando em algum lugar? Commented 29/12/2016 às 15:00
  • Imagine isso funcionando. Você passaria junto com o comando o select uma função callback e ele - o banco - a medida que seleciona avisa via callback quanto falta para ele terminar. Não. Definitivamente, improvável. Commented 29/12/2016 às 15:04
  • É possível dividir as queries e contar quantas faltam pro fim, passando esse dado com JQuery pro parâmetro do progressbar do bootstrap. Commented 29/12/2016 às 15:05
  • Eu inicialmente pensei em atualizar a div da barra a cada execução da query... via ajax ou algo assim. Mas realmente não sei como executar isso. Não tenho muita habilidade com JS...
    – Leonel
    Commented 29/12/2016 às 15:08
  • Olá, O que pretende é o progressbar do while e não do select. Certo? Commented 29/12/2016 às 16:05

1 Resposta 1

4

Ao invés da barra de progresso, vou sugerir o que fiz. É mais simples, e não demanda múltiplas requisições ao servidor. Basicamente: mostre um modal com um aviso durante o tempo de execução da consulta.

Pode ser um modal, pode ser uma div, ou um alert, etc.

Eu simulei com uma query que insere 1200 registros numa tabela demorando, em média, uns 3 segundos. Durante esses 3 segundos o usuário vê isso:

inserir a descrição da imagem aqui

Quando o script testing.resp.php responde, o usuário vê isso:

inserir a descrição da imagem aqui

Se a resposta vem com falha, o usuário vê isso:

inserir a descrição da imagem aqui

Seguem os códigos:

testing.php

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title>Example</title>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
        <style>
            /*Regra para a animacao*/
            @keyframes spin {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }
            /*Mudando o tamanho do icone de resposta*/
            div.glyphicon {
                color:#6B8E23;
                font-size: 38px;
            }
            /*Classe que mostra a animacao 'spin'*/
            .loader {
              border: 16px solid #f3f3f3;
              border-radius: 50%;
              border-top: 16px solid #3498db;
              width: 80px;
              height: 80px;
              -webkit-animation: spin 2s linear infinite;
              animation: spin 2s linear infinite;
            }
        </style>
        <script>
            $(function () {
                //Comportamento do botao de disparo
                $('#btn-getResponse').click(function () {
                    getResponse();
                });
            });
            /**
             * Dispara o modal e espera a resposta do script 'testing.resp.php'
             * @returns {void}
             */
            function getResponse() {
                //Preenche e mostra o modal
                $('#loadingModal_content').html('Carregando...');
                $('#loadingModal').modal('show');
                //Envia a requisicao e espera a resposta
                $.post("testing.resp.php")
                    .done(function () {
                        //Se nao houver falha na resposta, preenche o modal
                        $('#loader').removeClass('loader');
                        $('#loader').addClass('glyphicon glyphicon-ok');
                        $('#loadingModal_label').html('Sucesso!');
                        $('#loadingModal_content').html('<br>Query executada com sucesso!');
                        resetModal();
                    })
                    .fail(function () {
                        //Se houver falha na resposta, mostra o alert
                        $('#loader').removeClass('loader');
                        $('#loader').addClass('glyphicon glyphicon-remove');
                        $('#loadingModal_label').html('Falha!');
                        $('#loadingModal_content').html('<br>Query nao executada!');
                        resetModal();
                    });
            }
            function resetModal(){
                //Aguarda 2 segundos ata restaurar e fechar o modal
                setTimeout(function() {
                    $('#loader').removeClass();
                    $('#loader').addClass('loader');
                    $('#loadingModal_label').html('<span class="glyphicon glyphicon-refresh"></span>Aguarde...');
                    $('#loadingModal').modal('hide');
                }, 2000);
            }
        </script>
    </head>
    <body>
        <!-- loadingModal-->
        <div class="modal fade" data-backdrop="static" id="loadingModal" tabindex="-1" role="dialog" aria-labelledby="loadingModal_label">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="loadingModal_label">
                            <span class="glyphicon glyphicon-refresh"></span>
                            Aguarde...
                        </h5>
                    </div>
                    <div class="modal-body">
                        <div class='alert' role='alert'>
                            <center>
                                <div class="loader" id="loader"></div><br>
                                <h4><b id="loadingModal_content"></b></h4>
                            </center>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- loadingModal-->
        <nav class="navbar"></nav>
        <div class="container">
            <button type="button" class="btn btn-default" id="btn-getResponse">
                getResponse
            </button>
        </div>
    </body>
</html>

testing.resp.php

<?php

# descomentar para testar resposta com falha
//header($_SERVER['SERVER_PROTOCOL'] . ' 500 Internal Server Error', true, 500); exit();

$servername = "localhost";
$username = "root";
$password = "#Senha";
$dbname = "#NomeBanco";

$mysqli = new mysqli($servername, $username, $password, $dbname);

if ($mysqli->connect_error) {
die("Connection failed: " . $mysqli->connect_error);
}

$sql = "TRUNCATE teste;";

for ($i = 1; $i <= 1200; $i++) {
    $sql .= "INSERT INTO `teste` (`title`,`slug`,`text`) VALUES ('".md5($i)."','".sha1($i)."','text$i');";
}

if (mysqli_multi_query($mysqli, $sql)) {
    do {
        if ($result = mysqli_store_result($mysqli)) {
            header($_SERVER['SERVER_PROTOCOL'], true, 200);
            exit();
        }
    } while (mysqli_next_result($mysqli) && mysqli_more_results($mysqli));
}
mysqli_close($mysqli);

tabela

--
-- Estrutura para tabela `teste`
--

CREATE TABLE IF NOT EXISTS `teste` (
`Id` int(11) NOT NULL,
  `title` varchar(255) DEFAULT NULL,
  `slug` varchar(255) NOT NULL,
  `text` text NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=1001 DEFAULT CHARSET=utf8 COMMENT='Teste';
2
  • Imaginei que haveria um método pouco complexo, com ajax por exemplo, visto que, no caso proposto, temos um universo definido de 200 e não é preciso verificar buffer, tempo de carregamento etc. Apenas "somar 1" a uma variável em cada execução da query (sem atualizar a página).
    – Leonel
    Commented 19/01/2017 às 12:16
  • Para evitar um problema de travamento, vc pode ainda definir um timeout, ou seja um tempo limite para a resposta. Se a resposta demorar mais do que o tempo determinado, vc interrompe e manda um aviso para o usuário. Quase tudo é possível :) Commented 19/01/2017 às 12:35

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .