19
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

ecサイトを初心者が作ってみた その1(備忘録)

今回は、http://ponk.jp/php/basic/ecさん
のサイトをほぼまったく同じものですが、自分が忘れないためにもプログラムの解説をやっていきます。
まず、お使いのサーバーのネットでアクセスできるディレクトリの中にshopというフォルダを作成してください。また、shopフォルダの中にkanriフォルダ、imagesフォルダを作成します。具体的な構造は次のようになっています。
shop_folder.png

また、imagesには
noimage.jpg
を入れておいてください。

それから、shop内に次のcssファイルを作成します。

shop.css
body {
  background-color:#bbb;
  font-size: 14px;
  color: #555;
}
a:link, a:visited {color: #844;}
a:hover {color: #faa;}
p,form {
  margin: 0;
  padding: 4px 0;
}
h1 {
  margin: 10px 0;
  padding: 0;
  font-size: 32px;
  text-align: center;
}
table {
  width: 500px; 
  margin: 15px auto;
  padding: 0;
  background-color: #fff;
  border-collapse: collapse;
}
th {
  text-align: left;
}
th, td {
  margin: 0;
  padding: 6px 16px;
  border-bottom: 12px solid #bbb;
}
.goods {
  font-weight: bold;
}
.base {
  width: 480px; 
  margin: 15px auto;
  padding: 10px;
  background-color: #eee;
}
.error {
  font-weight: bold;
  color: #c44;
}

というcssファイルを作成してください。

次には、sqlでshopデータベースを作成します

CREATE DATABASE shop;

それから、商品のテーブルを作成して値を埋めていきます。

CREATE TABLE goods(
  code SERIAL,
  name TEXT,
  price INT,
  comment TEXT
);

INSERT INTO goods(name,price,comment) VALUES('うどん',220,'あっさり味の\nシンプルなうどん。');
INSERT INTO goods(name,price,comment) VALUES('そば',200,'そば粉たっぷりの\n美味しいそば。');
INSERT INTO goods(name,price,comment) VALUES('パスタ',350,'トマトソースがたっぷり。');

次にshopフォルダ内に三つのファイルを作成します。

common.php
<?php
  session_start();

  function connect() {
    return new PDO("mysql:dbname=shop", "root");
  }

  function img_tag($code) {
    if (file_exists("images/$code.jpg")) $name = $code;
    else $name = 'noimage';
    return '<img src="images/' . $name . '.jpg" alt="">';
  }
?>
index.php
<?php
  require 'common.php';
  $pdo = connect();
  $st = $pdo->query("SELECT * FROM goods");
  $goods = $st->fetchAll();
  require 't_index.php';
?>
t_index.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Noodle Shop</title>
<link rel="stylesheet" href="shop.css">
</head>
<body>
<h1>Noodle Shop</h1>
<table>
  <?php foreach ($goods as $g) { ?>
    <tr>
      <td>
        <?php echo img_tag($g['code']) ?>
      </td>
      <td>
        <p class="goods"><?php echo $g['name'] ?></p>
        <p><?php echo nl2br($g['comment']) ?></p>
      </td>
      <td width="80">
        <p><?php echo $g['price'] ?></p>
        <form action="cart.php" method="post">
          <select name="num">
            <?php
              for ($i = 0; $i <= 9; $i++) {
                echo "<option>$i</option>";
              }
            ?>
          </select>
          <input type="hidden" name="code" value="<?php echo $g['code'] ?>">
          <input type="submit" name="submit" value="カートへ">
        </form>
      </td>
    </tr>
  <?php } ?>
</table>
</body>
</html>

実行すると次のような画面になります。
image.png

解説へ
まず、すべてのプログラムが参照できるようにcommon.phpを作成しました。

session_start();

でセッションをスタートさせます。
僕の認識だとセッションは変数の値などがプログラムを切り替えるときに初期化されるの面倒だから、このような記述をしていると考えております。

function connect() {
    return new PDO("mysql:dbname=shop","root");
}

この部分では、データベースを接続するたびに~PDOと書くのは面倒なので、一気に関数かしてしまったんだと思います。

function img_tag($code){
    if(file_exists("image/$code.jpg")) $name=code;
    else $name="noimage";
    return '<img src="images/' . .$name . ' .jpg" alt="">';
}

では、img_tagでは入力されたcode(商品番号)に対応づけさせられた画像があるかどうか調べています。
file_exists()という関数は特定のファイルのディレクトリを書くとある場合はtrue,
ないときはflaseを返してくれる関数っぽいですね。
それで、もしも画像があった場合はname=$codeとしています。

もしも、画像がなかった場合noimageという画像をあらかじめ自分で作成しておきそれが表示されます。

return '<img src="images/ '. $name .' .jpg" alt="">;'

ではnameに入った画像が最終的に出力される漢字ではないでしょうか?

index.php
<?php
  require 'common.php';
  $pdo = connect();
  $st = $pdo->query("SELECT * FROM goods");
  $goods = $st->fetchAll();
  require 't_index.php';
?>

index.phpはただデータベースから情報を引き足して、t_index.phpに渡しているだけっぽいですね。詳しくは前回のブログhttps://qiita.com/Ryuichi3225/items/357f00ea31f307511772
に書いています。

最後に、t_index.phpについて話します。

うーん申し訳ない、html要因が多くてちょっと今回はphpにしぼりたいものでスルーします。
ただ、

<?php program?>

phpをhtmlに差し込んでいるんやなーという感じです笑

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
19
Help us understand the problem. What are the problem?