close

Вход

Забыли?

вход по аккаунту

?

Sorokin 0021D321E4

код для вставкиСкачать
МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ
Федеральное государственное автономное
образовательное учреждение высшего образования
САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ
АЭРОКОСМИЧЕСКОГО ПРИБОРОСТРОЕНИЯ
WEB-ТЕХНОЛОГИИ
Методические указания
по выполнению лабораторных работ
Санкт-Петербург
2015
Составитель –А. А. Сорокин
Рецензент – кандидат технических наук, доцент Л. Н. Бариков
Приведены варианты лабораторных работ для студентов очного и
заочного отделений с пояснениями к их выполнению и оформлению,
рекомендуемая литература и Интернет-ресурсы.
Издание предназначено для студентов очной и заочной форм обучения по направлениям 230100.62, 09.03.01 – «Информатика и вычислительная техника» Ивангородского гуманитарно-технического
института (филиала) ГУАП.
Публикуется в авторской редакции.
Компьютерная верстка М. И. Дударева
Подписано к печати 23.11.2015. Формат 60 × 84 1/16.
Бумага офсетная. Усл. печ. л. 1,2. Тираж 100 экз. Заказ № 465.
Редакционно-издательский центр ГУАП
190000, Санкт-Петербург, Б. Морская ул., 67
© Санкт-Петербургский государственный
университет аэрокосмического
приборостроения, 2015
Предисловие
Учебно-методическое издание подготовлено в соответствии с требованиями ФГОС и программой дисциплины «Web-технологии»,
разработанной и утвержденной в ГУАП.
Учебная дисциплина «Web-технологии» заключается в изучении методов работы с информацией в глобальных и локальных корпоративных компьютерных сетях, изучении методов построения
Web-сайтов, организации взаимодействия Web-сайтов и внешних
источников данных.
Изучение курса «Web-технологии» студентами очной и заочной
форм обучения включает в себя лекционные занятия, лабораторные занятия, направленные на освоение и закрепление материала, а также самостоятельную работу. Для студентов заочной курс
дисциплины сводится к установочным лекциям, лабораторным и
самостоятельным занятиям, в том числе подготовке контрольных
работ.
Издание нацелено на закрепление практических навыков работы с языками HTML, CSS, JavaScript, XSL, PHP. По завершению
курса студенты должны обладать достаточными теоретическими
знаниями и практическими навыками для разработки различных
по структуре и назначению web-сайтов, знать способы получения,
хранения и обработки информации посредством web-технологий.
3
Оформление отчетов по лабораторным работам
Целью проведения лабораторных работ является закрепление
теоретического материала по дисциплине и развитие навыков самостоятельной работы. Отчет по лабораторной работе необходим
как подтверждение проделанной работы, а также как средство закрепления навыков оформления документации и отчетов. Лабораторные работы, не сопровожденные отчетом, не считаются выполненными.
Отчет по лабораторной работе должен содержать следующие
структурные элементы:
1. Титульный лист;
2. Цель работы;
3. Задание;
4. Эскиз web-страницы;
5. Логика взаимодействия клиента и сервера, при необходимости;
6. Алгоритмы программных модулей, при необходимости;
7. Исходный код;
8. Скриншоты с примерами результат;
9. Выводы.
Титульный лист содержит полное название учебного заведения;
кафедру; название дисциплины; номер и вариант лабораторной
работы; ФИО студента; номер курса; форму обучения; номер группы; ФИО преподавателя, его должность, ученую степень и звание;
город и год выполнения. Образец титульного листа можно скачать
на сайте ИФ ГУАП. Так же студентом указывается на титульном
листе дата сдачи работы и оставляется подпись.
Основой для оформления отчета может выступать ГОСТ
7.32-2001«Система стандартов по информации, библиотечному
и издательскому делу. Отчет о научно-исследовательской работе.
Структура и правила оформления». При оформлении отчета по лабораторной работе необходимо соблюдать следующие требования:
– работа должна быть выполнена на одной стороне стандартных
листов белой бумаги формата А4;
– поля верхнее и нижнее по 2 см, левое – 3 см, правое – 1,5 см;
– основной шрифт Times New Roman 14, интервал – полуторный;
– шрифт исходных кодов Courier New 12, интервал – одинарный;
– страницы должны быть пронумерованы, начиная с титульного листа (номер на титульном листе не ставится);
– номера страниц проставляются снизу по центру;
4
– названия структурных элементов и заголовки выполняются
полужирным начертанием;
– все рисунки подписываются снизу по центру;
– все таблицы подписываются сверху справа;
– нумерация рисунков и таблиц должна быть сквозная;
– не допускается сокращений слов “рисунок” и “таблица”.
Рукописное выполнение отчета в связи с восьмым структурным
элементом не допускается.
5
Лабораторная работа №1
HTML, CSS, JAVASCRIPT
1. HyperText Markup Language
HTML – язык гипертекстовой разметки – стандарт разметки
webдокументов. Существует несколько спецификаций языка. Актуальной и рекомендуемой на данный момент является HTML 5.
Любой документ на языке HTML представляет собой набор элементов. Каждый элемент помечается специальной последовательностью символов – тэгом. Некоторые элементы должны обрамлять
открывающим и закрывающим тэгом:
<div>…</div>
Некоторые, только открывающим:
<br>
Тэги могут содержать атрибуты, которые указываются в открывающем тэге:
<a href="localhost">ссылка</a>
Язык HTML содержит большое число стандартных элементов
для построения различных web-страниц. Подробный список тэгов
в соответствии со спецификацией и допустимые атрибуты можно
найти в справочнике.
2. Cascading Style Sheets
CSS – каскадные таблицы стилей – формальный язык описания
внешнего вида документа. Актуальный на данный момент является спецификация CSS 3.
Каскадные таблицы стилей позволяют настроить отображение
отдельных элементов или целых групп. Примененные к элементу
свойства наследуются всеми вложенными в него элементами, если
не указываются обратные правила.
Методы описания правил на языке CSS могут отличаться, в зависимости от того, как они подключены к web-документу. Существуют следующие типы подключения:
1. Связанные стили – подключаются тэгом link, хранятся во
внешнем файле, влияют на все документы, к которым подключены:
<link rel="stylesheet" href="style.css">
2. Глобальные стили – подключаются тэгом style, хранятся
в нем, влияют на весь документ:
<style>…</style>
6
Таблица 1.1
Селекторы и приоритеты
Тип селектора
Пример селектора
Приоритет
Универсальный селектор
*
0
Селектор тэга
div
1
Псевдоэлемент
::first-letter
1
Селектор атрибута
[title=”Заголовок”]
10
Класс
.classname
10
Псевдокласс
:active
10
Идентификатор
#id
100
3. Внутренние стили – подключаются атрибутом style любого тэга,
хранятся в нем, влияют на тэг и его содержимое:
<p style="…">…</p>
Связанные и глобальные стили описываются следующим образом:
селектор {
свойство: значение;
свойство: значение;
…
}
Где селектор – признак, по которому определяется, к каким элементам применять стиль, виды селекторов и их приоритеты приведены в табл. 1.1, свойство – имя свойства, значение – новое значение свойства.
Внутренние стили не содержат селекторов, т.к. уже привязаны
к конкретному элементу. Значение атрибута style – содержимое
фигурных скобок для связанных и глобальных стилей.
Для комбинированных селекторов значение их приоритетов
складывается. Значение атрибута style имеет самый высокий приоритет, его значение 1000. Так же существует способ обойти систему приоритетов используя свойство “!important”.
Пример значения приоритетов:
* { } /* 0 баллов */
em { } /* 1 балл */
p::first-letter { } /* 2 балла */
p [title="Приветствие"] { } /* 11 баллов */
div.fine .one { } /* 21 балл */
#header a:hover { } /* 111 баллов */
7
Более подробную информацию и примеры использования CSS
можно найти в справочнике.
3. JavaScript
JavaScript – прототипно-ориентированный сценарный язык
программирования. Используется для придания интерактивности
web-страницам. Является языком по умолчанию для тэга script.
JavaScript может располагаться:
1. Во внешнем документе, подключается через тег script, влияет
на все документы, где подключен:
<script src="script.js"></script>
2. Внутри страницы, подключается через тег script, влияет на
весь документ:
<script>…</script>
3. Внутри тэга, подключается через атрибут-обработчик события:
<a onclick="..">…</a>
4. Задание
Используя HTML и CSS разработать согласно варианту шаблон
“карточки” в “картотеке”. Используя HTML и CSS разработать
сweb-страницу на основе макета согласно варианту. Заполнить на
разработанной странице блок меню списком “карточек”. Используя HTML, CSS и JavaScript организовать отображение содержимого карточки по нажатию (клику) на элемент в меню.
5. Варианты заданий
Номер варианта определяется номером по списку или выдается
преподавателем индивидуально. Задания приведены в табл. 1.2 – 1.3.
Номер задания из каждой группы определяется по принципу:
Nr mod C
где Nr – номер варианта, C – количество заданий. Так для 7 варианта при количествах заданий 5 и 10, будут получены номера 5 и
3, соответственно.
Таблица 1.2
Вид картотеки
8
Номер задания
Задание
1
Библиотечный каталог книг
2
Личные дела сотрудников
Продолжение таблицы 1.2
3
Личные карточки студентов
4
Товары в магазине
5
Читательские билеты
Количество
заданий – 5
Таблица 1.3
Шаблоны страницы
Номер задания
Задание
1
Табличное построение, фиксированная высота
блоков
2
Табличное построение, плавающая высота блока
меню
3
Блочное построение, фиксированная высота блоков,
использование float
4
Блочное построение, плавающая высота меню,
использование float
5
Блочное построение, фиксированная высота блоков,
абсолютное позиционирование
6
Блочное построение, плавающая высота меню,
абсолютное позиционирование
Количество заданий – 6
9
Лабораторная работа №2
PHP
1. Hypertext Preprocessor
PHP – препроцессор гипертекста – скриптовый язык программирования общего назначения, интенсивно применяемый для разработки web-приложений. В настоящее время поддерживается подавляющим большинством хостинг-провайдеров и является одним
из лидеров среди языков программирования, применяющихся для
создания динамических web-сайтов.
Документ на языке PHP представляет из себя текстовый файл,
например, HTML-файл, содержащий конструкции языка, заключенные в тэг “<?php ?>”. Так будет выглядеть классический “Hello,
World!” :
<?php
echo ‘Hello, World!’;
?>
Имена переменных в PHP начинаются с символа “$”. PHP – язык
с динамической типизацией. Тип данных определяется автоматически при присвоении значения. Пример динамической смены типа
данных:
<?php
$a = ‘str’; // строка “str”
$a = ‘25’; // строка “25”
$a += 1; // число 26
?>
Для обработки PHP-скрипта, web-сервер должен быть связан
с PHP-интерпретатором. PHP-интерпретатор написан под различные операционные системы и поддерживает различные режимы
работы, в т.ч. и CGI, что делает его полностью кроссплатформенным и позволяет использовать его в связке с большинством webсерверов.
2. Работа с файловой системой
В PHP существует множество функций для взаимодействия
с файловой системой, работа которых не зависит от операционной
и файловой систем. Из них можно выделить основные группы:
1. Функции для управления файлами и каталогами (табл. 2.1);
2. Функции для работы с содержимым файлов (табл. 2.2).
10
Таблица 2.1
Управление файлами и каталогами
Функция
Описание
copy
Копирует файл
mkdir
Создает директорию
rmdir
Удаляет директорию
tempnam
Создает файл с уникальным именем
tmpfile
Создает временный файл
unlink
Удаляет файл
Таблица 2.2
Работа с содержимым файлов
Функция
Описание
fclose
Закрывает файл
feof
Проверяет, достигнут ли конец файла
fgetc
Считывает символ из файла
fgets
Считывает строку из файла
file
Читает содержимое файла и помещает в массив
fopen
Открывает файл или ссылку
fread
Считывает бинарное содержимое файла
fwrite
Пишет бинарные данные в файл
3. Обработка запросов
В PHP существует несколько суперглобальных ассоциативных
массивов: $GLOBALS, $_SERVER, $_ENV, $_GET, $_POST, $_
FILES, $_COOKIE, $_REQUEST, $_SESSION. Часть из них позволяют обрабатывать клиентские запросы.
Так $_GET и $_POST содержат в себе значения соответствующих полей GET и POST запросов. Проверить на наличие какого-либо поля можно используя динамическую типизацию:
<?php
if ($_GET[‘query’])
{
// серверу был передан запрос с GET-полем "query"
}
11
if ($_POST[‘query’])
{
// серверу был передан запрос с POST-полем "query"
}
?>
Кроме этого можно получить доступ к переданным в POSTзапросе файлам через массив $_FILES или к хранящимся на клиентской стороне куки через массив $_COOKIE.
4. Работа с XML
Для создания и обработки XML-документов в PHP существует класс DomDocument. Работа в нем осуществляется в кодировке
UTF-8, которую можно назвать желательной для современного
web-программирования. Создание любого документа с его помощью достаточно просто:
<?php
$dom = new DomDocument(‘1.0’); // создание документа
$root = $dom->appendChild($dom-> createElement(‘root’)); //
добавление корневого элемента
$item = $root->appendChild($dom-> createElement(‘element’));
// добавление дочернего элмента
$item ->appendChild($dom-> createTextNode(‘Value1’)); //
добавление текстового значения
$item = $root->appendChild($dom-> createElement(‘element’));
// добавление дочернего элмента
$item ->appendChild($dom-> createTextNode(‘Value2’)); //
добавление текстового значения
$dom->save(‘test.xml’); // сохранение файла
?>
Результатом работы скрипта будет следующий файл:
<?xml version="1.0"?>
<root>
<item>Value1</item>
<item>Value2</item>
</root>
При всей простоте работы с DOM для синтаксического анализа
файлов с известной структурой намного проще использовать класс
SimpleXML:
<?php
$xml_file = simplexml_load_file(‘test.xml’); // загрузка файла
12
echo $xml_file->item[0]; // вывод значения нулевого тэга
item – “Value1”
?>
5. Задание
Разработать структуру XML документа для организации “картотеки” из лабораторной работы №1. Используя HTML и PHP, а
также при желании CSS и JavaScript, разработать web-страницы
для редактирования и вывода содержимого “картотеки”.
13
Лабораторная работа №3
AJAX, JSON
1. Asynchronous Javascript and XML
AJAX – асинхронный JavaScript и XML – подход к построению
интерактивных пользовательских интерфейсов web-приложений, заключающийся в “фоновом” обмене данными браузера с web-сервером.
Этот подход позволяет:
– уменьшить нагрузку на сервер;
– экономить трафик;
– ускорить реакцию интерфейса;
– разрабатывать интерактивные web-приложения.
Но, несмотря на перечисленные плюсы, имеется и ряд недостатков, таких как включенный у пользователя в браузере JavaScript
или риск подмены результатов запроса.
AJAX использует API браузеров XMLHttpRequest, разработанное для выполнения HTTP и HTTPS запросов напрямую без перезагрузки страницы. В JavaScript существует одноименный класс,
методы и свойства которого позволяют выполнять запросы и обрабатывать их результаты.
В упрощенном виде шаблон для формирования AJAX-запросов
и обработки отклика можно описать следующим скриптом:
var http_request = new XMLHttpRequest();
http_request.onreadystatechange = function () {
if ( http_request.readyState == 4 ) {
if ( http_request.status == 200 ) {
// удачно выполненный запрос
} else {
// неудачно выполненный запрос
}
http_request = null;
}
};
http_request.open("GET", url, true);
http_request.send(null);
В случае успеха результат будет храниться в текстовом виде
в свойстве responseText или в виде XML в свойстве responseXML.
2. Обработка XML с помощью JavaScript
В языке JavaScript присутствуют механизмы для обработки
XML-документов. Не стоит забывать, что язык HTML, по большей
14
части, представляет собой тот самый XML. Поэтому все функции
для получения доступа к элементам XML-документа будут точно
такими же, как и для доступа к элементам web-страницы. Для их
использования потребуется переменная содержащая XML. Предыдущий пример можно дополнить следующим образом:
if ( http_request.status == 200 ) {
var xml_source = http_request.responseXML;
alert(
xml_source.getElementsByTagName("DIV")[0]
); // вывод сообщения, содержащего первый (нулевой) элемент div
}
3. JavaScript Object Notation
JSON – текстовый формат обмена данными, основанный на
JavaScript и обычно используемый именно с этим языком. За счет
своей лаконичности и простоты перевода из текстового вида в объект JavaScript JSON является более удобным, чем XML.
В качестве значений JSON содержит объект, массив (вектор),
единичное значение или строку. Так, например, можно структурировать данные из файла test1.xml из предыдущей лабораторной
работы с помощью JSON:
{
"root": {
"item": [
"Value1",
"Value2"
]
}
}
4. Создание JSON с помощью PHP
Для создания JSON в PHP используется функция json_encode
(для обратной операции, соответственно, json_decode). В качестве
первого аргумента этой функции необходимо передавать готовый
PHP-объект. Для формирования приведенной ранее JSON-строки
необходимо выполнить подобные действия:
<?php
$source = array(‘root’ => array(‘item’ => array("Value1",
"Value2")));
$json = json_encode($source);
?>
15
5. Обработка JSON с помощью JavaScript
Учитывая специфику формата JSON, существует несколько методов извлечения содержимого из такой строки. Не все из них являются безопасными.
Безопасным будет использования метода parse класса JSON для
распаковки полученных данных (и метода stringify для запаковки). Извлечь значение нулевого элемента item можно следующим
образом:
var parsed = JSON.parse(json_string);
alert(parsed.root.item[0]);
6. Задание
На основе лабораторных работ №1 и №2 разработать webстраницу для организации “картотеки”. Данные с “карточек” загружать динамически по нажатию (клику) на элементы меню. Для
передачи данных на сервер использовать POST, с сервера – JSON.
16
Лабораторная работа №4
XSL, XSLT
1. Extensible Stylesheet Language
XSL – семейство рекомендаций консорциума W3C, описывающее языки преобразования и визуализации XML-документов. Состоит из трех частей:
1. XSL Transformations (XSLT) – язык преобразований XMLдокументов;
2. XSL Formatting Objects (XSL-FO) – язык разметки типографских макетов и иных предпечатных материалов;
3. XPath – язык путей и выражений, используемый в XSLT для
доступа к отдельным частям XML-документа.
C помощью ЧЫД можно выполнять преобразования XML
в практически любой вид. Для связывания XML-документа и XSL,
необходимо дополнить документ следующей строкой:
<?xml-stylesheet type="text/xsl" href="style.xsl"?>
Связанный таким образом XSL-файл является стилем по умолчанию. При необходимости можно выбрать любой другой файл
программно.
2. Extensible Stylesheet Language Transformations
XSLT – язык преобразования XML-документов. Спецификация
XSLT входит в состав XSL и является рекомендацией W3C.
В этом языке существует несколько десятков конструкций, которые сводятся к общему виду, где обычно в качестве префикса используется “xsl”:
<префикс:имя-инструкции
[атрибут="значение"
[атрибут="значение"]]></префикс:имя-инструкции>
Пример, формирования идущих подряд значений в виде HTMLдокумента на основе рекурсивного цикла:
<?xml version="1.0"?>
<xsl:stylesheet
version="1.0"
xmlns:xsl="http://www.
w3.org/1999/XSL/Transform">
<xsl:output method="html" version="5.0"
encoding="UTF-8" indent="yes"/>
<xsl:template match="root">
<HTML>
<BODY>
<xsl:call-template name="for">
17
<xsl:with-param name="i" select="1"/>
<xsl:with-param name="n" select="5"/>
</xsl:call-template>
</BODY>
</HTML>
</xsl:template>
<xsl:template name="for">
<xsl:param name="i"/>
<xsl:param name="n"/>
<xsl:value-of select="$i"/>
<xsl:if test="$i &lt; $n">
<!-- “$lt;” – знак “<” -->
<!-- если значение i меньше значения n -->
<xsl:text>, </xsl:text>
<xsl:call-template name="for">
<xsl:with-param name="i" select="$i+1"/>
<xsl:with-param name="n" select="$n"/>
</xsl:call-template>
</xsl:if>
</xsl:template>
</xsl:stylesheet>
3. Выполнение XSLT-преобразований в PHP
Для выполнения ЧЫДЕ преобразований в PHP существует класс
XSLTProcessor. Экземпляр класса – парсер, связанный со стилем, а нес
с XML-документом. Основные методы класса приведены в табл. 4.1.
Таблица 4.1
Основные методы класса XSLTProcessor
18
Метод
Описание
importStylesheet
Испортирует XSL-документ
transformToXML
Преобразовывает XML-документ на основе
импортированного XSL –документа в строку
getParameter
Получает значение параметра
removeParameter
Удаляет параметр
setParameter
Устанавливает значение параметра
Пример обработки описанного ранее test1.xml документа с помощью приведенного выше XSL-документа:
<?php
$xml = new DOMDocument;
$xml->load("test1.xml");
$xsl = new DOMDocument;
$xsl->load("style.xsl");
$proc = new XSLTProcessor();
$proc->importStylesheet($xsl);
echo $proc->transformToXML($xml);
?>
4. Задание
На основе предыдущих лабораторных работ разработать следующие схемы XSLT-преобразования для вывода хранящихся в XMLфайле данных:
1. Отсортированный список “карточек” в “картотеке” (меню);
2. “Карточка” по запросу (значение одного или нескольких
полей);
3. Список “карточек” по запросу (меню или поиск).
Список рекомендованной литературы
1. Бенкен Е. РНР, МуSQL. XML программирование для Интернета. – 2-е изд., перераб.и доп. – СПб.: БХВ-Петербург, 2008. – 352 с.
2. Людоговский А. XSL-таблицы стилей: отображение XMLдокумента: [Электронный ресурс], 2007. URL: http://script-coding.
com/XSL.html
3. Ноблес Р., Греди К.-Л. Эффективный Web-сайт. Разработка,
дизайн, маркетинг. – М.: Технический бестселлер, 2005. – 560 с.
4. Для тех, кто делает сайты: [Электронный ресурс], Влад Мержевич, 2002-2014. URL: http://htmlbook.ru/
5. PHP: Documentation: [Электронный ресурс] // PHP: Hypertext
Preprocessor, 2001-2014. URL: http://php.net/docs.php
6. PHP, MySQL и другие веб-технологии: [Электронный ресурс],
2006-2014. URL: http://www.php.su/
19
Содержание
Предисловие.............................................................................
3
Оформление отчетов по лабораторным работам..............................
4
Лабораторная работа №1. HTML, CSS, JavaScript...........................
6
Лабораторная работа №2. PHP.....................................................
10
Лабораторная работа №3. AJAX, JSON.........................................
14
Лабораторная работа №4. XSL, XSLT............................................
17
Список рекомендованной литературы...........................................
19
20
Документ
Категория
Без категории
Просмотров
1
Размер файла
568 Кб
Теги
sorokin, 0021d321e4
1/--страниц
Пожаловаться на содержимое документа