うまくブラウザ表示できません。どうすればよろしいでしょうか？

php
1<?php require_once('data.php') ?>
2
3<!DOCTYPE html>
4<html>
5<head>
6  <meta charset="utf-8">
7  <title>Progate</title>
8  <link rel="stylesheet" type="text/css" href="stylesheet.css">
9  <link href='https://fonts.googleapis.com/css?family=Pacifico|Lato' rel='stylesheet' type='text/css'>
10</head>
11<body>
12  <div class="order-wrapper">
13    <h2>注文内容確認</h2>
14    <!-- 変数$totalPaymentを定義し、数値の0を代入してください -->
15    <?php $totalPayment=0; ?>
16    
17    <?php foreach ($menus as $menu): ?>
18      <?php 
19        $orderCount = $_POST[$menu->getName()];
20        $menu->setOrderCount($orderCount);
21        // $totalPaymentに、$menuのgetTotalPriceメソッドで得た値を足してください
22        $totalPayment += $menu->getTotalPrice();
23        
24      ?>
25      <p class="order-amount">
26        <?php echo $menu->getName() ?>
27        x
28        <?php echo $orderCount ?>
29        個
30      </p>
31      <p class="order-price"><?php echo $menu->getTotalPrice() ?>円</p>
32    <?php endforeach ?>
33    <!-- $totalPaymentを表示してください -->
34    <h3>合計金額: <?php echo $totalPayment ?>円</h3>
35  </div>
36</body>
37</html>

php
1<?php
2require_once('menu.php');
3
4$juice = new Menu('JUICE', 600, 'https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/php/juice.png');
5$coffee = new Menu('COFFEE', 500, 'https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/php/coffee.png');
6$curry = new Menu('CURRY', 900, 'https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/php/curry.png');
7$pasta = new Menu('PASTA', 1200, 'https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/php/pasta.png');
8
9$menus = array($juice, $coffee, $curry, $pasta);
10
11?>

php
1<?php 
2require_once('menu.php');
3
4class Drink extends Menu {
5  private $type;
6  
7  public function __construct($name, $price, $image, $type) {
8    parent::__construct($name, $price, $image);
9    $this->type = $type;
10  }
11  
12  public function getType() {
13    return $this->type;
14  }
15  
16  public function setType($type) {
17    $this->type = $type;
18  }
19  
20}
21
22?>

php
1<?php require_once('data.php') ?>
2
3<!DOCTYPE html>
4<html>
5<head>
6  <meta charset="utf-8">
7  <title>Café Progate</title>
8  <link rel="stylesheet" type="text/css" href="stylesheet.css">
9  <link href='https://fonts.googleapis.com/css?family=Pacifico|Lato' rel='stylesheet' type='text/css'>
10</head>
11<body>
12  <div class="menu-wrapper container">
13    <h1 class="logo">Café Progate</h1>
14    <form method="post" action="confirm.php">
15      <div class="menu-items">
16        <?php foreach ($menus as $menu): ?>
17          <div class="menu-item">
18            <img src="<?php echo $menu->getImage() ?>" class="menu-item-image">
19            <h3 class="menu-item-name"><?php echo $menu->getName() ?></h3>
20            <p class="price">¥<?php echo $menu->getTaxIncludedPrice() ?>（税込）</p>
21            <input type="text" value="0" name="<?php echo $menu->getName() ?>">
22            <span>個</span>
23          </div>
24        <?php endforeach ?>
25      </div>
26      <input type="submit" value="注文する">
27    </form>
28  </div>
29</body>
30</html>

php
1<?php
2class Menu {
3  private $name;
4  private $price;
5  private $image;
6  private $orderCount = 0;
7  
8  public function __construct($name, $price, $image) {
9    $this->name = $name;
10    $this->price = $price;
11    $this->image = $image;
12  }
13  
14  public function hello() {
15    echo '私は'.$this->name.'です';
16  }
17  
18  public function getName() {
19    return $this->name;
20  }
21  
22  public function getImage() {
23    return $this->image;
24  }
25  
26  public function getOrderCount() {
27    return $this->orderCount;
28  }
29  
30  public function setOrderCount($orderCount) {
31    $this->orderCount = $orderCount;
32  }
33  
34  public function getTaxIncludedPrice() {
35    return floor($this->price * 1.08);
36  }
37  
38  public function getTotalPrice() {
39    return $this->getTaxIncludedPrice() * $this->orderCount;
40  }
41  
42}
43?>

css
1* {
2  box-sizing: border-box;
3}
4
5html, body,
6ul, ol, li,
7h1, h2, h3, h4, h5, h6, p,
8form, input, div {
9  margin: 0;
10  padding: 0;
11}
12
13body {
14  font-family: Lato, 'Hiragino Kaku Gothic Pro', sans-serif;
15  font-weight: 400;
16  -webkit-font-smoothing: antialiased;
17  font-size: 14px;
18  letter-spacing: 0.05em;
19  color: #89949e;
20}
21
22h2, h3, h4, h5, h6 {
23  font-weight: 400;
24}
25
26a {
27  text-decoration: none;
28  color: #4ac0b9;
29}
30
31a:hover {
32  text-decoration: underline;
33}
34
35a:visited {
36  color: #4ac0b9;
37}
38
39img {
40  width: 100%;
41}
42
43.container {
44  width: 1170px;
45  padding-right: 15px;
46  padding-left: 15px;
47  margin-right: auto;
48  margin-left: auto;
49}
50
51/* メニュー一覧 */
52.logo {
53  font-family: Pacifico, sans-serif;
54  font-size: 40px;
55  color: #4ac0b9;
56  display: inline-block;
57  padding: 20px 0;
58  margin: 80px 0 30px;
59  border-top: 5px solid #42c7c1;
60  border-bottom: 5px solid #42c7c1;
61}
62
63.menu-wrapper {
64  margin-bottom: 60px;  
65  text-align: center;
66}
67
68.menu-item-name {
69  line-height: 1.7;
70  font-size: 25px;
71  margin-top: 15px;
72  color: #4ac0b9;
73}
74
75.price {
76  margin: 15px 0;
77  font-size: 18px;
78  color: #322f33;
79}
80
81.menu-items {
82  margin-bottom: 60px;
83}
84
85.menu-item {
86  display: inline-block;
87  width: 40%;
88  padding: 20px;
89  margin-top: 40px;
90}
91
92.menu-item-image {
93  border-radius: 5px;
94}
95
96.menu-item span {
97  font-size: 16px;
98}
99
100input {
101  margin-left: 20px;
102  margin-right: 10px;
103  padding: 5px;
104  text-align: center;
105  width: 60px;
106  font-size: 14px;
107  margin-top: 10px;
108}
109
110input[type="submit"] {
111  display: inline-block;
112  width: 160px;
113  height: 48px;
114  line-height: 48px;
115  padding: 0 20px;
116  border-radius: 30px;
117  border-style: none;
118  color: white;
119  background-color: #42c7c1;
120  font-size: 15px;
121  letter-spacing: 0.1em;
122}
123
124/* 注文確認 */
125.order-wrapper {
126  text-align: center;
127  background-color: #f8f8f8;
128  line-height: 2;
129  letter-spacing: 0.1em;
130  width: 500px;
131  margin: 60px auto;
132  padding: 20px 0px 30px;
133  border-radius: 5px;
134  box-shadow: 0px 1px 4px #ccd7d4;
135}
136
137.order-wrapper h2 {
138  font-size: 32px;
139  margin: 30px 0;
140  color: #322f33;
141}
142
143.order-wrapper p {
144  display: inline-block;
145  font-size: 22px;
146}
147
148.order-wrapper h3 {
149  border-top: 1px solid #dae1e7;
150  margin-top: 30px;
151  padding-top: 30px;
152  font-size: 28px;
153  color: #42c7c1;
154}
155
156.order-wrapper h4 {
157  margin-top: 40px;
158  font-size: 25px;
159  color: #322f33;
160}
161
162.order-amount {
163  width: 40%;
164  text-align: left;
165}
166
167.order-price {
168  width: 35%;
169  text-align: right;
170}

m.ts10806

2020/05/17 09:55

「動かない」「うまくいかない」では何も伝わりませんので、「実際に起きたこと」を記載してください。 https://teratail.com/help/question-tips#questionTips3-4

m.ts10806

2020/05/17 09:56

しかし、見たことがあるコード。何を参考に作ったのでしょうか。

m.ts10806

2020/05/17 09:57

あぁ、前の質問で・・未解決質問放置のまま次々と質問をたてるのはマナー違反ですよ。解決する気なしとみられ、アドバイスが得られにくくなります。

kai0310

2020/05/17 10:27

各ファイルのコードは分かりましたが、ファイル構成が分かりません。ファイル名を含め明示してください。

ponppo

2020/05/17 10:48

エラーコードは出ていますか？

kai0310

2020/05/17 10:53 編集

> うまくブラウザ表示できません。どうすればよろしいでしょうか？あなたの思ううまく表示されないと他人のうまく表示されないとでは認識が違います。デザイン的な問題で意図しない形で表示されてしまっているという意味でうまく表示されていないのか。エラーとなってうまく表示されていないのか。一部だけエラーとなって表示されていないのか。エラーが発生しているのであれば、エラー文を明示してください。この質問だけではあなたが何をしたいのか。どんな状況なのかが伝わりません。もし、説明する点含めて難しいのであればteratailで質問のテンプレートが用意されていますので、そちらを使用してみてください。 https://teratail.com/help#about-template (尚、質問本文は修正できます。)

kai0310

2020/05/17 11:45

05-17-20:44:54 追記一応確認なのですが、スパーリロードを行ってみてください。