Тема 3. Проектирование и разработка web-приложения

Лабораторная работа №5. ПРОЕКТИРОВАНИЕ САЙТА С ПОМОЩЬЮ SKETCH FLOW

Задание 1. Создать новый проект сайта в Sketch Flow (Expression Blend) и задать его структуру.

1. Открыть приложение MS Expression Blend. Выполнить команду File/New Project (рис.32), в окне команды выбрать тип проекта (Project types) – Silverlight, Silverlight SketchFlow Application. В окне команды в строке Name задать имя проекта, например Company, в строке Location нажать кнопку Browse и выбрать место расположения паки проекта, нажать ОК – в указанном месте расположения будет создана папка проекта (например, Company) с одноименным файлом проекта (например, Company.sln).

Рис.32. Создание проекта SketchFlow

2. После создания нового проекта он будет открыт в окне приложения Expression Blend (рис.33). Задать свойства проекта: в окне команды Tools/Options/SketchFlow установить размеры экранов проекта по умолчанию: установить флажок Default size for new screens и задать размеры 800 на 600 пикселей. Сохранить изменения командой File/Save.

Рис.33. Интерфейс Expression Blend (проект SketchFlow)

3. Задать структуру сайта, создав ключевые элементы (экраны) на карте проекта (SketchFlow Map):

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

• Переименовать стартовый экран из «Screen1» в «О фирме» – щелкнуть правой кнопкой мыши на значке экрана и выбрать команду Rename, затем задать новое название экрана.

• С помошью кнопки Create a screen или одноименной команды контекстного меню создать на карте сайта новые экраны «Услуги», «Расписание экскурсий», «Заказать» и «Подтверждение заказа».

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

Рис.34. Проектирование потоков данных сайта

Задание 2. Разработать макет страниц сайта и применить его к экранам проекта.

Пусть предполагаемый макет страниц сайта должен выглядеть как на рис.35. Блок «Оглавление» присутствует только на информационных страницах.

4. Создать макет в SketchFlow (рис.36):

• Перейти на страницу «Подтверждение заказа», дважды щелкнув мышью на соответствующем значке экрана на карте или щелкнув на ярлычке нужной вкладки в рабочей области.

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

Рис.35. Макет страницы сайта

Рис.36. Эскиз макета страниц сайта SketchFlow

• Для рисования макета следует использовать стиль наброска, для чего развернуть на панели элементов управления Assets список Style и щелкнуть мышью на элементе Sketch Styles – будет выдано окно с перечнем доступных элементов управления.

• Нарисовать в правой части макета прямоугольник, обозначающий область с рисунком, воспользовавшись инструментом Rectangle-Sketch.

ПРИМЕЧАНИЕ: Удалить ненужные элементы управления можно с помощью команд контекстного меню в области дерева элементов Objects and Timeline (в левой части окна Expression Blend) либо с помощью команды Edit/Undo.

После создания элементы можно перемещать с помощью инструмента Direct Selection (белая стрелка) и изменять размеры с помощью инструмента Selection (темная стрелка).

• Воспользовавшись инструментом BasicTextBox-Sketch или TextBox-Sketch (буква T на белом фоне – для создания текста в рамке, и на темном фоне – для создания текста без рамки) нарисовать области заголовка и дублирующего меню. Задать в этих областях соответствующий текст. С помощью окна свойств (справа) задать нужный размер и написание текста.

• С помощью инструмента Button-Sketch (либо инструмента вставки текста в рамке) вставить под заголовком сайта кнопки меню навигации по сайту: «О фирме», «Услуги», «Расписание экскурсий» и «Заказать». Текст на кнопках изменить с помощью команды Edit Text контекстного меню.

• Назначить кнопкам ссылки на соответствующие страницы, для чего выбрать из контекстного меню кнопки команду Navigate to, а затем – щелкнуть на назывании целевого экрана. На карте проекта появятся дополнительные связи, отображающие навигацию.

• На карте проекта «притушить» отображение связей неактивных экранов (и композиционных экранов), щелкнув на значках Show Navigation connections undimmed и Show Component connections undimmed . Кнопки должны принять вид включенных (более светлый фон).

• Проверить действие связей (кнопок со ссылками макета), выполнив команду Project/Run Project:

  • Будет открыто окно браузера, если требуется, установите компонент Silverlight;

  • В верхней части окна браузера отображена карта проекта, а ниже – активный экран (стартовый) – перейти на карте проекта на экран «Подтверждение заказа» и проверить переходы, связанные с кнопками «меню». Возврат на экран «Подтверждение заказа» осуществляется с помощью карты проекта.

5. На основе разработанных элементов экрана создать шаблон страниц (композиционный экран) и оформить страницы на его основе:

• Сохранить макет как композиционный экран, то есть шаблон, который может быть применен к разным экранам:

  • В Expression Blend на странице «Подтверждение заказа» выбрать инструмент Direct Selection (закрашенная стрелка), выделить все вставленные элементы экрана, удерживая клавишу Shift и щелкая на них мышью;

  • Когда все элементы выделены, щелкнуть правой кнопкой мыши и выбрать из контекстного меню команду Make Into Component screen, в появившемся окне ввести название шаблона (например, Zakaz) и нажать OK.

  • На карте проекта будет отображен новый элемент Zakaz типа Component Screen, отличающийся внешне от других экранов.

• Применить шаблон Zakaz к экрану «Заказать», перетащив на карте проекта значок композиционного экрана Zakaz на значок экрана «Заказать» (рис.37).

Рис.37. Карта проекта с композиционным экраном

• Проверить, что экран «Заказать» принял вид, аналогичный экрану «Подтверждение заказа».

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

• На странице «Подтверждение заказа» под кнопками добавить небольшую текстовую область «Краткое оглавление», которая будет присутствовать только на информационных страницах.

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

• Сохранить выделенные элементы как композиционный экран Info, выполнив команду Make Into Component Screen. Сохранить изменения.

• На карте проекта связь между Zakaz и «Подтверждение заказа» будет удалена, но появится новый композиционный экран Info, связанный с экраном «Подтверждение заказа».

• На карте проекта разорвать связь Info с экраном «Подтверждение заказа», щелкнув на ней правой кнопкой мыши и выбрав команду Remove from Map.

• Применить композиционный экран Info к экранам «О фирме», «Услуги» и «Расписание экскурсий».

• Применить композиционный экран Zakaz к экрану «Подтверждение заказа». Окончательно карта проекта должна принять вид как на рис.38.

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

• Сохранить все изменения командой File/Save All.

• Просмотреть проект в интерактивном режиме (Project/Run Project), проверить действие кнопок.

Задание 3. Задать краткое содержание экранов проекта.

7. На экраны «О фирме», «Услуги» и «Расписание экскурсий» добавить текст с кратким описанием предполагаемого содержания соответствующих страниц сайта (например, рис.39).

Рис.39. Пример краткого содержания для экрана «О фирме»

8. На экране «Заказать» вставить элементы управления, моделирующие форму заказа экскурсий (рис.40):

• Поясняющий текст и поля текста (Дата, Кол-во) вставить с помощью элементов BasicTextBlock-Sketch (буква Т на темном фоне – текст без рамки, на светлом фоне – с рамкой).

• Список для выбора экскурсии вставить с помощью элемента ComboBox-Sketch.

• Для отображения названий экскурсий внутри списка создать тестовые данные:

  • Щелкнуть на значке Create Sample Data на вкладке Data (в правом верхнем углу окна Expression Blend), выбрать команду New Sample Data, ввести имя для массива данных, например, «Экскурсии» и нажать ОК – будет создана структура «Экскурсии», состоящая из двух полей Property1 и Property2. Первое поле по умолчанию имеет текстовый тип, второе – логический. Удалить второе поле данных Property2, щелкнув на нем правой кнопкой мыши и выполнив команду Remove Property2.

  • Щелкнуть на значке Edit sample values в области коллекции данных Collection – будет открыто окно с тестовыми данными, которые были сгенерированы автоматически. В окне тестовых данных установить число записей (Number of records) – 5, а затем заменить имеющиеся данные на названия экскурсий (например, «Страусиная ферма», «Саблинские пещеры», «В гости к зубробизонам», «На берег Ладоги», «Лемболовские высоты»). Затем нажать ОК.

  • Чтобы данные отобразились в списке на экране, перетащить мышью коллекцию данных Collection из области данных на элемент списка на экране.

Рис.40. Вид формы заказа на экране «Заказать»

• Кнопку «Оформить заказ» вставить с помощью элемента Button-Sketch, назначить кнопке переход на страницу «Подтверждение заказа» (Navigate to).

• Сохранить изменения экрана «Заказать» и проверить его действие в режиме интерактивного просмотра (Project/Run Project).

9. Задать содержимое экрана «Подтверждение заказа» – пример текста подтверждения заказа (рис.41).

Рис.41. Пример экрана подтверждения заказа

10. Сохранить все изменения, просмотреть прототип сайта в интерактивном режиме. Сохранить отчет в MS Word, для чего выполнить команду File/Export to Microsoft Word, в окне экспорта ввести имя и выбрать папку – месторасположение файла отчета, а затем нажать ОК. Просмотреть созданный файл отчета с помощью MS Word.

11. Продемонстрировать преподавателю прототип сайта в интерактивном режиме и отчет в MS Word.

Лабораторная работа №6. Создание сайта на основе собственного css-макета

Задание 1. Создать CSS-макет, задающий структуру и оформление сайта (проект сайта описан в лаб. работе №5).

1. Создать новый web-узел Expression Web:

• Запустить Expression Web, если в окне приложения уже открыт какой-либо сайт, выполнить команду Site/Close.

• Выполнить команду Site/New Site, выбрать пункт General, а затем Empty Site. В нижней части окна нажать кнопку Browse, выбрать папку или диск, где будет создана новая папка сайта, нажать Open, а затем добавить в конец строки имя для новой папки. Нажать OK, папка с сайтом будет создана.

• Настроить кодировку страниц узла: выполнить команду Site/Site Setting, на вкладке Advanced настроить кодировку страниц сайта (Default page encoding) – Cyrillic, установить флажок Ignore the keyboard when deciding the encoding of new pages, нажать ОК.

• В главной папке создать подпапку images для файлов графического оформления.

2. Задать HTML-код страницы-макета:

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

Рис.42. Структура сайта

На схеме сайта пунктирной линией показаны контейнеры, которые не содержат ничего, кроме других разделов сайта. Назовем их главный контейнер (gl_container) – включает заголовок (zag), строку меню (menu) и основное содержимое сайта (content). Контейнер content, в свою очередь, содержит левую (lev_col) и правую (prav_col) колонки, а также подвал (niz).

Тогда иерархия разделов сайта может быть представлена также как рис.43.

Рис.43. Разделы сайта

• Создать новую пустую страницу, сохранить ее под именем maket.html.

• В режиме визуального отображения щелкнуть мышью в любом месте пустой страницы. Вставить тег div, дважды щелкнув мышью на значке <div> панели инструментов Toolbox.

• Воспроизвести структуру, представленную на рис.43, вставляя теги DIV:

• Для того чтобы не запутаться в дальнейшем, в режиме кода добавить текст – названия видимых разделов, а названия для контейнеров (Главный контейнер и Содержимое сайта) не вводить:

В визуальном режиме названия разделов отобразятся в столбик. Сохранить изменения страницы.

• Создать файл пустой таблицы стилей: Выполнить команду File/New/CSS. Сохранить созданный файл под именем style_css.css.

• Создать в существующей таблице стилей style_css.css пустые стили для идентификаторов разделов: #gl_container, #zag, #menu, #content, #lev_col, #prav_col, #niz (щелкнуть в любом месте файла таблицы стилей, а затем выполнить команду New Style на панели работы со стилями Apply Style или Manage Style; если в редакторе активной является таблица стилей, то можно выбирать местоположение нового стиля (Define in) как Existing style sheet, так и Current page).

• Сохранить изменения таблицы стилей, а затем присоединить ее к странице maket.html: перейти на страницу maket.html, а затем выполнить команду Attach Style Sheet на панели работы со стилями Apply Style или Manage Style, в окне команды установить переключатель в позицию link, нажать кнопку Browse, выбрать файл таблицы стилей, нажать Open, а затем OK.

Созданные ранее стили отобразились на панели Manage Style, однако кружки не обведены, так как стили пока не используются на странице (рис.44).

Рис.44. Отображение стилей таблицы style_css.css

• Применить созданные стили к элементам страницы, задав для тегов id соответствующие идентификаторы. Можно применить стиль (задать идентификатор) для видимых элементов страницы, щелкнув в визуальном режиме на выбранном абзаце, а затем – на нужном стиле на панели Apply Style.

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

После присвоения идентификаторов, фрагмент кода страницы, описывающий структуру, должен принять вид:

Чтобы в дальнейшем случайно не изменить стили элементов страницы, перейдите на панель Manage Style и все последующие изменения стилей производите с ее помощью.

• Задать обтекание для левой колонки: изменить стиль #lev_col, задав параметр обтекания (категория Layout, свойство float, значение left). Проверить, что текст правой колонки теперь располагается не ниже нее, а рядом.

• Сохранить изменения.

3. Разместить справа от содержимого страницы графическое изображение.

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

Возможен и другой подход – часть полосы занимает графика, а часть – фоновый цвет, сочетающийся с цветом края рисунка. В этом случае один из краев рисунка (нижний или верхний) должен быть практически однотонным. Этого можно добиться с помощью разнообразных приемов редактирования, доступных в графических редакторах (например, Adobe Photoshop). Однако при специальном подборе изображения поставленной цели можно добиться только средствами Expression Web.

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

В папке C:\Program Files\Microsoft Office\CLIPART\ PUB60COR содержится несколько подходящих изображений: утята (J0178932.JPG, низ), подсолнух (J0178459.JPG, верх), сурепка (J0145361.JPG, верх или низ), свечи (J0341654.JPG, J0216153.JPG, верх), город (J0149118.JPG, верх или низ). Можно использовать и другие изображения, отвечающие указанным требованиям.

Для примера выбрано изображение «утята» (J0178932.JPG). Следует подготовить его для использования в макете.

• Создать новую пустую страницу, вставить на нее выбранное изображение.

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





Рис.45. Преобразование изображения

• Поскольку полоса с графикой должна располагаться справа от текста, расположить утят «лицом» к странице, выполнив зеркальное отображение рисунка относительно вертикальной оси, выделив рисунок и щелкнув на инструменте Flip Horizontal на панели Pictures (рис.45).

• Сохранить страницу, при сохранении поместить рисунок в папку images.

• Подобрать фоновый цвет, сочетающийся с однотонной границей рисунка: выполнить команду Format/Background, в списке выбора фонового цвета Background выбрать More Colors и выбрать инструмент Select (с изображением пипетки). Указатель мыши примет форму пипетки – щелкнуть на нижнем крае рисунка для выбора фонового цвета, затем сохранить настройки, нажав ОК. Просмотреть параметры тега body в коде страницы – для рисунка «утята» выбран цвет #0B0B0B. Сохранить изменения.

• Перейти на страницу maket.html. Поскольку у рисунка «утята» однотонный цвет находится снизу, позиционировать его по правому верхнему краю главного контейнера страницы:

• изменить стиль #gl_container, задав следующие свойства категории Background:

Свойство	Значение
background-image	щелкнуть на кнопке Browse и выбрать подготовленный рисунок из папки images
background-repeat	no-repeat
background-attachment	scroll
(x) background-position	right
(y) background-position	top

Если рисунок имеет однотонную границу сверху, его следует позиционировать по правому нижнему краю главного контейнера. В этом случае для последнего свойства (y) background-position надо задать значение bottom.

• Просмотреть страницу в визуальном режиме – отображается только часть рисунка, соответствующая текущей высоте главного контейнера. Установить курсор в конец текста «Правая колонка» и отбить несколько строк вниз, нажимая клавишу Enter – видимая область рисунка увеличится.

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

4. Настроить границы и размеры основных разделов страницы:

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

• Для Заголовка, Меню и контейнера Содержимое сайта (content) задать границы (категория Box, свойство margin) по 0 пикселей, а правую границу (margin:right) – 183 пикселя (ширина фонового рисунка).

• Задать верхний отступ для контейнера Содержимое сайта (категория Box, свойство padding-top) равным 5 пикселей.

• Задать ширину (категория Position, свойство width) Главного контейнера 800 пикселей.

• Сохранить изменения и просмотреть страницу в браузере. Теперь содержимое страницы не ужимается при уменьшении размеров окна, оно «прибито» к левому краю страницы.

• Отцентрировать содержимое страницы с помощью стилей: для Главного контейнера задать значение auto для левой и правой границ (категория Box, свойства margin: left и right), для верхней и нижней (top, bottom) границ задайте значение 0. Сохраните изменения и откройте страницу в браузере. Содержимое должно быть выровнено по центру.

5. Задать фоновые цвета разделов страницы.

• Задать фоновый цвет Главного контейнера:

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

• Открыть для редактирования вспомогательную страницу и скопировать в буфер из параметров тега body код фонового цвета (в примере – #0B0B0B).

• Вернуться к странице maket.html и изменить стиль Главного контейнера – в качестве значения параметра background-color вставить скопированный код фонового цвета.

• Задать белый фоновый цвет контейнера Содержимое сайта.

• Выбрать и задать фоновые цвета разделов Заголовок, Меню и Низ. Желательно, чтобы цветовая схема страницы согласовывалась с цветами рисунка. Для выбора цветов можно использовать вспомогательную страницу и инструмент More Colors/Select (пипетка). Сохранить страницу и просмотреть в браузере.

• По краям страницы видно белое пространство – содержимое отстоит от края страницы. Убрать отступы и настроить другие параметры страницы – шрифт, фоновый цвет.

• Во внешней таблице стилей style_css.css создать новый стиль для тега body, задать:

• все отступы (padding) и границы (margin) – 0,

• выбрать и задать фоновый цвет;

• задать тип шрифта (свойство font-family, рекомендуется выбрать Arial, Helvetica, sans-serif) и его размер. Можно задавать как относительный размер (например, medium), так и абсолютный (например, 1 em). Если использован относи­тельный размер, то впоследствии все шрифты надо задавать относительными размерами. В этом случае пользователь сможет настраивать размеры шрифтов (например, командой Вид/Размер шрифта в IE). Если же задан абсолютный размер, то и все остальные размеры также следует определять в абсолютных величинах.

• Выделить содержимое страницы рамкой – определить рамку (категория Border) для Главного контейнера: одинарную сплошную (solid), задать толщину (в примере – 2 пикселя) и цвет рамки.

6. Настроить параметры видимых разделов страницы:

• Настроить параметры левой колонки: ширина – 230 пикселей, правая граница (margin): 20 пикселей, остальные – 10 пикселей; отступы (padding): справа – 10 пикселей, остальные – 0; рамка – только справа, одинарную сплошная, задать ее толщину (в примере – 1 пиксель), задать цвет рамки.

• Настроить параметры правой колонки: все отступы – 0.

• Настроить параметры раздела Низ: отключить обтекание с обеих сторон (категория Layout, свойство clear, значение both); задать отступ слева – 10 пикселей, остальные отступы – 5; рамка – только сверху, сплошная (solid), задать ее толщину (в примере – 1 пиксель), задать цвет рамки; задать уменьшенный размер шрифта.

• Настроить параметры Заголовка: все отступы – 10 пикселей.

• Настроить параметры Меню: все отступы – 5 пикселей, рамка – со всех сторон, сплошная, толщиной 1 пиксель того же цвета, что и фон меню.

Результат оформления разделов страницы приведен на рис.46.

7. Задать и оформить содержимое раздела Заголовок:

• Установить курсор на текст «Заголовок» и выбрать стиль h1 – текст будет заключен в тег h1. Изменить текст «Заголовок» на название сайта (в примере – «Отдых на природе»).

Рис.46. Пример оформления разделов страницы

• Во внешней таблице стилей создать новый стиль для тега h1, расположенного в разделе Заголовок. Стиль определяется для контекстного селектора #zag h1: задать крупный размер, жирное написание и написание заглавными буквами (категория Font, свойства font-size, font-weight и text‑transform), при необходимости изменить цвет текста.

• После заголовка добавить новую строку (нажав клавишу Enter) – будет вставлен тег абзаца р. Ввести реквизиты фирмы, разделяя строки тегом br (дважды щелкнув на инструменте Break панели Toolbox).

• Во внешней таблице стилей создать новый стиль для тега p, расположенного в разделе Заголовок: мелкий размер шрифта, при необходимости изменить цвет текста.

8. Задать и оформить шаблон содержимого левой и правой колонок:

• Удалить лишние пустые строки (разрывы строк) в разделах Левая колонка и Правая колонка.

• Аналогично предыдущему пункту, выделить текст «Левая колонка» тегом h2, а «Правая колонка» – h4. Под заголовками колонок добавить по абзацу p текста «Введите текст левой (правой) колонки» (в зависимости от колонки).

• С помощью контекстных селекторов создать и настроить стили для заголовков и абзацев, расположенных в левой и в правой колонках (рис.47). Для абзацев текста колонок обязательно задать выравнивание по обоим краям (категория Block, свойство text-align, значение justify). Все стили задать во внешней таблице стилей style_css.css.

Рис.47. Пример стилевого оформления текста страницы

Список созданных стилей:

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

Можно копировать ранее созданные для одной из колонок стили с помощью команды New Style Copy контекстного меню стилей и изменить только название раздела в контекстном селекторе (например, с #lev_col на #prav_col).

В результате будут созданы следующие стили:

9. Задать и оформить содержимое Меню и раздела Низ:

• Раздел Меню должен содержать список ссылок на основные страницы сайта, а раздел Низ – дублирующее меню и контактную информацию. Для создания и тестирования ссылок необходимо сначала создать несколько пустых страниц с именами файлов и названиями (title – могут быть заданы в свойствах файлов страниц Properties) основных страниц сайта. Позднее эти страницы можно удалить или заменить. Создать 3-4 страницы (в примере – это страницы index.html «О фирме», uslugi.html «Услуги», raspisanie.html «Расписание экскурсий» и zakaz.html «Заказать»).

• Вернуться к редактированию страницы maket.html. Удалить текст из раздела Меню. Используя кнопку Bullets на панели инструментов, вставить в раздел Меню маркированный список.

• Перетащить первую страницу (в примере – ofirme.html) из списка Folder List в список Меню – появится ссылка с указателем в виде названия страницы (в примере – «О фирме»). Установить указатель мыши на текст ссылки и щелкнуть на кнопке Bullets, чтобы ссылка стала элементом списка. Создать новый элемент списка, установив курсор в конец текста элемента списка и нажав клавишу Enter, а затем перетащить следующую страницу, и так далее.

• Сохранить страницу и проверить действие ссылок в браузере. Поскольку по умолчанию тег списка имеет ненулевые границы, меню приняло некрасивый вид (рис.48). Настроить внешний вид меню, задав во внешней таблице style_css.css стили (границы margin – 0, отступы padding – 0) для тегов ul, находящихся в разделе Меню – использовать контекстный селектор.

• Задать горизонтальное расположение ссылок Меню, определив стиль тега элемента списка li, расположенного в разделе Меню: категория Layout, свойство display, значение inline.

• Настроить внешний вид ссылок меню, задав стиль для тега a, находящегося в разделе Меню: определить цвет, жирное написание, убрать подчеркивание, задать отступы (padding) – 5 пикселей.

Рис.48. Не отформатированный список ссылок

• Задать эффекты при выделении ссылок (смена фона и цвета ссылок), определив стиль для псевдокласса a:hover, находящегося в разделе меню.

• Сохранить страницу и проверить эффекты ссылок в браузере.

• Создать дублирующее меню в разделе Низ:

• Удалить текст «Низ» и создать ссылки на страницы, перетащив их из Folder List. Между ссылками добавить знак вертикальной черты.

• Задать стили для ссылок дублирующего меню (не рекомендуется задавать отступы и жирное написание, изменение фона при выделении ссылок). Можно копировать ранее созданные для раздела Меню стили с помощью команды New Style Copy контекстного меню стилей и изменяя только название раздела в контекстном селекторе (с #menu на #niz).

• Сохранить все изменения на странице.

В результате выполнения задания в таблицу style_css.css добавлены стили:

Результирующий вид макета страницы приведен на рис.49.

Рис.49. Пример макета страницы

Задание 2. Сохранить как динамический шаблон созданный CSS-макет, задающий структуру и оформление сайта.

10. Сохранить копию страницы maket.html как динамический шаблон: выполнить команду File/Save as и выбрать тип файла Dynamic Web Template (*.dwt), нажать Save – в списке содержимого папки узла Folder List появится новый файл maket.dwt.

11. Настроить динамический шаблон maket.dwt:

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

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

• Сделать доступным для изменения содержимого левой колонки, оставить возможность удалить колонку целиком (левая колонка внутри изменяемой области):

  • В коде шаблона найти тег-контейнер div, описывающий левую колонку (имеет идентификатор #lev_col).

  • Перед открывающей частью тега-контейнера левой колонки вставить комментарий вида

<!-- #BeginEditable "lev_col" -->

(комментарий можно скопировать из кода шаблона и изменить название раздела).

• После закрывающей части тега-контейнера левой колонки вставить комментарий вида

<!-- #EndEditable -->

• Сделать доступным для изменения содержимого правой колонки, не разрешать удалять колонку (правая колонка содержит изменяемую область):

  • В коде шаблона найти тег-контейнер div, описывающий правую колонку (имеет идентификатор #prav_col).

  • После открывающей части тега-контейнера правой колонки вставить комментарий вида

<!-- #BeginEditable "prav_col" -->

• Перед закрывающей частью тега-контейнера правой колонки вставить комментарий вида

<!-- #EndEditable -->

В целом код левой и правой колонок должен выглядеть как:

• Сохранить изменения динамического шаблона maket.dwt.

• Создать на основе динамического шаблона новую страницу (выполнить команду File/New/Page, выбрать General, пункт Create from Dynamic Web Template, нажать ОК, а затем выбрать шаблон maket.dwt и нажать Open).

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

• Удалить временную страницу.

Задание 3. На основе разработанного динамического шаблона создать страницы сайта «Отдых на природе» и заполнить их содержимым.

12. С помощью команды File/New/Create from Dynamic Web Template создать новую страницу на основе динамического шаблона maket.dwt, сохранить страницу как index.html «О фирме», заменив ранее созданную страницу. Аналогично заменить ранее созданные страницы uslugi.html «Услуги», raspisanie.html «Расписание экскурсий» и zakaz.html «Заказать» страницами, созданными на основе динамического шаблона.

13. Наполнить содержимым страницы «О фирме» и «Услуги», подсказкой к формированию содержимого может служить макет сайта (экраны из предыдущей лабораторной работы).

14. Оформить страницу «Расписание экскурсий»:

• Придумать 3-4 экскурсии (например, «Саблинские пещеры», «Страусиная ферма», «В гостях у зубробизонов»), в качестве примера можно взять экскурсии фирмы «Серебряное кольцо» www.silver-ring.ru).

• На основе шаблона создать новые страницы с описанием экскурсий, на этих страницах левый блок можно удалить.

• В левый блок страницы «Расписание экскурсий» поместить ссылки на страницы с описанием экскурсий. Правый блок пока оставить без изменений.

15. На странице «Заказать» разместить форму заказа экскурсии:

• Удалить левый блок.

• Добавить текст вопросов и вставить необходимые элементы управления из группы Form Controls на вкладке Toolbox (в правом верхнем углу окна MS Expression Web). Важно, чтобы все элементы управления находились внутри одной формы (внутри границ тега form).

• После вставки настроить свойства элементов управления (окно свойств доступно по двойному щелчку мыши на элементе или по команде Form Field Properties контекстного меню). Важно, чтобы все поля ввода и выбора данных имели соответствующие имена.

Возможный вид формы приведен на рис.50.

Список элементов управления формы и их свойств:

Элемент управления	Свойство	Значение свойства
Название экскурсии – выпадающий список Drop-Dawn Box	name	excurs_code_data
	добавить элементы списка (названия экскурсий) с помощью кнопки Add
Количество мест – поле ввода текста Input(Text)	name	mesta
Контактная информация – текстовая область Text Area	name	contact
Кнопка очистки формы Input(Reset)	value	Очистить
Кнопка отправки данных Input(Submit)	value	Отправить заявку

Рис.50. Пример внешнего вида формы заказа экскурсии

16. Задать тип отправки данных – на адрес электронной почты:

• Выполнить команду Form Properties/Options контекстного меню, задать значения Action: схема mailto (например, mailto:office@company.ru?subject=заявка на экскурсию), Method: post, Encoding type: text/plain,) – см. пункт 30 лабораторной работы №4, рис.30.

• Проверить действие формы: открыть страницу в браузере, занести в форму и отправить данные, затем просмотреть сформированное сообщение в почтовой программе (при необходимости настроить почтовый клиент Outlook Express).

Задание 4. Создать процедуру JavaScript для проверки правильности заполнения формы на странице «Заказать».

17. Создать интерактивную подсказку – текст, который будет отображаться только при заполнении поля mesta:

• Под полем mesta ввести текст подсказки, заключив его в тег span (например, <br /><span>Количество доступных мест можно посмотреть на странице <a href="raspisanie.html"> Расписание экскурсий</a></span><br />).

• Задать для вставленного тега span имя id (например, id="comment"), создать стиль, например, отображение мелким шрифтом, другим цветом.

• Задать для текста комментария значения hidden свойства visibility (группа Layout) – вместо текста будет отражено пустое место.

• Установить курсор на тег поля mesta и выполнить команду Format/Behaviors, на вкладке команды Behaviors (в правом нижнем углу окна MS Expression Web) проверить, что выбран тег поля ввода (Tag: <input>), из выпадающего списка Insert выбрать Change Property, в окне Change Property:

  • выбрать Select Element, задать тип элемента: span, ID элемента: имя вставленного комментария (например, comment);

  • нажать на кнопку Visibility и установить значение Visible;

  • установить флажок Restore on mouseout event (рис.51);

  • нажать ОК.

Рис.51. Настройка динамического изменения видимости элемента

• На вкладке Behaviors появятся две строки, описывающие изменение стиля по событиям onclick и onmouseout соответственно. Изменить типы событий, выбрав их из выпадающего списка: onclick – на onfocus, onmouseout – на onchange.

• Сохранить изменения на странице, проанализировать код скрипта (содержимое тега script в разделе head страницы) и его вызов (содержимое параметров onfocus и onchange тега input элемента управления формы для ввода количества мест).

• Проверить действие скрипта в браузере, разрешив выполнение заблокированного содержимого (в случае если скрипты JavaScript были отключены).

18. Вставить на страницу «Заказать» заготовку скрипта JavaScript, выполняющего проверку данных формы перед отправкой:

Перейти в режим редактирования кода страницы «Заказать» и и добавить в тег script (до или после других функций, но в пределах тега комментария <!-- / / -->) функцию JavaScript, выводящую сообщение на экран и возвращающую значение «ложь»:

function verify(object) {

alert("Заявка не может быть отправлена");

return false

}

• Вставить вызов скрипта в тег form: добавить в тег параметр обработки события отправки данных формы onsubmit со значением return verify(this).

Пример тега формы:

<form method="post" enctype="text/plain" action="mailto:office@company.ru?subject= заявка на экскурсию" onsubmit="return verify(this)">

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

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

19. Модифицировать скрипт, чтобы он выполнял проверку заполнения данными полей формы mesta и contact. Оператор || соединяет два условия логической операцией ИЛИ. Функция verify(obj) пример вид:

function verify(obj) {

//Проверяет, заполнены ли поля формы mesta и contact

if ((obj.elements.mesta.value=="") ||

(obj.elements.contact.value=="")) {

alert("Заполнены не все поля, сообщение не может быть отправлено");

return false }

else

return true

}

20. Добавить в скрипт verify(obj) проверку того, что значение поля mesta является целым числом, состоящим из одной или двух цифр. Для проверки можно использовать регулярные выражения и метод test, который проверяет строку на вхождение по шаблону.

Пример кода проверки строки stroka на соответствие шаблону templ. Шаблон /[0-9]+/ показывает, что значение должно содержать одну и более цифр (но не обязательно только их):

var templ=/[0-9]+/;

if (templ.test(stroka)) then

alert ("Все правильно, это число!");

Для проверки поля mesta в текст скрипта вносится дополнительная переменная chislo, содержащая шаблон. Пример текста функции для проверки данных формы:

function verify(obj)

{

//Шаблон для проверки поля mesta

var chislo = /^[0-9]{1,2}$/;

//Проверяет, заполнены ли поля формы mesta и contact

if ((obj.elements.mesta.value=="") ||

(obj.elements.contact.value=="")) {

alert("Заполнены не все поля, сообщение не может быть отправлено");

return false }

else {

//Проверяет, является ли поле mesta двузначным числом

if (chislo.test(obj.elements.mesta.value)) {

return true}

else {

alert("Неверное число");

return false }

}

}

21. Самостоятельно добавить в скрипт проверку того, что значение поля mesta находится в диапазоне от 1 до 60. Можно использовать оператор &&, позволяющий соединять условия логической операцией И.

22. Продемонстрировать работу сайта, проверку и отправку данных формы преподавателю.

Лабораторная работа №7. ОРГАНИЗАЦИЯ ИНТЕРАКТИВНОГО ВЗАИМОДЕЙСТВИЯ с посетителями сайта

Задание 1. Установить web-сервер с поддержкой языка серверного программирования PHP и СУБД MySQL.

1. Зайти в ОС Windows с правами администратора. Остановить работу web-сервера MS IIS:

• Щелкнуть правой кнопкой мыши на значке «Мой компьютер» и выполнить команду Управление. В окне Управление компьютером раскрыть список Службы и приложения.

• Щелкнуть правой кнопкой мыши на пункте Internet Information Services и выбрать в контекстном меню команду Все задачи/ Перезапуск IIS. В окне команды выбрать из выпадающего меню пункт Остановка служб Интернета, затем нажать ОК.

• Проверить, что служба остановлена. Раскрыть список доступных служб, щелкнув мышью на пункте Службы. В списке служб найти строку IIS Admin, проверить, что в этой строке колонка Состояние – пуста (если служба не остановлена, в колонке отображается статус «Работает»).

• Если необходимо автоматически отключать web-сервер MS IIS при последующих перезагрузках Windows, в свойствах службы IIS Admin, доступных из контекстного меню, следует указать Тип загрузки: Отключено и нажать Применить.

• После того, как web-сервер IIS успешно отключен, закрыть окно Управление компьютером.

2. Установить свободный web-сервер XAMPP, предоставляющий связку технологий Apache/PHP/MySQL:

• По указанию преподавателя запустить файл установки XAMPP, в окне установки не менять язык (English), папку установки (C:\xampp), настроить опции – включить все флажки в окне XAMPP Options (рис.52) и нажать Install. Отмеченные сервисы будут запускаться автоматически при начальном запуске XAMPP.

• Дождаться, пока установочник распакует необходимые файлы, затем нажать кнопку Finish и подождать пока установочник выполнит настройки. В случае запроса брандмауэра Windows разблокировать службу web-сервера Apache, нажав на кнопку Разблокировать.

Рис.52. Окно настройки свойств установочника XAMPP

3. После завершения установки будет выдана панель управления XAMPP Control Panel Application с указанием запущенных служб (рис.53). Панель управления позволяет останавливать и перезапускать службы.

4. В браузере открыть сайт http://localhost/ – должно быть отображено окно приветствия XAMPP. Выбрать язык и перейти к окну просмотра сведений XAMPP. Окно просмотра сведений позволяет просматривать информацию о доступных технологиях и настройках, документацию, а также позволяет пользоваться некоторыми полезными инструментами (группа Tools).

Рис.53. Панель управления XAMPP

5. Проверить установленные по умолчанию настройки языка PHP, нажав на ссылку phpinfo() окна просмотра сведений XAMPP (рис.54). Перейти к группе Core и проверить значение параметра register_globals (по умолчанию – Off). Закрыть окно браузера.

6. Завершить работу web-сервера Apache, нажав на кнопку Stop в соответствующей строке Панели управления XAMPP.

7. Включить создание глобальных переменных, задав значение On для параметра register_globals:

• Зайти в папку c:\xampp\php и открыть в Блокноте файл настроек языка PHP – php.ini.

• С помощью поиска найти строку файла настроек, задающую значение параметра register_globals:

register_globals = Off

• Аккуратно заменить значение Off на On (параметры PHP чувствительны к регистру!) и сохранить сделанные изменения.

Рис.54. Просмотр настроек языка PHP

8. Запустить web-сервер Apache, нажав на кнопку Start в соответствующей строке Панели управления XAMPP.

9. Открыть в браузере http://localhost/ и проверить значение параметра PHP register_globals (должно быть – On).

10. Проверить работу PHP-интерпретатора на установленном web-сервере:

• Создать свою подпапку (название подпапки – без пробелов, латиницей) в папке c:\xampp\htdocs. Создать с помощью Блокнота Windows файл index.php и сохранить его в свою подпапку.

• В качестве текста файла index.php указать следующий код:

<?php

echo ("Hello, World!");

?>

• Сохранить сделанный изменения, а затем открыть в браузере адрес вида: http://localhost/ваша_подпапка/ – на экране должен отобразиться не код скрипта, а текст приветствия: Hello, World!

11. Проверить передачу данных из формы скрипту PHP:

• Сохранить скрипт index.php в подпапку под новым именем (например, 1.php); в новом файле изменить текст вывода с "Hello, World!" на "Присланный текст: $t" и сохранить изменения.

• В файле index.php разместить HTML-код простой формы с одним текстовым полем t, передающей данные скрипту 1.php:

<html>

<head>

<title>Форма</title>

</head>

<body>

<form method="get" action="1.php">

<input type="text" name="t" />

<input type="submit" value="Отправить данные" />

</body>

</html>

• Сохранить изменения в файле index.php, а затем обновить страницу http://localhost/ваша_подпапка/. На новой странице должна появиться строка ввода текста и кнопка отправки данных. Ввести в поле произвольный текст латиницей и нажать кнопку отправки.

• На экран должен быть выведен текст вида:

Присланный текст: ваши_данные

• Проанализировать адресную строку, она содержит имя файла со скриптом (1.php), имя пересылаемого параметра (t) и пересылаемые данные

http://localhost/new/1.php?t=ваши_данные

• Просмотреть код отображенной браузером (команда Вид/Просмотр HTML-кода в MS IE), убедиться, что отображенная страница содержит только теги HTML без инструкций PHP.

Задание 3. Создать простую базу данных, содержащую информацию об экскурсиях и поданных заявках.

В задании будет создана база данных, содержащая три таблицы (рис.55): «Экскурсии» (excurs), «Даты экскурсий» (data_excurs) и «Заявки» (zayav).

Таблица «Эскурсии» содержит поля: название экскурсии (excurs), код экскурсии (excurs_code). Значения обоих полей – уникальные.

Таблица «Даты экскурсий» содержит поля: код поездки (count), код экскурсии (excurs_code), дата экскурсии (data_excurs), число мест (mesta). Значения поля count – уникальные, значения остальных полей могут повторяться.

Таблица «Заявки» содержат поля: код поездки (excurs_code_data), число заявленных мест (mesta), дата заказа (data), данные контактного лица (contact). Значения полей могут повторяться.

Рис.55. Схема создаваемой базы данных

12. Работа с базой данных MySQL осуществляется с помощью инструкций языка запросов SQL. Для создания базы данных, создания и заполнения таблиц, а также формирования выборок можно также использовать визуальную оболочку PhpMyAdmin. Запустить оболочку PhpMyAdmin. Оболочка PhpMyAdmin может быть запущена с помощью кнопки Admin в строке MySQL Панели управления XAMPP, либо с помощью ссылки phpMyAdmin окна просмотра сведений XAMPP http://localhost/.

13. Создать новую базу данных на локальном сервере:

• На стартовой странице PhpMyAdmin в группе Новая база данных задать имя (например, excurses) и кириллическую кодировку базы данных (cp1251_general_ci), нажать кнопку Создать (рис.56). Аналогичным образом можно создать базу данных на вкладке Базы данных.

Рис.56. Создание новой базы данных

• Любое действие в оболочке сопровождается выводом соответствующей SQL-инструкции (вверху окна).

• Перейти в созданную базу данных, щелкнув на ее имени в списке на вкладке Базы данных или в левой области-меню окна PhpMyAdmin.

14. На вкладке базы данных (вкладка Структура) создать новую таблицу «Экскурсии», содержащую два поля:

• В поля группы Создать новую таблицу в базе данных excurses ввести имя таблицы (excurs) и количество полей (2), нажать на кнопке OK (рис.57).

Рис.57. Создание новой таблицы базы данных

• Будет открыто окно с определением структуры таблицы «Экскурсии». Задать названия, тип и свойства полей (рис.58):

Рис.58. Задание структуры таблицы «Экскурсии»

Название экскурсии – excurs, тип – TEXT, длина – 25 (символов), кодировка (Сравнение) – cp1251_general_ci;

Код экскурсии – excurs_code, тип – INT (целое число), индекс – PRIMARY (первичный индекс).

• После задания свойств полей нажать кнопку Сохранить.

• Будет открыто окно просмотра структуры таблицы excurs (рис.59). В случае необходимости выделить нужное поле и изменить его свойства (кнопка Изменить с изображением карандаша).

Рис.59. Окно просмотра структуры таблицы

15. Щелкнуть мышью на имени базы данных в левой области-меню окна PhpMyAdmin и создать аналогичным образом таблицы «Даты экскурсий» (data_excurs, 4 поля):

1) Код поездки – count, тип – INT, индекс – PRIMARY, AUTO_INCREMENT;

2) Код экскурсии – excurs_code, тип – INT;

3) Дата экскурсии – data_excurs, тип – DATE;

4) Число мест (mesta), тип – INT;

и «Заявки» (zayav, 4 поля):

1) Код поездки – excurs_code_data, тип – INT;

2) Число заявленных мест – mesta, тип – INT;

3) Дата заказа – data, тип – DATE;

4) Данные контактного лица – contact, тип – TEXT, длина – 100 (символов), кодировка – cp1251_general_ci.

16. Занести данные в таблицу «Экскурсии»:

• Отобразить список таблиц, щелкнув мышью на имени базы данных в левой области-меню окна PhpMyAdmin, выбрать строку таблицы excurs и нажать на кнопку Вставить в строке таблицы. Будет открыто окно создания записи (рис.60).

• Занести данные в поля записи и нажать ОК.

Рис.60. Окно заполнения данных записи

• Повторить процедуру пока не будут занесены все экскурсии (значения полей всех записей таблицы должны быть уникальными).

• После создания всех записей таблицы просмотреть их, нажав на кнопку Обзор в строке таблицы excurs (рис.61).

Рис.61. Пример записей таблицы excurs

• В случае необходимости откорректировать значения полей записи, нажав на кнопку Изменить с изображением карандаша.

17. Аналогично предыдущему пункту занести данные в таблицу «Даты экскурсий» (рис.62). Поле count оставлять пустым (заполняется автоматически). Значение даты в поле data_excurs следует выбирать из календаря. Значения полей записей таблицы (кроме count) могут повторяться. Важно, чтобы поле excurs_code содержало бы только значения, которые определены в таблице excurs.

Рис.62. Пример записей таблицы data_excurs

18. Сформировать запрос SQL для отображения расписания экскурсий: отобразить поля excurs из таблицы excurs, поля data_excurs и mesta из таблицы data_excurs в порядке возрастания дат и при условии, что значения полей excurs_code в обеих таблицах совпадают. Для формирования запроса следует воспользоваться мастером Запрос по шаблону, вкладка мастера запросов доступна в окне базы данных:

• По умолчанию форма запроса мастера содержит 3 поля. Добавить еще одно поле: выбрать значение 1 в строке Добавит/удалить столбец критерия и нажать кнопку Дополнить запрос.

• Выбрать названия полей (`excurs`.`excurs`, `excurs`.`excurs_code`, `data_excurs`.`data_excurs` и `data_excurs`.`mesta`), пометить поля, выводимые на экран, задать порядок сортировки для поля `data_excurs`.`data_excurs` и условие отбора =`data_excurs`.`excurs_code` для поля `excurs`.`excurs_code` (рис.63), затем нажать кнопку Дополнить запрос внизу окна мастера запросов.

Рис.63. Пример формирования запроса к базе данных

• Результирующий запрос может иметь следующий вид:

SELECT `excurs`.`excurs`, `data_excurs`.`data_excurs`, `data_excurs`.`mesta` FROM `excurs`, `data_excurs`

WHERE (`excurs`.`excurs_code` =`data_excurs`.`excurs_code`)

ORDER BY `data_excurs`.`data_excurs` ASC

• Нажать кнопку Выполнить запрос для отображения расписания экскурсий (рис.64).

Рис.64. Пример вывода расписания экскурсий

• Если запрос выполнен корректно, нажать ссылку [Изменить] (внизу области запроса), выделить сгенерированный код SQL-запроса и сохранить его в текстовом файле как «запрос1».

19. Аналогично предыдущему пункту создать и сохранить в текстовом файле SQL-запрос «запрос2» для вывода: поля excurs из таблицы excurs, поля и count и data_excurs из таблицы data_excurs в порядке возрастания названий экскурсий и при условии, что значения полей excurs_code в обеих таблицах совпадают.

ПРИМЕЧАНИЕ: При необходимости продолжить работу с базой данных на другом компьютере (SQL-сервере) следует перейти в главное окно базы данных, щелкнув на ее имени мышью в левой области меню, а затем экспортировать в SQL-файл (вкладка Экспорт).

В начале работы на другом компьютере (SQL-сервере) следует заново создать базу данных, указав кодировку cp1251_general_ci (см. пункты 12-13); затем импортировать таблицы с данными из внешнего SQL-файла (вкладка Импорт), указав кодировку cp1251.

Задание 4. Создать PHP-код для работы с базой данных «Экскурсии».

20. Создать подпапку для хранения PHP-скриптов в своей папке ваша_подпапка на локальном сервере (см. задание 1, пункт 10 этой лабораторной работы).

21. В Блокноте Windows создать файл db_info.php и сохранить его в подпапку для скриптов. В текст файла db_info.php занести код, который сохраняет информацию о базе данных в переменных. Пример кода:

<?php

// Сохранение информации о соединении с базой данных

$db_host="localhost";

$db_database="excurses";

$db_username="root";

$db_password="";

?>

22. В Блокноте Windows создать файл db_connect.php и сохранить его в подпапку для скриптов. В текст файла db_connect.php занести код, который выполняет следующие действия:

• вызывает файл с информацией о базе данных (include);

• устанавливает соединение с сервером MySQL и возвращает дескриптор подключения к базе данных (mysql_connect);

• осуществляет выбор базы данных и возвращает селектор выбора базы данных (mysql_select_db);

• в случае неудачи выдает сообщение об этом и завершает работу скрипта (поскольку в этом случае продолжать выполнение программы бессмысленно).

Пример кода скрипта:

<?php

// Подключение файла с информацией о базе данных

include("db_info.php ");

// Подключение к базе данных

$connection = mysql_connect($db_host, $db_username, $db_password);

mysql_query("set names cp1251"); // Указание кодировки соединения

if (!$connection) {

echo("<p>Невозможно подключиться к базе данных: <br />". mysql_error()."</p>");

exit();

}

// Выбор базы данных

$db_select = mysql_select_db($db_database);

if (!$db_select) {

echo("<p>Невозможно выбрать базу данных: <br />". mysql_error()."</p>");

exit();

}

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

http://locahost/ваша_папка/подпапка_скриптов/db_connect.php.

23. Создать, сохранить и проверить файл raspis.php, формирующий расписание экскурсий на основе ранее сохраненного текста запроса «запрос1». Скрипт должен:

• выполнить подключение к базе данных;

• занести текст запроса в переменную (можно по частям);

• выполнить запрос к базе данных (mysql_query);

• проверить дескриптор выполнения запроса и в случае ошибки вывести сообщение и прекратить работу.

Пример кода скрипта:

<?php

// Подключение к базе данных

include("db_connect.php");

// Запись текста запроса в переменную

$select="SELECT `excurs`.`excurs`, `data_excurs`.`data_excurs`, `data_excurs`.`mesta` ";

$from=" FROM `excurs`, `data_excurs`";

$where=" WHERE (`excurs`.`excurs_code` =`data_excurs`.`excurs_code`)";

$order=" ORDER BY `data_excurs`.`data_excurs` ASC";

$query=$select.$from.$where.$order;

// Выполнение запроса к базе данных

$raspis=mysql_query($query);

// Проверка выполнения запроса

if (!$raspis) {

echo("<p>Невозможно выполнить запрос: <br />". mysql_error()."</p>");

exit();

}

?>

24. Дополнить код скрипта raspis.php следующими действиями:

• в случае успешного выполнения запроса (блок else) в цикле (while) сформировать массив строк запроса (mysql_fetch_row);

• вывести поля строк запроса на экран совместно с тегами HTML.

Пример добавляемого кода (вставить перед закрывающей инструкцией PHP-скрипта ?>):

else {

// Так как запрос выдает несколько строк, для вывода используется цикл

while($excurs=mysql_fetch_row($raspis)) {

echo("<p>".$excurs[1]." <i>".$excurs[0]."</i> - " .$excurs[2]." мест </p>");

}

}

25. Дополнить код скрипта raspis.php разрывом соединения с базой данных.

Пример добавляемого кода (вставить перед закрывающей инструкцией PHP-скрипта ?>):

//Разрыв соединения

if(!mysql_close($connection)) {

echo("<p>Невозможно разорвать соединение с базой данных</p>");

}

26. Проверить работу скрипта raspis.php – он должен выводить на экран расписание экскурсий (рис.65).

27. Создать скрипт spisok.php для вывода результатов запроса «запрос2» в виде выпадающего списка HTML (рис.66, рис.67). В качестве имени списка (параметр name тега select) указать excurs_code_data (имя поля «Код поездки» таблицы «Заявки»). В качестве элементов списка (тег option) должны отображаться названия и даты экскурсий, а в качестве значений элементов (параметр value) – значения поля count таблицы «Даты экскурсий».

Рис.65. Пример вывода расписания PHP-скриптом

Рис.66. Пример генерируемого PHP-скриптом HTML-кода

Рис.67. Пример внешнего вида сформированного PHP-скриптом выпадающего списка

Пример кода скрипта:

<?php

// Подключение к базе данных

include("db_connect.php");

// Запись текста запроса в переменную

$select="SELECT `excurs`.`excurs`, `data_excurs`.`data_excurs`, `data_excurs`.`count`";

$from=" FROM `excurs`, `data_excurs`";

$where=" WHERE (`excurs`.`excurs_code` =`data_excurs`.`excurs_code`)";

$order=" ORDER BY `excurs`.`excurs` ASC";

$query=$select.$from.$where.$order;

// Выполнение запроса к базе данных

$spisok=mysql_query($query);

//Проверка выполнения запроса

if (!$spisok) {

echo("<p>Невозможно выполнить запрос: <br />". mysql_error()."</p>");

exit();

}

else {

echo('<select name="excurs_code_data">');

// Так как запрос выдает несколько строк, для вывода используется цикл

while($excurs=mysql_fetch_row($spisok)) {

echo('<option value="'.$excurs[2].'"> '.$excurs[0]." " .$excurs[1]."</option>");

}

echo("</select>");

}

//Разрыв соединения

if(!mysql_close($connection)) {

echo("<p>Невозможно разорвать соединение с базой данных</p>");

}

?>

28. Зайти в оболочку PhpMyAdmin и создать новую запись в таблице «Заявки» (zayav) база данных «Экскурсии» (excurses):

• В окне создания новой записи выбрать функцию CURDATE из выпадающего списка поля data, остальные поля оставить пустыми, нажать ОК.

• Окно SQL-запроса будет содержать предупреждения (рис.68). Нажать ссылку [PHP-код], будет сгенерирован код, заносящий текст запроса в переменную $sql.

Пример SQL-кода:

$sql = "INSERT INTO `excurses`.`zayav` (`excurs_code_data`, `mesta`, `data`, `contact`) VALUES (\'\', \'\', CURDATE(), \'\');";

Сохранить этот код в текстовом файле.

Рис.68. Инструкция вставки пустой записи в таблицу «заявки»

29. Создать и сохранить PHP-скрипт zayavka.php для добавления записи в таблицу «Заявки»:

• Данные, заносимые в таблицу, задаются значениями переменных $excurs_code_data, $mesta и $contact. В этом случае значение переменной $sql, определенное в предыдущем пункте, примет вид:

$sql = "INSERT INTO `excurses`.`zayav` (`excurs_code_data`, `mesta`, `data`, `contact`) VALUES ('$excurs_code_data', '$mesta', CURDATE(), '$contact');";

• Чтобы отладить скрипт, следует определить перечисленные переменные в начале скрипта.

Пример кода скрипта:

<?php

// Подключение к базе данных

include("db_connect.php");

$excurs_code_data="1";

$mesta="2";

$contact="3";

// Запись текста запроса в переменную

$sql = "INSERT INTO `excurses`.`zayav` (`excurs_code_data`, `mesta`, `data`, `contact`) VALUES ('$excurs_code_data', '$mesta', CURDATE(), '$contact');";

// Выполнение запроса к базе данных

$zayavka=mysql_query($sql);

//Проверка выполнения запроса

if (!$zayavka) {

echo("<p>Невозможно выполнить запрос: <br />". mysql_error()."</p>");

exit();

}

else {

echo("<p>Заявка успешно добавлена в базу данных</p>");

}

//Разрыв соединения

if(!mysql_close($connection)) {

echo("<p>Невозможно разорвать соединение с базой данных</p>");

}

?>

• Проверить действие скрипта. Если выдано сообщение о том, что заявка успешно добавлена в базу данных, отобразить записи таблицы zayav в оболочке PhpMyAdmin и проверить наличие в таблице добавленной записи.

• Удалить тестовые записи из таблицы zayav.

Задание 5. Добавить созданный PHP-код для работы с базой данных «Экскурсии» на страницы сайта «Отдых на природе» (лабораторная работа №6).

30. Открыть сайт «Отдых на природе» для редактирования в MS Expression Web. В режиме просмотра содержимого сайта (Site View) изменить расширения страниц raspisanie.html и zakaz.html на php – raspisanie.php и zakaz.php. При изменении расширений будет выдано окно с предложением изменить ссылки на ресурс, ответить Yes.

31. На основе динамического шаблона master.dwt создать и сохранить в файле podtverjdenie.php новую web-страницу «Подтверждение заказа».

32. Разместить сайт «Отдых на природе» на локальном сервере:

• Удалить из своей папки на сервере ваша_папка ранее созданные файлы index.php и 1.php.

• Скопировать в свою папку на сервере C:\xampp\htdocs\ваша_папка содержимое папки сайта (выложить файлы сайта на сервер можно также через FTP, либо опубликовать сайт в свою подпапку из MS Expression Web командой Site/Publishing выбрав, например, тип подключения File System – см. пункт 34 лабораторной работы №4);

• Дальнейшее редактирование следует осуществлять для страниц из папки на сервере.

33. Добавить на страницу «Расписание экскурсий» скрипт для вывода расписания:

• В правой колонке страницы «Расписание» ввести текст заголовка (например, «Расписание ближайших экскурсий»), удалить текст абзаца «Введите текст правой колонки».

• В правой колонке после тега заголовка ввести инструкцию PHP, подключающую скрипт для выдачи расписания (raspis.php). Все скрипты должны находиться в подпапке для скриптов подпапка_скриптов, расположенной в той же папке на локальном сервере. В этом случае со страниц сайта к скриптам можно обратиться по адресу подпапка_скриптов/скрипт.

Пример кода для вставки скрипта raspis.php на страницу «Расписание экскурсий» (в примере скрипт расположен в подпапке scr):

<?php

// Вызов скипта для фомирования расписания экскурсий

include("scr/raspis.php");

?>

• Выполнить скрипт, просмотрев страницу на локальном сервере (по адресу http://localhost/ваша_папка) Результат выполнения скрипта показан на рис.69.

34. Откорректировать страницу «Подтверждение заказа»:

• Удалить левую колонку;

• Откорректировать заголовок правой колонки (например, «Подтвержение заказа», удалить текст абзаца «Введите текст правой колонки».

• В правой колонке после тега заголовка ввести инструкцию PHP, подключающую скрипт для обработки заявки и выдачи сообщения об отправке заказа (zayavka.php).

Пример кода для вставки скрипта zayavka.php:

<?php

// Вызов скипта для обработки заявки

include("scr/zayavka.php");

?>

Рис.69. Вывод списка экскурсий на web-странице

• Откорректировать текст скрипта zayavka.php, убрав из его начала строки с определением значений переменных $excurs_code_data, $mesta и $contact.

• Проверить совпадение названий переменных и имен полей формы на странице «Заказать». В случае несовпадения откорректировать скрипт (или имена полей).

35. Откорректировать страницу «Заказать»:

• Удалить из страницы HTML-код выпадающего списка (тег select и вложенные теги); вставить вместо него код подключения скрипта spisok.php, формирующего выпадающий список.

• Проверить действие скрипта на странице «Заказать».

• Откорректировать открывающий тег формы form: удалить определение кодировки, задать метод (method) отправки – get, в качестве значения параметра action задать путь к странице «Подтверждение заказа».

Пример открывающего тега form:

<form method="get" action="podtverjdenie.php">

• Заполнить данные формы на странице «Заказать» и нажать кнопку отправки – должна быть выведена страница с подтверждением отправки заказа.

• В случае успешной отправки заявки открыть базу данных «Экскурсии» в оболочке PhpMyAdmin и проверить наличие в таблице zayav добавленной записи с отправленными данными.

36. Продемонстрировать работу скриптов преподавателю.

Самостоятельное задание:

37. Модифицировать текст скрипта zayavka.php таким образом, чтобы на странице подтверждения заказа выдавалась также информация о сделанном заказе.

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

39. Модифицировать текст скрипта zayavka.php таким образом, чтобы перед занесением в базу данных осуществлялась проверка переданных значений и выдача соответствующих сообщений. В случае ввода неправильных запись в базу данных не производится. Типы проверок и преобразований:

• Проверка заполнения поля контактов. Можно использовать функцию empty($var).

• Проверка длины поля контактов – до 100 символов (максимальная длина поля в таблице базы данных). Используется функция strlen($var).

• Обрезка поля контактов до 100 символов. Используется функция substr($var, $start, $len). Пример обрезки переменной: $var=substr($var, 0, 99).

• Обработка поля контактов функциями удаления HTML-тегов и обратных слешей (для исключения возможности вставки в поле скриптов JavaScript и Perl). Пример: $var=htmlspecialchars(stripslashes($var)). Вместо удаления специальных символов языка HTML можно также воспользоваться функцией их экранирования htmlentities($var).

• Проверка количества резервируемых мест по шаблону (используются те же регулярные выражения, что и в JavaScript – см. пункт 20 лабораторной работы №6). Для проверки следует использовать PHP-функция preg_match(шаблон, строка), которая принимает истинное значение, если в строке найдено хотя бы одно совпадение с шаблоном.

• Проверка количества резервируемых мест – должно быть от 1 до 60.

• Проверка количества резервируемых мест – должно быть не менее 1 и не более числа доступных мест (можно определить для выбранной экскурсии (значение $excurs_code_data) по коду поездки (count) в таблице «Даты экскурсий» (data_excurs)).

40. Отключить параметр register_globals в файле настроек php.ini (register_globals = Off) – см. пункты 5-8 задания 1 этой лабораторной работы; и модифицировать скрипты отправки и проверки данных из формы таким образом, чтобы они сохранили работоспособность при отключенном параметре.

ПРИМЕЧАНИЕ: Включение переменной register_globals позволяет методам отсылки данных GET и POST автоматически создавать переменные с глобальной областью видимости. В ряде случаев это может повлечь проблемы с безопасностью. Опасность заключается в том, что PHP не требует предварительного объявления переменной, и это позволяет злоумышленнику вызвать PHP-сценарий с GET- или POST-параметрами, которые разработчик не ожидает получить. Чтобы исправить проблему следует использовать внутри сценария соответствующий суперглобальный массив $_GET или $_POST. Индексами массива служат имена отправляемых переменных.

Пример модификации скрипта, получающего данные из поля формы с именем t.

Было:

<?php

echo ("<p>Полученные данные: <b> $t </b></p>");

?>

Стало:

<?php

echo ("<p>Полученные данные: <b>". $_GET["t"] . "</b></p>");

?>

41. Продемонстрировать выполнение скриптов преподавателю.