Преподаватель который помогает студентам и школьникам в учёбе.

Применение средств создания серверного программного обеспечения ( АНАЛИЗ ПРЕДМЕТНОЙ ОБЛАСТИ И ФОРМИРОВАНИЕ ТРЕБОВАНИЙ К ИНФОРМАЦИОННОЙ СИСТЕМЕ )

Содержание:

ВВЕДЕНИЕ

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

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

Объект автоматизации – «Школа Ателье». Данная организация занимается проведением обучающих курсов шитья и моделирования одежды. Значительная часть деятельности организации проходит в интернете, где осуществляется обратная связь с клиентами и привлечение новых учеников.

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

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

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

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

Методы и технологии, используемые в период выполнения курсовой работы, состоят из стандартных инструментов для разработчика. Клиентская часть (Front-end) требует знание языков разметки, а также умение работать в текстовом редакторе кода. Для серверной части (Back-end) вместе с базой данных, необходимо будет умение запускать локальный сервер на компьютере, а также опыт обращения с таблицами SQL. Оптимизация сайта для поисковых систем (SEO) требует актуальных знаний в работе алгоритмов ранжирования популярных поисковиков.

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

1 АНАЛИЗ ПРЕДМЕТНОЙ ОБЛАСТИ И ФОРМИРОВАНИЕ ТРЕБОВАНИЙ К ИНФОРМАЦИОННОЙ СИСТЕМЕ

1.1 ОПИСАНИЕ ШКОЛЫ АТЕЛЬЕ

Миссия «Школы Ателье» заключается в обучении и предоставлении всего необходимого материала людям, желающим реализовать себя в швейном деле. Задача организации проследить, чтобы ученик усвоил на должном уровне весь преподаваемый материал и по завершению курса мог самостоятельно шить одежду себе или другим людям.

Система целей организации состоит из нескольких ключевых показателей. Первый и самый главный показатель – это качество сшитой одежды, которую создают выпускаемые ученики. Второй показатель – это отзывы, обратная связь учеников о пройденных курсах, их пожелания или даже критика. Третий показатель – это популярность и узнаваемость организации в интернете у жителей города Екатеринбург. Четвертый показатель – затраты на продвижение организации, окупаемость рекламы и других издержек.

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

Состояние информационных технологий внутри организации почти во всем соответствует современным стандартам. Это вынужденная мера в связи с постоянной конкуренцией с другими организациями из этой сферы. Уже внедренная в организацию автоматизация бизнес процессов используется, в первую очередь, в продвижении курсов через интернет рекламу. Для этого организация использует инструменты, предоставляемые самими рекламными площадками для своих клиентов. К таким инструментам можно отнести подбор целевой аудитории на сайтах, где будет размещаться реклама. Сначала идет создание шаблона аудитории по заданным критериям: пол, возраст, регион проживания. Затем программа фильтрует аудиторию по этому шаблону на площадках, которые могут посещать потенциальные клиенты. В итоге реклама будет показываться только тем людям, которые прошли через фильтр. На момент показа рекламы вступает еще один инструмент автоматизации – анализ отклика аудитории. Такой инструмент фиксирует реакцию людей на тот или иной формат рекламы и через некоторое время старается показывать только тот формат, который пользуется популярностью у посетителей площадки. Дополнительная автоматизация присутствует в добавлении статей и новостей в клиентскую часть информационной системы, а также на социальные страницы курсов. В статьях содержится актуальная информация для учеников о ценах, сроках и содержании предстоящих занятий.

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

Стратегия развития информационных технологий заключается в постоянном слежении за трендами в способах привлечении новой аудитории, с последующим применении новых инструментов на практике. Для отслеживания используются IT-направленные сообщества, SMM и SEO специалистов. Помимо этого, технический специалист занимается самообразованием в области front-end разработки, чтобы внедрять новые функции в информационную систему организации.

1.2 АНАЛИЗ СУЩЕСТВУЮЩЕЙ ОРГАНИЗАЦИИ БИЗНЕС (ПРИКЛАДНЫХ) И ИНФОРМАЦИОННЫХ ПРОЦЕССОВ

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

Рисунок 1 – Организация закупки оборудования^[1]

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

Помимо этого, в компании немалую роль играет организация информационных процессов. Для привлечения клиентской базы используется официальный web-сайт [14], который одновременно является визитной карточкой курсов. Когда человек выбирает на какие курсы ему стоит записаться, немалую роль на это решение оказывает сайт организации и впечатление, которое он производит на своих посетителей. Если используется устаревший дизайн или неудобная навигация, посетитель останется недовольным. Помимо этого, существует необходимость постоянно работать над SEO-составляющей проекта, чтобы тот продвигался в рейтинге поисковых систем и занимал первые места в выдаче Google [15] и Yandex [16].

Мой анализ недостатков существующей информационной системы организации выявил ряд грубых ошибок, которые нужно исправить. В первую очередь, это отсутствие внятной SEO-оптимизации, и как итог – ошибки в html-разметке страницы: на странице новости несколько раз вставлен тег <h1>, что плохо оценивается роботами поисковых систем. Важные html теги разметки <body> и <head> не вставлены на ряде страниц. Так же есть череда других ошибок, которые относятся к SEO и приводят к занижению рейтинга сайта.

После проверки сайта на оптимизацию, результаты остались неутешительными (рисунок 2).

Рисунок 2 – Анализ оптимизации для вебмастеров^[2]

В клиентской части информационной системы совсем не продуманна система нагрузки трафика, которую принимает на себя пользователь. Изображения находятся не в сжатом формате, присутствуют подгружаемые файлы, которые занимают больше 5 мегабайт. Есть ненужные, громоздкие скрипты, которые фактически находятся на других ресурсах и подгружаются к сайту организации во время открытия страницы. Всё это очень плохо сказывается на скорости загрузки страниц, что лишний раз подтверждается проверкой через специальные сервисы (рисунок 3). Пользователям приходится ждать вплоть до пяти секунд чтобы открыть новую страницу.

Рисунок 3 – Анализ скорости загрузки страниц^[3]

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

Последняя проблема – это неудобная база данных для хранения, публикации и редактирования новостей курсов. Неудобная база замедляет скорость работы с материалами.

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

В процессе необходимо учитывать и анализировать уже успешные проекты в рассматриваемой области. К таким проектам относятся конкуренты курсов «Школы Ателье», имеющие сравнимую клиентскую базу. В первую очередь, необходимо обращать внимание на методы, которыми они добиваются высоких положений в поисковых системах. Стоит обратить внимание на их мета-теги, которыми пользуются поисковые роботы. К таким тегам относятся title, description, keywords и другие [18].

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

1.3 ПОСТАНОВКА ЗАДАЧИ АВТОМАТИЗАЦИИ БИЗНЕС-ПРОЦЕССОВ

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

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

Построим модель новой организации процессов с использованием нотаций IDEF0. Главная цель модели – выявить ту основную задачу, которую решает выполнение автоматизации. Особенно модель необходима при составлении общего взгляда на бизнес-задачу, которую мы решаем своим проектом: что именно нам требуется для качественного решения поставленной задачи, какой результат мы получим на выходе, какие лица задействованы в бизнес-процессе. Такая модель даёт общий взгляд на процесс.

Далее решим какая будет входная и выходная информация в базе данных, механизмы работы и управление. Наша база данных работает с одним конкретным модулем системы - «Новости». Информация именно такого характера будет хранится, добавляться и редактироваться внутри новой информационной системы. Главной задачей модели является обслуживание ее пользователей через обработку запросов, которые будут от них поступать. Развивая эту мысль, установим, что основная цель - это «Обслуживание пользователя системы».

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

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

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

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

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

Рисунок 4 – Контекстная диаграмма системы^[4]

Перейдем к декомпозиции этой модели. Предметом декомпозиции будет последовательность системы в работе с пользователем:

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

В итоге получится следующая диаграмма (рисунок 5).

Рисунок 5 – Декомпозиция обслуживания пользователя системы^[5]

Теперь поочередно декомпозируем элементы получившийся диаграммы. Вначале устанавливается уровень доступа к системе через определение к какой категории относится пользователь. Введенное пользователем имя сверяется со списком имен в базе данных, а затем указывает на категорию к которой относится тот или иной пользователь системы. Эта категория в дальнейшем будет определять какими полномочиями будет обладать пользователь. Через объединение данных о полномочиях и уровне доступа к системе, мы создаем определенный список разрешенных пользователю действий. В итоге декомпозиция определения уровня доступа выглядит следующим образом (рисунок 6).

Рисунок 6 – Декомпозиция определения уровня доступа^[6]

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

открыть доступ к базе данных;
выполнить запросы;
показать результат запросов.

На следующей диаграмме показан процесс обработки запросов и выдача результатов (рисунок 7).

Рисунок 7 – Декомпозиция обработки запроса^[7]

Теперь составим спецификацию функциональных требований к информационной системе. У системы будет всего два типа пользователей: гость и системный администратор. У гостя может быть всего один основной сценарий - возможность отправить запрос на просмотр новостей, которые в итоге отобразятся на странице информационной системы. Сценарий просмотра новостей осуществляется за счет отправки запроса базе данных. В системе будет отдельная страница, которая как агрегатор показывает последние новости о курсах шитья в порядке даты публикации [22]. Вместо полного текста новости, отображается короткое описание и превью. После клика по превью пользователь попадает на страницу с самой новостью.

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

Рисунок 8 – Схема функциональных требований^[8]

Требования к программно-технической среде администратора не сильно велики. В качестве языков разметки были выбраны html и css. Для взаимодействия с серверной частью используется PHP [23]. В качестве СУБД используется MySQL [24]. Вся разработка происходит на операционной системе Windows 10. Для написания и редактирования всего программного кода используется бесплатный редактор Atom с открытым исходным кодом. В качестве локального сервера выступает Open Server Panel, он позволяет настраивать и администрировать компоненты клиентской части информационной системы, а также включает в себя другой инструмент, которым я пользуюсь во время разработки – phpMyAdmin. Через phpMyAdmin создается база данных с таблицами, которая интегрируется в новую информационную систему для работы модуля Новостей. Результат программной разработки тестируется на интернет-браузере Google Chrome, версии 69.0.3497.100.

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

Windows:
MacOS;
Linux.

У смартфонов к таким операционным системам относятся:

IOS;
Android.

Помимо этого, пользователю необходим доступ в интернет и браузер, желательно последней версии.

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

2 ПРОЕКТ АВТОМАТИЗАЦИИ ПРОЦЕССОВ В ОБРАЗОВАТЕЛЬНОМ УЧРЕЖДЕНИИ

2.1 ИНФОРМАЦИОННОЕ ОБЕСПЕЧЕНИЕ

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

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

id статьи;
заголовок статьи;
метатег description для поисковых роботов;
метатег keywords для поисковых роботов;
дата написания статьи;
краткое описание для превью;
полный текст статьи.

Выделим все основные сущности в перечисленном списке и проанализируем их:

статья;
метатеги;
дата;
id.

Уже сейчас можно выделить две главные сущности: Статья и Метатеги. Сразу же приходит на ум простая связь между сущностями – Статья имеет несколько метатегов, а метатеги прописываются каждой статье. Очевидная связь один-ко-многим. Первоначальный вариант ER-модели будет таким (Рисунок 9).

Рисунок 9 – ER-модель один-ко-многим^[9]

Обратите внимание на знаки по обе стороны связи. Таким образом устанавливается количественное отношение между сущностями. Мы знаем, что каждая статья имеет свой уникальный id. Так же у любой статьи есть дата, которая вовсе не уникальна, ведь за день может выйти несколько публикаций. Исходя из этого, расширим модель дополнительными сущностями (Рисунок 10).

Рисунок 10 – Полная ER-модель системы^[10]

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

Таблица 2 – Параметры и их тип^[11]

№	Имя	Тип	Комментарий
1	Id	int(11)	ID статьи
2	Title	varchar(255)	Заголовок статьи
3	Description	varchar(255)	Метатег description для поисковых роботов
4	Keywords	varchar(255)	Метатег keywords для поисковых роботов
5	Preview	text	Краткое описание статьи для превью
6	Text	text	Полный текст статьи
7	Data	date	Дата написания статьи

Их схема взаимосвязей (Рисунок 11).

Рисунок 11 – Даталогическая модель^[12]

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

переключатели;
кнопки;
выпадающее меню;
календарь.

В нашем случае формы тоже имеют разные способы заполнения (Таблица 1).

Таблица 1 – Экранные формы^[13]

№	Имя	Тип
1	Id	Число
2	Title	Текст
3	Description	Текст
4	Keywords	Текст
5	Preview	Текст
6	Text	Текст
7	Data	Выбор из выпадающего календаря

Во время заполнения текстовых полей, используется нормативно-справочная информация для языка HTML [17]. Язык определяет способ оформления текста, ссылок, вставки изображений, а также другие методы разметки статьи. На момент заполнения форм, пользователю видные все теги языка. Тем не менее, на стороне клиентской части информационной системы теги преобразуют текст в задуманный стиль и не будут видны пользователю. На странице нормативно-справочной информации содержатся такие данные как:

список атрибутов;
функции атрибутов;
имя атрибута;
элементы атрибута;
описание атрибута.

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

2.2 ПРОГРАММНОЕ ОБЕСПЕЧЕНИЕ

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

Первыми идут инструменты для разработки клиентской части системы. Состав программ первой категории выглядит следующим образом:

atom – текстовый редактор для написания кода программирования или зыков разметки. Имеет открытые исходники. В редактор можно добавлять персональные плагины [25];
google chrome – основная среда для тестирования результатов изменения в коде. Используется версия 9.0.3497.100.

Вторая категория программ для СУБД:

open server – серверная среда, для настройки и администрирования различных компонентов системы. Применятся для запуска локальных сетей на персональных компьютерах [11];
phpMyAdmin – инструмент, необходимый для управления базами данных и их таблицами MySQL. Нужен в основном для работы с СУБД [10].

Третья категория программного обеспечения для SEO в основном состоит из сторонних веб-сервисов и не требует установки на персональный компьютер:

liveInternet – рейтинг сайтов и подсчет статистики. Инструмент необходим для учета уникальных посетителей сайта;
google аналитика – интернет-сервис от Google для веб-мастеров, цель которого заключается в анализе поведения пользователей на сайте. Инструмент дает подсказки администраторам, с помощью которых можно повысить рейтинг сайта в поисковой системе [27];
яндекс метрика – тот же самый интернет-сервис, только от Yandex [28].

Структуру программного обеспечения можно представить с помощью Диаграммы классов (class diagram UML). Классы в данном случае представляют собой строительные блоки нашей структуры. Они описывают массив объектов с их общими атрибутами, а также отношениями и операциям.

Диаграмма классов строится из совокупности предметов модели. Такие диаграммы используются как на этапе конструирования новой системы, так и при описании уже вошедших в производство систем.

В нашем случае диаграмма классов выглядит так (Рисунок 12). Она демонстрирует нам три основные части программного обеспечения проекта при помощи вложенности компонентов.

Рисунок 12 – Диаграмма классов программного обеспечения^[14]

Спецификация программных модулей делит их на несколько типов:

модуль клиентской части информационной системы (Front end) – весь программный код пишется для этого модуля;
модуль серверной части информационной системы (Back end) – база данных новостей хранится здесь.

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

Для начала построим диаграмму активности для модуля клиентской части системы (Front end). В качестве примера возьмем событие, где от модуля требуется показать пользователю системы страницу с новостью. Так как все новости у нас хранятся в базе данных, то просто так отобразить эту страницу у нас не получится. Перед этим отправляется запрос на сервер в нашу СУБД, которая в ответ отдает данные нужной новости, а клиентская часть системы параллельно загружает шаблон страницы. Только после этого пользователь сможет увидеть страницу новости целиком. В результате диаграмма активности у нас будет выглядеть следующим образом (Рисунок 13).

Рисунок 13 – Диаграмма активности модуля клиентской части^[15]

Модуль серверной части системы (Back-end) позволяет редактировать и публиковать новости в базе данных. После того как пользователь внесет изменения в предоставленные формы, система проверяет их на соответствие заранее заданным типам форм. Например форме «title» присвоен тип varchar(255), где 255 – это количество символов, которые влезут в форму [29]. Тип формы «int(11)» не позволит ввести в нее что-то кроме чисел и цифр. Диаграмма активности модуля серверной части системы (Back end) будет выглядеть так (Рисунок 14).

Рисунок 14 – Диаграмма активности модуля серверной части^[16]

Далее рассмотрим схемы настройки готовых программных решений. Для начала возьмем программу Atom, в которой писался весь html, css и php код. Во время курсовой работы, структура информационной системы писалась на отдельных файлах-страницах с исходным программным кодом, которые все вместе лежали внутри одного архива, а Atom использовался как текстовый редактор для этих страниц. К таким страницам относятся:

main.html, листинг в приложении А;
contacts.php, листинг в приложении Б;
news.php, листинг в приложении В;
newsPage.php, листинг в приложении Г.

Таким образом, каждый из этих файлов отвечает за разметку основных страниц информационной системы: Главная, Контакты, Список последних новостей, Страница новости.

Помимо этого, в архиве есть еще файлы. Файл «.htaccess» задает тип кодировки всем страницам и состоит всего из одной строки: «AddDefaultCharset UTF-8» [30].

В файле «my.css» прописаны все необходимые стили для разметки страниц [7, с. 47], а также путь к некоторым изображениям, которые используются в дизайне информационной системы. Сами изображения хранятся внутри архива в отдельных папках. Часть из этих изображений можно увидеть в приложениях Д и Е.

Теперь рассмотрим настройки программ, отвечающих за базу данных. К таким программам относятся phpMyAdmin, и Open Server. Дело в том, что страницы News.php и NewsPage.php генерируют новости из базы данных через php и не смогут работать, если заранее не подключится к СУБД (phpMyAdmin) и локальному серверу (Open Server). Если для запуска локального сервера достаточно двух кликов, то с phpMyAdmin необходимо произвести ряд дополнительных операций. Во-первых, phpMyAdmin запускается из интерфейса локального сервера Open Server, поэтому его нужно запустить в первую очередь. Далее, во время открытия phpMyAdmin, нас попросят войти в систему через логин и пароль. Так как у нас запущен локальный сервер, используется стандартный логин «root» и пустой пароль. Все настройки подключения к базе данных «"localhost"; "root"; без пароля» прописаны в отдельном файле «db.php»:

Листинг 1. Исходный код файла «db.php»

<?php

$host = "localhost";

$dbuser = "root";

$dbpassword = "";

$dbname = "test1base"; // Имя базы данных

$dbarticles = "news"; // Имя таблицы

$connection = mysqli_connect("$host", "$dbuser", "$dbpassword", "$dbname");

А вот так страница со списком последних новостей подключается к базе данных через файл «db.php» и оформляет полученную информацию в html код:

Листинг 2. Часть исходного кода из файла «News.php»

<?php

/* Подключение к базе данных */

require_once("db.php");

if($connection == false){

echo "Error!";

echo mysqli_connect_errno();

exit();

}

/* Запрос данных */

$query = mysqli_query($connection, "SELECT * FROM $dbarticles ORDER BY id DESC ");

while($article = mysqli_fetch_assoc($query))

{

/* Оформление данных в html разметку */

echo '<div class="MyeTitle" style="text-align:left;"><a href=NewsPage.php?id='

.$article['id'].'>'.$article['title'].'</a></div>';

echo '<span class="e-date"><span class="ed-value">'.$article['data'].'</span></span>';

echo '<div class="eMessage" style="text-align:left;clear:both;padding-bottom:2px;">'.$article['preview'].'</div>';

echo '<div style="margin:5px 0 15px 0;" align="center" class="Readnext"><a href=NewsPage.php?id='.$article['id'].'>Читать далее</a>    </div></td></tr></tbody></table><br><br>';

}

Пример того, как данные о мета-тегах прописываются в страницу новости с помощью языка PHP:

Листинг 3. Часть исходного кода из файла «NewsPage.php»

<head>

<title><?php echo $article['title'] ?> | Школа Ателье</title> // Мета-тег title

</head>

Фрагмент кода, который отвечает за показ краткого списка последних новостей в правой части некоторых страниц:

Листинг 4. Часть исходного кода из файла «Contacts.php»

<?php

/* Подключение к базе данных */

require_once("db.php");

if($connection == false){

echo "Error!";

echo mysqli_connect_errno();

exit();

}

/* Запрос данных */

$query = mysqli_query($connection, "SELECT * FROM $dbarticles ORDER BY id DESC LIMIT 4");

while($article = mysqli_fetch_assoc($query))

{

/* Оформление данных в html разметку */

echo '<a href=NewsPage.php?id='

.$article['id'].'>'.$article['title'].'</a></td></tr><br><tr><td width="50%" style="padding-left:2px;font-size:11px;color:#7C7C7C;">';

echo '<i>'.$article['data'].'</i></td></tr></table><hr style="padding:5px 0 0;margin:0 10px 7px 0;border-bottom:1px dashed #999999;">';

}

После того как администратор войдет в интерфейс phpMyAdmin, ему понадобится импортировать готовую базу данных. Для этого используется файл «test1base.sql», который написан на языке SQL. Листинг на этот файл можно посмотреть в приложении Ж.

Далее следует описание интерфейса для импорта файла: Верхняя панель навигации - Импорт - Импортируемый файл «test1base.sql» - Кодировка файла «utf-8» - Формат «sql» - Вперед. В текущей базе данных хранится две статьи по тематике курсов шитья. «Test1base» - это название базы данных, а «news» - название таблицы в ней. На этом моменте клиент-серверная информационная система полностью готова к работе.

2.3 ТЕХНИЧЕСКОЕ ОБЕСПЕЧЕНИЕ

Составим схему клиент-серверной архитектуры нашего проекта. Для этого будут использованы диаграммы компонентов и диаграммы развёртывания.

Проект в целом представляет из себя исходные файлы для клиент-серверной информационной системы и хранится в одном архиве. Внутри архива содержатся все необходимые системные файлы и папки. Разные файлы отвечают за разметку html страницы, css стили этой разметки, включают в себя исполняемый php код. Также есть дополнительные файлы-инструкции, без которых система не сможет работать нормально. Целый архив с файлами проекта для работы информационной системы выглядит так (Рисунок 15).

Рисунок 15 – Архив с фалами проекта для работы информационной системы^[17]

Main.html, Contacts.php, News.php, NewsPage.php - это страницы клиентской части информационной системы (Главная, Контакты, Последние новости, Страница конкретной новости). В исходном коде этих файлов используется язык разметки html, а также исполняемый php код в некоторых из них.

В файле «my.css» прописаны css стили для разметки этих страниц. Он задает цвет и шрифт тексту, оформление ссылок, размер отступов у ряда элементов, которые используются в конструкции системы. Помимо этого, в нем прописаны пути к изображениям. Таким образом файл «my.css» влияет на остальные четыре файла страниц системы: Main.html, Contacts.php, News.php, NewsPage.php.

Построим диаграмму компонентов с отношениями зависимости между ними (Рисунок 16). Подобная зависимость указывает, что процесс внесения изменений в исходный код «my.css» спровоцирует неизбежные изменения в работе остальных четырех зависимых страницах.

Рисунок 16 – Диаграмма компонентов с отношениями зависимости «my.css»^[18]

Файл-инструкция «.htaccess» задает тип кодировки всем страницам информационной системы, и имеет такое же влияние, как и «my.css» (Рисунок 17).

Рисунок 17 – Диаграмма компонентов с отношениями зависимости «.htaccess»^[19]

В папках «Bloks» и «Materials» содержатся изображения. Они используются как в дизайне информационной системы, так и внутри новостей.

Упомянутые ранее страницы «News.php» и «NewsPage.php» генерируют новости из базы данных. Файл с базой данных имеет название «test1base.sql» и вместе со всеми лежит внутри архива проекта. Файл «test1base.sql» не сможет нормально работать без еще одного дополнительного файла-инструкции «db.php». Внутри файла-инструкции «db.php» прописаны настройки подключения к базе данных: "localhost"; "root"; без пароля. Таким образом файлы «test1base.sql» и «db.php» дополняют друг друга, а их изменения необратимо повлияют на страницы «News.php» и «NewsPage.php» (Рисунок 18).

Рисунок 18 – Диаграмма компонентов с отношениями зависимости «test1base.sql» и «db.php»^[20]

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

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

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

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

каналы связи;
брандмауэры;
серверы;
рабочие станции;
хранилища данных.

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

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

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

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

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

main.html;
my.css;
.htaccess;
test1base.sql.

Тем не менее, все эти документы могут присутствовать на диаграмме компонентов, что было продемонстрированно ранее.

Файл «db.php» можно считать исполняемым, поэтому он будет использоваться в диаграмме развертывания. Так же и другие файлы с исполняемым php кодом без проблем могут быть добавлены в диаграмму развертывания. К таким файлам относятся:

contacts.php;
news.php;
newsPage.php.

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

Для нормальной работы нашей системы используются программы:

phpMyAdmin – интерфейс для работы с базой данных;
open server – запускает локальный сервер на персональном компьютере.

Локальный сервер поднимается через программу Open Server, а работа с базами данных происходит в phpMyAdmin. Упомянутые ранее страницы «News.php» и «NewsPage.php» генерируют новости из базы данных. Если не подключится к локальному серверу, то страницы не смогут корректно работать с данными и пользователь увидит ошибку. Файл «db.php» является связующим звеном и содержит настройки подключения к базе данных.

Теперь укажем файлы, которые выполняются на узле локального сервера в момент исполнения. Используем способ отображения на диаграмме, где в узел вкладываются компоненты (Рисунок 19).

Рисунок 19 – Диаграмма развертывания с отношениями зависимости «test1base.sql» и «db.php»^[21]

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

Рисунок 20 – Диаграмма развертывания с соединениями между узлами^[22]

2.4 ТЕХНОЛОГИЧЕСКОЕ ОБЕСПЕЧЕНИЕ

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

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

Рисунок 21 – Схема первого этапа информационного потока новостей^[23]

Второй этап относится к клиентской части информационной системы. После того как статья добавлена в базу данных, она будет отображаться на странице с последними новостями. Когда пользователь заходит на эту страницу, он автоматически отправляет запрос серверу системы. Сервер в свою очередь берет данные из своей базы данных и отдает обратно пользователю список последних статей. В итоге посетитель клиентской части информационной системы видит добавленную статью. Схему второго этапа информационного потока новостей можно представить так (Рисунок 22).

Рисунок 22 – Схема второго этапа информационного потока новостей^[24]

2.5 ТЕСТИРОВАНИЕ ИНФОРМАЦИОННОЙ СИСТЕМЫ

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

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

Не будем заострять внимание на таких вещах как написание текста, а лучше сразу перейдем к технической части. В первую очередь необходимо запустить локальный сервер на компьютере, который будет связывать базу данных с клиентской частью информационной системы. Делается это с помощью программы Open Server. После того как сервер будет запущен, нам нужно войти в интерфейс управления СУБД с помощью программы phpMyAdmin. Внутри интерфейса мы кликаем на навигацию с левой стороны, а именно по базе данных, которой присвоено имя «test1base». Внутри базы переходим к таблице под названием «news». Внутри этой таблицы заполняются статьи.

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

в поле «Id» вводим порядковый номер статьи. У нашей пробной статьи этот номер «1»;
в поле «Title» вводим заголовок статьи. В нашем случае «Новая Круизная коллекция от Марии Грации Кьюри»;
в поле «Description» вводим краткое описание для поисковых роботов: «Обзор стильной коллекции одежды на сезон весна-лето для девушек, а также другие новости на тему моды и шитья»;
в поле «Keywords» вводим ключевые слова, опять же для поисковых роботов: «круизная, коллекция, кьюри, животные, лес»;
в поле «Preview» вписываем текст, который будет использован на превью статьи;
в поле «Text» пишем полный текст статьи;
в поле «Data» выбираем дату публикации: «2018-10-11».

Текст для полей «Preview» и «Text» занимает слишком много места. Его исходник можно найти в приложении Ж.

Вторая статья заполняется аналогично. Полный листинг обеих статей так же находится в приложении Ж. Приложение Ж представляет из себя листинг файла «test1base.sql», который является ничем иным, как исходным кодом базы данных для экспорта/импорта на другие носители [36]. Программный язык файла – SQL.

После того как статьи были внесены в базу данных, настало время проверить их корректное отображение в клиентской части информационной системы. Открываем страницу с новостями и видим, что недавно добавленные статьи появились на экране браузера. Все прописанные html стили разметки и изображения так же обрабатываются правильно. Это значит, что локальный сервер корректно принимает и отдает запросы пользователя, а также верно читает таблицу базы данных. Скриншот правильного отображения статьи выглядит так (Рисунок 23).

Рисунок 23 – Скриншот правильного отображения статьи^[25]

ЗАКЛЮЧЕНИЕ

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

Реализации цели курсовой работы способствовало решение следующих задач:

проведение анализа предприятия;
изучение основного программного обеспечения для современной разработки;
выявление ошибок в коде клиентской части системы и их исправление;
обновление устаревшего дизайна системы;
выявление ошибок в seo-оптимизации и их исправление;
разработка новой базы данных для модуля новостей.

Результат действий по seo-оптимизации вылился в значительное увеличение ежедневного количества пользователей веб-сайта. Обновленный дизайн и разметка теперь упрощают навигацию по страницам и делают пребывание на них приятнее. Избавление от ошибок сократило скорость загрузки страниц максимум до трех секунд. Новая база данных ускоряет работу с публикацией и редактированием новостей.

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

СПИСОК ИСПОЛЬЗУЕМЫХ ИСТОЧНИКОВ

Головчинер М.Н. Базы данных. Основные понятия, модели данных, процесс проектирования [Текст] // Томск.: ТГУ, 2009. – 126 с.
Денис Иванов, Федор Новиков. Моделирование на UML [Текст] // Учебно-методическое пособие – 200 с.
Джеймс Рамбо [и др.] Язык UML. Руководство пользователя. [Текст] // Питер, ДМК пресс. - 2006. – № 2. - 496 с.
Диго С.М. Базы данных. Проектирование и создание [Текст] // Учебно-методический комплекс. – М.: Изд. центр ЕАОИ. 2008. – 171 с.
Лоскутов А.Ю. Анализ временных рядов. [Текст] // Курс лекций. Физический факультет МГУ. 2008. – 113 с.
Новиков Ф.А. Учебно-методическое пособие по дисциплине «Анализ и проектирование на UML» [Текст] // ИТМО, Санкт-Петербург - 2007. – 283 с.
Хеник Бен, HTML и CSS Путь к совершенству [Текст] // Питер - 2011. – 332 с.
Нотация EPC [Электронный ресурс]. – Режим доступа: www.businessstudio.ru, свободный.
Нотация IDEF0 [Электронный ресурс]. – Режим доступа: www.businessstudio.ru, свободный.
Руководство и FAQ по phpMyAdmin [Электронный ресурс]. – Режим доступа: php-myadmin.ru, свободный.
Руководство пользователя Open Server [Электронный ресурс]. – Режим доступа: ospanel.io, свободный.
PageSpeed Insights, Скорость загрузки сайта [Электронный ресурс]. – Режим доступа: developers.google.com, свободный.
PR-CY, SEO анализ сайта [Электронный ресурс]. – Режим доступа: a.pr-cy.ru, свободный.
«Школа ателье», Главная страница [Электронный ресурс]. – Режим доступа: school-atele.ru, свободный.
Google, Поисковая система [Электронный ресурс]. – Режим доступа: google.com, свободный.
Яндекс, Поисковая система [Электронный ресурс]. – Режим доступа: yandex.ru, свободный.
Htmlbook, Справочник по HTML [Электронный ресурс]. – Режим доступа: htmlbook.ru, свободный.
Мета теги для сайта [Электронный ресурс]. – Режим доступа: ashmanov.com, свободный.
Htmlbook, HTML5 [Электронный ресурс]. – Режим доступа: htmlbook.ru, свободный.
Htmlbook, CSS3 [Электронный ресурс]. – Режим доступа: htmlbook.ru, свободный.
Декомпозиция как метод системного анализа [Электронный ресурс]. – Режим доступа: life-prog.ru, свободный.
«Школа ателье», Новости [Электронный ресурс]. – Режим доступа: school-atele.ru, свободный.
Руководство по PHP [Электронный ресурс]. – Режим доступа: secure.php.net, свободный.
Справочное руководство по MySQL [Электронный ресурс]. – Режим доступа: mysql.ru, свободный.
Documentation - Atom v1.33.0 [Электронный ресурс]. – Режим доступа: atom.io, свободный.
LiveInternet, Статистика сайта [Электронный ресурс]. – Режим доступа: liveinternet.ru, свободный.
Google Analytics, Детальная статистика посетителей веб-сайтов [Электронный ресурс]. – Режим доступа: analytics.google.com/analytics, свободный.
Яндекс.Метрика, Интернет-сервис для оценки посещаемости веб-сайтов [Электронный ресурс]. – Режим доступа: metrika.yandex.ru, свободный.
Ruhighload, Выбор типов данных в Mysql [Электронный ресурс]. – Режим доступа: https://ruhighload.com, свободный.
Кратко об UTF-8 [Электронный ресурс]. – Режим доступа: blog.perlover.com, свободный.
Элементы графической нотации диаграммы компонентов sql [Электронный ресурс]. – Режим доступа: intuit.ru, свободный.
Элементы графической нотации диаграммы развертывания [Электронный ресурс]. – Режим доступа: intuit.ru, свободный.
Организационная структура управления предприятием [Электронный ресурс]. – Режим доступа: up-pro.ru, свободный.
Оформление допуска для работы с конфиденциальной информацией [[Электронный ресурс]. – Режим доступа: top-personal.ru, свободный.
Информационная логистика [Электронный ресурс]. – Режим доступа: xcomp.biz, свободный.
Как экспортировать базы данных MySQL [Электронный ресурс]. – Режим доступа: godaddy.com, свободный.
Хостинг сайта [Электронный ресурс]. – Режим доступа: ucoz.ru, свободный.
2domains, Реестр доменов [Электронный ресурс]. – Режим доступа: 2domains.ru, свободный.
TEXT, Аутсорсинг копирайтинга [Электронный ресурс]. – Режим доступа: text.ru, свободный.
HH, База резюме [Электронный ресурс]. – Режим доступа: ekaterinburg.hh.ru, свободный.

ПРИЛОЖЕНИЯ

ПРИЛОЖЕНИЕ А

Листинг 5. Страница Main.html

<html>

<head>

<title>Курсы кройки и шитья в Екатеринбурге | Школа Ателье</title>

</head>

<body>

<p class="Iconhead1">г. Екатеринбург, ул. Мамина-Сибиряка, д. 85, офис 710</p>

<div align="right"><p class="Iconhead3"><a href="mailto:info@school-atele.ru">info@school-atele.ru</a></p></div>

</div>

<nav>

<li><a class=" uMenuItemA" href="Main.html"><span>Информация о курсах</span></a></li>

<li><a href="News.php"><span>Новости</span></a></li>

<li><a href="Contacts.php"><span>Контакты</span></a></li></ul></div>

</div>

</div>

</nav>

</div>

</header>

<h1>Крой | Моделирование | Шитье</h1>

</div>

<p align="left">Общая продолжительность курсов закройщиков:

<ul>

<li><b>Стандартный</b> - 5 месяцев</li>

<li><b>Расширенный</b> - необязательное продолжение Стандартного курса еще на 5 месяцев ради новых профессиональных навыков</li>

</ul>

</p>

</div>

<p align="left">Уроки проходят один раз в неделю. Дни предоставляются на выбор:

<ul>

<li><b>Суббота</b> или <b>воскресение</b> 10:00-13:00</li>

<li><b>Понедельник</b> или <b>вторник</b> днем 13:00-16:00</li>

<li><b>Понедельник</b> или <b>вторник</b> вечером 18:00-21:00</li>

</ul></p></div>

<p align="left">Набор проводится два раза в год:

<ul>

<li>Набор с <b>августа</b>, сами занятия начинаются в <b>сентябре</b></li>

<li>Набор с <b>декабря</b>, сами занятия начинаются в <b>феврале</b></li>

</ul></p>

<p style="padding-top:10px;" align="left"><b>Стоимость:</b> 4000 руб. в месяц</p>

</div></div>

<div style="padding: 35px 0 20px 0;"><h2>Курсы кройки и шитья</h2></div>

<p style="padding: 0 10px 10px 10px;">Школа Ателье уже 9 лет выпускает будущих мастериц в Екатеринбурге начиная с 2009 года. Для каждого ученика мы находим индивидуальный подход и учим создавать красивую одежду для себя и своих близких. Только платье, детально сшитое по вашим меркам, будет по-настоящему удобным и сможет соответствовать абсолютно всем запросам. Освоение учебного материала идет поэтапно, плавно переходя от простого к сложному, чтобы каждому было одинаково интересно, независимо от имеющегося опыта. Именно поэтому курсы кройки и шитья подходят как для начинающих, так и для более опытных закройщиков. Главное - это ваше желание!

Наши ученики не просто учатся шить стильные платья и юбки, но и создают собственный гардероб оригинальной одежды, которую мы будем изготавливать во время прохождения учебной программы. Вы будете гордиться собой! Благодаря Школе Ателье, существует немало людей, которые нашли свое призвание, стали шить на заказ или открыли свое дело. Разве не здорово превратить свое хобби в любимую профессию?</p>

</section>

</div>

</div>

</div>

</section></div>

<ol>

<li><p>Занятия проходят в уютной обстановке. Группы включают до 10 человек, а на перерывах у нас есть чай и печеньки!</p></li>

<li><p>Ученикам бесплатно выдается множество сопровождающего материала в виде пособий и обучающего видео.</p></li>

<li><p>В группах очень легко заводятся дружеские отношения. С единомышленниками учеба проходит веселее!</p></li>

<li><p>Курсы кройки и шитья от Школы Ателье удобно посещать в Екатеринбурге без отрыва от работы (Скользящий график).</p></li>

<li><p>У вас всегда будет что подарить своим близким. Любому было бы приятно получить вещь, которую человек сделал своими руками.</p></li>

</ol>

</div>

<div style="padding:15px 0 25px 0;"><h2>Программа</h2></div>

<div style="padding-top:6px;"><b>Стандартный курс</b> Школы Ателье охватывает весь процесс изготовления одежды, начиная с заготовок и моделирования. Вы научитесь снимать мерки, работать с тканью и строить выкройки, а также поймете технологию пошива. На занятиях можно легко научиться шить юбки, блузки, брюки и даже платья. Мастер-класс по конструированию лекал также входит в обучение. Преподаватель поможет ученикам заложить фундамент, благодаря которому вы будете способны сами создавать одежду в дальнейшем.</div></div>

<br>

<div style="padding-top:10px;"><b>Расширенный курс</b> является необязательным продолжением Стандартного курса и ориентирован на получение профессиональных навыков. В его программу входит детальный обзор технологии пошива и обращение с трикотажем. Большое внимание уделяется раскрою верхней одежды, включая рукава, карманы и воротники разных типов. Вы также сможете научиться правильно моделировать драпировки. На занятиях преподаватель объясняет и наглядно показывает, каким образом нужно делать точные примерки одежды, поэтому ученикам не составит большого труда усвоить пройденный материал.</div></div>

<br>

</section>

</div>

<div id="Zapis" align="center"><a href="Contacts.php"><b>Записаться на курс</b></a></div>

</div>

</section></div>

</div>

<div style="padding: 12px 0px 5px 10px;"><a href="Contacts.php">Контакты</a></div>

</div>

</div>

</footer>

</body>

</html>

ПРИЛОЖЕНИЕ Б

Листинг 6. Страница Contacts.php

<html>

<head>

<title>Контакты | Школа Ателье</title>

</head>

<body>

<p class="Iconhead1">г. Екатеринбург, ул. Мамина-Сибиряка, д. 85, офис 710</p>

<div align="right"><p class="Iconhead3"><a href="mailto:info@school-atele.ru">info@school-atele.ru</a></p></div>

</div>

<nav>

<li><a href="Main.html"><span>Информация о курсах</span></a></li>

<li><a href="News.php"><span>Новости</span></a></li>

<li><a class=" uMenuItemA" href="Contacts.php"><span>Контакты</span></a></li></ul></div>

</div>

</div>

</nav>

</div>

</header>

</table>

<div class="Contactsh1"><h1>Контакты Школы Ателье</h1></div>

<div style="padding-top:10px;">г. Екатеринбург, ул. Мамина-Сибиряка, д. 85, офис 710</div>

<br>

Для записи необходимо позвонить по телефону:

<ul>

</ul>

<br>

Электронная почта: <a href="mailto:info@school-atele.ru">info@school-atele.ru</a>

Преподаватель: Коробейникова Наталья Павловна

</section>

</div>

<aside>

<div class="sidebox"><div class="Mysidetitle"><span>E-MAIL РАССЫЛКА</span></div>

</div>

</div>

<div class="sidebox"><div class="Mysidetitle"><span>ПОСЛЕДНИЕ НОВОСТИ</span></div>

<?php

require_once("db.php");

if($connection == false){

echo "Error!";

echo mysqli_connect_errno();

exit();

}

$query = mysqli_query($connection, "SELECT * FROM $dbarticles ORDER BY id DESC LIMIT 4");

while($article = mysqli_fetch_assoc($query)){

echo '<a href=NewsPage.php?id='.$article['id'].'>'.$article['title'].'</a></td></tr><br><tr><td width="50%" style="padding-left:2px;font-size:11px;color:#7C7C7C;">';

echo '<i>'.$article['data'].'</i></td></tr></table><hr style="padding:5px 0 0;margin:0 10px 7px 0;border-bottom:1px dashed #999999;">';

}

</div>

</div>

</div>

</aside>

</div>

<div style="padding: 12px 0px 5px 10px;"><a href="Contacts.php">Контакты</a></div>

</div>

</div>

</footer>

</body>

</html>

ПРИЛОЖЕНИЕ В

Листинг 7. Страница News.php

<html>

<head>

<title>Новости | Школа Ателье</title>

</head>

<body>

<p class="Iconhead1">г. Екатеринбург, ул. Мамина-Сибиряка, д. 85, офис 710</p>

<div align="right"><p class="Iconhead3"><a href="mailto:info@school-atele.ru">info@school-atele.ru</a></p></div>

</div>

<nav>

<li><a href="Main.html"><span>Информация о курсах</span></a></li>

<li><a class=" uMenuItemA" href="News.php"><span>Новости</span></a></li>

<li><a href="Contacts.php"><span>Контакты</span></a></li></ul></div>

</div>

</div>

</nav>

</div>

</header>

<?php

require_once("db.php");

if($connection == false){

echo "Error!";

echo mysqli_connect_errno();

exit();

}

$query = mysqli_query($connection, "SELECT * FROM $dbarticles ORDER BY id DESC ");

while($article = mysqli_fetch_assoc($query)){

echo '<div class="MyeTitle" style="text-align:left;"><a href=NewsPage.php?id='.$article['id'].'>'.$article['title'].'</a></div>';

echo '<span class="e-date"><span class="ed-value">'.$article['data'].'</span></span>';

echo '<div class="eMessage" style="text-align:left;clear:both;padding-bottom:2px;">'.$article['preview'].'</div>';

echo '<div style="margin:5px 0 15px 0;" align="center" class="Readnext"><a href=NewsPage.php?id='.$article['id'].'>Читать далее</a>    </div></td></tr></tbody></table><br><br>';

}

</section>

</div>

<aside>

<div class="sidebox"><div class="Mysidetitle"><span>E-MAIL РАССЫЛКА</span></div>

</div>

</div>

</div>

</aside>

</div>

<div style="padding: 12px 0px 5px 10px;"><a href="Contacts.php">Контакты</a></div>

</div>

</div>

</footer>

</body>

</html>

ПРИЛОЖЕНИЕ Г

Листинг 8. Страница NewsPage.php

<?php

require_once("db.php");

if($connection == false){

echo "Error!";

echo mysqli_connect_errno();

exit();

}

$page = $_GET['id'];

$query = mysqli_query($connection, "SELECT * FROM $dbarticles WHERE id='$page' ");

$article = mysqli_fetch_assoc($query);

<!doctype html>

<html>

<head>

<title><?php echo $article['title'] ?> | Школа Ателье</title>

</head>

<body>

<p class="Iconhead1">г. Екатеринбург, ул. Мамина-Сибиряка, д. 85, офис 710</p>

<div align="right"><p class="Iconhead3"><a href="mailto:info@school-atele.ru">info@school-atele.ru</a></p></div>

</div>

<nav>

<li><a href="Main.html"><span>Информация о курсах</span></a></li>

<li><a class=" uMenuItemA" href="News.php"><span>Новости</span></a></li>

<li><a href="Contacts.php"><span>Контакты</span></a></li></ul></div>

</div>

</div>

</nav>

</div>

</header>

<?php echo $article['text'] ?>

</td></tr>

</table>

</section>

</div>

<aside>

<div class="sidebox"><div class="Mysidetitle"><span>E-MAIL РАССЫЛКА</span></div>

</div>

</div>

<div class="sidebox"><div class="Mysidetitle"><span>ПОСЛЕДНИЕ НОВОСТИ</span></div>

<?php

require_once("db.php");

if($connection == false){

echo "Error!";

echo mysqli_connect_errno();

exit();

}

$query = mysqli_query($connection, "SELECT * FROM $dbarticles ORDER BY id DESC LIMIT 4");

while($article = mysqli_fetch_assoc($query)){

echo '<a href=NewsPage.php?id='.$article['id'].'>'.$article['title'].'</a></td></tr><br><tr><td width="50%" style="padding-left:2px;font-size:11px;color:#7C7C7C;">';

echo '<i>'.$article['data'].'</i></td></tr></table><hr style="padding:5px 0 0;margin:0 10px 7px 0;border-bottom:1px dashed #999999;">';

}

</div>

</div>

</div>

</aside>

</div>

<div style="padding: 12px 0px 5px 10px;"><a href="Contacts.php">Контакты</a></div>

</div>

</div>

</footer>

</body>

</html>

ПРИЛОЖЕНИЕ Д

Изображение фона сайта

Рисунок Д.1

ПРИЛОЖЕНИЕ Е

Изображение с эффектом прокрутки на главной странице сайта

Рисунок Е.2

ПРИЛОЖЕНИЕ Ж

Листинг 9. Файл test1base.sql

-- phpMyAdmin SQL Dump

-- version 4.8.3

-- https://www.phpmyadmin.net/

-- Хост: 127.0.0.1:3306

-- Время создания: Окт 12 2018 г., 05:31

-- Версия сервера: 5.6.41

-- Версия PHP: 5.5.38

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";

SET AUTOCOMMIT = 0;

START TRANSACTION;

SET time_zone = "+00:00";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;

/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;

/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;

/*!40101 SET NAMES utf8mb4 */;

-- База данных: `test1base`

-- --------------------------------------------------------

-- Структура таблицы `news`

CREATE TABLE `news` (

`id` int(11) UNSIGNED NOT NULL,

`title` varchar(255) NOT NULL,

`description` varchar(255) NOT NULL,

`Keywords` varchar(255) NOT NULL,

`preview` text NOT NULL,

`text` text NOT NULL,

`data` date NOT NULL

) ENGINE=MyISAM DEFAULT CHARSET=utf8;

-- Дамп данных таблицы `news`

INSERT INTO `news` (`id`, `title`, `description`, `Keywords`, `preview`, `text`, `data`) VALUES

(1, 'Новая Круизная коллекция от Марии Грации Кьюри', 'Обзор стильной коллекции одежды на сезон весна-лето для девушек, а также другие новости на тему моды и шитья', 'круизная, коллекция, кьюри, животные, лес', 'Приветствую всех читателей Школы Ателье!<br>\r\nВ сегодняшнем выпуске мира модной одежды и шитья мы сделаем обзор на вторую дизайнерскую линию дома Red Valentino от всемирно известных итальянских модельеров Марии Грации Кьюри и Пьерпаоло Пиччоли. Новая линейка получила название «Круизная коллекция», благодаря уникальной вышивке в форме различных растений, цветов, животных и птиц. Продолжение смотрите в статье.<br><br>\r\n<div align=\"center\"><p><a href=\"Materials/02-06-2016/11.jpg\"><img width=\"300\" src=\"Materials/02-06-2016/11.jpg\"></a><a href=\"Materials/02-06-2016/10.jpg\"><img width=\"300\" src=\"Materials/02-06-2016/10.jpg\"></a></p></div>', 'Приветствую всех читателей Школы Ателье!<br>\r\nВ сегодняшнем выпуске мира модной одежды и шитья мы сделаем обзор на вторую дизайнерскую линию дома Red Valentino от всемирно известных итальянских модельеров Марии Грации Кьюри и Пьерпаоло Пиччоли. Новая линейка получила название «Круизная коллекция», благодаря уникальной вышивке в форме различных растений, цветов, животных и птиц.\r\n<br><br>\r\n<div align=\"center\"><p><a href=\"Materials/02-06-2016/11.jpg\"><img width=\"300\" src=\"Materials/02-06-2016/11.jpg\" alt=\"Дизайнерская линия моды Red Valentino\"></a><a href=\"Materials/02-06-2016/10.jpg\"><img width=\"300\" alt=\"Новая коллекция на весну\" src=\"Materials/02-06-2016/10.jpg\"></a></p></div>\r\n<br>\r\nВот уже несколько лет авторы коллекции придерживаются единого стиля, который смогли с успехом отразить в своей новой работе, однако, это не мешает заметить во всей линейке очевидное разнообразие.\r\n<br><br>\r\n<div align=\"center\"><p><a href=\"Materials/02-06-2016/1.jpg\"><img width=\"300\" alt=\"Белое платье от Марии Грации Кьюри\" src=\"Materials/02-06-2016/1.jpg\"></a><a href=\"Materials/02-06-2016/2.jpg\"><img width=\"300\" alt=\"Платье с просветом Red Valentino\" src=\"Materials/02-06-2016/2.jpg\"></a></p></div>\r\n<br>\r\nЗа многие годы существования у Red Valentino сформировался очень большой выбор одежды, поэтому их образы всегда получаются объемными и запоминающимися.<br>\r\nХотелось бы обратить внимание именно на платья, которые очень интересно смотрятся в сочетании с подобранной верхней одеждой. На фотографиях вы сможете найти и кожаные жакеты, и красочные принты во всевозможных вариациях, и даже шелковые платья миди.\r\n<br><br>\r\n<div align=\"center\"><p><a href=\"Materials/02-06-2016/9.jpg\"><img width=\"300\" alt=\"Птицы на платье\" src=\"Materials/02-06-2016/9.jpg\"></a><a href=\"Materials/02-06-2016/4.jpg\"><img width=\"300\" alt=\"Узор леса на юбке\" src=\"Materials/02-06-2016/4.jpg\"></a></p></div>\r\n<br>\r\nГлядя на эту коллекцию, можно смело сказать, что подобранный стиль получился вполне универсальным и отлично вписывается в текущий сезон моды весна-лето.\r\n<br>\r\nНа этом все. Спасибо за внимание и желаю приятного просмотра!\r\n<br><br>\r\n<div align=\"center\"><p><a href=\"Materials/02-06-2016/5.jpg\"><img width=\"300\" src=\"Materials/02-06-2016/5.jpg\"></a><a href=\"Materials/02-06-2016/6.jpg\"><img width=\"300\" src=\"Materials/02-06-2016/6.jpg\"></a></p></div>\r\n<div align=\"center\"><p><a href=\"Materials/02-06-2016/7.jpg\"><img width=\"300\" src=\"Materials/02-06-2016/7.jpg\"></a><a href=\"Materials/02-06-2016/8.jpg\"><img width=\"300\" src=\"Materials/02-06-2016/8.jpg\"></a></p></div>', '2018-10-11'),

(2, 'Платья-рубашки: обзор на разновидности платьев', 'С чем носить платье-рубашку. Как подобрать правильный тип платья для себя.', 'платье, рубашка, модель, морской, бирюзового, медовыми, сумочка', 'Платье-рубашка — модель женской одежды с неотрезным кроем. Такое платье не имеет обозначенной границы талии и обладает удлинённой плечевой линией. В статье мы рассмотрим основные типы таких платьев и расскажем, как подобрать модель по своей фигуре.\r\n<br><br><div align=\"center\"><p><a href=\"Materials/26-06-2016/White_dress_shirt.jpg\"><img width=\"600\" alt=\"Модное платье-рубашка белого цвета\" src=\"Materials/26-06-2016/White_dress_shirt.jpg\"></a></div>', 'Платье-рубашка - модель женской одежды с неотрезным кроем. Такое платье не имеет обозначенной границы талии и обладает удлинённой плечевой линией. Воротник платья имеет своеобразную стоечку. Рукава оснащаются манжетами или совсем отсутствуют. По центру спинки имеется складка. <br /><br /> <h2>Разновидности платья-рубашки</h2><br /> Белое по цвету платье, подходит девушкам с чёрным и светлым типом волос. Такой образ ярко смотрится на любых мероприятиях.<br> <br /> <div align=\"center\"><p><a href=\"Materials/26-06-2016/White_dress_shirt.jpg\"><img width=\"600\" alt=\"Модное платье-рубашка белого цвета\" src=\"Materials/26-06-2016/White_dress_shirt.jpg\"></a></div> <br /> Платье по цвету напоминает манго и характерно для летнего периода. Модель подойдёт девушкам с медовым оттенком волос. Хорошо сочетается с золотыми и серебряными украшениями. <br /> <br><div align=\"center\"><p><a href=\"Materials/26-06-2016/Mango_dress.jpg\"><img width=\"600\" alt=\"Платье-рубашка с цветом манго\" src=\"Materials/26-06-2016/Mango_dress.jpg\"></a></div> <br /> Платье цвета морской волны подходит для обладательниц серых и голубых глаз. Модель хорошо смотрится на блондинках и брюнетках. <br /> <br><div align=\"center\"><p><a href=\"Materials/26-06-2016/Blue_ocean_dress_shirt.jpg\"><img width=\"600\" alt=\"Женская голубая рубашка\" src=\"Materials/26-06-2016/Blue_ocean_dress_shirt.jpg\"></a></div> <br /> Платье-рубашка бирюзового цвета подчёркивает загар и глубину карих глаз. Подходит для каштанового цвета волос. <br /> <br><div align=\"center\"><p><a href=\"Materials/26-06-2016/Turquoise_dress_shirt.jpg\"><img width=\"600\" alt=\"Голубое женское платье на фоне океана\" src=\"Materials/26-06-2016/Turquoise_dress_shirt.jpg\"></a></div> <br /> Платье цвета жгучего красного перца для блондинок с медовыми волосами. <br /> <br><div align=\"center\"><p><a href=\"Materials/26-06-2016/Red_dress_shirt.jpg\"><img width=\"600\" alt=\"Женская рубашка в клетку красного цвета\" src=\"Materials/26-06-2016/Red_dress_shirt.jpg\"></a></div> <br /> Платье-рубашка чёрного цвета, сшитое из мягкого атласа, подходит девушкам с рыжим и пепельным оттенком волос. <br /> <br><div align=\"center\"><p><a href=\"Materials/26-06-2016/Black_dress_shirt.jpg\"><img width=\"600\" alt=\"Черное платье с красной сумочкой\" src=\"Materials/26-06-2016/Black_dress_shirt.jpg\"></a></div> <br /> <h2>С чем носить платье-рубашку</h2> <br /> 1) Платье-рубашка часто комбинируется с леггинсами и джинсами, что создает винтажный образ прошедших годов. Длина платья немного ниже женского бедра, а сама модель состоит из лёгкого материала. Крупная бижутерия станет хорошим дополнением к образу. Модель сочетается с меховым типом жилета. <br /> 2) Прекрасным дополнением к подобной одежде станут брюки-бананы или туфли с невысоким каблуком. <br /> 3) Сумочка на тонком ремешке или миниатюрный клатч. На себя надеваем шарф вместе с широким поясом. <br /> 4) С помощью бежевых оттенков можно создать образ сафари. <br /> <br><div align=\"center\"><p><a href=\"Materials/26-06-2016/Pink_dress_shirt.jpg\"><img width=\"600\" alt=\"Розовая рубашка с сумочкой для женщин\" src=\"Materials/26-06-2016/Pink_dress_shirt.jpg\"></a></div> <br /> <h2>Выбор платья-рубашки</h2> <br /> Сегодня дизайнеры дают следующие советы: <br /> <ul> <br /> <li>Худым по комплектации женщинам рекомендуется выбирать платье из струящегося типа материалов светлого оттенка;</li> <br /> <li>Платье с рисунком в клетку визуально делает фигуру стройнее;</li> <br /> <li>Платье-рубашка с прямым кроем подходит для женщин с полной фигурой;</li> <br /> <li>Самыми женственными признаются модели типа макси;</li> <br /> </ul>', '2018-10-12');

-- Индексы сохранённых таблиц

-- Индексы таблицы `news`

ALTER TABLE `news`

ADD PRIMARY KEY (`id`);

-- AUTO_INCREMENT для сохранённых таблиц

-- AUTO_INCREMENT для таблицы `news`

ALTER TABLE `news`

MODIFY `id` int(11) UNSIGNED NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;

COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;

/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;

/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

ПРИЛОЖЕНИЕ И

Скриншот обновленного дизайна новостной страницы

Рисунок И.3

ПРИЛОЖЕНИЕ К

Скриншот обновленного дизайна главной страницы

Рисунок К.4

ПРИЛОЖЕНИЕ Л

Скриншот обновленного дизайна страницы контактов

Рисунок Л.5

Создано автором по: [8] ↑
Создано автором по: [13] ↑
Создано автором по: [12] ↑
Создано автором по: [9] ↑
Создано автором по: [21] ↑
Создано автором по: [21] ↑
Создано автором по: [21] ↑
Создано автором по: [1, с. 112] ↑
Создано автором по: [3, с. 30] ↑
Создано автором по: [3, с. 30] ↑
Создано автором. ↑
Создано автором по: [4, с. 60] ↑
Создано автором. ↑
Создано автором по: [6, с. 98] ↑
Создано автором по: [2, с. 140] ↑
Создано автором по: [2, с. 140] ↑
Создано автором. ↑
Создано автором по: [31] ↑
Создано автором по: [31] ↑
Создано автором по: [31] ↑
Создано автором по: [32] ↑
Создано автором по: [32] ↑
Создано автором по: [35] ↑
Создано автором по: [35] ↑
Создано автором. ↑