FAQ с использованием PHP-jQuery и текстовых файлов.


Содержание материала:

Пример работы Ajax и txt-файла

После пройденных уроков пора перейти и к примерам! В этом уроке рассмотрим примеры работы асинхронной и синхронной передачи данных в Ajax на примере txt-файлов.

Пример синхронной передачи данных в Ajax + TXT

Скажу сразу — для создания примера достаточно создать два файла (ajax.txt и index.html) и вставить в них содержимое, указанное ниже. Итак, делаем по шагам:

1. Создаём самый обычный txt-файл.
2. Назовём его ajax.txt
3. Вставляем в него любой текст, который вы хотите увидеть, а затем сохраняем.

Текст в ajax.txt (в качестве примера)

4. Создаём html-файл.
5. Назовём его index.html
6. Вставляем код указанный ниже (надеюсь, что после предыдущих уроков понятно, что в нём и к чему. Если есть вопросы, то просмотрите последние 2-3 урока).

Код HTML и JS (файла index.html)

Пример асинхронной передачи данных в Ajax + TXT

1. Используем созданный в первом примере файл ajax.txt. Содержимое можно не менять:

Текст в ajax.txt (в качестве примера)

2. Создаём html-файл.
3. Назовём его index.html
4. Вставляем код указанный ниже (надеюсь, что после предыдущих уроков понятно, что в нём и к чему. Если есть вопросы, то просмотрите последние 2-3 урока).

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

Спасибо за внимание! Переходим к более сложным примерам!

Поиск текстовых файлов с помощью PHP с пользовательского ввода

Ищете решение для поиска по списку Zip-кодов. У меня есть текстовый файл с кучей почтовых индексов, которые мы обслуживаем. Хотелось бы иметь форму на веб-сайте с просьбой ввести свой почтовый индекс, чтобы узнать, обслуживаем ли мы эту область. Если это так, отобразите сообщение о том, что мы делаем, если нет, заявив, что мы этого не делаем. Мысль PHP будет лучшим решением для моей проблемы, но я все-таки нуб, когда дело доходит до этого.

У меня есть моя форма, я просто не уверен, как искать текстовый файл и отображать ответ в другом div?

Простая форма обратной связи без перезагрузки страницы на PHP+jQuery

Я много видел разных мудреных реализаций форм обратной связи в Интернете и думаю, что даже заядлый программист не сразу разберется в работе такого кода. А зачем, собственно говоря, усложнять работу, если все можно сделать как никогда просто, не так ли?

Сегодня я хотел бы показать самую простую и на 100% рабочую реализацию формы обратной связи без перезагрузки страницы с использованием технологии AJAX (jQuery) и обработки/отправки данных на PHP.

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

Технология AJAX, если вы еще не знаете, позволяет без перезагрузки страницы передать значения в PHP-скрипт (и не только), где, уже приняв эти данные, можно произвести необходимые операции.

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

Простой пример формы обратной связи без перезагрузки страницы

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

1. Первым делом сверстаем форму с нашими полями. CSS-стили мы упустим, так как сейчас нам это не так важно. В качестве полей сделаем «Имя», «E-mail» и поле для ввода сообщения:

Обратите внимание на элемент с классом «result» – в него мы будем выводить сообщения об ошибках или успешном отправлении сообщения.

2. Далее пишем скрипт, который соберет все данные с формы и отправит их в наш PHP-обработчик:

Скрипт вставляем перед закрывающим тегом

Простая FAQ страница на сайте с jQuery, HTML и CSS

На всех успешных или популярных сайтах есть страница FAQ (Frequently Asked Questions).

Переводя на русский, FAQ — это «Часто Задаваемые Вопросы». Такая страница помогает ответить на часто задаваемые вопросы от пользователей.

В этой записи я хочу поделиться вариантом того, как такую страницу можно сделать с использованием HTML, CSS (SASS — необязательно) и jQuery.

FAQ демо

Ниже я покажу и немного опишу код, который использовался для создания FAQ страницы из демо выше.

Ниже представлен каркас для FAQ, который я в дальнейшем использовал для jQuery, чтобы открыть/закрыть вопрос.

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

Основная часть этого каркаса — это маркированный список (

    ), внутри которого пишутся
    .

Каждый

  • элемент — это новый вопрос в FAQ. Так же, каждый
  • должен включать в себя

    — это ответ на вопрос из

    Далее нужно сделать примерный дизайн для FAQ.

    CSS (SCSS)

    С помощью CSS нужно придать каркасу выше более-менее приятный вид. Я использовать SCSS препроцессор, так как это быстрее и понятнее для меня.

    Если вы не понимаете как пользоваться препроцессором SCSS, то во вкладке CSS есть кнопка «View Compiled» как показано на скриншоте ниже:

    Нажав на нее, вы сможете посмотреть уже скопилированный CSS, то есть его нормальный (традиционный) вид. Как например код ниже.

    После этого нужно добавить немного магии с помощью jQuery.

    jQuery

    С помощью jQuery я смогу контролировать события связанные с FAQ страницей. Например, чтобы при нажатии на заголовок вопроса — открывался ответ на него. Или чтобы при нажатии на другой вопрос (при условии того, что какой-либо вопрос уже был открыт), предыдущий скрывался и открывался только текущий.

    Из jQuery скрипта выше, видно три основных переменные — это $speed , $class и $class_open .

    $speed отвечает за скорость скрытия или показа ответа на вопрос при нажатии на заголовок.

    $class — это имя класса, которое добавляется на

  • элемент открытого вопроса. Например, если вы нажали на первый вопрос, то на
  • элемент текущего вопроса будет добавлен класс, который вы напишите для этой переменной.

    $class_open — это имя класса, которое используется для ответа на каждый из вопросов. Если вы поменяли имя класса в HTML каркасе, то для этой переменной его тоже нужно поменять.

    В целом логику работы данного скрипта я уже описал выше. Если у вас остались какие-либо вопросы — вы можете написать их ниже, к этой записи.

    Создание FAQ (ЧаВо) с помощью jQuery

    Этот урок поможет Вам научиться легко создавать страничку ответов на часто задаваемые вопросы (FAQ).

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

    Прежде всего нам необходимо вставить следующий код между тегами :

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

    Топ-пост этого месяца:  Как исправлять битые ссылки на сайте

    Как Вы видите все должно находиться внутри слоя с .

    Вот и все готово. Ничего сложного в этом нет.

    Однако, я хотел бы остановиться еще немного на возможных настройках данного плагина. В первом отрывке кода есть следующие строки:

    Начну с конца. faqHeader — задает тег, в котором будет находиться вопрос (т.е. всегда будет на виду). По желанию, его можно заменить на h3, h4 и т.д. displayIndex — если стоит «true», тогда в самом начале документы выводит оглавление всех вопросов («false» — отключает эту возможность). indexTitle — актуален, если предыдущая функция включена. И эта настройка — это текст, который находится над оглавлением.

    Всем спасибо! До завтра!

    Данный урок подготовлен для вас командой сайта ruseller.com
    Источник урока: www.dscoduc.com
    Перевел: Максим Шкурупий
    Урок создан: 17 Мая 2009
    Просмотров: 42708
    Правила перепечатки

    5 последних уроков рубрики «jQuery»

    Анимация набора текста на jQuery

    Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

    Временная шкала на jQuery

    jQuery плагин для создания временной шкалы.

    Заметка: Перезагрузка и редирект на JavaScript

    Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

    Рисуем диаграмму Ганта

    jQuery плагин для создания диаграммы Ганта.

    AJAX и PHP: загрузка файла

    Пример того как осуществить загрузку файла через PHP и jQuery ajax.

    Нахождение точного совпадения в текстовом файле с использованием PHP AJAX JQuery формы

    У меня есть .txt файл, в котором я хотел бы, чтобы найти точное совпадение одного адреса электронной почты, введенной в форме.

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

    Если человек входит в «Bobby @» он говорит, что не нашел, хорошо.

    Если кто-то вводит свой полный адрес электронной почты, и он существует в файле, он говорит, что «нашел», очень хорошо.

    Теперь, если кто-то входит только «Бобби», он говорит, что «нашли», не хорошо.

    Я использовал следующие три примера ниже с теми же результатами.

    мой текстовый файл

    Я думал об использовании функции JQuery, чтобы принимать только полный адрес электронной почты, но без успеха отчасти потому, что я не знаю, куда поместить его в сценарии.

    Я провел много времени в поисках решения этого, и я теперь прошу о помощи.

    Использование php & jquery для отправки данных из текстовых полей в текстовый файл (csv) и проверки этого путем чтения в разные текстовые поля на одной и той же веб-странице

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

    Когда страница загружается, jquery успешно заполняет текстовые поля «сохраненные в настоящее время» значениями, считанными с сервера csv-файла, с использованием php. Когда я ввожу новые значения, а затем нажмите кнопку [отправить], чтобы сохранить эти значения, файл сервера будет успешно обновлен.

    И вот следующие шаги, на которых возникает проблема, я могу использовать php для чтения вновь сохраненных значений из файла сервера и «предупредить» их, чтобы убедиться, что они верны, но строки jquery для обновления » в настоящее время сохраненные настройки «не будут обновляться. Мне нужно обновить веб-страницу, чтобы обновить эти текстовые поля. Я должен сказать, что «предупреждения» отображают правильные (вновь сохраненные) значения, поэтому все до этой точки отлично работает, так как только следующие две строки jquery, которые работают на загрузке страницы, похоже, не выполняются на данный момент.

    Надеюсь, что-то мертвое просто. Мне здесь не хватает.

    (Сам файл CSV просто два параметра, используемые в полной отдельной и не связанной части программного обеспечения.)

    Помощь высоко ценится.

    PHP файл следующим образом:

    Создан 22 май. 13 2013-05-22 00:13:46 gmnt

    Работа с файлами в PHP

    Под работой с файлами в PHP подразумевается чтение из файла и запись в файл различной информации. Совершенно очевидно, что работать с файлами приходится много, поэтому любой PHP-программист обязан уметь считывать из файла и записывать в файл.

    Последовательность работы с файлами в PHP такая:

    1. Открыть файл.
    2. Выполнить необходимые действия.
    3. Закрыть файл.

    Как видите, последовательность работы с файлами напоминает работу с файлами через обычный проводник. Только здесь вся работа выполняется автоматически самим PHP-скриптом.

    Начнём с первого пункта — открытие файла. Файл открывается с помощью функции fopen(). Первый параметр — это путь к файлу, а второй параметр — модификатор. Давайте сразу разберём возможные модификаторы:

    1. a — открывает файл только для записи, причём указатель помещается в конец файла.
    2. a+ — то же самое, что и модификатор a, но также файл открывается ещё и для чтения.
    3. r — открывает файл только для чтения, а указатель устанавливается в начало файла.
    4. r+ — то же самое, что и модификатор r, но также файл открывается ещё и для записи.
    5. w — открывает файл только для записи, указатель устанавливает в начало файла и стирает всё содержимое файла.
    6. w+ — то же самое, что и модификатор w, только файл открывается также и для чтения.

    Также различают два режима работы с файлами: бинарный (обозначается b) и текстовый (обозначается t). Если Вы работаете с обычным текстовым файлом, то выбирайте текстовый режим, а если, например, с изображением, то бинарный.

    Это все основные модификаторы, которых Вам вполне хватит. Теперь давайте узнаем, как закрыть файл. Закрывается файл с помощью функции fclose().

    Теперь перейдём к чтению файла с помощью функции fread(). И давайте, наконец-то, приведу пример:

    В данном примере мы сначала открываем файл для чтения в текстовом режиме (модификатор rt). Функция fopen() возвращает так называемый дескриптор, с помощью которого можно общаться с файлом, и записываем его в переменную handle. Затем мы в цикле while() до тех пор, пока не достигнут конец файл, считываем содержимое каждый раз по 4096 символов, которые записываем в переменную contents. После завершения процесса считывания — закрываем файл, вновь с помощью дескриптора файла.

    Теперь перейдём к записи с помощью функции fwrite():

    После запуска этого скрипта, в файле a.txt добавится строка «This is text«.

    Особо внимательные читатели обратили внимание на указатели, о которых я писал чуть выше. Указатель — это текущая позиция воображаемого «курсора» в файле. Именно с него и начинается работа с файлом. Изменить положение указателя можно с помощью функции fseek():

    Таким образом, мы сначала считываем 3 символа (в результате, текущее положение указателя сдвигается на 3 позиции). Затем мы устанавливаем указатель на начало файла. И вновь считываем 3 символа. Как Вы и догадались, мы два раза считали одно и тоже. То есть первый раз 3 символа, потом вернулись назад, и вновь считали 3 символа. Также если у функции fseek() заменить SEEK_SET на SEEK_CUR, то тогда второй параметр будет не устанавливать позицию указателя, а сдвигать относительно текущего местоположения. Советую даже попрактиковаться с указателями, потому что для понимания это не так просто. Также рекомендую попытаться записать что-нибудь в файл при позиции указателя, например, в самом начале файла. И обязательно объясните полученный результат.

    И, напоследок, хочется привести ещё пару функций, которые позволяют работать с файлами на самом простом уровне: file_put_contens() и file_get_contents(). Функция file_put_contents() записывает в файл, а функция file_get_contents() считывает содержимое из файла. Эти функции очень просты в применении, но возможностей там уже меньше (хотя, как правило, они и не нужны):

    В данном скрипте мы сначала записали строку «This is text 2» в файл, а потом считываем полученное содержимое и выводим его. Как видите, трудно придумать более простой способ чтения из файла и запись в файл.

    Топ-пост этого месяца:  Angular введение плюсы и минусы версии JS, тестирование и повышение производительности

    Вот и все основные моменты работы с файлами в PHP.

    Chat2: Чат, разработанный при помощи PHP, jQuery и текстового файла

    Это дополнение к прежней статье о разработке чатов, которую мы публиковали ранее. В некотором роде, технология остается та же. Мы применим PHP для связи с сервером, jQuery – для поддержания работы чата, а сами разговоры будут храниться в текстовых файлах, так же как и в первой версии.

    Изменения коснулись некоторых новых функций:

    * Имена пользователей являются уникальными для тех пользователей, которые на данный момент общаются в чате
    * Теперь вы можете посмотреть список пользователей, которые на данный момент находятся в чате
    * В чате теперь несколько комнат

    Немного о MySQL

    Хоть и первая версия чата вообще не использовала баз данных, в этой версии мы собираемся воспользоваться MySQL. В приложенном архиве есть файл под названием Setup.sql. Он используется для построения первоначальной базы данных. MySQL, собственно, используется не для самого чата, а для двух других функций, связанных с ним:

    * Прослеживание активных пользователей
    * Комнаты

    Когда кто-то заходит в чат, он выбирает имя пользователя. С помощью библиотеки jQuery мы делаем AJAX-запрос с целью определения, используется ли это имя в базе данных чата. Если оно занято, вы получите предупреждение:

    В противном случае, система оповестит пользователя, что все в порядке:

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

    Добавление / Изменение/ Удаление комнат

    Названия комнат хранятся в базе данных. Чтобы добавить новую комнату, просто добавьте в базе данных новый ряд и название того текстового файла, где вы планируете хранить этот чат:

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

    Мы уверены, вы заметили, что мы до сих пор не показали ни одного кода. Мы это сделали специально. Весь код доступен в приложенных файлах (см. ниже). Его не так много, как кажется, но мы считаем, что для стандартного письменного руководства/обзора это все-таки многовато. Вместо чтения кода, давайте лучше посмотрим, за что он отвечает:

    Проверка имени пользователя: Когда вы выбираете имя пользователя на главной странице чата, jQuery отслеживает ввод текста. Когда вы набираете символ (в момент нажатия клавиши), она запрашивает у определенного файла PHP (через AJAX), используется ли это имя. Файл PHP отвечает «да» или «нет», и на мониторе появляется соответствующее сообщение.

    Окно сообщений: Когда пользователь печатает в поле ввода текста свое сообщение, jQuery отслеживает это поле и проверяет, чтобы в тексте было определенное количество символов (этот параметр настраивается с помощью атрибута «maxlength» тэга «textarea»)

    Отсылка сообщений: Когда пользователь в окне сообщений нажимает клавишу return/enter (возврат/ввод), ее значение отсылается на обработку. PHP записывает текст в соответствующий текстовый файл.

    Обновление чата: Каждые несколько секунд jQuery запрашивает PHP файл на предмет проверки текстового файла чата – не появилось ли там новых строк. Если новые строки есть, они отображаются в окне чата.

    Функции, которых нет у этого чата

    * Вы не можете «выбрасывать/кикать» людей из чата
    * Он не воспринимает спецсимволы

    Вы хотите добавить эти функции? Нам бы это понравилось, и тогда мы обновим эту версию.

    Скачать файлы и демо-версию

    НЕКОТОРЫЕ ИСПОЛЬЗОВАЛИ ДЕМО-ФАЙЛ – мы, конечно, знали, что некоторые люди могут быть глупыми, и ожидали этого. Но, как оказалось, у одной из функций демо возникла проблема с БЕЗОПАСНОСТЬЮ, и, благодаря ей, открывается доступ к любому файлу на сервере. Один из читателей показал мне, как он спокойно получает доступ к моему файлу WordPress — wp-config.php. А он, конечно, супер чувствителен. Уязвимость находится в файле update.php, который принимает параметры «состояние» и «файл». При прямом доступе и при наличии соответствующего пути к файлу, вы можете зайти по нему в защищенные файлы. Когда мы это исправим, то обновим загрузочные коды.

    Особая благодарность Кенрику Бекетту, который разработал исходный код, и Джейсону Ленгсторфу за отслеживание различных багов относительно безопасности.

    Вот предложения, которые мы получили от людей или которые мы сами считаем хорошей идеей:

    * Исправить проблему с безопасностью, описанную выше
    * Контроль флуда в чате (ограничения вроде: вы можете публиковать только одно сообщение за 5 секунд)
    * Ссылка (кнопка) выхода (удаление PHP сессии)
    * Разрешать использование HTML, но только определенных тэгов (разработать «белый список»). Например, разрешить «a href=»», но запрещать javascript. Возможно, добавить несколько кнопок для HTML (WYSIWYG?). Подсветка кода в чате, заключенного в тэг «code».
    * Разрешить регистрацию постоянного имени пользователя (со всеми вытекающими, например «Забыли пароль?»)
    * Защита от несуществующих имен комнат в чате, например, /Chat2/room/?name=LOL
    * Поддержка специальных символов (UTF-8)
    * Введение сервиса приватных сообщений (@) (только тот человек, к которому обращаются с определенного имени пользователя, увидит его)
    * Включение возможности «выкидывать»/банить пользователей по IP (функция только для администратора, либо же просто помещать IP-адреса в «черный список»)
    * Больше смайликов
    * Сделать саму кнопку отсылки сообщения (для мобильных устройств, которые поддерживают javascript, но не имеют привычных для компьютера клавиш)
    * Автоматический фильтр ненормативной лексики
    * Использование наружной системы авторизации, например, Twitter oAuth, Google Login или Facebook Connect
    * Ввести имена пользователей в виде их email, а затем использовать Gravatars
    * Запретить ссылки с доменами из 4 букв (например, .info)
    * Долговременный опрос вместо запроса каждые несколько секунд

    Вам понравился материал? Поблагодарить легко!
    Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

    PHP и JavaScript

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

    В языках PHP и JavaScript предусмотрены разные объектные системы обозначений. В языке JavaScript используется так называемая уточняющая запись через точку в стиле C#, тогда как в языке PHP используются стрелки, иначе говоря, система обозначений в стиле C++. Язык JavaScript полностью объектно-ориентирован, тогда как в языке PHP объекты рассматриваются как необязательное средство. Такое различие систем обозначений имеет свое преимущество в том, что невозможно когда-либо спутать объект JavaScript с объектом PHP, или наоборот. А недостатком является то, что отсутствует возможность обратиться к одному и тому же объекту из обоих языков.

    Вывод кода JavaScript с помощью сценария PHP

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

    Безусловно, язык PHP обладает большими возможностями по созданию динамически формируемых веб-страниц, но PHP — исключительно серверный язык. К тому же есть одна общая категория задач, решаемых на веб-сайте, для которых чаще всего не требуется вся обрабатывающая мощь сервера, и поэтому эти задачи быстрее и проще решаются в клиентском программном обеспечении. К таким задачам, например, относится изменение внешнего вида кнопки при перемещении над ней курсора мыши. Для решения многих подобных задач можно легко применить язык JavaScript, который представляет собой чисто клиентский язык (безусловно, имеется и серверная версия этого языка, но предполагается, что для этой цели уже выбран язык PHP) и легко интегрируется с языком PHP.

    С другой стороны, клиентский язык JavaScript сам по себе характеризуется многими ограничениями. Например, будучи клиентским языком, JavaScript не позволяет организовать непосредственное взаимодействие с базой данных, поэтому сценарии JavaScript не способны обновлять сами себя путем получения новых данных, зависящих от условий просмотра страницы.

    Топ-пост этого месяца:  Как дописать if-else для вывода(постов-рубрик)

    Еще более важный недостаток состоит в том, что невозможно полностью полагаться на клиентские технологии, поскольку язык поддержки этих технологий может оказаться не установленным или запрещенным в браузере пользователя. Сознательные разработчики клиентских приложений для веб вынуждены либо выбирать вариант реализации кода наугад (и получать жалобы от пользователей менее распространенных браузеров), либо одновременно сопровождать несколько версий одного и того же сайта. (Несознательные разработчики просто берут за основу все возможности браузера, наиболее распространенного в среде пользователей, и, как один старый моряк, говорят: «К черту торпеды. «, но это — совсем другая история.) Язык PHP позволяет смягчить эффекты, связанные с неопределенностью поддержки клиентского программного обеспечения.

    Широкие возможности вывода данных в языке PHP

    Одной из наиболее важных особенностей языка PHP является то, что с его помощью можно обеспечить вывод кода в различных форматах. В частности, PHP может применяться (и применяется) для вывода открытого текста, кода HTML, XHTML, JavaScript, XML, MathML, файлов в различных графических форматах, кода CSS, XSL и даже (что трудно сначала представить себе) кода ASP.NET.

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

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

    Но этот пример не демонстрирует наилучший способ формирования кода JavaScript в сценарии PHP. Гораздо удобнее формировать основной объем кода определения функций JavaScript в элементе HTML-страницы и просто вызывать эти функции в элементе , используя для формирования этих вызовов главным образом язык PHP.

    Как и при формировании в сценарии PHP кода HTML, в некоторых случаях код JavaScript можно формировать, не выходя из режима PHP. К тому же подобный стиль организации работы сценариев PHP может соответствовать личным предпочтениям разработчика. В этом случае для вывода кода JavaScript может использоваться оператор echo или print языка PHP, как в следующем примере:

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

    Области применения языка JavaScript

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

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

    Простая проверка правильности формы (например, определение наличия символов @ в адресах электронной почты).

    Реализация средств навигации сайта (например, создание разворачивающихся меню навигации).

    Создание всплывающих меню (предупреждений, окон поиска).

    Обработка событий, обнаруживаемых в браузере (mouseover, onclick).

    Резервирование функциональных средств кода JavaScript с помощью кода PHP

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

    Если в браузере посетителя будет разрешено применение языка JavaScript, то посетитель получает возможность воспользоваться более быстрым методом. В противном случае применяется менее быстрый, резервный метод, но обычно посетители даже не замечают, что в коде сайта реализуется подобный выбор. А если бы не было возможности вместо кода JavaScript переходить к использованию кода PHP, то пользователи браузера без поддержки JavaScript были бы полностью лишены доступа к функциональным средствам сайта.

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

    В этом примере взят за основу тот факт, что в коде JavaScript имеются обработчики событий (например, onchange), которые выполняют свои действия в результате прохождения курсора над элементами формы HTML, поэтому фактически не требуют передачи данных формы щелчком на кнопке. Это означает, что кнопка Submit может быть зарезервирована для использования в коде PHP. В примере ниже показан сценарий формирования HTML-страницы, в котором используется перенаправление с помощью события onchange языка JavaScript, а если этот код не работает, то применяется обработчик формы PHP:

    Обработка формы с помощью JavaScript

    В файле обработчика формы PHP, называемом redirect.php, достаточно предусмотреть только две строки:

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

    Сравнение методов статического и динамического формирования кода JavaScript

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

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

    Исходная страница с динамически генерируемой формой

    Несомненно, читатель уже понял, что аналогичный метод может оказаться буквально бесценным, даже если создается простая форма JavaScript (например, такая, в которой используется обработчик событий onsubmit, а не onchange). В частности, этот метод позволяет модифицировать вызовы обычных функций JavaScript, поскольку язык PHP позволяет изменять значения переменных в вызове функции, до того как код этого вызова будет отправлен в браузер. Поэтому при желании сценарии PHP могут использоваться непосредственно для вывода кода JavaScript, в котором предварительно осуществляется подстановка значений переменных, взятых из какого-то источника данных.

    Передача данных в обратном направлении, из кода JavaScript в код PHP

    Наконец, рассмотрим, как завершить цикл обработки данных, снова передав значения формы в код PHP из кода JavaScript. В примере ниже показано, как использовать код JavaScript, для передачи в сценарий PHP простого объекта:

    Передача объекта из кода JavaScript в код PHP с использованием формата JSON Взаимодействие JavaScript и PHP Безопасность PHP и XML

  • Добавить комментарий