Улучшение пользовательского опыта: реализация индикатора выполнения в PHP

Индикаторы выполнения – это визуальное представление статуса выполнения задачи. Они обычно используются для предоставления обратной связи по длительным процессам и улучшения пользовательского опыта. В этой статье блога мы рассмотрим различные методы реализации индикаторов выполнения с помощью PHP, а также приведем примеры кода.

Метод 1: использование JavaScript и AJAX
Один из наиболее распространенных методов реализации индикатора выполнения в PHP — использование JavaScript и AJAX. Вот пример того, как это можно сделать:

// HTML
<div id="progressBar" ></div>
// JavaScript
function updateProgressBar(progress) {
  document.getElementById("progressBar").style.width = progress + "%";
}
// AJAX
var xhr = new XMLHttpRequest();
xhr.open("POST", "progress.php", true);
xhr.upload.addEventListener("progress", function(event) {
  var percent = (event.loaded / event.total) * 100;
  updateProgressBar(percent);
});
xhr.send(formData);

Метод 2: использование сеансов и AJAX
Другой подход заключается в использовании сеансов PHP для хранения и обновления значения прогресса. Вот пример:

// progress.php
session_start();
$total = $_SESSION['total']; // Total number of tasks
$completed = $_SESSION['completed']; // Number of completed tasks
$progress = ($completed / $total) * 100;
echo $progress;
// JavaScript
function updateProgressBar() {
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var progress = parseFloat(xhr.responseText);
      document.getElementById("progressBar").style.width = progress + "%";
    }
  };
  xhr.open("GET", "progress.php", true);
  xhr.send();
}
setInterval(updateProgressBar, 1000);

Метод 3: использование базы данных
Если вы выполняете длительную операцию, требующую сохранения данных, вы можете использовать базу данных для хранения и обновления хода выполнения. Вот пример использования MySQL:

// progress.php
$completed = fetchProgressFromDatabase(); // Fetch the current progress from the database
$progress = ($completed / $total) * 100;
echo $progress;
// JavaScript (similar to Method 2)
function updateProgressBar() {
  // ...
}
setInterval(updateProgressBar, 1000);