Створюємо скрипт питання відповідь на PHP для сайту

18.12.2017

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

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

Час ролика: 52:06

Посилання для скачування джерел: Завантажити вихідні коди

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

Крок 1. Створюємо БД для системи «запитання-відповідь»

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

Створимо необхідну нам БД. Про засади роботи з БД я розповідав у ряді попередніх уроків, тому тут буду пояснювати гранично коротко. Якщо Ви використовуєте пакет Денвер, то перейдіть по посиланню http://localhost/Tools/phpMyAdmin/ і Ви потрапите на сторінку веб-програми phpMyAdmin, призначеного для адміністрування MySQL. На цій сторінці ми даємо ім’я створюваної БД — назвемо її «faq».

Після кліка по кнопці «Create» створиться потрібна нам БД. Вся інформація в БД зберігається в таблицях, тому нам потрібно створити всі необхідні таблиці, створеної БД. Створимо таблицю з тим же ім’ям («faq») і кількістю полів 3.

Після кліка по кнопці «Go» ми потрапимо на сторінку зі структурою створюваної таблиці. Тут ми повинні дати імена 3-му створюваних полів і вказати ще деяку інформацію:

ім’я поля «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

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

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

Відмінно! Ми створили БД і потрібну нам таблицю. Тепер настав час отримати інформацію з неї за допомогою 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 можна перевести як «поки», тобто, поки буде виконуватися якесь умова (воно прописується в дужках) — ми будемо виконувати якийсь блок дій (вони прописуються в операторних дужках).

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

while(умова){
блок дій;
}

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

Весь код блоку PHP, який відповідає за виведення інформації питання-відповідь буде такою:

‘.$row[‘question’]. ‘

‘.$row[‘answer’]. ‘

‘;
}
?>

Як і говорилося, функція mysql_fetch_assoc() бере кожен ряд результату запиту змінної $res і повертає асоціативний масив $row. Як тільки ряди закінчаться — робота циклу завершиться. У блоці дій ми за допомогою функції (або, швидше, конструкції) echo виводимо в блоках кожне конкретне значення елементів question і answer масиву $row.

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

Крок 3. Пишемо функціонал jQuery

Для використання фреймворку jQuery нам, перш за все, знадобиться сама бібліотека. Поточну версію її можна завантажити на сайті http://jquery.com/

Збережену бібліотеку помістимо в каталог scripts під ім’ям jquery.js (можна і в будь-який інший каталог під будь-яким ім’ям). Тепер ми повинні підключити цю бібліотеку на потрібній сторінці. Робиться це дуже просто — всередині тегів head пропишемо такий рядок коду:

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

відбір елементів і формування набору jQuery» (вибірки);

відстеження подій, які відбуваються з відібраними елементами;

реакція на подію.

Основа основ роботи з jQuery як раз і полягає у першому пункті — відбір елементів, з якими ми будемо працювати. Як же ми можемо відібрати ці елементи. Все просто — для цього достатньо знань CSS… Розробники не стали вигадувати новий синтаксис для фреймворку і для формування вибірки використовували синтаксис CSS.

Давайте для початку визначимося трохи з тим, що нам потрібно зробити. Всі відповіді будуть приховані. По кліку (це як раз і буде подія) на питання — ми покажемо (це вже реакція на подію) відповідь на нього. А у вибірку відповідно ми повинні взяти всі питання. Як мовилося, для того, щоб взяти всі питання, — нам достатньо знань CSS… Ми неспроста блокам питань присвоїли class=»question». Саме за вказаною класу ми і можемо відібрати всі елементи з цим класом в набір jQuery (хоча способів відбору jQuery нам надає масу). Взяти всі потрібні нам елементи ми можемо лише одного рядка коду:

$(«.question»);

Як бачите, використовується синтаксис CSS, тобто, ми взяли всі елементи з класом question. Далі ми будемо просто відстежувати події щодо відібраних елементів.

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

.question{
cursor: pointer;
text-decoration: underline;
background-color: #ccc;
border: 1px solid #888;
margin-top: 5px;
padding-left: 10px;
}
.answer{
border: 1px solid #ccc;
padding: 5px;
margin-bottom: 10px;
display: none;
}

Коротко опишемо те, що ми прописали в коді. Клас question:

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

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

$(document).ready(function(){
$(«.question»).toggle(function(){
$(this).next().slideDown();
}, function(){
$(this).next().slideUp();
});
});

Насамперед, ми прописали подія 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. Цей же принцип може бути використаний і для, наприклад, форми зворотнього зв’язку на сторінці. Для того, щоб вона не займала багато місця на сторінці — ми можемо її приховувати і показувати тільки тоді, коли користувач вирішить її заповнити. Для цього нам достатньо помістити посилання з текстом типу «Розгорнути форму» і по кліку на цей текст — показувати форму. На цьому урок закінчено. До нових зустрічей!

Радий бачити ваші відгуки і питання в коментарях!