ハッシュタグ、タグ付け機能 JS PHP

はじめに

laravelを触る。タグ付け機能作ろうと思う。
ググってやり方調べる。
テーブル設計云々からの話多い。多対多のリレーション(複数のレコードとテーブルの関係性)とか。
controllerでpostしてきたタグのデータを、DBあれこれしてやるという方法で書いてある。

ゴール

何かタグにしたいものを入力して、「#hoge 」とか表示される。

イメージ

①登録フォームに文字列などを入力
②カーソルアウト、Enterなどで発火
③入力あればappend。複数入力あるので配列に。
⇒これで表示ok。
※ web storage(Local Storage、Session Storage)などを使ったり、表示させたタグを編集・削除できるようにしたり、リンク付けしたりするには一工夫要る。
④postしたものをバックエンドで処理。これで登録完了。

実際のやつ

書いてあるのは、DBの設計、リクエストきたものをpreg_match_all(正規表現)で取得、それをDBにsave()してやるとかいう流れ。

preg_match_all('/#([a-zA-z0-90-9ぁ-んァ-ヶ亜-熙]+)/u', $request->tags, $match);
preg_match_all('/#([a-zA-Z0-90-9ぁ-んァ-ヶー一-龠]+)/u', $request->tag_name, $match);
//イメージ①~③
var hoge_arr = [];
//keydown、keypress等で、フォームの入力を感知
let tag = $(this).val();
//val()で空判定をした後
hoge.append('<li class="tag"><span>'+tag+'</span></li>');
hoge_arr.push(tag);
//リロード時保持
for(let i=0;hoge_arr.length;i++){
  hoge.append('<li class="tag"><span>'+hoge_arr[i]+'</span></li>')
}
//あとはバックエンドで処理してやる

参照

preg_match_all
Element.append()
Array.prototype.push()

created by Rinker
¥3,960 (2021/10/16 15:07:04時点 楽天市場調べ-詳細)
created by Rinker
¥2,838 (2021/10/16 15:07:04時点 楽天市場調べ-詳細)

javascript, php

Posted by himajinn