ОПИСАНИЕ ПРОЕКТА

1. Клиентская часть

Клиентская часть реализует пользовательский интерфейс, формирует запросы к серверу и обрабатывает ответы от него. В веб-разработке «сторона клиента» относится ко всему в веб-приложении, что отображается или происходит на устройстве конечного пользователя. Это включает в себя то, что видит пользователь, например, текст, изображения, формы, кнопки и остальную часть пользовательского интерфейса, а также любые действия, которые приложение выполняет в браузере пользователя. Языки разметки, такие, как HTML и CSS, интерпретируются браузером на стороне клиента. Клиентская сторона также известна как фронтенд, хотя эти два термина не означают одно и то же. Клиентская сторона относится исключительно к месту, где выполняются процессы, в то время как фронтенд относится к видам процессов, которые выполняются на стороне клиента.

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

Пользовательский интерфейс разрабатываемого интернет-магазина написан на этом языке текстовой разметки с использованием каскадных таблиц стилей.

HTML (Hypertext Markup Language) - это язык для описания структуры веб-страниц. Язык разметки HTML используется для определения текстового документа внутри тегов, который определяет структуру веб-страницы. HTML используется браузером для манипулирования текстом, изображениями и другим содержимым для отображения его в требуемом формате. Элементы HTML являются «строительными блоками» страниц. С помощью конструкций HTML изображения и другие объекты, такие как интерактивные формы, могут быть встроены в отображаемую страницу. HTML предоставляет средства для создания структурированных документов, определяя структурную семантику для текста, такого как заголовки, абзацы, списки, ссылки, цитаты и другие элементы. HTML-элементы обозначены тегами, которые непосредственно вводят контент на страницу. Другие теги окружают и предоставляют информацию о тексте документа и могут включать другие теги в качестве подэлементов. Браузеры не отображают теги HTML, но используют их для интерпретации содержимого страницы.

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

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

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

Рисунок 1 – Главная страница интернет-магазина

Для просмотра сайта не обязательно быть авторизованным. Авторизация необходима для дальнейшего заказа товаров. При нажатии на иконку «Личный кабинет», если пользователь не авторизован или не зарегистрирован, его приветствует страница авторизации с полем «Войдите в систему» (см. рис.2) или кнопка «Создайте аккаунт», после нажатия на которую открывается страница регистрации (см. рис.3). После прохождения авторизации или регистрации URL-ы для работы с корзиной становятся доступными.

Рисунок 2 - Страница для выполнения авторизации

Рисунок 3 - Страница регистрации

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

Рассмотрим некоторые разделы сайта.

Например, одна из представленных категорий – «Органика».

При нажатии на эту категорию в баре, мы попадаем на отдельную html-страничку, на которой располагаются товары органической косметики (см. рис.4).

Рисунок 4 – Страница категории «Органика»

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

Рисунок 5 – Страница описания товара

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

Рисунок 6 – Товары, которые могут заинтересовать

Также на странице описания есть кнопка «Добавить в корзину», при нажатии на которую пользователя переадресовывает на html-страницу, где он выбирает необходимое количество товара (см. рис.7).

Рисунок 7 – Страница добавления товара в корзину

После добавления товара мы попадаем на страницу Корзины, где находятся все выбранные пользователем товары. Здесь мы видим: название продукта, его количество, конечная цена за несколько единиц продукта, а также итоговая сумма всего заказа. Ещё в Корзине предусмотрена возможность удаления (см.рис.8).

Рисунок 8 – Страница корзины

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

Рисунок 9 – Страница оформления заказа

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

Рисунок 10 – Личный кабинет

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

Рисунок 11 – Навигационный бар

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

Если нажать на ссылку «Пользователи», то мы попадём на html-страницу, где отображаются все пользователи, которые зарегистрированы на сайте (см. рис.12). При разработке также была предусмотрена возможность редактирования аккаунта (см.рис.13), при этом админ может изменять роль пользователя, то есть, он может присвоить роль админа, а также и вовсе удалить аккаунт.

Рисунок 12 – Пользователи

Рисунок 13 – Страница редактирования аккаунта

В свою очередь, при нажатии на ссылку «Добавить продукт», нас перенаправит на форму для добавления товара (см.рис.14).

Рисунок 14 – Форма добавления продукта

Если же кликнуть на ссылку «Добавить категорию», мы окажемся на форме добавления категории. Для удобства справа находится блок со всеми уже существующими категориями (см.рис.15). При нажатии на ссылку «Все категории», нас перенаправит на html-страницу со всеми уже существующими категориями (см.рис.16).

Рисунок 15 –Добавление категорий

Рисунок 16 – Страница всех категорий

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

1. Серверная часть   

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

HTTP — широко распространённый протокол передачи данных, изначально предназначенный для передачи гипертекстовых документов (то есть документов, которые могут содержать ссылки, позволяющие организовать переход к другим документам).

Аббревиатура HTTP расшифровывается как HyperText Transfer Protocol, «протокол передачи гипертекста». В соответствии со спецификацией OSI, HTTP является протоколом прикладного (верхнего, 7-го) уровня.

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

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

Как правило, передача данных по протоколу HTTP осуществляется через TCP/IP-соединения. Серверное программное обеспечение при этом обычно использует TCP-порт 80 (и, если порт не указан явно, то обычно клиентское программное обеспечение по умолчанию использует именно 80-й порт для открываемых HTTP-соединений), хотя может использовать и любой другой.

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

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

Ruby on Rails (RoR) — фреймворк, написанный на языке программирования Ruby, реализует архитектурный шаблон Model-View-Controller для веб-приложений, а также обеспечивает их интеграцию с веб-сервером и сервером баз данных. Является открытым программным обеспечением и распространяется под лицензией MIT.

Базируется на следующих принципах разработки приложений:

• максимальное использование механизмов повторного использования, позволяющих минимизировать дублирование кода в приложениях (принцип Don’t repeat yourself);
• по умолчанию используются соглашения по конфигурации, типичные для большинства приложений (принцип Convention over configuration).

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

Основными компонентами приложений на Ruby on Rails являются модель (англ. model), представление (англ. view) и контроллер (англ. controller). Ruby on Rails использует REST-стиль построения веб-приложений.

Контроллер в Rails — это набор логики, запускаемой после получения HTTP-запроса сервером. Контроллер отвечает за вызов методов модели и запускает формирование представления. Отличительная черта Rails заключается в том, что они предоставляют возможность создавать контроллеры и модели не только вручную, но и с помощью команды терминала rails g controller(model). Все классы контроллеров хранятся в отдельных файлах в папке app/controllers и наследуются от класса ApplicationController.  В курсовом проекте представлены такие контроллеры как: users_page_controller, products_controller, boughts_controller, categories_controller, characteristics_controller, wains_controller.

В Ruby on Rails представление описывается при помощи шаблонов ERB — файлов HTML с дополнительными включениями фрагментов кода Ruby (Embedded Ruby, или ERb). Вывод, сгенерированный встроенным кодом Ruby, включается в текст шаблона, после чего получившаяся страница HTML возвращается пользователю. Это как раз-таки то, что отображает всю клиентскую часть, и помогает пользователю эффективно взаимодействовать с серверной частью.

Никакое веб-приложение практически невозможно построить без использования базы данных, где хранятся данные пользователей. RoR поддерживает такие БД как: MySQL, PostgreSQL, Firebird, DB2, Oracle и Microsoft SQL Server, а также SQLite.

При разработке сайта интернет-магазина использовалась база данный SQLite. Основные таблицы из базы данных приложения: products, boughts, categories, users и др. Каждой из таблиц соответствует модель в приложении: product, bought, category, user. Модели позволяют запрашивать данные из таблиц, а также вставлять новые записи в таблицу.