Создаем скрипт вопрос ответ на PHP для сайта

faq для сайта

От автора: в этом уроке мы создадим с вами систему вопросов и ответов на PHP, используя также для этих целей возможности MySQL и jQuery. Такую систему чаще всего называют FAQ или ЧАВО и ее использование ограничено лишь Вашей фантазией — ведь это может быть не только система вопрос-ответ, но и, к примеру, пошаговая инструкция при выполнении каких-либо действий или что-либо еще.


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

Время ролика: 52:06

Ссылка для скачивания исходников: Скачать исходники

Ссылка для скачивания всего архива (видео+исходники): Скачать одним архивом. Размер: 126 mb.

Шаг 1. Создаем БД для системы вопрос-ответ

Прежде всего, нам необходимо создать хранилище для информации — это, конечно же, удобнее это сделать, используя БД. Если у Вас будет небольшая по объему страница и для нее не нужна будет БД — этот шаг вполне можно пропустить. Также, если Вы не хотите создавать БД вручную, то можете воспользоваться дампом БД из дополнительных материалов и просто импортировать его (как это сделать я показываю в видео).

Создадим необходимую нам БД. Об основах работы с БД я рассказывал в ряде предыдущих уроков, поэтому здесь буду объяснять предельно кратко. Если Вы используете пакет Денвер, то перейдите по ссылке //localhost/Tools/phpMyAdmin/ и Вы попадете на страницу веб-приложения phpMyAdmin, предназначенного для администрирования MySQL. На этой же странице мы даем имя создаваемой БД — назовем ее «faq».
faqphp

После клика по кнопке «Create» создастся нужная нам БД. Вся информация в БД хранится в таблицах, поэтому нам нужно создать все необходимые таблицы в созданной БД. Создадим таблицу с тем же именем («faq») и количеством полей 3.

faqphp

После клика по кнопке «Go» мы попадем на страницу со структурой создаваемой таблицы. Здесь мы должны дать имена 3-м создаваемым полям и указать еще некоторую информацию:

faqphp

имя поля — «id», тип — INT, Index — PRIMARY, AUTO_INCREMENT;

имя поля — «question», тип — VARCHAR, длина — 255;

имя поля — «answer», тип — TEXT.

Давайте вкратце разберем каждое из полей. С именами, думаю понятно — в первом поле «id» мы храним идентификатор пары вопрос-ответ. Во втором поле «question» — храним вопрос и в третьем «answer» — ответ на этот вопрос.

Далее, тип поля. Для поля «id» мы указали тип INT — это целочисленный тип, т.е., в этом поле будут храниться только целые числа. Тип VARCHAR — это символьный (текстовый) тип, предназначенный для хранения небольших текстов, его длина — 255 символов. В поле типа TEXT можно хранить тексты больших объемов. Кроме того, для первого поля — «id» — мы указали Index — PRIMARY (в русскоязычной версии phpMyAdmin это «первичный ключ») и AUTO_INCREMENT. Эти два атрибута значат, что указанное поле мы не будем заполнять, его будет заполнять сервер. При этом все значения, заносимые в данное поле, будут уникальными, и каждое новое значение будет увеличено на единицу (автоинкремент). Если провести какую-нибудь знакомую аналогию, то это поле можно сравнить с номером по порядку в таблицах.M

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

faqphp

Как я говорил, мы заполняем только поля «question» и «answer», поле «id» будет заполняться сервером. Я создам 3 пары вопрос-ответ, но у вас их может быть сколь угодно много.

faqphp

Отлично! Мы создали БД и нужную нам таблицу. Теперь пришло время получить информацию из нее с помощью PHP, и создать полноценное приложение вопросов и ответов.

Шаг 2. Получение информации из БД, обработка её средствами PHP

Для урока я нашел в сети бесплатный шаблон сайта, в котором создал страницу faq.php. Обратите внимание, что расширение страницы должно быть именно php, поскольку в ней будет присутствовать код PHP. Перед получением информации из БД, мы должны с ней соединиться. Обычно соединение с БД выносят в отдельный файл, который затем просто подключают к странице. Но наш проект учебный и, к тому же, совсем небольшой, поэтому мы все будем делать на одной странице. Итак, откроем в редакторе страницу faq.php и в самом верху страницы подключимся к БД. Делается это при помощи 2-х функций: mysql_connect(«имя сервера», «пользователь», «пароль») и mysql_select_db(«имя БД»). Первой функцией мы подключаемся к серверу БД (в скобках указаны параметры, с которыми работает функция), второй — выбираем нужную БД для работы (на сервере ведь может быть не одна БД):

Так как я работаю на Денвере, то указываю имя сервера «localhost» (в Вашем случае, скорее всего, имя сервера будет таким же, даже если Вы работаете на сервере хостера… все данные по работе с сервером хостер предоставляет в инструкции). По умолчанию уже создан пользователь с именем «root», которое я и указал. Пароль для этого пользователя не создан, поэтому в качестве третьего параметра функции mysql_connect() я указал пустое значение. Также желательно дописывать при работе с сервером MySQL условие на тот случай, если при соединении с сервером произошла какая-либо ошибка. Это желательно делать по той простой причине, что если не удалось соединиться с сервером, значит не будет вытащена информация на страницу, а, значит, страница будет полупустой, кроме того, на ней еще и будут выведены всевозможные ошибки. Мы задали такое условие функцией die(), которая в случае ошибки прекратит выполнение программы и выведет сообщение, указанное в кавычках.

Второй функцией мы выбираем нужную нам БД. Теперь мы можем сохранить файл и обновить страницу. Если все сделано верно, то страница должна загрузиться без всяких сообщений и ошибок. После успешного подключения мы можем получать информацию из нужной таблицы (таблиц также может быть несколько в выбранной БД). «Общение» с сервером MySQL происходит посредством запросов. Нам нужен всего один запрос, которым мы вытащим всю информацию из таблицы «faq». В запросе нам понадобится оператор SELECT, который, собственно, и обеспечивает выборку необходимой информации. Сам запрос отправляется в БД функцией mysql_query().

Итак, в нужном месте блока page (там, где мы хотим выводить вопрос-ответ) открываем конструкцию PHP и пишем запрос:

Для тех, кто знаком хоть немного с английским этот запрос будет практически полностью понятен. Затруднения может вызвать только символ звездочка («*»). Этот символ можно прочитать как «все» («all»). Сам же запрос можно прочитать так: «ВЫБРАТЬ все ИЗ таблицы faq«. Все выбранное мы поместим в переменную $res. Таким образом, мы получили в $res все содержимое таблицы (пока что 3 строки). Удобство работы с MySQL заключается не только в том, что мы можем хранить информацию в ней, но и в том, что этой информацией можно очень легко манипулировать. Мы можем вытащить только конкретный ряд (строку) или даже конкретное поле ряда. Кроме того, существуют функции для того, чтобы можно было легко манипулировать ВСЕЙ извлеченной информацией, как в нашем случае. Функция эта — mysql_fetch_assoc(). Данная функция обрабатывает каждый ряд результата запроса и возвращает ассоциативный массив. В нашем случае будет обработано 3 ряда.

Что такое ассоциативный массив я уже рассказывал в нескольких предыдущих уроках. Это массив, ключами которого выступает строка (ассоциация). Ключами нашего массива будут выступать имена полей в таблице «faq». Как я упоминал, функция mysql_fetch_assoc() обрабатывает 1 ряд запроса. У нас таких рядов пока что 3. Для того, чтобы было обработано все 3 ряда — нам понадобится осуществить просто 3 однотипных действия — в этом нам помогут циклы, а именно — цикл while(). О работе с данным циклом я также довольно подробно уже рассказывал, а потому здесь скажу только пару слов. Само слово while можно перевести как «пока», т.е., пока будет выполняться некое условие (оно прописывается в скобках) — мы будем выполнять некий блок действий (они прописываются в операторных скобках).

Синтаксис цикла:

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

Весь код блока PHP, отвечающего за вывод информации вопрос-ответ будет таким:

Как и говорилось, функция mysql_fetch_assoc() берет каждый ряд результата запроса из переменной $res и возвращает ассоциативный массив $row. Как только ряды закончатся — работа цикла завершится. В блоке действий мы при помощи функции (или, скорее, конструкции) echo выводим в блоках каждое конкретное значение элементов question и answer массива $row.

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

Шаг 3. Пишем функционал jQuery

Для использования фреймворка jQuery нам, прежде всего, понадобится сама библиотека. Текущую версию ее можно скачать на сайте //jquery.com/

Сохраненную библиотеку поместим в каталог scripts под именем jquery.js (можно и в любой другой каталог под любым именем). Теперь мы должны подключить эту библиотеку на нужной странице. Делается это очень просто — внутри тегов head пропишем такую строку кода:

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

отбор элементов и формирование «набора jQuery» (выборки);

отслеживание событий, которые происходят с отобранными элементами;

реакция на событие.

Основа основ работы с jQuery как раз и заключена в первом пункте — отбор элементов, с которыми мы будем работать. Как же мы можем отобрать эти элементы. Все просто — для этого достаточно знаний CSS… Разработчики не стали выдумывать новый синтаксис для фреймворка и для формирования выборки использовали синтаксис CSS.

Давайте для начала определимся немного с тем, что нам нужно сделать. Все ответы изначально будут скрыты. По клику (это как раз и будет событие) на вопрос — мы покажем (это уже реакция на событие) ответ на него. А в выборку мы, соответственно, должны взять все вопросы. Как говорилось, для того, чтобы взять все вопросы, — нам достаточно знаний CSS… Мы неспроста блокам вопросов присвоили class=»question». Именно по указанному классу мы и можем отобрать все элементы с этим классом в набор jQuery (хотя способов отбора jQuery нам предоставляет массу). Взять все нужные нам элементы мы можем всего одной строкой кода:

Как видите, используется синтаксис CSS, т.е., мы взяли все элементы с классом question. Далее мы будем просто отслеживать события по отобранным элементам.

Перед тем, как мы продолжим с jQuery — опишем созданные классы question и answer в таблице стилей. Для этого либо прямо на странице пропишем нужные стили, либо сделаем это в файле стилей layout.css:

Вкратце опишем то, что мы прописали в коде. Класс question:

— курсор сделаем в виде руки, т.е., такой, какой мы видим при наведении на ссылку;
— установим подчеркивание текста;
— фоновый цвет;
— рамка;
— внешний отступ сверху;
— внутренний отступ слева;
Класс answer:
— рамка;
— внутренние отступы;
— внешний отступ снизу;
— и ключевое свойство — скрываем блок.

После сохранения стилей — все ответы будут скрыты. Теперь пропишем весь код jQuery, а затем прокомментируем его:

Прежде всего, мы прописали событие ready(), в которое поместили весь остальной код. Это сделано для того, чтобы этот код выполнялся только после того, как будет полностью сформировано DOM-дерево или, говоря проще — после того, как полностью будет загружена страница. Для знакомых с английским она интуитивно понятна — после того, как будет готов (ready — готово) документ — выполним все необходимое. Что же именно мы выполним? Мы отберем все элементы с классом question (в набор попадут все наши 3 блока с вопросами). А далее мы применим к элементам набора метод toggle(). Что делает этот метод? Этот метод организует своеобразный переключатель функций. Поскольку нам необходимо только 2 состояния блоков с классом answer — показывать/скрывать — в переключатель мы поместим 2 функции (на самом деле таких функций может быть гораздо больше). Говоря простым языком — мы создали обычный выключатель с двумя положениями — on|off. Метод toggle() будет отслеживать событие клика по отобранным элементам и применять функцию, при этом одному клику будет соответствовать вызов одной функции. Чтобы было понятнее с порядком работы прописанных нами 2-х функций возьмем пример клик (реакция):

1-ый клик (вызов функции 1); 2-ой клик (вызов функции 2); ; 3-ий клик (вызов функции 1) и т.д.

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

Что же мы прописали в функциях, вызываемых переключателем (по клику)? Мы должны по клику на конкретный вопрос вызвать блок с ответом именно на конкретный вопрос. Например, по клику на вопрос 2 — показать ответ 2. Для этого нам достаточно перейти к следующем элементы после того, по которому произошел клик. Сделать это можно при помощи следующей записи: $(this).next(). Опять же, для тех, кто знаком с английским, все должно быть интуитивно понятным.

This (этот) — это указатель на текущий элемент, т.е., тот элемент, по которому был клик. Next (следующий) — это переход от текущего к следующему элементу. Поскольку следующим после вопроса будет ответ на него — как раз и будет выбран нужный нам элемент, к которому будет применен один из методов эффектов: slideDown (раскрывает элемент набора) или slideUp (скрывает элемент набора) — в зависимости от состояния переключателя.

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

Заключение

Вот таким вот не слишком сложным способом, мы реализовали нашу задумку и получили в итоге довольно неплохую систему вопросов и ответов на PHP, часто задаваемых вопросов — FAQ, ЧАВО. Как говорилось выше, использовать наше творение можно не только для создания страницы FAQ. Этот же принцип может быть использован и для, к примеру, формы обратной связи на странице. Для того, чтобы она не занимала много места на странице — мы можем ее скрывать и показывать только тогда, когда пользователь решит ее заполнить. Для этого нам достаточно поместить ссылку с текстом типа «Развернуть форму» и по клику на этот текст — показывать форму. На этом урок завершен. До новых встреч!

Рад видеть ваши отзывы и вопрос в комментариях!

JavaScript. БОЛЬШЕ ЧЕМ ПРОСТО САЙТ! Первый в рунете видеокурс по JavaScript!

Автор: Кудлай Андрей

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

E-mail: contact@webformyself.com

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии (58)