ПОСЭВМ: Web-программирование http://www.transmarket.net/education

Программное обеспечение современных ЭВМ

Web-программирование

Лабораторный практикум

ОБЩИЕ ПОЛОЖЕНИЯ

Методические указания предназначены для изучения и практического освоения

студентами всех форм обучения основ web-программирования как современных

технологий разработки Web-приложений и Web-интерфейсов к базам данных в рамках изучения курса “Программное обеспечение современных ЭВМ”.

Цель и задачи курса лабораторных работ Цель курса - приобретение студентами практических знаний о Web-программировании, изучение технологий НТМL, CSS, JavaScript, PHP, MySQL для разработки Webприложений и Web-интерфейсов к базам данных.

Задачей курса является приобретение практических навыков применения webтехнологиях при разработке Интернет приложений.

Структура курса Курс состоит из восьми лабораторных работ: «Представление текстовых документов в формате HTML», «HTML верстка».

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

Для получения зачета по каждой работе студент сдает преподавателю полностью оформленный отчет с выводами и рекомендациями, а также 3,5-дюймовую дискету в формате MS–DOS/Windows, проверенную на наличие вирусов, с текстами разработанных программ, файлами данных и текстом отчета.

Отчет выполняют на белой бумаге формата A4 (210 x 297 мм). Текст размещают только с одной стороны листа. Поля страницы со всех боков – 20 мм. Для набора текста отчета используют редактор MS Word 97: шрифт Times New Roman, 12 пунктов. Межстрочный интервал: полуторный – для текста отчета, одинарный – для листингов программ, таблиц и распечаток данных.

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

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

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

ПОСЭВМ: Web-программирование http://www.transmarket.net/education Лабораторная работа №

ПРЕДСТАВЛЕНИЕ ТЕКСТОВЫХ ДОКУМЕНТОВ В ФОРМАТЕ

HTML Цель работы – изучение правил формирования HTML-документа, представление текстового документа в формате HTML.

Порядок проведения работы 1. В текстовом редакторе "Блокнот" создать файл с именем title.html и используя теги HTML, HEAD, TITLE и BODY задать структуру HTML документа с параметрами, указанными в таблице 1 согласно номеру варианта. Просмотреть результат в окне браузера.

Таблица Параметры HTML документа Варианты заданий Параметр 1 2 3 4 5 6 7 8 9 Левое поле 10 10 5 5 0 0 5 10 0 документа Верхнее поле 10 5 5 0 0 5 10 0 10 документа Светло- Темно- Светло- Тёмно- Тёмно- Тёмно- КоричЦвет фона Розовый Голубой Желтый серый серый зелёный зелёный красный синий невый Цвет Тёмно- Тёмно- Тёмно- Темно- Светло- Корич- СветлоЖелтый Голубой Розовый ссылок синий красный зелёный серый зелёный невый серый Цвет Светло- Светлопосещенн Черный Розовый Желтый Белый Красный Зеленый Серый Желтый серый зелёный ых ссылок Цвет ТёмноТёмно- Тёмно- Коричне активных Красный Синий Белый Желтый Серый Зеленый зелёны красный синий вый й ссылок Цвет Контрастный к фону текста 2. Используя теги заголовка H1 и H2 вывести в верхней части документа соответственно название дисциплины и номер лабораторной работы с выравниванием по центру.

3. С помощью тегов списков DL, UL и OL вывести список из пунктов "Тема лабораторной работы", "Руководители" и "Выполнили", с вложенным в него списком бригады, как показано на рисунке.

ПОСЭВМ: Web-программирование http://www.transmarket.net/education Рисунок. Титульная страница лабораторной работы №1.

4. В текстовом редакторе "Блокнот" создать файл с именем body.html. В верхней части документа поставить ссылку на документ title.html. Внизу документа title.html поставить две ссылки: ссылка «начало» ведет на начало документа body.html, ссылка «конец» ведет в конец документа body.html.

5. Используя теги заголовков, абзаца, списков и графических объектов, перевести данный документ (lab1.pdf) за исключением таблиц в формат HTML. Отформатировать полученный документ согласно варианту задания, приведенному в таблице 2, используя теги разметки текста B, I, U, TT и FONT. Графические объекты, необходимые для выполнения задачи находятся в папке lab1/pic/.

6. Внизу документа title.html между ссылками «начало» и «конец» добавить ссылку «копия экрана», ведущую на графический объект в документе body.html.

7. Сделать выводы по работе.

Номер варианта Жирны Жирны Жирны Курсив Курсив, Подчер Курси Подче Монош Подче Пункт ПОСЭВМ: Web-программирование http://www.transmarket.net/education 1. Тексты документов title.html и body.html в формате HTML.

2. Копии экранов с документами title.html и body.html.

3. Выводы по работе.

1. Что такое HTML? Что такое гипертекстовый документ? Что такое гиперссылка?

2. Что такое тег? Структура тега HTML. Формат записи тега HTML.

3. Привести структуру HTML документа. Описать назначение тегов,.

4. Что такое параметр тега? Формат записи параметра тега HTML.

5. Перечислить параметры тега.

6. Перечислить теги для представления текстовой информации и дать их описание.

7. Как представляются гиперссылки в HTML документе? Дать пример внутренних и внешних ссылок.

8. Перечислить виды списков, существующих в HTML. Привести теги, представляющие списки в HTML.

9. Что такое вложенные списки в HTML? Привести пример вложенного списка HTML.

10. Как включаются графические объекты в HTML документы? Перечислить параметры тега графического объекта.

ПОСЭВМ: Web-программирование http://www.transmarket.net/education Лабораторная работа №

ССЫЛКИ, ИЗОБРАЖЕНИЯ, ТАБЛИЦЫ, ФРЕЙМЫ И

МЕТАДАННЫЕ В HTML-ДОКУМЕНТАХ

Цель работы – изучение основных элементов HTML-документов и их использования при разработке web-страниц.

Задача работы – создать основные web-страницы сайта своей группы.

1. Создать файлы index.html (главная страница), news.html (страница новостей), albom.html (фотоальбом) и shedule.html (расписание). Используя теги,, и описать общую структуру для каждого созданного HTML документа. Для главной страницы используя тег указать метаданные для поисковых систем (краткое описание содержимого сайта и ключевые слова).

2. Используя таблицы разбить экран главной страницы на три полосы, как показано на рисунке 1. (При этом использовать вложенные таблицы, а не атрибуты COLSPAN и ROWSPAN). Цвет фона полосы 3 – белый, полос 1 и 2 – произвольный, но отличный от белого.

3. Заполнить каждую из полос данными соответственно рисунку 1:

3.1. Используя графический редактор Adobe Photoshop создать логотип и карту сайта (перечень основных разделов, продублировав меню рис.1) и сохранив его в оптимальном формате (JPEG или GIF) вывести в полосе 1 документа в качестве заголовка сайта.

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

3.2. В полосе 2 вывести указанное на рис.1 графическое меню, содержащие ссылки на другие страницы сайта (каждый элемент меню это рисунок в формате GIF изображающий кнопку соответствующего пункта меню, пример кнопки представлен на рис. 2.). Для создания кнопок использовать графический редактор Adobe Photoshop.

ПОСЭВМ: Web-программирование http://www.transmarket.net/education Подобное меню должно присутствовать на каждой странице сайта. Для активной атраницы цвет соответствующей кнопки изменить на красный.

3.3. Заполнить полосу 3 текстовыми данными, соответсвенно рис. 1.

4. На странице расписания (shedule.html) вывести расписание занятий в следующем виде (для объединения ячеек использовать атрибуты COLSPAN и ROWSPAN):

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

6. На странице новостей вывести список новостей (придумать 6-7 пунктов) с оглавлением в виде ссылок на соответствующие новостям даты. При выборе в оглавлении ссылки должен осуществляться переход внутри текущей страницы к соответствующему разделу новостей.

Требуемый вид страницы новостей представлен в примере на рис. 4.

ПОСЭВМ: Web-программирование http://www.transmarket.net/education ПОСЭВМ: Web-программирование http://www.transmarket.net/education Лабораторная работа № Формы HTML, ЯЗЫК СКРИПТОВ JAVASCRIPT Цель работы – изучение форм HTML-документов, создание интерактивных форм при помощи клиентских скриптов.

Задача работы – создать форму на web-странице с функциями предварительной обработки полей при помощи язык скриптов javascript.

Порядок проведения работы 1. Создать файл index.html. Используя теги,, и описать общую структуру HTML документа. Создать форму анкетирования, как показано 2. Вместо стандартной кнопки отправки формы использовать рисунок в формате GIF изображающий кнопку с эффектом RollOver (при наведении мышкой на кнопку она меняет цвет). Для создания кнопок использовать графический редактор Paint.

3. При помощи языка JavaScript осуществить проверку содержимого основных полей формы (имя, адрес, специальность) при нажатии кнопки “Отправить”. При отсутствии ПОСЭВМ: Web-программирование http://www.transmarket.net/education данных хотя бы в одном из обязательных полей вывести соответствующее сообщение и прекратить обработку формы.

4. При правильном заполнении формы вывести в новом окне браузера сообщение, используя значение поля “Имя” (рис.2).

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

myWin= open("file_name|blank", "WindowName", "parameters");

myWin.document.open();

myWin.document.write(“text”);

myWin.document.close();

здесь file_name|blank – название html файла (file_name), загружаемого в новое окно или открытие чистой страницы (blank);

WindowName – имя открываемого окна (для загрузки документа в имеющееся окно необходимо использовать имя _self);

Parameters – дополнительные параметры нового окна (табл.1) Список свойств окна, которыми Вы можете управлять:

5. Сделать выводы по работе.

ПОСЭВМ: Web-программирование http://www.transmarket.net/education Лабораторная работа №

ЯЗЫК СЕРВЕРНЫХ СКПРИПТОВ PHP

Цель работы – изучение возможностей языка PHP, создание интерактивных форм при помощи серверных скриптов.

Задача работы – создать форму на web-странице с функциями предварительной обработки полей при помощи языка серверных скриптов PHP.

Порядок проведения работы 1. Создать файл index.html. Используя теги,, и описать общую структуру HTML документа. Создать форму анкетирования, как 2. Вместо стандартной кнопки отправки формы использовать рисунок в формате GIF изображающий кнопку с эффектом RollOver (при наведении мышкой на кнопку она меняет цвет). Для создания кнопок использовать графический редактор Paint.

3. При помощи языка PHP осуществить проверку содержимого основных полей формы (имя, адрес, специальность) при нажатии кнопки “Отправить”. При отсутствии ПОСЭВМ: Web-программирование http://www.transmarket.net/education данных хотя бы в одном из обязательных полей вывести соответствующее сообщение и прекратить обработку формы.

4. При правильном заполнении формы вывести в окне браузера сообщение, используя значение поля “Имя” (рис.2).

5. Сделать выводы по работе.

ПОСЭВМ: Web-программирование http://www.transmarket.net/education Лабораторная работа №

СЕРВЕРНАЯ БАЗА ДАННЫХ MySQL

Цель работы – изучение возможностей серверной СУБД MySQL.

Задача работы – создание интерфейса к базе данных MySQL средствами PHP.

Порядок проведения работы 1. В соответствии с вариантом задания спроектировать структуру базы данных.

2. Создать базу данных, используя менеджер баз данных phpmyadmin, расположенной по адресу http://localhost/tools/phpmyadmin 3. Написать программу на PHP для организации Web-интерфейса к базе данных.

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

1 Распределение студентов фамилия, год рождения, пол, группа, факультет, место 2 Учет автомобилей номер, год выпуска, марка, цвет, состояние, фамилия 3 Учет объектов район, этаж, площадь, количество комнат, сведения о 4 Библиотечная картотека название книги, автор, год издания, адрес автора, 6 Учет заказов компании Название фирмы-заказчика, сумма заказа, 7 Учет успеваемости фамилия, специальность, курс, факультет, средний 8 Учет товаров на складе Наименование товара, количество, дата поставки, 10 Система управления Номер апартаментов, тип, этаж, количество мест, 3. Сделать выводы по работе.