Informa ní systém pro realitní kancelá. Bohumil Havlí ek

eské vysoké u£ení technické v Praze Fakulta elektrotechnická Katedra po£íta£ové graky a interakce

Bakalá°ská práce

Informa£ní systém pro realitní kancelá°

Bohumil Havlí£ek

Vedoucí práce: doc. Ing. Ivan Jelínek, CSc.

Studijní program: Softwarové technologie a management, Bakalá°ský Obor: Web a multimedia 27. kv¥tna 2010

iv

v

Pod¥kování D¥kuji p°edev²ím panu docentu Ing. Ivanu Jelínkovi, CSc. za jeho rady a ochotu stát se vedoucím této bakalá°ské práce. Dále bych rád pod¥koval panu Zelenkovi z realitní kancelá°e Arkadia reality s.r.o. za spolupráci a velmi cenné informace ohledn¥ fungování realitní kancelá°e.

vi

vii

Prohlá²ení Prohla²uji, ºe jsem práci vypracoval samostatn¥ a pouºil jsem pouze podklady uvedené v p°iloºeném seznamu. Nemám závaºný 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 26. 5. 2010

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

viii

Abstract This bachelor thesis discusses complete design of web information system for a estate agency Arkadia reality s.r.o The system is programmed in PHP with using the MySQL relational database and three-tier MVC architecture. Design diagrams are modeled in UML. The thesis describes the general system requirements, an analysis of existing solution, an design and implementation of new application including testing.

Abstrakt Tato bakalá°ská práce se zabývá kompletním návrhem webového informa£ního systému pro realitní kancelá° Arkadia reality s.r.o. Systém je naprogramován v jazyce PHP s vyuºitím rela£ní databáze MySQL a za pouºití t°ívrstvé architektury MVC. Návrhové diagramy jsou vymodelovány podle jazyka UML. Práce popisuje obecné poºadavky na systém, analýzu stávajícího °e²ení, návrh a implementaci nové aplikace v£etn¥ otestování.

ix

x

Obsah 1 Úvod

1

2 Popis problému, specikace cíle

3

2.1

Obecný popis daného problému . . . . . . . . . . . . . . . . . . . . . . . . . .

3

2.2

Specické poºadavky a jejich popis . . . . . . . . . . . . . . . . . . . . . . . .

3

2.2.1

Poºadavky na aplikaci

4

2.2.2

Poºadavky jednotlivých typ· realitních nabídek . . . . . . . . . . . . .

2.3

Analýza stávajícího °e²ení

2.4

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

5

Stávající webová prezentace . . . . . . . . . . . . . . . . . . . . . . . .

5

Pozice ve vyhledáva£ích, aktuální náv²t¥vnost . . . . . . . . . . . . . . . . . .

6

2.3.1

2.4.1

Vyhledání . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

6

2.4.2

Náv²t¥vnost . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

7

3 Analýza a návrh °e²ení 3.1

4

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

9

Papírový prototyp (low delity) . . . . . . . . . . . . . . . . . . . . . . . . . .

9

3.1.1

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

9

3.2

USE Case Model - model p°ípadu uºití . . . . . . . . . . . . . . . . . . . . . .

10

3.3

Vyºadované technologie

10

Interakce mezi prototypem a uºivatelem

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

3.3.1

Apache - webový server

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

10

3.3.2

(X)HTML - extensible hypertext markup language . . . . . . . . . . .

11

3.3.3

PHP - PHP: Hypertext Preprocessor . . . . . . . . . . . . . . . . . . .

11

3.3.4

MySQL

11

3.3.5

CSS - Cascading Style Sheets . . . . . . . . . . . . . . . . . . . . . . .

11

3.3.6

AJAX - Asynchronous JavaScript and XML . . . . . . . . . . . . . . .

12

3.4

Model-View-Controller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

12

3.5

Diagram nasazení v praxi

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

12

3.6

Návrh databáze . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

13

3.7

Datový model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

14

3.7.1

Realita . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

14

3.7.2

Byt

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

15

3.7.3

Rodinný d·m . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

16

3.7.4

Pozemek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

16

3.7.5

Komer£ní objekt

17

3.7.6

Ostatní

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

17

3.7.7

Uºivatel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

18

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

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

xi

xii

OBSAH

3.7.8

Poptávka

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

18

3.7.9

Nabídka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

18

3.7.10 Dispozice

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

19

3.7.11 Elekt°ina

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

19

3.7.12 Voda . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

19

3.7.13 Plyn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

19

3.7.14 Odpad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

19

3.7.15 Jednotky

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

19

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

19

3.7.17 Fotograe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

19

3.7.16 Okres 3.7.18 Stav

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

3.7.19 Vlastnictví

20

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

20

3.7.21 Sluºby . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

20

3.7.20 O nás

4 Návrh uºivatelského rozhraní 4.1

Gracký návrh aplikace

23

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

23

4.1.1

Barevná kombinace . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

23

4.1.2

Návrh rozmíst¥ní komponent portálu . . . . . . . . . . . . . . . . . . .

24

5 Implementace systému 5.1

5.2

20

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

27

Frameworky, knihovny . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5.1.1

Nette framework

5.1.2

Dibi (Database Abstraction Library

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

27 27 27

Softwarové nástroje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

27

5.2.1

Netbeans IDE 6.8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

27

5.2.2

Wamp server 2.0

28

5.2.3

MySQL Workbench

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

28

5.2.4

Enterprise Architect

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

28

5.2.5

GNU Image Manipulation Program ( GIMP ) . . . . . . . . . . . . . .

28

5.2.6

Internetové prohlíºe£e

28

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

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

5.3

SEO optimalizace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

28

5.4

Návrh t°íd a model·

29

5.5

Zdrojové kódy t°etích stran

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

29

5.6

Validace formulá°ových polí . . . . . . . . . . . . . . . . . . . . . . . . . . . .

30

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

6 Testování 6.1

31

Validita 6.1.1

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

Validita zdrojových kód·

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

31 31

6.2

Internetové prohlíºe£e a kompatibilita

31

6.3

Uºivatelské testy (Usability test)

6.4

Testující osoby

6.5

Kognitivní testování

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

32

6.6

Klientská £ást aplikace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

33

6.7

Správa systému (administrace)

6.8

Výsledky test·

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

32

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

32

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

33

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

33

xiii

OBSAH

6.8.1

Klientská £ást . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

33

6.8.2

Správa systému (administrace)

34

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

7 Záv¥r 7.1

Nasazení systému a jeho p°ínos

35 . . . . . . . . . . . . . . . . . . . . . . . . . .

35

Literatura

37

A Seznam pouºitých zkratek

39

B Obsah p°iloºeného CD

41

C Instala£ní a uºivatelská p°íru£ka C.1

Ukázky aplikace s realistickými daty

43 . . . . . . . . . . . . . . . . . . . . . . .

44

xiv

OBSAH

Seznam obrázk· 2.1

P·vodní verze webových stránek - leden 2010

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

6

3.1

Papírový model návrhu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

9

3.2

Model p°ípadu uºití - USE Case Model systému . . . . . . . . . . . . . . . . .

10

3.3

Model nasazení . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

13

3.4

D¥di£nost entit nabídek

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

14

3.5

Databázový návrh

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

21

4.1

Gracký návrh

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

23

4.2

Zdroj z fotobanky . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

24

4.3

Odstran¥ní okolí domu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

25

4.4

Zakomponování domu do hlavi£ky . . . . . . . . . . . . . . . . . . . . . . . . .

25

C.1

Úvodní stránka - vý°ez . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

44

C.2

Detail inzerátu

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

45

C.3

Vloºení poptávky . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

45

C.4

P°ihla²ování do Správce

46

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

xv

xvi

SEZNAM OBRÁZK

Seznam tabulek

xvii

xviii

SEZNAM TABULEK

Kapitola 1

Úvod V eské republice na trhu s nemovitostmi p·sobí k dne²nímu dni okolo dvou tisíc realitních kancelá°í. Tyto spole£nosti prezentují své nabídky nemovitostí pomocí ti²t¥ných inzercí, reklamních blok· v rozhlasovém i televizním vysílání a dnes jiº b¥ºn¥ i na internetu. Jednou z realitních kancelá°í p·sobících u nás je i spole£nost Arkadia reality s.r.o. se sídlem v Plzni. Ta vlastní svoji statickou webovou prezentaci neumoº¬ující ºádnou správu nabídek a poskytovaných sluºeb. Cílem tohoto projektu je provést kompletní analýzu dané problematiky, vypracovat návrh a následn¥ implementovat nový dynamický systém s p°ehledným rozhraním a správou obsahu nabídky spole£nosti bez nutnosti zásahu do zdrojových kód·. Forma této práce je

implementa£ní

a po schválení zadavatelem (Arkadia reality s.r.o.)

bude systém uveden do ostrého provozu.

1

2

KAPITOLA 1.

ÚVOD

Kapitola 2

Popis problému, specikace cíle V této kapitole je p°edstavena stávající webová prezentace spole£nosti, kde je rozebrána jak gracká, tak i systémová £ást aplikace. Dále jsou zde specikovány problémy, cíle projektu a poºadavky od zadavatele.

2.1 Obecný popis daného problému Základem je navrhnout a implementovat takovou verzi aplikace, která bude intuitivní, p°ehledná a velmi snadno ovladatelná. Mezi hlavní poºadavky pat°í odstran¥ní nutnosti spravovat webový obsah na po£íta£i pomocí editor· t°etích stran a dal²ího vývojového software. Dal²ím d·leºitým poºadavkem je umoºnit ovládání a úpravy webové prezentace i zam¥stnanc·m spole£nosti bez znalostí programování.

2.2 Specické poºadavky a jejich popis Cílem bakalá°ské práce je navrhnout a vytvo°it ob¥ strany informa£ního systému realitní kancelá°e. První strana je z pohledu náv²t¥vník·, potencionálních zákazník·. Tato £ást aplikace umoºní náv²t¥vníkovi pohodlné zobrazení nabízených sluºeb, dal²ích pot°ebných informací a samoz°ejm¥ celkové nabídky nemovitostí realitní kancelá°e Arkadia reality s.r.o. Náv²t¥vník si m·ºe vyhledat seznam nabízených realit podle kritérií, které poºaduje. Druhá £ást aplikace je ur£ena pouze pro zam¥stnance spole£nosti. Její rozhraní umoº¬uje jednotlivým maklé°·m spole£nosti p°idávat, upravovat £i mazat nabízené reality a dále i editovat sluºby a informace o spole£nosti. Specikace poºadavk· jsem rozd¥lil do n¥kolika samostatných kategorií:

Poºadavky na aplikaci Poºadavky jednotlivých typ· realitních nabídek Poºadavky dal²ích sluºeb spole£nosti 3

4

KAPITOLA 2.

POPIS PROBLÉMU, SPECIFIKACE CÍLE

2.2.1 Poºadavky na aplikaci Mezi poºadavky na systém ze strany realitní kancelá°e Arkadia, s.r.o. pat°í zejména:

Uºivatelské ú£ty

Webový systém musí umoºnit vytvá°ení dvou typ· uºivatelských ú£t· pro zam¥stnance realitní kancelá°e. Prol uºivatele systému má dále obsahovat základní, av²ak podstatné údaje o daném zam¥stnanci. Jedná se o jméno a p°íjmení, telefonní kontakt do kancelá°e, adresu elektronické po²ty a osobní fotograi.

Uºivatelské role

Rozli²ují se celkem 3 typy uºivatel· systému li²ících se navzájem úrovní oprávn¥ní k provád¥ní n¥kterých operací v aplikaci. Nejniº²í úrove¬ oprávn¥ní má skupina náv²t¥vník·, vy²²í úrove¬ mají maklé°i realitní kancelá°e a nejvy²²í úrove¬ mají správci systému - administráto°i. Náv²t¥vníci Do této skupiny pat°í ve²ke°í náv²t¥vníci webových stránek RK, kte°í zde hledají nemovitost £i jiné informace o spole£nosti. Tato skupina má nejniº²í stupe¬ uºivatelských práv, tzn. náv²t¥vníci mohou informace o jednotlivých realitách a sluºbách pouze prohlíºet a vyhledávat mezi nimi. U kaºdé nalezené reality mají potencionální zákazníci RK moºnost si zobrazit podrobn¥j²í informace a prohlédnout si p°íslu²né fotograe. Maklé°i Ve skupin¥ maklé°· se nachází pouze zam¥stnanci realitní kancelá°e, kte°í mohou spravovat ve²keré nabízené reality a vy°izovat poptávky od náv²t¥vník·. Administráto°i Skupina s nejvy²²í formou oprávn¥ní zasahovat do systému RK. Mohou upravovat ve²kerá nastavení systému, údaje o RK, spravovat ve²keré uºivatelské ú£ty, nemovitosti i sluºby. Vyjímkou není ani správa poptávek.

Administra£ní rozhraní Maklé°i a administráto°i mají k dispozici pro správu obsahu speciální administra£ní rozhraní rozd¥lené podle kategorií na jednotlivé oblasti správ. Jedná se o systémová nastavení, správu uºivatelských ú£t· a správu realit. Do rozhraní se uºivatelé dostanou po úsp¥²ném p°ihlá²ení svým uºivatelským jménem a heslem.

Podání poptávky Systém umoº¬uje b¥ºným náv²t¥vník·m webu odeslat realitní kancelá°i elektronický formulá° s jejich poptávkou. V poptávce se udává povinn¥ jméno, p°íjmení a telefonní kontakt na náv²t¥vníka.

2.2.2 Poºadavky jednotlivých typ· realitních nabídek Rozd¥lení podle kategorie a lokality

2.3.

ANALÝZA STÁVAJÍCÍHO EENÍ

5

Kaºdý inzerát realitní kancelá°e je rozd¥len podle p°íslu²ného okresu, ve které se realita nachází. Dal²í d¥lení je do jednotlivých kategorií, jako je nap°. byt, rodinný d·m, pozemek aj.

P°ílohy - fotograe K inzerát·m mohou maklé°i realitní kancelá°e p°idávat fotograe nemovitosti v plném rozli²ení. Kaºdá realita m·ºe obsahovat jednu hlavní fotograi a libovolný po£et dal²ích, dopl¬ujících.

Speciální akce Pro zvý²ení pozornosti potencionálních zákazník· na konkrétní inzerát slouºí moºnost speciálního ozna£ení "akce". Celá aplikace dále musí...

•

zobrazit nabízené reality podle zadaných kritérií

•

°adit nabízené reality podle volby náv²t¥vníka

•

zobrazit v²echny inzeráty dané kategorie nemovitosti

2.3 Analýza stávajícího °e²ení 2.3.1 Stávající webová prezentace Stávající webové stránky realitní kancelá°e Arkadia reality s.r.o. [3] byly vytvo°eny pomocí WYSIWYG

1 html editoru, který je £asto pouºíván k vytvá°ení webových stránek bez nut-

nosti znalosti programování HTML. Taková tvorba webových stránek má n¥kolik výrazných nevýhod. Jednou z nich je obrovské mnoºství zbyte£ných p°íkaz·-element·, které do HTML kódu nepat°í. Tento kód je pak velice objemný - není vyjímkou i n¥kolikanásobná velikost kódu neº by bylo pot°eba p°i programování bez vyuºití takového editoru. Dal²ím výrazným záporem pouºití WYSIWYG editoru je i velmi £astý rozdíl mezi zobrazením webu v daném editoru a internetovém prohlíºe£i nebo v r·zných prohlíºe£ích. Mezi hlavní nedostatky stávajícího webu pat°í:

•

web není validní podle ºádného ze standard·

•

stránky obsahují rámce - v²echny stránky obsahují svoji hlavi£ku a na£ítají se déle

•

systém neobsahuje administraci pro správu nabídek

•

systém nerozli²uje uºivatele a jejich role

•

poptávku nelze vloºit jinak neº ru£n¥ p°es e-mail

•

seznam sluºeb v levé £ásti stránky uºivatel snadno p°ehlédne (opticky splynou s reklamními texty)

•

mizející menu

6

KAPITOLA 2.


Obrázek 2.1: P·vodní verze webových stránek - leden 2010

Krom¥ jiº zmín¥né tvorby pomocí editoru vkládajícího nadbyte£ný a nestandardní kód, kdy stránky následn¥ nejsou validní a zobrazují se v r·zných prohlíºe£ích rozdíln¥, je d·leºité zmínit i citelnou absenci správy obsahu. V tuto chvíli se pro p°idání £i úpravu n¥které z nabídek musí ru£n¥ upravit zdrojový kód dané stránky a následn¥ ji zp¥t nahrát na webový server. Tato operace vyºaduje programátorský zásah, který lze provést pouze z po£íta£e na kterém je nainstalován FTP

2 klient pro staºení a následné zp¥tné nahrání upravované

stránky na webový server. Jakákoliv v¥t²í úprava zdrojového kódu p°i aktualizaci informací na webu p°edstavuje ur£ité nebezpe£í pro funk£nost celé aplikace. Z grackého hlediska je logo realitní kancelá°e sloºeno celkem ze t°í samostatných £ástí. ásti loga jsou ve formátu JPEG, který se vyzna£uje ztrátovou kompresí a niº²í kvalita kazí výsledný dojem z grackého vyjád°ení. Zárove¬ znak Asociace realitních kancelá°í se svojí velikostí a iniciály ARK lze velmi snadno zam¥nit £i spojit s logem spole£nosti Arkadia reality.

2.4 Pozice ve vyhledáva£ích, aktuální náv²t¥vnost 2.4.1 Vyhledání P°i testování vyhledání realitní kancelá°e Arkadia reality s.r.o., jsem vyuºil nejznám¥j²í £eský vyhledáva£ Seznam.cz a mezinárodní Google.com. První z jmenovaných, £eský Seznam.cz nenalezl odkaz na stránky Arkadie ani v prvních ²esti desítkách nalezených záznam·. Lépe si nevedl ani Google.com. Siln¥ negativní vliv na pozici ve vyhledáva£ích mají zejména absence klí£ových slov a nevalidní kód.

WYSIWYG je zkratka z anglického "What you see is what you get"(Co vidí², to dostane²) FTP je zkratka File Transfer Protocol. Jedná se o protokol aplika£ní vrstvy. Je ur£en pro p°enos soubor· mezi po£íta£i, na kterých mohou b¥ºet rozdílné opera£ní systémy. 1 2

2.4.

POZICE VE VYHLEDÁVAÍCH, AKTUÁLNÍ NÁVTVNOST

7

3

Nová verze aplikace je validní a vyuºívá metod SEO . Popis t¥chto technologií je popsán dále v práci.

2.4.2 Náv²t¥vnost Spole£nost Arkadia reality s.r.o. vyuºívá bezplatných sluºeb internetové spole£nosti TopList.cz k m¥°ení náv²t¥vnosti na svém webu. Za prvních 5 m¥síc· roku 2010 se pr·m¥rná denní náv²t¥va pohybuje okolo 32,96 náv²t¥vník·.

3

Search Engine Optimalization = optimalizace pro vyhledáva£e

8

KAPITOLA 2.


Kapitola 3

Analýza a návrh °e²ení 3.1 Papírový prototyp (low delity) P°ed samotnou implementací uºivatelského rozhraní je vºdy nutné vytvo°it zku²ební prototyp. Základním typem navrºeného prototypu je tzv. papírový model. Jedná se o velmi rychlý a zárove¬ velmi konkrétní návrh vyuºití prostoru rozhraní pro uºivatele. Mezi hlavní d·vody tvorby papírových prototyp· pat°í velmi cenná zp¥tná vazba od klienta (uºivatele) v oblasti p°ehlednosti návrhu a vytvo°ení seznamu technických detail·.

3.1.1 Interakce mezi prototypem a uºivatelem Nejprve byl vytvo°en základní prototyp rozmíst¥ní hlavních prvk· úvodní obrazovky aplikace z klientské £ásti. Do n¥j následn¥ byly p°idávány men²í prototypy s realistickými daty a roz²í°enými funkcemi. P°íkladem je vyhledávací £ást aplikace, která zobrazí výpis a základní informace o inzerátech, které vyhovují zadaným ltr·m od uºivatele.

Obrázek 3.1: Papírový model návrhu Na zkrácený výpis navazuje detailní seznam atribut· a hodnot pro konkrétn¥ zvolený inzerát. P°i testování prototyp· v²ech úrovní jsem se snaºil získávat názory uºivatel· na p°ehlednost, srozumitelnost provád¥ných akcí a dal²í p°ipomínky. Díky t¥mto zp¥tným vazbám a diskusím nad jednotlivými úseky uºivatelského rozhraní bylo jiº na míst¥ moºné provést zku²ební zm¥ny prototyp·. Poté následovaly dal²í testy a diskuse.

9

10

KAPITOLA 3.

ANALÝZA A NÁVRH EENÍ

3.2 USE Case Model - model p°ípadu uºití Následující model p°ípadu uºití charakterizuje dostupné funkce uºivatelských skupin a vztahy mezi nimi. Diagram je rozd¥len na dv¥ £ásti - na klientskou a administra£ní (systémovou) £ást.

Obrázek 3.2: Model p°ípadu uºití - USE Case Model systému

3.3 Vyºadované technologie Z d·vod· nasazení systému do provozu na webový sever, kde se nachází i stávající statická prezentace, byly pouºity následující technologie:

3.3.1 Apache - webový server Vývoj nejoblíben¥j²ího softwarového webového serveru s otev°eným kódem pro ve²keré moºné platformy, za£al v roce 1993 ve Spojených státech. V roce 1999 byl vyuºíván na více neº 57 procentech server· v roce 2005 dokonce dosáhl hodnoty kolem 70ti procent. Roku 2009 se tomuto software poda°ilo p°ekonat hranici 100 milion· webových stránek jako prvnímu v historii. Server Apache se dále £asto vyuºívá i pro jiné úkoly, jakými je nap°. sdílení soubor· z osobního po£íta£e p°es internet apod.

3.3.

VYADOVANÉ TECHNOLOGIE

11

3.3.2 (X)HTML - extensible hypertext markup language Jedná se o roz²í°itelný zna£kovací jazyk vyvinutý mezinárodním webovým konsorciem W3C. P·vodn¥ byl navrºen jako následník jazyka HTML, ale v roce 2007 bylo nakonec rozhodnuto o vytvo°ení nové verze HTML - verze HTML 5. Cílem bylo p°evedení HTML jazyka do podobné formy jako u XML dokument·, kde by byla zachována zp¥tná kompatibilita. Dnes (X)HTML existuje ve t°ech verzích:

•

XHTML 1.0 Strict

•

XHTML 1.0 Transitional

•

XHTML 1.0 Frameset

1

Tabulka rozdíl· mezi jednotlivými verzemi je k dispozici na ociálních stránkách W3C.

3.3.3 PHP - PHP: Hypertext Preprocessor Pro programování dynamických webových stránek se velmi £asto pouºívá skriptovací programovací jazyk PHP. Ten se za£le¬uje do struktury jazyka HTML, resp. XHTML nebo WML. Provád¥ní skript· PHP se provádí pouze na stran¥ serveru a klientské stran¥ se posílá pouze výstup - výsledek £innosti skriptu. Podporuje obrovské mnoºství nejr·zn¥j²ích protokol· jako je nap°. IMAP, POP, SMTP, HTTP, LDAP, FTP a dal²í. Tento jazyk je velmi oblíben pro své snadné pouºití a ur£itou programátorskou volnost ve své syntaxi. Jazyk PHP nebyl od za£átku vyvíjen jako objektov¥ orientovaný, ale pouze jako procedurální. Od verze 4 se objevily první základy OOP, které byly velmi zdokonaleny ve verzi £íslo 5.

3.3.4 MySQL Multiplatformní databázový systém MySQL byl vytvo°en ²védskou spole£ností MySQL AB. Jedná se o voln¥ ²í°itelný software a vzhledem ke své snadné implementovatelnosti je £asto nasazován ve spojení s PHP a Apachem jako základ webových server·.

3.3.5 CSS - Cascading Style Sheets Kaskádové styly dnes k webovým aplikacím neodmysliteln¥ pat°í a je tém¥° nemoºné si

2

bez nich programování webových systém· p°edstavit. S tímto jazykem p°i²lo sv¥tové W3C . Smyslem pouºití kaskádových styl· v aplikacích je odd¥lení denování vzhledu jednotlivých komponent od obsahu i celé struktury dokumentu. Deklaraci CSS lze do HTML dokumentu zapsat n¥kolika zp·soby. Lze vyuºít p°ímého zápisu, tzv inline. Tento zp·sob zápisu aplikuje danou denici pouze na element, ve kterém je p°íkaz zapsán. Jiným zp·sobem je zápis ve formátu style, kde daná denice ovlivní denované selektory na celé stránce. Nej£ast¥ji se vyuºívá zápis v externím souboru, na který je následn¥ odkazováno z HTML stránky.

http://w3.org W3C - mezinárodní webové konsorcium, zaloºené v °ijnu roku 1994 Timem Bernersem-Leejem. Cílem konsorcia je rozvíjení www do plného potenciálu vývojem protokol· a sm¥rnic, které zajistí dlouhodobý r·st webu. 1 2

12

KAPITOLA 3.


3.3.6 AJAX - Asynchronous JavaScript and XML Jedná se o technologii pro vývoj webových aplikací umoº¬ující zm¥ny na stránkách bez nutnosti znovuna£tení jejího obsahu. AJAX byl ve°ejn¥ p°edstaven v roce 2005, av²ak p·vodní my²lenky, na kterých je tato technolgie vystav¥na jsou mnohem star²í. Pouºití AJAXu ve webových aplikacích vede k vy²²í plynulosti a p°i správném pouºití vede i ke zmen²ení zát¥ºe na serveru, protoºe rozhodne, které £ásti stránky není nutné znovu na£íst.

3.4 Model-View-Controller Model-view-controller, zkrácen¥ MVC, je softwarová architektura rozd¥lující aplikaci do celkem t°í odd¥lených vrstev. Na vrstvu datovou, která je ozna£ena jako Model, dále na vrstvu prezen£ní ozna£enou pojmem View a na vrstvu logickou Controller. Tuto architekturu popsal norský po£íta£ový v¥dec Trygve Reenskaug v roce 1979. Hlavním úkolem t°ívrstvé architektury je rozd¥lení kódu do t¥chto jednotlivých kategorií nejen pro p°ehlednost p°i vývoji v¥t²ích a sloºit¥j²ích aplikací, ale i pro neovliv¬ování ostatních £ástí p°i modikaci kterékoliv z nich. Dal²í nemalou výhodou takového uspo°ádání je i snaz²í práce v¥t²ího po£tu programátor· na aplikaci. Kaºdá z vrstev zaji²úje v aplikaci jinou funkci. Model zaji²úje p°ístup a manipulaci s daty uloºenými nap°. v databázi. View (£esky p°ekládán jako pohled) má za úkol p°evést data reprezentovaná modelem do vizuální podoby, tedy k prezentaci uºivateli aplikace. Controller (ozna£ován £esky jako °adi£) je logická vrstva, která reaguje na °ízení od uºivatele a která má za úkol zajistit zm¥ny v pohledu nebo v modelu. T°ívrstvá architektura vývoje se vyuºívá i u webových aplikací. Zde bývá pohled (View) nej£ast¥ji tvo°en HTML kódem napevno implementovaným, p°ípadn¥ vygenerovaným pomocí PHP £i jiných skriptovacích jazyk·. Logická vrstva se skládá ze dvou hlavních £ástí. Jedna z nich zachytí ve²keré http poºadavky, které zpracuje a p°epo²le je do druhé £ásti konkrétním °adi£·m. P°ijatá data z http poºadavku konkrétní °adi£ zpracuje a prováºe se s konkrétním pohledem, který se postará o vyrendrování HTML kódu.

3.5 Diagram nasazení v praxi Na diagramu níºe je ukázka nasazení webového systému realitní kancelá°e v praxi. Schéma je rozd¥leno na 3 hlavní oblasti. První oblast p°edstavuje klientskou stranu (stanici), která komunikuje se softwarovým webovým serverem Apache, který b¥ºí na hostingovém serveru poskytovatele. Komunikace mezi stanicí a serverem je zaji²t¥na pomocí http komunikace, která probíhá mezi klientským webovým prohlíºe£em a serverem Apache. T°etí a zárove¬ také d·leºitou oblastí je server databázový, kde b¥ºí softwarová sluºba databázového serveru MySQL. Komunikace mezi webovým a databázovým serverem je pomocí protokolu TCP/IP. Realitní systém je umíst¥n na hostingovém serveru, kde je obsluhován pomocí webového serveru Apache.

3.6.

13

NÁVRH DATABÁZE

Obrázek 3.3: Model nasazení

3.6 Návrh databáze Návrh databáze realitního systému jsem rozd¥lil do n¥kolika oblastí. Hlavní oblastí jsou samotné inzeráty, které realitní kancelá° nabízí. Po konzultaci s majiteli realitní kancelá°e a po analyzování realitních server· jako jsou sreality.cz [8] nebo nemovitosti.cz [5] jsem sepsal ve²keré evidované poloºky. Mezi kategorie realit, které Arkadia reality s.r.o. nabízí, jsou:

•

byty

•

rodinné domy

•

pozemky

•

komer£ní objekty

•

ostatní (malé objekty, garáºe, historické budovy apod.)

Velmi neekonomické a nesprávné °e²ení by bylo vytvo°ení jediné entity "realita", ve které by byly obsaºeny ve²keré poloºky. Kaºdý ze záznam· v tabulce realita by pak obsahoval v¥t²inu poloºek nulových a místy by docházelo k redundanci dat. áste£ným °e²ením je rozd¥lení reality na jednotlivé typy jakými jsou byt, rodinný d·m apod. Tímto zp·sobem by do²lo k eliminaci spousty nevypln¥ných atribut· v jednotlivých záznamech, ale problém s redundancí n¥kterých dat by nadále p°etrvával. Problém tvo°í n¥kolik shodných atribut· u v²ech kategorií nabízených realit. Tuto situaci je pot°eba vy°e²it zavedením d¥di£nosti, kde rodi£ovský objekt je nazván "realita"a jeho potomci jsou "byt","rodinný d·m","pozemek","ostatní"a "komer£ní objekty". Spole£né atributy pro v²echny typy realit jsou v entit¥ realita a zbylé jsou rozd¥leny do p°íslu²ných potomk·.

14

KAPITOLA 3.


Obrázek 3.4: D¥di£nost entit nabídek

3.7 Datový model 3.7.1 Realita •

IDRealita - primární klí£

•

evidencni-cislo - unikátní eviden£ní £íslo inzerátu

•

datum-zadani - datum vloºení inzerátu do nabídky

•

datum-aktualizace - datum posledních zm¥n v inzerátu

•

akcni - parametr, zda-li je daný inzerát ak£ní, tj. je na extra pozici

•

lokalita - lokalita umíst¥ní reality

•

poloha - bliº²í up°esn¥ní lokality (nap°. sídli²t¥, £ást obce)

•

cena - cena reality

•

jednotka-FK - cizí klí£ k entit¥ Jednotky

•

hlavni-fotograe - název souboru, p°edstavujícího hlavní fotograi inzerátu

•

url - webová dopl¬ující adresa

•

kratky-popis - Krátký popis nabízené reality

3.7.

DATOVÝ MODEL

•

popis - del²í popis, hlavní zdroj informací

•

okres-FK - cizí klí£ k entit¥ Okres

•

nabidka-FK - cizí klí£ k entit¥ Nabídka

•

stav-FK - cizí klí£ k entit¥ Stav

3.7.2 Byt •

IDbyt - primární klí£

•

plocha - plocha v metrech £tvere£ních

•

patro - podlaºí, ve kterém se byt nachází

•

sklep - parametr ANO/NE zda-li k bytu pat°í sklep

•

telefon - parametr ANO/NE zda-li je v byt¥ zapojený telefon

•

vytah - parametr ANO/NE zda-li je v dom¥ výtah

•

parkovani - popis moºností parkování u domu

•

stav-objektu - stav objektu (budovy)

•

balkon - parametr ANO/NE zda-li má byt balkon

•

typ-budovy - typ budovy

•

pocet-podlazi - po£et podlaºí budovy

•

vybaveno - parametr ANO/NE zda-li je byt v nabídce s vybavením

•

doprava - popis moºností dopravy v okolí

•

obcanska-vybavenost - popis vybavenosti v okolí

•

bezbareierove - parametr ANO/NE zda-li je byt bezbariérový

•

realita-FK - cizí klí£ k entit¥ Realita

•

vlastnictvi-FK - cizí klí£ k entit¥ Vlastnictví

•

dispozice-FK - cizí klí£ k entit¥ Dispozice

15

16

KAPITOLA 3.


3.7.3 Rodinný d·m •

IDrd - primární klí£

•

typ-budovy - Typ budovy

•

poloha-objektu - Poloha domu v·£i ostatním dom·m v okolí (°adový,...)

•

typ-domu - popis typu domu

•

pocet-podlazi - udává po£et pater, který d·m má

•

stav-objektu - popis stá°í a technického stavu domu

•

plocha-pozemku - plocha v metrech £tvere£ních

•

plocha-zastavena - zastav¥ná plocha v metrech £tvere£ních

•

plocha-obytna - plocha v metrech £tvere£ních

•

dispozice-FK - cizí klí£ k entit¥ Dispozice

•

umisteni-objektu - umíst¥ní domu v·£i okolí

•

rok-rekonstrukce - byl-li d·m rekonstruován

•

rok-kolaudace - rok kolaudace

•

obcanska-vybavenost - Popis ob£anské vybavenosti v okolí

•

vybaveno - parametr ANO/NE je-li d·m vybaven za°ízením

•

topeni - popis vytáp¥ní domu

•

bezbarierove - parametr ANO/NE je-li d·m bezbariérový

•


3.7.4 Pozemek •

IDpozemek - primární klí£ pozemku

•

plocha-pozemku - plocha v metrech £tvere£ních

•

doprava - doprava v okolí pozemku, dopravní spojení

•

druh-pozemku - druhy vyuºití pozemku

•

dostupnost - popis dostupnosti k realit¥

•

stavajici-stavby - popis stávajících budov a objekt· na pozemku

•

stavajici-porost - stávající porost na pozemku

3.7.

DATOVÝ MODEL

•

prodej-po-castech - parametr ANO/NE zda-li je pozemek moºné prodat po £ástech

•

charakter-okoli - popis okolí pozemku (sousedství)

•

poloha-objektu - popis polohy pozemku v·£i ostatním v okolí

•

obcanska-vybavenost - popis ob£anské vybavenosti v okolí pozemku

•


3.7.5 Komer£ní objekt •

IDkomercni - primární klí£

•

ucel - ú£el vyuºití objektu

•

sklep - parametr ANO/NE zda-li budova obsahuje sklepní prostor

•

parkovani - popis moºností parkování u objektu nebo v okolí

•

telefon - parametr ANO/NE zda-li je do objektu zaveden telefon

•

vytah - parametr ANO/NE zda-li je v objektu výtah

•

stav-objektu - popis stavu a stá°í objektu

•

poloha-objektu - udává polohu v·£i objekt·m v okolí

•

topeni - popis vytáp¥ní v objektu

•

plocha-uzitna - plocha v metrech £tvere£ních

•

bezbarierove - parametr ANO/NE zda-li je objekt bezbariérový

•


3.7.6 Ostatní •

IDostatni - primární klí£

•

poloha-objektu - udává polohu objektu v okolí

•

typ-budovy - popis typu budovy/objektu

•

stav-objektu - popisuje technický stav £i stá°í objektu

•

plocha-uzitna - uºitná plocha v metrech £tvere£ních

•

bezbarierove - parametr ANO/NE zda-li je objekt bezbariérov¥ p°ístupný

•


17

18

KAPITOLA 3.


3.7.7 Uºivatel •

IDuzivatel - primární klí£

•

username - uºivatelské jméno (login)

•

password - uºivatelské heslo

•

jmeno - k°estní jméno

•

prijmeni - p°íjmení uºivatele

•

titul - dosaºený titul uºivatele

•

email - e-mailová adresa

•

telefon - telefonní £íslo 1

•

mobil - telefonní £íslo 2

•

info - dodate£né informace o uºvateli

•

portret - fotograe uºivatele

3.7.8 Poptávka •

IDpoptavka - primární klí£

•

datum-vlozeni - datum vloºení poptávky do systému

•

jmeno - k°estní jméno klienta

•

prijmeni - p°íjmení klienta

•

email - e-mailová adresa klienta

•

telefon - telefonní £íslo klienta

•

typ - typ poptávky

•

kategorie - kategorie, kam pat°í poptávka

•

popis - informativní popis klienta, co nabízí

•

vyrizeno - parametr ANO/NE, zda-li je poptavka vy°ízena RK

•

uzivatel-fk - cizí klí£ k entit¥ Uºivatel

3.7.9 Nabídka •

IDnabidka - primární klí£

•

typ - typ nabídky (prodej, pronájem,...)

3.7.

DATOVÝ MODEL

3.7.10 Dispozice •

IDdispozice - primární klí£

•

nazev - název dispozice (3+1, 1+kk,...)

3.7.11 Elekt°ina •

IDelektrina - primární klí£

•

nazev - název elektrického p°ipojení (230V,...)

3.7.12 Voda •

IDvoda - primární klí£

•

nazev - název vodovodní p°ípojky (vodovod, studna,...)

3.7.13 Plyn •

IDplyn - primární klí£

•

nazev - název plynové p°ípojky (zemní plyn,...)

3.7.14 Odpad •

IDodpad - primární klí£

•

nazev - název odpadního mechanismu (kanalizace,...)

3.7.15 Jednotky •

IDjednotky - primární klí£

•

nazev-jednotky - název jednotky (metr, objekt,...)

3.7.16 Okres •

IDokres - primární klí£

•

nazev - název okresu

3.7.17 Fotograe •

IDfotograe - primární klí£

•

nazev - název fotograe

•

realita-fk - cizí klí£ k entit¥ Realita

19

20

KAPITOLA 3.


3.7.18 Stav •

IDstav - primární klí£

•

status - stav nabídky RK (aktivní,...)

3.7.19 Vlastnictví •

IDvlastnictvi - primární klí£

•

typ - název typu vlastnictví (osobní, druºstevní,...)

3.7.20 O nás •

IDonas - primární klí£

•

o-spolecnosti - text charakterizující spole£nost Arkadia reality

•

historie - text popisující historii spole£nosti aº do sou£asnosti

•

ulice - ulice (adresa sílda)

•

cp - £íslo popisné (sídlo spole£nosti)

•

mesto - m¥sto (sídlo spole£nosti)

•

telefon - telefonní £íslo (sídlo spole£nosti)

3.7.21 Sluºby •

IDsluzba - primární klí£

•

nazev - název nové sluºby

•

text - del²í popisující text dané sluºby

3.7.

21

DATOVÝ MODEL

Obrázek 3.5: Databázový návrh

22

KAPITOLA 3.


Kapitola 4

Návrh uºivatelského rozhraní 4.1 Gracký návrh aplikace 4.1.1 Barevná kombinace Spole£nost Arkadia reality s.r.o. podniká v oblasti realit v Plze¬ském kraji od srpna roku 2004. Prvotní gracký návrh loga spole£nosti byl vytvo°en z n¥kolika odstín· modrých barev a barvy bílé. Tato modrobílá kombinace charakterizuje tuto spole£nost dodnes. Krom¥ uvedené statické webové prezentace popsané v kapitole 2, inzeruje realitní kancelá° svoji nabídku i v ti²t¥né podob¥ v n¥kolika krajských denících. P°áním majitel· spole£nosti bylo zachovat modrobílou kombinaci nejen samotného loga, ale i celé webové prezentace.

Obrázek 4.1: Gracký návrh

23

24

KAPITOLA 4.

NÁVRH UIVATELSKÉHO ROZHRANÍ

4.1.2 Návrh rozmíst¥ní komponent portálu Gracké uºivatelské prost°edí aplikace je rozd¥leno do p¥ti hlavních £ástí. í°e nej²ir²í £ásti je 970 px z d·vodu dobrého zobrazení i na monitorech s niº²ím rozli²ením. Vycházel jsem ze statistik [7], které uvádí ºe v roce 2008 p°es 51 procent uºivatel· internetu vyuºívalo rozli²ení 1280 x 1024 px a dal²ích 40 procent rozli²ení 1024 x 768 px. Mým cílem bylo navrhnou a vytvo°it stránky tak, aby se i p°i zobrazení na druhém nej£ast¥j²ím rozli²ení celý návrh ve²el bez nutnosti zobrazení horizontálního posuvníku. Vzhledem k nemalému mnoºství uºivatel· internetu s rozli²ením 1024 x 768 px jsem zvolil jako maximální ²í°i grackého návrhu hodnotu 970 px, která má dostate£nou rezervu pro levý i pravý okraj internetového prohlíºe£e. Vzhledem k dramatickému poklesu uºivatel· s je²t¥ niº²ími rozli²eními a vzhledem k nárustu po£tu monitor· s rozli²eními výrazn¥ vy²²ími, se ukázala tato zvolená ²í°e jako vhodná. První z hlavních £ástí stránky je hlavi£ka, kde se nachází logo spole£nosti Arkadia reality, s.r.o. a dále prvek charakterizující zam¥°ení spole£nosti. Jedním z p°ání realitní kancelá°e bylo umíst¥ní bílého £i sv¥tle ²edého rodinného domu vyfotografovaného pod úhlem z rohu do pravé horní £ásti webu. Kvalita i rozli²ení p·vodního obrázku byla v²ak velmi nedostate£ná pro dal²í úpravy. Z t¥chto d·vod· jsem nav²tívil webové stránky databáze Samphotostock.cz, která je provozovatelem £eské fotobanky SAMphoto. Zde jsem z obrovského mnoºství nejr·zn¥j²ích fotograí vybral fotograi rodinného domu, který co nejvíce spl¬oval p°ání realitní kancelá°e. Zvolenou fotograi jsem ve zmín¥né fotobance zakoupil a následn¥ v grackém softwaru upravil tak, aby d·m na fotograi do hlavi£ky webu co nejlépe zapadal.

Obrázek 4.2: Zdroj z fotobanky

Dal²ím grackým prvkem který si klient vyºádal je i logo Asociace realitních kancelá°í eské republiky, jejíº £lenem je i spole£nost Arkadia reality, s.r.o. V p·vodní verzi aplikace bylo toto logo (jak jsem jiº zmínil v kapitole 2.3) velké a velmi snadno zam¥nitelné se znakem realitní kancelá°e Arkadia reality, s.r.o. P°i grackém návrhu jsem klientovi vyhov¥l se zachováním znaku Asociace realitních kancelá°í R, který jsem zmen²il a p°emístil tak, aby byla pokud moºno eliminována moºnost zám¥ny znak· obou institucí.

4.1.

GRAFICKÝ NÁVRH APLIKACE

25

Obrázek 4.3: Odstran¥ní okolí domu

Obrázek 4.4: Zakomponování domu do hlavi£ky

Druhou hlavní £ástí návrhu je horizontáln¥ usazené menu, které se nachází p°ímo pod hlavi£kou s logem. Tato sekce obsahuje odkazy na jednotlivé kategorie obsahu, které jsou: úvod (titulní stránka, kde je zobrazeno 6 nejnov¥j²ích nabídek realitní kancelá°e), nabídka (kateogrie s vyhledáváním inzerát· podle kritérií uºivatele), poptávka (zde se nachází poptávkový formulá°, pomocí kterého uºivatel nabídne realitní kancelá°i svoji realitu), na²e sluºby (sekce, kde je výpis sluºeb, které zaji²új¥ realitní kancelá° p°i obchodech s realitami), o nás (sekce s informacemi o historii spole£nosti a výpisu základních informací o zam¥stnancích spole£nosti) a kontakty (zde se nachází adresa a dopravní spojení do sídla spole£nosti). T°etí £ástí je vertikáln¥ usazené menu, ve kterém se nachází odkazy na výpisy realit z dané kategorie. Krom¥ t¥chto odkaz· se zde nachází i základní spojení se sídlem spole£nosti Arkadia reality, s.r.o. Hlavní obsahová £ást zaujímá nejv¥t²í prostor a slouºí k výpisu ve²kerých informací z vybrané kateogrie. Jedná se o sekci informa£ní. Poslední oblastí v návrhu webového portálu zaujímá pati£ka, kde se nachází copyright, p°ípadn¥ jméno autora.

26

KAPITOLA 4.

NÁVRH UIVATELSKÉHO ROZHRANÍ

Kapitola 5

Implementace systému 5.1 Frameworky, knihovny 5.1.1 Nette framework Nette [6] je voln¥ dostupný £eský framework vhodný pro tvorbu aplikací v PHP 5. Je konstruován pro dodrºování t°ívrstvé technologie MVC (Model View Controller), která dodrºuje znovupouºitelnost a p°ehlednost zdrojového kódu. Jedná se o velmi propracovaný systém s vlastním ladícím nástrojem. Je navrºen tak, aby eliminoval bezpe£nostní rizika jako je ses-

1

sion hijacking, XSS , CSRF

2 a dal²í. Jedná se o jeden z nejrychlej²ích framework·. Srovnání

rychlostí provedl v zá°í roku 2008 Petr Dan¥k ze serveru Root.cz. P·vodním autorem je David Grudl Tento framework jsem si vybral jednak z d·vod· bezpe£nosti, rychlosti a t°ívrstvé architektury. Architektura MVC (v Nette pojmenovaná jako MVP) se v p°ípad¥ v¥t²ího systému hodí. V¥t²í po£et jednotlivých stránek a podstránek díky technologii vyuºití ²ablon volaných konkrétními metodami v Controllerech (Presenterech) se díky vrstvám implementuje podstatn¥ snadn¥ji a je eliminována redundance n¥kterých £ástí layoutu.

5.1.2 Dibi (Database Abstraction Library Dibi [4] od Davida Grudla je knihovna p·vodn¥ vytvá°ená pro framework Nette, umoº¬ující jednodu²²í a p°ehledn¥j²í p°ístup k databázi. Od nov¥j²ích verzí vyuºívá tzv. dibi uent p°íkaz·. Tuto knihovnu jsem pro tento projekt vybral z d·vodu rychlosti a p°ehledn¥j²í implementace.

5.2 Softwarové nástroje 5.2.1 Netbeans IDE 6.8 Netbeans IDE je vývojové prost°edí pro psaní, p°eklad a lad¥ní program·. Jedná se o open source projekt napsaný v programovacím jazyce Java, pro který je také primárn¥ vytvo°en. V 1 2

XSS = Cross site scripting CSRF=cross site request forgery

27

28

KAPITOLA 5.

IMPLEMENTACE SYSTÉMU

nov¥j²ích verzích podporuje i jiné programovací jazyky, mezi které pat°í nap°. C++, Ruby a PHP. Tento vývojá°ský nástroj je multiplatformní a lze jej pouºívat na opera£ních systémech Windows, Linux, Solaris a nebo také Mac OS X. Zvolil jsem jej jako své IDE nejen pro svoji p°ehlednost, barevné rozli²ení jednotlivých kus· zdrojového kódu, ale i pro tzv. na²eptáva£ dopl¬ování kódu.

5.2.2 Wamp server 2.0 Jedná se o webové vývojové prost°edí, které umoº¬uje testovat vytvá°ené webové aplikace vyuºívající technologie PHP, MySQL a webový server Apache na lokálním po£íta£i bez nutnosti p°ipojení k internetové síti. Dále obsahuje rozhraní pro správu databází MySQL, oblíbený phpMyAdmin.

5.2.3 MySQL Workbench Dal²í nástroj, který jsem p°i vývoji webového portálu pro realitní kancelá° pouºil, je databázový návrhový software MySQL Workbench. Obsahuje p°íjemné a jednoduché gracké uºivatelské rozhraní se spoustou moºných funkcí. Mezi ty, které jsem vyuºil p°edev²ím, jsou export navrºené databáze do SQL syntaxe a export schematu jako obrázek. Jedná se o výborný nástroj, který je navíc bezplatný.

5.2.4 Enterprise Architect Pro modelování grackých vývojových diagram· v jazyku UML (Unied Modeling Language) pat°í nástroj Enterprise Architect mezi nejlep²í softwarová °e²ení. Vyuºil jsem tento program od spole£nosti Sparx Systems i pro vytvo°ení schémat vývoje webového systému od zadání poºadavk·, analýzu stav· aplikace aº po návrh model·. Popisovaný nástroj v²ak není zdarma, ale lze jej vyuºít v £asov¥ omezené verzi po dobu maximáln¥ 30 dn·.

5.2.5 GNU Image Manipulation Program ( GIMP ) Tento bezplatný a mocný gracký nástroj pro tvorbu a úpravu grackého návrhu webového systému realitní kancelá°e se stal nepostradatelným pomocníkem. P°esto ºe neobsahuje takové mnoºství speciálních funkcí pro tvorbu grackých efekt· jako n¥které placené profesionální gracké programy, je GIMP vzhledem ke své nulové cen¥ adekvátním zástupcem.

5.2.6 Internetové prohlíºe£e Mozilla Firefox, Google Chrome, Internet Explorer, Opera

5.3 SEO optimalizace Jedním z poºadavk· p°i návrhu a výsledné implementaci webových stránek je i optimalizace pro vyhledáva£e, tzv. SEO. Tato metoda se snaºí zajistit, aby celková forma stránky i v£etn¥

5.4.

NÁVRH TÍD A MODEL

29

jejího obsahu byly lépe zpracovateln¥j²í pro vyhledáva£e na internetu. P°i správné optimalizaci a zaindexování v databázi vyhledáva£·, se stránka pozd¥ji p°i vyhledávání objeví na vy²²ích místech, nejlépe na p°edních pozicích. Techniky SEO optimalizace se d¥lí do dvou skupin. Na povolené a zakázané. Skupina zakázaných technik obsahuje metody, které obelhávají vyhledáva£e nap°. skrytými texty apod. Mezi povolené techniky pat°í pouºívání nadpis·, titulk· a uºití (X)HTML tag· podle norem. SEO optimalizace je v dne²ní dob¥ na internetu nezbytná, a tak i nová prezentace spole£nosti Arkadia reality s.r.o. touto optimalizací pro²la p°i implementaci.

5.4 Návrh t°íd a model· Webový systém se skládá z n¥kolika hlavních sekcí. Kaºdá sekce p°edstavuje jeden logický Presenter. Bylo zapot°ebí vytvo°it tedy:

•

UvodPresenter - úvodní stránka

•

NabidkaPresenter - nabídka a vyhledávání realit

•

PoptavkaPresenter - zadávání poptávek

•

SluzbaPresenter - sluºby RK

•

ONasPresenter - sekce "o nás"

•

KontaktyPresenter - sekce kontakt· RK

•

AdminPresenter - administrace

Ke kaºdému z presenter· bylo vytvo°eno n¥kolik ²ablon, podle akcí (funkcí), které kaºdý z nich obsahuje. Základní ²ablona obsahuje základní (X)HTML kostru do níº se generuje obsah aktuáln¥ volané ²ablony. Pro práci s databází bylo nutné navrhnout a implementovat pat°i£né modely:

•

RealitaModel - model pro správu realit

•

UzivatelModel - model pro správu uºivatel· v systému

•

PoptavkaModel - model pro správu poptávek od klient·

Modely komunikují s databází MySQL pomocí svých funkcí. Sloºit¥j²í funkce obsahují £asto sloºené dotazy a poddotazy v jazyce SQL [2], které vrací nalezené struktury dat a p°edávají je p°es základní model presenter·m.

5.5 Zdrojové kódy t°etích stran V systému je pouºit základní model (BaseModel) jehoº autorem je Roman Sklená°. Jedná se o kostru modelu pro základní komunikaci s databází; jedná se o balí£ek DataGrid/Example

30

KAPITOLA 5.

IMPLEMENTACE SYSTÉMU

5.6 Validace formulá°ových polí Formulá°ová pole, která se nachází nap°. v poptávkovém formulá°i, je nutné ochránit proti nevhodném £i necht¥nému vstupu od uºivatele. Lze vyuºít metodu "AddRule", která zajistí kontrolu vstupu podle valida£ního pravidla. Mezi základní pravidla vyuºitá ve webovém systému jsou:

•

nenulová hodnota

•

e-mail ve správném tvaru

•

celo£íselný vstup

•

£i libovolné dal²í pravidlo s vyuºitím regulárního p°íkazu (pravidla)

Ukázka:

$form->addText('email','emailová adresa', 30)-> addRule(Form::FILLED,'Je nutné vyplnit e-mailovou adresu ve správném tvaru!');

Kapitola 6

Testování Tato kapitola se zabývá testováním webového portálu z hlediska validity zdrojového kódu, srovnáním zobrazení a funk£nosti v r·zných webových prohlíºe£ích a samoz°ejm¥ i návrhem a pr·b¥hem uºivatelských test·.

6.1 Validita Validita zdrojových kód· p°i vytvá°ení webových aplikací je nesmírn¥ d·leºitá. Cílem programátor· je vytvo°it aplikaci, která se ve výsledném zobrazení u uºivatel· navzájem od sebe neli²í a je zárove¬ shodná s tou, kterou programátor zamý²lel vytvo°it. Zpracování nevalidního kódu r·znými prohlíºe£i se ve výsledném vykreslení webové stránky m·ºe velmi výrazn¥ li²it. Dal²ím známým problémem je p°izp·sobení webových stránek i pro dnes star²í a £asto nedporu£ované verze webových prohlíºe£·. V dne²ní dob¥ neustále stoupá po£et uºivatel·, kte°í pouºívají k prohlíºení web· nov¥j²í a nov¥j²í verze prohlíºe£·, a tak klesá bezprost°ední nutnost p°izp·sobovat i ty nejmen²í detaily ve vykreslení u star²ích verzí. Pot°eba validního kódu v²ak z·stává.

6.1.1 Validita zdrojových kód· Test validity zdrojových kód· webového portálu jsem provedl pomocí validátoru konsorcia W3C [9], který provedl test validity standardu XHTML Strict 1.0. Dal²ím zp·sobem otestování je vyuºití plug-in· HTML validátor· do prohlíºe£e, nap°. Google Chrome £i Mozilla Firefox. Otestování validity HTML dopadlo vpo°ádku bez chyby. Otestování validity kaskádových styl· nezobrazilo také ºádnou chybu, jen n¥kolik varování ohledn¥ nadbyte£ných p°íkaz· barev u textu a p°ebyte£ných bílých mezer. Tato varování v²ak nemají vliv na výslednou validitu ani funk£nost aplikace.

6.2 Internetové prohlíºe£e a kompatibilita Pro otestování kompatibility aplikace byly pouºity následující prohlíºe£e:

•

Mozilla Firefox v3, v3.6

31

32

KAPITOLA 6.

•

Google Chrome v4.1

•

Internet Explorer v7, v8

•

Opera v10.53

TESTOVÁNÍ

Rozdíly v zobrazení n¥kterých komponent se objevily mezi prohlíºe£em Google Chrome a Mozilla Firefox. Prohlíºe£ Mozilla Firefox nezobrazil del²í textový popisek na více °ádcích, ale pokra£oval ve výpisu mimo svoji oblast. Tento problém byl následn¥ vy°e²en úpravou kódu tak, aby se tomuto problému dále p°ede²lo. Otestování kompatibility u v²ech zmín¥ných prohlíºe£· dopadlo vpo°ádku jak po gracké tak i po funk£ní stránce.

6.3 Uºivatelské testy (Usability test) Uºivatelské testy probíhaly celkem u 7 osob, kde byla zastoupena ob¥ pohlaví, r·zné formy zku²eností v po£íta£ovém oboru a v¥kové kategorie. Kaºdý z ú£astník· byl informován nejen o testovaném systému, ale i o pr·b¥hu a vyhodnocení test·. Ú£astníci podstoupili ve²keré p°ipravené testy jak pro zákaznickou, tak i pro administra£ní £ást aplikace. Je d·leºité zmínit, ºe v²ichni ú£astníci dovedou pracovat s internetem, alespo¬ na základní úrovni. P°i v²ech testech jsem byl ú£asten a sledoval chování i p°ípadné reakce kaºdé z testujících osob.

6.4 Testující osoby •

sle£na Petra H., studentka VUT, fakulta stavební, v¥k: 22 let

•

realitní maklé° nejmenované realitní kancelá°e, v¥k: 54 let, zku²enosti s remním systémem

•

pan Roman Ji°ík., zam¥stnanec servisu dotykových panel·, v¥k: neuveden

•

pan Rudolf J.,ml zam¥stnání neuvedeno, v¥k: neuveden, zku²enosti se správou remního webového systému

•

manºelé M. a B. (p°íjmení neuvedeno), v¥k: 43 a 46 let, bez zku²eností se správou webového systému

•

pan Jan Hofman, d·chodce, v¥k: neuveden, základní zku²enosti s internetem

•

+ majitelé Arkadia reality s.r.o.

6.5 Kognitivní testování Testy kognitivního typu primárn¥ slouºí k odhalení chyb, nikoliv k denování metod k jejich odstran¥ní. Celý seznam test· byl rozd¥len na dv¥ kategorie (klient, správa), jak bylo popsáno v odstavci uºivatelských test·. Kaºdý z dále popsaných test· jsem absolvoval i já sám a to jiº p°i vývoji jednotlivých verzí, abych odhalil p°ípadné váºné nedostatky.

6.6.

KLIENTSKÁ ÁST APLIKACE

33

6.6 Klientská £ást aplikace •

Zji²t¥ní adresy a telefonního spojení do sídla spole£nosti (existují dv¥ moºnosti)

•

Vyhledání seznamu inzerát· realitní kacelá°e podle ur£itých kritérií (minimální cena, okres, kategorie nemovitosti,...)

•

Vloºení nové poptávky do systému realitní kancelá°e

•

Nalezení m¥síce a roku vzniku spole£nosti Arkadia reality, s.r.o.

•

Vyti²t¥ní detailního výpisu vlastností u inzerátu konkrétního eviden£ního £ísla

6.7 Správa systému (administrace) 1. Vloºení nového inzerátu do systému (hodnoty pro vypln¥ní byly poskytnuty na papí°e) 2. P°idání nového uºivatele do systému (maklé°e realitní kancelá°e) 3. Odbavit (zm¥nit stav) konkrétní poptávky 4. Upravit ve²keré kontaktní informace u sídla spole£nosti 5. Opravení ceny a okresu u jednoho z inzerát· 6. Odstran¥ní inzerátu 7. P°idání dodate£ných fotograí pro konkrétní inzerát 8. Odstran¥ní nevhodné fotograe u konkrétního inzerátu 9. P°idání nové sluºby realitní kancelá°e

6.8 Výsledky test· 6.8.1 Klientská £ást U prvního testu, kde se zji²óvala adresa a telefonní kontakt do sídla Arkadie, existují dv¥ moºnosti pr·chodu (°e²ení). Prvním je pov²imnutí se, ºe tyto informace jsou jiº na úvodní stránce ve vertikálním menu. Druhým (£ast¥ji voleným) °e²ením byl p°esun v¥t²iny uºivatel· do sekce kontakty. Pouze jedna z testujících osob hledala nejd°íve pot°ebné informace v sekci o nás a aº poté v kontaktech. Celý tento test dopadl úsp¥²n¥, kaºdému z ú£astníku se vcelku rychle poda°ilo nalézt pot°ebné informace. T°etí test vloºení nové poptávky odhalil u jedné z ú£astník· testu problém s nutností vypln¥ní e-mailové adresy. Tento uºivatel nevlastní svoji po²tovní schránku. Povinnost vyplnit poloºku e-mail byla po tomto testu odstran¥na. Zbývající testy dopadly více neº dob°e, kaºdý z ú£astník· v po°ádku splnil ve²keré úkony rychle a bez men²ích potíºí.

34

KAPITOLA 6.

TESTOVÁNÍ

6.8.2 Správa systému (administrace) Testování administra£ní £ásti bylo dle o£ekávání o n¥co náro£n¥j²í neº test klientské £ásti. Vzhledem k nulovým nebo minimálním zku²enostem poloviny testovacích uºivatel· bylo spln¥ní n¥kterých úkol· del²í. D·vodem bylo podstatn¥ del²í menu nabídek akcí neº v klientské £ásti. Po vyhodnocení tohoto testu bylo menu rozd¥leno do dvou £ástí, aby úkoly byly opticky více od sebe odd¥lené. Tento test se po zm¥nách zopakoval a výsledky v¥t²iny zú£astn¥ných byly o poznání rychlej²í.

Kapitola 7

Záv¥r Hlavním cílem této bakalá°ské práce byla analýza poºadavk· a kompletní návrh webového systému pro realitní kancelá° Arkadia reality s.r.o. Pro návrh p°ehledného systému byly vytvo°eny papírové prototypy, které byly otestovány a zárove¬ upravovány podle poºadavk· majitel· realitní kancelá°e. Systém se správou nabízených realit, poptávek a informací o spole£nosti byl implementován za pouºití t°ívrstvé architektury, která umoº¬uje v budoucnu snadné úpravy vizuální i technické £ásti £i p°idání dal²ích funkcí. Doba realizace celé práce v£etn¥ uºivatelských test· a vlastního sepsání £iní kolem 280 hodin. Práce na návrhu rozmíst¥ní jednotlivých komponent a vlastním grackém zpracování byla kolem 50ti hodin, konzultace systému 20 hodin, programování vlastní aplikace trvalo p°es 160 hodin a sepsání bakalá°ské práce vyºadovalo 50 hodin.

7.1 Nasazení systému a jeho p°ínos Realitní kancelá° je s vytvo°eným systémem velmi spokojena, proto jeho nasazení do provozu je plánováno v pr·b¥hu m¥síce £ervna 2010.

35

36

KAPITOLA 7.

ZÁVR

Literatura [1] Y.-S. Chen, Y.-P. Hung, and C.-S. Fuh. winner-update strategy. [2] M. Koer.

Fast block matching algorithm based on the

IEEE Transactions On Image Processing, 10(8):12121222, 2001.

Mistrovství v MySQL 5,

volume 1. Copmuter Press, a.s., nám. 28. dubna 48,

635 00 Brno, 1st edition, 2007. [3] Webová prezentace arkadia reality, s.r.o.

http://arkadiareality.cz/,

stav z 29. 4. 2010.

[4] Ociální stránky databázové knihovny dibi.

http://dibiphp.com/,

stav z 20. 5. 2010.

[5] Webový realitní server nemovitosti.cz.

http://nemovitosti.cz/,

stav z 3. 3. 2010.

[6] Ociální stránky frameworku nette.

http://nettephp.com/,

stav z 20. 5. 2010.

[7] Rozli²ení obrazovky vs. okno prohlíºe£e.

http://www.strafelda.cz/rozliseni-obrazovky-okno-prohlizece/, 25. 5. 2010. [8] Realitní server sreality.cz.

http://sreality.cz/,

stav z 24. 5. 2010.

[9] World wide web w3c consorcium.

http://w3.org/,

stav z 5. 2. 2010.

37

stav

ze

38

LITERATURA

P°íloha A

Seznam pouºitých zkratek AJAX ARK

- Asynchronous JavaScript and XML

- Asociace realitních kancelá°í, R

CSRF CSS

- Cross site request forgery

- Cascading style sheet

VUT FK

- Foreign key

FTP

- File Transfer Protocol

HTML ID

- eské vysoké u£ení technické

- Hyper Text Markup Language

- Identication

IDE

- Integrated development environment

JPEG

- Joint Photographic Experts Group

MVC

- Model - View - Controller

MVP

- Model - View - Presenter

PHP

- PHP: Hypertext Preprocesor

PX

- pixel, základní obrazový prvek

RK

- Realitní kancelá°

SEO

- Search Engine Optimalisation

SQL

- Structured Query Language

TCP/IP UML

- Transmission Control Protocol

- Unied Modeling Language

39

40

PÍLOHA A.

W3C

- World Wide Web Consorcium

XML

- Exstensible Markup Language

XSS

- Cross - site - Scripting

HTTP

- Hypertext Transfer Protocol

SEZNAM POUITÝCH ZKRATEK

P°íloha B

Obsah p°iloºeného CD Na p°iloºeném CD se nachází text této bakalá°ské práce ve formátech TEX a PDF, zdrojové kódy systému a soubor s instrukcemi pro instalaci. Struktura:

•

/bp-text

/tex

∗ ∗

./gures - adresá° obsahující graku bakalá°ské práce havliboh-2010bach.tex - samotný text BP ve formátu TeX

/pdf

∗

havliboh-2010bach.pdf - samotný text BP ve formátu PDF

•

/system - výsledný webový systém obsahující zdrojové kódy a gracké soubory

•

readme.txt - textový soubor s instala£ními pokyny, SW a HW poºadavky

41

42

PÍLOHA B.

OBSAH PILOENÉHO CD

P°íloha C

Instala£ní a uºivatelská p°íru£ka Tato p°íru£ka obsahuje popis postupu p°i instalaci systému do provozu. 1. Prvním krokem je zkopírování obsahu adresá°e

system

do ko°enového adresá°e na

serveru. Po této akci by adresá°ová struktura na serveru m¥la vypadat následovn¥:

•

./app

•

./css

•

./images

•

./js

•

./libs

•

index.php

•

.htaccess

•

favicon.ico

•

robots.txt

2. Dále je pot°eba nastavit ve²kerá p°ístupová práva pro adresá°e

log

a

temp,

které se

nacházejí v adresá°í ./app na hodnotu 777. 3. Pomocí aplikace pro správu databáze u poskytovatele hostingu je nutné vytvo°it databázi pro systém. Vyuºijte funkci import a jako zdrojový soubor zvolte db.sql, který se nachází v adresá°i ./app/install. Po úsp¥²ném importování struktury databáze, adresá° install smaºte ze serveru. 4. V souboru cong.ini a bootstrap.php je nutné nastavit uºivatelské jméno a heslo, pot°ebné pro p°ístup k databázi. Dále je nutné vyplnit název databáze, který je shodný s názvem databáze, který vytvo°il p°edchozí import. 5. instalace je dokon£ena. Nyní je aplikace na webu jiº pln¥ funk£ní. 6. Je nutné zm¥nit po£áte£ní heslo uºivatelského ú£tu

admin, které je shodné se jménem -

tedy "admin". Tato operace se provede v administraci systému na adrese: http:///admin

43

44

PÍLOHA C.

INSTALANÍ A UIVATELSKÁ PÍRUKA

C.1 Ukázky aplikace s realistickými daty P°i náv²t¥ve b¥ºícího systému realitní kancelá°e Arkadia reality s.r.o, se nejprve zobrazí úvodní stránka, kde je vypsáno 6 nejnov¥j²ích inzerát· a jedna ak£ní nabídka. V p°ípad¥, ºe uºivatel má zájem o zobrazení detailu ohledn¥ n¥které z t¥chto nabídek, klikne na odkaz "detail".

Domeč eknav enk ov ě

Obrázek C.1: Úvodní stránka - vý°ez

Po p°esunu na stránku s detaily se uºivateli zobrazí p°ehledný výpis ve²kerých hodnot k danému inzerátu, v£etn¥ fotograí. Náv²t¥vník má také moºnost krom¥ vyhledávání i nabídnout RK svoji nemovitost. K tomu slouºí poptávkový formulá°, na který vede odkaz v hlavním menu. Po úsp¥²ném vypln¥ní formulá°e jsou data odeslána do databáze RK, kde £ekají na vyhodnocení n¥kterým z maklé°· Arkadia reality, s.r.o. Ke správ¥ ve²kerých informací na webu slouºí zam¥stnanc·m RK tzv. Správce. Do správce se uºivatel dostane po úsp¥²ném p°ihlá²ení na adrese /admin.

C.1.

UKÁZKY APLIKACE S REALISTICKÝMI DATY

Obrázek C.2: Detail inzerátu

Obrázek C.3: Vloºení poptávky

45

46

PÍLOHA C.

INSTALANÍ A UIVATELSKÁ PÍRUKA

Obrázek C.4: P°ihla²ování do Správce

Informa ní systém pro realitní kancelá. Bohumil Havlí ek

Recommend Documents