Министерство образования и науки Республики Казахстан
Северо-Казахстанский государственный университет им. М. Козыбаева
«Допущен к защите»________________
И.о.зав. кафедрой «Информационные системы»
КУРСОВОЙ ПРОЕКТ
На тему: «Разработка Web-приложения «Музыкальный портал»
По дисциплине: «Web-программирование»
ИС1ИС.10712118.05 КП
Выполнил студент Капустин А.О.
группы ИС-11
Научный руководитель .
преподаватель,магистр
информационныхсистем
НормоконтрольОтинова И.В.
ст. преподаватель, магистр
техники и технологий
Петропавловск, 2014г.
Содержание
1 Аналитическая часть 6
1.1 Анализ предметной области 6
1.2 Обзор существующих сайтов аналогов 7
1.3 Формирование требований к системе 12
1.4 Выбор инструментария реализации 13
2 Проектная часть 23
2.1 Постановка задачи 23
2.2 Проектирование базы данных 23
2.3 Проектирование административной панели 26
2.4 Структура сайта: музыкальный портал «MC2» 31
2.5 Проектирование раздела статей 31
2.6 Проектирование раздела Исполнители 31
2.7 Проектирование раздела Жанры 32
2.8 Проверка web-сайта на валидность 33
ЗАКЛЮЧЕНИЕ 35
СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ 36
ПРИЛОЖЕНИЕ А 38
ПЕРЕЧЕНЬ ИСПОЛЬЗУЕМЫХ ОБОЗНАЧЕНИЙ
В пояснительной записке к курсовому проекту используются следующие обозначения и сокращения:
CSS CascadingStyleSheets (каскадные таблицы стилей);
HTML HyperTextMarkupLanguage (язык гипертекстовой разметки);
IE Internet Explorer (браузер);
MS MicroSoft (компания по производству программного обеспечения);
PX Пиксель (элемент матрицы дисплеев);
ВУЗ Высшее учебное заведение;
ИС Информационные системы;
ОС Операционная система;
ПК Персональный компьютер;
ПО Программное обеспечение;
РК Республика Казахстан;
СКГУ Северо-Казахстанский Государственный университет имени М. Козыбаева;
СУБД Система управления базами данных;
ФИО фамилия имя отчество.
ВВЕДЕНИЕ
Музыка является неотъемлемой частью жизни любого человека, это одно из самых древних видов искусства. Как и другие области деятельности человечества, музыка продолжает развиваться и тесно сплетается с современными технологиями. На сегодняшний день существует уже достаточно много различных развлекательно-музыкальных ресурсов в сети Интернет, но на территории казахстанских доменов, многофункциональных и достойных внимания, их мало. Тем более мало сайтов презентабельно выглядящих на мобильных устройствах, а тенденции современно мира, это увеличение доли мобильных гаджетов по отношению к стационарным, развитие скоростного мобильного интернета (4g, 5g и т.д.).
Актуальностью данного курсового проекта является отсутствие хороших музыкально-развлекательных ресурсов в доменной зоне «KZ».
Целью данного курсового проекта является разработка web-приложения «Музыкальный портал», который будет соответствовать современным высоким требованиями пользователей сети интернет, с основной направленностью на мобильные устройства.
Для выполнения данной цели были поставлены следующие задачи:
• анализ предметной области;
• обзор существующих аналогов;
• формирование требований к модулю;
• выбор инструментария реализации;
• проектирование базы данных;
• разработка административного блока;
• тестирование и отладка на сервере.
Объектом исследования является музыкально-развлекательная область деятельности человека в сети.
Предметом исследования является сайт «Музыкальный портал».
В ходе данного курсового проекта были использованы следующие методы исследования:
• анализ научной литературы и других источников по решаемой проблеме;
• системный анализ. Изучение объекта исследования как совокупности элементов, образующих систему. В научных исследованиях предусматривается оценка поведения объекта как системы со всеми факторами, влияющими на функционирование.
Основные положения, выносимые автором на защиту:
• структура базы данных;
• интерфейс web-приложения;
• дизайн web-приложения.
Практическая значимость данного дипломного проекта состоит в том, что созданное приложение предоставит достаточный спектр и полноту информации по теме музыкальные жанры и исполнители, для пользователей сети интернет.
Структура и объем курсового проекта. Пояснительная записка по теме курсового проекта «Проектирование веб-приложения «Музыкальный портал» объемом 39 страниц состоит из содержания, перечня использованных сокращений, введения, 2 глав, заключения, списка использованной литературы, приложения и 30 рисунков.
При написании пояснительной записки к курсовому проекту были использованы методические указания[3].
1 Аналитическая часть
1.1 Анализ предметной области
Музыка (греч. μουσική, прилагательное от греч. μούσα– музы) – искусство, средством воплощения художественных образов для которого являются звук и тишина, особым образом организованные во времени.
Предполагается, что появление современного человека произошло около 160 000 лет тому назад в Африке. Около 50 000 лет тому назад люди заселили все пригодные для жизни континенты. Поскольку все люди мира, включая наиболее изолированные племенные группы, обладают некоторыми формами музыки, историки пришли к выводу, что музыка должна была присутствовать у первых людей в Африке, до их расселения по планете. Предполагается, что после возникновения в Африке музыка существует по крайней мере 50 000 лет и постепенно превратилась в неотъемлемую часть человеческой жизни по всей планете.
Доисторической, или примитивной, принято обозначать устную музыкальную традицию. Примерами может служить американская и австралийская музыка аборигенов. Доисторическая эра в музыке заканчивается с переходом к записи музыкальных произведений. Возраст наиболее древней известной песни, записанной на клинописной табличке и обнаруженной на раскопках Ниппура, оценивается примерно в 4 тыс. лет. [1]
Как и любой вид искусства музыка развивается и тесно сплетается с другими областями человеческой деятельности (в том числе и с интернетом).
Распространение музыки в Интернете началось с появления формата МР3 (примерно с 1го января 1999 года), сжимающего звуковые файлы до размеров, пригодных для передачи в Интернете при сохранении качества записи.
На сегодняшний день не представляется возможным, хотя бы примерно, подсчитать количество музыкальных сайтов и сайтов с музыкальным содержанием.
Хотелось бы еще отметить одну немаловажную тему, речь о которой также пойдет в данной курсовой работе, это мобильные устройства и мобильный интернет. С каждым годом доля мобильных устройств увеличивается и с ними увеличивается доля мобильных и универсальных сайтов. К сожалению не все веб-разработчики задумываются об этом и из-за этого в дальнейшем их сайты будут менее востребованы.
1.2 Обзор существующих сайтов аналогов
В ходе данного курсового проекта были рассмотрены 3 аналога из доменной зоны «KZ». Эти сайты были отобраны как самые быстро находимые, благодаря популярнейшему поиску Google.
1.2.1 Музыкальный портал Казахстана kzmz
Для начала рассмотрим ресурс позиционирующий себя как «Первый музыкальный портал Казахстана». Вот его главная страница в соответствии с рисунком 1.1.
Рисунок 1.1 Главная страница (верхняя часть)
Уже на главной странице видны огрехи: «поехавший» дизайн, огрехи при проектировании базы данных; да и в целом сайт выглядит словно его проектировал дилетант в сфере web-технологий в соответствии с рисунком 1.2.
Рисунок 1.2 Страница «Афиша»
Страница «Афиша» показывает, имеет достаточно скверную поддержку или не имеет оной. Это заметно по многочисленным ошибкам баз данных.
Рисунок 1.3 Форум
Страницы в разделе «Исполнители» не отображаются вовсе. Между тем этот ресурс позиционирует себя как «первый музыкальный портал Казахстана».
Одной из немногих положительных черт является наличие форума, который успешно функционирует и на сегодняшний день имеет новые сообщения. Хотя оболочка форума разрабатывалась сторонне, как это часто можно увидеть, и была взята с сайта http://www.phpbbguru.net/.
В итоге, сайт не имеет никаких преимуществ кроме форма.
1.2.2 Музыкальный сайт Казахстана mp3portal
Следующий сайт для рассмотрения — это MP3 портал. Вот его главная страница в соответствии с рисунком 1.4.
Рисунок 1.4 Главная страница
Внешний вид сайта возможно выигрывает благодаря очень простому дизайну, но сам сайт является полузаброшенным из-за многочисленных битых ссылок и отсутствия свежей информации. Форум сайта в соответствии с рисунком 1.5.
Рисунок 1.5 Форум
На форуме практически нет сообщений, нет новых тем. Следовательно, он не функционирует.
Так же на сайте присутствует возможность загрузки конента в соответствии с рисунком 1.6.
Рисунок 1.6 Страница с «бесплатным» контентом
Возможность скачивать музыку ставит под сомнение легальность. Спектр и разнообразие контента оставляют желать лучшего.
В итоге сайт удовлетворяет требованиям только в сфере дизайна, в остальном оставляет желать лучшего.
1.2.3 Музыкальный каталог музыки bigtawn.ucoz
Если предыдущие проекты были более-менее коммерческими, то этот был создан на базе конструктора сайтов http://www.ucoz.ru/. Да, дизайн из конструкторов выглядит неплохо (несмотря на то что автор ошибся при выборе некоторых цветов для текста). Опять же существуют ссылки для скачивания на файлообменниках и полностью «мертвый» форум (как и сам сайт). Вид главной страницы в соответствии с рисунком 1.7.
Рисунок 1.7 Главная страница
Не очень удачные стилевые решения для шрифтов (красный или серый шрифт на черном фоне).
Не смотря на достаточно неплохо дизайн, сайт является мало посещаемым, это можно увидеть на странице статистики, в соответствии с рисунком 1.8.
Рисунок 1.8 Страница статистики
В итоге малопосещаемый сайт с хорошим дизайном (благодаря конструктору), который имеет все те же нарекания что и рассмотренные прежде.
1.3 Формирование требований к системе
Необходимо выявить основные требования к разрабатываемой системе, общие сведения, назначение и цели создания системы.
1.3.1 Общие сведения
Наименование работы
Разработка сайта «Музыкальный портал» для дальнейшего размещения в сети интернет.
Основание для проведения работы
Курсовой проект по предмету «WEB-программирование» на основании рабочего учебного плана специальности 05B070300 «Информационные Системы», составленного на основании ГОСО РК 3.08.078-2004 Государственный общеобразовательный стандарт образование республики Казахстан. Образование высшее профессиональное бакалавриата. Специальность 05B070300 «Информационные системы».
Заказчик
Кафедра «Информационные Системы» Северо-Казахстанского Государственного университета имени М. Козыбаева.
Исполнители работ
Студент группы ИС-11 Капустин Артем Олегович.
Назначение и цели системы
Данная система предназначена для удовлетворения информационных нужд пользователей сети интернет, а администраторский модуль – для упрощения обслуживания сайта.
Требования к дизайну
Дизайн сайта должен отвечать следующим требованиям:
• интуитивное меню – навигация должна быть максимально удобной для пользователя;
• резиновый дизайн – возможность отображения на устройствах с любым разрешением экрана;
• простота– дизайн должен быть максимально прост и удобен для использования, без излишних элементов;
• нейтральная цветовая гамма – целевая аудитория достаточно обширна по всем показателям;
• основные разделы должны быть доступны с первой страницы;
• кроссбраузерность – сайт должен корректно отображаться в IE8, IE9, Opera, MozillaFirefox, GoogleChrome, а так же в мобильных браузерах.
Требования к системе в целом
При создании сайта были выделены следующие основные этапы и требования к разработке сайта:
• формирование целей и задач сайта;
• анализ аналогов в сети интернет;
• формирование технического задания на разработку сайта;
• сбор материалов;
• разработка дизайна и функциональности страниц и программных решений образовательного сайта;
• тестирование.
Требования к функциям
В данном веб-приложении подразумевается наличие классов «Администратор» и «Гость».
Требования в видам обеспечения
Сервер должен быть на платформе операционной системы Ubuntu или Windows серверной версии с установленным Apache или базовым пакетом Denwer.
Для организации базы данных на сервере должен быть установлен MySQL.
1.3.4 Назначение системы
Требования к персоналу
Для работы в административной панели, пользователь должен обладать базовыми знаниями HTML, CSS, базовыми знаниями языков JavaScript, VBScript, ASP.
Требования к наполнению информацией
С помощью административного блока совершается заполнение сайта информацией о квалификациях. В административном блоке происходит исполнение следующих функций управления данными:
• добавление;
• редактирование;
• удаление.
1.4 Выбор инструментария реализации
Для выполнения данного курсового проекта были использованы программы:
• Dreamweaver CS6;
• Denver 3;
• Notepad++;
• Adobe Photoshop CS6.
Среды разработки:
• HTML 5;
• CSS 3;
• Bootstrap 3;
• PHP.
AdobeDreamweaver CS6 является новой версией программы, которая помогает в процессе создания профессионального сайта. ПО для дизайна AdobeDreamweaver включает в себя понятный на интуитивном уровне визуальный интерфейс, по средствам которого можно создавать и вносить коррективы в сайты и моб. приложения. Можно воспользоваться «резиновыми макетами», оснащенными меж платформенной поддержкой, для того чтоб создавать страницы. Также можно просматривать в панели «много экранного просмотра» макеты перед осуществлением публикации.
При помощи понятных на интуитивном уровне средств для осуществления визуального редактирования можно создавать код, который соответствует стандартам веб, и применять характеристики CSS (градиенты, тени рамок). Можно сразу же увидеть используемые характеристики в дизайне. Больше нет необходимости менять программные настройки. Больше нет необходимости осуществлять переключение в кодовое окно. Все разу же видно на экране.
Можно создавать разнообразные дизайны, динамические макеты в режиме визуального воспроизведения. Наличие усовершенствованного интерфейса «резинового» макета способствует быстрому созданию проекта, который поддерживает функционирование на экранах моб. и настольных устройств различных размеров.
Можно создавать интересное текстовое оформление. Можно использовать большую, ежедневно расширяющуюся библиотеку шрифтов веб AdobeЭдж Веб ФонтсЛибрари на базе AdobeТапкит. Можно добавлять шрифты непосредственно из инструментов Дримвейвер и Эдж. Можно добавлять высокоточную, интересную типографику, создавая при этом страницы, для загрузки которых необходимо будет всего лишь пару секунд.
Можно создавать разнообразные проекты при использовании технологий HTML, CSS и ДжаваСкрипт. Можно разрабатывать динамические страницы PHP языке. Можно еще эффективно создавать код при использовании улучшенных подсказок по коду и выделения при помощи цвета синтаксических конструкций.
Можно анимировать характеристики CSS для того, чтоб создать настраиваемые переходы. Можно создавать интересные динамичные интерфейсы. Можно воспользоваться возможностями осуществления точного контроля за произведением разработки проекта в процессе настройки частей страниц и создания интересных эффектов.
Шрифт AdobeСоурс Код Про позволяет легко и просто различать схожие по структуре символы в процессе работы над предоставлением кода.
Можно создавать и упаковывать интересные приложения Андроид и iOS. При помощи поддержки услуги AdobeФонГапБилд в Дримвейвер можно преобразовывать HTML страницы в приложения для моб. устройств. Перед осуществлением синхронизации файлов на моб. устройствах необходимо протестировать макеты через эмуляторы.
Основной вид рабочей области в соответствии с рисунком 1.9.
Рисунок 1.9 Программа DreamweaverCS6
Можно создавать более интересные проекты, как для настольных, так и для моб. устройств, при помощи различных звуков и видеороликов. Легко можно добавить аудио и видео HTML5 на сайт, а также в приложения. Скачать программу Dreamweaver Наличие понятного интерфейса и подсказок по коду делают весь процесс вставки различных мультимедийных элементов быстрым и одновременно эффективным.
Теперь можно применять привычное пространство для работы Дримвейвер и для создания дизайна для моб. устройств. Можно воспользоваться встроенной поддержкой ДжекюриМобаил для того, чтоб создать оригинальное моб. приложение для платформ Андроид и iOS. Создавать можно проекты для моб. устройств при использовании простых рабочих процессов.
Используя усовершенствованную панель «Вставка», можно очень быстро вставлять теги HTML5 и общие части страниц. Панель разделена на категории для удобного выбора необходимых характеристик. Теперь можно быстро находить необходимые элементы и добавлять их при использовании удобного централизованного интерфейса панели «Вставка».
Можно создавать управляемые данными, интересные сайты веб при использовании систем управления контентом – ВердПресс, Друпал и Джумла! Можно быстро найти код, который подлежит обновлению, при помощи функции «Динамически связанные файлы». Интеграция с Бизнес Каталайст.
Можно подключать и редактировать сайты при помощи Adobе Бизнес Каталайст. Можно создавать интернет магазины, всевозможные блоги и другие элементы сайта веб через серверное решение, которое оснащено централизованной базой данный, встроенной системой предоставления отчетности.
Можно производить проверку на правильность создания страниц сайта при помощи он-лайн услуги W3C МаркапВалидэйшн Сервис. Можно улучшить сайт, основываясь на полученных комментариях.
Denver. Давайте посмотрим, что же включает в себя базовый (основной) пакет Денвера:
• Инсталлятор (поддерживается также инсталляция на flash-накопитель).
• Apache, SSL, SSI, mod_rewrite, mod_php.
• PHP5 с поддержкой GD, MySQL, sqLite.
• MySQL5 с поддержкой транзакций.
• Система управления виртуальными хостами, основанная на шаблонах. Чтобы создать новый хост, вам нужно лишь добавить директорию в каталог /home, править конфигурационные файлы не требуется. По умолчанию уже поддерживаются схемы именования директорий многих популярных хостеров; новые можно без труда добавить.
• Система управления запуском и завершением всех компонентов Денвера.
• phpMyAdmin– система управления MySQL через Web-интерфейс.
• Эмулятор sendmail и SMTP-сервера (отладочная «заглушка» на localhost:25, складывающая приходящие письма в /tmp в формате .eml); поддерживается работа совместно с PHP, Perl, Parser и т.д.
Если вы когда-нибудь качали дистрибутивы по модему, наверное, вы задавались вопросом: каков абсолютный минимум размера дистрибутивов, чтобы с ними уже можно было работать. Давайте посчитаем:
• Apache: 4.7 MB;
• PHP5: 9.7 MB;
• MySQL5: 23 MB;
• phpMyAdmin: 2 МБ.
• Итого: 40 MB
Видно, что как раз эти компоненты и содержатся в базовом пакете Денвера, но занимает он... около 8.2 мегабайт! Вероятно, вы не поверите, что исходные дистрибутивы могут вот так взять и «похудеть» более чем в 7 раз без потери функциональности. За счет чего же удалось достичь таких результатов?
• Дистрибутивы были тщательным образом «прочесаны». Все компоненты, которые используются сравнительно редко, вынесены в отдельные пакеты расширений. Таким образом, 90% разработчиков смогут сразу же начать работать, а оставшимся 10% достаточно лишь докачать и установить при помощи инсталляторов дополнительные пакеты.
• Обычно дистрибутивы снабжаются различными ненужными файлами, вроде истории изменений или инструкций по установке. Незачем говорить, что Денвер их не содержит.
• Для упаковки архива используется один из самых мощных архиваторов – 7-Zip.
Если вы – профессиональный разработчик, вам, наверное, потребуются дополнительные пакеты:
• полная версия ActivePerl 5.8;
• PHP5 с полным набором модулей;
• язык программирования Python;
• СУБДPostgreSQLилиInterBase/FireBirdверсий 1 и 2;
• старый-добрый PHP версии 3 или 4;
• или даже Parser студии Лебедева.
Все это вы можете скачать и установить, причем «грязную работу» возьмет на себя инсталлятор, входящий в пакет.
Отличительной особенностью Денвера является его полная автономность. Она заключается в следующем.
• Денвер устанавливается в один-единственный каталог и вне его ничего не изменяет. Он не пишет файлы в Windows-директорию и не «гадит» в Реестре. При желании вы можете даже поставить себе сразу два Денвера, и они не будут конфликтовать.
• Никакие «сервисы» NT/2000 не «прописываются». Если вы запустили Денвер, то он работает. Если завершили – то перестает работать, не оставляя после себя следов.
• Системе не нужен деинсталлятор – достаточно просто удалить каталог.
• Установив Денвер однажды, вы можете затем просто переписывать его на другие машины (на произвольный диск в произвольную директорию). Это не приведет ни к каким побочным эффектам.
• Все конфигурирование и настройка под конкретную машину происходит автоматически.
Эти же правила распространяются и на пакеты расширений. В целях упрощения работы компонентов комплекса и улучшения совместимости с реальным Unix-хостером при старте создается специальный виртуальный диск, присоединенный к основной директории.
Виртуальный диск – это просто синоним для некоторой папки на реальном, или физическом, диске. Подключается он при помощи команды subst, о чем заботятся скрипты Денвера. Вы можете работать с виртуальным диском, как с обычным. При этом все операции в действительности будут производиться с указанной директорией. Механизм работы виртуальных дисков встроен в ОС и не ведет к каким-либо издержкам и замедлениям.
За счет применения виртуального диска Денвер «изнутри» похож на маленький Unix: у него есть своя директория /home, /usr, /tmp... Различные компоненты и серверы расположены так, как это принято в Unix. Например, в /home располагаются виртуальные хосты, а в /usr– программные компоненты.
Такая архитектура в действительности не имеет ничего общего с системой Cygwin (хотя и похожа). Тем не менее, некоторые пакеты расширений Денвера могут использовать Cygwin для своих внутренних целей, но это всегда «прозрачно» для пользователя.
Вопреки распространенному мнению, Денвер не является чем-то статическим и неизменным. Никто не мешает вам устанавливать поверх него дополнительные программы и компоненты (например, сервер СУБД PostgreSQL). Они просто будут для него «как родные». Вы можете также задавать логику запуска и завершения дополнительных сервисов по аналогии с тем, как это сделано в базовом пакете. Так что, если вам нужна какая-то система, которой нет в пакетах расширений, смело ставьте и конфигурируйте ее вручную.
Notepad++ - свободный текстовый редактор для Windows с подсветкой синтаксиса большого количества языков программирования и разметки. Он базируется на компоненте Scintilla, написан на C++ с использованием STL, а также Win32 API и распространяется под лицензией GPL. Базовая функциональность программы может быть расширена как за счет плагинов, так и сторонних модулей, таких как компиляторы и препроцессоры.
Возможности программы:
• подсветка синтаксиса;
• сворачивание кода;
• автодополнение и автоматическое закрытие скобок и тэгов (если активировано);
• закладки;
• регулярные выражения для поиска и замены;
• запись и воспроизведение макросов;
• сравнение файлов;
• переопределение любых горячих клавиш;
• резервное копирование сохраняемых файлов (включается в настройках);
• трансформация текста при помощи подключенного плагина TextFX;
• поддержка и конвертирование кодировок ANSI, UTF-8 и UCS-2;
• блоковое выделение текста, одновременное выделение нескольких разных мест (с клавишей Ctrl);
• мультистрочное редактирование (с использованием клавишыAlt) [12].
Программа AdobePhotoshop создана для того, чтобы любой пользователь смог самостоятельно отредактировать фотографию или картинку. Применение этой программы очень широкое, можно создавать картинки и изображения, ретушировать фото, которые вы считаете нужным улучшить. Также легко работать с отсканированным материалом, при помощи данной программы удобно отреставрировать фото с утраченными фрагментами, или просто обновить цвета на фотографии.
Разработчики программы создали удобную и понятную в пользовании программу, которая заслужено, пользуется популярностью, и считается самой удачной из многих подобных. При этом хорошая эффективность и качество, неотъемлемые условия для разработчиков. Без труда можно создать и коллажи, монтаж, а с помощью нескольких слоев создаются неповторимые высококачественные картинки с отличным разрешением.
Основная рабочая область в соответствии с рисунком 1.10.
Рисунок 1.10 PhotoshopCS6
Инструменты, применяемые при создании дизайна. Удобство и скорость те факторы, которые приоритетны для разработчиков. Используя векторный слой можно добиться идеальной обводки текста, а разнообразные стили текста дают возможность проявить свои творческие задумки. Еще легче стало отыскать нужный слой, что очень помогает в работе. Обновленные эффекты размытия. Размытие один из любимых инструментов у фотохудожников, и те изменения, которые коснулись этой функции, приятно радуют. Можно размыть все изображение или фрагмент, повысить или понизить резкость, создать эффекты, такие как сдвиг и наклон.
Новинка. «Рамка». Внедряются и новшества. Например, последнее нововведение – инструмент для работы в программе Photoshop «Рамка», сможет вам помочь при управлении изображениями и выполнить обратимую вырезку фотографий. При помощи вышеупомянутой функции MercuryGraphicsEngine можно тут же посмотреть результат проделанной работы.
Продуманный и современный интерфейс. Учтены вкусы пользователей и создан новый интерфейс, его отличает то, что у него темные фоны, которые используют для создания динамичных изображений. И другие функции претерпели значительные изменения в лучшую сторону.
HTML5 (англ. HyperTextMarkupLanguage, version 5) – язык для структурирования и представления содержимого всемирной паутины. Это пятая версия HTML, последняя (четвертая) версия которого была стандартизирована в 1997 году. По состоянию на октябрь 2013 года, HTML5 еще находится в разработке, но, фактически, является рабочим стандартом (англ. HTML Living Standard). Цель разработки HTML5 – улучшение уровня поддержки мультимедиа-технологий, сохраняя при этом удобочитаемость кода для человека и простоту анализа для парсеров.
Во всемирной паутине долгое время использовались стандарты HTML 4.01 и XHTML 1.1, и веб-страницы на практике оказывались сверстаны с использованием смеси особенностей, представленных различными спецификациями, включая спецификации программных продуктов, например веб-браузеров, а также сложившихся общеупотребительных приемов. HTML5 был создан, как единый язык разметки, который мог бы сочетать синтаксические нормы HTML и XHTML. Он расширяет, улучшает и рационализирует разметку документов, а также добавляет единое API для сложных веб-приложений.
В HTML5 реализовано множество новых синтаксических особенностей. Например, элементы <video>, <audio> и <canvas>, а также возможность использования SVG и математических формул. Эти новшества разработаны для упрощения создания и управления графическими и мультимедийными объектами в сети, без необходимости использования сторонних API. Другие новые элементы, такие как <section>,<article>, <header> и <nav>, разработаны для того, чтобы обогащать семантическое содержимое документа (страницы). Новые атрибуты были введены с той же целью, хотя ряд элементов и атрибутов был удален. Некоторые элементы, например <a>, <menu> и <cite>, были изменены, переопределены или стандартизированы. API и DOM являются фундаментальными частями спецификации HTML5. HTML5 также определяет некоторые особенности обработки ошибок верстки, поэтому синтаксические ошибки должны рассматриваться одинаково всеми совместимыми браузерами.
CSS3 - это новый стандарт оформления HTML документов значительно расширяющий возможности предыдущего стандарта CSS2.1.
Многие возможности, которые были труднодоступны в CSS2.1, то есть требовали использования дополнительных внешних программ (таких как AdobePhotoshop), скриптов (таких как JavaScript) или специальных "хитростей" могут легко достигаться в CSS3 за счет использования новых свойств оформления.
В CSS3 Вы можете:
• Создавать элементы со сглаженными углами;
• Создавать линейные и сферические градиенты;
• Более гибко оформлять фоновую картинку элементов;
• Добавлять к элементам и к тексту элементов тени;
• Использовать небезопасные шрифты (не боясь при этом, что они будут не поддерживаться браузером пользователя);
• Создавать анимацию и различные эффекты переходов;
• Задавать цвета несколькими новыми способами и многое другое.
Обратите внимание: новые CSS3 свойства разобранные в данном учебнике поддерживаются только в современных браузерах: IE9+, Firefox 3.6+, Opera 10+, Chrome 12+, Safari 5+. Особые случаи будут специально оговариваться.
Обратите внимание: спецификация CSS3 от W3C все еще находится в разработке, поэтому поведение некоторых свойств рассмотренных в данном учебнике может измениться.
Доля использования старых браузеров полностью или частично не поддерживающих CSS3 уже не так велика (данные StatCounter для России на Октябрь 2013):
• InternetExplorer 9 (частично не поддерживает CSS3 свойства): 3%
• InternetExplorer 8 (не поддерживает CSS3 свойства): 4.5%
Однако мы все же рекомендуем дополнительно анализировать количество пользователей использующих старые браузеры для каждого сайта индивидуально (например с помощью GoogleAnalytics) и если это количество еще велико воздержатся от использования свойств, которые могут привести к проблемам отображения сайта в старых браузерах.
TwitterBootstrap –свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML и CSS шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейсов, включая JavaScript расширения.
Bootstrap использует самые современные наработки в области CSS и HTML, поэтому необходимо быть внимательным при поддержке старых браузеров.
Основные инструменты Bootstrap:
• Сетки – заранее заданные размеры колонок, которые можно сразу же использовать, например ширина колонки 140px относится к классу .span2, который можно использовать в CSS описании документа.
• Шаблоны – Фиксированный или резиновый шаблон документа.
• Типографика – Описания шрифтов, определение некоторых классов для шрифтов таких как код, цитаты и т. п.
• Медиа – Представляет некоторое управление изображениями и Видео.
• Таблицы – Средства оформления таблиц, вплоть до добавления функциональности сортировки.
• Формы — Классы для оформления не только форм, но и некоторых событий происходящих с ними.
• Навигация — Классы оформления для Табов, Вкладок, Страничности, Меню и Тулбара.
• Алерты — Оформление диалоговых окон, Подсказок и Всплывающих окон.
PHP (рекурсивный акроним словосочетания PHP: HypertextPreprocessor) - это распространенный язык программирования общего назначения с открытым исходным кодом. PHP сконструирован специально для ведения Web-разработок и его код может внедряться непосредственно в HTML.
Вместо рутинного вывода HTML-кода командами языка (как это происходит, например, в Perl или C), скрипт PHP содержит HTML с вкраплениями кода (в нашем случае, это вывод текста «Привет, я - скрипт PHP!»). Код PHP отделяется специальными начальным и конечным тегами <?php и ?>, которые позволяют «переключаться» в «PHP-режим» и выходить из него.
PHP отличается от JavaScript тем, что PHP-скрипты выполняются на сервере и генерируют HTML, который посылается клиенту. Если бы у вас на сервере был размещен скрипт, подобный вышеприведенному, клиент получил бы только результат его выполнения, но не смог бы выяснить, какой именно код его произвел. Вы даже можете настроить свой сервер таким образом, чтобы обычные HTML-файлы обрабатывались процессором PHP, так что клиенты даже не смогут узнать, получают ли они обычный HTML-файл или результат выполнения скрипта.
2 Проектная часть
2.1 Постановка задачи
Для разработки административной панели музыкального портала были поставлены следующие задачи:
• разработка и создание базы данных;
• разработка интерфейса профиля администратора.
2.2 Проектирование базы данных
Спроектированная база данных, создавалась с помощью встроенного инструментария Denver 3 в соответствии с рисунком 2.1.
Рисунок 2.1 Таблицы БД «MC2»
В рамках данного курсового проекта была разработана база данных для хранения и обмена информации. Она называется «MC2» и состоит из 4 таблиц.
В соответствии с рисунком 2.2 таблица setting используется для вывода заголовков, ключевых слов для облегчения поиска и текста (для страниц с информацией). Таблица setting состоитиз 6 полей id, page, title, meta_d, meta_k, text. Поле id является постоянным идентификатором в базах данных. Поле page, определяет основное имя страницы. Поля title, meta_d, meta_k созданы для вывод мета тегов и основного заголовка страницы.
Рисунок 2.2 Таблица setting
В соответствии с рисунком 2.3 таблица artists используется для хранения и вывода статей сайта, посвященных исполнителям. Онасостоитиз 5 полей: id, name, img, short_story, long_story. Поле id является постоянным идентификатором в базах данных. Поле name обозначает основное имя статьи.
Поля short_story и long_story предназначены для хранения информации о превью статьи и полного текста статьи, соответственно.
Рисунок 2.3 Таблица artists
В соответствии с рисунком 2.4 таблица genres используется для хранения и вывода статей сайта, посвященных исполнителям. Онасостоитиз 5 полей: id, name, img, short_story, long_story. Поле id является постоянным идентификатором в базах данных. Поле name обозначает основное имя статьи.
Поля short_story и long_story предназначены для хранения информации о превью статьи и полного текста статьи, соответственно.
Рисунок 2.4 Таблица genres
В соответствии с рисунком 2.5 таблица userlist используется для хранения логина и пароля администраторов. Таблица userlist состоит из 3 полей id, user и pass.
Рисунок 2.5 Таблица userlist
Эта таблица сверяет полученные при в входе в раздел администратора данные и при удачном исходе разрешает доступ.
2.3 Проектирование административной панели
Для реализации административной панели, в первую очередь была создана, защищенная паролем, страница администратора. Далее к ней добавлялись возможности редактирования БД, непосредственно используя веб-страницы.
2.3.1 Проектирование раздела добавления статей
В данном разделе администратор может добавлять новые статьи в базу данных. После подключения администратора при нажатии на ссылку добавление статей откроется форма добавления статей в соответствии с рисунком 2.6.
Рисунок 2.6 Форма добавления статей
Раздел добавления статей формируется при помощи двух файлов: add_lesons.php и new_lesons.php. Файл new_lesons.php содержит в себе саму форму добавления статей, а файл add_lesons.php является обработчиком формы находящейся в файле new_lesons.php. Файл add_lesons.php вставляет значения или текст, введенный в форму при нажатии на кнопку отправки (submit) в базу данных. Определяется 3 события: если форма заполнена и статья добавлена, если форма заполнена и статья не добавлена и если в форму введены не все данные.
Если форма заполнена и статья добавлена то в соответствии с рисунком 2.7 выведется сообщение.
Рисунок 2.7 Успешное добавление статьи
Если форма заполнена и статья не добавлена то в соответствии с рисунком 2.8 выведется сообщение.
Рисунок 2.8 Ошибка при добавлении статьи
Если в форму введены не все данные то в соответствии с рисунком 2.9 выведется сообщение.
Рисунок 2.9 Введена не вся информация
Для определенного форматирования текста нужно вводить данные в форму с соответствующими форматированию тегами.
2.3.2 Проектирование раздела редактирования статей
В данном разделе администратор может редактировать статьи которые уже имеются в базе данных. После подключения администратора при нажатии на ссылку редактирования статей откроется список статей имеющихся в базе данных в соответствии с рисунком 2.10.
Рисунок 2.10 Список статей
После выбора из списка статей определенной статьи открывается страница с уже заполненной формой добавления статей в соответствии с рисунком 2.11. Далее просто изменяются нужные части статьи и выполняется обработка формы.
Рисунок 2.11 Форма редактирования статей
Данный раздел формируется при помощи двух файлов: update_lesons.php и edit_lesons.php. Файл edit_lesons.php отвечает за форму и вывод в форму выбранной статьи. Файл update_lesons.php отвечает за обработку формы и внесение изменений в базу данных.
2.3.3 Проектирование раздела удаления статей
В данном разделе администратор может удалять статьи которые уже имеются в базе данных. После подключения администратора при нажатии на ссылку удаления статей откроется список статей имеющихся в базе данных в соответствии с рисунком 2.12.
Рисунок 2.12 Список статей для удаления
Далее выбирается статья из списка и после нажатия кнопки удалить выполняется файл обработчик после чего статья полностью удаляется из базы данных в соответствии с рисунком 2.12. Удаление производится при помощи двух файлов: delet_lesons.php и drop_lesons.php. Файл delet_lesons.php отвечает за вывод списка статей из базы. Файл drop_lesons.php является обработчиком и осуществляет удаление статьи из базы данных.базе данных. После подключения администратора при нажатии на ссылку редактирования текста откроется список страниц имеющихся в базе данных в соответствии с рисунком 2.13.
Рисунок 2.13 Список страниц
После выбора из списка страниц определенной страницы открывается страница с уже заполненной формой страниц в соответствии с рисунком 2.14. Далее просто изменяются нужные части страницы и выполняется обработка формы.
Рисунок 2.14 Форма редактирования текста страниц
Данный раздел формируется при помощи двух файлов: update_text.php и edit_text.php. Файл edit_text.php отвечает за форму и вывод в форму выбранной страницы. Файл update_text.php отвечает за обработку формы и внесение изменений в базу данных.
2.4 Структура сайта: музыкальный портал «MC2»
Развлекательные сайты чаще всего обладают произвольной структурой. Однако выделяют и общие структурные элементы, присущие большинству. Структура данного сайта выглядит следующим образом:
• Главная страница – содержит представление о сайте в целом.
• Страницы статей – содержат статьи о музыкальных жанрах и исполнителях. Редактируется Администратором.
• Страница чарты – содержит общие сводки о голосованиях пользователей.
• Страница форум – содержит форум сообщества.
• Страничка контакты – содержит контакты с администрацией сайта.
2.5 Проектирование раздела статей
В данном разделе выводятся статьи находящиеся в базе данных. Каждая статья имеет области соответствующие наполнению и позволяющие максимально прочувствовать функционал.
2.6 Проектирование раздела Исполнители
В данном разделе выводятся статьи касающиеся музыкальных исполнителей. При нажатии на изображения к превью статьи, открывается страница статьи в соответствии с рисунком 2.15.
Рисунок 2.15 Страница Исполнители.
Так же на этой странице присутствует рейтинг различных исполнителей. И так же как и на главной странице есть панель взаимодействия с форумом и онлайн-радио.
На странице с исполнителями можно ознакомится с его жанровыми особенностями и узнать о схожих группах, а так же есть информация о рейтинге песен и наиболее популярных альбомах.
2.7 Проектирование раздела Жанры
В данном разделе выводятся статьи касающиеся музыкальных жанров. При нажатии на изображения к превью статьи, открывается страница статьи в соответствии с рисунком 2.16.
Рисунок 2.16 Страница Жанры
Данная страница во многом повторяет страницу с исполнителями. Такой дублирующий дизайн позволяет рассматривать сайт как единое целое в соответствии с рисунком 2.17.
Рисунок 2.17 Пример развернутой статьи Жанры
На странице с жанрами можно ознакомится с исполнителями играющими в этом жанре, а так же с похожими жанрами.
2.8 Проверка web-сайта на валидность
Для проверки веб-страниц на наличие ошибок и замечаний существует множество путей и способов. Условно они делятся на онлайновые и локальные. Онлайновые предназначены для проверки страниц с помощью браузера через Интернет, а локальные используются для проверки документов на текущем компьютере. http://validator.w3.org предлагает три способа проверки: по адресу, локальному файлу и введенному в форму кода.
Если сайт уже опубликован в Интернете, то проверить лучше всего, введя в текстовое поле адрес страницы. Документы, еще не выставленные в Интернете, можно проверить с помощью формы, «ValidatebyFileUpload» (валидация загруженных файлов). В случаях когда требуется проверить код без сохранения его в отдельный файл пригодится форма для прямого набора текста и отправки его на сервер для валидации
Так как данный сайт не размещен в интернете первый способ проверки на валидность невозможно использовать. Остаются только по локальному файлу и напрямую вставить код. Используем 3 способ через форму, так как это удобней после проверки сразу там же можно исправить предупреждения и ошибки в соответствии с рисунком 2.18.
Рисунок 2.18 Способы проверки на валидность
Валидатор проверяет HTML-код страницы и в случае отсутствия ошибок докладывает о валидности документа
При первой проверки кода на валидность 9 ошибок и 3 предупреждения в соответствии с рисунком 2.19.
Рисунок 2.19 Первая проверка на валидность
После нескольких исправлений все ошибки найденные при проверки на валидацию были устранены, так же устранено 1 из 3 предупреждений в соответствии с рисунком 2.20. Исправление предупреждений не имеет смысла, так как предупреждения не могут повлечь за собой ошибок.
Рисунок 2.20 Успешно пройденная валидность кода
ЗАКЛЮЧЕНИЕ
В результате выполнения курсового проекта цель достигнута, задачи выполнены, реализовано веб-приложение.
Для разработки данного модуля были изучены различное программное обеспечение и среды разработки. В частности базы данных mysql и фреймворкtwitterbootstrap.
Сайт был максимально адаптирован для мобильных приложений и различных разрешений экрана.
В целом проект вышел достаточно продуктивным с направленностью на дальнейшую разработку.
СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ
1. Музыкаhttp://ru.wikipedia.org/wiki/Музыка(Дата присвоенная файлу: 08.12.2012. Актуальная дата: 23.04.2014).;
2. last.fmhttp://ru.wikipedia.org/wiki/Last.fm(Дата присвоенная файлу: 08.12.2012Актуальная дата: 23.04.2014);
3. Отинова И.В., Копнова О.Л., Касимов И.Р. Методические указания «Оформление письменных работ студентами бакалавриата для специальностей 5В070300 «Информационные системы» и 5В011100 «Информатика». – Петропавловск: СКГУ им. М. Козыбаева, 2014. – 100 с.;
4. Adobe PhotoShophttp://fotoredactor.com/soft/25-adobe-photoshop-cs6-130-extended-final-x32-x64-russkoyazychnaya-versiya.html(Дата присвоенная файлу: 08.12.2012Актуальная дата: 23.04.2014).;
5. Denverhttp://www.denwer.ru/(Дата присвоенная файлу: 08.12.2012Актуальная дата: 23.04.2014).;
6. DreamveaverCS6 http://fotoredactor.com/soft/26-adobe-dreamweaver-cs6-2013-russkaya-versiya-programmy.html(Дата присвоенная файлу: 08.12.2012Актуальная дата: 23.04.2014).;
7. CSS 3, http://www.wisdomweb.ru/CSS3/(Дата присвоенная файлу: 08.12.2012Актуальная дата: 23.04.2014) .;
8. HTML5 http://www.php.net/manual/ru/intro-whatis.php(Дата присвоенная файлу: 08.12.2012Актуальная дата: 23.04.2014).;
9. Twitter_Bootstraphttp://ru.wikipedia.org/wiki/Twitter_Bootstrap(Дата присвоенная файлу: 08.12.2012Актуальная дата: 23.04.2014).;
10. Adobe PhotoShop, http://habrahabr.ru/post/178981/ (Дата присвоенная файлу: 07.05.2013. Актуальная дата: 23.04.2014).;
11. Sublime Text, http://mariaonline.com/Sublime_Text (Дата присвоенная файлу: 22.08.2012. Актуальная дата: 23.04.2014).;
12. Notepad++, http://bulgan.ru/software-25.html(Дата присвоенная файлу: 24.12.2011. Актуальная дата: 23.04.2014).;
13. WYSIWYG, https://netology.ru/glossariy/wysiwyg(Дата присвоенная файлу: 05.11.2012. Актуальная дата: 23.04.2014).;
14. Dreamweaver, http://www.enci.ru/Dreamweaver# (Дата присвоенная файлу: 23.10.2012. Актуальная дата: 23.04.2014).;
15. Дронов В.А. Самоучитель AdobeDreamweaverCS5.5. – СПб.: Изд-во БХВ-Петербург, 2012. – 384 с.;
16. MySQL, http://endels.ru/mysql.php(Дата присвоенная файлу: 06.02.2012. Актуальная дата: 23.04.2014).;
17. Гольцман В.И. MySQL 5.0. Библиотека программиста. – СПб.: Изд-во Питер, 2010. – 253 с.;
18. Харрис Э. PHP/MySQL для начинающих. – Минск.: Изд-во Кудиц-Образ, 2005. – 384 с.;
19. JavaScript, http://kk.convdocs.org/docs/index31230 (Дата присвоенная файлу: 12.06.2013. Актуальная дата: 23.04.2014).;
20. Флэнаган Д. JavaScript. Подробное руководство. – СПб.: Изд-во Символ Плюс, 2008. – 992 с.;
21. WykeA. R. JavaScript. – СПб.: Изд-во ДиаСофтЮП, 2002. – 896 с.;
22. Кульгева Н. Лекция 2, wiki.margtu.ru/index.php?wakka=HomePage/20102011/4kurs/PSG/Kul%27geevaNadezhda&show_comments=1 (Дата присвоенная файлу: 01.01.2011. Актуальная дата: 23.04.2014).;
23. Галямов А. Урок 1. Что такое CSS?, http://www.zvirec.com/css_book.php?id=2 (Дата присвоенная файлу: 06.06.2010. Актуальная дата: 23.04.2014).;
24. Макфарланд Д. Большая книга CSS. – СПб.: Изд-во Питер, 2008. – 560 с.;
25. Введение в CSS, http://www.puzzleweb.ru/css/teacher (Дата присвоенная файлу: 22.09.2011. Актуальная дата: 23.04.2014).;
26. Языки разметки WEB-страниц, http://bourabai.kz/dhtml/ (Дата присвоенная файлу: 23.04.2014. Актуальная дата: 23.04.2014).;
27. Хольцнер С. HTML5 10 минут. – М.: Изд-во Вильямс, 2011. – 240 с.;
28. Бен Хенник, HTML и CSS Путь к совершенству. – СПб.: Изд-во Питер, 2011. – 336 с.;
29. Основы HTML, http://html-exp.narod.ru/base.htm (Дата присвоенная файлу: 20.04.2014. Актуальная дата: 23.04.2014).;
30. IEtester, http://win7soft.ru/programming/ietester (Дата присвоенная файлу: 01.06.2012. Актуальная дата: 23.04.2014).
ПРИЛОЖЕНИЕ А
(обязательное)
К пояснительной записке по курсовому проекту прилагается компакт-диск, содержащий:
пояснительную записку к курсовому проекту;
презентацию PowerPoint, к защите курсового проекта;
папку с разработанным проектом.
Разработка Web-приложения «Музыкальный портал»
Курсовая работа по предмету «Программирование»