Prosty system tagów tagów, który każdemu się przyda. System jest na tyle uniwersalny można przerobić pod swoje inne potrzeby (nie, nie będzie wam robił kanapek do pracy). Oparty na autocomplete, co znacznie ułatwia znalezienie już wcześniej użytych tagów.
Mój przykład oparłem na Bootstrapie, myślę, że nie będziesz mieć problemów by dostosować go pod siebie.
Będziemy potrzebować bibliotek jQuery, jQueryUI, Boostrap (opcjonalnie).
Baza danych
Tworzymy bazę oraz tabele tags, w której będziemy nasze trzymać tagi.
CREATE TABLE IF NOT EXISTS `tags` ( `id` int(10) NOT NULL AUTO_INCREMENT, `tag` text CHARACTER SET utf8 COLLATE utf8_bin NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ; INSERT INTO `tags` (`id`, `tag`) VALUES (1, 'Test'), (2, 'New');
db.php
<?php
$mysqli = new mysqli("localhost", "username", "password", "tagsys");
global $mysqli;
if(mysqli_connect_error()) {
die("Problem with db connection");
}
?>
index.php
Autocomplete
Tworzymy prosty formularz z opcją autocomplete, który znacznie nam ułatwi pracę w poszukiwaniu tagów.
<label>Tag:</label>
<input class="form-control auto" type="text" id="tag" />
<div class="btn btn-default" id="addTag">Add Tag</div>
<script>
$(function() {
$( "#tag" ).autocomplete({
source: 'autocomplete.php'
});
});
</script>
autocomplete.php
Skrypt będzie szukał podobnych tagów wcześniej użytych w bazie i sugerował odpowiedni tag. Można go usprawnić poprzez filtrowanie tylko unikalnych wyników.
<?
require('db.php');
$searchTerm = mysqli_real_escape_string($mysqli,$_GET['term']);
$query = $mysqli->query("SELECT * FROM tags WHERE tag like '%".$searchTerm."%'");
while ($row = $query->fetch_array(MYSQLI_ASSOC)) {
$data[] = $row['tag'];
}
echo json_encode($data);
?>
index.php
Teraz skupimy się na wyświetlaniu dodanych wcześniej tagów z bazy danych oraz nowych tagów po kliknięciu przycisku „Add tag”.
<div class="tagForm">
<ul id="tagList">
<? require('db.php');
$tags = $mysqli->query("SELECT * FROM tags");
if(mysqli_num_rows($tags) > 0) {
while($tag = $tags->fetch_object()) {
echo "<li class=\"tag\" id=\"id_{$tag->id}\"> {$tag->tag} <button class=\"deleteTagExsit btn-warning\" id=\"id_{$tag->id}\">X</button></li>";
}
}?>
</ul>
</div>
Trochę CSS
.tag {
list-style: none;
display: inline-block;
text-align: center;
background-color: #C10841;
margin-right: 7px;
margin-top: 5px;
line-height: 30px;
padding: 7px;
border-radius: 3px;
color: white;
}
Wyświetlane tagi zawierają również przycisk X, który pozwala na usuwanie tagu z bazy danych. Poniżej skrypt JS, pozwalający nam dodawać nowe tagi do listy.
var id = 0;
$("#addTag").click(function(){
if($("#tag").val() ) {
id++;
var li = document.createElement("li");
li.className = "tag";
li.setAttribute("id", id);
var i = document.createElement("INPUT");
i.setAttribute("name","multiTag[]");
i.setAttribute("type","hidden");
i.setAttribute("id", id);
var tag = document.getElementById('tag').value;
li.innerHTML = " " + tag + ' <button class=\"deleteTag btn-warning\" id=\"'+id+'\">X</button>'
i.setAttribute("value", tag);
$("#tagList").append(li)
$("#tagList").append(i)
$('#tag').val('');
}});
Tworzony jest ukryty input, który zawiera wartość dodaną z formularza. Można by było dodawać tag od razu do bazy danych za każdym razem, gdy tag został dodany do naszej listy za pomocą AJAX, ale to mogłoby trochę zwolnić naszą bazę danych.
Kasowanie tagów z bazy oraz tagów nowo dodanych
$("#tagList").on('click', 'button.deleteTag', function() {
var idDiv = this.id;
$("#"+idDiv).remove()
$(":input[id='"+idDiv+"']").remove();
});
$("#tagList").on('click', 'button.deleteTagExsit', function() {
var del_id = this.id;
var toDel = del_id.replace('id_', '');
$("#id_"+toDel).remove();
$.ajax({
type:'POST',
url:'delete_tag.php',
data:'delete_id='+toDel
});
});
Pierwszy skrypt kasuje istniejący element, drugi istniejący element oraz przekazuje dane do delete_tag.php, który kasuje rekord z bazy.
delete_tag.php
<?
require('db.php');
$id = mysqli_real_escape_string($mysqli,$_POST['delete_id']);
$query = $mysqli->query("delete from tags where ID = $id");
?>
index.php
Teraz czas na zapis nowych rekordów, po zatwierdzeniu ich przyciskiem „save”.
Nasz button
<input class="btn btn-info btn-lg pull-right" type="submit" value="Save" name="save">
<? if (isset($_POST['save'])) {
if(!empty($_POST['multiTag'])) {
foreach ($_POST['multiTag'] as $key=>$tag) {
$tag = mysqli_real_escape_string($mysqli,$tag);
echo "Tag(s): ".$tag.", ";
$upTags = "INSERT INTO tags (tag) VALUES ('$tag')";
if ($mysqli->query($upTags) === TRUE) echo "added to DB";
header("Refresh:1");
}
}
}?>
Kompletny skrypt
index.php
<!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">
<title>Tag sys - mzielinski.pl</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/autocomplete.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="col-md-6 col-md-offset-3">
<h1 class="text-center">TAG SYS - mzielinski.pl</h1>
<p class="lead text-center">Simply tag system on MySQL.<br>Save or delete records.</p>
<form method="post" action="">
<div class="row">
<label>Tag:</label>
<input class="form-control auto" type="text" id="tag" /> <br>
<div class="btn btn-default" id="addTag">Add Tag</div>
<div class="clearfix"></div><br>
<div class="tagForm">
<ul id="tagList">
<? require('db.php');
$tags = $mysqli->query("SELECT * FROM tags");
if(mysqli_num_rows($tags) > 0) {
while($tag = $tags->fetch_object()) {
echo "<li class=\"tag\" id=\"id_{$tag->id}\"> {$tag->tag} <button class=\"deleteTagExsit btn-warning\" id=\"id_{$tag->id}\">X</button></li>";
}
}?>
</ul>
</div>
<div class="buttons-box clearfix">
<input class="btn btn-info btn-lg pull-right" type="submit" value="Save" name="save">
</div>
</div>
</form>
<? if (isset($_POST['save'])) {
if(!empty($_POST['multiTag'])) {
foreach ($_POST['multiTag'] as $key=>$tag) {
$tag = mysqli_real_escape_string($mysqli,$tag);
echo "Tag(s): ".$tag.", ";
$upTags = "INSERT INTO tags (tag) VALUES ('$tag')";
if ($mysqli->query($upTags) === TRUE) echo "added to DB";
header("Refresh:1");
}
}
}?>
<div class="footer text-center">Do you like it? Visit my page <a href="https://mzielinski.pl">mzielinski.pl</a> My work is usefull for you? Support me by BTC <div id="coinwidget-bitcoin-14Qaw1shp8ccg2n5jxzHD1DSfyTkYoKNqe"></div></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function() {
$( "#tag" ).autocomplete({
source: 'autocomplete.php'
});
});
var id = 0;
$("#addTag").click(function(){
if($("#tag").val() ) {
id++;
var li = document.createElement("li");
li.className = "tag";
li.setAttribute("id", id);
var i = document.createElement("INPUT");
i.setAttribute("name","multiTag[]");
i.setAttribute("type","hidden");
i.setAttribute("id", id);
var tag = document.getElementById('tag').value;
li.innerHTML = " " + tag + ' <button class=\"deleteTag btn-warning\" id=\"'+id+'\">X</button>'
i.setAttribute("value", tag);
$("#tagList").append(li)
$("#tagList").append(i)
$('#tag').val('');
}});
$("#tagList").on('click', 'button.deleteTag', function() {
var idDiv = this.id;
$("#"+idDiv).remove()
$(":input[id='"+idDiv+"']").remove();
});
$("#tagList").on('click', 'button.deleteTagExsit', function() {
var del_id = this.id;
var toDel = del_id.replace('id_', '');
$("#id_"+toDel).remove();
$.ajax({
type:'POST',
url:'delete_tag.php',
data:'delete_id='+toDel
});
});
</script>
<script src="//blockr.io/js_external/coinwidget/coin.js"></script>
<script>
CoinWidgetCom.go({
wallet_address: '14Qaw1shp8ccg2n5jxzHD1DSfyTkYoKNqe',
currency: 'bitcoin',
counter: 'hide',
lbl_button: 'Donate',
lbl_count: 'donations',
lbl_amount: 'BTC',
lbl_address: 'Use address below to donate. Thanks!',
qrcode: true,
alignment: 'bl',
decimals: 8,
size: "big",
color: "dark",
countdownFrom: "1000",
element: "#coinwidget-bitcoin-14Qaw1shp8ccg2n5jxzHD1DSfyTkYoKNqe",
onShow: function(){},
onHide: function(){}
});
</script>
</body>
</html>
style.css
.tag {
list-style: none;
display: inline-block;
text-align: center;
background-color: #C10841;
margin-right: 7px;
margin-top: 5px;
line-height: 30px;
padding: 7px;
border-radius: 3px;
color: white;
}
.deleteTag, .deleteTagExsit{
border-radius: 3px;
}
.footer {
font-weight: bold;
padding-top:10px;
font-size:1.1em;
}
autocomplete.php
<?
require('db.php');
$searchTerm = mysqli_real_escape_string($mysqli,$_GET['term']);
$query = $mysqli->query("SELECT * FROM tags WHERE tag like '%".$searchTerm."%'");
while ($row = $query->fetch_array(MYSQLI_ASSOC)) {
$data[] = $row['tag'];
}
echo json_encode($data);
?>
delete_tag.php
<?
require('db.php');
$id = mysqli_real_escape_string($mysqli,$_POST['delete_id']);
$query = $mysqli->query("delete from tags where ID = $id");
?>
Baza danych
CREATE TABLE IF NOT EXISTS `tags` ( `id` int(10) NOT NULL AUTO_INCREMENT, `tag` text CHARACTER SET utf8 COLLATE utf8_bin NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ; INSERT INTO `tags` (`id`, `tag`) VALUES (1, 'Test'), (2, 'New');
db.php
<?php
$mysqli = new mysqli("localhost", "username", "password", "tagsys");
global $mysqli;
if(mysqli_connect_error()) {
die("Problem with db connection");
}
?>
Download
GitHub
Dlaczego przykład jest po angielsku?!!!!!111111oneoneone
A dlaczego nie? 😉
Zastosowałeś to u siebie na stronie? Pochwal się w komentarzu adresem swojej strony www.
Moja praca zaoszczędziła Ci dużo czasu? Wesprzyj mnie poprzez dotację BTC 14Qaw1shp8ccg2n5jxzHD1DSfyTkYoKNqe Znajdziesz również przycisk „wesprzyj” w panelu bocznym na blogu.
Cześć,
W jaki sposób dodać sortowanie tagów zaraz po dodaniu w taki sposób aby działało usuwanie?
Próbowałem w ten sposób ale po po sortowaniu jest problem z usuwaniem tagów
function sortUnorderedList(ul, sortDescending) {
if(typeof ul == „string”)
ul = document.getElementById(ul);
var lis = ul.getElementsByTagName(„LI”);
var vals = [];
for(var i = 0, l = lis.length; i < l; i++)
vals.push(lis[i].innerHTML);
vals.sort();
if(sortDescending)
vals.reverse();
for(var i = 0, l = lis.length; i < l; i++)
lis[i].innerHTML = vals[i];
}
window.onload = function() {
var desc = false;
document.getElementById("test").onclick = function() {
sortUnorderedList("tagList", desc);
desc = !desc;
return false;
}
}
Cześć, trochę stary temat, ale fajnie, że pytasz. Najszybciej trzeba by było napisać nową metode w PHP, która by posortowała tagi i zaktualizowała ID tagu w bazie. Można jeszcze użyć dodatkowego tagu i srotować według niego – niezależnie od ID.
Ogólnie można to zdecydowanie szybciej zrobić taki system np. używając jQuery, Vue czy innych technologii.