Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

Перейти на сайт->

Бесплатный Курс "Практика HTML5 и CSS3"

Освойте бесплатно пошаговый видеокурс

по основам адаптивной верстки

на HTML5 и CSS3 с полного нуля.

Начать->

Фреймворк Bootstrap: быстрая адаптивная вёрстка

Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.

Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.

Верстайте на заказ и получайте деньги.

Получить в подарок->

Бесплатный тренинг "PHP для Создания Сайтов: Введение"

Что нужно знать для создания PHP-сайтов?

Ответ здесь. Только самое важное и полезное для начинающего веб-разработчика.

Узнайте, как создавать качественные сайты на PHP всего за 2 часа и 27 минут!

Записаться бесплатно->

Бесплатный курс "Сайт-Визитка За 15 уроков"

Создайте свой сайт за 3 часа и 30 минут.

После просмотра данного видеокурса у Вас на компьютере будет готовый к использованию сайт, который Вы сделали сами.

Вам останется лишь наполнить его нужной информацией и изменить дизайн (по желанию).

Получить в подарок->

Бесплатный курс "Основы HTML и CSS"

Изучите основы HTML и CSS менее чем за 4 часа.

После просмотра данного видеокурса Вы перестанете с ужасом смотреть на HTML-код и будете понимать, как он работает.

Вы сможете создать свои первые HTML-страницы и придать им нужный вид с помощью CSS.

Получить в подарок->

Бесплатный курс "Сайт на WordPress"

Хотите освоить CMS WordPress?

Получите уроки по дизайну и верстке сайта на WordPress.

Научитесь работать с темами и нарезать макет.

Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!

Получить в подарок->

Бесплатный курс "Основы работы с JavaScript"

Хотите изучить JavaScript, но не знаете, как подступиться?

После прохождения видеокурса Вы освоите базовые моменты работы с JavaScript.

Развеются мифы о сложности работы с этим языком, и Вы будете готовы изучать JavaScript на более серьезном уровне.

Получить в подарок->

Воспламенитель Кода: Сайт-Визитка на CodeIgniter

Курс предназначен для тех, кто знает основы HTML и CSS.

Изучив его, Вы сможете разрабатывать гибкие и функциональные Сайты-Визитки с панелью администратора.

Все, что нужно для разработки Сайта-Визитки: от шаблона и до переноса на хостинг.

Подробнее->

JavaScript и jQuery с нуля

Курс предназначен для тех, кто хочет повысить интерактивность и удобство своего сайта для посетителей.

Изучив его, Вы сможете создавать более красивые и функциональные сайты.

104 видеоурока: от основ JavaScript до готовых решений на jQuery.

Подробнее->

Повелитель PHP: кратчайший путь к мастерству без толстых учебников.

Курс предназначен для тех, кто хочет освоить язык PHP и свободно с ним работать.

Изучив его, Вы сможете при разработке сайтов решать любые задачи, требующие знаний PHP.

Подробнее->

*Наведите курсор мыши для приостановки прокрутки.


Динамическая сортировка элементов с сохранением в базу с помощью 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 с нуля. Все это поможет вам быстрее и проще освоить практические навыки веб-программирования:

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!


Смотрите также:

PHP: Получение информации об объекте или классе, методах, свойствах и наследовании

PHP: Получение информации об объекте или классе, методах, свойствах и наследовании

CodeIgniter: жив или мертв?

CodeIgniter: жив или мертв?

Функции обратного вызова, анонимные функции и механизм замыканий

Функции обратного вызова, анонимные функции и механизм замыканий

Применение функции к каждому элементу массива

Применение функции к каждому элементу массива

Слияние массивов. Преобразование массива в строку

Слияние массивов. Преобразование массива в строку

Деструктор и копирование объектов с помощью метода __clone()

Деструктор и копирование объектов с помощью метода __clone()

Эволюция веб-разработчика или Почему фреймворк - это хорошо?

Эволюция веб-разработчика или Почему фреймворк - это хорошо?

Магические методы в PHP или методы-перехватчики (сеттеры, геттеры и др.)

Магические методы в PHP или методы-перехватчики (сеттеры, геттеры и др.)

PHP: Удаление элементов массива

PHP: Удаление элементов массива

Ключевое слово final (завершенные классы и методы в PHP)

Ключевое слово final (завершенные классы и методы в PHP)

50 классных сервисов, программ и сайтов для веб-разработчиков

50 классных сервисов, программ и сайтов для веб-разработчиков

Наверх