MySQLのレシピを一覧画面に自動表示できました

本日も、自分用に作成している献立・レシピ管理アプリの続きを進めました。

今回は、MySQLに保存してあるレシピデータを、index.php の一覧画面に自動表示する処理に挑戦しました。

MySQLからレシピを取得

まず、index.php からデータベースに接続し、recipes テーブルに保存されているレシピを取得しました。

最初は取得できているか確認するために、PHPで配列の中身を表示してチェック。

料理名・カテゴリー・材料・画像パスなどがきちんと取得できていることを確認できました。

レシピカードを自動表示

これまでは、HTMLにレシピカードを直接書いていましたが、今回はforeachを使って、データベースに登録されているレシピを1件ずつ自動表示できるようにしました。

これによって、

レシピ追加画面から登録

↓

MySQLへ保存

↓

一覧画面へ自動表示

という流れがつながりました。

カテゴリー表示も調整

データベースには、

main

soup

rice

などの値を保存していますが、一覧画面では、

主菜

汁物

ご飯・麺

のように、日本語で表示できるように調整しました。

カテゴリーの絞り込み機能に使う値は英語のまま残して、見た目だけ日本語にしています。

レシピカードから詳細画面へ

さらに、レシピカードをクリックすると、そのレシピの詳細ページへ移動できるようにする準備も進めました。

カード全体をリンクにしたことで、クリックするとレシピIDを付けた詳細ページへ移動できる形にしています。

次回やりたいこと

次回は、一覧画面では材料を短く表示し、詳細ページでは材料やメモ、元レシピURLなどをすべて確認できるようにしていきたいと思います。

少しずつですが、登録したレシピを実際に使えるアプリらしい形になってきました。