Prozkoumejte existující řešení nástrojů pro detekci pozic ve vyhledávačích, popište jejich funkce, výhody a nedostatky. Na základě předešlé analýzy

Prozkoumejte existující řešení nástrojů pro detekci pozic ve vyhledávačích, popište jejich funkce, výhody a nedostatky. Na základě předešlé analýzy navrhněte systém, který ukáže pozice webových stránek na vybraný výraz. Aplikace bude umožňovat další práci s nasbíranými daty — generování přehledových tabulek, grafů a statistik. Při návrhu se zaměřte na vylepšení funkcionalit, které jste shledali jako nedostatečné u řešení v předešlém průzkumu. Webové rozhraní by mělo splňovat základní požadavky kladené na tvorbu webových aplikací (validní kód, použitelnost, grafická úprava. . . ).

České vysoké učení technické v Praze Fakulta informačních technologií Katedra softwarového inženýrství

Bakalářská práce

Pokročilá webová aplikace pro detekci pozic ve vyhledávačích Luboš Müller

Vedoucí práce: Ing. Jiří Dostál

16. května 2012

Poděkování Chtěl bych především poděkovat Ing. Jiřímu Dostálovi, vedoucímu bakalářské práce, za všechny podněty, vstřícnost a ochotu. Také děkuji své rodině za podporu a toleranci při psaní této práce.

Prohlášení Prohlašuji, že jsem předloženou práci vypracoval samostatně a že jsem uvedl veškeré použité informační zdroje v souladu s Metodickým pokynem o etické přípravě vysokoškolských závěrečných prací. Beru na vědomí, že se na moji práci vztahují práva a povinnosti vyplývající ze zákona č. 121/2000 Sb., autorského zákona, ve znění pozdějších předpisů, zejména skutečnost, že České vysoké učení technické v Praze má právo na uzavření licenční smlouvy o užití této práce jako školního díla podle §60 odst. 1 autorského zákona.

V Praze dne 16. května 2012

..................... 7

České vysoké učení technické v Praze Fakulta informačních technologií c 2012 Luboš Müller. Všechna práva vyhrazena.

Tato práce vznikla jako školní dílo na Českém vysokém učení technickém v Praze, Fakultě informačních technologií. Práce je chráněna právními předpisy a mezinárodními úmluvami o právu autorském a právech souvisejících s právem autorským. K jejímu užití, s výjimkou bezúplatných zákonných licencí, je nezbytný souhlas autora.

Odkaz na tuto práci Luboš Müller. Pokročilá webová aplikace pro detekci pozic ve vyhledávačích: Bakalářská práce. Praha: ČVUT v Praze, Fakulta informačních technologií, 2012.

Abstract This thesis deals with the development of a web application for the detection of positions in search engines Seznam, Google, Jyxo and Bing. The application is available online at http://www.livedetect.cz. The thesis describes the existing solutions for detecting the positions. Then it deals with the analysis of source code of sites with search results, design and implementation of the application and testing. The thesis also includes installation and user guide. Keywords positions in search engine, reports, graphs, SEO, LiveDetect

Abstrakt Tato bakalářská práce se zabývá vývojem webové aplikace pro detekci pozic ve vyhledávačích Seznam, Google, Jyxo a Bing. Aplikace je dostupná online na http://www.livedetect.cz. Práce popisuje existující řešení pro zjišťování pozic. Dále práce pojednává o analýze zdrojových kódů stránek s výsledky vyhledávání, návrhu a způsobu implementace aplikace a jejím testování. Součástí práce je také instalační a uživatelská příručka. Klíčová slova pozice ve vyhledávači, přehledy, grafy, SEO, LiveDetect

9

Obsah Odkaz na tuto práci . . . . . . . . . . . . . . . . . . . . . . . . Úvod 1 Existující řešení 1.1 Bezplatné služby . . . . . . . . . . . . . . . . . 1.1.1 SEO Servis . . . . . . . . . . . . . . . . 1.1.2 SEO nástroje . . . . . . . . . . . . . . . 1.1.3 Instant Search Engine Rankings Report 1.2 Placené nástroje . . . . . . . . . . . . . . . . . 1.2.1 Collabim . . . . . . . . . . . . . . . . . 1.2.2 AuthorityLabs Rank Monitoring . . . . 1.3 Specifikace cíle . . . . . . . . . . . . . . . . . .

8 19

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

21 22 22 23 24 25 25 26 27

2 Analýza a návrh aplikace 2.1 Požadavky na aplikaci . . . . . . . . . . . . . . . . . . . 2.1.1 Funkční požadavky . . . . . . . . . . . . . . . . . 2.1.2 Nefunkční požadavky . . . . . . . . . . . . . . . 2.2 Doménový model aplikace . . . . . . . . . . . . . . . . . 2.3 Návrh databáze . . . . . . . . . . . . . . . . . . . . . . . 2.3.1 Struktura databáze a popis tabulek . . . . . . . . 2.4 Analýza případů užití . . . . . . . . . . . . . . . . . . . 2.4.1 Registrace . . . . . . . . . . . . . . . . . . . . . . 2.4.2 Přihlášení . . . . . . . . . . . . . . . . . . . . . . 2.4.3 Zobrazení statických stránek . . . . . . . . . . . 2.4.4 Statistiky účtu . . . . . . . . . . . . . . . . . . . 2.4.5 Změna hesla . . . . . . . . . . . . . . . . . . . . 2.4.6 Přehled balíčků . . . . . . . . . . . . . . . . . . . 2.4.7 Smazat balíček . . . . . . . . . . . . . . . . . . . 2.4.8 Detail balíčku . . . . . . . . . . . . . . . . . . . . 2.4.9 Seznam klíčových slov balíčku . . . . . . . . . . . 2.4.10 Přidání klíčového slova ke všem webům z balíčku 2.4.11 Smazání klíčového slova z balíčku . . . . . . . . . 2.4.12 Seznam webů balíčku . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

29 29 29 30 30 30 31 32 32 32 32 34 34 34 34 34 35 35 35 35

. . . . . . . .

. . . . . . . .

. . . . . . . .

. . . . . . . .

11

2.5

2.4.13 Přidání webu do balíčku . . . . . . . . . . . . . . . 2.4.14 Smazání webu z balíčku . . . . . . . . . . . . . . . 2.4.15 Detail webu . . . . . . . . . . . . . . . . . . . . . . 2.4.16 Přidání klíčového slova k webu . . . . . . . . . . . 2.4.17 Smazání klíčového slova z webu . . . . . . . . . . . 2.4.18 Zobrazení statistiky pozic ve vyhledávačích . . . . 2.4.19 Import pozic z vyhledávačů . . . . . . . . . . . . . Analýza struktury stránek vyhledávačů a jejich parsování 2.5.1 Stránka s výsledky vyhledávání Seznam.cz . . . . . 2.5.2 Stránka s výsledky vyhledávání Google.cz . . . . . 2.5.3 Stránka s výsledky vyhledávání Jyxo.cz . . . . . . 2.5.4 Stránka s výsledky vyhledávání Bing.com . . . . .

3 Implementace 3.1 Nette Framework . . . . . . . . . . . . 3.1.1 Model-View-Controller (MVC) 3.1.2 Knihovny . . . . . . . . . . . . 3.2 Databáze . . . . . . . . . . . . . . . . 3.3 Frontend aplikace . . . . . . . . . . . . 3.4 Backend aplikace . . . . . . . . . . . . 3.4.1 DefaultPresenter . . . . . . . . 3.4.2 AccountPresenter . . . . . . . . 3.4.3 ParsersPresenter . . . . . . . . 3.4.4 WebPresenter . . . . . . . . . . 3.4.5 StatisticsPresenter . . . . . . . 3.5 Vzhled aplikace . . . . . . . . . . . . . 3.5.1 Šablona HTML5 a CSS3 . . . . 3.5.2 jQuery . . . . . . . . . . . . . . 3.6 Google Chart Tools . . . . . . . . . . . 3.7 Zabezpečení . . . . . . . . . . . . . . . 3.8 Knihovna LiveDetect . . . . . . . . . . 3.9 Jméno aplikace . . . . . . . . . . . . . 3.10 Diagram nasazení . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

. . . . . . . . . . . .

35 36 36 36 36 36 37 38 38 39 40 41

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . .

43 43 43 44 44 44 45 45 45 45 45 46 46 46 47 48 49 49 51 51

4 Testování 53 4.1 Testování validity HTML5 . . . . . . . . . . . . . . . . . . . . . 53 4.2 Testování případů užití . . . . . . . . . . . . . . . . . . . . . . . 53 4.3 Testování množství dotazů na vyhledávač . . . . . . . . . . . . 54 4.3.1 Jakou mají vyhledávače ochranu proti zneužití výsledků vyhledávání? . . . . . . . . . . . . . . . . . . . . . . . . 54 4.3.2 Jak dlouho bude trvat zjišťování pozic? . . . . . . . . . 54 4.4 Testování správnosti nalezených pozic . . . . . . . . . . . . . . 54 Závěr

57 12

Literatura

59

A Instalační příručka A.1 Požadavky na webový server . . . . . . . . . A.2 Apache, PHP, MySQL . . . . . . . . . . . . . A.3 Požadavky Nette Framework . . . . . . . . . A.4 Instalace na webovém serveru krok za krokem A.4.1 Databáze . . . . . . . . . . . . . . . . A.4.2 Soubory . . . . . . . . . . . . . . . . . A.4.3 Práva . . . . . . . . . . . . . . . . . . A.4.4 Cesty . . . . . . . . . . . . . . . . . . A.4.5 Konfigurační soubor . . . . . . . . . . A.4.6 První spuštění . . . . . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

. . . . . . . . . .

63 63 63 63 65 65 66 66 66 66 67

B Uživatelská příručka B.1 Průvodce aplikací . . . . . . . . . . . . . . B.1.1 Obrazovka 1 – registrace . . . . . . B.1.2 Obrazovka 2 – přihlášení . . . . . B.1.3 Obrazovka 3 – účet . . . . . . . . . B.1.4 Obrazovka 4 – balíčky . . . . . . . B.1.5 Obrazovky 5 a 6 – detail balíčku . B.1.6 Obrazovka 7 – detail webu . . . . B.1.7 Obrazovky 8 a 9 – statistika pozic B.1.8 Obrazovky 10 a 11 – import dat .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

. . . . . . . . .

69 69 70 70 70 70 71 72 73 74

. . . . . . . . .

. . . . . . . . .

C Seznam použitých zkratek

77

D Obsah přiloženého CD

79

13

Seznam obrázků 1.1 1.2 1.3 1.4 1.5

Ukázka Ukázka Ukázka Ukázka Ukázka

aplikace aplikace aplikace aplikace aplikace

SEO Servis . . . . . . . . . . . . . . . . SEO nástroje . . . . . . . . . . . . . . Instant Search Engine Rankings Report Collabim . . . . . . . . . . . . . . . . . AuthorityLabs Rank Monitoring . . . .

. . . . .

22 23 24 25 26

2.1 2.2 2.3

Doménový model . . . . . . . . . . . . . . . . . . . . . . . . . . . . Relační databázový model . . . . . . . . . . . . . . . . . . . . . . . Případy užití . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

31 33 37

3.1

Případy užití . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

51

4.1

Vývoj pozice webu . . . . . . . . . . . . . . . . . . . . . . . . . . .

55

A.1 Požadavky na webový server . . . . . . . . . . . . . . . . . . . . .

64

B.1 B.2 B.3 B.4 B.5 B.6 B.7 B.8 B.9 B.10 B.11

70 70 71 71 72 72 73 73 74 75 75

Ukázka registrace . . . . . . . . . . . . . Ukázka přihlášení . . . . . . . . . . . . Ukázka stránky s detailem účtu . . . . . Ukázka stránky s balíčky . . . . . . . . Detail balíčku – weby . . . . . . . . . . Detail balíčku – klíčová slova . . . . . . Ukázka stránky s detailem webu . . . . Statistika pozic – graf, kalendář, snippet Statistika pozic – tabulka . . . . . . . . Výběr importu . . . . . . . . . . . . . . Ukázka průběhu importu . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . . . . . . . .

. . . . .

. . . . . . . . . . .

. . . . .

. . . . . . . . . . .

. . . . .

. . . . . . . . . . .

. . . . .

. . . . . . . . . . .

. . . . .

. . . . . . . . . . .

. . . . . . . . . . .

15

Seznam tabulek 4.1

Doba načítání pozic v sekundách . . . . . . . . . . . . . . . . . . .

55

A.1 Co znamenají některé z položek . . . . . . . . . . . . . . . . . . . .

65

17

Úvod Měření pozic ve vyhledávačích je v poslední době často skloňovaný pojem. Firmám záleží na tom, aby se jejich webové prezentace zobrazovaly co nejvýše ve výsledcích fulltextového vyhledávání předních vyhledávačů. Ruční kontrola pozic bývá často velmi zdlouhavá. Proto na českém internetu existuje několik nástrojů, které zjišťují pozice ve vyhledávačích automaticky. Avšak tyto nástroje jsou buď placené nebo neposkytují kvalitní data. V této bakalářské práci se věnuji právě vývoji aplikace pro detekci pozic ve vyhledávačích, která bude poskytovat data odpovídající skutečnosti a zjednoduší analýzu pozic. V následujících kapitolách budu nejprve popisovat současná řešení pro měření pozic, shrnu jejich funkce, výhody a nedostatky. Poté se budu věnovat analýze, návrhu a způsobu implementace této aplikace. V kapitole testování popíši testy funkcí aplikace a testy požadavků na vyhledávače Seznam, Google, Jyxo a Bing.

19

KAPITOLA

Existující řešení Pro potřeby SEO analytiků existuje na internetu několik online nástrojů, které se problémem detekce pozic ve vyhledávačích zabývají. Prvním úkolem práce je prozkoumat funkce stávajících komerčních i nekomerčních aplikací, popsat jejich výhody (např. kvalita a přesnost výsledků) i nevýhody (nepřívětivé uživatelské rozhraní, placené služby nebo nízká frekvence stahování dat).

21

1

1. Existující řešení

1.1 1.1.1

Bezplatné služby SEO Servis

Dostupné online[1] http://seo-servis.cz/search-pozice-ve-vyhledavacich/

Obrázek 1.1: Ukázka aplikace SEO Servis

• Funkce Pomocí nástroje SEO servis lze zjistit pozice ve vyhledávačích Seznam, Google, Jyxo a Bing. Pozice ve vyhledávačích v minulosti. SEO servis uživateli ukáže také počet zpětných odkazů a zaindexované stránky. Dále dokáže zobrazit hodnoty PageRankTM , S-rank, Alexarank. • Výhody Přehledné uživatelské rozhraní. Odkazy na statistky hledanosti klíčových slov Seznam a Google. • Nedostatky SEO servis zobrazí pozice pouze pro jeden web a klíčové slovo. Neexistuje možnost načíst data zpětně – nástroj slouží pro občasné použití. Odchylky výsledků od reálných pozic.

22

1.1. Bezplatné služby

1.1.2

SEO nástroje

Dostupné online[2] http://www.seonastroje.cz/klicova-slova-pozice

Obrázek 1.2: Ukázka aplikace SEO nástroje

• Funkce Detektor pozic pro Seznam, Google CZ, Google EN a Google SK. Možnost zadat více klíčových slov a webů najednou. Včetně nalezené pozice SEO nástroje zobrazují i počet výsledků v daném vyhledávači. Uživatel se může zaregistrovat. Tím získá nástroj SEO monitor, který ukazuje výsledky dalších jazykových verzí Google a má k dispozici graf s vývojem pozic. Podmínkou pro použití free verze SEO monitoru je umístění odkazu na sledovaný web. • Výhody Registrovaný uživatel získá celkem kvalitní nástroj pro detekci pozic zdarma. Přesnost výsledků. Automatické zasílání výsledků emailem. • Nedostatky U verze bez registrace musí uživatel zadat kód captcha, který je často velmi nečitelný. Maximálně 10 sledovaných klíčových slov pro 1 web. Ukládání historie pouze po dobu 6 měsíců. Bez exportu dat. Umístění odkazu na sledovaný web.

23


1.1.3

Instant Search Engine Rankings Report

Dostupné online[3] http://searchenginereports.net/

Obrázek 1.3: Ukázka aplikace Instant Search Engine Rankings Report

• Funkce Nástroj pro výpis pozic pro jeden web ve vyhledávačích Google EN a Bing. • Výhody Uživatel má možnost zadat více klíčových slov. Přidanou hodnotou je náhled snipetu s titulkem stránky, popisem a odkazem. Jednoduché uživatelské rozhraní. Data se načítají a zobrazují postupně pro každý vyhledávač, což přispívá plynulosti aplikace. • Nedostatky Neplacená verze pouze na 30 dní. Chybí české vyhledávače.

24

1.2. Placené nástroje

1.2 1.2.1

Placené nástroje Collabim

Dostupné online[4] http://www.collabim.cz/

Obrázek 1.4: Ukázka aplikace Collabim

• Funkce Měření pozic do prvních 60 výsledků ve vyhledávačích Seznam, Bing (česky), Yahoo!, Google (CZ, SK, EN, DE, PL). Zobrazení hledanosti klíčových slov v Google. Tabulka s přehledem klíčových slov k danému webu. Je vidět změna pozice oproti minulému vyhledávání. Pro každé klíčové slovo je k dispozici graf s vývojem pozice v čase. Je možné deaktivovat stahování dat u konkrétního klíčového slova, přitom se nemusí smazat. Psaní poznámek ke klíčovým slovům. Export dat ve formátu .cvs nebo .xlsx. Zasílání reportu e-mailem. • Výhody Přehledné uživatelské rozhraní. Při prvním spuštění je uživatel provázen nápovědou step-by-step. Účet může spravovat více uživatelů, lze jim přiřadit role administrator, editor a client. Collabim umožňuje členění klíčových slov do skupin. • Nedostatky Fungování Collabimu je omezeno na prohlížeče Mozilla Firefox 3.5+, Google Chrome 6+ a Safari 5+. Pro správnou funkci je nutné nainstalovat plugin do prohlížeče, bez něj nelze nástroj pro detekci pozic spustit. Cena za Collabim při správě 15 webů je 1200Kč/měsíc. Nevýhodou jsou drobné odchylky od reálných pozic ve vyhledávačích. 25


1.2.2

AuthorityLabs Rank Monitoring

Dostupné online[5] http://authoritylabs.com/

Obrázek 1.5: Ukázka aplikace AuthorityLabs Rank Monitoring

• Funkce Měření pozic ve vyhledávačích Bing, Yahoo! a Google do 100 pozice. Tabulka se zadanými doménami, která ukazuje průměrnou pozici všech klíčových slov v žebříčku top 100 v rámci domény a příslušnou změnu pozice z předchozího dne. Zároveň obsahuje malé grafy, které ukazují trendy za posledních 30 dnů od aktuálního data. Tabulka s přehledem klíčových slov k danému webu. Je vidět změna pozice oproti minulému vyhledávání i hustota vyhledávání. • Výhody Weby lze členit do skupin. Potom stačí zadat klíčové slovo pouze jednou a přiřadit jej skupině, není třeba jej psát pro každý web zvlášť. • Nedostatky Web není dostupný v češtině. Chybí vyhledávání v české verzi Google a dalších českých vyhledávačích. Cena za 10 domén činí $24/měsíc, v tomto tarifu je omezení na 100 klíčových slov.

26

1.3. Specifikace cíle

1.3

Specifikace cíle

Cílem této práce je navrhnout a implementovat webovou aplikaci pro detekci pozic ve vyhledávačích. Po prozkoumání existujících řešení jsem vzal v potaz silné stránky těchto aplikací a sestavil jsem následující specifikaci: • aplikace přístupná online • zobrazení pozic webových stránek z přirozeného vyhledávání Seznam, Google (česky), Jyxo a Bing (česky) • přesnost nalezených pozic • každý uživatel si pozice z vyhledávačů stahuje sám, tzn. nebude omezen automatickým stahováním • členění webů do skupin (balíčků) • přehledy klíčových slov a webů • zobrazení změny pozice oproti předchozímu vyhledání • grafy s denní pozicí klíčových slov • zobrazení snippetu z vyhledávače • export dat • tisk dat

27

KAPITOLA

Analýza a návrh aplikace V této kapitole se budu věnovat funkčním a nefunkčním požadavkům na aplikaci a návrhu struktury aplikace a databáze. Důležitou součástí této kapitoly bude také analýza zdrojových kódů stránek s výsledky vyhledávání a prozkoumání způsobu, jak pozici ve vyhledávači načíst – toto je nezbytné pro pozdější implementaci jednotlivých parserů 1

2.1 2.1.1

Požadavky na aplikaci Funkční požadavky

• zobrazení pozic webových stránek z přirozeného vyhledávání: – Seznam – Google (česká verze) – Bing (české výsledky vyhledávání) – Jyxo • procházení stránek vyhledávačů do 100. pozice • každý uživatel si pozice z vyhledávačů stahuje sám, tzn. nebude omezen automatickým stahováním např. jednou za týden • členění webů do skupin (balíčků), kvůli snazšímu přiřazování klíčových slov • přehledy klíčových slov a webů 1 Z anglického parse. V tomto případě se jedná o program, který bude analyzovat zdrojový kód vyhledávačů. Dále v textu budu výraz parser používat.

29

2

2. Analýza a návrh aplikace • v tabulce zobrazení změny pozice oproti předchozímu vyhledání • grafy s denní pozicí klíčových slov • zobrazení snippetu z vyhledávače (adresa, titulek, popis) • zobrazení náhledu stránky z vyhledávače • export dat do formátů pdf, csv, excel • tisk dat

2.1.2

Nefunkční požadavky

• Apache, PHP, MySQL kvůli nasazení na serveru s těmito technologiemi • použití frameworku Nette[6] • použití Google Chart Tools[7] • dostupnost přes web – systém bude dostupný jako webová aplikace • povinné přihlašování – pro používání aplikace se musí uživatel nejprve přihlásit • povinná registrace – každý člen týmu musí být registrován • ukládání pozic do databáze • omezení počtu klíčových slov a webů, aby vyhledávač uživateli nezablokoval vyhledávání

2.2

Doménový model aplikace

Základem pro návrh doménového modelu jsou požadavky na aplikaci a následující scénář: Uživatel se zaregistruje a přihlásí do aplikace. Založí si jeden nebo více balíčků (skupin), kam vloží klíčová slova a weby. Uživatel má možnost kdykoliv importovat pozice z vyhledávačů. Statistiky se vztahují k dvojici klíčové slovoweb. Každá tato dvojice také obsahuje snippety ze všech čtyř vyhledávačů.

2.3

Návrh databáze

Struktura databáze, která vychází z doménového modelu je základním kamenem této aplikace. Jako databázový systém jsem zvolil MySQL, tabulky jsou typu MyISAM. Celkem databáze obsahuje 11 tabulek. Jména tabulek a sloupců jsou zvolena s ohledem na abstraktní vrstvu Diggriola[8], která umožňuje snadnější tvorbu dotazů s použitím Nette a NotORM[9]. 30

2.3. Návrh databáze

Obrázek 2.1: Doménový model vygenerovaný pomocí nástroje Enterprise Architect[11] ukazuje strukturu aplikace. Na základě tohoto modelu je vytvořena databáze.

2.3.1

Struktura databáze a popis tabulek

• Tabulka users Tabulka s detaily uživatelů. Obsahuje id – primární klíč, jméno, příjmení, email, uživatelskou roli a heslo pro přihlášení do aplikace. • Tabulka packages Balíčky nebo také skupiny klíčových slov a webových stránek. Obsahuje id – primární klíč, název balíčku a identifikátor uživatele, kterému balíček patří – cizí klíč. • Tabulka webs Seznam URL adres. Obsahuje id – primární klíč a URL adresu ve formátu www.example.com. • Tabulka keywords Seznam klíčových slov. Obsahuje id – primární klíč a klíčové slovo. • Tabulka keywords_webs Dekompoziční tabulka. Přiřazuje klíčová slova k URL adresám. Obsahuje id – primární klíč, dále údaj, jestli je dvojice klíčové slovo-adresa aktivní (bude se zjišťovat pozice) a cizí klíče identifikátory z tabulek webs a keywords. 31

2. Analýza a návrh aplikace • Tabulka packages_keywords_webs Dekompoziční tabulka. Určuje, která dvojice klíčové slovo-adresa patří do kterého balíčku. Obsahuje id – primární klíč a cizí klíče identifikátory z tabulek packages a keywords_webs. • Tabulky google_stats, seznam_stats, jyxo_stats, bing_stats Tyto tabulky uchovávají nalezené pozice ve vyhledávačích. Každá obsahuje id – primární klíč, pozici, datum nalezení pozice a cizí klíč identifikátor vyhledávané dvojice klíčové slovo-adresa. • Tabulka snippet V této tabulce jsou uloženy snippety – náhledy odkazů z vyhledávačů. Obsahuje id – primární klíč, titulek stránky, krátký popis, URL, adresu náhledu, údaj, ke kterému vyhledávači snippet patří a cizí klíč identifikátor vyhledávané dvojice klíčové slovo-adresa.

2.4

Analýza případů užití

Analýza případů užití se vztahuje k funkčním požadavkům a rozšiřuje je do výsledné podoby. Tato analýza definuje chování celého systému. Obsahuje celkem 19 případů užití aplikace.

2.4.1

Registrace

• Aktér: Nepřihlášený uživatel • Popis: Nepřihlášený uživatel chce používat aplikaci. Vyplní krátký registrační formulář. Údaje projdou validací jak na straně klienta, tak na straně serveru. Pokud registrace proběhne úspěšně, dojde k přesměrování na stránku pro přihlášení do aplikace.

2.4.2

Přihlášení

• Aktér: Nepřihlášený uživatel • Popis: Nepřihlášený uživatel se chce přihlásit do aplikace. Zobrazí se formulář pro zadání e-mailu a hesla. Uživatel vyplní obě pole a formulář odešle. Údaje projdou validací jak na straně klienta, tak na straně serveru. Pokud jsou údaje správné, je uživatel úspěšně přihlášen.

2.4.3

Zobrazení statických stránek

• Aktér: Nepřihlášený uživatel, přihlášený uživatel • Popis: Uživatel zobrazí výběrem položky z menu statickou stránku s obsahem, který nevyžaduje přihlášení do aplikace. 32

2.4. Analýza případů užití

Obrázek 2.2: Relační databázový model vygenerovaný pomocí nástroje MySQL Workbench 5.2 CE[10]

33

2. Analýza a návrh aplikace

2.4.4

Statistiky účtu

• Aktér: Přihlášený uživatel • Popis: Uživatel si chce prohlédnout statistiky účtu. Výběrem položky z menu zobrazí detail účtu statistiky. Těmi jsou počet balíčků, počet webů, počet klíčových slov, počet dvojic klíčové slovo-web.

2.4.5

Změna hesla

• Aktér: Přihlášený uživatel • Popis: Uživatel si přeje změnit heslo pro přihlášení. Výběrem položky z menu zobrazí detail účtu, který zároveň obsahuje formulář pro změnu hesla. Uživatel zadá staré heslo a nové heslo, které pro ověření ještě jednou zopakuje. Pokud údaje projdou validací, heslo se úspěšně změní. Uživatel je informován.

2.4.6

Přehled balíčků

• Aktér: Přihlášený uživatel • Popis: Uživatel zobrazí přehled balíčků po výběru položky z menu. Tato stránka je také zobrazena ihned po přihlášení. Přehled balíčků je zobrazen ve formě tabulky a má možnosti tisku a exportu dat do několika formátů. Součástí je také filtr pro vyhledávání.

2.4.7

Smazat balíček

• Aktér: Přihlášený uživatel • Popis: Uživatel chce smazat celý balíček. Z menu přejde na stránku s přehledem balíčků. Kliknutím na položku Smazat akce započne. Systém se zeptá na potvrzení akce. Pokud uživatel souhlasí, je balíček smazán. V opačném případě se nic nestane.

2.4.8

Detail balíčku

• Aktér: Přihlášený uživatel • Popis: Uživatel si přeje zobrazit obsah balíčku. Z menu přejde na stránku s přehledem balíčků. Kliknutím na položku Detail přejde na stránku s detailem balíčku. Detail balíčku je zobrazen ve formě dvou záložek. První se týká webů a obsahuje formulář pro přidání webu a seznam webů. Druhá záložka obsahuje formulář pro přidání klíčového slova a přehled klíčových slov v balíčku. 34


2.4.9

Seznam klíčových slov balíčku

• Aktér: Přihlášený uživatel • Popis: Uživatel se nachází v detailu balíčku a přeje si zobrazit seznam klíčových slov. To udělá výběrem požadované záložky.

2.4.10

Přidání klíčového slova ke všem webům z balíčku

• Aktér: Přihlášený uživatel • Popis: Uživatel se nachází v detailu balíčku na záložce Klíčová slova a chce přidat klíčové slovo. To vyplní do formulářového pole. Formulář odešle, klíčové slovo se přidá k webům v rámci povoleného limitu. Pokud je během přidávání limit překročen, je uživatel informován.

2.4.11

Smazání klíčového slova z balíčku

• Aktér: Přihlášený uživatel • Popis: Uživatel se nachází v detailu balíčku na záložce Klíčová slova a chce smazat klíčové slovo. Kliknutím na položku Smazat akce započne. Systém se zeptá na potvrzení akce. Pokud uživatel souhlasí, je klíčové slovo smazáno ze všech webů v balíčku a z balíčku samotného také. V opačném případě se nic nestane.

2.4.12

Seznam webů balíčku

• Aktér: Přihlášený uživatel • Popis: Uživatel se nachází v detailu balíčku a přeje si zobrazit seznam webů. To udělá výběrem požadované záložky.

2.4.13

Přidání webu do balíčku

• Aktér: Přihlášený uživatel • Popis: Uživatel se nachází v detailu balíčku na záložce Weby a chce přidat web. Ten vyplní do formulářového pole. Uživatel zaškrtnutím checkboxu zvolí, jestli chce k webu přidat klíčová slova, která už jsou v balíčku obsažena. Formulář odešle, klíčová slovo se přidají k webu v rámci povoleného limitu. Pokud je během přidávání limit překročen, je uživatel informován. Pokud checkbox není zaškrtnut, přidá se web bez přiřazených klíčových slov. 35


2.4.14

Smazání webu z balíčku

• Aktér: Přihlášený uživatel • Popis: Uživatel se nachází v detailu balíčku na záložce Weby a chce smazat web. Kliknutím na položku Smazat akce započne. Systém se zeptá na potvrzení akce. Pokud uživatel souhlasí, je web smazán. V opačném případě se nic nestane.

2.4.15

Detail webu

• Aktér: Přihlášený uživatel • Popis: Uživatel se nachází v detailu balíčku na záložce Weby a chce zobrazit detail webu. Kliknutím na položku Detail přejde na stránku s detailem webu. Ten obsahuje pro přidání klíčového slova a přehled klíčových slov spárovaných s webem.

2.4.16

Přidání klíčového slova k webu

• Aktér: Přihlášený uživatel • Popis: Uživatel se nachází v detailu webu a chce přidat klíčové slovo. To vyplní do formulářového pole. Formulář odešle, klíčové slovo se přidá k webu pokud není překročen povolený limit na dvojice. Pokud je během přidávání limit překročen, je uživatel informován.

2.4.17

Smazání klíčového slova z webu

• Aktér: Přihlášený uživatel • Popis: Uživatel se nachází v detailu webu a chce smazat klíčové slovo. Kliknutím na položku Smazat akce započne. Systém se zeptá na potvrzení akce. Pokud uživatel souhlasí, je klíčové slovo smazáno z webu. V opačném případě se nic nestane.

2.4.18

Zobrazení statistiky pozic ve vyhledávačích

• Aktér: Přihlášený uživatel • Popis: Uživatel se nachází v detailu webu a chce zobrazit statistiku pozic ve vyhledávačích po zadání konkrétního klíčového slova. Kliknutím na položku Zobrazit se zobrazí stránka se statistikami. Stránka se skládá ze dvou částí. První část jsou 4 záložky pro vyhledávače Seznam, Google, Jyxo a Bing. Každá záložka obsahuje graf s vývojem pozic mezi jednotlivými importy dat. Uživatel může měnit hodnoty 36


Obrázek 2.3: Model případů užití vygenerovaný pomocí nástroje Enterprise Architect[11]. Z úsporných důvodů jsou zobrazeny pouze některé případy užití. Celý model je k dispozici na přiloženém CD.

v grafu na základě výběru data z kalendáře. Pod grafem má své místo snippet – náhled, jak vypadá stránka mezi výsledky vyhledávání. Druhou částí je tabulka se všemi importovanými pozicemi. Pozice jsou zobrazeny včetně posunu od předchozího importu (zelená znamená posun nahoru mezi výsledky vyhledávání, červená naopak). Zvláštní pozornost je třeba věnovat hodnotě 110. Tato konstanta znamená, že stránka nebyla nalezena mezi prvními sto pozicemi. Aplikace stahuje data do sté pozice. Po najetí myší do tabulky se zobrazí datum importu dané pozice. Nechybí toolbar pro export dat.

2.4.19

Import pozic z vyhledávačů

• Aktér: Přihlášený uživatel

• Popis: Uživatel si přeje importovat pozice. Z menu přejde na stránku s importy. Kliknutím na požadovaný odkaz se provede import. Průběh je zobrazen pomocí progressbaru. Importy jednotlivých vyhledávačů lze opakovat po třiceti minutách. 37


2.5

Analýza struktury stránek vyhledávačů a jejich parsování

Základem pro parsování vyhledávačů je využití stromové struktury objektového modelu dokumentu (DOM). Vyhledávače mají různou strukturu generované stránky s výsledky, proto je pro každý nutné vytvořit specifický parser. PHP umožňuje práci s DOM pomocí třídy DOMDocument. Všechny používané parsery použité v této práci mají společný základní algoritmus: • Otevři stránku s výsledky vyhledávání – načtení pomocí URL s parametry. • Načti dokument. • V cyklu projdi požadované elementy. • Porovnej nalezená data. • Vrať výslednou pozici. Struktura DOM stránek s výsledky vyhledávání není konstantní. Během psaní této práce se např. ve vyhledávačích Seznam a Google několikrát změnila. Na tyto změny je nutné reagovat a průběžně upravovat parsery, aby nedeocházelo k chybám.

2.5.1

Stránka s výsledky vyhledávání Seznam.cz

• URL + parametry http://search.seznam.cz/?q=example&count=10&from=1[12] – q – Označuje dotaz pro hledání. Dotaz je standardně kódovaný v utf-8. Kromě utf-8 může být použito také kódování windows-1250, iso-8859-2 nebo utf-16. – count – Určuje počet výsledků vyhledávání na stránce. Defaultně je nastaven na 10, maximálně může zobrazit 20 výsledků na stránce. Pro účely parseru použitého v této práci bude ponecháno nastavení na 10 výsledků. – from – Určuje, od jakého výsledku v pořadí mají být vráceny výsledky. Defaultně je nastaven na 1, jeho maximální hodnota je 1000, což se rovná hodnotě parametru count. Pro účely parseru použitého v této práci bude jeho maximální hodnota 90, která odpovídá desáté stránce s výsledky vyhledávání. • Struktura zdrojového kódu výsledků vyhledávání V běžném vyhledávání se mezi přirozenými výsledky zobrazují také odkazy na partnerské weby Seznam.cz. Jedná se o Firmy.cz, Obrazky.cz, 38

2.5. Analýza struktury stránek vyhledávačů a jejich parsování Videa.seznam.cz a Mapy.cz. Tyto odkazy mají stejnou strukturu DOM, takže ve zdrojovém kódu vypadají stejně jako přirozené výsledky. Je nezbytné je kvůli přesnosti parseru vyloučit. < div id = " results " > < table class = " result " > < tr > < td class = " limiter " > < h3 > Example < table class = " result " > < tr > < td class = " limiter " > < h3 > Example2 ...

Výpis kódu 2.1: Celý zdrojový kód s výsledky obsahuje pro potřeby parseru zbytečné elementy, důležité jsou uvedeny v tomto výpisu.

2.5.2

Stránka s výsledky vyhledávání Google.cz

• URL + parametry http://www.google.cz/search?q=example&num=10&start=0 – q – Označuje dotaz pro hledání. Dotaz je standardně kódovaný v utf-8. – num – Určuje počet výsledků vyhledávání na stránce. Defaultně je nastaven na 10. Pro účely parseru použitého v této práci bude použito nastavení na 20 výsledků. Výhodou tohoto nastavení je zrychlení vyhledávání pozice - načítá se polovina stránek. Nevýhodou je drobné snížení přesnosti. Při zobrazení více než deseti výsledků na stránce mají odkazy jiné pořadí. – start – Určuje, od jakého výsledku v pořadí mají být vráceny výsledky. Defaultně je nastaven na 0. Pro účely parseru použitého v této práci bude jeho maximální hodnota 90, která odpovídá desáté stránce s výsledky vyhledávání. 39

2. Analýza a návrh aplikace • Struktura zdrojového kódu výsledků vyhledávání Parsování stránek s výsledky probíhá přes seznam elementů . Ty jsou společné i pro reklamu Google Adwords - první jeden, dva nebo tři výsledky vyhledávání, stejně tak na konci stránky. Jsou odlišeny vizuálně a nepatří mezi přirozené vyhledávání. Je proto nutné je vyloučit. < ol > < li class = " g " > < div class = " vsc " > < h3 class = " r " > Example < li class = " g " > < div class = " vsc " > < h3 class = " r " > Example2 ...


2.5.3

Stránka s výsledky vyhledávání Jyxo.cz

• URL + parametry http://jyxo.vybereme.cz/s?q=example&skip=0&d=cz&page=1 – q – Označuje dotaz pro hledání. Dotaz je standardně kódovaný v utf-8. – skip – Určuje, kolik odkazů se má přeskočit před jejich zobrazením. Pro první stránku s výsledky má hodnotu 0. Pro další již volitelně, standartní hodnota je 10, kterou bude používat i parser v této práci. – d – Nepovinný parametr. Databáze s výsledky, výchozí hodnota cz. – page – Znamená číslo stránky s výsledky. Tento parametr úzce souvisí s parametrem skip. • Struktura zdrojového kódu výsledků vyhledávání Vyhledávač Jyxo neobsahuje mezi výsledky přirozeného vyhledávání žádné přebytečné reklamy nebo odkazy na partnerské weby jako Seznam nebo Google.

40

2.5. Analýza struktury stránek vyhledávačů a jejich parsování

< div class = " r " > Example < div class = " r " > Example2 ...


2.5.4

Stránka s výsledky vyhledávání Bing.com

Protože je tato práce zaměřena na výsledky vyhledávání v českém prostředí internetu, přidává se k vyhledávanému klíčovému slovu řetězec loc:CZ. Díky němu budou zobrazeny pouze odkazy z databáze stránek s českou lokalizací. • URL + parametry http://www.bing.com/search?q=example&first=1 – q – Označuje dotaz pro hledání. Dotaz je standardně kódovaný v utf-8. – first – Určuje, od jakého výsledku v pořadí mají být vráceny výsledky. Defaultně je nastaven na 1. Pro účely parseru použitého v této práci bude jeho maximální hodnota 90, která odpovídá desáté stránce s výsledky vyhledávání. • Struktura zdrojového kódu výsledků vyhledávání Stejně jako Jyxo tak i Bing neobsahuje mezi výsledky přirozeného vyhledávání žádné sebou doplněné odkazy, které by bylo nutné odfiltrovat. < ul id = " wg0 " class = " sb_results " > < li class = " sa_wr " > < div class = " sb_tlst " > < h3 > Example < li class = " sa_wr " > < div class = " sb_tlst " > < h3 > Example2

41

2. Analýza a návrh aplikace ...


42

KAPITOLA

Implementace V této kapitole se budu podrobněji věnovat implementaci celé aplikace. Protože je aplikace postavena na Nette Frameworku, bude se popis implementace částečně odvíjet od jeho struktury.

3.1

Nette Framework

Jako základ pro tvorbu aplikace pro detekci pozic ve vyhledávačích jsem zvolil Nette Framework[6]. A to především z důvodu usnadnění práce při tvorbě běžných částí webových aplikací. Nette framework poskytuje ucelené prostředí pro tvorbu formulářů, práci s databází nebo ACL. Pro tuto práci jsem použil vývojovou verzi Nette Framework 2.1-dev pro PHP 5.3. V době, kdy jsem začal s programováním aplikace ještě nebyla stabilní verze vydána. Nette Framowork aplikace jsou založeny na architektonickém vzoru ModelView-Controller.

3.1.1

Model-View-Controller (MVC)

Tuto část jsem převzal z dokumentace Nette Framework[13]. Model-View-Controller je softwarová architektura, která vznikla z potřeby oddělit u aplikací s grafickým rozhraním kód obsluhy (controller) od kódu aplikační logiky (model) a od kódu zobrazujícího data (view). Tím jednak aplikaci zpřehledňuje, usnadňuje budoucí vývoj a umožňuje testování jednotlivých části zvlášť. • Model Model je datový a zejména funkční základ celé aplikace. Je v něm obsažena aplikační logika. Jakákoliv akce uživatele (přihlášení, vložení zboží do košíku, změna hodnoty v databázi) představuje akci modelu. Model 43

3

3. Implementace si spravuje svůj vnitřní stav a ven nabízí pevně dané rozhraní. Voláním funkcí tohoto rozhraní můžeme zjišťovat či měnit jeho stav. Model o existenci view nebo kontroleru neví. Pojem Model představuje celou vrstvu, nikoliv samostatnou třídu. • View View, tedy pohled, je vrstva aplikace, která má na starost zobrazení výsledku požadavku. Obvykle používá šablonovací systém a ví, jak se má zobrazit ta která komponenta nebo výsledek získaný z modelu. • Controller Řadič, který zpracovává požadavky uživatele a na jejich základě pak volá patřičnou aplikační logiku (tj. model) a poté požádá view o vykreslení dat. Obdobou kontrolerů v Nette Framework jsou presentery.

3.1.2

Knihovny

Kvůli některým funkcím aplikace jsem použil dodatečné knihovny pro Nette: • DatePicker pro rozšíření formulářového pole na výběr data. Dostupný na http://nette.merxes.cz/date-picker/[14] • NotORM pro jednoduchou práci s databází. Nejzajímavější vlastností je velice snadná práce s relacemi mezi tabulkami. Knihovna NotORM je dostupná na http://www.notorm.com/[9] • Diggriola je nadstavba NotORM a umožňuje snadnější tvorbu databázových dotazů. Dostupná na https://github.com/srigi/Diggriola[8] • Progressbar je pomůcka pro tvorbu a zobrazení ukazatele průběhu operace. Vzorem pro tuto knihovnu se stala třída Progressbar[15] dostupná na http://inkeeper.cz/jquery-ui-progressbar-pro-php-skripty/. Tuto třídu jsem pro potřeby aplikace upravil.

3.2

Databáze

Struktura databáze je již popsána v kapitole Analýza a návrh aplikace. Připojení k databázi zajišťuje Nette Framework, stačí pouze v konfiguračním souboru config.neon nastavit údaje pro připojení (podrobněji popsáno v příloze Instalační příručka). Pro snadnější tvorbu databázových tabulek slouží createscript na přiloženém CD.

3.3

Frontend aplikace

Aplikace je rozdělena do dvou logický celků. Prvním z nich je tzv. frontend. V tomto případě část aplikace, kam není vyžadováno přihlášení. Fyzicky se 44

3.4. Backend aplikace jedná o úvodní stránku aplikace se základním rozcestníkem. Frontend se skládá z jediného presenteru – DefaultPresenter. Ten obsahuje dvě funkce pro registraci a obsluhu registračního formuláře.

3.4

Backend aplikace

Druhým celkem je backend. Část aplikace, kam se uživatel dostane pouze po přihlášení. Backend poskytuje všechny funkce popsané v analýze případů užití pro přihlášeného uživatele. Backend se skládá z pěti funkčních presenterů, které dědí od presenteru SecuredPresenter. Ten se stará o řízení přístupu k aplikaci. Funkční presentery jsou následující:

3.4.1

DefaultPresenter

Tento presenter řídí práci s balíčky. Zajišťuje několik akcí: odhlášení, zobrazení balíčků a detailu balíčku, smazání balíčku. Dále obsahuje funkce pro registraci a obsluhu formulářů pro přidání balíčku, klíčových slov a webů.

3.4.2

AccountPresenter

Presenter pro obsluhu účtu uživatele. Obsahuje jedinou akci, která řídí zobrazení informací účtu. Dále jsou zde funkce pro registraci a obsluhu formuláře na změnu hesla.

3.4.3

ParsersPresenter

Tento presenter řídí spouštění parserů. Nezajišťuje samotné načítání pozic. Jeho hlavní funkcí je práce se sessions – řízení časového limitu pro opakované spouštění parserů. Časový limit se nastavuje pro každý parser zvlášť. Po dokončení načítání dat se do session uloží časový údaj o době parsování. Při dalším požadavku se kontroluje, zda je možné parsování spustit. Limit je nastaven na 30 minut. Limit je potřebný z toho důvodu, že některé vyhledávače mají omezený počet požadavků za určitou dobu. Bohužel tento limit není nikde uveden a je možné ho pouze odhadnout.

3.4.4

WebPresenter

Presenter pro práci s jednotlivými weby. Zajišťuje několik akcí, např. zobrazení detailu webu nebo smazání klíčového slova. Dále obsahuje funkce pro registraci a obsluhu formuláře pro přidání klíčového slova. 45

3. Implementace

3.4.5

StatisticsPresenter

Presenter pro obsluhu zobrazení statistik. Má na starosti zobrazení pozic ve vyhledávačích, registraci a obsluhu formulářů pro změnu data. Obsahuje čtyři akce, které zobrazují grafy a snippety pro jednotlivé vyhledávače.

3.5

Vzhled aplikace

Pro prezentační složku aplikace jsem zvolil HTML5 a CSS3. Tyto verze hlavně z důvodu, že se dnes používají pro tvorbu moderních webových aplikací. Nevýhodou je jejich slabší nebo žádná podpora ze strany starších prohlížečů, především Internet Explorer nedokáže korektně zobrazit některé nové elementy. Tuto malou oběť jsem ale byl ochoten podstoupit v zájmu vytvoření aplikace s prvky moderního a hlavně validního kódu.

3.5.1

Šablona HTML5 a CSS3

Protože jsem před začátkem psaní šablony neměl téměř žádné zkušenosti s HTML5 a CSS3 využil jsem pro její tvorbu tutoriál[17] na webu http://tutorialzine.com. Vytvořením jednoduché stránky podle tohoto tutoriálu jsem si osvojil nové elementy HTML5 tvorbu zajímavého layoutu pomocí CSS3. Tento layout jsem také využil jako základ šablony celé aplikace. Protože aplikace vyžaduje šablony dynamicky měnit, využívám pro ně šablonovací systém Latte[18]. < div id = " results " > < header > < hgroup > < h1 > LiveDetect < span > beta < h3 > Detekce pozic ve vyhledávačích { if \ $user - > isLoggedIn ()} - {\ $user - > getIdentity () - > name } {/ if } < nav class = " clear " > < ul > < li > SEO monitorování < li > Jak to funguje < li > O ~ aplikaci

46

3.5. Vzhled aplikace

{ if \ $user - > isLoggedIn ()} < li > Odhlášení { else } < li > Přihlášení {/ if } { if \ $user - > isLoggedIn ()} < nav class = " floating - menu " > < ul > < li > Účet < li > Import dat < li > Balíčky {/ if }

Výpis kódu 3.1: Ukázka části zdrojového kódu šablony aplikace s použitím elemntů HTML5 a latte maker.

3.5.2

jQuery

Část aplikace psaná v jazyce JavaScript je založena na knihovně jQuery[19]. Jedná se o validaci formulářových polí na straně klienta, tabulky s daty a především prvky knihovny jQuery UI[20]. Pro komponenty jQuery UI, jsem na webu této knihovny vytvořil vlastní CSS. Dále uvedu hlavní grafické prvky založené na jQuery. • Kalendář Komponenta jQuery UI. V aplikaci je kalendář využit pro výběr a změnu data, které se promítne do rozsahu v grafu pozic ve vyhledávačích. • Taby Komponenta jQuery UI. Taby nebo také záložky jsou velice důležitá část aplikace. Poskytují uživatelsky přívětivé rozhraní pro přepínání mezi souvisejícími stránky. V případě stránek se statistikami jednotlivých vyhledávačů navíc taby načítají grafy a snippety pomocí technologie AJAX (Asynchronous JavaScript and XML), zdrojový kód se načítá z jiného zdroje než kód celé stránky. V případě chyby zobrazení grafu některého vyhledávače nejsou ovlivněny další. Velkou výhodou je také cachování obsahu tabů (pouze stránka se statistikami), díky kterému je načítání při dalším přepínání plynulé. • Progressbar Komponenta jQuery UI. Logickou složku řídí PHP knihovna v rámci Nette. Prezentační složka je založena na jQuery. Alternativou by bylo použít HTML5 progressbar, ale kvůli nízké podpoře mezi prohlížeči a nekonzistenci zobrazení jsem se pro něj nakonec nerozhodl. 47

3. Implementace • fancyBox fancyBox[21] je komponenta aplikace založená na jQuery, která je použita pro zobrazení stránky s progressbarem při importu pozic z vyhledávačů. • DataTables DataTables[22] je plug-in pro knihovnu jQuery. Umožňuje tvorbu interaktivních tabulek. V této aplikaci jsou využity jen některé z řady funkcí, a to stránkování, vyhledávání a exporty do datových formátů pdf, csv a běžného textu.

3.6

Google Chart Tools

Google Chart Tools[7] je knihovna pro tvorbu grafů. V aplikaci pro detekci pozic ve vyhledávačích jsou grafy využity pro zobrazení pozice v závislosti na čase. Graf je provázaný s kalendářem, kde si uživatel může změnit rozsah data. Implementace grafu spočívá v načtení externích knihoven a naprogramování kódu v jazyce JavaScript. Data pro graf se načítají z databáze dynamicky. Je zde opět využito technologie AJAX, aby se při změně překreslila pouze část stránky s grafem. Opět to zlepšuje plynulost načítání. < script type = " text / javascript " > var data = new google . visualization . DataTable (); data . addColumn ( ’ date ’ , ’Den ’); data . addColumn ( ’ number ’ , ’ Pozice Seznam ’); data . addRows ([ // načtení dat pomocí latte makra {!\ $ p o s i t i o n s Se z n a m } ]); var options = { width : 890 , height : 300 , legend : { position : ’ bottom ’ , textStyle : { color : ’#000000 ’ , fontSize : 12 }} , title : ’ Vývoj pozice po zadání klíčového slova {\ $keywordName } ve vyhledávači Seznam ’ , s t r i c t F i r s t C o l u m n T y p e : false , hAxis : { title : ’ Den ’ , format : ’d . MMM ’ , titl eTextSty le : { color : ’red ’ }} , vAxis : { title : ’ Pozice ’ , titleTe xtStyle : { color : ’ red ’ }} , colors :[ ’# d60000 ’] }; var chart = new google . visualization . AreaChart ( document . g etElemen tById ( ’ chart_div1 ’)); chart . draw ( data , options ); < div id = " chart_div1 " >

Výpis kódu 3.2: Ukázka části zdrojového kódu pro zobrazení grafu.

48

3.7. Zabezpečení

3.7

Zabezpečení

Velkou pozornost při tvorbě aplikace věnuji zabezpečení. Především heslům a formulářů, které jsou často vystavovány různým útokům. • Formuláře Formuláře[23] jsou velmi dobře zabezpečeny díky podpoře Nette Framework. Aplikace je chráněna před útokem Cross-Site Scripting (XSS) i Cross-Site Request Forgery (CSRF). Ze vstupů jsou odfiltrovány kontrolní znaky. Ověřuje se validita UTF-8 kódování. • Heslo Aplikace vyžaduje od uživatele heslo, které je uloženo v databázi kvůli ověření správnosti společně s dalšími registračními údaji. Heslo není uloženo v podobě běžného textu, ale je tzv. „osoleno“ dalším řetězcem znaků a následně zahashováno. Heslo je díky tomuto bezpečně uloženo. Kdyby došlo k úniku dat z databáze, není možné heslo rekonstruovat.

3.8

Knihovna LiveDetect

Pro samotné parsování pozic bylo potřeba implementovat čtyři nezávislé scripty pro procházení stránek vyhledávačů. Každý vyhledávač má jinou strukturu zdrojového kódu, bylo by proto špatně mít kód umístěný v jednom souboru (hlavně kvůli průběžným úpravám). Parsery jsou tedy čtyři třídy využívající prostředí Nette Framework a funkce modelu pro práci s databází. Všechny třídy mají následující rozhraní: • konstruktor – je volán z presenteru Parsers. Jeho parametrem je ID přihlášeného uživatele. Za úkol má vytvořit stránku s progressbarem otevřenou ve FancyBoxu. Konstruktor drobně porušuje strukturu MVC, protože je v něm umístěn napevno zdrojový kód této stránky (nezbytné pro posouvání progressbaru). Kód je zobrazen funkcí echo. Aby bylo dosaženo zobrazení ve správný okamžik je ještě vyprázdněn výstupní zásobník funkcemi ob_flush() a flush(). Nakonec konstruktor volá funkce modelu pro načtení klíčových slov a webů přihlášeného uživatele. • funkce get_position() – zajišťuje načtení deseti (pro Google pěti) stránek s výsledky vyhledávání. Klíčová slova z databáze převede do podoby vhodné jako parametr URL a sestaví výslednou URL vyhledávače s výsledky. V cyklu pak volá funci parse_page(). Dále volá funkce modelu pro uložení pozic do databáze. • funkce parse_page() – stěžejní část celé aplikace. Jako parametry přijímá URL sestavenou ve funkci get_position() a hledaný web. 49

3. Implementace Na začátku je načten obsah stránky vyhledávače a uložena jeho struktura DOM. Poté probíhá hledání požadovaného webu mezi výsledky – zajištěno funkcí preg_match(). Pokud je web nalezen, uloží se do databáze snippet a je vrácena pozice na stránce. V případě, že pozice není nalezena, je vrácena pozice 0 a probíhá procházení další stránky s výsledky.

private function parse_page ( $url , $site ) { // načtení stránky , vytvoření objektu DOM $html = f i l e _ g e t _ c o n t e n t s ( $url ); $dom = new \ DOMDocument ; $dom - > recover = true ; $dom - > s t r i c t E r r o r C h e c k i n g = false ; $dom - > loadHTML ( $html ); $dom - > p r e s e r v e W h i t e S p a c e = false ; // třída DOM s ~ výledky vyhledávání $ClassName = " sa_wr " ; $Elements = $dom - > g e t E l e m e n t s B y T a g N a m e ( " * " ); $Matched = array (); $numResults = 0; // hledání webu mezi výledky for ( $i = 0; $i < $Elements - > length ; $i ++) { if ( in_array ( $ClassName , explode ( ’ ’, $Elements - > item ( $i ) -> attributes - > getNamedItem ( ’ class ’) - > nodeValue ))) { $numResults ++; $row = $Elements - > item ( $i ) - > g e t E l e m e n t s B y T a g N a m e ( ’a ’) -> item (0) - > getAttribute ( ’ href ’); $title = $Elements - > item ( $i ) - > g e t E l e m e n t s B y T a g N a m e ( ’a ’) -> item (0) - > nodeValue ; $desc = $Elements - > item ( $i ) - > g e t E l e m e n t s B y T a g N a m e ( ’p ’) -> item (0) - > nodeValue ; $a = $Elements - > item ( $i ) - > g e t E l e m e n t s B y T a g N a m e ( ’ cite ’) -> item (0) - > nodeValue ; // pozice nalezena if ( preg_match ( " / $site / i " , $row )) { $snippet = array (); $snippet [ ’ search_engine ’] = ’ bing ’; $snippet [ ’ keywords_web_id ’] = $this - > k e yw or ds _w e b_ id ; $snippet [ ’ title ’] = $title ; $snippet [ ’ desc ’] = $desc ; $snippet [ ’ url ’] = trim ( $a ); Livedetect :: saveSnippet ( $snippet ); return $numResults ; } } } // pozice nenalezena return 0; }

Výpis kódu 3.3: Ukázka funkce parse_page() pro nalezení pozice ve vyhledávači Bing

50

3.9. Jméno aplikace

3.9

Jméno aplikace

Jméno aplikace jsem zvolil podle knihovny, která zajišťuje parsování vyhledávačů. Od teď budu LiveDetect používat místo dlouhého názvu Pokročilá webová aplikace pro detekci pozic ve vyhledávačích.

3.10

Diagram nasazení

Aplikace je v současné době přístupná online na http://www.livedetect. cz. Její provoz a podporované prohlížeče odpovídají následujícímu diagramu nasazení.

Obrázek 3.1: Diagram nasazení vygenerovaný pomocí nástroje Enterprise Architect[11].

51

KAPITOLA

Testování V průběhu i po skončení návrhu a implementace aplikace jsem prováděl celou řadu různě zaměřených testů. To mi pomohlo odhalit několik zpočátku neviditelných chyb v programu. Také jsem díky testování zjistil, že je nezbytné stanovit určitá omezení uživatele. Více v následujících kapitolách:

4.1

Testování validity HTML5

Jedním z prvních požadavků na aplikaci byla validita zdrojového kódu HTML. Validita je důležitá kvůli správnému zobrazení stránek v různých webových prohlížečích. Validaci jsem prováděl ručně pomocí nástroje Markup Validation Service[24]. Validator mi pomohl odhalit několik drobných chyb, které jsem okamžitě odstranil. Aplikace je z tohoto hlediska validní.

4.2

Testování případů užití

Testování případů užití jsem prováděl nejprve v průběhu implementace (především ručním proklikáváním). Průběžným testováním jsem zjistil, že vyhledávače občas mění zdrojový kód stránek s výsledky vyhledávání. Na to je třeba co nejdříve reagovat a upravit parsery. Hlavní testování přišlo na řadu s dokončením posledního případu užití. V tento moment jsem využil nástroj Selenium IDE[25] integrovaný ve webovém prohlížeči. Pomocí Selenium IDE jsem vytvořil několik automatizovaných testů, které jsem průběžně spouštěl na celou aplikaci. Toto testování nalezlo chybu při zadávání klíčového slova do balíčku, kdy se klíčové slovo nepřidávalo ke všem webům. Chybu jsem následně opravil. Všechny případy užití tedy fungují správně. 53

4

4. Testování

4.3

Testování množství dotazů na vyhledávač

Toto testování jsem prováděl v momentě, kdy jsem měl nahrubo naprogramované parsery stránek vyhledávačů (pouze výpis pozic bez ukládání do databáze). Potřeboval jsem odpověď na dvě otázky.

4.3.1

Jakou mají vyhledávače ochranu proti zneužití výsledků vyhledávání?

LiveDetect je nástroj, který zjišťuje pozice nestandardní cestou. Spustí se script, který ve velmi krátké době prochází stránky s výsledky vyhledávání. Rychlost je na jednu stranu požadavek. Problém však nastává, když vyhledávač zjistí, že z jedné IP adresy přichází v krátkém čase nadměrné množství požadavků (pak dokonce dochází k porušení podmínek pro používání vyhledávače). Vyhledávač v tomto momentě začne vyžadovat ověření přes captcha kód, které LiveDetect nedokáže obejít. Testováním jsem zjistil, že ochranu přes captcha kód používají zejména Seznam[26] a Google[27]. U vyhledávače Jyxo jsem žádnou ochranu nezjistil. Bing rozezná robota od běžného uživatele a podstrkává jiné výsledky vyhledávání. Aplikace ale používá Bing s parametrem loc:CZ pro české výsledky, kde tato ochrana není použita. Prvním výstupem tohoto testování je omezení na 100 dvojic klíčové slovoweb. V nejhorším případě, kdy nebude nalezena pozice pro žádnou dvojici, by parser prošel 1000 stránek s výsledky vyhledávání (v případě Google 500). Druhým výstupem je časové omezení importu. Ten smí být prováděn pro každý vyhledávač opakovaně až po 30-ti minutách. Obě omezení jsou naddimenzovaná, nechávám si tím určitý prostor pro rozšíření aplikace.

4.3.2

Jak dlouho bude trvat zjišťování pozic?

Dobu zjišťování pozic jsem zkoušel na vzorku několika sad klíčových slov a webů (viz. tabulka 4.1). Naměřené hodnoty jsou pouze orientační. U každého uživatele se budou hodnoty lišit, záleží totiž na mnoha parametrech. Jedná se zejména o momentální vytížení databázového serveru, rychlosti připojení k internetu a konkrétních webech a klíčových slovech. Test byl prováděn opakovaně a na různých místech s odlišným připojením k internetu. Z hodnot byl následně určen průměr.

4.4

Testování správnosti nalezených pozic

Testování správnosti nalezených pozic probíhalo zhruba jeden měsíc na vzorku třiceti webů a šedesáti klíčových slov. Testování bylo prováděno po nasazení aplikace na webový server. Nejdříve jsem testoval menší počet dvojic a následně jsem přidával další, abych docílil rovnoměrného rozložení výsledků 54

4.4. Testování správnosti nalezených pozic Počet dvojic/vyhledávač 10 20 40 100

Seznam 35s 75s 126s 224s

Google 12s 20s 36s 82s

Jyxo 45s 75s 137s 259s

Bing 40s 74s 112s 236s

Tabulka 4.1: Doba načítání pozic v sekundách

mezi 100 možnými pozicemi v každém vyhledávači. Ověřování, jestli jsou data správná, probíhalo především ručně, ale využil jsem i dostupné nástroje popsané v kapitole Existující řešení. Jako správný výsledek jsem akceptoval naměřenou pozici +/- 2 oproti ruční kontrole (v případě vyhledávače google +/- 3). Porovnávání s ostatními nástroji sloužilo především pro informaci, jestli je aplikace přesnější než ostatní. Výstupy tohoto testování jsou následující: V případě vyhledávače Seznam se pozice liší v průměru o jedno místo. Pozice ve vyhledávači Jyxo se průměrně liší o dvě pozice, aplikace většinou zobrazí pozici lepší, než je ve skutečnosti. Naměřené pozice z vyhledávače Bing jsou z globálního hlediska přesné, výjimečně dochází k drobným odchylkám. U vyhledávače Google se pozice v průměru liší o dvě místa. Občas dochází k výkyvům, kdy se pozice liší o 3. Tyto horší hodnoty mají několik opodstatněných důvodů. Pozice z Google se stahují ze stránky s 20-ti výsledky, kvůli zvýšení rychlosti stahování dat a snížení počtu načítaných stránek kvůli limitu (pořadí odkazů na stránce se pak drobně liší). Pokud je uživatel přihlášený do Google účtu, tak jsou některé odkazy záměrně posouvány výše. Pro sledování skutečných pozic je tedy nutné se z Google odhlásit a pak teprve spustit import. Testování správnosti nalezených pozic potvrdilo, že aplikace zpracovává nalezená data kvalitně.

Obrázek 4.1: Vývoj pozice webu www.korfu-recko.cz pro klíčové slovo „korfu řecko“ ve vyhledávači Google (česky).

55

Závěr Cílem této práce bylo navrhnout a implementovat webovou aplikaci pro detekci pozic ve vyhledávačích, která uživateli umožní rychle a přesně pozice analyzovat, zobrazí grafy a přehledové tabulky. Data pak dokáže uložit pro další zpracování. Jako první jsem prozkoumal existující online nástroje, které se zabývají stejným problémem. Na základě tohoto průzkumu jsem vypracoval návrh aplikace od funkčních a nefunkčních požadavků přes doménový model a databázi až po analýzu struktury stránek vyhledávačů. Poté jsem implementoval vlastní aplikaci, otestoval všechny její funkce a odhalené chyby jsem opravil. Následovalo spuštění v ostrém provozu. Všechny cíle zadání jsem splnil. Velice přínosné se ukázalo použití Nette Framework, který velmi usnadnil některé rutinní práce (např. tvorba a validace formulářů). Za úspěch považuji přesnost nalezených pozic, a to především ve vyhledávači Bing (česky), kde se naměřená data téměř neliší od reality. Do budoucna počítám s přidáním několika dalších funkcí, které nebyly součástí zadání a napadly mě až v průběhu práce. Dostal jsem i tipy na vylepšení od uživatelů, kteří aplikaci používají. Jedná se např. o načítání klíčových slov z meta tagů description a keywords nebo vytvoření aplikací pro platformy Android či iOS. Aplikaci hodlám udržet mezi stávajícími řešeními a rozšířit povědomí o ní mezi uživateli.

57

Literatura [1] Pozice ve vyhledávačích – S-rank, PageRank – SEO Servis. [online]. [cit. 2012-04-27]. Dostupné z: http://seo-servis.cz/search-pozice-ve-vyhledavacich/ [2] Pozice klíčových slov ve vyhledávání. [online]. [cit. 2012-04-27]. Dostupné z: http://www.seonastroje.cz/klicova-slova-pozice [3] Search Engine Reports: Free Instant Online Bulk SERP Checker. [online]. [cit. 2012-04-27]. Dostupné z: http://searchenginereports.net/ [4] SEO nástroj pro analýzu webu a reportování | Collabim. [online]. [cit. 2012-04-27]. Dostupné z: http://www.collabim.cz/ [5] Search Engine Ranking Reports – SEO Software for Daily Rank Tracking. [online]. [cit. 2012-04-27]. Dostupné z: http://authoritylabs.com/ [6] Nette Framework. [online]. [cit. 2012-04-27]. Dostupné z: http://nette.org/ [7] Google Chart Tools – Google Developers. [online]. [cit. 2012-04-27]. Dostupné z: https://developers.google.com/chart/ [8] srigi/Diggriola GitHub. [online]. [cit. 2012-04-27]. Dostupné z: https://github.com/srigi/Diggriola [9] NotORM - PHP library for simple working with data in the database. [online]. [cit. 2012-04-27]. Dostupné z: http://www.notorm.com/ [10] MySQL :: MySQL Workbench 5.2. [online]. [cit. 2012-04-27]. Dostupné z: http://www.mysql.com/products/workbench/ [11] Enterprise Architect. [online]. [cit. 2012-04-27]. Dostupné z: http://www.sparxsystems.com.au/ [12] Dostupné parametry v URL Seznam Nápověda. [online]. [cit. 2012-04-28]. Dostupné z: http://napoveda.seznam.cz/cz/hledani-fulltext-dostupneparametry-v-url-vyhledavani.html 59

Literatura [13] MVC aplikace & presentery: Nette Framework. [online]. [cit. 2012-04-29]. Dostupné z: http://doc.nette.org/cs/presenters #toc-model-view-controller-mvc [14] DatePicker: Addony pro Nette Framework. [online]. [cit. 2012-04-29]. Dostupné z: http://nette.merxes.cz/date-picker/ [15] Progressbar: Inkeeper. [online]. [cit. 2012-03-12]. Dostupné z: http://inkeeper.cz/jquery-ui-progressbar-pro-php-skripty/ [16] Požadavky Nette Framework. [online]. [cit. 2012-04-29]. Dostupné z: http://doc.nette.org/cs/requirements [17] Coding a CSS3 & HTML5 One-Page Website Template. [online]. [cit. 2012-04-30]. Dostupné z: http://tutorialzine.com/2010/02/html5-css3-website-template/ [18] Latte. [online]. [cit. 2012-04-30]. Dostupné z: http://www.latte.org/ [19] jQuery: The Write Less, Do More, JavaScript Library. [online]. [cit. 2012-04-30]. Dostupné z: http://jquery.com/ [20] jQuery UI. [online]. [cit. 2012-04-30]. Dostupné z: http://jqueryui.com/ [21] fancyBox - Fancy jQuery Lightbox Alternative. [online]. [cit. 2012-04-30]. Dostupné z: http://fancyapps.com/fancybox/ [22] DataTables (table plug-in for jQuery). [online]. [cit. 2012-04-30]. Dostupné z: http://datatables.net/ [23] Formuláře Nette Framework. [online]. [cit. 2012-04-30]. Dostupné z: http://doc.nette.org/cs/forms [24] Markup Validation Service. [online]. [cit. 2012-05-07]. Dostupné z: http://validator.w3.org/ [25] Selenium IDE. [online]. [cit. 2012-05-07]. Dostupné z: http://seleniumhq.org/projects/ide/ [26] Ochrana vyhledávání před zneužitím Seznam Nápověda. [online]. [cit. 2012-05-07]. Dostupné z: http://napoveda.seznam.cz/cz/fulltext-hledani-v-internetu/ hledani-fulltext-ochrana-vyhledavani-pred-zneuzitim/ [27] Smluvní podmínky společnosti Google. [online]. [cit. 2012-05-07]. Dostupné z: https://www.google.cz/intl/cs/policies/terms/regional.html 60

Literatura [28] ECCHER, Clint. Profesionální webdesign: techniky a vzorová řešení. Vyd. 1. Překlad Roman Zámečník, Michal Vaněk. Brno: CP Books, 2005, 421 s. ISBN 80-251-0547-4. [29] KELBY, Scott. Klasické efekty ve Photoshopu: techniky a vzorová řešení. Vyd. 1. Brno: Computer Press, 2006, 374 s. ISBN 80-251-0141-X. [30] KUBÍČEK, Michal. Velký průvodce SEO: jak dosáhnout nejlepších pozic ve vyhledávačích. Vyd. 1. Brno: Computer Press, 2008, 318 s. ISBN 978-80-251-2195-5. [31] CLIFTON, Brian. Google analytics: podrobný průvodce webovými statistikami. Vyd. 1. Překlad Lukáš Krejčí. Brno: Computer Press, 2009, 334 s. ISBN 978-80-251-2231-0. [32] ULLMAN, Larry. PHP a MySQL: názorný průvodce tvorbou dynamických WWW stránek. Vyd. 1. Brno: Computer Press, 2004, 534 s. ISBN 80-251-0063-4. [33] LUBBERS, Peter, Brian ALBERS a Frank SALIM. HTML5: programujeme moderní webové aplikace. Vyd. 1. Brno: Computer Press, 2011, 304 s. ISBN 978-80-251-3539-6.

61

PŘÍLOHA

Instalační příručka A.1

Požadavky na webový server

Před samotnou instalací je třeba ověřit, jestli webový server splňuje všechny požadavky pro správný chod aplikace.

A.2

Apache, PHP, MySQL

Aplikace byla vyvíjena na lokálním serveru s nainstalovaným Apache 2.2.17, PHP ve verzi 5.3.6 a MySQL 5.3.1. Prostředí, kde bude aplikace nainstalovaná, by mělo splňovat tyto požadavky, minimálně však PHP 5.3 kvůli podpoře jmenných prostorů.

A.3

Požadavky Nette Framework

Součástí instalačního balíčku je nástroj Requirements Checker[16], který otestuje běhové prostředí serveru a informuje, zda je možné Nette framework (a zároveň LiveDetect) použít. Requirements Checker najdete v adresáři www/requirements/checker.php. Ve výpisu zjistíte, jestli bude na vašem serveru aplikace fungovat. Po otestování a případné opravě nedostatků doporučuji Requirements Checker smazat, protože vypisuje konfiguraci serveru, která by mohla být někým zneužita. Pro další práci s aplikací není Requirements Checker potřeba.

63

A

A. Instalační příručka

Obrázek A.1: Pokud je váš server správně nastavený, zobrazí se zelená hláška podobná této.

64

A.4. Instalace na webovém serveru krok za krokem Požadavek .htaccess file protection .htaccess mod_rewrite Function ini_set() Function error_reporting() Function flock() Register_globals Session auto-start Reflection extension SPL extension PCRE extension ICONV extension PHP tokenizer PDO extension Multibyte String extension Memcache extension GD extension Bundled GD extension

Vysvětlení Kontroluje, zda lze pomocí .htaccess zakázat přístup do chráněných složek Kontroluje, zda je k dispozici mod_rewrite pro routování Přítomnost této funkce je důležitá z bezpečnostních důvodů Přítomnost této funkce je důležitá z bezpečnostních důvodů Vyžaduje cache Nebezpečná konfigurační direktiva PHP, která musí být vypnutá Musí být vypnuté z bezpečnostních důvodů Extenze PHP vyžadovaná frameworkem Extenze PHP vyžadovaná frameworkem Extenze PHP vyžadovaná frameworkem Extenze PHP vyžadovaná frameworkem Extenze PHP vyžadovaná frameworkem Extenze PHP vyžadovaná NetteDatabase Extenze PHP vyžadovaná funkcemi Strings::lower() a upper() Extenze PHP podporovaná úložištěm cache Extenze PHP vyžadovaná NetteImage Extenze PHP vyžadovaná NetteImage::filter()

Tabulka A.1: Co znamenají některé z položek

A.4

Instalace na webovém serveru krok za krokem

Detektor pozic ve vyhledávačích LiveDetect lze nainstalovat z přiloženého CD.

A.4.1

Databáze

Vytvoření databáze za vás obstará createscript, který spusťte nebo naimportujte do vašeho MySQL klienta (např. v phpMyAdmin vyberte záložku Import). Skript najdete na CD v adresáři installation. Po úspěšném vytvoření je databáze prázdná a připravená k použití. 65

A. Instalační příručka

A.4.2

Soubory

Všechny soubory pro instalaci aplikace LiveDetect jsou umístěny na CD v adresářích installation/livedetect a installation/www. Obsah adresáře www zkopírujte do adresáře na serveru určeného pro web - musí být přístupný zvenčí. Adresář livedect doporučuji kvůli bezpečnosti celý zkopírovat mimo adresář na serveru, který je určený pro web, tedy například o úroveň výše. Pokud to podmínky vašeho serveru neumožňují, zkopírujte adresář livedetect na stejné místo jako obsah www.

A.4.3

Práva

Aplikace využívá cache a logování chyb a přístupů, proto je nutné nastavit práva zápisu. V adresářích livedetect/log a livedetect/cache nastavte práva na 777.

A.4.4

Cesty

V tomto bodě by měly být všechny soubory nahrané na vašem webovém serveru. Dále nedoporučuji jejich další přesouvání. Aby aplikace fungovala správně, je nutné nastavit cesty v několika souborech: • index.php – řádek 13: APP_DIR – cesta k adresáři livedetect/app – řádek 16: LIBS_DIR – cesta k adresáři livedetect/libs – řádek 19: TEMP_DIR – cesta k adresáři livedetect/temp • js/script.js – řádek 2: proměnná basePath – vaše doména (včetně http://), např. http://www.livedetect.cz/

A.4.5

Konfigurační soubor

Posledním bodem instalace je nastavení konfiguračního souboru. Najdete ho v adresáři app pod názvem config.neon. Upravte následující řádky: • řádek 28: to – nastavte váš email, na který budou případně posílány informace o chybách v aplikaci. • řádek 42: host – parametr databáze, většinou lze ponechat hodnotu localhost. • řádek 43: database – parametr databáze, upravte podle názvu databáze pro aplikaci. 66

A.4. Instalace na webovém serveru krok za krokem • řádek 44: username – parametr databáze, přihlašovací jméno k databázi • řádek 45: password – parametr databáze, heslo k databázi

A.4.6

První spuštění

V této chvíli je aplikace připravena pro první spuštění. Přejděte na URL aplikace. První spuštění obvykle trvá delší dobu (cca 10 sekund). Je tomu tak z důvodu vytvoření cache a zkompilování některých souborů. Poté by měla aplikace fungovat svižněji. Vytvořte nového uživatele a přihlaste se (viz. příloha Uživatelská příručka).

67

PŘÍLOHA

Uživatelská příručka Před prvním spuštění aplikace je nezbytné ujasnit si některé pojmy: • web – URL webových stránek, pro které se budou zjišťovat pozice. • klíčové slovo - Slovní spojení nebo samostatné slovo, pro které se budou zjišťovat pozice. • dvojice – Spárování klíčového slova a webu, každý uživatel má omezení na 100 dvojic. • balíček – Skupina např. obsahově podobných webů, pro které jsou definována stejná klíčová slova, balíček usnadňuje práci se společnými prvky, ať už jsou to weby nebo klíčová slova. Jako vzorový příklad může posloužit balíček, který nazveme „Zimní weby“. V něm budeme mít uloženy url adresy lyžařských středisek www.kronplatz. cz, www.schladming-dachstein.cz, www.les-orres.cz. Pro každý tento web chceme zjistit pozice na klíčové slovo „lyžování“. Protože weby jsou v jednom balíčku, stačí klíčové slovo přidat pouze do balíčku „Zimní weby“ a nemusíme se obtěžovat přidáváním ke každému webu zvlášť.

B.1

Průvodce aplikací

LiveDetect obsahuje přehledné uživatelské rozhraní, ve kterém se lze snadno orientovat. Pro jednodušší pochopení práce s aplikací popíši jednotlivé obrazovky: 69

B

B. Uživatelská příručka

B.1.1

Obrazovka 1 – registrace

Na úvodní stránce aplikace uživatel vyplní krátký registrační formulář. Pokud registrace proběhne úspěšně, dojde k přesměrování na stránku pro přihlášení do aplikace.

Obrázek B.1: Ukázka registrace

B.1.2

Obrazovka 2 – přihlášení

Pro přihlášení je vyžadován e-mail zadaný při registraci a heslo. Po úspěšné validaci je uživatel přihlášen a přesměrován do administrace aplikace.

Obrázek B.2: Ukázka přihlášení

B.1.3

Obrazovka 3 – účet

Na stránce účtu si uživatel může prohlédnout několik informací ke svému účtu. Je zde také možnost změnit heslo pro přihlášení.

B.1.4

Obrazovka 4 – balíčky

V přehledu balíčků je formulář pro přidání nového balíčku a tabulka se seznamem všech balíčků. Uživatel má možnost balíček buď smazat (přijde tím 70

B.1. Průvodce aplikací

Obrázek B.3: Ukázka stránky s detailem účtu

o všechny weby, klíčová slova a statistiky v balíčku) nebo přejít na detail balíčku. Nechybí prvky pro export dat do formátů csv, pdf, csv pro excel a tisk.

Obrázek B.4: Ukázka stránky s balíčky

B.1.5

Obrazovky 5 a 6 – detail balíčku

Detail balíčku se skládá ze stránky se dvěma záložkami – taby. Pokud se uživatel přepne na záložku Klíčová slova, může klíčové slovo přidat do balíčku 71

B. Uživatelská příručka a tím ke všem webům v balíčku, nebo klíčové odstranit (opět ze všech webů z balíčku). Záložka weby se skládá z formuláře pro přidání webu (lze zvolit, zda k webu přidat i stávající klíčová slova) a z přehledu webů. Opět je možné web smazat nebo přejít na detail webu.

Obrázek B.5: Detail balíčku – weby

Obrázek B.6: Detail balíčku – klíčová slova

B.1.6

Obrazovka 7 – detail webu

Na stránce webu lze přidat klíčové slovo, odebrat klíčové slovo a zobrazit statistiku pozic pro klíčové slovo a web. Veškeré úpravy na této stránce se týkají pouze konkrétního webu. Ostatní data v balíčku nejdou úpravami ovlivněna. 72


Obrázek B.7: Ukázka stránky s detailem webu

B.1.7

Obrazovky 8 a 9 – statistika pozic

Stránka se skládá ze dvou částí. První část jsou 4 záložky pro vyhledávače Seznam, Google, Jyxo a Bing. Každá záložka obsahuje graf s vývojem pozic mezi jednotlivými importy dat. Uživatel může měnit hodnoty v grafu na základě výběru data z kalendáře. Pod grafem má své místo snippet – náhled, jak vypadá stránka mezi výsledky vyhledávání.

Obrázek B.8: Statistika pozic – graf, kalendář, snippet Druhou částí je tabulka se všemi importovanými pozicemi. Pozice jsou 73

B. Uživatelská příručka zobrazeny včetně posunu od předchozího importu (zelená znamená posun nahoru mezi výsledky vyhledávání, červená naopak). Zvláštní pozornost je třeba věnovat hodnotě 110. Tato konstanta znamená, že stránka nebyla nalezena mezi prvními sto pozicemi. LiveDetect stahuje data do sté pozice. Po najetí myší do tabulky se zobrazí datum importu dané pozice. Nechybí toolbar pro export dat.

Obrázek B.9: Statistika pozic – tabulka

B.1.8

Obrazovky 10 a 11 – import dat

Do pravděpodobně nejdůležitější součásti aplikace se uživatel dostane přes odkaz v pravém menu. Na výběr jsou importy pro vyhledávače Seznam, Google, Jyxo a Bing. Import z jednoho vyhledávače trvá v závislosti na počtu webů a klíčových slov několik sekund ale i třeba 4 minuty. Průběh zobrazuje progressbar. Kvůli bezpečnosti je import omezen, lze jej provádět půl hodiny od posledního importu (platí pro každý vyhledávač zvlášť). Nedoporučuji však import provádět víc jak jedenkrát za den.

74


Obrázek B.10: Výběr importu

Obrázek B.11: Ukázka průběhu importu

75

PŘÍLOHA

Seznam použitých zkratek ACL Access control list AJAX Asynchronous JavaScript and XML CSV Comma-separated values DOM Document Object Model MVC Model-view-controller MySQL databázový systém PDF Portable Document Format PHP Hypertext Preprocessor SEO Search Engine Optimization URL Uniform Resource Locator XML Extensible Markup Language

77

C

PŘÍLOHA

Obsah přiloženého CD

readme.txt...................................stručný popis obsahu CD installation...........................adresář s instalačními soubory diagrams..............................................UML diagramy text ....................................................... text práce thesis.pdf ............................. text práce ve formátu PDF thesis_src.....................zdrojová forma práce ve formátu LATEX 79

D

Prozkoumejte existující řešení nástrojů pro detekci pozic ve vyhledávačích, popište jejich funkce, výhody a nedostatky. Na základě předešlé analýzy

Recommend Documents