ProgateのPHPコースのメニュー表の作り方
2114 回閲覧されました
みなさんこんにちは、jonioです。
Progateでカフェのメニュー表の作り方を勉強したのですが理解を深める為にアウトプットの記事を残します。
勉強が終わり次第情報を追加しますが極力Progateを見ずにコードを書いているのでProgateの書き方とコードが異なるかもしれません。
それではアウトプットの開始です。
目次
メニューの商品のタイトル・商品画像の表示
メニューの商品のタイトル・商品画像・料金の表示をしますがメニューの商品のクラス・インスタンス・表示するページ・CSSでファイルを分けます。
最初にCSSのコードを↓にします。
1行目〜67行目はreset.cssです。
次はクラスですがmenu.phpに書きコードを↓にします。
3行目〜5行目が商品タイトル・画像・料金のプロパティの設定です。（料金は今の段階では使いません）
7行目〜11行目で商品タイトル・画像・料金を使うことができるようにしているけどプロパティのカプセル化をしているのでこのままでは他のファイルでは使うことができません。
でも使いたいのでゲッターの設定をします、13行目〜15行目が名前のゲッターで17行目〜19行目が画像のゲッターです。
インスタンスはdata.phpに書きコードを↓にします。
インスタンスを書くためにはクラスがないといけないのでmenu.phpで定義しているクラスを使うために2行目でmenu.phpを呼び出しています。
menu.phpを呼び出すのに今は「rquire_once(‘ファイル名’)」を使っていますがファイルを呼び出すのに「reuqire」や他の書き方もありこの記事に解説がありますが私は今の所使い分けがよく分かっていません。
9行目でインスタンスを配列に入れているのは商品の情報を表示するページ（index.php）で配列の中身を全て表示するためです。
次は商品の情報を表示するページ（index.php）ですがコードを↓にします。
1行目はインスタンス（data.php）を使うための記述です。
17行目〜22行目でdata.phpの内容を表示しています。
これで表示が↓になります。
商品の個数の選択とそれを表示する確認のページ
今作ったページの商品に個数を入力して入力した内容を確認するページを作ります。
↓が個数を入力できるようにした状態です。
↓が確認のページです。
index.phpのコードを↓にします。
そして確認のページを作りますがまだファイルを作っていないので作ります、confirm.phpです。
index.phpの21行目ですがname属性が商品名を表す「<?php echo $menu -> getName() ?>」になっていてconfirm.phpの19行目・20行目で商品の個数として使っていますが個数に「<?php echo $menu -> getName() ?>」が使えるのは理由が分かりませんでした、そんな物なのかもしれません。
次はindex.phpで商品の税込みの金額を表示します。
商品の税込みの金額の表示
税込金額を表示するメソッドを定義するためにmenu.phpのコードを↓にします。
定義した内容をindex.phpで表示するためにindex.phpのコードを↓にします。
これで↓になります。
次は商品の個数を入力して確認のページを見た時にそれぞれの商品の合計の金額が表示されるようにします。
確認ページでそれぞれの商品の合計金額の表示
合計金額を表示できるメソッドを定義するためにmenu.phpのコードを↓にします。
そして確認のページで金額を表示するためにconfirm.phpのコードを↓にします。
表示される内容の確認ですがindex.phpで↓と入力したとします。
すると確認のページは↓になります。
次は確認のページで注文する商品の全ての合計の金額の表示をします。
確認ページで全ての商品の合計金額の表示
confirm.phpのコードを↓にします。
17行目で最初商品全てを合わせた合計金額を0にして22行目でそれぞれの商品にかかる金額を$totalPaymentに加えています。
これで↓みたいに金額が表示されます。
次は商品の個数の表示です。
商品の個数の表示はクラスプロパティ
商品の個数はdata.phpに記載があるインスタンスの個数と同じ（今は$juice,$coffee,$curry,$pastaの4つ）でメニュー全体でインスタンスの個数を管理しないといけません。
こういう場合はクラス全体のプロパティ（クラスプロパティ）を使います。
$juice,$coffee,$curry,$pastaのインスタンスが生成される度にクラスプロパティの値を1ずつ増やします。
まずはクラスを定義するためにmenu.phpのコードを↓にします。
7行目ですがクラスプロパティを定義する時は「public static $〜（またはprivate static $〜）」と書きます。
14行目ですがクラスプロパティをクラスの中で呼び出す時は「self::$クラスプロパティ名」とします。（selfがプロパティの場合の$thisに当たります）
43行目〜45行目ですがクラス全体で考えることができるメソッドをクラスメソッドといい「function」の前に「static」を付けます。
次にmenu.phpの7行目で定義した$countをindex.php表示するためにindex.phpのコードを↓にします。
クラスプロパティを表示する時は「クラス名::$クラスメソッド（クラス名::$クラスプロパティ名）」と書きます。
これで表示が↓になります。
次はクラスの分離です。
飲み物のクラス
今の状態はクラスが1つでその中に$juice,$coffee,$curry,$pastaの4つのインスタンスが入っていますがジュースはアイスでコーヒーはホットと分けカレーとパスタの辛さを表示する場合に1つのクラスで表示するよりも飲み物・食べ物でクラスを分けた方がコードを後で見た時に何をやっているかが分かるのでクラスを分けますがこんな場合はクラスの継承を使って親クラス（今だとMenu）の情報を子クラス（今だと飲み物・食べ物）に渡します。
まずは飲み物のクラスを作ってその後に食べ物のクラスを作ります。
新しいファイルdrink.phpを作ってコードを↓にします。
4行目が継承で継承の書き方は「class 子クラス extends 親クラス」です。
6行目でホット・アイスを決めるプロパティを設定して8行目〜10行目でゲッターの設定・12行目〜14行目がセッターの設定です。
Drinkクラスを使うためにdata.phpでインスタンスの設定をします。
data.phpのコードを↓にします。
Drinkクラスにしか セッターの設定をしてないので食べ物のpastaインスタンスとcurryインスタンスを消しています。
次は表示するページのindex.phpの設定ですがコードを↓にします。
2行目で「menu.php」を読み込んでいますが16行でクラスメソッドを使うためです。
これで↓の表示になります。
data.phpを見ればわかるのですがカレーのインスタンスとパスタのインスタンスがないので今のままではカレーとパスタを表示することがでずカレーのインスタンスとパスタのインスタンスを加えたとしてもアイスやホットの表記が付くのは変です。
そこでDrinkクラスの（ジュースとコーヒー）インスタンスの場合だけアイスやホットの表記が付くようにします。
data.phpのコードを↓にします。
そしてindex.phpのコードを↓にします。
26行目の「$menu instanceof Drink」ですが「Drinkクラスのインスタンスの場合は」という意味です。
これで↓の表示になります。
次にカレーとパスタのクラス（Foodクラス）を作るためにfood.phpを作ってMenuクラスの継承をします。
食べ物のクラス
food.phpを作りfood.phpのコードを↓にします。
data.phpのコードを↓にします。
これで表示は変わりませんがFoodクラスの設定は完了しました。
アイスやホットですがdata.phpの中でセッターを使って表示していますがアイスやホットをDrinkクラスのインスタンスの引数に加えてゲッターで表示します。
親クラス（Menuクラス）のプロパティを子クラス（Drinkクラス）に引き継いで引数にtypeプロパティを追加します。
コードにすると↓です。
引き継ぐ前に親クラスがあるmenu.phpですが「$name・$pricce・$image」はカプセル化していて子クラスに引き継ぐことができません。
子クラスにプロパティを引き継ぐことができるようにするにはプロパティを「protected」にすればいいです。
menu.phpのコードを↓にします。
そしてdrink.phpのコードを↓にします。
11行目の「parent::__construct($name,$price,$image);」ですが10行目の（ ）の中と同じ内容を11行目の（ ）の中に書きます。
この書き方で親クラスと同じプロパティを引き継ぐことができます。
そしてdata.phpのコードを↓にします。
次はカレーとパスタの辛さの表示をします。
food.phpでmenu.phpのプロパティの引き継ぎをしますがdata.phpのコードを↓にします。
そしてdata.phpのコードを↓にします。
そしてindex.phpのコードを↓にします。
そしてstyle.cssのコードに↓のクラスを追加します。
これで辛さの表記が↓になります。
次は商品名をクリックすると商品の詳細が表示されるページの作成です。
↓の赤枠をクリックした時を考えます。
商品のページへのリンク
index.phpのコードを↓にします。
22行目のみ修正しています。
商品名をクリックした時に商品の詳細のページ（show.phpです、まだ作ってないのでこれから作ります）に飛びますが ただのaタグだとどの商品名をクリックしても同じ内容のページに飛びます。
商品名の中身が表示されるページに飛ばないと意味がないのでaタグの中身を少し変えます。
22行目は「href=”show.php?name=<?php echo $menu -> getName() ?>“」がありますがshow.phpの後に「?name=商品名」とすることで商品の中身が表示されるページへ飛べます。
商品名ですが今は4つあるのでゲッターを使って選択した商品名のページに飛ぶことができるようにしています。
次にとりあえず商品名に対応する中身のページ（show.php）を作ります。
show.phpのコードを↓にします。
これで商品名をクリックすると「詳細ページ」と表示されます。
次にindex.phpで商品名をクリックするとshow.phpで商品名が表示されるようにします。
show.phpのコードを↓にします。
5行目で「GET」を使っていますが「GET」を使うと「GET」があるページのURLに商品名も付きます。
↓はコーヒーをクリックした時です。
前のページの情報を受け取る時に「POST」と「GET」がありますがPOSTは情報が隠れてGETは情報が付属します。
どの商品の詳細ページなのかがわからないといけないのでGETにします。（ProgateにはGETを使う理由の説明がなかったので私なりの理由を記載しています。POSTで試したらshow.phpの中身が表示されませんでした）
次は商品名をクリックしたら商品の詳細が表示されるのですが一旦index.phpの商品名をクリックした時にshow.phpでクリックした商品の情報が表示されるようにします。（後で商品のレビューも付けます）
商品をクリックした時の商品の詳細のページの表示
商品名をクリックした時に商品の中身を表示するのはクラス全体で管理します。
だからクラスメソッドやプロパティを使う事になるのですがクラスメソッドで商品名を取得するためにmenu.phpのコードを↓にします。
そしてshow.phpのコードを↓にします。
48行目の「findByName($menus,$name)」ですが配列（今は$menus）から特定のインスタンス（今は$name）を探します。
51行目の「$menu -> name」は配列の中のインスタンスで51行目の「$name」はmenuクラスのインスタンスです
48行目〜54行目は「配列の中のインスタンス名とmenuクラスのインスタンス名が同じならmenuクラスのインスタンスをreturnする」という意味です。
cssが追加になるので↓に変えます。
これで商品名をクリックした時の詳細のページが↓と表示されます。（↓はジュースをクリックした時です）
次は商品のページに入った時にレビューの表示をします。
商品のレビューの表示
レビューを表示するためのクラスを記述するファイル（review.php）を作りコードを↓にします。
そしてdata.phpのコードを↓にします。
そしてdata.phpのレビューの内容をshow.phpに表示するためにshow.phpのコードを↓にします。
これで商品のページで↓の表示になります。
レビューですが今の段階ではどの商品をクリックしても同じになりそれでは意味がないので商品に応じたレビューに変えます。
商品に対応したレビューの表示
menu.phpのコードを↓にします。
54行目〜62行目で商品に対応するレビューに変えることができます。
そしてshow.phpに表示するためにshow.phpのコードを↓にします。
そして商品のレビューの情報を追加するためにdata.phpのコードを↓にします。
これで↓の様に商品に応じたレビューに切り替わります。
次はレビューする人の表示です。
レビューする人の表示
まずレビューをする人のクラス（user.php）を作りコードを↓にします。
次にdata.phpのコードを↓にします。
そしてレビューする人とレビューの内容を紐付けるためにreview.phpのコードを↓にします。
data.phpのコードを少し修正して↓にします。
show.phpのコードを↓にします。
これで完成です。