#72 PHPとMySQLの組合せ―商品注文サイト作成の練習とコード解説 1/3

2024年10月20日 14:57

前回のコード解説から時間があいてしまいました。本業のフィールドワークに専念できました。そちらについても近日中に何か発信できればと思います。
PHPとMy SQLを組み合わせたデータ処理の仕方を学ぶための練習問題のコードを解説します。前回の投稿のコードは初学者にとっては難しかったので、よりシンプルなサイトの作り方から取り上げます😓千里の道も一歩からですね🤯

はじめに今回作りたい商品注文サイト

目標アウトプットは以下の通りです。ページ数が多いので、今回の投稿では
1. PHPとMySQLを接続するためのコード
2. ログインページ

の作り方を解説します。

前のページで入力した商品名、値段、数量を表にまとめて表示する
鉛筆マークで商品の編集、ゴミ箱マークで削除できる

0. MySQL上でデータベース作成

コードを書き始める前に、まずMySQLでデータベースを作ります。company-xyzの中に、itemsとusersという表を作りました。

1. PHPとMySQLを接続するためのコード

Visual Studio Codeに書いたコードをMySQLに接続するために、以下のコードを書きます。短いですが、独立したファイルを作っておくことで、その後に作るファイルにいちいちコードを書かなくても、個別に接続できるようになります。このファイルは connection.phpという名前にしています。
以下のコードはwindows用です。(Mac userさんにまで対応しきれずすみません😥)
My SQLのデータベース名前は先述の通り、company-xyzです。

 <?php
   function connection(){
      $server_name = "localhost";
      $username = "root";
      $password = "";
      $db_name = "company-xyz";

      $conn = new mysqli($server_name, $username, $password, $db_name);

      if($conn -> connect_error){
        die("Error in connecting to database". $conn->error);
        } else {
         return $conn;
       }
    }
?>

2.ログインページの作成

コード解説に入ります。まず、htmlにBootstrapを組み合わせてログインページの骨組みを作ります。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">
    <title>Sign Up</title> 
</head>
        
<body>
  <main class="container"> <!-- ログインページの入力欄はmainのコンテンツなので<main>を使用-->
　    <div class="card w-25 my-auto mx-auto px-0 justify-content-center">
      <!-- 入力欄をcardでコンパクトに作成。justify-content-centerで、以下に続く子要素を中央揃えに-->
　　　　　　<div class="card-header text-info bg-white">
              <h1 class="h3 card-title text-center mb-0">Company XYZ</h1>
           </div>
           <div class="card-body">
              <form action="" method="post">
                <div class="mb-3">
                   <label for="username" class="form-label small">Username</label>
                   <input type="text" name="username" id="username" class="form-control" autofocus required>
                </div>

           　　　<div class="mb-5">
                    <label for="password" name="password" id="password" class="form-label">Password</label>
                    <input type="password" name="password" id="password" class="form-control">
                </div>

                <button type="submit" name="btn_sign_in" class="btn btn-info w-100">Log in</button>
             </form>

            <div class="text-center mt-3">
                <!-- アカウント作成ページのファイル名sign-up.phpをリンク先として<a>tagに記入-->
                <a href="sign-up.php" class="small">Create Account</a>
            </div>
        </div>
    </div>
</main>
</body>
</html>

次に、phpのパートです。

<?php
// データベースMySQLと接続するためのfunctionであるconnection()を定義したconnection.phpと接続
require "connection.php";

function login($username, $password){
   $conn = connection();
   $sql = "SELECT * FROM users WHERE username = '$username'";

   if($result = $conn -> query($sql)) {
    // formで送られたデータが1行なら、という意味
　　//　つまり、ログインしようとデータを送ってきたアカウントが1つのみならば、ということ
      if ($result ->num_rows >= 1){
       // fetch_assoc()はformで送られた結果セットから1行を取得して連想配列として返す
        $user = $result->fetch_assoc();

　　　　// passwordの認証
        if(password_verify($password, $user['password'])) {
            session_start();

            $_SESSION['user_id'] = $user['id'];
            $_SESSION['username'] = $user['username'];
            
　　　　　　// formで送られたパスワード($password)が$user['password']と一致した場合
           // ユーザーIDとユーザー名をデータベースに保存

　　　　　　// add-item.phpというページにログイン後リダイレクトする
            header("location: add-item.php");
            exit;
        } else {
            // パスワードが間違っている場合
            echo "<div class='alert alert-danger'>Incorrect password.</div>";
        }
    } else {
        // 2つ以上のアカウントでログインしようとした場合
        echo "<div class='alert alert-danger'>Username not found.</div>";
    }
  } else {
    // 上記以外の場合は接続エラー
    die("Error retrieving the user:" . $conn->error);
  }
}

// sign inボタンが押されたら、ユーザー名とパスワードを$usernameと$passwordに格納、冒頭のlogin()functionでログイン
if(isset($_POST['btn_sign_in'])){
    $username = $_POST['username'];
    $password = $_POST['password'];

    login($username, $password);
  }
?>

コード解説はここまでとします。次回以降、ログイン以降のコードを解説するので少しお待ちください。

本業の忙しさにかまけて久しぶりの投稿になってしまったので、上記のコードに関連する過去の投稿も、自分の復習を兼ねて貼っておきます。

そもそもFormってどうやって作るんだっけ？と思った方は覗いてやってくださいね。

Bootstrapの使い方については次の投稿もご参照ください。

Bootstrapでcardを使う方法は次の記事にまとめています。#29-30の記事ではcardに写真を挿入しています。
#72である今回の記事のように、ログインページなど入力欄がコンパクトなフォームを作るときにもcardを使うと、より見やすくなるのかなと作りながら思いました。

Formの入力内容をPHPで処理する方法についてはこちらもご覧ください。

筆者が受講中のKredoの公式ラインはこちらです。未経験からwebエンジニアに転職した卒業生の方の体験記なども載っているのでぜひ覗いてみてください！

こちらのリンクから受講申し込みをするとアマギフ3万円or 無料の英語レッスン(50分×26回)がプレゼントされます！
条件に該当すれば受講料の70%の補助金がもらえる期間だそうで、詳しいことも「友だち追加」ボタンから入れるリンクに記載されています。

Kredoについて詳しく知りたい方はぜひこちらもご覧ください。😊