Файл: Курсовая работа разработка web сайта для школы иностранных языков U. K english содержание.pdf

КУРСОВАЯ РАБОТА
Разработка 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 - Маршруты для ссылок на главной странице