FAQ е акроним на често задавани въпроси в превод от английски език. FAQ е раздел от вашия сайт заслужил подобаващо внимание. Там са каталогизирани отговори на често зададени въпроси от потребители на вашия сайт. За пример, нека погледнем реален FAQ на adobe.com. Показаната техника е акордеон. По този начин се пести място и се постига известна интерактивност. Подобен FAQ може да постигнем с собствени сили и средства. Нужни са базови знания по: HTML, CSS, PHP, MySQL и Javascript.

За целта ще съхраним съдържанието на въпроси и съответния отговор в база данни, а после ще ги извлечем по познат начин, чрез PHP. Нека опитаме.

connect.php

<?php

//DB константи

/* MySQL hostname */
defined('DB_HOST') ? null : define("DB_HOST", "localhost");

/* MySQL database username */
defined('DB_USER') ? null : define("DB_USER", "root");

/* MySQL database password */
defined('DB_PASS') ? null : define("DB_PASS", 123456);

/* The name of the database */
defined('DB_NAME') ? null : define("DB_NAME", "faq");

//съединение с MySQL
 $id=mysql_connect(DB_HOST, DB_USER, DB_PASS) or die('No server connected');
 
//избор база данни
 mysql_select_db(DB_NAME, $id) or die('No DB selected');
 
//хак на енкодинга
 mysql_query('SET CHARACTER SET utf8', $id); 

connect.php се явява конфигурационен файл. В него задаваме константи за съответния хост, име на потребител, парола и последно - име на база данни. Тези константи вкарваме в проверка преди да ги предадем на функцията за свръзка. Коментар над съответната константа е ориентир за приложението й. При чупене на енкодинга с кирилицата добавяме хак на ред 24.

Извеждането на информацията от базата данни става посредством заявка в ред 2 на файл faq.php. Този файл можем да добавим, чрез функция include(); или впишем в html кода на нужното място за печатане.
Заявката се подава като параметър на функция mysql_fetch_assoc. Резултатът на функцията връща асоциативен масив, когото присвояваме на променлива $row. За пълно обхождане на полетата на таблицата вкарваме резултата в цикъл while. Краен резултат печатим с конструкция echo, когото стилизираме, чрез класове question и answer.

faq.php

<?php
  $res = mysql_query('SELECT * FROM `faq`.`faq`' , $id);

  while($row = mysql_fetch_assoc($res)){
   echo '<div class="question">' .$row['question']. '</div>
   <div class="answer">' .$row['answer']. '</div>';
  }
 ?>

style.css

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

Визията на секция FAQ поверяваме на изпитания CSS. Въпрос на импровизация и вкус у всеки дизайнер. Показания style.css e примерен. Задаваните въпроси ще гримираме с клас question, а техните отговори с клас answer. За да подскажем на потребителя, че въпросите са кликабелни добавяме свойства text-decoration и cursor с нужните им значения.
Свойство display: none ще скрие отговорите по подразбиране, дошли от конструкция echo. Показът им ще доверим на jacascript.

script.js

<script type="text/javascript" src="scripts/jquery.js"></script>
  <script type="text/javascript">
 $(document).ready(function(){
  $(".question").toggle(function(){
   $(this).next().slideDown();
  }, function(){
   $(this).next().slideUp();
  });
 });
  </script>

jQuery e framework на javascript. Идеята е, че се спестява писането на код, ако същото се изпълнява в чист javascript. Заобикалят се лесно проблемите с кросбраузността. В jQuery има заложени редица функции, които предават интерактивност на уеб-документа. Те са главна причина за този подход. Недостатък е допълнителното зареждане на библиотека около 80kB.

В ред 1 включваме библиотеката. Редове 3 и 9 са стандартни за синтаксиса на jQuery. Ред 3 диктува стартиране на някаква анонимна функция едва след пълно зареждане на документа. Ред 4 захваща клас question към когото прицепва тригер/превключвател. Превключвателят се явява функция, която съдържа конструкция this. Конструкцията следи настъпващо събитие по класа, тоест клик с мишката. При настъпило такова javascript-интерпретаторът се обръща към следващия клас (next()), а това е клас answer. Клас answer пада под управлението на функция slideDown() и настъпва отваряне - ефект акордеон. В обратен ред по същата схема се затваря answer от функция slideUp(). Функции slideDown() и slideDown() могат да получават параметър в милисекунди и така да ускоряваме или забавяме ефекта.
Това е всичко. Лесно и просто.

faq.php

<?php
defined('DB_HOST') ? null : define("DB_HOST", "localhost");
defined('DB_USER') ? null : define("DB_USER", "root");
defined('DB_PASS') ? null : define("DB_PASS", "");
defined('DB_NAME') ? null : define("DB_NAME", "faq");

$id=mysql_connect(DB_HOST, DB_USER, DB_PASS) or die('No server connected');
mysql_select_db('faq', $id) or die('No DB selected');
mysql_query('SET CHARACTER SET utf8'); 
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="bg" lang="bg">
<head>
  <title>FAQ</title>
  <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
   <style type="text/css">
.question{
 border: 1px solid #888;
 background-color: #ccc;
 padding-left: 10px;
 margin-top: 5px;
 text-decoration: underline;
 cursor: pointer;
}
.answer{
 border: 1px solid #ccc;
 padding: 5px;
 margin-bottom: 10px;
 display: none;
}
 </style>
 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js' type='text/javascript'></script>
  <script type="text/javascript">
 $(document).ready(function(){
  $(".question").toggle(function(){
   $(this).next().slideDown();
  }, function(){
   $(this).next().slideUp();
  });
 });
  </script>
</head>
<body>
    <div id="page">
      <h1>секция FAQ</h1>
   <p>Отговори на Често Задавани Въпроси</p>
 <?php
  $res = mysql_query('SELECT * FROM `faq`.`faq`');
  while($row = mysql_fetch_assoc($res)){
   echo '<div class="question">' .$row['question']. '</div>
   <div class="answer">' .$row['answer']. '</div>';
  }
 ?>
  </div>
</body>
</html>

Source Code e показан в качеството на учебно средство. Копирайте го в редактор. Съхранете го под faq.php. Качете го в директорията на Apache. Конфигурирайте в първите редове вашите настройки за връзка към база данни. Копирайте "phpMyAdmin SQL Dump" от секция MySQL приложен в спойлера. Импортирайте базата. Готово. Имате акордеон на локалния сървър, когото може да доразвиете според вашите нужди.





до нови срещи   ^.^