Пояснительная записка (WEB-сайт для Института международного сотрудничества Дальневосточного государственного университета путей сообщения), страница 4

2020-10-05СтудИзба

Описание файла

Файл "Пояснительная записка" внутри архива находится в следующих папках: WEB-сайт для Института международного сотрудничества Дальневосточного государственного университета путей сообщения, Ким Е.Д. Документ из архива "WEB-сайт для Института международного сотрудничества Дальневосточного государственного университета путей сообщения", который расположен в категории "". Всё это находится в предмете "дипломы и вкр" из 8 семестр, которые можно найти в файловом архиве ДВГУПС. Не смотря на прямую связь этого архива с ДВГУПС, его также можно найти и в других разделах. .

Онлайн просмотр документа "Пояснительная записка"

Текст 4 страницы из документа "Пояснительная записка"

Доступ к DOM-модели происходит следующим путем с помощью конструкции $(‘.имя класса’) или $(‘.имя идентификатора’). Следует отметить, что обращение к объектам происходит аналогично доступу к ним в каскадных таблицах стилей [32].

Изменение CSS-свойств модели будет происходить посредствам метода animate().

Метод появился в jQuery 1.0. Метод .animate() позволяет создавать эффекты анимации для любых числовых свойств CSS. Единственным обязательным параметром является объект со свойствами CSS. Этот объект похож на такой же объект, что передается в метод .css(), за исключением того, что набор свойств несколько ограничен [33].

Все анимируемые свойства должны задаваться в виде отдельного числового значения (за исключением свойств, описанных ниже); нечисловые свойства не могут быть анимированы с использованием базового функционала jQuery. (Например, свойства width, height или left могут быть анимированы, но свойство background-color не может. Существуют отдельные плагины для анимации таких свойств, как color, background-color, border-color). Значения свойств без единиц измерения трактуются в виде количества пикселей. Единицы измерения em и % могут указываться, только в тех случаях, когда это применимо [34].

Сокращенные свойства CSS (например, margin, background, border) не поддерживаются.

В дополнение к числовым значениям каждое свойство может быть задано в виде строки 'show', 'hide' или 'toggle'. Эти ключевые слова позволяют производить анимацию со скрытием и отображением элемента, учитывая исходное значение свойства display.

Значения анимируемых свойств также могут быть относительными. Если перед числовым значением добавить последовательность символов += или -=, то конечное значение свойства будет вычислено добавлением или вычитанием указанного числа из текущего значения свойства.

Длительность указывается в миллисекундах; чем больше значение, тем медленнее анимация. Также допустимы строковые значение 'fast' и 'slow', которые соответствуют длительности 200 и 600 миллисекунд.

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

2.5 Разработка базы данных

Для разработки базы данных понадобится СУБД MySQL.

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

2.5.1 Нормализация базы данных

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

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

Нормализация таблиц будет производиться до 1 нормальной формы (где это возможно) [36].

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

2.5.2 Реализация базы данных в СУБД MySQL

После нормализации полученные таблицы будут созданы в СУБД MySQL.

Для взаимодействия с СУБД использовано web-приложение phpMyAdmin. С помощью данного приложения можно создать реляционную базу данных.

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

2.6 Разработка серверной части

Серверная часть – ядро проектируемой системы.

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

2.6.1 Принцип действия

Как говорилось ранее, ядро системы написано на серверном языке PHP.

Следует описать принцип работы проектируемой системы:

– имеется единая точка входа (сценарий index.php);

– в сценарии index.php описана логика создания экземпляров классов отображения (определяет, при каких условиях экземпляр какого класса создавать);

– при переходе по ссылкам создается экземпляр соответствующего класса, который формирует отображение (генерирует страницу);

– для каждой страницы создан подобный класс;

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

Диаграмма вариантов использования представлена на рисунке 5.

Рисунок 5 – Диаграмма вариантов использования

Алгоритм работы системы следующий:

– пользователь, попадает в единую точку входа (сценарий index.php);

– щелкая любую гиперссылку пользователь создает экземпляр соответствующего класса, осуществляющего запрос к базе данных (по надобности) и методами, описанными для данного класса, а так же методами, наследованными от суперкласса отображающий страницу (генерация HTML-кода);

– сгенерированная страница отображается в браузере.

2.6.2 Работа с базами данных

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

– генерируется тело, куда происходит отображение информации;

– создается запрос на выборку из базы данных;

– создаются переменные, которые приравниваются к полученным из базы данных данным;

– генерируется HTML-код вместе с полученными данными.

Работа с формами (заявки на регистрацию, вопросы) происходит по следующему алгоритму:

– пользователь отправляет заполненную форму;

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

– перенаправление пользователя на главную страницу.

Разберем метод обработки данных более подробно:

– создаются переменные аналогичные именам полей формы;

– из суперглобального массива POST данные извлекаются и переменные приравниваются к ним;

– создается и выполняется запрос на запись в базу данных созданных переменных.

Модификация записей должна производиться по следующему алгоритму:

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

– запуск метода производится с помощью переданных параметров с идентификатором записи, которую следует изменить (параметры автоматически записываются в гиперссылку при выборке и генерации);

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

– полученная форма с заполненными полями с текущими значениями изменяется (по надобности), затем после отправки данных выполняется проверка на заполнение необходимых полей, далее выполняется запрос в базу данных на изменение текущей записи в таблице.

Удаление производится по следующему алгоритму:

– при генерации html-кода выборки из базы данных в гиперссылку с надписью «удалить» записываются параметры данной записи – номер ее идентификатора и название класса, экземпляр которого должен быть вызван;

– далее полученный параметр извлекается из суперглобального массива GET и выполняется запрос на удаление записи из базы данных с идентификатором только что полученной переменной.

Авторизацию следует реализовать с помощью сессий.

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

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

По умолчанию PHP использует внутренний обработчик files для сохранения сессий, который установлен в INI-переменной session.save_handler. Этот обработчик сохраняет данные на сервере в директории, указанной в конфигурационной директиве session.save_path.

Сессии могут запускаться вручную с помощью функции session_start(). Если директива session.auto_start установлена в 1, сессия автоматически запустится, в начале запроса.

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

Авторизация будет происходить по следующему алгоритму:

– заполнение форм логина и пароля;

– отправка данных методом POST;

– извлечение данных из суперглобального массива POST;

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

– если результат выборки равен 1, то создается сессия и выполняется вход в систему, иначе, ошибка входа в систему;

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

– конец сессии;

– удаление сессии;

– удаление cookie файла.

3 Реализация Web-сайта по техническому заданию

3.1 Дизайн страниц

Дизайн страниц предполагает, как расположение элементов на странице, так и цветовую палитру элементов. Дизайн web-сайта так же предполагает единообразие страниц.

Выбор палитры цветов для сайта так же является важной составляющей.

Плоский дизайн (англ. flat design) – минималистичный подход к дизайну объектов, который подчеркивает удобство использования, он в большей степени ориентирован на конечного пользователя[37].

Плоский дизайн (см. рисунок 8) начал развиваться в противовес концепции скевоформизма и выступал против методов «реальной» визуализации объектов в пользу более упрощенных и эстетически простых решений [38].

Скевоморфизм – объект или элемент его дизайна, выполненный как имитация другого объекта или материала. Данное направление в дизайне стремиться воплотить реальный внешний вид объектов с помощью реалистичных текстур, теней, градиентов [39].

Пример – мобильное приложение «Блокнот» (рисунок 6), в котором записи можно вести на пролинованных страницах с фактурой бумаги [40].

Рисунок 6 – Пример скевоморфизма

Рисунок 8 – Пример flat-дизайна

В качестве основного цвета выбран цвет #e74c3c (теракотовый). Данный цвет используется как основной для выделения особенно важных вещей: например, кнопка «Читать далее» или каких-либо заголовков статьи.

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

Кроме того, данный цвет является одним из набора цветов так называемого flat-дизайна (или «плоского» дизайна), который разработан компанией Google и ставший сверхпопулярным как в графическом, так и в видео и web-дизайне.

Кроме того, использован другой цвет, более темный, для других важных, но требующих выделения элементов. Данный цвет (#34495e) используется для таких элементов, как навигация и подобных ему. Для элементов данного типа не требуется привлечь внимание пользователя с первых секунд его пребывания на сайте, а наоборот, быть незаметными до момента, когда данный элемент понадобится. Данный цвет так же является цветом из набора цветов flat-дизайна.

Так же для отдельных элементов выбраны цвета из того же набора, которые используются единожды, однако должны привлечь внимание (блог студента за границей, Международный клуб ДВГУПС). Данные цвета – #9b59b6 и #f1c40f.

Свежие статьи
Популярно сейчас
А знаете ли Вы, что из года в год задания практически не меняются? Математика, преподаваемая в учебных заведениях, никак не менялась минимум 30 лет. Найдите нужный учебный материал на СтудИзбе!
Ответы на популярные вопросы
Да! Наши авторы собирают и выкладывают те работы, которые сдаются в Вашем учебном заведении ежегодно и уже проверены преподавателями.
Да! У нас любой человек может выложить любую учебную работу и зарабатывать на её продажах! Но каждый учебный материал публикуется только после тщательной проверки администрацией.
Вернём деньги! А если быть более точными, то автору даётся немного времени на исправление, а если не исправит или выйдет время, то вернём деньги в полном объёме!
Да! На равне с готовыми студенческими работами у нас продаются услуги. Цены на услуги видны сразу, то есть Вам нужно только указать параметры и сразу можно оплачивать.
Отзывы студентов
Ставлю 10/10
Все нравится, очень удобный сайт, помогает в учебе. Кроме этого, можно заработать самому, выставляя готовые учебные материалы на продажу здесь. Рейтинги и отзывы на преподавателей очень помогают сориентироваться в начале нового семестра. Спасибо за такую функцию. Ставлю максимальную оценку.
Лучшая платформа для успешной сдачи сессии
Познакомился со СтудИзбой благодаря своему другу, очень нравится интерфейс, количество доступных файлов, цена, в общем, все прекрасно. Даже сам продаю какие-то свои работы.
Студизба ван лав ❤
Очень офигенный сайт для студентов. Много полезных учебных материалов. Пользуюсь студизбой с октября 2021 года. Серьёзных нареканий нет. Хотелось бы, что бы ввели подписочную модель и сделали материалы дешевле 300 рублей в рамках подписки бесплатными.
Отличный сайт
Лично меня всё устраивает - и покупка, и продажа; и цены, и возможность предпросмотра куска файла, и обилие бесплатных файлов (в подборках по авторам, читай, ВУЗам и факультетам). Есть определённые баги, но всё решаемо, да и администраторы реагируют в течение суток.
Маленький отзыв о большом помощнике!
Студизба спасает в те моменты, когда сроки горят, а работ накопилось достаточно. Довольно удобный сайт с простой навигацией и огромным количеством материалов.
Студ. Изба как крупнейший сборник работ для студентов
Тут дофига бывает всего полезного. Печально, что бывают предметы по которым даже одного бесплатного решения нет, но это скорее вопрос к студентам. В остальном всё здорово.
Спасательный островок
Если уже не успеваешь разобраться или застрял на каком-то задание поможет тебе быстро и недорого решить твою проблему.
Всё и так отлично
Всё очень удобно. Особенно круто, что есть система бонусов и можно выводить остатки денег. Очень много качественных бесплатных файлов.
Отзыв о системе "Студизба"
Отличная платформа для распространения работ, востребованных студентами. Хорошо налаженная и качественная работа сайта, огромная база заданий и аудитория.
Отличный помощник
Отличный сайт с кучей полезных файлов, позволяющий найти много методичек / учебников / отзывов о вузах и преподователях.
Отлично помогает студентам в любой момент для решения трудных и незамедлительных задач
Хотелось бы больше конкретной информации о преподавателях. А так в принципе хороший сайт, всегда им пользуюсь и ни разу не было желания прекратить. Хороший сайт для помощи студентам, удобный и приятный интерфейс. Из недостатков можно выделить только отсутствия небольшого количества файлов.
Спасибо за шикарный сайт
Великолепный сайт на котором студент за не большие деньги может найти помощь с дз, проектами курсовыми, лабораторными, а также узнать отзывы на преподавателей и бесплатно скачать пособия.
Популярные преподаватели
Добавляйте материалы
и зарабатывайте!
Продажи идут автоматически
5288
Авторов
на СтудИзбе
417
Средний доход
с одного платного файла
Обучение Подробнее