Состав и организация web- приложения

 

Структура сайта — это схема размещения его основных разделов и страниц относительно друг друга. Это план-схема, которая показывает, каким образом строится сайт, логическая связка его страниц [5].

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

 

 

Рисунок 3.1 — Общая схема сайта

 

Для создания web-приложения была использована логическая структура сайта, приведенная на рисунке 3.2.

 

 

Рисунок 3.2 — Логическая структура сайта

 

Стартовая страница содержит ссылки на следующие разделы: «О приюте», «Наши животные», «Чтобы помочь приюту».

Раздел «О нас» предоставляет информация о самой организации, то есть ее вид деятельности, её постоянных жильцов, номер телефона, адрес электронной почты и сами адреса расположения организации.

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

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

Физическая структура сайта описывает размещение файлов и папок на диске компьютера. Физическая структура сайта представлена на рисунке 3.3.

 

 

Рисунок 3.3 — Физическая структура сайта

 

3.2 Разработка структуры и макета страниц сайта

 

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

Одной из важных составляющих графического интерфейса является юзабилити.

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

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

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

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

Web-приложение «Социальный приют для бездомных животных» содержит три раздела.

Макеты для разделов «О приюте», «Наши животные», «Чтобы помочь приюту» построены по одному принципу, но имеют разное наполнение. Макет страницы представлен на рисунке 3.4.

 

 

Рисунок 3.4 — Макет разделов «О приюте», «Наши животные», «Чтобы помочь приюту»; 1 — логотип сайта; 2 — область навигации; 3,8 — информация; 4,7 — изображение; 5,10 — кнопки; 6 —заголовок;
11 — подвал

 

На рисунке 3.5 макет раздела «Наши животные».

 

 

Рисунок 3.5 — Макет раздела «Наши животные»: 1 — логотип сайта; 2 — область навигации; 3,7 — информация; 4 — изображение; 5 — кнопки; 6 — заголовокк атегорий товара; 8 — карточки; 10 — подвал

 

Макет раздела «Чтобы помочь приюту» представлен на рисунке 3.6.

 

 

Рисунок 3.6 — Макет раздела «Чтобы помочь приюту»: 1 — логотип сайта; 2 — область навигации; 3,6 — информация; 4 — изображение; 5 — кнопки; 7 — подвал

 

3.3 Проектирование и разработка базы данных

 

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

Для создания и ведения базы данных (обновления, обеспечения доступа к ним по запросам и выдачи их пользователю) используется набор языковых и программных средств, называемых СУБД.

Для хранения информации, создана БД. Она представлена на рисунке 3.7.

 

 

Рисунок 3.7 — База данных

 

Поля базы данных определяют структуру базы. Имя поля — определяет, как следует обращаться к данным этого поля при автоматических операциях с базой. Тип поля — определяет тип данных, которые могут содержаться в данном поле. А размер поля — определяет предельную длину данных, которые могут размещаться в данном поле. В таблице 3.1 представлено описание полей таблицы «animals».

Таблица «animals» служит для хранения краткой информации о животном его id, nickname, photo, id_ catalog.

 

Таблица 3.1 — Структура таблицы «animals»

Имя поля	Тип поля	Размер поля	Описание
id_animal	Числовой	Длинное целое	Уникальной идентификатор каждого животного, является ключевым полем
nickname	Текстовый	255	Наименование животного
photo	Текстовый	255	Фото животного
id_catalog	Числовой	Длинное целое	Индекс каталога

 

Таблица «klient» служит для хранения данных о клиентах, в таблице 3.2 представлено описание полей таблицы «klient».

 

Таблица 3.2 — Структура таблицы «klient»

Имя поля	Тип поля	Размер поля	Описание
id_user	Числовой	Длинное целое	Уникальный идентификаторкаждого клиента, является ключевым полем
surname	Текстовый	255	Фамилия клиента
name	Текстовый	255	Имя клиента
birthday	Дата	—	Дата рождения клиента
residence	Текстовый	255	Место жительства клиента
phone	Текстовый	255	Телефон клиента
email	Текстовый	255	Эл. почта клиента
id_animal	Числовой	Длинное целое	Индекс животного

 

Таблица «catalog» служит для хранения данных о собаках, находящихся в приюте, в таблице 3.3 представлено описание полей таблицы «catalog».

 

Таблица 3.3 — Структура таблицы «catalog»

Имя поля	Тип поля	Размер поля	Описание
id_catalog	Числовой	Длинное целое	Уникальный идентификатор каждого каталога, является ключевым полем
breed	Текстовый	255	Порода животного
description	Текстовый	255	Описание животного
age	Текстовый	255	Возраст животного
gender	Текстовый	255	Пол животного
vaccinations	Текстовый	255	Прививки животного
disease	Текстовый	255	Заболевания животного
parasites	Текстовый	255	Паразиты собаки
family	Текстовый	255	Семейство животного

 

Для установленной связи между сущностями «user» и «catalog» действуют отношения один к одному (1, 1). Для данной связи бизнес-правило действует следующее бизнес-правило: «Одно животное может иметь один каталог, а один каталог может содержать одного животного».

Для установленной связи между сущностями «animals» и «users» действуют отношения один к одному (М, 1). Для данной связи бизнес-правило действует следующее бизнес-правило: «Одно животное может иметь одного хозяина, а один хозяин может содержать несколько животных».

 

3.4 Описание программной реализации задачи

 

Разработанное web-приложение «Социальный приют для бездомных животных» на данный работает в одном режиме: пользовательском.

В режиме пользователя выполняются следующие функции:

- просмотр каталога животных;

- отправление данных через форму;

- быстрый просмотр информации об организации.

При запуске web-приложения открывается Главная страница «О приюте», представленная на рисунке 3.8. Посетителю сайта для использования функционала сайта не нужна регистрация.

 

 

Рисунок 3.8 — Главная страница web-приложения

 

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

 

 

Рисунок 3.9 — Кнопка перехода к другому разделу

Для ознакомления с полной информацией о животном необходимо наждать на кнопку «Подружиться» и перейти к информации выбранного животного. Кнопка представлена на рисунке 3.10.

 

 

Рисунок 3.10 — Кнопка полной информации

 

Так же для переходя по разделам пожно использовать навигационное меню которое представленно на рисунке 3.11.

 

 

Рисунок 3.11 — Скриншот навигационного меню

 

Раздер «Наши животные» представлен на рисунке 3.12. У него так же имеется кнопка упомянутая выше «Подружиться» для ознакомления с полной информацией о животном.

 

 

Рисунок 3.12 — Раздел «Наши животные»

 

Так же в разделе наши животные имеется обратная форма связи клиента с администратором. В которой он вводит свои личные данные и отправляет их. Скриншот формы обратной связи представлен на рисунке 3.13.

 

 

Рисунок 3.13 — Скриншот формы обратной связи

Если все данные формы заполнены, то после нажатия кнопки «Оправить» появляется сообщение о том, что сообщение отправленно успешно, пример сообщения представлен на рисунке — 3.14.

 

Рисунок 3.14 — Сообщение об отправки

 

Если форма была заполненна не полностью, то на новой странице появляется сообщение об ошибке, пример на рисунке 3.15.

 

 

Рисунок 3.15 — Сообщение об ошибке

 

На рисунках 3.14, 3.15 имеются ссылки для возврата на предыдущую страницу.

Раздер «Чтобы помочь животным» представлен на рисунке 3.16 и содержит информацию о том, каким образом посетитель страницы может помочь приюту и место расположения приютов на карте «ЯндексКарта», а так же номер счета на который можно перевести пожертвования для приюта.

 

 

Рисунок 3.16 — Раздел «Чтобы помочь приюту»

 

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

Для перехода между разделами использовался код на рисунке 3.17.

 

 

Рисунок 3.17 — Скриншот кода организации переходов между разделами

 

Для отображения информации на странице использовался код на рисунке 3.18.

 

 

Рисунок 3.18 — Вывод информации на страницу

 

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

 

Рисунок 3.19 — Скриншот кода подключения информации из базы данных

Для отправки формы с данными использовался код на рисунке 3.20.

 

 

Рисунок 3.20 — Отправка формы с данными

 

Для создания графической части web-приложения использовался сайт «Marsy», на котором есть возможность просмотра макетов сайта. На рисунке 3.21 представлен интерфейс сайта. Marsy — это онлайн инспектор файлов PSD для верстальщиков, он позволяет получить всю информацию необходимую для комфортной работы верстальщика.

 

 

Рисунок 3.21 — Онлайн инспектор файлов PSD

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

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

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

Так же изображения, которые будут присутствовать в макете можно скачать в двух расширениях jpg или png.

Для быстрого копирования свойств css или обычного текста нету необходимости зажимать после выделения клавиши Ctrl+C, достаточно просто скопировать и текст занесется в буфер обмена.

На рисунке 3.22, 3.23 представлены возможности онлайн инспектора файлов PSD.

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

 

 

Рисунок 3.22 — Возможности онлайн инспектора файлов PSD

 

 

Рисунок 3.23 — Возможности онлайн инспектора файлов PSD

 

Для написания кода использовался редактор кода Brackets представленный на рисунке 3.24.

 

 

Рисунок 3.24 — Текстовый редактор Brackets

 

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

4 Апробация и опытная эксплуатация web-приложения «социальный приют для бездомных животных»

 

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

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

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

Для начала тестирования web-приложение необходимо подключить базу данных. Установив локальный сервер XAMPP, запустить файл xampp-control.exe и включить Apachi и MySQL.

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

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

Ссылки разделов, у которых данные не отображаются имеют схожую проблему и решение.

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

Тестирование формы обратной связи проходило следующим образом. Заполнялись поля и отправлялись в файл up.php в котором они и проверялись на наполненность. Если форма была заполнена полностью, то отображалось сообщение представленное на рисунке 4.1, в противном случае отображалось сообщение представленное на рисунке 4.2.

 

 

Рисунок 4.1 — Статус об отправки

 

 

Рисунок 4.2 — Статус об отправки