Скриптовые языки web-программирования (JavaScript, PHP, html/CSS): учебно-методическое пособие

Citation preview

---

Министерство науки и высшего образования Российской Федерации ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ОБРАЗОВАНИЯ «КАЗАНСКИЙ НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ ТЕХНИЧЕСКИЙ УНИВЕРСИТЕТ им. А.Н. ТУПОЛЕВА-КАИ»

Р.Ш. МИНЯЗЕВ

СКРИПТОВЫЕ ЯЗЫКИ WEB-ПРОГРАММИРОВАНИЯ (JavaScript, PHP, html/CSS) Учебно-методическое пособие

Рекомендовано к изданию Учебно-методическим управлением КНИТУ-КАИ

Казань 2022 1

УДК 681.3 ББК 32.973.26-018.2 М 57 Рецензенты: кафедра «Автоматизированные системы сбора и обработки информации» (Казанский национальный исследовательский технологический университет); кандидат технических наук, доцент М.Ю. Перухин (Казанский национальный исследовательский технологический университет) М 57

Минязев, Р. Ш. Скриптовые языки web-программирования (JavaScript, PHP, html/CSS): учебно-методическое пособие / Р.Ш. Минязев. – Казань: Изд-во КНИТУ-КАИ, 2022. – 60 с. ISBN 978-5-7579-2632-2 Содержит теоретический материал и практические инструкции по выполнению лабораторных работ в рамках дисциплин «Разработка web-систем» и «Скриптовые языки программирования» для студентов направления 09.04.01 «Информатика и вычислительная техника». Рассмотрен стек технологии, используемый при разработке web-сайтов. Представлен теоретический материал по этим технологиям и практические задания по выполнению лабораторного практикума.

Ил.: 5. Библиогр.: 12 назв. УДК 681.3 ББК 32.973.26-018.2

2

ISBN 978-5-7579-2632-2

 Р.Ш. Минязев, 2022  Изд-во КНИТУ-КАИ, 2022

ВВЕДЕНИЕ В рамках учебного курса рассматриваются основные технологии, используемые для web-разработки: html/CSS, JavaScript, PHP, СУБД MySQL, Ajax запросы, библиотека JQuery, JSON формат, отправка почты с сервера, настройка FTP сервера пример работы с VK API. Студенты получат практический опыт использования данных технологии для решения прикладных задач, научатся создавать свои web-сайты и размещать их на сервере под управлением операционной системы (ОС) Linux. Создание высоконагруженных (число пользовательских запросов в секунду более 10 000, объем обрабатываемых данных достигает терабайтных значений) многофункциональных сайтов (webпорталов), связанных с корпоративными хранилищами данных, является актуальной задачей на сегодняшний день. Основной стек технологий, используемый при web-разработке: html/CSS, JavaScript, серверный язык (PHP, Java, Python), реляционная система управления базами данных (СУБД) (MySQL, PostgreSQL, MS SQL). При этом активно используются различные фреймворки и библиотеки (Django, Yii2, Ruby on Rails, JNode, Bootstrap и др.), которые позволяют ускорить процесс разработки за счет упрощения реализации многих задач (авторизация на сайте, пагинация, сессии и пр.). Также возможный подход к построению сайта – это использование готовых CMS (Wordpress, Joomla, 1C-Битрикс и др.), но применять этот подход для долгосрочных серьезных проектов не рекомендуется. 3

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

4

1. УСТАНОВКА UBUNTUSERVER И ПАКЕТА LAMP, ОРГАНИЗАЦИЯ ВИРТУАЛЬНЫХ ХОСТОВ У каждого web-сайта есть имя (URL), по которому к нему можно получить доступ в Интернете или в локальной сети (например http:// www.kai.ru), и есть физический сервер, как правило, под управлением ОС Linux (в дальнейшем будем называть его машиной), где хранятся все файлы и папки данного сайта и исполняются серверные скрипты сайта (по-другому называется хостингом). На одной машине может работать сразу множество сайтов. На машину устанавливается специальная программа – сервисная служба (web-сервер, как правило, это Apache), которая управляет работой размещенных на машине сайтов и различными параметрами доступа к ним, а также исполнением серверных скриптов. Кроме web-сервера обычно на машину устанавливается какая-либо СУБД для хранения данных сайтов (обычно MySQL) и какой-либо серверный язык программирования (как правило, PHP). Наиболее популярный набор перечисленных программ для работы сайтов, устанавливаемый на сервере под управлением Linux, получил название LAMP (Linux, Apache, MySQL, PHP). Установка этого пакета программ на чистом сервере позволяет разворачивать и программировать на нем свои web-сайты. В данном учебном пособии будем использовать виртуальный физический сервер с установленной ОС Linux-типа Ubuntu Server, который будет работать в рамках программы VirtualBox, установленной на Windows машинах. После установки своего сервера для удобства доступ к нему будем осуществлять по протоколу SSH через программу putty. 5

Альтернативой использования своего физического сервера (в данном случае виртуального) может быть использован пакет разработчика Denwer [1]. Эту программу можно скачать в Интернете и установить на свою Windows машину для того, чтобы выполнять задания курса дома. Для разворачивания реальных проектов интернет-сайтов можно приобрести виртуальный сервер в облаке, например на https:// www.digitalocean.com или на https://aws.amazon.com/ru/free. В этом случае будет виртуальный сервер, доступный через сеть Интернет (физически он может размещаться в стране, которую пользователь сам выберет). Также его можно настраивать из дома через putty либо через удаленный рабочий стол по протоколу RDP, если пользователь возьмет себе виртуальный сервер под управлением Windows Server.

Основные термины Язык гипертекстовой разметки. HyperText Markup Language (HTML) – стандартизированный язык разметки документов во Всемирной паутине. Большинство web-страниц содержат описание разметки на языке HTML (или XHTML). Язык HTML интерпретируется браузерами; полученный в результате интерпретации форматированный текст отображается на экране монитора компьютера или мобильного устройства. На сегодняшний день актуальная версия HTML 5 готовится к выходу HTML 5.1. Страница html состоит из так называемых тегов, которые указывают как отображать содержимое страницы, как правило, теги идут парами, указывая начало блока форматирования и конец блока в документе. Весь документ делится на отдельные блоки, как правило, при помощи тега … . К отдельным блокам HTML документа применяют стили форматирования CSS. Для подробного изучения html можно посетить ресурс: https:// htmlacademy.ru/courses/26. Каскадные таблицы стилей. Cascading Style Sheets (CSS). Набор параметров форматирования, который применяется к элементам документа, чтобы изменить их внешний вид (текст, таблицы, за6

ливки, уровни, выравнивания, анимация элементов, реакция на события-действия пользователя и т.п.). Правила CSS пишутся на формальном языке CSS и располагаются в таблицах стилей, т.е. таблицы стилей содержат в себе правила CSS. Эти таблицы стилей могут располагаться как в самом web-документе, внешний вид которого они описывают, так и в отдельных файлах, имеющих расширение .css. По сути, формат CSS – это обычный текстовый файл. В файле .css не содержится ничего, кроме перечня правил CSS и комментариев к ним. Актуальная версия на сегодняшний день CSS3 (позволяет например делать анимацию на страницах без использования JavaScript), разрабатывается CSS4. Формат CSS может применяться в виде тегов внутри html документа, но, как правило, CSS стили подключаются к HTML документу в виде внешних файлов, например файл CSS подключают так:

Для подробного изучения CSS можно посетить ресурс: https:// htmlacademy.ru/courses/41. Блок CSS-правила. Весь CSS-код состоит из повторяющихся блоков следующего вида: селектор { свойство1: значение; свойство2: значение; } Такой блок называется «CSS-правило». Каждое CSS-правило содержит хотя бы один селектор и свойство. Простейшие селекторы – это селекторы по именам тегов. С их помощью можно задать стили для всех абзацев на странице, для всех ссылок, заголовков первого уровня и т.д. Такие селекторы содержат имя тега без символов < и >. Например: p{ /* стили для абзацев */ } h1 { /* стили для заголовков */ } 7

Продвинутые селекторы. К более сложным можно отнести селекторы с использованием классов и псевдоклассов. Класс позволяет объединять разные элементы в смысловые группы и применять к ним одинаковое оформление. Например, можно создать класс «элементы с ошибкой» и задать ему красный цвет текста. Затем можно добавлять этот класс к любому HTML-тегу: абзацу, заголовку, элементу списка и т.д. Класс тега можно задать с помощью атрибута class, который содержит имя класса (или имена классов через пробел). Пример:

В примере у первого абзаца задан класс help, у второго абзаца заданы классы help и error. Селектор с использованием класса задаётся так: .имя_класса. Например: .help { … } .error { … }. Свойства для задания размеров и отступов. С помощью CSS можно задавать ширину, высоту, внешние и внутренние отступы элементов, минимальную и максимальную ширину и высоту и т.д. Все свойства, которые так или иначе влияют на размеры и отступы элементов, описываются в так называемой «Блочной модели документа». Помимо свойств для отступов и размеров в блочную модель входят свойства для описания границ и очень важное свойство display, которое определяет тип элемента (блочный, строчный и др.). Позиционирование элементов. С помощью позиционирования можно очень точно и гибко управлять расположением элементов. Позиционирование применяют для создания сложных «многослойных» интерфейсов, таких как всплывающие окна или галереи, а также для вёрстки мелких декоративных элементов. Главным свойством для работы с позиционированием является position, который переключает режимы позиционирования элемента. Ещё четыре свойства (top, right, bottom, left) управляют расположением элемента. И последнее свойство z-index управляет порядком слоёв. Создание сетки страницы. Типичный web-сайт состоит из шапки, главного меню, блока с основным содержанием, боковых ко8

лонок, подвала. Эти блоки могут быть расположены друг под другом, в несколько колонок или ещё сложнее. Такое взаимное расположение основных блоков сайта называют «сеткой», или «раскладкой». Сетка может быть фиксированной или тянущейся, когда ширина блоков изменяется в зависимости от ширины браузера. Чтобы быстро и легко создавать сетки, нужно хорошо разбираться в блочной модели и позиционировании. Каскадность. Напомним, что CSS расшифровывается как «каскадные таблицы стилей». Почему именно каскадные? Всё дело в том, что стили для элемента могут быть определены в нескольких местах: внутри одного файла стилей и в разных файлах стилей. Браузер находит все CSS-правила, затрагивающие данный элемент, а затем комбинирует их и получает итоговый список свойств для этого элемента. Комбинирование свойств производится по чётким правилам, которые опираются на приоритетность и специфичность. Название «каскадные» появилось из-за описанного механизма комбинирования стилей из разных CSS-правил. Пример применения нескольких CSS правил каскадом:



Каскадность

Каскадность и просветление

Каскадность — это очень мощный механизм.

Веб-разработчик, постигший тайны каскадности, достигает просветления в вёрстке и становится гуру.

web-разработчик, не стремящийся постигнуть каскадность, так и останется подмастерьем.

9

Содержимое CSS файла: p{ outline: 2px solid rgba(0, 0, 0, 0.1); padding: 10px; } .truth { background-color: #dff0d8; } Результат применения каскадов выглядит следующим образом: каскадность и просветление Каскадность – это очень мощный механизм. Web-разработчик, постигший тайны каскадности, достигает просветления в верстке и становится гуру. Web-разработчик, не стремящийся постигнуть каскадность, так и останется подмастерьем. Адаптивный web-дизайн – дизайн web-страниц, обеспечивающий правильное отображение сайта на различных устройствах, подключённых к Интернету, и динамически подстраивающийся под заданные размеры окна браузера. Целью адаптивного web-дизайна является универсальность отображения содержимого web-сайта для различных устройств (компьютеры, смартфоны, планшеты). Для того чтобы web-сайт был удобно просматриваемым с устройств и с экранов различных разрешений, по технологии адаптивного web-дизайна не нужно создавать отдельные версии web-сайта для отдельных видов устройств. Один сайт может работать на смартфоне, планшете, ноутбуке и телевизоре с выходом в Интернет, т.е. на всем спектре устройств. Смысл адаптивного макета в том, что сайт динамически (в режиме реального времени) подстраивается под размер используемого устройства, и если размер дисплея вдруг расширится / сузится (как при ресайзе браузера 10

или смене ориентации планшета), то и сайт на это отреагирует незамедлительно, без перезагрузок и задержек. Основной способ организации адаптивного дизайна – это использование относительных размеров элементов, в процентах, а не в абсолютных величинах (текстов, отступов, размеров колонок и прочее) и составление различных правил CSS для разных разрешений экранов пользователей. При загрузке сайта можно определять разрешение экрана пользователя и в зависимости от него применять разные правила CSS к оформлению блоков сайта. Отметим, что, занимаясь web-разработкой на компьютере, можно в браузере (например Chrome) увидеть, как будет отображаться webстраница на мобильном экране (рис. 1.1). Для этого надо зайти в Меню-> Дополнительные инструменты -> Инструменты разработчика, после этого слева наверху можно выбирать устройство, под которое нужно проверить отображение сайта.

Рис. 1.1. Проверка отображения сайта на разных устройствах

Медиазапросы. Очень интересная, простая и вместе с этим чрезвычайно полезная вещь – @media. Сразу скажем о кроссбраузерности. Хорошая новость заключается в том, что большинство современ11

ных браузеров поддерживают медиазапросы: среди них Opera 9.5+, Firefox 3.5+, браузеры на базе WebKit, такие как Safari 3+ и Chrome, а также IE 9+. С мобильными браузерами также дела обстоят неплохо. Медиазапросы поддерживают такие браузеры на базе WebKit, как Mobile Safari, webOS производства HP и Android, а также Opera Mobile и Opera Mini. Что касается Windows Phone, то с 2011 г. на них устанавливается IE9+, который обеспечивает полную поддержку медиазапросов. Старые версии браузеров, включая IE8 и ниже, тоже не проблема. Существуют специальные JavaScript библиотеки, призванные обеспечить 100-процентную кроссбраузерность, начиная с IE5, например, css3-mediaqueries.js или respond.js. Такое понятие, как медиазапросы, появилось в CSS3. С их помощью можно определять внешний вид web-страниц, опираясь на ширину и высоту окна браузера. Благодаря медиазапросам можно параллельно создавать стили для небольших мобильных телефонов, планшетов, лэптопов и мониторов с большой диагональю. Идея адаптивного дизайна заключается в том, чтобы предоставить посетителям сайт в наиболее читаемой и привлекательной форме. Дизайн создается минимум под три целевых экрана: настольный ПК, планшет и смартфон. Но учитывая большое количество вариаций этих девайсов, недостаточно остановиться на какой-то одной ширине для каждого типа устройства. Поэтому важно использовать гибкую сетку и проводить тестирование в процессе разработки, отслеживая то, как подстраивается дизайн сайта под разную ширину браузерного окна. Как правило, для адаптации дизайна web-страницы необходимо прописать ряд CSS-стилей для определенных элементов. Перечислим наиболее частые сценарии, когда необходимо обратиться к медиазапросам. Определение количества колонок. Трехколоночный макет сайта, который хорошо смотрится на настольных персональных компьютерах, будет совсем неуместен для мобильных телефонов и планшетов. С помощью медиазапросов можно переопределить количество 12

колонок в макете с учетом ширины экрана устройства, сгруппировав для смартфонов весь контент в одну колонку. Относительная ширина. Когда устанавливают фиксированную ширину макета, скажем, в 960 пикселей, это подходит для настольных компьютеров, лэптопов и некоторых особо крупных планшетов. Однако для мобильного телефона такой размер контейнера слишком большой. Используя медиазапрос, можно специально для смартфонов создать «резиновый» макет, ширина которого будет не фиксированной, а относительной. Таким образом, контейнер шириной 100 % будет легко подстраиваться под любой смартфон в любой ориентации. Уменьшение отступов. Большие расстояния между блоками и элементами создают ощущение воздушного, легкого дизайна. Однако отступы, которые хорошо смотрятся на мониторе с диагональю 21-27 дюймов, будут выглядеть абсолютно безобразно на небольшом экране смартфона, к тому же принуждая пользователей больше прокручивать страницу. Медиазапросы позволяют задать альтернативные размеры отступов для узких дисплеев. Регулировка размера шрифта. Заголовки высотой в 60 пикселей могут красиво смотреться на десктопе, но для мобильных устройств такой размер шрифта мало уместен, поэтому для узких экранов будет целесообразным установить меньшее значение font-size. Адаптивная навигация. Нередко бывает так, что навигационное меню, которое было продумано для десктопной версии сайта, совершенно не подходит для мобильных устройств ввиду своей объемности либо манеры расположения пунктов меню. Существует несколько подходов к реализации удобной навигации для мобильной версии сайта, и медиазапросы непременно принимают в этом участие. Скрытие элементов. Некоторые части web-страницы могут быть бесполезными либо малозначимыми, если сайт просматривается с мобильного телефона. С помощью свойства display: none и медиазапросов можно скрыть определенные элементы от глаз посетителя, если он зашел на сайт со смартфона. Но нужно иметь в виду, что подобный прием не экономит трафик: скрытые элементы по-прежнему будут загружаться браузером. Конечно, это далеко не все ситуации, когда применяются медиазапросы. 13

Breakpoints (контрольные точки). При помощи медиазапросов можно создавать так называемые контрольные точки (англ. breakpoints) и привязывать к ним CSS-стили. К примеру, можно определить для браузера следующие правила: «Если ширина экрана составляет больше чем 767 пикселей, к web-странице применяются эти стили, а если ширина экрана составляет больше чем 991 пиксель, применяются другие стили». Вот эти числа, обозначающие ширину экрана, и называются контрольными точками. Какую ширину необходимо указывать в контрольных точках? Наиболее простой ответ: ту, на которой верстка web-страницы начинает ломаться. Представим, что есть сайт с контейнером шириной 1180 пикселей. Тогда в окне шириной 1200 пикселей (учитываем полосу прокрутки) или меньше он, скорее всего, будет выглядеть не очень хорошо. Вот и первая контрольная точка: необходимо внести правки в дизайн, если сайт просматривается в окне шириной менее чем 1200 пикселей. Синтаксис медиазапросов. Чтобы добавить медиазапрос в таблицу стилей, нужно записать следующее: @media (min-width: 576px) { /* здесь будут CSS-стили */ } Внутрь скобок медиазапроса помещают стили CSS, как это делают обычно: @media (min-width: 576px) { .column { width: 100%; } h1 { font-size: 24px; } /* и так далее... */ } Желательно размещать все медиазапросы под обычными стилями, а не над ними. Если используют контрольные точки, отталкиваясь от минимальной ширины экрана (min-width), размещать их нужно в порядке возрастания ширины экрана. Если применять max-width, тогда нужно расположить медиазапросы в порядке уменьшения ширины. В противном случае одни медиазапросы будут перезатирать предыдущие. 14

Для наглядности можно менять размер десктопного браузера (ресайзить) и следить за постепенным применением уже описанных стилей. Именно так и работают медиазапросы. Для подробного изучения адаптивного дизайна можно посетить ресурс: http://site-on.net/create/html/7-responsive. Layout (макет) – расположение элементов и блоков относительно друг друга в рамках страницы или интерфейса. По сути это готовый шаблон web-страницы (дизайн выполненный в html с использованием css). Как правило, составляется дизайнером в фотошопе на этапе первоначального проектирования сайта. Представляем примеры типичных макетов (рис. 1.2 – 1.4).

Рис. 1.2. Макет web-страницы с классическими блоками

Рис. 1.3. Макет web-страницы с набором секций 15

Рис. 1.4. Макет web-страницы табличного типа

Для подробного изучения можно посетить ресурс: https:// www.w3schools.com/html/html_layout.asp. JavaScript изначально создавался для того, чтобы сделать webстранички «живыми». Программы на этом языке называются скриптами. В браузере они подключаются напрямую к HTML и, как только загружается страничка, сразу же выполняются (интерпретируются) браузером. Это означает, что при загрузке сайта, если есть скрипты, то их код будет выполняться последовательно, строчка за строчкой. В случае если в какой-то строке будет ошибка, то выполнение скрипта остановится (при этом все, что успел сделать скрипт, никуда не исчезнет, и это может быть проблемой). Во все основные браузеры встроен интерпретатор JavaScript, именно поэтому они могут выполнять скрипты на странице. Но, разумеется, JavaScript можно использовать не только в браузере. Это полноценный язык, программы на котором можно запускать и на сервере, и даже в стиральной машинке, если в ней установлен соответствующий интерпретатор. 16

Для подробного изучения JavaScript можно посетить ресурс: https://learn.javascript.ru/.

Лабораторная работа № 1 Цель работы: развертывание своего web-сервера, создание виртуальных хостов, разработка простого сайта на HTML с использованием CSS. В рамках выполнения лабораторных работ нужно развернуть виртуальную машину (VirtualBox) и установить на ней ОС семейства Linux – Ubuntu Server 14, в нее установить пакет LAMP и создать виртуальный хост (сайт), с которым нужно работать. Необходимое оборудование – лабораторные работы выполняются в учебной лаборатории КНИТУ-КАИ – аудитория с 12 подключенными к Интернету рабочими компьютерами под Windows 7 x32 с установленным VirtualBox и файловым сервером SLES 10.0 x32 (сетевое хранилище на машине 10.116.0.70). В принципе работы могут выполняться студентом дома на домашнем компьютере в VirtualBox либо с использованием пакета Denwer. Порядок проведения работы – студент выполняет задания, заполняет «Журнал исследований» по лабораторной работе, вставляет принтскрины экрана там, где требуется. Отвечает на контрольные вопросы, имеющиеся в некоторых заданиях. Задание 1. Установить UbuntuServer в VirtualBox, настроить доступ к своему серверу через putty, сделать три виртуальных хоста, показать результат работы преподавателю (сайты должны открываться через w3m, должно быть видно, что это разные сайты). Вставить в отчет три принтскрина с тремя сайтами, открытыми в консоли через w3m. Задание 2. Настроить дефолтный сайт (конфиг файл 000default.conf). Взять с сервера файлы index.html, style.css, about.html в качестве исходных примеров для изменения. Показать преподавателю, что сайт открывается через браузер с Windows 7 по ip адресу, вставить принтскрин в отчет. 17

Задание 3. Заполнить сайт своим содержимым, придумать о чем будет сайт, сделать пункты меню, сделать CSS форматирование своими шрифтами и цветами. Сделать layout в соответствии с заданием либо придумать свой макет сайта. Вставить принтскрин в отчет.

Вопросы для самоконтроля 1. Что такое layout web-страницы, как его можно сформировать? 2. Какие основные html теги можете назвать? 3. Структура HTML-документа. Элемент DOCTYPE. 4. Структура HTML-элемента. 5. Возможности HTML для работы с текстом. 6. Встраивание изображений в HTML-документ. 7. Иерархические стилевые спецификации CSS (таблицы стилей). 8. Иерархические стилевые спецификации CSS. Внедренная таблица стилей. 9. Иерархические стилевые спецификации CSS. Внутренняя таблица стилей. 10. Иерархические стилевые спецификации CSS. Понятие класса в CSS. Понятие ID-стиля в CSS. Псевдоклассы. 11. Таблицы. Основные элементы таблиц. Создание сложной таблицы. Понятие «резиновой» таблицы. 12. Фреймы. Фреймовая структура web-сайта. Организация целевых фреймов. 13. Текстовые и графические гиперссылки. 14. Навигационные карты графических гипертекстовых ссылок. 15. Формы. Текстовые поля. Текстовые области. Отправка данных формы на сервер. 16. Формы. Переключатели. Флажки. Раскрывающиеся списки. Отправка данных формы на сервер. 17. Блочный макет web-страницы. Использование CSS для создания блочного сайта.

18

2. ПРОСТЫЕ PHP И JAVASCRIPT СКРИПТЫ, СОЗДАНИЕ WEB-ФОРМ Сайт условно делится на клиентскую часть и серверную. Клиентская часть сайта отрабатывает в браузере пользователя на его компьютере (html, CSS, JavaScript, Flash, Silverlight), серверная часть сайта отрабатывает на сервере, где размещен сайт (PHP скрипты, MySQL запросы и прочее), и возвращает результат работы пользователю для отображения в браузере. К серверным языкам программирования можно отнести: PHP, Perl, Python (Django), Ruby (Ruby On Rails), технологию ASP.NET, Java, Groovy. Какие-то технологии приходят, какие-то уходят, а что-то остается неизменным, несмотря на время. В рамках данного курса рассмотрим язык программирования PHP. Интерпретируемый скриптовый язык общего назначения интенсивно применяемый для разработки web-приложений PHP (рекурсивный акроним словосочетания Hypertext Preprocessor). В настоящее время поддерживается подавляющим большинством хостинг-провайдеров и является одним из лидеров среди языков, применяющихся для создания динамических web-сайтов. Язык и его интерпретатор разрабатываются группой энтузиастов в рамках проекта с открытым кодом. Проект распространяется под собственной лицензией, несовместимой с GNU GPL. Популярность в области построения web-сайтов определяется наличием большого набора встроенных средств для разработки webприложений, и существованием большого количества готовых биб19

лиотек фреймворков для разработки. Основные средства, имеющиеся в языке PHP: – автоматическое извлечение POST и GET-параметров, а также переменных окружения web-сервера в предопределённые массивы ($_POST[], $_GET[]); – взаимодействие с большим количеством различных систем управления базами данных (MySQL, MySQLi, SQLite, PostgreSQL, Oracle (OCI8), Microsoft SQL Server, Sybase, ODBC, mSQL, IBM DB2, Cloudscape и Apache Derby, Informix, Ovrimos SQL, Lotus Notes, DB++, DBM, dBase, DBX, FrontBase, FilePro,Ingres II, SESAM, Firebird/ InterBase, Paradox File Access, MaxDB, Интерфейс PDO); – автоматизированная отправка HTTP-заголовков; – работа с HTTP-авторизацией; – работа с cookies и сессиями; – работа с локальными и удалёнными файлами, сокетами; – обработка файлов, загружаемых на сервер; – работа с XForms. В настоящее время PHP используется сотнями тысяч разработчиков. Согласно рейтингу корпорации TIOBE, базирующемся на данных поисковых систем, в мае 2016 г. PHP находился на шестом месте среди языков программирования. К крупнейшим сайтам, использующим PHP, относятся Facebook, Wikipedia, VK (использует свой фреймворк PHP), edu.tatar и др. Для подробного изучения PHP можно посетить ресурс: https:// www.codecademy.com/learn/php/. Не будем вдаваться в детали синтаксиса языка программирования PHP, отметим только основные моменты: – файл, содержащий PHP код, должен иметь расширение *.php, при этом в нем может быть и html и css код; – участки кода на php в файле обрамляются открывающим и закрывающим тегом: ; – в языке PHP у переменных можно не указывать их тип, а можно и указать: var a=5; int a=5; – львиная работа при написании PHP кода идет с массивами, при обработке элементов массива важно не запутаться, массивы в PHP бывают очень разные: одномерные, многомерные, ассоциативные; 20

– при отладке кода полезна функция вывода последней ошибки: print_r(error_get_last()). Также отмечу, что в протоколе HTTP есть два основных типа запросов: POST и GET, есть и другие типы [11]. GET-запрос используется, чтобы получить данные, а POST, чтобы отправить (технически они работают одинаково), поэтому в контексте PHP, опираясь на эту идеологию, чтобы их различать, делают следующее: 1) при каждом запуске PHP по умолчанию создаются суперглобальные массивы ($_GET, $_POST); 2) если в строке запроса есть вопросительный знак(?), то все, что после него, считается параметрами GET запроса. Они представлены в формате “ключ”= значение и в качестве разделителя используется знак амперсанда (&). Пример: GET/index.php?name=Андрей&surname=Галкин, это строка запроса, тут два параметра, эти параметры попадут в массив $_GET; 3) $_POST заполняется другим способом, содержимое этого массива заполняется из «заголовков запроса», т.е. из места, скрытого от глаз в явном виде. Всю рутину по созданию таких заголовков берет на себя браузер. Хотя иногда что-то редактируется в заголовках вручную. Чаще всего POST запрос используется в формах (для отправки данных). Например, есть форма для входа, два поля логин и пароль. Представим, что используем GET метод. Тогда при отправке формы перейдем на следующий адрес: GET/login.php?login=Андрей&password=123. Согласитесь, что так передавать такую информацию небезопасно. Любой может открыть браузер и, начиная вводить адрес сайта, из истории может увидеть все пароли и логины. А вот если указать методом POST, то можно получить следующий запрос: POST /login.php (login=Андрей&password=123), т.е. то, что в скобочках было скрыто и никак не сохранено в браузере. Теперь другая ситуация, например форма поиска. Вводим текст и получаем страницу с результатами. Тут уместнее GET форма, пото21

му что удобно сразу иметь ссылку на результат поиска, т.е. добавить в строку запроса «публичные параметры», которыми можно поделиться. И как результат в строке браузера будет конкретная ссылка на текущую страницу, которую можно скопировать и разместить гденибудь или, например, скинуть другу и получить при переходе одну и ту же страницу, а не просить других людей зайти на сайт и в поиск вбить определенную фразу, чтобы получить необходимую страницу. Подводим итог: GET предназначен, чтобы получить определенную страницу в определенном виде (сортировка, текущая страница в блоге, строка поиска и т.п.); POST – для оправки данных, которые не влияют на отображение страницы, потому, что эти данные влияют только на результат выполнения скрипта (логины, пароли, номера кредиток, сообщения и т.п.). И еще одна хорошая новость: их можно комбинировать, например POST /index.php?page=login (login=Андрей&password=123) [10].

Работа с формами Одно из главнейших достоинств PHP – это то, как он работает с формами HTML. Здесь основным является то, что каждый элемент формы автоматически становится доступным программам на PHP. Вот пример формы HTML. Пример #1 Простейшая форма HTML

Ваше имя:

Ваш возраст:

В этой форме нет ничего особенного. Это обычная форма HTML без каких-либо специальных тегов. Когда пользователь заполнит форму и нажмет кнопку отправки, будет вызвана страница action.php. В этом файле может быть что-то вроде: Пример #2 Выводим данные формы Здравствуйте, .Вам лет. 22

Пример вывода данной программы: Здравствуйте, Сергей. Вам 30 лет. Если не принимать во внимание куски кода с htmlspecialchars() и (int), принцип работы данного кода должен быть прост и понятен. Функция htmlspecialchars() обеспечивает правильную кодировку «особых» HTML-символов так, чтобы вредоносный HTML или Javascript не был вставлен на web-страницу. Поле age, о котором известно, что это должно быть число, можно просто преобразовать в integer, что автоматически избавит от нежелательных символов. Скрипт PHP также может сделать это автоматически с помощью расширения filter. Переменные $_POST[“name”] и $_POST[“age”] автоматически установлены средствами PHP. Ранее уже использовали суперглобальную переменную $_SERVER, здесь точно так же используем суперглобальную переменную $_POST, которая содержит все POST-данные. Заметим, что метод отправки (method) данной формы – POST. Если бы использовали метод GET, то информация формы была бы в суперглобальной переменной $_GET. Кроме этого, можно использовать переменную $_REQUEST, если источник данных не имеет значения. Эта переменная содержит смесь данных GET, POST, COOKIE. В скрипте PHP можно также работать и с XForms, хотя работа с обычными HTML-формами довольно комфортна. Несмотря на то, что работа с XForms не для новичков, они могут показаться интересными пользователям.

Лабораторная работа № 2 Цель работы: разработка простых PHP и JavaScript скриптов, использование web-форм PHP на своем сайте. Порядок проведения работы – студент выполняет задания, заполняет «Журнал исследований» по лабораторной работе, вставляет принтскрины экрана там, где требуется. Отвечает на контрольные вопросы, имеющиеся в некоторых заданиях. 23

Задание 1. Взять исходный PHP скрипт калькулятор (calc.php) на сервере, вставить его на свой сайт по ссылке в меню слева, разобраться, как он работает. Вставить в отчет принтскрин страницы сайта с калькулятором. Обратите внимание: исходный скрипт на сервере содержит кнопку «Сгенерировать», ее надо убрать, чтобы сделать корректный принтскрин (кнопка понадобится во втором задании). Задание 2. Добавить JavaScript, который будет генерировать случайные числа в интервале. Исходный скрипт на сервере содержит только одну кнопку, надо добавить вторую кнопку. Нужно в функцию javascript добавить блок if/else, вставить в отчет принтскрин с калькулятором и кнопкой сгенерировать у каждой цифры. Задание 3. Вставить скрипт (javascript) календарь на свой сайт на страничку index.html. Исходный код виджета календарь взять в папке calendar, разобраться, как это сделать, и вставить принтскрин в отчет. Задание 4. Взять скрипт PHP для загрузки файлов на сервер (папка upload), вставить его на свой сайт, убедиться, что он работает корректно. Обратите внимание: форма загрузки в одном файле upload.html, скрипт загрузки файла в другом файле upload.php. Вставить два принтскрина в отчет.

Вопросы для самоконтроля 1. Каким образом происходит объявление переменных, определение типа переменной, уничтожение переменных в PHP? Привести пример. 2. Чем отличаются индексированные, неиндексированные, ассоциативные массивы? Привести пример. 3. Для чего предназначены классы (объекты) РНР? Привести пример объявления класса, подкласса. 4. Каким образом можно передать данные класса, используя текстовые поля на форме? Привести пример. 5. Сохранение информации в текстовых файлах. Операторы включения файлов. Привести пример. 6. Охарактеризуйте СУБД MySQL (основные типы данных, типы таблиц). 24

7. Опишите способы взаимодействия с СУБД MySQL. Перечислите основные команды на языке SQL для работы с СУБД MySQL (создание базы данных и таблицы, предоставление привилегий и формирование учетной записи пользователя). 8. С помощью каких функций можно организовать доступ к СУБД MySQL из приложения PHP? 9. Приведите пример ввода и сохранения данных в MySQL с использованием текстовых полей на форме. 10. Какие средства предоставляет PHP для обработки ошибок?

25

3. РАБОТА С СИСТЕМОЙ УПРАВЛЕНИЯ БАЗАМИ ДАННЫХ MYSQL ИЗ PHP СКРИПТОВ Cамая популярная СУБД, используемая в web-проектах, – MySQL. Она же одна из самых простых для освоения. Для небольших интернет-проектов эта СУБД отлично подходит (объем таблиц не превышает гигабайты, число пользователей сайта не превышает десятки тысяч), при этом многое зависит от того, какие имеются таблицы (какие типы данных), какие SQL запросы исполняются (насколько они оптимизированы, здесь поможет SQL-оператор EXPLAIN и знания об индексах) [13]. Для высоконагруженных проектов (таковых на самом деле очень мало, от общего числа интернет-проектов может 5-10 %) можно использовать другие СУБД: PostgreSQL (бесплатная, средняя по мощности, популярна в России), MSSQL (платная, средняя по мощности), Oracle (дорогая, сложная, очень мощная, требует отличного железа). Разных СУБД сейчас очень много, перечислены основные. Работать с СУБД можно либо через консоль, вводя текстовые команды, либо через web-интерфейс. Для СУБД MySQL есть популярный web-интерфейс PhpMyAdmin (например в пакете Denwer). Будем работать с MySQL через консоль, для того чтобы лучше понять принципы. При чтении литературы часто встречается аббревиатура CRUD (сокр. от англ. create, read, update, delete – «создать, прочесть, обновить, удалить») – акроним, обозначающий четыре базовые функции, используемые при работе с базами данных. 26

Также часто встречается аббревиатура MVC, обозначающая шаблон проектирования (рис. 3.1), – Model-View-Controller («Модель – Представление – Контроллер», «Модель – Вид – Контроллер»). МОДЕЛЬ • Инкапсудирует состояние системы • Отвечает на запрос о текущем состоянии • Реализует функциональность система

ВИД

КОНТРОЛЛЕР

• Отображает модель

• Определяет поведение системы

• Запрашивает у модели ее текущее состояние

• Изменяет состояние модели на основании действий пользователя

• Отправлет контроллеру информацию о действиях пользователя

• Обновление вида при изменении модели

Рис. 3.1. Шаблон проектирования MVC

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

Работа с MySQL Подсоединение к серверу и отсоединение от него. При подключении к серверу с помощью mysql обычно нужно ввести имя пользователя MySQL и, в большинстве случаев, пароль. Если сервер запущен не на том компьютере, с которого вошли в систему, необходимо также указать имя хоста. Параметры соединения (а именно – соответствующее имя хоста, пользователя и пароль) можно узнать у ад27

министратора. Получив соответствующие параметры, подсоединиться к серверу можно следующим образом: shell> mysql -h host -u user -p Enter password: ******** Символы ******** обозначают пароль; нужно ввести его, когда mysql выведет на экран запрос «Enter password:». Если все сработает, на экране должна появиться следующая информация и метка командной строки mysql>: shell> mysql -h host -u user -p Enter password: ******** Welcome to the MySQL monitor. Commands end with ; or \g. Your MySQL connection id is 459 to server version: 3.22.20 Type “help” for help. mysql> Метка обозначает, что программа mysql готова к вводу команд. В некоторых вариантах установки MySQL возможно подсоединение к запущенному на локальном хосте серверу без ввода имени пользователя (пользователь anonymous). Если система настроена именно так, подсоединиться к серверу можно, запустив mysql со следующими параметрами: shell> mysql После установки соединения можно в любой момент отключиться от сервера, набрав в командной строке mysql> команду QUIT: mysql> QUIT Bye Отсоединиться от сервера можно и при помощи сочетания клавиш Control-D. Ввод запросов. Нужно подсоединится к серверу, как уже описано. Таким образом никакая база выбрана не будет, но это не страшно. На данном этапе гораздо важней разобраться с созданием запросов, нежели сразу усложнять себе жизнь созданием таблиц, загрузкой в них данных и извлечением их оттуда. В этом разделе разъясняются 28

основные принципы ввода команд; на примере нескольких запросов можно поближе познакомиться с работой mysql. Приводим простую команду, запрашивающую у сервера информацию об его версии и текущей дате. Нужно ввести ее в командной строке mysql> и нажать Enter: mysql> SELECT VERSION(), CURRENT_DATE; +--------------+--------------+ | VERSION() | CURRENT_DATE | +--------------+--------------+ | 3.22.20a-log | 1999-03-19 | +--------------+--------------+ 1 row in set (0.01 sec) Этот запрос иллюстрирует следующие особенности mysql. Команда обычно состоит из SQL-выражения, за которым следует точка с запятой. Из этого правила есть и исключения: команды без точки с запятой. Одним из них является уже упомянутая команда QUIT, остальные еще рассмотрим. Когда пользователь вводит команду, mysql отправляет ее серверу для выполнения и выводит на экран сначала результаты, а затем новую строку mysql>, что означает готовность к выполнению новых команд: – mysql выводит результаты работы запроса в виде таблицы (строк и столбцов). В первой строке этой таблицы содержатся заголовки столбцов, а в следующих строках – собственно результаты. Обычно заголовками столбцов становятся имена, полученные из таблиц базы. Если же извлекается не столбец таблицы, а значение выражения (как это происходит в приведенном примере), mysql дает столбцу имя запрашиваемого выражения; – mysql сообщает количество возвращаемых строк и время выполнения запроса, что позволяет в некоторой степени составить представление о производительности сервера. Эти значения обычно весьма впечатляют, так как представляют обычное (а не машинное время), кроме того, на них оказывает влияние загрузка сервера и скорость работы сети. 29

Для ввода ключевых слов можно использовать любой регистр символов. Приведенные запросы абсолютно идентичны: mysql> SELECT VERSION(), CURRENT_DATE; mysql> select version(), current_date; mysql> SeLeCt vErSiOn(), current_DATE; Представляем еще один запрос, в нем демонстрируется использование mysql в качестве несложного калькулятора: mysql> SELECT SIN(PI()/4), (4+1)*5; +-------------+---------+ | SIN(PI()/4) | (4+1)*5 | +-------------+---------+ | 0.707107 | 25 | +-------------+---------+ Все представленные команды были относительно короткими и состояли из одной строки. В одну строку можно поместить и несколько команд. Но каждая из них должна заканчиваться точкой с запятой: mysql> SELECT VERSION(); SELECT NOW(); +-------+------+ | VERSION() | +-------+------+ | 3.22.20a-log | +-------+------+ +----------+----------+ | NOW() | +----------+----------+ | 1999-03-19 00:15:33 | +----------+----------+ Для mysql признаком завершения выражения является точка с запятой, а не конец строки (другими словами, mysql принимает команды без форматирования: строки с командами собираются, но не исполняются до тех пор, пока программа не обнаружит точку с запятой). 30

Вот пример несложного выражения, занимающего несколько строк: mysql> SELECT -> USER() -> , -> CURRENT_DATE; +--------------------+--------------+ | USER() | CURRENT_DATE | +--------------------+--------------+ | joesmith@localhost | 1999-03-18 | +--------------------+--------------+ Обратите внимание на то, как изменилась метка командной строки (с mysql> на ->) после ввода первой строки этого запроса. Таким образом программа mysql показывает, что завершенного выражения она пока не получила и ожидает его полного ввода. Эта метка очень полезна, так как предоставляет весьма ценную информацию о состоянии программы. С ее помощью всегда можно узнать, чего ждет mysql. Если нужно отменить исполнение набираемой команды, наберите \c: mysql> SELECT -> USER() -> \c mysql> Обратите внимание на метку: после ввода команды \c она снова принимает вид mysql>, показывая, что программа mysql перешла в режим ожидания указаний. Многострочные команды получаются случайно, когда собираются создать обычную команду, но забывают поставить завершающую точку с запятой. В таком случае mysql ожидает продолжения: mysql> SELECT USER() -> Если произошло подобное (пользователь думает, что завершили команду, но программа выдает только метку ->), то mysql, вероят31

нее всего, ждет точки с запятой. Не обратив внимание на метку командной строки, можно довольно долго ждать выполнения команды, не понимая в чем дело. А достаточно лишь поставить точку с запятой, завершив команду, которую mysql и выполнит: mysql> SELECT USER() -> ; +------------------------+ | USER() | +------------------------+ | joesmith@localhost | +------------------------+ Втискивать все команды в одну строку необязательно, поэтому создание длинных команд, занимающих несколько строк, никаких проблем не вызывает. Достаточно просто поставить в конце набора нескольких строк точку с запятой.

Создание и использование базы данных Теперь, когда уже известно, как вводить команды, пора начать работу с базой данных. Предположим, дома (или в вольере) живет несколько домашних любимцев и нужно создать систему для хранения разнообразной информации о своем живом уголке. Для того чтобы это сделать, надо просто создать таблицы и записать в них информацию. После этого любые данные можно будет получить, извлекая данные из таблиц. Такая база данных будет чрезвычайно проста, легко придумать реальные задачи, решение которых потребовало бы применения подобной базы данных. Такая база, например, может пригодиться скотоводу для хранения информации о поголовье или ветеринару для учета пациентов. Готовая база данных menagerie, в которой содержатся некоторые запросы и данные из приводимых разделов, находится на официальном web-сайте MySQL. Ее можно бесплатно загрузить в виде сжатого tar-файла (http://www.mysql.com/Downloads/Contrib/Examples/ menagerie.tar.gz) или Zip (http://www.mysql.com/Downloads/Contrib/ Examples/menagerie.zip). 32

Узнать, какие базы существуют в настоящее время на сервере, можно при помощи команды SHOW: mysql> SHOW DATABASES; +----------+ | Database | +----------+ | mysql | | test | | tmp | +----------+ На компьютере пользователя список баз, вероятно, будет другим, но в нем все равно, скорее всего, будут присутствовать базы mysql и test. База данных mysql просто необходима, так как в ней описываются пользовательские права доступа. База test часто применяется для экспериментов. Впрочем, всех баз можно и не увидеть, если нет привилегии SHOW DATABASES. Если база данных test существует, попробуйте обратиться к ней: mysql> USE test Database changed В команде USE, как и QUIT, точка с запятой не нужна (конечно, данные команды тоже можно завершать точкой с запятой – никакого вреда от этого не будет). Команда USE имеет еще одно отличие: она должна задаваться одной строкой. Базу данных test (если, конечно, есть доступ к ней) можно использовать для работы с приводимыми примерами, но все созданное в ней может быть уничтожено любым другим пользователем, имеющим к ней доступ. Поэтому лучше попросить у своего администратора MySQL разрешение на создание собственной базы. Предположим, можно назвать ее menagerie («зверинец»). В таком случае администратору нужно будет набрать примерно такую команду: mysql> GRANT ALL ON menagerie.* TO your_mysql_name; В представленной команде your_mysql_name является именем пользователя, используемым для подключения к серверу СУБД MySQL. 33

Создание таблицы Как можно убедиться, создать базу данных было просто. Однако пока что в ней ничего нет – в этом можно удостовериться при помощи следующей команды SHOW TABLES: mysql> SHOW TABLES; Empty set (0.00 sec) Гораздо труднее определиться со структурой своей базы, т.е. с тем, какие могут понадобиться таблицы, и какие столбцы должны содержаться в каждой из них. Пользователю обязательно будет нужна таблица, содержащая по записи на каждое из животных. Назвать ее можно pet, храниться в ней будут, как минимум, имена. Но так как само по себе имя неинформативно, в таблице должны будут присутствовать и другие данные. Например, если домашние животные есть более чем у одного члена семьи, в таблицу можно добавить и имя владельца каждого животного. Кроме того, в базу стоит внести и описательную информацию (например вид и пол животного). Но вот как быть с возрастом? Эта информация тоже может оказаться полезной, но хранить такие данные в базе неудобно. Возраст со временем меняется, а это значит, что придется довольно часто обновлять записи. Значительно удобнее хранить фиксированные значения (например даты рождения). В таком случае возраст всегда можно получить, вычислив разницу между текущей датой и датой рождения. В MySQL есть функции для арифметических действий над данными, поэтому это несложно. Хранение даты рождения имеет и другие преимущества. Базу данных можно использовать для выдачи напоминаний о приближающихся днях рождения животных (не спешите улыбаться: та же задача может возникнуть и при работе с деловой базой данных, которая должна уметь напоминать о днях рождения клиентов, облегчая таким образом рассылку поздравлений). Возраст можно подсчитывать относительно любой даты, а не только для текущей. Например, если записать в базу и дату смерти животного, всегда можно будет узнать, сколько лет ему было на момент смерти. 34

Можно было бы придумать и еще какие-нибудь данные, которые неплохо было бы хранить в таблице pet, но пока ограничимся уже выбранными: именем (name), именем владельца (owner), видом (species), полом (sex), датой рождения (birth) и датой смерти (death). При помощи команды CREATE TABLE определим структуру новой таблицы: mysql> CREATE TABLE pet (name VARCHAR(20), owner VARCHAR(20), -> species VARCHAR(20), sex CHAR(1), birth DATE, death DATE); Тип VARCHAR отлично подойдет для хранения имени животного, имени владельца и названия вида, так как длина данных этого типа может варьироваться. Конечно, длины таких столбцов не должны совпадать и не должны быть равны 20, можно выбрать любое значение в пределах от 1 до 255 (если при выборе длины столбца ошибетесь и при работе с базой окажется, что столбец маловат, можно будет исправить ошибку при помощи команды ALTER TABLE). Пол животного можно обозначать несколькими способами, например буквами «m» и «f», или словами male (мужской) и female (женский). С буквами «m» и «f» будет проще. Применение типа данных DATE для хранения дат рождения и смерти вполне очевидно. Теперь, когда таблица создана, команда SHOW TABLES должна вывести следующее: mysql> SHOW TABLES; +---------------------+ | Tables in menagerie | +---------------------+ | pet | +---------------------+ Проверить, правильно ли была создана таблица (в соответствии с планом), можно при помощи команды DESCRIBE: 35

mysql> DESCRIBE pet; +---------+-----------+------+----+---------+-----+ | Field | | Null | Key | Default | Extra Type +---------+-----------+------+----+---------+-----+ | name | varchar(20)| YES | | NULL | | owner | varchar(20)| YES | | NULL | | species|varchar(20) | YES | | NULL | | sex | char(1) | YES | | NULL | | birth |date | YES | | NULL | | death |date | YES | | NULL | +---------+-----------+------+----+---------+-----+ Использовать команду DESCRIBE можно в любое время, например, если пользователь забудет имена столбцов или типы, к которым они относятся.

Добавление записей При добавлении одиночных записей используется команда INSERT. В самом простом варианте ее применения необходимо задать значения каждого столбца в том порядке, в каком они были перечислены в команде CREATE TABLE. Предположим, Диана (Diane) купила хомячка по имени Puffball. Соответствующую запись в таблицу можно внести с помощью команды INSERT примерно так: mysql>INSERT INTO pet>VALUES (“Puffball”, ’Diane’, ’hamster’,’f’,’1999-03-30',NULL);.

Лабораторная работа № 3 Цель работы: создание БД и таблицы через консоль СУБД MySQL, разработка простых PHP скриптов, взаимодействующих с MySQL, посредством отправки SQL запросов к этой СУБД. Порядок проведения работы – студент выполняет задания, заполняет «Журнал исследований» по лабораторной работе, вставляет принтскрины экрана там, где требуется. Отвечает на контрольные вопросы, имеющиеся в некоторых заданиях. Задание 1. Создать БД на своем виртуальном сервере, в ней создать таблицу, в которую будем заносить пользователей, регистрирующихся на сайте, сделать web-форму регистрации пользователей на 36

данном сайте по примеру forms.pdf. Нужно обратить внимание, что там есть JavaScript, проверяющий, заполнены ли поля (вставить принтскрин в отчет). Задание 2. Сделать скрипт регистрации, который будет заносить данные из web-формы в таблицу MySQL, за пример можно взять скрипт recordDB.pdf, поставить свою БД в скрипт и свой пароль пользователя MySQL. Проверьте, работает ли скрипт, добавьте пользователя через web-форму, а потом, просмотрев через putty в консоли СУБД, что пользователь занесен в БД, вставьте два принсткрина в отчет. Задание 3. Сделать скрипт, отображающий всех зарегистрированных на сайте пользователей из БД, сделать ссылку «Все пользователи» на главной странице на этот скрипт (пример select All From DB . php). Вставить принтскрин с результатом работы скрипта. Переделать скрипт таким образом, чтобы записи из таблицы отображались в виде таблицы и были также поля пароль и email, вставить принтскрин результата работы в отчет. Задание 4. Сделать, чтобы в таблицу заносился город и пол пользователя (самим разобраться, как это сделать). Вставить принтскрин с окном putty с данными, выбранными из таблицы, чтобы показать изменения.

Вопросы для самоконтроля 1. Приведите основные составляющие системы MySQL. 2. Перечислите возможности MySQL. 3. Что отсутствует в MySQL? 4. Дайте определение хранилища данных. 5. Объясните суть интеллектуального анализа данных. 6. Что позволяет обеспечить системы оперативной аналитической обработки данных (OLAP)? 7. Перечислите существующие направления развития СУБД. 8. Каков принцип функционирования дедуктивных баз данных? 9. В чем состоит суть проблемы доступа к информации в Интернете? 10. Приведите примеры взаимодействия web-технологий и баз данных. 37

4. ИСПОЛЬЗОВАНИЕ ТЕХНОЛОГИИ AJAX В СКРИПТАХ При разработке интерактивных скриптов в настоящее время активно используется технология AJAX (от англ. Asynchronous Javascript and XML – «асинхронный JavaScript и XML»). Это подход к построению интерактивных пользовательских интерфейсов webприложений, заключающийся в «фоновом» обмене данными браузера с web-сервером. В результате, при обновлении данных webстраница не перезагружается полностью и web-приложения становятся быстрее и удобнее. Первый и самый важный компонент технологии AJAX – это XMLHttpRequest (XHR) API. Это JavaScript API для передачи данных в виде сообщений между web-браузером и web-сервером. Этот API позволяет использовать HTTP POST-запросы (для передачи данных на сервер) и GET-запросы (для загрузки данных с сервера в фоновом режиме). Он является «ядром» большинства AJAX-вызовов. Технология AJAX – это новое объединение нескольких технологий, каждая из которых сильна в своей области. Эта технология включает в себя: – стандартное представление с помощью XHTML и CSS; – динамическое отображение и интерактивность благодаря DOM; – обмен и манипулирование данными с помощью XML и XSLT; – асинхронное получение данных с помощью XMLHttpRequest; – использование JavaScript для интеграции перечисленных технологий. 38

Хотя это техническое описание немного устарело, основная идея сохранилась: HTML и CSS представляют данные и стиль; DOM и связанные с ним методы обновляют страницу в режиме реального времени, XHR отвечает за общение с сервером, а JavaScript управляет процессом в целом. Более подробно про технологию AJAX можно почитать на сайте: https://learn.javascript.ru/ajax. Основным инструментом работы и динамических изменений на странице является DOM (Document Object Model) – объектная модель, используемая для XML/HTML-документов. Согласно DOMмодели, документ является иерархией, деревом. Каждый HTML-тег образует узел дерева с типом «элемент». Вложенные в него теги становятся дочерними узлами. Для представления текста создаются узлы с типом «текст». Это представление документа в виде дерева объектов, доступное для изменения через JavaScript. Технология DOM нужна для того, чтобы манипулировать страницей – читать информацию из HTML, создавать и изменять элементы. Узел HTML можно получить как document.documentElement, а BODY – как document.body. Получив узел, можно что-то сделать с ним. Например, можно поменять цвет BODY и вернуть обратно: document.body.style.backgroundColor = “red”; alert( “Поменяли цвет BODY” ); document.body.style.backgroundColor = ”; alert( “Сбросили цвет BODY” ); Технология DOM предоставляет возможность делать со страницей всё, что угодно. Более подробно про технологию DOM можно почитать на сайте: https://learn.javascript.ru/dom-nodes.

Лабораторная работа № 4 Цель работы: использование технологии Ajax в своих скриптах для динамической подкачки данных и вывода их на своей webстранице в отдельном блоке при вводе данных пользователем. 39

Порядок проведения работы – студент выполняет задания, заполняет «Журнал исследований» по лабораторной работе, вставляет принтскрины экрана там, где требуется. Отвечает на контрольные вопросы, имеющиеся в некоторых заданиях. Задание 1. Сделать еще одну ссылку на главной Ajax, ссылающуюся на такую же форму регистрации, как и в предыдущей лабораторной работе, но сделать так, чтобы при вводе логина снизу в динамике появлялись варианты логина (берутся из скрипта gethint.php). За основу реализации нужно взять ajax.php, вставить принтскрин в отчет. Задание 2. Переделать скрипт gethint таким образом, чтобы варианты предлагались из таблицы СУБД MySQL. Как это сделать, нужно разобраться самим. Показать результат.

Вопросы для самоконтроля 1. В чем заключается проблема «классических» web-приложений при построении пользовательского интерфейса? 2. В чем заключается основная идея подхода AJAX? 3. Какие механизмы обязательно используются для построения AJAX-приложений? 4. Как работают AJAX-приложения (какие этапы проходят AJAX-приложения)? 5. Какими преимуществами обладают приложения, построенные на основе подхода AJAX? 6. Какие недостатки содержит в себе подход AJAX? 7. Из каких компонент состоит библиотека ASP.NET AJAX? 8. Для чего используется библиотека jQuery? 9. Каким образом осуществляются AJAX-запросы в рамках библиотеки jQuery? 10. Каким образом можно обрабатывать результаты выполнения AJAX-запроса в рамках библиотеки jQuery? 11. Каким образом можно обрабатывать ошибки выполнения AJAX-запроса в рамках библиотеки jQuery?

40

5. ДАННЫЕ В ФОРМАТЕ JSON, ИСПОЛЬЗОВАНИЕ API WEB-СИСТЕМ Многие интернет-сервисы позволяют использовать свои возможности на сторонних сайтах, предоставляя доступ с помощью API. Количество сервисов, предоставляющих публичные API, стремительно растет, что помогает владельцам сайтов применять возможности этих сервисов на своих площадках для увеличения функционала и привлекательности собственных проектов. Рассмотрим пример работы с API портала VK.com. Отметим, что часть API функции открытая (не требует авторизации на портале), часть требует авторизации. Более подробно про API VK.com можно почитать на сайте https://vk.com/dev/manuals. Формат JSON (JavaScript Object Notation) – XML-подобный формат данных, используемый для представления объектов в виде строки (массив объектов представляется массивом строк). Это один из наиболее удобных форматов данных при взаимодействии с JavaScript. Если нужно с сервера взять объект с данными и передать его клиенту, то в качестве промежуточного формата (для передачи по сети), почти всегда используют именно его. Более подробно про формат JSON можно почитать на сайте https://learn.javascript.ru/json. Формат JSON может использоваться с AJAX вместо XML. Поддержка формата JSON встроена в JavaScript. Многие сервисы предоставляют свои услуги через JSON интерфейс, к примеру портал Flickr.com предоставляет API, с помощью которого можно отобра41

жать на сайте картинки, имеющиеся на этом портале. Будем использовать API портала VK.com (функцию выдающую результаты поиска в формате JSON). Список всех методов портала ВКонтакте можно найти на сайте https://vk.com/dev/methods.

Лабораторная работа № 5 Цель работы: написание скрипта, который будет забирать данные с портала VK.com в формате json через функцию API, парсить их и выводить на экран либо записывать в БД. Порядок проведения работы – студент выполняет задания, заполняет «Журнал исследований» по лабораторной работе, вставляет принтскрины экрана там, где требуется. Отвечает на контрольные вопросы, имеющиеся в некоторых заданиях. Задание 1. Сделать скрипт, использующий API портала VK.com, который будет выбирать имена и фамилии участников заданной группы ВКонтакте и отображать их в виде списка (пример usersVK.php отображает имена и фамилии десяти участников группы dean4). Сделать принтскрин, вставить в отчет. В скрипте основная строка возвращает результат в виде JSON для парсинга: $json=file_get_contents(https://api.vk.com/method/groups.get Members?group_id=dean4&fields=sex); Задание 2. Переделать скрипт таким образом, чтобы все пользователи, полученные из группы ВКонтакте, были представлены в виде таблицы на экране (в идеале с пагинацией) с полями: Фамилия, Имя, Город, Пол. Принтскрин занести в отчет. Задание 3. Переделать скрипт таким образом, чтобы пользователи, полученные из группы, были представлены в виде таблицы, как в результатах поиска ВКонтакте. Иначе говоря, чтобы отображалось их фото с аватарки, их фамилия, имя и город (в идеале с Ajax при пролистывании вниз должны подкачиваться новые данные). Принтскрин занести в отчет. 42

Вопросы для самоконтроля 1. Для чего используется формат JSON? 2. Запишите структурированную текущую дату-время в формате JSON. 3. Какие сложные типы данных JSON Вы знаете? 4. Исправьте следующее описание на JSON: [ { a: {}, b: 324, c: abracadabra, }, [{}, [2]] ]. 5. Какие способы парсинга JSON-форматированных данных Вам известны? 6. Что такое AJAX? Цикл работы AJAX-запроса. 7. Что такое jQuery, зачем нужна? Напишите простой пример использования jQuery. 8. Что делает этот код: $(.title).click(function() { $(this).css(font-weight, bold); });? 9. Что делает этот код: $.getJSON(/my.js, function(data) { alert(data.toSource()); }).error(function() { alert(!); }); 10. Что делает этот код: $(#my).css(color, #00a). click(function() {$(this).css(color, #a00); });? 11. Напишите jQuery-вызов, который для блоков div с классом title устанавливает реакцию на клик: делает этот div жирным.

43

6. ИСПОЛЬЗОВАНИЕ ФУНКЦИИ ИЗ БИБЛИОТЕКИ JQUERY Библиотека jQuery – популярная javascript библиотека, состоящая из кроссбраузерных функций – оплеток для манипулирования элементами DOM (Document Object Model – объектная модель документа). Главный ее принцип – это автоматическое применение нужного механизма в зависимости от браузера. К примеру, получение элемента html документа по ID в разных браузерах происходит поразному. Более подробно про библиотеку JQuery можно почитать на сайте: http://www.litecode.ru/javascript/jquery_example.shtml.

Лабораторная работа № 6 Цель работы: использование функции библиотеки jQuery в своих скриптах для загрузки данных с web-сайта. Порядок проведения работы – студент выполняет задания, заполняет «Журнал исследований» по лабораторной работе, вставляет принтскрины экрана там, где требуется. Отвечает на контрольные вопросы, имеющиеся в некоторых заданиях. Задание 1. Сделать скрипт (ссылка на него с главной страницы сайта), заносящий пользователей из группы VK в таблицу MySQL (см. лабораторную работу № 5), поля таблицы: id, name, surname, city. Сделать принтскрин putty с выбранными командой SELECT данными из полученной таблицы, вставить в отчет. 44

Задание 2. Сделать скрипт (ссылка на него с главной страницы сайта), отображающий список пользователей по 20 записей из таблицы, при этом при прокрутке вниз должны подгружаться новые записи из таблицы. Использовать технологию Ajax совместно с функциями библиотеки jQuery. Принтскрин экрана занести в отчет. Пример: http://codeharmony.ru/materials/136.

Вопросы для самоконтроля 1. Что такое DOM дерево? 2. Как выполнять навигацию по DOM дереву? 3. Как редактировать DOM дерево? 4. Как в JavaScript работать с атрибутами? 5. Как отображать скрытые элементы? 6. Что такое библиотека query? Зачем она нужна? 7. Какова суть работы jQuery?

45

ПРИЛОЖЕНИЕ Приложение 1 ОТПРАВКА ПОЧТЫ СО СВОЕГО САЙТА ЧЕРЕЗ ФОРМУ Стандартная ситуация следующая: пользователь разрабатывает на своем компьютере сайт и у него возникает задача обеспечить отправку сообщений с сайта на электронную почту: отправка формы обратной связи, регистрация заявок и пр. Для решения этой задачи можно использовать представляемые инструменты. Утилита Ssmtp по сути является «заглушкой» для полноценной программы sendmail, которая позволяет слать почту через relay-сервер или через обычный smtp-аккаунт на стороннем сервере. Сразу о минусах. Утилита Ssmtp работает медленно. Две секунды на одно письмо для нее – хороший результат. Обычно на большое html письмо уходит три-шесть секунд. Эту утилиту нужно использовать аккуратно в синхронных операциях. Более подробно про настройку утилиты Ssmtp можно почитать на сайте: http://www.havetheknowhow.com/Configure-the-server/Installssmtp.html. Вместо этой утилиты можно поставить полноценный почтовый сервер sendmail, но автору учебно-методического пособия так и не удалось настроить sendmail на стабильную работу через гугл почту, в лучшем случае sendmail работал только на сессию, возможно у студентов это получится. 46

Пример настройки можно посмотреть на сайте: https://linuxconfig.org/configuring-gmail-as-sendmail-email-relay.

Отправка почты скриптом PHPMailer Любой backend-программист php сталкивается с задачей автоматизации почтовой рассылки на web-сайтах. Перед программистами, которые сталкивались с данной задачей впервые, вставал вопрос: «Писать или не писать smtp клиент с нуля?». Если студент решит самостоятельно реализовать функционал smtp клиента на языке php, да и на любом другом аналогичном языке, то столкнется с весьма рутинной и скучной работой, так как основной механизм работы с smtp серверами заключается в обмене текстовыми сообщениями и ничем больше. Но, к счастью, этого и не требуется! Все что нужно, уже написано в PHPMailer. Класс PHPMailer дает возможность легко и быстро писать скрипты рассылки почтовых уведомлений с гибкой системой отладки данного скрипта. Скрипт написан на языке программирования PHP и поддерживает стандарты криптографического шифрования при обмене сообщениями с сервером TLSSSL. Для использования PHPMailer на своем сервере необходима возможность подключения к внешним SMTP серверам при помощи PHP. Возможности SMTP клиента PHPMailer: – отправка E-mail с множественными адресатами; – поддержка 8 бит, base64, бинарного режима, пригодного для печати формата; – SMTP авторизация на стороне сервера; – перенос слов (word wrap); – отправка сообщения в виде HTML; – библиотека проверена на множестве SMTP серверах: Sendmail, qmail, Postfix, Imail, Exchange, Mercury, Courier; – работает на любой win32 и *nix платформе; – гибкость отладочной работы – реализована система вывода подробнейшего лога общения с SMTP сервером; – определение вручную заголовков писем; 47

– совмещение нескольких сообщений и вложений; – встроенная поддержка изображений; – отправка писем различными способами: через smtp сервер, утилитой sendmail и Qmail, функцией mail(). Установка и первоначальная подготовка SMTP клиента PHPMailer к работе. Прежде всего необходимо скачать свежую версию SMTP библиотеки: https://github.com/PHPMailer/PHPMailer Затем распаковываем скачанный архив и изучаем содержимое SMTP библиотеки PHPMailer: /docs: // Директория с документацией библиотеки PHPMailer /examples: // Директория с примерами работы библиотеки PHPMailer /extras: // Дополнительные полезности при работе с почтовыми серверами /language: // Директория с переводом Debug /test: // Скрипты тестирования библиотеки PHPMailer class.phpmailer.php // Класс для создания и отправки писем различными методами class.pop3.php // Класс для работы с POP3 class.smtp.php // Класс для работы с SMTP PHPMailerAutoload.php // Файл автоматической подгрузки классов PHPMailer Все остальное не несет функциональной нагрузки и предоставляется в качестве информационного дополнения к библиотеке PHPMailer. Многие любят создавать дополнительно файл конфигурации для SMTP клиента PHPMailer и в дальнейшем использовать его. Автор тоже привержен этой традиции, поэтому предлагает на рассмотрение пример такого файла. config.php: $__smtp = array( host => smtp.host.com, // SMTP сервер debug => 2, // Уровень логирования 48

auth => true, // Авторизация на сервере SMTP. Если ее нет - false port => 25, // Порт SMTP сервера username => [email protected], // Логин, запрашиваемый при авторизации на SMTP сервере password => 123, // Пароль addreply => [email protected], // Почта для ответа secure» => ssl, // Тип шифрования. Например ssl или tls mail_title => Заголовок вашего письма!, // Заголовок письма mail_name => Имя отправителя // Имя отправителя ); Загружаем все это на хостинг и готовимся к первой инициализации и пробной отправке первого письма при помощи SMTP клиента PHPMailer. Подключаем и инициализируем класс PHPMailer. Для подключения класса PHPMailer необходимо подключить файлы: PHPMailerAutoload.php и config.php: require_once(“/путь/до/файла/config.php”); //Файл конфигурации для вашего smtp сервера require_once(“/путь/до/файла/PHPMailerAutoload. php”); //Файл автоматической подгрузки классов PHPMailer Далее происходит процесс конфигурации SMTP клиента PHPMailer и отправка письма. Пример конфигурации можно посмотреть в директории с примерами /examples или воспользоваться этим примером конфигурации и отправки письма при помощи класса PHPMailer. Пример конфигурации SMTP клиента PHPMailer. Данный пример демонстрирует работу библиотеки PHPMailer в качестве SMTP клиента. require_once(“/путь/до/файла/config.php”); // Файл конфигурации для вашего smtp сервера 49

require_once(“/путь/до/файла/ PHPMailerAutoload.php”); //Файл автоматической подгрузки классов PHPMailer try{ $mail = new PHPMailer(true); // Создаем экземпляр класса PHPMailer $mail->IsSMTP(); // Указываем режим работы с SMTP сервером $mail->Host = $__smtp[“host”]; // Host SMTP сервера: ip или доменное имя $mail->SMTPDebug = $__smtp[“debug”]; // Уровень журнализации работы SMTP клиента PHPMailer $mail->SMTPAuth = $__smtp[“auth”]; // Наличие авторизации на SMTP сервере $mail->Port = $__smtp[“port”]; // Порт SMTP сервера $mail->SMTPSecure = $__smtp[“secure”]; // Тип шифрования. Например ssl или tls $mail->CharSet=UTF-8; // Кодировка обмена сообщениями с SMTP сервером $mail->Username = $__smtp[“username”]; // Имя пользователя на SMTP сервере $mail->Password = $__smtp[“password”]; // Пароль от учетной записи на SMTP сервере $mail->AddAddress(“[email protected]”, “John Doe”); // Адресат почтового сообщения $mail->AddReplyTo($__smtp[“addreply”], “First Last”); // Альтернативный адрес для ответа $mail->SetFrom($__smtp[“username”], $__smtp[“mail_title”]); // Адресант почтового сообщения $mail->Subject = htm lspecial chars $__smtp [“mail_title”]); // Тема письма 50

$mail->MsgHTML(“Текст сообщения!”); // Текст сообщения $mail->Send(); return 1; } catch (phpmailerException $e) { return $e->errorMessage(); } Теперь создано четкое представление о возможностях SMTP библиотеки PHPMailer и студенты готовы к реализации любых почтовых рассылок при помощи языка программирования PHP.

51

Приложение 2 НАСТРОЙКА FTP СЕРВЕРА И ОГРАНИЧЕНИЕ ДОСТУПА Стандартная ситуация следующая: пользователь разрабатывает на своем компьютере сайт, пишет скрипты, sql запросы, готовит иконки в photoshop и пр. После этого возникает задача загрузить результат работы на сервер в папку сайта, для ее решения удобный способ – использовать службу ftp (например через total commander). Технология FTP была разработана в рамках проекта ARPA и предназначена для обмена большими объемами информации между машинами с различной архитектурой. Главным в проекте было обеспечение надежной передачи, поэтому с современной точки зрения FTP кажется перегруженным излишними редко используемыми возможностями. Стержень технологии составляет FTP-протокол.

FTP-протокол Протокол передачи данных (File Transfer Protocol (FTP)) – один из старейших протоколов в Интернете, входит в его стандарты. Первые спецификации FTP относятся к 1971 г. С тех пор FTP претерпел множество модификаций и значительно расширил свои возможности; его можно использоваться как в программах пользователей, так и в виде специальной утилиты операционной системы. Протокол передачи данных предназначен для решения задач разделения доступа к файлам на удаленных хостах, прямого или косвенного использования ресурсов удаленных компьютеров, обеспечения независимости клиента от файловых систем удаленных хостов, эффективной и надежной передачи данных. Обмен данными в FTP происходит по TCP-каналу. Обмен построен на технологии «клиент – сервер». Данный протокол не может использоваться для передачи конфиденциальных данных, поскольку не обеспечивает защиты передаваемой информации, так как передает между сервером и клиентом открытый текст. Сервер FTP может 52

потребовать от клиента FTP аутентификации (т.е. при присоединении к серверу пользователь FTP должен будет ввести свой идентификатор и пароль). Однако пароль и идентификатор пользователя будут переданы от клиента на сервер открытым текстом.

Файл конфигурации .htaccess При правильном использовании дополнительный конфигурационный файл web-сервера Apache – .htaccess (hypertext access) представляет собой очень мощное средство в инструментарии разработчика. По обыкновению, основной файл располагается в корневой директории web-сервера (также могут присутствовать отдельные файлы в каждой папке – для управления доступом) и может быть откорректирован с помощью любого редактора. Как правило, файл .htaccess устанавливается на хостинге (webсервере) вместе с установкой сайта, но если его там нет, тогда можно создать этот файл с помощью блокнота. Для этого надо открыть блокнот, добавить туда необходимые директивы, примеры которых будут приведены, и сохранить как текстовый документ с названием – .htaccess. Потом просто надо убрать расширение .txt, и файл готов. Перед внесением изменений в файл .htaccess, необходимо создать его резервную копию, чтобы в случае сбоя работы сайта можно было вернуть все изменения. Работоспособность указываемых правил (директив) зависит от настроек web-сервера, заданных хостером, поэтому некоторые директивы могут быть запрещены и не работать. Злоупотребление использованием .htaccess может привести к снижению производительности сайта. Использовать его для реализации той или иной задачи стоит только в том случае, если нет других вариантов.

Правила .htaccess 1. Запрещаем загрузку файлов с внешних сайтов. Приведенный код, помещенный в конце файла .htaccess, предотвратит загрузку изоб53

ражений с ресурса пользователя на сторонние сайты, тем самым сэкономит расходуемый трафик и предотвратить ненужную нагрузку на хостинг. Options +FollowSymlinks #Запрещаем загрузку файлов с внешних сайтов RewriteEngine On RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http://(www.) ? your _domain.com/ [nc] R ew r it e Ru l e. * .( g if | jp g | pn g )$ ht t p: / /y o ur _ domain.com/img/goaway.gif[nc] Не забудьте изменить your_domain.com на доменное имя пользователя и создать изображение goaway.gif, которое будет показано вместо запрошенной картинки. 2. Блокируем все запросы от нежелательных User Agents. Это правило позволяет блокировать нежелательные User Agents, которые могут быть потенциально опасными, либо просто не надо ненужными запросами перегружать сервер: #Блокируем нежелательных ботов и роботов SetEnvIfNoCase user-Agent^FrontPage[NC,OR] SetEnvIfNoCase user-Agent^Java.*[NC,OR] SetEnvIfNoCase user-Agent^Microsoft.URL[NC,OR] SetEnvIfNoCase user-Agent^MSFrontPage[NC,OR] SetEnvIfNoCase user-Agent^Offline.Explorer[NC,OR] SetEnvIfNoCase user-Agent^[Ww]eb[Bb]andit[NC,OR] SetEnvIfNoCase user-Agent^Zeus [NC]

Order Allow,Deny Allow from all Deny from env=bad_bot

Список User Agent браузеров, роботов и пауков поисковых машин, web-каталогов, менеджеров закачек, спам-ботов и плохих ботов можно найти на сайте http://www.user-agents.org/. 54

3. Запрещаем доступ для всех, кроме указанных IP адресов. Если по какой-либо причине, нужно запретить всем или разрешить только отдельным IP адресам доступ к данному сайту, необходимо добавить этот код в .htaccess-файл: #Запрещаем доступ для всех, кроме указанных IP адресов ErrorDocument 403 http://your_domain.com Order deny,allow Deny from all Allow from IP1 Allow from IP2 и т.д. Не забудьте изменить your_domain.com и IP2 на доменное имя пользователя и необходимые IP адреса соответственно. 4. Создаем черный список IP адресов. Если требуется закрыть доступ к ресурсу пользователя для определенных IP адресов, это можно сделать с помощью следующего кода, добавленного в файл .htaccess: #Создаем черный список IP адресов allow from all deny from IP1 deny from IP2 и т.д. В случае, если причиной блокировки IP адреса являются назойливые спам-комментарии, узнать IP адреса комментаторов можно или в логах Apache, или с помощью сервисов статистики. Для WordPress IP адреса комментаторов можно увидеть в административной панели. Таким же образом можно заблокировать доступ на сеть IP адресов, указав «deny from IP/маска сети». #Создаем черный список для подсети allow from all deny from 192.168.0.0/24 5. Настраиваем SEO-Friendly 301 Redirect. Если нужно перенести доменное имя или перенаправить пользователя на определенную страницу (страницы) без санкций со стороны поисковых машин, необходимо использовать этот код: 55

#Настраиваем SEO-Friendly 301 Redirect Redirect 301 /d/file.html http://your_domain.com/ r/file.html Не забудьте изменить your_domain.com на доменное имя пользователя, а /d/file.html и /r/file.html на соответствующие директории и страницы. 6. Создаем собственные страницы ошибок. Если нужно повысить уникальность ресурса и для этого заменить стандартный вид страниц ошибок, это возможно с помощью следующего кода: ErrorDocument ErrorDocument ErrorDocument ErrorDocument

401 403 404 500

/error/401.php /error/403.php /error/404.php /error/500.php

Не забудьте создать в корневой директории сервера папку «error» и разместить в ней соответствующие файлы. 7. Устанавливаем e-mail адрес по умолчанию для администратора сервера. Используйте данный код для того, чтобы установить e-mail адрес по умолчанию для администратора сервера: #Устанавливаем e-mail адрес по умолчанию для администратора сервера ServerSignature EMail SetEnv SERVER_ADMIN default@your_domain.com Не забудьте заменить default@your_domain.com необходимым пользователю e-mail адресом. 8. Защищаем определенный файл. Приводимый код позволяет запретить доступ к любому файлу: при запросе будет выдаваться ошибка номер 403. На примере закрыт доступ к самому файлу .htaccess, таким образом можно повысить уровень безопасности сайта: #Защищаем.htaccess файл

order allow,deny deny from all

56

9. Сжимаем компоненты сайта путем включения Gzip. При использовании Gzip сервер будет сжимать файлы перед отправкой их пользователю, посредством этого сайт будет грузиться быстрее: #Сжимаем компоненты сайта путем включения Gzip AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/javascript text/css application/x-javascript BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0[678] no-gzip BrowserMatch bMSIE !no-gzip !gzip-only-text/html Обратите внимание, что включение компрессии приведет к большей нагрузке на процессор сервера. В качестве альтернативы компрессии файлов с помощью Gzip можно использовать mod_deflate (предположительно, работает быстрее).

57

СПИСОК ЛИТЕРАТУРЫ 1. Алексеев, А.П. Информатика 2015: учебное пособие / А.П. Алексеев. – Москва: СОЛОН-ПРЕСС, 2015. 2. Прохоренок, Н.А. HTML, JavaScript, PHP и MуSQL Джентльменский набор web-мастера / Н.А. Прохоренок. – 3-е изд., перераб. и доп. – Санкт-Петербург: БХВПетербург, 2011. 3. Колисниченко, Д.Н. LINUX: полное руководство / Д.Н. Колисниченко, Аллен Питер. – Санкт-Петербург: Наука и тeхника, 2006. 4. Коэн, Л.И., Полный справочник на HTML, CSS и JavaScript / Л.И. Коэн, Д.И. Коэн. – Москва: ЭКОМ, 2007. 5. Вайк, А. JavaScript: справочник / А. Вайк. – 2-е изд. – СанктПетербург: ООО «ДиаСофтЮП», 2002. 6. Кантор, И. Современный учебник JavaScript [Электронный ресурс] / И. Кантор. – Режим доступа: http://learn.javascript.ru. 7. Котеров, Д.В. РНР 5 / Д.В. Котеров, А.Ф. Костарев. – 2-е изд., перераб. и доп. – Санкт-Петербург: БХВ-Петербург, 2008. 8. Зандстра, М. PHP. Объекты, шаблоны и методики программирования / М. Зандстра; пер. с англ. – 3-е издание. – Москва: Издательский дом «Вильямс», 2011. 9. Киммел, П. UML. Основы визуального анализа и проектирования / П. Киммел. – Москва: НТ пресс, 2006. 10. Беляев, С.А. Разработка игр на языке JavaScript: учебное пособие / С.А. Беляев. – 2-е изд., стер. – Москва: Лань, 2018. 11. Персиваль, Г. Python. Разработка на основе тестирования. Повинуйся Билли-тестировщику, используя Django, Selenium и JavaScript / Г. Персиваль. – Москва: ДМК Пресс, 2018. 12. Сакулин, С.А. Основы интернет-технологий: HTML, CSS, JavaScript, XML: учебное пособие / С.А. Сакулин. – Москва: МГТУ им. Н.Э. Баумана, 2017. 58

ОГЛАВЛЕНИЕ Введение ....................................................................................................... 3 1. Установка UBUNTUSERVER и пакета LAMP, организация виртуальных хостов ............................................................................................................ 5 Основные термины ................................................................................. 6 Лабораторная работа № 1 ...................................................................... 17 Вопросы для самоконтроля ................................................................... 18 2. Простые PHP и JAVASCRIPT скрипты, создание web-форм .................... 19 Работа с формами ................................................................................. 22 Лабораторная работа № 2 ...................................................................... 23 Вопросы для самоконтроля ................................................................... 24 3. Работа с системой управления базами данных MYSQL из PHP скриптов ...................................................................................................... 26 Работа с MySQL..................................................................................... 27 Создание и использование базы данных ................................................ 32 Создание таблицы .................................................................................. 34 Добавление записей .............................................................................. 36 Лабораторная работа № 3 ...................................................................... 36 Вопросы для самоконтроля ................................................................... 37 4. Использование технологии AJAX в скриптах ........................................... 38 Лабораторная работа № 4 ...................................................................... 39 Вопросы для самоконтроля ................................................................... 40 5. Данные в формате JSON, использование API web-систем ...................... 41 Лабораторная работа № 5 ...................................................................... 42 Вопросы для самоконтроля ................................................................... 43 6. Использование функции из библиотеки JQUERY .................................... 44 Лабораторная работа № 6 ...................................................................... 44 Вопросы для самоконтроля ................................................................... 45 Приложение ................................................................................................ 46 Список литературы ..................................................................................... 58 59

МИНЯЗЕВ Ринат Шавкатович

СКРИПТОВЫЕ ЯЗЫКИ WEB-ПРОГРАММИРОВАНИЯ (JavaScript, PHP, html/CSS)

Учебно-методическое пособие

Редактор Л.М. Самуйлина Компьютерная верстка и дизайн обложки – Н.Н. Семёнова Подписано в печать 17.08.22. Формат 60х84 1/16. Бумага офсетная. Печать цифровая. Усл. печ. л. 3,49. Тираж 50 экз. Заказ Б 47. Издательство КНИТУ-КАИ 420111, Казань, К. Маркса, 10 ISBN 978-5-7579-2632-2

960785757 926322