Разработка сайтов с помощью IDE Eclipse

Введение

Любой начинающий веб-разработчик ставит перед собой множество вопросов: с чего начинать? Какую литературу почитать? В какой программе писать код? На чем тестировать результат творческого труда? И многие многие другие.

Будем считать, что теоретические аспекты Вами уже рассмотрены и стоит вопрос: в чем писать код? Никаких ограничений здесь нет. Html разметку Вы можете написать хоть в блокноте, а получившийся файл открыть браузером. Однако существуют более удобные инструменты - так называемые IDE (Integrated development environmen) – Интегрированная среда разработки. Примером такой среды является Eclipse IDE. О ней и пойдет речь в этой статье.

Для начала разберемся, что же это за среда и почему разрабатывать предпочтительнее именно в ней? Дело в том, что IDE представляет собой комплексное решение, включающее продвинутый текстовый редактор с подсветкой синтаксиса, интерпретатор или компилятор, отладчик и многие другие функции. Заинтересовало? Тогда перейдем к знакомству с IDE Eclipse.

Для начала её необходимо скачать бесплатно с официального сайта Если Вы планируете разрабатывать сайты на языке php, то мы рекомендуем использовать готовую и оптимизированную для этих целей сборку Eclipse for PHP Developers. (пользователи GNU/Linux могут найти программу в своих репозиториях). Eclipse является кроссплатформенной и для работы Вам необходима лишь java-машина. (Одинаково отлично работает на Sun'овской JRE и OpenJDK, разрабатываемой сообществом)

Интерфейс

Итак, запустив Eclipse и перейдя с экрана приветствия в рабочую область, первым что необходимо сделать – это создать проект. Выберите File → New → PHP Project, в появившемся диалоге укажите название проекта и нажмите «Finish».

Скриншот eclipse 1

Теперь у нас есть проект (будущий сайт) и мы можем наполнять его страничками. Сначала рассмотрим создание html файлов. Аналогично созданию проекта добавьте в него файл типа html. Перед Вами откроется окно редактора только что добавленного html-файла.
Обратите внимание на удобный интерфейс программы: окно разбито на несколько рабочих зон с вкладками. Каждый элемент управления можно перенести в любую зону и настроить как будет удобнее Вам.

Скриншот eclipse 2

Пройдемся по начальному интерфейсу:
PHP Explorer (на скриншоте слева) показывает дерево всех проектов/файлов для удобного поиска и навигации. По центру красуется редактор с подсветкой синтаксиса. Справа мы видим Outline – визуальное представление структуры html. Внизу вкладка с ошибками.

HTML верстка

Теперь перейдем к долгожданному написанию кода. По умолчанию при создании новой страницы html, eclipse сама создает валидную (т.е. отвечающую всем нормам W3C) html структуру. Самая первая приятная “фишка” которую мы встречаем во время написания странички будущего сайта – это автозаполнение и высплывающие подсказки. Достаточно начать писать тег или поставить курсор внутрь написанного тега и нажать ctrl + space как тутже eclipse сама допишет фразу или предложит список возможных значений (см. Скриншот)

Скриншот eclipse 3

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

Скриншот eclipse 4

Небольшой список полезных сочетаний клавиш (хоткеев):

ctrl+space – автозаполнение/подсказка
tab – при выделении блока кода – делает отступ для всего блока. Не требуется каждую строчку двигать вручную
shift+tab – обратный эффект – убирает отступ
ctrl+shift+/ - заключает выделенный блок текста в комментарии
ctrl+shift+\ - обратный эффект – убрать комментарии
alt + вверх/вниз – передвигает выделенные строки кода вверх/вниз. Теперь для того, чтобы переместить несколько строчек, Вам не потребуется их вырезать а потом вставлять.
ctrl+shift+f – автоматически форматирует Ваш код делая его более читабельным (выравнивает, добавляет отступы)

PHP разработка

Ну а теперь перейдем к программированию на языке php. Будем считать что азы разработки Вы уже знаете. Добавим к нашему проекту php-файл аналогично html страничке. Рассмотрим сходства и различия в уже знакомом нами функционале между написанием html и php страниц.

В php редакторе автозаполнение является более сильным инструментом, чем в html. Eclipse отслеживает объявленные нами переменные. По нажатию ctrl+space программа не только предложит Вам возможные переменные (если невозможно однозначно автозаполнить) с указанием места, где они объявлялись, но и предоставит список встроенных в язык переменных.

Скриншот eclipse 5

Если Вы начали набирать оператор или встроенную функцию, то программа помимо автозаполнения еще и даст описание этой функции. Но и на этом функционал не заканчивается. Eclipse отслеживает в добавок к объявленным переменным еще и введенные программистом функции или классы и методы (если вы придерживаетесь ООП). Обратите внимание на скриншот. В всплывающем списке вторая функция — это введенная нами чуть выше.

Скриншот eclipse 6

Пройдем дальше. Окно outline теперь указывает объекты, которые используются в этом файле: переменные, функции и т.д.
Встроенный интерпретатор, как и в случае с html, оповестит Вас об ошибках в синтаксисе, подчеркнув место ошибки.

Сочетания клавиш приведенные выше справедливы и для php, однако есть и

Специфичные для php хоткеи:

shift + F2 – откроет во встроенном браузере страницу http://php.net/manual с подробнейшим описанием функции и примерами.
F3 – если выделить переменную/функцию и нажать F3, то eclipse перенесет Вас на место объявления этого объекта. Очень удобно использовать в больших проектах, когда метод спрятан в неизвестном файле.
ctrl+O – быстрый показ Outline. Удобно использовать, если во время написания у Вас открыт редактор на весь экран программы

Скриншот eclipse 7

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

Разработчики NOX Technologies используют именно это IDE для написания сайтов.
Материалы подготовлены noxtech. При использовании этой статьи ссылка на noxtech.ru обязательна.
Если у Вас есть предложения или дополнения к данной статье, то Вы можеет отправить пожелания нам на почту support@noxtech.ru