TECHNICK ´ A UNIVERZITA V LIBERCI Fakulta mechatroniky, informatiky a mezioborov´ ych studi´ı
Studijn´ı program: B2646 – Informaˇ cn´ı technologie Studijn´ı obor: 1802R007 – Informaˇ cn´ı technologie
Dynamick´ e webov´ e str´ anky pro tv˚ urce strip˚ u a komiks˚ u
Dynamic webpage
for creators of strips and comics
Bakal´ aˇ rsk´ a pr´ ace
Autor: Jan Brandt
Vedouc´ı pr´ ace: Ing. Petr Kretschmer
V Liberci 18. 5. 2012
Zad´an´ı sem
Prohl´aˇsen´ı
Byl jsem sezn´amen s t´ım, ˇze na mou bakal´aˇrskou pr´aci se plnˇe vztahuje z´akon ˇc. 121/2000 Sb., o pr´avu autorsk´em, zejm´ena § 60 – ˇskoln´ı d´ılo.
Beru na vˇedom´ı, ˇze Technick´a univerzita v Liberci (TUL) nezasahuje do m´ych autorsk´ych pr´av uˇzit´ım m´e bakal´aˇrsk´e pr´ace pro vnitˇrn´ı potˇrebu TUL.
Uˇziji-li bakal´aˇrskou pr´aci nebo poskytnu-li licenci k jej´ımu vyuˇzit´ı, jsem si vˇedom povinnosti informovat o t´eto skuteˇcnosti TUL; v tomto pˇr´ıpadˇe m´a TUL pr´avo ode mne poˇzadovat ´uhradu n´aklad˚u, kter´e vynaloˇzila na vytvoˇren´ı d´ıla, aˇz do jejich skuteˇcn´e v´yˇse.
Bakal´aˇrskou pr´aci jsem vypracoval samostatnˇe s pouˇzit´ım uveden´e literatury a na z´akladˇe konzultac´ı s vedouc´ım bakal´aˇrsk´e pr´ace a konzultantem.
Datum
Podpis
Abstrakt
Bakal´aˇrsk´a pr´ace m´a za c´ıl popsat tvorbu dynamick´ych webov´ych str´anek, kter´e maj´ı podobu publikaˇcn´ıho syst´emu. Ten se zamˇeˇruje na specifickou skupinu uˇzivatel˚u, tv˚urc˚u webov´ych komiks˚u a strip˚u. Zaob´ır´a se pˇredevˇs´ım specifick´ymi vlastnostmi, kter´e maj´ı bˇeˇznˇe dostupn´e publikaˇcn´ı syst´emy bud’ znaˇcnˇe nevyvinut´e, nebo jim pˇr´ımo v z´akladu chyb´ı. Jednou takovou vlastnost´ı je podpora v´ıce jazyk˚u.
Nejdˇr´ıve dojde na kr´atk´y popis nˇekolika technologi´ı, kter´e byly pˇri v´yvoji pouˇzity.
Jedn´a se pˇredevˇs´ım o programovac´ı jazyky. Pr´ace pak pokraˇcuje v teoretick´e ˇc´asti, kter´a obsahuje vysvˇetlen´ı pojmu framework a v´ybˇeru framework˚u pro dva odliˇsn´e programovac´ı jazyky, PHP a JavaScript.
Posledn´ı ˇc´ast obsahuje zejm´ena praktick´e informace k vytvoˇren´emu publikaˇcn´ımu syst´emu. Rozeb´ır´an je n´avrh aplikace a realizace za pomoci zvolen´ych framework˚u.
Kl´ıˇcov´a slova: publikaˇcn´ı syst´em, Nette framework, GD, dibi, MySQL
Abstract
Bachelor thesis has a goal to describe a creation of dynamic webpages that take form of content management system (CMS). It focuses on specific group of users, creators of comics and strips. Mainly deals with the specific characteristics that are not widely used in CMS or are undeveloped. One such characteristic is support for multiple languages.
First, there is a brief description of several technologies that were used for the development. This consists essentially only a programming languages. Work con- tinues on the theoretical level, where it contains an explanation of the concept of framework and decisions that were made during the selection of frameworks for two different programming languages, PHP and JavaScript.
The last part contains practical information especially about the publication sys- tem that was created. Also concept of application design and actual implementation with use of selected frameworks.
Keywords: content management system, Nette framework, GD, dibi, MySQL
Obsah
Prohl´aˇsen´ı 3
Abstrakt 4
Abstract 5
Obsah 7
Seznam obr´azk˚u 8
Seznam tabulek 9
Zkratky 10
Uvod´ 12
1 Teorie 13
1.1 Dynamick´e webov´e str´anky . . . 13
1.2 Syst´emy pro spr´avu obsahu . . . 14
1.3 HTML . . . 14
1.4 CSS . . . 15
1.5 PHP . . . 16
1.6 GD knihovna . . . 16
1.7 JavaScript . . . 16
1.8 WYSIWYG editor . . . 18
1.9 MySQL . . . 18
2 Framework 19 2.1 PHP framework . . . 19
2.2 Nette . . . 20
2.2.1 Model-View-Controller . . . 20
2.2.2 Moduly . . . 24
2.2.3 ACL . . . 24
2.3 JavaScript framework . . . 25
2.4 jQuery . . . 25
3 N´avrh 26 3.1 Poˇzadovan´e funkce aplikace . . . 26
3.2 Uˇzivatel´e a role . . . 27
4 Realizace 29 4.1 Adres´aˇrov´a struktura aplikace . . . 29
4.2 Aplikace . . . 29
4.2.1 Souˇc´asti aplikace . . . 30
4.2.2 Poˇzadavky aplikace . . . 30
4.2.3 Moduly . . . 31
4.3 Datab´aze . . . 43
4.4 V´ıcejazyˇcnost aplikace . . . 46
4.4.1 Datum a ˇcas . . . 47
Z´avˇer 48
Pˇr´ıloha A – Obsah CD 51
Pˇr´ıloha B – Diagram z´avislost´ı mezi moduly 52
Pˇr´ıloha C – EER diagram datab´aze 53
Pˇr´ıloha D – Postup instalace 54
Seznam obr´ azk˚ u
2.1 MVC . . . 21
4.1 UML diagram presenter˚u s jejich jmenn´ymi prostory . . . 31
4.2 Hlavn´ı str´anka v administraci . . . 32
4.3 Administrace s´eri´ı . . . 32
4.4 Zobrazen´ı komiksu n´avˇstˇevn´ık˚um . . . 33
4.5 Administrace kapitol . . . 34
4.6 Pˇrid´an´ı komiksu . . . 35
4.7 Administrace ˇcl´ank˚u . . . 36
4.8 Administrace kategori´ı . . . 37
4.9 Zobrazen´ı archivu . . . 38
4.10 Administrace uˇzivatel˚u . . . 39
4.11 Administrace koment´aˇr˚u . . . 40
4.12 Editace text˚u v obr´azku . . . 42
4.13 Text se zadanou maxim´aln´ı ˇs´ıˇrkou pˇred pr˚uchodem algoritmem . . . . 43
4.14 Tabulky spojen´e s komiksy a koment´aˇri . . . 44
4.15 Tabulky spojen´e s texty . . . 45
4.16 Tabulky articles, categories, users a options . . . 46
Seznam tabulek
4.1 Uˇzivatelsk´a pr´ava modulu Series . . . 34
4.2 Uˇzivatelsk´a pr´ava modulu Chapter . . . 34
4.3 Uˇzivatelsk´a pr´ava modulu Comic . . . 36
4.4 Uˇzivatelsk´a pr´ava modulu Category . . . 37
4.5 Uˇzivatelsk´a pr´ava modulu User . . . 39
Zkratky
PHP - PHP: Hypertext Preprocessor
CMS – Content Management System, syst´em pro spr´avu obsahu DOM – Document Object Model
HTML – Hypertext Markup Language
XHTML – Extensible Hypertext Markup Language XML – Extensible Markup Language
HTTP – Hypertext Transfer Protocol TeX – poˇc´ıtaˇcov´y program pro sazbu
PostScript – programovac´ı jazyk popisuj´ıc´ı grafickou podobu tisknuteln´eho do- kumentu
SGML – Standard Generalised Mark-up Language CSS – Cascading Style Sheets, kask´adov´e styly
ASP – Active Server Pages, skriptovac´ı platforma pro dynamick´e zobrazov´an´ı webov´ych str´anek
ASP.NET – Souˇc´ast .NET frameworku, n´astupce ASP
Java – programovac´ı jazyk od firmy Oracle (dˇr´ıve od Sun Microsystems)
JavaScript – skriptovac´ı jazyk urˇcen´y pro pr´aci na stranˇe klienta, interpretry se nach´az´ı v prohl´ıˇzeˇc´ıch
RDBMS – Relation Database Management System, relaˇcn´ı datab´azov´y syst´em SQL – Structured Query Language, strukturovan´y dotazovac´ı jazyk
RSS – Really Simple Syndication (Rich Site Summary), rodina form´at˚u v podobˇe XML dokumentu urˇcen´a pˇredevˇs´ım pro snadn´e sd´ılen´ı nov´eho obsahu webov´ych str´anek
MVC – Model, View, Controler, n´avrhov´y vzor
MVP – Model, View, Presenter, podobn´y MVC, ale s odliˇsnou logikou
WYSIWYG – What You See Is What You Get URL – Uniform Resource Locator
OOP – Object Oriented Programming, objektovˇe orientovan´e programov´an´ı
Uvod ´
Do dneˇsn´ı modern´ı doby patˇr´ı kreslen´a tvorba uˇz dlouh´a l´eta a posledn´ıch nˇekolik let zaznamen´av´a d´ıky rozvoji Internetu obrovsk´y rozlet. Pomˇernˇe silnˇe rozˇs´ıˇren´ymi se st´avaj´ı pˇredevˇs´ım tzv. webkomiksy, kter´e jsou, jak lze z n´azvu odvodit, dostupn´e pˇredevˇs´ım skrze glob´aln´ı s´ıt’ Internet. Ned´ılnou souˇc´ast´ı jsou tedy webov´e str´anky, kter´e umoˇzn´ı tyto komiksy prezentovat a ˇc´ıst. Protoˇze ˇcistˇe nebo pˇredevˇs´ım na ko- miksy zamˇeˇren´ych publikaˇcn´ıch syst´em˚u je velmi poskrovnu, rozhodl jsem se v t´eto pr´aci jeden takov´y vytvoˇrit. D˚uvodem tohoto rozhodnut´ı je moje obliba ve ˇcten´ı a prohl´ıˇzen´ı webkomiks˚u a strip˚u.
Modern´ı webov´e str´anky maj´ı tendenci poskytovat sv˚uj obsah ve v´ıce neˇz jednom jazyce, coˇz m˚uˇze b´yt i pˇr´ıpad komiks˚u. Autor by tak mohl vyd´avat v´ıce jazykov´ych verz´ı sv´ych komiks˚u na jedn´e str´ance. Podle tohoto se ˇr´ıd´ım a v pr´aci se tak zamˇeˇr´ım i na zakomponov´an´ı t´eto funkce do str´anek. Co se t´yˇce samotn´e funkˇcnosti, tak se inspiruji t´ım, jak jin´e str´anky se zamˇeˇren´ım na publikaci webkomiks˚u vypadaj´ı a jak funguj´ı.
Vzhledem k tomu, ˇze m´am kr´atkou osobn´ı zkuˇsenost s frameworky, rozhodl jsem se, ˇze pˇri v´yvoji vyuˇziji jeden framework pro PHP a jeden pro JavaScript. Volba jednoho frameworku z velk´eho mnoˇzstv´ı nen´ı vˇec jednoduch´a, takˇze osvˇetl´ım, i proˇc jsem zvolil konkr´etn´ı framework.
C´ılem pr´ace nen´ı vytvoˇren´ı nˇejak´eho komplexn´ıho publikaˇcn´ıho syst´emu, ale jed- noduˇse ovladateln´eho a ´uzce zamˇeˇren´eho.
1 Teorie
1.1 Dynamick´ e webov´ e str´ anky
Webov´e str´anky maj´ı v dneˇsn´ı dobˇe nezpochybnitelnou roli ve sd´ılen´ı informac´ı.
Pro tyto potˇreby byl panem Timem Berners-Leem v akademick´em prostˇred´ı vy- tvoˇren z´aklad pro dneˇsn´ı jazyk HTML [3], kter´y pomoc´ı znaˇcek definuje strukturu obsahu. Berners-Lee postavil HTML na , jiˇz v t´e dobˇe pouˇz´ıvan´em, SGML (Standard Generalized Mark-up Language) a rozˇs´ıˇril ho o hypertextov´e odkazy [3].
Kdyˇz mluv´ıme o dynamick´ych webov´ych str´ank´ach, m´ame t´ım na mysli str´anky, kter´e nejsou tvoˇreny ˇcistˇe statick´ym obsahem. Mezi takov´eto str´anky patˇr´ı r˚uzn´e blogy, hry nebo tˇreba e-shopy. Pro dynamick´e generov´an´ı obsahu slouˇz´ı r˚uzn´e pro- gramovac´ı jazyky. Programovac´ı jazyky pouˇz´ıvan´e pˇri v´yvoji str´anek se rozdˇeluj´ı na dvˇe hlavn´ı kategorie, serverov´e a klientsk´e.
Serverov´e jazyky se pouˇz´ıvaj´ı na serveru, na kter´em jsou um´ıstˇeny. Jejich hlavn´ım c´ılem je generov´an´ı obsahu na stranˇe serveru a pr´ace s daty um´ıstˇen´ymi napˇr´ıklad v datab´azi. Mezi nejpouˇz´ıvanˇejˇs´ı jazyky pro takov´e ´uˇcely patˇr´ı PHP, ASP.NET a Java [8].
Klientsk´e jazyky slouˇz´ı k programov´an´ı aplikac´ı nebo jejich ˇc´ast´ı pracuj´ıc´ıch na stranˇe klienta. Hlavn´ım a multiplatformn´ım jazykem je v t´eto kategorii interpre- tovan´y jazyk JavaScript. Ten vyuˇz´ıv´a dalˇs´ıch vlastnost´ı prohl´ıˇzeˇc˚u (napˇr. Document Object Model). Interpretry pro klientsk´e interpretovan´e jazyky jsou souˇc´ast´ı vˇetˇsiny prohl´ıˇzeˇc˚u.
1.2 Syst´ emy pro spr´ avu obsahu
Nejˇcastˇeji se s nimi setk´ame pod pojmy publikaˇcn´ı syst´emy a CMS (zkratka pro Content Management System). Jedn´a se o typ dynamick´ych webov´ych str´anek, kter´e maj´ı, jak vypl´yv´a z jejich n´azvu, ´uˇcel spravovat obsah tvoˇren´y uˇzivateli. CMS, jeˇz jsou zamˇeˇreny na publikaci komiks˚u, jsem naˇsel pouze dva.
ComicPress
Jedn´a se o rozˇs´ıˇren´ı pro WordPress, kter´y patˇr´ı mezi nejrozˇs´ıˇrenˇejˇs´ı [6] CMS.
Umoˇzˇnuje WordPressu publikovat komiksy s velmi obs´ahlou ˇsk´alou grafick´ych a funkˇcn´ıch ´uprav str´anek. Naproti tomu pˇr´ımo nepodporuje v´ıce jazykov´ych mutac´ı.
ComicCMS
Jedn´a se o projekt psan´y v ˇcist´em PHP, ale stejnˇe jako ComicPress nem´a podporu v´ıce jazykov´ych mutac´ı a ani dostupnou ˇceskou verzi.
1.3 HTML
Vznik HTML se ˇrad´ı spoleˇcnˇe se vznikem HTTP a prvn´ıho webov´eho prohl´ıˇzeˇce do roku 1989 [3]. Mˇelo j´ıt o n´ahradu jazyk˚u jako je TeX, PostScript a SGML.
Prvn´ı verze standardu vyˇsla v roce 1991 s ˇc´ıslem 0.9. Posledn´ı dokonˇcen´a verze je HTML 4.01 a netrpˇelivˇe se ˇcek´a, aˇz vyjde koneˇcn´a verze standartu HTML 5.
Po HTML 4.01 jeˇstˇe vznikl standard XHTML, kter´y je pˇrizp˚usoben do podoby, pˇri n´ıˇz lze pouˇz´ıvat standardn´ı XML parser.
V dneˇsn´ı dobˇe se silnˇe prosazuje trend, kdy se oddˇeluje struktura a obsah od vzhledu. Pomoc´ı HTML se vytv´aˇr´ı struktura a obsah a n´aslednˇe pomoc´ı CSS se upravuje jeho vzhled.
DOM
Jedn´a se o objektovˇe orientovanou reprezentaci HTML nebo XML dokumentu.
Jako takov´y nen´ı z´avisl´y na ˇz´adn´em jazyku a platformˇe. Vˇsechny modern´ı prohl´ıˇzeˇce maj´ı zavedenu podporu pro Document Object Model (zkr´acenˇe DOM).
K´od 1.1: Pˇr´ıklad HTML str´anky 1 < h t m l >
2 < h e a d >
3 < t i t l e > A h o j H T M L < / t i t l e >
4 < / h e a d >
5 < b o d y >
6 < div c l a s s = " t r i d a " id = " id " >
7 < p > A h o j s v e t e ! < / p >
8 < / div >
9 < / b o d y >
10 < / h t m l >
1.4 CSS
CSS neboli t´eˇz kask´adov´e styly je kolekce metod, kter´e popisuj´ı, jak´ym zp˚usobem se maj´ı str´anky napsan´e v HTML, XHTML nebo XML zobrazovat.
V CSS lze pomoc´ı selektor˚u urˇcit, kterou ˇc´ast chceme ovlivnit. Selektory mohou b´yt d´any pomoc´ı:
• Element˚u – div, p, table, atd.
• Atributu tˇr´ıdy HTML – .trida, pokud m´ame definov´an u elementu atribut class="trida"
• Atributu identifik´atoru v HTML – #id, pokud m´ame definov´an u elementu atribut id="id"
K´od 1.2: Pˇr´ıklad CSS
div . t r i d a { w i d t h : 800 px ; b a c k g r o u n d : b l a c k ;} /* n a s t a v e n i s i r k y a p o z a d i pro e l e m e n t div t r i d y t r i d a */
# id { h e i g h t : 600 px } /* n a s t a v e n i v y s k y e l e m e n t u o z n a c e n e h o i d e n t i f i k a t o r e m id */
1.5 PHP
Jazyk PHP se ˇrad´ı mezi programovac´ı jazyky, kter´e pracuj´ı na stranˇe serveru.
D´ıky sv´e jednoduch´e syntaxi, jeˇz vych´az´ı z takov´ych jazyk˚u jako je C, Java, Pascal ˇci Perl, a bohat´e ˇsk´ale funkc´ı (pr´ace s FTP, generov´an´ı obr´azk˚u ˇci pˇripojen´ı k da- tab´azi) se stal velmi obl´ıben´ym. Podle statistik [8] se jedn´a o nejpouˇz´ıvanˇejˇs´ı jazyk ke generov´an´ı str´anek na stranˇe serveru.
Jedn´a se o interpretovan´y jazyk, proto nen´ı nutn´e zdrojov´e k´ody kompilovat.
Nicm´enˇe d´ıky tomu m´a oproti kompilovan´ym jazyk˚um nev´yhodu v podobˇe pomalejˇs´ı rychlosti zpracov´an´ı. Podle nez´avisl´eho testu [10] jsou vˇetˇsinou interpretovan´e jazyky pomalejˇs´ı neˇz kompilovan´e. Test ovˇsem nen´ı pˇr´ıliˇs rozs´ahl´y, takˇze se jedn´a sp´ıˇse o orientaˇcn´ı srovn´an´ı.
Trend programovat za pomoci objekt˚u pronikl i do PHP. Poprv´e se m˚uˇzeme se- tkat s objekty v PHP 3. Nejvˇetˇs´ıho rozmachu se ovˇsem objekty doˇckaly v PHP 5, ve kter´em doznaly velk´ych zmˇen a byly takˇrka kompletnˇe pˇrepracov´any. Nav´ıc od PHP 5.3 jsou k dispozici jmenn´e prostory, kter´e d´ale rozˇsiˇruj´ı moˇznosti jazyka.
1.6 GD knihovna
Pro pr´aci s obr´azky v PHP existuje nˇekolik knihoven, v t´eto pr´aci jsem vyuˇzil moˇznost´ı knihovny GD. Tuto knihovnu jsem zvolil, protoˇze zvl´ad´a pr´aci s textem na mnou poˇzadovan´e ´urovni a v porovn´an´ı s ostatn´ımi knihovnami se s n´ı setk´ame mnohem ˇcastˇeji.
1.7 JavaScript
JavaScript patˇr´ı mezi interpretovan´e objektovˇe orientovan´e jazyky. Pouˇz´ıv´a se zejm´ena jako skriptovac´ı jazyk na stranˇe klienta, tj. v prohl´ıˇzeˇci, ale najdeme i moˇznosti vyuˇzit´ı na stranˇe serveru (Node.js). Ve spojen´ı s DOM dok´aˇze JavaScript ovlivˇnovat vzhled a obsah str´anek, coˇz se hod´ı, pokud chceme nˇejak´ym zp˚usobem mˇenit vzhled v z´avislosti na interakci s uˇzivatelem.
K´od 1.3: Pˇr´ıklad syntaxe jazyka v PHP 5.3
<? php
n a m e s p a c e Z a k l a d ; // j m e n n y p r o s t o r
e c h o ’ A h o j s v e t e ! ’ ; // z o b r a z i t e x t A h o j s v e t e ! // OOP
c l a s s T r i d a { p u b l i c $ n a m e ;
p u b l i c f u n c t i o n _ _ c o n t r u c t ( $ n a m e ) {
$this - > n a m e = $ n a m e ; }
p u b l i c f u n c t i o n g e t N a m e () { r e t u r n $this - > n a m e ;
} }
$ t r i d a = new Z a k l a d \ T r i d a ( ’ T r i d a ’ ) ;
e c h o $trida - > g e t N a m e () ; // z o b r a z i t e x t T r i d a
? >
K´od 1.4: Pˇr´ıklad pouˇzit´ı GD v PHP
<? php
// n a h r a n i o b r a z e k . jpg do p a m e t i
$ i m a g e = i m a g e c r e a t e f r o m j p e g( ’ o b r a z e k . jpg ’ ) ;
$ w i d t h = i m a g e s x( $ i m a g e ) ; // z i s k a n i s i r k y
$ h e i g h t = i m a g e s y( $ i m a g e ) ; // z i s k a n i v y s k y
i m a g e j p e g( $ i m a g e ) ; // v r a c e n i o b r a z k u p r o h l i z e c i // u l o z e n i o b r a z k u do s o u b o r u o b r a z e k 2 . j p e g
i m a g e j p e g( $image , ’ o b r a z e k 2 . j p e g ’ )
? >
1.8 WYSIWYG editor
Takov´yto editor slouˇz´ı pro editaci text˚u, napˇr. ˇcl´ank˚u, pokud chceme vyuˇz´ıt prostˇred´ı, kter´e n´am poskytuj´ı textov´e preprocesory (jako je Word nebo Writer).
WYSIWYG (What You See Is What You Get) editor je vyuˇz´ıv´an ve velk´em mnoˇzstv´ı CMS. WYSIWYG editor˚u dostupn´ych pod licenc´ı, kter´a je sluˇciteln´a pro pouˇzit´ı v bakal´aˇrsk´e pr´aci, je nˇekolik. J´a jsem se rozhodl pro TinyMCE, se kter´ym m´am uˇz zkuˇsenost.
1.9 MySQL
Dynamick´e webov´e str´anky obvykle vyuˇz´ıvaj´ı nˇejakou datab´azi. Nejˇcastˇeji se jedn´a o kombinaci PHP a pr´avˇe MySQL. D´ıky tomu se tak´e jedn´a o jeden z nej- rozˇs´ıˇrenˇejˇs´ıch RDBMS (Relation Database Management System). Pro komunikaci s datab´az´ı se vyuˇz´ıv´a jazyka SQL (Structured Query Language), kter´y m´a nˇekter´e rozd´ıly [5] oproti standardu ANSI SQL.
K´od 1.5: Pˇr´ıklad SQL dotazu, kter´y n´am vr´at´ı obsah tabulky Tabulka
S E L E C T * F R O M ’ Tabulka ’
MySQL vyuˇz´ıv´a nˇekolik rozd´ıln´ych ´uloˇziˇst’ dat, kter´e maj´ı specifick´e vlastnosti.
Nejbˇeˇznˇejˇs´ı jsou MyISAM a InnoDB. InnoDB zvl´ad´a ciz´ı kl´ıˇce a transakce. Nicm´enˇe se m˚uˇzeme setkat se situac´ı, kdy spoleˇcnost nab´ızej´ıc´ı hosting nepodporuje tento typ
´
uloˇziˇstˇe. Problematick´e m˚uˇze b´yt i ˇspatn´e nastaven´ı InnoDB, kter´e zavin´ı napˇr´ıklad delˇs´ı prov´adˇen´ı dotaz˚u.
2 Framework
V teoretick´e ˇc´asti doˇslo k pˇredstaven´ı dvou programovac´ıch jazyk˚u, kter´e se hojnˇe pouˇz´ıvaj´ı pˇri v´yvoji dynamick´ych webov´ych str´anek. Tyto jazyky ovˇsem maj´ı sv´e neduhy, kter´e nˇekdy nesouvis´ı pˇr´ımo s nimi, ale jsou d´any napˇr. r˚uznorodost´ı prohl´ıˇzeˇc˚u. V t´eto ˇc´asti osvˇetluji d˚uvody, proˇc a jak´y framework jsem si pro konkr´etn´ı jazyk zvolil.
Pod pojmem framework si m˚uˇzeme pˇredstavit soubor knihoven, kter´y usnadˇnuje tvorbu aplikac´ı. V pˇr´ıpadˇe dynamick´ych webov´ych str´anek tak dost´av´ame n´astroj, jenˇz umoˇzˇnuje zjednoduˇsit a urychlit bˇeˇzn´e praktiky pˇri v´yvoji, a kter´y tak omezuje nutnost programovat pokaˇzd´e stejn´e vˇeci.
V´ybˇer frameworku b´yv´a vˇetˇsinou z´aleˇzitost, kterou je vhodn´e si ˇr´adnˇe rozmyslet a zauvaˇzovat nad t´ım, co vlastnˇe od takov´eho frameworku ˇcek´ame. D˚uvodem je, ˇze nauˇcit se pracovat s frameworkem na vysok´e ´urovni, nen´ı snadn´e.
2.1 PHP framework
PHP je pomˇernˇe jednoduch´y jazyk s velk´ym mnoˇzstv´ım podporovan´ych funkc´ı.
D´ıky frameworku se uˇsetˇr´ı ˇcas nad stereotypn´ım programov´an´ım, coˇz n´am d´av´a moˇznost se vˇenovat v´ıce programov´an´ı myˇslenky. B´yvaj´ı mnohdy napsan´e dle nˇejak´eho n´avrhov´eho vzoru.
V dobˇe, kdy jsem se rozhodoval s jak´ym PHP frameworkem budu pracovat, tu byla ot´azka, jak´y m´am zvolit, jelikoˇz jich je velk´e mnoˇzstv´ı. Hlavn´ım faktorem byla pˇredevˇs´ım obecn´a zn´amost a pˇr´ıpadnˇe podpora v ˇCesk´e republice. Tento faktor bohuˇzel nen´ı vˇetˇsinou splnˇen. Z´akladn´ı poˇzadavky splˇnovaly tˇri, a to Zend, Cake- PHP a Nette. V´ybˇer jsem zohledˇnoval v z´avislosti na informac´ıch ze s´erie ˇcl´ank˚u,
• Zend: Jedn´a se bezesporu o jeden z nejv´ıce rozˇs´ıˇren´ych framework˚u pro PHP.
M´a velmi dobrou dokumentaci (pˇredevˇs´ım v angliˇctinˇe). Nicm´enˇe d´ıky sv´e mohutnosti se mi jevil jako pomˇernˇe obt´ıˇzn´y na ´upln´e zvl´adnut´ı a tak´e jeho v´ykon se podle testu [2] jevil silnˇe z´avisl´y na pomocn´ych prostˇredc´ıch PHP serveru (napˇr´ıklad v testu [2] pouˇzit´y eAccelerator).
• CakePHP: Dalˇs´ı z velmi rozˇs´ıˇren´ych framework˚u, kter´y bohuˇzel m´a odliˇsn´y probl´em neˇz Zend, zpomalen´y v´yvoj. Z hlediska rychlosti se nach´az´ı na druh´em m´ıstˇe. Nejnovˇejˇs´ı verze m´a probl´em s nedostatkem pˇr´ıklad˚u v ˇceˇstinˇe, kter´e jsem pro jeho pochopen´ı potˇreboval.
• Nette: Nejmladˇs´ı z uvaˇzovan´ych framework˚u, a pˇresto se stal m´ym hlavn´ım kandid´atem a to hlavnˇe d´ıky sv´emu ˇcesk´emu p˚uvodu (framework je vyv´ıjen pod z´aˇstitou Nette Foundation veden´em Davidem Grudlem). Nyn´ı m´a uˇz pomˇernˇe kvalitn´ı dokumentaci. Silnou str´ankou tohoto frameworku je pˇredevˇs´ım pr´ace s formul´aˇri, kde lze vytvoˇrit snadno validaci jak v PHP tak z´aroveˇn i v Ja- vaScriptu. Dobr´y dojem na mne zanechal intern´ı lad´ıc´ı n´astroj zn´am´y jako Ladˇenka.
Na z´akladˇe diskuz´ı, kter´e jsem si proˇsel, a toho, ˇze se mi nejl´epe pracovalo s Nette, jsem ho pouˇzil pro vyv´ıjen´y syst´em.
2.2 Nette
Jak uˇz bylo zm´ınˇeno, jedn´a se o pomˇernˇe mlad´y framework, poˇc´atky se datuj´ı nˇekde do roku 2004 [4]. Jako open-source byl uvolnˇen v roce 2008. Moment´alnˇe je vyv´ıjen ˇceskou komunitou, kter´a si ho velmi obl´ıbila. Rovnˇeˇz si dˇel´a ambice na rozˇs´ıˇren´ı ve svˇetˇe.
2.2.1 Model-View-Controller
Pro Model-View-Controler se pouˇz´ıv´a zkratka MVC. Jedn´a se o n´avrhov´y vzor pro software, kter´y se hojnˇe pouˇz´ıv´a u architektury webov´ych aplikac´ı. Aplikace se rozdˇeluje na tˇri oddˇelen´e komponenty, jak vypl´yv´a z n´azvu, a to model, view
Obr´azek 2.1: MVC
a controller. Vych´azej´ıc z informac´ı popsan´ych v [1] maj´ı jednotliv´e ˇc´asti n´asleduj´ıc´ı funkce:
• Model m´a na starost obstar´an´ı dat. Data mohou b´yt v r˚uzn´e podobˇe a m˚uˇzeme je z´ısk´avat z r˚uzn´ych prostˇredk˚u, napˇr. datab´aze.
• View (t´eˇz pohled) se star´a o zobrazen´ı z´ıskan´ych informac´ı z modelu.
• Controller reaguje na interakci od uˇzivatele a podle toho pracuje s modelem a/nebo s pohledem.
Nette je na tomto n´avrhov´em vzoru postaveno, resp. na jeho obdobˇe MVP (Model-View-Presenter), kde funkci controller˚u zastupuj´ı presentery, jak je pops´ano v dokumentaci [4].
Models
Jak uˇz bylo zm´ınˇeno, tak modely obsahuj´ı pr´aci nejˇcastˇeji spojenou s datab´az´ı, ale mohou pracovat napˇr´ıklad se soubory. Pro pr´aci s datab´az´ı v modelech jsem pouˇzil knihovnu dibi.
Dibi
Dibi lze pouˇz´ıvat dvˇema zp˚usoby:
• jako statickou tˇr´ıdu
• jako instanci tˇr´ıdy DibiConnection
U kaˇzd´eho zp˚usobu jeˇstˇe m˚uˇzeme zvolit zp˚usob zad´av´an´ı dotazu pomoc´ı:
• SQL pˇr´ıkaz˚u
• fluent rozhran´ı
View
V Nette se t´eˇz pouˇz´ıv´a pojem pohled. Nette pro pohledy vyuˇz´ıv´a ˇsablonovac´ı ja- zyk ”latte“, kter´y byl speci´alnˇe vytvoˇren pˇri v´yvoji frameworku. Soubory
”latte“
maj´ı odpov´ıdaj´ıc´ı pˇr´ıponu latte. ˇSablony jsou i pˇres generov´an´ı rychl´e, jelikoˇz prob´ıh´a pouze pˇri zmˇenˇe zdrojov´ych k´od˚u nebo prvn´ı n´avˇstˇevˇe pohledu.
K´od 2.1: Uk´azka syntaxe latte { b l o c k c o n t e n t }
< span > P r o m e n n a : { $ p r o m e n n a } </ span >
{\ b l o c k }
V uk´azce je vidˇet pouˇzit´ı promˇenn´e $promenna, kterou jsme do ˇsablony poslali z presenteru pomoc´ı k´odu uk´azan´eho d´ale.
K´od 2.2: Odesl´an´ı promˇenn´e z presenteru do ˇsablony p u b l i c f u n c t i o n r e n d e r D e f a u l t () {
$ p r o m = " N e j a k a p r o m e n n a " ;
$this - > t e m p l a t e - > p r o m e n n a = $ p r o m ; }
”Latte“ je natolik pokroˇcil´e, ˇze s n´ım m˚uˇzeme ps´at k´od, kter´y takˇrka vypad´a jako (X)HTML. Na pˇr´ıkladu je uveden zp˚usob, jak´ym proj´ıt vˇsechny ˇcl´anky, kter´e byly do ˇsablony odesl´any.
K´od 2.3: R˚uzn´e zp˚usoby uˇzit´ı maker latte // t r a d i c n i f o r e a c h m a k r o
< div >
{ f o r e a c h $ a r t i c l e s as $ a r t i c l e }
< span >{ $ a r t i c l e - > n a m e } </ span >
{\ f o r e a c h }
</ div >
// a ted za p o m o c i n : m a k r a
< div n : f o r e a c h =" $ a r t i c l e s as $ a r t i c l e " >
< span >{ $ a r t i c l e - > n a m e } </ span >
</ div >
Presenter
Presentery pˇredstavuj´ı tˇret´ı z pil´ıˇr˚u kaˇzd´e aplikace napsan´e v Nette. Presentery jsou potomky tˇr´ıdy Nette\Application\UI\Presenter. Jejich ´uˇcelem je dle obr. 2.1 zejm´ena komunikace mezi modelem a pohledem.
Routov´an´ı
Aby mohla aplikace vytv´aˇret
”pˇekn´a URL“ (t´eˇz zn´am´e pod anglick´ym
”cool URL“), bylo nutn´e v souboru bootstrap.php vytvoˇrit takzvanou
”routu“ (podle an- glick´eho route, ˇcesky cesta). Ta definuje podobu URL a podle jej´ı formy se bude v aplikaci volat presenter, modul a pohled s parametry. Pokud nˇekter´a ˇc´ast ne- bude odpov´ıdat ˇz´adn´e z definic, dojde k chybˇe. K vytv´aˇren´ı cest se pouˇz´ıv´a tˇr´ıda Nette\Application\Routers\Route.
Tohoto vyuˇz´ıvaj´ı presentery a ˇsablony pro odkazy, kter´e tak nemus´ıme sloˇzitˇe generovat. Pro uk´azku si nejdˇr´ıve nadefinujeme
”routu“:
$ c o n t a i n e r - > r o u t e r [] = new R o u t e ( ’ < p r e s e n t e r = Default >/ < a c t i o n
= default >[/ < id >] ’) ;
K´od 2.4: Uk´azka tvorby odkaz˚u v ˇsablon´ach a presenterech
// Pomoci n : makra v s a b l o n e
<a n : h r e f =” A r t i c l e : show $ a r t i c l e I d ”>Clanek </a> // v y t v o r i odkaz n a p r i k l a d na c l a n e k s $ a r t i c l e I d =10 v podobe / a r t i c l e / show /10 //V p r e s e n t e r u pomoci metody l i n k
p u b l i c f u n c t i o n a c t i o n D e f a u l t ( ) { . . .
$ u r l = $ t h i s −>l i n k ( ’ A r t i c l e : show ’ , $ a r t i c l e I d ) ; // v y t v o r i odkaz n a p r i k l a d na c l a n e k s $ a r t i c l e I d =10 v podobe / a r t i c l e / show /10
. . . }
2.2.2 Moduly
V sloˇzitˇejˇs´ıch aplikac´ıch se m˚uˇzeme setkat s potˇrebou rozdˇelit aplikaci na menˇs´ı celky. Pro takov´e potˇreby byly v Nette zavedeny moduly. V adres´aˇrov´e struktuˇre mus´ı b´yt moduly ve stejnojmenn´e sloˇzce. Presentery jsou t´ım tak´e ovlivnˇeny, a proto mus´ı m´ıt definovan´e jmenn´e prostory ve tvaru <NazevModulu>Module, v pˇr´ıpadˇe submodul˚u <NazevModulu>Module\<NazevSubmodulu>Module.
2.2.3 ACL
Jedn´a se o zkratku pro Access control list, coˇz by se dalo do ˇceˇstiny pˇreloˇzit jako Seznam spr´avy pˇr´ıstupu. ACL slouˇz´ı ke spr´avˇe libovolnˇe velk´e specifikace opr´avnˇen´ı.
Princip ACL stoj´ı na tˇrech z´akladn´ıch komponent´ach:
• Role
• Zdroje
• Operace
Kaˇzd´emu uˇzivateli je pˇridˇelena jedna nebo v´ıce rol´ı, pˇr´ıkladem rol´ı m˚uˇze b´yt guest (nepˇrihl´aˇsen´y uˇzivatel) nebo administrator (administr´ator str´anek). Zdroje b´yvaj´ı objekty, kter´e jsou chr´anˇeny, napˇr´ıklad obr´azky, koment´aˇre atd. Operace pˇredstavuj´ı akce, kter´e chceme prov´est nad zdrojem (napˇr´ıklad smazat, upravit ˇci
zobrazit). Role mohou vytv´aˇret hierarchii, ve kter´e potomek dˇed´ı pr´ava od pˇredka a rozˇsiˇruje je o vlastn´ı. ACL podle toho vytv´aˇr´ı strom, podle kter´eho se nastavuj´ı pr´ava pˇr´ıstupu a opr´avnˇen´ı.
V Nette je ACL souˇc´ast´ı frameworku, takˇze nebylo nutn´e vytv´aˇret vlastn´ı.
Pro nepˇrihl´aˇsen´e uˇzivatele pouˇz´ıv´a framework roli guest. Ostatn´ı role uˇz mus´ı b´yt definovan´e program´atorem.
2.3 JavaScript framework
Kv˚uli probl´em˚um, kter´e vl´adnou kolem st´ale odliˇsn´ych implementac´ı JavaScriptu v prohl´ıˇzeˇc´ıch, jsem se rozhodl pouˇz´ıt framework. Pˇri v´ybˇeru jsem se ˇr´ıdil pˇredevˇs´ım rozˇs´ıˇrenost´ı [7] a tak´e t´ım, jak snadno se d´a s frameworkem pracovat. V ´uvahu pˇrich´azela dvojice framework˚u, jQuery nebo Prototype.
Z hlediska rychlosti jsou si rovny. Horˇs´ı dokumentace a tak´e siln´y vliv Ruby na stranˇe Prototype vedly k tomu, ˇze jsem radˇeji zvolil jQuery. To pouˇz´ıv´a velk´e mnoˇzstv´ı program´ator˚u, lze tak naj´ıt velk´e mnoˇzstv´ı n´avod˚u a doplˇnuj´ıc´ıch plugin˚u.
2.4 jQuery
Framework jQuery je podle sv´e dokumentace [9] rychl´y a struˇcn´y. Jeho se- lektory jsou velmi podobn´e tˇem v CSS, coˇz usnadˇnuje pr´aci a sniˇzuje mnoˇzstv´ı informac´ı, kter´e program´ator mus´ı zn´at. Pˇri pr´aci s frameworkem se pracuje nejˇcastˇeji s objektem dan´ym pˇredpisem $(document). Alternativn´ı verze z´apisu je jQuery(document).
Pˇr´ıklad syntaxe pˇri pouˇzit´ı jQuery:
// H T M L kod
< a h r e f = " " > Link </ a >
// j Q u e r y kod
$ ( d o c u m e n t ) . r e a d y ( f u n c t i o n () {
$ ( " a " ) . c l i c k ( f u n c t i o n () { a l e r t ( " H e l l o w o r l d ! " ) ;
3 N´ avrh
Bˇehem n´avrhu jsem se ˇr´ıdil pr˚uzkumem, pˇri nˇemˇz jsem proˇsel nˇekolik webov´ych str´anek, kter´e uveˇrejˇnuj´ı komiksy. Na z´akladˇe tohoto pr˚uzkumu jsem si poznamenal nˇekolik funkc´ı, kter´e by takov´e str´anky mˇely ovl´adat, a tak´e to, co od nich oˇcek´av´am.
D´ale jsem se rozhodl, ˇze chci publikaˇcn´ı syst´em nˇeˇc´ım rozˇs´ıˇrit. Tedy nejde pouze o inspiraci, ale t´eˇz o vylepˇsen´ı.
3.1 Poˇ zadovan´ e funkce aplikace
Komiksy
Aplikace se toˇc´ı hlavnˇe kolem komiks˚u, takˇze z´akladem je jejich spr´ava. Komiksy lze rozdˇelit do s´eri´ı, kter´e mohou m´ıt v´ıce jazykov´ych mutac´ı. V s´eri´ıch je moˇzn´e komiksy d´ale jemnˇeji tˇr´ıdit podle kapitol. S´erii lze urˇcit, zda obsahuje komiksy, kter´e se ˇctou v euroamerick´em stylu (zleva doprava), nebo komiksy ve stylu manga (zprava doleva). Tato volba ovlivn´ı pouze zobrazen´ı upozornˇen´ı, jenˇz u mangy informuje o spr´avn´em smˇeru ˇcten´ı.
Cl´ ˇ anky
Cl´ˇ anky maj´ı pouze doplˇnuj´ıc´ı funkci, takˇze se jedn´a o syst´em, kter´y nepoˇc´ıt´a se sloˇzit´ym ˇclenˇen´ım. ˇCl´anku lze pˇridˇelit pouze jednu kategorii. Pro editaci text˚u se pouˇz´ıv´a WYSIWYG editor TinyMCE.
Archiv
Mus´ı m´ıt grafick´e ztv´arnˇen´ı ve stylu kalend´aˇre ˇci seznamu jiˇz dosud vydan´ych komiks˚u v jedn´e s´erii. Z toho mus´ı b´yt jasn´e, kdy jak´y komiks vyˇsel, vˇcetnˇe odkazu
na nˇej.
Koment´ aˇ re
Jelikoˇz modern´ı str´anky velmi ˇcasto obsahuj´ı tuto funkci, rozhodl jsem se umoˇznit pˇrid´av´an´ı koment´aˇr˚u ke komiks˚um. Koment´aˇre se zobrazuj´ı hned pod komiksem.
RSS
RSS (Really Simple Syndication) chci pouˇz´ıt, protoˇze se objevuje na skoro vˇsech modern´ıch str´ank´ach a s´am ho vyuˇz´ıv´am pro sledov´an´ı obsahu velk´eho mnoˇzstv´ı str´anek. Kan´aly budou vytv´aˇren´e pro vˇsechny s´erie a pro jednotliv´e s´erie.
Editace text˚ u
Proveden´ı by mˇelo b´yt co nejjednoduˇsˇs´ı, jelikoˇz nen´ı pˇr´ım´ym c´ılem vytv´aˇret editor ve stylu GIMPu ˇci Photoshopu. Tato funkce nen´ı nˇeco, co jsem bˇehem pr˚uzkumu nalezl jako bˇeˇzn´e ˇci aspoˇn pˇr´ıtomn´e v redakˇcn´ıch syst´emech pouˇzit´ych pro r˚uzn´e str´anky s webkomiksy. Editor je urˇcen pro ´upravu dialog˚u, kter´e jsou tvoˇren´e pˇredevˇs´ım v horizont´aln´ım smˇeru.
Jazykov´ e mutace komiks˚ u a ˇ cl´ ank˚ u
K modern´ım webov´ym str´ank´am patˇr´ı tak´e podpora v´ıce neˇz pouze jednoho jazyka, a tak autor komiks˚u dost´av´a do rukou moˇznost vyd´avat svou tvorbu v r˚uzn´ych jazyc´ıch. Samozˇrejmˇe tot´eˇz plat´ı i pro uˇzivatelsk´e rozhran´ı. Komiksy jsou rozdˇelov´any podle jazykov´ych mutac´ı s´eri´ı. U ˇcl´ank˚u jsou jazykov´e mutace ˇreˇseny u samotn´ych ˇcl´ank˚u i u kategori´ı.
3.2 Uˇ zivatel´ e a role
K publikaˇcn´ım syst´em˚um patˇr´ı spr´ava uˇzivatel˚u. Vzhledem k tomu, ˇze chci vyuˇz´ıt moˇznost´ı ACL v Nette frameworku, rozhodl jsem se rozdˇelit uˇzivatele do skupin, kter´e pˇredstavuj´ı role. Pro snadnou spr´avu jsem si urˇcil 4 skupiny uˇzivatel˚u.
• Registrovan´y : Nejniˇzˇs´ı uˇzivatelsk´a pr´ava na str´ank´ach, patˇr´ı sem kdokoli, kdo se zaregistruje. Jedin´a povolen´a akce oproti hostovi je spr´ava vlastn´ıch uˇzivatelsk´ych ´udaj˚u.
• Autor : Pr´ava pro uˇzivatele na t´eto ´urovni jsou rozˇs´ıˇrena o tvoˇren´ı s´eri´ı, kapitol a pˇrid´av´an´ı komiks˚u. M´a pˇr´ıstup pouze k vlastn´ı tvorbˇe.
• Administr´ator : Nejvyˇsˇs´ı uˇzivatelsk´a pr´ava, m˚uˇze zasahovat do dˇen´ı cel´e str´anky. Oproti autorovi mu pˇribude moˇznost spravovat fonty pro editor.
Str´anky by mˇely uˇzivatel˚um umoˇznit se zaregistrovat, a tak jim zajistit, ˇze vy- bran´a pˇrezd´ıvka nebude pouˇz´ıv´ana v koment´aˇr´ıch nˇek´ym jin´ym. Administr´ator pak bude moci zmˇenit uˇzivatel˚um role, napˇr´ıklad na autora.
4 Realizace
4.1 Adres´ aˇ rov´ a struktura aplikace
Adres´aˇrov´a struktura vych´az´ı z frameworkem doporuˇcen´e [4]. Nicm´enˇe jsem pro- vedl menˇs´ı zmˇeny s ohledem na snadnou instalaci a orientaci. Bˇeˇznˇe doporuˇcovan´a struktura je takov´a, kdy m´ame soubory t´ykaj´ıc´ı se pˇr´ımo webov´ych str´anek ve sloˇzce www. Ta obsahuje napˇr´ıklad JavaScript, CSS soubory nebo tˇreba obr´azky pouˇzit´e pro vzhled webov´ych str´anek. Vzhledem k tomu, jak funguje vˇetˇsina hosting˚u, bylo toto nutn´e zmˇenit a tak vznikla n´asleduj´ıc´ı adres´aˇrov´a struktura:
/ app libs temp log css js img fonts theme css js img .htaccess index.php
4.2 Aplikace
Po zv´aˇzen´ı jsem rozhodl dˇelit aplikaci na moduly v z´avislosti na funkc´ıch, kter´e jednotliv´e ˇc´asti maj´ı. Podle toho vzniklo vˇetˇs´ı mnoˇzstv´ı modul˚u a nˇekter´e
Jelikoˇz Nette vyuˇz´ıv´a moˇznost´ı OOP, rozdˇelil jsem aplikaci takov´ym zp˚usobem, ˇze vˇsechny Frontend presentery dˇed´ı od BasePresenter a Backend presentery od SecuredPresenter, kter´y dˇed´ı od BasePresenteru. SecuredPresenter pokaˇzd´e ovˇeˇruje, zdali je uˇzivatel pˇrihl´aˇsen. D´ıky tomuto jsou nˇekter´e promˇenn´e dostupn´e pro vˇsechny presentery nebo pouze Backend presentery. Backend presentery urˇcuj´ı napˇr´ıklad, zda m´a uˇzivatel pr´ava k pˇr´ıstupu. Z tohoto d˚uvodu se ve skoro vˇsech sloˇzk´ach templates nach´az´ı dvˇe sloˇzky, Frontend a Backend, kter´e obsahuj´ı ˇsablony pro odpov´ıdaj´ıc´ı presentery.
4.2.1 Souˇ c´ asti aplikace
Jelikoˇz se pˇri v´yvojov´em reˇzimu objevuje Debug Bar, zvolil jsem nˇekolik kom- ponent, kter´e ho rozˇsiˇruj´ı. D´ıky NetteTranslatoru v Debug Baru m´ame poloˇzku, kter´a umoˇzˇnuje pˇrekl´adat rovnou pˇri v´yvoji str´anek. M´a ovˇsem p´ar omezen´ı, napˇr´ıklad probl´emy s pˇreklady flashMessages. Ty se neobjev´ı v nab´ıdce, do- kud nejsou vyvol´any. Dalˇs´ı rozˇs´ıˇren´ı m´a samo dibi, kter´e ukazuje, jak´e SQL do- tazy byly na aktu´aln´ı str´ance provedeny. ˇSikovn´ym pomocn´ıkem je i Component Tree, kter´y zobrazuje velk´e mnoˇzstv´ı informac´ı v´azaj´ıc´ıch se k aktu´aln´ı str´ance, tˇreba parametry presenteru a akce ˇci obsaˇzen´e komponenty a jejich pˇr´ıpadn´a hi- erarchie. ServicesPanel zase seskupuje informace spojen´e se sluˇzbami, napˇr´ıklad translator nebo router.
Jelikoˇz jsem se pot´ykal s probl´emy pˇri vytv´aˇren´ı jednoduch´eho a pˇritom hezk´eho designu, zvolil jsem nakonec Twitter Bootstrap. Ten je volnˇe pouˇziteln´y, coˇz bylo hlavn´ı krit´erium. Jeho pouˇzit´ı ovˇsem s sebou pˇrineslo nˇekolik zmˇen, kter´e bylo nutn´e zohlednit. T´ykalo se to zejm´ena formul´aˇr˚u a navigace.
4.2.2 Poˇ zadavky aplikace
Aplikace potˇrebuje pro sv´e fungov´an´ı nˇekolik prostˇredk˚u. Vˇetˇsina se odv´ıj´ı od Nette frameworku. Poˇzadavek na datab´azi jsem urˇcil na z´akladˇe moˇznost´ı vˇetˇsiny webov´ych hosting˚u, kter´e maj´ı nˇejakou nab´ıdku hostov´an´ı zdarma.
• PHP 5.3+
• GD 2+
• MySQL 5.1+
Obr´azek 4.1: UML diagram presenter˚u s jejich jmenn´ymi prostory
4.2.3 Moduly
Kaˇzd´y modul m´a stejnou adres´aˇrovou strukturu, kter´a obsahuje sloˇzky models.
Do n´ı se ukl´adaj´ı modely potˇrebn´e pro modul. D´ale je zde sloˇzka presenters, ve kter´e se ukl´adaj´ı presentery, pˇresnˇeji FrontendPresenter a BackendPresenter. Nakonec je
K´od 4.1: Definice
”route“ v aplikaci
$ c o n t a i n e r −>r o u t e r [ ] = new Route ( ’ i n d e x . php ’ , array ( ’ module ’ => ’ Main ’ , ’ p r e s e n t e r ’
=> ’ F r o n t e n d ’ , ’ a c t i o n ’ => ’ d e f a u l t ’ ) , Route : : ONE WAY) ;
$ c o n t a i n e r −>r o u t e r [ ] = new Route ( ’ admin/<module=Main>/<a c t i o n=d e f a u l t >[/< i d >[/<
t e x t i d > ] ] ’ , array ( ’ p r e s e n t e r ’=> ’ Backend ’ ) ) ;
$ c o n t a i n e r −>r o u t e r [ ] = new Route ( ’<l a n g=c s [ a−z ]{2}>/< module=Main>/<a c t i o n=d e f a u l t
>[/< i d [0 −9]+ >][/ < u r l >[/< c o m i c U r l > ] ] ’ , array ( ’ p r e s e n t e r ’=> ’ F r o n t e n d ’ ) ) ;
Main
Modul obstar´av´a vzhled a obsah z´akladn´ı str´anky (jak v uˇzivatelsk´e ˇc´asti, tak v administraci). V administraci je hlavn´ım c´ılem modulu zobrazen´ı z´akladn´ıho obsahu, kde nejsou funkce, kter´e ovlivˇnuj´ı obsah str´anek. Najdeme tu tedy odkazy na posledn´ı zveˇrejnˇen´e komiksy a nejnovˇejˇs´ı koment´aˇre. V uˇzivatelsk´em prostˇred´ı zase zobrazuje nejnovˇejˇs´ı komiks a pˇr´ıpadnˇe i posledn´ı ˇcl´anky v modulu Nastaven´ı urˇcen´e kategorii.
Obr´azek 4.2: Hlavn´ı str´anka v administraci
Series
Obr´azek 4.3: Administrace s´eri´ı
Z´akladem aplikace jsou s´erie, takˇze tu m´ame modul, kter´y s nimi pracuje. V admi- nistraci obstar´av´a pˇrid´av´an´ı, ´upravy a maz´an´ı jednotliv´ych s´eri´ı a jejich jazykov´ych
variant. V uˇzivatelsk´em prostˇred´ı m´a ´ulohu zejm´ena pro zobrazen´ı komiks˚u v s´erii a jazyce.
Pˇridat – n´am umoˇzˇnuje pˇrid´an´ı s´erie. Mus´ıme zadat jej´ı n´azev a jazyk, kter´y vy- bereme z dostupn´ych jazyk˚u. Pak m´ame moˇznost oznaˇcit s´erii za veˇrejnou. D˚uleˇzit´e je i vybrat typ s´erie. Na v´ybˇer je euroamerick´y nebo manga.
Upravit – poskytuje moˇznost upraven´ı stejn´ych informac´ı jako pˇri pˇrid´av´an´ı.
Smazat – n´am smaˇze s´erii a vˇsechen jej´ı obsah.
Pˇridat jazykovou variantu – n´as odk´aˇze na stejnou str´anku jako Pˇridat, ale s menˇs´ı zmˇenou v URL, kdy n´am pˇribude ˇc´ıslo skupiny, do kter´e bude nov´a s´erie spadat. Podle toho se odv´ıj´ı i volby jazyk˚u, kde chyb´ı ve skupinˇe uˇz jednou pouˇzit´e jazyky.
Seznam – odkazuje na seznam kapitol nebo komiks˚u, kter´e patˇr´ı k s´erii.
Pˇridat (v sekci kapitola nebo komiks) – n´as odk´aˇze na str´anku, kde m˚uˇzeme pˇridat kapitolu/komiks.
Tabulka 4.1: Uˇzivatelsk´a pr´ava modulu Series
Akce Registrovan´y Autor Administr´ator
Pˇridat Ne Ano Ano
Upravit, smazat, seznam, pˇridat jazykovou variantu,
Pˇridat kapitolu/komiks Ne Vlastn´ı Ano
Chapter
Obr´azek 4.5: Administrace kapitol
Submodul v administraci pom´ah´a spravovat kapitoly s´erie. Seznam kapitol se ukazuje pouze pro konkr´etn´ı s´erii. Komiksy, jeˇz nejsou zaˇrazen´e do nˇekter´e kapi- toly, jsou v administraci st´ale pˇr´ıstupn´e a zobrazuj´ı se v uˇzivatelsk´em prostˇred´ı, pokud jsou zveˇrejnˇen´e.
Pˇridat – po n´as vyˇzaduje jazyk, s´erii, do n´ıˇz kapitola m´a patˇrit, a n´azev kapitoly.
Pozice je automaticky nastavena na konec s´erie.
Upravit – n´am umoˇzn´ı zmˇenit jazyk, s´erii, do n´ıˇz kapitola m´a patˇrit, a n´azev kapitoly.
Smazat – zp˚usob´ı smaz´an´ı kapitoly, ale nikoliv komiks˚u, kter´e jsou v n´ı. Komiksy osiˇr´ı a budou povaˇzov´any za nezaˇrazen´e.
Pozice zmenˇsit/zvˇetˇsit – zmˇen´ı pozici kapitoly poˇzadovan´ym smˇerem.
Tabulka 4.2: Uˇzivatelsk´a pr´ava modulu Chapter
Akce Registrovan´y Autor Administr´ator
Pˇridat Ne Ano Ano
Upravit, smazat Ne Vlastn´ı Ano
Comic
Tento submodul m´a pouze administraˇcn´ı ˇc´ast, kter´a se star´a o spr´avu komiks˚u v s´erii. Komiksy jsou seˇrazeny podle zadan´eho data publikace.
Pˇridat po n´as bude poˇzadovat ˇradu informac´ı, ale ne vˇsechny jsou povinn´e.
Mezi povinn´e patˇr´ı jazyk, s´erie, do n´ıˇz kapitola m´a patˇrit, n´azev, jm´eno autora (pˇredvyplnˇeno jako pˇrezd´ıvka osoby, kter´a komiks vkl´ad´a), zda chceme komiks rov- nou zveˇrejnit, zda obsahuje tento konkr´etn´ı d´ıl obsah pouze pro dospˇel´e, datum pub- likov´an´ı a obr´azek, kter´y pˇredstavuje komiks. Nepovinn´e ´udaje jsou kapitola, pod niˇz komiks spad´a, hover text, kter´y se zobraz´ı pˇri najet´ı ukazatele myˇsi na obr´azek a pˇr´ıbuzn´y komiks. Pˇr´ıbuzn´y obr´azek urˇcuje pozici obr´azku v s´erii a tak´e umoˇzˇnuje pouˇz´ıt p˚uvodn´ı nebo upraven´y obr´azek pˇr´ıbuzn´eho komiksu pˇri volbˇe obr´azku.
Obr´azek 4.6: Pˇrid´an´ı komiksu
Pro nahr´an´ı obr´azku slouˇz´ı plupload, kter´y je um´ıstˇen v modal oknˇe. Po nahr´an´ı se okno zavˇre a stejnˇe jako v pˇr´ıpadˇe zvolen´ı obr´azku z pˇr´ıbuzn´eho komiksu dojde k jeho okamˇzit´emu zobrazen´ı. Souˇc´ast´ı nahr´an´ı obr´azku na server je kontrola exis- tence pomoc´ı hashe obsahu souboru nikoliv jeho n´azvu, zdali tento soubor uˇz je pouˇzit. Pokud nen´ı jeˇstˇe v datab´azi, tak se vytvoˇr´ı a pˇrid´a do datab´aze hash a cesta
tuj´ıc´ıho.
Bˇehem smaz´an´ı komiksu se kontroluje, zda je obr´azek pouˇzit jeˇstˇe u jin´eho ko- miksu. Pokud tomu tak skuteˇcnˇe je, obr´azek se nesmaˇze.
Upravit – umoˇzˇnuje upravit skoro vˇsechny ´udaje jako pˇri pˇrid´av´an´ı, ale ne- umoˇzˇnuje znovu nahr´at obr´azek.
Smazat – smaˇze komiks i s obr´azkem, pokud ten nen´ı nikde jinde pouˇz´ıv´an.
Ovˇeˇruje se podle hashe vytvoˇren´e z obsahu.
Upravit texty – pˇresune autora nebo administr´atora do editoru text˚u, kde m˚uˇze pˇrid´avat a upravovat texty v obr´azku.
Tabulka 4.3: Uˇzivatelsk´a pr´ava modulu Comic
Akce Registrovan´y Autor Administr´ator
Pˇridat Ne Ano Ano
Upravit, smazat Ne Vlastn´ı Ano
Article
Modul se star´a v administraci o spr´avu ˇcl´ank˚u a v uˇzivatelsk´em prostˇred´ı o jejich zobrazen´ı.
Obr´azek 4.7: Administrace ˇcl´ank˚u
Pˇridat – n´am umoˇzn´ı vloˇzit ˇcl´anek. Pro vloˇzen´ı potˇrebujeme zn´at n´azev, v jak´em jazyce ˇcl´anek je, kategorii, zdali ho oznaˇcit jako veˇrejn´y, text ˇcl´anku, pro kter´y je vyuˇzit TinyMCE, a nakonec kr´atk´y popis ˇcl´anku.
Pˇridat jazykovou variantu – dˇel´a to sam´e jako Pˇridat s t´ım rozd´ılem, ˇze oˇcek´av´a v URL ˇc´ıslo skupiny, pod kterou patˇr´ı nov´y ˇcl´anek v dalˇs´ım jazyce.
Upravit – umoˇzˇnuje upravit vˇsechny ´udaje v ˇcl´anku.
Smazat – smaˇze ˇcl´anek.
Akce Registrovan´y Autor Administr´ator
Pˇridat Ne Ano Ano
Upravit, smazat,
pˇridat jazykovou variantu Ne Vlastn´ı Ano
Category
Modul Category slouˇz´ı ke spr´avˇe kategori´ı pro ˇcl´anky a v uˇzivatelsk´em prostˇred´ı k zobrazen´ı ˇcl´ank˚u dan´e kategorie.
Obr´azek 4.8: Administrace kategori´ı
Pˇridat – n´am umoˇzn´ı vloˇzit kategorii, kterou n´aslednˇe m˚uˇzeme pouˇz´ıt tˇreba pˇri vytv´aˇren´ı menu nebo pro zobrazen´ı na domovsk´e str´ance. Pro vloˇzen´ı potˇrebujeme zn´at n´azev a v jak´em jazyce m´a kategorie b´yt.
Pˇridat jazykovou variantu – dˇel´a to sam´e jako Pˇridat s t´ım rozd´ılem, ˇze oˇcek´av´a v URL ˇc´ıslo skupiny, pod kterou patˇr´ı nov´a kategorie v dalˇs´ım jazyce.
Upravit – umoˇzˇnuje upravit vˇsechny ´udaje kategorie.
Smazat – smaˇze kategorii a vˇsechny k n´ı n´aleˇz´ıc´ı ˇcl´anky se stanou Nezaˇrazen´e (lze k nim st´ale pˇristupovat pˇres administraci).
Tabulka 4.4: Uˇzivatelsk´a pr´ava modulu Category
Akce Registrovan´y Autor Administr´ator
Pˇridat Ne Ano Ano
Upravit, smazat,
pˇridat jazykovou variantu Ne Vlastn´ı Ano
Font
Modul Font – je ˇcistˇe pro administraci a pln´ı funkci spr´avy font˚u vyuˇz´ıvan´ych editorem text˚u. Tento modul m˚uˇze pouˇz´ıvat pouze administr´ator.
Pˇridat – po n´as vyˇzaduje n´azev fontu, kter´y se bude ukazovat v editoru, podporu jazyk˚u z aktu´alnˇe dostupn´ych a nakonec soubor typu ttf.
Upravit – n´am umoˇzn´ı upravit n´azev a podporu jazyk˚u u aktu´alnˇe dostupn´ych.
To lze vyuˇz´ıt napˇr´ıklad, pokud jazyk pˇrid´ame aˇz po pˇrid´an´ı fontu a v´ıme, ˇze je font pro tento jazyk pouˇziteln´y.
Smazat – smaˇze soubor a z´aznam v datab´azi.
Archive
Obsahuje pouze uˇzivatelskou ˇc´ast, kter´a zobrazuje pro s´erie archiv jiˇz vyˇsl´ych ko- miks˚u v podobˇe kalend´aˇre. Kalend´aˇr je vytv´aˇren skrze stejnojmennou komponentu.
Obr´azek 4.9: Zobrazen´ı archivu
User
Modul umoˇzˇnuj´ıc´ı pr´aci s uˇzivatelsk´ymi ´udaji. Administr´ator zde m˚uˇze upravovat vlastn´ı a ciz´ı ´udaje nebo pˇrid´avat nov´e uˇzivatele. Ostatn´ı uˇzivatel´e (registrovan´ı a autoˇri) zde mohou upravovat sv´e vlastn´ı ´udaje. Pro uˇzivatelsk´e prostˇred´ı funguje pouze zobrazen´ı nˇekolika informac´ı o uˇzivateli a moˇznost se zaregistrovat.
Obr´azek 4.10: Administrace uˇzivatel˚u
Pˇridat – funguje podobnˇe jako registrace a vyˇzaduje po n´as ˇradu informac´ı, pˇrihlaˇsovac´ı jm´eno, kter´e se z´aroveˇn chov´a jako pˇrezd´ıvka, heslo a jeho potvrzen´ı, jazyk prostˇred´ı uˇz´ıvan´em v pˇr´ıpadˇe administrace a email uˇzivatele. Doplˇnuj´ıc´ı in- formace jsou kˇrestn´ı jm´eno a pˇr´ıjmen´ı a zdali splˇnuje podm´ınky, ˇze je ve sv´e zemi uzn´an jako dospˇel´y.
Upravit – umoˇzn´ı zmˇenit ´udaje, kter´e jsme zadali, kromˇe pˇrihlaˇsovac´ıho jm´ena.
Zabanovat/odbanovat – dok´aˇze nastavit status
”ban“ (ˇcesky z´akaz) uˇzivateli.
Ten mu znemoˇzn´ı se pˇrihl´asit a tak pˇrisp´ıvat do koment´aˇr˚u ˇci na str´anky. Pˇri pokusu o pˇrihl´aˇsen´ı se zobraz´ı zpr´ava o tom, ˇze byl uˇzivateli udˇelen
”ban“.
Aktivovat – se pouˇz´ıv´a v pˇr´ıpadˇe nov´ych registrac´ı. Ty jsou automaticky neak- tivn´ı a administr´ator je mus´ı ruˇcnˇe aktivovat. Jinak by se uˇzivatel nemohl pˇrihl´asit.
Smazat – smaˇze uˇzivatele, ale nikoliv j´ım vytvoˇren´y obsah, to mus´ı uˇcinit ad- ministr´ator nebo uˇzivatel pˇred smaz´an´ım.
Role – umoˇzˇnuje administr´atorovi zmˇenit roli, kterou m´a uˇzivatel na str´ank´ach.
Tabulka 4.5: Uˇzivatelsk´a pr´ava modulu User
Akce Registrovan´y Autor Administr´ator
Pˇridat Ne Ne Ano
Upravit Vlastn´ı Vlastn´ı Ano
Smazat, zabanovat/odbanovat,
aktivovat, zmˇenit pr´ava Ne Ne Ano
Comment
Jedn´a se o modul dostupn´y pouze pro administraci, ve kter´e umoˇzˇnuje spravovat koment´aˇre. Koment´aˇre v uˇzivatelsk´em prostˇred´ı jsou tvoˇreny pomoc´ı komponenty Comments, jeˇz umoˇzˇnuje jejich vkl´ad´an´ı a zobrazen´ı. Zasahovat do koment´aˇr˚u m˚uˇze administr´ator a autor, kter´y je omezen na koment´aˇre u jeho komiks˚u.
Obr´azek 4.11: Administrace koment´aˇr˚u
Upravit – umoˇzn´ı upravit koment´aˇr.
Smazat – smaˇze koment´aˇr.
Options
V administraci m´a tento modul funkci spr´avy nastaven´ı. Z´asadn´ı vlastnost´ı mo- dulu je, ˇze umoˇzˇnuje mˇenit n´azev str´anky dostupn´ych skrz uˇzivatelsk´e prostˇred´ı a tak´e moˇznost obnovovat dostupn´e jazyky. Do tohoto modulu m´a pˇr´ıstup pouze administr´ator.
Rss
Tento modul v uˇzivatelsk´em prostˇred´ı vytv´aˇr´ı RSS kan´aly za pomoci kompo- nenty, kter´a byla pro tento ´uˇcel vytvoˇrena. Kaˇzd´a s´erie m´a sv˚uj kan´al a nav´ıc existuje kan´al pro vˇsechny s´erie.
Sign
Tento modul slouˇz´ı v uˇzivatelsk´em prostˇred´ı ˇcistˇe k pˇrihlaˇsov´an´ı a ovˇeˇrov´an´ı uˇzivatel˚u. Pokud sem byl uˇzivatel pˇresunut z nˇejak´e str´anky z d˚uvodu tˇreba dlouh´e neˇcinnosti, tak bude pˇresunut po pˇrihl´aˇsen´ı zpˇet na str´anku, kterou se snaˇzil navˇst´ıvit, pokud m´a pr´ava k jej´ımu pˇr´ıstupu.
K´od 4.2: Uk´azka vygenerovan´eho RSS k´odu
<? x m l v e r s i o n = " 1 . 0 " ? >
< rss v e r s i o n = " 2.0 " >
< c h a n n e l >
< t i t l e > l l u n < / t i t l e >
< d e s c r i p t i o n > N e w s for c o m i c l l u n < / d e s c r i p t i o n >
< l i n k > / cs / s e r i e s / s h o w / l l u n < / l i n k >
< l a s t B u i l d D a t e > 2012 -06 -11 0 8 : 4 5 : 5 6 < / l a s t B u i l d D a t e >
< i t e m >
< p u b D a t e > 2012 -05 -02 0 0 : 0 0 : 0 0 < / p u b D a t e >
< t i t l e > D r u h e s e t k a n i < / t i t l e >
< l i n k > / cs / s e r i e s / s h o w / l l u n / druhe - s e t k a n i < / l i n k >
< g u i d > / cs / s e r i e s / s h o w / l l u n / druhe - s e t k a n i < / g u i d >
< / i t e m >
< i t e m >
< p u b D a t e > 2012 -02 -01 0 0 : 0 0 : 0 0 < / p u b D a t e >
< t i t l e > C a s t p r v n i < / t i t l e >
< l i n k > / cs / s e r i e s / s h o w / l l u n / cast - p r v n i < / l i n k >
< g u i d > / cs / s e r i e s / s h o w / l l u n / cast - p r v n i < / g u i d >
< / i t e m >
< / c h a n n e l >
< / rss >
Image
Modul m´a pouze administrativn´ı prostˇred´ı, d´ıky kter´emu umoˇzˇnuje pomˇernˇe zaj´ımavou funkci pˇrid´av´an´ı textu do obr´azk˚u. Editor je to velmi jednoduch´y, ne- umoˇzˇnuje nijak sloˇzit´e operace s textem. K dispozici jsou pouze fonty, kter´e byly pˇrid´any skrze webov´e rozhran´ı.
Za editorem stoj´ı kombinace jQuery pluginu imgAreaSelect, kter´y slouˇz´ı k v´ybˇeru obd´eln´ıkov´e oblasti, kde se m´a nach´azet text, a knihovny GD, kter´a zpra- cov´av´a z´apis text˚u do obr´azku. GD nem´a nijak velk´e moˇznosti pˇri pr´aci s textem, nicm´enˇe i to m´alo se uk´azalo jako dostaˇcuj´ıc´ı. Podporov´an je pouze horizont´aln´ı text, jelikoˇz jsem doˇsel k z´avˇeru, ˇze pˇri editaci komiksu nen´ı nutn´e m´ıt podporu pro vertik´aln´ı text. Tento n´azor podp´ır´am t´ım, ˇze jsem editor vytv´aˇrel za ´uˇcelem doplˇnov´an´ı text˚u dialog˚u. Algoritmus pˇrid´av´an´ı text˚u do obr´azk˚u vyuˇz´ıv´a nˇekolik funkc´ı GD (imagettfbbox a imagettftext). Lze tedy pouˇz´ıt pouze ttf fonty. Po- moc´ı tˇechto funkc´ı na z´akladˇe zadan´ych ´udaj˚u vykresluje text do obr´azku.
Obr´azek 4.12: Editace text˚u v obr´azku
se jedn´a o velikost textu v bodech (points, pt), barvu v RGB, x a y pozici lev´eho horn´ıho rohu, maxim´aln´ıˇs´ıˇrku textu, zarovn´an´ı textu a font. Pokud chceme vykreslit ˇci vygenerovat obr´azek i s texty, provede se pro kaˇzd´y z´aznam v datab´azi sekvence krok˚u, kterou popisuji v n´asleduj´ıc´ım textu.
Nejprve se rozdˇel´ı text na ˇr´adky podle znaku nov´eho ˇr´adku, a t´ım je znak \n.
Takto jsme z´ıskali prvotn´ı ˇr´adky, kter´e ale jeˇstˇe mus´ı proj´ıt dalˇs´ı f´az´ı, kontrolou je- jich ˇs´ıˇre. V tomto momentˇe vyuˇz´ıv´ame moˇznosti funkce imagettfbbox, kter´a vrac´ı souˇradnice roh˚u obd´eln´ıku, kter´y obsahuje text. Zaj´ımaj´ı n´as pouze horizont´aln´ı souˇradnice lev´eho a prav´eho horn´ıho rohu. Jejich rozd´ıl n´am d´av´a ˇs´ıˇrku ˇr´adku, tu porovn´ame s maxim´aln´ı ˇs´ıˇrkou. V pˇr´ıpadˇe, ˇze pˇresahuje, tak se pokus´ı rozdˇelit ˇr´adek po slovech na v´ıce ˇr´adk˚u, kter´e podm´ınku maxim´aln´ı ˇs´ıˇrky splˇnuj´ı. Pokud na- stane situace, kdy m´ame jedno nebo v´ıc slov, kter´e pˇresahuj´ı maxim´aln´ı ˇs´ıˇri, tak do- jde k pˇrizp˚usoben´ı na jejich maxim´aln´ı ˇs´ıˇrku. Algoritmus se n´aslednˇe spust´ı znovu s touto novou ˇs´ıˇrkou. Tato hodnota se uloˇz´ı do datab´aze.
Obr´azek 4.13: Text se zadanou maxim´aln´ı ˇs´ıˇrkou pˇred pr˚uchodem algoritmem
Dalˇs´ı ˇc´ast se skl´ad´a z v´ypoˇctu ˇs´ıˇrek novˇe vznikl´ych ˇr´adk˚u a celkov´e v´yˇsky textu.
Jako posledn´ı vˇec je proch´azen´ı ˇr´adk˚u textu, nastaven´ı offsetu od lev´e strany, kter´y je ovlivnˇen zarovn´an´ım textu. N´asleduje v´ypoˇcet vertik´aln´ıho offsetu tj. mezer mezi ˇr´adky. Jeho pˇrid´an´ı do celkov´e v´yˇsky textu a nakonec z´apis samotn´eho textu podle udan´ych parametr˚u.
Install
Modul Install slouˇz´ı k instalaci aplikace. Instalace je prov´adˇena ve tˇrech kroc´ıch.
Prvn´ı krok n´as informuje o tom, ˇze vˇsechny tabulky, kter´e se budou shodovat s n´azvy tabulek aplikace, budou nahrazeny tˇemi aplikaˇcn´ımi. Zb´yvaj´ıc´ı kroky uˇz prob´ıhaj´ı s novˇe vygenerovanou datab´az´ı, do kter´e ukl´adaj´ı potˇrebn´e informace. Mezi tyto informace patˇr´ı z´akladn´ı jazyk, n´azev str´anek a zaloˇzen´ı administr´atorsk´eho ´uˇctu, kter´y m´a nastaven jako sv˚uj jazyk z´akladn´ı jazyk str´anek.
4.3 Datab´ aze
Datab´aze tvoˇr´ı z´aklad vˇetˇsiny dneˇsn´ıch webov´ych aplikac´ı, proto je d˚uleˇzit´e se zab´yvat jej´ı strukturou. Protoˇze jsem rozhodl pouˇz´ıt MySQL, musel jsem zv´aˇzit, jak´e
´
uloˇziˇstˇe dat v nˇem pouˇz´ıt. Pro vˇsechny tabulky jsem pouˇzil ´uloˇziˇstˇe dat MyISAM z d˚uvod˚u vˇetˇs´ı podpory hosting˚u. Nˇekter´e hostingy zdarma nepodporuj´ı InnoDB
Vzhledem k v´ıcejazyˇcnosti je v datab´azi pouˇzito k´odov´an´ı utf8 unicode ci.
Komiksy
Komiksy jsou definov´any pomoc´ı ˇctveˇrice tabulek, series, chapters, comics a images. Kaˇzd´a z tabulek odpov´ıd´a obsahu jednotliv´ych ˇc´ast´ı. S´erie rozhoduj´ı o tom, jak´y jazyk maj´ı komiksy, kter´e do n´ı patˇr´ı. S´erie se dˇel´ı do skupin. Sku- pinou je myˇsleno seskupen´ı s´eri´ı, ve kter´em m´ame k dispozici r˚uzn´e jazykov´e verze.
Kapitoly n´am d´avaj´ı moˇznost, jak seskupovat v s´erii jednotliv´e komiksy do celk˚u.
Z´asadn´ı pro tabulku chapters je, ˇze obsahuje atribut position, kter´a vyjadˇruje pozici v s´erii. Spojen´ı r˚uzn´ych jazykov´ych verz´ı prob´ıh´a skrze s´erie.
Images obsahuje hash vytvoˇren´y z obsahu obr´azku a cesty k nˇemu. Za prim´arn´ı kl´ıˇc jsem zvolil hash, jelikoˇz ten by mˇel jednoznaˇcnˇe identifikovat soubor. V tabulce comics nalezneme dva hashe, jeden slouˇz´ı k odkazov´an´ı na aktu´aln´ı obr´azek a druh´y, original hash, na p˚uvodn´ı. Ve vˇetˇsinˇe pˇr´ıpad˚u budou duplicitn´ı, ale v momentˇe, kdy vyuˇzijeme moˇznosti editovat texty, tak se pˇri uloˇzen´ı zmˇen do obr´azku a vy- tvoˇren´ı dalˇs´ıho fyzick´eho souboru, budou tyto hashe liˇsit.
V tabulce comics kromˇe jiˇz zm´ınˇen´ych atribut˚u hash a original hash nalez- neme napˇr´ıklad ciz´ı kl´ıˇce na s´erii a kapitolu, do kter´e patˇr´ı.
Obr´azek 4.14: Tabulky spojen´e s komiksy a koment´aˇri
V pr˚ubˇehu v´yvoje se datab´aze postupnˇe mˇenila, zpoˇc´atku byla pˇr´ıtomna tabulka
groups, kter´a mˇela slouˇzit ke spojov´an´ı jazykov´ych verz´ı s´eri´ı a komiks˚u. Po zral´e
´
uvaze jsem nakonec doˇsel k z´avˇeru, ˇze se t´ım stane obt´ıˇznˇejˇs´ı udrˇzen´ı konzistence datab´aze a pˇrehledu o tom, co seskupuje, a bude tedy lepˇs´ı tuto tabulku vynechat.
M´ısto toho jsem zajistil seskupov´an´ı pomoc´ı atributu group number nebo position.
Doˇ casn´ e obr´ azky
Tabulka tempimages slouˇz´ı k ukl´ad´an´ı informac´ı o nahran´ych souborech, kter´e nebyly jeˇstˇe pouˇzity pro nˇejak´y komiks. Jelikoˇz se ukl´ad´a informace o tom, kdy maj´ı soubory vyprˇset, je zajiˇstˇeno, ˇze nebudou soubory uloˇzeny vˇeˇcnˇe. Kontrola platnosti prob´ıh´a pokaˇzd´e, kdyˇz je nˇejak´y nov´y obr´azek nahr´an. Pokud platnost obr´azku vyprˇsela bude smaz´an.
Koment´ aˇ re
Koment´aˇre jsou tvoˇreny pouze jednou tabulkou comments, kter´a je propojena pomoc´ı ciz´ıho kl´ıˇce s komiksy. Obsahuje identifik´ator, jm´eno toho, kdo koment´aˇr pˇridal, text zpr´avy, e-mail a ciz´ı kl´ıˇc na komiks.
Texty
Texty jsou reprezentov´any dvojic´ı tabulek, texts a fonts. V prvn´ı jsou vˇsechny texty a obsahuje dva ciz´ı kl´ıˇce, a to pro komiks a font. Druh´a tabulka obsahuje n´azev fontu, cestu k souboru, kterou pouˇz´ıv´a skript pro tvoˇren´ı text˚u v obr´azc´ıch, a jazyky, kter´e font podporuje.
Cl´ ˇ anky
Cl´ˇ anky maj´ı pouze dvˇe tabulky, articles a categories. Tabulka articles pˇredstavuje ˇcl´anky, kter´e se stejnˇe jako s´erie seskupuj´ı do skupin jazykov´ych verz´ı.
Jedin´y ciz´ı kl´ıˇc se v´aˇze k uˇzivateli, kter´y ˇcl´anek vytvoˇril. Podobnˇe jako s´erie i ˇcl´anky obsahuj´ı atribut group number, kter´y se star´a o spojov´an´ı r˚uzn´ych jazykov´ych vari- ant t´ehoˇz ˇcl´anku. Kapitoly maj´ı pouze vlastn´ı n´azev a stejnˇe jako s´erie a ˇcl´anky se seskupuj´ı do skupin podle stejn´eho atributu.
Uˇ zivatel´ e
Uˇzivatele pˇredstavuje jedna tabulka, users, do kter´e se o nich ukl´adaj´ı informace a jejich osobn´ı nastaven´ı.
Nastaven´ı
Jednoduch´a tabulka options na ukl´ad´an´ı nastaven´ı cel´e aplikace. Je tvoˇrena pouze dvojic´ı atributy, n´azvem a hodnotou.
Obr´azek 4.16: Tabulky articles, categories, users a options
4.4 V´ıcejazyˇ cnost aplikace
Vzhledem k tomu, ˇze jsem vytv´aˇrel aplikaci, kter´a by zvl´adla pracovat jako v´ıcejazyˇcn´a, vyuˇzil jsem moˇznosti pouˇz´ıt NetteTranslator. Ten je vytvoˇren pro pr´aci v Nette frameworku, ve kter´em implementuje rozhran´ı ITranslator.
D´ıky tomu jsem mohl vyuˇz´ıt lokalizaˇcn´ı moˇznosti frameworku a z´aroveˇn jsem z´ıskal n´astroj, kter´y mi v lokalizaci pomohl. Lokalizaˇcn´ı soubory jsou bˇeˇznˇe pouˇz´ıvan´e gettextem, kter´y je implementovan´y v NetteTranslatoru takov´ym zp˚usobem, ˇze pˇri zmˇenˇe v lokalizaˇcn´ıch souborech nemus´ı doj´ıt k restartu serveru, jak je to u implementace v PHP nutn´e.
Pro pˇrid´an´ı dalˇs´ıho jazyka mus´ıme nejdˇr´ıve vytvoˇrit jazykov´y soubor, kde se bude nach´azet pˇreklad. Tento soubor lze vytvoˇrit za pomoci NetteTranslatoru, ale to nen´ı moc vhodn´e, jelikoˇz je pak nutn´e proj´ıt vˇsechny str´anky a zobrazit vˇsechny ozn´amen´ı. Druh´ym zp˚usobem je vz´ıt si napˇr´ıklad pˇriloˇzen´y PO soubor a vyuˇz´ıt programu Poedit, kter´y umoˇzˇnuje vytv´aˇren´ı a generov´an´ı MO soubor˚u, jeˇz pouˇz´ıv´a aplikace, a pˇreloˇzit tak aplikaci do nov´eho jazyka. Jako posledn´ı krok je obnoven´ı stavu jazyk˚u v administraci v sekci Nastaven´ı.
Souˇc´ast´ı aplikace je i tˇr´ıda LocaleInfo, kter´a n´am poskytuje informace o r˚uzn´ych jazyc´ıch pouˇziteln´ych pro lokalizaci aplikace.
Vzhledem k tomu, ˇze se vyuˇz´ıv´a i ciz´ı k´od (TinyMCE), tak je nutn´e zajistit i pˇreklad tˇechto ˇc´ast´ı. TinyMCE m´a sv´e pˇreklady ve sloˇzce /js/tinymce/langs/.
V´ıcejazyˇcnost dynamick´ych text˚u, jako jsou ˇcl´anky a komiksy, je ˇreˇsena pomoc´ı datab´aze a v textu pr´ace se j´ı zab´yv´am v sekci t´ykaj´ıc´ı se datab´az´ı.
4.4.1 Datum a ˇ cas
Prvotn´ı nastaven´ı form´atov´an´ı datumu a ˇcasu spoleˇcnˇe s ˇcasovou z´onou nalez- neme v tˇr´ıdˇe LocaleInfo. Uˇzivatel si tato nastaven´ı m˚uˇze zmˇenit v administraci v r´amci modulu Nastaven´ı. Nastaven´ı jsou aplikov´ana podle uˇzivatelov´ych prefe- renc´ı (administrace) nebo jazykov´e mutaci str´anek (uˇzivatelsk´a ˇc´ast). Vˇsechna data ukl´adan´a do datab´aze jsou uloˇzena v z´onˇe UTC kv˚uli konzistenci.
Z´ avˇ er
V bakal´aˇrsk´e pr´aci se zab´yv´am tvorbou jednoduˇse ovladateln´eho syst´emu specia- lizovan´eho na publikaci webov´ych komiks˚u a/nebo strip˚u. V teoretick´e ˇc´asti popisuji z´akladn´ı technologie, kter´e patˇr´ı k tvorbˇe dynamick´ych webov´ych str´anek. V´ysledek praktick´e ˇc´asti je vidˇet na testovac´ı webov´e str´ance, kterou jsem vytvoˇril pomoc´ı vy- tvoˇren´eho syst´emu. Nalezneme ji na adrese llun-test.g6.cz (admin - pˇrihlaˇsovac´ı jm´eno: geont a heslo: geont258).
Jako PHP framework jsem si zvolil Nette, se kter´ym se mi d´ıky novink´am ve verzi 2 pracovalo dobˇre. Rozhodnut´ı rozdˇelit k´od do modul˚u napomohlo k snadnˇejˇs´ı ori- entaci v k´odu. Pouˇzit´y framework pro JavaScript je jQuery, kter´y m´a velk´e mnoˇzstv´ı dostupn´ych plugin˚u. Nˇekolik plugin˚u bylo vyuˇzito pro potˇreby administrace.
Syst´em umoˇzˇnuje spr´avu komiks˚u, kapitol a s´eri´ı. S´erie pak m˚uˇze m´ıt v´ıce jazy- kov´ych mutac´ı, coˇz n´am umoˇzn´ı vyd´avat komiksy ve v´ıce jazyc´ıch. Vyuˇzit´ı knihovny GD pro pˇrid´av´an´ı text˚u do obr´azk˚u se uk´azalo jako dostateˇcn´e.
S v´yslednou podobou aplikace jsem spokojen´y. Splˇnuje zad´an´ı a poˇzadavky, kter´e byly na n´ı kladeny v pr˚ubˇehu v´yvoje. Bˇehem v´yvoje doˇslo k nˇekolika probl´em˚um (napˇr. ˇspatn´e navrˇzen´ı modul˚u a datab´aze), ale ty se mi podaˇrilo vyˇreˇsit. V´yvoj aplikace ovˇsem nemus´ı b´yt koneˇcn´y, jelikoˇz jsou vˇeci, kter´e by bylo moˇzn´e pˇridat.
Pˇr´ıkladem funkce, kter´a by byla vhodn´a, je podpora addon˚u ˇci plugin˚u podobn´a takov´e, jakou maj´ı pokroˇcil´e CMS (napˇr. Wordpress).
Literatura
[1] BERNARD, B. Seri´al MVC a dalˇs´ı prezentaˇcn´ı architek- tury [online]. 2009. URL: <http://www.zdrojak.cz/serialy/
mvc-a-dalsi-prezentacni-vzory/>.
[2] DANˇEK, P. Seri´al Velk´y test PHP framework˚u [online]. 2008. URL: <http:
//www.root.cz/serialy/velky-test-php-frameworku/>.
[3] LONGMAN, A. W. A history of HTML [online]. 1998. URL: <http://www.
w3.org/People/Raggett/book4/ch02.html>.
[4] Nette foundation. Dokumentace Nette frameworku [online]. 2012. URL: <http:
//doc.nette.org/cs/>.
[5] Oracle Corporation. MySQL Differences from Standard SQL [on- line]. 2012. URL: <http://dev.mysql.com/doc/refman/5.1/en/
differences-from-ansi.html>.
[6] Q-Success. Usage of content management systems for websites [on- line]. 2012. URL: <http://w3techs.com/technologies/overview/content\
_management/all>.
[7] Q-Success. Usage of JavaScript libraries for websites [online]. 2012. URL:
<http://w3techs.com/technologies/overview/javascript\_library/
all>.
[8] Q-Success. Usage of server-side programming languages for websites [online].
2012. URL: <http://w3techs.com/technologies/overview/programming\
_language/all>.
[9] The jQuery Foundation. Dokumentace jQuery frameworku [online]. 2012. URL:
<http://docs.jquery.com/Main\_Page>.
[10] ZAHARIEV, I. C++ vs. Python vs. Perl vs. PHP performance ben- chmark [online]. 2012. URL: <http://blog.famzah.net/2010/07/01/
cpp-vs-python-vs-perl-vs-php-performance-benchmark/>.
Pˇ r´ıloha A – Obsah CD
obsah CD CD
comicPublish ... Publikaˇcn´ı syst´em se z´akladn´ı ˇsablonou Datab´aze...Soubory pro MySQL Workbench Bakal´aˇrsk´a pr´ace...Zdrojov´e k´ody bakal´aˇrsk´e pr´ace Text pr´ace
Pˇ r´ıloha B – Diagram z´ avislost´ı
mezi moduly
Pˇ r´ıloha C – EER diagram
datab´ aze
Pˇ r´ıloha D – Postup instalace
Nejdˇr´ıve mus´ıme zajistit, aby sloˇzky temp a log mˇely nastaveny pr´ava na 0766.
Pot´e mus´ıme nastavit pˇr´ıstupov´e ´udaje k datab´azi. Soubor, kter´y obsahuje nastaven´ı datab´aze, se nach´az´ı v adres´aˇri /app/config a naz´yv´a se database.neon.
K´od 4.3: Uk´azkov´y pˇr´ıklad obsahu souboru database.neon d a t a b a s e :
h o s t : l o c a l h o s t d a t a b a s e : l l u n u s e r : g e o n t
p a s s w o r d : e a s y p a s s w o r d
Podpora datab´aze je zaruˇcena pouze pro MySQL, ale dibi dok´aˇze komunikovat i s jin´ymi datab´azemi beze zmˇeny SQL. Nicm´enˇe u jin´ych datab´az´ı nen´ı zaruˇcena sto- procentn´ı funkˇcnost. Pokud bychom chtˇeli zmˇenit typ datab´aze, musel by se zmˇenit ˇr´adek driver v souboru config.neon.
V momentˇe, kdy nastav´ıme datab´azi, m˚uˇzeme pokraˇcovat v instalaci. Pˇri prvn´ım spuˇstˇen´ı str´anek se objev´ı instal´ator, kter´y reprezentuje modul Install. Ten v nˇekolika kroc´ıch provede z´akladn´ı instalaci. Vˇetˇsinu ´udaj˚u lze pozdˇeji zmˇenit v administraci.
