Файл: Высшего образованияказанский (приволжский) федеральный университет.pdf

12
Основное отличие скриптов, написанных на этом языке, от скриптов,
написанных, например, на C++ или Python – это то, что вместо программы,
которая создает HTML-код, формируется программный код с несколькими внедренными командами PHP. Для использования кода PHP на Web-страницах его выделяют специальными тегами, которые располагаются в начале и в конце кода, чтобы процессор PHP мог определить границы участка HTML-кода,
который содержит PHP [2, c. 304].
PHP является многофункциональным языком, который содержит: функции работы с файловой системой, функции обработки строк и массивов, функции работы с датой и временем, функции работы с протоколом HTTP и т.д.
Ключевой особенностью данного языка является его отличное взаимодействие со всеми современными Web-технологиями и возможность поддержания большого количество Web-протоколов, например, протокол FTP, протокол POP,
протокол SNMP, протокол прикладного уровня для доступа к электронной почте
IMAP и т.д. Язык PHP идеально подходит для работы с базами данных. Большая часть нынешних СУБД имеет поддержку PHP.
Программа, написанная на PHP, может состоять из 10000 строк кода, а может и из одной строки. Все заключается в том, какая перед нами поставлена задача, которую необходимо решить с помощью скрипта. Для того, чтобы выполнить PHP код на HTML-странице необходимо начать со специального символа (тега), который задаст последовательность действий () и продолжить выполнение этих действий до завершающего тега (?>).
Для разработчиков PHP предоставляет гибкие и эффективные средства обеспечения информационной безопасности, которые обычно разделяют на две группы: средства уровня приложения и средства системного уровня. Механизмы безопасности, написанные на PHP, находятся под контролем администраторов, и при правильной настройке способны обеспечить максимальную безопасность.
Также, на языке PHP реализован так называемый безопасный режим (safe mode),

13
благодаря которому можно ограничить применение кода конкретным категориям пользователей. Например, при помощи безопасного режима у программистов есть возможность ограничивать максимальное время,
необходимое для выполнения какого-либо скрипта, а так же объем используемой памяти, так как неограниченный расход памяти негативно сказывается на производительности Web-сервера. Помимо этого, программист может установить ограничения на количество используемых каталогов,
благодаря которым пользователь просматривает информацию и выполняет скрипты PHP, а так же просматривает конфиденциальную информацию на Web- сервере при помощи PHP скриптов.
В составе функций языка PHP есть ряд надежных шифровальных механизмов. Также код, написанный на языке PHP, совместим со многими скриптами независимых компаний. Это дает возможность легко интегрировать его с защищенными технологиями электронной коммерции.
Очередное достоинство языка PHP заключается в том, что исходный код скрипта PHP невозможно просматривать в Web-браузерах, в силу того, что он компилируется непосредственно перед отправкой по запросу пользователя. Это предотвращает возможность хищения оригинального кода злоумышленниками.
По отношению к требованиям программиста язык PHP имеет достаточную гибкость и эффективность настройки.
В силу того, что PHP код не содержит в себе кода, который был бы ориентирован на конкретный Web-сервер, он отлично взаимодействует с современными серверами, такими как: сервер Netscape Enterprise Server, сервер
Microsoft IIS, сервер Apache, сервер Stronghold и другие.
2.3. Язык JavaScript
JavaScript – язык программирования, который нужен для управления сценариями просмотра Web-страниц. Одна из особенностей данного языка

14
заключается в том, что он дает возможность изменять свойства среды отображения на Web-сайте без перезагрузки самой Web-страницы сайта.
Например, благодаря языку JavaScript можно поменять фон Web-страницы или форму кнопки, сделать онлайн слайдер или вывести окно уведомлений.
JavaScript является объектно-ориентированным языком программирования, но учитывая, что в нем используется прототипирование
(быстрая реализация базовой функциональности для анализа работы системы),
возникает ряд особенностей, связанных с непосредственным выполнением кода языка в отличие от традиционных языков объектно-ориентированного программирования. Также, в языке JavaScript есть перечень свойств, которые присущи другим функциональным языкам, а именно: объекты как списки,
анонимные функции, функции как объекты первого класса [3, c. 848].
Основными отличиями языка JavaScript от языка C являются:

использование объектов со способностью самоанализа;

функции как объекты первого класса;

автоматическое приведение типов;

анонимные функции.
Из недостатков языка JavaScript правильно будет выделить следующие:

нет возможности регулировки областей;

отсутствие какого-либо интерфейса;

использование стандартных интерфейсов доступа к Web-серверам и базам данных.
Для того чтобы определить важность использования и значимость языка
JavaScript, выделим некоторые области, в которых применяется данный язык программирования:

Разработка веб-приложений. JavaScript позволяет устанавливать счетчики, передавать данные между формами или даже встроить игру на сайт;

15

«Активное участие» в AJAX. Эта технология позволила значительно ускорить работу приложений, осуществляя обмен данными с сервером в
«фоновом» режиме;

Операционные системы;

Мобильные приложения;

Сфера обучения. Любая программистская специальность в университете включает в себя изучение JavaScript в том или ином объеме.
2.4. Каскадные таблицы стилей
Каскадные таблицы стилей или CSS – это формальный язык описания внешнего вида Web-страницы, написанной при помощи языка разметки. Без CSS
невозможно написание любого Web-Сайта, ведь он задает стили всем видимым элементам страницы. С помощью CSS устанавливают шрифт, размер и цвет текста, расположение блоков и их форму, фоновое изображение сайта и адаптацию сайта ко всем возможным расширениям девайсов [5, c. 272].
Основной задачей, решаемой в ходе использования CSS, является снижение сложности структуры содержимого путем разделения и обозначения элементов.
Помимо этого, с помощью CSS можно представить одну и ту же Web-страницу в различных стилях отображения, например, экранное представление, чтение голосом и т.д. Сам CSS состоит из ряда правил, каждое из которых включает в себя один или несколько переключателей, которые соединены запятыми, и блок значений, взятый в фигурные скобки ({}) и состоящий из свойств и значений [4,
c. 414].
Во время отображения Web-страницы, её элементы могут быть привязаны к различным стилям, которые имеют определенную иерархию:

авторские стили (стили, предоставляемые разработчиками страницы);

пользовательские стили;

стили браузера.

16
Но эту иерархию можно перебить, добавив к любому свойству стиля слово
“!important” в конце перед разделяющим знаком (;).
Помимо этого, каскадные таблицы стилей позволяют работать со шрифтовым оформлением Web-страницы на более высоком уровне, в отличие от стандартного HTML-кода, без какого либо утяжеления страниц графикой.
2.5. Обзор и сравнение сред разработки Web-приложения
Рассматривая процесс разработки Web-приложения как процесс написания кода в текстовом документе, под средой разработки будем понимать наиболее удобный и функциональный текстовый редактор. В силу того, что в обычном
«блокноте» от Windows хоть и можно написать код сайта, это будет крайне неудобно и долго, поскольку в «блокноте» нет специальных плагинов,
упрощающих работу с кодом. Поэтому рассмотрим более модернизированные аналоги, такие как SublimeText, PHPStorm, Atom. Каждый из них обладает минимальными необходимыми свойствами, которые значительно упрощают работу с текстом и сильно увеличивают скорость написания кода [15, c. 370].
Составим список некоторых важных свойств:

приятный, понятный и минималистичный интерфейс;

наличие мини-карты кода для удобного перемещения;

возможность работы с кодом в 2 и более окна;

возможность структурировать код с помощью комбинации клавиш;

очевидные дополнения кода и завершающих тегов;

огромное количество плагинов под любые нужды.
Теперь для наглядности сравним работу с кодом в приложении «Блокнот»
(рисунок 2.1) и в приложении «Sublime Text 3» (рисунок 2.2) - разница колоссальна, преимущества очевидны.
Теперь разберемся подробнее в отличиях уже специализированных вышеперечисленных текстовых редакторов между собой. PhpStorm является

17
интеллектуальным текстовым редактор для PHP, HTML и JavaScript с возможностью анализа кода на лету и способностью исправления и предотвращени ошибок в коде.
Рисунок 2.1. Демонстрация отображения кода в программе «Блокнот»
Рисунок 2.2. Отображение кода в программе «Sublime Text 3»
Теперь разберемся подробнее в отличиях уже специализированных вышеперечисленных текстовых редакторов между собой. PhpStorm является интеллектуальным текстовым редактором (рисунок 2.3) для PHP, HTML и
JavaScript с возможностью анализа кода на лету и способностью исправления и предотвращении ошибок в коде.

18
Рисунок 2.3. Внешний вид редактора PhpStorm.
Данный редактор нам не подходит, поскольку чаще всего он используется для разработки объемных Web-проектов, в связи с этим имеет огромный внутренний функционал, который создает большую нагрузку на компьютер. В
случае слабых характеристик компьютера это может вызвать лаги или попросту долгую загрузку. Сравним оставшиеся два текстовых редактора «Atom»
(рисунок 2.4) и «Sublime Text 3» (рисунок 2.2).
Рисунок 2.4. Внешний вид редактора Atom.

19
Основными отличиями между ними являются:

у Sublime Text 3 больше производительность;

настройки более удобны в Atom;

поддержка синтаксиса в Atom хуже;

в Sublime Text 3 присутствует больше популярных плагинов для работы с кодом.
Из всего вышеперечисленного делаем вывод, что целесообразнее использовать Sublime Text 3.
2.6. Обзор и сравнение локальных серверов
Локальный сервер – специальная программа, благодаря которой Web- разработчики имеют возможность разрабатывать Web-сайты на локальном
(домашнем) компьютере, без необходимости выхода в сеть Интернет.
Необходимость в локальном сервере возникает при создании динамических
Web-сайтов или интерактивных Web-приложений, которые используют язык программирования PHP. Это связано с тем, что Web-браузеры понимают только
HTML, CSS и JS, но не PHP. В таком случае у нас есть два выхода, либо купить виртуальный Web-сервер и проводить все операции на нем, что неудобно и дорого, либо установить локальный Web-сервер, который позволит создать имитацию виртуального на персональном компьютере пользователя [6, c. 416].
В настоящее время существует большое количество программ, с помощью которых на компьютере возможно «развернуть» настоящий сервер, мы рассмотрим два самых популярных из них: «Open Server» (рисунок 2.5) и
«Denwer» (рисунок 2.6).

20
Рисунок 2.5. Локальный сервер «Open Server».
Рисунок 2.6. Локальный сервер «Denwer».
Преимущества «Open Server»:

приятный и удобный интерфейс;

не требует установки;

надежность и уверенность в работе;

интуитивное управление доменами;

Понятное руководство пользователя.
Преимущества «Denwer»:

простота – считается самым популярным локальным сервером у
«новичков»;

наличие портативной версии;

небольшой объем данных – дистрибутив сборки весит 8,2 Mb.
Из минусов обоих серверов можно отметить то, что они могут быть установлены только на операционную систему Windows. Но «Denwer», в отличие от «OpenServer» имеет минимальную функциональность и небольшой набор инструментов разработки. Исходя из всех вышеперечисленных факторов,
делаем выбор в пользу «OpenServer».

21
2.7. Применяемые Web-технологии
С каждым годом требования интернет пользователей к Web-ресурсам растут, обычных статичных или динамичных сайтов становится мало, и на первый план выходят сложные Web-приложения с большим функционалом,
которые удовлетворяют множество запросов потребителя. Так как целью нашей дипломной работы является создание именно Web-приложения, то простым
HTML, CSS и JS кодом нам не обойтись. Нам нужен такой инструмент, который позволит производить множество операций без перезагрузки страницы и создать программный код, который будет строго структурирован и его будет легко поддерживать. К счастью, на данный момент такие инструменты уже изобрели,
и самыми популярными из них вне всяких сомнений считается «Angular.js»
(рисунок 2.7) и «React.js» (рисунок 2.8) [7, c. 275].
Рисунок 2.7. Фреймворк Angular.js
Рисунок 2.8. Фреймфорк React.js
Рассмотрим, какой из этих фреймворков больше всего будет удовлетворять наши потребности. Angular.js на данный момент считается самым популярным фреймворком, разработка которого напрямую поддерживается компанией Google. React.js в свою же очередь хорош с точки зрения

22
производительности, в нем есть Virtual DOM. Данное свойство может обновлять
HTML-код страницы, сравнивая различия между предыдущей и текущей версией кода. Учитывая то, что нам данное свойство не требуется, то выберем фреймворк Angular.js, поскольку он совместил в себе отличный набор комбинаций низкого порога вхождения и огромного набора функций. Чтобы начать использовать Angular.js в своей работе потребуется не больше часа. На данный момент ещё нет ни одной задачи во фронтенд разработке, которую не удалось бы решить с помощью данного фреймворка. Так что простота и надежность однозначно побеждает.

23
3. Проектирование Web-приложения «MapEditor»
3.1. Структура Web-приложения
Разрабатываемое Web-приложение выступает в роли веб-аналога уже существующего приложения MapEditor GS. Структура Web-приложения представлена на рисунке 3.1.
Рисунок 3.1. Структура Web-приложения.
3.2. Клиентская часть Web-приложения
Веб-приложение состоит из клиентской и серверной частей, тем самым реализуя технологию «клиент-сервер». Клиентская часть реализует пользовательский интерфейс, формирует запросы к серверу и обрабатывает ответы от него. Серверная часть получает запрос от клиента, выполняет