Photo by
aoming
#73 PHPとMySQLの組合せ―商品注文サイト作成の練習とコード解説 2/3
本記事は前回の投稿の#72の続きです。作りたいアウトプットの全体像は#72の記事にあるので、必要に応じて合わせてご参照ください😊
この記事では
1. アカウント作成ページ
2. ナビゲーションバー
の作り方を解説します。
1.アカウント作成ページのアウトプット
#72で作ったログインページには"Create Account"というアカウント作成ページに飛ぶリンクもついています。
それをクリックすると、次のスクリーンショットのようなアカウント作成ページに飛びます。
2.アカウント作成ページのコード
では、コード解説に入りましょう。
まずhtmlのパートは次の通りです。
この記事ではphpのコード解説がメインなので、htmlはスクリーンショットのみ貼っておきます。
ウェブページのデザインに使用しているBootstrapとFont Awesomeのリンクもコード内にあります。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sections</title>
<!-- CDN CSS-Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!-- Font Awesome-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" /></head>
<body class="bg-light"><div style = "height: 100vh;"><div class="row h-100 m-0"><div class="card col-3 mx-auto my-auto p-0"><div class="card-header text-info"><h1 class="card-title h3 mb-0">Create your account</h1></div><div class="card-body"><form action="" method="post"><div class="mb-3"><label for="username" class="form-label small fw-bold">Username</label><input type="text" name="username" id="username" class="form-control" maxlength="20" required autofocus></div> <div class="mb-3">
<label for="password" class="form-label small fw-bold">Password</label>
<input type="password" name="password" id="password" class="form-control" required>
</div>
<div class="mb-5">
<label for="confirm-password" class="form-label small fw-bold">Confirm Password</label>
<input type="password" name="confirm_password" id="confirm-password" class="form-control">
</div>
<button type="submit" class="btn btn-info w-100" name="btn_sign_up">Sign Up</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>次にphpのコードです。それぞれのコードの意味はコメントアウトして書いています。
<?php
// データベースと接続するためのrequire "connection.php"
require "connection.php";
// createUser() アカウント作成のメソッド
function createUser($username, $password){
$conn = connection();
// password_hash データベースに表示されるパスワードを暗号化
// パスワードを入力するformを作る時は必ず使う
$password = password_hash($password, PASSWORD_DEFAULT);
// データベースにユーザー名とパスワードを挿入
$sql = "INSERT INTO users (`username`, `password`) VALUES ('$username','$password')";
// データ(ユーザー名とパスワード)がデータベースに渡されたらログインページ(sign-in.php)にリダイレクト
if($conn->query($sql)){
header("location: sign-in.php");
exit;
} else {
// データベースにデータが渡らなければ接続エラー
die("Error signing up: ". $conn->error);
}
}
// アカウント作成ページにあるsign upボタンが押されれば
if(isset($_POST['btn_sign_up'])) {
// formに入力されたusername, password, confirm_passwordをそれぞれのvariableに格納
$username = $_POST['username'];
$password = $_POST['password'];
$confirm_password = $_POST['confirm_password'];
// $passwordと $confirm_passwordが一致すればアカウント作成
if ($password === $confirm_password) {
// 上記で作ったアカウント作成のメソッド
createUser($username, $password);
} else {
// 一致しなければエラー
echo "<p class='alert alert-danger'>Password and Confirm Password do not match.</p>";
}
}
?>これでアカウント作成ページの完成です。
アカウント作成後にログインページにリダイレクトされるので、ログインしましょう。
2.商品追加フォームの作成―ナビゲーションバーと商品追加フォーム
ログインすると、商品追加画面（#72のコード解説にある header("location: add-item.php");によってリダイレクトされるページ）が表示されます。
このページは次の2つのパートから構成されています。1つ目は、と、"COMPANY XYZ"や"Log out"と書かれたナビゲーションバー。2つ目は商品を追加するためのフォームです。
順に作っていきましょう。
まず、ナビゲーションバーからです。商品追加ページの後は、商品一覧用のページ、買いたい商品名、数量の編集ページ、商品の削除ページを作るのですが、いずれのページにもナビゲーションバーが表示されるようにデザインします。
それぞれのページでナビゲーションバーのコードをいちいち書かなくてもいいように、ナビゲーションバーのコードで独立したファイルを作り、そのファイルを他のページのコードにも埋め込むと手間が省けます。
では、ナビゲーションバーを作りましょう。以下がコードです。
<nav class="navbar navbar-expand navbar-info bg-info" style="margin-bottomm: 80px">
<div class="container">
<!-- BRANDロゴを表示。ロゴをクリックすると商品一覧用のページに飛ぶ -->
<a href="view-items.php" class="navbar-brand">
<h1 class="h4 mb-0 text-uppercase text-white">Company xyz</h1>
</a>
<!-- LINKS -->
<ul class="navbar-nav">
<li class="nav-item"><a href="view-products.php" class="nav-link text-white">Items</a></li> <!-- place "text-white" inside of <a>tag to change color -->
</ul>
<ul class="navbar-nav ms-auto">
<!-- <?= $_SESSION['username']?>によってログイン中のアカウント名を取得 -->
<li class="nav-item text-white"><a href="profile.php" class="nav-link fw-bold text-white"><?= $_SESSION['username']?></a></li>
<li class="nav-item text-white"><a href="sign-out.php" class="nav-link text-white">Log out</a></li>
</ul>
</div>
</nav>次に商品追加フォームを作ります。htmlのパートは次の通りです。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<title>Add Item</title>
</head>
<body>
// ナビゲーションバーを埋め込む
<?php
include "main-nav.php";
?>
<main class="container">
<div class="card w-25 my-auto mx-auto px-0">
<div class="card-header text-white bg-info">
<h3 class="card-title text-start mb-0">Add New Item</h3>
</div>
<div class="card-body">
<form action="" method="post">
<div class="mb-2">
<label for="itemname" class="form-label small fw-bold">Item Name</label>
<input type="text" name="itemname" id="itemname" class="form-control" autofocus required>
</div>
<div class="mb-2">
<label for="price" class="form-label small fw-bold">Item Price</label>
<div class="input-group">
<div class="input-group-text">$</div>
<input type="number" name="price" id="price" class="form-control" step="any" required>
</div>
</div>
<div class="mb-2">
<label for="quantity" class="form-label small fw-bold">Quantity</label>
<input type="number" name="quantity" id="quantity" class="form-control" step="any" required>
</div>
<a href="#" class="btn btn-outline-secondary">Cancel</a>
<button type="submit" name="btn_add" class="btn btn-info fw-bold px-5">Add</button>
</form>
</div>
</div>
</main>
</body>
</html>次にphpのパートです。
<?php
session_start();
require "connection.php";
// 商品追加のためのメソッドaddItem()を作成.追加するのは商品名($item_name)、値段($item_price)、数量($quantity)
// 商品名、値段、数量は1番下のformに入力されたデータから取得
function addItem($item_name, $item_price, $quantity){
$conn = connection();
// データベースに挿入
$sql = "INSERT INTO items (`item_name`, item_price, quantity) VALUES ('$item_name', $item_price, $quantity)";
//データベースに引き渡されたら商品一覧用のページにリダイレクト
if($conn->query($sql)){
header("location:view-items.php");
exit;
} else {
//データベースに引き渡されなければ接続エラーと表示
die("Error in adding new item". $conn->error);
}
}
if(isset($_POST['btn_add'])) {
$item_name = $_POST['itemname'];
$item_price = $_POST['price'];
$quantity = $_POST['quantity'];
// formに入力された商品名、値段、数量を$に格納
// 商品追加メソッド。冒頭で定義
addItem($item_name, $item_price, $quantity);
}
?>これで商品追加ページができました。
今回はここまで！次回は商品一覧用、編集、削除のページを作ります。
今回も読んでいただき、ありがとうございました。励みになります☺️
こちらのリンクから受講申し込みをするとアマギフ3万円or 無料の英語レッスン(50分×26回)がプレゼントされます！
条件に該当すれば受講料の70%の補助金がもらえる期間だそうで、詳しいことも「友だち追加」ボタンから入れるリンクに記載されています。
Kredoについて詳しく知りたい方はぜひこちらもご覧ください。😊