<Construir FAQ usando PHP+Ajax ⁄ >

/******* <estrutura e layout> *******/
body{
    font-family: Tahoma, Verdana, Arial, sans-serif;
    font-size: 8pt;color: #000000;margin: 2px;
    padding: 0;background: #6E726C;text-align: center;
}
.container{
    position: relative;clear: both;width: auto;height: auto;
    margin: 0px;padding: 1px;background: #ffffff;color: #000000;
    text-align: left;border: 1px solid #2F5B0C;
}
 
.div_faq{
    position: relative;float: left;
    width: 250px;margin: 2px 2px 5px 2px;
    padding: 2px;height: 500px;overflow: auto;
}
 
.div_faq_note{
    position: static;width: auto;padding: 2px;margin: 0;
    border: solid 1px #2F5B0C;height: 500px;overflow: auto;
}
 
.div_faq_note a{color: #FF5604;text-decoration: none;}
.div_faq_note a:hover{color: #FF5604;text-decoration: underline;}
 
.div_content{position: static;overflow: auto;width: auto;}
.content{
    color: #000000;font-family: Tahoma, Verdana, Arial, sans-serif;
    font-size: 8pt;padding: 2px;margin: 0;border: solid 1px #2F5B0C;
}
 
a{color: #FF5604;text-decoration: underline;}
a:hover{color: #E39243;text-decoration: none;}
img{border: none;}
 
.title{
    font-family: Verdana, Tahoma, Arial, sans-serif;color: #ffffff;
    background-color: #00B200;font-variant: small-caps;
    border: solid 1px #6E726C;margin: 0px;padding: 1px;
}
.orange{color: #FF5604;}
 
 

<?php
//constantes da bd
define("TBL_FAQ","dados_faq");
define("TBL_FIELD_ID","id");
define("TBL_FIELD_BELONGS_TO","pertence");
define("TBL_FIELD_DESCRIPTION","descricao");
 
 
//mensagens
define("LNG_FAQ_TREE_TITLE","Perguntas Frequentes");
define("LNG_FAQ_LOCAL","Localização");
define("LNG_FAQ_ANSWER_TITLE","Resposta");
define("LNG_FAQ_ANSWER_NONE_SELECTED","(selecione uma pergunta no menu do lado esquerdo)");
 
//definições de ligação à bd
define("DB_SERVER","localhost");
define("DB_USERNAME","root");
define("DB_PASSWORD","");
define("DB_NAME","database");
?>

<?php
include_once("settings.inc");
 
function DoFAQ(){
  $treemenu=DoFAQMenu(TBL_FAQ,"faqTreeview","tree2");
  return $treemenu;
}
 
/**
 * Construir menu faq e div resposta
 *
 * @param String $table
 * @param String $treeName
 * @param String $div
 * @param String $fieldID
 * @param String $fieldBelongsTo
 * @param String $fieldDescription
 * @return String
 */
function DoFAQMenu($table,$treeName,$div,$fieldID=TBL_FIELD_ID,$fieldBelongsTo=TBL_FIELD_BELONGS_TO,$fieldDescription=TBL_FIELD_DESCRIPTION){
  $db=connectDB();
 
  $sql=mysql_query("
    Select Distinct r1.$fieldID,r1.$fieldDescription,r1.$fieldBelongsTo,count(r1.$fieldBelongsTo) as countSubNos
    From $table as r1
    Inner Join $table AS r2 On r1.$fieldID = r2.$fieldBelongsTo
    Group By r1.$fieldID
    Order By r1.$fieldBelongsTo, r1.$fieldDescription Asc
  ") or die(mysql_error());
 
  while($myrow=mysql_fetch_array($sql)){
    $idLink=($myrow["countSubNos"]==1)?$myrow["$fieldID"]:"";
    $content.=DoMenuNode($treeName,$myrow["$fieldID"],$myrow["$fieldDescription"],$myrow["$fieldBelongsTo"],$idLink);
  }
  mysql_close($db);
 
  $menu="
  var $treeName=new jktreeview(\"$div\");\r\n
  $content
  $treeName.treetop.draw(); //REQUIRED LINE: Initalize tree\r\n
  ";
 
  $menu="<div id=\"$div\"></div><script type=\"text/javascript\">$menu</script>";
 
  $divMenuFAQ="<div id=\"divMenuFAQ\" $attributes class='div_faq content'>";
  $divMenuFAQ.="<span class='title'>".LNG_FAQ_TREE_TITLE."</span>$menu</div>";
 
  $divMenuFAQNotes="<div id=\"divMenuFAQNotes\" class=\"div_faq_note\">";
  $divMenuFAQNotes.="<span class='title'>".LNG_FAQ_ANSWER_TITLE."</span>";
  $divMenuFAQNotes.="<br><br>".LNG_FAQ_ANSWER_NONE_SELECTED."</div>";
 
  return $divMenuFAQ.$divMenuFAQNotes;
}
 
/**
 * Construir nó (função auxiliar da função DoMenu)
 *
 * @param String $treeName
 * @param int $nodeNumber
 * @param String $nodeDescription
 * @param int $nodeBelongsTo
 * @param String $nodeLink
 * @return String
 */
function DoMenuNode($treeName,$nodeNumber,$nodeDescription,$nodeBelongsTo,$nodeLink=""){
  $prefixNode="node";
  $nodeBelongsTo=($nodeBelongsTo>0)?"$prefixNode$nodeBelongsTo":"\"\"";
  $nodeLink=($nodeLink)?(",\"javascript:ajaxShowFAQAnswer('$nodeLink')\""):"";
 
  return "var $prefixNode$nodeNumber=$treeName.addItem(\"$nodeDescription\",$nodeBelongsTo $nodeLink);\r\n";
}
 
 
/**
 * Obter "caminho" até ao item a ser visto 
 *
 * @param int $key
 * @return String
 */
function GetLocalizacao($key){return DoLocalizacao($key);}
 
/**
 * Obter localização do item
 *
 * @param int $pertence
 * @param Array $arr
 * @param String $fieldID
 * @param String $fieldBelongsTo
 * @param String $fieldDescription
 * @return String
 */
function DoLocalizacao($pertence,$arr="",$fieldID=TBL_FIELD_ID,$fieldBelongsTo=TBL_FIELD_BELONGS_TO,$fieldDescription=TBL_FIELD_DESCRIPTION){
  if(!is_array($arr)){$arr=array();}
 
  if($pertence==0) {
    $separador=buildImage("expand.png","Tópico ...");
    return implode(" $separador ",array_reverse($arr));
  }
 
  $value=getValueFromTable(TBL_FAQ,$fieldDescription,$fieldID,$pertence);
  $pertence=getValueFromTable(TBL_FAQ,$fieldBelongsTo,$fieldID,$pertence);
 
  array_push($arr,$value);
  return DoLocalizacao($pertence,$arr,$fieldID,$fieldBelongsTo,$fieldDescription);
}
 
 
/**
 * Obter resposta e construir conteúdo do div
 *
 * @param int $key
 * @return String
 */
function GetFAQAnswer($key){
  $allowedHtmlTags="<table><tr><td><br><br/><b><i><u><a><p>";
  $str="<span class='title'>".LNG_FAQ_LOCAL."</span><br/><br/>";
  $str.="<span class='orange'>".GetLocalizacao($key)."</span><br/><br/>";
  $str.="<span class='title'>".LNG_FAQ_ANSWER_TITLE."</span><br/><br/>";
  $str.=strip_tags(getValueFromTable(TBL_FAQ,"descricao","pertence",$key),$allowedHtmlTags);
  return utf8_encode($str);
}
 
 
 
//funções auxiliares
/**
 * Obter valor da tabela
 *
 * @param String $tabela
 * @param String $campoAObter
 * @param String $id_filter
 * @param String $filter_value
 * @return String
 */
function getValueFromTable($tabela, $campoAObter,$id_filter, $filter_value){
  $db=connectDB();
  $sql="SELECT $campoAObter FROM $tabela WHERE $id_filter='$filter_value'";
  $myRes = mysql_query($sql) or die("$sql ".mysql_error());
  $myrow=mysql_fetch_assoc($myRes);
  $fieldValue=$myrow["$campoAObter"];
  mysql_close($db);
  return $fieldValue;
}
 
/**
 * Construir imagem
 *
 * @param String $file
 * @param String $texto
 * @param String $name
 * @param String $attributes
 * @param String $path
 * @return String
 */
function buildImage($file,$description,$name="",$attributes="",$path="."){
  if($name) $name=" id='$name' name='$name' ";
  return "<img src='$path/$file' border='0' alt='$description' title='$description' longdesc='$description' $attributes $name>";
}
/**
 * Fazer ligação à bd
 *
 * @return identificador
 */
function connectDB(){
  $db = mysql_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD);
  mysql_select_db(DB_NAME,$db) or die("<b><br/>Impossivel aceder á base de dados.</b><br/>");
  return $db;
}
 
?>

var http_request = false;
/**
* Mensagem a mostrar ao utilizador enquanto a informação estiver a ser carregada
*
*/
function MsgLoading(){
  var msg_loading="A carregar informação ...";
  var img_loading="<img src='loading_bar.gif' width='51' height='19' alt='"+msg_loading+"' title='"+msg_loading+"'>";
  return "<span class='title''>"+msg_loading+"</span><br/><br/>"+img_loading;
}
 
/**
* Criar request
*
*/
function createHttpRequest(){
  if (window.XMLHttpRequest){ // Mozilla, Safari,...
    http_request = new XMLHttpRequest();
 
    if (http_request.overrideMimeType){
      http_request.overrideMimeType('text/html');
    }
  }
  else if (window.ActiveXObject){ // IE
    try{
      http_request = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e){
      try{
        http_request = new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch (e) {}
    }
  }
  if (!http_request){
    alert('Giving up :( Cannot create an XMLHTTP instance');
    return false;
  }
}
 
/**
* Método responsável pelo inicio da comunicação com o servidor
*
* @param int id_question
*/
function ajaxShowFAQAnswer(id_question){
  var div="divMenuFAQNotes";
 
  url = antiCacheRand("ajax.php?accao=get_faq&key="+id_question);
  createHttpRequest();
 
  http_request.onreadystatechange = function() {
    updateContent(div);
  };
 
  http_request.open("GET", url, true);
  http_request.send(null);
}
 
/**
* Obter a resposta e fazer o tratamento necessário
*
* @param String div
*
*/
function updateContent(div){
  var state=http_request.readyState;
  setContentDiv(div,MsgLoading());
 
  switch(state){
    case 4: //completo
    if (http_request.status == 200){ //pedido respondido com sucesso
      setContentDiv(div,http_request.responseText);
    }
    else{
      setContentDiv(div,'Erro! Tente novamente');
    }
    break;
  }
}
 
// hack IE para ultrapassar problema cache pedidos get
function antiCacheRand(aurl) {
  var foo=encodeURI(Math.random());
  aurl+=(aurl.indexOf("?")>=0)?"&foo="+foo:"?foo="+foo;
  return aurl;
}
 
/**
* Construir menu faq e div resposta
*
* @param String div_name
* @param String content
*
*/
function setContentDiv(div_name, content){
  var div=document.getElementById(div_name);
  if(div){
    div.innerHTML=unescape(content);
  }
}

<?php
include_once("funcoes_faq.php");
include_once("settings.inc");
 
$accao=$_REQUEST["accao"];
 
if ($accao=="get_faq"){
  $key=$_REQUEST["key"];
 
  if(!is_numeric($key)){
    echo LNG_FAQ_ANSWER_NONE_SELECTED;
  }
  else{
    echo GetFAQAnswer($key);
  }
}
?>

<?php
include_once("funcoes_faq.php");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt">
<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script type='text/javascript' src='ajax.js'></script>
 
<link rel="stylesheet" type="text/css" href="foldingtreeview/css/multi/tree.css">
<script type="text/javascript" src="foldingtreeview/build/yahoo.js" ></script>
<script type="text/javascript" src="foldingtreeview/build/event.js"></script>
<script type="text/javascript" src="foldingtreeview/build/treeview.js" ></script>
<script type="text/javascript" src="foldingtreeview/build/jktreeview.js" ></script>
 
<title>Construir FAQ usando Ajax</title>
</head>
<body>
    <div class="container">
      <div class="div_content"><!-- inicio content -->
      <?php
      echo DoFAQ();
      ?>
      </div><!-- fim content -->
    </div>
  </body>
</html>