Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5. 6-е изд. 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
Новое издание бестселлера описывает как клиентские, так и серверные аспекты веб-разработки. Книга, наполненная ценными практическими советами и подробным теоретическим материалом, поможет вам освоить динамическое веб-программирование с применением самых современных технологий. Для закрепления усвоенных знаний автор расскажет, как создать полнофункциональный сайт, работающий по принципу социальной сети. •Изучите важнейшие аспекты языка PHP и основы объектно-ориентированного программирования. •Познакомьтесь с базой данных MySQL. •Управляйте cookie-файлами и сеансами, обеспечивайте высокий уровень безопасности. •Пользуйтесь фундаментальными возможностями языка JavaScript. •Применяйте вызовы AJAX, чтобы значительно повысить динамику вашего сайта. •Изучите основы CSS для форматирования и оформления ваших страниц. •Освойте продвинутые возможности HTML5: геолокацию, обработку аудио и видео, отрисовку на холсте
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 919
Veröffentlichungsjahr: 2023
Das E-Book (TTS) können Sie hören im Abo „Legimi Premium” in Legimi-Apps auf:
Ähnliche
Переводчик С. Черников
Робин Никсон
Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5. 6-е изд. . — СПб.: Питер, 2022.
ISBN 978-5-4461-1970-7
© ООО Издательство "Питер", 2022
Все права защищены. Никакая часть данной книги не может быть воспроизведена в какой бы то ни было форме без письменного разрешения владельцев авторских прав.
Оглавление
Джулии, Наоми, Гарри, Мэтью, Лоре, Ханне, Рэйчел и Дэвиду
Предисловие
Сочетание PHP и MySQL — самый удобный подход к динамическому веб-конструированию, основанному на использовании баз данных. Этот подход удерживает свои позиции, несмотря на вызовы, брошенные другими интегрированными средами разработки, освоение которых дается значительно труднее. Благодаря открытости исходных кодов, его можно использовать совершенно бесплатно, поэтому он очень популярен у веб-разработчиков.
Любому нацеленному на результативность разработчику, использующему платформу UNIX/Linux или даже Windows, необходимо серьезно освоить эти технологии. В сочетании с партнерскими технологиями JavaScript, React, CSS и HTML5 можно создавать сайты калибра таких промышленных стандартов, как Facebook, Twitter и Gmail.
Для кого предназначена эта книга
Книга предназначена для тех, кто хочет изучить способы создания эффективных и динамичных сайтов. Сюда можно отнести веб-мастеров или специалистов по графическому дизайну, которые уже освоили создание статических веб-сайтов или CMS, таких как WordPress, и у которых есть желание вывести свое мастерство на следующий уровень, а также студентов вузов и колледжей, недавних выпускников этих учебных заведений и просто самоучек.
Фактически любой человек, стремящийся изучить основные принципы, заложенные в основу адаптивного веб-дизайна, сможет получить весьма обстоятельные сведения об основных технологиях: PHP, MySQL, JavaScript, CSS и HTML5, а также освоить основы библиотеки React.
Предположения, допущенные в книге
При написании данной книги автор предполагал, что читатель уже имеет элементарные понятия об HTML и способен как минимум скомпоновать простой статический сайт. Но при этом не обязательно наличие у читателя каких-либо знаний в области PHP, MySQL, JavaScript, CSS и HTML5, хотя, если такие знания имеются, изучение материала будет происходить значительно быстрее.
Структура издания
Главы книги расположены в определенном порядке. Сначала делается краткий обзор всех основных технологий, которые рассматриваются в книге, а затем описывается процесс их установки на сервер, предназначенный для разработки веб-приложений, чтобы подготовить читателя к практической работе с примерами.
В первой части книги преподносятся основы языка программирования PHP, включая основы синтаксиса, массивов, функций и объектно-ориентированного программирования.
Затем, после освоения основ PHP, можно переходить к введению в систему управления базами данных MySQL, рассмотрение которой начинается с изучения структуры базы данных MySQL и заканчивается составлением сложных запросов.
После этого рассказывается о том, как воспользоваться сочетанием PHP и MySQL, чтобы приступить к созданию собственных динамических веб-страниц путем интегрирования в это сочетание форм и других функциональных возможностей HTML. Затем будут рассмотрены подробности практических аспектов разработки на PHP и MySQL, включая описание различных полезных функций и способов работы с cookies и сессиями, а также способов поддержания высокого уровня безопасности.
В следующих нескольких главах даются основы JavaScript, начиная с простых функций и обработки событий и заканчивая доступом к объектной модели документа (DOM), проверкой введенных данных и обработкой ошибок в браузере. Это обстоятельный учебник для тех, кто приступает к использованию популярной библиотеки React для JavaScript.
После рассмотрения основных технологий описываются способы создания фоновых Ajax-вызовов и превращения сайтов в высокодинамичную среду.
После этого вам предстоит освоить еще две главы, в которых рассматривается, как использовать CSS для стилевого оформления и подбора формата ваших веб-страниц, прежде чем будут раскрыты приемы существенного снижения трудозатрат по разработке приложений с помощью библиотеки React и дано описание интерактивных свойств, встроенных в HTML5, включающих геолокацию, аудио, видео и холст.
Получив все эти сведения, вы сможете создать полноценный набор программ, в совокупности представляющий собой работоспособный сайт социальной сети.
По мере изложения материала дается большое количество указаний и советов по выработке хорошего стиля программирования, а также подсказок, которые помогут читателям обнаружить и устранить скрытые ошибки программирования. Кроме того, делается много ссылок на сайты с дополнительными материалами, относящимися к рассматриваемым темам.
Условные обозначения
В книге применяются следующие условные обозначения.
Курсив
Курсивом выделены новые термины.
Моноширинный шрифт
Используется для листингов программ, а также внутри абзацев для обозначения таких элементов, как функции, базы данных, типы данных, переменные среды, операторы и ключевые слова, имена файлов и их расширений, команд и параметров командной строки, переменных и других кодовых элементов, тегов HTML и содержимого файлов, названий путей, утилит Unix, названий таблиц и столбцов.
Моноширинный жирный шрифт
Показывает команды или другой текст, который пользователь должен ввести самостоятельно.
Моноширинный курсив
Показывает текст, который должен быть заменен значениями, введенными пользователем, или значениями, определяемыми контекстом.
Шрифт без засечек
Используется для обозначения URL, адресов электронной почты, названий меню, параметров, кнопок, каталогов.
Так обозначаются замечания общего характера.
Так обозначаются предупреждения или предостережения.
Так обозначаются подсказки или советы.
Использование примеров кода
Дополнительные материалы (примеры кода, упражнения и т.д.) доступны для загрузки на сайте GitHub по адресу https://github.com/RobinNixon/lpmj6.
Эта книга предназначена для оказания помощи в выполнении стоящих перед вами задач. Вы можете использовать код, приведенный в ней, в своих программах и документации. Вам не нужно обращаться к нам за разрешением, до тех пор, пока вы не станете копировать значительную часть кода. Например, использование при написании программы нескольких фрагментов кода, взятых из данной книги, не требует специального разрешения. Но продажа и распространение набора примеров из книг издательства «Питер» — требует. Ответы на вопросы, в которых упоминаются материалы этой книги, и цитирование приведенных в ней примеров не требуют разрешения. Но включение существенного объема примеров кода, приводимых в данной книге, в документацию по вашему собственному продукту требует получения разрешения.
Ссылки на источник приветствуются, но не обязательны. В такие ссылки обычно включается название книги, имя ее автора, название издательства и номер ISBN. Например: «Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5», шестое издание, автор Робин Никсон (Robin Nixon). 978-5-4461-1970-7.
Благодарности
Хочу выразить благодарность старшему редактору по сбору контента Аманде Куинн, редактору по разработке контента Мелиссе Поттер и всем, кто приложил немало усилий для выхода этой книги, в том числе Майклу Шпачеку и Дэвиду Макки за всеобъемлющую техническую рецензию, Кейтлин Геган — за общее руководство над выпуском книги, Ким Кофер — за редактуру, Ким Сандовал — за корректуру, Джудит Макконвилл — за создание приложения, Карен Монтгомери — за великолепную сахарную сумчатую летягу на обложке книги, Рэнди Камеру — за последний вариант обложки книги, моему главному редактору Энди Орам — за проверку первых пяти изданий, а также множеству других людей — их так много, что невозможно перечислить имена, — отправивших сообщения о замеченных ошибках и высказавших свои предложения относительно этого, нового издания.
От издательства
Ваши замечания, предложения, вопросы отправляйте по адресу [email protected] (издательство «Питер», компьютерная редакция).
Мы будем рады узнать ваше мнение!
На веб-сайте издательства www.piter.com вы найдете подробную информацию о наших книгах.
Глава 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. Сервер извлекает веб-страницу и отправляет ее по обратному маршруту в адрес браузера.
7. Браузер отображает веб-страницу.
При передаче типовой веб-страницы этот процесс также осуществляется для каждого имеющегося на ней объекта: элемента графики, встроенного видео- или Flash-ролика и даже шаблона CSS.
Обратите внимание на то, что на шаге 2 браузер ищет IP-адрес, принадлежащий доменному имени server.com. У каждой машины, подключенной к интернету, включая и ваш компьютер, есть свой IP-адрес. Но, как правило, доступ к веб-серверам осуществляется по именам, таким как google.com. Браузер обращается к вспомогательной интернет-службе, так называемой системе доменных имен (Domain Name System — DNS), чтобы найти связанный с сервером IP-адрес, а затем воспользоваться им для связи с компьютером.
При передаче динамических веб-страниц процедура состоит из большего количества действий, поскольку к ней могут привлекаться как PHP, так и MySQL. Например, можно щелкнуть кнопкой мыши на картинке с изображением плаща. После этого PHP составит запрос, используя стандартный язык базы данных, SQL — множество используемых для этого команд будет рассмотрено в данной книге, — и отправит запрос в адрес MySQL-сервера. Этот сервер возвратит информацию о выбранном вами плаще, и PHP-код заключит ее в некий код HTML, который будет отправлен сервером в адрес вашего браузера (рис. 1.2).
Выполняется такая последовательность действий.
1. Вы вводите в адресную строку браузера http://server.com.
2. Ваш браузер ищет IP-адрес, соответствующий доменному имени server.com.
3. Браузер посылает запрос на главную страницу server.com.
4. Запрос проходит по Сети и поступает на веб-сервер server.com.
5. Веб-сервер, получивший запрос, ищет веб-страницу на своем жестком диске.
6. Теперь, когда главная страница размещена в его памяти, веб-сервер замечает, что она представлена файлом, включающим в себя PHP-сценарии, и передает страницу интерпретатору PHP.
7. Интерпретатор PHP выполняет PHP-код.
8. Кое-какие фрагменты кода PHP содержат MySQL-инструкции, которые интерпретатор PHP, в свою очередь, передает процессору базы данных MySQL.
9. База данных MySQL возвращает результаты выполнения инструкции интерпретатору PHP.
10. Интерпретатор PHP возвращает веб-серверу результаты выполнения кода PHP, а также результаты, полученные от базы данных MySQL.
11. Веб-сервер возвращает страницу выдавшему запрос клиенту, который отображает эту страницу на экране.
Конечно, ознакомиться с этим процессом и узнать о совместной работе трех элементов не помешает, но на практике эти подробности не понадобятся, поскольку все происходит в автоматическом режиме.
Рис. 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, который до недавнего времени был для программистов одним из наиболее распространенных средств доступа к функциям асинхронного обмена данными, а также более свежая библиотека React JavaScript, популярность которой быстро растет. В настоящее время это один из наиболее широко загружаемых и внедренных фреймворков. Он распространен настолько, что с 2020 года на сайте с предложениями работы Indeed числится более чем в два раза больше вакансий для разработчиков React, чем для разработчиков jQuery.
MariaDB: клон MySQL
После того как компания Oracle приобрела Sun Microsystems (владельца MySQL), возникли опасения, что полностью открытым код MySQL может не остаться, и поэтому от этой СУБД отпочковалась MariaDB, дабы код оставался открытым в соответствии с положениями лицензии GNU GPL. Разработка MariaDB шла под руководством ряда первоначальных создателей MySQL, и эта СУБД сохранила максимальную совместимость с MySQL. Поэтому вероятность встречи на некоторых серверах MariaDB вместо MySQL весьма высока, что не вызывает никаких опасений, поскольку все показанное в данной книге одинаково успешно работает с MySQL. Для любых целей одна СУБД может заменяться другой, и вы при этом не заметите никакой разницы.
Впрочем, вышло так, что многие возникшие поначалу опасения были напрасны, поскольку код MySQL остался открытым, а компания Oracle просто сделала платной приобретение и поддержку тех выпусков, которые предоставляют дополнительные функциональные возможности, включающие георепликацию и автоматическое масштабирование. Тем не менее, в отличие от MariaDB, MySQL больше не поддерживается сообществом, но осознание того, что MariaDB никогда не лишится этой поддержки, позволит многим разрабочикам спать спокойно и, вероятно, даст гарантии того, что код самой MySQL останется открытым.
PHP
Использование PHP существенно упрощает встраивание средств, придающих веб-страницам динамические свойства. Когда страницам присваивается расширение PHP, у них появляется прямой доступ к языку сценариев. Разработчику нужно лишь написать код, похожий на этот:
<?php
echo " Сегодня " . date('T') . ". ";
?>
Последние новости.
Открывающий тег <?php дает веб-серверу разрешение на интерпретацию всего последующего кода вплоть до тега ?>. Все, что находится за пределами этой конструкции, отправляется клиенту в виде простого HTML. Поэтому текст Последниеновости просто выводится в браузер. А внутри PHP-тегов встроенная функция date() отображает текущий день недели, соответствующий системному времени сервера.
В итоге на выходе из этих двух частей получается примерно следующее:
Сегодня Wednesday. Последние новости.
PHP — довольно гибкий язык, и некоторые разработчики предпочитают помещать PHP-конструкцию непосредственно рядом с кодом PHP, как в этом примере:
Сегодня <?php echo date("l"); ?>. Последние новости.
Существуют также другие способы форматирования и вывода информации, которые будут рассмотрены в главах, посвященных 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("Сегодня " + Date() );
</script>
Этот фрагмент кода предписывает браузеру интерпретировать все, что находится внутри тегов <script>, в качестве кода JavaScript, что затем браузер и сделает, записав в текущий документ текст "Сегодня", а также дату, полученную за счет использования принадлежащей JavaScript-функции Date(). В результате получится нечто подобное следующему:
Сегодня wed Jan 01 2025 01:23:45
Если не требуется указывать конкретную версию JavaScript, то, как правило, можно опустить type="text/javascript" и использовать для начала интерпретации JavaScript тег <script>.
Ранее было упомянуто, что изначально JavaScript разрабатывался для того, чтобы получить возможность динамического управления различными элементами, находящимися внутри HTML-документа, и это его предназначение по-прежнему является основным. Но все чаще JavaScript применяется для Ajax — процесса доступа к веб-серверу в фоновом режиме.
Асинхронный обмен данными позволил веб-страницам стать похожими на автономные программы, поскольку для отображения нового содержимого их уже не нужно загружать целиком. Вместо этого асинхронный вызов может использоваться для извлечения и обновления отдельно взятого элемента веб-страницы, например, может быть изменена ваша фотография на сайте социальной сети или заменена кнопка, на которой нужно щелкнуть, отвечая на вопрос. Полностью эта тема будет рассмотрена в главе 18.
Затем в главе 22 мы присмотримся к среде jQuery, которую можно использовать, чтобы не изобретать колесо в случае возникновения потребностей в быстродействующем, кросс-браузерном коде для управления веб-страницами. Конечно, доступны и другие подобные среды, поэтому в главе 24 мы рассмотрим React — один из самых популярных вариантов на сегодняшний день. Оба они чрезвычайно надежны и являются основными инструментами в арсенале многих опытных разработчиков.
CSS
CSS является ключевым дополнением к HTML, которое обеспечивает соответствующую разметку HTML-текста и встроенных изображений, сообразуясь с параметрами применяемого пользователем экрана. После появления третьего стандарта (CSS3) CSS предлагает уровень динамической интерактивности, которая прежде поддерживалась только с помощью JavaScript. Например, вы можете не только придать стиль любому элементу HTML, чтобы изменить его размеры, цвета, границы, интервалы, но и, используя всего лишь несколько строк CSS, добавить своим веб-страницам анимированные переходы и преобразования.
Применение CSS может просто заключаться во вставке правил между тегами <style> и </style>, расположенными в заголовке веб-страницы:
<style>
р{
text-align:justify;
font-family:Helvetica;
}
</style>
Эти правила будут изменять исходное выравнивание текста тега <p>, чтобы содержащиеся в нем абзацы были полностью выровнены и для них использовался шрифт Helvetica.
В главе 19 вы увидите, что существует множество различных способов задания правил 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 года). Но цикл разработки никогда не заканчивается, и со временем, несомненно, будут встроены дополнительные функциональные возможности: в версии 5.2 (планируется снять с эксплуатации систему подключаемых модулей), выпущенной в качестве рекомендации W3C в 2017 году, HTML 5.3 (с такими предполагаемыми функциями, как автоматическое преобразование в верхний регистр), все еще находящейся в стадии планирования с 2020 года, и т.д. К некоторым наиболее ярким свойствам HTML5, позволяющим управлять медиаресурсами, можно отнести элементы <audio>, <video> и <canvas>, с помощью которых происходит добавление звука, видео и усовершенствованной графики. Все, что нужно знать об этих и всех других аспектах HTML5, весьма подробно изложено в данной книге, начиная с главы 25.
Кроме всего прочего, мне в спецификации 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 в заключительной главе данной книги будет рассмотрено создание примера сайта простой социальной сети, обладающего полноценной адаптивностью и обеспечивающего качественное отображение на экранах любых устройств, начиная с небольших мобильных телефонов и заканчивая планшетными или настольными компьютерами. Мы могли бы с таким же успехом использовать React или другие библиотеки или фреймворки JavaScript, но, возможно, вам захочется выполнить это упражнение самостоятельно, как только вы закончите читать книгу.
Несколько слов о программах с открытым исходным кодом
Технологии, рассматриваемые в данной книге, основаны на использовании открытого кода: чтение кода и внесение в него изменений носит общедоступный характер. Часто спорят, обусловлена или нет популярность этих технологий тем, что они представлены программами с открытым исходным кодом, но PHP, MySQL и Apache действительно являются наиболее востребованными инструментами в своих категориях. Вполне определенно можно сказать, что их принадлежность к продуктам с открытым кодом означает, что они были разработаны в сообществе команд программистов, которые придавали им свойства в соответствии со своими желаниями и потребностями и хранили исходный код доступным для всеобщего просмотра и изменения. Ошибки и бреши в системе безопасности могут быть быстро распознаны и предотвращены еще до их проявления.
Есть и еще одно преимущество: все эти программы могут использоваться бесплатно. Если вы наращиваете пропускную способность своего сайта и привлекаете к его обслуживанию различные серверы, не нужно задумываться о приобретении дополнительных лицензий. Не нужно также пересматривать свой бюджет перед тем, как принять решение об обновлении системы и установке самых последних версий этих продуктов.
Сочетаем все технологии
Истинная красота PHP, MySQL, JavaScript (иногда при содействии React или других сред), CSS и HTML5 проявляется в том замечательном способе, благодаря которому они совместно работают над производством динамического веб-контента: PHP занят основной работой на веб-сервере, MySQL управляет данными, а CSS и JavaScript вместе заботятся о представлении веб-страницы. JavaScript может также взаимодействовать с вашим PHP-кодом на веб-сервере, когда ему нужно что-нибудь обновить (как на сервере, так и на веб-странице). И с новыми, высокоэффективными свойствами HTML5, такими как холсты, аудио, видео и геолокация, можно придать вашим веб-страницам более высокую динамичность, интерактивность и мультимедийность.
Неплохо бы теперь подвести краткий итог всему, что изложено в данной главе, и, не пользуясь программным кодом, рассмотреть процесс, сочетающий в себе некоторые из этих технологий в повседневно использующейся многими сайтами функции асинхронного обмена данными: проверке в процессе регистрации новой учетной записи, не занято ли выбранное имя другим посетителем сайта. Хорошим примером подобного использования технологий может послужить почтовый сервер Gmail (рис. 1.3).
Этот асинхронный процесс состоит из следующих шагов.
1. Сервер выдает код HTML для создания веб-формы, запрашивающей необходимые данные: имя пользователя, настоящее имя, настоящую фамилию и адрес электронной почты.
2. Одновременно с этим сервер вкладывает в HTML JavaScript-код, позволяющий отслеживать содержимое поля ввода имени пользователя и проверять два обстоятельства: введен ли в это поле какой-нибудь текст и был ли фокус ввода перемещен из этого поля по щелчку пользователя на другом поле ввода.
3. Как только будет введен текст и фокус ввода перемещен на другой элемент формы, код JavaScript в фоновом режиме передает введенное имя пользователя PHP-сценарию на веб-сервере и ждет ответной реакции.
4. Веб-сервер осуществляет поиск имени пользователя и возвращает коду JavaScript ответ, в котором сообщает, было ли уже задействовано такое же имя.
Рис. 1.3. Gmail применяет технологию асинхронного обмена данными для проверки допустимости пользовательских имен
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 или React, играет столь важную роль в разработке современных веб-сайтов и веб-приложений?
Ответы на эти вопросы можно найти в приложении.
Глава 2. Установка сервера, предназначенного для разработки
Если у вас есть желание разрабатывать интернет-приложения, но нет собственного сервера для их разработки, то прежде, чем протестировать каждую созданную модификацию приложения, вам придется загружать ее на сервер, находящийся где-нибудь в интернете.
Даже при наличии высокоскоростного широкополосного подключения это обстоятельство может существенно замедлить разработку. А на локальном компьютере тестирование может быть не сложнее обновления программы (зачастую запускается простым щелчком на значке) с последующим нажатием кнопки Refresh (Обновить) в браузере.
Еще одно преимущество разработочного сервера заключается в том, что при написании и тестировании программ не нужно волноваться о смущающих разработчика ошибках или проблемах безопасности, однако при размещении приложения на публичном сайте следует знать о том, что люди могут увидеть, или о том, что они могут сделать с вашим приложением. Лучше решить все проблемы, пока вы работаете дома или в небольшом офисе, который, вероятнее всего, защищен межсетевыми экранами (брандмауэрами) и другими средствами обеспечения безопасности.
Получив в свое распоряжение разработочный сервер, вы удивитесь, как раньше могли обходиться без него, а также обрадуетесь легкости его настройки. Нужно лишь пройти все шаги, изложенные в следующих разделах, и выполнить соответствующие указания для обычных персональных компьютеров, macOS- или 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-серверов, каждый из которых предлагает свою, немного отличающуюся от других конфигурацию. Среди различных бесплатных вариантов с открытым кодом самым лучшим будет AMPPS1. Его можно загрузить с главной страницы сайта http://ampps.com (рис. 2.1). (Доступны также версии для Mac и Linux; см. «Установка AMPPS на macOS» и «Установка LAMP в Linux».)
Рис. 2.1. Веб-сайт AMPPS
Совсем недавно в Chrome вышло обновление, запрещающее загрузку из смешанных источников (например, из файла по адресу http:// с веб-страницы https://). Вполне вероятно, что другие браузеры также станут придерживаться этой инициативы по обеспечению безопасности. В настоящее время веб-сайт AMPPS использует смешанные источники, и вы можете столкнуться с этой проблемой. Выход заключается в том, чтобы не отменять загрузку, когда Chrome (или другой браузер) выведет запрос «Безопасная загрузка AMPPS невозможна», а выбрать опцию Продолжить — загрузка возобновится. Кроме того, вы щелкаете на ссылке для загрузки, но ничего не происходит, и чтобы начать загрузку, вам придется щелкнуть на ней правой кнопкой мыши и выбрать Сохранить как.
Я рекомендую вам всегда загружать последний стабильный выпуск (на момент написания этих строк им был выпуск с номером 3.9 объемом около 114 Мбайт). На странице загрузки перечислены различные установщики для Windows, macOS и Linux.
Когда это издание выйдет в свет, некоторые виды экранов и настройки, рассмотренные далее, наверняка изменятся. Если это произойдет, руководствуйтесь здравым смыслом и постарайтесь выполнить все действия как можно ближе к описываемой последовательности.
Запустите установщик после его загрузки, чтобы появилось окно, показанное на рис. 2.2. Если вами используется антивирусная программа или в Windows активировано управление учетными записями (Account Control), то прежде чем вы перейдете к этому окну, вам может быть показано одно или несколько предупреждений и для продолжения установки придется нажать кнопки Yes (Да) и (или) OK.
Рис. 2.2. Открытое окно установщика
Нажмите кнопку Next (Далее), после чего нужно будет принять соглашения. Нажмите кнопку Next (Далее) еще раз, а затем еще раз, чтобы пройти через информационный экран. После этого понадобится подтвердить место установки. Вероятнее всего, вам будет предложено что-нибудь вроде следующего местоположения, в зависимости от буквы вашего основного жесткого диска, но при желании в этот путь можно внести изменения:
C:\Program Files (x86)\Ampps
Далее вы должны принять соглашения на следующем экране и нажать кнопку Next (Далее). Затем, прочитав информационную сводку, нажмите кнопку Next (Далее) еще раз, и вас спросят, в какую папку вы хотите установить AMPPS.
Когда вы решите, куда устанавливать AMPPS, нажмите кнопку Next (Далее), определите, где будете сохранять ярлыки (отображаемое по умолчанию место обычно вполне подходит), и снова нажмите кнопку Next (Далее), чтобы выбрать, какие ярлыки хотите установить, как показано на рис. 2.3. Чтобы продолжить процесс установки, на следующем экране нажмите кнопку Install (Установить).
Рис. 2.3. Выбор устанавливаемых значков
Установка займет несколько минут, после чего откроется окно завершения процесса, показанное на рис. 2.4, и появится возможность нажать кнопку Finish (Завершить).
Рис. 2.4. Среда AMPPS установлена
Рис. 2.5. Установите среду Visual C++ Redistributable, если она еще не была установлена
В завершение нужно установить среду Microsoft Visual C++ Redistributable, если вы не установили ее ранее. В этой среде будет вестись разработка программных средств. В качестве приглашения на установку появится окно, показанное на рис. 2.5. Нажмите кнопку Yes (Да) для запуска установки или кнопку No (Нет), если уверены в том, что эта среда уже установлена. В любом случае вы всегда можете продолжить, и вам сообщат, если ее не нужно переустанавливать.
Если выбрать установку среды, придется согласиться с условиями, предлагаемыми в появившемся окне, после чего нажать кнопку Install (Установить). Установка не займет много времени. Для ее завершения нужно будет нажать кнопку Close (Закрыть).
После установки среды AMPPS в правом нижнем углу экрана должно появиться окно управления, показанное на рис. 2.6. Это окно можно также вызвать, воспользовавшись ярлыками приложения AMPPS в меню Пуск или на Рабочем столе, если ранее давалось разрешение на их создание.
Если у вас еще остались какие-либо вопросы, рекомендуется, прежде чем продолжать работу, ознакомиться с документацией AMPPS (http://ampps.com/wiki). В противном случае можете вернуться к работе — вы всегда можете воспользоваться ссылкой Support (Поддержка), находящейся в нижней части окна управления. Щелкнув на ней, вы перейдете на сайт AMPPS, где можно будет при необходимости открыть тематическую подсказку.
Нетрудно заметить, что в качестве исходной в AMPPS используется версия PHP с номером 7.3. Если вы по какой-либо причине хотите попробовать версию 5.6, нажмите кнопку Options (Настройки) (в виде девяти белых квадратиков, образующих большой квадрат) в окне управления AMPPS, а затем выберите пункт изменения версии Change PHP Version. Появится новое меню с возможностью выбора версии в диапазоне от 5.6 до 7.3.
Рис. 2.6. Окно управления средой AMPPS
Тестирование установки
На данном этапе нужно проверить, что все работает должным образом. Для этого потребуется ввести любой из следующих URL-адресов в адресную строку браузера:
localhost
127.0.0.1
В результате будет вызван начальный экран, позволяющий провести настройку безопасности работы в среде AMPPS с помощью задания пароля (рис. 2.7). Рекомендую не устанавливать флажок безопасности и просто нажать кнопку Submit (Отправить), чтобы продолжить работу без установки пароля.
Совершив это действие, вы попадете на главную страницу управления localhost/ampps/ (с этого момента предполагается, что обращение к AMPPS происходило через адрес localhost, а не через 127.0.0.1). На ней можно вести настройку и управление всеми аспектами компонентов AMPPS, что следует отметить для будущих ссылок или, может быть, установить закладку в вашем браузере.
Далее, чтобы увидеть корневой каталог документа вашего нового веб-сервера Apache (рассматриваемый в следующем разделе), наберите данный адрес:
localhost
Рис. 2.7. Начальный экран настройки безопасности
На этот раз вместо перехода на начальный экран настройки безопасности на экран будет выведена страница, похожая на ту, что показана на рис. 2.8.
Рис. 2.8. Просмотр корневого каталога документа
Обращение к исходному источнику документов (Windows)
Исходным источником документов является каталог, в котором содержатся главные веб-документы домена. Именно он используется сервером, когда в браузере набирается базовый URL без пути, например http://yahoo.com или — на локальном сервере — http://localhost.
По умолчанию AMPPS использует для этого каталога следующее место:
C:\Program Files\Ampps\www
Теперь, чтобы убедиться в том, что все сконфигурировано должным образом, напишем тестовую программу Hello World. Создайте небольшой HTML-файл со следующими строками, воспользовавшись Блокнотом (или Notepad++ в Windows, или Atom на Mac, или любой другой из множества доступных на ваш выбор, но не выбирайте солидные текстовые редакторы, такие как 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):
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).
Вполне вероятно, что пока данное издание будет самым последним, разработчики AMPPS могут внести в свой продукт ряд усовершенствований, в силу чего экраны и методы установки со временем могут претерпеть изменения, а кроме того, изменениям могут подвергнуться и версии Apache, PHP или MySQL. Поэтому не подумайте, что что-то не в порядке с выводимой на экран информацией и операции выглядят как-то по-другому. Разработчики AMPPS прилагают все усилия для того, чтобы их продукт оставался легким в использовании, поэтому следуйте любым выводимым на экран приглашениям и обращайтесь к документации, размещаемой на сайте http://ampps.com/.
Установка AMPPS в системе macOS
Среда AMPPS может использоваться и в macOS, а загрузить ее можно со страницы http://ampps.com/, которая была показана на рис. 2.1 (как уже говорилось, текущая версия имеет номер 3.0 и ее объем составляет приблизительно 270 Мбайт).
Если ваш браузер после загрузки не откроет среду в автоматическом режиме, дважды щелкните на файле с расширением .dmg, после чего перетащите папку AMPPS на свою папку Applications (Приложения) (рис. 2.10).
Рис. 2.10. Перетащите папку AMPPS на папку Applications (Приложения)
Теперь откройте свою папку Applications (Приложения) и дважды щелкните на программе AMPPS. Если ваши настройки безопасности воспрепятствуют открытию файла, нажмите и удерживайте клавишу Control, однократно щелкнув на значке. Будет выведено новое окно с запросом подтверждения на открытие файла программы. Чтобы открыть файл, нажмите кнопку Open (Открыть). Возможно, после запуска приложения для продолжения работы придется ввести ваш пароль на macOS.
После того как среда AMPPS войдет в рабочий режим, в левом нижнем углу вашего рабочего стола появится окно управления, похожее на то, что изображено на рис. 2.6.
Нетрудно заметить, что в качестве исходной в AMPPS используется версия PHP с номером 7.3. Если по какой-то причине вам нужно попробовать версию 5.6, щелкните в окне управления AMPPS на кнопке настроек (в виде девяти белых квадратиков, образующих большой квадрат), после чего выберите пункт изменения версии, Change PHP Version, вызвав новое меню с возможностью выбора версии в диапазоне от 5.6 до 7.3.
Обращение к исходному источнику документов (macOS)
По умолчанию корневой каталог документов AMPPS будет размещаться по следующему адресу:
/Applications/Ampps/www
Теперь, чтобы убедиться в правильности всех настроек, следует создать общепринятый файл "HelloWorld". Поэтому воспользуйтесь программой простого текстового редактора, но не солидным текстовым процессором вроде Microsoft Word, и создайте небольшой HTML-файл, состоящий из следующих строк:
<!DOCTYPE html>
<html lang="en">
<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 может устанавливаться со своими особенностями, поэтому невозможно осветить их все в этой книге. Однако существует версия AMPPS, доступная для Linux, и она, вероятно, станет для вас самым простым вариантом.
Но нужно упомянуть, что некоторые версии Linux поступают с предустановленным веб-сервером и MySQL, поэтому есть вероятность, что у вас уже все готово к работе. Чтобы понять, так ли это, попробуйте ввести в браузер следующий адрес и посмотрите, получите ли вы веб-страницу, используемую по умолчанию в исходном источнике документов:
localhost
Если все заработает, то у вас, наверное, установлен сервер Apache, а также может быть установлена и запущена база данных MySQL, но чтобы окончательно удостовериться в этом, проверьте факт их установки вместе со своим системным администратором.
Если веб-сервер не установлен, можете воспользоваться версией AMPPS, которую можно загрузить со страницы http://ampps.com/.
Последовательность установки похожа на ту, которая рассматривалась в предыдущем разделе. Если нужна дополнительная подсказка по использованию программного продукта, обратитесь к документации, размещенной по адресу http://ampps.com/wiki.
Работа в удаленном режиме
Если есть доступ к веб-серверу, на котором уже имеются сконфигурированные PHP и MySQL, то вы всегда можете применить его для веб-разработок. Но это не самый лучший вариант, если только вы не пользуетесь высокоскоростным подключением. Разработка, выполняемая на локальной машине, позволяет протестировать новые модификации практически без задержки или с небольшой задержкой на загрузку.
Может вызвать трудности и удаленный доступ к MySQL. Чтобы зарегистрироваться на сервере для создания баз данных вручную и установки прав доступа из командной строки, нужно воспользоваться безопасным SSH-протоколом. Компания, предоставляющая веб-хостинг, посоветует, как это можно сделать наилучшим образом, и предоставит пароль для доступа к MySQL (а в первую очередь, разумеется, для доступа к самому серверу). Я рекомендую никогда не пользоваться небезопасным протоколом Telnet для удаленного входа на любой сервер.
Вход в систему
Я рекомендую пользователям Windows как минимум установить программу PuTTY (http://putty.org/) для доступа к Telnet и SSH (следует помнить, что уровень безопасности у SSH значительно выше, чем у Telnet).
На компьютере Mac система SSH будет доступна изначально. Нужно только выбрать папку Applications, перейти к папке Utilities, а затем запустить программу Terminal. В окне терминала нужно войти на сервер, используя SSH в следующей команде:
где server.com — это имя сервера, на который необходимо войти, а mylogin — имя пользователя, под которым нужно войти в систему. Затем система запросит у вас пароль для данного имени пользователя, и если вы введете правильный пароль, вход состоится.
Использование SFTP или FTPS
Для переноса файлов на веб-сервер и обратно обычно требуется программа FTP, SFTP или FTPS. Хотя FTP не является защищенным протоколом, программное обеспечение, которое помогает вам загружать и скачивать файлы, по-прежнему часто называют FTP, но для обеспечения должной безопасности на своем веб-сервере вам нужно использовать FTPS или SFTP. Если вы начнете искать в интернете подходящую, то найдете так много программ, что может потребоваться довольно много времени, чтобы подобрать ту, у которой есть все необходимые функции.
Не пользуйтесь FTP
FTP небезопасен и не должен применяться. Существуют гораздо более безопасные методы передачи файлов, чем FTP, такие как Git или аналогичные технологии. Кроме того, набирает обороты SFTP (протокол безопасной передачи файлов) на основе SSH и SCP (протокол безопасного копирования). Хороши FTP-программы, однако они также будут поддерживать SFTP и FTPS (FTP-SSL). Часто используемые вами средства передачи файлов зависят от политики компании, в которой вы работаете, но для личного использования программы FTP, такие как FileZilla (обсуждается далее), обеспечат большую часть необходимой вам функциональности и безопасности, если не все.
Я предпочитаю пользоваться FTP/SFTP-программой FileZilla (http://filezilla-project.org/), имеющей открытый код и версии для Windows, Linux и macOS 10.5 и выше (рис. 2.11). Подробные инструкции по работе с FileZilla доступны по адресу http://wiki.filezilla-project.
Разумеется, если у вас уже есть программа FTP или SFTP, можете использовать ее.
Использование редактора кода
Хотя для редактирования HTML, PHP и JavaScript подходит любой текстовый редактор, существуют очень удобные приложения, специально предназначенные для редактирования кода. В них имеются весьма полезные возможности, например цветная подсветка синтаксиса. Современные редакторы программ хорошо продуманы и могут еще до запуска программы на выполнение показывать места, в которых допущены синтаксические ошибки. Перейдя
Рис. 2.11. FileZilla является полнофункциональной FTP-программой
к использованию современного редактора, вы поразитесь тому, насколько он удобен для работы..
Есть множество хороших и доступных программ, но я остановил свой выбор на программе Visual Studio Code (VSC) от Microsoft, поскольку она мощная, доступна для всех Windows, Mac и Linux и распространяется бесплатно (рис. 2.12). Конечно, у каждого свой стиль и предпочтения в программировании, поэтому, если данный редактор вас не устраивает, можете выбрать что-либо из множества других доступных редакторов кода. А возможно, вы захотите перейти непосредственно в интегрированную среду разработки (IDE) в соответствии с описанием, приведенным в следующем разделе.
VSC, как показано на рис. 2.12, выделяет синтаксис, используя соответствующие цвета, что очень удобно. Можно поместить курсор за квадратными или фигурными скобками, и программа подсветит соответствующую парную скобку, давая возможность определить лишние или недостающие скобки. В VSC предлагается также множество других свойств, облегчающих работу с текстом программы. Вы можете скачать копию на https://code.visualstudio.com/.
Опять же, если вы предпочитаете какую-нибудь другую программу-редактор, воспользуйтесь ею, поскольку всегда лучше работать с теми программами, с которыми вы уже знакомы.
Рис. 2.12. Программы-редакторы (подобные Visual Studio Code) превосходят по своим возможностям обычные текстовые редакторы
Использование интегрированных сред разработки
При всех достоинствах специализированных редакторов программ, позволяющих повысить производительность труда программиста, они не могут сравниться с интегрированными средами разработки (IDE). IDE предлагает множество дополнительных возможностей, например проведение отладки и тестирования программ прямо в редакторе, а также отображение описаний функций и многое другое, хотя в настоящее время эти функции постепенно внедряются в некоторые редакторы кода, такие как ранее рекомендованный VSC.
На рис. 2.13 показана популярная среда разработки Eclipse IDE с несколькими HTML, которые загружены в основной фрейм, что позволяет вам работать с PHP, JavaScript, а также другими типами файлов.
При разработке продукта в IDE можно установить контрольные точки, а затем запустить весь код целиком (или по частям), тогда его выполнение будет останавливаться в контрольных точках и вам будет предоставляться информация о текущем состоянии программы.
Рис. 2.13. При использовании интерфейса разработка кода идет намного быстрее и проще
Помочь изучению процесса создания программ может то, что приводимые в данной книге примеры могут быть введены в IDE и запущены в этой среде, — тогда вызывать браузер уже не понадобится.
Существует несколько интегрированных сред разработки, доступных для различных платформ. В табл. 2.1 приведены некоторые наиболее популярные бесплатные интегрированные среды разработки PHP-программ и URL-адреса, с которых их можно загрузить.
Таблица 2.1. Подборка бесплатных интерфейсов
IDE
URL-адрес загрузки
Win
macOS
Linux
Eclipse PDT
http://eclipse.org/pdt/downloads/
√
√
√
NetBeans
http://www.netbeans.org
√
√
√
Visual Studio
https://code.visualstudio.com/
√
√
√
Потратьте время на установку удобного с вашей точки зрения редактора кода или IDE, и тогда вы будете готовы опробовать в работе примеры, приводимые в следующих главах.
Теперь, вооружившись редактором программ или IDE, вы готовы к переходу к главе 3, в которой начнется углубленное изучение PHP и совместной работы HTML и PHP, а также структуры самого языка PHP. Но перед тем как перейти к этой главе, я предлагаю проверить полученные вами знания и ответить на следующие вопросы.
Вопросы
1. В чем разница между WAMP, MAMP и LAMP?
2. Что общего у IP-адреса 127.0.0.1 и URL-адреса http://localhost?
3. Для чего предназначена FTP-программа?
4. Назовите основной недостаток работы на удаленном веб-сервере.
5. Почему лучше воспользоваться редактором программ, а не обычным текстовым редактором?
Ответы на эти вопросы можно найти в приложении.
1 С января 2022 года автор рекомендует вместо AMPPS использовать программу Mamp как для Windows, так и для MacOS. В следующем издании книги будет добавлено пошаговое руководство по работе с этой программой. Таким образом, если у вас возникнут трудности с использованием Ampps, рекомендуется перейти по следующему URL-адресу и загрузить Mamp: https://www.mamp.info/en/downloads/. — Примеч. ред.
