ساخت لیست وظایف (To-Do List)

ساخت لیست وظایف با PHP: یک راهنمای جامع

ساخت لیست وظایف با PHP: یک راهنمای جامع

لیست وظایف (To-Do List) ابزاری ساده اما قدرتمند برای مدیریت زمان و افزایش بهره‌وری است. این مقاله به بررسی نحوه ساخت یک لیست وظایف کاربردی با استفاده از PHP می‌پردازد. ما از یک رویکرد عملی و گام به گام استفاده خواهیم کرد تا یک سیستم کامل با قابلیت‌های افزودن، ویرایش، تکمیل و حذف وظایف ایجاد کنیم. این سیستم برای استفاده در وب‌سایت‌ها و برنامه‌های تحت وب مناسب است و می‌تواند به عنوان یک پایه برای پروژه‌های بزرگتر مورد استفاده قرار گیرد.

بخش اول: طراحی پایگاه داده

اولین قدم در ساخت هر برنامه کاربردی، طراحی پایگاه داده است. برای لیست وظایف، یک جدول ساده با ستون‌های زیر کافی است:

  • id: شناسه یکتا برای هر وظیفه (integer, auto-increment, primary key)
  • task: متن وظیفه (varchar)
  • completed: وضعیت وظیفه (boolean, 0 برای انجام نشده و 1 برای انجام شده)
  • created_at: زمان ایجاد وظیفه (timestamp)

می‌توانید این جدول را با استفاده از دستورات SQL زیر ایجاد کنید:

CREATE TABLE tasks (
  id INT AUTO_INCREMENT PRIMARY KEY,
  task VARCHAR(255) NOT NULL,
  completed BOOLEAN DEFAULT 0,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

بخش دوم: اتصال به پایگاه داده با PHP

برای تعامل با پایگاه داده، نیاز به اتصال به آن از طریق PHP داریم. در اینجا از PDO (PHP Data Objects) استفاده می‌کنیم که یک لایه انتزاعی برای دسترسی به پایگاه داده‌های مختلف است.

ابتدا، اطلاعات اتصال به پایگاه داده را تعریف می‌کنیم:

setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
  die("Connection failed: " . $e->getMessage());
}
?>

توجه: مقادیر $host، $dbname، $username و $password را با اطلاعات پایگاه داده خود جایگزین کنید.

بخش سوم: ایجاد توابع اصلی

اکنون توابع اصلی برای مدیریت وظایف را ایجاد می‌کنیم:

1. افزودن وظیفه

prepare($sql);
  $stmt->execute([$task]);
}
?>

2. دریافت لیست وظایف

prepare($sql);
  $stmt->execute();
  return $stmt->fetchAll(PDO::FETCH_ASSOC);
}
?>

3. به‌روزرسانی وضعیت وظیفه

prepare($sql);
  $stmt->execute([$id]);
}
?>

4. حذف وظیفه

prepare($sql);
  $stmt->execute([$id]);
}
?>

بخش چهارم: ایجاد رابط کاربری (HTML و PHP)

اکنون با استفاده از HTML و PHP، یک رابط کاربری ساده برای لیست وظایف ایجاد می‌کنیم.

1. فرم افزودن وظیفه

<form action="" method="post">
  <input type="text" name="new_task" placeholder="وظیفه جدید">
  <button type="submit">افزودن</button>
</form>

2. نمایش لیست وظایف

<ul>
  <?php
    $tasks = getTasks($pdo);
    foreach ($tasks as $task) {
      echo "<li>";
      echo "<input type='checkbox' " . ($task['completed'] ? 'checked' : '') . " data-id='" . $task['id'] . "'>";
      echo " " . $task['task'];
      echo " <a href='?delete=" . $task['id'] . "'>حذف</a>";
      echo "</li>";
    }
  ?>
</ul>

3. کد PHP کامل برای پردازش فرم و نمایش لیست

<?php
include 'db_connection.php'; // فایل اتصال به پایگاه داده

// پردازش فرم افزودن وظیفه
if (isset($_POST['new_task'])) {
  addTask($pdo, $_POST['new_task']);
  header("Location: " . $_SERVER['PHP_SELF']); // رفرش صفحه
  exit();
}

// پردازش حذف وظیفه
if (isset($_GET['delete'])) {
  deleteTask($pdo, $_GET['delete']);
  header("Location: " . $_SERVER['PHP_SELF']); // رفرش صفحه
  exit();
}

// پردازش تکمیل/عدم تکمیل وظیفه (با استفاده از AJAX)
if (isset($_POST['task_id'])) {
  toggleComplete($pdo, $_POST['task_id']);
}
?>

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>لیست وظایف</title>
</head>
<body>

  <h1>لیست وظایف</h1>

  <form action="" method="post">
    <input type="text" name="new_task" placeholder="وظیفه جدید">
    <button type="submit">افزودن</button>
  </form>

  <ul>
    <?php
      $tasks = getTasks($pdo);
      foreach ($tasks as $task) {
        echo "<li>";
        echo "<input type='checkbox' class='complete-task' " . ($task['completed'] ? 'checked' : '') . " data-id='" . $task['id'] . "'>";
        echo " " . $task['task'];
        echo " <a href='?delete=" . $task['id'] . "'>حذف</a>";
        echo "</li>";
      }
    ?>
  </ul>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function() {
      $('.complete-task').change(function() {
        var taskId = $(this).data('id');
        $.ajax({
          url: '',
          method: 'POST',
          data: { task_id: taskId },
          success: function(response) {
            // در صورت نیاز، می‌توانید پیام موفقیت را نمایش دهید
          }
        });
      });
    });
  </script>

</body>
</html>

بخش پنجم: بهبود رابط کاربری با AJAX

برای بهبود تجربه کاربری، می‌توانیم از AJAX برای به‌روزرسانی وضعیت وظیفه بدون نیاز به رفرش صفحه استفاده کنیم. کد بالا شامل یک اسکریپت jQuery است که این کار را انجام می‌دهد.

بخش ششم: نکات تکمیلی و پیشنهادات

این یک لیست وظایف ساده است که می‌تواند به عنوان یک نقطه شروع برای پروژه‌های بزرگتر مورد استفاده قرار گیرد. در اینجا چند نکته تکمیلی و پیشنهاد برای بهبود آن ارائه می‌شود:

  • اعتبارسنجی ورودی‌ها: قبل از ذخیره وظایف در پایگاه داده، ورودی‌ها را اعتبارسنجی کنید تا از ورود داده‌های نامعتبر جلوگیری شود.
  • پیاده‌سازی سیستم احراز هویت: برای امنیت بیشتر، یک سیستم احراز هویت اضافه کنید تا فقط کاربران مجاز بتوانند به لیست وظایف دسترسی داشته باشند.
  • استفاده از فریم‌ورک‌های PHP: استفاده از فریم‌ورک‌های PHP مانند Laravel یا Symfony می‌تواند توسعه را سریع‌تر و آسان‌تر کند.
  • طراحی رابط کاربری جذاب‌تر: با استفاده از CSS و JavaScript، می‌توانید رابط کاربری را جذاب‌تر و کاربرپسندتر کنید.
  • اضافه کردن قابلیت‌های بیشتر: می‌توانید قابلیت‌های دیگری مانند تعیین اولویت، تاریخ سررسید و یادآوری را به لیست وظایف اضافه کنید.

با استفاده از این راهنما، می‌توانید یک لیست وظایف کاربردی و کارآمد با PHP ایجاد کنید. این سیستم می‌تواند به شما در مدیریت زمان و افزایش بهره‌وری کمک کند.

پروژه‌های کوچک و تمرینی

فیسبوکXپینترستواتس اپایمیل

مطالب مرتبط ...