курсоваяя

МИНОБРНАУКИ РОССИИ
ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО
ОБРАЗОВАНИЯ
«РОССИЙСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ
им. А.Н. Косыгина
(ТЕХНОЛОГИИ. ДИЗАЙН. ИСКУССТВО)»
КУРСОВАЯ РАБОТА
на дисциплине: Информационные технологии
на тему: Разработка информационно-аналитической системы
Направление подготовки: 09.03.02 Информационные системы и технологии
Профиль: Информационные технологии в дизайне
Выполнил(а) студент группы МИД-120 Марченко Елизавета Андреевна
Исполнитель
______________
Марченко Е.А.
подпись
Руководитель
______________
Николаева Е.А.
подпись
Консультант
_____________
Фирсов Д.А.
подпись
Москва 2022
3
Федеральное государственное бюджетное образовательное учреждение высшего профессионального
образования «Российский государственный университет имени А.Н. Косыгина (Технологии. Дизайн.
Искусство)»
Кафедра Информационных технологий и компьютерного дизайна
Утверждаю
Зав. кафедрой Фирсов Андрей Валентинович
«16» июня 2022 г.
ЗАДАНИЕ
по курсовому проекту (работе)
Студенту Марченко Елизавете Андреевне группы МИД-120
Тема проекта (работы) Разработка информационно-аналитической системы
Исходные данные: ведётся прием и учет заявок клиентов.
Реализуется возможность регистрации клиента на портале, подача заявки по теме
проекта, личный кабинет пользователя с возможностью отслеживания статуса заявки.
В части администратора реализуется возможность формирования сводного по
поданным заявкам с фильтрацией по полям формы подачи заявки, возможность обработки
каждой конкретной заявки.
Перечень подлежащих разработке вопросов (содержание расчетно-пояснительной
записки)
Разработка БД, разработка клиентского web-приложения, разработка инструмента
администратора, написание руководства программиста, руководства пользователя
Перечень графического материала Функциональная структурная схема приложения,
схема базы данных,
Математические модели, используемые при выполнении проекта (работы): Реляционная модель
базы данных
Технические средства, используемые при выполнении проекта (работы): стенды, модели, приборы,
ЭВМ
Дата выдачи задания 10.02.2022 Срок сдачи 16.06.2022
Исполнитель
______________
Марченко Е.А.
подпись
Руководитель
______________
Николаева Е.А.
подпись
Консультант
_____________
Фирсов Д.А.
подпись
4
Содержание
ВВЕДЕНИЕ ....................................................................................................................................... 6
ГЛАВА 1. ИЗУЧЕНИЕ ПРЕДМЕТНОЙ ОБЛАСТИ ................................................................... 9
1.1.
Обоснование необходимости создания ИАС............................................................................ 9
1.2.
Сведения о предметной области ................................................................................................ 9
1.3.
Миссия компании ....................................................................................................................... 11
ГЛАВА 2. ТЕОРЕТИЧЕСКИЕ АСПЕКТЫ РАЗЗРАБОТКИ ................................................... 13
2.1.
Понятие ......................................................................................................................................... 13
2.2.
Основная концепция и содержание ИАС ............................................................................... 13
2.3.
Спектр решения задач ............................................................................................................... 14
ГЛАВА 3 ИНСТРУМЕНТЫ ДЛЯ РАЗРАБОТКИ ИАС ............................................................ 16
3.1.
Программные средства .............................................................................................................. 16
3.1.1.
XAMPP ................................................................................................................................................. 16
3.1.1.1.
ИАС на XAMPP .......................................................................................................................... 16
3.1.2.
PhpStorm ............................................................................................................................................... 17
3.1.3.
HTML .................................................................................................................................................... 18
3.1.4.
CSS ......................................................................................................................................................... 19
3.1.5.
PHP ........................................................................................................................................................ 19
3.1.6.
PHPMyAdmin ....................................................................................................................................... 19
3.1.7.
Adobe XD ............................................................................................................................................... 20
3.1.8.
JavaScript .............................................................................................................................................. 20
ГЛАВА 4. ПРОЕКТИРОВАНИЕ ИАС......................................................................................... 21
4.1.
Детальная концепция ИАС....................................................................................................... 21
4.2.
Структура ИАС ........................................................................................................................... 26
4.3.
Анализ аналога ИАС по заданной тематике ......................................................................... 26
4.4.
Дизайн ........................................................................................................................................... 28
4.4.1.
4.4.2.
4.4.3.
4.4.4.
4.5.
Восприятие информации, расположенной на Web-странице ..................................................... 29
Цветовая гамма ................................................................................................................................... 29
Правила Web-дизайна ........................................................................................................................ 30
Разработка дизайна............................................................................................................................. 32
Создание базы данных ............................................................................................................... 35
ЗАКЛЮЧЕНИЕ .............................................................................................................................. 37
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ. .................................................................. 39
ПРИЛОЖЕНИЕ.............................................................................................................................. 40
5
ВВЕДЕНИЕ
В современном информационном обществе, Интернет можно смело
назвать неотъемлемой частью бизнеса, позволяющей любой компании
осуществлять деловые коммуникации с такими целевыми группами, как
клиенты.
ИАС
(информационно-аналитическая
система)
-
это
система,
ориентированная большей частью на пользователя. Она должна предоставлять
сервисы просмотра услуг, удобного поиска услуг, легкость и удобство при
оформлении заявки. В то же время, система должна быть ориентирована и на
служащих компании, следящих за новыми заявками. Следует учесть, что
служащие компании не всегда являются квалифицированными программистами.
Информационно-аналитическая система является не только средством
предоставления информации, но и средством получения обратной связи от
посетителей. Именно этот аспект позволяет рассматривать информационноаналитическую систему как полноценную интерактивную информационную
систему. В первую очередь организация двустороннего общения позволяет
узнать, что из себя представляют ваши клиенты и как они относятся к вашей
компании, получить информацию о том, какие товары и услуги наиболее
востребованы, что именно не устраивает ваших клиентов, а также другие важные
данные, необходимые для
успешного развития бизнеса. С помощью
информационно-аналитической системы так же может быть организован обмен
информацией и с деловыми партнерами. Опубликовать на информационноаналитической системе предназначенную для партнеров информацию намного
дешевле и проще, нежели чем связываться с каждым дилером или торговым
представителем индивидуально.
В зависимости от того, какую модель бизнеса выбрала компания и какие
цели она ставит перед собой, на какую аудиторию направлена, зависит то, какая
информация будет представлена на ее информационно-аналитической системе,
какие
инструменты
будут
задействованы
в
нем
и,
как
они
будут
взаимодействовать между собой.
6
В настоящее время практически любой потребитель перед покупкой ищет
информацию об интересующей услуге прежде всего в Глобальной сети,
совершая поиск по различным интернет-сайтам компаний, предлагающих
данные услуги. Это обстоятельство диктует необходимость для организаций,
иметь собственную информационно-аналитическую систему.
Объектом исследования данной работы является Юридическая компания
«КирАл»
Итак, мы определили, что, информационно-аналитическая система – это
достаточно весомый коммерческий инструмент компании. Следовательно, перед
тем как создавать веб-страницу, необходимо четко определить ее цель,
функциональное содержимое, информационное наполнение, внешний вид и
план раскрутки и поддержки.
Целью
курсовой
работы
является
создание
информационно-
аналитической системы юридической компании, обеспечивающую удобство,
безопасность и интуитивную понятность интерфейса пользователю, а также
безошибочную, хорошо организованную работу компании. На сегодня
информационно-аналитическая система выступает как средство коммуникации
привлечения целевой аудитории.
Первым шагом во внедрении электронного бизнеса в хозяйственную
деятельность предприятия и в разработке ИАС в частности должен стать анализ
стратегии развития компании и оценка того, каким образом использование
интернет-технологий сможет помочь развитию бизнеса в настоящий момент и в
перспективе. Исходя из стратегических задач компании, тенденций развития
отрасли и поведения конкурентов и клиентов, необходимо принимать решение о
желаемой степени внедрения электронного бизнеса в деятельность предприятия,
а также об использовании тех или иных решений и технологий.
Данная тема актуальна, поскольку сейчас всё больше людей интересуется
юридическими услугами. И создание информационно-аналитической системы
поможет юридической компании получать заявки онлайн. Разработать
информационно-аналитическую систему, означает показать свою современность
7
и актуальность. Разработать информационно-аналитическую систему для
организации, значит «быть на уровне», быть конкурентоспособным, ведь в
любом деле применение инновационных технологий влияет на образ и оценку
организации. Именно поэтому, разработка информационно-аналитической
системы сегодня является довольно актуальной и востребованной услугой.
8
ГЛАВА 1. ИЗУЧЕНИЕ ПРЕДМЕТНОЙ ОБЛАСТИ
1.1.
Обоснование необходимости создания ИАС
Целью проекта является разработка информационно-аналитической
системы компании, веб-ориентированной информационной системы для
повышения эффективности деятельности компании, конкурентоспособности и
обеспечения устойчивого положения на рынке услуг за счет новых
информационных технологий и сети интернет.
При этом автоматизация процесса обработки и анализа данных позволит
достигнуть следующих положительных моментов:
 Минимизировать
сроки
и
обеспечить
качественную
подготовку
информации, предоставлять разностороннюю информацию о услугах
компании, расценках на ИАС компании;
 Сократить сроки подготовки решений руководством и административной
группой компании, ускорить процедуру подготовки договоров;
 Создать банк данных, для хранения сведений о клиентах и партнерах
компании, что позволит минимизировать время ввода исходной
информации при повторных обращениях клиентов в компанию.
Задачами проекта являются:
 разработка базы данных информационной системы;
 разработка программного обеспечения управления сайтом, базой данных,
интерфейсом пользователей;
 повышение эффективности деятельности компании за счет внедрения
программного обеспечения и интернет технологий.
1.2.
Сведения о предметной области
Юридическая компания «КирАл» - это компания, специализирующаяся на
оказание юридических консультации по любым вопросам гражданского,
трудового законодательства, а так же корпоративного и международного права.
9
Юридическая
компания
«КирАл»
предоставляет
населению
и
корпоративным клиентам полный спектр юридических услуг: выполнение, как
разовых поручений, так и абонентское обслуживание.
Темпы развития рынка очень высоки, и компаниям направленных на
оказание услуг надо быстро реагировать на изменения потребительского спроса,
одновременно сохраняя высочайший уровень качества работы и надежности.
Исходя из такой ситуации на рынке, компания «КирАл» своей стратегией
выбрала высочайшее качество и расширение предоставления юридических
услуг.
Высокое качество всех предоставляемых услуг обеспечивается опытным и
квалифицированным коллективом компании, постоянной практикой и, конечно
же, обновлением законодательной базы.
Юридическая компания «КирАл» открывает счета в банках на территории
РФ в установленном законодательством Российской Федерации порядке.
Общество имеет круглую печать, содержащую его полное фирменное
наименование на русском языке и указание на место нахождения Общества.
Общество имеет штампы и бланки со своим фирменным наименованием,
собственную эмблему и другие средства индивидуализации.
Основной целью деятельности Юридической компании «КирАл» является
получение прибыли.
Основным видом (предметом) деятельности Юридической компании
«КирАл»» является оказание юридических услуг:
 Юридические консультации по любым вопросам гражданского, трудового
законодательства, а также корпоративного и международного права;
 Выполнение разовых поручений и абонентское обслуживание;
 Досудебное урегулирование, представительство и защита интересов в
судебных и иных органах;
 Взаимодействие
с
государственными
органами
и
юридическое
сопровождение регистраций документов;
 Правовое обеспечение деятельности и сопровождение сделок;
10
 Правовая экспертиза, восстановление, оформление и регистрация
документов;
 Помощь в оформлении сделок с недвижимостью.
Общество вправе осуществлять также и любые другие виды деятельности,
не запрещенные действующим законодательством. Отдельными видами
деятельности, перечень которых определяется законом, Общество может
заниматься только на основании специального разрешения (лицензии).
Юридическая компания «КирАл» самостоятельно планирует свою
производственную и хозяйственную деятельность. Основу плана составляют
договора, заключенные с клиентами. Общество реализует услуги по ценам и
тарифам, установленным самостоятельно или на договорной основе.
Расчеты с бюджетами и уплата иных обязательных платежей производятся
Обществом в соответствии с действующим законодательством Российской
Федерации.
Юридическая компания «КирАл» имеет постоянных клиентов - это
различные организации, с которыми заключены договора на абонентское
обслуживание (специальное предложение).
1.3.
Миссия компании
Компания «КирАл» основана 22 апреля 2002 года и предоставляет
юридические услуги по следующим специализациям:
 Экономические дела
 Арбитражные дела
 Административные дела
 Налоговые споры
 Семейные споры
 Трудовые споры
 Налоговые споры
 Жилищные споры
11
Миссия юридической компании «КирАл» - максимально помочь решить
проблему каждого клиента. Индивидуальный подход к ситуации и проблематике
каждого клиента и философия партнерства - основы взаимодействия с
клиентами. Компания «КирАл» обеспечивает своим клиентам – частным лицам,
крупным отраслевым компаниям, предприятиям среднего и малого бизнеса,
государственным структурам – широкий спектр юридических услуг .
12
ГЛАВА 2. ТЕОРЕТИЧЕСКИЕ АСПЕКТЫ РАЗЗРАБОТКИ
2.1.
Понятие
Информационно-аналитическая система — это комплекс из нескольких
программ и устройств, которые собирают, хранят и анализируют информацию, а
потом представляют ее в удобном для пользователей виде.
2.2.
Основная концепция и содержание ИАС
Разрабатываемая информационно-аналитическая система предназначена
для ознакомления людей с предоставляемыми юридическими услугами и
оформления заявки.
Целевая
аудитория
информационно-аналитической
системы
-
пользователи, обладающие хотя бы минимальными знаниями в IT технологиях и
привыкшие искать информацию в сети интернет.
Главная задача информационно-аналитической системы - предоставлять
нужную информацию посетителям, а так же возможность оставить заявку.
Исходя из поставленных задач, информационно-аналитическая система
должна предоставлять следующие возможности:
 при
первом
посещении
информационно-аналитической
системы
пользователь должен понять, для чего служит данная информационноаналитическая система, составить общее впечатление о ней, выяснить свои
потребности в отношении информационно-аналитической системы. Для
этого ему должен быть доступен перечень всех услуг;
 если в дальнейшем пользователю не понравилось обслуживание в
выбранной им организации, он может оставить свой комментарий.
13
2.3.
Спектр решения задач
Информационно-аналитическая система может реализовывать следующие
задачи:
 Презентация предприятия, формирование образа фирмы.
В данном случае речь идет об информировании сообщества о
существовании предприятия, а также формировании его имиджа, в том числе на
новых
региональных,
географически
удаленных
рынках,
на
новом
потребительском сегменте, в глазах дилеров и партнеров по бизнесу. Нельзя
недооценивать важность имиджа в современной деловой среде, где поиск
информации осуществляется в виртуальной сети, а решения принимаются в
краткие сроки. Плохой имидж может стоить предприятию многих контрактов.
 Информационное обеспечение процесса принятия клиентом решения о
заказе услуги.
Известно, что до принятия решения о заказе определенной услуги,
потенциальный
клиент
должен
изучить
характеристик
товара,
сопутствующих
информацию,
вопросов
касающуюся
(финансирование,
послепродажное обслуживание и т.д.). Информационно-аналитическая система
как раз и может выполнять функцию предоставления всей необходимой
информации для принятия решения. Сам заказ может быть осуществлен и без
помощи информационно-аналитической системы и Интернета.
 Реализация услуг через Интернет.
Информационно-аналитические системы, реализующие данную задачу,
относятся, как правило, к сфере торговли и осуществляют функции
информирования клиентов, оформления заявок на услуги, отслеживание
процесса заявки и т.д.
 Поддержка клиентов и партнеров, послепродажное обслуживание.
Помощь клиентам и партнерам в получении необходимой информации,
ответы на наиболее часто задаваемые вопросы, консультации в режиме онлайн –
все это укрепляет позиции компании и создает позитивное отношение к
14
предприятию.
Важным
преимуществом
информационно-аналитической
системы является возможность организации послепродажного обслуживания
клиентов в любой части света. Конечно, информационно-аналитическая система
не способна заменить полноценный сервисный центр, но как показывает мировая
практика, все же может решить многие из возникающих проблем.
 Проведение рыночных исследований (поиск информации, ее получение,
обработка и т.д.).
Информационно-аналитическая система может использоваться не только
для реализации элементов маркетинговой политики, но и, прежде всего,
участвовать в сборе и анализе информации для ее реализации. Для этого могут
быть использованы такие инструменты, как анализ посещения информационноаналитической
системы
с
помощью
специальных
программ-счетчиков,
проведение опросов, анкетирования посетителей, выявление тенденций в
изменении сбыта после начала новых рекламных кампаний.
15
ГЛАВА 3 ИНСТРУМЕНТЫ ДЛЯ РАЗРАБОТКИ ИАС
3.1.
Программные средства
Для разработки и реализации информационно-аналитической системы
были выбраны следующие программные средства:
 XAMPP;
 PHPStorm;
 язык разметки HTML и CSS;
 язык программирования - PHP;
 phpmyadmin;
 Adobe XD;
 JavaScript.
3.1.1.
XAMPP
XAMPP —
набор
дистрибутивов
и
программная
оболочка,
предназначенные для создания и отладки сайтов (без необходимости
подключения к сети Интернет).
Возможности XAMPP: Сразу после установки доступен полностью
работающий web-сервер, работающий на локальном компьютере, на котором
может работать неограниченное количество сайтов, что очень эффективно для
разработки и отладки сценариев PHP без загрузки его файлов на удаленный
сервер.
3.1.1.1.
ИАС на XAMPP
Вместе с установкой локального сервера автоматически создается
сайт [1], в котором есть несколько поддоменов (сайтов более высокого ровня –
как бы вложенных). Для информационно-аналитической системы в программе
16
XAMPP предназначена папка htdocs, в которой для каждой новой
информационно-аналитической системы надо создавать новую подпапку.
Имя этой папке и станет название информационно-аналитической
системы. Таких информационно-аналитических систем на одном сервере может
быть несколько.
В папке информационно-аналитической системы должен быть файл
первой страницы, (расширение может меняться в зависимости от языка: .php,
.xtml, .stml). Коды других страниц могут быть в виде отдельных файлов.
Код каждой страницы состроить из текста, который обрамляют значки
(теги), состоящие из букв латинского языка (сокращение английских слов) и
знаков, имеющих свой смысл в каждом языке программирования.
Весь код страницы обрамляет основной тег, показывающий на основной
используемый язык, например, HTML – значит теги:
<html>код страницы</html>
В закрывающем теге присутствует слеш – косая черта.
Код разбивается на две основные части – голову (head) и тело (body).
Head - предназначен для служебной информации и тайтла страницы краткого названия, который мы видим в строке состояния браузера.
Body – содержит текст и ссылки на картинки. Это контент страницы – ее
содержание. Здесь описано и оформление страницы.
3.1.2.
PhpStorm
PhpStorm — это среда разработки, которая по-настоящему понимает код.
Мгновенно предотвращает ошибки, предоставляет точное автодополнение, а
также возможность редактирования кода на HTML, CSS и JavaScript.
Возможности PhpStorm: обеспечивает умное автодополнение, подсветку
синтаксиса, расширенные настройки форматирования, проверку ошибок,
сворачивание фрагментов кода, поддержку языковых комбинаций и много
других возможностей для продуктивной разработки. Автоматические функции
позаботятся о порядке в вашем коде и помогут легко и безопасно выполнять
17
глобальные настройки проекта. Сотни встроенных инспекций проверяют код
прямо в режиме редактирования, а также позволяют проанализировать весь
проект на наличие ошибок и проблем в структуре кода.
Для большинства инспекций доступны быстрые исправления, которые
позволяют откорректировать код мгновенно. Нажав Alt+Enter,
можно
просмотреть список возможных исправлений для любой инспекции. PhpStorm
помогает быстро перемещаться по коду и экономить время при работе над
большими проектами. В один клик можно перейти к определению любого
метода, функции или переменной или найти их использования в проекте.
3.1.3.
HTML
HTML (от англ. Hyper Text Markup Language ) - стандартный язык разметки
документов во Всемирной паутине. Большинство web-страниц содержат
описание разметки на языке HTML. Язык HTML интерпретируется браузерами
и отображается в виде документа в удобной для человека форме.
Язык HTML является приложением SGML (стандартного обобщённого
языка разметки).
Во всемирной паутине, HTML - страницы, как правило, передаются
браузерам от сервера, в виде простого текста или с использованием сжатия.
Текстовые документы, содержащие разметку на языке HTML (такие
документы традиционно имеют расширение.html или.htm), обрабатываются
специальными
приложениями,
которые
отображают
документ
в
его
форматированном виде. Такие приложения, называемые «браузерами» или
«интернет - обозревателями», обычно предоставляют пользователю удобный
интерфейс для запроса web - страниц, их просмотра (и вывода на иные внешние
устройства) и, при необходимости, отправки введённых пользователем данных
на сервер.
18
3.1.4.
CSS
CSS - формальный язык описания внешнего вида документа, написанного
с использованием языка разметки.
Преимущественно используется как средство описания, оформления
внешнего вида web-страниц, написанных с помощью языка разметки HTML.
CSS используется создателями web - страниц для задания цветов, шрифтов,
расположения отдельных блоков и других аспектов представления внешнего
вида этих web-страниц. Основной целью разработки CSS являлось разделение
описания логической структуры web-страницы от описания внешнего вида этой
web-страницы. Такое разделение может увеличить доступность документа,
предоставить большую гибкость и возможность управления его представлением,
а также уменьшить сложность и повторяемость в структурном содержимом.
Кроме того, CSS позволяет представлять один и тот же документ в различных
стилях.
3.1.5.
PHP
PHP - скриптовый язык программирования общего назначения, интенсивно
применяемый для разработки web - приложений. В настоящее время
поддерживается подавляющим большинством хостинг - провайдеров и является
одним из лидеров среди языков программирования, применяющихся для
создания динамических web - сайтов.
3.1.6.
PHPMyAdmin
PHPMyAdmin - это программа написанная на PHP и предназначенная для
управления сервером через всемирную сеть. PHPMyAdmin поддерживает
широкий
набор
операций.
Наиболее
часто
используемые
операции
поддерживаются с помощью пользовательского интерфейса (управление базами
19
данных, таблицами, полями, связями, индексами, пользователями, правами, и
т.д.), одновременно вы можете напрямую выполнить любой Sзапрос.
3.1.7.
Adobe XD
Adobe Experience Design (Adobe XD) — программа для разработки
интерфейсов от Adobe Systems. Поддерживает векторную графику и вебверстку и создает небольшие активные прототипы.
3.1.8.
JavaScript
JavaScript
-
прототипно
-
ориентированный
сценарный
язык
программирования.
JavaScript обычно используется как встраиваемый язык для программного
доступа к объектам приложений. Наиболее широкое применение находит в
браузерах как язык сценариев для придания интерактивности web - страницам.
Основные архитектурные черты: динамическая типизация, слабая типизация,
автоматическое управление памятью, прототипное программирование, функции
как объекты первого класса.
На JavaScript оказали влияние многие языки, при разработке была цель
сделать язык похожим на Java, но при этом лёгким для использования
непрограммистами. Языком JavaScript не владеет какая-либо компания или
организация, что отличает его от ряда языков программирования, используемых
в web-разработке.
20
ГЛАВА 4. ПРОЕКТИРОВАНИЕ ИАС
Детальная концепция ИАС
4.1.
Дизайн информационно-аналитической системы включает в себя:
цветовое оформление, элементы навигации по сайту, текстовую информацию,
описание услуг предлагаемых организацией.
Дизайн информационно-аналитической системы играет немаловажную
роль в создании самой информационно-аналитической системы, а именно он
должен соответствовать следующим требованиям:
 Внешний
вид
информационно-аналитической
системы
должен
соответствовать выбранной тематики;
 Навигация по информационно-аналитической системе должна быть
удобной для пользователя;
 Главные материалы, предложения и категории услуг должны быть
расположены на первом плане, чтобы заинтересовать посетителя;
 В верхней части страницы помещается название информационноаналитической системы, отражающее его тему.
 Изображение в окне браузера состоит из трех основных элементов:
 Название информационно-аналитической системы;
 Главное информационное меню вверху страницы;
Название информационно-аналитической системы находится на каждой
странице
и
не
изменяется
в
зависимости
от
местонахождения
на
информационно-аналитической системе.
Меню предназначается для навигации по информационно-аналитической
системе , в нем отображаются ссылки на все страницы информационноаналитической системы.
Основное
содержание
страницы
меняется
в
зависимости
от
местонахождения пользователя.
21
Главная страница. Эта страница отображается при первом входе на
информационно-аналитическуй систему, ее оформление и содержание дает
пользователю первое представление о информационно-аналитической системе.
Самое главное для информационно-аналитической системы - это
разработать удобный, понятный и красивый интерфейс. Интерфейс-то, что видит
пользователь в браузере: рамки, изображения, ссылки, надписи и т.д. В целях
привлечения большего числа пользователей и лучшего визуального восприятия
информационно-аналитической
системы,
необходимо
создать
интерфейс
максимально привлекательным и в то же время максимально простым, чтобы
комфортно пользоваться информационно-аналитической системой могли даже
неопытные пользователи. Также необходимо наполнить информационноаналитическую систему информацией и соответствующим контентом, для того,
чтобы
сделать
информационно-аналитическую
систему
наиболее
информативной и привлекательной.
Начнём создание информационно-аналитической системы с главной
страницы. Главная страница - это страница, на которую попадает пользователь,
как только входит на информационно-аналитическую систему (рисунок 1). На
ней должна предоставляться информация: имя адвоката и лозунг. Также
информация должна быть подана в надлежащем виде, чтобы убедить клиента
воспользоваться услугами именно нашего центра.
22
Рисунок 1 - Главная страница ИАС
Ниже находится ссылка на страницу «Оставить заявку» (рисунок 2).
На этой странице можно оставить заявку в компанию, выбрав услугу, в
которой нуждаетесь, при этом нужно указать свои данные: email, номер телефона
и имя.
23
Рисунок 2 - Оставить заявку
Следующая страница информационно-аналитической системы - это
страница
«Компания».
На этой странице располагается информация о
компании. Цель данной страницы - познакомить клиента с компанией. На
странице «Компания» предоставлены сертификаты и информация о истории
компании.
На странице «Специализации», находится информация об услугах,
которые оказывает юридическая компания «КирАл»
При переходе на ссылку «Контакты», мы можем увидеть контакты
компании: юридический адрес, email, номер телефона.
Затем, идет ссылка на страницу «Вход» (рисунок 3). Здесь можно войти в
личный аккаунт, нажав на ссылку «Войти» или зарегистрироваться, если вы еще
не зарегистрировались, нажав на ссылку «Зарегистрироваться» (рисунок 4).
24
Рисунок 3 - Страница «Вход»
Рисунок 4 – Страница «Регистрация»
25
В личном кабинете есть ссылка «Напишите нам», с помощью нее можно
связаться с менеджером, если возникла какая-либо проблема с сервисом.
4.2.
Структура ИАС
Структура информационно-аналитической системы - это определенная
система взаимного расположения веб-страниц и разделов, логичный способ их
связи. От того, насколько она удобна, зависит непосредственное перемещение
пользователя по сайту.
Задача структуры - быстро сориентировать клиента в каталоге, чтобы он
легко мог найти нужный товар, выбрать его по своим критериям, сравнить с
другими.
Рисунок 5 – Структура ИАС
4.3.
Анализ аналога ИАС по заданной тематике
ИАС «Аронов и Партнеры» [2]
26
Рисунок 1- Главная страница ИАС «Аронов и Партнеры»
Удобная навигационная структура - сразу видна и проста в использовании:
при наведении курсора на раздел открывается список подразделов, что экономит
площадь сайта и позволяет разместить больше информации или рекламы.
Навигационное меню и главное меню отображаются на всех страницах, что
позволяет быстро и легко переходить между страницами и делает невозможным
тупиковые ссылки.
Предоставленная информация соответствует заявленной теме и запросам
целевой аудитории.
Уникальные заголовки, служебные теги и изображения присутствуют, т.
е. каждая страница сайта соответствует рекомендациям поисковых служб.
Здесь особых рекомендация по улучшению дизайна дать не могу, потому
что этот вариант мне понравился: и цвета подобраны хорошо, и навигация
удобная, и вообще читать приятно.
Вывод: сайт удобен в использовании, не перегружен информацией и очень
понятен в навигации. Грамотное распределение текста, никаких лишних деталей.
27
Легко можно найти необходимую информацию на сайте. Форма заявки понятна
и проста.
4.4.
Дизайн
Информационно-аналитическая система должна доносить до пользователя
как можно больше новой востребованной информации. Чтобы выигрывать в
конкурентной борьбе, важно не только организовать непрерывный поток
качественной информации, но и необходимо правильно представить ее
пользователю. В конечном итоге он выберет из числа равных ту информационноаналитическую систему, ту страницу, у которых более удобный интерфейс, где
информационные блоки расположены наиболее удобным образом, заголовки и
анонсы - кратки и информативны, иллюстрации качественны, а дизайн удобен
для восприятия информации.
На заре развития сети Интернет не существовало строгого понимания, как
должен выглядеть информационный ресурс. Web-страницы имели различные
схемы компоновки. Новые сложные графические решения привлекали внимание
посетителей своей формой, но не имели понятной содержательной части.
Пользователю приходилось сначала изучить конструкцию информационноаналитической системы, понять, что является навигацией, и уже после получать
необходимую
информацию.
Разнородные
конструкции
информационно-
аналитической системы часто вводили в заблуждение пользователей своей
запутанной навигацией и непонятным размещением информационных блоков.
В данной главе мы рассмотрим топологию информационно-аналитической
системы, то есть структуру размещения информационных блоков, постараемся
определить, какие удобства привлекают пользователя.
Чтобы определить, как необходимо организовать структуру и дизайн Webстраницы, постараемся ответить на следующие вопросы:
 в какой последовательности читатель просматривает информационные
блоки;
28
 какая цветовая гамма является удобной для восприятия текста;
 какой дизайн является предпочтительным для читателя;
 где привычнее всего читателю видеть навигационную панель.
4.4.1.
Восприятие информации, расположенной на Web-странице
Знакомясь с информационно-аналитической системой, пользователь
обычно пробегает взглядом страницу по диагонали сверху вниз и слева направо.
Эта особенность восприятия информации закладывается с детства, с момента,
когда ребенок начинает знакомиться с книгами и учится читать.
Самыми заметными информационными блоками являются те, которые
располагаются ближе к верхнему левому краю. Следовательно, чтобы читатель
сразу заметил логотип информационно-аналитической системы - название и
логотип должны занять область, близкую к верхнему левому краю.
Следующие по важности информационные блоки - это навигационные
панели.
Горизонтальная навигационная панель должна занять место в верхней
части сайта. Вертикальная - левый столбец. Возможны другие варианты
расположения навигационных панелей, но они являются специфическими.
4.4.2.
Цветовая гамма
Цвет - это эмоции и настроение. Можно взбодрить зрителя, навеять на него
летнее или зимнее настроение, или наоборот, вогнать в тоску. Светло-серый цвет
в сфере Web-дизайна называется серебряным, темно-серый с оттенками «мокрый асфальт», грязно-белый - «белая ночь». В ход идут названия напитков
- «кофейный», «шоколадный», «молочный»; овощей, фруктов и ягод «оливковый», «вишневый». Идет в ход все, с чем можно сравнить необычный
оттенок.
«Престижные» цвета - золото, серебро, темно-серый, черный. Их задача передать солидность, уверенность, стабильность и высокую стоимость, именно
29
поэтому
золотистый
цвет
будет
использоваться
для
информационно-
аналитической системы «КирАл»
Наиболее привычным для нас является чтение черного текста,
расположенного на белом фоне. Обратная картина - белый текст на черном фоне
- используется крайне редко и не является лучшим цветовым решением для
серьезной информационно-аналитической системы. Допускается использование
цветного текста и цветного фона. Главное при этом то, что текст должен хорошо
читаться.
Нельзя использовать для основного текста чистые цвета (яркий зеленый,
яркий красный, яркий синий и т.п.), они утомляют пользователя, что,
естественно, не способствует восприятию информации. То же касается и цвета
фона - цветовая насыщенность его должна быть минимальной.
Для выделения фрагментов текста (заголовки, ссылки, и т.д.) часто
используются 2-3 более сочных цвета в дополнение к основному цвету. Это
могут быть заголовки, ссылки и т.д. Важно, чтобы выделенные слова не делали
текст пестрым.
Правила Web-дизайна
4.4.3.
Как не раз уже говорилось, дизайн всех страниц информационноаналитической системы должен быть выдержан в едином стиле. Стиль - это
система визуальных элементов, призванная обеспечить цельность восприятия
данной страницы или всей информационно-аналитической системы. Исходя из
разработанной
концепции
и
контента
(текстового
материала,
готовых
иллюстраций и рисунков), выбираются шрифты, цвет фона, способ обработки
картинок, коллажей и иконок. А затем просто необходимо придерживаться
выбранной манеры исполнения элементов по ходу создания и развития
информационно-аналитической системы.
Стиль
призван
обеспечить
информационно-аналитической
хотя
бы
системы.
минимальную
уникальность
Можно
использовать
30
распространенный набор цветов, шрифтов, стандартные приемы оформления.
Но что-то свое, особенное в нем должно быть.
Основные элементы стиля информационно-аналитической системы:
 логотип;
 модульность;
 шрифты;
 цвета;
 иллюстративный ряд (приёмы обработки изображений);
На данный момент можно определить как типы.
 Текстовый дизайн - определяется содержанием и концепцией автора.
"Текстовый" не означает простой или примитивный. На первом уровне это
означает почти полное отсутствие изображений как таковых, что
значительно
ускоряет
загрузку
страницы.
А
навигационные
и
декоративные элементы выполняются теми же "символьными" приемами.
Нужно сказать, что HTML как таковой значительно расширил
возможности при разверстке страниц этого типа, и теперь при помощи
кода можно делать и тени, и даже изображения. При таких разверстках
следует хорошо знать классические верстальные приемы, особенности
используемых шрифтов.
 Полиграфический
дизайн
-
тот
вариант,
когда
информационно-
аналитическая система стремится имитировать печатное издание. Такой
дизайн распространен на корпоративных информационно-аналитических
системах, ИАС с рекламным уклоном, там, где особо необходимо образноэмоциональное наполнение основного содержания. Как правило, основное
впечатление пользователь получает за счет графики.
 Интерфейсный дизайн - это стиль, призванный максимально облегчить
жизнь пользователю во всех ее проявлениях, от загрузки странички
(минимизирование кода и предельная оптимизация изображений) до
особого, тщательного исполнения каждого элемента. Досконально
продуманная навигация, изначально понятность пользования общей
31
схемой ИАС - такой подход к Web-дизайну вызывает только глубокое
почтение и уважение. И даже если с точки зрения изобразительной
эстетики на таком сайте окажется не все гладко, это с лихвой окупится
остальными достоинствами.
 Динамический дизайн - в примитивном варианте бегающие по экрану, или
просто шевелящиеся изображения. В хорошо продуманном сценарии это
может
быть
целое
разворачивающее
произведение
перед
зрителем
искусства,
мысль
автора
последовательно
или
какой-то
художественный образ.
 Смешанные типы - суть понятна и так - обычно комбинация
вышеперечисленных типов.
Разработка дизайна
4.4.4.
Дизайн играет, несомненно, важную роль в привлечении внимания
пользователей интернета
к определенной информационно-аналитической
системе. При его разработке прежде всего нужно учитывать особенности
восприятия целевой аудитории. При этом оформление должно соответствовать
содержанию информационно-аналитической системы.
Универсального решения в области разработки дизайна сайтов не
существует. Возможны различные варианты исполнения страниц. Но, конечно,
существуют определённые рекомендации по работе с образом и стилем.
Все
Web-страницы
одной
информационно-аналитической
системы
должны быть оформлены в едином стиле. Это создаст дополнительное
представление о фирме и ее услугах.
Дизайн Web-страниц предполагает разработку следующих элементов:
 цвет;
 шрифт;
 графика;
 компоновка Web-страницы.
32
Единая цветовая гамма Web-страниц способствует быстрому и полному
восприятию содержания. Как правило, лучшая комбинация цветов для чтения белый фон и черный текст.
Можно использовать фоновый цвет для отдельных символов текста, что
дает возможность создавать интересные композиции для заголовков, подписей к
рисункам.
При выборе шрифта необходимо принимать во внимание следующие
рекомендации:
 Не следует использовать очень крупный размер шрифта (особенно с
полужирным и курсивным начертанием) для текстовых надписей, так как
он чаще всего производит грубое впечатление. Тогда как шрифт обычного
размера при умелой подаче кажется насыщенным информацией и
располагает к вдумчивому прочтению.
 Не
следует
применять
перечеркивание,
так
как
такие
приемы,
подобные
как
подчеркивание
текстовые
эффекты
и
могут
ассоциироваться у пользователей с гипертекстовой ссылкой.
 Навигационное меню на всех страницах должно иметь одни и те же форму,
цвет, размеры и месторасположение, что обеспечивает легкость
перемещения по серверу.
 Не следует заполнять страницы избыточным количеством графических
материалов. Не следует включать в страницу непрерывно двигающиеся
элементы - они перенапрягают периферическое зрение. Нужно сохранять
баланс между текстом, изображениями и пустым пространством.
Перед тем как приступать к верстке, необходимо разработать макет
информационно-аналитической системы. Для этой цели используют любые
графические редакторы. Одним из самых популярных является Adobe XD, так
как имеет необходимый набор инструментов и удобный интерфейс, им мы и
воспользуемся для создания макета будущей информационно-аналитической
системы.
33
Чтобы превратить макет в действующую информационно-аналитическую
систему, необходимо сделать верстку страниц, то есть перевести графический
эскиз в формат HTML - определить какие элементы макета будут фоном, какие картинкой, какие - текстовыми блоками, а какие - функциональными модулями,
как будут масштабироваться составляющие страницы и т.д.
Таким образом, мы имеем одну главную страницу, которая ссылается на
остальные HTML страницы. Стиль шрифтов, фоны, размер блоков описаны в
файле CSS.
Итак, открыв наш сайт через какой-либо браузер, получаем следующий
результат:
Рисунок 7 - ИАС Юридической компании «КирАл»
На данном этапе информационно-аналитическую систему нельзя назвать
динамичной, так ее страницы - это простой набор HTML кода.
Динамическая информационно-аналитической системы - информационноаналитическая система, состоящая из динамичных PHP-страниц- шаблонов,
контента, скриптов и прочего, в виде отдельных файлов. Страница ИАС,
показываемая в итоге браузеру пользователя, формируется на стороне сервера
34
динамически, по запросу, из страницы-шаблона и отдельно хранимого
содержимого (информации, скриптов и др.).
Для того, что бы ИАС стала динамичной, усовершенствуем ее с помощью
языка web-программирования PHP: создадим базу данных и подключим её к
ИАС, настроим авторизацию и регистрацию пользователя и т.д.
4.5.
Создание базы данных
База данных (БД) - совокупность связанных данных, организованных по
определенным правилам, предусматривающим общие принципы описания,
хранения и манипулирования, независимая от прикладных программ.
Для понятия «база данных» существует несколько классификаций. По
модели представления данных БД можно классифицировать следующим
образом:
картотеки,
иерархические,
сетевые,
многомерные,
объектно-
ориентированные, дедуктивные и реляционные. Далее речь пойдет о
реляционной модели.
В реляционных базах данных вся информация заключена в таблицы.
Столбцы в такой таблице имеют конкретный тип и размер; все содержимое ячеек
столбца должно соответствовать их типу. Строки представляют собой набор
неструктурированных данных и образуют математическое отношение. Таким
образом, вся база данных - это множество таблиц-отношений, отсюда и название
модели (от англ. relation - отношение).
Один из главных принципов организации данных - построение
взаимосвязей между всеми элементами, что и отличает базу данных от простого
набора таблиц. Т.е. информация в таблицах реляционной базы данных должна
быть соответствующим образом организована. Еще один важнейший принцип - нормализация таблиц, которая сводится к устранению недостатков структуры
базы данных, приводящих к различным аномалиям и нарушениям целостности
данных.
Создавать базу данных можно как и с помощью PHP сценария, так и с
помощью готовой среды разработки баз данных PHPMyAdmin.
35
PHPMyAdmin является программой "визуального" управления базами
данных. Данная программа написана на PHP и служит для наглядного вывода
содержимого базы данных, а так же для простого и понятного управления ею.
Используя интерфейс программы PHPMyAdmin создадим базу данных для
нашего сайта.
Рисунок 8 - База данных, созданная в среде PHPMyAdmin
36
ЗАКЛЮЧЕНИЕ
Усиленное развитие информационных технологий подарило миру
глобальную сеть Интернет. Сейчас трудно представить себе современного
человека, которому бы ни разу не пришлось воспользоваться ресурсами этой
уникальной сети. На сегодняшний день практически все серьёзные учреждения
считают необходимым иметь свою ИАС в Интернете как наиболее удобный
способ доведения до потребителя сведений о своих услугах или товарах.
Сегодня можно найти много примеров очень хорошо выполненных
информационно-аналитических систем, которые быстро загружаются,
привлекательны на вид, имеют четко разграниченную по разделам информацию
и удобные функции навигации. Чтобы сделать ИАС эффективной, необходимо
визуализировать поток информации и выбираемые пользователем пути.
Другими словами, нужно уметь видеть с точки зрения пользователя. Процесс
планирования может потребовать больших затрат труда, художественного
вкуса и оформительского таланта. Самые лучшие ИАС - это те, которые
привлекательно выглядят, ёмко выражают основную идею и не заставляют
пользователей ждать получения информации на их экранах слишком долго.
Целью курсовой работы является разработка информационноаналитической системы юридической компании. Данная ИАС позволяет
оставлять заявку не выходя из дома. ИАС представляет компанию в Интернете.
В результате разработки поставленной задачи были систематизированы,
закреплены и расширены знания, полученные при изучении следующих
предметов: «Информационные технологии». В ходе решения поставленной
задачи был закреплен теоретический материал - разработка дизайна ИАС,
перевод ее на машинный язык и исправление появившихся во время решения
ошибок.
Оценивая проделанную работу, можно сделать следующие выводы:
- информационно-аналитическая система предоставляет пользователям
наиболее нужную ему информацию, а именно возможность ознакомиться со
списком услуг, предоставляемых юридической компанией;
37
- дизайн информационно-аналитической системы соответствует
предполагаемым предпочтениям целевой группы;
- реализована навигация с помощью меню, по страницам
информационно-аналитической системы;
- реализованы отзывы и заявки.
38
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ.
1. URL:http://localhost/xampp/ - XAMPP
2. URL:(https://aronovlaw.ru ) - Аронов и Партнеры
3. Wikipedia [Электронный ресурс] - URL: http://ru.wikipedia.org/wiki/
4. 5. Веллинг, Л. Разработка веб-приложений с помощью PHP и MySQL /
Л. Веллинг, Л. Томсон. - Вильямс 2010 - 848 с.
5. 11. Фримен, Э. Изучаем HTML, XHTML и CSS / Э. Фримен.
6. Форматирование текста - [Электронный ресурс] – URL:
http://htmlbook.ru/content/formatirovanie-teksta
7. Справочник по Php - [Электронный ресурс] - URL:
http://www.spravkaweb.ru/php
8. Прохоренок, Н.А. HTML, JavaScript, PHP и MySQL. Джентльменский
набор
9. Фримен, Э. Изучаем HTML, XHTML и CSS / Э. Фримен.
10. Чиртик, А.В. Популярный самоучитель HTML / А.В.
11. Янк, К. PHP и MySQL. От новичка к профессионалу / К. Янк. - М.: Эскимо,
2013.
39
ПРИЛОЖЕНИЕ
Листинг файла functions.php
<?php
define('baseURL', '/mysite');
if($_GET['page'] == 'logout')
{
setcookie('tel', null, time());
setcookie('pass', null, time());
setcookie('user_id', null, time());
header('Location: /mysite/login.php');
}
include ("api/db.php");
function isAuthorazed($tel = null, $pass = null){
global $db;
if(!isset($pass)){
if(!isset($_COOKIE["tel"]) || !isset($_COOKIE["pass"])){
return false;
}
else{
$tel = $_COOKIE["tel"];
$pass = $_COOKIE["pass"];
} }
$password = md5($pass . strtolower($tel));
$sql = 'SELECT COUNT(*) FROM users WHERE tel = "' . $tel .'" AND
password = "'. $password . '"';
$result = mysqli_query($db, $sql);
$USERID = 0;
if(gettype($result) != 'boolean'){
while($item = mysqli_fetch_array($result)){
$USERID = $item[0];
40
}}
if($USERID != 0){
return true;
}
return false;
}
function getLastRequest($tel = null){
global $db;
$sql = 'SELECT id, name, email, tel, status, (SELECT specType.text from
specType WHERE specType.id = request.type LIMIT 1) AS `type`, (SELECT
caseType.text from caseType WHERE caseType.id = request.caseType LIMIT
1) AS `caseType`, (SELECT personType.text from personType WHERE
personType.id = request.person LIMIT 1) AS `person` FROM `request`
WHERE tel = "' . $tel .'"';
$result = mysqli_query($db, $sql);
$ret = 0;
if(gettype($result) != 'boolean'){
while($item = mysqli_fetch_array($result)){
$ret = $item;
}}
return $ret;
}
function getRequests(){
global $db;
$sql = 'SELECT id, name, email, tel, status, (SELECT specType.text from
specType WHERE specType.id = request.type LIMIT 1) AS `type`, (SELECT
caseType.text from caseType WHERE caseType.id = request.caseType LIMIT
1) AS `caseType`, (SELECT personType.text from personType WHERE
personType.id = request.person LIMIT 1) AS `person` FROM `request`
ORDER BY id DESC;';
41
$result = mysqli_query($db, $sql);
$ret = array();
if(gettype($result) != 'boolean'){
while($item = mysqli_fetch_array($result)){
$ret[] = $item;
}}
return $ret;
}
function getPersonType()
{
global $db;
$sql = "SELECT * FROM personType";
$result = mysqli_query($db, $sql);
$ret = array();
if(gettype($result) != 'boolean'){
while($item = mysqli_fetch_assoc($result)){
$ret[] = $item;
}
}
return $ret;
}
function getServices()
{
global $db;
$sql = "SELECT * FROM specType";
$result = mysqli_query($db, $sql);
$ret = array();
if(gettype($result) != 'boolean'){
42
while($item = mysqli_fetch_assoc($result)){
$ret[] = $item;
}}
return $ret;
}
function filterData()
{
$type = $_POST['service_select'];
$person = $_POST['request_select'];
global $db;
if($person && $type == '')
$sql = "SELECT * FROM request WHERE person = '$person'";
else if($type && $person == '')
$sql = "SELECT * FROM request WHERE type = '$type'";
else if($type && $person)
$sql = "SELECT * FROM request WHERE person = '$person' AND
type = '$type'";
else
$sql = "SELECT * FROM request";
$result = mysqli_query($db, $sql);
$ret = array();
if(gettype($result) != 'boolean'){
while($item = mysqli_fetch_assoc($result)){
$ret[] = $item;
}}
return $ret;
}
?>
Листинг файла head.php
43
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>test</title>
<link rel="stylesheet" href="<?= baseURL ?>/css/bootstrap.min.css">
<link rel="stylesheet" href="<?= baseURL ?>/css/style.css">
<script src="<?= baseURL ?>/js/jquery.js"></script>
<script src="<?= baseURL ?>/js/main.js"></script>
Листинг файла header.php
</head>
<body>
<header>
<div class="container">
<div class="title">
<a href="<?= baseURL ?>/">
<img src="<?= baseURL ?>/img/logo.png">
<span>
Юридическая компания <br>«КирАл»
</span>
<a>
</div>
<div class="menu">
<div class="menu-item dropdown">
<a href="#">ГЛАВНАЯ</a>
44
</div>
<div class="menu-item dropdown">
<a href="#">КОМПАНИЯ</a>
</div>
<div class="menu-item dropdown">
<a href="#">СПЕЦИАЛИЗАЦИЯ</a>
</div>
<div class="menu-item">
<a href="#">КОНТАКТЫ</a>
</div>
<div class="menu-item">
<a href="<?= baseURL ?>/<?php echo isAuthorazed() ? "profile" :
"login" ?>.php"><?php echo isAuthorazed() ? "ПРОФИЛЬ" : "ВХОД" ?></a>
<?php if(isAuthorazed()) : ?>
<a href="<?= baseURL
?>/index.php?page=logout">LOGOUT</a>
<?php endif; ?>
</div>
</div>
</div>
</header>
Листинг файла index.php
<?php
include("functions.php");
include("head.php");
include("header.php");
?>
45
<div class="landing">
<img class="landing-bg" src="<?= baseURL ?>/img/bg-1.png">
<div class="container">
<div class="lil-line"></div>
<div class="text">
<h1 class="bronze">АДВОКАТ</h1>
<h1 class="white bold">Кирилл Александрович</h1>
<span style="font-size:20px;">Разумный выбор для решения Ваших
проблем</span>
</div>
<a class="button bronze" href="<?= baseURL ?>/request.php">Оставить
заявку</a>
</div>
</div>
<?php
include("footer.php");
?>
Листинг файла login.php
<?php
include("functions.php");
if(isAuthorazed()){
header('Location: /mysite/profile.php');
}
include("head.php");
include("header.php");
?>
<div class="login">
<img class="login-bg" src="<?= baseURL ?>/img/bg-3.png">
<div class="container">
46
<form id="login">
<input type="text" name="tel" placeholder="Телефон">
<input type="password" name="pass" placeholder="Пароль">
<div class="buttons-container between">
<a class="button bronze" onclick="login()">Войти</a>
<a class="button gray" href="<?= baseURL
?>/registration.php">Регистрация</a>
</div>
</form>
</div>
</div>
<script>
var fd;
function login(){
fd = new FormData(document.getElementById("login"));
post({
tel: fd.get("tel"),
pass: fd.get("pass"),
},"/mysite/api/login.php",callback);
}
function callback(data){
console.log(data);
if(JSON.parse(data).code == 1){
window.location.href = "/mysite/profile.php";
}}
</script>
<?php
include("footer.php");
?>
47
Листинг файла logout.php
<?php
setcookie("tel", "",time() - (60 * 60 * 24 * 180),"/");
setcookie("user_id", "",time() - (60 * 60 * 24 * 180),"/");
setcookie("pass", "",time() - (60 * 60 * 24 * 180),"/");
header('Location: /login.php');
?>
Листинг файла profile.php
<?php
include("functions.php");
if(!isAuthorazed()){
header('Location: /mysite/login.php');
}
include("head.php");
include("header.php");
$personType = getPersonType();
$Services = getServices();
$list = filterData();
?>
<br><br>
<div class="container profile">
<?php
if($_COOKIE["user_id"] == 1){
?>
<h3 style="text-transform:uppercase;">Заявки <img src="<?= baseURL
?>/img/gear.svg" style="height:1em; width:0.75em;margin-left:1em;"></h3>
<div class="request-list">
<form action="" method="post" class="filter">
48
<div>
<p><b>Обращение от:</b></p>
<select name="request_select">
<option value="">Не выбрано</option>
<?php foreach($personType as $elem) : ?>
<option value="<?= $elem['id'] ?>"><?= $elem['text']
?></option>
<?php endforeach; ?>
</select>
</div>
<div>
<p><b>Услуга:</b></p>
<select name="service_select">
<option value="">Не выбрано</option>
<?php foreach($Services as $elem) : ?>
<option value="<?= $elem['id'] ?>"><?= $elem['text']
?></option>
<?php endforeach; ?>
</select>
</div>
<button name="filter_btn">Apply</button>
</form>
<table>
<tr style="font-weight:bold;">
<td>ID</td>
<td>Имя</td>
<td>Почта</td>
<td>Телефон</td>
<td>Обращение от</td>
<td>Специализация</td>
49
<td>Услуга</td>
<td>Статус заявки</td>
</tr>
<?php
foreach($list as $item){
?>
<tr>
<td name="id"><?php echo $item["id"] ?></td>
<td><?php echo $item["name"] ?></td>
<td><?php echo $item["email"] ?></td>
<td><?php echo $item["tel"] ?></td>
<td><?php echo $item["person"] ?></td>
<td><?php echo $item["type"] ?></td>
<td><?php echo $item["caseType"] ?></td>
<td>
<input list="status" name="status" value="<?php echo
$item["status"] ?>"/>
</td>
<td><img name="refresh" src="<?= baseURL
?>/img/refresh.svg"
onclick="update(this.parentElement.parentElement)"></td>
</tr>
<?php
}
?>
</table>
<datalist id="status">
<option value="Статус заявки">
<option value="Обрабатывается">
<option value="Обработано">
50
<option value="Отказано">
</datalist>
</div>
<script>
function update(e){
var data = {
id:e.querySelector("*[name='id']").innerText,
status:e.querySelector("*[name='status']").value
}
console.log(data);
e.querySelector("*[name='status']").disabled = true;
post(data,"/api/updateRequest.php",(success)=>{e.querySelector("*[name='stat
us']").disabled = false;});
}
</script>
</div>
<?php
}else{
?>
<h3 style="text-transform:uppercase;">Личный кабинет <img src="<?=
baseURL ?>/img/gear.svg" style="height:1em; width:0.75em;marginleft:1em;"></h3>
<div class="status">
<h3><?php echo getLastRequest($_COOKIE["tel"])["status"] ?></h3>
<span>
Заявка обрабатывается, в течение 5 дней наш менеджер ответит
вам.
<span>
</div>
51
Есть проблемы в работе сервиса ? <a class="button bronze">Напишите
нам</a>
</div>
<div class="container footer">
<div class="row">
<div class="col-md-4">
<h3>О нас</h3>
Наши юристы и адвокаты успешно защищают
интересы клиентов в области гражданского
и административного права. Для нас
нет незначительных дел. Все за, что мы беремся,
мы делаем профессионально, честно,
добросовестно и конфиденциально.
</div>
<div class="col-md-3">
<h3>Наши услуги</h3>
<a href="#">Экономические дела </a>
<a href="#">Арбитражные дела </a>
<a href="#">Административные дела </a>
<a href="#">Налоговые споры </a>
</div>
<div class="col-md-3">
<br>
<br>
<a href="#">Семейные споры </a>
<a href="#">Трудовые споры </a>
<a href="#">Налоговые споры </a>
<a href="#">Жилищные споры</a>
</div>
<div class="col-md-2">
52
<h3>Контакты</h3>
<p>[email protected]</p>
<p>8-(936)-383-72-85</p>
<p>Г. Москва</p>
</div>
</div>
</div>
<?php
} ?>
<?php
include("footer.php");
?>
Листинг файла registration.php
<?php
include("functions.php");
if(isAuthorazed()){
header('Location: /mysite/profile.php');
}
include("head.php");
include("header.php");
?>
<div class="login">
<img class="login-bg" src="<?= baseURL ?>/img/bg-3.png">
<div class="container">
<form id="login">
<input type="text" name="tel" placeholder="Телефон">
<input type="password" name="pass" placeholder="Пароль">
<div class="buttons-container">
53
<a class="button bronze"
onclick="login()">Зарегистрироваться</a>
</div>
</form>
</div>
</div>
<script>
var fd;
function login(){
fd = new FormData(document.getElementById("login"));
post({
tel: fd.get("tel"),
pass: fd.get("pass"),
},"/mysite/api/registration.php",callback);
}
function callback(data){
console.log(data);
if(JSON.parse(data).code == 1){
window.location.href = "/mysite/profile.php";
} }
</script>
<?php
include("footer.php");
?>
Листинг файла request.php
<?php
include("functions.php");
include("head.php");
include("header.php");
54
?>
<div class="request">
<img class="request-bg" src="<?= baseURL ?>/img/bg-2.png">
<div class="container">
<form id="request">
<span>Оформление заявки</span>
<input class="half" type="text" name="name" placeholder="Имя">
<input class="half" type="text" name="tel" placeholder="Телефон">
<input type="text" name="email" placeholder="E-mail">
<select name="person" class="select-req">
<option value="" disabled selected>Обращение от</option>
<option value="0">Юридическое лицо</option>
<option value="1">Физическое лицо</option>
</select>
<select name="case" class="select-req">
<option value="" disabled selected>Специализации</option>
</select>
<select name="type" class="select-req">
<option value="" disabled selected>Услуги</option>
</select>
<div class="buttons-container" style="margin-top:25px">
<a class="button bronze" onclick="sendRequest()">Отправить</a>
</div>
</form>
</div>
</div>
<script>
const PersonType = [
{ id: 0, title: 'Юридическое лицо' },
{ id: 1, title: 'Физическое лицо'}
55
];
const CaseType = [
{ id: 0, title: 'Экономические дела', c_id: 0 },
{ id: 1, title: 'Арбитражные дела', c_id: 0 },
{ id: 2, title: 'Административные дела', c_id: 0 },
{ id: 3, title: 'Налоговые споры', c_id: 0 },
{ id: 4, title: 'Налоговые споры', c_id: 1 },
{ id: 5, title: 'Семейные споры', c_id: 1 },
{ id: 6, title: 'Трудовые споры', c_id: 1 },
{ id: 7, title: 'Жилищные споры', c_id: 1 }
];
const SpecType = [
{ id: 0, title: 'Консультирование по уголовному делу', c_id: 0 },
{ id: 1, title: 'Защита до возбуждения уголовного дела', c_id: 0 },
{ id: 2, title: 'Возмещение убытков', c_id: 0 },
{ id: 3, title: 'Оспаривание правовых актов', c_id: 0 },
{ id: 4, title: 'Подготовка письменных возражений', c_id: 0 },
{ id: 5, title: 'Жалобы на действия государственного органа', c_id: 0 },
{ id: 6, title: 'Консультирование по налоговым делам', c_id: 0 },
{ id: 7, title: 'Сопровождение выездных налоговых проверок', c_id: 0
},
{ id: 8, title: 'Расторжение брака', c_id: 1 },
{ id: 9, title: 'Установление отцовства', c_id: 1 },
{ id: 10, title: 'Признание увольнение незаконным', c_id: 1 },
{ id: 11, title: 'Оспаривание дисциплинарного взыскания', c_id: 1 },
{ id: 12, title: 'Оказание защиты в ходе производства допросов', c_id: 1
},
{ id: 13, title: 'Обжалование решений налоговых органов', c_id: 1 },
{ id: 14, title: 'Выселение из квартиры', c_id: 1 },
{ id: 15, title: 'Затопление квартиры', c_id: 1 }
56
];
const Sel = document.querySelectorAll('.select-req');
Sel[0].onchange = function()
{
filterData(this.value);
}
function filterData(Id = 0)
{
const CaseRes = CaseType.filter((el) => el.c_id == Id);
const SpecRes = SpecType.filter((el) => el.c_id == Id);
renderSelect(CaseRes, SpecRes);
}
function renderSelect(CaseRes, SpecRes)
{
Sel[1].innerHTML = '';
Sel[2].innerHTML = '';
CaseRes.forEach((elem) => {
Sel[1].innerHTML += `<option
value="${elem.id}">${elem.title}</option>`;
})
SpecRes.forEach((elem) => {
Sel[2].innerHTML += `<option
value="${elem.id}">${elem.title}</option>`;
})
}
var fd;
function sendRequest(){
fd = new FormData(document.getElementById("request"));
var data = {
57
email: fd.get("email"),
tel: fd.get("tel"),
name: fd.get("name"),
person: fd.get("person"),
case: fd.get("case"),
type: fd.get("type"),
}
console.log(data);
post(data,"/mysite/api/request.php",callback);
}
function callback(data){
console.log(data);
alert('Заявка отправлена!')
}
</script>
<?php
include("footer.php");
?>
58