【PHP】タグ機能③

下記投稿の続きで、タグ機能に登録機能（DB接続）を実装します。

https://qiita.com/ryouya3948/items/da1a53e32edbd16637a5

https://qiita.com/ryouya3948/items/f8a574bb900ba4fefecb

![tag12.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597913/ea980f92-96fb-9c34-5e62-c219dc200393.gif)

# DBにタグ情報保存

```html:form.php
<form method="post" action="../tag_done.php" enctype="multipart/form-data"> //更新
    <input type="text" id="sample" />
    <div id="skill">
    </div>
    <input type="hidden" name="skills" id="skills">
    <input type="submit" class="btn btn-outline-dark edit_done" value="登録">//追加
    <input type="hidden" name="skill_count" id="skill_count">//追加
</form>
```
タグを追加するための`登録ボタン`とタグ情報を保存するための`hidden`を追加します。

```js:form.php
$(document).on('click', '.edit_done', function() {
    var skill = document.getElementById("skill"),
        skill_div = document.getElementById("skills"),
        spans = skill.getElementsByTagName("span"),
        skills = new Array();

    for (i = 0; i < spans.length; i++) {
        skills[i] = spans[i].textContent;
    }
    skills = skills.join(' ');
    skill_div.value = skills;
});
```
登録ボタンがクリックされたときに、ID名が`skills`のdiv要素にタグ情報を渡します。

```php:tag_done.php
<?php
if (isset($_POST)) {
    $user_skill = $_POST['skills'];

    try {
        $dbh = db_connect();
        $sql = "UPDATE user
            SET skill = :skill
            WHERE id = :user_id";
        $stmt = $dbh->prepare($sql);
        $stmt->execute(array(
            ':user_id' => $_SESSION['user_id'],
            ':skill' => $user_skill
        ));
        set_flash('sucsess', 'プロフィールを更新しました');
        reload();
    } catch (\Exception $e) {
        error_log($e, 3, "../../php/error.log");
        _debug('プロフィール更新失敗');
    }
}
```
`tag_done.php`でタグ情報のDB登録を行います。
このように`登録ボタン`を押すと、DBに反映されるようになります。
![tag11.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597913/c0a8b319-e948-2a67-2073-09cd5fd04b25.gif)
ブラウザ上でもタグが表示されるようにします。

```html:form.php
<form method="post" action="../tag_done.php" enctype="multipart/form-data">
    <input type="text" id="sample" />
    <div id="skill">
        <?php
        $user = new User($_SESSION['user_id']);
        $current_user = $user->get_user();
        $skills = explode(" ", $current_user['skill']);
        $skills_len = "";
        $skills_delspace = str_replace(" ", "", $current_user['skill']);

        foreach ($skills as $skill) :
            if ($current_user['skill'] != '' && $skill != '') : ?>
        <span id="child-span" class="skill_tag"><?= $skill ?><label><input type="button"><i
                    class="far  fa-times-circle tag"></i></label></span>
        <?php
                if (!isset($skill_tag)) {
                    $skill_tag = array();
                }
                array_push($skill_tag, $skill);
                $skills_len .= $skill;

                if (3 <= count($skill_tag) || 9 <= strlen($skills_len)) {
                    print '<div></div>';
                    $skill_tag = array();
                    $skills_len = "";
                }
            endif;

        endforeach;
        ?>
    </div>
    <input type="hidden" name="skills" id="skills">
    <input type="submit" class="btn btn-outline-dark edit_done" style="margin-left:130px" value="登録">
    <input type="hidden" name="skill_count" id="skill_count">
</form>
```
ユーザ情報からタグを取得して、ブラウザ上に表示してます。
タグ追加時の処理同様、`タグが３つ以上もしくは文字数が９文字以上`の場合は`div要素`を追加して改行するようにします。

これで下記のように、タグ機能を実装することができます。
![tag12.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597913/ea980f92-96fb-9c34-5e62-c219dc200393.gif)