VYSOK ŠKOLA EKONOMICKÁ V PRAZE VYŠŠÍ ODBORNÁ ŠKOLA INFORMAČNÍCH SLUŽEB
Projekt Návrh a implementace systému správy obsluhy pro informační screen VOŠIS Zadavatel: Ing. Antonín Skopec
Petr Bednář – vedoucí týmu Ondřej Vandas – zástupce vedoucího týmu Martin Černý Josef Dufek Luboš Souček
11.12.2011
1. Zadání a cíl projektu Hlavním cílem zadaného projektu je renovovat aplikaci pro načítání dat a jejich zobrazování na vstupní obrazovce LCD v budově školy VOŠIS. Dále je úkolem navrhnout, co by se mělo na úvodní obrazovce promítat a v jaké formě. Zadavatel je nespokojen především s nespolehlivostí dosavadního řešení a časově náročnou obsluhou. V současné době promítá počítač s operačním systémem Windows XP svoji obrazovku na LCD. Na počítači je spuštěna aplikace Opera, která je přepnutá do Fullscreen režimu. Pomocí skriptu je přepínáno mezi jednotlivými stránkami. Požadavky na aplikaci jsou komunikace s MySQL databází jednoduché ovládání. Jednoduchostí ovládání je myšleno, že nebude potřeba měnit zdrojový kód, ručně znovu načítat a přihlašovat se. Data se budou aktualizovat samy. Dále je třeba umožnit zobrazování všech nově navrhnutých dat. Se zadavatelem panem Ing. Antonínem Skopcem jsme se dohodli na možnosti zobrazování obrázků.
1.1.
USE Case diagram
Se systémem vstupují do kontaktu dva aktéři, uživatel systému a jeho správce. Všechny činnosti, které mohou aktéři v systému vykonávat, jsou propojeny s aktéry pomocí vazeb. Z diagramu tak máme možnost vyčíst, že správce systému může například vložit záznam do databáze, editovat obsah, odstranit záznam a další činnosti. Uživatel je o proti správci pasivním aktérem v systému, který má pouze možnost prohlížet výstupy v podobě textu nebo obrázků na informačním panelu. Některé činnosti jsou rozšířeny pomocí speciálních vazeb include a extend. Include znamená, že činnost předcházející zahrnuje činnost (činnosti) následující. V diagramu se například jedná o činnost editovat obsah, která zahrnuje činnosti vložit obrázek a vložit textový soubor. Extend znamená, že jeden use case rozšiřuje druhý use case. Toto můžeme opět uvést na příkladu v diagramu, kde činnost vložit obrázek je rozšířena o činnost převést z jiného formátu.
2. Harmonogram řešení projektu 26.9 První hodina Na první hodině jsme se dozvěděli, čeho se bude předmět Projekt týkat, a domluvili jsme se na složení našeho týmu. Dále si od nás Petr Bednář vzal naše emailové adresy, aby nás mohl kontaktovat kvůli volbě vedoucího týmu a tématu naší práce. 3.10 Druhá hodina Po elektronické komunikaci byl vedoucím týmu zvolen Petr Bednář a Ondřej Vandas jeho zástupcem. Zvolili jsme si téma Návrh a implementace systému správy obsahu pro informační screen VOŠIS. Dále byl Ondřej Vandas pověřen Petrem Bednářem kontaktoval ing. Skopce a dohodl s ním termín konzultace k zadání daného tématu. Na konzultaci jsme se dostavili v pondělí 10.10.2011 v 8 hodin. Bylo nám sděleno zadání našeho projektu. 10.10 Třetí hodina Po konzultaci jsme začali vymýšlet možná řešení zadaného projektu. Jako nejlepší možnost jsme zvolili vytvořit webovou stránku, která za pomocí PHP bude načítat nejnovější aktuality ze školní databáze, bude načítat obrázky ze složky, která bude umístěná na PC, který je spojen s televizí. Po vybrání této možnosti nám byla vedoucím týmu rozdělena práce a to následovně: Petr Bednář- dokumentace a kontrola Ondřej Vandas- PHP kód, dokumentace a kontrola Martin Černý - Popis PHP, instalace XAMPP a dokumentace Josef Dufek- Diagramy a dokumentace Luboš Souček- HTML kód a CSS styly 17.10 Čtvrtá hodina Luboš Souček předal Ondřeji Vandasovi HTML kód stránky a CSS styly.
24.10 Pátá hodina Ondřej Vandas dokončil PHP kód pro stránky. Začali jsme s dokumentací. 7.11 Šestá hodina Kompletace dokumentace. 28.11 Prezentace věcných výsledků naší práce. 12.12 Dokončení dokumentace. 22.12 Odevzdání dokumentace.
3. Technická dokumentace řešení projektu 3.1.
XAMPP
Nainstalujete program XAMPP. Program XAMPP Lite dostupný z http://www.apachefriends.org/en/xampp.html obsahuje Apache a MySQL, které budeme potřebovat. Doporučujeme zachovat výchozí konfiguraci. Po nainstalování zapnete server ikonou „xampp-control.exe“. V otevřeném okně spustíte jednotlivé komponenty stisknutím tlačítka „Start“. Následně se u příslušné komponenty objeví Running. Zástupce programu přesuňte do složky „Po spuštění“. Server se bude spouštět automaticky při zapnutí PC.
Rozbalte soubor sks.7z a složku zkopírujte do složky xampp/htdocs standardně se nachází v C:/Program Files/
V nejnovějších verzích prohlížečů Mozilla Firefox, Google Chrome nebo Internet Exporer se stránka zobrazí po vložení http://127.0.0.1/sks/ do příkazového řádku.
Stránka se každých 60 sekund automaticky aktualizuj. Během aktualizace se obnoví aktuality a náhodně se vybere nový obrázek. Obrázek musí být vložen ve složce xampp/htdocs/obrazky.
3.2.
PHP
Celá stránka se automaticky každých 60 sekund obnoví.
Stránka se připojí k serveru s IP adresou 195.113.78.99, přihlašovacím jménem skola a heslem skola.
Vybere se databáze skola.
Vyhledá 20 nejnovějších aktualit, seřazených od nejnovější.
Zobrazí datum a autora aktuality.
Zobrazí text aktuality.
Načte obrázek ze složky obrazky. Obrázky se střídají při obnovení stránky.
Vyhledá nejnovější aktualitu.
Vypíše nejnovější aktualitu.
3.3.
CSS
3.3.1. CSS pro rámec s načítanými obrázky hlavni {
// Odkaz na příslušný CSS styl
font-family: "Times New Roman", Times, serif;
// Typ písma
font-size: 12px;
// Velikost písma
font-style: normal;
// Styl písma
line-height: normal;
// Styl podtržení písma
font-weight: normal;
// Styl tloušťky písma
font-variant: normal;
// Varianta stylu písma
color: #000000;
// Barva písma
background-attachment: fixed;
// Fixace pozadí
background-color: #CCCCCC;
// Barva pozadí
background-repeat: no-repeat;
// Nastavení neopakující se ho pozadí
border-left-width: medium;
// Levá čára tabulky bude středně silná
border-top-style: none;
// Horní čára tabulky se nebude zobrazovat
border-right-style: none;
// Pravá čára tabulky se nebude zobrazovat
border-bottom-style: none;
// Spodní čára tabulky se nebude zobrazovat
border-left-style: solid;
// Styl levé čáry tabulky
border-left-color: #174D41;
// Barva levé čáry tabulky
} 3.3.2. CSS pro levý rámec s aktualitami .hlavni2 {
// Odkaz na příslušný CSS styl
font-family: "Times New Roman", Times, serif;
// Typ písma
font-size: 12px;
// Velikost písma
font-style: normal;
// Styl písma
line-height: normal;
// Styl podtržení písma
font-weight: normal;
// Styl tloušťky písma
font-variant: normal;
// Varianta stylu písma
color: #000000;
// Barva písma
background-attachment: fixed;
// Fixace pozadí
background-color: #CCCCCC;
// Barva pozadí
background-repeat: no-repeat;
// Nastavení neopakující se ho pozadí
border-top-style: none;
// Horní čára tabulky se nebude zobrazovat
border-right-style: none;
// Pravá čára tabulky se nebude zobrazovat
border-bottom-style: none;
// Spodní čára tabulky se nebude zobrazovat
border-left-style: none;
// Levá čára tabulky se nebude zobrazovat
} 3.3.3. CSS pro levý horní roh obrázek a flash .panel { // Odkaz na příslušný CSS styl background-attachment: scroll;
// Nastavení posouvání pozadí
background-color: #174D41;
// Barva pozadí
background-repeat: repeat;
// Nastavení opakující se ho pozadí
border-top-style: none;
// Horní čára tabulky se nebude zobrazovat
border-right-style: none;
// Pravá čára tabulky se nebude zobrazovat
border-bottom-style: none;
// Spodní čára tabulky se nebude zobrazovat
border-left-style: none;
// Levá čára tabulky se nebude zobrazovat
font-size: 70px;
// Velikost písma
font-style: normal;
// Styl písma
line-height: normal;
// Styl podtržení písma
font-weight: normal;
// Styl tloušťky písma
font-variant: normal;
// Varianta stylu písma
font-family: "Times New Roman", Times, serif;
// Typ písma
color: #FFFFFF;
// Barva písma
} 3.3.4. CSS pro pravý horní roh s Vítejte .panel2 {
}
// Odkaz na příslušný CSS styl
font-family: "Times New Roman", Times, serif;
// Typ písma
font-size: 72px;
// Velikost písma
font-style: normal;
// Styl písma
line-height: normal;
// Styl podtržení písma
font-weight: normal;
// Styl tloušťky písma
font-variant: normal;
// Varianta stylu písma
color: #FFFFFF;
// Barva písma
background-attachment: scroll;
// Nastavení posouvání pozadí
background-color: #174D41;
// Barva pozadí
3.3.5. CSS pro spodní rámec s pohybujícími se aktualitami .spodni { // Odkaz na příslušný CSS styl font-family: "Times New Roman", Times, serif;
// Typ písma
font-size: 16px;
// Velikost písma
font-style: normal;
// Styl písma
line-height: normal;
// Styl podtržení písma
font-weight: normal;
// Styl tloušťky písma
font-variant: normal;
// Varianta stylu písma
background-color: #174D41;
// Barva pozadí
border-top-style: none;
// Horní čára tabulky se nebude zobrazovat
border-right-style: none;
// Pravá čára tabulky se nebude zobrazovat
border-bottom-style: none;
// Spodní čára tabulky se nebude zobrazovat
border-left-style: none;
// Levá čára tabulky se nebude zobrazovat
color: #FFFFFF;
// Barva písma
}
4. Jmenovitý podíl členů týmu na řešení projektu Petr Bednář Kompletace, vedení týmu, kontrola Ondřej Vandas Vytvoření PHP kódu, vedení týmu Martin Černý Kompletace materiálu, vytvoření technické dokumentace Luboš Souček HTML kód, CSS styly Josef Dufek Diagramy, dokumentace
5. Problémy, s nimiž se tým setkal při řešení projektu Problémy spočívali především v technickém řešení. Ze začátku se nám nedařilo stanovit, jak bude úloha řešena.
6. Přínos pro členy týmu Petr Bednář V tomto projektu jsem zjistil jaké to je vést skupinu lidí a věřím, že mi to bude ku prospěchu v praktickém životě. A hlavně, že ne vždy jde vše po dobrém. Ondřej Vandas Při tomto projektu, jsem se jako zástupce vedoucího týmu naučil v jeho nepřítomnosti vést tým. Dále jsem si zopakoval své znalosti kódu PHP, který jsme v projektu použili. Martin Černý Přínosem pro mě byla především práce v týmu a tvorba dokumentace, kterou začínám využívat v praxi. Zjistil jsem, že po správné analýze úkolů a jejich rozdělení, pracuje tým efektivněji. Během vypracování dokumentace pro PHP kód jsem mohl využít znalosti z předmětu databáze pro web. Bohužel jsem znalosti získal, když už byl zdrojový kód vytvořen a tak jsem se nemohl podílet na jeho tvorbě. Největší problémem bylo stanovení počátečního postupu, kdy před nás byl položen problém a měly jsme ho vyřešit podle vlastního zvážení. Luboš Souček Naučil jsem se pracovat s programem Macromedia Dreamweaver 8 a dozvěděl jsem se jak efektivněji pracovat s CSS. Josef Dufek Velkým přínosem pro mě byla možnost vyzkoušet si práci v týmu. Zjistil jsem, jak se v praxi delegují úkoly, jak se kontroluje jejich plnění, jak se píší zápisy ze schůzí a mnoho dalších věcí spojených s týmovou prací. Také jsem se mnoho přiučil od kolegů, kteří jsou zběhlejší v programování pomocí php a css. Z literatury, kterou jsem vyhledal a přečetl z důvodu porozumění problému jsem se dozvěděl, jakým způsobem fungují takovéto informační panely, jaké jsou oblasti jejich nasazení a jaké programové vybavení je možno využít při implementaci.
