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

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

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

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

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

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

Бесплатный Курс "Основы работы с фреймворком CakePHP"

Хотите научиться создавать сайты любой сложности быстро?

Познакомьтесь ближе с одним из замечательных фреймворков - CakePHP.

Узнайте о его преимуществах, освойте основные функции и начните применять CakePHP на практике!

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

Бесплатный Курс "Рисование дизайна сайта с нуля"

Обучающая система для полных новичков в дизайне.

Вы научитесь создавать дизайн любых сайтов - для себя и на заказ.

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

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

Бесплатный тренинг "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-подгрузка контента при прокрутке страницы

Размер: 48,4 Мб.

Длительность: 26 мин. 40 сек.

Скачать видео + исходники

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

Вместо этого, контент из базы будет подгружаться автоматически благодаря Ajax-запросам как только пользователь промотает страницу вниз.

Такой подход активно используется в социальных сетях (например, ВКонтакте) и на ряде других сайтов для того, чтобы отображать новые записи, комментарии и т.д.

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

Кроме этого, динамическая подгрузка контента через Ajax-запросы позволяет не перезагружать страницу целиком, что экономит вычислительные ресурсы сервера.

В нашем примере будет реализован подход, при котором на странице изначально будет выводиться 10 записей из базы данных. Далее, при прокрутке страницы вниз идет автоматическая фоновая подгрузка еще 10 записей и т.д., пока не закончатся материалы в базе.

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


Хостинг


Краткий обзор урока (все подробности смотрите в видео):

1. Для начала создаем новый хост для работы над примером. В моем случае он имеет имя prokrutka. В нем размещаем все файлы примера из доп. материалов.

2. Далее экспортируйте дамп базы данных, который приложен к уроку (файл dump.sql). Он создаст новую базу данных и таблицу с данными, которые используются в примере.

3. Теперь давайте посмотрим на код файла index.php:


<?php
include 'inc/db.php';

// Получаем первые 10 статей, которые будут видны изначально
$res = mysqli_query($db, "SELECT * FROM `articles` ORDER BY `article_id` DESC LIMIT 10");

// Формируем массив из 10 статей
$articles = array();
while($row = mysqli_fetch_assoc($res))
{
    $articles[] = $row;
}
?>

<!DOCTYPE HTML>
<html>

<head>
	<meta charset = "utf-8" />
	<title>Все статьи</title>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>

</head>

<body>

<div style="width: 200px;" id="articles">

    <?php foreach ($articles as $article): ?>
        <p><b><?php echo $article['title']; ?></b><br />
        <?php echo $article['text']; ?></p>
    <?php endforeach; ?>

</div>
<button id="more">Дальше</button>

</body>
</html>

Файл index.php является основным файлом, к которому мы производим обращение. В нем мы подключаемся к базе данных, используя файл db.php и инструкцию include.

Затем обращаемся к базе и формируем массив из 10 статей, которые будут изначально отображаться на странице, после чего уже пишем саму HTML-разметку.

В тэге head подключаем два JavaScript-файла - библиотеку jQuery (для совершения Ajax-запроса) и файл scripts.js, в котором мы и напишем сам запрос и другой необходимый для работы JavaScript-код.

В тэге body мы выводим блок div с идентификатором articles. В нем формируем цикл для вывода статей, а под блоком размещаем кнопку "Дальше", которая нам пригодится чуть позже (подробно об этом рассказано в видео).

4. Рассмотрим теперь файл db.php:


<?php
// Хост (обычно localhost)
$db_host = "localhost";
// Имя базы данных
$db_name = "maindb2";
// Логин для подключения к базе данных
$db_user = "root";
// Пароль для подключения к базе данных
$db_pass = "";

//Подключаемся к базе
$db = mysqli_connect ($db_host, $db_user, "", $db_name) or die ("Невозможно подключиться к БД");
// Указываем кодировку, в которой будет получена информация из базы
mysqli_query ($db, 'set character_set_results = "utf8"');

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

После этого производим подключение и указываем кодировку, в которой будет получена информация из базы - UTF-8.

Хостинг

5. Теперь очередь файл-обрабочика - obrabotchik.php:


<?php
include 'inc/db.php';

// C какой статьи будет осуществляться вывод
$startFrom = $_POST['startFrom'];

// Получаем 10 статей, начиная с последней отображенной
$res = mysqli_query($db, "SELECT * FROM `articles` ORDER BY `article_id` DESC LIMIT {$startFrom}, 10");

// Формируем массив со статьями
$articles = array();
while ($row = mysqli_fetch_assoc($res))
{
    $articles[] = $row;
}

// Превращаем массив статей в json-строку для передачи через Ajax-запрос
echo json_encode($articles);

В этом файле мы будем производить необходимые действия, приняв данные, отправленные с помощью Ajax-запроса.

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

Получаем мы эту информацию из массива POST, в который она попадет благодаря Ajax-запросу. Значение этой переменной будет меняться, и мы используем его для задания ограничения LIMIT при формировании запроса на выборку.

Далее мы формируем массив с 10 статьями, который будет отдаваться в ответ на Ajax-запрос.

И, наконец, для того, чтобы передать данный массив через Ajax-запрос, мы преобразуем его в json-строку.

6. Теперь переходим к основному функционалу и файлу scripts.js:


$(document).ready(function(){

/* Переменная-флаг для отслеживания того, происходит ли в данный момент ajax-запрос. В самом начале даем ей значение false, т.е. запрос не в процессе выполнения */
var inProgress = false;
/* С какой статьи надо делать выборку из базы при ajax-запросе */
var startFrom = 10;

    /* Используйте вариант $('#more').click(function() для того, чтобы дать пользователю возможность управлять процессом, кликая по кнопке "Дальше" под блоком статей (см. файл index.php) */
    $(window).scroll(function() {

        /* Если высота окна + высота прокрутки больше или равны высоте всего документа и ajax-запрос в настоящий момент не выполняется, то запускаем ajax-запрос */
        if($(window).scrollTop() + $(window).height() >= $(document).height() - 200 && !inProgress) {

        $.ajax({
            /* адрес файла-обработчика запроса */
            url: 'obrabotchik.php',
            /* метод отправки данных */
            method: 'POST',
            /* данные, которые мы передаем в файл-обработчик */
            data: {"startFrom" : startFrom},
            /* что нужно сделать до отправки запрса */
            beforeSend: function() {
            /* меняем значение флага на true, т.е. запрос сейчас в процессе выполнения */
            inProgress = true;}
            /* что нужно сделать по факту выполнения запроса */
            }).done(function(data){

            /* Преобразуем результат, пришедший от обработчика - преобразуем json-строку обратно в массив */
            data = jQuery.parseJSON(data);

            /* Если массив не пуст (т.е. статьи там есть) */
            if (data.length > 0) {

            /* Делаем проход по каждому результату, оказвашемуся в массиве,
            где в index попадает индекс текущего элемента массива, а в data - сама статья */
            $.each(data, function(index, data){

            /* Отбираем по идентификатору блок со статьями и дозаполняем его новыми данными */
            $("#articles").append("<p><b>" + data.title + "</b><br />" + data.text + "</p>");
            });

            /* По факту окончания запроса снова меняем значение флага на false */
            inProgress = false;
            // Увеличиваем на 10 порядковый номер статьи, с которой надо начинать выборку из базы
            startFrom += 10;
            }});
        }
    });
});

Дожидаемся окончания загрузки документа и создаем переменную-флаг inProgress для отслеживания того, происходит ли в данный момент ajax-запрос. Изначально даем ей значение false, т.е. запрос не в процессе выполнения.

Следующим шагом указываем, с какой статьи надо делать выборку из базы при ajax-запросе (переменная startFrom).

После этого работаем с логикой скрипта. По событию прокрутки окна, мы проверяем, достиг ли человек нижней части экрана.

Если да, то мы запускаем Ajax-запрос, передав ему все необходимые данные (включая значение переменной startFrom).

Обратите внимание, что до начала выполнения запроса мы меняем значение для переменной флага с false на true, а после окончания - обратно: с true на false.

Этот прием позволяет нам избежать создания множественных Ajax-запросов пользователем, если он будет активно прокручивать страницу вверх и вниз в нижней части окна.

По окончании запроса мы преобразуем результат, пришедший от обработчика, т.е. json-строку обратно в объект (по сути - массив) для того, чтобы работать с ним средствами JavaScript.

После этого нам остается только отобрать в jQuery-набор наш блок со статьями по идентификатору articles и добавить в него 10 новых статей, запрошенных из базы.

По окончании этого мы увеличиваем на 10 порядковый номер статьи, с которой надо начинать выборку из базы при следующем Ajax-запросе.

Вот в общем-то и все. Общую схему работы вместе с кодом я привел выше, однако если этот обзор вам не до конца понятен, то изучите полную версию урока в видеоформате на этой странице выше.

С уважением, Дмитрий Науменко.

P.S. Неплохо? Тогда присмотритесь к премиум-урокам по различным аспектам сайтостроения, включая JavaScript, jQuery и Ajax, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить практические навыки веб-программирования:

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Наверх