ОСТРОВСКИЙ Сергей Львович — главный редактор газеты “Информатика”, заместитель гендиректора Издательского дома “Первое сентября”, руководитель отдела программирования, учитель информатики московской гимназии № 1514. Web-программированием профессионально занимается c 1997 г.
C 2007 г. на очном отделении Педагогического университета “Первое сентября” читает курсы “Основы web-дизайна и школьного «сайтостроительства»”, “Web-программирование для школьного «сайтостроительства»”, “Интерактивная web-графика и web-анимация”. В 2006/2007 и 2007/2008 учебных годах состоялось 7 выпусков групп по этим курсам.

Концепция курса

Сайтом школы сегодня уже никого не удивишь. Несколько тысяч учреждений среднего образования в России имеют собственные доменные имена, а уж “простые странички” и вовсе сосчитать невозможно. Все это большое хозяйство требует постоянной поддержки, которая, по факту, чаще всего ложится на плечи учителей информатики. И начинается… “У нас сменился телефон, надо поменять на всех страницах…”, “у Марии Ивановны скоро день рождения, надо разместить на сайте поздравление…”,
“а почему еще не готова страничка выпускного класса?..”. Даже если очень любить свою работу, такая жизнь может скоро свести с ума.

Между тем все технологии для автоматизации обслуживания сайтов давно придуманы. В идеале программист-разработчик после сдачи проекта заказчику к нему не прикасается вовсе — все текущее наполнение сайта производится посредством так называемых “CMS” (систем управления контентом). Но это в идеале… В реальности же применительно к школьным сайтам это пока не так, но и здесь можно на порядки облегчить себе жизнь, потратив некоторое время на программирование.

В курсе на конкретных практических примерах рассматриваются основные составляющие систем автоматизации обслуживания сайтов: язык PHP и СУБД MySQL. В качестве инструмента используется пакет web-разработчика Denwer.

Для успешного освоения курса необходимо иметь опыт разработки web-страниц на HTML и на базовом уровне владеть каким-либо из языков программирования (например, Паскалем, Си и т.п.). Очень желательно иметь представление о CSS и Javascript.

Конечно, предлагаемый курс — это только начало, самый первый шаг. Но ведь он, как знают учителя, зачастую и является самым трудным. Надеемся, мы поможем нашим слушателям его сделать.

Учебный план

№ газеты	ЛЕКЦИЯ
17/2008	Лекция 1. “Пролетая над миром web-программирования”. Границы возможностей статического HTML. Два мира, две системы: программирование на стороне клиента и программирование на стороне сервера. Идем от реальности: текущие предложения хостинг-провайдеров. Инструментарий: пакет Denwer, установка. Первая программа на PHP “Здравствуй, мир web-программирования”.
18/2008	Лекция 2. Пример задачи автоматизации: доска объявлений школьного сайта. SSI, основные возможности и директивы. SSI-версия школьной доски объявлений. PHP-версия доски объявлений. Совершенству нет предела: выводим все объявления из каталога, помечаем важные. Передача параметров в программы на PHP. Обзор синтаксиса PHP: типы данных, операции, основные алгоритмические конструкции.
19/2008	Лекция 3. Обработка форм на стороне сервера. Формы и элементы управления HTML: однострочное и многострочное поля ввода, флажки, радиокнопки, списки. Методы GET и POST, кодирование URL. Обзор синтаксиса PHP: функции, массивы.
20/2008	Лекция 4. Усовершенствованная доска объявлений с разделом администратора. Обзор синтаксиса PHP: файлы. Законченный мини-проект: административный интерфейс для доски объявлений на файловом “движке”. Контрольная работа № 1. Разработка теста с обработкой результатов тестирования на стороне сервера.
21/2008	Лекция 5. Введение в использование баз данных в задачах web-программирования. Зачем нужна СУБД? Теория реляционных баз данных: основные термины. SELECT — “главная команда” SQL. Что такое MySQL? Взаимодействие с сервером MySQL из программ на PHP.
22/2008	Лекция 6. База данных “Страница школьного журнала”: от проектирования до визуализации. Практическое применение базы данных для автоматизации школьного сайта и школьной жизни. Контрольная работа № 2. Доработка базы данных “Страница школьного журнала”.
23/2008	Лекция 7. “На троих”. Задействуем трех основных “игроков”: MySQL+PHP+Javascript. Проверка данных форм на стороне клиента перед отправкой на сервер.
24/2008	Лекция 8. Рисование средствами PHP. Генерирование графических данных “на лету”. Построение графиков и диаграмм. Графическая визуализация данных школьного журнала. Итоговая работа

Лекция 1

Пролетая над миром web-программирования

Здравствуйте!

Прежде всего здравствуйте, дорогие коллеги!

В этом курсе нам предстоит познакомиться с удивительным и захватывающе интересным миром web-программирования. Конечно, мир этот огромен, практически необъятен. Даже профессионалы обычно специализируются на некотором множестве технологий, а о других “имеют представление”. Поэтому нашей задачей-максимум будет знакомство с основными, наиболее распространенными современными технологиями. Какими именно? Об этом — чуть ниже в разделе “Идем от реальности”.

Но, кажется, я допустил грубую педагогическую ошибку — не представился. Это тем более нехорошо, что мне, как главному редактору “Информатики”, хорошо известно, что лекции нашего дистанционного Педуниверситета — это особый жанр. Их стиль, как правило, отличен от безличного и даже немного “высушенного” стиля газетных статей. В лекциях автор имеет полное право сказать (написать) “я думаю”, “я советую”. Авторское “я” в лекциях не прячется за непонятным “мы”. Здесь я — это я :).

А я — это Сергей Львович Островский, главный редактор “Информатики” (на этой должности я работаю с 1999 г., а вообще в газете — с момента ее основания в 1995 г.), учитель программирования московской гимназии № 1514 (с 1990 г.), заместитель генерального директора Издательского дома “Первое сентября”, в сферу ответственности которого входит, в частности, и отдел программирования.

Web-программированием я занимаюсь с 1997 г. В течение некоторого времени весь наш отдел программирования из меня одного и состоял. Но с увеличением количества задач увеличивалось и количество сотрудников. Сейчас нужды Издательского дома обслуживает довольно большой отдел, в котором работают программисты, специализирующиеся на различных задачах, главной из которых является поддержка наших интернет-проектов. И хотя в последнее время мне все меньше приходится программировать и все больше руководить, я стараюсь оставаться в профессиональной форме и вникать во все, что делают мои коллеги.

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

В течение всего курса со мной можно (и нужно!) связываться для оперативных консультаций. Для этого есть два способа. Первый — посредством электронной почты. Пожалуйста, пишите мне на адрес so@1september.ru. Тема письма в обязательном порядке должна начинаться с “7009” (это код нашего курса). Дополнительная просьба: в каждом письме указывайте, пожалуйста, ваш идентификатор слушателя и полные фамилию имя и отчество.

Второй способ оперативной связи — ICQ. Для того чтобы мы могли общаться посредством ICQ, вам сначала необходимо прислать мне по электронной почте ваш номер, и я включу вас в свой контакт-лист. Просто пытаться авторизоваться бесполезно — мой спам-фильтр отсекает все попытки несанкционированных авторизаций. Я просто не получу ваш запрос.

Повторю: обязательно связывайтесь со мной для решения возникающих проблем. Я не могу обещать немедленного ответа на электронное письмо, но в течение нескольких дней отвечу обязательно. Что касается ICQ, то у меня всегда честно выставлен статус. Если написано “занят”, значит, правда занят. “Свободен” — готов ответить на вопрос.

Ну, вот, почти познакомились. Поехали? :)

…Простите, чуть не забыл сказать очень важную вещь.

Данный курс (как все курсы нашего Педагогического университета), разумеется, можно просто читать. Фактически слушатели отличаются от читателей газеты лишь тем, что должны тщательно прорабатывать материалы лекций, выполнять текущие задания и контрольные работы. Но я приложил максимум усилий, чтобы лекции были интересны всем, а не только тем, кто записался на курс. Так что интересного вам чтения, а слушателям — успешной учебы.

Вот теперь поехали!

Можно ли обойтись без web-программирования?

Можно! Но… сложно. Впрочем, все, конечно, зависит от стоящей перед вами задачи. Разумеется, при реализации различных интерактивных сервисов (всевозможных форумов, например) без программирования обойтись нельзя. В этом практически ни у кого нет сомнений. А вот можно ли обойтись без программирования при разработке “обычного” школьного сайта? Ответ “можно, но сложно” относится именно к такому пониманию вопроса. Почему? Давайте разберемся.

Что такое сайт с технической точки зрения? Множество файлов. Среди них — html-страницы, картинки, файлы других форматов. Даже при средних размерах сайта количество файлов обычно значительно. Ну, например, рассмотрим типовой сайт школы, на котором имеются: главная страница, страницы методических объединений (кафедр), страницы учителей, классов (как проходящих обучение, так и окончивших школу). Этот список каждый из нас может с легкостью продолжить. Допустим, что макет сайта выполнен без особых изысков, но добротно. А на страницах добротных школьных сайтов обычно присутствуют своеобразные “выходные данные” — адрес школы, контактный телефон и т.п. Согласны? Пока нет вопросов? Сейчас будут!

Причем не вопросы, а настоящее стихийное бедствие: у школы изменился телефон (например, в Москве не так давно код в ряде районов сменился с 495 на 499). Представляете масштаб “катастрофы”? Это же придется пройтись по всем страницам (а их могут быть не сотни, а тысячи!) и изменить всего один несчастный телефон! Что, кто-то не испугался? Ага, нашлись продвинутые html-кодеры, уже слышны всякие разговоры про фреймы (ух… не люблю я эти фреймы, но признаю — с использованием фреймов можно спроектировать сайт так, чтобы указанная задача изменения телефона была очень простой). Хорошо, а как вам следующая задачка?

Как здорово видеть на школьном сайте поздравления с днем рождения! Причем не только учителям эти поздравления приятно получать, но и ученикам. Согласны? А теперь давайте прикинем трудозатраты… В школе, в которой я работаю, около 200 учителей и 800 учеников. Это значит, что каждый день, без выходных и отпусков, веб-мастер должен обновлять соответствующую страницу. И ошибаться ему крайне не рекомендуется — представляете, как будет кому-то обидно, если именно его забудут :(.

Подобных примеров я знаю очень много и приводить их могу долго (я еще про расписание могу рассказать, про расписание замен и т.п.). Дело здесь не в конкретных примерах, а в общей, объединяющей их идее. А она такова: сделать сайт, не прибегая к программированию, можно. Сделать, разместить и… забыть. Потому что поддерживать сколько-нибудь масштабный сайт “руками”, бесконечно править статичные html-файлы нереально!

Но ведь никто так и не делает :). Для поддержки сайтов разрабатываются специальные программы управления содержанием (это практически буквальный перевод термина CMS — Content Management System). В некотором смысле наш курс о том, как устроены такие программы. Ведь в ряде случаев профессиональная CMS и не нужна — нужно лишь минимально автоматизировать некие типовые операции обслуживания сайта (вспомним о тех же днях рождения).

Итак, повторю еще раз основную мысль: необходимость в программировании возникает, как правило, на этапе решения задач обслуживания сайта. Иногда пара строчек кода заменяет дни работы (и, кстати, повышает качество этой работы!). Я понимаю, что пока все это больше похоже на лозунги, чем на руководство к действию. Но чуть потерпите. Уже в этой лекции мы покажем, как лозунги претворяются в жизнь.

Два мира, две системы

Возможно, некоторые из наших молодых коллег никогда не слышали фразы, вынесенной в заголовок этого пункта. Оно и к лучшему. Но в любом случае речь пойдет не об оригинальном смысле этого штампа советской пропаганды, а о двух мирах web-программирования — клиентском и серверном.

Слышали ли вы когда-нибудь такие программистские термины — “сторона клиента” и “сторона сервера”? Не исключено, что слышали, например, в таком контексте: “скрипт работает на стороне клиента” (или “…сервера”). Хотите узнать, что имеется в виду?

Сторона клиента — это компьютер клиента, пользователя. Тот самый компьютер, за которым сидит пользователь, когда работает в Интернете. Еще более узко, сторона клиента — это браузер пользователя. В целях безопасности мир браузера частично отстранен от мира клиентского компьютера, и скрипты (программы), выполняющиеся в браузере, имеют ограниченный доступ к файловой системе.

На каких языках можно программировать на стороне клиента? Прежде всего, конечно, на “эсперанто” всех браузеров — языке Javascript. Программированию на Javascript посвящено немало хороших книг, среди которых есть настоящий шедевр А.А. Дуванова, который (что мне особенно приятно!) впервые был опубликован в “Информатике” [1].

Основное назначение Javascript — манипулирование объектами браузера, посредством которого можно как реализовывать достаточно сложные интерактивные сценарии, так и просто облегчать себе жизнь при решении рутинных задач.

Рассмотрим простой пример. Допустим, вам требуется поместить на страницу набившую оскомину таблицу перевода чисел (к примеру, в диапазоне от 0 до 256) из десятичной в двоичную и шестнадцатеричную системы счисления. Ничего сложного в этой задаче нет — если есть много лишнего времени, можно даже набить требуемую таблицу. Только делать это не надо. Я, например, потратил на все про все чуть больше минуты, включая время на набор кода. Вот такого, к примеру:

Пример 1

<html>

<head>

<meta http-equiv="content-type"

content="text/html;

charset=windows-1251">

<title>Javascript: таблица перевода в двоичную и шестнадцатеричную системы счисления

</title>

</head>

<body>

<h1>Таблица перевода в двоичную и шестнадцатеричную системы счисления</h1>

<table border="1">

<tr>

<th>10</th>

<th>2</th>

<th>16</th>

</tr>

<script type="text/javascript">

for(i=0;i<=256;i++) {

document.write("<tr>");

document.write("<td>"+i+"</td>");

document.write("<td>"+i.toString(2)+ "</td>");

document.write("<td>"+i.toString(16)+ "</td>");

document.write("</tr>");

}

</script>

</table>

</body>

</html>

Результат (не весь, разумеется, а только первый экран) представлен ниже.

Рис. 1. Результат работы скрипта

Этот пример я привел с одной-единственной целью: проиллюстрировать утверждение, что код на Javascript выполняется на компьютере пользователя, в данном случае под управлением браузера.

Ограничивается ли мир клиентского web-программирования языком Javascript? Конечно, нет! Нельзя не упомянуть, например, о языке Java, на котором реализуются аплеты, работающие в среде браузера. Строго говоря, аплеты выполняет не сам браузер, а интегрированная с ним Java-машина, но для пользователя этот факт большого значения не имеет (более точно, пользователь может столкнуться с тем, что аплеты в его браузере не выполняются, например, по причине того, что Java-машина просто не установлена). Тем, кто заинтересуется программированием аплетов на Java, могу порекомендовать, например, свежий цикл обзорных статей Е.А. Еремина [2].

Итак, Javascript и Java. Все? Нет, не все. Вспомним, например, “флешки” (приложения Macromedia Flash). Если от “флешки” требуется сколько-нибудь содержательная интерактивность, не обойтись без программирования на языке Actionscript. (В тривиальных случаях можно реализовать интерактивность без всякого программирования — например, кнопка будет реагировать на действия пользователя просто потому, что она кнопка. Но если реакция на действия пользователя должна быть содержательной — например, переход по заданному адресу, то тут уже без кода на Actionscript не обойтись.) Как и в случае с Java, код на Actionscript выполняет не сам браузер, а специальный плагин (“примочка”), но для пользователя это совершенно “прозрачно” — он видит, что “флешка” работает в браузере, и больше его ничего не интересует.

Стоп! Я несколько увлекся рассказом о средствах клиентского программирования — я люблю эту тему и читаю по ней специальный очный курс повышения квалификации, но ведь наш курс не об этом! Я всего лишь хотел проиллюстрировать тот факт, что “сторона клиента” — это браузер и компьютер клиента. А что же такое “сторона сервера”? Чтобы ответить на этот вопрос, надо прежде всего разобраться с тем, что такое web-сервер. Этим мы и займемся.

Очень умный кладовщик

Итак, давайте разберемся с тем, что такое web-сервер. Сразу отмечу, что типичное “обывательское” представление о web-сервере заключается в том, что web-сервер — это компьютер. Строго говоря, это не так. Web-сервер — это программа. А то, что компьютер, на котором эта программа установлена, часто также называют web-сервером, это почти жаргон. Так говорить, разумеется, допустимо — все так говорят, но надо представлять и истинное положение вещей.

Рассмотрим, что происходит, когда пользователь набирает в адресной строке браузера некоторый URL. Например, такой: http://www.mysite.ru/document.htm.

Сначала браузер при помощи операционной системы определяет IP-адрес хоста www.mysite.ru (операционная система в этом задействована, поскольку, например, адрес DNS-сервера — это настройка именно ОС).

Затем браузер “стучится” по найденному адресу. Причем стучится в определенную “квартиру” — на определенный порт…

Короткое и совсем не лирическое отступление об IP-адресах, DNS, портах и т.п.

Как вы знаете, в основе функционирования сети Интернет лежит базовый протокол, который так и называется — Internet Protocol (IP). Согласно ныне действующей версии этого протокола, которую теперь принято называть IPv4 (потому что на смену ей идет IPv6 — смешно сказать, но адреса заканчиваются :), каждому компьютеру (устройству), подключенному к сети, выдается четырехбайтовый (поэтому и IPv4) числовой адрес, который принято записывать через точки. Например, так: 200.100.020.010.

Как именно компьютер получает IP-адрес, что такое маски, подсети и пр. — все это очень интересно, но лежит за рамками нашего курса. Впрочем, надо сделать одно важное для нас замечание. Среди всех IP-адресов есть некоторое множество особенных. Эти особенные адреса не используются в Интернете, а применяются для организации локальных сетей и иных служебных нужд. А самый особенный из всех особенных адресов — адрес 127.0.0.1. Этот адрес всегда соответствует данному компьютеру. То есть на самом деле ваш компьютер имеет как минимум два IP-адреса, и один из них — 127.0.0.1.

Как это проверить? Например, посредством стандартной программы ping — она есть в любой системе. Ping — это универсальный “тук-тук”, он предназначен лишь для того, чтобы проверить, живет ли кто-нибудь в “домике” (по данному IP-адресу). Вот как выглядит процесс “пингования” адреса 127.0.0.1.

Рис. 2. “Пингуем” наш собственный компьютер

Хотя компьютеры в сети узнают друг друга именно по IP-адресам, людям не очень удобно иметь дело с числами. (Конечно, есть хороший контрпример — телефонные номера. Но так уж сложилось исторически.) Поэтому с самого начала в Сети была введена система так называемых “доменных имен”. А система установления соответствий между именами и IP-адресами получила название DNS — Domain Name System. За преобразование имен в адреса отвечают специальные DNS-серверы, которые (мы несколько упрощаем модель) хранят огромные таблицы из двух столбцов. Левый столбец — адрес, правый — имя.

Кстати, практически на любом компьютере (на вашем — точно) тоже имеется свой маленький “DNS-серверок”. Его роль выполняет файл hosts (в Windows XP он лежит по адресу system32/drivers/etc). Записи в этом файле как раз и устанавливают соответствие между именами и адресами хостов. Найдите файл hosts у себя на компьютере и посмотрите на его содержимое. Скорее всего вы увидите примерно следующее (Пример 2 внизу страницы).

Чтобы окончательно убедиться, что все это работает, можете проделать два простых эксперимента. Сначала попробуйте “пингануть” хост localhost. Результат, как вы видите ниже, практически совпадает с показанным на предыдущей иллюстрации, с той лишь разницей, что утилита ping сначала определила, какой компьютер соответствует адресу 127.0.0.1 (SOM — имя компьютера, на котором я ставил эти опыты).

Рис. 3. “Пингуем” localhost

Пример 2 # (C) Корпорация Майкрософт (Microsoft Corp.), 1993-1999 # Это образец файла HOSTS, используемый Microsoft TCP/IP для Windows. # Этот файл содержит сопоставления IP-адресов именам узлов. # Каждый элемент должен располагаться в отдельной строке. IP-адрес должен # находиться в первом столбце, за ним должно следовать соответствующее имя. # IP-адрес и имя узла должны разделяться хотя бы одним пробелом. # Кроме того, в некоторых строках могут быть вставлены комментарии # (такие, как эта строка), они должны следовать за именем узла и отделяться # от него символом '#'. # # Например: # # 102.54.94.97 rhino.acme.com # исходный сервер # 38.25.63.10 x.acme.com # узел клиента x   127.0.0.1 localhost

Если все получилось, попробуйте поставить опыт № 2. “Пинганите”, к примеру, хост vpupkin. Поскольку такого хоста нет, вы получите соответствующее сообщение.

Рис. 4. Нет такого хоста!

Теперь добавьте в файл hosts запись

127.0.0.1 vpupkin

и снова “пинганите”. Получилось?

Рис. 5. Ура! Заработало!

IP-адрес — важнейшая составляющая часть механизма функционирования Сети. Но есть проблема: адрес соответствует компьютеру (точнее, некоторому сетевому интерфейсу компьютера, но эта подробность для нас не слишком существенна). А один компьютер может выполнять различные функции — быть и web-сервером, и почтовым сервером, и еще чем-нибудь. Все эти функции связаны с обменом информации по сети. То есть в общем случае на компьютер с данным адресом приходит много различной информации (пакетов информации), и надо понимать, какой пакет кому предназначен. Для решения этой задачи придумали механизм портов.

Можно представить себе следующую модель: IP-адрес — это адрес дома, а порт — номер квартиры. На каждом пакете написан не только IP-адрес, но и номер порта. Соответственно, не возникает никаких конфликтов — каждый пакет отправляется в свой “теремок”.

А кто в теремочке живет? А в теремочке как раз и живет конкретная программа. Например, web-сервер, который нас интересует в первую очередь, обычно живет в теремочке № 80 (программисты говорят “висит на 80-м порту”). Почтовый “демон” обычно принимает своих клиентов в теремочках 110 и 25 (в первом он выдает письма, во втором — принимает), и т.д.

Бери, не жалко!

Итак, браузер “стучится” по найденному адресу на определенный порт (по умолчанию — 80-й).

Браузер: Тук-тук, есть тут кто?

Если на данном компьютере работает программа — web-сервер, она откликается:

Web-сервер: Есть. Чего надобно?

Браузер: Мне нужен файл document.htm с сайта www.mysite.ru.

Web-сервер: Сейчас найду… нашел… забирай!

Обратите, пожалуйста, внимание на то, что браузер не случайно называет не только имя файла, но и имя сайта, с которого он хочет его получить. Казалось бы, странно: он же уже пришел на данный сайт, достаточно назвать лишь имя документа. А вот и нет! Почему? Потому что один web-сервер на одном компьютере, как правило, обслуживает много сайтов. Действительно: вспомните о хостинг-провайдерах, которые предоставляют услуги по размещению сайтов. Если бы для размещения каждого сайта требовался отдельный компьютер, это было бы просто немыслимо!

Таким образом, web-сервер можно представлять себе как кладовщика, который живет в комнате 80 и через окошко в двери умеет выдавать файлы по запросам браузеров. А теперь — внимание! — самый главный вопрос: а как “кладовщик” web-сервер находит требуемый файл на своем компьютере?

Зри в корень!

Для того чтобы web-сервер умел находить требуемые файлы, он знает самый главный параметр сайта — так называемый корневой каталог. Суть этого параметра очень простая — это каталог в файловой системе компьютера, на котором работает web-сервер, который соответствует “корню” данного сайта. Например, если для сайта www.mysite.ru корневым каталогом назначен D:\sites\mysite\www, то файл http://www.mysite.ru/document.htm web-сервер будет искать по адресу D:\sites\mysite\www\document.htm. Соответственно, файл http://www.mysite.ru/photos/petya.jpg web-сервер найдет по адресу D:\sites\mysite\www\photos\petya.jpg.

Корневой каталог сайта — это очень просто, но очень важно! Мы еще не раз встретимся с этим параметром.

“Кухня” web-сервера

Ну и где же здесь место программированию? — спросите вы. До этого вопроса мы как раз добрались. Вышеописанные действия web-сервера к программированию не имели отношения — у него попросили файл, он отдал — и все. Это действительно напоминает работу обычного кладовщика — взять вещь с полки и отдать. А что если вещи в готовом виде на полке нет? Как это?

А вот так: попросили, допустим, у кладовщика… яичницу. (С помидорами! Очень люблю яичницу с помидорами!) На складе, конечно, нет яичницы! Яйца есть, соль есть, помидоры есть. А готовой яичницы нет. Но это не беда — кладовщик что-нибудь организует. Как и что — его дело — браузер об этом не знает. Браузер просит яичницу именно у web-сервера и у него же ее и получает. А уж web-сервер сам договаривается с поваром, передает ему заказ и получает от него яичницу. Вот здесь, на этапе изготовления яичницы, и начинается программирование.

Как web-сервер понимает, какой файл надо изготовить, а какой просто отдать? Проще, чем вы можете подумать, — по расширению. В настройках web-сервера содержится информация о том, файлы с какими расширениями нужно отдавать “как есть”, а с какими — “готовить”, и кто именно должен их готовить. Например, типичная настройка web-сервера может быть такой: htm- и html-файлы отдавать “как есть”, а php-файлы передавать на обработку интерпретатору языка PHP.
И уже то, что вернет интерпретатор, возвращать браузеру. Конкретный пример мы рассмотрим уже в конце этого занятия.

Идем от реальности: текущие предложения хостинг-провайдеров

Прежде чем идти дальше, я хочу обосновать принцип отбора содержания нашего курса. Если посмотреть на это содержание предельно схематично и исключительно с технической точки зрения, то можно увидеть, что речь идет о двух вещах: языке PHP и СУБД MySQL. Что это такое, мы скоро узнаем, а сейчас я постараюсь ответить на вопрос “почему именно PHP+MySQL?”. Для ответа на этот вопрос я предлагаю взглянуть на текущие предложения хостинг-провайдеров. Вообще говоря, практически любых, но я для определенности выбрал двух типичных, с которыми не так давно имел дело, — Agava и Masterhost. Нас будет интересовать, какие возможности, связанные с web-программированием, предлагают эти провайдеры. Итак, смотрим…

Agava

Начнем с провайдера Agava (www.agava.ru). На услуге “Виртуальный хостинг” (а нас интересует именно это — мы же не собираемся пока нести провайдеру свой компьютер) предлагается поддержка CGI, Perl, PHP, ASP, SSI, MySQL, MSSQL, ssh, ftp. Перечисленные здесь пункты, вообще говоря, различны, но общее представление о предлагаемых возможностях составить можно. Кратко объясню, что здесь написано (cм. рис. 6).

Рис. 6. Базовые рпедложения Agava

CGI — Common Gateway Interface — стандартный интерфейс для программ, исполняемых на стороне сервера. Сама по себе поддержка CGI свидетельствует лишь о потенциальной возможности выполнять программы на сервере. CGI — не язык, а именно интерфейс. Чтобы понять, на чем именно можно программировать, надо читать дальше.

Perl — культовый язык web-программистов (хотя, конечно, Perl — универсальный язык и web-программирование — лишь одна из областей его применения). Лет 10 назад мир web-программирования практически и был миром Perl. Сейчас Perl используется меньше и реже, потому что появились более удобные, не менее мощные, но более быстрые в освоении языки. Например…

PHP — Hypertext Preprocessor (оригинальная расшифровка — Personal Home Page — просто сейчас она выглядит несолидно, вот и придумали новую). На сегодняшний день основной язык, используемый в web-программировании.

ASP — Active Server Pages. Своеобразный “PHP от Microsoft”. Технология ASP изначально была придумана для web-серверов Microsoft, но, так как они не слишком распространены, не слишком распространена и сама технология.

SSI — Server Side Includes. Очень простое расширение HTML для реализации минимальных возможностей обработки html-файлов web-сервером. С SSI мы познакомимся в следующей лекции.

MySQL — свободно распространяемая реляционная СУБД. Мощная, удобная и надежная. Очень широко используется именно в web-программировании.

MSSQL — Microsoft SQL Server. Решение от Microsoft.
В web-программровании используется реже, чем MySQL.

SSH — Secure Shel. Почему ssh попал в этот список, мне объяснить трудно. Фактически ssh лишь предоставляет доступ к командной строке компьютера, на котором установлен web-сервер.

FTP — File Transfer Protocol. Это вещь понятная и в объяснениях, наверное, не нуждается. То, что ftp находится в этом списке, призвано подчеркнуть тот факт, что файлы на web-сервер можно “заливать” по ftp. Ничего особенного в этом нет — трудно найти хостинг, где этого нельзя сделать.

Кликнув по ссылке “Подробнее об услуге”, мы можем узнать, что Agava предлагает несколько тарифных планов. Обратим внимание на два самых дешевых — Lite и Normal (см. рис. 7).

Первый — отметаем сразу. Он нас не интересует, поскольку в нем специально подчеркнуто, что план Lite предназначен для размещения статичных html-страниц. А вот c Normal надо познакомиться “подробнее…”.

Рис. 7. Два самых дешевых тарифных плана Agava

Рис. 8. Подробнее о плане Normal

Надо сказать, что по ссылке “Подробнее…” мы узнаем не слишком много нового. Поясню то, что относится к web-программированию и не было объяснено раньше.

“Запуск скриптов из cron”. Cron — это программа, специфичная для Unix-систем, обеспечивающая выполнение некоторых действий по расписанию, определенному пользователем. Сайты часто требуют какого-нибудь периодического обслуживания, и именно для этого, как правило, используется cron.

Python — распространенный (но не так широко, как PHP и Perl) универсальный язык, который используется, в частности, в web-программировании.

CVS — Concurrent Versions System — удобная, но уже несколько устаревшая (сейчас активно используется SVN) система управления версиями, которая используется, в частности, при разработке программного кода. Суть этой системы в том, что изменения в файлах не теряются и всегда можно “откатить” все изменения до нужной версии, посмотреть, кто именно внес эти изменения, и т.д. Такое очень умное бэкапирование.

phpMyAdmin — web-интерфейс для доступа к СУБД MySQL. Де-факто практически стандарт.

Masterhost

Взглянем теперь на предложения хостинг-провайдера Masterhost (www.masterhost.ru). Здесь мы не увидим много нового, поэтому сразу перейдем к табличке с расшифровкой услуг.

Рис. 9. Предложения Masterhost

Как видите, все очень похоже. Чуть побольше языков для CGI-скриптов (первая строка), среди которых почему-то нет Python'а. Смело можно сказать — ничего нового.

Выводы

Если поставить задачу: найти пересечение современных предложений хостинг-провайдеров, — то это пересечение будет иметь примерно такой вид: Perl+PHP+MySQL. Я бы очень хотел сделать курс именно таким, но хорошо понимаю, что в рамки 72-часового дистанционного курса (даже базового) уместить это не представляется возможным. Поэтому из двух языков — Perl и PHP — я выбрал более распространенный (на сегодняшний день) и более простой в освоении. Так и получилась формула основного содержания: PHP+MySQL.

Настраиваем инструментарий: Denwer

Мы добрались до самого, пожалуй, интересного — практической части этой лекции. Нам предстоит установить программное обеспечение — пакет Denwer, который будет использоваться в течение всего курса. Что такое Denwer?

Denwer — пакет web-разработчика, который позволяет легко и просто установить на компьютере под управлением Windows web-сервер Apache, PHP, MySQL, phpMyAdmin и Perl (он нам не понадобится, но сам Denwer использует Perl в служебных целях). Denwer позволяет отлаживать скрипты на локальном компьютере, а не на сервере. Это очень удобно!

Удобно также то, что Denwer при установке не модифицирует системных файлов, не разбрасывает всюду свои библиотеки, в общем — не пытается быть умнее вас. Фактически вся установка заключается в копировании файлов в выбранный вами каталог (лучше, конечно, отдельный — об этом ниже).

Подавляющее большинство слушателей нашего курса работает на компьютерах под управлением Windows XP, поэтому я буду ориентироваться на соответствующую сборку Denwer'а . Если у вас другая версия Windows, то скорее всего все также будет работать без всяких проблем и изменений. Если у вас не Windows, а Linux, то никакого Denwer'а вам не нужно вовсе — надо просто поставить соответствующие пакеты. Все примеры данного курса я отлаживаю как минимум в Denwer'е под Windows XP и в Linux (Ubuntu).

Где взять Denwer?

Denwer положено брать с официального сайта разработчиков www.denwer.ru. Но! Пожалуйста, в данном случае не делайте этого, а обязательно возьмите Denwer на странице нашего курса на сайте http://edu.1september.ru (раздел “Учебные материалы”). Почему?

Потому что версии Denwer’а на сайте разработчиков могут меняться и возможна (хотя крайне маловероятна) ситуация, когда один и тот же пример — например, содержащий ошибку, в разных версиях будет работать по-разному. Когда я буду с этой ошибкой разбираться, мне важно знать, что я вижу то же, что видите вы. Впрочем, что я объясняю очевидные вещи коллегам-преподавателям :).

Файл, который вы скачаете, будет иметь очень длинное имя — в нем записаны версии всех пакетов. Не обращайте на это внимание, смело приступайте к установке.

Установка Denwer

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

Denwer ставится в некоторый каталог, указываемый пользователем. Конечно, разумно выбрать (создать) отдельный каталог (я, например, как будет видно ниже, выбрал каталог D:\Denwer3).

Для работы Denwer'а ему необходим так называемый “виртуальный диск”. Организация таких дисков — штатная возможность Windows и DOS с незапамятных времен. Сейчас виртуальные диски используются не слишком часто, поэтому о них подзабыли. Виртуальный диск — просто буква логического диска, закрепленная за некоторым каталогом. Создаются виртуальные диски командой subst.

Шаг 1

Рис. 10. Запускаем установочный файл. Не боимся, вирусов в нем нет!

Шаг 2

Рис. 11. Действительно хотим. Иначе зачем бы мы запускали инсталлятор?

Шаг 3

Рис. 12. Здравствуй, Denwer!

Шаг 4

Ответственный момент. Здесь надо выбрать каталог, в который будет установлен Denwer (если каталога с таким именем не существует, он будет создан). В принципе есть возможность установить Denwer и на flash-накопитель, тогда можно будет носить его с компьютера на компьютер. Правда, работать все будет помедленнее. Если нет необходимости, лучше так не делать.

Рис. 12. Выбор каталога для установки

Шаг 5

Рис. 13. Здесь разработчики своими словами объясняют, что такое виртуальный диск.

Шаг 6

Требуется ввести букву виртуального диска. Следует выбирать только свободную букву (т.е. уж точно не C
и не D!). Я выбрал Q.

Рис. 14. Выбор буквы виртуального диска

Шаг 7

Выбор вариантов инициализации виртуального диска — при загрузке компьютера или при запуске Denwer. Я всегда выбираю первый вариант — диск ровным счетом ничему не мешает. При выборе этого варианта в меню автозагрузки появится скрипт инициализации диска (см. рис. 15).

Рис. 15. Выбор вариантов инициализации виртуального диска

Рис. 16. Вызов скрипта инициализации виртуального диска

Шаг 8

Собственно, все. После установки на рабочем столе появляются два ярлыка для запуска и остановки Denwer'а. Можно сразу попробовать его запустить.

Рис. 17. Ярлыки на рабочем столе

При первом запуске скорее всего сработает система безопасности — брандмауэр Windows. Это нормально — ведь web-сервер начинает “слушать” сетевые порты. Если нажать кнопку “Разблокировать”, Windows запомнит ваш выбор и больше приставать не будет.

Рис. 18. Предупреждение системы безопасности при первом запуске

Когда Denwer запустится, в системном трее появятся две пиктограммы: одна — с пером (это — web-сервер Apache), другая — с письмом (эмулятор почтового сервера, который нам не понадобится).

Рис. 19. Пиктограммы в системном трее

Теперь можно попробовать, как все это работает. Запустите Denwer (если еще не сделали этого), загрузите браузер и введите в адресной строке http://localhost. Ну же!

Если все было сделано правильно, вы увидите страницу “Ура, заработало!”.

Рис. 20. Ура, заработало!

А если не работает? :(. Попробуйте, пожалуйста, в первую очередь посмотреть FAQ на сайте www.denwer.ru.
В нем описаны некоторые типичные проблемы и пути их решения. Если ничего не получится — пишите.

Что у него внутри?

Теперь у нас очень ответственный этап (очередной очень ответственный). Мы установили Denwer и должны научиться с ним работать. Пожалуйста, аккуратно и в точности проделайте следующие операции (я предполагаю, что виртуальному диску Denwer'а соответствует буква Q):

1. Остановите Denwer, если он у вас запущен.

2. Откройте диск Q.

Рис. 21. Содержимое виртуального диска Denwer'а

3. Войдите в каталог home и создайте в нем каталог localweb.

Рис. 22. Создали каталог localweb

4. В каталоге localweb создайте каталог www.

Рис. 23. Создали каталог www

5. В каталог www поместите html-файл test.htm следующего содержания:

<html>

<head>

<meta http-equiv="content-type"

content="text/html;

charset=windows-1251">

<title>Ура, заработало!</title>

</head>

<body>

<h1>Ура, заработало!</h1>

</body>

</html>

Рис. 24. Файл test.htm в каталоге www

Для работы с html- и php-файлами я настоятельно рекомендую использовать какой-нибудь текстовый редактор, более удобный, чем Notepad. В Notepad неудобно форматировать (выравнивать) код, он не нумерует строки (что крайне полезно при исправлении ошибок и т.д.). Кроме того, все учителя информатики, думаю, знают, что одним неосторожным движением в Notepad можно получить файл с двойным расширением — например, test.htm.txt — и долго мучиться, выясняя, почему ничего не работает. Хороший выбор — PSPad (www.pspad.com). Это удобный бесплатный редактор с хорошей русской локализацией.

6. Запустите Denwer.

7. В адресной строке браузера наберите http://localweb/test.htm. Вы должны увидеть результат, совпадающий с приведенным ниже.

Рис. 25. Web-сервер нашел файл

8. Переименуйте файл test.htm в файл index.htm. Наберите в адресной строке браузера http://localweb/ (без имени файла). Web-сервер все равно покажет файл.

Рис. 26. Web-сервер нашел файл по умолчанию

Целью этих экспериментов была демонстрация следующих очень важных фактов:

- Посредством Denwer'а можно поддерживать на одном компьютере много различных сайтов.

- Каждому сайту соответствует подкаталог с соответствующим именем в каталоге home. Например, сайту localweb соответствует каталог home/localweb.

- Корневой каталог каждого сайта находится в соответствующем подкаталоге www. В нашем случае — home/localweb/www.

- Заводить новые сайты лучше при выключенном Denwer'е. На самом деле, если вы заведете новый сайт при работающем web-сервере, ничего страшного не произойдет — просто сайт не “подцепится”. Чтобы Denwer увидел новый сайт, надо будет его остановить и снова запустить.

- Файлы с именами index и расширениями htm, html и php являются файлами “по умолчанию”. То есть если имя файла не задано в адресной строке браузера, то web-сервер ищет в соответствующем каталоге файл с именем по умолчанию и, если такой файл есть, возвращает его.

Здравствуй, мир web-программирования!

Первая лекция получилась очень насыщенной, а мы еще не начинали программировать. Пришла пора наконец начать.

Пожалуйста, убедитесь в том, что Denwer запущен. Создайте и поместите в корень сайта localweb (понимаете куда? В каталог localweb/www, с которым мы уже работали) следующий файл с именем hello.php (обратите внимание на расширение!):

<html>

<head>

<meta http-equiv="content-type"

content="text/html;

charset=windows-1251">

<title>Здравствуй, мир

web-программирования!</title>

</head>

<body>

<h1>

<?php echo "Здравствуй, мир

web-программирования!"; ?>

</h1>

</body>

</html>

Наберите в адресной строке браузера http://localweb/hello.php и посмотрите на результат.

Рис. 27. Первая программа на PHP

А теперь, внимание, самый важный тезис этой лекции, да, пожалуй, и всего web-программирования: в данном случае браузер получил от web-сервера не текст файла hello.php, а результат его интерпретации. Обязательно убедитесь в этом — посмотрите на код, который получил браузер (рис. 28). Вы не увидите в нем ни <?php, ни echo. Это были команды для интерпретатора PHP!

Рис. 28. Первая программа на PHP

Рис. 29. Ничего неожиданного: что написали, то браузер и получил

Язык PHP получил столь широкое распространение прежде всего благодаря удобному синтаксису, основанному на простой идее: код на PHP можно встраивать прямо внутрь html-файлов. Для этого служат специальные теги — открывающий тег <?php и закрывающий — ?> (на самом деле вид этих тегов можно настраивать, но нас это сейчас совершенно не интересует).

Обработка php-файла происходит следующим образом:

- Web-серверу от браузера поступает запрос на php-файл.

- Web-сервер видит, что у запрашиваемого файла расширение php.

- Web-сервер находит требуемый файл и передает его для обработки интерпретатору PHP.

- Интерпретатор просматривает файл по следующему алгоритму:

o Все, что находится вне тегов <?php … ?>, он возвращает web-серверу “как есть” — никак эти части файла не трогает и не изменяет.

o То, что находится внутри тегов <?php … ?>, он воспринимает как программу, которую нужно выполнить, а результат вернуть web-серверу. В приведенном выше примере интерпретатор выполнил одну-единственную команду echo, которая является командой вывода (как в Паскале write).

В php-файле может быть несколько блоков <?php … ?>, а может даже и не быть вовсе — в последнем случае интерпретатор вернет файл без изменений.

Вспомним о примере, с которого мы начали это занятие, — табличке перевода из десятичной в двоичную и шестнадцатеричную системы счисления. Пожалуйста, набейте соответствующий файл, назовите его, к примеру, dec2bin2hex.htm (цифра 2 часто используется программистами как замена слова “to”) и поместите в корневой каталог сайта localweb. Наберите адрес файла в адресной строке браузера и посмотрите на html-код соответствующей страницы (рис. 29).

Теперь решим эту же задачу на PHP. Наберите, пожалуйста, следующий код и поместите его файл dec2bin2hex.php также в корень сайта localweb.

Пример 3

<html>

<head>

<meta http-equiv="content-type"

content="text/html;

charset=windows-1251">

<title>PHP: таблица перевода в двоичную

и шестнадцатеричную системы счисления

</title>

</head>

<body>

<h1>Таблица перевода в двоичную

и шестнадцатеричную системы

счисления</h1>

<table border="1">

<tr>

<th>10</th>

<th>2</th>

<th>16</th>

</tr>

<?php

for($i=0;$i<=256;$i++) {

echo "<tr>\n";

echo "<td>$i</td>\n";

echo "<td>".decbin($i)."</td>\n";

echo "<td>".dechex($i)."</td>\n";

echo "</tr>\n";

}

?>

</table>

</body>

</html>

Посмотрите на результат выполнения этого файла и соответствующий html-код. (См. рис. 30) Видите разницу?

Рис. 30. Как говорится, почувствуйте разницу!

В данном случае в html-коде не осталось ни следа от кода на PHP. Пользователь на стороне клиента никак не сможет определить, каким образом был получен результат — то ли мы “сошли с ума” и набили всю таблицу руками, то ли ее сгенерил скрипт.

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

- Имена переменных в PHP начинаются со знака “$” — такова особенность синтаксиса.

- Операция строковой конкатенации в PHP обозначается точкой.

- Переход на новую строку при выводе кодируется “\n” (как writeln в Паскале). В нашем примере без этих новых строк можно было бы, конечно, обойтись — браузеру все равно. Но тогда бы иллюстрация на рис. 30 не была достаточно наглядной.

Вопросы и задания

1. Попробуйте завести в Denwer’е несколько сайтов. Например, в дополнение к сайту localweb, создание которого было описано в лекции, заведите сайт myweb.

2. Модифицируйте скрипт на PHP: дополните табличку перевода столбцом с восьмеричной записью чисел. Указание: для получения восьмеричной записи числа в PHP имеется функция decoct.

3. Если задание № 2 вам удалось выполнить с первого раза, специально допустите какую-нибудь ошибку в скрипте на PHP — например, уберите точку с запятой после одного из операторов. Это важно сделать, чтобы увидеть, как PHP реагирует на ошибки в коде. Вы должны получить сообщение об ошибке с указанием номера строки.

Литература

1. Дуванов А.А. Web-конструирование. DHTML. СПб.: БХВ-Петербург, 2003.

2. Еремин Е.А. Язык Java и его возможности. М.: Информатика, № 6–8/2008.