Jak si vytvořit vlastní záložky

Jak si vytvořit vlastní záložky

Jednou jsem hledal na nějakém webu určitý článek, který jsem četl před několika měsíci a odkaz na něj jsem chtěl poslat svému kamarádovi. Bohužel jsem nebyl schopný ho jednoduše dohledat. Google taky mlčel a tak jsem nakonec kvůli tomu článku musel proklikat skoro celý web, než se mi podařilo ho najít. A to byl přesně ten okamžik, kdy jsem si řekl: „Nebylo by jednodušší, kdyby měl každý web možnost vytvořit si na něm záložky na zajímavé články?“ Uživatel by si tak přehledně umístil odkazy na to, co ho na webu nejvíce zaujalo a mohl by se k tomu lehce kdykoliv vrátit.

Tady, na QARK.net, jsem to zrealizoval, a pokud se vám ten nápad líbí stejně jako mně, není problém si u sebe vytvořit vlastní záložky také.

Co budete potřebovat?

Ze všeho nejdřív zabruste na stránku script.aculo.us a stáhněte si odtam v sekci download nejnovější verzi skriptů, které se postarají o přetažení nadpisu do místa pro záložky a o jednoduchou práci s technologií AJAX. Z celého balíku nám pro záložky budou stačit jen soubory prototype.js, dragdrop.js a effect.js, ostatní nejsou podstatné.

Poznámka: Součástí tohoto článku jsou pochopitelně i [kompletní zdrojové kódy záložek], které jsou přehledně a bohatě okomentované, takže tu nebudu vysvětlovat úplně všechno, ale zaměřím se jen na to nejdůležitější. Nejdříve ji je tedy [stáhněte], prohlídněte, vyzkoušejte, a až pokud nebude něco jasné, čtěte dál. V opačném případě není vůbec nutné se dál prokousávat.

Zdrojové kódy obsahují:

adresář clanky/ – články, které se zobrazí po kliknutí na záložku
adresář scripty/ – javascript pro obsluhu záložek a AJAXu
config.php – obsahuje pole s názvy článků a funkci pro výpis záložek
index.php – hlavní soubor, ve kterém se aktivují a přetahují záložky
pridej_zalozku.php – přidá záložku do $_COOKIE['zalozka'] a vypíše záložky
smaz_zalozku.php – odstraní zvolenou záložku a zbylé vypíše
styl.css – kaskádový styl pro vzhled záložek
indicator.gif – animovaný gif, který se používá pro znázornění probíhající operace
smaz.gif – obrázek pro odstranění záložky ze seznamu

Hlavní stránka

Nejprve skripty, které jste si stáhli z webu script.aculo.us, jednoduše vložíme do stránky, na které budeme přetahovat nadpisy do „chlívečku“ pro záložky.

<script src="scripty/prototype.js" type="text/javascript"></script>
<script src="scripty/effects.js" type="text/javascript"></script>
<script src="scripty/dragdrop.js" type="text/javascript"></script>
<script src="scripty/main.js" type="text/javascript"></script>

Protože budeme vkládat jednotlivé záložky do pole a to potom ukládat do cookies, je potřeba si tuto cookie, v případě že neexistuje, založit:

if (!$_COOKIE['zalozka'])  { 
  ## Pozor! pokud ukladate cookies, nelze tam vlozit pole. 
  ## Nejdriv je potreba provest serializaci pole do retezce.
  $odkazy = serialize(array());
  $trvani = 60*60*24*31*60; //cca 5let
  SetCookie("zalozka", $odkazy, time()+$trvani);
  $_COOKIE['zalozka'] = $odkazy;
}

Potom je nutné zaktivovat přetahování nadpisů. Vytvoříme si tedy místo, kde se budou zobrazovat záložky:

<div id="pridat">
<div id="odkazy">
<?php
  $odkazy = unserialize($_COOKIE['zalozka']);
  ## poznamka: funkce ukazOdkazy je rozebrana nize v clanku a nachazi se v souboru config.php
  echo ukazOdkazy($odkazy);
?>
  <img style="display:none" id="indicator" alt="Indicator" src="indicator.gif" />
</div>
</div>

Následně javascriptem nadefinujeme, že jakmile do elementu s id="pridat" přetáhneme element s class="titulek", zavolá se AJAXem skript pridej_zalozku.php a tomu se (pomocí metody POST) předá parametr id. Během zpracování skriptu se zobrazí obrázek s indikací načítání (indicator.gif) a po provedení se opět zneviditelní.

Možná to zní složitě, ale stačí se podívat na následující kód a uvidíte, že je to jasné.

<script type="text/javascript">
  Droppables.add('pridat', {accept:'titulek', onDrop:function(element){new Ajax.Updater('odkazy', 'pridej_zalozku.php', {onLoading:function(request){Element.show('indicator')}, onComplete:function(request){Element.hide('indicator')}, parameters:'id=' + encodeURIComponent(element.id), evalScripts:true, asynchronous:true})}});
</script>

Tím jsme zaktivovali místo pro vložení záložek. Nyní je potřeba ještě nadefinovat nadpisy s class="titulek", které budeme do místa pro záložky přesunovat.

<h2 id='id_1' class='titulek'>První článek pro přetáhnutí</h2>
<p>Nějaký text.</p>;
<script type="text/javascript">new Draggable('id_1', {revert:true});</script>

Poznámka: Všimněte si, že je u nadpisu druhé úrovně (h2) kromě class="titulek" ještě id. Jde o to id, které se metodou POST předá skriptu pridej_zalozku.php. Po nadpisu následuje javascriptový kód, který umožní nadpis přetahovat.

PHP skript pridej_zalozku.php

Než se pustím do vysvětlování, chtěl bych upozornit na jednu zásadní věc. AJAX znamená Asynchronous JavaScript and XML. Vzhledem k tomu, že utf-8 je základní kódováním pro XML, je nutné v tomto kódování pracovat i s výstupem skriptu pridej_zalozku.php. Pokud budete používat AJAX, nikdy nezapomínejte, že skript zpracovávaný touto technologií musí být v utf-8, a to i přestože by byla hlavní stránka, z které skript voláte, v kódování jiném (např: windows-1250). Pokud tedy máte web v jiném, než utf-8 kódování, bude nutné výstup před odesláním do tohoto kódování překonvertovat. Na to se vám může hodit třeba tento skript, který napsal David Grudl (dgx).

V souboru pridej_zalozku.php nejprve načteme záložky, zpracujeme hodnotu id a vložíme do pole se záložkami název článku (ty jsou v souboru config.php). Potom zase cookie uložíme a nakonec vypíšeme záložky. Pro názvy článků jsem použil pole jen kvůli ukázce. Samozřejmě můžete názvy načítat třeba z databáze.

## nacti funkce
require_once("config.php"); 
 
## z cookies zalozky udelej pole
$odkazy = unserialize($_COOKIE['zalozka']); 
 
## ID cislo polozky -> napriklad z id_1 udelej jenom 1
$id = str_replace("id_","",$_POST['id']); 
 
## z pole clanku vyber ten, ktery ma to spravne ID
## pole $clanky se nachazi v souboru config.php
$nazev_clanku = $clanky[$id]; 
 
## pridej do pole se zalozkami
if (!isset($odkazy[$id])) $odkazy[$id] = $nazev_clanku; 
 
## vygeneruj vystup
$vystup = ukazOdkazy($odkazy); 
 
## uloz zase pole se zalozkami do cookies
$odkazy = serialize($odkazy);
SetCookie("zalozka", $odkazy, time()+$trvani);
 
## vypis zalozky
echo $vystup;

Výstup generujeme pomocí funkce ukazOdkazy(). Ta se nachází v souboru config.php a prochází pole se záložkami, které vypisuje jako číslovaný seznam s odkazy a volbou mazání záložky, po najetí na odkaz. K mazání je zase použito AJAXu, kde se přes funkci smazURL(id) volá soubor smaz_zalozku.php (funkce smazURL() je ve scripty/main.js)

function ukazOdkazy($pole_zalozek)
{
$kolik = count($pole_zalozek);
 
### smazURL(id) se nachazi v souboru scripty/main.js a jen vola pres AJAX soubor smaz_zalozku.php
  
## pokud je neco v poli – vypis to
  if ($kolik>0) 
  {
    $vystup = 'Záložky:';
    $vystup .= "<ol>";
    
    ## projdi pole se zalozkami a vypis je
    foreach ($pole_zalozek as $id => $nazev) 
    {
      $kos = "<div class='smazat'><img id=\"del_$id\" style='display:none' src='smaz.gif' alt='Smazat' onclick=\"Element.hide('toto_$id');smazURL('oblibene_$id');\" /></div>"; 
      $vystup .= "<li id='toto_$id'><div onmouseover=\"Element.show('del_$id');\" onmouseout=\"Element.hide('del_$id');\">$kos<a href=\"clanek/$id.html\">$nazev</a></div></li>";
    }
    
    $vystup .= "</ol>";
  } 
  ## pole je prazne, neni v nem zadna zalozka
  else $vystup = "Přetáhnutím nadpisu článku myší na toto místo si vytvoříte záložku.";
 
return $vystup;
}

Soubor pro mazání záložek (smaz_zalozku.php) není třeba podrobně rozebírat, je podobný souboru pro přidávání záložek.

Závěr

Ač se to z tohoto článku možná na první pohled nezdálo, vytvoření záložek je velmi jednoduché. Nejtěžší práci za vás totiž obstarají skvělé skripty z webu script.aculo.us. Jediné co musíte udělat vy, je zpracovat záložky pomocí PHP a ukládat je do cookies. Nic víc, nic míň. Věřím, že implementaci záložek na svůj web zvládnete v pohodě, stejně jako provázání skriptů s databází. Stačí na to jen základní znalost PHP a HTML.