常連

### 前提・実現したいこと
PHPで複数のタグを中間テーブルを利用してDBに登録する方法が知りたいです。

現在自作のphpアプリを製作中です。

以下のように投稿フォームを作成しました。
![イメージ説明](367164002d8f54caa043205bfb8a940d.png)
![![イメージ説明](5e36293f05846cdd22ae3b296801b249.png)

タグ以外のDB登録は実装できています。

複数選択できるタグを中間テーブルを用いてDBに登録する方法が知りたいです。

テーブルは以下のように設計しています。
投稿テーブル
![イメージ説明](9595a8f10714b22163196673472d0bfa.png)

タグテーブル
![イメージ説明](5f225b7cb6e1e54e9194a90df7c61d38.png)

投稿とタグの中間テーブル
![イメージ説明](abc5e4bc97706e83742a5a87ca1ce114.png)

今のイメージとしては、
投稿ボタンが押される
↓
入力したタグはセレクトで取得する
↓
3つのテーブルは外部結合する
↓
投稿テーブルと中間テーブルにデータを追加

こんな流れなのかな？と思っています。

### 該当のソースコード
投稿フォーム(post.php)
```php
<a href="index.php">リスト一覧へ</a>
<?php

// 直リンクの禁止
if (empty($_SERVER["HTTP_REFERER"])) {
  header('Location: /');
  exit;
}

session_start();
require_once(ROOT_PATH .'/Models/Post.php');
require_once(ROOT_PATH .'function.php');
ini_set('display_errors', "On");
$obj = new Post();

$err = [];

  if($_SERVER['REQUEST_METHOD'] === 'POST'){

      $title = filter_input(INPUT_POST, 'title');
      $text = filter_input(INPUT_POST, 'text');
      $tags = filter_input(INPUT_POST, 'tags');
      $category = filter_input(INPUT_POST, 'category');
      $price = filter_input(INPUT_POST, 'price');
     以下バリデーションは省略
    
      // エラーがなければ、DBにデータを保存し、リスト一覧にページ遷移
      if(count($err) === 0) {
        $result = $obj->createList($_POST, $save_path);
        $_SESSION['list_msg'] = "リストの投稿に成功しました!";
        header('Location: index.php');
        exit;
      }
  }
?>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.polyfills.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
  <link rel="stylesheet" href="/css/posts.css">
  <title>リスト投稿画面</title>
</head>
<body>
<?php include(ROOT_PATH .'Views/common/header.php'); ?>
  <div class="p-wrapper">
    <div class="p-container">
      <h2 id="p-title">リストを投稿する</h2>
      <form action="" method="POST" enctype="multipart/form-data" id="p-form">
        
        <div class="mb-3">
          <label for="kome"><font color="red">*</font></label>
          <label for="title" class="form-label">タイトル</label>
          <?php if(isset($err['title'])): ?>
            <p class="err"><font color="red"><?php echo $err['title'] ?></font></p>
          <?php endif; ?>
          <input type="text" class="form-control" id="title" name="title" value="<?php if(isset($title)) echo h($title) ?>" placeholder="タイトルを入力してください(30文字以内)">
        </div>
        
        <div class="tag-lebel">
          <label for="kome"><font color="red">*</font></label>
          <label for="tag" class="form-label">タグ(最低1つは選択しましょう)</label>
          <?php if(isset($err['tags'])): ?>
            <p class="err"><font color="red"><?php echo $err['tags'] ?></font></p>
          <?php endif; ?>
        </div>
        <div class="mb-3 tag-form">
          <input name="tags" class='tag_field' placeholder="＋タグの候補を選択してください。(最大5つまで選択可能)" value='<?php if(isset($tags)) echo h($tags) ?>'>
        </div>
        
        <div class="mb-3">
          <label for="kome"><font color="red">*</font></label>
          <label for="contents" class="form-label">詳細</label>
          <?php if(isset($err['text'])): ?>
            <p class="err"><font color="red"><?php echo $err['text'] ?></font></p>
          <?php endif; ?>
          <textarea class="form-control" id="contents" name="text" rows="20" placeholder="サービスの内容、利用者のメリット、アピールしたい実績などを3000文字以内で具体的に書いてください。具体的でわかりやすいほど、リストを見た企業がリクエストをしてくれる確率がアップします。"><?php if(isset($text)) echo h($text) ?></textarea>
        </div>
        
        <h6 id="p-category"><label for="kome"><font color="red">*</font></label>カテゴリーを選択してください</h6>
        <?php if(isset($err['category'])): ?>
            <p class="err_one"><font color="red"><?php echo $err['category'] ?></font></p>
          <?php endif; ?>
        <select class="form-select" id="category-select" name="category">
          <?php if(isset($_POST['category'])): ?>
            <option selected><?php echo $obj->setCategoryName($category); ?></option>
          <?php else: ?>
            <option selected value="0">カテゴリーを選択してください</option>
          <?php endif; ?>
          <option value="1">求人</option>
          <option value="2">人材育成・研修</option>
          <option value="3">集客・マーケティング</option>
          <option value="4">Webサイト制作</option>
          <option value="5">Webコンテンツ制作</option>
          <option value="6">イラスト</option>
          <option value="7">営業・コールセンター代行</option>
          <option value="8">ビジネス相談・経営コンサル</option>
          <option value="9">士業(税理士・行政書士など)</option>
          <option value="10">翻訳・語学</option>
          <option value="11">クリーニング</option>
          <option value="12">音楽・ナレーション</option>
          <option value="13">その他</option>
        </select>
        
        <h6 id="p-price"><label for="kome"><font color="red">*</font></label>サービスを利用する際の参考価格</h6>
        <?php if(isset($err['price'])): ?>
            <p class="err_one"><font color="red"><?php echo $err['price'] ?></font></p>
          <?php endif; ?>
        <div class="mb-3">
          <input type="text" class="form-control" id="p-price_form" name="price" placeholder="29800" value="<?php if(isset($price)) echo h($price) ?>">
        </div>
        
        <h6 id="p-image">画像を追加してください</h6>
        <?php if(isset($err['img'])): ?>
            <p class="err_one"><font color="red"><?php echo $err['img'] ?></font></p>
          <?php endif; ?>
        <input type="hidden" name="MAX_FILE_SIZE" value="1048576">
        <input type="file" class="form-control" id="p-image_upload" name="img" value="<?php if(isset($_FILES['img']['name'])) echo $_FILES['img']['name'] ?>">
        
        <div class="p-btn">
          <button type="submit" class="btn btn-primary" id="p-btn_btn" name="b">リストを投稿する</button>
        </div>
      </form>
    </div>
  </div>
  <?php include(ROOT_PATH .'Views/common/footer.php'); ?>
<script type="text/javascript" src="/js/script.js"></script>
</body>
</html>
```
tagのjavascript(script.js)
```
var input = document.querySelector('input[name="tags"]'),
    // init Tagify script on the above inputs
    tagify = new Tagify(input, {
      whitelist: 
      ["急募","アフターフォロー","低価格","要相談"],
      maxTags: 5,
      dropdown: {
        maxItems: 50,           // <- mixumum allowed rendered suggestions
        classname: "tags-look", // <- custom classname for this dropdown, so it could be targeted
        enabled: 0,             // <- show suggestions on focus
        closeOnSelect: false    // <- do not hide the suggestions dropdown once an item has been selected
      }
    });

// "remove all tags" button event listener
document.querySelector('.tags--removeAllBtn')
    .addEventListener('click', tagify.removeAllTags.bind(tagify))

// Chainable event listeners
tagify.on('add', onAddTag)
      .on('remove', onRemoveTag)
      .on('invalid', onInvalidTag);

// tag added callback
function onAddTag(e){
    console.log(e, e.detail);
    console.log( tagify.DOM.originalInput.value )
    tagify.off('add', onAddTag) // exmaple of removing a custom Tagify event
}

// tag remvoed callback
function onRemoveTag(e){
    console.log(e, e.detail);
}

// invalid tag added callback
function onInvalidTag(e){
    console.log(e, e.detail);
}

```
投稿をDBに登録するロジック(Post.php)
```
<?php
require_once(ROOT_PATH .'/Models/Db.php');
ini_set('display_errors', "On");

class Post
{
  /**
   * リストの投稿をDBに保存
   * @param string $postDate
   * @param string $save_path
   * @return bool $result
   */
  public function createList($postDate, $save_path)
  {
    $result = false;

    $sql = 'INSERT INTO posts (title, text, category_id, price, img)
            VALUES (:title, :text, :category_id, :price, :img)';

    $title = $postDate['title'];
    $text = $postDate['text'];
    $category = $postDate['category'];
    $price = $postDate['price'];

    try {
      $stmt = connect()->prepare($sql);
      $stmt->bindValue(':title', $title, PDO::PARAM_STR);
      $stmt->bindValue(':text', $text, PDO::PARAM_STR);
      $stmt->bindValue(':category_id', (int)$category, PDO::PARAM_INT);
      $stmt->bindValue(':price', (int)$price, PDO::PARAM_INT);
      $stmt->bindValue(':img', $save_path, PDO::PARAM_STR);
      $result = $stmt->execute();
      return $result;
    } catch(\Exception $e) {
      return $result;
    }
  }
```

### 試したこと
中間テーブルのやり方とは別に投稿のDBにtagを追加し、中間テーブル使わずに強引にやってみた。
```
    $sql = 'INSERT INTO posts (title, text, category_id, price, img,tag)
            VALUES (:title, :text, :category_id, :price, :img, :tag)';
...
$stmt->bindValue(':tag', $tag, PDO::PARAM_STR);
...
```

![イメージ説明](08f4c282f7949442229318de5368df9d.png)
このように複数のタグはDBに保存できたが、何やらvalueがついていた。

こういった強引なやり方ではなく中間テーブルを持ちたやり方はどのようにすればいいのでしょうか？
サンプルコードとかあったら嬉しいです。

### 前提・実現したいこと
PHPで複数のタグを中間テーブルを利用してDBに登録する方法が知りたいです。

現在自作のphpアプリを製作中です。

以下のように投稿フォームを作成しました。
![イメージ説明](367164002d8f54caa043205bfb8a940d.png)
![![イメージ説明](5e36293f05846cdd22ae3b296801b249.png)

タグ以外のDB登録は実装できています。

複数選択できるタグを中間テーブルを用いてDBに登録する方法が知りたいです。

テーブルは以下のように設計しています。
投稿テーブル
![イメージ説明](9595a8f10714b22163196673472d0bfa.png)

タグテーブル
![イメージ説明](5f225b7cb6e1e54e9194a90df7c61d38.png)

投稿とタグの中間テーブル
![イメージ説明](abc5e4bc97706e83742a5a87ca1ce114.png)

今のイメージとしては、
投稿ボタンが押される
↓
入力したタグはセレクトで取得する
↓
3つのテーブルは外部結合する
↓
投稿テーブルと中間テーブルにデータを追加

こんな流れなのかな？と思っています。

### 該当のソースコード
投稿フォーム(post.php)
```php
<a href="index.php">リスト一覧へ</a>
<?php

// 直リンクの禁止
if (empty($_SERVER["HTTP_REFERER"])) {
  header('Location: /');
  exit;
}

session_start();
require_once(ROOT_PATH .'/Models/Post.php');
require_once(ROOT_PATH .'function.php');
ini_set('display_errors', "On");
$obj = new Post();

$err = [];

  if($_SERVER['REQUEST_METHOD'] === 'POST'){

      $title = filter_input(INPUT_POST, 'title');
      $text = filter_input(INPUT_POST, 'text');
      $tags = filter_input(INPUT_POST, 'tags');
      $category = filter_input(INPUT_POST, 'category');
      $price = filter_input(INPUT_POST, 'price');
     以下バリデーションは省略
    
      // エラーがなければ、DBにデータを保存し、リスト一覧にページ遷移
      if(count($err) === 0) {
        $result = $obj->createList($_POST, $save_path);
        $_SESSION['list_msg'] = "リストの投稿に成功しました!";
        header('Location: index.php');
        exit;
      }
  }
?>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.polyfills.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.css" rel="stylesheet" type="text/css" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
  <link rel="stylesheet" href="/css/posts.css">
  <title>リスト投稿画面</title>
</head>
<body>
<?php include(ROOT_PATH .'Views/common/header.php'); ?>
  <div class="p-wrapper">
    <div class="p-container">
      <h2 id="p-title">リストを投稿する</h2>
      <form action="" method="POST" enctype="multipart/form-data" id="p-form">
        
        <div class="mb-3">
          <label for="kome"><font color="red">*</font></label>
          <label for="title" class="form-label">タイトル</label>
          <?php if(isset($err['title'])): ?>
            <p class="err"><font color="red"><?php echo $err['title'] ?></font></p>
          <?php endif; ?>
          <input type="text" class="form-control" id="title" name="title" value="<?php if(isset($title)) echo h($title) ?>" placeholder="タイトルを入力してください(30文字以内)">
        </div>
        
        <div class="tag-lebel">
          <label for="kome"><font color="red">*</font></label>
          <label for="tag" class="form-label">タグ(最低1つは選択しましょう)</label>
          <?php if(isset($err['tags'])): ?>
            <p class="err"><font color="red"><?php echo $err['tags'] ?></font></p>
          <?php endif; ?>
        </div>
        <div class="mb-3 tag-form">
          <input name="tags" class='tag_field' placeholder="＋タグの候補を選択してください。(最大5つまで選択可能)" value='<?php if(isset($tags)) echo h($tags) ?>'>
        </div>
        
        <div class="mb-3">
          <label for="kome"><font color="red">*</font></label>
          <label for="contents" class="form-label">詳細</label>
          <?php if(isset($err['text'])): ?>
            <p class="err"><font color="red"><?php echo $err['text'] ?></font></p>
          <?php endif; ?>
          <textarea class="form-control" id="contents" name="text" rows="20" placeholder="サービスの内容、利用者のメリット、アピールしたい実績などを3000文字以内で具体的に書いてください。具体的でわかりやすいほど、リストを見た企業がリクエストをしてくれる確率がアップします。"><?php if(isset($text)) echo h($text) ?></textarea>
        </div>
        
        <h6 id="p-category"><label for="kome"><font color="red">*</font></label>カテゴリーを選択してください</h6>
        <?php if(isset($err['category'])): ?>
            <p class="err_one"><font color="red"><?php echo $err['category'] ?></font></p>
          <?php endif; ?>
        <select class="form-select" id="category-select" name="category">
          <?php if(isset($_POST['category'])): ?>
            <option selected><?php echo $obj->setCategoryName($category); ?></option>
          <?php else: ?>
            <option selected value="0">カテゴリーを選択してください</option>
          <?php endif; ?>
          <option value="1">求人</option>
          <option value="2">人材育成・研修</option>
          <option value="3">集客・マーケティング</option>
          <option value="4">Webサイト制作</option>
          <option value="5">Webコンテンツ制作</option>
          <option value="6">イラスト</option>
          <option value="7">営業・コールセンター代行</option>
          <option value="8">ビジネス相談・経営コンサル</option>
          <option value="9">士業(税理士・行政書士など)</option>
          <option value="10">翻訳・語学</option>
          <option value="11">クリーニング</option>
          <option value="12">音楽・ナレーション</option>
          <option value="13">その他</option>
        </select>
        
        <h6 id="p-price"><label for="kome"><font color="red">*</font></label>サービスを利用する際の参考価格</h6>
        <?php if(isset($err['price'])): ?>
            <p class="err_one"><font color="red"><?php echo $err['price'] ?></font></p>
          <?php endif; ?>
        <div class="mb-3">
          <input type="text" class="form-control" id="p-price_form" name="price" placeholder="29800" value="<?php if(isset($price)) echo h($price) ?>">
        </div>
        
        <h6 id="p-image">画像を追加してください</h6>
        <?php if(isset($err['img'])): ?>
            <p class="err_one"><font color="red"><?php echo $err['img'] ?></font></p>
          <?php endif; ?>
        <input type="hidden" name="MAX_FILE_SIZE" value="1048576">
        <input type="file" class="form-control" id="p-image_upload" name="img" value="<?php if(isset($_FILES['img']['name'])) echo $_FILES['img']['name'] ?>">
        
        <div class="p-btn">
          <button type="submit" class="btn btn-primary" id="p-btn_btn" name="b">リストを投稿する</button>
        </div>
      </form>
    </div>
  </div>
  <?php include(ROOT_PATH .'Views/common/footer.php'); ?>
<script type="text/javascript" src="/js/script.js"></script>
</body>
</html>
```
tagのjavascript(script.js)
```
var input = document.querySelector('input[name="tags"]'),
    // init Tagify script on the above inputs
    tagify = new Tagify(input, {
      whitelist: 
      ["急募","アフターフォロー","低価格","要相談"],
      maxTags: 5,
      dropdown: {
        maxItems: 50,           // <- mixumum allowed rendered suggestions
        classname: "tags-look", // <- custom classname for this dropdown, so it could be targeted
        enabled: 0,             // <- show suggestions on focus
        closeOnSelect: false    // <- do not hide the suggestions dropdown once an item has been selected
      }
    });

// "remove all tags" button event listener
document.querySelector('.tags--removeAllBtn')
    .addEventListener('click', tagify.removeAllTags.bind(tagify))

// Chainable event listeners
tagify.on('add', onAddTag)
      .on('remove', onRemoveTag)
      .on('invalid', onInvalidTag);

// tag added callback
function onAddTag(e){
    console.log(e, e.detail);
    console.log( tagify.DOM.originalInput.value )
    tagify.off('add', onAddTag) // exmaple of removing a custom Tagify event
}

// tag remvoed callback
function onRemoveTag(e){
    console.log(e, e.detail);
}

// invalid tag added callback
function onInvalidTag(e){
    console.log(e, e.detail);
}

```
投稿をDBに登録するロジック(Post.php)
```
<?php
require_once(ROOT_PATH .'/Models/Db.php');
ini_set('display_errors', "On");

class Post
{
  /**
   * リストの投稿をDBに保存
   * @param string $postDate
   * @param string $save_path
   * @return bool $result
   */
  public function createList($postDate, $save_path)
  {
    $result = false;

    $sql = 'INSERT INTO posts (title, text, category_id, price, img)
            VALUES (:title, :text, :category_id, :price, :img)';

    $title = $postDate['title'];
    $text = $postDate['text'];
    $category = $postDate['category'];
    $price = $postDate['price'];

    try {
      $stmt = connect()->prepare($sql);
      $stmt->bindValue(':title', $title, PDO::PARAM_STR);
      $stmt->bindValue(':text', $text, PDO::PARAM_STR);
      $stmt->bindValue(':category_id', (int)$category, PDO::PARAM_INT);
      $stmt->bindValue(':price', (int)$price, PDO::PARAM_INT);
      $stmt->bindValue(':img', $save_path, PDO::PARAM_STR);
      $result = $stmt->execute();
      return $result;
    } catch(\Exception $e) {
      return $result;
    }
  }
```

### 試したこと
中間テーブルのやり方とは別に投稿のDBにtagを追加し、中間テーブル使わずに強引にやってみた。
```
    $sql = 'INSERT INTO posts (title, text, category_id, price, img,tag)
            VALUES (:title, :text, :category_id, :price, :img, :tag)';
...
$stmt->bindValue(':tag', $tag, PDO::PARAM_STR);
...
```

![イメージ説明](08f4c282f7949442229318de5368df9d.png)
このように複数のタグはDBに保存できたが、何やらvalueがついていた。

こういった強引なやり方ではなく中間テーブルを持ちたやり方はどのようにすればいいのでしょうか？

@@ -541,3 +541,5 @@
 こういった強引なやり方ではなく中間テーブルを持ちたやり方はどのようにすればいいのでしょうか？
+サンプルコードとかあったら嬉しいです。

質問編集履歴