PHP初心者向けのTODOアプリの作り方④新規todoの作成

PHP初心者向けのTODOアプリの作り方④新規todoの作成

93 回閲覧されました

みなさんこんにちは、jonioです。

前回はtodoの削除と編集の機能を実装しましたが新規のtodoを作成する機能をまだ実装していないので今回は新規todoを作成する方法を解説します。

3回目までの解説が理解できれば今回の内容は恐らく簡単です。

新規todoの作成ページ

下記の見た目を作ります。

新規todoを作成するページはcreate.phpですがコードを下記にします。

<?php 
    require('db_connect.php');

    $title = filter_input(INPUT_POST, 'title');
    $content = filter_input(INPUT_POST, 'content');
    $submit = filter_input(INPUT_POST, 'submit');

    if(!empty($submit)){
        $pdo = db_connect();

        try{
            $sql = "INSERT INTO posts (title, content) VALUES (:title, :content)";
            $stmt = $pdo->prepare($sql);
            $stmt -> bindParam(':title', $title);
            $stmt -> bindParam(':content', $content);
            $stmt -> execute();

            header("Location:main.php");
        }catch(PDOException $e){
            echo 'エラー:'.$e->getMessage();
            die();
        }
    };
?>

<!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">
    <link rel="stylesheet" href="css/style.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <title>新規登録</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <div class="wrap pt-5">
        <div class="title-area">
            <h1 class="text-center">新規登録</h1>
        </div>
        <form action="" method="POST" class="mx-auto">
            <input type="text" class="input-area d-block mt-3" name="title" placeholder="Title" required> <br>
            <input type="text" class="input-area d-block mt-3" name="content" placeholder="Content" required> <br>
            <input type="submit" class="submit d-block mt-1" name="submit" value="登録">
        </form>
    </div>
</body>

</html>

4行目・5行目・6行目のコードは今までは下記でした。

$title   = $_POST["title"];
$content = $_POST["content"];
$submit  = $_POST["submit"];

phpのバージョンが8以上でアプリを作成する場合エラーになるのでコードを変えています。

詳しくは下記の記事を読んで下さい。

今までのコードとの違い

今回のphpはlogin.phpに似ていますが違う部分があります。

まずは12行目です、login.phpは下記でした。

$sql = "SELECT * FROM users WHERE name = :name AND password = :password";

今回は新規追加なので「INSERT INTO」を使っています。

8行目〜23行目の部分も少しだけ違います。

login.phpは下記でした。

if(!empty($submit)){
  $pdo = db_connect();

  try{
    $sql = "SELECT * FROM users WHERE name = :name AND password = :password";
    $stmt = $pdo->prepare($sql);
    $stmt -> bindParam(':name', $name);
    $stmt -> bindParam(':password', $password);
    $stmt -> execute();
  }catch(PDOException $e){
    echo 'エラー:'.$e->getMessage();
    die();
  }
  if($row = $stmt -> fetch(PDO::FETCH_ASSOC)){
      header("Location:main.php");
      die();
  }else{
      echo '<font color="red">パスワードか名前に間違いがあります</font>';
  }
};

今回は14行目〜19行目がなくて15行目がtryの中に入っています。

login.phpの時はテーブルの中のnameカラム・passwordカラムの値がフォームに入力した値と同じだったらログインしていましたが今回は新規追加なので必要ないからcreate.phpにはありません。

動作確認

これで登録すれば下記のように登録した内容がtodo一覧に追加されるのを確認できます。

今回の解説はこれで終わりですが理解しにくかったら3回目までの解説を何度か繰り返した方がいいと思います。

次回の解説

次はログインパスワードのハッシュ化と言ってパスワードをランダムの文字列にする方法です。