практика
.docxМИНИСТЕРСТВО НАУКИ И ВЫСШЕГО ОБРАЗОВАНИЯ РОССИЙСКОЙ ФЕДЕРАЦИИ
федеральное государственное автономное образовательное учреждение высшего образования
«САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ АЭРОКОСМИЧЕСКОГО ПРИБОРОСТРОЕНИЯ»
Кафедра проблемно-ориентированных вычислительных компелексов
ОТЧЁТ ПО ПРАКТИКЕ
ЗАЩИЩЁН С ОЦЕНКОЙ
РУКОВОДИТЕЛЬ
Доцента, к.т.н. А.С. Васильевский
должность, уч. степень, звание подпись, дата инициалы, фамилия
ОТЧЁТ ПО ПРАКТИКЕ
практика
выполнен
фамилия, имя, отчество обучающегося в творительном падеже
по направлению подготовки 09.03.03 Прикладная информатика
код наименование направления
наименование направления
направленности 01 Информационная сфера
код наименование направленности
наименование направленности
Обучающийся группы №
номер подпись, дата инициалы, фамилия
Санкт–Петербург 2022
ИНДИВИДУАЛЬНОЕ ЗАДАНИЕ
на прохождение производственной практики обучающегося направления подготовки/ специальности 09.03.03 Прикладная информатика
Фамилия, имя, отчество обучающегося:
Группа:
Тема индивидуального задания:
Исходные данные:
Разработка и реализация веб-приложения проводится средствами системы управления контентом.
Веб-приложение состоит из статических страниц, наполненных информационным контентом, соответствующим выбранной предметной области.
Разработка веб-страниц проводится через административную панель с помощью добавления плагинов и других компонентов, необходимых для реализации поставленной задачи.
Публикация сайта в сети Интернет.
Содержание отчетной документации:
5.1. индивидуальное задание; 5.2. отчёт, включающий в себя:
титульный лист;
материалы о выполнении индивидуального задания (содержание определяется кафедрой);
выводы по результатам практики;
список использованных источников.
Срок представления отчета на кафедру: «__» июля 2021г.
Руководитель практики
____________________ _____________________
должность, уч. степень, звание подпись, дата инициалы, фамилия
Задание принял к исполнению:
Обучающийся
дата подпись инициалы, фамилия
Санкт–Петербург 2022
Оглавление
Настройка основных параметров сайта, удаление страниц, создание и настройка пользователей. 7
Настройка сайта 12
Вывод: 26
Список используемых источников: 26
Цель работы:
Целью данной работы является получение навыков работы с CMS WordPress и создание на его основе сайта-визитки для вечеринки с возможностью предоставления контактных данных для записи на мероприятие.
Для реализации задания на практику были выбраны следующие программы и системные средства:
XAMPP версии 8.0.8 (содержит в себе MySQL и Apache) и WordPress версии 5.8.
Локальная сервер на базе домашнего ПК: Windows 10, 16 Gb RAM, Intel Core i7-3770, GTX 1050ti.
Установка XAMPP и WP.
C официального сайта XAMPP я скачала последнюю версию программы (8.1.1) далее успешно инсталлировала её.
Рис. 1. Скриншот панели XAMPP-control
Запустила Apache и MySQL на панели XAMPP-control.
Рис. 2. Скриншот панели XAMPP-control с запущенными Apache и MySQL
После установки и запуска XAMPP открываю phpMyAdmin по ссылке http://localhost/phpmyadmin.
Рис. 3. Скриншот начальной страницы phpMyAdmin
Создаю базу данных guap с сопоставлением utf8_general_ci.
Рис. 4. Скриншот панели с базами данных
Для установки WordPress перехожу по ссылке http://localhost/guap/wp-admin/setupconfig.php, предварительно скачав с официального сайта архив с WordPress версии 5.8.3 и распаковав его в папку C:\xampp\htdocs\guap. В появившемся окне выбираю русский язык и вижу окно с дальнейшими инструкциями (рис 5).
Рис. 5. Приветственное окно WP
Заполняю необходимые данные в следующем окне.
Рис. 6. Заполнение данных в соответствии с требованиями
При нажатии кнопки «Отправить» происходит ошибка.
Рис. 7. Страница с критической ошибкой
К сожалению, попытки установить XAMPP версии 8.1.1 и WordPress версии 5.8.3 и 5.7.1 приводили к критической ошибке, которая аналогично воспроизводилась на четырёх устройствах и не решалась представленными на оф. сайте WP методами. Поэтому было принято решение установить XAMPP версии 8.0.8 и WP версии 5.8.
Повторив предыдущие шаги установки для данной сборки я попала на страницу завершения первой части установки WP.
Рис. 8. Завершение первой части установки WP
Заполняю необходимые данные о сайте и пользователе в следующем окне.
Рис. 9. Регистрация пользователя сайта WP
Рис. 10. Завершение установки WP
Рис. 11. Основное меню панели управления WP
Рис. 12. Первая страница созданного сайта
Настройка основных параметров сайта, удаление страниц, создание и настройка пользователей.
Рис. 13. Основные настройки сайта
Рис. 14. Настройки чтения
Рис. 15. Настройки обсуждения
Рис. 16. Добавление нового пользователя
Рис. 17. Изменение роли пользователя
Рис. 18. Добавление аватара пользователя с помощью сервиса Gravatar
Рис. 19. Результат добавления и редактирования пользователей
Рис. 20. Удаление пользователя
Рис. 21. Удаление виджетов «До»
Рис. 22. Удаление виджетов «После»
Рис. 23. Удаление лишних на данном этапе страниц сайта
Настройка сайта
Для того, чтобы примерно представлять, как должен выглядеть конечный сайт, я создала его макет в графическом онлайн-редакторе Figma. Для создания фонового изображения сайта дополнительно использовался Adobe Photoshop.
Рис. 24. Примерный макет будущего сайта Чтобы реализовать дизайн устанавливаю тему сайта Twenty Twenty-One.
Рис. 25. Активация темы Twenty Twenty-One
Рис. 26. Загрузка фонового изображения
Рис. 27. Добавление иконки сайта
Рис. 28. Удаление лишних элементов станицы и редактирование заголовка
Рис. 29. Внешний вид главной страницы после внесения изменений
Для изменения шрифта на сайте устанавливаю плагин Twentig.
Рис. 30. Установка плагина смены шрифтов
Рис. 31. Настройка шрифтов
Далее заполняю сайт информацией и проставляю интервалы.
Рис. 32. Процесс заполнения сайта информацией
Рис. 33. Добавление и редактирование галереи изображений
Рис. 34. Добавление ютуб-ролика на сайт
Рис. 35. Добавление слайдера с отзыва по средствам внедрения ссылки на imgur
Рис. 36. Добавление плагина Ninja Forms для создания контактных форм
Рис. 37. Процесс создания контактной формы
Рис. 38. Добавление контактной формы на сайт с помощью шорткода
Рис. 39. Добавление ссылок на соцсети
Я решила не создавать дополнительную страницу для регистрации участников, а создать HTML-якорь со ссылкой на контактную форму. Для этого я задала HTML-якорь заголовку, предшествующему контактной форме.
Рис. 40. Добавление HTML-якоря
Рис. 41. Добавление кнопки со ссылкой на контактную форму
Важно, чтобы пользователь, зайдя на главный экран, сразу понимал расположение мероприятия, поэтому я добавила ссылку на 2ГИС с местом проведения мероприятия.
Рис. 42. Добавление меню с ссылкой на карту
Рис. 43. Начальный блок сайта с названием, временем и местом проведения мероприятия, ссылкой на карту и ссылкой на контактную форму
Рис. 44. Блок сайта с базовой информацией о мероприятии
Рис. 45. Блок сайта с галереей фото мероприятия
Рис. 46. Блок сайта с видео
Рис. 47. Блок сайта со слайдером отзывов
Рис. 48. Блок сайта с формой обратной связи
Рис. 49. Блок сайта со ссылкой на соцсети
Вывод:
Я научилась работать с XAMPP и CMS WordPress, получила начальные навыки создания персональных сайтов, познакомилась с работой плагинов WordPress. Тем не менее, самым главным и точно запомнившимся мне на всю жизнь выводом из данной работы будет то, что версия, указанная на панели xampp-control является версией самой панели, а не XAMPP.
Список используемых источников:
Сайт: ХАМРР https://www.apachefriends.org/ru/index.html
Сайт: WordPress https://ru.wordpress.org
Методичка «СИСТЕМА УПРАВЛЕНИЯ КОНТЕНТОМ WORDPRESS
Методические указания по выполнению практических заданий»
Составители: А. В. Аграновский, Н. Н. Григорьева, Е. Л. Турнецкая
Рецензент – доцент, кандидат технических наук Г. С. Евсеев
Сайт: Тема Twenty Twenty-One https://wordpress.org/themes/twentytwentyone
Сайт: Плагин NinjaForms https://ninjaforms.com
Сайт: Плагин Twentig https://twentig.com