Размещено на http://www.allbest.ru/

• Оглавление

• Введение 5
• 1. Аналитическая часть 8
• 1.1 Технико-экономическая характеристика предметной области 8
• 1.1.1 Характеристика предприятия 8
• 1.2 Техническая и технологическая сущность задачи 8
• 1.3 Постановка задачи 9
• 1.3.1 Цель и назначение создания или модернизации модулей, или сервисов информационной системы 9
• 1.3.2 Формализация алгоритма решения задачи 14
• 1.3.3 По программному обеспечению (ПО) 15
• Выводы по выбору СУБД 20
• 2. Проектная часть 21
• 2.1 Техническое обеспечение задачи (комплекса задач, АРМ) 21
• 2.1.1 Модель информационных потоков в информационной (телекоммуникационной) системы и ее описание 21
• 2.1.2 Физическая схема взаимодействия отдельных частей информационной системы 21
• 2.2 Программное обеспечение задачи (комплекса задач, АРМ) 22
• 2.2.1 Общие положения (дерево функций и сценарий диалога) 22
• 2.2.2 Структурная схема пакета (дерево вызова процедур и программ) 23
• Заключение 54
• Список используемой литературы 55
• Приложение 1 56
• Приложение 2 58

Введение

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

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

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

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

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

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

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

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

Интернет - это современная рекламная и торговая площадка, позволяющая обеспечить приток клиентов.

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

Объект курсовой работы -- деятельность маркетплейса по продаже онлайн курсов.

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

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

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

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

В соответствии с поставленной целью в работе определены следующие задачи:

- изучить технологии по разработки сайтов;

- определить цели, идеи, потребности web-сайта;

- разработать техническую концепцию сайта (структуру);

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



1. Аналитическая часть

1.1 Технико-экономическая характеристика предметной области

1.1.1 Характеристика предприятия

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

Для достижения этой цели предстоит:

1. исследовать аудиторию;

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

3. выбрать учебную онлайн-платформу;

4. сделать первые шаги по продвижению;

5. проанализировать результаты.

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

1.2 Техническая и технологическая сущность задачи

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

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

- Обеспечение связи студента и преподавателя посредством глобальной сети Интернет.

- Обеспечение студентов учебным материалом.

- Обеспечение удобства использования приложения для всех пользователей.

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

1.3 Постановка задачи

1.3.1 Цель и назначение создания или модернизации модулей, или сервисов информационной системы

Мы выдели основные группы задач, которые нужно рассмотреть для реализации нашего проекта.

- изучить технологии по разработки сайтов;

- определить цели, идеи, потребности web-сайта;

- разработать техническую концепцию сайта (структуру);

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

Обоснование необходимости и цели создания web-приложения.

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

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

- Мы осуществили возможность работы приложения с мобильного устройства.

Понятие сайта.

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

Web-сайт, как система электронных документов (файлов данных и кода) может принадлежать частному лицу или организации и быть доступным в компьютерной сети под общим доменным именем и IP-адресом или локально на одном компьютере. В статье журнала «Хозяйство и право» также было высказано мнение, что каждый сайт имеет своё название, которое при этом не следует путать с доменным именем. С точки зрения авторского права сайт является составным произведением, соответственно название сайта подлежит охране наряду с названиями всех прочих произведений.

Все сайты в совокупности составляют Всемирную паутину, где коммуникация (паутина) объединяет сегменты информации мирового сообщества в единое целое - базу данных и коммуникации планетарного масштаба. Для прямого доступа клиентов к сайтам на серверах был специально разработан протокол HTTP.

Этапы создания Web-сайта.

Создание Web-сайта состоит из следующих основных этапов:

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

2. Вёрстка. Описание структуры элементов проекта на языке разметки в соответствии с заданной спецификацией;

3. Программирование. Создание «активного» приложения, которое позволяет не только выводить требующуюся пользователю информацию, но и получать какие-либо данные от него;

4. Установка. Копирование проекта на рабочий сервер и инсталляция. Настройка конфигурации сервера для работоспособности сайтов;

5. Тестирование и отладка. Тестирование данного проекта на наличие ошибок, для удостоверения исправности работы приложения или устранения найденных неполадок.

Технология создания сайта.

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

PHP-скрипт.

Это скриптовый язык программирования, созданный для генерации HTML-страниц на веб-сервере и работы с базами данных. На данный момент он поддерживается практически всеми представителями хостинга, входит в «стандартный» набор для создания сайтов (LAMP - Linux, Apache, MySQL, PHP).

Благодаря своей простоте, скорости выполнения, богатой функциональности, распространению исходных кодов на основе лицензии PHP, этот язык является чуть ли не самым популярным в области технологий создания сайтов. Отличается наличием ядра и подключаемых модулей, «расширений»: для работы с базами данных, сокетами, динамической графикой, криптографическими библиотеками, документами формата PDF и т.п. Есть возможность разработать, а также подключить дополнительное расширение.

Возможности PHP очень обширны. Главным образом, PHP применяется при написании скриптов, работающих на стороне сервера; таким образом, PHP способен выполнять всё то, что выполняет любая другая программа CGI (например, обрабатывать данных форм, генерировать динамические страницы, отсылать и принимать cookies). Но PHP дает возможность выполнять также множество других задач.

Java Script.

Это пока еще относительно молодой язык программирования, но уже очень популярный в области технологий создания сайтов. На данный момент, работа над ним еще не закончена. Он постоянно дорабатывается и совершенствуется. Технический комитет работает над существенными расширениями, включая механизмы для сценариев, которые будут созданы для применения в Internet, а также более жесткой координацией с другими основными стандартами групп World Wide Web Консорциум и Wireless Application Protocol Форум. Java Script уже сыграл очень важную роль в развитии технологий создания сайтов

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

HTML.

Этот язык является базовым в области технологий создания сайтов, так как относительно легок в освоении. Но чрезмерная простота является и его недостатком. HTML (от английского Hyper Text Markup Language - язык разметки гипертекста) прекрасно отвечал требованиям раннего периода развития технологий создания сайтов, но с дальнейшим его развитием возникли существенные проблемы. HTML предоставляет следующие возможности:

- издавать сетевые документы с заголовками, текстом, таблицами, списками, фотографиями и т.п.;

- получать информацию из Сети через ссылки гипертекста при нажатии кнопки;

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

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

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

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

Маркетинг в дизайне.

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

1.3.2 Формализация алгоритма решения задачи

Наиболее общий алгоритм действий при разработке приложения является достаточно стандартным при разработке приложений такого типа.

Рис. 1. Общий алгоритм разработки приложения

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

Детализация этапов разработки:

1. Разработка БД.

БД будет включать в себя следующие таблицы:

- Таблица Регистрации.

- Таблица Авторизации.

Рисунок 2. Алгоритм разработки БД.

2. Разработка обще пользовательского сайта для студентов.

Рисунок 4. Алгоритм разработки основного сайта.

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

1.3.3 По программному обеспечению (ПО)

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

К выбираемому программному обеспечению в данном случае относятся операционная система (ОС) и среда программирования.

Все ОС подразделяются на:

- однопользовательские и многопользовательские;

- однозадачные и многозадачные.

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

- Windows версии XP и выше (7, 8, 10).

- Linux.

- MacOS.

На всех операционных системах должна быть установлена программа браузер. В настоящее время их огромное количество. Предпочтительно использование браузера от компании Google под названием Google Chrome. Это объясняется тем, что этот браузер обновляется очень часто. И всегда является лидером по возможностям предоставляемым Web-разработчикам.

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

Для сравнения были выбраны три СУБД: InterBase, MySQL и MS SQL Server. Сравнение проводилось по пяти основным параметрам: поддержка СУБД механизма триггеров и хранимых процедур, удобство и доступность средств разработки приложений СУБД, перечень поддерживаемых операционных систем, минимальные требования к серверу баз данных, и производительность.

Триггеры и хранимые процедуры.

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

MySQL в отличие от Microsoft SQL Server и InterBase не поддерживает ни триггеры, ни хранимые процедуры, что является в определенной степени недостатком, так как в приложениях информационной системы большую часть необходимых проверок, введенных данных, а также обеспечение целостности базы данных приходится выполнять на уровне клиентского приложения, что несколько усложняет процесс создания программного продукта.

Средства разработки приложений СУБД.

Многие производители СУБД выпускают средства разработки приложений для своих систем. Как правило, эти средства позволяют наилучшим образом реализовать все возможности сервера БД, поэтому при анализе СУБД стоит рассмотреть также возможности средств разработки приложений.

В MSSQL Server следует обратить особое внимание на основное средство разработки и администрирования, включенное в состав дистрибутива, - Enterprise Manager, который позволяет решать практически все задачи администрирования MS SQL Server и, кроме того, удобен для разработчика.

В InterBase, к сожалению, средство разработки и администрирования, поставляемое в составе дистрибутива (Interbase Console), недостаточно удобно, но обладает необходимой функциональностью. Поэтому существуют более удобные средства разработки и администрирования, созданные сторонними разработчиками, такие как IB Expert, EMS IB Manager.

Похожим образом обстоит дело и со средствами администрирования и разработки MySQL, но при желании также можно воспользоваться продуктами сторонних разработчиков: EMS MySQL Manager, WinSQL, PHP Admin.

Перечень операционных систем, под управлением которых способна работать СУБД. В этом разделе, безусловно, лидирует MySQL, которая способна работать под управлением большинства из имеющихся на настоящее время операционных систем. Список совместимости СУБД и ОС представлен в табл. 1.1.

Таблица 1.1. Совместимость СУБД и ОС

СУБД	ОС
InterBase	Windows 95/98/ME/NT/2000 и Linux-системы
MS SQL Server	Windows NT, 2000, XP (Intel и Alpha)
MySQL	Linux (x86, libc6, S/390, IA64, Alpha, Sparc), Windows 95/98/NT/2000/XP, Solaris 2.9 (Sparc, 64-bit, 32-bit), FreeBSD 4.x ELF (x86), Mac OS X v10.2, HP-UX 10.20 (RISC 1.0), HP-UX 11.11 (PA-RISC 1.1 или 2.0), AIX 5.1 (RS6000), QNX 6.2.0 (x86), Novell NetWare 6 (x86), SCO OpenUnix 8.0 (x86), м SGI Irix 6.5, Dec OSF 5.1 (Alpha)

Минимальные требования к серверу БД представлены в табл. 1.2. Из данной таблицы видно, что наименее требовательна к ресурсам сервера - СУБД InterBase.

Таблица 1.2. Минимальные требования к серверу БД

СУБД	Сервер
InterBase 7.0	Pentium 100 MHz, ОЗУ - 32 Мбайт, 50 Мбайт свободного места на диске.
MS SQL Server 7.0	Pentium II 350 MHz, ОЗУ - 128 Мбайт, 250 Мбайт свободного места на диске
MySQL 4.0.20	Pentium 100 MHz, ОЗУ - 64 Мбайт, 100 Мбайт свободного места на диске

Производительность.

Для сравнительного исследования СУБД после их установки на каждой из них встроенными средствами администрирования создавалась база данных TEST_DB, в которую помещалась одна таблица с именем TEST_TABLE (NUM: INTEGER; FIO_B: CHAR; NUM_CARD: INTEGER; NUM_POLUS: INTEGER; POL: CHAR; AGE_B: INTEGER; BORN_B: INTEGER; ADRESS_H: CHAR; TEL_H: INTEGER; ADRESS_R: CHAR; TEL_R: INTEGER; MED_PLACE: CHAR; VID_POS: CHAR; VID_BOL: CHAR; STATUS: CHAR; LGOTA: CHAR; VID_DOC: CHAR; FIO_DOC: CHAR; TDATE: DATE; VID_MON: INTEGER), содержащая 20 столбцов и 28096 строк записей. Как пример реальной практической задачи в этой таблице находилась информация о выданных больничных листах.



Выводы по выбору СУБД

Итак, рассмотренные здесь СУБД имеют свои достоинства и недостатки. Рассмотренное выше тестирование не выявило явных лидеров и аутсайдеров, результаты сопоставимы друг с другом для всех рассмотренных платформ.

Однако ввиду того что электронный учебник разработан с целью публикации в Internet, а также учитывая минимальные требования к серверу БД и возможность использования на любых популярных операционных системах была выбрана СУБД MySQL.

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



2. Проектная часть

2.1 Техническое обеспечение задачи (комплекса задач, АРМ)

2.1.1 Модель информационных потоков в информационной (телекоммуникационной) системы и ее описание

Диаграммы потоков данных (Data Flow Diagramming) являются основным средством моделирования функциональных требований к проектируемой системе. Требования представляются в виде процессов, связанных потоками данных. Диаграммы потоков данных показывают, как каждый процесс преобразует свои входные данные в выходные, и выявляют отношения между этими процессами. Основные компоненты DFD - процессы или работы, внешние сущности, потоки данных, накопители данных (хранилища).

2.1.2 Физическая схема взаимодействия отдельных частей информационной системы

Разработанный программный комплекс состоит из двух частей - клиент и сервер. Клиентом является запрашивающая машина, сервером - машина, которая отвечает на запрос



Клиентская часть программного комплекса, установленная на компьютере пользователя, выполняет запрос к серверной части, расположенной на сервере. Для взаимодействия используется протокол TCP / IP. Клиент SQL (сервер приложений) выполняет запрос по протоколу TCP / IP. Для взаимодействия с клиентами MYSQL Server использует порт 1433 (по умолчанию). Могут использоваться и другие порты, если используется несколько экземпляров приложения SQL Server. Кроме этого, в SQL Server 2005 используется порт 1434 для обзора списка доступных серверов.

2.2 Программное обеспечение задачи (комплекса задач, АРМ)

2.2.1 Общие положения (дерево функций и сценарий диалога)

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

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

1. Выполняющие служебные функции;

2. Управляющие модули, предназначенные для загрузки меню и передачи управления другому модулю;

3. Модули, связанные с вводом, хранением, обработкой и выдачей информации.

К первому типу относятся:

1. Плагин, необходимый для ввода и редактирования текста в базу данных.

2. Скрипт проверки регистрации.

3. Таблицы стилей.

Ко второму типу относятся:

1. Web - страница main.php, представляющая собой страницу навигации по сайту.

2. Меню сайта.

3. Универсальные блоки разметки страницы.

К третьему - все остальные элементы клиентского приложения, а именно, остальные страницы сайта, позволяющие:

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

2. удалять информацию из базы данных;

3. редактировать записи;

4. добавлять новую информацию в базу данных.

2.2.2 Структурная схема пакета (дерево вызова процедур и программ)

Клиентская часть разработанного программного комплекса содержит 7 web - страниц, универсальные программные модули (такие как таблицы стилей, скрипты и блоки разметки, например, footer и header), подключаемые к большинству страниц и несколько плагинов, позволяющих выполнять необходимые действия и удовлетворять требования к клиентскому приложению.

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

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

Рисунок 2.2.2.1 Дерево объектов. Основной каталог

Рисунок 2.2.2.2 Дерево объектов. Основной каталог

Рисунок 2.2.2.3 Дерево объектов. Папка со скриптами.



Рисунок 2.2.2.4 Дерево объектов. Папка с изображениями

Рисунок 2.2.2.5 Дерево объектов. Папка с иконками

Рисунок 2.2.2.6 Дерево объектов. Папка со стилями



Рисунок 2.2.2.7 Дерево объектов. Папка с php-файлами

Рассмотрим само приложение.

Рисунок 2.2.2.8

Рисунок 2.2.2.9

Шапка сайта скрыта в контекстном меню.

Рисунок 2.2.2.10

Блок сайта, в котором распложены предоставляемые курсы

<section class="courses">

<div class="courses_container">

<section id="courses">

<div class="card">

<div class="title element_animation">

<div class="card_title">

<h3>Курсы</h3>

</div>

<div id="search_block">

<input id="searchbar" onkeyup="search_animal()" type="text"

name="search" placeholder="Введите название курса">

</div>

</div>

<div class="block" id="block_search">

<div class="card_1 element_animation">

<div class="card_img">

<img src="/assetss/img/curses/computer/hjhbj 1.png" alt="">

</div>

<div class="card_text" id="courses_search">

<h2>Компьютерная грамотность</h2>

<div class="active"></div>

<p>Курс Microsoft Digital Literacy предназначен для того,

чтобы познакомить

вас с цифровым миром и научить вас базовым понятиям и

навыкам работы с компьютером.</p>

<div class="learn">

<a href="cart.html">Читать далее...</a>

</div>

</div>

</div>

<div class="card_1 element_animation">

<div class="card_img">

<img src="/assetss/img/curses/graphic/i 1.png" alt="">

</div>

<div class="card_text" id="courses_search">

<h2>Графический дизайн</h2>

<div class="active"></div>

<p>Вы можете развиваться в этом направлении всю жизнь.

Но мы дадим вам прямой путь в профессию графического дизайнера,

чтобы вы могли сразу устроиться на работу в компанию или

начать работать фрилансером.</p>

<div class="learn">

<a href="cart.html">Читать далее...</a>

</div>

</div>

</div>

<div class="card_1 element_animation">

<div class="card_img">

<img src="/assetss/img/curses/system/aa0678743311f0f4579740cdccd44369 1.png" alt="">

</div>

<div class="card_text" id="courses_search">

<h2>SMM менеджер</h2>

<div class="active"></div>

<p>Вы будете учиться, делая: мы предоставим обучающий проект,

чтобы вы работали с реальными

задачами SMM-специалиста. В результате вы соберете

портфолио ярких кейсов</p>

<div class="learn">

<a href="cart.html">Читать далее...</a>

</div>

</div>

</div>

<div class="card_1 element_animation">

<div class="card_img">

<img src="/assetss/img/curses/smm/blog-new 1.png" alt="">

</div>

<div class="card_text" id="courses_search">

<h2>Системное администрирование</h2>

<div class="active"></div>

<p>Ваш прямой путь в профессию: Станьте универсальным администратором Linux

с нуля и разверните свой собственный кластер

</p>

<div class="learn">

<a href="cart.html">Читать далее...</a>

</div>

</div>

</div>

<div class="card_1 element_animation">

<div class="card_img">

<img src="/assetss/img/curses/accountant/spXeIJg_0iI 1.png" alt="">

</div>

<div class="card_text" id="courses_search">

<h2>Курсы ораторского искусства</h2>

<div class="active"></div>

<p>Мы учим, как создавать убедительные речи и презентации,

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

и добиваться результатов в переговорах.</p>

<div class="learn">

<a href="cart.html">Читать далее...</a>

</div>

</div>

</div>

<div class="card_1 element_animation">

<div class="card_img">

<img src="/assetss/img/curses/public/1620867521_3-phonoteka_org-p-oratorskoe-iskusstvo-fon-3 1.png" alt="">

</div>

<div class="card_text" id="courses_search">

<h2>Курсы по бухгалтерии</h2>

<div class="active"></div>

<p>

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

Программа проводится в форме аудиторных занятий, разделенных на теоретическую (40%) и практическую части (60%).</p>

<div class="learn">

<a href="cart.html">Читать далее...</a>

</div>

</div>

</div>

</div><!-- block -->

</div><!-- card -->

</section>

</div>

</section>

// Анимация при скроллинге

function onEntry(entry){

entry.forEach(change =>{

if(change.isIntersecting){

change.target.classList.add("element_show");

}

/* else{

change.target.classList.remove("element_show");

} */

});

}

let options = {threshold: [0.5]};

let observer = new IntersectionObserver(onEntry, options);

let elements = document.querySelectorAll('.element_animation')

for(let elm of elements){

observer.observe(elm);

}

let textAnimate = document.getElementById('text')

let chat = document.querySelector('.header_chat_img')

let exChat = document.querySelector('.exitChat')

let chatImg = document.querySelector('.header_chat_img img')

let formChat = document.querySelector('.header_form_input')

// Чат для отправки сообщений

function chatClick() {

chat.addEventListener('click', () =>{

formChat.classList.toggle('left_click')

formChat.style.display = 'block'

})

}

chatClick();

function exitChat(){

exChat.addEventListener('click', () =>{

formChat.style.display = 'none'

})

}

exitChat();

// JavaScript code

function search_animal() {

let input = document.getElementById('searchbar').value

input=input.toLowerCase();

let x = document.getElementsByClassName('card_1');

for (i = 0; i < x.length; i++) {

if (!x[i].innerHTML.toLowerCase().includes(input)) {

x[i].style.display="none";

}

else {

x[i].style.display="list-item";

}

}

}

Рисунок 2.2.2.11 Блок реализации слайдера.

<section id="slider">

<div

style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff"

class="swiper mySwiper"

>

<div class="parallax-bg" data-swiper-parallax="-23%"></div>

<div class="swiper-wrapper">

<div class="swiper-slide">

<div class="title" data-swiper-parallax="-300">Платформа

для онлайн-обучения.</div>

<div class="subtitle" data-swiper-parallax="-200">с чёткой методологией</div>

<div class="text" data-swiper-parallax="-100">

<p>

Создавай <span class="swiper_span_p_bold"> вовлекающие курсы </span>, проводи <span class="swiper_span_p">

вебинары </span> и <span class="swiper_span_p"> live-уроки</span>, используй современные

гибкие методологии разработки и зарабатывай на

своей экспертизе. Построй свой бизнес в онлайн-образовании с CoreApp.

</p>

<div class="swiper_text_img">

<img src="/assetss/img/LMS2.png" alt="">

</div>

</div>

<div class="swiper_button">

<a href="#" class="swiper_slides_button">Начать работу</a>

</div>

</div><!-- swiper_slide -->

<div class="swiper-slide">

<div class="title" data-swiper-parallax="-300">Создайте удобную среду для обучения </div>

<div class="subtitle" data-swiper-parallax="-200">и привлечения новых клиентов</div>

<div class="text" data-swiper-parallax="-100">

<p>

Готовый маркетплейс.

Все курсы попадают на главную <span class="swiper_span_p"> iSpring Market</span>. Это витрина, как в интернет-магазине. Клиент заходит, оплачивает курс -- вы тут же

<span class="swiper_span_p">

получаете деньги.

</span>

</p>

<div class="swiper_text_img">

<img src="/assetss/img/curses/swiper/4194682a5053a9a0117eb.png" alt="">

</div>

</div>

<div class="swiper_button">

<a href="#" class="swiper_slides_button">Начать работу</a>

</div>

</div><!-- swiper_slide -->

<div class="swiper-slide">

<div class="title" data-swiper-parallax="-300">Учитесь без ограничений</div>

<div class="text" data-swiper-parallax="-100">

<p>

Хотите добиться всех <span class="swiper_span_p">целей</span> в новом году?

Развивайте новые навыки с помощью курсов,

сертификаций и дипломных программ от

университетов и <span class="swiper_span_p"> компаний мирового уровня.</span>

</p>

<div class="swiper_text_img">

<img src="/assetss/img/curses/swiper/concept-of-career-and-business-opportunity-vector.png" alt="">

</div>

</div>

<div class="swiper_button">

<a href="#" class="swiper_slides_button">Начать работу</a>

</div>

</div><!-- swiper_slide -->

<div class="swiper-slide">

<div class="title" data-swiper-parallax="-300">Результаты учащихся на JS</div>

<div class="text" data-swiper-parallax="-100">

<p>

<span class="swiper_span_p"> 87% людей, которые учатся </span>, чтобы повысить свою квалификацию, <span class="swiper_span_p"> сообщают о таких карьерных преимуществах,</span> как повышение по службе, рост зарплаты или развитие новой карьеры

</p>

<div class="swiper_text_img">

<img src="/assetss/img/curses/swiper/2_.png" alt="">

</div>

</div>

<div class="swiper_button">

<a href="#" class="swiper_slides_button">Начать работу</a>

</div>

</div><!-- swiper_slide -->

</div>

<div class="swiper-button-next"></div>

<div class="swiper-button-prev"></div>

<div class="swiper-pagination"></div>

</div>

</section>

let url = new URL('https://unpkg.com/swiper/swiper-bundle.min.js')

var swiper = new Swiper(".mySwiper", {

speed: 600,

parallax: true,

autoplay: {

delay: 2500,

disableOnInteraction: false,

},

pagination: {

el: ".swiper-pagination",

clickable: true,

},

navigation: {

nextEl: ".swiper-button-next",

prevEl: ".swiper-button-prev",

}, });

Рисунок 2.2.2.12 Новостной блок

<section id="news">

<div class="news_card">

<div class="title element_animation">

<div class="card_title">

<h3>Новости</h3>

</div>

</div>

<div class="news_block">

<div class="news1 element_animation">

<div class="news_img "><img src="/assetss/img/news/1582359412_755332183330442 1.png" alt=""></div>

<div class="news_text ">

<h2>Календарь конференций <br>высшего образования на 2022 год</h2>

<p>Поскольку пандемия наконец-то замедлилась во многих частях мира, <br> возвращение к очным мероприятиям

и конференциям, вероятно, <br> произойдет в 2022 году и позже. <br> Когда мир начинает открываться..</p>

<div class="news_next_a"><a href="news.html">Подробнее...</a></div>

<p>12.01.2022</p>

</div>

</div>

<div class="news1 element_animation">

<div class="news_img"><img src="/assetss/img/news/university-2704306_1280_0_1.png" alt=""></div>

<div class="news_text">

<h2>Насколько дружелюбны<br> ваши ученики?</h2>

<p>Получение сильного и разнообразного круга студенческих <br> лидов может помочь вашему учреждению расти

так, <br> как вы никогда не ожидали. <br> В любом бизнесе сильный диапазон лидов часто определяет...</p>

<div class="news_next_a"><a href="news.html">Подробнее...</a></div>

<p>19.02.2022</p>

</div>

</div>

</div>

</div>

</section>

Рисунок 2.2.2.13 Подвал сайта

<footer id="footer">

<div class="footer_logo">

<a href="#"><img src="/assetss/img/Logo.svg" alt=""></a>

</div>

<div class="footer_block">

<div class="footer_contact">

<p>Телефон: +7 (495) 032-00-80</p>

<p>Время работы: пн-пт.: с 9:00 до 18:00</p>

<p>E-mail: info@progress-gk.ru</p>

<p>Адрес: 127411, г. Москва,</p>

<p>Кочновский проезд, 4к2</p>

<p>Coopyright 2000 - 2021</p>

</div>

<div class="footer_menu">

<p>Меню</p>

<ul>

<li><a href="index.html">Главная</a></li>

<li><a href="cart.html">Курсы</a></li>

<li><a href="news">Новости</a></li>

<li><a href="benefis.html">Наши преимущества</a></li>

<li><a href="aboutus.html">О нас</a></li>

</ul>

</div>

<div class="footer_soc_link">

<ul>

<li><a href="#">Сервисы</a></li>

<li><a href="#">Помощь</a></li>

<li><a href="#">Новости о ковид</a></li>

<div class="soc_link">

<a href="https://www.telegram.com/"><img src="/assetss/img/soc-link/icons8-телеграмма-app-48.png" alt=""></a>

<a href="https://www.faccebook.com/"><img src="/assetss/img/soc-link/icons8-facebook-48.png" alt=""></a>

<a href="https://www.vk.com/"><img src="/assetss/img/soc-link/icons8-vk-в-круге-48.png" alt=""></a>

<a href="https://www.instagram.com/"><img src="/assetss/img/soc-link/icons8-instagram-48.png" alt=""></a>

</div>

</ul>

</div>

</div>

</footer>



Рисунок 2.2.2.14 Блок сайта корзины с выбранными курсами

<div id="cart-wrap">

<!-- (A1) PRODUCTS LIST -->

<div id="cart-products"></div>

<!-- (A2) CURRENT CART ITEMS -->

<div id="cart-items"></div>

</div>

<!-- (B) TEMPLATES -->

<!-- (B1) PRODUCT CELL -->

<template id="template-product">

<div class="p-item">

<img class="p-img" />

<div class="p-name"></div>

<div class="p-desc"></div>

<div class="p-price"></div>

<button class="cart p-add" id="cart_style">Добавить в корзину</button>

</div>

</template>

<!-- (B2) CART ITEMS -->

<template id="template-cart">

<div class="c-item">

<div class="c-name"></div>

<button class="c-del cart">X</button>

<input class="c-qty" type="number" min="0"/>

</div>

</template>

<template id="template-cart-checkout">

<button class="c-empty cart" onclick="cart.nuke()">Очистить корзину</button>

<button class="c-checkout cart" onclick="cart.checkout()">Заказать</button>

</template>

// // DUMMY PRODUCTS (PRODUCT ID : DATA)

var products = {

123: {

name : "Компьютерная грамотность",

desc : "Курс Microsoft Digital Literacy предназначен для того,чтобы познакомитьвас с цифровым миром и научить вас базовым понятиям инавыкам работы с компьютером.",

img : "/img/curses/computer/hjhbj 1.png",

price : 2034

},

124: {

name : "Графический дизайн",

desc : "Вы можете развиваться в этом направлении всю жизнь.Но мы дадим вам прямой путь в профессию графического дизайнера, чтобы вы могли сразу устроиться на работу в компанию илиначать работать фрилансером.",

img : "/img/curses/graphic/i 1.png",

price : 1247

},

125: {

name : "SMM менеджер",

desc : "Вы будете учиться, делая: мы предоставим обучающий проект,чтобы вы работали с реальными задачами SMM-специалиста. В результате вы соберете портфолио ярких кейсов",

img : "/img/curses/smm/blog-new 1.png",

price : 675

},

126: {

name : "Системное администрирование",

desc : "Ваш прямой путь в профессию: Станьте универсальным администратором Linux с нуля и разверните свой собственный кластер",

img : "/img/curses/system/aa0678743311f0f4579740cdccd44369 1.png",

price : 842

},

127: {

name : "Курсы ораторского искусства",

desc : "Мы учим, как создавать убедительные речи и презентации,уверенно импровизировать и отвечать на сложные вопросы, побеждать в дискуссиях и добиваться результатов в переговорах.",

img : "/img/curses/accountant/spXeIJg_0iI 1.png",

price : 843

},

128: {

name : "Курсы по бухгалтерии",

desc : " Данный курс ориентирован на студентов, которые хотят освоить бухгалтерский и налоговый учет, но не имеют экономического образования. Программа проводится в форме аудиторных занятий, разделенных на теоретическую (40%) и практическую части (60%). ",

img : "/img/curses/public/1620867511_9-phonoteka_org-p-oratorskoe-iskusstvo-fon-13.jpg",

price : 843

}

};

var cart = {

// (A) PROPERTIES

hPdt : null, // html products list

hItems : null, // html current cart

items : {}, // current items in cart

iURL : "assetss/", // product image url folder

// (B) LOCALSTORAGE CART

// (B1) SAVE CURRENT CART INTO LOCALSTORAGE

save : () => {

localStorage.setItem("cart", JSON.stringify(cart.items));

},

// (B2) LOAD CART FROM LOCALSTORAGE

load : () => {

cart.items = localStorage.getItem("cart");

if (cart.items == null) { cart.items = {}; }

else { cart.items = JSON.parse(cart.items); }

},

// (B3) EMPTY ENTIRE CART

nuke : () => { if (confirm("Очистить корзину?")) {

cart.items = {};

localStorage.removeItem("cart");

cart.list();

}},

// (C) INITIALIZE

init : () => {

// (C1) GET HTML ELEMENTS

cart.hPdt = document.getElementById("cart-products");

cart.hItems = document.getElementById("cart-items");

// (C2) DRAW PRODUCTS LIST

cart.hPdt.innerHTML = "";

let template = document.getElementById("template-product").content,

p, item, part;

for (let id in products) {

p = products[id];

item = template.cloneNode(true);

item.querySelector(".p-img").src = cart.iURL + p.img;

item.querySelector(".p-name").textContent = p.name;

item.querySelector(".p-desc").textContent = p.desc;

item.querySelector(".p-price").textContent = "$" + p.price.toFixed(2);

item.querySelector(".p-price").style.color = '#7abaea'

item.querySelector(".p-add").onclick = () => { cart.add(id); };

item.querySelector('.cart').style.background = ('#7abaea')

item.querySelector('.cart').style.borderRadius = ('5px')

cart.hPdt.appendChild(item);

}

// (C3) LOAD CART FROM PREVIOUS SESSION

cart.load();

// (C4) LIST CURRENT CART ITEMS

cart.list();

},

// (D) LIST CURRENT CART ITEMS (IN HTML)

list : () => {

// (D1) RESET

cart.hItems.innerHTML = "";

let item, part, pdt, empty = true;

for (let key in cart.items) {

if (cart.items.hasOwnProperty(key)) { empty = false; break; }

}

// (D2) CART IS EMPTY

if (empty) {

item = document.createElement("div");

item.innerHTML = "Корзина пуста";

let cartFon = document.querySelector('#cart-items')

cartFon.style.marginTop = ('60px')

cart.hItems.appendChild(item);

}

// (D3) CART IS NOT EMPTY - LIST ITEMS

else {

let template = document.getElementById("template-cart").content,

p, total = 0, subtotal = 0;

for (let id in cart.items) {

// (D3-1) PRODUCT ITEM

p = products[id];

item = template.cloneNode(true);

item.querySelector(".c-del").onclick = () => { cart.remove(id); };

item.querySelector(".c-name").textContent = p.name;

item.querySelector(".c-qty").value = cart.items[id];

item.querySelector(".c-qty").onchange = function () { cart.change(id, this.value); };

item.querySelector(".cart").style.background = ('#7abaea')

cart.hItems.appendChild(item);

let cartFon = document.querySelector('#cart-items')

cartFon.style.background = ('#22323a')

cartFon.style.marginTop = ('60px')

// (D3-2) SUBTOTAL

subtotal = cart.items[id] * p.price;

total += subtotal;

}

// (D3-3) TOTAL AMOUNT

item = document.createElement("div");

item.className = "c-total";

item.id = "c-total";

item.innerHTML ="Цена: $" + total;

cart.hItems.appendChild(item);

// (D3-4) EMPTY & CHECKOUT

item = document.getElementById("template-cart-checkout").content.cloneNode(true);

item.querySelector(".cart").style.background = ('#7abaea')

item.querySelector(".cart").style.borderRadius = ('5px')

item.querySelector(".c-checkout").style.background = ('#7abaea')

item.querySelector(".c-checkout").style.borderRadius = ('5px')

cart.hItems.appendChild(item);

}

},

// (E) ADD ITEM INTO CART

add : (id) => {

if (cart.items[id] == undefined) { cart.items[id] = 1; }

else { cart.items[id]++; }

cart.save(); cart.list();

},

// (F) CHANGE QUANTITY

change : (pid, qty) => {

// (F1) REMOVE ITEM

if (qty <= 0) {

delete cart.items[pid];

cart.save(); cart.list();

}

// (F2) UPDATE TOTAL ONLY

else {

cart.items[pid] = qty;

var total = 0;

for (let id in cart.items) {

total += cart.items[id] * products[id].price;

document.getElementById("c-total").innerHTML ="TOTAL: $" + total;

}

}

},

// (G) REMOVE ITEM FROM CART

remove : (id) => {

delete cart.items[id];

cart.save();

cart.list();

},

// (H) CHECKOUT

checkout : () => {

// SEND DATA TO SERVER

// CHECKS

// SEND AN EMAIL

// RECORD TO DATABASE

// PAYMENT

// WHATEVER IS REQUIRED

alert("Заказ принят");

var data = new FormData();

data.append("cart", JSON.stringify(cart.items));

data.append("products", JSON.stringify(products))

fetch("SERVER-SCRIPT", { method:"POST", body:data })

.then(res=>res.text()).then((res) => {

console.log(res);

})

.catch((err) => { console.error(err); });

}

};

window.addEventListener("DOMContentLoaded", cart.init);

Рисунок 2.2.2.14 Блок сайта посвященный развитию центра

<section id="about">

<div class="about-contain">

<div class="about-text">

<div class="about-title"><h2>История нашего центра</h2></div>

<div class="about-text-p">

<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Et a debitis porro nesciunt

nam iusto non assumenda quia sunt

eum dolore alias, nemo dolorum officia. Officiis quas distinctio nemo eligendi?

</p> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Et a debitis porro nesciunt

nam iusto non assumenda quia sunt

eum dolore alias, nemo dolorum officia. Officiis quas distinctio nemo eligendi?

</p> <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.

Et a debitis porro nesciunt

nam iusto non assumenda quia sunt

eum dolore alias, nemo dolorum officia. Officiis quas distinctio nemo eligendi?

</p>

</div>

</div>

<div class="about-img"><img src="/assetss/img/lienlawhistory_1200x630.png" alt=""></div>

</div>

</section>

Рисунок 2.2.2.15 Форма регистрации на маркет плейсе

<div class="form_register">

<form method="post" action="" name="signup-form">

<div class="form-element">

<label>Введите имя:</label>

<input type="text" name="username" pattern="[a-zA-Z0-9]+" required />

</div>

<div class="form-element">

<label>Введите email:</label>

<input type="email" name="email" required />

</div>

<div class="form-element">

<label>Введите пароль:</label>

<input type="password" name="password" required />

</div>

<div class="btn_form">

<button type="submit" name="register" value="register">Регистрация</button>