Jao's Blog

プログラミング備忘録

日記投稿・編集機能を作成する #10

日記を表示させる

 まずは日記を適切に表示させないといけませんね。MySQLを用い、日記テーブルを作成します。

create table myDiary(
  id int not null auto_increment primary key,
  userId int,
  date varchar(50),
  good_1 varchar(450),
  good_2 varchar(450),
  good_3 varchar(450),
  other text
);

 「日記のID」「紐付けのためのユーザーID」「日付」「良いこと1」「良いこと2」「良いこと3」「その他」というカラムで構成されています。ダミーデータとして、適当にユーザーIDを3とし、2020年6月5日と2020年6月6日の日記を挿入しておきます。
 日記の表示にはshowMydiaryというメソッドを使います。引数にURLの日付パラメータと、ユーザーIDを渡します。それらを条件に、MySQLのSELECT文でデータを取得しましょう。
 「いいこと1」「いいこと2」「いいこと3」「その他」と表記を分けたいので、配列としてデータを取り出し、それらをhtml文に組み込みます。

f:id:Kyokuya_jao:20200615231922p:plainf:id:Kyokuya_jao:20200615232044p:plain
 いい感じです。きちんと、日付に対応した日記が表示されています。
 しかし、ここでバグが。

日記をつけていない日はエラーになる

f:id:Kyokuya_jao:20200615232357p:plain
 日記をつけていない日は、データベースに該当する日付がないため、データを取り出せずエラーが起きます。当然といえば当然か……。
 これに対応すべく、データ取得がうまくいかなければ、返す配列を全て空にするという処理を叩きつけます。

//日付とidで日記を検索し、取得
    $sql = "select good_1, good_2, good_3, other from myDiary where userId = :id and date = :date";
    $stmt = $this->db->prepare($sql);
    $stmt->bindvalue(':date',$date,\PDO::PARAM_STR);
    $stmt->bindvalue(':id',$id,\PDO::PARAM_INT);
    $stmt->execute();

//取得に失敗したら配列を全て空に。成功したらそのまま返す
    $res = $stmt->fetch(\PDO::FETCH_ASSOC);
    if($res === false){
      $res = array_fill(0, 4, '');
    }else{
      return $res;
    }

f:id:Kyokuya_jao:20200615233055p:plain
 これにより見事、からっぽの日記でも表示することができるようになりました。

日記投稿・編集を可能にする

 右上にある羽ペンマークから、日記編集画面にジャンプできます。元のページと同じパラメータを渡してやるだけなので、至極単純です。
 テキストボックスのvalue属性には、日記を表示させた時と同じ処理で、文字列を埋め込みます。これによって、日記をつけていた日は、その内容がそのままテキストボックスに入ります。

f:id:Kyokuya_jao:20200616075104g:plain
 編集画面にて右上の保存ボタンを押せば、テキストボックスの内容が同ページにPOSTされます。POST内容がデータベースに登録された後、日記閲覧画面にリダイレクトします。
f:id:Kyokuya_jao:20200616075507g:plain
 内容をデータベースに登録する際、同じ日付とユーザーIDの日記が既に存在するかをチェックしています。
 存在していた場合はUPDATE処理を、存在しなかった場合はINSERT処理をかけるように分岐させております。


 アプリの要でもある日記編集機能を実装することができました!
 それでは、今回はこの辺りで。