Jak udělat jednoduchý anglicko-český a česko-anglický slovník vytvořený v PHP a JavaScriptu.
Jako první si předvedeme funkční ukázku toho, co si vytvoříme. Jedná se o jednoduchý anglicko-český a česko-anglický slovník, který využívá PHP a Javascript (Ajax).
Pro funkční ukázku slovníku pokračujte tímto odkazem (v ukázce je schválně nastaveno sleep čekání na jednu sekundu při každém vyhledávání slovíčka).
Slovník potřebuje pro svůj správný chod především povolený JavaScript. Neřeší možnost, že je JavaScript vypnutý a v takovém případě nefunguje. Řešení by bylo jednoduché, ale pro tuto ukázku zbytečné.
Pokud znáte z PHP více než příkaz echo a o Ajaxu jste už slyšeli, můžete přestat číst, protože se zřejmě nic nového nedozvíte a článek je pro vás nedůležitý a jeho čtení je zbytečná ztráta času.
Jako první věc, kterou je nutné vyřešit, jsou data, která do slovníku použijete. Já jsem pro svůj slovník zvolil GNU/FDL Anglicko – Český slovník, dostupný ke stažení na adrese http://slovnik.zcu.cz.
Tento slovník obsahuje téměř 150 tisíc slovíček a slovník frází, což je dostatečné množství, aby byl slovník použitelný.
Slovník je jednoduchá aplikace, ve které se pracuje s daty, je tedy důležité si rozmyslet, jak k datům přistupovat. Ideální je pro tuto strukturu databáze, do které si můžeme přehledně všechna data uložit a velmi jednoduše v nich vyhledávat, což je asi nejdůležitější operace, kterou musí slovník podporovat.
Tabulka pro data bude jednoduchá a bude obsahovat pouze dva důležité sloupce, které budou representovat dvě jazykové mutace, jež slovník podporuje:
CREATE TABLE `slovnik` (
`id_term` int(11) NOT NULL auto_increment,
`czech_term`varchar(100) default NULL,
`english_term`varchar(100) default NULL,
PRIMARY KEY (`id_term`)
) TYPE=MyISAM;
Pokud použijete stejný zdroj slovíček jako já, budete potřebovat tato data dostat do databáze, čili nějakým způsobem rozparovat z datového souboru a nakonec uložit do tabulky.
Jako první si vytvoříme třídu parse_data, která nám bude tuto potřebu obsluhovat. Třída se nebude spouštět pravidelně, ale zřejmě jenom jednou, pro získání a vytvoření údajů.
Po prozkoumání struktury datového souboru se slovy je vidět, že jednotlivé slovíčka jsou odděleny novým řádkem a jednotlivé významy slov tabulátorem. Navíc soubor obsahuje několik řádek, které jsou pouze poznámky, započínající znakem #. Tyto řádky musíme odfiltrovat, protože pro nás jsou nepotřebné.
Ve třídě si vytvoříme metodu parse_data (použil jsem PHP5, takže se nejedná o konstruktor), která nám z načtených dat vytvoří dvě pole. Jedno pro anglické slova a druhé pro jejich české významy:
function parse_data(){ //rozdeleni podle radek {\n} $data = split("\n", $this->data ); if( count( $data ) < 10 ) return 0; //v cylku for-each projdeme cele pole foreach( $data as $line ){ //odfiltrujeme poznamky if( !eregi("^#", $line ) ){ //rozdelime radek podle tabulatoru {\t} $value = split( "\t", $line ); if( strlen( trim( $value[0] ) ) && strlen( $value[1] ) ){ //ulozime hodnoty do pole $this->english[] = $value[0]; $this->czech[] = $value[1]; } } } //pokud neexistuji zadna data, vracime 0 if( count( $this->czech ) == 0 || ( count( $this->english ) != count( $this->english ) ) ) return 0; return 1;
}
Metoda předpokládá načtený soubor v proměnné $this->data.
Další důležitá metoda je pro uložení dat do databáze, metoda save_data. Pokud máme všechna data načtena ve dvou polích z metody parse_data, můžeme si vytvořit sql dotaz a data ukládat:
function save_data(){ //pripojeni k databazi parent::__construct(); //vymazani tabulky pred ukladanim dat $delete = "DELETE FROM slovnik"; mysql_query( $delete, $this->link ); //zacatek dotazu $sql = "INSERT INTO slovnik(`czech_term`, `english_term`) VALUES"; //pocet ulozenych slovicek $inserted = 0; //v cyklu budeme ukladat for( $i = 1; $i < count( $this->english); $i++ ){ //postupne se vytvari dotaz na databazi $sql .= "('" . addslashes( $this->czech[$i] ) . “‘, ‘” . addslashes( $this->english[$i] ) . “‘),”; //ukladat budeme po 100 radcich. if( $i%100 == 0){ //odmazani posledni carky $sql = substr( $sql, 0, -1); //provedeni dotazu mysql_query( $sql, $this->link ); //zjisteni poctu vlozenych slovicek $inserted += mysql_affected_rows( $this->link ); //znovavytvoreni zacatku dotazu $sql = “INSERT INTO slovnik(`czech_term`, `english_term`) VALUES”; } } //provedeni posledniho dotazu $sql = substr( $sql, 0, -1); mysql_query( $sql, $this->link ); $inserted += mysql_affected_rows( $this->link ); return $inserted;
}
Třída bude obsahovat další metody, pro otevření a načtení souboru, celou třídu si můžete zobrazit zde: parse_data.php
Pokud máme data uložena v tabulce, musíme uživateli umožnit v nich vyhledávat.
Pro vyhledání použijeme jednoduchý formulář, s jedním inputem, pro zadání slovíčka a dvěma radiobuttony, pro výběr překladu.
Formulář bude obsahovat atribut onSubmit, kterým spustíme javascriptovou funkci pro jeho zpracování:
<form method="get" action="" id="sform" onsubmit="onSubmitForm(); return false;"> <fieldset style="background-color: white; padding: 10px"> Slovo: <input type="text" size="30" name="term" value="ahoj" /> <input type="submit" value="Přelož" /> <br /><br /> Anglicko-Český <input type="radio" name="func" value="1" /> Česko-Anglický <input type="radio" name="func" value="2" checked /> </fieldset>
</form>
Po odeslání formuláře se spouští javascriptová funkce onSubmitForm, která se stará o odeslání požadavku a zpracování formuláře.
Tato funkce je velmi jednoduchá:
function onSubmitForm(){
var func;
//zjisteni slovicka
var term = document.getElementById("sform").term.value;
//zjisteni funkce
if( document.getElementById("sform").func[0].checked == true )
func = 1;
else
func = 2
//odeslani pozadavku
request(term, func, 0 );
}
Jako první se zjistí hodnota inputu a zatrženého radion butonu, reprezentujícího funkci slovníku, a volá se metoda request(), která bude následně formulář odesílat.
Funkce odešleš HTTP požadavek pomocí metody GET a volá soubor run.php, který bude vracet výsledek.
Obsahuje celkem 3 vstupní parametry. První je daný výraz, který hledáme, druhý representuje funkci překladu (anglicko-český nebo česku-anglický) a třetí zobrazovanou stránku s výsledky:
function request( term, func, page ){
//nez se provede, doplni se loading
document.getElementById('MyDiv').innerHTML = '<center><img src="loading.gif" style="padding: 20px"/></center>';
//vytvoreni nove promenne
var request = null;
//gecko
if( window.XMLHttpRequest ){
request = new XMLHttpRequest()
}
else if ( window.ActiveXObject ){
//IE
request = new ActiveXObject("Microsoft.XMLHTTP");
}
//pokud se neporadilo vytvorit
if (!request) {
alert('false. :(');
return false;
}
request.onreadystatechange = function () {go(request); } ;
request.open("GET", "run.php?value=" + term + "&func=" + func + "&page=" + page, true);
request.send( null );
}
function go( request ){
var txt;
if (request.readyState == 4){
if(request.status == 200 || request.status == 0){
txt=request.responseText;
document.getElementById('MyDiv').innerHTML = txt;
}
}
}
Pokud jste si funkci prošli, všimli jste si, že ovlivňuje element s ID MyDiv, do kterého pomocí innerHTML uloží vrácený obsah ze souboru run.php
Tento element je nutné umístit například pod náš formulář:
<div id="MyDiv" style="paddin: 15px;">
</div>
Celý soubor s formulářem a JavaScriptovými funkcemi můžete zobrazit zde: index.php
Poslední, co musíme udělat, je zpracovat formulář. V JavaScriptové funkci request voláme soubor run.php, takže si tento soubor vytvoříme.
Soubor bude obsahovat třídu run, která dědí třídu connect (toto řešení není důležité), pro připojení k databázi, ve které vzniká proměnná „public $link“.
Asi nejdůležitější z celé třídy je metoda pro výběr a výpis vybraných dat, která může být napsána jakkoli, to záleží čistě na vás:
function select_and_print(){ //pripojeni k databazi parent::__construct(); //rozhodnuti o funkci slovniku switch( $this->func ){ case 1: { $from = 'english_term'; $to = 'czech_term'; break; } case 2: default: { $to = 'english_term'; $from = 'czech_term'; break; } } //sql dotaz pro vyber $sql = "(SELECT SQL_CALC_FOUND_ROWS * FROM slovnik WHERE " . $from . " LIKE '%" . addslashes( $this->term ) . "%' AND `" . $from . "` = '" . addslashes( $this->term ) . "' ) union ( SELECT * FROM slovnik WHERE `" . $from . "` = '" . addslashes( $this->term ) . "' ) UNION ALL ( SELECT * FROM slovnik WHERE " . $from . " LIKE '%" . addslashes( $this->term ) . " %' AND `" . $from . "` != '" . addslashes( $this->term ) . "' ) LIMIT " . ( $this->limit * $this->lines ) . ", " . $this->lines . ""; //provedeni sql dotazu $data = mysql_query( $sql, $this->link ); //print mysql_error(); //zjistime, jestli bylo neco nalezeno if( mysql_num_rows( $data ) == 0 ){ print '<b>Nic nebylo nalezeno.</b>'; return; } //zjistime celkovy pocet radek $num_of_rows = mysql_result(mysql_query(" SELECT FOUND_ROWS()", $this->link ), 0); //vypiseme hlavicku print '<h4>Hledáno: ' . htmlspecialchars( $this->term ) . '</h4>'; //tabulka pro vypis print '<table width="100%">'; while( $row = mysql_fetch_object( $data ) ){ print '<tr style="background-color: ' . (++$i%2 ? '#faf0e6' : '#f0ffff' ) . '">'; print '<td style="color: darkgreen" width="50%">' . stripslashes( $row->$from ) . '</td>'; print '<td style="color: darkblue">' . stripslashes( $row->$to ) . '</td>'; print '<tr>'; } print '</table>'; //pokud je treba rozdelit vysledek do vice stran, vytvorime strankovani if( $this->lines <= $num_of_rows ){ // print 'Strana: '; //v cyklu vypiseme stranky for( $i = 0; $i < ceil($num_of_rows / $this->lines ); $i++ ){ //vypiseme maximalne 9 stran vysledku if( $i > 9 ) break; //pokud je tato stranka aktualni, vypiseme ji bez odkazu if( $this->limit == $i ){ print ( $i + 1 ) . " "; } else{ //odkaz na dalsi stranku / volame javascritp print '<a href="#" onclick="request(\'' . htmlspecialchars( $this->term ) . '\', \'' . $this->func . '\', \'' . $i . '\'); return false;">' . ($i+1) . '</a> '; } } } print '<p><small><i>Počet výsledků: ' . $num_of_rows . '</i></small></p>';
}
Celou třídu si můžete stáhnout zde: run.php
Tím je celý slovník hotový. Celý, včetně všech souborů si jej můžete stáhnout zde: slovník.zip
Pokud budete provádět parsování a import na serveru, budete zřejmě muset zvýšit hodnoty pro max_execution_time a memory_limit. Toto můžete udělat v .htaccess:
php_value max_execution_time 300
php_value memory_limit 100M
Jedná se opravdu o jednoduchý slovník, ve kterém není dořešena spousta věcí a je opravdu jenom pro demonstrační účely. Některé věci mohou být nejasné, ale snažil jsem se zdrojové kódy vcelku okomentovat.
Štítky: ajax, get, http, javascript, PHP, request, slovník
Zaachi blog využívá WordPress MU a běží na Blog.zive.cz. Vytvořte si svůj vlastní blog
Sledování přes RSS: články
a komentáře