Дипломная (вкр): Разработка личного кабинета преподавателя

Разработка личного кабинета преподавателя

Введение

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

Если рассмотреть основные направления применения компьютеров в образовании, то можно выделить:

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

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

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

.         дистанционное обучение - обучение на расстоянии.

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

В качестве основных возможностей web-приложение позволяет:

1.      сохранять личную информацию о преподавателе;

2.       хранение научных званий и степени преподавателей;

.         ведение контроля успеваемости группы;

.         составление расписания;

.         обмен сообщениями между пользователями;

.         проведение тестов онлайн;

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

Актуальность. В России тысячи преподавателей - от репетиторов до профессоров ВУЗов. Большинство из них используют обычный бумажный журнал для контроля успеваемость и посещаемости студентов или учеников. Выделяют целые уроки или пары, чтобы провести тестирование, хотя в это время учителя могли бы рассказать новую тему. Так же чтобы общаться между собой или с учениками, нужно либо звонить, либо писать на личную почту. Чтобы посмотреть свое расписание, преподаватели или студенты заходят на сайт учебного заведения или же ищут бумажный вариант расписания в самом учебном заведении. Но современные технологии позволяют все это объединить и перенести в интернет, куда доступ будет отовсюду. Если всё это собрать в одном приложении, то жизнь преподавателей и студентов станет немного легче.

Новизна. Большинство систем, найденных по запросу «личный кабинет преподавателя», созданы только для определенного учебного заведения. Так же была найдена система, которая предоставляет почти такие же инструменты, как и для систем для ВУЗов, только платно. Проанализировав возможности аналогичных систем, мной было выявлено, что большинство из них обладает достаточно неудобным интерфейсом или сложным функционалом. Мой проект будет содержать наиболее полезные функции, которые необходимы для преподавателя или студента. Интерфейс будет максимально прост, а само приложение адаптировано под мобильные устройства. У пользователей будет возможность обмениваться сообщениями без использования сторонних сайтов или программ. Каждый пользователь сможет посмотреть свое расписание. Преподаватели смогут составить тест, а студенты пройти его сидя дома или в компьютерном классе. Преподаватель сможет вести контроль успеваемости в этой системе, а также указывать причину отсутствия студента на своем предмете.

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

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

Задачи:

.         Анализ существующих технических решений.

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

.         Максимально удобный и простой интерфейс.

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

.         Адаптивный дизайн

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

.         Группы пользователей

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

          1. Обзор и анализ аналогов

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

Личный кабинет сотрудника «Magellan» представлен на рисунке 1. Достоинством данной системы можно назвать наличие электронного журнала, а также возможность просмотра и составления расписания. Интерфейс достаточно прост.

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

Рисунок 1. "Magellan" Личный кабинет сотрудника

Следующим аналогом можно назвать систему НГТУ «Личный кабинет сотрудника». Внешний вид представлен на рисунке 2.

Рисунок 2. Личный кабинет сотрудника НГТУ

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

К минусам данной системы я бы отнес ее закрытость. Система доступна только студентам и сотрудникам НГТУ. Так же интерфейс не удобен и не адаптивен.

Следующая система, показанная на рисунке 3, разработана для ГУАП.

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

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

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

Рисунок 3. Личный кабинет сотрудника ГУАП

          2. Обоснование выбора языков программирования

информационный база данные преподаватель

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

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

Создав «скелет» сайта, ему нужно придать красивый внешний вид. Для этого я буду использовать каскадные таблицы стилей CSS, которые будут находиться в подключаемом файле. С помощью этого языка определяется положение всех элементов на странице, а также их оформление. Существуют расширения, построенные на основе CSS это SCSS, Sass, LESS. Так как все эти расширения перед отображением на сайте компилируются в файл CSS [5], то я сразу использовал каскадные таблицы стилей.

Чтобы придать интерактивность страницам, используется язык JavaScript. Этот язык работает на стороне браузера, то есть непосредственно с пользователем. На данный момент не существует аналогов, которые могут заменить язык JavaScript. Хотя большую часть функционала можно сделать с помощью CSS3, но этого еще недостаточно для полного замещения JavaScript. Существует одна очень большая и популярная библиотека jQuery, созданная на основе JavaScript [7]. Я буду использовать ее в своем проекте, так как на ней написано очень большое количество плагинов.

Каждый сайт или веб-приложение состоит из двух частей [3]. Это клиентская часть и серверная часть. Часть «клиент» - это то, что каждый пользователь видит на экране, когда заходит на определенную страницу. То есть в роли клиента выступает веб-браузер. Пользователь использует веб-браузер, чтобы обращаться к серверу для получения какой-либо информации. Другими словами, пользователь выполняет какое-либо действие в браузере, например, хочет открыть страницу сайта. Веб-браузер формирует запрос и отправляет его серверу. Сервер обрабатывает этот запрос и отправляет браузеру ту страницу, которую пользователь запросил. Веб-браузер отображает ее. Есть много языков, которые существуют для разработки серверной части сайта. Это может быть авторизация и регистрация пользователя, поиск информации по сайту и так далее. Самый популярный [4] язык веб-программирования серверной части - это скриптовый язык PHP. Поддерживается большинством хостинг-провайдеров. Также одним из преимуществ данного языка является простота кода и его компактность. Так как язык скриптовый, то код можно вставить в любую часть сайта, в код HTML. Но большинство разработчиков делают наоборот: используют PHP код, для отображения HTML. Это позволяет лучше контролировать содержимое страницы и ее функционал.

Таким образом, для разработки веб-приложения будут использоваться следующие языки: HTML, CSS, JavaScript (jQuery) и PHP.

          3. Разработка приложения

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

Структура веб-приложения

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

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

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

Макет веб-приложения (см. рис. 5) будет достаточно прост, но будет отличаться от уже привычного всем расположения элементов. Шапка (header) и подвал (footer) будут располагаться в панели меню слева от основного содержимого сайта.

Рисунок 4. Структура проекта

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

Структура базы данных

В процессе разработки веб-приложения, потребуется достаточно часто обращаться к базам данных. Для быстрой и правильной работы необходимо грамотно организовать базу данных. В веб-разработке чаще всего используют СУБД MySQL [2]. Данная СУБД отлично подходит для малых и средних проектов [1], а также имеет свободный доступ. Большинство хостинг-провайдеров устанавливают СУБД MySQL на свои сервера, поэтому эта система идеально подходит для моего проекта.

Рисунок 5. Расположение элементов приложения

Моя база данных состоит из 25 таблиц. Схема продемонстрирована на рисунке 6.

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

·        m_data_admin

·        m_data_teacher

·        m_data_student

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

Для раздела «Тестирование» я использую 4 таблицы.

·        m_data_test

·        m_data_test_answer

·        m_data_test_mark

Рисунок 6. Структура базы данных

В первой таблице этого списка хранятся все основные сведения о тестах. Именно из таблицы m_data_test формируется список на странице «тестирование» для группы «преподаватель». Так как при добавлении теста в базу данных записывается идентификатор пользователя, который создал тест, то и выводится список выборочно. То есть, если у пользователя, который хочет посмотреть список всех тестов, идентификатор равен 2, то и в списке будут только те тесты, которые имеют такой же идентификатор пользователя в поле id_teacher. Все вопросы, а также варианты ответов добавляются в таблицу m_data_quest с определенным id теста. Так же в таблице есть поле, которое содержат в себе цифру верного ответа.

Для предметов я использую 3 таблицы:

·        m_data_lesson

·        m_data_lesson_type

·        m_data_lesson_feature

Каждая таблица состоит из двух полей: id и name. В таблице m_data_lesson хранятся наименования дисциплин. В m_data_lesson_type - тип предметов (лекция, семинар, лабораторная работа). Сведения о том, когда будет проводиться занятие по предмету содержаться в последней таблице списка m_data_feature. В поле name хранятся особенности предмета, то есть когда он будет проходить: каждый день, по четным неделям или по нечетным неделям. Эта таблица помогает в составлении расписания.

Остальные таблицы отвечают за хранение отдельных данных.

. Разработка веб-приложения

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

Twitter Bootstrap - самый популярный фреймворк для адаптивной верстки сайтов. Имеет очень большое количество функций и библиотек. Этот фреймворк имеет большой функционал по верстке адаптивного сайта. Но помимо встроенных CSS шаблонов, есть огромное количество встроенных скриптов на языке JavaScript. Отлично подходит для любых проектов.

Zurb Foundation - прямой конкурент Twitter Bootstrap. Профессионалы-разработчики всегда выбирают между этими двумя гигантами. Foundation имеет огромнейший функционал, который порой опережает своего конкурента. Но из-за такого огромного количества библиотек и шаблонов он отлично подходит для более крупных проектов, где есть много элементов и интерактива.

На рисунке 7 продемонстрирована статистика использования фреймворков.

Рисунок 7. Сравнение фреймворков

Как показывает статистика [6], разработчики чаще всего не используют никаких фреймворков, а если используют, то самый популярный среди них это Twitter Bootstrap.

Таким образом, я рассмотрел наиболее популярные адаптивные фреймворки для front-end разработки. У меня достаточно маленький проект с точки зрения клиентской части, поэтому нет смысла брать такого гиганта как Foundation. Но все задуманное очень легко реализовать на Twitter Bootstrap, к тому же я уже часто с ним сталкивался, когда разрабатывал проекты. Поэтому я выбираю Twitter Bootstrap.

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

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

Рисунок 8. Файловая структура в корне сайта