PHPでToDoリストを作る方法
PHPでToDoリストを作る方法を紹介します。このサンプルでは、タスクの追加・完了・一覧表示を行い、内容をCSVファイルへ保存できます。登録したタスクはページを再読み込みしても保持されるため、簡単なタスク管理や作業管理、買い物リストなどを手軽に作成したい場合に利用できます。
コードについて
本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
PHP ToDoリスト
資料を作成する
メールを確認する
コードをコピーして使おう！
<?php
// ToDoデータを保存するCSVファイルです
$csv_file = 'data.csv';
// HTMLエスケープ用です
function h($value)
{
return htmlspecialchars($value, ENT_QUOTES, 'UTF-8');
}
// CSVデータを読み込みます
function load_tasks($csv_file)
{
$tasks = [];
if (file_exists($csv_file)) {
$fp = fopen($csv_file, 'r');
if ($fp) {
fgetcsv($fp);
while (($row = fgetcsv($fp)) !== false) {
if (count($row) >= 3) {
$tasks[] = [
'id' => $row[0],
'task' => $row[1],
'done' => $row[2]
];
}
}
fclose($fp);
}
}
return $tasks;
}
// CSVへ保存します
function save_tasks($csv_file, $tasks)
{
$fp = fopen($csv_file, 'w');
fputcsv($fp, ['id', 'task', 'done']);
foreach ($tasks as $task) {
fputcsv($fp, [
$task['id'],
$task['task'],
$task['done']
]);
}
fclose($fp);
}
// データを読み込みます
$tasks = load_tasks($csv_file);
// タスク追加処理です
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['task'])) {
$task_text = trim($_POST['task']);
if ($task_text !== '') {
// 最大IDを取得します
$max_id = 0;
foreach ($tasks as $task) {
if ((int)$task['id'] > $max_id) {
$max_id = (int)$task['id'];
}
}
$tasks[] = [
'id' => $max_id + 1,
'task' => $task_text,
'done' => '0'
];
save_tasks($csv_file, $tasks);
}
header('Location: index.php');
exit;
}
// 完了状態切り替え処理です
if (isset($_GET['toggle'])) {
foreach ($tasks as $key => $task) {
if ($task['id'] == $_GET['toggle']) {
$tasks[$key]['done'] = ($task['done'] === '1') ? '0' : '1';
break;
}
}
save_tasks($csv_file, $tasks);
header('Location: index.php');
exit;
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>PHP ToDoリスト</title>
<style>
body{
font-family:sans-serif;
background:#f8fafc;
margin:40px;
}
.php-todo-list_wrap{
max-width:800px;
margin:auto;
padding:24px;
background:#ffffff;
border:1px solid #e5e7eb;
border-radius:18px;
}
.php-todo-list_title{
font-size:22px;
font-weight:bold;
margin-bottom:20px;
}
.php-todo-list_form{
display:flex;
gap:10px;
margin-bottom:20px;
}
.php-todo-list_input{
flex:1;
padding:10px;
}
.php-todo-list_button{
padding:10px 20px;
}
.php-todo-list_item{
display:flex;
align-items:center;
gap:14px;
padding:14px;
border:1px solid #d1d5db;
border-radius:10px;
margin-top:10px;
}
.php-todo-list_toggle{
width:34px;
height:34px;
border:4px solid #8b8b95;
border-radius:50%;
background:#ffffff;
position:relative;
flex-shrink:0;
}
.php-todo-list_toggle.done{
background:#0f766e;
border-color:#0f766e;
}
.php-todo-list_toggle.done::after{
content:"";
position:absolute;
left:50%;
top:45%;
width:8px;
height:14px;
border-right:4px solid #ffffff;
border-bottom:4px solid #ffffff;
transform:translate(-50%,-50%) rotate(45deg);
}
.php-todo-list_text.done{
text-decoration:line-through;
color:#6b7280;
}
</style>
</head>
<body>
<div class="php-todo-list_wrap">
<div class="php-todo-list_title">PHP ToDoリスト</div>
<form class="php-todo-list_form" method="post">
<input
class="php-todo-list_input"
type="text"
name="task"
placeholder="タスクを入力してください"
>
<button class="php-todo-list_button" type="submit">
追加
</button>
</form>
<?php foreach ($tasks as $task): ?>
<div class="php-todo-list_item">
<a
href="?toggle=<?= h($task['id']) ?>"
class="php-todo-list_toggle <?= $task['done']==='1' ? 'done' : '' ?>"
></a>
<span class="php-todo-list_text <?= $task['done']==='1' ? 'done' : '' ?>">
<?= h($task['task']) ?>
</span>
</div>
<?php endforeach; ?>
</div>
</body>
</html>
ファイル構成と設置方法
このサンプルでは、index.php と data.csv を同じフォルダに配置して使用します。タスク名と完了状態は data.csv に保存されます。
sample/
├── index.php
└── data.csv
index.php と data.csv をサーバーへアップロードし、ブラウザから index.php にアクセスしてください。タスクを追加すると data.csv に追記され、丸いチェックボタンをクリックすると完了状態が 0 と 1 で切り替わります。
コメント