実践プロジェクト | Code-ch https://code-ch.com Thu, 27 Feb 2025 23:38:04 +0000 ja hourly 1 https://code-ch.com/wp-content/uploads/2024/04/logo_code-ch-150x150.png 実践プロジェクト | Code-ch https://code-ch.com 32 32 PHPで作る！シンプルなTodoリスト – データベース連携編 https://code-ch.com/php-project-todolist-with-db/ https://code-ch.com/php-project-todolist-with-db/#respond Mon, 24 Feb 2025 09:55:11 +0000 https://code-ch.com/?p=713

前回の記事では、セッションでの一時的なデータ保存を実装しました。今回は、実践的なデータベース管理へとステップアップしましょう。この記事では、PHPとMySQLを使ってTodoリストを改良し、永続的にデータを保存できるようにします。

前回の記事はこちら
PHPで作る！シンプルなTodoリスト入門
PHPの基本機能を使ってTodoリストを作成します。セッション管理、フォーム処理、配列操作など、Web開発の基礎が学べる実践的なプロジェクトです。
code-ch.com
2025.02.02
XAMPPの導入がまだの方はこちら
【PHP】環境構築（Windows11）
PHPの実行環境を構築する手順を分かりやすく解説。XAMPPを使ったローカル環境で、PHPスクリプトを実行します。
code-ch.com
2024.09.16

データベースの作成

まずXAMPP Control Panelを開き、ApacheとMySQLをStartします。

次にMySQLの行にあるAdminをクリックします。

するとブラウザでphpmyadminが開きます。

phpmyadminとは

phpMyAdminはMySQLをブラウザ上で簡単に扱えるツールです。データベースやテーブルの編集をGUI（マウスでの操作）で行うことができます。

サイドバーの「新規作成」からデータベースを作成します。今回はtodo_dbという名前にします。

テーブルの作成

データベースを作成したら次にテーブルを作成するのですが、その前にTodoを構成するデータを洗い出していきます。

Todoを構成する要素、およびデータの形式
  • id – 文字列
  • text – 文字列
  • 作成日時 – 日時

テーブル名は「todos」、カラム数は3（id・Todo・作成日時）です。

テーブルを作成すると、カラムの詳細を設定する画面に移ります。下記画像のように変更していきます。（色のついている箇所です）

Todoを構成する要素、およびMySQLでのデータ型
  • id – VARCHAR(13)
    • 文字列を格納できます
    • カッコ内の数字は最大文字数を表します
    • IDなどの文字列型の識別子によく使用されます
  • text – TEXT
    • 長い文字列データを格納できます
    • メモや説明文など、長さが決まっていない文字列データに向いています
  • created_at – DATETIME
    • 日付と時刻を格納できます
    • ‘YYYY-MM-DD HH:MM:SS’ の形式で保存されます
    • current_timestampをデフォルト値とすることで、レコード作成時の時刻が自動的に設定されます
    • タイムスタンプとして使用され、データの作成・更新時刻の管理に適しています

上記入力後、「保存する」を押すとテーブルが完成します。これでデータを保存できるようになりました！

php側の処理

phpのコーディングに移ります。config.phpを新たに作成して、データベースに関する処理を記述していきます。

<?php
define('DB_HOST', 'localhost');
define('DB_NAME', 'todo_db');
define('DB_USER', 'root');
define('DB_PASS', '');

try {
    $pdo = new PDO(
        "mysql:host=" . DB_HOST . ";dbname=" . DB_NAME,
        DB_USER,
        DB_PASS
    );
} catch (PDOException $e) {
    exit('データベース接続に失敗しました。' . $e->getMessage());
}

定数の定義

define('DB_HOST', 'localhost');
define('DB_NAME', 'todo_db');
define('DB_USER', 'root');
define('DB_PASS', '');

まずdefine構文で定数を宣言しています。

Manual – define関数
define(定数名, 値);

指定した名前で定数を作成します。定数は変更できず、内容が変化しないことが保証される名前が必要なときに使用されます。

上から順に、ホスト名、データベース名、ユーザー名、パスワードと定義しています。

データベースとの接続

次のtry節ではデータベースと接続しています。PDOというオブジェクトを使うことで、DBとの接続をシンプルに行えます。

try {
    $pdo = new PDO(
        "mysql:host=" . DB_HOST . ";dbname=" . DB_NAME . ";charset=utf8mb4",
        DB_USER,
        DB_PASS
    );
} catch (PDOException $e) {
    exit('データベース接続に失敗しました。' . $e->getMessage());
}
Manual – PDO

pdoはmysqlのほか、postgreSQLやSQLiteなどのデータベースと接続できます。データベースが何であるかにかかわらず、同じ関数を使用してクエリの発行やデータの取得が行えます。

new PDO(dsn, ユーザー名, パスワード);

dsn(Data Source Name)にはデータベースに接続するために必要な情報（データベースの種類、ホスト名、データベース名、文字セットなど）が記載されています。

今回使っているdsnは以下のようになります。
“mysql:host=localhost; dbname=todo_db; charset=utf8mb4”

  • mysql: [データベース管理システム]
  • host=localhost [ホスト名]
  • dbname=todo_db [データベース名]
  • charset=utf8mb4 [文字セット]

フロントエンドとデータベースの連携

先ほど見たconfig.phpファイルを読み込んで、データベースに接続します。

<?php
require_once 'config.php';

// Todo追加
function addTodo($text)
{
    global $pdo;
    $id = uniqid();
    $stmt = $pdo->prepare("INSERT INTO todos (id, text) VALUES (?, ?)");
    return $stmt->execute([$id, $text]);
}

// Todo一覧取得
function getTodos()
{
    global $pdo;
    $stmt = $pdo->query("SELECT * FROM todos ORDER BY created_at DESC");
    return $stmt->fetchAll(PDO::FETCH_ASSOC);
}

// Todo削除
function deleteTodo($id)
{
    global $pdo;
    $stmt = $pdo->prepare("DELETE FROM todos WHERE id = ?");
    return $stmt->execute([$id]);
}

// フォーム処理
if (isset($_POST['add']) && !empty($_POST['todo'])) {
    addTodo($_POST['todo']);
}

if (isset($_POST['delete']) && !empty($_POST['id'])) {
    deleteTodo($_POST['id']);
}

// Todo一覧取得
$todos = getTodos();
?>

<!DOCTYPE html>
<html>

<head>
    <title>My Todo List</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <h1>My Todo List</h1>

        <form method="POST" class="add-form">
            <input type="text" name="todo" placeholder="新しいタスクを入力" required>
            <button type="submit" name="add">追加</button>
        </form>

        <div class="todo-list">
            <?php foreach ($todos as $todo): ?>
                <div class="todo-item">
                    <div class="todo-content">
                        <div class="todo-text"><?php echo htmlspecialchars($todo['text']); ?></div>
                    </div>
                    <form method="POST" class="form-inline">
                        <input type="hidden" name="id" value="<?php echo $todo['id']; ?>">
                        <button type="submit" name="delete" class="delete-btn">delete</button>
                    </form>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</body>

</html>

Todo追加機能

function addTodo($text)
{
    global $pdo;
    $id = uniqid();
    $stmt = $pdo->prepare("INSERT INTO todos (id, text) VALUES (?, ?)");
    return $stmt->execute([$id, $text]);
}

この関数で新しいTodoをデータベースに追加します。
まず関数の中で外部の$pdo変数を使うために、global宣言をしています。

（※今回はシンプルな解説にするためにglobalを使用しています。基本的には、管理が難しくなるためglobal宣言は避けた方が良いです。）

次に、PDOのprepare関数によってSQL文をセットしています。IDとTodoをINSERT文に安全に挿入するために、INSERT文の中には疑問符 (?) パラメータマークを使っています。最後のexecute関数に、疑問符パラメータの数と同じ要素数の配列を引数として渡します。配列の中身の順番と、疑問符パラメータの順番が一致するようにしましょう。

Manual – prepare関数

SQL文に変数を挿入するなら、そのまま結合なり展開なりしてしまえば楽なのでは？と思いますが、そうすると攻撃者が悪意のあるSQL文を挿入、実行できてしまいます。この攻撃をSQLインジェクションと言います。

SQL文をセットする際に変数を挿入したいときは、PDOのprepare関数を使います。

$pdo->prepare("SQL文")

prepare関数でSQL文をセットした後、execute関数により後から変数を代入しています。この一連の流れはプリペアドステートメントと呼ばれ、SQL文の中に安全に変数を挿入できます。このひと手間を怠るとセキュリティホールが生まれることがありますので、ユーザの入力値をSQL文に使用する場合は必ず行ってください。

Todo一覧取得機能

function getTodos() {
    global $pdo;
    $stmt = $pdo->query("SELECT * FROM todos ORDER BY created_at DESC");
    return $stmt->fetchAll(PDO::FETCH_ASSOC);
}

この関数でデータベースから全てのTodoを取得しています。
Todoの取得には変数を使用しないため、PDOのprepare関数ではなくquery関数でSQL文をセットします。created_atの降順（新しい順）で並び替えしています。

最後に、$stmtのfetchAll関数によりTodoを全て取得して、returnしています。引数には、データの取得形式を指定します。
PDO::FETCH_ASSOCは、[カラム名1 => 値1, カラム名2 => 値2, …]のような連想配列でデータを取得します。

$todos = getTodos();

今回は$todos変数にTodoのリストを代入しています。

フォーム処理部分

if (isset($_POST['add']) && !empty($_POST['todo'])) {
    addTodo($_POST['todo']);
}

if (isset($_POST['delete']) && !empty($_POST['id'])) {
    deleteTodo($_POST['id']);
}

2つ条件分岐を記述しています。

1つ目のif文はボタンの押下判定とテキストの存在判定を行い、Todoの追加処理をしています。2つ目のif文はボタンの押下判定とテキストの存在判定を行い、削除処理をしています。

フロントエンド側の処理

フロントエンド側は前回とほぼ変わっていません。一点、前回はセッションからTodoリストを取得、foreach文で回していたので、そこを$todos変数からの取得に変更しています。

<?php foreach ($todos as $todo): ?>
    // 略
<?php endforeach; ?>

これでデータベースとの連携が完了し、Todoリストを永続的に保存できるようになりました。お疲れさまでした！

]]> https://code-ch.com/php-project-todolist-with-db/feed/ 0 PHPで作る！シンプルなTodoリスト入門 https://code-ch.com/php-project-todolist/ Sun, 02 Feb 2025 09:04:57 +0000 https://code-ch.com/?post_type=learning-projects&p=676 この記事ではPHPでTodoリストを制作していきます。セッション管理、フォーム処理、配列操作など、Web開発の基礎が学べる実践的なプロジェクトになっています。

Todoリストの概要

今回実装していくTodoリストはシンプルな機能を盛り込んでいます。機能の一覧は以下です。

  • メモの追加
  • メモの一覧
  • メモの削除
完成イメージ

必要な前提知識

  • HTML/CSSの基本
  • PHPの基本文法
  • フォームの仕組み
  • 配列の扱い方

phpの環境構築がまだの方は、次の記事から導入してください。

【PHP】環境構築（Windows11）
PHPの実行環境を構築する手順を分かりやすく解説。XAMPPを使ったローカル環境で、PHPスクリプトを実行します。
code-ch.com
2024.09.16

ソースコードテンプレート

下記ソースコードに処理を追加していきます。

<?php
// ※バックエンドの処理を記述していきます
?>

<!DOCTYPE html>
<html>

<head>
    <title>My Todo List</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <h1>My Todo List</h1>
        <!-- ※フロントエンドの処理を記述していきます -->
    </div>
</body>

</html>

スタイリングが必要であれば以下のcssを利用してください。（任意）

css（クリックで開く） 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Helvetica Neue",
        Arial,
        "Hiragino Kaku Gothic ProN",
        "Hiragino Sans",
        Meiryo,
        sans-serif;
}

body {
    background-color: #f5f5f5;
    color: rgba(0, 0, 0, 0.87);
}

.container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

h1 {
    color: #1976d2;
    font-weight: 60 0;
    margin: 2rem 0;
    text-align: center;
}

.add-form {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    display: flex;
    gap: 10px;
}

.add-form input[type="text"] {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    font-size: 16px;
    transition: border-color 0.2s;
}

.add-form input[type="text"]:focus {
    outline: none;
    border-color: #1976d2;
}

button {
    background: #1976d2;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s;
}

button:hover {
    background: #1565c0;
}

.todo-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.todo-item {
    background: white;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: transform 0.2s;
}

.todo-item:hover {
    transform: translateY(-2px);
}

.todo-content {
    flex: 1;
}

.todo-text {
    font-size: 16px;
}

.delete-btn {
    background: transparent;
    color: #f44336;
    padding: 8px;
    min-width: auto;
}

.delete-btn:hover {
    background: rgba(244, 67, 54, 0.1);
}

@media (max-width: 600px) {
    .container {
        padding: 10px;
    }

    .add-form {
        flex-direction: column;
    }
}

メモ入力機能 ※フロントエンド側

メモを追加するには、ユーザーが入力したテキストをサーバ側で受け取り、保持しておく必要があります。まずはメモ入力フォームを作成していきます。

        <form method="POST" class="add-form">
            <input type="text" name="todo" placeholder="新しいタスクを入力" required>
            <button type="submit" name="add">追加</button>
        </form>

これはユーザーが入力したテキストを、同ページにPOSTする処理です。追加ボタンが押されると、フォーム内のデータがまとめてWebサーバに送られます。

メモ保存機能　※バックエンド側

送られたデータは、セッションによって保持しています。セッションはサーバ内にデータを保存し、ブラウザを閉じるまでデータを保持することができます。

注意点として、セッションを使うにはsession_start()を行う必要があります。session_start()することで、セッション本体にあたるグローバル変数$_SESSIONにアクセスできるようになります。

セッションの初期化

session_start();

if (!isset($_SESSION['todos'])) {
    $_SESSION['todos'] = [];
}

まずセッションをスタートして、セッションにメモが格納されていない場合、空の配列で初期化します。これにより、エラーを防ぎ、安全にデータを追加できます。

isset関数は、連想配列に指定のキーが存在する場合にtrueを返します。今回は関数の前に!がついているため、条件が反転されます。グローバル変数$_SESSIONに’todos’がなければ、空の配列で初期化する処理を行います。

データの保存構造

送信されたデータは以下のような構造で保存されます。

$todo = [
    'id' => uniqid(),      // ユニークなID
    'text' => $_POST['todo'] // メモの内容
];

各項目の役割を見ていきましょう。

  • uniqid(): 各メモを識別するための被らないIDを生成
  • $_POST[‘todo’]: フォームから送信されたメモの内容
if (isset($_POST['add']) && !empty($_POST['todo'])) {
    $todo = [
        'id' => uniqid(),      // ユニークなID
        'text' => $_POST['todo'] // メモの内容
    ];
    array_push($_SESSION['todos'], $todo);
}

この部分では、2つの条件を両方とも満たしているか確認しています。

  1. isset($_POST[‘add’]): 追加ボタンが押されたかの確認
  2. !empty($_POST[‘todo’]): メモの内容が空でないことの確認
  3. 条件A && 条件B: 左と右の条件が両方とも満たされる場合にtrueを返す

empty関数は、連想配列に指定のキーが存在しない場合にtrueを返します。くわえて、空文字やnullの場合もtrueを返します。先述したコードでは、empty関数に!をつけることで条件を反転しています。
条件を満たした場合、array_push()を使って新しいメモを配列に追加します。

実装のポイント

  1. フォームのバリデーション
    • 必須入力項目の設定（required属性）
    • サーバーサイドでの入力チェック
  2. データの永続化
    • セッションを使用したデータの一時保存
    • 配列構造での管理
  3. 一意性の確保
    • uniqid()によるユニークなID付与
    • 後の削除処理で使用

このように、メモの追加機能は単純な処理に見えて、様々な要素が組み合わさっています。次は、保存したメモの一覧表示について解説していきましょう。

メモの一覧表示機能　※フロントエンド側

保存したメモを表示する部分を追加していきましょう。

<div class="todo-list">
    <?php foreach ($_SESSION['todos'] as $todo): ?>
        <div class="todo-item">
            <div class="todo-content">
                <div class="todo-text"><?php echo htmlspecialchars($todo['text']); ?></div>
            </div>
        </div>
    <?php endforeach; ?>
</div>

データの取り出し

セッションに保存されたメモは、foreachループを使って1件ずつ取り出します。 $_SESSION[‘todos’]には先ほど保存した配列が入っており、これを$todo変数に順番に代入しながら処理していきます。

表示の安全性

<?php echo htmlspecialchars($todo['text']); ?>

メモの内容を表示する際は、必ずhtmlspecialchars()関数でエスケープ処理をします。 これはXSS（クロスサイトスクリプティング）と呼ばれる攻撃を防ぐための対策です。ユーザーの入力を表示する場合は必須です。

実装のポイント

  1. データの取り出し
    • foreachループによる配列処理
    • 配列のキーを意識した実装
  2. セキュリティ対策
    • htmlspecialchars()によるエスケープ処理
    • 安全な出力
  3. レイアウト設計
    • 階層構造を持つHTML
    • CSSによるスタイリング

メモの削除機能

保存したメモを削除する機能を見ていきましょう。フロントエンド側の処理から解説していきます。

削除ボタンの実装　※フロントエンド側

<form method="POST" class="form-inline">
    <input type="hidden" name="id" value="<?php echo $todo['id']; ?>">
    <button type="submit" name="delete" class="delete-btn">delete</button>
</form>

各メモに削除用のフォームを用意します。

  • hidden項目で対象メモのIDを保持
  • POSTメソッドで送信

削除処理の実装　※バックエンド側

if (isset($_POST['delete']) && !empty($_POST['id'])) {
    $_SESSION['todos'] = array_filter($_SESSION['todos'], function ($todo) {
        return $todo['id'] != $_POST['id'];
    });
}

重要なポイント

  1. 削除の判定
    • 削除ボタンが押されたか確認: isset($_POST[‘delete’])
    • 削除対象のIDが存在するか確認: !empty($_POST[‘id’])
    • 両方の条件を満たしているか確認: isset($_POST[‘delete’]) && !empty($_POST[‘id’])
  2. array_filter関数の使用
    • 配列から特定の要素を除外
    • コールバック関数で条件指定
    • 新しい配列を生成
  3. セキュリティ
    • POSTメソッドによるセキュリティリスクの低減
    • IDの存在確認

データの永続性

削除されたデータはセッションから完全に削除されます。ブラウザを閉じるまでこの状態が維持されます。

これで基本的なTodoリストの機能が完成しました！ソースはこちらです。

<?php
session_start();

// 初期化
if (!isset($_SESSION['todos'])) {
    $_SESSION['todos'] = [];
}

// Todoの追加
if (isset($_POST['add']) && !empty($_POST['todo'])) {
    $todo = [
        'id' => uniqid(),
        'text' => $_POST['todo'],
    ];
    array_push($_SESSION['todos'], $todo);
}

// Todoの削除
if (isset($_POST['delete']) && !empty($_POST['id'])) {
    $_SESSION['todos'] = array_filter($_SESSION['todos'], function ($todo) {
        return $todo['id'] != $_POST['id'];
    });
}
?>
<!DOCTYPE html>
<html>

<head>
    <title>My Todo List</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <h1>My Todo List</h1>

        <form method="POST" class="add-form">
            <input type="text" name="todo" placeholder="新しいタスクを入力" required>
            <button type="submit" name="add">追加</button>
        </form>

        <div class="todo-list">
            <?php foreach ($_SESSION['todos'] as $todo): ?>
                <div class="todo-item">
                    <div class="todo-content">
                        <div class="todo-text"><?php echo htmlspecialchars($todo['text']); ?></div>
                    </div>
                    <form method="POST" class="form-inline">
                        <input type="hidden" name="id" value="<?php echo $todo['id']; ?>">
                        <button type="submit" name="delete" class="delete-btn">delete</button>
                    </form>
                </div>
            <?php endforeach; ?>
        </div>
    </div>
</body>

</html>

次回は、ブラウザが終了してもデータを保持できるように、データベースと連携していきます。

PHPで作る！シンプルなTodoリスト - データベース連携編
PHPとMySQLを使って永続的なTodoリストを作成する方法を解説。データベースの作成からテーブル設計、PHPでのMySQL操作まで、実践的なステップで学べます。XAMPPを使用した環境構築から、セキュアなデータベース連携までをカバー。
code-ch.com
2025.02.24
]]>