Jak udělat jednoduchý anglicko-český a česko-anglický slovník vytvořený v PHP a JavaScriptu.

Funkční ukázka

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.

Data do slovníku

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ý.

Ukládání dat

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;

Rozparování dat

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

Zobrazení formuláře a odeslání požadavku

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

Zpracování formuláře

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

Možné problémy

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

Závěrem

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