ВКР. Разработка web-сайта для школы иностранных языков U.K English. Курсовая работа разработка web сайта для школы иностранных языков U. K english содержание
 Скачать 335.96 Kb.
|
|
КУРСОВАЯ РАБОТА Разработка web- сайта для школы иностранных языков U.K English СОДЕРЖАНИЕ Введение ................................................................................................................... 2 1 Теоретическая часть ............................................................................................. 3 1.1 Общие сведения о веб-программирование ................................................. 4 1.2 Описание программных средств и сред для разработки веб-сайта ......... 5 2 Практическая часть .............................................................................................. 8 2.1 Подготовительный этап разработки ............................................................ 8 2.2 Разработка дизайна ....................................................................................... 9 2.3 Программная разработка ............................................................................ 12 Заключение ............................................................................................................ 20 Список использованных источников .................................................................. 20 Приложение А(обязательное) Бриф .................................................................... 21 Приложение Б (обязательное) Макеты сайта ..................................................... 21 Приложение В (обязательное) Листинг программы.......................................... 24 2 ВВЕДЕНИЕ Интернет стал популярной средой для коммуникации. Потребности людей находят свое решение в предложениях, которые размещены на различных площадках. Компании, предприятия, небольшие организации – все они пытаются предоставить доступ к своим услугам через интернет, который обеспечивает расширение и привлечение новой аудитории. Каналы рекламы позволяют прорекламировать товары и услуги в любой точке земного шара. Массовая доступность, вызвала не только повышение спроса и предложение, но и увеличила конкуренцию. Один из способов увеличить свой рейтинг и популярность, а, следовательно, и выручку, создание Web- сайта, на котором будет размещена информация, выделяющая компанию, среди прочих, описывающая достоинства и преимущества. Свой собственный стиль и дизайн способны создать не только доверительное отношение у пользователей, но и узнаваемость. Современные сайты позволяю владельцам не только хранить данных о своих клиентах, автоматизировать процесс оплаты товаров, значительно сокращая время работы сотрудников, но и производить аналитику целевой аудитории, для размещения рекламы. Цель данной курсовой работы является создание сайта для школы иностранных языков, который предоставит полную информацию о услугах, предоставляемых организацией. Задачи создания сайта: – разработка сайта с использованием современных программных средств; – разработка современного дизайна оформления сайта, делающего его запоминающимся; – создание интуитивно-понятного интерфейса; –создание форм отправки заявок на обучение; 3 –создание личного кабинета, для учеников школы, который бы информировал их о предстоящих уроках; –создание системы информирования преподавателей о новых заявках. 1 Теоретическая часть 4 1.1 Общие сведения о веб-программирование Веб-программирование — раздел программирования, ориентированный на разработку веб-приложений. Программы пишутся на языках веб-программирования — это те языки, которые в основном предназначены для работы с веб-технологиями. Языки веб- программирования можно условно разделить на две пересекающиеся группы: клиентские и серверные. Программы на клиентских языках обрабатываются на стороне пользо- вателя, как правило, их выполняет браузер. Это и создает главную проблему клиентских языков — результат выполнения программы (скрипта) зависит от браузера пользователя. То есть, если пользователь запретил выполнять кли- ентские программы, то они исполняться не будут, как бы ни желал этого про- граммист. Кроме того, может произойти такое, что в разных браузерах или в разных версиях одного и того же браузера один и тот же скрипт будет выпол- няться по-разному. С другой стороны, если программист возлагает надежды на серверные программы, то он может упростить их работу и снизить нагруз- ку на сервер за счет программ, исполняемых на стороне клиента, поскольку они не всегда требуют перезагрузку (генерацию) страницы. В серверных языках пользователь дает запрос на какую-либо страницу (переходит на неё по ссылке или вводит адрес в адресной строке своего брау- зера), то вызванная страница сначала обрабатывается на сервере, то есть вы- полняются все программы, связанные со страницей, и только потом возвра- щается к посетителю по сети в виде файла. Этот файл может иметь расшире- ния HTML, PHP, ASP, Perl, XML, DHTML, XHTML. Важной стороной рабо- ты серверных языков является возможность организации непосредственного взаимодействия с системой управления базами данных (или СУБД) — серве- ром базы данных, в которой упорядоченно хранится информация, которая может быть вызвана в любой момент. 5 Один из вариантов построения веб-приложений — это использование специального каркаса. Web application framework (WAF) — каркас, предназначенный для создания динамических веб-сайтов, сетевых приложений, сервисов или ресурсов. Он упрощает разработку и избавляет от необходимости написания рутинного кода. Многие каркасы упрощают доступ к базам данных, разработку интерфейса, и также уменьшают дублирование кода Большая часть каркасов веб-приложений реализует шаблон проектирования Model-View-Controller (MVC). Однако, также могут использоваться и другие шаблоны, например, Model-View-Presenter (Backbone.js) или Model-View-ViewModel (Knockout.js). Model-View-Controller (MVC, «Модель-Представление-Контроллер», «Модель-Вид-Контроллер») — схема разделения данных приложения, пользовательского интерфейса и управляющей логики на три отдельных компонента: модель, представление и контроллер — таким образом, что модификация каждого компонента может осуществляться независимо. Модель предоставляет данные и реагирует на команды контроллера, изменяя своё состояние. Представление отвечает за отображение данных модели пользователю, реагируя на изменения модели. Контроллер интерпретирует действия пользователя, оповещая модель о необходимости изменений. 1.2 Описание программных средств и сред для разработки веб- сайта Создание сайта предполагает комплексный подход к разработке. Если раньше сайты были написаны только на HTML с использованием некоторых стилей CSS, то сейчас написание многофункционального сайта, включает в себя не только статическое представление, но и динамическое взаимодействие пользователей, хранение информации и ее использование. В рамках данной курсовой работы, для создания сайта я выбрала следующие инструменты: 6 – PhpStorm (интегрированная среда разработки на PHP с интеллектуальным редактором, которая глубоко понимает код, поддерживает PHP 7.0, 5.6, 5.5, 5.4 и 5.3 для современных и классических проектов, обеспечивает лучшее в индустрии авто дополнение кода, рефакторинги, предотвращение ошибок налету и поддерживает смешивание языков); – Figma (популярный кроссплатформенный графический редактор для UX UI дизайнеров и веб разработчиков, с помощью которого можно создавать дизайн сложных интерфейсов, веб сайтов и мобильных приложений); – Open Server Panel (портативная программная среда, созданная специально для веб-разработчиков с учётом их рекомендаций и пожеланий. Программный комплекс имеет богатый набор серверного программного обеспечения, удобный, многофункциональный продуманный интерфейс, обладает мощными возможностями по администрированию и настройке компонентов); – HTML (язык разметки гипертекста, с его помощью создается структура веб страницы); – CSS (формальный язык описания внешнего вида документа (веб- страницы), написанного с использованием языка разметки); – PHP (Hypertext Preprocessor «PHP: препроцессор гипертекста»; первоначально PHP/FI, скриптовый язык общего назначения, интенсивно применяемый для разработки веб-приложений); – JavaScript (динамический скриптовый язык программирования высокого уровня); – phpMyAdmin (веб-приложение с открытым кодом, написанное на языке PHP и представляющее собой веб-интерфейс для администрирования СУБД MySQL, позволяет через браузер и не только осуществлять администрирование сервера MySQL, запускать команды SQL и просматривать содержимое таблиц и баз данных, позволяет управлять СУБД MySQL без непосредственного ввода SQL команд); 7 – Spatie/Laravel-permission (пакет позволяет управлять разрешениями и ролями пользователей в базе данных); – Composer (пакетный менеджер для PHP, для поиска и установки библиотек по их названию, избавляет от необходимости самостоятельно искать библиотеки, скачивать, распаковывать, разрешать зависимости — все эти задачи он берёт на себя); – Lavarel (бесплатный web-Фреймворк с открытым кодом, предназначенный для разработки с использованием архитектурной модели MVC). У каждого проекта Laravel есть конфигурация. В информатике под конфигурацией понимают определенный набор комплектующих, исходя из их предназначения, номера и основных характеристик. Зачастую конфигурация означает выбор аппаратного и программного обеспечения, прошивок и сопроводительной документации. Конфигурация влияет на функционирование и производительность компьютера. Все файлы конфигурации для платформы Laravel хранятся в config каталоге. Каждый вариант задокументирован, поэтому вы можете свободно просматривать файлы и знакомиться с доступными вам опциями. Эти файлы конфигурации позволяют настраивать такие вещи, как информация о подключении к базе данных, информация о почтовом сервере, а также различные другие основные значения конфигурации, такие как часовой пояс приложения и ключ шифрования. Корневой каталог Laravel включает в себя: – app каталог содержит основной код приложения; – bootstrap каталог содержит app.php файл, в этом каталоге также находится cache каталог, который содержит файлы, созданные платформой для оптимизации производительности, такие как файлы кэша маршрутов и служб; – config каталог, как следует из названия, содержит все файлы конфигурации вашего приложения; 8 – database каталог содержит миграции базы данных; – public каталог содержит index.php файл, который является точкой входа для всех запросов, поступающих приложение и настраивает автозагрузку, в этом каталоге также находятся активы, такие как изображения, JavaScript и CSS; – resources каталог содержит папку View, которая отвечает за отрисовку изображений; – routes каталог содержит все определения маршрута для приложения; – storage каталог содержит журналы, скомпилированные шаблоны ответов, сеансы на основе файлов, кэш - память файлов, а также другие файлы, созданных в рамках, каталог может быть использован для хранения любых файлов, генерируемых приложением; – tests каталог содержит автоматизированные тесты; – vendor каталог содержит Composer зависимость. 2 Практическая часть 2.1 Подготовительный этап разработки 2.1.1 Создание брифа 2.1.2 Создание структуры карты сайта. Карта сайта (sitemap) - это файл, размещенный на вашем сайте, в котором вы перечисляете отдельные страницы вашего сайта. Поисковые системы используют его, чтобы понять структуру, в то время как пользователи могут использовать его для быстрого поиска определенных страниц на вашем сайте. 9 HTML карта сайта — это статическая HTML-страница со ссылками на все основные страницы сайта. Такой формат карты больше ориентирован на посетителей сайта и позволяет перейти на любую страницу в 1 клик. Перед созданием статическая HTML-страница необходимо создать структуру сайта. Структуру сайта можно отобразить в различных приложениях, с использованием различных технологий, в данной курсовой работе я использовала технологию Mindmap, которая наглядно позволяет отображать связи между страницами и всю структуру сайта. Рисунок 1 - Наглядная структура сайта Структура будущего сайта довольна простая, поэтому необходимость размещения карты на сайте низкая, целесообразнее предоставлять карту по желанию пользователей. 2.2 Разработка дизайна 2.2.1 При разработке фирменного дизайна сайта был создан ряд требований. 10 1)Цвет фона страниц допускает только 2 варианта: а) black; б) white. 2) Цвет текста может быть: 1) lavender blush; 2) gray; 3) black. Допускает небольшое отклонение от данных цветов. 3)Требования к шрифту: a) font-weight: 600; b) letter-spacing: .1rem; d) text-decoration: none; e) text-transform: uppercase. Размер шрифта может быть любой, в зависимости от контекста и места расположения. На отдельных страницах разрешено не использовать свойство «text-transform: uppercase». 4)Цвет кнопок разрешается делать любым. Графические изображения, повторение которых создано с цель создания единого стиля: Рисунок 2 - Кляксы розовые 11 Рисунок 3 - Цветы розовые 2.2.2 Разработка макета является необходимой частью после того как разработан бриф. Макет должен быть наглядным отображением будущего дизайна блоков и функционала. При разработке макета сайта, можно изучить сайты конкурентов. Проанализировав все достоинства и недостатки можно определить, чем можно выделиться на фоне конкурентов, а что лучше не делать. Главное, не допускать плагиата чужого дизайна. Важно отметить что контент напрямую влияет на восприятие сайт и его нужно учитывать при разработке дизайна. На этапе создания макета можно создавать несколько возможных вариантов дизайна. Благодаря многообразию вариантов, можно выделять сильные и слабые стороны в дизайне, а применять наилучшие варианты в создании конечного продукта. При создании макетов для данной курсовой работы я использовала приложение Figma, в которой разработала статические макеты, приняв во внимание то, что при разработке кода, будет использоваться Bootstrap, для адаптивности просматриваемых страниц. Макеты разработаны на поле 1440*1024 px с применением 12 колоночной сетки. Варианты макетов представлены в приложение 2. 12 2.3 Программная разработка 2.3.1 Этап подготовки. Программная разработка сайта первым пунктом включает в себя подключение программных средств. Для создания клиент-серверного приложения необходимо установить сервер на свой компьютер. В данной работе используется Open Server, также современные технологии phр, которые позволяют создать сервер и запускать сервер командой php artisan serve. В инструментах Open Server создаем базу данных в phpMyAdmin, которую подключим к сайту. Рисунок 4 - Инструменты Open Server Перед созданием проекта, необходимо убедиться, что фреймфорк Laravel и composer установлены на компьютер. Располагать проект будем на диске С, в папке domains. Для того, чтобы установить каркас приложения в нужной нам папке, необходимо через консоль открыть папку, прописав путь к ней, и после этого выполнить команду «composer create-project laravel/laravel example-app». Для того чтобы убедиться, проект создан заходим в папку domains и находим наш проект. Вариант правильной конфигурации представлен на рисунке 13 Рисунок 5 - Каркас сайта 2.3.2 Этап разработки главной странице. В папке view находим шаблон welcome.blade.php и создаем главную страницу, размешаем ссылки на второстепенные страницы и создаем адаптивный дизайн, в соответствии с макетом. Для того чтобы ссылки работали, прописываем маршруты для каждой из них. Маршруты прописываем в файле routs/web.php. Рисунок 6 - Маршруты для ссылок на главной странице 14 Рисунок 7 - Ссылки на главной странице 2.3.3 Этап создание входа и регистрации на сайте. Для всех версий Laravel, которые выше 6, существует специальных команды, которые создают, шаблонные файлы регистрации и входа, а также таблички, подключенных к нашей базе данных в phpMyAdmin. Команды: 1.composer require laravel/ui; 2.php artisan ui vue –auth; 3.php artisan migrate. Первая команда устанавливает каркас аутентификации, который расположен в пакет laravel/ui. Вторая команда используется для генерации шаблонов регистрации, входа, выхода и сброса пароля, а также добавления маршрутов аутентификации. Кроме того, сгенерируется HomeController для обработки запросов после входа в систему. Шаблоны будут расположены в отдельной папке resources/views/auth. Команда ui также создаст папку resources/views/layouts, содержащую базовый шаблон для вашего приложения, основанный на CSS-Фреймворке Bootstrap. Если шаблоны будут загружаться без стилей, то нужно установить и собрать фронтенд- зависимости, используя следующие команды: 1.npm install; 2npm run dev. Третья команда, создает таблицы, в нашей базе данных, в которых будет сохраняться информация о пользователях. После того, как все создано, главная страница сайта должна выглядеть так, как представлено на рисунке 15 Рисунок 8 - Главная страница сайта 2.3.4 Этап распределение ролей пользователей после этапа регистрации, включает в себя несколько этапов: 1.Скачивание пакета Laravel permission; 2.Установка данного пакета в свой проект через composer командой «composer require spatie/laravel-permission», пример представлена на рисунке Рисунок 9 - Пример выполненной команды 3.Добавление провайдера в классе providers, в файле app.php, который находится в директории Config; 16 4.Публикация файла конфигурации config/permission.php с помощью команды «php artisan vendor: publish -- provider="Spatie\Permission\PermissionServiceProvider»; 5.Создание таблиц доступа в нашей базе данных командой «php artisan migrate»; Рисунок 10 - Результат выполненной команды 6. Создание ролей через командную строку, данный сайт предполагает наличие 3 ролей: администратор, учитель, пользователь. На рисунке представлен результат выполненной команды, которая создала роль администратора. По аналогии создаются роли "user" и "teacher"; Рисунок 11 - Создание роли "admin" Рисунок 12 - Таблица с ролями 7.Автоматические присвоение роли пользователя всем зарегистрированным пользователям, через функцию в контроллере. Рисунок 13 - Функция, присваивающая статус пользователя Самостоятельно необходимо назначить пользователя администратором и учителями. После этапа разработки этим пользователем отдается пароль и логин для доступа на сайт. 17 2.3.5 Этап распределение прав доступа после авторизации включает в себя добавление условия между условными операторами if endif в шаблон home.blade.php. После условия HasRole в скобках необходимо написать роль, а между условными операторами информацию, которую увидит пользователь с указанной ролью. На рисунке 111 представлено предоставление прав доступа для пользователей с ролью учителя. По аналогии права предоставляются администратору и пользователю. Рисунок 14 - Доступ для пользователя с ролью учителя 2.3.6 Этап создание формы для отправки заявки на обучение, является важным этапом, так-как это позволяет снизить время на конверсию заявки и оптимизировать поток заявок. Для создания формы, потребуется создать 4 поля для ввода информации, с левой стороны должен располагаться текст информирующий и помогающий заполнить форму. Форму размещаем на отдельной странице, ссылка на нее размещена на главной странице и называет «связаться с нами». При разработке дизайна используем Bootstrap и макеты, которые были разработаны заранее. Конечный вариант представлен на рисунке 18 Рисунок 15 - Готовый вариант страницы с формой для отправки заявок После того как страница создано, необходимо произвести ее подключение к базе данных. Подключение включает в себя несколько шагов: 1.Создание контроллера и функции в нем, которая бы подтверждала отправку данных. Функцию можно назвать как угодно, в данном случае она называется «submit»; 2.Создание модели для будущей таблице в базе данных, куда будут отправляться заявки с помощью команды «: php artisan make:model Connection –m». В созданной модели с помощью метода up(), посредством Schema::create() создаётся таблица «connections» и указываются поля, которые будут созданы при миграции; Рисунок 16 - Создание таблицы в базе данных 3.Выполнение миграции посредством команды «php artisan migrate». После выполнения команды в базе данных создается таблица "Connection" 19 Рисунок 17 - Структура таблицы "Connection" 4.Добавление маршрута к форме, для передачи данных в таблицу "Connection"; 5.Создание функции в контроллере для передачи данных по полям формы, которые должны совпадать с полями в нашей таблице. Пример функции представлен на рисунке 111; Рисунок 18- Функция для передачи данных с формы в таблицу Результатом выполнения этих шагов, является подключенная форма к базе данных. 2.3.7 Этап вывода информации о заявках для пользователей с ролью учитель или администратор с целью информирования, включает в себя несколько этапов: 1. Создание маршрута, который бы перенаправлял нас на страницу с данными; 2. Добавление ссылки в шаблоне home.blade.php, которая бы вела на страницу с данными из базы данных; 3. Создание функции в контроллере, которая будет выводить данных на страницу. Функцию можно называть как угодно, в данной работе функция названа allData; 4. Подключение к данным в таблице «Connection»; 20 5. Создание цикла, которые будет проходить по всем записям в таблице «Connection». Пример представлен на рисунке 111 ; Рисунок 19 - Цикла для вывода данных Результатом выполнение всех этих действий является рабочая страница, с выводом входящих заявок. 2.2.7 Создание расписания для пользователя с ролью Админ. Для хранения информации о всех занятия предполагается создание формы “Создание расписания”, которое будет отображать уроки для каждого преподавателя? В отдельности, с возможностью просматривать общее расписание на день. 1) Создается форма, по такому-же принципу, как и с обратной связью. 2) Создается контроллер, модель, миграция и подключение к базе данных. 3) Выводится информация на отдельный лист со всеми уроками. информация ЗАКЛЮЧЕНИЕ СПИСОК ИСПОЛЬЗОВАНННЫХ ИСТОЧНИКОВ 1. https://tproger.ru/translations/web-frameworks-how-to-get-started/ 2. https://laravel.com/docs/8.x 3. https://wiki2.org/ru/ 21 4. https://inweb.ua/blog/what-is-sitemap/ карта сайта ПРИЛОЖЕНИЕ А (обязательное) Бриф ПРИЛОЖЕНИЕ Б (обязательное) Макеты сайта 1)Макеты главной страницы: 22 2)Макеты поля регистрация/вход: 23 3)Макет раздела услуги: 24 4)Макеты раздела с обратной связью: 5)Макет страницы с отзывами. ПРИЛОЖЕНИЕ В (обязательное) Листинг программы 25 |