Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5. 3-е издание

Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript, CSS и HTML5. 3-е издание
Автор: Робин Никсон
Год: 2015
ISBN: 978-5-496-01441-0
Страниц: 688
Язык: Русский
Формат: PDF
Размер: 14 Мб

Download

Научитесь создавать интерактивные сайты, активно работающие с данными, воплощая в них мощные комбинации свободно распространяемых технологий и веб-стандартов. Для этого достаточно обладать базовыми знаниями языка HTML. Это популярное и доступное пособие поможет вам уверенно освоить динамическое веб-программирование с применением самых современных языков и технологий: PHP, MySQL, JavaScript, CSS и HTML5.
С каждой из упомянутых технологий вы познакомитесь отдельно, научитесь применять их в комбинации друг с другом, а по ходу изложения освоите ценные практические приемы веб-программирования. В конце книги весь изученный материал будет обобщен: вы создадите полнофункциональный сайт, работающий по принципу социальной сети.

  • Изучите важнейшие аспекты языка PHP и основы объектно-ориентированного программирования.
  • Откройте для себя базу данных MySQL
  • Управляйте cookie-файлами и сеансами, обеспечивайте высокий уровень безопасности.
  • Пользуйтесь фундаментальными возможностями языка JavaScript
  • Применяйте вызовы AJAX, чтобы значительно повысить динамику вашего сайта.
  • Изучите основы CSS для форматирования и оформления ваших страниц.
  • Познакомьтесь с возможностями HTML5: геолокацией, работой с аудио и видео, холстом.
+

Преимущества использования 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, в настоящее время берет на себя наиболее трудоемкие задачи осуществления AJAX-процесса на стороне клиента. Благодаря технологии AJAX веб-страницы обрабатывают данные и отправляют запросы веб-серверу в фоновом режиме, не оповещая пользователя о происходящем.

Несомненно, своеобразный симбиоз PHP и MySQL способствует их продвижению, но что привлекает к ним разработчиков в первую очередь? На это следует дать простой ответ: та легкость, с которой эти технологии можно использовать для быстрого создания на сайтах динамических элементов. MySQL является быстродействующей и мощной, но при этом простой в использовании системой
базы данных, предлагающей сайту практически все необходимое для поиска и обработки данных, которые предназначены для браузеров. Когда PHP для хранения и извлечения этих данных выступает в союзе с MySQL, вы получаете основные составляющие, необходимые для разработки сайтов социальных сетей и для перехода к технологии Web 2.0.

И когда вы также соедините вместе JavaScript и CSS, у вас появится рецепт для создания высокодинамичных и интерактивных сайтов.

PHP

Использование PHP существенно упрощает встраивание средств, придающих веб-страницам динамические свойства. Когда страницам присваивается расширение PHP, у них появляется прямой доступ к языку сценариев. Разработчику нужно лишь написать код, похожий на этот:

<?php
echo " Today is " . date("l") . ". ";
?>

Here’s the latest news.

Открывающий тег <?phpдает веб-серверу разрешение на интерпретацию всего последующего кода вплоть до тега ?>. Все, что находится за пределами этой конструкции, отправляется клиенту в виде простого HTML. Поэтому текст Here’s the latest news просто выводится в браузере. А внутри 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', 'jsmith@mysite.com');

Разумеется, как упоминалось ранее, для создания базы данных и таблицы, а также настройки всех нужных полей понадобится выдать и другие команды, но используемая здесь команда INSERTдемонстрирует простоту добавления в базу данных новой информации. Команда INSERTявляется примером структурированного языка запросов (Structured Query Language (SQL)), разработанного в начале 1970-х годов и напоминающего один из старейших языков программирования — COBOL. Тем не менее он хорошо подходит для запросов к базе данных, что и предопределило его использование в течение столь длительного времени.

Так же просто выполняется и поиск данных. Предположим, что имеется адрес электронной почты пользователя и нужно найти имя его владельца. Для этого можно ввести следующий запрос MySQL:

SELECT surname,firstname FROM users WHERE email='jsmith@mysite.com';

После этого MySQL вернет Smith, Johnи любые другие пары имен, которые могут быть связаны в базе данных с адресом электронной почты.

Нетрудно предположить, что возможности MySQL простираются значительно дальше выполнения простых команд вставки и выбора — INSERTи SELECT. Например, можно объединить несколько таблиц в соответствии с множеством различных критериев, запросить результаты, выбрав порядок их выдачи из множества вариантов, найти частичные совпадения, если известна только часть искомой строки, вернуть конкретно заданное количество результатов и сделать многое другое.

При использовании PHP все эти вызовы можно направлять непосредственно к MySQL, без необходимости запуска самой программы MySQL или использования ее интерфейса командной строки. Это значит, что для того, чтобы докопаться до нужного вам элемента данных, вы можете сохранять результаты в массивах для их обработки и осуществления множества поисковых операций, каждая из которых зависит от результатов, возвращенных предыдущими операциями.

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

JavaScript

Самая старая из трех основных технологий, рассматриваемых в данной книге, —  JavaScript — была создана для получения доступа из сценариев ко всем элементам HTML-документа. Иными словами, она предоставляет средства для динамического взаимодействия с пользователем, например для проверки приемлемости адресов электронной почты в формах ввода данных, отображения подсказок наподобие «Вы действительно подразумевали именно это?» и т. д. (хотя с точки зрения безопасности, которая всегда должна реализовываться на веб-сервере, на эту технологию положиться нельзя).

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

А сейчас взглянем на то, как можно воспользоваться обычным JavaScript-кодом, воспринимаемым всеми браузерами:

<script type="text/javascript">
document.write("Today is " + Date() );
</script>

Этот фрагмент кода предписывает браузеру интерпретировать все, что находится внутри тегов script, в качестве кода JavaScript, что затем браузер и сделает, записав в текущий документ текст «Today is », а также дату, полученную за счет использования принадлежащей JavaScript функции Date. В результате получится нечто подобное следующему:

Today is Sun Jan 01 2017 01:23:45

Если не требуется указывать конкретную версию JavaScript, то, как правило, можно опустить type=”text/javascript” и использовать для начала интерпретации JavaScript тег <script>.

Ранее было упомянуто, что изначально JavaScript разрабатывался для того, чтобы получить возможность динамического управления различными элементами, находящимися внутри HTML-документа, и это его предназначение по-прежнему является основным. Но все чаще JavaScript применяется для реализации технологии AJAX. Это понятие используется для обозначения процессов доступа к веб-серверу в фоновом режиме. (Сначала оно означало «асинхронный JavaScript и XML» — Asynchronous JavaScript and XML, но сейчас это определение несколько устарело.)

AJAX — процесс, лежащий в основе технологии Web 2.0 (этот термин популяризирован Тимом О’Рейли, основателем и исполнительным директором издательства, в котором эта книга вышла на английском языке), при использовании которой веб-страницы стали напоминать автономные программы, поскольку их уже не нужно загружать целиком. Вместо этого в быстром вызове AJAX может быть задействован отдельный элемент веб-страницы, например, может быть изменена ваша фотография на сайте социальной сети или заменена кнопка, на которой нужно щелкнуть, отвечая на вопрос. Полностью эта тема будет рассмотрена в главе 18.

CSS

После появления третьего стандарта (CSS3) CSS предлагает уровень динамической интерактивности, которая прежде поддерживалась только с помощью JavaScript. Например, вы можете не только придать стиль любому элементу HTML, чтобы изменить его размеры, цвета, границы, интервалы, но и, используя всего лишь несколько строк CSS, добавить своим веб-страницам анимированные переходы и преобразования.

Применение CSS может просто заключаться во вставке правил между тегами <style>и </style>, расположенными в заголовке веб-страницы:

<style>
p
{
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 вплоть до публикации данного издания этой книги, то есть в конце 2014 года, не ожидалось. Догадайтесь почему. Начиная с 2015 года работа уже пойдет над версиями от 5.1 и выше. Таким образом нас ожидает бесконечный цикл разработки.

Но, хотя в HTML5.1 планируется привнесение в язык множества удобных усовершенствований (в основном это касается холстов), основной HTML5 является именно тем новым стандартом веб-разработок, с которым сейчас уже нужно работать, и он никуда не денется в течение многих грядущих лет. Поэтому сейчас о нем нужно знать все, что возможно, и это станет для вас очень весомым подспорьем.

Это стандарт действительно внес в HTML много нового (при весьма скромном объеме измененных или удаленных прежних свойств), но, если говорить вкратце, с его появлением вы получаете следующее:

  • разметку. Включены такие новые элементы, как <nav>и <footer>, а в разряде нерекомендуемых теперь числятся такие элементы, как <font>и <center>;
  • новые API. Например, элемент <canvas>(холст) для записи и рисования на графических холстах, элементы <audio>и <video>, автономные веб-приложения, микроданные и локальное хранилище
  • приложения. Включены две новые технологии отображения: MathML (Math Markup Language — язык математической разметки) для вывода на экран математических формул) и SVG (Scalable Vector Graphics — масштабируемая векторная графика) для создания графических элементов за пределами нового элемента <canvas>. Но MathML и SVG носят специализированный характер и содержат столько особенностей, что для их описания потребуется отдельная книга, поэтому здесь они рассматриваться не будут. Все это (и не только) будет рассмотрено в главе 22.

Кроме всего прочего, мне в спецификации HTML5 нравится, что для самозакрывающихся элементов больше не нужен синтаксис XHTML. Раньше перевод на новую строку можно было изобразить с помощью элемента <br>. Затем для обеспечения совместимости в будущем с XHTML (так и не состоявшейся заменой HTML) элемент был изменен на <br /> с добавленным символом / (поскольку ожидалось, что характерной особенностью закрывающего тега всех элементов станет именно этот символ). Но теперь все вернулось на круги своя и можно использовать любую из версий таких элементов. Итак, для большей лаконичности
и меньшего объема набираемого текста в данной книге я вернулся к прежнему стилю — <br>, <hr> и т. д.

Веб-сервер Apache

В дополнение к PHP, MySQL, JavaScript, CSS и HTML5 в динамической веб-технологии фигурирует и шестой герой — веб-сервер. В нашей книге предполагается, что это веб-сервер Apache. Мы уже немного касались того, что делает веб-сервер в процессе обмена информацией между клиентом и сервером по протоколу HTTP, но на самом деле негласно он выполняет куда более масштабную работу.

Например, Apache обслуживает не только HTML-файлы — он работает с широким спектром файлов, начиная с файлов изображений и Flash-роликов и заканчивая аудиофайлами формата MP3, файлами RSS-потоков (Really Simple Syndication — простое распространение по подписке) и т. д. Для этого каждый элемент, найденный на HTML-странице веб-клиентом, также запрашивается у сервера, который затем и осуществляет обслуживание.

Но эти объекты не должны быть статическими файлами, такими как изображения GIF-формата. Все они могут быть сгенерированы программами, такими как сценарии PHP. И это действительно возможно: PHP способен даже создавать для вас изображения и другие файлы либо на лету, либо заранее, в расчете на последующее обслуживание. Для этого обычно имеются модули, либо предварительно скомпилированные в Apache или PHP, либо вызываемые во время выполнения программы. Одним из таких модулей является библиотека GD (Graphics Draw — рисование графики), которую PHP использует для создания и обработки графических элементов.

Apache поддерживает также обширный арсенал собственных модулей. В дополнение к модулям PHP наиболее важными для вас, как для веб-программиста, будут модули, занимающиеся обеспечением безопасности. В качестве других примеров могут послужить модуль Rewrite, позволяющий веб-серверу обрабатывать широкий диапазон типов URL-адресов и перезаписывать их в соответствии с его внутренними требованиями, и модуль Proxy, который можно использовать для обслуживания часто запрашиваемых страниц из кэша, для того чтобы снизить нагрузку на сервер.

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

А теперь все это, вместе взятое

Истинная красота PHP, MySQL, JavaScript, CSS и HTML5 проявляется в том замечательном способе, благодаря которому они совместно работают над производством динамического веб-контента: PHP занят основной работой на веб-сервере, MySQL управляет данными, а CSS и JavaScript вместе заботятся о представлении веб-страницы. JavaScript может также взаимодействовать с вашим PHP-кодом на веб-сервере, когда ему нужно что-нибудь обновить (как на сервере, так и на веб-странице). И с новыми, высокоэффективными свойствами HTML5, такими как холсты, аудио, видео и геолокация, можно придать вашим веб-страницам более высокую динамичность, интерактивность и мультимедийность.

Неплохо бы теперь подвести краткий итог всему, что изложено в данной главе, и, не пользуясь программным кодом, рассмотреть процесс, сочетающий в себе некоторые из этих технологий в повседневно использующейся многими сайтами функции AJAX: проверке в процессе регистрации новой учетной записи, не занято ли выбранное имя другим посетителем сайта. Хорошим примером подобного использования технологий может послужить почтовый сервер Gmail (рис. 1.3).


Рис. 1.3.Gmail применяет технологию AJAX для проверки допустимости пользовательских имен

Этот AJAX-процесс состоит примерно из следующих шагов.

1. Сервер выдает код HTML для создания веб-формы, запрашивающей необходимые данные: имя пользователя, настоящее имя, настоящую фамилию и адрес электронной почты.

2. Одновременно с этим сервер вкладывает в HTML JavaScript-код, позволяющий отслеживать содержимое поля ввода имени пользователя и проверять два обстоятельства:

1) введен ли в это поле какой-нибудь текст;
2) был ли фокус ввода перемещен из этого поля по щелчку пользователя на другом поле ввода.

3. Как только будет введен текст и фокус ввода перемещен на другой элемент формы, код JavaScript в фоновом режиме передает введенное имя пользователя PHP-сценарию на веб-сервере и ждет ответной реакции.

4. Веб-сервер осуществляет поиск имени пользователя и возвращает коду JavaScript ответ, в котором сообщает, было ли уже задействовано такое же имя.

5. Затем JavaScript размещает под полем ввода имени пользователя индикатор приемлемости имени пользователя, возможно, в виде зеленой галочки или красного крестика, сопровождая его текстом.

6. Если пользователь ввел неприемлемое имя, но все же пытается отправить форму, код JavaScript прерывает отправку и повторно обращает внимание пользователя (возможно, выводя более крупный графический индикатор и/или открывая окно предупреждения) на необходимость выбора другого имени.

7. Усовершенствованная версия этого процесса может даже изучить имя, запрошенное пользователем, и предложить альтернативное доступное на данный момент имя.

Все это для удобства пользователя и целостности восприятия им всего происходящего делается без привлечения его внимания в фоновом режиме. Без использования AJAX на сервер будет отправлена вся форма, затем он вернет код HTML с подсветкой тех полей, в которых были допущены ошибки. Можно, конечно, сделать и так, но обработка поля на лету будет выглядеть намного интереснее и приятнее.

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

В этой главе вашему вниманию было представлено довольно полное введение в основные технологии применения PHP, MySQL, JavaScript, CSS и HTML5 (а также Apache) и рассмотрен порядок их совместной работы. В главе 2 будут рассмотрены способы установки вашего собственного сервера, предназначенного для веб-разработок, на котором можно будет освоить на практике весь изучаемый материал.