В своё время автор этой статьи потратил довольно много сил и времени впустую, решив научиться веб-программированию самостоятельно. Данная статья поможет начинающим не повторять его ошибки…

• Введение
• Основные термины
• Введение в HTML, CSS и JavaScript
• Введение в PHP и mySQL
• Денвер
• Заключение

Введение. Существует очень много технологий веб-программирования. В этой статье будет рассказано только о наиболее простых и наиболее популярных. На них зиждется большая часть сайтов и простота этих технологий отнюдь не свидетельствует об их несовершенстве. Для начала приведем некоторые основные термины, применяемые в среде веб-программистов.
Основные термины.
1. Приложение— программный продукт, работающей под управлением операционной системы компьютера.
2. Сервер – мощный сетевой компьютер, обрабатывающий запросы от персональных компьютеров, связанных с ним линиями связи.
3. Веб-хостинг – сервис для веб-программистов. Суть его в следующем: программист создает текстовые файлы с расширением .html, .php и закачивает их на компьютер в сети (такой компьютер называется сервером) по договору с владельцем данного сервера (называемого хостером). Хостер (владелец сервера) присваивает директории на сервере, предоставленной им для данного програмиста доменное имя, по которому любой пользователь интернета может теперь просматривать эти файлы путем набора доменного имени в адресной строке веб-броузера. Простейший бесплатный хостинг вы можете получить, например, на narod.ru

4. Веб-сервер— приложение, установленное на компьютере в сети (сервере), которое анализирует код файла, написанного веб-программистом и лежащего в одной из папок данного сервера. На основе анализа веб-сервер формирует код, который отправляет по сети веб-броузеру. Видов веб-серверов есть много, но мы будем рассматривать самый популярный из них: Apache.

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

6. Язык HTML — наиболее простой (и основной) из языков веб-программирования, при помощи которого создаются простые статические странички. Суть его в следующем: вы размещаете между операторами языка, называемыми тегами, кусочки текста, ссылки на изображения и т.д…

7. CSS – таблицы стилей. Вобщем, это часть языка HTML, управляющая внешним видом элементов веб-страницы (размерами, цветом, видимостью и т. д.). Большинство тегов HTML имеет свойство style. Это свойство, в свою очередь, имеет различные атрибуты, указывая которые, программист управляет видом элемента на странице. Атрибуты стилей можно указывать как непосредственно в теле документа, так и в отдельном файле с расширением .css . В этом случае можно управлять видом элементов на большом количестве страниц путем создания в них ссылки на единственный файл (таблицу стилей) с произвольным именем, например style.css.

8. Языки сценариев. Это языки программирования, для которых не нужен компилятор кода, а нужен лишь интерпретатор, который обрабатывает код и выдает ту самую HTML- страницу. Языки сценариев бывают серверные, (интерпретатор языка установлен на сервере) и клиентские. Интерпретатора клиентского языка как самостоятельной единицы не существует, он встроен в веб-броузер. Мы будем рассматривать наиболее мощные, популярные и простые языки сценариев: клиентский язык- JavaScript , серверный язык – PHP . JavaScript служит для оживления и повышения динамичности веб-страниц. PHP служит для обмена данными между клиентским веб-броузером и веб-сервером, обработки запросов, посланных броузером, на серверной стороне и выдачи броузеру ответных данных, например, результатов обращения к БД.

9. Интерпретатор языка сценариев – приложение, устанавливаемое обычно на сервере и работающее совместно с веб-сервером. Служит для обработки кода веб-странички, написанного программистом. Обработанный код веб-сервер отсылает по сети клиентскому веб-броузеру. Нас интересует PHP – интерпретатор.

10.Система управления базами данных (СУБД) – приложение, предназначенное для создания баз данных (БД) и оперирования этими данными. К примеру, сайты электронной коммерции обычно используют такие системы. СУБД устанавливается обычно на одном сервере с веб-сервером и интерпретатором языка сценариев (но не обязательно). Мы будем расматривать СУБД mySQL .

11. Язык mySQL – запросов. Этот язык не сложен и включает в себя относительно небольшой список операторов для работы с БД. Если СУБД установлена на локальном компьютере, то программист работает с ней обычно из командной строки mySQL. Как это делается, описывается в учебниках. Впрочем, знать работу из командной строки вам нет большой необходимости, если вы будете работать с БД через веб-интерфейс (об этом ниже).

12. Система доступа владельца сайта к БД, размещенным на сервере хостера – приложение, предназначенное для доступа (управления) администратора (владельца) сайта своими базами данных на хостинге по сети. Устанавливается на сервере хостера. Обычно это phpMyadmin .

Введение в HTML, CSS, JavaScript

Итак, для того, чтобы создавать простые страницы с различными эффектами, не требующими обмена данными с сервером, вам нужно знать только язык HTML (c CSS) и JavaScript. Принцип прост: в любом текстовом редакторе (например, Блокноте) пишете теги HTML с их содержимым, потом сохраняете этот файл (в любой папке) с расширением .htm или .html и называете его например sample1 Простейший html-файл sample1.htm без использования css и java script выглядит так:
Файл sample1.htm

Всю основную работу здесь делает тег р (параграф). Теперь используем таблицы стилей для придания элементам страницы свойств размера, цвета и др. Для этого в наш документ добавим тег style, в котором зададим к примеру цвет страницы и цвет выводимого текста.
Файл sample2.htm

Теперь добавим в этот файл код на JavaScript, который должен вывести на страницу строку Java Script:
Файл sample3.htm

Примечание: есть и другие способы включения таблиц стилей и кода Java Script в тело html- документа, мы рассказали лишь о самых простых. Чтобы писать самим и открывать такие файлы, вам не нужно иметь никаких дополнительных программ, все уже есть у вас в операционной системе (броузер Интернет Експлорер и Блокнот). Справочники HTML , CSS и JavaScript можно легко найти в сети. Очень толковый учебник Джо Бернса, переработанный автором данной статьи в настольную версию:
на русском языке и на английском языке
Тестировать созданные страницы можете просто в своем веб-броузере, кликнув по html- файлу мышью. По окончании работы над страницей загружайте файл на сервер.

Введение в PHP и mySQL Если вы хотите создавать страницы с возможностью обмена между ними данными, управляющие файлами, принимающие и обрабатывающие запросы из сети, вам нужно изучать язык PHP. Основной принцип также прост: в простом текстовом редакторе (блокноте) создаете файл с расширением .php В этот файл записываете операторы языка PHP и теги HTML. То есть по сути создаете такой же html – файл, как описывалось выше, но добавляете в него операторы PHP. Когда ваш файл готов, сохраняете его с расширением .php и закачиваете его на сервер. (На самом деле есть много нюансов относительно присваивания расширений файлам, я даю для начала лишь основополагающие моменты). Вот пример простейшего файла sample4.php, выводящего на страницу строку «РНР-скрипт»:

Файл sample4.php

Язык PHP можно использовать без СУБД, если вы строите сайт, не использующий БД. Но если вам нужно, чтобы на сайте обрабатывались сложные «разнокалиберные» запросы к БД, вам придется использовать mySQL. Принцип создания php-файлов с использованием mySQL абсолютно идентичен только что описанному выше с той лишь разницей, что в формировании файлов *.php участвуют операторы PHP, отвечающие за запросы к БД. Как их использовать, описано в учебниках. Предположим, мы создали для своего книжного интернет-магазина базу данных с именем shop и поместили в неё таблицу с данными о книгах под именем books. Нижеприведенный пример с комментариями показывает, как извлечь из этой таблицы все записи и поместить их на веб- страничку:

Файл sample_sql.php

Вот и все. Как видите, не слишком сложно! Языки PHP и myQL просты так же, как и JavaScript, но существует одна сложность в их использовании: если свои простые странички на HTML, CSS и JavaScript вы могли просматривать и тестировать в своем веб-броузере, то при создании php- файлов этот номер не пройдет – вы помните, что PHP- серверный язык сценариев. Следовательно для тестирования файлов своего сайта вам нужно установить на своем компьютере некое подобие хостинга. Для этого нужно (ни в коем случае не скачивайте ничего из сети, пока не прочитаете статью до конца, потом поймете — почему):

1. Скачать с сайта разработчиков Веб-сервер Apache последней версии и установить его на своем компьютере.

2. Скачать с сайта разработчиков Интерпретатор PHP последней версии и установить его на своем компьютере.

3. Скачать с сайта разработчиков СУБД mySQL последней версии и установить ее на своем компьютере.

4. Сконфигурировать и настроить все эти ресурсы для нормальной работы. Для новичка это представляет немалую сложность, не говоря уже о том, что указанные для скачивания файлы составляют общий объем не менее 50 Мб. После того, как вы все это сделаете, вы получите на своем компьютере виртуальный сервер с доменным именем http://localhost Теперь если вы создадите свою папку folder_name, положите ее в физическую директорию сервера (имеющую примерно такой вид: C:\INTERNET\home\localhost\www — при таком виде папку folder_name вам нужно будет вложить в папку www ), то вам останется только запустить свой веб-броузер и в его адресной строке набрать адрес html или php файла, лежащего в папке folder_name. Адрес будет выглядеть так: http://localhost/folder_name/file_name.php Теперь вам в броузер загрузится ваша страничка так, как будто бы она загрузилась к вам из сети. Но повторимся: закачать, установить, настроить, сконфигурировать все указанное порой представляет для новичка неразрешимую задачу.

Денвер К счастью, есть простой выход из этого положения: Денвер («джентльменский набор веб-разработчика»). Здесь российские энтузиасты подготовили пакет, включающий в себя все вышеупомянутые компоненты, но в десятки раз меньший по объему, за счет того, что было оставлено только самое необходимое. Этот комплект устанавливается и конфигурируется на вашем компьютере автоматически. Вам нужно лишь скачать последнюю версию Денвера с сайта разработчика. На этой же странице написано, что нужно сделать после скачивания комплекта. При необходимости можно дополнительно скачать расширения РНР из директории дистрибутивов (файлы для скачивания будут иметь примерно такое имя: РНР5_2006-10-04_5.1.6.exe). Когда вы скачаете и установите Денвер, вы получите у себя на компьютере дополнительный виртуальный диск, на котором сможете располагать свои файлы, и виртуальный сервер. Структура вашего диска будет примерно такой: Z:\home\localhost\www. Теперь в папку www вы сможете класть свои папки. вам останется только запустить свой веб-броузер и в его адресной строке набрать адрес html- или- php- файла, лежащего в папке folder_name. Адрес будет выглядеть так: http://localhost/folder_name/file_name.php Теперь вам в броузер загрузится ваша страничка так, как будто бы она загрузилась к вам из сети. Администрирование и создание баз данных возможно как из командной строки, так и через веб-интерфейс с использованием программы phpMyadmin, располагающейся на сервере хостера, также она есть и у Денвера. С помощью простого, понятного и интуитивного интерфейса программы на русском языке, вы без особого труда научитесь создавать, изменять, удалять БД и их таблицы, а также данные в таблицах. Мы рассмотрим именно работу в phpMyadmin, так как примерно так вам и придётся работать со своим реальным хостером. Предположим, нужно создать базу данных магазина с именем shop и разместить в ней таблицу с информацией о продаваемых книгах. Таблицу назовём books.

Создание базы и заполнение её данными:

1.Открываем главную страницу Денвера, для чего в адресной строке броузера вводим http://localhost/index.html (Предварительно не забудьте запустить Денвер щелчком на ярлычке Start Servers рабочего стола!)

2. Переходим вниз страницы и щелкаем по ссылке Заведение новых БД и пользователей MySQL

3. Вводим значения в поля: Пароль администратора MySQL: Во избежание путаницы с настройками Денвера пока оставим это поле пустым, но на реальном хостинге вам нужно будет этот пароль указать, либо вам назначит его сам хостер. С этим паролем вы будете входить в свою БД для её редактирования. Значения следующих полей будет использовать скрипт РНР и посетители вашего сайта для работы с вашей БД. Имя базы данных: shop Логин пользователя: shop Пароль: shop_passw

4. Жмем кнопку «Создать БД и пользователя». После получения сообщения База данных и новый пользователь заведены. возвращаемся на главную страницу Денвера и переходим по ссылке phpMyAdmin — администрирование СУБД MySQL

5. В левой части окна находим и выбираем базу и именем shop. Сейчас нам нужно заполнить базу данными. Предположим, мы хотим продавать книги. Для этого нужно создать таблицу с книгами. Для этого: Вверху выбираем вкладку SQL и под надписью Выполнить SQL запрос(ы) на БД : вводим в поле две инструкции (вот вам, кстати, и первый урок по языку mySQL, можете их скопировать прямо с данной странички и вставить в поле обе одновременно):

В первом запросе (CREATE TABLE `books`…) мы создаём в базе таблицу книг с названием books и указываем, какие в ней будут поля (столбцы), а также типы данных, находящихся в этих полях. Так, например, isbn (идентификационный номер), author (автор), title (название), price (цена) -это имена полей. varchar(13) NOT NULL default » означает, что тип данных в этом поле — строка с кол-вом символов не более 13-ти, и если в ней нет данных, то сервер должен записать туда значение пустой строки. PRIMARY KEY (`isbn`) в нашем скрипте пока не используется, а вообще оно означает, что в случае надобности поиск по таблицам будет производиться по значению поля isbn. Во втором запросе INSERT INTO `books` (…) мы вставляем в созданную только что пустую таблицу строки с наименованиями и характеристиками товаров (книг). Всё, что касается БД, мы подготовили. Теперь открываем Блокнот и для быстроты просто копируем с данной страницы скрипт рассмотренный выше. Файл сохраняем под именем sample_sql.php и кладём его в директорию www или в каталоги, вложенные в эту директорию. Потом при запущенном Денвере указываем в адресной строке броузера путь к нашему файлу: http://localhost/…/sample_sql.php Заключение Автор статьи попытался в предельно сжатом виде объяснить читателю, как быстро и без затрат обучиться веб-программированию. Имейте ввиду следующее:

1. Вам совершенно не обязательно (хотя и желательно) досконально знать указанные языки, потому что в сети выложено на скачивание множество скриптов (скриптом называют кусочек кода на JavaScript или PHP, встроенный в веб-страницу, и выполняющий определенную задачу, например, правильность заполнения пользователем форм для отправки на сервер), разработанных еще до вас. И вовсе не обязательно изобретать велосипед, если можно воспользоваться готовой работой. Вам нужно лишь уметь подключить готовый скрипт к собственной страничке.

2. Изучив указанные языки, вы при желании с легкостью сможете перейти к более сложным технологиям интернет-программирования (JSP, ASP, JavaBean и т.д.), а также к изучению других более сложных языков программирования, требующих компиляции (С++, Java, VisualBasic и т.д.).

3. Если при написании кода у вас возникают неразрешимые вопросы для решения какой-либо задачи, вы всегда можете обратиться за помощью на форумы программистов, где вам с удовольствием помогут.
4. Изучать языки рекомендуется в следующей последовательности: HTML (CSS), JavaScript, PHP (mySQL), что обеспечивает соответствие основному принципу обучения – от простого к сложному.
5. В сети Интернет также есть очень много учебных и справочных ресурсов по программированию, например:
HTML и CSS (русск.яз)
HTML, CSS, JavaScript, PHP, mySQL и др.(англ.яз)
PHP и mySQL