日記表示機能を作成する #09

　カレンダー上で日付をクリックすると、日記が表示されるようにしましょう。

日記閲覧ページに飛ぶ

　カレンダーの日付に、aタグを追加します。
　そのままでは数字しかクリックに反応しません。マス目全体をクリックできるようにしたいので、aタグをブロック要素に変更し、widthとheightを100％に設定します。
　aタグをブロック要素にすると、text-alignが使えなくなるため、文字が中央配置でなくなります。なので、適切なpaddingとmarginを設定します。

　しっかりとa要素がマス全体に広がっていますね。ちょっとはみ出してしまっているので、親要素であるtd要素に「overflow: hidden;」を設定し、はみ出た部分を非表示とします。
　これにて、マス目をクリックすることで日記閲覧ページに飛ぶことが可能になりました。

URLにパラメータを与える

　例えば、2020年の6月1日のマスをクリックしたら、2020年の6月の1日の日記を表示させないといけません。
　それを実現させるために、URLにパラメータを与えます。

$date = $day->format('Y-m-d-D');
      $body .= sprintf('<td><a href="/myDiary.php?date=%s" class="youbi_%d %s">%d</a></td>', $date, $day->format('w'), $todayClass, $day->format('d'));

　aタグのリンク先に日付のデータを渡します。2020年の6月1日(月)なら、「2020-06-01-Mon」という文字列がURLの最後に渡されるはずです。
　実際に、カレンダーで6月1日をクリックしてみましょう。

　いい感じです。日付表記はダミーの6月10日で固定されていますが、URLを見ると、しっかりとパラメータが渡っているのがわかります。

日付を正しく表示する

　URLのパラメーターを、年月日にバラしていきましょう。
　「2020-06-01-Mon」というパラメータがあったとしたら、「2020」と「06」と「01」と「Mon」に分けます。

$year = substr($_GET['date'], 0, 4);
$month = substr($_GET['date'], 5, 2);
$day = substr($_GET['date'], 8, 2);
$youbi = substr($_GET['date'], 11);

var_dump($year);
var_dump($month);
var_dump($day);
var_dump($youbi);

　substrを使えば、適切に切り出すことが可能ですね。

　「06」や「01」がそのまま表示されると見栄えが悪いので、アタマに０がついていた場合はそれを取り除きます。また「Mon」なら「月」、「Tue」なら「火」と、日本語に変換するためのswitch文も追加しましょう。
　……スクリーンショットの撮影を忘れてしまいましたが、ともあれ、それらのデータをhtml部分に出力すれば、日付表記は完成です。

左右の矢印で日付を切り替えられるようにする

　カレンダーと同様に、左右の矢印で、前日や次の日の日記を表示できるようにします。
　カレンダーでは、URLから取り出したパラメータ（2020-06など）で月単位のDateTimeオブジェクトを作成し、それに-1したものを前の月のリンク、+1したものを次の月のリンクとしていました。
　日記では月単位でなく、日単位のDateTimeオブジェクトを作成し、同じ処理でリンクを作成すればOKです。
　ただし、日記のパラメータには「Mon」といった余計な曜日表記が存在するので、substrでそれらを切り抜く必要があります。また、前や次のリンクを作成する際に、URLに曜日表記を再び連結する処理も忘れてはいけません。

　このように、日記の表示を切り替えられるようになりました！

　次回は、いよいよ日記を書く処理を作っていきましょう。それでは、今回はこのあたりで。