Vytváranie web stránok, Srnka

Vytváranie web stránok

Úvod
Vytváranie statického webu
Dynamické stránky
Ako ich vytvoriť?
Mám stránku - ako ju zviditeľním?
Ako to celé funguje?
Javascript
Na záver

Tento článok si za cieľ kladie objasniť ako sa dajú vytvárať dynamické stránky, ako a čo je potrebné na to, aby naše stránky boli prístupne z inetrnetu, ako funguje odpoveď na požiadavku, rozdiel medzi php a javascriptom.
Cieľom článku nie je poskytnúť manuál ako programovať web stránky. Pre záujemcov o samotné programovanie web stránok, uvádzam odkazy na pár dobrých webov:

Stránka čisto o učení programovania web stránok v rôznych prostrediach: http://www.w3schools.com
Česká stránka o písaní HTML a i.: http://www.kosek.cz
Tiež dobrá stránka: http://www.jakpsatweb.cz/
Seriál k PHP: http://www.linuxsoft.cz/php/

Prečo takýto článok?

Viackrát som sa stretla s tým, že ľudia majú akú takú predstavu o programovaní, aj o písaní HTML, ale nevedia, ako vlastne funguje dynamický skript, čo potrebujú na to, aby mohli písať dynamické web stránky a ako svoje stránky zviditeľniť na internete. Preto som sa rozhodla napísať prehľadný článok o tom, ako to celé funguje.

Vytváranie statického webu - html stránky

Na vytváranie stránok písaných v HTML nám stačí klasický textový editor (notepad, vim, ...)a internetový prehliadač (Firefox, Opera, IE). V textovom editore napíšeme HTML kód a uložíme súbor s príponou .html. Ak teraz otvoríme súbor v internetovom prehliadači (ďalej len prehliadač), zobrazí sa obsah súboru, upravený podľa tagov, v prehliadači.

<html>
<head>
<title>Názov stránky</title>
</head>
<body>
<h1>Nadpis je veľký</h1>
Obyčajný text.
</body>
</html>

Toto je len malá ukážka ako môže vyzerať náš súbor. Ale úplne kludne pre odskúšanie môže obsahovať len jedno slovo. V takom prípade v prehliadači bude zobrazené práve toto jedno slovo bez nejakých úprav.
Existujú presne vymedzené pravidlá, ako by sa mala HTML stránka písať.

Pre zmenu farby, veľkosti, typu písma alebo iných štýlových vlastností komponentov stránky sa používajú štýly. Na vytváranie zložitejších definícií štýlu, ľahkej editácií a flexibilite sa používa CSS. Vysvetlenie ako sa s ním pracuje je nad rámec tohto článku. Na uvedených odkazoch sa dá o ňom veľa dočítať.

Dynamické stránky

Statické stránky nám po určitom čase prestanú na naše nároky stačiť. Budeme chcieť, aby sa nápis "Dobrý deň" po uplynutí 18 hodiny zmenil na nápis "Dobrý večer", alebo budeme chcieť vytvoriť prihlasovací formulár, overiť údaje z formuláru a podľa toho sa rozhodnúť, či pustiť užívateľa ďalej alebo nie. Vytvorenie aplikácií ako internetový obchod, mailový klient, chat a mnohé iné sa bez dynamických stránok nezaobídu. Koniec koncom aj tieto stránky sú vytvárané dynamicky.

Ako ich vytvoriť?

Na vytváranie dynamických stránok sa používajú skripty napísané v rôznych programovacích jazykoch. Veľmi rozšírené je programovanie stránkok v PHP (PHP: Hypertext Preprocessor), ASP (Active Server Pages), alebo sa používajú CGI skripty, čo sú programy napísané v ľubovoľnom progr. jazyku a skompilované do spustitelnej podoby (napr. .exe). Programovanie php a asp umožňuje vytvárať kód stránky kombinovaný s HTML jazykom. Sú to vsuvky do HTML stránky, ktoré vie server rozlíšiť a spracovať. PHP stránky sú veľmi rozšírené, používane na vytváranie stránok pod platformami Windows, linux, MacOS, BSD.... ASP sú prístupné len pod Windowsom.

Ďalej budem vravieť len o vytváraní dynamických stránok pomocou PHP, pretože mám s ním osobne viac skúseností, je multiplatformový a taktiež je mi práca v ňom sympatickejšia ako v ASP (jedno leto som vytvárala ASP stránky, takže viem z vlastných skúseností porovnať a podať môj subjektívny názor).

Tak poďme na to

Aby sme mohli vyvárať stránky v php a správne ich zobrazovať prehliadači, potrebujeme mať v počítači nainštalovaný web server. Ten sa stará o "parsovanie" - prekladanie kódu skriptu do podoby, ktorej prehliadač rozumie.

Na vytváranie PHP stránok je potrebné si nainštalovať Apache (server) a PHP. Pre používateľov Windowsu existuje dobrý článok k inštalácii na adrese .http://programujte.com. Pre používateľov linuxu v mnohých distribúciach sú obsiahnuté hneď po inštalácií. V iných sa dajú doinštalovať buď použitím balíčkového manažéra, alebo stiahnutím a inštalovaním potrebných súborov.
PHP kód sa píše priamo do súboru k html kódu, súbor sa uloží s príponou .php. Ukážka kódu:

<html>
<head>
<title>Názov stránky</title>
</head>
<body>
<h1>Nadpis je veľký</h1>
Obyčajný text.
<?php
echo "Toto je text vpisany pomocou php<br />";
$meno="Srnka";
echo "Volam sa:". $meno;
?>
</body>
</html>

Programovanie v PHP sa dosť podobá na programovanie v jazyku C. Existujú v ňom premenné, rozhodovacie podmienky - if, cykly - while, for a iné klasické progr. možnosti, ale aj špeciálne možnosti pre web stránky, ako je vyčítanie parametrov predávaných stránkou v url, práca s databázou a iné. Má podobnú syntax ako jazyk C. Ale existujú rozdiely, napr. premenné sa definujú s "dolárikom" na začiatku a netreba ich deklarovať.
Ďalšie informácie o tom ako vytvárať dynamické stránky, sú dobre popísané na spomínaných stránkach.

Mám stránku - ako ju zviditeľním?

Dajme tomu, že už sme si vyvtorili naše stránky. Teraz by sme ich radi zverejnili širokej verejnosti. Ako na to? Aké sú možnosti?

Takže asi najjednoduchšiou možnosťou je využitie služieb nejakého webhostingu. Dá sa nájsť na internete dosť veľa takýchto ponúk, ktoré sa líšia ponúkanými službami, diskovým priestorom a tiež finančnými podmienkami. Mnohé webhostingy ponúkajú svoje služby zadarmo, ake v zmluvných podmienkach stojí napríklad to, že treba na svoje stránky umiestniť ich reklamu alebo sú tieto webhostingy nejako inak obmedzené. Každopádne stojí za to popozerať sa po možnostiach trhu, určite nebudem dávať žiaden typ, nechcem robiť reklamu, ale na nájdenie takýchto miest na nete stačí vyhľadať napr. v googli kľúčové slovo Webhosting poprípade Webhosting zdarma a iné variácie
Free webhostingy, ktoré ponúkajú veľký diskový priestor sú mnohokrát zradné rýchlosťou načítavania stránok, alebo kopírovania (updatu) súborov na server. Treba popozerať a zvážiť, ktoré podmienky sa vám zdajú byť najvýhodnejšie.
Pri registrácií na takýto webhosting máme možnosť zadať si názov našich stránok. Teda cez akú adresu sa k nim bude dať na internete pristupovať. Pokiaľ uvažujeme webhosting úpne zadarmo, je názov našich stránok až domény tretej úrovne. Napr: www.moje-stranky.hostitel.sk. Kde časť "hostitel" je daná pevne webhostingom a my ju nemôžme meniť. Ak by sme chceli stránku s názvom druhého rádu (www.moje-stranky.sk), museli by sme si daný názov, ak je ešte voľný, zaregistrovať a platiť zaň. Všetky bližšie informácie nájdete na stránkach webhostingov. Viac o doménach:http://www.webydomena.sk/domena-vsetko-o-nej.xhtml
Po zaregistrovaní máme vytvorené na servri konto a diskový priestor. Je to jeden adresár, ktorý bol vyhradený na uloženie našich stránok. Po zadaní nami zvoleného názvu stránok sa hľadá v tomto adresári súbor s názvom index.html a ako nebol takýto nájdený tak sa hľadá index.php(ak sme si zvolili webhosting s podporou php). Pristupovať k tomuto nášmu adresáru na servri môžme obvykle pomocou ftp. Samozrejme návod na to ako, je uverejnený na každom solídnom webhostingu. Taktiež sa tam nachádza zoznam často kladených otázok s odpoveďami na ne.
Iná možnosť je mať stránky na svojom počítači doma. Toto je ale dosť náročná možnosť, ako finančne, tak na zabezpečenie počítača a vybavenie potrebných vecí. Poďme sa pozrieť bližšie, čo to obnáša: Na začiatok máme na počítači nainštalovaný Apache server a napísané naše stránky. Pre prístup k týmto stránkam z internetu, by sme museli náš počítač zviditeľniť z internetu. To znamená, že nemôže byť schovaný za žiadným NAT a že musí mať pridelenú statickú IP adresu. To sa dá vybaviť u vášho providera internetu, ale iste za túto ich službu im budete musieť platiť viac. Potom si musíte kúpiť nejakú doménu. Vybrať si názov, na stránkach ponúkajúcich predaj domény overiť, či nie je obsadená a ako nie, tak si ju objdenať. Mesačné poplatky závisia od toho, či bude doména .sk, .com, .eu atď.. http://domena.domeny-sk.sk/. No a v neposlednom rade, bude musieť váš počítač bežať v kuse, lebo keď bude vypnutý, vaše stránky budú nedostupné. Mnohí ľudia sa na raz nenájdenú stránku už neskôr nevracajú. Taktiež ak bude tento počítač prístupný z internetu, čo bude musieť byť, aby sa dali stránky zobraziž, bude sa treba starať aj o bezpečnosť tohot počítača, zablokovať prístup k ostatným portom, nastaviť správne firewall a obmedziť možnosti prípadných útokov (napr. DoS útokov).
Čiže mať domáci počítač hneď aj ako internetový server nie je veľmi výhodné.
Ako tretia možnosť, ktorá je veľmi výhodná, ale nie každému dostupná, je zverejnenie stránok na nejakom servri, ku ktorému máme užívateľský prístup. Buď je to server v práci a po dohode s administrátorom siete si môžme dať stránky tam, alebo sa dohodneme so známym, ktorý má takúto možnosť. V tomto prípade bude adresa našej stránky pozostávať z nášho názvu a názvu servra. Ako v mojom prípade, server sa volá fornax, a tak v názve mojej stránky je tento názov servera. Dalo by sa mať názov aj v tvare napr. mej-web.meno-servera.sk, ale to už naozaj záleží na dohode s administrátorom a je tam problém s tým, že takémuto názvu musí byť priradená IP adresa, a externé DNS servre ju musia poznať, aby sa na k stránkam dalo z interetu dostať. O tom už administrátor bude vedieť a povie vám, aké máme možnosti. Takto umiestnená stránka má mnohé výhody, ako veľký diskový priestor s dobrými rýchlosťami uploadu/downloadu alebo bez nutnosti mať na stránkach reklamu.

Ako to celé funguje?

Takže teraz máme stránku umiestnenú na nejakom serveri a prístupnú z internetu. A tak sa na ňu dostaneme z ľubovoľného počítača s pripojením na internet. Ako je všetkým jasné, stránka sa zobrazí po napísaní jej internetovej adresy do prehliadača. Takže ak zadáme adresu nas-web.server.sk, v prehliadači sa zobrazí úvodná stránka nášho webu. To funguje tak, že po zadaní názvu stránky do prehliadača, sa vyšle požiadavka o zaslanie kódu stránky. Táto požiadavka sa dostane cez ineternet až k nášmu serveru, ktorý na túto žiadosť zareaguje, prečíta si presne požiadavku a podľa toho odpovie. Ak bol v požiadavke čisto len názov webu bez uvedenia žiadaného súboru, server hľadá súbor s názvom index.html alebo index.php, ako som už vyššie písala. Následne server daný súbor spracuje - časti s php kódom sparsuje a výsledok pošle prehliadaču, z ktorého žiadosť prišla. Z toho je jasné, že na strane klienta v zdroji kódu stránky nenájdeme žiaden php kód. Sem príde už len výsledok po spracovaní servrom.

Detajlnejši pohľad

Server je počítač, ktorý poskytuje rôzne inetrnetové služby. Je to počítač prispôsobený na svoju úlohu, zabezpečený proti útokom s dostatočne veľým výkonom, aby bol schopný služby poskytovať rýchlo a bol schopný odpovesať na veľký zával požiadaviek. Z tohoto je jasné, že tento počítač by mal byť nonstop zapnutý a pripojený k internetu. Samozrejme musí mať priradenú verejnú IP,aby sa dal z internetu kontaktovať. Služieb, ktoré server môže poskytovať je veľa, ak poskytuje súbory na stiahnutie, ide o File Server, ak odpovedá na požiadavku o preloženie názvu web stránky na IP adresu, ide o DNS server - Domain Name Server. Ak poskytuje web stránky, je to web server, server poskytujúci prístup k mailom, je mail server atď. Existuje ich veľa a na jednom počítači, ich môže bežať viac naraz.
Poďme sa teraz pozrieť bližšie na web server.
Web server čaká na požiadavky z internetu, ktoré si prajú zaslať nejakú web stránku. Ak do prehliadača zadáme názov stránky, napr. www.stranka.sk, tak sa pošle požiadavka o získanie tejto stránky. Každý jeden názov sa odkazuje na nejaký server. A každý server je v internetovej sieti reprezentovaný svojou IP adresou. Čiže prvé, čo sa stane po zadaní názvu stránky je, že sa k tomuto názvu nájde ekvivalentná IP adresa. O jej existencií už vedia jednotlivé zariadenia v sieti a tak sa požiadavka nakoniec cez smerovače dostane na požadovaný server. Server po prijatí požiadavky a vykonaní potrebných úkonov odošle odpoveď späť klientovi.
Za povšimnutie stojí to, že server iba čaká na požiadavky a odpovedá na ne. Nijako nedáva o sebe svetu vedieť. Naskytá sa teda otázka, ako sa o ňom môžu ľudia dozvedieť? Možností je viacero, buď pomocou reklamy, kde sa uverejní link na túto stránku, alebo pomocou vyhľadávačov, či pomocou rôznych stránok, kam sa dá uverejniť odkaz na stránku podľa kategórie stránok a napísať tam recenziu stránky. A mnohé iné možnosti, ktoré už závisia od majiteľa servra či uverejnených stránok.

Klient je tiež počítač, ale nevyužíva sa na poskytovanie internetových služieb. Slúži len užívateľovi ako pracovná stanica a prehliadač internetových stránok či mailov. Nemusí byť neustále pripojený k internetu, nemusí mať ani verejnú, či statickú IP adresu. To znamená, že žiaden počítač z internetu sa na náš nemôže odkazovať, lebo nevie kde klienta hľadať. Samozrejme, môže mať klient aj verejnú IP adresu, ale nie je to pravidlom, skôr naopak, keďže IP adries pri dnešnom rozšírení internetu je dosť málo. Hlavný rozdiel medzi servrom a klientom je ten, že klient sa snaží spojiť so serverom a využívať jeho služby. Klient teda inicializuje spojenie a komunikáciu so svetom, a na jeho požiadavky server odpovedá. Keďže klient komunikáciu začal a server má len odpovedať, tak server už vie kam má odpoveď poslať - na adresu, z ktorej dostal požiadavku. Ale klient musí vopred vedieť adresu servra, od ktorého chce služby využivať.

Spracovávanie formuláru

Pozrime sa bližšie na také spracovanie formuláru. Túto úlohu môžme realizovať viacerými spôsobmi. Jednou z možnosí je vytvoriť jeden html súbor (formular.html), v ktorom bude uvedený formulár a druhý php skript(spracuj.php), ktorý údaje spracuje a podľa toho vráti klientovi výsledok. Funguje to tak, že v súbore formular.html je napísaný v html kóde formulár a tlačítko,ktoré odošle údaje z vyplneného formuláru na server a to spolu s volaním stránky, ktorá má údaje spracovať. V našom prípade súboru spracuj.php. Údaje z formuláru sú posielané buď metódou GET, kedy sa zapisujú hneď za adresu volanej web-stránky nas-web.server.sk/spracuj.php?udaj1=meno&udaj2=priezvisko, alebo metódou POST, kedy nie sú prenášané údaje vôbec viditeľné. Táto metóda je bezpečnejšia. Na testovanie spracovania údajov sa ale viac hodí možnosť GET, kedy nastavíme inú hodnotu údaja jednoduchým prepísaním parametra v url adrese.
Inou možnosťou je použiť jediný skript na vypísanie formuláru a aj na spracovanie údajov. Ten funguje tak, že po jeho zavolaní sa overí, či boli prijaté aj údaje, ak nie, zobrazí sa formulár. Ak áno, údaje sa spracujú. Ukážka kódu:

<html>
<head>
<title>Formulár</title>
</head>
<body>
<?php
//nacitanie udajov poslanych metodou GET
$meno=$_GET["udaj1"];
$priez=$_GET["udaj2"];

//overenie, ci boli tieto udaje zadane, ak nie, vypisat formular
if($meno=="" || $priezvisko="")
{
//vypise html formular
?>
<h1>Formulár</h1>
....

<?php
}
else
{
// v pripade, ze udaje boli zadane:
echo "<h2>Vaše meno je: ".$meno." ".$priez."</h2>";
}
?>
</body>
</html>

Javascript

Javascript sa používa tiež na vykonávanie rôznych rozhodovaní, cyklov, umožňuje vytváranie efektov ako sneženie na stránke, taktiež sa s ním realizuje napr. zobrazenie textu, obrázku, či iných dát v malom pomocnom okne (napríklad zobrazenie kalendárika po kliknutí na ikonku kalendára..Pozri).

Hlavný rozdiel medzi php a javascriptom je ten, že javascript beží na strane klienta, php na strane servera. To znamená, že php kód je spracovaný na strane servera a klientovi sa posiela už len výsledok. Naopak, javascriptový kód je spracovaný hneď na strane klienta. Narozdiel od php kódu, javascript sa dá vidieť v zdrojovom kóde stránky v prehliadači, čo vylýva práve z toho, kde je ktorý kód spracovávaný. Javascript sa využíva veľmi často na overovanie dát formuláru pred tým, než sú poslané na server a spracovávané php skriptom. Po spracovaní php skriptom sa na strane klienta stránka musí celá znovu načítať s novým kódom prijatým zo servera, kdežto javascript reaguje okamžite a nenačítava sa stránka opäť. Preto je výhodné užívateľa hneď pri žiadosti o spracovanie zadaných údajov upozorniť na to, že Telefónne číslo smie obsahovať iba číslice, ako poslať neplatný formulár na server a načítať na strane klienta potom odpoveď servra obsahujúcu správu o neúspešnom spracovaní formuláru, lebo telefónne číslo bolo neplatné...
Čiže inak povedané, ak sa vykonáva kód pomocou javascriptu, server o ničom nevie, reakcia je okamžitá a stránka sa znovu nenačítava. Ak sa vykonáva php kód, najprv sa pošle žiadosť na server, tam sa kód vykoná a pošle sa späť výsledok. Čiže reakcia je pomalšia a stránka sa musí znova načítať.
Obe realizácie majú svoje výhody aj nevýhody. Častokrát sa používajú naraz aj php skript aj Javascript a možnosťami svojho nasadenia sa dopĺňajú.

Na záver

Dúfam, že poslanie tohto článku sa mi aspoň z väčšej časti podarilo naplniť. Táto tématika je pomerne dosť rozsiahlá a toto bolo skôr tak v skratke vysvetlené . A mnohé povedané skôr principiálne, lebo presné objasnenie by vyžadovalo rozšírnejší pohľad do problematiky. Ak ste sa ale stretli v článku s nejakými nejasnosťami, napíšte mi, pokúsim sa ich lepšie podať.

Návrat hore

30.11.2008

SRNKA

Linux

Články: