Разработка сайта для ведения блога с элементами социальных сетей

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

1

Введение

блог интернет сайт интерфейс

Слово блог берет свой исток от термина web-log, что в свою очередь можно трактовать, как интернет-журнал событий, онлайн-дневник. Но, по сути, блог -- это разновидность сайта с публикации которого выходят с регулярной периодичностью и отображаются в хронологическом порядке. Блоги, как правило, имеют узкую специализацию и сосредоточены на описании конкретной темы, например, веб-дизайн, или видео-блог с событиями из жизни. Часто встречаются сайты с широким диапазоном тем, такой как «Лайфхакер» и это тоже блог. Ведь блог мы узнаем по манере публикаций и наличию вышеописанных возможностей, а автором (блогеров) может быть сколько угодно на ресурсе. Совокупность блогов принято называть -- блогосферой, ну а их автором соответственно -- блогерами. Блог может быть как персональным, так и корпоративным, отличительной особенностью блога от простых сайтов является идеология публикаций и возможностей.

Цель данной работы - создать интернет-сайт для ведения блога.

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

Для достижения поставленной цели будут решены следующие задачи:

1. Анализ предметной области и определение требований к системе

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

3. Выбор архитектуры приложения

4. Создание use-case диаграммы

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

6. Проектирование пользовательского интерфейса

7. Разработка серверной части приложения

8. Разработка клиентской части приложения

9. Тестирование приложения

1. Аналитический обзор

1.1 Задачи, решаемые веб-сайтом

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

Задачи, решаемые блогом:

Привлекает целевых клиентов из поисковых систем.

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

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

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

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

Информационная функция. Новые и повторные продажи.

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

SEO продвижение.

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

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

Информационная поддержка.

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

Повышает уровень доверия к проекту.

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

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

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

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

По целям создания различают:

· тематические;

· общетематические;

· имиджевые;

· бизнес-ресурсы

Тематические ресурсы посвящают только одной теме: или музыке, или только политике, или путешествиям, или увлечению. К таким ресурсам относят корпоративные. Еще тематическими являются сплоги (сайт-блоги или спам-блоги), созданные, чтобы раскручивать другие ресурсы или для ведения спам-рассылок.

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

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

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

1.2 Обзор аналогов

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

Непрямыми аналогами разрабатываемой системы являются другие сайты для интернет-блоггинга. Наиболее популярные платформы на данный момент LiveInternet, LiveJournal, Blogger.

LiveInternet -- одна из крупнейших в российском Интернете блог-платформа, предоставляющая каждому пользователю возможность ведения собственного дневника, интегрирующего блоги разных пользователей, организующего общение между пользователями блогов, а также подписку на обновления в блогах интересующих людей. LI -- интернет-портал, собравший в 2003 году воедино счётчик статистики rax.ru и сервис дневников li.ru, разработанные командой разработчиков под руководством Германа Клименко. В дальнейшем, вокруг сайта Liveinternet.ru были собраны остальные проекты разработчика, а две основные его составляющие остались самыми популярными среди пользователей сервисами.

LiveJournal -- блог-платформа для ведения онлайн-дневников (блогов), а также отдельный персональный блог, размещённый на этой платформе. Предоставляет возможность публиковать свои и комментировать чужие записи, вести коллективные блоги, добавлять в друзья других пользователей и следить за их записями в «ленте друзей». До декабря 2012 года отличался отсутствием обязательной рекламы в бесплатных блогах. До конца декабря 2016 года «Живой Журнал» подчинялся американским законам, так как его серверы находились в США и система принадлежит американской компании LiveJournal, Inc., но с декабря 2016 года ЖЖ размещен на серверах российской компании «Rambler&Co». В рунете «Живой Журнал», согласно его статистике, имеет значительную посещаемость, фактически функционируя в роли популярной социальной сети. Свои «живые журналы» есть у многих известных в России людей, а также у партий, общественных движений и организаций.

К недостаткам можно отнести неприглядный интерфейс сервиса и скудные возможности для оформления блогов. Затачивать функциональность под себя, как в WordPress, нельзя. Бесплатно пользователь получает субдомен (имя_блога.livejournal.com) и всего 1 ГБ для хостинга файлов.

Blogger -- веб-сервис для ведения блогов, с помощью которого любой пользователь может завести свой блог, не прибегая к программированию и не заботясь об установке и настройке программного обеспечения. Blogger был создан компанией Pyra Labs, которой сейчас владеет Google. До 1 мая 2010 посты Blogger могли автоматически переноситься на хостинг владельца блога при помощи FTP или SFTP. В середине июля 2014 года Google принял решение о закрытии официального справочного форум по Blogger

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

WordPress.com -- пожалуй, самый богатый по возможностям сервис для создания блога. Бесплатная версия включает в себя множество функций счетчики трафика, фильтры против спама, SEO, великолепные темы оформления и др. Многие популярные блоги, в том числе блог CNN politics, сделаны на этой платформе. Если вам понадобится больше возможностей, чем предложено в бесплатной версии, то вы можете воспользоваться премиум-пакетом, в который входит заказ доменов, расширенные ресурсы хостинга и др. Неважно кем вы являетесь в блогосфере, экспертом или новичком, эта платформа будет хорошим выбором в любом случае.

Blog.com -- это ещё одна платформа для ведения блога, разработанная на программном обеспечении WordPress. Как и другие сервисы, она имеет свои плюсы и минусы. С одной стороны, вам будет предложено много красивых тем и современных плагинов для бесплатных аккаунтов, которые можно использовать. С другой стороны, на сервисе больше рекламных объявлений, чем на WordPress.com (но вы можете заказать платное обновление, чтобы реклама исчезла).

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

Tumblr является популярной и многофункциональной платформой микроблогов. Предоставляет ряд замечательных, интересных функций, таких как аудио-блоггинг (поделиться музыкой, к примеру), бесплатные настраиваемые домены, сотни потрясающих бесплатных тем оформлений. Кроме того, вы сможете синхронизировать свой аккаунт в Tumblr с Facebook и/или Twitter так, чтобы обновлять собственный контент только в одном ресурсе. Еще одной отличительной особенностью является создание групповых блогов. Tumblr поддерживает Google Analytics и Feedburner.

Posterous Spaces является хорошим сервисом, схожим во многом с Tumblr. Он обладает хорошей системой приватности и просмотра публикаций, так что вы можете легко контролировать круг людей, которые могут видеть ваши публикации в этом сервисе. Все функции были разработаны так, чтобы пользователи могли публиковать контент максимально быстро и без каких-либо проблем. Сервис обладает рядом особенностей, включая бесплатные мобильные приложения на iOS и Android смартфоны, давая возможность обновлять блог на ходу, используя простой, удачно-разработанный пользовательский интерфейс.

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

TypePad Micro - ещё один достойный сервис по созданию и ведению блога. Из его плюсов: очень удобный интерфейс и возможность импорта/экспорта содержимого блога из других сервисов. Но, что касается количества приложений и предлагаемых тем TypePad Micro, то вряд ли оно удовлетворит самого обычного блоггера. Самая дешевая учетная запись обойдется пользователю в $8.95 за месяц и будет включать в себя дополнительные темы оформления, собственный домен, а также техническую поддержку. В эпоху, когда почти все сервисы блогов предлагают многочисленные возможности в бесплатной версии, TypePad Micro выглядит несколько отстающим.

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

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

· Система должна учитывать особенности современной блогосферы.

1.3 Категории пользователей

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

· Пользователь - он же автор и/или комментатор.

o Незарегистрированный - может просматривать сайт.

o Зарегистрированный - имеет все возможности незарегистриро-ванного пользователя, а также может просматривать историю своих записей.

· Администратор - имеет доступ к панели управления. В панели управления можно производить редактирование статей, категорий, просматривать список статей, пользователей, статистику интернет-сайта.

1.4 Бизнес-правила

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

1. Каждая статья характеризуется следующими параметрами:

a. название

b. автор

c. дата написания

d. категория

e. текст статьи

2. Покупатель может выбрать любую тему и написать пост на эту тему.

3. В системе ведется список авторов. Для каждого автора сохраняется имя и электронная почта.

4. Покупатель может написать неограниченное число постов в блог.

5. Написанный пост сохраняется в базе данных вместе с именем и электронной почтой автора.

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

7. В системе ведется архив удаленных постов.

8. В системе записывается количество просмотров каждого поста. Просмотр - это посещение страницы отдельной статьи на сайте.

9. Покупатель должен иметь возможность просмотра списка своих записей.

10. При добавлении записи в блог ставится дата размещения на сайте.

11. При изменении записи в блоге на странице записи ставится дата изменения.

12. Администратор может просматривать список записей в блоге.

13. Администратор может просматривать статистику сайта.

14. Статистика магазина делится на основную и подробную.

15. Основная статистика магазина содержит в себе такую информацию:

a. Общее количество записей в блоге

b. Общее количество отдельно авторов

c. Общее количество пользователей

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

17. Подробная статистика должна содержать такую информацию:

a. Количество записей

b. График по количеству просмотров

2. Проектирование

2.1 Use-case диаграмма

На рисунке 3.1 представлена use-case диаграмма. В ней показаны две роли: пользователь и администратор.

Рисунок 2.1 - Use-case диаграмма

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

· Просмотр списка записей;

· Добавление новых записей в блог (требует авторизации или регистрации);

· Просмотр списка своих записей (требует авторизации или регистрации).

Администратор имеет доступ к таким функциям как:

· Просмотр статистики сайта;

· Просмотр списка всех статей;

· Изменение списка категорий.

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

2.2 Выбор архитектуры приложения

В компьютерных технологиях трёхуровневая архитектура, а предполагает наличие следующих компонентов приложения: клиентское приложение (обычно говорят «тонкий клиент» или терминал), подключенное к серверу приложений, который в свою очередь подключен к серверу базы данных. Схема данной архитектуры показана на рисунке 3.2.

Рисунок 2.2 - Схема трехуровневой архитектуры приложения

Обзор архитектуры:

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

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

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

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

По сравнению с клиент-серверной или файл-серверной архитектурой можно выделить следующие достоинства трёхуровневой архитектуры:

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

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

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

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

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

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

По сравнению c клиент-серверной или файл-серверной архитектурой можно выделить следующие недостатки трёхуровневой архитектуры:

· Более высокая сложность создания приложений;

· Сложнее в разворачивании и администрировании;

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

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

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

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

Выбраны технологии в серверной части:

· Spring Framework - ядро платформы, предоставляет базовые средства для создания приложений -- управление компонентами, внедрение зависимостей, транзакции, базовый доступ к БД;

· Spring MVC - компонент, обеспечивающий архитектуру паттерна Model-View-Controller;

· Spring Security - для обеспечения авторизации в приложении, защиты от атак типа фиксация сессии, межсайтовая подделка запроса, и т.д.;

· Hibernate 5 -- это библиотека, которая предназначена для отображения объектов объектно-ориентированного языка в структуры реляционных баз данных.

Spring Framework -- это фреймворк приложений и инверсия контейнера управления для платформы Java. Основные функции фреймворка могут использоваться любым приложением Java, но есть расширения для создания веб-приложений на основе платформы Java EE (Enterprise Edition). Хотя среда не навязывает какую-либо конкретную модель программирования, она стала популярной в сообществе Java как дополнение или даже замена модели Enterprise JavaBeans (EJB). Spring Framework является открытым исходным кодом.

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

Hibernate -- это бесплатное программное обеспечение, которое распространяется под лицензией GNU Lesser General Public License 2.1.

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

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

Eclipse Jetty -- это сервер HTTP (Web) и контейнер сервлетов Java. В то время как веб-серверы обычно ассоциируются с предоставлением документов людям, Jetty сейчас часто используется для обмена данными между компьютерами, обычно в рамках более крупных программных сред. Jetty разрабатывается как бесплатный проект с открытым исходным кодом как часть Eclipse Foundation. Веб-сервер используется в таких продуктах, как Apache Maven, Apache Spark, Google App Engine, Eclipse. Jetty также является сервером в проектах с открытым исходным кодом, таких как Lift, Eucalyptus, OpenNMS, Red5, Hadoop и I2P. Jetty поддерживает новейший Java Servlet API (с поддержкой JSP), а также протоколы HTTP/2 и WebSocket.

Для клиентской части используется набор языков для веб разработки: HTML, CSS, JS. Стили страниц написаны на языке SASS - это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS кода и упрощения файлов каскадных таблиц стилей. Также используется CSS фреймворк Bootstrap 4 он нужен для ускорения верстки сайта и панели управления, а также повышения адаптивности всего веб приложения.

В качестве системы управления базой данных была выбрана MySQL. Это свободная реляционная система управления базами данных. Разработку и поддержку MySQL осуществляет корпорация Oracle.

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

База данных состоит из 13 таблиц. Схема базы представлена на рисунке 2.3. В приложении А расположена SQL-схема базы данных.

Рисунок 2.3 - Схема базы данных приложения

Описание таблиц базы данных:

Post - таблица для хранения списка статей.

Описание полей:

· Id - уникальный идентификатор

· Title - название статьи

· Content - текст статьи

· Author - автор статьи

· Views - количество просмотров статьи

· Status - статус статьи (активен, скрытый, итд)

· Publish_date - дата добавления на сайт

Category - список категорий записей.

Post_category - таблица связка категории и записи.

Authors - таблица для хранения списка авторов и их статей.

Описание полей:

· Id - уникальный идентификатор автора

· Post_id - идентификатор статьи

Author_post - таблица связка статей и авторов.

User - таблица для хранения пользователей.

Описание полей:

· Id - уникальный идентификатор пользователя

· Discriminator - техническое поле. Используется для ORM Hibernate чтобы разделять пользователей на администраторов и обычных пользователей.

· Username - имя пользователя

· Password - пароль пользователя в зашифрованном виде

· Email - электронная почта покупателя

User_role - таблица связка пользователя и его роли. В приложении всего 2 роли: USER и ADMIN.

Связи:

Связь 1:M между таблицей post и таблицами post_category, content. Установлено правило на удаление CASCADE. То есть при удалении записи из таблицы post, будут удалены связные строки и из дополнительных таблиц.

Связь 1:М между таблицей category и post_category. Установлено правило на удаление CASCADE. То есть при удалении категории из справочника она будет удалена и из таблиц связок.

Связь 1:М между таблицей user и authors. Установлено правило на удаление CASCADE.

Связь 1:М между таблицей user и user_role. Установлено правило на удаление CASCADE.

Связь 1:М между таблицей authors и author_post. Установлено правило на удаление CASCADE.

Связь 1:1 между таблицей author_post и content. Установлено правило на удаление CASCADE.

2.5 Проектирование пользовательского интерфейса

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

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

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

1. Чем проще, тем лучше. Это вовсе не значит, что должен быть только текст и контактная информация, но на сайте не должно быть бесполезной информации, шрифт должен легко читаться. Графические элементы должны быть были чёткими, выразительными и быстро загружаться. На сайте блога недопустимо использовать анимацию и звук, которые долго загружаются и отвлекают внимание пользователя.

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

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

· «Последние» (статьи, недавно опубликованные на сайте);

· «Популярные» (наиболее просматриваемые статьи).

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

Рисунок 2.4 - Макет главной страницы магазина

На рисунке 3.5 показан макет информации о статье. Страница информации о статье разделена на несколько блоков. Слева расположена информация об авторе и кнопки оценки материала. Справа расположено тело статьи с графическими материалами.

Рисунок 2.5 - Макет страницы товара

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

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

3. Реализация

3.1 Серверная часть системы

3.1.1 Описание пакетов

Пакет dao. Для хранения data access object. В программном обеспечении data access object (DAO) -- это объект, который предоставляет абстрактный интерфейс к какому-либо типу базы данных или механизму хранения. Определённые возможности предоставляются независимо от того, какой механизм хранения используется и без необходимости специальным образом соответствовать этому механизму хранения. Этот шаблон проектирования применим ко множеству языков программирования, большинству программного обеспечения, нуждающемуся в хранении информации и к большей части баз данных, но традиционно этот шаблон связывают с приложениями на платформе Java Enterprise Edition, взаимодействующими с реляционными базами данных через интерфейс JDBC, потому что он появился в рекомендациях от фирмы Sun Microsystems.

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

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

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

В этом пакете хранятся классы, представляющие собой DAO сущностей базы данных и средства для работы с ними, такие как:

· user

· content

· tag

· contentTag

· type

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

Свойство объекта является атрибутом объекта, но иногда трудно сказать, должен ли элемент базы данных быть объектом или свойством. Для этого вам нужно спросить себя: «Является ли элемент первостепенным интересом для базы данных или нет?» Например, «адрес электронной почты» представляет прямой интерес для «базы данных электронной почты», но, если вы создаете «базу данных клиентов» «клиент» будет объектом базы данных, а «адрес электронной почты» будет собственностью клиента.

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

В этом пакете хранятся классы, представляющие собой описания сущностей базы данных, такие как:

· user

· content

· tag

· contentTag

· type

Пакет servlets. Для хранения сервлетов. Сервлет является интерфейсом Java, реализация которого расширяет функциональные возможности сервера. Сервлет взаимодействует с клиентами посредством принципа запрос-ответ. Хотя сервлеты могут обслуживать любые запросы, они обычно используются для расширения веб-серверов. Для таких приложений технология Java Servlet определяет HTTP-специфичные сервлет классы. Пакеты javax.servlet и javax.servlet.http обеспечивают интерфейсы и классы для создания сервлетов.

Первая спецификация сервлетов была создана в Sun Microsystems (версия 1.0 была закончена в июне 1997). Начиная с версии 2.3, спецификация сервлетов разрабатывалась под руководством Java Community Process. Стандарт JSR 53 определял как Servlet 2.3, так и спецификацию JavaServer Page 1.2. JSR 154 включает в себя спецификации Servlet 2.4 и 2.5. Текущая спецификация на 13 июня 2013 года -- Servlet 3.1 (описана в JSR-340).

Сервлет Java обрабатывает или хранит класс Java в Java EE, который соответствует API сервлета Java, стандарту для реализации классов Java, которые отвечают на запросы. Сервлеты в принципе могут взаимодействовать по любому клиент-серверному протоколу, но чаще всего они используются с HTTP. Таким образом, «сервлет» часто используется в качестве сокращения для «сервлета HTTP». Таким образом, разработчик программного обеспечения может использовать сервлет для добавления динамического контента на веб-сервер с использованием платформы Java. Сгенерированный контент обычно представляет собой HTML, но это могут быть и другие данные, такие как XML и чаще JSON. Сервлеты могут поддерживать состояние в переменных сеанса во многих транзакциях сервера, используя файлы cookie HTTP или сопоставление URL-адресов.

API сервлетов Java в некоторой степени был заменен двумя стандартными технологиями Java для веб-сервисов:

· API Java для веб-сервисов RESTful (JAX-RS 2.0), полезный для сервисов AJAX, JSON и REST, и

· Java API для веб-служб XML (JAX-WS), полезный для веб-служб SOAP.

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

Servlet API, содержащийся в иерархии пакетов Java javax.servlet, определяет ожидаемое взаимодействие веб-контейнера и сервлета.

Сервлет -- это объект, который получает запрос и генерирует ответ на основе этого запроса. Базовый пакет сервлета определяет объекты Java для представления запросов и ответов сервлета, а также объекты для отображения параметров конфигурации сервлета и среды выполнения. Пакет javax.servlet.http определяет специфичные для HTTP подклассы общих элементов сервлета, включая объекты управления сеансами, которые отслеживают множественные запросы и ответы между веб-сервером и клиентом. Сервлеты могут быть упакованы в файл WAR как веб-приложение.

Сервлеты могут генерироваться автоматически из JavaServer Pages (JSP) компилятором JavaServer Pages. Разница между сервлетами и JSP заключается в том, что сервлеты обычно встраивают HTML-код в код Java, тогда как JSP-файлы встраивают код Java в HTML. Хотя прямое использование сервлетов для генерации HTML (как показано в примере ниже) стало редкостью, веб-инфраструктура MVC более высокого уровня в Java EE (JSF) все еще явно использует технологию сервлетов для низкоуровневой обработки запросов / ответов с помощью FacesServlet. Несколько более старое использование состоит в том, чтобы использовать сервлеты в сочетании с JSP в шаблоне, называемом «Модель 2», который является разновидностью модели - вида - контроллера.

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

Хотя базовый набор служебных программ обычно распространяется с операционной системой (ОС), а служебное программное обеспечение считается частью операционной системы, пользователи часто устанавливают замены или дополнительные утилиты. Эти утилиты могут предоставлять дополнительные возможности для выполнения задач, выходящих за пределы возможностей операционной системы.

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

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

По зависимости от операционной системы можно различать:

· Независимые утилиты, не требующие для своей работы операционной системы;

· Системные утилиты, входящие в поставку ОС и требующие её наличия;

· Оптимизатор диска для восстановления целостности файловой системы и дефрагментации.

3.1.4 Mapping сущности Content в Hibernate

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

· Преобразование данных или передача данных между источником данных и пунктом назначения

· Идентификация отношений данных как часть анализа происхождения данных

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

· Консолидация нескольких баз данных в одну базу данных и определение избыточных столбцов данных для консолидации или исключения

Например, компания, которая хотела бы передавать и получать покупки и счета-фактуры с другими компаниями, могла бы использовать сопоставление данных для создания карт данных из данных компании в стандартизированные сообщения ANSI ASC X12 для таких элементов, как заказы на покупку и счета-фактуры.

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

Рассмотрим подробнее маппинг одного из классов в приложении. Для примера возьмём класс Content - сами записи, размещённые в блоге. Над объявлением класса мы видим две аннотации:

@Entity - показывает, что это сущность и Hibernate мог начать маппинг.

@Table(name = "content") - указание на название таблицы в базе данных.

У каждого геттера есть свои аннотации. В основном они сильно не отличаются. Например, для поля title имеем такую аннотацию:

@Column(name = "id") - она указывает на название поля в базе данных. Иногда приходится указывать тип данных явно, для этого используется еще один параметр. Например, для поля content. В базе оно имеет тип данных TEXT, а в классе тип данных string. Hibernate не может сделать неявное преобразование. Поэтому надо указать columnDefinition = "TEXT".

Также в базе данных у нас есть таблицы связки. Для того чтобы Hibernate корректно получал данные из базы требуется описать эти таблицы. У поста есть таблица связка пост-тег. Список постов в сущности Student аннотирован с помощью @ManyToMany. Далее следует аннотация @JoinTable, которая определяет таблицу и поля для связи. Параметр name указывает название таблицы (post_tags). Параметр joinColumns указывает на поле, которое используется для прямой связи (идентификатор content_id). Параметр inverseJoinColumns указывает на поле, которое используется для обратной связи (идентификатор tag_id). Для указания столбцов связи из таблицы используется аннотация @JoinColumn. Сущность тега Tag описана "зеркально".

3.2 Клиентская часть системы

3.2.1 Разработка интерфейса

Веб-интерфейс относится к интерфейсу системы, к которому можно обратиться по протоколу передачи гипертекста (HTTP). Это

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

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

Примерами веб-интерфейсов являются API Google, который позволяет программному обеспечению получать доступ к возможностям поисковой системы через SOAP и WSDL, или встроенный веб-сервер маршрутизатора DSL, который позволяет пользователю вносить изменения в конфигурацию устройства.

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

Все Web-страницы одного сервера должны быть оформлены в едином стиле. Это создаст дополнительное представление о сайте.

Дизайн Web-страниц предполагает разработку следующих элементов:

· цвет;

· шрифт;

· графика;

· компоновка.

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

Единая цветовая гамма Web-страниц способствует быстрому и полному восприятию содержания. Как правило, лучшая комбинация цветов для чтения - белый фон и черный текст.

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

Интерфейс сайта для пользователя разделен на файлы jsp. Каждый файл отвечает за вывод определенной части страницы. Файл может подключать внутри себя другие файлы.



Рисунок 3.1 - Блок-схема алгоритма вывода меню

· Index.jsp - главная страница сайта изображена на рисунке 3.2.

· Login.jsp - страница авторизации.

· Register.jsp - страница регистрации.

· Contact.jsp - страница обратной связи изображена на рисунке 3.3.

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

Рисунок 3.3 - Страница обратной связи

Интерфейс сайта для администратора также разделен на файлы jsp.

· Index.jsp - главная страница панели управления.

· Settings.jsp - страница настроек сайта. На этой странице можно добавлять и удалять администраторов приложения.

· Users.jsp - раздел панели управления в котором можно просматривать и редактировать список пользователей на сайте.

· Content.jsp - раздел панели управления в котором можно просматривать и редактировать список статей на сайте

· Authors.jsp - раздел панели управления в котором можно просматривать и редактировать список авторов и их статей.

4. Тестирование

4.1 Методика тестирования

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

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

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

· правильно реагирует на все виды входов,

· выполняет свои функции в приемлемые сроки,

· это достаточно удобно,

· может быть установлен и запущен в предполагаемой среде, и

· достигает общего результата, которого желают заинтересованные стороны.

4.1.1 Модульное тестирование серверной части

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

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

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

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

Написание и ведение модульных тестов можно ускорить с помощью параметризованных тестов (PUT). Это позволяет выполнять один тест несколько раз с разными наборами ввода, тем самым уменьшая дублирование кода теста. В отличие от традиционных модульных тестов, которые обычно являются закрытыми методами и тестируют инвариантные условия, PUT принимают любой набор параметров. PUT были поддержаны TestNG, JUnit и его аналогом .Net, XUnit. Подходящие параметры для модульных тестов могут быть предоставлены вручную или, в некоторых случаях, автоматически генерироваться рамкой теста. В последние годы была добавлена ??поддержка написания более мощных (модульных) тестов, использующих концепцию теории. Параметризованный тест использует одни и те же шаги выполнения с несколькими предварительно определенными наборами ввода. Теория - это тестовый пример, который выполняет те же самые шаги, но входные данные могут быть предоставлены методом генерирования данных во время выполнения.

4.1.2 Тестирование верстки серверной части

Тестирование верстки приложения проходит вручную и состоит из 2 этапов:

1. Визуальное тестирование. У современного тестировщика есть множество помощников в виде различных инструментов, стандартов и стайлгайдов (инструкций об общепринятых обозначениях кнопок и визуальных эффектов на сайтах). Опираясь на них, можно качественно и быстро протестировать продукт в целом и верстку в частности. Начнем с тестирования внешнего вида страницы. В первую очередь сравним имеющуюся страницу с макетом. Блоки должны совпадать с макетом идеально, для текста же существует допустимый зазор в 5 рх. Для измерения таких деталей существует инструмент PerfectPixel: достаточно наложить полупрозрачный макет на итоговое решение - и мы сразу увидим различия, ежели таковые имеются. После проверки общей картинки переходим к деталям. Разобраться со шрифтами поможет, например, What Font. Проверить многообразие цветов - Color Zilla. Убедиться в правильности написания контента - Spell Checker.

2. Валидация HTML кода. Большинство страниц в World Wide Web написаны на компьютерных языках (таких как HTML), которые позволяют авторам веб-страниц структурировать текст, добавлять мультимедийный контент и указывать, какой внешний вид или стиль должен иметь результат. Что касается каждого языка, у них есть своя собственная грамматика, словарь и синтаксис, и каждый документ, написанный на этих компьютерных языках, должен следовать этим правилам. Языки (X) HTML для всех версий вплоть до XHTML 1.1 используют машиночитаемые грамматики, называемые DTD, механизм, унаследованный от SGML. Однако так же, как тексты на естественном языке могут содержать орфографические или грамматические ошибки, документы, использующие языки разметки, могут (по разным причинам) не следовать этим правилам. Процесс проверки того, действительно ли документ следует правилам для языка (-ов), который он использует, называется валидацией, а инструмент, используемый для этого, является валидатором. Документ, который успешно проходит этот процесс, называется действительным.