Tento návod som sa rozhodol napísať, keďže už dosť ľudí po mne chcelo, nech im vysvetlím ako sa dajú tvoriť vlastné web stránky, ako to všetko okolo nich funguje a kde sa to naučiť. Samozrejme, že si môžu nakúpiť knihy, ale tie bývajú spravidla tak rozťahané, že ich veľa ľudí ani nedočíta. Plus zaťažujú množstvom detailov, ktoré na začiatku iba mýlia a zdržujú.

Preto píšem tento návod čo najstručnejšie, aby slúžil ako alternatíva k prehnane ukecaným knihám a aby ste namiesto zbytočného čítania mohli radšej kódiť. :p

Najskôr zbežný prehľad o tom, čo všetko sa deje, keď si v prehliadači otvoríte nejakú stránku. To aby ste vedeli kde sa vlastne používajú všetky tie technológie ako je HTML, CSS, PHP, SQL, JavaScript, jQuery, AJAX a iné.

1) Zadáte URL adresu - to je celý ten text, čo vidíte hore v address bare prehliadača.

2) Na základe názvu stránky (t.j. domény) sa zistí IP adresa servera, na ktorom sa nachádza hľadaná stránka. (Na toto slúži DNS server, ktorého adresu poznáme)

3) Serveru na zistenej IP adrese sa pošle požiadavka a on nám na základe URL adresy (a zopár ďalších drobností ako sú napríklad cookies) vráti vytúženú stránku. :) Na komunikáciu sa používa sa HTTP protokol, čo je súbor určitých príkazov a pravidiel na komunikáciu po sieti.

Čo sa deje na serveri?

• Na serveri (fyzickom, t.j. tá bedňa:p) beží webserver (program), ktorý spracováva HTTP požiadavky od prehliadačov (ako napríklad túto našu) a vracia odpovede v podobe požadovanej stránky.
• V dnešnej dobe sú prakticky všetky stránky dynamické - čiže ich obsah nie je pevne daný v nejakom súbore, ale sa vytvára pri každom načítaní stránky, vďaka čomu môžu ľudia z Internetov pridávať komentáre, príspevky na fóra, písať na facebooku ako sa vysrali a podobne. :) Na generovanie dynamických stránok slúži napríklad známe PHP, ktoré beží na rovnakom fyzickom serveri, spúšťa PHP skripty a tie generujú samotnú stránku. Na PHPčku beží napríklad aj spomínaný facebook.
• Meniace sa údaje (príspevky na blogu, komentáre, atď..) PHPčko poväčšinou ťahá a zapisuje z/do databázy, ktorá býva spravidla tiež pustená na tom istom serveri. Asi najpoužívanejšou databázou je MySQL.
• Výsledkom je text stránky formátovaný ako HTML kód, ktorý webserver pošle naspäť k používateľovi.

4) Prehliadač HTML kód načíta a vypýta si zo serveru ešte všetky obrázky, vizuálne štýly (CSS), skripty (Javascript) a iné drísty (napr. Flash), ktoré sú na danej stránke. Potom na základe HTML kódu a stiahnutých štýlov stránku vykreslí.

5) Nakoniec prehliadač spustí Javascripty, ktoré v ňom bežia. Tieto skripty majú na starosti kadejaké drobnosti, ktoré menia v reálnom čase kúsky stránky - napríklad rozbaľovacie menu, prepínanie záložiek, obláčiky na našom blogu alebo dokonca načítavanie malých častí stránky zo servera (toto sa volá AJAX).

Čo potrebujete?

Chceli by ste si spraviť vlastnú stránku, čo je na to treba?

V prvom rade textový editor - nepoužívajte obyčajný notepad, určite si stiahnite nejaký programátorský, ktorý zvýrazňuje kód a automaticky odsadzuje text. My používame obidvaja hlavne Notepad++. A to je asi tak všetko, čo treba na skúšanie HTML, CSSka a Javascriptu.

Na prácu s PHP a MySQL si treba stiahnuť nejaký WAMP, LAMP alebo MAMP (skratky pre Windows/Linux/Mac, Apache, MySQL, PHP). Sú to balíky, vďaka ktorým si veľmi ľahko môžete spustiť na počítači váš vlastný webserver so všetkým potrebným.

Ako sprístupniť vašu stránku na webe si povieme ďalej.

V akom poradí sa to učiť?

HTML+CSS, PHP, MySQL, Javascript (+jQuery) :)

HTML + CSS

Predtým ako začnete generovať stránky, je celkom fajn vedieť ako sa vlastne vykresľujú. Veľmi zjednodušene - HTML udáva obsah a CSS vzhľad stránky, preto sa väčšinou spomínajú spolu. Vytvorené HTML súbory sa dajú jednoducho z disku otvárať v hocijakom prehliadači (čiže netreba mať vlastný server).

Zdroje:

• htmldog HTML4+CSS tutorials - odporúčam prečítať si všetky. Advanced HTML nie je až také dôležité, ale advanced CSS tutorial by ste si mali pozrieť aj keby čo bolo. Predovšetkým ten o rozložení stránky.
• http://www.w3schools.com/ - fajn na naštudovanie si nejakého konkrétneho tagu. Skôr či neskôr by ste na túto stránku vďaka Googlu aj tak prišli. ;)
• Pozerajte si zdrojové kódy stránok. HTML a CSS majú tú výhodu, že sa generujú v ľudsky čitateľnej forme. Môžete sa tak všeličo dozvedieť od skúsenejších. Výborná pomôcka na vŕtanie sa v stránkach je Firebug.

HTML aj CSS existujú vo viacerých verziách - najrozšírenejšie sú stále HTML4 a CSS2, do popredia sa dostávajú nové HTML5 a CSS3 (obe sú experimentálne podporované najnovšími prehliadačmi) a na niektorých miestach sa stále používa XHTML, čo je pomaly zanikajúca derivácia HTML4.

Pripravte sa na to, že v Internet Exploreroch starších ako osmička bude pravdepodobne vaša stránka úplne rozjedrhádzaná. :)

PHP

PHPčko budete väčšinu času využívať na dynamické generovanie HTML kódu. Dynamické generovanie znamená, že v závislosti od rôznych faktorov (ako napríklad kto je prihlásený alebo aké články popísal autor blogu) sa na stránke zobrazia rôzne údaje. PHP funguje ako služba bežiaca na serveri, ktorá spúšťa PHP skripty, preto ich nemôžete otvárať priamo z disku ako HTML súbory. Na druhej strane, skripty sú chránené a nikto z webu sa nemôže hrabať vo vašom kóde. Skripty vyzerajú asi tak, že v obyčajnom HTML kóde je vložený PHP kód ohraničený identifikátormi <?php ... ?>, ktorý generuje ďalšie HTML.

Ak si to budete chcieť vyskúšať, stiahnite a nainštalujte si WAMP/LAMP/MAMP (viď sekcia čo potrebujete). Keď už máte spustený server, treba vytvoriť súbor s príponou .php vo webovom adresári webservera - pri WAMPe to je C:\Program Files\wamp\www\. Potom ho otvoríte tak, že do prehliadača zadáte adresu http://localhost/subor.php alebo http://127.0.0.1/subor.php (obidve adresy odkazujú na to isté). Ak napíšete iba http://localhost/ otvorí sa súbor index.php.

Mimochodom vo všetkých tutorialoch môžete veselo preskočiť sekciu ako rozbehať PHP, pretože sa väčšinou spomína zdĺhavá manuálna inštalácia, od ktorej vás ?AMP ušetrí.

PHP sa pomerne dobre učí, lebo je jednoduchšie ako väčšina iných programovacích jazykov, má kopu ľahko použiteľných užitočných funkcií a kvalitnú dokumentáciu.

Zdroje:

• PHP Manuál
• tizag.com tutorial - popisuje viac menej celé základy a je vhodný aj pre ľudí, čo zatiaľ v ničom neprogramovali. OOP sa tu bohužiaľ nespomína, takže sa treba pozrieť do manuálu.
• Rýchly tutorial z manuálu - keď sa ponáhľate. Zvyšok sa dá dohľadať aj v manuále, keď príde na lámanie chleba™.

MySQL

MySQL je najpoužívanejší druh free SQL databáza (beží na nej okrem iného Facebook aj Wikipedia). Možno nemá toľko funkcií, čo Postgre alebo (platené) Oracle, ale už len vďaka administrátorskému rozhraniu phpMyAdmin sa príjemne používa a učí. Databázy ako také sa používajú na dlhodobé ukladanie väčšieho množstva údajov. Výhoda oproti ukladaniu dát do súborov je taká, že údaje sú vďaka indexom rýchlo prístupné a môžete ich spájať, triediť, filtrovať a všelijakými spôsobmi sa na nich vyburovať. :)

Zdroje:

• w3schools SQL tutorial
• MySQL manuál - bohužiaľ nie moc prehľadný a treba v ňom hľadať cez Google. Na druhej strane obsahuje všetky špecifiká a obskúrnosti MySQL.

Javascript + jQuery

Javascript (nijak nesúvisí s Javou) beží vo vašom prehliadači a slúži na drobné zmeny na stránke v reálnom čase. Dobrý príklad sú prepínateľné taby, kde sa pri prepínaní zobrazí aktívna záložka a zvyšné, neaktívne sa skryjú.

V súvislosti s Javascriptom je často spomínaný AJAX, čo znamená iba toľko, že sa načítavajú údaje zo servera bez toho, aby sa musela načítať celá stránka. AJAX zbadáte veľmi ľahko, zvyčajne sa objaví obrázok podobný tomuto a následne sa zmení kúsok stránky na základe údajov zo servera.

Spolu s Javascriptom sa je dobré naučiť používať aj knižnicu jQuery, ktorá dramaticky znižuje množstvo kódu nutného na vykonanie bežne používaných činností a celkovo ulahčuje život pri robote s JS.

Zdroje:

• w3schools JS tutorial
• Oficiálny jQuery tutorial - veľmi rýchly a pochopiteľný
• Oficiálna jQuery dokumentácia - tiež je písaná dosť zrozumiteľne
• Zdrojové kódy. Tiež sú prístupne tak ľahko ako pri HTML a CSS.
• A zase raz Firebug - pre debugovanie Javascriptu a AJAXových volaní je to prakticky nutnosť

Tak a máte zábavu na pár týždňov :p

Pokiaľ budete chcieť svoje výtvory zavesiť niekde na web, existuje viacero bezplatných webhostingov (napríklad ic.cz). Je tam síce relatívne obmedzený priestor a nejaká tá reklama, ale pre začiatok to v pohode stačí. Ja som tam zamladi™ dával svoje web-based ťaháky. :) Samotné súbory sa potom zvyčajne kopírujú cez FTP.

Serióznejší hosting poskytuje tiež kopec firiem, ktoré vám hneď vedia vybaviť aj vlastnú doménu. Websupport (u nich sme aj my) ponúka dokonca seriózny hosting zadara, pokiaľ máte nejaký kick-ass projekt a nemáte peniaze.