| 1 | Stáhněte si přes FTP z fileserveru pomocí účtu anonym soubor php03.zip a extrahujte jej tak, aby rozbalený soubor byl ve složce c:\temp\php03 | FileZilla |
| 2 | Editujte v PSPadu soubor c:\temp\php03\oblibene.sql a prověřte existenci příkazů pro vytvoření tabulky | PSPad |
| 3 | Spusťte z řídícího panelu XAMPP servery Apache a MySQL | XAMPP |
| 4 | Spusťte phpMyAdmin tlačítkem Admin nebo zadáním adresy localhost/phpmyadmin v www prohlížeči | XAMPP, prohlížeč |
| 5 | Vytvořte v phpMyAdmin novou databázi jprijmeni_php03 s porovnáváním utf8_czech_ci, kde jprijmeni nahraďte svým prvním písmenem ze jména a příjmením bez diakritiky | phpMyAdmin |
| 6 | Nastavte novou databázi jako aktuální a importujte soubor c:\temp\php03\oblibene.sql do nově vytvořené databáze pomocí záložky Import a proveďte kontrolu načtení dat | phpMyAdmin |
| 7 | Otevřte v PSPadu formulář pro ukládání hlasování jprijmeni_hlasovani.php | PSPad |
| 8 | Ve značkách <title></title> změňte jméno a příjmení na svoje, upravte název databáze v mysqli_connect, upravte název souboru jprijmeni_graf.php v definici formuláře vysledky1 | |
| 9 | Doplňte si oblíbené značky, které nejsou podle vás uvedeny | |
| 10 | Dokument uložte do kořenové složky webového serveru (DocumentRoot) pod jménem jprijmeni_hlasovani.php (jprijmeni nahraďte) a ověřte jeho vzhled v prohlížeči na adrese localhost/jprijmeni_hlasovani.php | www prohlížeč |
| 11 | Pro testovací účely uložte pomocí formuláře alespoň 10 hlasů s různými kombinacemi voleb. Obsah tabulky oblibene ověřte pomocí phpMyAdmina. |
a) V řádkovém grafu pomocí obrázku
| 12 | Vytvořte v Malování jednobarevný obrázek pasek.png o velikosti 50x50 pixelů a uložte jej do složky c:\Programy\xampp\htdocs\img | Malování |
| 13 | V phpMyAdminu ověřte výsledek dotazu select os, count(*) from oblibene group by os; doplňte ho o sestupné seřazení (přidat alias as pocet, ten pak použít v order by ...) | phpMyAdmin |
| 14 | Otevřte v PSPadu soubor image_graph.php a analyzujte funkci image_graph. Soubor pak zkopírujte do složky DocumentRoot. | PSPad |
| 15 | Otevřte v PSPadu soubor jprijmeni_graf.php - změňte v title jméno a příjmení na svoje, upravte název databáze v mysqli_connect, všimněte si metody post u formuláře. Upravte i název souboru jprijmeni_hlasovani.php v definici formuláře. | PSPad |
| 16 | Na začátek php kódu
vložte příkaz pro vložení souboru s funkcí: include_once("image_graph.php"); |
PSPad |
| 17 | Doplňte příkaz select o sestupné řazení (viz výše). Soubor pak uložte do složky DocumentRoot se změněným názvem a ověřte v prohlížeči zobrazení grafu. | PSPad, prohlížeč |
| 18 | Zvětšete v image_graph.php výšku obrázku na 15 | PSPad |
| 19 | Doplňte do výběrového prvku select další možnosti výběru - jazyk, it_znacka, mobil, auto a ověřte v prohlížeči zobrazení grafů | PSPad, prohlížeč |
b) Zobrazení výsledků pomocí možností HTML5
| 20 | Bitmapová grafika - na stránce https://www.w3schools.com/graphics/canvas_drawing.asp si zkuste změnit barvu a velikost vykreslovaného obdélníku |
| 21 | Vektorová grafika - na stránce https://www.w3schools.com/graphics/svg_rect.asp si zkuste změnit barvu a velikost vykreslovaného obdélníku |
Řádková varianta grafu s využitím vektorové grafiky:
| 22 | Otevřte v PSPadu soubor svg_row_graph.php - a analyzujte jej - všimněte si \". Změňte si barvu grafu - využijte Nástroje - Výběr barvy. Soubor pak uložte do složky DocumentRoot. |
| 23 | V PSPadu do souboru jprijmeni_graf.php vložte na začátek php kódu příkaz pro vložení souboru include_once("svg_row_graph.php"); |
| 24 | Za zobrazení předchozího obrázkového grafu přidejte text "Výsledky ve vektorovém řádkovém grafu:" a poté přidejte vektorový graf pomocí funkce svg_row_graph - po uložení ověřte v prohlížeči zobrazení druhého grafu |
Sloupcová varianta grafu:
| 25 | Analyzujte obsah souboru svg_column_graph.php - přidán <text>. Změňte si barvu grafu a soubor pak uložte do složky DocumentRoot. |
| 26 | V PSPadu do souboru jprijmeni_graf.php vložte na
začátek php kódu příkaz pro vložení souboru:
include_once("svg_column_graph.php"); |
| 27 | Za zobrazení předchozího řádkového grafu přidejte text "Výsledky ve vektorovém sloupcovém grafu:" a poté přidejte vektorový sloupcový graf pomocí funkce svg_column_graph (přidejte třetí vstupní parametr pro výšku grafu) - po uložení ověřte v prohlížeči zobrazení třetího grafu |
Ukončení práce:
| 28 | Výsledek hlasování pro programovací jazyky uložte z prohlížeče jako grafy.pdf |
| 29 | Soubory grafy.pdf a jprijmeni_graf.php z c:\Programy\xampp\htdocs uložte na fileserver do nově očíslované složky |