Obsahuje hodnocený úkol a bonus
✅ Web cokolada se zobrazuje na zadané URL na serveru TuX.
cokolada-master.cokolada.Ve Windows dej pozor: rozbalením nejspíš vznikne složka ve složce cokolada-master\cokolada-master nebo jiná "obludnost". Toto je samozřejmě špatně. Výsledkem musí být pouze složka cokolada se soubory:
cokolada
├── img
│ ├── aztec-chocolate.jpg
│ ├── boby.jpg
│ ├── cokolada.jpg
│ └── nestle-milk.jpg
├── index.html
├── receptury.html
├── style.css
├── vyroba.html
└── zajimavosti.html
cokolada: File → Open Folder.Web tvoří několik samostatných souborů (stránek) a obrázků jako samostatných souborů. Toto je běžná praxe, jinak to ani nejde. Mnoho návštěvníků webů o tom nemá ani tušení.
Technicky není rozdíl mezi soubory .html, .jpg, .png a dalšími.
Ve správci souborů poklepej na soubor index.html. Otevře se ve výchozím prohlížeči (Edge, Chrome, Safari...). Poznámka: Název "index" je vyhrazený pro výchozí webovou stránku.
Projdi si web pomocí tlačítek navigace. Sleduj jak vypadá URL. Na konci bude název zobrazeného souboru.
Pro začátek si budeme pamatovat, že kód webové stránky vypadá jinak, než výsledný vzhled – prohlížeč kód (HTML a CSS) převede do vizuální podoby. Obrázky nepřevádí, jen je zobrazí.
Statické stránky tvoří několik samostatných souborů .html. V prohlížeči se mezi nimi přechází pomocí navigace (hypertextových odkazů na všechny ostatní stránky). Každý vidí to samé – HTML a CSS kód je pro všechny stejný.
Dynamické stránky vyžadují webový server. Teprve ten sestavuje (generuje) výsledek na vyžádání – např. kliknutím na odkaz nebo jinou akcí. Každý může dostat něco jiného. Vyzkoušejte např. na:
Všichni mají otevřenou stejnou adresu (URL), ale každému se zobrazuje jiný výsledek.
Shrnutí:
Letos se naučíme tvořit statické, ve 3. ročníku se setkáte i těmi dynamickými (pouze obor AVT).
V každém případě ani dynamické stránky se bez HTML a CSS neobejdou.
Přestože to není součástí naší výuky, můžeme si zprovoznit jednoduchý dynamický web. Je to jen upravená verze webu Čokoláda. Pro demonstraci, že je opravdu dynamický obsahuje náhodně generovaný text v hlavičce a formulář na stránce Zajímavosti.
Tento web si zprovozníme jiným způsobem - jednodušeji. Má to dva důvody:
Co budeme potřebovat:
Jak na to:
(1) Ve spuštěné aplikaci PowerShell se přihlásíme se na server TuX:
> ssh 10XPrijmeniJ@tux.panska.cz
yes a Enter.Pokud se vše podaří, zobrazí se uvítací obrazovka podobná jako má úvodní stránka serveru https://tux.panska.cz.
(2) Přesun do složky www a kontrolní výpis jejího obsahu (samotný znak $ se nepíše, slouží jen jako informace "toto je příkaz"):
$ cd www
$ ls -l
Ve výpisu bude složka cokolada a soubor index.html. Víc toho na "svém" webu zatím nemáte.
(3) Klonování GitHub repozitáře https://github.com/edumach/cokolada2. Tentokrát ne metodou stažení ZIPu → rozbalení → přejmenování → nahrání, ale přímo "klonováním repozitáře":
$ git clone https://github.com/edumach/cokolada2
$ cd cokolada2
$ tree
Výsledem bude nová složka cokolada2 se soubory ve složce www a její stromový výpis příkazem tree:
.
├── img
│ ├── aztec-chocolate.jpg
│ ├── boby.jpg
│ ├── cokolada.jpg
│ └── nestle-milk.jpg
├── inc
│ ├── hlava.php
│ ├── menu.php
│ └── zapati.php
├── index.php
├── receptury.php
├── style.css
├── vyroba.php
└── zajimavosti.php
Nyní následuje "pouze" kontrola výsledku na adrese:
https://tux.panska.cz/~10XPrijmeniJ/cokolada2
A také odhlášení ze serveru v aplikaci PowerShell příkazem exit.
Na https://github.com/edumach/cokolada2 si jednotlivé soubory můžete projít a prohlédnout.
Na co se zaměřit:
.html mají soubory příponu .php.<?php ... ?>.inc a na požadovaných místech se kód "vkládá" pomocí PHP příkazu include. To je výhoda oproti HTML, který to neumí.✅ Cíl: Web cokolada2 se zobrazuje na zadané URL na serveru TuX.