Дипломный проект Web-сайт организации дополнительного образования детей с использованием технологии PHP (laravel)

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

I. Пояснительная записка 3
1.1. Квалификационные характеристики проекта 3
1.2. Классификация и структура веб-сайтов организаций дополнительного образования детей 4
1.3. Адаптивный дизайн и этапы разработки web-сайта 12
1.4. Технологии создания сайтов и выбор площадки для него 15
1.5. Архитектура приложения MVC и структура Laravel 18
II. Проектная часть. Разработка сайта организации дополнительного образования детей «Артишок» 20
2.1. Техническое задание 20
2.2. Разработка сайта 23
2.3. Руководство пользователя 40
Заключение 43
Литература 44
Приложение 46

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

Функции JavaScript и css стили, используемые в нескольких документах, должны находиться в отдельном файле.При разработке дизайна Web-страницы фиксированного размера. Grid система, предоставляемая twitter bootstrap, позволяет с легкостью создать адаптивный дизайн. Адаптивный дизайн важен в связи с тем, что более половины трафика генерируют мобильные устройства.Проектирование начинается с адаптивной версии веб-сайта для мобильных устройств. На этом этапе дизайнеры стремятся правильно передать смысл и основные идеи с использованием небольшого экрана и всего одной колонки. Содержимое при необходимости сокращают, удаляя второстепенные информационные блоки и оставляя самое важное. В качестве иллюстрации пригодности данного подхода можно процитировать бывшего разработчика мобильных приложений дляFacebook:«Изначально я рассматривал мобильное веб-приложение только в качестве вспомогательного сервиса для facebook.com, но, познакомившись с платформой, я быстро убедился, что можно создать версию, которая будет гораздо лучше, чем основной сайт!» (Джо Хьюитт).Но адаптивный дизайн также имеет свои минусы. Рич Брукс – основатель онлайн-издания для предпринимателей, The Marketing Agents. Он опубликовал 5 причин, почему нужно отказаться от адаптивного дизайна. «Сначала займитесь мобильной версией». Внешне это безобидный совет, но правда заключается в том, что дизайн должен разрабатываться в первую очередь для пользователей. По большему счету это связано с тем, что пользователь мобильного устройства решает задачи, отличные от тех, которые решает пользователь ПК.«Зачастую адаптивный дизайн приводит к неоправданному увеличению времени загрузки сайта на мобильных устройствах». Концепция RWD подразумевает, что пользователи всех платформ получают одинаковый контент, оптимизированный под конкретные разрешения экранов. В то же время на сайте может быть масса информации, показывать которую мобильным пользователям нет никакой необходимости. Однако она загружается автоматически, как только они заходят на сайт, и зачастую это происходит в местности со слабым сигналом сотовой связи. Изображения, оптимизированные под настольные компьютеры, — ещё одна проблема. Цитируя Хуана Пабло Сармиенто (Juan Pable Sarmiento), «это наиболее проблемный аспект адаптивного веб-дизайна, так как масштабирование «десктопного» изображения для отображения на экране мобильного устройства предполагает загрузку изображения, оптимизированного для экрана настольного компьютера. Для просмотра полноразмерных изображений на мобильном устройстве приходится загружать неоправданно большие файлы и изменять их размеры под свой экран».«Пользователи не смогут посмотреть полную версию». На большинстве неадаптивных мобильных сайтов внизу страницы присутствует опция «Переключиться на полную версию» или другая аналогичная кнопка. Она позволяет посетителям просматривать сайт для настольных компьютеров, минуя таблицы стилей для мобильной версии.Стремление разработчиков адаптивного веб-дизайна привести всё к единому знаменателю может восприниматься пользователями как давление.«У вас отличный сайт». Если у вас отличный сайт, который привлекает посетителей, то при переезде на адаптивный сайт вам, скорее всего, всё придётся начинать с нуля.Для сайтов, которые уже достаточно эффективны, есть альтернативы получше. Можно создать мобильный сайт (который, разумеется, имеет свои недостатки), чтобы сохранить существующий ресурс в его нынешнем виде, и просто перенаправлять пользователей смартфонов на мобильную версию сайта.«Мобильный трафик вашего сайта невелик». Нет никакой гарантии, что более половины пользователей вашего сайта будут просматривать его с мобильных устройств. Единственный способ узнать точные цифры — зайти в Google Analytics и посмотреть, какая доля трафика вашего сайта приходится на мобильных посетителей, и с какой скоростью растёт их число.Технологии создания сайтов и выбор площадки для негоЧто представляет собой сайт для обычного пользователя, как он его видит?Пользователь видит перед собой самый обычный текст, картинки, видео и т.д. Так называемый контент, им может быть текстовая информация, графические элементы, видео, т.е. какие-то файлы. А раз это файлы, следовательно - они имеют определённый объём и им нужно место для хранения, они должны быть постоянно доступны пользователю. Для выполнения этой задачи существуют компьютеры со специализированным программным обеспечением - серверы.В первой половине девяностых годов многим владельцам сайтов приходилось открывать доступ к своему ресурсу с помощью личного компьютера, однако это было крайне неудобно, ненадежно и дорогостояще. Ведь приходилось оставлять включенным компьютер постоянно, причем обеспечивать его высокоскоростным интернетом, постоянно следить за правильностью работы системы и за нагрузкой на нее. Помимо этого, нужно было разбираться в администрировании системы, в серверных программах и так далее.Хостинг - услуга по предоставлению ресурсов (дискового пространства) для размещения вашего проекта на сервере, постоянно находящемся в глобальной сети. Компании, предоставляющие услуги хранения данных обычно называют хостинг-провайдерами или хостерами.Для размещения сайтов, как правило, используется очень мощный сервер, на котором установлено специальное программное обеспечение, к которому подключён канал высокоскоростного интернета. Данный сервер работает круглосуточно, поэтому ваш интернет-проект будет доступен в любое время суток. Кто-то может предположить, основываясь на этой информации можно самостоятельно сделать себе сервер под хостинг, но, как вы понимаете, это обойдётся вам намного дороже материально и сложнее технически, так как нужны знания администрирования серверов, чем просто приобрести хостинг у профессионалов своего дела.Основной задачей хостинг-провайдера является предоставление качественных услуги для хранения вашего Интернет-проекта на сервере и сделать так, чтобы сайт всегда был доступен посетителям. Именно поэтому нужно тщательно подойти к выбору хостинга. Качественный и надежный хостинг играет основную роль в разработке сайтов. Ведь если сервер, перестанет справляться со своей основной функцией, это может очень плохо отразиться на вашем сайте:Он будет недоступен пользователям или медленно работать, что оставит не самое лучше мнение о вашем проекте;Поисковые системы не смогут индексировать сайт, это может плохо отразиться на продвижении вашего проекта в глобальной сети Интернета.Существует несколько типов хостингов.По условиям предоставления услуг, можно выделить платный и бесплатный хостинг.Бесплатные хостинги - это бесплатная услуга по размещению веб-ресурса или какой-либо другой информации в интернете на серверах хостинг провайдера.Бесплатные хостинги имеют ряд недостатков. Прежде всего это нестабильная работа серверов, которая приводит к тому, что ваш сайт недоступен для посещений. Способности бесплатного хостинга сильно урезаны по сравнению с платным хостингом, поэтому они очень медленны в работе.Многие бесплатные хостинги не поддерживают основные технические характеристики, которые делают сайт современным и актуальным. Техническую поддержку данные компании, как правило, не предоставляют.К минусам бесплатного хостинга также можно отнести рекламу, которую размещает ваш хостинг провайдер. Часто компании предоставляют бесплатный хостинг для рекламы своих услуг.Таким образом, приведя краткую характеристику бесплатных хостингов можно сделать вывод, что для размещения коммерческих сайтов больше подходит платный хостинг.В случае с платным хостингом - вы платите деньги за использование дискового пространства и других сервисов. Платный хостинг удовлетворяет всем необходимым требованиям. Вы оплачиваете сумму, определенную по вашему тарифному плану. Зачастую сумма зависит от качества предоставляемых услуг, а также от выбранного хостинг-провайдера.Выбор качественного хостинга - важная и ответственная задача, т.к. ваш выбор может серьезно повлиять на качество работы Вашего интернет-проекта, и количество времени и сил, затрачиваемых на его поддержку и развитие.Перед выбором хостинг-провайдера необходимо убедиться в надежности провайдера - посмотрите в Интернете отзывы о работе хостинга. Если вы уверены в надежности и стабильности хостинг-провайдера, выберите тарифный план хостинга в соответствии с аппаратными и программными требованиями вашего сайта. Уточните у разработчика вашего сайта требуемую операционную систему, языки программирования, которые используют программные модули сайта, какие базы данных используются вашим сайтом, их число, необходимость доступа к настройкам сервера для вашего сайта, определите максимально возможную посещаемость (определяет нагрузку на сервер).Перед автором была поставлена задача: разработать сайта, за основу возьмем ранее описанные материалы и статьи дипломной работы, а также литературу с тематикой связанной с разработкой сайта. Разработка будет производиться на HTML, JS и PHP. Также для разработки будем использовать бесплатный веб-фреймворк Laravel с архитектурной моделью MVC. Архитектура приложения MVC и структура LaravelШаблон MVC позволяет разделить данные, представление и обработку действий пользователя на три отдельных компонента:модель (Model). Модель предоставляет данные (обычно для View), а также реагирует на запросы (обычно от контроллера), изменяя своё состояние;представление (View). Отвечает за отображение (пользовательский интерфейс);Контроллер (Controller). Интерпретирует данные, введённые пользователем, и информирует модель и представление о необходимости соответствующей реакции.Важно отметить, что как представление, так и поведение зависят от модели. Однако модель не зависит ни от представления, ни от поведения. Это одно из ключевых достоинств подобного разделения, позволяющее строить модель независимо от визуального представления, а также создавать несколько различных представлений для одной модели.Laravel — первый фреймворк, поддерживающий PSR-4. Прямо из коробки Composer автоматически загрузит все классы из каталога app, используя стандарт автозагрузки PSR-4.Это значит, что у вас может быть одно пространство имён для вашего приложения, и вы можете структурировать его, как захотите и как посчитаете логичным. Laravel не требует от вас размещения определённых файлов в определённых папках. Контейнер обратного управления в Laravel — мощный инструмент для управления зависимостями классов. Внедрение зависимостей представляет собой способ снятия жестко закодированных зависимостей класса. Вместо этого зависимости внедряются во время выполнения, обеспечивая большую гибкость, так как реализация зависимостей может быть легко изменена.Вы можете использовать IoC-контейнер в вашем приложении, чтобы сделать всё внедряемым и легко тестируемым с помощью объектов-заглушек. Eloquent ORM, включённая в Laravel, — наиболее мощная реализация шаблона ActiveRecord в PHP. Кроме обычных CRUD-операций в ней есть мягкое удаление, области запросов, отношения, методы доступа и мутаторы, мутаторы дат, наблюдатели модели и многое другое.Проектная часть. Разработка сайта организации дополнительного образования детей «Артишок»Техническое заданиеВведениеРазработать макет web-сайта для организаций дополнительного образования детей. На примере сайта для школы детского танца г. Иркутска «АРТиШОК». НазначениеДанный макет можно будет использовать в организациях дополнительного образования детей. Макет необходим заказчику для последующего представления организации в сети интернет: информация об организации (контакты, адрес, и т.д), новости организации, кадровый состав организации, обратная связь от посетителей, достижения организации, расписание занятий, набор в группы, карта сайта.Функциональные элементы сайтаТребуется создать следующие блоки и страницы сайта:Блок «Меню навигации»: должна представлять из себя горизонтальную панель навигации, которая располагается в верхней части сайта. Данный блок не меняется при переходе на любую страницу сайта.Блок «Контент»: Остальная часть сайта, располагается ниже меню навигации. Данный блок содержит информацию, которая меняется при переходе между страницами сайта и соответствует описанию в техническом задании.Страница «Главная»: состоит из слайдшоу и списка преподавателей.Страница «Новости»: состоит из множества блоков, в каждом из которых содержится название новости и краткий текст основного содержания новости. Также существует кнопка для перехода к полной версии новости, где текст не сокращен и отображается дата создания новости.Страница «Галерея»: содержит в себе фото и видео контент. Который можно просматривать как на полный экран, так и в превью.Страница «Достижения»: на данной странице отражаются международные, всероссийские, региональные (областные) и городские достижения. Обязательно разделение на категории.Страница «Репертуар»: содержание должно быть разделено на две таблицы. Таблица «действующие номера» и таблица «номера, снятые с репертуара». В каждой из таблиц содержится название таблицы, ниже перечисление номеров, относящихся к соответствующей категории.Страница «Расписание»: состоит из горизонтальных блоков. Каждый из которых содержит ФИО педагога (также его роль, если педагогов 2 или более), группы и возраст детей, место проведения занятий, расписание занятий. ФИО и образование преподавателя получаем из базы данных, которые можно внести в личном кабинете.Страница «Набор»: требований нет.Страница «Контакты»: к расположению элементов требований нет. Обязательно наличие карты 2gis с адресом и названием организации, а также контакты (телефон, e-mail и т.д).Страницы «Авторизация»: вход производится по полям e-mail и пароль.Страница «Личный кабинет»: доступ имеют только авторизованные пользователи, обязательна возможность перехода на главную и выход пользователя. В блоке основного контента размещается блок, позволяющий изменять содержание блока расписание, а также новости, аудитории, преподавателей, группы.Навигация на сайтеПользовательский интерфейс дизайн-макета должен обеспечивать наглядное, интуитивно понятное представление структуры размещенной на сайте информации, быстрый и логичный переход к разделам и страницам. Навигационные элементы должны обеспечивать однозначное понимание пользователем их смысла: ссылки на страницы должны быть снабжены заголовками и комментариями (подсказками), условные обозначения соответствовать общепринятым. Графические элементы навигации должны быть снабжены альтернативной подписью.Система должна обеспечивать навигацию по всем доступным пользователю ресурсам и отображать соответствующую информацию. Для навигации должна использоваться система контент-меню, которое должно представлять собой текстовый блок (список гиперссылок). С каждой страницы дизайн-макета должен быть обеспечен переход (установлена гиперссылка) на главную страницу. Сайт должен содержать страницу "Содержание" (карта сайта).Головная (начальная) страница сайта должна содержать гиперссылки, обеспечивающие переход с нее на не менее чем 90% разделов сайта, но не более чем 200 гиперссылок.Основные элементы навигации (присутствуют на каждой странице):•Основное меню сайта, отображает основные разделы сайта•Меню раздела сайта, отображает подразделы.Требования к визуальному отображениюСтиль: основная часть в чёрно-белых цветах.Размер шрифта: Размер шрифта сайта - 14 (для оформления текста). Размер шрифта для оформления заголовков, названия страниц и т.д. не оговаривается. Вид (название) шрифта не оговаривается.Информационное наполнение дизайн-макета: Каждая страница дизайн-макета должна содержать информационное наполнение. Исполнитель должен использовать информацию, находящуюся на сайте http://artishok-irk.ru и соответствующую разрабатываемому разделу дизайн-макета. Все рисунки объемом более 1 Кб должны быть выполнены с замещающим текстом. Формат всех рисунков gif или jpg (jpeg). Требования к параметрам технических средствДизайн-макет должен просматриваться без горизонтальной прокрутки в окне браузера при разрешении монитора 1024x768 пикселей и выше. Основной режим мониторов, на которых будет просматриваться сайт: 15 разрядов цветов и выше (число цветов 65536 и выше). Дизайн-макет должен одинаково отображаться в следующих типах браузеров:•IE 5.5 и выше,•Opera 9 и выше,•FireFox 2 и выше.•Google Chrome 2 и выше.Разработка сайта Разработка начинается с установки фреймворка laravel. Для того чтобы его установить, нам нужно:Зайти на сайт (https://getcomposer.org/).Установить в нужную нам папку.Зайти в командную строку, выбрать папку с файлом composer с помощью команды cd. Работа с командной строкой всегда будет проводиться в этой директории. Пример: “cd c:/site”Там же ввести команду «composer create-project --prefer-dist laravel/laravel blog». Где «blog» - имя проекта и может быть изменено на любое.Далее переходим к настройке подключения к базе данных. Для простоты изменим файл (.env), он находится в корневой папке проекта. Нам необходимо изменить 4 строки: DB_HOST=localhostDB_DATABASE=artishockDB_USERNAME=rootDB_PASSWORD=secretГде DB_HOST – имя хоста, DB_DATABASE – имя базы данных, DB_USERNAME – имя пользователя для доступа к базе данных, DB_PASSWORD – пароль пользователя для доступа к базе данных.Следующий файл находится в папке config (все пути даются относительно корневой папки проекта) и называется он database.php, в нем находим строку 'mysql' => [… Меняем содержимое между “[“ и “]” на 'driver' => 'mysql','host' => env('DB_HOST', 'localhost'),'database' => env('DB_DATABASE', 'forge'),'username' => env('DB_USERNAME', 'forge'),'password' => env('DB_PASSWORD', ''),'charset' => 'utf8','collation' => 'utf8_unicode_ci','prefix' => '','strict' => false,Для удобства верстки подключаем библиотеку Forms & Html. Чтобы подключить её, нам необходимо: Открыть файл composer.json, в строке require добавить «"laravelcollective/html": "5.1.*"» (без первой и последней ковычек).Открыть командную строку (cmd), выбрать папку с проектом (как делали ранее). Прописать команду «composer update» (без ковычек).В файл располагающийся по пути config/app.php, в строке providers добавить Collective\Html\HtmlServiceProvider::classВ тот же файл, но в строке aliases добавить две строки 'Form' => Collective\Html\FormFacade::class и 'Html' => Collective\Html\HtmlFacade::classТеперь можно использовать данную библиотеку, например: «{!! Html::style('css/main.css') !!}»После переходим к настройке routes (маршрутов). Файл настройки маршрутов находится по пути app\Http\routes.php. Здесь мы прописываем следующее (см. рис.4, с.25)Рис.4.Тем самым мы создали красивые URL для наших страниц.Далее переходим к созданию страниц в папку resources/views, здесь создаем папку main и в ней файлы «*.blade.php». Встроенная в laravel система «blade» дает нам возможность использовать красивый синтаксис для вставки PHP кода. Также он содержит набор функций для быстрого выполнения часто используемых задач. Шаблоны блейд кэшируются, поэтому они очень быстры в работе. В папке main создаем макет-страницу «mainlayout.blade.php» и дочерние (см. рис.5, с.26).Рис.5.Рис.6. В страницу макет пишем «@yield('sidecontent')». Где yield указывает место куда будет вставляться контент с других страниц, а sidecontent выступает в роли идентификатора, который покажет какую область дочерних страниц мы будем вставлять. Но для завершения нам необходимо показать эти области в дочерних страницах (см. рис.6, с.26). Extends указывает нам страницу макет, а section и endsection на область которая будет включаться в макет-страницу.Далее переходим к созданию меню в макет-странице, это очень удобно ведь нам не придется вставлять код в каждую новую страницу т.к. меню будет находится в макет-странице.Все предыдущие действия сейчас помогут нам в создании меню: маршруты прописаны, макет-страница и дочерние страницы созданы. Остается прописать путь к маршруту (см. рис.7)Рис.7.Для удобства записываем meta данные в отдельный файл и привязываем его к макет странице с помощью команды «@include("blocks.htmlmeta")». Код (см. рис.8, с.28) помещаем в папку resources/views/block, файл называем «htmlmeta.