※当サイトの記事には、広告・プロモーションが含まれます。

ECサイト カートに入れるとこまで(ただし、セキュリティー対策は全くできてません、あとデザインも)

Xamppを起動して、『Apache』,『MySQL』をstartし『MySQL』のAdminをクリック。

データベース『suzuEC』を作成し、テーブルを4つ作ります。テーブルを作ったら『挿入』を使ってテーブルに情報を入力していきましょう。『SQL』でinsert文でも情報は入力できます。

suzuEC_user

f:id:ts0818:20150328164611p:plain

suzuEC_syohin

f:id:ts0818:20150328164612p:plain

suzuEC_kubun

f:id:ts0818:20150328164613p:plain

suzuEC_cart

f:id:ts0818:20150328164614p:plain

init.php

<?php

//  データベース接続に必要な情報を定数として定義

define('DB_CONNECT','mysql:host=localhost;dbname=suzuEC;charset=utf8');
define('DB_USER','root');
define('DB_PASS','root');

index.php

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<h1>ECサイト練習</h1>
<h2>メールアドレスとパスワードを入力して下さい</h2><BR>
<form class="top" method="GET" action="kubunSelect.php">
<p><label for="userId">メール</label>
<input class="mail" name="userId" type="mail" id="userId" size="40" placeholder="例:ECsaito_ensyu@gmail.com"></p>
<p><label for="userPass">パスワード</label>
<input class="pass" name="userPass" type="password" id=userPass size="40" placeholder="例:ecsaitomuzukasi"></p>

<BR>
<p class="login"><input type="submit" value="ログイン"></p>
</form><BR />
</div><!--#container-->
</body>
</html>

kubunSelect.php

<?php

// print "メールアドレス({$_GET['mail']})が入力されました<br>\n";
// print "パスワード({$_GET['password']})が入力されました<br>\n";

require_once dirname(__FILE__).'/init.php';

$dbh = new PDO(DB_CONNECT, DB_USER, DB_PASS);
$dbh->query('SET NAMES utf8');

//index.phpからgetで送られた情報を変数に格納。
$id = htmlspecialchars($_GET['userId']);
$pass = htmlspecialchars($_GET['userPass']);

 

// $sql = "select userId,userName from ikeEC_user where id='".$id."' and pass='".$pass."'";
$sql = "select userId,userName from suzuEC_user where userId = ? and userPass = ?";
// print "SQL=".$sql."<BR>";
$stmt = $dbh->prepare($sql);
// $stmt->execute( );
$stmt->execute(array($id, $pass));

?>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<h1>ECサイト練習</h1>
<p><a href="index.php">ログアウト</a></p>

<h2>商品区分を選んでください</h2><BR>
<?php

if($db = $stmt->fetch( )){
$c_name = $db['userName'];
$c_id = $db['userId'];
print "{$c_name}さんログイン成功です<BR /><BR />";
// $dbh = null;
}else{
echo "IDかパスワードが間違っています";
echo "<BR /><BR />";
echo "<input type='button' value='前のページへ戻る' onclick='history.back( )'>";
$dbh = null;
exit( );
}
//商品区分を表示する
$sql = "select * from suzuEC_kubun";
print "<h3>商品の分類</h3><br>\n";
foreach($dbh->query($sql) as $kekka) {
$c_syohinKubun = $kekka['syohinKubun'];
$c_kubunName = $kekka['kubunName'];
print "<p class='category'><a href=ichiran.php?syohinKubun={$c_syohinKubun}&userId={$c_id}>{$c_kubunName}</a></p><br>\n";

}

 

$dbh = null;
?>
</div><!--#container-->
</body>
</html>

ichiran.php 

<?php
require_once dirname(__FILE__).'/init.php';

$dbh = new PDO(DB_CONNECT, DB_USER, DB_PASS);
$dbh->query('SET NAMES utf8');

//kubunSelect.phpのaリンクの情報でGETで送られたものを変数に格納。
$syohinKubun = $_GET['syohinKubun'];
$userId = $_GET['userId'];

$sql = 'select * from suzuEC_user';
$stmt = $dbh->prepare($sql);
$stmt->execute( );
$db = $stmt->fetch(PDO::FETCH_ASSOC);
$c_userId = $db['userId'];
$c_userPass = $db['userPass'];

?>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<h1>ECサイト練習</h1>
<?php
print "userId={$userId}<BR /><BR />";
print '<a href="kubunSelect.php?userId='.$c_userId.'&userPass='.$c_userPass.' ">商品区分に戻る</a>';
?>
<h2>商品一覧</h2><BR>

<?php


$sql = "select * from suzuEC_syohin where syohinKubun = ?";

$stmt = $dbh->prepare($sql);
$stmt->execute(array($syohinKubun));

while($db = $stmt->fetch(PDO::FETCH_ASSOC)){
$c_syohinId = $db['syohinId'];
$c_syohinName = $db['syohinName'];
$c_syohinSetsumei = nl2br($db['syohinSetsumei']);
$c_syohinPrice = $db['syohinPrice'];
$c_syohinPicture = $db['syohinPicture'];
$c_syohinZaiko = $db['syohinZaiko'];

print <<<eot
<div class="content">

<div class="showwindow">
<a href="syohin_syousai.php?syohinId={$c_syohinId}&userId={$userId}"><img src="img/{$c_syohinPicture}"></a><BR>
</div>
<table border="1">
<tr><th>商品名</th><td class="daimei">{$c_syohinName}</td></tr>
<tr><th>商品区分</th><td class="category">{$syohinKubun}</td></tr>
<tr><th class="setsumei">商品の説明</th><td class="arasuji">{$c_syohinSetsumei}</td></tr>
<tr><th>商品価格</th><td class="nedan">{$c_syohinPrice}</td><tr>
<tr><th>商品の写真</th><td class="picture">{$c_syohinPicture}</td></tr>
<tr><th>在庫状況</th><td class="nokori">{$c_syohinZaiko}</td></tr>
</table>
</div><!--.content-->
eot;
}

$dbh = null;

?>
</div><!--#container-->
</body>
</html>

syohin_syousai.php

<?php
require_once dirname(__FILE__).'/init.php';

$dbh = new PDO(DB_CONNECT, DB_USER, DB_PASS);
$dbh->query('SET NAMES utf8');

//ichiran.phpのaリンクのGET情報。
$syohinId = $_GET['syohinId'];
$userId = $_GET['userId'];

$sql = "select * from suzuEC_user";
$stmt = $dbh->query($sql);
$stmt->execute( );
$db = $stmt->fetch(PDO::FETCH_ASSOC);
$c_userId = $db['userId'];
$c_userPass = $db['userPass'];
$c_userName = $db['userName'];

$sql = "select * from suzuEC_syohin where syohinId = ?";
$stmt = $dbh->prepare($sql);
$stmt->execute(array($syohinId));
while($db = $stmt->fetch(PDO::FETCH_ASSOC)){
$c_syohinId = $db['syohinId'];
$c_syohinName = $db['syohinName'];
$c_syohinKubun = $db['syohinKubun'];
$c_syohinSetsumei = nl2br($db['syohinSetsumei']);
$c_syohinPrice = $db['syohinPrice'];
$c_syohinPicture = $db['syohinPicture'];
$c_syohinZaiko = $db['syohinZaiko'];
?>


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>商品詳細</title>
<link rel="stylesheet" href="css/style.css">

<script>

function goukei(tanka,cartKosu){
var kingaku;
kingaku = tanka;
kingaku = tanka * cartKosu * 1.08;


return kingaku;
}

function calcKingaku( ){
var tanka01,cartKosu01;

tanka01 = <?php echo $c_syohinPrice; ?>;
cartKosu01 = parseInt(document.calcForm.cartKosu.value);

document.calcForm.kingaku.value = goukei(tanka01,cartKosu01);
}


</script>

</head>

<body>
<div id="container">
<h1>商品詳細ページ</h1>

<?php
print "{$c_userName}様<BR /><BR />";
print "userID = {$userId}<BR /><BR />";
print '<p><a href="ichiran.php?userId='.$c_userId.'&syohinKubun='.$c_syohinKubun.' ">商品一覧に戻る</a></p>';
print '<p><a href="kubunSelect.php?userId='.$c_userId.'&userPass='.$c_userPass.' ">商品区分に戻る</a></p>';
?>

<?php
print <<<eot

<div id="imageblock">
<img src="img/{$c_syohinPicture}">
</div><!--#imageblock-->

<form name="calcForm" method="get" action="cart_entry.php">
<p class="kakaku">価格:{$c_syohinPrice}</p>
<p>通常配送無料<a href="#"><span>詳細</span></a></p>
<p><span class="zaiko">在庫あり</span><span class="zaiko_jyoukyo"><a href="#">在庫状況について</a></span></p>
<p class="riyou">この商品は、<span class="amazon">suzuEC.co.jp</span>が販売、発送します。<BR>ギフトラッピングを利用できます。</p>
<p><label for="kosu">数量:</label>
<input type="text" name="cartKosu" size="3"></p>
<p><input type="button" name="calc" value="計算" onclick="calcKingaku( )">
<input type="button" name="reset" value="クリア"></p>
<p><label for="kingaku">金額:</label>
<input type="text" name="kingaku" size="10" value=" ">&nbsp;円(税込)</p>
<p><input class="kaimono" type="submit" value="買い物かごに入れる" ></p>
</form>

<div id="syoukai">
<h1>商品番号:{$c_syohinId}</h1>
<h2>商品名:{$c_syohinName}</h2>

<p>{$c_syohinSetsumei}</p>
</div><!--#syoukai-->

 

eot;
}

session_start( );
session_regenerate_id(true);

$_SESSION['s_name'] = $c_syohinName;
$_SESSION['s_price'] = $c_syohinPrice;
$_SESSION['s_picture'] = $c_syohinPicture;
$_SESSION['s_id'] = $c_syohinId;
$_SESSION['syohinId'] = $syohinId;

 

?>
</div><!--#container-->
</body>
</html>

cart_entry.php

<?php
//formのmethod=getで取得した情報
$cartkosu = $_GET['cartKosu'];
$kingaku = $_GET['kingaku'];

session_start( );
session_regenerate_id(true);

$_SESSION['c_kosu'] = $cartkosu;
$_SESSION['c_kingaku'] = $kingaku;
$syohinId = $_SESSION['syohinId'];

$today = date("Y/m/d h:i:s");

require_once dirname(__FILE__).'/init.php';

$dbh = new PDO(DB_CONNECT, DB_USER, DB_PASS);

$sql = "select * from suzuEC_user";
$stmt = $dbh->query($sql);
$stmt->execute( );
$db = $stmt->fetch(PDO::FETCH_ASSOC);
$c_userName = $db['userName'];
$c_userId = $db['userId'];
$c_userPass = $db['userPass'];
$c_userAddress = $db['userAddress'];
$c_userTel = $db['userTel'];


$sql = "select * from suzuEC_syohin where syohinId = ?";

$stmt = $dbh->prepare($sql);
//execute( )は、( )の中身を指定するのはあくまで$sqlの『?』の部分を補填してSQL文を完成させて、$sqlを実行するということらしいっす。
$stmt->execute(array($syohinId));
$db_s = $stmt->fetch(PDO::FETCH_ASSOC);


$c_syohinId = $db_s['syohinId'];
$c_syohinName = $db_s['syohinName'];
$c_syohinKubun = $db_s['syohinKubun'];
$c_syohinPrice = $db_s['syohinPrice'];
$c_syohinPicture = $db_s['syohinPicture'];
$c_syohinZaiko = $db_s['syohinZaiko'];

 

?>


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>注文の確認</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<div id="header">
<h1>注文の確認</h1>
<h2><?php print $c_userName; ?></h2>
<p>userID = <?php print $c_userId; ?></p>
</div><!--#header-->
<ul>
<li><img src="img/<?php print $_SESSION['s_picture']; ?>"></li>
<li>商品名:<?php print $_SESSION['s_name']; ?></li>
<li>個数:<?php print $_SESSION['c_kosu']; ?></li>
<li>金額:<?php print $_SESSION['c_kingaku']; ?></li>
<li>注文日時:<?php print $today; ?></li>
<li>ご注文主:<?php print $c_userName; ?></li>
<li>お届け先:<?php print $c_userAddress; ?></li>
<li>連絡先:<?php print $c_userTel; ?></li>
</ul>
<div id="tyumon">
<p>上記内容でご注文を承りして宜しいでしょうか?</p>
<p><a href="cart.php?syohinKubun=<?php print $c_syohinKubun; ?>&userId=<?php print $c_userId; ?>">上記内容で注文する</a></p>
<p><a href="syohin_syousai.php?syohinId=<?php print $c_syohinId; ?>&userId=<?php print $c_userId; ?>">注文を変更する</a></p>
<p><a href="ichiran.php?syohinKubun=<?php print $c_syohinKubun; ?>&userId=<?php print $c_userId; ?>">商品一覧
</a></p>
<p><a href="kubunSelect.php?userPass=<?php print $c_userPass; ?>&userId=<?php print $c_userId; ?>">商品区分</a></p>
</div><!--#tyumon-->
</div><!--#container-->
</body>
</html>

cart.php 

<?php

$syohinKubun = $_GET['syohinKubun'];
$userId = $_GET['userId'];

session_start( );
session_regenerate_id(true);

$today = date("Y/m/d h:i:s");

$s_name = $_SESSION['s_name'];
$s_price = $_SESSION['s_price'];
$s_kosu = $_SESSION['c_kosu'];
$s_goukei = $_SESSION['c_kingaku'];
$s_id = $_SESSION['s_id'];


require_once dirname(__FILE__).'/init.php';

$dbh = new PDO(DB_CONNECT, DB_USER, DB_PASS);
$dbh->query('SET NAMES utf8');

$sql = 'select * from suzuEC_user where userId = ?';
$stmt = $dbh->prepare($sql);
$stmt->execute(array($userId));
$db = $stmt->fetch(PDO::FETCH_ASSOC);
$c_userPass = $db['userPass'];

$sql = 'insert into suzuEC_cart(userId,syohinId,syohinName,syohinPrice,cartKosu,goukeiKingaku,date) values(" '.$userId.' "," '.$s_id.' "," '.$s_name.' "," '.$s_price.' "," '.$s_kosu.' "," '.$s_goukei.' "," '.$today.' ") ';
$stmt = $dbh->prepare($sql);
$stmt->execute(array($userId,$s_id,$s_name,$s_price,$s_kosu,$s_goukei,$today));

$sql = 'select * from suzuEC_cart';
$stmt = $dbh->query($sql);
$stmt->execute( );
$db_user = $stmt->fetch(PDO::FETCH_ASSOC);
$c_userId = $db_user['userId'];

?>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>注文確定</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<h1>ご利用ありがとうございます。</h1>
<h2>ご注文を承りました。</h2>
<p><a href="kakunin.php?userId=<?php print $c_userId; ?>">現在注文数確認</a></p>
<p><a href="kubunSelect.php?userPass=<?php print $c_userPass; ?>&userId=<?php print $c_userId; ?>">商品区分に戻る</a></p>
<p><a href="index.php">ログアウト</a></p>
</div><!--#container-->
</body>
</html>

kakunin.php

<?php

session_start( );
session_regenerate_id(true);

$userId = $_GET['userId'];


require_once dirname(__FILE__).'/init.php';

$dbh = new PDO(DB_CONNECT, DB_USER, DB_PASS);
$dbh->query('SET NAMES utf8');

$sql = 'select * from suzuEC_user where userId = ?';
$stmt = $dbh->prepare($sql);
$stmt->execute(array($userId));
$db = $stmt->fetch(PDO::FETCH_ASSOC);
$c_userPass = $db['userPass'];
$c_userId = $db['userId'];
$c_userName = $db['userName'];


?>

 


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>注文数確認</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<h1>お客様の注文状況</h1>
<h2><?php print $c_userName; ?></h2>
<p>userId = <?php print $c_userId; ?></p>
<p><a href="kubunSelect.php?userPass=<?php print $c_userPass; ?>&userId=<?php print $c_userId; ?>">商品区分に戻る</a></p>
<p><a href="index.php">ログアウト</a></p>
<?php
$sql = 'select * from suzuEC_cart where userId = ?';
$stmt = $dbh->prepare($sql);
$stmt->execute(array($userId));
while($db = $stmt->fetch(PDO::FETCH_ASSOC)){
$s_userId = $db['userId'];
$s_syohinId = $db['syohinId'];
$s_syohinName = $db['syohinName'];
$s_syohinPrice = $db['syohinPrice'];
$s_cartKosu = $db['cartKosu'];
$s_goukeiKingaku = $db['goukeiKingaku'];
$s_date = $db['date'];
print <<<eot


<div class="content">
<div class="showwindow">
<a href="syohin_syousai.php?syohinId={$s_syohinId}&userId={$s_userId}"></a><BR>
</div>
<table border="1">
<tr><th>商品名</th><td class="daimei">{$s_syohinName}</td></tr>
<tr><th>商品番号</th><td class="bangou">{$s_syohinId}</td></tr>
<tr><th>商品価格</th><td class="nedan">{$s_syohinPrice}</td></tr>
<tr><th>商品の個数</th><td class="kosuu">{$s_cartKosu}</td></tr>
<tr><th>合計金額</th><td class="goukei">{$s_goukeiKingaku}</td></tr>
<tr><th>注文日時</th><td class="hiduke">{$s_date}</td></tr>
</table>
</div><!--.content-->
eot;
}
$dbh = null;

?>
</div><!--#container-->
</body>
</html>

style.css

@charset "utf-8";
/* CSS Document */

/*index.php*/

#container {
width:960px;
margin:0 auto;
}
form.top {
width:760px;
position: relative;
}
input.mail {
margin-left:68px;
}
input.pass {
margin-left:40px;
}
p.login {
position: absolute;
top: 120px;
left340px;

}

/*kubunSelect.php*/
p.category {
margin:10px;
font-size:21px;
}

/*ichiran.php*/

.showwindow {
width:400px;
float:left;
}
.content {
clear:both;
margin-bottom:30px;
}
th {
font-size:21px;
width:140px;
height:60px;
}
th.setsumei {
height:180px;
}
td {
font-size:16px;
}
td.daimei {
font-size:21px;
font-weight:bold;
text-align: center;
}
td.category {
text-align: center;
}
td.arasuji {
line-height:1.8;
text-align: left;
}
td.nedan {
text-align: center;
}
td.picture {
text-align: center;
}
td.nokori {
text-align: center;
}

/*syohin_syousai.php*/
#imageblock {
width:600px;
float:left;
}
input.kaimono {
color:initial;
}
form{
width:300px;
height:400px;
float:left;
border:5px solid #DADADA;
border-radius:10px;
}
form p {
margin:24px 20px;
}
form span {
margin-left:10px;
}
p.kakaku {
color:#b12d5a;
}
span.zaiko_jyoukyo {
color:#0095db;
margin-left:10px;
}
span.zaiko {
color:#008a00;
}
p.riyou {
line-height: 1.3;
}
span.amazon {
color:#0095db;
margin-left: 0px;
}
#syoukai {
width:960px;
clear:both;
}
#syoukai p {
line-height: 1.6;
}

/*cart_entry.php*/
#header {
width:760px;
margin: 0 auto;
}
#tyumon {
width:760px;
margin: 0 auto;
}
ul {
width:760px;
margin: 0 auto;
}
li {
list-style-type:none;
line-height: 2.0;
font-size:21px;
}

/*kakunin.php*/

td.bangou {
text-align: center;
}
td.kosuu {
text-align: center;
}
td.goukei {
text-align: center;
}
td.hiduke {
text-align: center;
}

imgフォルダの中のファイル名はデータベースの『suzuEC_syohin』のsyohinPictureに入力したファイル名と同じにしておきます。