ПМ 09 МДК 09.01Проектирование и разработка веб-приложений_СРС-20. Методические указания для самостоятельной (аудиторной) работы студентов по пм. 09 Проектирование, разработка и оптимизация вебприложений
 Скачать 0.57 Mb.
|
|
Министерство науки и высшего образования Российской Федерации Федеральное государственное бюджетное образовательное учреждение высшего образования ИРКУТСКИЙ НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ Факультет среднего профессионального образования УТВЕРЖДАЮ: Заместитель декана п  о учебой работе_   ______________М.В. Борисова«_____» ______________ 2022 г. ПМ.09 ПРОЕКТИРОВАНИЕ, РАЗРАБОТКА И ОПТИММИЗАЦИЯ ВЕБ-ПРИЛОЖЕНИЙ МДК.09.01 Проектирование и разработка веб-приложений Методические указания по выполнению аудиторных самостоятельных работ
2022 г. Методические указания по ПМ.09 Проектирование, разработка и оптимизация веб-приложений составлены в соответствии с рабочей программой. Составитель: Холева Елена Александровна, преподаватель М   етодические указания рассмотрены и рекомендованы к утверждению на заседании цикловой комиссии информационных систем и программированияП  ротокол № ___ от «___» _________2022 г. Председатель ЦК ________________ А.Д. Шипилова Введение Методические указания для самостоятельной (аудиторной) работы студентов по ПМ.09 «Проектирование, разработка и оптимизация веб-приложений» МДК 09.01 «Проектирование и разработка веб-приложений» составлены на основе Федерального государственного образовательного стандарта по специальности среднего профессионального образования специальности 09.02.07 «Информационные системы и программирование». Целью самостоятельной работы студентов является овладение фундаментальными знаниями, профессиональными умениями и навыками. Самостоятельная работа студентов способствует развитию самостоятельности, ответственности и организованности, творческого подхода к решению проблем учебного и профессионального уровня. Студент в процессе обучения должен не только освоить учебную программу, но и приобрести навыки самостоятельной работы. Содержание самостоятельных работ предназначено для оказания помощи в изучении учебного материала и выявления знаний студентов по темам: «Основы PHP» «PHP и XML» «Язык сценариев JavaScript. Объектно-ориентированное программирование» «Основы работы с базами данных» «Связь с базами данных MySQL» «AJAX» В результате освоения учебной дисциплины обучающийся должен уметь: Разрабатывать программный код клиентской и серверной части веб-приложений. Осуществлять оптимизацию веб-приложения с целью повышения его рейтинга в сети Интернет. Разрабатывать и проектировать информационные системы. должен знать: Языки программирования и разметки для разработки клиентской и серверной части веб-приложений. Принципы функционирования поисковых сервисов и особенности оптимизации веб-приложений под них. Принципы проектирования и разработки информационных систем. В результате освоения дисциплины обучающийся должен обладать общими и профессиональными компетенциями:
Общее количество часов на самостоятельные работы по данной дисциплине – 24. Информационное обеспечение Информационное обеспечение освоения рабочей программы профессионального модуля дисциплины включает в себя следующие основные и дополнительные печатные и электронные издания и ресурсы: Печатные издания Немцова, Т. И. Компьютерная графика и web-дизайн : учебное пособие / Т.И. Немцова, Т.В. Казанкова, А.В. Шнякин ; под ред. Л.Г. Гагариной. — Москва : ФОРУМ : ИНФРА-М, 2021. — 400 с. + Доп. материалы [Электронный ресурс]. — (Среднее профессиональное образование). - ISBN 978-5-8199-0790-0. - Текст : электронный. - URL: https://znanium.com/catalog/product/1815964 Электронные издания (электронные ресурсы): Система федеральных образовательных порталов Информационно -коммуникационные технологии в образовании. [Электронный ресурс] – режим доступа: http://www.ict.edu.ru Ежемесячный электронный журнал «ПРОграммист». http://procoder.info/ htpp://www.php.spb.ru http://www.javaportal.ru http://moolkin.ru/joomla/cms/staticheskie-i-dinamicheskie-web-sayty-v-chyom-raznitsa/ http://htmlbook.ru http://helpx.adobe.com/ru/dreamweaver/using/creating-dreamweaver-template.html Дополнительная литература: 1. Компьютерная графика : учебное пособие для СПО / Е. А. Ваншина, М. А. Егорова, С. И. Павлов, Ю. В. Семагина. — Саратов : Профобразование, 2020. — 206 c. — ISBN 978-5-4488-0720-6. — Текст : электронный // Электронный ресурс цифровой образовательной среды СПО PROFобразование : [сайт]. — URL: https://profspo.ru/books/91878 Критериями оценки результатов самостоятельной работы студента являются: уровень освоения студентом учебного материала; умение студента использовать теоретические знания; обоснованность и полнота изложения ответа; - оформление материала в соответствии с требованиями ФГОС. Таблица – Перечень самостоятельных работ
Самостоятельная работа № 1 «Разработка веб-страницы с выводом информации на PHP + XML + XSLT» Количество часов на выполнение: 8 часов, из них на практическую подготовку 8ч. Цель работы: знакомство с методами форматирования и преобразования XML документов на основе XSLT преобразований. Задание.Разработать веб-страницу с выводом информации на PHP + XML + XSLT Методика выполнения задания. Объявление XSL Корневым элементом, указывающим на то, что документ является XSL таблицей стилей является следующий: В соответствии с W3C XSLT. Рекомендуемый корректный способ объявления таблицы стилей XSL выглядит следующим образом: Для того чтобы XSLT элементы, атрибуты и характеристики были доступны в начале документа необходимо объявить пространство имен XSLT: xmlns:xsl="http://www.w3.org/1999/XSL/Transform" указывающее на официальное пространство имен W3C XSLT. При этом также следует указать атрибут version="1.0". Реализация преобразования с помощью сценария. XSLT преобразование из XML в XHTML выполняемое самими браузерами на основе таблицы стилей XSL является не всегда желательным, поскольку может поддерживаться не всеми браузерами. Использование в качестве альтернативы JavaScript позволяет: выполнять проверку типа браузера; Использовать подходящие таблицы стилей в зависимости от типа браузера и потребностей пользователей. Другим решением для браузеров, не поддерживающих XSLT является преобразование XML в XHTML на веб-сервере Требования к оформлению. Файл сохраняется в личной папке на сетевом диске и на флеш-носителе. Форма контроля: защита веб-страницы с помощью технических средств. Критерии оценки:
«отлично» – 100-95 баллов «хорошо» – 94-81 баллов «удовлетворительно» – 80-61 «неудовлетворительно» – 60 и ниже Самостоятельная работа № 2 «Создание базы данных MySQL, состоящей из 3-х таблиц и запрограммировать веб-страницу, обрабатывающую сгруппированную информацию» Количество часов на выполнение: 8 часов, из них на практическую подготовку 8ч. Цель работы: научиться работать с базой данных в MySQL состоящей из 3-х и более таблиц и обрабатывать сгруппированную информацию. Задание: создать новую базу данных в MySQL из 3-х таблиц и обработать сгруппированную информацию. Методика выполнения задания. Создание базы данных MySQL Далее представлен пример создания и работы с базой данных “Travel”, состоящей из четырех таблиц: “Hotel”, “Putevka”, “Turoperator” и “Turist”. База данных задана по предметной области “Путешествие”, покупка путевок в турагенстве “Travel”. Данная база данных предназначена для учета всех путевок, оформленных в турагенстве “Travel”. При этом для заказа путевок необходима информация о туристе, об отеле и о туроператоре. Также необходима информация о самой путевке, такая как номер путевки, дата отправки, дата возвращения. Даталогическая модель базы данных “Travel” представлена на рисунке 1.  Рисунок 1 – Даталогическая модель базы данных “Travel” Как видно на рисунке 1, основной таблицей является таблица “Putevka”(Путевка), в которую передается информация из других таблиц. При этом связь таблиц осуществляется с помощью внешних ключей. Ниже представлено описание таблиц “Hotel”, “Putevka”, “Turoperator” и “Turist” базы данных “Travel”, с указанием основных полей. Hotel (Id, Name, Class) Putevka (Id, Number, DateOtpravki, DateVozvr, Cod_Hotel, Cod_Operator, Cod_Turist) Turist (Id, SecondName, FirstName, Patronym, SeriaPassport, NumberPassport) Turoperator (Id, Name). После создания даталогической модели базы данных, следующим этапом является создание базы данных различными средствами. Создание базы данных При работе с базами данных СУБД MySQL применяются наиболее популярные операторы языка запросов SQL. При этом для создания базы данных в СУБД MySQL используется два различных способа. Первый способ заключается в создании базы данных в консоли MySQL с помощью SQL-оператора CREATE DATABASE [5]. Синтаксис: CREATE DATABASE databasename, где databasename - имя создаваемой базы данных. Ниже представлен пример использования оператора CREATE DATABASE. CREATE DATABASE Travel; Реализация данного кода представлена на рисунке 2.  Рисунок 2 – Создание базы данных “Travel” Таким образом, как видно на рисунке 1, в данном примере осуществлялось использование оператора CREATE DATABASE для создания базы данных “Travel”. При этом создание базы данных осуществлялось в консольном режиме. Второй способ создания базы данных MySQL предполагает использование для этой цели программы phpMyAdmin. Для того, чтобы создать базу данных в программе phpMyAdmin, необходимо на стартовой странице программы указать имя новой базы данных и нажать кнопку “Создать”. После этого программа phpMyAdmin переключится на новую базу данных (рисунок 3).  Рисунок 3 – Созданная база данных “Travel” в программе phpMyAdmin Таким образом, как видно на рисунке 3, в данном примере была создана база данных “Travel” в приложении phpMyAdmin. При этом данная база данных еще не содержит таблиц. Необходимо отметить, что при использовании программы phpMyAdmin нет необходимости применять SQL-запросы, так как они генерируются автоматически. Создание таблиц баз данных Следующим этапом работы с базой данных является создание таблиц. Для создания таблиц в СУБД MySQL также используются два способа. Первый способ заключается в использовании SQL-оператора CREATE TABLE. Синтаксис: CREATE TABLE tablename (colums), где tablename - название таблицы, которую тре¬буется создать, colums - список столбцов в таблице. Необходимо отметить, что перед тем, как создавать новые таблицы, требуется выбрать базу данных, в которой они будут создаваться. Для этого используется SQL-оператор USE. Синтаксис: USE databasename, где databasename - имя базы данных. Ниже представлен пример использования оператора CREATE TABLE. USE Travel; CREATE TABLE Hotel (Id INT NOT NULL PRIMARY KEY, Name varCHAR(60) NOT NULL, Class INT NOT NULL); Реализация данного кода представлена на рисунке 4.  Рисунок 4 – Создание таблицы “Hotel” базы данных “Travel” Таким образом, как видно на рисунке 4, в данном примере осуществлялось использование оператора CREATE TABLE для создания таблицы “Hotel” базы данных “Travel”. При этом данная таблица содержит информацию об отелях и имеет три столбца: “Id”, “Name” и “Class”, то есть идентификатор, название и класс обслуживания отеля. Аналогичным образом можно реализовать создание остальных таблиц базы данных “Travel”. SQL-код создания таблиц представлен ниже. CREATE TABLE Turist (Id INT NOT NULL PRIMARY KEY, SecondName varCHAR(60) NOT NULL, FirstName varCHAR(60) NOT NULL, Patronym varCHAR(60) NOT NULL, SeriaPassport INT NOT NULL, NumberPassport INT NOT NULL); CREATE TABLE Turoperator (Id INT NOT NULL PRIMARY KEY, Name varCHAR(60) NOT NULL); CREATE TABLE Putevka (Id INT NOT NULL PRIMARY KEY, Number INT NOT NULL, DateOtpravki date NOT NULL, DateVozvr date NOT NULL, Cod_Hotel INT NOT NULL REFERENCES Hotel(Id), Cod_Operator INT NOT NULL REFERENCES Turoperator(Id), Cod_Turist INT NOT NULL REFERENCES Turist(Id)); Необходимо отметить, что каждая из перечисленных таблиц базы данных MySQL создается отдельным оператором CREATE TABLE. Каждый столбец содержит имя, за которым следует описание типа данных и атрибуты данного столбца. Некоторые столб¬цы содержат и другие спецификаторы: - NOT NULL означает, что все строки таблицы должны иметь значение в этом ат¬рибуте. Если NOT NULL не указано, поле может быть пустым; - AUTO_INCREMENT является специальной возможностью MySQL, которую можно задей¬ствовать в числовых столбцах. Если при вставке строк в таблицу оставлять такое поле пустым, MySQL автоматически генерирует уникальное значение идентификатора. Это значение будет на единицу больше максимального значения, уже существующего в столбце. В каждой таблице может быть не больше одного такого поля; - PRIMARY KEY определяет, что этот столбец является первич¬ным ключом для таблицы и используется после имени столбца. Данные в этом столбце должны быть уникальными. MySQL автоматически индексирует этот столбец; - UNSIGNED используется после целочисленного типа и означает, что его значение может быть либо положительным, либо нулевым. Второй более удобный способ создания таблиц базы данных MySQL заключается в использовании программы phpMyAdmin. Для того чтобы создать базу данных в программе phpMyAdmin необходимо в данной программе, внизу окна в разделе “Создать новую таблицу в базе данных Travel” в поле “Имя” указать имя новой таблицы, в поле “Поля” указать количество полей таблицы, а затем нажать кнопку “ОК”. После этого требуется задать типы полей таблицы, указав обязательный первичный ключ, выбрав его в переключателе “Первичный”, а также в поле “Дополнительно” определить его как “auto_increment”. Необходимо отметить, что имя первого поля должно быть “Id”. Это поле будет служить индексом, по которому MySQL однозначно идентифицирует запись в базе данных. Для второго поля и последующих полей можно выбирать произвольные имена [6]. Аналогичным образом создаются все таблицы базы данных “Travel”. Посмотреть структуру каждой из таблиц можно, выбрав ее название в левой части программы phpMyAdmin. При этом в момент просмотра название таблицы становится выделенным. После создания таблиц необходимо заполнить значениями соответствующие поля, как с помощью программы phpMyAdmin, так и средствами операторов языка SQL. На рисунках 5-8 представлены таблицы “Hotel”, “Putevka”, “Turoperator” и “Turist” базы данных “Travel”, которые были созданы в программе phpMyAdmin. При этом необходимо отметить, что создание таблиц с помощью программы phpMyAdmin, назначение ключей, типов и атрибутов столбцов более быстро и удобно чем в консоли MySQL.  Рисунок 5 – Таблица “Hotel” базы данных “Travel” в программе phpMyAdmin  Рисунок 6 – Таблица “Turoperator” базы данных “Travel” в phpmyadmin  Рисунок 7 – Таблица “Turist” базы данных “Travel” в программе phpMyAdmin  Рисунок 8 – Таблица “Putevka” базы данных “Travel” в phpMyAdmin После создания всех таблиц, можно осуществить построение даталогической модели базы данных, связав все таблицы с помощью внешних кючей. В программе phpMyAdmin это реализуется с помощью закладки “Дизайнер”. На рисунке 9 представлена даталогическая модель базы данных “Travel”, состоящая из четырех таблиц.  Рисунок 9 – Модель базы данных “Travel” в программе phpMyAdmin Программа phpMyAdmin позволяет также импортировать созданные таблицы баз данных. Для того, чтобы осуществить импорт существующей базы данных, необходимо выбрать базу данных с помощью закладки “Импорт”. После этого в окне указать импортируемый файл, формат импортируемого файла и нажать кнопку “OK”. На рисунке 10 представлено окно импорта базы данных “Travel”, состоящей из четырех таблиц.  Рисунок 10 – Окно импорта в phpmyadmin  Рисунок 11 – Успешное импортирование в phpMyAdmin Таким образом, в данном примере был осуществлен импорт существующей базы данных “Travel”. При этом формат импортируемого файла является SQL. Как видно на рисунках 10 и 11, после того, как база данных была импортирована, было выдано сообщение “Импорт успешно завершен, запросов выполнено: 4.”, что означает, что была импортирована база данных, состоящая из четырех таблиц. 8.3 Работа с базой данных MySQL Добавление данных в базу данных Работа с базой данных MySQL предполагает сохра¬нение в ней данных по заданной предметной области. Для добавления данных в базу данных используется SQL-оператор INSERT. Синтаксис: INSERT [INTO] table [(colum 1, соlum 2, colum 3, ... , соlum n)] VALUES (value 1, value 2, value 3, . . . ,value n), где table - имя таблицы, colum 1,…,соlum n – столбцы таблицы, в которые необходимо добавить значения, value 1, … ,value n – значения, предназначенные для добавления в таблицу базы данных. Необходимо отметить, что при работе с базами данных MySQL, с помощью оператора INSERT можно заполнять значениями не все поля таблицы, а только некоторые. Для этого необходимо указать столбцы базы данных, а также указать те значения, которые необходимо в них внести. Это возможно в ситуации, когда о какой-либо записи есть лишь частичная информа¬ция или если несколько полей записи необязательны. Например, в представленном ниже коде INSERT INTO Hotel (name) VALUES ("Laguna"); с помощью оператора INSERT в таблицу “Hotel” базы данных “Travel” было реализовано добавление в поле “Name” название отеля “Laguna”. При этом для добавления частичной информации в таблицу базы данных можно также использовать SQL-оператор SET, который указывает, в какие именно поля необходимо осуществить добавление информации. Например, представленном ниже коде INSERT INTO Hotel SET Name="Hilton", Class=5; с помощью конструкции оператора INSERT и SET в таблицу “Hotel” базы данных “Travel” было реализовано добавление в поле “Name” названия пятизвездочного отеля “Hilton”. Следует отметить, что при работе с базами данных MySQL, с помощью оператора INSERT можно осуществить добавление сразу нескольких строк. При этом каждая добавляемая строка таблицы должна быть заключена в скобки, разделенные запятыми. Ниже представлен пример использования оператора INSERT. INSERT INTO Hotel VALUES (1, "Rosa Resort Hotel", 4), (2, "Joy World Palace", 5), (3, "My Dream Beach", 3), (4, "Golden Beach Hotel ", 4), (5, "Joy Kirish Resort", 5); Реализация данного кода представлена на рисунке 12.  Рисунок 12 – Добавление нескольких строк в таблицу “Hotel” Таким образом, как видно на рисунке 12, в данном примере осуществлялось использование оператора INSERT для добавления пяти строк в таблицу “Hotel” базы “Travel”. В таблицу были добавлены пять отелей. На рисунке 12 также видно, что в ответ на заданный запрос было выведено сообщение: запрос выполнен успешно (“Query OK”), обработано пять строк (“5 rows affected”), время выполнения запроса (“0.36 sec”). Аналогичные сообщения выводятся на примеры других SQL-запросов. 8.3.2 Извлечение данных из базы данных 8.3.2.1 Извлечение данных из одной таблицы Для извлечения данных из базы данных MySQL используется SQL-оператор SELECT. С его помощью можно извлекать данные из базы данных, выбирая из таблицы те строки, которые отвечают заданному критерию поиска. Синтаксис: SELECT Items FROM tables [ WHERE condition ] [ GROUP BY group type ] [ HAVING WHERE_definition ] [ ORDER BY order_type ] [ LIMIT limit_criteria ], где tables - названия таблиц, из которых происходит извлечение данных, WHERE - проверка на соответствие полей условию condition, GROUP BY - группирование результатов запроса по полю group type, HAVING - отбор групп по условию, ORDER BY - сортировка данных по полю order_type, LIMIT - ограничение количества записей в результате запроса по критерию limit_criteria [5]. Ниже приведен пример использования оператора SELECT. SELECT Name, Class FROM Hotel; Реализация данного кода представлена на рисунке 13.  Рисунок 13 – Извлечение данных из таблицы “Hotel” Таким образом, как видно на рисунке 8.13, в данном примере осуществлялось использование оператора SELECT для извлечения данных из таблицы “Hotel” базы данных “Travel”. При этом на экран были выведены названия всех отелей (поле “Name”) в одном столбце и класс обслуживания (поле “Class”) в другом. При работе с базами данных MySQL совместно с оператором SELECT также используется оператор группового символа “*”. Данный оператор расширяет область запроса до уровня всех столбцов указанной таблицы. Ниже представлен пример использования символа “*” оператора SELECT. SELECT * FROM Turoperator; Реализация данного кода представлена на рисунке 14.  Рисунок 14 – Извлечение данных из всех строк и столбцов таблицы “Turoperator” Таким образом, как видно на рисунке 14, в данном примере осуществлялось использование символа “*” оператора SELECT для извлечения всех данных таблицы “Turoperator” базы данных “Travel”. Данная таблица содержит два поля - “Id” и “Name”, включающих пять записей идентификаторов и названий туроператоров соответственно. Создание базы данных MySQL, состоящей из 3-х таблиц и запрограммировать веб-страницу, обрабатывающую сгруппированную информацию Требования к оформлению. Файл сохраняется в личной папке на сетевом диске и на флеш-носителе. Форма контроля: защита базы данных проходит с помощью технических средств. Ссылки на источники: [1], [2] Критерии оценки:
«отлично» – 100-95 баллов «хорошо» – 94-81 баллов «удовлетворительно» – 80-61 «неудовлетворительно» – 60 и ниже Самостоятельная работа № 3 «Разработка рекламной веб-страницы с интерфейсом на flexbox и поиском на AJAX» Количество часов на выполнение: 8 часов, из них на практическую подготовку 8ч. Цель работы: узнать, как использовать систему адаптируемых блоков Flexbox для создания веб-макетов. Задание:разработать рекламную веб-страницу с интерфейсом на flexbox и поиском на AJAX Методика выполнения задания. Это новая технология, которая уже имеет достаточно широкую поддержку браузеров. Flexbox предоставляет инструменты для быстрого создания сложных, гибких макетов, и функции, которые были сложны в традиционных методах CSS. Долгое время единственными надёжными инструментами CSS вёрстки были такие способы как Float (обтекание) и позиционирование. С их помощью сложно или невозможно достичь следующих простых требований к макету: Вертикального выравнивания блока внутри родителя. Оформления всех детей контейнера так, чтобы они распределили между собой доступную ширину/высоту, независимо от того, сколько ширины/высоты доступно. Сделать все колонки в макете одинаковой высоты, даже если наполнение в них различно. Flexbox значительно облегчает работу с макетами. Требования к оформлению. Файл сохраняется в личной папке на сетевом диске и на флеш-носителе. Форма контроля: защита рекламной веб-страницы на flexbox с помощью технических средств. Критерии оценки:
«отлично» – 100-95 баллов «хорошо» – 94-81 баллов «удовлетворительно» – 80-61 «неудовлетворительно» – 60 и ниже | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||