설치 진행률 표시 줄 PHP

Question

구문이 아니라 세그먼트로 나누어 진 간단한 설치 프로그램이 있습니다. 작동 원리는 다음과 같습니다.

if ($_POST['install'] == "Install") 
{ 
// fetches user values 

// creates tables 

// creates some files 

// creates some emails 

// inserts relevant stuff into the database 

// finishes 
} 

코드가 너무 길어서이 질문에 불필요합니다. 각 단계는 설치가 완료되면 20 %로 계산됩니다. 사용자에게 정보를 표시하는 진행 막대를 어떻게 만들 수 있습니까? 저는 두 가지 이유로 이것을 원합니다. 하나는 추적하기위한 것이고, 다른 하나는 완료되기 전에 브라우저 탭을 닫아서는 안된다는 것입니다.

이제 내 생각은 코드의 각 부분에 변수를 할당하는 것입니다. 예를 들어, $done = 20%은 첫 번째, $done = 40%은 두 번째 등이며 그 변수를 기반으로 한 진행률 막대 만 표시합니다. 내가 모르는 유일한 방법은 진행률 막대를 표시하는 방법입니다.

감사

Answer 1

내 권장 해결 방법 : 건조 할 경우

하기 때문에 같은 프로세스의 각 단계에 대해 별도의 아약스 요청을 만들기 ...

// do first step 
$.ajax({ 
    url: myUrl + '?step=1', 
    success: function() { 
    // update progress bar 20% 
    } 
}); 

// do second step 
$.ajax({ 
    url: myUrl + '?step=2', 
    success: function() { 
    // update progress bar 40% 
    } 
}); 

// etc. 

,이 시도 :

를

var steps = 5; 

for (var i = 1; i <= steps; i++) { 
    $.ajax({ 
     url: myUrl + '?step=' + i; 
     success: function() { 
     // update success incrementally 
     } 
    }); 
} 

jQuery UI 진행 표시 줄 :

$(function() { 

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

    var steps = 5; 

    for (var i = 1; i <= steps; i++) { 
     $.ajax({ 
      url: myUrl + '?step=' + i; 
      success: function() { 
      // update success incrementally 
      $("#progressbar").progressbar('value', i * 20); 
      } 
     }); 
    } 

}); 

Ref. http://jqueryui.com/progressbar/#default

Answer 2

가장 좋은 방법은 진행 값을 APC, Memcache 또는 Redis와 같은 키 또는 값 저장 시스템에 저장하는 것입니다. 그런 다음 ajax 쿼리를 사용하여 진행률을 검색합니다.

좋은 jQuery 플러그인은 jQuery를-UI에서 progressbar 바, 당신은 진행 값을 인코딩하는 JSON을 사용할 수 있습니다

// GET /ajax/get-status.json 
{ 
    "progress":10, 
    "error":"", 
    "warning":"" 
} 

페이지 :

<div id="error" style="color: red"></div> 
<div id="warning" style="color: yellow"></div> 
<div id="message"></div> 
<div id="progressbar"></div> 
<script type="text/javascript"> 
     jQuery(document).ready(function() { 
      $("#progressbar").progressbar({ value: 0 }); 
      $.ajaxSetup({ cache: false }); 

      function updateProgress() { 
       jQuery.getJSON("/ajax/get-status.json", function(response) { 

        if (response.error) { 
         $("#error").html(response.error); 
         return; 
        } else { 
         $("#progressbar").progressbar('value', parseInt(response.progress)); // Add the new value to the progress bar 
         $("#message").html(response.message); 
         $("#warning").html(response.warning); 
         if(parseInt(response.progress) < 100){ 
          setTimeout(updateProgress, 1); 
         } 
        } 
        }); 
      } 

      updateProgress(); 
     });   
</script> 

Answer 3

당신은 HTML5 진행을 사용할 수 있습니다 바.

아약스 요청을 보내 완료율을 반환하십시오. 진행 태그의 값을 변경하십시오.

<progress id='p' max="100" value="50"></progress>