Как создавался сайт учебного центра ООО "Центр содействия бизнесу"

Неделю назад начал работу над новым веб-проектом учебного центра ООО "Центр содействия бизнесу".

Зарегистрировали домен https://uchebacenter.ru в сервисе atname.ru

Привязали к хостингу на хостере Beget.ru.

Далее пришлось лезть в теорию веб-дизайна, и для этого курс Алексея Захаренко "Мастер веб-дизайна 2011" как раз пригодился. Несмотря на то, что есть уже более новая версия этого курса, теория веб-дизайна остаётся неизменной, и все принципы, о которых рассказывает автор, также можно применять при создании любого сайта: одностраничника (как этот), авторского блога, Интернет-портала или электронного магазина.

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

После получения от заказчика информации о контенте:

и наброски макета на бумаге (как советовал Алексей Захаренко):

осталось только зарисовать макет сайта в фотошопе. Вот как выглядел готовый макет:

Далее всё сводилось к вёрстке полученного макета, и тут очень пригодился новый видеокурс от Андрея Бернацкого по HTML5 и CSS3, без которых уже не обходится ни один современный сайт.

Когда html-заготовка была готова, сайт выглядел примерно так:

Однако после исправления ошибки доменного имени на хостинге и правильной подгрузки CSS-стилей, сайт принял свой характерный вид.

Далее проводились работы по переходу на язык php, где уже использовались заготовки и сниппеты аналогичных сайтов, в т.ч. и rolar.ru.

Через phpMyAdmin создана база данных uchebacenter, в которой добавлена таблица с полями имени, номера телефона, даты и пр., а также заполнена соответствующими значениями.

В модели были написаны 3 функции которые могли добавлять записи в БД, устанавливать флаг "Выполнено" и удалять записи из таблицы телефонных заявок. Причём вторая и третья функции работали через админку, доступ в которую защищён специальным кодом.

Работа сайта Учебного цетра на PHP основывается на модели MVC - модель-вид-контроллер, где модель отвечает за работу с Базой данных, вид отвечает за вывод и отображение данных пользователю, а контроллер занимается управлением, переадресацией (редиректом) и всеми служебными операциями по работе сайта. Важно отметить, что точка входа на сайт осуществляется через файл index.php, а подгрузка различной информации и выполнение команд происходит за счёт умной переадресации благодаря правилам в .htaccess и специальной функции url_parsing();

Однако, несмотря на реализацию основной проверки пользовательских данных на php-сервере на хостинге, также остались моменты которые оказались неудобными для пользователей. Тогда пришлось взяться за программирование на Javascript и написать пару умных функций с применением библиотеки jQuery. Для этого были использованы материалы из урока Андрея Кудлая по "Валидации номера телефона по маске", материалы по основам Javascript и jQuery от Евгения Попова, курсу Виктора Гавриленко JavaScript и jQuery с нуля до профи, и уроку по созданию авторизации методом AJAX из курса Андрея Кудлая "Интернет-магазин под ключ". Благодаря применению этих знаний и скриптов удалось реализовать валидацию вводимых данных на "лету" на стороне клиента.

Для добавления слайдера с автоматической сменой изображений был использован сторонний скрипт ResponsiveSlides.js v1.54, который всегда можно скачать и установить с сайта http://responsiveslides.com.

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