AJAX a knižnica článkov s fulltextovým vyhľadávaním – práca s článkami
Obsah
Související
V tomto článku bude uvedený popis súborov, ktoré umožňujú zobrazenie článkov podľa parametrov nastavených vo vstupnom formulári v úvodnej stránke.
Súbor clanky.class.php
K zlepšeniu funkcionality systému bola vytvorená trieda Clanky. V triede Clanky sú atribúty polí (premenné) typu public a private, metódy (funkcie), konštruktor a deštruktor. Trieda Clanky slúži ostatným súborom na vytváranie a spracovanie výsledkov databázy. Oddelenie vytvárania vrstiev funkcionality aplikácie umožňuje flexibilné a rozšíriteľné aplikácie.
<?php
// zavedie súbor pre ošetrenie chýb a konfiguračný súbor
require_once(‚error.php‘);
require_once(‚config.php‘);
// definuje triedu Clanky
class Clanky {
// premenná pre požiadavku SQL
public $mQuery;
// premenná určujúca stĺpce pre match
public $mCol;
// ovládač dátabaze
private $mMysqli;
// konštruktor triedy
function __construct() {
$this->mMysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE);
}
// deštruktor triedy
function __destruct() {
if ($this->mMysqli) $this->mMysqli->close();
}
// funkcia pre spracovanie fulltextového vyhľadávania
public function createFullText($query, $col,$whole) {
// zakódovanie dát pre ich bezpečné použitie v príkazoch SQL
$query = $this->mMysqli->real_escape_string(trim($query));
$col = $this->mMysqli->real_escape_string($col);
$whole = $this->mMysqli->real_escape_string($whole);
// zadefinovanie stĺpcov pre match vo fulltextovom vyhľadávaní
$this->mCol = $col == ‚autori‘ ? $col : $col.‘,nazov‘;
// zostavenie požiadavky pre SQL
switch ($col){
case ‚autori‘:
$query = ereg_replace(quotemeta(„+|-|*|~|\\|\“|<|>|(|)“),““,$query);
$this->mQuery = ‚“‚.$query.'“‚;
break;
case ‚abstrakt‘:
$words = explode(‚ ‚,$query);
for ($i=0;$i<count($words);$i++) if (Strlen($words[$i])>3 && !$whole) $words[$i] .= ‚*‘;
$this->mQuery = implode(‚ ‚,$words);
break;
}
}
// vráti počet článkov
public function getNumRows ($query) {
if ($result = $this->getQuery($query)) {
$numRows = $result->num_rows;
$result->close();
}
return $numRows;
}
// vráti celkový počet článkov pri SELECT COUNT(*)
public function getNumAllRows ($query) {
if ($result = $this->getQuery($query)) {
$row = $result->fetch_row();
$result->close();
}
return $row[0];
}
// vráti obsah riadku
public function getRow ($query) {
if ($result = $this->getQuery($query)) {
$row = $result->fetch_array(MYSQLI_ASSOC);
$result->close();
}
return $row;
}
// vráti príkaz SQL
public function getQuery($query) {
return $this->mMysqli->query($query);
}
}
}
?>
Pri tvorbe databázy používame objektove orientovanú knižnicu mysqli, ktorá bola implementovaná v PHP 5. Pomocou konštruktora __construct sa vytvára inštancia triedy a automaticky vytvára spojenie na databázu. Deštruktor __destruct sa volá po zániku objektu a tým sa uzatvára databázové spojenie. Pre vysvetlenie činnosti fulltextového vyhľadávania odporúčame preštudovať si článok Erika Hoffmanna Fulltextové vyhľadávanie v MySQL – prax.
Súbor clanky-top.php
Súbor clanky-top.php sa načíta v súbore clanky.php a pomocou globálnych premenných $_POST, respektíve $_GET, nastavuje $_SESSION. Následne inicializuje premenné $_question, $_col, $_whole, $_lim a $_skip použité v súbore clanky.php.
<?php
// zavedie súbor pre ošetrenie chýb a pre triedu Clanky
require_once(‚error.php‘);
require_once(‚clanky.class.php‘);
// štart session
session_start();
// nastaví session podľa $_POST a $_GET
if (isset($_POST[‚q‘])) {
$_SESSION[‚values‘][‚s_query‘] = $_POST[‚q‘];
if (isset($_POST[‚whole‘])) $_SESSION[‚values‘][‚s_whole‘] = ‚yes‘; else $_SESSION[‚values‘][‚s_whole‘] = “;
if (isset($_POST[‚col‘])) $_SESSION[‚values‘][‚s_col‘] = $_POST[‚col‘];
}
if (isset($_GET[‚skip‘])) $_SESSION[‚values‘][‚s_skip‘] = sprintf(„%d“, $_GET[‚skip‘]);
// nastavi premenne pre subor clanky.php
$_query = $_SESSION[‚values‘][‚s_query‘]; $_col = $_SESSION[‚values‘][‚s_col‘];
$_skip = $_SESSION[‚values‘][‚s_skip‘]; $num = $_SESSION[‚values‘][‚s_num‘];
$_whole = $_SESSION[‚values‘][‚s_whole‘]; $lim = ROWS_PER_VIEW;
?>
Súbor clanky.php
Súbor clanky.php je vyvolaný klasicky kliknutím na button „Články“ vo vstupnom formulári úvodnej stránky. Metódou POST sú odovzdané parametre formulára a zobrazia sa nájdené články v databáze. Počet zobrazených článkov je nastavený v súbore config.php. V prípade väčšieho počtu článkov ako je nastavený počet zobrazených článkov, môžeme pomocou príkazov v spodnom riadku zobrazovať nasledujúce stránky s článkami. Súčasne s XHTML kódom stránky sa načítavajú súbory clanky.css a abstrakt.js.
<?php
// zavedie súbory pre ošetrenie chyb a clanky_top.php.
require_once(‚error.php‘);
require_once(‚clanky_top.php‘);
echo ‚<?xml version=“1.0″ encoding=“utf-8″ ?>‘.“\n“;
?>
<!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=“sk“ lang=“sk“>
<head>
<meta http-equiv=“Content-Type“ content=“text/html; charset=utf-8″ />
<meta http-equiv=“Content-Language“ content=“sk“/>
<title>Knižnica–Články</title>
<link rel=“stylesheet“ type=“text/css“ href=“clanky.css“ />
<script type=“text/javascript“ src=“request.js“></script>
<script type=“text/javascript“ src=“abstrakt.js“></script>
</head>
<body>
<h1>Knižnica článkov</h1>
<div id=“wrap“>
<h2>Články</h2>
<?php
// vytvorí inštanciu triedy Clanky
$_sql = new Clanky();
// spracuje premenné pre fulltextové vyhľadávanie
$_sql->createFullText($_query, $_col, $_whole);
$query = „SELECT *“;
// vytovorí SQL pre zobrazenie všetkých článkov
if ($_query == ‚?‘) {
$num = $_SESSION[‚values‘][‚s_count‘];
$query .= “ FROM clanky“;
}
// vytvorí SQL pre zobrazenie článkov pre fulltextové vyhľadávanie, min. tri znaky
elseif (StrLen(trim($_query)) > 3) {
if ($_col != ‚autori‘) $query .= „,MATCH($_sql->mCol) AGAINST(‚$_sql->mQuery‘ IN BOOLEAN MODE) AS vaha“;
$query .= “ FROM clanky WHERE MATCH($_sql->mCol) AGAINST(‚$_sql->mQuery‘ IN BOOLEAN MODE)“;
// poradie pri fulltextovom vyhľadávaní je určené váhou
if ($_col != ‚autori‘) $query .= “ ORDER BY vaha DESC“; else $query .= “ ORDER BY nazov ASC“;
// zobrazenie mena autora alebo kľúčových slov
if ($_col != ‚autori‘) echo ‚<p>Kľúčové slová: ‚; else echo ‚Autor: ‚;
echo ‚<i>‘.htmlspecialchars($_query).'</i></p>‘;
// ak počet riadov nebol načítaní v JS
if ($num == -1) $num = $_sql->getNumRows($query);
// ošetrenie chýb
if ($num == 0) echo ‚<p>Ľutujeme, ale nenašiel sa žiaden článok!</p>‘;
}
else echo ‚<p>Ľutujeme, ale nezadali ste meno autora alebo kľúčové slová (minimálne štyri znaky)!</p>‘;
if ($num > 0) {
echo ‚<p id=“top“>Počet článkov: <b>‘.$num.'</b>‘;
if (trim($_query) != ‚?‘) echo ‚ z ‚.$_SESSION[‚values‘][‚s_count‘];
if ($num > $lim) echo ‚ <span>Stránka: <b>‘.sprintf(„%d“,($_skip/$lim+1)).'</b> (‚.sprintf(„%d“, ($num-1)/$lim+1).‘)</span>‘;
echo ‚</p> <ul>‘;
$query .= “ LIMIT $_skip, $lim“;
// vykoná SQL požiadavku
if ($result = $_sql->getQuery($query)) {
while ($row = $result->fetch_array(MYSQLI_ASSOC)) {
// tvorba zoznamu článkov
echo ‚<li><span><a href=“abstrakt.php?id=‘.$row[„ID“].'“ title=“Abstrakt-html“><img src=“icon_html.png“ alt=“Abstrakt-html“ /></a><a href=“‚.$row[„clanok“].'“ title=“Článok-pdf“><img src=“icon_pdf.png“ alt=“Článok-pdf“ /></a></span>‘.$row[„autori“].‘: <em>‘.$row[„nazov“].‘, </em>‘.$row[„kde“].'<div /></li>‘;
echo ‚</ul>‘.“\n“;
$result->close();
}
}
else echo ‚<p>Ľutujeme, ale sa nepodarilo pripojiť na server, pokúste sa opäť!</p>‘;
// tvorba foot
echo ‚<p class=“foot“>‘;
if ($num>$_skip && $_skip>=$lim) echo ‚<a href=“clanky.php?skip=‘.($_skip – $lim).'“>predchádzajúca stránka</a>‘;
echo ‚ <a href=“./“>úvodná stránka</a> ‚;
if ($num>$_skip+$lim) echo ‚<a href=“clanky.php?skip=‘.($_skip + $lim).'“>nasledujúca stránka</a>‘;
echo ‚</p>‘.“\n“;
?>
</div>
</body>
</html>
Súbor abstrakt.js
Pomocou JavaScriptu a objektu XMLHttpRequest môžeme načítať – bez opätovného načítania stránky – obsah vybraného abstraktu kliknutím na príslušnú ikonku. Súbor abstrakt.js spolupracuje so súborom abstrakt.php. V prípade asynchrónneho spojenia okrem parametra id článku posielame metódou GET aj parameter xml=1.
//spustí po načítaní stránky
window.onload = function() {
// vytvorí odkazy na <li>
var lis = document.getElementsByTagName(‚li‘);
// pri stlačení ikonky abstraktu definuje odkaz
for (var i=0; i<lis.length; i++) {
lis[i].getElementsByTagName(‚a‘)[0].onclick = function() {
// vytvorí inštanciu objektu XMLHttpRequest
var request = requestObj ();
// vytvorí odkaz na element <div>
var div = this.parentNode.parentNode.lastChild;
// pri kliknutí sa obsah abstraktu schová
div.onclick = function () {this.innerHTML = „“; this.className = „“;}
// ak je objekt XMLHttpRequest
if(request) {
// metóda pre spracovanie odpovede zo servera
request.onreadystatechange = function() {
// ak prebehlo všetko v poriadku
if (request.readyState == 4) {
if (request.status == 200) {
try {
// extrahuj XML zo servera
var rootXML = request.responseXML.documentElement;
// ošetrenie chyby pre Firefox
if (rootXML.nodeName == „parsererror“) throw(„“);
// načítanie dát do elementu <div>
else div.innerHTML = rootXML.firstChild.data;
}
// sprava pre uzivatela v pripade chyby servera
catch (e) {div.innerHTML = „Ľutujeme, nepodarilo sa pripojiť na server, pokúste sa opäť!“;}
} else {div.innerHTML = „Ľutujeme, nepodaril sa prenos zo servera, pokúste sa opäť!“}
}
}
// zobraz obsah abstraktu
div.className = „show“;
// správa pre prípad pomalého Internetu
if (div.innerHTML == „“) div.innerHTML = „<b>Abstrakt</b> sa načítáva…“;
// na serveri spusti stránku abstrakt.php s parametrami id a xml
request.open(„GET“, this.href+“&xml=1″, true);
// pošle žiadosľ na server
request.send(null);
}
// v prípade neúspechu vráti true a vykoná sa pôvodný odkaz v HTML
else {return true;}
// v prípade úspešného načítania abstraktu vráti false
return false;
}
}
}
Každý článok používa vlastný objekt XMLHttpRequest. Toto najjednoduchšie riešenie zabezpečuje, že nedôjde k strate požiadavky na server. Pri spracovaní odozvy sa postupuje štandardným spôsobom. Chyby sa vychytávajú pomocou metódy try/catch v prehliadačoch MSIE a Opera. Firefox generuje hlásenie o chybe v koreni súboru XML, ktorý nazýva „parsererror“. V prípade Firefoxu vygeneruje sa pomocou throw výnimka, ktorá sa zachytí ako u ostatných prehliadačoch v catch. V prípade korektnej odozvy servera sa obsah abstraktu načíta do kontajnera div pomocou innerHTML. V prípade pomalého pripojenia k internetu sa objavuje správa, že sa súbor načítáva.
Súbor abstrakt.php
Súbor abstrakt.php v úvode načíta súbor clanky.class.php pre načítanie obsahu abstraktu z databázy. Súbor spracúva požiadavky generované JavaScriptom. V prípade, ak prehliadač nemá implementovaný objekt XMLHttpRequest alebo je zakázaný JavaScript, súbor abstrakt.php je volaný odkazom priamo zo stránky clanky.php. V prvom prípade je generovaný súbor typu XML, v druhom prípade súbor typu XHTML, ktorý je zobrazený samostatne v okne prehliadača.
<?php
// zavedie súbory pre ošetrenie chýb a triedy Clanky
require_once(‚error.php‘);
require_once (‚clanky.class.php‘);
// štart session
session_start();
// nastavenie premených podľa $_GET
if (isset($_GET[‚id‘])) $user_id = $_GET[‚id‘]; else $user_id = 0;
if (isset($_GET[‚xml‘])) $user_xml = $_GET[‚xml‘]; else $user_xml = 0;
// vytvorí inštanciu triedy Clanky
$_sql = new Clanky();
// tvorba SQL príkazu
$query = sprintf(„SELECT autori,nazov,abstrakt FROM clanky WHERE ID = %d“, $user_id);
// vykoná prikaz SQL
$row = $_sql->getRow ($query);
// ak požiadavka je cez AJAX, tvorba XML súboru
if ($user_xml==1) {
header(‚content-type: text/xml‘);
echo ‚<?xml version=“1.0″ encoding=“utf-8″ ?><abstrakt><![CDATA[‚.$row[„abstrakt“].‘]]></abstrakt>‘;
}
// inak tvorba XHTML súboru
else {
// . . . . . .
// generuje sa XHTML abstraktu
// . . . . . . . . . .
}
?>
V prípade vytvorenia súboru XHTML sa súčasne načíta aj abstrakt.css, ktorý určuje vzhľad stránky.
Súbor o_kniznici.html
Klasický statický hypertextový súbor slúži ako zdroj informácii o použití knižnice. Súčasne sa načíta aj súbor o_kniznici.css, ktorý určuje vzhľad stránky.
Záver
Klasické statické stránky sa stávajú minulosťou. V súčasnosti sa dostávajú do popredia interaktívne stránky, využívajúce PHP script na strane servera a JavaScript spojený s objektom XMLHttpRequest na strane klienta. Internetové aplikácie sa svojím správaním približujú desktopovým aplikáciám, ale ich realizácia býva spravidla jednoduchšia. Klasické statické stránky sa používajú najmä ako informačné stránky.
