今回は、http://ponk.jp/php/basic/ecさん
のサイトをほぼまったく同じものですが、自分が忘れないためにもプログラムの解説をやっていきます。
まず、お使いのサーバーのネットでアクセスできるディレクトリの中にshopというフォルダを作成してください。また、shopフォルダの中にkanriフォルダ、imagesフォルダを作成します。具体的な構造は次のようになっています。
また、imagesには
を入れておいてください。
それから、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フォルダ内に三つのファイルを作成します。
<?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="">';
}
?>
<?php
require 'common.php';
$pdo = connect();
$st = $pdo->query("SELECT * FROM goods");
$goods = $st->fetchAll();
require '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>
実行すると次のような画面になります。
解説へ
まず、すべてのプログラムが参照できるように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に入った画像が最終的に出力される漢字ではないでしょうか？
<?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に差し込んでいるんやなーという感じです笑