エンジニアとして勉強を始めてから、ECサイトの仕組みをより深く理解したくなったので、
最初のステップとして、PHPを使ってECサイトをゼロから開発してみました!
ECサイトは、商品の検索やカート機能、注文管理など、さまざまなシステムが連携して動作しています。
実はツールを使えば簡単に作れます。
一から構築することで仕組みをしっかり理解できるので、 より自由にカスタマイズできるようになれます。
今回開発したECサイトには、以下の機能を実装しました。
- 商品の検索
- 注文者情報の登録
- カートへの商品追加・削除
- 注文履歴の確認
- ページ遷移やログイン機能
1. PHPでECサイトを作成する流れ
ECサイトを開発する際の基本的な流れは、
- データベースの設計(商品情報・注文情報など)
- PHPでデータの取得・表示
- カート機能の実装
- 注文者情報の登録
- 注文履歴の表示
- セッション管理やページ遷移の設定
- デザインを整えて完成!
一つずつ実装することで、ECサイトがどのように動作するのかが理解しやすくなります。
2. データベースの設計
ECサイトでは、
- usersテーブル(ユーザー情報)
- productsテーブル(商品情報)
- ordersテーブル(注文履歴)
- cartテーブル(カート情報)
のテーブルを用意。
データベースの作成にはMySQLを使用し、PHPのPDOを使ってデータのやり取りを行います。
3. 商品一覧と検索機能を実装
商品の一覧表示や検索機能を作成するために、PHP + MySQLを活用しました。
商品一覧を取得するPHPコードの一例:
$pdo = new PDO('mysql:host=localhost;dbname=ec_site', 'root', '');
$query = "SELECT * FROM products WHERE name LIKE ?";
$stmt = $pdo->prepare($query);
$stmt->execute(["%{$_GET['search']}%"]);
$products = $stmt->fetchAll();
このコードを利用することで、ユーザーが入力したキーワードに応じた商品検索ができます。
4. カート機能の実装
カート機能は、セッションを利用して商品を一時的に保存する仕組みを採用しました。
商品の追加・削除を管理するために、以下のような処理を行います。
session_start();
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$productId = $_POST['product_id'];
$_SESSION['cart'][$productId] = ($_SESSION['cart'][$productId] ?? 0) + 1;
}
カート内の商品はセッションを利用して管理し、ログインユーザーが注文を確定するとデータベースに保存されます。
5. 注文履歴を確認できるようにする
注文履歴は、ログインユーザーごとにデータベースから取得し、一覧表示します。
$userId = $_SESSION['user_id'];
$stmt = $pdo->prepare("SELECT * FROM orders WHERE user_id = ?");
$stmt->execute([$userId]);
$orders = $stmt->fetchAll();
この機能を実装することで、ユーザーは過去の購入履歴を簡単に確認できます。
6. デザインを整えてサイトを完成!
最後に、CSS(Bootstrapなど)を活用して、ECサイトのデザインを整えました。
HTML+CSSで作成した商品一覧ページの一例:
<div class="container">
<h2>商品一覧</h2>
<div class="row">
<?php foreach ($products as $product) : ?>
<div class="col-md-4">
<div class="card">
<img src="<?= $product['image'] ?>" class="card-img-top" alt="商品画像">
<div class="card-body">
<h5 class="card-title"><?= $product['name'] ?></h5>
<p class="card-text"><?= $product['price'] ?> 円</p>
<form method="POST" action="cart.php">
<input type="hidden" name="product_id" value="<?= $product['id'] ?>">
<button type="submit" class="btn btn-primary">カートに追加</button>
</form>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
デザインを整えることで、ユーザーが使いやすいECサイトになりました!
まとめ
今回は、PHPを使ってゼロからECサイトを開発しました。
- データベース設計を行い、商品や注文情報を管理
- 商品一覧・検索機能を実装
- カート機能をセッションで管理
- 注文履歴を表示し、ユーザーが購入履歴を確認できるように
- Bootstrapでデザインを整え、見やすいUIに
これからも、機能を追加しながら、さらに自由度の高いECサイトを作っていきたいと思います!