Размещено на http://www.allbest.ru/

Министерство цифрового развития государственного управления, информационных технологий и связи Республики Татарстан

Государственное автономное профессиональное образовательное учреждение "Международный центр компетенций -

Казанский техникум информационных технологий и связи"

Отчет по производственной практике

"Проектирование и разработка веб-приложений"

(наименование производственной практики по профессиональному модулю)

Начало практики: 23.03.2023 г.

Выполнил обучающийся Углев Степан Романович,

Пентегов Д.В.

Рогов В.Д.

Казань, 2023г

Содержание

• Введение
• 1. Проектирование и разработка веб-сайта для размещений вакансий и резюме
• 1.1 Графический редактор Figma
• 1.2 Редактор кода Php Storm
• 1.3 Язык гипертекстовой разметки HTML
• 1.4 Каскадные таблицы стилей CSS
• 1.5 Язык программирования JavaScript
• 1.6 Язык программирования PHP
• 2. Реализация системного проекта
• 2.1 Дизайн веб-сайта
• 2.2 Верстка веб-сайта
• 2.3 Разработка кода информационной системы
• 3. Руководство пользователя
• 3.1 Руководство пользователя
• 3.2 Руководство администратора
• Заключение
• Министерство цифрового развития государственного управления, информационных технологий и связи Республики Татарстан
• Государственное автономное профессиональное образовательное учреждение
• "Международный центр компетенций -
• Казанский техникум информационных технологий и связи"
• Специальность: 09.02.07 "Информационные системы и программирование"
• Квалификации: Разработчик веб и мультимедийных приложений (код, расшифровка)
• ДНЕВНИК
• ПО ПРОИЗВОДСТВЕННОЙ ПРАКТИКЕ
• ПМ 09 ПП.09.01 "Проектирование и разработка веб-приложений"
• (наименование профессионального модуля)
• Выполнил обучающийся Углев Степан Романович,
• группа 424 ВЕБ, специальность: 09.02.07 "Информационные системы и программирование"
• Оценка ____ (___________)
• Начало практики: 23.03.2023 г. Пентегов Д.В.
• (Ф.И. О. подпись руководителя практики от организации)
• Рогов В.Д.
• (Ф.И. О. подпись руководителя практики от техникума)
• Окончание практики: 12.04.2023 г. Пентегов Д.В.
• (Ф.И. О. подпись руководителя практики от организации)
• Рогов В.Д.
• (Ф.И. О. подпись руководителя практики от техникума)
• М.П.
• Казань, 2023г.
• СОДЕРЖАНИЕ ДНЕВНИКА

Дата	Рабочее место профильной организации и/или техникума	Краткое содержание выполненных работ	Отметка руководителя практики от предприятия и техникума (подпись)
23.03.2023	ООО "Техническая безопасность"	Вводный инструктаж по охране труда и технике безопасности на предприятия. Распорядок дня предприятия
24.03.2023	ООО "Техническая безопасность"	Знакомство с куратором. Ознакомление со структурой компании и его основными видами деятельности.
25.03.2023	ГАПОУ "МЦК-КТИТС"	Консультация. Выдача индивидуального задания
27.03.2023	ООО "Техническая безопасность"	Получение индивидуального задания
28.03.2023 -31.03.2023	ООО "Техническая безопасность"	Ознакомление с индивидуальным заданием
01.04.2023	ГАПОУ "МЦК-КТИТС"	Консультация
02.04.2023 - 07.04.2023	ООО "Техническая безопасность"	Выполнение индивидуального задания от предприятия
08.04.2023	ГАПОУ "МЦК-КТИТС"	Консультация
10.04.2023	ООО "Техническая безопасность"	Выполнение индивидуального задания от предприятия
11.04.2023	ООО "Техническая безопасность"	Оформление отчета
12.04.2023	ООО "Техническая безопасность", ГАПОУ "МЦК-КТИТС"	Сдача и защита отчета.

• М.П.


Введение

ООО "ТЕХНИЧЕСКАЯ БЕЗОПАСНОСТЬ" - это компания, которая занимается установкой и обслуживанием пожарной сигнализации, охранной сигнализации, видеонаблюдения, систем управления контроля доступа и тд.

Техническая безопасность - это комплекс мер, призванный исключить потерю прочности, целостности систем, а также не допустить опасных отказов производственных систем.

Достичь целей технической безопасности позволяет обеспечение высокого качества всех общеинженерных работ. Этот процесс должен начинаться уже на стадии проектирования, продолжаться в процессе эксплуатации установок и систем, производственных объектов. Она подразумевает безопасную эксплуатацию оборудования, систем, установок и прочее.

Мероприятие по охране и технике безопасности.

Техника безопасности на предприятии - это совокупность мероприятий организационного и технического характера, которые направлены на предотвращение на производстве несчастных случаев и на формирование безопасных условий труда.

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

В основном, эти мероприятия основываются на следующем:

1. С целью предохранения работников мероприятия от ранений;

2. Улучшать конструкции действующего оборудования;

3. Улучшение действующих конструкций, а также установка новых. защитных приспособлений от машин, станков и нагревательных установок, которые устраняют возможности случаев травматизма

Компьютерная техника в настоящее время используется практически во всех организациях. Применение работниками данного оборудования способно оказывать негативное влияние на их здоровье и даже привести к чрезвычайным ситуациям и несчастным случаям на производстве. Для того, чтобы этого избежать, работники должны соблюдать технику безопасности при работе с компьютером.

Компьютер - это сложное устройство, работающее под напряжением, поэтому на него тоже распространяются техника безопасности к электрическим устройствам. Применимо к компьютеру соблюдайте основные правила:

1. Не работайте с компьютером при наличии внешних повреждений корпуса или изоляции силовых кабелей. В этом случае требуется замена кабелей или обращение в сервисный центр;

2. Не кладите на корпус системного блока и не храните на нем разные предметы, особенно тяжелые, т.к. в этом случае может возникнуть вибрация, которая может вызвать нарушения работы компьютера;

3. Не рекомендуется включать компьютер в розетки без заземления;

4. Розетки и вилки должны быть цельными, без повреждений;

5. Не включайте компьютер в помещении с высокой влажностью;

6. Не оставляйте работающий ПК без присмотра длительное время;

7. Провода и силовые кабеля компьютера должны быть расположены так, чтобы исключить возможность наступить на них или поставить что-то тяжелое;

8. Нельзя работать с компьютером при открытом корпусе системного блока.

Соблюдая технику безопасности и рекомендации, вы исключите риск ущербу своему здоровью и имуществу

Описание технологического процесса выполненных работ в период производственной практики.

1. Вводный инструктаж по месту проведения производственной практики. Инструктаж проводится руководителем практики. Особое внимание уделяется вопросам распорядка дня работы, соблюдение мер производственной и противопожарной безопасности;

2. Ознакомление со структурой, лицензией и уставом организации, решаемыми задачами, знакомство с коллективом предприятия. В первые дни практики проходило ознакомление с основными планами занятий, которые необходимо выполнить на протяжении производственной практики;

3. Практическое выполнение обязанностей, возложенных руководителем практики;

4. Выполнение индивидуального задания;

5. Подготовка отчета о выполнении производственной практики.



1. Проектирование и разработка веб-сайта для размещений вакансий и резюме

Актуальность поиска работы в наше время не только не снижается, если сравнивать с предыдущими десятилетиями, но, наоборот, становится всё выше. Одни люди увольняются, других увольняют, одни хотят сменить место работы по какой-то причине, другие просто встают перед необходимостью перемен. Но если раньше все использовали, так сказать, классический метод: покупка газеты - поиск объявлений - телефонные звонки - назначение собеседований; то сегодня два, а чаще всего, даже три первых пункта этого метода можно смело вычёркивать, ведь в распоряжении людей есть Интернет.

Поиск работы через Интернет позволяет многократно сократить время, избежать простоя в очередях и подготовки документов, ведь можно просто найти интересующую вакансию и откликнуться на неё или же написать письмо в организацию, отправив по E-Mail резюме и коротко рассказав о себе. Причём сделать это можно, сидя у себя дома за компьютером.

Основной задачей веб-сайта "FindJob" помощь в поиске вакансий и резюме.

Обоснование выбора средства разработки.

В настоящее время существуют различные виды простых профессиональных программ, предназначенных для созданий сайтов. Для выполнения курсового проекта были использованы графический редактор Figma, программа Visual Studio Code, языки разметки HTML и таблиц стилей CSS, языки программирования JavaScript и PHP.

1.1 Графический редактор Figma

Figma (Фигма) - онлайн-сервис для дизайнеров, веб-разработчиков и маркетологов. Он предназначен для создания прототипов сайтов или приложений, иллюстраций и векторной графики. В редакторе можно настроить совместную работу, вносить и обсуждать правки, причем как в браузере, так и через приложение на компьютере.

Возможности и особенности Figma:

- Бесплатные функции. Можно свободно пользоваться данным графическим редактором, но только с некоторыми ограничениями. В их число входит число редакторов и проектов, время хранения истории версий и другие важные мелочи.

- Встроенные компоненты. Если вы создаете сразу несколько элементов с одинаковым стилем, можно менять их во всем макете. В других графических редакторах вам пришлось бы работать с каждым элементом по отдельности.

- Использование через браузер или приложение. Программа работает в вебе и на десктопе. Все, что необходимо для работы с ней - авторизация уже в существующем профиле и наличие стабильного интернет-соединения.

- Многопользовательский режим. Одна из главных особенностей графического онлайн-редактора Фигма. Есть возможность создания собственной команды для дальнейшего сотрудничества в рамках сервиса.

- Наличие фреймов. Причем с предустановленными размерами для различных устройств - телефонов, планшетов, компьютеров, смарт часов. Плюс в том, что не придется запоминать какие-либо размеры. Просто выбираете подходящий вариант девайса и начинаете работать с ним.

- Просмотр истории версий. Сервис сохраняет ранние версии файла на 30 дней, при необходимости можно возвращаться к ним и дублировать любую из них. Сохранение происходит автоматически после внесения последнего изменения в файл.

- Хранение файлов в облаке. Нет необходимости скачивать проект каждый раз после внесения изменений - все сохраняется на диске автоматически.



1.2 Редактор кода Php Storm

PhpStorm - это среда разработки, которая по-настоящему понимает ваш код. IDE обеспечивает первоклассную поддержку PHP 5.3-8.1, мгновенно предотвращает ошибки, предоставляет точное автодополнение и безопасные рефакторинги, а также возможность редактирования кода на HTML, CSS и JavaScript. IDE обеспечивает умное автодополнение, подсветку синтаксиса, расширенные настройки форматирования, проверку ошибок на лету, сворачивание фрагментов кода, поддержку языковых комбинаций и много других возможностей для продуктивной разработки. Автоматические рефакторинги позаботятся о порядке в вашем коде и помогут легко и безопасно выполнять глобальные настройки проекта. PhpStorm поддерживает самые современные технологии веб-разработки: HTML5, CSS, SASS, SCSS LESS, CoffeeScript, ECMAScript Harmony, Jade-шаблоны и многое другое. Функция Live Edit позволяет мгновенно видеть результаты редактирования файлов в браузере без перезагрузки страницы. PhpStorm предоставляет инструменты для работы с базами данных и SQL-кодом в ваших проектах. IDE помогает подключаться к базам данных, редактировать схемы и таблицы, выполнять запросы и анализировать схемы с помощью UML-диаграмм. Код на SQL можно вставить в файлы на других языках и работать с ним в SQL-редакторе, который предоставляет подсветку синтаксиса, автодополнение, анализ кода на лету, форматирование и удобную навигацию.

1.3 Язык гипертекстовой разметки HTML

HTML ("язык гипертекстовой разметки") - стандартизированный язык разметки веб-страниц во Всемирной паутине. Код HTML интерпретируется браузерами; полученная в результате интерпретации страница отображается на экране монитора компьютера или мобильного устройства.

Многие уже давно перестали его считать просто языком программирования. Так как само понятие HTML включает в себя различные методы оформления гипертекстовых документов, дизайн, гипертекстовые редакторы, браузеры и много всего другого.

1.4 Каскадные таблицы стилей CSS

CSS (Cascading Style Sheets) - это код, который вы используете для стилизации вашей веб-страницы. Как и HTML, CSS на самом деле не является языком программирования. Это не язык разметки - это язык таблицы стилей. Это означает, что он позволяет применять стили выборочно к элементам в документах HTML. Например, чтобы выбрать все элементы абзаца на HTML странице и изменить текст внутри них с чёрного на красный, вы должны написать этот CSS.

Вся структура называется набором правил (но зачастую для краткости "правило").

CSS - формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Также может применяться к любым XML-документам, например, к SVG или XUL.

1.5 Язык программирования JavaScript

JavaScript - мультипарадигменный язык программирования. Поддерживает объектно-ориентированный, императивный и функциональный стили. Является реализацией спецификации ECMAScript

JavaScript обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.

Основные архитектурные черты: динамическая типизация, слабая типизация, автоматическое управление памятью, прототипное программирование, функции как объекты первого класса.

На JavaScript оказали влияние многие языки, при разработке была цель сделать язык похожим на Java. Языком JavaScript не владеет какая-либо компания или организация, что отличает его от ряда языков программирования, используемых в веб-разработке.

JavaScript используется в клиентской части веб-приложений: клиент-серверных программ, в котором клиентом является браузер, а сервером - веб-сервер, имеющих распределённую между сервером и клиентом логику. Обмен информацией в веб-приложениях происходит по сети. Одним из преимуществ такого подхода является тот факт, что клиенты не зависят от конкретной операционной системы пользователя, поэтому веб-приложения являются кроссплатформенными сервисами.

JavaScript используется в AJAX, популярном подходе к построению интерактивных пользовательских интерфейсов веб-приложений, заключающемся в "фоновом" асинхронном обмене данными браузера с веб-сервером. В результате, при обновлении данных веб-страница не перезагружается полностью и интерфейс веб-приложения становится быстрее, чем это происходит при традиционном подходе (без применения AJAX).

1.6 Язык программирования PHP

PHP - это интерпретируемый язык программирования общего назначения, работающий на серверной стороне. Это означает, что когда посетитель запрашивает страницу веб-сайта, сервер получает запрос, передаёт управление интерпретатору PHP, он выполняет все необходимые операции, отдаёт готовый код серверу и только потом сервер отправляет готовую страницу браузеру. Обычно PHP-файлы помимо самого PHP-кода содержат ещё HTML, CSS и возможно JavaScript.

PHP хоть и является языком общего назначения, но изначально он создавался специально для web-разработки. Основным преимуществом PHP является возможность добавлять PHP-код непосредственно в обычные HTML документы.



2. Реализация системного проекта

2.1 Дизайн веб-сайта

В ходе разработки дизайна для веб-сайта были использованы шрифт Montserrat с начертаниями 400, 500, 700. Шрифт очень хорошо вписывается в концепцию веб-сайта и является хорошо читаемым. Демонстрация шрифта Inter с начертанием 400 (Рисунок 2.1), 500 (Рисунок 2.2), 600 (Рисунок 2.3). Повсеместно используется начертание 400, для кнопок начертание 500, для заголовков начертание 700.

Рисунок 2.1 Начертание шрифта Inter 400

Рисунок 2.2 Начертание шрифта Inter 500

Рисунок 2.3 Начертание шрифта Inter 700

Цветовая палитра состоит из четырех цветов. Светло-синий акцентный цвет (#4C7EB9), черный цвет (#000000), белый цвет (#FFFFFF) и голубой цвет (#7CA9DD).

2.2 Верстка веб-сайта

В ходе реализации индивидуального задания была создана шапка веб-сайта с помощью семантического тега <header>. Шапка состоит из логотипа, навигационного меню и кнопок авторизации (Рисунок 2.4).

Рисунок 2.4 Шапка веб-сайта

После располагается блок, в котором располагается баннер со строкой поиска вакансий (Рисунок 2.5).

Рисунок 2.5 Блок с баннером

Ниже расположен блок с последними вакансиями, в котором выводятся 5 последних добавленных вакансий (Рисунок 2.6)



Рисунок 2.6 Блок с вакансиями

Последним блоком на главной странице является блок с подпиской на рассылку (Рисунок 2.7)

Рисунок 2.7 Блок с подпиской на рассылку

Таким образом, была выполнена верстка веб-сайта.

2.3 Разработка кода информационной системы

После реализации дизайна сверстан и запрограммирован сам веб-сайт.

Перед началом программирования веб-сайта, необходимо произвести подключение к базе данных. Подключение реализовано через MySQLi. MySQLi - расширение для PHP, предоставляющее разработчику универсальный интерфейс для доступа к базам данных MySQL.

Регистрация пользователя происходит через страницу авторизации. При нажатии на кнопку регистрации выполняется код (Рисунок 2.8).



Рисунок 2.8 Код регистрации

Затем идет авторизация пользователя на веб-сайте. Здесь также идет проверка на пустоту, проверка на наличие пользователя в базе данных. Если ошибок нет, то запускается сессия и пользователя перебрасывает на главную страницу веб-сайта (Рисунок 2.9). сайт редактор программирование



Рисунок 2.9 Код авторизации

При нажатии на кнопку "Добавить вакансию" выполняется следующий код (Рисунок 2.10)

Рисунок 2.10 Код добавления вакансии на страницу

Администратор также может удалить или редактировать уже существующие вакансии. При этом выполняется код (Рисунок 2.11).



Рисунок 2.11 Код редактирования и удаления вакансий

Таким образом было выполнено программирование на стороне сервера на языке PHP.



3. Руководство пользователя

3.1 Руководство пользователя

Открыв главную страницу сайта, гость сначала видит шапку, в которой расположены логотип, меню навигации и кнопка для входа.

Для того чтобы гость мог выполнять действия на веб-сайте, ему необходимо авторизоваться (Рисунок 3.1).

Рисунок 3.1 Страница авторизации и регистрации

Если гость не зарегистрирован, то он проходит регистрацию.

После авторизации на странице вакансии появляется кнопка отклика на резюме (Рисунок 3.2)



Рисунок 3.2 Страница вакансии авторизованного пользователя

3.2 Руководство администратора

Для того чтобы администратор зашел в систему админ-панели должен ввести данные при авторизации (логин: admin@mail.ru, пароль:adminadmin). После входа в систему, администратор видит на шапке кнопку "Админ" (Рисунок 3.3).

Рисунок 3.3 Кнопки администратора после авторизации

После нажатия на нее, он переходит на другую страницу. На этой странице администратор может видеть все вакансии и кнопки управления (Рисунок 3.4), добавить вакансию (Рисунок 3.5), добавить запись в блог (Рисунок 3.6).



Рисунок 3.4 Панель администратора

Рисунок 3.5 Добавление вакансии

Рисунок 3.6 Добавление записи в блог

При нажатии на кнопку редактировать открывается страница редактирования (Рисунок 3.7).



Рисунок 3.7 Страница редактирования вакансии

Таким образом, администратор имеет возможность добавлять, редактировать и удалять вакансии, добавлять и удалять записи блога.



Заключение

Результатом выполнения индивидуального проекта является готовый веб-сайт для онлайн библиотеки. Были закреплены навыки в разработке логотипа, дизайна, и создании сайтов с помощью Php Storm

В процессе выполнения индивидуального задания улучшены навыки работы Figma, PHP, HTML5, CSS3, JavaScript.

Функционал разработанного веб-сайта полностью соответствует заявленным техническим требованиям согласно заданию. Веб-сайт сопровождается приятной цветовой гаммой, соответствует конечной цели и целевой аудитории веб-сайта.

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



Характеристика на обучающегося по освоению общих и профессиональных компетенций, а также личностного развития в период прохождения производственной практики (по профилю специальности)

ФИО обучающегося Углев Степан Романович

Группа 424 специальность 09.02.07 "Информационные системы и программирование"

(группа, код, специальность)

проходившего практику с 23.03.2023г. по 12.04.2023г.

на базе: ООО "Техническая безопасность"

(название организации/предприятия)

по ПМ.09 ПП 09.01 "Проектирование и разработка веб-приложений"

(производственная практика по профессиональному модулю)

Обучающийся соблюдал /не соблюдал (подчеркнуть нужное) трудовую дисциплину и правила техники безопасности

В отношении выполнения трудовых заданий проявил (а) себя ________________________

__________________________________________________________________

За время прохождения производственной практики обучающимся освоены общие и профессиональные компетенции, а также личностное развитие:

Код	Наименование компетенции	Показатели (освоена/не освоена) *
ОК 1.	Выбирать способы решения задач профессиональной деятельности, применительно к различным контекстам
ОК 2.	Осуществлять поиск, анализ и интерпретацию информации, необходимой для выполнения задач профессиональной деятельности.
ОК 3	Планировать и реализовывать собственное профессиональное и личностное развитие.
ОК 4	Планировать и реализовывать собственное профессиональное и личностное развитие.
ОК 5	Планировать и реализовывать собственное профессиональное и личностное развитие.
ОК 6	Проявлять гражданско-патриотическую позицию, демонстрировать осознанное поведение на основе традиционных общечеловеческих ценностей
ОК 7	Содействовать сохранению окружающей среды, ресурсосбережению, эффективно действовать в чрезвычайных ситуациях.
ОК 8	Использовать средства физической культуры для сохранения и укрепления здоровья в процессе профессиональной деятельности и поддержания необходимого уровня физической подготовленности
ОК 9	Использовать информационные технологии в профессиональной деятельности.
ОК 10	Пользоваться профессиональной документацией на государственном и иностранном языке
ПК 9.1	Разрабатывать техническое задание на веб-приложение в соответствии с требованиями заказчика
ПК 9.2	Разрабатывать веб-приложение в соответствии с техническим заданием
ПК 9.3	Разрабатывать интерфейс пользователя веб-приложений в соответствии с техническим заданием
ПК 9.4	Осуществлять техническое сопровождение и восстановление веб-приложений в соответствии с техническим заданием
ПК 9.5	Производить тестирование разработанного веб приложения
ПК 9.6	Размещать веб приложения в сети в соответствии с техническим заданием
ПК 9.7	Осуществлять сбор статистической информации о работе веб-приложений для анализа эффективности его работы
ПК 9.8	Осуществлять аудит безопасности веб-приложения в соответствии с регламентами по безопасности
ПК 9.9	Модернизировать веб-приложение с учетом правил и норм подготовки информации для поисковых систем.
ПК 9.10	Реализовывать мероприятия по продвижению веб-приложений в сети интернет
ЛР 4	Проявляющий и демонстрирующий уважение к людям труда, осознающий ценность собственного труда. Стремящийся к формированию в сетевой среде личного и профессионального конструктивного "цифрового следа".	Достигнут
ЛР 7	Осознающий приоритетную ценность личности человека; уважающий собственную и чужую уникальность в различных ситуациях, во всех формах и видах деятельности.	Достигнут
ЛР 10	Заботящийся о защите окружающей среды, собственной |и чужой безопасности, в том числе цифровой.	Достигнут
ЛР 13	Демонстрирующий умение эффективно взаимодействовать в команде, вести диалог, в том числе с использованием средств коммуникации.	Достигнут
ЛР 14	Демонстрирующий навыки анализа и интерпретации информации из различных источников нормативно-правовых норм.	Достигнут
ЛР 16	Проявляющий уважение к ценностям - и поддерживающийся престиж ГАПОУ "МЦК-КТИТС"	Достигнут

*Оценка компетенции "освоена" предполагает, что обучающийся приобрел практический опыт в рамках соответствующих компетенций и личностного развития.

Оценка "не освоена" предполагает, что за время практики обучающийся не продемонстрировал необходимый уровень умений и опыта практической работы.

Производственная практика считается успешно пройденной в случае освоения всех (без исключения) компетенций, предусмотренных ОПОП в рамках профессионального модуля.

Оценка _______(____________)

(прописью)

Руководитель практики от профильной организации ________ Пентегов Д.В__________

(ФИО руководителя)

______________________

(подпись)

М.П. (при наличии)

Оценка _______(____________)

(прописью)

Руководитель практики от организации (техникума) Рогов В.Д.

(ФИО руководителя)

______________________

(подпись)

М.П.

Размещено на Allbest.ru

...