中野's workspace

  • Profile
  • Privacy
  • Contact

2021/12/27

素のPHPでシンプルなTODOアプリを作成する

目次

この記事の目的

初学者の方に基本文法終わった後に何すればいいかわからんと言われたので、選択肢の一つとしてこの記事を作成しました。

素のPHPで超シンプルなTODOアプリを作成していきます。

こだわろうとすればどこまでもこだわれるけど、とりあえずPHP + HTMLのみの超シンプルな構成にしてみました。

ページ遷移も無しです。

CRUDが一通りできるようにTODOアプリの機能としては

  • TODOリスト作成
  • TODO更新
  • TODO削除
  • TODO一覧表示

が出来るようにしています。

環境について

動作を確認しているのは下記だが、そこまでバージョンを気にしなくても良いと思います。

PHPとMySQLを使える状態であればdockerだろうがxamppだろうが大丈夫です。

  • PHP 8.0
  • MySQL8.0

TODOアプリ作成

DB及びテーブル作成

mysqlでデータベースを作成します。

※ xamppを使っている場合はphpmyadminがデフォルトで入っているはずなので、下記が参考になると思います。 phpMyAdminを使ってデータベースやテーブルを作成する

今回はデータベース名をappとしました。

appの中でtodoテーブルを下記のように作成します。

todoテーブル

ファイル作成

プロジェクトルートにindex.phpを作成します。

下記を記述し、http://localhost/index.php にアクセスして画面表示が出来れば疎通確認OK。

index.php
<?php
    echo "Hello World";
?>

データベース接続確認

下記コードを記述して、再度http://localhost/index.php にアクセスしてみます。

先ほど作成したデータベースに接続出来るのかの確認です。

index.php
<?php
function dbConnect() {
    $dsn = 'mysql:host=localhost;dbname=app;charset=utf8';
    $user = 'ユーザー名';
    $password = 'パスワード';

    try {
        new PDO($dsn, $user, $password,[PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,]);

        var_dump("疎通確認OK!");
    } catch (PDOException $e) {
        header('Content-Type: text/plain; charset=UTF-8', true, 500);
        var_dump($e->getMessage());
        exit();
    }
}

dbConnect();
?>

きちんとDBとの接続が出来ていれば「疎通確認OK!」と表示がされるはず。

下記コードは環境によって異なる部分だと思うので調べてみて下さい。

$dsn = 'mysql:host=localhost;dbname=app;charset=utf8';
$user = 'ユーザー名';
$password = 'パスワード';

DBの各種動作設定

下記のようにコードを記述します。

少しコード量は多いですが、どのメソッドもやっていることは

  1. データベースに接続 (dbconnect()呼び出し)
  2. SQLの記述 ($sql ="" の部分)
  3. SQLの実行

のみです。
今回省きますが、SQLの詳細な文法などは別途調べてみてください。
一旦完成させてからコードがちゃがちゃいじってみると理解も進みやすいです。

index.php
function dbConnect() {
    $dsn = 'mysql:host=localhost;dbname=app;charset=utf8';
    $user = 'ユーザー名';
    $password = 'パスワード';

    try {
        return new PDO($dsn, $user, $password,[PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,]);
    } catch (PDOException $e) {
        header('Content-Type: text/plain; charset=UTF-8', true, 500);
        var_dump($e->getMessage());
        exit();
    }
}

function fetchALL()
{
    $sql = "SELECT * FROM todo";
    $query = dbConnect()->query($sql);

    return $query->fetchAll(PDO::FETCH_ASSOC);
}

function create($text)
{
    $now = date('Y/m/d H:i:s');
    $sql = 'insert into todo (text, created_at, updated_at) values (?, ?, ?)';
    $stmt = dbConnect()->prepare($sql);

    $stmt->execute([$text, $now, $now]);
}

function update($id, $text)
{
    $sql = 'UPDATE todo SET text = ?, updated_at = ? WHERE todo.id = ?';

    $stmt = dbConnect()->prepare($sql);

    $stmt->execute([$text, date('Y/m/d H:i:s'), $id]);
}

function delete($id)
{
    $sql = 'delete from todo WHERE todo.id = ?';
    $stmt = dbConnect()->prepare($sql);

    $stmt->execute([$id]);
}

これでCRUDの処理が一通り書けました。

サーバサイド側の処理

先ほどの続きに、下記を記載します。 $_SERVER['REQUEST_METHOD']はリクエストされた時のメソッド名を返すものです。

if($_SERVER['REQUEST_METHOD'] === 'POST'){
}

で囲んであげることで、POSTメソッドでリクエストされた時に各種処理を実行するようにします。

$_POSTでポスト変数が受け取れるので、それぞれどんな内容がPOSTされたかによってTODOリスト作成・更新・削除のどれかの処理を呼び出すようにしています。

index.php
    // ↑ DBの各種設定
    if($_SERVER['REQUEST_METHOD'] === 'POST'){
        if(!empty($_POST['submit'])){
            create($_POST['submit']);
        }else if(isset($_POST['update'])){
            update($_POST['id'], $_POST['text']);
        }else if(isset($_POST['delete'])){
            delete($_POST['id']);
        }

        // index.phpにリダイレクト
        header('Location: '.$_SERVER['SCRIPT_NAME']);
        exit;
    }

    $DATA = fetchALL();
?>

今回はページがローディングされるたびに全てのTODOを取得したいので、コードの最後に

$DATA = fetchALL();

を記載して、TODOリストを$DATA変数に入れています。

フロントエンドの処理

フロントは下記のように記述します。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>TodoApp</title>
    </head>
    <body>
        <h1>TODOアプリ</h1>

        <section>
            <form method="post">
                <input type="text" name="submit" required>
                <button type="submit">作成する</button>
            </form>

            <table>
                <?php
                    if ($DATA) {
                ?>
                    <tr>
                        <th bgcolor="#808080" rowspan="2"><font color="#FFFFFF">TODO</font></th>
                        <th bgcolor="#808080" rowspan="2"><font color="#FFFFFF">作成日</font></th>
                        <th bgcolor="#808080" colspan="2" id="action"><font color="#FFFFFF">操作</font></th>
                    </tr>
                    <tr>
                        <th bgcolor="#808080" headers="action"><font color="#FFFFFF">更新</font></th>
                        <th bgcolor="#808080" headers="action"><font color="#FFFFFF">削除</font></th>
                    </tr>
                <?php
                    }
                ?>

                <?php foreach((array)$DATA as $row): ?>
                    <form method= "post">
                        <tr>
                            <input type= "hidden" name= "id" value= "<?php echo $row["id"]; ?>">
                            <td>
                                <input type="text" name="text" value=<?php echo $row["text"]; ?> required>
                            </td>
                            <td>
                                <?php echo $row["created_at"]; ?>
                            </td>
                            <td>
                                <button type="submit" name="update">更新する</button>
                            </td>
                            <td>
                                <button type="submit" name="delete">削除する</button>
                            </td>
                        </tr>
                    </form>
                <?php endforeach; ?>
            </table>
        </section>
    </body>
</html>

コピペしただけではわけが分からないと思うので、詳細を説明していきます。

TODO新規作成

TODOを新規作成するときは

<form method="post">
    <input type="text" name="submit" required>
    <button type="submit">作成する</button>
</form>

として「作成する」ボタンを押したときにテキストの中身が送信されるようにします。
この時、input type=“text”のnameを”submit”とすることによって、先ほど記載した

if(!empty($_POST['submit'])){
    ...

の分岐内の処理を実行することが出来ます。

TODOリスト表示

TODOリストの表示はループを使って表現しています。
下記コードを記入することで、$DATA内に入っている全てのTODOリストを順次参照することが出来ます。

<?php foreach((array)$DATA as $row): ?>
...
<?php endforeach; ?>

ループ内で記載している、下記コードはそれぞれTODOリストの1データを表しています。

<form method= "post">
    <tr>
        <input type= "hidden" name= "id" value= "<?php echo $row["id"]; ?>">
        <td>
            <input type="text" name="text" value=<?php echo $row["text"]; ?> required>
        </td>
        <td>
            <?php echo $row["created_at"]; ?>
        </td>
        <td>
            <button type="submit" name="update">更新する</button>
        </td>
        <td>
            <button type="submit" name="delete">削除する</button>
        </td>
    </tr>
</form>

ここまで記載して、再びhttp://localhost/index.php にアクセスしてみると todoテーブル

上記のような画面が表示されていると思います。
一通りCRUDの処理が出来るか確認してみて、問題無ければ完成です!

次にやることは・・・?

ここまで出来たら今回書いたコードを色々といじってみてください。
色々と発見があるはず。(なかったらごめんなさい)

もしくは全く同じTODOアプリをフレームワークを使って実装してみるとかでも良い勉強になりそうですね! そのうち記事化します。

このエントリーをはてなブックマークに追加
  • Copyright © 2019. Makoto Nakano
  • ALL Tags