Лабораторный практикум по дисциплине «Web-программирование» (Лабораторные работы № 1-5: Основы использования HTML и CSS. Знакомство со средствами создания web-приложений ASP.NET)

ФЕДЕРАЛЬНОЕ АГЕНТСТВО ПО ОБРАЗОВАНИЮ

Федеральное государственное бюджетное образовательное

учреждение высшего профессионального образования

«Национальный исследовательский ядерный университет «МИФИ»

ОБНИНСКИЙ ИНСТИТУТ АТОМНОЙ ЭНЕРГЕТИКИ

КАФЕДРА «ИНФОРМАЦИОННЫЕ СИСТЕМЫ»

Лабораторные работы

по дисциплине

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

для студентов специальности:

230201 – «Информационные системы и технологии»

направление 230200  - «Информационные системы»

«____» ____________ 20__  г.        Зав. кафедрой ИС   __________________ Яцало Б.И.

Лабораторный практикум по дисциплине

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

Лабораторный практикум включает в себя разработку связанных гипертекстовых документов, элементов web-сайтов и web-приложений, с использованием web-технологий и языков web-программирования: HTML, CSS, JavaScript, PHP, JavaSE и JavaEE, ASP.NET. Практикум состоит из пяти лабораторных работ. Защита работ происходит в компьютерном классе с демонстрацией готового web-приложения или его элементов и отчётом по теоретической и практической части.

Общие требования к лабораторным работам

• Каждая выполненная лабораторная работа защищается в компьютерном классе кафедры
• К защите лабораторной работы допускаются студенты, имеющие отчет по лабораторной работе (допускается предоставление отчета в электронном виде). Отчет по лабораторной работе включает:
• титульный лист с указанием ВУЗа, кафедры, названия лабораторной работы, ФИО студента и ФИО преподавателя;
• введение (описание предметной области);
• задание на лабораторную работу;
• краткий обзор используемых технологий;
• описание структуры страниц сайта, меню, компоновки (схемы);
• описание данных (схема БД);
• описание программных модулей (назначение, схема взаимодействия);
• примеры страниц сайта (снимки экранов);
• заключение (что сделано);
• примеры программного кода (HTML, CSS, JavaScript, PHP, Java).

Лабораторная работа № 1 «Основы использования HTML и CSS»

Задание: Разработать сайт-визитку, используя технологии HTML и CSS.

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

Требования:

1. Сайт должен состоять из 5-8 страниц (разделов);
2. Блочная структура страницы (блок заголовок, блок меню, блок рабочей области, блок копирайт, другие блоки);
3. Единый дизайн страниц (расположение блоков, цветовая гамма, шрифт и др.);
4. Для структуры страницы использовать HTML (минимальное использование параметров форматирования (оформления) HTML);
5. Для дизайна использовать единую таблицу стилей (внешний файл CSS);
6. На сайте обязательное использование следующих тегов (контейнеров):

o  html-документ,

o  заголовок документа,

o  внешние стили,

o  мета-информация о документе,

o  заголовки,

o  абзацы текста,

o  списки,

o  таблицы,

o  ссылки,

o  картинки,

o  логическое и физическое форматирование текста;

7. Обязательное использование трех видов селекторов CSS: html-контейнер, класс и идентификатор объекта.

Используемые инструментальные средства: под Windows - Notepad++, SciTE, TopStyle, под Linux - Quanta или vim или др (NetBeans IDE).

Лабораторная работа № 2 «Использование возможностей JavaScript»

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

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

Требования:

1. Интерактивное меню или таблица;
2. Создание одной или нескольких форм;
3. Проверка на корректность введенных в форме данных;
4. Обработка данных формы и генерация новой страницы;
5. Галерея объектов (картинок) и получение свойств объекта в новом окне;
6. Обязательное использование трех видов внедрения JavaScript в страницу HTML: гипертекстовая ссылка (схема URL), обработчик события (handler), вставка (контейнер SCRIPT).

Используемые инструментальные средства: под Windows - Notepad++, SciTE, под Linux - Quanta или vim или др (NetBeans IDE) для отладки Firefox и плагин (модуль) Firebug.

Лабораторная работа № 3 «Основы программирования на языке РНР. Создание web-приложения для работы с базой данных в СУБД MySQL»

Задание: К сайту-визитке добавить динамически-формируемые разделы, используя язык программирования PHP и СУБД MySQL.

Варианты веб-приложений: Веб-почтовый клиент, новости и объявления, интерактивный список товаров, вопрос-ответ, web-каталог файлов, web-прайслист, web-тестирование, web-библиотека, web-поисковик, web-регистрация (конференция, семинар) и т.д.

Требования:

1. База данных должна содержать не менее 5 таблиц;
2. Не менее 3х динамических разделов;
3. Обязательные разделы: ввод и редактирование данных, извлечение и демонстрация данных из БД;
4. Обязательный ввод данных в базу данных, используя формы;
5. Для раздела ввода данных обязательная авторизация (логин, пароль);
6. Использование регулярных выражений;
7. Загрузка файлов на сервер.

Используемые инструментальные средства:

• Пакет программ для web-разработчика – Denwer или XAMPP (Windows), MySQL+Apache+PHP_module (UNIX)
• PHP код - Notepad++, SciTE, Quanta, vim или NetBeans IDE
• Работа с СУБД MySQL – phpMyAdmin, MySQL Workbench(Windows)

Лабораторная работа № 4 «Основы программирования на языке Java. Создание простого приложения доступного через браузер»

Задание: Разработать небольшое web-приложение или java-апплет, используя язык программирования Java.

Варианты веб-приложений: Java-игра, аниминированное меню, анимированный текст, графики и диаграммы, карты, фотографии, расчетные программы, калькулятор и т.д.

Требования:

1. Приложение выполняется в виде апплета или web-приложения;
2. Обязательные пункты: ввод и редактирование данных и демонстрация результата;
3. Обязательный ввод данных, используя формы (для web-приложения);
4. Для вывода результата обязательное использование графики.

Используемые инструментальные средства:

• Пакет программ для web-разработчика – J2EE
• Сервер приложений – Tomcat, JBoss, GlassFish
• Java код – NetBeans IDE

Лабораторная работа № 5 «Знакомство со средствами создания web-приложений  ASP.NET»

Задание: Разобраться в работе web-приложения ASP.NET.

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

Требования:

1. Выбрать один из примеров web-приложений ASP.NET;
2. Разобраться в устройстве (структуре) выбранного web-приложения;
3. Используя средства Microsoft Visual Studio развернуть web-приложение;
4. Продемонстрировать работу web-приложения.

Используемые инструментальные средства:

• Пакет программ для web-разработчика – Microsoft .NET Framework, Visual Studio.
• Сервер приложений (web-сервер) –  Web-узел ASP.NET в IIS.