title: How To Make Realtime Progressbar Without PHP Pusher
body: <p>I am stuck in this problem, about making realtime progressbar on php (without php pusher)</p>
  <p>Let's say I have 10 rows of data, that will be inserted to database.</p>
  <p>Now how to send the progressbar data, while also inserting to database.</p>
  <p>I will really appreciate your answers.
  Thanks.</p>
  <p>Bellow is my code example:</p>
  <pre><code>// script.js (client)
  // This function executed when user submit form
  function store() {
    // Listen Server Side Event
    let event = new EventSource('controller/store')
    
    event.addEventListener('message', response =&gt; {
      // Then update progressbar
      updateProgressbar(response.percent)
    })
    
    // Ajax to save data to database
    $.ajax({
      url: baseUrl + 'controller/store',
      type: 'POST',
      dataType: 'JSON',
      data: $('#form').serializeArray(),
      success: function(response) {
        console.log(response)
      }
    })
  }
  
  
  // Controller.php (server)
  public function store() {
    header(&quot;Content-Type: text/event-stream&quot;);
    header(&quot;Cache-Control: no-cache&quot;);
    header(&quot;Connection: keep-alive&quot;);
    
    $total_row = count($_POST['customer']);
  
    for ($i = 0; $i &lt; $total_row; $i++) {
      usleep(100000);
        
      $this-&gt;db-&gt;insert('customers', $_POST['customer'][$i]);
      
      $percent = ($i + 1) * (100 / $total_row);
  
      echo &quot;event: message\n&quot;;
      echo 'data: {&quot;status&quot;: &quot;loading&quot;, &quot;percent&quot;: &quot;' . $percent . '&quot;}';
      echo &quot;\n\n&quot;;
  
      ob_end_flush();
      flush();
  
      if (connection_aborted()) break;
    }
  
    echo &quot;event: message\n&quot;;
    echo 'data: {&quot;status&quot;: &quot;done&quot;, &quot;percent&quot;: &quot;' . $percent . '&quot;}';
    echo &quot;\n\n&quot;;
  }
  </code></pre>