№
МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ
ФЕДЕРАЦИИ
Федеральное государственное автономное образовательное
учреждение высшего образования
«Южный федеральный университет»
Инженерно-технологическая академия
Институт компьютерных технологий и информационной безопасности
Методические указания
к выполнению комплекса лабораторных работ
по дисциплине
«Web-технологии в разработке информационных
систем»
Для студентов всех направлений подготовки бакалавров и специалистов Института
компьютерных технологий и информационной безопасности
Таганрог
Издательство Южного федерального университета
2017
4
УДК 681.324 (075.8)
Рецензент:
В.И. Финаев – д.т.н., профессор, заведующий кафедрой систем
автоматического управления Южного федерального университета.
Беликов А.Н., Кучеров С.А., Самойлов А.Н. Методические указания
к выполнению комплекса лабораторных работ по дисциплине
«Интернет/Интранет технологии». – Таганрог: Изд-во ЮФУ, 2017. – 101 с.
Комплекс лабораторных работ охватывает темы: «Классификация и
сравнение современных инструментов разработки веб-приложений на
платформе WAMP/LAMP», «Разработка макета WEB-приложения с
использованием технологий HTML и CSS», «Разработка WEBприложения с использованием языка PHP и СУБД MySQL», «Установка и
настройка системы управления контентом (WordPress). Размещение сайта
в сети интернет», «Автоматизация предварительного анализа и обработки
данных средствами Visual Basic Script».
Для студентов всех направлений подготовки бакалавров и
специалистов Института компьютерных технологий и информационной
безопасности студентами других направлений УГС 9 и 10, связанных с
использованием перспективных информационных технологий.
Ил. 43. Библиогр.: 79 назв.
 Беликов А.Н.
 Кучеров С.А.
Самойлов А.Н.
 ЮФУ, 2017
5
Лабораторная работа №1
1. Цели и задачи лабораторной работы
Цель работы: изучить архитектуру современных веб-приложений и
современные
средства
разработки
веб-приложений.
Получить
практические навыки по установке и настройке локального сервера
XAMPP.
1.1.
Задачи работы
1. Изучить теоретический материал:
 ознакомиться с платформой WAMP/LAMP и используемыми в
ней технологиями;
 ознакомиться с назначением и применением современных
инструментальных средств, используемых в создании вебприложений;
 ознакомиться с базовыми принципами построения вебприложений.
2. Согласно методическим указаниям произвести установку
локального сервера XAMPP.
3. Выполнить индивидуальное задание.
4. Отразить проделанные действия в отчете.
5. Написать осмысленный вывод.
1.2.
Исходные данные
1. Пакет установки веб-сервера.
2. ПК с установленной на нем OC Microsoft Windows или ОС
семейства Unix.
2. Теоретические основы
2.1.
Краткие сведения о платформе WAMP/LAMP
WAMP/LAMP – акроним, обозначающий набор (комплекс)
серверного программного обеспечения, широко используемый с целью
разработки, предоставления веб-приложений. WAMP/LAMP назван по
первым буквам входящих в его состав компонентов:
 W-Windows – операционная система от компании Microsoft;
 L-Linux – операционная система семейства Unix;
 Apache – веб-сервер;
 MySQL – СУБД;
6
 PHP – язык программирования, используемый для создания вебприложений.
 Apache HTTP-сервер – свободный веб-сервер. Apache является
кроссплатформенным ПО, поддерживает операционные системы
Linux, BSD, Mac OS, Microsoft Windows, Novell NetWare, BeOS.
Основными достоинствами Apache считаются надёжность и
гибкость конфигурации. Он позволяет подключать внешние модули для
предоставления данных, использовать СУБД для аутентификации
пользователей, модифицировать сообщения об ошибках и т.д.
Поддерживает IPv6.
Веб-сервер Apache разрабатывается и поддерживается открытым
сообществом разработчиков под эгидой Apache Software Foundation и
включён во многие программные продукты, среди которых СУБД Oracle и
IBM WebSphere.
Ядро Apache включает в себя основные функциональные
возможности, такие как обработка конфигурационных файлов, протокол
HTTP и система загрузки модулей. Ядро (в отличие от модулей)
полностью разрабатывается Apache Software Foundation, без участия
сторонних программистов.
Теоретически, ядро apache может функционировать в чистом виде,
без использования модулей. Однако функциональность такого решения
крайне ограничена. Ядро Apache полностью написано на языке
программирования C.
Система
конфигурации
Apache
основана
на
текстовых
конфигурационных файлах. Имеет три условных уровня конфигурации:
1. Конфигурация сервера (httpd.conf).
2. Конфигурация виртуального хоста (extra/httpd-vhosts.conf).
3. Конфигурация уровня директории (.htaccess).
Apache имеет собственный язык конфигурационных файлов,
основанный на блоках директив. Практически все параметры ядра могут
быть изменены через конфигурационные файлы, вплоть до управления
MPM (мультипроцессорные модели).
Большая часть модулей имеет собственные параметры. Часть
модулей использует в своей работе конфигурационные файлы
операционной системы (например, /etc/passwd и /etc/hosts). Кроме того,
параметры могут быть заданы через ключи командной строки.
7
Apache HTTP Server поддерживает модульность. Существует более
500 модулей, выполняющих различные функции. Часть из них
разрабатывается командой Apache Software Foundation, но основное
количество – отдельными open source-разработчиками.
Модули могут быть как включены в состав сервера в момент
компиляции, так и загружены динамически, через директивы
конфигурационного файла.
В модулях реализуются следующие функции:
 поддержка языков программирования;
 добавление функционала;
 исправление ошибок или модификация основных функций;
 усиление безопасности.
Часть веб-приложений, например панели управления ISPmanager и
VDSmanager, реализованы в виде модуля Apache.
Apache имеет встроенный механизм виртуальных хостов. Он
позволяет полноценно обслуживать на одном IP-адресе множество сайтов
(доменных имён), отображая для каждого из них собственное содержимое.
Для каждого виртуального хоста можно указать собственные
настройки ядра и модулей, ограничить доступ ко всему сайту или
отдельным файлам. Некоторые MPM, например Apache-ITK позволяют
запускать процесс httpd для каждого виртуального хоста с отдельными
идентификаторами uid и guid.
Существует множество модулей, добавляющих к Apache поддержку
различных языков программирования и систем разработки.
К ним относятся:
 PHP (mod_php);
 Python (mod python, mod wsgi);
 Ruby (apache-ruby);
 Perl (mod perl);
 ASP (apache-asp);
 Tcl (rivet).
Кроме того, Apache поддерживает механизмы CGI и FastCGI, что
позволяет исполнять программы на практически всех языках
программирования, в том числе C, C++, sh, Java.
Apache имеет различные механизмы обеспечения безопасности и
разграничения доступа к данным. Основными являются:
8
 Ограничение доступа к определённым директориям или файлам.
 Механизм авторизации пользователей для доступа к директории
по методу HTTP-Авторизации (mod_auth_basic) и digestавторизации (mod_auth_digest).
 Ограничение доступа к определённым директориям или всему
серверу, основанное на IP-адресах пользователей.
 Запрет доступа к определённым типам файлов для всех или части
пользователей, например запрет доступа к конфигурационным
файлам и файлам баз данных.
 Существуют модули, реализующие авторизацию через СУБД или
PAM.
MySQL – свободная система управления базами данных (СУБД).
MySQL является решением для малых и средних приложений. Входит в
состав серверов WAMP, AppServ, LAMP и в портативные сборки серверов
Денвер, XAMPP. Обычно MySQL используется в качестве сервера, к
которому обращаются локальные или удалённые клиенты, однако в
дистрибутив входит библиотека внутреннего сервера, позволяющая
включать MySQL в автономные программы.
Гибкость СУБД MySQL обеспечивается поддержкой большого
количества типов таблиц: пользователи могут выбрать как таблицы типа
MyISAM, поддерживающие полнотекстовый поиск, так и таблицы
InnoDB, поддерживающие транзакции на уровне отдельных записей.
Более того, СУБД MySQL поставляется со специальным типом таблиц
EXAMPLE, демонстрирующим принципы создания новых типов таблиц.
Благодаря открытой архитектуре и GPL-лицензированию, в СУБД MySQL
постоянно появляются новые типы таблиц.
MySQL портирована на большое количество платформ: AIX, BSDi,
FreeBSD, HP-UX, Linux, Mac OS X, NetBSD, OpenBSD, OS/2 Warp, SGI
IRIX, Solaris, SunOS, SCO OpenServer, SCO UnixWare, Tru64, Windows 95,
Windows 98, Windows NT, Windows 2000, Windows XP, Windows Server
2003, WinCE, Windows Vista и Windows 7. Существует также порт MySQL
к OpenVMS. Важно отметить, что на официальном сайте СУБД для
свободной загрузки предоставляются не только исходные коды, но и
откомпилированные и оптимизированные под конкретные операционные
системы готовые исполняемые модули СУБД MySQL.
9
MySQL имеет API для языков Delphi, C, C++, Эйфель, Java, Лисп,
Perl, PHP, PureBasic, Python, Ruby, Smalltalk, Компонентный Паскаль и Tcl
библиотеки для языков платформы .NET, а также обеспечивает поддержку
для ODBC посредством ODBC-драйвера MyODBC.
PHP – скриптовый язык программирования общего назначения,
интенсивно применяемый для разработки веб-приложений. В настоящее
время поддерживается подавляющим большинством хостинг-провайдеров
и является одним из лидеров среди языков программирования,
применяющихся для создания динамических веб-сайтов.
В области программирования для сети Интернет PHP – один из
популярных скриптовых языков (наряду с JSP, Perl и языками,
используемыми в ASP.NET) благодаря своей простоте, скорости
выполнения, богатой функциональности, кроссплатформенности и
распространению исходных кодов на основе лицензии PHP.
Популярность в области построения веб-сайтов определяется
наличием большого набора встроенных средств для разработки вебприложений. Основные из них:
 автоматическое извлечение POST и GET-параметров, а также
переменных окружения веб-сервера в предопределённые
массивы;
 взаимодействие с большим количеством различных систем
управления базами данных (MySQL, MySQLi, SQLite, PostgreSQL,
Oracle (OCI8), Oracle, Microsoft SQL Server, Sybase, ODBC, mSQL,
IBM DB2, Cloudscape и Apache Derby, Informix, Ovrimos SQL,
Lotus Notes, DB++, DBM, dBase, DBX, FrontBase, FilePro, Ingres II,
SESAM, Firebird / InterBase, Paradox File Access, MaxDB,
Интерфейс PDO);
 автоматизированная отправка HTTP-заголовков;
 работа с HTTP-авторизацией;
 работа с cookies и сессиями;
 работа с локальными и удалёнными файлами, сокетами;
 обработка файлов, загружаемых на сервер;
 работа с XForms.
Синтаксис PHP подобен синтаксису языка Си. Некоторые элементы,
такие как ассоциативные массивы и цикл foreach, заимствованы из Perl.
10
Для работы программы не требуется описывать какие-либо
переменные, используемые модули и т. п. Любая программа может
начинаться непосредственно с оператора PHP.
Простейшая программа Hello world на PHP выглядит следующим
образом:
<?php
echo 'Hello, world!';
?>
PHP исполняет код, находящийся внутри ограничителей, таких как
<?php ?>. Всё, что находится вне ограничителей, выводится без
изменений. В основном это используется для вставки PHP-кода в HTMLдокумент, например, так:
<html>
<head>
<title>Тестируем PHP</title>
</head>
<body>
<?php echo 'Hello, world!'; ?>
</body>
</html>
Помимо ограничителей <?php ?>, допускается использование
дополнительных вариантов, таких как <? ?> и <script language="php">
</script>. Кроме того, до версии 6.0 допускается использование
ограничителей языка программирования ASP <% %> (конструкции <? ?>
и <% %> могут быть выключены в конфигурационном файле php.ini).
PHP является языком программирования с динамической
типизацией, не требующим указания типа при объявлении переменных,
равно как и самого объявления переменных. Преобразования между
скалярными
типами
зачастую
осуществляются
неявно
без
дополнительных усилий.
Для
увеличения
быстродействия
приложений
возможно
использование специального программного обеспечения, так называемых
акселераторов. Принцип их работы заключается в кэшировании однажды
сгенерированного байт-кода в памяти и/или на диске, таким образом, из
процесса работы приложения исключаются этапы 1–3, что в общем случае
ведёт к значительному ускорению работы.
11
Интерпретатор состоит из ядра и подключаемых модулей,
«расширений», представляющих собой динамические библиотеки.
Расширения позволяют дополнить базовые возможности языка,
предоставляя возможности для работы с базами данных, сокетами,
динамической
графикой,
криптографическими
библиотеками,
документами формата PDF и тому подобным. Любой желающий может
разработать своё собственное расширение и подключить его. Существует
огромное количество расширений, как стандартных, так и созданных
сторонними компаниями и энтузиастами, однако в стандартную поставку
входит лишь несколько десятков хорошо зарекомендовавших себя.
Множество расширений доступно в репозитории PECL.
2.2.
Краткие сведения о структуре Web-приложений и их
разработке
Веб-приложение – клиент-серверное приложение, в котором
клиентом выступает браузер, а сервером – веб-сервер. Браузер может
являться реализацией так называемых тонких клиентов. Браузер способен
отображать веб-страницы и, как правило, входит в состав операционной
системы, а функции обновления и сопровождения лежат на поставщике
операционной системы. Логика приложения сосредотачивается на
сервере, а функция браузера заключается в основном в отображении
информации, загруженной по сети с сервера, и передаче обратно данных
пользователя. Одним из преимуществ такого подхода является тот факт,
что клиенты не зависят от операционной системы пользователя и вебприложения, таким образом, являются межплатформенными сервисами.
В настоящее время существует два наиболее распространенных
подхода к построению веб-приложений, базирующихся на различных
платформах. Платформа .Net представляет собой связку технологий от
компании Microsoft – IIS, asp.net и MS SQL Server. Платформа WAMP
описана выше в п. 2.1.
Устройство веб-приложения. Веб-приложение получает запрос от
клиента и выполняет вычисления, после этого формирует веб-страницу и
отправляет её клиенту по сети с использованием протокола HTTP. Само
веб-приложение может выступать в качестве клиента других служб,
например, базы данных или другого веб-приложения, расположенного на
другом сервере. Ярким примером веб-приложения является система
управления содержимым статей Википедии: множество её участников
12
могут принимать участие в создании сетевой энциклопедии, используя
для этого браузеры своих операционных систем (будь то Microsoft
Windows, GNU/Linux или любая другая операционная система) и не
загружая дополнительных исполняемых модулей для работы с базой
данных статей.
Рис. 1. Классическая модель функционирования веб-приложения
Классическая модель функционирования веб-приложения (рис. 1)
состоит в следующем:
1. Пользователь заходит на веб-страницу и нажимает на какойнибудь ее элемент.
2. Браузер отправляет запрос веб-серверу.
3. При необходимости, веб-сервер обращается к СУБД, получает
обрабатывает данные.
4. Сервер генерирует HTML код веб-страницы и отправляет ее
браузеру.
Инструментальные средства. В процессе создания веб-приложения
можно выделить несколько видов деятельности:
 работа с базой данных;
 программирование веб-приложения на стороне сервера;
 верстка: работа с клиентской частью веб-приложения;
 формирование отображения в браузере клиента (HTML, CSS,
JavaScript).
Для удобной работы с базой данных в процессе создания вебприложения используются интерфейсы управления СУБД. Существует
огромное количество таких приложений как от компаний-поставщиков
СУБД, так и от сторонних производителей. Интерфейсы управления
13
СУБД выпускаются под все распространенные платформы (Windows,
Linux, MacOS), также существуют кросс-платформенные решения
(phpMyAdmin).
Для
удобства
программирования
на
серверных
языках
программисты активно используют среды разработки программного
обеспечения. Интегрированная среда разработки программного
обеспечения (англ. IDE, Integrated development environment) – система
программных средств, используемая программистами для разработки
программного обеспечения.
Обычно среда разработки включает в себя текстовый редактор,
компилятор и/или интерпретатор, средства автоматизации сборки и
отладчик. Иногда также содержит средства для интеграции с системами
управления версиями и разнообразные инструменты для упрощения
конструирования графического интерфейса пользователя. Многие
современные среды разработки также включают браузер классов,
инспектор объектов и диаграмму иерархии классов – для использования
при объектно-ориентированной разработке ПО. Хотя и существуют среды
разработки, предназначенные для нескольких языков, такие как Eclipse
или Microsoft Visual Studio, обычно среда разработки предназначается для
одного определённого языка программирования – как например, PHP. В
работе, связанной с версткой веб страниц, а также создании клиентских
скриптов принято использовать редакторы HTML. HTML-редактор –
программа, позволяющая составлять и изменять страницы в формате
HTML. Несмотря на то, что HTML-код может быть написан в простом
текстовом редакторе (например, Notepad), специальные редакторы для
написания кода HTML предлагают больше удобств и функциональности.
Принцип их работы условно делится на две категории:
1. Редактор показывает только исходный код.
2. Редактор показывает готовую страницу, работая по технологии
WYSIWYG (What You See Is What You Get).
Есть также редакторы, работающие по смешанной системе, т.е.
поддерживающие оба принципа работы (Microsoft Frontpage, Abode
Dreamweawer).
14
3. Ход работы
3.1.
Сравнительный анализ и выбор платформы
Изучите и сравните преимущества комплексов на базе платформы
Windows и Unix. Составьте сравнительную таблицу c критериями.
Выберите наиболее подходящую для вас платформу.
3.2.
Сравнительный анализ и выбор веб-сервера
Изучите и сравните три любых сборки веб-сервера для выбранной
вами платформы. Составьте сравнительную таблицу с критериями.
Выберите наиболее подходящую для вас сборку.
3.3.
Установка и настройка локального Web-сервера
Установите на выбранную вами платформу выбранный локальный
веб-сервер (XAMPP, Denwer, Vertigo, Open Server и т.п.). Убедитесь в
работоспособности установленного локального веб-сервера.
Убедитесь в работоспособности встроенного веб-интерфейса
управления СУБД.
Контрольные вопросы
1. Какие основные платформы наиболее востребованы для создания
веб-приложений в настоящее время?
2. Агрегацию каких технологий принято называть LAMP, в чем
отличие от WAMP?
3. Какие типы инструментальных средств для создания вебприложений можно выделить?
4. Какие задачи решает установка локального веб-сервера?
5. Какими средствами можно проверить работоспособность
локального веб-сервера?
6. Для чего предназначен phpMyAdmin?
7. Существуют-ли кроссплатформенные веб-серверы? Если да, то
приведите примеры.
8. Назовите основные этапы настройки и установки локального вебсервера.
9. Переход по какому адресу в браузере откроет интерфейс вебсервера?
10. Входит ли в состав сборки веб-сервера средство управления
базами данных?
15
4. Установка локального web-сервера на примере XAMPP
XAMPP – кроссплатформенная сборка веб-сервера, содержащая
Apache, MySQL, интерпретатор скриптов PHP и язык программирования
Perl и много дополнительных библиотек, которые позволяют запустить
полноценный веб-сервер. Установка выполняется с помощью
инсталлятора.
Рис. 2. Инсталлятор XAMPP
В окне требуется указать место распаковки, после нажатия на кнопку
Install начнется распаковка в папку С:\xampp, заметьте, что папка xampp
создастся автоматически, т.е. если вы укажете путь для распаковки
С:\XAMPP, то в итоге файлы XAMPP распакуются в С:\XAMPP\xampp.
После распаковки запускается процесс установки XAMPP.
На первом шаге требуется указать, нужно ли создать значки быстрого
запуска на рабочем столе (рис. 3):
Рис. 3. Процесс установки XAMPP
16
Если они нужны – нажимаем на клавиатуре «y», если нет –
нажимаем «n». И затем Enter. В следующем окне требуется
подтверждение установки. Для отказа от нее – нажимаем «n» и Enter, если
нет – просто жмём Enter (рис.4).
Рис. 4. Процесс установки XAMPP
На следующем шаге можно указать, что XAMPP будет иметь тип
portable (переносной). Это нужно указать в случае, если вы ставите сервер
на флэш-носитель, чтобы данные всегда были под рукой.
Для установки XAMPP 1.7.3 на флэш-носитель – нажимаем «y» и
Enter. В противном случае – просто жмём Enter (рис. 5).
Рис. 5. Процесс установки XAMPP
После нажатия на Enter автоматически устанавливаются все
необходимые составляющие сервера, в том числе Apache, PHP и MySQL.
В конце появится надпись «XAMPP is ready to use», т.е. он готов к
эксплуатации (рис. 6).
17
Рис. 6. Процесс установки XAMPP
После этого нажимаем 2 раза Enter и попадаем на окно выбора
параметров (рис. 7).
Рис. 7. Процесс установки XAMPP
В данном окне доступны следующие опции:
1. Открыть контрольную панель XAMPP (п.1).
2. Сменить корневую папку XAMPP (п. 2).
3. Отключить/включить HTTPS (SSL) (п. 3).
4. Отключить/включить SSI (п. 4).
5. А также отключить/включить IPv6 (п. 5).
Для этого ведите на клавиатуре цифру, которая соответствует
нужному пункту, и нажмите Enter.
В данное окно можно будет в дальнейшем зайти через контрольную
панель XAMPP.
После
установки
XAMPP
можно
найти
в
Пуск/Все
программы/XAMPP. Чтобы запустить или отключить серверы
используется XAMPP Control Panel.
18
Лабораторная работа № 2
1. Цели и задачи лабораторной работы
Цель работы: изучить технологии HTML и CSS. Получить
практические навыки по их использованию. Научиться создавать макет
веб-страницы.
1.1. Задачи работы
6. Изучить теоретический материал:
 ознакомиться с технологиями HTML и CSS;
 научиться оперировать основными тегами HTML.
7. Выполнить задания в соответствии с вариантом.
8. Отразить проделанные действия в отчете.
9. Написать осмысленный вывод.
2.
Теоретические основы
2.3.
Краткие сведения о HTML
HTML (от англ. HyperText Markup Language – «язык разметки
гипертекста») – стандартный язык разметки документов во Всемирной
паутине. Большинство веб-страниц создаются при помощи языка HTML
(или XHTML). Язык HTML интерпретируется браузером и отображается в
виде документа, в удобной для человека форме. HTML является
приложением SGML (стандартного обобщённого языка разметки) и
соответствует международному стандарту ISO 8879. За основу модели
разметки документов в HTML принята теговая модель. Теговая модель
описывает документ как совокупность контейнеров, каждый из которых
начинается и заканчивается тегами. То есть документ НТМL представляет
собой не что иное, как обычный АSСII-файл, с добавленными в него
управляющими НТМL-кодами (тегами). Текст тега заключается в угловые
скобки (< и >). Имя конечного тега идентично имени начального, но перед
именем конечного тега ставится косая черта (/) (например, для тега стиля
шрифта курсив <i> закрывающая пара представляет собой </i>, для тега
заголовка <ТIТLЕ> закрывающей парой будет </ТIТLЕ>). Конечные теги
никогда не содержат атрибутов.
CSS (англ. Cascading Style Sheets – каскадные таблицы стилей) –
технология описания внешнего вида документа, написанного языком
разметки. Преимущественно используется как средство оформления веб4
страниц в формате HTML и XHTML, но может применяться с любыми
видами документов в формате XML, включая SVG и XUL.
2.4. Структура HTML-документа
Содержание простейшего HTML-кода с пояснениями представлено в
таб. 1.
Таблица 1
Пример HTML-кода
Текст HTML-программы
Комментарий
Начало HTML-документа
Начало заголовка
Информация о документе
Название документа
Конец заголовка
Начало тела
Заголовок
Горизонтальная линия
Начало абзаца
<HTML>
<HEAD>
<META content="charset=windows-1251">
<TITLE>Упражнение 1</TITLE>
</HEAD>
<BODY>
<H1>Первый HTML-документ</H1>
<HR>
<P>
Корова не похожа на лошадь.
А лошадь не похожа на корову.
Именно это сходство
мы и берем за основу.
</P>
</BODY>
</HTML>
Абзац
Конец абзаца
Конец тела
Конец HTML-документа
Команды языка (теги) заключаются в угловые скобки. Как правило,
теги парные. Первый тег открывает описание команды, определяет ее
начало. Второй, отличающийся от первого наличием косой черты "/"
перед ключевым словом (именем тега), – закрывает его. Тег <HTML>
должен открывать программу, а тег </HTML> – закрывать ее.
2.4.1. Заголовок программы
Между парой тегов <TITLE> и </TITLE> располагается имя HTMLдокумента. Это имя браузер использует в заголовке окна Windows, в
котором показывает документ. Пример описания заголовка отображен на
рис. 1.
Рис. 1. Пример заголовка HTML-страницы
2.4.2. Тело программы
Между тегами <BODY> и </BODY> располагаются команды, следуя
которым браузер выводит информацию в окно документа.
5
2.5. Форматирование текста
Для форматирования текста используются различные теги,
позволяющие задавать параметры для текста. Форматирование текста
позволяет создавать более интересные и индивидуальные WEBдокументы, с параметрами задаваемыми разработчиком.
2.5.1. Заголовки
Заголовки являются важной частью документа. Они разделяют
информацию на отдельные логические части и поэтому существенно
улучшают ее восприятие. Заголовки бывают разные по значению, или по
уровню. В HTML-документе поддерживаются заголовки шести уровней
при помощи конструкции: <Hn>Текст заголовка</Hn>. Здесь в качестве n
следует использовать одну из цифр 1-6, обозначающую уровень заголовка.
Заголовки выделяются браузером при показе HTML-документа размером
шрифта и жирностью. Пример использования заголовков для
форматирования текста отображен на рис.2.
Рис. 2. Пример использование заголовков для форматирования текста
2.5.2. Горизонтальная линия
Линия – простейший графический элемент, который умеет строить
браузер. Горизонтальная линия задается тегом <HR>, и этот тег не имеет
парного закрывающего. Браузер выполняя эту команду, выведет на экран
черту.
У тега <HR> существуют свойства, задав которые можно изменять
стиль линии:
1. size – толщина линии. Задается в абсолютных единицах измерения
(cm – сантиметры, mm – миллиметры, px – пиксели, pt – пункты).
6
2. color – цвет линии.
Горизонтальные линии удобно использовать для дополнительного
выделения (или разделения) элементов документа на экране.
2.5.3. Абзац
Абзац задается тегами <P> и </P>, между которыми помещается
текст. Фактически работа тега <P> сводится к выводу перед текстовым
фрагментом пустой строки. А вот парный тег </P> просто игнорируется
браузером, поэтому его можно и не писать.
Пример:
<HTML>
<BODY>
<P>Красная строка используется </P>
Красная строка не используется.
</BODY>
</HTML>.
2.5.4. Принудительный разрыв строки
Команда <BR> заставляет браузер продолжить вывод абзаца с новой
строки. Тег <BR> используется одиночно, без парного тега.
Пример:
<HTML>
<BODY>
Разрыв строки не используется
Разрыв строки используется <BR>
</BODY>
</HTML>
2.5.5. Цвет фона и цвет шрифта
Если требуется, чтобы документ смотрелся строго определенным
образом, необходимо задавать нужные параметры явно. Цвета для фона и
шрифта на всем протяжении документа можно задать при помощи
атрибутов bgcolor и text в теге <body>, например:
7
<HTML>
<HEAD>
....
</HEAD>
<BODY
bgcolor=”aqua”
text=”black”></BODY>
</HTML>
Это означает, что в документе заданы черные символы (black) на
бирюзовом фоне (aqua).
Атрибуты цветов, заданные в теге <BODY>, действуют до парного
тега </BODY>, т.е. до конца документа. Цветом фона может задаваться
только один раз, а цвет шрифта можно менять внутри документа много
раз при помощи команды <FONT> ...</FONT>. Установка цвета в этой
команде выполняется при помощи атрибута color.
Используя команду <FONT>… </FONT>, можно не только
переопределить цвет шрифта, а также его размер и внешний вид. Однако
использование соответствующих атрибутов не рекомендуется. Для
изменения размеров шрифта есть другие команды, более подходящие для
сохранения единого стиля оформления документа (<BIG> ...</BIG> для
укрупнения и <SMALL> ...</SMALL> – для уменьшения размера
шрифта).
2.6. Оформление отдельных элементов текста
При создании HTML-документов иногда требуется выделять
смысловые части текста: заголовки выделить жирным шрифтом,
определения курсивом и т.д. Реализовать это можно при использовании
команд, рассмотренных в этом разделе методического пособия.
2.6.1. Текстовые ссылки и цитаты
Название книги, газетной статьи, фильма или песни можно выделить
при помощи команды <CITE>...</CITE>. Большинство браузеров
изображает текстовую ссылку курсивом (наклонным шрифтом). Эту же
команду
можно
использовать
для
оформления
небольших
внутристрочных цитат.
Большие цитаты лучше выделять из основного текста при помощи
команды <BLOCKQUOTE>...</BLOCKQUOTE>. Браузер отображает
цитату с большим, чем у обычного текста, левым и правым отступом от
края страницы.
8
2.6.2. Усиление текста
Часто, кроме заголовков, которые выделяются командой
<Hn>...</Hn> и располагаются на отдельных строках, требуется выделить
в тексте отдельные слова, чтобы подчеркнуть их значение,
сконцентрировать на них внимание пользователя. Например, всюду в этом
тексте выделены полужирным шрифтом теги команд. Для такого
выделения
элементов
текста
предназначена
команда
<STRONG>...</STRONG>.
Команда <BIG>...</BIG> увеличивает размер шрифта по отношению
к текущему, а команда <SMALL>...</SMALL> – уменьшает его. Команды
могут быть вложенными, что позволяет увеличивать (или уменьшать)
размер в несколько раз.
Команда <B>…</B> делает жирным текст, команда <I>...</I> –
отображает текст курсивом, команда <U>…</U> – делает текст
подчеркнутым.
2.6.3. Авторское редактирование
Браузеры игнорируют в программе множественные пробелы и
символы конца строки при показе документа на экране. Из этого правила,
однако, есть исключение. Команда <PRE>...</PRE> заставляет браузер
выводить текст на экран так, как он записан в программе – со всеми
пробелами и концами строк. Это удобно при показе сложных страниц.
2.6.4. Центрирование абзацев и фрагментов
Команда <P>, записанная без атрибутов, выравнивает текст по
левому краю страницы. Можно запрограммировать вывод текста с ровным
правым краем, или так, чтобы все его строчки были выровнены по центру:
<P align = “right”> – выравнивает абзац по правому краю.
<P align = “center”> – выравнивает абзац по центру.
Выровнять по центру можно не только отдельный абзац или
заголовок, но и целую группу экранных элементов, если поместить их
описание внутри тегов <CENTER> … </CENTER>.
2.7. Программирование списков
HTML допускает задание в документах списков трех типов:
маркированный, нумерованный и вложенные списки.
2.7.1. Маркированный список
Каждый элемент этого списка браузер предваряет меткой в начале
строки, а сами строки смещает вправо. Команда UL, задающая
9
маркированный список имеет следующую структуру, представленную в
таб. 2.
Таблица 2 - Структура команды для создания маркированных списков
Описание команды
Пример
UL>
<LI>первый элемент списка</LI>
.……
<LI>последний элемент списка</LI>
</UL>
<UL>
<LI>Какой он, этот Слонопотам?</LI>
<LI>Неужели очень злой?</LI>
<LI>И как он их любит?</LI>
</UL>
Замечание. Конечный тег </LI> является необязательным.
Вид метки, которую браузер помещает перед каждым элементом
списка, настраивается при помощи атрибута type. Этот атрибут может
отсутствовать или принимать одно из трех значений:
Начальный тег:
Вид метки на экране:
По умолчанию: диск
Окружность
Диск
Квадрат
<UL>
<UL type = “circle”>
<UL type = “disc”>
<UL type = “square”>
Большие цитаты лучше выделять из основного текста при помощи
команды <BLOCKQUOTE>...</BLOCKQUOTE>. Браузер отображает
цитату с большим, чем у обычного текста, левым и правым отступом от
края страницы.
2.7.2. Нумерованный список
В нумерованных списках каждый элемент снабжен номером, вид и
начальное значение которого настраивается специальным атрибутом.
Нумерованный список задается при помощи команды <OL>. Описание
структуры команды представлено ниже.
Замечание. Конечный тег </LI> является необязательным. Вид
номера определяется значением атрибута type.
Начальный тег:
Вид номера на экране:
<OL>
<OL type = “1”>
<OL type = “A”>
<OL type = “a”>
<OL type = “I”>
<OL type = “i”>
Нумерация выполняется арабскими цифрами (1, 2, 3, ...).
Нумерация выполняется арабскими цифрами (1, 2, 3, ...).
Нумерация выполняется прописными буквами (A, B,...).
Нумерация выполняется строчными буквами (a, b, c, ...).
Нумерация выполняется большими римскими цифрами
(I, II, III, IV, ...).
Нумерация выполняется малыми римскими цифрами
(i,ii, iii, iv, ...).
10
Естественную нумерацию элементов списка (с единицы) можно
изменить при помощи атрибута start = n. Число n задает начальное
значение нумерации. Элемент любого списка сам может быть списком.
Уровень вложенности не ограничен, это позволяет использовать списки
для отображения сложных структур.
2.8. Гипертекст
Структура компьютерной книги становится нелинейной и перестает
быть иерархической. Для навигации предусматривается простой способ:
фрагменты документа, которые имеют переходы на другие его части,
каким-то образом выделены. Простое интерфейсное действие на такой
ссылке перебрасывают пользователя в другой информационный узел.
2.8.1. Гипертекст и браузеры
Для навигации по сайту используются ссылки. Для перехода по
ссылке необходимо щелкнуть по ней мышкой, для возврата из ссылки
необходимо использовать навигационную кнопку браузера "Назад"
("Back"). Для задания гипертекстового перехода внутри документа
используют две команды <A>. Первая команда с атрибутом href является
источником перехода, вторая с атрибутом name – приемником.
Общий вид программы:
<A href=”#метка”>текст</A>
<A name=”метка”></A>
Комментарий:
На экран выводится ссылка: текст.
Метка. Сюда браузер приходит по ссылке.
Для организации перехода внутри документа нужно выбрать имя для
метки. Имя должно быть уникальным в HTML-программе, т.е. других
меток с таким именем быть не должно, так как для одинаковых меток
браузер выполняет переход на самую первую метку в программе.
Запрограммировать переход по метке можно согласно примеру:
<Ahref=#метка>текст</A>,
где: # – ключевой символ; метка –выбранное имя для метки; текст - запись,
которая будет выглядеть на экране браузера как ссылка.
Установить тег с меткой в нужном месте HTML-программы можно
следующим образом: перед фрагментом HTML-программы, на который
должен выполниться переход записать команду-метку: <A name =
“метка”>. При этом имя метки должно быть то же самое, что и в команде,
задающей переход, парный тег </A>может быть опущен.
2.8.2. Переход к другому документу
11
Для того, чтобы браузер загрузил в свое окно новый HTMLдокумент, необходимо прописать в программе ссылку при помощи
команды <A> с атрибутом href=имя_файла.
Общий вид программы
Комментарий
...
<A href=”имя_файла”>текст</A>
Выполнить файл "имя_файла". На экран
выводится ссылка: текст при щелчке
пользователя на ссылке браузер строит на
экране документ по программе, заданной в
файле "имя_файла".
2.8.3. Переход к метке другого документа
Существует метод для объединения задач передачи управления в
другую часть документа и передачи управления в другую программу
(HTML-файл). Этот метод заключается в передачи управления из одного
документа к метке внутри другого.
Общий вид программы: Комментарий:
Первый HTML-файл
Приступить к показу фрагмента с меткой
"метка" в файле "имя_файла".
<A href=”имя_файла#метка”> На экран выводится ссылка: текст
Текст
при щелчке пользователя на ссылке
</A>
браузер строит на экране документ
Второй HTML-файл
по программе, заданной в файле
<A name=”метка”>
"имя_файла", начиная с фрагмента с меткой "метка"
Графика
2.9.
Картинку можно помещать в документ почти так же, как и
текстовый символ при помощи команды <IMG>. Команда не имеет
парного закрывающего тега, но имеет много атрибутов.
Атрибут src = имя файла. Самым главным атрибутом команды
является атрибут src, при помощи которого можно задать имя файла с
картинкой. Например, команда <IMG src = “img1.gif”> – браузер
отобразить на экране графический файл img1.gif из текущего каталога.
Атрибут alt = "текст надписи". Если браузер не находит картинки
в указанном месте на диске, он вместо нее рисует на экране маленький
прямоугольник и вписывает в него надпись, которая задана атрибутом alt:
<IMG src=”monstr.jpg” alt="Страшный зверь">.
Атрибуты width = n и height = m. Эти атрибуты задают ширину и
высоту (в пикселах) прямоугольника, в который выводится картинка. Если
атрибуты не заданы, то картинка рисуется в естественных размерах.
2.10. Фоновые изображения
12
Вместо одноцветной заливки в качестве фона документа можно
использовать картинку. Эта картинка будет, повторяясь, укладываться в
экранное поле наподобие паркетных плиточек. Фоновая картинка задается
в команде BODY атрибутом background:
<BODY “background” = "имя файла с картинкой">
Пример:
<BODY background = "./pic/fon1.jpg">
2.11. Таблицы
В практическом HTML-программировании таблицы незаменимы для
создания левых и правых полей страницы, выравнивания элементов на
экране, многоколонной верстки, наложения картинок друг на друга, а
также для отображения на экране табличного материала.
2.11.1.
Программирование таблицы
Таблица задается командой <TABLE> ... </TABLE>. Внутри этих
тэгов задаются строки командами <TR> ... </TR>, внутри строк задаются
клетки (ячейки) командами <TD> ... </TD>. Таким образом, по строкам
описывается вся структура таблицы. На рис. 3 изображена структура
построения таблиц в HTML-документах.
Рис. 3. Структура таблицы
Атрибуты команды TABLE: align=(left, right) – выравнивание по
горизонтали; width=(число или процент) – ширина таблицы; cellpadding=
(число) – расстояние между содержимым ячейки и рамкой; cellspacing=
(число) – расстояние между ячейками таблицы; bgcolor=(цвет) – цвет фона
таблицы; background=(файл) – фоновая картинка; border=(число) – ширина
линий рамки; bordercolor=(цвет) – цвет линий рамки; bordercolordark=
(цвет) – цвет рамки (снизу и справа); bordercolorlight=(цвет) – светлый
цвет рамки (сверху и слева).
2.11.2.
Атрибуты команды TR
13
HTML-таблица состоит из строк, каждая из которых задается
командой <TR>, описания ячеек табличной строки </TR>. Варьируя
атрибутами команды TR, можно установить те или иные свойства
одновременно для всех ячеек строки. Атрибуты команды TR включают в
себя: align=(left, center, right) – выравнивание по горизонтали; valign=(top,
center, bottom, baseline) – выравнивание по вертикали; bgcolor=(цвет) –
цвет фона; bordercolor=(цвет) – цвет линий рамки; bordercolordark=(цвет) –
цвет рамки (снизу и справа); bordercolorlight=(цвет) – светлый цвет рамки
(сверху и слева).
2.11.3.
Атрибуты команды TD (TH)
Каждая табличная строка состоит из ячеек, которые последовательно
описываются командами TD (обычная ячейка) и (или) TH (ячейказаголовок): <TR> описание содержимого ячейки </TR>; <TH> описание
содержимого ячейки </TH>.
Содержимое обычной ячейки по умолчанию горизонтально
выравнивается по левому краю, а ячейки-заголовка – по центру. Команды
TD и TH, помимо атрибутов TABLE, имеют следующие атрибуты: nowrap
– выключение автоматического разрыва строк; colspan=(число) – ширина
большой ячейки (в столбцах); rowspan=(число) – высота большой ячейки
(в строках).
2.11.4.
Таблицы, вложенные друг в друга
Используя таблицы, можно выровнять информационные блоки на
экране и разместить их в соответствии с дизайн-проектом документа.
Метод вложенных таблиц позволяет создавать более интересные
интерфейсы WEB-страниц.
Пример кода создания вложенных таблиц:
<html><body>
<table border=”0” cellpadding=”0” cellspacing=”0” width=”100%”>
<tr>
<td><img src="dino.gif" width=”110” height=”111” align=”center”></td>
<td width="99%" bgcolor="#006600" align=”center”>
<font size="6" face="comic sans ms" color="#66ff66"><strong>
Вас приветствует "Красный уголок"</strong></font></td>
</tr><tr>
<td bgcolor="#006600" align=”center”>
<font face="comic sans ms" size=”7” color="#66ff66" style="comic sans ms">
выбери<br>тему:
<td>
14
<table border=”0” bordercolor="#ffffff" cellpadding=”0” cellspacing=”1”>
<tr>
<td align=”center”><img src="704.jpg" width=”180” height=”160”></td>
<td width=”100%” align="center">
<font face="comic sans ms" size=”6” color="#006600">звери</font></td>
</tr><tr>
<td align=”center”><img src="469017.jpg" width=”180” height=”160”></td>
<td width=”100%” align="center"><font face="comic sans ms" size=”6”
color="#006600">птицы</font></td>
</tr> <tr>
<td align=”center”><img src="i427047.jpg" width=”180”
height=”160”></td>
<td width=”100%” align="center"><font face="comic sans ms" size=”6”
color="#006600">рыбы</font></td>
</tr>
</table>
</td>
</tr>
</table></html>
Результат исполнения кода представлен на рис. 4.
Рис. 4. Пример использования вложенных таблиц для оформления
HTML-страниц
15
3. Ход работы
Задание:
Создать html-документ, разметить его в соответствии с вариантом (см.
далее по тексту). Для ВСЕХ ВАРИАНТОВ в разметке html-документа
использовать:
 тег <DOCTYPE>
 тег <meta> для определения кодировки текста;
 тег <!-- --> комментария;
 теги: <p>, <br>, <div>, <span>, <hr>, один из <h1>  <h6>, <b>, <i>,
<u>, <sub>, <sup>, <pre>, <mark>, <details>, <summary>;
 продемонстрировать отличие в тегах <div> и <span>;
 теги <figure>, <img>, <figcaption> для вставки изображения;
 тег <a> для разметки гиперссылок, разметить ссылки: на другой
документ, в пределах размечаемого документа, на email;
 теги для разметки списка, таблицы, формы в соответствии с вариантом
(см. далее по тексту).
16
Вариант 1:
Вариант 2:
17
Вариант 3:
Вариант 4:
18
Вариант 5:
Вариант 6:
19
Вариант 7:
Вариант 8:
20
Вариант 9:
Вариант 10:
21
Порядок выполнения лабораторной работы:
1. Запустить текстовый редактор.
2. Разметить html-документ в соответствии с заданным вариантом. Для
справки о тегах и их атрибутах использовать справочники, расположенные
по адресам https://www.w3schools.com/html/default.asp и
https://html5book.ru/html-html5.
Стандарт HTML 5 расположен по адресу
https://www.w3.org/standards/techs/html.
3. Проверить соответствие выполненной разметки стандарту HTML 5,
использовав валидатор WWW Консорциума, расположенный по адресу
http://validator.w3.org.
22
Часть 2. Каскадные таблицы стилей CSS
Цель работы:
Изучить основы каскадных таблицы стилей CSS 3.
Задание:
Оформить html-документ, полученный в результате выполнения
лабораторной работы №1 «Статический html-документ», добавив каскадные
таблицы стилей. Изменить оформление:
 документа в целом (фон и т.п.);
 текста;
 гиперссылок;
 списка;
 таблицы.
Использовать определение стилей для тегов и классы стилей,
псевдоклассы.
Использовать три способа определения каскадных таблиц стилей:
 с помощью тега <link>;
 с помощью тега <style>;
 с помощью параметра style тега.
Продемонстрировать действие приоритетов при применении различных
способов определения CSS;
23
1) Создать меню, используя свойства CSS.
Повторите страницу по данному по образцу (обратите внимание, что при
наведении мышью на пункт меню – меняется внешний вид этого пункта в
соответствии с вариантом.
Вариант 1:
Вариант 2:
Вариант 3:
Вариант 4 (Здесь один пункт – Новости – изображается статично,
остальные при наведении мышью меняют внешний вид):
24
Вариант 5:
Вариант 6: (Здесь один пункт – 7 – изображается статично, остальные при
наведении мышью меняют внешний вид):
25
2) Задачи на позиционирование элементов
Вариант 1:
Вариант 2:
Вариант 3:
Вариант 4: (с помощью свойства z-index)
26
Вариант 5: (с помощью свойства z-index)
Вариант 6: (с помощью свойства z-index)
Вариант 7:
27
3) Создать макет страницы, используя свойства CSS.
Вариант 1:
28
Вариант 2:
29
Вариант 3:
30
Вариант 4:
31
Вариант 5:
32
Вариант 6:
33
Порядок выполнения лабораторной работы:
1. Запустить текстовый редактор.
2. Оформить с помощью каскадных таблиц стилей html-документ, полученный
в результате выполнения лабораторной работы №1, в соответствии с
заданным вариантом. Для справки о свойствах CSS и их значениях
использовать справочники, расположенные по адресам
https://www.w3schools.com/css/default.asp и http://htmlbook.ru/css.
Стандарты CSS 3 расположены по адресу https://www.w3.org/Style/CSS.
3. Протестировать оформленный документ в браузере.
Содержание отчета:
По двум лабораторным работам №1 и №2 оформляется один отчет.
 цель работы;
 задание;
 порядок выполнения лабораторной работы;
 html-разметка созданного документа, включая созданные стили;
 скриншот с результатами валидации html-документа;
 скриншот оформленного html-документа;
 выводы.
34
Теоретические сведения
Каскадные таблицы стилей CSS (Cascading style sheets) — формальный
язык описания внешнего вида документа, созданного с использованием языка
разметки гипертекста.
Каскадные таблицы стилей позволяют разделить описание логической
структуры html-документа (выполненное с помощью языка разметки) и
описание внешнего вида html-документа (выполненное с помощью CSS).
Существует три способа определения стилей: 1) в отдельном файле,
подключаемом к html-документам, 2) с помощью тега <style> непосредственно
в некотором html-документе и 3) с помощью атрибута style непосредственно в
некотором теге.
Наиболее высокий приоритет имеет стиль, определенный в теге, затем
следует определение стиля с помощью тега style и самым низким приоритетом
обладают свойства, определенные в отдельном файле.
Каскад приоритетов особенно удобен при разработке больших проектов,
например, сайтов, состоящих из большого числа html-документов. В этом
случае общее оформление может быть вынесено в отдельный файл, в htmlдокументе могут быть внесены изменения в стиль документа с помощью тега
<style>, атрибут тега style позволяет изменить оформление одного тега.
Стили определяются парами свойств и значений, перечень пар
заключается в фигурные скобки и пары разделяются точкой с запятой:
{property_1:value_1; property_2:value_2; … ; property_n:value_n}
где property — это свойство, а value — значение свойства.
Стиль можно определить для конкретного тега, например, задать для тега
<body> отображение белого текста на черном фоне:
body
{background-color:black; color:white}
35
Можно определить «чистый» стиль, не привязанный заранее к
конкретному тегу, в этом случае речь идет об определении класса стиля:
.small_silver
{font-size:10px; color:silver}
или
#big_gold
{font-size:150px; color:#D7B56D}
Применение класса стиля:
<p class=small_silver>Текст светло-серого цвета размером 10 пиксел</p>
или
<p id=big_gold>Текст светло-желтого цвета размером 150 пиксел</p>
Описание стилей для тегов или классов стилей выполняется одинаково
как в отдельном файле, так и в теге <style>.
Файл со стилями должен иметь расширение *.css и быть подключен к
html-документу с помощью тега <link>, расположенного в теге <head>.
<link href=”style.css” rel=”stylesheet” type=”text/css”>
Тег <style> также должен быть расположен в теге <head>, после тега
<link>.
Стили, определяемые непосредственно в теге с помощью атрибута style:
<p style=”text-decoration-line:underline; color:rgb(255,0,0)”>Подчеркнутый текст
красного цвета</p>
Возможно задание различных стилей отображения одного и того же htmlдокумента в различных средах представления, например, на экране или печати
с помощью атрибута media тега <link>.
Файл screen.css
body
{color:silver; background:black}
.forprint
{display:none}
36
Файл print.css
body
{color:black; background:white}
.forscreen
{display:none}
Файл media.html
<html>
<head>
<link href=”screen.css” rel=”stylesheet” type=”text/css” media=”screen”>
<link href=”print.css” rel=”stylesheet” type=”text/css” media=”print”>
</head>
<body>
<h1>Версия для <i class=forscreen>экрана</i><i class=forprint>печати</i></h1>
<div class=forscreen>Изображение будет видно на экране:
<p><img src=css3.jpg height=200px>
</div>
<div class=forprint><b>Внимание!</b> В версии для печати изображения нет.</div>
</body>
</html>
37
Контрольные вопросы
1. Назовите тег, обозначающий начало и конец HTML-документа.
2. Назовите тег, с помощью которого описывается заголовок HTMLдокумента.
3. Назовите тег, с помощью которого описывается тело документа.
4. Назовите теги, с помощью которых описываются заголовки
разного уровня для оформления текстов.
5. Назовите тег, с помощью которого задается абзац HTMLдокумента.
6. Назовите тег, с помощью которого задается принудительный
разрыв строки.
7. Назовите тег, с помощью которого задается цвет шрифта.
8. Назовите тег для увеличения шрифта по отношению к текущему
размеру шрифта.
38
Лабораторная работа №3
3. Цели и задачи лабораторной работы
Цель работы: научиться создавать динамические HTML-страницы с
применением
языка
программирования
PHP.
Научиться
создавать
приложения, интегрированные с СУБД.
1.2. Задачи работы
10. Изучить теоретические основы:
 ознакомиться с синтаксисом языка PHP;
 изучить методы взаимодействия Web-приложения с СУБД MySQL.
11.Создать динамический Web-сайт из нескольких страниц, с
применением языка PHP.
12.
13.
Отразить проделанные действия в отчете.
Написать осмысленный вывод.
1.3. Исходные данные
3. Установленный и настроенный в рамках первой лабораторной работы
WEB-сервер.
4. Инструментальные средства для работы с HTML, PHP и MySQL.
5. Макет HTML-страницы,
лабораторной работы.
созданный
в
рамках
второй
2. Теоретические основы
3.1.
Язык PHP
PHP (англ. PHP: Hypertext Preprocessor – «PHP: препроцессор
гипертекста», англ. Personal Home Page Tools (устар.) – «Инструменты для
создания персональных веб-страниц») – скриптовый язык общего
назначения, изначально созданный для генерирования HTML-страниц на
веб-сервере.
Наибольшее распространение PHP получил в области вебразработки. В настоящее время поддерживается подавляющим
большинством хостинг-провайдеров, входит в LAMP – распространённый
набор для создания веб-сайтов (Linux, Apache, MySQL, PHP).
РНР – это действующий на стороне сервера встраиваемый в HTML
язык, имеющий синтаксис, близкий к языку Си. Язык РНР дает
39
возможность вставлять в файлы HTML инструкции языка PHP для
создания динамического содержания. Эти инструкции обрабатывает
препроцессор-интерпретатор РНР и заменяет их тем содержимым, которое
производит этот код. Стандартное расширение файла с PHP-программой –
php.
3.2. Синтаксис PHP
PHP-код включаются в html-код в следующем виде:
<?PHP текст_кода ?>
или
<?PHP
текст_кода;
?>
Например, вставка содержимого файла будет выглядеть так:
<?PHP include "./top.php"; ?>
3.2.1. Комментарии
PHP поддерживает комментарии 'C', 'C++' и оболочки Unix.
Например:
<?php
echo "This is a test"; // Это однострочный комментарий в стиле c++
/* Это многострочный комментарий,
это ещё одна его строка */
echo "This is yet another test";
echo "One Final Test"; # Это комментарий в shell-стиле
?>
Echo
<?php echo "Эта информация будет выведена в HTML";?>
3.2.2. Присвоение значений переменным
Переменные в программах на PHP, отделяются символами $.
$city = "Kazan";
city – переменная
Kazan – значение
3.2.3. Некоторые операции
Инкремент/декремент:
++$a Pre-increment Увеличивает $a на 1, затем возвращает $a.
40
$a++ Post-increment Возвращает $a, затем увеличивает $a на 1.
--$a Pre-decrement Уменьшает $a на 1, затем возвращает $a.
$a-- Post-decrement Возвращает $a, затем уменьшает $a на 1.
Арифметические:
$a + $b Сложение Сумма $a и $b.
$a - $b Вычитание Разность $a и $b.
$a * $b Умножение Произведение $a и $b.
$a / $b Деление Частное от деления $a на $b.
$a % $b Modulus Целочисленный остаток от деления $a на $b.
Выражения сравнения возвращают 0 или 1, означая FALSE или
TRUE соответственно. PHP поддерживает > (больше), >= (больше или
равно), == (равно), != (не равно), < (меньше) и <= (меньше или равно). Эти
выражения чаще всего используются внутри условных операторов, таких
как if.
Сравнения:
$a == $b равно TRUE, если $a равно $b.
$a != $b не равно TRUE, если $a не равно $b.
$a <> $b не равно TRUE, если $a не равно $b.
$a < $b меньше TRUE, если $a строго меньше $b.
$a > $b больше TRUE, если $a строго больше $b.
$a <= $b меньше или равно TRUE, если $a меньше или равно $b.
$a >= $b больше или равно TRUE, если $a больше или равно $b.
Строковые:
Конкатенация – операция ('.'), которая возвращает объединение из
правого и левого аргументов. Вторая – операция присвоения ('.='), которая
присоединяет правый аргумент в левому аргументу.
$a = "Hello ";
$b = $a . "World!"; // теперь $b содержит "Hello World!"
$a = "Hello ";
$a .= "World!"; // теперь $a содержит "Hello World!"
41
3.2.4. Некоторые операторы
if/else
if ($a > $b) {
echo "a больше чем b";
} else {
echo "a не больше чем b";
}
while
$i = 1;
while ($i <= 10) {
echo $i++; /* будет печататься значение $i++ до тех пор пока $i не
больше 10
*/
for
for ($i = 1; $i <= 10; $i++) {
echo $i; /* будет выполнятся цикл от $i=1 $i <= 10 с шагом $i++ */
}.
3.3. Работа с массивами
Язык PHP реализует модель ассоциативных массивов. Под
ассоциативным массивом принято понимать массив, в котором в качестве
индексов могут выступать произвольные значения. Фактически это
значит, что массив реализован в виде хэш-таблицы. Иными словами,
массив PHP представляет собой упорядоченное множество пар вида
“ключ-значение”.
Для создания массива используется языковая конструкция array().
Использование array напоминает использование функции, но на самом
деле это оператор языка. В качестве аргументов array могут быть поданы
значения элементов массива в порядке их следования или список пар
“ключ элемента-значение элемента”.
Например:
$a = array(1,«2»,3);
Данная конструкция создает массив с множеством пар вида {0 – 1, 1
– «2», 2 – 3 }. В данном перечислении первый элемент пары – ключ, по
которому осуществляется доступ, а второй элемент – значение.
$b = array(«first name» => «Bill», «second name»=>«Gates»);
42
В определении данного массива пары “ключ-значение”
представлены в явном виде. При создании массива подобные описания
могут чередоваться или быть вложенными.
$c = array( «numbers» =>array( 1, 3, 5, 6=>7, 9 ),
array(«q»,«er»=>«ty»,«w»)
);
Результатом работы приведенной выше конструкции будет
следующее множество пар: { 0 – { 0 – «q», 1 – «w», «er» – «ty» },
«numbers» – { 0 – 1, 1 – 3, 2 – 5, 3 – 9, 6 – 7 } }.
3.4. Формы. Методы GET и POST
Одно из главнейших достоинств PHP – то, как он работает с
формами HTML. Здесь основным является то, что каждый элемент формы
автоматически станет доступен вашим программам на PHP.
Вот пример формы HTML:
Простейшая форма HTML
<form action="action.php" method="POST">
Ваше имя: <input type="text" name="name" />
Ваш возраст: <input type="text" name="age" />
<input type="submit">
</form>
Это обычная форма HTML без каких-либо специальных тегов. Когда
пользователь заполнит форму и нажмет кнопку отправки, будет вызвана
страница action.php. В этом файле может быть следующий текст:
Здравствуйте, <?php echo $_POST["name"]; ?>.
Вам <?php echo $_POST["age"]; ?> лет.
Пример вывода данной программы:
Здравствуйте, Сергей.
Вам 30 лет.
Принцип работы данного кода следующий. Переменные The
$_POST["name"] и $_POST["age"] автоматически установлены для вас
средствами PHP. Заметим, что метод отправки формы - POST. Если бы мы
использовали метод GET, то информация нашей формы была бы в
суперглобальной переменной $_GET.
43
3.5. Работа с MySQL
Для работы с базами данных в PHP предусмотрен ряд функций.
Рассмотрим их по порядку.
3.5.1. Функция mysql_connect
resource mysql_connect ([string server [, string username [, string
password]]])
Эта функция устанавливает соединение с сервером server MySQL и
возвращает дескриптор соединения с базой данных, по которому все
другие функции, принимающие этот дескриптор в качестве аргумента,
будут однозначно определять выбранную базу данных. Вторым и третьим
аргументами этой функции являются имя пользователя username и его
пароль password соответственно:
<?php
$dblocation = "localhost"; // Имя сервера
$dbuser = "root"; // Имя пользователя
$dbpasswd = ""; // Пароль
$dbcnx = @mysql_connect($dblocation,$dbuser,$dbpasswd);
if (!$dbcnx) // Если дескриптор равен 0 соединение не установлено
{
echo("<P>В настоящий момент сервер базы данных не доступен,
поэтому
корректное отображение страницы невозможно.</P>");
exit();
}
?>
Переменные $dblocation, $dbuser и $dbpasswd хранят имя сервера,
имя пользователя и пароль, и, как правило, прописываются в отдельном
файле (к примеру, config.php), который потом вставляется в каждый PHPфайл, в котором имеется код для работы с MySQL:
<?
$dblocation = "localhost";
44
$dbname = "forum";
$dbuser = "root";
$dbpasswd = "";
?>\
3.5.2. Функция mysql_close
bool mysql_close ([resource link_identifier])
Эта функция разрывает соединение с сервером MySQL, и
возвращает true при успешном выполнении операции и false в противном
случае. Функция принимает в качестве аргумента дескриптор соединения
с базой данных, возвращаемый функцией mysql_connect.
К примеру:
// устанавливаем соединение с базой данных
$dbcnx = @mysql_connect($dblocation,$dbuser,$dbpasswd);
if (!$dbcnx)
{
// Выводим предупреждение
echo ("<P>В настоящий момент сервер базы данных не доступен,
поэтому
корректное отображение страницы невозможно.</P>");
// Завершаем работу в случае неудачи
exit();
}
if(mysql_close($dbcnx)) // разрываем соединение
{
echo("Соединение с базой данных прекращено");
}
else
{
echo("Не удалось завершить соединение");
}
3.5.3. Функция mysql_select_db
bool mysql_select_db (string database_name [, resource link_identifier])
45
Использование этой функции эквивалентно вызову команды USE в
SQL-запросе, т. е. функция mysql_select_db выбирает базу данных для
дальнейшей работы, и все последующие SQL-запросы применяются к
выбранной базе данных. Функция принимает в качестве аргументов
название выбираемой базы данных database_name и дескриптор
соединения resource. Функция возвращает true при успешном выполнении
операции и false в противном случае.
К примеру:
<?php
// Код соединения с базой данных
if (!@mysql_select_db($dbname, $dbcnx))
{
echo( "<P>В настоящий момент база данных не доступна, поэтому
корректное отображение страницы невозможно.</P>" );
exit();
}
?>
Имеет смысл помещать функции для соединения и выбора базы
данных в тот же файл (config.php), где объявлены переменные с именами
сервера, пользователя и паролем:
<?php
$dblocation = "localhost";
$dbname = "softtime";
$dbuser = "root";
$dbpasswd = "";
$dbcnx = @mysql_connect($dblocation,$dbuser,$dbpasswd);
if (!$dbcnx)
{
echo( "<P>В настоящий момент сервер базы данных не доступен,
поэтому
корректное отображение страницы невозможно.</P>" );
exit();
}
46
if (!@mysql_select_db($dbname, $dbcnx))
{
echo( "<P>В настоящий момент база данных не доступна, поэтому
корректное отображение страницы невозможно.</P>" );
exit();
}
?>
3.5.4. Функция mysql_query
resource mysql_query (string query)
Эта функция применяется для отправки серверу SQL-запросов.
Функция возвращает дескриптор запроса в случае успеха и false в случае
неудачного выполнения запроса. В листинге 13.32 показан код, с
помощью которого извлекается одна строка из таблицы authors базы
данных forum.
<?php
include "config.php";
$ath = mysql_query("select * from authors;");
if($ath)
{
$author = mysql_fetch_array($ath);
echo "<br>имя = ".$author['name']."<br>";
echo "пароль = ".$author['passw']."<br>";
echo "e-mail = ".$author['email']."<br>";
echo "url = ".$author['url']."<br>";
echo "ICQ = ".$author['icq']."<br>";
echo "about = ".$author['about']."<br>";
echo "photo = ".$author['photo']."<br>";
echo "time = ".$author['time'];
}
else
{
echo "<p><b>Error: ".mysql_error()."</b></p>";
exit();
47
}
?>
3.5.5. Функция mysql_fetch_array
array mysql_fetch_array (resource result)
Эта функция возвращает значения полей в виде ассоциативного
массива, в качестве аргумента принимает дескриптор запроса
возвращаемый функцией mysql_query. Вот как с помощью этой функции
можно вывести все строки таблицы authors:
<?php
include "config.php";
$ath = mysql_query("select * from authors;");
if($ath)
{
// Определяем таблицу и заголовок
echo "<table border=1>";
echo
"<tr><td>имя</td><td>пароль</td><td>email</td><td>url</td></tr>";
// Так как запрос возвращает несколько строк, применяем цикл
while($author = mysql_fetch_array($ath))
{
echo "<tr><td>".$author['name']."&nbsp;</td><td>".$author['passw']."
&nbsp </td><td>".$author['email']."&nbsp;</td><td>".
$author['url']."&nbsp;</td></tr>";
}
echo "</table>";
}
else
{
echo "<p><b>Error: ".mysql_error()."</b><p>";
exit();
}
?>
48
3.5.6. Функция mysql_result
mixed mysql_result (resource result, int row)
С помощью этой функции можно получить доступ к отдельному
полю записи. Допустим, нам нужно вывести имя автора, который первым
найдется в базе данных. Сделать это можно следующим образом:
<?php
include "config.php";
$ath = mysql_query("select name from authors;");
if($ath)
{
echo mysql_result($ath,0,'name');
}
else
{
echo "<p><b>Error: ".mysql_error()."</b><p>";
exit();
}
?>
3.5.7. Функция mysql_fetch_object
object mysql_fetch_object (resource result)
Эта функция возвращает поля записи данных в виде объекта. Ниже
приведен пример, в котором с помощью этой функции из таблицы authors
выводятся имя, URL и e-mail авторов.
<?php
include "config.php";
$ath = mysql_query("select * from authors;");
if($ath)
{
while($row = mysql_fetch_object($ath))
{
49
echo "<p>name: ".$row->name."</p>";
echo "<p>url: ".$row->url."</p>";
echo "<p>email: ".$row->email."</p>";
}
}
else
{
echo "<p><b>Error: ".mysql_error()."</b><p>";
exit();
}
?>
3.5.8. Функция mysql_fetch_row
array mysql_fetch_row (resource result)
В отличие от функции mysql_fetch_object, эта функция возвращает
не объект, а массив, в котором содержатся значения полей:
<?php
include "config.php";
$ath = mysql_query("select * from authors;");
if($ath)
{
while($row = mysql_fetch_row($ath))
{
echo "<p>name: ".$row[1]."</p>";
echo "<p>url: ".$row[4]."</p>";
echo "<p>email: ".$row[3]."</p>";
}
}
else
{
echo "<p><b>Error: ".mysql_error()."</b><p>";
exit();
}
?>
Приведенный набор функций является базовым и полностью
покрывает все поставленные в работе задачи.
50
4. Ход работы
1. Создайте динамический WEB-сайт на основе макета, созданного в
предыдущей лабораторной работе, с использованием языка PHP.
2. Придумайте любую сущность, с любым количеством полей и
создайте для нее таблицу MySQL.
3. Создайте страницу представляющую экземпляры сущности.
4. Создайте форму и обработчик, позволяющий добавлять
экземпляры сущности.
5. Добавьте возможность удаления экземпляров сущности.
Контрольные вопросы
1. Каким образом вставить конструкции PHP в HTML-документ?
2. Каким образом обеспечить, чтобы встречающиеся в строке
переменные были заменены их значениями?
3. Каковы правила определения функций в языке PHP?
4. Каковы особенности передачи значений переменных из HTMLформы в переменные PHP?
5. Каким образом осуществляется взаимодействие с базами данных
в языке PHP?
51
Лабораторная работа №4
1. Цели и задачи лабораторной работы
Цель работы: понять целесообразность использования CMS
(систем управления контентом/содержимым), получить практические
навыки в использовании CMS. Ознакомиться со способами
размещения сайта в сети Интернет и получить практические навыки
работы с хостингом.
2.2. Задачи работы
14. Изучить теоретические основы.
15. Установить систему управления содержимым WordPress.
16. Установить несколько плагинов на WordPress.
17. Разместить сайт на бесплатном хостинге в интернете.
18. Отразить проделанные действия в отчете.
19. Написать осмысленный вывод.
2.3. Исходные данные
6. Репозиторий установочных пакетов WordPress –
http://ru.wordpress.org/releases/.
7. Репозиторий бесплатных тем для WordPress –
http://www.wpfree.ru/.
8. Перечень бесплатных хостингов:
•
http://jino-net.ru/
•
http://www.best-host.ru/
•
http://www.000webhost.com/
•
http://ayola.net/
3. Теоретические основы
4.1.
Система управления содержимым
Система управления содержимым (контентом) (англ. – Content
management system, CMS) – компьютерная программа или система,
используемая для обеспечения и организации совместного процесса
создания, редактирования и управления текстовых и мультимедиа
документов (содержимое или контента). Обычно это содержимое
рассматривается как неструктурированные данные предметной
задачи в противоположность структурированным данным, обычно
находящимися под управлением СУБД.
4.1.1. Разновидности CMS
В общем случае CMS делятся:
 на ECMS – Enterprise Content Management System (Система
управления контентом масштаба предприятия);
 на WCMS – Web Content Management System (Система
управления WEB-контентом).
В силу того, что ECMS имеют глубокую внутреннюю
классификацию по предметным областям (HRM, DMS, CRM, ERP и
т.д.), термин CMS заместил собой WCMS, превратившись в синоним
системы управления сайтами.
Подобные CMS позволяют управлять текстовым и графическим
наполнением веб-сайта, предоставляя пользователю удобные
инструменты хранения и публикации информации.
Существует
множество
готовых
систем
управления
содержимым сайта, в том числе и бесплатных. Их можно разделить
на три типа по способу работы:
1. Генерация страниц по запросу. Системы такого типа работают
на основе связки «Модуль редактирования → База данных →
Модуль представления». Модуль представления генерирует
страницу с содержанием при запросе на него на основе
информации из базы данных. Информация в базе данных
изменяется с помощью модуля редактирования. Страницы
заново создаются сервером при каждом запросе, что в свою
очередь создаёт дополнительную нагрузку на системные
ресурсы. Нагрузка может быть многократно снижена при
использовании средств кэширования, которые имеются в
современных веб-серверах.
53
2. Генерация страниц при редактировании. Системы этого типа –
суть программы для редактирования страниц, которые при
внесении изменений в содержание сайта создают набор
статических страниц. При таком способе в жертву приносится
интерактивность между посетителем и содержимым сайта.
3. Смешанный тип. Как понятно из названия, сочетает в себе
преимущества первых двух. Может быть реализован путём
кэширования – модуль представления генерирует страницу
один раз, в дальнейшем она в несколько раз быстрее
подгружается из кэша. Кэш может обновляться как
автоматически, по истечении некоторого срока времени или
при внесении изменений в определённые разделы сайта, так и
вручную по команде администратора. Другой подход –
сохранение определённых информационных блоков на этапе
редактирования сайта и сборка страницы из этих блоков при
запросе соответствующей страницы пользователем.
4.1.2. Особенности CMS
Система
управления
–
программа
предоставляющая
инструменты для добавления, редактирования, удаления информации
на сайте. Система управления – это инструмент программиста и
пользователя для управления сайтом, позволяющий производить
разнообразные действия по его управлению. Встречаются
разнообразные системы управления сайтом, среди которых
встречаются платные и бесплатные, построенные по разным
технологиям. Каждый сайт имеет панель управления, которая
является только частью всей программы, но достаточна для
управления им.
Основные задачи CMS:
 собрать в единое целое и объединить на основе ролей и задач
все разнотипные источники знаний и информации, доступные
как внутри организации, так и за ее пределами;
54
 обеспечить взаимодействие сотрудников, рабочих групп и
проектов с созданными ими базами знаний, информацией и
данными так, чтобы их легко можно было найти, извлечь и
повторно использовать привычным для пользователя
образом.
Термин контент-менеджер обозначает род профессиональной
деятельности – редактор сайта. Большая часть современных систем
управления содержимым реализуется с помощью визуального
(WYSIWYG) редактора – программы, которая создаёт HTML-код из
специальной упрощённой разметки, позволяющей пользователю
проще форматировать текст.
4.2. WordPress
WordPress –
CMS с открытым исходным кодом,
распространяемая под GNU GPL. Написан на PHP, в качестве базы
данных использует MySQL. Сфера применения – от блогов до
достаточно сложных новостных ресурсов и даже интернет-магазинов.
Встроенная система «тем» и «плагинов» вместе с удачной
архитектурой позволяет конструировать практически любые проекты.
4.2.1. Возможности CMS WordPress
На 2012 год WordPress – одна из самых популярных система для
ведения автономных блогов. Таких результатов удалось достичь
благоларя сочетанию следующих особенностей:
 возможность публикации с помощью сторонних программ и
сервисов;
 простота установки, настройки;
 поддержка RSS, Atom, trackback, pingback;
 подключаемые модули (плагины) с уникальной простой
системой их взаимодействия с кодом;
 поддержка так называемых «тем», позволяющих легко менять
как внешний вид, так и способы вывода данных;
55
 «темы» реализованы как наборы файлов-шаблонов на PHP,
что положительно сказывается на скорости и гибкости;
 доступные библиотеки «тем» и «плагинов».
4.3. Хостинг
Хостинг (англ. hosting) – услуга по предоставлению дискового
пространства для физического размещения информации на сервере,
постоянно находящемся в сети (обычно Интернет). Хостингом также
называется услуга по размещению оборудования клиента на
территории провайдера с обеспечением подключения его к каналам
связи с высокой пропускной способностью (колокация, от англ. –
colocation).
Обычно под понятием услуги хостинга подразумевают как
минимум услугу размещения файлов сайта на сервере, на котором
запущено ПО, необходимое для обработки запросов к этим файлам
(веб-сервер). Как правило, в услугу хостинга уже входит
предоставление места для почтовой корреспонденции, баз данных,
DNS, файлового хранилища и т.п., а также поддержка
функционирования соответствующих сервисов.
Хостинг баз данных, размещение файлов, хостинг электронной
почты, услуги DNS могут предоставляться отдельно как
самостоятельная услуга, либо входить в понятие услуги.
4.3.1. Выбор хостинга
Одним из важных критериев выбора хостинга является
используемая операционная система, поскольку от этого зависит
программное
обеспечение,
которое
будет
поддерживать
функциональность тех или иных сервисов. Важным аспектом
описания хостинга является наличие тех или иных служб и
возможностей:
 поддержка CGI/Perl, PHP, Python, ASP, Ruby;
 поддержка .htaccess (для Apache);
 поддержка баз данных,
56
а также установленные модули для каждой из возможностей. Хостинг
как услугу сравнивают и описывают по количественным
ограничениям:
 размер дискового пространства;
 количество месячного трафика;
 количество сайтов, которые можно разместить в рамках
одной учетной записи;
 количество FTP-пользователей;
 количество E-Mail-ящиков и объём места, предназначенного
для почты;
 количество баз данных и количество места под базы данных;
 количество одновременных процессов на пользователя;
 количество ОЗУ и максимальное время исполнения,
выделяемое каждому процессу пользователя;
и качественным ограничениям:
 свободные ресурсы CPU, оперативной памяти, которые
влияют на быстродействие сервера;
 пропускная способность каналов, которая влияет на загрузки
информации;
 удаленность оборудования хостера от целевой аудитории
сайта, которая влияет на загрузку информаци.
Некоторые платные хостинговые компании предоставляют
бесплатный тест на определённый период, по истечении которого
пользователь должен определиться, подходит ли для него выбранная
хостинговая компания и имеет ли смысл оплачивать большие
периоды. Как правило, такие тесты предоставляются только
владельцам доменов второго уровня во избежание спекуляций с
тестовыми аккаунтами.
Помимо платных хостеров существуют также и бесплатные
хостинг-компании, поддерживающие большинство описанных вебтехнологий. Однако в России они не распространены, поэтому люди
пользуются в основном услугами платного хостинга.
57
4.3.2. Виды хостинга
По условиям предоставления хостинг часто разделяется на
платный и бесплатный. Обычно компания, предоставляющая
бесплатный хостинг, зарабатывает путем показа рекламы на
страницах, размещенных на нем. Бесплатный хостинг, как правило,
медленнее платного, предоставляет только базовые услуги и иногда
ненадёжен (т.е. может закрыться). Частные лица для своих домашних
страничек на начальном этапе их развития используют бесплатный
хостинг. Общественные организации могут использовать как
платный хостинг, так и бесплатный. Коммерческие организации
практически всегда пользуются услугами платного хостинга. Также
можно разделить услуги хостинга по типу предоставляемого ресурса:
 виртуальный сервер – предоставляется место на диске для
размещения веб-сайтов, среда исполнения веб-сервисов
единая для многих пользователей, ресурсы распределены
между всеми пользователями на одном сервере, где может
размещаться от 50 до 1000 пользователей. Небольшие
дешевые
хостинг-провайдеры
часто
пренебрегают
безопасностью и вообще не разграничивают привилегий
пользователей, что позволяет одному пользователю на
сервере иметь доступ к сайтам сотен других пользователей. У
более крупных и дорогих провайдеров эта проблема, как
правило, решена.
 виртуальный выделенный сервер (VPS или VDS) –
предоставляется место на диске, часть общей памяти,
процессорное время сервера. Выглядит для пользователя так
же, как и как выделенный сервер, но физически на одном
реальном сервере располагается несколько виртуальных
серверов. Услуга предназначена для проектов средней
тяжести. В связи с тем, что четко разделить все ресурсы
сервера невозможно (в частности I/O операции, ресурсы
сетевой карты и др.), а многие провайдеры VPS продают
ресурсов больше, чем есть на сервере, надеясь на то, что
58
клиент задействует выделенный ему потенциал не полностью
(оверселлинг), часто заявленная мощность VPS сервера не
соответствует реальной.
 выделенный сервер – предоставляется сервер целиком.
Используется для реализации нестандартных задач
(сервисов), а также для размещения «тяжёлых» веб-проектов,
которые не могут сосуществовать на одном сервере с другими
проектами и требуют под себя все ресурсы сервера.
 колокация (Collocation) – предоставление места в датацентре
провайдера для оборудования клиента (обычно путем
монтажа в стойке) и подключение его к интернету.
5. Методические рекомендации по установке CMS
WordPress
Шаг 1: Загрузка и распаковка.
Загрузите и распакуйте дистрибутив WordPress, перейдя по
ссылке http://ru.wordpress.org/releases/.
Шаг 2: Создание базы данных и пользователя с phpMyAdmin.
Внимание: Данные инструкции приведены для phpMyAdmin
версии 2.6.0; поэтому внешний вид phpMyAdmin может отличаться
от внешнего вида phpMyAdmin, установленного на вашем вебсервере.
1. Если база данных, предназначенная для установки WordPress,
еще не создана в раскрывающимся слева меню Database, тогда
создайте ее:
а) выберите имя базы данных для WordPress (например,
'wordpress' или 'blog'), введите его в поле Create new
database и нажмите Create.
2. Нажмите на иконку Home, расположенную в левом верхнем
углу окна, для того, чтобы вернуться к основной странице
программы, затем нажмите Privileges. Если пользователь еще не
создан для установки WordPress, создайте его:
а) нажмите Add a new User;
59
б) выберите имя пользователя для WordPress (например,
'wordpress') и введите его в поле User name. (Убедитесь,
что поле Use text field: выбрано в раскрывающемся
списке.);
в) выберите пароль (желательно, если он будет включать в
себя символы, представленные в верхнем и нижнем
регистре, спец. символы, цифры и буквы), и введите его в
поле Password.
(Убедитесь,
что
поле Use
text
field: выбрано в раскрывающемся списке.) Введите пароль
заново в поле Re-type;
г) запишите имя пользователя и пароль, которые вы только
что создали;
д) оставьте без изменений все опции списка Global privileges;
е) нажмите Go.
3. Вернитесь к списку Privileges и нажмите на иконку Check
privileges, относящуюся к вашему пользователю для WordPress.
В секции Database-specific privileges выберите только что
созданную вами базу данных для WordPress и в
раскрывающимся списке укажите Add privileges to the following
database. Страница автоматически перегрузится и внесет
изменения в привилегии пользователя автоматически для
выбранной базы данных. Нажмите Check All, чтобы еще раз
проверить все привилегии пользователя, и нажмите Go.
4. На странице отчета обратите внимание на имя сервера, которое
идет после записи Server: вверху страницы. (Чаще всего он
носит значение localhost.)
Шаг 3: Настройка файла wp-config.php.
В данной части все изменения вносятся в следующую часть
кода:
// ** MySQL settings ** //
define('DB_NAME', 'putyourdbnamehere'); // Имя базы данных
define('DB_USER', 'usernamehere');
// Имя пользователя
MySQL
60
define('DB_PASSWORD', 'yourpasswordhere'); // ...и пароль
define('DB_HOST', 'localhost');
// 99% что вам не следует
вносить изменения в данную строчку кода
define('DB_CHARSET', 'utf8');
define('DB_COLLATE', '');
1. Возращаясь к Шагу 1, в котором вы распаковывали
дистрибутив с WordPress, переименуйте файл wp-configsample.php в файл wp-config.php.
2. Откройте переименованный файл wp-config.php с помощью
текстового редактора и внесите изменения в соответствии с
примером кода, приведенным выше:
DB_NAME
Имя базы данных, созданной для WordPress в Шаге 2 .
DB_USER
Имя пользователя для WordPress в Шаге 2.
DB_PASSWORD
Пароль, который вы выбрали для пользователя в WordPress
в Шаге 2.
DB_HOST
Имя хоста, который вы выяснили в Шаге 2 (чаще всего имеет
значение localhost).
DB_CHARSET
Кодировка базы данных, в большинстве случаев не требует
изменений.
DB_COLLATE
Проверка базы данных, чаще всего значение не требует
изменений и остается пустым.
3. Сохраните файл.
Шаг 4: Размещение файлов.
Теперь вам необходимо решить, в каком именно месте вашего
веб-сайта будет располагаться блог WordPress:
 в
корневом
катологе
вашего
веб-сайта,
(например,
http://example.com/);
61

в поддиректории (подкаталоге) на вашем веб-сайте (например
http://example.com/blog/).
Размещение файлов в корневом каталоге:
Перенесите все содержимое папки wordpress (но не саму папку)
в корневой каталог веб-сервера.
Размещение файлов в подкаталоге:
 Перенесите все содержимое папки wordpress на веб-сервер в
заранее созданную вами папку с желаемым названием, которая
располагается в корневом каталоге.
Шаг 5: Запуск установки.
Запустите веб-браузер для начала установки.
 Если вы разместили файлы WordPress в корневом каталоге вебсервера, тогда перейдите по ссылке: http://localhost/wpadmin/install.php.
 Если вы разместили файлы WordPress в подкаталоге, который
назвали, к примеру blog, перейдите по ссылке:http://
localhost.com/blog/wp-admin/install.php.
Обратите внимание – при установке вас попросят ввести
название вашего будущего Веб-блога и ваш адрес электронной
почты. Кроме того, вы можете поставить галочку напротив пункта
"показывать мой Веб-блог в поисковых системах", если вы не против
индексации вашего блога поисковыми системами. Вы можете не
ставить галочку напротив данного пункта, тогда ваш блог будет
доступен пользователям, однако поисковые системы не будут
проводить его индексацию.
Вся введенная вами информация на данном этапе установки
может быть далее изменена в Административной панели.
Решение проблем при запуске установки
 В том случае, если в процессе установки вы получили
сообщение об ошибке, связанной с базой данных:
62



вернитесь к Шагу 2 и Шагу 3 и проверьте правильность
введенных вами данных о созданных вами ранее базе
данных и пользователе в файле wp-config.php;
удостоверьтесь, что созданный вами ранее пользователь
обладает всеми правами на доступ к базе данных
WordPress;
удостоверьтесь, что запущен сервер, необходимый для
обеспечения работы базы данных.
Распространенные проблемы установки.
Ниже описаны часто встречающиеся проблемы, возникающие в
ходе установки системы.
Я вижу много ошибок Headers already sent. Как это
исправить?
Возможно, вы допустили ошибку при редактировании wpconfig.php.
1. Скачайте wp-config.php.
2. Откройте его в текстовом редакторе.
3. Убедитесь, что первая строка не содержит ничего, кроме <?php,
и что перед ней НЕТ ни текста, ни пробелов, ни пустых строк.
4. Убедитесь, что последняя строка не содержит ничего, кроме ?>,
и что после нее НЕТ ни текста, ни пробелов, ни пустых строк.
5. Сохраните файл и обновите страницу в браузере.
В начале установки часто появляется ошибка "Cannot modify
header information – headers already sent by (output started at
C:\xampp\htdocs\wordpress\wp-config.php:1) in ..." Откройте файл wpconfig.php в текстовом редакторе, например, notepad. Выбираете
"Сохранить файл как...", выбираете кодирование ANSI вместо
UNICODE или UTF. Обновляете страницу.
63
6. Ход работы
6. Загрузите дистрибутив WordPress с официального сайта
проекта.
7. Установите и настройте WordPress на локальном веб-сервере,
подготовленном вами в первой лабораторной работе.
8. Загрузите и установите любую бесплатную тему для
WordPress.
9. Установите три любые плагина для WordPress.
10. Выберите бесплатный хостинг. Выводы обоснуйте.
11. Разверните свой проект на выбранном бесплатном
хостинге.
Контрольные вопросы
1. Что такое CMS?
2. Какие виды CMS бывают?
3. Какими преимуществами обладает WordPress?
4. Что такое плагины для WordPress?
5. Какие разновидности
64
Лабораторная работа №5
1.
Цели и задачи лабораторной работы
1.1. Цель
Приобрести знания и навыки обработки данных вводимых
пользователем до их отправки на обработку средствами сценарных
языков на примере языка Visual Basic Script.
1.2. Задачи
1.
Изучить теоретические основы;
2.
Разработать форму взаимодействия с пользователем;
3.
Произвести обработку данных средствами сценарного
языка;
4.
Провести
проверку
корректности
работы
полученного
сценария;
5.
Отразить проделанные действия в отчете;
6.
Написать осмысленный вывод.
1.3 Исходные данные
1.
Репозиторий установочных пакетов WordPress –
http://ru.wordpress.org/releases/;
2.
Репозиторий бесплатных тем для WordPress –
http://www.wpfree.ru/;
3.
перечень бесплатных хостингов:
I. http://jino-net.ru/
II. http://www.best-host.ru/
III. http://www.000webhost.com/
65
IV. http://ayola.net/
2.
Теоретические основы
2.1 Сценарные языки
Сценарный язык – набор директив, интерпретируемый, но не
компилируемый
специальной
программой-интерпретатором,
исполнение которых происходит построчно каждый раз при
исполнении сценария.
Директива – команда, направленная на реализацию конкретной
задачи, исполнение которой потребует минимально необходимого, но
достаточного количества действий аппаратного обеспечения и
системного программного обеспечения для выполнения одного
действия в рамках поставленной задачи.
Интерпретация директив – процесс, представляющий собой
анализ на соответствие каждой директивы заранее заготовленным
эталонам и при совпадении директивы с эталоном, требующий от
интерпретатора
выполнения
действий,
предназначенных
для
конкретного эталона.
Интерпретатор – программа, считывающая файл сценария и в
процессе анализа директив, содержащихся в этом файле при
совпадении очередной директивы с заранее заготовленным эталоном
выполняющая действие, предназначенное для этого эталона.
2.1.1.
Виды сценарных языков
Самыми часто используемыми языками на момент написания
данного методического пособия являются:
66
Наименование Операционная система (среда)
Применения (исполнения)
VBS
ОС линейки Windows
JavaScript
Unix подобные ОС и ОС линейки Windows
AppleScript
MACOS
PHP
Почти все известные ОС
Python
Почти все известные ОС
Ruby
Почти все известные ОС
Основные принципы
2.1.2.
Сам по себе файл сценария не что иное, как текстовый файл с
расширением,
соответствующим
своему
языку.
Однако,
при
связывании сценария с HTML файлом существует возможность
интегрировать исходный текст сценария с исходным текстом HTML
страницы. Суммируя вышеизложенное, можно выделить два метода
применения сценариев:
V.
Создание отдельного файла сценария в общем случае
подразумевает следующий набор шагов:
 Запустить текстовый редактор (для этого достаточно либо
перейти
по
пути:
программы→Стандартные→Блокнот»,
«Пуск→Все
либо
выполнить
клавиатурную комбинацию WIN+R и прописав команду
«Notepad» в открывшемся диалоговом окне нажать на
клавишу Enter)
67
Замечание:
Для
написания
сценариев
подойдет
любой
текстовый редактор, позволяющий сохранить текстовый файл с
параметрами.
 Ввести программный код сценария
 Сохранить полученный файл на ПЗУ компьютера с
расширением, соответствующим написанному сценарию (в
нашем
случае
достаточно
«Файл→Сохранить»,
либо
либо
перейти
выполнить
по
пути:
клавиатурную
комбинацию Ctrl+S и в пункте «Тип файла» выбрать
параметр «Все файлы» все, что останется указать любое
имя и дополнить его конструкцией: «*.vbs»)
Замечание: В данном случае, как и для всех операционных
систем в целом символ звездочка (*), указывает на любое количество
любых символов и заменяется соответственно на любое имя
Создание HTML страницы с включением в нее сценарной
VI.
обработки данных в общем случае подразумевает следующий набор
шагов:
 Запустить текстовый редактор (для этого достаточно либо
перейти
по
пути:
программы→Стандартные→Блокнот»,
«Пуск→Все
либо
выполнить
клавиатурную комбинацию WIN+R и прописав команду
«Notepad» в открывшемся диалоговом окне нажать на
клавишу Enter)
Замечание:
Для
написания
сценариев
подойдет
любой
текстовый редактор, позволяющий сохранить текстовый файл с
параметрами.
68
 Ввести необходимый HTML код
Замечание: Сценарный код необходимо вносить в пару тегов
<Script></Script>,
с
параметром
Language
и
значением,
соответствующим используемому сценарному языку
 Сохранить полученный файл аналогично методу для
отдельного файла-сценария, но с расширением *.html
3.
Директивы, команды и операторы сценарного языка
Visual Basic Script
Как таковой VBS аналогичен по своим конструкциям и
встроенному инструментарию стандартному языку Visual Basic? А
значит, содержит следующие компоненты:
Операторы
I.
 Арифметические
 Логические
 Сравнения
Модифицирующие конструкции
II.

Условный оператор «If-Then-Else»

Условный оператор «Select-Case-Else»

Циклический оператор «Do-Loop»

Циклический оператор «While-Wend»

Циклический оператор «For-Next»

Циклический оператор «For-Each-Next»
Подпрограммы
III.

Процедуры

Функции
69
Встроенные процедуры и функции
IV.
V.

Строковые

Арифметические

Даты и времени
Ввод/Вывод данных
3.1. Арифметические операторы
Операция
Символ
Сложение
+
Вычитание
-
Умножение
*
Деление
/
Возведение в степень
^
Целочисленное деление
\
Конкатенация(объединение строк)
&
Замечание: Практически во всех сценарных обработках данных
применяются переменные(переменная именованная область памяти,
способная содержать данные определенного типа), применение
которых возможно без их объявления, что и будет применяться в
дальнейшем.
Примеры исполнения вышеописанных операторов:
70
/Начало кода/
X=2
Y=2
Z=X+Y
//Переменная Z содержит число 4
/Конец кода/
/Начало кода/
X=5
Y=1
Z=X-Y
//Переменная Z содержит число 4
/Конец кода/
/Начало кода/
X=5
Y=2
Z=X*Y
//Переменная Z содержит число 10
/Конец кода/
/Начало кода/
X=6
Y=3
Z=X/Y
//Переменная Z содержит число 2
71
/Конец кода/
/Начало кода/
X=5
Y=7
Z=X^Y
//Переменная Z содержит число 78 125
/Конец кода/
/Начало кода/
X=5
Y=2
Z=X\Y
//Переменная Z содержит число 2 т.к. возвращается лишь целая часть
от деления без остатка
/Конец кода/
/Начало кода/
X=«Пример»
Y=« кода»
Z=X&Y
//Переменная Z содержит текст «Пример кода»
/Конец кода/
Замечание: Текст всегда должен указываться в кавычках.
72
Замечание: В данном примере учтен пробел перед словом
«кода», что рекомендуется делать во избежание образования
«Слипшегося текста».
3.2. Логические операторы
Все
Операция
Символ
Логическое НЕ
Not
Логическое И
And
Логическое ИЛИ
Or
Исключающее логическое ИЛИ
Xor
логические
операторы
возвращают
результат,
соответственно своим аналогам в математической логике.
Пример:
/Начало кода/
X=1
Y=0
Z=X And Y
//Переменная Z содержит 0 т.к. одна из переменных содержит 0
/Конец кода/
73
3.3. Операторы сравнения
Операция
Символ
Равно
=
Не равно
<>
Больше
>
Меньше
<
Больше или равно
>=
Меньше или равно
<=
Эквивалентно
Is
В данном случае результатом обработки будет значение
Истина(True или 1) или Ложь(False или 0).
Пример:
/Начало кода/
X=8
Y=2
Z=X<Y
//Переменная Z содержит 0(Ложь или False) т.к. X(8) не может быть
меньше Y(2)
/Конец кода/
74
3.4. Оператор ветвления «If-Then-Else»
Предназначен для создания «Точки выбора» дальнейших
вариантов
действий,
в
зависимости
от
совпадения
условия
(предположения) с реальностью.
Синтаксис (структура):
If /*Условие*\ Then /*Действие*\ - Одновариантное ветвление
If /*Условие*\ Then
/*Действие*\
Else
/*Действие*\
- Двух вариантное ветвление
End If
If /*Условие*\ Then
/*Действие*\
ElseIf /*Условие*\ Then
/*Действие*\
ElseIf /*Условие*\ Then
/*Действие*\
ElseIf /*Условие*\ Then
/*Действие*\
Else
/*Действие*\
End If
End If
End If
-Многовариантное ветвление
End If
75
Данные структуры можно представить в формализованном виде
так:
Если условие_истинно То выполнить_действие
Или
Если условие_истинно То
выполнить_действие
В_остальных_случаях
выполнить_действие
Закончить_Ветвление
Закончить_Ветвление
Или
Если условие1_истинно То
выполнить_действие1
Если_Же условие2_истинно То
выполнить_действие2
Если_Же условие3_истинно То
выполнить_действие3
Если_Же условие4_истинно То
выполнить_действие4
В_остальных_случаях
выполнить_действие5
Закончить_Ветвление
Закончить_Ветвление
Закончить_Ветвление
Закончить_Ветвление
Примеры исполнения:
76
/Начало кода/
X=0
Y=2
If x<>0 then Z=X+Y
//Сложение не будет выполнено т.к. X=0
/Конец кода/
/Начало кода/
X=2
Y=0
If y<>0 then
Z=X+Y
Else
Z=10
End If
//Z примет значение 10 т.к. Y=0
/Конец кода/
/Начало кода/
X=2
Y=0
O=”+”
If O=”+” then
Z=X+Y
Else If O=”-” then
Z=X-Y
77
Else
Z=50
End If
End If
//Z примет значение 50 т.к. O=”+”
/Конец кода/
3.5. Оператор ветвления «Select-Case-Else»
Предназначен для упрощения организации множественного
ветвления.
Синтаксис:
Select Case Проверяемого_параметра
Case Предпологаемое_значение1:
Дейтвие1
Case Предпологаемое_значение2:
Дейтвие2
Case Предпологаемое_значение3:
Дейтвие3
Case Else:
Действие4
End Select
Данную структуру можно представить в формализованном виде
так:
Выбирать Из_значений Проверяемого_параметра
Значение Предполагаемое_значение1:
78
Действие1
Значение Предполагаемое_значение2:
Действие2
Значение Предполагаемое_значение3:
Действие3
В_остальных_случаях:
Действие4
Закончить_ветвление
/Начало кода/
X=5
Y=2
Z=”/”
Select case Z
case "+":
Z=X+Y
case "-":
Z=X-Y
case "/":
Z=X/Y
case "*":
Z=X*Y
case else:
Z=0
End Select
79
//Будет выполнено деление т.к. Z=”/”, если бы значение Z было
отличным от арифметических операторов, то переменная Z
содержала бы число 0
/Конец кода/
3.6. Циклический оператор «Do-Loop»
Применяется для выполнения некоторых действий, некоторое
количество раз.
Синтаксис:
Do
/*Действие*\
-Бесконечный цикл
Loop
Do While /*Условие*\
/*Действие*\
-Цикл с предусловием
Loop
Do
/*Действие*\
Loop While /*Условие*\
-Цикл с постусловием
Do Until /*Условие*\
/*Действие*\
-Цикл с предусловием
Loop
Do
/*Действие*\
Loop Until /*Условие*\
-Цикл с постусловием
80
Замечание: Конструкция с директивой While будет исполняться
до тех пор, пока условие не станет ложным, а директива Until
заставит цикл исполняться до тех пор, пока условие не станет
истинным. Т.е. если необходимо выполнять некоторый набор
действий, пока параметр не изменит своего значения, то используют
директиву While, а если существует необходимость в совершении
некоторых
действий,
пока
параметр
не
примет
значение,
совпадающее с некоторым эталонным, применяют директиву Until.
Замечание: Цикл с предусловием - проверяет предположение на
соответствие истине перед исполнением действий, а цикл с
постусловием – после. Соответственно цикл с постусловием
исполняется как минимум один раз.
Пример:
/Начало кода/
Do While Z<10
Z=Z+1
Loop
//Данный цикл будет исполнен 10 раз
/Конец кода/
/Начало кода/
Z=10
Do While Z<10
Z=Z+1
Loop
81
//Данный цикл не будет исполнен т.к. Z уже равна 10
/Конец кода/
/Начало кода/
Z=10
Do
Z=Z+1
Loop While Z<10
//Данный цикл будет исполнен один раз т.к. Z уже равна 10, но
проверка происходит после выполнения кода
/Конец кода/
Замечание: Возможен также предварительный выход из цикла
Do,
с
помощью
конструкции
Exit
Do.
Ярким
примером
предварительного выхода из цикла может служить:
/Начало кода/
Z=10
Do While Z<10
Z=Z+1
If Z=5 then Exit Do
Loop
//Данный цикл будет исполнен пять раз т.к. как только Я станет равна
5, произойдет предварительный выход из цикла
/Конец кода/
82
3.7. Циклический оператор «While-Wend»
Применяется
для
упрощения
организации
циклов
с
предусловием, исполняющихся пока условие соответствует истине.
Синтаксис:
While /*Условие*\
/*Действие*\
Wend
Пример:
/Начало кода/
Z=10
While Z<10
Z=Z+1
Wend
/Конец кода/
3.8. Циклический оператор «For-Next»
Применяется
для
организации
циклов
со
счетчиком,
исполняющихся указанное количество раз.
Синтаксис:
For /*Имя переменной счетчика*\ To /*Крайнее значение
счетчика*\
/*Действие*\
Next
Пример:
83
/Начало кода/
For I=1 to 5
X=X+1
Next
//Цикл будет исполнен пять раз, переменная Х примет значение 5
/Конец кода/
3.9. Циклический оператор «For-Each-Next»
Предоставляет
возможность
организовать
обрабатывающий каждый элемент в коллекции.
Синтаксис:
For each /*Имя переменной*\ In /*Имя коллекции*\
/*Действие*\
Next
Пример:
/Начало кода/
Dim X(6)
X(0)=”П”
X(1)=”р”
X(2)=”и”
X(3)=”в”
X(4)=”е”
X(5)=”т”
For each N in X
Z=Z & N
84
цикл,
//В итоге переменная Z примет значение «Привет»
/Конец кода/
3.10. Процедуры
Процедура – подпрограмма, предоставляющая возможность
выполнить описанные в ней действия, вызвав ее по ее имени.
Процедура может принимать параметры и возвращать значения.
Синтаксис:
Sub /*Любое имя процедуры*\ (/*Имя параметра*\)
/*Действие*\
/*Имя процедуры*\=/*Возвращаемое значение*\
End Sub
Пример:
/Начало кода/
Sub Ad(X)
Z=5
Z=Z*X
End Sub
While Y<>70
Y=Ad(5)
Wend
//Данная процедура будет вызываться внутри цикла до тех пор, пока
Y не примет значение 70
/Конец кода/
85
3.11. Функции
Функция в отличие от процедуры должна вернуть значение, но
может принимать параметры.
Синтаксис:
Function /*Любое имя функции*\ (/*Имя параметра*\)
/*Действие*\
/*Имя функции*\=/*Возвращаемое значение*\
End Function
Пример:
/Начало кода/
Function Ad(X,Y)
Ad=X+Y
End Function
For I=1 To 10
Z=Ad(I,5)
Next
//Данная функция будет вызываться внутри цикла десять раз,
передавая в функцию параметр счетчика и значение 5, которые будут
складываться и возвращаться в качестве результата в переменную Z
/Конец кода/
3.12. Строковые функции
Существует ряд встроенных функций Visual Basic Script, заранее
подготовленных для применения. Для их использования достаточно
их вызвать в общем случае функция принимает хотя бы один
параметр и возвращает хотя бы одно значение.
86
Синтаксис
Описание
InStr (старт, где, что, метод)
Ищет
Пример
в
строке X=”Аквапарк”
«где»
строку Y=”парк”
«что», начиная с Z=Instr(1,X,Y,0)
символа
номер //Z
примет
«старт»
значение 5 т.к.
рекомендуется
первая буква Y –
использовать
«п» и она пятая
метод
0
и по счету в X
возвращает номер
первого
найденного
символа
InStrRev
(старт,
метод)
где,
что, Действует
X=”БлаБлаБла”
аналогично
Y=”Бла”
предыдущей
Z=InStrRev(1,X,
функции,
но Y,0)
осуществляет
поиск
//Z
примет
справа значение 7 т.к.
налево, т.е. с конца первая буква Y –
строки
«Б»
и
она
седьмая по счету
в X справа
LCase (что)
Преобразует
строку
нижний
87
«что»
X=”ВСЕМ
в ПРИВЕТ”
регистр Y=LCase(X)
(строчные
//Переменная Y
символы)
примет значение
“всем привет”
UCase (что)
Преобразует
строку
X=”нчоу
«что»
верхний
дпо
в укц”
регистр Y=UCase(X)
(заглавные
//Переменная Y
символы)
примет значение
“НЧОУ
ДПО
УКЦ”
Left (что, сколько)
Возвращает
X="Пример
количество
кода"
символов
Y=Left(X,6)
«сколько»
строки «что»
слева //Переменная Y
примет значение
"Пример"
т.к.
это ровно шесть
символов
с
начала строки
Right (что, сколько)
Возвращает
X="Пример
количество
кода"
символов
Y=Right(X,4)
"сколько" с конца //Переменная Y
строки "что"
примет значение
"кода" т.к. это
88
ровно
четыре
символа с конца
строки
Mid (что, откуда, сколько)
Возвращает
X="Это
количество
обычный текст"
символов
Y=Mid(X,5,7)
"сколько"
слева //Переменная Y
строки
"что", примет значение
начиная с символа "обычный"
"откуда"
т.к.
буква "о" пятый
символ слева, а
в
слове
"обычный" семь
символов
Len (что)
Возвращает
X="Строка"
количество
Y=Len(X)
символов в строке //Переменная Y
"что"
примет значение
6
Replace
начиная)
(где,
что,
начто, Заменяет в строке X="Это
"где" текст "что" обычный текст"
на текст "начто", Y="не обычный"
начиная
соответствия
поиск Z=Replace(X,"об
с ычный",Y,1)
символа "начиная" //Переменная Z
примет значение
89
"Это
не
обычный текст"
StrReverse (что)
Инвертирует
X="Строка"
расположение
Y=StrReverse(X)
символов в строке //Переменная Y
"что"
примет значение
"акортС"
IsNumeric (что)
Проверяет
X="123"
является ли строка Y="abc"
числовой или нет. Z="123abc"
Если
строка M=IsNumeric(X)
состоит из чесел, N=IsNumeric(Y)
возвращает
Истина(True)
Ложь(False)
O=IsNumeric(Z)
и //Переменные
если примут
нет
следующие
значения:
M: True
N: False
O: False
3.13. Арифметические функции
Аналогичны по использованию строковым функциям, но
предназначены для обработки чисел, а не текста.
90
Синтаксис
Описание
Пример
Возвращает
Abs (что)
абсолютное
значение
числа
"что"
Возвращает лишь
Int (что)
целую
часть
чтсла "что"
Round (что, точность)
Y=Int(X)
//Переменная
Y
примет значение 1
Округляет число
"что"
X=1,5
до
количества
знаков
"точность" после
запятой
X=2,3892845103
Y=Round(X,3)
//Переменная
примет
Y
значение
2,389
Randomize
X=Rnd(10)
Возвращает
Rnd (до)
случайное число
в пределах от 0
до числа "до"
//Переменная
примет
случайное
значение,
а
директива Randomize
необходима
сброса
для
счетчика
случайных чисел
Sqr (что)
Возвращает
X=9
квадратный
Y=Sqr(X)
91
Х
корень
числа //Перменная
"что"
Y
примет значение 3
X=45
Возвращает
Sin (что)
Y=Sin(X)
синус
числа //Переменная
"что"
примет
Y
значение
0,850903524534118
X=45
Возвращает
Cos (что)
косинус
Y=Cos(X)
числа //Переменная
"что"
примет
Y
значение
0,52532198881773
X=45
Возвращает
Tan (что)
тангенс
Y=Tan(X)
числа //Переменная
"что"
примет
Y
значение
1,61977519054386
X=45
Возвращает
Atn (что)
Y=Atn(X)
арктангенс числа //Переменная
"что"
примет
Y
значение
1,54857776146818
Exp (что)
Возвращает
X=10
экспоненту
Y=Exp(X)
(число
степени
92
е
в //Переменная
числа примет
Y
значение
"что")
22026,4657948067
X=10
Возвращает
Y=Log(X)
натуральный
Log (что)
логарифм
числа
"что"
//Переменная
примет
Y
значение
2,30258509299405
3.14. Функции даты и времени
Синтаксис
Описание
Now
Возвращает текущую дату и время
Date
Возвращает текущую дату
Time
Возвращает текущее время
Year(Date)
Выделяет текущий год
Month(Date)
Выделяет текущий месяц
Day(Date)
Выделяет текущий день
WeekDay(Date) Выделяет текущий день недели
Hour(Time)
Выделяет текущий час
Minute(Time)
Выделяет текущую минуту
Second(Time)
Выделяет текущую секунду
Замечание: Все значения, касающиеся даты в первую очередь
черпают информацию из системной даты и системного времени.
3.15. Ввод/Вывод
Иногда
возникает
потребность
в
ведении
диалога
пользователем. В этих случаях применяются функции ввода-вывода.
93
с
MsgBox(/*Сообщение для вывода*\) – вывод стандартного
диалогового окна с указанным текстом
Пример:
/Начало кода/
X=5
Y=2
Z=X^Y
MsgBox(Z)
/Конец кода/
InputBox(/*Сообщение*\) – вывод стандартного диалогового
окна с полем для ввода
Пример:
/Начало кода/
X=InputBox(“Введите первое число”)
Y= InputBox(“Введите второе число”)
Z=X^Y
MsgBox(“Результат операции: ” & Z)
/Конец кода/
Замечание: Т.к. данные введенные пользователем при вводе в
диалоговое окно свободно курсируют по ОЗУ компьютера, для
обращения к ним необходимо использовать переменную для их
временного хранения и обращения к ним по имени.
94
Замечание: Текст, выводимый в сообщении, всегда должен быть
заключен в кавычки, в отличие от переменных, но для их совмещения
в одном сообщении можно использовать операцию конкатенации.
Замечание: Функция InputBox обязательно принимает один
параметр – сообщение для ввода.
Общее замечание: Рассмотренный в данном методическом
пособии инструментарий Visual Basic Script в действительности более
обширен, нежели позволяет себе рассмотреть данное методическое
пособие, более того даже вышеописанные элементы сценарного
языка рассмотрены не полностью.
4. Пример выполнения
Постановка задачи:
Рассмотрим пример реализации HTML страницы, которая
запросив у пользователя высоту и ширину стены, а также стоимость
одного кирпича вернет сообщение с количеством кирпичей,
необходимых на ее постройку и стоимость этого количества
кирпичей.
Математическая модель:
Предположим,
что
используется
стандартный
кирпич
с
габаритами 250Х120Х65 мм, а размеры стены будут задаваться в
сантиметрах.
Т.к. учитываться будут только высота кирпича(65мм) и ширина
кирпича(250мм) именно они и будут участвовать в расчете.
Необходимо учитывать также, что между кирпичами будет
присутствовать слой цемента толщиной 10мм.
95
Исходя из вышеописанных данных, можно сформулировать
следующую предварительную формулу:
(Высота_стены/Высота_кирпича)Х(Ширина_стены/Ширина_кирпича)
Однако мы обозначили условие задания размеров стены в
сантиметрах, а кирпича- в миллиметрах, а значит формула примет
вид:
((Высота_стеныХ10)/Высота_кирпича)Х((Ширина_стеныХ10)/Ширина_кирпича
)
Осталось добавить цементный шов толщиной в 10мм и рабочая
формула примет вид:
((Высота_стеныХ10)/(Высота_кирпича+10))Х((Ширина_стеныХ10)/(Ширина_кирпи
ча+10))
Программная реализация:
Для программной реализации данной задачи необходимо в
первую очередь создать HTML страницу(Раздел 2.1.2 II способ):

Запустить текстовый редактор(для этого достаточно
либо
перейти
по
пути:
программы→Стандартные→Блокнот»,
«Пуск→Все
либо
выполнить
клавиатурную комбинацию WIN+R и прописав команду
«Notepad» в открывшемся диалоговом окне нажать на
клавишу Enter)
Замечание:
Для
написания
сценариев
подойдет
любой
текстовый редактор, позволяющий сохранить текстовый файл с
параметрами.

Ввести исходный код страницы

Сохранить полученный файл на ПЗУ компьютера с
расширением *.html (в нашем случае достаточно, либо
96
перейти по пути: «Файл→Сохранить», либо выполнить
клавиатурную комбинацию Ctrl+S и в пункте «Тип файла»
выбрать параметр «Все файлы» все, что останется указать
любое имя и дополнить его конструкцией: «*.html»)
Замечание: В данном случае, как и для всех операционных
систем в целом символ звездочка (*), указывает на любое количество
любых символов и заменяется соответственно на любое имя.
Замечание: Сценарный код необходимо вносить в пару тегов
<Script></Script>,
с
параметром
Language
и
значением,
соответствующим используемому сценарному языку.
В полученный текстовый документ вводим следующий код:
/Начало кода/
<HTML>
<Head>
<Tittle>Расчет стоимости стены</Tittle>
97
<Script Language="VBScript">
Sub B1_OnClick
H=F1.T1.Value
If Not IsNumeric(H) Then
MsgBox("Проверьте введенные данные")
Else
W=F1.T2.Value
If Not IsNumeric(W) Then
MsgBox("Проверьте введенные данные")
Else
C=F1.T3.Value
If Not IsNumeric(C) Then
MsgBox("Проверьте введенные данные")
Else
K=((CDbl(H)*10)/(65+10)*(CDbl(W)*10)/(250+10))
S=K*C
MsgBox("Количество кирпичей: " & K & VbCrLf & "Стоимость
кирпичей: " & S)
End If
End If
End If
End Sub
</Script>
</Head>
<Body>
<Form Name="F1">
98
<Input Name="T1" Type="Text">Высота стены<br>
<Input Name="T2" Type="Text">Ширина стены<br>
<Input Name="T3" Type="Text">Стоимость одного кирпича<br>
<Input Name="B1" Type="Button" Value="Расчитать">
</Form>
</Body>
</HTML>
/Конец кода/
Разберемся
построчно,
не
касаясь
основной
структуры
документа:
<Script Language="VBScript"> - Обозначение начала сценария,
причем атрибут Language указывает на то, что использоваться могут
разные языки, но значение данного атрибута должно быть
соответствующим языку.
Sub B1_OnClick – Событие щелчка по кнопке с именем В1.
H=F1.T1.Value – Внесение в переменную с именем Н
содержимого текстового поля (Value) с именем Т1, находящегося на
форме с именем F1(Имя_формы.Имя_элемента.Значение).
If Not IsNumeric(H) Then – Если значение в переменной Н не
цифровое.
MsgBox("Проверьте введенные данные") – Вывести сообщение с
указанными данными.
Else – В противном случае.
K=((CDbl(H)*10)/(65+10)*(CDbl(W)*10)/(250+10))
–
Выполнение расчета по выведенной ранее формуле с последующим
внесением результатов расчета в переменную К.
99
CDbl(H) и CDbl(W) – Преобразуют указанные в скобках
переменные к типу данных с десятичной частью т.к. из диалогового
окна InputBox всегда приходит значение в текстовом виде и при
выполнении дальнейших операций с такими переменными могут
возникнуть проблемы(нельзя складывать 28(число) и арбуз(текст)).
S=K*C – Расчет стоимости высчитанного количества кирпичей.
MsgBox("Количество кирпичей: " & K & VbCrLf & "Стоимость кирпичей:
" & S) – Вывод сообщения с результатами расчетов, причем с помощью
символа конкатенации обычный текст(в кавычках) совмещается в одном
сообщении с содержимым переменных(K и S).
VbCrLf – Директива, указывающая на перенос строки в одном
сообщении.
<Form Name="F1"> - Начало HTML формы с именем F1.
<Input Name="T1" Type="Text"> - Вставка текстового поля с
именем Т1.
<br> - Инструкция переноса строки, во избежание слипания
элементов формы.
<Input Name="B1" Type="Button" Value="Расчитать"> - Вставка
кнопки с именем В1 и заголовком Рассчитать.
Осталось лишь сохранить результаты (см. выше) и открыть в
Internet браузере (Щелкнуть по сохраненному файлу правой кнопкой
мыши и наведя курсор на пункт «Открыть с помощью» щелкнуть
левой кнопкой мыши по пункту «Internet Explorer»):
100
Готовый вариант должен выглядеть так:
Замечание: При первом запуске страницы операционная система
может запросить разрешение на выполнение активного содержимого:
101
но ведь мы ничего преступного не прописывали в исходном
коде так? А значит разрешаем:
102
При
выполнении
расчета
последовательно
проверяется
содержимое текстовых полей и при не соответствии ожидаемым
данным выводится сообщение:
103
104
Последний снимок экрана может ввести в заблуждение о
работоспособности сценария, но все верно. Дело в том, что в
последнем случае в качестве разделителя целой и десятичной части
была
использована
точка,
а
это
недопустимо,
возможно
использование лишь запятой иначе ваше десятичное число станет
текстом.
Проверяем работу сценария:
105
Однако
мы
получаем
результаты
с
погрешностью.
Модифицируем формулу:
K=((CDbl(H)*10)/(65+10)*(CDbl(W)*10)/(250+10))
Приводя ее к виду:
K=Round(((CDbl(H)*10)/(65+10)*(CDbl(W)*10)/(250+10)),0)
Для этого открываем исходный файл с помощью программы
«Блокнот», а не Internet Explorer. И получаем результаты с
округлением до нуля знаков после запятой:
106
5.
Задания к исполнению
1)
Провести расчет нормы накопления ТБО(Твердых Бытовых
Отходов) из расчета 0,05 тонн на человека в год за 1 год, за 1 месяц и
за 1 день, запросив у пользователя количество человек.
2)
Произвести преобразование температуры из показателя в
Fo в Co по формуле: Co=( Fo-32)*0,5
3)
Произвести преобразование температуры из показателя в
Co в Fo по формуле: Fo=( Co*1,8)+32
4)
Произвести преобразование температуры из показателя в
Co в Ko по формуле: Ko=Co+273,15
5)
Произвести преобразование температуры из показателя в
Ko в Co по формуле: Co=Ko-273,15
6)
Произвести преобразование температуры из показателя в
Fo в Ko по формуле: Ko=( Fo+459,67)*0,5
7)
Произвести преобразование температуры из показателя в
Ko в Fo по формуле: Fo=( Ko*1,8)-459,67
8)
Произвести расчет указанных значений, запросив у
пользователя два числа и знак операции, который и будет определять
операцию между числами.
9)
Запросить у пользователя фамилию, имя и отчество и
преобразовать в фамилию и инициалы.
10) Запросить у пользователя число в диапазоне 0-10, а затем
сгенерировать случайное число в том же диапазоне и при совпадении
чисел соответствующее сообщение ровно, как и при не совпадении
оных.
107
11) Рассчитать ежемесячные выплаты по кредиту за указанный
период исходя из суммы займа с учетом процентной ставки в 15%.
12) Запросить у пользователя количество учеников в группе и
рассчитать
стоимость
часа
преподавателя
по
формуле:
Количество_учеников*10руб.+19,5%
13) Запросить у пользователя фамилию, имя и отчество. По
последней букве отчества определить и вывести на экран пол
указанного человека (подсказка: женские отчества заканчиваются на
букву а).
14) Запросить у пользователя текст и заменить все гласные
буквы в нем случайными числами.
15) Запросить у пользователя число месяц и год рождения в
разных текстовых полях, а затем объединить в единую дату в
формате: ДДД/ММ/ГГГГ.
16) Получить от пользователя текст, буквы которого находятся
в разных регистрах, и преобразовать его к нижнему регистру.
Результат вывести на экран.
17) Запросить у пользователя фамилию, имя, отчество и e-mail
адрес. Вывести номер пользователя в виде шести разрядного числа,
первое число - количество символов в фамилии пользователя, второе
- в имени, третье – в отчестве, четвертое – в e-mail адресе, а два
оставшихся – случайные числа.
18) Запросить у пользователя e-mail адрес и вывести на экран
информацию о том, каким по счету является символ @ в данной
строке.
108
19) Получить от пользователя его почтовый адрес в одном
текстовом поле и вывести на экран лишь наименование улицы.
20) При первом щелчке по кнопке генерировать случайное
число (вывести его в первое текстовое поле) и попросить
пользователя
ввести
слово
длинной
в
указанное
количество
символов(во второе текстовое поле), а при втором щелчке посчитать
количество символов в веденном слове и сообщить пользователю о
результатах(подсказка: щелчки можно не считать, достаточно
организовать ветвление с проверкой на равенство второго текстового
поля пустоте(“”)).
21) Запросить у пользователя строку, что заменить в строке и
на что заменить. Произвести замену и вывести результат на экран.
22) Запросить у пользователя команду и вывести информацию
в соответствии с командой (если команда содержит слово «время», то
вывести текущее время, если команда содержит слово «дата» или
«день», то вывести текущую дату).
23) Запросить
у
пользователя
ответ
на
любой(заранее
заготовленный) вопрос и вывести результаты анализа его ответа.
24) Рассчитать
подоходный
налог(13%)
на
указанную
заработную плату пользователя и вывести результат на экран.
25) Рассчитать налог на добавленную стоимость (НДС)(18%)
по указанной пользователем цене товара.
109
Беликов А.Н., Самойлов А.Н., Кучеров С.А.
Методические указания к лабораторным работом
по курсу «Интернет-Интранет технологии»
Ответственный за выпуск Беликов А.Н.
Редактор КочергинаТ.Ф.
Корректор Чиканенко Л.В.
ЛР № 020565 от 23.06.1997
Формат 60x841/16.
Печать офсетная.
Усл.п.л. - 2,8
Заказ № 131
Подписано к печати 11.03.2017
Бумага офсетная
Уч.- изд.л. – 3
Тираж 50 экз.
Издательство Технологического института
Южного федерального университета
ГСП 17А, Таганрог, 28, Некрасовский, 44
Типография Технологического института
Южного федерального университета
ГСП 17А, Таганрог, 28, Энгельса, 1
110