【PHP】タグ機能③

11373 ワード
PHP タグ JavaScript PHP テキストリンク

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

DBにタグ情報保存

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を追加します。

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要素にタグ情報を渡します。

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に反映されるようになります。

ブラウザ上でもタグが表示されるようにします。

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要素を追加して改行するようにします。

これで下記のように、タグ機能を実装することができます。