Основы web-программирования. Лекции 14 Сергей Львович Островский
Скачать 1.82 Mb.
|
С.Л. ОСтрОвСкий Москва Педагогический университет "Первое сентября" 2009 Основы Web-программирования для школьного "сайтостроительства" Лекции 1–4 Сергей Львович Островский Материалы курса "Основы web-программирования для школьного "сайтострои- тельства"" : лекции 1–4. – М. : Педагогический университет "Первое сентября", 2009. –48 с. © С.Л. Островский, 2008 © Педагогический университет "Первое сентября", 2008 Содержание Лекция 1 Пролетая над миром web-программирования .......................................................................................................................................3 Лекция 2 Пример задачи автоматизации: доска объявлений школьного сайта ......................................................................17 Лекция 3 Обработка форм на стороне сервера ..............................................................................................................................................................30 Лекция 4 "Позвольте, товарищи, у меня все записано!" .......................................................................................................................................43 �� ����������������������������������� ������������������������ ������������������������������ �������������������� ��� �������� ��������������������������������������������������������������������������������� ������������������������������������������������������������������������������������ ������������������������������������������������������������������������������������� ������������� ��������������������������������������������������������������������������������� ������������������������������������������������������������������������������������ ����������� ������� �������� �� �������� ��������� ������� ��������������� ������� ��������� �� �������� ������������ �������� �������������� ����� �������� ��������� ����������������� �������������������������������������������������������������������� ������������������������������������������������������������������������������������� ���������������������������������������������������������������������������������� ��������������������������������� ��������������� ����� ������������� ���� ��������� ���������� ���� ��������� ��� ������ �������� ������ �������� ������������ ��� ������ ������ �������� ����� ���� � ������������������������������������������������� ��� ������ ��������� ����� ������� �� �������� �� ��� ����� �������������� ������� ��������������� ���� ��������������� ���������� �������� �� �������� ��� ���������� ���������������� ���� �������� �� ������� ������������ ������ ������������ ��������� ����������������������������������������������� �������� ����� ������� �������� ���������� ���������������� ���������������������������������������������� ��� ������� ��������� ��������� ���������� ������ ���� � ��������������� ��������� ����� ���� ������� ������������ ��������� ������ ��� ������� ����� ������������� �������� ������������� ��� �� ����� ��� ���������� ���� ���� ��������� ��� ������ ����� ������� �� ����� ������� ��� ������ ������������ ���� ���������� ������� ������������ �� �������� ����� ��� ������������� ������������ ������������ ��� ���� ���������� ���� ������������ ������ ���������� �� �������������� �� ������ �������������� �� ����� ���� ��������� ��������� �������� �������� ����� ������� �� ������� ���������� ����������� ������������ �������� ����� ������� ��� ���� ������� ������� ��� ����� �������� ���������� ����������������� � ����������� ����������� ��������� ������ ����� ��������� �� ������ ���������� ������������ ����� ����������������������������������������������� ������������� ��������� �� �������������� ����� ��� ���������� �������� ������ ��������� ��������� ����� ������ ���������������� ��� �������������� ������ ���� �� ����� ����� ������������ �������� ������� ������ �� ������ ������ �������� �������� ����� ������� ������� ���� �� ������������ ��������� �������� ������ ���������� ������������ �������� ������������ ������������ �� ��������� ������� ���� ����� Основы web-программирования для школьного “сайтостроительства” ОстрОвский сергей Львович — главный редактор газеты “Информатика”, заместитель гендирек- тора Издательского дома “Первое сентября”, руководитель отдела программирования, учитель инфор- матики московской гимназии № 1514. Web-программированием профессионально занимается c 1997 г. C 2007 г. на очном отделении Педагогического университета “Первое сентября” читает курсы “Ос- новы web-дизайна и школьного «сайтостроительства»”, “Web-программирование для школьного «сайтостроительства»”, “Интерактивная web-графика и web-анимация”. В 2006/2007 и 2007/2008 учебных годах состоялось 7 выпусков групп по этим курсам. кОнцепция курса Сайтом школы сегодня уже никого не удивишь. Несколько тысяч учреждений среднего образования в России имеют собствен- ные доменные имена, а уж “простые странички” и вовсе сосчитать невозможно. Все это большое хозяйство требует постоянной поддержки, которая, по факту, чаще всего ложится на плечи учителей информатики. И начинается… “У нас сменился телефон, надо поменять на всех страницах…”, “у Марии Ивановны скоро день рождения, надо разместить на сайте поздравление…”, “а почему еще не готова страничка выпускного класса?..”. Даже если очень любить свою работу, такая жизнь может скоро свести с ума. Между тем все технологии для автоматизации обслуживания сайтов давно придуманы. В идеале программист-разработчик после сдачи проекта заказчику к нему не прикасается вовсе — все текущее наполнение сайта производится посредством так называемых “CMS” (систем управления контентом). Но это в идеале… В реальности же применительно к школьным сайтам это пока не так, но и здесь можно на порядки облегчить себе жизнь, потратив некоторое время на программирование. В курсе на конкретных практических примерах рассматриваются основные составляющие систем автоматизации обслу- живания сайтов: язык PHP и СУБД MySQL. В качестве инструмента используется пакет web-разработчика Denwer. Для успешного освоения курса необходимо иметь опыт разработки web-страниц на HTML и на базовом уровне владеть каким-либо из языков программирования (например, Паскалем, Си и т.п.). Очень желательно иметь представление о CSS и Javascript. Конечно, предлагаемый курс — это только начало, самый первый шаг. Но ведь он, как знают учителя, зачастую и является самым трудным. Надеемся, мы поможем нашим слушателям его сделать. учебный пЛан № брошюры Лекция 1 Лекция 1. “Пролетая над миром web-программирования”. Границы возможностей статического HTML. Два мира, две системы: программирование на стороне клиента и программирование на стороне сервера. Идем от реальности: текущие предложения хостинг-провайдеров. Инструментарий: пакет Denwer, установка. Первая программа на PHP “Здравствуй, мир web- программирования”. 1 Лекция 2. Пример задачи автоматизации: доска объявлений школьного сайта. SSI, основные возможности и директивы. SSI-версия школьной доски объявлений. PHP-версия доски объявлений. Совершенству нет предела: выводим все объявления из каталога, помечаем важные. Передача параметров в программы на PHP. Обзор синтаксиса PHP: типы данных, операции, основные алгоритмические конструкции. 1 Лекция 3. Обработка форм на стороне сервера. Формы и элементы управления HTML: однострочное и многострочное поля ввода, флажки, радиокнопки, списки. Методы GET и POST, кодирование URL. Обзор синтаксиса PHP: функции, массивы. 1 Лекция 4. "Позвольте, товарищи, у меня все записано!" Усовершенствованная доска объявлений с разделом администратора. Обзор синтаксиса PHP: файлы. Законченный мини-проект: административный интерфейс для доски объявлений на файловом “движке”. контрольная работа № 1. Разработка теста с обработкой результатов тестирования на стороне сервера. 2 Лекция 5. PHP + MySQL. Введение в использование баз данных в задачах web-программирования. Зачем нужна СУБД? Теория реляционных баз данных: основные термины. SELECT — “главная команда” SQL. Что такое MySQL? Взаимодействие с сервером MySQL из программ на PHP. 2 Лекция 6. Свои журналы ближе к т / делу. База данных “Страница школьного журнала”: от проектирования до визуализации. Практическое применение базы данных для автоматизации школьного сайта и школьной жизни. контрольная работа № 2. Доработка базы данных “Страница школьного журнала”. 2 Лекция 7. Соображаем“на троих”. Задействуем трех основных “игроков”: MySQL+PHP+Javascript. Проверка данных форм на стороне клиента перед отправкой на сервер. 2 Лекция 8. “Живописцы, окуните ваши кисти...” Рисование средствами PHP. Генерирование графических данных “на лету”. Построение графиков и диаграмм. Графическая визуализация данных школьного журнала. итоговая работа. Здравствуйте! Прежде всего здравствуйте, дорогие коллеги! В этом курсе нам предстоит познакомиться с удивитель- ным и захватывающе интересным миром web-програм- мирования. Конечно, мир этот огромен, практически не- объятен. Даже профессионалы обычно специализируются на некотором множестве технологий, а о других “имеют представление”. Поэтому нашей задачей-максимум будет знакомство с основными, наиболее распространенны- ми современными технологиями. Какими именно? Об этом — чуть ниже в разделе “Идем от реальности”. Но, кажется, я допустил грубую педагогическую ошибку — не представился. Это тем более нехорошо, что мне, как главному редактору “Информатики”, хо- рошо известно, что лекции нашего дистанционного Педуниверситета — это особый жанр. Их стиль, как правило, отличен от безличного и даже немного “высу- шенного” стиля газетных статей. В лекциях автор имеет полное право сказать (написать) “я думаю”, “я советую”. Авторское “я” в лекциях не прячется за непонятным “мы”. Здесь я — это я . А я — это Сергей Львович Островский, главный ре- дактор “Информатики” (на этой должности я работаю с 1999 г., а вообще в газете — с момента ее основания в 1995 г.), учитель программирования московской гим- назии № 1514 (с 1990 г.), заместитель генерального ди- ректора Издательского дома “Первое сентября”, в сферу ответственности которого входит, в частности, и отдел программирования. Web-программированием я занимаюсь с 1997 г. В те- чение некоторого времени весь наш отдел программи- рования из меня одного и состоял. Но с увеличением ко- личества задач увеличивалось и количество сотрудников. Сейчас нужды Издательского дома обслуживает доволь- но большой отдел, в котором работают программисты, специализирующиеся на различных задачах, главной из которых является поддержка наших интернет-проек- тов. И хотя в последнее время мне все меньше прихо- дится программировать и все больше руководить, я ста- раюсь оставаться в профессиональной форме и вникать во все, что делают мои коллеги. Важно также отметить, что этот дистанционный курс является сокращенной версией одноименного курса, который я читаю на наших очных курсах в Москве. Судя по отзывам слушателей, подавляющее большинство из них курсом довольны. Пользуясь случаем, я хочу искрен- не поблагодарить своих слушателей, которые терпеливо и мужественно осваивали этот непростой курс и от об- щения с которыми у меня остались самые лучшие вос- поминания. В течение всего курса со мной можно (и нужно!) связываться для оперативных консультаций. Для это- го есть два способа. Первый — посредством элект- ронной почты. Пожалуйста, пишите мне на адрес webmaster@1september.ru. Тема письма в обязательном порядке должна начинаться с “7009” (это код нашего курса). Дополнительная просьба: в каждом письме ука- зывайте, пожалуйста, ваш идентификатор слушателя и полные фамилию имя и отчество. Второй способ оперативной связи — ICQ. Для того чтобы мы могли общаться посредством ICQ, вам снача- ла необходимо прислать мне по электронной почте ваш номер, и я включу вас в свой контакт-лист. Просто пы- таться авторизоваться бесполезно — мой спам-фильтр отсекает все попытки несанкционированных авториза- ций. Я просто не получу ваш запрос. Повторю: обязательно связывайтесь со мной для ре- шения возникающих проблем. Я не могу обещать не- медленного ответа на электронное письмо, но в течение нескольких дней отвечу обязательно. Что касается ICQ, то у меня всегда честно выставлен статус. Если написано “занят”, значит, правда занят. “Свободен” — готов отве- тить на вопрос. Ну, вот, почти познакомились. Поехали? …Простите, чуть не забыл сказать очень важную вещь. Данный курс (как все курсы нашего Педагогическо- го университета), разумеется, можно просто читать. Фактически слушатели отличаются от читателей газеты лишь тем, что должны тщательно прорабатывать мате- риалы лекций, выполнять текущие задания и контроль- ные работы. Но я приложил максимум усилий, чтобы лекции были интересны всем, а не только тем, кто запи- сался на курс. Так что интересного вам чтения, а слуша- телям — успешной учебы. Вот теперь поехали! Можно ли обойтись без web-программирования? Можно! Но… сложно. Впрочем, все, конечно, зависит от стоящей перед вами задачи. Разумеется, при реали- зации различных интерактивных сервисов (всевозмож- ных форумов, например) без программирования обой- тись нельзя. В этом практически ни у кого нет сомнений. А вот можно ли обойтись без программирования при разработке “обычного” школьного сайта? Ответ “мож- но, но сложно” относится именно к такому пониманию вопроса. Почему? Давайте разберемся. Что такое сайт с технической точки зрения? Мно- жество файлов. Среди них — html-страницы, картинки, Лекция 1 Пролетая над миром web-программирования ПрОЛетая над мирОм WEb-ПрОграммирОвания файлы других форматов. Даже при средних размерах сайта количество файлов обычно значительно. Ну, на- пример, рассмотрим типовой сайт школы, на котором имеются: главная страница, страницы методических объединений (кафедр), страницы учителей, классов (как проходящих обучение, так и окончивших школу). Этот список каждый из нас может с легкостью продолжить. Допустим, что макет сайта выполнен без особых изыс- ков, но добротно. А на страницах добротных школьных сайтов обычно присутствуют своеобразные “выходные данные” — адрес школы, контактный телефон и т.п. Со- гласны? Пока нет вопросов? Сейчас будут! Причем не вопросы, а настоящее стихийное бед- ствие: у школы изменился телефон (например, в Мос- кве не так давно код в ряде районов сменился с 495 на 499). Представляете масштаб “катастрофы”? Это же придется пройтись по всем страницам (а их могут быть не сотни, а тысячи!) и изменить всего один несчастный телефон! Что, кто-то не испугался? Ага, нашлись продви- нутые html-кодеры, уже слышны всякие разговоры про фреймы (ух… не люблю я эти фреймы, но признаю — с использованием фреймов можно спроектировать сайт так, чтобы указанная задача изменения телефона была очень простой). Хорошо, а как вам следующая задачка? Как здорово видеть на школьном сайте поздравления с днем рождения! Причем не только учителям эти поздрав- ления приятно получать, но и ученикам. Согласны? А те- перь давайте прикинем трудозатраты… В школе, в которой я работаю, около 200 учителей и 800 учеников. Это значит, что каждый день, без выходных и отпусков, веб-мастер должен обновлять соответствующую страницу. И оши- баться ему крайне не рекомендуется — представляете, как будет кому-то обидно, если именно его забудут . Подобных примеров я знаю очень много и приводить их могу долго (я еще про расписание могу рассказать, про расписание замен и т.п.). Дело здесь не в конкрет- ных примерах, а в общей, объединяющей их идее. А она такова: сделать сайт, не прибегая к программированию, можно. Сделать, разместить и… забыть. Потому что под- держивать сколько-нибудь масштабный сайт “руками”, бесконечно править статичные html-файлы нереально! Но ведь никто так и не делает . Для поддержки сайтов разрабатываются специальные программы уп- равления содержанием (это практически буквальный перевод термина CMS — Content Management System). В некотором смысле наш курс о том, как устроены та- кие программы. Ведь в ряде случаев профессиональная CMS и не нужна — нужно лишь минимально автомати- зировать некие типовые операции обслуживания сайта (вспомним о тех же днях рождения). Итак, повторю еще раз основную мысль: необходи- мость в программировании возникает, как правило, на этапе решения задач обслуживания сайта. Иногда пара строчек кода заменяет дни работы (и, кстати, по- вышает качество этой работы!). Я понимаю, что пока все это больше похоже на лозунги, чем на руководство к действию. Но чуть потерпите. Уже в этой лекции мы покажем, как лозунги претворяются в жизнь. Два мира, две системы Возможно, некоторые из наших молодых коллег ни- когда не слышали фразы, вынесенной в заголовок этого пункта. Оно и к лучшему. Но в любом случае речь пой- дет не об оригинальном смысле этого штампа советской пропаганды, а о двух мирах web-программирования — клиентском и серверном. Слышали ли вы когда-нибудь такие программистские термины — “сторона клиента” и “сторона сервера”? Не исключено, что слышали, например, в таком контексте: “скрипт работает на стороне клиента” (или “…сервера”). Хотите узнать, что имеется в виду? Сторона клиента — это компьютер клиента, пользо- вателя. Тот самый компьютер, за которым сидит поль- зователь, когда работает в Интернете. Еще более узко, сторона клиента — это браузер пользователя. В целях безопасности мир браузера частично отстранен от мира клиентского компьютера, и скрипты (программы), вы- полняющиеся в браузере, имеют ограниченный доступ к файловой системе. На каких языках можно программировать на сторо- не клиента? Прежде всего, конечно, на “эсперанто” всех браузеров — языке Javascript. Программированию на Javascript посвящено немало хороших книг, среди ко- торых есть настоящий шедевр А.А. Дуванова, который (что мне особенно приятно!) впервые был опубликован в “Информатике” [1]. Основное назначение Javascript — манипулирование объектами браузера, посредством которого можно как реализовывать достаточно сложные интерактивные сце- нарии, так и просто облегчать себе жизнь при решении рутинных задач. Рассмотрим простой пример. Допустим, вам требует- ся поместить на страницу набившую оскомину таблицу перевода чисел (к примеру, в диапазоне от 0 до 256) из десятичной в двоичную и шестнадцатеричную системы счисления. Ничего сложного в этой задаче нет — если есть много лишнего времени, можно даже набить тре- буемую таблицу. Только делать это не надо. Я, например, потратил на все про все чуть больше минуты, включая время на набор кода. Вот такого, к примеру: Пример 1 |