Открыть веб-студию в Ярославле и не разориться. День первый

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

Фрилансер я до сегодняшнего дня. Совсем на днях меня окончательно задолбали вопросом: "Ты такая молодец, а до их пор работаешь на дядю. Когда откроешь своё?"

И я наконец решилась. С нуля, без мам, пап и кредитов открыть полноценную веб-студию в городе Ярославль. И в своем блоге на VC я буду подробно рассказывать, как я иду к своей цели.

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

Начало. Сапожник без сапог.

Какая же веб-студия без своего крутого сайта? Вот и я так подумала. И поэтому первое, что сделала — зарегистрировала домен 7oz.ru ну и создала группу ВК. Наверное, это самое банальное что можно было сделать =)

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

День первый. Начало разработки сайта

Я буду строить сайт на CMS InstantCms 2. Она привлекает своими возможностями, открытостью и легкой масштабируемостью.

Разработка будет вестись сразу на моём домене — htpps://7oz.ru, чтобы наблюдатели сами могли наблюдать, как я собираю сайт.

Приступим?

Самое первое что я сделала — это установила движок на хостинг. В процессе установки движка немного схитрила. Я заранее изменила у родного шаблона Modern название, заменила все языковые константы на новые, а шаблон админ-панели заставила наследоваться от нового шаблона. Такое решение позволит в будущем безболезненно обновлять версионность системы и без проблем добавлять новый функционал. Новый шаблон кстати назвала 7OZ — банально и просто)

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

Пишем свой контроллер

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

Создала контроллер с системным именем OZ (опять все банально) и пока не стала с ним изголяться — добавила в него лишь один языковой файл и папку для будущих блоков. Ниже показана структура шаблона

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

Начнем с логотипа. В InstantCms есть возможность давать различные опции для настройки всего шаблона. В файле опций удалим все, что связывало нас со старым шаблоном Modern и напишем свои опции. Пока их будет немного — но в будущем я буду их расширять.

Вот такие настройки у меня получились:

Сразу проверим работу опций и загрузим логотип. Все работает отлично.

Исходный код буду показывать в крайне редких случаях — сами понимаете, безопасность превыше всего )

Вот так выглядят эти опции в коде:

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

Ну а теперь приступаем к первому блоку

Первый блок (далее я буду называть его виджет) будет иметь системное имя header. Внутри папки с виджетом создаем еще одну папку с названием header и кладем туда два файла - options.form.php и widget.php

Внутри options.form.php будем писать опции нашего виджета, а внутри widget.php - объявлять переменные, функции и подключать другие контроллеры.

Также внутри папки с шаблоном по пути templates/7oz/controllers/oz/widgets также создадим папку с названием нашего виджета и назовем его точно также - header. Внутри создадим еще один файл - header.tpl.php

Так как я использую библиотеку bootstrap, то сразу разметим header.tpl.php, чтобы уже начинать заполнять его реальным кодом.

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

Пишем настройки для виджета

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

Помните, мы уже заранее написали настройки внутри опций шаблона, где мы загружали логотип? Давайте сразу в шаблоне Header выведем логотип и посмотрим, что получается:

Все настройки из шаблона доступны через переменную $this, что позволяет нам использовать эти настройки повсеместно. Это круто. Смотрим, что на сайте:

Отлично! Логотип выводится. Следующим нашим шагом будет создание навигации. В данном случае мы не будем использовать встроенные возможности системы для формирования навигации, а пропишем структуру меню жестко в шаблон. Почему так - объясним в следующих статьях.

Наш сайт после внесения меню в шаблон становится уже таким:

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

1) Логотип

2) Навигация

3) Кнопки соцсетей

4) Форма авторизации

5) Кнопка действия

Логотип и навигация у нас уже готовы. Давайте займемся формой авторизации. Пока не будем придумывать сильно сложную логику, реализуем это так: если в настройках виджета включена опция «Включить авторизацию», то выводим в шаблоне кнопку для авторизации. Также внутрь чекбокса «Включить авторизацию» засунем две дополнительные опции - заголовок кнопки для неавторизованных пользователей и заголовок кнопки для авторизованных пользователей.

После того как мы написали опции, внутри настроек виджета это стало выглядеть так:

А вот тот код, который выводит эти настройки:

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

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

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

Еще была мысль добавить настройки для внешнего вида, чтобы можно было менять фон, размер, скругление углов и пр. Но - пока решила отказаться от этого. Проверим работу кнопки на сайте:

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

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

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

Внутри виджета эти настройки стали выглядеть так:

Зеленая кнопка «Добавить» длбавляет в форму поля для создания новой иконки. Максимальный респект разработчикам InstantCms за столь мощный инструмент! Им мы кстати будем активно пользоваться в будущем, когда будем формировать наш шаблон.

Я пока добавила только одну иконку - вконтакте. Да, пока у меня всего одна соцсеть, в которой один пользователь - я =)

И вот так это стало выглядеть на сайте:

На этом почти все. Осталось добавить нужные классы Bootstrap, стилизовать мобильную версию и еще по мелочи.

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

Буду благодарная за критику, советы и вообще пожелания по работе) Прошу сильно не пинать - первый пост, первый опыт и все такое. Все что получается в ходе разработки можно смотреть на реальном сайте - https://7oz.ru