近年、インターネットの発展に伴い、私たちの生活の中でさまざまなタスクが増え続けており、忙しさのあまり忘れてしまうこともあるため、適切なタスク管理システムが非常に必要です。今日は、PHP と jQuery UI を使用して開発され、タスクを効率的に管理できるオンライン タスク管理システムをお勧めします。
このシステムの実装には次のテクノロジが必要です:
このシステムの目標は、ユーザーがいつでもタスクを追加、更新、削除できるだけでなく、タスクを並べ替えたりフィルタリングしたりできるようにすることです。したがって、システムは、ユーザーが必要なタスクや情報をすぐに見つけられるように設計する必要があります。
「task_list」という名前のデータベースを作成できます。このデータベースには、次の 2 つのテーブルが含まれます:
users :
| id | ユーザー名 | パスワード |
|---|---|---|
| INT | VARCHAR | VARCHAR |
タスク:
| id | user_id | task_name | 完了 | due_date |
|---|---|---|---|---|
| INT | 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');
}
}このコードは、データベースでユーザーのユーザー名とパスワードが一致するかどうかを確認し、新しいセッションを作成して、そのユーザー名をセッション変数に保存します。その後の使用。
システムの最も重要な機能の 1 つは、ユーザーに新しいタスクを作成する方法を提供することです。タスクには、タスク名、期限、タスクの説明などの情報を含める必要があります。次のコードを使用して、新しいタスクを作成できます。
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 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
