Reg.ru: домены и хостинг
Крупнейший регистратор и хостинг-провайдер в России.
Более 2 миллионов доменных имен на обслуживании.
Продвижение, почта для домена, решения для бизнеса.
Более 700 тыс. клиентов по всему миру уже сделали свой выбор.
Бесплатный Курс "Практика HTML5 и CSS3"
Освойте бесплатно пошаговый видеокурс
по основам адаптивной верстки
на HTML5 и CSS3 с полного нуля.
Фреймворк Bootstrap: быстрая адаптивная вёрстка
Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.
Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.
Верстайте на заказ и получайте деньги.
Бесплатный курс "Сайт на WordPress"
Хотите освоить CMS WordPress?
Получите уроки по дизайну и верстке сайта на WordPress.
Научитесь работать с темами и нарезать макет.
Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!
*Наведите курсор мыши для приостановки прокрутки.
Динамическая сортировка элементов с сохранением в базу с помощью Ajax
|
|
Размер: 78,7 Мб. Длительность: 54 мин. 25 сек. |
В этом видеоуроке мы рассмотрим пример, в котором научимся динамически сортировать элементы с их мгновенным сохранением в базе с помощью технологии Ajax.
Такой подход часто используется в админ-панелях для изменения порядка следования пунктов меню и т.п. элементов.
Для того, чтобы пункт меню изменил свое положение на сайте, достаточно в админке просто перетащить его на новую позицию. В этот момент производится Ajax-запрос и обновление информации в базе данных.
Без использования технологии Ajax для этого пришлось бы использовать обычную форму, в которой бы мы вводили напротив каждого пункта меню его порядковый номер. После этого мы нажимали бы на кнопку "сохранить", и порядок пунктов меню в базе менялся бы.
Это вполне рабочее решение, но его можно реализовать и другим способом - без использования формы и без перезагрузки страницы.
Адекватность применения именно такого подхода остается на ваше усмотрение, т.к. многое зависит от того, где именно вы хотите применить такой способ упорядочивания элементов.
Вы можете просмотреть этот урок прямо сейчас, либо скачать его себе на компьютер по ссылке выше.
Под видео вы найдете сокращенную текстовую версию для этого видеоурока.
Краткий обзор урока (все подробности смотрите в видео):
Что нам понадобится?
1. База данных с пунктами меню
2. Файл подключения к базе данных
3. Файл, имитирующий обычную страницу сайта
4. Файл, из которого мы будем управлять пунктами меню
5. Файл, непосредственно обновляющий информацию в базе
6. Библиотека jQuery
7. Библиотека jQuery UI
8. Файл стилей с простыми CSS-правилами
9. Файл .htaccess для установки верной кодировки сервера (при необходимости)
Как что работает?
1. Создаем проект в Денвере (либо на реальном сервере)
Я дам ему имя sort_elements. Внутри папки sort_elements создаем папку www. В нее копируем приложенные исходные файлы (без файла .htaccess).
2. Создаем базу данных в программе phpMyAdmin
Даем базе имя menu. Обратите внимание на кодировку и сопоcтавление соединения с MySQL - utf8_unicode_ci.
3. Создаем в базе данных таблицу с именем punkts и задаем для нее структуру
В таблице будут 3 поля:
- punkt_id (int (3), первичный ключ, автоинкремент)- идентификатор пункта меню;
- title (varchar (100)) - текст пункта меню;
- position (int (3)) - порядковый номер пункта меню.
4. Заполняем таблицу данными
5. Пишем файл подключения к базе данных (db.php)
<?php
$db = mysqli_connect ("localhost", "root", "", "menu") or die ("Невозможно подключиться к БД");
6. Пишем файл для вывода пунктов меню (index.php)
<?php include 'inc/db.php';?>
<!DOCTYPE HTML>
<head>
<meta charset = "utf-8" />
<title>Динамическая сортировка с сохранением в базу данных</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
</head>
<body>
<ul id="edit_menu">
<?php
@mysqli_query ($db, 'set character_set_results = "utf8"');
$res = mysqli_query ($db, "SELECT * FROM `punkts` ORDER BY `position`") or die (mysqli_error($db));
while ($row = mysqli_fetch_assoc($res))
{
echo "<li class = 'menu_item' id = '" . $row['punkt_id'] . "'>" . $row['title'] . "</li>" . PHP_EOL;
}
?>
</ul>
</body>
</html>
Первым делом мы подключаемся к базе данных.
Далее, внутри тэга body мы совершаем запрос на выборку из базы пунктов меню и выводим их в цикле на экран.
Если пункты меню выводятся на экран "кракозябрами", то воспользуйтесь файлом .htaccess, который я приложил в дополнительных материалах к уроку. Для этого просто положите его в корень вашего проекта на том же уровне, что и файл index.php.
Его содержимое очень просто:
AddDefaultCharset utf-8
После этого кодировка по умолчанию для сервера будет установлена в значение utf-8, и проблемы с отображением символов исчезнут.
7. Пишем файл, из которого мы будем управлять пунктами меню (admin.php)
<?php include 'inc/db.php';?>
<!DOCTYPE HTML>
<head>
<meta charset = "utf-8" />
<title>Динамическая сортировка с сохранением в базу данных</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.9.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#edit_menu').sortable(
{
axis: 'y',
opacity: 0.6,
//placeholder: 'menu_item',
stop: function()
{
var menu_punkts = $('#edit_menu').sortable("toArray");
//alert(menu_punkts);
$.ajax(
{
url: 'change_order.php',
type: 'POST',
data: {punkts: menu_punkts},
error: function()
{
$('#message').text("Ошибка!");
},
success: function()
{
$('#message').fadeIn(400).text("Успешно сохранено!").fadeOut(1200);
}
});
}
});
});
</script>
</head>
<body>
<ul id="edit_menu">
<?php
@mysqli_query ($db, 'set character_set_results = "utf8"');
$res = mysqli_query ($db, "SELECT * FROM `punkts` ORDER BY `position`") or die (mysqli_error($db));
while ($row = mysqli_fetch_assoc($res))
{
echo "<li class = 'menu_item' id = '" . $row['punkt_id'] . "'>" . $row['title'] . "</li>";
}
?>
</ul>
<p id="message"></p>
</body>
</html>
Сперва также идет подключения к базе данных. Затем мы подключаем, помимо стилей, два JavaScript-файла - библиотеки jQuery и jQuery UI.
Внутри тэга body идет вывод списка пунктов меню, полностью аналогичный тому, что был сформирован нами в файле index.php. В самом низу создан пустой параграф с идентификатором message для вывода информационных сообщений.
Теперь вернемся чуть выше и посмотрим, что делает JavaScript-код в этом файле.
Мы используем метод sortable из библиотеки jQuery UI для того, чтобы обеспечить перетаскивание пунктов меню. Далее мы делаем, чтобы перетаскивание было доступно только по вертикали и меняем прозрачность перетаскиваемого элемента.
Важным моментом является использования события stop. Оно происходит в том случае, когда мы отпускаем перетаскиваемый элемент. Данное событие будет "спусковым крючком" для генерации Ajax-запроса.
Как только происходит данное событие, мы сохраняем в переменную menu_punkts порядок следования идентификаторов пунктов меню (идентификаторы присваиваются пунктам меню на основании поля punkt_id в базе данных - см. файл index.php).
После этого уже совершается Ajax-запрос с помощью метода ajax из библиотеки jQuery. Мы задаем важные настройки:
- url: адрес файла, которому будет переданы данные на обработку
- type: метод отправки данных
- data: информация, которая будет передана на обработку
Кроме того, мы используем два собыитя - error и success для указаная того, что следует делать, если запрос закончился неудачей или успехом соответственно.
8. Пишем файл, непосредственно обновляющий информацию в базе (change_order.php)
<?php
include 'inc/db.php';
@mysqli_query ($db, 'set character_set_results = "utf8"');
$new_pos = 1;
foreach ($_POST['punkts'] as $item)
{
mysqli_query($db, "UPDATE `punkts` SET `position` = '{$new_pos}' WHERE `punkt_id` = '{$item}'");
$new_pos++;
}
Первым делом подключаемся к базе данных. Затем принимаем из admin.php переданные данные, т.е. элемент punkts в массиве $_POST.
Следующим шагом мы проходимся циклом по всем переданным элементам и обновляем значения позиций для каждого из пунктов меню на основании новых данных, которые мы только что получили.
Вот таким образом все это работает.
Как вариант - можно использовать такой механизм для создания виджетов. Скажем, если в сайдбаре выводятся однотипные элементы (блоки с контентом) в цикле, то можно управлять очередностью вывода этих блоков.
Используйте данный пример, изменяйте его под свои нужды и придумывайте другие способы его применения на практике.
Если краткий обзор вам не до конца понятен, то изучите полную версию урока в видеоформате на этой странице выше.
Успехов вам!
Дмитрий Науменко.
P.S. Присмотритесь к премиум-урокам по различным аспектам сайтостроения, включая JavaScript, jQuery и Ajax, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить практические навыки веб-программирования:
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!
Смотрите также:
