찾다

집 >백엔드 개발 >PHP 튜토리얼 >PHP 및 jQuery UI를 사용하여 사용자가 작업을 효율적으로 관리할 수 있도록 돕는 온라인 작업 관리 시스템 개발

PHP 및 jQuery UI를 사용하여 사용자가 작업을 효율적으로 관리할 수 있도록 돕는 온라인 작업 관리 시스템 개발

WBOY
WBOY원래의
2023-06-27 12:02:321346검색

최근에는 인터넷의 지속적인 발전으로 인해 우리 삶의 다양한 업무가 계속 늘어나고 있습니다. 때로는 바쁘기 때문에 특정 업무를 완료하는 것을 잊어버릴 때도 있습니다. 따라서 좋은 업무 관리 시스템이 매우 필요합니다. 오늘은 작업을 효율적으로 관리할 수 있도록 PHP와 jQuery UI를 사용하여 개발된 온라인 작업 관리 시스템을 추천하겠습니다.

  1. 시스템 요구 사항

이 시스템을 구현하려면 다음 기술이 필요합니다.

  • PHP 7
  • MySQL
  • Apache 2.4
  • jQuery UI
  • HTML
  • CSS
  • JavaScript
  1. 시스템 디자인

시스템의 목표는 사용자가 언제든지 작업을 추가, 업데이트, 삭제할 수 있을 뿐만 아니라 작업을 정렬하고 필터링할 수 있도록 하는 것입니다. 따라서 사용자가 필요한 작업과 정보를 빠르게 찾을 수 있도록 시스템을 설계해야 합니다.

  • 데이터베이스 디자인

다음 두 테이블을 포함하는 "task_list"라는 데이터베이스를 만들 수 있습니다.

INT

VARCHARVARCHARtasks:user_id
은 사용자 ID, 사용자 이름 및 비밀번호를 저장합니다.
id
task_name
  • completed
due_date

INT 작업 ID, 사용자 ID, 작업 이름, 완료 여부 및 작업 기한을 저장합니다. 작업 관리 시스템에는 사용자 신원 확인과 보안 확보를 위한 로그인 시스템이 있어야 합니다. 먼저, 사용자는 시스템에 들어가려면 사용자 이름과 비밀번호를 입력해야 합니다. 다음은 PHP와 MySQL 데이터베이스를 사용하는 기본 코드입니다. 이 코드는 데이터베이스에서 해당 사용자의 사용자 이름과 비밀번호가 일치하는지 확인하고 새 세션을 만든 다음 나중에 사용할 수 있도록 사용자 이름을 세션 변수에 저장합니다. . 시스템에서 가장 중요한 기능 중 하나는 사용자에게 새로운 작업을 만드는 방법을 제공하는 것입니다. 작업에는 작업 이름, 기한, 작업 설명과 같은 정보가 포함되어야 합니다. 다음 코드를 사용하여 새 작업을 만들 수 있습니다.
INT VARCHAR BOOLEAN DATE
로그인 시스템 
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');
  }
}
 작업 만들기 
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);
}
    이 코드는 양식 입력을 MySQL 데이터베이스에 저장하고 작업 완료 상태를 false(완료되지 않았음을 나타냄)로 설정합니다.
  • 작업 목록 표시

다음으로 사용자가 작업 목록을 볼 수 있는 인터페이스를 디자인해야 합니다. jQuery UI의 메뉴 컨트롤을 사용하여 작업 목록을 표시하고 사용자가 정렬 및 필터링할 수 있도록 할 수 있습니다.

기본 작업 목록 스캐폴딩은 다음과 같습니다. 

<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>
    이 코드는 메뉴 컨트롤과 작업 목록을 div 요소로 래핑합니다. 그런 다음 다음 코드를 사용하여 작업 목록을 표시하고 필터링할 수 있습니다. 
  • 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');
});
    • 이 코드는 jQuery UI 메뉴의 필터 항목을 사용하여 getTasks() 함수를 트리거하고 get_tasks.php 파일의 데이터 소스를 사용하여 작업 목록, 마지막으로 작업 목록을 HTML에 삽입합니다.

작업 업데이트

    작업 정보의 정확성을 보장하려면 사용자에게 작업의 상태와 세부 정보를 업데이트할 수 있는 방법을 제공해야 합니다. 다음 코드를 사용하여 이 기능을 구현할 수 있습니다. 
  • $(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'));
      }
    });
  });
});
    • 이 코드는 jQuery UI의 대화 상자 컨트롤을 사용하여 작업 세부 정보를 표시하고 사용자가 작업 정보를 업데이트할 수 있도록 합니다. 사용자가 작업을 편집하면 작업 세부정보를 숨기고 편집 양식을 표시합니다. 사용자가 양식을 제출한 후 AJAX를 사용하여 업데이트된 정보를 서버에 보냅니다.

작업 삭제

마지막으로 사용자에게 작업 목록에서 작업을 삭제할 수 있는 방법을 제공해야 합니다. 다음은 작업 삭제를 위한 코드입니다. 

$(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'));
      }
    });
  }
});

이 코드는 jQuery UI의 대화 상자 컨트롤을 사용하여 확인 대화 상자를 표시하고 사용자가 작업을 삭제할 수 있도록 합니다. 이 기능은 사용자가 더 이상 필요하지 않거나 실수로 추가된 작업을 삭제할 수 있으므로 매우 중요합니다.

  • 요약

PHP와 jQuery UI를 활용하여 온라인 작업 관리 시스템을 구현하는 방법을 소개했습니다. 시스템에서 제공하는 기능에는 사용자 로그인, 작업 생성, 작업 정렬 및 필터링, 작업 업데이트 및 삭제가 포함됩니다. 이 시스템을 이용하면 사용자는 자신의 일정과 업무를 쉽게 관리하고 생산성을 높일 수 있습니다.

위 내용은 PHP 및 jQuery UI를 사용하여 사용자가 작업을 효율적으로 관리할 수 있도록 돕는 온라인 작업 관리 시스템 개발의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：PHP를 사용하여 인간-기계 확인 코드를 구현하는 방법다음 기사：PHP를 사용하여 인간-기계 확인 코드를 구현하는 방법

관련 기사

더보기