Punta de Choros

27 декември 2009

На 2009г й оставаха 120ч съществуване. От календара падна поредния лист с дата 27 декември и към 10.30ч сутринта ме събуди звън от телефона.

Инсталация на Microsoft шрифтове в Ubuntu 16.04

14 януари 2017

нсталация на Microsoft шрифтове в Ubuntu се поражда от идеята браузърите в различните системи, да показват еднакво текстовото съдържанието на интернет страниците.

Ubuntu 16.04 инсталация на USB disk on Key

19 ноември 2016

Арсеналът ми от мобилни компютри съдържа Fujitsu Lifebook AH530. Това е бюджетна машина от 2011г на Intel Core i5-480M процесор и 4GB DDR3 RAM памет.

gparted

Paragon ExtFS for Windows

30 юли 2016

ExtFS for Windows е утилита на Paragon Software разработена през 2013г. Тя представлява решение, предоставящо пълен достъп на четене и на запис до раздели ...

msvcr100.dll is missing Windows 10

04 октомври 2016

Майк Патерсън от Plixer, компания по компютърната сигурност, публикува доклад , че Windows 10 изпраща данни в криптиран вид от вашата машина на всеки пет минути. Той е направил максимума, за да спре изтичането, но системата продължавала да изпраща информация.


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

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

Демо

секция FAQ

Отговори на Често Задавани Въпроси

Въпрос 1
Въпрос 2
Въпрос 3

Brandy And Monica - The Boy Is Mine

MySQL

Стъпка 1

create data base
Старт на phpmyadmin. Създаване на нова база на име faq. Енкодинг utf8_general_ci. Бутон Create и напред.
създаване на база данни на име faq

Стъпка 2

create data table
За нуждите на поставената задача създаваме таблица с същото име faq. Достатъчни са три полета. Например, id, question и answer. Бутон Go и напред!
създаване на таблица на име faq

Стъпка 3

insert data
Оформяме таблица faq. Поле id e тип INT с AUTO_INCREMENT. Съответно question е varchar 255 символа, а answer е тип text. Бутон Insert, за да въведем ръчно информацията на бъдещите въпроси и отговори в клетките на таблицата.
запълване с информация таблица faq

Стъпка 4

data base ready
Краен резултат от проведената дейност. На лице е таблица, съдържаща всички въпроси и съответни отговори. Време е да ги извлечем с помощта на PHP и покажем на потребителя.
краен резултат

Резултат

spoiler :
-- phpMyAdmin SQL Dump
-- version 3.3.9.2deb1~lucid1~ppa1
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Sep 16, 2011 at 03:01 PM
-- Server version: 5.1.41
-- PHP Version: 5.3.2-1ubuntu4.9

--
-- FAQ - често задавани въпроси
--
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8 */;

--
-- Database: `faq`
--

-- --------------------------------------------------------

--
-- Table structure for table `faq`
--

CREATE TABLE IF NOT EXISTS `faq` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`question` varchar(255) NOT NULL,
`answer` text NOT NULL,
PRIMARY KEY (`id`),
FULLTEXT KEY `answer` (`answer`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=4 ;

--
-- Dumping data for table `faq`
--

INSERT INTO `faq` (`id`, `question`, `answer`) VALUES
(1, 'Въпрос 1', 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.'),
(2, 'Въпрос 2', 'Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.'),
(3, 'Въпрос 3', 'Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.');
експорт на базата данни

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>';
  }
 ?>

CSS

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.

jQuery

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() могат да получават параметър в милисекунди и така да ускоряваме или забавяме ефекта.
Това е всичко. Лесно и просто.

Source Code

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 приложен в спойлера. Импортирайте базата. Готово. Имате акордеон на локалния сървър, когото може да доразвиете според вашите нужди.
Aaliyah - Try Again





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


2 Response to "FAQ с използване на PHP - MySQL - jQuery"

  1. fedora Said,

    Разузнаването у нас работи добре, благодарение на което идвам да подложа едно рамо за подкрепа. Лека казарма, което включва и хубава храна, разбира се :)))
    Кога влизаш за изпълнение на дълга към народа?
    И Честита Нова Година :)

     

  2. Profruit Said,

    Благодаря, благодаря. Радвам се, че разузнаваш. Това разузнавачките сте охооо. Честита и на теб, да си жива и здрава и все да ти е сладка годината. Ядем ябълки с мед по случая, риба задължителни и вино. Хайде и умната или русата.

     

Публикуване на коментар

Този блог е реинкарнация на първите ми опити за споделяне в нета. На времето започнах с къси разкази на преживяното. После се обезсмисли и превърнах блога си в системно радио. Пиша единствено неща, които карат душата ми да живее: Ubuntu, WEB, Photoshop, Фотография, Споделено и т.н. Това е моето системно радио, разбирате ли? Моята вълна и вие сте на нея сега.

Архив на блога