Инфоурок Другое Другие методич. материалыКомплект-инструкционных карт по дисциплине "WEB-программирование"

Комплект-инструкционных карт по дисциплине "WEB-программирование"

Скачать материал

ГБПОУ ВО «Острогожский многопрофильный техникум»


УТВЕРЖДАЮ

Заместитель директора

по учебной работе

__________О.В.Редина




ИНСТРУКЦИОННО - ТЕХНОЛОГИЧЕСКАЯ КАРТА

на выполнение практической работы №1

по дисциплине WEB – программирование

для студентов, обучающихся по специальности

Программирование в компьютерных системах


ТЕМА: Основы проектирование сайтов.

НАИМЕНОВАНИЕ РАБОТЫ: Разработка структуры и дизайна сайта.

ЦЕЛЬ РАБОТЫ: Проектирования и тестирования (исследования) веб-сайтов с помощью редактора HTML-страниц.

Формируемые компетенции: ОК4,ОК5, ОК6.

ПРИОБРЕТАЕМЫЕ УМЕНИЯ И НАВЫКИ: освоить основные теги создания HTML-документа.

НОРМА ВРЕМЕНИ: 90 минут

ОСНАЩЕНИЕ РАБОЧЕГО МЕСТА: ПК.

ОСОБЫЕ ПРАВИЛА ПО ТЕХНИКЕ БЕЗОПАСНОСТИ НА РАБОЧЕМ МЕСТЕ: проведен инструктаж по техники безопасности в компьютерном классе.

ЛИТЕРАТУРА: Компьютерные сети. Принципы, технологии, протоколы. Олифер В. Г., Олифер Н.А. Спб.: Питер,2008, стр. 16-19

ВОПРОСЫ ПРИ ДОПУСКЕ:

  1. Перечислите наиболее распространенные виды логических структур веб-сайтов.

  2. Почему в именах файлов нежелательно использование символов русского алфавита.


МЕТОДИЧЕСКИЕ РЕКОМЕНДАЦИИ:

Разработка структуры сайта необходима для:

  • создания четкой и логичной схемы навигации;

  • организации простой технологии внесения изменений при редактировании сайта.

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

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

  • все навигационные элементы должны отображаться сразу после загрузки страницы;

  • все внутренние связи должны быть двунаправленными, то есть позволять перемещаться между документами в обоих направлениях;

  • с любой страницы должен быть предусмотрен возврат на главную страницу сайта;

  • названия рубрик и распределение материала между ними должно быть понятным каждому посетителю сайта.

  • если сайт имеет более одного уровня навигации, он обязательно должен содержать навигационную карту.

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

Пример логической структуры веб-сайта показан на рис. 1.





Существует несколько видов логических структур сайта. Самая простая из них – линейная. В ней страницы следуют одна за другой, и пользователь должен просматривать их последовательно, как слайд-шоу. Недостатков у такой структуры достаточно много. Как следствие, область ее применения ограничена. Она может использоваться на сайтах-презентациях и в онлайновых учебных пособиях. Самый простой вариант сайта с линейной структурой – набор страниц, с каждой из которых есть ссылка на следующую и на предыдущую. Однако и здесь начинающие авторы допускают ошибки. Дело в том, что на каждой странице обязательно должны присутствовать соответствующий заголовок и ссылка на первую страницу. В противном случае посетители, попавшие в середину сайта – например, в результате обращения поисковой системы, не смогут сориентироваться в ситуации, и покинут проект разочарованными. Кроме того, полезно показывать общее число страниц в отображаемом документе и выделять номер той из них, которая воспроизводится в данный момент времени.

Следующим вариантом структуры сайта является линейная структура с альтернативами и вариантами. Ее основой остается простое линейное размещение страниц. Однако на сайтах, построенных по данному принципу, посетители могут проявить некоторую инициативу, позволяющую облегчить поиск нужной информации. Под альтернативами здесь понимается выбор между двумя ветвями перемещения. Чаще всего подобная структура используется для сбора информации о посетителе. Примером может служить процесс регистрации клиента на сайте фирмы, оказывающей определенные услуги. Работа всегда начинается со стартовой страницы. Однако затем частным лицам предлагается ввести одну информацию, а представителям организаций – другую. Возможно, ветви альтернатив в дальнейшем вновь смыкаются, и все пользователи попадают на одну и ту же страницу.

Третий вариант носит название линейной структуры с ответвлениями. Это тоже контролируемая структура перемещения по ресурсам, наглядный аналог которой – дорога с ответвляющимися от нее тупиковыми тропами. Иными словами, посетитель последовательно переходит с одной страницы на другую. Если информация, размещенная на любой из них, его заинтересовала, и он желает ознакомиться с ней подробнее, то ему предоставляется возможность перейти на ответвление, а потом вернуться обратно на основную "дорогу". Главное преимущество такой структуры состоит в том, что к ней легко перейти с обычного линейного размещения страниц. Часто бывает, что однажды созданный сайт перестает удовлетворять возросшим требованиям, а глобальная переделка по тем или иным причинам нежелательна. В этом случае автор может без затруднений расширить свой проект. И его сайт не утратит четкости логических связей.

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

В древовидной структуре очень сложно соблюдать баланс между глубиной и шириной. Формальные критерии либо тривиальны, либо рассчитаны на узкие группы пользователей. Успех зависит от опыта, интуиции и квалификации автора. Если "дерево" сайта будет расти только вглубь, то посетителям, чтобы найти необходимую информацию, придется загрузить и просмотреть слишком много страниц. Естественно, это занимает много времени и раздражает. Если же создается очень широкая древовидная структура, то приходится тратить время по другой причине – для выбора нужной ветви поиска. Использование древовидной структуры сайта вынуждает постоянно следить за ее разрастанием и придерживаться золотой середины. Качество работы автора зависит от его мастерства, а не от соблюдения формальных правил.

Еще одним вариантом является решетчатая структура. Эта структура заметно сложнее рассмотренных ранее. В ней все страницы также размещаются в различных ветвях. Однако пользователю дается возможность перемещаться по ним не только вертикально (вверх и вниз), но и горизонтально (то есть между ветвями разных уровней). Используется «решетка» в основном только в каталогах. При этом перемещение между ветками на глубинных уровнях осуществляется с помощью ссылок на рубрики в других разделах.

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

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

  • страницы сайта, представляющие собой HTML-файлы;

  • таблицы стилей;

  • клиентские скрипты;

  • графические файлы, используемые в дизайне сайта;

  • файлы для копирования посетителями.

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

Прежде всего – не следует называть файлы безликими именами, такими как page1.htm, 123.htm и т.п. Необходимо, чтобы при взгляде на список файлов сразу становилось понятно, что в них содержится. Другими словами, называть файлы следует исходя из содержательного смысла документа. Если страница излагает общую информацию о компании, то принято называть ее about.htm, а страницу с контактной информацией – contacts.htm.

В некоторых случаях для группы файлов могут использоваться похожие наименования, состоящие из базового имени и цифры. Например, если вы периодически пишете статьи на своем сайте, то файлы удобно называть последовательно: article_1.htm, article_2.htm, article_3.htm и т.д. Заметим, что в качестве разделителя базового имени и цифры используется знак подчеркивания. Он позволяет отделить номер статьи, что способствует быстрому нахождению нужного файла.

При формировании имен файлов можно взять за основу либо русский язык, либо английский. Так как использовать русские символы в именах файлов нельзя (причины этого описаны ниже), то при использовании русского в качестве базового языка необходимо писать имена файлов в транслитерации (русские слова латинскими буквами). В этом случае страницу с описаниями услуг можно назвать, например, uslugi.htm, а страницу с информацией об истории фирмы – istoriya.htm. Предпочтительно использовать в качестве основного языка английский, потому что в этом случае слова будут корректно индексироваться поисковыми системами, а значит, при корректном запросе по теме вашего сайта релевантность (степень соответствия поисковому запросу) вашей страницы будет выше. Не следует лишь забывать о правильном написании английских слов. Кроме этого, если имена файлов используют английский язык, то человек, который попал на вашу страницу и не знает русский язык, сможет догадаться, о чем идет речь. Выбрав язык для использования в именах файлов, придерживайтесь его в пределах всего сайта. Не допускайте чередования английских и русских имен файлов.

Для зависимых файлов, например, для иллюстраций к какой-либо странице, удобно использовать следующее правило: имя графического файла образуется из названия страницы и идентификатора иллюстрации, разделенных знаком подчеркивания. В качестве идентификатора иллюстрации может использоваться либо порядковый номер появления ее в документе, либо, что предпочтительнее, некоторый идентификатор, позволяющий легко опознать ее. Допустим, что наша статья называется article_1.htm, и в ней используются иллюстрации – пусть это будут фотографии сотрудников отдела и схема их взаимного подчинения. Тогда имена графических файлов, образованных согласно данному правилу, будут соответствовать конкретным фамилиям, например: article_1_ivanov. jpg, article_1_petrov.jpg, article_1_sidorov.jpg, а иерархия отношений – штатной схеме отдела: article_1_scheme.gif.

Для части графических файлов, преимущественно участвующих в создании дизайна сайта, удобно использовать префиксы и суффиксы. Если спроектировано графическое меню сайта, которое подсвечивается при наведении курсора манипулятора мышь, то все графические файлы, формирующие меню, можно предварять префиксом «m_», а к названиям изображений, которые появляются при наведении мышью, добавлять суффикс «_over». Тогда название графического пункта меню, например "О компании", будет состоять из двух файлов – «m_about.gif» и «m_about_over.gif».

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

  • «bg_» (background) – для фоновых изображений;

  • «m_» (menu) – для пунктов графического меню;

  • «t_» (title) – для графических заголовков;

  • «icon_» – для пиктограмм;

  • «button_» – для графических кнопок, не являющихся элементами меню.

В качестве «корня» слова, образующего имя файла, удобно использовать название страницы, к которой относится данная графика. В приведенном примере «корнем» выступала страница about. Продолжим упражнения с ней и образуем имя файла, используемого как подложки этой страницы – получится имя bg_about.gif. Разумеется, имеет смысл это делать, если фоновый рисунок на разных страницах различный. Если же он везде одинаковый, то файл достаточно назвать просто bg.gif. Такова основа методики формирования имен файлов.

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

При создании имен файлов следует помнить об ограничениях, накладываемых со стороны операционных систем. Например, в формате UNIX-систем index.html и Index.html – разные файлы, а с точки зрения Windows – одни и те же. Нужна осторожность при использовании русских букв в именах файлов – преобразование символов из одной кодировки в другую превратит файл "галерея.htm" в "ЗБМЕТЕС.htm".

Рассмотрим инструментальное средство разработки сайтов, применяемое в лабораторных работах по курсу «Пакеты прикладных программ».

ПОДГОТОВКА К ВЫПОЛНЕНИЮ РАБОТЫ

Подготовить сменный носитель (flash-накопитель) для сохранения результатов работы с целью их дальнейшего использования в работах №№ 2 – 4.

По рекомендованной литературе ознакомиться с принципами работы в среде Microsoft FrontPage.

Ознакомиться с базовыми элементами языка HTML.

Выбрать тематику будущего веб-сайта.

Ознакомиться с дизайном и структурой существующих веб-сайтов.

Подготовить текст теоретических разделов отчета о работе.

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



ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ



РАЗРАБОТКА ЛОГИЧЕСКОЙ СТРУКТУРЫ ВЕБ-САЙТА. Определите тип и количество информации, которая будет помещена на сайт. В результате должно получиться не менее пяти разделов. К полученным разделам обязательно добавьте разделы «Анкета» и «Гостевая книга».

ВЫБОР ВИДА ЛОГИЧЕСКОЙ СТРУКТУРЫ САЙТА. Выберите вид логической структуры веб-сайта в соответствии с рекомендациями, данными в разделе 2.1. Предпочтительной является древовидная структура сайта. Подобную структуру имеет сайт, описываемый ниже в качестве примера.

ЛОКАЛИЗАЦИЯ ПРОЕКТА. Средствами Windows создайте папку для хранения файлов вашего сайта. Создайте в ней подпапки в соответствии с разработанной физической структурой сайта. При разработке физической структуры рекомендуется создавать отдельную подпапку для каждого раздела (остальные рекомендации сформулированы в разделе 2.1).

ЗАПУСК MICROSOFT FRONTPAGE. Запустите среду создания веб-сайтов Microsoft Frontpage (Пуск – Программы – Microsoft Frontpage).

СОЗДАНИЕ СТРАНИЦ САЙТА. В появившемся окне редактора веб-страниц введите необходимую информацию.

Нажмите правую кнопку мыши и выберите меню «Свойства страницы». Пройдите по всем закладкам появившегося окна и установите все необходимые вам свойства. Особое внимание обратите на последнюю закладку, на которой устанавливаются языковые параметры (рис. 2).

Введите информацию, необходимую для размещения на титульной странице (рис. 3). Сохраните полученный файл.

Создайте новую страницу. Расположите на ней элементы меню сайта в соответствии с созданной логической структурой (рис. 4).

Создайте остальные страницы сайта (кроме анкеты и гостевой книги) в соответствии с разработанной структурой. Наполните их информацией. На одну из страниц поместите крупный блок информации, преимущественно текстовой (рис. .7).

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

ЗАВЕРШЕНИЕ РАБОТЫ. Сохраните получившиеся страницы и перепишите созданные файлы на заранее подготовленный носитель. Выйдите из Frontpage, выключите компьютер.

hello_html_134b819.png





















Рис. 2 Установка свойств страницы в редакторе



Рис. 3 Формирование титульной страницыhello_html_m6dff96a3.png

hello_html_18d45933.gif


СОДЕРЖАНИЕ ОТЧЕТА


Отчет о работе должен содержать следующие материалы в соответствии с полученным индивидуальным заданием:

Обоснование выбора структуры сайта.

Схему логической структуры созданного сайта.

Схему физической структуры созданного сайта.

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

Последовательность выполнения работ в среде Microsoft FrontPage для создания сайта.

Формализацию выполненного индивидуального задания (разделение структуры и оформления создаваемых документов).

Ответы на контрольные вопросы и выводы по выполненной работе.

hello_html_66580dce.gif


КОНТРОЛЬНЫЕ ВОПРОСЫ


  1. С какой целью (для использования в какой части сайта) мог быть создан файл bg_about_me.jpg.

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

  3. Укажите достоинства и недостатки пакета Microsoft FrontPage как универсального инструмента для обмена и управления узлами в Web в сравнении с другими средствами редактирования HTML-страниц.

  4. Параметры (атрибуты) какого элемента определяются заново при изменении в редакторе цвета фона веб-страницы.

  5. Какими атрибутами или какими элементами HTML устанавливаются наклон, толщина, подчеркивание и другие особенности шрифта в тексте и его фрагментах.



Преподаватель: __________(О.А. Солодовникова)

Практическая работа рассмотрена на заседании цикловой комиссии математики и информатики рекомендована на утверждение.

Протокол № 1 от 29.08.2016

Председатель комиссии: ____________(Н.В.Меркулова)





ГБПОУ ВО «Острогожский многопрофильный техникум»


УТВЕРЖДАЮ

Заместитель директора

по учебной работе

__________О.В.Редина




ИНСТРУКЦИОННО - ТЕХНОЛОГИЧЕСКАЯ КАРТА

на выполнение практической работы №2

по дисциплине WEB – программирование

для студентов, обучающихся по специальности

Программирование в компьютерных системах


ТЕМА: Элементы языка гипертекстовой разметки HTML.

НАИМЕНОВАНИЕ РАБОТЫ: Создание HTML документа. Разметка текстового контента. Форматирование списков HTML.

ЦЕЛЬ РАБОТЫ: Проектирования и тестирования (исследования) веб-сайтов с помощью редактора HTML-страниц.

Формируемые компетенции: ОК4,ОК5, ОК6.

ПРИОБРЕТАЕМЫЕ УМЕНИЯ И НАВЫКИ: освоить основные теги создания HTML-документа.

НОРМА ВРЕМЕНИ: 90 минут

ОСНАЩЕНИЕ РАБОЧЕГО МЕСТА: ПК.

ОСОБЫЕ ПРАВИЛА ПО ТЕХНИКЕ БЕЗОПАСНОСТИ НА РАБОЧЕМ МЕСТЕ: проведен инструктаж по техники безопасности в компьютерном классе.



ВОПРОСЫ ПРИ ДОПУСКЕ:

    1. Перечислите основные теги.

    2. Какие теги применяются к оглавлению.


МЕТОДИЧЕСКИЕ РЕКОМЕНДАЦИИ

Ознакомитесь с предложенными рекомендациями.

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


Пример:

<p>, <br> - одиночные теги. Для них нет закрывающего тега.

, - парныетеги. <> - открывающий тег, > - закрывающий тег


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


Пример:

Name=”название”


Если эти значения используют латинские символы, цифры, то кавычки иногда опускают

Атрибуты тега отделяются друг от друга пробелами, при этом порядок их следования произволен.


Пример:

<tableborder=0 width=”100%”>


Язык HTML не различает большие и малые буквы, как что теги <TITLE>, <Title>и<title> эквивалентны.


Каждый HTML-документ имеет определенную структуру:


html>


Таким образомHTML-документ содержит теги <html> и html>, отмечающие конец документа, заголовок, ограниченный тегами <head>и head>, а также тело или содержательную часть документа, заключенную между тегами <body> и body>.

Документ HTML может содержать комментарии для пояснения кода. Комментарии могут состоять из произвольного числа строк и начинаться с последовательности .


Пример:

.


Следует помнить, что комментарии являются частью файла, передаются по сети вместе с документом и могут приводить к увеличению времени загрузки.


порядок выполнения работы


1.Выполнить создание HTML-страницы.

2.Сделайте отчет о выполнении предложенных заданий.

3.Ответьте на контрольные вопросы.

В текстовом редакторе Блокнот ввести код, содержащий основные теги для определения структуры HTML-документа:

body>

html>

  1. Введите в HTML-документ название WEB-станицы и краткую информацию о фирме АТЛАНТ

    1. Между тегами<titletitle>наберите название WEB-страницы Компания АТЛАНТ.

    2. Между тегами<body> и body>вставьтеновую строку с информацией о компании:


Компания АТЛАНТ обеспечит вас компьютерами и программными продуктами на любой вкус.

Цвета фона и текста можно задавать в цифровом или символьном виде. Словесное указание цвета более удобно использовать, зато численное обозначение позволяет задавать любой оттенок. Атрибутыbgcolorи textобеспечивают установку цвета фона и текста WEB-страницы. Основные теги и их атрибуты вы найдете в приложении к данной практической работе.

Вместо тега <body> введите фрагмент HTML-кода: <bodybgcolor=bluetext=red>

Сохраните файл с именем атлант.html в папке ПОКС/HTML/PR1личного диска.

Загрузите InternetExplorer, в поле ввода окна программы введите полный путь к файлуатлант.html(рис.1)


hello_html_af122e.png

Рис. 1 Созданная WEB-страница


Самостоятельно изменить вид созданной WEB-страницы по примеру рисунка 2.

Фоновый рисунок может быть любым.


hello_html_m5885829b.png

Рис. 2 Обработанная WEB-страница


Контрольные вопросы


1. Какуюструктуру имеет
HTML-документ.


Преподаватель: __________(О.А. Солодовникова)

Практическая работа рассмотрена на заседании цикловой комиссии математики и информатики рекомендована на утверждение.

Протокол № 1 от 29.08.2016

Председатель комиссии: ____________(Н.В.Меркулова)



ГБПОУ ВО «Острогожский многопрофильныйй техникум»


УТВЕРЖДАЮ

Заместитель директора

по учебной работе

__________О.В.Редина





ИНСТРУКЦИОННО - ТЕХНОЛОГИЧЕСКАЯ КАРТА

на выполнение практической работы №3

по WEB-программировнаию

для студентов, обучающихся по специальности

Программирование в компьютерных системах


ТЕМА: Элементы языка гипертекстовой разметки HTML.

НАИМЕНОВАНИЕ РАБОТЫ: Работа с гиперссылками.

ЦЕЛЬ РАБОТЫ: научиться формировать гиперссылки на смежные документы Internet и на метки в текущем документе.

Формируемые компетенции: ОК4,ОК5, ОК6.

ПРИОБРЕТАЕМЫЕ УМЕНИЯ И НАВЫКИ: освоить технологию создания гиперссылок в HTMLдокументе.

НОРМА ВРЕМЕНИ: 90 минут

ОСНАЩЕНИЕ РАБОЧЕГО МЕСТА: ПК, тетрадь для ПЗ.

ОСОБЫЕ ПРАВИЛА ПО ТЕХНИКЕ БЕЗОПАСНОСТИ НА РАБОЧЕМ МЕСТЕ: проведен инструктаж по техники безопасности в компьютерном классе.

ЛИТЕРАТУРА: HTML в примерах. Как создать свой Web – сайт. СамоучительДригалкин В.В.М.: ДИАЛЕКТИКА,2006, стр.35-38.

МЕТОДИЧЕСКИЕ РЕКОМЕНДАЦИИ


Ознакомитесь с предложенными рекомендациями.

Важнейшим свойством языка HTML является возможность размещения на странице ссылок на другие документы. Возможны ссылки:

  • на удаленный HTML файл,

  • на некоторую точку в текущем HTML-документе,

  • на любой файл, не являющийся HTML-документом.

В качестве ссылки можно использовать текст или графику.

Ссылки в пределах одного документа

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

Ссылка должна выглядеть примерно так:
Понедельник

Перед именем метки ПН, указывающей куда производится ссылка, ставится символ #. Между символами > и < располагается текст Понедельник, на котором производится щелчок для перехода по ссылке.

Метка должна выглядеть примерно так:
Понедельник

Ссылки на другой HTML-документ
Ссылки позволяют щелчком по выделенному слову или фразе перейти к другому файлу.

Ссылка должна выглядеть примерно так:
Пример

После имени файла example.html, указывается между символами> и < текст Пример, по которому производится щелчок для перехода к этому файлу.


порядок выполнения работы

  1. Выполнить создание гиперссылок в HTML-документе.

  2. Сделайте отчет о выполнении предложенных заданий.

  3. Ответьте на контрольные вопросы.


Создание ссылок в пределах одного документа.

  1. Откройте файл yoga.html с помощью текстового редактора "Блокнот" (Notepad) и поместите в начало страницы следующий код:

Понедельник

Вторник

Среда

Четверг

Пятница

Суббота


  1. Определите для слова Суббота в расписании метку:

СБ">Суббота

  1. Определите ссылку для выбранной метки:

...

Понедельник

Вторник

Среда

...

СБ">Суббота

...

  1. Сохраните файл.

  2. Для просмотра созданной Web-страницы используйте броузер Microsoft Internet Explorer.

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

  4. Определите ссылки и соответствующие метки для остальных дней недели.

  5. Продемонстрируйте полученный документ преподавателю.

Создание ссылок на другой HTML-документ.

  1. Создайте с помошью текстового редактора "Блокнот" (Notepad) файл my_schedule.html и поместите в начало страницы следующий код:

Понедельник

Вторник

Среда

Четверг

Пятница

Суббота


  1. Сохраните созданный файл в ту же папку, что и файлы schedule_monday.html, schedule_tuesday.html, ... schedule_sunday.html из лабораторной работы N4.

  2. Определите для слова Понедельник ссылку на внешний документ: <A HREF="schedule_monday.html">ПонедельникA>

  3. Сохраните файл.

  4. Для просмотра Web-страницы используйте броузер Microsoft Internet Explorer.

  5. Убедитесь, что после щелчка указателем мыши на ссылку Понедельник в окне браузера загружается страница schedule_monday.html.

  6. Определите ссылки для остальных дней недели.

Создание графической ссылки.

  1. Сохраните графический файл yoga.gif в ту же папку, что и файл my_schedule.html.

  2. Внесите изменения в файл my_schedule.html так, чтобы в конце страницы была ссылка на страницу yoga.html. В качестве ссылки используется графический файл yoga.gif:

yoga.gif

  1. Сохраните файл.

  2. Для просмотра созданной Web-страницы используйте броузер Microsoft Internet Explorer.

  3. Измените созданную ссылку таким образом, чтобы по щелчку мыши браузер загружал страницу yoga.html и фокусировался на метке Суббота.

  4. Продемонстрируйте полученный документ преподавателю.

Задание карты ссылок.

Элемент IMG позволяет использовать изображения, отдельные части которых связаны со ссылками и позволяют выполнять переходы. Такие изображения называются картами (mар). Для определения полей карты используется атрибут

usemap="#Имя"

Это имя ставится в соответствие со значением соответствующих атрибутов элементов AREA и MAP (см. ниже), которые определяют конфигурацию карты. Задание атрибутов usemap придает элементу IMG свойства, характерные для элемента А, то есть возможность осуществления перехода. Для определения карты необходимо обязательное совместное использование сразу трёх элементов: AREA, IMG и MAP.

Элемент MAP необходим для общего определения карты. Внутри него определяются области карты при помощи элементов AREA и задается имя карты при помощи атрибута:

name="Имя"

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

REL="nofollow" target="_blank" HREF="https://infourok.ru/go.html?href=http%3A%2F%2F%D0%90%D0%B4%D1%80%D0%B5%D1%81"

Атрибут для задания текста, заменяющего изображение карты, не является обязательным:

alt="Текст подсказки"

Атрибуты, определяющие форму области на карте, являются обязательными. Существует три стандартных вида областей: круг (circle), прямоугольник (rect) и многоугольник произвольной формы (polygon). Для круга необходимо задать координаты центра и радиус (r), выраженные в пикселах. Координаты центра отсчитываются от левого края (х) и верхнего края (у) рисунка. Шаблон для задания круговой области таков:

shape="circle", coords=x, у, r

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

shape="poly" coords=x1, у1, х2, у2, х3, у3 ...

При определении прямоугольной области задают координаты верхнего левого и правого нижнего углов прямоугольника:

shape="rect" coords=x1, y1, x2, y2

  1. Сохраните графический файл week.jpg в ту же папку, что и файл my_schedule.html. В начало файла my_schedule.html вставьте следующий код:

аlt="Понедельник" shape="rect" coords="2, 0, 312, 31" REL="nofollow" target="_blank" HREF="https://infourok.ru/go.html?href=schedule_monday.html">

аlt="Пятница" shape="rect" coords="2, 118, 312, 148" REL="nofollow" target="_blank" HREF="https://infourok.ru/go.html?href=schedule_friday.html">

</SPAN></FONT></FONT><FONT FACE=Расписаниенанеделю">

  1. Сохраните файл. Для просмотра созданной Web-страницы используйте броузер Microsoft Internet Explorer.Вы должны увидеть Web-страницу с определенным в ее начале графическим изображением дней недели. При щелчке указателем мыши на дни Понедельник и Пятница браузер загружает страницы с соответствующим расписанием. Определите ссылки на карте для остальных дней недели.


Контрольные вопросы

  1. Как выглядит тег для ссылки в пределах одного документа.

  2. Как выглядит тег для ссылки на другой HTML-документ.

Преподаватель: __________(О.А. Солодовникова)

Практическая работа рассмотрена на заседании цикловой комиссии математики и информатики рекомендована на утверждение.

Протокол № 1 от 29.08.2016

Председатель комиссии: ____________(Н.В.Меркулова)







ГБПОУ ВО «Острогожский многопрофильный техникум»


УТВЕРЖДАЮ

Заместитель директора

по учебной работе

__________О.В.Редина





ИНСТРУКЦИОННО - ТЕХНОЛОГИЧЕСКАЯ КАРТА

на выполнение практической работы №4

по WEB-программировнаию

для студентов, обучающихся по специальности

Программирование в компьютерных системах


ТЕМА: Элементы языка гипертекстовой разметки HTML.

НАИМЕНОВАНИЕ РАБОТЫ: Работа с таблицами.

ЦЕЛЬ РАБОТЫ: научиться создавать и редактировать таблицы в терминах языка HTML.

Формируемые компетенции: ОК3,ОК4,ОК5, ОК6.

ПРИОБРЕТАЕМЫЕ УМЕНИЯ И НАВЫКИ: освоить технологию создания таблиц в HTML документе.

НОРМА ВРЕМЕНИ: 90 минут

ОСНАЩЕНИЕ РАБОЧЕГО МЕСТА: ПК, инструкционная карта,тетрадь для ПЗ.

ОСОБЫЕ ПРАВИЛА ПО ТЕХНИКЕ БЕЗОПАСНОСТИ НА РАБОЧЕМ МЕСТЕ: проведен инструктаж по техники безопасности в компьютерном классе.

ЛИТЕРАТУРА: JavaScript, PHP и MySQL. Джентельменский набор web-мастера, Прохоренок Н.А. Спб.; БХВ – Петеррбург,2009, стр. 12-15


МЕТОДИЧЕСКИЕ РЕКОМЕНДАЦИИ

Ознакомитесь с предложенными методическими рекомендациями.

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

  • название таблицы,

  • заголовки столбцов,

  • ячейки.

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

Теги оформления таблиц

Тег

Форма записи

Примечание

TABLE

Объявление таблиц.

TR

текст

Объявление строки.

TD

текст

Объявление ячейки в строке.

Атрибуты тега

Атрибут

Форма записи

Примечание

BORDER

Задает рамку вокруг таблицы.

WIDTH

Задает ширину таблицы как ХХ% от ширины страницы или как ХХ пикселов.

BGCOLOR

Задает цвет фона таблицы.

Атрибуты тегов

и Атрибут

Форма записи

Примечание

ALIGN

Устанавливает выравнивание по горизонтали (Right, Left, Center)

VALIGN

Устанавливает выравнивание по вертикали (Top, Middle, Bottom, Baseline)

BGCOLOR

Задает цвет фона ячейки.

Еще один тег для оформления ячеек таблиц — тег

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

Если нужно задать заголовок всей таблицы, используйте тег .... Он должен быть внутри тега

, но вне описания ячеек. Тег имеет один параметр:ALIGN - указывает положение заголовка: он может быть в верхней (TOP) или нижней (BOTTOM) части таблицы.

порядок выполнения работы


1.Выполнитесоздание таблиц на HTML-странице.

2.Сделайте отчет о выполнении предложенных заданий.

3.Ответьте на контрольные вопросы.


Создание простой таблицы.

Запустите стандартную программу Блокнот (Notepad) и наберите следующий текст с элементами форматирования:

Мама

Папа

Сын

Для просмотра созданной Web-страницы используйте броузер Microsoft Internet Explorer.

Вставьтевтег

следующиеатрибуты: width=50% align="center" bgcolor="yellow" bordercolor="blue". Просмотрите обновленный документ в браузере.

Добавьте втег

атрибут: cellspacing=5. Просмотрите обновленный документ в браузере.

Измените значение атрибута cellspacing на 10, 30 и посмотрите что произойдет с таблицей.

Добавьте между второй парой тегов : теги

дядя дедушка Просмотрите полученный документ в окне браузера.

Добавьте между третьей парой тегов : теги

дочь внучка Просмотрите обновленный документ в браузере.

Добавьте в первой паре тегов : в теге

атрибут colspan=3. Просмотрите полученный документ в окне браузера.

Добавьте в первой паре тегов : в теге

еще атрибут align="center" Просмотрите полученный документ в окне браузера.

Добавьте во второй паре тегов : в первом теге

атрибут rowspan=2 Просмотрите полученный документ в окне браузера.

Удалите из второй пары тегов : тег

внучка Просмотрите полученный документ в окне браузера.

Задание на самостоятельное выполнение.

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

Учебныйфайл HTML

Расписание занятий V курса

V курс

Понедельник

Пара3-85813-85823-8583

1Мировые инф. рес-сыПроектирование Интернет-приложенийТхн. проект-ия СП

2Проектирование Интернет-приложенийМировые инф. рес-сыПроектирование Интернет-приложений

3Тхн. проект-ия СПТхн. проект-ия СПМировые инф. рес-сы

Сохраните файл под именем schedule_monday.html.

Используя различные варианты оформления таблиц, создайте файлы с именами schedule_tuesday.html и schedule_wednesday.html, содержащие расписание на вторник и среду, соответственно.

В файле schedule_friday.html создайте таблицу такого вида:

hello_html_28ffd56a.jpg

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

В файле schedule_sunday.html создайте таблицу такого вида:

hello_html_m152cdad3.jpg

Для созданной таблицы установите следующие параметры: расположение на экране — левостороннее, ширина 550 пикселей. Цвет общей горизонтальной ячейки — красный. Цвет всей таблицы — желтый.

В файле schedule_thursday.html создайте таблицу такого вида:

hello_html_m13ce28cf.jpg

Для созданной таблицы установите следующие параметры: расположение на экране — правостороннее, ширина 550 пикселей. Цвет общей ячейки — оранжевый. Цвет всей таблицы — серый.


Контрольные вопросы


Перечислите теги формирования таблиц.


Преподаватель: __________(О.А. Солодовникова)

Практическая работа рассмотрена на заседании цикловой комиссии математики и информатики рекомендована на утверждение.

Протокол № 1 от 29.08.2016

Председатель комиссии: ____________(Н.В.Меркулова)



ГБПОУ ВО «Острогожский многопрофильный техникум»


УТВЕРЖДАЮ

Заместитель директора

по учебной работе

__________О.В.Редина





ИНСТРУКЦИОННО - ТЕХНОЛОГИЧЕСКАЯ КАРТА

на выполнение практической работы №5

по WEB-программировнаию

для студентов, обучающихся по специальности

Программирование в компьютерных системах


ТЕМА: Элементы языка гипертекстовой разметки HTML.

НАИМЕНОВАНИЕ РАБОТЫ: Работа с формами.

ЦЕЛЬ РАБОТЫ: освоить основные способы работы с формами в HTML.

Формируемые компетенции: ОК3,ОК4,ОК5, ОК6.

ПРИОБРЕТАЕМЫЕ УМЕНИЯ И НАВЫКИ: научиться создавать и работать с формами в HTML.

НОРМА ВРЕМЕНИ: 90 минут

ОСНАЩЕНИЕ РАБОЧЕГО МЕСТА: ПК, тетрадь для ПЗ.

ОСОБЫЕ ПРАВИЛА ПО ТЕХНИКЕ БЕЗОПАСНОСТИ НА РАБОЧЕМ МЕСТЕ: проведен инструктаж по техники безопасности в компьютерном классе.

ЛИТЕРАТУРА: HTML в примерах. Как создать свой Web – сайт. Самоучитель Дригалкин В.В. М.: ДИАЛЕКТИКА,2006, стр. 180-185



МЕТОДИЧЕСКИЕ РЕКОМЕНДАЦИИ

Ознакомьтесь с предложенными рекомендациями.

Формы служат для обмена данными между клиентом и веб-сервером по протоколу CGI. Другими словами говоря, вы заполняете форму нажимаете кнопку, и ваши данные уходят на сервер в виде: [имя_переменной]=[значение_переменной].

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

ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ:



1.Выполнить создание форм в HTML-документе.

2.Сделайте отчет о выполнении предложенных заданий.

Задание формы.

Форма задается тэгами  и состоит из управляющих элементов (текстовое поле, кнопка, список и т.д.).

Атрибуты тэга :

action="URL"

URL-адрес CGI-программы, выполняющей обработку данных.

method

Способ передачи данных веб-серверу. Может принимать значения:

get -программа CGI, указанная в параметре ACTION, получит данные из формы через переменную среды с именем QUERY_STRING;

post -программа CGI получит данные из формы через стандартный поток ввода;

enctype

Тип передаваемых данных данных. Значение по умолчанию - application/x-www-form-urlencoded.

Создание списка.

Список создается тэгом 

Атрибуты тэга :

name

имя списка, которое передается веб-серверу в паре с выбранной строкой

size

высота списка в строках. По умолчанию список раскрывающийся т.е. видна только одна строка.

Для записи строк в список используется тэг .
Строка, отмеченная параметром selected, будет выбрана в списке по умолчанию.

Пример:
Примерсписка:

Январь
Февраль
Март



Примерраскрывающегося:

Январь
Февраль
Март



Поле для ввода многострочного текста.

Создается тэгом 

Атрибуты тэга :

name

имя поля

rows

Число строк по вертикали.

cols

Число символов по горизонтали.

Пример:
Текстпрограммы:

Здесь

введен

многострочный

текст.

Результат выполнения:


Другие элементы управления.

Создаются с помощью тэга 

Атрибуты тэга :

type

Тип элемента управления.

name

Имя элемента управления.

value

Начальное значение или состояние элемента управления.

checked

Установка начального значения переключателей.

size

Ширина текстового поля в символах. По умолчанию 20 символов.

maxlenght

Максимальное количество символов в текстовом поле.

align

Выравнивание текста, около формы.

src

URL графического изображения, если оно используется в элементе управления


Параметры атрибута :

text

однострочное поле для ввода текста.

password

аналогичен элементу управления text, но символы, вводимые в этот элемент управления, не отображаются на экране.

checkbox

Элемент управления переключатель.

radio

Элемент управления радиокнопка.

file

Элемент управления для выбора и передачи файлов.

button

Орган управления кнопка.

submit

Кнопка для пересылки данных из заполненной формы веб-серверу.

reset

Кнопка для сброса содержимого формы в начальное значение.

image

Замена кнопки submit графическим изображением.

hidden

Скрытое текстовое поле.

Примеры:
Текстовое поле:
 


Полевводапароля:
 


Переключатель:
 

 


Группарадиокнопок:


 
  

Отдельныерадиокнопки:


 
  

Произвольнаякнопка:
Кнопка"> 


Графическоеизображениевместокнопки:

При нажатии мышью на такую кнопку CGI программе будут переданы две переменные : name.x (где name - имя кнопки, а x - x- координата точки нажатия в пикселях), и name.y. Начало координат - левый верхний угол рисунка. Все значения атрибута VALUE игнорируются. Картинка задается тэгом < SRC> и по синтаксису совпадает с тэгом .

Передача файлов:

Внимание! Поскольку данная возможность требует поддержки получения файлов WEB-сервером, то, соответственно, необходимо, чтобы сервер поддерживал получение файлов! Например:


Отправитьданныйфайл:


Отправитьфайл">

Начало формы

Отправить данный файл: 



Конец формы

Создание работающих форм без написания CGI-обработчика.

HTML имеет механизм пересылки содержимого формы по электронной почте. Для этого в тэге , укажем следующие значения атрибутов:
method="post", action="mailto:adress@domain.ru?subject=Message", enctype="text/plain".
В этом случае произойдет передача данных формы по электронному адресу "adress@domain.ru" в незакодированном "text/plain" виде. Заметьте, что параметром ?subject можно указать почтовой программе тему (Subject) сообщения

Пример работающей формы:

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


Ваш возраст

Откуда Вы узнали про этот сайт

из поисковой системы
нашел по ссылкам
случайно

Следует ли дальше продолжать уроки HTML?
да

нет

не знаю

Какие разделы Вы хотели бы видеть еще?
JavaScript

MySQL

Perl

VBScript

DHTML

Никакие


Проголосовать">
Обнулить">

Начало формы

Ваш возраст:


Откуда Вы узнали
про этот сайт


Следует ли дальше продолжать уроки HTML?

да


 

 

нет


 

 

не знаю


 

 

Какие разделы Вы хотели бы видеть еще?

JavaScript


MySQL


Perl


VBScript


DHTML


Никакие




Конец формы

Письмо придет приблизительно такого содержания:
old=33
Where_You_Find_This_Site=из поисковой системы
To_Continue_Lessons=yes
js=yes

Еще один способ заставить форму работать - применить к ней обработку событий JavaScript. При нажатии на кнопку в ней возникает событие "OnClick", которое можно обработать написав функцию-обработчик.
Например, создадим простейшую форму, складывающую два числа по нажатию кнопки.
Создадимформудлявводачисел:

+



Инапишемфункцию, получающуюаргументыизполей val1 и val2 ивыводящуюрезультатвполе is:

{
document.calc.is.value=eval(parseFloat(document.calc.val1.value)+parseFloat(document.calc.val2.value));
}

Теперь попробуйте сложить два числа используя эту форму.

Начало формы

+  =

Конец формы


Преподаватель: __________(О.А. Солодовникова)

Практическая работа рассмотрена на заседании цикловой комиссии математики и информатики рекомендована на утверждение.

Протокол № 1 от 29.08.2016

Председатель комиссии: ____________(Н.В.Меркулова)



ГБПОУ ВО «Острогожский многопрофильный техникум»


УТВЕРЖДАЮ

Заместитель директора

по учебной работе

__________О.В.Редина





ИНСТРУКЦИОННО - ТЕХНОЛОГИЧЕСКАЯ КАРТА

на выполнение практической работы №6

по WEB-программировнаию

для студентов, обучающихся по специальности

Программирование в компьютерных системах


ТЕМА: Элементы языка гипертекстовой разметки HTML.

НАИМЕНОВАНИЕ РАБОТЫ: передача данных через HTML – формы.

ЦЕЛЬ РАБОТЫ: закрепление навыков передачи данных через HTML – формы.

Формируемые компетенции: ОК3,ОК4,ОК5.

ПРИОБРЕТАЕМЫЕ УМЕНИЯ И НАВЫКИ: получить практические навыкипередачи данных через HTML – формы.

НОРМА ВРЕМЕНИ: 90 минут

ОСНАЩЕНИЕ РАБОЧЕГО МЕСТА: ПК, тетрадь для ПЗ.

ОСОБЫЕ ПРАВИЛА ПО ТЕХНИКЕ БЕЗОПАСНОСТИ НА РАБОЧЕМ МЕСТЕ: проведен инструктаж по техники безопасности в компьютерном классе.

ЛИТЕРАТУРА: JavaScript, PHP и MySQL. Джентельменский набор web-мастера Прохоренок Н.А. Спб.; БХВ – Петеррбург,2009, гл.7



ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ:


1. Создайте страницу для передачи данных через HTML – формы.

2.Сделайте отчет о выполнении предложенных заданий.

Сначала напишем HTML-документ, который будет содержать практически все элементы HTML-формю Параметры формы мы будем передавать скрипту для последующией обработки. Итак, листинг HTML-документа send.html:




Test Form PHP.SU


Тестовая форма



Текстовое поле:


Поле ввода пароля: 


Скрытое поле hidden 



Независимые переключатели (checkbox):




Вариант первый

Вариант второй

Вариант третий (по умолчанию)



Зависимые переключатели (radio):



 
Да 
 
Нет



Многострочное текстовое поле (textarea):



Текст по умолчанию 



Список с единственным выбором:




Понедельник
Вторник
Среда
Четверг
Пятница
Суббота
Воскресенье


Список с множественным выбором (multiple):




Понедельник
Вторник
Среда
Четверг
Пятница
Суббота
Воскресенье
 





    


© 2005 PHP.SU




В окне браузера данная форма будет выглядеть так

hello_html_m5e7ebfaf.png

Когда пользователь нажимает кнопку "Отослать форму", браузер передаст скрипту следующие параметры:

textfield - значение текстового поля;

pswfield - значение поля ввода пароля;

hidden - значение скрытого поля;

параметры checkboxcheckbox1checkbox2 и checkbox3 будут переданы только в том случае, если соответствующие им независимые переключатели активны;

radiobutton - значение группы radio (будет передано одно из значений: Yes или No);

textarea - содержимое многострочной текстовой области;

day_s - значение списка с единственным выбором;

day_m - значения списка с множественным выбором.

Теперь перед нами стоит задача обработки всех параметров переданной формы с помощью PHP скрипта.

Параметры textfieldpswfield и textarea обрабатываются достаточно просто. Например, для отображения значения параметра textfield достаточно написать в обрабатывающем скрипте:

echo $_POST['textfield'];

С параметрами checkbox1checkbox2checkbox3, и radiobutton дело обстоит несколько сложнее. Если переключатель не активен, то перечисленные параметры вообще не будут переданы на сервер, как будто их вообще не было. Следовательно, при попытке обратиться в скрипте к этим параметрам, мы получим сообщение, что переменная не существует. Поэтому просто написать echo $_POST['checkbox1']; мы не можем, нам необходимо сначала проверить существование этих параметров в запросе. Проверка существования параметра осуществляется с помощью функции isset(), которая служит для проверки существования переменных.

if (isset($_POST['checkbox1'])) echo $_POST['checkbox1'];
if (isset($_POST['radiobutton'])) echo $_POST['radiobutton'];

Только после проверки существования перечисленных параметров формы можно начинать работу с переменными.Сложнее обрабатывать параметры списка с множественным выбором, так как в этом случае параметры передаются так:

day_m=01&day_m=03&day_m=07...

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

Квадратные скобки []- это признак массива. Циклическая обработка массива осуществляется так:

foreach ($_POST['day_m'] as $key=>$value) echo "$key = $value
";

А теперь приведем окончательный листинг PHP скрипта, обрабатывающего нашу тестовую форму:

<?php
// Выводим HTML-заголовки:
echo '';
echo '';
echo '';
echo 'Test Form PHP.SU';
echo '';
echo '';
echo '

Тестовая форма

';
echo "

Переданное значение текстового поля: "

.$_POST['textfield']."";
echo "

Переданное значение поля пароля: "

.$_POST['pswfield']."";
echo "

Переданное значение скрытого поля hidden: "

.$_POST['hidden']."";
echo '';
echo '

Были включены следующие независимые переключатели: 

';
if (isset($_POST['checkbox1'])) echo "

Первый

";
if (isset($_POST['checkbox2'])) echo "

Второй

";
if (isset($_POST['checkbox3'])) echo "

Третий

";
echo '';

if (isset($_POST['radiobutton']))
{
echo '

Был выбран независимый переключатель со следующим значением: '

;
if ($_POST['radiobutton']==="yes") echo "Yes";
if ($_POST['radiobutton']==="no") echo "No";
echo '';
}
else echo '

Ни один из независимых переключателей не был выбран

';
echo '';
echo '

Значение многострочного текстового поля :

';
echo "

"

.$_POST['textarea']."";
echo '';
echo "

Значение списка с единственным выбором: "

.$_POST['day_s']."";
echo '';
echo '

Значения списка с множественным выбором: 

';
foreach ($_POST['day_m'] as $keys=>$values) echo "$values
"
;
echo '';
echo '

© 2005 http://php.su

">PHP.SU';
echo '';
echo '';
?>

Демонстрацию работы приведенного скрипта будет выглядить так.


hello_html_m7724f369.png


Преподаватель: __________(О.А. Солодовникова)

Практическая работа рассмотрена на заседании цикловой комиссии математики и информатики рекомендована на утверждение.

Протокол № 1 от 29.08.2016

Председатель комиссии: ____________(Н.В.Меркулова)

ГБПОУ ВО «Острогожский многопрофильный техникум»


УТВЕРЖДАЮ

Заместитель директора

по учебной работе

__________О.В.Редина





ИНСТРУКЦИОННО - ТЕХНОЛОГИЧЕСКАЯ КАРТА

на выполнение практической работы №7

по WEB-программировнаию

для студентов, обучающихся по специальности

Программирование в компьютерных системах


ТЕМА: Введениев каскадные таблицы стилей.

НАИМЕНОВАНИЕ РАБОТЫ: Способы динамического управления страницей. Команды DHTML.

ЦЕЛЬ РАБОТЫ: освоить основные способы работы с формами в HTML.

Формируемые компетенции: ОК3,ОК4,ОК5, ОК6.

ПРИОБРЕТАЕМЫЕ УМЕНИЯ И НАВЫКИ: научиться создавать и работать с формами в HTML.

НОРМА ВРЕМЕНИ: 90 минут

ОСНАЩЕНИЕ РАБОЧЕГО МЕСТА: ПК, тетрадь для ПЗ.

ОСОБЫЕ ПРАВИЛА ПО ТЕХНИКЕ БЕЗОПАСНОСТИ НА РАБОЧЕМ МЕСТЕ: проведен инструктаж по техники безопасности в компьютерном классе.

ЛИТЕРАТУРА: 100% самоучитель по созданию web-страницу и web-сайтов. HTML и JavaScript, Гаевский А.Ю., Романовский В.А. М.: Технолоджи, 2005.стр.307-333

МЕТОДИЧЕСКИЕ РЕКОМЕНДАЦИИ

Ознакомьтесь с предложенными рекомендациями.

DHTML (динамический HTML) – это набор средств, которые позволяют создавать более интерактивные Web-страницы без увеличения загрузки сервера. Другими словами, определенные действия посетителя ведут к изменениям внешнего вида и содержания страницы без обращения к серверу.

DHTML построен на объектной модели документа (Document Object Model, DOM), которая расширяет традиционный статический HTML-документ. DOM обеспечивает динамический доступ к содержимому документа, его структуре и стилям. В DOM каждый элемент Web-страницы является объектом, который можно изменять. DOM не определяет новых тэгов и атрибутов, а просто обеспечивает возможность программного управления всеми тэгами, атрибутами и каскадными листами стилей (CSS).


ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ:

1.Рассмотрите предложенные варианты динамического управления страницей.

2.Сделайте отчет о выполнении предложенных заданий.

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

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

Модель событий DHTML связана с определенной иерархией HTML-контейнеров и основана на всплывании событий и действии по умолчанию.

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


Пример 1.


hello_html_m394bd9dc.png

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

Связывание событий

Установление связи между определенным событием и сценарием называется связыванием событий. События можно связать с помощью специальных атрибутов любого элемента или с помощью тэга SCRIPT.

Связывание событий с атрибутами удобно, но требует расширения языка HTML каждый раз при изобретении нового события. А так как HTML развивается медленно, данный подход используется только для небольшого набора встроенных событий. Как атрибуты любого элемента в DHTML представлены события мыши и клавиатуры.

Пример 2.hello_html_m299daaca.pnghello_html_m4cea730e.png

Пример 3.

hello_html_73b40825.png


Преподаватель: __________(О.А. Солодовникова)

Практическая работа рассмотрена на заседании цикловой комиссии математики и информатики рекомендована на утверждение.

Протокол № 1 от 29.08.2016

Председатель комиссии: ____________(Н.В.Меркулова)



ГБПОУ ВО «Острогожский многопрофильный техникум»


УТВЕРЖДАЮ

Заместитель директора

по учебной работе

__________О.В.Редина





ИНСТРУКЦИОННО - ТЕХНОЛОГИЧЕСКАЯ КАРТА

на выполнение практической работы №8

по WEB-программировнаию

для студентов, обучающихся по специальности

Программирование в компьютерных системах


ТЕМА: Введениев каскадные таблицы стилей.

НАИМЕНОВАНИЕ РАБОТЫ: создание динамической web-страницы.

ЦЕЛЬ РАБОТЫ: научиться создавать динамические web-страницы. Разобрать на примерах их достоинства и недостатки.

Формируемые компетенции: ОК5.

ПРИОБРЕТАЕМЫЕ УМЕНИЯ И НАВЫКИ: освоить способы создания динамическойweb-страницы.

НОРМА ВРЕМЕНИ: 90 минут

ОСНАЩЕНИЕ РАБОЧЕГО МЕСТА: ПК, тетрадь для ПЗ.

ОСОБЫЕ ПРАВИЛА ПО ТЕХНИКЕ БЕЗОПАСНОСТИ НА РАБОЧЕМ МЕСТЕ: проведен инструктаж по техники безопасности в компьютерном классе.

ЛИТЕРАТУРА: 100% самоучитель по созданию web-страницу и web-сайтов. HTML и JavaScript, Гаевский А.Ю., Романовский В.А., М.: Технолоджи, 2005, стр. 335-361


ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ:

1.Выполнить создание динамическойweb-страницы.

2.Сделайте отчет о выполнении предложенных заданий.

Создадим шаблон страницы следующего вида.

Заголовок сайта

Меню

Основная часть

Нижняя часть

Задание 1.Создадим страницу при помощи фреймов

<
head>
<
title>7 лабаtitle>
head>
<
framesetrows="25%,50%,25%">
<
framesrc="D:\proekt\страница.html">
<
framesetcols="25%,75%">
<
framesrc="D:\proekt\музыка.html">
<
framesrc="D:\proekt\stix.html">
frameset>
html>

Задание 2. Создадимприпомощитаблиц
<
html>
<
head>
<
title>Таблицаtitle>
head>
<
body>
<
tablewidth=100% height=100% >
<
tr>
<
tdcolspan="2">

Заглавная страница


td>
tr>
<
tr>
<
tdwidth="50%">
<
h2>Менюh2>
td>
<
tdwidth="50%">

Основная часть






Нижняя часть


td>
tr>
table>
body>
html>

3 тегdiv


div



Заголовок сайта






Навигация




Содержаниестраницы






Информацияобавторе




Преподаватель: __________(О.А. Солодовникова)

Практическая работа рассмотрена на заседании цикловой комиссии математики и информатики рекомендована на утверждение.

Протокол № 1 от 29.08.2016

Председатель комиссии: ____________(Н.В.Меркулова)

ГБПОУ ВО «Острогожский многопрофильный техникум»


УТВЕРЖДАЮ

Заместитель директора

по учебной работе

__________О.В.Редина





ИНСТРУКЦИОННО - ТЕХНОЛОГИЧЕСКАЯ КАРТА

на выполнение практической работы №9

по WEB-программировнаию

для студентов, обучающихся по специальности

Программирование в компьютерных системах


ТЕМА: Введение в XML.

НАИМЕНОВАНИЕ РАБОТЫ: составление схем документов XML – документов.

ЦЕЛЬ РАБОТЫ: изучить теоретические основы использования языка разметки XML.

Формируемые компетенции: ОК5.

ПРИОБРЕТАЕМЫЕ УМЕНИЯ И НАВЫКИ: получить практические навыки при составлении схем XML-документов и разборе правильности кода анализаторами.

НОРМА ВРЕМЕНИ: 90 минут

ОСНАЩЕНИЕ РАБОЧЕГО МЕСТА: ПК, тетрадь для ПЗ.

ОСОБЫЕ ПРАВИЛА ПО ТЕХНИКЕ БЕЗОПАСНОСТИ НА РАБОЧЕМ МЕСТЕ: проведен инструктаж по техники безопасности в компьютерном классе.

ЛИТЕРАТУРА: Основы информационных и телекоммуникационных технологий, Попов В.Б. М.: Финансы и статистика, 2005,гл.14


ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ:


1.Выполнить составление схем документов XML – документов.

2.Сделайте отчет о выполнении предложенных заданий.

3.Ответье на контрольные вопросы.


Задание 1. Создание XML документа в текстовом редакторе и проверка структуры документа в программе-браузере Internet Explorer.

Задание:

Создать XML документ в файле 1.xml следующей структуры:

hello_html_m1016b04b.png

Информационная часть документа содержится в элементах NAIM и PRICE и равна слову Бензин – для элемента NAIM и числу 20 – для элемента PRICE. Кодировка документа должна быть WINDOWS-1251, версия языка XML – 1.0, документ должен быть автономным.

Выполнение задания:

Разработка разметки документа, согласно приведенной структуры:

1.1. Указать начальный и конечный теги корневого элемента:

1.2. Указать начальные и конечные теги 2-х дочерних элементов (NAIM иPRICE):

1.3. Указать информационную часть документа в элементах NAIM иPRICE:

Бензин

20

1.4. Указать пролог - версию языка XML, кодировки документа иавтономности.

1.4.1. Пролог указывается в первой строке документа

1.4.2. Содержимоепрологаследующее:

<?xml version=”1.0” encoding=”WINDOWS-1251” standalone=”yes”?>

1.5. Результат работы - текстовое содержимое документа:

<?xml version=”1.0” encoding=”WINDOWS-1251”standalone=”yes”?>

Бензин

20

2. Создание документа в виде текстового файла в текстовом редакторе

2.1. Открыть редактор Блокнот (Notepad)

2.2. Ввести указанный на шаге 1.5 текстовое содержимое документа

2.3. Сохранить файл с именем 1.xml

2.3.1. Значение параметра Тип файла должно бытьВсе файлы

3. Проверка структуры файла

3.1. Открыть программу-браузер Internet Explorer

3.2. Выбрать пункт меню Файл, пунктОткрыть

3.3. Выбрать файл 1.xml из папки (п.2.3.2), в которой он был сохранен.

Вид документа должен соответствовать рисунку 1:

hello_html_6c71bd3b.gif

Рис. 1 Отображение XML-документа в браузере

Задание 2. Создание XML-документ из задания 1 в программе XMLPad c проверкой структуры.

1. Открыть программу XMLPad. После запуска программы появится окно, показанное на рис.2

hello_html_m52c6fc13.gif

Рис. 2 Окно редактора XMLPad

2. Выбрать пункт меню File

2.1. В меню File выбрать пункт New.

2.2. выбрать XML Document в появившемся окне с шаблонами

создаваемых файлов (рис. 3)

hello_html_m4f2a4915.gif

Рис.3 Окно выбора типа файла документа

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

hello_html_92d6f03.gif

Рис. 4 Окно создание нового документа


3. ВыбратьпунктNotassignedвразделеDTDdefinition

3.1. Указать MAIN в поле Root Tag

3.2. Нажать кнопку ОК.

Создаваемый документ будет иметь вид, показанный на рис. 5

hello_html_452a7fa0.gif

Рис. 5 Указание дополнительных параметров документа


4. Создание пролога документа

4.1. Изменение кодировки

4.1.1. Выбрать пункт меню File

4.1.2. ВыбратьпунктAdvanced Save Option

4.1.3. Указать кодировку согласно заданию – WINDOWS-1251

Вид окна с указанием кодировки показан на рис. 6

hello_html_m4ac3aa03.gif

Рис.6 Указание кодировки документа


Документ приобретет вид, показанный на рис. 7


hello_html_m540a10d6.gif

Рис. 7 Определение схемы документа


4.2. Задание параметра standalone

4.2.1. Перейти в тексте документа на первую строку

4.2.2. Написать код: standalone=”yes”

Документ приобретет вид, показанный на рис. 8


hello_html_m7626d6a6.gif

Рис. 8 Вид документа


5. Удалить строку 02 с пустым элементом MAIN

6. Ввести содержимое документа (разметку и текстовое содержание):

Бензин

20

Замечание: Конечный тег элементов проставляется автоматически(дополнительно вводить не требуется) .Документ должен принять вид, показанный на рис. 9

hello_html_maeeac01.gif

Рис.9 Набранный код в окне редактора

7. Выполнить проверку структуры документа

7.1. Выбрать пункт меню XML

7.2. Выбрать пункт Validate

В случае правильно оформленного документа в окне Task List должнабыть отображена одна строка с надписью No DTD for the document. какна рис. 10.


hello_html_m4c275f22.gif

Рис. 10 Проверка правильности кода документа


8. Сохранить документ

Задание 3. Исправить ошибки в документе со следующим содержимым:


<?xmlversion=”2.0” encoding=”Windows-1252”?>

Бензин

200

Выполнение задания:

9. Открыть программу XMLPad

10.Создать новый XML документ

11.Удалить все содержимое (разметку и информационное содержание)

12.Вставить указанное в задании содержимое.

Вид окна программы показан на рис. 11


hello_html_b642955.gif

Рис. 11 Проверка правильности кода


13.Проанализировать ошибки в документе (для этого можно сохранитьдокумент).

Примечание: Ошибки в документе перечислены в окне Task List (внижней части окна программы). Номер строки с ошибкой указан в колонке Lineокна Task List.

Список ошибок:

1. Ошибка в строке 1 - неправильное оформление пролога.

Устранение ошибки:

Требуется заменить символы псевдокавычек (‘’)на символ кавычки (“). Этостандартная ошибка, которая возникает при переносе текста из программыMicrosoft Word. Сообщение об ошибке изменится (рис. 12)

hello_html_7216e80a.gif

Рис. 12 Указание ошибки в коде

14.Ошибка в строке 6 – нет конечного тега для элемента naim

Устранение ошибки –Поменять местами конечные теги ,. После взаимной замены этих тегов сообщение об ошибке изменилось(рис. 13)

hello_html_60bc51b8.gif

Рис. 13 Устранение ошибки в коде


15. Ошибка в строке 11 – несоответствие начального тега (строка 2) иконечного тега (строка 11).

Устранение ошибки – Изменить имя конечного тега в строке 11. Послеизменения, сообщение об ошибке изменилось и показано на рис. 14:

hello_html_m7d7b89d2.gif

Рис. 14 Устранение ошибки

16.Ошибка в строке 12 - наличие фрагментов элементов послезакрывающего тега корневого элемента. (/tovar0, tovar1).Устранение ошибки - Удаление всех строк после закрывающего тегакорневого элемента.После устранения ошибки документ стал правильно оформленным(сообщений об ошибках больше нет), что показано на рис. 15

hello_html_3f157565.png

Рис. 15 Правильно оформленный документ

17.Некорректное отображение документа (вкладка Preview). Неверно отображаются русские буквы (рис. 16)

hello_html_5c0f6623.gif

Рис. 16 Некорректное отображение документа


Устранение ошибки: Требуется изменить кодировку документа (значениеатрибута encoding) в прологе документа. Процедура изменения описана в пункте4.1 Задания 1. После задания указанных установок, содержимое документа отображаетсякорректно, что показано на рис. 17

hello_html_m58503bb7.gif

Рис. 17 Корректное отображение документа

Дополнительно требуется проверить правильное значение версии языкаXML в прологе документа (правильное значение версии – 1.0). Вид окнапрограммы показан на рис. 18:

hello_html_3bd8cdde.gif

Рис. 18 Проверка версии языка

Задания для самостоятельного выполнения:

1. Создать XML-файл, хранящий языки и денежные знаки для стран,проверить правильность кода при помощи анализатора;

2. Создать XML-файл, описывающий структуру колледжа (отделение,группа, студент), проверить правильность кода при помощи анализатора;

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

4. Создать XML-файл, описывающий следующую структуру: аэропорт –рейс – экипаж, проверить правильность кода при помощи анализатора.


Контрольные вопросы:

Что такое XML и чем он отличен от HTML?

Из каких частей состоит тело XML-документа?

Каким требованиям должны удовлетворять XML-документы?

Какой XML-документ называется формально-правильным?

Для чего используют анализаторы?

Какие способы контроля правильности XML-документа существуютна сегодняшний момент?


Преподаватель: __________(О.А. Солодовникова)

Практическая работа рассмотрена на заседании цикловой комиссии математики и информатики рекомендована на утверждение.

Протокол № 1 от 29.08.2016

Председатель комиссии: ____________(Н.В.Меркулова)



ГБПОУ ВО «Острогожский многопрофильный техникум»


УТВЕРЖДАЮ

Заместитель директора

по учебной работе

__________О.В.Редина





ИНСТРУКЦИОННО - ТЕХНОЛОГИЧЕСКАЯ КАРТА

на выполнение практической работы №10

по WEB-программировнаию

для студентов, обучающихся по специальности

Программирование в компьютерных системах



ТЕМА: Введениев язык JavaScript.

НАИМЕНОВАНИЕ РАБОТЫ: составление схем документов XML – документов.

ЦЕЛЬ РАБОТЫ: изучить метод создания XML-документа; язык XSL, который позволяет преобразовать документы XML,  используя язык преобразований XSLT.

Формируемые компетенции: ОК5.

ПРИОБРЕТАЕМЫЕ УМЕНИЯ И НАВЫКИ: получить практические навыки при составлении схем XML-документов и разборе правильности кода анализаторами.

НОРМА ВРЕМЕНИ: 90 минут

ОСНАЩЕНИЕ РАБОЧЕГО МЕСТА: ПК, тетрадь для ПЗ.

ОСОБЫЕ ПРАВИЛА ПО ТЕХНИКЕ БЕЗОПАСНОСТИ НА РАБОЧЕМ МЕСТЕ: проведен инструктаж по техники безопасности в компьютерном классе.

ЛИТЕРАТУРА: Основы информационных и телекоммуникационных технологий Попов В.Б. М.: Финансы и статистика, 2005,стр.219-223


ВОПРОСЫ ПРИ ДОПУСКЕ

Как происходит процесс преобразования на стороне клиента?

Как происходит процесс преобразования на стороне сервера?


МЕТОДИЧЕСКИЕ РЕКОМЕНДАЦИИ

На смену HTML был предложен новый язык гипертекстовой разметки, мощный, гибкий, и, одновременно с этим, удобный язык XML.     

XML (Extensible Markup Language) - это язык разметки, описывающий целый класс объектов данных, называемых XML- документами. Этот язык используется в качестве средства для описания грамматики других языков и контроля за правильностью составления документов. Т.е. сам по себе XML не содержит никаких тэгов, предназначенных для разметки, он просто определяет порядок их создания. Кроме того, XML-документы могут выступать в качестве уникального способа хранения данных, который включает в себя одновременно средства для разбора информации и представления ее на стороне клиента.

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

В общем случае XML- документы должны удовлетворять следующим требованиям:


В заголовке документа помещается объявление XML, в котором указывается язык разметки документа, номер его версии и дополнительная информация.

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

В XML учитывается регистр символов.

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

Вложенность тэгов в XML строго контролируется, поэтому необходимо следить за порядком следования открывающих и закрывающих тэгов.

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

Пример: создать XML-документ, в котором содержится информация о книгах: автор, название и цена книги.

hello_html_1ade17f1.png

Любой XML- документ должен всегда начинаться с инструкции , внутри которой также можно задавать номер версии языка, номер кодовой страницы и другие параметры, необходимые программе-анализатору в процессе разбора документа. Обратите внимание на вторую строку документа, где инструкция xml-stylesheet связывает наш документ с таблицей стилей XSL.

Синтаксис этой инструкции одинаков как для привычных таблиц CSS, так и для XSL, отличаясь только атрибутом type, который приобретает соответственно значения text/css и text/xsl. Атрибут href знаком нам по языку HTML и содержит ссылку на файл с таблицей стилей.   Набором всех элементов, содержащихся в документе, задается его структура и определяются все иерархические соотношения.

Для корневого элемента нашего документа используется library. Тэги book, author, name, price являются вложенными тегами.  Тэг book означает то, что речь пойдёт о книгах; тэг author – об авторе книги, тэг name – о названии книги, тэг price – о цене книги.

Документы XML используют для разделения содержания сайта и его дизайна, так как они хорошо подходят для хранения информации. Ведь главная задача XML - это структурирование информации, а не ее отображение.   Язык XSL включает в себя несколько компонентов, но в первую очередь, интересует такая его составная часть, как язык преобразований XSLT (XSL Transformation Language), который позволяет преобразовать документы с одного диалекта XML на другой.   Для того чтобы ознакомиться, как работает эта технология, нам понадобится XML-файл (который описан выше) и файл с набором инструкций для преобразований XSLT, который часто называют таблицей стилей XSL. Рассмотрим простую таблицу стилей XSL example.xsl, которая, однако, содержит достаточно элементов, чтобы понять, как работает эта технология и использовать их для создания вполне работоспособных шаблонов.

Пример XSL-документа:

hello_html_780af034.png

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

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

Он встретится во всех тегах нашей таблицы стилей XSL, указывая на их принадлежность к языку XSLT. Первым делом, надо создать шаблон для корневого элемента нашего документа library, с помощью тега xsl:template с атрибутом match, задающим элемент, для которого шаблон будет применён.

В нашем случае задаем в соответствие корневому элементу стандартные блоки HTML-документа: html, head, title, body, а также создаем таблицу для более удобного представления информации, хранящейся в XML-документе. В блоке body мы применили инструкцию, задача которой - передать содержание элемента library на обработку остальных шаблонов в нашей таблице стилей. Так как это корневой элемент, содержащий все элементы, то и для них будут применены прописанные далее в таблице шаблоны. По такому же принципу построен шаблон для тега book, создающий для каждого элемента строку таблицы.

В следующем шаблоне используем конструкции языка XPath. Его задача - обнаруживать определенные узлы XML по описанию заданному пользователем и передавать их другим инструментам, обрабатывающим документ XML. Благодаря ему мы можем воспользоваться оператором "|" в качестве логического "ИЛИ" для указания элементов, к которым мы хотим применить один и тот же шаблон. Таким образом, мы создаем один шаблон для элементов author, name и price.

Команда xsl:value-of извлекает значение узла XML и помещает его в итоговый документ. Последний шаблон нашего документа обрабатывает текстовое содержание тегов XML, что также указывается с помощью команды XPath text(). Этот шаблон прописывать было не обязательно, так как предыдущий шаблон неявно передает на обработку содержание узлов author, name и price, даже без наших указаний. Тем не менее явная обработка текстовых элементов документа делает наш шаблон более понятным.

В команде xsl:value-of в атрибуте select тоже используется команда XPath ".", которая ссылается на текущий элемент. Таким образом, последний шаблон выполняется при нахождении текстовой строки, извлечет ее значение и поместит в результирующий документ. Команда xsl:value-of используется также в шаблоне для элементов author, name, price - для извлечения значения атрибута currency тега price.

В языке XPath символ "@" используется для обозначения атрибутов элементов, а выражение дает указание извлечь значение атрибута currency и поместить его в итоговый документ. Так как атрибут currency есть только в теге price, то во время обработки тегов author и name не будет возвращено никаких значений, что позволяет использовать эту инструкцию в одном шаблоне для нескольких тегов.

Результат обработки XML-документа с помощью нашей таблицы стилей XSL можно посмотреть браузерах последнего поколения: браузер показывает источник нашего документа как xml-документ, а в окне браузера он отображается как web-страница - со всей информацией, которую хотели вывести:


ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ:

Задание. Составить 2 XML-документа.В одном описать, магазин одежды с её составляющими: а) название фирмы, чья одежда продаётся в магазине, б) вид одежды, в) модель; во втором – каталог цен. Данные свести в таблицы. Документы соединяются при помощи ссылки.  

Магазин одежды: город, улица, фирма  / вид, модель, каталог цен.  

Автомобили: марка, год выпуска, модель / цвет, салон, каталог цен.  

Игрушки: страна, производитель, магазин, / материал, наименование, каталог цен.

Библиотека: автор книги, название, количество страниц / издательство, тираж, год издания книги.  

Рестораны: улица, название, кухня / зал, меню, каталог цен.  

Мобильные телефоны: марка, модель, цвет / полифония, камера, каталог цен.

Бытовая техника: вид, фирма, модель / крупногабаритные, мелкогабаритные, каталог цен.

Строительные материалы: вид, страна, фирма / внутренние работы, наружные работы, каталог цен.

Канцелярские товары: вид, фирма, страна / назначение, материал, каталог цен.

Продукты питания: магазин, наименование, производитель / группы продтоваров, состав, каталог цен.

Мебель: вид, страна, фирма / ткань, цвет, каталог цен.

Цветы: название, место произрастания, размеры, / сорт, цвет, каталог цен.  

Музыкальные инструменты: магазин, фирма, наименование / духовые, струнные, клавишные.  

Спортивный инвентарь: вид спорта, страна, изготовитель / материал, наименование, каталог цен.

Ювелирный магазин: город, название магазина, наименование / изделие, вес, каталог цен.

Туристические фирмы: название, направление, вид транспорта / отель, питание, каталог цен.

Салон красоты: название, страна, адрес / виды услуг, продолжительность сеанса, каталог цен.

Животный мир: континент, страна, название / вес, кожный покров, тип питания.

Студенты: вуз, факультет, группа / год рождения, ФИО, средний балл.  

Киноактёры: страна, фильм, кассовый сбор / роль, премия (Оскар), гонорар.   


Контрольные вопросы


Охарактеризуйте элементы XML- документа, секции CDATA, инструкции по обработке, комментарии, атрибуты, директивы анализатора?

Какие главные отличия XML от HTML?

Как создать шаблон для корневого элемента документа?

Что нужно сделать, чтобы преобразовать XML –документ по XSL-таблице?


Преподаватель: __________(О.А. Солодовникова)

Практическая работа рассмотрена на заседании цикловой комиссии математики и информатики рекомендована на утверждение.

Протокол № 1 от 29.08.2016

Председатель комиссии: ____________(Н.В.Меркулова)



ГБПОУ ВО «Острогожский многопрофильный техникум»


УТВЕРЖДАЮ

Заместитель директора

по учебной работе

__________О.В.Редина





ИНСТРУКЦИОННО - ТЕХНОЛОГИЧЕСКАЯ КАРТА

на выполнение практической работы №11

по WEB-программировнаию

для студентов, обучающихся по специальности

Программирование в компьютерных системах


ТЕМА: Введениев язык JavaScript..

НАИМЕНОВАНИЕ РАБОТЫ: связывание данных XML с элементами HTML.

ЦЕЛЬ РАБОТЫ: изучить теоретические основы связывание данных XML с элементами HTML.

Формируемые компетенции: ОК3.

ПРИОБРЕТАЕМЫЕ УМЕНИЯ И НАВЫКИ: получить практические навыки присвязывание данных XML с элементами HTML.

НОРМА ВРЕМЕНИ: 90 минут

ОСНАЩЕНИЕ РАБОЧЕГО МЕСТА: ПК, тетрадь для ПЗ.

ОСОБЫЕ ПРАВИЛА ПО ТЕХНИКЕ БЕЗОПАСНОСТИ НА РАБОЧЕМ МЕСТЕ: проведен инструктаж по техники безопасности в компьютерном классе.

ЛИТЕРАТУРА: Основы информационных и телекоммуникационных технологий, Попов В.Б. М.: Финансы и статистика, 2005,гл.16


Методические рекомендации

Ознакомьтесь с предложенными рекомендациями.

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

Чтобы иметь возможность отобразить как символьные данные, так и атрибут элемента, DSO использует специальное имя $TEXT для обращения ко всем символьным данным элемента, исключая атрибуты элемента. При связывании данных "$TEXT" можно использовать как обычное имя поля. Например, XML-элемент 


Product #1 
будетприразбореэквивалентенэлементу 
RODUCT>
    10.00
    <$TEXT>Product #1$TEXT>


ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ:


1.Выполнитесвязывание данных XML с элементами HTML.

2.Сделайте отчет о выполнении предложенных заданий.

3.Ответье на контрольные вопросы.


Объект recordset DSO может быть использован для написания довольно функциональных скриптов, обращающихся к XML-данным. Напишем HTML-страницу, которая будет осуществлять поиск данных в связанном XML-документе по вхождению указанной пользователем строки и отображать результаты поиска. Поиск будем производить в XML-документе, приведённом выше в этой статье, а именно - в XML-документе, который мы отображали с помощью вложенных HTML-таблиц. Будем разыскивать товары, у которых есть сорт того цвета, который указал пользователь. Вот текст HTML-документа: 


Color:  Search

Results:




Приведённая выше HTML-страница содержит поле ввода текста для пользователя (с идентификатором "SearchText"), и кнопку запуска поиска. При нажатии на кнопку запускается скрипт, использующий свойства и методы объекта recordset DSO, который осуществляет поиск и выводит результаты в элемент HTML-страницы DIV (с идентификатором "ResultDiv"), расположенный внизу страницы. 


Контрольные вопросы:

1.Какое специальное имя используют длявозможности отобразить как символьные данные, так и атрибут элемента.

Преподаватель: __________(О.А. Солодовникова)

Практическая работа рассмотрена на заседании цикловой комиссии математики и информатики рекомендована на утверждение.

Протокол № 1 от 29.08.2016

Председатель комиссии: ____________(Н.В.Меркулова)


ГБПОУ ВО «Острогожский многопрофильный техникум»


УТВЕРЖДАЮ

Заместитель директора

по учебной работе

__________О.В.Редина





ИНСТРУКЦИОННО - ТЕХНОЛОГИЧЕСКАЯ КАРТА

на выполнение практической работы №13

по WEB-программировнаию

для студентов, обучающихся по специальности

Программирование в компьютерных системах


ТЕМА: Приемы программирования на JavaScript.

НАИМЕНОВАНИЕ РАБОТЫ: операции, операторы, функции.

ЦЕЛЬ РАБОТЫ: изучить операции, операторы и функции JavaScript.

Формируемые компетенции: ОК3,ОК4,ОК5,ОК6.

ПРИОБРЕТАЕМЫЕ УМЕНИЯ И НАВЫКИ: приобрести навыки работы с операциями, операторами и функциями JavaScript.

НОРМА ВРЕМЕНИ: 90 минут

ОСНАЩЕНИЕ РАБОЧЕГО МЕСТА: ПК, текстовый редактор Блокнот, браузер.

ОСОБЫЕ ПРАВИЛА ПО ТЕХНИКЕ БЕЗОПАСНОСТИ НА РАБОЧЕМ МЕСТЕ: проведен инструктаж по техники безопасности в компьютерном классе.

ЛИТЕРАТУРА: Настольная книга web-мастера, Коржинский С.Н. М.:КНОРУС, 2006, стр. 254-280


ВОПРОСЫ ПРИ ДОПУСКЕ:

1.Дайте опрделение понятию JavaScript.


МЕТОДИЧЕСКИЕ РЕКОМЕНДАЦИИ

Ознакомьтесь с теоретическими аспектами темы.

JavaScript - новый язык для составления скриптов, разработанный фирмой Netscape. С помощью JavaScript Вы можете легко создавать интерактивные Web-страницы.

Для запуска скриптов, написанных на языке JavaScript, нужен браузер, способный работать с JavaScript - например Netscape Navigator (начиная с версии 2.0) или Microsoft Internet Explorer (MSIE - начиная с версии 3.0). С тех пор, как оба этих браузера стали широко распространеными, множество людей получили возможность работать со скриптами, написанными на языке JavaScript. Код скрипта JavaScript размещется непосредственно на HTML-странице. Все, что стоит между тэгами , интерпретируется как код на языке JavaScript. Инструкцияdocument.write() - одна из наиболее важных команд, используемых при программировании на языке JavaScript. Команда document.write() используется, когда необходимо что-либо написать в текущем документе (в данном случае таком является наш HTML-документ).

События и обработчики событий являются очень важной частью для программирования на языке JavaScript. События, главным образом, инициируются теми или иными действиями пользователя. Если он щелкает по некоторой кнопке, происходит событие "Click". Если указатель мыши пересекает какую-либо ссылку гипертекста - происходит событиеMouseOver. Существует несколько различных типов событий. Мы можем заставить нашу JavaScript-программу реагировать на некоторые из них. И это может быть выполнено с помощью специальных программ обработки событий. Так, в результате щелчка по кнопке может создаваться выпадающее окно. Это означает, что создание окна должно быть реакцией на событие щелка - Click. Программа - обработчик событий, которую мы должны использовать в данном случае, называется onClick. И она сообщает компьютеру, что нужно делать, если произойдет данное событие.

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

В любое место html-документа можно вставить контейнер script, в теле которого написать сценарий на JavaScript. Например:

alert("Hello world!");

</script>

При этом опреление функции может быть в одном script-контейнере, а вызов в другом; т.е. код доступен из любого места html-документа.

Для подключения внешнего файла с кодом на JavaScript используется следующий синтаксис:

="/путь/имя.js"></script>

Кодировка и doctype

Для гарантированного правильного отображения символов в браузере используется следующий тег, вставляемый в контейнер head:

="utf-8">

Перед тегом html указывается doctype. В настоящее время достаточно написать так:


ПОРОЯДОК ВЫПОЛНЕНИЯ РАБОТЫ


Создайте простую веб-страницу с использованием JavaScript согласно методическим указаниям.

Создайте веб-страницу с формой и кнопкой на основе JavaScript согласно методическим указаниям.

Напишите скрипт, печатающий текст «Добро пожаловать на мою страницу! Это JavaScript» три раза подряд. Инструкция по выполнению задания представлена в методических указаниях.

Создайте веб-страницу с использованием функции calculation().

Создайте отчет о проделанной работе.

Ответьте на контрольные вопросы.


Задание 1.

Запустите блокнот

Введите текст


Это обычный HTML документ.


    document.write("Аэто JavaScript!")


Вновь документ HTML.

Сохраните документ в формате html

Запустите страницу в окне браузера.

Результат выполнения файла в случае, если используемый браузер поддерживает JavaScript:





Если браузер не поддерживает JavaScript, то он проигнорирует тег


Это обычный HTML документ.



Вновь документ HTML.

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





Это обычный HTML документ.

Вновь документ HTML.

Задание 2.

Создайте новый документ html.

Вставьте следующий код

3. Просмотрите результат.

В данном примереНачалоформы

Конецформы

 создается некая форма с кнопкой. Первая новая особенность - onClick="alert('Yo')" в тэге . Таким образом, если имеет место событие Click, компьютер должен выполнить вызов alert('Yo'). Это и есть пример кода на языке JavaScript.

Функция alert() позволяет Вам создавать выпадающие окна. При ее вызове Вы должны в скобках задать некую строку. В нашем случае это 'Yo'. И это как раз будет тот текст, что появится в выпадающем окне. Таким образом, когда читатель когда щелкает на кнопке, наш скрипт создает окно, содержащее текст 'Yo'.

Еще одна особенность данного примера: в команде document.write() мы использовали двойные кавычки ("), а в конструкции alert() - только одинарные. В большинстве случаев Вы можете использовать оба типа кавычек. Однако в последнем примере мы написали onClick="alert('Yo')" - то есть мы использовали и двойные, и одинарные кавычки. Если бы мы написали onClick="alert("Yo")", то компьютер не смог бы разобраться в нашем скрипте, поскольку становится неясно, к которой из частей конструкции имеет отношение функция обработки событий onClick, а к которой - нет. Поэтому мы вынуждены использовать оба типа кавычек. Не имеет значения, в каком порядке Вы использовали кавычки - сначала двойные, а затем одинарные или наоборот. То есть Вы можете точно так же написать и onClick='alert("Yo")'.

Задание 3.

1. Напишите скрипт, печатающий текст «Добро пожаловать на мою страницу! Это JavaScript» три раза подряд. Для начала рассмотрим простой подход:

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

В этом скрипте мы определили некую функцию, состоящую из следующих строк:

function myFunction() {

  document.write("Добро пожаловать на мою страницу!
");

document.write("Это JavaScript!
");}

Все команды скрипта, что находятся внутри фигурных скобок - {} - принадлежат функции myFunction(). Это означает, что обе команды document.write() теперь связаны воедино и могут быть выполнены при вызове указанной функции. И действительно, в нашем примере есть три вызова этой функции В свою очередь, это означает, что содержимое этой функции (команды, указанные в фигурных скобках) было выполнено трижды.

Задание 4.

Создайте новую веб-страничку:

Начало формы

Конец формы

Здесь при нажатии на кнопку осуществляется вызов функции calculation(). Как можно заметить, эта функция выполняет некие вычисления, пользуясь переменными xy и result. Переменную мы можем определить с помощью ключевого слова var. Переменные могут использоваться для хранения различных величин - чисел, строк текста и т.д. Так строка скрипта var result= x + y; сообщает браузеру о том, что необходимо создать переменную result и поместить туда результат выполнения арифметической операции x + y (т.е. 5 + 12). После этого впеременный result будет размещено число 17. В данном случае команда alert(result) выполняет то же самое, что и alert(17). Иными словами, мы получаем выпадающее окно, в котором написано число 17.

КОНТРОЛЬНЫЕ ВОПРОСЫ:



Для чего предназначен язык JavaScript?

Что называют инструкциями?

В чем отличие процедур от событий?



Преподаватель: __________(О.А. Солодовникова)

Практическая работа рассмотрена на заседании цикловой комиссии математики и информатики рекомендована на утверждение.

Протокол № 1 от 29.08.2016

Председатель комиссии: ____________(Н.В.Меркулова)



ГБПОУ ВО «Острогожский многопрофильный техникум»


УТВЕРЖДАЮ

Заместитель директора

по учебной работе

__________О.В.Редина





ИНСТРУКЦИОННО - ТЕХНОЛОГИЧЕСКАЯ КАРТА

на выполнение практической работы №14

по WEB-программировнаию

для студентов, обучающихся по специальности

Программирование в компьютерных системах





ТЕМА: Приемы программирования на JavaScript.

НАИМЕНОВАНИЕ РАБОТЫ: создание сценариев сайта.

ЦЕЛЬ РАБОТЫ: ознакомиться с принципами работы с формами, иерархией объектов веб-страницы.

Формируемые компетенции: ОК5,ОК6,ОК7.

ПРИОБРЕТАЕМЫЕ УМЕНИЯ И НАВЫКИ: приобрести навыки работы с формами, иерархией объектов веб-страницы JavaScript.

НОРМА ВРЕМЕНИ: 90 минут

ОСНАЩЕНИЕ РАБОЧЕГО МЕСТА: ПК, текстовый редактор Блокнот, браузер.

ОСОБЫЕ ПРАВИЛА ПО ТЕХНИКЕ БЕЗОПАСНОСТИ НА РАБОЧЕМ МЕСТЕ: проведен инструктаж по техники безопасности в компьютерном классе.

ЛИТЕРАТУРА: PHP, MySQL, ХML программирование для Интернета. Бенкен Е.С. СПб.:БХВ-Петербург, 2008, гл.23



ВОПРОСЫ ПРИ ДОПУСКЕ:

Какой скрипт нужно написать для того, чтобы узнать текст, введенный читателем?

Какие функции выполняет объект location?

Для чего предназначен объект window?

К какому виду объектов принадлежит окно браузера с точки зрения JavaScript?



МЕТОДИЧЕСКИЕ РЕКОМЕНДАЦИИ

Ознакомьтесь с теоретическими аспектами темы.

В языке JavaScript все элементы на web-странице выстраиваются в иерархическую структуру. Каждый элемент предстает в виде объекта. И каждый такой объект может иметь определенные свойства и методы. В свою очередь, язык JavaScript позволяет легко управлять объектами web-страницы, хотя для этого очень важно понимать иерархию объектов, на которые опирается разметка HTML.

С точки зрения языка JavaScript окно браузера - это некий объект window. Этот объект также содержит в свою очередь некоторые элементы оформления, такие как строка состояния. Внутри окна можно разместить документ HTML или файл какого-либо другого типа. Такая страница является объектом document. Это означает, что объект document представляет в языке JavaScript загруженный на настоящий момент документ HTML. Объект document является очень важным объектом в языке JavaScript. К свойствам объекта document относятся, например, цвет фона для web-страницы. Все без исключения объекты HTML являются свойствами объекта document. Примерами объекта HTML являются, к примеру, ссылка или заполняемая форма.

Чтобы иметь возможность получать информацию о различных объектах в этой иерархии и управлять ею мы должны знать, как в языке JavaScript организован доступ к различным объектам. Каждый объект иерархической структуры имеет свое имя. Следовательно, если нужно узнать, как можно обратиться к первому рисунку на HTML-странице, то обязаны сориентироваться в иерархии объектов. И начать нужно с самой вершины. Первый объект такой структуры называется document. Первый рисунок на странице представлен как объект images[0]. Это означает, что отныне мы можем получать доступ к этому объекту, записав в JavaScript document.images[0]. Если же, например, нужноузнать, какой текст ввел читатель в первый элемент формы, то нужно выяснить, как получить доступ к этому объекту. И снова начинаем с вершины нашей иерархии объектов. Затем нужно проследить путь к объекту с именем elements[0] и последовательно записать названия всех объектов, которые минуем. В итоге выясняется, что доступ к первому полю для ввода текста можно получить, записав: document.forms[0].elements[0]

Чтобы узнать текст, введенный читателем нужно написать на языке JavaScript строку:

name= document.forms[0].elements[0].value;

Полученная строка заносится в переменную name. Следовательно, теперь мы можем работать с этой переменной, как нам необходимо. Например, мы можем создать выпадающее окно, воспользовавшись командой alert("Hi " + name). В результате, если читатель введет в это поле слово 'Stefan', то по команде alert("Hi " + name) будет открыто выпадающее окно с приветствием 'Hi Stefan'.

Если Вы имеете дело с большими страницами, то процедура адресации к различным объектам по номеру может стать весьма запутанной. Например, придется решать, как следует обратиться к объекту document.forms[3].elements[17]document.forms[2].elements[18]? Во избежание подобной проблемы, можно самим присваивать уникальные имена различным объектам. Посмотрим на примере, как это делается:

<formname="myForm">

Name:

<inputtype="text" name="name" value=""><br>...

Эта запись означает, что объект forms[0] получает теперь еще и второе имя - myForm. Точно так же вместо elements[0]можно писать name (последнее было указано в атрибуте name тэга ). Таким образом, вместо

name= document.forms[0].elements[0].value;

Вы можете записать

name= document.myForm.name.value;

Это значительно упрощает программирование на JavaScript, особенно в случае с большими web-страницами, содержащими множество объектов. При написании имен нужно следить и за положением регистра - то есть нельзя написать myform вместо myForm. В JavaScript многие свойства объектов доступны не только для чтения. Имеетсявозможность записывать в них новые значения. Например, посредством JavaScript можно записать в упоминавшееся поле новую строку.

Начало формы



Конец формы

Пример кода на JavaScript, иллюстрирующего такую возможность - интересующий нас фрагмент записан каксвойство onClick второго тэга :

onClick="document.myForm.input.value= 'Yo!'; ">

Конецформы

Кроме объектов window и document в JavaScript имеется еще один важный объект - location. В этом объекте представлен адрес загруженного HTML-документа. Например, если Вы загрузили страницу http://www.xyz.com/page.html, то значение location.href как раз и будет соответствовать этому адресу.

В location.hrefможно записывать свои новые значения. Например, в данном примере кнопка загружает в текущее окно новую страницу:

onClick="location.href='http://www.yahoo.com'; ">

ПОРОЯДОК ВЫПОЛНЕНИЯ РАБОТЫ

Создайте веб-страницу с использованием принципов иерархии объектов.

Создайте документ с использованием объектов.

Сделайте отчет о выполнении предложенных заданий.

Ответьте на контрольные вопросы.


Задание 1.

Создайте два произвольных рисунка формата gif. Сохраните их в отдельной папке на рабочем столе под названиями home.gif и ruler.gif.

Создайте HTML-страницу:

925142>

home.gif

Name:


e-Mail:



Нажми" name="myButton" onClick="alert('Спасибо!')">

ruler.gif

Моястраничка

center>

3. Проверьте результат.

hello_html_m796c44d9.png



Итак, мы имеем два рисунка, одну ссылку и некую форму с двумя полями для ввода текста и одной кнопкой. На следующем рисунке иллюстрируется иерархия объектов, создаваемая HTML-страницей из нашего примера:

hello_html_1f162533.png

Задание 2.

1. Создайте Начало формы

Конец формы

исходный код скрипта:

<html>

<head>

Objects

Привет!!!">

Кнопка 1"

onClick="first()">


Кнопка 2"

onClick="second()">



Сравните результат



hello_html_5641e5ca.png


КОНТРОЛЬНЫЕ ВОПРОСЫ:

Каким образом представляются объекты на веб-странице?

Что понимается под иерархией объектов?

Для чего предназначен объект document?

Что относится к свойствам объекта document?

Приведите примеры объектов HTML.

Каким образом организуется управление иерархией объектов?



Преподаватель: __________(О.А. Солодовникова)

Практическая работа рассмотрена на заседании цикловой комиссии математики и информатики рекомендована на утверждение.

Протокол № 1 от 29.08.2016

Председатель комиссии: ____________(Н.В.Меркулова)



ГБПОУ ВО «Острогожский многопрофильный техникум»


УТВЕРЖДАЮ

Заместитель директора

по учебной работе

__________О.В.Редина





ИНСТРУКЦИОННО - ТЕХНОЛОГИЧЕСКАЯ КАРТА

на выполнение практической работы №15

по WEB-программировнаию

для студентов, обучающихся по специальности

Программирование в компьютерных системах


ТЕМА: Приемы программирования на JavaScript.

НАИМЕНОВАНИЕ РАБОТЫ: встроенные объекты Date,Math, RegExp

ЦЕЛЬ РАБОТЫ: изучить основные предопределенные объекты: Date, Array, Math

Формируемые компетенции: ОК2.

ПРИОБРЕТАЕМЫЕ УМЕНИЯ И НАВЫКИ: научить работать с предопределенными объектами: Date, Array, Math

НОРМА ВРЕМЕНИ: 90 минут

ОСНАЩЕНИЕ РАБОЧЕГО МЕСТА: ПК, текстовый редактор Блокнот, браузер.

ОСОБЫЕ ПРАВИЛА ПО ТЕХНИКЕ БЕЗОПАСНОСТИ НА РАБОЧЕМ МЕСТЕ: проведен инструктаж по техники безопасности в компьютерном классе.

ЛИТЕРАТУРА: JavaScript, PHP и MySQL. Джентельменский набор web-мастера, Прохоренок Н.А. ,Спб.; БХВ – Петеррбург,2009,стр. 142-145, 150-159.



ВОПРОСЫ ПРИ ДОПУСКЕ:

Примерами, каких объектов служат объекты Date, Array, Math?

Для чего предназначен объект Date?

Что называют массивом?

Для чего предназначены массивы?


МЕТОДИЧЕСКИЕ РЕКОМЕНДАЦИИ

Ознакомьтесь с теоретическими аспектами темы.

В JavaScript разрешено пользоваться некоторыми заранее заданными объектами. Примерами таких объектов могут служить Date, Array или Math. Объект Date позволяет работать как со временем, так и с датой. Например, можно легко определить, сколько дней еще остается до следующего рождества. Или можете внести в HTML-документ запись текущего времени.

Рассмотрим пример, который высвечивает на экран текущее время. Сперва мы должны создать новый объект Date. Для этого используем оператором new:

today= new Date()

Здесь создается новый объект Date, с именем today. Если при создании этого нового объекта Date не указаны какие-либо определенные дата и время, то будут предоставлены текущие дата и время. То есть, после выполнения команды today= new Date() вновь созданный объект today будет указывать именно те дату и время, когда данная команда была выполнена. Объект Date предоставляет нам кое-какие методы, которые теперь могут применяться к нашему объекту today. Например, этометоды - getHours(), setHours(), getMinutes(), setMinutes(), getMonth(), setMonth() итакдалее. Обратите пожалуйста внимание, что объект Date лишь содержит определенную запись о дате и времени. Он не уподобляется часам, автоматически отслеживающим время каждую секунду, либо миллисекунду. Чтобы зафиксировать какое-либо другие дату и время, мы можем воспользоваться видоизмененным конструктором (это будет метод Date(), который при создании нового объекта Date вызывается через оператор new):

today= new Date(1997, 0, 1, 17, 35, 23)

При этом будет создан объект Date, в котором будет зафиксировано первое января 1997 года 17:35 и 23 секунд. Таким образом, выбираются дата и время по следующему шаблону:

Date(year, month, day, hours, minutes, seconds) Для обозначения января необходимо использовать число 0, а не 1. Число 1 будет обозначать февраль, ну и так далее. Массивы играют в программировании очень важную роль. Массив может быть полезен там, где имеется много взаимосвязанных переменных. При этом к каждой из них можно получить доступ, воспользовавшись общим названием и неким номером. Допустим, есть массив в именем names. В этом случае мы можем получить доступ к первой переменной с именем name, написав names[0]. Вторая переменная носит name[1] и так далее. Начиная с версии 1.1 языка JavaScript (Netscape Навигатор 3.0), можно использовать объект Array. Можно создать новый массив, записав myArray= new Array(). После этого можно начать заносить в массив значения:

myArray[0]= 17;myArray[1]= "Stefan";myArray[2]= "Koch";

Массивы JavaScript обладают большой гибкостью. Например, нет нужды беспокоиться о размере массива - он устанавливается динамически. Если написать myArray[99]= "xyz", размер массива будет установлен 100 элементов.Не имеет значения, заносятся ли в массив числа, строки, либо другие объекты. Если необходимо в скрипте выполнять математические расчёты, то некоторые полезные методы для этого можно найти в объекте Math. Например, имеется метод random(). Напишем функцию, позволяющую генерировать случайные числа. Теперь, чтобы работать на всех без исключения платформах, нам не нужно ничего, кроме метода random().Если вызвать функцию Math.random(), то получите случайное число, лежащее в диапазоне между 0 и 1. Один из возможных результатов вызова document.write(Math.random()) (при каждой новое загрузке данной страницы здесь будет появляться другое число): 0.9070647660301312


ПОРОЯДОК ВЫПОЛНЕНИЯ РАБОТЫ


Создайте документ, печатающий текущую дату и время.

Создайте документ, создающий на экране изображение работающих часов.

Создайте документ, использующий массив.

Сделайте отчет о выполнении предложенных заданий.

Ответьте на контрольные вопросы.


Задание 1.

1 Создайте документ, печатающий текущую дату и время.

Результат будет выглядеть примерно следующим образом:

Time: 20:40

Date: 10/24/2009

Здесь используются такие методы, как getHours(), чтобы вывести на экран время и дату, указанные в объекте Date с именем now. Помните также, что нужно увеличивать на единицу значение, получаемое от метода getMonth().

В данном скрипте не выполняется проверки на тот случай, если количество минут окажется меньше, чем 10. Это значит, что выводится запись времени примерно в следующем виде: 14:3, что на самом деле должно было бы означать 14:03.


Задание 2.

1 Создайте документ, создающий на экране изображение работающих часов:

Начало формы

Время:


Дата:

2 Просмотрите результат.

Примерный вид результата:

Время:

Дата:

Конец формы

Здесь для ежесекундной коррекции времени и даты используется метод setTimeout(). Фактически это сводится к кому, что каждую секунду создается новый объект Date, в который заносится текущее время. Можно видеть, что функции clock() вызываются программой обработки события onLoad, помещенной в тэг . В разделе body HTML-страницы имеется два элемента формы для ввода текста. Функция clock() записывает в оба эти элемента в корректном формате текущие время и дату. Для этой цели используются две строки timeStr и dateStr. Существует проблема с индикацией, когда количество минут меньше 10 - в данном скрипте эта проблема решается с помощью следующей строки: timeStr+= ((minutes < 10) ? ":0" : ":") + minutes;Как видим, количество минут заносится в строку timeStr. Если у нас менее 10 минут, то мы еще должны приписать спереди 0. Эта строка в скрипте может показаться немного странной, и ее можно было бы переписать в более знакомом Вам виде:

if (minutes < 10) timeStr+= ":0" + minutes

else timeStr+= ":" + minutes;


Задание 3.

1. Создайте документ, использующий массив:

Данный скрипт печатает следующий текст:

first element

second element

third element

Первым делом создается здесь новый массив с именем myArray. Затем заносятся в него три различных значения. После этого мы запускаем цикл, который трижды выполняет команду document.write(myArray[i] + "
");. В переменной
i ведется отсчет циклов от 0 до 2. Заметим, что в цикле мы пользуемся конструкцией myArray[i] . И поскольку i меняет значения от 0 до 2, то в итоге мы получаем три различных вызова document.write(). Иными словами, мы могли бы расписать этот цикл как:

document.write(myArray[0] + "<br>");

document.write(myArray[1] + "
");

document.write(myArray[2] + "
");


КОНТРОЛЬНЫЕ ВОПРОСЫ:

Каким образом осуществляется доступ к массиву?

Каким образом производится установка размера массива?

Для чего предназначен объект Math?

Перечислите методы объекта Date.


Преподаватель: __________(О.А. Солодовникова)

Практическая работа рассмотрена на заседании цикловой комиссии математики и информатики рекомендована на утверждение.

Протокол № 1 от 29.08.2016

Председатель комиссии: ____________(Н.В.Меркулова)

ГБПОУ ВО «Острогожский многопрофильный техникум»


УТВЕРЖДАЮ

Заместитель директора

по учебной работе

__________О.В.Редина





ИНСТРУКЦИОННО - ТЕХНОЛОГИЧЕСКАЯ КАРТА

на выполнение практической работы №17

по WEB-программировнаию

для студентов, обучающихся по специальности

Программирование в компьютерных системах




ТЕМА: Введение в язык программирования РНР.

НАИМЕНОВАНИЕ РАБОТЫ: установка и настройка WEB-сервера Apache.

ЦЕЛЬ РАБОТЫ: изучить основные параметры настройки WEB-сервера Apache. Формируемые компетенции: ОК3.

ПРИОБРЕТАЕМЫЕ УМЕНИЯ И НАВЫКИ: получить практические навыки установки и настройки веб-сервера.

НОРМА ВРЕМЕНИ: 90 минут

ОСНАЩЕНИЕ РАБОЧЕГО МЕСТА: ПК, тетрадь для ПЗ.

ОСОБЫЕ ПРАВИЛА ПО ТЕХНИКЕ БЕЗОПАСНОСТИ НА РАБОЧЕМ МЕСТЕ: проведен инструктаж по техники безопасности в компьютерном классе.

ЛИТЕРАТУРА: Основы информационных и телекоммуникационных технологий, Попов В.Б. М.: Финансы и статистика, 2005,гл.16

Методические рекомендации

Ознакомьтесь с методичсекими рекомендациями.

Веб-сервер – программа, которая запущена на локальной или удаленной машине, и главное её предназначение – позволять пользователю просматривать веб-документы. Когда в адресной строке вводится адрес сайта, при нажатии клавиши Enter браузер формирует некий запрос, направленный удаленному компьютеру — веб-серверу.

Apache HTTP-сервер (сокращение от англ. a patchy server) – одна из наиболее популярных и распространенных программ, созданных для веб-разработчиков и администраторов интернет-ресурсов. По данным независимых исследователей, Apache установлен на 50% компьютеров всех пользователей HTTP-серверов.

Главными преимуществами Apache являются стабильность, быстродействие и гибкость, и обусловлены они модульной организацией, а также тем, что разработку ведёт открытая группа программистов, хоть и под официальным названием Apache Software Foundation.

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


ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ:

1.Выполнитеустановку и настройку веб-сервера Apache.

2.Сделайте отчет о выполнении предложенных заданий.

3.Ответье на контрольные вопросы.

Открываем дистрибутив Apache без поддержки SSL и запустить установку. В приветственном окне нужно кликнуть на «Next», прочесть лицензионное соглашение разработчика и подтвердить свое согласие с ним.

hello_html_55958786.png

Затем, в окне установки необходимо заполнить поля так, как показано на картинке ниже, а в поле «Administrator’s Email Address» указать адрес своей электронной почты, кликнуть «Next» и установить переключатель в положение «Custom».

hello_html_m2e9e5634.png

hello_html_7f186d08.png

Далее, переходим к следующему шагу процесса «установка Apache». По умолчанию веб-сервер производит инсталляцию в папку C:\Program Files\Apache Software Foundation\Apache 2.2.

hello_html_m6317b3f2.png

Далее необходимо создать директорию www на диске C и указать её в качестве установочной папки для Apache, кликнуть «Next» в этом и «Install» в следующем окне. Когда установка закончится, нажмите на «Finish».

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

hello_html_m648508c1.png

Кликнув по тому же значку правой кнопкой мыши, можно перейти к различным системным службам операционной системы или открыть монитор Apache.

hello_html_5b1bd354.png

Для того чтобы проверить работает ли установленный сервер Apache, наберите в адресной строке вашего браузера http://localhost

hello_html_157f4d4f.png

Если появилась страница с воодушевляющей надписью «It works!», значит, установка Apache прошла успешно, и он функционирует правильно.

Базовая настройка веб-сервера

Хоть Apache и является весьма удобным и исключительно надёжным, не все готовы его использовать как локальный сервер по ряду причин, и основная — отсутствие даже в среде Microsoft Windowsкакого-либо графического конфигуратора, что довольно непривычно для большинства пользователей.

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

Что необходимо?

Запустить Apache под платформой Windows 7;

Хранить в удобной для пользователя директории файлы будущего сайта (например, C:\www);

Не испытывать проблем с кодировкой, а в частности — с отображением кириллицы;

Возможность работать с несколькими сайтами одновременно.

Чтобы успешно решить эти проблемы, зайдите в папку сустановленным Apache, найдите и откройте в подпапке conf файл httpd.conf. Обратите внимание, что строки, начинающиеся с «решётки», являются текстовыми комментариями, а в качестве настроек веб-сервера использованы строки, в начале которых значок «решётки» отсутствует.

Для начала нужно выполнить настройку той директории, которая будет использоваться сервером в качестве папки веб-сайта. Найдите в тексте строку, которая начинается с DocumentRoot. Данная директива определяет, какая папка будет являться корневой.

Исправьте её на DocumentRoot “C:/www”. Следует уточнить, что слэши в этом файле должны быть наклонены вправо, а не влево, как, вероятно, уже привыкли пользователи Windows. После вышеуказанных манипуляций, проблема с месторасположением вашего сайта решена.

Далее необходимо установить для директории правила безопасности. В Apache для этой цели используется директива Directory:

<Directory>

Options (определяет, какие серверные функции будут доступны)

AllowOverride (определяет, какие директивы из .htaccess могут преобладать над такими же в httpd.conf)

Order (устанавливает определенные правила доступа к серверу)

Directory>

Список используемых параметров:

Возможны следующие варианты:

Includes – использование SSI разрешено;

IncludesNOEXEC – использование SSI разрешено с ограничениями (не допускаются #include и#exec);

Indexes – разрешено использование индексных файлов, и если URL-адрес указывает на директорию сайта (например, www.domain.ru/dir/), в которой не существует индексного файла, будет показано содержимое данной директории, а если этой опции нет – выдается оповещение о том, что доступ запрещён;

ExecCGI – выполнение скриптов CGI разрешено;

FollowSymLinks – сервер следует по имеющимся символическим ссылкам директории (используется в Unix-системах);

SymLinksIfOwnerMatch – сервер следует по имеющимся символическим ссылкам директории лишь в том случае, если целевой файл имеет одного владельца со ссылкой;

All – все вышеописанное вместе разрешено;

None – все вышеописанное вместе запрещено;

MultiViews – возможность подбора определенного контента и его выдачи в зависимости от предпочтений браузера (даже если включено все (Options All).Указывается отдельно).

Варианты:

AuthConfig – позволяет использовать директивы для авторизации;

FileInfo – разрешает использование директив для работы с различными типами документов;

Indexes – разрешает использование директив для работы с файлами индексации;

Limit – разрешает использование директив для определения доступа к хосту;

Options – разрешает использование директив для работы с определенными специфическими функциями директорий;

All – все вышеуказанное вместе;

None – ничего из вышеуказанного вместе.

Варианты:

Deny, Allow – Deny определяется перед директивой Allow, доступ разрешен по умолчанию, кроме хостов, которые указаны в следующей после Deny from строке;

Allow,Deny – Allow определяется перед директивой Deny, доступ запрещен по умолчанию, кроме хостов, которые указаны в следующей после Allow from строке;

Mutual-failure – разрешен доступ только таких хостов, которые отсутствуют в Deny и присутствуют в Allow.

На основе всего вышесказанного, попробуйте настроить ваш сервер. В файле httpd.conf директива Directory по умолчанию существует сразу в двух экземплярах — и . Первый вариант трогать не следует, поэтому во втором установите параметры следующим образом:

<Directory C:/www>

Options Indexes FollowSymLinks

AllowOverride None

Order allow, deny

Allow from all

Directory>

Говоря другими словами, для папки C:/www и всех её подпапок выбраны следующие параметры:

Из возможной функциональности имеющегося сервера разрешены индексы в директориях и переходы по символическим ссылкам;

Возможность параметрического переопределения с помощью файлов .htaccess полностью отсутствует, однако учитывая то, что вы имеете полный доступ к серверу, она не является актуальной – все можно настроить через httpd.conf;

Доступ к веб-серверу разрешен со всех хостов.

Теперь, сохраните файл httpd.conf и перезапустите Apache с помощью Apache Monitor либо командойapache –k restart в командной строке. Настройка корневой папки сайта закончена.

Создайте простейшую веб-страницу в папке C:\www, откройте ваш браузер и введите http://127.0.0.1/ваша_созданная_страница. Страницы должна открыться. В ином случае необходимо тщательно проверить все изменения в файле httpd.conf на правильность.

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

Если пресловутый Internet Explorer в подобных случаях определяет кодировку из самой страницы, то, к примеру, Mozilla Firefox и Opera к подобным действиям склонности совершенно не имеют, и способ выставления кодировки в браузере вручную едва ли можно назвать удобным. Следовательно, необходимо настроить Apache на выдачу по умолчанию необходимой кодировки.Найдите в файле httpd.conf строку, которая начинается на AddDefaultCharset. Скорее всего, там указана кодировка ISO-8859-1, в которой отсутствуют кириллические символы. Поменяйте ISO-8859-1на windows-1251, сохраните файл и перезапустите Apache. Теперь корректное отображение русского языка на вашем сайте будет работать в любом браузере.В сервере Apache достаточно просто настроить работу с несколькими сайтами. Адреса, которые можно использовать для них — 127.0.0.2, 127.0.0.3 и т.д. При этом по сети виден будет только тот, который является сайтом по умолчанию (127.0.0.1), однако для локальной работы это не является критичным. Раздел файла httpd.conf, в котором производится настройка всего необходимого для этого, находится в самом конце и именуется VirtualHosts.

Для того чтобы добавить дополнительный сайт, создайте директорию, использующуюся в качестве его корневой, к примеру, C:\www2. Предположив, что сайт будет откликаться на адрес 127.0.0.2, дайте ему имя site911 и в самом конце раздела VirtualHosts добавьте следующие строки:

ServerAdmin webmaster@site911

ServerName site911

DocumentRoot "C:/www2"

ScriptAlias /cgi/ "C:/www2/cgi/"

ErrorLog "C:/www2/error.log"

CustomLog "C:/www2/custom.log" common

Перезапустите сервер Apache. Набрав в адресной строке браузера 127.0.0.1, вы попадёте на ваш первый локальный сайт, а набрав 127.0.0.2 – на второй локальный сайт. Следует иметь в виду, что внутри каждого контейнера VirtualHosts могут использоваться абсолютно любые директивы веб-сервера Apache, благодаря чему можно каждый сайт настраивать наидетальнейшим образом.


Контрольные вопросы:

1.Что такое веб-сервер.

2.Что такое Apache HTTP-сервер.

3.Перечислимте основные параметры.



Преподаватель: __________(О.А. Солодовникова)

Практическая работа рассмотрена на заседании цикловой комиссии математики и информатики рекомендована на утверждение.

Протокол № 1 от 29.08.2016

Председатель комиссии: ____________(Н.В.Меркулова)



ГБПОУ ВО «Острогожский многопрофильный техникум»


УТВЕРЖДАЮ

Заместитель директора

по учебной работе

__________О.В.Редина





ИНСТРУКЦИОННО - ТЕХНОЛОГИЧЕСКАЯ КАРТА

на выполнение практической работы №18

по WEB-программировнаию

для студентов, обучающихся по специальности

Программирование в компьютерных системах



ТЕМА: Введение в язык программирования РНР.

НАИМЕНОВАНИЕ РАБОТЫ: PHP: типы данных, переменные, операторы.

ЦЕЛЬ РАБОТЫ: изучить основные типы данных используемые в PHP.

Формируемые компетенции: ОК1.

ПРИОБРЕТАЕМЫЕ УМЕНИЯ И НАВЫКИ: получить практические навыки использования типов данных в PHP.

НОРМА ВРЕМЕНИ: 90 минут

ОСНАЩЕНИЕ РАБОЧЕГО МЕСТА: ПК, тетрадь для ПЗ.

ОСОБЫЕ ПРАВИЛА ПО ТЕХНИКЕ БЕЗОПАСНОСТИ НА РАБОЧЕМ МЕСТЕ: проведен инструктаж по техники безопасности в компьютерном классе.

ЛИТЕРАТУРА: JavaScript, PHP и MySQL. Джентельменский набор web-мастера Прохоренок Н.А. Спб.; БХВ – Петеррбург,2009, стр. 32-35


Методические рекомендации


Ознакомьтесь с методическими рекомендациями.

PHP поддерживает восемь простых типов данных (переменных):

Четыре скалярных типа:

boolean (двоичные данные)

integer (целые числа)

float (числа с плавающей точкой или 'double')

string (строки)

Два смешанных типа:

array (массивы)

object (объекты)

И два специальных типа:

resource (ресурсы)

NULL ("пустой" тип)

Существуют также несколько псевдотипов:

mixed (смешанный)

number (числовой)

callback (обратного вызова)


ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ:


1. Рассмотрите примеры использования типов данных в PHP.

2.Сделайте отчет о выполнении предложенных заданий.

3.Ответье на контрольные вопросы.

Тип Boolean (двоичные данные)

Это простейший тип. Он выражает истинность значения - это может быть либо TRUE, либо FALSE. Булев тип был введен в PHP 4.

Чтобы определить булев тип, используйте ключевое слово TRUE или FALSE. Оба регистро-независимы.

<?php
$x True// присвоить $x значение TRUE
?>

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

<?php
// == это оператор, который проверяет
// эквивалентность и возвращает булево значение
if ($action == "показать_версию") {
     echo "Версия 1.23";
}

// это не обязательно...
if ($show_separators == TRUE) {
     echo "\n";
}

// ...потому что вы можете просто написать
if ($show_separators) {
     echo "\n";
}
?>

Подробнее о булевых типах данных смотрите здесь.

Тип integer (целые числа)

Целое это число из множества Z = {..., -2, -1, 0, 1, 2, ...}, обычно длиной 32 бита (от –2 147 483 648 до 2 147 483 647).

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

Если вы используете восьмеричную систему счисления, вы должны предварить число 0 (нулем), для использования шестнадцатеричной системы нужно поставить перед числом 0x.

<?php
$a 1234// десятичное число
$a = -123// отрицательное число
$a 0123// восьмеричное число (эквивалентно 83 в десятичной системе)
$a 0x1A// шестнадцатеричное число (эквивалентно 26 в десятичной системе)
?>

Подробнее о типах данных integer смотрите здесь.

Тип float (числа с плавающей точкой)

Double - вещественное число довольно большой точности (ее должно хватить для подавляющего большинства математических вычислений).

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

<?php
$a 1.234;
$b 1.2e3;
$c 7E-10;
?>

Подробнее о типах данных float смотрите здесь.

Тип string (строки)

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

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

Пример строковой переменной:

<?
$= "Это просто текст, записанный в строковую переменную";
echo $a; //Выводит 'Это просто текст, записанный в строковую переменную'
?>

Подробнее о типах данных string смотрите здесь.

Тип array (массивы)

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

Индекс (ключ) служит для однозначной идентификации элемента внутри массива. В одном массиве не может быть двух элементов с одинаковыми индексами.

PHP позволяет создавать массивы любой сложности. Рассмотрим некоторые примеры:

Простой массив (список)

Массивы, индексами которых являются числа, начинающиеся с нуля - это списки:

<?php
// Простой способ инициализации массива
$names[0]="Апельсин";
$names[1]="Банан";
$names[2]="Груша";
$names[3]="Помидор";
// Здесь: names - имя массива, а 0, 1, 2, 3 - индексы массива
?>

Ассоциативные массивы

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

Массивы, индексами которых являются строки, называются ассоциативными массивами. Индексы ассоциативных массивов называются ключами. Пример ассоциативного массива:

<?php
// Ассоциативный массив
$names["Иванов"]="Иван";
$names["Сидоров"]="Николай";
$names["Петров"]="Петр";
// В данном примере: фамилии - ключи ассоциативного массива
// , а имена - элементы массива
?>

Многомерные массивы

Для создания массивов в PHP существует специальная инструкция array(). Ее удобно использовать для созданиямногомерных массивов. Приведем конкретный пример:

<?php
// Многомерный массив
$A["Ivanov"] = array("name"=>"Иванов И.И.", "age"=>"25", "email"=>"ivanov@mail.ru");
$A["Petrov"] = array("name"=>"Петров П.П.", "age"=>"34", "email"=>"petrov@mail.ru");
$A["Sidorov"] = array("name"=>"Сидоров С.С.", "age"=>"47", "email"=>"sidorov@mail.ru");
?>

Многомерные массивы похожи на записи в языке Pascal или структуры в языке C.

Подробно о массивах и операциях с массивами вы можете узнать здесь

Тип object (объекты)

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

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

<?php
class foo
{
     function do_foo()
     {
         echo "Doing foo."
     }
}

$bar = new foo;
$bar->do_foo();
?>

Подробное рассмотрение объектов производится в разделе PHP и ООП

Тип resource (ресурсы)

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

Тип NULL ("пустой" тип)

Специальное значение NULL говорит о том, что эта переменная не имеет значения. NULL - это единственно возможное значение типа NULL (пустой тип).

Переменная считается NULL если:

ей была присвоена константа NULL;

ей еще не было присвоено какое-либо значение;

она была удалена с помощью unset().

<?php
$var NULL;
?>

Смотрите также is_null() и unset().

Псевдотип mixed (смешанный)

mixed говорит о том, что параметр может принимать множество (но не обязательно все) типов.

gettype(), например, принимает все типы PHP, тогда как str_replace() принимает строки и массивы.

Псевдотип number (числовой)

number говорит о том, что параметр может быть либо integer, либо float.

Псевдотип callback (обратного вызова)

Некоторые функции, такие как call_user_func() или usort() принимают в качестве параметра определенные пользователем callback-функции. Callback-функции могут быть не только простыми функциями, но также методамиобъектов, включая статические методы классов.

PHP-функция передается просто как строка ее имени. Вы можете передать любую встроенную или определенную пользователем функцию за исключением array(), echo(), empty(), eval(), exit(), isset(), list(), print() и unset().

Приведем примеры callback функций:

<?php 

// простой пример callback
function my_callback_function() {
     echo 'hello world!';
}
call_user_func('my_callback_function'); 

// примеры callback-метода
class MyClass {
     function myCallbackMethod() {
         echo 'Hello World!';
     }
}

// вызов метода статического класса без создания объекта
call_user_func(array('MyClass''myCallbackMethod')); 

// вызов метода объекта
$obj = new MyClass();
call_user_func(array(&$obj'myCallbackMethod'));
?>


Контрольные вопросы:

Сколько типов данных поддерживает PHP.

Что входит в скалярный тип.

Что входит в смешанный тип.

Что входит в специальный тип.


Преподаватель: __________(О.А. Солодовникова)

Практическая работа рассмотрена на заседании цикловой комиссии математики и информатики рекомендована на утверждение.

Протокол № 1 от 29.08.2016

Председатель комиссии: ____________(Н.В.Меркулова)



ГБПОУ ВО «Острогожский многопрофильный техникум»


УТВЕРЖДАЮ

Заместитель директора

по учебной работе

__________О.В.Редина





ИНСТРУКЦИОННО - ТЕХНОЛОГИЧЕСКАЯ КАРТА

на выполнение практической работы №19

по WEB-программировнаию

для студентов, обучающихся по специальности

Программирование в компьютерных системах



ТЕМА: Введение в язык программирования РНР.

НАИМЕНОВАНИЕ РАБОТЫ: использование массивов в PHP.

ЦЕЛЬ РАБОТЫ: закрепление навыков обработки данных формы. Использование массива в программе.

Формируемые компетенции: ОК2.

ПРИОБРЕТАЕМЫЕ УМЕНИЯ И НАВЫКИ: получить практические навыки использования массива вPHP.

НОРМА ВРЕМЕНИ: 90 минут

ОСНАЩЕНИЕ РАБОЧЕГО МЕСТА: ПК, тетрадь для ПЗ.

ОСОБЫЕ ПРАВИЛА ПО ТЕХНИКЕ БЕЗОПАСНОСТИ НА РАБОЧЕМ МЕСТЕ: проведен инструктаж по техники безопасности в компьютерном классе.

ЛИТЕРАТУРА: PHP, MySQL, ХML программирование для Интернета. Бенкен Е.С. СПб.:БХВ-Петербург, 2008,гл.6.


Методические рекомендации

Ознакомьтесь с методическими рекомендациями.

В PHP существуют различные методы инициализации массивов:

1. простое присвоение значений

<?

$car[] = "passengercar";

$car[] = "land-rover";

echo($car[1]);// выводит "land-rover"

?>

2. явное указание индекса массива:

<?

$car[0] = "passengercar";

$car[1] = "land-rover";

echo($car[1]);// выводит "land-rover"

?>

3. использованиеконструкции array():

<?

$car=array("passenger car", "land-rover");

echo($car[1]);// выводит "land-rover"

?>

4. явное указание индексов (в этом случае применяется оператор =>)

<?

$car=array("passenger car", 5 => "land-rover", "station-wagon","victoria");

echo($car[0]); echo("<br>");// выводит "passenger car"

echo($car[5]); echo("<br>");// выводит "land-rover"

echo($car[6]); echo("<br>");// выводит "station-wagon"

echo($car[7]);// выводит "victoria"

?>

5. индексами массива могут быть и строки:

<?

$car=array("pc" => "passenger car", "lr" => "land-rover");

echo($car["lr"]); echo("<br>"); // выводит "land-rover"

echo($car["pc"]);// выводит "passenger car"

?>


Для обработки элементов массива используют:

цикл FOREACH

foreach(array as [$key =>] $value)

{

statements;

}

Пример:

<?

$car=array("passenger car", "land-rover", "station-wagon", "victoria");

foreach($car as $index =>$val)

{

echo("$index ->$val<br>");

}

?>

Как видно из синтаксиса, переменная $key необязательна и может быть опущена:

<?

echo(

"available cars: <br><ul>"

);

$car=array("passenger car", "land-rover", "station-wagon","victoria");

foreach($car as $val)

{

echo("<li>$val</li>\n");

}

echo("</ul>");

?>

ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ:


1. Создайте страницу использую масиивы в PHP.

2.Сделайте отчет о выполнении предложенных заданий.


Задание 1.Создать новую страницу с формой следующего вида:

hello_html_m5b1f161d.jpg


Форма для регистрации студентов

Имя
Введитевашеимя”>

Фамилия

E-mail

Выберите курс, который будете посещать:

PHP

LISP

C++

UNIX

Что Вы хотите, чтобы мы знали о Вас?

Отправить”>

Отменить”>

В файле action.php, обрабатывающем эту форму, можно написать следующее:

<?php

$str = "Здравствуйте,".$_POST ["first_name"]." ".$_POST ["last_name"] ."!<br>";

$str.= "Вы выбрали для изучения курс по ". $_POST["kurs"];

echo $str;

?>

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

<?

// создадим массивы соответствий «курс-время» и «курс-лектор»

$time = array(“PHP”=>”14.30”, “LISP”=>”12.00”, “C++”=>”15.00”, “UNIX”=>”14.00”);

$lector= array(“PHP”=>”Васильев”, “LISP”=>”Иванов”, “C++”=>”Петров”, “UNIX”=>”Сидоров”);

define(“SIGN”, “С уважением, администрация”);// определяем подпись как константу

define(“MEETING_TIME”, “18.00”); // задаем время собрания

$date=”12 мая”;

$str=”Здравствуйте, уважаемый “.$_POST[“first_name”]. “ “. $_POST[“last_name”].”!
”;

$str .=“
Сообщаем Вам, что “;

$lect =””;

$kurses=$_POST[“kurs”];

If (!isset($kurses)) {

$event= “следующее собрание студентов”;

$str .= “$event состоится $date “. MEETING_TIME .“
”;

} else {

$event= “выбранная Вами лекция состоится $date<ul>”;

For ($i=0; $i

$k=$kurses[$i];

$lect = $lect .“ лекция по $k в $time[$k]”;

$lect . =” вашлектор, $lector[$k])”

}

$event = $event . $lect . “”;

$str . =”$event”;

}

$str .=“
” . SIGN
;

echo $str

?>

Преподаватель: __________(О.А. Солодовникова)

Практическая работа рассмотрена на заседании цикловой комиссии математики и информатики рекомендована на утверждение.

Протокол № 1 от 29.08.2016

Председатель комиссии: ____________(Н.В.Меркулова)




ГБПОУ ВО «Острогожский многопрофильный техникум»


УТВЕРЖДАЮ

Заместитель директора

по учебной работе

__________О.В.Редина





ИНСТРУКЦИОННО - ТЕХНОЛОГИЧЕСКАЯ КАРТА

на выполнение практической работы №20

по WEB-программировнаию

для студентов, обучающихся по специальности

Программирование в компьютерных системах



ТЕМА: Введение в язык программирования РНР.

НАИМЕНОВАНИЕ РАБОТЫ: работа с файлами. Загрузка файлов на сервер.

ЦЕЛЬ РАБОТЫ: закрепление навыков работы с файлами.

Формируемые компетенции:ОК4,ОК5.

ПРИОБРЕТАЕМЫЕ УМЕНИЯ И НАВЫКИ: получить практические навыки работы с файлами и загрузки файлов на сервер.

НОРМА ВРЕМЕНИ: 90 минут

ОСНАЩЕНИЕ РАБОЧЕГО МЕСТА: ПК, тетрадь для ПЗ.

ОСОБЫЕ ПРАВИЛА ПО ТЕХНИКЕ БЕЗОПАСНОСТИ НА РАБОЧЕМ МЕСТЕ: проведен инструктаж по техники безопасности в компьютерном классе.

ЛИТЕРАТУРА: Компьютерные сети: учебное пособие для студентов учреждений среднего профессионального образования Максимов Н. В., Попов И. И. М.: ФОРУМ: ИНФРА –М,2010,гл.8; JavaScript, PHP и MySQL. Джентельменский набор web-мастера Прохоренок Н.А. Спб.; БХВ – Петеррбург,2009, п 5.25


ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ:


1. Создайте страницу для загрузки файлов на сервер.

2.Сделайте отчет о выполнении предложенных заданий.

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

hello_html_7b98dae7.gif

Как видно на рисунке, форма содержит поле ввода, в котором пользователь может ввести имя файла, или щелкнув по кнопке "Обзор", чтобы выбрать файлы, доступные на своей локальной машине. Возможно, вы ранее не видели форму загрузки файлов. Ниже мы покажем как ее реализовать.

После ввода имени файла пользователь может щелкнуть по кнопке "Послать файл", и файл загрузится на сервер, где его ожидает PHP-сценарий.

Для реализации загрузки файлов на сервер применяются некоторые конструкции языка HTML, специально предназначенные для этой цели.

upload.html — HTML-форма для загрузки файлов

 
 
Администрирование - загрузка новых файлов 
 

 

Загрузка новых файлов с новостями

 
<form action="upload.php" method="post" enctype="multipart/form-data" target="_blank"> 
 type="hidden" value="1000000"> 
Загрузить файл  type="file"> 
 type="submit" value="Послать файл"> 
form> 
 
 

Обратите внимание, что в этой форме используется метод POST. Загрузку файлов можно осуществлять с помощью метода PUT, поддерживаемого инструментами Netscape Composer и Amaya, однако при этом придется внести существенные изменения в код. Упомянутые инструменты не поддерживают метод GET.

Рассмотрим особенности этой формы.

В дескрипторе необходимо установить атрибут enctype="multipart/form-data" для извещения сервера, что вместе с обычной информацией формы посылается и файл.

Форма должна содержать поле, в котором задан максимальный размер загружаемого файла. Это скрытое поле, и оно представлено с помощью HTML-дескриптора:

 

Именем этого поля формы должно быть MAX_FILE_SIZE. Его значение —это максимальный размер (в байтах) файлов, разрешенный для загрузки. Здесь он установлен 100000 байт (1 Мбайт). В нашем приложении его можно сделать меньшим или большим.

В форме должно присутствовать поле ввода с типом file, у нас оно задано следующим образом:

 

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

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

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

Сценарий для работы с файлами

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

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

Данные, которые должны обрабатываться в нашем PHP-сценарии, храняться в суперглобальном массиве $_FILES. Если register_globals включен, к данным возможен и непосредственный доступ через имена переменных. Однако здесь, пожалуй, как раз то место, где лучше отключить register_globals и работать с данными через суперглобальный массив.

Элементы в массиве $_FILES будут сохранены с именем дескриптора из вашей HTML-формы. Поскольку элемент формы имеет имя userfile, содержимое массива выглядит следующим образом:

Значение, хранимое в $_FILES ['userfile']['tmp_name'], представляет собой место временного хранения файла на веб-сервере.

Значение, хранимое в $_FILES ['userfile']['name'], является имнем файла в системе пользователя.

Значение, хранимое в $_FILES ['userfile']['size'], указывает размер файла в байтах.

Значение, хранимое в $_FILES ['userfile']['type'], содержить MIME-тип файла, например, text/plain или image/gif.

Значение, хранимое в $_FILES ['userfile']['error'], будет содержать код ошибки, возникшей во время загрузки файла.

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

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

upload.php — PHP-сценарий приема файла от HTML-формы

 
 
 
 
Загрузка . . . 
 

 

Загрузкафайла . . .  
<?php 
if ($_FILES['userfile']['error'] > 0) 
{ 
echo 'Проблема: '; 
switch ($_FILES['userfile']['error']) 
{ 
case 1: echo 'размерфайлабольше uoload_max_filesize' ; break; 
case 2: echo 'размерфайлабольше max_file_size'; break; 
case 3: echo 'загруженатолькочастьфайла'; break; 
case 4: echo 'файлнезагружен'; break; 
} 
exit; 
} 
// Проверка, имеетлифайлправильный MIME-тип 
if ($_FILES ['userfile']['type'] != 'text/plain') 
{ 
echo 'Проблема: файлнеявляетсятекстовым'; 
exit; 
} 
// Помещаемфайлтуда, куданужно 
$upfile = '/uploads/'.$_FILES['userfile']['name']; 
if ($_FILES['userfile']['tmp_name']) 
{ 
if (!move_uploaded_file($_FILES['userfile']['tmp_name'], $upfile)) 
{ 
echo 'Проблема: невозможнопереместитьфайлвкаталогназначения'; 
exit; 
} 
} 
else 
{ 
echo 'Проблема: возможнаатакачереззагрузкуфайла. Файл: '; 
echo $_FILES['userfile']['name']; 
exit; 
} 
echo 'Файлуспешнозагружен.

';
 
// Переформатированиесодержимогофайла 
$fp = fopen($upfile, 'r'); 
$contents = fread ($fp, filesize ($upfile)); 
fclose ($fp); 
$contents = strip_tags ($contents); 
$fp = fopen ($upfile, 'w'); 
fwrite ($fp, $contents); 
fclose($fp); 
// Выводзагружаемогофайла 
echo 'Предварительныйпросмотрсодержимогозагруженногофайла:
';
 
echo $contents; 
echo '
';
 
?> 
 

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

Посмотрим, какие основные части содержит сценарий.

Сначала проверяется код ошибки, возвращаемый в $_FILES['userfile']['error'] . Каждому коду ошибки соответствует специальная константа. Возможные константы и их значения перечислены ниже:

UPLOAD_ERROR_OK — равна 0, означает, что ошибок не было.

UPLOAD_ERR_INI_SIZE —равна 1, означает, что размер загружаемого файла превышает максимальное значение, заданное в файле php.ini директивой up_load_max_filesize.

UPLOAD_ERR_FORM_SIZE —равна 2, означает, что размер загружаемого файла превышает максимальное значение, заданное в HTML-форме элементом MAX_FILE_SIZE.

UPLOAD_ERR_PARTIAL —равна 3, означает, что загружена только часть файла.

UPLOAD_ERR_NO_FILE —равна 4, означает, что файл не загружен.

Далее мы проверяем MIME-тип. В данном случае мы решили, что будем загружать только текстовые файлы, поэтому MIME-тип контролируется путем сравнения $_FILES ['userfile']['type'] со строкой 'text/plain'. Это только проверка на предмет ошибки, а не проверка, связанная с безопасностью. MIME-тип определяется браузером пользователя на основе расширения файла, а затем передается серверу. Поскольку достаточно несложно передать ложный MIME-тип, злоумышленники вполне могут воспользоваться этим.

Затем мы проверяем, что файл действительно загружен и не является локальным файлом вроде /etc/passwd. Несколько позже мы вернемся к этому вопросу.

Если все нормально, то мы копируем файл в предназначенный для него каталог. В данном примере это каталог /uploads/ —он находится за пределами дерева веб-документов и потому удобен для помещения в него тех файлов, которые впоследствии будут куда-нибудь включаться.

Затем мы обрабатываем файл, удаляем из него все случайные HTML и PHP-дескрипторы с помощью функции strip_tags() и записываем файл обратно.

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

Результат успешного выполнения сценария выглядит так:

hello_html_6aaff26a.gif



Преподаватель: __________(О.А. Солодовникова)

Практическая работа рассмотрена на заседании цикловой комиссии математики и информатики рекомендована на утверждение.

Протокол № 1 от 29.08.2016

Председатель комиссии: ____________(Н.В.Меркулова)

ГБПОУ ВО «Острогожский многопрофильный техникум»


УТВЕРЖДАЮ

Заместитель директора

по учебной работе

__________О.В.Редина





ИНСТРУКЦИОННО - ТЕХНОЛОГИЧЕСКАЯ КАРТА

на выполнение практической работы №21

по WEB-программировнаию

для студентов, обучающихся по специальности

Программирование в компьютерных системах




ТЕМА: Введение в язык программирования РНР.

НАИМЕНОВАНИЕ РАБОТЫ: сookies и управление сессиями.

ЦЕЛЬ РАБОТЫ: получить практические навыки управления сессиями. 

Формируемые компетенции: ОК5,ОК6.

ПРИОБРЕТАЕМЫЕ УМЕНИЯ И НАВЫКИ: приобретение умения управления сессиями.

НОРМА ВРЕМЕНИ: 90 минут

ОСНАЩЕНИЕ РАБОЧЕГО МЕСТА: ПК, тетрадь для ПЗ.

ОСОБЫЕ ПРАВИЛА ПО ТЕХНИКЕ БЕЗОПАСНОСТИ НА РАБОЧЕМ МЕСТЕ: проведен инструктаж по техники безопасности в компьютерном классе.

ЛИТЕРАТУРА: JavaScript, PHP и MySQL. Джентельменский набор web-мастера Прохоренок Н.А. Спб.; БХВ – Петеррбург,2009, п.5.24.3; PHP, MySQL, ХML программирование для Интернета.Бенкен Е.С.СПб.:БХВ-Петербург, 2008,гл.11


ВОПРОСЫ ПРИ ДОПУСКЕ


1.Что такое сессии и где они используются.


МЕТОДИЧЕСКИЕ РЕКОМЕНДАЦИИ

Сессии в PHP

Сессии - это механизм, который позволит вам создавать и использовать переменные, сохраняющие свое значение в течение всего времени работы пользователя с вашим сайтом. При этом у каждого пользователя вашего сайта эти переменные будут собственными, т.е. их область видимости (variable scope) распространяется на все время нахождения на сайте конкретного пользователя, причем для каждого захода пользователя на ваш сайт эти переменные будут различными. Говоря проще, эти переменные принадлежат конкретной сессии работы конкретного пользователя с вашим сайтом (отсюда и название механизма - сессии).

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

Модель "клиент-сервер"

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

hello_html_m4b1f230c.jpg

Модель "клиент-сервер".

Эта схема работает следующим образом: пользователь, через браузер посылает запрос на сервер. На стороне сервера запрос принимает программа web-сервера (в большинстве случаев - Apache), анализирует запрос и, в нашем случае, вызывает PHP для обработки этого запроса. PHP выполняет ваш скрипт, задачей которого является генерация страницы, соответствующей полученному запросу. По завершении работы PHP передает сгенерированную страницу web-серверу, который отсылает ее обратно на машину клиента как результат обработки его запроса.

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

hello_html_mece634a.jpg

Клиенты и сервер.

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

Данная задача решается путем присвоения каждой сессии уникального идентификатора SID (Session IDentifier), который создается в тот момент, когда пользователь заходит на сайт, и уничтожается в момент, когда пользователь уходит с сайта. Он представляет собой строку из 32 символов (например, ac4f4a45bdc893434c95dcaffb1c1811). Этот идентификатор передается на сервер вместе с каждым запросом клиента и возвращается обратно вместе с ответом сервера. Этот идентификатор передается на сервер вместе с каждым запросом со стороны клиента и возвращается на машину клиента вместе с результатами обработки запроса. Алгоритм генерации SID (а в PHP в качестве идентификатора сессии используется т.н. GUID (Global Unique IDentifier)) позволяет гарантировать его уникальность, поэтому исключена возможность того, что две сессии будут иметь один и тот же идентификатор сессии.

PHP может использовать два различных механизма в качестве "транспортного средства" для передачи SID:

Cookies

Параметр query string

Cookies - это, конечно, более удобный способ передачи идентификатора. При этом SID сохраняется "внутри" браузера и остается незаметным для пользователя. Но поддержка cookies - это необязательное условие для браузера, она может отсутствовать или быть отключена у кого-то из посетителей, поэтому в общем случае полагаться на них нельзя. В этом случае можно использовать менее "красивый", но более надежный способ - передачу SID через параметр query string. PHP имеет возможность автоматически добавлять SID ко всем линкам в генерируемых HTML страницах, поэтому вам, как правило, не нужно будет заботиться о том, чтобы добавлять этот идентификатор к каждому линку вручную. Если же вы по каким-либо причинам хотите сами передавать идентификатор сессии - вы всегда можете получить его из константы SID или из функции session_id().

Создание и использование сессионных переменных

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

session_start();

Пусть вас не смущает вопрос: "Что будет, если я вызову эту функцию дважды?", все будет в порядке. Вам необходимо вызывать эту функцию на каждой странице, на которой вам необходимо использовать сессионные переменные. Кроме того, если вы часто используете сессионные переменные в своих программах, вы можете просто изменить настройки PHP таким образом, чтобы сессии инициализировались автоматически.Для наглядности сессии можно задать имя с помощью функции session_name([имя_сессии]). Делать это нужно еще до инициализации сессии. Получить имя текущей сессии можно с помощью этой же функции, вызванной без параметров: session_name();

Регистрация сессионных переменных производится путем добавления следующей строчки в ваш код:

session_register('var1','var2',...);

Зарегистрировать переменную также можно, просто записав ее значение в ассоциативный массив $_SESSION, т.е. написав

$_SESSION['имя_переменной'] = 'значение_переменой';

В этом массиве хранятся все зарегистрированные (т.е. глобальные) переменные сессии.

Доступ к таким переменным осуществляется с помощью массива $_SESSION['имя_переменной'] (или $HTTP_SESSION_VARS['имя_переменной'] для версии PHP 4.0.6 и более ранних). Если же в настройках php включена опция register_globals, то к сессионным переменным можно обращаться еще и как к обычным переменным, например так: $имя_переменной.В качестве параметров функции передаются имена сессионных переменных, которые необходимо создать. Обратите внимание на то, что передаются именно имена, а не сами переменные, как можно подумать. Необходимо помнить об этом, дабы избежать ошибок.После того, как сессионная переменная зарегистрирована - она может быть использована на любой странице сайта в пределах одной и той же пользовательской сессии. Повторенная регистрация переменной необязательна (т.е. зарегистрировав переменную на одной странице совершенно необязательно регистрировать ее же на всех страницах, где необходимо ее использование). Но если вы будете регистрировать переменные на каждой странице - тоже ничего страшного не произойдет.

Получить идентификатор текущей сессии можно с помощью функции session_id().

Способ обращения к сессионным переменным зависит от настроек в файле php.ini. Если register_globals включен, то обращение к сессионной переменной по синтаксису ничем не будет отличаться от обращения к обычной переменной:

session_register('myVar');

$myVar = 5;

Если же он выключен - то обращаться к сессионным переменным необходимо через глобальный массив $HTTP_SESSION_VARS:

session_register('myVar');

$HTTP_SESSION_VARS['myVar'] = 5;

Пример 1.

page1.php


<?php

session_start();

session_register('myVar');

$myVar = 'It works! This is value of session variable'; ?>

click here


page2.php


<?php session_start(); echo $myVar; ?>

Пример 2.

<? session_start();

// создаем новую сессию или

// восстанавливаем текущую

echo session_id();

// выводим идентификатор сессии

?>

My home page

...

// домашняястраничка

<? echo session_name();

// выводим имя текущей сессии.

// В данном случае это PHPSESSID

?>

Авторизация доступа

Зарегистрируем логин и пароль, вводимые пользователем на странице авторизации.

<? session_start();

// создаем новую сессию или

// восстанавливаем текущую

if (!isset($_GET['go'])){

echo "

Login:

Password:

";

}else {

$_SESSION['login']=$_GET['login'];

// регистрируемпеременную login

$_SESSION['passwd']=$_GET['passwd'];

// регистрируем переменную passwd

// теперь логин и пароль - глобальные

// переменные для этой сессии

if ($_GET['login']=="pit" &&

$_GET['passwd']=="123") {

Header("Location: secret_info.php");

// перенаправляем на страницу

// secret_info.php

}else echo "Неверный ввод,

попробуйте еще раз
";

} print_r($_SESSION);

// выводим все переменные сессии

?>

Теперь, попав любую страницу сайта, мы сможем работать с введенными пользователем логином и паролем, которые будут храниться в массиве $_SESSION. Таким образом, если изменить код секретной странички (secret_info.php) так:

<?php session_start();

// создаем новую сессию или

// восстанавливаем текущую

print_r($_SESSION);

// выводим все переменные сессии

?>

<html>

Secret info

Здесь я хочу делиться секретами с другом Васей.

То мы получим в браузере на секретной странице следующее:

Array (

[login] => pit

[passwd] => 123 )

Здесь я хочу делиться секретами с другом Васей.

В итоге получим.список переменных и саму секретную страничку.

Что это нам дает? Допустим, злобный хакер хочет прочитать секреты. И он как-то хитрым способом узнал, как называется секретная страничка (или странички). Тогда он может подло попытаться просто ввести ее адрес в строке браузера, минуя страницу авторизации (ввода пароля). Чтобы избежать такого гнусного проникновения в наши тайны, нужно дописать всего пару строк в код секретных страничек:

<?php session_start();

// создаем новую сессию или

// восстанавливаем текущую

print_r($_SESSION);

// выводим все переменные сессии

if (!($_SESSION['login']=="pit" &&

$_SESSION['passwd']==123))

// проверяем правильность

// пароля-логина

Header("Location: authorize.php");

// если ошибка, то перенаправляем на

// страницуавторизации

?>Secret info ... // здесь

располагается

//секретная информация :)

Удаление переменных сессии

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

Функция session_unregister(имя_переменной) удаляет глобальную переменную из текущей сессии (т.е. удаляет ее из списка зарегистрированных переменных). Если регистрация производилась с помощью $_SESSION ($HTTP_SESSION_VARS для версии PHP 4.0.6 и более ранних), то используют языковую конструкцию unset(). Она не возвращает никакого значения, а просто уничтожает указанные переменные.

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

В файл secret_info.php добавим строчку для выхода на главную страницу:

<?php

// ... php код

?>

Secret info

...

// здесь располагается

// секретная информация :)

На главную

В Index.php уничтожим логин и пароль, введенные ранее:

<? session_start();

session_unregister('passwd');

// уничтожаемпароль

unset($_SESSION['login']);

// уничтожаемлогин

print_r($_SESSION);

// выводим глобальные переменные сессии

?>

<html>

My home page

... // домашняя страничка

Теперь, чтобы попасть на секретную страницу, нужно будет опять вводить логин и пароль.Для того чтобы сбросить значения всех переменных сессии, можно использовать функцию session_unset();

Уничтожить текущую сессию целиком можно командой session_destroy(); Она не сбрасывает значения глобальных переменных сессии и не удаляет cookies, а уничтожает все данные, ассоциируемые с текущей сессией.

<? session_start(); // инициализируем сессию $test = "Переменная

сессии"; $_SESSION['test']= $test;

// регистрируем переменную $test.

// если register_globals=on,

// томожноиспользовать

// session_register('test');


print_r($_SESSION);

// выводим все глобальные переменные


echo session_id();

// выводим идентификатор сессии


echo ""; session_unset();

// уничтожаем все глобальные

// переменные сессии

print_r($_SESSION); echo session_id(); echo "<hr>";

session_destroy(); // уничтожаемсессию print_r($_SESSION); echo

session_id(); ?>

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

Безопасность

Вообще говоря, cледует понимать, что использование механизма сессий не гарантирует полной безопасности системы. Для этого нужно принимать дополнительные меры. Обратим внимание на проблемы с безопасностью, которые могут возникнуть при работе с сессиями и, в частности, с теми программами, что мы написали.Во-первых, опасно передавать туда-сюда пароль, его могут перехватить. Кроме того, мы зарегистрировали его как глобальную переменную сессии, значит, он сохранился в cookies на компьютере-клиенте. Это тоже плохо. И вообще, пароли и логины по-хорошему должны храниться в базе данных.

ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ:

Реализуйте предложенные примеры.

Найдите в документации описание вывода отдельного системного окна для ввода имени пользователя и пароля. Реализуйте аутенификацию с выдачей системного окна.

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

4.Сделайте отчет о выполнении предложенных заданий.


КОНТРОЛЬНЫЕ ВОПРОСЫ

Дайте опрделение понятию Cookies.

Опишите как происхожит авторизация.


Преподаватель: __________(О.А. Солодовникова)

Практическая работа рассмотрена на заседании цикловой комиссии математики и информатики рекомендована на утверждение.

Протокол № 1 от 29.08.2016

Председатель комиссии: ____________(Н.В.Меркулова)

ГБПОУ ВО «Острогожский многопрофильный техникум»


УТВЕРЖДАЮ

Заместитель директора

по учебной работе

__________О.В.Редина





ИНСТРУКЦИОННО - ТЕХНОЛОГИЧЕСКАЯ КАРТА

на выполнение практической работы №22

по WEB-программировнаию

для студентов, обучающихся по специальности

Программирование в компьютерных системах



ТЕМА: Языки программирования РНР и MySQL.

НАИМЕНОВАНИЕ РАБОТЫ: Установка сервера MySQL в Windows

ЦЕЛЬ РАБОТЫ:Получить практические навыки управления сессиями. 

Формируемые компетенции: ОК5,ОК6.

ПРИОБРЕТАЕМЫЕ УМЕНИЯ И НАВЫКИ: Приобретение умения управления сессиями.

НОРМА ВРЕМЕНИ: 90 минут

ОСНАЩЕНИЕ РАБОЧЕГО МЕСТА: ПК, тетрадь для ПЗ.

ОСОБЫЕ ПРАВИЛА ПО ТЕХНИКЕ БЕЗОПАСНОСТИ НА РАБОЧЕМ МЕСТЕ: проведен инструктаж по техники безопасности в компьютерном классе.

ЛИТЕРАТУРА: JavaScript, PHP и MySQL. Джентельменский набор web-мастера Прохоренок Н.А. Спб.; БХВ – Петеррбург,2009, п.5.24.3;PHP, MySQL, ХML программирование для Интернета.Бенкен Е.С.СПб.:БХВ-Петербург, 2008,гл.11


ВОПРОСЫ ПРИ ДОПУСКЕ:


Где хранятся файлы, которые потребуется запускать при старте сервера MySQL, а также утилиты, которые позволяют пользователю связаться с сервером MySQL напрямую из командной строки?

В каком файле осуществляется настройка сервера MySQL?

Как просмотреть содержимое полей host, user таблицы user базы данных mysql?



МЕТОДИЧЕСКИЕ РЕКОМЕНДАЦИИ


MySQL – это реляционная система управления базами данных. То есть данные в ее базах хранятся в виде логически связанных между собой таблиц, доступ к которым осуществляется с помощью языка запросов SQL (Structured Query Language, язык структурированных запросов). SQL является общепринятым стандартом языка работы с реляционными базами данных. В тоже время MySQL представляет собой сервер реляционных баз данных. MySQL функционирует по технологии «клиент – сервер». По умолчанию запрос от клиентской программы на подключение поступает на порт 3306 сервера MySQL. При ответе на запрос сервер создает сеанс с клиентом, за которым закрепляется два порта: один используется для отправки данных, а другой – для их приема. В ходе сеанса клиент посылает серверу команды, имеющие вид инструкций SQL. В ответ на некоторые инструкции сервер возвращает данные, а клиентская программа формирует их для отображения на экране.

hello_html_m6aad874f.jpg

Рассмотрим функции прикладных программ. На рис. 2 перечислены функции прикладных программ баз данных и СУБД.

hello_html_34bb4b5c.jpg

В первую очередь приложение создает и обрабатывает формы. Веб-приложение, например, генерирует HTML и другие конструкции веб-форм, которые заставляют форму отображаться на компьютере пользователя. Когда пользователь заполняет форму и посылает данные обратно, приложение определяет, какие таблицы данных нуждаются в модификации, и посылает запросы к СУБД, чтобы вызвать необходимую модификацию. Если во время этого процесса возникают ошибки, приложение получает сообщение об ошибке и генерирует подходящее сообщение для пользователя или осуществляет какое-нибудь другое действие. Вторая функция прикладной программы, показанная на рис. 2, — создание и передача запросов. Сначала приложение генерирует запрос к СУБД. Такие запросы почти всегда пишутся на языке SQL. После обработки запроса его результаты форматируются и передаются пользователю.

Третья функция похожа на вторую. Приложение запрашивает данные у СУБД (опять с помощью SQL) и форматирует результаты запроса в виде отчета. Кроме создания форм, запросов и отчетов, приложение также производит другие действия по изменению базы данных в соответствии с логикой, специфичной для этого приложения. Например, в некотором приложении пользователь запросил 10 единиц определенного товара. Теперь предположим, что когда прикладная программа произвела запрос базы данных (через СУБД), она нашла только 8 единиц в наличии. Что следует сделать? Это зависит от логики данного конкретного приложения. Возможно, следует не брать ничего со склада и уведомить пользователя о возникшей ситуации, или же взять 8 единиц, а 2 оформить как отложенный заказ. Могут быть и другие варианты. В любом случае, реализация соответствующей логики — задача прикладной программы.

MySQL – свободно распространяемая система. Работать с MySQL можно не только в текстовом режиме, но и в графическом. Существует очень популярный визуальный интерфейс (написанный на РНР) для работы с MySQL. Называется он PhpMyAdmin. Этот интерфес позволяет значительно упростить работу с базами данных в MySQL.


ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ:

Проведите установку и настройку сервера MySQL 5

Сделайте отчет о выполнении предложенных заданий

Ответьте на контрольные вопросы.


Для создания баз данных и работы с ними нам потребуется установить сервер MySQL и утилиты, которые поставляются вместе с сервером.

Проведем установку и настройку сервера MySQL 5

Разархивируйте пакет mysql-5.0.41-win32.zip в указанную преподавателем папку mysql-5.0.41-win32 и запустите на выполнение файл с расширением ехе, выберите типичный способ установки (рис. 3)


hello_html_7a382f54.jpg

Рис. 3 Выбор типичного способа установки


Затем сконфигурируйте сервер с помощью мастера (wizard) (рис. 4)

hello_html_m5b3a8e71.jpg

Рис.4 Мастер конфигурирования MySQL


Выберите вначале стандартный вариант конфигурации сервера (рис.5)


hello_html_574bff4b.jpg


Рис. 5. Выбор стандартного варианта конфигурации сервера


Выберите установку сервера MySQL как сервиса Windows, тогда MySQL будет запускаться при старте системы автоматически. Выберите имя для сервиса. Под этим именем вы в дальнейшем найдете его в списке сервисов в окне Администрирование/Службы. Укажите, что нужно включить путь до каталога bin в переменную окружения PATH. (рис. 6). Переменная PATH содержит имена всех каталогов, в которых система ищет программу, запускаемую пользователем. Если окажется, что программа находится в каталоге, не указанном в переменной PATH, то Windows не сможет ее найти и сообщит о невозможности запуска приложения.

В каталоге bin сервера MySQL содержатся те файлы, которые потребуется запускать при старте сервера, а также утилиты, которые позволят нам связаться с сервером напрямую из командной строки.



hello_html_m8671a74.jpg

Рис.6. Выбор режима конфигурации сервера MySQL


Проведем конфигурирование доступа к серверу MySQL. Зададим пароль для суперпользователя root. Не разрешайте удаленный доступ к серверу для суперпользователя это существенно ослабит его безопасность. Создайте учетную запись для анонимного пользователя. Анонимный пользователь заходит в систему и при этом получает ограниченные права, в частности, он не имеет доступа к системным базам данных (рис. 7)

hello_html_m56c18de7.jpg

Рис. 7. Конфигурирование доступа к серверу MySQL


Завершите установку (рис. 8-9)

hello_html_m31bb43da.jpg

Рис. 8.

hello_html_m7cafeade.jpg

Рис. 9.

Убедитесь, что сервис MySQL запущен. Найдите в папке Все программы группу MySQL и запустите клиентскую программу доступа к серверу MySQL Command Line Client из командной строки. Если установка завершена благополучно, то сервер у вас уже запущен, клиентская утилита mysql установит соединение с сервером и предложит ввести пароль. Введите пароль суперпользователя (рис. 10). Таким образом вы соединитесь с сервером MySQL под именем root, т.е. будете выступать в качестве администратора сервера.

hello_html_m45f3632b.jpg

Рис. 10.

При установке сервера MySQL в Windows необходимо выполнить настройку сервера с учетом кодировки и способа сравнения данных в базе, иначе русские слова будут отображаться в виде строк из вопросительных знаков. Откройте каталог MySQL, в который был установлен сервер, и найдите конфигурационный файл my.ini.

Найдите в файле my.ini раздел [mysqld], касающийся настройки самого сервера.

Найдите директиву default-character-set, измените ее и добавьте еще три директивы так, чтобы этот фрагмент файла имел вид:

default-character-set=cp1251

character-set-server=cp1251

init-connect="SET NAMES cp1251"

skip-character-set-client-handshake
Две последние строки принудительно устанавливают кодировку ср1251 для всех запросов. Эти директивы позволяют создавать таблицы в кодировке ср1251 и благополучно выполнять запросы, используя русскоязычные строки, однако имена столбцов, таблиц и баз должны быть даны в латинском алфавите.

Скопировать библиотеку libmysql.dll из папки PHP в папку windows\system32.


Работа с клиентской программой (утилитой) мysql

Утилита mysql позволяет осуществить соединение с сервером MySQL и давать команды SQL для создания баз, записи в них данных и выборки данных из баз.

Метка mysql> называется приглашением командной строки и обозначает ожидание новой команды

Для мysql признаком завершения команды является; (точка с запятой)

Метка -> командной строки означает ожидание следующей многострочной команды

Приведем пример команды, требующей распечатать список баз данных сервера:
mysql> SHOW databases;



hello_html_m275f244.jpg

Рис. 11. Результат выполнения команды SHOW databases


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

Итак, мы видим (рис.11), что на сервере существуют три системные базы данных.

Среди всех баз данных может быть выбрана одна текущая, к которой направлены все команды SQL. Выбирается текущая база данных с помощью команды

USE <база данных>;

Выясним, какие таблицы содержатся в системной базе mysql (рис.12).Для этого выполним следующие запросы:

mysql>USE mysql;

mysql>SHOW tables;

hello_html_m129ba821.jpg

Рис. 12. Таблицы в базе mysql

При подключении к серверу MySQL пользователь указывает имя и пароль, а сервер проверяет, имеет ли клиент право получить доступ к серверу, и, в случае успеха, наделяет пользователя привилегиями, исходя из данных о привилегиях конкретного пользователя. Информация о привелегиях находится в таблицах привелегий – columns_priv, db, host, procs_priv, tables_priv, user системной базы mysql.

Список привилегий представлен в табл. 1


Таблица 1. Привилегии MySQL

Привилегия

К чему применяется

Что обозначает

ALTER

Таблицы

Изменение структуры таблицы

DELETE

Удаление данных из таблицы

INDEX

Создание или уничтожение индексов

INSERT

Добавление строк

SELECT

Получение данных из таблицы

UPDATE

Изменение значений существующих столбцов

CREATE

Базы данных, таблицы, индексы

Создание БД, таблиц, индексов

DROP

Базы данных или таблицы

Удаление БД.таблиц

GRANT

Администрирование сервера

Создание пользователя MySQL и предоставление ему привилегий или лишение привилегий на четырех уровнях:

Глобальный уровень

Глобальные привилегии применяются ко всем базам данных на указанном сервере. Эти привилегии хранятся в таблице mysql.user

Уровень баз данных

Привилегии базы данных применяются ко всем таблицам указанной БД. Эти привилегии хранятся в таблицах mysql.db и mysql.user

Уровень таблицы.

Привилегии таблицы применяются ко всем столбцам указанной таблицы. Эти привилегии хранятся в таблицах mysql.tables_priv.

Уровень столбца.

Привилегии столбца применяются к отдельным столбцам указанной таблицы. Эти привилегии хранятся в таблицах mysql.columns_priv.

SHOWDATABASES

Администрирование сервера

Просмотр всех имеющихся баз данных

SHUTDOWN

Администрирование сервера

Завершение работы сервера


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

mysql>USEmysql;

mysql>SELECT * FROMuser; (Получим все данные из таблицы user)

Проверка пользователя осуществляется с помощью трех полей таблицы user (host, user, password) базы mysql. Сервер устанавливает соединение, если находит в таблице user запись, в которой имя пользователя и пароль совпадают с введенными значениями. Непустые значения в поле password представляют собой зашифрованные пароли. В MySQL пароли не хранятся в виде открытого текста. Пароль, который вводится пользователем при попытке подсоединения, шифруется (с помощью функции PASSWORD()). В дальнейшем зашифрованный пароль используется клиентом и сервером в процессе проверки его правильности. Начиная с MySQL 4.1.3 длина шифра составляет 41 символ. Убедимся в этом, дав команду (рис. 13):


mysql>SELECT password FROM user;


hello_html_m30011af7.jpg

Рис. 13.Содержимое поля password

Просмотрите содержимое полей host, user таблицы user, сделав соответствующие запросы.

Удалите всех пользователей из таблицы user, не имеющих логина (поле user для них пустое). Убедитесь в том, что в таблице user определен только пользователь root (рис.14)

hello_html_2ad6b2e1.jpg

Рис.14. Необходимые запросы и результаты их выполнения


Создадим базу данных, с которой будем работать:

mysql>CREATE DATABASE book;


Убедитесь в том, что база данных создана

Создадим простого пользователя, предоставим ему доступ к созданной базе данных:

mysql>GRANT ALL PRIVILEGES ON book.* TO nika@localhost IDENTIFIED BY

->‘123’;

В данном запросе команда grant наделяет пользователя nika, подключающегося к серверу с той же машины (с localhost) и идентифицируемого паролем «123», всеми привилегиями на все таблицы базы данных book.

Завершите работу с сервером.

Запустим клиентскую утилиту mysqlиз командной строки:

<Пуск><Выполнить><mysqld.exe> - запуск сервера MySQL

<mysqlhlocalhostunikap> - запуск клиента mysqlc указанием имени пользователя, под которым хотим подключиться к серверу и хост, с которого вы хотите подключиться. После ключа –р не указан пароль, мы знаем, что он нужен, но не хотим вводить его в командной строке, дождемся приглашения сервера и введем пароль.

Завершите работу с сервером.

Запустите клиентскую утилиту mysqlиз командной строки, подключившись к серверу MySQL как пользователь root.

Зададим новый пароль пользователю root, используя команду SET:

mysql>SET PASSWORD FOR root@localhost= PASSWORD(‘new_password’);

Заменим еще раз пароль для пользователя root, непосредственно работая с таблицами назначения привилегий:

mysql>USEmysql; (подключение к системной базе данных)

mysql>UPDATEuserSETpassword=PASSWORD('new_password’) WHEREuser=’root’; (изменение значения поля password в таблице user для пользователя root)

mysql>FLUSH PRIVILEGES; (команда, заставляющая сервер перечитать таблицы привилегий – тогда они вступят в силу).


КОНТРОЛЬНЫЕ ВОПРОСЫ:


Как удалить всех пользователей из таблицы user базы данных mysql, не имеющих пароля?

Какое условие должно быть выполнено для того, чтобы пользователь имел возможность создавать базы данных?

Какой запрос обеспечивает создание базы данных taxi?

Какой запрос завершает работу с сервером MySQL?

Как запустить клиентскую утилиту mysqlиз командной строки и подключиться к серверуMySQL как пользователь root?



Преподаватель: __________(О.А. Солодовникова)

Практическая работа рассмотрена на заседании цикловой комиссии математики и информатики рекомендована на утверждение.

Протокол № 1 от 29.08.2016

Председатель комиссии: ____________(Н.В.Меркулова)



ГБПОУ ВО «Острогожский многопрофильный техникум»


УТВЕРЖДАЮ

Заместитель директора

по учебной работе

__________О.В.Редина





ИНСТРУКЦИОННО - ТЕХНОЛОГИЧЕСКАЯ КАРТА

на выполнение практической работы №23

по WEB-программировнаию

для студентов, обучающихся по специальности

Программирование в компьютерных системах



ТЕМА: Языки программирования РНР и MySQL.

НАИМЕНОВАНИЕ РАБОТЫ: создание баз данных в MySQL.

ЦЕЛЬ РАБОТЫ: научиться создавать табличные базы данных в СУБД MySQL

Формируемые компетенции: ОК1,ОК2,ОК3,ОК4,ОК5.

ПРИОБРЕТАЕМЫЕ УМЕНИЯ И НАВЫКИ: приобрести навыки создания баз данных в MySQL.

НОРМА ВРЕМЕНИ: 90 минут

ОСНАЩЕНИЕ РАБОЧЕГО МЕСТА: ПК, тетрадь для ПЗ.

ОСОБЫЕ ПРАВИЛА ПО ТЕХНИКЕ БЕЗОПАСНОСТИ НА РАБОЧЕМ МЕСТЕ: проведен инструктаж по техники безопасности в компьютерном классе.

ЛИТЕРАТУРА: PHP, MySQL, ХML программирование для Интернета. Бенкен Е.С. СПб.:БХВ-Петербург, 2008,гл.16


ВОПРОСЫ ПРИ ДОПУСКЕ


1.Что представляет собой Mysql.


МЕТОДИЧЕСКИЕ РЕКОМЕНДАЦИИ

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

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

Таблицы позволяют при обработке информации увеличить:

оперативность;

гибкость;

быстродействие.

Созданная БД в mysql характеризуется:

быстротой обработки и поддержкой больших объемов данных;

простотой и надежностью в использовании;

наличием богатого набора полезных свойств;

поддержкой работы практически во всех операционных системах.

СУБД mysql эффективно применяется в самых разнообразных отраслях и направлениях.


ПОРОЯДОК ВЫПОЛНЕНИЯ РАБОТЫ


В СУБД MySQL создать табличную базу данных «Gurnal».

Сделайте отчет о выполнении предложенных заданий.

Ответьте на контрольные вопросы.


Запустите терминал командой [Пуск – Прочее – Система – Konsole (Терминал)]. Перед вами появится диалоговое окно, в которое можно вводить команды. Чтобы запустить MySQL необходимо набрать следующую команду входа в систему: mysqluroot и нажать Enter. После этого система выведет приветствие и строку mysql>, после которой можно вводить команды для работы в СУБД MySQL (рис. 1).

hello_html_28c55299.png

Рис. 1.

Создадим базу данных с именем Gurnal. Для этого набираем скрипт

CreatedatabaseGurnal;

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

Сервер MySQL должен ответить примерно так:

hello_html_2e206c3e.png

[Запрос обработан, изменилась 1 строка (0.11 сек)]. Это значит, что была успешно создана база данных. Чтобы посмотреть, какие базы данных имеются в системе нужно выполнить следующую команду: showdatabases;

Сервер ответит списком баз данных.

hello_html_m40815ec2.png

Создадим таблицу Klass в базе данных Gurnal. Для этого вводим следующую команду:

Create table Gurnal.Klass(

ID_kl int unsigned not null auto_increment primary key,

Kl varchar(4)) default charset=cp1251;

Теперь создадим таблицу Uchenik в базе данных Gurnal. Для этого вводим следующую команду:

Create table Gurnal.Uchenik(

ID_uch int unsigned not null auto_increment primary key,

FIO varchar(45) not null,

Data_r date not null,

Adres varchar(35),

Tel varchar(15),

Pol varchar(2),

Jazik varchar(15),

Roditeli text,

ID_kl int,

foreign key(ID_kl) references Gurnal.Klass(ID_kl) on delete set null on update cascade)

defaultcharset=cp1251;

За ключевыми словами createtable следует имя создаваемой таблицы. Каждая строка внутри скобок определяет один столбец. За именем каждого столбца следует тип столбца. Типы столбцов определяют тип данных, которые будет содержать столбец. В данном примере столбцы FIO, Adres, Tel, Pol, Jazik будут содержать текстовые строки, поэтому тип столбца задан как varchar, что означает переменное количество символов. Максимальное число символов для столбцов varchar определяется числом, заключенным в скобки, которое следует сразу за именем столбца. Столбцы, содержащие числовые значения будут иметь тип int. Столбец Data_r имеет тип data. Первый столбец ID_uch и ID_kl содержит идентификационный номер. Эти столбцы являются выглядят несколько перегруженными, их следует рассмотреть отдельно:

Int – определяет тип столбца как целое число;

Unsigned – определяет, что число будет положительное;

Notnull – определяет, что значение не может быть null (пустым), то есть каждая строка в этом столбце должна иметь значение.

Auto_increment – это означает, что значение данного поля увеличивается автоматически на единицу при вводе новой записи. Поэтому мы не должны задавать для этого столбца значения: MySQL генерирует их самостоятельно.

Primarykey – обозначает первичный ключ, то есть каждое значение такого столбца должно быть уникальным.

Для связывания таблиц в MySQL используются специальные команды, как в нашем примере

foreign key(ID_kl) references Gurnal.Klass(ID_kl) on delete set null on update cascade

Это означает, что внешний ключ (ID_kl из таблицы Uchenik) связан со столбцом ID_kl таблицы Klass. Причем при удалении записи (ondeletesetnull) из таблицы Klass, связанные с этой записью данные таблицы Uchenik не будут удалены, а значение в столбце ID_kl изменится на null (пустое). Это означает, что если, например, был удален 9А класс из таблицы Klass, то ученики 9А класса не удалятся из базы данных, а просто значение в поле ID_kl станет пустым. Запись onupdatecascadeозначает, что при изменении данных в таблице Klass (наример, название класса поменялось с 10А на 10В) изменятся данные столбца ID_kl в таблице Uchenik (т.е. все ученики из 10А класса переведутся в 10В класс).

Команда defaultcharset=cp1251 означает, что для данной таблицы будет установлена русская кодировка cp1251.

Задание 1. Аналогичным образом создайте в базе данных Gurnal таблицы: Predmet, Urok, Ozenka (рис.2.2 – 2.4).

hello_html_70b208cf.png

Рис. 2

hello_html_79ffdee9.png

Рис. 3

hello_html_m780b7a05.png

Рис. 4


КОНТРОЛЬНЫЕ ВОПРОСЫ:


1.Чем характеризуется созданная база данных в MySql.



Преподаватель: __________(О.А. Солодовникова)

Практическая работа рассмотрена на заседании цикловой комиссии математики и информатики рекомендована на утверждение.

Протокол № 1 от 29.08.2016

Председатель комиссии: ____________(Н.В.Меркулова)



ГБПОУ ВО «Острогожский многопрофильный техникум»


УТВЕРЖДАЮ

Заместитель директора

по учебной работе

__________О.В.Редина





ИНСТРУКЦИОННО - ТЕХНОЛОГИЧЕСКАЯ КАРТА

на выполнение практической работы №24

по WEB-программировнаию

для студентов, обучающихся по специальности

Программирование в компьютерных системах



ТЕМА: Языки программирования РНР и MySQL.

НАИМЕНОВАНИЕ РАБОТЫ: запросы к базам данных в MySQL.

ЦЕЛЬ РАБОТЫ: научиться осуществлять поиск записей в базе данных с использованием запросов.

Формируемые компетенции: ОК1,ОК2,ОК3,ОК4,ОК5,ОК6.

ПРИОБРЕТАЕМЫЕ УМЕНИЯ И НАВЫКИ: приобрести навыки создания запросов баз данных в MySQL.

НОРМА ВРЕМЕНИ: 90 минут

ОСНАЩЕНИЕ РАБОЧЕГО МЕСТА: ПК, тетрадь для ПЗ.

ОСОБЫЕ ПРАВИЛА ПО ТЕХНИКЕ БЕЗОПАСНОСТИ НА РАБОЧЕМ МЕСТЕ: проведен инструктаж по техники безопасности в компьютерном классе.

ЛИТЕРАТУРА: PHP, MySQL, ХML программирование для Интернета. Бенкен Е.С. СПб.:БХВ-Петербург, 2008,гл.17


ВОПРОСЫ ПРИ ДОПУСКЕ

1.Какие виды запросов вам известны.


МЕТОДИЧЕСКИЕ РЕКОМЕНДАЦИИ


Самые простые SQL запросы

Выведет список ВСЕХ баз - SHOW databases;

ВыведетсписокВСЕХтаблицвБазеДанных base_name. -SHOW tables in base_name;

Простые SELECT (выбрать) запросы к базе данных MySQL

SELECT – запрос, который выбирает уже существующие данные из БД. Для выбора можно указывать определённые параметры выбора. Например, суть запроса русским языком звучит так - ВЫБРАТЬ такие-то колонки ИЗ такой-то таблицы ГДЕ параметр такой-то колонки равен значению.

Выбирает ВСЕ данные в таблице tbl_name.- SELECT * FROM tbl_name;

Выведетколичествозаписейвтаблице tbl_name- SELECT count(*) FROM tbl_name;

Выбирает (SELECT) из(FROM) таблицы tbl_name лимит (LIMIT) 3 записи, начинаяс 2. -SELECT * FROM tbl_name LIMIT 2,3;

Выбирает (SELECT) ВСЕ (*) записииз (FROM) таблицы tbl_name исортируетих - ORDER BY) пополю id попорядку. - SELECT * FROM tbl_name ORDER BY id;

Выбирает (SELECT) ВСЕ записи из (FROM) таблицы tbl_name и сортирует их (ORDER BY) по полю id в ОБРАТНОМ порядке.

SELECT * FROM tbl_name ORDER BY id DESC;

Выбирает (SELECT) ВСЕ (*) записи из (FROM) таблицы users и сортирует их (ORDER BY) по полю id в порядке возрастания, лимит (LIMIT) первые 5 записей.
SELECT * FROM users ORDER BY id LIMIT 5;

Выбирает все записи из таблицы users, где поле fname соответствует значению Gena.
SELECT * FROM users WHERE fname='Gena';

Выбирает все записи из таблицы users, где значение поля fname начинается с Ge.
SELECT * FROM users WHERE fname LIKE 'Ge%';

Выбирает все записи из таблицы users, где fname заканчивается на na, и упорядочивает записи в порядке возрастания значения id.

SELECT * FROM users WHERE fname LIKE '%na' ORDER BY id;

Выбирает все данные из колонок fname, lname из таблице users.

SELECT fname, lname FROM users;


ПОРОЯДОК ВЫПОЛНЕНИЯ РАБОТЫ


Создать запрос, переводящий учеников с одного класса в другой.

Сделайте отчет о выполнении предложенных заданий.

Ответьте на контрольные вопросы.

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

1. Для реализации перевода учеников в другой класс, создадим новую форму. Поместим на неё соответствующие компоненты как показано на рисунке ниже (рис. 1):

hello_html_73dd0c3c.png

Рис. 1.

Combobox1 и Combobox2 содержат названия классов, поэтому их необходимо заполнить в процедуре InitKlass.

В обработчике нажатия кнопки Добавить пишем следующее:

Procedure TForm9.ButtonClick(Sender: TObject);

Var f, i:integer;

BEGIN

If (Combobox1.Itemintex=-1) or (Combobox2.Itemindex=-1) then

Showmessage(‘Введены не все данные!’)

Else begin

If messageDlg(‘Перевестииз ‘+Combobox1.text+’ в ‘+Combobox2.text+’ класс?’, mtConfirmation, [mbYes,mbNo], 0)=mrYes then Begin

Form2.KQuery.active:=false;

Form2.KQuery.SQL.Clear;

Form2.UQuery.Active:=false;

Form2.UQuery.SQL.Clear;

Form2.UQuery.SQL.Append(‘select ID_uch from Uchenik where ID_kl=(select ID_kl from Klass where Kl=:p1);’); // выбираетвсехучениковкоторыеучатсявданномклассе

Form2.UQuery.Params.Items[0].asstring:=Combobox1.text;

Form2.UQuery.active:=true;

Form2.KQuery.SQL.Append(‘update Uchenik set ID_kl=(select ID_kl from Klass where Kl=:p1) where ID_uch=:p2;’); // изменяемклассвкоторомучитсяученик

F:=form2.UQuery.RecordCount; // подсчитываем количество записей найденных по запросу

For i:=1 to f do

Begin

Form2.KQuery.Params.Items[0].asstring:=Combobox2.Text;

Form2.KQuery.Params.Items[1].asstring:=strtoint(form2.UQuery.Fields.Fields[0].DisplayText);

Form2.KQuery.ExecSQL;

Form2.UQuery.next;

End;

Form2.UQuery.Active:=false;

Showmessage(‘Данные были успешно изменены!’);

Form2.initKlass;

End;

End;

END;

Combobox1.ItemIndex=-1 означает, что из выпадающего списка ничего не выбрано. В данной процедуре сначала создаётся запрос, ищущий всех учеников из выбранного в Combobox1 класса. Затем создаем запрос, который изменяет для каждого выбранного ученика ID_kl.

Не забудьте в на Form2 в кнопки Перевести написать открытие формы Перевод в другой класс.

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

Задание2. Создайте форму, в которой будут выводиться учащиеся выбранного класса (класс выбирается в DBGrid1). В качестве параметра берём строку таблицы DBGrid1:

UQuery.Params.Items[0].Asinteger:=KQuery.FieldByName(‘ID_kl’).Asinteger;


КОНТРОЛЬНЫЕ ВОПРОСЫ:

1.Что такое SELECT.


Преподаватель: __________(О.А. Солодовникова)

Практическая работа рассмотрена на заседании цикловой комиссии математики и информатики рекомендована на утверждение.

Протокол № 1 от 29.08.2016

Председатель комиссии: ____________(Н.В.Меркулова)





ГБПОУ ВО «Острогожский многопрофильный техникум»


УТВЕРЖДАЮ

Заместитель директора

по учебной работе

__________О.В.Редина





ИНСТРУКЦИОННО - ТЕХНОЛОГИЧЕСКАЯ КАРТА

на выполнение практической работы №25

по WEB-программировнаию

для студентов, обучающихся по специальности

Программирование в компьютерных системах


ТЕМА: Основные приемы программирования на РНР.

НАИМЕНОВАНИЕ РАБОТЫ: работа с базами данных в MySQL.

ЦЕЛЬ РАБОТЫ: научиться работать с базами

Формируемые компетенции: ОК8.

ПРИОБРЕТАЕМЫЕ УМЕНИЯ И НАВЫКИ: приобрести навыки работы в MySQL

НОРМА ВРЕМЕНИ: 90 минут

ОСНАЩЕНИЕ РАБОЧЕГО МЕСТА: ПК, тетрадь для ПЗ.

ОСОБЫЕ ПРАВИЛА ПО ТЕХНИКЕ БЕЗОПАСНОСТИ НА РАБОЧЕМ МЕСТЕ: проведен инструктаж по техники безопасности в компьютерном классе.

ЛИТЕРАТУРА: PHP, MySQL, ХML программирование для Интернета. Бенкен Е.С. СПб.:БХВ-Петербург, 2008,гл.16-17


ВОПРОСЫ ПРИ ДОПУСКЕ:

1.Какие виды запросов вы знаете?


МЕТОДИЧЕСКИЕ РЕКОМЕНДАЦИИ

База данных MySQL также оперирует таблицами, полями, типами полей. Для этого в командной строке Windows (кнопка Пуск – Выполнить cmd) наберите команду для запуска базы данных. Обратите внимание, запуск MySQL происходит из ВИРТУАЛЬНОГО диска, в приведенном примере это диск Z.

Z:\>cd usr
Z:\usr>cd local
Z:\usr\local>cd mysql5
Z:\usr\local\mysql5>cd bin
Z:\usr\local\mysql5\bin>mysql -u root -p
Enter password:
Welcome to the MySQL monitor. Commands end with ; or \g.
Your MySQL connection id is 1
Server version: 5.0.45-community-nt MySQL Community Edition (GPL)
Type 'help;' or '\h' for help.
Type '\c' to clear the buffer.
mysql>

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

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

hello_html_2e40cc4.gif
Рис. 1 Консоль для работы с базой данных MySQL.

Все дело в том, что изначально базы данных MySQL были прописаны на компьютерах под управлением операционной системы Unix/Linux, а для них такой интерфейс привычен. Но мы не должны пугаться, так как работа в таком аскетичном режиме позволит нам изучить универсальный язык обращения к любой базе данных (язык SQL-запросов) и позволит использовать этот язык в наших программах.

Конечно, созданы программы, например Mascon (http://www.scibit.com/Mascon), которые позволяют работать с базами данных MySQL через оконный интерфейс, щелкать на кнопки, выбирать команды меню. Но нам от них пользы будет не много, так как вся работа с базами данных у нас будет вестись программно через php-код, а в нем мы будем использовать те же самые команды, что и в консольном режиме.

Другой способ работы с MySQL - это использование утилиты PHPmyAdmin, которая входит в Denver, и доступна по адресу http://localhost/phpmyadmin. Вся работа происходит через web-интерфейс. Подобные утилиты есть на многих удаленных серверах, на которых вы решите размещать ваши сайты.

Команды MySQL

Итак, все команды мы отдаем, печатая их в консоли. Запомним простые правила:

Строка в консоли начинается с символов mysql>.

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

В случае, если вы ввели команду неправильно, на экране появится сообщение об ошибке с комментарием MySQL.

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

Ответ консоли «Query OK (0.03 sec)» сообщает, что наша команда успешно выполнена.

Итак давайте узнаем первые самые часто используемые команды:

show databases; (команда, показывающая уже существующие базы данных). Ответ консоли представлен на рисунке 2.

hello_html_31b2fd4f.gif
Рис.2. Вывод баз данных MySQL.

Мы видим, что в данный момент у пользователя создано три базы данных.

create database name; (создать базу данных name) Вместо «name» вы должны ввести имя вашей новой базы данных. При этом создается пустая база, не содержащая ни каких таблиц. При этом Denver создаст в каталоге C:\WebServers\usr\local\mysql\data пустой каталог с именем вашей базы данных. Вы можете использовать этот каталог со всем содержимым для переноса своих баз с компьютера на компьютер.

use name; (перейти к базе данных «name») Ту же самую команду можно записать короче: \u name

drop database name; (удалить базу данных name) При этом будет удален каталог, в котором хранилась база данных со всем содержимым. Ни каких дополнительных вопросов при удалении MySQL задавать не будет, так что будьте внимательны.

создание новой таблицы данных:После того, как база данных создана, (и вы зашли в нее с помощью команды \u) необходимо создать таблицу, описывая все поля, которые будут в ней:

mysql> create table student (
id_student int not null auto_increment,
name varchar(50),
birthday date,
info text,
e_mail varchar(50),
yare int,
primary key (id_student));

Query OK, 0 rows affected (0.06 sec)

В данном примере создана таблица student, содержащая шесть полей. В первой строчке мы задали имя таблицы. Далее идет описание поля id_student, оно должно быть целочисленным (int), не может быть пустым (not null) и автоматически увеличивается на единицу для каждой новой записи (auto_increment). Ёто - аналог поля типа «счетчик» в MS Access. Поле name содержит текст длиной в 50 символов, поле birthday имеет тип дата (в нем хранится информация вида 2006-08-24). Поле info может содержать фрагмент текста большого объема. Последняя строка задает ключевое поле (id_author), через которое данная таблица может связываться с другими таблицами.

Внимание! Название базы данных и все поля ОБЯЗАТЕЛЬНО пишите латиницей, без пробелов.

На удаленных серверах, как правило, разрешается использовать только одну базу данных (дополнительные базы за дополнительные деньги). А количество таблиц в базе не ограничено, поэтому в одной базе хранят все таблицы. Чтобы работать с ними было удобно, имеет смысл всем таблицам для одного сервиса использовать однотипные названия, например: school_students, school_teachers и т.п.

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

mysql> describe student;

вы получите следующее сообщение:

mysql> describe student; +------------+-------------+------+-----+---------+----------------+ 
| Field | Type | Null | Key | Default | Extra |
 
+------------+-------------+------+-----+---------+----------------+
 
| id_student | int(11) | | PRI | NULL | auto_increment |
 
| name | varchar(50) | YES | | NULL | |
 
| birthday | date | YES | | NULL | |
 
| info | text | YES | | NULL | |
 
| e_mail | varchar(50) | YES | | NULL | |
 
| yare | int(11) | YES | | NULL | |
 
+------------+-------------+------+-----+---------+----------------+
 6 rows in set (0.00 sec) mysql>

Для добавления данных в таблицы существует универсальный язык SQL

SQL-запросы

Вообще-то, команда для просмотра базы, создания таблицы - это тоже команды SQL.

Аббревиатура SQL расшифровывается, как Structure Query Language - Структурированный язык Запросов. С помощью этого языка вы можете извлечь информацию из любой современной базы данных. Давайте рассмотрим основные группы запросов.

Когда в MS Access вы конструируете запросы, программа пишет sql-запросы за вас, хотя и там можно взять управление в свои руки.

добавление данных в таблицу

mysql> INSERT INTO student VALUES(null, 'Иванов', '1993-02-20', ‘’, ‘’, ‘2004’);

Данная команда добавляет в таблицу user запись о ученике. Должны быть перечислены все поля, в той последовательности, как они создавались с помощью команды create table. Так как первое поле id_student формируется автоматически, мы не должны сами добавлять значение, это сделает параметр null. Поля «информация о ученике» и «e-mail» оставлены пустыми, но они все равно должны быть указаны в запросе. В данном запросе мы использовали русские буквы, но необходимо помнить, что MySQL поддерживает кодировку koi-8, поэтому при выводе данных в браузере с такими символами будут проблемы. Если команда набрана правильно, вы получите ответ:

Query OK, 1 row affected (0.33 sec)

Команды SQL нечувствительны к регистру, и все-таки я советую ключевые слова набирать заглавными буквами, а изменяемые параметры, имена строчными буквами. Эта привычка вам пригодится при написании программного кода.

выбор данных

mysql> SELECT * FROM student;

Команда выбирает все значения из таблицы student. Если необходимо выбрать только часть значений, можно запрос построить несколько иначе:

mysql> SELECT * FROM student WHERE yare > 2001;

В таком случае будут выведены на экран только те ученики, которые поступили в школу после 2001 года.
С помощью запроса на выборку данных вы можете осуществлять сортировку данных:

mysql> SELECT * FROM student ORDER BY name;

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

mysql> SELECT * FROM student ORDER BY binary(lower(name));

удаление данных

mysql> DELETE FROM student WHERE id_ student = 5;

Данный запрос удаляет запись из таблицы для ученика, у которого идентификатор равен пяти. 

Следующий запрос удалит все записи из таблицы:

mysql> DELETE FROM student WHERE id_ student >= 1;

изменение данных

mysql> update student set student ='Петров', birthday='1993-06-15' where id_student=4;

Запрос на изменение данных у записи с идентификатором id_student равное четырем. Мы можем изменить одно или несколько полей у данной записи. Порядок изменяемых полей в запросе значения не имеет.


ПОРОЯДОК ВЫПОЛНЕНИЯ РАБОТЫ

В режиме командной строки создайте базу данных «users», которая должна содержать информацию о зарегистрированных пользователях сайта. Обязательные поля: имя клиента, логин, пароль, e-mail, дополнительная информация. Вы можете дополнить список полей по своему усмотрению. В режиме командной строки заполните не менее пяти записей в созданной вами таблице.

Напишите sql-запрос выводящих всех пользователей, у которых пустой пароль.

Запустите Denver, запустите утилиту PHPmyAdmin, http://localhost/phpmyadmin. Научитесь создавать базу данных, создавать в них таблицу.

Сделайте отчет о выполнении предложенных заданий.

Ответьте на контрольные вопросы.


КОНТРОЛЬНЫЕ ВОПРОСЫ:

Как запустить консоль MySQL?

Как узнать, какие базы данных доступны вам на вашем компьютере?

Что означает символ звездочки в запросе на выборку данных?

Как с помощью одного запроса удалить все данные из таблицы?

Какие SQL-запросы вы знаете.

Что происходит на жестком диске компьютера при создании новой базы данных? Новой таблицы?


Преподаватель: __________(О.А. Солодовникова)

Практическая работа рассмотрена на заседании цикловой комиссии математики и информатики рекомендована на утверждение.

Протокол № 1 от 29.08.2016

Председатель комиссии: ____________(Н.В.Меркулова)




ГБПОУ ВО «Острогожский многопрофильный техникум»


УТВЕРЖДАЮ

Заместитель директора

по учебной работе

__________О.В.Редина





ИНСТРУКЦИОННО - ТЕХНОЛОГИЧЕСКАЯ КАРТА

на выполнение практической работы №26

по WEB-программировнаию

для студентов, обучающихся по специальности

Программирование в компьютерных системах



ТЕМА: Основные приемы программирования на РНР.

НАИМЕНОВАНИЕ РАБОТЫ: открытие новых окон в браузере.

ЦЕЛЬ РАБОТЫ: ознакомиться с принципами работы с окнами и динамическим управлением документами

Формируемые компетенции: ОК2.

ПРИОБРЕТАЕМЫЕ УМЕНИЯ И НАВЫКИ: научить использовать свойства окон при создании веб-страниц и создавать документы, изменяющие свойства других документов

НОРМА ВРЕМЕНИ: 90 минут

ОСНАЩЕНИЕ РАБОЧЕГО МЕСТА: ПК, текстовый редактор Блокнот, браузер.

ОСОБЫЕ ПРАВИЛА ПО ТЕХНИКЕ БЕЗОПАСНОСТИ НА РАБОЧЕМ МЕСТЕ: проведен инструктаж по техники безопасности в компьютерном классе.

ЛИТЕРАТУРА: JavaScript, PHP и MySQL. Джентельменский набор web-мастера, Прохоренок Н.А. ,Спб.; БХВ – Петеррбург,2009,стр. 145-148


ВОПРОСЫ ПРИ ДОПУСКЕ:

Перечислите свойства окна, которыми можно управлять.

Какие три аргумента нужно использовать при открытии окна?

При помощи какой переменной осуществляется доступ к окну?


МЕТОДИЧЕСКИЕ РЕКОМЕНДАЦИИ

Ознакомьтесь с теоретическими аспектами темы.

Открытие новых окон в браузере - грандиозная возможность языка JavaScript. Можно либо загружать в новое окно новые документы, либо (динамически) создавать новые материалы. Также можно управлять самим процессом создания окна. Например, можно указать, должно ли новое окно иметь строку статуса, панель инструментов или меню. Кроме того, можно задать размер окна. Список свойств окна, которыми можно управлять:


Directories

Yes / no

Height

количество пикселов

Location

Yes / no

Menubar

Yes / no

Resizable

Yes / no

Scrollbars

Yes / no

Status

Yes / no

Toolbar

Yes / no

Width

количество пикселов

Как видите, открывая окна, мы должны использовать три аргумента:

myWin= open("cell.htm", "displayWindow", "width=400, height=300, status=no, toolbar=no, menubar=no");

Второй аргумент - это имя окна. Если оно известно, то можно загрузить туда новую страницу с помощью записи <ahref="cell.html" target="displayWindow">

При этом необходимо указать имя соответствующего окна (если же такого окна не существует, то с этим именем будет создано новое).myWin - это не имя окна, но только с помощью этой переменной можно получить доступ к окну. И поскольку это обычная переменная, то область ее действия - лишь тот скрипт, в котором она определена. Имя окна (в данном случае это displayWindow) - уникальный идентификатор, которым можно пользоваться с любого из окон браузера. Чтобы закрыть окно понадобится метод close(). Начало формы

Конец формы

Более того, можно таким же образом создавать и другие документы Web, такие как VRML-сцены и т.д. Для удобства можно размещать эти документы в отдельном окне или фрейме.


ПОРОЯДОК ВЫПОЛНЕНИЯ РАБОТЫ


Создайте веб-страницу, в которой в новое окно с помощью метода open() записывается другая страница.

Создайте веб-страницу, в которой производится создание нового окна фиксированного размера.

Создать документ с использованием методов объекта window.

Создать документ с использованием команд генерации нового документа.

Сделайте отчет о выполнении предложенных заданий.

Ответьте на контрольные вопросы.


Задание 1.

Создайте новый документ cell.html произвольного содержания.

Создайте новый документ html, скрипт показан ниже.

Открытьновоеокно" onClick= "openWin()" >

Начало формы

Конец формы

В представленном примере в новое окно с помощью метода open() записывается страница cell.htm.


Задание 2.

1. Создайте новый документ html

<html>

Открытьновоеокно" onClick="openWin2()">

В этом скрипте открывается новое окно размером 400x300 пикселей. Оно не имеет ни строки статуса, ни панели инструментов, ни меню. Начало формы

Конец формы

Как видите, свойства окна формулируются в строке "width=400,height=300,status=no,toolbar=no,menubar=no". Обратите внимание также и на то, что не следует помещать в этой строке символы пробела.

Задание 3.

1. Создайтедокумент:

<html>

<scriptlanguage="JavaScript">

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

Задание 4.

1. Создайте HTML-документ:

<html>

Начало формы

Конец формы

Давайте рассмотрим функцию openWin3(). Очевидно, мы сначала открываем новое окно браузера. Поскольку первый аргумент функции open() - пустая строка (""), то это значит, что мы не желаем в данном случае указывать конкретный адрес URL. Браузер должен создать дополнительно новый документ. В скрипте мы определяем переменную myWin. И с ее помощью можем получать доступ к новому окну. Обратите внимание, что в данном случае нельзя воспользоваться для этой цели именем окна (displayWindow). После того, как открыли окно, наступает очередь открыть для записи объект document. Делается это с помощью команды: // открыть объект document для последующей печати myWin.document.open();

Здесь мы обращаемся к open() - методу объекта document. Но это совсем не то же самое, что метод open() объекта window. Эта команда не открывает нового окна - она лишь готовит document к предстоящей печати. Кроме того, мы должны поставить перед document.open() приставку myWin, чтобы получить возможность писать в новом окне. В последующих строках скрипта с помощью вызова document.write() формируется текст нового документа:

// генерироватьновыйдокумент

myWin.document.write("On-the-fly");

myWin.document.write("");

myWin.document.write("

");

myWin.document.write("This HTML-document has been created ");

myWin.document.write("with the help of JavaScript!");

myWin.document.write("");

myWin.document.write("");

Как видно, здесь мы записываем в документ обычные тэги языка HTML. То есть мы фактически генерируем разметку HTML. При этом можно использовать абсолютно любые тэги HTML. По завершении этого нужно вновь закрыть документ. Это делается следующей командой: // закрыть документ - (но не окно!) myWin.document.close();


КОНТРОЛЬНЫЕ ВОПРОСЫ:

Какой метод применяется для закрытия окна?

При помощи какой команды осуществляется открытие объекта document для последующей печати?

При помощи какой команды осуществляется закрытие документа?

При помощи какой команды осуществляется закрытие окна?


Преподаватель: __________(О.А. Солодовникова)

Практическая работа рассмотрена на заседании цикловой комиссии математики и информатики рекомендована на утверждение.

Протокол № 1 от 29.08.2016

Председатель комиссии: ____________(Н.В.Меркулова)






ГБПОУ ВО «Острогожский многопрофильный техникум»


УТВЕРЖДАЮ

Заместитель директора

по учебной работе

__________О.В.Редина





ИНСТРУКЦИОННО - ТЕХНОЛОГИЧЕСКАЯ КАРТА

на выполнение практической работы №27

по WEB-программировнаию

для студентов, обучающихся по специальности

Программирование в компьютерных системах


ТЕМА: Введение в системы управления веб - контентом (CMS).

НАИМЕНОВАНИЕ РАБОТЫ: специфика CGI.

ЦЕЛЬ РАБОТЫ: изучить теоретические основы специфики CGI.

Формируемые компетенции: ОК3.

ПРИОБРЕТАЕМЫЕ УМЕНИЯ И НАВЫКИ: получить практические навыки использования специфики CGI.

НОРМА ВРЕМЕНИ: 90 минут

ОСНАЩЕНИЕ РАБОЧЕГО МЕСТА: ПК, тетрадь для ПЗ.

ОСОБЫЕ ПРАВИЛА ПО ТЕХНИКЕ БЕЗОПАСНОСТИ НА РАБОЧЕМ МЕСТЕ: проведен инструктаж по техники безопасности в компьютерном классе.

ЛИТЕРАТУРА: PHP, MySQL, ХML программирование для Интернета. Бенкен Е.С. СПб.:БХВ-Петербург, 2008, стр.19-21


Методические рекомендации


Ознакомьтесь с методическими рекомендациями.

Одно из важнейших свойств технологии World Wide Web — кроссплатформенность, то есть способность функционировать на различных аппаратных и программных платформах. С разработкой универсальных протоколов, языков разметки и прочих технологий, поддержка которых обеспечивается клиентскими программами, стало возможным построение единого информационного пространства.Наиболее стандартным, универсальным и применяемым в Web является язык гипертектовой разметки HTML. Но он не является как таковым языком программирования и предназначен лишь для структурирования текста. С другой стороны, к моменту появления Web уже было разработано огромное количество различных средств и информационных технологий. Встал вопрос о внедрении уже существующих технологий в Web.Common Gateway Interface (CGI) — это спецификация обмена данными между прикладной программой, выполняемой по запросу пользователя, и HTTP-сервером, который данную программу запускает. До появления CGI новые функции нужно было внедрять непосредственно в сервер. CGI позволила разрабатывать программы независимо от сервера, а механизм передачи им управления и данных был унаследован от программирования в среде командной строки. Последнее резко сократило трудозатраты на разработку приложений, так как не надо было программировать интерфейс пользователя: его функции выполняли формы.

Обмен данными с приложением.

Обмен данными в Web-технологии подразделяется в соответствии с типами методов доступа протокола HTTP и видами запросов в спецификации CGI.Основных методов доступа два: GET и POST. Помимо них часто используются HEAD и PUT.Виды запросов CGI разделяют на два основных MIME-типа: application/x-www-form-urlencoded и multipart/form-data. Второй тип запроса специально создан для передачи больших внешних файлов.

Основы HyperText Transfer Protocol (HTTP)

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

Структура сообщений

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

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

ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ:


1. Рассмотрим пример общения клиента и сервера.

2.Сделайте отчет о выполнении предложенных заданий.

3.Ответье на контрольные вопросы.

Запрос:

GET /documents/1.html HTTP/1.1

Host: nto.immpu.sgu.ru

User-Agent: Mozilla/5.0 (X11; U; Linux i686; ru; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3

Accept: text/html

Connection: close

Этот запрос построчно означает:

Запрашивается соединение с сервером по методу GET, запрашиваемый документ относительно корня веб-сервера лежит в папке documents и называется 1.html, протокол связи HTTP версии 1.1.

Хост: nto.immpu.sgu.ru

Клиентское приложение: Mozilla Firefox версии 3.5.3

Ожидается приём данных соответствующих MIME-типу text/html

Блок заголовков завершён

Откликом на него будет:

HTTP/1.1 200 OK

Date: Tue, 30 Mar 2010 20:10:14 MSD 2010

Server: Apache 2.2

X-Powered-By: PHP/5.2.4-12

Last-Modified: Tue, 30 Mar 2010 20:02:59 MSD 2010

Content-Language: ru

Content-Type: text/html; charset=utf-8

Content-Length: 5121

Connection: close

(здесь начинается содержимое страницы)

Этот отклик построчно означает:

Протокол HTTP версии 1.1 поддерживается, код состояния 200 (это означает что всё нормально, если бы случилась ошибка или требовалось бы сообщить клиенту о каком-то особом состоянии сервера, был бы передан другой код состояния).

Временная метка

Программное обеспечение сервера

Дата-время последней модификации передаваемой информации

Все поля, начинающиеся на «X-» считаются справочными, их поддержка не гарантирована, например, если мы создадим свой антивирус, который будет сканировать все документы перед отправкой, можно добавлять к заголовкам передаваемой информации такой: «X-Antivirus: Sanned by VasyaAntivirus Pro - no viruses»

Язык передаваемого контента — русский

Передаваемая информация соответствует MIME-типу text/html, кодировка utf-8

Размер передаваемой информации составляет 5121 байт

Блок заголовков завершён

То что находится выше пустой строки называется заголовком. Заголовок сообщения содержит служебную информацию, необходимую для обеспечения успешного взаимодействия. Эта информация условно разбивается на поля и соответствует формату «Название поля: значение поля»

Названия полей и их содержимое определено стандартом протокола HTTP (спецификации стандартов HTTP 1.1HTTP 1.0 и 0.9).

Методы доступа

Самой главной директивой HTTP-запроса является метод доступа. Он указывается первым словом в первой строке запроса. В нашем примере это GET. Различают четыре наиболее часто применяемых метода доступа:

GET

HEAD

POST

PUT

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

Метод GET

Метод GET применяется клиентом при запросе к серверу по умолчанию. В этом случае клиент сообщает адрес ресурса (URL), который он хочет получить, версию протокола HTTP, поддерживаемые им MIME-типы документов, версию и название клиентского программного обеспечения. Все эти параметры указываются в заголовке HTTP-запроса. Тело в запросе не передается.

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

Метод HEAD

Метод HEAD используется для уменьшения обменов при работе по протоколу HTTP. Он аналогичен методу GET за исключением того, что в отклике тело сообщения не передается. Данный метод используется для проверки времени последней модификации ресурса и срока годности кэшированных ресурсов, а также при использовании программ сканирования ресурсов World Wide Web. Одним словом, метод HEAD предназначен для уменьшения объема передаваемой по сети информации в рамках HTTP-обмена.

Метод POST

Метод POST — это альтернатива методу GET. При обмене данными по методу POST в запросе клиента присутствует тело HTTP-сообщения. Это тело может формироваться из данных, которые вводятся в HTML-форме, или из присоединенного внешнего файла. В отклике, как правило, присутствует и заголовок, и тело HTTP-сообщения.

Метод PUT

Метод PUT используется для публикации HTML-страниц в каталоге HTTP-сервера. При передаче данных от клиента к серверу в сообщении присутствует и заголовок сообщения, в котором указан URL данного ресурса, и тело — содержание размещаемого ресурса.В отклике тело ресурса обычно не передается, а в заголовке сообщения указывается код возврата, который определяет успешное или неуспешное размещение ресурса.

Особенности Common Gateway Interface

Ранее при размещении документа в каталоге веб-сервера мы не задумывались о том как работает протокол HTTP. Всю необходимую техническую информацию о документе за нас генерировал и передавал клиенту веб-сервер.Теперь, когда веб-сервер выступает лишь как посредник для передачи информации от программы (например, написанной нами на языке C++ или Pascal) веб-клиенту, необходимо чтобы эту служебную информацию генерировала сама программа.

Реализация CGI в Apache

Конфигурирование Apache для разрешения CGI

Чтобы сторонние программы работали через интерфейс CGI, необходимо разрешить веб-серверу запускать их. Для этого нужно выполнить следующие действия: включить обработчик «cgi-script» при помощи директивы AddHandler или SetHandler, активировать опцию ExecCGI. Например, так:

Options +ExecCGIAddHandlercgi-script .cgi

CGI — универсальный интерфейс, позволяющий «шлюзовать» любую программу. Но веб-сервер должен знать как эту программу запускать. К примеру, скрипт может быть написан на языках Python, Perl, Pascal, PHP, может быть набором команд интерпретаторов Bash, Sh, либо может быть бинарным (откомпилированным) запускаемым файлом (для ОС семейства Windows такие файлы имеют расширение com или exe).Для ОС семейства Windows метод запуска скрипта, который будет использовать Apache при обращении к этому скрипту, конфигурируется директивой ScriptInterpreterSource. Допустимые значения этой директивы: Registry, Registry-Strict, Script. Значение по умолчанию: Script.

Если значение этой директивы равно Script, это означает, что способ запуска должен быть определён по самому скрипту. Для этого CGI-скрипты начинают со специальной строчки-комментария, содержащей указание пути и имени программы, которая может этот скрипт интерпретировать. Например так:

#!C:/Perl/bin/perl.exe

# Далее следует программа на языке Perl

Если указано значение ScriptInterpreterSource Registry, то Apache будет просматривать раздел реестра Windows HKEY_CLASSES_ROOT для определения программы, требуемой для интерпретации CGI-скрипта. Если в разделе HKEY_CLASSES_ROOT найдена ветвь, соответствующая расширению CGI-скрипта, то команда, которую Apache применит для запуска, будет взята из ключа Shell\ExecCGI\Command, а если такого ключа не существует, то из Shell\Open\Command.Если CGI-скрипт представляет собой бинарный запускаемый файл (для ОС Windows это будет файл с расширением exe или com), то в ОС Windows достаточно ScriptInterpreterSource Script, а в ОС Linux достаточно чтобы режим доступа к файлу для процесса Apache включал в себя возведённый бит eXecutive (например, режим 777 наверняка будет удовлетворять этому требованию).


Контрольные вопросы:

1.Какую информацию содержит заголовок.

2. Что такое CGI.

3.Опишите Метод POST.


Преподаватель: __________(О.А. Солодовникова)

Практическая работа рассмотрена на заседании цикловой комиссии математики и информатики рекомендована на утверждение.

Протокол № 1 от 29.08.2016

Председатель комиссии: ____________(Н.В.Меркулова)


ГБПОУ ВО «Острогожский многопрофильный техникум»


УТВЕРЖДАЮ

Заместитель директора

по учебной работе

__________О.В.Редина





ИНСТРУКЦИОННО - ТЕХНОЛОГИЧЕСКАЯ КАРТА

на выполнение практической работы №28

по WEB-программировнаию

для студентов, обучающихся по специальности

Программирование в компьютерных системах


ТЕМА: Администрирование систем управления веб - контентом.

НАИМЕНОВАНИЕ РАБОТЫ: использование слоев

ЦЕЛЬ РАБОТЫ: изучить основные понятия технологии слоев

Формируемые компетенции: ОК3.

ПРИОБРЕТАЕМЫЕ УМЕНИЯ И НАВЫКИ: научить работать со слоями в JavaScript

НОРМА ВРЕМЕНИ: 90 минут

ОСНАЩЕНИЕ РАБОЧЕГО МЕСТА: ПК, текстовый редактор Блокнот, браузер.

ОСОБЫЕ ПРАВИЛА ПО ТЕХНИКЕ БЕЗОПАСНОСТИ НА РАБОЧЕМ МЕСТЕ: проведен инструктаж по техники безопасности в компьютерном классе.

ЛИТЕРАТУРА: 100% самоучитель по созданию web-страницу и web-сайтов. HTML и JavaScript Гаевский А.Ю., Романовский В.А. М.: Технолоджи, 2005, п. 3.16


ВОПРОСЫ ПРИ ДОПУСКЕ:

Какие возможности предоставляет использование слоев?

Каким образом производится создание слоев?

Для чего используется тег ?

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

При помощи каких команд производится определение положения данного слоя?


МЕТОДИЧЕСКИЕ РЕКОМЕНДАЦИИ

Ознакомьтесь с теоретическими аспектами темы.

Использование слоев позволяет выполнять точное позиционирование таких объектов web-страницы, как изображения. Кроме того, можно перемещать объекты по вашей HTML-странице. Вы можете также делать объекты невидимыми. Управлять слоями можно легко с помощью языка JavaScript.

Создание слоев

Чтобы создать слой, мы должны использовать либо тэг либо . Вы можете воспользоваться следующими параметрами:


name="layerName"

Название слоя

left=xPosition

Абсцисса левого верхнего угла

top=yPosition

Ордината левого верхнего угла

z-index=layerIndex

Номер индекса для слоя

width=layerWidth

Ширина слоя в пикселах

clip="x1_offset, y1_offset, x2_offset, y2_offset"

Задает видимую область слоя

above="layerName"

Определяет, какой слой окажется под нашим

below="layerName"

Определяется, какой слой окажется над нашим

Visibility=show|hide|inherit

Видимость этого слоя

bgcolor="rgbColor"

Цвет фона - либо название стандартного цвета, либо rgb-запись

background="imageURL"

Фоновая картинка




Тэг используется для тех слоев, которые Вы можете точно позиционировать. Если же Вы не указываете положение слоя (с помощью параметров left и top), то по умолчанию он помещается в верхний левый угол окна.

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

Рассмотрим теперь, как можно получить доступ к слоям через JavaScript. Начнем же мы с примера, где пользователь получает возможность, нажимая кнопку, прятать или показать некий слой.

Для начала мы должны знать, каким образом слои представлены в JavaScript. Как обычно, для этого имеются несколько способов. Самое лучшее - дать каждому слою свое имя. Так, если мы задаем слой

...

то в дальнейшем можем получить доступ к нему с помощью конструкции document.layers["myLayer"]. Согласно документации, предоставляемой фирмой Netscape, мы можем также использовать запись document.myLayer - однако в моем браузере это приводит к сбою. Конечно, это всего лишь проблема предварительной версии и в заключительном варианте будет успешно решена (сейчас я пользуюсь Netscape Navigator 4.0 PR3 на WinNT). Однако, по-видимому, нет никаких проблем с конструкцией document.layers["myLayer"] - поэтому мы и будем пользоваться именно такой альтернативой из всех возможных.

Доступ к этим слоям можно также получить через целочисленный индекс. Так, чтобы получить доступ к самому нижнему слою, Вы можете написать document.layers[0]. Обратите внимание, что индекс - это не то же самое, что параметр z-index. Если, например, Вы имеете два слоя, называемые layer1 и layer2 с номерами z-index 17 и 100, то Вы можете получить доступ к этим слоям через document.layers[0] и document.layers[1], а не через document.layers[17] и document.layers[100].

Перемещение слоев

Свойства left и top определяют положение данного слоя. Вы можете менять его, записывая в эти атрибуты новые значения. Например, в следующей строке задается горизонтальное положение слоя в 200 пикселов:

document.layers["myLayer2"].left= 200;


ПОРОЯДОК ВЫПОЛНЕНИЯ РАБОТЫ


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

Создайте документ с использованием команд показа и скрытия слоев.

Создайте документ с использованием функции перемещения слоев.

Сделайте отчет о выполнении предложенных заданий.

Ответьте на контрольные вопросы.


Задание 1.

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


hello_html_2a88b672.png
Текст поверх изображения

Исходный код:

img.gif

Layers-Demo

Как видим, с помощью тэга мы формируем два слоя. Оба слоя позиционируются как 200/100 (через параметры left и top). Все, что находится между тэгами и (или тэгами и ) принадлежит описываемому слою.

Кроме того, мы используем параметр z-index, определяя тем самым порядок появления указанных слоев - то есть, в нашем случае, Вы тем самым сообщаете браузеру, что текст будет написан поверх изображения. В общем случае, именно слой с самым высоким номером z-index будет показан поверх всех остальных. Вы не ограничены в выборе z-index лишь значениями 0 и 1 - можно выбирать вообще любое положительное число.

Так, если в первом тэге Вы напишете z-index=100, то текст окажется под изображением - его слой номер Z-индекса (z-index=1). Вы сможете увидеть текст сквозь изображение, поскольку я использовал в нем прозрачный фон (формат gif89a).


hello_html_28f9d6c2.png
Текст под изображением


Задание 2.

Создайте документ, содержащий скриптНачало формы

Конец формы

:

This text is inside a layer

form>body>html>

ДаннаякнопкавызываетфункциюshowHide(). Можно видеть, что в этих функциях реализуется доступ к такому свойству объекта layer (myLayer), как видимость. Присвоивая параметру document.layers["myLayer"].visibility значения "show" или "hide", Вы можете показать или скрыть наш слой. Заметим, что "show" и "hide" - это строки, а не зарезервированные ключевые слова, то есть Вы не можете написать document.layers["myLayer"].visibility= show.

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


Задание 3.

Создайте документ с использованием функции перемещения слоев. Скрипт выглядит следующим образом:

<html>

This text is inside a layer

Мы создаем слой с именем myLayer2. Можно видеть, что в тэге мы пользуемся процедурой onLoad. Нам необходимо начать прокручивание слоя, как только страница будет загружена. В процедуре обработки события onLoad мы пользуемся функцией setInterval(). Это один из новых методов версии 1.2 языка JavaScript (то есть версии JavaScript, реализованной в Netscape Navigator 4.0). Им можно пользоваться, чтобы вызывать некую функцию мвновь и вновь через определенные интервалы времени. В прошлом для этого мы пользовались функцией setTimeout(). Функция setInterval() работает почти так же, однако Вам нужно вызвать ее всего лишь один раз.

С помощью setInterval() мы вызываем функцию move() каждые 20 миллисекунд. А функция move(), в свою очередь, всякий раз смещает слой на новую позицию. И поскольку мы вызываем эту функцию вновь и вновь, то мы получаем быстрый скроллинг нашего текста. Все, что мы нужно сделать в функции move() - это вычислить новую координату для слоя и записать ее: document.layers["myLayer2"].left= pos.

Если Вы посмотрите исходный код этой части в онлайновом описании, то увидите, что в действительности мой код выглядит несколько иначе - я добавил некий фрагмент кода с тем, чтобы люди, работающие со старыми версиями JavaScript-браузеров, не получали из-за этого никаких сообщений об ошибках. Как этого можно достичь? Следующий фрагмент кода будет выполняться только на тех браузерах, которые воспринимают язык JavaScript 1.2:

Та же самая проблема возникает, когда мы работаем с объектом Image. Мы можем аналогичным способом переписать кодекс. Установка переменной browserOK решает эту проблему.

Следующий пример демонстрирует, как может осуществляться перекрывание слоев:

This text is inside a layerhello_html_m65a30524.png



КОНТРОЛЬНЫЕ ВОПРОСЫ:


В каких случаях используется параметр z-index?

В чем отличия тэгов и ?

Каким образом производится перемещение слоев?

Каким образом производится перекрывание слоев?

Для чего предназначено событие onLoad?


Преподаватель: __________(О.А. Солодовникова)

Практическая работа рассмотрена на заседании цикловой комиссии математики и информатики рекомендована на утверждение.

Протокол № 1 от 29.08.2016

Председатель комиссии: ____________(Н.В.Меркулова)



ГБПОУ ВО «Острогожский многопрофильный техникум»


УТВЕРЖДАЮ

Заместитель директора

по учебной работе

__________О.В.Редина





ИНСТРУКЦИОННО - ТЕХНОЛОГИЧЕСКАЯ КАРТА

на выполнение практической работы №29

по WEB-программировнаию

для студентов, обучающихся по специальности

Программирование в компьютерных системах



ТЕМА: Администрирование систем управления веб - контентом.

НАИМЕНОВАНИЕ РАБОТЫ: работа со слоями.

ЦЕЛЬ РАБОТЫ: изучить приемы вырезки из слоя, создания вложенных слоев, использования различных эффектов с прозрачными слоями

Формируемые компетенции: ОК7.

ПРИОБРЕТАЕМЫЕ УМЕНИЯ И НАВЫКИ: научитьсяиспользовать приемы вырезки из слоя, создания вложенных слоев, использования различных эффектов с прозрачными слоями

НОРМА ВРЕМЕНИ: 90 минут

ОСНАЩЕНИЕ РАБОЧЕГО МЕСТА: ПК, текстовый редактор Блокнот, браузер.

ОСОБЫЕ ПРАВИЛА ПО ТЕХНИКЕ БЕЗОПАСНОСТИ НА РАБОЧЕМ МЕСТЕ: проведен инструктаж по техники безопасности в компьютерном классе.

ЛИТЕРАТУРА:

ВОПРОСЫ ПРИ ДОПУСКЕ

Какие параметры слоев существуют?

Каким образом осуществляется изменение прозрачности слоев?


МЕТОДИЧЕСКИЕ РЕКОМЕНДАЦИИ

Ознакомьтесь с теоретическими аспектами темы.

Можно постулировать, что какая-то (прямоугольная) часть слоя будет нам видима. Все же, что лежит за ее пределами, показано на экране не будет. Такой прием называется вырезанием. Например, в разметке HTML можно задать следующую функцию вырезания:

davinci.jpg

(Здесь приписаны параметры left=0 и top=0, поскольку в противном случае, если этого не сделать, то в некоторых версиях возникают проблемы).

Хотя само изображение и имеет размеры 209x264 пикселов, мы можем видеть лишь его малую часть:

hello_html_6d0372f3.jpg


Данный фрагмент изображения имеет размер 90x70 (пикселов). Первые два значения, указанные в атрибуте clip (атрибуте HTML-тэга или ), указывают верхний левый угол вырезаемой части. Следующие два значения указывают нижний правый угол. Сказанное можно проиллюстрировать следующим рисунком:


hello_html_m10c21824.jpg

Еще более интересных результатов можно добиться, управляя вырезанной частью с помощью языка JavaScript. Точнее, Вы можете изменять значения свойств clip.left, clip.top, clip.right и clip.bottom объекта Layer. Достаточно всего лишь занести в одно из этих свойств новое значение, как фрагмент тут же будет кадрирован соответствующим образом . В следующем примере параметры вырезанной части изображения меняются динамически, и в результате у пользователя создается впечатление, будто изображение медленно "растет":

hello_html_6d0372f3.jpg


ПОРОЯДОК ВЫПОЛНЕНИЯ РАБОТЫ


Создать документ согласно методическим указаниям.

Создайте документ, содержащий три кнопки, которые могут запускать и останавливать движение слоев.

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

Создайте документ, в котором используются Начало формы

Конец формы

два изображения (сплошные серые зоны здесь на самом деле являются прозрачными).

5. Сделайте отчет о выполнении предложенных заданий.

Ответьте на контрольные вопросы.


hello_html_680875c3.png

hello_html_m57e64450.png


Задание 1.

Создайте документ со следующим кодом скрипта:

davinci.jpg

Кнопка, представленная в разделе , вызывает функцию start(). Сначала мы должны определить точку, с которой нам следует начать работу - фактически это будет некий пиксел в центре нашего изображения. Значения координат x и y этого пиксела мы помещаем в переменные middleX и middleY. После этого мы вызываем функцию show(), которая задает размеры вырезаемой части изображения в зависимости от значений переменных middleX, middleY и параметра pos. При этом значение переменной pos автоматически увеличивается при каждом вызове функции show(). То есть размер вырезаемой части изображения с каждым разом становится все больше и больше. В самом конце процедуры show() мы устанавливаем таймер с помощью вызова setTimeout() - и благодаря этому функция show() вызывается вновь и вновь. И этот процесс остановится только тогда, когда изображение будет показано целиком.

Заметим, что размер изображения мы получаем в самом начале функции start():

var width= document.layers["imgLayer"].document.davinci.width;

var height= document.layers["imgLayer"].document.davinci.height;

С помощью конструкции document.layers["imgLayer"] мы можем обратиться к слою с именем imgLayer. Однако почему после document.layers["imgLayer"] мы ставим document? Дело в том, что каждый слой имеет свою собственную HTML-страницу - то есть, каждый слой имеет свой объект document. Чтобы получить доступ к изображению внутри слоя imgLayer, нам необходимо получить доступ к этому объекту document. В приведенном выше примере такое изображение носило название davinci. Все остальное поле листа должно быть чистым.

Задание 2.

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

В первом примере используется слой (называемый parentLayer), в который вложено еще два других слоя (layer1 и layer2). Создайте документ, содержащий три кнопки, которые могут запускать и останавливать движение слоев. Начало формы

Конец формы

Исходный код скрипта:

<html>

<head>

Этопервыйслой

Это второй слой



Это главный (родительский) слой

ilayer>

Также можно видеть, что перемещение слоя parentLayer сопровождается перемещением и двух других слоев, тогда как перемещение слоя layer1 (или layer2) ни на что другое не влияет. Этот пример демонстрирует возможность объединения группы объектов с помощью механизма вложенных слоев. Можно видеть, что внутри parentLayer мы определили два слоя. Это как раз и есть вложенные слои. Как получить к этим слоям доступ в языке JavaScript? Как это делается, можно посмотреть в функции move():

document.layers["parentLayer"].left= 100 + pos0;

...

document.layers["parentLayer"].layers["layer1"].top= 10 + pos1;

...

document.layers["parentLayer"].layers["layer2"].top= 10 + pos2;

Чтобыполучитьдоступквложеннымслоям, Вамнедостаточнобудетпростонаписатьdocument.layers["layer1"]илиdocument.layers["layer2"],посколькуслоиlayer1иlayer2лежатвнутриparentLayer.

Задание 3.

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

Начало формы

Конец формы

Исходный код скрипта:

davinci.jpg

И снова, можно видеть обращение к вложенному слою:

document.layers["clippingLayer"].layers["imgLayer"].top= 100 + pos;


Задание 4.

Интересные эффекты могут быть созданы с помощью (частично) прозрачных слоев. Сочетание специально подобранных изображений с прозрачными областями может создавать совершенно потрясающий результат. Не все форматы изображений поддерживают работу с прозрачными частями. В настоящее время лучший из отвечающих этому условию форматов - gif89a. Большинство новых графических программ поддерживает этот формат. Помимо этого, в Internet доступны некоторые свободно распространяемые инструменты для работы с графикой. Новый формат изображений PNG также поддерживает эффект прозрачных частей изображения.

Скриптдокумента:

davinci1.gif

davinci2.gif

layer>

ilayer>

body>html>


КОНТРОЛЬНЫЕ ВОПРОСЫ:

Охарактеризуйте процесс вырезания.

Перечислите основные команды для работы с изображениями.

Какую роль выполняет функция move()?


Преподаватель: __________(О.А. Солодовникова)

Практическая работа рассмотрена на заседании цикловой комиссии математики и информатики рекомендована на утверждение.

Протокол № 1 от 29.08.2016

Председатель комиссии: ____________(Н.В.Меркулова)

ГБПОУ ВО «Острогожский многопрофильный техникум»


УТВЕРЖДАЮ

Заместитель директора

по учебной работе

__________О.В.Редина





ИНСТРУКЦИОННО - ТЕХНОЛОГИЧЕСКАЯ КАРТА

на выполнение практической работы №30

по WEB-программировнаию

для студентов, обучающихся по специальности

Программирование в компьютерных системах



ТЕМА: Создание сайтов для бизнеса на основе систем управления контентом.

НАИМЕНОВАНИЕ РАБОТЫ: создание анимированных веб-страниц.

ЦЕЛЬ РАБОТЫ: рассмотреть принципы создания анимации на веб-страницах

Формируемые компетенции: ОК1,ОК2,ОК3,ОК4,ОК5,ОК6,ОК7.

ПРИОБРЕТАЕМЫЕ УМЕНИЯ И НАВЫКИ: научиться создвать анимацию на веб-станицах.

НОРМА ВРЕМЕНИ: 90 минут

ОСНАЩЕНИЕ РАБОЧЕГО МЕСТА: ПК, текстовый редактор Блокнот, браузер.

ОСОБЫЕ ПРАВИЛА ПО ТЕХНИКЕ БЕЗОПАСНОСТИ НА РАБОЧЕМ МЕСТЕ: проведен инструктаж по техники безопасности в компьютерном классе.

ЛИТЕРАТУРА:


ВОПРОСЫ ПРИ ДОПУСКЕ:

1.Дайте определение анимации.


МЕТОДИЧЕСКИЕ РЕКОМЕНДАЦИИ


Ознакомьтесь с теоретическими аспектами темы.

Для анимации особенно важно, чтобы все изображения были заранее загружены в память компьютера. Это делается через команды new Image() и img.src, стоящие вне функции. Если не позаботиться об этом заранее, то пользователю придется ждать, пока каждая картинка будет загружаться с сервера.

Рассмотримпример:

var num=1

img1 = new Image (77,76)

img1.src = "pic1.gif"

img2 = new Image (77,76)

img2.src = "pic2.gif"

img3 = new Image (77,76)

img3.src = "pic3.gif" 

function startshow()

{

for (i=1; i<21; i=i+1)

{document.mypic.src=eval("img"+num+".src")

for(x=1; x<800; x=x+1)

  {}

num=num+1

   if(num==4)

    {num=1} }

   document.mypic.src=img1.src }

pic1.gif

<p>

Показатьанимацию

BODY>

HTML>

Обратите внимание еще раз, что рисунки, как и переменная num, вынесены за рамки функции:

var num=1

img1 = new Image (77,76)

img1.src = "pic1.gif"

img2 = new Image (77,76)

img2.src = "pic2.gif"

img3 = new Image (77,76)

img3.src = "pic3.gif" 

Исамафункция:

function startshow()

{ for (i=1; i<21; i=i+1)

{document.mypic.src=eval("img"+num+".src")

for(x=1; x<800; x=x+1)

{}

    num=num+1

if(num==4)

{num=1}}

document.mypic.src=img1.src}

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

Обратите внимание, в {фигурных скобках} цикла ничего нет. Вложенный цикл считает от 1 до 800 после появления каждой картинки. На это уходят доли секунды.

Внешний цикл заставляет программу повторяться 21 раз. Видите, это обозначено в функции: for (i=1; i<21; i=i+1). Так как анимация состоит из трех картинок, она будет повторена 7 раз: 7 X 3 = 21.

Когда цикл закончится, картинка снова вернется к pic1.gif.

Вот команда, которая помещает первое изображение на страницу:

pic1.gif

И наконец ссылка, которая запускает анимацию:Display animation

Снова команда HREF указывает на JavaScript:функция(), чтобы все переменные были доступны.

ПОРЯДОК ВЫПОЛНЕНИЯ РАБОТЫ

Переписать предложенный в задании 1 скрипт. Пусть первым будет pic1.gif, как в сегодняшнем примере, но вставьте его в форму. Включите в нее текстовое поле, куда пользователь мог бы ввести слово slow (медленно), medium (умеренно) или fast (быстро), выбирая скорость смены картинок. Пусть medium стоит по умолчанию. 800 будет быстро. 1600 будет умеренно. 2400 будет медленно. Запускать анимацию должна текстовая ссылка «Показать анимацию».

Сделайте отчет о выполнении предложенных заданий.

Ответьте на контрольные вопросы.

Задание1.

Примерныйскрипт:

    num=1

    img1 = new Image ()

    img1.src = "pic1.gif"

    img2 = new Image ()

    img2.src = "pic2.gif"

    img3 = new Image ()

    img3.src = "pic3.gif" 

    function startshow(sp)

    {       howfast=1600

       if (sp.toUpperCase() == "SLOW")

         {howfast=2400}

       if(sp.toUpperCase() == "FAST")

         {howfast=800}

       alert(howfast)

       for (i=1; i<21; i=i+1)

          {document.mypic.src=eval("img"+num+".src")

           for(x=1; x

           num=num+1

           if(num==4)

              {num=1}           }

           document.mypic.src=img1.src    }

pic1.gif

Укажитескоростьанимации: (fast, medium, slow)

value="medium" name="speed">

Показатьанимацию

center>

form>

body>

html>

КОНТРОЛЬНЫЕ ВОПРОСЫ:


Каким образом осуществляется создание анимации? Опишите алгоритм действия.

Какие команды используются для отображения анимации на веб-странице?


Преподаватель: __________(О.А. Солодовникова)

Практическая работа рассмотрена на заседании цикловой комиссии математики и информатики рекомендована на утверждение.

Протокол № 1 от 29.08.2016

Председатель комиссии: ____________(Н.В.Меркулова)





Просмотрено: 0%
Просмотрено: 0%
Скачать материал
Скачать материал "Комплект-инструкционных карт по дисциплине "WEB-программирование""

Методические разработки к Вашему уроку:

Получите новую специальность за 3 месяца

Микробиолог

Получите профессию

Бухгалтер

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Скачать материал

Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:

6 664 189 материалов в базе

Скачать материал

Вам будут интересны эти курсы:

Оставьте свой комментарий

Авторизуйтесь, чтобы задавать вопросы.

  • Скачать материал
    • 09.02.2017 3129
    • DOCX 4.9 мбайт
    • 33 скачивания
    • Оцените материал:
  • Настоящий материал опубликован пользователем Солодовникова Ольга Александровна. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт

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

    Удалить материал
  • Автор материала

    • На сайте: 8 лет и 1 месяц
    • Подписчики: 3
    • Всего просмотров: 54912
    • Всего материалов: 26

Ваша скидка на курсы

40%
Скидка для нового слушателя. Войдите на сайт, чтобы применить скидку к любому курсу
Курсы со скидкой

Курс профессиональной переподготовки

Копирайтер

Копирайтер

500/1000 ч.

Подать заявку О курсе

Курс профессиональной переподготовки

Организация деятельности библиотекаря в профессиональном образовании

Библиотекарь

300/600 ч.

от 7900 руб. от 3650 руб.
Подать заявку О курсе
  • Сейчас обучается 284 человека из 66 регионов
  • Этот курс уже прошли 849 человек

Курс профессиональной переподготовки

Руководство электронной службой архивов, библиотек и информационно-библиотечных центров

Начальник отдела (заведующий отделом) архива

600 ч.

9840 руб. 5600 руб.
Подать заявку О курсе
  • Этот курс уже прошли 25 человек

Курс профессиональной переподготовки

Библиотечно-библиографические и информационные знания в педагогическом процессе

Педагог-библиотекарь

300/600 ч.

от 7900 руб. от 3650 руб.
Подать заявку О курсе
  • Сейчас обучается 487 человек из 71 региона
  • Этот курс уже прошли 2 328 человек

Мини-курс

Адаптация и расстройства: понимание, преодоление, развитие

10 ч.

1180 руб. 590 руб.
Подать заявку О курсе
  • Сейчас обучается 25 человек из 18 регионов

Мини-курс

История классической музыки от античности до романтизма

4 ч.

780 руб. 390 руб.
Подать заявку О курсе

Мини-курс

Путь к внутреннему спокойствию: освобождение от тревоги, злости и стыда

6 ч.

780 руб. 390 руб.
Подать заявку О курсе
  • Сейчас обучается 629 человек из 71 региона
  • Этот курс уже прошли 203 человека