Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

ОГЛАВЛЕНИЕ

ВВЕДЕНИЕ

1. АНАЛИТИЧЕСКИЙ ОБЗОР

1.1 Определение требований к разрабатываемому сайту

1.2 Обзор сайтов с похожей тематикой

1.3 Обзор способов создания интернет-магазина

2. ПРОЕКТИРОВАНИЕ САЙТА

2.1 Выделение структурных элементов

2.2 Создание макета web-сайта

2.3 Выбор средств разработки

2.3.1 Выбор CMS

2.3.2 Выбор механизма управление каталогом товаров

2.4 Выбор инструментов разработки

3. РАЗРАБОТКА САЙТА

3.1 Подготовительные работы и настройка CMS

3.2 Верстка, программирование и внедрение в CMS

3.3 Описание структуры модулей сайта

3.4 Наполнение сайта

4. ТЕСТИРОВАНИЕ

4.1 Описание видов тестирования сайта

4.2 Результаты тестирования

5. РАЗРАБОТКА РУКОВОДСТВА ПОЛЬЗОВАТЕЛЯ И ВНЕДРЕНИЕ САЙТА

5.1 Разработка руководства пользователя

5.1.1 Добавление товаров

5.1.2 Управление товарами

5.1.3 Управление заказами

5.1.4 Управление отчетами

5.1.5 Настройки

5.2 Внедрение сайта

ЗАКЛЮЧЕНИЕ

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

ПРИЛОЖЕНИЕ 1



ВВЕДЕНИЕ

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

Компьютерная фирма, для которой создаётся сайт, оказывает услуги по настройке и обслуживанию программ для ЖКХ и ПО «1С: Предприятие».

Актуальность темы выпускной квалификационной работы обусловлена отсутствием у фирмы web - сайта.

Целями создания сайта являются:

1. Привлечение новых клиентов и партнеров;

2. Представление фирмы заказчика в Интернете;

3. Создание дополнительного канала продаж через Интернет;

4. Демонстрация каталога с программными продуктами и услугами заказчика;

5. Создание рекламных кампаний в Интернете для продукции и различных акций.

Чтобы достичь поставленные цели нужно выполнить ряд задач:

1. Проанализировать предметную область;

2. Провести проектирование сайта:определить структуру и создать макет сайта, а также выбрать средства и инструменты разработки;

3. Провести разработку сайта: разработать дизайн сайта, реализовать необходимый функционал (среда общения, возможность формирования заказа), произвести наполнение сайта;

4. Протестировать сайт и устранить дефекты;

5. Перенести сайт на хостинг заказчика.

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

Предполагаемый результат ВКР - web-сайт, прошедший тестирование разработчика и внедрённый в опытную эксплуатацию.

По материалам выпускной квалификационной работы был сделан доклад на международной научной конференции «Молодые исследователи - регионам» 17 апреля 2018 года, тезисы доклада были опубликованы.



1. АНАЛИТИЧЕСКИЙ ОБЗОР

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

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

Веб-страницы написаны на языке разметки гипертекста HTML. Они содержат некоторую информацию: изображения, текст, видео-, аудиоматериалы и другое. Страницы сайта связаны гиперссылками.

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

CMS - «ContentManagementSoftware» («программное обеспечение для управления содержимым»).

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

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

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



1.1 Определение требований к разрабатываемому сайту

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

К функциональности сайта были предъявлены следующие требования: возможность ведения каталога товаров с их описанием, оформление заказа на сайте в режиме онлайн, возможность оставления комментариев, наличие кнопок из социальных сетей и «облака меток», в котором отображаются самые популярные статьи сайта.

Технические требования:

1. Количество одновременно работающих пользователей до 50;

2. Возможность оформления заказа на сайте в режиме онлайн;

3. Размещение сайта на хостинге;

4. Доменное имя сайта второго уровня.

Основные функции, которые сможет выполнить пользователь на сайте:

· Узнать последние новости фирмы;

· Узнать контактную информацию и расположение фирмы;

· Ознакомиться с каталогом предоставляемых программных продуктов и услуг;

· Оформить заказ в режиме онлайн;

· Прокомментировать товар;

· Узнать отзывы других посетителей о товаре.

Основные функции, которые сможет выполнить администратор сайта на сайте, кроме перечисленных выше:

· Просмотреть статистику посещаемости ресурса;

· Управлять заказами;

· Добавлять новые товары и статьи на сайт;

1.2 Обзор сайтов с похожей тематикой

Первый сайт, который в качестве примера функциональности и оформления дизайна, заказчик предложил рассмотреть - это сайт компании «Алгоритм». Сайт выполнен в светлых тонах. Навигационноеменю расположено в «шапке» сайта. Информации на сайте достаточно, чтобы сложилось полное представление о деятельности компании. На главной странице отображаются последние новости. Товары отсортированы по категориям. Удобная форма обратной связи. Есть возможность оформления заказа в режиме онлайн. Используется модуль «Интернет-магазин».

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

Недостатки расположения сайта на платформеUCOZ:

· Возникновение трудностей, связанных с переносом сайта на другой хостинг;

· Ограничения по возможностям: нельзя встроить дополнительный модуль или использовать один и тот же несколько раз;

· Все сайты проходят модерацию(сайт не принадлежит создателю полностью);

· Высокая стоимость по сравнению с арендой пространства на хостинге;

· Служба технической поддержки отвечает редко.

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

· Отсутствие горизонтального меню в «шапке» сайта;

· Отсутствие адаптивной вёрстки;

· Отсутствие социальных кнопок и обратной связи, не считая указания почтового адреса на странице «Контакты».

1.3 Обзор способов создания интернет-магазина

В последнее время стало очень популярно покупать и продавать товары в сети Интернет. Появляется всё больше и больше интернет-магазинов. Соответственно, появляются всё новые способы их создания. По причине того, что заказывать магазины в web-студиях стоит больших денежных затрат, многие люди хотят создать магазин самостоятельно.

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

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

Преимущества разработки данным способом заключаются в том, что:

· Интернет-магазин разрабатываетсяпод конкретные требования, нужды и условия работы, то он будет содержать только необходимый функционал;

· У такого интернет-магазина будет высокая скорость работы;

· К интернет-магазину можно применить любой дизайн (при условии обладания всеми необходимыми технологиями, и готовым дизайном);

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

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

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

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

· Необходимо выбрать подходящий под наши задачи движок (из известных это opencart, prestashop, битрикс, shop-script и так далее)

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

· Произвести настройку движка, наполнить его контентом, сделать таким образом, чтобы на локальном компьютере магазин уже работал кактребуется;

· Далее необходимокупитьпространство на хостинге, либо арендовать сервер и купить домен;

· Следующим шагом по протоколу ftp загрузить все с локального компьютера уже на реальный сервер (на хостинг или на тот сервер, который мы арендовали);

· Далее нужно настроить работу магазина на сервере и убедиться в правильной работе магазина.В итоге получается магазин, работающий в интернете на реальном сервере.

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

· Быстрая скорость разработки. Магазины такого типа можно создать за один-два дня. Уставить на хостинг/сервер, настроить и применить какой-либо шаблонный дизайн. Интернет-магазин уже будет готов к работе;

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

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

Из недостатков здесь можно выделить следующие:

· Необходимы определенные знания, такие как создать локальный сервер, базу данных, как развернуть движок на сервере, как его настроить, купить хостинг,загрузить сайт на него;

· Есть потенциальные проблемы с безопасностью. Особенно это актуально для бесплатных движков.Если движок бесплатный и открытый (общедоступный), то у него есть потенциальные проблемы с безопасностью и с уязвимостью, потому что любой хакер, может этот движок взять, изучить, найти какие-то «дыры» в нем и затем, зная их, может взламывать любой магазин, построенный на этом движке. Конечно, разработчики постоянно следят за такими уязвимостями в движках и выпускают обновления, устраняющие их. Если вовремя устанавливать обновления для движка, то вероятность того, что его взломают меньше, но она всё равно она сохраняется, потому что, во-первых,можно не успеть обновить движок, во-вторых, новая уязвимость может быть не известна даже разработчикам и так далее. Таким образом, есть определенные проблемы с безопасностью при таком подходе;

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

· Хорошие движки стоят хороших денег. Для того, чтобы получить хороший движок, часто приходится заплатить;

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

Это был второй способ, который уже гораздо проще и быстрее первого, но все-таки он требует определенных знаний и содержит в себе определенные недостатки.

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

Чтобы создать интернет-магазин при таком подходе, нужнозарегистрироваться на определённом SaaS сервисе, после чего станет доступен определенный конструктор. Нужно выбрать шаблон магазина, настроить параметры, добавить товары и указать в настройках свой домен. На этом домене и начнет работать магазин. Таким образом,никаких сложных технических действий производить не нужно. Данный способ является еще более простым вариантом. Здесь вообще не надо никаких технических знаний, при условии, что мы используем стандартные шаблоны. Таких сервисов сейчас появляется все больше и больше. Самые известные из них это: InSales и Shopify. На них создается огромное количество магазинов. Из преимуществ данного подхода можно отметить следующие:

· Быстрота разработки магазина без технических знаний. Таким способом можно за час создать полноценный магазин с товарами, настроенный на нашем домене (при условии, что он у насбыл куплен заранее, и прописаны определенные dns сервера). То есть очень быстро можно открыть магазин этим способом;

· Как правило, в SaaS сервисыуже интегрированы все современные способы оплаты и часто даже способы доставки. Здесь не нужно заботиться о том, что нужно прикрепить к магазину, например, прием оплаты через robokassa или через payOnline системы. Достаточно в настройках указать способы оплаты и по каждому способу нужно вписать свои данные от каждой платежной системы. Это гораздо упрощает весь процесс создания интернет-магазина;

· Сервис выполняет автоматическое резервное копирование и предоставляет, как правило, безлимитные ресурсы (безлимитный трафик, безлимитное дисковое пространство);

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

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

· Наличие готовых приложений. Как правило, к таким сервисам привлекаются сторонние разработчики, чтобы для этих сервисов писались приложения. Самый простой пример, этой интеграции с «1С». Есть довольно популярные системы «1С:предприятие», «1С:торговля», и часто в SaaS сервисах есть интеграция с такими системами через специальные приложения. Как правило, эти приложения тоже платные. Нужно каждый месяц платить за их использование определённую сумму. Взамен, происходит интеграция между «1С» системой этого предприятия и его интернет-магазином, чтобы все данные синхронизировались. Таких интеграций очень много, например, с разными почтовыми системами. Приложений, которые позволяют расширить функционал этого сервиса, довольно много. Если изначально чего-то не хватает, то можно за счет внешнего приложения расширить;

· Быстрая работа сервиса. Сервис оптимизирован таким образом, что все работает быстро даже при большом количестве посетителей. Это происходит благодаря использованию определенных технологий, в том числе SDN;

· Также стоит отметить безопасность, потому что система закрытая и злоумышленник не знает, как она устроена, поэтому емусложно её взломать.

Недостатками данного подхода являются следующие:

· Привязка к конкретному сервису. Если мы создаём магазин в определённом сервисе, то его уже будет трудно перенести на другой сервис, поэтому мы должны максимально доверять выбранной площадке. Нужно выбирать проверенные системы, которые уже давно на рынке, у которых много клиентов, потому что мы будем зависеть от них;

· Также стоит отметить наличие недостатков конкретного сервиса, потому что таких сервисов сейчас много. У каждого из них есть свои какие-то мелкие и крупные недостатки. Именно эти недостатки придется принять при выборе конкретного SaaS сервиса.

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

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

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

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



2. ПРОЕКТИРОВАНИЕ САЙТА

2.1 Выделение структурных элементов

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

Структура web-сайта изображена на рисунке 1.1.

Рисунок 1.1 - Структура web-сайта фирмы

2.2 Создание макета web-сайта

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

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

Рисунок 2.1 - Макет web-сайта для фирмы

2.3 Выбор средств разработки

Для разработки любого сайта потребуется HTML - язык разметки гипертекста (HypertextMarkupLanguage). На этом языке браузеру сообщается, что и в каком виде отображать на странице. Это может быть какой-либо текст, картинки, таблицы, формы и какие-нибудь другие элементы.

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

Для динамического формирования содержимого HTML - документа применятся языки, описанные ниже.

Для создания скриптов, работающих на стороне сервера, используется язык PHP. Он способен обрабатывать данные HTML-форм, динамически генерироватьHTML-страницы и тому подобное. У PHP есть множество встроенных функций, позволяющих работать различными веб-серверами (HTTP сервер), серверами баз данных и файловой системой сервера.

Также для создания интерактивных страниц сайтов в браузере был разработан объектно-ориентированный язык программирования JavaScript. Приложения, написанные на этом языке, могут выполняться как на стороне клиента, так и на стороне сервера. Основными областями применения являются: динамическое создание HTML-документа с помощью сценария, проверка на клиенте правильности заполняемых пользователем полей форм HTML-документа до передачи их на сервер, создание динамических HTML-страниц с динамическими стилями.

Поскольку сайт будет не одностраничным, а на нем требуется некоторая функциональность (ведение рубрикатора, добавление статей, работа с товарами и тому подобное), поэтому мне потребуется система управления содержимым (CMS).

В 2017 году «Рейтинг Рунета» объявил рейтинг самых популярных CMS. Он изображен на рисунке 2.3.1. Он учитывал тематический индекс цитирования и посещаемость ресурсов, созданных с помощью разных систем управления контентом. Среди бесплатных CMS победителем был «WordPress» и это можно объяснить следующими его преимуществами:

· Интерфейс админ-панели рассчитан на рядового пользователя;

· Отличная SEO оптимизация;

· Множество бесплатных плагинов и шаблонов с открытым кодом;

· Частое обновление, устранение уязвимостей;

· Большое количество информации в Сети по работе с WordPress;

· Управление блогом откуда угодно - наличие официальных программ WordPress на системах Android, iOs, и других.

Рисунок 2.3.1. - Рейтинг самых популярных CMS в 2017 году по данным «Рейтинг Рунета».

Рейтинг систем управления сайтом (CMS -- ContentManagementSystem, движок для сайта) строится на основе данных, которые собирает аналитический портал рынка веб-разработок «CMS Magazine». Эти данные через личный кабинет вносят веб-студии. Формируются рейтинги коробочных коммерческих CMS, opensource CMS, студийных CMS.

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

Свободные (open-source) CMS -- это программное обеспечение, отвечающее следующим условиям: программу можно свободно использовать с любой целью; доступность исходного текста программы; можно свободно распространять копии программы; программу можно свободно улучшать и публиковать свою улучшенную версию.

2.3.1 Выбор CMS

Произведём сравнение трех самых распространенных бесплатно распространяемых CMS, которые были определены в предыдущем пункте.

Для начала, попробуем выделить общие черты у WordPress, Joomla и Drupal.

Joomla, Drupal и WordPress являются бесплатным программным обеспечением с открытым исходным кодом. Все три написаны на PHP.

Все три используют MySQL вкачестве СУБД. WordPress поддерживает только MySQL, в то время как Joomla и Drupal поддерживают другие системы управления базами данных.

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

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

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

Рассмотрим, чем отличаются WordPress, Joomla и Drupal.

1) Установка.

Большинство людей, создающих свои сайты, являются обычными пользователями. Удобство в использовании является наиболее важным фактором для большинства из них.Большинство хостинг-провайдеры предлагают установку WordPress, Joomla и Drupal в один клик.

2) Темы и плагины.

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

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

Также можно найти множество премиум-тем для, созданных сторонними разработчиками тем. Эти платные темы поставляются с премиум-опциями поддержки.

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

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

Тем не менее, количество этих шаблонов и расширений не так велико, как у WordPress. Поэтому найти идеальный шаблон и расширение вам будет немного сложнее.

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

У Drupal та же проблема с доступностью тем и модулей. Пользователям нужно покинуть свой сайт, чтобы найти модуль или тему, которую они хотят добавить, а затем определить URL-адрес zip-файла проекта. Затем нужно ввести URL на странице модулей или тем, чтобы осуществить установку.

Существуют модули Drupal для чего угодно, и регулярно появляются новые. Тем не менее, общее количество модулей меньше, чем у WordPress.

3) Вариантыподдержки.

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

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

Также можете получить платную поддержку таких платформ, как Upwork, Fiverr и Elance, где вы сможете нанять профессионалов в сфере WordPress со всего мира, чтобы быстро решить проблему по разумной цене.

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

Помимо поддержки сообщества, существуют сторонние ресурсы, а также проекты по вопросам развития, которые могут оказать вам помощь.

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

Drupal имеет активное сообщество фанатов и пользователей. Так же, как для WordPress и Joomla, здесь вы найдете все варианты поддержки сообщества. Доступна обширная документация, форум поддержки, списки рассылки, группы пользователей, IRC-чаты. Везде вы сможете получить консультацию и бесплатную помощь.

Неподготовленному пользователю нелегко создать проект на этой CMS. Если же он хочет нанять профессионального разработчика, придется платить больше, чем разработчику на WordPress или Joomla. Премиум-темы на Drupal стоят на порядок дороже, чем темы на WP.

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

4) Поддержка локализации и мультиязычность

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

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

WordPress доступен более чем на 53 языках. Новые языки можно установить в панели администрирования всего одним кликом мыши:

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

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

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

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

5) Безопасность

Безопасность является важным фактором при выборе CMS для сайта.

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

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

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

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

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

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

Drupal серьезно относится к безопасности. Разработчики публикуют информацию об обнаружении и устранении уязвимостей. Существует мнение, что Drupal является более безопасной платформой, потому что мы не так часто слышим о взломе сайтов на Drupal. Но это связано с тем, что Drupal не так популярен, как Joomla или WordPress.

Сравнение DrupalJoomla и WordPress -- все три платформы соответствуют современным стандартам безопасности.

6) SEO дружественность

C SEO в Joomla дела обстоят не очень хорошо.Отдельно стоит поговорить о дублировании страниц. Пожалуй, это самая главная проблема в Joomla.

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

Во-вторых, достаточно написать после адреса сайта ID материала (статьи) и после него любой бессвязный набор символов -- и вы попадете по этому URL-у на статью. Не 404-я ошибка, не редирект, а статья! По любому бессвязному адресу, и их может быть вообще неограниченное количество! В итоге в индекс поисковиков попадает большое количество дублей.

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

У WordPress с SEO всё хорошо. Грамотная и гибко настраиваемая система формирования URL-ов. Если посмотреть в индекс Google, то можно увидеть, что каждая страница представлена в единственном экземпляре, все четко и красиво.

В последних версиях Joomla появились ЧПУ (человекопонятныеурлы). Они привязаны к меню, это не удобно и странно . Они имеют вид адрес-сайта/пункт-меню/название-статьи. Плохо то, что гибкости нет -- если вы перенесете статью в другую категорию, то сменится содержащий ее пункт меню (который часто привязан к категории) и ее URL. В WordPress-е же из коробки можно сделать, чтобы адрес статьи имел вид адрес-сайта/название-статьи, без лишних промежуточных сущностей. И все, проблемы больше нет.

Еще момент. Если понадобется сделать мультиязычный сайт, то возникнет проблема. Потому, что до этого был одноязычный сайт со сложившейся структурой URL-ов, проиндексированный поисковиками, а при переходе на мультиязычность, Джумламеняем всю структуру, делая старые URL-ы нерабочими. И хотя этот вопрос решается довольно просто, по дефолту Joomla все ломает. Почему, почему дефолтные варианты настроек такие странные, а чтобы выбрать оптимальные опции -- нужно копаться в дремучих дебрях админки?

А еще для WordPress есть плагин Yoast SEO, который позволяет вывести оптимизацию сайтов на новый уровень.

Drupal, и Joomla, и WordPress являются надежными системами управления контентом. Drupal и Joomla по умолчанию поставляются с большим количеством встроенных функций, чем WordPress. Тем не менее, WordPress «бьет» их простотой в использовании, большим количеством плагинов и тем, а также более развитым сообществом. Считаю, что большинству пользователей будет намного проще работать с WordPress, нежели с Joomla или Drupal, поэтому буду разрабатывать сайт на его основе.

2.3.2 Выбор механизма управление каталогом товаров

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

Далее перечислю его преимущества по сравнению с аналогами:

1) Обширные опции оплаты;

Возможностью принимать к оплате большинство банковских карт, PayPal, BACS (банковские переводы), и наличные при доставке.

2) Возможность контроля над магазином;

WooCommerce даёт вам полный контроль над магазином, от расчётов налогов и уровня складских запасов до управления аккаунтами пользователей.

3)Безопасность;

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

4) Неограниченное количество товаров и категорий;

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

5) Адаптация под мобильные устройства;

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

6) Улучшенная система отчетности и анализа

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

7) Поддержка различных категорий доставки

WooCommerce позволяет задать несколько вариантов доставки и налогообложения в зависимости от страны проживания покупателя и размера упаковки

8) Улучшенная система оценок

Существует система отзывов и оценок от реальных покупателей. Благодаря ей повышается уровень доверия со стороны пользователей к магазину.

9)Удобный и понятный пользовательский интерфейс

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

2.4 Выбор инструментов разработки

Для удобства разработки буду применять инструметы, представленные ниже. Все они распространяются бесплатно.

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

WinSCP- это графический клиент SFTP (SSH FileTransferProtocol) для Windows с открытым исходным кодом. Он также поддерживает [устаревший] протокол SCP (SecureCopyProtocol). Предназначен для защищённого копирования файлов между компьютером и серверами, поддерживающими эти протоколы.

VisualStudioCode -- редактор исходного кода, разработанный Microsoft для Windows, Linux и macOS. Позиционируется как «лёгкий» редактор кода для кроссплатформенной разработки веб- и облачных приложений. Включает в себя отладчик, инструменты для работы с Git, подсветку синтаксиса, IntelliSense и средства для рефакторинга. Распространяется бесплатно, разрабатывается как программное обеспечение с открытым исходным кодом, но готовые сборки распространяются под проприетарной лицензией.

XAMPP -- кроссплатформенная сборка веб-сервера (развитие LAMP), содержащая Apache, MySQL, интерпретатор скриптов PHP, язык программирования Perl и большое количество дополнительных библиотек, позволяющих запустить полноценный веб-сервер.

Для удобной разработки на PHP буду использовать trial версию среды разработки PHPStorm, которая предоставляется бесплатно на 30 дней.Данная среда позволяет редактировать код, написанный на языках PHP, HTML, JavaScript и CSS. В ней присутствуют: автоматическое дополнение кода, поддержка стандартов оформления кода, автоматизированные средства рефакторинга. Имеется возможность анализа кода на лету, которая помогает предотвратить ошибки в коде, присутствует интеграция с системами управления версиями. Еще одна очень полезная функция этой среды - возможность удаленного развертывания приложений и автоматической синхронизация с использованием FTP, SFTP, FTPS и др. протоколов.

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

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



3. РАЗРАБОТКА САЙТА

3.1 Подготовительные работы и настройка CMS

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

Для того, чтобы сайт заработал, нужно произвести установку Wordpress. Для этого в панели управления хостинга, в разделе установки приложений нужно выбрать его, указать каталог, в который необходимо установить и нажать на кнопку установки. Таким простым образом произойдет установка движка. Чтобы сайт был доступен в сети Интернет с адресом технического домена, нужно произвести установку именно в его каталог.

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

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

Для осуществления возможности ведения каталога с программными продуктами и оформления заказа в режиме онлайн, потребуется установить плагин WooCommerce, возможности которого были описаны ранее. Чтобы его установить нужно в панели управления сайтом WordPress перейти в раздел управления плагинами и нажать на кнопку установки нового плагина. Произойдет переход в каталог доступных для установки плагинов, среди которых можно найти нужный нам WooCommerce и нажать на кнопку установки. Через несколько минут должно показаться уведомление об успешной установке плагина, после чего его необходимо активировать, нажав на кнопку активации. В процессе установки WooCommerce произойдет начальная настройка, которая касается типа товаров (например, виртуальный или скачиваемый), способов доставки и оплаты и так далее. Таким же способом нужно произвести установку всех необходимых плагинов.

Также сразу нужно произвести настройку Wordpress в панели управления, которая касается названия и описания сайта, настроить вид, в котором будут формироваться единые указатели ресурса (URL) и множество других настроек.

Как упоминалось ранее, разработка сайта будет происходить в среде PHPStorm, а благодаря имеющейся возможности удаленного развертывания приложений исходные файлы будут храниться сразу на хостинговом пространстве. Автоматическая синхронизация позволяет обновить файлы на хостинге с учетом их изменений в среде разработки с использованием протокола FTP. Таким образом можно сразу увидеть все изменения. На мой взгляд, такой подход гораздо удобнее, так как позволяет тратить намного меньше времени на перенос файлов, чем при ручном копировании через файловые менеджеры.

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

Чтобы настроить проект с подключением по FTP нужно выполнить рад шагов:

1) Пристартесредывыбратьпункт «Сreate new project from existing files»;

2) Выберитепунктсозданияпроектапоследующемусценарию: Web server is on remote host, file are accessible via FTP/SFTP/FTPS;

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

4) На данном шаге требуется заполнить следующие поля: Name - Имя проекта, Type - Тип подключения (combobox), FTP host - адреса сайта в интернете, либо по IP-адресу, Port - порт в стеке протоколов TCP/IP, через который будет происходить подключение, Username - имя пользователя, который подключается, Password - пароль подключающегося пользователя и Webserverroot URL - Корневой URL сайта;

5) Выбрать папку на хостинге, которая подлежит редактированию;

6) Нажать «Finish».

Это была подготовка перед вёрсткой и программированием. Перейдем их реализации.

3.2 Верстка, программирование и внедрение в CMS

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

При разработке шаблона для сайта будет использоваться технология WordPress под названием «Дочерняя тема» [5]. Это тема расширяет функционал другой темы, называемой родительской темой, и позволяет изменять или дополнять функционал родительской темы. Чтобы создать дочернюю тему нужно: создать новую папку, положить в неё соответствующим образом написанный файл style.css. После этого можно изменить дочернюю тему меняя внешний вид и верстку родительской темы, но не меняя ее файлов. Таким образом, когда родительская тема обновляется, ваши изменения сохраняются.

Дочерняя тема размещается в своей собственной папке внутри папки wp-content/themes. Она может содержать как style.css, так и дополнительные файлы, относящиеся к теме: style.css (обязательно), functions.php (опционально), файлы шаблона (опционально) и другие файлы (опционально).

style.css - единственный необходимый файл в дочерней теме. Он обеспечивает информационный заголовок, по которому WordPress опознает дочернюю тему, и он заменяет style.css родительской темы. Информационный заголовок файла style.css созданной дочерней темы изображен на рисунке 4.1.

Рисунок 4.1 - Заголовок файла style.css дочерней темы

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

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

Дочерняя тема может заменить любой родительский файл шаблона просто создав файл с таким же именем. Эта особенность WordPress позволяет изменять файлы шаблонов родительской темы без непосредственного их редактирования, так что все изменения сохранятся при обновлении родительской темы.

В дополнение к файлам style.css, functions.php и файлам шаблонов дочерняя тема может использовать любые типы файлов полноценных тем, если они правильно подключены. Например, дочерняя тема может использовать иконки и изображения, которые подключены в файле стилей, файлы JavaScript, дополнительные PHP файлы, вызываемые из шаблонов или functions.php.

В качестве примера изменения функционала шаблона через файл functions.php можно привести добавление блока социальных кнопок от Яндекса. Технология называется «Поделиться». Она предоставляет разработчикам возможность разместить блок различных социальных кнопок, которые помогут посетителям сайта быстро публиковать ссылки на интересные им страницы в социальных сетях и блогах. Пример кода показан на рисунке 4.2, а пример отображения на сайте показан на рисунке 4.3.

Рисунок 4.2 - Пример добавления социальных кнопок на сайт



Рисунок 4.3 - Отображение социальных кнопок на сайте

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

3.3 Описание структуры модулей сайта

Простая web-страница WordPress состоит из трех основных блоков: заголовок (header), контент и подвал (footer). Очень часто требуется четвёртый блок - боковая панель. Каждый из этих блоков формируется на основе файла шаблона текущей темы WordPress.

Заголовок содержит всю информацию, которая должна быть наверху сайта внутри тега <head>. Это могут быть теги <doctype>, <meta>, ссылки на таблицы стилей, открытый тег <body> и видимый заголовок сайта (название сайта, навигационное меню, логотип, описание сайта и так далее).