ݺߣ

ݺߣShare a Scribd company logo
Žilinská univerzita v Žiline 
Elektrotechnická fakulta 
Návrh a realizácia web stránky 
skriptovacím jazykom PHP vrátane 
administračného rozhrania 
Diplomová práca 
Študent: Bc. Tomáš Bíro 
Multimediálne inžinierstvo 
Vedúci diplomovej práce: Ing. Miroslav Markovič, PhD. 
Žilina 2014
ZADANIE DIPLOMOVEJ PRÁCE 
Navrhnite riešenie webovej stránky vrátane 
administračného prostredia pre zvolený podnikateľský 
subjekt, poskytujúci služby zákazníkom. 
 analýza a teoretický rozbor technológie vytvárania web 
stránok (PHP) 
 tvorba grafického návrhu stránky a objektov pomocou 
grafického programu, animované prvky (CSS3) 
 naprogramovanie navrhnutej web stránky 
(PHP + HTML5, CSS3 a SQL) 
 tvorba admin rozhrania pre úpravu obsahu stránky 
(vytváranie, pridávanie, úprava a mazanie článkov, 
obrázkov...) 
 umiestnenie webovej stránky na server a optimalizácia 
pre prehliadače 
2/22
Ciele diplomovej práce 
vytvorenie pohľadu do vzniku histórie World 
Wide Webu (www) a jeho budovania 
spojenie teórie s praxou - vlastné návrhy 
riešení a implementácia nadobudnutých 
znalostí pre praktickú realizáciu 
tvorba web stránky a administračného 
rozhrania (optimalizácia) – praktická časť 
3/22
Analýza a teoretický rozbor technológie vytvárania web 
stránok pomocou skriptovacieho jazyka PHP 
PHP („Personal Home Page“) 
- PHP/FI („Forms Interpreter“) – r. 1995 Rasmus Lerdorf 
- r. 1996 nová verzia - komunikácia s databázami, vývoj web 
aplikácií (užívateľ) a označovanie PHP 2.0 (plná verzia) 
- verzia PHP 3.0 – rozsiahle štruktúry databáz, práca s protokolmi a 
aplikačnými funkciami, konzistentnejší syntax 
- verzia PHP 4.0 – r. 1999 nový hnací prostriedok „Zend Engine“ 
(výkonové vylepšenia, podpora web serverov, HTTP relácií, 
bezpečnejší spôsob spracovania, cudzojazyčná podpora) 
- verzia PHP 5.0 – posledná známa verzia (Consortium W3) 
4/22
Princíp PHP 
5/22 
• PRÍKLAD ZÁPISU  html, <? PHP skript ?> pokračovanie html 
• prípona *.php 
Výstup: html, výsledok PHP skriptu pokračovanie html
Skriptovací jazyk HTML5 
 najnovší HTML štandard 
 vznik – web aplikácie, vývoj prehliadačov 
 spätná kompatibilita 
 funkčné vylepšenia – prvky dynamiky webu 
 zvýšenie kvality web stránok 
 efektívnejšia štruktúra web dokumentu 
6/22
Kaskádové štýly CSS3 
,,Nové možnosti zaručujúce 
KVALITNÝ WEB a DIZAJN na vysokej úrovni!“ 
 spätná kompatibilita 
 nové funkcie  výsledné správanie elementov 
 moduly + časti starších verzií 
 textové efekty, 2D/3D transformácia, pozadia a 
ohraničenia... 
 zastúpenie  animácie a prechody 
7/22
HTML5 
VÝHODY: 
 vylepšený design 
 jednoduchšia a rýchlejšia 
implementácia 
 prehľadnejšia a efektívnejšia 
štruktúra kódu 
 nový spôsob práce s audiom a 
videom... 
NEVÝHODY: 
 Internet Explorer 8 (Windows 
XP) 
8/22 
CSS3 
VÝHODY: 
 animácie, prechody, 
transformácie 
 rozšírená ponuka vlastností – 
text, tabuľky... 
 vylepšená forma zápisu, grafické 
spestrenie... 
NEVÝHODY: 
 podpora prehliadačov (2015), 
optimalizácia
Vlastné návrhy riešení webovej stránky a administračného 
rozhrania 
• analýza metód tvorby web stránok – skriptovací 
jazyk PHP s využitím HTML5 a CSS3 (novinky) 
• implementácia znalostí a získaných poznatkov 
• teoretický popis funkcií 
• praktické výstupy 
• vlastná webová stránka podnikateľského subjektu 
(kaderníctvo) + administračné rozhranie 
www.kadernictvo-zita.maweb.eu 
9/22
Vlastná web stránka 
10/22
Vlastné administračné rozhranie 
11/22
Ukážka: Nahrávanie obrázkov 
12/22
Ďakujem za pozornosť. 
Autor: Bc. Tomáš Bíro 
13/22
14/22
ODBORNÉ POSUDKY DIPLOMOVEJ PRÁCE 
• vedúci DP - Ing. Miroslav Markovič, PhD. 
▫ otázky: 0 
• oponent DP - Ing. Peter Kortiš, PhD. 
▫ otázky: 
15/22 
1. Vysvetlite pojmy sieťový prefix, dĺžka sieťového prefixu 
a sieťová adresa. 
2. Aký je význam polí update a delete v tabuľkách 
databázy? 
3. Považujete použitie MD5 hash funkcie za bezpečné? 
Akým spôsobom by sa dala zvýšiť bezpečnosť spätného 
zistenia hesiel z hash sumy?
1. Vysvetlite pojmy sieťový prefix, dĺžka sieťového 
prefixu a sieťová adresa. 
• adresovanie v paketových sieťach s IPv4 
▫ sieťová adresa - IP adresa pre IP protokol – 32 bitové 
číslo 
 dekadický zápis 4 čísiel oddelených bodkou 
(príklad: 192.168.0.1.) 
 2 časti: network portion (sieťová časť) 
host portion (hostiteľská časť) 
▫ zápis adries + maska (počet prvých bitov pre 
,,network portion“) 
16/22
Adresovanie v paketových sieťach s IPv6 
• IPv6 
▫ sieťová adresa - IP adresa pre protokol IPv6 – 128 
bitové číslo 
 hexadecimálny tvar – 8 štvoríc hexa znakov oddelených 
dvojbodkou 
 2001:0db8:0000:0000:0000:0000:1428:57ab 
2001:0db8:0000:0000:0000::1428:57ab 
2001:0db8:0:0:0:0:1428:57ab 
2001:0db8:0:0::1428:57ab 
2001:0db8::1428:57ab 
2001:db8::1428:57ab 
17/22
• pomoc s rozdelením siete  viacero podsietí 
▫ IP adresa/číslo (počet jednotkových bitov v maske 
podsiete) 
▫ skrátená forma zápisu = (sieťový) prefix 
18/22 
Maska podsiete
• subnetting = podsieťovanie = vytváranie podsietí 
• predĺženie prefixu siete oproti pôvodnému 
▫ požičanie ďalších bitov z ,,host portion“ pre 
adresovanie podsietí 
19/22 
Sieťové triedy
20/22 
2. Aký je význam polí update a delete v tabuľkách databázy? 
• význam  pomocné premenné 
▫ dôvody použitia: 
 zobrazovanie v tabuľkách 
 bezpečná editácia 
• zobrazovanie v tabuľkách rozhrania 
• bez prítomnosti premenných  žiadna editácia a 
mazanie 
• bezpečná editácia jednotlivých elementárnych častí 
• oddelenie jednotlivých oblastí editácie
3. Považujete použitie MD5 hash funkcie za bezpečné? 
Akým spôsobom by sa dala zvýšiť bezpečnosť spätného 
zistenia hesiel z hash sumy? 
• hashovacie funkcie a metódy jednosmerného 
šifrovania 
▫ PHP hashovacie funkcie: 
 MD5 – najpoužívanejšia, 32 znakov 
 SHA1 – hashovacia funkcia s dĺžkou 40 znakov 
 BASE64/Encode (alebo aj Decode) 
21/22
Zložené hashovacie funkcie SHA1 a MD5 
• princíp  vnorenie viacerých hashovacích 
funkcií a šifrovanie jednej pomocou druhej 
• príklad: 
<?php 
$heslo = "tajne_heslo"; 
$hash = MD5(SHA1("$heslo"."fdhfsjkhfksjdfhsdkf")); 
22/22 
echo $heslo; //vypíše pôvodné heslo 
echo $hash; //vypíše hash hesla vrátane hash-a a dodatku 
?>

More Related Content

Similar to Návrh a realizácia web stránky skriptovacím jazykom PHP vrátane administračného rozhrania (20)

Presentation Bsp Skupina Bez Referencii
Presentation Bsp Skupina   Bez ReferenciiPresentation Bsp Skupina   Bez Referencii
Presentation Bsp Skupina Bez Referencii
zelinkova
Drupal ako nízkonákladová platforma pre business web aplikácie
Drupal ako nízkonákladová platforma pre business web aplikácieDrupal ako nízkonákladová platforma pre business web aplikácie
Drupal ako nízkonákladová platforma pre business web aplikácie
Jozef Toth
ONLINE KLUB - Juraj Grešš, WEBGLOBE - Domény a webhosting
ONLINE KLUB - Juraj Grešš, WEBGLOBE - Domény a webhostingONLINE KLUB - Juraj Grešš, WEBGLOBE - Domény a webhosting
ONLINE KLUB - Juraj Grešš, WEBGLOBE - Domény a webhosting
Katarína Molnárová
Webikon Wordpress - ONLINEKLUB
Webikon Wordpress - ONLINEKLUBWebikon Wordpress - ONLINEKLUB
Webikon Wordpress - ONLINEKLUB
Katarína Molnárová
ONLINE KLUB - Peťo Nemčok, Webikon - Wordpress
ONLINE KLUB - Peťo Nemčok, Webikon - WordpressONLINE KLUB - Peťo Nemčok, Webikon - Wordpress
ONLINE KLUB - Peťo Nemčok, Webikon - Wordpress
Katarína Molnárová
Respnsive webdesign (Ivan Potančok)
Respnsive webdesign (Ivan Potančok)Respnsive webdesign (Ivan Potančok)
Respnsive webdesign (Ivan Potančok)
wcsk
Respnsive webdesign (Ivan Potančok)
Respnsive webdesign (Ivan Potančok)Respnsive webdesign (Ivan Potančok)
Respnsive webdesign (Ivan Potančok)
Savione
responsive webdesign - vibration.sk
responsive webdesign - vibration.skresponsive webdesign - vibration.sk
responsive webdesign - vibration.sk
vibration.sk
Require.JS & Backbone.JS
Require.JS & Backbone.JSRequire.JS & Backbone.JS
Require.JS & Backbone.JS
srigi
WebJET Cloud pre hosting partnerov
WebJET Cloud pre hosting partnerovWebJET Cloud pre hosting partnerov
WebJET Cloud pre hosting partnerov
lubosbalat
Čo sú to webové aplikácie ?
Čo sú to webové aplikácie ?Čo sú to webové aplikácie ?
Čo sú to webové aplikácie ?
Drahoslav Madar
Deltacloud Presentation OpenHouse 2010
Deltacloud Presentation OpenHouse 2010Deltacloud Presentation OpenHouse 2010
Deltacloud Presentation OpenHouse 2010
Michal Fojtik
Wordcamp 2015, Juraj Hanták - Ako zvládnúť rast webu
Wordcamp 2015, Juraj Hanták - Ako zvládnúť rast webuWordcamp 2015, Juraj Hanták - Ako zvládnúť rast webu
Wordcamp 2015, Juraj Hanták - Ako zvládnúť rast webu
Webglobe - Yegon
Co je Drupal
Co je DrupalCo je Drupal
Co je Drupal
Jozef Toth
Cncf meetup-service-mesh-sk
Cncf meetup-service-mesh-skCncf meetup-service-mesh-sk
Cncf meetup-service-mesh-sk
Juraj Hantak
Virtualizácia v banke - prípadová štúdia
Virtualizácia v banke - prípadová štúdiaVirtualizácia v banke - prípadová štúdia
Virtualizácia v banke - prípadová štúdia
Martin Gucky
Prípadová štúdia implementácie SAP BPC v spoločnosti JAVYS
Prípadová štúdia implementácie SAP BPC v spoločnosti JAVYSPrípadová štúdia implementácie SAP BPC v spoločnosti JAVYS
Prípadová štúdia implementácie SAP BPC v spoločnosti JAVYS
Ness Technologies
Drupal - Open Source CMS
Drupal - Open Source CMSDrupal - Open Source CMS
Drupal - Open Source CMS
Jozef Toth
S&T: Virtualizácia desktopov - pilot
S&T: Virtualizácia desktopov - pilotS&T: Virtualizácia desktopov - pilot
S&T: Virtualizácia desktopov - pilot
ASBIS SK
Presentation Bsp Skupina Bez Referencii
Presentation Bsp Skupina   Bez ReferenciiPresentation Bsp Skupina   Bez Referencii
Presentation Bsp Skupina Bez Referencii
zelinkova
Drupal ako nízkonákladová platforma pre business web aplikácie
Drupal ako nízkonákladová platforma pre business web aplikácieDrupal ako nízkonákladová platforma pre business web aplikácie
Drupal ako nízkonákladová platforma pre business web aplikácie
Jozef Toth
ONLINE KLUB - Juraj Grešš, WEBGLOBE - Domény a webhosting
ONLINE KLUB - Juraj Grešš, WEBGLOBE - Domény a webhostingONLINE KLUB - Juraj Grešš, WEBGLOBE - Domény a webhosting
ONLINE KLUB - Juraj Grešš, WEBGLOBE - Domény a webhosting
Katarína Molnárová
ONLINE KLUB - Peťo Nemčok, Webikon - Wordpress
ONLINE KLUB - Peťo Nemčok, Webikon - WordpressONLINE KLUB - Peťo Nemčok, Webikon - Wordpress
ONLINE KLUB - Peťo Nemčok, Webikon - Wordpress
Katarína Molnárová
Respnsive webdesign (Ivan Potančok)
Respnsive webdesign (Ivan Potančok)Respnsive webdesign (Ivan Potančok)
Respnsive webdesign (Ivan Potančok)
wcsk
Respnsive webdesign (Ivan Potančok)
Respnsive webdesign (Ivan Potančok)Respnsive webdesign (Ivan Potančok)
Respnsive webdesign (Ivan Potančok)
Savione
responsive webdesign - vibration.sk
responsive webdesign - vibration.skresponsive webdesign - vibration.sk
responsive webdesign - vibration.sk
vibration.sk
Require.JS & Backbone.JS
Require.JS & Backbone.JSRequire.JS & Backbone.JS
Require.JS & Backbone.JS
srigi
WebJET Cloud pre hosting partnerov
WebJET Cloud pre hosting partnerovWebJET Cloud pre hosting partnerov
WebJET Cloud pre hosting partnerov
lubosbalat
Čo sú to webové aplikácie ?
Čo sú to webové aplikácie ?Čo sú to webové aplikácie ?
Čo sú to webové aplikácie ?
Drahoslav Madar
Deltacloud Presentation OpenHouse 2010
Deltacloud Presentation OpenHouse 2010Deltacloud Presentation OpenHouse 2010
Deltacloud Presentation OpenHouse 2010
Michal Fojtik
Wordcamp 2015, Juraj Hanták - Ako zvládnúť rast webu
Wordcamp 2015, Juraj Hanták - Ako zvládnúť rast webuWordcamp 2015, Juraj Hanták - Ako zvládnúť rast webu
Wordcamp 2015, Juraj Hanták - Ako zvládnúť rast webu
Webglobe - Yegon
Cncf meetup-service-mesh-sk
Cncf meetup-service-mesh-skCncf meetup-service-mesh-sk
Cncf meetup-service-mesh-sk
Juraj Hantak
Virtualizácia v banke - prípadová štúdia
Virtualizácia v banke - prípadová štúdiaVirtualizácia v banke - prípadová štúdia
Virtualizácia v banke - prípadová štúdia
Martin Gucky
Prípadová štúdia implementácie SAP BPC v spoločnosti JAVYS
Prípadová štúdia implementácie SAP BPC v spoločnosti JAVYSPrípadová štúdia implementácie SAP BPC v spoločnosti JAVYS
Prípadová štúdia implementácie SAP BPC v spoločnosti JAVYS
Ness Technologies
Drupal - Open Source CMS
Drupal - Open Source CMSDrupal - Open Source CMS
Drupal - Open Source CMS
Jozef Toth
S&T: Virtualizácia desktopov - pilot
S&T: Virtualizácia desktopov - pilotS&T: Virtualizácia desktopov - pilot
S&T: Virtualizácia desktopov - pilot
ASBIS SK

Návrh a realizácia web stránky skriptovacím jazykom PHP vrátane administračného rozhrania

  • 1. Žilinská univerzita v Žiline Elektrotechnická fakulta Návrh a realizácia web stránky skriptovacím jazykom PHP vrátane administračného rozhrania Diplomová práca Študent: Bc. Tomáš Bíro Multimediálne inžinierstvo Vedúci diplomovej práce: Ing. Miroslav Markovič, PhD. Žilina 2014
  • 2. ZADANIE DIPLOMOVEJ PRÁCE Navrhnite riešenie webovej stránky vrátane administračného prostredia pre zvolený podnikateľský subjekt, poskytujúci služby zákazníkom.  analýza a teoretický rozbor technológie vytvárania web stránok (PHP)  tvorba grafického návrhu stránky a objektov pomocou grafického programu, animované prvky (CSS3)  naprogramovanie navrhnutej web stránky (PHP + HTML5, CSS3 a SQL)  tvorba admin rozhrania pre úpravu obsahu stránky (vytváranie, pridávanie, úprava a mazanie článkov, obrázkov...)  umiestnenie webovej stránky na server a optimalizácia pre prehliadače 2/22
  • 3. Ciele diplomovej práce vytvorenie pohľadu do vzniku histórie World Wide Webu (www) a jeho budovania spojenie teórie s praxou - vlastné návrhy riešení a implementácia nadobudnutých znalostí pre praktickú realizáciu tvorba web stránky a administračného rozhrania (optimalizácia) – praktická časť 3/22
  • 4. Analýza a teoretický rozbor technológie vytvárania web stránok pomocou skriptovacieho jazyka PHP PHP („Personal Home Page“) - PHP/FI („Forms Interpreter“) – r. 1995 Rasmus Lerdorf - r. 1996 nová verzia - komunikácia s databázami, vývoj web aplikácií (užívateľ) a označovanie PHP 2.0 (plná verzia) - verzia PHP 3.0 – rozsiahle štruktúry databáz, práca s protokolmi a aplikačnými funkciami, konzistentnejší syntax - verzia PHP 4.0 – r. 1999 nový hnací prostriedok „Zend Engine“ (výkonové vylepšenia, podpora web serverov, HTTP relácií, bezpečnejší spôsob spracovania, cudzojazyčná podpora) - verzia PHP 5.0 – posledná známa verzia (Consortium W3) 4/22
  • 5. Princíp PHP 5/22 • PRÍKLAD ZÁPISU  html, <? PHP skript ?> pokračovanie html • prípona *.php Výstup: html, výsledok PHP skriptu pokračovanie html
  • 6. Skriptovací jazyk HTML5  najnovší HTML štandard  vznik – web aplikácie, vývoj prehliadačov  spätná kompatibilita  funkčné vylepšenia – prvky dynamiky webu  zvýšenie kvality web stránok  efektívnejšia štruktúra web dokumentu 6/22
  • 7. Kaskádové štýly CSS3 ,,Nové možnosti zaručujúce KVALITNÝ WEB a DIZAJN na vysokej úrovni!“  spätná kompatibilita  nové funkcie  výsledné správanie elementov  moduly + časti starších verzií  textové efekty, 2D/3D transformácia, pozadia a ohraničenia...  zastúpenie  animácie a prechody 7/22
  • 8. HTML5 VÝHODY:  vylepšený design  jednoduchšia a rýchlejšia implementácia  prehľadnejšia a efektívnejšia štruktúra kódu  nový spôsob práce s audiom a videom... NEVÝHODY:  Internet Explorer 8 (Windows XP) 8/22 CSS3 VÝHODY:  animácie, prechody, transformácie  rozšírená ponuka vlastností – text, tabuľky...  vylepšená forma zápisu, grafické spestrenie... NEVÝHODY:  podpora prehliadačov (2015), optimalizácia
  • 9. Vlastné návrhy riešení webovej stránky a administračného rozhrania • analýza metód tvorby web stránok – skriptovací jazyk PHP s využitím HTML5 a CSS3 (novinky) • implementácia znalostí a získaných poznatkov • teoretický popis funkcií • praktické výstupy • vlastná webová stránka podnikateľského subjektu (kaderníctvo) + administračné rozhranie www.kadernictvo-zita.maweb.eu 9/22
  • 13. Ďakujem za pozornosť. Autor: Bc. Tomáš Bíro 13/22
  • 14. 14/22
  • 15. ODBORNÉ POSUDKY DIPLOMOVEJ PRÁCE • vedúci DP - Ing. Miroslav Markovič, PhD. ▫ otázky: 0 • oponent DP - Ing. Peter Kortiš, PhD. ▫ otázky: 15/22 1. Vysvetlite pojmy sieťový prefix, dĺžka sieťového prefixu a sieťová adresa. 2. Aký je význam polí update a delete v tabuľkách databázy? 3. Považujete použitie MD5 hash funkcie za bezpečné? Akým spôsobom by sa dala zvýšiť bezpečnosť spätného zistenia hesiel z hash sumy?
  • 16. 1. Vysvetlite pojmy sieťový prefix, dĺžka sieťového prefixu a sieťová adresa. • adresovanie v paketových sieťach s IPv4 ▫ sieťová adresa - IP adresa pre IP protokol – 32 bitové číslo  dekadický zápis 4 čísiel oddelených bodkou (príklad: 192.168.0.1.)  2 časti: network portion (sieťová časť) host portion (hostiteľská časť) ▫ zápis adries + maska (počet prvých bitov pre ,,network portion“) 16/22
  • 17. Adresovanie v paketových sieťach s IPv6 • IPv6 ▫ sieťová adresa - IP adresa pre protokol IPv6 – 128 bitové číslo  hexadecimálny tvar – 8 štvoríc hexa znakov oddelených dvojbodkou  2001:0db8:0000:0000:0000:0000:1428:57ab 2001:0db8:0000:0000:0000::1428:57ab 2001:0db8:0:0:0:0:1428:57ab 2001:0db8:0:0::1428:57ab 2001:0db8::1428:57ab 2001:db8::1428:57ab 17/22
  • 18. • pomoc s rozdelením siete  viacero podsietí ▫ IP adresa/číslo (počet jednotkových bitov v maske podsiete) ▫ skrátená forma zápisu = (sieťový) prefix 18/22 Maska podsiete
  • 19. • subnetting = podsieťovanie = vytváranie podsietí • predĺženie prefixu siete oproti pôvodnému ▫ požičanie ďalších bitov z ,,host portion“ pre adresovanie podsietí 19/22 Sieťové triedy
  • 20. 20/22 2. Aký je význam polí update a delete v tabuľkách databázy? • význam  pomocné premenné ▫ dôvody použitia:  zobrazovanie v tabuľkách  bezpečná editácia • zobrazovanie v tabuľkách rozhrania • bez prítomnosti premenných  žiadna editácia a mazanie • bezpečná editácia jednotlivých elementárnych častí • oddelenie jednotlivých oblastí editácie
  • 21. 3. Považujete použitie MD5 hash funkcie za bezpečné? Akým spôsobom by sa dala zvýšiť bezpečnosť spätného zistenia hesiel z hash sumy? • hashovacie funkcie a metódy jednosmerného šifrovania ▫ PHP hashovacie funkcie:  MD5 – najpoužívanejšia, 32 znakov  SHA1 – hashovacia funkcia s dĺžkou 40 znakov  BASE64/Encode (alebo aj Decode) 21/22
  • 22. Zložené hashovacie funkcie SHA1 a MD5 • princíp  vnorenie viacerých hashovacích funkcií a šifrovanie jednej pomocou druhej • príklad: <?php $heslo = "tajne_heslo"; $hash = MD5(SHA1("$heslo"."fdhfsjkhfksjdfhsdkf")); 22/22 echo $heslo; //vypíše pôvodné heslo echo $hash; //vypíše hash hesla vrátane hash-a a dodatku ?>