ВКР (1195834), страница 5
Текст из файла (страница 5)
Однако, в том, чтобы идти против естественного порядка вещей, нет ничего неправильного, но при этом необходимо принимать во внимание возможные последствия подобного решения. Каждое приложение обеспечивает для пользователя определенное восприятие, которое может быть как удобным, так и неудобным. В итоге, наибольшее предпочтение будут иметь те приложения, которые обеспечивают плавный, комфортный и максимально естественный процесс восприятия.
Веб-приложение может иметь сложную структуру, но должно при этом обеспечивать наиболее естественный и удобный подход к восприятию своего содержимого. Приложение, которое обеспечивает удобное восприятие, способствует тому, что у человека возникнет желание еще раз пройтись взглядом по тому, что он уже посмотрел, что позволяет поддерживать у него интерес [10].
2.3 Описание дизайна веб-приложения
Веб-приложение для ООО «Двадцать семь» должно быть выполнено в простом стиле, без излишеств.
Для оформления приложения были выбраны основные цвета белый и красный, кроме того присутствуют желто-коричневые оттенки, так как по желанию заказчика на фоновом изображении должны быть бревна. Однако, текстурный фон отвлекал внимание от основного содержимого приложения, поэтому выбранное изображение было отредактировано таким образом, чтобы не мешать восприятию контента [22].
Для приложения создан логотип (рисунок 3), за основу которого взято доменное имя «obstrok», на котором размещено приложение.
Рисунок 3 – Логотип приложения
Логотип также выполнее с использованием красного и белого цветов.
В цеом приложение выполнено в теплых тонах. Белый цвет способствует более лекгому восприятию, а красный привлекает внимание и позволяет делать акценты на деталях. Например, выделять отдельные блоки меню при наведении мыши (рисунок 4) [16].
Рисунок 4 – Выделение блока меню
По предоставлнению необходимого пользователю контента и реализации предоставляемых услуг приложение делится на несколько страниц.
Для удобства использования навигационное меню и основные функциональные кнопки расположены одинакого на всех страницах, кроме страницы простора бегущей строки, однако она открывается в отдельной вкладке, что позволяет в любой момент легко попасть обратно на основную страницу.
Приложение основано на объявлениях для бегущей строки, однако на главной странице они отображаются блоками и могут содержать вспомогательную фотографию. Пример части страницы с отображением объявлений представлен на рисунке 5.
Рисунок 5 – Фрагмент главной страницы приложения
Навигационное меню позволяет выбирать объявления из определенной ктергории и раздела.
При нажатии на кнопку «Разместить» появляется выпадающий список, в котором можно выбрать размещение объявления или банера.
При размещении объявления пользователь выбирает категория и раздел.ю куда будет помещено объявление, указывает количество дней, на которое желает разместить объявление, вводит текст самого объявления и при необходимости может загрузить фото к объявлению. Форма подачи объявления показана на рисунке 6.
Рисунок 6 – Форма подачи объявления
Кнопка «Готово» будет неактивна пока пользователь не отметит, что принимает условия использования услуг в данном приложении.
Условия можно просмотреть щелкнув на ссылку возле кнопки «Готово» или на кнопку «Условия», размещенную возле кнопки «Разместить».
Для удобства просмотра условий, чтобы пользователю не приходилось переходить на другую страницу, условия открываются в модальном окне поверх открытой страницы. Само содержание условий будет в дальнейшем прописано заказчиком. При открытии условий остальная видимая часть страницы затемняется, чтобы сконцентрировать внимание пользователя на содержании открытого блока условий. Длинна отображаемого блока условий автоматически регулируется в зависимости от количества содержимого в данном блоке. Выйти из режима просмотра условий можно нажав на крестик выхода, на кнопку «Закрыть» или просто щелкнув на пространство рядом с открытым блоком. Пример отображения условий показан на рисунке 7.
Рисунок 7 – Пример отображения условий предоставления услуг
Как и для объявлений, для добавления банерной рекламы тоже есть отдельная форма (рисунок 8).
Рисунок 8 – Форма размещения банерной рекламы
Помимо выбора количества дней размещения и загрузки необходимого файла, также указывается адрес на который будет переходить пользователь при нажатии на данный банер.
Принятие заполненной формы также согласуется с принятием условий использования услуг, предоставляемых приложением.
На всех страницах доступных пользователю в правом верхнем углу есть кнопка «Просмотреть бегущую строку». При переходе по данной кнопке открывается новая вкладка на которой отображается бегущая строка с объявлениями и небольшая панель с настройкой параметров отображения ее содержимого (рисунок 9).
Рисунок 9 – Страница просмотра бегущей строки
Кроме части приложения доступной обычным пользователям также реализована часть административного управления. Админимстративная часть создана для организации проверки подаваемых объявлений и загруженных банеров администратором и обеспечения удобства переноса данных объявлений и банеров из временных таблиц в таблицы, предоставляющие основной контент для данного приложения.
Чтобы попасть в административный раздел необходимо авторизоваться (рисунок 10).
Рисунок 10 – Панель авторизации администратора
Внутри административного раздела имеется четыре вкладки для работы с подаваемыми объявлениями и банерной рекламой: «Новые банеры», «Новые объявления», «Все банеры», «Все объявления». Все данные выводятся таблицами.
На двух вкладках можно просматривать все имеющиеся объявления либо размещенные банера (рисунок 11).
Рисунок 11 – Пример содержимого вкладки «Все банеры»
На других двух вкладках можно просмотреть все новые объявления и банера, а также отредактировать при необходимости данные и добавить их в постоянные таблицы (рисунок 12).
Рисунок 12 – Пример содержимого вкладки «Новые банеры»
Для окончания работы в административном разделе в правом верхнем углу расположена кнопка «Выход». После ее нажатия для входа в данный раздел необходимо будет снова проходить авторизацию.
3 Программная реализация
Для реализации необходимых функций приложения используются такие средства, как HTML, CSS, JavaScript, PHP, MySQL.
Для наполнения приложения необходимым контентом и реализации некоторых частей взаимодействия пользователя с приложением необходимо создать базу данных, которая будет хранить требуемую информацию.
Для данного веб-приложении требуюется создать несколько таблиц, причем некоторые из них будут хранить постоянную неизменяемую информацию, а некоторые буду постоянно менять свое содержимое.
Создаваемая база данных будет иметь семь таблиц, некоторые из них взаимосвязанны между собой, а некоторые нет. Список, необходимых таблиц представлен на рисунке 13.
Рисунок 13 – Список таблиц создаваемой базы данных
Таблица «Admin» хранит в себе логин и пароль для авторизации в разделе администратора. Если вводимый пользователем логин и пароль совпадают с указанными в данной таблице, то пользователю признается администратором и получает доступ к редактированию и внесению данных в базу. При несовпадении логина и пароля пользователю будет отказано в доступе.
Таблицы «Temporary» и «TempBaner» служат для временного хранения данных о поданых объявлениях и банерной рекламе. Именно в эти таблицы попадают данные заполняемые пользователем в формах размещения объявлений и банеров в приложении. Данные хранящиеся в этих таблицах никогда не сможет просмотреть обычный пользователь, но они будут доступны администратору в специальном разделе.
Таблицы «Obyavleniya» и «Baner» хранят соответственно информацию об объявлениях и банерах, которые отображаются в приложении для всеобщего обозрения. Данные в них попадают из временных таблиц «Temporary» и «TempBaner». Администратор при проверке размещенных во временных таблицах данных отправляет их обработчику, с помошью которого они переносятся из временных таблиц в постоянные и удаляются из временных:
if (isset($_POST['id']))
{$id1=$_POST['id'];
$TextOb=$_POST['textOb'];
$Category=$_POST['Cat'];
$TimeDob=($_POST['Now'])." 00:00:00";
$TimeDel=$_POST['del']." 00:00:00";
$Razdel=$_POST['Raz'];
$imm=$_POST['img'];
mysqli_query($msql, "INSERT INTO b180798_ob.Obyavleniya (TextOb,Category,TimeDob,TimeDel,Razdel,img) VALUES ('$TextOb','$Category','$TimeDob','$TimeDel','$Razdel','$imm')");
mysqli_query($msql, "DELETE FROM b180798_ob.Temporary WHERE id='$id1'");}
Однако со временем из этих таблиц они тоже удаляются, но это происходит автоматически по истечении срока, на который было заявлено их размещение.
В таблицах «Kategoriya» и «Podrazdel» хранятся наименования категорий и раззделов по которым распределяются объявления, а также хранятся соответствующие этим наименованиям числовые значения, которыми в таблице «Obyavleniya» задается принадлежность объявления к той или иной ктегории или разделу. Таким образом каждому объявлению задается категория от нуля до двух включительно и раздел от одного до шести включительно, а наименования данных категорий и разделов хранятся в отдельных таблицах. Подобное делается с целью нормализации базы данных, что в свою очередь уменьшает избыточность данных и помогает устранить аномалии данных, которые могут возникнуть вследствие избыточности [23].
Взаимодействие с базой данных осуществляется посредством языка веб-программирования PHP.
Помимо взаимодействия с базой данных с помощью PHP осуществляется управление контентом приложения, а также обработка форм.
Например, благодаря возможности внедрения PHP кода в HTML можно запрограммировать вывод массива данных с помошью цикла, причем он будет на каждой новой итерации генерировать часть HTML кода, выводя новые данные в новых блоках:
<?while($Text = mysqli_fetch_array($query_result)){
$im=$Text['img'];?>
<div class="table-responsive" id="vvv">
<div id="Listik">
<table class="table">
<tr>
![](https://s.studizba.com/z.php?f=/templates/si/i/noavatar.png&w=100&h=100&t=1"){kind=avatar}
