ПЗ (1192662), страница 6
Текст из файла (страница 6)
4) контактная информация;
5) новости компании;
6) медиа и статьи.
Структура динамического сайта для предприятия представлена на рисунке 2.
Рисунок 2 – Структура сайта
Для разработки сайта будет использоваться программный продукт MicrosoftVisualStudioCommunityEdition 2015, интерфейс которого представлен на рисунке 3.
Рисунок 3– Интерфейс MS Visual Studio 2015 Community
MS Visual Studio позволяет создавать приложения различного формата, включая динамические подключаемые библиотеки, приложения Windows Forms, веб-сайты и др. В нашем случае мы остановим свой выбор на создании web-приложения. В отличие от статичного веб-сайта, web-приложение позволяет организовывать взаимодействие с пользователем, отправлять данные на обработку, получать сведения в ответ и др. Структурно проект веб-сайта на этапе проектирования состоит из нескольких файлов и папок. веб-страница в процессе проектирования и разработки распадается на два файла, первый из которых – это файл непосредственно веб-страницы, второй – файл с кодом на языке высокого уровня, в нашем случае используется язык C#. Кроме того, в проект могут быть включены различные библиотеки, сборки и прочие необходимые файлы. В остальном процесс разработки веб-приложения не отличается от разработки обычных приложений в любой современной среде программирования – у пользователя есть набор компонентов, со свойствами, которые в зависимости от нужд пользователя устанавливаются в определённые значения. Могут быть также определены константы и переменные, необходимые в процессе выполнения программы.
Важным понятием в процессе разработки веб-страницы является так называемая «мастер-страница», представляющая собой шаблон, который видоизменяется в зависимости от того, какую страницу выбрал пользователь, при этом, часть информации в шаблоне остается постоянной.
В данной работе будет использован простой шаблон, имеющий следующую структуру:
В верхней части будет располагаться логотип компании и контактная информация, в средней части слева будет располагаться новостная лента, в центральной и правой части будет размешаться основная информация, в нижней части будет расположена ссылка на форму обратной связи, а также информация рекламного характера.
3.2 Разработка макета страницы
Сайты, как автомобили и здания, сначала отображают в макетах, и лишь потом верстают с помощью html. Если говорить о многостраничных порталах, то макет ресурса будет состоять из макетов всех его страниц.
В большинстве случаев основные элементы управления, их дизайн и стиль одинаковы на всех страницах. Но в основе всей стилистики лежит дизайн основной страницы сайта. Поэтому чаще всего подразумевается разработка макета главной страницы сайта. Именно ее стиль и элементы дизайна наследуют все остальные разделы портала.
Создание макета сайта является одним из основных этапов разработки. Следуя пожеланиям заказчика, менеджер проекта составляет техническое задание. Затем на его основе веб-дизайнер в графическом редакторе создает несколько вариантов внешнего вида будущего портала.
Кроме главной страницы разрабатывается несколько вариантов дизайна всех второстепенных. После этого происходит рассмотрение и утверждение одного из них сначала менеджером проекта, а затем и заказчиком.
В больших студиях в процессе создания и утверждения макета участвует также художник. Сроки разработки вариантов эскизов и их количество оговариваются руководителем проекта с клиентом на первых этапах разработки.
Для создания сайта предприятия ИП Ермоленко был разработан макет страницы, представленный на рисунке 4.
Рисунок 4 – Макет главной страницы сайта.
3.3 Проектирование базы данных
Для разработки базы данных используется MS SQL Server Management Studio 2012 – инструмент, позволяющий с использованием удобного пользовательского интерфейса проводить проектирование и разработку баз данных. В предыдущих разделах была определена информация, представляемая на сайте, что позволило сформировать структуру базы данных. Рассмотрим её более подробно. База данных содержит несколько таблиц, каждая из которых описывает определённую сущность (таблицы 2–4).
Таблица 2 – Структура таблицы «Новости»
| № | Имя поля | Тип данных | Описание |
| 1 | ID | uniqueidentifier | Уникальный идентификатор, первичный ключ |
| 2 | Текст новости кратко | varchar(MAX) | Краткий текст новости, предназначенный для вывода в качестве заголовка |
| 3 | Текст новости полно | varchar(MAX) | Полный текст новости, открывающийся при щелчке на заголовок |
| 4 | Начало показа | date | Дата начала отображения новости |
| 5 | Конец показа | date | Дата окончания отображения новости |
Интерфейс программного продукта представлен на рисунке 5.
Рисунок 5– Интерфейс MS Visual Studio Express Edition
Таблица 3 – Структура таблицы «Услуги»
| № | Имя поля | Тип данных | Описание |
| 1 | ID | uniqueidentifier | Уникальный идентификатор, первичный ключ |
| 2 | Наименование услуги | varchar(MAX) | Наименование услуги, например «Восстановление информации» |
| 3 | Стоимость услуги | float | Стоимость услуги. Например, 100,00. Выражается в рублях. |
Таблица 4 – Структура таблицы «Сообщения обратной связи»
| № | Имя поля | Тип данных | Описание |
| 1 | ID | uniqueidentifier | Уникальный идентификатор, первичный ключ |
| 2 | Дата и время сообщения | Datetime | Поле предназначено для хранения даты и времени написания сообщения |
| 3 | Имя пользователя | varchar(10) | Поле предназначено для хранения информации об имени пользователя, оставившего сообщение. Максимальная длина – 10 символов. |
| 4 | Тест сообщения | varchar(300) | Текст сообщения пользователя, максимальная длина – 300 символов. |
В данном разделе была спроектирована база данных, которая будет использоваться в качестве хранилища информации в разработанной информационной системе, таблицы между собой не связаны.
3.4 Интерфейс сайта
Рассмотрим пользовательский интерфейс сайта. Главная страница представлена на рисунке 6
Рисунок 6 – Главная страница
Как можно видеть на рисунке, страница содержит следующие элементы – панель навигации, представленная пунктами меню «Главная», «О компании», «Медиа и ссылки». При нажатии на каждый пункт меню происходит появление подменю, активировав которое можно перейти на соответствую страницу.
Панель новостей позволяет простереть заголовки новостей. Если нажать на заголовок новости, то пользователь будет переадресован на страницу новостей, где может прочесть новость более подробно. Ниже блока новостей располагается блок фотографий, причём при перезагрузке страницы каждый раз происходит смена фотографии, что создаёт некоторый эффект интерактивности. Кроме этого, на главной странице представлена основная информация о деятельности компании. Для того чтобы не перегружать страницу лишней информацией, было принято решение выполнить её структурирование путём размещения на соответствующих страницах необходимой информации.
В нижней части главной страницы располагаются ссылки для перехода в раздел администрирования и ссылка на страницу с контактной информацией. Рассмотрим панель администрирования более подробно.
После щелчка по ссылке «Управление» пользователь будет переадресован на страницу, где ему будет необходимо ввести имя пользователя и пароль. В случае неуспешного ввода ему будет выведено соответствующее сообщение, а в случае успеха – откроется интерфейс администрирования, позволяющей производить манипуляции с контентом.
Интерфейс администрирования представлен на рисунке 7
Рисунок 7– Настройка отображения новостей
Рассмотрим назначения каждой кнопки, представленной на рисунке 7 (таблица 5).
Таблица 5 – Назначение кнопок системы администрирования
| № | Наименование | Описание |
| 1 | Выйти | Кнопка предназначена для выхода пользователя из системы, при этом происходит обнуление сессии администратора, и необходимо будет заново производить вход |
| 2 | Редактировать информацию о сотрудниках | Кнопка предназначена для перехода пользователя на страницу интерфейса, позволяющего выполнять редактирование сведений о сотрудниках, таких как должность, фотография, имя, контактные данные |
| 3 | Редактировать галерею | Данная кнопка предназначения для перехода в интерфейс редактирования галереи, в котором можно выполнить операции по обновлению, удалению или загрузке новых фотографий |
| 4 | Редактировать новости | Данная кнопка предназначена для выполнения перехода в интерфейс редактирования новостей |
| 5 | Редактировать объявления на главной странице | Данная кнопка позволяет перейти в интерфейс редактирования информации на главной странице |
| 6 | Загрузка фотографий | Данная кнопка предназначена для перехода в интерфейс загрузки фотографии |
| 7 | Сообщения обратной связи | Данная кнопка позволяет перейти в интерфейс просмотра и редактирования сообщений обратной связи. |
Для настройки отображения новостей необходимо выполнить заполнение необходимых полей (рисунок 8), после чего происходит сохранение сведений в базу данных.
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
