Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5. 5-е изд. E-Book
Робин Никсон
Erhalten Sie Zugang zu diesem und mehr als 300000 Büchern ab EUR 5,99 monatlich.
- Herausgeber: Питер
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Russisch
Новое (5-е) издание признанного бестселлера, описывающее как клиентские, так и серверные аспекты веб-разработки. Эта книга поможет вам освоить динамическое веб-программирование с применением самых современных технологий. Книга наполнена ценными практическими советами, содержит подробный теоретический материал. Для закрепления материала автор рассказывает, как создать полнофункциональный сайт, работающий по принципу социальной сети Включая рассказ о React.js •Изучите важнейшие аспекты языка PHP и основы объектно-ориентированного программирования. •Познакомьтесь с базой данных MySQL. •Управляйте cookie-файлами и сеансами, обеспечивайте высокий уровень безопасности. •Пользуйтесь фундаментальными возможностями языка JavaScript. •Применяйте вызовы AJAX, чтобы значительно повысить динамику вашего сайта. •Изучите основы CSS для форматирования и оформления ваших страниц. •Освойте продвинутые возможности HTML5: геолокацию, обработку аудио и видео, отрисовку на холсте
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 907
Veröffentlichungsjahr: 2022
Das E-Book (TTS) können Sie hören im Abo „Legimi Premium” in Legimi-Apps auf:
Ähnliche
Научный редактор Н. Вильчинский
Переводчики Н. Вильчинский, С. Черников
Технический редактор Н. Гринчик
Литературный редактор Н. Гринчик
Художники Н. Гринчик, С. Заматевская , Г. Синякина (Маклакова)
Корректоры Н. Гринчик, Т. Радецкая
Верстка Г. Блинов
Робин Никсон
Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5. 5-е изд. . — СПб.: Питер, 2018.
ISBN 978-5-4461-0825-1
© ООО Издательство "Питер", 2018
Все права защищены. Никакая часть данной книги не может быть воспроизведена в какой бы то ни было форме без письменного разрешения владельцев авторских прав.
Оглавление
Предисловие
Сочетание PHP и MySQL — один из самых удобных подходов к динамическому веб-конструированию, основанному на использовании баз данных. Этот подход удерживает свои позиции, несмотря на вызовы, брошенные интегрированными средами разработки, такими как Ruby on Rails, освоение работы с которыми дается значительно труднее. Благодаря открытости исходных кодов (в отличие от конкурирующей технологии Microsoft .NET Framework) это технологическое сочетание можно использовать совершенно бесплатно, поэтому оно очень популярно у веб-разработчиков.
Любой нацеленный на результативность разработчик, использующий платформу UNIX/Linux или даже Windows/Apache, нуждается в серьезном изучении этих технологий. В сочетании с партнерскими технологиями JavaScript, jQuery, CSS и HTML5 можно создавать сайты калибра таких промышленных стандартов, как Facebook, Twitter и Gmail.
Для кого предназначена эта книга
Книга предназначена для тех, кто хочет изучить способы создания эффективных и динамичных сайтов. Сюда можно отнести веб-мастеров или специалистов по графическому дизайну, которым уже приходилось создавать статические сайты и у которых есть желание вывести свое мастерство на следующий уровень, а также студентов вузов и колледжей, недавних выпускников этих учебных заведений и просто самоучек.
Фактически любой человек, стремящийся изучить основные принципы, заложенные в основу адаптивного веб-дизайна, сможет получить весьма обстоятельные сведения об основных технологиях: PHP, MySQL, JavaScript, CSS и HTML5, а также изучить основы библиотек jQuery и jQuery Mobile.
Предположения, допущенные в книге
При написании данной книги автор предполагал, что читатель уже имеет элементарные понятия об HTML и способен как минимум скомпоновать простой статический сайт. Но при этом не обязательно наличие у читателя каких-либо знаний в области PHP, MySQL, JavaScript, CSS и HTML5, хотя, если такие знания имеются, изучение материала будет происходить значительно быстрее.
Структура издания
Главы книги расположены в определенном порядке. Сначала идет представление всех основных технологий, рассматриваемых в книге, а затем описывается процесс их установки на сервер, предназначенный для разработки веб-приложений, для того чтобы подготовить читателя к практической работе с примерами.
В первой части книги преподносятся основы языка программирования PHP, включая основы синтаксиса, массивов, функций и объектно-ориентированного программирования.
Затем, после усвоения основ PHP, можно переходить к введению в систему управления базами данных MySQL, рассмотрение которой начинается с изучения структуры базы данных MySQL и заканчивается составлением сложных запросов.
После этого рассказывается о том, как воспользоваться сочетанием PHP и MySQL, чтобы приступить к созданию собственных динамических веб-страниц путем интегрирования в это сочетание форм и других функциональных возможностей HTML. Затем приводятся подробности практических аспектов разработки на PHP и MySQL, включая описание различных полезных функций и способов работы с cookies и сессиями, а также способов поддержания высокого уровня безопасности.
В следующих нескольких главах излагаются основы JavaScript, начиная с простых функций и обработки событий и заканчивая доступом к объектной модели документа (DOM), проверкой введенных данных и обработкой ошибок в браузере. Этот учебник подойдет для тех, кто приступает к использованию популярной библиотеки jQuery для JavaScript.
После рассмотрения основных технологий описываются способы создания фоновых AJAX-вызовов и превращения сайтов в высокодинамичную среду.
После этого вам предстоит освоить еще две главы, в которых рассматривается, как использовать CSS для стилевого оформления и подбора формата ваших веб-страниц, перед тем будут раскрыты методы существенного снижения трудозатрат по разработке приложений с помощью библиотек jQuery, и дано описание интерактивных свойств, встроенных в HTML5 (геолокация, аудио, видео, холст).
Получив все эти сведения, вы сможете создать полноценный набор программ, в совокупности представляющий собой работоспособный сайт социальной сети.
По мере изложения материала дается большое количество указаний и советов по выработке хорошего стиля программирования, а также подсказок, которые помогут читателям обнаружить и устранить скрытые ошибки программирования. Кроме того, приводится много ссылок на сайты с дополнительными материалами, относящимися к рассматриваемым темам.
Дополнительная литература
Приступив к изучению разработки программных продуктов с помощью PHP, MySQL, JavaScript, CSS и HTML5, вы наверняка будете готовы к переводу своего мастерства на новый уровень, если воспользуетесь следующими книгами, которые можно найти на сайте издательства O’Reilly или на других сайтах, где продаются книги:
• Dynamic HTML: The Definitive Reference (http://oreil.ly/dynamic_html) Денни Гудмана (Danny Goodman);
• PHP in a Nutshell (http://oreil.ly/PHP_nutshell) Пола Хадсона (Paul Hudson);
• MySQL in a Nutshell (http://oreil.ly/MySQL_nutshell) Рассела Дайера (Russell Dyer);
• JavaScript: The Definitive Guide (http://oreil.ly/JS_Defi nitive) Дэвида Фланагана (David Flanagan);
• CSS: The Definitive Guide (http://oreil.ly/CSS_Defi nitive) Эрика А. Майера (Eric A. Mayer) и Эстель Вейль (Estelle Weyl);
• HTML5: The Missing Manual Мэтью Макдональда (Matthew MacDonald).
Условные обозначения
В книге применяются следующие условные обозначения.
Шрифт для названий
Используется для обозначения URL, адресов электронной почты, названий папок, а также сочетаний клавиш и названий элементов интерфейса.
Шрифт для команд
Используется для имен файлов, названий путей, имен переменных и команд. К примеру, путь будет выглядеть так: /Developer/Applications.
Шрифт для листингов
Применяется для отображения примеров исходного кода и содержимого файлов.
Шрифт для листингов полужирный
Обозначает текст, который выводится программой. Кроме того, данный шрифт иногда применяется для создания логического ударения, например, чтобы выделить важную строку кода в большом примере.
Шрифт для листингов зеленый
Обозначает код, который должен быть заменен подходящим значением (например, имя_пользователя).
Вам нужно обращать особое внимание на специальные врезки, выделенные с помощью следующих рисунков.
Это подсказка, пожелание, заметка общего типа. Содержит полезную прикладную информацию по рассматриваемой теме.
Это предостережение или указание, говорящее о том, что вам необходимо быть внимательными.
Использование примеров кода
Эта книга предназначена для оказания помощи в выполнении стоящих перед вами задач. Вы можете использовать код, приведенный в ней, в своих программах и документации. Вам не нужно обращаться к нам за разрешением, до тех пор пока вы не станете копировать значительную часть кода. Например, использование при написании программы нескольких фрагментов кода, взятых из данной книги, не требует специального разрешения. Но продажа и распространение компакт-диска с примерами из книг издательства O’Reilly — требует. Ответы на вопросы, в которых упоминаются материалы этой книги, и цитирование приведенных в ней примеров не требуют разрешения. Но включение существенного объема примеров кода, приводимых в данной книге, в документацию по вашему собственному продукту требует получения разрешения.
У этой книги имеется сопутствующий сайт, доступный по адресу http://lpmj.net, откуда вы можете скачать все приведенные в ней примеры одним ZIP-файлом.
Ссылки на источник приветствуются, но не обязательны. В такие ссылки обычно включаются название книги, имя ее автора, название издательства и номер ISBN. Например: «Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5», пятое издание, автор Робин Никсон (Robin Nixon). Copyright 2018 Robin Nixon, 978-5-4461-0825-1.
При любых сомнениях относительно превышения разрешенного объема использования примеров кода, приведенных в данной книге, можете свободно обращаться к нам по адресу [email protected].
Благодарности
Хочу еще раз поблагодарить своего редактора Энди Орама и всех, кто приложил немало усилий для выхода этой книги, в том числе Джона Рейда, Майкла Шпачека и Джона Крейга, за их всеобъемлющую техническую рецензию, Мелани Ярбро — за общее руководство выпуском книги, Рейчел Хед — за редактуру, Рейчел Монаган — за корректуру, Ребекку Демарест — за иллюстрации, Джуди Макконвилл — за создание указателя, Карен Монтгомери — за великолепную сахарную сумчатую летягу на обложке книги, Рэнди Камера — за последний вариант обложки книги, а также многочисленных помощников, отправивших сведения о замеченных ошибках и высказавших свои предложения относительно этого нового издания.
1. Введение в динамическое содержимое веб-страницы
Всемирная паутина — это непрерывно развивающаяся сеть, ушедшая далеко вперед от своей концепции ранних 1990-х, когда ее создание было обусловлено решением конкретных задач. Высокотехнологичные эксперименты в ЦЕРНе (Европейском центре физики высоких энергий, известном в наши дни в качестве обладателя Большого адронного коллайдера) выдавали невероятно большой объем данных, который был слишком велик для распространения среди участвующих в экспериментах ученых, разбросанных по всему миру.
К тому времени Интернет уже существовал и к нему было подключено несколько сотен тысяч компьютеров, поэтому Тим Бернерс-Ли (специалист ЦЕРНа) придумал способ навигации между ними с использованием среды гиперссылок — так называемого протокола передачи гиперссылок (Hyper Text Transfer Protocol, HTTP). Он также создал специальный язык разметки, названный языком гипертекстовой разметки (Hyper Text Markup Language, HTML). Для того чтобы собрать все это воедино, он создал первые браузер и веб-сервер.
Теперь эти средства воспринимаются нами как должное, но в то время концепция их применения носила революционный характер. До этого основной объем соединений приходился на пользователей домашних модемов, дозванивавшихся и подключавшихся к электронным доскам объявлений, которые базировались на отдельном компьютере и позволяли общаться и обмениваться данными только с другими пользователями этой службы. Следовательно, для эффективного электронного общения с коллегами и друзьями нужно было становиться участником многих электронных досок объявлений.
Но Бернерс-Ли изменил все это одним махом, и к середине 1990-х годов уже существовали три основных конкурирующих друг с другом графических браузера, пользовавшихся вниманием 5 млн посетителей. Однако вскоре стало очевидно, что кое-что было упущено. Конечно, текстовые и графические страницы, имеющие гиперссылки для перехода на другие страницы, были блестящей концепцией, но результаты не отражали текущий потенциал компьютеров и Интернета по удовлетворению насущных потребностей пользователей в динамическом изменении контекста. Всемирная паутина оставляла весьма невыразительное впечатление, даже при наличии прокрутки текста и анимированных GIF-картинок. Корзины покупателей, поисковые машины и социальные сети внесли существенные коррективы в порядок использования Всемирной паутины. В этой главе будет дан краткий обзор различных компонентов, формирующих ее облик, и программного обеспечения, способствующего обогащению и оживлению наших впечатлений от ее использования.
Пришло время воспользоваться аббревиатурами. Прежде чем делать это, я старался дать им четкое объяснение. Но если сразу не удастся разобраться, какое именно понятие они замещают или что означают, переживать не стоит, поскольку все подробности прояснятся по мере чтения книги.
HTTP и HTML: основы, заложенные Бернерсом-Ли
HTTP представляет собой стандарт взаимодействия, регулирующий порядок направления запросов и получения ответов — процесса, происходящего между браузером, запущенным на компьютере конечного пользователя, и веб-сервером. Задача сервера состоит в том, чтобы принять запрос от клиента и попытаться дать на него содержательный ответ, обычно передавая ему запрошенную веб-страницу. Именно поэтому и используется термин «сервер» («обслуживающий»). Партнером, взаимодействующим с сервером, является клиент, поэтому данное понятие применяется как к браузеру, так и к компьютеру, на котором он работает.
Между клиентом и сервером может располагаться ряд других устройств, например маршрутизаторы, модули доступа, шлюзы и т.д. Они выполняют различные задачи по обеспечению безошибочного перемещения запросов и ответов между клиентом и сервером. Как правило, для отправки этой информации используется Интернет. Некоторые из этих промежуточных устройств могут также ускорить Интернет путем локального сохранения страниц или информации в так называемом кэше, обслуживая затем данное содержимое для клиентов непосредственно из кэша без постоянного извлечения его из сервера-источника.
Обычно веб-сервер может обрабатывать сразу несколько подключений, а при отсутствии связи с клиентом он находится в режиме ожидания входящего подключения. При поступлении запроса на подключение сервер подтверждает его получение отправкой ответа.
Процедура «запрос — ответ»
В наиболее общем виде процесс «запрос — ответ» состоит из просьбы браузера к веб-серверу отправить ему веб-страницу и выполнения браузером данной просьбы. После этого браузер занимается отображением страницы (рис. 1.1).
Рис. 1.1. Основная последовательность процесса «запрос — ответ» между клиентом и сервером
При этом соблюдается такая последовательность действий.
1. Вы вводите в адресную строку браузера http://server.com.
2. Ваш браузер ищет IP-адрес, соответствующий доменному имени server.com.
3. Браузер посылает запрос на главную страницу server.com.
4. Запрос проходит по Интернету и поступает на веб-сервер server.com.
5. Веб-сервер, получивший запрос, ищет веб-страницу на своем жестком диске. Сервер извлекает веб-страницу и отправляет ее по обратному маршруту в адрес браузера.
6. Браузер отображает веб-страницу.
При передаче типовой веб-страницы этот процесс также осуществляется для каждого имеющегося на ней объекта: элемента графики, встроенного видео- или Flash-ролика и даже шаблона CSS.
Обратите внимание на то, что на шаге 2 браузер ищет IP-адрес, принадлежащий доменному имени server.com. У каждой машины, подключенной к Интернету, включая и ваш компьютер, есть свой IP-адрес. Но, как правило, доступ к веб-серверам осуществляется по именам, таким как google.com. Вам должно быть известно, что браузер обращается к вспомогательной интернет-службе, так называемой службе доменных имен (Domain Name Service, DNS), чтобы найти связанный с сервером IP-адрес, а затем воспользоваться им для связи с компьютером.
При передаче динамических веб-страниц процедура состоит из большего количества действий, поскольку к ней могут привлекаться как PHP, так и MySQL. Например, можно щелкнуть кнопкой мыши на картинке с изображением плаща. После этого PHP составит запрос, используя стандартный язык базы данных, SQL — множество используемых для этого команд будет рассмотрено в книге, — и отправит запрос в адрес MySQL-сервера. Этот сервер возвратит информацию о выбранном вами плаще, и PHP-код заключит ее в некий код HTML, который будет отправлен сервером в адрес вашего браузера (рис. 1.2).
Выполняется такая последовательность действий.
1. Вы вводите в адресную строку браузера http://server.com.
2. Ваш браузер ищет IP-адрес, соответствующий доменному имени server.com.
3. Браузер посылает запрос на главную страницу server.com. Запрос проходит по Сети и поступает на веб-сервер server.com.
4. Веб-сервер, получивший запрос, ищет веб-страницу на своем жестком диске.
5. Теперь, когда главная страница размещена в его памяти, веб-сервер замечает, что она представлена файлом, включающим в себя PHP-сценарии, и передает страницу интерпретатору PHP.
6. Интерпретатор PHP выполняет PHP-код.
7. Кое-какие фрагменты кода PHP содержат MySQL-инструкции, которые интерпретатор PHP, в свою очередь, передает процессору базы данных MySQL.
8. База данных MySQL возвращает результаты выполнения инструкции интерпретатору PHP.
9. Интерпретатор PHP возвращает веб-серверу результаты выполнения кода PHP, а также результаты, полученные от базы данных MySQL.
10. Веб-сервер возвращает страницу выдавшему запрос клиенту, который отображает эту страницу на экране.
Конечно, ознакомиться с этим процессом и узнать о совместной работе трех элементов не помешает, но на практике эти подробности не понадобятся, поскольку все происходит в автоматическом режиме.
Рис. 1.2. Динамическая последовательность процесса «запрос — ответ», выполняемого клиентом и сервером
В каждом из примеров возвращенные браузеру HTML-страницы могут содержать также код JavaScript, интерпретируемый локально на машине клиента. Этот код может инициировать еще один запрос, точно так же запрос может быть инициирован встроенными объектами, например изображениями.
Преимущества использования PHP, MySQL, JavaScript и CSS
В начале этой главы был представлен мир технологии Web 1.0, но рывок к созданию технологии Web 1.1, вместе с которой были разработаны такие браузерные расширения, как Java, JavaScript, JScript (несколько иной вариант JavaScript от корпорации Microsoft) и ActiveX, не заставил себя долго ждать. На серверной стороне прогресс был обеспечен за счет общего шлюзового интерфейса (Common Gateway Interface, CGI), использования таких языков сценариев, как Perl (альтернатива языку PHP), и выполнения сценариев на стороне сервера — динамической вставки содержимого одного файла (или выходных данных выполняемой локальной программы) в другой файл.
Когда ситуация окончательно прояснилась, на передовых позициях остались три основные технологии. Несмотря на то что язык сценариев Perl силами своих стойких приверженцев сохранил популярность, простота PHP и допустимость использования в нем встроенных ссылок на программу базы данных MySQL обеспечили этому языку более чем двойное превосходство по количеству пользователей. А JavaScript, ставший важнейшей составной частью уравнения, используемого для динамического манипулирования каскадными таблицами стилей (Cascading Style Sheets, CSS) и HTML, в настоящее время берет на себя наиболее трудоемкие задачи асинхронного обмена данными (осуществляемого между клиентом и сервером после загрузки веб-страницы). Используя асинхронный обмен данными, веб-страницы обрабатывают данные и отправляют запросы веб-серверу в фоновом режиме, не оповещая пользователя о происходящем.
Несомненно, своеобразный симбиоз PHP и MySQL способствует их продвижению, но что привлекает к ним разработчиков в первую очередь? На это следует дать простой ответ: та легкость, с которой эти технологии можно использовать для быстрого создания на сайтах динамических элементов. MySQL является быстродействующей и мощной, но при этом простой в использовании системой базы данных, предлагающей сайту практически все необходимое для поиска и обработки данных, которые предназначены для браузеров. Когда PHP для хранения и извлечения этих данных выступает в союзе с MySQL, вы получаете основные составляющие, необходимые для разработки сайтов социальных сетей и для перехода к технологии Web 2.0.
И когда вы также соедините вместе JavaScript и CSS, у вас появится рецепт для создания высокодинамичных и интерактивных сайтов, особенно в современных условиях доступности множества сложных функциональных сред JavaScript, вызов которых действительно позволяет ускорить веб-разрабоку. Достаточно упомянуть широко известную библиотеку JQuery, применение которой в настоящее время, наверное, является наиболее востребованным способом доступа программистов к функциям асинхронного обмена данными.
MariaDB: клон MySQL
После того как компания Oracle приобрела Sun Microsystems (владельца MySQL), возникли опасения, что полностью открытым код MySQL может не остаться, и в итоге от этой СУБД отпочковалась MariaDB, дабы код оставался открытым в соответствии с положениями лицензии GNU GPL. Разработка MariaDB шла под руководством ряда первоначальных создателей MySQL, и эта СУБД сохранила максимальную совместимость с MySQL. Поэтому вероятность встречи на некоторых серверах MariaDB вместо MySQL весьма высока, что не должно вызывать никаких опасений, поскольку все показанное в данной книге одинаково успешно работает как под MySQL, так и под MariaDB, имеющей туже кодовую базу, что и MySQL Server 5.5. В любом случае одна СУБД может заменяться другой, и вы при этом не заметите никакой разницы.
Впрочем вышло так, что многие возникшие поначалу опасения были напрасны, поскольку код MySQL остался открытым, а компания Oracle просто сделала платной приобретение и поддержку тех выпусков, которые предоставляют дополнительные функциональные возможности, включающие георепликацию и автоматическое масштабирование. Тем не менее, в отличие от MariaDB, MySQL больше не поддерживается сообществом, но осознание того, что MariaDB никогда не лишится этой поддержки, позволит многим разработчикам спать спокойно и, вероятно, даст гарантии того, что код самой MySQL останется открытым.
PHP
Использование PHP существенно упрощает встраивание средств, придающих веб-страницам динамические свойства. Когда страницам присваивается расширение PHP, у них появляется прямой доступ к языку сценариев. Разработчику нужно лишь написать код, похожий на этот:
<?php
echo " Today is " . date('T') . ". ";
?>
Here's the latest news.
Открывающий тег <?php дает веб-серверу разрешение на интерпретацию всего последующего кода вплоть до тега ?>. Все, что находится за пределами этой конструкции, отправляется клиенту в виде простого HTML. Поэтому текст Here'sthelatestnews просто выводится в браузер. А внутри PHP-тегов встроенная функция date отображает текущий день недели, соответствующий системному времени сервера.
В итоге на выходе из этих двух частей получается примерно следующее:
Today is Wednesday. Here's the latest news.
PHP — довольно гибкий язык, и некоторые разработчики предпочитают помещать PHP-конструкцию непосредственно рядом с кодом PHP, как в этом примере:
Today is <?php echo date("l"); ?>. Here's the latest news.
Существуют также другие способы форматирования и вывода информации, которые будут рассмотрены в главах, посвященных PHP. Важно усвоить то, что, используя PHP, веб-разработчики получают язык сценариев, который хотя и не обладает быстротой кода, скомпилированного на C или ему подобных языках, но все же работает невероятно быстро и к тому же очень хорошо вписывается в разметку HTML.
Если вы собираетесь набирать встречающиеся в этой книге примеры на PHP в программе-редакторе, чтобы работать параллельно с моим повествованием, не забывайте предварять их тегом <?php, а в конце ставить тег ?>, для того чтобы обеспечить их обработку интерпретатором PHP. Для упрощения этой задачи можно заранее подготовить файл example.php, содержащий эти теги.
Используя PHP, вы получаете средство управления своим веб-сервером с неограниченными возможностями. Если понадобится на лету внести изменения в HTML, обработать данные кредитной карты, добавить сведения о пользователе в базу данных или извлечь информацию из стороннего сайта, все это можно будет сделать из тех же самых PHP-файлов, в которых находится и сам код HTML.
MySQL
Разумеется, без средств отслеживания информации, предоставляемой пользователем в ходе работы с вашим сайтом, нельзя в полной мере говорить о возможностях динамического изменения выходного кода HTML. На заре создания Всемирной паутины многие сайты использовали неструктурированные текстовые файлы для хранения таких данных, как имена пользователей и пароли. Но подобный подход мог вызвать ряд проблем, если файл не был надежно заблокирован от повреждений, возникающих при одновременном доступе к нему множества пользователей. К тому же неструктурированный файл мог разрастаться до таких размеров, что с ним непросто было работать, не говоря уже о трудностях, связанных с попытками объединения файлов и осуществления в них сложных поисковых операций за какое-нибудь мало-мальски приемлемое время.
Именно в таких случаях большое значение приобретает использование реляционных баз данных со структурированной системой запросов. И MySQL, будучи совершенно бесплатной и установленной на огромном количестве веб-серверов системой, оказывается как нельзя кстати. Она представляет собой надежную и исключительно быстродействующую систему управления базами данных, использующую команды, похожие на простые английские слова.
Высшим уровнем структуры MySQL является база данных, внутри которой можно иметь одну или несколько таблиц, содержащих ваши данные. Предположим, вы работаете над таблицей под названием users (пользователи), внутри которой были созданы столбцы для фамилий — surname, имен — firstname и адресов электронной почты — email, и теперь нужно добавить еще одного пользователя. Одна из команд, которую можно применить для этого, выглядит следующим образом:
INSERT INTO users VALUES('Smith', 'John', '[email protected]');
Для создания базы данных и таблицы, а также настройки всех нужных полей понадобится сначала выдать и другие команды, но используемая здесь SQL-команда INSERT демонстрирует простоту добавления в базу данных новой информации. Structured Query Language (SQL) является языком, разработанным в начале 1970-х годов и напоминающим один из старейших языков программирования — COBOL. Тем не менее он хорошо подходит для запросов к базе данных, что и предопределило его использование в течение столь длительного времени.
Так же просто выполняется и поиск данных. Предположим, что имеется адрес электронной почты пользователя и нужно найти имя его владельца. Для этого можно ввести следующий запрос MySQL:
SELECT surname,firstname FROM users WHERE email='[email protected]';
После этого MySQL вернет Smith, John и любые другие пары имен, которые могут быть связаны в базе данных с адресом электронной почты.
Нетрудно предположить, что возможности MySQL простираются значительно дальше выполнения простых команд вставки и выбора — INSERT и SELECT. Например, можно скомбинировать родственные наборы данных, чтобы собрать вместе взаимосвязанные части информации, запросить результаты, выбрав порядок их выдачи из множества вариантов, найти частичные совпадения, если известна только часть искомой строки, вернуть конкретно заданное количество результатов и сделать многое другое.
При использовании PHP все эти вызовы можно направлять непосредственно к MySQL без необходимости самостоятельного применения ее интерфейса командной строки. Это значит, что для того, чтобы докопаться до нужного вам элемента данных, вы можете сохранять результаты в массивах для их обработки и осуществления множества поисковых операций, каждая из которых зависит от результатов, возвращенных предыдущими операциями.
Далее будет показано, что для придания еще большей мощности прямо в MySQL встроено несколько дополнительных функций, которые можно вызвать с целью эффективного выполнения наиболее часто встречающихся в MySQL операций, избавляясь от необходимости их составления из нескольких PHP-вызовов в адрес MySQL.
JavaScript
Самая старая из трех основных технологий, рассматриваемых в данной книге, — JavaScript — была создана для получения доступа из сценариев ко всем элементам HTML-документа. Иными словами, она предоставляет средства для динамического взаимодействия с пользователем, например для проверки приемлемости адресов электронной почты в формах ввода данных, отображения подсказок наподобие «Вы действительно подразумевали именно это?» и т.д. (хотя с точки зрения безопасности, которая всегда должна реализовываться на веб-сервере, на эту технологию положиться нельзя).
В сочетании с CSS JavaScript закладывает основу мощности динамических вебстраниц, которые изменяются буквально на глазах, в отличие от новой страницы, возвращаемой сервером.
Тем не менее с использованием JavaScript могут возникнуть осложнения, обусловленные некоторыми существенными различиями в способах реализации этого языка, выбранных разными разработчиками браузеров. В основном эти различия возникают, когда некоторые производители пытаются придать своим браузерам дополнительные функциональные возможности, не обращая внимания на совместимость с продуктами своих конкурентов.
К счастью, разработчики в большинстве своем уже взялись за ум, и теперь оптимизация вашего кода для различных браузеров утратила прежнюю актуальность. Но остаются миллионы экземпляров устаревших браузеров, которыми будут пользоваться на протяжении еще многих лет. Тем не менее и для них существуют решения проблем несовместимости, и позже в этой книге будут рассмотрены библиотеки и технологии, позволяющие без каких-либо опасений игнорировать существующие различия.
А сейчас взглянем на то, как можно воспользоваться обычным JavaScript-кодом, воспринимаемым всеми браузерами:
<script type="text/javascript">
document.write("Today is " + Date() );
</script>
Этот фрагмент кода предписывает браузеру интерпретировать все, что находится внутри тегов <script>, в качестве кода JavaScript, что затем браузер и сделает, записав в текущий документ текст "Todayis", а также дату, полученную за счет использования принадлежащей JavaScript функции Date. В результате получится нечто подобное следующему:
Today is Sun Jan 01 2017 01:23:45
Если не требуется указывать конкретную версию JavaScript, то, как правило, можно опустить type="text/javascript" и использовать для начала интерпретации JavaScript тег <script>.
Ранее было упомянуто, что изначально JavaScript разрабатывался для того, чтобы получить возможность динамического управления различными элементами, находящимися внутри HTML-документа, и это его предназначение по-прежнему является основным. Но все чаще JavaScript применяется для осуществления процесса доступа к веб-серверу в фоновом режиме с целью асинхронного обмена данными.
Асинхронный обмен данными позволил веб-страницам стать похожими на автономные программы, поскольку для отображения нового содержимого их уже не нужно загружать целиком. Вместо этого асинхронный вызов может использоваться для извлечения и обновления отдельно взятого элемента веб-страницы, например может быть изменена ваша фотография на сайте социальной сети или заменена кнопка, на которой нужно щелкнуть, отвечая на вопрос. Полностью эта тема будет рассмотрена в главе 17.
Затем в главе 21 мы присмотримся к среде jQuery, которую можно использовать, чтобы не изобретать колесо в случае возникновения потребностей в быстродействующем, кросс-браузерном коде для управления веб-страницами. Конечно, доступны и другие подобные среды, но jQuery является самой популярной библиотекой и, исходя из показателей, накопленных за весьма длительный срок ее использования, обладает исключительной надежностью и является основным средством в арсенале многих опытных разработчиков.
CSS
CSS является ключевым дополнением к HTML, обеспечивая соответствующую разметку HTML-текста и встроенных изображений, сообразуясь с параметрами экрана пользователя. После появления третьего стандарта (CSS3) CSS предлагает уровень динамической интерактивности, которая прежде поддерживалась только с помощью JavaScript. Например, вы можете не только придать стиль любому элементу HTML, чтобы изменить его размеры, цвета, границы, интервалы, но и, используя всего лишь несколько строк CSS, добавить своим веб-страницам анимированные переходы и преобразования.
Применение CSS может просто заключаться во вставке правил между тегами <style> и </style>, расположенными в заголовке веб-страницы:
<style>
р{
text-align:justify;
font-family:Helvetica;
}
</style>
Эти правила будут изменять исходное выравнивание текста тега <p>, чтобы содержащиеся в нем абзацы были полностью выровнены и для них использовался шрифт Helvetica.
В главе 18 вы увидите, что существует множество различных способов задания правил CSS и их также можно включать непосредственно в теги или сохранять во внешнем файле, предназначенном для отдельной загрузки. Такая гибкость позволяет проводить точную настройку стиля HTML. Вы также увидите, как с помощью CSS можно, например, создать встроенную функцию hover для анимирования объектов при проходе над ними указателя мыши. Кроме того, вы научитесь получать доступ ко всем свойствам CSS-элемента из JavaScript и из HTML.
А теперь HTML5
Какими бы ни были полезными все эти дополнения к веб-стандартам, самым амбициозным разработчикам и их было мало. К примеру, так и не был придуман простой способ работы с графикой в браузере, не требующий обращения к таким дополнительным модулям, как Flash. То же самое происходило и в отношении аудио- и видеовставок в веб-страницы. Кроме того, можно отметить множество досадных несоответствий, вкравшихся в HTML в процессе его развития.
Итак, чтобы подчистить все эти шероховатости, перенести Интернет за пределы технологии Web 2.0 в его следующую фазу развития, был создан новый стандарт HTML, устраняющий перечисленные недостатки: HTML5. Он начал разрабатываться в далеком 2004 году, когда Mozilla Foundation и Opera Software (разработчики двух популярных браузеров) составили его первый проект. Но его окончательный проект был представлен World Wide Web Consortium (W3C), международной организацией, руководящей веб-стандартами, лишь в начале 2013 года.
На разработку HTML5 ушло несколько лет, но теперь мы располагаем весьма надежной и стабильной версией 5.1 (с 2016 года). Но цикл разработки никогда не заканчивается, и со временем в этот язык несомненно будут встроены дополнительные функциональные возможности. К некоторым наиболее ярким свойствам HTML5, позволяющим управлять медиаресурсами, можно отнести элементы <audio>, <video> и <canvas>, с помощью которых происходит добавление звука, видео и усовершенствованной графики. Все, что нужно знать об этих и всех других аспектах HTML5, весьма подробно изложено в данной книге, начиная с главы 23.
Кроме всего прочего, мне в спецификации HTML5 нравится, что для самозакрывающихся элементов больше не нужен синтаксис XHTML. Раньше перевод на новую строку можно было изобразить с помощью элемента <br>. Затем для обеспечения совместимости в будущем с XHTML (так и не состоявшейся заменой HTML) элемент был изменен на <br /> с добавленным символом / (поскольку ожидалось, что характерной особенностью закрывающего тега всех элементов станет именно этот символ). Но теперь все вернулось на круги своя и можно использовать любую из версий таких элементов. Итак, для большей лаконичности и меньшего объема набираемого текста в данной книге я вернулся к прежнему стилю: <br>, <hr> и т.д.
Веб-сервер Apache
В дополнение к PHP, MySQL, JavaScript, CSS и HTML5 в динамической веб-технологии фигурирует и шестой герой — веб-сервер. В нашей книге предполагается, что это веб-сервер Apache. Мы уже немного касались того, что делает веб-сервер в процессе обмена информацией между клиентом и сервером по протоколу HTTP, но на самом деле негласно он выполняет куда более масштабную работу.
Например, Apache обслуживает не только HTML-файлы — он работает с широким спектром файлов, начиная с файлов изображений и Flash-роликов и заканчивая аудиофайлами формата MP3, файлами RSS-потоков (Really Simple Syndication — простое распространение по подписке) и т.д. И эти объекты не должны быть статическими файлами, такими как изображения GIF-формата. Все они могут быть сгенерированы программами, такими как сценарии PHP. И это действительно возможно: PHP способен даже создавать для вас изображения и другие файлы либо на лету, либо заранее, в расчете на последующее обслуживание. Для этого обычно имеются модули, либо предварительно скомпилированные в Apache или PHP, либо вызываемые во время выполнения программы. Одним из таких модулей является библиотека GD (Graphics Draw — рисование графики), которую PHP использует для создания и обработки графических элементов.
Apache поддерживает также обширный арсенал собственных модулей. В дополнение к модулям PHP наиболее важными для вас как для веб-программиста будут модули, занимающиеся обеспечением безопасности. В качестве других примеров могут послужить модуль Rewrite, позволяющий веб-серверу обрабатывать широкий диапазон типов URL-адресов и перезаписывать их в соответствии с его внутренними требованиями, и модуль Proxy, который можно использовать для обслуживания часто запрашиваемых страниц из кэша, чтобы снизить нагрузку на сервер.
Далее в книге будет показано практическое применение этих модулей для улучшения свойств, предоставляемых тремя основными технологиями.
Обслуживание мобильных устройств
Мы живем в уже устоявшемся мире взаимосвязанных мобильных вычислительных устройств, и концепция разработки веб-сайтов исключительно для настольных компьютеров безнадежно устарела. Сегодня разработчики нацелены на создание адаптивных веб-сайтов и веб-приложений, перекраивающих самих себя под ту среду, в которой они оказываются запущенными на выполнение.
Поэтому в качестве нововведения я покажу вам способы рационального создания подобных программных продуктов с использованием только тех технологий, которые подробно рассматриваются в этой книге, а также весьма эффективной библиотеки jQuery Mobile, обладающей адаптивными JavaScript-функциями. С ее помощью можно будет сконцентрировать все свое внимание на содержимом и удобстве пользования вашими веб-сайтами и веб-приложениями, заранее зная, что способы их отображения на экране будут автоматически оптимизированы под широкую номенклатуру вычислительных устройств, о чем вам меньше всего придется беспокоиться.
С целью демонстрации максимально возможной эффективности использования библиотеки jQuery Mobile в заключительной главе книги будет рассмотрен пример создания сайта простой социальной сети, обладающего полноценной адаптивностью и обеспечивающего качественное отображение на экранах любых устройств, начиная с небольших мобильных телефонов и заканчивая планшетными или настольными компьютерами.
Несколько слов о программах с открытым исходным кодом
Технологии, рассматриваемые в данной книге, основаны на использовании открытого кода: чтение кода и внесение в него изменений носит общедоступный характер. Часто спорят, обусловлена или нет популярность этих технологий тем, что они представлены программами с открытым исходным кодом, но PHP, MySQL и Apache действительно являются наиболее востребованными инструментами в своих категориях. Вполне определенно можно сказать, что их принадлежность к продуктам с открытым кодом означает, что они были разработаны в сообществе команд программистов, которые придавали им свойства в соответствии со своими желаниями и потребностями и хранили исходный код доступным для всеобщего просмотра и изменения. Ошибки и бреши в системе безопасности могут быть быстро распознаны и предотвращены еще до их проявления.
Есть и еще одно преимущество: все эти программы могут использоваться бесплатно. Если вы наращиваете пропускную способность своего сайта и привлекаете к его обслуживанию различные серверы, не нужно задумываться о приобретении дополнительных лицензий. Не нужно также пересматривать свой бюджет перед тем, как принять решение об обновлении системы и установке самых последних версий этих продуктов.
А теперь все это, вместе взятое
Истинная красота PHP, MySQL, JavaScript (иногда при содействии jQuery или других сред), CSS и HTML5 проявляется в том замечательном способе, благодаря которому они совместно работают над производством динамического веб-контента: PHP занят основной работой на веб-сервере, MySQL управляет данными, а CSS и JavaScript вместе заботятся о представлении веб-страницы. JavaScript может также взаимодействовать с вашим PHP-кодом на веб-сервере, когда ему нужно что-нибудь обновить (как на сервере, так и на веб-странице). И с новыми, высокоэффективными свойствами HTML5, такими как холсты, аудио, видео и геолокация, можно придать вашим веб-страницам более высокую динамичность, интерактивность и мультимедийность.
Неплохо бы теперь подвести краткий итог всему, что изложено в данной главе, и, не пользуясь программным кодом, рассмотреть процесс, сочетающий в себе некоторые из этих технологий в повседневно использующейся многими сайтами функции асинхронного обмена данными: проверке в процессе регистрации новой учетной записи, не занято ли выбранное имя другим посетителем сайта. Хорошим примером подобного использования технологий может послужить почтовый сервер Gmail (рис. 1.3).
Рис. 1.3. Gmail применяет технологию асинхронного обмена данными для проверки допустимости пользовательских имен
Этот асинхронный процесс состоит из следующих шагов.
1. Сервер выдает код HTML для создания веб-формы, запрашивающей необходимые данные: имя пользователя, настоящее имя, настоящую фамилию и адрес электронной почты.
2. Одновременно с этим сервер вкладывает в HTML JavaScript-код, позволяющий отслеживать содержимое поля ввода имени пользователя и проверять два обстоятельства: введен ли в это поле какой-нибудь текст и был ли фокус ввода перемещен из этого поля по щелчку пользователя на другом поле ввода.
3. Как только будет введен текст и фокус ввода перемещен на другой элемент формы, код JavaScript в фоновом режиме передает введенное имя пользователя PHP-сценарию на веб-сервере и ждет ответной реакции.
4. Веб-сервер ищет имя пользователя и возвращает коду JavaScript ответ, в котором сообщает, было ли уже задействовано такое же имя.
5. Затем JavaScript размещает под полем ввода имени пользователя индикатор приемлемости имени пользователя, возможно, в виде зеленой галочки или красного крестика, сопровождая его текстом.
6. Если пользователь ввел неприемлемое имя, но все же пытается отправить форму, код JavaScript прерывает отправку и повторно обращает внимание пользователя (возможно, выводя более крупный графический индикатор и/или открывая окно предупреждения) на необходимость выбора другого имени.
7. Усовершенствованная версия этого процесса может даже изучить имя, запрошенное пользователем, и предложить альтернативное, доступное на данный момент.
Все это для удобства пользователя и целостности восприятия им всего происходящего делается без привлечения его внимания в фоновом режиме. Без использования асинхронного обмена данными на сервер будет отправлена вся форма, затем он вернет код HTML с подсветкой тех полей, в которых были допущены ошибки. Можно, конечно, сделать и так, но обработка поля на лету будет выглядеть намного интереснее и приятнее.
Асинхронный обмен данными может использоваться для решения куда более широкого круга задач, чем простой контроль и обработка вводимой информации. Далее в этой книге будет рассмотрено много дополнительных приемов, реализуемых с применением AJAX.
В этой главе вашему вниманию было представлено довольно полное введение в основные технологии применения PHP, MySQL, JavaScript, CSS и HTML5 (а также Apache) и рассмотрен порядок их совместной работы. В главе 2 будут описаны способы установки вашего собственного сервера, предназначенного для веб-разработок, на котором можно будет освоить на практике весь изучаемый материал.
Вопросы
1. Какие четыре компонента необходимы для создания полностью динамических сайтов?
2. Что означает аббревиатура HTML?
3. Почему в названии MySQL присутствуют буквы SQL?
4. И PHP, и JavaScript являются языками программирования, генерирующими динамическое содержимое веб-страниц. В чем состоит их главное различие и почему вы будете использовать оба этих языка?
5. Что означает аббревиатура CSS?
6. Перечислите три важнейших новых элемента, появившихся в HTML5.
7. Если вам удастся обнаружить ошибку в одном из инструментальных средств с открытым кодом (что случается довольно редко), то как, по-вашему, можно получить исправленную версию?
8. Почему такая среда, как jQuery Mobile, играет столь важную роль в разработке современных веб-сайтов и веб-приложений?
Ответы на эти вопросы можно найти в приложении А, в соответствующем разделе.
2. Установка сервера, предназначенного для разработки
Если у вас есть желание разрабатывать интернет-приложения, но нет собственного сервера для их разработки, то прежде, чем протестировать каждую созданную модификацию приложения, вам придется загружать ее на сервер, находящийся где-нибудь в Интернете.
Даже при наличии высокоскоростного широкополосного подключения это обстоятельство может существенно замедлить разработку. А на локальном компьютере тестирование может быть не сложнее обновления программы (зачастую запускается простым щелчком на значке) с последующим нажатием кнопки Refresh (Обновить) в браузере.
Еще одно преимущество разработочного сервера заключается в том, что при написании и тестировании программ не нужно волноваться о смущающих разработчика ошибках или проблемах безопасности, однако при размещении приложения на публичном сайте следует знать о том, что люди могут увидеть, или о том, что они могут сделать с вашим приложением. Лучше решить все проблемы, пока вы работаете дома или в небольшом офисе, который, вероятнее всего, защищен межсетевыми экранами (брандмауэрами) и другими средствами обеспечения безопасности.
Получив в свое распоряжение разработочный сервер, вы удивитесь, как раньше могли обходиться без него, а также обрадуетесь легкости его настройки. Нужно лишь пройти все шаги, изложенные в следующих разделах, и выполнить соответствующие указания для обычных персональных компьютеров, Mac- или Linux-систем.
В этой главе будет рассмотрена только серверная сторона сетевого взаимодействия, о которой шла речь в главе 1. Но для тестирования результатов вашей работы, особенно потом, когда мы приступим к использованию JavaScript, CSS и HTML5, понадобится также копия каждого основного браузера, работающего под управлением удобной для вас системы. В списке браузеров должны быть по крайней мере Microsoft Edge, Mozilla Firefox, Opera, Safari и Google Chrome. Если вы хотите убедиться, что ваши приложения также хорошо выглядят на мобильных устройствах, постарайтесь использовать для тестирования широкий диапазон устройств, работающих под управлением iOS и Android.
Что такое WAMP, MAMP и LAMP
WAMP, MAMP и LAMP — это сокращения от «Windows, Apache, MySQL и PHP», «Mac, Apache, MySQL и PHP» и «Linux, Apache, MySQL и PHP» соответственно. Такими сокращениями описываются полноценные функциональные установки, используемые для разработки динамических веб-страниц.
Системы WAMP, MAMP и LAMP поставляются в форме пакетов, связывающих упакованные программы таким образом, чтобы их не нужно было устанавливать и настраивать по отдельности. Это означает, что нужно просто загрузить и установить одну программу и следовать простым подсказкам, чтобы подготовить разработочный сервер и запустить его в кратчайшие сроки и с минимальными усилиями.
В процессе установки будут заданы исходные настройки. Конфигурация безопасности при такой установке не будет столь же строгой, как на технологическом веб-сервере, поскольку она оптимизирована для использования на локальной машине. Поэтому не следует пользоваться такими настройками при установке технологического сервера.
Но для разработки и тестирования сайтов и приложений подобная установка подойдет как нельзя лучше.
Если для создания своей системы разработки вы решили не использовать WAMP/MAMP/LAMP, следует учесть, что загрузка и самостоятельная взаимоувязка составных частей займут очень много времени и могут отнять большое количество сил на исследования для создания полноценной конфигурации всей системы. Но если все компоненты у вас уже установлены и согласованы друг с другом, они смогут работать с примерами из этой книги.
Установка AMPPS в системе Windows
Существует несколько доступных WAMP-серверов, каждый из которых предлагает свою немного отличающуюся от других конфигурацию. Cреди различных бесплатных вариантов с открытым кодом самым лучшим будет AMPPS. Его можно загрузить с главной страницы сайта http://ampps.com (рис. 2.1).
Я рекомендую вам всегда загружать последний стабильный выпуск (на момент написания этих строк им был выпуск с номером 3.8 объемом около 128 Мбайт). На странице загрузки перечислены различные установщики для Windows, OS X и Linux.
Рис. 2.1. Веб-сайт AMPPS
Когда это издание выйдет в свет, некоторые виды экранов и настройки, рассмотренные далее, наверняка изменятся. Если это произойдет, руководствуйтесь здравым смыслом и постарайтесь выполнить все действия как можно ближе к описываемой последовательности.
Запустите установщик после его загрузки, чтобы появилось окно, показанное на рис. 2.2. Если вы используете антивирусную программу или в Windows активизировано управление учетными записями (Account Control), то прежде чем вы перейдете к этому окну, вам может быть показано одно или несколько предупреждений, и для продолжения установки придется нажать кнопки Yes (Да) и (или) OK.
Нажмите кнопку Next (Далее), после чего нужно будет принять соглашения. Нажмите кнопку Next (Далее) еще раз, а затем еще раз, чтобы пройти через информационный экран. После этого понадобится подтвердить место установки. Вероятнее всего, вам будет предложено что-нибудь вроде следующего местоположения в зависимости от буквы вашего основного жесткого диска, но при желании в этот путь можно внести изменения:
C:\Program Files (x86)\Ampps
Рис. 2.2. Открытое окно установщика
Приняв решение о месте установки AMPPS, нажмите кнопку Next (Далее), выберите имя папки начального меню и снова нажмите кнопку Next (Далее). На рис. 2.3 показано, что вам предоставится возможность выбора устанавливаемых значков. Чтобы продолжить процесс установки, на следующем экране нажмите кнопку Install (Установить).
Рис. 2.3. Выбор устанавливаемых значков
Установка займет несколько минут, после чего появится окно завершения процесса, показанное на рис. 2.4, и появится возможность нажать кнопку Finish (Завершить).
Рис. 2.4. Среда AMPPS установлена
В завершение нужно установить среду C++ Redistributable Visual Studio, если она не была установлена ранее. В этой среде будет вестись разработка программных средств. В качестве приглашения на установку появится окно, показанное на рис. 2.5. Нажмите кнопку Yes (Да) для запуска установки или кнопку No (Нет), если уверены в том, что эта среда уже установлена.
Рис. 2.5. Установите среду C++ Redistributable Visual Studio, если она еще не была установлена
Если выбрать установку среды, придется согласиться с условиями, предлагаемыми в появившемся окне, после чего нажать кнопку Install (Установить). Установка не займет много времени. Для ее завершения нужно будет нажать кнопку Close (Закрыть).
После установки среды AMPPS в правом нижнем углу экрана должно появиться окно управления, показанное на рис. 2.6. Это окно можно также вызвать, воспользовавшись ярлыками приложения AMPPS в меню Пуск или на Рабочем столе, если ранее давалось разрешение на их создание.
Рис. 2.6. Окно управления средой AMPPS
Прежде чем продолжить работу, рекомендуется ознакомиться с документацией AMPPS (http://ampps.com/wiki). Если после ознакомления все еще останутся вопросы, воспользуйтесь ссылкой Support (Поддержка), находящейся в нижней части окна управления. Щелкнув на ней, вы перейдете на сайт AMPPS, где можно будет открыть тематическую подсказку.
Нетрудно заметить, что в качестве исходной в AMPPS используется версия PHP с номером 5.6. В последующих разделах данной книги рассматриваются некоторые подробности наиболее важных изменений, внесенных в версию PHP 7. Если захочется испытать эти изменения на деле, нажмите в окне управления AMPPS кнопку настроек (в виде девяти белых квадратиков, образующих большой квадрат), после чего выберите пункт изменения версии, Change PHP Version, вызвав новое меню с возможностью выбора версии в диапазоне от 5.6 и до 7.1.
Тестирование установки
На данном этапе нужно проверить, что все работает должным образом. Для этого потребуется ввести любой из следующих URL-адресов в адресную строку браузера:
localhost
127.0.0.1
В результате будет вызван начальный экран, позволяющий провести настройку безопасности работы в среде AMPPS добавлением пароля (рис. 2.7). Рекомендую не устанавливать флажок безопасности и просто нажать кнопку Submit (Отправить), чтобы продолжить работу без установки пароля.
Рис. 2.7. Начальный экран настройки безопасности
Совершив это действие, вы попадете на главную страницу управления localhost/ampps/ (с этого момента предполагается, что обращение к AMPPS происходило через адрес localhost, а не через 127.0.0.1). На ней можно настраивать все аспекты компонентов AMPPS и управлять ими, что следует отметить для будущих ссылок или, может быть, установить закладку в вашем браузере.
Далее, чтобы увидеть корневой каталог документа вашего нового веб-сервера Apache (рассматриваемый в следующем разделе), наберите такой адрес:
localhost
На этот раз вместо перехода к начальному экрану настройки безопасности на экран будет выведена страница, похожая на ту, что показана на рис. 2.8.
Рис. 2.8. Просмотр корневого каталога документа
Обращение к исходному источнику документов (Windows)
Исходным источником документов является каталог, в котором содержатся главные веб-документы домена. Именно он используется сервером, когда в браузере набирается базовый URL без пути, например http://yahoo.com или — на локальном сервере — http://localhost.
По умолчанию XAMPP использует для этого каталога следующее место: C:/xampp/htdocs.
Теперь, чтобы убедиться в том, что все сконфигурировано должным образом, напишем тестовую программу Hello World. Создайте небольшой HTML-файл со следующими строками, воспользовавшись Блокнотом или любым другим приложением либо текстовым редактором (при использовании текстовых процессоров, таких как Microsoft Word, которые создают форматированный текст, файл нужно сохранять в виде простого текста):
<!DOCTYPE html>
<html lang="en">
<head>
<title>A quick test</title>
</head>
<body>
Hello World!
</body>
</html>
После набора сохраните файл под именем test.htm в корневом каталоге документов. Если вы создаете файл в Блокноте, убедитесь, что в окне Сохранить как в списке Тип файла выбран вариант Все файлы, а не Текстовые документы (*.txt).
Теперь эту страницу можно вызвать в браузере, введя в адресной строке следующий URL-адрес (рис. 2.9):
http://localhost/test.html
Рис. 2.9. Ваша первая веб-страница
Следует понимать, что переход на веб-страницу из корневого каталога документа (или из находящейся в нем папки) отличается от загрузки этой же страницы из файловой системы вашего компьютера. В первом случае будет гарантирован доступ к PHP, MySQL и ко всем свойствам веб-сервера, тогда как во втором файл будет просто загружен в браузер, который попытается создать его экранное представление, но не будет иметь возможности обработки кода PHP или других серверных инструкций. Поэтому примеры должны неизменно запускаться из адресной строки браузера с указанием перед их именами пути localhost, если только вы не уверены в том, что файл не зависит от использования функциональных возможностей веб-сервера.
Другие системы WAMP
При обновлении программы иногда работают неожиданным образом и в них даже могут проявиться какие-нибудь ошибки. Поэтому, столкнувшись с непреодолимыми в AMPPS трудностями, вы можете остановить свой выбор на одном из многих других решений, доступных в Интернете.
Можно будет точно так же воспользоваться всеми примерами, приводимыми в данной книге, но при этом придется следовать инструкциям, которые предоставляются с каждым WAMP-сервером и могут оказаться сложнее ранее упомянутого руководства.
Вот наиболее подходящие, на мой взгляд, серверы:
• EasyPHP (http://easyphp.org/);
• XAMPP (http://apachefriends.org/);
• WAMPServer (http://wampserver.com/en);
• Glossword WAMP (http://glossword.biz/glosswordwamp).
К вопросу об обновлениях AMPPS
Вполне вероятно, что пока данное издание будет самым последним, разработчики AMPPS могут внести в свой продукт ряд усовершенствований, в силу чего экраны и методы установки со временем могут претерпеть изменения, а кроме того, изменениям могут подвергнуться и версии Apache, PHP или MySQL. Поэтому не подумайте, что что-то не в порядке с выводимой на экран информацией и операции выглядят как-то по-другому. Разработчики AMPPS прилагают все усилия для того, чтобы их продукт оставался легок в использовании, поэтому следуйте любым выводимым на экран приглашениям и обращайтесь к документации, размещаемой на сайте http://ampps.com/.
Установка AMPPS в системе macOS
Среда AMPPS может использоваться и в macOS, а загрузить ее можно со страницы http://apachefriends.org, которая была показана на рис. 2.1 (как уже говорилось, текущая версия имеет номер 3.8).
Если ваш браузер после загрузки не откроет среду в автоматическом режиме, дважды щелкните на файле с расширением .dmg, после чего перетащите папку AMPPS на свою папку Applications (Приложения) (рис. 2.10).
Теперь откройте свою папку Applications (Приложения) и дважды щелкните на программе AMPPS. Если ваши настройки безопасности воспрепятствуют открытию файла, нажмите и удерживайте клавишу Control, однократно щелкнув на значке. Будет выведено новое окно с запросом подтверждения на открытие файла программы. Чтобы открыть файл, нажмите кнопку Open (Открыть). Возможно, после запуска приложения для продолжения работы придется ввести ваш пароль на macOS.
После того как среда AMPPS войдет в рабочий режим, в левом нижнем углу вашего рабочего стола появится окно управления, похожее на то, что изображено на рис. 2.6.
Рис. 2.10. Перетащите папку AMPPS на папку Applications (Приложения)
Нетрудно заметить, что в качестве исходной в AMPPS используется версия PHP с номером 5.6. В последующих разделах данной книги рассматриваются некоторые подробности наиболее важных изменений, внесенных в версию PHP 7. Если захочется испытать эти изменения на деле, нажмите в окне управления AMPPS кнопку настроек (в виде девяти белых квадратиков, образующих большой квадрат), после чего выберите пункт изменения версии, Change PHP Version, вызвав новое меню с возможностью выбора версии в диапазоне от 5.6 и до 7.1.
Обращение к исходному источнику документов (macOS)
По умолчанию корневой каталог документов AMPPS будет размещаться по следующему адресу:
/Applications/Ampps/www
Теперь, чтобы убедиться в правильности всех настроек, следует создать общепринятый файл HelloWorld. Поэтому воспользуйтесь программой простого текстового редактора, но не солидным текстовым процессором вроде Microsoft Word (если только не станете сохранять проделанную в нем работу в качестве простого текста), и создайте небольшой HTML-файл, состоящий из следующих строк:
<html>
<head>
<title>A quick test</title>
</head>
<body>
Hello World!
</body>
</html>
После набора данного текста сохраните файл в корневом каталоге документа, назвав его test.html.
Теперь можно вызвать созданную вами веб-страницу в браузере путем ввода в его адресной строке следующего URL (чтобы увидеть тот же результат, который был показан на рис. 2.9):
localhost/test.html
Следует понимать, что переход на веб-страницу из корневого каталога документа (или из находящейся в нем папки) отличается от загрузки этой же страницы из файловой системы вашего компьютера. В первом случае будет гарантирован доступ к PHP, MySQL и всем свойствам веб-сервера, тогда как во втором файл будет просто загружен в браузер, который попытается создать его экранное представление, но не будет иметь возможности обработки кода PHP или других серверных инструкций. Поэтому примеры должны неизменно запускаться из адресной строки браузера с указанием перед их именами пути localhost, если только вы не уверены в том, что файл не зависит от использования функциональных возможностей веб-сервера.
Установка LAMP в Linux
Эта книга ориентирована в основном на пользователей PC и MAC, но содержащийся в ней код будет хорошо работать и на компьютере с Linux. Существуют десятки популярных разновидностей Linux, на каждую из которых LAMP может устанавливаться со своими особенностями. Но многие версии Linux поступают с предустановленным веб-сервером и MySQL, поэтому есть вероятность, что у вас уже все готово к работе. Чтобы понять, так ли это, попробуйте ввести в браузер следующий адрес и посмотрите, получите ли вы веб-страницу, используемую по умолчанию в исходном источнике документов:
localhost
Если все заработает, то у вас, наверное, установлен сервер Apache, а также может быть установлена и запущена база данных MySQL, но, чтобы окончательно удостовериться в этом, проверьте факт их установки вместе со своим системным администратором.
Если веб-сервер не установлен, можете воспользоваться версией AMPPS, которую можно загрузить со страницы http://apachefriends.org.
Последовательность установки похожа на ту, которая рассматривалась в предыдущем разделе. Если нужна дополнительная подсказка по использованию программного продукта, обратитесь к документации, размещенной по адресу http://ampps.com/wiki.
Работа в удаленном режиме
Если есть доступ к веб-серверу, на котором уже имеются сконфигурированные PHP и MySQL, то вы всегда можете применить его для веб-разработок. Но это не самый лучший вариант, если только вы не пользуетесь высокоскоростным подключением. Разработка, выполняемая на локальной машине, позволяет протестировать новые модификации практически без задержки или с небольшой задержкой на загрузку.
Может вызвать трудности и удаленный доступ к MySQL. Чтобы зарегистрироваться на сервере для создания баз данных вручную и установки прав доступа из командной строки, нужно воспользоваться безопасным SSH-протоколом. Компания, предоставляющая веб-хостинг, посоветует, как это можно сделать наилучшим образом, и предоставит пароль для доступа к MySQL (а в первую очередь, разумеется, для доступа к самому серверу). Если выбирать не из чего, я все же не советую пользоваться для удаленного входа на любой сервер небезопасным протоколом Telnet.
Вход в систему
Я рекомендую пользователям Windows для доступа к Telnet и SSH (следует помнить, что уровень безопасности у SSH значительно выше, чем у Telnet) как минимум установить программу PuTTY.
На компьютере Mac система SSH будет доступна изначально. Нужно только выбрать папку Applications, перейти к папке Utilities, а затем запустить программу Terminal. В окне терминала необходимо войти на сервер, используя SSH в следующей команде:
где server.com — это имя сервера, на который необходимо войти, а mylogin — имя пользователя, под которым нужно войти в систему. Затем система запросит у вас пароль для данного имени пользователя, и, если вы введете правильный пароль, вход состоится.
Использование FTP
Для переноса файлов на веб-сервер и обратно понадобится FTP-программа. Если искать подходящую в Интернете, можно найти так много программ, что на выбор нужной именно вам уйдет уйма времени.
Я предпочитаю пользоваться FTP-программой FileZilla (http://filezilla-project.org/), имеющей открытый код в версиях для Windows, Linux и macOS 10.5 и выше (рис. 2.11). Подробные инструкции по работе с FileZilla доступны по адресу http://wiki.filezilla-project. Разумеется, если у вас уже есть FTP-программа, вы можете использовать ее.
Рис. 2.11. FileZilla является полнофункциональной FTP-программой
Использование редактора программ
Хотя для редактирования HTML, PHP и JavaScript подходит любой текстовый редактор, существуют очень удобные приложения, специально предназначенные для редактирования текста программ. В них имеются весьма полезные возможности, например цветная подсветка синтаксиса. Современные редакторы программ хорошо продуманы и могут еще до запуска программы на выполнение показывать места, в которых допущены синтаксические ошибки. Перейдя к использованию современного редактора, вы будете удивлены тому, что раньше обходились без него.
Есть множество хороших и доступных программ, но я остановил свой выбор на программе Editra (рис. 2.12), поскольку она распространяется бесплатно и доступна для macOS, Windows и Linux/UNIX. Программы можно загрузить, перейдя на сайт http://editra.org и выбрав ссылку Download (Скачать) в верхней части страницы, где также можно найти и ссылку на документацию, сопровождающую редактор. Конечно, у каждого свой стиль и предпочтения в программировании, поэтому, если данный редактор вас не устраивает, можно выбрать что-либо из множества других доступных программ-редакторов или же пожелать перейти непосредственно в интегрированную среду разработки (IDE) в соответствии с описанием, приведенным в следующем разделе.
Рис. 2.12. Программы-редакторы (подобные показанной здесь Editra) превосходят по своим возможностям обычные текстовые редакторы
Editra, как показано на рис. 2.12, выделяет синтаксис, используя соответствующие цвета, что очень удобно. Можно поместить курсор после квадратной или фигурной скобки, и Editra подсветит соответствующую парную скобку, давая возможность определить лишние или недостающие скобки. В Editra предлагается также множество других свойств, облегчающих работу с текстом программы.
Опять же, если вы предпочитаете какую-нибудь другую программу-редактор, воспользуйтесь ею, поскольку всегда лучше работать с теми программами, с которыми вы уже знакомы.
Использование IDE
При всех достоинствах специализированных редакторов программ, позволяющих повысить производительность труда программиста, они не могут сравниться с интегрированными средами разработки, предлагающими множество дополнительных возможностей, например проведение отладки и тестирования программ прямо в редакторе, а также отображение описаний функций и многое другое.
На рис. 2.13 показана популярная интегрированная среда разработки phpDesigner с программой PHP, которая загружена в главное окно, и с расположенным в правой части анализатором кода Code Explorer, в котором перечислены различные классы, функции и переменные, используемые в этой программе.
Рис. 2.13. При использовании такой IDE, как phpDesigner, разработка PHP-программы идет намного быстрее и проще
При разработке продукта в IDE можно установить контрольные точки, а затем запустить весь код целиком (или по частям), тогда его выполнение будет останавливаться в контрольных точках и вам будет предоставляться информация о текущем состоянии программы.
Помочь изучению процесса создания программ может то, что приводимые в данной книге примеры могут быть введены в IDE и запущены в этой среде, — тогда вызывать браузер уже не понадобится.
Существует несколько интегрированных сред разработки, доступных для различных платформ. Большинство из них являются коммерческими продуктами, но встречаются и бесплатные версии. В табл. 2.1 приведены некоторые наиболее популярные интегрированные среды разработки PHP-программ и URL-адреса, с которых их можно загрузить.
Таблица 2.1. Интегрированные среды разработки для PHP
IDE
URL-адрес загрузки
Цена
Win
Mac
Linux
Eclipse PDT
http://eclipse.org/pdt/downloads/
Бесплатно
Komodo IDE
http://activestate.com/Products/komodo_ide
$295
NetBeans
http://www.netbeans.org
Бесплатно
phpDesigner
http://mpsoftware.dk
$39
—
—
PHPeclipse
http://phpeclipse.de
Бесплатно
PhpED
http://nusphere.com
$99
—
PHPEdit
http://phpedit.com
$117
—
—
Потратьте время на установку удобного, с вашей точки зрения, редактора программ или IDE, и тогда вы будете готовы опробовать в работе примеры, приводимые в следующих главах.
Теперь, вооружившись редактором программ или IDE, вы готовы к переходу к главе 3, в которой начнется углубленное изучение PHP и совместной работы HTML и PHP, а также структуры самого языка PHP. Но перед тем, как перейти к этой главе, я предлагаю проверить полученные вами знания и ответить на следующие вопросы.
Вопросы
1. В чем разница между WAMP, MAMP и LAMP?
2. Что общего у IP-адреса 127.0.0.1 и URL-адреса http://localhost?
3. Для чего предназначена FTP-программа?
4. Назовите основной недостаток работы на удаленном веб-сервере.
5. Почему лучше воспользоваться редактором программ, а не обычным текстовым редактором?
Ответы на эти вопросы можно найти в приложении А, в соответствующем разделе.
