プログラミング初心者がPHPのToDoアプリ制作に挑戦！①データの作成・登録

2023-12-052024-08-21

このページにはプロモーションが含まれています。

はじめに

この記事は、PHPでToDoアプリを制作する際の参考になればと思い、投稿しました。

この記事の対象読者

PHPの基礎学習を終え、簡単なアプリを作ってみたい方
ToDoアプリを作ってみたい方

この記事を読んで分かること

ToDoアプリの作り方

データの作成・登録までのコードと解説

PHP基礎学習のおさらいとして、ToDoアプリを作りました。

データベースのCRUD操作の練習になりました。

CRUD操作とは？

Create(作成・登録)、Read(参照)、Update(更新)、Delete(削除)

のことです。

今回は、Create(作成・登録)について

私のプログラムをもとにお話します。

はなまる

更新と削除について知りたい方はこちらの記事をご覧下さい。

あわせて読みたい

プログラミング初心者がPHPのToDoアプリ制作に挑戦！②データの更新このページにはプロモーションが含まれています。はじめに今回の記事は、PHPでToDoアプリ制作「データの更新」についてお話します。「データの作成・登録」「データ…

あわせて読みたい

プログラミング初心者がPHPのToDoアプリ制作に挑戦！③データの削除この記事にはプロモーションが含まれています。はじめに今回の記事は、PHPでToDoアプリ制作「データの削除」についてお話します。「データの作成・登録」「データの…

ToDoアプリの仕様

今回のToDoアプリは、

データの一覧表示、追加、更新、削除の機能を実装します。

完成したアプリは、以下の画像のようになります。

テキストエリアに記録したいことを入力して、追加ボタンを押すと

入力内容と入力した日時が一覧に追加されます。

編集ボタンを押すと、編集画面に遷移します。

テキストエリアを編集して更新ボタンを押すと

編集した内容に上書きされます。

更新した旨のメッセージが表示されて、一覧に戻ります。

削除ボタンを押すとリストが削除できます。

削除した旨のメッセージが表示されて、一覧に戻ります。

サーバー環境とデータベースの準備

プログラムを実行する準備が必要です。

今回、サーバーとデータベースの準備として、MAMPという開発環境を設定しました。（Macを使用）

MAMPの設定やデータベース作成については、

こちらの記事を参考にさせていただきました。

CodeCampus

【2022年Macユーザー向け】MAMPを使ってWordPresssをインストールする方法を解説 MacユーザーでWordPressをインストールしてWeb制作の学習環境を作りたいという方向けに、MAMPを活用したWordPressのインストール方法を具体的な写真なども使用しながらご紹…

続いて、私が作成したテーブルの構造を記載します。

id・・・AUTO_INCREMENTでidを主キーとして、自動で整数型intの数値（番号）を振っています。
todo・・・最大n文字（ここでは100文字）の半角可変長文字列
tododate・・・datetimeは時間単位の日付型で「YYYY-MM-DD hh:mm:dd[.mmm]」形式

ToDoアプリファイル構成

ファイル構成をお伝えします。

任意のフォルダ名（私は「php_practice」としました）を付けてその中に、

todo.php（データの作成・登録をするファイル）
update.php（データの更新をするファイル）
new.php（データの更新完了を表示するファイル）
del.php（データの削除をするファイル）
todo.css（CSSファイル）
jQueryファイル

これらのファイルを作成します。各ファイル名も任意の名前を付けます。

この記事では、1.のtodo.php（データの登録をするファイル）についてお話します。

他のファイルについては、別の記事に分けて書きます。

それではデータの登録機能のプログラムを見ていきましょう〜

todo.css

CSSファイルが必要な方に向けて、　todo.cssのコードをこちらに記載します。

todo.css

/*todoアプリのCSS*/
body {
    background-color: #eaf6fd;
}
h1,
p {
    text-align: center;
}
.form {
    width: 300px;
    height: 100px;
}
.submit-btn {
    display: block;
    margin: 0 auto;
}
/*ボタンの色*/
.add-btn {
    background-color: #91d3ea;
}
.del-btn {
    background-color: #ee869a;
}
.edit-btn {
    background-color: #ccdc43;
}
.update-btn {
    background-color: #f8b73d;
}
/*ボタンの色ここまで*/
#add {
    text-align: center;
    margin-bottom: 50px;
}
#decision {
    text-align: center;
}
.group {
    text-align: center;
    background-color: #fff;
    border: solid 1px #fff;
    border-radius: 10px;
    width: 300px;
    padding: 10px;
    display: block;
    margin: 0 auto;
}

データの作成・登録をするプログラム

まず作成・登録のプログラム全体です。

todo.phpは、次のように書きました。

todo.php

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="todo.css">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todo</title>
    <script src="jquery-3.6.4.min.js"></script>
</head>

<body>
    <h1>TODOリスト</h1>
    <p>メモを追加・更新・削除できます</p>

    <form id="add" action="todo.php" method="post">
        <textarea class="form" name="data" value="" rows="3" cols="20" wrap="hard"></textarea>
        <input class="submit-btn add-btn" type="submit" value="追加" />
    </form>



    <?php
    if (isset($_POST['data'])) {
        try {
            $data = $_POST['data'];

            $db = new PDO('mysql:host=localhost;dbname=データベース名;charset=utf8', 'テーブル名', 'パスワード');
            $date = date("Y-m-d H:i:s");
            $sto = $db->prepare('INSERT INTO todo_list(todo,tododate) VALUES (:todoValue,:tododateValue)');
            $sto->bindValue(':todoValue', $data);
            $sto->bindValue(':tododateValue', $date);
            if ($sto->execute()) {
                print("<p>データを追加しました</p>");
            } else {
                print("<p>SQL文実行時にエラーが発生しました</p>");
            }
            $db = null;
        } catch (PDOException $e) {
            echo "todo.php 登録処理";
            die("<p>処理に失敗しました</p>");
        }
    }


    try {
        $db = new PDO('mysql:host=localhost;dbname=データベース名;charset=utf8', 'テーブル名', 'パスワード');
        $sql = "SELECT * FROM todo_list ORDER BY tododate DESC ";
        $sto = $db->prepare($sql);
        $sto->execute();

        $dataList = array();
        while ($row = $sto->fetch()) {
            array_push($dataList, ["id" => $row['id'], "todo" => $row['todo'], "tododate" => $row['tododate']]);
        }

        $db = NULL;
    } catch (PDOException $e) {
        echo "todo.php 表示処理";
        die('処理に失敗しました');
    }
    ?>

    <?php foreach ($dataList as $data) : ?>
        <div class="group">
            <p><?php echo $data['todo']; ?></p>
            <p><?php echo $data['tododate']; ?></p>
            <form id='del' action='del.php' method='post'>
                <input class="del-btn" type='submit' value='削除' />
                <input type='hidden' name='del' value='<?php echo $data['id']; ?>' />
            </form>
            <form id='update' action='update.php' method='post'>
                <input class="edit-btn" type='submit' value='編集' />
                <input type='hidden' name='update' value='<?php echo $data['id']; ?>' />
            </form>
        </div>
        <br>
    <?php endforeach ?>
</body>

</html>

bodyタグ内を見ていくと、

データをPOST送信するテキストエリアと追加ボタンを設置しています。

<body>
    <h1>TODOリスト</h1>
    <p>メモを追加・更新・削除できます</p>

    <form id="add" action="todo.php" method="post">
        <textarea class="form" name="data" value="" rows="3" cols="20" wrap="hard"></textarea>
        <input class="submit-btn add-btn" type="submit" value="追加" />
    </form>

続いてphp部分を見ていくと、

POSTで渡された値がある時は、変数dataに値を代入します。

PDOクラスのインスタンスを作成し、データベースサーバー(MySQL)と接続します。

データの登録をセキュリティ上、安全に行うため、プレースホルダで指定します。

bindValueで値をデータベースに登録します。

try〜catchとif〜elseで例外処理とデータの登録の成否を表示します。

<?php
    if (isset($_POST['data'])) {
        try {
            $data = $_POST['data'];

            $db = new PDO('mysql:host=localhost;dbname=データベース名;charset=utf8', 'テーブル名', 'パスワード');
            $date = date("Y-m-d H:i:s");
            $sto = $db->prepare('INSERT INTO todo_list(todo,tododate) VALUES (:todoValue,:tododateValue)');
            $sto->bindValue(':todoValue', $data);
            $sto->bindValue(':tododateValue', $date);
            if ($sto->execute()) {
                print("<p>データを追加しました</p>");
            } else {
                print("<p>SQL文実行時にエラーが発生しました</p>");
            }
            $db = null;
        } catch (PDOException $e) {
            echo "todo.php 登録処理";
            die("<p>処理に失敗しました</p>");
        }
    }

次に、データの並べ替えを日付ごとに降順で行います。

降順なので、新しいデータが一番上に来ます。

さらにdataListの配列の中に

id、todo、tododateの要素を持った

レコード（連想配列）がデータがある分だけ入ります。

ここでもtry〜catchで例外処理を行なっています。

 try {
        $db = new PDO('mysql:host=localhost;dbname=データベース名;charset=utf8', 'テーブル名', 'パスワード');
        $sql = "SELECT * FROM todo_list ORDER BY tododate DESC ";
        $sto = $db->prepare($sql);
        $sto->execute();

        $dataList = array();
        while ($row = $sto->fetch()) {
            array_push($dataList, ["id" => $row['id'], "todo" => $row['todo'], "tododate" => $row['tododate']]);
        }

        $db = NULL;
    } catch (PDOException $e) {
        echo "todo.php 表示処理";
        die('処理に失敗しました');
    }
    ?>

イメージ図