1295
.pdf
С е р и я в н у т р и в у з о в с к и х м е т о д и ч е с к и х у к а з а н и й С и б А Д И
Министерство науки и высшего образования Российской Федерации Федеральное государственное бюджетное образовательное учреждение высшего образования
«Сибирский государственный автомобильно-дорожный университет (СибАДИ)»
Кафедра «Прикладная информатика в экономике»
ПРОГРАММИРОВАНИЕ WEB-РЕСУРСОВ
Методические указания к дисциплине
«Программирование Web-ресурсов»
Составители С.Ю.Пестова, С.А.Зырянова
Омск 2018
УДК 004.9
ББК 32.97 П 78
_____________________________
Согласно 436-ФЗ от 29.12.2010 «О защите детей от информации, причиняющей вред их здоровью и развитию» данная продукция маркировке не подлежит.
_____________________________
Рецензент
Доктор технических наук В.А Мещеряков (Проректор по информационным технологиям ФГБОУ ВО СибАДИ.)
Работа утверждена редакционно-издательским советом университета в качестве методических указаний.
П 78 Программирование Web-ресурсов [Электронный ресурс] : Методические указания / сост. С.Ю.Пестова. С.А.Зырянова – (Серия внутривузовских
методических указаний СибАДИ). – Электрон. дан. – Омск : СибАДИ, 2018.
– Режим доступа: http://bek.sibadi.org/fulltext/bn1159.pdf, свободный после авторизации. – Загл. с экрана.
По темам изложен материал, необходимый для выполнения лабораторных и практических работ, дана рекомендуемая литература, необходимая для освоения дисциплины «Программирование Web-ресурсов». Для самостоятельной подготовки к промежуточной аттестации сформированы типовые тесты.
Имеется интерактивное оглавление в виде закладок.
Методические указания предназначены для бакалавров направления 09.03.03 «Прикладная информатика». Также могут быть использованы как дополнительный учебный материал в различных информационных дисциплинах для формирования профессиональных компетенций.
Издание подготовлено на кафедре «Прикладная информатика в экономике».
Текстовое (символьное) издание ( )
Системные требования: Intel, 3,4 GHz; 150 Мб; Windows XP/Vista/7; DVD-ROM;
1 Гб свободного места на жестком диске; программа для чтения pdf-файлов:
Adobe Acrobat Reader; Foxit Reader
Издание первое. Дата подписания к использованию Издательско-полиграфический комплекс СибАДИ. 644080, г. Омск, пр. Мира, 5
РИО ИПК СибАДИ. 644080, г. Омск, ул. 2-я Поселковая, 1
© ФГБОУ ВО «СибАДИ», 2018
Содержание
ВВЕДЕНИЕ.......................................................................................... |
4 |
1.ТЕОРЕТИЧЕСКИЙ МАТЕРИАЛ К ЛАБОРАТОРНЫМ
РАБОТАМ И КОНТРОЛЬНЫМ ЗАДАНИЯМ................................ |
5 |
|
1.1. Введение в технологию WWW ................................................... |
5 |
|
1.2. Создание Web-страниц ................................................................ |
6 |
|
1.3. Программирование на стороне клиента. ................................... |
9 |
|
1.4. Программирование на стороне сервера ................................... |
11 |
|
2.ЛАБОРАТОРНЫЕ РАБОТЫ ........................................................ |
13 |
|
2.1. Лабораторная работа №1 «Создание страниц с |
||
использованием форматирования символов, абзацев. Списки на |
||
Web-странице.» ................................................................................. |
13 |
|
2.2 |
Лабораторная работа №2 «Таблицы на Web-странице. |
|
Использование графики.» ................................................................ |
13 |
|
2.3 |
Лабораторная работа №3 «Формы. Гипертекстовые ссылки. |
|
Каскадные таблицы стилей CSS.»................................................... |
13 |
|
2.4 |
Лабораторная работа №4 «Блочный дизайн сайта. Работа с |
|
блоками: абсолютное позиционирование, плавающие блоки, |
||
относительное позиционирование.» ............................................... |
14 |
|
2.5 |
Лабораторная работа №5 «Создание статического Web- |
|
сайта..»................................................................................................ |
14 |
|
2.6 |
Лабораторная работа №6 «Основы JavaScript. Структура |
|
документа. Переменные. Ввод и вывод информации.»................ |
15 |
|
2.7 |
Лабораторная работа №7 «Операторы языка JavaScript. |
|
Функции. События.»......................................................................... |
15 |
|
2.8 |
Лабораторная работа №8 «Условные операторы языка |
|
JavaScript. Использование циклов.»................................................ |
16 |
|
2.9 Лабораторная работа №9 «Работа с объектами String. Работа с |
||
массивами.» ....................................................................................... |
16 |
|
2.10 Лабораторная работа №10 «Объекты Windows. Формы |
||
введения данных.» ............................................................................ |
16 |
|
2.11Лабораторная работа №11 «Работа с библиотекой JQuery.» 17
2.12Лабораторная работа №12 «РНР. Переменные. Простые
массивы. Простые |
многомерные массивы. Ассоциативные |
массивы.» ........................................................................................... |
17 |
2.13 Лабораторная работа №13 «РНР. Операторы. Функции. |
|
Классы.» ............................................................................................. |
17 |
2.14Лабораторная работа №14 «РНР. Суперглобальные
переменные и запросы. Сессии.» .................................................... |
18 |
|
2.15 Лабораторная работа №15 «Работа с файлами.» ................... |
18 |
|
2.16 Лабораторная работа №16-17 «Работа с базами данных в |
||
РНР.» .................................................................................................. |
19 |
|
2.17 Лабораторная работа №18 «Шаблоны в РНР. Шаблонный |
||
движок. Разделение шаблонов.» ..................................................... |
19 |
|
3. ПРАКТИЧЕСКИЕ РАБОТЫ ........................................................ |
20 |
|
3.1 |
Практическая работа №1 «Дизайн сайта. Проектирование |
|
сайта.»................................................................................................. |
20 |
|
3.2 |
Практическая работа №2 «Табличный дизайн сайта.» ........... |
20 |
3.3 |
Практическая работа №3 «Блочный дизайн сайта.» ............... |
20 |
3.4 Практическая работа №4 «JavaScript. Обработчики событий.» |
||
............................................................................................................. |
|
21 |
3.5 |
Практическая работа №5 «JavaScript. Обработка форм.»....... |
21 |
3.6 |
Практическая работа №6 «JavaScript. Технология AJAX.».... |
22 |
3.7 |
Практическая работа №7 «Базы данные и MySQL. Создание |
|
таблиц. Связи между таблицами. Запросы.».................................. |
22 |
|
3.8 |
Практическая работа №8-9 «РНР и MySQL. Сессия |
|
пользователя.» ................................................................................... |
22 |
|
4. ТИПОВЫЕ ТЕСТОВЫЕ ЗАДАНИЯ........................................... |
23 |
|
СПИСОК РЕКОМЕНДУЕМОЙ ЛИТЕРАТУРЫ........................... |
36 |
|
ВВЕДЕНИЕ
Программирование web-ресурсов, является основным и неотъемлемым фактором разработки в настоящее время.
Целями освоения учебной дисциплины «Программирование web-ресурсов» является получение обучающимися теоретических и практических навыков области создания сайтов и веб приложений и выработка у студентов практических навыков по их применению.
Для достижения цели дисциплина призвана решить задачи, связанные с изучением:
современных технологий в создании web-ресурсов;
методы для создания web-ресурсов.
Практические и лабораторные работы помогут студентам приобрести навыков в разработке web-ресурсов, в том числе непосредственно при прохождении практик.
В результате изучения дисциплины студент должен знать: как создается дизайн web-страницы, создавать базовый шаблон HTML, применять таблицу стилей CSS, применять для разработки язык JavaScript, применять для разработки язык PHP. Студент научится пользоваться создавать дизайн страниц, разрабатывать код для функций на языке JavaScript и PHP, извлекать информацию для отображение ее на web-странице с помощью PHP и MySQL .
1. ТЕОРЕТИЧЕСКИЙ МАТЕРИАЛ К ЛАБОРАТОРНЫМ РАБОТАМ И КОНТРОЛЬНЫМ ЗАДАНИЯМ
1.1. Введение в технологию WWW
Вопросы для рассмотрения: Понятие о World Wide Web,
история возникновения. Протоколы взаимодействия, клиентсерверная технология. Программное обеспечение клиента и сервера. Стандарты разработки web-ресурсов. Web-браузеры. Web-серверы. Web-приложения. Web-сервисы.
Рекомендуемая литература: 5,6. Перечень дополнительных ресурсов: 4.
Понятие о World Wide Web, история возникновения - распределенная система, предоставляющая доступ к связанным между собой документам, расположенным на различных компьютерах, подключенных к Интернету.
В 1957 году Министерство обороны США (Department of Defence, DOD) выделило среди своих работников группу, отвечающую за разработку "передовых исследовательских проектов"
(Advanced Research Projects Agency, DARPA ). Официально работу над созданием компьютерной сети в DARPA начали 4 октября 1962 года. В 1974 году наконец была завершена работа над тем самым "единым протоколом передачи данных". Создан он был в подразделении DARPA под названием Internet Network Working Group
(INWG). В 1985 была начата разработка сети NSFNET, которая должна была объединить между собой шесть самых крупных компьютерных центров страны. Именно в это время была разработана технология WWW (World Wide Web)
Протоколы взаимодействия, клиент-серверная технология – протокол набор правил, регулирующих процесс приема/передачи данных. В основе сети Интернет лежит протокол TCP/IP. Этот протокол обеспечивает существование различных подсистем сети Интернете и соответствующих им протоколов. Наиболее известными протоколами являются: HTTP, SMTP, POP, IMAP, FTP.
Технология клиент-сервер предусматривает наличие двух самостоятельных взаимодействующих процессов – сервера и клиента, связь между которыми осуществляется по сети.
Программное обеспечение клиента и сервера - программное обеспечение, принимающее запросы от клиентов (в архитектуре
клиент-сервер).
Стандарты разработки web-ресурсов - являются стандартами
вобласти веб-технологий. Эти стандарты являются рекомендациями для разработчиков программного обеспечения и для веб-мастеров. Служат веб-стандарты для того, чтобы, пользователи ПО без проблем и неудобств могли пользоваться сетью интернет, ,так же для того, чтобы разработчики программного обеспечения или веб-мастера были уверены в работоспособности своих продуктов. Начиная, примерно, с 2000 года все крупные производители программного обеспечения для сети интернет стараются придерживаться стандартов
W3C
Web-браузеры - прикладное программное обеспечение для просмотра веб-страниц,
Web-серверы - Компьютер, предоставляющий компьютерное и программное обеспечение, необходимое для функционирования веб-сайта.
Web-приложения - это любой сайт с элементами интерактива. Это значит, что посетитель может взаимодействовать с материалом, функциями: нажимать кнопки, заполнять формы, запрашивать прайс, совершать покупки.
Web-сервисы - идентифицируемая уникальным веб-адресом (URL-адресом) программная система со стандартизированными интерфейсами, а также HTML-документ сайта, отображаемый браузером пользователя.
1.2. Создание Web-страниц
Вопросы для рассмотрения: Статические и динамические WEB-страницы. Объектная модель документа DOM. Технологии DHTML. Язык гипертекстовой разметки HTML, каскадные таблицы стилей CSS. Основные понятия. Форматирование текста. Использование списков на Web-странице. Работа с таблицами. Графика на Web-странице. Гипертекстовые ссылки. Использование форм на Web-странице. MAILTO. HTML5. Каскадные таблицы стилей CSS: назначение, способы подключения. Свойства элементов Web-страниц. Использование строчных и блоковых элементов. Абсолютное позиционирование, плавающие блоки, относительное позиционирование. Блочный дизайн.
Рекомендуемая литература: 5,6.
Перечень дополнительных ресурсов: 1, 3, 4.
Статические и динамические WEB-страницы - Статические - означает, что страница выглядит всегда одинаково, на зависимо от действий пользователя. Например, меню организованно ссылками на отдельные страницы, а не выпадающим списком.
Динамические html страницы - эти страницы уже могут реагировать на действия пользователя и изменяться. Например, при щелчке по тексту может показываться всплывающий блок текста с переводом слова.
Объектная модель документа DOM - это программный интерфейс (API) для HTML и XML документов. DOM предоставляет структурированное представление документа и определяет то, как эта структура может быть доступна из программ, которые могут изменять содержимое, стиль и структуру документа
Технологии DHTML - это набор средств, которые позволяют создавать более интерактивные Web-страницы без увеличения загрузки сервера.
Язык гипертекстовой разметки HTML, каскадные таблицы стилей CSS - язык разметки гипертекста предназначен для написания гипертекстовых документов, публикуемых в World Wide Web. Каскадные (многоуровневые) таблицы стилей - cascading style sheets (CSS) - это мощный стандарт на основе текстового формата, определяющий представление данных в браузере. Если формат HTML предоставляет информацию о составе документа, то таблицы стилей сообщают, как он должен выглядеть
Основные понятия:
Сайт — набор web-страниц, расположенных в рамках одного доменного имени и связанных между собой, а так же необходимых для предоставления информации. - Домен (доменное имя) — адрес, по которому сайт расположен в сети Интернет.
Хостинг — удаленное пространство для размещения всех файлов сайта (страницы, картинки, файлы и прочее).
Вёрстка — набор действий, которые необходимы для обеспечения правильного размещения всех элементов дизайна сайта на его страницах (меню, текст, приложения и т.д.).
Форматирование текста - средства его изменения, такие как выбор начертания шрифта и использование эффектов, позволяющих менять вид текста
Использование списков на Web-странице - основное применение списков: Нумерованные - для перечисления элементов, следующих в строго определенном порядке. Маркированные - для перечисления элементов, следующих в произвольном порядке. Многоуровневые - для конкретизации информации определенных элементов.
Работа с таблицами - один из основных инструментов для создания web-страниц. Без использования CSS, только с помощью таблиц можно создавать страницы со сложным дизайном.
Графика на Web-странице - возможность включения ссылок на графические и мультимедийные файлы, которые делают webстраницу более привлекательной и интересной.
Гипертекстовые ссылки - часть гипертекстового документа, ссылающаяся на другой элемент (команда, текст, заголовок, примечание, изображение) в самом документе, на другой объект (файл, каталог, приложение), расположенный на локальном диске или
вкомпьютерной сети, либо на элементы этого объекта.
Использование форм на Web-странице - это инструмент, с помощью которого HTML-документ может отправить информацию в заранее определенную точку внешнего мира.
MAILTO - позволяет пользователям отправить письмо, нажав на ссылку, без необходимости копировать адрес получателя и открывать почтовый клиент
HTML5 - это новый стандарт HTML, главной целью которого является предоставление любого контента без использования дополнительных плагинов, таких как Flash, Silverlight и т.д. Он содержит всё необходимое для отображения анимации, видео, богатого графического интерфейса и прочего
Каскадные таблицы стилей CSS: назначение, способы подключения - Каскадные таблицы стилей(так расшифровывается аббревиатура CSS — Cascading Style Sheets) представляют собой набор параметров(стилей), описывающих оформление самой webстраницы и отдельных ее элементов. Всего существует три способа подключения css к html: первый способ заключается в размещении стилей в отдельном файле, второй способ заключается в написании так называемых глобальных стилей, которые прописываются прямо в html коде веб-страницы, третий способ это так называемые встроенные или внутренние стили.
Свойства элементов Web-страниц – пассивные для
просмотра: текст, рисунки, видео, таблицы. Активные, которые взаимодействуют с пользователем: переключатели, кнопки, ссылки, поля ввода.
Использование строчных и блоковых элементов. Блочные элементы — элементы высшего уровня, которые форматируются визуально как блоки, располагаясь на странице в окне браузера вертикально. Блочные элементы генерируют основной блок, который содержит только блок элемента.
Строчные элементы генерируют внутристрочные контейнеры. Они не формируют новые блоки контента. Строчные элементы являются потомками блочных элементов.
Абсолютное позиционирование, плавающие блоки, относительное позиционирование. Абсолютное позиционирование - данный тип позиционирования удаляет элемент в общем потоке документа. Окружающие элементы игнорируют
Относительное позиционирование - элементы с относительным позиционированием располагаются относительно собственной позиции (сдвиг на основе своего стандартного месторасположения). При сдвиге изображения на его месте остаётся образ, относительно которого все элементы располагаются и накладываются друг на друга.
Плавающий блок (или как его ещё называют двигающийся, фиксированный) нужен на сайте для того, чтобы пользователь при прокрутке страницы видел один неподвижный элемент
Блочный дизайн - позволяет отображать каждый загруженный элемент отдельно.
1.3. Программирование на стороне клиента.
Вопросы для рассмотрения: Язык сценариев JavaScript.
Операторы языка JavaScript. Функции. События. Условные операторы языка JavaScript. Использование циклов. Работа с объектами String. Работа с массивами. Объекты Windows. Формы введения данных. Обработчики событий. Библиотека jQuery.
Рекомендуемая литература: 5.
Перечень дополнительных ресурсов: 1, 2, 3, 4.
Язык сценариев JavaScript - является языком сценариев (скриптов), который применяют в основном для создания на Webстраницах интерактивных элементов