Vývojové prostredie
Doteraz sme si prebrali osobitne základy jazyka HTML, jazyka CSS pre štýlovanie stránok a nakoniec jazyk PHP. Pravdepodobne bol jazyk PHP z doterajších sekcií pre vás najmenej záživný, možno najťažší a nevideli ste v ňom veľmi význam. Viackrát sme už ale naznačili, že len troška náročnejšie webstránky sa bez použitia tohto alebo iného podobného jazyka nezaobídu. Práve v tomto semestri sa naučíme spolu tieto všetky tri jazyky prepojiť a vysvetlíme si najmä základné použitie jazyka PHP pri webstránkach. Som si istý, že po tejto sekcii objavíte krásu programovania a význam jazyka PHP. Takisto sa naučíme tvoriť ucelenú zložitejšiu webstránku (s viacerými podstránkami), ktorá bude mať základné veci a bude vyzerať ako skutočná stránka so všetkým, čo k tomu patrí. Jednoducho, počas tohto semestra už budeme naozaj niečo tvoriť, ako skutoční programátori!
Všetky kódy, ktoré sme si preberali, sme skúšali na online simulátoroch alebo sme ich písali do osobitného obyčajného textového súboru (v sekcii HTML súbor .html). Zo surfovania po internete viete, že každá webstránka má nejaké menu alebo množstvo odkazov, pomocou ktorých sa môžeme prekliknúť na inú podstránku. Možno ste pochopili, že každá takáto podstránka bude pre nás nateraz samostatný súbor html – samostatná webstránka. Keďže pri tvorení webstránky je nutné mať otvorené vo väčšine všetky jej súbory alebo aspoň ich mať prehľadne pri sebe, vedieť kde čo je a podobne, vznikli pre programátorov (vývojárov, developerov) takzvané vývojové prostredia (IDE - Integrated Development Environment – integrované vývojové prostredie). Sú to obyčajné programy, veľmi podobné klasickým textovým editorom (WordPad, Notepad...), ktoré sú určené na písanie kódu vo väčšine v akomkoľvek jazyku. Ich rozdiel oproti obyčajným textovým editorom je v tom, že obsahujú aj iné nástroje, ktoré uľahčujú prácu programátorom. Existuje veľký počet takýchto prostredí, od najjednoduchších po zložitejšie, ktoré disponujú pokročilejšími nástrojmi.
My budeme na začiatok používať jeden z tých jednoduchších, ktorý nám bude slúžiť na to, aby sme mali na jednom mieste všetky súbory, ktoré súvisia s našou stránkou a aby sme ich jednoducho našli a pohybovali sa medzi nimi. Druhá výhoda pre nás bude zvýrazňovanie kódu, čo predstavuje farebné odlíšenie jednotlivých častí kódu (textu). Aby sme vedeli, o čo sa jedná, poďme si naše prvé IDE spojazdniť a potom sa pustíme do vytvorenia našej prvej webstránky pomocou IDE. Budeme používať IDE s názvom Sublime text, ktorého stránka je na adrese https://www.sublimetext.com. Je to jednoduchý, rýchly, prehľadný nástroj, ktorý je možné používať na troch rôznych prostrediach (Windows, Linux, Mac) a hlavne je možné ho používať zadarmo. Počas písania kódu v tomto editore budeme postupne objavovať aj iné výhody – funkcionality, ktoré nám uľahčia prácu a naučíme sa tak pracovať ako skutoční programátori vo vývojovom prostredí. Po kliknutí na položku download je možné stiahnuť pre nás príslušnú verziu a následne program po inštalácii spustiť.
Po otvorení tohto programu na začiatku veľa neuvidíme. Vytvorte si vo svojom počítači adresár, ak ho ešte nemáte, v ktorom si budeme ukladať všetky naše ukážky kódu. Nazvite ho code (kód) alebo source codes (zdrojové kódy). V editore (sublime) kliknite na file (súbor) a následne na položku open (otvoriť). Zobrazí sa vám štandardný folder explorer (prehľadávač adresárov) vášho disku, nájdite váš adresár na disku a kliknite na open. V ľavej časti editora vidíte svetlý panel, v ktorom na vrchu je názov vášho adresára a pod ním je možné rozbalovať jeho obsah. Práve táto časť bude pre nás slúžiť na prehľad jednotlivých súborov a adresárov na disku. Pomocou tejto časti budeme naše súbory vytvárať, otvárať, mazať, premenovávať a budeme mať nonstop prehľad o našej adresárovej a súborovej štuktúre našich webstránok (projektov). V pravej väčšej časti sa nachádza editor, v ktorom budeme náš kód písať.
Kliknime v ľavej sekcii na názov hlavného adresára pravým tlačítkom a po zobrazení menu (ponuky) kliknime na položku New folder (nový adresár). V spodnej časti sa nám objavil biely input (pás), kde je možné zadať názov adresára, nazvime si ho napríklad 4-Projekt 1 (Ako štvrtý semester a prvý projekt – webstránka). Potom kliknime aj na tento adresár pravým tlačítkom a vyberme možnosť New file (nový súbor). Na vrchu editora sa zobrazila záložka – hlavička s textom untitled. Každý súbor, ktorý budeme mať otvorený, bude mať nad sebou takúto záložku s názvom súboru, aby sa nám ľahšie medzi nimi prepínalo. Poďme si náš súbor pomenovať – uložiť. Klikneme na položku v menu File – Save (uložiť) alebo použijeme klávesovú skratku Ctrl+S (Windows)/Cmd+S (Mac). Vo vyskakovacom okne zadáme názov súboru index.html a klikneme na save alebo stlačíme enter. Po uložení súboru sa nám zobrazil v ľavom paneli v našom adresári pre projekt 1 a rovnako sa jeho názov zobrazuje v jeho záložke na vrchu editora. Skúsme si teraz v editore napísať základný kód webstránky. Mohlo by to vyzerať napríklad takto:
<!DOCTYPE html>
<html>
<head>
<title>Titulok - Nasa korektna webstranka</title>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>
Po napísaní alebo už skopírovaní tohto kódu si môžeme všimnút niekoľko vecí. Na ľavom okraji editora môžete vidieť čísla riadkov, ktorú zlepšujú prehľad a orientáciu v kóde. Na pravom okraji editora sa objavila v hornej časti akokeby zmenšenina kódu. Keď nad ňu prejdete myšou, zvýrazní sa a neskôr, keď bude kódu viacej, budete môcť pomocou tohto okraja rýchlejšie a prehľadnejšie scrollovať v kóde. Skúste si tento kód skopírovať za sebou viac razy, aby ste videli túto vymoženosť. Scrolluje sa kliknutím a držaním tlačítka na myši ponad túto zmenšeninu kódu. Na spodku programu je v ľavej časti neustále vyznačené, na akej pozícii v kóde sa nachádzame. Číslo line (riadok) ukazuje poradového číslo riadka, na ktorom sa práve nachádzame (na ktorom máme kurzor pre písanie). Číslo za slovom column (stĺpec) nám naznačuje pozíciu v riadku zľava. Ako sme si spomenuli na začiatku, editory slúžia na tvorenie kódu vo viacerých jazykoch. V pravom dolnom rohu je vidieť, že program automaticky detekoval náš použitý kód a zvýrazňuje (farebne odlišuje) kód práve tohto jazyka. Ako vidíte, náš kód je viacfarebný. Všimnite si, že názvy tagov sú jedno farbou a ich obsah a zobáčiky sú inou farbou. Takéto farebné zvýrazňovanie je štandardné a slúži na lepšiu prehľadnosť kódu. Okrem toho, ak kliknete na nejaký názov tagu alebo sa tam iba nastavíte kurzorom, podčiarkne sa aj začiatočný aj konečný tag pre tento element (body, h1, html...). Toto je veľmi praktická vymoženosť, najmä keď máme použitých viacero rovnakých tagov pod sebou a s odsadením (zložitá štuktúra). Napríklad keď máme viacero divov za sebou a potom sa scrollneme nižšie, kde je ich naraz napríklad päť ukončených a nevieme, v ktorom sa nachádzame. V pravom dolnom rohu je pred názvom jazyka HTML ešte monosť Tab size (veľkosť tabulátora), ktorá je defaultne nastavená na 4 medzery. V simulátore sme odsadzovanie museli pracne robiť pomocou viacnásobných medzier, teraz nám už stačí len stlačiť klávesu tab a editor nám zadá 4 medzery.
Odteraz budeme všetok kód tvoriť v tomto editore, ako skutoční programátori:) Otvorite si túto stránku (súbor) v prehliadači podobne, ako sme to robili v sekcii jazyka HTML, aby sme videli výsledok. Naša práca by mala teda vyzerať nasledovne. Máme otvorený prehliadač, v ktorom máme otvorený náš aktuálny súbor a rovnako máme otvorené okno editora. Skúste sa prepnúť do editora (alt+tab alebo pomocou kliknutia na spodný panel plochy operačného systému) a dopísať nejaký kód. Následne kliknite na uložiť alebo ešte lepšie naučiť sa používať iba skratku ctrl+s/cmd+s. Potom sa prepnite do prehliadača, najlepšie pomocou skratky alt+tab. Refreshnite stránku, najlepšie pomocou skratky F5 a uvidíte okamžite zmenu. Takto sa rýchlo mení kód v editore a následne sa rýchlo pozrie prejavenie zmeny, či je kód napísané správny a podobne. Tieto dve činnosti robí programátor neustále, v najlepšom prípade má viacero monitorov, kde na jednom je editor a na druhom prehliadač alebo je to vedľa seba na jednom veľkom monitore, aby bola práca jednoduchá a rýchla.