Stredná priemyselná škola elektrotechnická
Nám. SNP 8, 921 01 Piešťany
Vlastný projekt
www stránka
riešiteľ
2014
Janko Hraško
Piešťany
ročník štúdia: štvrtý
Stredná priemyselná škola elektrotechnická
Nám. SNP 8, 921 01 Piešťany
Vlastný projekt
www stránka
www.maturitneokruhy.hostei.com
riešitelia
Janko Hraško
2014
Jožko Mrkvička
Piešťany
ročník štúdia: štvrtý
konzultant
Ing. Danica Bačová
Abstrakt
HRAŠKO, Janko: www stránka. [ vlastný projekt ]. Stredná priemyselná škola
elektrotechnická v Piešťanoch. Konzultant Ing. Danica Bačová. SPŠE
Piešťany, 2014. 22 strán.
Cieľom našej práce bolo vytvorenie internetovej stránky pre potreby študentov,
hlavne maturantov, Strednej priemyselnej školy elektrotechnickej v Piešťanoch.
V teoretickej časti dokumentácie sú vysvetlené niektoré základné pojmy
z oblasti vytvárania webových stránok. Nakoniec sa môžete oboznámiť
s funkciami registrácie nového užívateľa a jeho následného prihlásenia. Taktiež
sa dozviete o možnostiach administrácie.
Kľúčové slová: Internet. Web. Webová stránka.
1
Predhovor
Obsah stránky www.maturitneokruhy.hostei.com je určený predovšetkým
študentom
tretích
a
štvrtých
ročníkov
Strednej
priemyselnej
školy
elektrotechnickej v Piešťanoch, ktorí nemajú čas alebo chuť hľadať a
vypracovávať maturitné okruhy. Do obsahu sú zahrnuté základné časti ústnych
maturitných skúšok, ktoré by mal študent ovládať a tiež maturitné testy z
minulých rokov a to od roku 2010 po rok 2013.
Cieľom je podať čitateľovi základy na úspešne zvládnutú maturitu z písomných
a ústnych skúšok z predmetov: slovenský jazyk, matematika, anglický jazyk,
telekomunikačné a počítačové siete, elektrotechnika. Z ústnej časti sú uvedené
len tie najdôležitejšie oblasti jednotlivých predmetov. Snaha bola uviesť čo
najviac príkladov a úloh na konci každej témy z predmetu anglický jazyk.
Podstránky písomných častí obsahujú maturitné testy, kľúče a nahrávky k
týmto testom z portálu www.matura.stuzkova.eu (prevzaté od www.nucem.sk)
a podstránky ústnych častí, nami vypracované okruhy. V podstránkach ústnych
častí pre predmet anglický jazyk sa nachádzajú texty a cvičenia z knihy J.
Berešovej, M. Mackovej, L. Steyne: Nová maturita z angličtiny. Študentom sa
odporúča testy najprv vyplniť a až potom zobraziť výsledky prípadne ukázať
správne odpovede. Aby sa dalo na jednotlivých podstránkach dobre orientovať,
sú navzájom prepojené množstvom odkazov na dobre viditeľných miestach a
tiež mapou podstránok v päte. Registrácia a prihlasovanie sú riešené
vyplňovaním jednoduchých formulárov. Administrátor stránky má možnosť
upravovať, príp. mazať záznamy registrovaných užívateľov.
Čestne vyhlasujem, že som prácu Vlastný projekt vypracoval samostatne s
využitím vlastných teoretických poznatkov i praktických skúseností, získaných
nielen samoštúdiom, ale aj štúdiom na SPŠE Piešťany.
Úprimne ďakujeme konzultantovi prof. Ing. Danici Bačovej za nadobudnuté
vedomosti a ochotu spolupodieľať sa na našom projekte.
2
Obsah
1
Úvod ............................................................................................................ 5
2
Teoretická časť ........................................................................................... 6
3
2.1
Internet ................................................................................................. 6
2.2
Web ...................................................................................................... 6
2.3
Webová stránka.................................................................................... 6
2.3.1
Statické webové stránky ................................................................ 7
2.3.2
Dynamické webové stránky ........................................................... 7
2.4
Bezpečnosť webovej stránky ................................................................ 7
2.5
Optimalizácia pre vyhľadávače SEO .................................................... 8
2.6
Štandardy ............................................................................................. 9
Praktické riešenie stránky ....................................................................... 10
3.1
Štruktúra súborov a priečinkov ........................................................... 10
3.1.1
3.2
Užívateľské funkcie stránky ................................................................ 11
3.2.1
Formulár pre registráciu nového užívateľa form.php .................... 11
3.2.2
Formulár pre prihlásenie registrovaného užívateľa login2.php..... 11
3.2.3
Odhlásenie užívateľa, súbor logout.php ....................................... 12
3.2.4
Odosielanie Vášho názoru na našu stránku – kontakt.php .......... 12
3.3
Administračné funkcie stránky ............................................................ 13
3.3.1
Vyhľadávanie údajov z databázy admin.php ................................ 13
3.3.2
Mazanie údajov ............................................................................ 14
3.3.3
Úprava údajov o užívateľovi ......................................................... 14
3.4
Štruktúra databázy ............................................................................. 15
3.5
Vlastné funkcie ................................................................................... 16
3.5.1
4
Zoznam priečinkov a súborov ...................................................... 10
PHP.............................................................................................. 16
Zabezpečenie ............................................................................................ 17
3
5
Záver .......................................................................................................... 18
6
Zoznamy .................................................................................................... 19
6.1
Zoznam skratiek ................................................................................. 19
6.2
Zoznam použitých zdrojov .................................................................. 19
Zoznam obrázkov
OBR. 1 REGISTRÁCIA NOVÉHO UŽÍVATEĽA ............................................................................................................ 11
OBR. 2 PRIHLÁSENIE UŽÍVATEĽA ........................................................................................................................ 11
OBR. 3 ODHLÁSENIE UŽÍVATEĽA ........................................................................................................................ 12
OBR. 4 KONTAKT............................................................................................................................................ 12
OBR. 5 VZHĽAD VYHĽADÁVACIEHO FORMULÁRA PRE ADMINISTRÁTOROV ................................................................... 13
OBR. 6 VÝPIS Z DATABÁZY ................................................................................................................................ 13
OBR. 7 MAZANIE Z DATABÁZY ........................................................................................................................... 14
OBR. 8 ÚPRAVA ZÁZNAMU Z DATABÁZY .............................................................................................................. 14
OBR. 9 KONTROLNÁ OTÁZKA ............................................................................................................................ 14
OBR. 10 VÝPIS Z DATABÁZY .............................................................................................................................. 15
4
1 Úvod
Rôzne webové stránky, ktoré ponúkajú texty a testy maturitných tém
neobsahujú značnú časť podkladov pre ústnu časť maturitných skúšok a to z
dôvodu, že tieto časti vznikajú nami, študentmi alebo profesormi, ktorým záleží
na našich výsledkoch pri týchto skúškach. Z tohto dôvodu sme sa rozhodli
vytvoriť stránku, ktorá poskytuje vybrané témy pre ústne ale aj písomné časti
maturitných skúšok pre školu SPŠE Piešťany.
Cieľom
mojej
prostredníctvom
práce
ktorej
bolo
vytvorenie
máme
prehľad
funkčnej
kto
registrácie
našu
stránku
a databázy,
navštevuje.
Administrátori stránky môžu okrem iného prideľovať a odoberať oprávnenia
ostatným užívateľom a vykonávať zmeny v databáze.
Potreba vytvorenia stránky ako takej vyplýva z toho, že študenti sú čoraz
lenivejší a je pre nich namáhavé zháňať potrebné informácie roztrúsené po
internete. Stránka ponúka v tomto ohľade väčšiu komplexnosť informácií
vyžadovaných študentmi a teda im pomáha šetriť čas aj úsilie.
5
2 Teoretická časť
2.1 Internet
Internet je celosvetová počítačová sieť poskytujúca užívateľom do nej
pripojeným rôzne služby. Jeho prvé uzly vznikli v roku 1969 pod názvom
ARPANET pod právou Ministerstva obrany Spojených štátov Amerických.
Ranný výskum, ktorý prispel k vzniku ARPANETu, bol z oblastí práce na
decentralizovaných sieťach (z obranných dôvodov), teórie hromadnej obsluhy a
prepínania paketov. 1. januára 1983 zmenil ARPANET svoj základný sieťový
protokol z NCP na TCP/IP, čím vznikol internet ako ho poznáme dnes.
2.2 Web
Internet získal širokú pozornosť verejnosti v 90. rokoch 20. storočia. V auguste
1991 Tim Berners-Lee publikoval svoj nový projekt World Wide Web, dva roky
po tom, ako začal s tvorbou značkovacieho jazyka HTML a protokolu HTTP.
Zverejnil
prvé
stránky
organizácie
CERN
vo
Švajčiarsku.
Niekoľko
akademických a vládnych inštitúcií tiež prispelo stránkami, ale verejnosť ich
zatiaľ nevidela. V roku 1993 bola vydaná prvá verzia webového prehliadača
(browsera) Mosaic, na vývoji ktorej sa výraznou mierou podieľal vtedy študent
Marc Andreessen. V roku 1994, ako 22 ročný spoluzakladateľ Netscape
Communications Corporation, ponúkol k stiahnutiu zadarmo prehliadač
Netscape Navigator a tým sa začala verejnosť zaujímať o dovtedy akademickotechnický internet.
2.3 Webová stránka
Webová stránka, ľudovo aj webstránka alebo ľudovo nepresne internetová
stránka (po anglicky „web page“), je dokument obsahujúci hypertext, obrázky a
iné multimediálne prvky uložený obyčajne na webovom serveri prístupný
prostredníctvom služby World Wide Web v sieti internet. Zobrazuje sa
používateľovi pomocou webového prehliadača. Webové stránky sú obyčajne
písané v značkovom jazyku HTML alebo XHTML.
6
2.3.1 Statické webové stránky
V počiatkoch webu boli webové stránky umiestnené na web-serveri ako
dokumenty HTML. Ich obsah treba meniť ručne, zmenami priamo v HTML
kóde.
2.3.2 Dynamické webové stránky
Postupom času sa správa statických webových stránok značne komplikovala s
ich pribúdajúcim počtom. Bolo časovo náročné aj udržiavať odkazy medzi nimi
tak, aby boli stále platné. Dynamické webové stránky sú výsledkom práce
webového servera, ktorý vygeneruje webovú stránku, či iný obsah, na základe
inštrukcií v skriptoch.
2.4 Bezpečnosť webovej stránky
Dôležitou časťou pri vytváraní resp. písaní zdrojových kódov webovej stránky je
zabezpečenie stránky pred vonkajšími vplyvmi užívateľov, ktorý by mohli
previesť zmeny v databáze, znemožniť prístup na server (preťažiť ho), alebo
ukladať
nekorektné
údaje
do
užívateľských
vstupov.
Na
ošetrenie
užívateľských vstupov vo formulári môžeme použiť:

Overenie veľkosti vloženého reťazca - napr. strlen (string lenght, teda
dĺžka reťazca)

Overenie údajového typu – napr. is_numeric (či je to číselný typ)

Overiť či neboli zadané html značky - strip_tags (odstráni tieto značky)
Na zabránenie preťaženiu servera môžeme použiť zadávanie textu z obrázku
(užívateľ musí opísať znaky z obrázka aby mohol odoslať údaje z formulára)
7
2.5 Optimalizácia pre vyhľadávače SEO
Optimalizácia pre vyhľadávače alebo SEO (z ang. search engine optimization)
je súbor techník na zlepšenie pozície, na ktorej sa optimalizovaná webová
stránka zobrazí vo výsledkoch vyhľadávania v internetových vyhľadávačoch.
SEO zahŕňa linkbuilding, linkbaiting, social media marketing, virálny marketing,
on-line PR v kombinácii so sémantickým kódovaním webu. Kľúčové slová sú
najdôležitejšou časťou SEO, postup ako optimalizovať konkrétne webové
stránky pre vyhľadávače. SEO sa klasifikuje na techniky, ktoré spoločnosti
prevádzkujúce vyhľadávače odporúčajú na vylepšenie svojej pozície, tzv. White
hat SEO a techniky, ktoré zakazujú, tzv. Black hat SEO. Vyhľadávacie služby
sa snažia Black hat SEO zamedzovať.
ON PAGE faktory: (faktory ktoré môžeme ovplyvniť)

kvalitný názov web stránky

meta riadky: popis, kľúčové slová, iné meta riadky

použitie kľúčových slov na stránke

kód web stránky, odkazová stránka

architektúra stránky a obsahu

textové odkazy, popularita odkazov, popularita obrázkových odkazov

telo web stránky

odkazy v anchor texte, popularita externých odkazov

rozmanitosť odkazových zdrojov

použitie: Frames, JavaScript a Flash
OFF PAGE faktory:

kvalita domény / URL

Mapa stránok, PageRank

kvalitné spätné odkazy

návštevnosť stránky
8
2.6 Štandardy
Štandardný objektový model W3C pracuje s CSS, XHTML a ECMAScript 262,
čo je štandardizovaná verzia JavaScriptu - určuje správanie sa stránky na
rôznych plaformách a v rozdielnych prehliadačoch. Webové stránky spĺňajúce
štandardy W3C prinášajú rad výhod. Jedným z nich je nájditeľnosť stránky vo
vyhľadávačoch
(úzko
súvisí
s
návštevnosťou
stránky).
O
zvyšovaní
návštevnosti stránky sa môžeme presvedčiť, ak ju zaregistrujeme v NAJ.sk
(monitorovaním zistíme ako dodržiavanie štandardov prispelo k zvýšeniu šance
nájdenia a tým aj návštevnosti).
9
3 Praktické riešenie stránky
3.1 Štruktúra súborov a priečinkov
Pri tvorbe webovej stránky je vhodné si vopred stanoviť kam, resp. do akých
priečinkov jednotlivé podstránky, obrázky, scripty, budeme ukladať. Keďže
väčšina webhostingov nedovoľuje upravovať konfiguračné súbory serveru treba
mať stránky typu index.php, index.php3, index.html, index.htm (udané súbory
sú podľa konfigurácie - DirectoryIndex ) na začiatku. Ak si spravíme prehľadnú
štruktúru priečinkov a obsahy jednotlivých priečinkov nebudeme mať potom
problémy napr. pri switchovaní podstránok, vkladaní obrázkov, presmerovaní,
atď.
3.1.1 Zoznam priečinkov a súborov

admin
súbory pre administráciu databázy

registracia
formuláre pre registráciu, prihlásenie a odhlásenie
Súbory v hlavnom priečinku:
hlavný directoryindex súbor

index.php

connect.php pripojenie databázy (napr. pri registrácii)

captcha.php obsahuje generovanie bezpečnostného kódu pri
registrácii a odosielaní kontaktných informácii

kontakt.php formulár pre odoslanie správy o názore na našu
stránku niektorému z administrátorov priamo na jeho e-mail
10
3.2 Užívateľské funkcie stránky
3.2.1 Formulár pre registráciu nového užívateľa form.php
V tejto časti sa komplexne
rieši registrácia užívateľa.
Zadanie hesla je ošetrené
tak, aby minimálna dĺžka
bola
8
znakov.
Všetky
údaje je potrebné vyplniť,
inak
začnú
vyskakovať
chybové hlášky. Taktiež je
Obr. 1 Registrácia nového užívateľa
potreba zadať číselný kód
z obrázku, aby sa predišlo úmyselnému útoku na stránku, dalo by sa povedať,
že táto nutnosť zadávania kódu doslova „rozlíši človeka od automatického
systému“ , resp. programu. Pri výbere ročníka, ako aj pri výbere triedy máte aj
možnosť vybrať „žiadny“, v prípade, ak nie ste študent.
3.2.2 Formulár pre prihlásenie registrovaného užívateľa login2.php
Prihlasovací
formulár
(súbor
login2.php) obsahuje dve polia
„Užívateľské meno“ a „Heslo“. Ak
ste zadali tieto údaje správne,
Obr. 2 Prihlásenie užívateľa
budete presmerovaní na hlavnú
stránku a vaše užívateľské meno je zobrazené v časti tela stránky. Taktiež sa
objaví odkaz na súbor logout.php ktorý Vás odhlási (čiže zničí relačnú
premennú, ktorá bola priradená užívateľovi pri prihlásení) a presmeruje na
hlavnú stránku.
V prípade administrátora sa vám zobrazia možnosti vyhľadávania z databázy.
11
3.2.3 Odhlásenie užívateľa, súbor logout.php
Po prihlásení je vaše užívateľské
meno zobrazené v hornej časti
stránky.
Ak
sa
rozhodnete
odhlásiť, stačí kliknúť na odkaz
Obr. 3 Odhlásenie užívateľa
„Odhlásiť“. Po odhlásení budete
presmerovaní na hlavnú stránku
3.2.4 Odosielanie Vášho názoru na našu stránku – kontakt.php
Tu máte možnosť vyjadriť sa ku kvalite,
obsahu, názore na našu stránku. Všetky
názory sú odosielané priamo na e-mail
administrátora. Formulár tiež obsahuje
bezpečnostné prvky v prípade ak by sa
niekto rozhodol pre spam, alebo zadaný
užívateľ neexistuje.
Obr. 4 Kontakt
12
3.3 Administračné funkcie stránky
3.3.1 Vyhľadávanie údajov z databázy admin.php
Obr. 5 Vzhľad vyhľadávacieho formulára pre administrátorov
Tento formulár na vyhľadávanie je dostupný iba tým užívateľom, ktorí majú
oprávnenie „a“, t.j. administrátor, ostatní nemajú možnosť pracovať s údajmi
z databázy. Hľadanie podľa ročníka obsahuje špeciálnu sekciu – NULL – toto si
môžete zvoliť, pokiaľ chcete vyhľadávať iba podľa mena a priezviska a alebo
podľa užívateľského mena. Výsledky sú usporiadané do tabuľky.
Obr. 6 Výpis z databázy
13
3.3.2 Mazanie údajov
Obr. 7 Mazanie z databázy
V prípade, ak sa administrátor z určitých dôvodov rozhodol vymazať z databázy
dáta o danom užívateľovi, odkazom bude presmerovaný k otázke, či naozaj
chce vymazať tohto užívateľa.
Ak sa administrátor chce vymazať
užívateľa, po kliknutí „Áno“ sa aj
tak stane, či už si vyberie jednu
alebo druhú možnosť, bude
Obr. 8 Kontrolná otázka
presmerovaný na hlavnú stránku
s vyhľadávaním z databázy.
3.3.3 Úprava údajov o užívateľovi
Obr. 89 Úprava záznamu z databázy
Ak je potrebné zmeniť nastavenie oprávnenia, príp. údaje o danom užívateľovi,
zobrazí sa Vám formulár so súčasnými údajmi o užívateľovi.
Tu
máte
o vybranom
možnosť
meniť
užívateľovi.
údaje
V prípade
zmeny triedy, resp. ročníka sú však
nastavené predvolené hodnoty (napr.
pre triedy – 1.A – 4.D, príp. žiadna, ak
užívateľ nie je študent), ak by ste
zadali
nezmysel
chybová hláška.
Obr. 9 Formulár pre úpravu údajov
užívateľa
14
bude
vypísaná
3.4 Štruktúra databázy
Mojím účelom bolo vytvorenie databázy užívateľov pre orientačné zistenie, aký
okruh študentov, resp. neštudujúcich, má záujem o maturity ako také.
Obr. 10 10Výpis z databázy
Databáza obsahuje jednu tabuľku – users - s rôznymi údajmi o užívateľoch.
Tabuľka obsahuje osem stĺpcov:

ID – jedinečné číslo pre každého novo registrovaného užívateľa

umeno – Užívateľské meno

rmenoapr – Meno a priezvisko

heslo – pre bezpečnosť je heslo kódované hashovacím algoritmom md5

trieda

prava – h pre host, a pre administrátora

regmail – užívateľova e-mailová adresa v prípade potreby kontaktu

rocnik
Kompletná štruktúra databázy sa nachádza v Prílohe 1
15
3.5 Vlastné funkcie
3.5.1 PHP
Pri vytváraní formulárov som si ošetril vstupné premenné a hodnoty (napr.
zaistenie stavu nevyplnenej premennej a ochranu pred vstupným údajom,
XHTML tagy nahradí špeciálnymi entitami – htmlspecialchars, alebo kontrola
vyplnenia údaju funkciou empty())
Ďalej som vytvoril premennú, ktorej funkciou bolo overiť, či daný užívateľ
existuje, alebo nie. Ďalej sa overuje dĺžka hesla – musí byť v rozmedzí 8 až 16
znakov. Taktiež sa kontroluje správnosť zápisu e-mailovej adresy funkciou
filter_var($regmail, FILTER_VALIDATE_EMAIL),
správne, resp. chybné opísanie číselného kódu.
Pri každej chybovej hláške je volaná pomocná premenná typu pole $error[] = "";
, na konci sa spočítajú všetky tieto premenné funkciou count a uložía sa do
premennej výsledok $vysledok = count($error);
Ak sú splnené tieto dve podmienky, t.j. výsledný počet chýb (počet polí $error[]
= "";) a nezhoda užívateľského mena z databázy, prebehne script pre
registráciu užívateľa (zápis údajov do databázy).
V prípade akýchkoľvek chýb, resp. nesprávneho vyplnenia niektorého z údajov
nebudú údaje z registračného formulára odoslané do databázy
Vo všetkých formulároch sa vyskytujú 3 typy vstupov a to:

Input (type text) – užívateľ podľa potreby píše požadované informácie
(slovo alebo slová)

Input (type password) – špeciálne pole pre zadávanie hesla

Select – užívateľ si vyberá len jednu z možností (napr. 4.B pre výber
triedy)
Obrázky skriptov, s popisom, pre registráciu nového užívateľa, generovanie
číselného kódu a administráciu sú uvedené v Prílohe 2.
16
4 Zabezpečenie
Metódy zabezpečenia som riešil rôznymi spôsobmi. Snažil som sa ošetriť
všetky vstupy, resp. zadávané vstupné údaje formou premeny alebo
odstránenia nechcených entít. Pri registrácii, prihlásení a odosielaní názoru na
našu stránku som použil tzv. CAPTCHU (pre „odlíšenie človeka od stroja“),
ktorá vygeneruje číselný kód, potrebný správne prečítať a napísať.
Pre heslo bol využitý tzv. hashovací algoritmus md5, kedy sa zo zadaného
hesla stane HASH kód, ktorý je veľmi obtiažno premeniť naspäť na zadané
heslo. Odskúšané pomocou stránok, ktoré ponúkajú „rozlúštenie“ md5 hash
kódu - http://www.md5decrypt.org/ a http://www.md5online.org/. Napriek tomu
odporúčam heslo voliť tak, že obsahuje čísla aj písmená.
Pri administrácii je dôraz kladený hlavne na oprávnenia administrátora. Ak sa
užívateľ bez patričného oprávnenia pokúša dostať do administrátorského
prostredia, bude ihneď presmerovaný na hlavnú stránku.
Ak by sa administrátor omylom dostal k vymazaniu údaju z databázy, netreba
sa obávať, objaví sa kontrolná otázka, či chce užívateľa naozaj vymazať.
17
5 Záver
Cieľom tejto práce bolo vyvinúť stránku slúžiacu študentom Strednej
priemyselnej školy elektrotechnickej v Piešťanoch.
Stránka obsahuje niektoré hlavné maturitné témy a umožňuje kompaktnejší a
rýchlejší prístup k vypracovaným témam, bez nutnosti hľadania roztrúsených
informácií po internete.
Užívatelia môžu vyjadriť svoj názor prostredníctvom kontaktného formulára
umiestneného v päte stránky.
Stránka tiež obsahuje dve úrovne prístupu. Používateľský prístup umožňuje
pohyb len na podstránkach s obsahom určeným pre užívateľov s najnižším
oprávnením. Administračný prístup zahŕňa prístup k podstránke s možnosťou
vyhľadávania, mazania, editovania, a manipuláciu s SQL databázou.
V súčasnosti stránka funguje na adrese http://maturitneokruhy.hostei.com.
18
6 Zoznamy
6.1 Zoznam skratiek
PHP
- Personal Home Page (Hypertext Preprocessor
SQL
- Structured Query Language
HTTP
- Hypertext Transfer Protocol
HTML
- Hypertext Markup Language
XHTML
- eXtensible Hypertext Markup Language
6.2 Zoznam použitých zdrojov
PHP: http://php.net/
W3Schools: http:/w3schools.com/
Web SPSEPN: http://spsepn.edu.sk/bc
19
Download

vzor 1 - SPŠE Piešťany