Gunakan PHP dan jQuery UI untuk membangunkan sistem pengurusan tugasan dalam talian untuk membantu pengguna mengurus tugas mereka dengan cekap

Dalam beberapa tahun kebelakangan ini, dengan perkembangan Internet yang berterusan, pelbagai tugasan dalam kehidupan kita terus meningkat Kadangkala kita terlupa untuk menyelesaikan perkara-perkara tertentu kerana kita sibuk Oleh itu, sistem pengurusan tugas yang baik sangat diperlukan. Hari ini saya akan mengesyorkan sistem pengurusan tugasan dalam talian yang dibangunkan menggunakan PHP dan UI jQuery, membolehkan anda mengurus tugasan anda dengan cekap.

1. System Requirements

Pelaksanaan sistem ini memerlukan teknologi berikut:

• PHP 7
• MySQL
• Apache 2.4
• Query CS
• HTML

2. JavaScript

Reka Bentuk Sistem

• Matlamat sistem adalah untuk membolehkan pengguna menambah, mengemas kini dan memadam tugasan pada bila-bila masa, serta menyusun dan menapis tugas. Oleh itu, sistem harus direka bentuk untuk membolehkan pengguna mencari tugas dan maklumat yang mereka perlukan dengan cepat.

Reka Bentuk Pangkalan Data

Kita boleh mencipta pangkalan data yang dipanggil "senarai_tugas" yang mengandungi dua jadual berikut:

pengguna: VARCHAR

		nama kata laluan
		INT

VARCHAR

menyimpan ID pengguna, nama pengguna dan kata laluan.

tasks:selesaidue_dateVARCHAR

		id	user_id	task_name
				INT

BOOLEAN

• DATE

Simpan ID tugas, ID pengguna, nama tugas, sama ada ia telah selesai dan tarikh akhir tugasan.

Sistem log masuk

• Sistem pengurusan tugas mesti mempunyai sistem log masuk untuk mengesahkan identiti pengguna dan memastikan keselamatan. Pertama, pengguna perlu mengisi nama pengguna dan kata laluan mereka untuk memasuki sistem. Berikut ialah kod asas menggunakan PHP dan pangkalan data MySQL:

if(isset($_POST['submit'])) {
  $username = $_POST['username'];
  $password = $_POST['password'];

  $sql = "SELECT * FROM users WHERE user_name = '$username' AND password = '$password';";
  $result = mysqli_query($conn, $sql);

  if(mysqli_num_rows($result) !== 1) {
    echo "用户名或密码错误！";
  } else {
    session_start();
    $_SESSION['username'] = $username;
    header('Location: index.php');
  }
}

Kod ini menyemak pangkalan data untuk padanan nama pengguna dan kata laluan dan mencipta sesi baharu dan kemudian menyimpan nama pengguna dalam pembolehubah sesi supaya untuk kegunaan seterusnya.

Buat Tugasan

• Salah satu ciri terpenting dalam sistem ialah menyediakan pengguna cara untuk mencipta tugasan baharu. Tugas hendaklah termasuk maklumat seperti nama tugas, tarikh akhir dan perihalan tugas. Kita boleh menggunakan kod berikut untuk mencipta tugasan baharu:

if(isset($_POST['submit_task'])) {
  $name = $_POST['task_name'];
  $description = $_POST['description'];
  $due_date = $_POST['due_date'];
  $user_id = $_SESSION['user_id'];

  $sql = "INSERT INTO tasks (user_id, task_name, description, completed, due_date)
          VALUES ('$user_id', '$name', '$description', false, '$due_date')";
  mysqli_query($conn, $sql);
}

Kod ini menyimpan input borang dalam pangkalan data MySQL dan menetapkan status penyelesaian tugas kepada palsu (menunjukkan bahawa ia tidak selesai).

Paparkan senarai tugas

Seterusnya, kita perlu mereka bentuk antara muka untuk membolehkan pengguna melihat senarai tugas mereka. Kami boleh menggunakan kawalan menu dalam UI jQuery untuk memaparkan senarai tugas dan membenarkan pengguna mengisih dan menapis.

Berikut ialah perancah senarai tugas asas:

• <div id="task-list">
    <ul>
      <li><a href="#" class="filter" data-value="all">所有任务</a></li>
      <li><a href="#" class="filter" data-value="due_today">今天过期</a></li>
      <li><a href="#" class="filter" data-value="due_soon">即将到期</a></li>
      <li><a href="#" class="filter" data-value="completed">已完成</a></li>
      <li><a href="#" class="filter" data-value="not_completed">未完成</a></li>
    </ul>
    <div class="tasks">
  
    </div>
  </div>

Kod ini membalut kawalan menu dan senarai tugasan dalam elemen div. Kami kemudiannya boleh menggunakan kod berikut untuk memaparkan dan menapis senarai tugas:

function getTasks(filter) {
  $.ajax({
    url: 'get_tasks.php',
    data: { filter: filter },
    success: function(result) {
      $('.tasks').html(result);
    }
  });
}

$(function() {
  $('.filter').click(function(e) {
    e.preventDefault();
    var filter = $(this).data('value');
    getTasks(filter);
    $('.filter').removeClass('selected');
    $(this).addClass('selected');
  });

  getTasks('all');
});

Kod ini menggunakan item penapis dalam menu UI jQuery untuk mencetuskan fungsi getTasks() dan menggunakan sumber data dalam fail get_tasks.php untuk mendapatkan senarai tugas, dan akhir sekali Masukkan senarai tugas ke dalam HTML.

Kemas kini Tugas

• Untuk memastikan ketepatan maklumat tugas, pengguna mesti dibekalkan dengan cara untuk mengemas kini status dan butiran tugas. Kami boleh menggunakan kod berikut untuk melaksanakan fungsi ini:

$(function() {
  $(document).on('click', '.task .edit', function() {
    var task_id = $(this).parent().data('task-id');
    $(this).parent().find('.task-details').hide();
    $(this).parent().find('.edit-details').show();
    $(this).hide();
  });

  $(document).on('submit', '.task .edit-details form', function(e) {
    e.preventDefault();
    var task_id = $(this).parent().data('task-id');
    var name = $(this).find('.name').val();
    var description = $(this).find('.description').val();
    var due_date = $(this).find('.due-date').val();
    $.ajax({
      url: 'update_task.php',
      type: 'POST',
      data: {
        task_id: task_id,
        name: name,
        description: description,
        due_date: due_date
      },
      success: function() {
        $('.edit-details').hide();
        $('.task-details').show();
        $('.edit').show();
        getTasks($('#filter .selected').data('value'));
      }
    });
  });
});

Kod ini menggunakan kawalan dialog dalam UI jQuery untuk memaparkan butiran tugas dan membenarkan pengguna mengemas kini maklumat tugas. Apabila pengguna mengedit tugas, kami menyembunyikan butiran tugas dan menunjukkan borang edit. Selepas pengguna menyerahkan borang, kami akan menggunakan AJAX untuk menghantar maklumat yang dikemas kini ke pelayan.

Padam Tugasan

3. Akhir sekali, kami harus menyediakan pengguna cara untuk memadamkan tugasan daripada senarai tugasan. Berikut ialah kod untuk memadam tugas:

$(document).on('click', '.delete', function() {
  var task_id = $(this).parent().data('task-id');
  if(confirm('确定要删除这个任务吗？')) {
    $.ajax({
      url: 'delete_task.php',
      data: { task_id: task_id },
      type: 'POST',
      success: function() {
        getTasks($('#filter .selected').data('value'));
      }
    });
  }
});

Kod ini menggunakan kawalan dialog dalam UI jQuery untuk menunjukkan dialog pengesahan dan membenarkan pengguna memadamkan tugasan. Ciri ini sangat penting kerana ia membolehkan pengguna memadamkan tugasan yang tidak lagi diperlukan atau telah ditambah secara tidak sengaja.

🎜🎜Ringkasan🎜🎜🎜Kami memperkenalkan cara menggunakan PHP dan jQuery UI untuk melaksanakan sistem pengurusan tugasan dalam talian. Fungsi yang disediakan oleh sistem termasuk log masuk pengguna, penciptaan tugas, pengasingan dan penapisan tugas, kemas kini dan pemadaman tugas. Menggunakan sistem ini, pengguna boleh menguruskan jadual dan tugas mereka dengan mudah dan meningkatkan produktiviti mereka. 🎜

Atas ialah kandungan terperinci Gunakan PHP dan jQuery UI untuk membangunkan sistem pengurusan tugasan dalam talian untuk membantu pengguna mengurus tugas mereka dengan cekap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!