Программирование для начинающих. Веб-программирование

264

Для создания интерактивных и компактных Web-приложений необходимо знать немало современных веб-стандартов. Данный сайт не претендует на всеобъемлющее описание этих стандартов, однако, мы постарались собрать много интересного материала, который послужит хорошим толчком для начинающих веб-программистов.

Ниже представлены разделы, которые входят в данную тему:

HTML5

HTML5 - это не просто новый язык разметки, а дюжина независимых веб-стандартов в одной упаковке. Новый стандарт позволяет воспроизводить видео, не прибегая к помощи модулей расширения браузера, таких как, например, Flash. Также в этом стандарте вводится лавина функциональностей, движимых JavaScript, которые могут придать веб-страницам определенные расширенные, интерактивные возможности, встречаемые в программном обеспечении для настольных компьютеров.

CSS3

Почти бессмысленно пытаться создать современный веб-сайт, не используя возможностей CSS (Cascading Style Sheet). Этот стандарт воткан в ткань Всемирной сети почти так же плотно, как и HTML. Каскадные таблицы стилей являются основным средством для любого типа деятельности в области веб-дизайна, будь то компоновка страниц, создание интерактивных кнопок и меню или простое декорирование. По сути, в то время как фокус HTML все больше смещается на содержимое и семантику, спецификация CSS стала центральной технологией веб-дизайна.

JavaScript , jQuery

Язык сценариев JavaScript был создан с целью получения доступа из сценариев ко всем элементам HTML-документа. Иными словами, этот язык представляет средства для динамического взаимодействия с пользователем, например для проверки приемлемости адресов электронной почты в формах ввода данных, отображения подсказок и т.п. В сочетании с CSS JavaScript закладывает основу мощности динамических веб-страниц, которые изменяются буквально на глазах, в отличие от новой страницы, возвращаемой сервером.

ASP.NET

ASP.NET является основной технологией для построения серверных элементов веб-приложений от Microsoft. Заинтересовать разработчиков в ASP.NET совсем нетрудно. Без преувеличения, ASP.NET является наиболее полной платформой для веб-разработки из всех, которые когда-либо создавались.

PHP и MySQL

Сочетание PHP и MySQL является одним из самых удобных подходов к динамическому веб-конструированию, основанному на использовании базы данных. Благодаря открытости исходных кодов (в отличие от конкурирующей технологии ASP.NET) это технологическое сочетание можно использовать совершенно бесплатно, и поэтому оно приобрело очень большую популярность у веб-разработчиков. Любой претендующий на результативность разработчик, использующий платформу Unix/Linux или даже Windows/Apache, нуждается в серьезном освоении этих технологий.

Я мечтал, чтобы компьютеры стали такими же простыми в использовании, как телефоны. Недавно моя мечта сбылась - я не смог разобраться с моим новым телефоном.

Что такое веб-программирование

Веб-программирование – это частный случай программирования клиент-серверного приложения . Клиент-серверное приложение – это вид распределенной . Двигаясь от частного к общему, получаем, что веб-программирование – это частный случай программирования распределенной информационной системы. Теперь попытаемся двигаться в обратном направлении, с целью определить, чем именно характерен этот самый частный случай.

Распределенной системой в контексте разработки программных продуктов называют систему независимых приложений, которые зачастую выполняются на различных вычислительных машинах, обмениваются информацией по сетевым протоколам, но решают одну общую задачу или группу задач одного направления. Клиент-серверная архитектура приложения, в свою очередь, характерна тем, что в системе присутствует один или несколько серверов и один или несколько клиентов. Сервер и клиент – это не что иное, как роли отдельных частей распределенной информационной системы, к которым относят как программную, так и аппаратную ее составляющую. Как правило, клиентская часть таких приложений общается с пользователем посредством пользовательского интерфейса, формируя при этом параметры пользовательского запроса, после чего запрос отправляется на сервер. Серверная часть принимает запрос, выполняет все необходимые для его обработки вычисления и отправляет результат обратно клиенту. Как я уже сказал, сервером и клиентом также называют аппаратное обеспечение (компьютеры), на которых установлены клиентские и серверные программные компоненты.

Клиент заказывает, сервер выполняет - все просто, но зачем это нужно, если любые вычисления можно организовать в рамках одного приложения и на одном компьютере? Дело в том, что запрашиваемые вычисления могут требовать серьезных аппаратных ресурсов (мощность процессора, объем памяти и т.д.), а предоставлять такие ресурсы каждому клиенту весьма и весьма дорого. Часто вычисления связаны с анализом информации в базе данных, размеры которой могут превосходить все разумные пределы объемов информационных носителей, устанавливаемых на обычных персональных компьютерах – пользовательских (клиентских) рабочих станциях. Более того, данные должны быть едиными для всех пользователей, поэтому они просто обязаны находиться на общем для всех сервере, иначе о совместном ведении этих данных не может быть и речи. Самыми известными клиент-серверными информационными системами как раз и являются , такие как Oracle и Microsoft SQL Server. Серверная их часть обслуживает файлы самой базы данных и обрабатывает от десятков, сотен а то и тысяч клиентов. Клиентская часть СУБД – это в первую очередь провайдер базы данных – программный компонент, который позволяет открыть удаленное соединение с базой данных, принять и передать на сервер запрос, вернуть результат запроса назад клиенту и закрыть соединение. Все это выполняется по сетевому протоколу, такому как TCP/IP.

Теперь вернемся к веб-программированию. В данном случае мы также имеем дело с сервером, клиентом и сетевым протоколом, по которому сервер и клиент общаются. В случае с веб-программированием сетевой протокол – это , веб-клиент – это чаще всего интернет браузер, а веб-сервер – приложение, которое умеет . Наиболее популярными веб-серверами являются сервер Apache, который работает под управлением серверной операционной системы UNIX и Internet Information Server (IIS), функционирующий под управлением серверной версии Microsoft Windows. Ну а HTTP (HyperText Transfer Prоtocоl) – это прикладной сетевой протокол на базе TCP/IP, который и предназначен для передачи гипертекста. Итак, с тем, что такое веб-программирование, думаю теперь более или менее понятно.

Чем веб-программирование отличается от обычного программирования

Контекст исполнения. Если в случае с обычным “настольным” приложением контекст его исполнения представлен структурами данных, размещенными в оперативной памяти в рамках одного на клиентской машине, то в случае веб-программирования все несколько сложнее. Попытаюсь сформулировать, чем отличается веб-программирование от обычного приложения в плане организации контекста его исполнения. Во-первых, контекст исполнения поделен на всех участников распределенной системы, и они обязаны его как-то делить и синхронизировать между собой. Во-вторых, в случае с веб-программированием контекст исполнения теоретически существует только в ходе формирования и обработки одного клиент-серверного запроса. Имеется в виду, что жизненный цикл всех структур данных в оперативной памяти ограничен не всем периодом работы клиента с веб-приложением, а временем подготовки, отправки и обработки одного HTTP запроса. После перезагрузки интернет страницы все структуры контекста необходимо восстанавливать. Безусловно, существуют различные способы сохранять состояние сеанса между запросами, но эти способы не вписываются в канву программирования по принципу “запрос-ответ” и являются искусственными надстройками над инфраструктурой веб-программирования. Ведь так называемая stateless (без состояния) модель использования сервера, когда система не хранит своего состояния между запросами, а “просыпается” только тогда, когда запрос необходимо обработать, является более надежной в сравнении со stateful (с поддержкой состояния) моделью. Это так, поскольку выход из строя аппаратной или системной программной части сервера может привести к непредсказуемому поведению веб-приложения только в том случае, если этот сбой произойдет в момент обработки запроса. Также, элементарно может не хватить оперативной памяти для обслуживания большого количества клиентских запросов, при условии, что каждому сеансу необходимо обеспечить возможность сохранять и восстанавливать свое состояние. Тем не менее, совсем без контекста исполнения, разделяемого между запросами в некоторых задачах обойтись довольно сложно, поскольку в ходе вычислений часто приходится работать к ресурсам, обращение к которым может занимать много времени. Для того чтобы минимизировать подобные издержки наиболее критичные ресурсы разработчики предпочитают хранить “под рукой” - в оперативной памяти веб-сервера. Рассмотрим, какие существуют способы управлять состоянием веб-приложения. Поскольку мы имеем дело с общением клиента и сервера, то и контекст делится на клиентский и серверный. Далее перечислены способы сохранения и восстановления контекста исполнения или по-другому состояния сеанса работы веб-приложения на стороне клиента и на стороне сервера.

Контекст исполнения на стороне клиента можно сохранять:

  • В оперативной памяти приложения клиента (интернет браузера). С выходом HTML5 для этих целей в браузерах должна появиться . Это весьма разумно, поскольку используется оперативная память клиента, а не сервера, который “один на всех”. С другой стороны, не все данные есть возможность хранить на стороне клиента, поскольку не все данные можно преобразовать в текстовый формат и передать на сервер.

  • В небольших фрагментах текстовых данных, сохраняемых на стороне клиента – cookies. Cookies сохраняются в текстовых файлах, в разделах, выделенных операционной системой для хранения различной пользовательской информации. Эти данные передаются каждый раз серверу в заголовках HTTP запроса. Отдельным недостатком этого способа является то, что прием cookies может быть запрещен клиентом.

    • Контекст исполнения на стороне сервера можно сохранять:

  • В области оперативной памяти, выделяемой веб-сервером (Apache, IIS) и называемой состояние приложения . Эти данные доступны со всех страниц веб-приложения всем его пользователям.

  • В области оперативной памяти, называемой состояние сеанса . В отличие от состояния приложения эта область выделяется отдельно для каждого пользователя и сохраняется в течение сеанса его работы с веб-приложением (от момента перехода на страницу приложения и до момента закрытия последней его страницы).

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

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

    Взаимодействие различных компонентов. Проблема стандартизации и унификации взаимодействия различных программных компонентов сложных программных продуктов свойственна не только веб-приложениям. Современные настольные приложения также состоят из различных библиотек, которые могут быть написаны различными разработчиками и с использованием различных программных платформ и . Для универсального способа общения таких компонентов между собой ведущими компаниями-разработчиками создаются соответствующие стандарты и технологии, например Component Object Model (COM) и от компании Microsoft или архитектура Common Object Request Broker Architecture (CORBA), продвигаемая консорциумом OMG.

    Элементам веб-приложения также приходится общаться между собой, просто в их случае проблема стоит не так остро, поскольку их общение происходит на расстоянии (не в рамках одного процесса). С целью организации обмена информацией между клиентом и сервером довольно часто используют XML, который великолепно подходит для описания чего угодно, если это “что угодно” имеет ярко выраженную структуру. XML помещают в тело HTTP запроса и отправляют на сервер. Язык XML – это универсальный строительный материал, пригодный для решения абсолютно разных задач, поэтому на его базе создаются специализированные языки – протоколы сетевого взаимодействия, которые в последствии становятся общепринятыми стандартами. К таким протоколам следует отнести Web Services Description Language (WSDL) – язык описания интерфейсов веб-сервисов и Simple Object Access Protocol (SOAP) – протокол обмена структурированными сообщениями между компонентами распределенной информационной системы. Чаще всего сообщения SOAP представляют собой сигнатуру удаленных вызовов процедур и функций (методов) веб-сервиса с параметрами и без. Безусловно, для написания простейших веб-приложений, построением клиента и сервера которых занимается один программист или одна группа программистов необязательно использовать все эти надстройки, но если вы создаете интернет ресурс, клиентами которого должны стать не только рядовые пользователи, но и веб-приложения, создаваемые другими компаниями, то в процессе его разработки лучше придерживаться общепринятых стандартов.

    Составляющие веб-программирования Веб-дизайн

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

    Здесь описаны решения типовых задач, с которыми часто имеют дело веб-дизайнеры: создание макета или шаблона интернет страницы, меню, элементов управления закладками, иерархической навигации типа “дерево” и многое другое.

    Перечень нововведений, которые начнут поддерживаться всеми современными браузерами после того, как HTML5 официально получит статус рекомендации консорциума W3C.

    Программирование на стороне клиента

    Тема веб-программирования на стороне клиента непосредственно связана с веб-дизайном, но вынесена отдельным пунктом с целью еще раз заострить внимание читателя на том, что веб-программирование делится на клиентское и серверное.

    Самый популярный и поддерживаемый всеми современными интернет браузерами язык программирования. Здесь вы найдете описание того, как на HTML страницу добавить JavaScript код и как использовать объектно-ориентированных подход при написании на нем пользовательских сценариев. Здесь есть и примеры JavaScript приложений.

    Библиотека, написанная на JavaScript, в состав которой входит огромное количество полезных функций для работы с объектной моделью загруженной интернет страницы: от редактирования содержимого страницы до создания различных визуальных эффектов. Примеры использования jQuery здесь также присутствуют.

    Технология создания динамических интернет страниц на основе асинхронной загрузки гипертекста (результат асинхронного выполнения HTTP запросов) в отдельные области текущей страницы. Приведено описание того, как использовать технологии AJAX с примерами на JavaScript, в том числе с использованием библиотеки jQuery.

    Программирование на стороне сервера

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

    Наиболее популярное средство веб-программирования на стороне сервера. PHP поддерживается большинством хостинг-провайдеров, и провайдер данного сайта не исключение. Здесь я постараюсь кратко изложить основные принципы программирования на PHP и привести примеры небольших приложений, написанных на нем.

    Очень крутая технология веб-программирования от компании Microsoft. К сожалению, пока я не могу размещать здесь примеры веб-приложений, создаваемых с помощью ASP.NET, поскольку мой хостинг-провайдер не поддерживает эту технологию. Хочу сказать, что окружение ASP.NET позволяет создавать веб-приложения так же легко, как и обычные приложения. Вы имеете дело с привычными пользовательскими элементами управления, которые размещаете на странице с помощью привычных мастеров интегрированной среды разработки . Также, привычным образом вы добавляете к ним обработчики событий. Преобразование элементов управления в код HTML и JavaScript, генерацию proxy-классов по описанию WSDL, установку соединения и упаковку удаленных вызовов к другим веб-сервисам в сообщения SOAP берет на себя инфраструктура ASP.NET. Доступ к сервисам сохранения и восстановления контекста исполнения приложения, асинхронное обновление страницы средствами AJAX и многое другое также находится в зоне ее ответственности.

    К минусам ASP.NET можно отнести то обстоятельство, что она стирает для разработчика границы между обычным программированием и веб-программированием, и он может не отдавать себе отчет, как именно работает его приложения. Возможно, это и не минус вовсе, но я считаю, что перед изучением этих замечательных технологий следует освоить базовые принципы веб-программирования на примере того же PHP. На этом про веб-программирование у меня пока все.

    Тема реферата

    Основы веб-программирования

    Введение

    Веб-программирование - раздел программирования 1. История появления

    С середины годов, 1990-х веб-разработка была одной из наиболее динамично развивающихся отраслей в мире. В 1995 году меньше, было чем 1000 веб-разработки компании в Соединенных Штатах, но к 2005 году насчитывалось более 30000 таких компаний, только США. в Сети развития промышленности ожидается рост на 20% к 2010 году. Рост этой отрасли толкают крупных желающих компаний, продавать товары и услуги для своих клиентов и автоматизировать. Вместо стоимости в десятки тысяч долларов, как это в было случае раннего создания веб-сайтов, теперь можно разработать простой веб-сайт для менее тысячи долларов, в зависимости от сложности и содержания. объема веб-компании. Малые разработки сайта . Язык HTML

    Язык HTML был разработан британским Данный язык прост в освоении и является классическим языком. С помощью него написаны многие сайты можно даже сказать что 90% сайтов написано с его использованием. С годами данный язык совершенствовался и совершенствуется по сей день.2.0 - Стандарт был утвержден в ноябре 1944 г. организацией IETF (Internet Engineering Task Force). В нем были расширены возможности предыдущей версии языка и он получил широкое распространение как у профессионалов, так и любителей.3.0 - Проект версии языка был опубликован в марте 1995 г. В нем были произведены радикальные изменения предыдущих версий включены дополнительные возможности, включая таблицы, математические выражения и т.д. Это стало причиной того, что он не стал официальной спецификацией и был заменен спецификациейHTML 3.2.3.2 (кодовое наименование проекта: Wilbur) - Был опубликован и начал широко использоватья с мая 1996 г., получил официальное утвержден в 1997 г. Получил популярность из-за совместимости с HTML 2.0.4.0 (кодовое наименование проекта: Cougar ) - последняя версия языка. В нем реализованы многие распространенные концепции Web -дизайна и приняты некоторые средства HTML 3.2. Самым значительным отличием HTML 4.0 от предыдущих версий является кодировка Unicode , тег Object, позволяющий работать с мультимедиа (в т.ч. с видеоклипами и звуком) и др.

    HTML5 вводит несколько новых элементов На данный момент последней версией является HTML 5.

    Язык PHP

    Язык PHP был создан для решения конкретной практической задачи в среде интернет (какой именно можно узнать, прочитав первую лекцию курса). Мы тоже постараемся не отвлекаться слишком сильно на теоретические рассуждения, и будем стремиться к решению какой-нибудь конкретной задачи в каждой из лекций. Большинство примеров взяты из реально существующей системы: виртуального музея истории информатики. Первая часть курса посвящена изучению основ синтаксиса и управляющим конструкциям. После этого рассматривается технология клиент-сервер, как основная сфера приложения языка PHP. Затем переходим к изучению наиболее полезных на наш взгляд встроенных функций и решению с их помощью практических задач. Хотя объектная модель в языке PHP не самая богатая, ее принципиальное наличие позволяет естественным образом описывать объектные модели данных. В качестве базовой модели будет рассмотрена модель документа виртуального музея информатики. После этого будет рассмотрен ряд прикладных аспектов: работа с файловой системой, с БД, строками, сессиями, DOM XML - все это позволит рассмотреть ключевые задачи практического использования языка.

    Его создатель, Расмус Лердорф, хотел знать, сколько человек читают его online-резюме, и написал для этого простенькую CGI-оболочку на языке Perl, т.е. это был набор Perl-скриптов, предназначенных исключительно для определенной цели - сбора статистики посещений.

    «PHP может все», - заявляют его создатели. В первую очередь PHP используется для создания скриптов, работающих на стороне сервера, для этого его, собственно, и придумали. PHP способен решать те же задачи, что и любые другие CGI-скрипты, в том числе обрабатывать данные html-форм, динамически генерировать html страницы и т.п. Но есть и другие области, где может использоваться PHP. Всего выделяют три основные области применения PHP.

    Первая область, как уже говорилось, - это создание приложений (скриптов), которые исполняются на стороне сервера. PHP наиболее широко используется именно для создания такого рода скриптов. Для того чтобы работать таким образом, понадобится PHP-парсер (т.е. обработчик php-скриптов) и web-сервер для обработки скрипта, браузер для просмотра результатов работы скрипта, ну, и, конечно, какой-либо текстовый редактор для написания самого php-кода. Парсер PHP распространяется в виде CGI-программы или серверного модуля. Как установить его и web-сервер на свой компьютер, мы рассмотрим немного позднее. В этом курсе мы будем обсуждать, как правило, создание именно серверных приложений, как пример использования языка PHP.

    Вторая область - это создание скриптов, выполняющихся в командной строке. То есть с помощью PHP можно создавать такие скрипты, которые будут исполняться, вне зависимости от web-сервера и браузера, на конкретной машине. Для такой работы потребуется лишь парсер PHP (в этом случае его называют интерпретатором командной строки (cli, command line interpreter)). Этот способ работы подходит, например, для скриптов, которые должны выполняться регулярно с помощью различных планировщиков задач или для решения задач простой обработки текста.

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

    Итак, область применения PHP достаточно обширна и разнообразна. Тем не менее существует множество других языков программирования, способных решать похожие задачи. Почему стоит изучать PHP? Что это нам дает? Во-первых, PHP очень прост в изучении. Достаточно ознакомиться лишь с основными правилами синтаксиса и принципами его работы, и можно начинать писать собственные программы, причем браться за такие задачи, решение которых на другом языке требовало бы серьезной подготовки.

    Во-вторых, PHP поддерживается почти на всех известных платформах, почти во всех операционных системах и на самых разных серверах. Это тоже очень важно. Вряд ли кому-т

    Язык JavaScript

    является языком сценариев (скриптов), который применяют в основном для создания на Web-страницах интерактивных элементов. Его можно использовать для построения меню, проверки правильности заполнения форм, смены изображений или для чего-то еще, что можно сделать на Web-странице. Если взглянуть на Google Maps или службу GMail компании Google, то можно понять, на что способен сегодня язык JavaScript.

    Так как JavaScript является в настоящее время единственным языком сценариев, который поддерживают все основные браузеры Web (Internet Explorer, Firefox, Netscape, Safari,Opera, Camino и т.д.), то он используется очень широко.

    Код JavaScript обычно выполняется Web-браузером клиента, и в этом случае он называется сценарием на стороне клиента. Но код JavaScript можно выполнять также на Web-сервере для формирования документов HTML, воплощая тем самым сценарий на стороне сервера. Хотя использование JavaScript обычно ограничивается сценариями на стороне клиента, он является также очень мощным серверным языком.

    Прежде всего, необходимо узнать, как добавить сценарий JavaScript на страницу HTML. Это можно сделать одним из двух способов: поместить теги Script на Web-странице и расположить код JavaScript внутри этих тегов, или поместить весь код JavaScript в отдельный файл и связаться с ним с помощью тега Script. Любой из этих методов вполне допустим, но они имеют разное назначение. Если имеется небольшой код, который будет использоваться только на одной странице, то размещение его между тегами Script будет хорошим решением. Если, однако, имеется большой фрагмент кода, который будет использоваться на нескольких страницах, то, наверно, лучше поместить этот код JavaScript в отдельный файл и соединиться с ним. Это делается для того, чтобы не нужно было загружать этот код всякий раз при посещении различных страниц. Код загружается один раз, и браузер сохраняет его для последующего использования. Это похоже на то, как используются каскадные таблицы стилей (CSS).

    Ниже приведены примеры двух способов подключения кода JavaScript:


    Заключение

    Из всего этого следует сделать вывод, что для написания хорошего и динамичного сайта надо знать не только основные языки, которые я перечислил, но и языки, которые требуются для построения, так сказать, визуального вида страницы, чтобы она была «красочная». Также в большинстве Веб-страниц используются базы данных, удовлетворяющие нуждам страницы. Иллюстрацией их работы служит работа таких сайтов, как Wikipedia.com, amazon.com, Ozon.ru и т.д.

    Список литературы

    1.Основы программирования на JavaScript - Марк Кан

    2.Курс "Язык программирования PHP" - Нина Владимировна Савельева

    3.HTML - Александр Ромаданов

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

    Язык веб-программирования – это совокупность операторов, с помощью которых создаются коды веб-программ, или их еще называют скриптами, сценариями . Язык программирования передает понятные компьютеру инструкции для выполнения определенных операций. Так, с помощью языков программирования человек «разговаривает» с машиной. Обычно коды, написанные на веб-языках, читаются браузерами. Среди самых распространенных языков веб-программирования можно отметить: HTML, CSS, PHP, JavaScript, Perl, jQuery:

    • Язык разметки HTML

      HTML (HyperText Markup Language — “язык разметки гипертекста”) – самый известный для веб-разработчиков язык программирования, хотя по своей функциональности он скорее всего относится к языкам разметки. HTML был создан в 1991-1992 изобретателем Тимом Бернерсом-Ли, британцем по происхождению. Язык применяется для распределения объектов и текста на веб-страницах. Для лучшего понимания сущности языка HTML можно косвенно сравнить с программой Office Word. Язык оснащен тегами, которые и являются, по сути, инструкциями компьютеру.

    • Язык программирования PHP.

      PHP (Hypertext Preprocessor – “ процессор гипертекста” ) – является СИ-подобным скриптовым языком. Самая первая версия PHP была разработана еще в 1994, но к 1998 году появилась основная версия PHP – 5.4. Язык PHP широко используется программистами для написания сценариев, которые выполняются на серверах при каждом обновлении страницы сайта. PHP действительно похож на язык СИ, и многое он позаимствовал из языка JAVA и технологии JSP. Сегодня PHP используется многими программистами, потому ядром огромного количества сайтов является php-код.

    • Ориентированный язык программирования JavaScript

      JavaScript – язык программирования, созданный для «оживления и придания динамичности» веб-сайтам. Развитие языка началось с 1996 года. Программы, написанные на языке JavaScript,называются скриптами, которые выполняются совместно с HTML-документами. С помощью JavaScript программисты создают некоторые функции, как например открытие нового окошка с выводом в нем сообщения об ошибке после некоторого действия пользователя. Язык JavaScript способен выполнять свои скрипты спустя заданные интервалы времени. В общем, JavaScript это и самостоятельный язык, но также его можно назвать вспомогательным для остальных, так как с помощью него легко сделать сайт более функциональным и интересным для пользователя.

    • jQuery

      jQuery – это библиотека многократно используемых объектов и функции JavaScript, созданная Джоном Резигом и представленная в 2006 году. Обычно jQuery является отдельным JavaScript-файлом. jQuery можно назвать фреймворком (framework), т.е. набором операции и инструкции для решения однотипных задач. Библиотека позволяет вам работать и управлять различными объектами на веб-страницах.

    • Динамический язык программирования Perl

      Perl (Practical Extraction and Report Language – “практический язык извлечений и отчетов”) – язык программирования, чьим самым важным преимуществом является расширенные возможности работы с текстом. Был создан лингвистом Ларри Уоллом в 1989 году. К функциям Perl также относятся веб-разработка, системное администрирование, разработка графического интерфейса, игр.Perl известен также своим огромным набором модулей . Обычно программисты обращаются к языку Perl тогда, когда сценарий слишком сложен для написания на остальных языках веб-программирования.

    • Cascading Style Sheets

      CSS (Cascading Style Sheets- “ каскадные таблицы стилей” ) – язык программирования, который скорее также относится к языкам разметки и форматирования. CSS стал разрабатываться в 1994 году Хокон Виум Ли и Бертом Босом. Основной задачей было создания языка, который бы форматировал HTML-объекты и текст: работал с шрифтами, цветами, стилями. В общих чертах, CSS работает с внешним видом сайтов. Язык CSS используется с целью «украсить» веб-страницы.

    Если вы уже пробовали (а может быть, даже и небезуспешно:)) программировать, например, на Delphi, или Visual Basic, или даже Visual C++, то привыкли к такой схеме работы программы: нажимается кнопочка - выполняется код - выводится результат, и все это выполняется на одном компьютере.

    В веб-программировании все обстоит по-другому.

    Вы задумывались, что происходит, когда вы вводите в адресной строке браузера URL (Universal Resource Location, или в просторечии - адрес)? Cхема работы следующая:

    • Браузер открывает соединение с сервером
    • Браузер отправляет серверу запрос на получение страницы
    • Сервер формирует ответ (чаще всего - HTML-код) браузеру и закрывает соединение
    • Браузер обрабатывает HTML-код и отображает страницу

    Обратите внимание: еще до того, как вы увидели на экране запрошенную страницу, соединение с сервером закрыто, и он о вас забыл. И когда вы введете другой (или тот же самый) адрес, или щелкните по ссылке, или нажмете на кнопку HTML-формы - та же схема повторится снова.

    Такую схему работы называют "клиент-сервер". Клиент в данном случае - браузер.

    Итак, соединение с веб-сервером длится всего несколько секунд (или долей секунд) - это промежуток времени между щелчком по ссылке (или другим способом запроса) и началом отображения страницы. Большинство браузеров во время соединения отображают некий индикатор, например, MS Internet Explorer отображает анимацию в правом верхнем углу.

    Внимательный читатель здесь может заметить - а как же так, я уже читаю страницу, а индикатор все еще показывает процесс соединения? Дело в том, что тэг (загрузка изображения) и некоторые другие - это не более чем еще один запрос к серверу - и выполняется он точно также, как и любой другой - по той же схеме. И запрос картинки, с точки зрения сервера, полностью независим от запроса HTML-ника.

    Чтобы навсегда избавиться от восприятия HTTP как "черного ящика", "притворимся" браузером с помощью telnet"а:

    Запустим telnet сайт 80 . Введем в окне терминала следующее (если ввод не отображается - ничего страшного):

    GET / HTTP/1.0 [здесь нажмем Enter] Host: сайт [здесь нажмем Enter дважды]

    Нажатие Enter соответствует, как правило, комбинации символов CR + LF, обозначаемых как \r\n. Далее будет использоваться именно это обозначение.

    По экрану пробежит HTML-код страницы . Как видите - ничего сложного.

    Исходный код текущей страницы можно просмотреть практически в любом браузере, выбрав в меню "View|Source".

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

    Попробуйте:

    Telnet www.ya.ru 80 GET /logo.gif HTTP/1.0\r\n Host: www.ya.ru\r\n \r\n

    По экрану пробежит то, что вы увидите, если просмотрите логотип Яндекса в текстовом редакторе.

    HTML-формы. Методы отправки данных на сервер

    С HTML-формами вы наверняка уже встречались:

    Введите Ваше имя:

    Сохранив данный код в HTML-файле и просмотрев его с помощью вашего любимого браузера, вы увидите привычную HTML-форму.

    Рассмотрим используемые в этом небольшом примере тэги подробнее.

    Тэг , имеющий парный завершающий тэг , собственно и задает форму. Его атрибуты - оба необязательные:

    • action - указывает URL (полный или относительный), на который будет отправлена форма. Отправка формы - это такой же запрос к серверу, как и все остальные (как я уже описал выше). Если этот атрибут не указать - форма отправляется на текущий документ, то есть "сама на себя".
    • method - способ отправки формы. Их два.
      • GET - отправка данных формы в адресной строке. Вы могли заметить на различных сайтах присутствие в конце URL символа "?" и следующих за ним данных в формате параметр=значение. Здесь "параметр" соответствует значению атрибута name элементов формы (см. ниже про тэг ), а "значение" - содержимому атрибута value (в нем, например, содержится ввод пользователя в текстовое поле того же тэга ). Для примера - попробуйте поискать что-нибудь в Яндексе и обратите внимание на адресную строку браузера. Это и есть способ GET.
      • POST - данные формы отправляются в теле запроса. Если не совсем понятно (или совсем непонятно), что это такое - не беспокойтесь, скоро мы к этому вопросу вернемся.

    Если атрибут method не указан - подразумевается "GET".

    Тэг - задает элемент формы, определяемый атрибутом type:

    Значение "text" задает однострочное текстовое поле ввода. Значение "submit" задает кнопку, при нажатии которой происходит отправка формы на сервер.

    Итак, что же происходит, когда мы нажимаем кнопку "OK"?

    • Браузер просматривает входящие в форму элементы и формирует из их атрибутов name и value данные формы. Допустим, введено имя Vasya. В этом случае данные формы - name=Vasya&okbutton=OK
    • Браузер устанавливает соединение с сервером, отправляет на сервер запрос документа, указанного в атрибуте action тэга , используя метод отправки данных, указанный в атрибуте method (в данном случае - GET), передавая в запросе данные формы.
    • Сервер анализирует полученный запрос, формирует ответ, отправляет его браузеру и закрывает соединение
    • Браузер отображает полученный от сервера документ

    Отправка того же запроса вручную (с помошью telnet) выглядит следующим образом (предположим, что доменное имя сайта - www.example.com):

    Telnet www.example.com 80 GET /cgi-bin/form_handler.cgi?name=Vasya&okbutton=OK HTTP/1.0\r\n Host: www.example.com\r\n \r\n

    Как вы, скорее всего, уже догадались, нажатие submit-кнопки в форме с методом отправки "GET" аналогично вводу соответствующего URL (со знаком вопроса и данными формы в конце) в адресной строке браузера: http://www.example.com/cgi-bin/form_handler.cgi?name=Vasya&okbutton=OK

    На самом деле, метод GET используется всегда, когда вы запрашиваете с сервера какой-либо документ, просто введя его URL, или щелкнув по ссылке. При использовании , к URL просто добавляются знак вопроса и данные формы.

    Возможно, все эти технические подробности и упражнения с telnet-ом кажутся вам невероятно скучными и даже ненужными ("а при чем тут PHP?"). А зря. :) Это основы работы по протоколу HTTP, которые необходимо знать назубок каждому Web-программисту, и это не бесполезные теоретические знания - все это пригодится в ежедневной практике.

    Теперь заменим первую строку нашей формы на следующую:

    Мы указали метод отправки "POST". В этом случае данные отправляются на сервер несколько другим способом:

    Telnet www.example.com 80 POST /cgi-bin/form_handler.cgi HTTP/1.0\r\n Host: www.example.com\r\n Content-Length: 22\r\n \r\n name=Vasya&okbutton=OK

    При использовании метода POST данные формы отправляются уже после "двух Enter-ов" - в теле запроса. Все, что выше - на самом деле заголовок запроса (и когда мы использовали метод GET, данные формы отправлялись в заголовке). Для того, чтобы сервер знал, на каком байте закончить чтение тела запроса, в заголовке присутствует строка Content-Length. Преимущество метода POST - отсутствие ограничения на длину строки с данными формы.

    При использовании метода POST невозможно отправить форму, просто "зайдя по ссылке", как было с GET.

    Для краткости изложения, введем термины "GET-форма" и "POST-форма", где префикс соответствует значению атрибута method тэга .

    При использовании POST-формы, в ее атрибуте action можно указать после знака вопроса и параметры GET-формы. Таким образом, метод POST включает в себя и метод GET. Технология CGI

    В предыдущей главе мы с вами разобрались, как создать HTML-форму, и как браузер отправляет введенные в нее данные на сервер. Но пока что непонятно, что будет сервер делать с этими данными.

    Сам по себе веб-сервер умеет просто отдавать запрошенную страницу, и ничего более того, и ему все переданные данные формы, в общем-то, совершенно безразличны. Для того, чтобы можно было обработать эти данные с помощью какой-либо программы и динамически сформировать ответ броузеру, и была изобретена технология CGI (Common Gateway Interface).

    Взглянем на этот URL: http://www.example.com/cgi-bin/form_handler.cgi. Первое предположение, которое можно сделать на его счет, обычно такое: сервер отдает содержимое файла form_handler.cgi из каталога cgi-bin. Однако, в случае с технологией CGI дело обстоит по-другому. Сервер запускает программу form_handler.cgi и передает ей данные формы. Программа же формирует текст, который передается браузеру в качестве ответа на запрос.

    Программу form_handler.cgi можно написать на любом языке программирования, главное - соблюдать в программе стандарт CGI. Можно использовать, например, популярный скриптовый язык Perl. А можно написать все и на Си. Или на shell-скриптах... Но мы, для примера, напишем эту программу на С. Но сначала разберемся, как происходит обмен данными между веб-сервером и CGI-программой.

    Перед запуском CGI-программы, сервер устанавливает переменные окружения (вам они наверняка знакомы по команде PATH). В каждый мало-мальски серьезном языке программирования есть средства для чтения переменных окружения. Стандарт CGI определяет весьма значительный набор переменных, которые должны быть определены перед запуском CGI-программы. Рассмотрим сейчас только три из них:

    • REQUEST_METHOD - метод передачи данных - GET или POST (есть и другие, но пока мы их не рассматриваем)
    • QUERY_STRING - содержит часть URL после вопросительного знака, или, другими словами, данные GET-формы.
    • CONTENT_LENGTH - длина тела запроса (данные POST-формы).

    Сервер запускает CGI-программу. Тело запроса передается программе в виде стандартного ввода (stdin) - будто бы эти данные были введены с клавиатуры.

    Программа выдает ответ броузера на стандартный вывод (stdout) - "на экран". Этот вывод перехватывается веб-сервером и передается браузеру.

    1 : #include 2 : #include 3 : 4 : int main(void ) 5 : { 6 : // Читаем переменные среды, установленные веб-сервером 7 : char *query_string = getenv("QUERY_STRING" ) ; 8 : char *request_method = getenv("REQUEST_METHOD" ) ; 9 : 10 : char *post_data; // Буфер для данных POST-запроса 11 : int post_length = 0 ; // Длина тела запроса 12 : 13 : if (strcmp(request_method, "POST" ) == 0 ) { // Если получен POST-запрос, 14 : post_length = atoi(getenv("CONTENT_LENGTH" ) ) ; // сначала читаем из 15 : // переменной среды его длину, 16 : if (post_length) { // если она не нулевая, 17 : post_data = (char *) malloc(post_length+1 ) ; // выделяем память для буфера, 18 : fread(post_data, post_length, 1 , stdin) ; // читаем со стандартного ввода тело запроса, 19 : post_data[ post_length] = 0 ; // завершаем строку нулевым байтом. 20 : } 21 : } 22 : 23 : // Выводим заголовок ответа... 24 : printf ("Content-type: text/html\r \n \r \n " ) ; 25 : 26 : // и его тело: 27 : printf ("Здравствуйте!\r \n " ) ; 28 : 29 : if (strlen(query_string) ) { 30 : printf ("

    Параметры GET-формы: %s\r \n " , query_string) ; 31 : } 32 : 33 : if (post_length) { 34 : printf ("

    Параметры POST-формы: %s (длина тела запроса: %d)\r \n " , post_data, post_length) ; 35 : free(post_data) ; // не забываем освободить выделенную в строке 17 память 36 : } 37 : 38 : return 0 ; 39 : }

    Это простейшая CGI-программа на Си, выводящая содержимое полученных от веб-сервера параметров форм. Браузер в результате получит примерно следующий код (если "засабмитить" на эту программу POST-форму из последнего примера):

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

    Параметры POST-формы: name=Vasya&okbutton=OK (длина тела запроса: 22 )

    Что при этом отобразится на экране пользователя, думаю, понятно без комментариев. :)

    Как видите, даже простейшая программа вывода параметров не так-то проста. Более того, по стандарту HTTP почти все не алфавитно-цифровые символы (в т.ч. и русские буквы) передаются в так называемом UrlEncoded-виде (%XX, где XX - шестнадцатеричный код символа), и, если добавить в приведенную Си-программу код расшифровки UrlEncode, она уже не поместится на экран. А это - всего лишь базовые операции. А как вырастет программа на Си, если необходимо работать с базой данных?

    Впрочем, написание CGI-программ на Си - довольно редкое извращение. :) Чаще всего это делают на Perl - языке, разработанном специально для обработки текстовых данных, а наличие модуля CGI делает написание CGI-скриптов намного более простой задачей. Здесь я не буду вас знакомить с Perl, отмечу лишь, что проблем остается достаточно: все же Perl не предназначен для Web, это язык универсальный. Да и сама технология CGI несовершенна: при каждом обращении происходит запуск программы (в случае с Perl - интерпретатор языка), а эта операция довольно ресурсоемкая: для домашней странички Васи Пупкина производительности, конечно, достаточно, но серьезный портал с десятками и сотнями тысяч хитов в сутки потребует уже огромных аппаратных мощностей.

    А теперь взглянем на веб-сервер Apache. По своей природе он модульный, и позволяет подключать расширения добавлением одной строки в конфигурационный файл. (Ну, хорошо, хорошо, двух строк. :)). Было бы прекрасно, если бы существовал скриптовый язык, заточенный именно под Web, да еще и при желании подключаемый модулем к Апачу, не так ли? Ну, вы уже поняли, к чему я клоню:) - это и есть PHP.

    PHP: Препроцессор Гипертекста

    В 1994-м году, один программист, по имени Rasmus Lerdorf, намучавшись с классическим перловым модулем CGI, решил написать несколько собственных Perl-скриптов, дабы было попроще создавать собственную домашнюю страницу, и назвал все это дело Personal Home Page (PHP). Через некоторое время ему понадобилось обрабатывать формы, ну и для увеличения производительности все было переписано на C - так появился Personal Home Page/Forms Interpreter (PHP/FI) 2.0. Труды свои Расмус, следуя принципам Open Source, выложил на всеобщее обозрение, и, в принципе, на некоторм количестве сайтов PHP/FI вполне успешно использовался, хотя был довольно примитивен.

    В 1997-м на PHP/FI - в поисках инструмента для удобного Веб-скриптинга - наткнулись два других программера - Andi Gutsman и Zeev Suraski. Сама идея им понравилась, но функциональность и скорость работы PHP/FI оставляли желать лучшего, и Andi и Zeev решились переписать PHP с нуля. Язык получился универсальный и мощный, и вскоре привлек внимание множества веб-разработчиков: к концу 1998 года PHP3 использовался на ~10% веб-серверов. Скромное название "Personal Home Page" уже не очень-то соответствовало реальности, и название было изменено на - в лучших Unix-традициях - рекурсивное: PHP: Hypertext Preprocessor.

    Такая популярность PHP побудила Andi и Zeev на повторное переписание кода, прежде всего - с целью еще большего увеличения производительности. "Движок" PHP 4, названный Zend Engine, разрабатывался усилиями уже сформировавшегося и с тех пор непрерывно расрастающегося PHP community, и в 2000-м году вышла 4-я версия PHP, ставшая менее чем через полгода стандартом для Веб-разработки под Unix (и не только): каждый уважающий себя хостер предоставлял поддержку PHP. Летом 2004-го года команда разработчиков PHP представила 5-ю версию, основанного на новом Zend Engine 2, со "взрослой" поддержкой ООП, сейчас активно разрабатывается PHP6...

    Впрочем, хватит лирики. Давайте посмотрим на простой PHP-скрипт. Сначала немного изменим HTML-форму из предыдущего раздела:

    Введите Ваше имя:

    А теперь - form_handler.php:

    В отличие от Си или Perl, php-скрипт представляет собой обычную, в общем-то, HTML-страницу: "просто так" написанные тэги передаются "как есть", будто бы это обычный html-ник. Сам скрипт заключается в специальные тэги , внутри которых мы используем для вывода текста оператор echo. Таких блоков может быть сколько угодно, все, что между ними, интерпретируется как обычный html.

    Переменные GET-запроса попадают в массив $_GET, переменные POST-запроса - в массив $_POST, серверные переменные (типа IP-адреса, имени скрипта и т.д.) - в $_SERVER, оператор "точка" (.) - объединение строк... Причем все служебные операции (чтение stdin и переменных среды, Url-декодирование) уже произвел сам PHP. Удобно, не так ли?

    Введите Ваше имя:

    Мы убрали из тэга form атрибут action - это значит, что форма отправляется "сама на себя", т.е. на текущий URL. Это иногда называют "postback form". В строке 4 с помощью оператора if проверяется, использовался ли для загрузки документа метод POST (аналог строки 13 примера на Си), и - если это так - в следующей строке выводится приветствие.