Мы все ближе и ближе подходим к нашей цели: создать уникальный движок с полным набором необходимых модулей. Гибкую, удобную для пользователя, понятную в освоении для владельца сайта, простую и расширяемую для программиста систему управления сайтом!
Мода - знакомить пользователя с полезной свежей информацией сайта при помощи слайдера ни куда не делась. Давайте в этом уроке сделаем обязательный модуль-виджет для нашего движка - slider.
Вкратце опишем функционал. Создаем 2 таблицы в БД - для возможности создавать и управлять несколькими слайдерами. Каждый слайд уникален, он должен содержать: изображение, название, содержание(текст), кнопку и ссылку для перехода на любую страницу или сайт. Начнем с базы данных:
В первой таблице храним данные о самом слайдере. Для начала создайте одну запись для главного слайдера. И несколько записей(слайдов) для второй таблицы.
slider_name - это название слайдера(латинским) для вывода данных нашим модулем.
Во второй таблице храним непосредственно данные по каждому слайду - указывая в ячейке slider_id - идентификатор слайдера.
Дальше по накатанной нами в предыдущих уроках - создаем папку модуля slider, папку controllers и сам контроллер Slider.php и пишем код:
Замечательно. Теперь недостающий файл модели модуля Slider_model.php:
Надеюсь вопросов по функциям и работы active records фреймворка codeigniter - не возникло?! Значит идем дальше...
Пришло время создать отдельный шаблон для главной страницы нашего сайта! Дублируем и переименовываем page_full.tpl в page_homepage.tpl. В таблице pages для первой записи главной страницы в ячейке template указываем название созданного шаблона - page_homepage.tpl и сохраняем.
Вот что должен содержать получившийся файл шаблона page_homepage.tpl
Главная страница сайта для данного урока немногим отличается от обычной. Главное отличие - вывод слайдера в шапке шаблона, под заголовком страницы: echo Modules::run('slider/get_slider', 'main_slider')
Все очень просто - вызываем метод get_slider класса Slider (slider/slider/get_slider) передав ему системное имя ячейки slider_name таблицы widget_slider. Далее выбираем все слайды конкретного слайдера и генерируем готовый код верстки с помощью шаблона slider.tpl. Сам шаблон создаем в папке /themes/site/slider/slider.tpl:
Для данного урока я использую готовый компонент bootstrap'а - карусель (Carousel.js) Много кода, так что давайте по порядку все разберем:
- Id блока слайдера указываем с идентификатором (именем) самого слайдера - в случае использования нескольких слайдеров на одной странице могут возникнут неполадки с навигацией. Стрелки и кнопки управления (carousel-indicators) будут перекрывать друг друга и работать обработчиком сразу для всех слайдеров на одной странице. Что бы такого не было - задаем каждому элементу управления уникальный идентификатор!
- Условными операторами можно проверять на наличие заполненных ячеек в бд и выводить или прятать блок с текстом, кнопки или заголовок. К примеру - если не задавать url для перехода по нажатию кнопки - то кнопку не зачем и выводить! Таким образом можно задавать любые условия в шаблоне.
- Стрелки для навигации и индикаторы - так же можно прятать или выводить в шаблоне.
- Немного изменив наш модуль - можно задавать каждому слайдеру свой шаблон. Все зависит от вашей задачи.
Теперь добавим цвета нашему сайту, изменив стандартные стили бутстрапа:
В итоге получаем изумительный слайдер:
Вот и все на сегодня. Как всегда исходники движка на Codeigniter 3 + HMVC. Модуль Слайдера(carousel) на bootstrap
Посмотреть слайдер в действии можно здесь http://ci3.polyakov.co.ua
Ну а вас ждет домашнее задание: использовать данный модуль для вывода слайдера с помощью - отличный скрипт для создания карусели изображений, слайдера, прокрутки дополнительных изображений товара и так далее. Сохрание созданный шаблон в папке slider - и используйте в будущих проектах. Надеюсь из урока вам стало понятно - что с помощью данного модуля можно выводить слайдер с помощью абсолютно любых плагинов слайдера для jQuery, будь то или или любой другой.
А мы с вами все ближе приближаемся к созданию административной части для нашего движка;-) Заходите на сайт, оставляйте комментарии и с Рождеством Вас!
Владимир
Спасибо за статью. Ждем административную часть)