Hướng Dẫn Tạo Hệ Thống Tag Cho Trang Web Bằng PHP + Jquery

Để tạo hệ thống tag cho bài viết trong trang web của bạn bạn cần chuẩn bị 3 table trong CSDL:

Table Topic chứa bài viết, tên tag

Topic [id, tag]

Table Tag chứa tag toàn trang web

Tag [id, name]

Table Link dùng để liên kết 2 table trên tránh trường hợp data lớn query rất tốn thời gian. Bài viết thứ i có quan hệ với những tag nào.

Link [topic_id, tag_id]

Giải thuật cơ bản:

Khi người dùng tạo bài viết. Lấy id bài viết vừa tạo lưu vào biến $idTopic và cho lưu tag vào table Topic và lưu các tag đó vào 1 mảng.

Dùng foreach duyệt các phần tử trong mảng và đối chiếu với table Tag. Nếu tồn tại thì lấy ID của nó ra và lưu vào biến $idTag nếu không tồn tại thì insert vào và lấy ID vừa thêm vào lưu vào biến $idTag.

Có được $idTopic và $idTag, bạn insert nó vào table Link

Code cụ thể:

PHP:

# C.N.G @ V.N.O

# Lấy giá trị tag

$tags = $_POST['tag'];

# Insert vào bài viết

mysql_query("INSERT INTO `topic` (tag) VAULES ('".$tags."')");

# Lấy id của bài viết vừa mới thêm vào

$idTopic = mysql_insert_id();

# Cắt chuỗi tags đưa vào mảng

$arrTag = explode(',', $tags);

# Duyệt từng phần tử của Tag

foreach ($arrTag as $tag)
{
    $tag = trim($tag);

   # Lấy id của tag có tên là $tag, nếu ko có thì thêm mới

   $result = mysql_query("SELECT id FROM `tag` WHERE name = '".$tag."' LIMIT 0,1");

   if (mysql_num_rows($result) > 0)
   {
        $idTag = mysql_result($result, 0, 0);
   }
   else
   {
        mysql_query("INSERT INTO `tag` (name) VALUES ('".$tag."')");
        $idTag = mysql_insert_id();
   }

   # Insert dữ liệu vào table Link

   mysql_query("INSERT INTO `link` VALUES ('".$idTopic."', '".$idTag."')");

}

Demo website sử dụng code tag này - bấm vào 1 bài viết bất kỳ và xem hệ thống tag:

Hài Tết Mới Nhất

 

Để truy vấn bài viết theo tag các bạn chạy code sau với biến $tag được lấy khi chúng ta bấm vào tag.

Lưu ý:

Mình viết nhưng chưa test thử code này, các bạn chạy thử ok hoặc gặp vấn đề gì thì báo ở dưới comment cho mình biết để mình fix nhé.

PHP:

# C.N.G @ V.N.O

$tag = $_GET['tag'];

$qr_tag = mysql_query("
    SELECT DISTINCT * FROM `topic` JOIN `link` JOIN `tag`
    ON topic.id = link.topic_id
    AND link.tag_id = tag.id
    WHERE tag.name = '".$tag."'
");

while ($row = mysql_fetch_array($qr_tag, MYSQL_NUM)) {

   # Show kết quả là các bài viết có chứa tag

   echo "ID bài viết: ".$row['id'];

}

 

Để thêm mới hoặc xóa, sửa tag các bạn làm như sau:

Với $topic_id là id bài viết sửa tag, $tags là danh sách tag mới cần update, cách nhau bởi dấu phẩy.

PHP:

# C.N.G @ V.N.O

$topic_id = intval($_POST['tp_id']);

$tags = trim($_POST['tp_tag']);

if(is_numeric($topic_id)) {
  
        # Xóa tag cũ để cập nhật

        mysql_query("DELETE FROM `link` WHERE topic_id = '".$topic_id."'");

        # Update tag ở bài viết

        mysql_query("UPDATE `topic` SET tag = '".$tags."' WHERE id = '".$topic_id."'");
  
        # Cắt chuổi tags đưa vào mảng

        $arrTag = explode(',', $tags);

        # Duyệt từng phần tử của Tag

        foreach ($arrTag as $tag)
        {
            $tag = trim($tag);

               # Lấy id của tag có tên là $tag, nếu ko có thì thêm mới

               $result = mysql_query("SELECT id FROM `tag` WHERE name = '".$tag."' LIMIT 0,1");
               if (mysql_num_rows($result) > 0)
               {
                $idTag = mysql_result($result, 0, 0);
               }
               else
               {
                if(strlen($tag) > 3) {
                       mysql_query("INSERT INTO `tag` (name) VALUES ('".$tag."')");
                       $idTag = mysql_insert_id();
                }
               }

               mysql_query("INSERT INTO `link` (topic_id, tag_id) VALUES ('".$topic_id."', '".$idTag."')");
      
        }
  
}

 

Để sử dụng các hiệu ứng ajax khi thêm, sửa xóa tag các bạn có thể tự viết các thư viện javascript theo ý mình hoặc sử dụng thư viện jQuery có sẵn: Taggle.js

Thư viện này cung cấp cho bạn các chức năng sau:

Nhấn Enter sẽ tự động hoàn thành tag 1 để nhập thêm các tag tiếp theo.

Tự động kiểm tra các tags trùng nhau.

Đưa ra từ gợi ý khi gõ tag - chỉ sử dụng được với từ điển tiếng anh.

Chỉ cho phép nhập các tag được chỉ định sẵn.

Cho phép nhập mọi từ khóa trừ một số tag không cho phép.

Các bạn vào đây xem demo: Demo Taggle.js

Để sử dụng các bạn thêm thư viện jQuery và Taggle.js vào web của các bạn.

Download jQuery phiên bản mới nhất: jQuery

Mã:

<script type="text/javascript" src="clients/jquery.min.js"></script>
<script type="text/javascript" src="clients/Taggle.js"></script>

Tạo input để nhập, xóa tag với tag1, tag2, tag3, tag4 query từ CSDL của bạn nếu bài viết đã có tag hoặc để trống nếu thêm mới.

Mã:

<div id="example"></div>
<script type="text/javascript">
new Taggle('example', {
tags: ['tag1', 'tag2', 'tag3', 'tag4']
});
</script>