Мы в сети

VK
FB

Оформите подписку!

 Введите Ваш E-m@il и
получайте свежие новости

Страница автора - Андрей Кудлай - Webformyself
Страница автора

Автор: Андрей Кудлай - Webformyself

В курсе изучается одна из наиболее популярных CMS в Рунете – 1С-Битрикс. Данный движок позволяет создавать сайты абсолютно любой направленности и абсолютно любого уровня сложности. Это может быть: интернет-магазин, корпоративный сайт компании, информационный портал, блог или даже простейшая визитка. Мы будем изучать функционал Битрикса на примере создания двух разных сайтов: сайт моды, который можно развивать в качестве корпоративного сайта и блога, а также интернет-магазин. В результате вы получите основы работы с Битриксом не только со стороны разработчика сайтов, но и со стороны администратора сайта. Основное внимание в курсе отведено работе с компонентами, что и не удивительно, поскольку Битрикс – это компонентная CMS, т.е. тот или иной функционал можно реализовать, вызвав соответствующий компонент.

Курс состоит из двух частей:

  • Часть 1. Создание сайта моды
  • Часть 2. Создание сайта интернет-магазина 

Смотреть видео:

1С-Битрикс (bitrix). Практика создания веб-проектов. (Андрей Кудлай - Webformyself)

Содержание:

  • Создание сайта моды

Список уроков первой части:

  • Урок №1. Введение

В первом уроке курса мы пройдемся по организационным моментам, рассмотрим структуру курса, остановимся на необходимом минимуме знаний, который вам потребуется для успешного изучения курса. Также обозначим необходимое программное обеспечение (сервер, редактор, версия PHP и т.д.). Кроме этого, мы познакомимся с CMS 1С-Битрикс и поговорим о специфике разработки сайтов под Битрикс.

  • Урок №2. Установка Битрикс на виртуальную машину

Второй урок мы отведем под один из вариантов установки движка. Битрикс предлагает нам несколько вариантов установки на выбор. Здесь мы рассмотрим вариант установки CMS на виртуальную машину. Для этого мы скачаем и установим виртуальную машину, после чего уже пройдем процесс установки самого Битрикса. В ходе урока мы рассмотрим возможные проблемы работы с виртуальной машиной и способы их решения. Также поговорим о плюсах и минусах использования виртуальной машины по сравнению с локальным сервером.

  • Урок №3. Установка Битрикс на локальный сервер

В этом уроке мы рассмотрим второй вариант установки Битрикса – установка на локальный сервер. В качестве локального сервера мы используем Open Server. Битрикс достаточно требователен к настройкам сервера, а потому в процессе установки можно столкнуться с проблемами конфигурации. Варианты решения этих проблемы вы также узнаете из третьего урока.

  • Урок №4. Первое знакомство с CMS Битрикс

Битрикс – это достаточно специфичная CMS, которая непохожа на другие движки (WordPress, OpenCart и т.п.). В чем состоит специфичность Битрикса вы и узнаете из четвертого урока курса. Здесь мы познакомимся со структурой Битрикса, рассмотрим организацию файлов и каталогов, а также познакомимся с основами администрирования сайтов под управлением Битрикса.

  • Урок №5. Создание папки с темой

Начиная с данного урока, мы приступим к непосредственной разработке шаблона (темы) сайта для Битрикса. В уроке мы рассмотрим варианты создания темы и узнаем о необходимой файловой структуре разрабатываемой темы.

  • Урок №6. Перенос верстки в шаблон

В этом уроке мы начнем перенос статичной верстки в папку шаблона Битрикса. В результате при обращении к главной странице сайта мы увидим имеющуюся верстку со всем подключенными стилями, скриптами и картинками. Из урока вы узнаете, как правильно подключать стили и скрипты, познакомитесь с объектом $APPLICATION и некоторыми его методами, позволяющими получить заголовок страницы, метаданные и другое.

  • Урок №7. Компонент включаемой области

Битрикс – это компонентная CMS, т.е. движок, который состоит из огромного количества самых разных компонентов. В этом уроке мы познакомимся с замечательным компонентом включаемой области. Благодаря этому компоненту мы быстро и просто можем организовать управление фактически любым элементом на сайте: логотип, копирайт, контактная информация и другое.

  • Урок №8. Компонент меню

В этом уроке мы будем работать с компонентом меню. Данный компонент достаточно прост в использовании. Все, что нам нужно, это вызвать данный компонент вместо статичной верстки меню и через админку сайта добавить в меню нужные пункты. Битрикс из коробки предлагает различные варианты меню: простое меню, горизонтальное мультиуровневое, вертикальное многоуровневое и другие. Мы можем взять за основу то, которое нам подойдет, и внести необходимые правки в его шаблон, чтобы в итоге получить меню с соответствующим верстке оформлением.

  • Урок №9-10. Инфоблоки

Одним из ключевых понятий Битрикса являются информационные блоки (инфоблоки). Именно в инфоблоках хранится вся динамическая информация, весь контент сайта: категории (разделы), статьи или товары (элементы) и т.д. В предлагаемых уроках мы познакомимся подробнее с понятием инфоблоков, а также создадим необходимые для сайта инфоблоки.

  • Урок №11. Создание шаблона блога

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

  • Урок №12. Создание шаблона по умолчанию

В этом уроке мы создадим еще один шаблон - .default. Это шаблон, который Битрикс подключает по умолчанию. Создав дефолтный шаблон, мы сможем вынести в него все общие компоненты, а также общие стили, скрипты и прочее. Тем самым в итоге мы будем избавлены от необходимости дублирования кода.

  • Урок №13. Комплексный компонент новости

Данный урок будет посвящен работе с еще одним компонентом – компонентом Новости. Это, пожалуй, один из наиболее востребованных и популярных компонентов. Благодаря ему, мы можем получить практически любые динамичные данные: статьи, новости, слайдеры и т.д. Из урока вы также узнаете разницу между простыми и комплексными компонентами.

  • Урок №14. Шаблон списка новостей

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

  • Урок №15. Шаблон постраничной навигации

Для любого динамичного сайта необходима постраничная навигация (пагинация). В Битриксе для этого есть специальный компонент, в котором есть целый набор различных шаблонов. Один из этих шаблонов наверняка вас устроит и его вполне можно будет использовать. Но все же вас могут не устроить имеющиеся шаблоны пагинации, и вы захотите создать собственный шаблон. В этом уроке мы создадим такой шаблон, разберем устройство шаблона постраничной навигации и в дальнейших своих проектах вы сможете использовать созданный шаблон пагинации.

  • Урок №16. ЧПУ блога

Безусловным плюсом Битрикса является его возможность гибкой настройки ЧПУ – красивых адресов. Буквально для каждого раздела и страницы мы можем настроить нужный нам вид адресов и без проблем сможем изменить их в дальнейшем. В уроке мы настроим ЧПУ для раздела блог, указав нужные адреса для категорий и статей блога.

  • Урок №17. Шаблон отдельной статьи

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

  • Урок №18. SEO-настройки блога

Данный урок мы отведем под работу с SEO-настройками инфоблоков. Битрикс позволяет очень гибко управлять этими настройками и получать необходимые заголовки страниц, их описания (description) и ключевые слова (keywords).

  • Урок №19. Компонент комментариев

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

  • Урок №20. Список новостей в сайдбаре

Блоги и новостные сайты, как правило, предполагают не только наличие соответствующего новостного раздела или раздела статей, но и выводят где-нибудь список последних новостей или статей. Для организации раздела Блог мы использовали ранее комплексный компонент Новости. В данном уроке мы реализуем вывод последних статей в сайдбаре главной страницы и используем для этого простой компонент Список новостей.

  • Урок №21. Класс ресайза изображений

Битрикс позволяет задавать отдельно картинку анонса статьи и большое изображение, которое будет показываться в тексте детального просмотра статьи. Однако, на нашем сайте предполагается и третий вариант изображения – миниатюра статьи. В этом уроке мы реализуем поставленную задачу, воспользовавшись классом для ресайза изображений из API Битрикса.

  • Урок №22. Вывод меню категорий

Практически любой сайт предполагает наличие меню и, нередко, таких меню может быть несколько. На создаваемом нами сайте есть разделы (категории), к которым относятся статьи. Соответственно, данные разделы нужно вывести на сайт, и они будут формировать меню категорий. В этом уроке мы воспользуемся компонентом section.list и выведем разделы сайта в меню категорий.

  • Урок №23. Поиск

Среди множества прочих компонентов Битрикс имеет в своем арсенале, конечно же, и компонент поиска. В этом уроке мы используем данный компонент для организации поиска по сайту.

  • Урок №24. Вывод слайдера

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

  • Урок №25. Вывод избранных статей

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

  • Урок №26. Облако тегов

Одним из популярнейших в прошлом элементов любого блога было облако тегов. Этот компонент достаточно удобен для посетителей и полезен для сайта с точки зрения SEO. У Битрикса есть специальный компонент для получения тегов, который так и называется – Облако тегов. В уроке мы воспользуемся им для решения задачи.

  • Урок №27. Страница контактов

Данный урок мы отведем под реализацию страницы контактов. Здесь мы воспользуемся еще одним штатным компонентом Битрикса – компонент Форма обратной связи. Также на страницу контактов мы выведем дополнительную контактную информацию, в частности, Google карту.

  • Урок №28. Галерея для постов

Следующий функционал, который мы реализуем для сайта – возможность прикрепления к статьям галереи. Для этого мы используем дополнительное свойство, которое позволит прикреплять к статьям картинки, а также подключим замечательный плагин fancyBox, который позволит показывать оригинальный картинки в красивом модальном окне.

  • Урок №29. Авторизация пользователей

Оставшиеся шесть уроков будут посвящены работе с аутентификацией пользователей и связанными с ней вещами. В данном уроке мы реализуем страницу авторизации пользователя.

  • Урок №30. Страница авторизованного пользователя

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

  • Урок №31. Компонент регистрации

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

  • Урок №32. Компонент восстановления пароля

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

  • Урок №33. Компонент изменения пароля

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

  • Урок №34. Профиль пользователя

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

  • Создание интернет-магазина

Список уроков второй части:

  • Урок №1. становка Битрикс

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

  • Урок №2. Создание инфоблоков каталога

В данном уроке мы создадим и настроим информационные блоки каталога. Что такое инфоблоки мы уже знаем из предыдущей части курса – это ключевое понятие в Битриксе и предназначены инфоблоки для хранения и упорядочивания динамических данных. В данном случае инфоблоки каталога будут хранить информацию о категориях и товарах интернет-магазина.

  • Урок №3. Создание простых товаров

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

  • Урок №4. Создание товаров с предложениями

В данном уроке мы познакомимся с еще одним типом товаров – товар с торговыми предложениями. Также вам может быть знаком такой тип товаров в качестве вариантов товаров. Суть проще понять на простом классическом примере. Допустим, магазин продает телефоны. Если конкретная модель телефона представлена в одном цвете – тогда это простой товар. Но также эта модель телефона может быть представлена в различных цветах, тогда вместо того, чтобы создавать несколько товаров одной модели и разных цветов, мы можем создать один товар с торговыми предложениями. Каждое торговое предложение в таком случае будет моделью конкретного цвета.

  • Урок №5. Создание шаблона

Итак, в предыдущих уроках мы провели необходимую подготовительную работу (создали инфоблоки, наполнили их данными). Теперь пришло время создания шаблона сайта для интернет-магазина. В этом уроке мы создадим и активируем шаблон создаваемого сайта.

  • Урок №6. Шаблон главной страницы

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

  • Урок №7-8. Создание меню

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

  • Урок №9-10. Комплексный компонент Каталог

Следующая пара уроков будет посвящена созданию шаблона каталога, а также подключению и настройке комплексного компонента каталог. Чем отличаются комплексные компоненты от простых – мы с вами уже знаем. Фактически, комплексный компонент – это набор простых компонентом. Например, комплексный компонент каталога включает в себя: вывод товаров, разделов, корзину, умный фильтр, оформление заказа и т.д. Данный компонент является, пожалуй, самым сложным по сравнению с прочими компонентами Битрикса. Он включает в себя десятки всевозможных настроек, с которыми мы и познакомимся далее.

  • Урок №11. Шаблоны каталога по умолчанию

Если вам нужен весь функционал стандартного интернет-магазина Битрикса, тогда наиболее оптимальным вариантом будет использовать стандартные шаблоны Битрикса, разбираясь в сотнях строк кода шаблона и изменяя оформлением под себя. Задача на самом деле – не из самых простых. В этом уроке мы вкратце рассмотрим стандартные шаблоны компонентов Битрикса, чтобы вы получили хотя бы приблизительное представление об их устройстве и смогли при необходимости их править.

  • Урок №12. Шаблон Simple для каталога

Стандартные шаблоны каталога Битрикса достаточно избыточны и сложны для понимания. Например, шаблон карточки в списке товаров включает в себя почти 700 строк кода. А ведь есть и другие шаблоны со своими сотнями строк кода. Разобраться во всех многочисленных условиях в этих шаблонах – достаточно проблематично. Поэтому желательно иметь под рукой какие-то шаблоны попроще с наличием базового функционала. В этом уроке мы используем такой шаблон. Разобраться в нем будет куда проще.

  • Урок №13. Оформляем шаблон категорий

При обращении к корню каталога Битрикс по умолчанию выводит категории (разделы) инфоблока каталога. В этом уроке мы оформим шаблон вывода разделов каталога показывая не только наименование категории, но и прикрепленную к ней картинку.

  • Урок №14. Компонент умного фильтра

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

  • Урок №15. Компонент хлебных крошек

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

  • Урок №16. Шаблон товаров категории

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

  • Урок №17-18. AJAX добавление товаров в корзину

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

  • Урок №19. Сортировка по цене

В этом уроке мы решим еще одну задачу, которая не решается из коробки Битрикса – сортировка товаров. Здесь мы добавим сортировку товаров по цене от дешевых к дорогим и наоборот. Также дополнительно мы добавим ограничение вывода товаров указанным количеством – стандартный блок «Выводить по…»

  • Урок №20-22. Свойства торговых предложений

Следующие три урока будут одними из самых насыщенных и сложных в данном курсе. В них мы будем заниматься выводом и красивым оформлением торговых предложений товаров. В нашем случае необходимо будет выводить цвета товаров торговых предложений. Также необходимо будет навесить скрипт, который бы обрабатывал выбор цвета давал возможность добавить в корзину выбранной торговое предложение. Здесь мы немного расширим вариант стандартного шаблона интернет-магазина Битрикса и получим возможность вывода не только картинок цветов, но и, при желании, html-код цвета.

  • Урок №23. Оформление умного фильтра

В данном уроке мы немного поработаем с шаблоном умного фильтра и оформим его достаточно близко к дизайну нашего шаблона интернет-магазина.

  • Урок №24. Карточка товара. Галерея

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

  • Урок №25. Карточка товара. Добавление в корзину

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

  • Урок №26. Добавление товара в хлебные крошки

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

  • Урок №27. Компонент оформления заказа

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