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

JQuery -- это библиотека JavaScript, которая фокусируется на взаимодействии JavaScript и HTML. Библиотека jQuery помогает легко получать доступ к любому элементу DOM, обращаться к атрибутам и содержимому элементов DOM, манипулировать ими [18].

Для ускорения написания css файла был использован Sass - препроцессор.

MySQL - свободная система управления базами данных (СУБД). Она не предназначена для работы с большими объемами информации, но ее применение идеально для интернет сайтов, как небольших, так и достаточно крупных. MySQL отличается хорошей скоростью работы, надежностью, гибкостью. Работа с ней, как правило, не вызывает больших трудностей. Поддержка сервера MySQL автоматически включается в поставку PHP. Немаловажным фактором является бесплатность данной СУБД. MySQL распространяется на условиях общей лицензии GNU (GPL, GNU Public License) [19].

Создание дизайн-макета выполнялось в редакторе растровых изображений Adobe Photoshop. Логотип агентства недвижимости был разработан в редакторе векторных изображений Adobe Illustrator.

Написание и редактирование программного кода производилось в программе Sublime Text 3. Для компиляции sass файлов в css был использован Gulp.

Запуск сайта на локальном сервере для тестирования и отладки производился с помощью программы Denwer.

5.2 Организация структуры сценария сайта

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

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

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

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

Блок-схема сайта представлена на рисунке 5.1.

Рисунок 5.1 - Блок-схема сайта

Навигационная карта представлена на рисунке 5.2

Рисунок 5.2 - Навигационная карта

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

Структура главной страницы представлена на рисунке 5.3, а описание всех элементов в таблице 5.1.

Рисунок 5.3 - Структура главной страницы

Таблица 5.1 - Описание элементов главной страницы

Структура страницы «Купить» представлена на рисунке 5.4, а описание всех элементов в таблице 5.2.

Рисунок 5.4 - Структура страницы «Купить»

Таблица 5.2 - Описание элементов страницы «Купить»

На рисунке 5.5 представлена структура страницы «О нас», а описание всех элементов в таблице 5.3.

Рисунок 5.5 - Структура страницы «О нас»

Таблица 5.3 - Описание элементов страницы «О нас»

5.3 Оценка надежности сайта

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

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

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

, . (5.1)

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

Неизвестное количество ошибок, присутствующих в программе до начала тестирования определяется по формуле (5.2).

(5.2)

Обе группы, проводящие тестирование имеют равную вероятность обнаружения общих ошибок, которая определяется по формуле (5.3).

(5.4)

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

Проведя расчеты, получим, что общее количество ошибок в программе до начала тестирования равно 10.

Отсюда можно сделать вывод, что дальше продолжать отладку не нужно.

Далее найдем вероятность обнаружения общих ошибок.

6. КОМПЬЮТЕРНАЯ РЕАЛИЗАЦИЯ САЙТА

6.1 Описание реализации сайта

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

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

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

Рисунок 6.1 - Загрузка сайта

После подгрузки содержимого сайта попадаем на главную страницу, которая представлена на рисунке 6.2.

Рисунок 6.2 - Главная страница

В верхней части страницы располагается шапка сайта, на которой размещен логотип агентства недвижимости «Недвижимость от А до Я», контактные данные, кнопка входа на сайт и меню сайта.

Логотип сайта представлен на рисунке 6.3.

Рисунок 6.3 - Логотип агентства

При нажатии на логотип мы возвращаемся на главную страницу.

Меню сайта представляет из себя следующие разделы: «Купить», «Снять», «О нас», «Добавить объявление», «Юридические услуги».

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

Следующим блоком на сайте после шапки является блок краткого поиска недвижимости. С помощью данного блока, можно подобрать параметры для поиска. Данный поиск сокращен, более развернутый находится на страницах каталога, для перехода к полному поиску необходимо нажать на кнопку «Больше параметров», он содержит следующие параметры: тип недвижимости (аренда, продажа), город, район, улица. После выбора нужных параметров недвижимости нажимаем на кнопку «Подобрать» и попадаем на страницу каталога с отобранными объектами недвижимости. Блок поиска недвижимости представлен на рисунке 6.4.

Рисунок 6.4 - Блок поиска недвижимости

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

Следующий блок содержит популярные объявления о продаже недвижимости, данный блок представлен на рисунке 6.6.

Рисунок 6.5 - Блок количества объявлений

Рисунок 6.6 - Блок «Продажа популярное»

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

Рисунок 6.7 - Блок «Аренда популярное»

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

В нижней части страницы расположен футер, который содержит копирайт, название агентства, контактные данные и ссылки, дублирующие пункты меню. Футер представлен на рисунке 6.8.

Рисунок 6.8 - Футер страницы

При нажатии пунктов меню «Купить» или «Аренда» мы попадаем на страницу каталога, соответствующую типу недвижимости (продажа или аренда). Страница каталога представлена на рисунке 6.9.

Рисунок 6.9 - Страница «Каталог»

Ниже меню на данной странице располагается информация о количестве объявлений в каждой категории. В левой части экрана располагается раскрывающееся меню поиска недвижимости. Меню представлено на рисунке 6.10.

Данное меню раскрывающееся, после нажатия на пункт меню выдвигается панель параметра. Включается в себя такие категории для поиска, как город, район, улица, общая площадь, жилая площадь, цена площадь кухни, этаж, санузел, балкон/лоджия, ремонт, дополнительно. При вводе параметра автоматически выводятся результаты поиска недвижимости. Результат поиска представлен на рисунке 6.11.

Также результаты поиска можно отсортировать нажав на соответствующие кнопки: «По дате», «Дешевле», «Дороже», «По стоимости».

Нажав на пункт меню «О нас» мы попадаем на страницу, содержащую информацию об агентстве. Данная страница представлена на рисунке 6.12.

Рисунок 6.10 - Меню поиска недвижимости

Рисунок 6.11 - Результаты поиска

Рисунок 6.12 - Страница «О нас»

Кроме информации о самом агентстве на данной странице располагается блок сотрудники, который содержит информацию о сотрудниках, их должности, а также фотографии. Блок о сотрудниках представлен на рисунке 6.13.

Рисунок 6.13 - Блок о сотрудниках

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

Рисунок 6.14 - Страница «Добавить объявление»

Страница «Юридические услуги» содержит информацию о всех предоставляемых агентством услугах. Данная страница представлена на рисунке 6.15.

Рисунок 6.15 - Страница «Юридические услуги»

6.2 Руководство администратора системы

Данный сайт разработан с помощью таких средств разработки, как Html5, CSS3, Php, Java Script, jQuery, Sass, MySQL.

Для просмотра и редактирования сайта нужно воспользоваться программой Denwer либо использовать браузер Google Chrome и открыть вкладку «Посмотреть код», либо «Посмотреть код страницы», с помощью них можно производить отладку и просмотр внесенных изменений. Редактировать код можно с помощью программы Sublime Text3. Для просмотра и редактирования базы данных необходимо зайти в панель PhpMyAdmin.

Панель представлена на рисунке 6.16.

Рисунок 6.16 - Панель PhpMyAdmin

6.3Руководство менеджера агентства недвижимости

Для работы с сайтом в качестве менеджера агентства недвижимости необходимо нажать на кнопку «Вход». После этого откроется форма входа, представленая на рисунке 6.17.

Рисунок 6.17 - Форма входа

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

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

Редактирование объявлений производится следующим образом, с помощью параметров находим необходимое объявление, нажимаем на него и попадаем на страницу редактирования этого объявления, данная страница представлена на рисунке 6.19.

Данные сохраняются автоматически, сразу после ввода значений.

С помощью раздела «Менеджер заявок» осуществляется просмотр поступивших заявок на недвижимость от пользователей сайта.

Для выхода из панели необходимо нажать кнопку «Выйти».

Рисунок 6.18 - Форма для добавления объявления

Рисунок 6.19 - Форма редактирования объявлений

ЗАКЛЮЧЕНИЕ

В ходе данной работы был разработан сайт агентства недвижимости «Недвижимость от А до Я».

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

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

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

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

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

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

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

Проведена оценка надежности сайта, рассчитанная по простой интуитивной модели.

Были описаны средства разработки сайта такие, как Html5, CSS3, Php, Java Script, jQuery, Sass, MySQL и программы, с которыми производилась работа: Adobe Photoshop, Adobe Illustrator, Sublime Text 3, Gulp, Denwer.

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

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

1. Ромашов, В. Система управления содержимым сайта / В. Ромашов - Санкт-Петербург: Питер, 2010. - 256с.

2. Грачев, А. Создаем свой сайт на WordPress / А. Грачев - Санкт-Петербург: Питер, 2014. - 272с.

3. Норт, Б. Joomla! Практическое руководство / Б. Норт - Москва: Символ-плюс, 2008. - 464с.

4. Шпак, Ю. Web-разработка средствами MODx / Ю. Шпак - Москва: МК-Пресс, 2012. - 400с.

13. Роббинс, Дж. HTML5 / Дж. Роббинс. - Санкт-Петербург: Питер, 2015. - 192с.

14. Мейер, Э. CSS3. Каскадные таблицы стилей / Э. Мейер. - Санкт - Петербург: Питер, 2015. - 450с.

15. Уэнц, К. PHP и MySQL / К. Уэнц. - Москва: Вильямс, 2015. - 256с.

16. Слепцова, Л.Д. JavaScript / Л.Д. Слепцова. - Москва: Диалектика, 2008. - 448с.

17. Гольцман, В. MySQL 5.0 / В. Гольцман. - Санкт-Петербург: Питер, 2010. - 253с.

Размещено на Allbest.ru