최근에는 인터넷의 지속적인 발전으로 인해 우리 삶의 다양한 업무가 계속 늘어나고 있습니다. 때로는 바쁘기 때문에 특정 업무를 완료하는 것을 잊어버릴 때도 있습니다. 따라서 좋은 업무 관리 시스템이 매우 필요합니다. 오늘은 작업을 효율적으로 관리할 수 있도록 PHP와 jQuery UI를 사용하여 개발된 온라인 작업 관리 시스템을 추천하겠습니다.
이 시스템을 구현하려면 다음 기술이 필요합니다.
시스템의 목표는 사용자가 언제든지 작업을 추가, 업데이트, 삭제할 수 있을 뿐만 아니라 작업을 정렬하고 필터링할 수 있도록 하는 것입니다. 따라서 사용자가 필요한 작업과 정보를 빠르게 찾을 수 있도록 시스템을 설계해야 합니다.
다음 두 테이블을 포함하는 "task_list"라는 데이터베이스를 만들 수 있습니다.
INT
VARCHAR| 은 사용자 ID, 사용자 이름 및 비밀번호를 저장합니다. | ||
|---|---|---|
| id |
| INT | VARCHAR | BOOLEAN | DATE | |
|---|---|---|---|---|
| 로그인 시스템 | 작업 관리 시스템에는 사용자 신원 확인과 보안 확보를 위한 로그인 시스템이 있어야 합니다. 먼저, 사용자는 시스템에 들어가려면 사용자 이름과 비밀번호를 입력해야 합니다. 다음은 PHP와 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');
}
}로그인 후 복사 | 이 코드는 데이터베이스에서 해당 사용자의 사용자 이름과 비밀번호가 일치하는지 확인하고 새 세션을 만든 다음 나중에 사용할 수 있도록 사용자 이름을 세션 변수에 저장합니다. . 작업 만들기 |
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);
}다음으로 사용자가 작업 목록을 볼 수 있는 인터페이스를 디자인해야 합니다. 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>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');
});$(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'));
}
});
});
});마지막으로 사용자에게 작업 목록에서 작업을 삭제할 수 있는 방법을 제공해야 합니다. 다음은 작업 삭제를 위한 코드입니다.
$(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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
