webrebel html css javascript laravel oop php mysql wordpress kurz

Najrýchlejší úvod do vytvárania web stránok

napísal , 3 Oct 2010 [ CSS Efektivita HTML JavaScript jQuery PHP SQL Tutoriály ]

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:

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.

napísal , 3 Oct 2010

13 komentárov

komentuj
  1. Andrej Herich [ Nedeľa 3.10.2010, 19:24 ]

    Výborný úvod do vytvárania stránok, len neviem, či pojem URI je použitý úplne dobre [1]. To, čo chce byť pomenované, sa asi oficiálne označuje pojmom path, prípadne path, query string a anchor [2], prípadne jednoducho časť za lomkou™.

    Ale inak, veľa trpezlivosti do písania ďalších článkov!

    [1] http://en.wikipedia.org/wiki/Uniform_Resource_Identifier
    [2] http://en.wikipedia.org/wiki/Uniform_Resource_Locator#Syntax

  2. 81403 [ Nedeľa 3.10.2010, 22:43 ]

    Diky :) (aj za opravu - I stand corrected!)
    V hentakom vyzname sa to tusim pouzivalo v Drupale... a mozno aj nie. V clanku som to opravil - celkovo som stadial vyhodil to s castou URL od lomitka, lebo sak cast pred lomitkom sa tiez moze kludne pouzit (napriklad pokial je na jednej IP adrese viac domien).

    S tymi URI a URL je to nejake neiste. URL je podmnozinou URI, ale akou, to tazko povedat. Vraj by sa malo spravne hovorit URI, ale stale je rozsirenejsi nazov URL, takze to predbezne necham tak. Zbytocne by som to komplikoval.

    A tusim sa sa uz niecomu priucil, ty betar/fiskus/ficur/huncut™ jeden :)

  3. yablko [ Pondelok 4.10.2010, 10:04 ]

    Ja len doplním, že knižnice ako jQuery (áno, existujú aj iné :) MooTools, Prototype, YUI, Dojo...) nielen že znižujú množstvo kódu, ale pomáhajú aj bojovať s nekompatibilitou browserov.

    Podobne ako sa vám v IE6 rozbije vzhľad stránky, sa vám dosť možno rozbije aj JavaScript. Nie každý prehliadač chápe všetko rovnako (a nie každý chápe všetko) a robiť napríklad AJAXové volania v čistom JavaScripte je riadny pain.

    Knižnice zaručujú, že to čo napíšete bude všade fungovať rovnako (magic! *bububu*), takže ak ste leniví a pohodlní ako my tu, určite sa naučte nejakú tú knižnicu :)

  4. Peter [ Sobota 5.11.2011, 22:20 ]

    Aj tak mam z toho hokej.

  5. Peter [ Sobota 5.11.2011, 22:30 ]

    Potrebujem poradit, mam web stranku cukrarenbj.sk. Ked ju otvorim, tak pismenka, kde maju byt mekcene su nejake hieroglifi. Admin mi povedal ze on ked otvori stranku tak ma vsetko ok. Mam nieco zle nastavene alebo to vidite aj vy stranke. Za odpoved dakujem.

  6. 81403 [ Nedeľa 6.11.2011, 12:45 ]

    Čo konkrétne ti nie je jasné? Je dosť možné, že len ja som napísal niečo nezrozumiteľne :)

    Čo sa týka stránky, mne sa síce zobrazila správne (v Opere), ale je tam zle nastavené kódovanie znakov

    <meta http-equiv="content-type" content="text/html; charset=iso88592">
    Kódovanie "iso88592" neexistuje, autor chcel zrejme napísať "ISO-8859-2"..

    Tak či tak, dnes už je toto kódovanie viac menej historické a na webe sa používa len UTF-8

  7. Mamut [ Utorok 6.12.2011, 14:43 ]

    Ooo, oblaciky! Len su dake skarede, vid. kuk http://i.imgur.com/nWxeN.png . To taki kanouri™ nevedia spravit pekne oblake(™?)?

  8. 81403 [ Utorok 6.12.2011, 17:09 ]

    Jaj no, tak nerátal som, že priesvitné veci v Chrome môžu blbnúť keď sú zozoomované :)
    Prečo máš vlastne taký huge-ass zoom? A akí "kanouri"? :)

  9. Mamut [ Utorok 6.12.2011, 20:26 ]

    Kaňouri - sexi tvar slova kanec

    A zoom som si vlastne ani neuvedomil, ech. Preto, ze na stare kolena uz predsa ako zamladi a navyse v mojej prevadzkovej polohe som vyvaleny v kresle a daleko od monitoru. Alebo preto, aby som objavoval skarede oblaky.

    Btw, chcelo by to dake notifikacie, nach vidim, ze si komentuau, vis.

  10. yablko [ Utorok 6.12.2011, 22:37 ]

    možno nie dokonalé, ale check this shit: http://brm.sk/comments/feed

  11. 81403 [ Štvrtok 8.12.2011, 10:07 ]

    Jedného dňa (možno aj dnešného) skúsim pohľadať nejaký plugin. Keď už máme ten WordPress.. Aby si mohol hneď čítať naše prevelice hodnotné reakcie ;)

  12. Loopus [ Piatok 26.4.2013, 21:14 ]

    Ja este mozem odporucit http://www.codecademy.com/,zaklady ejdžtýemel/cíeses/píejdžpí/žavaskript sa tam ucia paradne:)