5. diel - Popis vybraných technológií 2

Javascript

Jazyk JavaScript je neoddeliteľnou súčasťou webov. Je to pomerne jednoduchý skriptovací (to znamená, že pre svoj chod sa nemusia kompilovať, ale je interpretovaný) jazyk, ktorý sa využíva na logiku front endu. Nejedná sa však o jazyk Java, ktorý sa čiastočne zhoduje len v názve, inak sú veľmi rozdielne.

Pomocou JavaScriptu môžeme na stránke meniť obsah, pridávať / odoberať elementy, presúvať sa plynule po stránke atp. Jazyk beží na strane klienta, konkrétne v prehliadači. Pomocou jednoduchého scriptu môžeme do stránky pridať nejaký text, resp. s ním stránku prepísať.

document.write("Nový text na stránce.");

V JavaScriptu môžeme využívať tiež napr. Premenné, ktoré sa definujú pomocou kľúčového slova var. Ak kľúčové slovo var pri deklarácii premennej nezadáme, stáva sa premenná globálnou, teda dostupnú v celom programe. Môžeme však využívať aj podmienky, switche, ternárne operátormi, cykly, funkcia atď. Zaujímavé na tomto jazyku je, že do premenných môžeme uložiť aj funkcie.

var a = 40;
var b = "pes";
c = "auto";

V JavaScriptu môžeme tiež jednoducho vypísať hlášku - kde sa využíva vyskakovacieho okienka. Využíva sa pre to funkcia alert.

var chyba = function(hlaska) {
  alert(hlaska);
}

chyba("Nastala nějaká chyba.");

Pokiaľ budeme chcieť pracovať napr. S HTML elementom, ktorý má nejaký atribút id a zmeniť mu obsah elementu, môžeme to urobiť ukážkovým kódom nižšie. Najskôr si do premennej uložíme element, ktorý získame podľa ID tlacitko. Následne pre tento element zmeníme textový obsah.

var element = document.getElementById("tlacitko");
element.textContent = "Klikni na mě!";

Knižnica jQuery

Knižnica jQuery zjednodušuje výber elementov, ktorý môžeme napísať rovnakým spôsobom, ako selektory v CSS. Okrem zjednodušenej možnosti výberu elementu, či elementov, knižnica poskytuje zjednodušené ovládanie napr. Pre zmenu textu / HTML v elemente, animácie atp.

$('.clanek p').text('Změnil jsem text článku.');

V ukážke vyššie boli vybrané všetky elementy p, ktoré sú potomkami elementu s triedou clanek. Pomocou funkcie text následne zmenenej textový obsah týchto elementov. Ak by sme napísali HTML kód, zapísal by sa ako text.

Php

Jazyk PHP je najbežnejší jazyk, ktorý sa používa pre vývoj webu na strane back endu. V tomto jazyku píšeme kód, ktorý nám následne vygeneruje HTML kód podľa nejakých parametrov - väčšinou podľa url adresy webu.

Syntax sa podobá bežným jazykom, ako napr jazyku C alebo Java. Jazyk je hojne využívaný začiatočníkov, práve vďaka jeho jednoduchej syntax a veľké komunite, na ktorú sa môžu, na najrôznejších diskusných fórach, obrátiť s pomocou.

PHP je zostavovaný na serveri, ktorý musíme mať aj pre lokálne vývoj webu. PHP aplikácie, ako som už načrtol vyššie, reaguje vždy na požiadavku, ktorému sa pokúsi vyhovieť a vráti výstup, napr. V podobe HTML. To tiež znamená, že sa nedá s aplikáciou interagovať inak, než pomocou požiadaviek, ktoré sa odošlú len pri obnove záložky prehliadača - tzv. Refresh, alebo pri príchode na web.

Samozrejme existujú spôsoby, ako tento problém čiastočne odtieniť. Jednou z možností môže byť technológia Ajax, ktorá posiela špeciálne požiadavky i bez refresh webu, a to napríklad pomocou funkcie dostupné v JavaScriptové knižnici jQuery.

Základné konštrukcie jazyka

Na začiatok každého súboru musíme vložiť špeciálnu značku, ktorá hovorí, že začína PHP kód. Značka, vrátane ukončovacie, ktorá nie je povinná a ukončí sa automaticky koncom súboru, je ukázaná na ukážke nižšie.

<?php

?>

Základným príkazom jazyka je funkcia echo, ktorá vypíše obsah argumentu funkcie do webu. V PHP môžeme využívať premenné, ktoré sa píšu s prefixom dolára - znak $. Pre premenné sa neurčuje dátový typ, pretože je jazyk dynamicky typizovanom, rovnako ako JavaScript.

<?php

$a = 5;
$b = "Ahoj světe!";

Oproti iným programovacím jazykom spájanie textových reťazcov nevykonávame znakom plus, ale bodkou.

<?php

$a = 1;
$b = 2;

echo($a + $b); // Výstup 3
echo($a . $b); // Výstup 12

V PHP sa rozlišuje medzi textovým reťazcom napísaným v úvodzovkách a apostrofmi. Pokiaľ do textového reťazca zapísaného v úvodzovkách vložíme názov premennej, premenná sa vypíše.

Ďalej môžeme využívať v PHP klasických funkcií ako podmienky, cykly, pole, zoznamy atp. V PHP sa dá písať objektovo orientovaný kód, a teda môžeme využívať aj triedy. Príklad objektovo orientovaného kódu je ukázaný na ukážke nižšie, v ktorej je trieda človeka, ktorý má metódu pre chodenie a zavolania.

<?php

class Clovek {

  public function krok() {}

  public function promluv($zprava) {}
}

Architektúra MVC

Ak chceme vytvárať náročnejšie webové aplikácie, je nutné, aby sme sa držali nejakej architektúry, ktorá vytvára pomyselnú štruktúru aplikácie a zjednodušuje jej chod.

Jednou z najpoužívanejších metód je metóda MVC alebo MVP. Tieto dve metódy sú si veľmi podobné a niekedy sú aj zamieňané. Pre jednoduchosť budeme nazývať túto metódu architektúrou MVC.

Princíp spočíva v tom, že oddeľujeme logiku a výstup. Aplikáciu rozdeľujeme do troch typov - Model, View (pohľad), Controller (kontrolér). Modely obstarávajú celú logiku aplikácie a môže to byť napríklad odosielaní emailu, správca používateľov atp., Pohľady sú spravidla HTML šablóny, ktoré sú obohatené o jednoduchý PHP kód a cykly a kontrolery vytvárajú prepojenie medzi modelmi a pohľadmi a rieši čo vykonať na základe daných parametrov pre zostavenie stránky - ktoré sa získajú napr. z url adresy webu.

Užívateľ stránky zadá url adresu. Adresu zistí kontrolér, ktorý ju spracuje a rozloží na jednotlivé časti. Ak kontrolér rozhodne, že je adresa platná, zavolá príslušný model, ktorý vykoná svoje funkcie a vráti dáta kontroleru. Kontrolér zavolá pohľad, ktorému dodá dáta, ktoré sa pomocou cyklov atp. vypíšu. Web sa nechá vykresliť a používateľ vidí novú stránku.

Git

Git je verzovacie systém, ktorý sa stará o verziovanie projektu, rozklad projektu na viac častí a prípadné riešenie nezrovnalostí, resp. kolízií, pokiaľ napr. dvaja ľudia vložia do rovnakej časti súboru rozdielny kód. Git si stiahneme z webových stránok projektu a po úspešnej inštalácii dostaneme možnosť ho používať v konzole. K dispozícii je tiež rad grafických programov, medzi ktorými je obľúbený napr. Ten od spoločnosti GitHub Inc. V ročníkové práci budem ukazovať príkazy používané v konzole, ktorú na svojich projektoch používam.

Každá uložená skupina zmien, tá obsahuje jednotlivé čiastkové zmeny v súboroch, sa nazýva commit.

Riešenie kolízií

Ak nastane problém, keď dve verzie kolidujú, môžu nastať 2 prípady. V prvej prípade, tom lepšom, systém sám rozdiel detekuje a správne výsledný súbor uloží. V druhom prípade, keď si systém nebude vedieť rady, ktorá verzia je tá správna, vypíše do konzoly hlášku. Z hlášky je vždy zrejmé, aký súbor, alebo súbory, kolidujú a je potom len na užívateľovi, aby kolízii ručne upravil.

Základné príkazy

Git obsahuje mnoho príkazov, ktoré môže užívateľ používať, avšak pre základnú prácu ich užívateľ potrebuje poznať len niekoľko.

Príkaz git status do konzoly vypíše aktuálne informácie o zmenách v súboroch. Vypíše, ktoré súbory boli zmenené, ktoré zmazané a ktoré boli uložené pre budúce commit.

Príkaz git pull nahrá najnovšiu verziu zo zdieľaného repozitára. Tento príkaz tiež musíme zadať vždy pred tým, než odošleme dáta na zdieľaný repozitár.

Príkaz git add --all uloží všetky zmenené súbory pre budúce commit. Namiesto --all môžeme tiež zadať cestu k chcenému súboru.

Príkaz git commit -m "Opis COMMIT." uloží dané súbory do lokálneho repozitára s príslušným popisom.

Príkaz git push nahrá zmeny z lokálneho repozitára do repozitára zdieľaného. Pred použitím tohto príkazu je nutné zadať príkaz git pull.

Vytvorenie zdieľaného repozitára

Vytvorenie zdieľaného repozitára sa vykonáva na špeciálnych webových aplikáciách, ktoré väčšinou poskytujú verejné repozitára zadarmo. Najznámejší a zároveň najpoužívanejšia je úložisko GitHub. Na tomto úložisku si môže každý užívateľ vytvoriť neobmedzene mnoho verejných repozitárov, za súkromné sa však už platí.

Pre získanie dát z repozitára sa musí tzv. Naklonovať. Príkaz, ktorým repozitár naklonuje do svojho počítača, nájdete na pravej strane webu. Na klonovanie sa využíva príkazu git clone.

Automatizačné systém Gulp

Pre automatizáciu projektu odporúčam využívať systém Gulp, ktorý funguje na báze streamov. To znamená, že na začiatku procesu sa raz načítajú dáta a na konci, pokojne po nespočetnom množstve úprav, sa raz dáta uloží. Vďaka tomuto, pretože práca s diskom je pomalá, je Gulp veľmi rýchly. Dáta, a všetky procesy na nich, sú po celú dobu v pamäti RAM.

Inštalácia

Keďže Gulp funguje nad platformou Node.js, je potrebné ako prvý nainštalovať Node.js. V konzolu, pre inštaláciu doplnkov atp., Budeme využívať príkazu NPM, ktorý pristupuje k balíčkovému systému Node.js. Samotná inštalácia GULP potom prebieha v konzole, kde najskôr nainštalujeme Gulp globálne pomocou príkazu NPM install --global Gulp. Prepneme sa do zložky projektu a ako prvý nainštalujeme doplnok Gulp, pomocou príkazu NPM install --save-dev Gulp.

Po inštalácii GULP musíme vytvoriť súbor gulpfile.js, kam budeme písať naše automatizačné úlohy. Do súboru vložíme nasledujúci kód. Na riadku 3 môžeme vidieť princíp, ako sa jednotlivé úlohy zapisujú.

var gulp = require('gulp');

gulp.task('default', function() {});

Inštalácia doplnkov

Inštalácia doplnkov prebieha obdobným spôsobom, ako inštalácia GULP, čo je tiež doplnok. V balíčkovom systéme NPM si nájdeme chcený Gulp doplnok, ktoré majú z pravidla prefix Gulp. Zistíme si názov doplnku, náhodne napr. Gulp-sass, a do konzoly zadáme príkaz NPM install --save-dev Gulp-sass.

Odporúčané doplnky

Pre webové projekty je vhodné použiť doplnok Gulp-sass, ktorý sa stará o kompiláciu CSS preprocesoru Sass, doplnok Gulp-autoprefixer, ktorý pridáva do výsledného CSS kódu prefixy pre dané CSS vlastnosti, doplnok Gulp-rename, vďaka ktorému môžeme premenovať výsledný súbor, doplnok Gulp-notify, ktorý nám napr. pri chybe môže zobraziť informačné bublinu a napr. doplnok Gulp-sourcemaps, ktorý nám prepojí CSS kód so zdrojovým Sass kódom.

Je dobré nájsť si doplnky, ktoré sami využijete na vašom projekte a pri vašom štýle práce.