Разработка сайта для агентства недвижимости
ВВЕДЕНИЕ
недвижимость информационный интерфейс сайт
В настоящее время стремительно развиваются информационные технологии, появились электронные носители информации и единая среда для использования и хранения информации - Интернет. В связи с большим увеличением числа пользователей в сети Интернет, увеличивается количество ресурсов, которые предоставляют различную информацию, в том числе и рекламного характера.
Эффективность интернет-рекламы растет с каждым годом. Буквально несколько лет назад у многих владельцев агентств не было четкого понимания - для чего им нужен сайт, как он должен работать и какие функции выполнять. Сейчас же картина изменилась, многие владельцы агентств понимают, что собственный сайт станет хорошей площадкой для привлечения клиентов. Конечно при том условии, что он будет грамотно построен будет привлекать целевых посетителей. Также сайт свидетельствует о процветании компании, о ее солидности и современности.
Целью работы является разработка сайта для агентства недвижимости «Недвижимость от А до Я», который должен предоставлять всю необходимую информацию клиентам о самой компании и предоставляемых услугах, а также иметь доску объявлений о недвижимости и возможность получить дополнительный канал для маркетинга и рекламы.
В первом разделе работы проводится аналитический обзор проблемы разработки сайтов.
Во втором разделе рассматривается предметная область автоматизации и производится постановка задачи, выявляются требования к разрабатываемому сайту.
В третьем разделе проводится проектирование сайта агентства недвижимости, рассматриваются следующие диаграммы: контекстная, IDEF0, вариантов использования, деятельности и состояния. А также оценивается трудоемкость разработки сайта.
В четвертом разделе проводится разработка информационного обеспечения сайта. А именно анализируется предметная область, состав информации, устанавливаются функциональные зависимости реквизитов, выделяются информационные объекты, проводится построение логической модели данных и предоставляется описание таблиц базы данных.
В пятом разделе проводится разработка интерфейса сайта. Предоставляются: описание программных средств, обобщенная структура решения задачи, алгоритм решения данной задачи, реализация структуры интерфейса сайта. Также проводится оценка надежности сайта.
В шестом разделе проводится компьютерная реализация сайта. Составляется руководство администратора системы и руководство менеджера агентства недвижимости.
1. АНАЛИТИЧЕСКИЙ ОБЗОР ПРОБЛЕМЫ РАЗРАБОТКИ САЙТОВ
.1 Системы управления контентом
Системой управления контентом (CMS) [1] является информационная система, которая используется, чтобы организовать совместный процесс создания, управления содержимым сайта (или контентом) и его редактирования. Основная цель системы управления контентом заключается в возможности собрать в единое целое и объединить на основе задач все источники информации, которые доступны как внутри, так и снаружи организации, и также в возможности обеспечить взаимодействие сотрудников с базами данных, которые они создали, с информацией и данными, таким образом, чтобы была возможность легко их найти, извлечь, а также повторно использовать.
Система управления контентом может определять различные данные такие, как документы, изображения, научные данные, телефонные номера и тому подобное. Поэтому CMS часто используется для управления, хранения, редактирования и публикации документации.
Существует большое число систем управления контентом: коммерческие CMS и Open-Source CMS (или свободные системы). Коммерческие CMS создаются с целью получения прибыли от продажи лицензии на продукты и технической поддержки, эти программные продукты позволяют самостоятельно на их основе разработать сайт, среди них известны такие, как 1С-Битрикс, HOST-CMS, UMI.CMS. Свободные системы - это такие системы, программу которой можно свободно использовать с любой целью. В работах [2 - 4] рассмотрены самые известные из них. это WordPress, Joomla! и MODX.
WordPress - это CMS с открытым исходным кодом на языке php, которая поддерживает сервер БД MySQL. Выпускается данная система под лицензией GNU GPL v.2. Такие системы управления контентом применяются в различных сферах: от блогов до интернет-магазинов. Встроенная система тем и плагинов дает возможность конструировать проекты широкой функциональности [2].
WordPress имеет следующие требования к ПО: PHP v.5.2.4, модуль Apache mod_rewrite, MySQL v.5.0 и выше.
В данной системе имеется большой набор готовых шаблонов, которые можно основательно менять под свои потребности, даже не имея особых знаний в php. WordPress позволяет использовать уже существующие варианты для собственной разработки, поэтому нет необходимости наполнять с нуля каждый сайт множеством скриптов и стилей.
Изначально WordPress был создан, в качестве удобной системы управления для различных блогов. Поэтому наибольшее распространение WordPress получил именно в среде блогов. Для этого типа ресурсов данной движок подходит лучше всего. Основной функционал нацелен на создание авторских тематических постов с возможностью их комментирования посетителями. В таком случае он также подойдет для создания новостных ресурсов.
Также на WordPress можно создать интернет-магазин с помощью специальных плагинов, либо более сложные сайты с дополнительными возможностями. Однако на их создание потребуется больше усилий и времени.
Если говорить просто, WordPress - это самая простая и удобная платформа для блога или другого проекта, где можно публиковать любые статьи, фотографии, новости, видео и другую информацию.
Можно выделить преимущества данной системы управления контентом.
Во-первых, это бесплатное пользование системой, ведь для начинающего веб-мастера, который намерен создать свой сайт или другой интернет-проект, это важный момент и большое преимущество, нет смысла платить за другие CMS, если все самое лучшее предлагают вам бесплатно.
Во-вторых, это простая установка и пользование системой, чтобы установить WordPress, понадобится не более 5-ти минут, и совсем необязательно быть программистом, чтобы разбираться в кодах HTML или PHP и других технических тонкостях, разработчики сделали систему простой и дружелюбной в пользовании.
В-третьих, это кроссплатформенное построение системы. WordPress можно установить и использовать на сайте, а на компьютер устанавливать дополнительно ничего не требуется, то есть, можно управлять сайтом с любого компьютера, ноутбука, планшета или смартфона на любой операционной системе, единственное, что для этого нужно - подключиться к интернету.
В-четвертых, это встроенный визуальный и текстовый (HTML) редактор. Он имеет интуитивно понятный интерфейс, пользоваться им очень просто уже с первого знакомства, здесь можно делать с текстом и картинками все - что угодно - форматировать, вставлять ссылки, видео, изображения и звуковые файлы, все эти операции несложные и делаются одним-двумя кликами.
В-пятых, это популярность WordPress во всем мире. На сегодня WordPress - одна из самых популярных систем управления содержимым сайта, доля WordPress на рынке среди конкурентов составляет более 55%, если говорить о цифрах - то это 60 миллионов сайтов, которые построены на WordPress.
Список преимуществ CMS WordPress можно дополнить огромнейшей библиотекой качественных платных шаблонов, которые имеют продвинутый функционал и гибкие настройки. Конструктор поддерживает виджеты и всевозможные социальные плагины, которые улучшают читаемость и посещаемость блога. Многие темы имеют встроенную поддержку SEO, да и сам WordPress оснащен такой системой. Это новшество отлично помогает повысить рейтинг разработанного сайта в поисковых службах Google, Yandex, и других поисковиках. Также конструктор надежно защищен от взлома и от спама. Реализована поддержка взаимодействия с социальными сетями и новостной RSS-лентой. Такое прогрессивное решение дает возможность более плотно взаимодействовать с подписчиками и читателями сайта, а удобное комментирование - это быстрая реакция на размещенные публикации. Причем каждый комментатор получает уведомление, если на его комментарий кто-то ответил, то есть, практически все происходит в режиме реального времени, а это очень важно для развития блога или сайта.
Из недостатков стоит выделить такие, как достаточно весомая нагрузка на сервер; низкая скорость загрузки сайта; ограниченный набор базовых функций; дублирование страниц и изображений; большое количество некачественных тем и дополнений с ошибками; относительное недоверие поисковых систем к сайтам на бесплатных движках.
Движок WordPress, а особенно большое количество дополнений к нему могут существенно нагружать сервер, на котором располагается сайт. Во избежание чрезмерной нагрузки нужно сокращать количество установленных плагинов до необходимого минимума. Кроме того, важно размещать блог на качественном хостинге. Эти опции помогут также увеличить скорость загрузки сайта. Кроме того, для ускорения работы блога нужно оптимизировать базу данных и использовать плагин для кэширования страниц. WordPress автоматически генерирует дубли страниц, а это негативно сказывается на продвижении блога. Также CMS WordPress при загрузке картинок создает их копии разных размеров. Для удаления ненужных картинок необходимо использовать плагин DNUI (Delete not used image). Также желательно пользоваться проверенными дополнениями, чтобы сайт работал исправно и без ошибок. И перед установкой шаблона, нужно проверить его плагином TAC.
Популярность WordPress - его достоинство и недостаток одновременно. Поисковые системы относятся настороженно к молодым сайтам на WordPress и на других бесплатных CMS.Joomla! - это бесплатная система управления содержимым (CMS) с открытым исходным кодом, позволяющая быстро разрабатывать динамичные веб-сайты, интернет-сообщества, медиа-порталы, блоги и электронные торговые системы [3].Joomla! Обладает удобным интерфейсом, позволяющим с лёгкостью управлять большими объёмами информации, будь то HTML, документы или мультимедиа. Эта система применяется в организациях разных уровней для создания как общедоступных Интернет-сайтов, так и внутренних Интранет-порталов. CMS Joomla! Поддерживается и развивается силами сообщества из десятков тысяч пользователей по всему миру.! Во многом отличается от большинства систем управления содержимым. Она проста в освоении, поскольку разрабатывалась в расчёте на пользователей с минимальными знаниями в программировании. Поэтому практически каждый сможет развивать её по своему усмотрению. Joomla! Изначально предназначена для работы в комплексе с другими свободными системами с открытым исходным кодом, такими, как PHP, MySQL и Apach.
Функциональность Joomla! Можно увеличивать с помощью дополнительных расширений (компонентов, модулей и плагинов).
Также в данной CMS имеется модуль безопасности для многоуровневой аутентификации пользователей и администраторов (используется собственный алгоритм аутентификации и «ведения» сессий).
Система шаблонов позволяет легко изменять внешний вид сайта: расположение модулей, шрифты и другое. Можно предоставить пользователям выбирать одно из нескольких отображений. В сети существует огромный выбор готовых шаблонов, как платных, так и бесплатных. Также существует программное обеспечение для самостоятельного создания оригинальных шаблонов. Предусмотрены настраиваемые схемы расположения модулей, включая левый, правый, центральный и любое другое произвольное положения блока. При желании содержимое модуля можно включить в содержимое материала. Например, выражение {loadposition mod_fpslideshow}, введенное в произвольное место в статье, выведет содержимое модуля, которому задана позиция вывода как «mod_fpslideshow».
Минимальные системные требования для Joomla! Это Apache 2.0, PHP 5.2.4 и MySQL 5.0.4.
Преимущество Joomla! - это бесплатность и открытый исходный код. Ведь для многих пользователей именно цена системы играет решающую роль при выборе того или иного продукта. Также это ориентированность на дизайнеров и разработчиков. Благодаря чрезвычайно простой модификации внешнего вида сайта есть возможность всего в несколько кликов изменить его до неузнаваемости. Это ещё одна отличная возможность максимально персонализировать свой сайт, подстроить его внешний вид под свои нужды.
Также следует выделить в Joomla! Наличие множества дополнительных компонентов, расширений, плагинов, инструментов. Такая ситуация стала почти стандартной для любого популярного продукта с открытым исходным кодом. Благодаря тысячам дополнительных компонентов можно встроить в свой сайт практически что угодно. Важный отличием Joomla от WordPress в данном случае является то, что требуется меньше дополнительных компонентов, к тому же эти компоненты практически не повлияют на производительность системы в целом, чего нельзя сказать о WordPress.
Следующим преимуществом данной системы управления контентом является привлекательность готового продукта. Даже если у вас небольшой опыт работы с сайтами, на выходе вы получите очень профессионально выглядящий сайт. Это большой плюс для тех, кто решил создать коммерческий продукт, который должен выглядеть солидно для пользователя.
Постоянные обновления и повышение качества и безопасности системы выделяют Joomla! Cреди других CMS. Сообщество Joomla является одним из крупнейших. Среди поклонников этой CMS огромное количество разработчиков, которые постоянно создают новые расширения, а также находят недоработки и способы улучшения работы системы. В итоге конечный пользователь получает всё более и более качественную систему.
Также преимуществом Joomla! является ее универсальность. Возможности Joomla позволяют создать сайт любой сложности и содержания с минимальным использованием дополнительных инструментов и расширений. Это очень большой плюс в случае, если необходим продукт, реализация которого не слишком соответствует возможностям той же популярной и простой WordPress.
Одним из недостатков Joomla можно назвать трудности при переходе на более новую версию, когда возможно нарушение некоторых установленных компонентов, причём возможно лишь последовательное обновление через промежуточные версии.
Для ранних версий Joomla актуальна и сложность самих обновлений. К счастью, в последней версии реализован автоматический поиск и установка обновлений.лидирует и в числе систем, подверженных взлому. Сайты на этой системе довольно часто подвергаются атакам. Не последней причиной здесь является и недостаточно высокая защищённость системы, но ситуация постоянно улучшается благодаря оперативной работе сообществ Joomla!.
Следующим недостатком Joomla! Является сложность ее освоения. Приходится признать, что функциональность и универсальность всегда требуют некоторых усилий от пользователя для их освоения.
Другим общим недостатком, свойственным для всех бесплатных систем, является отсутствие службы поддержки, но взамен пользователь получает сотни обучающих материалов и руководств, а также десятки площадок (форумы и т.д.) для обмена опытом и решения возникающих проблем.
Как и в других ситуациях, выбор той или иной CMS всегда зависит от требований к сайту, а также его тематики и функционала. Joomla! Предоставляет очень широкий функционал, позволяющий реализовать сайт любой сложности, но требует взамен некоторого времени на освоение системы. Не стоит думать, что обучение обязательно займёт недели или месяцы. В сети присутствуют обучающие руководства, позволяющие создать небольшой простой сайт за один день.- это бесплатная профессиональная система управления содержимым (CMS) и фреймворк для веб-приложений, предназначенная для обеспечения и организации совместного процесса создания, редактирования и управления контентом (то есть содержимым) сайтов [4].распространяется бесплатно по лицензии GPL с открытым исходным программным кодом (Open Source). Это означает, что систему MODX может использовать каждый: как для личного использования, так и для коммерческого распространения сайтов, построенных на данной системе управления.написана на программном языке PHP и использует для хранения данных СУБД MySQL или MS SQL. Система управления MODX может быть установлена на большинстве веб-серверов (например, таких как IIS, Apache, Lighttpd, nginx и Zeus), а контрольная панель системы (или админ-зона) работает практически во всех современных браузерах.
Его главное преимущество - отсутствие четких границ в сфере применения. Функциональные возможности очень широки и позволяют создавать сайт различной сложности.
Одним из плюсов MODx это то, что можно осуществлять одновременную разработку нескольких сайтов. Эта функция придется по душе веб-мастерам, которые владеют сеткой ресурсов.
Также MODx позволяет реализовать любой дизайн. Если стандартного инструментария будет не достаточно, то имеется возможность разработки дополнительных шаблонов.
При содействии MODx можно внедрять любые виды сайтов, начиная от простейшего сайта-визитки и заканчивая сложными и многообразными по функционалу социальными сетями.не доставляет практически никаких проблем при использовании системы на хостинге. Достаточно просто перенести ее на удаленный сервер, создав предварительно базу данных и следовать инструкциям, сопровождающим процесс установки.
Характеристики SEO-оптимизации позволяют задавать описания, необходимые заголовки и адреса страниц.
Здесь очень удачно реализован механизм управления ключевыми словами и мета-тегами. Есть общий управляемый список ключевых слов, которые затем в каждом документе просто выбираются. При этом движок уже сам прописывает все на странице, без каких-либо добавлений кода.
Если же говорить о недостатках, то и эта CMS их, конечно, не лишена. Во-первых, снижение производительности падает при росте числа документов. Это становится очень заметно, когда количество документов достигает нескольких тысяч. Во-вторых, все еще мало серьезных готовых решений, например, интернет-магазин. И наконец, иногда проявляются проблемы с русским языком (кодировка, не поддерживаемые расширения).
.2 Сайты для агентств недвижимости
Современный сайт агентства недвижимости, по сути, представляет собой хорошо структурированную базу данных, где собраны сведения о различных объектах. Существует большое количество сайтов агентств недвижимости. Рассмотрим несколько таких сайтов для агентств недвижимости по Вологодской области.
Агентство недвижимости «ГрадСтрой» [5] предлагает покупателям квартиры в Вологде и в Санкт-Петербурге в разной ценовой категории. На вторичном рынке агентство недвижимости «ГрадСтрой» оказывает весь спектр услуг по покупке и продаже квартир, аренде готовых квартир в Вологде, загородной недвижимости и земельных участков.
Сайт агентства недвижимости «ГрадСтрой» выполнен в приятной красно-белой цветовой гамме и имеет простой и удобный интерфейс.
На главной странице содержатся следующие блоки: контактная информация, номер телефона агентства и ссылки на подписку; меню, состоящее из таких разделов, как «Квартиры», «Комнаты», «Новостройки», «Дома», «Коттеджи», «Земля», «Гаражи», «Коммерческая», «Аренда»; блок фильтра подбора параметров поиска объявлений по недвижимости; блок «О компании ГрадСтрой», который содержит информацию об агентстве и о предоставляемых им услугах; футер, который содержит адреса данной сети агентств, телефонные данные, а также ссылки дублирующие разделы верхнего меню главной страницы, и ссылки на материал о компании, содержащие информацию о компании, услугах, вакансиях агентства, различные статьи и новости, так же в футере имеется поле для ввода электронной почты для подписки на рассылку информации о скидках и акциях данного агентства.
Агентство недвижимости «Этажи» [6] занимается продажей, покупкой, арендой и обменом жилой и коммерческой недвижимости, также данное агентство предоставляет льготы на ипотеку от ведущих банков региона.
На сайте представлена недвижимость для большого числа городов России. В данном случае рассмотрим для города Вологды.
Главная страница состоит из следующих блоков: блок верхнего меню, где предоставляется возможность выбора города и содержатся следующие разделы: «Акции», «Услуги», «О компании», «Вакансии», «Франшиза», «Блог», «Контакты»; блок с контактной информацией в правом верхнем углу и кнопками входа и регистрации; блок с основным меню, содержащем разделы: «Главная», «Каталог квартир», «Новостройки без комиссии», «Загородная», «Коммерческая», «Ипотека», «Продавцу», «Аналитика»; блок поиска вторичной недвижимости по параметрам; форма обратной связи, где пользователь может оставить свой номер телефона, чтобы получить бесплатную консультацию агентов; блок поиска покупателей; блок информации о работе личного кабинета, который содержит преимущества данного кабинета и кнопку регистрации; блок информации о количестве объектов недвижимости по разным разделам по Вологде; блок информации об агентстве в Вологде; футер, который содержит контактные данные, а также ссылки на все разделы верхнего и основного меню.
Сайт имеет большой функционал. Дизайн выполнен в приятной цветовой гамме. Пользоваться таким сайтом удобно, кроме того сайт разработан для многих городов России, что немаловажно. Имеется личный кабинет, формы обратной связи, кнопки на подписку в социальных сетях, что обеспечивает хорошую связь пользователя с агентством.
Сайт агентства недвижимости «Гарантия» [7] представляет собой виртуальную торговую. На данном сайте выложена информация о данном агентстве, размещены объекты недвижимости на продажу, аренду, у каждого объекта имеется свой номер, также имеется возможность пользователю оставить заявку. Функционал сайта не обширен, так как нет возможности пользователям самим размещать объекты недвижимости, это делает лишь только само агентство. Сайт лишь представляет объекты недвижимости, а пользователи затем обращаются в агентство.
Главная страница сайта состоит из следующих блоков: шапка - это блок в верхней части экрана, где располагается название агентства, логотип, контактные данные и меню, состоящее из таких разделов, как «На главную», «Новостройки», «Продажа», «Срочная продажа», «Аренда», «Акции», «Новости», «Контакты», «Отзывы», «Оставить заявку»; блок поиска объектов по параметрам; меню в левой части экрана, содержащее ссылки на отправку заявок, объекты недвижимости на продажу, аренду, на информацию об услугах и вакансиях агентства; блок в правой части экрана, где размещены объявления о срочной продаже; блок размещенных объектов недвижимости; футер или «подвал» сайта, где расположены название агентства, копирайт, годы работы сайта и наименование фирмы разработавшей данный сайт. Также на сайте есть формы обратной связи, можно отправить сообщение представителям данного агентства.
Сайт агентства недвижимости «Олимп» [8] выполнен в ненавязчивой бело-синей гамме, элементы сайта, которые необходимо выделить, выполнены в оранжевых тонах.
На главной странице сайта располагаются следующие блоки: меню, содержащее разделы: «Каталог», «Услуги», «Отзывы», «Блог», «О компании»; блок поиска недвижимости по параметрам: тип недвижимости (купить, продать, оценить), тип объекта (квартира, комната, дом, земельный участок, коммерческая недвижимость), количество комнат, улица; блок преимущества данного агентства; блок связи с агентством, где можно заказать звонок; блок информации об агентстве и его специалистах; блок «футер», где расположена контактная информация, копирайт, год разработки сайта, кнопка подписки в социальной сети «Вконтакте», интерактивная карта и кнопка для заказа звонка.
Функционал сайта позволяет производить поиск недвижимости данного агентства, просмотр карточки объекта, а также позволяет записаться на просмотр выбранной недвижимости. Также по каждому объекту недвижимости высвечивается информация об ответственном за данный объект агенте, у которого можно с помощью формы обратной связи заказать звонок. Также для удобства сделана интерактивная карта объекта недвижимости.
Сайт агентства недвижимости «Союз» [9] позволяет производить поиск недвижимости только на продажу. Цветовая гамма сайта не яркая, в темно зеленом и оранжевом тонах. В верхней части располагается меню сайта, содержащее разделы: «Главная», «Каталог недвижимости», «Наши услуги», «Полезная информация», «О компании», «Отзывы», «Контакты».
Ниже расположен блок поиска недвижимости по параметрам: район, цена от, цена до, количество комнат, площадь от, площадь до.
Следующий блок на сайте - это популярное в каталоге недвижимости, представляет из себя элемент «карусель», в котором перелистываются подобранные объекты. Следующий блок тоже представлен в виде «карусели», который содержит новые объекты недвижимости.
2. ПРЕДМЕТНАЯ ОБЛАСТЬ И ПОСТАНОВКА ЗАДАЧИ
.1 Предметная область автоматизации
Агентство недвижимости предоставляет собой профессиональное сопровождение всех операций, которые возможны на рынке недвижимости. В первую очередь это продажа и покупка жилой и коммерческой недвижимости, и недвижимости в новостройках, а также аренда квартир, комнат, земельных участков. Преимуществом агентства является объёмная база вариантов недвижимости и земельных участков, выставленных на продажу или предлагаемых для сдачи в аренду. Разрабатываемый сайт позволит разместить информацию об агентстве недвижимости и услугах, которые оно предлагает, различные объявления о продаже или аренде недвижимости, а также позволит пользователю оставлять заявки и предоставит возможность связаться с агентством.
При создании сайта, посвященного купле-продаже квартир и офисов нужно позаботиться об удобстве навигации и поиска необходимой информации.
Потенциальный клиент, который заходит на сайт агентства недвижимости, должен иметь возможность в считанные минуты найти то, что ему нужно, иначе он может воспользоваться услугами конкурентов. Поиск объектов на сайте агентства недвижимости должен производиться одновременно по нескольким параметрам. Во-первых, он должен осуществляться по стоимости недвижимости и её площади. Для домов и квартир также вводится функция поиска по количеству комнат. Еще один важный момент, на который необходимо обратить внимание, это местоположение объекта.
Потенциальному покупателю или арендатору необходимо иметь возможность выбора недвижимости в определенных районах и улицах.
Структура сайта агентства недвижимости состоит из двух главных разделов - продажи и аренды. Каждый из них для удобства поиска необходимо разбить на подразделы, посвященные жилой, офисной и торговой недвижимости.
После того, как база сайта агентства недвижимости создана, необходимо позаботиться о том, чтобы пользователи имели доступ к исчерпывающей информации по тому или иному объекту. Общая площадь, место расположения, описание инфраструктуры и интерьера существенно повысят шансы агентства продать или же сдать в аренду объект.
Немаловажное значение играет и наличие фотографий, которые дают представление о том, что же выставлено на сайте.
Любой человек, собирающийся приобретать или арендовать недвижимость, всегда интересуется правовыми аспектами сделки. Чтобы повысить престиж как сайта, так и самого агентства, стоит подумать о создании раздела, посвященного законодательным нормам и юридическим тонкостям операций, связанных с куплей, продажей или арендой различных объектов.
2.2 Постановка задачи
Целью данной работы является разработка сайта для агентства недвижимости «Недвижимость от А до Я». Сайт должен предоставлять всю необходимую информацию клиентам о самой компании и предоставляемых услугах, а также иметь доску объявлений о недвижимости и возможность получить дополнительный канал для маркетинга и рекламы.
Была изучена предметная область и разработана функциональная структура сайта, которая представлена на рисунке 2.1
Рисунок 2.1 - Функциональная структура сайта
Разрабатываемый сайт имеет такие разделы: раздел «Купить» подробно описывает недвижимость по объявлениям продажи; раздел «Снять» подробно описывает недвижимость по объявлениям аренды недвижимости; раздел «О нас» дает возможность пользователю получить информацию о сайте, его назначении и о том, как он работает; раздел «Добавить объявление» содержит информацию о том, как добавить объявление и контактные данные агентства; раздел «Юридические услуги» предоставляет информацию об оказываемых юридических услугах фирмой.
Также у данного сайта имеется панель администратора, доступ к которой можно получить после успешной авторизации на сайте, с помощью логина и пароля, который имеют лишь сотрудники данного агентства. Данная панель содержит следующие разделы: раздел «Редактор меню» позволяет вносить изменения в меню сайта, «Редактор объявлений» предназначен для добавления информации в объявления, редактирования их и удаления, «Менеджер заявок» производит учет поступивших заявок от клиентов, воспользовавшихся формой «Оставить заявку» на сайте.
В работе должны быть реализованы следующие задачи: описание предметной области, разработка форм документов предметной области, проектирование сайта, разработка информационно-логической модели, выполнение оценки трудоемкости проекта, разработка программного обеспечения, разработка руководства пользователя и руководства администратора.
.3 Требования к сайту
Разрабатываемый сайт должен отвечать требованиям, установленным заказчиком: во-первых, на данном сайте должна быть предоставлена достаточно полно информация о данном агентстве, его услугах, объектах недвижимости; во-вторых, сайт должен обеспечивать пользователю стабильную работу с сервером; в-третьих информация размещенная на сайте должна быть подкреплена визуально, то есть должны присутствовать различные фото и иллюстрации; в-четвертых сайт должен быть максимально простым; в-пятых, дизайн сайта должен быть понятным, но в то же время красочным и запоминающимся; в-шестых, дизайн данного сайта должен соответствовать конкретной целевой аудитории и учитывать её специфику; в-седьмых все страницы сайта необходимо выполнить в одном стиле, так чтобы у пользователя складывалось впечатление от данного сайта, как от источника информации, а не от разрозненных и разноплановых страниц; в-восьмых, сайт агентства должен быть удобным для просмотра на разного размера мониторах.
Данный сайт должен позволять просматривать пользователю информацию об агентстве недвижимости, производить поиск объявления недвижимости и оставлять заявки. Для получения доступа к администраторской панели менеджер агентства проходит авторизацию на сайте, путем введения логина и пароля.
Для нормального функционирования системы необходимы следующие системные требования: Pentium 3800МГц; оперативная память 256 МВ; ОС Windows XP и выше; процессор с частотой от 1500 MHz и более; ОЗУ - 1 Gb и более; элементы ввода данных - мышь и клавиатура, а также подключение к интернету.
3. ПРОЕКТИРОВАНИЕ САЙТА АГЕНТСТВА НЕДВИЖИМОСТИ
При проектировании сайта агентства недвижимости «Недвижимость от А до Я», были разработаны следующие диаграммы: контекстная диаграмма, IDEF0, вариантов использования, деятельности и состояний. Данные диаграммы были разработаны с помощью CASE-средств таких, как BP Win и Rational Rose. Рассмотрим каждую диаграмму подробнее.
.1 Контекстная диаграмма
Контекстная диаграмма - это модель, которая представляет систему как набор иерархических действий, в которой каждое действие преобразует некоторый объект или набор объектов [10]. Высшее действие иерархии называется действием контекста - это самый высокий уровень, который непосредственно описывает систему. Уровни ниже называются порожденными декомпозициями и представляют подпроцессы родительского действия. Контекстная диаграмма представлена на рисунке 3.1
Рисунок 3.1 - Контекстная диаграмма
В таблице 3.1 представлено описание стрелок данной контекстной диаграммы.
Таблица 3.1 - Описание стрелок контекстной диаграммы
Наименование стрелкиОписаниеТипЛогин и парольПри авторизации пользователь вводит свой логин и парольInputЗаявкиАвторизованный пользователь оставляет заявку на интересующую его недвижимостьInputЖилищный кодексОсуществляет контроль купли-продажи недвижимостиControlАдминистраторАдминистратор сайта, представитель агентстваMechanismИнформация по недвижимостиИнформация о выбранном объекте недвижимостиOutput
3.2 Диаграмма IDEF0
- технология описания системы в целом, как множества взаимозависимых действий или функций. IDEF0 применяется наиболее часто на логическом уровне, как технология проектирования системы. IDEF0 имеет небольшую графическую нотацию - функции изображаются как поименованные прямоугольники или функциональные блоки, имена функций подбираются с помощью глаголов или отглагольных существительных [11].
Диаграмма IDEF0 представлена на рисунке 3.2.
Рисунок 3.2 - Диаграмма IDEF0
Основные элементы модели IDEF0 описаны в таблице 3.2
Таблица 3.2 - Основные элементы модели IDEF0
Название проекта: Работа сайта агентства недвижимости «Недвижимость от А до Я»Цель проекта: Реализация структурной функциональной модели сайтаТехнология моделирования: метод функционального моделирования IDEF0Инструментарий: программный продукт BPWin 4.0Список данныхПеречень функцийЛогин и пароль Заявки Жилищный кодекс Администратор Информация по недвижимостиА0.Работа сайта агентства недвижимости «Недвижимость от А до Я»Логин и пароль Заявки Объявления Администратор Выбранная недвижимость Жилищный кодекс Информация по недвижимостиА1.Регистрация и авторизация А2.Выбор недвижимости А3.Оформление заявки
Описание функциональных блоков диаграммы IDEF0 представлено в таблице 3.3.
Таблица 3.3 - Описание функциональных блоков IDEF0
Наименование блокаОписание решаемых задачА1.Регистрация и авторизация Осуществляется авторизация пользователя, если пользователь не зарегистрирован на сайте, то осуществляется регистрация.А2.Выбор недвижимостиС помощью фильтра поиска недвижимости пользователь осуществляет выбор интересующей его недвижимости.А3.Оформление заявкиПосле выбора интересующей пользователя недвижимости, отправляется заявка.
.3 Диаграмма вариантов использования
Диаграмма вариантов использования применяется для моделирования бизнес процессов организации и требования к создаваемой системе [12]. В данной диаграмме вариант использования обозначается эллипсом, внутри которого или под ним содержится название в форме существительного или глагола с пояснительными словами. Диаграмма вариантов использования представлена на рисунке 3.3.
Рисунок 3.3 - Диаграмма вариантов использования
По рисунку выделим два актера: пользователь и администратор. Пользователем является любой неавторизованный человек работающий с сайтом, который может осуществлять просмотр информации о данном агентстве недвижимости, осуществлять поиск объявлений, а также оставлять заявки на недвижимость, администратор же может модифицировать данные сайта, просматривать заявки, изменять структуру сайта.
Описание раздела «Авторизация и регистрация» представлено в таблице 3.4.
Таблица 3.4 - Раздел «Авторизация и регистрация»
Вариант использованияАвторизация и регистрацияАктерыПользовательЦельПолучение доступа к панели администратораКраткое описаниеПользователь вводит логин и пароль для входа в панель администратора на сайтеТипБазовыйОписание раздела «Типичный ход событий» представлено в таблице 3.5
Таблица 3.5 - Раздел «Типичный ход событий»
Действия актераОтклик системы1. Пользователь нажимает кнопку «Войти»2.Сайт отображает форму авторизации3.Пользователь вводит логин и пароль Исключение №1: пользователь вводит неверные логин и пароль4.Сайт отображает панель для работы с сайтом
В таблице 3.6 представлен раздел «Исключения».
Таблица 3.6 - Раздел «Исключения»
Действия актераОтклик системыИсключение №1: пользователь вводит неверные логин и пароль5.Пользователь вводит в форме авторизации неверный логин и парольСайт выводит сообщение с предложением ввести корректные данные
.4 Диаграмма деятельности
Диаграмма деятельности - диаграмма, на которой показано разложение некоторой деятельности на её составные части. Под деятельностью понимается спецификация исполняемого поведения в виде координированного последовательного и параллельного выполнения подчинённых элементов - вложенных видов деятельности и отдельных действий, соединённых между собой потоками, которые идут от выходов одного узла ко входам другого [13]. Диаграмма деятельности изображена на рисунке 3.4.
Состояние действия графически изображается прямоугольником с закруглёнными углами. Внутри записывается имя состояния в виде выражения действия на естественном языке или на языке программирования. Переходы - переводят деятельность в последующее состояние сразу, как только закончится действие в предыдущем состоянии, изображаются стрелками.
Рисунок 3.4 - Диаграмма деятельности
Если из состояния действия выходит единственный переход, то он может быть никак не помечен. Если переходов несколько, то при моделировании последовательной деятельности может сработать только один из них. Такая ситуация называется ветвлением и изображается в виде ромба, внутри которого нет текста. Объекты - инициируют выполнение действий или определяют некоторый результат этих действий. Изображаются в виде прямоугольника, имя объекта подчёркивается. После имени в прямоугольных скобках может указываться характеристика состояния объекта.
3.5 Диаграмма состояний
Диаграмма состояний является графом специального вида вершинами которого являются состояния, дуги графа обозначают из состояния к состоянию. Конечный автомат описывает поведение объекта в виде состояний, которые охватывают все этапы жизненного цикла, начиная с начала и до конца [14].
Диаграмма состояний представлена на рисунке 3.5.
Рисунок 3.5 - Диаграмма состояний
По диаграмме видим, что выполнив вход как администратор на сайте, выполняются следующие состояния: ожидание, изменение структуры сайта, управление доской объявлений, редактирование данных, просмотр заявок, ожидание и выход.
.6 Оценка трудоемкости разработки сайта
Проведем оценку трудоемкости разработки проекта с использованием методики на основе вариантов использования. А именно проведем определение весовых показателей действующих лиц, определение весовых показателей вариантов использования, определение технической сложности проекта, определим уровень квалификации разработчиков и проведем оценку трудоемкости проекта.
Определение весовых показателей действующих лиц представлено в таблицах 3.7 и 3.8.
Таблица 3.7 - Весовые коэффициенты действующих лиц
Тип действующего лицаВесовой коэффициентСреднее2Сложное3
Таблица 3.8 - Типы действующих лиц для разрабатываемой системы
Действующее лицоТипПользовательСреднееАдминистраторСложное
Вычислим общий весовой показатель, умножая количество действующих лиц каждого типа на соответствующий весовой коэффициент.
(3.1)
Таблица 3.9 - Весовые коэффициенты вариантов использования
Тип варианта использованияОписаниеВесовой коэффициентПростой3 или менее транзакций5Среднийот 4 до 7 транзакций10Сложныйболее 7 транзакций15
Общий весовой показатель (UC) вычисляется умножением количества вариантов использования каждого типа на соответствующий весовой коэффициент. Выполнив расчеты, получим, что общий весовой показатель равен:
Таблица 3.10 - Сложность вариантов использования для разрабатываемой системы
Вариант использованияТипАвторизацияСреднийПоиск объявленийСреднийПросмотр объявленияПростойДобавление объявленияСреднийОформление заявкиПростойМодификация информации на сайтеСложныйПросмотр заявокСреднийОтсылка сообщений клиентамСложныйИзменение структуры сайтаСложныйОбеспечение безопасности данныхСложный
(3.2)
Рассчитаем показатель UUCP, по формуле:
(3.3)
Подставив значения, получим, что данный показатель равен 115.
Определение технической сложности проекта представлено в таблицах 3.11 и 3.12.
Таблица 3.11 - Показатели технической сложности проекта
ПоказательОписаниеВесТ1Распределенная система2Т2Высокая пропускная способность1Т3Работа конечных пользователей в режиме онлайн1Т4Сложная обработка данных1Т5Повторное использование кода1Т6Простота установки0,5Т7Простота использования0,5Т8Переносимость1Т9Простота внесения изменений1Т10Параллелизм2Т11Специальные требования к безопасности1Т12Непосредственный доступ к системе со стороны внешних пользователей1Т13Специальные требования к обучению пользователей1
Таблица 3.12 - Показатели технической сложности для рассматриваемой системы
ПоказательВесЗначениеЗначение с учетом веса1234T1236T2133T3122T4133T5122T60,531,5T70,542T8133T9133T10224T11144T12155T13111Сумма39,5
Техническая сложность проекта вычисляется по формуле:
(3.4)
Подставив значения, получим, что техническая сложность проекта (TCF) равна 0,237.
Определение уровня квалификации разработчиков представлено в таблицах 3.13 и 3.14.
Таблица 3.13 - Показатели уровня квалификации разработчиков
ПоказательОписаниеВесF1Знакомство с технологией2F2Опыт разработки сайтов1F3Опыт использования объектно- ориентированного подхода0,5F4Наличие ведущего аналитика0,5F5Мотивация1F6Стабильность требований2F7Частичная занятость-1F8Сложные языки программирования-1
Таблица 3.14 - Показатели уровня квалификации разработчиков для системы
ПоказательВесЗначениеЗначение с учетом весаF1236F2133F30,552,5F40,521F5155F6248F7-13-3F8-12-2Сумма20,5
Рассчитаем уровень квалификации разработчиков по формуле:
(3.5)
Подставив значения получим, что уровень квалификации разработчиков (EF) равен .
С использованием полученных данных, можем определить показатель, по формуле (3.6)
Подставив все значения, получим, что UCP равен 21,4
Теперь по полученным данным определим трудоемкость проекта. В качестве начального значения предлагается использовать 20 человека - час на одну UCP, но проведя уточнение будем использовать 28 человека - час на одну UCP. Таким образом общее количество человека - часов на весь проект равно 599,2, что составляет 25 - 26 дней разработки с учетом, что над проектом работает один человек.
4. РАЗРАБОТКА ИНФОРМАЦИОННОГО ОБЕСПЕЧЕНИЯ СИСТЕМЫ
.1 Анализ предметной области и выделение информационных объектов
Проведем описание документов предметной области. Сначала рассмотрим входные формы. Входными формами являются: форма «Авторизация» и форма «Поиск недвижимости», данные документы представлены в формах 4.1, 4.2.
Форма 4.1 - Авторизация
ЛогинПароль
Форма 4.2 - Поиск недвижимости
Тип недвижимостиГородРайонТип помещенияУлицаОбщая площадьЖилая площадьЦена
К выходным формам относятся: форма «Объект недвижимости» и информационные формы такие, как форма «О нас», форма «Сотрудники», форма «Добавить объявление», форма «Юридические услуги». Данные документы представлены в формах 4.3, 4.4, 4.5, 4.6 и 4.7
Форма 4.3 - Объект недвижимости
Наименование недвижимостиЦенаАдресТип недвижимостиОписание недвижимостиАгентТелефон
Форма 4.4 - О нас
Описание агентства
Форма 4.5 - Сотрудники
Имя, ФамилияДолжностьФотография
Форма 4.6 - Добавить объявление
Описание процесса добавления объявления
Форма 4.7 - Юридические услуги
Описание юридических услуг агентства
Проведем анализ состава информации, установим функциональные зависимости реквизитов, установим между ними соответствия и определим структурные связи.
Состав информационного обеспечения представлен в таблице 4.1.
Таблица 4.1 - Состав информационного обеспечения
Название информационного объекта (ИО)Обозначение ИОСемантика ИОТип сделкиBargain_typesСодержит информацию о типе недвижимости, т.е. продажа или арендаТипы купитьBuy_typesТипы помещений в разделе купитьТип домаHouse_typesТип дома, т.е. из какого материала он построенСанузелBathroomsТип санузлаБалконыBalconiesТип балконаТип ремонтаRepair_typesТип ремонтаСостояниеConditionsИнформация о состоянии недвижимостиИзображенияImagesСодержит изображения данной недвижимостиПокупка недвижимостиBuysОбъявление недвижимости на продажуАренда недвижимостиleasesОбъявление недвижимости в аренду
Функциональные зависимости реквизитов представлены в таблице 4.2
Таблица 4.2 - Функциональные зависимости реквизитов
Соответствие описательных и ключевых реквизитов представлено в таблице 4.3.
Таблица 4.3 - Соответствие описательных и ключевых реквизитов
Описательные реквизитыКлючевые реквизитыВид ключаИмя ИО, включающего реквизитbargain_typebargain_idП.У.Тип сделкиtype_nametype_idП.У.Типы купитьhouse_type_namehouse_type_idП.У.Тип домаbathroom_typebathroom_idП.У.Санузелbalcony_namebalcony_idП.У.Балконыrepair_type_namerepair_type_idП.У.Тип ремонтаcondition_typecondition_idП.У.Состояниеimage_contentimage_idП.У.ИзображенияBuy_id Buy_title Buy_price Buy_city Buy_district Buy_street Buy_area Buy_living_area Buy_kitchen_area Buy_new_building Buy_description Buy_agent Buy_phone Buy_dateBuy_id house_type_id bathroom_id balcony_id repair_type_id condition_id bargain_id П.У.Покупка недвижимостиlease_id lease_title lease_price lease_city lease_district lease_street lease_area lease_living_area lease_kitchen_area lease_new_building lease_description lease_agent lease_phone lease_datelease_id house_type_id bathroom_id balcony_id repair_type_id condition_id bargain_id П.У.Аренда недвижимости
Связи информационных объектов представлены в таблице 4.4.
Таблица 4.4 - Связи информационных объектов
№ связиГлавный ИОПодчиненный ИОТип реального отношения12341Типы купитьПокупка недвижимости1:М2Тип сделкиПокупка недвижимости1:М3Тип сделкиАренда недвижимости1:М4Тип домаПокупка недвижимости1:М5Тип домаАренда недвижимости1:М6БалконыПокупка недвижимости1:М7БалконыАренда недвижимости1:М8СостояниеПокупка недвижимости1:М9СостояниеАренда недвижимости1:М10СанузелПокупка недвижимости1:М11СанузелАренда недвижимости1:М12Тип ремонтаПокупка недвижимости1:М13Тип ремонтаАренда недвижимости1:М14ИзображенияПокупка недвижимости1:М15ИзображенияАренда недвижимости1:М
4.2 Построение логической модели данных
Теперь рассмотрим построение логической модели данных. А именно с помощью ER-Win разработаем модель сущность-связь и полную атрибутивную модель. Модель сущность - связь представлена на рисунке 4.1, полная атрибутивная модель на рисунке 4.2, модель, основанная на ключах представлена на рисунке 4.3.
Рисунок 4.1 - Модель сущность - связь
Рисунок 4.2 - Полная атрибутивная модель
Рисунок 4.3 - Модель, основанная на ключах
.3 Описание таблиц базы данных
Приведем описание таблиц базы данных, которое представлено в таблице 4.5.
Таблица 4.5 - Описание таблиц реляционной базы данных
Атрибут Признак ключаФормат поляОбозначениеНаименованиеТипДлинаТочность123456ИО <Тип сделки >bargain_idНомер типа сделкиP.KЧисловойЦелое-bargain_typeТип недвижимостиТекстовый30-ИО <Типы купить >type_idНомер типаP.KЧисловойЦелое-type_nameТип купитьТекстовый30ИО <Тип дома >house_type_idНомер типа домаP.KЧисловойЦелое-house_type_nameТип домаТекстовый30-ИО <Санузел >bathroom_idНомер типаP.KЧисловойЦелое-bathroom_typeТип санузлаТекстовый30-ИО <Балконы >balcony_idНомер типаP.KЧисловойЦелое-balcony_nameТип балконаТекстовый30-ИО<Тип ремонта>repair_type_idНомер типаP.KЧисловойЦелое-repair_type_nameТип ремонтаТекстовый30-ИО<Состояние>condition_idНомер типаP.KЧисловойЦелое-condition_typeТип состоянияТекстовый30-ИО<Изображения>image_idНомер изображенияP.KЧисловойЦелое-image_contentИзображениеmediumblob-ИО<Покупка недвижимости>Buy_idНомер объектаP.KЧисловойЦелое-house_type_idТип домаF.KЧисловойЦелое-bathroom_idТип санузлаF.KЧисловойЦелое-balcony_idТип балконаF.KЧисловойЦелое-repair_type_idТип ремонтаF.KЧисловойЦелое-condition_idТип состоянияF.KЧисловойЦелое-bargain_idТип недвижимостиF.KЧисловойЦелое-Buy_titleНаименование объектаТекстовый200-Buy_priceЦенаЧисловойДействительное3Buy_cityГородТекстовый40-Buy_districtРайонТекстовый60-Buy_streetУлицаТекстовый60-Buy_areaОбщая площадьЧисловойДействительное3Buy_living_areaЖилая площадьЧисловойДействительное3Buy_kitchen_areaПлощадь кухниЧисловойДействительное3Buy_new_buildingНовостройкаТекстовый2-Buy_descriptionОписаниеТекстовый500-Buy_agentИмя агентаТекстовый40-Buy_phoneТелефонТекстовый20-Buy_dateДата публикации-Дата--ИО<Аренда недвижимости>lease_idНомер объектаP.KЧисловойЦелое-house_type_idТип домаF.KЧисловойЦелое-bathroom_idТип санузлаF.KЧисловойЦелое-balcony_idТип балконаF.KЧисловойЦелое-repair_type_idТип ремонтаF.KЧисловойЦелое-condition_idТип состоянияF.KЧисловойЦелое-bargain_idТип недвижимостиF.KЧисловойЦелое-lease_titleНаименование объектаТекстовый200-lease_priceЦенаЧисловойДействительное3lease_cityГородТекстовый40-lease_districtРайонТекстовый60-lease_streetУлицаТекстовый60-lease_areaОбщая площадьЧисловойДействительное3lease_living_areaЖилая площадьЧисловойДействительное3lease_kitchen_areaПлощадь кухниЧисловойДействительное3lease_new_buildingНовостройкаТекстовый2-lease_descriptionОписаниеТекстовый500-lease_agentИмя агентаТекстовый40-lease_phoneТелефонТекстовый20-lease_dateДата публикацииДата--
5. РАЗРАБОТКА ИНТЕРФЕЙСА САЙТА
.1 Описание программных средств
Использование программных продуктов и разработка сайта осуществлялась на операционной системе Microsoft Windows 7 x64 Ultimate.
Html5 - язык гипертекстовой разметки текста, с помощью которого осуществляется разработка Web-документов [15]. Данный язык был использован при верстке сайта. Выбрана именно пятая версия, поскольку она дает больше возможностей при создании веб-приложений, которые используют графику, аудио, видео и многое другое.
Для написания стилей был использован CSS3. CSS - это язык стилей, который определяет отображение HTML-документов. С его помощью была проведена работа с шрифтами, цветом, полями, строками, высотой, шириной, фоновыми изображениями, позиционированием элементов [16].
Также для написания ядра сайта был использован скриптовый язык PHP. Язык предназначен для создания динамических сайтов. PHP сконструирован специально для ведения веб-разработок и его код может внедряться непосредственно в HTML. Главное отличие PHP от какого-либо кода, выполняемого на стороне клиента, это то, что PHP-скрипты выполняются на стороне сервера [17].
Объектно-ориентированный язык программирования 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.
.2 Организация структуры сценария сайта
Опишем организационную структуру сценария сайта с помощью так называемых навигационных карт.
Навигационной картой называют блок-схему пользовательского интерфейса экранов (кадров), которая является методом перехода от одного кадра к другому или от одного блока информации к другому.
Принято выделять четыре основных способа построения сценария в виде алгоритма или блок схемы: линейный алгоритм, иерархический алгоритм, нелинейный алгоритм, смешанный алгоритм.
При разработке навигационной карты сайта использован смешанный алгоритм, данный алгоритм позволяет пользователю выбирать маршруты переходов, ограничиваясь лишь линейными участками логической последовательности сценария.
Блок-схема сайта представлена на рисунке 5.1.
Рисунок 5.1 - Блок-схема сайта
Навигационная карта представлена на рисунке 5.2
Рисунок 5.2 - Навигационная карта
Рассмотрим покадровую или постраничную реализацию сценария сайта. Каждый кадр содержит разнообразное сочетание информационных объектов (текста, графики, звука, видеоизображения).
Структура главной страницы представлена на рисунке 5.3, а описание всех элементов в таблице 5.1.
Рисунок 5.3 - Структура главной страницы
Таблица 5.1 - Описание элементов главной страницы
ЭлементыОписаниеЭлемент 1Изображение отображающее логотип агентства.Элемент 2Контактные данныеЭлемент 3НавигацияЭлемент 4Фильтр поиска недвижимостиЭлемент 5Текстовая информация, содержащая количество объявлений по категориямЭлемент 6Текстовая информация, отображающая популярные объявления в аренде и продажеЭлемент 7Текстовая информация, отображающая информацию об агентствеЭлемент 8Видеоизображение, содержащее советы по выбору квартирыЭлемент 9Видеоизображение, содержащее советы по выбору квартиры в новостройкеЭлемент 10Футер, содержащий копирайт, название агентства и контактные данные.
Структура страницы «Купить» представлена на рисунке 5.4, а описание всех элементов в таблице 5.2.
Рисунок 5.4 - Структура страницы «Купить»
Таблица 5.2 - Описание элементов страницы «Купить»
ЭлементыОписаниеЭлемент 1Изображение отображающее логотип агентства.Элемент 2Контактные данныеЭлемент 3НавигацияЭлемент 4Текстовая информация, содержащая количество объявлений по категориямЭлемент 5Фильтр параметров поискаЭлемент 6Меню сортировкиЭлемент 7Изображение найденного объекта недвижимостиЭлемент 8Текстовая информация, описывающая найденный объект недвижимостиЭлемент 9Футер, содержащий копирайт, название агентства и контактные данные.
На рисунке 5.5 представлена структура страницы «О нас», а описание всех элементов в таблице 5.3.
Рисунок 5.5 - Структура страницы «О нас»
Таблица 5.3 - Описание элементов страницы «О нас»
ЭлементыОписаниеЭлемент 1Изображение отображающее логотип агентства.Элемент 2Контактные данныеЭлемент 3НавигацияЭлемент 4Титульная надпись («О нас»)Элемент 5Текстовая информация, отображающая полную информацию об агентствеЭлемент 6Изображение сотрудника агентства с информацией о немЭлемент 7Изображение сотрудника агентства с информацией о немЭлемент 8Изображение сотрудника агентства с информацией о немЭлемент 9Изображение сотрудника агентства с информацией о немЭлемент 10Изображение сотрудника агентства с информацией о немЭлемент 11Изображение сотрудника агентства с информацией о немЭлемент 12Футер, содержащий копирайт, название агентства и контактные данные.
5.3 Оценка надежности сайта
Проведем оценку надежности разработанного сайта по простой интуитивной модели. Данная модель предполагает проведение тестирования двумя группами программистов независимо друг от друга.
В процессе тестирования из групп фиксируются найденные ошибки, затем результаты групп собираются и сравниваются.
Пусть первая группа обнаружила N1 ошибок, вторая - N2 ошибок. Ошибки, обнаруженные обеими группами N12. Обозначим через N неизвестное количество ошибок, присутствующих в программе до начала тестирования. Эффективность тестирования каждой из групп определяется по формуле (5.1).
, . (5.1)
Предполагаем, что возможность обнаружения всех ошибок одинакова для обеих групп.
Неизвестное количество ошибок, присутствующих в программе до начала тестирования определяется по формуле (5.2).
(5.2)
Обе группы, проводящие тестирование имеют равную вероятность обнаружения общих ошибок, которая определяется по формуле (5.3).
(5.4)
В нашем случае программа тестировалась двумя группами независимых тестировщиков, которые выявили 8 и 4 ошибок, при этом оказалось, что 3 ошибок нашли обе группы. Найдем общее количество ошибок в программе до начала тестирования.
Проведя расчеты, получим, что общее количество ошибок в программе до начала тестирования равно 10.
Отсюда можно сделать вывод, что дальше продолжать отладку не нужно.
Далее найдем вероятность обнаружения общих ошибок.
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.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 - Страница «Юридические услуги»
.2 Руководство администратора системы
Данный сайт разработан с помощью таких средств разработки, как Html5, CSS3, Php, Java Script, jQuery, Sass, MySQL.
Для просмотра и редактирования сайта нужно воспользоваться программой Denwer либо использовать браузер Google Chrome и открыть вкладку «Посмотреть код», либо «Посмотреть код страницы», с помощью них можно производить отладку и просмотр внесенных изменений. Редактировать код можно с помощью программы Sublime Text3. Для просмотра и редактирования базы данных необходимо зайти в панель PhpMyAdmin.
Панель представлена на рисунке 6.16.
Рисунок 6.16 - Панель PhpMyAdmin
.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с.
. Грачев, А. Создаем свой сайт на WordPress / А. Грачев - Санкт-Петербург: Питер, 2014. - 272с.
. Норт, Б. Joomla! Практическое руководство / Б. Норт - Москва: Символ-плюс, 2008. - 464с.
. Шпак, Ю. Web-разработка средствами MODx / Ю. Шпак - Москва: МК-Пресс, 2012. - 400с.
. Роббинс, Дж. HTML5 / Дж. Роббинс. - Санкт-Петербург: Питер, 2015. - 192с.
. Мейер, Э. CSS3. Каскадные таблицы стилей / Э. Мейер. - Санкт - Петербург: Питер, 2015. - 450с.
. Уэнц, К. PHP и MySQL / К. Уэнц. - Москва: Вильямс, 2015. - 256с.
. Слепцова, Л.Д. JavaScript / Л.Д. Слепцова. - Москва: Диалектика, 2008. - 448с.
. Гольцман, В. MySQL 5.0 / В. Гольцман. - Санкт-Петербург: Питер, 2010. - 253с.