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="http://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.

Dodaj komentarz