QARK.net — Jak si vytvořit vlastní záložky
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.jseffect.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.


Soubor ke stažení

Zdojový soubor si můžete stáhnout [ZDE]



Související články:
Qark | 04. 12. 2006 14:10 | Komentáře: 15 | ::Programování


Přidat článek do: [ linkuj.cz], [ jagg.cz], [ asdf.sk], [ del.icio.us]

Stáhnout článek jako [ PDF]
[ RSS komentářů] k článku

[ Napsat] komentář

Články a fotografie z tohoto webu je zakázáno kopírovat a přidávat si je na svoje blogy, či kamkoliv jinam, bez mého písemného souhlasu!

Komentáře


1
StaNov url 04. 12. 2006 15:49

Až se naučím PHP, tak si to možná aji přečtu ;-)

Reakce na komentář: mzk #3Načítám náhled komentáře..., LordAli #5Načítám náhled komentáře...

2
LordKiller 04. 12. 2006 16:31

zajimavý článek, ale poslední web jsem dělal ještě v nekomerčním Golden Html Editoru a php je trošku dál :-) no jo, asi se budu muset zase začít učit :-)


3
mzk url 04. 12. 2006 17:40

Reakce na StaNov #1Načítám náhled komentáře...: přečíst si to můžeš i teď, pouze to moc nepochopíš.
Je to napsané dobře, pochopí i začátečník, ale stejně zůstanu u klasických záložek. Nebo google site:qark.net neco to jistí


4
r 04. 12. 2006 19:06

quark, na to je predsa del.iciou.us!!!!!!!!!!!!!!!!!!


5
LordAli 04. 12. 2006 23:30

Reakce na StaNov #1Načítám náhled komentáře...: Pořád něco chcete a když je tady na něco návod, tak si zas stěžujete (StaNov). Nebuďte líní !!! }:->


6
misa 05. 12. 2006 21:41

No já mám v Opeře schválně nastaveno mazání cookies při každém ukončení prohlížeče, takže tohle se mě moc netýká :-), ale jinak se mi to líbí, možná že to někdy použiju ;-).


7
Smajlix url 08. 12. 2006 23:43

Díky moc, přesně tohle jsem potřeboval; už delší dobu se snažím začít s AJAXem a tohle bude asi první věc se kterou si pohraju. fakt dík :-)


8
Stuart 09. 12. 2006 20:23

Díky :-) sice trochu umím PHP ale webdesinger zrovna nejsem světovy :-(

Určitě to využiju :-)


9
Denton 13. 12. 2006 00:04

Qarku, a co del.icio.us?


10
Smajlix 24. 12. 2006 04:09

mám drobný problém; po implementaci do svých stránek se mi podaří přidat jednu záložku za jednu stránku – po obnovení můžu přidat zase jen jednu etc.
Kde je chyba? Kam můžu kdyžtak hodit zdroj na kontrolu? Jsem z toho už bezradnej…

Reakce na komentář: Qark #11Načítám náhled komentáře...

11
Qark url 24. 12. 2006 11:17

Reakce na Smajlix #10Načítám náhled komentáře...: Na vině budou asi cookies. Buďto je nemáš zapnuté v prohlížeči (ale to by ti pak zase nejely ani záložky u mě) a nebo bude nutné do setcookie() zahrnout i cestu-path a doménu-domain (viz manuál)
Takže pokud bys záložky provozoval na doméně example.com, přepsal bys to všude například takhle:
SetCookie("zalozka", $odkazy, time()+$trvani,"/","example.com");

Reakce na komentář: Smajlix #13Načítám náhled komentáře...

12
Dur url 24. 12. 2006 13:00

Nějak jsem nepochopil co to vlastně má dělat a k čemu je to užitečné.


13
Smajlix 24. 12. 2006 22:45

Reakce na Qark #11Načítám náhled komentáře...: No, já právě přes sušenky nejedu, ale všechno ukládám uživatelům do db, aby se jim to objevilo i při přihlášení na jiných kompech. Kdybych někam šoupl kód, koukl by ses na to?


14
Smajlix 27. 12. 2006 14:57

Už sem chybu našel – neměl jsem u elementu pridat styl style="display: none;"
sry za spamovani


15
0x29a 08. 03. 2007 23:09

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

A pod tim to sileny volani s asi 4 deklaracema dalsich funkci :-)

BTW … co na tomhle webu dela sakra kategorie programovani … sem si rikal, ze musim delat taky neco jineho … a tak sem si zacal cist qark.net … a skoncil sem tady … u javascriptu …. grrr … bych mel se sebou neco delat :-)

Přidej komentář

Web je nyní kompletně uzavřen. Od této chvíle není možné přidávat žádné komentáře!

Další informace naleznete zde.