Realizace portálu pro anonymní oznamování přestupků proti zákonu policii

České vysoké učení technické v Praze Fakulta Elektrotechnická

Bakalářská práce

Realizace portálu pro anonymní oznamování přestupků proti zákonu policii Ladislav Janík

Vedoucí práce: ing. Martin Komárek

Studijní program: Elektrotechnika Elektrotechnika a informatika strukturovaný bakalářský Obor: Informatika a výpočetní technika březen 2008

1

Poděkování Chtěl bych poděkovat ing. Martinu Komárkovi, vedoucímu mé bakalářské práce, za jeho správné vedení, rady a čas, který mi věnoval při tvorbě práce. Také děkuji zadavateli p.Hrabalovi, za vstřícnou komunikaci a trpělivost při návrhu projektu.

2

Prohlášení Prohlašuji, že jsem svou bakalářskou práci vypracoval samostatně a použil jsem pouze podklady uvedené v přiloženém seznamu. Nemám žádný důvod proti užití tohoto školního díla ve smyslu §60 Zákona č. 121/2000 Sb., o právu autorském, o právech souvisejících s právem autorským a o změně některých zákonů (autorský zákon). V Praze dne 25.3.2008

………………………………………………………….

3

Obsah Poděkování .................................................................................................................. 2 Prohlášení .................................................................................................................... 3 Seznam obrázků ........................................................................................................... 6 Seznam tabulek ............................................................................................................ 6 1.

Úvod ................................................................................................................... 7

2.

Specifikace cíle práce a požadavky....................................................................... 8 2.1.

Softwarové nároky ............................................................................................... 8

2.2.

Požadavky ............................................................................................................. 8

2.2.1. Registrace ......................................................................................................... 8 2.2.2. Přihlášení .......................................................................................................... 8 2.2.3. Přidání oznámení .............................................................................................. 9 2.2.4. Výpis oznámení ................................................................................................. 9 2.2.5. Administrace ..................................................................................................... 9 3.

4.

Návrh systému .................................................................................................. 10 3.1.

Způsob zadávání ................................................................................................. 10

3.2.

Použité metody a technologie............................................................................ 10

3.3.

Grafické zpracování ............................................................................................ 12

Tvorba jednotlivých částí systému ..................................................................... 13 4.1.

Struktura stránky index.php ............................................................................... 13

4.1.1. Systém podstránek ......................................................................................... 13 4.1.2. Připojení k databázi ........................................................................................ 13 4.1.3. Přihlašování do systému ................................................................................. 14 4.1.4. Hlavička webu ................................................................................................. 15 4.1.5. Silueta policisty ............................................................................................... 17 4.2.

Instalační část ..................................................................................................... 18

4.2.1. Požadavky na systém ...................................................................................... 18 4.2.2. Soubor mysql_tabulky.php ............................................................................. 19 4.2.3. Nastavení parametrů pro odesílané maily ..................................................... 21 4.2.4. Jiné možnosti instalace a nastavení ............................................................... 22 4.3.

Uživatelská část .................................................................................................. 23

4.3.1. Registrace ....................................................................................................... 23 4.3.1.1.

Vyplnění formuláře ..................................................................................... 23

4.3.1.2.

Odeslání formuláře a kontrola údajů .......................................................... 25

4.3.1.3.

Potvrzení autorizačního kódu odeslaného na e-mail ................................. 25 4

4.3.1.4.

Potvrzení registrace administrátorem ........................................................ 26

4.3.2. Přihlášení ........................................................................................................ 26 4.3.3. Přidání nového oznámení ............................................................................... 27 4.3.3.1.

Zadání údajů ................................................................................................ 27

4.3.3.2.

Kontrola zadaných údajů ............................................................................ 28

4.3.3.3.

Nahrání fotky .............................................................................................. 28

4.3.3.4.

Uložení do databáze.................................................................................... 29

4.3.3.5.

Odeslání e-mailů policii ............................................................................... 29

4.3.4. Výpis oznámení ............................................................................................... 31 4.4.

Administrační část .............................................................................................. 32

4.4.1. Tabulka s výpisem dat .................................................................................... 33 4.4.2. WYSIWYG editor ............................................................................................. 35 4.4.3. Úvod ................................................................................................................ 36 4.4.4. Oznámení ........................................................................................................ 36 4.4.5. Města .............................................................................................................. 37 4.4.6. Uživatelské účty .............................................................................................. 37 4.4.7. Novinky ........................................................................................................... 38 5.

Závěr................................................................................................................. 39

Použitá literatura ....................................................................................................... 40 Přílohy ....................................................................................................................... 41 Obsah přiloženého CD ................................................................................................ 41 Příloha A Dokumentace – instalační část .................................................................... 44 Příloha B Dokumentace – administrační část .............................................................. 52 Příloha C Dokumentace – uživatelská část .................................................................. 60

5

Seznam obrázků Obrázek 1 - pole $stranky v souboru index.php.................................................................. 13 Obrázek 2 - připojení k MySQL databázi ............................................................................. 13 Obrázek 3 - načítání fotek do hlavičky................................................................................. 15 Obrázek 4 - funkce sirka_obrazku() ..................................................................................... 16 Obrázek 5 - nastavení šířky pásu v hlavičce pomocí JavaScriptu ........................................ 16 Obrázek 6 - funkce JavaScriptu hlavicka_vlevo()................................................................. 17 Obrázek 7 - soubor data/data.php ...................................................................................... 18 Obrázek 8 - funkce pro vytváření a odstraňování tabulek z databáze ................................ 19 Obrázek 9 - vytvoření tabulky v databázi ............................................................................ 20 Obrázek 10 - Přihlašovací část v hlavičce ............................................................................ 23 Obrázek 11 - Registrační formulář ....................................................................................... 24 Obrázek 12 - Formulář na přidání nového oznámení .......................................................... 27 Obrázek 13 - funkce vytvor_zmenseniny() .......................................................................... 29 Obrázek 14 - Třídění oznámení podle měst a městských částí ........................................... 31 Obrázek 15 - Hlavní stránka po přihlášení administrátora .................................................. 32 Obrázek 16 - funkce zkrat_retezec() ................................................................................... 33 Obrázek 17 - Tabulka s výpisem dat – zobrazení delšího textu .......................................... 33 Obrázek 18 - Tabulka s výpisem dat – zobrazení fotky ....................................................... 34 Obrázek 19 - WYSIWYG editor............................................................................................. 35 Obrázek 20 - Administrace měst ......................................................................................... 37 Obrázek 21 - Administrace uživatelských účtů .................................................................... 38 Obrázek 22 - Administrace novinek..................................................................................... 38

Seznam tabulek Tabulka 1 - Práva ................................................................................................................. 21

6

1. Úvod Každý den se ve velkých městech v jako třeba v Praze setkáváme s dopravní situací, která se stává noční můrou většiny z nás. Tuto situaci ještě umocňují bezohlední řidiči, kteří si myslí, že pro ně zákony neplatí. Když vidí kolonu, tak ji klidem objedou odstavným pruhem. Plné parkoviště? Tak proč nezastavit na chodníku přímo před domem? A mnoho dalších přestupků si až moc lidí zevšedňuje. Společně s tím se dostává do popředí pro některé z nás nový výraz – whistleblowing1. Díky tomu, že se internet stává poslední dobou stále častějším společníkem každého člověka, nabízí se tu možnost jak využít whistleblowing také v dopravě. Jako průkopník tohoto systému bude webový portál, na kterém budou lidé moci nahlásit přestupky, týkající se parkování, které jim zbytečně komplikují život. Tento systém jistě ocení, např. maminky s kočárkem, které nemohou projet po chodníku, protože na něm parkuje auto, nebo lidé, kterým pravidelně někdo parkuje před vjezdem do dvora jejich domu.

1

Whistleblowing (7) - Whistleblower je ten, kdo píská na píšťalku, aby na něco upozornil. V českém jazyce nemá toto označení adekvátní ekvivalent. Překládá se nejčastěji jako informátor, někdy také oznamovatel, ovšem toto označení v sobě stále nese jakousi negativní pachuť udavačství a práskačství. Pojem whistleblowing má naopak pozitivní náboj, neboť obsahuje odvahu sdělit nějakou skutečnost, kterou se jiní sdělit neodváží, odvahu potlačit strach, loajalitu či kolegialitu a upozornit na nefér jednání.

7

2. Specifikace cíle práce a požadavky Cílem této práce je vytvořit webový portál umožňující vkládání oznámení o přestupcích týkajících se parkování s možností přiložení fotografie a popisu místa. Další částí práce je zhodnocení postupu vývoje webového portálu podle požadavků občanského sdružení Oživení (1), případně návrh možných vylepšení aplikace.

2.1. Softwarové nároky Pro používání aplikace bude potřeba pouze webový prohlížeč. Aplikace bude optimalizovaná pro dva nejpoužívanější prohlížeče a to Mozilla Firefox 2.0 a Internet Explorer 6 v rozlišení obrazovky 1024 x 768 a vyšší. Aplikace počítá se zapnutým JavaScriptem2 u administrátorů. Na uživatelské straně bude JavaScript použit pouze jako doplněk a portál bude plně funkční i bez něj.

2.2. Požadavky Systém je určen pro uživatele všech kategorií, proto musí být jeho obsluha intuitivní a jednoduchá.

2.2.1. Registrace Uživatel bez registrace má možnost pouze prohlížet oznámení, která přidali registrovaní uživatelé. Aby mohl využívat všech funkcí systému, tak musí provést registraci, která se skládá z následujících kroků: 1. Vyplnění registračního formuláře 2. Potvrzení emailové adresy uživatele 3. Autorizace administrátorem

2.2.2. Přihlášení Uživatelé se do systému přihlašují pomocí přezdívky (nick) a hesla, které si zvolili při registraci. Veškeré jejich osobní údaje, vyjma přezdívky, jsou skryty ostatním uživatelům a mají k nim přístup pouze administrátoři systému.

2

Javascript - multiplatformní, objektově orientovaný skriptovací jazyk, jehož autorem je Brendan Eich. Používá se jako interpretovaný programovací jazyk pro WWW stránky, často vkládaný přímo do HTML kódu stránky. Jsou jím obvykle ovládány různé interaktivní prvky GUI (tlačítka, textová políčka) nebo tvořeny animace a efekty obrázků.

8

2.2.3. Přidání oznámení Oznámení mohou přidávat pouze registrovaní uživatelé, kteří mají aktivní uživatelský účet (tzn. nebyli vyřazeni ze systému). Oznámení se vztahuje k určitému městu či městské části a obsahuje SPZ vozidla, popis místa, fotografii, datum a čas zjištění přestupku.

2.2.4. Výpis oznámení Výpis oznámení je přístupný i neregistrovaným uživatelům. Mají možnost třídit oznámení podle měst a městských částí.

2.2.5. Administrace 2.2.5.1.

Úvodní text

Administrátoři mají možnost editovat úvodní text zobrazený na hlavní stránce webu.

2.2.5.2.

Oznámení

Systém má možnost správy oznámení – tzn. administrátoři mají možnost smazat nevhodné oznámení o přestupku, či doplnit nějaké informace ( např. na žádost uživatele). Hlavní administrátoři mají přístup ke všem oznámením, administrátoři měst jen k oznámením týkajících se jim přidělených měst.

2.2.5.3.

Města a městské části

Hlavní administrátor zakládá jednotlivá města a jejich městské části. Ke každému z nich může napsat až tři kontakty na policejní oddělení (minimálně jeden). Městům přiřadí jejich administrátory.

2.2.5.4.

Uživatelské účty

Sekce pouze pro hlavní administrátory. Mají zde přehledný výpis všech účtů uživatelů, administrátorů měst a hlavních administrátorů. U všech mohou upravovat zadané údaje, případně je vyřadit ze systému.

9

2.2.5.5.

Novinky

Novinky mohou přidávat jen hlavní administrátoři. Na hlavní stránce webu jsou zobrazeny poslední tři novinky vložené do systému.

3. Návrh systému 3.1. Způsob zadávání Celý webový portál byl vytvářen na základě požadavků od občanského sdružení Oživení (1). Za o.s. Oživení jsem jednal s p. Vojtěchem Hrabalem, který byl zadavatel. Jelikož nebyly předem přesně specifikované požadavky na funkcionalitu systému, byla celá struktura navrhována iterativně. Její finální podoba se postupně formovala na schůzkách s vedoucím mé BP ing. Komárkem a p. Hrabalem. Jako hlavní komunikační kanál jsme zvolili internetovou aplikaci Google Groups (2), což je volně přístupná diskuse, kde je možné si založit vlastní skupinu s možností jednoduchého vytváření stránek (HTML 3 dokumentů), uploadování souborů. Tento systém má možnost automatického odesílání všech novinek ve skupině na emailové adresy registrovaných uživatelů, což je pro náš případ ideální. Systém Google Groups (2) je přehledný a jednoduše se v něm dají nalézt předchozí diskuse a zprávy. Iterativní způsob zadávání práce má své výhody i nevýhody. Výhody • Ideální pokud zadavatel nemá přesně stanovenou podobu systému • Vhodné pokud zadavatel nemá dobré technické znalosti v daném oboru • Postupné formování systému podle potřeb zadavatele Nevýhody • Dopředu není známá struktura – problém při návrhu databáze • Více práce pro programátora – průběžné úpravy a změny • Větší potřeba komunikace se zadavatelem

3.2. Použité metody a technologie V dnešní době je na výběr z mnoha programovacích jazyků určených pro webové aplikace. Výběr závisí většinou na povaze aplikace a výběru dle programátora.

3

HTML = HyperText Markup Language – značkovací jazyk pro hypertext. Je jedním z jazyků pro vytváření stránek v systému World Wide Web, který umožňuje publikaci dokumentů na Internetu.

10

Možné programovací jazyky: • PHP • Java Servlety • Perl • ASP.NET • a další … Pro tvorbu tohoto webového portálu jsem zvolil PHP (testováno na verzi 5.1.1) z několika důvodů. Asi hlavním důvodem bylo to, že je to jazyk, který používám nejčastěji a proto s ním mám relativně dobré zkušenosti. Dalším z důvodů je fakt, že je to asi nejpoužívanější jazyk pro tvorbu webů a většina serverů ho dnes podporuje. Poslední důvod je ten, že je dost přehledný (na rozdíl např. od Perlu, který používá regulární výrazy) a lépe by se v něm vyznal jiný programátor, který by chtěl systém upravovat. Použil jsem strukturální metodu programování. Efektivnější by bylo OOP4 , ale jelikož s ním nemám dostatečnou zkušenost, tak bych strávil většinu času učením této metodiky. Při této volbě jsem mohl využít své zkušenosti s psaním webů strukturální metodou. Zvolil jsem strukturu odpovídající dvouvrstvé architektuře z důvodu jednoduchosti systému. Třívrstvou architekturu bych volil v případě větší aplikace, při potřebě rozdělení zátěže na více serverů (prezenční, aplikační a databázová). Dle mého názoru je pro tento případ dvouvrstvá architektura ideální. V systému jsem použil i JavaScript a to ve dvou případech. Jeho první důležitá činnost je ve formulářích a dále je použit v grafické části aplikace k animacím. Pro snadnější úpravu textu novinek a úvodního textu jsem použil WYSIWYG editor Open WYSIWYG (3) , který je vydán pod LGPL5 Open Source licencí. Celý web je psán v XHTML STRICT 1.1 6. Snažil jsem se dodržet validitu kódu, ale WYSIWYG editor bohužel neumí vytvářet validní kód a nepodařilo se mi najít jiný, s podobnými vlastnostmi, který by to uměl. Vzhled aplikace je vytvořen pomocí CSS7 stylů. Díky využití CSS stylů je oddělena grafická část aplikace od aplikační a datové, tzn. výsledný HTML kód je čistší a obsahuje jen důležitá data, o formátování se starají kaskádové styly. Databáze je založena na technologii MySQL verze 4. Výhoda této technologie je opět její dostupnost na serverech a rychlost. Další výhodou MySQL je možnost rychlého fulltextového vyhledávání na úrovni databáze.

4

OOP – Object-oriented programming - Objektově Orientované Programování – je metodika vývoje software založená, mj. na koncepci objektů , abstrakce a používání dědičnosti. 5 LGPL - Lesser General Public License - varianta licence pro svobodný software GNU GPL, která ale na rozdíl od GPL umožňuje spojování s nesvobodným kódem, a tak je vhodnější např. pro knihovny (za předpokladu, že autor jejich použití v nesvobodných programech chce umožnit). 6 XHTML STRICT 1.1 – „norma“ pro tvorbu HTML dokumentů. Vydána jako doporučení konsorcia W3C (6) 7 CSS - Cascading Style Sheets – jazyk pro formátování internetových stránek

11

3.3. Grafické zpracování Ze strany zadavatele bylo jediným požadavkem na vzhled aplikace to, aby stylově odpovídal vzhledu webu o.s.Oživení (1). Jelikož grafika není mojí silnou stránkou, dohodnul jsem s p. Hrabalem že vzhled bude mít na starosti grafik, konkrétně moje sestra Adéla Janíková. Mojí úlohu bylo její grafický návrh převést do formátu CSS stylů. Navíc jsem vzhled oživil přidáním animací. V animované hlavičce se pohybují fotky jednotlivých přestupků a v jednou za 10 vteřin náhodně ze stran vykukuje silueta policisty.

12

4. Tvorba orba jednotlivých částí systému V této části práce se podrobněji podrobněji zaměříme na jednotlivé části systému, použité metody a způsob implementace.

4.1. Struktura stránky index.php Celá struktura webu je v souboru index.php, který je v kořenovém adresáři.

4.1.1. Systém podstránek Systém podstránek je řešen připojováním konkrétních stránek, které jsou uloženy v adresáři /stránky/, /stránky/ dle parametru str,, který je obsažen v URL webu. Pokud není parametr str definován, je defaultně nastavena stránka stranky/uvod.php.. Ke každé stránce je přiřazen parametr pro str,, který je uložen v poli $stranky.

OBRÁZEK 1 - POLE $STRANKY V SOUBORU INDEX.PHP

4.1.2. Připojení k databázi

OBRÁZEK 2 - PŘIPOJENÍ K MYSQL DATABÁZI

Jelikož je systém založen na databázi a veškeré informace jsou v uložené v ní, bude potřeba připojení k databázi při načtení každé stránky.. Proto je připojení k databázi na začátku souboru index.php a je provedeno při každém každém spuštění.

13

Přihlašovací údaje k databázi jsou uloženy v souboru /data/data.php , ten je při přihlašování připojen k souboru index.php. Pokud se připojení k databázi nepovede, tak je php skript zastaven hned na začátku a vypíše se chyba.

/data/data.php obsahuje proměnné • $se o adresa serveru (pokud běží MySQL databáze na stejném serveru jako php, může být nastaveno localhost8) • $us o Přihlašovací jméno do databáze • $pa o Přihlašovací heslo do databáze • $db o Jméno databáze • $prefix o Tento prefix je připojen před jméno každé tabulky v databázi. Zvolil jsem to tak z toho důvodu, kdyby systém používal stejnou databázi jako nějaká jiná aplikace, aby nenastal nějaký konflikt (např. u tabulky UZIVATELE je dost pravděpodobné, že bude i u jiného systému. Pokud použiji např. PRESTUPKY_UZIVATELE, tak je pravděpodobnost výrazně menší)

4.1.3. Přihlašování do systému Jelikož má systém obsahovat funkci přihlašování uživatelů, je třeba vyřešit jeden problém. Protokol http je bezestavový, tzn. provede operace, které mu uživatel zadá, vyřídí komunikaci se serverem a vše co se stalo „zapomene“. Proto jsem pro tento případ použil SESSION9. Když uživatel zadá nick a heslo do přihlašovacího formuláře v hlavičce webu, tak jsou zadané údaje zkontrolovány s databází, zda má přístup do systému. Pokud projde kontrolou, tak se do session uloží uživatelské jméno, heslo, uživatelská práva, stav uživatele a jeho identifikační číslo. Tyto údaje pak používá systém při všech operacích. Po úspěšném přihlášení je uživatel přesměrován na hlavní stránku a místo přihlašovacího formuláře se mu v hlavičce zobrazí jeho nick a odkaz na odhlášení ze systému. 8

Localhost - odkaz na právě používaný počítač. Loopback (logická smyčka) odkazuje na speciální vyhrazenou IP adresu 127.0.0.1 9 Session - Místo pojmu session se také někdy používá český termín "relace". Session řeší problém bezstavovosti protokolu HTTP, udrží se pomocí ní informace o stavu aplikace a práci uživatele s ní. V session lze uchovávat proměnné (parametry), které by jinak museli být předávány (a tedy i přenášeny) v URL, což je nejen pracné, ale v případě některých parametrů také ne zrovna bezpečné. Pokud jsou nějaké proměnné v relaci, tyto se vůbec nepřenášejí mezi serverem a počítačem klienta, skript na serveru je dostává přímo z interpretu PHP

14

Pokud při přihlašování nastane chyba, tak je zobrazena chybová stránka /stranky/login_chyba.php /stranky/login_chyba.php. Když je provedeno ovedeno odhlášení ze systému, je session zničena ena zavoláním funkce session_destroy() a uživatel je opět přesměrován na hlavní stránku.

4.1.4. Hlavička webu Při navrhování designu webu jsem dostal instrukce, aby v hlavičce webu byla sada obrázků jednotlivých přestupků, která se bude pohybovat ze strany na stranu. Dalším požadavkem byla snadné nastavení těchto obrázků. První varianta, kterou jsem zvažoval, bylo vytvořit jednu tabulku v databázi a všechny fotky pak přidávat a odebírat přes administraci. Pak mě ale napadla jiná metoda, pro tento případ ideální ideáln svou jednoduchostí. Fotky do hlavičky jsou načítány ze složky /pics/hlavicka/. Jediné úskalí této varianty je v tom, že do této složky je fotky potřeba nahrát již zmenšené. Je zde možnost i určit pořadí fotek, fotek ve kterém budou seřazeny. Jelikož jsou načítány ány podle jejich jména, tak je stačí pojmenovat čísly a podle nich se budou řadit. Pás, který se bude v hlavičce pohybovat jsem vytvořil pomocí CSS stylů, jako objekt DIV s velkou šířkou a nastaveným overflow: hidden;.. To znamená, že přesah tohoto pásu bude ude skrytý. Problém, na který jsem zde narazil je ten, že v době kdy se načítají CSS styly (při načítání části ), ještě nejsou načteny obrázky ze složky a tím pádem ani nevím, jak bude posuvný pás široký. Situaci jsem vyřešil tak, že na začátku má pás p nějakou defaultní šířku a při načítání fotek ze složky se pomocí funkce sirka_obrazku() spočítá jeho šířka, která se následně sčítá se všemi ostatními. Na závěr je šířka pásu upravena pomocí JavaScriptu přesně podle šířky fotek.

OBRÁZEK 3 - NAČÍTÁNÍ FOTEK DO HLAVIČKY AVIČKY

15

OBRÁZEK 4 - FUNKCE SIRKA_OBRAZKU()

OBRÁZEK 5 - NASTAVENÍ ŠÍŘKY PÁSU V HLAVIČCE POMOCÍ JAVASCRIPTU

avičky se starají funkce JavaScriptu hlavicka_vlevo() a O pohyb hlavičky hlavicka_vpravo().. Pro časování animace jsem použil funkci setTimeout(), setTimeout() která je definovaná pro objekt window. Funkce hlavicka_vlevo() je zavolána při načtení objektu parametrem onload. Další funkce, které jsem vytvořil v JavaScriptu jsou zrychli() a zpomal(), jsou používány pro změnu rychlosti hlavičky. Funkce zrychli() je zavolána při najetí myší nad hlavičku, naopak fce zpomal() je spuštěna při opuštění myši plochy hlavičky.

16

OBRÁZEK 6 - FUNKCE JAVASCRIPTU HLAVICKA_VLEVO() H

JavaScript jee vložen přímo do souboru index.php. Efektivnější by bylo, kdybych ho vložil do externího souboru. Díky tomu by se nemusel pokaždé načítat ze serveru, ale mohl by se uložit do cache paměti. Přímo do kódu stránky jsem ho vložil kvůli té části skriptu, který upravuje rozměr pásu v hlavičce, protože parametry jsou generovány php skriptem (ten by v externím souboru nemohl být).

4.1.5. Silueta policisty Pohyb siluety policisty je zajišťován také JavaScriptem. Při načtení objektu je parametrem onload spuštěna funkce ukaz_policajta('2'). ukaz_policajta('2') Parametr 2 znamená, že se objeví na pravé straně. Fuknce vysune obrázek a opět ho skryje, následně vygeneruje náhodně číslo od 0 do 2. Toto číslo znamená, kde se obrázek objeví, 0 = vlevo, 1 = nahoře, 2 = vpravo. Pak se opět zavolá volá tato funkce s vygenerovaným parametrem.

17

4.2. Instalační část Podrobný popis instalace systému je popsán v přiložené dokumentaci, viz. A. Dokumentace – instalační část.pdf Při přípravě instalace systému jsem počítal s tím, že jii bude provádět nejspíš správce serveru, nebo jiná osoba, která má alespoň základní technické znalosti. To se týká hlavně požadavků na systém. Je potřeba aby na serveru běžela správná verze PHP, MySQL serveru a aby byla v APACHi povolena knihovna GD10, kterou v aplikaci používám pro zmenšování nahrávaných fotografií. Neméně důležité je také správně nastavit přístupová práva pro jednotlivé knihovny, ale přišlo mi, že rozebírat i tuto problematiku je nad rámec instalační dokumentace.

4.2.1. Požadavky na systém • • •

Apache11 2.0.55 – povolený modul GD PHP verze 5.1.1 MySQL databáze verze 4.1.16

Prvotní krok instalace je nakopírování celé adresářové struktury na server do požadovaného adresáře. Dalším krokem je nastavení parametrů pro přihlášení k databázi. Tyto parametry jsem oddělil od kódu uložením do samostatného souboru data.php ve složce data.

OBRÁZEK 7 - SOUBOR DATA/DATA.PHP

Parametry jsou $se – adresa MySQL serveru, $us – uživatelské jméno, jméno $pa heslo, $db – jméno databáze, databáze $prefix – prefix pro tabulky Prefix pro tabulky znamená to, že před jméno jméno každé tabulky v databázi vloží tento parametr. Je to pro případ, že by tato aplikace používala stejnou databázi jako jiná aplikace (u některých hostingů poskytují jen jednu databázi). V systému používám například tabulku se jménem UZIVATELE a zrovna u ní je velká šance, že bude použita i v jiném systému, pak by mohlo dojít k různým kolizím. Poté již stačí spustit soubor index.php, který je v kořenovém adresáři aplikace. Ten zkontroluje, zda již existuje tabulka UZIVATELE s daným prefixem. Pokud ne,

10

Knihovna GD – open source knihovna pro dynamické vytváření obrázků. Apache - Apache HTTP Server je softwarový webový server s otevřeným kódem pro Linux, BSD, Microsoft Windows a další platformy. 11

18

zná, že jde o první spuštění a nabídne uživateli možnost založit databázi a vytvořit pozná, adresářovou strukturu. Tyto operace provádí skript mysql_tabulky.php. mysql_tabulky.php

4.2.2. Soubor mysql_tabulky.php Tento skript obsahuje dvě důležité funkce, které vytvářejí vytváře í a odstraňují tabulky t z databáze. vytvor_tabulku() a odstran_tabulku(). Při vytváření tabulek dostane funkce jako jeden z parametrů také $sql,, který obsahuje informace o parametrech tabulky. Je to vlastně část SQL příkazu, ke kterému je následně připojen příkaz „CREATE TABLE“ a jméno tabulky s přidaným prefixem. Funkce na odstranění tabulek zde slouží pro případ, případ kdy by bylo potřeba aplikaci smazat, nebo jen přeinstalovat – smazat informace v databázi.

OBRÁZEK 8 - FUNKCE PRO VYTVÁŘENÍ A ODSTRAŇOVÁNÍ TABULEK Z DATABÁZE

V první části tohoto skriptu se zkontroluje, zda z již existuje databáze tabáze, pokud ne, tak ji vytvoří. Poté následuje následuj vytvoření všech tabulek v databázi.. Každá z tabulek je nejprve smazána (pokud již existuje), existuje) následně je znovu vytvořena.

19

OBRÁZEK 9 - VYTVOŘENÍ TABULKY V DATABÁZI

Jsou vytvořeny tabulky UZIVATELE, MESTA, MESTSKE_CASTI, OZNAMENI, KODY, AKTUALITY a TEXTY. Následně je do tabulky UZIVATELE vložen záznam obsahující přihlašovací informace pro prvotního administrátora s loginem admin a heslem admin. Tyto údaje jsou jen provizorní a slouží k vytvoření ostatních administrátorských účtů. Pro bezpečnost systému stému je potřeba následně tento profil vymazat! Dále je do tabulky TEXTY vložen úvodní text. Ten bude možné později upravit v administrační sekci. Na závěr skript vytvoří v kořenovém adresáři následující složky – /fotky, /fotky/y_120, /fotky/y_480 a /vypisy. /vypisy. Složky /y_120 a /y_480 budou obsahovat zmenšeniny vkládaných fotek. Y – znamená, že výchozí pro zmenšování bude výška a následující číslo určuje hodnotu. Použil jsem tyto dvě zmenšeniny, protože vyhovují grafickému provedení webu. Složky jsou vytvářeny pomocí funkce mkdir(). Jako jeden z parametrů se zadává číslo, které se udává v oktalové (osmičkové) soustavě, tj. absolutním zápisem nebo pomocí tzv. symbolického zápisu. zápisu Nejčastěji se zapisuje absolutním zápisem jako třímístné číslo, kdy první číslice udává práva vlastníka, druhá práva skupiny a třetí pak práva ostatním, přičemž operace spuštění souboru přispívá do celkového součtu vahou 1, zápis vahou 2 a čtení vahou 4. Tím vznikají různé kombinace přístupových práv, jejichž přehled je uveden v následující ující tabulce (r-čtení, w-zápis, x-spouštění):

20

Hodnota 0 1 2 3 4 5 6 7

právo ----x -w-wx r-r-x rwrwx TABULKA 1

V této části jsem narazil na problém, že vždy když se vytváří adresář pomocí funkce mkdir() s parametrem pro práva s hodnotou 777 (tzn. Pro všechny povoleno vše), tak se adresář vytvoří, ale má nastavená práva 755. To znamená, že práva pro zápis má pouze vlastník a ostatní mohou jen prohlížet a spouštět. Pak by nastala situace, že by skript chtěl vytvořit do takové složky např. fotografii, ale neměl by na to dostatečná práva. Tento problém jsem vždy řešil ručním nastavením práv složkám na 777 a tak je to i u této aplikace. Nyní jsem zpětně objevil důvod, proč se toto stává a tím pádem i efektivnější řešení. Apache má defaultně nastavenou oktalovou masku 022, kterou používá při každé změně práv pomocí php skriptu, tj. i při vytvoření složky. Když tuto masku použije na práva 777, vznikne z toho 755. Řešení je jednoduché, stačí před vytvářením složek odstranit tuto masku pomocí funkce umask(0000);

4.2.3. Nastavení parametrů pro odesílané maily Systém obsahuje funkci na rozesílání e-mailů při různých operacích. Jsou zde následující typy mailů: • • • •

Mail s autorizačním kódem pro potvrzení registrace - pro uživatele Mail pro administrátora, s informací o registraci nového uživatele Mail odeslaný po autorizaci uživatele administrátorem - pro uživatele Mail odeslaný po přidání nového oznámení - pro policejní útvar

Přednastavení těchto mailů je možné v souboru data/kontaktni_udaje.php, který obsahuje i e-mailovou adresu, ze které budou maily odesílány a adresu webu. Tento soubor je následně připojen ve funkci pro odesílání e-mailů a podle parametru je vybrán potřebný vzor mailu. V případě, kdy bude e-mail obsahovat nějaký odkaz generovaný v závislosti na daném problému, je mail rozdělen do dvou částí a odkaz bude připojen mezi ně.

21

4.2.4. Jiné možnosti instalace a nastavení Při tvorbě instalace a nastavení dalších údajů bylo na výběr z více možností. Např. instalace mohla být víc komplexněji pojatá, tzn. že by byla ještě nějaká aplikace, která by se postarala o nakopírování souborů a adresářů na server, nastavení údajů pro databázi by bylo formou GUI, nebo jen formou HTML vyplněním formuláře. Instalace by potom byla jistě jednodušší a rychlejší, ale přišlo mi to zbytečné, protože ji bude provádět stejně někdo, kdo bude mít na starosti server, takže počítám, že pro něj tato instalace bude jednoduchá. Další část, kterou by bylo možné udělat efektivněji je nastavování předdefinovaných e-mailů. Nyní se nastavují v souboru, ke kterému má přístup pouze ten, kdo bude mít přístup na FTP, což bude nejspíš správce. To znamená, že se e-maily jednou nastaví a tak zůstanou. Kdyby se pro uložení těchto informací použila databáze, tak by je pak šlo jednoduše editovat z administračního prostředí. Znamenalo by to ale také odpovídající editor, který by umožňoval automatické vložení předdefinovaných odkazů a další možná nastavení. Zvolil jsem možnost ukládání do souboru, protože mi přišla dostačující. Také by se dal lépe propracovat soubor mysql_tabulky.php, respektive vytvořit část v administraci, které by umožňovala případné smazání některé celé tabulky. To by mělo využití pouze při testování systému, nebo při zkušební instalaci.

22

4.3. Uživatelská část Podrobný popis uživatelské části je popsán v přiložené dokumentaci, viz. C. Dokumentace - uživatelská atelská část.pdf. část.pdf Do uživatelské části spadají veškeré funkce a možnosti, které se nabízejí uživateli aplikace. V tomto případěě je uživatelem aplikace osoba, která chce do systému přidávat nová oznámení a prohlížet výpisy oznámení u jednotlivých měst. Prohlížet výpisy může kdokoli i bez registrace a přihlášení do systému. Pokud chce někdo vložit vlastní oznámení, tak musí projít systémem registrace, a následně se přihlásit.

4.3.1. Registrace Registrace slouží k vytvoření nového uživatelského účtu. Pro její správné vyřízení musí být splněno několik kroků.

Postup registrace • • • •

Vyplnění formuláře – správné zadání údajů Odeslání formuláře Potvrzení tvrzení autorizačního kódu odeslaného na e-mail e Potvrzení registrace administrátorem

4.3.1.1. Vyplnění formuláře Na registrační formulář se lze dostat kliknutím na odkaz registrace, registrace který je v přihlašovací části v hlavičce.

OBRÁZEK 10 - PŘIHLAŠOVACÍ ČÁST V HLAVIČCE

Každý, kdo se chce registrovat do systému, s se registruje k určitému městu. Tato vlastnost je zde z toho důvodu, aby o přijetí uživatelů do systému rozhodovali odpovídající administrátoři měst. V této verzi aplikace je však nastaveno, že o přijetí rozhodují všichni administrátoři a to z důvodu dův urychlení

23

registrace. Do budoucna nebude problém přejít ke způsobu schvalování, který jsem uvedl.

OBRÁZEK 11 - REGISTRAČNÍ FORMULÁŘ

Uživatel při registraci vyplňuje následující povinné údaje: • Nick • Heslo • Kontrola hesla • Jméno • Příjmení • Telefon • E-mail Jako nepovinné údaje zde jsou: • Motivace • Odkud jste se dozvěděli o tomto systému Povinných údajů je zde dost a to z toho důvodu, kdyby bylo potřeba doplnit nějaké oznámení, tak aby to bylo možné. Tyto údaje jsou přístupné pouze hlavním administrátorům. Administrátoři měst, kteří mohou kontrolovat kon 24

jednotlivá oznámení mají zobrazený pouze Nick uživatele. Tím pádem jim je do jisté míry zajištěna anonymita. Ještě by určitě bylo dobré k registraci přidat texty popisující tento způsob zachování jejich anonymity, protože na první pohled tato registrace vůbec nevypadá jako anonymní.

4.3.1.2. Odeslání formuláře a kontrola údajů Po odeslání registračního formuláře proběhne kontrola zadaných údajů. Probíhá kontrola následujících údajů: • Zda bylo vybrané město • Zadání nicku • Kontrola povolených znaků v nicku (pouze písmena a číslice) • Zadání hesla • Zadání kontroly hesla • Totožné zadání hesla a kontroly hesla • Zadání e-mailu • Zadání jména, příjmení a telefonu • Kontrola nicku, zda již neexistuje v databázi Pokud jsou nalezeny nějaké chyby, tak jsou vypsány a zobrazen odkaz na opravení zadaných údajů. Tento odkaz zobrazí zpět registrační formulář s vyplněnými údaji. Tyto údaje se formuláři předávají jako parametry v URL. Další možnost jak by se dalo řešit toto předávání parametrů by bylo pomocí sessions, formuláře se skrytými poli, nebo přes databázi. Formu předávání přes URL jsem zvolil, protože se zde předávají relativně krátká data a není třeba řešit složitější způsob předávání. Jediný problém by mohl nastat u položky „Motivace“, jelikož tak je zadávána formou TEXTAREA a nemá omezenou maximální délku. Ale jelikož je maximální povolená délka URL cca 4kB, tak je tento problém zanedbatelný.

4.3.1.3. Potvrzení autorizačního kódu odeslaného na e-mail Pokud projde odeslaný formulář kontrolou, tak jsou údaje o uživateli uloženy do databáze do tabulky UZIVATELE a parametr stav uživatele je nastaven na nepotvrdil_kontakt. V této chvíli je jeho účet zatím nefunkční, tzn. nemůže se ani přihlásit do systému. Současně se pomocí funkce generuj_kod(), vygeneruje náhodný kód o délce 15 znaků. Tento kód obsahuje číslice a malá a velká písmena a je uložen do tabulky KODY společně s id nového uživatele (které je vytvořeno v tabulce UZIVATELE autoinkrementací). Na e-mail uživatele je odeslána předdefinovaná zpráva společně s odkazem obsahujícím následující kód. Tvar odkazu: $adresa_webu."?str=registrace&akce=potvrzeni&kod=".$kod 25

$adresa_webu – je URL adresa webového portálu (i s http://www...) str – odkazuje na stránku s registrací akce – znamená, že se má provést potvrzení kódu kod – $kod – tento parametr bude vygenerovaný kód Jakmile si uživatel přečte e-mail a otevře odkaz, proběhne kontrola zda kód existuje v databázi. Pokud kód existuje, tak systém načte z databáze k němu přiřazený identifikátor uživatele. Z tabulky KODY je záznam s tímto kódem vymazán a u uživatele je v tabulce UZIVATELE nastaven parametr stav na hodnotu neautorizovany. Nyní se uživatel již může přihlásit do systému a přidávat oznámení. Tyto oznámení ale budou pouze zobrazena na webu a nebudou odesílány upozornění na policii (uživatel je na tuto skutečnost upozorněn). Tento postup je z důvodu zabránění zdiskreditování systému. Následně systém odešle e-mail administrátorovi města, ke kterému se uživatel registroval s informací, že je nový registrovaný uživatel, který čeká na autorizaci a vypíše mu jeho registrační údaje, podle kterých administrátor zváží jeho autorizaci.

4.3.1.4. Potvrzení registrace administrátorem Jakmile administrátor rozhodne o autorizaci uživatele, je mu odeslán e-mail s výsledkem rozhodnutí. Pokud je přijat do systému, tak je parametr stav u jeho účtu nastaven na hodnotu aktivni a nyní může plně využívat služeb systému.

4.3.2. Přihlášení Aby mohl uživatel přidávat nová oznámení, tak je potřeba, aby se přihlásil do systému. Přihlásit se mohou pouze uživatelé, kteří mají v databázi uložený parametr stav s hodnotou neautorizovany nebo aktivni. Pokud má uživatel nastaveno nepotvrdil_kontakt (pravděpodobně jde o neplatnou registraci – např. nějakým robotem) tak mu přihlášení nebude povoleno a vypíše se mu chyba. Samotná kontrola přihlašovacích údajů probíhá následovně: • • • •

Uživatel vyplní nick a heslo ve formuláři umístěném v hlavičce webu Formulář odešle data na stránku index.php s parametrem str=login Údaje jsou zkontrolovány s databází Přihlášen/nepřihlášen

Podrobněji viz. Kapitola 4.1.3 Přihlašování do systému

26

4.3.3. Přidání nového oznámení Pokud je uživatel přihlášen do systému, tak je mu v levém menu zobrazena položka „Přidat oznámení“. Pokud klikne na tuto možnost, tak se mu zobrazí formulář pro přidání nového oznámení. V této části systém kontroluje parametr stav uživatele. Pokud má uživatel nastaven stav na hodnotu vyrazen,, tak ho informuje, že byl vyřazen ze systému systém a dále ho nepustí.

4.3.3.1. Zadání ní údajů Jako první musí vybrat město, ke kterému chce oznámení přidat. Po výběru města je zobrazena další část formuláře.

OBRÁZEK 12 - FORMULÁŘ NA PŘIDÁNÍ NOVÉHO OZNÁMENÍ

27

Povinné údaje: • SPZ vozidla – pokud je vybrána možnost SPZ neznámá, tak je místo SPZ povinná fotografie • Popis místa • Datum zjištění přestupku • Čas zjištění přestupku Nepovinné údaje: • Městská část • Značka a typ vozidla • Fotografie • Možnost neodesílat zprávu na policii

4.3.3.2. Kontrola zadaných údajů Kontrola správnosti zadaných údajů je zde kontrolována stejným způsobem jako při registraci uživatele – viz. Kapitola 4.3.1.2 Odeslání formuláře a kontrola údajů

4.3.3.3. Nahrání fotky Pokud byla ve formuláři vybrána fotografie, tak je pomocí funkce move_uploaded_file() 12 nahrána do adresáře /fotky. Jméno souboru je odvozeno od parametrů přidaného oznámení, má tvar – [id_mesta]-datumčas.jpg. Díky tomu je zde opravdu velmi malá pravděpodobnost, že by se nahrávali dvě fotky se stejným jménem. Zde zůstane uložena v plné velikosti. Následně jsou vytvořeny zmenšeniny fotky pomocí funkce vytvor_zmenseniny(). Tuto funkci používám pro vytváření zmenšenin obrázků. Jako vstupní parametr má mj. výchozí stranu a rozměr výchozí strany. Výchozí strana může být buď x – šířka nebo y – výška. Rozměr výchozí strany bude výsledný rozměr této strany u hotové zmenšeniny. Pro samotné vytvoření zmenšeniny používám GD knihovnu, která musí být na serveru zapnuta. V opačném případě bude vypsána chyba, že nelze vytvořit GD image stream. (A pravděpodobně i chyby, že PHP nezná funkci imagecreatefromjpeg()13 a další… ). Jsou vytvořeny zmenšeniny dvě, obě s výchozí stranou – y. Jedna má výšku 120px a druhá 480px. Ty jsou poté používány ve výpisu oznámení.

12 13

move_uploaded_file() – funkce PHP sloužící k přesunu nahraných souborů imagecreatefromjpeg() – funkce GD knihovny, vytvoří obrázek ze souboru nebo URL

28

OBRÁZEK 13 - FUNKCE VYTVOR_ZMENSENINY() NINY()

4.3.3.4. Uložení do databáze Před uložením do databáze jsou vkládaná data ošetřena. Hodnoty Hod „Značka a typ“, „SPZ“ a „Popis „Pop místa“ jsou zpracovány funkcemi addslashes()14 a strip_tags() 15. Tyto opatření slouží k zabezpečení správnosti zobrazení výpisů a proti útoku na databázi. databázi Dále je upravena zadaná SPZ na jednotný formát. Výsledný formát SPZ SP je ABC1234. Jsou z ní odstraněny veškeré znaky jako mezery, pomlčky, nebo jiné oddělovače. Po provedení těchto úprav je uložen záznam do tabulky OZNAMENI obsahující veškeré údaje o oznámení, jméno fotky a její rozměry.

4.3.3.5. Odeslání e-mailů e policii Po uložení ní do databáze si systém načte kontakty na policii, které jsou uloženy u daného města nebo městské části a připraví zprávu, kterou na ně odešle. 14 15

addslashes() – funkce PHP, přidá lomítka před nebezpečné znaky strip_tags() – funkce PHP, odstraní případné HTML tagy z textu

29

Tato zpráva obsahuje detaily přestupku a přiloženou fotografii (pokud byla vložena). Zpráva obsahuje také odkaz na dané oznámení ve výpisu zpráv na webu. K této zprávě je připojen předdefinovaný začátek a konec ze souboru /data/kontaktni_udaje.php. Na závěr je zkontrolováno, jestli uživatel, který zprávu přidával má nastavenou hodnotu parametru stav na aktivni a zda nebylo zaškrtnuto ve formuláři na přidání oznámení „Neodesílat zprávu na policii“. Pokud projde kontrola bez problémů, tak je zpráva odeslána na všechny kontakty uvedené u daného města nebo městské části.

30

4.3.4. Výpis oznámení Výpis oznámení slouží k zobrazení zení jednotlivých oznámení o přestupcích, které byly uloženy do systému. K těmto výpisům mají přístup všichni uživatelé, tzn. i ti, kteří nejsou registrováni do systému. Oznámení je možné třídit podle měst a městských částí zobrazených v menu po levé straně, ně, nebo pomocí formuláře, který je zobrazen na vrchu výpisu oznámení.

OBRÁZEK 14 - TŘÍDĚNÍ OZNÁMENÍ PODLE POD MĚST A MĚSTSKÝCH ČÁSTÍ

U každého oznámení se vypisují všechny údaje, které byly zadány při jeho vkládání do systému. Navíc je ještě v pravé části oznámení zobrazen nick uživatele, který oznámení přidal. Tato Tato možnost byla přidána na přání zadavatele, dle mého názoru by tam být nemusela, možná že i neměla. Když se uživatele do systému registrují, tak si dost často dávají přezdívku dost podobnou svému jménu nebo příjmení a podle této skutečnosti by je bylo možné možné identifikovat. Pak by systém ztratil anonymitu, kterou již jeho název zaručuje. V tomto případě bych doporučoval doplnit nějaké doprovodné texty k registraci, které by uživatele varovaly před touto skutečností, skutečností a uživatelé by si pak mohli zvolit přezdívku, přezdí která by se k nim nijak nepojila. Ve výpisu oznámení jsou zobrazeny fotografie, které byly přidány k oznámením, jako zmenšeniny s výškou 120px. Po kliknutí na fotografii se na jejím místě zobrazí druhá zmenšenina a to s výškou 480px, kterou je možné zavřít kliknutím na ni. Tento způsob zobrazování je aplikován pomocí JavaScriptu a CSS stylů. Větší fotka je zobrazena ve skrytém poli, které se zobrazí po kliknutí na fotku. Jelikož tyto zmenšeniny mají relativně malou velikost, cca 70kB, tak se načítají rovnou při načítání stránky. Sice to trochu zpomalí načítání, ale potom je již prohlížení těchto fotek rychlé. V opačném případě, kdyby bylo potřeba, aby se stránka s výpisem zobrazila rychle, dalo by se načítání větších zmenšenin ošetřit také JavaScriptem, který by se spustil až po kliknutí na danou fotku.

31

Aby byla stránka funkční i bez JavaScriptu, criptu, tak je pod fotkou ve výpisu odkaz na fotku v plné velikosti. Tento odkaz je také možné využít, když bude zapotřebí zobrazit fotku v plné kvalitě, aby byly dobře dobře vidět detaily (např. SPZ).

4.4. Administrační část Do administrační části mají přístup pouze uživatelé, kteří mají v databázi v tabulce UZIVATELE nastavený parametr prava na hodnotu admin nebo admin_mesta. admin_mesta Vstup do administrace je možný po přihlášení do systému systému stejným způsobem, způsobem jako obyčejní uživatelé a následně kliknutím na odkaz v levém menu Administrace. Administrace

OBRÁZEK 15 - HLAVNÍ STRÁNKA PO PŘIHLÁŠENÍ PŘ ADMINISTRÁTORA

Celá administrační sekce je rozdělena do následujících kategorií: • • • • •

Úvod Oznámení Města Uživatelské účty Novinky

Po vstupu do administrace je zobrazena zobraz kategorie úvod.. Pokud má uživatel práva hlavního administrátora, tak mu je povolen přístup do všech těchto kategorií. Administrátoři měst mohou pouze do kategorie úvod a oznámení. Systém administrace je řešen podobně jako systém stránek v souboru index.php. inde Při vstupu do administrace je zobrazena stránka stranky/administrace.php, stranky/administrace.php která vypíše nadpis a horní menu administrace a následně je připojen soubor podle parametru kategorie, který je předáván přes URL adresu stránky. Např. parametry zobrazené za 32

adresou webu pro administraci s kategorií oznámení bude ?str=administrace&kategorie=oznameni str=administrace&kategorie=oznameni.. Pokud není zadán žádný parametr kategorie, tak bude zobrazena kategorie úvod. úvod

4.4.1. Tabulka s výpisem dat Pro přehledný výpis dat jsem zvolil výpis tabulkou se zkrácenými zkrácenými daty. Tzn. , že pokud jsou v tabulce nějaká data, která jsou delší než přednastavený limit, tak jsou pomocí funkce zkrat_retezec(), zkrat_retezec() zkrácena na tuto délku. V tabulce jsou potom zobrazena zkrácená data a při najetí myší nad toto políčko, je pomocí JavaScriptu Jav zobrazeno pole přes tabulku, ve kterém je zobrazen celý text. Díky tomuto systému zobrazování je možné přehledně vypsat všechny položky tak, že je každé pouze na jednom řádku a bez jakéhokoli klikání zobrazit všechny potřebné údaje.

OBRÁZEK 16 - FUNKCE ZKRAT_RETEZEC() ZK

OBRÁZEK 17 - TABULKA S VÝPISEM DAT – ZOBRAZENÍ DELŠÍHO TEXTU TE

U zobrazování zování fotek je to řešeno podobným způsobem. Pokud oznámení obsahuje fotku, tak je v odpovídajícím sloupci vypsáno ANO a při najetí kurzorem nad toto pole se zobrazí zmenšená fotka.

33

OBRÁZEK 18 - TABULKA S VÝPISEM DAT – ZOBRAZENÍ FOTKY

Poslední sloupec tabulky jsou vždy možnosti, kde jsou následující ikony: ikon • - editace položky • - smazání položky • - posunutí položky nahoru • - posunutí položky dolů

34

4.4.2. WYSIWYG editor Pro jednodušší úpravu některých vkládaných textů jsem zde použil WYSIWYG editor, konkrétně OpenWYSIWYG (3), který je vydán pod LGPL Open Source licencí. Výhoda tohoto editoru je v možnosti formátování textu vkládaného v HTML formátu bez potřeby znalostí tvorby HTML kódu. Tzn. že uživatel píše a formátuje text v GUI prostředí a editor následně vygeneruje HTML kód. Tento Ten editor je založen na JavaScriptu, proto je nutné, aby uživatelé používající administraci měli v prohlížeči zapnutý JavaScript. Editor je využitý pro editaci úvodního textu a vkládání novinek.

OBRÁZEK 19 - WYSIWYG EDITOR

OpenWYSIWYG editor má následující fuknce: • Výběr fontu • Výběr ýběr velikosti písma • Tučný text, kurzíva a podtržení • Dolní a horní index • Zarovnání – vlevo, na střed, vpravo • Seznam – nečíslovaný, číslovaný • Posunutí bloku vlevo, vpravo • Barva textu • Barva pozadí • Vyjmout, kopírovat, vložit • Krok zpět/vpřed v historii • Interaktivní tivní vkládání tabulek • Vkládání obrázků • Vkládání hypertextových odkazů • Zobrazení výsledného HTML kódu Nevýhodou tohoto editoru je to, že výsledný kód, kód který vytváří, vytváří není moc přehledný a ani moc čistý. Kdyby takové formátování měl provést nějaký HTML kodér, tak by to udělal asi jednodušeji než tento editor. 35

Jelikož zde slouží editor pouze pro jednoduchou editaci (např. vkládání odkazů), tak pro tyto účely vyhovuje.

4.4.3. Úvod Úvodní stránka administrace se zobrazuje jak adminům, tak adminům měst. Je zobrazena jako první stránka po přihlášení do administrace. Stránka je rozdělena na dvě části: • Potvrzení autorizace • Úvodní text

4.4.3.1. Potvrzení autorizace V této části, jsou zobrazeni uživatelé, kteří se registrovali do systému a potvrdili svůj mailový kontakt. Nyní čekají na potvrzení autorizace od administrátora. Administrátor rozhodne na základě „motivace“, kterou uživatel vyplnil při registraci. Pokud klikne na ikonu , tak autorizaci potvrdí, naopak pomocí , může autorizaci zamítnout. V případě, že byla autorizace potvrzena, je uživateli v databázi nastaven parametr stav u jeho profilu na hodnotu aktivni. Následně je na jeho emailovou adresu odeslána předdefinovaná zpráva, která ho informuje o úspěšné autorizaci. Pokud admin autorizaci zamítne, tak se parametr stav nastaví na hodnotu vyřazen a to znamená, že je profil zablokován a uživatel se ani nemůže přihlásit do systému. I v tomto případě je uživateli odeslána předdefinovaná zpráva, která ho informuje o zamítnutí autorizace.

4.4.3.2. Úvodní text Úvodní text je editován pomocí WYSIWYG editoru, viz. Kapitola 4.4.2 WYSIWYG editor. Text je ukládán v HTML formátu do databáze do tabulky TEXTY jako položka uvod. Tento text je zobrazován na úvodní stránce webu.

4.4.4. Oznámení V části oznámení je zobrazen výpis oznámení o přestupcích. Tento výpis je možné třídit podle měst a městských částí. Do této kategorie mají přístup i administrátoři měst, ale ti mají možnost třídit pouze podle městských částí. Město mají na pevno vybrané a tím pádem zobrazeny pouze oznámení týkající se jejich měst. Je zde i možnost udělat výpis dat do souboru. Pokud admin zvolí tuto možnost, tak jsou data uložena do souboru ve formátu .csv do složky /vypisy/ se jménem ve tvaru - oznameni_rok mesic den hodina minuta vterina. 36

Administrátoři mají možnost editovat oznámení. Např. když by bylo potřeba doplnit fotku k oznámení, tak stačí, když kliknou na ikonu u daného oznámení a můžou tam fotku přidat. Mají možnost měnit všechny údaje kromě města, města ke kterému bylo oznámení vloženo. Pokud u oznámení je již fotka přiložena, je zde možnost ji smazat.

4.4.5. Města Administrace měst slouží k vytváření, mazání a třídění měst a městských částí. Pro vytvoření nového města je zde odkaz „Přidat nové město“. Následně se vyplníí Jméno města, název policejního útvaru a kontakty. Kontakty jsou zde tři, pokud budou vyplněny všechny, tak budou e-maily e maily odesílány na všechny. Je zde i možnost Odpovídající admin, admin, kde jsou vypsáni všichni administrátoři a administrátoři měst. Tato položka položka je povinná, pokud nebude zvolena, tak systém nahlásí chybu.

OBRÁZEK 20 - ADMINISTRACE MĚST

Ve výpisu měst slouží název města jako odkaz na administraci městských částí. Navíc je tu možnost pomocí ikonek a měnit pořadí měst. Podle tohoto pořadí budou města vypisována na hlavní stránce v levém menu a ve všech ostatních výpisech. Pokud admin rozklikne odkaz se jménem města, tak se dostane do administrace městských částí daného města, ve které má možnost přidávat městské části, upravovat je, a nastavovat pořadí, pořadí ve kterém budou zobrazeny.

4.4.6. Uživatelské účty Administrace uživatelských účtů je přístupná pouze hlavním administrátorům. Je rozdělena do tří částí: • Výpis adminů • Výpis adminů měst • Výpis uživatelů

37

OBRÁZEK 21 - ADMINISTRACE UŽIVATELSKÝCH UŽIVATE ÚČTŮ

Uživatelské profily jsou zde roztříděny podle práv uživatelů. Práva jsou posuzována podle parametru prava v databázi v tabulce UZIVATELE u jejich profilu. U každého profilu jsou dvě ikony – editovat a smazat . V editaci je možné měnit údaje vložené uživatelem (mimo hesla – to není ani zobrazeno) a také práva uživatele. Tímto způsobem je možné vytvořit další administrátory. Ti se zaregistrují jako obyčejní uživatelé a hlavní admin jim pak nastaví vyšší práva. Možnost smazání účtu neznamená úplné vymazání profilu z databáze, ale pouze nastavení parametru stav na hodnotu vyrazen. To je z důvodu, kdyby bylo někdy zapotřebí vrátit zpět smazaný profil. Nepočítá se ale s tím, že je to standardní operace.

4.4.7. Novinky V kategorii novinky je možné přidávat aktuality, které jsou následně zobrazovány na hlavní stránce webu. Přidávání novinek novinek je pomocí WYSIWYG editoru (3), takže je možné vkládat at formátovaný text, nebo např.odkazy. např.odkazy. U každé novinky se ukládá nick admina, který ji přidal. Je možné později novinky editovat nebo mazat.

OBRÁZEK 22 - ADMINISTRACE NOVINEK

38

5. Závěr Při tvorbě této práce byly využity některé mé zkušenosti a dost nových jsem také objevil. Zdrojové kódy tohoto webu byly psány v rámci semestrálního projektu v listopadu a prosinci 2007. Jelikož jsem v poté v letním semestru absolvoval předmět X36WWW, který vyučuje tvorbu webových stránek, tak nyní vidím zpětně věci, které bych udělal jinak. Hlavní rozdíl by byl v tom, že by byla použita třívrstvá architektura. Web v mojí práci je psán takovým způsobem, že není oddělena aplikační část od databázové a zobrazovací. Pouze oddělení grafiky je zde pomocí kaskádových stylů. Efektivnější by bylo použití nějakého frameworku16, který využívá MVC model17. Pokud by se jednalo o aplikaci odpovídající rozsahu této práce, tak by asi MVC model nebyl nezbytný. Jeho silná stránka by byla v dalších případných rozšířeních systému. Tento systém byl jako pilotní aplikace zaměřen pouze na dopravní přestupky v oblasti parkování. Jeho možné rozšíření, je zvětšit rozsah přestupků, na které by se zaměřoval, a to by samozřejmě znamenalo zásadní úpravy ve funkčnosti aplikace. Mezi nejvýznamnější části práce, které pro mě byly přínosem, bylo určitě prostudování problému přístupových práv k souborům v Unixových systémech. Tím se vyřešil jeden z mých problémů, které nastávaly při vývoji mých předchozích aplikací. Podrobněji je tento problém popsán v kapitole 4.2.2 zabývající se instalací systému. Další problematikou při tvorbě aplikace bylo vytvoření funkce, která bude automaticky vytvářet zmenšeniny vkládaných fotografií. Nakonec bylo využito funkce GD knihovny z PHP, více v kapitole 4.3.3.3 Nahrání fotky. Iterativní způsob, kterým byla tato práce zadávána, pro mě byl novinkou. Práce, na kterých jsem pracoval dříve, byly většinou hned na začátku jasně definované a na základě zadaných požadavků byla vypracována analýza a až poté samotná aplikace. Tento projekt byl definován průběžně a postupně byl dolaďován současně s tvorbou zdrojových kódů a to podílelo na složitějším návrhu aplikace.

16

Framework - softwarová struktura, která slouží jako podpora při programování a vývoji a organizaci jiných softwarových projektů. Může obsahovat podpůrné programy, knihovnu API, návrhové vzory nebo doporučené postupy při vývoji. 17 MVC model- Model-View-Controller, softwarová architektura, která rozděluje datový model aplikace, uživatelské rozhraní a řídicí logiku do tří nezávislých komponent tak, že modifikace některé z nich má minimální vliv na ostatní.

39

Použitá literatura 1. Oživení. o.s. Oživení. Oživení. [Online] 2008. [Citace: 7. červen 2008.] http://www.oziveni.cz. 2. Google. Google Groups. Google. [Online] 2008. [Citace: 7. červen 2008.] http://groups.google.com. 3. openWYSIWYG. Open Source Cross-Browser WYSIWYG Editor. Open Webware. [Online] 2008. [Citace: 7. červen 2008.] http://www.openwebware.com/. 4. Seznam.cz. chmod. Seznam encyklopedie. [Online] 7. prosinec 2007. [Citace: 7. červen 2008.] http://encyklopedie.seznam.cz/heslo/513295-chmod. 5. The PHP Group. Documentation. PHP: Hypertext Preprocessor. [Online] 7. červen 2008. [Citace: 7. červen 2008.] http://www.php.net/docs.php. 6. W3C Consortium. World Wide Web Consortium - Web Standards. W3. [Online] 6. červen 2008. [Citace: 7. červen 2008.] http://www.w3.org/. 7. Bezkorupce.cz. Transparentní samospráva. Bezkorupce. [Online] 16. Květen 2006. [Citace: 7. Červen 2008.] http://www.bezkorupce.cz/samosprava/strategie/1_kap_7.html.

40

Přílohy A. Dokumentace – instalační část.pdf B. Dokumentace - administrační část.pdf C. Dokumentace - uživatelská část.pdf

Obsah přiloženého CD •

• •

Bakalářská práce o PDF o Office 97-03 o Office 2007 Instalace o Zdrojové kódy programu Přílohy o PDF o Office 97-03 o Office 2007

41

42

43

Příloha A Dokumentace – instalační část Portál pro anonymní ohlašování přestupků a porušení zákona policii

Vytvořil: E-mail: Škola: Obor:

Ladislav Janík [email protected] ČVUT – Fakulta elektrotechnická Výpočetní technika – 3. ročník

44

Obsah Portál pro anonymní ohlašování přestupků a porušení zákona policii .......................... 44 Seznam obrázků............................................................................................................... 45 Popis produktu ........................................................................................................... 46 Požadavky na systém.................................................................................................. 46 Doporučená konfigurace serveru .................................................................................... 46 Obsah instalačního balíku ........................................................................................... 46 Instalace systému ....................................................................................................... 48

Seznam obrázků Obrázek 2 - První spuštění ................................................................................................... 48 Obrázek 3 - Vytvoření MySQL tabulek................................................................................. 48 Obrázek 1 - soubor data/data.php ...................................................................................... 48 Obrázek 4 - Vytvoření MySQL tabulek – úspěšná instalace ................................................ 49 Obrázek 5 - Login ................................................................................................................. 49 Obrázek 6 - Administrace – úvodní stránka ........................................................................ 50 Obrázek 7 - soubor data/kontaktni_udaje.php ................................................................... 50 Obrázek 8 - Administrace -> Uživatelské účty ..................................................................... 51 Obrázek 9 - Administrace -> Uživatelské účty -> výpis uživatelů ........................................ 51

45

Popis produktu Jedná se o webový portál, sloužící k oznamování dopravních přestupků policii. Ke každému oznámení je možné vložit i fotografii dokumentující přestupek. Tyto oznámení jsou následně odesílány na email příslušnému policejnímu útvaru a zveřejněny na webu ve výpisu oznámení daného města či městské části. Systém obsahuje administrační část, ve které je možné spravovat jednotlivá města, městské části, uživatelské účty, aktuality a oznámení.

Požadavky na systém Celý portál je založen na technologii PHP a databázovém systému MySQL.

Doporučená konfigurace serveru Apache 2.0.55 – povolený modul GD PHP verze 5.1.1 MySQL databáze verze 4.1.16 Nastavená práva zápisu pro skripty složkám – /fotky/ a /vypisy/

Obsah instalačního balíku •

•

data



data.php kontaktni_udaje.php

- přihlašovací údaje do databáze + nastavení databáze - vzorové šablony pro odesílání emailů




css • levy_dolni_roh.gif • levy_dolni_roh.png • levy_horni_roh.gif • levy_horni_roh.png • login_pozadi.gif • login_pozadi.png • novinky_dolni.gif • novinky_dolni.png • novinky_horni.gif • novinky_horni.png • obsah_cara.png • obsah_pozadi.png • posledni_pozadi.png • pravy_dolni_roh.gif • pravy_horni_roh.gif • pravy_horni_roh.png hlavicka • 01022008890.jpg • 01022008892.jpg • 01022008894.jpg • 01022008896.jpg • 01022008898.jpg • 01022008900.jpg • chodnik2.jpg • chodnik4.jpg • chodnik6.jpg

- obrázky pro kaskádové styly

pics




- obrázky, které jsou zobrazovány v hlavičce webu

46

•

•

• • •

• koleje1.jpg • prechod_srafy_krizovatka2.jpg • zastavka1.jpg
ostatní - další grafiky • logo_oziveni.png • policajt.gif • policajt0.gif • policajt0.png • policajt1.gif • policajt1.png • policajt2.gif • policajt2.png
paticka - loga umístěná v patičce • logo5.jpg • nadace-partnerstvi.jpg • praha.jpg
checked_no.gif
checked_ok.gif
down.gif
edit.gif
trashcan.gif
up.gif proces - skripty sloužící k přihlašování
func.php
kontrola_session.php stranky - jednotlivé stránky webu
administrace.php
administrace_mesta.php
administrace_mestske_casti.php
administrace_novinky.php
administrace_oznameni.php
administrace_ucty.php
administrace_uvod.php
login_chyba.php
mysql_tabulky.php
pridat_oznameni.php
registrace.php
uvod.php
vypis_oznameni.php styly - kaskádové styly
main.css wysiwyg - soubory wysiwyg editoru index.php - hlavní stránka webu

47

Instalace systému 1. zkopírujte celý obsah složky instalace do daného adresáře na serveru

OBRÁZEK 23 - SOUBOR DATA/DATA.PHP

datab v souboru data/data.php 2. nastavte přihlašovací parametry pro databázi 3. Spusťte web zadáním adresy souboru cesta_ke_složce…./index.php /index.php do webového prohlížeče

4. Zobrazí se první spuštění systému. Potvrďte instalaci kliknutím na odkaz ZDE

OBRÁZEK 24 - PRVNÍ SPUŠTĚNÍ

5. Vytvoření oření MySQL tabulek v databázi – dotaz na smazání všech informací v MySQL databázi se týká jenom tabulek vztahujících se k tomuto webu. Je zde pro případnou reinstalaci systému Potvrďte ANO 6.

OBRÁZEK 25 - VYTVOŘENÍ MYSQL TABULEK

48

(napíše že něco nebylo 7. Systém vypíše průběh instalace. Pokud se objeví nějaké chyby (napíše, vytvořeno), tak zkontrolujte nastavení souboru data/data.php a instalaci opakujte. Pokud by se při příštím spuštění systému neobjevila znovu obrazovka „První spuštění“,, můžete instalaci spustit ručně zadáním adresy cesta_ke_složce…./index.php?str=mysql_tabulky /index.php?str=mysql_tabulky

OBRÁZEK 26 - VYTVOŘENÍ MYSQL TABULEK – ÚSPĚŠNÁ INSTALACE

8. Kliknutím na odkaz hlavní stránka v levém menu se dostanete na úvodní stránku strán 9. Přihlaste te se do systému zadáním nicku admin a hesla admin

OBRÁZEK 27 - LOGIN

10. Po přihlášení Vám v levém menu přibudou položky přidat oznámení a administrace. Kliknutím na administrace se dostanete na úvodní stánku správy systému. syst

49

OBRÁZEK 28 - ADMINISTRACE – ÚVODNÍ STRÁNKA

11. Nastavte parametry odchozích mailů v souboru data/kontaktni_udaje.php - nastavte URL adresu webu, jméno zobrazované jako odesílatel e-mailu e mailu a výchozí ee mailovou adresu - upravte avte šablony připravené pro odesílání informativních e-mailů. e mailů. Editujte jen text zobrazený červeně na obrázku 7. !!!

OBRÁZEK 29 - SOUBOR DATA/KONTAKTNI_UDAJE.PHP

50

12. Založte alespoň jedno město - v sekci Administrace v kategorii Města kliknutím na odkaz Přidat nové město. město - vyplňte formulář (povinný je název města a alespoň jeden kontakt) (pokud budete chtít do města rovnou přidat městské části, stačí ve výpisu měst rozkliknout název daného města a městskou část můžete přidat stejným stejný způsobem, jako jste přidali město) 13. Vytvořte si vlastní administrátorský účet . - V sekci Administrace v kategorii Uživatelské účty klikněte na odkaz registrace. - otevře se Vám formulář na registrování uživatelů do systému

OBRÁZEK 30 - ADMINISTRACE -> UŽIVATELSKÉ ÚČTY

- vyplňte požadované informace - po úspěšném odeslání formuláře budete přesměrováni na hlavní stránku - přihlaste se do systému s nickem admin, heslo admin - otevřete sekci Administrace a kategorii Uživatelské účty - ve výpisů uživatelů uvidíte svůj účet

OBRÁZEK 31 - ADMINISTRACE -> UŽIVATELSKÉ ÚČTY -> VÝPIS UŽIVATELŮ

- kliknutím na ikonu ve sloupci Možnosti u vašeho profilu se dostanete do editace profilu - změňte položku Stav na hodnotu aktivní a položku Práva na hodnotu Admin - potvrďte formulář - nyní se Váš profil přesunul mezi administrátorské - smažte profil s nickem admin kliknutím na ikonu ve sloupci loupci Možnosti u tohoto profilu 14. Nyní je systém připraven k použití

51

Příloha B Dokumentace – administrační část Portál pro anonymní ohlašování přestupků a porušení zákona policii

Vytvořil: E-mail: Škola: Obor:

Ladislav Janík [email protected] ČVUT – Fakulta elektrotechnická Výpočetní technika – 3. ročník 52

Obsah Portál pro anonymní ohlašování přestupků a porušení zákona policii .......................... 52 Seznam obrázků............................................................................................................... 53 Popis produktu ........................................................................................................... 54 Popis administrace ..................................................................................................... 54 Úvod................................................................................................................................. 54 Výpis uživatelů čekajících na autorizaci....................................................................... 54 Úvodní text .................................................................................................................. 55 Oznámení ......................................................................................................................... 55 Města ............................................................................................................................... 56 Uživatelské účty ............................................................................................................... 57 Stav uživatele ............................................................................................................... 57 Práva ............................................................................................................................ 58 Novinky ............................................................................................................................ 59

Seznam obrázků Obrázek 1 - Administrace -> menu ...................................................................................... 54 Obrázek 2 - Administrace -> výpis uživatelů čekajících na autorizaci ................................. 54 Obrázek 3 - Administrace -> úvodní text ............................................................................. 55 Obrázek 4 - Administrace -> Oznámení ............................................................................... 55 Obrázek 5 - Administrace -> Města ..................................................................................... 56 Obrázek 6 - Administrace -> Města -> Městské části .......................................................... 56 Obrázek 7 - Administrace -> Uživatelské účty ..................................................................... 57 Obrázek 8 - Administrace -> Uživatelské účty -> editace účtu ............................................ 57 Obrázek 9 - Administrace -> Novinky .................................................................................. 59

53

Popis produktu Jedná se o webový portál, sloužící k oznamování dopravních přestupků policii. Ke každému oznámení je možné vložit i fotografii dokumentující přestupek. Tyto oznámení známení jsou následně odesílány na email příslušnému policejnímu útvaru a zveřejněny na webu ve výpisu oznámení daného města či městské části. Systém obsahuje administrační část, ve které je možné spravovat jednotlivá města, městské části, uživatelské účty, účt aktuality a oznámení.

Popis administrace Do administrace má přístup pouze hlavní administrátor a administrátoři měst. měst Hlavní administrátor má přístup do všech pěti kategorií – Úvod, Oznámení, Oznámení Města, Uživatelské účty a Novinky. Novinky Admin města má přístup pouze do kategorií Úvod a Oznámení (pouze k oznámením, která spadají do jeho města). Pro navigaci v administraci slouží jednoduché menu umístěné pod hlavičkou stránky.

OBRÁZEK 32 - ADMINISTRACE -> MENU

Úvod Toto je úvodní stránka, nka, která je zobrazena po příchodu do sekce Administrace. Administrace

Výpis uživatelů čekajících na autorizaci V této části jsou zobrazeni všichni uživatelé, kteří se zaregistrovali do systému a již potvrdili registraci kliknutím na odkaz, který jim přišel e-mailem. e mailem. Admin může jejich autorizaci potvrdit kliknutím na , nebo zamítnout . - Pokud žádost o autorizaci potvrdí, bude jeho účet uveden do aktivního stavu (tzn. bude moci plnohodnotně přidávat příspěvky). - Pokud žádost zamítne, bude jeho stav změněn na vyřazen a bude vyřazen ze systému

OBRÁZEK 33 - ADMINISTRACE -> VÝPIS UŽIVATELŮ ČEKAJÍCÍCH NA AUTORIZACI CI

54

Úvodní text Zde můžete nastavit text zobrazený na úvodní stránce. Pro editaci textu je použit WYSIWYG editor, díky kterému je možné možné text formátovat. Provedené změny musíte potvrdit tlačítkem Odeslat

OBRÁZEK 34 - ADMINISTRACE -> ÚVODNÍ TEXT

Oznámení V této sekci naleznete všechna oznámení uložená do systému. Pro třídění je možné nastavit filtr jen na výpis ýpis oznámení z jednotlivých měst nebo městských částí. Kterékoliv oznámení je možné upravit - nebo smazat Upravení oznámení lze použít například, při doplnění, či opravení nějakých údajů na žádost uživatele. Nebo také dodatečně připojit fotografii. Další alší možností této kategorie je uložení výpisu do souboru. Po kliknutí na odkaz Uložit výpis do souboru se uloží výpis všech oznámení do složky výpisy v adresáři webu. Data jsou uložena ve formátu CSV, tj. hodnoty oddělené středníkem. Tento soubor je možné prohlížet v libovolném tabulkovém programu. (např. Excel)

OBRÁZEK 35 - ADMINISTRACE -> OZNÁMENÍ

55

Města V kategorii města se zobrazuje výpis všech měst. Údaje u jednotlivých měst je možné editovat kliknutím na ve sloupci možnosti osti u daného města. Město je možné smazat - . Pořadí, ve kterém budou města zobrazena na hlavní stránce v menu je možné upravovat pomocí šipek a .

OBRÁZEK 36 - ADMINISTRACE -> MĚSTA

Po kliknutí na název některého města se dostanete do kategorie městských částí daného města. Máte možnost přidávat nové městské části kliknutím na odkaz Přidat novou městskou část, editovat nebo mazat jednotlivé MČ a určovat jejich pořadí . Pro návrat na výpis všech měst klikněte na odkaz odka Zpět na výpis měst. měst

OBRÁZEK 37 - ADMINISTRACE -> MĚSTA -> MĚSTSKÉ ČÁSTI

56

Uživatelské účty Kategorie Uživatelské účty je rozdělena na tři části – Výpis administrátorů, administrátorů Výpis administrátorů měst a výpis uživatelů. uživatelů Přidání nového ho uživatelského účtu je možné kliknutím na odkaz registrace. registrace Účet bude následně zobrazen ve výpisu uživatelů. Všechny uživatelské účty je možné editovat a mazat .

OBRÁZEK 38 - ADMINISTRACE -> UŽIVATELSKÉ ÚČTY

V editaci uživatelského atelského účtu je možné měnit veškeré údaje o uživateli (mimo hesla), stav uživatele a jeho práva.

OBRÁZEK 39 - ADMINISTRACE -> UŽIVATELSKÉ ÚČTY -> EDITACE ÚČTU

Stav uživatele 1. 2. 3. 4.

Nepotvrdil kontakt Neautorizovaný Aktivní Vyřazen 57

Parametr Stav určuje v jakém stavu je daný uživatelský účet. 1. Nepotvrdil kontakt Tento stav je nastaven po registraci do systému. Uživateli je odeslán na e-mailovou adresu mail s potvrzovacím kódem. V tomto stavu se uživatel ještě nemůže přihlásit do systému, a tím pádem také nemůže přidávat oznámení 2. Neautorizovaný Po potvrzení registrace otevřením odkazu s potvrzovacím kódem, který byl odeslán uživateli na jeho emailovou adresu přejde jeho účet do tohoto stavu. Nyní může přidávat oznámení, ale ta budou jen zveřejněna na webu, ale nebudou odesílána na daný policejní útvar. Uživatelský účet bude zobrazen ve výpisu uživatelů čekajících na autorizaci po přihlášení administrátora nebo admina nějakého města. Ten rozhodne o autorizaci. 3. Aktivní Uživatelský profil je plně funkční, může přidávat oznámení a ta budou odesílána na policejní útvar 4. Vyřazen Pokud administrátor nastaví tento parametr, tak zablokuje uživatelský účet. Tzn. uživatel se bude moci přihlásit do systému, ale nemůže již přidávat další oznámení.

Práva 1. Admin 2. Admin města 3. Uživatel Parametr Práva určuje, do jakých sekcí systému může přistupovat. 1. Admin Má přístup do všech kategorií, je správcem celého systému 2. Admin města Má na starosti nějaké město. V administraci v kategorii Oznámení má zobrazeny pouze oznámení přidané k danému městu. Když se někdo zaregistruje do systému a přiřadí se k jeho městu, tak bude informován e-mailem, že uživatel čeká na autorizaci (tuto autorizaci může také provést jiný admin) 3. Uživatel Uživatel systému může přidávat oznámení.

58

Novinky Kategorie Novinky slouží k přidávání a editaci aktualit, které jsou následně zobrazovány na úvodní stránce webu. Přidání novinky je možné kliknutím na odkaz Přidat novinku. Editace a mazání novinek je pomocí ikon a ve sloupci možnosti. Přidávání vání novinek je pomocí WYSIWYG editoru, díky kterému je možné použít formátovaný text. Každá novinka má nadpis a text.

OBRÁZEK 40 - ADMINISTRACE -> NOVINKY

59

Příloha C Dokumentace – uživatelská část Portál pro anonymní ohlašování přestupků a porušení zákona policii

Vytvořil: E-mail: Škola: Obor:

Ladislav Janík [email protected] ČVUT – Fakulta elektrotechnická Výpočetní technika – 3. ročník 60

Obsah Portál pro anonymní ohlašování přestupků a porušení zákona policii .......................... 60 Seznam obrázků............................................................................................................... 61 Popis produktu ........................................................................................................... 62 Popis uživatelské části ................................................................................................ 62 Registrace ........................................................................................................................ 64 Přidání oznámení ............................................................................................................. 65

Seznam obrázků Obrázek 1 - Hlavní stránka ................................................................................................... 62 Obrázek 2 - Hlavní stránka – novinky .................................................................................. 63 Obrázek 3 - Hlavní stránka – novinky .................................................................................. 64 Obrázek 4 - Hlavní stránka – novinky .................................................................................. 65

61

Popis produktu Jedná se o webový portál, sloužící k oznamování dopravních h přestupků policii. Ke každému oznámení je možné vložit i fotografii dokumentující přestupek. Tyto oznámení jsou následně odesílány na email příslušnému policejnímu útvaru a zveřejněny na webu ve výpisu oznámení daného města či městské části. Systém obsahuje huje administrační část, ve které je možné spravovat jednotlivá města, městské části, uživatelské účty, aktuality a oznámení.

Popis uživatelské části Do uživatelské části mají přístup všichni uživatelé. Můžou si prohlížet všechny oznámení a třídit je podle dle jednotlivých měst a městských částí. Přidávat nové ohlášení mohou pouze přihlášení uživatelé. 1. Login – přihlašovací formulář + registrace 2. Menu - Hlavní stránka, jednotlivá města, Výpis všech měst i. Přidat oznámení – pouze po přihlášení 3. Úvod – úvodní text tex k webu 4. Poslední tři oznámení 5. Novinky – poslední tři aktuality i. Zobrazit všechny novinky – pro zobrazení všech ii.

1

3 2

4

OBRÁZEK 41 - HLAVNÍ STRÁNKA

62

5

OBRÁZEK 42 - HLAVNÍ STRÁNKA – NOVINKY

63

Registrace Na registrační stránku se dostanete kliknutím na odkaz Registrace na hlavní stránce v části Login. Každý uživatel se registruje k jednomu určitému městu. Povinné údaje při registraci jsou: - Nick - Heslo - Kontrola hesla - Jméno - Příjmení - Telefon - E-mail (Osobní údaje zde jsou pouze pro případ potřeby doplnění některých informací k ohlášenému přestupku. Anonymita zde bude zajištěna.) Nepovinné údaje - Motivace - Odkud jste se o systému dozvěděli

OBRÁZEK 43 - HLAVNÍ STRÁNKA – NOVINKY

aci bude uživateli odeslán na jeho e-mailovou e mailovou adresu email obsahující Po registraci odkaz s kontrolním kódem. Po potvrzení registrace kliknutím na tento odkaz bude uživatel mít částečně v provozu svůj účet. Bude se moci přihlásit do systému a bude moci i přidávat příspěvky vky (ty ale nebudou odesílány na policii, budou pouze vystaveny na webu). Jakmile potvrdí administrátor uživatelovu registraci, bude jeho účet v plném provozu. 64

Přidání oznámení Po kliknutí na odkaz Přidat oznámení v levém menu, vyberte město,, ve kterém byl přestupek spáchán.

OBRÁZEK 44 - HLAVNÍ STRÁNKA – NOVINKY

Pokud město obsahuje městské části, tak máte možnost danou část vybrat. Povinné údaje -

-

-

Městská část – pokud je dané město obsahuje SPZ vozidla • systém kontroluje zadání zadání SPZ, povolené znaky jsou pouze písmena A-Z A (bez diakritiky) a číslice 0 – 9 • SPZ neznámá – při této volbě je povinná fotografie (s čitelnou SPZ) Popis místa • Detailní popis daného přestupku. Popis by měl obsahovat adresu spáchaného přestupku, typ přestupku přest a případně další popis Datum zjištění přestupku – automaticky vyplněno na aktuální datum Čas zjištění přestupku - automaticky vyplněno na aktuální čas

65

Nepovinné údaje -

-

Značka a typ vozidla – např. Škoda Favorit Přidat fotografii – Fotografie lze přidávat pouze ve formátu .jpg. Vkládejte pouze kvalitní fotografie, na kterých bude dobře vidět SPZ a bude jasný přestupek, který byl spáchán Neodesílat zprávu pro příslušný policejní útvar – při zaškrtnutí této volby bude příspěvek pouze zveřejněn na webu a nebude odeslána zpráva pro policii (slouží např. pro zveřejnění starších přestupků)

66