Codeigniter

Создание модуля слайдера на jQuery. Шаблон Bootstrap Carousel.

Мы все ближе и ближе подходим к нашей цели: создать уникальный движок с полным набором необходимых модулей. Гибкую, удобную для пользователя, понятную в освоении для владельца сайта, простую и расширяемую для программиста систему управления сайтом!

Мода - знакомить пользователя с полезной свежей информацией сайта при помощи слайдера ни куда не делась. Давайте в этом уроке сделаем обязательный модуль-виджет для нашего движка - slider.

Вкратце опишем функционал. Создаем 2 таблицы в БД - для возможности создавать и управлять несколькими слайдерами. Каждый слайд уникален, он должен содержать: изображение, название, содержание(текст), кнопку и ссылку для перехода на любую страницу или сайт. Начнем с базы данных:


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


slider_name - это название слайдера(латинским) для вывода данных нашим модулем.

Во второй таблице храним непосредственно данные по каждому слайду - указывая в ячейке slider_id - идентификатор слайдера.

Дальше по накатанной нами в предыдущих уроках - создаем папку модуля slider, папку controllers и сам контроллер Slider.php и пишем код:


image description

Замечательно. Теперь недостающий файл модели модуля 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) Много кода, так что давайте по порядку все разберем:

  1. Id блока слайдера указываем с идентификатором (именем) самого слайдера - в случае использования нескольких слайдеров на одной странице могут возникнут неполадки с навигацией. Стрелки и кнопки управления (carousel-indicators) будут перекрывать друг друга и работать обработчиком сразу для всех слайдеров на одной странице. Что бы такого не было - задаем каждому элементу управления уникальный идентификатор!
  2. Условными операторами можно проверять на наличие заполненных ячеек в бд и выводить или прятать блок с текстом, кнопки или заголовок. К примеру - если не задавать url для перехода по нажатию кнопки - то кнопку не зачем и выводить! Таким образом можно задавать любые условия в шаблоне.
  3. Стрелки для навигации и индикаторы - так же можно прятать или выводить в шаблоне.
  4. Немного изменив наш модуль - можно задавать каждому слайдеру свой шаблон. Все зависит от вашей задачи.

Теперь добавим цвета нашему сайту, изменив стандартные стили бутстрапа:


В итоге получаем изумительный слайдер:

image description

Вот и все на сегодня. Как всегда исходники движка на Codeigniter 3 + HMVC. Модуль Слайдера(carousel) на bootstrap
Посмотреть слайдер в действии можно здесь http://ci3.polyakov.co.ua

Ну а вас ждет домашнее задание: использовать данный модуль для вывода слайдера с помощью плагина для jquery - Cycle2 - отличный скрипт для создания карусели изображений, слайдера, прокрутки дополнительных изображений товара и так далее. Сохрание созданный шаблон в папке slider - и используйте в будущих проектах. Надеюсь из урока вам стало понятно - что с помощью данного модуля можно выводить слайдер с помощью абсолютно любых плагинов слайдера для jQuery, будь то owlCarousel или jCarousellite или любой другой.

А мы с вами все ближе приближаемся к созданию административной части для нашего движка;-) Заходите на сайт, оставляйте комментарии и с Рождеством Вас!

4660 Просмотров Комментариев: 51

Владимир

Ответить

Спасибо за статью. Ждем административную часть)

Виктор

Ответить

хотелось бы видеть урок по авторизации на сессиях в CI.3.0

Поляков Е.

Ответить

Виктор. Я сейчас раздумываю писать ли урок по модулю IONAuth - который использую для своего движка уже больше года. Либо написать собственный жирный модуль авторизации и пользователей управление. Как только дойдем до админки - будем писать авторизацию обязательно;) потерпите чуть чуть!

Виктор

Ответить

Будем ждать!

SERGEY

Ответить

Спасибо за урок. Ждем админку.

Євген

Ответить

Дуже сильно чекаю на продовження і відкладаю UAH на каву :)

Поляков Е.

Ответить

Спасибо, Евгений. Очень приятно что читаете блог и даже откладываете на каву ;-)

Сергей

Ответить

Евгений, а будут ли статьи связанные с работой кэша?

Поляков Е.

Ответить

Сергей, вообще в данный момент не использую кэш для своего движка. НЕ вдаваясь в подробности могу заявить - что скорость загрузки страниц - очень высокая. Делать кэширование страниц в собранные файлы в отдельной папке system/cache - можно, но при небольшом количестве посетителей - это лишь замедлит работу сайта и скорость упадет - проверенно на деле.

Если вы строите на своем движке(по моим урокам) высоко нагруженный проект - советую использовать драйвер кэширования codeigniter - работает супер.

В интернете есть статьи и учебные материалы на тему кэширования codeigniter - если есть необходимость - отговаривать не буду. Первое что попалось - http://cidocs.ru/210/libraries/caching.html

Если будете проверять и тестировать скорость - и соберете интересный материал на эту тему - пишите на почту или с сайта отправте заявку - протестирую и выложу ваш код и статью. Это был бы полезный урок, но у меня в планах другие(более нужные пока) статьи для читателей.

Спасибо. Пишите!

Виктор

Ответить

Ну когда уже админка будет? хотя бы примерно?

Поляков Е.

Ответить

Виктор, я подготавливаю материал для создания админки все свое свободное время. Но времени к сожалению очень очень мало на развитие своего портала(

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

Заходите на сайт периодически - следите за обновлениями ;-)

Виктор

Ответить

Спасибо буду ждать, хотелось бы увить интересные решения по авторизации и ACL управления группами пользователей .

Николай

Ответить

Евгений а не могли бы вы скинуть архивчик админки, очень уж невтерпёж. Пока пытаюсь разобраться сам, но сложновато, не хватает знаний. Пробовал админки на github, но чтото не получилось их развернуть (

Поляков Е.

Ответить

Конечно, Николай, могу. ddddd099 а домене почтовом яндекс - сюда кидать? Напишите на почту мне, отправлю ссылку на облако вам, сегодня-завтра, т.к. нужно подготовить данные сайта и движка.

Николай

Ответить

Евгений да вышлите пожалуйста на этот адрес, яндекс. А вашу почту я так и не нашёл, осмотрел весь сайт.

Ярослав

Ответить

Видимо плохо искали: "ОБРАТНАЯ СВЯЗЬ ZHENYA_POLYAKOV@MAIL.RU" P.S. Если не затруднит, то и мне вышлите копию;)

Поляков Е.

Ответить

Нет, нет - это я выложил в шапке "обратную связь" после комментария Николая ;)

Ребята, дайте чуть чуть времени - на этих днях скомпилирую версию для вас, дорогие читатели и открою доступ к скачиванию ;)

Николай

Ответить

Евгений ещё вопрос. Некоторые весчи довольно сложны для понимания. Не могли бы вы посоветовать дополнительную литературу?

Николай

Ответить

Ждём с нетерпением. Евгений я натолкнулся на статью где пишут что CI4 на подходе и там будет использован PHP7. И якобы модель HMVC будет реализована по другому принципу, связанному с новыми возможностями PHP7.

Поляков Е.

Ответить

Николай, специально для вас и всех читателей создал раздел с полезной литературой. Буду обновлять постепенно.

Николай

Ответить

Спасибо. А я вчера прикупил книжку как раз по теме обьектов, читаю и понемногу в голове всё устаканивается по CI. Называется PHP обьекты шаблоны и методики программирования. 4е издание.

Николай

Ответить

Можно ещё вопрос. В вашем блоге чпу - как вы сделали? Насколько я понял в уроках вы это пока не затрагивали. Но я пробовал делать по документации, добавил поле slug - всё вроде работает, но вот проблема - не работает с кириллицей. Насколько я понял надо переводить в транслит и проверять на дубли. Вот здесь я и упёрся в тупик.

Николай

Ответить

Фухх, всё оказалось проще - сделал транслит при заполнении формы.

Поляков Е.

Ответить

Николай, пройдите плиз все 8 уроков по созданию движка, там есть функции для работы с ЧПУ. Одна функция общая для всего движка в главной библиотеке. Полностью рабочий блог, который мы успели сделать можно посмотреть здесь ну и в конце каждой статьи есть исходные коды, вот можно скачать последнюю версию из 8го урока и разбирать исходные коды - вам понравится ;-)

Транслит - тоже будет функция в главной библиотеки админки - при создании страницы будем делать транслит имени страницы в meta_url - латиницей.

Хватит нам кириллицы в вордпрессе ;)

Николай

Ответить

Да Евгений я видел. Но возможно я не допонял. Я хотел сделать поле чпу скрытым, чтобы не вписывать его вручную а формировать по полю title. На сайте официальном в уроке - так и сделано, но там нет проверки на уникальность.

Роберт

Ответить

У меня вопрос по исходникам, для чего в корневой папке .idea с xml файлами?

Sergey

Ответить

Эту папку и файлы создаёт прога Phpstorm, можно смело удалять.

Роберт

Ответить

спасибо, за серию уроков по codeigniter 3.

Поляков Е.

Ответить

Да, совершенно верно, PHPStorm оставляет. Видимо забыл удалить, сори.

За уроки пожалуйста - приходите еще ;).

В этом году по многим причинам не успеваю выдавать новые статьи, но не переживайте материал будет, ДВИЖКУ - БЫТЬ ;-)

Роберт

Ответить

В процессе изучения Вашей работы, у меня возник вопрос по поводу модулей. Вы собрали все классы в папку modules, даже те которые отвечаю за вывод страниц. Почему нельзя разделить модули от основного контента сайта. На своём примере я перенёс классы за вывод страниц в application.

Поляков Е.

Ответить

Роберт, не могу понять суть вопроса - вы точно смотрели исходные коды моего движка? ))))

Если да, то почитайте первый урок по созданию данного движка. Мы строим не обычное CI приложение - что бы каждый модуль работал независимо друг от друга мы установили модульное расширение для MVC паттерна - HMVC.

Я не собираю классы в папку modules - там хранятся папки с модулями. Каждый модуль хранит в себе собственную триаду модель,отображение,контроллер - таким образом мы делаем его независимым от других модулей.

Нам все же необходимы функции, используемые во всех модулях - генерация страницы, работа с текстом и подобные - вот для них мы и создали модуль common(общий) в нем создали библиотеку main_lib и пользуемся ей во всех прочих модулях.

Все это я описывал в первой статье, почитайте ее еще раз и ознакомьтесь для чего нужна библиотека HMVC и зачем это нужно, и вот - просто отличная статья на хабре

Роберт

Ответить

Задам вопрос по другому, Вы собираете все модули в одном месте. да, это удобно но Вы так же в эту папку помещаете скрипты для отображения самих страниц. Вам не кажется что стоит их вынести отдельно или оставить в папке application

роберт

Ответить

Вот к примеру папка page это же не модуль это контроллер и модель для формирования страниц, зачем его размещать в месте с модулями, создаётся путаница.

Поляков Е.

Ответить

Не верно! Page это модуль для вывода страниц сайта. У него свой ЧПУ свой контроллер, своя библиотека своя модель + будет контроллер для администрирования + отображения для администрирования будет папка asset для дом скриптов и стилей для админ раздела.

Нет ни какой путаницы, вам нужно просто лучше разобраться с логикой этого приложения. Не спешите с выводами и попробуйте без исходников с нуля начать писать этот движок - сразу во всем разберетесь ;-)

Роберт

Ответить

Я не могу понять почему Вы page называете модулем, ведь он формирует страницы с остальными модулями.

Роберт

Ответить

модуль в модуле?

Роберт

Ответить

Ещё вопрос о классе Page.php, в методе view происходит три запроса к одной и той же таблице в базе. Можно же всё это получить одним запросом к базе.

Поляков Е.

Ответить

Посмотрите какой модуль создает запрос к БД и вы увидите что 3 модуля задействованы для сборки страницы:
Common - проверяет существование страницы + выбирает и генерирует и выводит мета-данные
Pages - выбирает содержание страницы
Comments - выбирает все комментарии к отображаемой страницы

Роберт, еще раз прошу - читайте предыдущие уроки и напишите по ним движок с нуля если хотите разобраться, либо переходите к изучению других уроков, вот рекомендую ruseller уроки по созданию CMS или подобные, где ребята процедурным подходом или ооп на чистом php создают не менее качественные приложения. Пожалуйста хватит флудить в комментариях.

Роберт

Ответить

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

Поляков Е.

Ответить

Если вышеописанные комментарии очень важны - предлагаю просто использовать исходники уроков для реализации своего движка ;-)

Не переживайте я понял ваши предложения, спасибо!

Вадим

Ответить

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

Поляков Е.

Ответить

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

Мультиязычность - самая беспокойная для меня тема! На подобном движке делал несколько сайтов многоязычных - каждый раз разрабатывал новую систему. Один сайт делал по данному мануалу с хабра две базы + сессии + URI на одном домене. Так же делал связку - одна база + разные домены + помошник language CI. Еще был лендинг на 5 языках - поддомены + собственный парсер языковых файлов + одна база + сессии. Все варианты с системой администрирования - для управления всеми языками с одной админки.

Но все не то. Вот сейчас вновь стоит задача разработать ИМ на нескольких языках и для идеальной работы - нужно переписывать логику работы всех модулей. Разбить хранение данных основных модулей на 2 таблицы каждый + использовать помощник language + сессии + URI = что бы сайт отлично индексировался и легко администрировался и была возможность расширения. Но у такого кардинального подхода есть и минусы(

В общем до многоязычности еще далеко!

Павел

Ответить

Большое спасибо за уроки.. Всё просто супер..

sergey

Ответить

Евгений, у вас в коде шаблона slider.tpl в строках 14, 19 и 20, мне кажется перебор с двойными кавычками ;) Хотелось бы увидеть реализацию модуля поиска.

Артем

Ответить

Евгений, нет сил ждать новых статей, в частности про админку! :) Вышлите пожалуйста на почту исходники движка (с админкой). Или же подскажите хотя бы где можно почитать про организацию админки в CI с HMVC. П.С. Большое спасибо за ваши труды по написанию статей.

Євген

Ответить

Добрий день Євгене! Скажіть чи буде продовження і коли, бо вже доволі довго немає нічого нового.

Виктор

Ответить

Ну что?, где админка? я уже свою гибкую acl по группам пользователей сделать успел у логику по правам доступа сделал + панель управления..... хотелось бы увидеть вашу реализацию... может че полезного увидел бы... ну когда примерно будет?

Алексей Кулагин

Ответить

Мдя... Противоречивые чуйства. С одной, самой большой стороны, - Евгений ты молодец. Сам бы я, без пинка, без исходников, шёл бы очень долго до изложенного материала. С др. стороны так нельзя: 1. код грязный 2. есть очень нехорошие ошибки, которые трудно найти 3. не продумана до конца архитектура приложения, имхо, много повторов. Но это не в обиду: хорошо мне дебажить и рефракторить, когда есть работающее приложение. Если есть желание поговорить по проблемам - пиши на мыло (оно у тебя в админке должно быть). Готов предоставить свой вариант приложения.

Дмитрий Васильевич

Ответить

Сдулся наш бог CI3, может начнем заново c CI4?

Вячеслав

Ответить

Да..каруселька полезная штука. Но для начика сложновато. Создание сайта работа кропотливая. Я занимаюсь этим довольно давно и самый сложный этап это войти в это дело. Необходимо много перечитать изучить..и сделать из себя хоть и не великого, но начинающего мастера. Такие статьи очень полезны. Спасибо!

Вячеслав

Ответить

Да..каруселька полезная штука. Но для начика сложновато. Создание сайта работа кропотливая. Я занимаюсь этим довольно давно и самый сложный этап это войти в это дело. Необходимо много перечитать изучить..и сделать из себя хоть и не великого, но начинающего мастера. Такие статьи очень полезны. Спасибо!

« Предыдущая статьяСоздание движка на Codeigniter 3 + HMVC. Часть 7. Пишем модуль комментарии - comments Следующая статья »Пишем модуль оплаты товара с помощью LiqPay в модальном окне