HTML: работа с базами данных в примерах

Учебные материалы к элективным курсам по информатике для 10 - 11 классов, выпуск 4
Табачук Наталья Петровна, преподаватель, кафедра информатики и
информационных технологий ДВГГУ
HTML: РАБОТА С БАЗАМИ ДАННЫХ В ПРИМЕРАХ
Пояснительная записка ................................................................................................................................................... 1
Тематическое планирование ........................................................................................................................................... 2
Текст пособия ................................................................................................................................................................... 3
Базы данных .................................................................................................................................................................... 3
Назначение и функциональные возможности языка разметки гипертекста (HTML) ..................................... 3
Основы Visual Basic Script (VBScript) ......................................................................................................................... 7
Основы создания сценариев на Visual Basic Script .................................................................................................. 9
Проектирование баз данных с помощью HTML .................................................................................................... 12
Пояснительная записка
В настоящее время информацию рассматривают как один из основных
ресурсов развития общества, а информационные системы и технологии как
средство повышения производительности и эффективности работы людей.
Информационные системы и базы данных стали неотъемлемой частью нашей
повседневной жизни: покупка в супермаркете, расчеты с использованием
кредитной карты, работа в Internet, обучение в университете и пр. Большинство
отраслей человеческой деятельности связано с внедрением и использованием баз
данных, которые обеспечивают хранение информации, представление данных для
пользователей, что повышает эффективность работы. Наиболее широко
информационные системы и базы данных используются в производственной,
управленческой и финансовой деятельности.
Язык разметки гипертекста (HTML) позволяет быстро и эффективно
разрабатывать самые разнообразные приложения, включая и приложения для
работы с базами данных.
Цель предлагаемой программы: познакомить слушателей с основными
понятиями, связанными с проектированием баз данных, с процессом создания
приложений для них с помощью HTML, который поддерживает язык
программирования VBScript для разработки запросов, организации взаимодействия
внешних данных с базой данных в HTML.
Задачи программы:
1) Рассмотреть основной понятийный аппарат реляционных баз данных.
2) Научить проектировать реляционные базы данных и приложения.
3) Показать технологию создания информационных систем.
4) Познакомить слушателей с основными элементами языка HTML и языка
программирования VBScript для работы с базами данных.
5) Показать возможность применения языка разметки гипертекста (HTML) для
быстрой разработки приложений при работе с базами данных.
Требования к уровню усвоения содержания курса
В результате освоения программы курса слушатели должны:
 формулировать основные понятия, связанные с базами данных:
информационная систем, база данных;
 перечислять основные объекты базы данных и определять их назначение;
Хабаровск, 2007
Учебные материалы к элективным курсам по информатике для 10 - 11 классов, выпуск 4
 формулировать основные понятия реляционных баз данных: отношение,
атрибут, запись, ключи и индексы;
 распознавать подходы к проектированию баз данных;
 выделять основные элементы языка разметки гипертекста (HTML) для
работы с базами данных;
 перечислять компоненты, основные функции языка программирования
VBScript для доступа к данным и для работы с ними (отбор данных из
таблиц);
 определять характеристику проекта в HTML (состав проекта, файл проекта,
файлы формы, файл ресурсов, параметры проекта).
В процессе изучения курса слушатели должны приобрести умения:
 создавать локальные базы данных с помощью HTML, приложения в HTML,
позволяющие просматривать записи, перемещаться по записям, выполнять
поиск;
 использовать в приложениях язык программирования VBScript;
 создавать связи между таблицами реляционной базы данных посредством
гиперссылок.
Программа рассчитана на слушателей, которые работают на компьютере в той
или иной области и имеют представление об основных компонентах и функциях
какого-либо из языков программирования.
№
1.
2.
3.
4.
5.
Тематическое планирование
Тема
Базы
1.
данных реляционного типа. Основные понятия и
определения. Разработка баз данных: общие подходы.
Язык
2.
разметки гипертекста HTML для работы с базами данных.
структура HTML-документа;
VBScript как язык программирования, поддерживаемый HTML;
основные операторы языка VBScript.
Проектирование
3.
баз данных:
создание баз данных средствами HTML;
создание таблиц;
связь внешних данных (текстовые документы, рисунки,
фотографии, музыкальные фрагменты) с HTML-документами.
Создание
4.
приложений для работы с базами данных:
создание форм с перемещением по записям базы данных;
индексирование таблиц;
сортировка данных таблицы по различным полям.
Проектирование
5. 5
запросов на поиск информации в базе данных.
Формулировка
и
реализация
запросов
на
языке
программирования VBScript.
Создание связи между таблицами реляционной базы данных
посредством гиперссылок.
Итого
Хабаровск, 2007
Лек.
Л/з
2
2
2
2
2
2
3
2
3
10
10
Учебные материалы к элективным курсам по информатике для 10 - 11 классов, выпуск 4
Текст пособия
Базы данных
С точки зрения пользователя, база данных – это программа, которая
обеспечивает работу с информацией. При запуске такой программы на экране
появляется таблица, просматривая которую пользователь может найти
интересующие его сведения. Если система позволяет, то он может внести
изменения в базу данных: добавить новую информацию или удалить ненужную.
С точки зрения программиста, база данных – это набор файлов, содержащих
информацию. Разрабатывая базу данных для пользователя, программист создает
программу, которая обеспечивает работу с файлами данных.
В настоящее время существует достаточно большое количество
программных сред, позволяющих создавать и использовать базы данных.
Назначение и функциональные возможности языка разметки
гипертекста (HTML)
Для создания базы данных, отображаемой браузером Internet Explorer
(программа для просмотра HTML-документов), разработан специальный язык
HTML (Hyper Text Markup Language) – язык разметки гипертекста.
HTML-документ содержит набор управляющих последовательностей,
определяющих действия, которые браузер выполняет при загрузке документа.
Каждый документ представляет собой текстовый файл и содержит текст
(изображения), который пользователи баз данных видят, и некоторые инструкции
для программы просмотра, не отображаемые на экране. Эти инструкции условно
можно разделить на два типа:
 описание внешнего вида документа (размер букв, тип шрифта, элементы
оформления),
 ссылки на другие ресурсы, которые делают из текста гипертекст.
Гипертекст – способ организации текстовой информации, внутри которой
установлены смысловые связи между ее различными фрагментами (гиперсвязи).
Структура HTML-документа
В основе любого HTML-документа лежит понятие тега (tag).
Тег – это начальный или конечный маркер элемента. Теги определяют
границы действия элементов и отделяют элементы друг от друга.
В тексте HTML-документа теги заключаются в угловые скобки: <тег>. Теги
используются для разметки документа, форматирования текста и ряда других
функций, но никогда не выводятся браузером на экран. Обычно теги представляют
собой пары. В этом случае различают открывающий и закрывающий теги, между
которыми может располагаться любой текст, в том числе и любое количество
вложенных тегов. Завершающий тег отличается от открывающего наличием слэша
(/) перед именем тега:
<тег> текст </тег>.
Структура любого HTML-документа выглядит следующим образом:
<HTML>
<HEAD>
<TITLE> заголовок и описание документа </TITLE>
</HEAD>
Хабаровск, 2007
Учебные материалы к элективным курсам по информатике для 10 - 11 классов, выпуск 4
<BODY>
Хабаровская
школа
</BODY>
</HTML>
краевая
летняя
физико-математическая
<HTML> </HTML>
Начинает и заканчивает любой HTML-документ.
<HEAD> </HEAD>
Область заголовка HTML-документа, служит для формирования структуры
документа. Этот элемент включает TITLE и допускает вложение элементов
SCRIPT, STYLE.
<TITLE> </TITLE>
Элемент для размещения заголовка в окне браузера.
<BODY> </BODY>
Этот элемент заключает в себе гипертекст, который определяет HTMLдокумент. Внутри элемента BODY можно использовать все элементы,
предназначенные для форматирования HTML-документа. Внутри начального тега
элемента BODY можно расположить ряд атрибутов (свойств).
Рассмотрим некоторые из них:
 Установка «обоев»: <body background=”путь к файлу обоев”>,
 Установка цвета фона: <body bgcolor=”цвет”>,
 Установка цвета выводимых символов: <body text=”цвет”>.
Пример: <body bgcolor=”red” text=”yellow”>ТЕКСТ</body>.
Данный пример показывает, что в основной области HTML-документа будет
располагаться слово ТЕКСТ на красном фоне желтыми буквами.
Задание по созданию простейшего HTML-документа:
1. В программе Блокнот создать простейшую структуру HTML-документа.
2. Придумать и записать заголовок страницы внутри элемента TITLE.
3. Записать любой текст внутри элемента BODY.
4. Сохранить файл с расширением .html (например, первая страница.html).
5. Запустить браузер Internet Explorer и просмотреть HTML-документ.
6. Вернуться в Блокнот. Изменить внутреннее наполнение, используя элементы
форматирования текста.
Форматирование текста
Существуют специальные теги, позволяющие форматировать текст.
<P> текст </P>
Используются для обозначения начала и конца абзаца. Тег начала абзаца
может иметь команду форматирования текста внутри абзаца, т.е. указания по
выравниванию текста по центру, по левому или по правому краю:
аlign=”center”
аlign=”left”
аlign=”right”
Для этого же эффекта могут использоваться парные теги:
<LEFT> текст </LEFT>
<CENTER> текст </CENTER>
Хабаровск, 2007
Учебные материалы к элективным курсам по информатике для 10 - 11 классов, выпуск 4
Существуют теги для оформления заголовков. Заголовок первого уровня
выводится самым крупным шрифтом. Каждый следующий заголовок будет
выводиться шрифтом меньшего размера.
<H1> Заголовок первого уровня </H1>
<H2> Заголовок второго уровня </H2>
<H3> Заголовок третьего уровня </H3>
<H4> Заголовок четвертого уровня </H4>
<H5> Заголовок пятого уровня </H5>
Существует возможность изменения начертания символов: полужирный
шрифт (bold), курсив (italic), подчеркивание (underline):
<B> жирный шрифт </B>
<I> курсив </I>
<U> подчеркивание </U>
<FONT > текст </FONT>
Позволяет задавать шрифт, размер и цвет символов выводимого текста,
заключенного между тегами.
Для установки шрифта используется атрибут face=”шрифт”, который
ставится в открывающем теге элемента FONT.
<FONT face=”Antiqua, Arial, Times”>
Для изменения размера выводимых символов можно установить в
открывающем теге элемента FONT атрибут size=n, где n – число пунктов, на
которое вы хотите увеличить (+n) или уменьшить (-n) размер шрифта.
Для установки цвета выводимых символов можно добавить в открывающем
теге элемента FONT атрибут color=”цвет”.
Например:
<FONT face=”Arial, Times” size=+2 color=”red”> текст
</FONT>
Полезные замечания: Чтобы вставить пустую строку, используется
одиночный тег <BR>. Чтобы сделать отступ от края экрана или вставить
дополнительные пробелы, используется запись  . Для создания
горизонтальной линии (разделителя) внутри документа используется тег <hr>.
Управление цветом
Кодирование цвета используется для раскрашивания шрифтов, линий, фона
и других элементов страницы. Цвета обозначаются английскими названиями или
числовыми кодами. В общем случае цвет определяется RGB-кодом. Любой цвет
представляется как комбинация красного (R), зеленого (G) и синего (B) цветов,
взятых в определенных пропорциях. Простой способ определить цвет – написать
название на английском языке.
Русское название
Английское
RGB-код
название
Аквамарин
Aqua
#00FFFF
Белый
White
#FFFFFF
Желтый
Yellow
#FFFF00
Хабаровск, 2007
Учебные материалы к элективным курсам по информатике для 10 - 11 классов, выпуск 4
Зеленый
Green
#008000
Золотой
Gold
#FFD700
Индиго
Indigo
#4B0080
Каштановый
Maroon
#800000
Красный
Red
#FF0000
Оливковый
Olive
#808000
Оранжевый
Orange
#FFA500
Пурпурный
Purple
#800080
Светло-зеленый
Lime
#00FF00
Серебристый
Silver
#C0C0C0
Серый
Gray
#808080
Сизый
Teal
#008080
Синий
Blue
#0000FF
Ультрамарин
Navy
#000080
Фиолетовый
Violet
#EE80EE
Фуксиновый
Fuchsia
#FF00FF
Черный
black
#000000
Вставка рисунков, изображений, фотографий
<IMG SRC=”имя файла”>
В документ можно вставить рисунки, изображения, фотографии с
расширением .gif, .jpg.
При размещении картинок могут использоваться дополнительные
параметры. Рассмотрим некоторые из них:
аlign=”способ выравнивания”
С помощью этого атрибута можно выровнять картинку по левому или по
правому краю, по центру, по верхней границе или по нижней границе, для этого
указываются следующие “способы выравнивания”:
LEFT – по левому краю;
RIGHT – по правому краю;
CENTER – по центру;
Кроме атрибута align часто используются атрибуты, позволяющие указать
размер выводимой картинки в пикселях:
Widht=n – ширина выводимой картинки, n – число пикселей;
Height=m – высота картинки, m – число пикселей.
Атрибуты HSPACE и VSPACE обозначают горизонтальный и
вертикальный отступ. Они используются для задания отступа от краев
изображения до текста.
Например: <IMG SRC=”picture.jpg” align=”left” hspace=20>
Создание гиперссылок на HTML-документы
Для создания в документе гиперсвязей используют парные теги:
<A HREF=”название HTML-документа”> ссылка </A>
где ссылка – это слово, заголовок, фрагмент текста, картинка или другой объект,
который будет являться ссылкой, будет выделен в тексте специальным образом.
HTML-формы
Хабаровск, 2007
Учебные материалы к элективным курсам по информатике для 10 - 11 классов, выпуск 4
Формы включают в себя управляющие элементы различных типов:
текстовые поля, раскрывающиеся списки.
Текстовые поля создаются с помощью тега <INPUT> со значением
атрибута TYPE=”text”. Атрибут NAME служит для определения наименования
переменной поля.
Например: <INPUT TYPE=”text” NAME=”fio” SIZE=30>.
Для создания полей со списком служит элемент <SELECT> </SELECT>,
в котором каждый элемент списка определяется тегом <OPTION>.
Внутри тега <OPTION> поддерживается два атрибута: SELECTED и
VALUE. Выбираемый по умолчанию элемент задается с помощью атрибута
SELECTED.
VALUE – указывает на значение, возвращаемое формой после выбора
данного пункта. По умолчанию значение поля равно значению тега <OPTION>, то
есть атрибут VALUE может быть опущен.
Добавим HTML-код, создающий раскрывающийся список для выбора одного
варианта:
Какие браузеры для просмотра web-страниц существуют?
<SELECT NAME=”browser”>
<OPTION SELECTED > Internet Explorer
<OPTION> Netscape Navigator
<OPTION> Opera
<OPTION> Neo Planet
</SELECT>
<BR>
Текстовая область. Создается такая область с помощью тега <TEXTAREA>
с обязательными атрибутами: NAME, задающим имя объекта; ROWS,
определяющим число строк; COLS, определяющим число столбцов.
Добавим на страницу текстовую область:
Какую еще информацию вы хотели бы видеть на нашем
сайте? <BR>
<TEXTAREA NAME=”dopolnenie” ROWS=4 COLS=30>
</TEXTAREA>
<BR>
Таким образом, определены основные элементы языка HTML, которые
являются необходимыми для создания баз данных.
Основы Visual Basic Script (VBScript)
Для управления элементами HTML-документов и самим браузером,
генерации новых документов в безе данных, организации диалогового
Хабаровск, 2007
Учебные материалы к элективным курсам по информатике для 10 - 11 классов, выпуск 4
взаимодействия с пользователем, выполнения каких-либо расчетов и обработки
данных в HTML была предусмотрена интеграция со специальными языками
программирования. Программы, написанные на этих языках, называют сценариями
(scripts). Языком программирования сценариев является Visual Basic Script.
Ввод и вывод данных
Visual Basic Script – язык сценариев (скриптов) для HTML-документов. В
Visual Basic Script существуют методы для ввода и вывода данных:
alert(), confirm().
alert
Данный метод позволяет выводить диалоговое окно с заданным сообщением
и кнопкой OK. Синтаксис выражения имеет вид:
alert(“сообщение”)
Сообщение может быть данными любого типа: строковая константа (в этом
случае она заключается в кавычки), число, переменная или выражение.
Диалоговое окно закрывается при нажатии на кнопку OK. До тех пор, пока
окно не закрыто, переход к другим окнам невозможен.
confirm
Метод confirm позволяет вывести диалоговое окно с сообщением и двумя
кнопками – OK и Отмена (Cancel). В отличие от метода alert этот метод
возвращает логическую величину, значение которой зависит от нажатой кнопки.
Если пользователь щелкнет по кнопке OK, то возвращается значение true, если же
он щелкнул по кнопке Отмена, то возвращается значение false. Возвращаемое
значение можно обрабатывать в программе и, следовательно, создавать эффект
интерактивности. Синтаксис выражения имеет вид:
confirm(“сообщение”)
Типы данных
Типы данных
Примеры
Описание значений
Строковый или
“Привет”
Последовательность символов, заключенных в
символьный
кавычки двойные или одинарные
Числовой
3.14
Число, последовательность цифр, перед
-567
которой может быть указан знак, целая и
дробная части разделяются точкой
Логический
True, false
Возможны только два значения
Null
Отсутствие какого-либо значения
Объект (object)
Программный объект, определяемый своими
свойствами
Функция (function)
Программный код, выполнение которого может
возвращать некоторое значение
Переменные и оператор присваивания
Правила именования переменных стандартные. Оператор присваивания
обозначается знаком =. Переменная может иметь значения различных типов и
неоднократно их изменять. Переменные, описанные в программе, являются
глобальными. Переменные, описанные внутри функции – локальные.
Комментарии
// - одна строка, стоящая после этого знака, считается комментарием.
/* любое количество строк */ – все, что заключено между этими символами,
считается комментарием.
Хабаровск, 2007
Учебные материалы к элективным курсам по информатике для 10 - 11 классов, выпуск 4
<!-- любое количество строк --> – все, что заключено между этими
символами, считается комментарием.
Операторы условного перехода
if (условие)
{код, который выполняется, если условие истинно}
else
{код, который выполняется, если условие ложно}
Операторы цикла
for
([начальное
выражение];
[условие];
[выражение
обновления])
{
код тела цикла
}
Оператор цикла работает следующим образом: сначала выполняется
начальное выражение, затем проверяется условие. Если оно выполнено, то цикл
прекращается, иначе выполняется код тела цикла. После этого выполняется
выражение обновления. Далее снова проверяется условие, и все повторяется.
Функции
Описание функции имеет следующий синтаксис:
function имя_функции (параметры)
{
код тела функции
}
Если требуется, чтобы функция возвращала некоторое значение, то в ее теле
используется оператор возврата return с указанием справа от него того, что
следует возвратить. В качестве возвращаемой величины может выступать любое
выражение. Оператор return может встречаться в теле функции несколько раз.
Встроенные объекты
Объекты представляют собой программные единицы, обладающие
некоторыми свойствами. Встроенные объекты имеют фиксированные названия и
свойства (параметры).
Например: Отображение данных внешнего текстового файла mybd.txt в
HTML-документе. <object id=mybdcontrol classid="clsid:333C7BC4460F-11D0-BC04-0080C7055A83" width=800 height=100>
<param name=FieldDelim value="|">
<param name=DataURL value="mybd.txt">
<param name=UseHeader value="true">
</object>
Основы создания сценариев на Visual Basic Script
Расположение сценариев
Сценарий в HTML-документе можно разместить несколькими способами.
Стандартным является размещение сценария в контейнерном теге <SCRIPT>, то
Хабаровск, 2007
Учебные материалы к элективным курсам по информатике для 10 - 11 классов, выпуск 4
есть между тегами <SCRIPT> и </SCRIPT>. Встречая тег <SCRIPT>, браузер
«понимает», что за ним начинается код сценария. Заключительный тег
</SCRIPT> указывает браузеру, что код сценария закончился.
Контейнерный тег <SCRIPT> может содержать следующие атрибуты:
 language – язык сценария. В нашем случае значение этого атрибута будет
“VBScript”.
Пример:
<SCRIPT language=”VBScript”>
…. // код сценария
</SCRIPT>
Если необходимо, чтобы сценарий загрузился в браузер прежде, чем
загрузятся элементы HTML-документа, то его следует расположить в верхней
части HTML-кода. В этом случае сценарий обычно располагают в контейнере
<HEAD>.
Если же требуется, чтобы сценарий загрузился после загрузки всех
элементов HTML-документа, то возможны следующие два варианта.
Во-первых, можно расположить сценарий в конце HTML-документа.
Во-вторых, можно использовать атрибут-событие onload в контейнерном
теге <BODY>. В последнем случае значением атрибута onload обычно является
строка, содержащая имя функции. Определение этой функции, как правило,
содержится в контейнере <SCRIPT>, размещенном в заголовке HTMLдокумента.
Обработка событий
Одним из главных назначений сценариев в HTML-документе является
обработка событий, таких как щелчок кнопкой мыши на элементе документа,
перемещение указателя мыши на элемент или с элемента, нажатие клавиши и т.п.
Большинство тегов HTML имеют специальные атрибуты, определяющие события,
на которые могут реагировать соответствующие элементы. Например, щелчок
левой кнопкой мыши – onclick; изменение в поле ввода данных – onchange.
Итак, значением атрибута-события является код сценария, заключенный в
кавычки. Этот сценарий называется также обработчиком события. Если обработчик
события содержит несколько выражений, то они разделяются точкой с запятой.
Чаще всего обработчиком событий является указание имени функции, где и
содержится код сценария обработки события.
Различные варианты оформления обработки событий:
<HTML>
…
<SCRIPT>
function имя_функции()
{
…..
}
function значение_id.событие()
{
….
Хабаровск, 2007
Учебные материалы к элективным курсам по информатике для 10 - 11 классов, выпуск 4
}
</SCRIPT>
……
<ТЕГ ID=”значение_id”>
<ТЕГ событие=”имя_функции”>
<ТЕГ событие=”код_сценария”>
…..
</HTML>
Объекты, управляемые сценариями
Предметом деятельности сценария являются объекты окна браузера и
HTML-документа, загруженного в него.
HTML-документ отображается в окне браузера. Окну браузера соответствует
объект window, а HTML-документу, загруженному в окно, соответствует объект
document. Эти объекты содержат в своем составе другие объекты. Все множество
объектов имеет иерархическую структуру.
Объекты могут находиться в отношении вложенности (подчиненности).
Чтобы указать конкретный объект, требуется перечислить все содержащие его
объекты, начиная с объекта самого верхнего уровня:
объект1.объект2……объектN.
Итак, при загрузке HTML-документа в браузер создается его объектная
модель. В объектной модели документа все объекты сгруппированы в так
называемые коллекции. Например, коллекция всех изображений документа имеет
имя images, коллекция всех форм – forms. Это примеры частных или тематических
коллекций. Кроме того, существует коллекция всех элементов документа, которая
называется
all.
Рассмотрим
способ
обращения
к
объекту:
document.коллекция.id_объекта.
Коллекция имеет свойство length – количество элементов в коллекции.
Создание массива
Новый объект массива создается следующим образом:
Имя_массива= new Array ([длина_массива])
У объекта Array имеется свойство length, значением которого является
длина массива. Чтобы получить значение этого свойства, необходимо использовать
выражение имя_массива.length.
Создав массив, можно присвоить значения его элементам, используя для
этого оператор присваивания. К элементам массива обращаются по индексу:
имя_массива[индекс].
Рассмотрим пример создания массива Dim, содержащего в качестве
элементов вкладки базы данных.
Dim Name(6)
Name(0)="Физико-математическая школа"
Name(1)="Администрация и Преподаватели"
Name(2)="Вожатые"
Name(3)="Слушатели"
Name(4)="Читаемые курсы"
Name(5)="Сортировка" .
Хабаровск, 2007
Учебные материалы к элективным курсам по информатике для 10 - 11 классов, выпуск 4
Фреймы
Фрейм представляет собой прямоугольную область окна браузера, в которую
можно загрузить HTML-документ. Разбиение окна на фреймы происходит с
помощью HTML-кода, содержащегося в отдельном HTML-документе, который
называется установочным. Установочный файл содержит только теги разметки
фреймов, то есть их относительное расположение, размеры, ссылки на
загружаемые в них документы и другие параметры.
Плавающие фреймы
Для вставки одного HTML-документа в тело другого служит контейнерный
тег <IFRAME>:
<IFRAME src=”адрес_документа”> </IFRAME>
Внешне этот элемент выглядит как прямоугольная область (с полосами
прокрутки или без них), в которой отображается документ из некоторого HTMLфайла. Такие окна иногда называют плавающими фреймами.
HTML-документы, загружаемые в плавающие фреймы, могут иметь
сценарии и другие средства, присущие любому HTML-документу.
Таким образом, определены основные элементы языка VBScript, которые
являются необходимыми для создания баз данных.
Проектирование баз данных с помощью HTML
Для создания базы данных необходимы следующие программные продукты:
1. Стандартная программа Windows – Блокнот для создания HTMLдокументов и хранения информации о слушателях.
2. Internet Explorer (браузер) как программа для просмотра HTMLдокументов.
3. Проигрыватель Window Media или Winamp.
4. Программа Microsoft Office Picture Manager или ASDSee для просмотра
фотографий и рисунков.
Рассмотрим проектирование базы данных с помощью HTML на примере
создания структуры физико-математической школы. Создание базы данных,
раскрывающей структуру Хабаровской краевой летней физико-математической
школы, позволяет определить не только особенности ее организации, но и
раскрыть индивидуальное своеобразие творческого коллектива администрации,
преподавателей, вожатых и слушателей.
База данных состоит из шести HTML-документов (Первая страница.html,
Администрация и Преподаватели.html, Вожатые.html, Слушатели.html,
Читаемые курсы.html, Сортировка данных.html), содержащих информацию об
авторах ее создания, об администрации, преподавателях, вожатых, слушателях и
читаемых курсах в физико-математической школе. Все HTML-документы и
дополнительные внешние данные необходимо сохранять в отдельной папке.
Для создания базы данных необходимы следующие внешние данные:
1. Текстовый документ в Блокноте с названием mybd.txt, где располагаются
данные о слушателях.
2. Фотографии всех преподавателей и слушателей в формате .jpg или .gif. В
данном случае это файлы с именами: ВВ.jpg, ИА.jpg, НП.jpg, 1.gif,
ДВГГУ.jpg.
Хабаровск, 2007
Учебные материалы к элективным курсам по информатике для 10 - 11 классов, выпуск 4
3. Шесть музыкальных фрагментов для каждой из страниц базы данных. В
данном случае это файлы с именами: K.mp3, L.mp3, M.mp3, P.mp3, You.mp3,
LIFE.mp3.
4. Рисунки, которые являются фоном для HTML-документов. В данном случае
это файлы с именами: фон_Альбатрос.jpg, фон_Альбатрос1.jpg,
фон_Альбатрос2.jpg.
Первая страница HTML-документа
<html>
<!--формирование структуры заголовка HTMLдокумента-->
<head>
<!—название заголовка в окне браузера-->
<title>Первая страница</title>
<!--стиль оформления границ HTML-документа-->
<style>
body {border-width:30}
#p1 {border-style:double;border-width:10}
</style>
</head>
<!--основной текст HTML-документа-->
<body background="фон_Альбатрос1.jpg"> <center>
<p id=p1>
<!--установка параметров шрифта (форма, цвет,
размер)-->
<font face="Monotype Corsiva" color="blue" size=+2>Учебная
информационная система "ХКЛФМШ" </font>
<font face="Monotype Corsiva" color="black" size=+2>
<br>выполнена слушателями
<br> Хабаровской краевой летней физикоматематической школы
<br> в 2007 году в рамках занятий по курсу <br>
<font face="Monotype Corsiva" color="blue" size=+2>"HTML:
работа с базами данных в примерах". </font>
<br>Она является незавершенным продуктом,
демонстрирующим возможности разработки специальных
приложений с помощью языка разметки гипертекста HTML.</font>
</p>
<p><u><b>Авторский коллектив слушателей ХКЛФМШ:</b></u>
<p>Семенова Юлия,
<p>Иванов Петр и т.д.
<p><u><b>Преподаватель: </b></u>Табачук Наталья Петровна
<p>E-mail: tabachuk@yandex.ru
Хабаровск, 2007
Учебные материалы к элективным курсам по информатике для 10 - 11 классов, выпуск 4
<!--вставка музыкального фрагмента в HTML-документ->
<p><embed src=You.mp3 width=100 height=40>
</html>
Создание таблицы «Администрация и Преподаватели»
<html>
<head>
<title>Преподаватели</title>
</head>
<!--основной текст HTML-документа-->
<body background="фон_Альбатрос.jpg">
<!--создание таблицы-->
<center>
<table id="mytab" width="600"
border="4"background="фон_Альбатрос1.jpg">
<!--заголовок таблицы-->
<caption>
<font face="Monotype Corsiva" color="blue" size=+3>
Список преподавателей
</caption>
<tr>
<th scope="row" bgcolor="violet"
align="center"> Фамилия</th>
<td bgcolor="gold" align="center"> Имя</td>
<td bgcolor="gold" align="center"> Отчество</td>
Хабаровск, 2007
Учебные материалы к элективным курсам по информатике для 10 - 11 классов, выпуск 4
<td bgcolor="gold" align="center"> Дата рождения</td>
<td bgcolor="gold" align="center"> Должность</td>
<td bgcolor="gold" align="center"> Место работы</td>
<td bgcolor="gold" align="center"> Фотография</td>
<td bgcolor="violet" align="center"> Читаемый курс</td>
</tr>
<tr>
<th scope="row"> Мендель</th>
<td> Виктор</td>
<td> Васильевич</td>
<td> </td>
<td> доцент кафедры геометрии</td>
<td> <img src="ДВГГУ.jpg" width="115"
height="150"></td>
<td> <img src="ВВ.jpg" width="115" height="150"></td>
<td > <a href="Читаемые
курсы.html">Математика</a></td>
</tr>
<tr>
<th scope="row"> Ледовских</th>
<td> Ирина</td>
<td> Анатольевна</td>
<td> </td>
<td> доцент кафедры информатики и информационных
технологий</td>
<td> <img src="ДВГГУ.jpg" width="115"
height="150"></td>
<td> <img src="ИА.jpg" width="200" height="150"></td>
<td > <a href="Читаемые
курсы.html">Информатика</a></td>
</tr>
<tr>
<th scope="row"> Табачук</th>
<td> Наталья</td>
<td> Петровна</td>
<td> </td>
<td> старший преподаватель кафедры информатики и
информационных технологий</td>
<td> <img src="ДВГГУ.jpg" width="115"
height="150"></td>
<td> <img src="НП.jpg" width="100" height="150"></td>
Хабаровск, 2007
Учебные материалы к элективным курсам по информатике для 10 - 11 классов, выпуск 4
<td > <a href="Читаемые
курсы.html">Информатика</a></td>
</tr>
</table>
<!--создание кнопки-->
<br><br>
<button onclick="myselection()"> Подсчет количества
преподавателей в ХКЛФМШ</button>
<!--скрипт, содержащий функцию
для подсчета количества преподавателей-->
<script>
function myselection() {
var t;
t=document.all.mytab.rows.length
<!--вывод диалогового окна с результатом подсчета-->
alert("Количество всех преподавателей: "+(t-1))
}
</script>
<!--создание кнопки-->
<br><br>
<button onclick="myselection1()"> Подсчет количества всех ячеек в
таблице</button>
<!--скрипт, содержащий функцию
для подсчета количества всех ячеек в таблице-->
<script>
function myselection1() {
var s;
s=document.all.mytab.cells.length
<!--вывод диалогового окна с результатом подсчета-->
alert("Количество всех ячеек: "+s)
}
</script>
<!--вставка музыкального фрагмента в HTML-документ->
<br><br>
<embed src=L.mp3 width=100 height=40>
</body>
</html>
Хабаровск, 2007
Учебные материалы к элективным курсам по информатике для 10 - 11 классов, выпуск 4
Создание таблицы «Вожатые»
<html>
<head>
<title>Вожатые</title>
</head>
<body background="фон_Альбатрос1.jpg">
<!--создание таблицы-->
<center>
<table id="mytab" width="600" border="4">
<caption>
<font face="Monotype Corsiva" color="blue" size=+3>
Список вожатых
</caption>
<tr>
<th scope="row" bgcolor="violet"
align="center"> Фамилия</th>
<td bgcolor="gold" align="center"> Имя</td>
<td bgcolor="gold" align="center"> Отчество</td>
<td bgcolor="gold" align="center"> Дата рождения</td>
<td bgcolor="gold" align="center"> Увлечения</td>
<td bgcolor="gold" align="center"> Фотография</td>
</tr>
Хабаровск, 2007
Учебные материалы к элективным курсам по информатике для 10 - 11 классов, выпуск 4
<tr>
<th scope="row"> Смехнова</th>
<td> Оксана</td>
<td> Анатольевна</td>
<td> </td>
<td> чтение книг</td>
<td> <img src="ОА.jpg" width="150" height="150"></td>
</tr>
<tr>
<th scope="row"> Володькин</th>
<td> Евгений</td>
<td> Геннадьевич</td>
<td> </td>
<td> игра на гитаре</td>
<td> <img src="ЕГ.jpg" width="150" height="150"></td>
</tr>
<tr>
<th scope="row"> Чернявская</th>
<td> Галина</td>
<td> Анатольевна</td>
<td> </td>
<td> </td>
<td> <img src="ГА.jpg" width="150" height="150"></td>
</tr>
</table>
<!--создание кнопки-->
<br><br>
<button onclick="myselection()"> Количество вожатых в
ХКЛФМШ</button>
<!--скрипт, содержащий функцию
для подсчета количества вожатых-->
<script>
function myselection() {
var t;
t=document.all.mytab.rows.length
<!--вывод диалогового окна с результатом подсчета-->
alert("Количество всех преподавателей: "+(t-1))
}
</script>
<!--вставка музыкального фрагмента в HTML-документ->
<br><br>
Хабаровск, 2007
Учебные материалы к элективным курсам по информатике для 10 - 11 классов, выпуск 4
<embed src=L.mp3 width=100 height=40>
</body>
</html>
Создание формы «Полный список слушателей».
Создание запросов по поиску информации в базе данных
Перед создание формы необходимо заполнить текстовый
документ (в Блокноте) и сохранить его с названием mybd.txt.
<html>
<head><title>Список слушателей</title></head>
<body background="фон_Альбатрос1.jpg" text="blue">
<p><center>
<font face="Monotype Corsiva" size=+3>
<marquee behavior=alternate>
Полный список слушателей</marquee>
Хабаровск, 2007
Учебные материалы к элективным курсам по информатике для 10 - 11 классов, выпуск 4
</font>
<p>
<!--создание текстовой области со списком всех
слушателей-->
<textarea id="mytext1" rows=7 cols=40>
1.Иванов Петр Петрович
2.Семенова Юлия Андреевна
3.Ивочкин Владимир Владимирович
4.Анисова Марина Андреевна
5.Жиганова Ольга Анатольевна
6.Фамилия Имя Отчество слушателя6
7.Фамилия Имя Отчество слушателя7
</textarea>
<!--связь внешних данных (mybd.txt) с HTMLдокументом-->
<object id=mybdcontrol classid="clsid:333C7BC4-460F-11D0-BC040080C7055A83" width=800 height=100>
<!--параметр FieldDelim – разделитель ячеек со
значением(|)>
<param name=FieldDelim value="|">
<!--параметр DataURL – URL-адрес текстового файла с
данными mybd.txt-->
<param name=DataURL value="mybd.txt">
<!--параметр UseHeader – определяет, содержит ли
первая строка в текстовом файле имена полей>
<param name=UseHeader value="true">
</object>
<hr>
<!--создание таблицы и помещение в каждую из ее
ячеек текстовых полей, отображающих данные из
текстового файла mybd.txt-->
<table width=80% align="left">
<tr><th align="left">Код слушателя</th>
<td><input type=text datasrc="#mybdcontrol" datafld="Код
слушателя"></td>
</tr>
<tr><th align="left">Фамилия</th>
<td><input type=text datasrc="#mybdcontrol"
datafld="Фамилия"></td>
</tr>
Хабаровск, 2007
Учебные материалы к элективным курсам по информатике для 10 - 11 классов, выпуск 4
<tr><th align="left">Имя</th>
<td><input type=text datasrc="#mybdcontrol"
datafld="Имя"></td>
</tr>
<tr><th align="left">Отчество</th>
<td><input type=text datasrc="#mybdcontrol"
datafld="Отчество"></td>
</tr>
<tr><th align="left">Школа</th>
<td><input type=text datasrc="#mybdcontrol"
datafld="Школа"></td>
</tr>
<tr><th align="left">Класс</th>
<td><input type=text datasrc="#mybdcontrol"
datafld="Класс"></td>
</tr>
<tr><th align="left">Дата рождения</th>
<td><input type=text datasrc="#mybdcontrol" datafld="Дата
рождения"></td>
</tr>
<tr><th align="left">Увлечения</th>
<td><input type=text datasrc="#mybdcontrol"
datafld="Увлечения"></td>
</tr>
<tr><th align="left">Фото</th>
<td><span datasrc="#mybdcontrol" datafld="Фото"
dataformatas="html"></span></td>
</tr>
<tr><th align="left">Достижения и впечатления</th>
<td><input type=text datasrc="#mybdcontrol"
datafld="Достижения и впечатления" size=80></td>
</tr>
</table>
<p>
<!--кнопки перемещения по записям-->
<input name=cmdFirst type=button value=" << " onclick="First()">
Хабаровск, 2007
Учебные материалы к элективным курсам по информатике для 10 - 11 классов, выпуск 4
<input name=cmdPrevious type=button value=" < "
onclick="Previous()">
<input name=cmdNext type=button value=" > " onclick="Next()">
<input name=cmdLast type=button value=" >> " onclick="Last()">
</body>
<!--методы перемещения по записям базы данных-->
<script>
function First(){
// к первой записи
mybdcontrol.recordset.moveFirst()
}
function Previous(){
if (!mybdcontrol.recordset.bof)
mybdcontrol.recordset.movePrevious()
}
function Next(){
записи
if (!mybdcontrol.recordset.eof)
mybdcontrol.recordset.moveNext()
}
function Last(){
mybdcontrol.recordset.moveLast()
}
</script>
// к предыдущей записи
//к следующей
//к последней записи
<p><br>
<!--создание поля со списком-->
<h2>ПОИСК</h2>
<p><h3>Поле
<select name="FLD">
<option value="Код слушателя">Код слушателя
<option value="Фамилия">Фамилия
<option value="Имя">Имя
<option value="Отчество">Отчество
<option value="Школа">Школа
<option value="Класс">Класс
<option value="Дата рождения">Дата рождения
<option value="Увлечения">Увлечения
</select>
<!--создание текстового поля для ввода значения
поиска-->
<br><br>Значение
Хабаровск, 2007
Учебные материалы к элективным курсам по информатике для 10 - 11 классов, выпуск 4
<input name="INP" value="" type="text">
<!--создание кнопки-->
<p>
<button onclick="filter()">Применить</button>
<!--скрипт для осуществления поиска значений в
текстовом файле mybd.txt и вывода полученных
данных в текстовых полях формы-->
<script>
var obj='<object id="mybdcontrol"'
obj+='classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">'
obj+='<param name="FieldDelim" value="|">'
obj+='<param name="DataURL" value="mybd.txt">'
obj+='<param name="UseHeader" value=true>'
function filter(){
var cpar=""
if (INP.value){
cpar='<param name="FilterColumn" value="'+FLD.value+'">'
cpar+='<param name="FilterValue" value="'+INP.value+'">'
cpar+='<param name="FilterCriterion" value="=">'
cpar+='<param name="CaseSensitive" value=false>'
}
document.all.mybdcontrol.outerHTML=obj+cpar+ '</object>'
}
</script>
<!--вставка музыкального фрагмента в HTML-документ->
<p><embed src=P.mp3 width=100 height=40>
</html>
Хабаровск, 2007
Учебные материалы к элективным курсам по информатике для 10 - 11 классов, выпуск 4
Создание таблицы «Читаемые курсы»,
содержащей гиперссылки на другие HTML-документы
<html>
<head>
<title>Читаемые курсы</title>
</head>
<body background="фон_Альбатрос2.jpg">
<center>
<table id="mytab" width="850" border="4">
<caption>
<font face="Monotype Corsiva" color="blue" size=+3>
Читаемые курсы
</caption>
<tr>
<th scope="row" bgcolor="yellow"
align="center"> Предметная область </th>
<td bgcolor="yellow" align="center"> Название курса</td>
<td bgcolor="yellow" align="center"> Фамилия Имя
Отчество Преподавателя</td>
</tr>
<tr>
<th scope="row" rowspan=3> Математика</th>
<td > Геометрия окружности и многоугольника</td>
<td > <a href="Администрация и
Преподаватели.html">Мендель Виктор Васильевич</a></td>
</tr>
<tr>
<td> Теория вероятностей и математическая
статистика</td>
<td > <a href="Администрация и
Преподаватели.html">Карпова Ирина Викторовна</a></td>
</tr>
<tr>
<td> Элементарные функции и их свойства</td>
<td > <a href="Администрация и
Преподаватели.html">Поличка Анатолий Егорович</a></td>
</tr>
<tr>
Хабаровск, 2007
Учебные материалы к элективным курсам по информатике для 10 - 11 классов, выпуск 4
<th scope="row" rowspan=3> Информатика</th>
<td > Язык программирования Pascal в примерах</td>
<td > <a href="Администрация и
Преподаватели.html">Ледовских Ирина Анатольевна</a></td>
</tr>
<tr>
<td> HTML: работа с базами данных в примерах</td>
<td > <a href="Администрация и
Преподаватели.html">Табачук Наталья Петровна</a></td>
</tr>
<tr>
<td> Олимпиадные задачи</td>
<td > <a href="Администрация и
Преподаватели.html">Богоутдинов Дмитрий Гилманович</a></td>
</tr>
<tr>
<th scope="row" rowspan=3> Физика</th>
<td > Задачи-оценки и методы их решения</td>
<td > <a href="Администрация и
Преподаватели.html">Лукина Галина Степановна</a></td>
</tr>
<tr>
<td> Методы решения экспериментальных задач</td>
<td > <a href="Администрация и
Преподаватели.html">Гаврилов Андрей Владимирович</a></td>
</tr>
<tr>
<td> Методы расчета электрических цепей</td>
<td > <a href="Администрация и
Преподаватели.html">Мазур Александр Игоревич</a></td>
</tr>
</table>
<!--создание кнопки-->
<br><br>
<button onclick="myselection()"> Подсчет количества курсов в
таблице</button>
<!--скрипт, содержащий функцию
для подсчета количества курсов-->
<script>
Хабаровск, 2007
Учебные материалы к элективным курсам по информатике для 10 - 11 классов, выпуск 4
function myselection() {
var t;
t=document.all.mytab.rows.length
<!--вывод диалогового окна с результатом подсчета-->
alert("Количество курсов: "+(t-1))
}
</script>
<!--вставка музыкального фрагмента в HTML-документ->
<p>
<embed src=K.mp3 width=100 height=40>
</html>
Сортировка данных в таблице.
Расположение списка фамилий слушателей в алфавитном
порядке
<html>
<head><title>Сортировка данных таблицы</title></head>
<object id="mybdcontrol" classid="clsid:333C7BC4-460F-11D0-BC040080C7055A83" width=800 height=100>
<param name="FieldDelim" value="|">
<param name="DataURL" value="mybd.txt">
<param name="UseHeader" value="true">
<param name="SortColumn" value="Фамилия">
<param name="SortAscending" value=1>
</object>
<body background="фон_Альбатрос2.jpg">
<center>
Хабаровск, 2007
Учебные материалы к элективным курсам по информатике для 10 - 11 классов, выпуск 4
<font face="Monotype Corsiva" color="blue"
size=+3>Расположение списка фамилий слушателей в алфавитном
порядке</font>
<br><p>
<!--создание таблицы и помещение в нее
отсортированных по фамилии данных из текстового
файла mybd.txt-->
<table datasrc=#mybdcontrol border=5 >
<thead>
<th>Код слушателя</th>
<th onclick="Sort('Фамилия')">Фамилия</th>
<th>Имя</th>
<th>Отчество</th>
<th>Школа</th>
<th>Класс</th>
<th>Дата рождения</th>
<th>Фото</th>
<th>Увлечения</th>
<th>Достижения и впечатления</th>
</thead>
<tr>
<td><span datafld="Код слушателя"></span></td>
<td><span datafld="Фамилия"></span></td>
<td><span datafld="Имя"></span></td>
<td><span datafld="Отчество"></span></td>
<td><span datafld="Школа"></span></td>
<td><span datafld="Класс"></span></td>
<td><span datafld="Дата рождения"></span></td>
<td><span datafld="Фото"
dataformatas="html"></span></td>
<td><span datafld="Увлечения"></span></td>
<td><span datafld="Достижения и
впечатления"></span></td>
</tr>
</table>
<script>
<!--сохранение тегов, вложенных в <object>, в
переменной-->
var x=document.all.mybdcontrol.innerHTML
var obj='<object id="mybdcontrol" classid="clsid:333C7BC4-460F11D0-BC04-0080C7055A83">'+x
Хабаровск, 2007
Учебные материалы к элективным курсам по информатике для 10 - 11 классов, выпуск 4
<!--функция сортировки данных по значению столбца
field>
function Sort(field){
var y=document.all.mybdcontrol
<!--свойство outerHTML используется для перерисовывания
таблицы в соответствии с новым порядком следования
строк>
y.outerHTML=obj+'<param name="SortColumn"
value="'+field+'"></object>'
}
</script>
<!--вставка музыкального фрагмента в HTML-документ->
<p><embed src=M.mp3 width=100 height=40>
</html>
Объединение HTML-документов в единый проект,
в единую учебную информационную систему
«ХКЛФМШ», создаваемую слушателями
Хабаровской краевой летней физико-математической
школы в 2007 году в рамках занятий по курсу
«HTML: работа с базами данных в примерах»
<html>
<head><title>Главная страница</title>
</head>
<h1><center>
<font
face="Monotype
Corsiva"
color="red"
size=+3>Хабаровская краевая летняя физико-математическая
школа
<br><p>
Хабаровск, 2007
Учебные материалы к элективным курсам по информатике для 10 - 11 классов, выпуск 4
<body background="фон_Альбатрос1.jpg">
<!--создание
элемента
управления
TabStrip
для
формирования вкладок-->
<object id=myTabStrip classid="clsid:1EFB6596-857C-11D1-B16A00C0F0283628" width=980 height=70>
</object>
<!--создание
плавающего
фрейма,
в
котором
отображается HTML-документ «Первая страница.html»->
<br>
<iframe id=myFrame SRC="Первая страница.html" width=980
height=500>
</iframe>
<!--скрипт для создания надписей вкладок и ссылок на
соответствующие HTML-документы-->
<script language="VBScript">
Dim Name(6)
//массив надписей для закладок
Name(0)="Физико-математическая школа"
Name(1)="Администрация и Преподаватели"
Name(2)="Вожатые"
Name(3)="Слушатели"
Name(4)="Читаемые курсы"
Name(5)="Сортировка"
Dim Refers(6)
//массив ссылок
Refers(0)="Первая страница.html"
Refers(1)="Администрация и Преподаватели.html"
Refers(2)="Вожатые.html"
Refers(3)="Слушатели.html"
Refers(4)="Читаемые курсы.html"
Refers(5)="Сортировка данных.html"
myTabStrip.Font.Name="Arial"
myTabStrip.Font.Size=+15
myTabStrip.MultiRow="true"
Sub Window_onload()
//создание вкладок и надписей на
них
For i=1 To 6
myTabStrip.Tabs(i).Caption=Name(i-1) //надпись на вкладке
if i<6 Then myTabStrip.Tabs.Add()
//добавление вкладок
Next
End Sub
Хабаровск, 2007
Учебные материалы к элективным курсам по информатике для 10 - 11 классов, выпуск 4
Sub myTabStrip_Click()
//щелчок на вкладке
document.all.myFrame.src=Refers(myTabStrip.SelectedItem.Index-1)
end sub
</script>
</html>
Задачи
1. Создайте HTML-страницу о себе, включив поля: фамилия, имя, отчество,
фотография, дата рождения, знак зодиака, темперамент, хобби, учебное
учреждение, любимый школьный предмет, достижения, впечатления.
2. Дополните базу данных HTML-страницей о себе.
Используйте алгоритм построения сортированного списка слушателей по
фамилиям для решения задачи сортировки по классам данных о слушателях.
Хабаровск, 2007