Динамические метки BackEnd

И снова, здравствуйте! Данный урок является продолжением первой части динамических меток FrontEnd. В нем мы доведем скрипт, представленный в предыдущей части урока, до полной работоспособности. Начнем мы с добавления тегов в базу данных  и сохранения текущего состояния списка с тегами. Для начала подключение к базе данных, которое осуществляется в файле db.php:

$engine = 'mysql';
$host = 'localhost';
$database = 'tags';
$user = 'root';
$pass = '';

 
$dns = $engine.':dbname='.$database.";host=".$host;
$db = new PDO( $dns, $user, $pass );

Сама база состоит из двух таблиц: теги, где записаны все вводимые теги, и таблица, в которой сохраняются все введенные в последний раз теги. Имена этих таблиц tags и field , соответственно.

Ниже представлен файл, который сохраняет введенные значения.

include_once './db.php';

// отчистка таблицы от предыдущих записей

$db->query('TRUNCATE TABLE field');

// перебираем все введенные теги

foreach($_POST as $item)

{

         $sth = $db->prepare("SELECT id FROM tags

WHERE name = :name");

         $sth->execute(array('name'    =>     $item));

         $result = $sth->fetchColumn();

         // если тег не использовался ранее сохраняем его в базу

if(!$result)

         {

                   $sth = $db->prepare("INSERT INTO tags

(name) VALUES (:name)");

                   $sth->execute(array('name'    =>     $item));

                   $result = $db->lastInsertId();

         }

         // сохраняем текущие значения

         $db->query("INSERT INTO field (tag_id)

VALUES ('".$result."')");
}

Также в данном примере используется плагин jQueryUI Autocomplеte (авто заполнение). Для выдачи результатов для авто заполнения этим плагином создаем следующий файл

include_once './db.php';

$term = '%'.$_GET['term'].'%';

// запрос на поиск записи с вхождением строки

// переданной плагином ($_GET['term'])

$query = "SELECT name FROM tags

WHERE name LIKE :term";

$sth = $db->prepare($query);

$sth->execute(array('term' =>          $term));

$result = $sth->fetchAll();

// запись в строку спец. Формата для возврата плагину

$ansver = "[";

$i = 1;

foreach ($result as $row)

{
         $ansver .= '"'.$row['name'].'"';

         if($i != count($result))

         {
                   $ansver .= ", ";
         }

         $i++;
}

$ansver .= "]";

echo $ansver;

Теперь можем перейти к javascript коду, который был добавлен для связи с сервером и обменном данными с базой данных:

// при нажатии кнопки «сохранить» считываем все текущие теги

// и отправляем серверу для сохранения

$('button').on('click', function(event){      

         var tags = '';

         $('.tag>span').each(function(index){

                  tags += index + '=' + $(this).text();

                  if(index != $('.tag>span').length-1) tags += '&'; 

         });

         $.ajax({

                  type: 'post',

                  data: tags,

                  url: 'save.php'

         });

});

 

// функция, которая будет вызвана при выборе тега

// во время авто заполнения

function select (event, ui)

{

         event.preventDefault();

         $('.tag-input').val('');

         $('.tag-new').before('<li class="tag"><span>'

+ ui.item.value + '</span><a><span></span></a></li>');   

}

// подключение плагина autocomplete

$('.tag-input').autocomplete({

source: "search.php",

minLength: 2,

select: select

});

Напоследок рассмотрим изменения, внесенные в код поля с тегами предназначенные для вывода предварительно введенных значений:

<?php

include_once './db.php';

 

// получение из базы имен тегов

$sth = $db->prepare("SELECT t.name FROM tags t INNER JOIN field f ON t.id = f.tag_id ORDER BY f.id");

$sth->execute();

$result = $sth->fetchAll();

?>

 

<ul class="tags">

<?php foreach($result as $row): ?>

         <li class="tag"><span>

<?phpecho $row['name']; ?>

</span><a><span></span></a></li>

<?php endforeach; ?>

         <li class="tag-new">
                   <input type="text" maxlength="10" class="tag-input">
         </li>
</ul>



<button>Сохранить</button>

На этом вторая часть урока по созданию динамическим меткам завершена. Благодарю за внимание!