デイトラweb制作上級編 DAY4

PHPでECサイトを作ってみよう①

商品ページ ↓

カート画面 ↓

ファイルの分割

ファイル一覧

・index.php
→ 商品ページ(1ページ目)

・cart.php
→ カート画面
(2ページ目)

・products.php
→ 商品それぞれの情報(値段など)

・functions.php
→ 税込価格、税込価格 + "円"

・style.css
→ 文字の大きさなど(今回は触れない)

foreach + endforeach

foreach はデイトラweb制作上級編 DAY3で学習済み、今回はそれの応用

products.php

<?php
$products = [
    [
        "name" => "アボカド",
        "price" => 230,
        "image" => "./images/image_1.jpg"
    ],
    [
        "name" => "オレンジ",
        "price" => 100,
        "image" => "./images/image_2.jpg"
    ],
    [
        "name" => "レモン",
        "price" => "200",
        "image" => "./images/image_3.jpg"
    ],
    [
        "name" => "パイナップル",
        "price" => "900",
        "image" => "./images/image_4.jpg"
    ]
];
?>

index.php

<!-- products.php の読み込み -->
<?php require_once 'products.php' ?>

<?php foreach ($products as $product) : ?>
<!-- ここから -->
    <div class="card">
        <img class="card-image" src="<?php echo $product["image"]; ?>" alt="">
        <p class="card-title"><?php echo $product["name"]; ?></p>
        <div class="flex justify-between">
            <p class="card-price"><?php echo $product["price"]; ?></p>
            <input min="0" class="item-number" type="number" value="0">
        </div>
    </div>
<!-- ここまで繰り返し -->
<?php endforeach; ?>

<?php foreach ( $配列 as $変数 ) : ?>

    繰り返す処理;

<?php endforeach; ?>

入力内容の送信(別のファイルに)

index.php

<form id="cart" method="post" action="cart.php">
    <input name="<?php echo $product["id"]; ?>" min="0" type="number" value="0">
</form>

formタグの「method」にpost

「action」には送り先のファイル名を入れる

cart.php

<div class="cart-item-detail">
    <p><?php echo $_POST[$product["id"]]; ?></p>
</div>

送信された値を使いたいときは

$_POST [ 使いたい値 ];

カート画面

①「個数 × 税込価格」

functions.php

<?php
    <!-- 税込価格 -->
    function calPriceIncludedTax($price) {
        $taxRate = 0.1;
        return $price + $price * $taxRate;
    }
    <!-- 税込価格 + "円" -->
    function displayPrice($price) {
        $priceIncludedTax = calPriceIncludedTax($price);
        return $priceIncludedTax."円";
    }
?>

cart.php

require_once 'functions.php';

<div class="cart-item-detail">
    <p><?php echo $_POST[$product["id"]]; ?> × <?php echo displayPrice($product["price"]); ?></p>
</div>

決済金額の合計値を出す

cart.php(税込価格)

<?php
require_once 'functions.php';
$sum = 0;
foreach ($products as $product) {
    $price = calPriceIncludedTax($product["price"]) * $_POST[$product["id"]];
    $sum = $sum + $price;
}
?>

<div class="btn-footer bg-gray">
    <input class="checkout-btn" type="submit" value="<?php echo $sum . "円決済する"; ?>">
</div>

まとめ

今回からECサイトのようなアプリを作り始めました。

まだ作り始めの段階ですが、PHPがどんな風に使われるのか少しつかめたような気がします。

見慣れないコードもたくさん出てきたので、忘れないようにちゃんとメモしていきたいです!

コメントを残す

メールアドレスが公開されることはありません。