1.2.9 Наполнение сайта

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

1.2.10 Требования к хостингу

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

Хостинг с PHP5 и установленным модулем Rewrite

База данных MySQL версии 5 и выше

Наличие зарегистрированного и корректно настроенного домена

1.2.11 Требования к надежности

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

Сайт должен предусматривать базовую защиту от основных видов атак: межсайтового скриптинга (XSS), SQL-инъекций, CSRF-уязвимостей.

1.2.12 Условия сдачи и приемки

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

2. Выбор инструментов для программирования

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

2.1 Выбор языка программирования

Рассмотрим два самых ныне популярных подхода, для разработки web-проектов, ASP и PHP. Не смотря на то, что PHP считается устаревшим, он остается быть самым популярным языком программирования сайтов.

По своим возможностям, ASP.NET и PHP, идут довольно вровень, поэтому мы не будем описывать их подробно.

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

2.1.1 ASP

ASP (англ. Active Server Pages -- «активные серверные страницы») -- технология, предложенная компанией Microsoft в 1996 году для создания Web-приложений. Эта технология основана на внедрении в обыкновенные веб-страницы специальных элементов управления, допускающих программное управление.

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

ASP.NET -- технология создания веб-приложений и веб-сервисов от компании Майкрософт. Она является составной частью платформы Microsoft .NET и развитием более старой технологии Microsoft ASP. На данный момент последней версией этой технологии является ASP.NET 4.5.

ASP.NET в отличии от старой версии, получила расширения:

· ASP.NET AJAX

· ASP.NET MVC Framework

Использование технологии ASP платное. Мы не располагаем средствами для её использования.

2.1.2 PHP

PHP (англ. PHP: Hypertext Preprocessor -- «PHP: препроцессор гипертекста»; первоначально Personal Home Page Tools -- «Инструменты для создания персональных веб-страниц»; произносится пи-эйч-пи) -- скриптовый язык программирования общего назначения, интенсивно применяемый для разработки веб-приложений. В настоящее время поддерживается подавляющим большинством хостинг-провайдеров и является одним из лидеров среди языков программирования, применяющихся для создания динамических веб-сайтов.

2.1.3 Анализ сравнения и выбор подхода

Для проекта выбран язык PHP.

При сравнении, можно сказать, что php - скриптовый, а asp .net - компилируемый.

На ASP.NET можно писать на любом .net-совместимом языке #, также благодаря большому выбору шаблонов и своей модульностью много чего готового есть . Технология основана на модели COM (COM - Component Object Model), т.е. работать вы будете с объектами и компонентами.

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

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

PHP имеет возможность взаимодействия с большим количеством различных систем управления базами данных: MySQL, MySQLi, SQLite, PostgreSQL, Oracle (OCI8), Oracle, Microsoft SQL Server, Sybase, ODBC, mSQL, IBM DB2, Cloudscape и Apache Derby, Informix, Ovrimos SQL, Lotus Notes, DB++, DBM, dBase, DBX, FrontBase, FilePro, Ingres II, SESAM, Firebird / InterBase, Paradox File Access, MaxDB, Интерфейс PDO;

Все СУБД описывать не будем, а опишем только выбранную для проекта MySQL.

MySQL -- свободная реляционная система управления базами данных. Разработку и поддержку MySQL осуществляет корпорация Oracle, получившая права на торговую марку вместе с поглощённой Sun Microsystems, которая ранее приобрела шведскую компанию MySQL AB. Продукт распространяется как под GNU General Public License, так и под собственной коммерческой лицензией. Помимо этого, разработчики создают функциональность по заказу лицензионных пользователей, именно благодаря такому заказу почти в самых ранних версиях появился механизм репликации.

MySQL является решением для малых и средних приложений. Входит в состав серверов WAMP, AppServ, LAMP и в портативные сборки серверов Денвер, XAMPP. Обычно MySQL используется в качестве сервера, к которому обращаются локальные или удалённые клиенты, однако в дистрибутив входит библиотека внутреннего сервера, позволяющая включать MySQL в автономные программы.

2.3 Дополнительные средства для разработки

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

Denwer - Джентльменский набор Web-разработчика («Д.н.w.р», читается «Денвер») -- проект Дмитрия Котерова, локальный сервер (Apache, PHP, MySQL, Perl и т.д.) и программная оболочка, используемые Web-разработчиками для разработки сайтов на «домашней» (локальной) Windows-машине без необходимости выхода в Интернет. Главная особенность Денвера -- удобство при удаленной работе сразу над несколькими независимыми проектами.

HTML (от англ. HyperText Markup Language -- «язык гипертекстовой разметки»;) -- стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.

CSS (англ. Cascading Style Sheets -- каскадные таблицы стилей) -- формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

JavaScript -- прототипно-ориентированный сценарный язык программирования.

3. Разработка структуры программы с использованием саsе-средств

3.1 Логическая модель

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

User - любой посетитель сайта. Имеет возможность «Получить главную страницу» и «Получить информацию о работе с системой».

Guest - гость сайта. У него нету аккаунта доступа, поэтому он имеет только общие возможности: «Получить главную страницу» и «Получить информацию о работе с системой».

Registered User - зарегистрированный пользователь системы. Зарегистрированный пользователь может относить к одному из трех типов с различными уровнями доступа к данным системы: “Teacher”, “Student” или “Administrator”.

Administrator - пользователь с правами администратора системы. Имеет основные права доступа в эту систему, а именно: «Добавлять, удалять и изменять студентов», «Добавлять, удалять и изменять группы», «Добавлять, удалять, изменять преподавателей», «Добавлять, удалять и изменять предметы». Администратор отвечает за наличие в системе всех групп студентов, наличие каждого студента в соответствующей ему группе. Также следит за списком преподавателей и соответствующим им предметам, которые они преподают.

Teacher - пользователь с правами преподавателя, который в свою очередь, является преподавателем в университете. В соответствии с действиями Администратора, Преподаватель может «Получить список групп и предметов». В дальнейшей работе с системой, Преподаватель имеет возможности: «Посмотреть и изменить отметки», «Посмотреть и изменить практические и лабораторные работы» и «Посмотреть и изменить темы курсовой».

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

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

Получить главную страницу - выводится стартовая страница проекта.

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

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

Рассмотрим возможности «Administrator»:

· Добавлять, удалять и изменять студентов - вносить в базу данных системы информацию о студентах университета, изменять её, и удалять.

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

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

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

Рассмотрим возможности «Teacher»:

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

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

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

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

Рассмотрим возможности «Student»:

· Просмотреть отметки - студент или его родители получают возможность просмотра успеваемости конкретного студента. А именно:

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

o Просмотреть отметки по дням - вывод информации о посещаемости, в том порядке, как это происходило в реальном времени, с реальным расписанием занятий.

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

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

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

3.2 Физическая модель

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

Рассмотрим классы, которые в целом описывают систему MVC, на основе которой созданная вся наша система. Model-view-controller (MVC, «модель-представление-поведение», «модель-представление-контроллер», «модель-вид-контроллер») -- схема использования нескольких шаблонов проектирования, с помощью которых модель данных приложения, пользовательский интерфейс и взаимодействие с пользователем разделены на три отдельных компонента так, что модификация одного из компонентов оказывает минимальное воздействие на остальные. Данная схема проектирования часто используется для построения архитектурного каркаса, когда переходят от теории к реализации в конкретной предметной области.

Main - основной класс работы MVC, он соединяет и управляет всеми системами ресурса:

· Model

· Views

· Controllers

· db

Методы Main:

· Init() - инициализация переменных.

· Start() - старт обработчика страницы.

Класс Main агрегирован с соответствующими классами:

Models - класс для работы с моделями данных. Имеет методы:

· loadModel(String $name) - загружает класс. создает объект. кидает в массив loadedModels с ключом = название модели.

· getModel(String $name):Model - возвращает объект модели.

Views - класс шаблонов пользовательского интерфейса. Имеет методы:

· loadView($data):String - подгружает шаблон интерфейса

Controllers - класс управляющей логикой проекта

· loadController(String $name):Controller - подгрузка необходимой логики

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

Model - класс отвечающий за соединение в базой данных.

Работает с Объектами:

· db - база данных

· sdb - система управления базой данных

Имеет метод:

· construct($db) - берет всю необходимую информацию из базы данных,также вносит необходимые изменения

Так как мы рассматриваем соединение наследованием, дальнейшие классами будем записывать через знак « / », для указания наследования.

Model/User - класс описывающий пользователей, электронным дневником.

Объекты класса:

· accessLevel - уровень доступа пользователя.

· userInfo - информация о пользователе.

Методы класса:

· getAccessLevel - использовать данные уровня доступа.

· getName - использовать имя пользователя.

· getId - использовать уникальный идентификатор пользователя.

· checkAccess - проверить аккаунт.

· addUser - добавить пользователя.

· editUser - редактирвоать пользователя.

· removeUser - переместить пользователя.

Model/Group - класс описывающий группы студентов.

Объекты класса:

· GroupInfo - информация о группе.

Методы класса:

· loadGroup - загрузка группы.

· getId - использвоание уникального идентификатора группы.

· getName - использовать имя группы.

· getStudents - использовать информацию о студентах.

· getSubjects - использовать информацию о предметах.

· removeSubjects - перенос предметов.

· addStudents - добавить студентов.

· removeStudents - перенос студентов.

· addGroup - добавление групп.

· editGroup - редактирвоание групп.

· removeGroup - перенос групп.

Model/Subject - класс описывающий предметы.

Методы класса:

· addSubject - добавление пердметов.

· removeSubject - перенос предметов.

Model/User/Teacher - класс описывающий преподавателей.

Методы класса:

· getSubject - использование предметов.

· getGroupSubject - использование групп предметов.

Model/User/Student - класс описывающий студентов.

Методы класса:

· getGroupId - использование уникального идентификатора группы.

Model/User/Administrator - класс описывающий администратора.

Методы класса:

· addSubject - добавить предмет.

· editSubject - редактировать предмет.

· removeSubject - перенести предмет.

· addUser - добавить пользователя.

· editUser - редактирование поьлзователя.

· removeUser - перенос пользователя.

· addGroup - добавление группы.

· editGroup - редактирвоание группы.

· removeGroup - перенос группы.

4. Разработка кроссплатформенного Web-интерфейса

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

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

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

4.1 Принципиальные различия между платформами

сайт программирование хостинг управление

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

Рассмотрим различия списком:

· Размер монитора

· Возможности браузера

· Скорость соединения с интернетом

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

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

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

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

4.2 Технологии, используемые при реализации

Есть четыре различных подхода реализации верстки проектов, выбор подхода зависит от идеи дизайна и требований к проекту:

· Фиксированная верстка

· Резиновая верстка

· Адаптивная верстка

· Отзывчивая верстка

Рассмотрим примеры на двух элементах “#temnyi”, “#svetlyi”.

Фиксированная верстка - блоки не меняют свою ширину. На мониторах с маленьким разрешением появляется горизонтальная полоса прокрутки.

Метод реализации:

<style>

#temnyi, #svetlyi { width: 440px; }

</style>

Резиновая верстка - блоки меняют свою ширину в зависимости от размера окна браузера. Она может принимать максимальное и минимальное значение (свойство max-width). Но нельзя по мере уменьшения экрана из 50% сделать 100%.

Метод реализации:

<style>

#temnyi, #svetlyi { width: 50%; }

</style>

Адаптивная верстка - воплощается с помощью @Media или благодаря скриптам. Заточен под конкретные известные устройства (320, 768, 1024, т.д.). Любое изменение происходит рывками, после достижения одного из указанных уровней.

Метод реализации:

<style>

#temnyi, #svetlyi { width: 430px; }

@media (max-width: 1220px) {

#temnyi, #svetlyi { width: 380px; }

}

@media (max-width: 1120px) {

#temnyi, #svetlyi { width: 325px; }

}

@media (max-width: 680px) {

#temnyi, #svetlyi { width: 200px; }

}

</style>

Отзывчивая вёрстка - это объединение резиновой и адаптивной вёрстки.

Метод реализации:

<style>

#temnyi, #svetlyi { width: 50%; }

@media (max-width: 1006px) {

#temnyi, #svetlyi { width: 100%; }

}

</style>

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

4.3 Версия web-интерфейса для персонального компьютера

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

Несколько скриншотов:

Рис.1 Вход в дневник.

Рис.2 Успешный вход в дневник под преподавателем.

Рис.3 Проставление отметок.

Проект на стадии разработки, на момент сдачи, представим все представленное преподавателю, на его тестирование. На время сдачи диплома, проект уже планируется внедрить в официальный сайт ПВГУС'а, и полностью его рабочий функционал.

4.4 Версия web-интерфейса для планшетов мобильных устройств

На данный момент дизайн разработан с основами фиксированный и резиновой верстки. Чего вполне хватает для первых стадий разработки проекта. В дипломе, в данном разделе будут описаны действия, которые привели дизайн проекта к адаптивной верстке.

Заключение

Мы создали рабочую платформу, электронного дневника студента СПО ПВГУС. В ней на данный момент присутствует все, что необходимо для функционирования в реальных условиях. Но наша цель, создать проект, который не просто будет отвечать функциональным требованиям, но и будет удобен для студентов.

В дальнейшем большая часть работы будет связана с разработкой интерфейса, дизайна дневника. Наложение на рабочий проект. Внедрение в официальный сайт ПВГУС.

Список литературы

1. Гудман, Д. JavaScript и DHTML. Сборник рецептов. / Д. Гудман. - Москва: Изд-во Питер, 2012. - 523 c.

2. Дебольт HTML и CSS. Совместное использование / Дебольт. - Москва: Изд-во НТ Пресс, 2012. - 512 c.

3. Молли, Э. Использование HTML 4. Специальное издание / Э. Молли. - Москва: Изд-во Вильямс, 2011. - 228 c.

4. Конверс, Т. PHP 5 и MySQL. Библия пользователя / Т. Конверс. - Москва: Изд-во Вильямс, 2013. - 306 c.

5. Кузнецов, М.В. PHP. Практика создания Web-сайтов / М.В. Кузнецов. - Москва: Изд-во БХВ-Петербург, 2013. - 190 c.

6. Стеймец, У. PHP. 75 готовых решений для вашего сайта / У. Стеймец. - СПб: Изд-во Наука и техника, 2013. - 256 c.

Размещено на Allbest.ru