Файл: Разработка web-страницы туристического предприятия (Статически и динамические сайты).pdf

Важным характерным отличием динамических веб-сайтов от статических является существование исполняемой части, которую выполняет сервер, на котором находится веб-приложение.

2 Разработка веб-страницы туристического предприятия

2.1 Программное обеспечения для разработки веб-страницы

Основным программным средство, которое использовалось при создании веб-страницы, была среда разработки PHPStorm.

PhpStorm 10 – это интегрированная среда разработки на PHP с интеллектуальным редактором, которая глубоко понимает код, поддерживает PHP 7.0, 5.6, 5.5, 5.4 и 5.3 для современных и классических проектов, обеспечивает лучшее в индустрии автодополнение кода, рефакторинги, предотвращение ошибок на лету и поддерживает смешивание языков.

Сотни инспекций заботятся о верификации кода, анализируя проект целиком во время разработки. Поддержка PHPDoc, code (re)arranger, форматтера кода с конфигурацией стиля кода и другие возможности помогают разработчикам писать опрятный и легко поддерживаемый код.

Поддерживаются передовые технологии веб-разработки, включая HTML5, CSS, Sass, SCSS, Less, Stylus, Compass, CoffeeScript, TypeScript, ECMAScript Harmony, шаблоны Jade, Zen Coding, Emmet, и, конечно же, JavaScript.

PhpStorm включает в себя всю функциональность WebStorm (HTML/CSS редактор, JavaScript редактор) и добавляет полнофункциональную поддержку PHP и баз данных / SQL.

Основные функции PhpStorm 10:

- интеллектуальный редактор PHP кода с подсветкой синтаксиса, автодополнением кода, расширенными настройками форматирования кода, предотвращением ошибок на лету;

- поддерживает PHP 7.0, 5.6, 5.5, 5.4 и 5.3, генераторы, сопрограммы и все синтаксические улучшения;

- PHP рефакторинги, code (re)arranger, детектор дублируемого кода;

- поддержка Vagrant, Composer, встроенный REST клиент, Command Line Tools, SSH консоль;

- поддержка фреймворков (MVC view для Symfony2, Yii) и специализированные плагины для ведущих PHP фреймворков (Symfony, Magento, Drupal, Yii, CakePHP и многие другие);

- визуальный отладчик для PHP приложений, валидация конфигурации отладчика, PHPUnit с покрытием кода (поддержка PHPUnit 5), а также интеграция с профилировщиком;

- HTML, CSS, JavaScript редактор; отладка и модульное тестирование для JS; поддержка HTML5, CSS, Sass, SCSS, Less, Stylus, Compass, CoffeeScript, TypeScript, ECMAScript Harmony, Emmet и других передовых технологий веб-разработки;

---

- полный набор инструментов для фронтенд-разработки;

- поддержка стилей кода, встроенные стили PSR1/PSR2, Symfony2, Zend, Drupal и другие;

- интеграция с системами управления версиями, включая унифицированный интерфейс;

- удалённое развёртывание приложений и автоматическая синхронизация с использованием FTP, SFTP, FTPS и др.;

- Live Edit: изменения в коде можно мгновенно просмотреть в браузере без перезагрузки страницы;

- PHP UML;

- интеграция с баг-трекерами;

- инструменты работы с базами данных, SQL редактор;

- кроссплатформенность (Windows, Mac OS X, Linux).

Нововведения, улучшения PhpStorm 10:

PhpStorm 10 обеспечивает расширенную поддержку PHP 7, включая инспекции совместимости.

Возможность работы с:

- безымянными классами;

- декларациями типов возвращаемого значения;

- операторами объединения со значением «ноль»;

- декларациями группового использования;

- лексическими анализаторами, учитывающими контекст.

А также много других возможностей, раскрывающих все возможности PHP 7.

Автоматическое завершение кода было значительно переработано:

- рекомендации по наименованию: имя значения по имени массива в конструкции foreach;

- завершение имени и сигнатуры метода для родительского переопределения и внедрения интерфейса;

- завершение свойств и констант для родительского переопределения;

- завершение языков при постоянных добавлениях после @lang;

- улучшенное завершение конструкций языка (exit, isset и т.д.), приведения типов данных и т.д.

При реорганизации кода в PhpStorm 10 можно локально переименовать переменные, параметры, классы, методы, константы или метки команд перехода прямо в редакторе.

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

Другие улучшения PHP:

- дублирование поиска по выделению метода;

- интеллектуальное копирование/добавление в последовательности;

- возможность конфигурации значений date() или time() в шаблонах Live Templates в качестве временных отметок Unix.

Интерактивная консоль отладки для PHP (REPL) - эта новейшая возможность PhpStorm 10 позволяет преобразовывать переменные, вызывать функции PHP и определять дополнительные функции – всё в процессе работы.

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

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

---

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

PhpStorm 10 поддерживает все новые функции и улучшения, выпущенные недавно в PHPUnit 5, широко используемой тестовой платформе для PHP. Среди возможностей также есть:

- новый принцип действия аннотации @depends;

- тесты, помеченные @small, могут быть также помечены в качестве рискованных, если они осуществляют ввод-вывод;

- добавленные подтверждения assertFinite(), assertInfinite() и assertNan().

С помощью нового плагина Docker для PhpStorm можно добавить в имеющиеся проекты поддержку Docker, просматривать логи и управлять хранилищами Docker прямо в PhpStorm.

Также есть возможность отладки веб-приложений в Xdebug или Zend Debugger.

В число других улучшений входит удобная функция сворачивания комментариев и язык шаблонов Twig, который автоматически настраивается под различные расширения файлов.

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

Поддержка Angular 2 в PhpStorm включает в себя автоматическое завершение кода и навигацию по директивам и связкам и распознает новые атрибуты событий для TypeScript или ECMAScript 2015.

PhpStorm обеспечивает интеграцию с TSLint, анализатором для кода TypeScript. Позволяет увидеть предупреждения и ошибки прямо в редакторе по мере ввода кода.

Все функции и улучшения WebStorm доступны в PhpStorm, встроенные по умолчанию или доступные в качестве бесплатных плагинов в репозитории. Другие заслуживающие упоминания функции включают в себя улучшенную поддержку ECMAScript 2015, TypeScript 1.5 и 1.6, обновлённую поддержку React, форматирование связанных вызовов метода, новые инспекции Node.js, графики в CPU-профайлере Node.js, возможность запуска отдельных тестирований Mocha и т.д.

PhpStorm 10 помогает кодировать специальные символы в HTML-коде, заменяя их HTML-элементами, начинающимися с &. Также можно выбрать символы или блок кода и применить кодировку специальных символов XML/HTML.

Чтобы сделать команду Find in Path более эффективной, разработчики добавили вкладку предпросмотра, которая отображает первые 100 результатов в режиме реального времени. Теперь для того, чтобы найти всё необходимое, не нужно выходить из диалога.

Конфигурация стиля кода стала ещё проще. Нужно выбрать фрагмент кода, нажать Alt+Enter и выбрать действие настройки стиля. Можно просмотреть и настроить стиль кода, который может быть применён к данной части кода, в доступном режиме предварительного просмотра.

---

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

Обновлённые инструменты базы данных:

- исходная самодиагностика для MySQL, PostgreSQL, MS SQL;

- настраиваемая форма поведения действия Execute;

- новое окно преобразования таблиц.

Другие улучшения:

- обновлённые регулярные выражения в действии поиска с заменой;

- настройки для пользователей с нарушением цветового зрения;

- совместимость с SVN 1.9.

Поддерживаемые операционные системы:

- Windows 10;

- Windows 8;

- Windows 7;

- Windows Vista;

- Windows 2003;

- Windows XP (вкл. 64-бит);

- Mac OS X 10.5 и выше;

- Linux.

Требования к компьютеру:

- объём оперативной памяти: 1 Гб (минимум);

- объём оперативной памяти: 2 Гб (рекомендуется);

- минимальное разрешение экрана: 1024х768.

Сайт программы - http://www.jetbrains.com/phpstorm (рис. 5).

Рисунок 5 - Рабочее окно программы PhpStorm

2.2 Язык гипертекстовой разметки HTML

Веб-страница создавалась с помощью языка гипертекстовой разметки HTML. Язык разметки гипертекста (HyperText Markup Language - HTML) можно использовать для представления:

- гипертекстовых новостей, почты, сопровождающей информации и сопутствующей гиперсреды;

- меню с опциями;

- результатов запросов к базам данных;

- простых структурированных документов со встроенной графикой;

- гипертекстовых обзоров имеющейся информации.

Данные в формате HTML похожи на текстовой файл, за исключением того, что некоторые из символов интерпретируются как разметка. Разметка придает документу некую структуру [16].

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

<имя_тега [возможные параметры]>

Чтобы указать браузеру место окончания действия того или иного тега, используется закрывающий тег. Это тег, имеющий то же самое имя с прямым слешем ‘/’ перед ним/

<html>

HTML-документ

</html>

Следует отметить, что не каждый открывающий тег должен иметь соответствующий закрывающий. Имеется набор тегов, действие которых начинается и заканчивается одним открывающим тегом:

<img src="image.gif"> - тег для вывода изображения image.gif в окно браузера;

---

<input type="text" value=""> - тег для ввода значений в окне браузера.

Из приведенных выше примеров записи тегов можно заметить, что существуют теги, содержащие в себе информацию (а также другие теги), например, html и body, которые в дальнейшем будем называть тегами- контейнерами. Соответственно информацию, содержащуюся в них - содержимым тега-контейнера [7].

Как и в любом языке программирования, язык HTML имеет теги для создания комментариев внутри документа, т.е. текст, который имеется в документе, но не выводится браузером на экран. Для создания комментариев используется следующая пара тегов:

<!-- Это комментарий -->

Имеется ряд тегов, для которых завершающие теги опускаются большинством авторов документов. Например, тег <p> (начало абзаца), как правило, не имеет в документе завершающего тега </p>. Его завершение определяется браузером по «ходу» документа, например, если встретится очередной открывающий тег <p>.

Существуют общие правила интерпретации тегов браузерами. В отличие от языков программирования, в которых ошибочные операторы приводят к соответствующим ошибкам, в HTML не принято реагировать на неверную запись тегов. Неверно записанный тег или его параметр должен просто игнорироваться браузером. Это общее правило для всех браузеров, под действие которых попадают не только ошибочные теги, но и теги, не распознанные данной версией браузера [6].

При создании HTML-документов рекомендуется соблюдать следующую структуру:

html>

<head>

<!-- Раздел заголовка -->

</head>

<body>

<!-- Тело документа -->

</body>

</html>

Здесь <html> - это тег, обозначающий начало HTML-документа. Браузер, встретивший данный тег, будет «знать», что представленную ниже информацию следует интерпретировать как HTML-страницу. Тег <head> означает раздел заголовка, который обычно включает:

1. Заголовок страницы

<title>Государственный центр оказания услуг</title>

1. Кодировку, в которой представлен HTML-документ

<meta charset="utf-8">

1. Краткое описание содержания документа

<meta name="description" content=" ">

1. Список ключевых слов документа

<meta name="keywords" content="">

5. Подключаемые внешние javascript файлы (скрипты)

<script src="js/bootstrap.min.js"></script>

6. Внешние таблицы стилей (css) для форматирования документа

<link rel="stylesheet" href="css/style.css">

Раздел тега <head> может содержать и другие конструкции языка HTML. В конечном итоге разработчик сам решает, что должно быть записано в данном разделе. Он может быть и пустым, т.е. не содержать ничего. Тогда браузер будет руководствоваться своими настройками и алгоритмами при отображении такого документа. Наконец, раздел <head> может совсем отсутствовать и это будет аналогично пустому разделу. Однако при разработке HTML-страницы крайне не рекомендуется пропускать данный раздел и его «минимальная конфигурация» должна иметь следующий вид [13] (рис. 6):

---